@flightlesslabs/dodo-ui 0.1.2 → 0.1.4

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

@@ -9,10 +9,7 @@
   const { Story } = defineMeta({
     component: Button,
     tags: ['autodocs'],
-    // @ts-ignore
-    argTypes: {
-      ...storyButtonArgTypes,
-    },
+    argTypes: storyButtonArgTypes,
     args: {
       onclick: fn(),
     },
@@ -20,7 +17,14 @@
 </script>
 
 <!-- Compact button with paddings stripped out and fixed size. We are using this icon library https://iconify.design/docs/icon-components/svelte/ -->
-<Story name="Icon Button" args={{ compact: true, roundness: 'full' }}>
+<Story name="Icon Button" args={{ compact: true }}>
+  <Button compact>
+    <Icon icon="material-symbols:app-badging" width="18" height="18" />
+  </Button>
+</Story>
+
+<!-- Circualr Icon button. -->
+<Story name="Icon Button Circular" args={{ compact: true, roundness: 'full' }}>
   <Button roundness="full" compact>
     <Icon icon="material-symbols:app-badging" width="18" height="18" />
   </Button>

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

@@ -8,10 +8,7 @@
   const { Story } = defineMeta({
     component: Button,
     tags: ['autodocs'],
-    // @ts-ignore
-    argTypes: {
-      ...storyButtonArgTypes,
-    },
+    argTypes: storyButtonArgTypes,
     args: {
       onclick: fn(),
     },
@@ -40,6 +37,7 @@
   <Button roundness={false}>Click me!</Button>
 </Story>
 
+<!-- Button with 50% roundness usefull for icon (Compact) buttons -->
 <Story
   name="RoundnessFull"
   args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}

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

@@ -8,10 +8,7 @@
   const { Story } = defineMeta({
     component: Button,
     tags: ['autodocs'],
-    // @ts-ignore
-    argTypes: {
-      ...storyButtonArgTypes,
-    },
+    argTypes: storyButtonArgTypes,
     args: {
       onclick: fn(),
     },

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

@@ -8,10 +8,7 @@
   const { Story } = defineMeta({
     component: Button,
     tags: ['autodocs'],
-    // @ts-ignore
-    argTypes: {
-      ...storyButtonArgTypes,
-    },
+    argTypes: storyButtonArgTypes,
     args: {
       onclick: fn(),
     },

package/src/lib/stories/components/Form/Button/utils/scss/mixins.scss

@@ -0,0 +1,70 @@
+/// Mixin: generate-dodo-ui-button-colors
+/// Generates CSS custom properties for Dodo UI button 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-button-colors($color-name) {
+  --dodo-ui-button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-400);
+
+  --dodo-ui-button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-300);
+
+  --dodo-ui-button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+  --dodo-ui-button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
+  --dodo-ui-button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-700);
+}
+
+/// Mixin: generate-dodo-ui-button-colors
+/// Generates CSS custom properties for Dodo UI button 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-button-colors-dark($color-name) {
+  --dodo-ui-button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
+
+  --dodo-ui-button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
+  --dodo-ui-button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+
+  --dodo-ui-button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-100);
+}
+
+/// Mixin: generate-dodo-ui-button-color
+/// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
+/// @param {String} $theme - e.g., default, safe, danger, etc.
+@mixin generate-dodo-ui-button-color($theme) {
+  &--#{$theme} {
+    &.variant {
+      &--text {
+        color: var(--dodo-color-#{$theme}-800);
+        background-color: var(--dodo-ui-button-text-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-button-text-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-button-text-#{$theme}-active-bg);
+        }
+
+        &.outline {
+          border-color: var(--dodo-ui-button-outline-#{$theme});
+        }
+      }
+
+      &--solid {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-button-solid-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-button-solid-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-button-solid-#{$theme}-active-bg);
+        }
+      }
+    }
+  }
+}

package/src/lib/storybook-types.ts

@@ -0,0 +1,182 @@
+type ControlType =
+  | 'object'
+  | 'boolean'
+  | 'check'
+  | 'inline-check'
+  | 'radio'
+  | 'inline-radio'
+  | 'select'
+  | 'multi-select'
+  | 'number'
+  | 'range'
+  | 'file'
+  | 'color'
+  | 'date'
+  | 'text';
+
+interface ControlBase {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+  /** @see https://storybook.js.org/docs/api/arg-types#controltype */
+  type?: ControlType;
+  disable?: boolean;
+}
+
+type Control =
+  | ControlType
+  | false
+  | (ControlBase &
+      (
+        | ControlBase
+        | {
+            type: 'color';
+            /** @see https://storybook.js.org/docs/api/arg-types#controlpresetcolors */
+            presetColors?: string[];
+          }
+        | {
+            type: 'file';
+            /** @see https://storybook.js.org/docs/api/arg-types#controlaccept */
+            accept?: string;
+          }
+        | {
+            type: 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select';
+            /** @see https://storybook.js.org/docs/api/arg-types#controllabels */
+            labels?: {
+              [options: string]: string;
+            };
+          }
+        | {
+            type: 'number' | 'range';
+            /** @see https://storybook.js.org/docs/api/arg-types#controlmax */
+            max?: number;
+            /** @see https://storybook.js.org/docs/api/arg-types#controlmin */
+            min?: number;
+            /** @see https://storybook.js.org/docs/api/arg-types#controlstep */
+            step?: number;
+          }
+      ));
+
+type ConditionalTest =
+  | {
+      truthy?: boolean;
+    }
+  | {
+      exists: boolean;
+    }
+  | {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      eq: any;
+    }
+  | {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      neq: any;
+    };
+type ConditionalValue =
+  | {
+      arg: string;
+    }
+  | {
+      global: string;
+    };
+type Conditional = ConditionalValue & ConditionalTest;
+
+interface Args {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [name: string]: any;
+}
+
+interface SBBaseType {
+  required?: boolean;
+  raw?: string;
+}
+type SBScalarType = SBBaseType & {
+  name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
+};
+type SBArrayType = SBBaseType & {
+  name: 'array';
+  value: SBType;
+};
+type SBObjectType = SBBaseType & {
+  name: 'object';
+  value: Record<string, SBType>;
+};
+type SBEnumType = SBBaseType & {
+  name: 'enum';
+  value: (string | number)[];
+};
+type SBIntersectionType = SBBaseType & {
+  name: 'intersection';
+  value: SBType[];
+};
+type SBUnionType = SBBaseType & {
+  name: 'union';
+  value: SBType[];
+};
+type SBOtherType = SBBaseType & {
+  name: 'other';
+  value: string;
+};
+
+type SBType =
+  | SBScalarType
+  | SBEnumType
+  | SBArrayType
+  | SBObjectType
+  | SBIntersectionType
+  | SBUnionType
+  | SBOtherType;
+
+interface InputType {
+  /** @see https://storybook.js.org/docs/api/arg-types#control */
+  control?: Control;
+  /** @see https://storybook.js.org/docs/api/arg-types#description */
+  description?: string;
+  /** @see https://storybook.js.org/docs/api/arg-types#if */
+  if?: Conditional;
+  /** @see https://storybook.js.org/docs/api/arg-types#mapping */
+  mapping?: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+  };
+  /** @see https://storybook.js.org/docs/api/arg-types#name */
+  name?: string;
+  /** @see https://storybook.js.org/docs/api/arg-types#options */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  options?: readonly any[];
+  /** @see https://storybook.js.org/docs/api/arg-types#table */
+  table?: {
+    [key: string]: unknown;
+    /** @see https://storybook.js.org/docs/api/arg-types#tablecategory */
+    category?: string;
+    /** @see https://storybook.js.org/docs/api/arg-types#tabledefaultvalue */
+    defaultValue?: {
+      summary?: string;
+      detail?: string;
+    };
+    /** @see https://storybook.js.org/docs/api/arg-types#tabledisable */
+    disable?: boolean;
+    /** @see https://storybook.js.org/docs/api/arg-types#tablesubcategory */
+    subcategory?: string;
+    /** @see https://storybook.js.org/docs/api/arg-types#tabletype */
+    type?: {
+      summary?: string;
+      detail?: string;
+    };
+  };
+  /** @see https://storybook.js.org/docs/api/arg-types#type */
+  type?: SBType | SBScalarType['name'];
+  /**
+   * @deprecated Use `table.defaultValue.summary` instead.
+   * @see https://storybook.js.org/docs/api/arg-types#defaultvalue
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defaultValue?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+export type ArgTypes<TArgs = Args> = {
+  [name in keyof TArgs]: InputType;
+};
+
+export type StoryBookArgTypes = Partial<ArgTypes<Args>>;

package/src/lib/styles/_colors.css

@@ -3,6 +3,10 @@
   --dodo-color-black: var(--dodo-color-base-black);
   --dodo-color-white: var(--dodo-color-base-white);
 
+  /* Base colors constants */
+  --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);
@@ -81,3 +85,87 @@
   --dodo-color-info-900: var(--dodo-color-base-cyan-900);
   --dodo-color-info-950: var(--dodo-color-base-cyan-950);
 }
+
+.dodo-theme--dark {
+  /* Dark: Base colors */
+  --dodo-color-black: var(--dodo-color-base-white);
+  --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);
+
+  /* Dark: Primary color */
+  --dodo-color-primary-50: var(--dodo-color-base-violet-950);
+  --dodo-color-primary-100: var(--dodo-color-base-violet-900);
+  --dodo-color-primary-200: var(--dodo-color-base-violet-800);
+  --dodo-color-primary-300: var(--dodo-color-base-violet-700);
+  --dodo-color-primary-400: var(--dodo-color-base-violet-600);
+  --dodo-color-primary-500: var(--dodo-color-base-violet-500);
+  --dodo-color-primary-600: var(--dodo-color-base-violet-400);
+  --dodo-color-primary-700: var(--dodo-color-base-violet-300);
+  --dodo-color-primary-800: var(--dodo-color-base-violet-200);
+  --dodo-color-primary-900: var(--dodo-color-base-violet-100);
+  --dodo-color-primary-950: var(--dodo-color-base-violet-50);
+
+  /* Dark: Safe color */
+  --dodo-color-safe-50: var(--dodo-color-base-emerald-950);
+  --dodo-color-safe-100: var(--dodo-color-base-emerald-900);
+  --dodo-color-safe-200: var(--dodo-color-base-emerald-800);
+  --dodo-color-safe-300: var(--dodo-color-base-emerald-700);
+  --dodo-color-safe-400: var(--dodo-color-base-emerald-600);
+  --dodo-color-safe-500: var(--dodo-color-base-emerald-500);
+  --dodo-color-safe-600: var(--dodo-color-base-emerald-400);
+  --dodo-color-safe-700: var(--dodo-color-base-emerald-300);
+  --dodo-color-safe-800: var(--dodo-color-base-emerald-200);
+  --dodo-color-safe-900: var(--dodo-color-base-emerald-100);
+  --dodo-color-safe-950: var(--dodo-color-base-emerald-50);
+
+  /* Dark: Warning color */
+  --dodo-color-warning-50: var(--dodo-color-base-amber-950);
+  --dodo-color-warning-100: var(--dodo-color-base-amber-900);
+  --dodo-color-warning-200: var(--dodo-color-base-amber-800);
+  --dodo-color-warning-300: var(--dodo-color-base-amber-700);
+  --dodo-color-warning-400: var(--dodo-color-base-amber-600);
+  --dodo-color-warning-500: var(--dodo-color-base-amber-500);
+  --dodo-color-warning-600: var(--dodo-color-base-amber-400);
+  --dodo-color-warning-700: var(--dodo-color-base-amber-300);
+  --dodo-color-warning-800: var(--dodo-color-base-amber-200);
+  --dodo-color-warning-900: var(--dodo-color-base-amber-100);
+  --dodo-color-warning-950: var(--dodo-color-base-amber-50);
+
+  /* Dark: Danger color */
+  --dodo-color-danger-50: var(--dodo-color-base-red-950);
+  --dodo-color-danger-100: var(--dodo-color-base-red-900);
+  --dodo-color-danger-200: var(--dodo-color-base-red-800);
+  --dodo-color-danger-300: var(--dodo-color-base-red-700);
+  --dodo-color-danger-400: var(--dodo-color-base-red-600);
+  --dodo-color-danger-500: var(--dodo-color-base-red-500);
+  --dodo-color-danger-600: var(--dodo-color-base-red-400);
+  --dodo-color-danger-700: var(--dodo-color-base-red-300);
+  --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/_components.css

@@ -3,8 +3,8 @@
   --dodo-ui-element-height-small: 34px;
   --dodo-ui-element-height-large: 48px;
 
-  --dodo-ui-element-roundness-unit: 7px;
-  --dodo-ui-element-roundness-1: var(--dodo-ui-element-roundness-unit);
-  --dodo-ui-element-roundness-2: calc(var(--dodo-ui-element-roundness-unit) * 2);
-  --dodo-ui-element-roundness-3: calc(var(--dodo-ui-element-roundness-unit) * 4);
+  --dodo-ui-element-roundness-base: 7px;
+  --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,3 +1,5 @@
+/** Component Size */
 export type ComponentSize = 'normal' | 'small' | 'large';
 
-export type ComponentRoundness = false | 1 | 2 | 3 | 'full';
+export type ComponentRoundness = 1 | 2 | 3;
+export type ComponentRoundnessFull = 'full';