igniteui-webcomponents 4.2.3 → 4.3.0-beta.0

package/themes/dark/bootstrap.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: bootstrap;
   --ig-radius-factor: 1;
@@ -83,252 +95,360 @@
 }
 
 :root {
+  --ig-primary-50: hsl(215.75, 100%, 92.84%);
   --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(215.75, 78.69%, 86.58%);
   --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(215.75, 62.95%, 74.58%);
   --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(215.75, 71.8%, 62.07%);
   --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(215.75, 86.07%, 56.33%);
   --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: 216deg;
   --ig-primary-s: 98%;
   --ig-primary-l: 52%;
   --ig-primary-a: 1;
+  --ig-primary-500: hsl(215.75, 98.36%, 52.16%);
   --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(215.75, 100%, 46.42%);
   --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(215.75, 100%, 42.25%);
   --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(215.75, 100%, 38.07%);
   --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(215.75, 100%, 33.38%);
   --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(215.75, 100%, 69.89%);
   --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(215.75, 100%, 60.5%);
   --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(215.75, 100%, 47.46%);
   --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(215.75, 100%, 33.9%);
   --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(208.24, 8.97%, 81.32%);
   --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(208.24, 5.84%, 75.84%);
   --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(208.24, 4.67%, 65.33%);
   --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(208.24, 5.33%, 54.37%);
   --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(208.24, 6.38%, 49.34%);
   --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: 7%;
   --ig-secondary-l: 46%;
   --ig-secondary-a: 1;
+  --ig-secondary-500: hsl(208.24, 7.3%, 45.69%);
   --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(208.24, 9.19%, 40.66%);
   --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(208.24, 11.09%, 37.01%);
   --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(208.24, 10.94%, 33.35%);
   --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(208.24, 9.78%, 29.24%);
   --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(208.24, 8.97%, 61.22%);
   --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(208.24, 8.9%, 53%);
   --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(208.24, 8.97%, 41.57%);
   --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(208.24, 8.97%, 29.7%);
   --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(210, 10.81%, 13%);
   --ig-gray-50-contrast: white;
   --ig-gray-50: var(--ig-gray-h), var(--ig-gray-s), 13%;
+  --ig-gray-100: hsl(210, 10.81%, 26%);
   --ig-gray-100-contrast: white;
   --ig-gray-100: var(--ig-gray-h), var(--ig-gray-s), 26%;
+  --ig-gray-200: hsl(210, 10.81%, 38%);
   --ig-gray-200-contrast: white;
   --ig-gray-200: var(--ig-gray-h), var(--ig-gray-s), 38%;
+  --ig-gray-300: hsl(210, 10.81%, 54%);
   --ig-gray-300-contrast: black;
   --ig-gray-300: var(--ig-gray-h), var(--ig-gray-s), 54%;
+  --ig-gray-400: hsl(210, 10.81%, 62%);
   --ig-gray-400-contrast: black;
   --ig-gray-400: var(--ig-gray-h), var(--ig-gray-s), 62%;
   --ig-gray-h: 210deg;
   --ig-gray-s: 11%;
   --ig-gray-l: 74%;
   --ig-gray-a: 1;
+  --ig-gray-500: hsl(210, 10.81%, 74%);
   --ig-gray-500-contrast: black;
   --ig-gray-500: var(--ig-gray-h), var(--ig-gray-s), 74%;
+  --ig-gray-600: hsl(210, 10.81%, 88%);
   --ig-gray-600-contrast: black;
   --ig-gray-600: var(--ig-gray-h), var(--ig-gray-s), 88%;
+  --ig-gray-700: hsl(210, 10.81%, 93%);
   --ig-gray-700-contrast: black;
   --ig-gray-700: var(--ig-gray-h), var(--ig-gray-s), 93%;
+  --ig-gray-800: hsl(210, 10.81%, 96%);
   --ig-gray-800-contrast: black;
   --ig-gray-800: var(--ig-gray-h), var(--ig-gray-s), 96%;
+  --ig-gray-900: hsl(210, 10.81%, 98%);
   --ig-gray-900-contrast: black;
   --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 98%;
+  --ig-surface-50: hsl(210, 13.3%, 25.83%);
   --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(210, 8.65%, 24.09%);
   --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(210, 6.92%, 20.75%);
   --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(210, 7.89%, 17.27%);
   --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(210, 9.46%, 15.67%);
   --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: 210deg;
   --ig-surface-s: 11%;
   --ig-surface-l: 15%;
   --ig-surface-a: 1;
+  --ig-surface-500: hsl(210, 10.81%, 14.51%);
   --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(210, 13.62%, 12.91%);
   --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(210, 16.43%, 11.75%);
   --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(210, 16.22%, 10.59%);
   --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(210, 14.49%, 9.29%);
   --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(210, 13.3%, 19.44%);
   --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(210, 13.19%, 16.83%);
   --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(210, 13.3%, 13.2%);
   --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(210, 13.3%, 9.43%);
   --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(190.04, 100%, 88.3%);
   --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(190.04, 71.78%, 82.35%);
   --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(190.04, 57.42%, 70.94%);
   --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(190.04, 65.5%, 59.03%);
   --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(190.04, 78.51%, 53.58%);
   --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: 190deg;
   --ig-info-s: 90%;
   --ig-info-l: 50%;
   --ig-info-a: 1;
+  --ig-info-500: hsl(190.04, 89.72%, 49.61%);
   --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(190.04, 100%, 44.15%);
   --ig-info-600-contrast: black;
   --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(190.04, 100%, 40.18%);
   --ig-info-700-contrast: black;
   --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(190.04, 100%, 36.21%);
   --ig-info-800-contrast: black;
   --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(190.04, 100%, 31.75%);
   --ig-info-900-contrast: black;
   --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(190.04, 100%, 66.47%);
   --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(190.04, 100%, 57.55%);
   --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(190.04, 100%, 45.14%);
   --ig-info-A400-contrast: black;
   --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(190.04, 100%, 32.25%);
   --ig-info-A700-contrast: black;
   --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(152.18, 84.56%, 55.84%);
   --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(152.18, 55%, 52.08%);
   --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(152.18, 44%, 44.86%);
   --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(152.18, 50.19%, 37.33%);
   --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(152.18, 60.16%, 33.88%);
   --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: 152deg;
   --ig-success-s: 69%;
   --ig-success-l: 31%;
   --ig-success-a: 1;
+  --ig-success-500: hsl(152.18, 68.75%, 31.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(152.18, 86.63%, 27.92%);
   --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(152.18, 100%, 25.41%);
   --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(152.18, 100%, 22.9%);
   --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(152.18, 92.13%, 20.08%);
   --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(152.18, 84.56%, 42.04%);
   --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(152.18, 83.88%, 36.39%);
   --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(152.18, 84.56%, 28.55%);
   --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(152.18, 84.56%, 20.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(45, 100%, 91.44%);
   --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(45, 80%, 85.28%);
   --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(45, 64%, 73.46%);
   --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(45, 73%, 61.13%);
   --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(45, 87.5%, 55.48%);
   --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: 45deg;
   --ig-warn-s: 100%;
   --ig-warn-l: 51%;
   --ig-warn-a: 1;
+  --ig-warn-500: hsl(45, 100%, 51.37%);
   --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(45, 100%, 45.72%);
   --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(45, 100%, 41.61%);
   --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(45, 100%, 37.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(45, 100%, 32.88%);
   --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(45, 100%, 68.84%);
   --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(45, 100%, 59.59%);
   --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(45, 100%, 46.75%);
   --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(45, 100%, 33.39%);
   --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(354.25, 86.67%, 95.28%);
   --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.25, 56.37%, 88.86%);
   --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.25, 45.1%, 76.55%);
   --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.25, 51.44%, 63.7%);
   --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.25, 61.66%, 57.81%);
   --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: 354deg;
   --ig-error-s: 70%;
   --ig-error-l: 54%;
   --ig-error-a: 1;
+  --ig-error-500: hsl(354.25, 70.46%, 53.53%);
   --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(354.25, 88.78%, 47.64%);
   --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.25, 100%, 43.36%);
   --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.25, 100%, 39.08%);
   --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.25, 94.42%, 34.26%);
   --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.25, 86.67%, 71.73%);
   --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.25, 85.97%, 62.09%);
   --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.25, 86.67%, 48.71%);
   --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.25, 86.67%, 34.79%);
   --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);
 }
@@ -748,4 +868,204 @@ apex-grid {
 
 igc-combo::part(input) {
   --input-background: transparent;
+}
+
+igc-avatar,
+igc-avatar ig-avatar {
+  --background: var(--ig-avatar-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  --color: var(--ig-avatar-color, var(--ig-gray-200-contrast));
+  --border-radius: var(--ig-avatar-border-radius, 0.25rem);
+}
+
+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-primary-200), 0.5));
+  --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-primary-200), var(--ig-primary-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-primary-500), var(--ig-primary-a)));
+  --hover-background: var(--ig-button-hover-background, transparent);
+  --hover-foreground: var(--ig-button-hover-foreground, hsla(var(--ig-primary-800), var(--ig-primary-a)));
+  --focus-background: var(--ig-button-focus-background, transparent);
+  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --focus-visible-background: var(--ig-button-focus-visible-background, transparent);
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --active-background: var(--ig-button-active-background, transparent);
+  --active-foreground: var(--ig-button-active-foreground, hsla(var(--ig-primary-600), var(--ig-primary-a)));
+  --border-radius: var(--ig-button-border-radius, 0.25rem);
+}
+
+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-primary-200), 0.5));
+  --border-color: var(--ig-button-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --hover-border-color: var(--ig-button-hover-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --focus-border-color: var(--ig-button-focus-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --focus-visible-border-color: var(--ig-button-focus-visible-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --active-border-color: var(--ig-button-active-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --disabled-border-color: var(--ig-button-disabled-border-color, hsla(var(--ig-primary-900), var(--ig-primary-a)));
+  --disabled-background: var(--ig-button-disabled-background, transparent);
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --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-primary-500), var(--ig-primary-a)));
+  --hover-background: var(--ig-button-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --hover-foreground: var(--ig-button-hover-foreground, var(--ig-primary-600-contrast));
+  --focus-background: var(--ig-button-focus-background, transparent);
+  --focus-foreground: var(--ig-button-focus-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --focus-visible-background: var(--ig-button-focus-visible-background, transparent);
+  --focus-visible-foreground: var(--ig-button-focus-visible-foreground, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --active-foreground: var(--ig-button-active-foreground, var(--ig-primary-700-contrast));
+  --border-radius: var(--ig-button-border-radius, 0.25rem);
+}
+
+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-primary-200), var(--ig-primary-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-primary-50), var(--ig-primary-a)));
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-primary-200), var(--ig-primary-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-600-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-600-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-600-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-600-contrast));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --active-foreground: var(--ig-button-active-foreground, var(--ig-primary-700-contrast));
+  --border-radius: var(--ig-button-border-radius, 0.25rem);
+}
+
+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-primary-200), var(--ig-primary-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-primary-50), var(--ig-primary-a)));
+  --disabled-foreground: var(--ig-button-disabled-foreground, hsla(var(--ig-primary-200), var(--ig-primary-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-600-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-600-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-600-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-600-contrast));
+  --active-background: var(--ig-button-active-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --active-foreground: var(--ig-button-active-foreground, var(--ig-primary-700-contrast));
+  --border-radius: var(--ig-button-border-radius, 0.9375rem);
+}
+
+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, 'currentColor');
+}
+
+igc-navbar,
+igc-navbar ig-navbar {
+  --elevation: var(--ig-navbar-elevation, var(--ig-elevation-0));
+  --background: var(--ig-navbar-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --text-color: var(--ig-navbar-text-color, var(--ig-surface-500-contrast));
+  --idle-icon-color: var(--ig-navbar-idle-icon-color, var(--ig-surface-500-contrast));
+  --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-surface-500-contrast));
+}
+
+igc-checkbox,
+igc-checkbox ig-checkbox {
+  --tick-color: var(--ig-checkbox-tick-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --tick-color-hover: var(--ig-checkbox-tick-color-hover, hsla(var(--ig-gray-50), var(--ig-gray-a)));
+  --label-color: var(--ig-checkbox-label-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --empty-color: var(--ig-checkbox-empty-color, hsla(var(--ig-gray-500), 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-secondary-500), var(--ig-secondary-a)));
+  --disabled-color: var(--ig-checkbox-disabled-color, hsla(var(--ig-primary-200), var(--ig-primary-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-100), var(--ig-error-a)));
+  --border-radius: var(--ig-checkbox-border-radius, 0.25rem);
+  --border-radius-ripple: var(--ig-checkbox-border-radius-ripple, 0.25rem);
+  --focus-outline-color: var(--ig-checkbox-focus-outline-color, hsla(var(--ig-primary-200), var(--ig-primary-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-400), var(--ig-gray-a)));
+  --border-hover-color: var(--ig-switch-border-hover-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --border-disabled-color: var(--ig-switch-border-disabled-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --border-on-color: var(--ig-switch-border-on-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --border-on-hover-color: var(--ig-switch-border-on-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));
+  --thumb-on-color: var(--ig-switch-thumb-on-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --track-on-color: var(--ig-switch-track-on-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-off-color: var(--ig-switch-thumb-off-color, hsla(var(--ig-gray-400), 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-primary-200), var(--ig-primary-a)));
+  --track-off-color: var(--ig-switch-track-off-color, transparent);
+  --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-gray-900), var(--ig-gray-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-gray-900), var(--ig-gray-a)));
+  --error-color: var(--ig-switch-error-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --error-color-hover: var(--ig-switch-error-color-hover, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --border-radius-track: var(--ig-switch-border-radius-track, 2rem);
+  --border-radius-thumb: var(--ig-switch-border-radius-thumb, 2rem);
+  --border-radius-ripple: var(--ig-switch-border-radius-ripple, 1.5rem);
+  --focus-outline-color: var(--ig-switch-focus-outline-color, hsla(var(--ig-primary-100), var(--ig-primary-a)));
+  --track-on-hover-color: var(--ig-switch-track-on-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));
+  --focus-fill-color: var(--ig-switch-focus-fill-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+}
+
+igc-radio {
+  --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-500), var(--ig-gray-a)));
+  --fill-color: var(--ig-radio-fill-color, hsla(var(--ig-primary-500), var(--ig-primary-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-primary-200), var(--ig-primary-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-100), var(--ig-error-a)));
+  --focus-outline-color: var(--ig-radio-focus-outline-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
 }