From 98ab0a5316d19f43ff2b1e6514505b3dcd680a98 Mon Sep 17 00:00:00 2001 From: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Date: Thu, 11 Jul 2024 16:23:13 -0500 Subject: [PATCH 1/4] style: adds new letter spacing tokens and removes 0 from some font size and line height values --- .../src/global/styles/tokens/core/core.json | 106 +++++++++++------- .../styles/tokens/semantic/semantic.json | 24 ++-- 2 files changed, 77 insertions(+), 53 deletions(-) diff --git a/libs/core/src/global/styles/tokens/core/core.json b/libs/core/src/global/styles/tokens/core/core.json index 2b2b1d947..3d84ce685 100644 --- a/libs/core/src/global/styles/tokens/core/core.json +++ b/libs/core/src/global/styles/tokens/core/core.json @@ -510,6 +510,22 @@ } }, "font-size": { + "50": { + "value": "8px", + "type": "fontSizes" + }, + "62": { + "value": "10px", + "type": "fontSizes" + }, + "75": { + "value": "12px", + "type": "fontSizes" + }, + "87": { + "value": "14px", + "type": "fontSizes" + }, "100": { "value": "16px", "type": "fontSizes" @@ -561,22 +577,6 @@ "250": { "value": "40px", "type": "fontSizes" - }, - "050": { - "value": "8px", - "type": "fontSizes" - }, - "062": { - "value": "10px", - "type": "fontSizes" - }, - "075": { - "value": "12px", - "type": "fontSizes" - }, - "087": { - "value": "14px", - "type": "fontSizes" } }, "font-weight": { @@ -617,21 +617,19 @@ "type": "fontWeights" } }, - "letter-spacing": { - "xs": { - "value": "-0.15px", - "type": "letterSpacing" + "line-height": { + "25": { + "value": "0.625", + "type": "lineHeights" }, - "sm": { - "value": "-0.5px", - "type": "letterSpacing" + "50": { + "value": "0.78125", + "type": "lineHeights" + }, + "75": { + "value": "0.9375", + "type": "lineHeights" }, - "md": { - "value": "-0.6px", - "type": "letterSpacing" - } - }, - "line-height": { "100": { "value": "1", "type": "lineHeights" @@ -667,18 +665,6 @@ "300": { "value": "3", "type": "lineHeights" - }, - "025": { - "value": "0.625", - "type": "lineHeights" - }, - "050": { - "value": "0.78125", - "type": "lineHeights" - }, - "075": { - "value": "0.9375", - "type": "lineHeights" } }, "spacing": { @@ -750,5 +736,43 @@ "value": "4px", "type": "spacing" } + }, + "letter-spacing": { + "78": { + "value": "0.11px", + "type": "letterSpacing" + }, + "85": { + "value": "0.12px", + "type": "letterSpacing" + }, + "100": { + "value": "0.14px", + "type": "letterSpacing" + }, + "114": { + "value": "0.16px", + "type": "letterSpacing" + }, + "128": { + "value": "0.18px", + "type": "letterSpacing" + }, + "142": { + "value": "0.20px", + "type": "letterSpacing" + }, + "157": { + "value": "0.22px", + "type": "letterSpacing" + }, + "171": { + "value": "0.24px", + "type": "letterSpacing" + }, + "185": { + "value": "0.26px", + "type": "letterSpacing" + } } } \ No newline at end of file diff --git a/libs/core/src/global/styles/tokens/semantic/semantic.json b/libs/core/src/global/styles/tokens/semantic/semantic.json index 2d92b0b24..ac02054bc 100644 --- a/libs/core/src/global/styles/tokens/semantic/semantic.json +++ b/libs/core/src/global/styles/tokens/semantic/semantic.json @@ -244,7 +244,7 @@ "fontWeight": "{font-weight.bold}", "fontSize": "{font-size.250}", "lineHeight": "{line-height.275}", - "letterSpacing": "{letter-spacing.md}", + "letterSpacing": "{letter-spacing.185}", "fontFamily": "{font-family.greet}" }, "type": "typography" @@ -254,7 +254,7 @@ "fontWeight": "{font-weight.bold}", "fontSize": "{font-size.200}", "lineHeight": "{line-height.125}", - "letterSpacing": "{letter-spacing.sm}", + "letterSpacing": "{letter-spacing.171}", "fontFamily": "{font-family.greet}" }, "type": "typography" @@ -264,7 +264,7 @@ "fontSize": "{font-size.175}", "fontWeight": "{font-weight.bold}", "lineHeight": "{line-height.100}", - "letterSpacing": "{letter-spacing.xs}", + "letterSpacing": "{letter-spacing.157}", "fontFamily": "{font-family.greet}" }, "type": "typography" @@ -274,7 +274,7 @@ "fontWeight": "{font-weight.semi-bold}", "fontSize": "{font-size.150}", "lineHeight": "{line-height.125}", - "letterSpacing": "{letter-spacing.xs}", + "letterSpacing": "{letter-spacing.142}", "fontFamily": "{font-family.greet}" }, "type": "typography" @@ -336,7 +336,7 @@ "body-sm": { "value": { "fontWeight": "{font-weight.normal}", - "fontSize": "{font-size.087}", + "fontSize": "{font-size.87}", "lineHeight": "{line-height.150}", "fontFamily": "{font-family.greet}" }, @@ -345,7 +345,7 @@ "body-sm-med": { "value": { "fontWeight": "{font-weight.medium}", - "fontSize": "{font-size.087}", + "fontSize": "{font-size.87}", "lineHeight": "{line-height.150}", "fontFamily": "{font-family.greet}" }, @@ -354,7 +354,7 @@ "body-sm-semi": { "value": { "fontWeight": "{font-weight.semi-bold}", - "fontSize": "{font-size.087}", + "fontSize": "{font-size.87}", "lineHeight": "{line-height.150}", "fontFamily": "{font-family.greet}" }, @@ -363,7 +363,7 @@ "body-sm-bold": { "value": { "fontWeight": "{font-weight.bold}", - "fontSize": "{font-size.087}", + "fontSize": "{font-size.87}", "lineHeight": "{line-height.150}", "fontFamily": "{font-family.greet}" }, @@ -372,7 +372,7 @@ "body-xs": { "value": { "fontWeight": "{font-weight.normal}", - "fontSize": "{font-size.075}", + "fontSize": "{font-size.75}", "lineHeight": "{line-height.100}", "fontFamily": "{font-family.greet}" }, @@ -381,7 +381,7 @@ "body-xs-med": { "value": { "fontWeight": "{font-weight.medium}", - "fontSize": "{font-size.075}", + "fontSize": "{font-size.75}", "lineHeight": "{line-height.100}", "fontFamily": "{font-family.greet}" }, @@ -390,7 +390,7 @@ "body-xs-semi": { "value": { "fontWeight": "{font-weight.semi-bold}", - "fontSize": "{font-size.075}", + "fontSize": "{font-size.75}", "lineHeight": "{line-height.100}", "fontFamily": "{font-family.greet}" }, @@ -399,7 +399,7 @@ "body-xs-bold": { "value": { "fontWeight": "{font-weight.bold}", - "fontSize": "{font-size.075}", + "fontSize": "{font-size.75}", "lineHeight": "{line-height.100}", "fontFamily": "{font-family.greet}" }, From 82c84965191684f207a33dd143f7fc703045f8fa Mon Sep 17 00:00:00 2001 From: Ashley Echols Date: Thu, 11 Jul 2024 16:24:08 -0500 Subject: [PATCH 2/4] style: builds new letter spacing tokens --- .../src/global/styles/tokens/core/_core.scss | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/libs/core/src/global/styles/tokens/core/_core.scss b/libs/core/src/global/styles/tokens/core/_core.scss index 76e39b4aa..afba17092 100644 --- a/libs/core/src/global/styles/tokens/core/_core.scss +++ b/libs/core/src/global/styles/tokens/core/_core.scss @@ -106,6 +106,10 @@ --pine-color-purple-900: #372d82; --pine-color-purple-950: #221b4b; --pine-font-family-greet: "Greet"; + --pine-font-size-50: 8px; + --pine-font-size-62: 10px; + --pine-font-size-75: 12px; + --pine-font-size-87: 14px; --pine-font-size-100: 16px; --pine-font-size-112: 18px; --pine-font-size-125: 20px; @@ -119,10 +123,6 @@ --pine-font-size-225: 36px; --pine-font-size-237: 38px; --pine-font-size-250: 40px; - --pine-font-size-050: 8px; - --pine-font-size-062: 10px; - --pine-font-size-075: 12px; - --pine-font-size-087: 14px; --pine-font-weight-thin: 100; --pine-font-weight-extra-light: 200; --pine-font-weight-light: 300; @@ -132,9 +132,9 @@ --pine-font-weight-bold: 700; --pine-font-weight-extra-bold: 800; --pine-font-weight-heavy: 900; - --pine-letter-spacing-xs: -0.15px; - --pine-letter-spacing-sm: -0.5px; - --pine-letter-spacing-md: -0.6px; + --pine-line-height-25: 0.625; + --pine-line-height-50: 0.78125; + --pine-line-height-75: 0.9375; --pine-line-height-100: 1; --pine-line-height-125: 1.25; --pine-line-height-150: 1.5; @@ -144,9 +144,6 @@ --pine-line-height-250: 2.5; --pine-line-height-275: 2.75; --pine-line-height-300: 3; - --pine-line-height-025: 0.625; - --pine-line-height-050: 0.78125; - --pine-line-height-075: 0.9375; --pine-spacing-0: 0; --pine-spacing-100: 8px; --pine-spacing-150: 12px; @@ -164,4 +161,13 @@ --pine-spacing-750: 60px; --pine-spacing-800: 64px; --pine-spacing-050: 4px; + --pine-letter-spacing-78: 0.11px; + --pine-letter-spacing-85: 0.12px; + --pine-letter-spacing-100: 0.14px; + --pine-letter-spacing-114: 0.16px; + --pine-letter-spacing-128: 0.18px; + --pine-letter-spacing-142: 0.20px; + --pine-letter-spacing-157: 0.22px; + --pine-letter-spacing-171: 0.24px; + --pine-letter-spacing-185: 0.26px; } From 7520afb21bd354dc5210026f43d97cb60280d47a Mon Sep 17 00:00:00 2001 From: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com> Date: Thu, 11 Jul 2024 17:28:33 -0500 Subject: [PATCH 3/4] style: updates font size, removes typography semantic tokens, and removes leading zero on remaining tokens --- .../src/global/styles/tokens/core/core.json | 62 ++++--- .../styles/tokens/semantic/semantic.json | 166 ------------------ 2 files changed, 33 insertions(+), 195 deletions(-) diff --git a/libs/core/src/global/styles/tokens/core/core.json b/libs/core/src/global/styles/tokens/core/core.json index 3d84ce685..2d481f25a 100644 --- a/libs/core/src/global/styles/tokens/core/core.json +++ b/libs/core/src/global/styles/tokens/core/core.json @@ -4,6 +4,14 @@ "value": "0", "type": "borderRadius" }, + "50": { + "value": "4px", + "type": "borderRadius" + }, + "75": { + "value": "6px", + "type": "borderRadius" + }, "100": { "value": "8px", "type": "borderRadius" @@ -40,14 +48,6 @@ "value": "24px", "type": "borderRadius" }, - "050": { - "value": "4px", - "type": "borderRadius" - }, - "075": { - "value": "6px", - "type": "borderRadius" - }, "round": { "value": "9999px", "type": "borderRadius" @@ -510,71 +510,71 @@ } }, "font-size": { - "50": { + "57": { "value": "8px", "type": "fontSizes" }, - "62": { + "71": { "value": "10px", "type": "fontSizes" }, - "75": { + "85": { "value": "12px", "type": "fontSizes" }, - "87": { + "100": { "value": "14px", "type": "fontSizes" }, - "100": { + "116": { "value": "16px", "type": "fontSizes" }, - "112": { + "128": { "value": "18px", "type": "fontSizes" }, - "125": { + "142": { "value": "20px", "type": "fontSizes" }, - "137": { + "157": { "value": "22px", "type": "fontSizes" }, - "150": { + "171": { "value": "24px", "type": "fontSizes" }, - "162": { + "185": { "value": "26px", "type": "fontSizes" }, - "175": { + "200": { "value": "28px", "type": "fontSizes" }, - "187": { + "214": { "value": "30px", "type": "fontSizes" }, - "200": { + "228": { "value": "32px", "type": "fontSizes" }, - "212": { + "242": { "value": "34px", "type": "fontSizes" }, - "225": { + "257": { "value": "36px", "type": "fontSizes" }, - "237": { + "271": { "value": "38px", "type": "fontSizes" }, - "250": { + "285": { "value": "40px", "type": "fontSizes" } @@ -672,6 +672,10 @@ "value": "0", "type": "spacing" }, + "50": { + "value": "4px", + "type": "spacing" + }, "100": { "value": "8px", "type": "spacing" @@ -731,13 +735,13 @@ "800": { "value": "64px", "type": "spacing" - }, - "050": { - "value": "4px", - "type": "spacing" } }, "letter-spacing": { + "0": { + "value": "0px", + "type": "letterSpacing" + }, "78": { "value": "0.11px", "type": "letterSpacing" diff --git a/libs/core/src/global/styles/tokens/semantic/semantic.json b/libs/core/src/global/styles/tokens/semantic/semantic.json index ac02054bc..058e61489 100644 --- a/libs/core/src/global/styles/tokens/semantic/semantic.json +++ b/libs/core/src/global/styles/tokens/semantic/semantic.json @@ -238,171 +238,5 @@ } } } - }, - "heading-1": { - "value": { - "fontWeight": "{font-weight.bold}", - "fontSize": "{font-size.250}", - "lineHeight": "{line-height.275}", - "letterSpacing": "{letter-spacing.185}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "heading-2": { - "value": { - "fontWeight": "{font-weight.bold}", - "fontSize": "{font-size.200}", - "lineHeight": "{line-height.125}", - "letterSpacing": "{letter-spacing.171}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "heading-3": { - "value": { - "fontSize": "{font-size.175}", - "fontWeight": "{font-weight.bold}", - "lineHeight": "{line-height.100}", - "letterSpacing": "{letter-spacing.157}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "heading-4": { - "value": { - "fontWeight": "{font-weight.semi-bold}", - "fontSize": "{font-size.150}", - "lineHeight": "{line-height.125}", - "letterSpacing": "{letter-spacing.142}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "heading-5": { - "value": { - "fontWeight": "{font-weight.semi-bold}", - "fontSize": "{font-size.112}", - "lineHeight": "{line-height.225}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "heading-6": { - "value": { - "fontWeight": "{font-weight.semi-bold}", - "fontSize": "{font-size.100}", - "lineHeight": "{line-height.175}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body": { - "value": { - "fontWeight": "{font-weight.normal}", - "fontSize": "{font-size.100}", - "lineHeight": "{line-height.150}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body-med": { - "value": { - "fontSize": "{font-size.100}", - "lineHeight": "{line-height.150}", - "fontWeight": "{font-weight.medium}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body-semi": { - "value": { - "fontSize": "{font-size.100}", - "lineHeight": "{line-height.150}", - "fontWeight": "{font-weight.semi-bold}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body-bold": { - "value": { - "fontSize": "{font-size.100}", - "lineHeight": "{line-height.150}", - "fontWeight": "{font-weight.bold}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body-sm": { - "value": { - "fontWeight": "{font-weight.normal}", - "fontSize": "{font-size.87}", - "lineHeight": "{line-height.150}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body-sm-med": { - "value": { - "fontWeight": "{font-weight.medium}", - "fontSize": "{font-size.87}", - "lineHeight": "{line-height.150}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body-sm-semi": { - "value": { - "fontWeight": "{font-weight.semi-bold}", - "fontSize": "{font-size.87}", - "lineHeight": "{line-height.150}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body-sm-bold": { - "value": { - "fontWeight": "{font-weight.bold}", - "fontSize": "{font-size.87}", - "lineHeight": "{line-height.150}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body-xs": { - "value": { - "fontWeight": "{font-weight.normal}", - "fontSize": "{font-size.75}", - "lineHeight": "{line-height.100}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body-xs-med": { - "value": { - "fontWeight": "{font-weight.medium}", - "fontSize": "{font-size.75}", - "lineHeight": "{line-height.100}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body-xs-semi": { - "value": { - "fontWeight": "{font-weight.semi-bold}", - "fontSize": "{font-size.75}", - "lineHeight": "{line-height.100}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" - }, - "body-xs-bold": { - "value": { - "fontWeight": "{font-weight.bold}", - "fontSize": "{font-size.75}", - "lineHeight": "{line-height.100}", - "fontFamily": "{font-family.greet}" - }, - "type": "typography" } } \ No newline at end of file From 3a955b1fb1d7b1c6743cf2bed9891d8a48eedaf5 Mon Sep 17 00:00:00 2001 From: Ashley Echols Date: Thu, 11 Jul 2024 17:29:09 -0500 Subject: [PATCH 4/4] style: builds new tokens --- .../src/global/styles/tokens/core/_core.scss | 41 ++++++++++--------- .../styles/tokens/semantic/_semantic.scss | 18 -------- 2 files changed, 21 insertions(+), 38 deletions(-) diff --git a/libs/core/src/global/styles/tokens/core/_core.scss b/libs/core/src/global/styles/tokens/core/_core.scss index afba17092..390b1a9aa 100644 --- a/libs/core/src/global/styles/tokens/core/_core.scss +++ b/libs/core/src/global/styles/tokens/core/_core.scss @@ -1,5 +1,7 @@ :root { --pine-border-radius-0: 0; + --pine-border-radius-50: 4px; + --pine-border-radius-75: 6px; --pine-border-radius-100: 8px; --pine-border-radius-125: 10px; --pine-border-radius-150: 12px; @@ -9,8 +11,6 @@ --pine-border-radius-250: 20px; --pine-border-radius-275: 22px; --pine-border-radius-300: 24px; - --pine-border-radius-050: 4px; - --pine-border-radius-075: 6px; --pine-border-radius-round: 9999px; --pine-border-width-none: 0; --pine-border-width-thin: 1px; @@ -106,23 +106,23 @@ --pine-color-purple-900: #372d82; --pine-color-purple-950: #221b4b; --pine-font-family-greet: "Greet"; - --pine-font-size-50: 8px; - --pine-font-size-62: 10px; - --pine-font-size-75: 12px; - --pine-font-size-87: 14px; - --pine-font-size-100: 16px; - --pine-font-size-112: 18px; - --pine-font-size-125: 20px; - --pine-font-size-137: 22px; - --pine-font-size-150: 24px; - --pine-font-size-162: 26px; - --pine-font-size-175: 28px; - --pine-font-size-187: 30px; - --pine-font-size-200: 32px; - --pine-font-size-212: 34px; - --pine-font-size-225: 36px; - --pine-font-size-237: 38px; - --pine-font-size-250: 40px; + --pine-font-size-57: 8px; + --pine-font-size-71: 10px; + --pine-font-size-85: 12px; + --pine-font-size-100: 14px; + --pine-font-size-116: 16px; + --pine-font-size-128: 18px; + --pine-font-size-142: 20px; + --pine-font-size-157: 22px; + --pine-font-size-171: 24px; + --pine-font-size-185: 26px; + --pine-font-size-200: 28px; + --pine-font-size-214: 30px; + --pine-font-size-228: 32px; + --pine-font-size-242: 34px; + --pine-font-size-257: 36px; + --pine-font-size-271: 38px; + --pine-font-size-285: 40px; --pine-font-weight-thin: 100; --pine-font-weight-extra-light: 200; --pine-font-weight-light: 300; @@ -145,6 +145,7 @@ --pine-line-height-275: 2.75; --pine-line-height-300: 3; --pine-spacing-0: 0; + --pine-spacing-50: 4px; --pine-spacing-100: 8px; --pine-spacing-150: 12px; --pine-spacing-200: 16px; @@ -160,7 +161,7 @@ --pine-spacing-700: 56px; --pine-spacing-750: 60px; --pine-spacing-800: 64px; - --pine-spacing-050: 4px; + --pine-letter-spacing-0: 0px; --pine-letter-spacing-78: 0.11px; --pine-letter-spacing-85: 0.12px; --pine-letter-spacing-100: 0.14px; diff --git a/libs/core/src/global/styles/tokens/semantic/_semantic.scss b/libs/core/src/global/styles/tokens/semantic/_semantic.scss index 74fdeed27..a8ef167ca 100644 --- a/libs/core/src/global/styles/tokens/semantic/_semantic.scss +++ b/libs/core/src/global/styles/tokens/semantic/_semantic.scss @@ -40,22 +40,4 @@ --pine-border-focus-default: 2px solid #bfdbfe; --pine-border-focus-destructive: 2px solid #fecaca; --pine-border-focus-error: 2px solid #fecaca; - --pine-heading-1: 700 40px/2.75 "Greet"; - --pine-heading-2: 700 32px/1.25 "Greet"; - --pine-heading-3: 700 28px/1 "Greet"; - --pine-heading-4: 600 24px/1.25 "Greet"; - --pine-heading-5: 600 18px/2.25 "Greet"; - --pine-heading-6: 600 16px/1.75 "Greet"; - --pine-body: 400 16px/1.5 "Greet"; - --pine-body-med: 500 16px/1.5 "Greet"; - --pine-body-semi: 600 16px/1.5 "Greet"; - --pine-body-bold: 700 16px/1.5 "Greet"; - --pine-body-sm: 400 14px/1.5 "Greet"; - --pine-body-sm-med: 500 14px/1.5 "Greet"; - --pine-body-sm-semi: 600 14px/1.5 "Greet"; - --pine-body-sm-bold: 700 14px/1.5 "Greet"; - --pine-body-xs: 400 12px/1 "Greet"; - --pine-body-xs-med: 500 12px/1 "Greet"; - --pine-body-xs-semi: 600 12px/1 "Greet"; - --pine-body-xs-bold: 700 12px/1 "Greet"; }