From 7f305f747dbd1d3fb5374956607318ecc01d96a9 Mon Sep 17 00:00:00 2001
From: Ashley E <ashley.echols@kajabi.com>
Date: Thu, 18 Jul 2024 11:10:21 -0500
Subject: [PATCH] Tokens: Adds Initial Semantic Tokens (#226)

* style: adds initial semantic tokens

* style: builds new semantic tokens

---------

Co-authored-by: Kajabi Automations Bot <120066875+dev-kjbot@users.noreply.github.com>
---
 .../styles/tokens/semantic/_semantic.scss     |  39 +---
 .../styles/tokens/semantic/semantic.json      | 194 ++----------------
 2 files changed, 16 insertions(+), 217 deletions(-)

diff --git a/libs/core/src/global/styles/tokens/semantic/_semantic.scss b/libs/core/src/global/styles/tokens/semantic/_semantic.scss
index a8ef167ca..b72e4bade 100644
--- a/libs/core/src/global/styles/tokens/semantic/_semantic.scss
+++ b/libs/core/src/global/styles/tokens/semantic/_semantic.scss
@@ -1,43 +1,12 @@
 :root {
   --pine-border-radius-default: 8px;
   --pine-border-radius-circle: 9999px;
-  --pine-color-background-action-primary-default: #343332;
-  --pine-color-background-action-primary-disabled: #d2d1d1;
-  --pine-color-background-action-primary-hover: #1a1a19;
-  --pine-color-background-action-secondary-default: #ffffff;
-  --pine-color-background-action-accent-default: #92c5fd;
-  --pine-color-background-action-accent-disabled: #eff6ff;
-  --pine-color-background-action-accent-hover: #60a5fa;
-  --pine-color-background-action-destructive-default: #fda5a5;
-  --pine-color-background-action-destructive-disabled: #fef2f2;
-  --pine-color-background-action-destructive-hover: #f87171;
-  --pine-color-background-container-default: #ffffff;
-  --pine-color-background-form-default: #ffffff;
-  --pine-color-background-sentiment-neutral: #343332;
-  --pine-color-background-sentiment-positive: #73e2a3;
-  --pine-color-background-sentiment-negative: #fda5a5;
-  --pine-color-background-sentiment-attentive: #fed04b;
-  --pine-color-background-sentiment-informative: #92c5fd;
-  --pine-color-text-action-primary-default: #ffffff;
-  --pine-color-text-action-primary-disabled: #828180;
-  --pine-color-text-action-accent-default: #ffffff;
-  --pine-color-text-action-accent-disabled: #bfdbfe;
-  --pine-color-text-action-destructive-default: #ffffff;
-  --pine-color-text-action-destructive-disabled: #fecaca;
-  --pine-color-text-body-default: #343332;
-  --pine-color-text-form-default: #343332;
-  --pine-color-text-form-disabled: #6c6a69;
-  --pine-color-text-form-error: #fda5a5;
-  --pine-color-text-form-placeholder: #6c6a69;
-  --pine-color-text-heading-default: #1a1a19;
-  --pine-color-text-icon-default: #343332;
-  --pine-color-text-link-default: #92c5fd;
-  --pine-color-text-link-hover: #60a5fa;
+  --pine-color-text-default: #343332;
+  --pine-color-text-interactive-default: #6c6a69;
+  --pine-color-text-interactive-disabled: #9b9a98;
+  --pine-color-background-default: #ffffff;
   --pine-border-default: 1px solid #d2d1d1;
   --pine-border-interactive-default: 1px solid #bbbab9;
   --pine-border-interactive-hover: 1px solid #9b9a98;
   --pine-border-interactive-error: 1px solid #fda5a5;
-  --pine-border-focus-default: 2px solid #bfdbfe;
-  --pine-border-focus-destructive: 2px solid #fecaca;
-  --pine-border-focus-error: 2px solid #fecaca;
 }
diff --git a/libs/core/src/global/styles/tokens/semantic/semantic.json b/libs/core/src/global/styles/tokens/semantic/semantic.json
index 058e61489..4f4e857ae 100644
--- a/libs/core/src/global/styles/tokens/semantic/semantic.json
+++ b/libs/core/src/global/styles/tokens/semantic/semantic.json
@@ -33,32 +33,6 @@
         },
         "type": "border"
       }
-    },
-    "focus": {
-      "default": {
-        "value": {
-          "color": "{color.blue.200}",
-          "width": "{border-width.thick}",
-          "style": "solid"
-        },
-        "type": "border"
-      },
-      "destructive": {
-        "value": {
-          "color": "{color.red.200}",
-          "width": "{border-width.thick}",
-          "style": "solid"
-        },
-        "type": "border"
-      },
-      "error": {
-        "value": {
-          "color": "{color.red.200}",
-          "width": "{border-width.thick}",
-          "style": "solid"
-        },
-        "type": "border"
-      }
     }
   },
   "border-radius": {
@@ -72,171 +46,27 @@
     }
   },
   "color": {
-    "background": {
-      "action": {
-        "primary": {
-          "default": {
-            "value": "{color.grey.900}",
-            "type": "color"
-          },
-          "disabled": {
-            "value": "{color.grey.300}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{color.grey.950}",
-            "type": "color"
-          }
-        },
-        "secondary": {
-          "default": {
-            "value": "{color.white}",
-            "type": "color"
-          }
-        },
-        "accent": {
-          "default": {
-            "value": "{color.blue.300}",
-            "type": "color"
-          },
-          "disabled": {
-            "value": "{color.blue.100}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{color.blue.400}",
-            "type": "color"
-          }
-        },
-        "destructive": {
-          "default": {
-            "value": "{color.red.300}",
-            "type": "color"
-          },
-          "disabled": {
-            "value": "{color.red.100}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{color.red.400}",
-            "type": "color"
-          }
-        }
-      },
-      "container": {
-        "default": {
-          "value": "{color.white}",
-          "type": "color"
-        }
-      },
-      "form": {
-        "default": {
-          "value": "{color.white}",
-          "type": "color"
-        }
-      },
-      "sentiment": {
-        "neutral": {
-          "value": "{color.grey.900}",
-          "type": "color"
-        },
-        "positive": {
-          "value": "{color.green.300}",
-          "type": "color"
-        },
-        "negative": {
-          "value": "{color.red.300}",
-          "type": "color"
-        },
-        "attentive": {
-          "value": "{color.yellow.300}",
-          "type": "color"
-        },
-        "informative": {
-          "value": "{color.blue.300}",
-          "type": "color"
-        }
-      }
-    },
     "text": {
-      "action": {
-        "primary": {
-          "default": {
-            "value": "{color.white}",
-            "type": "color"
-          },
-          "disabled": {
-            "value": "{color.grey.600}",
-            "type": "color"
-          }
-        },
-        "accent": {
-          "default": {
-            "value": "{color.white}",
-            "type": "color"
-          },
-          "disabled": {
-            "value": "{color.blue.200}",
-            "type": "color"
-          }
-        },
-        "destructive": {
-          "default": {
-            "value": "{color.white}",
-            "type": "color"
-          },
-          "disabled": {
-            "value": "{color.red.200}",
-            "type": "color"
-          }
-        }
-      },
-      "body": {
-        "default": {
-          "value": "{color.grey.900}",
-          "type": "color"
-        }
+      "default": {
+        "value": "{color.grey.900}",
+        "type": "color"
       },
-      "form": {
+      "interactive": {
         "default": {
-          "value": "{color.grey.900}",
-          "type": "color"
-        },
-        "disabled": {
-          "value": "{color.grey.700}",
-          "type": "color"
-        },
-        "error": {
-          "value": "{color.red.300}",
-          "type": "color"
-        },
-        "placeholder": {
           "value": "{color.grey.700}",
           "type": "color"
-        }
-      },
-      "heading": {
-        "default": {
-          "value": "{color.grey.950}",
-          "type": "color"
-        }
-      },
-      "icon": {
-        "default": {
-          "value": "{color.grey.900}",
-          "type": "color"
-        }
-      },
-      "link": {
-        "default": {
-          "value": "{color.blue.300}",
-          "type": "color"
         },
-        "hover": {
-          "value": "{color.blue.400}",
+        "disabled": {
+          "value": "{color.grey.500}",
           "type": "color"
         }
       }
+    },
+    "background": {
+      "default": {
+        "value": "{color.white}",
+        "type": "color"
+      }
     }
   }
 }
\ No newline at end of file