Add decorative colours (#68)

* Create styles in Token Studio * Generate assets. --------- Co-authored-by: Doug <[email protected]>
element-hq · Jan 30, 2024 · 0a79277 · 0a79277
1 parent e4c138d
commit 0a79277
Show file tree

Hide file tree

Showing 15 changed files with 294 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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";