add --p prefix to scope to prefect controlled namespace

PrefectHQ · Apr 18, 2024 · b33060f · b33060f
1 parent 4f69891
commit b33060f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 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(--positive) / <alpha-value>)',
-  'sentiment-neutral': 'hsl(var(--neutral) / <alpha-value>)',
-  'sentiment-warning': 'hsl(var(--warning) / <alpha-value>)',
-  'sentiment-negative': 'hsl(var(--destructive) / <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('--destructive'),
+    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('--neutral'),
+    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('--positive'),
+    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('--warning'),
+    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
@@ -22,15 +22,16 @@
     --p-spacing-focus-ring-offset: 1px;
     --p-radius-default: 6px;
     --p-scrollbar-width: 12px;
-    --destructive: 4 74% 49%;
-    --positive: 142 71% 45%;
-    --neutral: 240 5% 46%;
-    --warning: 40 92% 50%;
-
-    --p-color-sentiment-positive: hsl(var(--positive));
-    --p-color-sentiment-neutral: hsl(var(--neutral));
-    --p-color-sentiment-warning: hsl(var(--warning));
-    --p-color-sentiment-negative: hsl(var(--destructive));
+
+    --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 {