From 0a79277166d56184874b85f9434202a7c9f40b17 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Tue, 30 Jan 2024 11:08:36 +0000 Subject: [PATCH] Add decorative colours (#68) * Create styles in Token Studio * Generate assets. --------- Co-authored-by: Doug --- assets/android/src/SemanticColors.kt | 84 ++++++++++++++++++++ assets/ios/swift/CompoundColorTokens.swift | 12 +++ assets/ios/swift/CompoundUIColorTokens.swift | 12 +++ assets/web/css/cpd-common.css | 12 +++ assets/web/js/cpdDark.d.ts | 12 +++ assets/web/js/cpdDark.js | 12 +++ assets/web/js/cpdDarkHc.d.ts | 12 +++ assets/web/js/cpdDarkHc.js | 12 +++ assets/web/js/cpdLight.d.ts | 12 +++ assets/web/js/cpdLight.js | 12 +++ assets/web/js/cpdLightHc.d.ts | 12 +++ assets/web/js/cpdLightHc.js | 12 +++ tokens/$themes.json | 14 +++- tokens/platform-web.json | 2 +- tokens/theme-semantics.json | 64 +++++++++++++++ 15 files changed, 294 insertions(+), 2 deletions(-) diff --git a/assets/android/src/SemanticColors.kt b/assets/android/src/SemanticColors.kt index d411f588..83213408 100644 --- a/assets/android/src/SemanticColors.kt +++ b/assets/android/src/SemanticColors.kt @@ -45,6 +45,12 @@ class SemanticColors( bgCriticalPrimary: Color, bgCriticalSubtle: Color, bgCriticalSubtleHovered: Color, + bgDecorative1: Color, + bgDecorative2: Color, + bgDecorative3: Color, + bgDecorative4: Color, + bgDecorative5: Color, + bgDecorative6: Color, bgInfoSubtle: Color, bgSubtlePrimary: Color, bgSubtleSecondary: Color, @@ -76,6 +82,12 @@ class SemanticColors( textActionAccent: Color, textActionPrimary: Color, textCriticalPrimary: Color, + textDecorative1: Color, + textDecorative2: Color, + textDecorative3: Color, + textDecorative4: Color, + textDecorative5: Color, + textDecorative6: Color, textDisabled: Color, textInfoPrimary: Color, textLinkExternal: Color, @@ -128,6 +140,24 @@ Elevation: Default (Level 0) */ /** Default subtle critical surfaces. State: Hover. */ var bgCriticalSubtleHovered by mutableStateOf(bgCriticalSubtleHovered) private set + /** Decorative background (1, Lime) for avatars and usernames. */ + var bgDecorative1 by mutableStateOf(bgDecorative1) + private set + /** Decorative background (2, Cyan) for avatars and usernames. */ + var bgDecorative2 by mutableStateOf(bgDecorative2) + private set + /** Decorative background (3, Fuchsia) for avatars and usernames. */ + var bgDecorative3 by mutableStateOf(bgDecorative3) + private set + /** Decorative background (4, Purple) for avatars and usernames. */ + var bgDecorative4 by mutableStateOf(bgDecorative4) + private set + /** Decorative background (5, Pink) for avatars and usernames. */ + var bgDecorative5 by mutableStateOf(bgDecorative5) + private set + /** Decorative background (6, Orange) for avatars and usernames. */ + var bgDecorative6 by mutableStateOf(bgDecorative6) + private set /** Subtle background colour for informational elements. State: Rest. */ var bgInfoSubtle by mutableStateOf(bgInfoSubtle) private set @@ -223,6 +253,24 @@ Elevation: Default (Level 1). */ /** Text colour for destructive plain actions. */ var textCriticalPrimary by mutableStateOf(textCriticalPrimary) private set + /** Decorative text colour (1, Lime) for avatars and usernames. */ + var textDecorative1 by mutableStateOf(textDecorative1) + private set + /** Decorative text colour (2, Cyan) for avatars and usernames. */ + var textDecorative2 by mutableStateOf(textDecorative2) + private set + /** Decorative text colour (3, Fuchsia) for avatars and usernames. */ + var textDecorative3 by mutableStateOf(textDecorative3) + private set + /** Decorative text colour (4, Purple) for avatars and usernames. */ + var textDecorative4 by mutableStateOf(textDecorative4) + private set + /** Decorative text colour (5, Pink) for avatars and usernames. */ + var textDecorative5 by mutableStateOf(textDecorative5) + private set + /** Decorative text colour (6, Orange) for avatars and usernames. */ + var textDecorative6 by mutableStateOf(textDecorative6) + private set /** Use for regular text in disabled elements. There's no minimum contrast requirement. */ var textDisabled by mutableStateOf(textDisabled) private set @@ -262,6 +310,12 @@ Elevation: Default (Level 1). */ bgCriticalPrimary: Color = this.bgCriticalPrimary, bgCriticalSubtle: Color = this.bgCriticalSubtle, bgCriticalSubtleHovered: Color = this.bgCriticalSubtleHovered, + bgDecorative1: Color = this.bgDecorative1, + bgDecorative2: Color = this.bgDecorative2, + bgDecorative3: Color = this.bgDecorative3, + bgDecorative4: Color = this.bgDecorative4, + bgDecorative5: Color = this.bgDecorative5, + bgDecorative6: Color = this.bgDecorative6, bgInfoSubtle: Color = this.bgInfoSubtle, bgSubtlePrimary: Color = this.bgSubtlePrimary, bgSubtleSecondary: Color = this.bgSubtleSecondary, @@ -293,6 +347,12 @@ Elevation: Default (Level 1). */ textActionAccent: Color = this.textActionAccent, textActionPrimary: Color = this.textActionPrimary, textCriticalPrimary: Color = this.textCriticalPrimary, + textDecorative1: Color = this.textDecorative1, + textDecorative2: Color = this.textDecorative2, + textDecorative3: Color = this.textDecorative3, + textDecorative4: Color = this.textDecorative4, + textDecorative5: Color = this.textDecorative5, + textDecorative6: Color = this.textDecorative6, textDisabled: Color = this.textDisabled, textInfoPrimary: Color = this.textInfoPrimary, textLinkExternal: Color = this.textLinkExternal, @@ -316,6 +376,12 @@ Elevation: Default (Level 1). */ bgCriticalPrimary = bgCriticalPrimary, bgCriticalSubtle = bgCriticalSubtle, bgCriticalSubtleHovered = bgCriticalSubtleHovered, + bgDecorative1 = bgDecorative1, + bgDecorative2 = bgDecorative2, + bgDecorative3 = bgDecorative3, + bgDecorative4 = bgDecorative4, + bgDecorative5 = bgDecorative5, + bgDecorative6 = bgDecorative6, bgInfoSubtle = bgInfoSubtle, bgSubtlePrimary = bgSubtlePrimary, bgSubtleSecondary = bgSubtleSecondary, @@ -347,6 +413,12 @@ Elevation: Default (Level 1). */ textActionAccent = textActionAccent, textActionPrimary = textActionPrimary, textCriticalPrimary = textCriticalPrimary, + textDecorative1 = textDecorative1, + textDecorative2 = textDecorative2, + textDecorative3 = textDecorative3, + textDecorative4 = textDecorative4, + textDecorative5 = textDecorative5, + textDecorative6 = textDecorative6, textDisabled = textDisabled, textInfoPrimary = textInfoPrimary, textLinkExternal = textLinkExternal, @@ -372,6 +444,12 @@ Elevation: Default (Level 1). */ bgCriticalPrimary = other.bgCriticalPrimary bgCriticalSubtle = other.bgCriticalSubtle bgCriticalSubtleHovered = other.bgCriticalSubtleHovered + bgDecorative1 = other.bgDecorative1 + bgDecorative2 = other.bgDecorative2 + bgDecorative3 = other.bgDecorative3 + bgDecorative4 = other.bgDecorative4 + bgDecorative5 = other.bgDecorative5 + bgDecorative6 = other.bgDecorative6 bgInfoSubtle = other.bgInfoSubtle bgSubtlePrimary = other.bgSubtlePrimary bgSubtleSecondary = other.bgSubtleSecondary @@ -403,6 +481,12 @@ Elevation: Default (Level 1). */ textActionAccent = other.textActionAccent textActionPrimary = other.textActionPrimary textCriticalPrimary = other.textCriticalPrimary + textDecorative1 = other.textDecorative1 + textDecorative2 = other.textDecorative2 + textDecorative3 = other.textDecorative3 + textDecorative4 = other.textDecorative4 + textDecorative5 = other.textDecorative5 + textDecorative6 = other.textDecorative6 textDisabled = other.textDisabled textInfoPrimary = other.textInfoPrimary textLinkExternal = other.textLinkExternal diff --git a/assets/ios/swift/CompoundColorTokens.swift b/assets/ios/swift/CompoundColorTokens.swift index b1ce15af..82a57862 100644 --- a/assets/ios/swift/CompoundColorTokens.swift +++ b/assets/ios/swift/CompoundColorTokens.swift @@ -340,6 +340,12 @@ public class CompoundColorTokens { public static let colorBorderFocused = colorBlue900 public static let colorBorderDisabled = colorGray500 public static let colorBgSubtleSecondaryLevel0 = colorThemeBg + public static let colorBgDecorative6 = colorAlphaOrange300 + public static let colorBgDecorative5 = colorAlphaPink300 + public static let colorBgDecorative4 = colorAlphaPurple300 + public static let colorBgDecorative3 = colorAlphaFuchsia300 + public static let colorBgDecorative2 = colorAlphaCyan300 + public static let colorBgDecorative1 = colorAlphaLime300 public static let colorBgInfoSubtle = colorBlue200 public static let colorBgSuccessSubtle = colorGreen200 public static let colorBgCriticalSubtleHovered = colorRed300 @@ -358,6 +364,12 @@ public class CompoundColorTokens { public static let colorBgCanvasDefault = colorThemeBg public static let colorBgSubtleSecondary = colorGray300 public static let colorBgSubtlePrimary = colorGray400 + public static let colorTextDecorative6 = colorOrange1100 + public static let colorTextDecorative5 = colorPink1100 + public static let colorTextDecorative4 = colorPurple1100 + public static let colorTextDecorative3 = colorFuchsia1100 + public static let colorTextDecorative2 = colorCyan1100 + public static let colorTextDecorative1 = colorLime1100 public static let colorTextOnSolidPrimary = colorThemeBg public static let colorTextInfoPrimary = colorBlue900 public static let colorTextSuccessPrimary = colorGreen900 diff --git a/assets/ios/swift/CompoundUIColorTokens.swift b/assets/ios/swift/CompoundUIColorTokens.swift index eacd1701..4b04e697 100644 --- a/assets/ios/swift/CompoundUIColorTokens.swift +++ b/assets/ios/swift/CompoundUIColorTokens.swift @@ -340,6 +340,12 @@ public class CompoundUIColorTokens { public static let colorBorderFocused = colorBlue900 public static let colorBorderDisabled = colorGray500 public static let colorBgSubtleSecondaryLevel0 = colorThemeBg + public static let colorBgDecorative6 = colorAlphaOrange300 + public static let colorBgDecorative5 = colorAlphaPink300 + public static let colorBgDecorative4 = colorAlphaPurple300 + public static let colorBgDecorative3 = colorAlphaFuchsia300 + public static let colorBgDecorative2 = colorAlphaCyan300 + public static let colorBgDecorative1 = colorAlphaLime300 public static let colorBgInfoSubtle = colorBlue200 public static let colorBgSuccessSubtle = colorGreen200 public static let colorBgCriticalSubtleHovered = colorRed300 @@ -358,6 +364,12 @@ public class CompoundUIColorTokens { public static let colorBgCanvasDefault = colorThemeBg public static let colorBgSubtleSecondary = colorGray300 public static let colorBgSubtlePrimary = colorGray400 + public static let colorTextDecorative6 = colorOrange1100 + public static let colorTextDecorative5 = colorPink1100 + public static let colorTextDecorative4 = colorPurple1100 + public static let colorTextDecorative3 = colorFuchsia1100 + public static let colorTextDecorative2 = colorCyan1100 + public static let colorTextDecorative1 = colorLime1100 public static let colorTextOnSolidPrimary = colorThemeBg public static let colorTextInfoPrimary = colorBlue900 public static let colorTextSuccessPrimary = colorGreen900 diff --git a/assets/web/css/cpd-common.css b/assets/web/css/cpd-common.css index 936f3d8e..b74b4dd4 100644 --- a/assets/web/css/cpd-common.css +++ b/assets/web/css/cpd-common.css @@ -61,6 +61,12 @@ --cpd-color-border-interactive-primary: var(--cpd-color-gray-800); --cpd-color-border-focused: var(--cpd-color-blue-900); --cpd-color-border-disabled: var(--cpd-color-gray-500); + --cpd-color-bg-decorative-6: var(--cpd-color-alpha-orange-300); + --cpd-color-bg-decorative-5: var(--cpd-color-alpha-pink-300); + --cpd-color-bg-decorative-4: var(--cpd-color-alpha-purple-300); + --cpd-color-bg-decorative-3: var(--cpd-color-alpha-fuchsia-300); + --cpd-color-bg-decorative-2: var(--cpd-color-alpha-cyan-300); + --cpd-color-bg-decorative-1: var(--cpd-color-alpha-lime-300); --cpd-color-bg-info-subtle: var(--cpd-color-blue-200); --cpd-color-bg-success-subtle: var(--cpd-color-green-200); --cpd-color-bg-critical-subtle-hovered: var(--cpd-color-red-300); @@ -78,6 +84,12 @@ --cpd-color-bg-canvas-default: var(--cpd-color-theme-bg); --cpd-color-bg-subtle-secondary: var(--cpd-color-gray-300); --cpd-color-bg-subtle-primary: var(--cpd-color-gray-400); + --cpd-color-text-decorative-6: var(--cpd-color-orange-1100); + --cpd-color-text-decorative-5: var(--cpd-color-pink-1100); + --cpd-color-text-decorative-4: var(--cpd-color-purple-1100); + --cpd-color-text-decorative-3: var(--cpd-color-fuchsia-1100); + --cpd-color-text-decorative-2: var(--cpd-color-cyan-1100); + --cpd-color-text-decorative-1: var(--cpd-color-lime-1100); --cpd-color-text-on-solid-primary: var(--cpd-color-theme-bg); --cpd-color-text-info-primary: var(--cpd-color-blue-900); --cpd-color-text-success-primary: var(--cpd-color-green-900); diff --git a/assets/web/js/cpdDark.d.ts b/assets/web/js/cpdDark.d.ts index 04b22007..cc3a59e5 100644 --- a/assets/web/js/cpdDark.d.ts +++ b/assets/web/js/cpdDark.d.ts @@ -503,6 +503,12 @@ export const cpdColorTextCriticalPrimary : string; export const cpdColorTextSuccessPrimary : string; export const cpdColorTextInfoPrimary : string; export const cpdColorTextOnSolidPrimary : string; +export const cpdColorTextDecorative1 : string; +export const cpdColorTextDecorative2 : string; +export const cpdColorTextDecorative3 : string; +export const cpdColorTextDecorative4 : string; +export const cpdColorTextDecorative5 : string; +export const cpdColorTextDecorative6 : string; export const cpdColorBgSubtlePrimary : string; export const cpdColorBgSubtleSecondary : string; export const cpdColorBgCanvasDefault : string; @@ -521,6 +527,12 @@ export const cpdColorBgCriticalSubtle : string; export const cpdColorBgCriticalSubtleHovered : string; export const cpdColorBgSuccessSubtle : string; export const cpdColorBgInfoSubtle : string; +export const cpdColorBgDecorative1 : string; +export const cpdColorBgDecorative2 : string; +export const cpdColorBgDecorative3 : string; +export const cpdColorBgDecorative4 : string; +export const cpdColorBgDecorative5 : string; +export const cpdColorBgDecorative6 : string; export const cpdColorBgSubtleSecondaryLevel0 : string; export const cpdColorBorderDisabled : string; export const cpdColorBorderFocused : string; diff --git a/assets/web/js/cpdDark.js b/assets/web/js/cpdDark.js index 83649615..5af0ff99 100644 --- a/assets/web/js/cpdDark.js +++ b/assets/web/js/cpdDark.js @@ -503,6 +503,12 @@ export const cpdColorTextCriticalPrimary = "#fd3e3c"; export const cpdColorTextSuccessPrimary = "#129a78"; export const cpdColorTextInfoPrimary = "#4187eb"; export const cpdColorTextOnSolidPrimary = "#101317"; +export const cpdColorTextDecorative1 = "#56c02c"; +export const cpdColorTextDecorative2 = "#21bacd"; +export const cpdColorTextDecorative3 = "#d991de"; +export const cpdColorTextDecorative4 = "#ad9cfe"; +export const cpdColorTextDecorative5 = "#fe84a2"; +export const cpdColorTextDecorative6 = "#f6913d"; export const cpdColorBgSubtlePrimary = "#26282d"; export const cpdColorBgSubtleSecondary = "#1d1f24"; export const cpdColorBgCanvasDefault = "#101317"; @@ -521,6 +527,12 @@ export const cpdColorBgCriticalSubtle = "#3e0000"; export const cpdColorBgCriticalSubtleHovered = "#470000"; export const cpdColorBgSuccessSubtle = "#001f0e"; export const cpdColorBgInfoSubtle = "#00095d"; +export const cpdColorBgDecorative1 = "hsl(120, 100%, 8%, 1)"; +export const cpdColorBgDecorative2 = "hsl(219, 100%, 15%, 1)"; +export const cpdColorBgDecorative3 = "hsl(282, 100%, 15%, 1)"; +export const cpdColorBgDecorative4 = "hsl(259, 100%, 21%, 1)"; +export const cpdColorBgDecorative5 = "hsl(339, 100%, 14%, 1)"; +export const cpdColorBgDecorative6 = "hsl(0, 100%, 14%, 1)"; export const cpdColorBgSubtleSecondaryLevel0 = "#101317"; export const cpdColorBorderDisabled = "#323539"; export const cpdColorBorderFocused = "#4187eb"; diff --git a/assets/web/js/cpdDarkHc.d.ts b/assets/web/js/cpdDarkHc.d.ts index 04b22007..cc3a59e5 100644 --- a/assets/web/js/cpdDarkHc.d.ts +++ b/assets/web/js/cpdDarkHc.d.ts @@ -503,6 +503,12 @@ export const cpdColorTextCriticalPrimary : string; export const cpdColorTextSuccessPrimary : string; export const cpdColorTextInfoPrimary : string; export const cpdColorTextOnSolidPrimary : string; +export const cpdColorTextDecorative1 : string; +export const cpdColorTextDecorative2 : string; +export const cpdColorTextDecorative3 : string; +export const cpdColorTextDecorative4 : string; +export const cpdColorTextDecorative5 : string; +export const cpdColorTextDecorative6 : string; export const cpdColorBgSubtlePrimary : string; export const cpdColorBgSubtleSecondary : string; export const cpdColorBgCanvasDefault : string; @@ -521,6 +527,12 @@ export const cpdColorBgCriticalSubtle : string; export const cpdColorBgCriticalSubtleHovered : string; export const cpdColorBgSuccessSubtle : string; export const cpdColorBgInfoSubtle : string; +export const cpdColorBgDecorative1 : string; +export const cpdColorBgDecorative2 : string; +export const cpdColorBgDecorative3 : string; +export const cpdColorBgDecorative4 : string; +export const cpdColorBgDecorative5 : string; +export const cpdColorBgDecorative6 : string; export const cpdColorBgSubtleSecondaryLevel0 : string; export const cpdColorBorderDisabled : string; export const cpdColorBorderFocused : string; diff --git a/assets/web/js/cpdDarkHc.js b/assets/web/js/cpdDarkHc.js index 87c68de7..6fc59814 100644 --- a/assets/web/js/cpdDarkHc.js +++ b/assets/web/js/cpdDarkHc.js @@ -503,6 +503,12 @@ export const cpdColorTextCriticalPrimary = "#ff968c"; export const cpdColorTextSuccessPrimary = "#37c998"; export const cpdColorTextInfoPrimary = "#89b5f6"; export const cpdColorTextOnSolidPrimary = "#101317"; +export const cpdColorTextDecorative1 = "#92e175"; +export const cpdColorTextDecorative2 = "#93d9e2"; +export const cpdColorTextDecorative3 = "#eac0ed"; +export const cpdColorTextDecorative4 = "#cec7ff"; +export const cpdColorTextDecorative5 = "#ffbbca"; +export const cpdColorTextDecorative6 = "#fdc197"; export const cpdColorBgSubtlePrimary = "#2b2e33"; export const cpdColorBgSubtleSecondary = "#26282d"; export const cpdColorBgCanvasDefault = "#101317"; @@ -521,6 +527,12 @@ export const cpdColorBgCriticalSubtle = "#470000"; export const cpdColorBgCriticalSubtleHovered = "#590000"; export const cpdColorBgSuccessSubtle = "#002513"; export const cpdColorBgInfoSubtle = "#001264"; +export const cpdColorBgDecorative1 = "hsl(120, 100%, 9%, 1)"; +export const cpdColorBgDecorative2 = "hsl(215, 100%, 18%, 1)"; +export const cpdColorBgDecorative3 = "hsl(285, 100%, 18%, 1)"; +export const cpdColorBgDecorative4 = "hsl(261, 100%, 25%, 1)"; +export const cpdColorBgDecorative5 = "hsl(335, 100%, 17%, 1)"; +export const cpdColorBgDecorative6 = "hsl(0, 100%, 17%, 1)"; export const cpdColorBgSubtleSecondaryLevel0 = "#101317"; export const cpdColorBorderDisabled = "#3c3f44"; export const cpdColorBorderFocused = "#89b5f6"; diff --git a/assets/web/js/cpdLight.d.ts b/assets/web/js/cpdLight.d.ts index 04b22007..cc3a59e5 100644 --- a/assets/web/js/cpdLight.d.ts +++ b/assets/web/js/cpdLight.d.ts @@ -503,6 +503,12 @@ export const cpdColorTextCriticalPrimary : string; export const cpdColorTextSuccessPrimary : string; export const cpdColorTextInfoPrimary : string; export const cpdColorTextOnSolidPrimary : string; +export const cpdColorTextDecorative1 : string; +export const cpdColorTextDecorative2 : string; +export const cpdColorTextDecorative3 : string; +export const cpdColorTextDecorative4 : string; +export const cpdColorTextDecorative5 : string; +export const cpdColorTextDecorative6 : string; export const cpdColorBgSubtlePrimary : string; export const cpdColorBgSubtleSecondary : string; export const cpdColorBgCanvasDefault : string; @@ -521,6 +527,12 @@ export const cpdColorBgCriticalSubtle : string; export const cpdColorBgCriticalSubtleHovered : string; export const cpdColorBgSuccessSubtle : string; export const cpdColorBgInfoSubtle : string; +export const cpdColorBgDecorative1 : string; +export const cpdColorBgDecorative2 : string; +export const cpdColorBgDecorative3 : string; +export const cpdColorBgDecorative4 : string; +export const cpdColorBgDecorative5 : string; +export const cpdColorBgDecorative6 : string; export const cpdColorBgSubtleSecondaryLevel0 : string; export const cpdColorBorderDisabled : string; export const cpdColorBorderFocused : string; diff --git a/assets/web/js/cpdLight.js b/assets/web/js/cpdLight.js index e404fb29..2dbf9ff8 100644 --- a/assets/web/js/cpdLight.js +++ b/assets/web/js/cpdLight.js @@ -503,6 +503,12 @@ export const cpdColorTextCriticalPrimary = "#d51928"; export const cpdColorTextSuccessPrimary = "#007a61"; export const cpdColorTextInfoPrimary = "#0467dd"; export const cpdColorTextOnSolidPrimary = "#ffffff"; +export const cpdColorTextDecorative1 = "#005f00"; +export const cpdColorTextDecorative2 = "#00548c"; +export const cpdColorTextDecorative3 = "#822198"; +export const cpdColorTextDecorative4 = "#5d26cd"; +export const cpdColorTextDecorative5 = "#9f0850"; +export const cpdColorTextDecorative6 = "#9b2200"; export const cpdColorBgSubtlePrimary = "#e1e6ec"; export const cpdColorBgSubtleSecondary = "#f0f2f5"; export const cpdColorBgCanvasDefault = "#ffffff"; @@ -521,6 +527,12 @@ export const cpdColorBgCriticalSubtle = "#fff7f6"; export const cpdColorBgCriticalSubtleHovered = "#ffefec"; export const cpdColorBgSuccessSubtle = "#f1fbf6"; export const cpdColorBgInfoSubtle = "#f4f8ff"; +export const cpdColorBgDecorative1 = "hsla(107, 98%, 41%, 0.15)"; +export const cpdColorBgDecorative2 = "hsla(188, 100%, 38%, 0.11)"; +export const cpdColorBgDecorative3 = "hsla(295, 89%, 41%, 0.07)"; +export const cpdColorBgDecorative4 = "hsla(248, 100%, 55%, 0.07)"; +export const cpdColorBgDecorative5 = "hsla(347, 100%, 54%, 0.08)"; +export const cpdColorBgDecorative6 = "hsla(24, 100%, 52%, 0.11)"; export const cpdColorBgSubtleSecondaryLevel0 = "#f0f2f5"; export const cpdColorBorderDisabled = "#cdd3da"; export const cpdColorBorderFocused = "#0467dd"; diff --git a/assets/web/js/cpdLightHc.d.ts b/assets/web/js/cpdLightHc.d.ts index 04b22007..cc3a59e5 100644 --- a/assets/web/js/cpdLightHc.d.ts +++ b/assets/web/js/cpdLightHc.d.ts @@ -503,6 +503,12 @@ export const cpdColorTextCriticalPrimary : string; export const cpdColorTextSuccessPrimary : string; export const cpdColorTextInfoPrimary : string; export const cpdColorTextOnSolidPrimary : string; +export const cpdColorTextDecorative1 : string; +export const cpdColorTextDecorative2 : string; +export const cpdColorTextDecorative3 : string; +export const cpdColorTextDecorative4 : string; +export const cpdColorTextDecorative5 : string; +export const cpdColorTextDecorative6 : string; export const cpdColorBgSubtlePrimary : string; export const cpdColorBgSubtleSecondary : string; export const cpdColorBgCanvasDefault : string; @@ -521,6 +527,12 @@ export const cpdColorBgCriticalSubtle : string; export const cpdColorBgCriticalSubtleHovered : string; export const cpdColorBgSuccessSubtle : string; export const cpdColorBgInfoSubtle : string; +export const cpdColorBgDecorative1 : string; +export const cpdColorBgDecorative2 : string; +export const cpdColorBgDecorative3 : string; +export const cpdColorBgDecorative4 : string; +export const cpdColorBgDecorative5 : string; +export const cpdColorBgDecorative6 : string; export const cpdColorBgSubtleSecondaryLevel0 : string; export const cpdColorBorderDisabled : string; export const cpdColorBorderFocused : string; diff --git a/assets/web/js/cpdLightHc.js b/assets/web/js/cpdLightHc.js index 13c70396..fc1ba9eb 100644 --- a/assets/web/js/cpdLightHc.js +++ b/assets/web/js/cpdLightHc.js @@ -503,6 +503,12 @@ export const cpdColorTextCriticalPrimary = "#99001a"; export const cpdColorTextSuccessPrimary = "#00553d"; export const cpdColorTextInfoPrimary = "#0543a7"; export const cpdColorTextOnSolidPrimary = "#ffffff"; +export const cpdColorTextDecorative1 = "#004200"; +export const cpdColorTextDecorative2 = "#00376e"; +export const cpdColorTextDecorative3 = "#5c0f76"; +export const cpdColorTextDecorative4 = "#4200a6"; +export const cpdColorTextDecorative5 = "#72003a"; +export const cpdColorTextDecorative6 = "#770000"; export const cpdColorBgSubtlePrimary = "#d7dce3"; export const cpdColorBgSubtleSecondary = "#e1e6ec"; export const cpdColorBgCanvasDefault = "#ffffff"; @@ -521,6 +527,12 @@ export const cpdColorBgCriticalSubtle = "#ffefec"; export const cpdColorBgCriticalSubtleHovered = "#ffdfda"; export const cpdColorBgSuccessSubtle = "#e3f7ed"; export const cpdColorBgInfoSubtle = "#e9f2ff"; +export const cpdColorBgDecorative1 = "hsla(105, 92%, 42%, 0.28)"; +export const cpdColorBgDecorative2 = "hsla(186, 100%, 37%, 0.22)"; +export const cpdColorBgDecorative3 = "hsla(298, 91%, 40%, 0.13)"; +export const cpdColorBgDecorative4 = "hsla(248, 100%, 53%, 0.12)"; +export const cpdColorBgDecorative5 = "hsla(347, 100%, 50%, 0.13)"; +export const cpdColorBgDecorative6 = "hsla(25, 100%, 51%, 0.22)"; export const cpdColorBgSubtleSecondaryLevel0 = "#e1e6ec"; export const cpdColorBorderDisabled = "#bdc4cc"; export const cpdColorBorderFocused = "#0543a7"; diff --git a/tokens/$themes.json b/tokens/$themes.json index e9af5111..273202aa 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -458,7 +458,19 @@ "color.icon.info.primary": "S:f259ae7aedb674cd29be686ac6d72ef8afabb7b1,", "color.icon.on-solid.primary": "S:8afa150a81c836a4ee16d24f709cbaddb296b08b,", "color.bg.canvas.default-level-1": "S:04233ecd06019bc7a04449b1d95b4d8af7ec2005,", - "color.bg.subtle-secondary-level-0": "S:db7501aebb577b3f17d8eee794407644ad539e7a," + "color.bg.subtle-secondary-level-0": "S:db7501aebb577b3f17d8eee794407644ad539e7a,", + "color.text.decorative.1": "S:a2b3f80beb25965dee620cbebdac494c7afcf205,", + "color.text.decorative.2": "S:9173ca55fd66eb123702b44efd7da62104713d6d,", + "color.text.decorative.3": "S:02f72780150d25ad50bbec6d68f56f1e4d5445d8,", + "color.text.decorative.4": "S:8d03e39f24769042763d7a2bc477c22e71309817,", + "color.text.decorative.5": "S:96b30adbdb3d48c1bd8d8f132cd9874ad81ba2f2,", + "color.text.decorative.6": "S:56f05ec64d131bb8be3e41567344ce17fe54ea24,", + "color.bg.decorative.1": "S:bef8775717de5b4062b533507fe6aa2549ab5743,", + "color.bg.decorative.2": "S:b0174d7447c029c978dc6a373f5e12b63edd8ded,", + "color.bg.decorative.3": "S:12348db238c91a726b220b01b1e14a1d699102d4,", + "color.bg.decorative.4": "S:210cb1fc090facc2f2f87fe66bd48d72aac870ff,", + "color.bg.decorative.5": "S:fb0c200f3f19c525817025c836d00a7294e4b228,", + "color.bg.decorative.6": "S:49026394d40f4240fa4fdb31af568c3828492701," } }, { diff --git a/tokens/platform-web.json b/tokens/platform-web.json index 3890abba..36ccc977 100644 --- a/tokens/platform-web.json +++ b/tokens/platform-web.json @@ -350,4 +350,4 @@ } } } -} +} \ No newline at end of file diff --git a/tokens/theme-semantics.json b/tokens/theme-semantics.json index a2153d75..a595f960 100644 --- a/tokens/theme-semantics.json +++ b/tokens/theme-semantics.json @@ -67,6 +67,38 @@ "type": "color", "description": "For use as text color on top of high-contrast solid backgrounds like primary, accent, or destructive actions." } + }, + "decorative": { + "1": { + "value": "{color.lime.1100}", + "type": "color", + "description": "Decorative text colour (1, Lime) for avatars and usernames." + }, + "2": { + "value": "{color.cyan.1100}", + "type": "color", + "description": "Decorative text colour (2, Cyan) for avatars and usernames." + }, + "3": { + "value": "{color.fuchsia.1100}", + "type": "color", + "description": "Decorative text colour (3, Fuchsia) for avatars and usernames." + }, + "4": { + "value": "{color.purple.1100}", + "type": "color", + "description": "Decorative text colour (4, Purple) for avatars and usernames." + }, + "5": { + "value": "{color.pink.1100}", + "type": "color", + "description": "Decorative text colour (5, Pink) for avatars and usernames." + }, + "6": { + "value": "{color.orange.1100}", + "type": "color", + "description": "Decorative text colour (6, Orange) for avatars and usernames." + } } }, "bg": { @@ -168,6 +200,38 @@ "type": "color", "description": "Subtle background colour for informational elements. State: Rest." } + }, + "decorative": { + "1": { + "value": "{color.alpha.lime.300}", + "type": "color", + "description": "Decorative background (1, Lime) for avatars and usernames." + }, + "2": { + "value": "{color.alpha.cyan.300}", + "type": "color", + "description": "Decorative background (2, Cyan) for avatars and usernames." + }, + "3": { + "value": "{color.alpha.fuchsia.300}", + "type": "color", + "description": "Decorative background (3, Fuchsia) for avatars and usernames." + }, + "4": { + "value": "{color.alpha.purple.300}", + "type": "color", + "description": "Decorative background (4, Purple) for avatars and usernames." + }, + "5": { + "value": "{color.alpha.pink.300}", + "type": "color", + "description": "Decorative background (5, Pink) for avatars and usernames." + }, + "6": { + "value": "{color.alpha.orange.300}", + "type": "color", + "description": "Decorative background (6, Orange) for avatars and usernames." + } } }, "border": {