@flightlesslabs/dodo-ui 0.4.0 → 0.6.0

package/src/lib/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/src/lib/styles/_colors.css

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

package/src/lib/styles/_shadow.css

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

package/src/lib/styles/global.css

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

package/src/lib/types.ts

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