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..52ee2cd5c 100644 --- a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts +++ b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts @@ -2,92 +2,128 @@ 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-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("primary-60"), + "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-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("primary-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-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"), - 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"), + // background + bg: getPrimitiveColour("white"), + "bg-strong": getPrimitiveColour("neutral-100"), + "bg-stronger": getPrimitiveColour("neutral-95"), + "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-selected": getPrimitiveColour("primary-95"), + "bg-selected-hover": getPrimitiveColour("primary-90"), + "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"), + "bg-warning-strong": getPrimitiveColour("warning-50"), + "bg-info": getPrimitiveColour("info-100"), + "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 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 df89ed637..d38664e1a 100644 --- a/src/theme/colour-semantic/theme-helper.ts +++ b/src/theme/colour-semantic/theme-helper.ts @@ -41,104 +41,130 @@ 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: 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" + // 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-hover": getSemanticColour("bg-selected-hover"), + "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"), + "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-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-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" ), + // overlay "overlay-strong": getSemanticColour("overlay-strong"), "overlay-subtle": getSemanticColour("overlay-subtle"), - "overlay-inverse-gradient": getSemanticColour("overlay-inverse-gradient"), + // 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 31cf7500d..6e68b5f2a 100644 --- a/src/theme/colour-semantic/types.ts +++ b/src/theme/colour-semantic/types.ts @@ -7,93 +7,130 @@ 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; - 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; + // 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-selected": SemanticColourValue; + "bg-selected-hover": SemanticColourValue; + "bg-selected-strong": SemanticColourValue; + "bg-selected-strongest": SemanticColourValue; + "bg-disabled": SemanticColourValue; + "bg-selected-disabled": SemanticColourValue; + + "bg-success": SemanticColourValue; + "bg-success-strong": SemanticColourValue; + "bg-warning": 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 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 a67785f40..35f8229b3 100644 --- a/stories/theme/doc-elements/doc-semantic-colour-display.tsx +++ b/stories/theme/doc-elements/doc-semantic-colour-display.tsx @@ -67,6 +67,14 @@ export const SemanticColourDisplay = ({ "text-subtle", "text-subtler", "text-subtlest", + "text-primary", + ]} + /> + - - + Icon + + + + + + + Border - + @@ -130,58 +174,65 @@ export const SemanticColourDisplay = ({ Background Overlay