Merge pull request #1217 from PrefectHQ/refactor-sentiment-tokens

Refactor Sentiment Tokens
PrefectHQ · Apr 18, 2024 · 08e119c · 08e119c
2 parents 54e2f05 + b33060f
commit 08e119c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 51 deletions.
diff --git a/public/tailwindPlugin.js b/public/tailwindPlugin.js
@@ -14,10 +14,10 @@ const colors = {
   'focus-ring': 'var(--p-color-focus-ring)',
   'focus-ring-offset': 'var(--p-color-focus-ring-offset)',
   live: 'var(--p-color-live)',
-  'sentiment-positive': 'hsl(var(--p-color-sentiment-positive-hsl-values) / <alpha-value>)',
-  'sentiment-neutral': 'hsl(var(--p-color-sentiment-neutral-hsl-values) / <alpha-value>)',
-  'sentiment-warning': 'hsl(var(--p-color-sentiment-warning-hsl-values) / <alpha-value>)',
-  'sentiment-negative': 'hsl(var(--p-color-sentiment-negative-hsl-values) / <alpha-value>)',
+  'sentiment-positive': 'hsl(var(--p-positive) / <alpha-value>)',
+  'sentiment-neutral': 'hsl(var(--p-neutral) / <alpha-value>)',
+  'sentiment-warning': 'hsl(var(--p-warning) / <alpha-value>)',
+  'sentiment-negative': 'hsl(var(--p-destructive) / <alpha-value>)',
 }
 
 const spacing = {

diff --git a/src/compositions/useThemeTokens.ts b/src/compositions/useThemeTokens.ts
@@ -125,22 +125,22 @@ function getTokens() {
     colorSelected: style.getPropertyValue('--p-color-selected'),
     colorSelectionHighlight: style.getPropertyValue('--p-color-selection-highlight'),
     colorSentimentNegative: style.getPropertyValue('--p-color-sentiment-negative'),
-    colorSentimentNegativeHslValues: style.getPropertyValue('--p-color-sentiment-negative-hsl-values'),
+    colorSentimentNegativeHslValues: style.getPropertyValue('--p-destructive'),
     colorSentimentNegativeHue: style.getPropertyValue('--p-color-sentiment-negative-hue'),
     colorSentimentNegativeLightness: style.getPropertyValue('--p-color-sentiment-negative-lightness'),
     colorSentimentNegativeSaturation: style.getPropertyValue('--p-color-sentiment-negative-saturation'),
     colorSentimentNeutral: style.getPropertyValue('--p-color-sentiment-neutral'),
-    colorSentimentNeutralHslValues: style.getPropertyValue('--p-color-sentiment-neutral-hsl-values'),
+    colorSentimentNeutralHslValues: style.getPropertyValue('--p-neutral'),
     colorSentimentNeutralHue: style.getPropertyValue('--p-color-sentiment-neutral-hue'),
     colorSentimentNeutralLightness: style.getPropertyValue('--p-color-sentiment-neutral-lightness'),
     colorSentimentNeutralSaturation: style.getPropertyValue('--p-color-sentiment-neutral-saturation'),
     colorSentimentPositive: style.getPropertyValue('--p-color-sentiment-positive'),
-    colorSentimentPositiveHslValues: style.getPropertyValue('--p-color-sentiment-positive-hsl-values'),
+    colorSentimentPositiveHslValues: style.getPropertyValue('--p-positive'),
     colorSentimentPositiveHue: style.getPropertyValue('--p-color-sentiment-positive-hue'),
     colorSentimentPositiveLightness: style.getPropertyValue('--p-color-sentiment-positive-lightness'),
     colorSentimentPositiveSaturation: style.getPropertyValue('--p-color-sentiment-positive-saturation'),
     colorSentimentWarning: style.getPropertyValue('--p-color-sentiment-warning'),
-    colorSentimentWarningHslValues: style.getPropertyValue('--p-color-sentiment-warning-hsl-values'),
+    colorSentimentWarningHslValues: style.getPropertyValue('--p-warning'),
     colorSentimentWarningHue: style.getPropertyValue('--p-color-sentiment-warning-hue'),
     colorSentimentWarningLightness: style.getPropertyValue('--p-color-sentiment-warning-lightness'),
     colorSentimentWarningSaturation: style.getPropertyValue('--p-color-sentiment-warning-saturation'),

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -20,9 +20,18 @@
   :root {
     --p-spacing-focus-ring: 2px;
     --p-spacing-focus-ring-offset: 1px;
-
     --p-radius-default: 6px;
     --p-scrollbar-width: 12px;
+
+    --p-destructive: 4 74% 49%;
+    --p-positive: 142 71% 45%;
+    --p-neutral: 240 5% 46%;
+    --p-warning: 40 92% 50%;
+
+    --p-color-sentiment-positive: hsl(var(--p-positive));
+    --p-color-sentiment-neutral: hsl(var(--p-neutral));
+    --p-color-sentiment-warning: hsl(var(--p-warning));
+    --p-color-sentiment-negative: hsl(var(--p-destructive));
   }
 
   .dark {
@@ -50,27 +59,6 @@
 
     --p-color-live: #6272FF;
 
-    --p-color-sentiment-positive-hue: 142deg;
-    --p-color-sentiment-positive-saturation: 71%;
-    --p-color-sentiment-positive-lightness: 45%;
-    --p-color-sentiment-positive-hsl-values: var(--p-color-sentiment-positive-hue) var(--p-color-sentiment-positive-saturation) var(--p-color-sentiment-positive-lightness);
-    --p-color-sentiment-positive: hsl(var(--p-color-sentiment-positive-hsl-values));
-    --p-color-sentiment-neutral-hue: 240deg;
-    --p-color-sentiment-neutral-saturation: 5%;
-    --p-color-sentiment-neutral-lightness: 46%;
-    --p-color-sentiment-neutral-hsl-values: var(--p-color-sentiment-neutral-hue) var(--p-color-sentiment-neutral-saturation) var(--p-color-sentiment-neutral-lightness);
-    --p-color-sentiment-neutral: hsl(var(--p-color-sentiment-neutral-hsl-values));
-    --p-color-sentiment-warning-hue: 40deg;
-    --p-color-sentiment-warning-saturation: 92%;
-    --p-color-sentiment-warning-lightness: 50%;
-    --p-color-sentiment-warning-hsl-values: var(--p-color-sentiment-warning-hue) var(--p-color-sentiment-warning-saturation) var(--p-color-sentiment-warning-lightness);
-    --p-color-sentiment-warning: hsl(var(--p-color-sentiment-warning-hsl-values));
-    --p-color-sentiment-negative-hue: 4deg;
-    --p-color-sentiment-negative-saturation: 74%;
-    --p-color-sentiment-negative-lightness: 49%;
-    --p-color-sentiment-negative-hsl-values: var(--p-color-sentiment-negative-hue) var(--p-color-sentiment-negative-saturation) var(--p-color-sentiment-negative-lightness);
-    --p-color-sentiment-negative: hsl(var(--p-color-sentiment-negative-hsl-values));
-
     /* Text */
     --p-color-text-default: #FFFFFF;
     --p-color-text-subdued: #ADADAD;
@@ -200,6 +188,8 @@
   .light {
     color-scheme: light;
 
+
+
     /* Background */
     --p-color-bg-0: #EFEFF0;
     --p-color-bg-1: #FFFFFF;
@@ -222,27 +212,6 @@
 
     --p-color-live: #4B5CFF;
 
-    --p-color-sentiment-positive-hue: 142deg;
-    --p-color-sentiment-positive-saturation: 71%;
-    --p-color-sentiment-positive-lightness: 45%;
-    --p-color-sentiment-positive-hsl-values: var(--p-color-sentiment-positive-hue) var(--p-color-sentiment-positive-saturation) var(--p-color-sentiment-positive-lightness);
-    --p-color-sentiment-positive: hsl(var(--p-color-sentiment-positive-hsl-values));
-    --p-color-sentiment-neutral-hue: 240deg;
-    --p-color-sentiment-neutral-saturation: 5%;
-    --p-color-sentiment-neutral-lightness: 46%;
-    --p-color-sentiment-neutral-hsl-values: var(--p-color-sentiment-neutral-hue) var(--p-color-sentiment-neutral-saturation) var(--p-color-sentiment-neutral-lightness);
-    --p-color-sentiment-neutral: hsl(var(--p-color-sentiment-neutral-hsl-values));
-    --p-color-sentiment-warning-hue: 40deg;
-    --p-color-sentiment-warning-saturation: 92%;
-    --p-color-sentiment-warning-lightness: 50%;
-    --p-color-sentiment-warning-hsl-values: var(--p-color-sentiment-warning-hue) var(--p-color-sentiment-warning-saturation) var(--p-color-sentiment-warning-lightness);
-    --p-color-sentiment-warning: hsl(var(--p-color-sentiment-warning-hsl-values));
-    --p-color-sentiment-negative-hue: 4deg;
-    --p-color-sentiment-negative-saturation: 74%;
-    --p-color-sentiment-negative-lightness: 49%;
-    --p-color-sentiment-negative-hsl-values: var(--p-color-sentiment-negative-hue) var(--p-color-sentiment-negative-saturation) var(--p-color-sentiment-negative-lightness);
-    --p-color-sentiment-negative: hsl(var(--p-color-sentiment-negative-hsl-values));
-
     /* Text */
     --p-color-text-default: #171717;
     --p-color-text-subdued: #70707B;