Skip to content

Commit 3bfbfe0

Browse files
siddacoolsiddacool
committed
rangeslider added
1 parent b4f37d1 commit 3bfbfe0

File tree

5 files changed

+122
-102
lines changed

5 files changed

+122
-102
lines changed

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/Config.svelte‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { useAutoCustomizeConfigStore } from '../stores/config.svelte.js';
44
import ColorTool from './ColorTool/ColorTool.svelte';
55
import Export from './Export.svelte';
6+
import ValueSilder from './ValueSilder/ValueSilder.svelte';
67
</script>
78

89
<div class="Config">
@@ -82,6 +83,14 @@
8283
colors={['red', 'orange', 'amber', 'yellow', 'pink', 'rose']}
8384
/>
8485

86+
<ValueSilder
87+
label="Roundness:"
88+
value={useAutoCustomizeConfigStore.data.roundness || 0}
89+
min={-4}
90+
max={7}
91+
oninput={(value) => useAutoCustomizeConfigStore.updateData({ roundness: value })}
92+
/>
93+
8594
<div class="Reset">
8695
<Button onclick={() => useAutoCustomizeConfigStore.reset()} variant="text" color="danger">
8796
Reset

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/Export.svelte‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,20 @@
3737
const weight = colorPaletteValues[index];
3838
3939
rawText += `
40-
--dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight});`;
40+
--dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight});`;
4141
}
4242
}
4343
44+
if (useAutoCustomizeConfigStore.data.roundness) {
45+
const roundness = useAutoCustomizeConfigStore.data.roundness / 8;
46+
47+
rawText += `
48+
/* Roundness */
49+
--dodo-ui-element-roundness-1: ${0.4375 + roundness}em;
50+
--dodo-ui-element-roundness-2: ${0.8125 + roundness}em;
51+
--dodo-ui-element-roundness-3: ${1.9375 + roundness}em;`;
52+
}
53+
4454
// end
4555
rawText += `
4656
}`;
@@ -74,7 +84,7 @@
7484
const weightReversed = colorPaletteValuesReversed[index];
7585
7686
rawText += `
77-
--dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weightReversed});`;
87+
--dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weightReversed});`;
7888
}
7989
}
8090
@@ -84,7 +94,7 @@
8494
8595
const data = new Blob([rawText], { type: 'text/plain' });
8696
87-
await downloadFile(`dodo-custom.css`, data);
97+
await downloadFile(`dodo-ui-custom.css`, data);
8898
}
8999
</script>
90100

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/ValueSilder/ValueSilder.svelte‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script lang="ts">
2+
import FormControl from '$lib/stories/components/Form/FormControl/FormControl.svelte';
3+
import RangeSlider from '$lib/stories/components/Form/RangeSlider/RangeSlider.svelte';
4+
import type { FormEventHandler } from 'svelte/elements';
5+
6+
interface ValueSilderProps {
7+
label?: string;
8+
value: number;
9+
min: number;
10+
max: number;
11+
/** oninput event handler */
12+
oninput?: (value: number) => void;
13+
}
14+
15+
const { label, value, min, max, oninput }: ValueSilderProps = $props();
16+
17+
let displayValue = $state(0);
18+
19+
function oninputMod(e: Event) {
20+
const target = e.target as HTMLInputElement;
21+
22+
if (oninput) {
23+
oninput(Number(target.value));
24+
}
25+
}
26+
27+
$effect(() => {
28+
if (value === 0) {
29+
displayValue = 1;
30+
} else if (value < 0) {
31+
displayValue = value;
32+
} else {
33+
displayValue = value + 1;
34+
}
35+
});
36+
</script>
37+
38+
<div class="ValueSilder">
39+
<FormControl label={`${label} ${displayValue}x`}>
40+
<RangeSlider {value} {min} {max} oninput={oninputMod} size="small" />
41+
</FormControl>
42+
</div>
43+
44+
<style lang="scss">
45+
.ValueSilder {
46+
margin-bottom: calc(var(--dodo-ui-space) * 2.5);
47+
}
48+
</style>

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/Preview/Preview.svelte‎

Lines changed: 50 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,62 @@
11
<script lang="ts">
22
import Button from '$lib/stories/components/Form/Button/Button.svelte';
3+
import RangeSlider from '$lib/stories/components/Form/RangeSlider/RangeSlider.svelte';
34
import Paper from '$lib/stories/components/Layout/Paper/Paper.svelte';
4-
import { colorPaletteValues } from '$lib/stories/developer tools/philosophy/Colors/utils/color.js';
5-
import { useAutoCustomizeConfigStore } from '../stores/config.svelte.js';
5+
import {
6+
colorPalette,
7+
colorPaletteValues,
8+
} from '$lib/stories/developer tools/philosophy/Colors/utils/color.js';
9+
import {
10+
useAutoCustomizeConfigStore,
11+
type AutoCustomizeConfigData,
12+
} from '../stores/config.svelte.js';
613
714
let cssVariables = $state<string[]>([]);
815
916
$effect(() => {
1017
const newCssvariables: string[] = [];
1118
12-
for (let index = 0; index < colorPaletteValues.length; index++) {
13-
const weight = colorPaletteValues[index];
14-
15-
newCssvariables.push(
16-
`--dodo-color-primary-${weight}: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.primaryColor}-${weight})`,
17-
);
18-
19-
newCssvariables.push(
20-
`--dodo-color-secondary-${weight}: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.secondaryColor}-${weight})`,
21-
);
22-
23-
newCssvariables.push(
24-
`--dodo-color-neutral-${weight}: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.neutralColor}-${weight})`,
25-
);
26-
27-
newCssvariables.push(
28-
`--dodo-color-safe-${weight}: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.safeColor}-${weight})`,
29-
);
19+
for (let index = 0; index < colorPalette.length; index++) {
20+
const colorName = colorPalette[index];
21+
const fieldName = `${colorName}Color` as keyof AutoCustomizeConfigData;
22+
23+
const dataPoint = useAutoCustomizeConfigStore.data[fieldName];
24+
25+
if (dataPoint) {
26+
for (let index = 0; index < colorPaletteValues.length; index++) {
27+
const weight = colorPaletteValues[index];
28+
29+
newCssvariables.push(
30+
`--dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight})`,
31+
);
32+
}
33+
34+
newCssvariables.push(
35+
...[
36+
`--dodo-ui-Button-outline-${colorName}: var(--dodo-color-base-${dataPoint}-400)`,
37+
`--dodo-ui-Button-text-${colorName}-bg: var(--dodo-color-base-${dataPoint}-100)`,
38+
`--dodo-ui-Button-text-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-200)`,
39+
`--dodo-ui-Button-text-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-300)`,
40+
`--dodo-ui-Button-solid-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
41+
`--dodo-ui-Button-solid-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-600)`,
42+
`--dodo-ui-Button-solid-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-700)`,
43+
`--dodo-ui-RangeSlider-thumb-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
44+
`--dodo-ui-RangeSlider-thumb-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-600)`,
45+
`--dodo-ui-RangeSlider-thumb-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-700)`,
46+
`--dodo-ui-RangeSlider-track-filled-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
47+
],
48+
);
49+
}
50+
}
3051
31-
newCssvariables.push(
32-
`--dodo-color-warning-${weight}: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.warningColor}-${weight})`,
33-
);
52+
if (useAutoCustomizeConfigStore.data.roundness) {
53+
const roundness = useAutoCustomizeConfigStore.data.roundness / 8;
3454
35-
newCssvariables.push(
36-
`--dodo-color-danger-${weight}: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.dangerColor}-${weight})`,
37-
);
55+
newCssvariables.push(`--dodo-ui-element-roundness-1: ${0.4375 + roundness}em`);
56+
newCssvariables.push(`--dodo-ui-element-roundness-2: ${0.8125 + roundness}em`);
57+
newCssvariables.push(`--dodo-ui-element-roundness-3: ${1.9375 + roundness}em`);
3858
}
3959
40-
newCssvariables.push(
41-
...[
42-
`--dodo-ui-Button-outline-primary: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.primaryColor}-400)`,
43-
`--dodo-ui-Button-text-primary-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.primaryColor}-100)`,
44-
`--dodo-ui-Button-text-primary-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.primaryColor}-200)`,
45-
`--dodo-ui-Button-text-primary-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.primaryColor}-300)`,
46-
`--dodo-ui-Button-solid-primary-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.primaryColor}-500)`,
47-
`--dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.primaryColor}-600)`,
48-
`--dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.primaryColor}-700)`,
49-
],
50-
);
51-
52-
newCssvariables.push(
53-
...[
54-
`--dodo-ui-Button-outline-secondary: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.secondaryColor}-400)`,
55-
`--dodo-ui-Button-text-secondary-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.secondaryColor}-100)`,
56-
`--dodo-ui-Button-text-secondary-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.secondaryColor}-200)`,
57-
`--dodo-ui-Button-text-secondary-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.secondaryColor}-300)`,
58-
`--dodo-ui-Button-solid-secondary-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.secondaryColor}-500)`,
59-
`--dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.secondaryColor}-600)`,
60-
`--dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.secondaryColor}-700)`,
61-
],
62-
);
63-
64-
newCssvariables.push(
65-
...[
66-
`--dodo-ui-Button-outline-neutral: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.neutralColor}-400)`,
67-
`--dodo-ui-Button-text-neutral-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.neutralColor}-100)`,
68-
`--dodo-ui-Button-text-neutral-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.neutralColor}-200)`,
69-
`--dodo-ui-Button-text-neutral-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.neutralColor}-300)`,
70-
`--dodo-ui-Button-solid-neutral-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.neutralColor}-500)`,
71-
`--dodo-ui-Button-solid-neutral-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.neutralColor}-600)`,
72-
`--dodo-ui-Button-solid-neutral-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.neutralColor}-700)`,
73-
],
74-
);
75-
76-
newCssvariables.push(
77-
...[
78-
`--dodo-ui-Button-outline-safe: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.safeColor}-400)`,
79-
`--dodo-ui-Button-text-safe-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.safeColor}-100)`,
80-
`--dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.safeColor}-200)`,
81-
`--dodo-ui-Button-text-safe-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.safeColor}-300)`,
82-
`--dodo-ui-Button-solid-safe-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.safeColor}-500)`,
83-
`--dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.safeColor}-600)`,
84-
`--dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.safeColor}-700)`,
85-
],
86-
);
87-
88-
newCssvariables.push(
89-
...[
90-
`--dodo-ui-Button-outline-warning: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.warningColor}-400)`,
91-
`--dodo-ui-Button-text-warning-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.warningColor}-100)`,
92-
`--dodo-ui-Button-text-warning-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.warningColor}-200)`,
93-
`--dodo-ui-Button-text-warning-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.warningColor}-300)`,
94-
`--dodo-ui-Button-solid-warning-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.warningColor}-500)`,
95-
`--dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.warningColor}-600)`,
96-
`--dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.warningColor}-700)`,
97-
],
98-
);
99-
100-
newCssvariables.push(
101-
...[
102-
`--dodo-ui-Button-outline-danger: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.dangerColor}-400)`,
103-
`--dodo-ui-Button-text-danger-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.dangerColor}-100)`,
104-
`--dodo-ui-Button-text-danger-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.dangerColor}-200)`,
105-
`--dodo-ui-Button-text-danger-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.dangerColor}-300)`,
106-
`--dodo-ui-Button-solid-danger-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.dangerColor}-500)`,
107-
`--dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.dangerColor}-600)`,
108-
`--dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-base-${useAutoCustomizeConfigStore.data.dangerColor}-700)`,
109-
],
110-
);
111-
11260
cssVariables = [...newCssvariables];
11361
});
11462
</script>
@@ -158,10 +106,13 @@
158106

159107
<div class="section">
160108
<div class="column">
161-
<Paper shadow={1} width="150px" height="200px">
109+
<Paper shadow={1} width="150px" height="180px">
162110
<div style="padding: 16px">Hola!</div>
163111
</Paper>
164112
</div>
113+
<div class="column">
114+
<RangeSlider value={50} min={20} max={70} />
115+
</div>
165116
</div>
166117
</div>
167118

‎src/lib/stories/developer tools/customize/AutoCustomize/Tool/stores/config.svelte.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export type AutoCustomizeConfigData = {
99
safeColor?: string;
1010
warningColor?: string;
1111
dangerColor?: string;
12+
roundness?: number;
1213
};
1314

1415
export const autoCustomizeConfigdefaultData: AutoCustomizeConfigData = {
@@ -18,6 +19,7 @@ export const autoCustomizeConfigdefaultData: AutoCustomizeConfigData = {
1819
safeColor: 'emerald',
1920
warningColor: 'amber',
2021
dangerColor: 'red',
22+
roundness: 0,
2123
};
2224

2325
function getDefaultData() {

0 commit comments

Comments
 (0)