@flightlesslabs/dodo-ui 0.6.4 → 0.6.6

package/dist/stories/components/Form/TextInput/Events/Events.stories.svelte

@@ -18,15 +18,7 @@ const { Story } = defineMeta({
       console.log('Input Event', target.value);
     },
   }}
->
-  <TextInput
-    oninput={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('Input Event', target.value);
-    }}
-  />
-</Story>
+/>
 
 <Story
   name="Change"
@@ -37,15 +29,7 @@ const { Story } = defineMeta({
       console.log('onChange Event', target.value);
     },
   }}
->
-  <TextInput
-    onchange={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onchange Event', target.value);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputFocusEvent` -->
 <Story
@@ -57,15 +41,7 @@ const { Story } = defineMeta({
       console.log('onfocus Event', target);
     },
   }}
->
-  <TextInput
-    onfocus={(e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onfocus Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputFocusEvent` -->
 <Story
@@ -77,15 +53,7 @@ const { Story } = defineMeta({
       console.log('onblur Event', target);
     },
   }}
->
-  <TextInput
-    onblur={(e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onblur Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -97,15 +65,7 @@ const { Story } = defineMeta({
       console.log('oncopy Event', target);
     },
   }}
->
-  <TextInput
-    oncopy={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncopy Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -117,15 +77,7 @@ const { Story } = defineMeta({
       console.log('oncut Event', target);
     },
   }}
->
-  <TextInput
-    oncut={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncut Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -137,12 +89,4 @@ const { Story } = defineMeta({
       console.log('onpaste Event', target);
     },
   }}
->
-  <TextInput
-    onpaste={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onpaste Event', target);
-    }}
-  />
-</Story>
+/>

package/dist/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte

@@ -12,10 +12,10 @@
   });
 </script>
 
-<Story name="Roundness 1x" />
+<Story name="Roundness 1" />
 
-<Story name="Roundness 2x" args={{ roundness: '2x' }} />
+<Story name="Roundness 2" args={{ roundness: 2 }} />
 
-<Story name="Roundness 3x" args={{ roundness: '3x' }} />
+<Story name="Roundness 3" args={{ roundness: 3 }} />
 
-<Story name="Roundness False" args={{ roundness: false }} />
+<Story name="Roundness 0" args={{ roundness: 0 }} />

package/dist/stories/components/Form/TextInput/TextInput.stories.svelte

@@ -1,17 +1,19 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import TextInput from './TextInput.svelte';
+import TextInput, { textInputTypeArray } from './TextInput.svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentSizeArray } from '../../../../types/size.js';
 export const storyTextInputArgTypes = {
     type: {
         control: { type: 'select' },
-        options: ['text', 'tel', 'email', 'password', 'url', 'number'],
+        options: textInputTypeArray,
     },
     roundness: {
         control: { type: 'select' },
-        options: [false, '1x', '2x', '3x'],
+        options: componentRoundnessArray,
     },
     size: {
         control: { type: 'select' },
-        options: ['normal', 'small', 'large'],
+        options: componentSizeArray,
     },
 };
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories

package/dist/stories/components/Form/TextInput/TextInput.svelte

@@ -1,8 +1,15 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>export const textInputTypeArray = [
+    'text',
+    'tel',
+    'email',
+    'password',
+    'url',
+    'number',
+];
 </script>
 
 <script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
-let { type = 'text', size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value = $bindable(), placeholder, ref = $bindable(), readonly = false, } = $props();
+let { type = 'text', size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value = $bindable(), placeholder, ref = $bindable(), readonly = false, } = $props();
 let focused = $state(false);
 function onfocusMod(e) {
     focused = true;
@@ -58,13 +65,13 @@ function onblurMod(e) {
 }
 .dodo-ui-TextInput.size--normal input {
   font-size: 1rem;
-  padding: 0 12px;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
 }
 .dodo-ui-TextInput.size--small input {
-  padding: 0 8px;
+  padding: 0 var(--dodo-ui-space);
   font-size: 0.9rem;
 }
 .dodo-ui-TextInput.size--large input {
   font-size: 1.1rem;
-  padding: 0 14px;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
 }</style>

package/dist/stories/components/Form/TextInput/TextInput.svelte.d.ts

@@ -1,11 +1,13 @@
 export type TextInputType = 'text' | 'tel' | 'email' | 'password' | 'url' | 'number';
+export declare const textInputTypeArray: TextInputType[];
 export type TextInputFocusEvent = FocusEvent & {
     currentTarget: EventTarget & HTMLInputElement;
 };
 export type TextInputClipboardEvent = ClipboardEvent & {
     currentTarget: EventTarget & HTMLInputElement;
 };
-import type { ComponentRoundness, ComponentSize } from '../../../../types.js';
+import type { ComponentRoundness } from '../../../../types/roundness.js';
+import type { ComponentSize } from '../../../../types/size.js';
 import type { Snippet } from 'svelte';
 import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
 interface TextInputProps {
@@ -16,7 +18,7 @@ interface TextInputProps {
     /** How large should the button be? */
     size?: ComponentSize;
     /** How round should the border radius be? */
-    roundness?: ComponentRoundness | false;
+    roundness?: ComponentRoundness;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** Input value */

package/dist/stories/components/Form/TextInput/WithIcon/WithIcon.stories.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <!-- TextInput icon in front. -->
-<Story name="Icon Before">
+<Story name="Icon Before" asChild>
   <TextInput>
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />
@@ -22,7 +22,7 @@
 </Story>
 
 <!-- TextInput icon in front. -->
-<Story name="Icon After">
+<Story name="Icon After" asChild>
   <TextInput>
     {#snippet after()}
       <Icon icon="material-symbols:download-2" />
@@ -30,7 +30,7 @@
   </TextInput>
 </Story>
 
-<Story name="Small" args={{ size: 'small' }}>
+<Story name="Small" args={{ size: 'small' }} asChild>
   <TextInput size="small">
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />
@@ -38,7 +38,7 @@
   </TextInput>
 </Story>
 
-<Story name="Large" args={{ size: 'large' }}>
+<Story name="Large" args={{ size: 'large' }} asChild>
   <TextInput size="large">
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />

package/dist/stories/components/Layout/Paper/Color/Color.stories.svelte

@@ -0,0 +1,63 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { storyPaperArgTypes } from '../Paper.stories.svelte';
+  import Paper from '../Paper.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Paper,
+    tags: ['autodocs'],
+    argTypes: storyPaperArgTypes,
+  });
+</script>
+
+<Story name="Default" args={{ height: '100px' }}>Hola!</Story>
+
+<Story name="Primary" args={{ color: 'primary', height: '100px' }}>Hola!</Story>
+<Story name="Secondary" args={{ color: 'secondary', height: '100px' }}>Hola!</Story>
+<Story name="Neutral" args={{ color: 'neutral', height: '100px' }}>Hola!</Story>
+<Story name="Safe" args={{ color: 'safe', height: '100px' }}>Hola!</Story>
+<Story name="Warning" args={{ color: 'warning', height: '100px' }}>Hola!</Story>
+<Story name="Danger" args={{ color: 'danger', height: '100px' }}>Hola!</Story>
+
+<Story name="Default Outline" args={{ outline: true, height: '100px' }}>Hola!</Story>
+<Story name="Primary Outline" args={{ color: 'primary', outline: true, height: '100px' }}>
+  Hola!
+</Story>
+<Story name="Secondary Outline" args={{ color: 'secondary', outline: true, height: '100px' }}>
+  Hola!
+</Story>
+<Story name="Neutral Outline" args={{ color: 'neutral', outline: true, height: '100px' }}>
+  Hola!
+</Story>
+<Story name="Safe Outline" args={{ color: 'safe', outline: true, height: '100px' }}>Hola!</Story>
+<Story name="Warning Outline" args={{ color: 'warning', outline: true, height: '100px' }}>
+  Hola!
+</Story>
+<Story name="Danger Outline" args={{ color: 'danger', outline: true, height: '100px' }}>Hola!</Story
+>
+
+<Story name="Primary Solid" args={{ color: 'primary', variant: 'solid', height: '100px' }}>
+  Hola!
+</Story>
+<Story name="Secondary Solid" args={{ color: 'secondary', variant: 'solid', height: '100px' }}>
+  Hola!
+</Story>
+<Story name="Neutral Solid" args={{ color: 'neutral', variant: 'solid', height: '100px' }}>
+  Hola!
+</Story>
+<Story name="Safe Solid" args={{ color: 'safe', variant: 'solid', height: '100px' }}>Hola!</Story>
+<Story name="Warning Solid" args={{ color: 'warning', variant: 'solid', height: '100px' }}>
+  Hola!
+</Story>
+<Story name="Danger Solid" args={{ color: 'danger', variant: 'solid', height: '100px' }}>
+  Hola!
+</Story>
+
+<!-- Paper with Custom Backgroun and Border colors -->
+<Story
+  name="Custom Color"
+  args={{ height: '100px', customBackgroundColor: '#ffdfad', customBorderColor: '#fbc674' }}
+>
+  Hola!
+</Story>

package/dist/stories/components/Layout/Paper/Color/Color.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Color;
+type Color = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Color: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/stories/components/Layout/Paper/Paper.stories.svelte

@@ -1,13 +1,24 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Paper from './Paper.svelte';
+import Paper, { paperColorArray } from './Paper.svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentShadowArray } from '../../../../types/shadow.js';
+import { componentWeightArray } from '../../../../types/weight.js';
 export const storyPaperArgTypes = {
+    color: {
+        control: { type: 'select' },
+        options: paperColorArray,
+    },
+    variant: {
+        control: { type: 'select' },
+        options: componentWeightArray,
+    },
     roundness: {
         control: { type: 'select' },
-        options: [false, '1x', '2x', '3x', 'full'],
+        options: componentRoundnessArray,
     },
     shadow: {
         control: { type: 'select' },
-        options: [false, '1x', '2x', '3x', '4x', '5x', '6x', '7x'],
+        options: componentShadowArray,
     },
 };
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -18,20 +29,18 @@ const { Story } = defineMeta({
 });
 </script>
 
-<!-- ⚠️ Test Paper: Do not use! -->
-<Story
-  name="Test Paper"
-  args={{
-    _unsafeChildrenStringForTesting: 'Hola!',
-  }}
-/>
-
 <!-- Paper with default style -->
-<Story name="Default">
-  <Paper>Hola!</Paper>
-</Story>
+<Story name="Default">Hola!</Story>
 
 <!-- Paper with width and height -->
-<Story name="WidthAndHeight">
-  <Paper width="200px" height="200px">Hola!</Paper>
+<Story name="WidthAndHeight" args={{ width: '200px', height: '200px', color: 'primary' }}>
+  Hola!
+</Story>
+
+<!-- Paper with Custom Backgroun and Border colors -->
+<Story
+  name="Custom Color"
+  args={{ height: '100px', customBackgroundColor: '#ffdfad', customBorderColor: '#fbc674' }}
+>
+  Hola!
 </Story>

package/dist/stories/components/Layout/Paper/Paper.svelte

@@ -1,34 +1,142 @@
-<script lang="ts" module>export {};
+<script lang="ts" module>import { componentColorPriorityArray, componentColorSeverityArray, } from '../../../../types/colors.js';
+export const paperColorArray = [
+    'default',
+    ...componentColorPriorityArray,
+    ...componentColorSeverityArray,
+];
 </script>
 
-<script lang="ts">let { children, roundness = '1x', shadow = '1x', id, class: className = '', _unsafeChildrenStringForTesting, width, height, ref = $bindable(), } = $props();
+<script lang="ts">let { children, roundness = 1, shadow = 0, id, class: className = '', width, height, ref = $bindable(), color = 'default', variant = 'text', customBackgroundColor, customBorderColor, outline = false, } = $props();
 export {};
 </script>
 
 <div
+  class:outline
   class={[
     'dodo-ui-Paper',
     `roundness--${roundness}`,
+    `color--${color}`,
+    `variant--${variant}`,
+    `shadow--${shadow}`,
     `${shadow ? `shadow--${shadow} dodo-shadow-${shadow}` : `shadow--${shadow}`}`,
     className,
   ].join(' ')}
   {id}
   bind:this={ref}
-  style={`${width ? `width:${width};` : ''}${height ? `height:${height};` : ''}`}
+  style={`${width ? `width:${width};` : ''}
+  ${height ? `height:${height};` : ''}
+  ${customBackgroundColor ? `background-color:${customBackgroundColor};` : ''}
+  ${customBorderColor ? `border-color:${customBorderColor};` : ''}
+  `}
 >
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 </div>
 
 <style>:global(:root) {
-  --dodo-ui-Paper-bg: var(--dodo-color-white);
+  --dodo-ui-Paper-default-bg: var(--dodo-color-white);
+  --dodo-ui-Paper-default-bg-shadow-1: var(--dodo-color-white);
+  --dodo-ui-Paper-default-bg-shadow-2: var(--dodo-color-white);
+  --dodo-ui-Paper-default-bg-shadow-3: var(--dodo-color-white);
+  --dodo-ui-Paper-default-bg-shadow-4: var(--dodo-color-white);
+  --dodo-ui-Paper-default-bg-shadow-5: var(--dodo-color-white);
+  --dodo-ui-Paper-outline-default: var(--dodo-color-neutral-300);
+  --dodo-ui-Paper-outline-neutral: var(--dodo-color-neutral-400);
+  --dodo-ui-Paper-text-neutral-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Paper-solid-neutral-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-Paper-outline-primary: var(--dodo-color-primary-400);
+  --dodo-ui-Paper-text-primary-bg: var(--dodo-color-primary-100);
+  --dodo-ui-Paper-solid-primary-bg: var(--dodo-color-primary-500);
+  --dodo-ui-Paper-outline-secondary: var(--dodo-color-secondary-400);
+  --dodo-ui-Paper-text-secondary-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-Paper-solid-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-Paper-outline-safe: var(--dodo-color-safe-400);
+  --dodo-ui-Paper-text-safe-bg: var(--dodo-color-safe-100);
+  --dodo-ui-Paper-solid-safe-bg: var(--dodo-color-safe-500);
+  --dodo-ui-Paper-outline-warning: var(--dodo-color-warning-400);
+  --dodo-ui-Paper-text-warning-bg: var(--dodo-color-warning-100);
+  --dodo-ui-Paper-solid-warning-bg: var(--dodo-color-warning-500);
+  --dodo-ui-Paper-outline-danger: var(--dodo-color-danger-400);
+  --dodo-ui-Paper-text-danger-bg: var(--dodo-color-danger-100);
+  --dodo-ui-Paper-solid-danger-bg: var(--dodo-color-danger-500);
 }
 
 :global(.dodo-theme--dark) {
-  --dodo-ui-Paper-bg: var(--dodo-color-default-100);
+  --dodo-ui-Paper-default-bg-mixer: #999999fd;
+  --dodo-ui-Paper-default-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-50) 98%,
+    var(--dodo-ui-Paper-default-bg-mixer)
+  );
+  --dodo-ui-Paper-default-bg-shadow-1: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-50) 95%,
+    var(--dodo-ui-Paper-default-bg-mixer)
+  );
+  --dodo-ui-Paper-default-bg-shadow-2: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-50) 90%,
+    var(--dodo-ui-Paper-default-bg-mixer)
+  );
+  --dodo-ui-Paper-default-bg-shadow-3: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-50) 85%,
+    var(--dodo-ui-Paper-default-bg-mixer)
+  );
+  --dodo-ui-Paper-default-bg-shadow-4: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-50) 80%,
+    var(--dodo-ui-Paper-default-bg-mixer)
+  );
+  --dodo-ui-Paper-default-bg-shadow-5: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-50) 75%,
+    var(--dodo-ui-Paper-default-bg-mixer)
+  );
+  --dodo-ui-Paper-outline-default: var(--dodo-color-neutral-200);
+  --dodo-ui-Paper-outline-neutral: var(--dodo-color-neutral-300);
+  --dodo-ui-Paper-text-neutral-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-50) 80%,
+    #00000080
+  );
+  --dodo-ui-Paper-solid-neutral-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-Paper-outline-primary: var(--dodo-color-primary-300);
+  --dodo-ui-Paper-text-primary-bg: color-mix(
+    in oklab,
+    var(--dodo-color-primary-50) 80%,
+    #00000080
+  );
+  --dodo-ui-Paper-solid-primary-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Paper-outline-secondary: var(--dodo-color-secondary-300);
+  --dodo-ui-Paper-text-secondary-bg: color-mix(
+    in oklab,
+    var(--dodo-color-secondary-50) 80%,
+    #00000080
+  );
+  --dodo-ui-Paper-solid-secondary-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-Paper-outline-safe: var(--dodo-color-safe-300);
+  --dodo-ui-Paper-text-safe-bg: color-mix(
+    in oklab,
+    var(--dodo-color-safe-50) 80%,
+    #00000080
+  );
+  --dodo-ui-Paper-solid-safe-bg: var(--dodo-color-safe-300);
+  --dodo-ui-Paper-outline-warning: var(--dodo-color-warning-300);
+  --dodo-ui-Paper-text-warning-bg: color-mix(
+    in oklab,
+    var(--dodo-color-warning-50) 80%,
+    #00000080
+  );
+  --dodo-ui-Paper-solid-warning-bg: var(--dodo-color-warning-300);
+  --dodo-ui-Paper-outline-danger: var(--dodo-color-danger-300);
+  --dodo-ui-Paper-text-danger-bg: color-mix(
+    in oklab,
+    var(--dodo-color-danger-50) 80%,
+    #00000080
+  );
+  --dodo-ui-Paper-solid-danger-bg: var(--dodo-color-danger-300);
 }
 
 .dodo-ui-Paper {
@@ -36,18 +144,107 @@ export {};
   transition: all 150ms;
   font-family: inherit;
   color: inherit;
-  background-color: var(--dodo-ui-Paper-bg);
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
   overflow: hidden;
 }
-.dodo-ui-Paper.roundness--1x {
-  border-radius: var(--dodo-ui-element-roundness-1x);
+.dodo-ui-Paper.roundness--1 {
+  border-radius: var(--dodo-ui-element-roundness-1);
 }
-.dodo-ui-Paper.roundness--2x {
-  border-radius: var(--dodo-ui-element-roundness-2x);
+.dodo-ui-Paper.roundness--2 {
+  border-radius: var(--dodo-ui-element-roundness-2);
 }
-.dodo-ui-Paper.roundness--3x {
-  border-radius: var(--dodo-ui-element-roundness-3x);
+.dodo-ui-Paper.roundness--3 {
+  border-radius: var(--dodo-ui-element-roundness-3);
 }
 .dodo-ui-Paper.roundness--full {
   border-radius: 50%;
+}
+.dodo-ui-Paper.color--default {
+  background-color: var(--dodo-ui-Paper-default-bg);
+}
+.dodo-ui-Paper.color--default.outline {
+  border-color: var(--dodo-ui-Paper-outline-default);
+}
+.dodo-ui-Paper.color--neutral.variant--text {
+  color: var(--dodo-color-neutral-800);
+  background-color: var(--dodo-ui-Paper-text-neutral-bg);
+}
+.dodo-ui-Paper.color--neutral.variant--text.outline {
+  border-color: var(--dodo-ui-Paper-outline-neutral);
+}
+.dodo-ui-Paper.color--neutral.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Paper-solid-neutral-bg);
+}
+.dodo-ui-Paper.color--primary.variant--text {
+  color: var(--dodo-color-primary-800);
+  background-color: var(--dodo-ui-Paper-text-primary-bg);
+}
+.dodo-ui-Paper.color--primary.variant--text.outline {
+  border-color: var(--dodo-ui-Paper-outline-primary);
+}
+.dodo-ui-Paper.color--primary.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Paper-solid-primary-bg);
+}
+.dodo-ui-Paper.color--secondary.variant--text {
+  color: var(--dodo-color-secondary-800);
+  background-color: var(--dodo-ui-Paper-text-secondary-bg);
+}
+.dodo-ui-Paper.color--secondary.variant--text.outline {
+  border-color: var(--dodo-ui-Paper-outline-secondary);
+}
+.dodo-ui-Paper.color--secondary.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Paper-solid-secondary-bg);
+}
+.dodo-ui-Paper.color--safe.variant--text {
+  color: var(--dodo-color-safe-800);
+  background-color: var(--dodo-ui-Paper-text-safe-bg);
+}
+.dodo-ui-Paper.color--safe.variant--text.outline {
+  border-color: var(--dodo-ui-Paper-outline-safe);
+}
+.dodo-ui-Paper.color--safe.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Paper-solid-safe-bg);
+}
+.dodo-ui-Paper.color--warning.variant--text {
+  color: var(--dodo-color-warning-800);
+  background-color: var(--dodo-ui-Paper-text-warning-bg);
+}
+.dodo-ui-Paper.color--warning.variant--text.outline {
+  border-color: var(--dodo-ui-Paper-outline-warning);
+}
+.dodo-ui-Paper.color--warning.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Paper-solid-warning-bg);
+}
+.dodo-ui-Paper.color--danger.variant--text {
+  color: var(--dodo-color-danger-800);
+  background-color: var(--dodo-ui-Paper-text-danger-bg);
+}
+.dodo-ui-Paper.color--danger.variant--text.outline {
+  border-color: var(--dodo-ui-Paper-outline-danger);
+}
+.dodo-ui-Paper.color--danger.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Paper-solid-danger-bg);
+}
+.dodo-ui-Paper.color--default.shadow--1 {
+  background-color: var(--dodo-ui-Paper-default-bg-shadow-1);
+}
+.dodo-ui-Paper.color--default.shadow--2 {
+  background-color: var(--dodo-ui-Paper-default-bg-shadow-2);
+}
+.dodo-ui-Paper.color--default.shadow--3 {
+  background-color: var(--dodo-ui-Paper-default-bg-shadow-3);
+}
+.dodo-ui-Paper.color--default.shadow--4 {
+  background-color: var(--dodo-ui-Paper-default-bg-shadow-4);
+}
+.dodo-ui-Paper.color--default.shadow--5 {
+  background-color: var(--dodo-ui-Paper-default-bg-shadow-5);
 }</style>