@sage/design-tokens 10.0.0 → 11.1.0

package/css/frozenproduct/all.css

@@ -11,6 +11,7 @@
   --global-borderwidth-m: 3px; /* Focus  */
   --global-borderwidth-l: 4px; /* Focus underline. Dividing lines.  */
   --global-borderwidth-xl: 6px; /* Double Focus Border */
+  --global-borderwidth-xxl: 8px;
   --global-radius-scale: 1px; /* We can override this to locally change the size of radius in the future if required. */
   --global-radius-none: 0; /* Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners). */
   --global-radius-circle: 999px; /* CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch,  */
@@ -198,6 +199,7 @@
   --modes-color-generic-fg-soft-light: #a6a6a6;
   --modes-color-generic-fg-moderate-light: #777;
   --modes-color-generic-fg-frozen-soft-light: #335B70; /* frozen progress tracker border */
+  --modes-color-generic-fg-ai-default-light: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
   --modes-color-generic-backdrop-nought-light: #FFFFFF; /* used on full page backgrounds */
   --modes-color-generic-backdrop-faint-light: #f6f8f9; /* used on full page backgrounds as an alternative option */
   --modes-color-interactive-ai-active-light: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
@@ -395,6 +397,7 @@
   --modes-color-generic-fg-soft-dark: #4b4b4b;
   --modes-color-generic-fg-moderate-dark: #777;
   --modes-color-generic-fg-frozen-soft-dark: #4b4b4b;
+  --modes-color-generic-fg-ai-default-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
   --modes-color-generic-backdrop-nought-dark: #000000; /* used on full page backgrounds */
   --modes-color-generic-backdrop-faint-dark: #181818; /* used on full page backgrounds as an alternative option */
   --modes-color-interactive-ai-active-dark: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
@@ -798,41 +801,10 @@
   --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
   --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
   --container-opacity-carousel-hidden: light-dark(var(--modes-color-modifiers-input-disabled-fg-light), var(--modes-color-modifiers-input-disabled-fg-dark)); /* opacity applied to next and previous carousel slides */
-  --container-color-ai-borderhorizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI dialog component */
-  --container-color-ai-bordervertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for dialog and insight bubbles. */
+  --container-color-ai-dialog-borderhorizontal: light-dark(var(--modes-color-generic-fg-ai-default-light), var(--modes-color-generic-fg-ai-default-dark)); /* top border for AI dialog component */
   --container-color-ai-nudge-border-ai-horizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI nudge message component */
   --container-color-ai-nudge-border-ai-vertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for AI nudge message component */
-  --container-color-calendar-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on calendar bg-default colors. */
-  --container-color-calendar-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
-  --container-color-calendar-blue-border-default: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
-  --container-color-calendar-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
-  --container-color-calendar-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
-  --container-color-calendar-teal-border-default: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
-  --container-color-calendar-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
-  --container-color-calendar-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
-  --container-color-calendar-green-border-default: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
-  --container-color-calendar-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
-  --container-color-calendar-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
-  --container-color-calendar-lime-border-default: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
-  --container-color-calendar-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
-  --container-color-calendar-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
-  --container-color-calendar-orange-border-default: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
-  --container-color-calendar-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
-  --container-color-calendar-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
-  --container-color-calendar-red-border-default: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
-  --container-color-calendar-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
-  --container-color-calendar-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
-  --container-color-calendar-pink-border-default: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
-  --container-color-calendar-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
-  --container-color-calendar-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
-  --container-color-calendar-purple-border-default: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
-  --container-color-calendar-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
-  --container-color-calendar-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
-  --container-color-calendar-slate-border-default: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
-  --container-color-calendar-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
-  --container-color-calendar-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
-  --container-color-calendar-gray-border-default: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
-  --container-color-calendar-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
+  --container-color-ai-tile-bordervertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left border for AI tiles and bubbles. */
   --container-color-interactive-bg-footer-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /*   */
   --container-color-interactive-border-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
   --container-color-interactive-bg-footer-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* tile footer bg color  */
@@ -855,7 +827,6 @@
   --container-typography-paragraph-m: var(--global-typography-component-moderate-m);
   --container-typography-paragraph-l: var(--global-typography-component-moderate-l);
   --container-color-blockquote-border: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
-  --container-color-calendar-label-alt: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark)); /* Accessible on calendar bg-alt colors. */
   --container-color-interactive-bg-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
   --container-color-interactive-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark)); /* Used for accordion hover backgrounds  */
   --container-color-interactive-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
@@ -870,7 +841,7 @@
   --container-color-standard-dimmer: light-dark(var(--modes-color-interactive-inactive-mask-light), var(--modes-color-interactive-inactive-mask-dark)); /* dimmed mask for dialogs */
   --container-color-standard-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
   --container-color-standard-text-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* for headings, paragraph text etc  */
-  --container-color-standard-statusborder-bg-ai: var(--container-color-ai-bordervertical);
+  --container-color-standard-statusborder-bg-ai: var(--container-color-ai-tile-bordervertical);
   --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
   --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
   --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -1069,7 +1040,7 @@
   --container-space-nudge-yg-l: var(--global-space-micro-xxl); /* Gap between message elements */
   --container-space-nudge-header-xg-m: var(--global-space-macro-xs); /* gap between header and ai logo */
   --container-space-nudge-header-xg-l: var(--global-space-macro-xs); /* gap between header and ai logo */
-  --container-borderwidth-a-igradient: var(--global-borderwidth-xl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
+  --container-borderwidth-a-igradient: var(--global-borderwidth-xxl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
   --container-borderwidth-dialog: var(--global-borderwidth-xs); /* Dialog */
   --container-borderwidth-divider: var(--global-borderwidth-xs); /* Divider */
   --container-borderwidth-drawer: var(--global-borderwidth-xs); /* Drawer */
@@ -1093,6 +1064,50 @@
   --container-borderwidth-nudge: var(--global-borderwidth-xl); /* nudge AI message borders  */
   --container-color-interactive-borderalt-hover: var(--container-color-interactive-border-alt); /* For hover border on Link preview. */
 
+  /* dataviz component tokens */
+  --dataviz-color-generic-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on colorpicker bg-default colors. */
+  --dataviz-color-generic-blue-bg-alt: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
+  --dataviz-color-generic-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
+  --dataviz-color-generic-blue-border: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
+  --dataviz-color-generic-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
+  --dataviz-color-generic-teal-bg-alt: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
+  --dataviz-color-generic-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
+  --dataviz-color-generic-teal-border: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
+  --dataviz-color-generic-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
+  --dataviz-color-generic-green-bg-alt: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
+  --dataviz-color-generic-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
+  --dataviz-color-generic-green-border: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
+  --dataviz-color-generic-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
+  --dataviz-color-generic-lime-bg-alt: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
+  --dataviz-color-generic-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
+  --dataviz-color-generic-lime-border: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
+  --dataviz-color-generic-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
+  --dataviz-color-generic-orange-bg-alt: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
+  --dataviz-color-generic-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
+  --dataviz-color-generic-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
+  --dataviz-color-generic-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
+  --dataviz-color-generic-red-bg-alt: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
+  --dataviz-color-generic-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
+  --dataviz-color-generic-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
+  --dataviz-color-generic-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
+  --dataviz-color-generic-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
+  --dataviz-color-generic-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
+  --dataviz-color-generic-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
+  --dataviz-color-generic-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
+  --dataviz-color-generic-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
+  --dataviz-color-generic-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
+  --dataviz-color-generic-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
+  --dataviz-color-generic-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
+  --dataviz-color-generic-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
+  --dataviz-color-generic-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
+  --dataviz-color-generic-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
+  --dataviz-color-generic-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
+  --dataviz-color-generic-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
+  --dataviz-color-generic-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
+  --dataviz-color-generic-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
+  --dataviz-color-generic-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
+  --dataviz-color-generic-label-alt: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark)); /* Accessible on colorpicker bg-alt colors. */
+
   /* focus component tokens */
   --focus-color-bg: light-dark(var(--modes-color-interactive-focus-with-default-alt-light), var(--modes-color-interactive-focus-with-default-alt-dark));
   --focus-color-borderalt: light-dark(var(--modes-color-interactive-focus-default-light), var(--modes-color-interactive-focus-default-dark));
@@ -1112,48 +1127,6 @@
   --form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
   --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
   --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected),  */
-  --form-color-colorpicker-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on colorpicker bg-default colors. */
-  --form-color-colorpicker-blue-bg-alt: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
-  --form-color-colorpicker-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
-  --form-color-colorpicker-blue-border: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
-  --form-color-colorpicker-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
-  --form-color-colorpicker-teal-bg-alt: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
-  --form-color-colorpicker-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
-  --form-color-colorpicker-teal-border: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
-  --form-color-colorpicker-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
-  --form-color-colorpicker-green-bg-alt: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
-  --form-color-colorpicker-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
-  --form-color-colorpicker-green-border: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
-  --form-color-colorpicker-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
-  --form-color-colorpicker-lime-bg-alt: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
-  --form-color-colorpicker-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
-  --form-color-colorpicker-lime-border: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
-  --form-color-colorpicker-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
-  --form-color-colorpicker-orange-bg-alt: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
-  --form-color-colorpicker-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
-  --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
-  --form-color-colorpicker-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
-  --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
-  --form-color-colorpicker-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
-  --form-color-colorpicker-red-bg-alt: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
-  --form-color-colorpicker-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
-  --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
-  --form-color-colorpicker-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
-  --form-color-colorpicker-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
-  --form-color-colorpicker-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
-  --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
-  --form-color-colorpicker-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
-  --form-color-colorpicker-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
-  --form-color-colorpicker-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
-  --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
-  --form-color-colorpicker-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
-  --form-color-colorpicker-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
-  --form-color-colorpicker-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
-  --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
-  --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
-  --form-color-colorpicker-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
-  --form-color-colorpicker-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
-  --form-color-colorpicker-slate-label-default: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
   --form-color-labelset-label-required: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
   --form-color-validation-border-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
   --form-color-validation-bar-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* error bar to left of inputs */
@@ -1171,7 +1144,6 @@
   --form-color-calendar-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark));
   --form-color-calendar-border-duration: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
   --form-color-calendar-text-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
-  --form-color-colorpicker-label-alt: light-dark(var(--modes-color-generic-content-nought-light), var(--modes-color-generic-content-nought-dark)); /* Accessible on colorpicker bg-alt colors. */
   --form-color-dropdown-label-hover: light-dark(var(--modes-color-interactive-monochrome-generic-with-hover-light), var(--modes-color-interactive-monochrome-generic-with-hover-dark));
   --form-color-typical-bg-default: light-dark(var(--modes-color-interactive-data-entry-default-light), var(--modes-color-interactive-data-entry-default-dark));
   --form-color-typical-bg-enabled: light-dark(var(--modes-color-interactive-data-entry-default-light), var(--modes-color-interactive-data-entry-default-dark));
@@ -1193,11 +1165,6 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
-  --form-space-colorpicker-x-m: var(--global-space-macro-m);
-  --form-space-colorpicker-xg-m: var(--global-space-macro-xs);
-  --form-space-colorpicker-y-m: var(--global-space-macro-m);
-  --form-space-colorpicker-yg-m: var(--global-space-macro-m);
-  --form-space-colorpicker-swatch-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* space between swatch and swatch label */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -1216,6 +1183,9 @@
   --form-space-dropdown-option-xg-s: var(--global-space-micro-xs); /* DD only. Space between optional icon, prefix, and label. */
   --form-space-dropdown-option-xg-m: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
   --form-space-dropdown-option-xg-l: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
+  --form-space-dropdown-option-colorpicker-xg-s: var(--global-space-micro-s); /* space on right of swatch */
+  --form-space-dropdown-option-colorpicker-xg-m: var(--global-space-micro-l); /* space on right of swatch */
+  --form-space-dropdown-option-colorpicker-xg-l: var(--global-space-micro-xxl); /* space on right of swatch */
   --form-space-dropdown-option-subtext-x-s: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
   --form-space-dropdown-option-subtext-x-m: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
   --form-space-dropdown-option-subtext-x-l: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
@@ -1315,9 +1285,9 @@
   --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
   --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
   --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
-  --form-size-colorpicker-swatch: var(--global-size-macro-s); /* width and height of color picker swatch  */
-  --form-size-colorpicker-swatchcontainer: calc(var(--global-size-macro-xxxl) + var(--global-size-micro-m)); /* width of swatch parent container */
-  --form-size-colorpicker-swatchselected: var(--global-size-macro-m)/2; /* selected swatch */
+  --form-size-dropdown-colorpicker-s: var(--global-size-macro-xs); /* Swatch size. */
+  --form-size-dropdown-colorpicker-m: var(--global-size-macro-xs); /* Swatch size. */
+  --form-size-dropdown-colorpicker-l: var(--global-size-macro-xs)+4; /* Swatch size. */
   --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
   --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
   --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */

package/css/frozenproduct/large/components/container.css

@@ -9,41 +9,10 @@
   --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
   --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
   --container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
-  --container-color-ai-borderhorizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI dialog component */
-  --container-color-ai-bordervertical: var(--modes-color-status-ai-default-vertical); /* left and right border for dialog and insight bubbles. */
+  --container-color-ai-dialog-borderhorizontal: var(--modes-color-generic-fg-ai-default); /* top border for AI dialog component */
   --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
   --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
-  --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
-  --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
-  --container-color-calendar-blue-border-default: var(--modes-color-colorcode-blue-deep);
-  --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-deep);
-  --container-color-calendar-teal-bg-default: var(--modes-color-colorcode-teal-muted);
-  --container-color-calendar-teal-border-default: var(--modes-color-colorcode-teal-deep);
-  --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-deep);
-  --container-color-calendar-green-bg-default: var(--modes-color-colorcode-green-muted);
-  --container-color-calendar-green-border-default: var(--modes-color-colorcode-green-deep);
-  --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-deep);
-  --container-color-calendar-lime-bg-default: var(--modes-color-colorcode-lime-muted);
-  --container-color-calendar-lime-border-default: var(--modes-color-colorcode-lime-deep);
-  --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-deep);
-  --container-color-calendar-orange-bg-default: var(--modes-color-colorcode-orange-muted);
-  --container-color-calendar-orange-border-default: var(--modes-color-colorcode-orange-deep);
-  --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-deep);
-  --container-color-calendar-red-bg-default: var(--modes-color-colorcode-red-muted);
-  --container-color-calendar-red-border-default: var(--modes-color-colorcode-red-deep);
-  --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-deep);
-  --container-color-calendar-pink-bg-default: var(--modes-color-colorcode-pink-muted);
-  --container-color-calendar-pink-border-default: var(--modes-color-colorcode-pink-deep);
-  --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-deep);
-  --container-color-calendar-purple-bg-default: var(--modes-color-colorcode-purple-muted);
-  --container-color-calendar-purple-border-default: var(--modes-color-colorcode-purple-deep);
-  --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-deep);
-  --container-color-calendar-slate-bg-default: var(--modes-color-colorcode-slate-muted);
-  --container-color-calendar-slate-border-default: var(--modes-color-colorcode-slate-deep);
-  --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-deep);
-  --container-color-calendar-gray-bg-default: var(--modes-color-colorcode-gray-muted);
-  --container-color-calendar-gray-border-default: var(--modes-color-colorcode-gray-deep);
-  --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-deep);
+  --container-color-ai-tile-bordervertical: var(--modes-color-status-ai-default-vertical); /* left border for AI tiles and bubbles. */
   --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /*   */
   --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
   --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color  */
@@ -75,7 +44,6 @@
   --container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
   --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
   --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
-  --container-color-calendar-label-alt: var(--modes-color-generic-content-nought); /* Accessible on calendar bg-alt colors. */
   --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
   --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds  */
   --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
@@ -90,7 +58,7 @@
   --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
   --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
   --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc  */
-  --container-color-standard-statusborder-bg-ai: var(--container-color-ai-bordervertical);
+  --container-color-standard-statusborder-bg-ai: var(--container-color-ai-tile-bordervertical);
   --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
   --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
   --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -289,7 +257,7 @@
   --container-space-nudge-yg-l: var(--global-space-micro-xxl); /* Gap between message elements */
   --container-space-nudge-header-xg-m: var(--global-space-macro-xs); /* gap between header and ai logo */
   --container-space-nudge-header-xg-l: var(--global-space-macro-xs); /* gap between header and ai logo */
-  --container-borderwidth-a-igradient: var(--global-borderwidth-xl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
+  --container-borderwidth-a-igradient: var(--global-borderwidth-xxl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
   --container-borderwidth-dialog: var(--global-borderwidth-xs); /* Dialog */
   --container-borderwidth-divider: var(--global-borderwidth-xs); /* Divider */
   --container-borderwidth-drawer: var(--global-borderwidth-xs); /* Drawer */

package/css/frozenproduct/large/components/dataviz.css

@@ -0,0 +1,48 @@
+/**
+ * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
+ */
+
+:root {
+  --dataviz-color-generic-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
+  --dataviz-color-generic-blue-bg-alt: var(--modes-color-colorcode-blue-deep);
+  --dataviz-color-generic-blue-bg-default: var(--modes-color-colorcode-blue-muted);
+  --dataviz-color-generic-blue-border: var(--modes-color-colorcode-blue-deep);
+  --dataviz-color-generic-blue-pattern: var(--modes-color-colorcode-blue-deep);
+  --dataviz-color-generic-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
+  --dataviz-color-generic-teal-bg-default: var(--modes-color-colorcode-teal-muted);
+  --dataviz-color-generic-teal-border: var(--modes-color-colorcode-teal-deep);
+  --dataviz-color-generic-teal-pattern: var(--modes-color-colorcode-teal-deep);
+  --dataviz-color-generic-green-bg-alt: var(--modes-color-colorcode-green-deep);
+  --dataviz-color-generic-green-bg-default: var(--modes-color-colorcode-green-muted);
+  --dataviz-color-generic-green-border: var(--modes-color-colorcode-green-deep);
+  --dataviz-color-generic-green-pattern: var(--modes-color-colorcode-green-deep);
+  --dataviz-color-generic-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
+  --dataviz-color-generic-lime-bg-default: var(--modes-color-colorcode-lime-muted);
+  --dataviz-color-generic-lime-border: var(--modes-color-colorcode-lime-deep);
+  --dataviz-color-generic-lime-pattern: var(--modes-color-colorcode-lime-deep);
+  --dataviz-color-generic-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
+  --dataviz-color-generic-orange-bg-default: var(--modes-color-colorcode-orange-muted);
+  --dataviz-color-generic-orange-border: var(--modes-color-colorcode-orange-deep);
+  --dataviz-color-generic-orange-pattern: var(--modes-color-colorcode-orange-deep);
+  --dataviz-color-generic-red-bg-alt: var(--modes-color-colorcode-red-deep);
+  --dataviz-color-generic-red-bg-default: var(--modes-color-colorcode-red-muted);
+  --dataviz-color-generic-red-border: var(--modes-color-colorcode-red-deep);
+  --dataviz-color-generic-red-pattern: var(--modes-color-colorcode-red-deep);
+  --dataviz-color-generic-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
+  --dataviz-color-generic-pink-bg-default: var(--modes-color-colorcode-pink-muted);
+  --dataviz-color-generic-pink-border: var(--modes-color-colorcode-pink-deep);
+  --dataviz-color-generic-pink-pattern: var(--modes-color-colorcode-pink-deep);
+  --dataviz-color-generic-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
+  --dataviz-color-generic-purple-bg-default: var(--modes-color-colorcode-purple-muted);
+  --dataviz-color-generic-purple-border: var(--modes-color-colorcode-purple-deep);
+  --dataviz-color-generic-purple-pattern: var(--modes-color-colorcode-purple-deep);
+  --dataviz-color-generic-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
+  --dataviz-color-generic-gray-bg-default: var(--modes-color-colorcode-gray-muted);
+  --dataviz-color-generic-gray-border: var(--modes-color-colorcode-gray-deep);
+  --dataviz-color-generic-gray-pattern: var(--modes-color-colorcode-gray-deep);
+  --dataviz-color-generic-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
+  --dataviz-color-generic-slate-bg-default: var(--modes-color-colorcode-slate-muted);
+  --dataviz-color-generic-slate-border: var(--modes-color-colorcode-slate-deep);
+  --dataviz-color-generic-slate-pattern: var(--modes-color-colorcode-slate-deep);
+  --dataviz-color-generic-label-alt: var(--modes-color-generic-content-nought); /* Accessible on colorpicker bg-alt colors. */
+}

package/css/frozenproduct/large/components/form.css

@@ -11,48 +11,6 @@
   --form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
   --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
   --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected),  */
-  --form-color-colorpicker-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
-  --form-color-colorpicker-blue-bg-alt: var(--modes-color-colorcode-blue-deep);
-  --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
-  --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-deep);
-  --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-deep);
-  --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
-  --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
-  --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-deep);
-  --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-deep);
-  --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-deep);
-  --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
-  --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-deep);
-  --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-deep);
-  --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
-  --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
-  --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-deep);
-  --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-deep);
-  --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
-  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
-  --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
-  --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
-  --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
-  --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
-  --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-deep);
-  --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
-  --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
-  --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
-  --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
-  --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
-  --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
-  --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
-  --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
-  --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
-  --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
-  --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
-  --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
-  --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
-  --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
-  --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
-  --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
-  --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-deep);
-  --form-color-colorpicker-slate-label-default: var(--modes-color-colorcode-slate-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
   --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
   --form-color-validation-border-error: var(--modes-color-status-negative-default);
   --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
@@ -76,7 +34,6 @@
   --form-color-calendar-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt);
   --form-color-calendar-border-duration: var(--modes-color-interactive-monochrome-generic-active);
   --form-color-calendar-text-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
-  --form-color-colorpicker-label-alt: var(--modes-color-generic-content-nought); /* Accessible on colorpicker bg-alt colors. */
   --form-color-dropdown-label-hover: var(--modes-color-interactive-monochrome-generic-with-hover);
   --form-color-typical-bg-default: var(--modes-color-interactive-data-entry-default);
   --form-color-typical-bg-enabled: var(--modes-color-interactive-data-entry-default);
@@ -98,11 +55,6 @@
   --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
   --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
-  --form-space-colorpicker-x-m: var(--global-space-macro-m);
-  --form-space-colorpicker-xg-m: var(--global-space-macro-xs);
-  --form-space-colorpicker-y-m: var(--global-space-macro-m);
-  --form-space-colorpicker-yg-m: var(--global-space-macro-m);
-  --form-space-colorpicker-swatch-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* space between swatch and swatch label */
   --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
   --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
@@ -121,6 +73,9 @@
   --form-space-dropdown-option-xg-s: var(--global-space-micro-xs); /* DD only. Space between optional icon, prefix, and label. */
   --form-space-dropdown-option-xg-m: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
   --form-space-dropdown-option-xg-l: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
+  --form-space-dropdown-option-colorpicker-xg-s: var(--global-space-micro-s); /* space on right of swatch */
+  --form-space-dropdown-option-colorpicker-xg-m: var(--global-space-micro-l); /* space on right of swatch */
+  --form-space-dropdown-option-colorpicker-xg-l: var(--global-space-micro-xxl); /* space on right of swatch */
   --form-space-dropdown-option-subtext-x-s: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
   --form-space-dropdown-option-subtext-x-m: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
   --form-space-dropdown-option-subtext-x-l: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
@@ -220,9 +175,9 @@
   --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
   --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
   --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
-  --form-size-colorpicker-swatch: var(--global-size-macro-s); /* width and height of color picker swatch  */
-  --form-size-colorpicker-swatchcontainer: calc(var(--global-size-macro-xxxl) + var(--global-size-micro-m)); /* width of swatch parent container */
-  --form-size-colorpicker-swatchselected: var(--global-size-macro-m)/2; /* selected swatch */
+  --form-size-dropdown-colorpicker-s: var(--global-size-macro-xs); /* Swatch size. */
+  --form-size-dropdown-colorpicker-m: var(--global-size-macro-xs); /* Swatch size. */
+  --form-size-dropdown-colorpicker-l: var(--global-size-macro-xs)+4; /* Swatch size. */
   --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
   --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
   --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */

package/css/frozenproduct/large/dark.css

@@ -56,6 +56,7 @@
   --modes-color-generic-fg-soft: #4b4b4b;
   --modes-color-generic-fg-moderate: #777;
   --modes-color-generic-fg-frozen-soft: #4b4b4b;
+  --modes-color-generic-fg-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
   --modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
   --modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
   --modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);

package/css/frozenproduct/large/global.css

@@ -10,6 +10,7 @@
   --global-borderwidth-m: 3px; /* Focus  */
   --global-borderwidth-l: 4px; /* Focus underline. Dividing lines.  */
   --global-borderwidth-xl: 6px; /* Double Focus Border */
+  --global-borderwidth-xxl: 8px;
   --global-radius-scale: 1px; /* We can override this to locally change the size of radius in the future if required. */
   --global-radius-none: 0; /* Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners). */
   --global-radius-circle: 999px; /* CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch,  */

package/css/frozenproduct/large/light.css

@@ -56,6 +56,7 @@
   --modes-color-generic-fg-soft: #a6a6a6;
   --modes-color-generic-fg-moderate: #777;
   --modes-color-generic-fg-frozen-soft: #335B70; /* frozen progress tracker border */
+  --modes-color-generic-fg-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
   --modes-color-generic-backdrop-nought: #FFFFFF; /* used on full page backgrounds */
   --modes-color-generic-backdrop-faint: #f6f8f9; /* used on full page backgrounds as an alternative option */
   --modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);

package/css/frozenproduct/small/components/container.css

@@ -9,41 +9,10 @@
   --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
   --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
   --container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
-  --container-color-ai-borderhorizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI dialog component */
-  --container-color-ai-bordervertical: var(--modes-color-status-ai-default-vertical); /* left and right border for dialog and insight bubbles. */
+  --container-color-ai-dialog-borderhorizontal: var(--modes-color-generic-fg-ai-default); /* top border for AI dialog component */
   --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
   --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
-  --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
-  --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
-  --container-color-calendar-blue-border-default: var(--modes-color-colorcode-blue-deep);
-  --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-deep);
-  --container-color-calendar-teal-bg-default: var(--modes-color-colorcode-teal-muted);
-  --container-color-calendar-teal-border-default: var(--modes-color-colorcode-teal-deep);
-  --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-deep);
-  --container-color-calendar-green-bg-default: var(--modes-color-colorcode-green-muted);
-  --container-color-calendar-green-border-default: var(--modes-color-colorcode-green-deep);
-  --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-deep);
-  --container-color-calendar-lime-bg-default: var(--modes-color-colorcode-lime-muted);
-  --container-color-calendar-lime-border-default: var(--modes-color-colorcode-lime-deep);
-  --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-deep);
-  --container-color-calendar-orange-bg-default: var(--modes-color-colorcode-orange-muted);
-  --container-color-calendar-orange-border-default: var(--modes-color-colorcode-orange-deep);
-  --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-deep);
-  --container-color-calendar-red-bg-default: var(--modes-color-colorcode-red-muted);
-  --container-color-calendar-red-border-default: var(--modes-color-colorcode-red-deep);
-  --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-deep);
-  --container-color-calendar-pink-bg-default: var(--modes-color-colorcode-pink-muted);
-  --container-color-calendar-pink-border-default: var(--modes-color-colorcode-pink-deep);
-  --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-deep);
-  --container-color-calendar-purple-bg-default: var(--modes-color-colorcode-purple-muted);
-  --container-color-calendar-purple-border-default: var(--modes-color-colorcode-purple-deep);
-  --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-deep);
-  --container-color-calendar-slate-bg-default: var(--modes-color-colorcode-slate-muted);
-  --container-color-calendar-slate-border-default: var(--modes-color-colorcode-slate-deep);
-  --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-deep);
-  --container-color-calendar-gray-bg-default: var(--modes-color-colorcode-gray-muted);
-  --container-color-calendar-gray-border-default: var(--modes-color-colorcode-gray-deep);
-  --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-deep);
+  --container-color-ai-tile-bordervertical: var(--modes-color-status-ai-default-vertical); /* left border for AI tiles and bubbles. */
   --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /*   */
   --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
   --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color  */
@@ -75,7 +44,6 @@
   --container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
   --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
   --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
-  --container-color-calendar-label-alt: var(--modes-color-generic-content-nought); /* Accessible on calendar bg-alt colors. */
   --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
   --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds  */
   --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
@@ -90,7 +58,7 @@
   --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
   --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
   --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc  */
-  --container-color-standard-statusborder-bg-ai: var(--container-color-ai-bordervertical);
+  --container-color-standard-statusborder-bg-ai: var(--container-color-ai-tile-bordervertical);
   --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
   --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
   --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -289,7 +257,7 @@
   --container-space-nudge-yg-l: var(--global-space-micro-xxl); /* Gap between message elements */
   --container-space-nudge-header-xg-m: var(--global-space-macro-xs); /* gap between header and ai logo */
   --container-space-nudge-header-xg-l: var(--global-space-macro-xs); /* gap between header and ai logo */
-  --container-borderwidth-a-igradient: var(--global-borderwidth-xl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
+  --container-borderwidth-a-igradient: var(--global-borderwidth-xxl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
   --container-borderwidth-dialog: var(--global-borderwidth-xs); /* Dialog */
   --container-borderwidth-divider: var(--global-borderwidth-xs); /* Divider */
   --container-borderwidth-drawer: var(--global-borderwidth-xs); /* Drawer */