From ec0487d08ae36db7e2d3ce3cd593b53e060ebdae Mon Sep 17 00:00:00 2001 From: Alex Bueno <44420072+aweell@users.noreply.github.com> Date: Tue, 7 Dec 2021 11:58:37 +0100 Subject: [PATCH 1/8] Update `font-leading-loose-01` description field --- guidelines/principles/typography/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guidelines/principles/typography/README.md b/guidelines/principles/typography/README.md index e50befe8..005f4465 100644 --- a/guidelines/principles/typography/README.md +++ b/guidelines/principles/typography/README.md @@ -79,7 +79,7 @@ We use a ratio of 1:1.5 as a standard `line-height` value. A body font of 16px ( | `font-leading-compact-02` | _Set line height as 1.25em_ | `line-height` | 1.25 | | `font-leading-compact-01` | _Set line height as 1.365em_ | `line-height` | 1.365 | | `font-leading-normal` | _Set line height as 1.5em_ | `line-height` | 1.5 | -| `font-leading-loose-01` | _Set line height as 1.75em_ | `line-height` | 1.715 | +| `font-leading-loose-01` | _Set line height as 1.715em_ | `line-height` | 1.715 | | `font-leading-loose-02` | _Set line height as 2em_ | `line-height` | 2 | From 81e11859c3243ebef33b9724891606b7c6890499 Mon Sep 17 00:00:00 2001 From: Alex Bueno <44420072+aweell@users.noreply.github.com> Date: Tue, 7 Dec 2021 12:01:14 +0100 Subject: [PATCH 2/8] Remove headings from `principles/typography` documentation --- guidelines/principles/typography/README.md | 158 --------------------- 1 file changed, 158 deletions(-) diff --git a/guidelines/principles/typography/README.md b/guidelines/principles/typography/README.md index 005f4465..940f5573 100644 --- a/guidelines/principles/typography/README.md +++ b/guidelines/principles/typography/README.md @@ -99,165 +99,7 @@ We use a ratio of 1:1.5 as a standard `line-height` value. A body font of 16px ( | `font-underline` | _Underline the text_ | `text-decoration` | underline | | `font-line-through` | _Put a strikethrough the text_ | `text-decoration` | line-through | -## Type styles -## Headings - -**`headings-h1`** - -``` -headings-h1: { - font-family: font-sans; - font-weight: font-light; - font-size: font-scale-08; - font-style: font-normal; - text-transform: initial; - letter-spacing: font-tracking-tight-01; - line-height: font-leading-compact-01; -} -``` - -**`headings-h2`** - -``` -headings-h2: { - font-family: font-sans; - font-weight: font-regular; - font-size: font-scale-07; - font-style: font-normal; - text-transform: initial; - letter-spacing: font-tracking-normal; - line-height: font-leading-compact-01; -} -``` - -**`headings-h3`** - -``` -headings-h3: { - font-family: font-sans; - font-weight: font-regular; - font-size: font-scale-06; - font-style: font-normal; - text-transform: initial; - letter-spacing: font-tracking-normal; - line-height: font-leading-normal; -} -``` - -**`headings-h4`** - -``` -headings-h4: { - font-family: font-sans; - font-weight: font-regular; - font-size: font-scale-05; - font-style: font-normal; - text-transform: initial; - letter-spacing: font-tracking-normal; - line-height: font-leading-normal; -} -``` - -**`headings-h5`** - -``` -headings-h5: { - font-family: font-sans; - font-weight: font-regular; - font-size: font-scale-04; - font-style: font-normal; - text-transform: initial; - letter-spacing: font-tracking-normal; - line-height: font-leading-normal; -} -``` - -## Body - -**`body-01`** - -``` -body-01: { - font-family: font-sans; - font-weight: font-regular; - font-size: font-scale-03; - font-style: font-normal; - text-transform: initial; - letter-spacing: font-tracking-normal; - line-height: font-leading-normal; -} -``` -**`body-02`** - -``` -body-02: { - font-family: font-sans; - font-weight: font-semibold; - font-size: font-scale-03; - font-style: font-normal; - text-transform: initial; - letter-spacing: font-tracking-normal; - line-height: font-leading-normal; -} -``` -**`body-03`** - -``` -body-03: { - font-family: font-sans; - font-weight: font-regular; - font-size: font-scale-02; - font-style: font-normal; - text-transform: initial; - letter-spacing: font-tracking-normal; - line-height: font-leading-normal; -} -``` - -**`body-04`** - -``` -body-04: { - font-family: font-sans; - font-weight: font-semibold; - font-size: font-scale-02; - font-style: font-normal; - text-transform: initial; - letter-spacing: font-tracking-normal; - line-height: font-leading-normal; -} -``` - -## Additional styles - -**`caption`** - -``` -caption: { - font-family: font-sans; - font-weight: font-regular; - font-size: font-scale-01; - font-style: font-italic; - text-transform: initial; - letter-spacing: font-tracking-normal; - line-height: font-leading-normal; -} -``` - -**`overline`** - -``` -overline: { - font-family: font-sans; - font-weight: font-regular; - font-size: font-scale-02; - font-style: font-normal; - text-transform: uppercase; - letter-spacing: font-tracking-wide-02; - line-height: font-leading-normal; -} -``` ____________________________________________________________ [Edit this page on Github](https://github.com/dxc-technology/halstack-style-guide/blob/master/guidelines/principles/typography/README.md) From 3945533263ae90370888090364f35a6d088ca4f7 Mon Sep 17 00:00:00 2001 From: Alex Bueno <44420072+aweell@users.noreply.github.com> Date: Tue, 7 Dec 2021 12:22:41 +0100 Subject: [PATCH 3/8] Update core token naming --- guidelines/principles/typography/README.md | 212 ++++++++++++++++----- 1 file changed, 161 insertions(+), 51 deletions(-) diff --git a/guidelines/principles/typography/README.md b/guidelines/principles/typography/README.md index 940f5573..d7d60a52 100644 --- a/guidelines/principles/typography/README.md +++ b/guidelines/principles/typography/README.md @@ -16,90 +16,200 @@ Make sure you include all the different typographic variants in order to enhance For our sans-serif `font-family`, we use the humanist typeface Open Sans, designed by Steve Matteson and licensed under the [Apache License, Version 2.0.](https://www.apache.org/licenses/LICENSE-2.0.html) -| Token | Description | Property | Value | -| :--- | :--- | :--- | :--- | -| `font-family-sans` | _Default font family sans-serif_ | `font-family` | 'Open Sans', sans-serif; | +| Token | Description | Property | Value | +| :--- | :--- | :--- | :--- | +| `font-family-sans` | _Default font family sans-serif_ | `font-family` | 'Open Sans', sans-serif; | ## Weight In order to add contrast between typographic elements in the UI, Halstack uses four different and well balanced `font-weight` values. -| Token | Description | Property | Value | -| :--- | :--- | :--- | :--- | -| `font-light` | _Set font weight as light (300)_ | `font-weight` | 300 | -| `font-regular` | _Set font weight as regular (400)_ | `font-weight` | 400 | -| `font-semibold` | _Set font weight as semibold (600)_ | `font-weight` | 600 | -| `font-bold` | _Set font weight as bold (700)_ | `font-weight` | 700 | +| Token | Description | Property | Value | +| :--- | :--- | :--- | :--- | +| `font-weight-light` | _Set font weight as light (300)_ | `font-weight` | 300 | +| `font-weight-regular` | _Set font weight as regular (400)_ | `font-weight` | 400 | +| `font-weight-semibold` | _Set font weight as semibold (600)_ | `font-weight` | 600 | +| `font-weight-bold` | _Set font weight as bold (700)_ | `font-weight` | 700 | ## Scale As we approached the foundational elements with simplification and standardization in mind, the typographic scale is one of the most important elements to create hierarchy. Our type scale provides eight relative values based on a root font size of 16px, making it scalable and accesible. -| Token | Description | Property | Value(rem) | -| :--- | :--- | :--- | :--- | -| `font-scale-01` | _Set the font size as 12px_ | `font-size` | 0.75 | -| `font-scale-02` | _Set the font size as 14px_ | `font-size` | 0.875 | -| `font-scale-03` | _Set the font size as 16px_ | `font-size` | 1 | -| `font-scale-04` | _Set the font size as 20px_ | `font-size` | 1.25 | -| `font-scale-05` | _Set the font size as 24px_ | `font-size` | 1.5 | -| `font-scale-06` | _Set the font size as 32px_ | `font-size` | 2 | -| `font-scale-07` | _Set the font size as 48px_ | `font-size` | 3 | -| `font-scale-08` | _Set the font size as 60px_ | `font-size` | 3.75 | +| Token | Description | Property | Value(rem) | +| :--- | :--- | :--- | :--- | +| `font-scale-01` | _Set the font size as 12px_ | `font-size` | 0.75 | +| `font-scale-02` | _Set the font size as 14px_ | `font-size` | 0.875 | +| `font-scale-03` | _Set the font size as 16px_ | `font-size` | 1 | +| `font-scale-04` | _Set the font size as 20px_ | `font-size` | 1.25 | +| `font-scale-05` | _Set the font size as 24px_ | `font-size` | 1.5 | +| `font-scale-06` | _Set the font size as 32px_ | `font-size` | 2 | +| `font-scale-07` | _Set the font size as 48px_ | `font-size` | 3 | +| `font-scale-08` | _Set the font size as 60px_ | `font-size` | 3.75 | ## Formatting ### Style -| Token | Description | Property | Value | -| :--- | :--- | :--- | :--- | -| `font-italic` | _Set font style as italic_ | `font-style` | italic | -| `font-normal` | _Set font style as normal_ | `font-style` | normal | +| Token | Description | Property | Value | +| :--- | :--- | :--- | :--- | +| `font-style-italic` | _Set font style as italic_ | `font-style` | italic | +| `font-style-normal` | _Set font style as normal_ | `font-style` | normal | + ### Letter spacing We calibrate our `letter-spacing` at large scales to provide a better legibility and readability of our text. -| Token | Description | Property | Value(em) | -| :--- | :--- | :--- | :--- | -| `font-tracking-tight-02` | _Set letter spacing as -0.025em_ | `letter-spacing` | -0.025 | -| `font-tracking-tight-01` | _Set letter spacing as -0.0125em_ | `letter-spacing` | -0.0125 | -| `font-tracking-normal` | _Set letter spacing as 0em_ | `letter-spacing` | 0 | -| `font-tracking-wide-01` | _Set letter spacing as 0.025em_ | `letter-spacing` | 0.025 | -| `font-tracking-wide-02` | _Set letter spacing as 0.05em_ | `letter-spacing` | 0.05 | -| `font-tracking-wide-03` | _Set letter spacing as 0.1em_ | `letter-spacing` | 0.1 | +| Token | Description | Property | Value(em) | +| :--- | :--- | :--- | :--- | +| `font-tracking-tight-02` | _Set letter spacing as -0.025em_ | `letter-spacing` | -0.025 | +| `font-tracking-tight-01` | _Set letter spacing as -0.0125em_ | `letter-spacing` | -0.0125 | +| `font-tracking-normal` | _Set letter spacing as 0em_ | `letter-spacing` | 0 | +| `font-tracking-wide-01` | _Set letter spacing as 0.025em_ | `letter-spacing` | 0.025 | +| `font-tracking-wide-02` | _Set letter spacing as 0.05em_ | `letter-spacing` | 0.05 | +| `font-tracking-wide-03` | _Set letter spacing as 0.1em_ | `letter-spacing` | 0.1 | ### Leading We use a ratio of 1:1.5 as a standard `line-height` value. A body font of 16px (1rem) returns a value of 24px (1.5rem), which is the main reference measurement for the vertical organization. -| Token | Description | Property | Value(em) | -| :--- | :--- | :--- | :--- | -| `font-leading-compact-03` | _Set line height as 1em_ | `line-height` | 1 | -| `font-leading-compact-02` | _Set line height as 1.25em_ | `line-height` | 1.25 | -| `font-leading-compact-01` | _Set line height as 1.365em_ | `line-height` | 1.365 | -| `font-leading-normal` | _Set line height as 1.5em_ | `line-height` | 1.5 | -| `font-leading-loose-01` | _Set line height as 1.715em_ | `line-height` | 1.715 | -| `font-leading-loose-02` | _Set line height as 2em_ | `line-height` | 2 | +| Token | Description | Property | Value(em) | +| :--- | :--- | :--- | :--- | +| `font-leading-compact-03` | _Set line height as 1em_ | `line-height` | 1 | +| `font-leading-compact-02` | _Set line height as 1.25em_ | `line-height` | 1.25 | +| `font-leading-compact-01` | _Set line height as 1.365em_ | `line-height` | 1.365 | +| `font-leading-normal` | _Set line height as 1.5em_ | `line-height` | 1.5 | +| `font-leading-loose-01` | _Set line height as 1.715em_ | `line-height` | 1.715 | +| `font-leading-loose-02` | _Set line height as 2em_ | `line-height` | 2 | ### Capitalization -| Token | Description | Property | Value | -| :--- | :--- | :--- | :--- | -| `font-initial` | _Preserve default value_ | `text-transform` | initial | -| `font-lowercase` | _Transform text to lowercase_ | `text-transform` | lowercase | -| `font-uppercase` | _Transform text to uppercase_ | `text-transform` | uppercase | +| Token | Description | Property | Value | +| :--- | :--- | :--- | :--- | +| `font-transform-initial` | _Preserve default value_ | `text-transform` | initial | +| `font-transform-lowercase` | _Transform text to lowercase_ | `text-transform` | lowercase | +| `font-transformuppercase` | _Transform text to uppercase_ | `text-transform` | uppercase | ### Text decoration -| Token | Description | Property | Value | -| :--- | :--- | :--- | :--- | -| `font-no-line` | _Unset all present decorations_ | `text-decoration` | none | -| `font-underline` | _Underline the text_ | `text-decoration` | underline | -| `font-line-through` | _Put a strikethrough the text_ | `text-decoration` | line-through | - - +| Token | Description | Property | Value | +| :--- | :--- | :--- | :--- | +| `font-decoration-no-line` | _Unset all present decorations_ | `text-decoration` | none | +| `font-decoration-underline` | _Underline the text_ | `text-decoration` | underline | +| `font-decoration-line-through` | _Put a strikethrough the text_ | `text-decoration` | line-through | + + +## Hasltack type set + +### Headings + +Styles for the headings can be found in the [component documentation](https://github.com/dxc-technology/halstack-style-guide/blob/master/guidelines/components/heading/README.md). When using native `
~)vF$_5OyR71Q^g=baVHLS}$H^BC&oKj8@{^j)&YlC)+i{tE@NjiQojV`5
zo{yir;YRoGi4RTyCx6}tArhklU#wqU2AT2a+D#19H}b&mq;)QLOWDbjIL@fUX5K%5
zdMO1DR5scmGW@M;x!y1mcSZWssL9Os44HN1IyC5m9Mi4b?mrTawexH3b|YyuCTu-!
zU+$^hIc+!W$zPG}>zgSbuUkGcHv%z)#Q6Jdq<_;p%{|=aJu*~@z;4n)c}7&0jAan*
zw(gh6vvBK^-XX%ArjC(V|MBh;SHi<18ZvHmeMh?D=SAL^Aqc`WSU$E{=@a}5G`**D
z%+jx8Q|{;6Xg8R9C
30wEMl322