[CCUBE-1524][RL] Update order of tokens

LifeSG · Sep 26, 2024 · 6e24078 · 6e24078
1 parent 5659e79
commit 6e24078
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 25 deletions.
diff --git a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts
@@ -52,6 +52,7 @@ export const LifeSGColourSet: SemanticColourSet = {
     "border-strong": getPrimitiveColour("neutral-70"),
     "border-primary": getPrimitiveColour("primary-50"),
     "border-primary-subtle": getPrimitiveColour("primary-60"),
+
     "border-hover": getPrimitiveColour("primary-90"),
 
     "border-selected": getPrimitiveColour("primary-50"),
@@ -61,6 +62,7 @@ export const LifeSGColourSet: SemanticColourSet = {
 
     "border-focus": getPrimitiveColour("primary-60"),
     "border-focus-strong": getPrimitiveColour("primary-50"),
+
     "border-disabled": getPrimitiveColour("neutral-90"),
     "border-selected-disabled": getPrimitiveColour("neutral-70"),
 
@@ -83,12 +85,13 @@ export const LifeSGColourSet: SemanticColourSet = {
     "bg-hover-neutral": getPrimitiveColour("neutral-95"),
 
     "bg-selected": getPrimitiveColour("primary-95"),
-    "bg-selected-strong": getPrimitiveColour("primary-90"),
     "bg-selected-hover": getPrimitiveColour("primary-90"),
-    "bg-selected-disabled": getPrimitiveColour("neutral-95"),
-    "bg-disabled": getPrimitiveColour("neutral-95"),
+    "bg-selected-strong": getPrimitiveColour("primary-90"),
     "bg-selected-strongest": getPrimitiveColour("primary-90"),
 
+    "bg-disabled": getPrimitiveColour("neutral-95"),
+    "bg-selected-disabled": getPrimitiveColour("neutral-95"),
+
     "bg-success": getPrimitiveColour("success-100"),
     "bg-success-strong": getPrimitiveColour("success-50"),
     "bg-warning": getPrimitiveColour("warning-100"),
@@ -115,11 +118,12 @@ export const LifeSGColourSet: SemanticColourSet = {
     // overlay
     "overlay-strong": "rgba(40, 40, 40, 0.95)",
     "overlay-subtle": "rgba(40, 40, 40, 0.20)",
-    "overlay-inverse-gradient": "rgba(255, 255, 255, 1)",
 
-    // hyperlink, focus ring
+    // hyperlink
     hyperlink: getPrimitiveColour("primary-50"),
     "hyperlink-inverse": "#FFCB6A",
+
+    // focus ring
     "focus-ring": getPrimitiveColour("black"),
     "focus-ring-inverse": getPrimitiveColour("white"),
 };
diff --git a/src/theme/colour-semantic/theme-helper.ts b/src/theme/colour-semantic/theme-helper.ts
@@ -93,13 +93,15 @@ export const ColourSemantic = {
     "border-primary-subtle": getSemanticColour("border-primary-subtle"),
 
     "border-hover": getSemanticColour("border-hover"),
+
     "border-selected": getSemanticColour("border-selected"),
     "border-selected-subtle": getSemanticColour("border-selected-subtle"),
     "border-selected-subtlest": getSemanticColour("border-selected-subtlest"),
     "border-selected-hover": getSemanticColour("border-selected-hover"),
 
     "border-focus": getSemanticColour("border-focus"),
     "border-focus-strong": getSemanticColour("border-focus-strong"),
+
     "border-disabled": getSemanticColour("border-disabled"),
     "border-selected-disabled": getSemanticColour("border-selected-disabled"),
 
@@ -122,11 +124,12 @@ export const ColourSemantic = {
     "bg-hover-neutral": getSemanticColour("bg-hover-neutral"),
 
     "bg-selected": getSemanticColour("bg-selected"),
-    "bg-selected-strong": getSemanticColour("bg-selected-strong"),
     "bg-selected-hover": getSemanticColour("bg-selected-hover"),
-    "bg-selected-disabled": getSemanticColour("bg-selected-disabled"),
+    "bg-selected-strong": getSemanticColour("bg-selected-strong"),
     "bg-selected-strongest": getSemanticColour("bg-selected-strongest"),
+
     "bg-disabled": getSemanticColour("bg-disabled"),
+    "bg-selected-disabled": getSemanticColour("bg-selected-disabled"),
 
     "bg-success": getSemanticColour("bg-success"),
     "bg-success-strong": getSemanticColour("bg-success-strong"),
@@ -156,11 +159,12 @@ export const ColourSemantic = {
     // overlay
     "overlay-strong": getSemanticColour("overlay-strong"),
     "overlay-subtle": getSemanticColour("overlay-subtle"),
-    "overlay-inverse-gradient": getSemanticColour("overlay-inverse-gradient"),
 
-    // hyperlink, focus ring
+    // hyperlink
     hyperlink: getSemanticColour("hyperlink"),
     "hyperlink-inverse": getSemanticColour("hyperlink-inverse"),
+
+    // focus ring
     "focus-ring": getSemanticColour("focus-ring"),
     "focus-ring-inverse": getSemanticColour("focus-ring-inverse"),
 };
diff --git a/src/theme/colour-semantic/types.ts b/src/theme/colour-semantic/types.ts
@@ -61,13 +61,15 @@ export type SemanticColourSet = {
     "border-primary-subtle": SemanticColourValue;
 
     "border-hover": SemanticColourValue;
+
     "border-selected": SemanticColourValue;
     "border-selected-subtle": SemanticColourValue;
     "border-selected-subtlest": SemanticColourValue;
     "border-selected-hover": SemanticColourValue;
 
     "border-focus": SemanticColourValue;
     "border-focus-strong": SemanticColourValue;
+
     "border-disabled": SemanticColourValue;
     "border-selected-disabled": SemanticColourValue;
 
@@ -90,11 +92,12 @@ export type SemanticColourSet = {
     "bg-hover-neutral": SemanticColourValue;
 
     "bg-selected": SemanticColourValue;
-    "bg-selected-strong": SemanticColourValue;
     "bg-selected-hover": SemanticColourValue;
-    "bg-selected-disabled": SemanticColourValue;
+    "bg-selected-strong": SemanticColourValue;
     "bg-selected-strongest": SemanticColourValue;
+
     "bg-disabled": SemanticColourValue;
+    "bg-selected-disabled": SemanticColourValue;
 
     "bg-success": SemanticColourValue;
     "bg-success-strong": SemanticColourValue;
@@ -122,11 +125,12 @@ export type SemanticColourSet = {
     // overlay
     "overlay-strong": SemanticColourValue;
     "overlay-subtle": SemanticColourValue;
-    "overlay-inverse-gradient": SemanticColourValue;
 
-    // hyperlink, focus ring
+    // hyperlink
     hyperlink: SemanticColourValue;
     "hyperlink-inverse": SemanticColourValue;
+
+    // focus ring
     "focus-ring": SemanticColourValue;
     "focus-ring-inverse": SemanticColourValue;
 };
diff --git a/stories/theme/doc-elements/doc-semantic-colour-display.tsx b/stories/theme/doc-elements/doc-semantic-colour-display.tsx
@@ -182,14 +182,13 @@ export const SemanticColourDisplay = ({
                         "bg-hover-strong",
                         "bg-hover-subtle",
                         "bg-hover-neutral",
-                        "bg-primary-hover",
                     ]}
                 />
                 <SemanticColourPalette
                     tokens={[
                         "bg-selected",
-                        "bg-selected-strong",
                         "bg-selected-hover",
+                        "bg-selected-strong",
                         "bg-selected-strongest",
                     ]}
                 />
@@ -199,16 +198,14 @@ export const SemanticColourDisplay = ({
                 <SemanticColourPalette
                     tokens={[
                         "bg-primary",
-                        "bg-primary-hover",
                         "bg-primary-subtle",
-                        "bg-primary-subtlest-hover",
                         "bg-primary-subtler",
                         "bg-primary-subtlest",
+                        "bg-primary-hover",
+                        "bg-primary-subtlest-hover",
+                        "bg-primary-subtlest-selected",
                     ]}
                 />
-                <SemanticColourPalette
-                    tokens={["bg-primary-subtlest-selected"]}
-                />
                 <SemanticColourPalette
                     tokens={[
                         "bg-success",
@@ -235,11 +232,7 @@ export const SemanticColourDisplay = ({
             <PaletteLabel>Overlay</PaletteLabel>
             <Display>
                 <SemanticColourPalette
-                    tokens={[
-                        "overlay-strong",
-                        "overlay-subtle",
-                        "overlay-inverse-gradient",
-                    ]}
+                    tokens={["overlay-strong", "overlay-subtle"]}
                 />
             </Display>