@flightlesslabs/dodo-ui 0.17.0-beta-2 → 0.17.2

package/dist/stories/Home.mdx

@@ -11,7 +11,7 @@ import item from '../../../package.json?raw';
 
 <h3 style={{ fontWeight: 400 }}>An open-source, opinionated UI framework for Svelte.</h3>
 
-### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
+### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui) - [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
 
 </main>
 
@@ -68,4 +68,5 @@ import { Button } '@flightlesslabs/dodo-ui';
 
 - [Dark Theme](?path=/docs/developer-tools-philosophy-themes--docs#dark-theme)
 - [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
+- [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
 - [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

package/dist/stories/components/Form/Button/Button.svelte

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">"use strict";
-let { children, type = 'button', size = 'normal', color = 'primary', roundness = 1, variant = 'solid', outline = false, compact = false, fullWidth = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, ref = $bindable(), } = $props();
+let { children, type = 'button', size = 'normal', color = 'primary', roundness = 1, variant = 'solid', outline = false, compact = false, fullWidth = false, name, id, title, class: className = '', disabled = false, onclick, before, after, 'aria-label': ariaLabel, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, ref = $bindable(), } = $props();
 </script>
 
 {#snippet buttonContent()}
@@ -36,6 +36,7 @@ let { children, type = 'button', size = 'normal', color = 'primary', roundness =
     {target}
     type={anchorMediaType}
     {referrerpolicy}
+    aria-label={ariaLabel}
     class:outline
     class:compact
     class:disabled
@@ -57,6 +58,7 @@ let { children, type = 'button', size = 'normal', color = 'primary', roundness =
     class:outline
     class:compact
     class:fullWidth
+    aria-label={ariaLabel}
     class={[
       'dodo-ui-Button',
       `size--${size}`,
@@ -269,7 +271,6 @@ let { children, type = 'button', size = 'normal', color = 'primary', roundness =
 
 .dodo-ui-Button {
   cursor: pointer;
-  outline: none;
   transition: all 150ms;
   text-decoration: none;
   margin: 0;
@@ -281,7 +282,6 @@ let { children, type = 'button', size = 'normal', color = 'primary', roundness =
   border-style: solid;
   border-width: var(--dodo-ui-element-border-width);
   border-color: transparent;
-  outline: 0;
   color: inherit;
   letter-spacing: 0.3px;
 }

package/dist/stories/components/Form/Button/Button.svelte.d.ts

@@ -48,6 +48,8 @@ export interface ButtonProps {
     class?: string;
     /** The onclick event handler */
     onclick?: MouseEventHandler<HTMLButtonElement>;
+    /** Aria label */
+    'aria-label'?: string;
     /** Turn Button into link */
     href?: string;
     /** Link button: download  */

package/dist/stories/components/Form/Radio/Radio.svelte

@@ -239,7 +239,6 @@ let { children, size = 'normal', color = 'primary', roundness = 'full', name, id
   border-style: solid;
   border-width: calc(var(--dodo-ui-element-border-width) * 2);
   border-color: var(--dodo-ui-Radio-border-color);
-  outline: 0;
   letter-spacing: 0.3px;
   border-radius: inherit;
   position: relative;

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

@@ -4,6 +4,7 @@ A set of components and tools used internally in dodo-ui.
 
 ## Explore More
 
+- [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
 - [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/customize/AutoCustomize/AutoCustomize.mdx

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import * as ToolStories from './Tool/Tool.stories.svelte';
+
+<Story of={ToolStories.Main} />

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorButton.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">import Icon from '@iconify/svelte';
+const { color, selectedColor, onclick } = $props();
+function onClickMod() {
+    if (onclick) {
+        onclick(color);
+    }
+}
+</script>
+
+<button
+  class="ColorButton"
+  class:selectedColor={selectedColor === color}
+  onclick={onClickMod}
+  aria-label={`color button ${color}`}
+  style={`background-color: var(--dodo-color-base-${color}-400);`}
+>
+  <Icon icon="material-symbols:check-small" width="24" height="24" />
+</button>
+
+<style>.ColorButton {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  margin: 4px;
+  cursor: pointer;
+  color: var(--dodo-color-constant-white);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border: 3px solid transparent;
+}
+.ColorButton :global(svg) {
+  position: absolute;
+  display: none;
+}
+.ColorButton.selectedColor {
+  border-color: var(--dodo-color-primary-600);
+}
+.ColorButton.selectedColor :global(svg) {
+  display: block;
+}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorButton.svelte.d.ts

@@ -0,0 +1,8 @@
+interface ColorButtonProps {
+    color: string;
+    selectedColor?: string;
+    onclick?: (color: string) => void;
+}
+declare const ColorButton: import("svelte").Component<ColorButtonProps, {}, "">;
+type ColorButton = ReturnType<typeof ColorButton>;
+export default ColorButton;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorTool.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">import FormControl from '../../../../../../components/Form/FormControl/FormControl.svelte';
+import { colorPaletteBase } from '../../../../../philosophy/Colors/utils/color.js';
+import ColorButton from './ColorButton.svelte';
+const { colors = colorPaletteBase, selectedColor, onclick, label } = $props();
+</script>
+
+<div class="ColorTool">
+  <FormControl {label}>
+    {#each colors as color (color)}
+      <ColorButton {color} {onclick} {selectedColor} />
+    {/each}
+  </FormControl>
+</div>
+
+<style>.ColorTool {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: calc(var(--dodo-ui-space) * 2.5);
+  margin-left: -4px;
+  margin-right: -4px;
+}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorTool.svelte.d.ts

@@ -0,0 +1,9 @@
+interface ColorToolProps {
+    label?: string;
+    colors?: string[];
+    selectedColor?: string;
+    onclick?: (color: string) => void;
+}
+declare const ColorTool: import("svelte").Component<ColorToolProps, {}, "">;
+type ColorTool = ReturnType<typeof ColorTool>;
+export default ColorTool;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/Config.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">import Button from '../../../../../components/Form/Button/Button.svelte';
+import { useAutoCustomizeConfigStore } from '../stores/config.svelte.js';
+import ColorTool from './ColorTool/ColorTool.svelte';
+import Export from './Export.svelte';
+import ValueSilder from './ValueSilder/ValueSilder.svelte';
+</script>
+
+<div class="Config">
+  <h3>Auto Customize</h3>
+  <ColorTool
+    label="Primary Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ primary: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.primary}
+    colors={[
+      'violet',
+      'red',
+      'orange',
+      'amber',
+      'yellow',
+      'lime',
+      'green',
+      'emerald',
+      'teal',
+      'cyan',
+      'blue',
+      'indigo',
+      'purple',
+      'fuchsia',
+      'pink',
+      'rose',
+    ]}
+  />
+
+  <ColorTool
+    label="Secondary Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ secondary: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.secondary}
+    colors={[
+      'blue',
+      'red',
+      'orange',
+      'amber',
+      'yellow',
+      'lime',
+      'green',
+      'emerald',
+      'teal',
+      'cyan',
+      'indigo',
+      'violet',
+      'purple',
+      'fuchsia',
+      'pink',
+      'rose',
+    ]}
+  />
+
+  <ColorTool
+    label="Neutral Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ neutral: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.neutral}
+    colors={['gray', 'slate', 'zinc', 'neutral', 'stone']}
+  />
+
+  <ColorTool
+    label="Safe Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ safe: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.safe}
+    colors={['emerald', 'lime', 'green', 'teal']}
+  />
+
+  <ColorTool
+    label="Warning Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ warning: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.warning}
+    colors={['amber', 'red', 'rose', 'orange', 'yellow']}
+  />
+
+  <ColorTool
+    label="Danger Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ danger: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.danger}
+    colors={['red', 'orange', 'amber', 'yellow', 'pink', 'rose']}
+  />
+
+  <ValueSilder
+    label="Roundness:"
+    value={useAutoCustomizeConfigStore.data.components?.roundness || 0}
+    min={-5}
+    max={7}
+    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ roundness: value })}
+  />
+
+  <ValueSilder
+    label="Size:"
+    value={useAutoCustomizeConfigStore.data.components?.elementHeight || 0}
+    min={-5}
+    max={7}
+    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ elementHeight: value })}
+  />
+
+  <ValueSilder
+    label="Border:"
+    value={useAutoCustomizeConfigStore.data.components?.borderWidth || 0}
+    min={0}
+    max={7}
+    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ borderWidth: value })}
+  />
+
+  <ValueSilder
+    label="Space:"
+    value={useAutoCustomizeConfigStore.data.space || 0}
+    min={-5}
+    max={15}
+    oninput={(value) => useAutoCustomizeConfigStore.updateData({ space: value })}
+  />
+
+  <div class="Export">
+    <Export />
+  </div>
+
+  <div class="Reset">
+    <Button onclick={() => useAutoCustomizeConfigStore.reset()} variant="text" color="danger">
+      Reset
+    </Button>
+  </div>
+</div>
+
+<style>.Config {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--dodo-ui-space) * 2);
+}
+@media (min-width: 64rem) {
+  .Config {
+    max-width: 300px;
+    height: calc(100vh - 130px);
+    overflow: auto;
+  }
+}
+.Config .Reset {
+  margin-top: calc(var(--dodo-ui-space) * 4);
+}</style>

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

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/Export.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">import Button from '../../../../../components/Form/Button/Button.svelte';
+import { colorPalette, colorPaletteValues, } from '../../../../philosophy/Colors/utils/color.js';
+import { downloadFile } from '../helpers/download-file.js';
+import { autoCustomizeConfigdefaultData, useAutoCustomizeConfigStore, } from '../stores/config.svelte.js';
+async function onclick() {
+    try {
+        let rawText = `/* dodo-ui-custom.css */
+:root {`;
+        for (let index = 0; index < colorPalette.length; index++) {
+            const colorName = colorPalette[index];
+            const fieldName = `${colorName}`;
+            const dataPoint = useAutoCustomizeConfigStore.data.colors &&
+                useAutoCustomizeConfigStore.data.colors[fieldName]
+                ? useAutoCustomizeConfigStore.data.colors[fieldName]
+                : undefined;
+            const defaultValue = autoCustomizeConfigdefaultData.colors && autoCustomizeConfigdefaultData.colors[fieldName]
+                ? autoCustomizeConfigdefaultData.colors[fieldName]
+                : undefined;
+            const pass = dataPoint && dataPoint !== defaultValue ? true : false;
+            if (!pass) {
+                continue;
+            }
+            rawText += `
+  /* ${colorName} color */`;
+            for (let index = 0; index < colorPaletteValues.length; index++) {
+                const weight = colorPaletteValues[index];
+                rawText += `
+  --dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight});`;
+                if (colorPaletteValues[index] === colorPaletteValues[colorPaletteValues.length - 1]) {
+                    rawText += `
+`;
+                }
+            }
+        }
+        if (useAutoCustomizeConfigStore.data.components?.roundness) {
+            const roundness = useAutoCustomizeConfigStore.data.components?.roundness / 8;
+            rawText += `
+
+  /* Component: Roundness */
+  --dodo-ui-element-roundness-1: ${0.4375 + roundness}em;
+  --dodo-ui-element-roundness-2: ${0.8125 + roundness}em;
+  --dodo-ui-element-roundness-3: ${1.9375 + roundness}em;`;
+        }
+        if (useAutoCustomizeConfigStore.data.components?.elementHeight) {
+            const elementHeight = useAutoCustomizeConfigStore.data.components.elementHeight + 2;
+            const elementHeightTrack = useAutoCustomizeConfigStore.data.components.elementHeight / 2;
+            rawText += `
+
+  /* Component: Size */
+  --dodo-ui-element-height-small: ${34 + elementHeight}px;
+  --dodo-ui-element-height-normal: ${40 + elementHeight}px;
+  --dodo-ui-element-height-large: ${50 + elementHeight}px;
+  --dodo-ui-track-element-height-small: ${6 + elementHeightTrack}px;
+  --dodo-ui-track-element-height-normal: ${8 + elementHeightTrack}px;
+  --dodo-ui-track-element-height-large: ${10 + elementHeightTrack}px;`;
+        }
+        if (useAutoCustomizeConfigStore.data.components?.borderWidth) {
+            const borderWidth = useAutoCustomizeConfigStore.data.components.borderWidth;
+            rawText += `
+
+  /* Component: Border */
+  --dodo-ui-element-border-width: ${2 + borderWidth}px;`;
+        }
+        if (useAutoCustomizeConfigStore.data.space) {
+            const space = useAutoCustomizeConfigStore.data.space;
+            rawText += `
+
+  /* Space */
+  --dodo-ui-space-small: ${6 + space}px;
+  --dodo-ui-space: ${8 + space}px;
+  --dodo-ui-space-large: ${10 + space}px;`;
+        }
+        // end
+        rawText += `
+}`;
+        rawText += `
+
+.dodo-theme--dark {`;
+        for (let index = 0; index < colorPalette.length; index++) {
+            const colorName = colorPalette[index];
+            const fieldName = `${colorName}`;
+            const dataPoint = useAutoCustomizeConfigStore.data.colors &&
+                useAutoCustomizeConfigStore.data.colors[fieldName]
+                ? useAutoCustomizeConfigStore.data.colors[fieldName]
+                : undefined;
+            const defaultValue = autoCustomizeConfigdefaultData.colors && autoCustomizeConfigdefaultData.colors[fieldName]
+                ? autoCustomizeConfigdefaultData.colors[fieldName]
+                : undefined;
+            const pass = dataPoint && dataPoint !== defaultValue ? true : false;
+            if (!pass) {
+                continue;
+            }
+            rawText += `
+
+  /* Dark: ${colorName} color */`;
+            const colorPaletteValuesReversed = [...colorPaletteValues].reverse();
+            for (let index = 0; index < colorPaletteValues.length; index++) {
+                const weight = colorPaletteValues[index];
+                const weightReversed = colorPaletteValuesReversed[index];
+                rawText += `
+  --dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weightReversed});`;
+            }
+            if (colorPaletteValuesReversed[index] ===
+                colorPaletteValuesReversed[colorPaletteValuesReversed.length - 1]) {
+                rawText += `
+`;
+            }
+        }
+        // end
+        rawText += `
+}`;
+        const data = new Blob([rawText], { type: 'text/plain' });
+        await downloadFile(`dodo-ui-custom.css`, data);
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
+</script>
+
+<Button {onclick}>Export CSS</Button>
+
+<style></style>

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

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ValueSilder/ValueSilder.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">import FormControl from '../../../../../../components/Form/FormControl/FormControl.svelte';
+import RangeSlider from '../../../../../../components/Form/RangeSlider/RangeSlider.svelte';
+const { label, value, min, max, oninput } = $props();
+let displayValue = $state(0);
+function oninputMod(e) {
+    const target = e.target;
+    if (oninput) {
+        oninput(Number(target.value));
+    }
+}
+$effect(() => {
+    if (value === 0) {
+        displayValue = 1;
+    }
+    else if (value < 0) {
+        displayValue = value;
+    }
+    else {
+        displayValue = value + 1;
+    }
+});
+</script>
+
+<div class="ValueSilder">
+  <FormControl label={`${label} ${displayValue}x`}>
+    <RangeSlider {value} {min} {max} oninput={oninputMod} size="small" />
+  </FormControl>
+</div>
+
+<style>.ValueSilder {
+  margin-bottom: calc(var(--dodo-ui-space) * 2.5);
+}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ValueSilder/ValueSilder.svelte.d.ts

@@ -0,0 +1,11 @@
+interface ValueSilderProps {
+    label?: string;
+    value: number;
+    min: number;
+    max: number;
+    /** oninput event handler */
+    oninput?: (value: number) => void;
+}
+declare const ValueSilder: import("svelte").Component<ValueSilderProps, {}, "">;
+type ValueSilder = ReturnType<typeof ValueSilder>;
+export default ValueSilder;