@nectary/theme-base - npm Package Compare versions

Comparing version 0.5.1 to 1.0.0

comp/accordion.css

@@ -5,7 +5,7 @@ .nectary-theme-base {
   --sinch-comp-accordion-color-default-optional-text-initial: var(--sinch-sys-color-text-muted);
-  --sinch-comp-accordion-color-default-outline-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-accordion-color-default-status-error: var(--sinch-sys-color-feedback-invalid-contrast);
-  --sinch-comp-accordion-color-default-status-info: var(--sinch-sys-color-feedback-info-contrast);
-  --sinch-comp-accordion-color-default-status-success: var(--sinch-sys-color-feedback-success-contrast);
-  --sinch-comp-accordion-color-default-status-warning: var(--sinch-sys-color-feedback-warning-contrast);
+  --sinch-comp-accordion-color-default-outline-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-accordion-color-default-status-error: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-accordion-color-default-status-info: var(--sinch-sys-color-feedback-info-default);
+  --sinch-comp-accordion-color-default-status-success: var(--sinch-sys-color-feedback-success-default);
+  --sinch-comp-accordion-color-default-status-warning: var(--sinch-sys-color-feedback-warning-default);
   --sinch-comp-accordion-color-default-title-initial: var(--sinch-sys-color-text-default);
@@ -12,0 +12,0 @@ --sinch-comp-accordion-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);

comp/action-menu.css

 .nectary-theme-base {
-  --sinch-comp-action-menu-color-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
-  --sinch-comp-action-menu-color-default-background-initial: var(--sinch-sys-color-container-transparent-default);
-  --sinch-comp-action-menu-color-default-background-selected: var(--sinch-sys-color-container-transparent-hover);
+  --sinch-comp-action-menu-color-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
+  --sinch-comp-action-menu-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
+  --sinch-comp-action-menu-color-default-background-selected: var(--sinch-sys-color-surface-transparent-hover);
   --sinch-comp-action-menu-color-default-icon-initial: var(--sinch-sys-color-text-default);
   --sinch-comp-action-menu-color-default-text-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-action-menu-color-disabled-background-initial: var(--sinch-sys-color-container-transparent-disabled);
+  --sinch-comp-action-menu-color-disabled-background-initial: var(--sinch-sys-color-surface-transparent-disabled);
   --sinch-comp-action-menu-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
@@ -9,0 +9,0 @@ --sinch-comp-action-menu-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);

comp/alert.css

 .nectary-theme-base {
-  --sinch-comp-alert-color-error-default-background: var(--sinch-sys-color-feedback-invalid-background);
-  --sinch-comp-alert-color-error-default-icon: var(--sinch-sys-color-feedback-invalid-contrast);
+  --sinch-comp-alert-color-error-default-background: var(--sinch-sys-color-feedback-danger-subtle);
+  --sinch-comp-alert-color-error-default-icon: var(--sinch-sys-color-feedback-danger-default);
   --sinch-comp-alert-color-error-default-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-alert-color-info-default-background: var(--sinch-sys-color-feedback-info-background);
-  --sinch-comp-alert-color-info-default-icon: var(--sinch-sys-color-feedback-info-contrast);
+  --sinch-comp-alert-color-info-default-background: var(--sinch-sys-color-feedback-info-subtle);
+  --sinch-comp-alert-color-info-default-icon: var(--sinch-sys-color-feedback-info-default);
   --sinch-comp-alert-color-info-default-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-alert-color-warning-default-background: var(--sinch-sys-color-feedback-warning-background);
-  --sinch-comp-alert-color-warning-default-icon: var(--sinch-sys-color-feedback-warning-contrast);
+  --sinch-comp-alert-color-warning-default-background: var(--sinch-sys-color-feedback-warning-subtle);
+  --sinch-comp-alert-color-warning-default-icon: var(--sinch-sys-color-feedback-warning-default);
   --sinch-comp-alert-color-warning-default-text: var(--sinch-sys-color-text-default);
   --sinch-comp-alert-font-body: var(--sinch-sys-font-body-m);
 }

comp/avatar.css

 .nectary-theme-base {
-  --sinch-comp-avatar-border-color-default-initial: var(--sinch-sys-color-border-light);
-  --sinch-comp-avatar-container-color-blue-background: var(--sinch-ref-color-complementary-night-400);
-  --sinch-comp-avatar-container-color-blue-foreground: var(--sinch-ref-color-main-snow-100);
-  --sinch-comp-avatar-container-color-brown-background: var(--sinch-ref-color-complementary-mud-400);
-  --sinch-comp-avatar-container-color-brown-foreground: var(--sinch-ref-color-main-snow-100);
-  --sinch-comp-avatar-container-color-celtic-background: var(--sinch-sys-color-feedback-info-background);
-  --sinch-comp-avatar-container-color-celtic-foreground: var(--sinch-sys-color-feedback-info-foreground);
-  --sinch-comp-avatar-container-color-dark-blue-background: var(--sinch-ref-color-complementary-night-700);
-  --sinch-comp-avatar-container-color-dark-blue-foreground: var(--sinch-ref-color-complementary-night-200);
-  --sinch-comp-avatar-container-color-dark-brown-background: var(--sinch-ref-color-complementary-mud-700);
-  --sinch-comp-avatar-container-color-dark-brown-foreground: var(--sinch-ref-color-complementary-mud-200);
-  --sinch-comp-avatar-container-color-dark-gray-background: var(--sinch-ref-color-complementary-dirt-700);
-  --sinch-comp-avatar-container-color-dark-gray-foreground: var(--sinch-ref-color-complementary-dirt-200);
-  --sinch-comp-avatar-container-color-dark-green-background: var(--sinch-ref-color-complementary-grass-700);
-  --sinch-comp-avatar-container-color-dark-green-foreground: var(--sinch-ref-color-complementary-grass-200);
-  --sinch-comp-avatar-container-color-dark-orange-background: var(--sinch-ref-color-complementary-orange-700);
-  --sinch-comp-avatar-container-color-dark-orange-foreground: var(--sinch-ref-color-complementary-orange-200);
-  --sinch-comp-avatar-container-color-dark-pink-background: var(--sinch-ref-color-complementary-candy-700);
-  --sinch-comp-avatar-container-color-dark-pink-foreground: var(--sinch-ref-color-complementary-candy-200);
-  --sinch-comp-avatar-container-color-dark-violet-background: var(--sinch-ref-color-complementary-violet-700);
-  --sinch-comp-avatar-container-color-dark-violet-foreground: var(--sinch-ref-color-complementary-violet-200);
-  --sinch-comp-avatar-container-color-dark-yellow-background: var(--sinch-ref-color-complementary-bolt-700);
-  --sinch-comp-avatar-container-color-dark-yellow-foreground: var(--sinch-ref-color-complementary-bolt-200);
-  --sinch-comp-avatar-container-color-default-background: var(--sinch-ref-color-main-snow-500);
-  --sinch-comp-avatar-container-color-default-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-avatar-container-color-gray-background: var(--sinch-ref-color-complementary-dirt-400);
-  --sinch-comp-avatar-container-color-gray-foreground: var(--sinch-ref-color-main-snow-100);
-  --sinch-comp-avatar-container-color-green-background: var(--sinch-ref-color-complementary-grass-400);
-  --sinch-comp-avatar-container-color-green-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-avatar-container-color-jasper-background: var(--sinch-sys-color-feedback-invalid-background);
-  --sinch-comp-avatar-container-color-jasper-foreground: var(--sinch-sys-color-feedback-invalid-foreground);
-  --sinch-comp-avatar-container-color-light-blue-background: var(--sinch-ref-color-complementary-night-200);
-  --sinch-comp-avatar-container-color-light-blue-foreground: var(--sinch-ref-color-complementary-night-700);
-  --sinch-comp-avatar-container-color-light-brown-background: var(--sinch-ref-color-complementary-mud-200);
-  --sinch-comp-avatar-container-color-light-brown-foreground: var(--sinch-ref-color-complementary-mud-700);
-  --sinch-comp-avatar-container-color-light-gray-background: var(--sinch-ref-color-complementary-dirt-200);
-  --sinch-comp-avatar-container-color-light-gray-foreground: var(--sinch-ref-color-complementary-dirt-700);
-  --sinch-comp-avatar-container-color-light-green-background: var(--sinch-ref-color-complementary-grass-200);
-  --sinch-comp-avatar-container-color-light-green-foreground: var(--sinch-ref-color-complementary-grass-700);
-  --sinch-comp-avatar-container-color-light-orange-background: var(--sinch-ref-color-complementary-orange-200);
-  --sinch-comp-avatar-container-color-light-orange-foreground: var(--sinch-ref-color-complementary-orange-700);
-  --sinch-comp-avatar-container-color-light-pink-background: var(--sinch-ref-color-complementary-candy-200);
-  --sinch-comp-avatar-container-color-light-pink-foreground: var(--sinch-ref-color-complementary-candy-700);
-  --sinch-comp-avatar-container-color-light-violet-background: var(--sinch-ref-color-complementary-violet-200);
-  --sinch-comp-avatar-container-color-light-violet-foreground: var(--sinch-ref-color-complementary-violet-700);
-  --sinch-comp-avatar-container-color-light-yellow-background: var(--sinch-ref-color-complementary-bolt-200);
-  --sinch-comp-avatar-container-color-light-yellow-foreground: var(--sinch-ref-color-complementary-bolt-700);
-  --sinch-comp-avatar-container-color-olive-background: var(--sinch-sys-color-feedback-success-background);
-  --sinch-comp-avatar-container-color-olive-foreground: var(--sinch-sys-color-feedback-success-foreground);
-  --sinch-comp-avatar-container-color-orange-background: var(--sinch-ref-color-complementary-orange-400);
-  --sinch-comp-avatar-container-color-orange-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-avatar-container-color-pink-background: var(--sinch-ref-color-complementary-candy-400);
-  --sinch-comp-avatar-container-color-pink-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-avatar-container-color-pumpkin-background: var(--sinch-sys-color-feedback-warning-background);
-  --sinch-comp-avatar-container-color-pumpkin-foreground: var(--sinch-sys-color-feedback-warning-foreground);
-  --sinch-comp-avatar-container-color-violet-background: var(--sinch-ref-color-complementary-violet-400);
-  --sinch-comp-avatar-container-color-violet-foreground: var(--sinch-ref-color-main-stormy-900);
-  --sinch-comp-avatar-container-color-yellow-background: var(--sinch-ref-color-complementary-bolt-400);
-  --sinch-comp-avatar-container-color-yellow-foreground: var(--sinch-ref-color-main-stormy-700);
+  --sinch-comp-avatar-border-color-default-initial: var(--sinch-sys-color-border-subtle);
+  --sinch-comp-avatar-container-color-blue-background: var(--sinch-ref-color-ocean-700);
+  --sinch-comp-avatar-container-color-blue-foreground: var(--sinch-sys-color-basic-pure);
+  --sinch-comp-avatar-container-color-dark-blue-background: var(--sinch-ref-color-ocean-800);
+  --sinch-comp-avatar-container-color-dark-blue-foreground: var(--sinch-ref-color-ocean-100);
+  --sinch-comp-avatar-container-color-dark-gray-background: var(--sinch-ref-color-neutral-800);
+  --sinch-comp-avatar-container-color-dark-gray-foreground: var(--sinch-ref-color-neutral-200);
+  --sinch-comp-avatar-container-color-dark-green-background: var(--sinch-ref-color-grass-700);
+  --sinch-comp-avatar-container-color-dark-green-foreground: var(--sinch-ref-color-grass-200);
+  --sinch-comp-avatar-container-color-dark-orange-background: var(--sinch-ref-color-pumpkin-700);
+  --sinch-comp-avatar-container-color-dark-orange-foreground: var(--sinch-ref-color-pumpkin-200);
+  --sinch-comp-avatar-container-color-dark-pink-background: var(--sinch-ref-color-candy-700);
+  --sinch-comp-avatar-container-color-dark-pink-foreground: var(--sinch-ref-color-candy-200);
+  --sinch-comp-avatar-container-color-dark-red-background: var(--sinch-ref-color-raspberry-700);
+  --sinch-comp-avatar-container-color-dark-red-foreground: var(--sinch-ref-color-raspberry-200);
+  --sinch-comp-avatar-container-color-dark-violet-background: var(--sinch-ref-color-violet-700);
+  --sinch-comp-avatar-container-color-dark-violet-foreground: var(--sinch-ref-color-violet-200);
+  --sinch-comp-avatar-container-color-dark-yellow-background: var(--sinch-ref-color-honey-700);
+  --sinch-comp-avatar-container-color-dark-yellow-foreground: var(--sinch-ref-color-honey-200);
+  --sinch-comp-avatar-container-color-default-background: var(--sinch-ref-color-neutral-200);
+  --sinch-comp-avatar-container-color-default-foreground: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-avatar-container-color-gray-background: var(--sinch-ref-color-neutral-500);
+  --sinch-comp-avatar-container-color-gray-foreground: var(--sinch-sys-color-basic-pure);
+  --sinch-comp-avatar-container-color-green-background: var(--sinch-ref-color-grass-400);
+  --sinch-comp-avatar-container-color-green-foreground: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-avatar-container-color-light-blue-background: var(--sinch-ref-color-ocean-100);
+  --sinch-comp-avatar-container-color-light-blue-foreground: var(--sinch-ref-color-ocean-800);
+  --sinch-comp-avatar-container-color-light-gray-background: var(--sinch-ref-color-neutral-200);
+  --sinch-comp-avatar-container-color-light-gray-foreground: var(--sinch-ref-color-neutral-800);
+  --sinch-comp-avatar-container-color-light-green-background: var(--sinch-ref-color-grass-200);
+  --sinch-comp-avatar-container-color-light-green-foreground: var(--sinch-ref-color-grass-700);
+  --sinch-comp-avatar-container-color-light-orange-background: var(--sinch-ref-color-pumpkin-200);
+  --sinch-comp-avatar-container-color-light-orange-foreground: var(--sinch-ref-color-pumpkin-700);
+  --sinch-comp-avatar-container-color-light-pink-background: var(--sinch-ref-color-candy-200);
+  --sinch-comp-avatar-container-color-light-pink-foreground: var(--sinch-ref-color-candy-700);
+  --sinch-comp-avatar-container-color-light-red-background: var(--sinch-ref-color-raspberry-200);
+  --sinch-comp-avatar-container-color-light-red-foreground: var(--sinch-ref-color-raspberry-700);
+  --sinch-comp-avatar-container-color-light-violet-background: var(--sinch-ref-color-violet-200);
+  --sinch-comp-avatar-container-color-light-violet-foreground: var(--sinch-ref-color-violet-700);
+  --sinch-comp-avatar-container-color-light-yellow-background: var(--sinch-ref-color-honey-200);
+  --sinch-comp-avatar-container-color-light-yellow-foreground: var(--sinch-ref-color-honey-700);
+  --sinch-comp-avatar-container-color-orange-background: var(--sinch-ref-color-pumpkin-400);
+  --sinch-comp-avatar-container-color-orange-foreground: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-avatar-container-color-pink-background: var(--sinch-ref-color-candy-400);
+  --sinch-comp-avatar-container-color-pink-foreground: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-avatar-container-color-red-background: var(--sinch-ref-color-raspberry-400);
+  --sinch-comp-avatar-container-color-red-foreground: var(--sinch-ref-color-raspberry-900);
+  --sinch-comp-avatar-container-color-violet-background: var(--sinch-ref-color-violet-400);
+  --sinch-comp-avatar-container-color-violet-foreground: var(--sinch-sys-color-basic-pure-inverted);
+  --sinch-comp-avatar-container-color-yellow-background: var(--sinch-ref-color-honey-400);
+  --sinch-comp-avatar-container-color-yellow-foreground: var(--sinch-ref-color-neutral-900);
   --sinch-comp-avatar-container-font-size-l-text: var(--sinch-sys-font-desktop-title-m);
@@ -68,6 +60,6 @@ --sinch-comp-avatar-container-font-size-m-text: var(--sinch-sys-font-desktop-title-s);
   --sinch-comp-avatar-size-s: 24px;
-  --sinch-comp-avatar-status-color-away-default-background: var(--sinch-sys-color-status-away-contrast);
-  --sinch-comp-avatar-status-color-busy-default-background: var(--sinch-sys-color-status-busy-contrast);
-  --sinch-comp-avatar-status-color-offline-default-background: var(--sinch-sys-color-status-offline-contrast);
-  --sinch-comp-avatar-status-color-online-default-background: var(--sinch-sys-color-status-online-contrast);
+  --sinch-comp-avatar-status-color-away-default-background: var(--sinch-sys-color-feedback-warning-default);
+  --sinch-comp-avatar-status-color-busy-default-background: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-avatar-status-color-offline-default-background: var(--sinch-sys-color-feedback-neutral-default);
+  --sinch-comp-avatar-status-color-online-default-background: var(--sinch-sys-color-feedback-success-default);
 }

comp/badge.css

 .nectary-theme-base {
-  --sinch-comp-badge-color-background: var(--sinch-sys-color-status-busy-contrast);
-  --sinch-comp-badge-color-border: var(--sinch-sys-color-border-light);
-  --sinch-comp-badge-color-text: var(--sinch-sys-color-text-inverted);
+  --sinch-comp-badge-color-background: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-badge-color-border: var(--sinch-sys-color-border-subtle);
+  --sinch-comp-badge-color-text: var(--sinch-sys-color-basic-pure);
   --sinch-comp-badge-font-size-l: var(--sinch-ref-typography-font-weight-400) 14px/20px var(--sinch-ref-typography-font-family-mono);
@@ -6,0 +6,0 @@ --sinch-comp-badge-font-size-m: var(--sinch-ref-typography-font-weight-400) 12px/14px var(--sinch-ref-typography-font-family-mono);

comp/button.css

 .nectary-theme-base {
-  --sinch-comp-button-color-cta-primary-default-background-active: var(--sinch-sys-color-cta-active);
-  --sinch-comp-button-color-cta-primary-default-background-hover: var(--sinch-sys-color-cta-hover);
-  --sinch-comp-button-color-cta-primary-default-background-initial: var(--sinch-sys-color-cta-default);
-  --sinch-comp-button-color-cta-primary-default-border-initial: transparent;
-  --sinch-comp-button-color-cta-primary-default-icon-initial: var(--sinch-sys-color-cta-foreground);
-  --sinch-comp-button-color-cta-primary-default-outline-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-button-color-cta-primary-default-text-initial: var(--sinch-sys-color-cta-foreground);
-  --sinch-comp-button-color-cta-primary-disabled-background-initial: var(--sinch-sys-color-cta-disabled);
-  --sinch-comp-button-color-cta-primary-disabled-border-initial: transparent;
+  --sinch-comp-button-color-cta-primary-default-background-active: var(--sinch-ref-color-honey-300);
+  --sinch-comp-button-color-cta-primary-default-background-hover: var(--sinch-ref-color-honey-200);
+  --sinch-comp-button-color-cta-primary-default-background-initial: var(--sinch-ref-color-honey-350);
+  --sinch-comp-button-color-cta-primary-default-border-initial: var(--sinch-sys-color-basic-transparent);
+  --sinch-comp-button-color-cta-primary-default-icon-initial: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-button-color-cta-primary-default-outline-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-button-color-cta-primary-default-text-initial: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-button-color-cta-primary-disabled-background-initial: var(--sinch-ref-color-honey-50);
+  --sinch-comp-button-color-cta-primary-disabled-border-initial: var(--sinch-sys-color-basic-transparent);
   --sinch-comp-button-color-cta-primary-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
   --sinch-comp-button-color-cta-primary-disabled-text-initial: var(--sinch-sys-color-text-disabled);
-  --sinch-comp-button-color-cta-secondary-default-background-active: var(--sinch-sys-color-container-main-active);
-  --sinch-comp-button-color-cta-secondary-default-background-hover: var(--sinch-sys-color-container-main-hover);
-  --sinch-comp-button-color-cta-secondary-default-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-button-color-cta-secondary-default-border-initial: var(--sinch-sys-color-container-main-foreground);
-  --sinch-comp-button-color-cta-secondary-default-icon-initial: var(--sinch-sys-color-container-main-foreground);
-  --sinch-comp-button-color-cta-secondary-default-outline-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-button-color-cta-secondary-default-text-initial: var(--sinch-sys-color-container-main-foreground);
-  --sinch-comp-button-color-cta-secondary-disabled-background-initial: var(--sinch-sys-color-container-main-disabled);
+  --sinch-comp-button-color-cta-secondary-default-background-active: var(--sinch-sys-color-surface-primary-active);
+  --sinch-comp-button-color-cta-secondary-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
+  --sinch-comp-button-color-cta-secondary-default-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-button-color-cta-secondary-default-border-initial: var(--sinch-sys-color-text-default);
+  --sinch-comp-button-color-cta-secondary-default-icon-initial: var(--sinch-sys-color-text-default);
+  --sinch-comp-button-color-cta-secondary-default-outline-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-button-color-cta-secondary-default-text-initial: var(--sinch-sys-color-text-default);
+  --sinch-comp-button-color-cta-secondary-disabled-background-initial: var(--sinch-sys-color-surface-primary-disabled);
   --sinch-comp-button-color-cta-secondary-disabled-border-initial: var(--sinch-sys-color-border-disabled);
   --sinch-comp-button-color-cta-secondary-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
   --sinch-comp-button-color-cta-secondary-disabled-text-initial: var(--sinch-sys-color-text-disabled);
-  --sinch-comp-button-color-danger-default-background-active: var(--sinch-sys-color-container-main-active);
-  --sinch-comp-button-color-danger-default-background-hover: var(--sinch-sys-color-container-main-hover);
-  --sinch-comp-button-color-danger-default-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-button-color-danger-default-border-initial: var(--sinch-sys-color-border-invalid);
-  --sinch-comp-button-color-danger-default-icon-initial: var(--sinch-sys-color-text-invalid);
-  --sinch-comp-button-color-danger-default-outline-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-button-color-danger-default-text-initial: var(--sinch-sys-color-text-invalid);
-  --sinch-comp-button-color-danger-disabled-background-initial: var(--sinch-sys-color-container-main-disabled);
+  --sinch-comp-button-color-danger-default-background-active: var(--sinch-sys-color-surface-primary-active);
+  --sinch-comp-button-color-danger-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
+  --sinch-comp-button-color-danger-default-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-button-color-danger-default-border-initial: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-button-color-danger-default-icon-initial: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-button-color-danger-default-outline-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-button-color-danger-default-text-initial: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-button-color-danger-disabled-background-initial: var(--sinch-sys-color-surface-primary-disabled);
   --sinch-comp-button-color-danger-disabled-border-initial: var(--sinch-sys-color-border-disabled);
@@ -38,30 +38,30 @@ --sinch-comp-button-color-danger-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
   --sinch-comp-button-color-primary-default-background-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-button-color-primary-default-border-initial: transparent;
+  --sinch-comp-button-color-primary-default-border-initial: var(--sinch-sys-color-basic-transparent);
   --sinch-comp-button-color-primary-default-icon-initial: var(--sinch-sys-color-primary-foreground);
-  --sinch-comp-button-color-primary-default-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-button-color-primary-default-outline-focus: var(--sinch-sys-color-focus);
   --sinch-comp-button-color-primary-default-text-initial: var(--sinch-sys-color-primary-foreground);
   --sinch-comp-button-color-primary-disabled-background-initial: var(--sinch-sys-color-primary-disabled);
-  --sinch-comp-button-color-primary-disabled-border-initial: transparent;
+  --sinch-comp-button-color-primary-disabled-border-initial: var(--sinch-sys-color-basic-transparent);
   --sinch-comp-button-color-primary-disabled-icon-initial: var(--sinch-sys-color-primary-foreground);
   --sinch-comp-button-color-primary-disabled-text-initial: var(--sinch-sys-color-primary-foreground);
-  --sinch-comp-button-color-secondary-default-background-active: var(--sinch-sys-color-container-main-active);
-  --sinch-comp-button-color-secondary-default-background-hover: var(--sinch-sys-color-container-main-hover);
-  --sinch-comp-button-color-secondary-default-background-initial: var(--sinch-sys-color-container-main-default);
+  --sinch-comp-button-color-secondary-default-background-active: var(--sinch-sys-color-surface-primary-active);
+  --sinch-comp-button-color-secondary-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
+  --sinch-comp-button-color-secondary-default-background-initial: var(--sinch-sys-color-surface-primary-default);
   --sinch-comp-button-color-secondary-default-border-initial: var(--sinch-sys-color-primary-default);
   --sinch-comp-button-color-secondary-default-icon-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-button-color-secondary-default-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-button-color-secondary-default-outline-focus: var(--sinch-sys-color-focus);
   --sinch-comp-button-color-secondary-default-text-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-button-color-secondary-disabled-background-initial: var(--sinch-sys-color-container-main-disabled);
+  --sinch-comp-button-color-secondary-disabled-background-initial: var(--sinch-sys-color-surface-primary-disabled);
   --sinch-comp-button-color-secondary-disabled-border-initial: var(--sinch-sys-color-primary-disabled);
   --sinch-comp-button-color-secondary-disabled-icon-initial: var(--sinch-sys-color-primary-disabled);
   --sinch-comp-button-color-secondary-disabled-text-initial: var(--sinch-sys-color-primary-disabled);
-  --sinch-comp-button-color-subtle-primary-default-background-active: var(--sinch-sys-color-container-transparent-active);
-  --sinch-comp-button-color-subtle-primary-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
-  --sinch-comp-button-color-subtle-primary-default-background-initial: var(--sinch-sys-color-container-transparent-default);
-  --sinch-comp-button-color-subtle-primary-default-border-initial: transparent;
+  --sinch-comp-button-color-subtle-primary-default-background-active: var(--sinch-sys-color-surface-transparent-active);
+  --sinch-comp-button-color-subtle-primary-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
+  --sinch-comp-button-color-subtle-primary-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
+  --sinch-comp-button-color-subtle-primary-default-border-initial: var(--sinch-sys-color-basic-transparent);
   --sinch-comp-button-color-subtle-primary-default-icon-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-button-color-subtle-primary-default-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-button-color-subtle-primary-default-outline-focus: var(--sinch-sys-color-focus);
   --sinch-comp-button-color-subtle-primary-default-text-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-button-color-subtle-primary-disabled-background-initial: var(--sinch-sys-color-container-transparent-disabled);
-  --sinch-comp-button-color-subtle-primary-disabled-border-initial: transparent;
+  --sinch-comp-button-color-subtle-primary-disabled-background-initial: var(--sinch-sys-color-surface-transparent-disabled);
+  --sinch-comp-button-color-subtle-primary-disabled-border-initial: var(--sinch-sys-color-basic-transparent);
   --sinch-comp-button-color-subtle-primary-disabled-icon-initial: var(--sinch-sys-color-primary-disabled);
@@ -72,11 +72,11 @@ --sinch-comp-button-color-subtle-primary-disabled-text-initial: var(--sinch-sys-color-primary-disabled);
   --sinch-comp-button-color-subtle-primary-toggled-background-initial: #2424241A;
-  --sinch-comp-button-color-subtle-secondary-default-background-active: var(--sinch-sys-color-container-transparent-active);
-  --sinch-comp-button-color-subtle-secondary-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
-  --sinch-comp-button-color-subtle-secondary-default-background-initial: var(--sinch-sys-color-container-transparent-default);
-  --sinch-comp-button-color-subtle-secondary-default-border-initial: transparent;
+  --sinch-comp-button-color-subtle-secondary-default-background-active: var(--sinch-sys-color-surface-transparent-active);
+  --sinch-comp-button-color-subtle-secondary-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
+  --sinch-comp-button-color-subtle-secondary-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
+  --sinch-comp-button-color-subtle-secondary-default-border-initial: var(--sinch-sys-color-basic-transparent);
   --sinch-comp-button-color-subtle-secondary-default-icon-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-button-color-subtle-secondary-default-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-button-color-subtle-secondary-default-outline-focus: var(--sinch-sys-color-focus);
   --sinch-comp-button-color-subtle-secondary-default-text-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-button-color-subtle-secondary-disabled-background-initial: var(--sinch-sys-color-container-transparent-disabled);
-  --sinch-comp-button-color-subtle-secondary-disabled-border-initial: transparent;
+  --sinch-comp-button-color-subtle-secondary-disabled-background-initial: var(--sinch-sys-color-surface-transparent-disabled);
+  --sinch-comp-button-color-subtle-secondary-disabled-border-initial: var(--sinch-sys-color-basic-transparent);
   --sinch-comp-button-color-subtle-secondary-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
@@ -93,25 +93,25 @@ --sinch-comp-button-color-subtle-secondary-disabled-text-initial: var(--sinch-sys-color-text-disabled);
   --sinch-comp-button-shadow-cta-primary-disabled: var(--sinch-ref-shadow-level-0);
-  --sinch-comp-button-shadow-cta-primary-focus: var(--sinch-ref-shadow-level-1);
-  --sinch-comp-button-shadow-cta-primary-hover: var(--sinch-ref-shadow-level-1);
-  --sinch-comp-button-shadow-cta-primary-initial: var(--sinch-ref-shadow-level-1);
+  --sinch-comp-button-shadow-cta-primary-focus: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-cta-primary-hover: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-cta-primary-initial: var(--sinch-ref-shadow-level-0);
   --sinch-comp-button-shadow-cta-secondary-active: var(--sinch-ref-shadow-level-0);
   --sinch-comp-button-shadow-cta-secondary-disabled: var(--sinch-ref-shadow-level-0);
-  --sinch-comp-button-shadow-cta-secondary-focus: var(--sinch-ref-shadow-level-1);
-  --sinch-comp-button-shadow-cta-secondary-hover: var(--sinch-ref-shadow-level-1);
-  --sinch-comp-button-shadow-cta-secondary-initial: var(--sinch-ref-shadow-level-1);
+  --sinch-comp-button-shadow-cta-secondary-focus: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-cta-secondary-hover: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-cta-secondary-initial: var(--sinch-ref-shadow-level-0);
   --sinch-comp-button-shadow-danger-active: var(--sinch-ref-shadow-level-0);
   --sinch-comp-button-shadow-danger-disabled: var(--sinch-ref-shadow-level-0);
-  --sinch-comp-button-shadow-danger-focus: var(--sinch-ref-shadow-level-1);
-  --sinch-comp-button-shadow-danger-hover: var(--sinch-ref-shadow-level-1);
-  --sinch-comp-button-shadow-danger-initial: var(--sinch-ref-shadow-level-1);
+  --sinch-comp-button-shadow-danger-focus: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-danger-hover: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-danger-initial: var(--sinch-ref-shadow-level-0);
   --sinch-comp-button-shadow-primary-active: var(--sinch-ref-shadow-level-0);
   --sinch-comp-button-shadow-primary-disabled: var(--sinch-ref-shadow-level-0);
-  --sinch-comp-button-shadow-primary-focus: var(--sinch-ref-shadow-level-1);
-  --sinch-comp-button-shadow-primary-hover: var(--sinch-ref-shadow-level-1);
-  --sinch-comp-button-shadow-primary-initial: var(--sinch-ref-shadow-level-1);
+  --sinch-comp-button-shadow-primary-focus: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-primary-hover: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-primary-initial: var(--sinch-ref-shadow-level-0);
   --sinch-comp-button-shadow-secondary-active: var(--sinch-ref-shadow-level-0);
   --sinch-comp-button-shadow-secondary-disabled: var(--sinch-ref-shadow-level-0);
-  --sinch-comp-button-shadow-secondary-focus: var(--sinch-ref-shadow-level-1);
-  --sinch-comp-button-shadow-secondary-hover: var(--sinch-ref-shadow-level-1);
-  --sinch-comp-button-shadow-secondary-initial: var(--sinch-ref-shadow-level-1);
+  --sinch-comp-button-shadow-secondary-focus: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-secondary-hover: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-secondary-initial: var(--sinch-ref-shadow-level-0);
   --sinch-comp-button-shadow-subtle-active: var(--sinch-ref-shadow-level-0);
@@ -118,0 +118,0 @@ --sinch-comp-button-shadow-subtle-disabled: var(--sinch-ref-shadow-level-0);

comp/card.css

 .nectary-theme-base {
-  --sinch-comp-card-color-blue-default-background-initial: var(--sinch-sys-color-container-complement-tertiary-default);
-  --sinch-comp-card-color-gray-default-background-initial: var(--sinch-sys-color-container-contrast-primary-default);
-  --sinch-comp-card-color-green-default-background-initial: var(--sinch-sys-color-container-complement-secondary-default);
-  --sinch-comp-card-color-white-default-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-card-color-white-default-border-initial: var(--sinch-sys-color-border-default);
-  --sinch-comp-card-color-white-default-description-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-card-color-white-default-title-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-card-color-yellow-default-background-initial: var(--sinch-sys-color-container-complement-primary-default);
+  --sinch-comp-card-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-card-color-default-border-initial: var(--sinch-sys-color-border-default);
+  --sinch-comp-card-color-default-description-initial: var(--sinch-sys-color-text-default);
+  --sinch-comp-card-color-default-title-initial: var(--sinch-sys-color-text-default);
   --sinch-comp-card-font-description: var(--sinch-sys-font-body-m);
@@ -11,0 +7,0 @@ --sinch-comp-card-font-label: var(--sinch-sys-font-desktop-title-xs);

comp/checkbox.css

@@ -10,22 +10,22 @@ .nectary-theme-base {
   --sinch-comp-checkbox-color-checked-disabled-border-initial: var(--sinch-sys-color-primary-disabled);
-  --sinch-comp-checkbox-color-default-background-active: var(--sinch-sys-color-container-main-active);
-  --sinch-comp-checkbox-color-default-background-hover: var(--sinch-sys-color-container-main-hover);
-  --sinch-comp-checkbox-color-default-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-checkbox-color-default-border-active: var(--sinch-sys-color-border-dark);
-  --sinch-comp-checkbox-color-default-border-hover: var(--sinch-sys-color-border-dark);
-  --sinch-comp-checkbox-color-default-border-initial: var(--sinch-sys-color-border-dark);
-  --sinch-comp-checkbox-color-default-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-checkbox-color-default-background-active: var(--sinch-sys-color-surface-primary-active);
+  --sinch-comp-checkbox-color-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
+  --sinch-comp-checkbox-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-checkbox-color-default-border-active: var(--sinch-sys-color-border-strong);
+  --sinch-comp-checkbox-color-default-border-hover: var(--sinch-sys-color-border-strong);
+  --sinch-comp-checkbox-color-default-border-initial: var(--sinch-sys-color-border-strong);
+  --sinch-comp-checkbox-color-default-outline-focus: var(--sinch-sys-color-focus);
   --sinch-comp-checkbox-color-default-text-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-checkbox-color-disabled-background-initial: var(--sinch-sys-color-container-main-default);
+  --sinch-comp-checkbox-color-disabled-background-initial: var(--sinch-sys-color-surface-primary-default);
   --sinch-comp-checkbox-color-disabled-border-initial: var(--sinch-sys-color-border-disabled);
   --sinch-comp-checkbox-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
-  --sinch-comp-checkbox-color-invalid-background-active: var(--sinch-sys-color-container-main-active);
-  --sinch-comp-checkbox-color-invalid-background-hover: var(--sinch-sys-color-container-main-hover);
-  --sinch-comp-checkbox-color-invalid-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-checkbox-color-invalid-border-active: var(--sinch-sys-color-border-invalid);
-  --sinch-comp-checkbox-color-invalid-border-hover: var(--sinch-sys-color-border-invalid);
-  --sinch-comp-checkbox-color-invalid-border-initial: var(--sinch-sys-color-border-invalid);
-  --sinch-comp-checkbox-color-invalid-text-initial: var(--sinch-sys-color-text-invalid);
+  --sinch-comp-checkbox-color-invalid-background-active: var(--sinch-sys-color-surface-primary-active);
+  --sinch-comp-checkbox-color-invalid-background-hover: var(--sinch-sys-color-surface-primary-hover);
+  --sinch-comp-checkbox-color-invalid-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-checkbox-color-invalid-border-active: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-checkbox-color-invalid-border-hover: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-checkbox-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-checkbox-color-invalid-text-initial: var(--sinch-sys-color-feedback-danger-default);
   --sinch-comp-checkbox-font-label: var(--sinch-sys-font-body-m);
   --sinch-comp-checkbox-shape-radius: var(--sinch-sys-shape-radius-s);
 }

comp/chip.css

 .nectary-theme-base {
-  --sinch-comp-chip-color-blue-default-background-initial: var(--sinch-ref-color-complementary-night-400);
-  --sinch-comp-chip-color-blue-default-foreground-initial: var(--sinch-ref-color-main-snow-100);
-  --sinch-comp-chip-color-brown-default-background-initial: var(--sinch-ref-color-complementary-mud-400);
-  --sinch-comp-chip-color-brown-default-foreground-initial: var(--sinch-ref-color-main-snow-100);
-  --sinch-comp-chip-color-celtic-default-background-initial: var(--sinch-sys-color-feedback-info-background);
-  --sinch-comp-chip-color-celtic-default-foreground-initial: var(--sinch-sys-color-feedback-info-foreground);
-  --sinch-comp-chip-color-dark-blue-default-background-initial: var(--sinch-ref-color-complementary-night-700);
-  --sinch-comp-chip-color-dark-blue-default-foreground-initial: var(--sinch-ref-color-complementary-night-200);
-  --sinch-comp-chip-color-dark-brown-default-background-initial: var(--sinch-ref-color-complementary-mud-700);
-  --sinch-comp-chip-color-dark-brown-default-foreground-initial: var(--sinch-ref-color-complementary-mud-200);
-  --sinch-comp-chip-color-dark-gray-default-background-initial: var(--sinch-ref-color-complementary-dirt-700);
-  --sinch-comp-chip-color-dark-gray-default-foreground-initial: var(--sinch-ref-color-complementary-dirt-200);
-  --sinch-comp-chip-color-dark-green-default-background-initial: var(--sinch-ref-color-complementary-grass-700);
-  --sinch-comp-chip-color-dark-green-default-foreground-initial: var(--sinch-ref-color-complementary-grass-200);
-  --sinch-comp-chip-color-dark-orange-default-background-initial: var(--sinch-ref-color-complementary-orange-700);
-  --sinch-comp-chip-color-dark-orange-default-foreground-initial: var(--sinch-ref-color-complementary-orange-200);
-  --sinch-comp-chip-color-dark-pink-default-background-initial: var(--sinch-ref-color-complementary-candy-700);
-  --sinch-comp-chip-color-dark-pink-default-foreground-initial: var(--sinch-ref-color-complementary-candy-200);
-  --sinch-comp-chip-color-dark-red-default-background-initial: var(--sinch-ref-color-main-raspberry-700);
-  --sinch-comp-chip-color-dark-red-default-foreground-initial: var(--sinch-ref-color-main-raspberry-200);
-  --sinch-comp-chip-color-dark-violet-default-background-initial: var(--sinch-ref-color-complementary-violet-700);
-  --sinch-comp-chip-color-dark-violet-default-foreground-initial: var(--sinch-ref-color-complementary-violet-200);
-  --sinch-comp-chip-color-dark-yellow-default-background-initial: var(--sinch-ref-color-complementary-bolt-700);
-  --sinch-comp-chip-color-dark-yellow-default-foreground-initial: var(--sinch-ref-color-complementary-bolt-200);
-  --sinch-comp-chip-color-gray-default-background-initial: var(--sinch-ref-color-complementary-dirt-400);
-  --sinch-comp-chip-color-gray-default-foreground-initial: var(--sinch-ref-color-main-snow-100);
-  --sinch-comp-chip-color-green-default-background-initial: var(--sinch-ref-color-complementary-grass-400);
-  --sinch-comp-chip-color-green-default-foreground-initial: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-chip-color-jasper-default-background-initial: var(--sinch-sys-color-feedback-invalid-background);
-  --sinch-comp-chip-color-jasper-default-foreground-initial: var(--sinch-sys-color-feedback-invalid-foreground);
-  --sinch-comp-chip-color-light-blue-default-background-initial: var(--sinch-ref-color-complementary-night-200);
-  --sinch-comp-chip-color-light-blue-default-foreground-initial: var(--sinch-ref-color-complementary-night-700);
-  --sinch-comp-chip-color-light-brown-default-background-initial: var(--sinch-ref-color-complementary-mud-200);
-  --sinch-comp-chip-color-light-brown-default-foreground-initial: var(--sinch-ref-color-complementary-mud-700);
-  --sinch-comp-chip-color-light-gray-default-background-initial: var(--sinch-ref-color-complementary-dirt-200);
-  --sinch-comp-chip-color-light-gray-default-foreground-initial: var(--sinch-ref-color-complementary-dirt-700);
-  --sinch-comp-chip-color-light-green-default-background-initial: var(--sinch-ref-color-complementary-grass-200);
-  --sinch-comp-chip-color-light-green-default-foreground-initial: var(--sinch-ref-color-complementary-grass-700);
-  --sinch-comp-chip-color-light-orange-default-background-initial: var(--sinch-ref-color-complementary-orange-200);
-  --sinch-comp-chip-color-light-orange-default-foreground-initial: var(--sinch-ref-color-complementary-orange-700);
-  --sinch-comp-chip-color-light-pink-default-background-initial: var(--sinch-ref-color-complementary-candy-200);
-  --sinch-comp-chip-color-light-pink-default-foreground-initial: var(--sinch-ref-color-complementary-candy-700);
-  --sinch-comp-chip-color-light-red-default-background-initial: var(--sinch-ref-color-main-raspberry-200);
-  --sinch-comp-chip-color-light-red-default-foreground-initial: var(--sinch-ref-color-main-raspberry-700);
-  --sinch-comp-chip-color-light-violet-default-background-initial: var(--sinch-ref-color-complementary-violet-200);
-  --sinch-comp-chip-color-light-violet-default-foreground-initial: var(--sinch-ref-color-complementary-violet-700);
-  --sinch-comp-chip-color-light-yellow-default-background-initial: var(--sinch-ref-color-complementary-bolt-200);
-  --sinch-comp-chip-color-light-yellow-default-foreground-initial: var(--sinch-ref-color-complementary-bolt-700);
-  --sinch-comp-chip-color-neutral-default-background-initial: var(--sinch-ref-color-main-snow-500);
-  --sinch-comp-chip-color-neutral-default-foreground-initial: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-chip-color-olive-default-background-initial: var(--sinch-sys-color-feedback-success-background);
-  --sinch-comp-chip-color-olive-default-foreground-initial: var(--sinch-sys-color-feedback-success-foreground);
-  --sinch-comp-chip-color-orange-default-background-initial: var(--sinch-ref-color-complementary-orange-400);
-  --sinch-comp-chip-color-orange-default-foreground-initial: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-chip-color-outiline-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-chip-color-pink-default-background-initial: var(--sinch-ref-color-complementary-candy-400);
-  --sinch-comp-chip-color-pink-default-foreground-initial: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-chip-color-pumpkin-default-background-initial: var(--sinch-sys-color-feedback-warning-background);
-  --sinch-comp-chip-color-pumpkin-default-foreground-initial: var(--sinch-sys-color-feedback-warning-foreground);
-  --sinch-comp-chip-color-red-default-background-initial: var(--sinch-ref-color-main-raspberry-500);
-  --sinch-comp-chip-color-red-default-foreground-initial: var(--sinch-ref-color-main-stormy-800);
-  --sinch-comp-chip-color-violet-default-background-initial: var(--sinch-ref-color-complementary-violet-400);
-  --sinch-comp-chip-color-violet-default-foreground-initial: var(--sinch-ref-color-main-stormy-900);
-  --sinch-comp-chip-color-yellow-default-background-initial: var(--sinch-ref-color-complementary-bolt-400);
-  --sinch-comp-chip-color-yellow-default-foreground-initial: var(--sinch-ref-color-main-stormy-700);
+  --sinch-comp-chip-color-blue-default-background-initial: var(--sinch-ref-color-ocean-700);
+  --sinch-comp-chip-color-blue-default-foreground-initial: var(--sinch-sys-color-basic-pure);
+  --sinch-comp-chip-color-danger-default-background-initial: var(--sinch-sys-color-feedback-danger-subtle);
+  --sinch-comp-chip-color-danger-default-foreground-initial: var(--sinch-sys-color-feedback-danger-strong);
+  --sinch-comp-chip-color-dark-blue-default-background-initial: var(--sinch-ref-color-ocean-800);
+  --sinch-comp-chip-color-dark-blue-default-foreground-initial: var(--sinch-ref-color-ocean-100);
+  --sinch-comp-chip-color-dark-gray-default-background-initial: var(--sinch-ref-color-neutral-800);
+  --sinch-comp-chip-color-dark-gray-default-foreground-initial: var(--sinch-ref-color-neutral-200);
+  --sinch-comp-chip-color-dark-green-default-background-initial: var(--sinch-ref-color-grass-700);
+  --sinch-comp-chip-color-dark-green-default-foreground-initial: var(--sinch-ref-color-grass-200);
+  --sinch-comp-chip-color-dark-orange-default-background-initial: var(--sinch-ref-color-pumpkin-700);
+  --sinch-comp-chip-color-dark-orange-default-foreground-initial: var(--sinch-ref-color-pumpkin-200);
+  --sinch-comp-chip-color-dark-pink-default-background-initial: var(--sinch-ref-color-candy-700);
+  --sinch-comp-chip-color-dark-pink-default-foreground-initial: var(--sinch-ref-color-candy-200);
+  --sinch-comp-chip-color-dark-red-default-background-initial: var(--sinch-ref-color-raspberry-700);
+  --sinch-comp-chip-color-dark-red-default-foreground-initial: var(--sinch-ref-color-raspberry-200);
+  --sinch-comp-chip-color-dark-violet-default-background-initial: var(--sinch-ref-color-violet-700);
+  --sinch-comp-chip-color-dark-violet-default-foreground-initial: var(--sinch-ref-color-violet-200);
+  --sinch-comp-chip-color-dark-yellow-default-background-initial: var(--sinch-ref-color-honey-700);
+  --sinch-comp-chip-color-dark-yellow-default-foreground-initial: var(--sinch-ref-color-honey-200);
+  --sinch-comp-chip-color-gray-default-background-initial: var(--sinch-ref-color-neutral-500);
+  --sinch-comp-chip-color-gray-default-foreground-initial: var(--sinch-sys-color-basic-pure);
+  --sinch-comp-chip-color-green-default-background-initial: var(--sinch-ref-color-grass-400);
+  --sinch-comp-chip-color-green-default-foreground-initial: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-chip-color-info-default-background-initial: var(--sinch-sys-color-feedback-info-subtle);
+  --sinch-comp-chip-color-info-default-foreground-initial: var(--sinch-sys-color-feedback-info-strong);
+  --sinch-comp-chip-color-light-blue-default-background-initial: var(--sinch-ref-color-ocean-100);
+  --sinch-comp-chip-color-light-blue-default-foreground-initial: var(--sinch-ref-color-ocean-800);
+  --sinch-comp-chip-color-light-gray-default-background-initial: var(--sinch-ref-color-neutral-200);
+  --sinch-comp-chip-color-light-gray-default-foreground-initial: var(--sinch-ref-color-neutral-800);
+  --sinch-comp-chip-color-light-green-default-background-initial: var(--sinch-ref-color-grass-200);
+  --sinch-comp-chip-color-light-green-default-foreground-initial: var(--sinch-ref-color-grass-700);
+  --sinch-comp-chip-color-light-orange-default-background-initial: var(--sinch-ref-color-pumpkin-200);
+  --sinch-comp-chip-color-light-orange-default-foreground-initial: var(--sinch-ref-color-pumpkin-700);
+  --sinch-comp-chip-color-light-pink-default-background-initial: var(--sinch-ref-color-candy-200);
+  --sinch-comp-chip-color-light-pink-default-foreground-initial: var(--sinch-ref-color-candy-700);
+  --sinch-comp-chip-color-light-red-default-background-initial: var(--sinch-ref-color-raspberry-200);
+  --sinch-comp-chip-color-light-red-default-foreground-initial: var(--sinch-ref-color-raspberry-700);
+  --sinch-comp-chip-color-light-violet-default-background-initial: var(--sinch-ref-color-violet-200);
+  --sinch-comp-chip-color-light-violet-default-foreground-initial: var(--sinch-ref-color-violet-700);
+  --sinch-comp-chip-color-light-yellow-default-background-initial: var(--sinch-ref-color-honey-200);
+  --sinch-comp-chip-color-light-yellow-default-foreground-initial: var(--sinch-ref-color-honey-700);
+  --sinch-comp-chip-color-neutral-default-background-initial: var(--sinch-ref-color-neutral-200);
+  --sinch-comp-chip-color-neutral-default-foreground-initial: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-chip-color-orange-default-background-initial: var(--sinch-ref-color-pumpkin-400);
+  --sinch-comp-chip-color-orange-default-foreground-initial: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-chip-color-outiline-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-chip-color-pink-default-background-initial: var(--sinch-ref-color-candy-400);
+  --sinch-comp-chip-color-pink-default-foreground-initial: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-chip-color-red-default-background-initial: var(--sinch-ref-color-raspberry-500);
+  --sinch-comp-chip-color-red-default-foreground-initial: var(--sinch-ref-color-neutral-950);
+  --sinch-comp-chip-color-success-default-background-initial: var(--sinch-sys-color-feedback-success-subtle);
+  --sinch-comp-chip-color-success-default-foreground-initial: var(--sinch-sys-color-feedback-success-strong);
+  --sinch-comp-chip-color-violet-default-background-initial: var(--sinch-ref-color-violet-400);
+  --sinch-comp-chip-color-violet-default-foreground-initial: var(--sinch-sys-color-basic-pure-inverted);
+  --sinch-comp-chip-color-warning-default-background-initial: var(--sinch-sys-color-feedback-warning-subtle);
+  --sinch-comp-chip-color-warning-default-foreground-initial: var(--sinch-sys-color-feedback-warning-strong);
+  --sinch-comp-chip-color-yellow-default-background-initial: var(--sinch-ref-color-honey-400);
+  --sinch-comp-chip-color-yellow-default-foreground-initial: var(--sinch-ref-color-neutral-900);
   --sinch-comp-chip-font-size-m-label: var(--sinch-sys-font-body-xs);
@@ -68,0 +62,0 @@ --sinch-comp-chip-font-size-s-label: var(--sinch-sys-font-body-xs);

comp/code-snippet.css

 .nectary-theme-base {
-  --sinch-comp-code-snippet-color-default-background-initial: var(--sinch-sys-color-container-contrast-secondary-default);
+  --sinch-comp-code-snippet-color-default-background-initial: var(--sinch-sys-color-surface-secondary-default);
   --sinch-comp-code-snippet-shape-radius: var(--sinch-sys-shape-radius-l);
 }

comp/code-tag.css

 .nectary-theme-base {
-  --sinch-comp-code-tag-color-default-background-initial: var(--sinch-sys-color-container-contrast-secondary-default);
-  --sinch-comp-code-tag-color-default-border-initial: var(--sinch-sys-color-border-light);
+  --sinch-comp-code-tag-color-default-background-initial: var(--sinch-sys-color-surface-secondary-default);
+  --sinch-comp-code-tag-color-default-border-initial: var(--sinch-sys-color-border-subtle);
   --sinch-comp-code-tag-color-default-text-initial: var(--sinch-sys-color-text-default);
@@ -5,0 +5,0 @@ --sinch-comp-code-tag-font-text: var(--sinch-sys-font-body-monospace-m);

comp/color-menu-option.css

 .nectary-theme-base {
-  --sinch-comp-color-menu-option-color-default-border-active: var(--sinch-ref-color-main-stormy-400);
-  --sinch-comp-color-menu-option-color-default-border-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-color-menu-option-color-default-border-hover: var(--sinch-ref-color-main-stormy-200);
+  --sinch-comp-color-menu-option-color-default-border-active: var(--sinch-ref-color-neutral-700);
+  --sinch-comp-color-menu-option-color-default-border-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-color-menu-option-color-default-border-hover: var(--sinch-ref-color-neutral-500);
   --sinch-comp-color-menu-option-color-default-border-initial: transparent;
-  --sinch-comp-color-menu-option-color-default-border-selected: var(--sinch-ref-color-main-stormy-900);
+  --sinch-comp-color-menu-option-color-default-border-selected: var(--sinch-sys-color-basic-pure-inverted);
 }

comp/color-swatch.css

 .nectary-theme-base {
-  --sinch-comp-color-swatch-color-blue-background: var(--sinch-ref-color-complementary-night-400);
-  --sinch-comp-color-swatch-color-brown-background: var(--sinch-ref-color-complementary-mud-400);
-  --sinch-comp-color-swatch-color-celtic-background: var(--sinch-sys-color-feedback-info-background);
-  --sinch-comp-color-swatch-color-dark-blue-background: var(--sinch-ref-color-complementary-night-700);
-  --sinch-comp-color-swatch-color-dark-brown-background: var(--sinch-ref-color-complementary-mud-700);
-  --sinch-comp-color-swatch-color-dark-gray-background: var(--sinch-ref-color-complementary-dirt-700);
-  --sinch-comp-color-swatch-color-dark-green-background: var(--sinch-ref-color-complementary-grass-700);
-  --sinch-comp-color-swatch-color-dark-pink-background: var(--sinch-ref-color-complementary-candy-700);
-  --sinch-comp-color-swatch-color-dark-red-background: var(--sinch-ref-color-main-raspberry-700);
-  --sinch-comp-color-swatch-color-dark-violet-background: var(--sinch-ref-color-complementary-violet-700);
-  --sinch-comp-color-swatch-color-dark-yellow-background: var(--sinch-ref-color-complementary-bolt-700);
-  --sinch-comp-color-swatch-color-dark-orange-background: var(--sinch-ref-color-complementary-orange-700);
-  --sinch-comp-color-swatch-color-default-background: var(--sinch-ref-color-main-snow-500);
-  --sinch-comp-color-swatch-color-gray-background: var(--sinch-ref-color-complementary-dirt-400);
-  --sinch-comp-color-swatch-color-green-background: var(--sinch-ref-color-complementary-grass-400);
-  --sinch-comp-color-swatch-color-jasper-background: var(--sinch-sys-color-feedback-invalid-background);
-  --sinch-comp-color-swatch-color-light-blue-background: var(--sinch-ref-color-complementary-night-200);
-  --sinch-comp-color-swatch-color-light-brown-background: var(--sinch-ref-color-complementary-mud-200);
-  --sinch-comp-color-swatch-color-light-gray-background: var(--sinch-ref-color-complementary-dirt-200);
-  --sinch-comp-color-swatch-color-light-green-background: var(--sinch-ref-color-complementary-grass-200);
-  --sinch-comp-color-swatch-color-light-orange-background: var(--sinch-ref-color-complementary-orange-200);
-  --sinch-comp-color-swatch-color-light-pink-background: var(--sinch-ref-color-complementary-candy-200);
-  --sinch-comp-color-swatch-color-light-red-background: var(--sinch-ref-color-main-raspberry-200);
-  --sinch-comp-color-swatch-color-light-violet-background: var(--sinch-ref-color-complementary-violet-200);
-  --sinch-comp-color-swatch-color-light-yellow-background: var(--sinch-ref-color-complementary-bolt-200);
-  --sinch-comp-color-swatch-color-olive-background: var(--sinch-sys-color-feedback-success-background);
-  --sinch-comp-color-swatch-color-orange-background: var(--sinch-ref-color-complementary-orange-400);
-  --sinch-comp-color-swatch-color-outline-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-color-swatch-color-pink-background: var(--sinch-ref-color-complementary-candy-400);
-  --sinch-comp-color-swatch-color-pumpkin-background: var(--sinch-sys-color-feedback-warning-background);
-  --sinch-comp-color-swatch-color-red-background: var(--sinch-ref-color-main-raspberry-500);
-  --sinch-comp-color-swatch-color-skintone-dark-background: var(--sinch-sys-color-skintone-dark);
-  --sinch-comp-color-swatch-color-skintone-default-background: var(--sinch-sys-color-skintone-default);
-  --sinch-comp-color-swatch-color-skintone-light-background: var(--sinch-sys-color-skintone-light);
-  --sinch-comp-color-swatch-color-skintone-light-medium-background: var(--sinch-sys-color-skintone-light-medium);
-  --sinch-comp-color-swatch-color-skintone-medium-background: var(--sinch-sys-color-skintone-medium);
-  --sinch-comp-color-swatch-color-skintone-medium-dark-background: var(--sinch-sys-color-skintone-medium-dark);
-  --sinch-comp-color-swatch-color-violet-background: var(--sinch-ref-color-complementary-violet-400);
-  --sinch-comp-color-swatch-color-yellow-background: var(--sinch-ref-color-complementary-bolt-400);
+  --sinch-comp-color-swatch-color-blue-background: var(--sinch-ref-color-ocean-700);
+  --sinch-comp-color-swatch-color-dark-blue-background: var(--sinch-ref-color-ocean-800);
+  --sinch-comp-color-swatch-color-dark-gray-background: var(--sinch-ref-color-neutral-800);
+  --sinch-comp-color-swatch-color-dark-green-background: var(--sinch-ref-color-grass-700);
+  --sinch-comp-color-swatch-color-dark-orange-background: var(--sinch-ref-color-pumpkin-700);
+  --sinch-comp-color-swatch-color-dark-pink-background: var(--sinch-ref-color-candy-700);
+  --sinch-comp-color-swatch-color-dark-red-background: var(--sinch-ref-color-raspberry-700);
+  --sinch-comp-color-swatch-color-dark-violet-background: var(--sinch-ref-color-violet-700);
+  --sinch-comp-color-swatch-color-dark-yellow-background: var(--sinch-ref-color-honey-700);
+  --sinch-comp-color-swatch-color-default-background: var(--sinch-ref-color-neutral-200);
+  --sinch-comp-color-swatch-color-gray-background: var(--sinch-ref-color-neutral-500);
+  --sinch-comp-color-swatch-color-green-background: var(--sinch-ref-color-grass-400);
+  --sinch-comp-color-swatch-color-light-blue-background: var(--sinch-ref-color-ocean-100);
+  --sinch-comp-color-swatch-color-light-gray-background: var(--sinch-ref-color-neutral-200);
+  --sinch-comp-color-swatch-color-light-green-background: var(--sinch-ref-color-grass-200);
+  --sinch-comp-color-swatch-color-light-orange-background: var(--sinch-ref-color-pumpkin-200);
+  --sinch-comp-color-swatch-color-light-pink-background: var(--sinch-ref-color-candy-200);
+  --sinch-comp-color-swatch-color-light-red-background: var(--sinch-ref-color-raspberry-200);
+  --sinch-comp-color-swatch-color-light-violet-background: var(--sinch-ref-color-violet-200);
+  --sinch-comp-color-swatch-color-light-yellow-background: var(--sinch-ref-color-honey-200);
+  --sinch-comp-color-swatch-color-orange-background: var(--sinch-ref-color-pumpkin-400);
+  --sinch-comp-color-swatch-color-outline-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-color-swatch-color-pink-background: var(--sinch-ref-color-candy-400);
+  --sinch-comp-color-swatch-color-red-background: var(--sinch-ref-color-raspberry-500);
+  --sinch-comp-color-swatch-color-skintone-dark-background: #7C533E;
+  --sinch-comp-color-swatch-color-skintone-default-background: #FFCC4D;
+  --sinch-comp-color-swatch-color-skintone-light-background: #F7DECE;
+  --sinch-comp-color-swatch-color-skintone-light-medium-background: #F3D2A2;
+  --sinch-comp-color-swatch-color-skintone-medium-background: #D4AB88;
+  --sinch-comp-color-swatch-color-skintone-medium-dark-background: #AF7E57;
+  --sinch-comp-color-swatch-color-violet-background: var(--sinch-ref-color-violet-400);
+  --sinch-comp-color-swatch-color-yellow-background: var(--sinch-ref-color-honey-400);
 }

comp/date-picker.css

 .nectary-theme-base {
   --sinch-comp-date-picker-day-color-checked-background-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-date-picker-day-color-checked-border-initial: transparent;
-  --sinch-comp-date-picker-day-color-checked-text-initial: var(--sinch-sys-color-text-inverted);
-  --sinch-comp-date-picker-day-color-default-background-hover: var(--sinch-sys-color-container-complement-secondary-hover);
-  --sinch-comp-date-picker-day-color-default-background-initial: var(--sinch-sys-color-container-transparent-default);
-  --sinch-comp-date-picker-day-color-default-border-initial: transparent;
-  --sinch-comp-date-picker-day-color-default-outline-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-date-picker-day-color-default-range-background: var(--sinch-sys-color-container-complement-secondary-hover);
+  --sinch-comp-date-picker-day-color-checked-border-initial: var(--sinch-sys-color-basic-transparent);
+  --sinch-comp-date-picker-day-color-checked-text-initial: var(--sinch-sys-color-basic-pure);
+  --sinch-comp-date-picker-day-color-default-background-hover: #0060631A;
+  --sinch-comp-date-picker-day-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
+  --sinch-comp-date-picker-day-color-default-border-initial: var(--sinch-sys-color-basic-transparent);
+  --sinch-comp-date-picker-day-color-default-outline-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-date-picker-day-color-default-range-background: #0060631A;
   --sinch-comp-date-picker-day-color-default-text-initial: var(--sinch-sys-color-text-default);
@@ -21,10 +21,10 @@ --sinch-comp-date-picker-day-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
   --sinch-comp-date-picker-today-color-checked-border-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-date-picker-today-color-checked-text-initial: var(--sinch-sys-color-text-inverted);
-  --sinch-comp-date-picker-today-color-default-background-hover: var(--sinch-sys-color-container-complement-secondary-hover);
-  --sinch-comp-date-picker-today-color-default-background-initial: var(--sinch-sys-color-container-transparent-default);
+  --sinch-comp-date-picker-today-color-checked-text-initial: var(--sinch-sys-color-basic-pure);
+  --sinch-comp-date-picker-today-color-default-background-hover: #0060631A;
+  --sinch-comp-date-picker-today-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
   --sinch-comp-date-picker-today-color-default-border-initial: var(--sinch-sys-color-primary-default);
   --sinch-comp-date-picker-today-color-default-text-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-date-picker-today-color-disabled-border-initial: var(--sinch-sys-color-border-light);
+  --sinch-comp-date-picker-today-color-disabled-border-initial: var(--sinch-sys-color-border-subtle);
   --sinch-comp-date-picker-today-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
   --sinch-comp-date-picker-weekday-color-default-text-initial: var(--sinch-sys-color-text-default);
 }

comp/dialog.css

 .nectary-theme-base {
-  --sinch-comp-dialog-color-default-background-initial: var(--sinch-sys-color-container-main-default);
+  --sinch-comp-dialog-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
   --sinch-comp-dialog-color-default-icon-initial: var(--sinch-sys-color-text-default);
@@ -4,0 +4,0 @@ --sinch-comp-dialog-color-default-title-initial: var(--sinch-sys-color-text-default);

comp/field.css

@@ -8,3 +8,3 @@ .nectary-theme-base {
   --sinch-comp-field-color-disabled-optional-initial: var(--sinch-sys-color-text-disabled);
-  --sinch-comp-field-color-invalid-text-initial: var(--sinch-sys-color-text-invalid);
+  --sinch-comp-field-color-invalid-text-initial: var(--sinch-sys-color-feedback-danger-default);
   --sinch-comp-field-font-additional: var(--sinch-sys-font-body-xs);
@@ -11,0 +11,0 @@ --sinch-comp-field-font-invalid: var(--sinch-sys-font-body-xs);

comp/file-drop.css

 .nectary-theme-base {
-  --sinch-comp-file-drop-color-default-background-active: var(--sinch-sys-color-container-complement-tertiary-default);
-  --sinch-comp-file-drop-color-default-background-initial: var(--sinch-sys-color-container-contrast-secondary-default);
-  --sinch-comp-file-drop-color-default-border-active: var(--sinch-sys-color-border-focus);
-  --sinch-comp-file-drop-color-default-border-initial: var(--sinch-sys-color-border-dark);
+  --sinch-comp-file-drop-color-default-background-active: var(--sinch-sys-color-feedback-info-subtle);
+  --sinch-comp-file-drop-color-default-background-initial: var(--sinch-sys-color-surface-secondary-default);
+  --sinch-comp-file-drop-color-default-border-active: var(--sinch-sys-color-focus);
+  --sinch-comp-file-drop-color-default-border-initial: var(--sinch-sys-color-border-strong);
   --sinch-comp-file-drop-color-default-placeholder-active: var(--sinch-sys-color-text-muted);
   --sinch-comp-file-drop-color-default-placeholder-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-file-drop-color-disabled-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-file-drop-color-disabled-border-initial: var(--sinch-sys-color-border-dark);
+  --sinch-comp-file-drop-color-disabled-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-file-drop-color-disabled-border-initial: var(--sinch-sys-color-border-strong);
   --sinch-comp-file-drop-color-disabled-placeholder-initial: var(--sinch-sys-color-text-disabled);
-  --sinch-comp-file-drop-color-invalid-background-initial: var(--sinch-sys-color-container-contrast-secondary-default);
-  --sinch-comp-file-drop-color-invalid-border-initial: var(--sinch-sys-color-border-invalid);
+  --sinch-comp-file-drop-color-invalid-background-initial: var(--sinch-sys-color-surface-secondary-default);
+  --sinch-comp-file-drop-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
   --sinch-comp-file-drop-color-invalid-placeholder-initial: var(--sinch-sys-color-text-default);
@@ -14,0 +14,0 @@ --sinch-comp-file-drop-font-placeholder: var(--sinch-sys-font-body-m);

comp/file-status.css

 .nectary-theme-base {
-  --sinch-comp-file-status-color-error-background: var(--sinch-sys-color-container-complement-quaternary-default);
-  --sinch-comp-file-status-color-error-icon: var(--sinch-sys-color-feedback-invalid-contrast);
+  --sinch-comp-file-status-color-error-background: var(--sinch-sys-color-feedback-danger-subtle);
+  --sinch-comp-file-status-color-error-icon: var(--sinch-sys-color-feedback-danger-default);
   --sinch-comp-file-status-color-error-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-file-status-color-loading-background: var(--sinch-sys-color-container-contrast-secondary-default);
+  --sinch-comp-file-status-color-loading-background: var(--sinch-sys-color-surface-secondary-default);
   --sinch-comp-file-status-color-loading-icon: var(--sinch-sys-color-text-default);
   --sinch-comp-file-status-color-loading-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-file-status-color-pending-background: var(--sinch-sys-color-container-contrast-secondary-default);
+  --sinch-comp-file-status-color-pending-background: var(--sinch-sys-color-surface-secondary-default);
   --sinch-comp-file-status-color-pending-icon: var(--sinch-sys-color-text-default);
   --sinch-comp-file-status-color-pending-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-file-status-color-progress-background: var(--sinch-sys-color-container-contrast-secondary-default);
+  --sinch-comp-file-status-color-progress-background: var(--sinch-sys-color-surface-secondary-default);
   --sinch-comp-file-status-color-progress-icon: var(--sinch-sys-color-text-default);
   --sinch-comp-file-status-color-progress-info: var(--sinch-sys-color-text-muted);
   --sinch-comp-file-status-color-progress-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-file-status-color-success-background: var(--sinch-sys-color-container-contrast-secondary-default);
-  --sinch-comp-file-status-color-success-icon: var(--sinch-sys-color-feedback-success-contrast);
+  --sinch-comp-file-status-color-success-background: var(--sinch-sys-color-surface-secondary-default);
+  --sinch-comp-file-status-color-success-icon: var(--sinch-sys-color-feedback-success-default);
   --sinch-comp-file-status-color-success-text: var(--sinch-sys-color-text-default);
@@ -18,0 +18,0 @@ --sinch-comp-file-status-font-body: var(--sinch-sys-font-body-m);

comp/inline-alert.css

 .nectary-theme-base {
-  --sinch-comp-inline-alert-color-error-default-background: var(--sinch-sys-color-feedback-invalid-background);
-  --sinch-comp-inline-alert-color-error-default-icon: var(--sinch-sys-color-feedback-invalid-contrast);
+  --sinch-comp-inline-alert-color-error-default-background: var(--sinch-sys-color-feedback-danger-subtle);
+  --sinch-comp-inline-alert-color-error-default-icon: var(--sinch-sys-color-feedback-danger-default);
   --sinch-comp-inline-alert-color-error-default-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-inline-alert-color-info-default-background: var(--sinch-sys-color-feedback-info-background);
-  --sinch-comp-inline-alert-color-info-default-icon: var(--sinch-sys-color-feedback-info-contrast);
+  --sinch-comp-inline-alert-color-info-default-background: var(--sinch-sys-color-feedback-info-subtle);
+  --sinch-comp-inline-alert-color-info-default-icon: var(--sinch-sys-color-feedback-info-default);
   --sinch-comp-inline-alert-color-info-default-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-inline-alert-color-success-default-background: var(--sinch-sys-color-feedback-success-background);
-  --sinch-comp-inline-alert-color-success-default-icon: var(--sinch-sys-color-feedback-success-contrast);
+  --sinch-comp-inline-alert-color-success-default-background: var(--sinch-sys-color-feedback-success-subtle);
+  --sinch-comp-inline-alert-color-success-default-icon: var(--sinch-sys-color-feedback-success-default);
   --sinch-comp-inline-alert-color-success-default-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-inline-alert-color-warning-default-background: var(--sinch-sys-color-feedback-warning-background);
-  --sinch-comp-inline-alert-color-warning-default-icon: var(--sinch-sys-color-feedback-warning-contrast);
+  --sinch-comp-inline-alert-color-warning-default-background: var(--sinch-sys-color-feedback-warning-subtle);
+  --sinch-comp-inline-alert-color-warning-default-icon: var(--sinch-sys-color-feedback-warning-default);
   --sinch-comp-inline-alert-color-warning-default-text: var(--sinch-sys-color-text-default);
@@ -14,0 +14,0 @@ --sinch-comp-inline-alert-font-body: var(--sinch-sys-font-body-m);

comp/input.css

 .nectary-theme-base {
-  --sinch-comp-input-color-default-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-input-color-default-border-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-input-color-default-border-initial: var(--sinch-sys-color-border-dark);
+  --sinch-comp-input-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-input-color-default-border-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-input-color-default-border-initial: var(--sinch-sys-color-border-strong);
   --sinch-comp-input-color-default-icon-initial: var(--sinch-sys-color-text-default);
@@ -11,3 +11,3 @@ --sinch-comp-input-color-default-text-initial: var(--sinch-sys-color-text-default);
   --sinch-comp-input-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
-  --sinch-comp-input-color-invalid-border-initial: var(--sinch-sys-color-border-invalid);
+  --sinch-comp-input-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
   --sinch-comp-input-font-input: var(--sinch-sys-font-body-m);
@@ -14,0 +14,0 @@ --sinch-comp-input-font-placeholder: var(--sinch-sys-font-body-m);

comp/link.css

 .nectary-theme-base {
-  --sinch-comp-link-color-default-icon-hover: var(--sinch-sys-color-primary-active);
-  --sinch-comp-link-color-default-icon-initial: var(--sinch-sys-color-text-link);
-  --sinch-comp-link-color-default-outline-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-link-color-default-text-hover: var(--sinch-sys-color-primary-active);
-  --sinch-comp-link-color-default-text-initial: var(--sinch-sys-color-text-link);
-  --sinch-comp-link-color-disabled-icon-initial: var(--sinch-sys-color-text-link-disabled);
-  --sinch-comp-link-color-disabled-text-initial: var(--sinch-sys-color-text-link-disabled);
+  --sinch-comp-link-color-default-icon-hover: var(--sinch-sys-color-primary-hover);
+  --sinch-comp-link-color-default-icon-initial: var(--sinch-sys-color-primary-default);
+  --sinch-comp-link-color-default-outline-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-link-color-default-text-hover: var(--sinch-sys-color-primary-hover);
+  --sinch-comp-link-color-default-text-initial: var(--sinch-sys-color-primary-default);
+  --sinch-comp-link-color-disabled-icon-initial: var(--sinch-sys-color-primary-disabled);
+  --sinch-comp-link-color-disabled-text-initial: var(--sinch-sys-color-primary-disabled);
   --sinch-comp-link-default-font-initial: var(--sinch-sys-font-body-link);
@@ -10,0 +10,0 @@ --sinch-comp-link-default-text-decoration-disabled: none;

comp/list.css

 .nectary-theme-base {
-  --sinch-comp-list-color-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
-  --sinch-comp-list-color-default-background-initial: var(--sinch-sys-color-container-transparent-default);
-  --sinch-comp-list-color-default-border-initial: var(--sinch-sys-color-border-light);
+  --sinch-comp-list-color-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
+  --sinch-comp-list-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
+  --sinch-comp-list-color-default-border-initial: var(--sinch-sys-color-border-subtle);
 }

comp/pagination.css

 .nectary-theme-base {
-  --sinch-comp-pagination-color-checked-background-hover: var(--sinch-sys-color-container-transparent-active);
-  --sinch-comp-pagination-color-checked-background-initial: var(--sinch-sys-color-container-transparent-active);
-  --sinch-comp-pagination-color-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
-  --sinch-comp-pagination-color-default-background-initial: var(--sinch-sys-color-container-transparent-default);
+  --sinch-comp-pagination-color-checked-background-hover: var(--sinch-sys-color-surface-transparent-active);
+  --sinch-comp-pagination-color-checked-background-initial: var(--sinch-sys-color-surface-transparent-active);
+  --sinch-comp-pagination-color-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
+  --sinch-comp-pagination-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
   --sinch-comp-pagination-color-default-icon-default: var(--sinch-sys-color-text-default);
-  --sinch-comp-pagination-color-default-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-pagination-color-default-outline-focus: var(--sinch-sys-color-focus);
   --sinch-comp-pagination-color-default-text-initial: var(--sinch-sys-color-text-default);
@@ -9,0 +9,0 @@ --sinch-comp-pagination-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);

comp/popover.css

 .nectary-theme-base {
-  --sinch-comp-popover-color-default-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-popover-color-default-border-initial: var(--sinch-sys-color-border-light);
+  --sinch-comp-popover-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-popover-color-default-border-initial: var(--sinch-sys-color-border-subtle);
   --sinch-comp-popover-shadow: var(--sinch-ref-shadow-level-2);
   --sinch-comp-popover-shape-radius: var(--sinch-sys-shape-radius-m);
 }

comp/progress-stepper.css

 .nectary-theme-base {
-  --sinch-comp-progress-stepper-step-color-complete-background-hover: var(--sinch-sys-color-container-transparent-hover);
+  --sinch-comp-progress-stepper-step-color-complete-background-hover: var(--sinch-sys-color-surface-transparent-hover);
   --sinch-comp-progress-stepper-step-color-complete-label-default: var(--sinch-sys-color-text-muted);
-  --sinch-comp-progress-stepper-step-color-complete-progress-background: var(--sinch-sys-color-container-contrast-secondary-default);
+  --sinch-comp-progress-stepper-step-color-complete-progress-background: var(--sinch-sys-color-surface-secondary-default);
   --sinch-comp-progress-stepper-step-color-complete-progress-bar: var(--sinch-sys-color-primary-default);
   --sinch-comp-progress-stepper-step-color-complete-current-label-default: var(--sinch-sys-color-text-default);
   --sinch-comp-progress-stepper-step-color-inactive-label-default: var(--sinch-sys-color-text-disabled);
-  --sinch-comp-progress-stepper-step-color-inactive-progress-background: var(--sinch-sys-color-container-contrast-secondary-default);
-  --sinch-comp-progress-stepper-step-color-incomplete-background-hover: var(--sinch-sys-color-container-transparent-hover);
+  --sinch-comp-progress-stepper-step-color-inactive-progress-background: var(--sinch-sys-color-surface-secondary-default);
+  --sinch-comp-progress-stepper-step-color-incomplete-background-hover: var(--sinch-sys-color-surface-transparent-hover);
   --sinch-comp-progress-stepper-step-color-incomplete-label-default: var(--sinch-sys-color-text-muted);
-  --sinch-comp-progress-stepper-step-color-incomplete-progress-background: var(--sinch-sys-color-container-contrast-secondary-default);
+  --sinch-comp-progress-stepper-step-color-incomplete-progress-background: var(--sinch-sys-color-surface-secondary-default);
   --sinch-comp-progress-stepper-step-color-incomplete-progress-bar: var(--sinch-sys-color-primary-default);
   --sinch-comp-progress-stepper-step-color-incomplete-current-label-default: var(--sinch-sys-color-text-default);
-  --sinch-comp-progress-stepper-step-color-invalid-background-hover: var(--sinch-sys-color-container-transparent-hover);
-  --sinch-comp-progress-stepper-step-color-invalid-icon-default: var(--sinch-sys-color-feedback-invalid-contrast);
-  --sinch-comp-progress-stepper-step-color-invalid-label-default: var(--sinch-sys-color-text-invalid);
-  --sinch-comp-progress-stepper-step-color-invalid-progress-background: var(--sinch-sys-color-feedback-invalid-background);
-  --sinch-comp-progress-stepper-step-color-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-progress-stepper-step-color-invalid-background-hover: var(--sinch-sys-color-surface-transparent-hover);
+  --sinch-comp-progress-stepper-step-color-invalid-icon-default: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-progress-stepper-step-color-invalid-label-default: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-progress-stepper-step-color-invalid-progress-background: var(--sinch-sys-color-feedback-danger-subtle);
+  --sinch-comp-progress-stepper-step-color-outline-focus: var(--sinch-sys-color-focus);
   --sinch-comp-progress-stepper-step-font-complete-label: var(--sinch-sys-font-body-m);
@@ -20,0 +20,0 @@ --sinch-comp-progress-stepper-step-font-complete-current-label: var(--sinch-sys-font-body-emphasize);

comp/progress.css

 .nectary-theme-base {
-  --sinch-comp-progress-color-default-background-initial: var(--sinch-sys-color-container-complement-secondary-hover);
+  --sinch-comp-progress-color-default-background-initial: #00606333;
   --sinch-comp-progress-color-default-bar-initial: var(--sinch-sys-color-primary-default);
   --sinch-comp-progress-color-default-text-initial: var(--sinch-sys-color-text-default);
 }

comp/radio.css

 .nectary-theme-base {
-  --sinch-comp-radio-color-checked-border-active: var(--sinch-sys-color-border-dark);
-  --sinch-comp-radio-color-checked-border-hover: var(--sinch-sys-color-border-dark);
-  --sinch-comp-radio-color-checked-border-initial: var(--sinch-sys-color-border-dark);
+  --sinch-comp-radio-color-checked-border-active: var(--sinch-sys-color-border-strong);
+  --sinch-comp-radio-color-checked-border-hover: var(--sinch-sys-color-border-strong);
+  --sinch-comp-radio-color-checked-border-initial: var(--sinch-sys-color-border-strong);
   --sinch-comp-radio-color-checked-knob-active: var(--sinch-sys-color-primary-active);
@@ -11,21 +11,21 @@ --sinch-comp-radio-color-checked-knob-hover: var(--sinch-sys-color-primary-hover);
   --sinch-comp-radio-color-checked-disabled-label-initial: var(--sinch-sys-color-text-disabled);
-  --sinch-comp-radio-color-default-background-active: var(--sinch-sys-color-container-main-active);
-  --sinch-comp-radio-color-default-background-hover: var(--sinch-sys-color-container-main-hover);
-  --sinch-comp-radio-color-default-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-radio-color-default-border-active: var(--sinch-sys-color-border-dark);
-  --sinch-comp-radio-color-default-border-hover: var(--sinch-sys-color-border-dark);
-  --sinch-comp-radio-color-default-border-initial: var(--sinch-sys-color-border-dark);
+  --sinch-comp-radio-color-default-background-active: var(--sinch-sys-color-surface-primary-active);
+  --sinch-comp-radio-color-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
+  --sinch-comp-radio-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-radio-color-default-border-active: var(--sinch-sys-color-border-strong);
+  --sinch-comp-radio-color-default-border-hover: var(--sinch-sys-color-border-strong);
+  --sinch-comp-radio-color-default-border-initial: var(--sinch-sys-color-border-strong);
   --sinch-comp-radio-color-default-label-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-radio-color-default-outline-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-radio-color-disabled-background-initial: var(--sinch-sys-color-container-main-default);
+  --sinch-comp-radio-color-default-outline-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-radio-color-disabled-background-initial: var(--sinch-sys-color-surface-primary-default);
   --sinch-comp-radio-color-disabled-border-initial: var(--sinch-sys-color-border-disabled);
   --sinch-comp-radio-color-disabled-label-initial: var(--sinch-sys-color-text-disabled);
-  --sinch-comp-radio-color-invalid-background-active: var(--sinch-sys-color-container-main-active);
-  --sinch-comp-radio-color-invalid-background-hover: var(--sinch-sys-color-container-main-hover);
-  --sinch-comp-radio-color-invalid-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-radio-color-invalid-border-active: var(--sinch-sys-color-text-invalid);
-  --sinch-comp-radio-color-invalid-border-hover: var(--sinch-sys-color-text-invalid);
-  --sinch-comp-radio-color-invalid-border-initial: var(--sinch-sys-color-text-invalid);
-  --sinch-comp-radio-color-invalid-label-initial: var(--sinch-sys-color-border-invalid);
+  --sinch-comp-radio-color-invalid-background-active: var(--sinch-sys-color-surface-primary-active);
+  --sinch-comp-radio-color-invalid-background-hover: var(--sinch-sys-color-surface-primary-hover);
+  --sinch-comp-radio-color-invalid-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-radio-color-invalid-border-active: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-radio-color-invalid-border-hover: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-radio-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
+  --sinch-comp-radio-color-invalid-label-initial: var(--sinch-sys-color-feedback-danger-default);
   --sinch-comp-radio-font-label: var(--sinch-sys-font-body-m);
 }

comp/segment.css

 .nectary-theme-base {
-  --sinch-comp-segment-color-default-background-initial: var(--sinch-sys-color-container-main-default);
+  --sinch-comp-segment-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
   --sinch-comp-segment-color-default-border-initial: var(--sinch-sys-color-border-default);
@@ -4,0 +4,0 @@ --sinch-comp-segment-color-default-text-initial: var(--sinch-sys-color-text-default);

comp/segmented-control.css

 .nectary-theme-base {
-  --sinch-comp-segmented-control-color-checked-background-initial: var(--sinch-sys-color-container-main-active);
-  --sinch-comp-segmented-control-color-checked-border-initial: var(--sinch-sys-color-border-active);
+  --sinch-comp-segmented-control-color-checked-background-initial: var(--sinch-sys-color-surface-primary-active);
+  --sinch-comp-segmented-control-color-checked-border-initial: var(--sinch-sys-color-primary-default);
   --sinch-comp-segmented-control-color-checked-icon-initial: var(--sinch-sys-color-primary-default);
   --sinch-comp-segmented-control-color-checked-text-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-segmented-control-color-default-background-hover: var(--sinch-sys-color-container-main-hover);
-  --sinch-comp-segmented-control-color-default-background-initial: var(--sinch-sys-color-container-main-default);
+  --sinch-comp-segmented-control-color-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
+  --sinch-comp-segmented-control-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
   --sinch-comp-segmented-control-color-default-border-initial: var(--sinch-sys-color-border-default);
   --sinch-comp-segmented-control-color-default-icon-initial: var(--sinch-sys-color-text-muted);
-  --sinch-comp-segmented-control-color-default-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-segmented-control-color-default-outline-focus: var(--sinch-sys-color-focus);
   --sinch-comp-segmented-control-color-default-text-initial: var(--sinch-sys-color-text-muted);
-  --sinch-comp-segmented-control-color-disabled-background-initial: var(--sinch-sys-color-container-main-default);
+  --sinch-comp-segmented-control-color-disabled-background-initial: var(--sinch-sys-color-surface-primary-default);
   --sinch-comp-segmented-control-color-disabled-border-initial: var(--sinch-sys-color-border-default);
@@ -14,0 +14,0 @@ --sinch-comp-segmented-control-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);

comp/select-button.css

 .nectary-theme-base {
-  --sinch-comp-select-button-color-default-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-select-button-color-default-border-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-select-button-color-default-border-initial: var(--sinch-sys-color-border-dark);
+  --sinch-comp-select-button-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-select-button-color-default-border-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-select-button-color-default-border-initial: var(--sinch-sys-color-border-strong);
   --sinch-comp-select-button-color-default-icon-initial: var(--sinch-sys-color-text-default);
@@ -12,3 +12,3 @@ --sinch-comp-select-button-color-default-placeholder-initial: var(--sinch-sys-color-text-muted);
   --sinch-comp-select-button-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
-  --sinch-comp-select-button-color-invalid-border-initial: var(--sinch-sys-color-border-invalid);
+  --sinch-comp-select-button-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
   --sinch-comp-select-button-font-input: var(--sinch-sys-font-body-m);
@@ -15,0 +15,0 @@ --sinch-comp-select-button-font-placeholder: var(--sinch-sys-font-body-m);

comp/select-menu.css

 .nectary-theme-base {
-  --sinch-comp-select-menu-color-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
-  --sinch-comp-select-menu-color-default-background-initial: var(--sinch-sys-color-container-transparent-default);
-  --sinch-comp-select-menu-color-default-background-selected: var(--sinch-sys-color-container-transparent-hover);
+  --sinch-comp-select-menu-color-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
+  --sinch-comp-select-menu-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
+  --sinch-comp-select-menu-color-default-background-selected: var(--sinch-sys-color-surface-transparent-hover);
   --sinch-comp-select-menu-color-default-icon-initial: var(--sinch-sys-color-text-default);
   --sinch-comp-select-menu-color-default-not-found-text-initial: var(--sinch-sys-color-text-muted);
   --sinch-comp-select-menu-color-default-option-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-select-menu-color-disabled-background-initial: var(--sinch-sys-color-container-transparent-disabled);
+  --sinch-comp-select-menu-color-disabled-background-initial: var(--sinch-sys-color-surface-transparent-disabled);
   --sinch-comp-select-menu-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
@@ -10,0 +10,0 @@ --sinch-comp-select-menu-color-disabled-option-initial: var(--sinch-sys-color-text-disabled);

comp/tab.css

 .nectary-theme-base {
-  --sinch-comp-tab-color-checked-border-initial: var(--sinch-sys-color-border-active);
+  --sinch-comp-tab-color-checked-border-initial: var(--sinch-sys-color-primary-default);
   --sinch-comp-tab-color-checked-icon-initial: var(--sinch-sys-color-primary-default);
   --sinch-comp-tab-color-checked-text-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-tab-color-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
-  --sinch-comp-tab-color-default-background-initial: var(--sinch-sys-color-container-transparent-default);
+  --sinch-comp-tab-color-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
+  --sinch-comp-tab-color-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
   --sinch-comp-tab-color-default-border-initial: var(--sinch-sys-color-border-default);
   --sinch-comp-tab-color-default-icon-initial: var(--sinch-sys-color-text-muted);
-  --sinch-comp-tab-color-default-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-tab-color-default-outline-focus: var(--sinch-sys-color-focus);
   --sinch-comp-tab-color-default-text-initial: var(--sinch-sys-color-text-muted);
@@ -11,0 +11,0 @@ --sinch-comp-tab-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);

comp/table.css

 .nectary-theme-base {
-  --sinch-comp-table-color-cell-default-border-initial: var(--sinch-sys-color-border-light);
+  --sinch-comp-table-color-cell-default-border-initial: var(--sinch-sys-color-border-subtle);
   --sinch-comp-table-color-head-cell-default-border-initial: var(--sinch-sys-color-border-default);
@@ -8,6 +8,6 @@ --sinch-comp-table-color-head-cell-default-icon-initial: var(--sinch-sys-color-text-muted);
   --sinch-comp-table-color-head-cell-sorted-text-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-table-color-row-checked-background-initial: var(--sinch-sys-color-container-transparent-active);
-  --sinch-comp-table-color-row-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
-  --sinch-comp-table-color-row-default-background-initial: var(--sinch-sys-color-container-transparent-default);
-  --sinch-comp-table-color-row-default-background-sticky: var(--sinch-sys-color-container-main-default);
+  --sinch-comp-table-color-row-checked-background-initial: var(--sinch-sys-color-surface-transparent-active);
+  --sinch-comp-table-color-row-default-background-hover: var(--sinch-sys-color-surface-transparent-hover);
+  --sinch-comp-table-color-row-default-background-initial: var(--sinch-sys-color-surface-transparent-default);
+  --sinch-comp-table-color-row-default-background-sticky: var(--sinch-sys-color-surface-primary-default);
 }

comp/tag.css

 .nectary-theme-base {
-  --sinch-comp-tag-color-blue-background: var(--sinch-ref-color-complementary-night-400);
-  --sinch-comp-tag-color-blue-foreground: var(--sinch-ref-color-main-snow-100);
-  --sinch-comp-tag-color-brown-background: var(--sinch-ref-color-complementary-mud-400);
-  --sinch-comp-tag-color-brown-foreground: var(--sinch-ref-color-main-snow-100);
-  --sinch-comp-tag-color-celtic-background: var(--sinch-sys-color-feedback-info-background);
-  --sinch-comp-tag-color-celtic-foreground: var(--sinch-sys-color-feedback-info-foreground);
-  --sinch-comp-tag-color-dark-blue-background: var(--sinch-ref-color-complementary-night-700);
-  --sinch-comp-tag-color-dark-blue-foreground: var(--sinch-ref-color-complementary-night-200);
-  --sinch-comp-tag-color-dark-brown-background: var(--sinch-ref-color-complementary-mud-700);
-  --sinch-comp-tag-color-dark-brown-foreground: var(--sinch-ref-color-complementary-mud-200);
-  --sinch-comp-tag-color-dark-gray-background: var(--sinch-ref-color-complementary-dirt-700);
-  --sinch-comp-tag-color-dark-gray-foreground: var(--sinch-ref-color-complementary-dirt-200);
-  --sinch-comp-tag-color-dark-green-background: var(--sinch-ref-color-complementary-grass-700);
-  --sinch-comp-tag-color-dark-green-foreground: var(--sinch-ref-color-complementary-grass-200);
-  --sinch-comp-tag-color-dark-pink-background: var(--sinch-ref-color-complementary-candy-700);
-  --sinch-comp-tag-color-dark-pink-foreground: var(--sinch-ref-color-complementary-candy-200);
-  --sinch-comp-tag-color-dark-red-background: var(--sinch-ref-color-main-raspberry-700);
-  --sinch-comp-tag-color-dark-red-foreground: var(--sinch-ref-color-main-raspberry-200);
-  --sinch-comp-tag-color-dark-violet-background: var(--sinch-ref-color-complementary-violet-700);
-  --sinch-comp-tag-color-dark-violet-foreground: var(--sinch-ref-color-complementary-violet-200);
-  --sinch-comp-tag-color-dark-yellow-background: var(--sinch-ref-color-complementary-bolt-700);
-  --sinch-comp-tag-color-dark-yellow-foreground: var(--sinch-ref-color-complementary-bolt-200);
-  --sinch-comp-tag-color-dark-orange-background: var(--sinch-ref-color-complementary-orange-700);
-  --sinch-comp-tag-color-dark-orange-foreground: var(--sinch-ref-color-complementary-orange-200);
-  --sinch-comp-tag-color-default-background: var(--sinch-ref-color-main-snow-500);
-  --sinch-comp-tag-color-default-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-tag-color-gray-background: var(--sinch-ref-color-complementary-dirt-400);
-  --sinch-comp-tag-color-gray-foreground: var(--sinch-ref-color-main-snow-100);
-  --sinch-comp-tag-color-green-background: var(--sinch-ref-color-complementary-grass-400);
-  --sinch-comp-tag-color-green-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-tag-color-jasper-background: var(--sinch-sys-color-feedback-invalid-background);
-  --sinch-comp-tag-color-jasper-foreground: var(--sinch-sys-color-feedback-invalid-foreground);
-  --sinch-comp-tag-color-light-blue-background: var(--sinch-ref-color-complementary-night-200);
-  --sinch-comp-tag-color-light-blue-foreground: var(--sinch-ref-color-complementary-night-700);
-  --sinch-comp-tag-color-light-brown-background: var(--sinch-ref-color-complementary-mud-200);
-  --sinch-comp-tag-color-light-brown-foreground: var(--sinch-ref-color-complementary-mud-700);
-  --sinch-comp-tag-color-light-gray-background: var(--sinch-ref-color-complementary-dirt-200);
-  --sinch-comp-tag-color-light-gray-foreground: var(--sinch-ref-color-complementary-dirt-700);
-  --sinch-comp-tag-color-light-green-background: var(--sinch-ref-color-complementary-grass-200);
-  --sinch-comp-tag-color-light-green-foreground: var(--sinch-ref-color-complementary-grass-700);
-  --sinch-comp-tag-color-light-orange-background: var(--sinch-ref-color-complementary-orange-200);
-  --sinch-comp-tag-color-light-orange-foreground: var(--sinch-ref-color-complementary-orange-700);
-  --sinch-comp-tag-color-light-pink-background: var(--sinch-ref-color-complementary-candy-200);
-  --sinch-comp-tag-color-light-pink-foreground: var(--sinch-ref-color-complementary-candy-700);
-  --sinch-comp-tag-color-light-red-background: var(--sinch-ref-color-main-raspberry-200);
-  --sinch-comp-tag-color-light-red-foreground: var(--sinch-ref-color-main-raspberry-700);
-  --sinch-comp-tag-color-light-violet-background: var(--sinch-ref-color-complementary-violet-200);
-  --sinch-comp-tag-color-light-violet-foreground: var(--sinch-ref-color-complementary-violet-700);
-  --sinch-comp-tag-color-light-yellow-background: var(--sinch-ref-color-complementary-bolt-200);
-  --sinch-comp-tag-color-light-yellow-foreground: var(--sinch-ref-color-complementary-bolt-700);
-  --sinch-comp-tag-color-olive-background: var(--sinch-sys-color-feedback-success-background);
-  --sinch-comp-tag-color-olive-foreground: var(--sinch-sys-color-feedback-success-foreground);
-  --sinch-comp-tag-color-orange-background: var(--sinch-ref-color-complementary-orange-400);
-  --sinch-comp-tag-color-orange-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-tag-color-pink-background: var(--sinch-ref-color-complementary-candy-400);
-  --sinch-comp-tag-color-pink-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-tag-color-pumpkin-background: var(--sinch-sys-color-feedback-warning-background);
-  --sinch-comp-tag-color-pumpkin-foreground: var(--sinch-sys-color-feedback-warning-foreground);
-  --sinch-comp-tag-color-red-background: var(--sinch-ref-color-main-raspberry-500);
-  --sinch-comp-tag-color-red-foreground: var(--sinch-ref-color-main-stormy-800);
-  --sinch-comp-tag-color-violet-background: var(--sinch-ref-color-complementary-violet-400);
-  --sinch-comp-tag-color-violet-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-comp-tag-color-yellow-background: var(--sinch-ref-color-complementary-bolt-400);
-  --sinch-comp-tag-color-yellow-foreground: var(--sinch-ref-color-main-stormy-700);
+  --sinch-comp-tag-color-blue-background: var(--sinch-ref-color-ocean-700);
+  --sinch-comp-tag-color-blue-foreground: var(--sinch-sys-color-basic-pure);
+  --sinch-comp-tag-color-danger-background: var(--sinch-sys-color-feedback-danger-subtle);
+  --sinch-comp-tag-color-danger-foreground: var(--sinch-sys-color-feedback-danger-strong);
+  --sinch-comp-tag-color-dark-blue-background: var(--sinch-ref-color-ocean-800);
+  --sinch-comp-tag-color-dark-blue-foreground: var(--sinch-ref-color-ocean-100);
+  --sinch-comp-tag-color-dark-gray-background: var(--sinch-ref-color-neutral-800);
+  --sinch-comp-tag-color-dark-gray-foreground: var(--sinch-ref-color-neutral-200);
+  --sinch-comp-tag-color-dark-green-background: var(--sinch-ref-color-grass-700);
+  --sinch-comp-tag-color-dark-green-foreground: var(--sinch-ref-color-grass-200);
+  --sinch-comp-tag-color-dark-orange-background: var(--sinch-ref-color-pumpkin-700);
+  --sinch-comp-tag-color-dark-orange-foreground: var(--sinch-ref-color-pumpkin-200);
+  --sinch-comp-tag-color-dark-pink-background: var(--sinch-ref-color-candy-700);
+  --sinch-comp-tag-color-dark-pink-foreground: var(--sinch-ref-color-candy-200);
+  --sinch-comp-tag-color-dark-red-background: var(--sinch-ref-color-raspberry-700);
+  --sinch-comp-tag-color-dark-red-foreground: var(--sinch-ref-color-raspberry-200);
+  --sinch-comp-tag-color-dark-violet-background: var(--sinch-ref-color-violet-700);
+  --sinch-comp-tag-color-dark-violet-foreground: var(--sinch-ref-color-violet-200);
+  --sinch-comp-tag-color-dark-yellow-background: var(--sinch-ref-color-honey-700);
+  --sinch-comp-tag-color-dark-yellow-foreground: var(--sinch-ref-color-honey-200);
+  --sinch-comp-tag-color-default-background: var(--sinch-ref-color-neutral-200);
+  --sinch-comp-tag-color-default-foreground: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-tag-color-gray-background: var(--sinch-ref-color-neutral-500);
+  --sinch-comp-tag-color-gray-foreground: var(--sinch-sys-color-basic-pure);
+  --sinch-comp-tag-color-green-background: var(--sinch-ref-color-grass-400);
+  --sinch-comp-tag-color-green-foreground: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-tag-color-info-background: var(--sinch-sys-color-feedback-info-subtle);
+  --sinch-comp-tag-color-info-foreground: var(--sinch-sys-color-feedback-info-strong);
+  --sinch-comp-tag-color-light-blue-background: var(--sinch-ref-color-ocean-100);
+  --sinch-comp-tag-color-light-blue-foreground: var(--sinch-ref-color-ocean-800);
+  --sinch-comp-tag-color-light-gray-background: var(--sinch-ref-color-neutral-200);
+  --sinch-comp-tag-color-light-gray-foreground: var(--sinch-ref-color-neutral-800);
+  --sinch-comp-tag-color-light-green-background: var(--sinch-ref-color-grass-200);
+  --sinch-comp-tag-color-light-green-foreground: var(--sinch-ref-color-grass-700);
+  --sinch-comp-tag-color-light-orange-background: var(--sinch-ref-color-pumpkin-200);
+  --sinch-comp-tag-color-light-orange-foreground: var(--sinch-ref-color-pumpkin-700);
+  --sinch-comp-tag-color-light-pink-background: var(--sinch-ref-color-candy-200);
+  --sinch-comp-tag-color-light-pink-foreground: var(--sinch-ref-color-candy-700);
+  --sinch-comp-tag-color-light-red-background: var(--sinch-ref-color-raspberry-200);
+  --sinch-comp-tag-color-light-red-foreground: var(--sinch-ref-color-raspberry-700);
+  --sinch-comp-tag-color-light-violet-background: var(--sinch-ref-color-violet-200);
+  --sinch-comp-tag-color-light-violet-foreground: var(--sinch-ref-color-violet-700);
+  --sinch-comp-tag-color-light-yellow-background: var(--sinch-ref-color-honey-200);
+  --sinch-comp-tag-color-light-yellow-foreground: var(--sinch-ref-color-honey-700);
+  --sinch-comp-tag-color-orange-background: var(--sinch-ref-color-pumpkin-400);
+  --sinch-comp-tag-color-orange-foreground: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-tag-color-pink-background: var(--sinch-ref-color-candy-400);
+  --sinch-comp-tag-color-pink-foreground: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-tag-color-red-background: var(--sinch-ref-color-raspberry-500);
+  --sinch-comp-tag-color-red-foreground: var(--sinch-ref-color-neutral-950);
+  --sinch-comp-tag-color-success-background: var(--sinch-sys-color-feedback-success-subtle);
+  --sinch-comp-tag-color-success-foreground: var(--sinch-sys-color-feedback-success-strong);
+  --sinch-comp-tag-color-violet-background: var(--sinch-ref-color-violet-400);
+  --sinch-comp-tag-color-violet-foreground: var(--sinch-ref-color-neutral-900);
+  --sinch-comp-tag-color-warning-background: var(--sinch-sys-color-feedback-warning-subtle);
+  --sinch-comp-tag-color-warning-foreground: var(--sinch-sys-color-feedback-warning-strong);
+  --sinch-comp-tag-color-yellow-background: var(--sinch-ref-color-honey-400);
+  --sinch-comp-tag-color-yellow-foreground: var(--sinch-ref-color-neutral-900);
   --sinch-comp-tag-font-size-m-label: var(--sinch-sys-font-body-xs);
@@ -67,0 +61,0 @@ --sinch-comp-tag-font-size-s-label: var(--sinch-sys-font-body-xs);

comp/textarea.css

 .nectary-theme-base {
-  --sinch-comp-textarea-color-default-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-textarea-color-default-border-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-textarea-color-default-border-initial: var(--sinch-sys-color-border-dark);
+  --sinch-comp-textarea-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-textarea-color-default-border-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-textarea-color-default-border-initial: var(--sinch-sys-color-border-strong);
   --sinch-comp-textarea-color-default-text-initial: var(--sinch-sys-color-text-default);
@@ -9,5 +9,5 @@ --sinch-comp-textarea-color-default-text-placeholder: var(--sinch-sys-color-text-muted);
   --sinch-comp-textarea-color-disabled-text-initial: var(--sinch-sys-color-text-disabled);
-  --sinch-comp-textarea-color-invalid-border-initial: var(--sinch-sys-color-border-invalid);
+  --sinch-comp-textarea-color-invalid-border-initial: var(--sinch-sys-color-feedback-danger-default);
   --sinch-comp-textarea-font-input: var(--sinch-sys-font-body-m);
   --sinch-comp-textarea-shape-radius: var(--sinch-comp-button-shape-radius-size-m);
 }

comp/tile-control.css

 .nectary-theme-base {
-  --sinch-comp-tile-control-color-checked-background-initial: var(--sinch-sys-color-container-main-active);
-  --sinch-comp-tile-control-color-checked-border-initial: var(--sinch-sys-color-border-active);
+  --sinch-comp-tile-control-color-checked-background-initial: var(--sinch-sys-color-surface-primary-active);
+  --sinch-comp-tile-control-color-checked-border-initial: var(--sinch-sys-color-primary-default);
   --sinch-comp-tile-control-color-checked-icon-initial: var(--sinch-sys-color-primary-default);
   --sinch-comp-tile-control-color-checked-text-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-tile-control-color-default-background-hover: var(--sinch-sys-color-container-main-hover);
-  --sinch-comp-tile-control-color-default-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-tile-control-color-default-border-hover: var(--sinch-sys-color-container-transparent-hover);
+  --sinch-comp-tile-control-color-default-background-hover: var(--sinch-sys-color-surface-primary-hover);
+  --sinch-comp-tile-control-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-tile-control-color-default-border-hover: var(--sinch-sys-color-surface-transparent-hover);
   --sinch-comp-tile-control-color-default-border-initial: var(--sinch-sys-color-border-default);
   --sinch-comp-tile-control-color-default-icon-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-tile-control-color-default-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-tile-control-color-default-outline-focus: var(--sinch-sys-color-focus);
   --sinch-comp-tile-control-color-default-text-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-tile-control-color-disabled-background-initial: var(--sinch-sys-color-container-main-disabled);
+  --sinch-comp-tile-control-color-disabled-background-initial: var(--sinch-sys-color-surface-primary-disabled);
   --sinch-comp-tile-control-color-disabled-border-initial: var(--sinch-sys-color-border-disabled);
@@ -15,0 +15,0 @@ --sinch-comp-tile-control-color-disabled-icon-initial: var(--sinch-sys-color-text-disabled);

comp/time-picker.css

@@ -19,4 +19,4 @@ .nectary-theme-base {
   --sinch-comp-time-picker-needle-color-default-background-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-time-picker-watch-face-color-default-background-initial: var(--sinch-sys-color-container-main-default);
-  --sinch-comp-time-picker-watch-face-color-default-border-initial: var(--sinch-sys-color-container-main-foreground);
+  --sinch-comp-time-picker-watch-face-color-default-background-initial: var(--sinch-sys-color-surface-primary-default);
+  --sinch-comp-time-picker-watch-face-color-default-border-initial: var(--sinch-sys-color-text-default);
 }

comp/toast.css

 .nectary-theme-base {
-  --sinch-comp-toast-color-error-default-background: var(--sinch-sys-color-feedback-invalid-background);
-  --sinch-comp-toast-color-error-default-icon: var(--sinch-sys-color-feedback-invalid-contrast);
+  --sinch-comp-toast-color-error-default-background: var(--sinch-sys-color-feedback-danger-subtle);
+  --sinch-comp-toast-color-error-default-icon: var(--sinch-sys-color-feedback-danger-default);
   --sinch-comp-toast-color-error-default-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-toast-color-info-default-background: var(--sinch-sys-color-feedback-info-background);
-  --sinch-comp-toast-color-info-default-icon: var(--sinch-sys-color-feedback-info-contrast);
+  --sinch-comp-toast-color-info-default-background: var(--sinch-sys-color-feedback-info-subtle);
+  --sinch-comp-toast-color-info-default-icon: var(--sinch-sys-color-feedback-info-default);
   --sinch-comp-toast-color-info-default-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-toast-color-success-default-background: var(--sinch-sys-color-feedback-success-background);
-  --sinch-comp-toast-color-success-default-icon: var(--sinch-sys-color-feedback-success-contrast);
+  --sinch-comp-toast-color-success-default-background: var(--sinch-sys-color-feedback-success-subtle);
+  --sinch-comp-toast-color-success-default-icon: var(--sinch-sys-color-feedback-success-default);
   --sinch-comp-toast-color-success-default-text: var(--sinch-sys-color-text-default);
-  --sinch-comp-toast-color-warning-default-background: var(--sinch-sys-color-feedback-warning-background);
-  --sinch-comp-toast-color-warning-default-icon: var(--sinch-sys-color-feedback-warning-contrast);
+  --sinch-comp-toast-color-warning-default-background: var(--sinch-sys-color-feedback-warning-subtle);
+  --sinch-comp-toast-color-warning-default-icon: var(--sinch-sys-color-feedback-warning-default);
   --sinch-comp-toast-color-warning-default-text: var(--sinch-sys-color-text-default);
@@ -14,0 +14,0 @@ --sinch-comp-toast-font-body: var(--sinch-sys-font-body-m);

comp/toggle.css

 .nectary-theme-base {
   --sinch-comp-toggle-color-checked-background-initial: var(--sinch-sys-color-primary-default);
   --sinch-comp-toggle-color-checked-disabled-background-initial: var(--sinch-sys-color-primary-disabled);
-  --sinch-comp-toggle-color-default-background-initial: var(--sinch-sys-color-container-contrast-primary-active);
-  --sinch-comp-toggle-color-default-knob-background-initial: var(--sinch-sys-color-container-main-default);
+  --sinch-comp-toggle-color-default-background-initial: var(--sinch-ref-color-neutral-300);
+  --sinch-comp-toggle-color-default-knob-background-initial: var(--sinch-sys-color-surface-primary-default);
   --sinch-comp-toggle-color-default-label-initial: var(--sinch-sys-color-text-default);
-  --sinch-comp-toggle-color-default-outline-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-toggle-color-default-text-inside-initial: var(--sinch-ref-color-main-snow-100);
-  --sinch-comp-toggle-color-disabled-background-initial: var(--sinch-sys-color-container-contrast-primary-default);
+  --sinch-comp-toggle-color-default-outline-focus: var(--sinch-sys-color-focus);
+  --sinch-comp-toggle-color-default-text-inside-initial: var(--sinch-sys-color-basic-pure);
+  --sinch-comp-toggle-color-disabled-background-initial: var(--sinch-ref-color-neutral-100);
   --sinch-comp-toggle-color-disabled-label-initial: var(--sinch-sys-color-text-disabled);
@@ -11,0 +11,0 @@ --sinch-comp-toggle-font-size-m-inside-text: var(--sinch-sys-font-body-xxs);

comp/tooltip.css

 .nectary-theme-base {
-  --sinch-comp-tooltip-color-background: var(--sinch-sys-color-container-contrast-secondary-default);
+  --sinch-comp-tooltip-color-background: var(--sinch-sys-color-surface-secondary-default);
   --sinch-comp-tooltip-color-text: var(--sinch-sys-color-text-default);
@@ -4,0 +4,0 @@ --sinch-comp-tooltip-font-body: var(--sinch-sys-font-body-xs);

package.json

 {
   "name": "@nectary/theme-base",
-  "version": "0.5.1",
+  "version": "1.0.0",
   "files": [
@@ -5,0 +5,0 @@ "**/*.css",

ref.css

 .nectary-theme-base {
-  --sinch-ref-color-complementary-bolt-200: #FFE6B3;
-  --sinch-ref-color-complementary-bolt-400: #FFBE3C;
-  --sinch-ref-color-complementary-bolt-700: #805500;
-  --sinch-ref-color-complementary-candy-200: #F6CBEA;
-  --sinch-ref-color-complementary-candy-400: #E467C3;
-  --sinch-ref-color-complementary-candy-700: #981B77;
-  --sinch-ref-color-complementary-celtic-200: #D5E5F8;
-  --sinch-ref-color-complementary-celtic-400: #2071CE;
-  --sinch-ref-color-complementary-celtic-700: #003B7E;
-  --sinch-ref-color-complementary-dirt-200: #E0DDDC;
-  --sinch-ref-color-complementary-dirt-400: #828282;
-  --sinch-ref-color-complementary-dirt-700: #363230;
-  --sinch-ref-color-complementary-grass-200: #B4E4B5;
-  --sinch-ref-color-complementary-grass-400: #39B93D;
-  --sinch-ref-color-complementary-grass-700: #006602;
-  --sinch-ref-color-complementary-jasper-200: #FFCDD2;
-  --sinch-ref-color-complementary-jasper-400: #F44336;
-  --sinch-ref-color-complementary-jasper-700: #B71C1C;
-  --sinch-ref-color-complementary-mud-200: #D7C6C1;
-  --sinch-ref-color-complementary-mud-400: #8B6559;
-  --sinch-ref-color-complementary-mud-700: #6D4E46;
-  --sinch-ref-color-complementary-night-200: #D1D6FA;
-  --sinch-ref-color-complementary-night-400: #3247E9;
-  --sinch-ref-color-complementary-night-700: #1223A1;
-  --sinch-ref-color-complementary-olive-200: #D7F1D8;
-  --sinch-ref-color-complementary-olive-400: #46A65A;
-  --sinch-ref-color-complementary-olive-700: #275D33;
-  --sinch-ref-color-complementary-orange-200: #FFD4B3;
-  --sinch-ref-color-complementary-orange-400: #FF8C34;
-  --sinch-ref-color-complementary-orange-700: #974302;
-  --sinch-ref-color-complementary-pumpkin-200: #FFE8D6;
-  --sinch-ref-color-complementary-pumpkin-400: #F35B1C;
-  --sinch-ref-color-complementary-pumpkin-700: #9C2E00;
-  --sinch-ref-color-complementary-violet-200: #DECBF6;
-  --sinch-ref-color-complementary-violet-400: #9E67E4;
-  --sinch-ref-color-complementary-violet-700: #4F1B98;
-  --sinch-ref-color-main-honey-100: #FFF7E6;
-  --sinch-ref-color-main-honey-200: #FCECCB;
-  --sinch-ref-color-main-honey-300: #FFDF9E;
-  --sinch-ref-color-main-honey-400: #FFCC66;
-  --sinch-ref-color-main-honey-500: #FFBE3C;
-  --sinch-ref-color-main-honey-600: #FFAA00;
-  --sinch-ref-color-main-honey-700: #CC8800;
-  --sinch-ref-color-main-ocean-100: #DEF2FF;
-  --sinch-ref-color-main-ocean-200: #C8E6F9;
-  --sinch-ref-color-main-ocean-300: #A1D5F5;
-  --sinch-ref-color-main-ocean-400: #6EBBEE;
-  --sinch-ref-color-main-ocean-50: #F3FAFE;
-  --sinch-ref-color-main-ocean-500: #3AA7EA;
-  --sinch-ref-color-main-ocean-600: #1686CB;
-  --sinch-ref-color-main-ocean-700: #1B3E65;
-  --sinch-ref-color-main-raspberry-100: #FFE8E4;
-  --sinch-ref-color-main-raspberry-200: #FBD5D5;
-  --sinch-ref-color-main-raspberry-300: #FFB8B8;
-  --sinch-ref-color-main-raspberry-400: #F38686;
-  --sinch-ref-color-main-raspberry-50: #FFF6F5;
-  --sinch-ref-color-main-raspberry-500: #EF5858;
-  --sinch-ref-color-main-raspberry-600: #D13D42;
-  --sinch-ref-color-main-raspberry-700: #882024;
-  --sinch-ref-color-main-snow-100: #FFFFFF;
-  --sinch-ref-color-main-snow-200: #F8F8F8;
-  --sinch-ref-color-main-snow-400: #F2F2F2;
-  --sinch-ref-color-main-snow-500: #E0E0E0;
-  --sinch-ref-color-main-snow-600: #D9D9D9;
-  --sinch-ref-color-main-snow-700: #CCCCCC;
-  --sinch-ref-color-main-stormy-100: #A6A6A6;
-  --sinch-ref-color-main-stormy-200: #8C8C8C;
-  --sinch-ref-color-main-stormy-300: #767676;
-  --sinch-ref-color-main-stormy-400: #595959;
-  --sinch-ref-color-main-stormy-500: #404040;
-  --sinch-ref-color-main-stormy-600: #303030;
-  --sinch-ref-color-main-stormy-700: #242424;
-  --sinch-ref-color-main-stormy-800: #191919;
-  --sinch-ref-color-main-stormy-900: #000000;
-  --sinch-ref-color-main-tropical-100: #DCEDE1;
-  --sinch-ref-color-main-tropical-200: #A7D5C2;
-  --sinch-ref-color-main-tropical-300: #63B9A4;
-  --sinch-ref-color-main-tropical-400: #059688;
-  --sinch-ref-color-main-tropical-50: #F5FAF6;
-  --sinch-ref-color-main-tropical-500: #007171;
-  --sinch-ref-color-main-tropical-600: #005757;
-  --sinch-ref-color-main-tropical-700: #003D3D;
+  --sinch-ref-color-candy-100: #FFE5F7;
+  --sinch-ref-color-candy-200: #FFD6F3;
+  --sinch-ref-color-candy-300: #FFBDEC;
+  --sinch-ref-color-candy-350: #FAA5E3;
+  --sinch-ref-color-candy-400: #EB83CF;
+  --sinch-ref-color-candy-50: #FFF5FC;
+  --sinch-ref-color-candy-500: #D15CB4;
+  --sinch-ref-color-candy-600: #A3488E;
+  --sinch-ref-color-candy-700: #8A3778;
+  --sinch-ref-color-candy-800: #472140;
+  --sinch-ref-color-candy-900: #2E192A;
+  --sinch-ref-color-grass-100: #D7F5D7;
+  --sinch-ref-color-grass-200: #C2EDC5;
+  --sinch-ref-color-grass-300: #99E0A2;
+  --sinch-ref-color-grass-350: #77D486;
+  --sinch-ref-color-grass-400: #53BD69;
+  --sinch-ref-color-grass-50: #ECFFEB;
+  --sinch-ref-color-grass-500: #3D9956;
+  --sinch-ref-color-grass-600: #2B7845;
+  --sinch-ref-color-grass-700: #23613C;
+  --sinch-ref-color-grass-800: #163323;
+  --sinch-ref-color-grass-900: #102419;
+  --sinch-ref-color-honey-100: #FCECCB;
+  --sinch-ref-color-honey-200: #FFDD99;
+  --sinch-ref-color-honey-300: #FFCA61;
+  --sinch-ref-color-honey-350: #FFBE3C;
+  --sinch-ref-color-honey-400: #EB9605;
+  --sinch-ref-color-honey-50: #FFF9EB;
+  --sinch-ref-color-honey-500: #C77904;
+  --sinch-ref-color-honey-600: #9E5A00;
+  --sinch-ref-color-honey-700: #824703;
+  --sinch-ref-color-honey-800: #472706;
+  --sinch-ref-color-honey-900: #331B06;
+  --sinch-ref-color-neutral-100: #EBEEF0;
+  --sinch-ref-color-neutral-200: #DCE2E5;
+  --sinch-ref-color-neutral-300: #C9D1D6;
+  --sinch-ref-color-neutral-350: #B7C1C7;
+  --sinch-ref-color-neutral-400: #9EA9B0;
+  --sinch-ref-color-neutral-50: #F7F9FA;
+  --sinch-ref-color-neutral-500: #808A91;
+  --sinch-ref-color-neutral-600: #626C73;
+  --sinch-ref-color-neutral-700: #4B575E;
+  --sinch-ref-color-neutral-800: #272F36;
+  --sinch-ref-color-neutral-900: #1A2126;
+  --sinch-ref-color-neutral-950: #14181C;
+  --sinch-ref-color-ocean-100: #E0F1FF;
+  --sinch-ref-color-ocean-200: #C7E5FF;
+  --sinch-ref-color-ocean-300: #A8D4FF;
+  --sinch-ref-color-ocean-350: #8AC4FF;
+  --sinch-ref-color-ocean-400: #61ABFF;
+  --sinch-ref-color-ocean-50: #F2F9FF;
+  --sinch-ref-color-ocean-500: #3089F0;
+  --sinch-ref-color-ocean-600: #0D68D1;
+  --sinch-ref-color-ocean-700: #1454A8;
+  --sinch-ref-color-ocean-800: #112F57;
+  --sinch-ref-color-ocean-900: #0F2138;
+  --sinch-ref-color-pumpkin-100: #FFE9D6;
+  --sinch-ref-color-pumpkin-200: #FFD9BD;
+  --sinch-ref-color-pumpkin-300: #FFC299;
+  --sinch-ref-color-pumpkin-350: #FFAD75;
+  --sinch-ref-color-pumpkin-400: #F58B4E;
+  --sinch-ref-color-pumpkin-50: #FFF7F0;
+  --sinch-ref-color-pumpkin-500: #D66A33;
+  --sinch-ref-color-pumpkin-600: #AD4E24;
+  --sinch-ref-color-pumpkin-700: #8F3D1F;
+  --sinch-ref-color-pumpkin-800: #4D2215;
+  --sinch-ref-color-pumpkin-900: #361811;
+  --sinch-ref-color-raspberry-100: #FFE5E3;
+  --sinch-ref-color-raspberry-200: #FFD8D6;
+  --sinch-ref-color-raspberry-300: #FFBDBD;
+  --sinch-ref-color-raspberry-350: #FFA8A8;
+  --sinch-ref-color-raspberry-400: #FF8080;
+  --sinch-ref-color-raspberry-50: #FFF6F5;
+  --sinch-ref-color-raspberry-500: #EB5454;
+  --sinch-ref-color-raspberry-600: #BD3C41;
+  --sinch-ref-color-raspberry-700: #993138;
+  --sinch-ref-color-raspberry-800: #57181C;
+  --sinch-ref-color-raspberry-900: #3D1215;
+  --sinch-ref-color-tropical-100: #E2F0E8;
+  --sinch-ref-color-tropical-200: #CEE5DA;
+  --sinch-ref-color-tropical-300: #AFDBCD;
+  --sinch-ref-color-tropical-350: #80CFBC;
+  --sinch-ref-color-tropical-400: #51B8A6;
+  --sinch-ref-color-tropical-50: #F0FAF4;
+  --sinch-ref-color-tropical-500: #06998B;
+  --sinch-ref-color-tropical-600: #007874;
+  --sinch-ref-color-tropical-700: #006063;
+  --sinch-ref-color-tropical-800: #0C333B;
+  --sinch-ref-color-tropical-900: #0E2329;
+  --sinch-ref-color-violet-100: #EFEBFF;
+  --sinch-ref-color-violet-200: #E2DBFF;
+  --sinch-ref-color-violet-300: #D0C8FA;
+  --sinch-ref-color-violet-350: #C1B6FA;
+  --sinch-ref-color-violet-400: #A89BFA;
+  --sinch-ref-color-violet-50: #F8F5FF;
+  --sinch-ref-color-violet-500: #857AEB;
+  --sinch-ref-color-violet-600: #645DC2;
+  --sinch-ref-color-violet-700: #4D4AA8;
+  --sinch-ref-color-violet-800: #2A2A54;
+  --sinch-ref-color-violet-900: #1E1E33;
   --sinch-ref-shadow-level-0: none;
@@ -89,24 +107,2 @@ --sinch-ref-shadow-level-1: 1px 2px 6px #0A273D1A;
   --sinch-ref-shadow-level-4: 0 8px 16px #0A273D1A;
-  --sinch-ref-shape-radius-0: 0;
-  --sinch-ref-shape-radius-1: 1px;
-  --sinch-ref-shape-radius-10: 10px;
-  --sinch-ref-shape-radius-11: 11px;
-  --sinch-ref-shape-radius-12: 12px;
-  --sinch-ref-shape-radius-13: 13px;
-  --sinch-ref-shape-radius-14: 14px;
-  --sinch-ref-shape-radius-15: 15px;
-  --sinch-ref-shape-radius-16: 16px;
-  --sinch-ref-shape-radius-17: 17px;
-  --sinch-ref-shape-radius-18: 18px;
-  --sinch-ref-shape-radius-19: 19px;
-  --sinch-ref-shape-radius-2: 2px;
-  --sinch-ref-shape-radius-20: 20px;
-  --sinch-ref-shape-radius-3: 3px;
-  --sinch-ref-shape-radius-4: 4px;
-  --sinch-ref-shape-radius-5: 5px;
-  --sinch-ref-shape-radius-6: 6px;
-  --sinch-ref-shape-radius-7: 7px;
-  --sinch-ref-shape-radius-8: 8px;
-  --sinch-ref-shape-radius-9: 9px;
-  --sinch-ref-shape-radius-full: 9999px;
   --sinch-ref-typography-font-family-main: "DM Sans", "Arial", sans-serif;
@@ -113,0 +109,0 @@ --sinch-ref-typography-font-family-mono: "DM Mono", monospace;

ref.json

 {
   "color": {
-    "complementary": {
-      "bolt": {
-        "200": "#FFE6B3",
-        "400": "#FFBE3C",
-        "700": "#805500"
-      },
-      "candy": {
-        "200": "#F6CBEA",
-        "400": "#E467C3",
-        "700": "#981B77"
-      },
-      "celtic": {
-        "200": "#D5E5F8",
-        "400": "#2071CE",
-        "700": "#003B7E"
-      },
-      "dirt": {
-        "200": "#E0DDDC",
-        "400": "#828282",
-        "700": "#363230"
-      },
-      "grass": {
-        "200": "#B4E4B5",
-        "400": "#39B93D",
-        "700": "#006602"
-      },
-      "jasper": {
-        "200": "#FFCDD2",
-        "400": "#F44336",
-        "700": "#B71C1C"
-      },
-      "mud": {
-        "200": "#D7C6C1",
-        "400": "#8B6559",
-        "700": "#6D4E46"
-      },
-      "night": {
-        "200": "#D1D6FA",
-        "400": "#3247E9",
-        "700": "#1223A1"
-      },
-      "olive": {
-        "200": "#D7F1D8",
-        "400": "#46A65A",
-        "700": "#275D33"
-      },
-      "orange": {
-        "200": "#FFD4B3",
-        "400": "#FF8C34",
-        "700": "#974302"
-      },
-      "pumpkin": {
-        "200": "#FFE8D6",
-        "400": "#F35B1C",
-        "700": "#9C2E00"
-      },
-      "violet": {
-        "200": "#DECBF6",
-        "400": "#9E67E4",
-        "700": "#4F1B98"
-      }
+    "candy": {
+      "50": "#FFF5FC",
+      "100": "#FFE5F7",
+      "200": "#FFD6F3",
+      "300": "#FFBDEC",
+      "350": "#FAA5E3",
+      "400": "#EB83CF",
+      "500": "#D15CB4",
+      "600": "#A3488E",
+      "700": "#8A3778",
+      "800": "#472140",
+      "900": "#2E192A"
     },
-    "main": {
-      "honey": {
-        "100": "#FFF7E6",
-        "200": "#FCECCB",
-        "300": "#FFDF9E",
-        "400": "#FFCC66",
-        "500": "#FFBE3C",
-        "600": "#FFAA00",
-        "700": "#CC8800"
-      },
-      "ocean": {
-        "50": "#F3FAFE",
-        "100": "#DEF2FF",
-        "200": "#C8E6F9",
-        "300": "#A1D5F5",
-        "400": "#6EBBEE",
-        "500": "#3AA7EA",
-        "600": "#1686CB",
-        "700": "#1B3E65"
-      },
-      "raspberry": {
-        "50": "#FFF6F5",
-        "100": "#FFE8E4",
-        "200": "#FBD5D5",
-        "300": "#FFB8B8",
-        "400": "#F38686",
-        "500": "#EF5858",
-        "600": "#D13D42",
-        "700": "#882024"
-      },
-      "snow": {
-        "100": "#FFFFFF",
-        "200": "#F8F8F8",
-        "400": "#F2F2F2",
-        "500": "#E0E0E0",
-        "600": "#D9D9D9",
-        "700": "#CCCCCC"
-      },
-      "stormy": {
-        "100": "#A6A6A6",
-        "200": "#8C8C8C",
-        "300": "#767676",
-        "400": "#595959",
-        "500": "#404040",
-        "600": "#303030",
-        "700": "#242424",
-        "800": "#191919",
-        "900": "#000000"
-      },
-      "tropical": {
-        "50": "#F5FAF6",
-        "100": "#DCEDE1",
-        "200": "#A7D5C2",
-        "300": "#63B9A4",
-        "400": "#059688",
-        "500": "#007171",
-        "600": "#005757",
-        "700": "#003D3D"
-      }
+    "grass": {
+      "50": "#ECFFEB",
+      "100": "#D7F5D7",
+      "200": "#C2EDC5",
+      "300": "#99E0A2",
+      "350": "#77D486",
+      "400": "#53BD69",
+      "500": "#3D9956",
+      "600": "#2B7845",
+      "700": "#23613C",
+      "800": "#163323",
+      "900": "#102419"
+    },
+    "honey": {
+      "50": "#FFF9EB",
+      "100": "#FCECCB",
+      "200": "#FFDD99",
+      "300": "#FFCA61",
+      "350": "#FFBE3C",
+      "400": "#EB9605",
+      "500": "#C77904",
+      "600": "#9E5A00",
+      "700": "#824703",
+      "800": "#472706",
+      "900": "#331B06"
+    },
+    "neutral": {
+      "50": "#F7F9FA",
+      "100": "#EBEEF0",
+      "200": "#DCE2E5",
+      "300": "#C9D1D6",
+      "350": "#B7C1C7",
+      "400": "#9EA9B0",
+      "500": "#808A91",
+      "600": "#626C73",
+      "700": "#4B575E",
+      "800": "#272F36",
+      "900": "#1A2126",
+      "950": "#14181C"
+    },
+    "ocean": {
+      "50": "#F2F9FF",
+      "100": "#E0F1FF",
+      "200": "#C7E5FF",
+      "300": "#A8D4FF",
+      "350": "#8AC4FF",
+      "400": "#61ABFF",
+      "500": "#3089F0",
+      "600": "#0D68D1",
+      "700": "#1454A8",
+      "800": "#112F57",
+      "900": "#0F2138"
+    },
+    "pumpkin": {
+      "50": "#FFF7F0",
+      "100": "#FFE9D6",
+      "200": "#FFD9BD",
+      "300": "#FFC299",
+      "350": "#FFAD75",
+      "400": "#F58B4E",
+      "500": "#D66A33",
+      "600": "#AD4E24",
+      "700": "#8F3D1F",
+      "800": "#4D2215",
+      "900": "#361811"
+    },
+    "raspberry": {
+      "50": "#FFF6F5",
+      "100": "#FFE5E3",
+      "200": "#FFD8D6",
+      "300": "#FFBDBD",
+      "350": "#FFA8A8",
+      "400": "#FF8080",
+      "500": "#EB5454",
+      "600": "#BD3C41",
+      "700": "#993138",
+      "800": "#57181C",
+      "900": "#3D1215"
+    },
+    "tropical": {
+      "50": "#F0FAF4",
+      "100": "#E2F0E8",
+      "200": "#CEE5DA",
+      "300": "#AFDBCD",
+      "350": "#80CFBC",
+      "400": "#51B8A6",
+      "500": "#06998B",
+      "600": "#007874",
+      "700": "#006063",
+      "800": "#0C333B",
+      "900": "#0E2329"
+    },
+    "violet": {
+      "50": "#F8F5FF",
+      "100": "#EFEBFF",
+      "200": "#E2DBFF",
+      "300": "#D0C8FA",
+      "350": "#C1B6FA",
+      "400": "#A89BFA",
+      "500": "#857AEB",
+      "600": "#645DC2",
+      "700": "#4D4AA8",
+      "800": "#2A2A54",
+      "900": "#1E1E33"
     }
@@ -135,26 +131,2 @@ },
   },
-  "shape-radius": {
-    "0": "0",
-    "1": "1px",
-    "2": "2px",
-    "3": "3px",
-    "4": "4px",
-    "5": "5px",
-    "6": "6px",
-    "7": "7px",
-    "8": "8px",
-    "9": "9px",
-    "10": "10px",
-    "11": "11px",
-    "12": "12px",
-    "13": "13px",
-    "14": "14px",
-    "15": "15px",
-    "16": "16px",
-    "17": "17px",
-    "18": "18px",
-    "19": "19px",
-    "20": "20px",
-    "full": "9999px"
-  },
   "typography": {
@@ -161,0 +133,0 @@ "font-family": {

sys.css

 .nectary-theme-base {
-  --sinch-sys-color-border-active: var(--sinch-sys-color-primary-default);
-  --sinch-sys-color-border-dark: var(--sinch-ref-color-main-stormy-100);
-  --sinch-sys-color-border-default: var(--sinch-ref-color-main-snow-700);
-  --sinch-sys-color-border-disabled: var(--sinch-ref-color-main-snow-400);
-  --sinch-sys-color-border-focus: var(--sinch-ref-color-main-ocean-500);
-  --sinch-sys-color-border-invalid: var(--sinch-ref-color-main-raspberry-600);
-  --sinch-sys-color-border-light: var(--sinch-ref-color-main-snow-500);
-  --sinch-sys-color-container-complement-primary-active: var(--sinch-ref-color-main-honey-300);
-  --sinch-sys-color-container-complement-primary-default: var(--sinch-ref-color-main-honey-100);
-  --sinch-sys-color-container-complement-primary-disabled: var(--sinch-ref-color-main-honey-100);
-  --sinch-sys-color-container-complement-primary-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-sys-color-container-complement-primary-hover: var(--sinch-ref-color-main-honey-200);
-  --sinch-sys-color-container-complement-quaternary-active: var(--sinch-ref-color-main-raspberry-200);
-  --sinch-sys-color-container-complement-quaternary-default: var(--sinch-ref-color-main-raspberry-50);
-  --sinch-sys-color-container-complement-quaternary-disabled: var(--sinch-ref-color-main-raspberry-50);
-  --sinch-sys-color-container-complement-quaternary-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-sys-color-container-complement-quaternary-hover: var(--sinch-ref-color-main-raspberry-100);
-  --sinch-sys-color-container-complement-secondary-active: var(--sinch-ref-color-main-tropical-200);
-  --sinch-sys-color-container-complement-secondary-default: var(--sinch-ref-color-main-tropical-50);
-  --sinch-sys-color-container-complement-secondary-disabled: var(--sinch-ref-color-main-tropical-50);
-  --sinch-sys-color-container-complement-secondary-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-sys-color-container-complement-secondary-hover: var(--sinch-ref-color-main-tropical-100);
-  --sinch-sys-color-container-complement-tertiary-active: var(--sinch-ref-color-main-ocean-300);
-  --sinch-sys-color-container-complement-tertiary-default: var(--sinch-ref-color-main-ocean-100);
-  --sinch-sys-color-container-complement-tertiary-disabled: var(--sinch-ref-color-main-ocean-100);
-  --sinch-sys-color-container-complement-tertiary-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-sys-color-container-complement-tertiary-hover: var(--sinch-ref-color-main-ocean-200);
-  --sinch-sys-color-container-contrast-primary-active: var(--sinch-ref-color-main-snow-600);
-  --sinch-sys-color-container-contrast-primary-default: var(--sinch-ref-color-main-snow-400);
-  --sinch-sys-color-container-contrast-primary-disabled: var(--sinch-ref-color-main-snow-400);
-  --sinch-sys-color-container-contrast-primary-foreground: var(--sinch-ref-color-main-stormy-600);
-  --sinch-sys-color-container-contrast-primary-hover: var(--sinch-ref-color-main-snow-500);
-  --sinch-sys-color-container-contrast-secondary-active: var(--sinch-ref-color-main-snow-500);
-  --sinch-sys-color-container-contrast-secondary-default: var(--sinch-ref-color-main-snow-200);
-  --sinch-sys-color-container-contrast-secondary-disabled: var(--sinch-ref-color-main-snow-200);
-  --sinch-sys-color-container-contrast-secondary-foreground: var(--sinch-ref-color-main-stormy-600);
-  --sinch-sys-color-container-contrast-secondary-hover: var(--sinch-ref-color-main-snow-400);
-  --sinch-sys-color-container-main-active: var(--sinch-ref-color-main-snow-400);
-  --sinch-sys-color-container-main-default: var(--sinch-ref-color-main-snow-100);
-  --sinch-sys-color-container-main-disabled: var(--sinch-ref-color-main-snow-100);
-  --sinch-sys-color-container-main-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-sys-color-container-main-hover: var(--sinch-ref-color-main-snow-200);
-  --sinch-sys-color-container-transparent-active: #24242433;
-  --sinch-sys-color-container-transparent-default: transparent;
-  --sinch-sys-color-container-transparent-disabled: transparent;
-  --sinch-sys-color-container-transparent-hover: #2424241A;
-  --sinch-sys-color-cta-active: var(--sinch-ref-color-main-honey-600);
-  --sinch-sys-color-cta-default: var(--sinch-ref-color-main-honey-500);
-  --sinch-sys-color-cta-disabled: var(--sinch-ref-color-main-honey-200);
-  --sinch-sys-color-cta-foreground: var(--sinch-ref-color-main-stormy-700);
-  --sinch-sys-color-cta-hover: var(--sinch-ref-color-main-honey-400);
-  --sinch-sys-color-feedback-info-background: var(--sinch-ref-color-complementary-celtic-200);
-  --sinch-sys-color-feedback-info-contrast: var(--sinch-ref-color-complementary-celtic-400);
-  --sinch-sys-color-feedback-info-foreground: var(--sinch-ref-color-complementary-celtic-700);
-  --sinch-sys-color-feedback-invalid-background: var(--sinch-ref-color-complementary-jasper-200);
-  --sinch-sys-color-feedback-invalid-contrast: var(--sinch-ref-color-complementary-jasper-400);
-  --sinch-sys-color-feedback-invalid-foreground: var(--sinch-ref-color-complementary-jasper-700);
-  --sinch-sys-color-feedback-success-background: var(--sinch-ref-color-complementary-olive-200);
-  --sinch-sys-color-feedback-success-contrast: var(--sinch-ref-color-complementary-olive-400);
-  --sinch-sys-color-feedback-success-foreground: var(--sinch-ref-color-complementary-olive-700);
-  --sinch-sys-color-feedback-warning-background: var(--sinch-ref-color-complementary-pumpkin-200);
-  --sinch-sys-color-feedback-warning-contrast: var(--sinch-ref-color-complementary-pumpkin-400);
-  --sinch-sys-color-feedback-warning-foreground: var(--sinch-ref-color-complementary-pumpkin-700);
-  --sinch-sys-color-primary-active: var(--sinch-ref-color-main-tropical-600);
-  --sinch-sys-color-primary-default: var(--sinch-ref-color-main-tropical-500);
-  --sinch-sys-color-primary-disabled: var(--sinch-ref-color-main-tropical-200);
-  --sinch-sys-color-primary-foreground: var(--sinch-ref-color-main-snow-100);
-  --sinch-sys-color-primary-hover: var(--sinch-ref-color-main-tropical-400);
-  --sinch-sys-color-skintone-dark: #7C533E;
-  --sinch-sys-color-skintone-default: #FFCC4D;
-  --sinch-sys-color-skintone-light: #F7DECE;
-  --sinch-sys-color-skintone-light-medium: #F3D2A2;
-  --sinch-sys-color-skintone-medium: #D4AB88;
-  --sinch-sys-color-skintone-medium-dark: #AF7E57;
-  --sinch-sys-color-status-away-background: var(--sinch-ref-color-complementary-bolt-200);
-  --sinch-sys-color-status-away-contrast: var(--sinch-ref-color-complementary-bolt-400);
-  --sinch-sys-color-status-away-foreground: var(--sinch-ref-color-complementary-bolt-700);
-  --sinch-sys-color-status-busy-background: var(--sinch-ref-color-complementary-jasper-200);
-  --sinch-sys-color-status-busy-contrast: var(--sinch-ref-color-complementary-jasper-400);
-  --sinch-sys-color-status-busy-foreground: var(--sinch-ref-color-complementary-jasper-700);
-  --sinch-sys-color-status-offline-background: var(--sinch-ref-color-complementary-dirt-200);
-  --sinch-sys-color-status-offline-contrast: var(--sinch-ref-color-complementary-dirt-400);
-  --sinch-sys-color-status-offline-foreground: var(--sinch-ref-color-complementary-dirt-700);
-  --sinch-sys-color-status-online-background: var(--sinch-ref-color-complementary-olive-200);
-  --sinch-sys-color-status-online-contrast: var(--sinch-ref-color-complementary-olive-400);
-  --sinch-sys-color-status-online-foreground: var(--sinch-ref-color-complementary-olive-700);
-  --sinch-sys-color-text-default: var(--sinch-ref-color-main-stormy-700);
-  --sinch-sys-color-text-disabled: var(--sinch-ref-color-main-stormy-100);
-  --sinch-sys-color-text-invalid: var(--sinch-ref-color-main-raspberry-600);
-  --sinch-sys-color-text-inverted: var(--sinch-ref-color-main-snow-100);
-  --sinch-sys-color-text-link: var(--sinch-sys-color-primary-default);
-  --sinch-sys-color-text-link-disabled: var(--sinch-sys-color-primary-disabled);
-  --sinch-sys-color-text-muted: var(--sinch-ref-color-main-stormy-300);
+  --sinch-sys-color-basic-pure: #FFFFFF;
+  --sinch-sys-color-basic-pure-inverted: #000000;
+  --sinch-sys-color-basic-transparent: transparent;
+  --sinch-sys-color-border-default: var(--sinch-ref-color-neutral-350);
+  --sinch-sys-color-border-disabled: var(--sinch-ref-color-neutral-100);
+  --sinch-sys-color-border-strong: var(--sinch-ref-color-neutral-400);
+  --sinch-sys-color-border-subtle: var(--sinch-ref-color-neutral-200);
+  --sinch-sys-color-feedback-danger-default: var(--sinch-ref-color-raspberry-500);
+  --sinch-sys-color-feedback-danger-strong: var(--sinch-ref-color-raspberry-700);
+  --sinch-sys-color-feedback-danger-subtle: var(--sinch-ref-color-raspberry-200);
+  --sinch-sys-color-feedback-info-default: var(--sinch-ref-color-ocean-500);
+  --sinch-sys-color-feedback-info-strong: var(--sinch-ref-color-ocean-700);
+  --sinch-sys-color-feedback-info-subtle: var(--sinch-ref-color-ocean-200);
+  --sinch-sys-color-feedback-neutral-default: var(--sinch-ref-color-neutral-500);
+  --sinch-sys-color-feedback-neutral-strong: var(--sinch-ref-color-neutral-700);
+  --sinch-sys-color-feedback-neutral-subtle: var(--sinch-ref-color-neutral-200);
+  --sinch-sys-color-feedback-success-default: var(--sinch-ref-color-grass-400);
+  --sinch-sys-color-feedback-success-strong: var(--sinch-ref-color-grass-700);
+  --sinch-sys-color-feedback-success-subtle: var(--sinch-ref-color-grass-200);
+  --sinch-sys-color-feedback-warning-default: var(--sinch-ref-color-pumpkin-400);
+  --sinch-sys-color-feedback-warning-strong: var(--sinch-ref-color-pumpkin-700);
+  --sinch-sys-color-feedback-warning-subtle: var(--sinch-ref-color-pumpkin-200);
+  --sinch-sys-color-focus: var(--sinch-ref-color-ocean-400);
+  --sinch-sys-color-primary-active: var(--sinch-ref-color-tropical-800);
+  --sinch-sys-color-primary-default: var(--sinch-ref-color-tropical-700);
+  --sinch-sys-color-primary-disabled: var(--sinch-ref-color-tropical-400);
+  --sinch-sys-color-primary-foreground: var(--sinch-sys-color-basic-pure);
+  --sinch-sys-color-primary-hover: var(--sinch-ref-color-tropical-600);
+  --sinch-sys-color-surface-canvas: var(--sinch-ref-color-neutral-100);
+  --sinch-sys-color-surface-primary-active: var(--sinch-ref-color-neutral-100);
+  --sinch-sys-color-surface-primary-default: var(--sinch-sys-color-basic-pure);
+  --sinch-sys-color-surface-primary-disabled: var(--sinch-sys-color-basic-pure);
+  --sinch-sys-color-surface-primary-hover: var(--sinch-ref-color-neutral-50);
+  --sinch-sys-color-surface-secondary-active: var(--sinch-ref-color-neutral-200);
+  --sinch-sys-color-surface-secondary-default: var(--sinch-ref-color-neutral-50);
+  --sinch-sys-color-surface-secondary-disabled: var(--sinch-ref-color-neutral-50);
+  --sinch-sys-color-surface-secondary-hover: var(--sinch-ref-color-neutral-100);
+  --sinch-sys-color-surface-tertiary-active: var(--sinch-ref-color-neutral-300);
+  --sinch-sys-color-surface-tertiary-default: var(--sinch-ref-color-neutral-100);
+  --sinch-sys-color-surface-tertiary-disabled: var(--sinch-ref-color-neutral-50);
+  --sinch-sys-color-surface-tertiary-hover: var(--sinch-ref-color-neutral-200);
+  --sinch-sys-color-surface-transparent-active: #1A212633;
+  --sinch-sys-color-surface-transparent-default: var(--sinch-sys-color-basic-transparent);
+  --sinch-sys-color-surface-transparent-disabled: var(--sinch-sys-color-basic-transparent);
+  --sinch-sys-color-surface-transparent-hover: #1A21261A;
+  --sinch-sys-color-text-caption: var(--sinch-ref-color-neutral-700);
+  --sinch-sys-color-text-default: var(--sinch-ref-color-neutral-900);
+  --sinch-sys-color-text-disabled: var(--sinch-ref-color-neutral-400);
+  --sinch-sys-color-text-muted: var(--sinch-ref-color-neutral-600);
   --sinch-sys-font-body-emphasize: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-16)/var(--sinch-ref-typography-line-height-24) var(--sinch-ref-typography-font-family-main);
@@ -113,7 +69,7 @@ --sinch-sys-font-body-emphasize-s: var(--sinch-ref-typography-font-weight-700) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-20) var(--sinch-ref-typography-font-family-main);
   --sinch-sys-font-desktop-title-xs: var(--sinch-ref-typography-font-weight-500) var(--sinch-ref-typography-font-size-14)/var(--sinch-ref-typography-line-height-22) var(--sinch-ref-typography-font-family-main);
-  --sinch-sys-shape-radius-full: var(--sinch-ref-shape-radius-full);
-  --sinch-sys-shape-radius-l: var(--sinch-ref-shape-radius-14);
-  --sinch-sys-shape-radius-m: var(--sinch-ref-shape-radius-10);
-  --sinch-sys-shape-radius-s: var(--sinch-ref-shape-radius-6);
-  --sinch-sys-shape-radius-xs: var(--sinch-ref-shape-radius-2);
+  --sinch-sys-shape-radius-full: 9999px;
+  --sinch-sys-shape-radius-l: 14px;
+  --sinch-sys-shape-radius-m: 10px;
+  --sinch-sys-shape-radius-s: 6px;
+  --sinch-sys-shape-radius-xs: 2px;
   --sinch-sys-size-l: 48px;
@@ -120,0 +76,0 @@ --sinch-sys-size-m: 40px;

sys.json

 {
   "color": {
+    "basic": {
+      "pure": "#FFFFFF",
+      "pure-inverted": "#000000",
+      "transparent": "transparent"
+    },
     "border": {
-      "active": "#007171",
-      "dark": "#A6A6A6",
-      "default": "#CCCCCC",
-      "disabled": "#F2F2F2",
-      "focus": "#3AA7EA",
-      "invalid": "#D13D42",
-      "light": "#E0E0E0"
+      "default": "#B7C1C7",
+      "disabled": "#EBEEF0",
+      "strong": "#9EA9B0",
+      "subtle": "#DCE2E5"
     },
-    "container": {
-      "complement": {
-        "primary": {
-          "active": "#FFDF9E",
-          "default": "#FFF7E6",
-          "disabled": "#FFF7E6",
-          "foreground": "#242424",
-          "hover": "#FCECCB"
-        },
-        "quaternary": {
-          "active": "#FBD5D5",
-          "default": "#FFF6F5",
-          "disabled": "#FFF6F5",
-          "foreground": "#242424",
-          "hover": "#FFE8E4"
-        },
-        "secondary": {
-          "active": "#A7D5C2",
-          "default": "#F5FAF6",
-          "disabled": "#F5FAF6",
-          "foreground": "#242424",
-          "hover": "#DCEDE1"
-        },
-        "tertiary": {
-          "active": "#A1D5F5",
-          "default": "#DEF2FF",
-          "disabled": "#DEF2FF",
-          "foreground": "#242424",
-          "hover": "#C8E6F9"
-        }
+    "feedback": {
+      "danger": {
+        "default": "#EB5454",
+        "strong": "#993138",
+        "subtle": "#FFD8D6"
       },
-      "contrast": {
-        "primary": {
-          "active": "#D9D9D9",
-          "default": "#F2F2F2",
-          "disabled": "#F2F2F2",
-          "foreground": "#303030",
-          "hover": "#E0E0E0"
-        },
-        "secondary": {
-          "active": "#E0E0E0",
-          "default": "#F8F8F8",
-          "disabled": "#F8F8F8",
-          "foreground": "#303030",
-          "hover": "#F2F2F2"
-        }
-      },
-      "main": {
-        "active": "#F2F2F2",
-        "default": "#FFFFFF",
-        "disabled": "#FFFFFF",
-        "foreground": "#242424",
-        "hover": "#F8F8F8"
-      },
-      "transparent": {
-        "active": "#24242433",
-        "default": "transparent",
-        "disabled": "transparent",
-        "hover": "#2424241A"
-      }
-    },
-    "cta": {
-      "active": "#FFAA00",
-      "default": "#FFBE3C",
-      "disabled": "#FCECCB",
-      "foreground": "#242424",
-      "hover": "#FFCC66"
-    },
-    "feedback": {
       "info": {
-        "background": "#D5E5F8",
-        "contrast": "#2071CE",
-        "foreground": "#003B7E"
+        "default": "#3089F0",
+        "strong": "#1454A8",
+        "subtle": "#C7E5FF"
       },
-      "invalid": {
-        "background": "#FFCDD2",
-        "contrast": "#F44336",
-        "foreground": "#B71C1C"
+      "neutral": {
+        "default": "#808A91",
+        "strong": "#4B575E",
+        "subtle": "#DCE2E5"
       },
       "success": {
-        "background": "#D7F1D8",
-        "contrast": "#46A65A",
-        "foreground": "#275D33"
+        "default": "#53BD69",
+        "strong": "#23613C",
+        "subtle": "#C2EDC5"
       },
       "warning": {
-        "background": "#FFE8D6",
-        "contrast": "#F35B1C",
-        "foreground": "#9C2E00"
+        "default": "#F58B4E",
+        "strong": "#8F3D1F",
+        "subtle": "#FFD9BD"
       }
     },
+    "focus": "#61ABFF",
     "primary": {
-      "active": "#005757",
-      "default": "#007171",
-      "disabled": "#A7D5C2",
+      "active": "#0C333B",
+      "default": "#006063",
+      "disabled": "#51B8A6",
       "foreground": "#FFFFFF",
-      "hover": "#059688"
+      "hover": "#007874"
     },
-    "skintone": {
-      "dark": "#7C533E",
-      "default": "#FFCC4D",
-      "light": "#F7DECE",
-      "light-medium": "#F3D2A2",
-      "medium": "#D4AB88",
-      "medium-dark": "#AF7E57"
-    },
-    "status": {
-      "away": {
-        "background": "#FFE6B3",
-        "contrast": "#FFBE3C",
-        "foreground": "#805500"
+    "surface": {
+      "canvas": "#EBEEF0",
+      "primary": {
+        "active": "#EBEEF0",
+        "default": "#FFFFFF",
+        "disabled": "#FFFFFF",
+        "hover": "#F7F9FA"
       },
-      "busy": {
-        "background": "#FFCDD2",
-        "contrast": "#F44336",
-        "foreground": "#B71C1C"
+      "secondary": {
+        "active": "#DCE2E5",
+        "default": "#F7F9FA",
+        "disabled": "#F7F9FA",
+        "hover": "#EBEEF0"
       },
-      "offline": {
-        "background": "#E0DDDC",
-        "contrast": "#828282",
-        "foreground": "#363230"
+      "tertiary": {
+        "active": "#C9D1D6",
+        "default": "#EBEEF0",
+        "disabled": "#F7F9FA",
+        "hover": "#DCE2E5"
       },
-      "online": {
-        "background": "#D7F1D8",
-        "contrast": "#46A65A",
-        "foreground": "#275D33"
+      "transparent": {
+        "active": "#1A212633",
+        "default": "transparent",
+        "disabled": "transparent",
+        "hover": "#1A21261A"
       }
     },
     "text": {
-      "default": "#242424",
-      "disabled": "#A6A6A6",
-      "invalid": "#D13D42",
-      "inverted": "#FFFFFF",
-      "link": "#007171",
-      "link-disabled": "#A7D5C2",
-      "muted": "#767676"
+      "caption": "#4B575E",
+      "default": "#1A2126",
+      "disabled": "#9EA9B0",
+      "muted": "#626C73"
     }
@@ -148,0 +82,0 @@ },

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

-50%

Worsened metrics

Total package byte prevSize

109723

-10.63%

Lines of code

1756

-8.97%

No dependency changes