From 8d483179968149a34b153c9791e855bbf15a08fb Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Wed, 25 Sep 2024 13:46:59 +0800 Subject: [PATCH 1/4] [CCUBE-1524][MAHI]Update semantic tokens with latest changes and update storybook as well --- .../specs/bookingsg-semantic-tokens.ts | 93 -------------- .../specs/lifesg-semantic-tokens.ts | 68 ++++++----- src/theme/colour-semantic/theme-helper.ts | 78 ++++++------ src/theme/colour-semantic/types.ts | 66 ++++++---- .../doc-semantic-colour-display.tsx | 113 ++++++++---------- 5 files changed, 174 insertions(+), 244 deletions(-) delete mode 100644 src/theme/colour-semantic/specs/bookingsg-semantic-tokens.ts diff --git a/src/theme/colour-semantic/specs/bookingsg-semantic-tokens.ts b/src/theme/colour-semantic/specs/bookingsg-semantic-tokens.ts deleted file mode 100644 index 958e7ff70..000000000 --- a/src/theme/colour-semantic/specs/bookingsg-semantic-tokens.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { getPrimitiveColour } from "../../colour-primitive/theme-helper"; -import { SemanticColourSet } from "../../types"; - -export const BookingSGColourSet: SemanticColourSet = { - text: getPrimitiveColour("neutral-20"), - "text-hover": getPrimitiveColour("primary-40"), - "text-selected": getPrimitiveColour("primary-50"), - "text-disabled": getPrimitiveColour("neutral-50"), - "text-success": getPrimitiveColour("success-40"), - "text-inverse": getPrimitiveColour("white"), - "text-subtle": getPrimitiveColour("neutral-30"), - "text-subtler": getPrimitiveColour("neutral-50"), - "text-subtlest": getPrimitiveColour("neutral-60"), - "text-disabled-subtle": getPrimitiveColour("neutral-60"), - "text-disabled-subtlest": getPrimitiveColour("neutral-80"), - "text-selected-disabled": getPrimitiveColour("primary-60"), - "text-warning": getPrimitiveColour("warning-40"), - "text-error": getPrimitiveColour("error-40"), - "text-info": getPrimitiveColour("info-40"), - - icon: getPrimitiveColour("neutral-50"), - "icon-hover": getPrimitiveColour("primary-40"), - "icon-selected": getPrimitiveColour("primary-50"), - "icon-disabled": getPrimitiveColour("neutral-50"), - "icon-success": getPrimitiveColour("success-50"), - "icon-inverse": getPrimitiveColour("white"), - "icon-subtle": getPrimitiveColour("neutral-60"), - "icon-strongest": getPrimitiveColour("neutral-20"), - "icon-primary": getPrimitiveColour("primary-50"), - "icon-primary-subtle": getPrimitiveColour("primary-60"), - "icon-primary-subtlest": getPrimitiveColour("primary-70"), - "icon-disabled-subtle": getPrimitiveColour("neutral-60"), - "icon-selected-disabled": getPrimitiveColour("primary-60"), - "icon-warning": getPrimitiveColour("warning-60"), - "icon-error": getPrimitiveColour("error-50"), - "icon-error-strong": getPrimitiveColour("error-40"), - "icon-info": getPrimitiveColour("info-50"), - - border: getPrimitiveColour("neutral-90"), - "border-hover": getPrimitiveColour("primary-90"), - "border-selected": getPrimitiveColour("primary-50"), - "border-disabled": getPrimitiveColour("neutral-90"), - "border-success": getPrimitiveColour("success-60"), - "border-inverse": getPrimitiveColour("neutral-90"), - "border-strong": getPrimitiveColour("neutral-70"), - "border-primary": getPrimitiveColour("primary-50"), - "border-primary-subtle": getPrimitiveColour("primary-60"), - "border-hover-strong": getPrimitiveColour("primary-60"), - "border-selected-subtle": getPrimitiveColour("primary-70"), - "border-selected-subtlest": getPrimitiveColour("primary-90"), - "border-focus": getPrimitiveColour("primary-60"), - "border-focus-strong": getPrimitiveColour("primary-50"), - "border-selected-disabled": getPrimitiveColour("neutral-70"), - "border-warning": getPrimitiveColour("warning-60"), - "border-error": getPrimitiveColour("error-60"), - "border-error-focus": getPrimitiveColour("error-60"), - "border-info": getPrimitiveColour("info-60"), - - background: getPrimitiveColour("white"), - "background-hover": getPrimitiveColour("primary-95"), - "background-selected": getPrimitiveColour("primary-95"), - "background-disabled": getPrimitiveColour("neutral-95"), - "background-success": getPrimitiveColour("success-100"), - "background-inverse": getPrimitiveColour("neutral-40"), - "background-strong": getPrimitiveColour("neutral-100"), - "background-stronger": getPrimitiveColour("neutral-95"), - "background-hover-strong": getPrimitiveColour("primary-90"), - "background-hover-subtle": getPrimitiveColour("primary-95"), - "background-hover-neutral": getPrimitiveColour("neutral-95"), - "background-primary": getPrimitiveColour("primary-50"), - "background-primary-hover": getPrimitiveColour("primary-40"), - "background-primary-subtle": getPrimitiveColour("primary-60"), - "background-primary-subtlest": getPrimitiveColour("primary-100"), - "background-primary-subtlest-hover": getPrimitiveColour("primary-90"), - "background-primary-subtlest-selected": getPrimitiveColour("primary-90"), - "background-selected-strong": getPrimitiveColour("primary-90"), - "background-selected-hover": getPrimitiveColour("primary-90"), - "background-selected-disabled": getPrimitiveColour("primary-90"), - "background-warning": getPrimitiveColour("warning-100"), - "background-error": getPrimitiveColour("error-100"), - "background-info": getPrimitiveColour("info-100"), - "background-error-strong": getPrimitiveColour("error-50"), - "background-error-strong-hover": getPrimitiveColour("error-30"), - - "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: getPrimitiveColour("primary-50"), - "hyperlink-inverse": "#FFCB6A", - "focus-ring": getPrimitiveColour("black"), - "focus-ring-inverse": getPrimitiveColour("white"), -}; diff --git a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts index e02ee8e14..9a203eba9 100644 --- a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts +++ b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts @@ -5,15 +5,17 @@ export const LifeSGColourSet: SemanticColourSet = { text: getPrimitiveColour("neutral-20"), "text-hover": getPrimitiveColour("primary-40"), "text-selected": getPrimitiveColour("primary-50"), + "text-selected-hover": getPrimitiveColour("primary-40"), // "text-disabled": getPrimitiveColour("neutral-50"), "text-success": getPrimitiveColour("success-40"), "text-inverse": getPrimitiveColour("white"), "text-subtle": getPrimitiveColour("neutral-30"), "text-subtler": getPrimitiveColour("neutral-50"), "text-subtlest": getPrimitiveColour("neutral-60"), + "text-primary": getPrimitiveColour("primary-50"), "text-disabled-subtle": getPrimitiveColour("neutral-60"), "text-disabled-subtlest": getPrimitiveColour("neutral-80"), - "text-selected-disabled": getPrimitiveColour("primary-60"), + "text-selected-disabled": getPrimitiveColour("neutral-50"), "text-warning": getPrimitiveColour("warning-40"), "text-error": getPrimitiveColour("error-40"), "text-info": getPrimitiveColour("info-40"), @@ -26,11 +28,12 @@ export const LifeSGColourSet: SemanticColourSet = { "icon-inverse": getPrimitiveColour("white"), "icon-subtle": getPrimitiveColour("neutral-60"), "icon-strongest": getPrimitiveColour("neutral-20"), + "icon-selected-hover": getPrimitiveColour("primary-40"), // "icon-primary": getPrimitiveColour("primary-50"), "icon-primary-subtle": getPrimitiveColour("primary-60"), "icon-primary-subtlest": getPrimitiveColour("primary-70"), "icon-disabled-subtle": getPrimitiveColour("neutral-60"), - "icon-selected-disabled": getPrimitiveColour("primary-60"), + "icon-selected-disabled": getPrimitiveColour("neutral-60"), "icon-warning": getPrimitiveColour("warning-60"), "icon-error": getPrimitiveColour("error-50"), "icon-error-strong": getPrimitiveColour("error-40"), @@ -39,6 +42,7 @@ export const LifeSGColourSet: SemanticColourSet = { border: getPrimitiveColour("neutral-90"), "border-hover": getPrimitiveColour("primary-90"), "border-selected": getPrimitiveColour("primary-50"), + "border-selected-hover": getPrimitiveColour("primary-90"), // "border-disabled": getPrimitiveColour("neutral-90"), "border-success": getPrimitiveColour("success-60"), "border-inverse": getPrimitiveColour("neutral-90"), @@ -54,33 +58,43 @@ export const LifeSGColourSet: SemanticColourSet = { "border-warning": getPrimitiveColour("warning-60"), "border-error": getPrimitiveColour("error-60"), "border-error-focus": getPrimitiveColour("error-60"), + "border-error-strong": getPrimitiveColour("error-40"), "border-info": getPrimitiveColour("info-60"), - background: getPrimitiveColour("white"), - "background-hover": getPrimitiveColour("primary-95"), - "background-selected": getPrimitiveColour("primary-95"), - "background-disabled": getPrimitiveColour("neutral-95"), - "background-success": getPrimitiveColour("success-100"), - "background-inverse": getPrimitiveColour("neutral-40"), - "background-strong": getPrimitiveColour("neutral-100"), - "background-stronger": getPrimitiveColour("neutral-95"), - "background-hover-strong": getPrimitiveColour("primary-90"), - "background-hover-subtle": getPrimitiveColour("primary-95"), - "background-hover-neutral": getPrimitiveColour("neutral-95"), - "background-primary": getPrimitiveColour("primary-50"), - "background-primary-hover": getPrimitiveColour("primary-40"), - "background-primary-subtle": getPrimitiveColour("primary-60"), - "background-primary-subtlest": getPrimitiveColour("primary-100"), - "background-primary-subtlest-hover": getPrimitiveColour("primary-90"), - "background-primary-subtlest-selected": getPrimitiveColour("primary-90"), - "background-selected-strong": getPrimitiveColour("primary-90"), - "background-selected-hover": getPrimitiveColour("primary-90"), - "background-selected-disabled": getPrimitiveColour("primary-90"), - "background-warning": getPrimitiveColour("warning-100"), - "background-error": getPrimitiveColour("error-100"), - "background-info": getPrimitiveColour("info-100"), - "background-error-strong": getPrimitiveColour("error-50"), - "background-error-strong-hover": getPrimitiveColour("error-30"), + bg: getPrimitiveColour("white"), // + "bg-hover": getPrimitiveColour("primary-95"), + "bg-selected": getPrimitiveColour("primary-95"), + "bg-disabled": getPrimitiveColour("neutral-95"), + "bg-success-strong": getPrimitiveColour("success-50"), // + "bg-success": getPrimitiveColour("success-100"), + "bg-inverse": getPrimitiveColour("neutral-20"), + "bg-inverse-subtle": getPrimitiveColour("neutral-30"), // + "bg-inverse-subtler": getPrimitiveColour("neutral-50"), // + "bg-inverse-subtlest": getPrimitiveColour("neutral-60"), // + "bg-strong": getPrimitiveColour("neutral-100"), // + "bg-stronger": getPrimitiveColour("neutral-95"), + "bg-strongest": getPrimitiveColour("neutral-90"), // + "bg-hover-strong": getPrimitiveColour("primary-90"), + "bg-hover-subtle": getPrimitiveColour("primary-100"), + "bg-hover-neutral": getPrimitiveColour("neutral-95"), + "bg-primary": getPrimitiveColour("primary-50"), + "bg-primary-hover": getPrimitiveColour("primary-40"), + "bg-primary-subtle": getPrimitiveColour("primary-60"), + "bg-primary-subtler": getPrimitiveColour("primary-80"), + "bg-primary-subtlest": getPrimitiveColour("primary-100"), + "bg-primary-subtlest-hover": getPrimitiveColour("primary-90"), + "bg-primary-subtlest-selected": getPrimitiveColour("primary-90"), + "bg-selected-strong": getPrimitiveColour("primary-90"), + "bg-selected-hover": getPrimitiveColour("primary-90"), + "bg-selected-disabled": getPrimitiveColour("neutral-95"), + "bg-selected-strongest": getPrimitiveColour("primary-90"), // + "bg-warning": getPrimitiveColour("warning-100"), + "bg-warning-strong": getPrimitiveColour("warning-50"), // + "bg-error": getPrimitiveColour("error-100"), + "bg-info": getPrimitiveColour("info-100"), + "bg-info-strong": getPrimitiveColour("info-50"), // + "bg-error-strong": getPrimitiveColour("error-50"), + "bg-error-strong-hover": getPrimitiveColour("error-30"), "overlay-strong": "rgba(40, 40, 40, 0.95)", "overlay-subtle": "rgba(40, 40, 40, 0.20)", diff --git a/src/theme/colour-semantic/theme-helper.ts b/src/theme/colour-semantic/theme-helper.ts index df89ed637..168d2d4c9 100644 --- a/src/theme/colour-semantic/theme-helper.ts +++ b/src/theme/colour-semantic/theme-helper.ts @@ -95,43 +95,31 @@ export const ColourSemantic = { "border-error-focus": getSemanticColour("border-error-focus"), "border-info": getSemanticColour("border-info"), - background: getSemanticColour("background"), - "background-hover": getSemanticColour("background-hover"), - "background-selected": getSemanticColour("background-selected"), - "background-disabled": getSemanticColour("background-disabled"), - "background-success": getSemanticColour("background-success"), - "background-inverse": getSemanticColour("background-inverse"), - "background-strong": getSemanticColour("background-strong"), - "background-stronger": getSemanticColour("background-stronger"), - "background-hover-strong": getSemanticColour("background-hover-strong"), - "background-hover-subtle": getSemanticColour("background-hover-subtle"), - "background-hover-neutral": getSemanticColour("background-hover-neutral"), - "background-primary": getSemanticColour("background-primary"), - "background-primary-hover": getSemanticColour("background-primary-hover"), - "background-primary-subtle": getSemanticColour("background-primary-subtle"), - "background-primary-subtlest": getSemanticColour( - "background-primary-subtlest" - ), - "background-primary-subtlest-hover": getSemanticColour( - "background-primary-subtlest-hover" - ), - "background-primary-subtlest-selected": getSemanticColour( - "background-primary-subtlest-selected" - ), - "background-selected-strong": getSemanticColour( - "background-selected-strong" - ), - "background-selected-hover": getSemanticColour("background-selected-hover"), - "background-selected-disabled": getSemanticColour( - "background-selected-disabled" - ), - "background-warning": getSemanticColour("background-warning"), - "background-error": getSemanticColour("background-error"), - "background-info": getSemanticColour("background-info"), - "background-error-strong": getSemanticColour("background-error-strong"), - "background-error-strong-hover": getSemanticColour( - "background-error-strong-hover" + "bg-hover": getSemanticColour("bg-hover"), + "bg-selected": getSemanticColour("bg-selected"), + "bg-disabled": getSemanticColour("bg-disabled"), + "bg-success": getSemanticColour("bg-success"), + "bg-inverse": getSemanticColour("bg-inverse"), + "bg-stronger": getSemanticColour("bg-stronger"), + "bg-hover-strong": getSemanticColour("bg-hover-strong"), + "bg-hover-subtle": getSemanticColour("bg-hover-subtle"), + "bg-hover-neutral": getSemanticColour("bg-hover-neutral"), + "bg-primary": getSemanticColour("bg-primary"), + "bg-primary-hover": getSemanticColour("bg-primary-hover"), + "bg-primary-subtle": getSemanticColour("bg-primary-subtle"), + "bg-primary-subtlest": getSemanticColour("bg-primary-subtlest"), + "bg-primary-subtlest-hover": getSemanticColour("bg-primary-subtlest-hover"), + "bg-primary-subtlest-selected": getSemanticColour( + "bg-primary-subtlest-selected" ), + "bg-selected-strong": getSemanticColour("bg-selected-strong"), + "bg-selected-hover": getSemanticColour("bg-selected-hover"), + "bg-selected-disabled": getSemanticColour("bg-selected-disabled"), + "bg-warning": getSemanticColour("bg-warning"), + "bg-error": getSemanticColour("bg-error"), + "bg-info": getSemanticColour("bg-info"), + "bg-error-strong": getSemanticColour("bg-error-strong"), + "bg-error-strong-hover": getSemanticColour("bg-error-strong-hover"), "overlay-strong": getSemanticColour("overlay-strong"), "overlay-subtle": getSemanticColour("overlay-subtle"), @@ -141,4 +129,22 @@ export const ColourSemantic = { "hyperlink-inverse": getSemanticColour("hyperlink-inverse"), "focus-ring": getSemanticColour("focus-ring"), "focus-ring-inverse": getSemanticColour("focus-ring-inverse"), + + // new changes: + "text-primary": getSemanticColour("text-primary"), + "text-selected-hover": getSemanticColour("text-selected-hover"), + "icon-selected-hover": getSemanticColour("icon-selected-hover"), + "border-selected-hover": getSemanticColour("border-selected-hover"), + bg: getSemanticColour("bg"), + "bg-primary-subtler": getSemanticColour("bg-primary-subtler"), + "bg-success-strong": getSemanticColour("bg-success-strong"), + "bg-inverse-subtle": getSemanticColour("bg-inverse-subtle"), + "bg-inverse-subtler": getSemanticColour("bg-inverse-subtler"), + "bg-inverse-subtlest": getSemanticColour("bg-inverse-subtlest"), + "bg-strong": getSemanticColour("bg-strong"), + "bg-strongest": getSemanticColour("bg-strongest"), + "bg-selected-strongest": getSemanticColour("bg-selected-strongest"), + "bg-warning-strong": getSemanticColour("bg-warning-strong"), + "bg-info-strong": getSemanticColour("bg-info-strong"), + "border-error-strong": getSemanticColour("border-error-strong"), }; diff --git a/src/theme/colour-semantic/types.ts b/src/theme/colour-semantic/types.ts index 31cf7500d..3575bea88 100644 --- a/src/theme/colour-semantic/types.ts +++ b/src/theme/colour-semantic/types.ts @@ -62,31 +62,29 @@ export type SemanticColourSet = { "border-error-focus": SemanticColourValue; "border-info": SemanticColourValue; - background: SemanticColourValue; - "background-hover": SemanticColourValue; - "background-selected": SemanticColourValue; - "background-disabled": SemanticColourValue; - "background-success": SemanticColourValue; - "background-inverse": SemanticColourValue; - "background-strong": SemanticColourValue; - "background-stronger": SemanticColourValue; - "background-hover-strong": SemanticColourValue; - "background-hover-subtle": SemanticColourValue; - "background-hover-neutral": SemanticColourValue; - "background-primary": SemanticColourValue; - "background-primary-hover": SemanticColourValue; - "background-primary-subtle": SemanticColourValue; - "background-primary-subtlest": SemanticColourValue; - "background-primary-subtlest-hover": SemanticColourValue; - "background-primary-subtlest-selected": SemanticColourValue; - "background-selected-strong": SemanticColourValue; - "background-selected-hover": SemanticColourValue; - "background-selected-disabled": SemanticColourValue; - "background-warning": SemanticColourValue; - "background-error": SemanticColourValue; - "background-info": SemanticColourValue; - "background-error-strong": SemanticColourValue; - "background-error-strong-hover": SemanticColourValue; + "bg-hover": SemanticColourValue; + "bg-selected": SemanticColourValue; + "bg-disabled": SemanticColourValue; + "bg-success": SemanticColourValue; + "bg-inverse": SemanticColourValue; + "bg-stronger": SemanticColourValue; + "bg-hover-strong": SemanticColourValue; + "bg-hover-subtle": SemanticColourValue; + "bg-hover-neutral": SemanticColourValue; + "bg-primary": SemanticColourValue; + "bg-primary-hover": SemanticColourValue; + "bg-primary-subtle": SemanticColourValue; + "bg-primary-subtlest": SemanticColourValue; + "bg-primary-subtlest-hover": SemanticColourValue; + "bg-primary-subtlest-selected": SemanticColourValue; + "bg-selected-strong": SemanticColourValue; + "bg-selected-hover": SemanticColourValue; + "bg-selected-disabled": SemanticColourValue; + "bg-warning": SemanticColourValue; + "bg-error": SemanticColourValue; + "bg-info": SemanticColourValue; + "bg-error-strong": SemanticColourValue; + "bg-error-strong-hover": SemanticColourValue; "overlay-strong": SemanticColourValue; "overlay-subtle": SemanticColourValue; @@ -96,4 +94,22 @@ export type SemanticColourSet = { "hyperlink-inverse": SemanticColourValue; "focus-ring": SemanticColourValue; "focus-ring-inverse": SemanticColourValue; + + // new + "text-primary": SemanticColourValue; + "text-selected-hover": SemanticColourValue; + "icon-selected-hover": SemanticColourValue; + "border-selected-hover": SemanticColourValue; + bg: SemanticColourValue; + "bg-primary-subtler": SemanticColourValue; + "bg-success-strong": SemanticColourValue; + "bg-inverse-subtle": SemanticColourValue; + "bg-inverse-subtler": SemanticColourValue; + "bg-inverse-subtlest": SemanticColourValue; + "bg-strong": SemanticColourValue; + "bg-strongest": SemanticColourValue; + "bg-selected-strongest": SemanticColourValue; + "bg-warning-strong": SemanticColourValue; + "bg-info-strong": SemanticColourValue; + "border-error-strong": SemanticColourValue; }; diff --git a/stories/theme/doc-elements/doc-semantic-colour-display.tsx b/stories/theme/doc-elements/doc-semantic-colour-display.tsx index a67785f40..4ab7ada41 100644 --- a/stories/theme/doc-elements/doc-semantic-colour-display.tsx +++ b/stories/theme/doc-elements/doc-semantic-colour-display.tsx @@ -1,4 +1,3 @@ -import { ColourSpec } from "src/theme/colour-primitive/theme-helper"; import { getSemanticColour } from "src/theme/colour-semantic/theme-helper"; import { SemanticColourSet, ThemeSpec } from "src/theme/types"; import styled, { ThemeProvider, useTheme } from "styled-components"; @@ -10,44 +9,21 @@ interface SemanticColourPalette { const SemanticColourPalette = ({ tokens }: SemanticColourPalette) => { const theme = useTheme(); - // apply proxy to spy on the primitive token being accessed - let colourToken: string; - const proxy = { - get(target, prop) { - colourToken = prop; - return target[prop]; - }, - }; - const scheme = theme.colourScheme; - const original = ColourSpec.collections[scheme]; - ColourSpec.collections[scheme] = new Proxy(original, proxy); - - const component = ( + return ( {tokens.map((token) => { - colourToken = undefined; const colour = getSemanticColour(token)({ theme }); - const reference = colourToken || colour; - colourToken = undefined; return ( -
- {token} - {reference} -
+ {token} ); })} ); - - // clean up proxy - ColourSpec.collections[scheme] = original; - - return component; }; interface SemanticColourDisplayProps { @@ -67,6 +43,7 @@ export const SemanticColourDisplay = ({ "text-subtle", "text-subtler", "text-subtlest", + "text-primary", ]} /> + @@ -101,13 +79,14 @@ export const SemanticColourDisplay = ({ ]} /> @@ -130,47 +110,62 @@ export const SemanticColourDisplay = ({ Background + + @@ -220,7 +215,7 @@ const Display = styled.div` margin-bottom: 2.5rem; &:last-child { - margin-bottom: 3rem; + margin-bottom: 1rem; } `; @@ -229,7 +224,7 @@ const Palette = styled.div``; const PaletteLabel = styled.div` font-size: 1.25rem; font-weight: bolder; - margin-bottom: 1.5rem; + margin-bottom: 1rem; `; const Swatch = styled.ul` @@ -237,13 +232,13 @@ const Swatch = styled.ul` flex-direction: column; margin: 0; padding: 0; - gap: 0.25rem; + gap: 0.5rem; `; const SwatchItem = styled.li` display: flex; justify-items: flex-start; - align-items: flex-start; + align-items: center; gap: 0.5rem; `; @@ -264,17 +259,9 @@ const SwatchColour = styled.div` background: ${(props) => props.$colour}; `; -const SwatchLabel = styled.div` +const SwatchLabel = styled.span` font-family: monospace; font-size: 1rem; border-radius: 4px; padding: 0 0.5rem; `; - -const SwatchReference = styled.div` - font-family: monospace; - font-size: 0.875rem; - border-radius: 4px; - padding: 0 0.5rem; - color: #787878; -`; From 45b29cc3c55bc239ac743dce1b25ad9537f0ddb6 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Thu, 26 Sep 2024 12:15:09 +0800 Subject: [PATCH 2/4] [CCUBE-1524][MAHI]Reorder specs to follow figma and remove unnessary comments --- .../specs/lifesg-semantic-tokens.ts | 102 +++++++++------- src/theme/colour-semantic/theme-helper.ts | 110 ++++++++++-------- src/theme/colour-semantic/types.ts | 109 +++++++++-------- .../doc-semantic-colour-display.tsx | 55 +++++++-- 4 files changed, 233 insertions(+), 143 deletions(-) diff --git a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts index 9a203eba9..1ee41851c 100644 --- a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts +++ b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts @@ -2,104 +2,122 @@ import { getPrimitiveColour } from "../../colour-primitive/theme-helper"; import { SemanticColourSet } from "../../types"; export const LifeSGColourSet: SemanticColourSet = { + // text text: getPrimitiveColour("neutral-20"), - "text-hover": getPrimitiveColour("primary-40"), - "text-selected": getPrimitiveColour("primary-50"), - "text-selected-hover": getPrimitiveColour("primary-40"), // - "text-disabled": getPrimitiveColour("neutral-50"), - "text-success": getPrimitiveColour("success-40"), - "text-inverse": getPrimitiveColour("white"), "text-subtle": getPrimitiveColour("neutral-30"), "text-subtler": getPrimitiveColour("neutral-50"), "text-subtlest": getPrimitiveColour("neutral-60"), "text-primary": getPrimitiveColour("primary-50"), + + "text-hover": getPrimitiveColour("primary-40"), + "text-selected": getPrimitiveColour("primary-50"), + "text-selected-hover": getPrimitiveColour("primary-40"), + + "text-disabled": getPrimitiveColour("neutral-50"), "text-disabled-subtle": getPrimitiveColour("neutral-60"), "text-disabled-subtlest": getPrimitiveColour("neutral-80"), "text-selected-disabled": getPrimitiveColour("neutral-50"), + + "text-success": getPrimitiveColour("success-40"), "text-warning": getPrimitiveColour("warning-40"), "text-error": getPrimitiveColour("error-40"), "text-info": getPrimitiveColour("info-40"), + "text-inverse": getPrimitiveColour("white"), + // icon icon: getPrimitiveColour("neutral-50"), - "icon-hover": getPrimitiveColour("primary-40"), - "icon-selected": getPrimitiveColour("primary-50"), - "icon-disabled": getPrimitiveColour("neutral-50"), - "icon-success": getPrimitiveColour("success-50"), - "icon-inverse": getPrimitiveColour("white"), "icon-subtle": getPrimitiveColour("neutral-60"), "icon-strongest": getPrimitiveColour("neutral-20"), - "icon-selected-hover": getPrimitiveColour("primary-40"), // "icon-primary": getPrimitiveColour("primary-50"), "icon-primary-subtle": getPrimitiveColour("primary-60"), "icon-primary-subtlest": getPrimitiveColour("primary-70"), + + "icon-hover": getPrimitiveColour("primary-40"), + "icon-selected": getPrimitiveColour("primary-50"), + "icon-selected-hover": getPrimitiveColour("primary-40"), + + "icon-disabled": getPrimitiveColour("neutral-50"), "icon-disabled-subtle": getPrimitiveColour("neutral-60"), "icon-selected-disabled": getPrimitiveColour("neutral-60"), + + "icon-success": getPrimitiveColour("success-50"), "icon-warning": getPrimitiveColour("warning-60"), "icon-error": getPrimitiveColour("error-50"), "icon-error-strong": getPrimitiveColour("error-40"), "icon-info": getPrimitiveColour("info-50"), + "icon-inverse": getPrimitiveColour("white"), + // border border: getPrimitiveColour("neutral-90"), - "border-hover": getPrimitiveColour("primary-90"), - "border-selected": getPrimitiveColour("primary-50"), - "border-selected-hover": getPrimitiveColour("primary-90"), // - "border-disabled": getPrimitiveColour("neutral-90"), - "border-success": getPrimitiveColour("success-60"), - "border-inverse": getPrimitiveColour("neutral-90"), "border-strong": getPrimitiveColour("neutral-70"), "border-primary": getPrimitiveColour("primary-50"), "border-primary-subtle": getPrimitiveColour("primary-60"), - "border-hover-strong": getPrimitiveColour("primary-60"), + "border-hover": getPrimitiveColour("primary-90"), + + "border-selected": getPrimitiveColour("primary-50"), "border-selected-subtle": getPrimitiveColour("primary-70"), "border-selected-subtlest": getPrimitiveColour("primary-90"), + "border-selected-hover": getPrimitiveColour("primary-90"), + "border-focus": getPrimitiveColour("primary-60"), "border-focus-strong": getPrimitiveColour("primary-50"), + "border-disabled": getPrimitiveColour("neutral-90"), "border-selected-disabled": getPrimitiveColour("neutral-70"), + + "border-success": getPrimitiveColour("success-60"), "border-warning": getPrimitiveColour("warning-60"), "border-error": getPrimitiveColour("error-60"), "border-error-focus": getPrimitiveColour("error-60"), "border-error-strong": getPrimitiveColour("error-40"), "border-info": getPrimitiveColour("info-60"), - bg: getPrimitiveColour("white"), // - "bg-hover": getPrimitiveColour("primary-95"), - "bg-selected": getPrimitiveColour("primary-95"), - "bg-disabled": getPrimitiveColour("neutral-95"), - "bg-success-strong": getPrimitiveColour("success-50"), // - "bg-success": getPrimitiveColour("success-100"), - "bg-inverse": getPrimitiveColour("neutral-20"), - "bg-inverse-subtle": getPrimitiveColour("neutral-30"), // - "bg-inverse-subtler": getPrimitiveColour("neutral-50"), // - "bg-inverse-subtlest": getPrimitiveColour("neutral-60"), // - "bg-strong": getPrimitiveColour("neutral-100"), // + // background + bg: getPrimitiveColour("white"), + "bg-strong": getPrimitiveColour("neutral-100"), "bg-stronger": getPrimitiveColour("neutral-95"), - "bg-strongest": getPrimitiveColour("neutral-90"), // + "bg-strongest": getPrimitiveColour("neutral-90"), + + "bg-hover": getPrimitiveColour("primary-95"), "bg-hover-strong": getPrimitiveColour("primary-90"), "bg-hover-subtle": getPrimitiveColour("primary-100"), "bg-hover-neutral": getPrimitiveColour("neutral-95"), - "bg-primary": getPrimitiveColour("primary-50"), - "bg-primary-hover": getPrimitiveColour("primary-40"), - "bg-primary-subtle": getPrimitiveColour("primary-60"), - "bg-primary-subtler": getPrimitiveColour("primary-80"), - "bg-primary-subtlest": getPrimitiveColour("primary-100"), - "bg-primary-subtlest-hover": getPrimitiveColour("primary-90"), - "bg-primary-subtlest-selected": getPrimitiveColour("primary-90"), + + "bg-selected": getPrimitiveColour("primary-95"), "bg-selected-strong": getPrimitiveColour("primary-90"), "bg-selected-hover": getPrimitiveColour("primary-90"), "bg-selected-disabled": getPrimitiveColour("neutral-95"), - "bg-selected-strongest": getPrimitiveColour("primary-90"), // + "bg-disabled": getPrimitiveColour("neutral-95"), + "bg-selected-strongest": getPrimitiveColour("primary-90"), + + "bg-success": getPrimitiveColour("success-100"), + "bg-success-strong": getPrimitiveColour("success-50"), "bg-warning": getPrimitiveColour("warning-100"), - "bg-warning-strong": getPrimitiveColour("warning-50"), // - "bg-error": getPrimitiveColour("error-100"), + "bg-warning-strong": getPrimitiveColour("warning-50"), "bg-info": getPrimitiveColour("info-100"), - "bg-info-strong": getPrimitiveColour("info-50"), // + "bg-info-strong": getPrimitiveColour("info-50"), + "bg-error": getPrimitiveColour("error-100"), "bg-error-strong": getPrimitiveColour("error-50"), "bg-error-strong-hover": getPrimitiveColour("error-30"), + "bg-inverse": getPrimitiveColour("neutral-20"), + "bg-inverse-subtle": getPrimitiveColour("neutral-30"), + "bg-inverse-subtler": getPrimitiveColour("neutral-50"), + "bg-inverse-subtlest": getPrimitiveColour("neutral-60"), + + "bg-primary": getPrimitiveColour("primary-50"), + "bg-primary-subtle": getPrimitiveColour("primary-60"), + "bg-primary-subtler": getPrimitiveColour("primary-80"), + "bg-primary-subtlest": getPrimitiveColour("primary-100"), + "bg-primary-hover": getPrimitiveColour("primary-40"), + "bg-primary-subtlest-hover": getPrimitiveColour("primary-90"), + "bg-primary-subtlest-selected": getPrimitiveColour("primary-90"), + + // 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: getPrimitiveColour("primary-50"), "hyperlink-inverse": "#FFCB6A", "focus-ring": getPrimitiveColour("black"), diff --git a/src/theme/colour-semantic/theme-helper.ts b/src/theme/colour-semantic/theme-helper.ts index 168d2d4c9..78c2e365d 100644 --- a/src/theme/colour-semantic/theme-helper.ts +++ b/src/theme/colour-semantic/theme-helper.ts @@ -41,110 +41,126 @@ export const getSemanticColour = (key: keyof SemanticColourSet) => { }; export const ColourSemantic = { + // text text: getSemanticColour("text"), - "text-hover": getSemanticColour("text-hover"), - "text-selected": getSemanticColour("text-selected"), - "text-disabled": getSemanticColour("text-disabled"), - "text-success": getSemanticColour("text-success"), - "text-inverse": getSemanticColour("text-inverse"), "text-subtle": getSemanticColour("text-subtle"), "text-subtler": getSemanticColour("text-subtler"), "text-subtlest": getSemanticColour("text-subtlest"), + "text-primary": getSemanticColour("text-primary"), + + "text-hover": getSemanticColour("text-hover"), + "text-selected": getSemanticColour("text-selected"), + "text-selected-hover": getSemanticColour("text-selected-hover"), + + "text-disabled": getSemanticColour("text-disabled"), "text-disabled-subtle": getSemanticColour("text-disabled-subtle"), "text-disabled-subtlest": getSemanticColour("text-disabled-subtlest"), "text-selected-disabled": getSemanticColour("text-selected-disabled"), + + "text-success": getSemanticColour("text-success"), "text-warning": getSemanticColour("text-warning"), "text-error": getSemanticColour("text-error"), "text-info": getSemanticColour("text-info"), + "text-inverse": getSemanticColour("text-inverse"), + // icon icon: getSemanticColour("icon"), - "icon-hover": getSemanticColour("icon-hover"), - "icon-selected": getSemanticColour("icon-selected"), - "icon-disabled": getSemanticColour("icon-disabled"), - "icon-success": getSemanticColour("icon-success"), - "icon-inverse": getSemanticColour("icon-inverse"), "icon-subtle": getSemanticColour("icon-subtle"), "icon-strongest": getSemanticColour("icon-strongest"), "icon-primary": getSemanticColour("icon-primary"), "icon-primary-subtle": getSemanticColour("icon-primary-subtle"), "icon-primary-subtlest": getSemanticColour("icon-primary-subtlest"), + + "icon-hover": getSemanticColour("icon-hover"), + "icon-selected": getSemanticColour("icon-selected"), + "icon-selected-hover": getSemanticColour("icon-selected-hover"), + + "icon-disabled": getSemanticColour("icon-disabled"), "icon-disabled-subtle": getSemanticColour("icon-disabled-subtle"), "icon-selected-disabled": getSemanticColour("icon-selected-disabled"), + + "icon-success": getSemanticColour("icon-success"), "icon-warning": getSemanticColour("icon-warning"), "icon-error": getSemanticColour("icon-error"), "icon-error-strong": getSemanticColour("icon-error-strong"), "icon-info": getSemanticColour("icon-info"), + "icon-inverse": getSemanticColour("icon-inverse"), + // border border: getSemanticColour("border"), - "border-hover": getSemanticColour("border-hover"), - "border-selected": getSemanticColour("border-selected"), - "border-disabled": getSemanticColour("border-disabled"), - "border-success": getSemanticColour("border-success"), - "border-inverse": getSemanticColour("border-inverse"), "border-strong": getSemanticColour("border-strong"), "border-primary": getSemanticColour("border-primary"), "border-primary-subtle": getSemanticColour("border-primary-subtle"), - "border-hover-strong": getSemanticColour("border-hover-strong"), + + "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"), + + "border-success": getSemanticColour("border-success"), "border-warning": getSemanticColour("border-warning"), "border-error": getSemanticColour("border-error"), "border-error-focus": getSemanticColour("border-error-focus"), + "border-error-strong": getSemanticColour("border-error-strong"), "border-info": getSemanticColour("border-info"), + // background + bg: getSemanticColour("bg"), + "bg-strong": getSemanticColour("bg-strong"), + "bg-stronger": getSemanticColour("bg-stronger"), + "bg-strongest": getSemanticColour("bg-strongest"), + "bg-hover": getSemanticColour("bg-hover"), + "bg-hover-strong": getSemanticColour("bg-hover-strong"), + "bg-hover-subtle": getSemanticColour("bg-hover-subtle"), + "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-strongest": getSemanticColour("bg-selected-strongest"), "bg-disabled": getSemanticColour("bg-disabled"), + "bg-success": getSemanticColour("bg-success"), + "bg-success-strong": getSemanticColour("bg-success-strong"), + "bg-warning": getSemanticColour("bg-warning"), + "bg-warning-strong": getSemanticColour("bg-warning-strong"), + "bg-info": getSemanticColour("bg-info"), + "bg-info-strong": getSemanticColour("bg-info-strong"), + "bg-error": getSemanticColour("bg-error"), + "bg-error-strong": getSemanticColour("bg-error-strong"), + "bg-error-strong-hover": getSemanticColour("bg-error-strong-hover"), + "bg-inverse": getSemanticColour("bg-inverse"), - "bg-stronger": getSemanticColour("bg-stronger"), - "bg-hover-strong": getSemanticColour("bg-hover-strong"), - "bg-hover-subtle": getSemanticColour("bg-hover-subtle"), - "bg-hover-neutral": getSemanticColour("bg-hover-neutral"), + "bg-inverse-subtle": getSemanticColour("bg-inverse-subtle"), + "bg-inverse-subtler": getSemanticColour("bg-inverse-subtler"), + "bg-inverse-subtlest": getSemanticColour("bg-inverse-subtlest"), + "bg-primary": getSemanticColour("bg-primary"), - "bg-primary-hover": getSemanticColour("bg-primary-hover"), "bg-primary-subtle": getSemanticColour("bg-primary-subtle"), + "bg-primary-subtler": getSemanticColour("bg-primary-subtler"), "bg-primary-subtlest": getSemanticColour("bg-primary-subtlest"), + "bg-primary-hover": getSemanticColour("bg-primary-hover"), "bg-primary-subtlest-hover": getSemanticColour("bg-primary-subtlest-hover"), "bg-primary-subtlest-selected": getSemanticColour( "bg-primary-subtlest-selected" ), - "bg-selected-strong": getSemanticColour("bg-selected-strong"), - "bg-selected-hover": getSemanticColour("bg-selected-hover"), - "bg-selected-disabled": getSemanticColour("bg-selected-disabled"), - "bg-warning": getSemanticColour("bg-warning"), - "bg-error": getSemanticColour("bg-error"), - "bg-info": getSemanticColour("bg-info"), - "bg-error-strong": getSemanticColour("bg-error-strong"), - "bg-error-strong-hover": getSemanticColour("bg-error-strong-hover"), + // overlay "overlay-strong": getSemanticColour("overlay-strong"), "overlay-subtle": getSemanticColour("overlay-subtle"), "overlay-inverse-gradient": getSemanticColour("overlay-inverse-gradient"), + // hyperlink, focus ring hyperlink: getSemanticColour("hyperlink"), "hyperlink-inverse": getSemanticColour("hyperlink-inverse"), "focus-ring": getSemanticColour("focus-ring"), "focus-ring-inverse": getSemanticColour("focus-ring-inverse"), - - // new changes: - "text-primary": getSemanticColour("text-primary"), - "text-selected-hover": getSemanticColour("text-selected-hover"), - "icon-selected-hover": getSemanticColour("icon-selected-hover"), - "border-selected-hover": getSemanticColour("border-selected-hover"), - bg: getSemanticColour("bg"), - "bg-primary-subtler": getSemanticColour("bg-primary-subtler"), - "bg-success-strong": getSemanticColour("bg-success-strong"), - "bg-inverse-subtle": getSemanticColour("bg-inverse-subtle"), - "bg-inverse-subtler": getSemanticColour("bg-inverse-subtler"), - "bg-inverse-subtlest": getSemanticColour("bg-inverse-subtlest"), - "bg-strong": getSemanticColour("bg-strong"), - "bg-strongest": getSemanticColour("bg-strongest"), - "bg-selected-strongest": getSemanticColour("bg-selected-strongest"), - "bg-warning-strong": getSemanticColour("bg-warning-strong"), - "bg-info-strong": getSemanticColour("bg-info-strong"), - "border-error-strong": getSemanticColour("border-error-strong"), }; diff --git a/src/theme/colour-semantic/types.ts b/src/theme/colour-semantic/types.ts index 3575bea88..66acbd670 100644 --- a/src/theme/colour-semantic/types.ts +++ b/src/theme/colour-semantic/types.ts @@ -7,109 +7,126 @@ export type SemanticColourCollectionMap = { export type SemanticColourSetOptions = Partial; type SemanticColourValue = string | ((props: any) => string); + export type SemanticColourSet = { + // text text: SemanticColourValue; - "text-hover": SemanticColourValue; - "text-selected": SemanticColourValue; - "text-disabled": SemanticColourValue; - "text-success": SemanticColourValue; - "text-inverse": SemanticColourValue; "text-subtle": SemanticColourValue; "text-subtler": SemanticColourValue; "text-subtlest": SemanticColourValue; + "text-primary": SemanticColourValue; + + "text-hover": SemanticColourValue; + "text-selected": SemanticColourValue; + "text-selected-hover": SemanticColourValue; + + "text-disabled": SemanticColourValue; "text-disabled-subtle": SemanticColourValue; "text-disabled-subtlest": SemanticColourValue; "text-selected-disabled": SemanticColourValue; + + "text-success": SemanticColourValue; "text-warning": SemanticColourValue; "text-error": SemanticColourValue; "text-info": SemanticColourValue; + "text-inverse": SemanticColourValue; + // icon icon: SemanticColourValue; - "icon-hover": SemanticColourValue; - "icon-selected": SemanticColourValue; - "icon-disabled": SemanticColourValue; - "icon-success": SemanticColourValue; - "icon-inverse": SemanticColourValue; "icon-subtle": SemanticColourValue; "icon-strongest": SemanticColourValue; "icon-primary": SemanticColourValue; "icon-primary-subtle": SemanticColourValue; "icon-primary-subtlest": SemanticColourValue; + + "icon-hover": SemanticColourValue; + "icon-selected": SemanticColourValue; + "icon-selected-hover": SemanticColourValue; + + "icon-disabled": SemanticColourValue; "icon-disabled-subtle": SemanticColourValue; "icon-selected-disabled": SemanticColourValue; + + "icon-success": SemanticColourValue; "icon-warning": SemanticColourValue; "icon-error": SemanticColourValue; "icon-error-strong": SemanticColourValue; "icon-info": SemanticColourValue; + "icon-inverse": SemanticColourValue; + // border border: SemanticColourValue; - "border-hover": SemanticColourValue; - "border-selected": SemanticColourValue; - "border-disabled": SemanticColourValue; - "border-success": SemanticColourValue; - "border-inverse": SemanticColourValue; "border-strong": SemanticColourValue; "border-primary": SemanticColourValue; "border-primary-subtle": SemanticColourValue; - "border-hover-strong": 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; + + "border-success": SemanticColourValue; "border-warning": SemanticColourValue; "border-error": SemanticColourValue; "border-error-focus": SemanticColourValue; + "border-error-strong": SemanticColourValue; "border-info": SemanticColourValue; - "bg-hover": SemanticColourValue; - "bg-selected": SemanticColourValue; - "bg-disabled": SemanticColourValue; - "bg-success": SemanticColourValue; - "bg-inverse": SemanticColourValue; + // background + bg: SemanticColourValue; + "bg-strong": SemanticColourValue; "bg-stronger": SemanticColourValue; + "bg-strongest": SemanticColourValue; + + "bg-hover": SemanticColourValue; "bg-hover-strong": SemanticColourValue; "bg-hover-subtle": SemanticColourValue; "bg-hover-neutral": SemanticColourValue; - "bg-primary": SemanticColourValue; - "bg-primary-hover": SemanticColourValue; - "bg-primary-subtle": SemanticColourValue; - "bg-primary-subtlest": SemanticColourValue; - "bg-primary-subtlest-hover": SemanticColourValue; - "bg-primary-subtlest-selected": SemanticColourValue; + + "bg-selected": SemanticColourValue; "bg-selected-strong": SemanticColourValue; "bg-selected-hover": SemanticColourValue; "bg-selected-disabled": SemanticColourValue; + "bg-selected-strongest": SemanticColourValue; + "bg-disabled": SemanticColourValue; + + "bg-success": SemanticColourValue; + "bg-success-strong": SemanticColourValue; "bg-warning": SemanticColourValue; - "bg-error": SemanticColourValue; + "bg-warning-strong": SemanticColourValue; "bg-info": SemanticColourValue; + "bg-info-strong": SemanticColourValue; + "bg-error": SemanticColourValue; "bg-error-strong": SemanticColourValue; "bg-error-strong-hover": SemanticColourValue; + "bg-inverse": SemanticColourValue; + "bg-inverse-subtle": SemanticColourValue; + "bg-inverse-subtler": SemanticColourValue; + "bg-inverse-subtlest": SemanticColourValue; + + "bg-primary": SemanticColourValue; + "bg-primary-subtle": SemanticColourValue; + "bg-primary-subtler": SemanticColourValue; + "bg-primary-subtlest": SemanticColourValue; + "bg-primary-hover": SemanticColourValue; + "bg-primary-subtlest-hover": SemanticColourValue; + "bg-primary-subtlest-selected": SemanticColourValue; + + // overlay "overlay-strong": SemanticColourValue; "overlay-subtle": SemanticColourValue; "overlay-inverse-gradient": SemanticColourValue; + // hyperlink, focus ring hyperlink: SemanticColourValue; "hyperlink-inverse": SemanticColourValue; "focus-ring": SemanticColourValue; "focus-ring-inverse": SemanticColourValue; - - // new - "text-primary": SemanticColourValue; - "text-selected-hover": SemanticColourValue; - "icon-selected-hover": SemanticColourValue; - "border-selected-hover": SemanticColourValue; - bg: SemanticColourValue; - "bg-primary-subtler": SemanticColourValue; - "bg-success-strong": SemanticColourValue; - "bg-inverse-subtle": SemanticColourValue; - "bg-inverse-subtler": SemanticColourValue; - "bg-inverse-subtlest": SemanticColourValue; - "bg-strong": SemanticColourValue; - "bg-strongest": SemanticColourValue; - "bg-selected-strongest": SemanticColourValue; - "bg-warning-strong": SemanticColourValue; - "bg-info-strong": SemanticColourValue; - "border-error-strong": SemanticColourValue; }; diff --git a/stories/theme/doc-elements/doc-semantic-colour-display.tsx b/stories/theme/doc-elements/doc-semantic-colour-display.tsx index 4ab7ada41..c6d75ab95 100644 --- a/stories/theme/doc-elements/doc-semantic-colour-display.tsx +++ b/stories/theme/doc-elements/doc-semantic-colour-display.tsx @@ -46,6 +46,13 @@ export const SemanticColourDisplay = ({ "text-primary", ]} /> + - - - + Icon + + + + + + + Border - + - @@ -259,7 +298,7 @@ const SwatchColour = styled.div` background: ${(props) => props.$colour}; `; -const SwatchLabel = styled.span` +const SwatchLabel = styled.div` font-family: monospace; font-size: 1rem; border-radius: 4px; From 5659e792b0287f33ea612b15a626cfa6288d09a7 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Thu, 26 Sep 2024 15:58:03 +0800 Subject: [PATCH 3/4] [CCUBE-1524][MAHI]Revert semantic storybook doc and update with only updated semantic tokens --- .../doc-semantic-colour-display.tsx | 44 ++++++++++++++++--- 1 file changed, 38 insertions(+), 6 deletions(-) diff --git a/stories/theme/doc-elements/doc-semantic-colour-display.tsx b/stories/theme/doc-elements/doc-semantic-colour-display.tsx index c6d75ab95..58524da14 100644 --- a/stories/theme/doc-elements/doc-semantic-colour-display.tsx +++ b/stories/theme/doc-elements/doc-semantic-colour-display.tsx @@ -1,3 +1,4 @@ +import { ColourSpec } from "src/theme/colour-primitive/theme-helper"; import { getSemanticColour } from "src/theme/colour-semantic/theme-helper"; import { SemanticColourSet, ThemeSpec } from "src/theme/types"; import styled, { ThemeProvider, useTheme } from "styled-components"; @@ -9,21 +10,44 @@ interface SemanticColourPalette { const SemanticColourPalette = ({ tokens }: SemanticColourPalette) => { const theme = useTheme(); - return ( + // apply proxy to spy on the primitive token being accessed + let colourToken: string; + const proxy = { + get(target, prop) { + colourToken = prop; + return target[prop]; + }, + }; + const scheme = theme.colourScheme; + const original = ColourSpec.collections[scheme]; + ColourSpec.collections[scheme] = new Proxy(original, proxy); + + const component = ( {tokens.map((token) => { + colourToken = undefined; const colour = getSemanticColour(token)({ theme }); + const reference = colourToken || colour; + colourToken = undefined; return ( - {token} +
+ {token} + {reference} +
); })} ); + + // clean up proxy + ColourSpec.collections[scheme] = original; + + return component; }; interface SemanticColourDisplayProps { @@ -254,7 +278,7 @@ const Display = styled.div` margin-bottom: 2.5rem; &:last-child { - margin-bottom: 1rem; + margin-bottom: 3rem; } `; @@ -263,7 +287,7 @@ const Palette = styled.div``; const PaletteLabel = styled.div` font-size: 1.25rem; font-weight: bolder; - margin-bottom: 1rem; + margin-bottom: 1.5rem; `; const Swatch = styled.ul` @@ -271,13 +295,13 @@ const Swatch = styled.ul` flex-direction: column; margin: 0; padding: 0; - gap: 0.5rem; + gap: 0.25rem; `; const SwatchItem = styled.li` display: flex; justify-items: flex-start; - align-items: center; + align-items: flex-start; gap: 0.5rem; `; @@ -304,3 +328,11 @@ const SwatchLabel = styled.div` border-radius: 4px; padding: 0 0.5rem; `; + +const SwatchReference = styled.div` + font-family: monospace; + font-size: 0.875rem; + border-radius: 4px; + padding: 0 0.5rem; + color: #787878; +`; From 6e24078ec27855be7097b7bf89a2cbffe5353dea Mon Sep 17 00:00:00 2001 From: Quek Ruo Ling Date: Thu, 26 Sep 2024 15:08:15 +0800 Subject: [PATCH 4/4] [CCUBE-1524][RL] Update order of tokens --- .../specs/lifesg-semantic-tokens.ts | 14 +++++++++----- src/theme/colour-semantic/theme-helper.ts | 12 ++++++++---- src/theme/colour-semantic/types.ts | 12 ++++++++---- .../doc-semantic-colour-display.tsx | 17 +++++------------ 4 files changed, 30 insertions(+), 25 deletions(-) diff --git a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts index 1ee41851c..52ee2cd5c 100644 --- 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 index 78c2e365d..d38664e1a 100644 --- a/src/theme/colour-semantic/theme-helper.ts +++ b/src/theme/colour-semantic/theme-helper.ts @@ -93,6 +93,7 @@ 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"), @@ -100,6 +101,7 @@ export const ColourSemantic = { "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 index 66acbd670..6e68b5f2a 100644 --- a/src/theme/colour-semantic/types.ts +++ b/src/theme/colour-semantic/types.ts @@ -61,6 +61,7 @@ export type SemanticColourSet = { "border-primary-subtle": SemanticColourValue; "border-hover": SemanticColourValue; + "border-selected": SemanticColourValue; "border-selected-subtle": SemanticColourValue; "border-selected-subtlest": SemanticColourValue; @@ -68,6 +69,7 @@ export type SemanticColourSet = { "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 index 58524da14..35f8229b3 100644 --- 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", ]} /> @@ -199,16 +198,14 @@ export const SemanticColourDisplay = ({ - Overlay