# Styling

Styling within the Angular Session UI library is based around the Cygnus “Constellation” design system.

## Setup

The global styles for the library can be included using the `@cygnus-reach-globals()` SCSS mixin, generally in the `:root` element of the stylesheet. Use of this library requires Bootstrap 4 for use in conjunction with `ngx-bootstrap`.

The primary configuration relevant for users of the library is in color and typography tokens. These tokens are implemented as CSS variables for runtime configuration, and begin with appropriate values for the Constellation theme. A complete list of these tokens can be found within the Constellation design system, but the key ones are listed here.

---

### Colors

Color tokens are divided into two groups, with each color specifying numbered intensity variants:

-   2 **user-level**
    -   `primary`
    -   `neutral`
    -   Intensity variants `10` to `90` in increments of 10
-   3 **system-level**
    -   `success`
    -   `warning`
    -   `error`
    -   Intensity variants `20` to `80` in increments of 20, plus `90`.

In both categories, intensity `60` serves as the base for the color. CSS variables are named as `--color-[name]-[intensity]`

---

### Typography

Typography tokens are organized in three axes: font family, size, and weight.

#### Font Families

-   Heading: `--typography-fontFamily-heading`
-   Label: `--typography-fontFamily-label`
-   Paragraph: `--typography-fontFamily-paragraph`
-   Mono: `--typography-fontFamily-mono`

#### Sizes

-   `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `huge`
-   Defined with variables `--typography-fontSize-[size]`

#### Weights

-   `regular`, `bold`
-   Numeric weight defined with variables `--typography-fontWeight-[weight]`

---

## Style Classes

Style classes can be assigned to native HTML elements to follow standardized design concepts such as buttons, text, and elevation. These classes have default Constellation styles but can be overridden by consuming projects.

---

### Buttons

Button styling sets up appropriate padding, borders, colors, and animations for button elements. The size of content within the button is not defined, and is instead usually set by applying the relevant typography classes. Button styling is defined by 2-4 style classes applied to an element:

-   Type (required):
    -   Rectangular (`btn-rect`)
    -   Round (`btn-round`)
    -   Transparent (`btn-tr`)
-   Color (required):
    -   Primary/Brand (`primary`)
    -   Secondary/Neutral (`secondary`)
    -   Success (`primary`)
    -   Warning (`primary`)
    -   Error (`primary`)
-   Type-dependent modifiers and variants

#### Rectangular Buttons

-   Type class: `btn-rect`
-   Also requires:

    -   A variant class (`filled`, `outline`)

**Variant Classes**

-   `filled`: Opaque background with border and neutral text.
-   `outline`: Transparent background with neutral text, using the color for the border and translucent hover/disabled state.

---

#### Round Buttons

-   Type class: `btn-round`
-   Optional modifiers (mutually exclusive):

    -   `outline`, `active`

**Modifier Classes**

-   `active`: Bolder color variant to indicate an active state.
-   `outline`: Outlined styling, akin to rectangular button's outline styling.

Supports child element `notif-dot` with matching border color.

---

#### Transparent Buttons

-   Class: `btn-tr`
-   Represents link-style interaction
-   No additional configuration

---

### Text

The variables described above form the basis for text styling. More complex interrelations of the aforementioned three axes of typography and other native text attributes can be defined by targeting these classes. Text styling requires **three classes simultaneously**:

#### Type

-   `heading`
-   `label`
-   `paragraph`
-   `mono`

#### Size

-   `xs`
-   `sm`
-   `md`
-   `lg`
-   `xl`
-   `xxl`
-   `huge`

#### Weight

-   `regular`
-   `bold`

---

### Elevation

Elements can be given an impression of height and spacing using these elevation classes:

-   `elev-1`
-   `elev-3`
-   `elev-5`
-   `elev-7`