@flightlesslabs/dodo-ui 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -23,3 +23,6 @@ export type { MessageColor } from './stories/components/Form/Message/Message.sve
 /** Form: SimpleSelect */
 export { default as SimpleSelect } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
 export type { SimpleSelectFocusEvent, SimpleSelectOption, } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+/** Layout: Paper */
+export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
+export type { PaperRoundness, PaperShadow, } from './stories/components/Layout/Paper/Paper.svelte';

package/dist/index.js

@@ -17,3 +17,5 @@ export { default as FormControl } from './stories/components/Form/FormControl/Fo
 export { default as Message } from './stories/components/Form/Message/Message.svelte';
 /** Form: SimpleSelect */
 export { default as SimpleSelect } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+/** Layout: Paper */
+export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';

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

@@ -8,7 +8,7 @@ export const storyButtonArgTypes = {
     },
     color: {
         control: { type: 'select' },
-        options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
+        options: ['default', 'secondary', 'primary', 'safe', 'warning', 'danger'],
     },
     variant: {
         control: { type: 'select' },

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

@@ -96,6 +96,13 @@ export {};
   --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-500);
   --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-600);
   --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-700);
+  --dodo-ui-Button-outline-secondary: var(--dodo-color-secondary-400);
+  --dodo-ui-Button-text-secondary-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-Button-text-secondary-hover-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Button-text-secondary-active-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-Button-solid-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-secondary-600);
+  --dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-secondary-700);
   --dodo-ui-Button-outline-safe: var(--dodo-color-safe-400);
   --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-100);
   --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-200);
@@ -117,13 +124,6 @@ export {};
   --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-500);
   --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-600);
   --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-700);
-  --dodo-ui-Button-outline-info: var(--dodo-color-info-400);
-  --dodo-ui-Button-text-info-bg: var(--dodo-color-info-100);
-  --dodo-ui-Button-text-info-hover-bg: var(--dodo-color-info-200);
-  --dodo-ui-Button-text-info-active-bg: var(--dodo-color-info-300);
-  --dodo-ui-Button-solid-info-bg: var(--dodo-color-info-500);
-  --dodo-ui-Button-solid-info-hover-bg: var(--dodo-color-info-600);
-  --dodo-ui-Button-solid-info-active-bg: var(--dodo-color-info-700);
 }
 
 :global(.dodo-theme--dark) {
@@ -143,6 +143,13 @@ export {};
   --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-300);
   --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-200);
   --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-100);
+  --dodo-ui-Button-outline-secondary: var(--dodo-color-secondary-300);
+  --dodo-ui-Button-text-secondary-bg: var(--dodo-color-secondary-50);
+  --dodo-ui-Button-text-secondary-hover-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-Button-text-secondary-active-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Button-solid-secondary-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-secondary-100);
   --dodo-ui-Button-outline-safe: var(--dodo-color-safe-300);
   --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-50);
   --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-100);
@@ -164,13 +171,6 @@ export {};
   --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-300);
   --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-200);
   --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-100);
-  --dodo-ui-Button-outline-info: var(--dodo-color-info-300);
-  --dodo-ui-Button-text-info-bg: var(--dodo-color-info-50);
-  --dodo-ui-Button-text-info-hover-bg: var(--dodo-color-info-100);
-  --dodo-ui-Button-text-info-active-bg: var(--dodo-color-info-200);
-  --dodo-ui-Button-solid-info-bg: var(--dodo-color-info-300);
-  --dodo-ui-Button-solid-info-hover-bg: var(--dodo-color-info-200);
-  --dodo-ui-Button-solid-info-active-bg: var(--dodo-color-info-100);
 }
 
 .dodo-ui-Button {
@@ -268,6 +268,29 @@ export {};
 .dodo-ui-Button.color--primary.variant--solid:active {
   background-color: var(--dodo-ui-Button-solid-primary-active-bg);
 }
+.dodo-ui-Button.color--secondary.variant--text {
+  color: var(--dodo-color-secondary-800);
+  background-color: var(--dodo-ui-Button-text-secondary-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-secondary-hover-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-secondary-active-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-secondary);
+}
+.dodo-ui-Button.color--secondary.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-secondary-bg);
+}
+.dodo-ui-Button.color--secondary.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-secondary-hover-bg);
+}
+.dodo-ui-Button.color--secondary.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-secondary-active-bg);
+}
 .dodo-ui-Button.color--safe.variant--text {
   color: var(--dodo-color-safe-800);
   background-color: var(--dodo-ui-Button-text-safe-bg);
@@ -337,29 +360,6 @@ export {};
 .dodo-ui-Button.color--danger.variant--solid:active {
   background-color: var(--dodo-ui-Button-solid-danger-active-bg);
 }
-.dodo-ui-Button.color--info.variant--text {
-  color: var(--dodo-color-info-800);
-  background-color: var(--dodo-ui-Button-text-info-bg);
-}
-.dodo-ui-Button.color--info.variant--text:hover {
-  background-color: var(--dodo-ui-Button-text-info-hover-bg);
-}
-.dodo-ui-Button.color--info.variant--text:active {
-  background-color: var(--dodo-ui-Button-text-info-active-bg);
-}
-.dodo-ui-Button.color--info.variant--text.outline {
-  border-color: var(--dodo-ui-Button-outline-info);
-}
-.dodo-ui-Button.color--info.variant--solid {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-Button-solid-info-bg);
-}
-.dodo-ui-Button.color--info.variant--solid:hover {
-  background-color: var(--dodo-ui-Button-solid-info-hover-bg);
-}
-.dodo-ui-Button.color--info.variant--solid:active {
-  background-color: var(--dodo-ui-Button-solid-info-active-bg);
-}
 .dodo-ui-Button[disabled] {
   cursor: initial;
 }

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

@@ -1,4 +1,4 @@
-export type ButtonColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
+export type ButtonColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
 export type ButtonRoundness = ComponentRoundness | false | ComponentRoundnessFull;
 export type ButtonLinkTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {}) | undefined | null;
 export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;

package/dist/stories/components/Form/Button/Color/Color.stories.svelte

@@ -19,10 +19,12 @@
   <Button>Click me!</Button>
 </Story>
 <Story name="Primary" args={{ color: 'primary' }}><Button color="primary">Click me!</Button></Story>
+<Story name="Secondary" args={{ color: 'secondary' }}>
+  <Button color="secondary">Click me!</Button>
+</Story>
 <Story name="Safe" args={{ color: 'safe' }}><Button color="safe">Click me!</Button></Story>
 <Story name="Warning" args={{ color: 'warning' }}><Button color="warning">Click me!</Button></Story>
 <Story name="Danger" args={{ color: 'danger' }}><Button color="danger">Click me!</Button></Story>
-<Story name="Info" args={{ color: 'info' }}><Button color="info">Click me!</Button></Story>
 
 <Story
   name="Default Solid"
@@ -33,6 +35,9 @@
 <Story name="Primary Solid" args={{ color: 'primary', variant: 'solid' }}>
   <Button color="primary" variant="solid">Click me!</Button>
 </Story>
+<Story name="Secondary Solid" args={{ color: 'secondary', variant: 'solid' }}>
+  <Button color="secondary" variant="solid">Click me!</Button>
+</Story>
 <Story name="Safe Solid" args={{ color: 'safe', variant: 'solid' }}>
   <Button color="safe" variant="solid">Click me!</Button>
 </Story>
@@ -42,9 +47,6 @@
 <Story name="Danger Solid" args={{ color: 'danger', variant: 'solid' }}>
   <Button color="danger" variant="solid">Click me!</Button>
 </Story>
-<Story name="Info Solid" args={{ color: 'info', variant: 'solid' }}>
-  <Button color="info" variant="solid">Click me!</Button>
-</Story>
 
 <Story name="Default Outline" args={{ outline: true, disabled: false, compact: false }}>
   <Button outline>Click me!</Button>
@@ -52,6 +54,9 @@
 <Story name="Primary Outline" args={{ outline: true, color: 'primary' }}>
   <Button color="primary" outline>Click me!</Button>
 </Story>
+<Story name="Secondary Outline" args={{ outline: true, color: 'secondary' }}>
+  <Button color="secondary" outline>Click me!</Button>
+</Story>
 <Story name="Safe Outline" args={{ outline: true, color: 'safe' }}>
   <Button color="safe" outline>Click me!</Button>
 </Story>
@@ -61,6 +66,3 @@
 <Story name="Danger Outline" args={{ outline: true, color: 'danger' }}>
   <Button color="danger" outline>Click me!</Button>
 </Story>
-<Story name="Info Outline" args={{ outline: true, color: 'info' }}>
-  <Button color="info" outline>Click me!</Button>
-</Story>

package/dist/stories/components/Form/Message/Color/Color.stories.svelte

@@ -19,6 +19,10 @@
   <Message color="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
 </Story>
 
+<Story name="Secondary" args={{ color: 'secondary' }}>
+  <Message color="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
 <Story name="Safe" args={{ color: 'safe' }}>
   <Message color="safe">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
 </Story>
@@ -30,7 +34,3 @@
 <Story name="Danger" args={{ color: 'danger' }}>
   <Message color="danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
 </Story>
-
-<Story name="Info" args={{ color: 'info' }}>
-  <Message color="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>

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

@@ -3,7 +3,7 @@ import Message from './Message.svelte';
 export const storyMessageArgTypes = {
     color: {
         control: { type: 'select' },
-        options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
+        options: ['default', 'primary', 'secondary', 'safe', 'warning', 'danger'],
     },
     size: {
         control: { type: 'select' },

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

@@ -36,6 +36,9 @@ export {};
 .dodo-ui-Message.color--primary {
   color: var(--dodo-color-primary-600);
 }
+.dodo-ui-Message.color--secondary {
+  color: var(--dodo-color-secondary-600);
+}
 .dodo-ui-Message.color--safe {
   color: var(--dodo-color-safe-600);
 }
@@ -44,7 +47,4 @@ export {};
 }
 .dodo-ui-Message.color--danger {
   color: var(--dodo-color-danger-600);
-}
-.dodo-ui-Message.color--info {
-  color: var(--dodo-color-info-600);
 }</style>

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

@@ -1,4 +1,4 @@
-export type MessageColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
+export type MessageColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
 import type { ComponentSize } from '../../../../types.js';
 import type { Snippet } from 'svelte';
 interface MessageProps {

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

@@ -0,0 +1,32 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Paper from './Paper.svelte';
+export const storyPaperArgTypes = {
+    roundness: {
+        control: { type: 'select' },
+        options: [false, '1x', '2x', '3x', 'full'],
+    },
+    shadow: {
+        control: { type: 'select' },
+        options: [false, '1x', '2x', '3x', '4x', '5x', '6x', '7x'],
+    },
+};
+// 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>
+
+<!-- ⚠️ Test Paper: Do not use! -->
+<Story
+  name="Test Paper"
+  args={{
+    _unsafeChildrenStringForTesting: 'Hola!',
+  }}
+/>
+
+<!-- Paper with default style -->
+<Story name="Default">
+  <Paper>Hola!</Paper>
+</Story>

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

@@ -0,0 +1,21 @@
+import Paper from './Paper.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyPaperArgTypes: StoryBookArgTypes;
+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;
+}
+declare const Paper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Paper = InstanceType<typeof Paper>;
+export default Paper;

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

@@ -0,0 +1,52 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">let { children, roundness = '1x', shadow = '1x', id, class: className = '', _unsafeChildrenStringForTesting, ref = $bindable(), } = $props();
+export {};
+</script>
+
+<div
+  class={[
+    'dodo-ui-Paper',
+    `roundness--${roundness}`,
+    `${shadow ? `shadow--${shadow} dodo-shadow-${shadow}` : `shadow--${shadow}`}`,
+    className,
+  ].join(' ')}
+  {id}
+  bind:this={ref}
+>
+  {#if children}
+    {@render children()}
+  {:else if _unsafeChildrenStringForTesting}
+    {_unsafeChildrenStringForTesting}
+  {/if}
+</div>
+
+<style>:global(:root) {
+  --dodo-ui-Paper-bg: var(--dodo-color-white);
+}
+
+:global(.dodo-theme--dark) {
+  --dodo-ui-Paper-bg: var(--dodo-color-default-100);
+}
+
+.dodo-ui-Paper {
+  outline: none;
+  transition: all 150ms;
+  font-family: inherit;
+  color: inherit;
+  background-color: var(--dodo-ui-Paper-bg);
+  overflow: hidden;
+}
+.dodo-ui-Paper.roundness--1x {
+  border-radius: var(--dodo-ui-element-roundness-1x);
+}
+.dodo-ui-Paper.roundness--2x {
+  border-radius: var(--dodo-ui-element-roundness-2x);
+}
+.dodo-ui-Paper.roundness--3x {
+  border-radius: var(--dodo-ui-element-roundness-3x);
+}
+.dodo-ui-Paper.roundness--full {
+  border-radius: 50%;
+}</style>

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

@@ -0,0 +1,23 @@
+export type PaperRoundness = ComponentRoundness | false | ComponentRoundnessFull;
+export type PaperShadow = false | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x';
+import type { ComponentRoundness, ComponentRoundnessFull } from '../../../../types.js';
+import type { Snippet } from 'svelte';
+interface PaperProps {
+    /** Paper contents goes here */
+    children?: Snippet;
+    /** Paper ref */
+    ref?: HTMLDivElement;
+    /** How round should the border radius be? */
+    roundness?: PaperRoundness;
+    /** Shadow elevation */
+    shadow?: PaperShadow;
+    /** Custom css class*/
+    class?: string;
+    /** Id */
+    id?: string;
+    /** Test: ⚠️ Unsafe Children String. Do Not use*/
+    _unsafeChildrenStringForTesting?: string;
+}
+declare const Paper: import("svelte").Component<PaperProps, {}, "ref">;
+type Paper = ReturnType<typeof Paper>;
+export default Paper;

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

@@ -0,0 +1,30 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Paper from '../Paper.svelte';
+  import { storyPaperArgTypes } from '../Paper.stories.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="Roundness 1x">
+  <Paper>Hola!</Paper>
+</Story>
+
+<Story name="Roundness 2x" args={{ roundness: '2x' }}><Paper roundness="2x">Hola!</Paper></Story>
+
+<Story name="Roundness 3x" args={{ roundness: '3x' }}>
+  <Paper roundness="3x">Hola!</Paper>
+</Story>
+
+<Story name="Roundness False" args={{ roundness: false }}>
+  <Paper roundness={false}>Hola!</Paper>
+</Story>
+
+<Story name="Roundness Full" args={{ roundness: 'full' }}>
+  <Paper roundness="full">Hola!</Paper>
+</Story>

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

@@ -0,0 +1,26 @@
+export default Roundness;
+type Roundness = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Roundness: $$__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/Shadow/Shadow.stories.svelte

@@ -0,0 +1,42 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Paper from '../Paper.svelte';
+  import { storyPaperArgTypes } from '../Paper.stories.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="Shadow 1x">
+  <Paper>Hola!</Paper>
+</Story>
+
+<Story name="Shadow 2x" args={{ shadow: '2x' }}><Paper shadow="2x">Hola!</Paper></Story>
+
+<Story name="Shadow 3x" args={{ shadow: '3x' }}>
+  <Paper shadow="3x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 4x" args={{ shadow: '4x' }}>
+  <Paper shadow="4x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 5x" args={{ shadow: '5x' }}>
+  <Paper shadow="5x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 6x" args={{ shadow: '6x' }}>
+  <Paper shadow="6x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 7x" args={{ shadow: '7x' }}>
+  <Paper shadow="7x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow False" args={{ shadow: false }}>
+  <Paper shadow={false}>Hola!</Paper>
+</Story>

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

@@ -0,0 +1,26 @@
+export default Shadow;
+type Shadow = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Shadow: $$__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/philosophy/Colors/utils/color.js

@@ -22,7 +22,7 @@ export const colorPaletteBase = [
     'stone',
 ];
 export const colorPaletteNeutral = ['black', 'white'];
-export const colorPalette = ['default', 'primary', 'safe', 'warning', 'danger', 'info'];
+export const colorPalette = ['default', 'primary', 'safe', 'warning', 'danger', 'secondary'];
 export const colorPaletteValues = [
     '50',
     '100',

package/dist/styles/_colors.css

@@ -33,6 +33,19 @@
   --dodo-color-primary-900: var(--dodo-color-base-violet-900);
   --dodo-color-primary-950: var(--dodo-color-base-violet-950);
 
+  /* Secondary color */
+  --dodo-color-secondary-50: var(--dodo-color-base-cyan-50);
+  --dodo-color-secondary-100: var(--dodo-color-base-cyan-100);
+  --dodo-color-secondary-200: var(--dodo-color-base-cyan-200);
+  --dodo-color-secondary-300: var(--dodo-color-base-cyan-300);
+  --dodo-color-secondary-400: var(--dodo-color-base-cyan-400);
+  --dodo-color-secondary-500: var(--dodo-color-base-cyan-500);
+  --dodo-color-secondary-600: var(--dodo-color-base-cyan-600);
+  --dodo-color-secondary-700: var(--dodo-color-base-cyan-700);
+  --dodo-color-secondary-800: var(--dodo-color-base-cyan-800);
+  --dodo-color-secondary-900: var(--dodo-color-base-cyan-900);
+  --dodo-color-secondary-950: var(--dodo-color-base-cyan-950);
+
   /* Safe color */
   --dodo-color-safe-50: var(--dodo-color-base-emerald-50);
   --dodo-color-safe-100: var(--dodo-color-base-emerald-100);
@@ -71,19 +84,6 @@
   --dodo-color-danger-800: var(--dodo-color-base-red-800);
   --dodo-color-danger-900: var(--dodo-color-base-red-900);
   --dodo-color-danger-950: var(--dodo-color-base-red-950);
-
-  /* Info color */
-  --dodo-color-info-50: var(--dodo-color-base-cyan-50);
-  --dodo-color-info-100: var(--dodo-color-base-cyan-100);
-  --dodo-color-info-200: var(--dodo-color-base-cyan-200);
-  --dodo-color-info-300: var(--dodo-color-base-cyan-300);
-  --dodo-color-info-400: var(--dodo-color-base-cyan-400);
-  --dodo-color-info-500: var(--dodo-color-base-cyan-500);
-  --dodo-color-info-600: var(--dodo-color-base-cyan-600);
-  --dodo-color-info-700: var(--dodo-color-base-cyan-700);
-  --dodo-color-info-800: var(--dodo-color-base-cyan-800);
-  --dodo-color-info-900: var(--dodo-color-base-cyan-900);
-  --dodo-color-info-950: var(--dodo-color-base-cyan-950);
 }
 
 .dodo-theme--dark {
@@ -117,6 +117,19 @@
   --dodo-color-primary-900: var(--dodo-color-base-violet-100);
   --dodo-color-primary-950: var(--dodo-color-base-violet-50);
 
+  /* Dark: Secondary color */
+  --dodo-color-secondary-50: var(--dodo-color-base-cyan-950);
+  --dodo-color-secondary-100: var(--dodo-color-base-cyan-900);
+  --dodo-color-secondary-200: var(--dodo-color-base-cyan-800);
+  --dodo-color-secondary-300: var(--dodo-color-base-cyan-700);
+  --dodo-color-secondary-400: var(--dodo-color-base-cyan-600);
+  --dodo-color-secondary-500: var(--dodo-color-base-cyan-500);
+  --dodo-color-secondary-600: var(--dodo-color-base-cyan-400);
+  --dodo-color-secondary-700: var(--dodo-color-base-cyan-300);
+  --dodo-color-secondary-800: var(--dodo-color-base-cyan-200);
+  --dodo-color-secondary-900: var(--dodo-color-base-cyan-100);
+  --dodo-color-secondary-950: var(--dodo-color-base-cyan-50);
+
   /* Dark: Safe color */
   --dodo-color-safe-50: var(--dodo-color-base-emerald-950);
   --dodo-color-safe-100: var(--dodo-color-base-emerald-900);
@@ -155,17 +168,4 @@
   --dodo-color-danger-800: var(--dodo-color-base-red-200);
   --dodo-color-danger-900: var(--dodo-color-base-red-100);
   --dodo-color-danger-950: var(--dodo-color-base-red-50);
-
-  /* Dark: Info color */
-  --dodo-color-info-50: var(--dodo-color-base-cyan-950);
-  --dodo-color-info-100: var(--dodo-color-base-cyan-900);
-  --dodo-color-info-200: var(--dodo-color-base-cyan-800);
-  --dodo-color-info-300: var(--dodo-color-base-cyan-700);
-  --dodo-color-info-400: var(--dodo-color-base-cyan-600);
-  --dodo-color-info-500: var(--dodo-color-base-cyan-500);
-  --dodo-color-info-600: var(--dodo-color-base-cyan-400);
-  --dodo-color-info-700: var(--dodo-color-base-cyan-300);
-  --dodo-color-info-800: var(--dodo-color-base-cyan-200);
-  --dodo-color-info-900: var(--dodo-color-base-cyan-100);
-  --dodo-color-info-950: var(--dodo-color-base-cyan-50);
 }

package/dist/styles/_shadow.css

@@ -0,0 +1,39 @@
+:root {
+  --dodo-shadow-color: #0000000d;
+}
+
+.dodo-shadow-1x {
+  --dodo-shadow: 0 1px var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-2x {
+  --dodo-shadow: 0 1px 2px 0 var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-3x {
+  --dodo-shadow: 0 1px 3px 0 var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-4x {
+  --dodo-shadow: 0 4px 6px -1px var(--dodo-shadow-color), 0 2px 4px -2px var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-5x {
+  --dodo-shadow: 0 10px 15px -3px var(--dodo-shadow-color), 0 4px 6px -4px var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-6x {
+  --dodo-shadow:
+    0 20px 25px -5px var(--dodo-shadow-color), 0 8px 10px -6px var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-7x {
+  --dodo-shadow: 0 25px 50px -12px var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}

package/dist/styles/global.css

@@ -2,4 +2,5 @@
 @import '_colors-base.css';
 @import '_colors.css';
 @import '_breakpoint.css';
+@import '_shadow.css';
 @import '_components.css';

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 /** Component Size */
 export type ComponentSize = 'normal' | 'small' | 'large';
+/** Component Roundness */
 export type ComponentRoundness = '1x' | '2x' | '3x';
 export type ComponentRoundnessFull = 'full';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "scripts": {
     "build": "vite build && pnpm run prepack",
     "preview": "vite preview",

package/src/lib/index.ts

@@ -45,3 +45,10 @@ export type {
   SimpleSelectFocusEvent,
   SimpleSelectOption,
 } from '$lib/stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+
+/** Layout: Paper */
+export { default as Paper } from '$lib/stories/components/Layout/Paper/Paper.svelte';
+export type {
+  PaperRoundness,
+  PaperShadow,
+} from '$lib/stories/components/Layout/Paper/Paper.svelte';

package/src/lib/stories/components/Form/Button/Button.stories.svelte

@@ -11,7 +11,7 @@
     },
     color: {
       control: { type: 'select' },
-      options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
+      options: ['default', 'secondary', 'primary', 'safe', 'warning', 'danger'],
     },
     variant: {
       control: { type: 'select' },

package/src/lib/stories/components/Form/Button/Button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  export type ButtonColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
+  export type ButtonColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
   export type ButtonRoundness = ComponentRoundness | false | ComponentRoundnessFull;
   export type ButtonLinkTarget =
     | '_self'
@@ -192,10 +192,10 @@
 
     @include generate-dodo-ui-button-colors(default);
     @include generate-dodo-ui-button-colors(primary);
+    @include generate-dodo-ui-button-colors(secondary);
     @include generate-dodo-ui-button-colors(safe);
     @include generate-dodo-ui-button-colors(warning);
     @include generate-dodo-ui-button-colors(danger);
-    @include generate-dodo-ui-button-colors(info);
   }
 
   :global(.dodo-theme--dark) {
@@ -204,10 +204,10 @@
 
     @include generate-dodo-ui-button-colors-dark(default);
     @include generate-dodo-ui-button-colors-dark(primary);
+    @include generate-dodo-ui-button-colors-dark(secondary);
     @include generate-dodo-ui-button-colors-dark(safe);
     @include generate-dodo-ui-button-colors-dark(warning);
     @include generate-dodo-ui-button-colors-dark(danger);
-    @include generate-dodo-ui-button-colors-dark(info);
   }
 
   .dodo-ui-Button {
@@ -273,10 +273,10 @@
     &.color {
       @include generate-dodo-ui-button-color(default);
       @include generate-dodo-ui-button-color(primary);
+      @include generate-dodo-ui-button-color(secondary);
       @include generate-dodo-ui-button-color(safe);
       @include generate-dodo-ui-button-color(warning);
       @include generate-dodo-ui-button-color(danger);
-      @include generate-dodo-ui-button-color(info);
     }
 
     &[disabled] {

package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte

@@ -19,10 +19,12 @@
   <Button>Click me!</Button>
 </Story>
 <Story name="Primary" args={{ color: 'primary' }}><Button color="primary">Click me!</Button></Story>
+<Story name="Secondary" args={{ color: 'secondary' }}>
+  <Button color="secondary">Click me!</Button>
+</Story>
 <Story name="Safe" args={{ color: 'safe' }}><Button color="safe">Click me!</Button></Story>
 <Story name="Warning" args={{ color: 'warning' }}><Button color="warning">Click me!</Button></Story>
 <Story name="Danger" args={{ color: 'danger' }}><Button color="danger">Click me!</Button></Story>
-<Story name="Info" args={{ color: 'info' }}><Button color="info">Click me!</Button></Story>
 
 <Story
   name="Default Solid"
@@ -33,6 +35,9 @@
 <Story name="Primary Solid" args={{ color: 'primary', variant: 'solid' }}>
   <Button color="primary" variant="solid">Click me!</Button>
 </Story>
+<Story name="Secondary Solid" args={{ color: 'secondary', variant: 'solid' }}>
+  <Button color="secondary" variant="solid">Click me!</Button>
+</Story>
 <Story name="Safe Solid" args={{ color: 'safe', variant: 'solid' }}>
   <Button color="safe" variant="solid">Click me!</Button>
 </Story>
@@ -42,9 +47,6 @@
 <Story name="Danger Solid" args={{ color: 'danger', variant: 'solid' }}>
   <Button color="danger" variant="solid">Click me!</Button>
 </Story>
-<Story name="Info Solid" args={{ color: 'info', variant: 'solid' }}>
-  <Button color="info" variant="solid">Click me!</Button>
-</Story>
 
 <Story name="Default Outline" args={{ outline: true, disabled: false, compact: false }}>
   <Button outline>Click me!</Button>
@@ -52,6 +54,9 @@
 <Story name="Primary Outline" args={{ outline: true, color: 'primary' }}>
   <Button color="primary" outline>Click me!</Button>
 </Story>
+<Story name="Secondary Outline" args={{ outline: true, color: 'secondary' }}>
+  <Button color="secondary" outline>Click me!</Button>
+</Story>
 <Story name="Safe Outline" args={{ outline: true, color: 'safe' }}>
   <Button color="safe" outline>Click me!</Button>
 </Story>
@@ -61,6 +66,3 @@
 <Story name="Danger Outline" args={{ outline: true, color: 'danger' }}>
   <Button color="danger" outline>Click me!</Button>
 </Story>
-<Story name="Info Outline" args={{ outline: true, color: 'info' }}>
-  <Button color="info" outline>Click me!</Button>
-</Story>

package/src/lib/stories/components/Form/Message/Color/Color.stories.svelte

@@ -19,6 +19,10 @@
   <Message color="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
 </Story>
 
+<Story name="Secondary" args={{ color: 'secondary' }}>
+  <Message color="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
 <Story name="Safe" args={{ color: 'safe' }}>
   <Message color="safe">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
 </Story>
@@ -30,7 +34,3 @@
 <Story name="Danger" args={{ color: 'danger' }}>
   <Message color="danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
 </Story>
-
-<Story name="Info" args={{ color: 'info' }}>
-  <Message color="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>

package/src/lib/stories/components/Form/Message/Message.stories.svelte

@@ -6,7 +6,7 @@
   export const storyMessageArgTypes: StoryBookArgTypes = {
     color: {
       control: { type: 'select' },
-      options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
+      options: ['default', 'primary', 'secondary', 'safe', 'warning', 'danger'],
     },
     size: {
       control: { type: 'select' },

package/src/lib/stories/components/Form/Message/Message.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  export type MessageColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
+  export type MessageColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
 </script>
 
 <script lang="ts">
@@ -72,6 +72,10 @@
         color: var(--dodo-color-primary-600);
       }
 
+      &--secondary {
+        color: var(--dodo-color-secondary-600);
+      }
+
       &--safe {
         color: var(--dodo-color-safe-600);
       }
@@ -83,10 +87,6 @@
       &--danger {
         color: var(--dodo-color-danger-600);
       }
-
-      &--info {
-        color: var(--dodo-color-info-600);
-      }
     }
   }
 </style>

package/src/lib/stories/components/Layout/Paper/Paper.stories.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Paper from './Paper.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+
+  export const storyPaperArgTypes: StoryBookArgTypes = {
+    roundness: {
+      control: { type: 'select' },
+      options: [false, '1x', '2x', '3x', 'full'],
+    },
+    shadow: {
+      control: { type: 'select' },
+      options: [false, '1x', '2x', '3x', '4x', '5x', '6x', '7x'],
+    },
+  };
+
+  // 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>
+
+<!-- ⚠️ Test Paper: Do not use! -->
+<Story
+  name="Test Paper"
+  args={{
+    _unsafeChildrenStringForTesting: 'Hola!',
+  }}
+/>
+
+<!-- Paper with default style -->
+<Story name="Default">
+  <Paper>Hola!</Paper>
+</Story>

package/src/lib/stories/components/Layout/Paper/Paper.svelte

@@ -0,0 +1,91 @@
+<script lang="ts" module>
+  export type PaperRoundness = ComponentRoundness | false | ComponentRoundnessFull;
+  export type PaperShadow = false | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x';
+</script>
+
+<script lang="ts">
+  import type { ComponentRoundness, ComponentRoundnessFull } from '$lib/types.js';
+  import type { Snippet } from 'svelte';
+
+  interface PaperProps {
+    /** Paper contents goes here */
+    children?: Snippet;
+    /** Paper ref */
+    ref?: HTMLDivElement;
+    /** How round should the border radius be? */
+    roundness?: PaperRoundness;
+    /** Shadow elevation */
+    shadow?: PaperShadow;
+    /** Custom css class*/
+    class?: string;
+    /** Id */
+    id?: string;
+    /** Test: ⚠️ Unsafe Children String. Do Not use*/
+    _unsafeChildrenStringForTesting?: string;
+  }
+
+  let {
+    children,
+    roundness = '1x',
+    shadow = '1x',
+    id,
+    class: className = '',
+    _unsafeChildrenStringForTesting,
+    ref = $bindable<HTMLDivElement>(),
+  }: PaperProps = $props();
+</script>
+
+<div
+  class={[
+    'dodo-ui-Paper',
+    `roundness--${roundness}`,
+    `${shadow ? `shadow--${shadow} dodo-shadow-${shadow}` : `shadow--${shadow}`}`,
+    className,
+  ].join(' ')}
+  {id}
+  bind:this={ref}
+>
+  {#if children}
+    {@render children()}
+  {:else if _unsafeChildrenStringForTesting}
+    {_unsafeChildrenStringForTesting}
+  {/if}
+</div>
+
+<style lang="scss">
+  :global(:root) {
+    --dodo-ui-Paper-bg: var(--dodo-color-white);
+  }
+
+  :global(.dodo-theme--dark) {
+    --dodo-ui-Paper-bg: var(--dodo-color-default-100);
+  }
+
+  .dodo-ui-Paper {
+    outline: none;
+    transition: all 150ms;
+    font-family: inherit;
+    color: inherit;
+
+    background-color: var(--dodo-ui-Paper-bg);
+    overflow: hidden;
+
+    &.roundness {
+      &--1x {
+        border-radius: var(--dodo-ui-element-roundness-1x);
+      }
+
+      &--2x {
+        border-radius: var(--dodo-ui-element-roundness-2x);
+      }
+
+      &--3x {
+        border-radius: var(--dodo-ui-element-roundness-3x);
+      }
+
+      &--full {
+        border-radius: 50%;
+      }
+    }
+  }
+</style>

package/src/lib/stories/components/Layout/Paper/Roundness/Roundness.stories.svelte

@@ -0,0 +1,30 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Paper from '../Paper.svelte';
+  import { storyPaperArgTypes } from '../Paper.stories.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="Roundness 1x">
+  <Paper>Hola!</Paper>
+</Story>
+
+<Story name="Roundness 2x" args={{ roundness: '2x' }}><Paper roundness="2x">Hola!</Paper></Story>
+
+<Story name="Roundness 3x" args={{ roundness: '3x' }}>
+  <Paper roundness="3x">Hola!</Paper>
+</Story>
+
+<Story name="Roundness False" args={{ roundness: false }}>
+  <Paper roundness={false}>Hola!</Paper>
+</Story>
+
+<Story name="Roundness Full" args={{ roundness: 'full' }}>
+  <Paper roundness="full">Hola!</Paper>
+</Story>

package/src/lib/stories/components/Layout/Paper/Shadow/Shadow.stories.svelte

@@ -0,0 +1,42 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Paper from '../Paper.svelte';
+  import { storyPaperArgTypes } from '../Paper.stories.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="Shadow 1x">
+  <Paper>Hola!</Paper>
+</Story>
+
+<Story name="Shadow 2x" args={{ shadow: '2x' }}><Paper shadow="2x">Hola!</Paper></Story>
+
+<Story name="Shadow 3x" args={{ shadow: '3x' }}>
+  <Paper shadow="3x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 4x" args={{ shadow: '4x' }}>
+  <Paper shadow="4x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 5x" args={{ shadow: '5x' }}>
+  <Paper shadow="5x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 6x" args={{ shadow: '6x' }}>
+  <Paper shadow="6x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow 7x" args={{ shadow: '7x' }}>
+  <Paper shadow="7x">Hola!</Paper>
+</Story>
+
+<Story name="Shadow False" args={{ shadow: false }}>
+  <Paper shadow={false}>Hola!</Paper>
+</Story>

package/src/lib/styles/_colors.css

@@ -33,6 +33,19 @@
   --dodo-color-primary-900: var(--dodo-color-base-violet-900);
   --dodo-color-primary-950: var(--dodo-color-base-violet-950);
 
+  /* Secondary color */
+  --dodo-color-secondary-50: var(--dodo-color-base-cyan-50);
+  --dodo-color-secondary-100: var(--dodo-color-base-cyan-100);
+  --dodo-color-secondary-200: var(--dodo-color-base-cyan-200);
+  --dodo-color-secondary-300: var(--dodo-color-base-cyan-300);
+  --dodo-color-secondary-400: var(--dodo-color-base-cyan-400);
+  --dodo-color-secondary-500: var(--dodo-color-base-cyan-500);
+  --dodo-color-secondary-600: var(--dodo-color-base-cyan-600);
+  --dodo-color-secondary-700: var(--dodo-color-base-cyan-700);
+  --dodo-color-secondary-800: var(--dodo-color-base-cyan-800);
+  --dodo-color-secondary-900: var(--dodo-color-base-cyan-900);
+  --dodo-color-secondary-950: var(--dodo-color-base-cyan-950);
+
   /* Safe color */
   --dodo-color-safe-50: var(--dodo-color-base-emerald-50);
   --dodo-color-safe-100: var(--dodo-color-base-emerald-100);
@@ -71,19 +84,6 @@
   --dodo-color-danger-800: var(--dodo-color-base-red-800);
   --dodo-color-danger-900: var(--dodo-color-base-red-900);
   --dodo-color-danger-950: var(--dodo-color-base-red-950);
-
-  /* Info color */
-  --dodo-color-info-50: var(--dodo-color-base-cyan-50);
-  --dodo-color-info-100: var(--dodo-color-base-cyan-100);
-  --dodo-color-info-200: var(--dodo-color-base-cyan-200);
-  --dodo-color-info-300: var(--dodo-color-base-cyan-300);
-  --dodo-color-info-400: var(--dodo-color-base-cyan-400);
-  --dodo-color-info-500: var(--dodo-color-base-cyan-500);
-  --dodo-color-info-600: var(--dodo-color-base-cyan-600);
-  --dodo-color-info-700: var(--dodo-color-base-cyan-700);
-  --dodo-color-info-800: var(--dodo-color-base-cyan-800);
-  --dodo-color-info-900: var(--dodo-color-base-cyan-900);
-  --dodo-color-info-950: var(--dodo-color-base-cyan-950);
 }
 
 .dodo-theme--dark {
@@ -117,6 +117,19 @@
   --dodo-color-primary-900: var(--dodo-color-base-violet-100);
   --dodo-color-primary-950: var(--dodo-color-base-violet-50);
 
+  /* Dark: Secondary color */
+  --dodo-color-secondary-50: var(--dodo-color-base-cyan-950);
+  --dodo-color-secondary-100: var(--dodo-color-base-cyan-900);
+  --dodo-color-secondary-200: var(--dodo-color-base-cyan-800);
+  --dodo-color-secondary-300: var(--dodo-color-base-cyan-700);
+  --dodo-color-secondary-400: var(--dodo-color-base-cyan-600);
+  --dodo-color-secondary-500: var(--dodo-color-base-cyan-500);
+  --dodo-color-secondary-600: var(--dodo-color-base-cyan-400);
+  --dodo-color-secondary-700: var(--dodo-color-base-cyan-300);
+  --dodo-color-secondary-800: var(--dodo-color-base-cyan-200);
+  --dodo-color-secondary-900: var(--dodo-color-base-cyan-100);
+  --dodo-color-secondary-950: var(--dodo-color-base-cyan-50);
+
   /* Dark: Safe color */
   --dodo-color-safe-50: var(--dodo-color-base-emerald-950);
   --dodo-color-safe-100: var(--dodo-color-base-emerald-900);
@@ -155,17 +168,4 @@
   --dodo-color-danger-800: var(--dodo-color-base-red-200);
   --dodo-color-danger-900: var(--dodo-color-base-red-100);
   --dodo-color-danger-950: var(--dodo-color-base-red-50);
-
-  /* Dark: Info color */
-  --dodo-color-info-50: var(--dodo-color-base-cyan-950);
-  --dodo-color-info-100: var(--dodo-color-base-cyan-900);
-  --dodo-color-info-200: var(--dodo-color-base-cyan-800);
-  --dodo-color-info-300: var(--dodo-color-base-cyan-700);
-  --dodo-color-info-400: var(--dodo-color-base-cyan-600);
-  --dodo-color-info-500: var(--dodo-color-base-cyan-500);
-  --dodo-color-info-600: var(--dodo-color-base-cyan-400);
-  --dodo-color-info-700: var(--dodo-color-base-cyan-300);
-  --dodo-color-info-800: var(--dodo-color-base-cyan-200);
-  --dodo-color-info-900: var(--dodo-color-base-cyan-100);
-  --dodo-color-info-950: var(--dodo-color-base-cyan-50);
 }

package/src/lib/styles/_shadow.css

@@ -0,0 +1,39 @@
+:root {
+  --dodo-shadow-color: #0000000d;
+}
+
+.dodo-shadow-1x {
+  --dodo-shadow: 0 1px var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-2x {
+  --dodo-shadow: 0 1px 2px 0 var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-3x {
+  --dodo-shadow: 0 1px 3px 0 var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-4x {
+  --dodo-shadow: 0 4px 6px -1px var(--dodo-shadow-color), 0 2px 4px -2px var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-5x {
+  --dodo-shadow: 0 10px 15px -3px var(--dodo-shadow-color), 0 4px 6px -4px var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-6x {
+  --dodo-shadow:
+    0 20px 25px -5px var(--dodo-shadow-color), 0 8px 10px -6px var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}
+
+.dodo-shadow-7x {
+  --dodo-shadow: 0 25px 50px -12px var(--dodo-shadow-color);
+  box-shadow: var(--dodo-shadow);
+}

package/src/lib/styles/global.css

@@ -2,4 +2,5 @@
 @import '_colors-base.css';
 @import '_colors.css';
 @import '_breakpoint.css';
+@import '_shadow.css';
 @import '_components.css';

package/src/lib/types.ts

@@ -1,5 +1,6 @@
 /** Component Size */
 export type ComponentSize = 'normal' | 'small' | 'large';
 
+/** Component Roundness */
 export type ComponentRoundness = '1x' | '2x' | '3x';
 export type ComponentRoundnessFull = 'full';