@flightlesslabs/dodo-ui 0.6.5 → 0.6.6

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/global.css

@@ -1,6 +1,7 @@
 @import '_minimal-reset.css';
 @import '_colors-base.css';
 @import '_colors.css';
+@import '_space.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/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'];

package/package.json

@@ -1,6 +1,19 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.6.5",
+  "version": "0.6.6",
+  "scripts": {
+    "build": "vite build && pnpm run prepack",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
+    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
+    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
+  },
   "homepage": "https://flightlesslabs.github.io/dodo-ui",
   "repository": {
     "type": "git",
@@ -37,9 +50,9 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",
     "@eslint/compat": "^1.2.9",
-    "@eslint/js": "^9.26.0",
+    "@eslint/js": "^9.27.0",
     "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-svelte-csf": "5.0.0-next.28",
+    "@storybook/addon-svelte-csf": "5.0.1",
     "@storybook/blocks": "^8.6.14",
     "@storybook/experimental-addon-test": "^8.6.14",
     "@storybook/manager-api": "^8.6.14",
@@ -48,14 +61,14 @@
     "@storybook/test": "^8.6.14",
     "@storybook/theming": "^8.6.14",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.21.0",
+    "@sveltejs/kit": "^2.21.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@vitest/browser": "^3.1.3",
-    "@vitest/coverage-v8": "^3.1.3",
-    "eslint": "^9.26.0",
+    "@vitest/browser": "^3.1.4",
+    "@vitest/coverage-v8": "^3.1.4",
+    "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.7.0",
+    "eslint-plugin-svelte": "^3.8.1",
     "globals": "^16.1.0",
     "playwright": "^1.52.0",
     "prettier": "^3.5.3",
@@ -64,33 +77,22 @@
     "sass": "^1.89.0",
     "storybook": "^8.6.14",
     "storybook-dark-mode": "^4.0.2",
-    "svelte": "^5.30.1",
+    "svelte": "^5.31.1",
     "svelte-check": "^4.2.1",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.1",
     "vite": "^6.3.5",
-    "vitest": "^3.1.3"
+    "vitest": "^3.1.4"
   },
   "keywords": [
     "svelte"
   ],
   "volta": {
-    "node": "22.15.0",
-    "pnpm": "10.10.0"
+    "node": "22.15.1",
+    "pnpm": "10.11.0"
   },
   "dependencies": {
     "@iconify/svelte": "^5.0.0"
-  },
-  "scripts": {
-    "build": "vite build && pnpm run prepack",
-    "preview": "vite preview",
-    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
-    "dev": "storybook dev -p 6006",
-    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
-    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
-    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
   }
-}
+}

package/src/lib/index.ts

@@ -1,6 +1,16 @@
 import '$lib/styles/global.css';
 
-export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from './types.js';
+export type {
+  ComponentColorPriority,
+  ComponentColorSeverity,
+  ComponentColor,
+} from './types/colors.js';
+
+export type { ComponentRoundness } from './types/roundness.js';
+
+export type { ComponentSize } from './types/size.js';
+
+export type { ComponentWeight } from './types/weight.js';
 
 /** developer tools: components: UtilityButton */
 export { default as UtilityButton } from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
@@ -11,10 +21,9 @@ export { default as InputEnclosure } from '$lib/stories/developer tools/componen
 /** Form: Button */
 export { default as Button } from '$lib/stories/components/Form/Button/Button.svelte';
 export type {
-  ButtonColor,
-  ButtonRoundness,
   ButtonLinkTarget,
   ButtonLinkReferrerpolicy,
+  ButtonType,
 } from '$lib/stories/components/Form/Button/Button.svelte';
 
 /** Form: TextInput */
@@ -37,7 +46,6 @@ export { default as FormControl } from '$lib/stories/components/Form/FormControl
 
 /** Form: Message */
 export { default as Message } from '$lib/stories/components/Form/Message/Message.svelte';
-export type { MessageColor } from '$lib/stories/components/Form/Message/Message.svelte';
 
 /** Form: SimpleSelect */
 export { default as SimpleSelect } from '$lib/stories/components/Form/SimpleSelect/SimpleSelect.svelte';
@@ -48,7 +56,4 @@ export type {
 
 /** Layout: Paper */
 export { default as Paper } from '$lib/stories/components/Layout/Paper/Paper.svelte';
-export type {
-  PaperRoundness,
-  PaperShadow,
-} from '$lib/stories/components/Layout/Paper/Paper.svelte';
+export type { PaperColor } from '$lib/stories/components/Layout/Paper/Paper.svelte';

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

@@ -1,6 +1,4 @@
 <script lang="ts" module>
-  export type ButtonColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
-  export type ButtonRoundness = ComponentRoundness | false | ComponentRoundnessFull;
   export type ButtonLinkTarget =
     | '_self'
     | '_blank'
@@ -10,10 +8,16 @@
     | undefined
     | null;
   export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
+  export type ButtonType = 'button' | 'submit';
+  export const buttonTypeArray: ButtonType[] = ['button', 'submit'];
 </script>
 
 <script lang="ts">
-  import type { ComponentRoundness, ComponentRoundnessFull, ComponentSize } from '$lib/types.js';
+  import type { ComponentColor } from '$lib/types/colors.js';
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { ComponentWeight } from '$lib/types/weight.js';
+
   import type { Snippet } from 'svelte';
   import type { MouseEventHandler } from 'svelte/elements';
 
@@ -23,17 +27,17 @@
     /** Button ref */
     ref?: HTMLButtonElement | HTMLAnchorElement;
     /** Regular button or submit button? */
-    type?: 'button' | 'submit';
+    type?: ButtonType;
     /** How large should the button be? */
     size?: ComponentSize;
     /** Full width button? */
     fullWidth?: boolean;
     /** What color to use? */
-    color?: ButtonColor;
+    color?: ComponentColor;
     /** How round should the border radius be? */
-    roundness?: ButtonRoundness;
+    roundness?: ComponentRoundness;
     /** How should the button appear? */
-    variant?: 'text' | 'solid';
+    variant?: ComponentWeight;
     /** Add a border around the button */
     outline?: boolean;
     /** Compact button for icons */
@@ -73,17 +77,15 @@
     anchorMediaType?: string | undefined | null;
     /** Link button: referrerpolicy  */
     referrerpolicy?: ButtonLinkReferrerpolicy;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
   }
 
   let {
     children,
     type = 'button',
     size = 'normal',
-    color = 'default',
-    roundness = '1x',
-    variant = 'text',
+    color = 'primary',
+    roundness = 1,
+    variant = 'solid',
     outline = false,
     compact = false,
     fullWidth = false,
@@ -104,7 +106,6 @@
     target,
     anchorMediaType,
     referrerpolicy,
-    _unsafeChildrenStringForTesting,
     ref = $bindable<HTMLButtonElement | HTMLAnchorElement>(),
   }: ButtonProps = $props();
 </script>
@@ -118,8 +119,6 @@
 
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 
   {#if after}
@@ -187,10 +186,10 @@
   @use 'utils/scss/mixins.scss' as *;
 
   :global(:root) {
-    --dodo-ui-Button-disabled-color: var(--dodo-color-default-400);
-    --dodo-ui-Button-disabled-bg: var(--dodo-color-default-200);
+    --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-400);
+    --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-200);
 
-    @include generate-dodo-ui-button-colors(default);
+    @include generate-dodo-ui-button-colors(neutral);
     @include generate-dodo-ui-button-colors(primary);
     @include generate-dodo-ui-button-colors(secondary);
     @include generate-dodo-ui-button-colors(safe);
@@ -199,10 +198,10 @@
   }
 
   :global(.dodo-theme--dark) {
-    --dodo-ui-Button-disabled-bg: var(--dodo-color-default-100);
-    --dodo-ui-Button-disabled-color: var(--dodo-color-default-500);
+    --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-100);
+    --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-500);
 
-    @include generate-dodo-ui-button-colors-dark(default);
+    @include generate-dodo-ui-button-colors-dark(neutral);
     @include generate-dodo-ui-button-colors-dark(primary);
     @include generate-dodo-ui-button-colors-dark(secondary);
     @include generate-dodo-ui-button-colors-dark(safe);
@@ -233,13 +232,13 @@
       &--normal {
         height: var(--dodo-ui-element-height-normal);
         font-size: 1rem;
-        padding: 0 12px;
+        padding: 0 calc(var(--dodo-ui-space-small) * 2);
         min-width: 45px;
       }
 
       &--small {
         height: var(--dodo-ui-element-height-small);
-        padding: 0 8px;
+        padding: 0 var(--dodo-ui-space);
         font-size: 0.9rem;
         min-width: 35px;
       }
@@ -247,22 +246,22 @@
       &--large {
         height: var(--dodo-ui-element-height-large);
         font-size: 1.1rem;
-        padding: 0 16px;
+        padding: 0 calc(var(--dodo-ui-space) * 2);
         min-width: 85px;
       }
     }
 
     &.roundness {
-      &--1x {
-        border-radius: var(--dodo-ui-element-roundness-1x);
+      &--1 {
+        border-radius: var(--dodo-ui-element-roundness-1);
       }
 
-      &--2x {
-        border-radius: var(--dodo-ui-element-roundness-2x);
+      &--2 {
+        border-radius: var(--dodo-ui-element-roundness-2);
       }
 
-      &--3x {
-        border-radius: var(--dodo-ui-element-roundness-3x);
+      &--3 {
+        border-radius: var(--dodo-ui-element-roundness-3);
       }
 
       &--full {
@@ -271,7 +270,7 @@
     }
 
     &.color {
-      @include generate-dodo-ui-button-color(default);
+      @include generate-dodo-ui-button-color(neutral);
       @include generate-dodo-ui-button-color(primary);
       @include generate-dodo-ui-button-color(secondary);
       @include generate-dodo-ui-button-color(safe);

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

@@ -50,18 +50,13 @@
 </div>
 
 <style lang="scss">
-  :global(:root) {
-    --dodo-ui-FormControl-LabelSection-gap: 8px;
-    --dodo-ui-FormControl-errorMessage-gap: 10px;
-  }
-
   .dodo-ui-FormControl {
     .LabelSection {
-      margin-bottom: var(--dodo-ui-FormControl-LabelSection-gap);
+      margin-bottom: var(--dodo-ui-space);
     }
 
     .errorMessage {
-      margin-top: var(--dodo-ui-FormControl-errorMessage-gap);
+      margin-top: var(--dodo-ui-space-large);
     }
   }
 </style>

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

@@ -12,8 +12,6 @@
     form?: string;
     /** Custom css class*/
     class?: string;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
   }
 
   let {
@@ -21,7 +19,6 @@
     class: className = '',
     for: htmlFor,
     form,
-    _unsafeChildrenStringForTesting,
     ref = $bindable<HTMLLabelElement>(),
   }: LabelProps = $props();
 </script>
@@ -29,15 +26,13 @@
 <label class={['dodo-ui-Label', className].join(' ')} for={htmlFor} {form} bind:this={ref}>
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 </label>
 
 <style lang="scss">
   .dodo-ui-Label {
     font-size: 0.95rem;
-    color: var(--dodo-color-default-700);
+    color: var(--dodo-color-neutral-700);
     display: flex;
     align-items: center;
     font-family: inherit;

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

@@ -1,9 +1,7 @@
-<script lang="ts" module>
-  export type MessageColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
-</script>
-
 <script lang="ts">
-  import type { ComponentSize } from '$lib/types.js';
+  import type { ComponentColor } from '$lib/types/colors.js';
+
+  import type { ComponentSize } from '$lib/types/size.js';
 
   import type { Snippet } from 'svelte';
 
@@ -13,21 +11,18 @@
     /** Message ref */
     ref?: HTMLDivElement;
     /** What color to use? */
-    color?: MessageColor;
+    color?: ComponentColor;
     /** Message size */
     size?: ComponentSize;
     /** Custom css class*/
     class?: string;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
   }
 
   let {
     children,
     class: className = '',
-    color = 'default',
+    color = 'primary',
     ref = $bindable<HTMLDivElement>(),
-    _unsafeChildrenStringForTesting,
     size = 'normal',
   }: MessageProps = $props();
 </script>
@@ -38,8 +33,6 @@
 >
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 </div>
 
@@ -64,10 +57,6 @@
     }
 
     &.color {
-      &--default {
-        color: var(--dodo-color-default-800);
-      }
-
       &--primary {
         color: var(--dodo-color-primary-600);
       }
@@ -76,6 +65,10 @@
         color: var(--dodo-color-secondary-600);
       }
 
+      &--neutral {
+        color: var(--dodo-color-neutral-600);
+      }
+
       &--safe {
         color: var(--dodo-color-safe-600);
       }

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

@@ -6,7 +6,6 @@
 </script>
 
 <script lang="ts">
-  import type { ComponentRoundness, ComponentSize } from '$lib/types.js';
   import type { Snippet } from 'svelte';
   import type {
     ChangeEventHandler,
@@ -18,6 +17,8 @@
   import Icon from '@iconify/svelte';
   import UtilityButton from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
   import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
 
   interface PasswordInputProps {
     /** How large should the button be? */
@@ -31,7 +32,7 @@
     /** Toggle Password Icon */
     customPasswordToggleIcon?: (toggle: boolean) => Snippet;
     /** How round should the border radius be? */
-    roundness?: ComponentRoundness | false;
+    roundness?: ComponentRoundness;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** Input value */
@@ -74,7 +75,7 @@
 
   let {
     size = 'normal',
-    roundness = '1x',
+    roundness = 1,
     outline = true,
     name,
     id,
@@ -194,13 +195,13 @@
       &--normal {
         input {
           font-size: 1rem;
-          padding: 0 12px;
+          padding: 0 calc(var(--dodo-ui-space-small) * 2);
         }
       }
 
       &--small {
         input {
-          padding: 0 8px;
+          padding: 0 var(--dodo-ui-space);
           font-size: 0.9rem;
         }
       }
@@ -208,7 +209,7 @@
       &--large {
         input {
           font-size: 1.1rem;
-          padding: 0 14px;
+          padding: 0 calc(var(--dodo-ui-space) * 2);
         }
       }
     }

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

@@ -12,8 +12,9 @@
 
 <script lang="ts">
   import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
+  import type { ComponentSize } from '$lib/types/size.js';
 
-  import type { ComponentRoundness, ComponentSize } from '$lib/types.js';
   import type { Snippet } from 'svelte';
   import type { ChangeEventHandler, FocusEventHandler } from 'svelte/elements';
 
@@ -23,7 +24,7 @@
     /** How large should the button be? */
     size?: ComponentSize;
     /** How round should the border radius be? */
-    roundness?: ComponentRoundness | false;
+    roundness?: ComponentRoundness;
     /** How round should the border radius be? */
     options: SimpleSelectOption[];
     /** Add a border around the button. Default True */
@@ -56,7 +57,7 @@
 
   let {
     size = 'normal',
-    roundness = '1x',
+    roundness = 1,
     outline = true,
     name,
     id,
@@ -137,13 +138,13 @@
       &--normal {
         select {
           font-size: 1rem;
-          padding: 0 12px;
+          padding: 0 calc(var(--dodo-ui-space-small) * 2);
         }
       }
 
       &--small {
         select {
-          padding: 0 8px;
+          padding: 0 var(--dodo-ui-space);
           font-size: 0.9rem;
         }
       }
@@ -151,7 +152,7 @@
       &--large {
         select {
           font-size: 1.1rem;
-          padding: 0 14px;
+          padding: 0 calc(var(--dodo-ui-space) * 2);
         }
       }
     }