diff --git a/assets/android/SemanticColors.kt b/assets/android/SemanticColors.kt index 86af0186..e981b831 100644 --- a/assets/android/SemanticColors.kt +++ b/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 diff --git a/assets/ios/swift/CompoundColorTokens.swift b/assets/ios/swift/CompoundColorTokens.swift index b1ce15af..da256b5e 100644 --- a/assets/ios/swift/CompoundColorTokens.swift +++ b/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 } diff --git a/assets/ios/swift/CompoundUIColorTokens.swift b/assets/ios/swift/CompoundUIColorTokens.swift index eacd1701..88db5382 100644 --- a/assets/ios/swift/CompoundUIColorTokens.swift +++ b/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 } diff --git a/assets/web/css/cpd-common.css b/assets/web/css/cpd-common.css index 936f3d8e..9371dd5f 100644 --- a/assets/web/css/cpd-common.css +++ b/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); } diff --git a/assets/web/js/cpdDark.d.ts b/assets/web/js/cpdDark.d.ts index 9e0243fb..a01dc8e3 100644 --- a/assets/web/js/cpdDark.d.ts +++ b/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; \ No newline at end of file +export const cpdColorIconOnSolidPrimary : string; +export const cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdDark.js b/assets/web/js/cpdDark.js index dfe6567f..a891ab7f 100644 --- a/assets/web/js/cpdDark.js +++ b/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"; \ No newline at end of file +export const cpdColorIconOnSolidPrimary = "#101317"; +export const cpdColorBrandPrimary = "#0dbd8b"; \ No newline at end of file diff --git a/assets/web/js/cpdDarkHc.d.ts b/assets/web/js/cpdDarkHc.d.ts index 9e0243fb..a01dc8e3 100644 --- a/assets/web/js/cpdDarkHc.d.ts +++ b/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; \ No newline at end of file +export const cpdColorIconOnSolidPrimary : string; +export const cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdDarkHc.js b/assets/web/js/cpdDarkHc.js index 6b717fa5..61714674 100644 --- a/assets/web/js/cpdDarkHc.js +++ b/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"; \ No newline at end of file +export const cpdColorIconOnSolidPrimary = "#101317"; +export const cpdColorBrandPrimary = "#0dbd8b"; \ No newline at end of file diff --git a/assets/web/js/cpdLight.d.ts b/assets/web/js/cpdLight.d.ts index 9e0243fb..a01dc8e3 100644 --- a/assets/web/js/cpdLight.d.ts +++ b/assets/web/js/cpdLight.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; \ No newline at end of file +export const cpdColorIconOnSolidPrimary : string; +export const cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdLight.js b/assets/web/js/cpdLight.js index b8874cec..087651c9 100644 --- a/assets/web/js/cpdLight.js +++ b/assets/web/js/cpdLight.js @@ -460,6 +460,20 @@ export const cpdColorAlphaPink1100 = "hsla(331, 100%, 31%, 0.97)"; export const cpdColorAlphaPink1200 = "hsla(330, 98%, 24%, 0.98)"; export const cpdColorAlphaPink1300 = "hsl(333, 100%, 19%, 1)"; export const cpdColorAlphaPink1400 = "hsl(339, 100%, 13%, 1)"; +export const cpdColorAccent100 = "#f8fdfb"; +export const cpdColorAccent200 = "#f1fbf6"; +export const cpdColorAccent300 = "#e3f7ed"; +export const cpdColorAccent400 = "#c6eedb"; +export const cpdColorAccent500 = "#98e1c1"; +export const cpdColorAccent600 = "#71d7ae"; +export const cpdColorAccent700 = "#0bc491"; +export const cpdColorAccent800 = "#009b78"; +export const cpdColorAccent900 = "#007a61"; +export const cpdColorAccent1000 = "#006b52"; +export const cpdColorAccent1100 = "#005c45"; +export const cpdColorAccent1200 = "#004933"; +export const cpdColorAccent1300 = "#003420"; +export const cpdColorAccent1400 = "#002311"; export const cpdColorTextPrimary = "#1b1d22"; export const cpdColorTextSecondary = "#656d77"; export const cpdColorTextPlaceholder = "#818a95"; @@ -513,4 +527,5 @@ export const cpdColorIconAccentTertiary = "#009b78"; export const cpdColorIconCriticalPrimary = "#d51928"; export const cpdColorIconSuccessPrimary = "#007a61"; export const cpdColorIconInfoPrimary = "#0467dd"; -export const cpdColorIconOnSolidPrimary = "#ffffff"; \ No newline at end of file +export const cpdColorIconOnSolidPrimary = "#ffffff"; +export const cpdColorBrandPrimary = "#0dbd8b"; \ No newline at end of file diff --git a/assets/web/js/cpdLightHc.d.ts b/assets/web/js/cpdLightHc.d.ts index 9e0243fb..a01dc8e3 100644 --- a/assets/web/js/cpdLightHc.d.ts +++ b/assets/web/js/cpdLightHc.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; \ No newline at end of file +export const cpdColorIconOnSolidPrimary : string; +export const cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdLightHc.js b/assets/web/js/cpdLightHc.js index d8a116dd..b587593c 100644 --- a/assets/web/js/cpdLightHc.js +++ b/assets/web/js/cpdLightHc.js @@ -460,6 +460,20 @@ export const cpdColorAlphaPink1100 = "hsl(329, 100%, 22%, 1)"; export const cpdColorAlphaPink1200 = "hsl(332, 100%, 20%, 1)"; export const cpdColorAlphaPink1300 = "hsl(337, 100%, 15%, 1)"; export const cpdColorAlphaPink1400 = "hsl(341, 100%, 13%, 1)"; +export const cpdColorAccent100 = "#f1fbf6"; +export const cpdColorAccent200 = "#e3f7ed"; +export const cpdColorAccent300 = "#c6eedb"; +export const cpdColorAccent400 = "#afe8ce"; +export const cpdColorAccent500 = "#71d7ae"; +export const cpdColorAccent600 = "#0bc491"; +export const cpdColorAccent700 = "#00a27c"; +export const cpdColorAccent800 = "#008268"; +export const cpdColorAccent900 = "#00553d"; +export const cpdColorAccent1000 = "#004d36"; +export const cpdColorAccent1100 = "#00402b"; +export const cpdColorAccent1200 = "#003723"; +export const cpdColorAccent1300 = "#002715"; +export const cpdColorAccent1400 = "#00210f"; export const cpdColorTextPrimary = "#1a1c21"; export const cpdColorTextSecondary = "#474a51"; export const cpdColorTextPlaceholder = "#6c737e"; @@ -513,4 +527,5 @@ export const cpdColorIconAccentTertiary = "#008268"; export const cpdColorIconCriticalPrimary = "#99001a"; export const cpdColorIconSuccessPrimary = "#00553d"; export const cpdColorIconInfoPrimary = "#0543a7"; -export const cpdColorIconOnSolidPrimary = "#ffffff"; \ No newline at end of file +export const cpdColorIconOnSolidPrimary = "#ffffff"; +export const cpdColorBrandPrimary = "#0dbd8b"; \ No newline at end of file diff --git a/tokens/theme-semantics.json b/tokens/theme-semantics.json index a2153d75..0c1c4e89 100644 --- a/tokens/theme-semantics.json +++ b/tokens/theme-semantics.json @@ -1,5 +1,63 @@ { "color": { + "accent": { + "100": { + "value": "{color.green.100}", + "type": "color" + }, + "200": { + "value": "{color.green.200}", + "type": "color" + }, + "300": { + "value": "{color.green.300}", + "type": "color" + }, + "400": { + "value": "{color.green.400}", + "type": "color" + }, + "500": { + "value": "{color.green.500}", + "type": "color" + }, + "600": { + "value": "{color.green.600}", + "type": "color" + }, + "700": { + "value": "{color.green.700}", + "type": "color" + }, + "800": { + "value": "{color.green.800}", + "type": "color" + }, + "900": { + "value": "{color.green.900}", + "type": "color" + }, + "1000": { + "value": "{color.green.1000}", + "type": "color" + }, + "1100": { + "value": "{color.green.1100}", + "type": "color" + }, + "1200": { + "value": "{color.green.1200}", + "type": "color" + }, + "1300": { + "value": "{color.green.1300}", + "type": "color" + }, + "1400": { + "value": "{color.green.1400}", + "type": "color" + } + }, "text": { "primary": { "value": "{color.gray.1400}", @@ -278,7 +336,7 @@ }, "accent": { "tertiary": { - "value": "{color.green.800}", + "value": "{color.accent.800}", "type": "color", "description": "Lowest contrast accessible accent icons." } @@ -311,6 +369,13 @@ "description": "Highest contrast icon color on top of high-contrast solid backgrounds like primary, accent, or destructive actions." } } + }, + "brand": { + "primary": { + "value": "#0dbd8b", + "type": "color", + "description": "Primary brand color" + } } } -} \ No newline at end of file +}