@aveonline/ui-react 0.0.1-alpha.0

package/dist/reset.css

@@ -0,0 +1,273 @@
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size (opinionated).
+*/
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+}
+
+/*
+Sections
+========
+*/
+
+/**
+1. Remove the margin in all browsers.
+2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
+
+body {
+  margin: 0; /* 1 */
+  font-family: system-ui, -apple-system,
+    /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto,
+    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; /* 2 */
+}
+
+/*
+Grouping content
+================
+*/
+
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr[title] {
+  text-decoration: underline dotted;
+}
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
+    monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+Remove the inner border and padding in Firefox.
+*/
+
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+Restore the focus styles unset by the previous rule.
+*/
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+  padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}

package/dist/tailwind.config.js

@@ -0,0 +1,224 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/** @type {import('tailwindcss').Config} */
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  content: ['./src/**/*.{ts,tsx,vue,js,jsx}'],
+  theme: {
+    colors: {
+      letter: {
+        default: 'var(--colors-letter-default)',
+        subdued: 'var(--colors-letter-subdued)',
+        disabled: 'var(--colors-letter-disabled)',
+        warning: 'var(--colors-letter-warning)',
+        critical: 'var(--colors-letter-critical)',
+        success: 'var(--colors-letter-success)',
+        on: 'var(--colors-letter-on)'
+      },
+      action: {
+        primary: {
+          default: 'var(--colors-action-primary-default)',
+          hovered: 'var(--colors-action-primary-hovered)',
+          pressed: 'var(--colors-action-primary-pressed)',
+          depressed: 'var(--colors-action-primary-depressed)',
+          disabled: 'var(--colors-action-primary-disabled)'
+        },
+        secondary: {
+          default: 'var(--colors-action-secondary-default)',
+          hovered: 'var(--colors-action-secondary-hovered)',
+          pressed: 'var(--colors-action-secondary-pressed)',
+          depressed: 'var(--colors-action-secondary-depressed)',
+          disabled: 'var(--colors-action-secondary-disabled)'
+        },
+        critical: {
+          default: 'var(--colors-action-critical-default)',
+          hovered: 'var(--colors-action-critical-hovered)',
+          pressed: 'var(--colors-action-critical-pressed)',
+          depressed: 'var(--colors-action-critical-depressed)',
+          disabled: 'var(--colors-action-critical-disabled)'
+        }
+      },
+      border: {
+        default: 'var(--colors-border-default)',
+        subdued: 'var(--colors-border-subdued)',
+        hovered: 'var(--colors-border-hovered)',
+        depressed: 'var(--colors-border-depressed)',
+        disabled: 'var(--colors-border-disabled)',
+        success: {
+          default: 'var(--colors-border-success-default)',
+          subdued: 'var(--colors-border-success-subdued)'
+        },
+        critical: {
+          default: 'var(--colors-border-critical-default)',
+          subdued: 'var(--colors-border-critical-subdued)',
+          disabled: 'var(--colors-border-critical-disabled)'
+        },
+        shadow: {
+          subdued: 'var(--colors-border-shadow-subdued)'
+        }
+      },
+      interactive: {
+        default: 'var(--colors-interactive-default)',
+        hovered: 'var(--colors-interactive-hovered)',
+        depressed: 'var(--colors-interactive-depressed)',
+        disabled: 'var(--colors-interactive-disabled)',
+        critical: {
+          default: 'var(--colors-interactive-critical-default)',
+          hovered: 'var(--colors-interactive-critical-hovered)',
+          depressed: 'var(--colors-interactive-critical-depressed)',
+          disabled: 'var(--colors-interactive-critical-disabled)'
+        }
+      },
+      icon: {
+        default: 'var(--colors-icon-default)',
+        subdued: 'var(--colors-icon-subdued)',
+        hovered: 'var(--colors-icon-hovered)',
+        pressed: 'var(--colors-icon-pressed)',
+        disabled: 'var(--colors-icon-disabled)',
+        critical: 'var(--colors-icon-critical)',
+        warning: 'var(--colors-icon-warning)',
+        success: 'var(--colors-icon-success)',
+        on: 'var(--colors-icon-on)'
+      },
+      focused: {
+        default: 'var(--colors-focused-default)'
+      },
+      surface: {
+        default: 'var(--colors-surface-default)',
+        subdued: 'var(--colors-surface-subdued)',
+        hovered: 'var(--colors-surface-hovered)',
+        pressed: 'var(--colors-surface-pressed)',
+        depressed: 'var(--colors-surface-depressed)',
+        disabled: 'var(--colors-surface-disabled)',
+        action: {
+          default: 'var(--colors-surface-action-default)',
+          subdued: 'var(--colors-surface-action-subdued)',
+          hovered: 'var(--colors-surface-action-hovered)',
+          pressed: 'var(--colors-surface-action-pressed)',
+          disabled: 'var(--colors-surface-action-disabled)'
+        },
+        warning: {
+          default: 'var(--colors-surface-warning-default)',
+          subdued: 'var(--colors-surface-warning-subdued)',
+          hovered: 'var(--colors-surface-warning-hovered)',
+          pressed: 'var(--colors-surface-warning-pressed)'
+        },
+        success: {
+          default: 'var(--colors-surface-success-default)',
+          subdued: 'var(--colors-surface-success-subdued)',
+          hovered: 'var(--colors-surface-success-hovered)',
+          pressed: 'var(--colors-surface-success-pressed)'
+        },
+        critical: {
+          default: 'var(--colors-surface-critical-default)',
+          subdued: 'var(--colors-surface-critical-subdued)',
+          hovered: 'var(--colors-surface-critical-hovered)',
+          pressed: 'var(--colors-surface-critical-pressed)',
+          disabled: 'var(--colors-surface-critical-disabled)'
+        },
+        neutral: {
+          default: 'var(--colors-surface-neutral-default)',
+          subdued: 'var(--colors-surface-neutral-subdued)',
+          hovered: 'var(--colors-surface-neutral-hovered)',
+          pressed: 'var(--colors-surface-neutral-pressed)',
+          disabled: 'var(--colors-surface-neutral-disabled)'
+        }
+      },
+      background: {
+        default: 'var(--colors-background-default)',
+        hovered: 'var(--colors-background-hovered)',
+        pressed: 'var(--colors-background-pressed)',
+        selected: 'var(--colors-background-selected)'
+      },
+      radial: {
+        10: 'var(--colors-radial-10)',
+        20: 'var(--colors-radial-20)',
+        30: 'var(--colors-radial-30)',
+        40: 'var(--colors-radial-40)',
+        50: 'var(--colors-radial-50)',
+        60: 'var(--colors-radial-60)',
+        70: 'var(--colors-radial-70)',
+        80: 'var(--colors-radial-80)',
+        90: 'var(--colors-radial-90)',
+        100: 'var(--colors-radial-100)'
+      },
+      base: {
+        surface: 'var(--colors-base-surface)',
+        primary: 'var(--colors-base-primary)',
+        secondary: 'var(--colors-base-secondary)',
+        interactive: 'var(--colors-base-interactive)',
+        brand: 'var(--colors-base-brand)',
+        critical: 'var(--colors-base-critical)',
+        warning: 'var(--colors-base-warning)',
+        success: 'var(--colors-base-success)'
+      }
+    },
+    fontSize: {
+      xxs: 'var(--font-size-xxs)',
+      xs: 'var(--font-size-xs)',
+      sm: 'var(--font-size-sm)',
+      md: 'var(--font-size-md)',
+      lg: 'var(--font-size-lg)',
+      xl: 'var(--font-size-xl)',
+      xxl: 'var(--font-size-xxl)',
+      '1xl': 'var(--font-size-1xl)'
+    },
+    lineHeight: {
+      xxs: 'var(--line-height-xxs)',
+      xs: 'var(--line-height-xs)',
+      sm: 'var(--line-height-sm)',
+      md: 'var(--line-height-md)',
+      lg: 'var(--line-height-lg)',
+      xl: 'var(--line-height-xl)',
+      xxl: 'var(--line-height-xxl)'
+    },
+    fontWeight: {
+      book: 'var(--font-weight-book)',
+      medium: 'var(--font-weight-medium)',
+      bold: 'var(--font-weight-bold)'
+    },
+    spacing: {
+      xs: 'var(--spacing-xs)',
+      sm: 'var(--spacing-sm)',
+      md: 'var(--spacing-md)',
+      lg: 'var(--spacing-lg)',
+      xxl: 'var(--spacing-xxl)',
+      xl: 'var(--spacing-xl)'
+    },
+    borderRadius: {
+      xs: 'var(--border-radius-xs)',
+      sm: 'var(--border-radius-sm)',
+      md: 'var(--border-radius-md)',
+      lg: 'var(--border-radius-lg)'
+    },
+    fontFamily: {
+      sans: 'var(--font-family-sans)'
+    },
+    screens: {
+      tablet: 'var(--screens-tablet)',
+      laptop: 'var(--screens-laptop)',
+      desktop: 'var(--screens-desktop)'
+    },
+    boxShadow: {
+      card: 'var(--box-shadow-card)',
+      popover: 'var(--box-shadow-popover)',
+      popup: 'var(--box-shadow-popup)',
+      base: 'var(--box-shadow-base)',
+      depressed: 'var(--box-shadow-depressed)',
+      pressed: 'var(--box-shadow-pressed)'
+    },
+    extend: {
+      fontFamily: {
+        sans: ['"Circular Std Book"', ...defaultTheme.fontFamily.sans]
+      }
+    }
+  },
+  variants: {
+    extend: {
+      backgroundColor: ['checked', 'active'],
+      textColor: ['checked', 'active'],
+      borderColor: ['checked', 'hover', 'active']
+    }
+  },
+  plugins: [require('@tailwindcss/forms')]
+}

package/dist/tailwind.css

@@ -0,0 +1 @@
+/*! tailwindcss v3.0.2 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-family:Circular Std Book,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],select,textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,select:focus,textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}select{color-adjust:exact;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact}[multiple]{color-adjust:unset;background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset}[type=checkbox],[type=radio]{color-adjust:exact;--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-origin:border-box;border-color:#6b7280;border-width:1px;color:#2563eb;display:inline-block;flex-shrink:0;height:1rem;padding:0;-webkit-print-color-adjust:exact;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:transparent}[type=checkbox]:indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:transparent}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:transparent}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px auto -webkit-focus-ring-color}.contents{display:contents}.text-letter-disabled{color:var(--colors-letter-disabled)}

package/dist/tokens.css

@@ -0,0 +1,147 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 28 Oct 2022 14:53:49 GMT
+ */
+
+:root {
+  --box-shadow-pressed: 0px 6px 8px 0px #3434341A;
+  --box-shadow-depressed: 0px 1px 12px rgba(0, 0, 0, 0.08), 0px 2px 5px rgba(63, 63, 68, 0.15);
+  --box-shadow-base: 0px 1px 3px rgba(63, 63, 68, 0.15),  0px 0px 0px 1px rgba(63, 63, 68, 0.05);
+  --box-shadow-popup: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 3px 50px rgba(0, 0, 0, 0.2);
+  --box-shadow-popover: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1);
+  --box-shadow-card: 0px 2px 1px rgba(0, 0, 0, 0.05),  0px 0px 1px rgba(0, 0, 0, 0.25);
+  --screens-desktop: 1280px;
+  --screens-laptop: 1024px;
+  --screens-tablet: 640px;
+  --font-family-sans: 'Circular Std';
+  --border-radius-lg: 20px;
+  --border-radius-md: 10px;
+  --border-radius-sm: 8px;
+  --border-radius-xs: 5px;
+  --spacing-xl: 32px;
+  --spacing-xxl: 40px;
+  --spacing-lg: 24px;
+  --spacing-md: 16px;
+  --spacing-sm: 8px;
+  --spacing-xs: 0px;
+  --font-weight-bold: 700;
+  --font-weight-medium: 500;
+  --font-weight-book: 450;
+  --line-height-xxl: 44px;
+  --line-height-xl: 36px;
+  --line-height-lg: 32;
+  --line-height-md: 28px;
+  --line-height-sm: 24px;
+  --line-height-xs: 20px;
+  --line-height-xxs: 16px;
+  --font-size-1xl: 40px;
+  --font-size-xxl: 32px;
+  --font-size-xl: 24px;
+  --font-size-lg: 20px;
+  --font-size-md: 18px;
+  --font-size-sm: 16px;
+  --font-size-xs: 14px;
+  --font-size-xxs: 12px;
+  --colors-base-success: #16ab49ff;
+  --colors-base-warning: #ffa826ff;
+  --colors-base-critical: #f56270ff;
+  --colors-base-brand: #c80935ff;
+  --colors-base-interactive: #007affff;
+  --colors-base-secondary: #8a8a8aff;
+  --colors-base-primary: #42484eff;
+  --colors-base-surface: #f0f0f0ff;
+  --colors-radial-100: #1ddd5eff;
+  --colors-radial-90: #139840ff;
+  --colors-radial-80: #0f642cff;
+  --colors-radial-70: #93a611ff;
+  --colors-radial-60: #d0d82bff;
+  --colors-radial-50: #ede437ff;
+  --colors-radial-40: #f9b017ff;
+  --colors-radial-30: #f28c1bff;
+  --colors-radial-20: #e15b24ff;
+  --colors-radial-10: #b21a1bff;
+  --colors-background-selected: #edeeefff;
+  --colors-background-pressed: #edeeefff;
+  --colors-background-hovered: #f1f2f3ff;
+  --colors-background-default: #f6f6f7ff;
+  --colors-surface-neutral-disabled: #edededff;
+  --colors-surface-neutral-pressed: #d6d6d6ff;
+  --colors-surface-neutral-hovered: #e2e2e2ff;
+  --colors-surface-neutral-subdued: #e8e8e8ff;
+  --colors-surface-neutral-default: #c4c4c4ff;
+  --colors-surface-critical-disabled: #fde7eaff;
+  --colors-surface-critical-pressed: #e49b9bff;
+  --colors-surface-critical-hovered: #ebb3b3ff;
+  --colors-surface-critical-subdued: #eedbdbff;
+  --colors-surface-critical-default: #efc0c0ff;
+  --colors-surface-success-pressed: #ade2bfff;
+  --colors-surface-success-hovered: #c5ead1ff;
+  --colors-surface-success-subdued: #d0eedbff;
+  --colors-surface-success-default: #8bd5a4ff;
+  --colors-surface-warning-pressed: #ffd393ff;
+  --colors-surface-warning-hovered: #ffe9c9ff;
+  --colors-surface-warning-subdued: #ffeed4ff;
+  --colors-surface-warning-default: #ffe1b3ff;
+  --colors-surface-action-disabled: #fafcffff;
+  --colors-surface-action-pressed: #d1deecff;
+  --colors-surface-action-hovered: #f2f8ffff;
+  --colors-surface-action-subdued: #e5f2ffff;
+  --colors-surface-action-default: #b3d7ffff;
+  --colors-surface-disabled: #fafbfbff;
+  --colors-surface-depressed: #edeeefff;
+  --colors-surface-pressed: #f1f2f3ff;
+  --colors-surface-hovered: #f6f6f7ff;
+  --colors-surface-subdued: #fafbfbff;
+  --colors-surface-default: #ffffffff;
+  --colors-focused-default: #3eadfeff;
+  --colors-icon-on: #ffffffff;
+  --colors-icon-success: #149840ff;
+  --colors-icon-warning: #c18f00ff;
+  --colors-icon-critical: #bd2a2aff;
+  --colors-icon-disabled: #d6d6d6ff;
+  --colors-icon-pressed: #636b74ff;
+  --colors-icon-hovered: #42484eff;
+  --colors-icon-subdued: #a1a1a1ff;
+  --colors-icon-default: #61666bff;
+  --colors-interactive-critical-disabled: #ce9ea2ff;
+  --colors-interactive-critical-depressed: #6c0f00ff;
+  --colors-interactive-critical-hovered: #c12929ff;
+  --colors-interactive-critical-default: #d82f2fff;
+  --colors-interactive-disabled: #d6dbe0ff;
+  --colors-interactive-depressed: #004289ff;
+  --colors-interactive-hovered: #0068daff;
+  --colors-interactive-default: #007affff;
+  --colors-border-shadow-subdued: #EBEBEB;
+  --colors-border-critical-disabled: #ffc9c6ff;
+  --colors-border-critical-subdued: #e05563ff;
+  --colors-border-critical-default: #f56270ff;
+  --colors-border-success-subdued: #43da76ff;
+  --colors-border-success-default: #16ab49ff;
+  --colors-border-disabled: #f0f0f0ff;
+  --colors-border-depressed: #8c8c8cff;
+  --colors-border-hovered: #c9c9c9ff;
+  --colors-border-subdued: #e0e0e0ff;
+  --colors-border-default: #c2c2c2ff;
+  --colors-action-critical-disabled: #e4dfe0ff;
+  --colors-action-critical-depressed: #6c0f00ff;
+  --colors-action-critical-pressed: #9d2020ff;
+  --colors-action-critical-hovered: #c12929ff;
+  --colors-action-critical-default: #d82f2fff;
+  --colors-action-secondary-disabled: #ffffffff;
+  --colors-action-secondary-depressed: #6d7175ff;
+  --colors-action-secondary-pressed: #eaeaeaff;
+  --colors-action-secondary-hovered: #f3f3f3ff;
+  --colors-action-secondary-default: #ffffffff;
+  --colors-action-primary-disabled: #d6dbe0ff;
+  --colors-action-primary-depressed: #072a52ff;
+  --colors-action-primary-pressed: #0c4d95ff;
+  --colors-action-primary-hovered: #126dd0ff;
+  --colors-action-primary-default: #007affff;
+  --colors-letter-on: #ffffffff;
+  --colors-letter-success: #12953eff;
+  --colors-letter-critical: #bd2a2aff;
+  --colors-letter-warning: #ce881eff;
+  --colors-letter-disabled: #c2c2c2ff;
+  --colors-letter-subdued: #8a8a8aff;
+  --colors-letter-default: #42484eff;
+}