vira 31.4.0 → 31.5.0

package/dist/elements/vira-button.element.js

@@ -159,36 +159,36 @@ const colorVariantColors = {
     [ViraColorVariant.Warning]: {
         [ViraEmphasis.Standard]: {
             idle: {
-                backgroundColor: viraTheme.colors['vira-orange-behind-bg-non-body'].background,
-                textColor: viraTheme.colors['vira-orange-behind-bg-non-body'].foreground,
-                borderColor: viraTheme.colors['vira-orange-behind-bg-body'].background,
+                backgroundColor: viraTheme.colors['vira-yellow-behind-bg-non-body'].background,
+                textColor: viraTheme.colors['vira-yellow-behind-bg-non-body'].foreground,
+                borderColor: viraTheme.colors['vira-yellow-behind-bg-body'].background,
             },
             hover: {
-                backgroundColor: viraTheme.colors['vira-orange-behind-bg-header'].background,
-                textColor: viraTheme.colors['vira-orange-behind-bg-header'].foreground,
-                borderColor: viraTheme.colors['vira-orange-behind-bg-body'].background,
+                backgroundColor: viraTheme.colors['vira-yellow-behind-bg-header'].background,
+                textColor: viraTheme.colors['vira-yellow-behind-bg-header'].foreground,
+                borderColor: viraTheme.colors['vira-yellow-behind-bg-body'].background,
             },
             active: {
-                backgroundColor: viraTheme.colors['vira-orange-behind-bg-body'].background,
-                textColor: viraTheme.colors['vira-orange-behind-bg-body'].foreground,
-                borderColor: viraTheme.colors['vira-orange-behind-bg-body'].background,
+                backgroundColor: viraTheme.colors['vira-yellow-behind-bg-body'].background,
+                textColor: viraTheme.colors['vira-yellow-behind-bg-body'].foreground,
+                borderColor: viraTheme.colors['vira-yellow-behind-bg-body'].background,
             },
         },
         [ViraEmphasis.Subtle]: {
             idle: {
                 backgroundColor: transparentColor,
-                textColor: viraTheme.colors['vira-orange-foreground-non-body'].foreground,
+                textColor: viraTheme.colors['vira-yellow-foreground-non-body'].foreground,
                 borderColor: transparentColor,
             },
             hover: {
-                backgroundColor: viraTheme.colors['vira-orange-on-self-body'].background,
-                textColor: viraTheme.colors['vira-orange-on-self-body'].foreground,
-                borderColor: viraTheme.colors['vira-orange-on-self-body'].foreground,
+                backgroundColor: viraTheme.colors['vira-yellow-on-self-body'].background,
+                textColor: viraTheme.colors['vira-yellow-on-self-body'].foreground,
+                borderColor: viraTheme.colors['vira-yellow-on-self-body'].foreground,
             },
             active: {
-                backgroundColor: viraTheme.colors['vira-orange-on-self-non-body'].background,
-                textColor: viraTheme.colors['vira-orange-on-self-non-body'].foreground,
-                borderColor: viraTheme.colors['vira-orange-on-self-non-body'].foreground,
+                backgroundColor: viraTheme.colors['vira-yellow-on-self-non-body'].background,
+                textColor: viraTheme.colors['vira-yellow-on-self-non-body'].foreground,
+                borderColor: viraTheme.colors['vira-yellow-on-self-non-body'].foreground,
             },
         },
     },

package/dist/elements/vira-icon.element.js

@@ -33,9 +33,12 @@ export const ViraIcon = defineViraElement()({
             vector-effect: non-scaling-stroke;
         }
 
-        ${hostClasses['vira-icon-fit-container'].selector} svg {
-            height: 100%;
-            width: 100%;
+        ${hostClasses['vira-icon-fit-container'].selector} {
+            > *,
+            svg {
+                height: 100%;
+                width: 100%;
+            }
         }
     `,
     render({ inputs, host }) {

package/dist/icons/feather-icons.d.ts

@@ -13,7 +13,7 @@ export type FeatherIconKey = keyof typeof featherIconsImported.icons;
  *
  * @category Internal
  */
-export type FeatherIconEntry = ViraIconSvg & ((options: Readonly<FeatherAttributes>) => ViraIconSvg);
+export type FeatherIconEntry = ViraIconSvg & ((options: Readonly<Partial<FeatherAttributes>>) => ViraIconSvg);
 /**
  * All [Feather icons](https://feathericons.com) in a format compatible with `ViraIcon`. Each icon
  * entry can be accessed directly or customized by calling it as a function.

package/dist/styles/form-styles.js

@@ -23,9 +23,9 @@ export const viraFormCssVars = defineCssVars({
     'vira-form-error-color': viraTheme.colors['vira-red-behind-bg-non-body'].background.value,
     'vira-form-error-hover-color': viraTheme.colors['vira-red-behind-bg-header'].background.value,
     'vira-form-error-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,
-    'vira-form-warning-color': viraTheme.colors['vira-orange-behind-bg-non-body'].background.value,
-    'vira-form-warning-hover-color': viraTheme.colors['vira-orange-behind-bg-header'].background.value,
-    'vira-form-warning-active-color': viraTheme.colors['vira-orange-behind-bg-body'].background.value,
+    'vira-form-warning-color': viraTheme.colors['vira-yellow-behind-bg-non-body'].background.value,
+    'vira-form-warning-hover-color': viraTheme.colors['vira-yellow-behind-bg-header'].background.value,
+    'vira-form-warning-active-color': viraTheme.colors['vira-yellow-behind-bg-body'].background.value,
     'vira-form-positive-color': viraTheme.colors['vira-green-behind-bg-non-body'].background.value,
     'vira-form-positive-hover-color': viraTheme.colors['vira-green-behind-bg-header'].background.value,
     'vira-form-positive-active-color': viraTheme.colors['vira-green-behind-bg-body'].background.value,
@@ -38,7 +38,7 @@ export const viraFormCssVars = defineCssVars({
     'vira-form-wrapper-radius': '16px',
     'vira-form-focus-outline-color': viraTheme.colors['vira-accent-foreground-header'].foreground.value,
     'vira-form-focus-outline-border-radius': css `calc(var(--vira-form-radius, ${unsafeCSS(defaultViraFormRadius)}) + 2px)`,
-    'vira-form-plain-color': viraColorPalette['vira-grey-0'].value,
+    'vira-form-plain-color': viraColorPalette['vira-grey-100'].value,
     'vira-form-plain-hover-color': viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
     'vira-form-plain-active-color': viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
     'vira-form-accent-primary-color': viraTheme.colors['vira-accent-behind-bg-non-body'].background.value,

package/dist/styles/form-variants.js

@@ -38,7 +38,7 @@ export const viraColorVariantToColorName = {
     [ViraColorVariant.Accent]: ViraThemeColorName.blue,
     [ViraColorVariant.Neutral]: ViraThemeColorName.grey,
     [ViraColorVariant.Danger]: ViraThemeColorName.red,
-    [ViraColorVariant.Warning]: ViraThemeColorName.orange,
+    [ViraColorVariant.Warning]: ViraThemeColorName.yellow,
     [ViraColorVariant.Positive]: ViraThemeColorName.green,
 };
 /**

package/dist/styles/vira-color-palette.d.ts

@@ -4,105 +4,351 @@
  * @category Color
  */
 export declare const viraColorPalette: import("lit-css-vars").CssVarDefinitions<{
-    readonly 'vira-red-5': "#ffe9e6";
-    readonly 'vira-red-10': "#ffd9d5";
-    readonly 'vira-red-20': "#ffc1bc";
-    readonly 'vira-red-30': "#ffa7a2";
-    readonly 'vira-red-40': "#ff8886";
-    readonly 'vira-red-50': "#ff6065";
-    readonly 'vira-red-60': "#f9163a";
-    readonly 'vira-red-70': "#d2001d";
-    readonly 'vira-red-80': "#a60012";
-    readonly 'vira-red-90': "#760003";
-    readonly 'vira-orange-5': "#ffebd1";
-    readonly 'vira-orange-10': "#ffdda3";
-    readonly 'vira-orange-20': "#ffc66c";
-    readonly 'vira-orange-30': "#ffac36";
-    readonly 'vira-orange-40': "#f79300";
-    readonly 'vira-orange-50': "#e17e00";
-    readonly 'vira-orange-60': "#c96900";
-    readonly 'vira-orange-70': "#ab5600";
-    readonly 'vira-orange-80': "#8b4100";
-    readonly 'vira-orange-90': "#6a2500";
-    readonly 'vira-yellow-5': "#f7eeca";
-    readonly 'vira-yellow-10': "#f6e192";
-    readonly 'vira-yellow-20': "#f2cd20";
-    readonly 'vira-yellow-30': "#dfbb00";
-    readonly 'vira-yellow-40': "#cca800";
-    readonly 'vira-yellow-50': "#b59500";
-    readonly 'vira-yellow-60': "#9d8100";
-    readonly 'vira-yellow-70': "#856b00";
-    readonly 'vira-yellow-80': "#6a5400";
-    readonly 'vira-yellow-90': "#4c3b00";
-    readonly 'vira-green-5': "#d3f8cf";
-    readonly 'vira-green-10': "#a3f59b";
-    readonly 'vira-green-20': "#4fed46";
-    readonly 'vira-green-30': "#36d92e";
-    readonly 'vira-green-40': "#0dc501";
-    readonly 'vira-green-50': "#00af00";
-    readonly 'vira-green-60': "#009800";
-    readonly 'vira-green-70': "#007f00";
-    readonly 'vira-green-80': "#006400";
-    readonly 'vira-green-90': "#004700";
-    readonly 'vira-teal-5': "#d4f5f3";
-    readonly 'vira-teal-10': "#a1efeb";
-    readonly 'vira-teal-20': "#45e5de";
-    readonly 'vira-teal-30': "#2ad2cc";
-    readonly 'vira-teal-40': "#04beb8";
-    readonly 'vira-teal-50': "#00a9a3";
-    readonly 'vira-teal-60': "#00928d";
-    readonly 'vira-teal-70': "#007a77";
-    readonly 'vira-teal-80': "#00615e";
-    readonly 'vira-teal-90': "#004442";
-    readonly 'vira-blue-5': "#daf2ff";
-    readonly 'vira-blue-10': "#bde8ff";
-    readonly 'vira-blue-20': "#98d8ff";
-    readonly 'vira-blue-30': "#77c6ff";
-    readonly 'vira-blue-40': "#4cb2ff";
-    readonly 'vira-blue-50': "#299cf9";
-    readonly 'vira-blue-60': "#0086e0";
-    readonly 'vira-blue-70': "#006ec7";
-    readonly 'vira-blue-80': "#0054aa";
-    readonly 'vira-blue-90': "#00358a";
-    readonly 'vira-accent-5': "#daf2ff";
-    readonly 'vira-accent-10': "#bde8ff";
-    readonly 'vira-accent-20': "#98d8ff";
-    readonly 'vira-accent-30': "#77c6ff";
-    readonly 'vira-accent-40': "#4cb2ff";
-    readonly 'vira-accent-50': "#299cf9";
-    readonly 'vira-accent-60': "#0086e0";
-    readonly 'vira-accent-70': "#006ec7";
-    readonly 'vira-accent-80': "#0054aa";
-    readonly 'vira-accent-90': "#00358a";
-    readonly 'vira-purple-5': "#f6eaff";
-    readonly 'vira-purple-10': "#eddaff";
-    readonly 'vira-purple-20': "#e6c3ff";
-    readonly 'vira-purple-30': "#d7adff";
-    readonly 'vira-purple-40': "#c795ff";
-    readonly 'vira-purple-50': "#b77aff";
-    readonly 'vira-purple-60': "#a55aff";
-    readonly 'vira-purple-70': "#8f3de9";
-    readonly 'vira-purple-80': "#7514cb";
-    readonly 'vira-purple-90': "#500095";
-    readonly 'vira-pink-5': "#ffe7fb";
-    readonly 'vira-pink-10': "#ffd5fa";
-    readonly 'vira-pink-20': "#ffbaf4";
-    readonly 'vira-pink-30': "#ff9ee6";
-    readonly 'vira-pink-40': "#fa82cc";
-    readonly 'vira-pink-50': "#e46eb7";
-    readonly 'vira-pink-60': "#cc59a2";
-    readonly 'vira-pink-70': "#b2418b";
-    readonly 'vira-pink-80': "#962471";
-    readonly 'vira-pink-90': "#6e004f";
-    readonly 'vira-grey-0': "#f3f6f6";
-    readonly 'vira-grey-5': "#eceff0";
-    readonly 'vira-grey-10': "#dce2e6";
-    readonly 'vira-grey-20': "#c7d2d7";
-    readonly 'vira-grey-30': "#b6c0c5";
-    readonly 'vira-grey-40': "#a4adb2";
-    readonly 'vira-grey-50': "#909a9f";
-    readonly 'vira-grey-60': "#7c868a";
-    readonly 'vira-grey-70': "#677074";
-    readonly 'vira-grey-80': "#50595d";
-    readonly 'vira-grey-90': "#363f43";
+    readonly 'vira-red-100': "#FFF6F5";
+    readonly 'vira-red-150': "#FFEDEB";
+    readonly 'vira-red-200': "#FFE4E1";
+    readonly 'vira-red-250': "#FFDCD8";
+    readonly 'vira-red-300': "#FFD1CB";
+    readonly 'vira-red-350': "#FFC1B8";
+    readonly 'vira-red-400': "#FFA79B";
+    readonly 'vira-red-450': "#FF8274";
+    readonly 'vira-red-500': "#FF564A";
+    readonly 'vira-red-550': "#F43A32";
+    readonly 'vira-red-600': "#E2322C";
+    readonly 'vira-red-650': "#D02C27";
+    readonly 'vira-red-700': "#BB2520";
+    readonly 'vira-red-750': "#9E231D";
+    readonly 'vira-red-800': "#82211A";
+    readonly 'vira-red-850': "#701A13";
+    readonly 'vira-red-900': "#611710";
+    readonly 'vira-red-950': "#52140D";
+    readonly 'vira-red-1000': "#43130D";
+    readonly 'vira-yellow-100': "#FEF9E4";
+    readonly 'vira-yellow-150': "#FDF2D1";
+    readonly 'vira-yellow-200': "#FDEABF";
+    readonly 'vira-yellow-250': "#FEE2AD";
+    readonly 'vira-yellow-300': "#FDD89B";
+    readonly 'vira-yellow-350': "#FAC986";
+    readonly 'vira-yellow-400': "#EFB669";
+    readonly 'vira-yellow-450': "#E29D34";
+    readonly 'vira-yellow-500': "#CE8800";
+    readonly 'vira-yellow-550': "#BB7B00";
+    readonly 'vira-yellow-600': "#AC7100";
+    readonly 'vira-yellow-650': "#9E6800";
+    readonly 'vira-yellow-700': "#8C5C00";
+    readonly 'vira-yellow-750': "#794D00";
+    readonly 'vira-yellow-800': "#683E00";
+    readonly 'vira-yellow-850': "#5B3301";
+    readonly 'vira-yellow-900': "#502A05";
+    readonly 'vira-yellow-950': "#442308";
+    readonly 'vira-yellow-1000': "#381D0B";
+    readonly 'vira-green-100': "#EBFFEE";
+    readonly 'vira-green-150': "#DDFBE2";
+    readonly 'vira-green-200': "#CDF8D6";
+    readonly 'vira-green-250': "#BFF5CC";
+    readonly 'vira-green-300': "#AFF0C0";
+    readonly 'vira-green-350': "#9AE8B1";
+    readonly 'vira-green-400': "#7FD99C";
+    readonly 'vira-green-450': "#52C87F";
+    readonly 'vira-green-500': "#1BB565";
+    readonly 'vira-green-550': "#04A559";
+    readonly 'vira-green-600': "#009852";
+    readonly 'vira-green-650': "#008C4A";
+    readonly 'vira-green-700': "#007C41";
+    readonly 'vira-green-750': "#016A38";
+    readonly 'vira-green-800': "#095831";
+    readonly 'vira-green-850': "#024B29";
+    readonly 'vira-green-900': "#014024";
+    readonly 'vira-green-950': "#02371F";
+    readonly 'vira-green-1000': "#062D1B";
+    readonly 'vira-teal-100': "#E8FEFD";
+    readonly 'vira-teal-150': "#D9FAF8";
+    readonly 'vira-teal-200': "#C9F6F3";
+    readonly 'vira-teal-250': "#BAF2ED";
+    readonly 'vira-teal-300': "#A9EDE6";
+    readonly 'vira-teal-350': "#95E4DB";
+    readonly 'vira-teal-400': "#79D5CA";
+    readonly 'vira-teal-450': "#47C3B7";
+    readonly 'vira-teal-500': "#00B0A4";
+    readonly 'vira-teal-550': "#00A094";
+    readonly 'vira-teal-600': "#009389";
+    readonly 'vira-teal-650': "#00877D";
+    readonly 'vira-teal-700': "#00786F";
+    readonly 'vira-teal-750': "#00665F";
+    readonly 'vira-teal-800': "#01554F";
+    readonly 'vira-teal-850': "#004843";
+    readonly 'vira-teal-900': "#003E3A";
+    readonly 'vira-teal-950': "#033531";
+    readonly 'vira-teal-1000': "#072B29";
+    readonly 'vira-blue-100': "#F5F9FF";
+    readonly 'vira-blue-150': "#EAF3FF";
+    readonly 'vira-blue-200': "#E0EDFF";
+    readonly 'vira-blue-250': "#D6E7FF";
+    readonly 'vira-blue-300': "#CBDFFF";
+    readonly 'vira-blue-350': "#B9D4FF";
+    readonly 'vira-blue-400': "#9EC3FF";
+    readonly 'vira-blue-450': "#7AADFF";
+    readonly 'vira-blue-500': "#5697FF";
+    readonly 'vira-blue-550': "#4988ED";
+    readonly 'vira-blue-600': "#427DDC";
+    readonly 'vira-blue-650': "#3B72CA";
+    readonly 'vira-blue-700': "#3365B6";
+    readonly 'vira-blue-750': "#2D569A";
+    readonly 'vira-blue-800': "#27487E";
+    readonly 'vira-blue-850': "#203D6C";
+    readonly 'vira-blue-900': "#1B345D";
+    readonly 'vira-blue-950': "#172C4F";
+    readonly 'vira-blue-1000': "#142540";
+    readonly 'vira-accent-100': "#F5F9FF";
+    readonly 'vira-accent-150': "#EAF3FF";
+    readonly 'vira-accent-200': "#E0EDFF";
+    readonly 'vira-accent-250': "#D6E7FF";
+    readonly 'vira-accent-300': "#CBDFFF";
+    readonly 'vira-accent-350': "#B9D4FF";
+    readonly 'vira-accent-400': "#9EC3FF";
+    readonly 'vira-accent-450': "#7AADFF";
+    readonly 'vira-accent-500': "#5697FF";
+    readonly 'vira-accent-550': "#4988ED";
+    readonly 'vira-accent-600': "#427DDC";
+    readonly 'vira-accent-650': "#3B72CA";
+    readonly 'vira-accent-700': "#3365B6";
+    readonly 'vira-accent-750': "#2D569A";
+    readonly 'vira-accent-800': "#27487E";
+    readonly 'vira-accent-850': "#203D6C";
+    readonly 'vira-accent-900': "#1B345D";
+    readonly 'vira-accent-950': "#172C4F";
+    readonly 'vira-accent-1000': "#142540";
+    readonly 'vira-purple-100': "#F9F7FF";
+    readonly 'vira-purple-150': "#F3EFFF";
+    readonly 'vira-purple-200': "#EDE8FF";
+    readonly 'vira-purple-250': "#E6E1FF";
+    readonly 'vira-purple-300': "#DED8FF";
+    readonly 'vira-purple-350': "#D2CBFF";
+    readonly 'vira-purple-400': "#C1B7FF";
+    readonly 'vira-purple-450': "#AD9BFF";
+    readonly 'vira-purple-500': "#9B80FF";
+    readonly 'vira-purple-550': "#8D6EF4";
+    readonly 'vira-purple-600': "#8265E3";
+    readonly 'vira-purple-650': "#775BD1";
+    readonly 'vira-purple-700': "#6A50BB";
+    readonly 'vira-purple-750': "#5A459E";
+    readonly 'vira-purple-800': "#4A3B82";
+    readonly 'vira-purple-850': "#3E3170";
+    readonly 'vira-purple-900': "#352A61";
+    readonly 'vira-purple-950': "#2D2452";
+    readonly 'vira-purple-1000': "#251F43";
+    readonly 'vira-pink-100': "#FEF5FF";
+    readonly 'vira-pink-150': "#FFEAFF";
+    readonly 'vira-pink-200': "#FFE0FC";
+    readonly 'vira-pink-250': "#FFD7F8";
+    readonly 'vira-pink-300': "#FFCBF2";
+    readonly 'vira-pink-350': "#FFB9E9";
+    readonly 'vira-pink-400': "#FF9BDF";
+    readonly 'vira-pink-450': "#FF6DD6";
+    readonly 'vira-pink-500': "#F04AC5";
+    readonly 'vira-pink-550': "#DD3EB4";
+    readonly 'vira-pink-600': "#CC37A7";
+    readonly 'vira-pink-650': "#BC3099";
+    readonly 'vira-pink-700': "#A82988";
+    readonly 'vira-pink-750': "#8F2674";
+    readonly 'vira-pink-800': "#752361";
+    readonly 'vira-pink-850': "#641C53";
+    readonly 'vira-pink-900': "#561848";
+    readonly 'vira-pink-950': "#49153E";
+    readonly 'vira-pink-1000': "#3B1333";
+    readonly 'vira-grey-100': "#F9F9F9";
+    readonly 'vira-grey-150': "#F2F2F2";
+    readonly 'vira-grey-200': "#EBEBEB";
+    readonly 'vira-grey-250': "#E5E5E5";
+    readonly 'vira-grey-300': "#DEDEDE";
+    readonly 'vira-grey-350': "#D2D2D2";
+    readonly 'vira-grey-400': "#C2C2C2";
+    readonly 'vira-grey-450': "#ADADAD";
+    readonly 'vira-grey-500': "#999999";
+    readonly 'vira-grey-550': "#8A8A8A";
+    readonly 'vira-grey-600': "#7F7F7F";
+    readonly 'vira-grey-650': "#747474";
+    readonly 'vira-grey-700': "#676767";
+    readonly 'vira-grey-750': "#585858";
+    readonly 'vira-grey-800': "#494949";
+    readonly 'vira-grey-850': "#3E3E3E";
+    readonly 'vira-grey-900': "#353535";
+    readonly 'vira-grey-950': "#2D2D2D";
+    readonly 'vira-grey-1000': "#252525";
 }>;
+/**
+ * JSON for easy copying
+ *
+ * ```json
+ * {
+ *     "Blue": {
+ *         "100": "#F5F9FF",
+ *         "1000": "#142540",
+ *         "150": "#EAF3FF",
+ *         "200": "#E0EDFF",
+ *         "250": "#D6E7FF",
+ *         "300": "#CBDFFF",
+ *         "350": "#B9D4FF",
+ *         "400": "#9EC3FF",
+ *         "450": "#7AADFF",
+ *         "500": "#5697FF",
+ *         "550": "#4988ED",
+ *         "600": "#427DDC",
+ *         "650": "#3B72CA",
+ *         "700": "#3365B6",
+ *         "750": "#2D569A",
+ *         "800": "#27487E",
+ *         "850": "#203D6C",
+ *         "900": "#1B345D",
+ *         "950": "#172C4F"
+ *     },
+ *     "Green": {
+ *         "100": "#EBFFEE",
+ *         "1000": "#062D1B",
+ *         "150": "#DDFBE2",
+ *         "200": "#CDF8D6",
+ *         "250": "#BFF5CC",
+ *         "300": "#AFF0C0",
+ *         "350": "#9AE8B1",
+ *         "400": "#7FD99C",
+ *         "450": "#52C87F",
+ *         "500": "#1BB565",
+ *         "550": "#04A559",
+ *         "600": "#009852",
+ *         "650": "#008C4A",
+ *         "700": "#007C41",
+ *         "750": "#016A38",
+ *         "800": "#095831",
+ *         "850": "#024B29",
+ *         "900": "#014024",
+ *         "950": "#02371F"
+ *     },
+ *     "Pink": {
+ *         "100": "#FEF5FF",
+ *         "1000": "#3B1333",
+ *         "150": "#FFEAFF",
+ *         "200": "#FFE0FC",
+ *         "250": "#FFD7F8",
+ *         "300": "#FFCBF2",
+ *         "350": "#FFB9E9",
+ *         "400": "#FF9BDF",
+ *         "450": "#FF6DD6",
+ *         "500": "#F04AC5",
+ *         "550": "#DD3EB4",
+ *         "600": "#CC37A7",
+ *         "650": "#BC3099",
+ *         "700": "#A82988",
+ *         "750": "#8F2674",
+ *         "800": "#752361",
+ *         "850": "#641C53",
+ *         "900": "#561848",
+ *         "950": "#49153E"
+ *     },
+ *     "Purple": {
+ *         "100": "#F9F7FF",
+ *         "1000": "#251F43",
+ *         "150": "#F3EFFF",
+ *         "200": "#EDE8FF",
+ *         "250": "#E6E1FF",
+ *         "300": "#DED8FF",
+ *         "350": "#D2CBFF",
+ *         "400": "#C1B7FF",
+ *         "450": "#AD9BFF",
+ *         "500": "#9B80FF",
+ *         "550": "#8D6EF4",
+ *         "600": "#8265E3",
+ *         "650": "#775BD1",
+ *         "700": "#6A50BB",
+ *         "750": "#5A459E",
+ *         "800": "#4A3B82",
+ *         "850": "#3E3170",
+ *         "900": "#352A61",
+ *         "950": "#2D2452"
+ *     },
+ *     "Red": {
+ *         "100": "#FFF6F5",
+ *         "1000": "#43130D",
+ *         "150": "#FFEDEB",
+ *         "200": "#FFE4E1",
+ *         "250": "#FFDCD8",
+ *         "300": "#FFD1CB",
+ *         "350": "#FFC1B8",
+ *         "400": "#FFA79B",
+ *         "450": "#FF8274",
+ *         "500": "#FF564A",
+ *         "550": "#F43A32",
+ *         "600": "#E2322C",
+ *         "650": "#D02C27",
+ *         "700": "#BB2520",
+ *         "750": "#9E231D",
+ *         "800": "#82211A",
+ *         "850": "#701A13",
+ *         "900": "#611710",
+ *         "950": "#52140D"
+ *     },
+ *     "Slate": {
+ *         "100": "#F9F9F9",
+ *         "1000": "#252525",
+ *         "150": "#F2F2F2",
+ *         "200": "#EBEBEB",
+ *         "250": "#E5E5E5",
+ *         "300": "#DEDEDE",
+ *         "350": "#D2D2D2",
+ *         "400": "#C2C2C2",
+ *         "450": "#ADADAD",
+ *         "500": "#999999",
+ *         "550": "#8A8A8A",
+ *         "600": "#7F7F7F",
+ *         "650": "#747474",
+ *         "700": "#676767",
+ *         "750": "#585858",
+ *         "800": "#494949",
+ *         "850": "#3E3E3E",
+ *         "900": "#353535",
+ *         "950": "#2D2D2D"
+ *     },
+ *     "Teal": {
+ *         "100": "#E8FEFD",
+ *         "1000": "#072B29",
+ *         "150": "#D9FAF8",
+ *         "200": "#C9F6F3",
+ *         "250": "#BAF2ED",
+ *         "300": "#A9EDE6",
+ *         "350": "#95E4DB",
+ *         "400": "#79D5CA",
+ *         "450": "#47C3B7",
+ *         "500": "#00B0A4",
+ *         "550": "#00A094",
+ *         "600": "#009389",
+ *         "650": "#00877D",
+ *         "700": "#00786F",
+ *         "750": "#00665F",
+ *         "800": "#01554F",
+ *         "850": "#004843",
+ *         "900": "#003E3A",
+ *         "950": "#033531"
+ *     },
+ *     "Yellow": {
+ *         "100": "#FEF9E4",
+ *         "1000": "#381D0B",
+ *         "150": "#FDF2D1",
+ *         "200": "#FDEABF",
+ *         "250": "#FEE2AD",
+ *         "300": "#FDD89B",
+ *         "350": "#FAC986",
+ *         "400": "#EFB669",
+ *         "450": "#E29D34",
+ *         "500": "#CE8800",
+ *         "550": "#BB7B00",
+ *         "600": "#AC7100",
+ *         "650": "#9E6800",
+ *         "700": "#8C5C00",
+ *         "750": "#794D00",
+ *         "800": "#683E00",
+ *         "850": "#5B3301",
+ *         "900": "#502A05",
+ *         "950": "#442308"
+ *     }
+ * }
+ * ```
+ */