@flightlesslabs/dodo-ui 0.6.5 → 0.7.0

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 Background 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 Background 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>

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

@@ -1,16 +1,18 @@
-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 {
+import type { ComponentRoundness } from '../../../../types/roundness.js';
+import type { ComponentShadow } from '../../../../types/shadow.js';
+import type { ComponentWeight } from '../../../../types/weight.js';
+import { type ComponentColor } from '../../../../types/colors.js';
+export type PaperColor = 'default' | ComponentColor;
+export declare const paperColorArray: PaperColor[];
+export interface PaperProps {
     /** Paper contents goes here */
     children?: Snippet;
     /** Paper ref */
     ref?: HTMLDivElement;
     /** How round should the border radius be? */
-    roundness?: PaperRoundness;
+    roundness?: ComponentRoundness;
     /** Shadow elevation */
-    shadow?: PaperShadow;
+    shadow?: ComponentShadow;
     /** Custom css class */
     class?: string;
     /** Paper Width */
@@ -19,9 +21,18 @@ interface PaperProps {
     height?: string;
     /** Id */
     id?: string;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
+    /** Add a border around  paper */
+    outline?: boolean;
+    /** What color to use? */
+    color?: PaperColor;
+    /** How should paper appear? */
+    variant?: ComponentWeight;
+    /** Custom background color. Use CSS compatible value */
+    customBackgroundColor?: string;
+    /** Custom border color. Use CSS compatible value */
+    customBorderColor?: string;
 }
+import type { Snippet } from 'svelte';
 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

@@ -11,20 +11,15 @@
   });
 </script>
 
-<Story name="Roundness 1x">
-  <Paper>Hola!</Paper>
-</Story>
+<Story name="Roundness 1" args={{ height: '100px', color: 'primary' }}></Story>
 
-<Story name="Roundness 2x" args={{ roundness: '2x' }}><Paper roundness="2x">Hola!</Paper></Story>
+<Story name="Roundness 2" args={{ roundness: 2, height: '100px', color: 'primary' }}></Story>
 
-<Story name="Roundness 3x" args={{ roundness: '3x' }}>
-  <Paper roundness="3x">Hola!</Paper>
-</Story>
+<Story name="Roundness 3" args={{ roundness: 3, height: '100px', color: 'primary' }}></Story>
 
-<Story name="Roundness False" args={{ roundness: false }}>
-  <Paper roundness={false}>Hola!</Paper>
-</Story>
+<Story name="Roundness 0" args={{ roundness: 0, height: '100px', color: 'primary' }}></Story>
 
-<Story name="Roundness Full" args={{ roundness: 'full' }}>
-  <Paper roundness="full">Hola!</Paper>
-</Story>
+<Story
+  name="Roundness Full"
+  args={{ roundness: 'full', height: '100px', width: '100%', color: 'primary' }}
+></Story>

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

@@ -11,32 +11,14 @@
   });
 </script>
 
-<Story name="Shadow 1x">
-  <Paper>Hola!</Paper>
-</Story>
+<Story name="Shadow 0" args={{ height: '100px' }}>Hola!</Story>
 
-<Story name="Shadow 2x" args={{ shadow: '2x' }}><Paper shadow="2x">Hola!</Paper></Story>
+<Story name="Shadow 1" args={{ shadow: 1, height: '100px' }}>Hola!</Story>
 
-<Story name="Shadow 3x" args={{ shadow: '3x' }}>
-  <Paper shadow="3x">Hola!</Paper>
-</Story>
+<Story name="Shadow 2" args={{ shadow: 2, height: '100px' }}>Hola!</Story>
 
-<Story name="Shadow 4x" args={{ shadow: '4x' }}>
-  <Paper shadow="4x">Hola!</Paper>
-</Story>
+<Story name="Shadow 3" args={{ shadow: 3, height: '100px' }}>Hola!</Story>
 
-<Story name="Shadow 5x" args={{ shadow: '5x' }}>
-  <Paper shadow="5x">Hola!</Paper>
-</Story>
+<Story name="Shadow 4" args={{ shadow: 4, height: '100px' }}>Hola!</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>
+<Story name="Shadow 5" args={{ shadow: 5, height: '100px' }}>Hola!</Story>

package/dist/stories/components/Layout/Paper/utils/scss/mixins.scss

@@ -0,0 +1,46 @@
+/// Mixin: generate-dodo-ui-paper-colors
+/// Generates CSS custom properties for Dodo UI paper styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-paper-colors($color-name) {
+  --dodo-ui-Paper-outline-#{$color-name}: var(--dodo-color-#{$color-name}-400);
+  --dodo-ui-Paper-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-Paper-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+}
+
+/// Mixin: generate-dodo-ui-paper-colors
+/// Generates CSS custom properties for Dodo UI paper styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-paper-colors-dark($color-name) {
+  --dodo-ui-Paper-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-Paper-text-#{$color-name}-bg: color-mix(
+    in oklab,
+    var(--dodo-color-#{$color-name}-50) 80%,
+    #00000080
+  );
+  --dodo-ui-Paper-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+}
+
+/// Mixin: generate-dodo-ui-paper-color
+/// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
+/// @param {String} $theme - e.g., default, safe, danger, etc.
+@mixin generate-dodo-ui-paper-color($theme) {
+  &--#{$theme} {
+    &.variant {
+      &--text {
+        color: var(--dodo-color-#{$theme}-800);
+        background-color: var(--dodo-ui-Paper-text-#{$theme}-bg);
+
+        &.outline {
+          border-color: var(--dodo-ui-Paper-outline-#{$theme});
+        }
+      }
+
+      &--solid {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-Paper-solid-#{$theme}-bg);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { storySeparatorArgTypes } from '../Separator.stories.svelte';
+  import Separator from '../Separator.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Separator,
+    tags: ['autodocs'],
+    argTypes: storySeparatorArgTypes,
+  });
+</script>
+
+<Story name="Neutral">Hola!</Story>
+<Story name="Primary" args={{ color: 'primary' }}>Hola!</Story>
+<Story name="Secondary" args={{ color: 'secondary' }}>Hola!</Story>
+<Story name="Safe" args={{ color: 'safe' }}>Hola!</Story>
+<Story name="Warning" args={{ color: 'warning' }}>Hola!</Story>
+<Story name="Danger" args={{ color: 'danger' }}>Hola!</Story>

package/dist/stories/components/Layout/Separator/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/Separator/Separator.stories.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Separator, { separatorOrientationArray } from './Separator.svelte';
+import { componentColorArray } from '../../../../types/colors.js';
+export const storySeparatorArgTypes = {
+    color: {
+        control: { type: 'select' },
+        options: componentColorArray,
+    },
+    orientation: {
+        control: { type: 'select' },
+        options: separatorOrientationArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Separator,
+    tags: ['autodocs'],
+    argTypes: storySeparatorArgTypes,
+});
+</script>
+
+<Story name="Default" />
+
+<Story name="FixedWidth" args={{ width: '200px' }} />
+
+<Story name="VerticalOrientation" args={{ orientation: 'vertical', height: '200px' }} />