@sage/design-tokens 8.2.0 → 8.4.0

package/css/product/small/components/container.css

@@ -9,16 +9,38 @@
   --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-standard-bg-default: var(--modes-color-generic-bg-nought);
   --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-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-interactive-detailedicon-bg: var(--modes-color-custom-default); /*   */
+  --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
+  --container-color-calendar-label-alt: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-alt colors. */
+  --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
+  --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-rich);
+  --container-color-calendar-teal-bg-default: var(--modes-color-colorcode-teal-muted);
+  --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-rich);
+  --container-color-calendar-green-bg-default: var(--modes-color-colorcode-green-muted);
+  --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-rich);
+  --container-color-calendar-lime-bg-default: var(--modes-color-colorcode-lime-muted);
+  --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-rich);
+  --container-color-calendar-orange-bg-default: var(--modes-color-colorcode-orange-muted);
+  --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-rich);
+  --container-color-calendar-red-bg-default: var(--modes-color-colorcode-red-muted);
+  --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-rich);
+  --container-color-calendar-pink-bg-default: var(--modes-color-colorcode-pink-muted);
+  --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-rich);
+  --container-color-calendar-purple-bg-default: var(--modes-color-colorcode-purple-muted);
+  --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-rich);
+  --container-color-calendar-slate-bg-default: var(--modes-color-colorcode-slate-muted);
+  --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-rich);
+  --container-color-calendar-gray-bg-default: var(--modes-color-colorcode-gray-muted);
+  --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-rich);
   --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  */
   --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
+  --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /*   */
+  --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
   --container-typography-adaptive-heading-m: var(--global-typography-adaptive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
   --container-typography-adaptive-heading-l: var(--global-typography-adaptive-heading-m); /* Dialog, drawer and sidebar headings */
   --container-typography-adaptive-subheading-m: var(--global-typography-adaptive-subheading-m); /* Accordion subheading,  Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -37,13 +59,7 @@
   --container-typography-responsive-paragraph-s: var(--global-typography-responsive-component-moderate-s);
   --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-standard-bg-alt: var(--modes-color-generic-bg-faint);
-  --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color  */
-  --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
-  --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-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
+  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
   --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);
@@ -51,7 +67,13 @@
   --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
   --container-color-interactive-text-enabled: var(--modes-color-generic-content-harsh); /* Enabled label for standard accordion. */
   --container-color-interactive-text-alt-enabled: var(--modes-color-generic-content-moderate); /* Enabled label for subtle accordion. */
-  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
+  --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
+  --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
+  --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color  */
+  --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
+  --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-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) */
@@ -62,10 +84,6 @@
   --container-boxshadow-sidebar: var(--global-boxshadow-container-distant); /* Sidebar */
   --container-boxshadow-stickyfooter: var(--global-boxshadow-container-sticky-footer); /* Sticky footer in Dialog, Drawer, Sidebar. */
   --container-boxshadow-nudge: var(--global-boxshadow-container-far); /* nudge shadow */
-  --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
-  --container-color-standard-border-default: var(--modes-color-generic-fg-faint);
-  --container-color-standard-icon: var(--modes-color-generic-fg-moderate); /* Link preview image thumbnail */
-  --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
   --container-color-interactive-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
   --container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview.  */
   --container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
@@ -77,6 +95,10 @@
   --container-color-interactive-label-footer-activated: var(--modes-color-interactive-monochrome-generic-with-active);
   --container-color-interactive-text-disabled: var(--modes-color-interactive-inactive-content);
   --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
+  --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
+  --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
+  --container-color-standard-border-default: var(--modes-color-generic-fg-faint);
+  --container-color-standard-icon: var(--modes-color-generic-fg-moderate); /* Link preview image thumbnail */
   --container-size-none: var(--global-size-none);
   --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
   --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */

package/css/product/small/components/form.css

@@ -11,6 +11,58 @@
   --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-label-alt: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-alt colors. */
+  --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-rich);
+  --form-color-colorpicker-blue-bg-alt: var(--modes-color-colorcode-blue-rich);
+  --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
+  --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-rich);
+  --form-color-colorpicker-blue-label-default: var(--modes-color-colorcode-blue-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-rich);
+  --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-rich);
+  --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
+  --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-rich);
+  --form-color-colorpicker-teal-label-default: var(--modes-color-colorcode-teal-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-rich);
+  --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-rich);
+  --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
+  --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-rich);
+  --form-color-colorpicker-green-label-default: var(--modes-color-colorcode-green-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-rich);
+  --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-rich);
+  --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
+  --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-rich);
+  --form-color-colorpicker-lime-label-default: var(--modes-color-colorcode-lime-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-rich);
+  --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-rich);
+  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
+  --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-rich);
+  --form-color-colorpicker-orange-label-default: var(--modes-color-colorcode-orange-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-rich);
+  --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-rich);
+  --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
+  --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-rich);
+  --form-color-colorpicker-red-label-default: var(--modes-color-colorcode-red-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-rich);
+  --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-rich);
+  --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
+  --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-rich);
+  --form-color-colorpicker-pink-label-default: var(--modes-color-colorcode-pink-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-rich);
+  --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-rich);
+  --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
+  --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-rich);
+  --form-color-colorpicker-purple-label-default: var(--modes-color-colorcode-purple-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-rich);
+  --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-rich);
+  --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
+  --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-rich);
+  --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-colorpicker-gray-border: var(--modes-color-colorcode-gray-rich);
+  --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-rich);
+  --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
+  --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-rich);
+  --form-color-colorpicker-gray-label-default: var(--modes-color-colorcode-gray-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 */

package/css/product/small/components/tab.css

@@ -38,6 +38,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: var(--modes-color-interactive-monochrome-generic-with-active);
+  --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
   --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
   --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
   --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
@@ -50,6 +51,7 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 }

package/css/product/small/dark.css

@@ -12,6 +12,36 @@
   --modes-color-brand-copilot-no-bg-monochrome: #FFFFFF;
   --modes-color-custom-default: #00D639; /* This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs. */
   --modes-color-custom-frozen: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
+  --modes-color-colorcode-blue-deep: #007FD9;
+  --modes-color-colorcode-blue-muted: #00293F;
+  --modes-color-colorcode-blue-rich: #0071c3;
+  --modes-color-colorcode-teal-deep: #008A89;
+  --modes-color-colorcode-teal-muted: #002B2A;
+  --modes-color-colorcode-teal-rich: #007C7B;
+  --modes-color-colorcode-green-deep: #009023;
+  --modes-color-colorcode-green-muted: #002D05;
+  --modes-color-colorcode-green-rich: #00811F;
+  --modes-color-colorcode-lime-deep: #6E8500;
+  --modes-color-colorcode-lime-muted: #171e00;
+  --modes-color-colorcode-lime-rich: #637700;
+  --modes-color-colorcode-orange-deep: #DB4B00;
+  --modes-color-colorcode-orange-muted: #380D00;
+  --modes-color-colorcode-orange-rich: #C54300;
+  --modes-color-colorcode-red-deep: #F50058;
+  --modes-color-colorcode-red-muted: #400011;
+  --modes-color-colorcode-red-rich: #DC004E;
+  --modes-color-colorcode-pink-deep: #DD2BAB;
+  --modes-color-colorcode-pink-muted: #3C002C;
+  --modes-color-colorcode-pink-rich: #C8269A;
+  --modes-color-colorcode-purple-deep: #985FDC;
+  --modes-color-colorcode-purple-muted: #270E41;
+  --modes-color-colorcode-purple-rich: #8F4CD7;
+  --modes-color-colorcode-slate-deep: #5C8196;
+  --modes-color-colorcode-slate-muted: #121D23;
+  --modes-color-colorcode-slate-rich: #527386;
+  --modes-color-colorcode-gray-deep: #7C7C7C;
+  --modes-color-colorcode-gray-muted: #1b1b1b;
+  --modes-color-colorcode-gray-rich: #6F6F6F;
   --modes-color-generic-bg-nought: #000000;
   --modes-color-generic-bg-faint: #0e0e0e;
   --modes-color-generic-bg-delicate: #181818;

package/css/product/small/light.css

@@ -12,6 +12,36 @@
   --modes-color-brand-copilot-no-bg-monochrome: #000000;
   --modes-color-custom-default: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg.  */
   --modes-color-custom-frozen: #008046; /* This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
+  --modes-color-colorcode-blue-deep: #0071c3;
+  --modes-color-colorcode-blue-muted: #CDE5FF;
+  --modes-color-colorcode-blue-rich: #0084E1;
+  --modes-color-colorcode-teal-deep: #007C7B;
+  --modes-color-colorcode-teal-muted: #C1FBFB;
+  --modes-color-colorcode-teal-rich: #009B99;
+  --modes-color-colorcode-green-deep: #00811F;
+  --modes-color-colorcode-green-muted: #C5FFC9;
+  --modes-color-colorcode-green-rich: #00a128;
+  --modes-color-colorcode-lime-deep: #637700;
+  --modes-color-colorcode-lime-muted: #FFFF9C;
+  --modes-color-colorcode-lime-rich: #819B00;
+  --modes-color-colorcode-orange-deep: #C54300;
+  --modes-color-colorcode-orange-muted: #FEEAB0;
+  --modes-color-colorcode-orange-rich: #EA5100;
+  --modes-color-colorcode-red-deep: #DC004E;
+  --modes-color-colorcode-red-muted: #FFDBCF;
+  --modes-color-colorcode-red-rich: #FE005B;
+  --modes-color-colorcode-pink-deep: #C8269A;
+  --modes-color-colorcode-pink-muted: #FFD7EE;
+  --modes-color-colorcode-pink-rich: #e62db2;
+  --modes-color-colorcode-purple-deep: #8F4CD7;
+  --modes-color-colorcode-purple-muted: #E7DEF8;
+  --modes-color-colorcode-purple-rich: #9C66DE;
+  --modes-color-colorcode-slate-deep: #527386;
+  --modes-color-colorcode-slate-muted: #D4E5F1;
+  --modes-color-colorcode-slate-rich: #60869C;
+  --modes-color-colorcode-gray-deep: #6F6F6F;
+  --modes-color-colorcode-gray-muted: #E2E2E2;
+  --modes-color-colorcode-gray-rich: #9b9b9b;
   --modes-color-generic-bg-nought: #FFFFFF;
   --modes-color-generic-bg-faint: #f3f3f3;
   --modes-color-generic-bg-delicate: #e8e8e8;

package/ios/frozenproduct/large/dark/components/badge.h

@@ -11,6 +11,7 @@
 
 #define badgeColorNotificationBorderDefault #000000
 #define badgeColorNotificationBgDefault #E13E53
+#define badgeColorNotificationBgAlt #007ED9
 #define badgeColorNotificationLabelDefault #000000
 #define badgeSizeMicroDot 8
 #define badgeSizeMicroNumberedMin 16

package/ios/frozenproduct/large/dark/components/container.h

@@ -9,23 +9,33 @@
 #import <Foundation/Foundation.h>
 #import <UIKit/UIKit.h>
 
-#define containerColorStandardBgAlt #0e0e0e
-#define containerColorStandardBgDefault #000000
-#define containerColorStandardBgFooterDefault #0e0e0e
-#define containerColorStandardBorderActive #FFFFFF
-#define containerColorStandardBorderAlt #4b4b4b
-#define containerColorStandardBorderDefault #181818
-#define containerColorStandardDimmer #FFFFFF
-#define containerColorStandardIcon #777
-#define containerColorStandardTextAlt #ffffff8c
-#define containerColorStandardTextDefault #fffffff2
 #define containerColorAiBorderhorizontal linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)
 #define containerColorAiBordervertical linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)
 #define containerColorAiNudgeBorderAiHorizontal linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)
 #define containerColorAiNudgeBorderAiVertical linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)
-#define containerColorScrollbarBgDefault #0e0e0e
-#define containerColorScrollbarFgDefault #777
-#define containerColorInteractiveDetailediconBg #00D639
+#define containerColorBlockquoteBorder #00D639
+#define containerColorCalendarLabelDefault #FFFFFF
+#define containerColorCalendarLabelAlt #FFFFFF
+#define containerColorCalendarBlueBgDefault #00293F
+#define containerColorCalendarBluePattern #0071c3
+#define containerColorCalendarTealBgDefault #002B2A
+#define containerColorCalendarTealPattern #007C7B
+#define containerColorCalendarGreenBgDefault #002D05
+#define containerColorCalendarGreenPattern #00811F
+#define containerColorCalendarLimeBgDefault #171e00
+#define containerColorCalendarLimePattern #637700
+#define containerColorCalendarOrangeBgDefault #380D00
+#define containerColorCalendarOrangePattern #C54300
+#define containerColorCalendarRedBgDefault #400011
+#define containerColorCalendarRedPattern #DC004E
+#define containerColorCalendarPinkBgDefault #3C002C
+#define containerColorCalendarPinkPattern #C8269A
+#define containerColorCalendarPurpleBgDefault #270E41
+#define containerColorCalendarPurplePattern #8F4CD7
+#define containerColorCalendarSlateBgDefault #121D23
+#define containerColorCalendarSlatePattern #527386
+#define containerColorCalendarGrayBgDefault #1b1b1b
+#define containerColorCalendarGrayPattern #6F6F6F
 #define containerColorInteractiveBgFooterActivated #009023
 #define containerColorInteractiveBgFooterActive #FFFFFF
 #define containerColorInteractiveBorderActivated #009023
@@ -49,7 +59,19 @@
 #define containerColorInteractiveTextEnabled #fffffff2
 #define containerColorInteractiveTextAltEnabled #ffffff8c
 #define containerColorInteractiveTextHover #ffffffe6
-#define containerColorBlockquoteBorder #00D639
+#define containerColorInteractiveDetailediconBg #00D639
+#define containerColorScrollbarBgDefault #0e0e0e
+#define containerColorScrollbarFgDefault #777
+#define containerColorStandardBgAlt #0e0e0e
+#define containerColorStandardBgDefault #000000
+#define containerColorStandardBgFooterDefault #0e0e0e
+#define containerColorStandardBorderActive #FFFFFF
+#define containerColorStandardBorderAlt #4b4b4b
+#define containerColorStandardBorderDefault #181818
+#define containerColorStandardDimmer #FFFFFF
+#define containerColorStandardIcon #777
+#define containerColorStandardTextAlt #ffffff8c
+#define containerColorStandardTextDefault #fffffff2
 #define containerSizeNone 0
 #define containerSizeAccordionstandardChevron 20
 #define containerSizeQuotebarWidth 8

package/ios/frozenproduct/large/dark/components/form.h

@@ -202,6 +202,58 @@
 #define formColorCalendarTextEnabled #fffffff2
 #define formColorCalendarTextHover #FFFFFF
 #define formColorCalendarTextAltEnabled #ffffff8c
+#define formColorColorpickerLabelDefault #FFFFFF
+#define formColorColorpickerLabelAlt #FFFFFF
+#define formColorColorpickerBlueBorder #0071c3
+#define formColorColorpickerBlueBgAlt #0071c3
+#define formColorColorpickerBlueBgDefault #00293F
+#define formColorColorpickerBluePattern #0071c3
+#define formColorColorpickerBlueLabelDefault #007FD9
+#define formColorColorpickerTealBorder #007C7B
+#define formColorColorpickerTealBgAlt #007C7B
+#define formColorColorpickerTealBgDefault #002B2A
+#define formColorColorpickerTealPattern #007C7B
+#define formColorColorpickerTealLabelDefault #008A89
+#define formColorColorpickerGreenBorder #00811F
+#define formColorColorpickerGreenBgAlt #00811F
+#define formColorColorpickerGreenBgDefault #002D05
+#define formColorColorpickerGreenPattern #00811F
+#define formColorColorpickerGreenLabelDefault #009023
+#define formColorColorpickerLimeBorder #637700
+#define formColorColorpickerLimeBgAlt #637700
+#define formColorColorpickerLimeBgDefault #171e00
+#define formColorColorpickerLimePattern #637700
+#define formColorColorpickerLimeLabelDefault #6E8500
+#define formColorColorpickerOrangeBorder #C54300
+#define formColorColorpickerOrangeBgAlt #C54300
+#define formColorColorpickerOrangeBgDefault #380D00
+#define formColorColorpickerOrangePattern #C54300
+#define formColorColorpickerOrangeLabelDefault #DB4B00
+#define formColorColorpickerRedBorder #DC004E
+#define formColorColorpickerRedBgAlt #DC004E
+#define formColorColorpickerRedBgDefault #400011
+#define formColorColorpickerRedPattern #DC004E
+#define formColorColorpickerRedLabelDefault #F50058
+#define formColorColorpickerPinkBorder #C8269A
+#define formColorColorpickerPinkBgAlt #C8269A
+#define formColorColorpickerPinkBgDefault #3C002C
+#define formColorColorpickerPinkPattern #C8269A
+#define formColorColorpickerPinkLabelDefault #DD2BAB
+#define formColorColorpickerPurpleBorder #8F4CD7
+#define formColorColorpickerPurpleBgAlt #8F4CD7
+#define formColorColorpickerPurpleBgDefault #270E41
+#define formColorColorpickerPurplePattern #8F4CD7
+#define formColorColorpickerPurpleLabelDefault #985FDC
+#define formColorColorpickerSlateBorder #527386
+#define formColorColorpickerSlateBgAlt #527386
+#define formColorColorpickerSlateBgDefault #121D23
+#define formColorColorpickerSlatePattern #527386
+#define formColorColorpickerSlateLabelDefault #5C8196
+#define formColorColorpickerGrayBorder #6F6F6F
+#define formColorColorpickerGrayBgAlt #6F6F6F
+#define formColorColorpickerGrayBgDefault #1b1b1b
+#define formColorColorpickerGrayPattern #6F6F6F
+#define formColorColorpickerGrayLabelDefault #7C7C7C
 #define formColorDropdownBgHover #ffffff14
 #define formColorDropdownLabelActive #000000
 #define formColorDropdownLabelAlt #ffffffe6

package/ios/frozenproduct/large/dark/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #000000
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #ffffff14
+#define tabColorBorderActivealt #282828
 #define tabColorBorderActive #FFFFFF
 #define tabColorBorderEnabled #282828
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/frozenproduct/large/dark/mode.h

@@ -18,6 +18,36 @@
 #define modesColorBrandCopilotNoBgMonochrome #FFFFFF
 #define modesColorCustomDefault #00D639
 #define modesColorCustomFrozen #00D639
+#define modesColorColorcodeBlueDeep #007FD9
+#define modesColorColorcodeBlueMuted #00293F
+#define modesColorColorcodeBlueRich #0071c3
+#define modesColorColorcodeTealDeep #008A89
+#define modesColorColorcodeTealMuted #002B2A
+#define modesColorColorcodeTealRich #007C7B
+#define modesColorColorcodeGreenDeep #009023
+#define modesColorColorcodeGreenMuted #002D05
+#define modesColorColorcodeGreenRich #00811F
+#define modesColorColorcodeLimeDeep #6E8500
+#define modesColorColorcodeLimeMuted #171e00
+#define modesColorColorcodeLimeRich #637700
+#define modesColorColorcodeOrangeDeep #DB4B00
+#define modesColorColorcodeOrangeMuted #380D00
+#define modesColorColorcodeOrangeRich #C54300
+#define modesColorColorcodeRedDeep #F50058
+#define modesColorColorcodeRedMuted #400011
+#define modesColorColorcodeRedRich #DC004E
+#define modesColorColorcodePinkDeep #DD2BAB
+#define modesColorColorcodePinkMuted #3C002C
+#define modesColorColorcodePinkRich #C8269A
+#define modesColorColorcodePurpleDeep #985FDC
+#define modesColorColorcodePurpleMuted #270E41
+#define modesColorColorcodePurpleRich #8F4CD7
+#define modesColorColorcodeSlateDeep #5C8196
+#define modesColorColorcodeSlateMuted #121D23
+#define modesColorColorcodeSlateRich #527386
+#define modesColorColorcodeGrayDeep #7C7C7C
+#define modesColorColorcodeGrayMuted #1b1b1b
+#define modesColorColorcodeGrayRich #6F6F6F
 #define modesColorGenericBgNought #000000
 #define modesColorGenericBgFaint #0e0e0e
 #define modesColorGenericBgDelicate #181818

package/ios/frozenproduct/large/light/components/badge.h

@@ -11,6 +11,7 @@
 
 #define badgeColorNotificationBorderDefault #FFFFFF
 #define badgeColorNotificationBgDefault #CD384B
+#define badgeColorNotificationBgAlt #0060A7
 #define badgeColorNotificationLabelDefault #FFFFFF
 #define badgeSizeMicroDot 8
 #define badgeSizeMicroNumberedMin 16

package/ios/frozenproduct/large/light/components/container.h

@@ -9,23 +9,33 @@
 #import <Foundation/Foundation.h>
 #import <UIKit/UIKit.h>
 
-#define containerColorStandardBgAlt #f3f3f3
-#define containerColorStandardBgDefault #FFFFFF
-#define containerColorStandardBgFooterDefault #f3f3f3
-#define containerColorStandardBorderActive #000000
-#define containerColorStandardBorderAlt #a6a6a6
-#define containerColorStandardBorderDefault #e8e8e8
-#define containerColorStandardDimmer #000000
-#define containerColorStandardIcon #777
-#define containerColorStandardTextAlt #0000008c
-#define containerColorStandardTextDefault #000000f2
 #define containerColorAiBorderhorizontal linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%)
 #define containerColorAiBordervertical linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%)
 #define containerColorAiNudgeBorderAiHorizontal linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%)
 #define containerColorAiNudgeBorderAiVertical linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%)
-#define containerColorScrollbarBgDefault #f3f3f3
-#define containerColorScrollbarFgDefault #777
-#define containerColorInteractiveDetailediconBg #00811F
+#define containerColorBlockquoteBorder #00811F
+#define containerColorCalendarLabelDefault #000000
+#define containerColorCalendarLabelAlt #000000
+#define containerColorCalendarBlueBgDefault #CDE5FF
+#define containerColorCalendarBluePattern #0084E1
+#define containerColorCalendarTealBgDefault #C1FBFB
+#define containerColorCalendarTealPattern #009B99
+#define containerColorCalendarGreenBgDefault #C5FFC9
+#define containerColorCalendarGreenPattern #00a128
+#define containerColorCalendarLimeBgDefault #FFFF9C
+#define containerColorCalendarLimePattern #819B00
+#define containerColorCalendarOrangeBgDefault #FEEAB0
+#define containerColorCalendarOrangePattern #EA5100
+#define containerColorCalendarRedBgDefault #FFDBCF
+#define containerColorCalendarRedPattern #FE005B
+#define containerColorCalendarPinkBgDefault #FFD7EE
+#define containerColorCalendarPinkPattern #e62db2
+#define containerColorCalendarPurpleBgDefault #E7DEF8
+#define containerColorCalendarPurplePattern #9C66DE
+#define containerColorCalendarSlateBgDefault #D4E5F1
+#define containerColorCalendarSlatePattern #60869C
+#define containerColorCalendarGrayBgDefault #E2E2E2
+#define containerColorCalendarGrayPattern #9b9b9b
 #define containerColorInteractiveBgFooterActivated #00811F
 #define containerColorInteractiveBgFooterActive #000000
 #define containerColorInteractiveBorderActivated #00811F
@@ -49,7 +59,19 @@
 #define containerColorInteractiveTextEnabled #000000f2
 #define containerColorInteractiveTextAltEnabled #0000008c
 #define containerColorInteractiveTextHover #000000e6
-#define containerColorBlockquoteBorder #00811F
+#define containerColorInteractiveDetailediconBg #00811F
+#define containerColorScrollbarBgDefault #f3f3f3
+#define containerColorScrollbarFgDefault #777
+#define containerColorStandardBgAlt #f3f3f3
+#define containerColorStandardBgDefault #FFFFFF
+#define containerColorStandardBgFooterDefault #f3f3f3
+#define containerColorStandardBorderActive #000000
+#define containerColorStandardBorderAlt #a6a6a6
+#define containerColorStandardBorderDefault #e8e8e8
+#define containerColorStandardDimmer #000000
+#define containerColorStandardIcon #777
+#define containerColorStandardTextAlt #0000008c
+#define containerColorStandardTextDefault #000000f2
 #define containerSizeNone 0
 #define containerSizeAccordionstandardChevron 20
 #define containerSizeQuotebarWidth 8

package/ios/frozenproduct/large/light/components/form.h

@@ -202,6 +202,58 @@
 #define formColorCalendarTextEnabled #000000f2
 #define formColorCalendarTextHover #000000
 #define formColorCalendarTextAltEnabled #0000008c
+#define formColorColorpickerLabelDefault #000000
+#define formColorColorpickerLabelAlt #000000
+#define formColorColorpickerBlueBorder #0084E1
+#define formColorColorpickerBlueBgAlt #0084E1
+#define formColorColorpickerBlueBgDefault #CDE5FF
+#define formColorColorpickerBluePattern #0084E1
+#define formColorColorpickerBlueLabelDefault #0071c3
+#define formColorColorpickerTealBorder #009B99
+#define formColorColorpickerTealBgAlt #009B99
+#define formColorColorpickerTealBgDefault #C1FBFB
+#define formColorColorpickerTealPattern #009B99
+#define formColorColorpickerTealLabelDefault #007C7B
+#define formColorColorpickerGreenBorder #00a128
+#define formColorColorpickerGreenBgAlt #00a128
+#define formColorColorpickerGreenBgDefault #C5FFC9
+#define formColorColorpickerGreenPattern #00a128
+#define formColorColorpickerGreenLabelDefault #00811F
+#define formColorColorpickerLimeBorder #819B00
+#define formColorColorpickerLimeBgAlt #819B00
+#define formColorColorpickerLimeBgDefault #FFFF9C
+#define formColorColorpickerLimePattern #819B00
+#define formColorColorpickerLimeLabelDefault #637700
+#define formColorColorpickerOrangeBorder #EA5100
+#define formColorColorpickerOrangeBgAlt #EA5100
+#define formColorColorpickerOrangeBgDefault #FEEAB0
+#define formColorColorpickerOrangePattern #EA5100
+#define formColorColorpickerOrangeLabelDefault #C54300
+#define formColorColorpickerRedBorder #FE005B
+#define formColorColorpickerRedBgAlt #FE005B
+#define formColorColorpickerRedBgDefault #FFDBCF
+#define formColorColorpickerRedPattern #FE005B
+#define formColorColorpickerRedLabelDefault #DC004E
+#define formColorColorpickerPinkBorder #e62db2
+#define formColorColorpickerPinkBgAlt #e62db2
+#define formColorColorpickerPinkBgDefault #FFD7EE
+#define formColorColorpickerPinkPattern #e62db2
+#define formColorColorpickerPinkLabelDefault #C8269A
+#define formColorColorpickerPurpleBorder #9C66DE
+#define formColorColorpickerPurpleBgAlt #9C66DE
+#define formColorColorpickerPurpleBgDefault #E7DEF8
+#define formColorColorpickerPurplePattern #9C66DE
+#define formColorColorpickerPurpleLabelDefault #8F4CD7
+#define formColorColorpickerSlateBorder #60869C
+#define formColorColorpickerSlateBgAlt #60869C
+#define formColorColorpickerSlateBgDefault #D4E5F1
+#define formColorColorpickerSlatePattern #60869C
+#define formColorColorpickerSlateLabelDefault #527386
+#define formColorColorpickerGrayBorder #9b9b9b
+#define formColorColorpickerGrayBgAlt #9b9b9b
+#define formColorColorpickerGrayBgDefault #E2E2E2
+#define formColorColorpickerGrayPattern #9b9b9b
+#define formColorColorpickerGrayLabelDefault #6F6F6F
 #define formColorDropdownBgHover #00000014
 #define formColorDropdownLabelActive #FFFFFF
 #define formColorDropdownLabelAlt #000000e6

package/ios/frozenproduct/large/light/components/tab.h

@@ -27,6 +27,7 @@
 #define tabColorBgActive #FFFFFF
 #define tabColorBgEnabled #fff0
 #define tabColorBgHover #00000014
+#define tabColorBorderActivealt #d1d1d1
 #define tabColorBorderActive #000000
 #define tabColorBorderEnabled #d1d1d1
 #define tabColorBorderHover #777
@@ -52,6 +53,7 @@
 #define tabRadiusNone 0
 #define tabBorderwidthNavigationBottom 2
 #define tabBorderwidthNavigationSide 2
+#define tabBorderwidthNavigationTop 2
 #define tabTypographyAdaptiveLabelS [object Object]
 #define tabTypographyAdaptiveLabelM [object Object]
 #define tabTypographyAdaptiveLabelL [object Object]

package/ios/frozenproduct/large/light/mode.h

@@ -18,6 +18,36 @@
 #define modesColorBrandCopilotNoBgMonochrome #000000
 #define modesColorCustomDefault #00811F
 #define modesColorCustomFrozen #008046
+#define modesColorColorcodeBlueDeep #0071c3
+#define modesColorColorcodeBlueMuted #CDE5FF
+#define modesColorColorcodeBlueRich #0084E1
+#define modesColorColorcodeTealDeep #007C7B
+#define modesColorColorcodeTealMuted #C1FBFB
+#define modesColorColorcodeTealRich #009B99
+#define modesColorColorcodeGreenDeep #00811F
+#define modesColorColorcodeGreenMuted #C5FFC9
+#define modesColorColorcodeGreenRich #00a128
+#define modesColorColorcodeLimeDeep #637700
+#define modesColorColorcodeLimeMuted #FFFF9C
+#define modesColorColorcodeLimeRich #819B00
+#define modesColorColorcodeOrangeDeep #C54300
+#define modesColorColorcodeOrangeMuted #FEEAB0
+#define modesColorColorcodeOrangeRich #EA5100
+#define modesColorColorcodeRedDeep #DC004E
+#define modesColorColorcodeRedMuted #FFDBCF
+#define modesColorColorcodeRedRich #FE005B
+#define modesColorColorcodePinkDeep #C8269A
+#define modesColorColorcodePinkMuted #FFD7EE
+#define modesColorColorcodePinkRich #e62db2
+#define modesColorColorcodePurpleDeep #8F4CD7
+#define modesColorColorcodePurpleMuted #E7DEF8
+#define modesColorColorcodePurpleRich #9C66DE
+#define modesColorColorcodeSlateDeep #527386
+#define modesColorColorcodeSlateMuted #D4E5F1
+#define modesColorColorcodeSlateRich #60869C
+#define modesColorColorcodeGrayDeep #6F6F6F
+#define modesColorColorcodeGrayMuted #E2E2E2
+#define modesColorColorcodeGrayRich #9b9b9b
 #define modesColorGenericBgNought #FFFFFF
 #define modesColorGenericBgFaint #f3f3f3
 #define modesColorGenericBgDelicate #e8e8e8

package/ios/frozenproduct/small/dark/components/badge.h

@@ -11,6 +11,7 @@
 
 #define badgeColorNotificationBorderDefault #000000
 #define badgeColorNotificationBgDefault #E13E53
+#define badgeColorNotificationBgAlt #007ED9
 #define badgeColorNotificationLabelDefault #000000
 #define badgeSizeMicroDot 8
 #define badgeSizeMicroNumberedMin 16