@flightlesslabs/dodo-ui 0.6.4 → 0.6.6

package/dist/stories/components/Layout/Paper/Paper.svelte.d.ts

@@ -1,6 +1,9 @@
-export type PaperRoundness = ComponentRoundness | false | ComponentRoundnessFull;
-export type PaperShadow = false | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x';
-import type { ComponentRoundness, ComponentRoundnessFull } from '../../../../types.js';
+import { type ComponentColor } from '../../../../types/colors.js';
+export type PaperColor = 'default' | ComponentColor;
+export declare const paperColorArray: PaperColor[];
+import type { ComponentRoundness } from '../../../../types/roundness.js';
+import type { ComponentShadow } from '../../../../types/shadow.js';
+import type { ComponentWeight } from '../../../../types/weight.js';
 import type { Snippet } from 'svelte';
 interface PaperProps {
     /** Paper contents goes here */
@@ -8,9 +11,9 @@ interface PaperProps {
     /** Paper ref */
     ref?: HTMLDivElement;
     /** How round should the border radius be? */
-    roundness?: PaperRoundness;
+    roundness?: ComponentRoundness;
     /** Shadow elevation */
-    shadow?: PaperShadow;
+    shadow?: ComponentShadow;
     /** Custom css class */
     class?: string;
     /** Paper Width */
@@ -19,8 +22,16 @@ interface PaperProps {
     height?: string;
     /** Id */
     id?: string;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
+    /** Add a border around  paper */
+    outline?: boolean;
+    /** What color to use? */
+    color?: PaperColor;
+    /** How should paper appear? */
+    variant?: ComponentWeight;
+    /** Custom background color. Use CSS compatible value */
+    customBackgroundColor?: string;
+    /** Custom border color. Use CSS compatible value */
+    customBorderColor?: string;
 }
 declare const Paper: import("svelte").Component<PaperProps, {}, "ref">;
 type Paper = ReturnType<typeof Paper>;

package/dist/stories/components/Layout/Paper/Roundness/Roundness.stories.svelte

@@ -11,20 +11,15 @@
   });
 </script>
 
-<Story name="Roundness 1x">
-  <Paper>Hola!</Paper>
-</Story>
+<Story name="Roundness 1" args={{ height: '100px', color: 'primary' }}></Story>
 
-<Story name="Roundness 2x" args={{ roundness: '2x' }}><Paper roundness="2x">Hola!</Paper></Story>
+<Story name="Roundness 2" args={{ roundness: 2, height: '100px', color: 'primary' }}></Story>
 
-<Story name="Roundness 3x" args={{ roundness: '3x' }}>
-  <Paper roundness="3x">Hola!</Paper>
-</Story>
+<Story name="Roundness 3" args={{ roundness: 3, height: '100px', color: 'primary' }}></Story>
 
-<Story name="Roundness False" args={{ roundness: false }}>
-  <Paper roundness={false}>Hola!</Paper>
-</Story>
+<Story name="Roundness 0" args={{ roundness: 0, height: '100px', color: 'primary' }}></Story>
 
-<Story name="Roundness Full" args={{ roundness: 'full' }}>
-  <Paper roundness="full">Hola!</Paper>
-</Story>
+<Story
+  name="Roundness Full"
+  args={{ roundness: 'full', height: '100px', width: '100%', color: 'primary' }}
+></Story>

package/dist/stories/components/Layout/Paper/Shadow/Shadow.stories.svelte

@@ -11,32 +11,14 @@
   });
 </script>
 
-<Story name="Shadow 1x">
-  <Paper>Hola!</Paper>
-</Story>
+<Story name="Shadow 0" args={{ height: '100px' }}>Hola!</Story>
 
-<Story name="Shadow 2x" args={{ shadow: '2x' }}><Paper shadow="2x">Hola!</Paper></Story>
+<Story name="Shadow 1" args={{ shadow: 1, height: '100px' }}>Hola!</Story>
 
-<Story name="Shadow 3x" args={{ shadow: '3x' }}>
-  <Paper shadow="3x">Hola!</Paper>
-</Story>
+<Story name="Shadow 2" args={{ shadow: 2, height: '100px' }}>Hola!</Story>
 
-<Story name="Shadow 4x" args={{ shadow: '4x' }}>
-  <Paper shadow="4x">Hola!</Paper>
-</Story>
+<Story name="Shadow 3" args={{ shadow: 3, height: '100px' }}>Hola!</Story>
 
-<Story name="Shadow 5x" args={{ shadow: '5x' }}>
-  <Paper shadow="5x">Hola!</Paper>
-</Story>
+<Story name="Shadow 4" args={{ shadow: 4, height: '100px' }}>Hola!</Story>
 
-<Story name="Shadow 6x" args={{ shadow: '6x' }}>
-  <Paper shadow="6x">Hola!</Paper>
-</Story>
-
-<Story name="Shadow 7x" args={{ shadow: '7x' }}>
-  <Paper shadow="7x">Hola!</Paper>
-</Story>
-
-<Story name="Shadow False" args={{ shadow: false }}>
-  <Paper shadow={false}>Hola!</Paper>
-</Story>
+<Story name="Shadow 5" args={{ shadow: 5, height: '100px' }}>Hola!</Story>

package/dist/stories/components/Layout/Paper/utils/scss/mixins.scss

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

package/dist/stories/developer tools/Intro.mdx

@@ -5,3 +5,5 @@ A set of components and tools used internally in dodo-ui.
 ## Explore More
 
 - [Utility Button](?path=/docs/developer-tools-components-utilitybutton--docs)
+- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
+- [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

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

@@ -1,13 +1,15 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
 import InputEnclosure from './InputEnclosure.svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentSizeArray } from '../../../../types/size.js';
 export const storyInputEnclosureArgTypes = {
     roundness: {
         control: { type: 'select' },
-        options: [false, '1x', '2x', '3x'],
+        options: componentRoundnessArray,
     },
     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
@@ -28,7 +30,5 @@ const { Story } = defineMeta({
 <Story name="Disabled" args={{ disabled: true }} />
 
 <Story name="Input example">
-  <InputEnclosure>
-    <input type="text" style="flex: 1; border: 0;" placeholder="Enter name" />
-  </InputEnclosure>
+  <input type="text" style="flex: 1; border: 0;" placeholder="Enter name" />
 </Story>

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

@@ -1,4 +1,4 @@
-<script lang="ts">let { size = 'normal', roundness = '1x', outline = true, class: className = '', disabled = false, before, after, error = false, focused = false, children, ref = $bindable(), } = $props();
+<script lang="ts">let { size = 'normal', roundness = 1, outline = true, class: className = '', disabled = false, before, after, error = false, focused = false, children, ref = $bindable(), } = $props();
 export {};
 </script>
 
@@ -29,25 +29,25 @@ export {};
 </div>
 
 <style>:global(:root) {
-  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-default-500);
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-500);
   --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-500);
   --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-500);
-  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-default-400);
-  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-default-200);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-200);
 }
 
 :global(.dodo-theme--dark) {
-  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-default-600);
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-600);
   --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-600);
   --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-600);
-  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-default-100);
-  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-default-500);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-500);
 }
 
 .dodo-ui-InputEnclosure {
   display: flex;
   overflow: hidden;
-  color: var(--dodo-color-default-800);
+  color: var(--dodo-color-neutral-800);
   transition: all 150ms;
   border: 0;
 }
@@ -109,12 +109,12 @@ export {};
   margin-right: 14px;
   margin-left: -4px;
 }
-.dodo-ui-InputEnclosure.roundness--1x {
-  border-radius: var(--dodo-ui-element-roundness-1x);
+.dodo-ui-InputEnclosure.roundness--1 {
+  border-radius: var(--dodo-ui-element-roundness-1);
 }
-.dodo-ui-InputEnclosure.roundness--2x {
-  border-radius: var(--dodo-ui-element-roundness-2x);
+.dodo-ui-InputEnclosure.roundness--2 {
+  border-radius: var(--dodo-ui-element-roundness-2);
 }
-.dodo-ui-InputEnclosure.roundness--3x {
-  border-radius: var(--dodo-ui-element-roundness-3x);
+.dodo-ui-InputEnclosure.roundness--3 {
+  border-radius: var(--dodo-ui-element-roundness-3);
 }</style>

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

@@ -1,4 +1,5 @@
-import type { ComponentRoundness, ComponentSize } from '../../../../types.js';
+import type { ComponentRoundness } from '../../../../types/roundness.js';
+import type { ComponentSize } from '../../../../types/size.js';
 import type { Snippet } from 'svelte';
 interface InputEnclosureProps {
     /** InputEnclosure contents goes here */
@@ -8,7 +9,7 @@ interface InputEnclosureProps {
     /** How large should the button be? */
     size?: ComponentSize;
     /** How round should the border radius be? */
-    roundness?: ComponentRoundness | false;
+    roundness?: ComponentRoundness;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** disabled state */

package/dist/stories/developer tools/components/InputEnclosure/Roundness/Roundness.stories.svelte

@@ -11,10 +11,10 @@
   });
 </script>
 
-<Story name="Roundness 1x" />
+<Story name="Roundness 1" />
 
-<Story name="Roundness 2x" args={{ roundness: '2x' }} />
+<Story name="Roundness 2" args={{ roundness: 2 }} />
 
-<Story name="Roundness 3x" args={{ roundness: '3x' }} />
+<Story name="Roundness 3" args={{ roundness: 3 }} />
 
-<Story name="Roundness False" args={{ roundness: false }} />
+<Story name="Roundness 0" args={{ roundness: 0 }} />

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

@@ -13,7 +13,7 @@
 </script>
 
 <!-- InputEnclosure icon in front. -->
-<Story name="Icon Before">
+<Story name="Icon Before" asChild>
   <InputEnclosure>
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />
@@ -22,7 +22,7 @@
 </Story>
 
 <!-- InputEnclosure icon in front. -->
-<Story name="Icon After">
+<Story name="Icon After" asChild>
   <InputEnclosure>
     {#snippet after()}
       <Icon icon="material-symbols:download-2" />
@@ -30,7 +30,7 @@
   </InputEnclosure>
 </Story>
 
-<Story name="Small" args={{ size: 'small' }}>
+<Story name="Small" args={{ size: 'small' }} asChild>
   <InputEnclosure size="small">
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />
@@ -38,7 +38,7 @@
   </InputEnclosure>
 </Story>
 
-<Story name="Large" args={{ size: 'large' }}>
+<Story name="Large" args={{ size: 'large' }} asChild>
   <InputEnclosure size="large">
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />

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

@@ -17,11 +17,11 @@
 </script>
 
 <Story name="Normal" args={{ disabled: false }}>
-  <UtilityButton><Icon icon="mdi:eye" width="24" height="24" /></UtilityButton>
+  <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

@@ -2,10 +2,11 @@
 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
@@ -21,9 +22,9 @@ const { Story } = defineMeta({
 
 <!-- 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

@@ -19,13 +19,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 +42,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,4 +1,4 @@
-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 {

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;
 }