igniteui-webcomponents 4.3.0 → 4.3.1

package/themes/dark/bootstrap.css

@@ -1,49 +1,3 @@
-/**
- * @sass-export-section="light-material"
- */
-/**
- * @sass-export-section="light-bootstrap"
- */
-/**
- * @sass-export-section="light-fluent"
- */
-/**
- * @sass-export-section="light-indigo"
- */
-/**
- * @sass-export-section="light"
- */
-/**
- * @sass-export-section="dark-material"
- */
-/**
- * @sass-export-section="dark-bootstrap"
- */
-/**
- * @sass-export-section="dark-fluent"
- */
-/**
- * @sass-export-section="dark-indigo"
- */
-/**
- * @sass-export-section="dark"
- */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/**
- * @sass-export-section="bootstrap"
- */
-/**
- * @sass-export-section="material"
- */
-/**
- * @sass-export-section="fluent"
- */
-/**
- * @sass-export-section="indigo"
- */
-/**
- * @sass-export-section="material"
- */
 .ig-scrollbar {
   --size: var(--ig-scrollbar-size, 1rem);
   --thumb-background: var(--ig-scrollbar-thumb-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
@@ -68,21 +22,8 @@
     height: auto;
   }
 }
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */
-/* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */ /* stylelint-disable max-line-length */
 :root {
   --ig-theme: bootstrap;
-  --ig-radius-factor: 1;
   --ig-spacing: 1;
   --ig-spacing-inline: 1;
   --ig-spacing-block: 1;
@@ -819,18 +760,189 @@
 }
 
 igc-dropdown {
-  --border-color: hsla(var(--ig-gray-100), var(--ig-gray-a));
+  --elevation: var(--ig-dropdown-elevation, var(--ig-elevation-0));
+  --background-color: var(--ig-dropdown-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --header-text-color: var(--ig-dropdown-header-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-text-color: var(--ig-dropdown-item-text-color, var(--ig-surface-500-contrast));
+  --hover-item-text-color: var(--ig-dropdown-hover-item-text-color, var(--ig-surface-500-contrast));
+  --hover-item-background: var(--ig-dropdown-hover-item-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --focused-item-background: var(--ig-dropdown-focused-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --focused-item-text-color: var(--ig-dropdown-focused-item-text-color, var(--ig-primary-600-contrast));
+  --selected-item-background: var(--ig-dropdown-selected-item-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --selected-item-text-color: var(--ig-dropdown-selected-item-text-color, var(--ig-primary-600-contrast));
+  --selected-hover-item-background: var(--ig-dropdown-selected-hover-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --selected-hover-item-text-color: var(--ig-dropdown-selected-hover-item-text-color, var(--ig-primary-600-contrast));
+  --selected-focus-item-background: var(--ig-dropdown-selected-focus-item-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --selected-focus-item-text-color: var(--ig-dropdown-selected-focus-item-text-color, var(--ig-primary-600-contrast));
+  --disabled-item-background: var(--ig-dropdown-disabled-item-background, hsla(var(--ig-gray-50), 0));
+  --disabled-item-text-color: var(--ig-dropdown-disabled-item-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-color: var(--ig-dropdown-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --border-width: var(--ig-dropdown-border-width, 1px);
+  --border-radius: var(--ig-dropdown-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --item-border-radius: var(--ig-dropdown-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
+  --size: var(--ig-dropdown-size, max(var(--is-large, 1) * max(2.5rem, -1 * 2.5rem), var(--is-medium, 1) * max(2rem, -1 * 2rem), var(--is-small, 1) * max(1.75rem, -1 * 1.75rem)));
 }
 
-igc-dropdown-item {
-  --item-color: var(--ig-surface-500-contrast);
-  --hover-item-color: var(--ig-surface-500-contrast);
+igc-input {
+  --search-resting-elevation: var(--ig-input-search-resting-elevation, var(--ig-elevation-1));
+  --search-hover-elevation: var(--ig-input-search-hover-elevation, var(--ig-elevation-2));
+  --search-disabled-elevation: var(--ig-input-search-disabled-elevation, var(--ig-elevation-0));
+  --helper-text-color: var(--ig-input-helper-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-prefix-background: var(--ig-input-input-prefix-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color: var(--ig-input-input-prefix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-input-input-prefix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color--filled: var(--ig-input-input-prefix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-input-input-prefix-background--focused, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color--focused: var(--ig-input-input-prefix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-input-input-suffix-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color: var(--ig-input-input-suffix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-input-input-suffix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color--filled: var(--ig-input-input-suffix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-input-input-suffix-background--focused, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color--focused: var(--ig-input-input-suffix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-input-idle-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-text-color: var(--ig-input-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-text-color: var(--ig-input-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-input-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-input-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-secondary-color: var(--ig-input-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-input-focused-secondary-color, hsla(var(--ig-primary-500), 0.38));
+  --idle-bottom-line-color: var(--ig-input-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-bottom-line-color: var(--ig-input-hover-bottom-line-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-input-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --interim-bottom-line-color: var(--ig-input-interim-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --disabled-bottom-line-color: var(--ig-input-disabled-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-input-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color: var(--ig-input-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-input-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-input-focused-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --border-background: var(--ig-input-border-background, transparent);
+  --border-disabled-background: var(--ig-input-border-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --search-background: var(--ig-input-search-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --search-disabled-background: var(--ig-input-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --success-secondary-color: var(--ig-input-success-secondary-color, hsla(var(--ig-success-500), var(--ig-success-a)));
+  --warning-secondary-color: var(--ig-input-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));
+  --error-secondary-color: var(--ig-input-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --placeholder-color: var(--ig-input-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-input-disabled-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --box-background: var(--ig-input-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-hover: var(--ig-input-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-input-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-input-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-border-radius: var(--ig-input-box-border-radius, 0.25rem, 0rem, 1.25rem);
+  --border-border-radius: var(--ig-input-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-input-search-border-radius, 0.25rem, 0rem, 1.25rem);
+  --success-shadow-color: var(--ig-input-success-shadow-color, hsla(var(--ig-success-500), 0.38));
+  --error-shadow-color: var(--ig-input-error-shadow-color, hsla(var(--ig-error-500), 0.38));
+  --size: var(--ig-input-size, 1.9375rem, 2.375rem, 3rem);
 }
 
-igc-input,
-igc-mask-input,
-igc-date-time-input {
-  --input-background: transparent;
+igc-select::part(input) {
+  --search-resting-elevation: var(--ig-select-search-resting-elevation, var(--ig-elevation-1));
+  --search-hover-elevation: var(--ig-select-search-hover-elevation, var(--ig-elevation-2));
+  --search-disabled-elevation: var(--ig-select-search-disabled-elevation, var(--ig-elevation-0));
+  --helper-text-color: var(--ig-select-helper-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-prefix-background: var(--ig-select-input-prefix-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color: var(--ig-select-input-prefix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-select-input-prefix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color--filled: var(--ig-select-input-prefix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-select-input-prefix-background--focused, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color--focused: var(--ig-select-input-prefix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-select-input-suffix-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color: var(--ig-select-input-suffix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-select-input-suffix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color--filled: var(--ig-select-input-suffix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-select-input-suffix-background--focused, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color--focused: var(--ig-select-input-suffix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-select-idle-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-text-color: var(--ig-select-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-text-color: var(--ig-select-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-select-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-select-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-secondary-color: var(--ig-select-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-select-focused-secondary-color, hsla(var(--ig-primary-500), 0.38));
+  --idle-bottom-line-color: var(--ig-select-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-bottom-line-color: var(--ig-select-hover-bottom-line-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-select-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --interim-bottom-line-color: var(--ig-select-interim-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --disabled-bottom-line-color: var(--ig-select-disabled-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-select-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color: var(--ig-select-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-select-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-select-focused-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --border-background: var(--ig-select-border-background, transparent);
+  --border-disabled-background: var(--ig-select-border-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --search-background: var(--ig-select-search-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --search-disabled-background: var(--ig-select-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --success-secondary-color: var(--ig-select-success-secondary-color, hsla(var(--ig-success-500), var(--ig-success-a)));
+  --warning-secondary-color: var(--ig-select-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));
+  --error-secondary-color: var(--ig-select-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --placeholder-color: var(--ig-select-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-select-disabled-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --box-background: var(--ig-select-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-hover: var(--ig-select-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-select-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-select-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-border-radius: var(--ig-select-box-border-radius, 0.25rem, 0rem, 1.25rem);
+  --border-border-radius: var(--ig-select-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-select-search-border-radius, 0.25rem, 0rem, 1.25rem);
+  --success-shadow-color: var(--ig-select-success-shadow-color, hsla(var(--ig-success-500), 0.38));
+  --error-shadow-color: var(--ig-select-error-shadow-color, hsla(var(--ig-error-500), 0.38));
+  --size: var(--ig-select-size, 1.9375rem, 2.375rem, 3rem);
+}
+
+igc-combo::part(input) {
+  --search-resting-elevation: var(--ig-combo-search-resting-elevation, var(--ig-elevation-1));
+  --search-hover-elevation: var(--ig-combo-search-hover-elevation, var(--ig-elevation-2));
+  --search-disabled-elevation: var(--ig-combo-search-disabled-elevation, var(--ig-elevation-0));
+  --helper-text-color: var(--ig-combo-helper-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-prefix-background: var(--ig-combo-input-prefix-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color: var(--ig-combo-input-prefix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-combo-input-prefix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color--filled: var(--ig-combo-input-prefix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-combo-input-prefix-background--focused, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color--focused: var(--ig-combo-input-prefix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-combo-input-suffix-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color: var(--ig-combo-input-suffix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-combo-input-suffix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color--filled: var(--ig-combo-input-suffix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-combo-input-suffix-background--focused, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color--focused: var(--ig-combo-input-suffix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-combo-idle-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-text-color: var(--ig-combo-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-text-color: var(--ig-combo-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-combo-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-combo-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-secondary-color: var(--ig-combo-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-combo-focused-secondary-color, hsla(var(--ig-primary-500), 0.38));
+  --idle-bottom-line-color: var(--ig-combo-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-bottom-line-color: var(--ig-combo-hover-bottom-line-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-combo-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --interim-bottom-line-color: var(--ig-combo-interim-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --disabled-bottom-line-color: var(--ig-combo-disabled-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-combo-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color: var(--ig-combo-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-combo-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-combo-focused-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --border-background: var(--ig-combo-border-background, transparent);
+  --border-disabled-background: var(--ig-combo-border-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --search-background: var(--ig-combo-search-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --search-disabled-background: var(--ig-combo-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --success-secondary-color: var(--ig-combo-success-secondary-color, hsla(var(--ig-success-500), var(--ig-success-a)));
+  --warning-secondary-color: var(--ig-combo-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));
+  --error-secondary-color: var(--ig-combo-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --placeholder-color: var(--ig-combo-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-combo-disabled-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --box-background: var(--ig-combo-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-hover: var(--ig-combo-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-combo-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-combo-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-border-radius: var(--ig-combo-box-border-radius, 0.25rem, 0rem, 1.25rem);
+  --border-border-radius: var(--ig-combo-border-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
+  --search-border-radius: var(--ig-combo-search-border-radius, 0.25rem, 0rem, 1.25rem);
+  --success-shadow-color: var(--ig-combo-success-shadow-color, hsla(var(--ig-success-500), 0.38));
+  --error-shadow-color: var(--ig-combo-error-shadow-color, hsla(var(--ig-error-500), 0.38));
+  --size: var(--ig-combo-size, 1.9375rem, 2.375rem, 3rem);
 }
 
 igc-slider {
@@ -854,8 +966,58 @@ igc-nav-drawer-item {
   --hover-background: hsla(var(--ig-gray-100), var(--ig-gray-a));
 }
 
-igc-select::part(input) {
-  --input-background: transparent;
+igc-select {
+  --search-resting-elevation: var(--ig-select-search-resting-elevation, var(--ig-elevation-1));
+  --search-hover-elevation: var(--ig-select-search-hover-elevation, var(--ig-elevation-2));
+  --search-disabled-elevation: var(--ig-select-search-disabled-elevation, var(--ig-elevation-0));
+  --helper-text-color: var(--ig-select-helper-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --input-prefix-background: var(--ig-select-input-prefix-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color: var(--ig-select-input-prefix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-prefix-background--filled: var(--ig-select-input-prefix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color--filled: var(--ig-select-input-prefix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-prefix-background--focused: var(--ig-select-input-prefix-background--focused, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-prefix-color--focused: var(--ig-select-input-prefix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background: var(--ig-select-input-suffix-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color: var(--ig-select-input-suffix-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --input-suffix-background--filled: var(--ig-select-input-suffix-background--filled, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color--filled: var(--ig-select-input-suffix-color--filled, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --input-suffix-background--focused: var(--ig-select-input-suffix-background--focused, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --input-suffix-color--focused: var(--ig-select-input-suffix-color--focused, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-text-color: var(--ig-select-idle-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-text-color: var(--ig-select-filled-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-text-color: var(--ig-select-focused-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-text-color: var(--ig-select-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --idle-secondary-color: var(--ig-select-idle-secondary-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --filled-secondary-color: var(--ig-select-filled-secondary-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --focused-secondary-color: var(--ig-select-focused-secondary-color, hsla(var(--ig-primary-500), 0.38));
+  --idle-bottom-line-color: var(--ig-select-idle-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --hover-bottom-line-color: var(--ig-select-hover-bottom-line-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --focused-bottom-line-color: var(--ig-select-focused-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --interim-bottom-line-color: var(--ig-select-interim-bottom-line-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --disabled-bottom-line-color: var(--ig-select-disabled-bottom-line-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-select-disabled-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-color: var(--ig-select-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-select-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focused-border-color: var(--ig-select-focused-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --border-background: var(--ig-select-border-background, transparent);
+  --border-disabled-background: var(--ig-select-border-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --search-background: var(--ig-select-search-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --search-disabled-background: var(--ig-select-search-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --success-secondary-color: var(--ig-select-success-secondary-color, hsla(var(--ig-success-500), var(--ig-success-a)));
+  --warning-secondary-color: var(--ig-select-warning-secondary-color, hsla(var(--ig-warn-500), var(--ig-warn-a)));
+  --error-secondary-color: var(--ig-select-error-secondary-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --placeholder-color: var(--ig-select-placeholder-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --disabled-placeholder-color: var(--ig-select-disabled-placeholder-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --box-background: var(--ig-select-box-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-hover: var(--ig-select-box-background-hover, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --box-background-focus: var(--ig-select-box-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --box-disabled-background: var(--ig-select-box-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --box-border-radius: var(--ig-select-box-border-radius, 0.25rem, 0rem, 1.25rem);
+  --border-border-radius: var(--ig-select-border-border-radius, 0.25rem, 0rem, 1.25rem);
+  --search-border-radius: var(--ig-select-search-border-radius, 0.25rem, 0rem, 1.25rem);
+  --success-shadow-color: var(--ig-select-success-shadow-color, hsla(var(--ig-success-500), 0.38));
+  --error-shadow-color: var(--ig-select-error-shadow-color, hsla(var(--ig-error-500), 0.38));
+  --size: var(--ig-select-size, 1.9375rem, 2.375rem, 3rem);
 }
 
 apex-grid {
@@ -866,19 +1028,35 @@ apex-grid {
   --cell-active-border-color: hsla(var(--ig-primary-500), var(--ig-primary-a));
 }
 
-igc-combo::part(input) {
-  --input-background: transparent;
+igc-combo {
+  --toggle-button-background-focus--border: var(--ig-combo-toggle-button-background-focus--border, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --case-icon-color: var(--ig-combo-case-icon-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --case-icon-color--active: var(--ig-combo-case-icon-color--active, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --empty-list-background: var(--ig-combo-empty-list-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --search-separator-border-color: var(--ig-combo-search-separator-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --empty-list-placeholder-color: var(--ig-combo-empty-list-placeholder-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --toggle-button-background: var(--ig-combo-toggle-button-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --toggle-button-background-focus: var(--ig-combo-toggle-button-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --toggle-button-foreground: var(--ig-combo-toggle-button-foreground, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --toggle-button-foreground-focus: var(--ig-combo-toggle-button-foreground-focus, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --toggle-button-foreground-filled: var(--ig-combo-toggle-button-foreground-filled, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --clear-button-background: var(--ig-combo-clear-button-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --clear-button-background-focus: var(--ig-combo-clear-button-background-focus, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --clear-button-foreground: var(--ig-combo-clear-button-foreground, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --clear-button-foreground-focus: var(--ig-combo-clear-button-foreground-focus, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --toggle-button-background-disabled: var(--ig-combo-toggle-button-background-disabled, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --toggle-button-foreground-disabled: var(--ig-combo-toggle-button-foreground-disabled, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --toggle-button-foreground--focus: var(--ig-combo-toggle-button-foreground--focus, hsla(var(--ig-gray-800), var(--ig-gray-a)));
 }
 
-igc-avatar,
-igc-avatar ig-avatar {
+igc-avatar {
   --background: var(--ig-avatar-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
   --color: var(--ig-avatar-color, var(--ig-gray-200-contrast));
   --border-radius: var(--ig-avatar-border-radius, 0.25rem);
+  --size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));
 }
 
-igc-button[variant=flat],
-igc-button[variant=flat] [igxButton=flat], igc-button[variant=flat] .igx-button--flat {
+igc-button[variant=flat] {
   --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-primary-200), 0.5));
   --border-color: var(--ig-button-border-color, transparent);
   --hover-border-color: var(--ig-button-hover-border-color, transparent);
@@ -888,6 +1066,7 @@ igc-button[variant=flat] [igxButton=flat], igc-button[variant=flat] .igx-button-
   --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
   --disabled-background: var(--ig-button-disabled-background, transparent);
   --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));
   --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
   --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
   --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
@@ -902,11 +1081,10 @@ igc-button[variant=flat] [igxButton=flat], igc-button[variant=flat] .igx-button-
   --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));
   --active-background: var(--ig-button-active-background, transparent);
   --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));
-  --border-radius: var(--ig-button-border-radius, 0.25rem);
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
 }
 
-igc-button[variant=outlined],
-igc-button[variant=outlined] [igxButton=outlined], igc-button[variant=outlined] .igx-button--outlined {
+igc-button[variant=outlined] {
   --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-primary-200), 0.5));
   --border-color: var(--ig-button-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
   --hover-border-color: var(--ig-button-hover-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
@@ -916,6 +1094,7 @@ igc-button[variant=outlined] [igxButton=outlined], igc-button[variant=outlined]
   --disabled-border-color: var(--ig-button-disabled-border-color, hsla(var(--ig-primary-900), var(--ig-primary-a)));
   --disabled-background: var(--ig-button-disabled-background, transparent);
   --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));
   --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
   --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
   --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
@@ -930,11 +1109,10 @@ igc-button[variant=outlined] [igxButton=outlined], igc-button[variant=outlined]
   --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));
   --active-background: var(--ig-button-active-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));
   --active-foreground: var(--ig-button-active-foreground, var(--ig-primary-700-contrast));
-  --border-radius: var(--ig-button-border-radius, 0.25rem);
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
 }
 
-igc-button[variant=contained],
-igc-button[variant=contained] [igxButton=raised], igc-button[variant=contained] .igx-button--raised {
+igc-button[variant=contained] {
   --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
   --border-color: var(--ig-button-border-color, transparent);
   --hover-border-color: var(--ig-button-hover-border-color, transparent);
@@ -944,6 +1122,7 @@ igc-button[variant=contained] [igxButton=raised], igc-button[variant=contained]
   --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
   --disabled-background: var(--ig-button-disabled-background, hsla(var(--ig-primary-50), var(--ig-primary-a)));
   --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));
   --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
   --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
   --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
@@ -958,11 +1137,10 @@ igc-button[variant=contained] [igxButton=raised], igc-button[variant=contained]
   --focus-visible-foreground: var(--ig-button-focus-visible-foreground, var(--ig-primary-600-contrast));
   --active-background: var(--ig-button-active-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));
   --active-foreground: var(--ig-button-active-foreground, var(--ig-primary-700-contrast));
-  --border-radius: var(--ig-button-border-radius, 0.25rem);
+  --border-radius: var(--ig-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
 }
 
-igc-button[variant=fab],
-igc-button[variant=fab] [igxButton=fab], igc-button[variant=fab] .igx-button--fab {
+igc-button[variant=fab] {
   --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
   --border-color: var(--ig-button-border-color, transparent);
   --hover-border-color: var(--ig-button-hover-border-color, transparent);
@@ -972,6 +1150,7 @@ igc-button[variant=fab] [igxButton=fab], igc-button[variant=fab] .igx-button--fa
   --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
   --disabled-background: var(--ig-button-disabled-background, hsla(var(--ig-primary-50), var(--ig-primary-a)));
   --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --size: var(--ig-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.375rem, -1 * 2.375rem), var(--is-small, 1) * max(1.9375rem, -1 * 1.9375rem)));
   --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-0));
   --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-0));
   --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-0));
@@ -986,18 +1165,16 @@ igc-button[variant=fab] [igxButton=fab], igc-button[variant=fab] .igx-button--fa
   --focus-visible-foreground: var(--ig-button-focus-visible-foreground, var(--ig-primary-600-contrast));
   --active-background: var(--ig-button-active-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));
   --active-foreground: var(--ig-button-active-foreground, var(--ig-primary-700-contrast));
-  --border-radius: var(--ig-button-border-radius, 0.9375rem);
+  --border-radius: var(--ig-button-border-radius, clamp(0.75rem, calc(var(--ig-radius-factor, 0.5357142857) * 1.75rem), 1.75rem));
 }
 
-igc-icon,
-igc-icon ig-icon {
+igc-icon {
   --color: var(--ig-icon-color, 'currentColor');
-  --size: var(--ig-icon-size, 1.5rem);
   --disabled-color: var(--ig-icon-disabled-color, 'currentColor');
+  --size: var(--ig-icon-size, max(var(--is-large, 1) * max(1.5rem, -1 * 1.5rem), var(--is-medium, 1) * max(1.25rem, -1 * 1.25rem), var(--is-small, 1) * max(1rem, -1 * 1rem)));
 }
 
-igc-navbar,
-igc-navbar ig-navbar {
+igc-navbar {
   --elevation: var(--ig-navbar-elevation, var(--ig-elevation-0));
   --background: var(--ig-navbar-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
   --text-color: var(--ig-navbar-text-color, var(--ig-surface-500-contrast));
@@ -1005,8 +1182,7 @@ igc-navbar ig-navbar {
   --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-surface-500-contrast));
 }
 
-igc-checkbox,
-igc-checkbox ig-checkbox {
+igc-checkbox {
   --tick-color: var(--ig-checkbox-tick-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --tick-color-hover: var(--ig-checkbox-tick-color-hover, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
@@ -1018,13 +1194,13 @@ igc-checkbox ig-checkbox {
   --disabled-color-label: var(--ig-checkbox-disabled-color-label, hsla(var(--ig-gray-400), var(--ig-gray-a)));
   --error-color: var(--ig-checkbox-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));
   --error-color-hover: var(--ig-checkbox-error-color-hover, hsla(var(--ig-error-100), var(--ig-error-a)));
-  --border-radius: var(--ig-checkbox-border-radius, 0.25rem);
-  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 0.25rem);
+  --border-radius: var(--ig-checkbox-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.4) * 0.625rem), 0.625rem));
+  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 0.25rem, 0rem, 1.5rem);
   --focus-outline-color: var(--ig-checkbox-focus-outline-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --ripple-radius: var(--ig-checkbox-ripple-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
 }
 
-igc-switch,
-igc-switch ig-switch {
+igc-switch {
   --resting-elevation: var(--ig-switch-resting-elevation, var(--ig-elevation-2));
   --hover-elevation: var(--ig-switch-hover-elevation, var(--ig-elevation-3));
   --disabled-elevation: var(--ig-switch-disabled-elevation, var(--ig-elevation-1));
@@ -1048,9 +1224,9 @@ igc-switch ig-switch {
   --thumb-on-error-color: var(--ig-switch-thumb-on-error-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --error-color: var(--ig-switch-error-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
   --error-color-hover: var(--ig-switch-error-color-hover, hsla(var(--ig-primary-200), var(--ig-primary-a)));
-  --border-radius-track: var(--ig-switch-border-radius-track, 2rem);
-  --border-radius-thumb: var(--ig-switch-border-radius-thumb, 2rem);
-  --border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem);
+  --border-radius-track: var(--ig-switch-border-radius-track, clamp(0rem, calc(var(--ig-radius-factor, 1) * 2rem), 2rem));
+  --border-radius-thumb: var(--ig-switch-border-radius-thumb, clamp(0rem, calc(var(--ig-radius-factor, 1) * 2rem), 2rem));
+  --border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem, 0rem, 1.5rem);
   --focus-outline-color: var(--ig-switch-focus-outline-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
   --track-on-hover-color: var(--ig-switch-track-on-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));
   --focus-fill-color: var(--ig-switch-focus-fill-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));