igniteui-webcomponents 4.2.3 → 4.3.0-beta.0

package/themes/dark/indigo.css

@@ -68,6 +68,18 @@
     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: indigo;
   --ig-radius-factor: 1;
@@ -82,252 +94,360 @@
   --ig-scrollbar-track-background: hsla(var(--ig-gray-200), var(--ig-gray-a));
 }
 :root {
+  --ig-primary-50: hsl(230.85, 59.48%, 85.16%);
   --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(230.85, 38.69%, 79.42%);
   --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(230.85, 30.95%, 68.42%);
   --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(230.85, 35.3%, 56.93%);
   --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(230.85, 42.32%, 51.67%);
   --ig-primary-400-contrast: white;
   --ig-primary-400: var(--ig-primary-h), calc(var(--ig-primary-s) * 0.875), calc(var(--ig-primary-l) * 1.08);
   --ig-primary-h: 231deg;
   --ig-primary-s: 48%;
   --ig-primary-l: 48%;
   --ig-primary-a: 1;
+  --ig-primary-500: hsl(230.85, 48.36%, 47.84%);
   --ig-primary-500-contrast: white;
   --ig-primary-500: var(--ig-primary-h), calc(var(--ig-primary-s) * 1), calc(var(--ig-primary-l) * 1);
+  --ig-primary-600: hsl(230.85, 60.93%, 42.58%);
   --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(230.85, 73.51%, 38.75%);
   --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(230.85, 72.54%, 34.93%);
   --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(230.85, 64.8%, 30.62%);
   --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(230.85, 59.48%, 64.11%);
   --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(230.85, 59%, 55.5%);
   --ig-primary-A200-contrast: white;
   --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(230.85, 59.48%, 43.54%);
   --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(230.85, 59.48%, 31.1%);
   --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(230.85, 59.48%, 85.16%);
   --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(230.85, 38.69%, 79.42%);
   --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(230.85, 30.95%, 68.42%);
   --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(230.85, 35.3%, 56.93%);
   --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(230.85, 42.32%, 51.67%);
   --ig-secondary-400-contrast: white;
   --ig-secondary-400: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 0.875), calc(var(--ig-secondary-l) * 1.08);
   --ig-secondary-h: 231deg;
   --ig-secondary-s: 48%;
   --ig-secondary-l: 48%;
   --ig-secondary-a: 1;
+  --ig-secondary-500: hsl(230.85, 48.36%, 47.84%);
   --ig-secondary-500-contrast: white;
   --ig-secondary-500: var(--ig-secondary-h), calc(var(--ig-secondary-s) * 1), calc(var(--ig-secondary-l) * 1);
+  --ig-secondary-600: hsl(230.85, 60.93%, 42.58%);
   --ig-secondary-600-contrast: white;
   --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(230.85, 73.51%, 38.75%);
   --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(230.85, 72.54%, 34.93%);
   --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(230.85, 64.8%, 30.62%);
   --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(230.85, 59.48%, 64.11%);
   --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(230.85, 59%, 55.5%);
   --ig-secondary-A200-contrast: white;
   --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(230.85, 59.48%, 43.54%);
   --ig-secondary-A400-contrast: white;
   --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(230.85, 59.48%, 31.1%);
   --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(262, 8%, 13%);
   --ig-gray-50-contrast: white;
   --ig-gray-50: var(--ig-gray-h), var(--ig-gray-s), 13%;
+  --ig-gray-100: hsl(262, 8%, 26%);
   --ig-gray-100-contrast: white;
   --ig-gray-100: var(--ig-gray-h), var(--ig-gray-s), 26%;
+  --ig-gray-200: hsl(262, 8%, 38%);
   --ig-gray-200-contrast: white;
   --ig-gray-200: var(--ig-gray-h), var(--ig-gray-s), 38%;
+  --ig-gray-300: hsl(262, 8%, 54%);
   --ig-gray-300-contrast: black;
   --ig-gray-300: var(--ig-gray-h), var(--ig-gray-s), 54%;
+  --ig-gray-400: hsl(262, 8%, 62%);
   --ig-gray-400-contrast: black;
   --ig-gray-400: var(--ig-gray-h), var(--ig-gray-s), 62%;
   --ig-gray-h: 262deg;
   --ig-gray-s: 8%;
   --ig-gray-l: 74%;
   --ig-gray-a: 1;
+  --ig-gray-500: hsl(262, 8%, 74%);
   --ig-gray-500-contrast: black;
   --ig-gray-500: var(--ig-gray-h), var(--ig-gray-s), 74%;
+  --ig-gray-600: hsl(262, 8%, 88%);
   --ig-gray-600-contrast: black;
   --ig-gray-600: var(--ig-gray-h), var(--ig-gray-s), 88%;
+  --ig-gray-700: hsl(262, 8%, 93%);
   --ig-gray-700-contrast: black;
   --ig-gray-700: var(--ig-gray-h), var(--ig-gray-s), 93%;
+  --ig-gray-800: hsl(262, 8%, 96%);
   --ig-gray-800-contrast: black;
   --ig-gray-800: var(--ig-gray-h), var(--ig-gray-s), 96%;
+  --ig-gray-900: hsl(262, 8%, 98%);
   --ig-gray-900-contrast: black;
   --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 98%;
+  --ig-surface-50: hsl(228, 6.91%, 31.06%);
   --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(228, 4.49%, 28.97%);
   --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(228, 3.6%, 24.95%);
   --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(228, 4.1%, 20.77%);
   --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(228, 4.92%, 18.85%);
   --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: 228deg;
   --ig-surface-s: 6%;
   --ig-surface-l: 17%;
   --ig-surface-a: 1;
+  --ig-surface-500: hsl(228, 5.62%, 17.45%);
   --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(228, 7.08%, 15.53%);
   --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(228, 8.54%, 14.14%);
   --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(228, 8.43%, 12.74%);
   --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(228, 7.53%, 11.17%);
   --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(228, 6.91%, 23.38%);
   --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(228, 6.85%, 20.24%);
   --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(228, 6.91%, 15.88%);
   --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(228, 6.91%, 11.34%);
   --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(286, 100%, 68.41%);
   --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(286, 73.47%, 63.8%);
   --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(286, 58.78%, 54.96%);
   --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(286, 67.04%, 45.73%);
   --ig-info-300-contrast: white;
   --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(286, 80.36%, 41.51%);
   --ig-info-400-contrast: white;
   --ig-info-400: var(--ig-info-h), calc(var(--ig-info-s) * 0.875), calc(var(--ig-info-l) * 1.08);
   --ig-info-h: 286deg;
   --ig-info-s: 92%;
   --ig-info-l: 38%;
   --ig-info-a: 1;
+  --ig-info-500: hsl(286, 91.84%, 38.43%);
   --ig-info-500-contrast: white;
   --ig-info-500: var(--ig-info-h), calc(var(--ig-info-s) * 1), calc(var(--ig-info-l) * 1);
+  --ig-info-600: hsl(286, 100%, 34.2%);
   --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(286, 100%, 31.13%);
   --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(286, 100%, 28.05%);
   --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(286, 100%, 24.6%);
   --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(286, 100%, 51.5%);
   --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(286, 100%, 44.58%);
   --ig-info-A200-contrast: white;
   --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(286, 100%, 34.97%);
   --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(286, 100%, 24.98%);
   --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(92.04, 58.93%, 75.04%);
   --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(92.04, 38.33%, 69.98%);
   --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(92.04, 30.66%, 60.28%);
   --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(92.04, 34.97%, 50.17%);
   --ig-success-300-contrast: black;
   --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(92.04, 41.92%, 45.53%);
   --ig-success-400-contrast: black;
   --ig-success-400: var(--ig-success-h), calc(var(--ig-success-s) * 0.875), calc(var(--ig-success-l) * 1.08);
   --ig-success-h: 92deg;
   --ig-success-s: 48%;
   --ig-success-l: 42%;
   --ig-success-a: 1;
+  --ig-success-500: hsl(92.04, 47.91%, 42.16%);
   --ig-success-500-contrast: black;
   --ig-success-500: var(--ig-success-h), calc(var(--ig-success-s) * 1), calc(var(--ig-success-l) * 1);
+  --ig-success-600: hsl(92.04, 60.36%, 37.52%);
   --ig-success-600-contrast: black;
   --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(92.04, 72.82%, 34.15%);
   --ig-success-700-contrast: black;
   --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(92.04, 71.86%, 30.77%);
   --ig-success-800-contrast: black;
   --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(92.04, 64.2%, 26.98%);
   --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(92.04, 58.93%, 56.49%);
   --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(92.04, 58.45%, 48.9%);
   --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(92.04, 58.93%, 38.36%);
   --ig-success-A400-contrast: black;
   --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(92.04, 58.93%, 27.4%);
   --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(35.76, 100%, 89%);
   --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(35.76, 80%, 83%);
   --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(35.76, 64%, 71.5%);
   --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(35.76, 73%, 59.5%);
   --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(35.76, 87.5%, 54%);
   --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: 36deg;
   --ig-warn-s: 100%;
   --ig-warn-l: 50%;
   --ig-warn-a: 1;
+  --ig-warn-500: hsl(35.76, 100%, 50%);
   --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(35.76, 100%, 44.5%);
   --ig-warn-600-contrast: black;
   --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(35.76, 100%, 40.5%);
   --ig-warn-700-contrast: black;
   --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(35.76, 100%, 36.5%);
   --ig-warn-800-contrast: black;
   --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(35.76, 100%, 32%);
   --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(35.76, 100%, 67%);
   --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(35.76, 100%, 58%);
   --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(35.76, 100%, 45.5%);
   --ig-warn-A400-contrast: black;
   --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(35.76, 100%, 32.5%);
   --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(354.36, 95.55%, 81.32%);
   --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(354.36, 62.15%, 75.84%);
   --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(354.36, 49.72%, 65.33%);
   --ig-error-200-contrast: black;
   --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(354.36, 56.71%, 54.37%);
   --ig-error-300-contrast: black;
   --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(354.36, 67.97%, 49.34%);
   --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: 354deg;
   --ig-error-s: 78%;
   --ig-error-l: 46%;
   --ig-error-a: 1;
+  --ig-error-500: hsl(354.36, 77.68%, 45.69%);
   --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(354.36, 97.88%, 40.66%);
   --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(354.36, 100%, 37.01%);
   --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(354.36, 100%, 33.35%);
   --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(354.36, 100%, 29.24%);
   --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(354.36, 95.55%, 61.22%);
   --ig-error-A100-contrast: black;
   --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(354.36, 94.77%, 53%);
   --ig-error-A200-contrast: black;
   --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(354.36, 95.55%, 41.57%);
   --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(354.36, 95.55%, 29.7%);
   --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);
 }
@@ -466,17 +586,55 @@
   --ig-overline-margin-bottom: 0;
 }
 
-igc-checkbox {
-  --border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
-  --checked-color: hsla(var(--ig-gray-900), var(--ig-gray-a));
-  --disabled-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+igc-checkbox,
+igc-checkbox ig-checkbox {
+  --tick-color: var(--ig-checkbox-tick-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --tick-color-hover: var(--ig-checkbox-tick-color-hover, hsla(var(--ig-surface-500), var(--ig-surface-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-700), var(--ig-gray-a)));
+  --fill-color: var(--ig-checkbox-fill-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --fill-color-hover: var(--ig-checkbox-fill-color-hover, hsla(var(--ig-secondary-500), var(--ig-secondary-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-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-200), var(--ig-error-a)));
+  --border-radius: var(--ig-checkbox-border-radius, 0.1875rem);
+  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 0.1875rem);
+  --focus-outline-color: var(--ig-checkbox-focus-outline-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --focus-outline-color-focused: var(--ig-checkbox-focus-outline-color-focused, hsla(var(--ig-primary-200), var(--ig-primary-a)));
 }
 
-igc-switch {
-  --border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
-  --checked-color: hsla(var(--ig-gray-900), var(--ig-gray-a));
-  --thumb-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
-  --disabled-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+igc-switch,
+igc-switch ig-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));
+  --border-color: var(--ig-switch-border-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --border-hover-color: var(--ig-switch-border-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --border-disabled-color: var(--ig-switch-border-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --border-on-color: var(--ig-switch-border-on-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --border-on-hover-color: var(--ig-switch-border-on-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --thumb-on-color: var(--ig-switch-thumb-on-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --track-on-color: var(--ig-switch-track-on-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --thumb-off-color: var(--ig-switch-thumb-off-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --track-disabled-color: var(--ig-switch-track-disabled-color, transparent);
+  --track-on-disabled-color: var(--ig-switch-track-on-disabled-color, hsla(var(--ig-secondary-50), var(--ig-secondary-a)));
+  --track-off-color: var(--ig-switch-track-off-color, transparent);
+  --thumb-disabled-color: var(--ig-switch-thumb-disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --thumb-on-disabled-color: var(--ig-switch-thumb-on-disabled-color, hsla(var(--ig-secondary-100), var(--ig-secondary-a)));
+  --label-color: var(--ig-switch-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --label-disabled-color: var(--ig-switch-label-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --label-invalid-color: var(--ig-switch-label-invalid-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --track-error-color: var(--ig-switch-track-error-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --thumb-on-error-color: var(--ig-switch-thumb-on-error-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --error-color: var(--ig-switch-error-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --error-color-hover: var(--ig-switch-error-color-hover, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-radius-track: var(--ig-switch-border-radius-track, 0.5rem);
+  --border-radius-thumb: var(--ig-switch-border-radius-thumb, 0.625rem);
+  --border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem);
+  --focus-outline-color: var(--ig-switch-focus-outline-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --focus-outline-color-focused: var(--ig-switch-focus-outline-color-focused, hsla(var(--ig-primary-200), var(--ig-primary-a)));
 }
 
 igc-input,
@@ -486,9 +644,18 @@ igc-date-time-input {
 }
 
 igc-radio {
-  --border-color: hsla(var(--ig-gray-700), var(--ig-gray-a));
-  --checked-color: hsla(var(--ig-gray-900), var(--ig-gray-a));
-  --disabled-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
+  --hover-color: var(--ig-radio-hover-color, transparent);
+  --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-gray-900), var(--ig-gray-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-700), var(--ig-gray-a)));
+  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --fill-color-hover: var(--ig-radio-fill-color-hover, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --disabled-color: var(--ig-radio-disabled-color, hsla(var(--ig-gray-400), 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-300), var(--ig-gray-a)));
+  --focus-outline-color-focused: var(--ig-radio-focus-outline-color-focused, hsla(var(--ig-primary-200), var(--ig-primary-a)));
 }
 
 igc-slider {
@@ -545,4 +712,132 @@ apex-grid {
 
 igc-combo::part(label) {
   --label-focus-color: hsla(var(--ig-gray-800), var(--ig-gray-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, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --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, transparent);
+  --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-300), 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-600), 0.8));
+  --hover-background: var(--ig-button-hover-background, transparent);
+  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --focus-background: var(--ig-button-focus-background, transparent);
+  --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, transparent);
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --border-radius: var(--ig-button-border-radius, 1.25rem);
+}
+
+igc-button[variant=outlined],
+igc-button[variant=outlined] [igxButton=outlined], igc-button[variant=outlined] .igx-button--outlined {
+  --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-gray-200), 0.8));
+  --border-color: var(--ig-button-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --hover-border-color: var(--ig-button-hover-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --focus-border-color: var(--ig-button-focus-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --active-border-color: var(--ig-button-active-border-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --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-300), 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-500), var(--ig-gray-a)));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-gray-100), 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, transparent);
+  --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, transparent);
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --border-radius: var(--ig-button-border-radius, 1.25rem);
+}
+
+igc-button[variant=contained],
+igc-button[variant=contained] [igxButton=raised], igc-button[variant=contained] .igx-button--raised {
+  --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --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, transparent);
+  --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, hsla(var(--ig-gray-200), 0.1));
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-300), 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-secondary-500), var(--ig-secondary-a)));
+  --foreground: var(--ig-button-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-secondary-400), var(--ig-secondary-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-secondary-400), var(--ig-secondary-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, hsla(var(--ig-secondary-400), var(--ig-secondary-a)));
+  --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-secondary-300), var(--ig-secondary-a)));
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --border-radius: var(--ig-button-border-radius, 1.25rem);
+}
+
+igc-button[variant=fab],
+igc-button[variant=fab] [igxButton=fab], igc-button[variant=fab] .igx-button--fab {
+  --shadow-color: var(--ig-button-shadow-color, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --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, transparent);
+  --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, hsla(var(--ig-gray-200), 0.1));
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-300), 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-secondary-500), var(--ig-secondary-a)));
+  --foreground: var(--ig-button-foreground, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-secondary-400), var(--ig-secondary-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-secondary-400), var(--ig-secondary-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, hsla(var(--ig-secondary-400), var(--ig-secondary-a)));
+  --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-secondary-300), var(--ig-secondary-a)));
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --border-radius: var(--ig-button-border-radius, 1.75rem);
+}
+
+igc-icon,
+igc-icon ig-icon {
+  --color: var(--ig-icon-color, 'currentColor');
+  --size: var(--ig-icon-size, 1.5rem);
+  --disabled-color: var(--ig-icon-disabled-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+}
+
+igc-navbar,
+igc-navbar ig-navbar {
+  --elevation: var(--ig-navbar-elevation, var(--ig-elevation-0));
+  --background: var(--ig-navbar-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --text-color: var(--ig-navbar-text-color, var(--ig-primary-500-contrast));
+  --idle-icon-color: var(--ig-navbar-idle-icon-color, var(--ig-primary-500-contrast));
+  --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-primary-500-contrast));
 }