@vkzstudio/muza-ui 1.0.44 → 1.0.46

package/dist/styles/primitives.css

@@ -55,18 +55,21 @@
   --color-orange-800: #b34024;
   --color-orange-900: #8b2f19;
   --color-other-blue: #1d8ced;
+  --color-other-blue-dark: #0066bf;
   --color-other-blue-light: #cde8ff;
   --color-other-green: #009174;
   --color-other-green-light: #cde7e2;
   --color-other-orange: #f47140;
   --color-other-orange-light: #ffe4d9;
   --color-other-pink: #e4329c;
+  --color-other-pink-dark: #ba1376;
   --color-other-pink-light: #ffd2ec;
   --color-other-purple: #652ef3;
   --color-other-purple-light: #dfd2ff;
   --color-other-red: #ee304d;
   --color-other-red-light: #ffccd3;
   --color-other-yellow: #e3b42b;
+  --color-other-yellow-dark: #866400;
   --color-other-yellow-light: #f6e9c3;
   --color-pink-100: #f2e9f8;
   --color-pink-1000: #3c0b48;
@@ -90,7 +93,7 @@
   --color-purple-900: #1c0638;
   --color-red-100: #ffd1d7;
   --color-red-1000: #36070d;
-  --color-red-200: #ea929d;
+  --color-red-200: #f99fab;
   --color-red-300: #d45f6e;
   --color-red-400: #b44453;
   --color-red-50: #fff1f2;
@@ -118,6 +121,7 @@
   --color-transparent-red-35: #a92b3d59;
   --color-transparent-red-8: #a92b3d14;
   --color-transparent-transparent: #ffffff00;
+  --color-transparent-white-10: #ffffff14;
   --color-transparent-white-15: #ffffff26;
   /* number */
   --spacing-0: 0px;

package/dist/styles/token-colors.css

@@ -1,30 +1,77 @@
 @theme inline {
   /* color */
-  --color-comp-accordeon-settings-bg-primary-def: var(
+  --color-comp-accordion-branded-bg-def: var(
+    --color-surface-brand-brand-tertiary
+  );
+  --color-comp-accordion-branded-bg-disabled: var(
+    --color-surface-brand-primary-disabled
+  );
+  --color-comp-accordion-branded-bg-focused: var(
+    --color-surface-brand-brand-tertiary
+  );
+  --color-comp-accordion-branded-bg-hover: var(
+    --color-surface-base-primary-hover
+  );
+  --color-comp-accordion-branded-text-def: var(--color-text-brand-def);
+  --color-comp-accordion-branded-text-disabled: var(--color-text-dark-disabled);
+  --color-comp-accordion-branded-text-focused: var(--color-text-brand-focused);
+  --color-comp-accordion-branded-text-hover: var(--color-text-brand-hover);
+  --color-comp-accordion-default-bg-primary-def: var(
+    --color-surface-base-secondary
+  );
+  --color-comp-accordion-default-bg-primary-disabled: var(
+    --color-surface-base-secondary
+  );
+  --color-comp-accordion-default-bg-primary-focused: var(
+    --color-surface-base-secondary
+  );
+  --color-comp-accordion-default-bg-primary-hover: var(
+    --color-surface-base-secondary
+  );
+  --color-comp-accordion-default-bg-secondary: var(
+    --color-surface-base-primary
+  );
+  --color-comp-accordion-default-stroke-def: var(--color-stroke-base-secondary);
+  --color-comp-accordion-default-stroke-disabled: var(
+    --color-stroke-base-secondary
+  );
+  --color-comp-accordion-default-stroke-focused: var(
+    --color-surface-base-transparent
+  );
+  --color-comp-accordion-default-stroke-hover: var(--color-stroke-brand-hover);
+  --color-comp-accordion-inline-stroke-def: var(--color-stroke-base-primary);
+  --color-comp-accordion-inline-stroke-disabled: var(
+    --color-stroke-base-primary
+  );
+  --color-comp-accordion-inline-stroke-focused: var(
+    --color-surface-brand-primary-focused-pressed
+  );
+  --color-comp-accordion-inline-stroke-hover: var(--color-stroke-base-primary);
+  --color-comp-accordion-settings-bg-primary-def: var(
     --color-surface-base-secondary
   );
-  --color-comp-accordeon-settings-bg-primary-disabled: var(
+  --color-comp-accordion-settings-bg-primary-disabled: var(
     --color-surface-base-secondary
   );
-  --color-comp-accordeon-settings-bg-primary-focused: var(
+  --color-comp-accordion-settings-bg-primary-focused: var(
     --color-surface-base-secondary
   );
-  --color-comp-accordeon-settings-bg-primary-hover: var(
+  --color-comp-accordion-settings-bg-primary-hover: var(
     --color-surface-base-secondary
   );
-  --color-comp-accordeon-settings-bg-secondary: var(
+  --color-comp-accordion-settings-bg-secondary: var(
     --color-surface-base-primary
   );
-  --color-comp-accordeon-settings-stroke-def: var(
+  --color-comp-accordion-settings-stroke-def: var(
     --color-stroke-base-secondary
   );
-  --color-comp-accordeon-settings-stroke-disabled: var(
+  --color-comp-accordion-settings-stroke-disabled: var(
     --color-stroke-base-secondary
   );
-  --color-comp-accordeon-settings-stroke-focused: var(
+  --color-comp-accordion-settings-stroke-focused: var(
     --color-surface-base-transparent
   );
-  --color-comp-accordeon-settings-stroke-hover: var(--color-stroke-brand-hover);
+  --color-comp-accordion-settings-stroke-hover: var(--color-stroke-brand-hover);
   --color-comp-alert-bg-error: var(--color-surface-state-bg-error);
   --color-comp-alert-bg-info: var(--color-surface-state-bg-info);
   --color-comp-alert-bg-success: var(--color-surface-state-bg-success);
@@ -33,6 +80,16 @@
   --color-comp-alert-text-info: var(--color-text-brand-def);
   --color-comp-alert-text-success: var(--color-text-state-success);
   --color-comp-alert-text-warning: var(--color-text-state-warning);
+  --color-comp-article-card-fill-default: var(--color-surface-base-transparent);
+  --color-comp-article-card-fill-disabled: var(
+    --color-surface-base-transparent
+  );
+  --color-comp-article-card-fill-focused: var(--color-surface-base-transparent);
+  --color-comp-article-card-fill-hover: var(--color-surface-base-transparent);
+  --color-comp-article-card-stroke-default: var(--color-stroke-base-primary);
+  --color-comp-article-card-stroke-disabled: var(--color-stroke-base-primary);
+  --color-comp-article-card-stroke-focused: var(--color-stroke-brand-focused);
+  --color-comp-article-card-stroke-hover: var(--color-stroke-brand-hover);
   --color-comp-benefit-card-bg-def: var(--color-surface-base-secondary);
   --color-comp-benefit-card-bg-disabled: var(--color-surface-base-secondary);
   --color-comp-benefit-card-bg-focused: var(--color-surface-base-secondary);
@@ -51,7 +108,7 @@
   --color-comp-benefit-card-text-hover: var(--color-text-dark-primary-def);
   --color-comp-benefit-card-text-primary: var(--color-text-dark-primary-def);
   --color-comp-benefit-card-text-secondary: var(--color-text-dark-secondary);
-  --color-comp-button-arrow-disabled: var(--color-gray-300);
+  --color-comp-button-arrow-disabled: var(--gray-300);
   --color-comp-button-danger-ghost-bg-def: var(--color-transparent-transparent);
   --color-comp-button-danger-ghost-bg-disabled: var(
     --color-transparent-transparent
@@ -738,6 +795,21 @@
   --color-comp-button-tertiary-text-focused: var(--color-text-brand-focused);
   --color-comp-button-tertiary-text-hover: var(--color-text-brand-hover);
   --color-comp-button-tertiary-text-pressed: var(--color-text-brand-pressed);
+  --color-comp-button-toggle-check-icon-active: var(--color-text-state-success);
+  --color-comp-button-toggle-check-icon-def: var(
+    --color-icon-dark-secondary-def
+  );
+  --color-comp-button-toggle-check-icon-disabled: var(
+    --color-text-dark-disabled
+  );
+  --color-comp-button-toggle-check-icon-error: var(
+    --color-text-state-error-def
+  );
+  --color-comp-button-toggle-check-icon-focused: var(--color-text-brand-def);
+  --color-comp-button-toggle-check-icon-hover: var(--color-text-state-success);
+  --color-comp-button-toggle-check-icon-pressed: var(
+    --color-text-brand-pressed
+  );
   --color-comp-card-dashboard-dark-bg-def: var(--color-black-dramatic-900);
   --color-comp-card-dashboard-dark-bg-disabled: var(--color-black-dramatic-300);
   --color-comp-card-dashboard-dark-bg-focused: var(
@@ -775,12 +847,15 @@
   --color-comp-checkbox-bg-disabled: var(--color-surface-base-transparent);
   --color-comp-checkbox-bg-error: var(--color-surface-base-transparent);
   --color-comp-checkbox-bg-hover: var(--color-surface-brand-brand-tertiary);
+  --color-comp-checkbox-stroke-active: var(--color-stroke-brand-def);
   --color-comp-checkbox-stroke-def: var(--color-stroke-base-tertiary);
   --color-comp-checkbox-stroke-disabled: var(--color-stroke-base-disabled);
-  --color-comp-checkbox-stroke-error: var(--color-text-state-error-def);
-  --color-comp-checkbox-stroke-hover: var(--color-text-brand-hover);
+  --color-comp-checkbox-stroke-error: var(--color-stroke-error-def);
+  --color-comp-checkbox-stroke-hover: var(--color-stroke-brand-def);
   --color-comp-dialog-bg-android: var(--color-surface-base-secondary);
   --color-comp-dialog-text-def: var(--color-text-dark-primary-def);
+  --color-comp-dot-divider-def: var(--color-icon-dark-tertiary);
+  --color-comp-dot-divider-invert: var(--color-icon-invert-def);
   --color-comp-dropdown-menu-fill-base-def: var(
     --color-transparent-transparent
   );
@@ -973,6 +1048,30 @@
   );
   --color-comp-market-category-sport-primary: var(--color-other-orange);
   --color-comp-market-category-sport-secondary: var(--color-other-orange-light);
+  --color-comp-offer-card-fill-def-default: var(
+    --color-surface-base-transparent
+  );
+  --color-comp-offer-card-fill-def-disabled: var(
+    --color-surface-base-transparent
+  );
+  --color-comp-offer-card-fill-def-focused: var(
+    --color-surface-base-transparent
+  );
+  --color-comp-offer-card-fill-def-hover: var(--color-surface-base-transparent);
+  --color-comp-offer-card-fill-promo-default: var(
+    --color-surface-base-secondary
+  );
+  --color-comp-offer-card-fill-promo-disabled: var(
+    --color-surface-base-secondary
+  );
+  --color-comp-offer-card-fill-promo-focused: var(
+    --color-surface-base-secondary
+  );
+  --color-comp-offer-card-fill-promo-hover: var(--color-surface-base-secondary);
+  --color-comp-offer-card-stroke-default: var(--color-stroke-base-primary);
+  --color-comp-offer-card-stroke-disabled: var(--color-stroke-base-primary);
+  --color-comp-offer-card-stroke-focused: var(--color-stroke-brand-focused);
+  --color-comp-offer-card-stroke-hover: var(--color-stroke-brand-hover);
   --color-comp-pagination-bg-def: var(--color-surface-base-transparent);
   --color-comp-pagination-bg-disabled: var(--color-surface-base-transparent);
   --color-comp-pagination-bg-error: var(--color-surface-base-transparent);
@@ -987,6 +1086,14 @@
   --color-comp-pin-bg-empty: var(--color-surface-base-transparent);
   --color-comp-pin-border-def: var(--color-stroke-dark-def);
   --color-comp-pin-border-none: #1c1a1f00;
+  --color-comp-progress-bg-fill-def: var(--color-surface-brand-primary);
+  --color-comp-progress-bg-fill-disabled: var(
+    --color-surface-brand-primary-disabled
+  );
+  --color-comp-progress-bg-track-def: var(--color-surface-brand-brand-tertiary);
+  --color-comp-progress-bg-track-disabled: var(
+    --color-surface-brand-brand-tertiary
+  );
   --color-comp-quantity-selector-bg-def: var(--color-surface-base-tertiary);
   --color-comp-quantity-selector-bg-disabled: var(--color-gray-50);
   --color-comp-quantity-selector-bg-focused: var(
@@ -1007,6 +1114,27 @@
   --color-comp-responsive-layout-table-bg-success: var(
     --color-surface-state-bg-success
   );
+  --color-comp-segmented-control-bg-def: var(--color-surface-state-bg-info);
+  --color-comp-segmented-control-bg-item-active: var(
+    --color-surface-base-secondary
+  );
+  --color-comp-segmented-control-bg-item-def: var(
+    --color-surface-base-transparent
+  );
+  --color-comp-segmented-control-bg-item-disabled: var(
+    --color-surface-base-transparent
+  );
+  --color-comp-segmented-control-bg-item-focused: var(
+    --color-surface-brand-ghost-focused
+  );
+  --color-comp-segmented-control-bg-item-hover: var(
+    --color-surface-brand-ghost-hover
+  );
+  --color-comp-segmented-control-text-active: var(--color-text-brand-def);
+  --color-comp-segmented-control-text-def: var(--color-text-brand-def);
+  --color-comp-segmented-control-text-disabled: var(--color-text-dark-disabled);
+  --color-comp-segmented-control-text-focused: var(--color-text-brand-focused);
+  --color-comp-segmented-control-text-hover: var(--color-text-brand-hover);
   --color-comp-select-fill-def: var(--color-surface-base-secondary);
   --color-comp-select-fill-disabled: var(
     --color-surface-dark-secondary-disabled
@@ -1053,6 +1181,19 @@
   --color-comp-sidebar-menu-item-hover: var(
     --color-surface-invert-transparent-hover
   );
+  --color-comp-slider-range-bg-def: var(--color-surface-brand-primary);
+  --color-comp-slider-range-bg-disabled: var(
+    --color-surface-brand-primary-disabled
+  );
+  --color-comp-slider-range-bg-hover: var(--color-surface-brand-primary);
+  --color-comp-slider-thumb-bg-def: var(--color-neutral-white);
+  --color-comp-slider-thumb-bg-disabled: var(--color-surface-base-primary);
+  --color-comp-slider-thumb-stroke-def: var(--color-stroke-dashed-def);
+  --color-comp-slider-thumb-stroke-disabled: var(--color-stroke-base-disabled);
+  --color-comp-slider-thumb-stroke-focused: var(--color-stroke-brand-focused);
+  --color-comp-slider-thumb-stroke-hover: var(--color-stroke-brand-hover);
+  --color-comp-slider-track-bg-def: var(--color-surface-brand-brand-tertiary);
+  --color-comp-slider-track-bg-disabled: var(--color-surface-base-tertiary);
   --color-comp-slider-indicators-bg-active: var(--color-surface-brand-primary);
   --color-comp-slider-indicators-bg-def: var(--color-surface-brand-secondary);
   --color-comp-star-default: var(--color-other-yellow);
@@ -1103,7 +1244,65 @@
     --color-surface-brand-primary-focused-pressed
   );
   --color-comp-time-picker-hover: var(--color-surface-brand-primary-hover);
+  --color-comp-toast-bg-error: var(--color-surface-error-def);
+  --color-comp-toast-bg-success: var(--color-green-500);
+  --color-comp-toast-bg-warning: var(--color-orange-200);
+  --color-comp-toast-text-success: var(--color-text-invert-def);
+  --color-comp-toast-text-text-error: var(--color-text-invert-def);
+  --color-comp-toast-text-warning: var(--color-text-state-warning);
   --color-comp-tutorial-banner-bg: var(--color-transparent-brand-8);
+  --color-comp-typography-link-brand-stroke-def: var(--color-stroke-brand-def);
+  --color-comp-typography-link-brand-stroke-disabled: var(
+    --color-stroke-brand-disabled
+  );
+  --color-comp-typography-link-brand-stroke-focused: var(
+    --color-stroke-brand-focused
+  );
+  --color-comp-typography-link-brand-stroke-hover: var(
+    --color-stroke-brand-hover
+  );
+  --color-comp-typography-link-brand-stroke-pressed: var(
+    --color-stroke-brand-pressed
+  );
+  --color-comp-typography-link-brand-text-def: var(--color-text-brand-def);
+  --color-comp-typography-link-brand-text-disabled: var(
+    --color-text-dark-tertiary
+  );
+  --color-comp-typography-link-brand-text-focused: var(
+    --color-text-brand-focused
+  );
+  --color-comp-typography-link-brand-text-hover: var(--color-text-brand-hover);
+  --color-comp-typography-link-brand-text-pressed: var(
+    --color-text-brand-pressed
+  );
+  --color-comp-typography-link-danger-stroke-def: var(--color-stroke-error-def);
+  --color-comp-typography-link-danger-stroke-disabled: var(
+    --color-stroke-error-disabled
+  );
+  --color-comp-typography-link-danger-stroke-focused: var(
+    --color-stroke-error-focused
+  );
+  --color-comp-typography-link-danger-stroke-hover: var(
+    --color-stroke-error-hover
+  );
+  --color-comp-typography-link-danger-stroke-pressed: var(
+    --color-stroke-error-pressed
+  );
+  --color-comp-typography-link-danger-text-def: var(
+    --color-text-state-error-def
+  );
+  --color-comp-typography-link-danger-text-disabled: var(
+    --color-text-state-error-disabled
+  );
+  --color-comp-typography-link-danger-text-focused: var(
+    --color-text-state-error-focused
+  );
+  --color-comp-typography-link-danger-text-hover: var(
+    --color-text-state-error-hover
+  );
+  --color-comp-typography-link-danger-text-pressed: var(
+    --color-text-state-error-pressed
+  );
   --color-icon-brand-def: var(--brand-primary);
   --color-icon-brand-focused: var(--brand-focused);
   --color-icon-brand-hover: var(--brand-hover);
@@ -1226,3 +1425,13 @@
   --color-text-state-success: var(--color-green-500);
   --color-text-state-warning: var(--color-orange-800);
 }
+
+/*
+ * Dark mode placeholder.
+ * Figma exports tokens under [data-theme="Dark mode"] but they are not yet
+ * wired up in this codebase. When ready, enable dark mode by:
+ *   1. Adding a 'colors_dark' entry to SCOPES in scripts/import-tokens.mjs
+ *      (selector: [data-theme="dark"]).
+ *   2. Re-running 'npm run tokens:import' — the dark block will be emitted
+ *      below this comment automatically.
+ */