vira 28.19.6 → 29.0.0

package/dist/styles/form-styles.d.ts

@@ -0,0 +1,123 @@
+import { CssVarSyntaxName } from 'lit-css-vars';
+/**
+ * CSS vars for vira form elements.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
+export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
+    readonly 'vira-form-border-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-placeholder-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-background-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-foreground-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-modal-backdrop-color': "rgba(0, 0, 0, 0.35)";
+    readonly 'vira-form-secondary-body-foreground': {
+        readonly syntax: CssVarSyntaxName.Color;
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+    };
+    readonly 'vira-form-text-selection-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-selection-hover-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-selection-active-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-error-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-error-hover-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-error-active-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-success-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-label-font-weight': "bold";
+    readonly 'vira-form-radius': "8px";
+    readonly 'vira-form-wrapper-radius': "16px";
+    readonly 'vira-form-focus-outline-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-focus-outline-border-radius': {
+        readonly initialValue: "10px";
+        readonly default: import("element-vir").CSSResult;
+        readonly syntax: CssVarSyntaxName.Length;
+    };
+    readonly 'vira-form-accent-primary-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-accent-primary-hover-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-accent-primary-active-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-danger-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-danger-hover-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-danger-active-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-filled-background-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+    readonly 'vira-form-filled-active-background-color': {
+        readonly default: import("element-vir").CSSResult;
+        readonly initialValue: "transparent";
+        readonly syntax: CssVarSyntaxName.Color;
+    };
+}>;

package/dist/styles/form-styles.js

@@ -0,0 +1,126 @@
+import { css } from 'element-vir';
+import { CssVarSyntaxName, defineCssVars } from 'lit-css-vars';
+import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
+import { viraTheme } from './vira-color-theme.js';
+/**
+ * CSS vars for vira form elements.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
+export const viraFormCssVars = defineCssVars({
+    'vira-form-border-color': {
+        default: viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-placeholder-color': {
+        default: viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-background-color': {
+        default: viraTheme.colors[themeDefaultKey].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-foreground-color': {
+        default: viraTheme.colors[themeDefaultKey].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-modal-backdrop-color': 'rgba(0, 0, 0, 0.35)',
+    'vira-form-secondary-body-foreground': {
+        syntax: CssVarSyntaxName.Color,
+        default: viraTheme.colors['vira-grey-foreground-header'].foreground.value,
+        initialValue: 'transparent',
+    },
+    'vira-form-text-selection-color': {
+        default: viraTheme.colors['vira-blue-background-decoration'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-selection-hover-color': {
+        default: viraTheme.colors['vira-blue-background-invisible'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-selection-active-color': {
+        default: viraTheme.colors['vira-blue-background-decoration'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-error-color': {
+        default: viraTheme.colors['vira-red-background-non-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-error-hover-color': {
+        default: viraTheme.colors['vira-red-background-header'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-error-active-color': {
+        default: viraTheme.colors['vira-red-background-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-success-color': {
+        default: viraTheme.colors['vira-green-background-non-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-label-font-weight': 'bold',
+    'vira-form-radius': '8px',
+    'vira-form-wrapper-radius': '16px',
+    'vira-form-focus-outline-color': {
+        default: viraTheme.colors['vira-blue-foreground-header'].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-focus-outline-border-radius': {
+        initialValue: '10px',
+        default: css `calc(var(--vira-form-input-radius) + 2px)`,
+        syntax: CssVarSyntaxName.Length,
+    },
+    'vira-form-accent-primary-color': {
+        default: viraTheme.colors['vira-blue-background-non-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-accent-primary-hover-color': {
+        default: viraTheme.colors['vira-blue-background-header'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-accent-primary-active-color': {
+        default: viraTheme.colors['vira-blue-background-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-danger-color': {
+        default: viraTheme.colors['vira-red-background-non-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-danger-hover-color': {
+        default: viraTheme.colors['vira-red-background-header'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-danger-active-color': {
+        default: viraTheme.colors['vira-red-background-body'].background.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-filled-background-color': {
+        default: viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+    'vira-form-filled-active-background-color': {
+        default: viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
+        initialValue: 'transparent',
+        syntax: CssVarSyntaxName.Color,
+    },
+});

package/{src/styles/index.ts → dist/styles/index.d.ts}

@@ -1,6 +1,4 @@
 /** This file is automatically updated by update-index-exports.ts */
-
-export * from './border.js';
 export * from './disabled.js';
 export * from './durations.js';
 export * from './focus.js';

package/dist/styles/index.js

@@ -0,0 +1,12 @@
+/** This file is automatically updated by update-index-exports.ts */
+export * from './disabled.js';
+export * from './durations.js';
+export * from './focus.js';
+export * from './font.js';
+export * from './form-styles.js';
+export * from './native-styles.js';
+export * from './scrollbar.js';
+export * from './shadows.js';
+export * from './user-select.js';
+export * from './vira-color-palette.js';
+export * from './vira-color-theme.js';

package/dist/styles/native-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A chunk of CSS that succinctly removes all padding and margin from an element.
+ *
+ * @category Styles
+ */
+export declare const noNativeSpacing: import("element-vir").CSSResult;
+/**
+ * A chunk of CSS that succinctly removes all default built-in form element styles. This is
+ * particularly useful for `<button>` elements.
+ *
+ * @category Styles
+ */
+export declare const noNativeFormStyles: import("element-vir").CSSResult;

package/{src/styles/native-styles.ts → dist/styles/native-styles.js}

@@ -1,24 +1,21 @@
-import {css} from 'element-vir';
-
+import { css } from 'element-vir';
 /**
  * A chunk of CSS that succinctly removes all padding and margin from an element.
  *
  * @category Styles
  */
-export const noNativeSpacing = css`
+export const noNativeSpacing = css `
     padding: 0;
     margin: 0;
 `;
-
 /**
  * A chunk of CSS that succinctly removes all default built-in form element styles. This is
  * particularly useful for `<button>` elements.
  *
  * @category Styles
  */
-export const noNativeFormStyles = css`
+export const noNativeFormStyles = css `
     ${noNativeSpacing};
-    cursor: unset;
     background: none;
     border: none;
     font: inherit;

package/dist/styles/scrollbar.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A function that generates CSS to hide scrollbars for the given CSS selector.
+ *
+ * @category Styles
+ */
+export declare function hideScrollbars(selector: string): import("element-vir").CSSResult;

package/{src/styles/scrollbar.ts → dist/styles/scrollbar.js}

@@ -1,12 +1,11 @@
-import {css, unsafeCSS} from 'element-vir';
-
+import { css, unsafeCSS } from 'element-vir';
 /**
  * A function that generates CSS to hide scrollbars for the given CSS selector.
  *
  * @category Styles
  */
-export function hideScrollbars(selector: string) {
-    return css`
+export function hideScrollbars(selector) {
+    return css `
         ${unsafeCSS(selector)} {
             /* hide scrollbars in Firefox */
             scrollbar-width: none;

package/dist/styles/shadows.d.ts

@@ -0,0 +1,20 @@
+import { type CSSResult } from 'element-vir';
+/**
+ * CSS Vars for shadows.
+ *
+ * @category Styles
+ */
+export declare const shadowCssVars: import("lit-css-vars").CssVarDefinitions<{
+    readonly 'menu-shadow-color': "#e2e2e2";
+    readonly 'modal-shadow-color': "#4f4f4f";
+}>;
+/**
+ * CSS chunks for default Vira shadow styles.
+ *
+ * @category Styles
+ */
+export declare const viraShadows: {
+    readonly menuShadow: CSSResult;
+    readonly menuShadowReversed: CSSResult;
+    readonly modal: CSSResult;
+};

package/{src/styles/shadows.ts → dist/styles/shadows.js}

@@ -1,6 +1,5 @@
-import {type CSSResult, css} from 'element-vir';
-import {defineCssVars} from 'lit-css-vars';
-
+import { css } from 'element-vir';
+import { defineCssVars } from 'lit-css-vars';
 /**
  * CSS Vars for shadows.
  *
@@ -10,28 +9,27 @@ export const shadowCssVars = defineCssVars({
     'menu-shadow-color': '#e2e2e2',
     'modal-shadow-color': '#4f4f4f',
 });
-
 /**
  * CSS chunks for default Vira shadow styles.
  *
  * @category Styles
  */
 export const viraShadows = {
-    menuShadow: css`
+    menuShadow: css `
         filter: drop-shadow(0px 5px 5px ${shadowCssVars['menu-shadow-color'].value});
         /*
            This helps force the drop shadow to re-render when the element moves or the page changes.
        */
         will-change: filter;
     `,
-    menuShadowReversed: css`
+    menuShadowReversed: css `
         filter: drop-shadow(0px -5px 5px ${shadowCssVars['menu-shadow-color'].value});
         /*
            This helps force the drop shadow to re-render when the element moves or the page changes.
        */
         will-change: filter;
     `,
-    modal: css`
+    modal: css `
         box-shadow: 0 5px 15px ${shadowCssVars['modal-shadow-color'].value};
     `,
-} as const satisfies Record<string, CSSResult>;
+};

package/dist/styles/user-select.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A chunk of CSS that disables user selection.
+ *
+ * @category Styles
+ */
+export declare const noUserSelect: import("element-vir").CSSResult;

package/{src/styles/user-select.ts → dist/styles/user-select.js}

@@ -1,11 +1,10 @@
-import {css} from 'element-vir';
-
+import { css } from 'element-vir';
 /**
  * A chunk of CSS that disables user selection.
  *
  * @category Styles
  */
-export const noUserSelect = css`
+export const noUserSelect = css `
     /* iOS Safari */
     -webkit-touch-callout: none;
     /* Safari */

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

@@ -0,0 +1,97 @@
+/**
+ * The base Vira color theme palette.
+ *
+ * @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-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-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";
+}>;

package/dist/styles/vira-color-palette.js

@@ -0,0 +1,98 @@
+import { defineCssVars } from 'lit-css-vars';
+/**
+ * The base Vira color theme palette.
+ *
+ * @category Color
+ */
+export const viraColorPalette = defineCssVars({
+    'vira-red-5': '#ffe9e6',
+    'vira-red-10': '#ffd9d5',
+    'vira-red-20': '#ffc1bc',
+    'vira-red-30': '#ffa7a2',
+    'vira-red-40': '#ff8886',
+    'vira-red-50': '#ff6065',
+    'vira-red-60': '#f9163a',
+    'vira-red-70': '#d2001d',
+    'vira-red-80': '#a60012',
+    'vira-red-90': '#760003',
+    'vira-orange-5': '#ffebd1',
+    'vira-orange-10': '#ffdda3',
+    'vira-orange-20': '#ffc66c',
+    'vira-orange-30': '#ffac36',
+    'vira-orange-40': '#f79300',
+    'vira-orange-50': '#e17e00',
+    'vira-orange-60': '#c96900',
+    'vira-orange-70': '#ab5600',
+    'vira-orange-80': '#8b4100',
+    'vira-orange-90': '#6a2500',
+    'vira-yellow-5': '#f7eeca',
+    'vira-yellow-10': '#f6e192',
+    'vira-yellow-20': '#f2cd20',
+    'vira-yellow-30': '#dfbb00',
+    'vira-yellow-40': '#cca800',
+    'vira-yellow-50': '#b59500',
+    'vira-yellow-60': '#9d8100',
+    'vira-yellow-70': '#856b00',
+    'vira-yellow-80': '#6a5400',
+    'vira-yellow-90': '#4c3b00',
+    'vira-green-5': '#d3f8cf',
+    'vira-green-10': '#a3f59b',
+    'vira-green-20': '#4fed46',
+    'vira-green-30': '#36d92e',
+    'vira-green-40': '#0dc501',
+    'vira-green-50': '#00af00',
+    'vira-green-60': '#009800',
+    'vira-green-70': '#007f00',
+    'vira-green-80': '#006400',
+    'vira-green-90': '#004700',
+    'vira-teal-5': '#d4f5f3',
+    'vira-teal-10': '#a1efeb',
+    'vira-teal-20': '#45e5de',
+    'vira-teal-30': '#2ad2cc',
+    'vira-teal-40': '#04beb8',
+    'vira-teal-50': '#00a9a3',
+    'vira-teal-60': '#00928d',
+    'vira-teal-70': '#007a77',
+    'vira-teal-80': '#00615e',
+    'vira-teal-90': '#004442',
+    'vira-blue-5': '#daf2ff',
+    'vira-blue-10': '#bde8ff',
+    'vira-blue-20': '#98d8ff',
+    'vira-blue-30': '#77c6ff',
+    'vira-blue-40': '#4cb2ff',
+    'vira-blue-50': '#299cf9',
+    'vira-blue-60': '#0086e0',
+    'vira-blue-70': '#006ec7',
+    'vira-blue-80': '#0054aa',
+    'vira-blue-90': '#00358a',
+    'vira-purple-5': '#f6eaff',
+    'vira-purple-10': '#eddaff',
+    'vira-purple-20': '#e6c3ff',
+    'vira-purple-30': '#d7adff',
+    'vira-purple-40': '#c795ff',
+    'vira-purple-50': '#b77aff',
+    'vira-purple-60': '#a55aff',
+    'vira-purple-70': '#8f3de9',
+    'vira-purple-80': '#7514cb',
+    'vira-purple-90': '#500095',
+    'vira-pink-5': '#ffe7fb',
+    'vira-pink-10': '#ffd5fa',
+    'vira-pink-20': '#ffbaf4',
+    'vira-pink-30': '#ff9ee6',
+    'vira-pink-40': '#fa82cc',
+    'vira-pink-50': '#e46eb7',
+    'vira-pink-60': '#cc59a2',
+    'vira-pink-70': '#b2418b',
+    'vira-pink-80': '#962471',
+    'vira-pink-90': '#6e004f',
+    'vira-grey-5': '#eceff0',
+    'vira-grey-10': '#dce2e6',
+    'vira-grey-20': '#c7d2d7',
+    'vira-grey-30': '#b6c0c5',
+    'vira-grey-40': '#a4adb2',
+    'vira-grey-50': '#909a9f',
+    'vira-grey-60': '#7c868a',
+    'vira-grey-70': '#677074',
+    'vira-grey-80': '#50595d',
+    'vira-grey-90': '#363f43',
+});