Skip to content

Commit b522584

Browse files
siddacoolsiddacool
committed
sopace added
1 parent 3bfbfe0 commit b522584

File tree

6 files changed

+144
-87
lines changed

6 files changed

+144
-87
lines changed

‎.vscode/settings.json‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
<div class="Config">
1010
<ColorTool
1111
label="Primary Color:"
12-
onclick={(color) => useAutoCustomizeConfigStore.updateData({ primaryColor: color })}
13-
selectedColor={useAutoCustomizeConfigStore.data.primaryColor}
12+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ primary: color })}
13+
selectedColor={useAutoCustomizeConfigStore.data.colors?.primary}
1414
colors={[
1515
'violet',
1616
'red',
@@ -33,8 +33,8 @@
3333

3434
<ColorTool
3535
label="Secondary Color:"
36-
onclick={(color) => useAutoCustomizeConfigStore.updateData({ secondaryColor: color })}
37-
selectedColor={useAutoCustomizeConfigStore.data.secondaryColor}
36+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ secondary: color })}
37+
selectedColor={useAutoCustomizeConfigStore.data.colors?.secondary}
3838
colors={[
3939
'blue',
4040
'red',
@@ -57,38 +57,38 @@
5757

5858
<ColorTool
5959
label="Neutral Color:"
60-
onclick={(color) => useAutoCustomizeConfigStore.updateData({ neutralColor: color })}
61-
selectedColor={useAutoCustomizeConfigStore.data.neutralColor}
60+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ neutral: color })}
61+
selectedColor={useAutoCustomizeConfigStore.data.colors?.neutral}
6262
colors={['gray', 'slate', 'zinc', 'neutral', 'stone']}
6363
/>
6464

6565
<ColorTool
6666
label="Safe Color:"
67-
onclick={(color) => useAutoCustomizeConfigStore.updateData({ safeColor: color })}
68-
selectedColor={useAutoCustomizeConfigStore.data.safeColor}
67+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ safe: color })}
68+
selectedColor={useAutoCustomizeConfigStore.data.colors?.safe}
6969
colors={['emerald', 'lime', 'green', 'teal']}
7070
/>
7171

7272
<ColorTool
7373
label="Warning Color:"
74-
onclick={(color) => useAutoCustomizeConfigStore.updateData({ warningColor: color })}
75-
selectedColor={useAutoCustomizeConfigStore.data.warningColor}
74+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ warning: color })}
75+
selectedColor={useAutoCustomizeConfigStore.data.colors?.warning}
7676
colors={['amber', 'red', 'rose', 'orange', 'yellow']}
7777
/>
7878

7979
<ColorTool
8080
label="Danger Color:"
81-
onclick={(color) => useAutoCustomizeConfigStore.updateData({ dangerColor: color })}
82-
selectedColor={useAutoCustomizeConfigStore.data.dangerColor}
81+
onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ danger: color })}
82+
selectedColor={useAutoCustomizeConfigStore.data.colors?.danger}
8383
colors={['red', 'orange', 'amber', 'yellow', 'pink', 'rose']}
8484
/>
8585

8686
<ValueSilder
8787
label="Roundness:"
88-
value={useAutoCustomizeConfigStore.data.roundness || 0}
88+
value={useAutoCustomizeConfigStore.data.components?.roundness || 0}
8989
min={-4}
9090
max={7}
91-
oninput={(value) => useAutoCustomizeConfigStore.updateData({ roundness: value })}
91+
oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ roundness: value })}
9292
/>
9393

9494
<div class="Reset">

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

Lines changed: 79 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,93 +8,128 @@
88
import {
99
autoCustomizeConfigdefaultData,
1010
useAutoCustomizeConfigStore,
11-
type AutoCustomizeConfigData,
11+
type AutoCustomizeConfigDataColors,
1212
} from '../stores/config.svelte.js';
1313
1414
async function onclick() {
15-
let rawText = `
15+
try {
16+
let rawText = `/* dodo-ui-custom.css */
1617
:root {`;
1718
18-
for (let index = 0; index < colorPalette.length; index++) {
19-
const colorName = colorPalette[index];
19+
for (let index = 0; index < colorPalette.length; index++) {
20+
const colorName = colorPalette[index];
2021
21-
const fieldName = `${colorName}Color` as keyof AutoCustomizeConfigData;
22+
const fieldName = `${colorName}` as keyof AutoCustomizeConfigDataColors;
2223
23-
const dataPoint = useAutoCustomizeConfigStore.data[fieldName];
24+
const dataPoint =
25+
useAutoCustomizeConfigStore.data.colors &&
26+
useAutoCustomizeConfigStore.data.colors[fieldName]
27+
? useAutoCustomizeConfigStore.data.colors[fieldName]
28+
: undefined;
2429
25-
const defaultValue = autoCustomizeConfigdefaultData[fieldName];
30+
const defaultValue =
31+
autoCustomizeConfigdefaultData.colors && autoCustomizeConfigdefaultData.colors[fieldName]
32+
? autoCustomizeConfigdefaultData.colors[fieldName]
33+
: undefined;
2634
27-
const pass = dataPoint && dataPoint !== defaultValue ? true : false;
35+
const pass = dataPoint && dataPoint !== defaultValue ? true : false;
2836
29-
if (!pass) {
30-
continue;
31-
}
37+
if (!pass) {
38+
continue;
39+
}
3240
33-
rawText += `
41+
rawText += `
3442
/* ${colorName} color */`;
3543
36-
for (let index = 0; index < colorPaletteValues.length; index++) {
37-
const weight = colorPaletteValues[index];
44+
for (let index = 0; index < colorPaletteValues.length; index++) {
45+
const weight = colorPaletteValues[index];
3846
39-
rawText += `
47+
rawText += `
4048
--dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight});`;
49+
50+
if (colorPaletteValues[index] === colorPaletteValues[colorPaletteValues.length - 1]) {
51+
rawText += `
52+
`;
53+
}
54+
}
4155
}
42-
}
4356
44-
if (useAutoCustomizeConfigStore.data.roundness) {
45-
const roundness = useAutoCustomizeConfigStore.data.roundness / 8;
57+
if (useAutoCustomizeConfigStore.data.components?.roundness) {
58+
const roundness = useAutoCustomizeConfigStore.data.components?.roundness / 8;
59+
60+
rawText += `
4661
47-
rawText += `
4862
/* Roundness */
4963
--dodo-ui-element-roundness-1: ${0.4375 + roundness}em;
5064
--dodo-ui-element-roundness-2: ${0.8125 + roundness}em;
51-
--dodo-ui-element-roundness-3: ${1.9375 + roundness}em;`;
52-
}
65+
--dodo-ui-element-roundness-3: ${1.9375 + roundness}em;
66+
67+
`;
68+
}
5369
54-
// end
55-
rawText += `
70+
// end
71+
rawText += `
5672
}`;
5773
58-
rawText += `
74+
rawText += `
5975
6076
.dodo-theme--dark {`;
6177
62-
for (let index = 0; index < colorPalette.length; index++) {
63-
const colorName = colorPalette[index];
78+
for (let index = 0; index < colorPalette.length; index++) {
79+
const colorName = colorPalette[index];
6480
65-
const fieldName = `${colorName}Color` as keyof AutoCustomizeConfigData;
81+
const fieldName = `${colorName}` as keyof AutoCustomizeConfigDataColors;
6682
67-
const dataPoint = useAutoCustomizeConfigStore.data[fieldName];
83+
const dataPoint =
84+
useAutoCustomizeConfigStore.data.colors &&
85+
useAutoCustomizeConfigStore.data.colors[fieldName]
86+
? useAutoCustomizeConfigStore.data.colors[fieldName]
87+
: undefined;
6888
69-
const defaultValue = autoCustomizeConfigdefaultData[fieldName];
89+
const defaultValue =
90+
autoCustomizeConfigdefaultData.colors && autoCustomizeConfigdefaultData.colors[fieldName]
91+
? autoCustomizeConfigdefaultData.colors[fieldName]
92+
: undefined;
7093
71-
const pass = dataPoint && dataPoint !== defaultValue ? true : false;
94+
const pass = dataPoint && dataPoint !== defaultValue ? true : false;
7295
73-
if (!pass) {
74-
continue;
75-
}
96+
if (!pass) {
97+
continue;
98+
}
99+
100+
rawText += `
76101
77-
rawText += `
78102
/* Dark: ${colorName} color */`;
79103
80-
const colorPaletteValuesReversed = [...colorPaletteValues].reverse();
104+
const colorPaletteValuesReversed = [...colorPaletteValues].reverse();
81105
82-
for (let index = 0; index < colorPaletteValues.length; index++) {
83-
const weight = colorPaletteValues[index];
84-
const weightReversed = colorPaletteValuesReversed[index];
106+
for (let index = 0; index < colorPaletteValues.length; index++) {
107+
const weight = colorPaletteValues[index];
108+
const weightReversed = colorPaletteValuesReversed[index];
85109
86-
rawText += `
110+
rawText += `
87111
--dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weightReversed});`;
112+
}
113+
114+
if (
115+
colorPaletteValuesReversed[index] ===
116+
colorPaletteValuesReversed[colorPaletteValuesReversed.length - 1]
117+
) {
118+
rawText += `
119+
`;
120+
}
88121
}
89-
}
90122
91-
// end
92-
rawText += `
123+
// end
124+
rawText += `
93125
}`;
94126
95-
const data = new Blob([rawText], { type: 'text/plain' });
127+
const data = new Blob([rawText], { type: 'text/plain' });
96128
97-
await downloadFile(`dodo-ui-custom.css`, data);
129+
await downloadFile(`dodo-ui-custom.css`, data);
130+
} catch (e) {
131+
console.error(e);
132+
}
98133
}
99134
</script>
100135

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script lang="ts">
22
import FormControl from '$lib/stories/components/Form/FormControl/FormControl.svelte';
33
import RangeSlider from '$lib/stories/components/Form/RangeSlider/RangeSlider.svelte';
4-
import type { FormEventHandler } from 'svelte/elements';
54
65
interface ValueSilderProps {
76
label?: string;

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
} from '$lib/stories/developer tools/philosophy/Colors/utils/color.js';
99
import {
1010
useAutoCustomizeConfigStore,
11-
type AutoCustomizeConfigData,
11+
type AutoCustomizeConfigDataColors,
1212
} from '../stores/config.svelte.js';
1313
1414
let cssVariables = $state<string[]>([]);
@@ -18,9 +18,13 @@
1818
1919
for (let index = 0; index < colorPalette.length; index++) {
2020
const colorName = colorPalette[index];
21-
const fieldName = `${colorName}Color` as keyof AutoCustomizeConfigData;
21+
const fieldName = `${colorName}` as keyof AutoCustomizeConfigDataColors;
2222
23-
const dataPoint = useAutoCustomizeConfigStore.data[fieldName];
23+
const dataPoint =
24+
useAutoCustomizeConfigStore.data.colors &&
25+
useAutoCustomizeConfigStore.data.colors[fieldName]
26+
? useAutoCustomizeConfigStore.data.colors[fieldName]
27+
: undefined;
2428
2529
if (dataPoint) {
2630
for (let index = 0; index < colorPaletteValues.length; index++) {
@@ -49,8 +53,8 @@
4953
}
5054
}
5155
52-
if (useAutoCustomizeConfigStore.data.roundness) {
53-
const roundness = useAutoCustomizeConfigStore.data.roundness / 8;
56+
if (useAutoCustomizeConfigStore.data.components?.roundness) {
57+
const roundness = useAutoCustomizeConfigStore.data.components.roundness / 8;
5458
5559
newCssvariables.push(`--dodo-ui-element-roundness-1: ${0.4375 + roundness}em`);
5660
newCssvariables.push(`--dodo-ui-element-roundness-2: ${0.8125 + roundness}em`);

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

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,36 @@ import { browser } from '$app/environment';
22

33
const AUTO_CUSTOMIZE_TOOL_CONFIG = 'AUTO_CUSTOMIZE_TOOL_CONFIG';
44

5-
export type AutoCustomizeConfigData = {
6-
primaryColor?: string;
7-
secondaryColor?: string;
8-
neutralColor?: string;
9-
safeColor?: string;
10-
warningColor?: string;
11-
dangerColor?: string;
5+
export type AutoCustomizeConfigDataColors = {
6+
primary?: string;
7+
secondary?: string;
8+
neutral?: string;
9+
safe?: string;
10+
warning?: string;
11+
danger?: string;
12+
};
13+
14+
export type AutoCustomizeConfigDataComponents = {
1215
roundness?: number;
1316
};
1417

18+
export type AutoCustomizeConfigData = {
19+
colors?: AutoCustomizeConfigDataColors;
20+
components?: AutoCustomizeConfigDataComponents;
21+
};
22+
1523
export const autoCustomizeConfigdefaultData: AutoCustomizeConfigData = {
16-
primaryColor: 'violet',
17-
secondaryColor: 'blue',
18-
neutralColor: 'gray',
19-
safeColor: 'emerald',
20-
warningColor: 'amber',
21-
dangerColor: 'red',
22-
roundness: 0,
24+
colors: {
25+
primary: 'violet',
26+
secondary: 'blue',
27+
neutral: 'gray',
28+
safe: 'emerald',
29+
warning: 'amber',
30+
danger: 'red',
31+
},
32+
components: {
33+
roundness: 0,
34+
},
2335
};
2436

2537
function getDefaultData() {
@@ -56,6 +68,22 @@ function createAutoCustomizeConfigStore() {
5668
localStorage.setItem(AUTO_CUSTOMIZE_TOOL_CONFIG, JSON.stringify(newData));
5769
}
5870
},
71+
updateDataColor(newData: Partial<AutoCustomizeConfigDataColors>) {
72+
const colors = {
73+
...data.colors,
74+
...newData,
75+
};
76+
77+
this.updateData({ colors });
78+
},
79+
updateDataComponents(newData: Partial<AutoCustomizeConfigDataComponents>) {
80+
const components = {
81+
...data.components,
82+
...newData,
83+
};
84+
85+
this.updateData({ components });
86+
},
5987
reset() {
6088
data = autoCustomizeConfigdefaultData;
6189
updatedAt = Date.now();

0 commit comments

Comments
 (0)