igniteui-webcomponents 4.2.2 → 4.3.0-alpha.0

package/themes/dark/material.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: material;
   --ig-radius-factor: 1;
@@ -83,252 +93,360 @@
 }
 
 :root {
+  --ig-primary-50: hsl(204, 100%, 89%);
   --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(204, 80%, 83%);
   --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(204, 64%, 71.5%);
   --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(204, 73%, 59.5%);
   --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(204, 87.5%, 54%);
   --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: 204deg;
   --ig-primary-s: 100%;
   --ig-primary-l: 50%;
   --ig-primary-a: 1;
+  --ig-primary-500: hsl(204, 100%, 50%);
   --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(204, 100%, 44.5%);
   --ig-primary-600-contrast: black;
   --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(204, 100%, 40.5%);
   --ig-primary-700-contrast: black;
   --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(204, 100%, 36.5%);
   --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(204, 100%, 32%);
   --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(204, 100%, 67%);
   --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(204, 100%, 58%);
   --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(204, 100%, 45.5%);
   --ig-primary-A400-contrast: black;
   --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(204, 100%, 32.5%);
   --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(332.7, 96.85%, 89.35%);
   --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(332.7, 62.99%, 83.33%);
   --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(332.7, 50.39%, 71.78%);
   --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(332.7, 57.48%, 59.73%);
   --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(332.7, 68.9%, 54.21%);
   --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: 333deg;
   --ig-secondary-s: 79%;
   --ig-secondary-l: 50%;
   --ig-secondary-a: 1;
+  --ig-secondary-500: hsl(332.7, 78.74%, 50.2%);
   --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(332.7, 99.21%, 44.67%);
   --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(332.7, 100%, 40.66%);
   --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(332.7, 100%, 36.64%);
   --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(332.7, 100%, 32.13%);
   --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(332.7, 96.85%, 67.26%);
   --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(332.7, 96.06%, 58.23%);
   --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(332.7, 96.85%, 45.68%);
   --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(332.7, 96.85%, 32.63%);
   --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(131.32, 52.57%, 91.44%);
   --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(131.32, 34.19%, 85.28%);
   --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(131.32, 27.35%, 73.46%);
   --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(131.32, 31.2%, 61.13%);
   --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(131.32, 37.4%, 55.48%);
   --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: 131deg;
   --ig-success-s: 43%;
   --ig-success-l: 51%;
   --ig-success-a: 1;
+  --ig-success-500: hsl(131.32, 42.74%, 51.37%);
   --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(131.32, 53.85%, 45.72%);
   --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(131.32, 64.97%, 41.61%);
   --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(131.32, 64.11%, 37.5%);
   --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(131.32, 57.27%, 32.88%);
   --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(131.32, 52.57%, 68.84%);
   --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(131.32, 52.15%, 59.59%);
   --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(131.32, 52.57%, 46.75%);
   --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(131.32, 52.57%, 33.39%);
   --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(37.07, 100%, 95.98%);
   --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(37.07, 76.6%, 89.51%);
   --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(37.07, 61.28%, 77.11%);
   --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(37.07, 69.89%, 64.17%);
   --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(37.07, 83.78%, 58.24%);
   --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: 37deg;
   --ig-warn-s: 96%;
   --ig-warn-l: 54%;
   --ig-warn-a: 1;
+  --ig-warn-500: hsl(37.07, 95.74%, 53.92%);
   --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(37.07, 100%, 47.99%);
   --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(37.07, 100%, 43.68%);
   --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(37.07, 100%, 39.36%);
   --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(37.07, 100%, 34.51%);
   --ig-warn-900-contrast: black;
   --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(37.07, 100%, 72.25%);
   --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(37.07, 100%, 62.55%);
   --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(37.07, 100%, 49.07%);
   --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(37.07, 100%, 35.05%);
   --ig-warn-A700-contrast: black;
   --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(346.02, 100%, 95.63%);
   --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(346.02, 80%, 89.18%);
   --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(346.02, 64%, 76.83%);
   --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(346.02, 73%, 63.93%);
   --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(346.02, 87.5%, 58.02%);
   --ig-error-400-contrast: black;
   --ig-error-400: var(--ig-error-h), calc(var(--ig-error-s) * 0.875), calc(var(--ig-error-l) * 1.08);
   --ig-error-h: 346deg;
   --ig-error-s: 100%;
   --ig-error-l: 54%;
   --ig-error-a: 1;
+  --ig-error-500: hsl(346.02, 100%, 53.73%);
   --ig-error-500-contrast: black;
   --ig-error-500: var(--ig-error-h), calc(var(--ig-error-s) * 1), calc(var(--ig-error-l) * 1);
+  --ig-error-600: hsl(346.02, 100%, 47.82%);
   --ig-error-600-contrast: black;
   --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(346.02, 100%, 43.52%);
   --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(346.02, 100%, 39.22%);
   --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(346.02, 100%, 34.38%);
   --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(346.02, 100%, 71.99%);
   --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(346.02, 100%, 62.32%);
   --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(346.02, 100%, 48.89%);
   --ig-error-A400-contrast: black;
   --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(346.02, 100%, 34.92%);
   --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);
 }
@@ -691,12 +809,28 @@
 }
 
 igc-radio {
-  --hover-background: hsla(var(--ig-gray-600), 0.12);
-  --focus-background: hsla(var(--ig-gray-600), 0.24);
-  --hover-invalid-background: hsla(var(--ig-error-500), 0.12);
-  --focus-invalid-background: hsla(var(--ig-error-500), 0.24);
-  --hover-selected-background: hsla(var(--ig-secondary-500), 0.12);
-  --focus-selected-background: hsla(var(--ig-secondary-500), 0.24);
+  --hover-color: var(--ig-radio-hover-color, transparent);
+  --fill-hover-border-color: var(--ig-radio-fill-hover-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-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-600), var(--ig-gray-a)));
+  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --fill-color-hover: var(--ig-radio-fill-color-hover, hsla(var(--ig-secondary-500), var(--ig-secondary-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-400), 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-500), var(--ig-error-a)));
+}
+igc-radio:hover::part(ripple) {
+  opacity: 0.12;
+}
+igc-radio:hover::part(ripple checked) {
+  opacity: 0.12;
+}
+igc-radio:focus-within::part(ripple) {
+  opacity: 0.24;
+}
+igc-radio:focus-within::part(ripple checked) {
+  opacity: 0.24;
 }
 
 igc-input,
@@ -728,4 +862,191 @@ apex-grid {
 
 igc-combo::part(input) {
   --focus-background: hsla(var(--ig-gray-100), 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, 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, 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-200), 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-secondary-500), var(--ig-secondary-a)));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-secondary-500), 0.12));
+  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --focus-background: var(--ig-button-focus-background, hsla(var(--ig-secondary-400), 0.24));
+  --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, hsla(var(--ig-secondary-400), 0.24));
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-secondary-400), 0.12));
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --border-radius: var(--ig-button-border-radius, 0.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, transparent);
+  --border-color: var(--ig-button-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --hover-border-color: var(--ig-button-hover-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --focus-border-color: var(--ig-button-focus-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --active-border-color: var(--ig-button-active-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --disabled-border-color: var(--ig-button-disabled-border-color, hsla(var(--ig-gray-100), 0.3));
+  --disabled-background: var(--ig-button-disabled-background, transparent);
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-200), 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-secondary-500), var(--ig-secondary-a)));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-secondary-500), 0.05));
+  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --focus-background: var(--ig-button-focus-background, hsla(var(--ig-secondary-400), 0.12));
+  --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, hsla(var(--ig-secondary-400), 0.12));
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-secondary-400), 0.12));
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --border-radius: var(--ig-button-border-radius, 0.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, 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, 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-100), 0.3));
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-2));
+  --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-4));
+  --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-8));
+  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-8));
+  --background: var(--ig-button-background, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --foreground: var(--ig-button-foreground, var(--ig-secondary-500-contrast));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
+  --hover-foreground: var(--ig-button-hover-foreground, var(--ig-secondary-300-contrast));
+  --focus-background: var(--ig-button-focus-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
+  --focus-foreground: var(--ig-button-focus-foreground, var(--ig-secondary-300-contrast));
+  --focus-visible-background: var(--ig-button-focus-visible-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, var(--ig-secondary-300-contrast));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
+  --active-foreground: var(--ig-button-active-foreground, var(--ig-secondary-300-contrast));
+  --border-radius: var(--ig-button-border-radius, 0.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, 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, 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-100), 0.3));
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --resting-elevation: var(--ig-button-resting-elevation, var(--ig-elevation-6));
+  --hover-elevation: var(--ig-button-hover-elevation, var(--ig-elevation-12));
+  --focus-elevation: var(--ig-button-focus-elevation, var(--ig-elevation-12));
+  --active-elevation: var(--ig-button-active-elevation, var(--ig-elevation-12));
+  --background: var(--ig-button-background, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --foreground: var(--ig-button-foreground, var(--ig-secondary-500-contrast));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
+  --hover-foreground: var(--ig-button-hover-foreground, var(--ig-secondary-300-contrast));
+  --focus-background: var(--ig-button-focus-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
+  --focus-foreground: var(--ig-button-focus-foreground, var(--ig-secondary-300-contrast));
+  --focus-visible-background: var(--ig-button-focus-visible-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, var(--ig-secondary-300-contrast));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-secondary-300), var(--ig-secondary-a)));
+  --active-foreground: var(--ig-button-active-foreground, var(--ig-secondary-300-contrast));
+  --border-radius: var(--ig-button-border-radius, 1.75rem);
+}
+
+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-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));
+}
+
+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-50), 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-600), var(--ig-gray-a)));
+  --fill-color: var(--ig-checkbox-fill-color, hsla(var(--ig-secondary-500), var(--ig-secondary-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-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-500), var(--ig-error-a)));
+  --border-radius: var(--ig-checkbox-border-radius, 0.125rem);
+  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 1.5rem);
+}
+
+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, transparent);
+  --border-hover-color: var(--ig-switch-border-hover-color, transparent);
+  --border-disabled-color: var(--ig-switch-border-disabled-color, transparent);
+  --border-on-color: var(--ig-switch-border-on-color, transparent);
+  --border-on-hover-color: var(--ig-switch-border-on-hover-color, transparent);
+  --thumb-on-color: var(--ig-switch-thumb-on-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --track-on-color: var(--ig-switch-track-on-color, hsla(var(--ig-secondary-200), var(--ig-secondary-a)));
+  --thumb-off-color: var(--ig-switch-thumb-off-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --track-disabled-color: var(--ig-switch-track-disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --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, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --thumb-disabled-color: var(--ig-switch-thumb-disabled-color, hsla(var(--ig-gray-200), 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-500), 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-secondary-500), var(--ig-secondary-a)));
+  --error-color: var(--ig-switch-error-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --error-color-hover: var(--ig-switch-error-color-hover, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --border-radius-track: var(--ig-switch-border-radius-track, 0.4375rem);
+  --border-radius-thumb: var(--ig-switch-border-radius-thumb, 0.625rem);
+  --border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem);
+}
+igc-switch:hover::part(thumb)::after {
+  opacity: 0.12;
+}
+igc-switch:hover::part(thumb checked)::after {
+  opacity: 0.12;
+}
+igc-switch:focus-within::part(thumb)::after {
+  opacity: 0.24;
+}
+igc-switch:focus-within::part(thumb checked)::after {
+  opacity: 0.24;
 }