Skip to content

Commit

Permalink
Tokens: Adds Letter Spacing (#223)
Browse files Browse the repository at this point in the history 
* style: adds new letter spacing tokens and removes 0 from some font size and line height values

* style: builds new letter spacing tokens

* style: updates font size, removes typography semantic tokens, and removes leading zero on remaining tokens

* style: builds new tokens

---------

Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com>
  • Loading branch information
@anechol @dev-kjbot @ju-Skinner
2 people authored and ju-Skinner committed Sep 9, 2024
1 parent c42a70d commit 3f670f0
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 274 deletions.
59 changes: 33 additions & 26 deletions libs/core/src/global/styles/tokens/core/_core.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
:root {
--pine-border-radius-0: 0rem;
--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;
Expand All @@ -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: 0rem;
--pine-border-width-thin: 1px;
Expand Down Expand Up @@ -106,23 +106,23 @@
--pine-color-purple-900: #372d82;
--pine-color-purple-950: #221b4b;
--pine-font-family-greet: "Greet";
--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-050: 8px;
--pine-font-size-062: 10px;
--pine-font-size-075: 12px;
--pine-font-size-087: 14px;
--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;
Expand All @@ -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;
Expand All @@ -144,10 +144,8 @@
--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: 0rem;
--pine-spacing-50: 4px;
--pine-spacing-100: 8px;
--pine-spacing-150: 12px;
--pine-spacing-200: 16px;
Expand All @@ -163,5 +161,14 @@
--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;
--pine-letter-spacing-114: 0.16px;
--pine-letter-spacing-128: 0.18px;
--pine-letter-spacing-142: 0.2px;
--pine-letter-spacing-157: 0.22px;
--pine-letter-spacing-171: 0.24px;
--pine-letter-spacing-185: 0.26px;
}
156 changes: 92 additions & 64 deletions libs/core/src/global/styles/tokens/core/core.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@
"value": "0",
"type": "borderRadius"
},
"50": {
"value": "4px",
"type": "borderRadius"
},
"75": {
"value": "6px",
"type": "borderRadius"
},
"100": {
"value": "8px",
"type": "borderRadius"
Expand Down Expand Up @@ -40,14 +48,6 @@
"value": "24px",
"type": "borderRadius"
},
"050": {
"value": "4px",
"type": "borderRadius"
},
"075": {
"value": "6px",
"type": "borderRadius"
},
"round": {
"value": "9999px",
"type": "borderRadius"
Expand Down Expand Up @@ -510,73 +510,73 @@
}
},
"font-size": {
"57": {
"value": "8px",
"type": "fontSizes"
},
"71": {
"value": "10px",
"type": "fontSizes"
},
"85": {
"value": "12px",
"type": "fontSizes"
},
"100": {
"value": "14px",
"type": "fontSizes"
},
"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"
},
"050": {
"value": "8px",
"type": "fontSizes"
},
"062": {
"value": "10px",
"type": "fontSizes"
},
"075": {
"value": "12px",
"type": "fontSizes"
},
"087": {
"value": "14px",
"type": "fontSizes"
}
},
"font-weight": {
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -667,25 +665,17 @@
"300": {
"value": "3",
"type": "lineHeights"
},
"025": {
"value": "0.625",
"type": "lineHeights"
},
"050": {
"value": "0.78125",
"type": "lineHeights"
},
"075": {
"value": "0.9375",
"type": "lineHeights"
}
},
"spacing": {
"0": {
"value": "0",
"type": "spacing"
},
"50": {
"value": "4px",
"type": "spacing"
},
"100": {
"value": "8px",
"type": "spacing"
Expand Down Expand Up @@ -745,10 +735,48 @@
"800": {
"value": "64px",
"type": "spacing"
}
},
"letter-spacing": {
"0": {
"value": "0px",
"type": "letterSpacing"
},
"050": {
"value": "4px",
"type": "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"
}
}
}
18 changes: 0 additions & 18 deletions libs/core/src/global/styles/tokens/semantic/_semantic.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}
Loading

0 comments on commit 3f670f0

Please sign in to comment.