@flightlesslabs/dodo-ui 0.6.5 → 0.7.0

package/dist/stories/developer tools/components/Popper/Positions/Positions.stories.svelte

@@ -0,0 +1,111 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { Menu, MenuItem, Popper } from '../../../../../index.js';
+import Button from '../../../../components/Form/Button/Button.svelte';
+import { storyPopperArgTypes } from '../Popper.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Popper,
+    tags: ['autodocs'],
+    argTypes: storyPopperArgTypes,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+let open = $state(false);
+</script>
+
+<Story name="BottomLeft" asChild>
+  <Popper {open} onClickOutside={() => (open = false)} popupWidth="100px">
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<Story name="BottomCenter" asChild>
+  <Popper {open} popupPositionX="center" onClickOutside={() => (open = false)} popupWidth="100px">
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<Story name="BottomRight" asChild>
+  <Popper {open} popupPositionX="right" onClickOutside={() => (open = false)} popupWidth="100px">
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<Story name="TopLeft" asChild>
+  <Popper {open} popupPositionY="top" onClickOutside={() => (open = false)} popupWidth="100px">
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<Story name="TopCenter" asChild>
+  <Popper
+    {open}
+    popupPositionY="top"
+    popupPositionX="center"
+    onClickOutside={() => (open = false)}
+    popupWidth="100px"
+  >
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<Story name="TopRight" asChild>
+  <Popper
+    {open}
+    popupPositionY="top"
+    popupPositionX="right"
+    onClickOutside={() => (open = false)}
+    popupWidth="100px"
+  >
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>

package/dist/stories/developer tools/components/Popper/Positions/Positions.stories.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 Positions: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Positions = InstanceType<typeof Positions>;
+export default Positions;

package/dist/stories/developer tools/components/UtilityButton/Size/Size.stories.svelte

@@ -1,6 +1,5 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { fn } from '@storybook/test';
   import UtilityButton from '../UtilityButton.svelte';
   import { storyUtilityButtonArgTypes } from '../UtilityButton.stories.svelte';
   import Icon from '@iconify/svelte';
@@ -10,18 +9,17 @@
     component: UtilityButton,
     tags: ['autodocs'],
     argTypes: storyUtilityButtonArgTypes,
-    args: {
-      onclick: fn(),
-    },
   });
 </script>
 
-<Story name="Normal" args={{ disabled: false }}>
-  <UtilityButton><Icon icon="mdi:eye" width="24" height="24" /></UtilityButton>
+<Story name="Normal">
+  <Icon icon="mdi:eye" width="24" height="24" />
 </Story>
+
 <Story name="Small" args={{ size: 'small' }}>
-  <UtilityButton size="small"><Icon icon="mdi:eye" width="22" height="22" /></UtilityButton>
+  <Icon icon="mdi:eye" width="24" height="24" />
 </Story>
+
 <Story name="Large" args={{ size: 'large' }}>
-  <UtilityButton size="large"><Icon icon="mdi:eye" width="28" height="28" /></UtilityButton>
+  <Icon icon="mdi:eye" width="24" height="24" />
 </Story>

package/dist/stories/developer tools/components/UtilityButton/UtilityButton.stories.svelte

@@ -1,11 +1,11 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
 import UtilityButton from './UtilityButton.svelte';
 import Icon from '@iconify/svelte';
-import { fn } from '@storybook/test';
+import { componentSizeArray } from '../../../../types/size.js';
 export const storyUtilityButtonArgTypes = {
     size: {
         control: { type: 'select' },
-        options: ['normal', 'small', 'large'],
+        options: componentSizeArray,
     },
 };
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -13,17 +13,14 @@ const { Story } = defineMeta({
     component: UtilityButton,
     tags: ['autodocs'],
     argTypes: storyUtilityButtonArgTypes,
-    args: {
-        onclick: fn(),
-    },
 });
 </script>
 
 <!-- Button with default style -->
 <Story name="Default">
-  <UtilityButton><Icon icon="mdi:eye" width="24" height="24" /></UtilityButton>
+  <Icon icon="mdi:eye" width="24" height="24" />
 </Story>
 
 <Story name="Disabled" args={{ disabled: true }}>
-  <UtilityButton disabled><Icon icon="mdi:eye" width="24" height="24" /></UtilityButton>
+  <Icon icon="mdi:eye" width="24" height="24" />
 </Story>

package/dist/stories/developer tools/components/UtilityButton/UtilityButton.svelte

@@ -1,5 +1,8 @@
-<script lang="ts">let { children, size = 'normal', name, id, title, class: className = '', disabled = false, onclick, ref = $bindable(), } = $props();
-export {};
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">"use strict";
+let { children, size = 'normal', name, id, title, class: className = '', disabled = false, onclick, ref = $bindable(), } = $props();
 </script>
 
 <button
@@ -19,13 +22,13 @@ export {};
 <style>:global(:root) {
   --dodo-ui-UtilityButton-hover: var(--dodo-color-primary-600);
   --dodo-ui-UtilityButton-active: var(--dodo-color-primary-600);
-  --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-default-400);
+  --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-neutral-400);
 }
 
 :global(.dodo-theme--dark) {
   --dodo-ui-UtilityButton-hover: var(--dodo-color-primary-600);
   --dodo-ui-UtilityButton-active: var(--dodo-color-primary-600);
-  --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-default-500);
+  --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-neutral-500);
 }
 
 .dodo-ui-UtilityButton {
@@ -42,7 +45,7 @@ export {};
   border: 0;
   outline: 0;
   padding: 0;
-  color: var(--dodo-color-default-700);
+  color: var(--dodo-color-neutral-700);
   border-radius: 50%;
   font-family: inherit;
 }

package/dist/stories/developer tools/components/UtilityButton/UtilityButton.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { ComponentSize } from '../../../../types.js';
+import type { ComponentSize } from '../../../../types/size.js';
 import type { Snippet } from 'svelte';
 import type { MouseEventHandler } from 'svelte/elements';
-interface UtilityButtonProps {
+export interface UtilityButtonProps {
     /** Button contents goes here*/
     children?: Snippet;
     /** Button ref */

package/dist/stories/developer tools/directives/clickOutside/clickOutside.d.ts

@@ -0,0 +1,3 @@
+export declare function clickOutside(node: Element, callback: () => void): {
+    destroy(): void;
+};

package/dist/stories/developer tools/directives/clickOutside/clickOutside.js

@@ -0,0 +1,14 @@
+export function clickOutside(node, callback) {
+    const handleClick = (event) => {
+        const target = event.target;
+        if (node && !node.contains(target) && !event.defaultPrevented) {
+            callback();
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        },
+    };
+}

package/dist/stories/developer tools/directives/clickOutside/index.mdx

@@ -0,0 +1,25 @@
+import { Source } from '@storybook/blocks';
+
+# Click Outside
+
+Event that fires after clicking outside the target component
+
+<Source
+  dark
+  language="js"
+  code={`
+import { clickOutside } '@flightlesslabs/dodo-ui';
+`}
+/>
+
+Attach it to a component
+
+<Source
+  dark
+  language="js"
+  code={`
+<div
+  use:clickOutside={onClickOutside}
+  ...
+`}
+/>

package/dist/stories/{philosophy/Colors/Colors.mdx → developer tools/philosophy/Colors/Colors.mdx }

@@ -12,7 +12,7 @@ We are using an extensive color pallet identical to [Tailwind Css](https://tailw
 
 <Story of={ColorsStories.Main} />
 
-Neutral pallet
+Greyscale colors
 
 <Story of={ColorsStories.ColorsNeutral} />
 
@@ -24,7 +24,7 @@ Constant Colors
 
 <Story of={ColorsStories.ColorsBase} />
 
-Neutral pallet
+Greyscale colors
 
 <Story of={ColorsStories.BaseColorsNeutral} />
 

package/dist/stories/{philosophy/Colors/Swatches/Palette.svelte → developer tools/philosophy/Colors/Swatches/Palette.svelte }

@@ -19,7 +19,7 @@ function onclick() {
   height: 60px;
   border-radius: 4px;
   border: 1px solid;
-  border-color: color-mix(in oklab, var(--dodo-color-default-800) 20%, transparent);
+  border-color: color-mix(in oklab, var(--dodo-color-neutral-800) 20%, transparent);
   background: transparent;
   min-width: initial;
   margin: 0;

package/dist/stories/{philosophy/Colors/Swatches/Swatch.svelte → developer tools/philosophy/Colors/Swatches/Swatch.svelte }

@@ -13,7 +13,7 @@ const { colorPalette, colorPaletteValue, prefix = '--dodo-color-' } = $props();
 </div>
 
 <style>.Swatch {
-  color: var(--dodo-color-default-900);
+  color: var(--dodo-color-neutral-900);
   display: flex;
   align-items: center;
   flex-direction: column;

package/dist/stories/{philosophy/Colors/Swatches/Swatches.svelte → developer tools/philosophy/Colors/Swatches/Swatches.svelte }

@@ -20,7 +20,7 @@ const { colorPalette, prefix, isColorPaletteValues = false } = $props();
 </ul>
 
 <style>.Swatches {
-  color: var(--dodo-color-default-900);
+  color: var(--dodo-color-neutral-900);
   margin: 0;
   padding: 0;
   width: 150px;

package/dist/stories/{philosophy/Colors/utils/color.js → developer tools/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', 'secondary'];
+export const colorPalette = ['primary', 'secondary', 'neutral', 'safe', 'warning', 'danger'];
 export const colorPaletteValues = [
     '50',
     '100',

package/dist/stories/{philosophy/Themes.mdx → developer tools/philosophy/Themes.mdx }

@@ -1,5 +1,5 @@
 import { Source } from '@storybook/blocks';
-import darkThemeToggleImage from '../assets/dark-theme-toggle.png';
+import darkThemeToggleImage from '$lib/stories/assets/dark-theme-toggle.png';
 
 # Themes
 

package/dist/styles/_colors.css

@@ -8,17 +8,17 @@
   --dodo-color-constant-white: var(--dodo-color-base-white);
 
   /* Default color */
-  --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);
+  --dodo-color-neutral-50: var(--dodo-color-base-gray-50);
+  --dodo-color-neutral-100: var(--dodo-color-base-gray-100);
+  --dodo-color-neutral-200: var(--dodo-color-base-gray-200);
+  --dodo-color-neutral-300: var(--dodo-color-base-gray-300);
+  --dodo-color-neutral-400: var(--dodo-color-base-gray-400);
+  --dodo-color-neutral-500: var(--dodo-color-base-gray-500);
+  --dodo-color-neutral-600: var(--dodo-color-base-gray-600);
+  --dodo-color-neutral-700: var(--dodo-color-base-gray-700);
+  --dodo-color-neutral-800: var(--dodo-color-base-gray-800);
+  --dodo-color-neutral-900: var(--dodo-color-base-gray-900);
+  --dodo-color-neutral-950: var(--dodo-color-base-gray-950);
 
   /* Primary color */
   --dodo-color-primary-50: var(--dodo-color-base-violet-50);
@@ -34,17 +34,17 @@
   --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);
+  --dodo-color-secondary-50: var(--dodo-color-base-blue-50);
+  --dodo-color-secondary-100: var(--dodo-color-base-blue-100);
+  --dodo-color-secondary-200: var(--dodo-color-base-blue-200);
+  --dodo-color-secondary-300: var(--dodo-color-base-blue-300);
+  --dodo-color-secondary-400: var(--dodo-color-base-blue-400);
+  --dodo-color-secondary-500: var(--dodo-color-base-blue-500);
+  --dodo-color-secondary-600: var(--dodo-color-base-blue-600);
+  --dodo-color-secondary-700: var(--dodo-color-base-blue-700);
+  --dodo-color-secondary-800: var(--dodo-color-base-blue-800);
+  --dodo-color-secondary-900: var(--dodo-color-base-blue-900);
+  --dodo-color-secondary-950: var(--dodo-color-base-blue-950);
 
   /* Safe color */
   --dodo-color-safe-50: var(--dodo-color-base-emerald-50);
@@ -92,17 +92,17 @@
   --dodo-color-white: var(--dodo-color-base-black);
 
   /* Dark: Default color */
-  --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);
+  --dodo-color-neutral-50: var(--dodo-color-base-gray-950);
+  --dodo-color-neutral-100: var(--dodo-color-base-gray-900);
+  --dodo-color-neutral-200: var(--dodo-color-base-gray-800);
+  --dodo-color-neutral-300: var(--dodo-color-base-gray-700);
+  --dodo-color-neutral-400: var(--dodo-color-base-gray-600);
+  --dodo-color-neutral-500: var(--dodo-color-base-gray-500);
+  --dodo-color-neutral-600: var(--dodo-color-base-gray-400);
+  --dodo-color-neutral-700: var(--dodo-color-base-gray-300);
+  --dodo-color-neutral-800: var(--dodo-color-base-gray-200);
+  --dodo-color-neutral-900: var(--dodo-color-base-gray-100);
+  --dodo-color-neutral-950: var(--dodo-color-base-gray-50);
 
   /* Dark: Primary color */
   --dodo-color-primary-50: var(--dodo-color-base-violet-950);
@@ -118,17 +118,17 @@
   --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);
+  --dodo-color-secondary-50: var(--dodo-color-base-blue-950);
+  --dodo-color-secondary-100: var(--dodo-color-base-blue-900);
+  --dodo-color-secondary-200: var(--dodo-color-base-blue-800);
+  --dodo-color-secondary-300: var(--dodo-color-base-blue-700);
+  --dodo-color-secondary-400: var(--dodo-color-base-blue-600);
+  --dodo-color-secondary-500: var(--dodo-color-base-blue-500);
+  --dodo-color-secondary-600: var(--dodo-color-base-blue-400);
+  --dodo-color-secondary-700: var(--dodo-color-base-blue-300);
+  --dodo-color-secondary-800: var(--dodo-color-base-blue-200);
+  --dodo-color-secondary-900: var(--dodo-color-base-blue-100);
+  --dodo-color-secondary-950: var(--dodo-color-base-blue-50);
 
   /* Dark: Safe color */
   --dodo-color-safe-50: var(--dodo-color-base-emerald-950);

package/dist/styles/_components.css

@@ -1,11 +1,14 @@
 :root {
+  /* Size */
   --dodo-ui-element-height-small: 34px;
   --dodo-ui-element-height-normal: 40px;
   --dodo-ui-element-height-large: 50px;
 
-  --dodo-ui-element-roundness-1x: 7px;
-  --dodo-ui-element-roundness-2x: 13px;
-  --dodo-ui-element-roundness-3x: 31px;
+  /* Roundness */
+  --dodo-ui-element-roundness-1: 7px;
+  --dodo-ui-element-roundness-2: 13px;
+  --dodo-ui-element-roundness-3: 31px;
 
+  /* Border */
   --dodo-ui-element-border-width: 1px;
 }

package/dist/styles/_shadow.css

@@ -1,39 +1,32 @@
 :root {
-  --dodo-shadow-color: #0000000d;
+  --dodo-shadow-color: rgba(0, 0, 0, 0.11);
 }
 
-.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-theme--dark {
+  --dodo-shadow-color: rgba(0, 0, 0, 0.09);
 }
 
-.dodo-shadow-3x {
-  --dodo-shadow: 0 1px 3px 0 var(--dodo-shadow-color);
+.dodo-shadow-1 {
+  --dodo-shadow: 0 1px 3px var(--dodo-shadow-color), 0 1px 2px 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);
+.dodo-shadow-2 {
+  --dodo-shadow: 0 3px 6px var(--dodo-shadow-color), 0 3px 6px 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);
+.dodo-shadow-3 {
+  --dodo-shadow: 0 6px 10px var(--dodo-shadow-color), 0 5px 17px 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);
+.dodo-shadow-4 {
+  --dodo-shadow: 0 10px 18px var(--dodo-shadow-color), 0 6px 10px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-7x {
-  --dodo-shadow: 0 25px 50px -12px var(--dodo-shadow-color);
+.dodo-shadow-5 {
+  --dodo-shadow: 0 14px 28px var(--dodo-shadow-color), 0 10px 10px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }

package/dist/styles/_space.css

@@ -0,0 +1,7 @@
+:root {
+  /* Space */
+  /* Example: calc(var(--dodo-ui-space) * 2), calc(var(--dodo-ui-space) / 2) */
+  --dodo-ui-space-small: 6px;
+  --dodo-ui-space: 8px;
+  --dodo-ui-space-large: 10px;
+}

package/dist/styles/_z-index.css

@@ -0,0 +1,9 @@
+:root {
+  /* zIndex */
+  --dodo-ui-z-index-0: 0;
+  --dodo-ui-z-index-1: 1;
+  --dodo-ui-z-index-2: 100;
+  --dodo-ui-z-index-3: 1000;
+  --dodo-ui-z-index-4: 5000;
+  --dodo-ui-z-index-5: 5001;
+}

package/dist/styles/global.css

@@ -1,6 +1,8 @@
 @import '_minimal-reset.css';
 @import '_colors-base.css';
 @import '_colors.css';
+@import '_space.css';
+@import '_z-index.css';
 @import '_breakpoint.css';
 @import '_shadow.css';
 @import '_components.css';

package/dist/types/colors.d.ts

@@ -0,0 +1,7 @@
+/** Component Color*/
+export type ComponentColorPriority = 'primary' | 'secondary' | 'neutral';
+export declare const componentColorPriorityArray: ComponentColorPriority[];
+export type ComponentColorSeverity = 'safe' | 'warning' | 'danger';
+export declare const componentColorSeverityArray: ComponentColorSeverity[];
+export type ComponentColor = ComponentColorPriority | ComponentColorSeverity;
+export declare const componentColorArray: ComponentColor[];

package/dist/types/colors.js

@@ -0,0 +1,10 @@
+export const componentColorPriorityArray = [
+    'primary',
+    'secondary',
+    'neutral',
+];
+export const componentColorSeverityArray = ['safe', 'warning', 'danger'];
+export const componentColorArray = [
+    ...componentColorPriorityArray,
+    ...componentColorSeverityArray,
+];

package/dist/types/position.d.ts

@@ -0,0 +1,4 @@
+export type PositionY = 'top' | 'middle' | 'bottom';
+export type PositionX = 'left' | 'center' | 'right';
+export declare const positionYArray: PositionY[];
+export declare const positionXArray: PositionX[];

package/dist/types/position.js

@@ -0,0 +1,2 @@
+export const positionYArray = ['top', 'bottom'];
+export const positionXArray = ['left', 'center', 'right'];

package/dist/types/roundness.d.ts

@@ -0,0 +1,3 @@
+/** Component Roundness */
+export type ComponentRoundness = 0 | 1 | 2 | 3 | 'full';
+export declare const componentRoundnessArray: ComponentRoundness[];

package/dist/types/roundness.js

@@ -0,0 +1 @@
+export const componentRoundnessArray = [0, 1, 2, 3, 'full'];

package/dist/types/shadow.d.ts

@@ -0,0 +1,3 @@
+/** Component Shadow */
+export type ComponentShadow = 0 | 1 | 2 | 3 | 4 | 5;
+export declare const componentShadowArray: ComponentShadow[];

package/dist/types/shadow.js

@@ -0,0 +1 @@
+export const componentShadowArray = [0, 1, 2, 3, 4, 5];

package/dist/types/size.d.ts

@@ -0,0 +1,3 @@
+/** Component Size */
+export type ComponentSize = 'normal' | 'small' | 'large';
+export declare const componentSizeArray: ComponentSize[];

package/dist/types/size.js

@@ -0,0 +1 @@
+export const componentSizeArray = ['normal', 'small', 'large'];

package/dist/types/weight.d.ts

@@ -0,0 +1,3 @@
+/** Component Weight */
+export type ComponentWeight = 'solid' | 'text';
+export declare const componentWeightArray: ComponentWeight[];

package/dist/types/weight.js

@@ -0,0 +1 @@
+export const componentWeightArray = ['solid', 'text'];