@kksdev/ds-angular 1.2.4 → 1.3.0

package/src/styles/themes/_custom.scss

@@ -389,5 +389,302 @@
   --accordion-icon-color: var(--text-muted);
   --accordion-focus-color: var(--role-primary);
   --accordion-expanded-border-color: var(--role-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SEARCH INPUT
+   * ======================================================================== */
+  --search-input-bg: var(--input-bg);
+  --search-input-text: var(--text-default);
+  --search-input-placeholder: var(--text-muted);
+  --search-input-border: var(--input-border-color);
+  --search-input-focus-border: var(--role-primary);
+  --search-input-focus-shadow: 0 0 0 3px color-mix(in oklab, var(--role-primary) 25%, transparent);
+  --search-input-icon-color: var(--text-muted);
+  --search-input-clear-color: var(--text-muted);
+  --search-input-clear-hover-bg: var(--surface-hover);
+  --search-input-clear-hover-color: var(--text-default);
+  --search-input-clear-active-bg: var(--surface-raised);
+  --search-input-disabled-bg: var(--bg-disabled);
+  --search-input-disabled-text: var(--text-disabled);
+  --search-input-loading-color: var(--role-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DATE PICKER
+   * ======================================================================== */
+  --datepicker-bg: var(--surface-default);
+  --datepicker-border: var(--border-color);
+  --datepicker-header-bg: var(--surface-raised);
+  --datepicker-footer-bg: var(--surface-raised);
+  --datepicker-title-color: var(--text-default);
+  --datepicker-nav-color: var(--text-muted);
+  --datepicker-btn-hover-bg: var(--surface-hover);
+  --datepicker-weekday-color: var(--text-muted);
+  --datepicker-day-color: var(--text-default);
+  --datepicker-day-hover-bg: var(--surface-hover);
+  --datepicker-day-other-color: var(--text-subtle);
+  --datepicker-today-border: var(--role-primary);
+  --datepicker-selected-bg: var(--role-primary);
+  --datepicker-selected-text: var(--gray-50);
+  --datepicker-selected-hover-bg: color-mix(in oklab, var(--role-primary) 85%, var(--background-main));
+  --datepicker-range-bg: color-mix(in oklab, var(--role-primary) 15%, transparent);
+  --datepicker-option-color: var(--text-default);
+  --datepicker-option-hover-bg: var(--surface-hover);
+  --datepicker-action-color: var(--text-default);
+  --datepicker-action-hover-bg: var(--surface-hover);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CONTAINER
+   * ======================================================================== */
+  --ds-container-sm: 540px;
+  --ds-container-md: 720px;
+  --ds-container-lg: 960px;
+  --ds-container-xl: 1140px;
+  --ds-container-2xl: 1320px;
+  --ds-container-gutter-sm: var(--space-4);
+  --ds-container-gutter-md: var(--space-6);
+  --ds-container-gutter-lg: var(--space-8);
+
+  /* ==========================================================================
+   * LINKS & SELECTIONS
+   * ======================================================================== */
+  --link: var(--role-primary);
+  --link-hover: color-mix(in oklab, var(--role-primary) 85%, var(--background-main));
+  --selection-bg: color-mix(in oklab, var(--role-primary) 25%, transparent);
+  --selection-text: var(--text-default);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS AVATAR
+   * ======================================================================== */
+  --avatar-bg: var(--background-header);
+  --avatar-text: var(--text-muted);
+  --avatar-border: var(--border-color);
+  --avatar-placeholder-bg: var(--role-primary);
+  --avatar-placeholder-text: var(--gray-50);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS MENU
+   * ======================================================================== */
+  --menu-bg: var(--surface-default);
+  --menu-border: var(--border-color);
+  --menu-shadow: var(--shadow-2);
+  --menu-item-text: var(--text-default);
+  --menu-item-icon: var(--text-muted);
+  --menu-item-hover-bg: var(--surface-hover);
+  --menu-item-hover-text: var(--text-default);
+  --menu-item-active-bg: color-mix(in oklab, var(--role-primary) 15%, transparent);
+  --menu-item-active-text: var(--role-primary);
+  --menu-item-disabled-text: var(--text-disabled);
+  --menu-item-disabled-icon: var(--text-disabled-alt);
+  --menu-divider: var(--border-subtle);
+  --menu-backdrop: transparent;
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CARD
+   * ======================================================================== */
+  --card-bg: var(--surface-default);
+  --card-text: var(--text-default);
+  --card-border: var(--border-color);
+  --card-border-strong: var(--border-strong);
+  --card-divider: var(--border-subtle);
+  --card-header-color: var(--text-default);
+  --card-footer-color: var(--text-muted);
+  --card-shadow: var(--shadow-2);
+  --card-shadow-hover: var(--shadow-3);
+  --card-disabled-opacity: 0.5;
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS ALERT
+   * ======================================================================== */
+  --alert-success-bg: var(--bg-success);
+  --alert-success-border: var(--success);
+  --alert-success-text: var(--text-success);
+  --alert-success-icon: var(--success);
+  --alert-warning-bg: var(--bg-warning);
+  --alert-warning-border: var(--warning);
+  --alert-warning-text: var(--text-warning);
+  --alert-warning-icon: var(--warning);
+  --alert-error-bg: var(--bg-error);
+  --alert-error-border: var(--error);
+  --alert-error-text: var(--text-error);
+  --alert-error-icon: var(--error);
+  --alert-info-bg: var(--bg-info);
+  --alert-info-border: var(--info);
+  --alert-info-text: var(--text-info);
+  --alert-info-icon: var(--info);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DIVIDER
+   * ======================================================================== */
+  --divider-color: var(--border-color);
+  --divider-text: var(--text-muted);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SELECT
+   * ======================================================================== */
+  --select-bg: var(--surface-default);
+  --select-text: var(--text-default);
+  --select-border: var(--border-color);
+  --select-placeholder: var(--text-muted);
+  --select-hover-border: var(--role-primary);
+  --select-focus-border: var(--role-primary);
+  --select-focus-shadow: color-mix(in oklab, var(--role-primary) 20%, transparent);
+  --select-disabled-bg: var(--bg-disabled);
+  --select-dropdown-bg: var(--surface-default);
+  --select-dropdown-border: var(--border-color);
+  --select-option-hover-bg: var(--surface-hover);
+  --select-option-selected-bg: color-mix(in oklab, var(--role-primary) 10%, transparent);
+  --select-option-selected-text: var(--role-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TABLE
+   * ======================================================================== */
+  --table-bg: var(--surface-default);
+  --table-border-color: var(--border-color);
+  --table-header-bg: var(--surface-raised);
+  --table-header-text: var(--text-default);
+  --table-header-hover-bg: var(--surface-hover);
+  --table-row-border: color-mix(in oklab, var(--border-color) 50%, transparent);
+  --table-row-hover-bg: var(--surface-hover);
+  --table-row-selected-bg: color-mix(in oklab, var(--role-primary) 10%, transparent);
+  --table-stripe-bg: var(--surface-raised);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS COMBOBOX
+   * ======================================================================== */
+  --combobox-bg: var(--surface-default);
+  --combobox-text: var(--text-default);
+  --combobox-border: var(--border-color);
+  --combobox-placeholder: var(--text-muted);
+  --combobox-hover-border: var(--role-primary);
+  --combobox-focus-border: var(--role-primary);
+  --combobox-focus-shadow: color-mix(in oklab, var(--role-primary) 20%, transparent);
+  --combobox-disabled-bg: var(--bg-disabled);
+  --combobox-dropdown-bg: var(--surface-default);
+  --combobox-dropdown-border: var(--border-color);
+  --combobox-option-hover-bg: var(--surface-hover);
+  --combobox-option-selected-bg: color-mix(in oklab, var(--role-primary) 10%, transparent);
+  --combobox-option-selected-text: var(--role-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS PROGRESS BAR
+   * ======================================================================== */
+  --progress-track-bg: var(--background-header);
+  --progress-fill-bg: var(--role-primary);
+  --progress-fill-success: var(--success);
+  --progress-fill-warning: var(--warning);
+  --progress-fill-error: var(--error);
+  --progress-label-color: var(--text-default);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SKELETON
+   * ======================================================================== */
+  --skeleton-bg: var(--background-header);
+  --skeleton-shimmer: var(--border-color);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS MODAL (compléments)
+   * ======================================================================== */
+  --modal-border-color: var(--border-strong);
+  --modal-box-shadow: var(--shadow-3);
+  --modal-divider: var(--border-subtle);
+  --modal-footer-shadow: inset 0 1px 0 var(--modal-divider);
+  --modal-type-success-color: var(--success);
+  --modal-type-success-contrast: var(--gray-50);
+  --modal-type-warning-color: var(--warning);
+  --modal-type-warning-contrast: var(--gray-900);
+  --modal-type-error-color: var(--error);
+  --modal-type-error-contrast: var(--gray-50);
+  --modal-type-info-color: var(--info);
+  --modal-type-info-contrast: var(--gray-50);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TOAST (compléments)
+   * ======================================================================== */
+  --toast-success-border: var(--success);
+  --toast-warning-border: var(--warning);
+  --toast-error-border: var(--error);
+  --toast-info-border: var(--info);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CHIP
+   * ======================================================================== */
+  --chip-bg: var(--surface-default);
+  --chip-text: var(--text-default);
+  --chip-border: transparent;
+  --chip-hover-bg: var(--surface-hover);
+  --chip-focus-ring: color-mix(in oklab, var(--role-primary) 30%, transparent);
+  --chip-selected-ring: var(--role-primary);
+  --chip-disabled-opacity: 0.5;
+
+  /* Primary */
+  --chip-primary-bg: var(--role-primary);
+  --chip-primary-text: var(--gray-50);
+  --chip-primary-border: transparent;
+  --chip-primary-hover-bg: color-mix(in oklab, var(--role-primary) 85%, var(--background-main));
+  --chip-primary-hover-bg-outlined: color-mix(in oklab, var(--role-primary) 10%, transparent);
+
+  /* Success */
+  --chip-success-bg: var(--bg-success);
+  --chip-success-text: var(--success);
+  --chip-success-border: var(--success);
+  --chip-success-hover-bg: color-mix(in oklab, var(--success) 20%, transparent);
+  --chip-success-hover-bg-outlined: color-mix(in oklab, var(--success) 10%, transparent);
+
+  /* Warning */
+  --chip-warning-bg: var(--bg-warning);
+  --chip-warning-text: var(--warning);
+  --chip-warning-border: var(--warning);
+  --chip-warning-hover-bg: color-mix(in oklab, var(--warning) 25%, transparent);
+  --chip-warning-hover-bg-outlined: color-mix(in oklab, var(--warning) 10%, transparent);
+
+  /* Error */
+  --chip-error-bg: var(--bg-error);
+  --chip-error-text: var(--error);
+  --chip-error-border: var(--error);
+  --chip-error-hover-bg: color-mix(in oklab, var(--error) 25%, transparent);
+  --chip-error-hover-bg-outlined: color-mix(in oklab, var(--error) 10%, transparent);
+
+  /* Info */
+  --chip-info-bg: var(--bg-info);
+  --chip-info-text: var(--info);
+  --chip-info-border: var(--info);
+  --chip-info-hover-bg: color-mix(in oklab, var(--info) 25%, transparent);
+  --chip-info-hover-bg-outlined: color-mix(in oklab, var(--info) 10%, transparent);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SLIDER
+   * ======================================================================== */
+  --slider-track-bg: var(--background-header);
+  --slider-fill-bg: var(--role-primary);
+  --slider-thumb-bg: var(--surface-default);
+  --slider-thumb-border-color: var(--role-primary);
+  --slider-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --slider-thumb-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --slider-thumb-shadow-focus: 0 0 0 3px color-mix(in oklab, var(--role-primary) 30%, transparent);
+  --slider-thumb-shadow-active: 0 0 0 4px color-mix(in oklab, var(--role-primary) 20%, transparent);
+  --slider-tick-color: var(--border-color);
+  --slider-label-color: var(--text-default);
+  --slider-thumb-label-bg: var(--background-header);
+  --slider-thumb-label-color: var(--text-default);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS FILE UPLOAD
+   * ======================================================================== */
+  --file-upload-border: var(--border-color);
+  --file-upload-border-hover: var(--role-primary);
+  --file-upload-border-active: var(--role-primary);
+  --file-upload-bg: var(--surface-default);
+  --file-upload-bg-hover: var(--surface-hover);
+  --file-upload-bg-active: color-mix(in oklab, var(--role-primary) 10%, transparent);
+  --file-upload-text-color: var(--text-muted);
+  --file-upload-label-color: var(--text-default);
+  --file-upload-help-color: var(--text-subtle);
+  --file-upload-hint-color: var(--text-subtle);
+  --file-upload-icon-color: var(--text-muted);
+  --file-upload-icon-color-hover: var(--role-primary);
+  --file-upload-icon-color-active: var(--role-primary);
+  --file-upload-file-border: var(--border-subtle);
+  --file-upload-file-bg: var(--surface-default);
+  --file-upload-file-bg-hover: var(--surface-hover);
 }
 

package/src/styles/themes/_dark.scss

@@ -438,4 +438,231 @@
   --menu-item-disabled-icon: var(--gray-600);
   --menu-divider: var(--gray-700);
   --menu-backdrop: transparent;
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SEARCH INPUT
+   * ======================================================================== */
+  --search-input-bg: var(--input-bg);
+  --search-input-text: var(--text-default);
+  --search-input-placeholder: var(--text-muted);
+  --search-input-border: var(--input-border-color);
+  --search-input-focus-border: var(--color-primary);
+  --search-input-focus-shadow: var(--input-focus-shadow);
+  --search-input-icon-color: var(--gray-400);
+  --search-input-clear-color: var(--gray-400);
+  --search-input-clear-hover-bg: var(--gray-700);
+  --search-input-clear-hover-color: var(--gray-100);
+  --search-input-clear-active-bg: var(--gray-600);
+  --search-input-disabled-bg: var(--gray-900);
+  --search-input-disabled-text: var(--gray-500);
+  --search-input-loading-color: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DATE PICKER
+   * ======================================================================== */
+  --datepicker-bg: var(--gray-800);
+  --datepicker-border: var(--gray-700);
+  --datepicker-header-bg: var(--gray-700);
+  --datepicker-footer-bg: var(--gray-700);
+  --datepicker-title-color: var(--gray-100);
+  --datepicker-nav-color: var(--gray-400);
+  --datepicker-btn-hover-bg: var(--gray-600);
+  --datepicker-weekday-color: var(--gray-400);
+  --datepicker-day-color: var(--gray-100);
+  --datepicker-day-hover-bg: var(--gray-700);
+  --datepicker-day-other-color: var(--gray-500);
+  --datepicker-today-border: var(--color-primary);
+  --datepicker-selected-bg: var(--color-primary);
+  --datepicker-selected-text: var(--gray-900);
+  --datepicker-selected-hover-bg: color-mix(in oklab, var(--color-primary) 85%, var(--background-main));
+  --datepicker-range-bg: color-mix(in oklab, var(--color-primary) 20%, transparent);
+  --datepicker-option-color: var(--gray-100);
+  --datepicker-option-hover-bg: var(--gray-700);
+  --datepicker-action-color: var(--gray-100);
+  --datepicker-action-hover-bg: var(--gray-600);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CARD
+   * ======================================================================== */
+  --card-bg: var(--surface-default);
+  --card-text: var(--text-default);
+  --card-border: var(--border-color);
+  --card-border-strong: var(--border-strong);
+  --card-divider: var(--border-subtle);
+  --card-header-color: var(--gray-100);
+  --card-footer-color: var(--gray-400);
+  --card-shadow: var(--shadow-2);
+  --card-shadow-hover: var(--shadow-3);
+  --card-disabled-opacity: 0.5;
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS ALERT
+   * ======================================================================== */
+  --alert-success-bg: var(--bg-success);
+  --alert-success-border: var(--success);
+  --alert-success-text: var(--text-success);
+  --alert-success-icon: var(--success);
+  --alert-warning-bg: var(--bg-warning);
+  --alert-warning-border: var(--warning);
+  --alert-warning-text: var(--text-warning);
+  --alert-warning-icon: var(--warning);
+  --alert-error-bg: var(--bg-error);
+  --alert-error-border: var(--error);
+  --alert-error-text: var(--text-error);
+  --alert-error-icon: var(--error);
+  --alert-info-bg: var(--bg-info);
+  --alert-info-border: var(--info);
+  --alert-info-text: var(--text-info);
+  --alert-info-icon: var(--info);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DIVIDER
+   * ======================================================================== */
+  --divider-color: var(--gray-700);
+  --divider-text: var(--gray-400);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SELECT
+   * ======================================================================== */
+  --select-bg: var(--gray-800);
+  --select-text: var(--gray-100);
+  --select-border: var(--gray-700);
+  --select-placeholder: var(--gray-400);
+  --select-hover-border: var(--color-primary);
+  --select-focus-border: var(--color-primary);
+  --select-focus-shadow: color-mix(in oklab, var(--color-primary) 35%, transparent);
+  --select-disabled-bg: var(--gray-900);
+  --select-dropdown-bg: var(--gray-800);
+  --select-dropdown-border: var(--gray-700);
+  --select-option-hover-bg: var(--gray-700);
+  --select-option-selected-bg: color-mix(in oklab, var(--color-primary) 20%, transparent);
+  --select-option-selected-text: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TABLE
+   * ======================================================================== */
+  --table-bg: var(--gray-800);
+  --table-border-color: var(--gray-700);
+  --table-header-bg: var(--gray-700);
+  --table-header-text: var(--gray-100);
+  --table-header-hover-bg: var(--gray-600);
+  --table-row-border: color-mix(in oklab, var(--gray-700) 50%, transparent);
+  --table-row-hover-bg: var(--gray-700);
+  --table-row-selected-bg: color-mix(in oklab, var(--color-primary) 20%, transparent);
+  --table-stripe-bg: var(--gray-700);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS COMBOBOX
+   * ======================================================================== */
+  --combobox-bg: var(--gray-800);
+  --combobox-text: var(--gray-100);
+  --combobox-border: var(--gray-700);
+  --combobox-placeholder: var(--gray-400);
+  --combobox-hover-border: var(--color-primary);
+  --combobox-focus-border: var(--color-primary);
+  --combobox-focus-shadow: color-mix(in oklab, var(--color-primary) 35%, transparent);
+  --combobox-disabled-bg: var(--gray-900);
+  --combobox-dropdown-bg: var(--gray-800);
+  --combobox-dropdown-border: var(--gray-700);
+  --combobox-option-hover-bg: var(--gray-700);
+  --combobox-option-selected-bg: color-mix(in oklab, var(--color-primary) 20%, transparent);
+  --combobox-option-selected-text: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS PROGRESS BAR
+   * ======================================================================== */
+  --progress-track-bg: var(--gray-700);
+  --progress-fill-bg: var(--color-primary);
+  --progress-fill-success: var(--success);
+  --progress-fill-warning: var(--warning);
+  --progress-fill-error: var(--error);
+  --progress-label-color: var(--gray-100);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SKELETON
+   * ======================================================================== */
+  --skeleton-bg: var(--gray-700);
+  --skeleton-shimmer: var(--gray-600);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS SLIDER
+   * ======================================================================== */
+  --slider-track-bg: var(--gray-700);
+  --slider-fill-bg: var(--color-primary);
+  --slider-thumb-bg: var(--gray-800);
+  --slider-thumb-border-color: var(--color-primary);
+  --slider-thumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  --slider-thumb-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --slider-thumb-shadow-focus: 0 0 0 3px color-mix(in oklab, var(--color-primary) 40%, transparent);
+  --slider-thumb-shadow-active: 0 0 0 4px color-mix(in oklab, var(--color-primary) 30%, transparent);
+  --slider-tick-color: var(--gray-500);
+  --slider-label-color: var(--gray-100);
+  --slider-thumb-label-bg: var(--gray-200);
+  --slider-thumb-label-color: var(--gray-900);
+
+  /* ==========================================================================
+   * FILE UPLOAD
+   * ======================================================================== */
+  --file-upload-border: var(--gray-600);
+  --file-upload-border-hover: var(--color-primary);
+  --file-upload-border-active: var(--color-primary);
+  --file-upload-bg: var(--gray-800);
+  --file-upload-bg-hover: var(--gray-700);
+  --file-upload-bg-active: color-mix(in oklab, var(--color-primary) 15%, var(--gray-800));
+  --file-upload-text-color: var(--gray-200);
+  --file-upload-label-color: var(--gray-50);
+  --file-upload-help-color: var(--gray-400);
+  --file-upload-hint-color: var(--gray-400);
+  --file-upload-icon-color: var(--gray-500);
+  --file-upload-icon-color-hover: var(--color-primary);
+  --file-upload-icon-color-active: var(--color-primary);
+  --file-upload-file-border: var(--gray-700);
+  --file-upload-file-bg: var(--gray-800);
+  --file-upload-file-bg-hover: var(--gray-700);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS CHIP
+   * ======================================================================== */
+  --chip-bg: var(--gray-700);
+  --chip-text: var(--gray-100);
+  --chip-border: transparent;
+  --chip-hover-bg: var(--gray-600);
+  --chip-focus-ring: color-mix(in oklab, var(--color-primary) 40%, transparent);
+  --chip-selected-ring: var(--color-primary);
+  --chip-disabled-opacity: 0.5;
+
+  /* Primary */
+  --chip-primary-bg: var(--color-primary);
+  --chip-primary-text: var(--gray-900);
+  --chip-primary-border: transparent;
+  --chip-primary-hover-bg: color-mix(in oklab, var(--color-primary) 80%, var(--background-main));
+  --chip-primary-hover-bg-outlined: color-mix(in oklab, var(--color-primary) 15%, transparent);
+
+  /* Success */
+  --chip-success-bg: var(--bg-success);
+  --chip-success-text: var(--success);
+  --chip-success-border: var(--success);
+  --chip-success-hover-bg: color-mix(in oklab, var(--success) 25%, transparent);
+  --chip-success-hover-bg-outlined: color-mix(in oklab, var(--success) 15%, transparent);
+
+  /* Warning */
+  --chip-warning-bg: var(--bg-warning);
+  --chip-warning-text: var(--warning);
+  --chip-warning-border: var(--warning);
+  --chip-warning-hover-bg: color-mix(in oklab, var(--warning) 30%, transparent);
+  --chip-warning-hover-bg-outlined: color-mix(in oklab, var(--warning) 15%, transparent);
+
+  /* Error */
+  --chip-error-bg: var(--bg-error);
+  --chip-error-text: var(--error);
+  --chip-error-border: var(--error);
+  --chip-error-hover-bg: color-mix(in oklab, var(--error) 30%, transparent);
+  --chip-error-hover-bg-outlined: color-mix(in oklab, var(--error) 15%, transparent);
+
+  /* Info */
+  --chip-info-bg: var(--bg-info);
+  --chip-info-text: var(--info);
+  --chip-info-border: var(--info);
+  --chip-info-hover-bg: color-mix(in oklab, var(--info) 30%, transparent);
+  --chip-info-hover-bg-outlined: color-mix(in oklab, var(--info) 15%, transparent);
 }