igniteui-webcomponents 4.2.2 → 4.3.0-alpha.0

package/themes/dark/fluent.css

@@ -68,6 +68,16 @@
     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: fluent;
   --ig-radius-factor: 1;
@@ -83,252 +93,360 @@
 }
 
 :root {
+  --ig-primary-50: hsl(206.04, 100%, 73.99%);
   --ig-primary-50-contrast: black;
   --ig-primary-50: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 1.78);
+  --ig-primary-100: hsl(206.04, 80%, 69%);
   --ig-primary-100-contrast: black;
   --ig-primary-100: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.8), calc(var(--ig-primary-l) * 1.66);
+  --ig-primary-200: hsl(206.04, 64%, 59.44%);
   --ig-primary-200-contrast: black;
   --ig-primary-200: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.64), calc(var(--ig-primary-l) * 1.43);
+  --ig-primary-300: hsl(206.04, 73%, 49.47%);
   --ig-primary-300-contrast: black;
   --ig-primary-300: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.73), calc(var(--ig-primary-l) * 1.19);
+  --ig-primary-400: hsl(206.04, 87.5%, 44.89%);
   --ig-primary-400-contrast: black;
   --ig-primary-400: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.875), calc(var(--ig-primary-l) * 1.08);
   --ig-primary-h: 206deg;
   --ig-primary-s: 100%;
   --ig-primary-l: 42%;
   --ig-primary-a: 1;
+  --ig-primary-500: hsl(206.04, 100%, 41.57%);
   --ig-primary-500-contrast: black;
   --ig-primary-500: var(--ig-primary-h), calc(var(--ig-primary-s) * 1), calc(var(--ig-primary-l) * 1);
+  --ig-primary-600: hsl(206.04, 100%, 37%);
   --ig-primary-600-contrast: white;
   --ig-primary-600: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.26), calc(var(--ig-primary-l) * 0.89);
+  --ig-primary-700: hsl(206.04, 100%, 33.67%);
   --ig-primary-700-contrast: white;
   --ig-primary-700: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.52), calc(var(--ig-primary-l) * 0.81);
+  --ig-primary-800: hsl(206.04, 100%, 30.35%);
   --ig-primary-800-contrast: white;
   --ig-primary-800: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.5), calc(var(--ig-primary-l) * 0.73);
+  --ig-primary-900: hsl(206.04, 100%, 26.6%);
   --ig-primary-900-contrast: white;
   --ig-primary-900: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.34), calc(var(--ig-primary-l) * 0.64);
+  --ig-primary-A100: hsl(206.04, 100%, 55.7%);
   --ig-primary-A100-contrast: black;
   --ig-primary-A100: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 1.34);
+  --ig-primary-A200: hsl(206.04, 100%, 48.22%);
   --ig-primary-A200-contrast: black;
   --ig-primary-A200: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.22), calc(var(--ig-primary-l) * 1.16);
+  --ig-primary-A400: hsl(206.04, 100%, 37.83%);
   --ig-primary-A400-contrast: white;
   --ig-primary-A400: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 0.91);
+  --ig-primary-A700: hsl(206.04, 100%, 27.02%);
   --ig-primary-A700-contrast: white;
   --ig-primary-A700: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.23), calc(var(--ig-primary-l) * 0.65);
+  --ig-secondary-50: hsl(207.75, 84.78%, 90.4%);
   --ig-secondary-50-contrast: black;
   --ig-secondary-50: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 1.78);
+  --ig-secondary-100: hsl(207.75, 55.14%, 84.3%);
   --ig-secondary-100-contrast: black;
   --ig-secondary-100: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.8), calc(var(--ig-secondary-l) * 1.66);
+  --ig-secondary-200: hsl(207.75, 44.11%, 72.62%);
   --ig-secondary-200-contrast: black;
   --ig-secondary-200: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.64), calc(var(--ig-secondary-l) * 1.43);
+  --ig-secondary-300: hsl(207.75, 50.31%, 60.43%);
   --ig-secondary-300-contrast: black;
   --ig-secondary-300: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.73), calc(var(--ig-secondary-l) * 1.19);
+  --ig-secondary-400: hsl(207.75, 60.31%, 54.85%);
   --ig-secondary-400-contrast: black;
   --ig-secondary-400: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.875), calc(var(--ig-secondary-l) * 1.08);
   --ig-secondary-h: 208deg;
   --ig-secondary-s: 69%;
   --ig-secondary-l: 51%;
   --ig-secondary-a: 1;
+  --ig-secondary-500: hsl(207.75, 68.92%, 50.78%);
   --ig-secondary-500-contrast: black;
   --ig-secondary-500: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1), calc(var(--ig-secondary-l) * 1);
+  --ig-secondary-600: hsl(207.75, 86.84%, 45.2%);
   --ig-secondary-600-contrast: black;
   --ig-secondary-600: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.26), calc(var(--ig-secondary-l) * 0.89);
+  --ig-secondary-700: hsl(207.75, 100%, 41.14%);
   --ig-secondary-700-contrast: white;
   --ig-secondary-700: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.52), calc(var(--ig-secondary-l) * 0.81);
+  --ig-secondary-800: hsl(207.75, 100%, 37.07%);
   --ig-secondary-800-contrast: white;
   --ig-secondary-800: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.5), calc(var(--ig-secondary-l) * 0.73);
+  --ig-secondary-900: hsl(207.75, 92.36%, 32.5%);
   --ig-secondary-900-contrast: white;
   --ig-secondary-900: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.34), calc(var(--ig-secondary-l) * 0.64);
+  --ig-secondary-A100: hsl(207.75, 84.78%, 68.05%);
   --ig-secondary-A100-contrast: black;
   --ig-secondary-A100: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 1.34);
+  --ig-secondary-A200: hsl(207.75, 84.09%, 58.91%);
   --ig-secondary-A200-contrast: black;
   --ig-secondary-A200: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.22), calc(var(--ig-secondary-l) * 1.16);
+  --ig-secondary-A400: hsl(207.75, 84.78%, 46.21%);
   --ig-secondary-A400-contrast: black;
   --ig-secondary-A400: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 0.91);
+  --ig-secondary-A700: hsl(207.75, 84.78%, 33.01%);
   --ig-secondary-A700-contrast: white;
   --ig-secondary-A700: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1.23), calc(var(--ig-secondary-l) * 0.65);
+  --ig-gray-50: hsl(0, 0%, 13%);
   --ig-gray-50-contrast: white;
   --ig-gray-50: var(--ig-gray-h), var(--ig-gray-s), 13%;
+  --ig-gray-100: hsl(0, 0%, 26%);
   --ig-gray-100-contrast: white;
   --ig-gray-100: var(--ig-gray-h), var(--ig-gray-s), 26%;
+  --ig-gray-200: hsl(0, 0%, 38%);
   --ig-gray-200-contrast: white;
   --ig-gray-200: var(--ig-gray-h), var(--ig-gray-s), 38%;
+  --ig-gray-300: hsl(0, 0%, 54%);
   --ig-gray-300-contrast: black;
   --ig-gray-300: var(--ig-gray-h), var(--ig-gray-s), 54%;
+  --ig-gray-400: hsl(0, 0%, 62%);
   --ig-gray-400-contrast: black;
   --ig-gray-400: var(--ig-gray-h), var(--ig-gray-s), 62%;
   --ig-gray-h: 0deg;
   --ig-gray-s: 0%;
   --ig-gray-l: 74%;
   --ig-gray-a: 1;
+  --ig-gray-500: hsl(0, 0%, 74%);
   --ig-gray-500-contrast: black;
   --ig-gray-500: var(--ig-gray-h), var(--ig-gray-s), 74%;
+  --ig-gray-600: hsl(0, 0%, 88%);
   --ig-gray-600-contrast: black;
   --ig-gray-600: var(--ig-gray-h), var(--ig-gray-s), 88%;
+  --ig-gray-700: hsl(0, 0%, 93%);
   --ig-gray-700-contrast: black;
   --ig-gray-700: var(--ig-gray-h), var(--ig-gray-s), 93%;
+  --ig-gray-800: hsl(0, 0%, 96%);
   --ig-gray-800-contrast: black;
   --ig-gray-800: var(--ig-gray-h), var(--ig-gray-s), 96%;
+  --ig-gray-900: hsl(0, 0%, 98%);
   --ig-gray-900-contrast: black;
   --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 98%;
+  --ig-surface-50: hsl(0, 0%, 23.73%);
   --ig-surface-50-contrast: white;
   --ig-surface-50: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 1.78);
+  --ig-surface-100: hsl(0, 0%, 22.13%);
   --ig-surface-100-contrast: white;
   --ig-surface-100: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.8), calc(var(--ig-surface-l) * 1.66);
+  --ig-surface-200: hsl(0, 0%, 19.07%);
   --ig-surface-200-contrast: white;
   --ig-surface-200: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.64), calc(var(--ig-surface-l) * 1.43);
+  --ig-surface-300: hsl(0, 0%, 15.87%);
   --ig-surface-300-contrast: white;
   --ig-surface-300: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.73), calc(var(--ig-surface-l) * 1.19);
+  --ig-surface-400: hsl(0, 0%, 14.4%);
   --ig-surface-400-contrast: white;
   --ig-surface-400: var(--ig-surface-h), calc(var(--ig-surface-s) * 0.875), calc(var(--ig-surface-l) * 1.08);
   --ig-surface-h: 0deg;
   --ig-surface-s: 0%;
   --ig-surface-l: 13%;
   --ig-surface-a: 1;
+  --ig-surface-500: hsl(0, 0%, 13.33%);
   --ig-surface-500-contrast: white;
   --ig-surface-500: var(--ig-surface-h), calc(var(--ig-surface-s) * 1), calc(var(--ig-surface-l) * 1);
+  --ig-surface-600: hsl(0, 0%, 11.87%);
   --ig-surface-600-contrast: white;
   --ig-surface-600: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.26), calc(var(--ig-surface-l) * 0.89);
+  --ig-surface-700: hsl(0, 0%, 10.8%);
   --ig-surface-700-contrast: white;
   --ig-surface-700: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.52), calc(var(--ig-surface-l) * 0.81);
+  --ig-surface-800: hsl(0, 0%, 9.73%);
   --ig-surface-800-contrast: white;
   --ig-surface-800: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.5), calc(var(--ig-surface-l) * 0.73);
+  --ig-surface-900: hsl(0, 0%, 8.53%);
   --ig-surface-900-contrast: white;
   --ig-surface-900: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.34), calc(var(--ig-surface-l) * 0.64);
+  --ig-surface-A100: hsl(0, 0%, 17.87%);
   --ig-surface-A100-contrast: white;
   --ig-surface-A100: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 1.34);
+  --ig-surface-A200: hsl(0, 0%, 15.47%);
   --ig-surface-A200-contrast: white;
   --ig-surface-A200: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.22), calc(var(--ig-surface-l) * 1.16);
+  --ig-surface-A400: hsl(0, 0%, 12.13%);
   --ig-surface-A400-contrast: white;
   --ig-surface-A400: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 0.91);
+  --ig-surface-A700: hsl(0, 0%, 8.67%);
   --ig-surface-A700-contrast: white;
   --ig-surface-A700: var(--ig-surface-h), calc(var(--ig-surface-s) * 1.23), calc(var(--ig-surface-l) * 0.65);
+  --ig-info-50: hsl(209.07, 100%, 80.97%);
   --ig-info-50-contrast: black;
   --ig-info-50: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 1.78);
+  --ig-info-100: hsl(209.07, 66.9%, 75.51%);
   --ig-info-100-contrast: black;
   --ig-info-100: var(--ig-info-h), calc(var(--ig-info-s) * 0.8), calc(var(--ig-info-l) * 1.66);
+  --ig-info-200: hsl(209.07, 53.52%, 65.05%);
   --ig-info-200-contrast: black;
   --ig-info-200: var(--ig-info-h), calc(var(--ig-info-s) * 0.64), calc(var(--ig-info-l) * 1.43);
+  --ig-info-300: hsl(209.07, 61.04%, 54.13%);
   --ig-info-300-contrast: black;
   --ig-info-300: var(--ig-info-h), calc(var(--ig-info-s) * 0.73), calc(var(--ig-info-l) * 1.19);
+  --ig-info-400: hsl(209.07, 73.17%, 49.13%);
   --ig-info-400-contrast: black;
   --ig-info-400: var(--ig-info-h), calc(var(--ig-info-s) * 0.875), calc(var(--ig-info-l) * 1.08);
   --ig-info-h: 209deg;
   --ig-info-s: 84%;
   --ig-info-l: 45%;
   --ig-info-a: 1;
+  --ig-info-500: hsl(209.07, 83.62%, 45.49%);
   --ig-info-500-contrast: black;
   --ig-info-500: var(--ig-info-h), calc(var(--ig-info-s) * 1), calc(var(--ig-info-l) * 1);
+  --ig-info-600: hsl(209.07, 100%, 40.49%);
   --ig-info-600-contrast: white;
   --ig-info-600: var(--ig-info-h), calc(var(--ig-info-s) * 1.26), calc(var(--ig-info-l) * 0.89);
+  --ig-info-700: hsl(209.07, 100%, 36.85%);
   --ig-info-700-contrast: white;
   --ig-info-700: var(--ig-info-h), calc(var(--ig-info-s) * 1.52), calc(var(--ig-info-l) * 0.81);
+  --ig-info-800: hsl(209.07, 100%, 33.21%);
   --ig-info-800-contrast: white;
   --ig-info-800: var(--ig-info-h), calc(var(--ig-info-s) * 1.5), calc(var(--ig-info-l) * 0.73);
+  --ig-info-900: hsl(209.07, 100%, 29.11%);
   --ig-info-900-contrast: white;
   --ig-info-900: var(--ig-info-h), calc(var(--ig-info-s) * 1.34), calc(var(--ig-info-l) * 0.64);
+  --ig-info-A100: hsl(209.07, 100%, 60.96%);
   --ig-info-A100-contrast: black;
   --ig-info-A100: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 1.34);
+  --ig-info-A200: hsl(209.07, 100%, 52.77%);
   --ig-info-A200-contrast: black;
   --ig-info-A200: var(--ig-info-h), calc(var(--ig-info-s) * 1.22), calc(var(--ig-info-l) * 1.16);
+  --ig-info-A400: hsl(209.07, 100%, 41.4%);
   --ig-info-A400-contrast: white;
   --ig-info-A400: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 0.91);
+  --ig-info-A700: hsl(209.07, 100%, 29.57%);
   --ig-info-A700-contrast: white;
   --ig-info-A700: var(--ig-info-h), calc(var(--ig-info-s) * 1.23), calc(var(--ig-info-l) * 0.65);
+  --ig-success-50: hsl(120, 94.89%, 48.86%);
   --ig-success-50-contrast: black;
   --ig-success-50: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 1.78);
+  --ig-success-100: hsl(120, 61.71%, 45.57%);
   --ig-success-100-contrast: black;
   --ig-success-100: var(--ig-success-h), calc(var(--ig-success-s) * 0.8), calc(var(--ig-success-l) * 1.66);
+  --ig-success-200: hsl(120, 49.37%, 39.25%);
   --ig-success-200-contrast: black;
   --ig-success-200: var(--ig-success-h), calc(var(--ig-success-s) * 0.64), calc(var(--ig-success-l) * 1.43);
+  --ig-success-300: hsl(120, 56.31%, 32.67%);
   --ig-success-300-contrast: white;
   --ig-success-300: var(--ig-success-h), calc(var(--ig-success-s) * 0.73), calc(var(--ig-success-l) * 1.19);
+  --ig-success-400: hsl(120, 67.5%, 29.65%);
   --ig-success-400-contrast: white;
   --ig-success-400: var(--ig-success-h), calc(var(--ig-success-s) * 0.875), calc(var(--ig-success-l) * 1.08);
   --ig-success-h: 120deg;
   --ig-success-s: 77%;
   --ig-success-l: 27%;
   --ig-success-a: 1;
+  --ig-success-500: hsl(120, 77.14%, 27.45%);
   --ig-success-500-contrast: white;
   --ig-success-500: var(--ig-success-h), calc(var(--ig-success-s) * 1), calc(var(--ig-success-l) * 1);
+  --ig-success-600: hsl(120, 97.2%, 24.43%);
   --ig-success-600-contrast: white;
   --ig-success-600: var(--ig-success-h), calc(var(--ig-success-s) * 1.26), calc(var(--ig-success-l) * 0.89);
+  --ig-success-700: hsl(120, 100%, 22.24%);
   --ig-success-700-contrast: white;
   --ig-success-700: var(--ig-success-h), calc(var(--ig-success-s) * 1.52), calc(var(--ig-success-l) * 0.81);
+  --ig-success-800: hsl(120, 100%, 20.04%);
   --ig-success-800-contrast: white;
   --ig-success-800: var(--ig-success-h), calc(var(--ig-success-s) * 1.5), calc(var(--ig-success-l) * 0.73);
+  --ig-success-900: hsl(120, 100%, 17.57%);
   --ig-success-900-contrast: white;
   --ig-success-900: var(--ig-success-h), calc(var(--ig-success-s) * 1.34), calc(var(--ig-success-l) * 0.64);
+  --ig-success-A100: hsl(120, 94.89%, 36.78%);
   --ig-success-A100-contrast: black;
   --ig-success-A100: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 1.34);
+  --ig-success-A200: hsl(120, 94.11%, 31.84%);
   --ig-success-A200-contrast: black;
   --ig-success-A200: var(--ig-success-h), calc(var(--ig-success-s) * 1.22), calc(var(--ig-success-l) * 1.16);
+  --ig-success-A400: hsl(120, 94.89%, 24.98%);
   --ig-success-A400-contrast: white;
   --ig-success-A400: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 0.91);
+  --ig-success-A700: hsl(120, 94.89%, 17.84%);
   --ig-success-A700-contrast: white;
   --ig-success-A700: var(--ig-success-h), calc(var(--ig-success-s) * 1.23), calc(var(--ig-success-l) * 0.65);
+  --ig-warn-50: hsl(30, 3.13%, 82.37%);
   --ig-warn-50-contrast: black;
   --ig-warn-50: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 1.78);
+  --ig-warn-100: hsl(30, 2.03%, 76.82%);
   --ig-warn-100-contrast: black;
   --ig-warn-100: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.8), calc(var(--ig-warn-l) * 1.66);
+  --ig-warn-200: hsl(30, 1.63%, 66.17%);
   --ig-warn-200-contrast: black;
   --ig-warn-200: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.64), calc(var(--ig-warn-l) * 1.43);
+  --ig-warn-300: hsl(30, 1.86%, 55.07%);
   --ig-warn-300-contrast: black;
   --ig-warn-300: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.73), calc(var(--ig-warn-l) * 1.19);
+  --ig-warn-400: hsl(30, 2.22%, 49.98%);
   --ig-warn-400-contrast: black;
   --ig-warn-400: var(--ig-warn-h), calc(var(--ig-warn-s) * 0.875), calc(var(--ig-warn-l) * 1.08);
   --ig-warn-h: 30deg;
   --ig-warn-s: 3%;
   --ig-warn-l: 46%;
   --ig-warn-a: 1;
+  --ig-warn-500: hsl(30, 2.54%, 46.27%);
   --ig-warn-500-contrast: black;
   --ig-warn-500: var(--ig-warn-h), calc(var(--ig-warn-s) * 1), calc(var(--ig-warn-l) * 1);
+  --ig-warn-600: hsl(30, 3.2%, 41.18%);
   --ig-warn-600-contrast: white;
   --ig-warn-600: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.26), calc(var(--ig-warn-l) * 0.89);
+  --ig-warn-700: hsl(30, 3.86%, 37.48%);
   --ig-warn-700-contrast: white;
   --ig-warn-700: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.52), calc(var(--ig-warn-l) * 0.81);
+  --ig-warn-800: hsl(30, 3.81%, 33.78%);
   --ig-warn-800-contrast: white;
   --ig-warn-800: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.5), calc(var(--ig-warn-l) * 0.73);
+  --ig-warn-900: hsl(30, 3.41%, 29.62%);
   --ig-warn-900-contrast: white;
   --ig-warn-900: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.34), calc(var(--ig-warn-l) * 0.64);
+  --ig-warn-A100: hsl(30, 3.13%, 62.01%);
   --ig-warn-A100-contrast: black;
   --ig-warn-A100: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 1.34);
+  --ig-warn-A200: hsl(30, 3.1%, 53.68%);
   --ig-warn-A200-contrast: black;
   --ig-warn-A200: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.22), calc(var(--ig-warn-l) * 1.16);
+  --ig-warn-A400: hsl(30, 3.13%, 42.11%);
   --ig-warn-A400-contrast: white;
   --ig-warn-A400: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 0.91);
+  --ig-warn-A700: hsl(30, 3.13%, 30.08%);
   --ig-warn-A700-contrast: white;
   --ig-warn-A700: var(--ig-warn-h), calc(var(--ig-warn-s) * 1.23), calc(var(--ig-warn-l) * 0.65);
+  --ig-error-50: hsl(0, 100%, 58.64%);
   --ig-error-50-contrast: black;
   --ig-error-50: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 1.78);
+  --ig-error-100: hsl(0, 80%, 54.68%);
   --ig-error-100-contrast: black;
   --ig-error-100: var(--ig-error-h), calc(var(--ig-error-s) * 0.8), calc(var(--ig-error-l) * 1.66);
+  --ig-error-200: hsl(0, 64%, 47.11%);
   --ig-error-200-contrast: white;
   --ig-error-200: var(--ig-error-h), calc(var(--ig-error-s) * 0.64), calc(var(--ig-error-l) * 1.43);
+  --ig-error-300: hsl(0, 73%, 39.2%);
   --ig-error-300-contrast: white;
   --ig-error-300: var(--ig-error-h), calc(var(--ig-error-s) * 0.73), calc(var(--ig-error-l) * 1.19);
+  --ig-error-400: hsl(0, 87.5%, 35.58%);
   --ig-error-400-contrast: white;
   --ig-error-400: var(--ig-error-h), calc(var(--ig-error-s) * 0.875), calc(var(--ig-error-l) * 1.08);
   --ig-error-h: 0deg;
   --ig-error-s: 100%;
   --ig-error-l: 33%;
   --ig-error-a: 1;
+  --ig-error-500: hsl(0, 100%, 32.94%);
   --ig-error-500-contrast: white;
   --ig-error-500: var(--ig-error-h), calc(var(--ig-error-s) * 1), calc(var(--ig-error-l) * 1);
+  --ig-error-600: hsl(0, 100%, 29.32%);
   --ig-error-600-contrast: white;
   --ig-error-600: var(--ig-error-h), calc(var(--ig-error-s) * 1.26), calc(var(--ig-error-l) * 0.89);
+  --ig-error-700: hsl(0, 100%, 26.68%);
   --ig-error-700-contrast: white;
   --ig-error-700: var(--ig-error-h), calc(var(--ig-error-s) * 1.52), calc(var(--ig-error-l) * 0.81);
+  --ig-error-800: hsl(0, 100%, 24.05%);
   --ig-error-800-contrast: white;
   --ig-error-800: var(--ig-error-h), calc(var(--ig-error-s) * 1.5), calc(var(--ig-error-l) * 0.73);
+  --ig-error-900: hsl(0, 100%, 21.08%);
   --ig-error-900-contrast: white;
   --ig-error-900: var(--ig-error-h), calc(var(--ig-error-s) * 1.34), calc(var(--ig-error-l) * 0.64);
+  --ig-error-A100: hsl(0, 100%, 44.14%);
   --ig-error-A100-contrast: white;
   --ig-error-A100: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 1.34);
+  --ig-error-A200: hsl(0, 100%, 38.21%);
   --ig-error-A200-contrast: white;
   --ig-error-A200: var(--ig-error-h), calc(var(--ig-error-s) * 1.22), calc(var(--ig-error-l) * 1.16);
+  --ig-error-A400: hsl(0, 100%, 29.98%);
   --ig-error-A400-contrast: white;
   --ig-error-A400: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 0.91);
+  --ig-error-A700: hsl(0, 100%, 21.41%);
   --ig-error-A700-contrast: white;
   --ig-error-A700: var(--ig-error-h), calc(var(--ig-error-s) * 1.23), calc(var(--ig-error-l) * 0.65);
 }
@@ -690,10 +808,116 @@
   margin-bottom: var(--ig-overline-margin-bottom);
 }
 
-igc-button {
-  --text-color: hsla(var(--ig-surface-500), var(--ig-surface-a));
-  --hover-background: hsla(var(--ig-primary-300), var(--ig-primary-a));
-  --active-background: hsla(var(--ig-primary-100), var(--ig-primary-a));
+igc-button[variant=flat],
+igc-button[variant=flat] [igxButton=flat], igc-button[variant=flat] .igx-button--flat {
+  --shadow-color: var(--ig-button-shadow-color, transparent);
+  --border-color: var(--ig-button-border-color, transparent);
+  --hover-border-color: var(--ig-button-hover-border-color, transparent);
+  --focus-border-color: var(--ig-button-focus-border-color, transparent);
+  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --active-border-color: var(--ig-button-active-border-color, transparent);
+  --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-gray-100), var(--ig-gray-a)));
+  --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));
+  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));
+  --background: var(--ig-button-background, transparent);
+  --foreground: var(--ig-button-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --hover-background: var(--ig-button-hover-background, transparent);
+  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --focus-background: var(--ig-button-focus-background, transparent);
+  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --focus-visible-background: var(--ig-button-focus-visible-background, transparent);
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --active-background: var(--ig-button-active-background, transparent);
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --border-radius: var(--ig-button-border-radius, 0rem);
+}
+
+igc-button[variant=outlined],
+igc-button[variant=outlined] [igxButton=outlined], igc-button[variant=outlined] .igx-button--outlined {
+  --shadow-color: var(--ig-button-shadow-color, transparent);
+  --border-color: var(--ig-button-border-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-button-hover-border-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --focus-border-color: var(--ig-button-focus-border-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --active-border-color: var(--ig-button-active-border-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
+  --disabled-background: var(--ig-button-disabled-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --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));
+  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));
+  --background: var(--ig-button-background, transparent);
+  --foreground: var(--ig-button-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focus-background: var(--ig-button-focus-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focus-visible-background: var(--ig-button-focus-visible-background, transparent);
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-gray-100), 0.8));
+  --active-foreground: var(--ig-button-active-foreground, var(--ig-gray-100-contrast));
+  --border-radius: var(--ig-button-border-radius, 0.125rem);
+}
+
+igc-button[variant=contained],
+igc-button[variant=contained] [igxButton=raised], igc-button[variant=contained] .igx-button--raised {
+  --shadow-color: var(--ig-button-shadow-color, transparent);
+  --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-600), var(--ig-primary-a)));
+  --focus-border-color: var(--ig-button-focus-border-color, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --active-border-color: var(--ig-button-active-border-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));
+  --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
+  --disabled-background: var(--ig-button-disabled-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --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));
+  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));
+  --background: var(--ig-button-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --foreground: var(--ig-button-foreground, var(--ig-primary-900-contrast));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --hover-foreground: var(--ig-button-hover-foreground, var(--ig-primary-900-contrast));
+  --focus-background: var(--ig-button-focus-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --focus-foreground: var(--ig-button-focus-foreground, var(--ig-primary-900-contrast));
+  --focus-visible-background: var(--ig-button-focus-visible-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, var(--ig-primary-900-contrast));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-primary-800), var(--ig-primary-a)));
+  --active-foreground: var(--ig-button-active-foreground, var(--ig-primary-900-contrast));
+  --border-radius: var(--ig-button-border-radius, 0.125rem);
+}
+
+igc-button[variant=fab],
+igc-button[variant=fab] [igxButton=fab], igc-button[variant=fab] .igx-button--fab {
+  --shadow-color: var(--ig-button-shadow-color, transparent);
+  --border-color: var(--ig-button-border-color, var(--ig-gray-900-contrast));
+  --hover-border-color: var(--ig-button-hover-border-color, var(--ig-gray-900-contrast));
+  --focus-border-color: var(--ig-button-focus-border-color, var(--ig-gray-900-contrast));
+  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, var(--ig-gray-900-contrast));
+  --active-border-color: var(--ig-button-active-border-color, var(--ig-gray-900-contrast));
+  --disabled-border-color: var(--ig-button-disabled-border-color, transparent);
+  --disabled-background: var(--ig-button-disabled-background, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --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));
+  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-0));
+  --background: var(--ig-button-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --foreground: var(--ig-button-foreground, var(--ig-primary-900-contrast));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --hover-foreground: var(--ig-button-hover-foreground, var(--ig-primary-900-contrast));
+  --focus-background: var(--ig-button-focus-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --focus-foreground: var(--ig-button-focus-foreground, var(--ig-primary-900-contrast));
+  --focus-visible-background: var(--ig-button-focus-visible-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, var(--ig-primary-900-contrast));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-primary-800), var(--ig-primary-a)));
+  --active-foreground: var(--ig-button-active-foreground, var(--ig-primary-900-contrast));
+  --border-radius: var(--ig-button-border-radius, 0.875rem);
 }
 
 igc-icon-button {
@@ -719,13 +943,22 @@ igc-calendar::part(months-view), igc-calendar::part(years-view) {
   --selected-month-year-color-hover: var(--ig-primary-800-contrast);
 }
 
-igc-checkbox {
-  --border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
-  --hover-color: hsla(var(--ig-gray-900), var(--ig-gray-a));
-  --checked-hover-color: hsla(var(--ig-primary-200), var(--ig-primary-a));
-  --invalid-color: hsla(var(--ig-error-200), var(--ig-error-a));
-  --invalid-hover-color: hsla(var(--ig-error-100), var(--ig-error-a));
-  --disabled-color: hsla(var(--ig-gray-200), var(--ig-gray-a));
+igc-checkbox,
+igc-checkbox ig-checkbox {
+  --tick-color: var(--ig-checkbox-tick-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --tick-color-hover: var(--ig-checkbox-tick-color-hover, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --empty-color: var(--ig-checkbox-empty-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --fill-color: var(--ig-checkbox-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --disabled-color: var(--ig-checkbox-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-indeterminate-color: var(--ig-checkbox-disabled-indeterminate-color, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));
+  --disabled-color-label: var(--ig-checkbox-disabled-color-label, hsla(var(--ig-gray-500), 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-900), var(--ig-error-a)));
+  --border-radius: var(--ig-checkbox-border-radius, 0.125rem);
+  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 0.125rem);
+  --focus-outline-color: var(--ig-checkbox-focus-outline-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
 }
 
 igc-dropdown-item {
@@ -736,14 +969,36 @@ igc-dropdown-header {
   --header-color: var(--ig-surface-500-contrast);
 }
 
-igc-switch {
-  --thumb-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
-  --disabled-thumb-color: hsla(var(--ig-gray-100), var(--ig-gray-a));
-  --hover-color: hsla(var(--ig-gray-900), var(--ig-gray-a));
-  --checked-hover-color: hsla(var(--ig-primary-200), var(--ig-primary-a));
-  --invalid-color: hsla(var(--ig-error-200), var(--ig-error-a));
-  --invalid-hover-color: hsla(var(--ig-error-100), var(--ig-error-a));
-  --disabled-color: hsla(var(--ig-gray-200), var(--ig-gray-a));
+igc-switch,
+igc-switch switch {
+  --resting-elevation: var(--switch-resting-elevation, var(--ig-elevation-2));
+  --hover-elevation: var(--switch-hover-elevation, var(--ig-elevation-3));
+  --disabled-elevation: var(--switch-disabled-elevation, var(--ig-elevation-1));
+  --border-color: var(--switch-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-hover-color: var(--switch-border-hover-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --border-disabled-color: var(--switch-border-disabled-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --border-on-color: var(--switch-border-on-color, hsla(var(--ig-primary-300), var(--ig-primary-a)));
+  --border-on-hover-color: var(--switch-border-on-hover-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --thumb-on-color: var(--switch-thumb-on-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --track-on-color: var(--switch-track-on-color, hsla(var(--ig-primary-300), var(--ig-primary-a)));
+  --thumb-off-color: var(--switch-thumb-off-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --track-disabled-color: var(--switch-track-disabled-color, transparent);
+  --track-on-disabled-color: var(--switch-track-on-disabled-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --track-off-color: var(--switch-track-off-color, transparent);
+  --thumb-disabled-color: var(--switch-thumb-disabled-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --thumb-on-disabled-color: var(--switch-thumb-on-disabled-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --label-color: var(--switch-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --label-disabled-color: var(--switch-label-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --label-invalid-color: var(--switch-label-invalid-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --track-error-color: var(--switch-track-error-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --thumb-on-error-color: var(--switch-thumb-on-error-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --error-color: var(--switch-error-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --error-color-hover: var(--switch-error-color-hover, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --border-radius-track: var(--switch-border-radius-track, 0.625rem);
+  --border-radius-thumb: var(--switch-border-radius-thumb, 0.625rem);
+  --border-radius-ripple: var(--switch-border-radius-ripple, 1.5rem);
+  --focus-outline-color: var(--switch-focus-outline-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --track-on-hover-color: var(--switch-track-on-hover-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
 }
 
 igc-input,
@@ -753,10 +1008,17 @@ igc-date-time-input {
 }
 
 igc-radio {
-  --hover-color: hsla(var(--ig-gray-500), var(--ig-gray-a));
-  --checked-hover-color: hsla(var(--ig-primary-200), var(--ig-primary-a));
-  --invalid-hover-color: hsla(var(--ig-error-200), var(--ig-error-a));
-  --disabled-color: hsla(var(--ig-gray-200), var(--ig-gray-a));
+  --hover-color: var(--ig-radio-hover-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --label-color: var(--ig-radio-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --empty-color: var(--ig-radio-empty-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-primary-300), var(--ig-primary-a)));
+  --fill-color-hover: var(--ig-radio-fill-color-hover, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --disabled-color: var(--ig-radio-disabled-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --disabled-label-color: var(--ig-radio-disabled-label-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --error-color: var(--ig-radio-error-color, hsla(var(--ig-error-500), var(--ig-error-a)));
+  --error-color-hover: var(--ig-radio-error-color-hover, hsla(var(--ig-error-200), var(--ig-error-a)));
+  --focus-outline-color: var(--ig-radio-focus-outline-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
 }
 
 igc-slider {
@@ -811,4 +1073,20 @@ apex-grid {
 
 igc-combo::part(input) {
   --container-background: transparent;
+}
+
+igc-icon,
+igc-icon ig-icon {
+  --color: var(--ig-icon-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --size: var(--ig-icon-size, 1.5rem);
+  --disabled-color: var(--ig-icon-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+}
+
+igc-navbar,
+igc-navbar ig-navbar {
+  --elevation: var(--ig-navbar-elevation, var(--ig-elevation-4));
+  --background: var(--ig-navbar-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --text-color: var(--ig-navbar-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --idle-icon-color: var(--ig-navbar-idle-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --hover-icon-color: var(--ig-navbar-hover-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
 }