@flightlesslabs/dodo-ui 0.4.0 → 0.6.0

package/dist/stories/developer tools/components/InputEnclosure/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/developer tools/components/InputEnclosure/Size/Size.stories.svelte

@@ -0,0 +1,16 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import InputEnclosure from '../InputEnclosure.svelte';
+  import { storyInputEnclosureArgTypes } from '../InputEnclosure.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: InputEnclosure,
+    tags: ['autodocs'],
+    argTypes: storyInputEnclosureArgTypes,
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

package/dist/stories/developer tools/components/InputEnclosure/Size/Size.stories.svelte.d.ts

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

@@ -0,0 +1,47 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import InputEnclosure from '../InputEnclosure.svelte';
+  import { storyInputEnclosureArgTypes } from '../InputEnclosure.stories.svelte';
+  import Icon from '@iconify/svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: InputEnclosure,
+    tags: ['autodocs'],
+    argTypes: storyInputEnclosureArgTypes,
+  });
+</script>
+
+<!-- InputEnclosure icon in front. -->
+<Story name="Icon Before">
+  <InputEnclosure>
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </InputEnclosure>
+</Story>
+
+<!-- InputEnclosure icon in front. -->
+<Story name="Icon After">
+  <InputEnclosure>
+    {#snippet after()}
+      <Icon icon="material-symbols:download-2" />
+    {/snippet}
+  </InputEnclosure>
+</Story>
+
+<Story name="Small" args={{ size: 'small' }}>
+  <InputEnclosure size="small">
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </InputEnclosure>
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <InputEnclosure size="large">
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </InputEnclosure>
+</Story>

package/dist/stories/developer tools/components/InputEnclosure/WithIcon/WithIcon.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default WithIcon;
+type WithIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const WithIcon: $$__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.4.0",
+  "version": "0.6.0",
   "scripts": {
     "build": "vite build && pnpm run prepack",
     "preview": "vite preview",

package/src/lib/index.ts

@@ -5,6 +5,9 @@ export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from '
 /** developer tools: components: UtilityButton */
 export { default as UtilityButton } from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
 
+/** developer tools: components: InputEnclosure */
+export { default as InputEnclosure } from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+
 /** Form: Button */
 export { default as Button } from '$lib/stories/components/Form/Button/Button.svelte';
 export type {
@@ -17,7 +20,6 @@ export type {
 /** Form: TextInput */
 export { default as TextInput } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
 export type {
-  TextInputRoundness,
   TextInputType,
   TextInputFocusEvent,
   TextInputClipboardEvent,
@@ -36,3 +38,17 @@ export { default as FormControl } from '$lib/stories/components/Form/FormControl
 /** Form: Message */
 export { default as Message } from '$lib/stories/components/Form/Message/Message.svelte';
 export type { MessageColor } from '$lib/stories/components/Form/Message/Message.svelte';
+
+/** Form: SimpleSelect */
+export { default as SimpleSelect } from '$lib/stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+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/FormControl/FormControl.svelte

@@ -52,7 +52,7 @@
 <style lang="scss">
   :global(:root) {
     --dodo-ui-FormControl-LabelSection-gap: 8px;
-    --dodo-ui-FormControl-errorMessage-gap: 16px;
+    --dodo-ui-FormControl-errorMessage-gap: 10px;
   }
 
   .dodo-ui-FormControl {

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

@@ -0,0 +1,36 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Message from '../Message.svelte';
+  import { storyMessageArgTypes } from '../Message.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Message,
+    tags: ['autodocs'],
+    argTypes: storyMessageArgTypes,
+  });
+</script>
+
+<Story name="Default">
+  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Primary" args={{ color: 'primary' }}>
+  <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>
+
+<Story name="Warning" args={{ color: 'warning' }}>
+  <Message color="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Danger" args={{ color: 'danger' }}>
+  <Message color="danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>

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

@@ -1,17 +1,24 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Message from './Message.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+
+  export const storyMessageArgTypes: StoryBookArgTypes = {
+    color: {
+      control: { type: 'select' },
+      options: ['default', 'primary', 'secondary', 'safe', 'warning', 'danger'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'small', 'large'],
+    },
+  };
 
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
     component: Message,
     tags: ['autodocs'],
-    argTypes: {
-      color: {
-        control: { type: 'select' },
-        options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
-      },
-    },
+    argTypes: storyMessageArgTypes,
   });
 </script>
 
@@ -26,23 +33,3 @@
 <Story name="Default">
   <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
 </Story>
-
-<Story name="Primary" args={{ color: 'primary' }}>
-  <Message color="primary">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>
-
-<Story name="Warning" args={{ color: 'warning' }}>
-  <Message color="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
-
-<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.svelte

@@ -1,8 +1,10 @@
 <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">
+  import type { ComponentSize } from '$lib/types.js';
+
   import type { Snippet } from 'svelte';
 
   interface MessageProps {
@@ -12,6 +14,8 @@
     ref?: HTMLDivElement;
     /** What color to use? */
     color?: MessageColor;
+    /** Message size */
+    size?: ComponentSize;
     /** Custom css class*/
     class?: string;
     /** Test: ⚠️ Unsafe Children String. Do Not use*/
@@ -24,10 +28,14 @@
     color = 'default',
     ref = $bindable<HTMLDivElement>(),
     _unsafeChildrenStringForTesting,
+    size = 'normal',
   }: MessageProps = $props();
 </script>
 
-<div class={['dodo-ui-Message', `color--${color}`, className].join(' ')} bind:this={ref}>
+<div
+  class={['dodo-ui-Message', `color--${color}`, `size--${size}`, className].join(' ')}
+  bind:this={ref}
+>
   {#if children}
     {@render children()}
   {:else if _unsafeChildrenStringForTesting}
@@ -37,11 +45,24 @@
 
 <style lang="scss">
   .dodo-ui-Message {
-    font-size: 1rem;
     letter-spacing: 0.3px;
     display: flex;
     font-family: inherit;
 
+    &.size {
+      &--normal {
+        font-size: 1rem;
+      }
+
+      &--small {
+        font-size: 0.9rem;
+      }
+
+      &--large {
+        font-size: 1.1rem;
+      }
+    }
+
     &.color {
       &--default {
         color: var(--dodo-color-default-800);
@@ -51,6 +72,10 @@
         color: var(--dodo-color-primary-600);
       }
 
+      &--secondary {
+        color: var(--dodo-color-secondary-600);
+      }
+
       &--safe {
         color: var(--dodo-color-safe-600);
       }
@@ -62,10 +87,6 @@
       &--danger {
         color: var(--dodo-color-danger-600);
       }
-
-      &--info {
-        color: var(--dodo-color-info-600);
-      }
     }
   }
 </style>

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

@@ -0,0 +1,24 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Message from '../Message.svelte';
+  import { storyMessageArgTypes } from '../Message.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Message,
+    tags: ['autodocs'],
+    argTypes: storyMessageArgTypes,
+  });
+</script>
+
+<Story name="Normal">
+  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Small" args={{ size: 'small' }}>
+  <Message size="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <Message size="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>