vira 28.19.7 → 29.0.0

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

@@ -5,7 +5,7 @@ import { ChevronUp24Icon } from '../icons/index.js';
 import { viraDisabledStyles } from '../styles/disabled.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
-import { viraAnimationDurations, viraBorders } from '../styles/index.js';
+import { viraAnimationDurations } from '../styles/index.js';
 import { noNativeFormStyles } from '../styles/native-styles.js';
 import { defineViraElement } from './define-vira-element.js';
 import { ViraIcon } from './vira-icon.element.js';
@@ -56,7 +56,8 @@ export const ViraSelect = defineViraElement()({
             box-sizing: border-box;
             align-items: center;
             position: relative;
-            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
+            color: ${viraFormCssVars['vira-form-foreground-color'].value};
             background-color: ${viraFormCssVars['vira-form-background-color'].value};
             /*
                 Border colors are actually applied via the .wrapper-border class. However, we must
@@ -118,7 +119,7 @@ export const ViraSelect = defineViraElement()({
                 left: 0;
                 width: 100%;
                 height: 100%;
-                border-radius: ${viraBorders['vira-form-input-radius'].value};
+                border-radius: ${viraFormCssVars['vira-form-radius'].value};
                 z-index: 0;
                 pointer-events: none;
             }
@@ -165,7 +166,7 @@ export const ViraSelect = defineViraElement()({
 
         ${hostClasses['vira-select-error'].selector} {
             & .wrapper-border {
-                border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+                border-color: ${viraFormCssVars['vira-form-error-color'].value};
             }
         }
     `,

package/dist/styles/focus.d.ts

@@ -1,17 +1,4 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
-/**
- * CSS vars for Vira focus colors.
- *
- * @category CSS Vars
- * @category Styles
- */
-export declare const viraFocusCssVars: import("lit-css-vars").CssVarDefinitions<{
-    readonly 'vira-focus-outline-color': "#59b1ff";
-    readonly 'vira-focus-outline-border-radius': {
-        readonly initialValue: "10px";
-        readonly default: import("element-vir").CSSResult;
-    };
-}>;
 /**
  * Create styles that look like an outline for the given selector.
  *

package/dist/styles/focus.js

@@ -1,20 +1,6 @@
 import { addPx } from '@augment-vir/common';
 import { css, unsafeCSS } from 'element-vir';
-import { defineCssVars } from 'lit-css-vars';
-import { viraBorders } from './border.js';
-/**
- * CSS vars for Vira focus colors.
- *
- * @category CSS Vars
- * @category Styles
- */
-export const viraFocusCssVars = defineCssVars({
-    'vira-focus-outline-color': '#59b1ff',
-    'vira-focus-outline-border-radius': {
-        initialValue: '10px',
-        default: css `calc(${viraBorders['vira-form-input-radius'].value} + 2px)`,
-    },
-});
+import { viraFormCssVars } from './form-styles.js';
 /**
  * Create styles that look like an outline for the given selector.
  *
@@ -34,8 +20,8 @@ export function createFocusStyles({ elementBorderSize, outlineGap = 2, outlineWi
         height: calc(100% + calc(${outlineSpacing} * 2));
         box-sizing: border-box;
         pointer-events: none;
-        border: ${outlineWidth}px solid ${viraFocusCssVars['vira-focus-outline-color'].value};
-        border-radius: ${viraFocusCssVars['vira-focus-outline-border-radius'].value};
+        border: ${outlineWidth}px solid ${viraFormCssVars['vira-form-focus-outline-color'].value};
+        border-radius: ${viraFormCssVars['vira-form-focus-outline-border-radius'].value};
         z-index: 100;
     `;
     if (noNesting) {

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

@@ -1,3 +1,4 @@
+import { CssVarSyntaxName } from 'lit-css-vars';
 /**
  * CSS vars for vira form elements.
  *
@@ -5,16 +6,118 @@
  * @category Styles
  */
 export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
-    readonly 'vira-form-border-color': "#cccccc";
-    readonly 'vira-form-placeholder-color': "#cccccc";
-    readonly 'vira-form-background-color': "white";
-    readonly 'vira-form-foreground-color': "black";
-    readonly 'vira-form-text-selection-color': "#cfe9ff";
-    readonly 'vira-form-selection-hover-background-color': "#e6f9fe";
-    readonly 'vira-form-selection-hover-foreground-color': "black";
-    readonly 'vira-form-selection-active-background-color': "#e6f9fe";
-    readonly 'vira-form-selection-active-foreground-color': "black";
-    readonly 'vira-form-error-foreground-color': "red";
-    readonly 'vira-form-success-foreground-color': "green";
+    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

@@ -1,4 +1,7 @@
-import { defineCssVars } from 'lit-css-vars';
+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.
  *
@@ -6,16 +9,118 @@ import { defineCssVars } from 'lit-css-vars';
  * @category Styles
  */
 export const viraFormCssVars = defineCssVars({
-    'vira-form-border-color': '#cccccc',
-    'vira-form-placeholder-color': '#cccccc',
-    'vira-form-background-color': 'white',
-    'vira-form-foreground-color': 'black',
-    'vira-form-text-selection-color': '#cfe9ff',
-    'vira-form-selection-hover-background-color': '#e6f9fe',
-    'vira-form-selection-hover-foreground-color': 'black',
-    'vira-form-selection-active-background-color': '#e6f9fe',
-    'vira-form-selection-active-foreground-color': 'black',
-    'vira-form-error-foreground-color': 'red',
-    'vira-form-success-foreground-color': 'green',
+    '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/dist/styles/index.d.ts

@@ -1,5 +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

@@ -1,5 +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/native-styles.js

@@ -16,7 +16,6 @@ export const noNativeSpacing = css `
  */
 export const noNativeFormStyles = css `
     ${noNativeSpacing};
-    cursor: unset;
     background: none;
     border: none;
     font: inherit;

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

@@ -1,95 +1,97 @@
-/** Generously contributed by Trent Hazy, modified to more uniform contrast levels. */
+/**
+ * The base Vira color theme palette.
+ *
+ * @category Color
+ */
 export declare const viraColorPalette: import("lit-css-vars").CssVarDefinitions<{
-    readonly 'vira-white': "#ffffff";
-    readonly 'vira-black': "#000000";
     readonly 'vira-red-5': "#ffe9e6";
-    readonly 'vira-red-10': "#ffd9d6";
+    readonly 'vira-red-10': "#ffd9d5";
     readonly 'vira-red-20': "#ffc1bc";
-    readonly 'vira-red-30': "#ffa6a2";
-    readonly 'vira-red-40': "#ff8887";
+    readonly 'vira-red-30': "#ffa7a2";
+    readonly 'vira-red-40': "#ff8886";
     readonly 'vira-red-50': "#ff6065";
     readonly 'vira-red-60': "#f9163a";
-    readonly 'vira-red-70': "#d2001e";
+    readonly 'vira-red-70': "#d2001d";
     readonly 'vira-red-80': "#a60012";
-    readonly 'vira-red-90': "#760004";
+    readonly 'vira-red-90': "#760003";
     readonly 'vira-orange-5': "#ffebd1";
-    readonly 'vira-orange-10': "#ffdcab";
-    readonly 'vira-orange-20': "#ffc768";
-    readonly 'vira-orange-30': "#ffac3a";
-    readonly 'vira-orange-40': "#f49400";
-    readonly 'vira-orange-50': "#dd8100";
-    readonly 'vira-orange-60': "#c66b00";
-    readonly 'vira-orange-70': "#a85800";
-    readonly 'vira-orange-80': "#884400";
-    readonly 'vira-orange-90': "#682800";
-    readonly 'vira-yellow-5': "#f5f0c6";
-    readonly 'vira-yellow-10': "#eee399";
-    readonly 'vira-yellow-20': "#e9d100";
-    readonly 'vira-yellow-30': "#d6bf00";
-    readonly 'vira-yellow-40': "#c1ac00";
-    readonly 'vira-yellow-50': "#ad9800";
-    readonly 'vira-yellow-60': "#958400";
-    readonly 'vira-yellow-70': "#7d6e00";
-    readonly 'vira-yellow-80': "#635700";
-    readonly 'vira-yellow-90': "#473d00";
-    readonly 'vira-green-5': "#def6cc";
-    readonly 'vira-green-10': "#c4eea3";
-    readonly 'vira-green-20': "#94e53b";
-    readonly 'vira-green-30': "#81d316";
-    readonly 'vira-green-40': "#71bf00";
-    readonly 'vira-green-50': "#5eaa00";
-    readonly 'vira-green-60': "#509400";
-    readonly 'vira-green-70': "#427c00";
-    readonly 'vira-green-80': "#316200";
-    readonly 'vira-green-90': "#1f4600";
-    readonly 'vira-teal-5': "#d3f5ed";
-    readonly 'vira-teal-10': "#aeeedf";
-    readonly 'vira-teal-20': "#4ce6cc";
-    readonly 'vira-teal-30': "#31d3ba";
-    readonly 'vira-teal-40': "#00c0a7";
-    readonly 'vira-teal-50': "#00aa93";
-    readonly 'vira-teal-60': "#00937e";
-    readonly 'vira-teal-70': "#007c68";
-    readonly 'vira-teal-80': "#006252";
-    readonly 'vira-teal-90': "#004539";
-    readonly 'vira-blue-5': "#def1ff";
-    readonly 'vira-blue-10': "#c0e7ff";
-    readonly 'vira-blue-20': "#9dd7ff";
-    readonly 'vira-blue-30': "#78c5ff";
-    readonly 'vira-blue-40': "#5fb1fc";
-    readonly 'vira-blue-50': "#4d9de7";
-    readonly 'vira-blue-60': "#3588d0";
-    readonly 'vira-blue-70': "#1971b7";
-    readonly 'vira-blue-80': "#00579a";
-    readonly 'vira-blue-90': "#003a7b";
-    readonly 'vira-purple-5': "#f3ebff";
-    readonly 'vira-purple-10': "#e8dcff";
-    readonly 'vira-purple-20': "#e1c5ff";
-    readonly 'vira-purple-30': "#d1afff";
-    readonly 'vira-purple-40': "#c198ff";
-    readonly 'vira-purple-50': "#b07dff";
-    readonly 'vira-purple-60': "#a25cff";
-    readonly 'vira-purple-70': "#8a3cf2";
-    readonly 'vira-purple-80': "#710dd3";
-    readonly 'vira-purple-90': "#4c0099";
+    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': "#ffd5f7";
-    readonly 'vira-pink-20': "#ffbaf5";
+    readonly 'vira-pink-10': "#ffd5fa";
+    readonly 'vira-pink-20': "#ffbaf4";
     readonly 'vira-pink-30': "#ff9ee6";
     readonly 'vira-pink-40': "#fa82cc";
-    readonly 'vira-pink-50': "#e46eb8";
-    readonly 'vira-pink-60': "#cd58a2";
-    readonly 'vira-pink-70': "#b3408b";
-    readonly 'vira-pink-80': "#962472";
-    readonly 'vira-pink-90': "#6f0050";
-    readonly 'vira-grey-5': "#eeeef1";
-    readonly 'vira-grey-10': "#e1e1e4";
-    readonly 'vira-grey-20': "#d0d0d6";
-    readonly 'vira-grey-30': "#bebec3";
-    readonly 'vira-grey-40': "#ababb2";
-    readonly 'vira-grey-50': "#98989c";
-    readonly 'vira-grey-60': "#838489";
-    readonly 'vira-grey-70': "#6e6e73";
-    readonly 'vira-grey-80': "#57575c";
-    readonly 'vira-grey-90': "#3d3d43";
+    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";
 }>;