From fbad87fe0162811a72755cf24382dc6bdf09000e Mon Sep 17 00:00:00 2001
From: Ashley E <ashley.echols@kajabi.com>
Date: Fri, 12 Jul 2024 09:13:10 -0500
Subject: [PATCH] Tokens: Adds Letter Spacing (#223)

* 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>
---
 .../src/global/styles/tokens/core/_core.scss  |  59 ++++---
 .../src/global/styles/tokens/core/core.json   | 156 +++++++++-------
 .../styles/tokens/semantic/_semantic.scss     |  18 --
 .../styles/tokens/semantic/semantic.json      | 166 ------------------
 package-lock.json                             |   2 +-
 5 files changed, 126 insertions(+), 275 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..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-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;
@@ -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,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: 0;
+  --pine-spacing-50: 4px;
   --pine-spacing-100: 8px;
   --pine-spacing-150: 12px;
   --pine-spacing-200: 16px;
@@ -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.20px;
+  --pine-letter-spacing-157: 0.22px;
+  --pine-letter-spacing-171: 0.24px;
+  --pine-letter-spacing-185: 0.26px;
 }
diff --git a/libs/core/src/global/styles/tokens/core/core.json b/libs/core/src/global/styles/tokens/core/core.json
index 2b2b1d947..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,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": {
@@ -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": {
@@ -686,6 +672,10 @@
       "value": "0",
       "type": "spacing"
     },
+    "50": {
+      "value": "4px",
+      "type": "spacing"
+    },
     "100": {
       "value": "8px",
       "type": "spacing"
@@ -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"
     }
   }
 }
\ No newline at end of file
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";
 }
diff --git a/libs/core/src/global/styles/tokens/semantic/semantic.json b/libs/core/src/global/styles/tokens/semantic/semantic.json
index 2d92b0b24..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.md}",
-      "fontFamily": "{font-family.greet}"
-    },
-    "type": "typography"
-  },
-  "heading-2": {
-    "value": {
-      "fontWeight": "{font-weight.bold}",
-      "fontSize": "{font-size.200}",
-      "lineHeight": "{line-height.125}",
-      "letterSpacing": "{letter-spacing.sm}",
-      "fontFamily": "{font-family.greet}"
-    },
-    "type": "typography"
-  },
-  "heading-3": {
-    "value": {
-      "fontSize": "{font-size.175}",
-      "fontWeight": "{font-weight.bold}",
-      "lineHeight": "{line-height.100}",
-      "letterSpacing": "{letter-spacing.xs}",
-      "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.xs}",
-      "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.087}",
-      "lineHeight": "{line-height.150}",
-      "fontFamily": "{font-family.greet}"
-    },
-    "type": "typography"
-  },
-  "body-sm-med": {
-    "value": {
-      "fontWeight": "{font-weight.medium}",
-      "fontSize": "{font-size.087}",
-      "lineHeight": "{line-height.150}",
-      "fontFamily": "{font-family.greet}"
-    },
-    "type": "typography"
-  },
-  "body-sm-semi": {
-    "value": {
-      "fontWeight": "{font-weight.semi-bold}",
-      "fontSize": "{font-size.087}",
-      "lineHeight": "{line-height.150}",
-      "fontFamily": "{font-family.greet}"
-    },
-    "type": "typography"
-  },
-  "body-sm-bold": {
-    "value": {
-      "fontWeight": "{font-weight.bold}",
-      "fontSize": "{font-size.087}",
-      "lineHeight": "{line-height.150}",
-      "fontFamily": "{font-family.greet}"
-    },
-    "type": "typography"
-  },
-  "body-xs": {
-    "value": {
-      "fontWeight": "{font-weight.normal}",
-      "fontSize": "{font-size.075}",
-      "lineHeight": "{line-height.100}",
-      "fontFamily": "{font-family.greet}"
-    },
-    "type": "typography"
-  },
-  "body-xs-med": {
-    "value": {
-      "fontWeight": "{font-weight.medium}",
-      "fontSize": "{font-size.075}",
-      "lineHeight": "{line-height.100}",
-      "fontFamily": "{font-family.greet}"
-    },
-    "type": "typography"
-  },
-  "body-xs-semi": {
-    "value": {
-      "fontWeight": "{font-weight.semi-bold}",
-      "fontSize": "{font-size.075}",
-      "lineHeight": "{line-height.100}",
-      "fontFamily": "{font-family.greet}"
-    },
-    "type": "typography"
-  },
-  "body-xs-bold": {
-    "value": {
-      "fontWeight": "{font-weight.bold}",
-      "fontSize": "{font-size.075}",
-      "lineHeight": "{line-height.100}",
-      "fontFamily": "{font-family.greet}"
-    },
-    "type": "typography"
   }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8ee160700..3e637149e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "lerna": "^7.0.1",
         "lint-staged": "^13.0.3",
         "nx": "^19.1.0",
-        "nx-cloud": "*",
+        "nx-cloud": "latest",
         "semver": "^7.3.8",
         "validate-branch-name": "^1.3.0"
       },