From 0043940eec6bd865dc83e391091235fd1baa3074 Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 13 Jul 2023 10:59:31 +0100 Subject: [PATCH 1/6] Create accent color semantic scale --- tokens/platform-web.json | 7 +--- tokens/theme-semantics.json | 72 +++++++++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 6 deletions(-) diff --git a/tokens/platform-web.json b/tokens/platform-web.json index 3890abba..a154df1b 100644 --- a/tokens/platform-web.json +++ b/tokens/platform-web.json @@ -74,11 +74,6 @@ "value": "32", "type": "fontSizes" } - }, - "root": { - "value": "16px", - "type": "fontSizes", - "description": "Base font size for Tokens Studio and the root html element. https://docs.tokens.studio/tokens/settings" } }, "letter-spacing": { @@ -350,4 +345,4 @@ } } } -} +} \ No newline at end of file diff --git a/tokens/theme-semantics.json b/tokens/theme-semantics.json index a2153d75..aecfbbbd 100644 --- a/tokens/theme-semantics.json +++ b/tokens/theme-semantics.json @@ -311,6 +311,78 @@ "description": "Highest contrast icon color on top of high-contrast solid backgrounds like primary, accent, or destructive actions." } } + }, + "accent": { + "100": { + "value": "{color.green.100}", + "type": "color", + "description": "WCAG: 1.03" + }, + "200": { + "value": "{color.green.200}", + "type": "color", + "description": "WCAG: 1.06" + }, + "300": { + "value": "{color.green.300}", + "type": "color", + "description": "WCAG: 1.12" + }, + "400": { + "value": "{color.green.400}", + "type": "color", + "description": "WCAG: 1.25" + }, + "500": { + "value": "{color.green.500}", + "type": "color", + "description": "WCAG: 1.5" + }, + "600": { + "value": "{color.green.600}", + "type": "color", + "description": "WCAG: 1.75" + }, + "700": { + "value": "{color.green.700}", + "type": "color", + "description": "WCAG: 2.25" + }, + "800": { + "value": "{color.green.800}", + "type": "color", + "description": "WCAG: 3.5" + }, + "900": { + "value": "{color.green.900}", + "type": "color", + "description": "WCAG: 5.25" + }, + "1000": { + "value": "{color.green.1000}", + "type": "color", + "description": "WCAG: 6.5" + }, + "1100": { + "value": "{color.green.1100}", + "type": "color", + "description": "WCAG: 8" + }, + "1200": { + "value": "{color.green.1200}", + "type": "color", + "description": "WCAG: 10.5" + }, + "1300": { + "value": "{color.green.1300}", + "type": "color", + "description": "WCAG: 13.75" + }, + "1400": { + "value": "{color.green.1400}", + "type": "color", + "description": "WCAG: 16.75" + } } } } \ No newline at end of file From 5164ffc06b62aa895aad448992a9a6267655fc09 Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 13 Jul 2023 11:02:31 +0100 Subject: [PATCH 2/6] Add primary brand color token --- tokens/theme-semantics.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/tokens/theme-semantics.json b/tokens/theme-semantics.json index aecfbbbd..20bf09c0 100644 --- a/tokens/theme-semantics.json +++ b/tokens/theme-semantics.json @@ -383,6 +383,13 @@ "type": "color", "description": "WCAG: 16.75" } + }, + "brand": { + "primary": { + "value": "#0dbd8b", + "type": "color", + "description": "Primary brand color" + } } } } \ No newline at end of file From 89df4865cd837e9e055f8819326dd99055b0e645 Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 13 Jul 2023 11:06:27 +0100 Subject: [PATCH 3/6] Generate assets --- assets/android/SemanticColors.kt | 107 +++++++++++++++++- assets/android/TypographyTokens.kt | 2 +- assets/android/internal/DarkDesignTokens.kt | 2 +- assets/android/internal/DarkHcDesignTokens.kt | 2 +- assets/android/internal/LightDesignTokens.kt | 2 +- .../android/internal/LightHcDesignTokens.kt | 2 +- .../ios/swift/CompoundDarkDesignTokens.swift | 15 +++ .../swift/CompoundDarkHcDesignTokens.swift | 15 +++ .../ios/swift/CompoundLightDesignTokens.swift | 15 +++ .../swift/CompoundLightHcDesignTokens.swift | 15 +++ assets/web/css/cpd-common.css | 16 ++- assets/web/js/cpdDark.d.ts | 18 ++- assets/web/js/cpdDark.js | 18 ++- assets/web/js/cpdDarkHc.d.ts | 18 ++- assets/web/js/cpdDarkHc.js | 18 ++- assets/web/js/cpdLight.d.ts | 18 ++- assets/web/js/cpdLight.js | 18 ++- assets/web/js/cpdLightHc.d.ts | 18 ++- assets/web/js/cpdLightHc.js | 18 ++- 19 files changed, 314 insertions(+), 23 deletions(-) diff --git a/assets/android/SemanticColors.kt b/assets/android/SemanticColors.kt index 0d958773..95a769f6 100644 --- a/assets/android/SemanticColors.kt +++ b/assets/android/SemanticColors.kt @@ -12,7 +12,7 @@ import androidx.compose.ui.graphics.Color // Do not edit directly -// Generated on Wed, 28 Jun 2023 10:55:55 GMT +// Generated on Thu, 13 Jul 2023 10:06:01 GMT @@ -22,6 +22,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, @@ -49,6 +63,7 @@ class SemanticColors( borderInteractivePrimary: Color, borderInteractiveSecondary: Color, borderSuccessSubtle: Color, + brandPrimary: Color, iconAccentTertiary: Color, iconCriticalPrimary: Color, iconDisabled: Color, @@ -78,6 +93,48 @@ class SemanticColors( ) { var isLight by mutableStateOf(isLight) private set + /** WCAG: 1.03 */ + var accent100 by mutableStateOf(accent100) + private set + /** WCAG: 6.5 */ + var accent1000 by mutableStateOf(accent1000) + private set + /** WCAG: 8 */ + var accent1100 by mutableStateOf(accent1100) + private set + /** WCAG: 10.5 */ + var accent1200 by mutableStateOf(accent1200) + private set + /** WCAG: 13.75 */ + var accent1300 by mutableStateOf(accent1300) + private set + /** WCAG: 16.75 */ + var accent1400 by mutableStateOf(accent1400) + private set + /** WCAG: 1.06 */ + var accent200 by mutableStateOf(accent200) + private set + /** WCAG: 1.12 */ + var accent300 by mutableStateOf(accent300) + private set + /** WCAG: 1.25 */ + var accent400 by mutableStateOf(accent400) + private set + /** WCAG: 1.5 */ + var accent500 by mutableStateOf(accent500) + private set + /** WCAG: 1.75 */ + var accent600 by mutableStateOf(accent600) + private set + /** WCAG: 2.25 */ + var accent700 by mutableStateOf(accent700) + private set + /** WCAG: 3.5 */ + var accent800 by mutableStateOf(accent800) + private set + /** WCAG: 5.25 */ + var accent900 by mutableStateOf(accent900) + private set /** Background colour for primary actions. State: Disabled. */ var bgActionPrimaryDisabled by mutableStateOf(bgActionPrimaryDisabled) private set @@ -162,6 +219,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 @@ -239,6 +299,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, @@ -266,6 +340,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, @@ -293,6 +368,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, @@ -320,6 +409,7 @@ Elevation: Default (Level 1). */ borderInteractivePrimary = borderInteractivePrimary, borderInteractiveSecondary = borderInteractiveSecondary, borderSuccessSubtle = borderSuccessSubtle, + brandPrimary = brandPrimary, iconAccentTertiary = iconAccentTertiary, iconCriticalPrimary = iconCriticalPrimary, iconDisabled = iconDisabled, @@ -349,6 +439,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 @@ -376,6 +480,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/android/TypographyTokens.kt b/assets/android/TypographyTokens.kt index 29136a9c..be556ea4 100644 --- a/assets/android/TypographyTokens.kt +++ b/assets/android/TypographyTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Wed, 28 Jun 2023 10:55:55 GMT +// Generated on Thu, 13 Jul 2023 10:06:01 GMT diff --git a/assets/android/internal/DarkDesignTokens.kt b/assets/android/internal/DarkDesignTokens.kt index afd078a9..95bbbb3d 100644 --- a/assets/android/internal/DarkDesignTokens.kt +++ b/assets/android/internal/DarkDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Wed, 28 Jun 2023 10:55:54 GMT +// Generated on Thu, 13 Jul 2023 10:06:01 GMT diff --git a/assets/android/internal/DarkHcDesignTokens.kt b/assets/android/internal/DarkHcDesignTokens.kt index 537cc785..ce1f9c80 100644 --- a/assets/android/internal/DarkHcDesignTokens.kt +++ b/assets/android/internal/DarkHcDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Wed, 28 Jun 2023 10:55:55 GMT +// Generated on Thu, 13 Jul 2023 10:06:01 GMT diff --git a/assets/android/internal/LightDesignTokens.kt b/assets/android/internal/LightDesignTokens.kt index b2103acb..980dce76 100644 --- a/assets/android/internal/LightDesignTokens.kt +++ b/assets/android/internal/LightDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Wed, 28 Jun 2023 10:55:54 GMT +// Generated on Thu, 13 Jul 2023 10:06:01 GMT diff --git a/assets/android/internal/LightHcDesignTokens.kt b/assets/android/internal/LightHcDesignTokens.kt index bc86a494..f300133a 100644 --- a/assets/android/internal/LightHcDesignTokens.kt +++ b/assets/android/internal/LightHcDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Wed, 28 Jun 2023 10:55:54 GMT +// Generated on Thu, 13 Jul 2023 10:06:01 GMT diff --git a/assets/ios/swift/CompoundDarkDesignTokens.swift b/assets/ios/swift/CompoundDarkDesignTokens.swift index ed3a2873..307a2bc9 100644 --- a/assets/ios/swift/CompoundDarkDesignTokens.swift +++ b/assets/ios/swift/CompoundDarkDesignTokens.swift @@ -6,6 +6,7 @@ import SwiftUI public class CompoundDarkDesignTokens { + 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) @@ -365,6 +366,20 @@ public class CompoundDarkDesignTokens { public static let space6X = CGFloat(24) public static let space0X = CGFloat(0) public static let spaceScale = CGFloat(4) + 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 colorIconOnSolidPrimary = colorThemeBg public static let colorIconInfoPrimary = colorBlue900 public static let colorIconSuccessPrimary = colorGreen900 diff --git a/assets/ios/swift/CompoundDarkHcDesignTokens.swift b/assets/ios/swift/CompoundDarkHcDesignTokens.swift index dd290cad..963de97c 100644 --- a/assets/ios/swift/CompoundDarkHcDesignTokens.swift +++ b/assets/ios/swift/CompoundDarkHcDesignTokens.swift @@ -6,6 +6,7 @@ import SwiftUI public class CompoundDarkHcDesignTokens { + 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) @@ -365,6 +366,20 @@ public class CompoundDarkHcDesignTokens { public static let space6X = CGFloat(24) public static let space0X = CGFloat(0) public static let spaceScale = CGFloat(4) + 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 colorIconOnSolidPrimary = colorThemeBg public static let colorIconInfoPrimary = colorBlue900 public static let colorIconSuccessPrimary = colorGreen900 diff --git a/assets/ios/swift/CompoundLightDesignTokens.swift b/assets/ios/swift/CompoundLightDesignTokens.swift index 9b28380f..de6415a1 100644 --- a/assets/ios/swift/CompoundLightDesignTokens.swift +++ b/assets/ios/swift/CompoundLightDesignTokens.swift @@ -6,6 +6,7 @@ import SwiftUI public class CompoundLightDesignTokens { + 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) @@ -365,6 +366,20 @@ public class CompoundLightDesignTokens { public static let space6X = CGFloat(24) public static let space0X = CGFloat(0) public static let spaceScale = CGFloat(4) + 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 colorIconOnSolidPrimary = colorThemeBg public static let colorIconInfoPrimary = colorBlue900 public static let colorIconSuccessPrimary = colorGreen900 diff --git a/assets/ios/swift/CompoundLightHcDesignTokens.swift b/assets/ios/swift/CompoundLightHcDesignTokens.swift index e1d924ed..79fd38de 100644 --- a/assets/ios/swift/CompoundLightHcDesignTokens.swift +++ b/assets/ios/swift/CompoundLightHcDesignTokens.swift @@ -6,6 +6,7 @@ import SwiftUI public class CompoundLightHcDesignTokens { + 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) @@ -365,6 +366,20 @@ public class CompoundLightHcDesignTokens { public static let space6X = CGFloat(24) public static let space0X = CGFloat(0) public static let spaceScale = CGFloat(4) + 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 colorIconOnSolidPrimary = colorThemeBg public static let colorIconInfoPrimary = colorBlue900 public static let colorIconSuccessPrimary = colorGreen900 diff --git a/assets/web/css/cpd-common.css b/assets/web/css/cpd-common.css index 936f3d8e..eb01258b 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; @@ -7,7 +8,6 @@ --cpd-font-letter-spacing-body-md: -0.0088em; --cpd-font-letter-spacing-body-sm: -0.0031em; --cpd-font-letter-spacing-body-xs: 0.0048em; - --cpd-font-size-root: 1rem; --cpd-font-size-heading-xl: 2rem; --cpd-font-size-heading-lg: 1.75rem; --cpd-font-size-heading-md: 1.5rem; @@ -37,6 +37,20 @@ --cpd-space-6x: 24px; --cpd-space-0x: 0px; --cpd-space-scale: 4px; + --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-color-icon-on-solid-primary: var(--cpd-color-theme-bg); --cpd-color-icon-info-primary: var(--cpd-color-blue-900); --cpd-color-icon-success-primary: var(--cpd-color-green-900); diff --git a/assets/web/js/cpdDark.d.ts b/assets/web/js/cpdDark.d.ts index e2fe35af..c8c08638 100644 --- a/assets/web/js/cpdDark.d.ts +++ b/assets/web/js/cpdDark.d.ts @@ -47,7 +47,6 @@ export const cpdFontSizeHeadingSm : string; export const cpdFontSizeHeadingMd : string; export const cpdFontSizeHeadingLg : string; export const cpdFontSizeHeadingXl : string; -export const cpdFontSizeRoot : string; export const cpdFontLetterSpacingBodyXs : string; export const cpdFontLetterSpacingBodySm : string; export const cpdFontLetterSpacingBodyMd : string; @@ -455,4 +454,19 @@ 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 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 cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdDark.js b/assets/web/js/cpdDark.js index 6be79648..6260bfd7 100644 --- a/assets/web/js/cpdDark.js +++ b/assets/web/js/cpdDark.js @@ -47,7 +47,6 @@ export const cpdFontSizeHeadingSm = "1.25rem"; export const cpdFontSizeHeadingMd = "1.5rem"; export const cpdFontSizeHeadingLg = "1.75rem"; export const cpdFontSizeHeadingXl = "2rem"; -export const cpdFontSizeRoot = "1rem"; export const cpdFontLetterSpacingBodyXs = "0.0048em"; export const cpdFontLetterSpacingBodySm = "-0.0031em"; export const cpdFontLetterSpacingBodyMd = "-0.0088em"; @@ -455,4 +454,19 @@ 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 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 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 e2fe35af..c8c08638 100644 --- a/assets/web/js/cpdDarkHc.d.ts +++ b/assets/web/js/cpdDarkHc.d.ts @@ -47,7 +47,6 @@ export const cpdFontSizeHeadingSm : string; export const cpdFontSizeHeadingMd : string; export const cpdFontSizeHeadingLg : string; export const cpdFontSizeHeadingXl : string; -export const cpdFontSizeRoot : string; export const cpdFontLetterSpacingBodyXs : string; export const cpdFontLetterSpacingBodySm : string; export const cpdFontLetterSpacingBodyMd : string; @@ -455,4 +454,19 @@ 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 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 cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdDarkHc.js b/assets/web/js/cpdDarkHc.js index 14444c3a..846f5782 100644 --- a/assets/web/js/cpdDarkHc.js +++ b/assets/web/js/cpdDarkHc.js @@ -47,7 +47,6 @@ export const cpdFontSizeHeadingSm = "1.25rem"; export const cpdFontSizeHeadingMd = "1.5rem"; export const cpdFontSizeHeadingLg = "1.75rem"; export const cpdFontSizeHeadingXl = "2rem"; -export const cpdFontSizeRoot = "1rem"; export const cpdFontLetterSpacingBodyXs = "0.0048em"; export const cpdFontLetterSpacingBodySm = "-0.0031em"; export const cpdFontLetterSpacingBodyMd = "-0.0088em"; @@ -455,4 +454,19 @@ 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 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 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 e2fe35af..c8c08638 100644 --- a/assets/web/js/cpdLight.d.ts +++ b/assets/web/js/cpdLight.d.ts @@ -47,7 +47,6 @@ export const cpdFontSizeHeadingSm : string; export const cpdFontSizeHeadingMd : string; export const cpdFontSizeHeadingLg : string; export const cpdFontSizeHeadingXl : string; -export const cpdFontSizeRoot : string; export const cpdFontLetterSpacingBodyXs : string; export const cpdFontLetterSpacingBodySm : string; export const cpdFontLetterSpacingBodyMd : string; @@ -455,4 +454,19 @@ 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 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 cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdLight.js b/assets/web/js/cpdLight.js index 5858b86b..3c913af5 100644 --- a/assets/web/js/cpdLight.js +++ b/assets/web/js/cpdLight.js @@ -47,7 +47,6 @@ export const cpdFontSizeHeadingSm = "1.25rem"; export const cpdFontSizeHeadingMd = "1.5rem"; export const cpdFontSizeHeadingLg = "1.75rem"; export const cpdFontSizeHeadingXl = "2rem"; -export const cpdFontSizeRoot = "1rem"; export const cpdFontLetterSpacingBodyXs = "0.0048em"; export const cpdFontLetterSpacingBodySm = "-0.0031em"; export const cpdFontLetterSpacingBodyMd = "-0.0088em"; @@ -455,4 +454,19 @@ 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 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 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 e2fe35af..c8c08638 100644 --- a/assets/web/js/cpdLightHc.d.ts +++ b/assets/web/js/cpdLightHc.d.ts @@ -47,7 +47,6 @@ export const cpdFontSizeHeadingSm : string; export const cpdFontSizeHeadingMd : string; export const cpdFontSizeHeadingLg : string; export const cpdFontSizeHeadingXl : string; -export const cpdFontSizeRoot : string; export const cpdFontLetterSpacingBodyXs : string; export const cpdFontLetterSpacingBodySm : string; export const cpdFontLetterSpacingBodyMd : string; @@ -455,4 +454,19 @@ 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 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 cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdLightHc.js b/assets/web/js/cpdLightHc.js index e48279a8..61b16861 100644 --- a/assets/web/js/cpdLightHc.js +++ b/assets/web/js/cpdLightHc.js @@ -47,7 +47,6 @@ export const cpdFontSizeHeadingSm = "1.25rem"; export const cpdFontSizeHeadingMd = "1.5rem"; export const cpdFontSizeHeadingLg = "1.75rem"; export const cpdFontSizeHeadingXl = "2rem"; -export const cpdFontSizeRoot = "1rem"; export const cpdFontLetterSpacingBodyXs = "0.0048em"; export const cpdFontLetterSpacingBodySm = "-0.0031em"; export const cpdFontLetterSpacingBodyMd = "-0.0088em"; @@ -455,4 +454,19 @@ 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 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 cpdColorBrandPrimary = "#0dbd8b"; \ No newline at end of file From 24ea00f12272bf22e8f5a5f9a1e99ee81bb2ca64 Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 17 Jul 2023 13:19:11 +0100 Subject: [PATCH 4/6] Restore root font size --- assets/android/SemanticColors.kt | 2 +- assets/android/TypographyTokens.kt | 2 +- assets/android/internal/DarkDesignTokens.kt | 2 +- assets/android/internal/DarkHcDesignTokens.kt | 2 +- assets/android/internal/LightDesignTokens.kt | 2 +- assets/android/internal/LightHcDesignTokens.kt | 2 +- assets/web/css/cpd-common.css | 1 + assets/web/js/cpdDark.d.ts | 1 + assets/web/js/cpdDark.js | 1 + assets/web/js/cpdDarkHc.d.ts | 1 + assets/web/js/cpdDarkHc.js | 1 + assets/web/js/cpdLight.d.ts | 1 + assets/web/js/cpdLight.js | 1 + assets/web/js/cpdLightHc.d.ts | 1 + assets/web/js/cpdLightHc.js | 1 + tokens/platform-web.json | 7 ++++++- 16 files changed, 21 insertions(+), 7 deletions(-) diff --git a/assets/android/SemanticColors.kt b/assets/android/SemanticColors.kt index 95a769f6..aaa2697d 100644 --- a/assets/android/SemanticColors.kt +++ b/assets/android/SemanticColors.kt @@ -12,7 +12,7 @@ import androidx.compose.ui.graphics.Color // Do not edit directly -// Generated on Thu, 13 Jul 2023 10:06:01 GMT +// Generated on Mon, 17 Jul 2023 12:18:58 GMT diff --git a/assets/android/TypographyTokens.kt b/assets/android/TypographyTokens.kt index be556ea4..f2580638 100644 --- a/assets/android/TypographyTokens.kt +++ b/assets/android/TypographyTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Thu, 13 Jul 2023 10:06:01 GMT +// Generated on Mon, 17 Jul 2023 12:18:58 GMT diff --git a/assets/android/internal/DarkDesignTokens.kt b/assets/android/internal/DarkDesignTokens.kt index 95bbbb3d..3885010d 100644 --- a/assets/android/internal/DarkDesignTokens.kt +++ b/assets/android/internal/DarkDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Thu, 13 Jul 2023 10:06:01 GMT +// Generated on Mon, 17 Jul 2023 12:18:58 GMT diff --git a/assets/android/internal/DarkHcDesignTokens.kt b/assets/android/internal/DarkHcDesignTokens.kt index ce1f9c80..6bb5a719 100644 --- a/assets/android/internal/DarkHcDesignTokens.kt +++ b/assets/android/internal/DarkHcDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Thu, 13 Jul 2023 10:06:01 GMT +// Generated on Mon, 17 Jul 2023 12:18:58 GMT diff --git a/assets/android/internal/LightDesignTokens.kt b/assets/android/internal/LightDesignTokens.kt index 980dce76..29f70c25 100644 --- a/assets/android/internal/LightDesignTokens.kt +++ b/assets/android/internal/LightDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Thu, 13 Jul 2023 10:06:01 GMT +// Generated on Mon, 17 Jul 2023 12:18:58 GMT diff --git a/assets/android/internal/LightHcDesignTokens.kt b/assets/android/internal/LightHcDesignTokens.kt index f300133a..c7bf2074 100644 --- a/assets/android/internal/LightHcDesignTokens.kt +++ b/assets/android/internal/LightHcDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Thu, 13 Jul 2023 10:06:01 GMT +// Generated on Mon, 17 Jul 2023 12:18:58 GMT diff --git a/assets/web/css/cpd-common.css b/assets/web/css/cpd-common.css index eb01258b..908fa147 100644 --- a/assets/web/css/cpd-common.css +++ b/assets/web/css/cpd-common.css @@ -8,6 +8,7 @@ --cpd-font-letter-spacing-body-md: -0.0088em; --cpd-font-letter-spacing-body-sm: -0.0031em; --cpd-font-letter-spacing-body-xs: 0.0048em; + --cpd-font-size-root: 1rem; --cpd-font-size-heading-xl: 2rem; --cpd-font-size-heading-lg: 1.75rem; --cpd-font-size-heading-md: 1.5rem; diff --git a/assets/web/js/cpdDark.d.ts b/assets/web/js/cpdDark.d.ts index c8c08638..8e2ed167 100644 --- a/assets/web/js/cpdDark.d.ts +++ b/assets/web/js/cpdDark.d.ts @@ -47,6 +47,7 @@ export const cpdFontSizeHeadingSm : string; export const cpdFontSizeHeadingMd : string; export const cpdFontSizeHeadingLg : string; export const cpdFontSizeHeadingXl : string; +export const cpdFontSizeRoot : string; export const cpdFontLetterSpacingBodyXs : string; export const cpdFontLetterSpacingBodySm : string; export const cpdFontLetterSpacingBodyMd : string; diff --git a/assets/web/js/cpdDark.js b/assets/web/js/cpdDark.js index 6260bfd7..f66ce762 100644 --- a/assets/web/js/cpdDark.js +++ b/assets/web/js/cpdDark.js @@ -47,6 +47,7 @@ export const cpdFontSizeHeadingSm = "1.25rem"; export const cpdFontSizeHeadingMd = "1.5rem"; export const cpdFontSizeHeadingLg = "1.75rem"; export const cpdFontSizeHeadingXl = "2rem"; +export const cpdFontSizeRoot = "1rem"; export const cpdFontLetterSpacingBodyXs = "0.0048em"; export const cpdFontLetterSpacingBodySm = "-0.0031em"; export const cpdFontLetterSpacingBodyMd = "-0.0088em"; diff --git a/assets/web/js/cpdDarkHc.d.ts b/assets/web/js/cpdDarkHc.d.ts index c8c08638..8e2ed167 100644 --- a/assets/web/js/cpdDarkHc.d.ts +++ b/assets/web/js/cpdDarkHc.d.ts @@ -47,6 +47,7 @@ export const cpdFontSizeHeadingSm : string; export const cpdFontSizeHeadingMd : string; export const cpdFontSizeHeadingLg : string; export const cpdFontSizeHeadingXl : string; +export const cpdFontSizeRoot : string; export const cpdFontLetterSpacingBodyXs : string; export const cpdFontLetterSpacingBodySm : string; export const cpdFontLetterSpacingBodyMd : string; diff --git a/assets/web/js/cpdDarkHc.js b/assets/web/js/cpdDarkHc.js index 846f5782..b0b41465 100644 --- a/assets/web/js/cpdDarkHc.js +++ b/assets/web/js/cpdDarkHc.js @@ -47,6 +47,7 @@ export const cpdFontSizeHeadingSm = "1.25rem"; export const cpdFontSizeHeadingMd = "1.5rem"; export const cpdFontSizeHeadingLg = "1.75rem"; export const cpdFontSizeHeadingXl = "2rem"; +export const cpdFontSizeRoot = "1rem"; export const cpdFontLetterSpacingBodyXs = "0.0048em"; export const cpdFontLetterSpacingBodySm = "-0.0031em"; export const cpdFontLetterSpacingBodyMd = "-0.0088em"; diff --git a/assets/web/js/cpdLight.d.ts b/assets/web/js/cpdLight.d.ts index c8c08638..8e2ed167 100644 --- a/assets/web/js/cpdLight.d.ts +++ b/assets/web/js/cpdLight.d.ts @@ -47,6 +47,7 @@ export const cpdFontSizeHeadingSm : string; export const cpdFontSizeHeadingMd : string; export const cpdFontSizeHeadingLg : string; export const cpdFontSizeHeadingXl : string; +export const cpdFontSizeRoot : string; export const cpdFontLetterSpacingBodyXs : string; export const cpdFontLetterSpacingBodySm : string; export const cpdFontLetterSpacingBodyMd : string; diff --git a/assets/web/js/cpdLight.js b/assets/web/js/cpdLight.js index 3c913af5..5c1aeff6 100644 --- a/assets/web/js/cpdLight.js +++ b/assets/web/js/cpdLight.js @@ -47,6 +47,7 @@ export const cpdFontSizeHeadingSm = "1.25rem"; export const cpdFontSizeHeadingMd = "1.5rem"; export const cpdFontSizeHeadingLg = "1.75rem"; export const cpdFontSizeHeadingXl = "2rem"; +export const cpdFontSizeRoot = "1rem"; export const cpdFontLetterSpacingBodyXs = "0.0048em"; export const cpdFontLetterSpacingBodySm = "-0.0031em"; export const cpdFontLetterSpacingBodyMd = "-0.0088em"; diff --git a/assets/web/js/cpdLightHc.d.ts b/assets/web/js/cpdLightHc.d.ts index c8c08638..8e2ed167 100644 --- a/assets/web/js/cpdLightHc.d.ts +++ b/assets/web/js/cpdLightHc.d.ts @@ -47,6 +47,7 @@ export const cpdFontSizeHeadingSm : string; export const cpdFontSizeHeadingMd : string; export const cpdFontSizeHeadingLg : string; export const cpdFontSizeHeadingXl : string; +export const cpdFontSizeRoot : string; export const cpdFontLetterSpacingBodyXs : string; export const cpdFontLetterSpacingBodySm : string; export const cpdFontLetterSpacingBodyMd : string; diff --git a/assets/web/js/cpdLightHc.js b/assets/web/js/cpdLightHc.js index 61b16861..3ba5ad69 100644 --- a/assets/web/js/cpdLightHc.js +++ b/assets/web/js/cpdLightHc.js @@ -47,6 +47,7 @@ export const cpdFontSizeHeadingSm = "1.25rem"; export const cpdFontSizeHeadingMd = "1.5rem"; export const cpdFontSizeHeadingLg = "1.75rem"; export const cpdFontSizeHeadingXl = "2rem"; +export const cpdFontSizeRoot = "1rem"; export const cpdFontLetterSpacingBodyXs = "0.0048em"; export const cpdFontLetterSpacingBodySm = "-0.0031em"; export const cpdFontLetterSpacingBodyMd = "-0.0088em"; diff --git a/tokens/platform-web.json b/tokens/platform-web.json index a154df1b..3890abba 100644 --- a/tokens/platform-web.json +++ b/tokens/platform-web.json @@ -74,6 +74,11 @@ "value": "32", "type": "fontSizes" } + }, + "root": { + "value": "16px", + "type": "fontSizes", + "description": "Base font size for Tokens Studio and the root html element. https://docs.tokens.studio/tokens/settings" } }, "letter-spacing": { @@ -345,4 +350,4 @@ } } } -} \ No newline at end of file +} From 9a653cfe50a12a5a8096912eaac38c0b882c6305 Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 17 Jul 2023 13:21:10 +0100 Subject: [PATCH 5/6] Re-order tokens --- assets/android/SemanticColors.kt | 2 +- assets/android/TypographyTokens.kt | 2 +- assets/android/internal/DarkDesignTokens.kt | 2 +- assets/android/internal/DarkHcDesignTokens.kt | 2 +- assets/android/internal/LightDesignTokens.kt | 2 +- .../android/internal/LightHcDesignTokens.kt | 2 +- .../ios/swift/CompoundDarkDesignTokens.swift | 30 ++-- .../swift/CompoundDarkHcDesignTokens.swift | 30 ++-- .../ios/swift/CompoundLightDesignTokens.swift | 30 ++-- .../swift/CompoundLightHcDesignTokens.swift | 30 ++-- assets/web/css/cpd-common.css | 30 ++-- assets/web/js/cpdDark.d.ts | 28 ++-- assets/web/js/cpdDark.js | 28 ++-- assets/web/js/cpdDarkHc.d.ts | 28 ++-- assets/web/js/cpdDarkHc.js | 28 ++-- assets/web/js/cpdLight.d.ts | 28 ++-- assets/web/js/cpdLight.js | 28 ++-- assets/web/js/cpdLightHc.d.ts | 28 ++-- assets/web/js/cpdLightHc.js | 28 ++-- tokens/theme-semantics.json | 148 +++++++++--------- 20 files changed, 267 insertions(+), 267 deletions(-) diff --git a/assets/android/SemanticColors.kt b/assets/android/SemanticColors.kt index aaa2697d..b4f2ad36 100644 --- a/assets/android/SemanticColors.kt +++ b/assets/android/SemanticColors.kt @@ -12,7 +12,7 @@ import androidx.compose.ui.graphics.Color // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:18:58 GMT +// Generated on Mon, 17 Jul 2023 12:20:58 GMT diff --git a/assets/android/TypographyTokens.kt b/assets/android/TypographyTokens.kt index f2580638..4cd445d7 100644 --- a/assets/android/TypographyTokens.kt +++ b/assets/android/TypographyTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:18:58 GMT +// Generated on Mon, 17 Jul 2023 12:20:58 GMT diff --git a/assets/android/internal/DarkDesignTokens.kt b/assets/android/internal/DarkDesignTokens.kt index 3885010d..130da910 100644 --- a/assets/android/internal/DarkDesignTokens.kt +++ b/assets/android/internal/DarkDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:18:58 GMT +// Generated on Mon, 17 Jul 2023 12:20:58 GMT diff --git a/assets/android/internal/DarkHcDesignTokens.kt b/assets/android/internal/DarkHcDesignTokens.kt index 6bb5a719..8d40e6b7 100644 --- a/assets/android/internal/DarkHcDesignTokens.kt +++ b/assets/android/internal/DarkHcDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:18:58 GMT +// Generated on Mon, 17 Jul 2023 12:20:58 GMT diff --git a/assets/android/internal/LightDesignTokens.kt b/assets/android/internal/LightDesignTokens.kt index 29f70c25..dd83a00a 100644 --- a/assets/android/internal/LightDesignTokens.kt +++ b/assets/android/internal/LightDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:18:58 GMT +// Generated on Mon, 17 Jul 2023 12:20:57 GMT diff --git a/assets/android/internal/LightHcDesignTokens.kt b/assets/android/internal/LightHcDesignTokens.kt index c7bf2074..70f674fe 100644 --- a/assets/android/internal/LightHcDesignTokens.kt +++ b/assets/android/internal/LightHcDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:18:58 GMT +// Generated on Mon, 17 Jul 2023 12:20:58 GMT diff --git a/assets/ios/swift/CompoundDarkDesignTokens.swift b/assets/ios/swift/CompoundDarkDesignTokens.swift index 307a2bc9..fad29209 100644 --- a/assets/ios/swift/CompoundDarkDesignTokens.swift +++ b/assets/ios/swift/CompoundDarkDesignTokens.swift @@ -366,25 +366,10 @@ public class CompoundDarkDesignTokens { public static let space6X = CGFloat(24) public static let space0X = CGFloat(0) public static let spaceScale = CGFloat(4) - 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 colorIconOnSolidPrimary = colorThemeBg 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 @@ -434,6 +419,20 @@ public class CompoundDarkDesignTokens { 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 space64X = spaceScale * 64 public static let space48X = spaceScale * 48 public static let space40X = spaceScale * 40 @@ -454,4 +453,5 @@ public class CompoundDarkDesignTokens { public static let space1_5X = spaceScale * 1.5 public static let space1X = spaceScale public static let space0_5X = spaceScale * 0.5 + public static let colorIconAccentTertiary = colorAccent800 } diff --git a/assets/ios/swift/CompoundDarkHcDesignTokens.swift b/assets/ios/swift/CompoundDarkHcDesignTokens.swift index 963de97c..a32ca793 100644 --- a/assets/ios/swift/CompoundDarkHcDesignTokens.swift +++ b/assets/ios/swift/CompoundDarkHcDesignTokens.swift @@ -366,25 +366,10 @@ public class CompoundDarkHcDesignTokens { public static let space6X = CGFloat(24) public static let space0X = CGFloat(0) public static let spaceScale = CGFloat(4) - 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 colorIconOnSolidPrimary = colorThemeBg 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 @@ -434,6 +419,20 @@ public class CompoundDarkHcDesignTokens { 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 space64X = spaceScale * 64 public static let space48X = spaceScale * 48 public static let space40X = spaceScale * 40 @@ -454,4 +453,5 @@ public class CompoundDarkHcDesignTokens { public static let space1_5X = spaceScale * 1.5 public static let space1X = spaceScale public static let space0_5X = spaceScale * 0.5 + public static let colorIconAccentTertiary = colorAccent800 } diff --git a/assets/ios/swift/CompoundLightDesignTokens.swift b/assets/ios/swift/CompoundLightDesignTokens.swift index de6415a1..5122896a 100644 --- a/assets/ios/swift/CompoundLightDesignTokens.swift +++ b/assets/ios/swift/CompoundLightDesignTokens.swift @@ -366,25 +366,10 @@ public class CompoundLightDesignTokens { public static let space6X = CGFloat(24) public static let space0X = CGFloat(0) public static let spaceScale = CGFloat(4) - 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 colorIconOnSolidPrimary = colorThemeBg 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 @@ -434,6 +419,20 @@ public class CompoundLightDesignTokens { 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 space64X = spaceScale * 64 public static let space48X = spaceScale * 48 public static let space40X = spaceScale * 40 @@ -454,4 +453,5 @@ public class CompoundLightDesignTokens { public static let space1_5X = spaceScale * 1.5 public static let space1X = spaceScale public static let space0_5X = spaceScale * 0.5 + public static let colorIconAccentTertiary = colorAccent800 } diff --git a/assets/ios/swift/CompoundLightHcDesignTokens.swift b/assets/ios/swift/CompoundLightHcDesignTokens.swift index 79fd38de..5c4a5d95 100644 --- a/assets/ios/swift/CompoundLightHcDesignTokens.swift +++ b/assets/ios/swift/CompoundLightHcDesignTokens.swift @@ -366,25 +366,10 @@ public class CompoundLightHcDesignTokens { public static let space6X = CGFloat(24) public static let space0X = CGFloat(0) public static let spaceScale = CGFloat(4) - 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 colorIconOnSolidPrimary = colorThemeBg 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 @@ -434,6 +419,20 @@ public class CompoundLightHcDesignTokens { 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 space64X = spaceScale * 64 public static let space48X = spaceScale * 48 public static let space40X = spaceScale * 40 @@ -454,4 +453,5 @@ public class CompoundLightHcDesignTokens { public static let space1_5X = spaceScale * 1.5 public static let space1X = spaceScale public static let space0_5X = spaceScale * 0.5 + public static let colorIconAccentTertiary = colorAccent800 } diff --git a/assets/web/css/cpd-common.css b/assets/web/css/cpd-common.css index 908fa147..9371dd5f 100644 --- a/assets/web/css/cpd-common.css +++ b/assets/web/css/cpd-common.css @@ -38,25 +38,10 @@ --cpd-space-6x: 24px; --cpd-space-0x: 0px; --cpd-space-scale: 4px; - --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-color-icon-on-solid-primary: var(--cpd-color-theme-bg); --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); @@ -104,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); @@ -145,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 8e2ed167..92378cf9 100644 --- a/assets/web/js/cpdDark.d.ts +++ b/assets/web/js/cpdDark.d.ts @@ -402,6 +402,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; @@ -456,18 +470,4 @@ export const cpdColorIconCriticalPrimary : string; export const cpdColorIconSuccessPrimary : string; export const cpdColorIconInfoPrimary : string; export const cpdColorIconOnSolidPrimary : 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 cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdDark.js b/assets/web/js/cpdDark.js index f66ce762..c4767fe6 100644 --- a/assets/web/js/cpdDark.js +++ b/assets/web/js/cpdDark.js @@ -402,6 +402,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"; @@ -456,18 +470,4 @@ export const cpdColorIconCriticalPrimary = "#fd3e3c"; export const cpdColorIconSuccessPrimary = "#129a78"; export const cpdColorIconInfoPrimary = "#4187eb"; export const cpdColorIconOnSolidPrimary = "#101317"; -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 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 8e2ed167..92378cf9 100644 --- a/assets/web/js/cpdDarkHc.d.ts +++ b/assets/web/js/cpdDarkHc.d.ts @@ -402,6 +402,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; @@ -456,18 +470,4 @@ export const cpdColorIconCriticalPrimary : string; export const cpdColorIconSuccessPrimary : string; export const cpdColorIconInfoPrimary : string; export const cpdColorIconOnSolidPrimary : 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 cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdDarkHc.js b/assets/web/js/cpdDarkHc.js index b0b41465..ed547caa 100644 --- a/assets/web/js/cpdDarkHc.js +++ b/assets/web/js/cpdDarkHc.js @@ -402,6 +402,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"; @@ -456,18 +470,4 @@ export const cpdColorIconCriticalPrimary = "#ff968c"; export const cpdColorIconSuccessPrimary = "#37c998"; export const cpdColorIconInfoPrimary = "#89b5f6"; export const cpdColorIconOnSolidPrimary = "#101317"; -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 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 8e2ed167..92378cf9 100644 --- a/assets/web/js/cpdLight.d.ts +++ b/assets/web/js/cpdLight.d.ts @@ -402,6 +402,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; @@ -456,18 +470,4 @@ export const cpdColorIconCriticalPrimary : string; export const cpdColorIconSuccessPrimary : string; export const cpdColorIconInfoPrimary : string; export const cpdColorIconOnSolidPrimary : 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 cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdLight.js b/assets/web/js/cpdLight.js index 5c1aeff6..f96734ea 100644 --- a/assets/web/js/cpdLight.js +++ b/assets/web/js/cpdLight.js @@ -402,6 +402,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"; @@ -456,18 +470,4 @@ export const cpdColorIconCriticalPrimary = "#d51928"; export const cpdColorIconSuccessPrimary = "#007a61"; export const cpdColorIconInfoPrimary = "#0467dd"; export const cpdColorIconOnSolidPrimary = "#ffffff"; -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 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 8e2ed167..92378cf9 100644 --- a/assets/web/js/cpdLightHc.d.ts +++ b/assets/web/js/cpdLightHc.d.ts @@ -402,6 +402,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; @@ -456,18 +470,4 @@ export const cpdColorIconCriticalPrimary : string; export const cpdColorIconSuccessPrimary : string; export const cpdColorIconInfoPrimary : string; export const cpdColorIconOnSolidPrimary : 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 cpdColorBrandPrimary : string; \ No newline at end of file diff --git a/assets/web/js/cpdLightHc.js b/assets/web/js/cpdLightHc.js index 3ba5ad69..8cba88cc 100644 --- a/assets/web/js/cpdLightHc.js +++ b/assets/web/js/cpdLightHc.js @@ -402,6 +402,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"; @@ -456,18 +470,4 @@ export const cpdColorIconCriticalPrimary = "#99001a"; export const cpdColorIconSuccessPrimary = "#00553d"; export const cpdColorIconInfoPrimary = "#0543a7"; export const cpdColorIconOnSolidPrimary = "#ffffff"; -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 cpdColorBrandPrimary = "#0dbd8b"; \ No newline at end of file diff --git a/tokens/theme-semantics.json b/tokens/theme-semantics.json index 20bf09c0..eb324acd 100644 --- a/tokens/theme-semantics.json +++ b/tokens/theme-semantics.json @@ -1,5 +1,77 @@ { "color": { + "accent": { + "100": { + "value": "{color.green.100}", + "type": "color", + "description": "WCAG: 1.03" + }, + "200": { + "value": "{color.green.200}", + "type": "color", + "description": "WCAG: 1.06" + }, + "300": { + "value": "{color.green.300}", + "type": "color", + "description": "WCAG: 1.12" + }, + "400": { + "value": "{color.green.400}", + "type": "color", + "description": "WCAG: 1.25" + }, + "500": { + "value": "{color.green.500}", + "type": "color", + "description": "WCAG: 1.5" + }, + "600": { + "value": "{color.green.600}", + "type": "color", + "description": "WCAG: 1.75" + }, + "700": { + "value": "{color.green.700}", + "type": "color", + "description": "WCAG: 2.25" + }, + "800": { + "value": "{color.green.800}", + "type": "color", + "description": "WCAG: 3.5" + }, + "900": { + "value": "{color.green.900}", + "type": "color", + "description": "WCAG: 5.25" + }, + "1000": { + "value": "{color.green.1000}", + "type": "color", + "description": "WCAG: 6.5" + }, + "1100": { + "value": "{color.green.1100}", + "type": "color", + "description": "WCAG: 8" + }, + "1200": { + "value": "{color.green.1200}", + "type": "color", + "description": "WCAG: 10.5" + }, + "1300": { + "value": "{color.green.1300}", + "type": "color", + "description": "WCAG: 13.75" + }, + "1400": { + "value": "{color.green.1400}", + "type": "color", + "description": "WCAG: 16.75" + } + }, "text": { "primary": { "value": "{color.gray.1400}", @@ -278,7 +350,7 @@ }, "accent": { "tertiary": { - "value": "{color.green.800}", + "value": "{color.accent.800}", "type": "color", "description": "Lowest contrast accessible accent icons." } @@ -312,78 +384,6 @@ } } }, - "accent": { - "100": { - "value": "{color.green.100}", - "type": "color", - "description": "WCAG: 1.03" - }, - "200": { - "value": "{color.green.200}", - "type": "color", - "description": "WCAG: 1.06" - }, - "300": { - "value": "{color.green.300}", - "type": "color", - "description": "WCAG: 1.12" - }, - "400": { - "value": "{color.green.400}", - "type": "color", - "description": "WCAG: 1.25" - }, - "500": { - "value": "{color.green.500}", - "type": "color", - "description": "WCAG: 1.5" - }, - "600": { - "value": "{color.green.600}", - "type": "color", - "description": "WCAG: 1.75" - }, - "700": { - "value": "{color.green.700}", - "type": "color", - "description": "WCAG: 2.25" - }, - "800": { - "value": "{color.green.800}", - "type": "color", - "description": "WCAG: 3.5" - }, - "900": { - "value": "{color.green.900}", - "type": "color", - "description": "WCAG: 5.25" - }, - "1000": { - "value": "{color.green.1000}", - "type": "color", - "description": "WCAG: 6.5" - }, - "1100": { - "value": "{color.green.1100}", - "type": "color", - "description": "WCAG: 8" - }, - "1200": { - "value": "{color.green.1200}", - "type": "color", - "description": "WCAG: 10.5" - }, - "1300": { - "value": "{color.green.1300}", - "type": "color", - "description": "WCAG: 13.75" - }, - "1400": { - "value": "{color.green.1400}", - "type": "color", - "description": "WCAG: 16.75" - } - }, "brand": { "primary": { "value": "#0dbd8b", @@ -392,4 +392,4 @@ } } } -} \ No newline at end of file +} From 592b44187bb377d3bf87b6452ea6afc7db9899a9 Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 18 Jul 2023 09:39:34 +0100 Subject: [PATCH 6/6] Remove WCAG annotation for accent scale --- assets/android/SemanticColors.kt | 16 +------ assets/android/TypographyTokens.kt | 2 +- assets/android/internal/DarkDesignTokens.kt | 2 +- assets/android/internal/DarkHcDesignTokens.kt | 2 +- assets/android/internal/LightDesignTokens.kt | 2 +- .../android/internal/LightHcDesignTokens.kt | 2 +- tokens/theme-semantics.json | 42 +++++++------------ 7 files changed, 20 insertions(+), 48 deletions(-) diff --git a/assets/android/SemanticColors.kt b/assets/android/SemanticColors.kt index b4f2ad36..c5643637 100644 --- a/assets/android/SemanticColors.kt +++ b/assets/android/SemanticColors.kt @@ -12,7 +12,7 @@ import androidx.compose.ui.graphics.Color // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:20:58 GMT +// Generated on Tue, 18 Jul 2023 08:39:04 GMT @@ -93,46 +93,32 @@ class SemanticColors( ) { var isLight by mutableStateOf(isLight) private set - /** WCAG: 1.03 */ var accent100 by mutableStateOf(accent100) private set - /** WCAG: 6.5 */ var accent1000 by mutableStateOf(accent1000) private set - /** WCAG: 8 */ var accent1100 by mutableStateOf(accent1100) private set - /** WCAG: 10.5 */ var accent1200 by mutableStateOf(accent1200) private set - /** WCAG: 13.75 */ var accent1300 by mutableStateOf(accent1300) private set - /** WCAG: 16.75 */ var accent1400 by mutableStateOf(accent1400) private set - /** WCAG: 1.06 */ var accent200 by mutableStateOf(accent200) private set - /** WCAG: 1.12 */ var accent300 by mutableStateOf(accent300) private set - /** WCAG: 1.25 */ var accent400 by mutableStateOf(accent400) private set - /** WCAG: 1.5 */ var accent500 by mutableStateOf(accent500) private set - /** WCAG: 1.75 */ var accent600 by mutableStateOf(accent600) private set - /** WCAG: 2.25 */ var accent700 by mutableStateOf(accent700) private set - /** WCAG: 3.5 */ var accent800 by mutableStateOf(accent800) private set - /** WCAG: 5.25 */ var accent900 by mutableStateOf(accent900) private set /** Background colour for primary actions. State: Disabled. */ diff --git a/assets/android/TypographyTokens.kt b/assets/android/TypographyTokens.kt index 4cd445d7..a51aa815 100644 --- a/assets/android/TypographyTokens.kt +++ b/assets/android/TypographyTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:20:58 GMT +// Generated on Tue, 18 Jul 2023 08:39:04 GMT diff --git a/assets/android/internal/DarkDesignTokens.kt b/assets/android/internal/DarkDesignTokens.kt index 130da910..f8cf1d10 100644 --- a/assets/android/internal/DarkDesignTokens.kt +++ b/assets/android/internal/DarkDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:20:58 GMT +// Generated on Tue, 18 Jul 2023 08:39:04 GMT diff --git a/assets/android/internal/DarkHcDesignTokens.kt b/assets/android/internal/DarkHcDesignTokens.kt index 8d40e6b7..2174ce68 100644 --- a/assets/android/internal/DarkHcDesignTokens.kt +++ b/assets/android/internal/DarkHcDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:20:58 GMT +// Generated on Tue, 18 Jul 2023 08:39:04 GMT diff --git a/assets/android/internal/LightDesignTokens.kt b/assets/android/internal/LightDesignTokens.kt index dd83a00a..6eceb4cd 100644 --- a/assets/android/internal/LightDesignTokens.kt +++ b/assets/android/internal/LightDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:20:57 GMT +// Generated on Tue, 18 Jul 2023 08:39:04 GMT diff --git a/assets/android/internal/LightHcDesignTokens.kt b/assets/android/internal/LightHcDesignTokens.kt index 70f674fe..ee2725f9 100644 --- a/assets/android/internal/LightHcDesignTokens.kt +++ b/assets/android/internal/LightHcDesignTokens.kt @@ -1,7 +1,7 @@ // Do not edit directly -// Generated on Mon, 17 Jul 2023 12:20:58 GMT +// Generated on Tue, 18 Jul 2023 08:39:04 GMT diff --git a/tokens/theme-semantics.json b/tokens/theme-semantics.json index eb324acd..0c1c4e89 100644 --- a/tokens/theme-semantics.json +++ b/tokens/theme-semantics.json @@ -3,73 +3,59 @@ "accent": { "100": { "value": "{color.green.100}", - "type": "color", - "description": "WCAG: 1.03" + "type": "color" }, "200": { "value": "{color.green.200}", - "type": "color", - "description": "WCAG: 1.06" + "type": "color" }, "300": { "value": "{color.green.300}", - "type": "color", - "description": "WCAG: 1.12" + "type": "color" }, "400": { "value": "{color.green.400}", - "type": "color", - "description": "WCAG: 1.25" + "type": "color" }, "500": { "value": "{color.green.500}", - "type": "color", - "description": "WCAG: 1.5" + "type": "color" }, "600": { "value": "{color.green.600}", - "type": "color", - "description": "WCAG: 1.75" + "type": "color" }, "700": { "value": "{color.green.700}", - "type": "color", - "description": "WCAG: 2.25" + "type": "color" }, "800": { "value": "{color.green.800}", - "type": "color", - "description": "WCAG: 3.5" + "type": "color" }, "900": { "value": "{color.green.900}", - "type": "color", - "description": "WCAG: 5.25" + "type": "color" }, "1000": { "value": "{color.green.1000}", - "type": "color", - "description": "WCAG: 6.5" + "type": "color" }, "1100": { "value": "{color.green.1100}", - "type": "color", - "description": "WCAG: 8" + "type": "color" }, "1200": { "value": "{color.green.1200}", - "type": "color", - "description": "WCAG: 10.5" + "type": "color" }, "1300": { "value": "{color.green.1300}", - "type": "color", - "description": "WCAG: 13.75" + "type": "color" }, "1400": { "value": "{color.green.1400}", - "type": "color", - "description": "WCAG: 16.75" + "type": "color" } }, "text": {