Create accent color semantic scale

assets/android/SemanticColors.kt

@@ -18,6 +18,20 @@ import androidx.compose.ui.graphics.Color
   */
 @Stable
 class SemanticColors(
+    accent100: Color,
+    accent1000: Color,
+    accent1100: Color,
+    accent1200: Color,
+    accent1300: Color,
+    accent1400: Color,
+    accent200: Color,
+    accent300: Color,
+    accent400: Color,
+    accent500: Color,
+    accent600: Color,
+    accent700: Color,
+    accent800: Color,
+    accent900: Color,
     bgActionPrimaryDisabled: Color,
     bgActionPrimaryHovered: Color,
     bgActionPrimaryPressed: Color,
@@ -45,6 +59,7 @@ class SemanticColors(
     borderInteractivePrimary: Color,
     borderInteractiveSecondary: Color,
     borderSuccessSubtle: Color,
+    brandPrimary: Color,
     iconAccentTertiary: Color,
     iconCriticalPrimary: Color,
     iconDisabled: Color,
@@ -74,6 +89,34 @@ class SemanticColors(
 ) {
     var isLight by mutableStateOf(isLight)
         private set
+    var accent100 by mutableStateOf(accent100)
+        private set
+    var accent1000 by mutableStateOf(accent1000)
+        private set
+    var accent1100 by mutableStateOf(accent1100)
+        private set
+    var accent1200 by mutableStateOf(accent1200)
+        private set
+    var accent1300 by mutableStateOf(accent1300)
+        private set
+    var accent1400 by mutableStateOf(accent1400)
+        private set
+    var accent200 by mutableStateOf(accent200)
+        private set
+    var accent300 by mutableStateOf(accent300)
+        private set
+    var accent400 by mutableStateOf(accent400)
+        private set
+    var accent500 by mutableStateOf(accent500)
+        private set
+    var accent600 by mutableStateOf(accent600)
+        private set
+    var accent700 by mutableStateOf(accent700)
+        private set
+    var accent800 by mutableStateOf(accent800)
+        private set
+    var accent900 by mutableStateOf(accent900)
+        private set
     /** Background colour for primary actions. State: Disabled. */
     var bgActionPrimaryDisabled by mutableStateOf(bgActionPrimaryDisabled)
         private set
@@ -158,6 +201,9 @@ Elevation: Default (Level 1). */
     /** Subtle border colour for success state elements. */
     var borderSuccessSubtle by mutableStateOf(borderSuccessSubtle)
         private set
+    /** Primary brand color */
+    var brandPrimary by mutableStateOf(brandPrimary)
+        private set
     /** Lowest contrast accessible accent icons. */
     var iconAccentTertiary by mutableStateOf(iconAccentTertiary)
         private set
@@ -235,6 +281,20 @@ Elevation: Default (Level 1). */
         private set
 
     fun copy(
+        accent100: Color = this.accent100,
+        accent1000: Color = this.accent1000,
+        accent1100: Color = this.accent1100,
+        accent1200: Color = this.accent1200,
+        accent1300: Color = this.accent1300,
+        accent1400: Color = this.accent1400,
+        accent200: Color = this.accent200,
+        accent300: Color = this.accent300,
+        accent400: Color = this.accent400,
+        accent500: Color = this.accent500,
+        accent600: Color = this.accent600,
+        accent700: Color = this.accent700,
+        accent800: Color = this.accent800,
+        accent900: Color = this.accent900,
         bgActionPrimaryDisabled: Color = this.bgActionPrimaryDisabled,
         bgActionPrimaryHovered: Color = this.bgActionPrimaryHovered,
         bgActionPrimaryPressed: Color = this.bgActionPrimaryPressed,
@@ -262,6 +322,7 @@ Elevation: Default (Level 1). */
         borderInteractivePrimary: Color = this.borderInteractivePrimary,
         borderInteractiveSecondary: Color = this.borderInteractiveSecondary,
         borderSuccessSubtle: Color = this.borderSuccessSubtle,
+        brandPrimary: Color = this.brandPrimary,
         iconAccentTertiary: Color = this.iconAccentTertiary,
         iconCriticalPrimary: Color = this.iconCriticalPrimary,
         iconDisabled: Color = this.iconDisabled,
@@ -289,6 +350,20 @@ Elevation: Default (Level 1). */
         textSuccessPrimary: Color = this.textSuccessPrimary,
         isLight: Boolean = this.isLight,
     ) = SemanticColors(
+        accent100 = accent100,
+        accent1000 = accent1000,
+        accent1100 = accent1100,
+        accent1200 = accent1200,
+        accent1300 = accent1300,
+        accent1400 = accent1400,
+        accent200 = accent200,
+        accent300 = accent300,
+        accent400 = accent400,
+        accent500 = accent500,
+        accent600 = accent600,
+        accent700 = accent700,
+        accent800 = accent800,
+        accent900 = accent900,
         bgActionPrimaryDisabled = bgActionPrimaryDisabled,
         bgActionPrimaryHovered = bgActionPrimaryHovered,
         bgActionPrimaryPressed = bgActionPrimaryPressed,
@@ -316,6 +391,7 @@ Elevation: Default (Level 1). */
         borderInteractivePrimary = borderInteractivePrimary,
         borderInteractiveSecondary = borderInteractiveSecondary,
         borderSuccessSubtle = borderSuccessSubtle,
+        brandPrimary = brandPrimary,
         iconAccentTertiary = iconAccentTertiary,
         iconCriticalPrimary = iconCriticalPrimary,
         iconDisabled = iconDisabled,
@@ -345,6 +421,20 @@ Elevation: Default (Level 1). */
     )
 
     fun updateColorsFrom(other: SemanticColors) {
+        accent100 = other.accent100
+        accent1000 = other.accent1000
+        accent1100 = other.accent1100
+        accent1200 = other.accent1200
+        accent1300 = other.accent1300
+        accent1400 = other.accent1400
+        accent200 = other.accent200
+        accent300 = other.accent300
+        accent400 = other.accent400
+        accent500 = other.accent500
+        accent600 = other.accent600
+        accent700 = other.accent700
+        accent800 = other.accent800
+        accent900 = other.accent900
         bgActionPrimaryDisabled = other.bgActionPrimaryDisabled
         bgActionPrimaryHovered = other.bgActionPrimaryHovered
         bgActionPrimaryPressed = other.bgActionPrimaryPressed
@@ -372,6 +462,7 @@ Elevation: Default (Level 1). */
         borderInteractivePrimary = other.borderInteractivePrimary
         borderInteractiveSecondary = other.borderInteractiveSecondary
         borderSuccessSubtle = other.borderSuccessSubtle
+        brandPrimary = other.brandPrimary
         iconAccentTertiary = other.iconAccentTertiary
         iconCriticalPrimary = other.iconCriticalPrimary
         iconDisabled = other.iconDisabled

assets/ios/swift/CompoundColorTokens.swift

@@ -6,6 +6,7 @@
 import SwiftUI
 
 public class CompoundColorTokens {
+    public static let colorBrandPrimary = #0dbd8b
     public static let colorAlphaPink1400 = Color("colorAlphaPink1400", bundle: Bundle.module) 
     public static let colorAlphaPink1300 = Color("colorAlphaPink1300", bundle: Bundle.module) 
     public static let colorAlphaPink1200 = Color("colorAlphaPink1200", bundle: Bundle.module) 
@@ -319,7 +320,6 @@ public class CompoundColorTokens {
     public static let colorIconInfoPrimary = colorBlue900
     public static let colorIconSuccessPrimary = colorGreen900
     public static let colorIconCriticalPrimary = colorRed900
-    public static let colorIconAccentTertiary = colorGreen800
     public static let colorIconQuaternaryAlpha = colorAlphaGray700
     public static let colorIconTertiaryAlpha = colorAlphaGray800
     public static let colorIconSecondaryAlpha = colorAlphaGray900
@@ -369,4 +369,19 @@ public class CompoundColorTokens {
     public static let colorTextPlaceholder = colorGray800
     public static let colorTextSecondary = colorGray900
     public static let colorTextPrimary = colorGray1400
+    public static let colorAccent1400 = colorGreen1400
+    public static let colorAccent1300 = colorGreen1300
+    public static let colorAccent1200 = colorGreen1200
+    public static let colorAccent1100 = colorGreen1100
+    public static let colorAccent1000 = colorGreen1000
+    public static let colorAccent900 = colorGreen900
+    public static let colorAccent800 = colorGreen800
+    public static let colorAccent700 = colorGreen700
+    public static let colorAccent600 = colorGreen600
+    public static let colorAccent500 = colorGreen500
+    public static let colorAccent400 = colorGreen400
+    public static let colorAccent300 = colorGreen300
+    public static let colorAccent200 = colorGreen200
+    public static let colorAccent100 = colorGreen100
+    public static let colorIconAccentTertiary = colorAccent800
 }

assets/ios/swift/CompoundUIColorTokens.swift

@@ -6,6 +6,7 @@
 import UIKit
 
 public class CompoundUIColorTokens {
+    public static let colorBrandPrimary = #0dbd8b
     public static let colorAlphaPink1400 = UIColor(named: "colorAlphaPink1400", in: Bundle.module, compatibleWith: nil)!
     public static let colorAlphaPink1300 = UIColor(named: "colorAlphaPink1300", in: Bundle.module, compatibleWith: nil)!
     public static let colorAlphaPink1200 = UIColor(named: "colorAlphaPink1200", in: Bundle.module, compatibleWith: nil)!
@@ -319,7 +320,6 @@ public class CompoundUIColorTokens {
     public static let colorIconInfoPrimary = colorBlue900
     public static let colorIconSuccessPrimary = colorGreen900
     public static let colorIconCriticalPrimary = colorRed900
-    public static let colorIconAccentTertiary = colorGreen800
     public static let colorIconQuaternaryAlpha = colorAlphaGray700
     public static let colorIconTertiaryAlpha = colorAlphaGray800
     public static let colorIconSecondaryAlpha = colorAlphaGray900
@@ -369,4 +369,19 @@ public class CompoundUIColorTokens {
     public static let colorTextPlaceholder = colorGray800
     public static let colorTextSecondary = colorGray900
     public static let colorTextPrimary = colorGray1400
+    public static let colorAccent1400 = colorGreen1400
+    public static let colorAccent1300 = colorGreen1300
+    public static let colorAccent1200 = colorGreen1200
+    public static let colorAccent1100 = colorGreen1100
+    public static let colorAccent1000 = colorGreen1000
+    public static let colorAccent900 = colorGreen900
+    public static let colorAccent800 = colorGreen800
+    public static let colorAccent700 = colorGreen700
+    public static let colorAccent600 = colorGreen600
+    public static let colorAccent500 = colorGreen500
+    public static let colorAccent400 = colorGreen400
+    public static let colorAccent300 = colorGreen300
+    public static let colorAccent200 = colorGreen200
+    public static let colorAccent100 = colorGreen100
+    public static let colorIconAccentTertiary = colorAccent800
 }

assets/web/css/cpd-common.css

@@ -1,4 +1,5 @@
 :root, [class*="cpd-theme-"] {
+  --cpd-color-brand-primary: #0dbd8b;
   --cpd-font-letter-spacing-heading-xl: -0.0216em;
   --cpd-font-letter-spacing-heading-lg: -0.0209em;
   --cpd-font-letter-spacing-heading-md: -0.0195em;
@@ -41,7 +42,6 @@
   --cpd-color-icon-info-primary: var(--cpd-color-blue-900);
   --cpd-color-icon-success-primary: var(--cpd-color-green-900);
   --cpd-color-icon-critical-primary: var(--cpd-color-red-900);
-  --cpd-color-icon-accent-tertiary: var(--cpd-color-green-800);
   --cpd-color-icon-quaternary-alpha: var(--cpd-color-alpha-gray-700);
   --cpd-color-icon-tertiary-alpha: var(--cpd-color-alpha-gray-800);
   --cpd-color-icon-secondary-alpha: var(--cpd-color-alpha-gray-900);
@@ -89,6 +89,20 @@
   --cpd-color-text-placeholder: var(--cpd-color-gray-800);
   --cpd-color-text-secondary: var(--cpd-color-gray-900);
   --cpd-color-text-primary: var(--cpd-color-gray-1400);
+  --cpd-color-accent-1400: var(--cpd-color-green-1400);
+  --cpd-color-accent-1300: var(--cpd-color-green-1300);
+  --cpd-color-accent-1200: var(--cpd-color-green-1200);
+  --cpd-color-accent-1100: var(--cpd-color-green-1100);
+  --cpd-color-accent-1000: var(--cpd-color-green-1000);
+  --cpd-color-accent-900: var(--cpd-color-green-900);
+  --cpd-color-accent-800: var(--cpd-color-green-800);
+  --cpd-color-accent-700: var(--cpd-color-green-700);
+  --cpd-color-accent-600: var(--cpd-color-green-600);
+  --cpd-color-accent-500: var(--cpd-color-green-500);
+  --cpd-color-accent-400: var(--cpd-color-green-400);
+  --cpd-color-accent-300: var(--cpd-color-green-300);
+  --cpd-color-accent-200: var(--cpd-color-green-200);
+  --cpd-color-accent-100: var(--cpd-color-green-100);
   --cpd-font-heading-xl-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-xl)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
   --cpd-font-heading-xl-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-heading-xl)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
   --cpd-font-heading-lg-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-lg)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
@@ -130,4 +144,5 @@
   --cpd-space-1-5x: 6px;
   --cpd-space-1x: var(--cpd-space-scale);
   --cpd-space-0-5x: 2px;
+  --cpd-color-icon-accent-tertiary: var(--cpd-color-accent-800);
 }

assets/web/js/cpdDark.d.ts

@@ -460,6 +460,20 @@ export const cpdColorAlphaPink1100 : string;
 export const cpdColorAlphaPink1200 : string;
 export const cpdColorAlphaPink1300 : string;
 export const cpdColorAlphaPink1400 : string;
+export const cpdColorAccent100 : string;
+export const cpdColorAccent200 : string;
+export const cpdColorAccent300 : string;
+export const cpdColorAccent400 : string;
+export const cpdColorAccent500 : string;
+export const cpdColorAccent600 : string;
+export const cpdColorAccent700 : string;
+export const cpdColorAccent800 : string;
+export const cpdColorAccent900 : string;
+export const cpdColorAccent1000 : string;
+export const cpdColorAccent1100 : string;
+export const cpdColorAccent1200 : string;
+export const cpdColorAccent1300 : string;
+export const cpdColorAccent1400 : string;
 export const cpdColorTextPrimary : string;
 export const cpdColorTextSecondary : string;
 export const cpdColorTextPlaceholder : string;
@@ -513,4 +527,5 @@ export const cpdColorIconAccentTertiary : string;
 export const cpdColorIconCriticalPrimary : string;
 export const cpdColorIconSuccessPrimary : string;
 export const cpdColorIconInfoPrimary : string;
-export const cpdColorIconOnSolidPrimary : string;
+export const cpdColorIconOnSolidPrimary : string;
+export const cpdColorBrandPrimary : string;

assets/web/js/cpdDark.js

@@ -460,6 +460,20 @@ export const cpdColorAlphaPink1100 = "hsl(345, 98%, 76%, 1)";
 export const cpdColorAlphaPink1200 = "hsl(346, 100%, 84%, 1)";
 export const cpdColorAlphaPink1300 = "hsl(347, 100%, 91%, 1)";
 export const cpdColorAlphaPink1400 = "hsl(347, 100%, 96%, 1)";
+export const cpdColorAccent100 = "#001c0b";
+export const cpdColorAccent200 = "#001f0e";
+export const cpdColorAccent300 = "#002513";
+export const cpdColorAccent400 = "#002e1b";
+export const cpdColorAccent500 = "#003d29";
+export const cpdColorAccent600 = "#004832";
+export const cpdColorAccent700 = "#005a43";
+export const cpdColorAccent800 = "#007a62";
+export const cpdColorAccent900 = "#129a78";
+export const cpdColorAccent1000 = "#17ac84";
+export const cpdColorAccent1100 = "#1fc090";
+export const cpdColorAccent1200 = "#72d5ae";
+export const cpdColorAccent1300 = "#b5e8d1";
+export const cpdColorAccent1400 = "#d9f4e7";
 export const cpdColorTextPrimary = "#ebeef2";
 export const cpdColorTextSecondary = "#808994";
 export const cpdColorTextPlaceholder = "#656c76";
@@ -513,4 +527,5 @@ export const cpdColorIconAccentTertiary = "#007a62";
 export const cpdColorIconCriticalPrimary = "#fd3e3c";
 export const cpdColorIconSuccessPrimary = "#129a78";
 export const cpdColorIconInfoPrimary = "#4187eb";
-export const cpdColorIconOnSolidPrimary = "#101317";
+export const cpdColorIconOnSolidPrimary = "#101317";
+export const cpdColorBrandPrimary = "#0dbd8b";

assets/web/js/cpdDarkHc.d.ts

@@ -460,6 +460,20 @@ export const cpdColorAlphaPink1100 : string;
 export const cpdColorAlphaPink1200 : string;
 export const cpdColorAlphaPink1300 : string;
 export const cpdColorAlphaPink1400 : string;
+export const cpdColorAccent100 : string;
+export const cpdColorAccent200 : string;
+export const cpdColorAccent300 : string;
+export const cpdColorAccent400 : string;
+export const cpdColorAccent500 : string;
+export const cpdColorAccent600 : string;
+export const cpdColorAccent700 : string;
+export const cpdColorAccent800 : string;
+export const cpdColorAccent900 : string;
+export const cpdColorAccent1000 : string;
+export const cpdColorAccent1100 : string;
+export const cpdColorAccent1200 : string;
+export const cpdColorAccent1300 : string;
+export const cpdColorAccent1400 : string;
 export const cpdColorTextPrimary : string;
 export const cpdColorTextSecondary : string;
 export const cpdColorTextPlaceholder : string;
@@ -513,4 +527,5 @@ export const cpdColorIconAccentTertiary : string;
 export const cpdColorIconCriticalPrimary : string;
 export const cpdColorIconSuccessPrimary : string;
 export const cpdColorIconInfoPrimary : string;
-export const cpdColorIconOnSolidPrimary : string;
+export const cpdColorIconOnSolidPrimary : string;
+export const cpdColorBrandPrimary : string;

assets/web/js/cpdDarkHc.js

@@ -460,6 +460,20 @@ export const cpdColorAlphaPink1100 = "hsl(347, 100%, 87%, 1)";
 export const cpdColorAlphaPink1200 = "hsl(347, 100%, 90%, 1)";
 export const cpdColorAlphaPink1300 = "hsl(347, 100%, 96%, 1)";
 export const cpdColorAlphaPink1400 = "hsl(347, 100%, 97%, 1)";
+export const cpdColorAccent100 = "#001f0e";
+export const cpdColorAccent200 = "#002513";
+export const cpdColorAccent300 = "#002e1b";
+export const cpdColorAccent400 = "#003622";
+export const cpdColorAccent500 = "#004832";
+export const cpdColorAccent600 = "#005a43";
+export const cpdColorAccent700 = "#00745c";
+export const cpdColorAccent800 = "#109173";
+export const cpdColorAccent900 = "#37c998";
+export const cpdColorAccent1000 = "#61d2a6";
+export const cpdColorAccent1100 = "#8fddbc";
+export const cpdColorAccent1200 = "#ace6cc";
+export const cpdColorAccent1300 = "#d9f4e7";
+export const cpdColorAccent1400 = "#e9f8f1";
 export const cpdColorTextPrimary = "#f2f5f7";
 export const cpdColorTextSecondary = "#acb4bd";
 export const cpdColorTextPlaceholder = "#79818d";
@@ -513,4 +527,5 @@ export const cpdColorIconAccentTertiary = "#109173";
 export const cpdColorIconCriticalPrimary = "#ff968c";
 export const cpdColorIconSuccessPrimary = "#37c998";
 export const cpdColorIconInfoPrimary = "#89b5f6";
-export const cpdColorIconOnSolidPrimary = "#101317";
+export const cpdColorIconOnSolidPrimary = "#101317";
+export const cpdColorBrandPrimary = "#0dbd8b";