@flightlesslabs/dodo-ui 0.1.4 → 0.2.0

package/dist/stories/Home.mdx

@@ -1,10 +1,60 @@
-<img
-  src="dodo-circle-6.png"
-  style={{ width: 200, height: 'auto', display: 'flex', justifySelf: 'center' }}
+import { Source } from '@storybook/blocks';
+import item from '../../../package.json?raw';
+
+<main style={{ textAlign: 'center' }}>
+
+<img src="dodo-circle-6.png" style={{ width: 200, height: 'auto' }} />
+
+# Dodo UI
+
+<h3 style={{ fontWeight: 500 }}>v{JSON.parse(item)?.version}</h3>
+
+<h3 style={{ fontWeight: 400 }}>An open-source, opinionated UI framework for Svelte.</h3>
+</main>
+
+<br />
+<br />
+
+## Install
+
+pnpm
+
+<Source
+  dark
+  language="bash"
+  code={`
+pnpm add @flightlesslabs/dodo-ui
+`}
 />
 
-<h1 style={{ textAlign: 'center' }}>Dodo UI</h1>
+npm
+
+<Source
+  dark
+  language="bash"
+  code={`
+npm i @flightlesslabs/dodo-ui
+`}
+/>
+
+## Use one of the components
+
+Lets import [Button](?path=/docs/components-form-button--docs) component
+
+<Source
+  dark
+  language="js"
+  code={`
+import { Button } '@flightlesslabs/dodo-ui';
+`}
+/>
+
+Checkout documentation for [Button](?path=/docs/components-form-button--docs)
+
+## Explore more
 
-<div style={{ textAlign: 'center', fontSize: '1rem', fontWeight: 400 }}>
-  An open-source, opinionated UI framework for Svelte.
-</div>
+- [Themes](?path=/docs/philosophy-themes--docs)
+- [Colors](?path=/docs/philosophy-colors--docs)
+- [Adjust Color Opacity](?path=/docs/philosophy-colors--docs#adjusting-opacity)
+- [Github](https://github.com/flightlesslabs/dodo-ui)
+- [NPM](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)

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

@@ -8,7 +8,7 @@ export const storyButtonArgTypes = {
     },
     color: {
         control: { type: 'select' },
-        options: ['primary', 'secondary', 'safe', 'warning', 'danger', 'info'],
+        options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
     },
     variant: {
         control: { type: 'select' },
@@ -20,7 +20,7 @@ export const storyButtonArgTypes = {
     },
     size: {
         control: { type: 'select' },
-        options: ['small', 'medium', 'large'],
+        options: ['normal', 'small', 'large'],
     },
 };
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">const { children, type = 'button', size = 'normal', color = 'default', roundness = 1, variant = 'text', outline = false, compact = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, _unsafeChildrenStringForTesting, } = $props();
+<script lang="ts">const { children, type = 'button', size = 'normal', color = 'default', roundness = '1x', variant = 'text', outline = false, compact = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, _unsafeChildrenStringForTesting, } = $props();
 export {};
 </script>
 
@@ -205,18 +205,15 @@ export {};
   padding: 0 16px;
   min-width: 85px;
 }
-.dodo-ui-button.roundness--1 {
+.dodo-ui-button.roundness--1x {
   border-radius: var(--dodo-ui-element-roundness-1);
 }
-.dodo-ui-button.roundness--2 {
+.dodo-ui-button.roundness--2x {
   border-radius: var(--dodo-ui-element-roundness-2);
 }
-.dodo-ui-button.roundness--3 {
+.dodo-ui-button.roundness--3x {
   border-radius: var(--dodo-ui-element-roundness-3);
 }
-.dodo-ui-button.roundness--4 {
-  border-radius: var(--dodo-ui-element-roundness-4);
-}
 .dodo-ui-button.roundness--full {
   border-radius: 50%;
 }

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

@@ -15,23 +15,26 @@
   });
 </script>
 
-<Story
-  name="Roundness1"
-  args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
->
-  <Button roundness="full">Click me!</Button>
+<Story name="Roundness 1x" args={{ outline: false, disabled: false, compact: false }}>
+  <Button>Click me!</Button>
 </Story>
 
-<Story name="Roundness2" args={{ outline: false, disabled: false, compact: false, roundness: 2 }}>
-  <Button roundness={2}>Click me!</Button>
+<Story
+  name="Roundness 2x"
+  args={{ outline: false, disabled: false, compact: false, roundness: '2x' }}
+>
+  <Button roundness="2x">Click me!</Button>
 </Story>
 
-<Story name="Roundness3" args={{ outline: false, disabled: false, compact: false, roundness: 3 }}>
-  <Button roundness={3}>Click me!</Button>
+<Story
+  name="Roundness 3x"
+  args={{ outline: false, disabled: false, compact: false, roundness: '3x' }}
+>
+  <Button roundness="3x">Click me!</Button>
 </Story>
 
 <Story
-  name="RoundnessFalse"
+  name="Roundness False"
   args={{ outline: false, disabled: false, compact: false, roundness: false }}
 >
   <Button roundness={false}>Click me!</Button>
@@ -39,7 +42,7 @@
 
 <!-- Button with 50% roundness usefull for icon (Compact) buttons -->
 <Story
-  name="RoundnessFull"
+  name="Roundness Full"
   args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
 >
   <Button roundness="full">C</Button>

package/dist/stories/philosophy/Colors/Colors.mdx

@@ -0,0 +1,43 @@
+import { Meta, Story, Source } from '@storybook/blocks';
+import * as ColorsStories from './Colors.stories.svelte';
+import * as OpacityStories from './Opacity.stories.svelte';
+
+<Meta of={ColorsStories} />
+
+# Colors
+
+We are using an extensive color pallet identical to [Tailwind Css](https://tailwindcss.com/docs/colors) Colors. The colors are adjusted for dark and light themes.
+
+## Main Colors
+
+<Story of={ColorsStories.Main} />
+
+Neutral pallet
+
+<Story of={ColorsStories.ColorsNeutral} />
+
+Constant Colors
+
+<Story of={ColorsStories.ColorsConstant} />
+
+## Base Color
+
+<Story of={ColorsStories.ColorsBase} />
+
+Neutral pallet
+
+<Story of={ColorsStories.BaseColorsNeutral} />
+
+## Adjusting opacity
+
+Opacity can be adjusted using css `color-mix` function.
+
+<Source
+  dark
+  language="css"
+  code={`
+color-mix(in oklab, var(--dodo-color-primary-800) 10%, transparent)
+`}
+/>
+
+<Story of={OpacityStories.Main} meta={OpacityStories} />

package/dist/stories/philosophy/Colors/Colors.stories.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Colors from './Colors.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Colors,
+    args: {
+        swatchType: 'colors',
+    },
+});
+</script>
+
+<Story name="Main" />
+
+<Story name="ColorsNeutral" args={{ swatchType: 'colors-neutral' }} />
+
+<Story name="ColorsConstant" args={{ swatchType: 'colors-constant' }} />
+
+<Story name="ColorsBase" args={{ swatchType: 'base-colors' }} />
+
+<Story name="BaseColorsNeutral" args={{ swatchType: 'base-colors-neutral' }} />

package/dist/stories/philosophy/Colors/Colors.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Colors from './Colors.svelte';
+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 Colors: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Colors = InstanceType<typeof Colors>;
+export default Colors;

package/dist/stories/philosophy/Colors/Colors.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">import Swatches from './Swatches/Swatches.svelte';
+import { colorPalette, colorPaletteBase, colorPaletteNeutral } from './utils/color.js';
+const { swatchType } = $props();
+</script>
+
+<div class="Colors">
+  {#if swatchType === 'base-colors'}
+    {#each colorPaletteBase as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-base-" isColorPaletteValues />
+    {/each}
+  {:else if swatchType === 'base-colors-neutral'}
+    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-base-" />
+    {/each}
+  {:else if swatchType === 'colors'}
+    {#each colorPalette as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} isColorPaletteValues />
+    {/each}
+  {:else if swatchType === 'colors-neutral'}
+    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} />
+    {/each}
+  {:else if swatchType === 'colors-constant'}
+    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-constant-" />
+    {/each}
+  {/if}
+</div>
+
+<style>.Colors {
+  display: flex;
+  flex-wrap: wrap;
+}</style>

package/dist/stories/philosophy/Colors/Colors.svelte.d.ts

@@ -0,0 +1,6 @@
+interface ColorsProps {
+    swatchType?: 'base-colors' | 'base-colors-neutral' | 'colors' | 'colors-neutral' | 'colors-constant';
+}
+declare const Colors: import("svelte").Component<ColorsProps, {}, "">;
+type Colors = ReturnType<typeof Colors>;
+export default Colors;

package/dist/stories/philosophy/Colors/Opacity.stories.svelte

@@ -0,0 +1,9 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Opacity from './Opacity.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Opacity,
+});
+</script>
+
+<Story name="Main" />

package/dist/stories/philosophy/Colors/Opacity.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Opacity from './Opacity.svelte';
+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 Opacity: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Opacity = InstanceType<typeof Opacity>;
+export default Opacity;

package/dist/stories/philosophy/Colors/Opacity.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">import Palette from './Swatches/Palette.svelte';
+</script>
+
+<div class="Opacity">
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 10%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 20%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 30%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 40%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 50%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 60%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 70%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 80%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 90%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 100%, transparent)" />
+</div>
+
+<style>.Opacity {
+  display: flex;
+  flex-wrap: wrap;
+}</style>

package/dist/stories/philosophy/Colors/Opacity.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Opacity: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Opacity = InstanceType<typeof Opacity>;
+export default Opacity;

package/dist/stories/philosophy/Colors/Swatches/Palette.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">"use strict";
+const { backgroundColor } = $props();
+</script>
+
+<span class="Palette" style={`background-color: ${backgroundColor};`}></span>
+
+<style>.Palette {
+  display: flex;
+  width: 30px;
+  height: 30px;
+  margin-right: 8px;
+  border-radius: 4px;
+  border: 1px solid;
+  border-color: color-mix(in oklab, var(--dodo-color-default-800) 20%, transparent);
+}</style>

package/dist/stories/philosophy/Colors/Swatches/Palette.svelte.d.ts

@@ -0,0 +1,6 @@
+interface PaletteProps {
+    backgroundColor: string;
+}
+declare const Palette: import("svelte").Component<PaletteProps, {}, "">;
+type Palette = ReturnType<typeof Palette>;
+export default Palette;

package/dist/stories/philosophy/Colors/Swatches/Swatch.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">import Palette from './Palette.svelte';
+const { colorPalette, colorPaletteValue, prefix = '--dodo-color-' } = $props();
+</script>
+
+<div class="Swatch">
+  {#if colorPaletteValue}
+    <Palette backgroundColor={`var(${prefix}${colorPalette}-${colorPaletteValue})`} />
+  {:else}
+    <Palette backgroundColor={`var(${prefix}${colorPalette})`} />
+  {/if}
+  <div class="colorPaletteValue">{colorPaletteValue}</div>
+</div>
+
+<style>.Swatch {
+  color: var(--dodo-color-default-900);
+  display: flex;
+  align-items: center;
+}</style>

package/dist/stories/philosophy/Colors/Swatches/Swatch.svelte.d.ts

@@ -0,0 +1,8 @@
+interface SwatchProps {
+    colorPalette: string;
+    colorPaletteValue?: string;
+    prefix?: string;
+}
+declare const Swatch: import("svelte").Component<SwatchProps, {}, "">;
+type Swatch = ReturnType<typeof Swatch>;
+export default Swatch;

package/dist/stories/philosophy/Colors/Swatches/Swatches.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import { colorPaletteValues } from '../utils/color.js';
+import Swatch from './Swatch.svelte';
+const { colorPalette, prefix, isColorPaletteValues = false } = $props();
+</script>
+
+<ul class="Swatches">
+  <b>{colorPalette}</b>
+
+  {#if isColorPaletteValues}
+    {#each colorPaletteValues as colorPaletteValue (colorPaletteValue)}
+      <li>
+        <Swatch {colorPalette} {colorPaletteValue} {prefix} />
+      </li>
+    {/each}
+  {:else}
+    <li>
+      <Swatch {colorPalette} {prefix} />
+    </li>
+  {/if}
+</ul>
+
+<style>.Swatches {
+  color: var(--dodo-color-default-900);
+  margin: 0;
+  padding: 0;
+  width: 100px;
+  margin: 16px 0;
+}
+.Swatches b {
+  text-transform: capitalize;
+  margin-bottom: 16px;
+  display: block;
+  font-weight: 500;
+}
+.Swatches li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}</style>

package/dist/stories/philosophy/Colors/Swatches/Swatches.svelte.d.ts

@@ -0,0 +1,8 @@
+interface SwatchesProps {
+    colorPalette: string;
+    prefix?: string;
+    isColorPaletteValues?: boolean;
+}
+declare const Swatches: import("svelte").Component<SwatchesProps, {}, "">;
+type Swatches = ReturnType<typeof Swatches>;
+export default Swatches;

package/dist/stories/philosophy/Colors/utils/color.d.ts

@@ -0,0 +1,4 @@
+export declare const colorPaletteBase: string[];
+export declare const colorPaletteNeutral: string[];
+export declare const colorPalette: string[];
+export declare const colorPaletteValues: string[];

package/dist/stories/philosophy/Colors/utils/color.js

@@ -0,0 +1,38 @@
+export const colorPaletteBase = [
+    'red',
+    'orange',
+    'amber',
+    'yellow',
+    'lime',
+    'green',
+    'emerald',
+    'teal',
+    'cyan',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose',
+    'slate',
+    'gray',
+    'zinc',
+    'neutral',
+    'stone',
+];
+export const colorPaletteNeutral = ['black', 'white'];
+export const colorPalette = ['default', 'primary', 'safe', 'warning', 'danger', 'info'];
+export const colorPaletteValues = [
+    '50',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+    '950',
+];

package/dist/stories/philosophy/Themes.mdx

@@ -0,0 +1,23 @@
+import { Source } from '@storybook/blocks';
+import darkThemeToggleImage from '../assets/dark-theme-toggle.png';
+
+# Themes
+
+## Dark theme
+
+dark theme can be activated by adding `.dodo-theme--dark` class on the top container.
+
+<Source
+  dark
+  language="html"
+  code={`
+ <body class="dodo-theme--dark">
+ ...
+`}
+/>
+
+## Toggle theme in documentation
+
+Use the moon icon to toogle theme in documentation mode
+
+<img src={darkThemeToggleImage} />

package/dist/styles/_colors.css

@@ -1,24 +1,24 @@
 :root {
-  /* Base colors */
+  /* Neutral colors */
   --dodo-color-black: var(--dodo-color-base-black);
   --dodo-color-white: var(--dodo-color-base-white);
 
-  /* Base colors constants */
+  /* Constants colors */
   --dodo-color-constant-black: var(--dodo-color-base-black);
   --dodo-color-constant-white: var(--dodo-color-base-white);
 
   /* Default color */
-  --dodo-color-default-50: var(--dodo-color-base-slate-50);
-  --dodo-color-default-100: var(--dodo-color-base-slate-100);
-  --dodo-color-default-200: var(--dodo-color-base-slate-200);
-  --dodo-color-default-300: var(--dodo-color-base-slate-300);
-  --dodo-color-default-400: var(--dodo-color-base-slate-400);
-  --dodo-color-default-500: var(--dodo-color-base-slate-500);
-  --dodo-color-default-600: var(--dodo-color-base-slate-600);
-  --dodo-color-default-700: var(--dodo-color-base-slate-700);
-  --dodo-color-default-800: var(--dodo-color-base-slate-800);
-  --dodo-color-default-900: var(--dodo-color-base-slate-900);
-  --dodo-color-default-950: var(--dodo-color-base-slate-950);
+  --dodo-color-default-50: var(--dodo-color-base-gray-50);
+  --dodo-color-default-100: var(--dodo-color-base-gray-100);
+  --dodo-color-default-200: var(--dodo-color-base-gray-200);
+  --dodo-color-default-300: var(--dodo-color-base-gray-300);
+  --dodo-color-default-400: var(--dodo-color-base-gray-400);
+  --dodo-color-default-500: var(--dodo-color-base-gray-500);
+  --dodo-color-default-600: var(--dodo-color-base-gray-600);
+  --dodo-color-default-700: var(--dodo-color-base-gray-700);
+  --dodo-color-default-800: var(--dodo-color-base-gray-800);
+  --dodo-color-default-900: var(--dodo-color-base-gray-900);
+  --dodo-color-default-950: var(--dodo-color-base-gray-950);
 
   /* Primary color */
   --dodo-color-primary-50: var(--dodo-color-base-violet-50);
@@ -92,17 +92,17 @@
   --dodo-color-white: var(--dodo-color-base-black);
 
   /* Dark: Default color */
-  --dodo-color-default-50: var(--dodo-color-base-slate-950);
-  --dodo-color-default-100: var(--dodo-color-base-slate-900);
-  --dodo-color-default-200: var(--dodo-color-base-slate-800);
-  --dodo-color-default-300: var(--dodo-color-base-slate-700);
-  --dodo-color-default-400: var(--dodo-color-base-slate-600);
-  --dodo-color-default-500: var(--dodo-color-base-slate-500);
-  --dodo-color-default-600: var(--dodo-color-base-slate-400);
-  --dodo-color-default-700: var(--dodo-color-base-slate-300);
-  --dodo-color-default-800: var(--dodo-color-base-slate-200);
-  --dodo-color-default-900: var(--dodo-color-base-slate-100);
-  --dodo-color-default-950: var(--dodo-color-base-slate-50);
+  --dodo-color-default-50: var(--dodo-color-base-gray-950);
+  --dodo-color-default-100: var(--dodo-color-base-gray-900);
+  --dodo-color-default-200: var(--dodo-color-base-gray-800);
+  --dodo-color-default-300: var(--dodo-color-base-gray-700);
+  --dodo-color-default-400: var(--dodo-color-base-gray-600);
+  --dodo-color-default-500: var(--dodo-color-base-gray-500);
+  --dodo-color-default-600: var(--dodo-color-base-gray-400);
+  --dodo-color-default-700: var(--dodo-color-base-gray-300);
+  --dodo-color-default-800: var(--dodo-color-base-gray-200);
+  --dodo-color-default-900: var(--dodo-color-base-gray-100);
+  --dodo-color-default-950: var(--dodo-color-base-gray-50);
 
   /* Dark: Primary color */
   --dodo-color-primary-50: var(--dodo-color-base-violet-950);

package/dist/styles/_components.css

@@ -1,9 +1,9 @@
 :root {
-  --dodo-ui-element-height-normal: 40px;
-  --dodo-ui-element-height-small: 34px;
-  --dodo-ui-element-height-large: 48px;
+  --dodo-ui-element-height-normal: 2.5rem;
+  --dodo-ui-element-height-small: 2.125rem;
+  --dodo-ui-element-height-large: 3rem;
 
-  --dodo-ui-element-roundness-base: 7px;
+  --dodo-ui-element-roundness-base: 0.438rem;
   --dodo-ui-element-roundness-1: var(--dodo-ui-element-roundness-base);
   --dodo-ui-element-roundness-2: calc(var(--dodo-ui-element-roundness-base) * 2);
   --dodo-ui-element-roundness-3: calc(var(--dodo-ui-element-roundness-base) * 4);

package/dist/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "scripts": {
     "build": "vite build && pnpm run prepack",
     "preview": "vite preview",
@@ -29,7 +29,8 @@
     "!src/lib/**/*.spec.*",
     "!src/lib/stories/*.stories.*",
     "!src/lib/stories/*.mdx",
-    "!src/lib/stories/assets"
+    "!src/lib/stories/assets",
+    "!src/lib/stories/philosophy"
   ],
   "sideEffects": [
     "**/*.css"

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

@@ -11,7 +11,7 @@
     },
     color: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'safe', 'warning', 'danger', 'info'],
+      options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
     },
     variant: {
       control: { type: 'select' },
@@ -23,7 +23,7 @@
     },
     size: {
       control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
+      options: ['normal', 'small', 'large'],
     },
   };
 

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

@@ -77,7 +77,7 @@
     type = 'button',
     size = 'normal',
     color = 'default',
-    roundness = 1,
+    roundness = '1x',
     variant = 'text',
     outline = false,
     compact = false,
@@ -241,22 +241,18 @@
     }
 
     &.roundness {
-      &--1 {
+      &--1x {
         border-radius: var(--dodo-ui-element-roundness-1);
       }
 
-      &--2 {
+      &--2x {
         border-radius: var(--dodo-ui-element-roundness-2);
       }
 
-      &--3 {
+      &--3x {
         border-radius: var(--dodo-ui-element-roundness-3);
       }
 
-      &--4 {
-        border-radius: var(--dodo-ui-element-roundness-4);
-      }
-
       &--full {
         border-radius: 50%;
       }

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

@@ -15,23 +15,26 @@
   });
 </script>
 
-<Story
-  name="Roundness1"
-  args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
->
-  <Button roundness="full">Click me!</Button>
+<Story name="Roundness 1x" args={{ outline: false, disabled: false, compact: false }}>
+  <Button>Click me!</Button>
 </Story>
 
-<Story name="Roundness2" args={{ outline: false, disabled: false, compact: false, roundness: 2 }}>
-  <Button roundness={2}>Click me!</Button>
+<Story
+  name="Roundness 2x"
+  args={{ outline: false, disabled: false, compact: false, roundness: '2x' }}
+>
+  <Button roundness="2x">Click me!</Button>
 </Story>
 
-<Story name="Roundness3" args={{ outline: false, disabled: false, compact: false, roundness: 3 }}>
-  <Button roundness={3}>Click me!</Button>
+<Story
+  name="Roundness 3x"
+  args={{ outline: false, disabled: false, compact: false, roundness: '3x' }}
+>
+  <Button roundness="3x">Click me!</Button>
 </Story>
 
 <Story
-  name="RoundnessFalse"
+  name="Roundness False"
   args={{ outline: false, disabled: false, compact: false, roundness: false }}
 >
   <Button roundness={false}>Click me!</Button>
@@ -39,7 +42,7 @@
 
 <!-- Button with 50% roundness usefull for icon (Compact) buttons -->
 <Story
-  name="RoundnessFull"
+  name="Roundness Full"
   args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
 >
   <Button roundness="full">C</Button>

package/src/lib/styles/_colors.css

@@ -1,24 +1,24 @@
 :root {
-  /* Base colors */
+  /* Neutral colors */
   --dodo-color-black: var(--dodo-color-base-black);
   --dodo-color-white: var(--dodo-color-base-white);
 
-  /* Base colors constants */
+  /* Constants colors */
   --dodo-color-constant-black: var(--dodo-color-base-black);
   --dodo-color-constant-white: var(--dodo-color-base-white);
 
   /* Default color */
-  --dodo-color-default-50: var(--dodo-color-base-slate-50);
-  --dodo-color-default-100: var(--dodo-color-base-slate-100);
-  --dodo-color-default-200: var(--dodo-color-base-slate-200);
-  --dodo-color-default-300: var(--dodo-color-base-slate-300);
-  --dodo-color-default-400: var(--dodo-color-base-slate-400);
-  --dodo-color-default-500: var(--dodo-color-base-slate-500);
-  --dodo-color-default-600: var(--dodo-color-base-slate-600);
-  --dodo-color-default-700: var(--dodo-color-base-slate-700);
-  --dodo-color-default-800: var(--dodo-color-base-slate-800);
-  --dodo-color-default-900: var(--dodo-color-base-slate-900);
-  --dodo-color-default-950: var(--dodo-color-base-slate-950);
+  --dodo-color-default-50: var(--dodo-color-base-gray-50);
+  --dodo-color-default-100: var(--dodo-color-base-gray-100);
+  --dodo-color-default-200: var(--dodo-color-base-gray-200);
+  --dodo-color-default-300: var(--dodo-color-base-gray-300);
+  --dodo-color-default-400: var(--dodo-color-base-gray-400);
+  --dodo-color-default-500: var(--dodo-color-base-gray-500);
+  --dodo-color-default-600: var(--dodo-color-base-gray-600);
+  --dodo-color-default-700: var(--dodo-color-base-gray-700);
+  --dodo-color-default-800: var(--dodo-color-base-gray-800);
+  --dodo-color-default-900: var(--dodo-color-base-gray-900);
+  --dodo-color-default-950: var(--dodo-color-base-gray-950);
 
   /* Primary color */
   --dodo-color-primary-50: var(--dodo-color-base-violet-50);
@@ -92,17 +92,17 @@
   --dodo-color-white: var(--dodo-color-base-black);
 
   /* Dark: Default color */
-  --dodo-color-default-50: var(--dodo-color-base-slate-950);
-  --dodo-color-default-100: var(--dodo-color-base-slate-900);
-  --dodo-color-default-200: var(--dodo-color-base-slate-800);
-  --dodo-color-default-300: var(--dodo-color-base-slate-700);
-  --dodo-color-default-400: var(--dodo-color-base-slate-600);
-  --dodo-color-default-500: var(--dodo-color-base-slate-500);
-  --dodo-color-default-600: var(--dodo-color-base-slate-400);
-  --dodo-color-default-700: var(--dodo-color-base-slate-300);
-  --dodo-color-default-800: var(--dodo-color-base-slate-200);
-  --dodo-color-default-900: var(--dodo-color-base-slate-100);
-  --dodo-color-default-950: var(--dodo-color-base-slate-50);
+  --dodo-color-default-50: var(--dodo-color-base-gray-950);
+  --dodo-color-default-100: var(--dodo-color-base-gray-900);
+  --dodo-color-default-200: var(--dodo-color-base-gray-800);
+  --dodo-color-default-300: var(--dodo-color-base-gray-700);
+  --dodo-color-default-400: var(--dodo-color-base-gray-600);
+  --dodo-color-default-500: var(--dodo-color-base-gray-500);
+  --dodo-color-default-600: var(--dodo-color-base-gray-400);
+  --dodo-color-default-700: var(--dodo-color-base-gray-300);
+  --dodo-color-default-800: var(--dodo-color-base-gray-200);
+  --dodo-color-default-900: var(--dodo-color-base-gray-100);
+  --dodo-color-default-950: var(--dodo-color-base-gray-50);
 
   /* Dark: Primary color */
   --dodo-color-primary-50: var(--dodo-color-base-violet-950);

package/src/lib/styles/_components.css

@@ -1,9 +1,9 @@
 :root {
-  --dodo-ui-element-height-normal: 40px;
-  --dodo-ui-element-height-small: 34px;
-  --dodo-ui-element-height-large: 48px;
+  --dodo-ui-element-height-normal: 2.5rem;
+  --dodo-ui-element-height-small: 2.125rem;
+  --dodo-ui-element-height-large: 3rem;
 
-  --dodo-ui-element-roundness-base: 7px;
+  --dodo-ui-element-roundness-base: 0.438rem;
   --dodo-ui-element-roundness-1: var(--dodo-ui-element-roundness-base);
   --dodo-ui-element-roundness-2: calc(var(--dodo-ui-element-roundness-base) * 2);
   --dodo-ui-element-roundness-3: calc(var(--dodo-ui-element-roundness-base) * 4);

package/src/lib/types.ts

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

package/dist/stories/Getting Started.mdx

@@ -1,13 +0,0 @@
-import { Source } from '@storybook/blocks';
-
-# Getting Started
-
-## Install
-
-<Source dark language='bash' code={`
-// pnpm
-pnpm add @flightlesslabs/dodo-ui
-
-// npm
-npm i @flightlesslabs/dodo-ui
-`} />