@central-design-system/components 3.2.0 → 3.3.0

package/dist/themes/colors.d.ts

@@ -1,7 +1,7 @@
 /**
  * Automatically generated by CDS CLI from CDS Server
- * Generated on 1/27/2025, 7:21:39 AM
- * Updated on 2024-12-25T14:30:52.638Z
+ * Generated on 7/23/2025, 11:22:02 AM
+ * Updated on 2025-07-23T10:21:22.451Z
  **/
 declare const _default: {
     red: Readonly<{

package/dist/themes/index.d.ts

@@ -3,4 +3,6 @@ export { default as cdsLight } from './cdsLight';
 export { default as cdsDark } from './cdsDark';
 export { default as b2bLight } from './b2bLight';
 export { default as b2bDark } from './b2bDark';
+export { default as promoLight } from './promoLight';
+export { default as promoDark } from './promoDark';
 export { default as colors } from './colors';

package/dist/themes/promoDark.d.ts

@@ -0,0 +1,190 @@
+declare const _default: {
+    dark: boolean;
+    colors: {
+        'surface-secondary': "#33373F";
+        'surface-primary': "#272A30";
+        'surface-overlay': "#272A30CC";
+        'surface-inverse': "#DCDDE3";
+        'surface-elevated': "#33373F";
+        'status-warning-surface': "#C9A449";
+        'status-warning-line': "#BE9737";
+        'status-warning-fill-hover': "#8A6502";
+        'status-warning-fill': "#614301";
+        'status-warning-content': "#EADBBA";
+        'status-success-surface': "#6EBA66";
+        'status-success-line': "#5DAF55";
+        'status-success-fill-hover': "#1F7C22";
+        'status-success-fill': "#0D5512";
+        'status-success-content': "#CAE4C4";
+        'status-progress-surface': "#4DB1FF";
+        'status-progress-line': "#0EA4F8";
+        'status-progress-fill-hover': "#0172AC";
+        'status-progress-fill': "#014F77";
+        'status-progress-content': "#C7E0FF";
+        'status-info-surface': "#A5A9B2";
+        'status-info-line': "#989DA8";
+        'status-info-fill-hover': "#666C79";
+        'status-info-fill': "#454951";
+        'status-info-content': "#DCDDE3";
+        'status-indication-surface': "#FF9E92";
+        'status-indication-line': "#FF9E92";
+        'status-indication-fill-hover': "#B8423D";
+        'status-indication-fill': "#822825";
+        'status-indication-content': "#FFD2CC";
+        'status-danger-surface': "#FF9E92";
+        'status-danger-line': "#FF9E92";
+        'status-danger-fill-hover': "#B8423D";
+        'status-danger-fill': "#822825";
+        'status-danger-content': "#FFD2CC";
+        'page-primary': "#1A1A1A";
+        'other-teal-surface': "#0ABACE";
+        'other-teal-line': "#01ACBF";
+        'other-teal-fill-hover': "#007886";
+        'other-teal-fill': "#04525B";
+        'other-teal-content': "#D4F2F7";
+        'other-purple-surface': "#B79AF5";
+        'other-purple-line': "#AE8BEE";
+        'other-purple-fill-hover': "#8457B8";
+        'other-purple-fill': "#5E3882";
+        'other-purple-content': "#F3E9FE";
+        'other-pink-surface': "#E889D1";
+        'other-pink-line': "#E078C7";
+        'other-pink-fill-hover': "#AC4296";
+        'other-pink-fill': "#7A2869";
+        'other-pink-content': "#FDE6F6";
+        'other-lime-surface': "#9BB24D";
+        'other-lime-line': "#8DA63B";
+        'other-lime-fill-hover': "#5B7400";
+        'other-lime-fill': "#3D4F00";
+        'other-lime-content': "#EBEED8";
+        'other-lemon-surface': "#ABAE48";
+        'other-lemon-line': "#9DA235";
+        'other-lemon-fill-hover': "#6A7100";
+        'other-lemon-fill': "#484C01";
+        'other-lemon-content': "#EEEED9";
+        'other-indigo-surface': "#96A4FF";
+        'other-indigo-line': "#8B95F9";
+        'other-indigo-fill-hover': "#6362C5";
+        'other-indigo-fill': "#40428D";
+        'other-indigo-content': "#EBEBFF";
+        'other-cyan-surface': "#0ABEA3";
+        'other-cyan-line': "#0AB098";
+        'other-cyan-fill-hover': "#067A69";
+        'other-cyan-fill': "#005348";
+        'other-cyan-content': "#D5F3EB";
+        'other-chocolate-surface': "#D49E6D";
+        'other-chocolate-line': "#CA915C";
+        'other-chocolate-fill-hover': "#985E1F";
+        'other-chocolate-fill': "#6E3B01";
+        'other-chocolate-content': "#FAEADB";
+        'line-tertiary-hover': "#7A808E";
+        'line-tertiary': "#565D67";
+        'line-selected-hover': "#92BAFE";
+        'line-selected': "#5D9DFC";
+        'line-secondary-hover': "#989DA8";
+        'line-secondary': "#7A808E";
+        'line-primary-hover': "#B5B7C0";
+        'line-primary': "#989DA8";
+        'line-focus-outline': "#1159B5";
+        'line-focus': "#5D9DFC";
+        'line-elevated': "#828A9766";
+        'line-disable': "#666C79";
+        'fill-selected-hover': "#92BAFE";
+        'fill-selected': "#5D9DFC";
+        'fill-secondary-hover': "#565D67";
+        'fill-secondary-active': "#666C79";
+        'fill-secondary': "#454951";
+        'fill-primary-hover': "#454951";
+        'fill-primary-active': "#565D67";
+        'fill-primary': "#272A30";
+        'fill-elevated': "#7A808E";
+        'fill-disable': "#454951";
+        'content-tertiary': "#B5B7C0";
+        'content-secondary': "#CFD2D7";
+        'content-primary': "#ECECEF";
+        'content-placeholder': "#A5A9B2";
+        'content-on-dark': "#F9F9FC";
+        'content-link-visited': "#C0AEF8";
+        'content-link': "#92BAFE";
+        'content-inverse': "#1A1A1A";
+        'content-disable': "#989DA8";
+        'brand-secondary-hover': "#822825";
+        'brand-secondary-border': "#A5302F";
+        'brand-secondary-active': "#A5302F";
+        'brand-secondary': "#4C1715";
+        'brand-primary-hover': "#A5302F";
+        'brand-primary-content': "#FFD2CC";
+        'brand-primary-border': "#D15850";
+        'brand-primary-active': "#822825";
+        'brand-primary': "#D15850";
+    };
+    variables: {
+        'spacing-900': string;
+        'spacing-800': string;
+        'spacing-700': string;
+        'spacing-600': string;
+        'spacing-500': string;
+        'spacing-50': string;
+        'spacing-400': string;
+        'spacing-300': string;
+        'spacing-200': string;
+        'spacing-1100': string;
+        'spacing-1000': string;
+        'spacing-100': string;
+        'shadow-y-minus-400': string;
+        'shadow-y-minus-300': string;
+        'shadow-y-minus-200': string;
+        'shadow-y-minus-100': string;
+        'shadow-y-400': string;
+        'shadow-y-300': string;
+        'shadow-y-200': string;
+        'shadow-y-100': string;
+        'shadow-x-minus-400': string;
+        'shadow-x-minus-300': string;
+        'shadow-x-minus-200': string;
+        'shadow-x-minus-100': string;
+        'shadow-x-400': string;
+        'shadow-x-300': string;
+        'shadow-x-200': string;
+        'shadow-x-100': string;
+        'shadow-blur-400': string;
+        'shadow-blur-300': string;
+        'shadow-blur-200': string;
+        'shadow-blur-100': string;
+        'font-weight-regular': number;
+        'font-weight-bold': number;
+        'font-size-900': string;
+        'font-size-800': string;
+        'font-size-700': string;
+        'font-size-600': string;
+        'font-size-500': string;
+        'font-size-50': string;
+        'font-size-400': string;
+        'font-size-300': string;
+        'font-size-200': string;
+        'font-size-1100': string;
+        'font-size-1000': string;
+        'font-size-100': string;
+        'font-line-height-900': string;
+        'font-line-height-800': string;
+        'font-line-height-700': string;
+        'font-line-height-600': string;
+        'font-line-height-500': string;
+        'font-line-height-50': string;
+        'font-line-height-400': string;
+        'font-line-height-300': string;
+        'font-line-height-200': string;
+        'font-line-height-1100': string;
+        'font-line-height-1000': string;
+        'font-line-height-100': string;
+        'font-letter-spacing-500': string;
+        'font-family': string;
+        'border-radius-300': string;
+        'border-radius-200': string;
+        'border-radius-100': string;
+        'border-200': string;
+        'border-100': string;
+        'base-unit': string;
+    };
+};
+export default _default;

package/dist/themes/promoLight.d.ts

@@ -0,0 +1,190 @@
+declare const _default: {
+    dark: boolean;
+    colors: {
+        'surface-secondary': "#FFFFFF";
+        'surface-primary': "#FFFFFF";
+        'surface-overlay': "#272A3080";
+        'surface-inverse': "#404653";
+        'surface-elevated': "#FFFFFF";
+        'status-warning-surface': "#A6840A";
+        'status-warning-line': "#B69210";
+        'status-warning-fill-hover': "#DEC048";
+        'status-warning-fill': "#F2DB82";
+        'status-warning-content': "#584001";
+        'status-success-surface': "#3C9C2C";
+        'status-success-line': "#50A946";
+        'status-success-fill-hover': "#97D283";
+        'status-success-fill': "#BCE8AB";
+        'status-success-content': "#005005";
+        'status-progress-surface': "#198FD8";
+        'status-progress-line': "#2B9DE9";
+        'status-progress-fill-hover': "#90C8FF";
+        'status-progress-fill': "#C3DFFF";
+        'status-progress-content': "#004871";
+        'status-info-surface': "#828A97";
+        'status-info-line': "#9298A4";
+        'status-info-fill-hover': "#C0C3CB";
+        'status-info-fill': "#DADDE2";
+        'status-info-content': "#404653";
+        'status-indication-surface': "#D1453F";
+        'status-indication-line': "#D1453F";
+        'status-indication-fill-hover': "#FFAE9E";
+        'status-indication-fill': "#FFD1C6";
+        'status-indication-content': "#831118";
+        'status-danger-surface': "#D1453F";
+        'status-danger-line': "#D1453F";
+        'status-danger-fill-hover': "#FFAE9E";
+        'status-danger-fill': "#FFD1C6";
+        'status-danger-content': "#831118";
+        'page-primary': "#ECEEF2";
+        'other-teal-surface': "#3A969E";
+        'other-teal-line': "#3CA5AD";
+        'other-teal-fill-hover': "#48D6DB";
+        'other-teal-fill': "#A1E9E9";
+        'other-teal-content': "#022B2F";
+        'other-purple-surface': "#A96FDE";
+        'other-purple-line': "#B381E1";
+        'other-purple-fill-hover': "#D6B8EF";
+        'other-purple-fill': "#E8D5F6";
+        'other-purple-content': "#2F0F50";
+        'other-pink-surface': "#D25CB8";
+        'other-pink-line': "#DB70C4";
+        'other-pink-fill-hover': "#F3ACE7";
+        'other-pink-fill': "#F8D1F2";
+        'other-pink-content': "#420D35";
+        'other-lime-surface': "#78922C";
+        'other-lime-line': "#85A12D";
+        'other-lime-fill-hover': "#B6CC65";
+        'other-lime-fill': "#D4E490";
+        'other-lime-content': "#202901";
+        'other-lemon-surface': "#8E8C23";
+        'other-lemon-line': "#9D9B25";
+        'other-lemon-fill-hover': "#CBC65F";
+        'other-lemon-fill': "#E6DF83";
+        'other-lemon-content': "#282601";
+        'other-indigo-surface': "#807EEC";
+        'other-indigo-line': "#918DEC";
+        'other-indigo-fill-hover': "#C3BDF9";
+        'other-indigo-fill': "#DDD9FC";
+        'other-indigo-content': "#1F1F55";
+        'other-cyan-surface': "#439786";
+        'other-cyan-line': "#48A692";
+        'other-cyan-fill-hover': "#58D8BE";
+        'other-cyan-fill': "#9FEBD8";
+        'other-cyan-content': "#052B24";
+        'other-chocolate-surface': "#AC7F58";
+        'other-chocolate-line': "#B78F6D";
+        'other-chocolate-fill-hover': "#D8BEA9";
+        'other-chocolate-fill': "#E7D9CC";
+        'other-chocolate-content': "#361D01";
+        'line-tertiary-hover': "#AFB3BD";
+        'line-tertiary': "#CCCFD6";
+        'line-selected-hover': "#2978D4";
+        'line-selected': "#4D98F9";
+        'line-secondary-hover': "#9298A4";
+        'line-secondary': "#AFB3BD";
+        'line-primary-hover': "#727987";
+        'line-primary': "#9298A4";
+        'line-focus-outline': "#A4C5FE";
+        'line-focus': "#4D98F9";
+        'line-elevated': "#FFFFFF00";
+        'line-disable': "#C0C3CB";
+        'fill-selected-hover': "#2978D4";
+        'fill-selected': "#4D98F9";
+        'fill-secondary-hover': "#CCCFD6";
+        'fill-secondary-active': "#C0C3CB";
+        'fill-secondary': "#DADDE2";
+        'fill-primary-hover': "#DADDE2";
+        'fill-primary-active': "#CCCFD6";
+        'fill-primary': "#FFFFFF";
+        'fill-elevated': "#FFFFFF";
+        'fill-disable': "#DADDE2";
+        'content-tertiary': "#727987";
+        'content-secondary': "#4F5666";
+        'content-primary': "#212631";
+        'content-placeholder': "#828A97";
+        'content-on-dark': "#FFFFFF";
+        'content-link-visited': "#BD49A2";
+        'content-link': "#2978D4";
+        'content-inverse': "#FFFFFF";
+        'content-disable': "#9298A4";
+        'brand-secondary-hover': "#FEC0B2";
+        'brand-secondary-border': "#FFD1C6";
+        'brand-secondary-active': "#FFAE9E";
+        'brand-secondary': "#FFD1C6";
+        'brand-primary-hover': "#E4594F";
+        'brand-primary-content': "#831118";
+        'brand-primary-border': "#D1453F";
+        'brand-primary-active': "#F46A5D";
+        'brand-primary': "#D1453F";
+    };
+    variables: {
+        'spacing-900': string;
+        'spacing-800': string;
+        'spacing-700': string;
+        'spacing-600': string;
+        'spacing-500': string;
+        'spacing-50': string;
+        'spacing-400': string;
+        'spacing-300': string;
+        'spacing-200': string;
+        'spacing-1100': string;
+        'spacing-1000': string;
+        'spacing-100': string;
+        'shadow-y-minus-400': string;
+        'shadow-y-minus-300': string;
+        'shadow-y-minus-200': string;
+        'shadow-y-minus-100': string;
+        'shadow-y-400': string;
+        'shadow-y-300': string;
+        'shadow-y-200': string;
+        'shadow-y-100': string;
+        'shadow-x-minus-400': string;
+        'shadow-x-minus-300': string;
+        'shadow-x-minus-200': string;
+        'shadow-x-minus-100': string;
+        'shadow-x-400': string;
+        'shadow-x-300': string;
+        'shadow-x-200': string;
+        'shadow-x-100': string;
+        'shadow-blur-400': string;
+        'shadow-blur-300': string;
+        'shadow-blur-200': string;
+        'shadow-blur-100': string;
+        'font-weight-regular': number;
+        'font-weight-bold': number;
+        'font-size-900': string;
+        'font-size-800': string;
+        'font-size-700': string;
+        'font-size-600': string;
+        'font-size-500': string;
+        'font-size-50': string;
+        'font-size-400': string;
+        'font-size-300': string;
+        'font-size-200': string;
+        'font-size-1100': string;
+        'font-size-1000': string;
+        'font-size-100': string;
+        'font-line-height-900': string;
+        'font-line-height-800': string;
+        'font-line-height-700': string;
+        'font-line-height-600': string;
+        'font-line-height-500': string;
+        'font-line-height-50': string;
+        'font-line-height-400': string;
+        'font-line-height-300': string;
+        'font-line-height-200': string;
+        'font-line-height-1100': string;
+        'font-line-height-1000': string;
+        'font-line-height-100': string;
+        'font-letter-spacing-500': string;
+        'font-family': string;
+        'border-radius-300': string;
+        'border-radius-200': string;
+        'border-radius-100': string;
+        'border-200': string;
+        'border-100': string;
+        'base-unit': string;
+    };
+};
+export default _default;

package/dist/utils/helpers.d.ts

@@ -133,6 +133,11 @@ export declare function convertRemToPx(value: string): number;
  */
 export declare function clamp(value: number, min?: number, max?: number): number;
 export declare function createRange(length: number, start?: number): number[];
+/**
+ * Is value an like event
+ * @param key
+ */
+export declare const onRE: RegExp;
 export declare const isOn: (key: string) => boolean;
 export declare const EventProp: PropType<EventProp>;
 export declare function isComponentInstance(obj: any): obj is ComponentPublicInstance;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": {
     "name": "magersoft",
@@ -39,7 +39,7 @@
     "nuxt.js"
   ],
   "engines": {
-    "node": ">= 22"
+    "node": ">= 18"
   },
   "scripts": {
     "build": "rimraf dist && npm run type-check && vite build",

package/src/themes/colors.ts

@@ -1,7 +1,7 @@
 /**
  * Automatically generated by CDS CLI from CDS Server
- * Generated on 1/27/2025, 7:21:39 AM
- * Updated on 2024-12-25T14:30:52.638Z
+ * Generated on 7/23/2025, 11:22:02 AM
+ * Updated on 2025-07-23T10:21:22.451Z
  **/
 
 const red = Object.freeze({

package/src/themes/css/promoDark.css

@@ -0,0 +1,184 @@
+:root {
+  --cds-spacing-900: 4rem;
+  --cds-spacing-800: 3rem;
+  --cds-spacing-700: 2.5rem;
+  --cds-spacing-600: 2rem;
+  --cds-spacing-500: 1.5rem;
+  --cds-spacing-50: 0.125rem;
+  --cds-spacing-400: 1rem;
+  --cds-spacing-300: 0.75rem;
+  --cds-spacing-200: 0.5rem;
+  --cds-spacing-1100: 6rem;
+  --cds-spacing-1000: 5rem;
+  --cds-spacing-100: 0.25rem;
+  --cds-shadow-y-minus-400: 0rem;
+  --cds-shadow-y-minus-300: 0rem;
+  --cds-shadow-y-minus-200: 0rem;
+  --cds-shadow-y-minus-100: 0rem;
+  --cds-shadow-y-400: 0rem;
+  --cds-shadow-y-300: 0rem;
+  --cds-shadow-y-200: 0rem;
+  --cds-shadow-y-100: 0rem;
+  --cds-shadow-x-minus-400: 0rem;
+  --cds-shadow-x-minus-300: 0rem;
+  --cds-shadow-x-minus-200: 0rem;
+  --cds-shadow-x-minus-100: 0rem;
+  --cds-shadow-x-400: 0rem;
+  --cds-shadow-x-300: 0rem;
+  --cds-shadow-x-200: 0rem;
+  --cds-shadow-x-100: 0rem;
+  --cds-shadow-blur-400: 0rem;
+  --cds-shadow-blur-300: 0rem;
+  --cds-shadow-blur-200: 0rem;
+  --cds-shadow-blur-100: 0rem;
+  --cds-font-weight-regular: 400;
+  --cds-font-weight-bold: 700;
+  --cds-font-size-900: 3.25rem;
+  --cds-font-size-800: 2.75rem;
+  --cds-font-size-700: 2.25rem;
+  --cds-font-size-600: 1.75rem;
+  --cds-font-size-500: 1.5rem;
+  --cds-font-size-50: 0.625rem;
+  --cds-font-size-400: 1.25rem;
+  --cds-font-size-300: 1rem;
+  --cds-font-size-200: 0.875rem;
+  --cds-font-size-1100: 4.5rem;
+  --cds-font-size-1000: 3.75rem;
+  --cds-font-size-100: 0.75rem;
+  --cds-font-line-height-900: 4rem;
+  --cds-font-line-height-800: 3rem;
+  --cds-font-line-height-700: 2.5rem;
+  --cds-font-line-height-600: 2rem;
+  --cds-font-line-height-500: 1.75rem;
+  --cds-font-line-height-50: 0.75rem;
+  --cds-font-line-height-400: 1.5rem;
+  --cds-font-line-height-300: 1.25rem;
+  --cds-font-line-height-200: 1rem;
+  --cds-font-line-height-1100: 5.5rem;
+  --cds-font-line-height-1000: 4.5rem;
+  --cds-font-line-height-100: 0.875rem;
+  --cds-font-letter-spacing-500: 0.0625rem;
+  --cds-font-family: Arial;
+  --cds-border-radius-300: 0.5rem;
+  --cds-border-radius-200: 0.25rem;
+  --cds-border-radius-100: 0.125rem;
+  --cds-border-200: 0.125rem;
+  --cds-border-100: 0.0625rem;
+  --cds-base-unit: 16px;
+  --cds-color-surface-secondary: 51, 55, 63;
+  --cds-color-surface-primary: 39, 42, 48;
+  --cds-color-surface-overlay: 39, 42, 48, 0.8;
+  --cds-color-surface-inverse: 220, 221, 227;
+  --cds-color-surface-elevated: 51, 55, 63;
+  --cds-color-status-warning-surface: 201, 164, 73;
+  --cds-color-status-warning-line: 190, 151, 55;
+  --cds-color-status-warning-fill-hover: 138, 101, 2;
+  --cds-color-status-warning-fill: 97, 67, 1;
+  --cds-color-status-warning-content: 234, 219, 186;
+  --cds-color-status-success-surface: 110, 186, 102;
+  --cds-color-status-success-line: 93, 175, 85;
+  --cds-color-status-success-fill-hover: 31, 124, 34;
+  --cds-color-status-success-fill: 13, 85, 18;
+  --cds-color-status-success-content: 202, 228, 196;
+  --cds-color-status-progress-surface: 77, 177, 255;
+  --cds-color-status-progress-line: 14, 164, 248;
+  --cds-color-status-progress-fill-hover: 1, 114, 172;
+  --cds-color-status-progress-fill: 1, 79, 119;
+  --cds-color-status-progress-content: 199, 224, 255;
+  --cds-color-status-info-surface: 165, 169, 178;
+  --cds-color-status-info-line: 152, 157, 168;
+  --cds-color-status-info-fill-hover: 102, 108, 121;
+  --cds-color-status-info-fill: 69, 73, 81;
+  --cds-color-status-info-content: 220, 221, 227;
+  --cds-color-status-indication-surface: 255, 158, 146;
+  --cds-color-status-indication-line: 255, 158, 146;
+  --cds-color-status-indication-fill-hover: 184, 66, 61;
+  --cds-color-status-indication-fill: 130, 40, 37;
+  --cds-color-status-indication-content: 255, 210, 204;
+  --cds-color-status-danger-surface: 255, 158, 146;
+  --cds-color-status-danger-line: 255, 158, 146;
+  --cds-color-status-danger-fill-hover: 184, 66, 61;
+  --cds-color-status-danger-fill: 130, 40, 37;
+  --cds-color-status-danger-content: 255, 210, 204;
+  --cds-color-page-primary: 26, 26, 26;
+  --cds-color-other-teal-surface: 10, 186, 206;
+  --cds-color-other-teal-line: 1, 172, 191;
+  --cds-color-other-teal-fill-hover: 0, 120, 134;
+  --cds-color-other-teal-fill: 4, 82, 91;
+  --cds-color-other-teal-content: 212, 242, 247;
+  --cds-color-other-purple-surface: 183, 154, 245;
+  --cds-color-other-purple-line: 174, 139, 238;
+  --cds-color-other-purple-fill-hover: 132, 87, 184;
+  --cds-color-other-purple-fill: 94, 56, 130;
+  --cds-color-other-purple-content: 243, 233, 254;
+  --cds-color-other-pink-surface: 232, 137, 209;
+  --cds-color-other-pink-line: 224, 120, 199;
+  --cds-color-other-pink-fill-hover: 172, 66, 150;
+  --cds-color-other-pink-fill: 122, 40, 105;
+  --cds-color-other-pink-content: 253, 230, 246;
+  --cds-color-other-lime-surface: 155, 178, 77;
+  --cds-color-other-lime-line: 141, 166, 59;
+  --cds-color-other-lime-fill-hover: 91, 116, 0;
+  --cds-color-other-lime-fill: 61, 79, 0;
+  --cds-color-other-lime-content: 235, 238, 216;
+  --cds-color-other-lemon-surface: 171, 174, 72;
+  --cds-color-other-lemon-line: 157, 162, 53;
+  --cds-color-other-lemon-fill-hover: 106, 113, 0;
+  --cds-color-other-lemon-fill: 72, 76, 1;
+  --cds-color-other-lemon-content: 238, 238, 217;
+  --cds-color-other-indigo-surface: 150, 164, 255;
+  --cds-color-other-indigo-line: 139, 149, 249;
+  --cds-color-other-indigo-fill-hover: 99, 98, 197;
+  --cds-color-other-indigo-fill: 64, 66, 141;
+  --cds-color-other-indigo-content: 235, 235, 255;
+  --cds-color-other-cyan-surface: 10, 190, 163;
+  --cds-color-other-cyan-line: 10, 176, 152;
+  --cds-color-other-cyan-fill-hover: 6, 122, 105;
+  --cds-color-other-cyan-fill: 0, 83, 72;
+  --cds-color-other-cyan-content: 213, 243, 235;
+  --cds-color-other-chocolate-surface: 212, 158, 109;
+  --cds-color-other-chocolate-line: 202, 145, 92;
+  --cds-color-other-chocolate-fill-hover: 152, 94, 31;
+  --cds-color-other-chocolate-fill: 110, 59, 1;
+  --cds-color-other-chocolate-content: 250, 234, 219;
+  --cds-color-line-tertiary-hover: 122, 128, 142;
+  --cds-color-line-tertiary: 86, 93, 103;
+  --cds-color-line-selected-hover: 146, 186, 254;
+  --cds-color-line-selected: 93, 157, 252;
+  --cds-color-line-secondary-hover: 152, 157, 168;
+  --cds-color-line-secondary: 122, 128, 142;
+  --cds-color-line-primary-hover: 181, 183, 192;
+  --cds-color-line-primary: 152, 157, 168;
+  --cds-color-line-focus-outline: 17, 89, 181;
+  --cds-color-line-focus: 93, 157, 252;
+  --cds-color-line-elevated: 130, 138, 151, 0.4;
+  --cds-color-line-disable: 102, 108, 121;
+  --cds-color-fill-selected-hover: 146, 186, 254;
+  --cds-color-fill-selected: 93, 157, 252;
+  --cds-color-fill-secondary-hover: 86, 93, 103;
+  --cds-color-fill-secondary-active: 102, 108, 121;
+  --cds-color-fill-secondary: 69, 73, 81;
+  --cds-color-fill-primary-hover: 69, 73, 81;
+  --cds-color-fill-primary-active: 86, 93, 103;
+  --cds-color-fill-primary: 39, 42, 48;
+  --cds-color-fill-elevated: 122, 128, 142;
+  --cds-color-fill-disable: 69, 73, 81;
+  --cds-color-content-tertiary: 181, 183, 192;
+  --cds-color-content-secondary: 207, 210, 215;
+  --cds-color-content-primary: 236, 236, 239;
+  --cds-color-content-placeholder: 165, 169, 178;
+  --cds-color-content-on-dark: 249, 249, 252;
+  --cds-color-content-link-visited: 192, 174, 248;
+  --cds-color-content-link: 146, 186, 254;
+  --cds-color-content-inverse: 26, 26, 26;
+  --cds-color-content-disable: 152, 157, 168;
+  --cds-color-brand-secondary-hover: 130, 40, 37;
+  --cds-color-brand-secondary-border: 165, 48, 47;
+  --cds-color-brand-secondary-active: 165, 48, 47;
+  --cds-color-brand-secondary: 76, 23, 21;
+  --cds-color-brand-primary-hover: 165, 48, 47;
+  --cds-color-brand-primary-content: 255, 210, 204;
+  --cds-color-brand-primary-border: 209, 88, 80;
+  --cds-color-brand-primary-active: 130, 40, 37;
+  --cds-color-brand-primary: 209, 88, 80;
+}