fix: tokens types and git conflicts

razorpay · Jan 11, 2024 · 74b50d2 · 74b50d2
1 parent cd28d20
commit 74b50d2
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 37 deletions.
diff --git a/packages/blade/src/tokens/theme/bladeTheme.ts b/packages/blade/src/tokens/theme/bladeTheme.ts
@@ -12,15 +12,47 @@ import {
 
 const colors: ColorsWithModes = {
   onLight: {
-    interactive: {
-      icon: {
+    surface: {
+      background: {
+        gray: {
+          subtle: globalColors.neutral.blueGrayLight[100],
+          moderate: globalColors.neutral.blueGrayLight[50],
+          intense: globalColors.neutral.blueGrayLight[0],
+        },
+        primary: {
+          subtle: globalColors.chromatic.azure.a50,
+          intense: globalColors.chromatic.azure[500],
+        },
+        sea: {
+          subtle: globalColors.chromatic.sea[50],
+          intense: globalColors.chromatic.sea[800],
+        },
+        cloud: {
+          subtle: globalColors.chromatic.cloud[50],
+          intense: globalColors.chromatic.cloud[800],
+        },
+      },
+      border: {
+        gray: {
+          normal: globalColors.neutral.blueGrayLight[500],
+          subtle: globalColors.neutral.blueGrayLight[300],
+          muted: globalColors.neutral.blueGrayLight.a100,
+        },
+        primary: {
+          normal: globalColors.chromatic.azure[500],
+          muted: globalColors.chromatic.azure.a100,
+        },
+      },
+      text: {
         gray: {
           normal: globalColors.neutral.blueGrayLight[1200],
           subtle: globalColors.neutral.blueGrayLight[900],
           muted: globalColors.neutral.blueGrayLight[600],
           disabled: globalColors.neutral.blueGrayLight.a200,
         },
-        primary: { normal: globalColors.chromatic.azure[500] },
+        primary: {
+          normal: globalColors.chromatic.azure[500],
+        },
         onSea: {
           onSubtle: globalColors.chromatic.forest[800],
           onIntense: globalColors.chromatic.forest[200],
@@ -49,7 +81,9 @@ const colors: ColorsWithModes = {
           muted: globalColors.neutral.blueGrayLight[600],
           disabled: globalColors.neutral.blueGrayLight.a200,
         },
-        primary: { normal: globalColors.chromatic.azure[500] },
+        primary: {
+          normal: globalColors.chromatic.azure[500],
+        },
         onSea: {
           onSubtle: globalColors.chromatic.forest[600],
           onIntense: globalColors.chromatic.forest[400],
@@ -139,7 +173,7 @@ const colors: ColorsWithModes = {
           intense: globalColors.neutral.blueGrayLight[1100],
         },
       },
-      text: {
+      icon: {
         positive: {
           subtle: globalColors.chromatic.emerald[100],
           intense: globalColors.chromatic.emerald[800],
@@ -408,7 +442,6 @@ const colors: ColorsWithModes = {
           disabled: globalColors.neutral.black[100],
         },
       },
-      hover: { subtle: globalColors.neutral.white[50], intense: globalColors.neutral.black[10] },
     },
     overlay: {
       background: {
@@ -426,11 +459,6 @@ const colors: ColorsWithModes = {
         intense: globalColors.neutral.blueGrayLight[900],
       },
     },
-    elevation: {
-      lowRaised: `hsla(212, 39%, 16%, ${opacity[1]})`,
-      midRaised: `hsla(212, 39%, 16%, ${opacity[2]})`,
-      highRaised: `hsla(212, 39%, 16%, ${opacity[3]})`,
-    },
     transparent: `hsla(0, 0%, 100%, ${opacity[0]})`,
   },
   onDark: {
@@ -445,7 +473,10 @@ const colors: ColorsWithModes = {
           subtle: globalColors.chromatic.azure.a200,
           intense: globalColors.chromatic.azure[500],
         },
-        sea: { subtle: globalColors.chromatic.sea[900], intense: globalColors.chromatic.sea[100] },
+        sea: {
+          subtle: globalColors.chromatic.sea[900],
+          intense: globalColors.chromatic.sea[100],
+        },
         cloud: {
           subtle: globalColors.chromatic.cloud[900],
           intense: globalColors.chromatic.cloud[100],
@@ -469,7 +500,9 @@ const colors: ColorsWithModes = {
           muted: globalColors.neutral.blueGrayDark[600],
           disabled: globalColors.neutral.blueGrayDark.a200,
         },
-        primary: { normal: globalColors.chromatic.azure[300] },
+        primary: {
+          normal: globalColors.chromatic.azure[300],
+        },
         onSea: {
           onSubtle: globalColors.chromatic.forest[200],
           onIntense: globalColors.chromatic.forest[800],
@@ -498,7 +531,9 @@ const colors: ColorsWithModes = {
           muted: globalColors.neutral.blueGrayDark[600],
           disabled: globalColors.neutral.blueGrayDark.a200,
         },
-        primary: { normal: globalColors.chromatic.azure[300] },
+        primary: {
+          normal: globalColors.chromatic.azure[300],
+        },
         onSea: {
           onSubtle: globalColors.chromatic.forest[400],
           onIntense: globalColors.chromatic.forest[600],
@@ -521,23 +556,8 @@ const colors: ColorsWithModes = {
         },
       },
     },
-    transparent: `hsla(0, 0%, 100%, ${opacity[0]})`,
-  },
-  onDark: {
-    interactive: {
-      icon: {
-        gray: {
-          normal: globalColors.neutral.blueGrayDark[50],
-          subtle: globalColors.neutral.blueGrayDark[300],
-          muted: globalColors.neutral.blueGrayDark[600],
-          disabled: globalColors.neutral.blueGrayDark.a200,
-        },
-        staticWhite: {
-          normal: globalColors.neutral.white[500],
-          subtle: globalColors.neutral.white[400],
-          muted: globalColors.neutral.white[300],
-          disabled: globalColors.neutral.white[100],
-        },
+    feedback: {
+      background: {
         positive: {
           subtle: globalColors.chromatic.emerald.a100,
           intense: globalColors.chromatic.emerald[700],
@@ -559,7 +579,7 @@ const colors: ColorsWithModes = {
           intense: globalColors.neutral.blueGrayDark[1000],
         },
       },
-      background: {
+      border: {
         positive: {
           subtle: globalColors.chromatic.emerald.a200,
           intense: globalColors.chromatic.emerald[800],
@@ -581,7 +601,7 @@ const colors: ColorsWithModes = {
           intense: globalColors.neutral.blueGrayLight[1100],
         },
       },
-      border: {
+      text: {
         positive: {
           subtle: globalColors.chromatic.emerald[50],
           intense: globalColors.chromatic.emerald[500],
@@ -603,7 +623,7 @@ const colors: ColorsWithModes = {
           intense: globalColors.neutral.blueGrayDark[100],
         },
       },
-      text: {
+      icon: {
         positive: {
           subtle: globalColors.chromatic.emerald[50],
           intense: globalColors.chromatic.emerald[500],
@@ -872,7 +892,6 @@ const colors: ColorsWithModes = {
           disabled: globalColors.neutral.black[100],
         },
       },
-      hover: { subtle: globalColors.neutral.black[25], intense: globalColors.neutral.white[100] },
     },
     overlay: {
       background: {

diff --git a/packages/blade/src/tokens/theme/theme.ts b/packages/blade/src/tokens/theme/theme.ts
@@ -55,8 +55,14 @@ export type Colors = {
   interactive: {
     background: Record<InteractiveColorKeys, InteractiveStates & { fadedHighlighted: string }>;
     border: Record<InteractiveColorKeys, InteractiveStates>;
-    text: Record<InteractiveColorKeys, Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
-    icon: Record<InteractiveColorKeys, Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>;
+    text: Record<
+      InteractiveColorKeys & { onPrimary: string },
+      Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>
+    >;
+    icon: Record<
+      InteractiveColorKeys & { onPrimary: string },
+      Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>
+    >;
   };
   feedback: {
     background: Record<FeedbackColors, SubtleOrIntenseEmphasis>;