Skip to content

Commit a4f5c5f

Browse files
NatejSweetNatejSweet
authored
Chore/setings colors interface (#3561)
1 parent c618a1d commit a4f5c5f

File tree

8 files changed

+221
-28
lines changed

8 files changed

+221
-28
lines changed

‎sites/themes.skeleton.dev/src/lib/components/generator/Controls/ControlsColors.svelte

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
// State
55
import { globals, settingsColors } from '$lib/state/generator.svelte';
66
// Utils
7-
import { genColorRamp, seedColor, genRandomSeed } from '$lib/utils/generator/colors';
7+
import { genColorRamp, seedColor, genRandomSeed, getColorKey } from '$lib/utils/generator/colors';
88
// Components (Skeleton)
99
import { Switch, Tabs } from '@skeletonlabs/skeleton-svelte';
1010
// Icons
@@ -127,7 +127,7 @@
127127
<input
128128
type="text"
129129
class="input"
130-
bind:value={settingsColors[`--color-${color.value}-${shade}`]}
130+
bind:value={settingsColors[getColorKey(color.value, shade)]}
131131
onblur={() => genColorRamp(showAllShades, color.value)}
132132
/>
133133
</td>
@@ -137,7 +137,7 @@
137137
<input
138138
class="input"
139139
type="color"
140-
bind:value={settingsColors[`--color-${color.value}-${shade}`]}
140+
bind:value={settingsColors[getColorKey(color.value, shade)]}
141141
oninput={() => genColorRamp(showAllShades, color.value)}
142142
/>
143143
</td>
@@ -153,12 +153,12 @@
153153
<span class="label-text">Light Contrast</span>
154154
<div
155155
class="w-full h-4 border border-surface-200-800 rounded-base"
156-
style:background={`${settingsColors[`--color-${color.value}-contrast-light`]}`}
156+
style:background={`${settingsColors[getColorKey(color.value, 'contrast-light')]}`}
157157
></div>
158158
<select
159159
class="select"
160160
name={`--color-${color.value}-contrast-light`}
161-
bind:value={settingsColors[`--color-${color.value}-contrast-light`]}
161+
bind:value={settingsColors[getColorKey(color.value, 'contrast-light')]}
162162
>
163163
<option value="oklch(1 0 0 / 1)">White</option>
164164
{#each constants.colorNames as colorName}
@@ -175,12 +175,12 @@
175175
<span class="label-text">Dark Contrast</span>
176176
<div
177177
class="w-full h-4 border border-surface-200-800 rounded-base"
178-
style:background={`${settingsColors[`--color-${color.value}-contrast-dark`]}`}
178+
style:background={`${settingsColors[getColorKey(color.value, 'contrast-dark')]}`}
179179
></div>
180180
<select
181181
class="select"
182182
name={`--color-${color.value}-contrast-dark`}
183-
bind:value={settingsColors[`--color-${color.value}-contrast-dark`]}
183+
bind:value={settingsColors[getColorKey(color.value, 'contrast-dark')]}
184184
>
185185
<option value="oklch(0 0 0 / 1)">Black</option>
186186
{#each constants.colorNames as colorName}

‎sites/themes.skeleton.dev/src/lib/state/generator.svelte.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import * as constants from '$lib/constants/generator';
2-
import type { Globals, SettingsCore, SettingsBackgrounds, SettingsTypography, SettingsSpacing, SettingsEdges } from './types';
2+
import type {
3+
Globals,
4+
SettingsCore,
5+
SettingsColors,
6+
SettingsBackgrounds,
7+
SettingsTypography,
8+
SettingsSpacing,
9+
SettingsEdges
10+
} from './types';
311

412
// Globals
513

@@ -15,7 +23,7 @@ export const settingsCore: SettingsCore = $state({
1523
name: ''
1624
});
1725

18-
export const settingsColors: Record<string, string> = $state({
26+
export const settingsColors: SettingsColors = $state({
1927
// primary
2028
'--color-primary-50': '#d3e5ff',
2129
'--color-primary-100': '#a9cefd',

‎sites/themes.skeleton.dev/src/lib/state/types.ts

Lines changed: 170 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,176 @@ export interface SettingsCore {
1313
name: string;
1414
}
1515

16-
// NOTE: SettingsColors handled as `Record<string, string>`
17-
// export interface SettingsColors {}
16+
export interface SettingsColors {
17+
'--color-primary-50': string;
18+
'--color-primary-100': string;
19+
'--color-primary-200': string;
20+
'--color-primary-300': string;
21+
'--color-primary-400': string;
22+
'--color-primary-500': string;
23+
'--color-primary-600': string;
24+
'--color-primary-700': string;
25+
'--color-primary-800': string;
26+
'--color-primary-900': string;
27+
'--color-primary-950': string;
28+
'--color-primary-contrast-dark': string;
29+
'--color-primary-contrast-light': string;
30+
'--color-primary-contrast-50': string;
31+
'--color-primary-contrast-100': string;
32+
'--color-primary-contrast-200': string;
33+
'--color-primary-contrast-300': string;
34+
'--color-primary-contrast-400': string;
35+
'--color-primary-contrast-500': string;
36+
'--color-primary-contrast-600': string;
37+
'--color-primary-contrast-700': string;
38+
'--color-primary-contrast-800': string;
39+
'--color-primary-contrast-900': string;
40+
'--color-primary-contrast-950': string;
41+
'--color-secondary-50': string;
42+
'--color-secondary-100': string;
43+
'--color-secondary-200': string;
44+
'--color-secondary-300': string;
45+
'--color-secondary-400': string;
46+
'--color-secondary-500': string;
47+
'--color-secondary-600': string;
48+
'--color-secondary-700': string;
49+
'--color-secondary-800': string;
50+
'--color-secondary-900': string;
51+
'--color-secondary-950': string;
52+
'--color-secondary-contrast-dark': string;
53+
'--color-secondary-contrast-light': string;
54+
'--color-secondary-contrast-50': string;
55+
'--color-secondary-contrast-100': string;
56+
'--color-secondary-contrast-200': string;
57+
'--color-secondary-contrast-300': string;
58+
'--color-secondary-contrast-400': string;
59+
'--color-secondary-contrast-500': string;
60+
'--color-secondary-contrast-600': string;
61+
'--color-secondary-contrast-700': string;
62+
'--color-secondary-contrast-800': string;
63+
'--color-secondary-contrast-900': string;
64+
'--color-secondary-contrast-950': string;
65+
'--color-tertiary-50': string;
66+
'--color-tertiary-100': string;
67+
'--color-tertiary-200': string;
68+
'--color-tertiary-300': string;
69+
'--color-tertiary-400': string;
70+
'--color-tertiary-500': string;
71+
'--color-tertiary-600': string;
72+
'--color-tertiary-700': string;
73+
'--color-tertiary-800': string;
74+
'--color-tertiary-900': string;
75+
'--color-tertiary-950': string;
76+
'--color-tertiary-contrast-dark': string;
77+
'--color-tertiary-contrast-light': string;
78+
'--color-tertiary-contrast-50': string;
79+
'--color-tertiary-contrast-100': string;
80+
'--color-tertiary-contrast-200': string;
81+
'--color-tertiary-contrast-300': string;
82+
'--color-tertiary-contrast-400': string;
83+
'--color-tertiary-contrast-500': string;
84+
'--color-tertiary-contrast-600': string;
85+
'--color-tertiary-contrast-700': string;
86+
'--color-tertiary-contrast-800': string;
87+
'--color-tertiary-contrast-900': string;
88+
'--color-tertiary-contrast-950': string;
89+
'--color-success-50': string;
90+
'--color-success-100': string;
91+
'--color-success-200': string;
92+
'--color-success-300': string;
93+
'--color-success-400': string;
94+
'--color-success-500': string;
95+
'--color-success-600': string;
96+
'--color-success-700': string;
97+
'--color-success-800': string;
98+
'--color-success-900': string;
99+
'--color-success-950': string;
100+
'--color-success-contrast-dark': string;
101+
'--color-success-contrast-light': string;
102+
'--color-success-contrast-50': string;
103+
'--color-success-contrast-100': string;
104+
'--color-success-contrast-200': string;
105+
'--color-success-contrast-300': string;
106+
'--color-success-contrast-400': string;
107+
'--color-success-contrast-500': string;
108+
'--color-success-contrast-600': string;
109+
'--color-success-contrast-700': string;
110+
'--color-success-contrast-800': string;
111+
'--color-success-contrast-900': string;
112+
'--color-success-contrast-950': string;
113+
'--color-warning-50': string;
114+
'--color-warning-100': string;
115+
'--color-warning-200': string;
116+
'--color-warning-300': string;
117+
'--color-warning-400': string;
118+
'--color-warning-500': string;
119+
'--color-warning-600': string;
120+
'--color-warning-700': string;
121+
'--color-warning-800': string;
122+
'--color-warning-900': string;
123+
'--color-warning-950': string;
124+
'--color-warning-contrast-dark': string;
125+
'--color-warning-contrast-light': string;
126+
'--color-warning-contrast-50': string;
127+
'--color-warning-contrast-100': string;
128+
'--color-warning-contrast-200': string;
129+
'--color-warning-contrast-300': string;
130+
'--color-warning-contrast-400': string;
131+
'--color-warning-contrast-500': string;
132+
'--color-warning-contrast-600': string;
133+
'--color-warning-contrast-700': string;
134+
'--color-warning-contrast-800': string;
135+
'--color-warning-contrast-900': string;
136+
'--color-warning-contrast-950': string;
137+
'--color-error-50': string;
138+
'--color-error-100': string;
139+
'--color-error-200': string;
140+
'--color-error-300': string;
141+
'--color-error-400': string;
142+
'--color-error-500': string;
143+
'--color-error-600': string;
144+
'--color-error-700': string;
145+
'--color-error-800': string;
146+
'--color-error-900': string;
147+
'--color-error-950': string;
148+
'--color-error-contrast-dark': string;
149+
'--color-error-contrast-light': string;
150+
'--color-error-contrast-50': string;
151+
'--color-error-contrast-100': string;
152+
'--color-error-contrast-200': string;
153+
'--color-error-contrast-300': string;
154+
'--color-error-contrast-400': string;
155+
'--color-error-contrast-500': string;
156+
'--color-error-contrast-600': string;
157+
'--color-error-contrast-700': string;
158+
'--color-error-contrast-800': string;
159+
'--color-error-contrast-900': string;
160+
'--color-error-contrast-950': string;
161+
'--color-surface-50': string;
162+
'--color-surface-100': string;
163+
'--color-surface-200': string;
164+
'--color-surface-300': string;
165+
'--color-surface-400': string;
166+
'--color-surface-500': string;
167+
'--color-surface-600': string;
168+
'--color-surface-700': string;
169+
'--color-surface-800': string;
170+
'--color-surface-900': string;
171+
'--color-surface-950': string;
172+
'--color-surface-contrast-dark': string;
173+
'--color-surface-contrast-light': string;
174+
'--color-surface-contrast-50': string;
175+
'--color-surface-contrast-100': string;
176+
'--color-surface-contrast-200': string;
177+
'--color-surface-contrast-300': string;
178+
'--color-surface-contrast-400': string;
179+
'--color-surface-contrast-500': string;
180+
'--color-surface-contrast-600': string;
181+
'--color-surface-contrast-700': string;
182+
'--color-surface-contrast-800': string;
183+
'--color-surface-contrast-900': string;
184+
'--color-surface-contrast-950': string;
185+
}
18186

19187
export interface SettingsBackgrounds {
20188
'--body-background-color': string;

‎sites/themes.skeleton.dev/src/lib/utils/generator/colors.ts

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { settingsColors } from '$lib/state/generator.svelte';
66

77
// Common ---
88

9-
/* Takes color shade 50/500/960 and generates a color scale */
9+
/* Takes color shade 50/500/950 and generates a color scale */
1010
function genColorScale(colorHigh: string, colorMed: string, colorLow: string) {
1111
return chroma
1212
.scale([
@@ -17,37 +17,45 @@ function genColorScale(colorHigh: string, colorMed: string, colorLow: string) {
1717
.colors(11);
1818
}
1919

20+
export function getColorKey(var1: string, var2: string): keyof typeof settingsColors {
21+
return `--color-${var1}-${var2}` as keyof typeof settingsColors;
22+
}
23+
2024
export function genColorContrast(colorName: string, shade: string, targetShade: string) {
21-
const paletteShade = settingsColors[targetShade];
22-
let contrastLight = settingsColors[`--color-${colorName}-contrast-light`];
23-
let contrastDark = settingsColors[`--color-${colorName}-contrast-dark`];
25+
const paletteShade = settingsColors[targetShade as keyof typeof settingsColors];
26+
let contrastLight = settingsColors[getColorKey(colorName, 'contrast-light')];
27+
let contrastDark = settingsColors[getColorKey(colorName, 'contrast-dark')];
28+
2429
// Strip wrapping `var()`
2530
if (contrastLight.includes('var')) contrastLight = contrastLight.replace('var(', '').replace(')', '');
2631
if (contrastDark.includes('var')) contrastDark = contrastDark.replace('var(', '').replace(')', '');
32+
2733
// Get Raw Hex
2834
if (!contrastLight.includes('inherit')) {
2935
// If CSS Custom Property
3036
if (contrastLight.includes('255 255 255')) contrastLight = '#FFFFFF';
3137
if (contrastDark.includes('0 0 0')) contrastDark = '#000000';
3238
// If White or Black
33-
if (contrastLight.includes('--')) contrastLight = settingsColors[contrastLight];
34-
if (contrastDark.includes('--')) contrastDark = settingsColors[contrastDark];
39+
if (contrastLight.includes('--')) contrastLight = settingsColors[contrastLight as keyof typeof settingsColors];
40+
if (contrastDark.includes('--')) contrastDark = settingsColors[contrastDark as keyof typeof settingsColors];
3541
}
42+
3643
// Compare
3744
const contrastRatioLight = chroma.contrast(chroma(paletteShade), contrastLight);
3845
const contrastRatioDark = chroma.contrast(chroma(paletteShade), contrastDark);
46+
3947
// Set State
4048
if (contrastRatioLight > contrastRatioDark) {
41-
settingsColors[`--color-${colorName}-contrast-${shade}`] = `var(--color-${colorName}-contrast-light)`;
49+
settingsColors[getColorKey(colorName, `contrast-${shade}`)] = `var(--color-${colorName}-contrast-light)`;
4250
} else {
43-
settingsColors[`--color-${colorName}-contrast-${shade}`] = `var(--color-${colorName}-contrast-dark)`;
51+
settingsColors[getColorKey(colorName, `contrast-${shade}`)] = `var(--color-${colorName}-contrast-dark)`;
4452
}
4553
}
4654

4755
/* Applies the color scale to the color state */
4856
function applyColorState(colorName: string, colorScale: string[]) {
49-
constants.colorShades.forEach((shade, i) => {
50-
const targetShade = `--color-${colorName}-${shade}`;
57+
constants.colorShades.forEach((shade: number, i: number) => {
58+
const targetShade = getColorKey(colorName, shade.toString());
5159
// Set state
5260
settingsColors[targetShade] = colorScale[i];
5361
// Generate Color Contrast
@@ -60,9 +68,9 @@ function applyColorState(colorName: string, colorScale: string[]) {
6068
/* Blend between 50/500/950 colors automatically */
6169
export function genColorRamp(disabled: boolean, colorName: string) {
6270
if (disabled) return;
63-
const shade50 = settingsColors[`--color-${colorName}-50`];
64-
const shade500 = settingsColors[`--color-${colorName}-500`];
65-
const shade950 = settingsColors[`--color-${colorName}-950`];
71+
const shade50 = settingsColors[getColorKey(colorName, '50')];
72+
const shade500 = settingsColors[getColorKey(colorName, '500')];
73+
const shade950 = settingsColors[getColorKey(colorName, '950')];
6674
// Generate Color Scale
6775
const colorScale = genColorScale(shade50, shade500, shade950);
6876
// Update Color State

‎sites/themes.skeleton.dev/src/lib/utils/generator/format-output.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@
22
// Deep clones each state object and formats as needed.
33

44
import chroma from 'chroma-js';
5-
import type { SettingsCore, SettingsBackgrounds, SettingsTypography, SettingsSpacing, SettingsEdges } from '$lib/state/types';
5+
import type {
6+
SettingsCore,
7+
SettingsColors,
8+
SettingsBackgrounds,
9+
SettingsTypography,
10+
SettingsSpacing,
11+
SettingsEdges
12+
} from '$lib/state/types';
613

714
/** UTIL: Format from JS Object to CSS properties format. */
815
function objectToCssProperties(obj: Record<string, unknown>) {
@@ -42,7 +49,7 @@ export function formatBackgrounds(backgrounds: SettingsBackgrounds) {
4249
return objectToCssProperties(_backgrounds);
4350
}
4451

45-
export function formatColors(colors: Record<string, string>) {
52+
export function formatColors(colors: SettingsColors) {
4653
const _colors = JSON.parse(JSON.stringify(colors));
4754
Object.keys(_colors).forEach((key) => {
4855
if (_colors[key].includes('#')) _colors[key] = chroma(_colors[key]).css('oklch');

‎sites/themes.skeleton.dev/src/lib/utils/importer/import-theme-v2.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@ export async function importThemeV2(fileText: string, fileName: string) {
6060
// Set Generator State
6161
if (fileName) settingsCore.name = fileName.split('.')[0]; // before .js|.ts
6262
// Colors
63-
for (const key in properties) {
63+
for (const key of Object.keys(properties) as Array<keyof typeof settingsColors>) {
6464
if (key in settingsColors) {
65-
settingsColors[key] = properties[key];
65+
settingsColors[key] = properties[key]!;
6666
}
6767
}
6868

‎sites/themes.skeleton.dev/src/lib/utils/importer/import-theme-v3-rc1.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export async function importThemeV3Rc1(fileText: string, fileName: string) {
8787
// Theme Properties
8888
for (const key in properties) {
8989
if (key in settingsColors) {
90+
// @ts-expect-error type not satisfied
9091
settingsColors[key] = properties[key];
9192
} else if (key in settingsBackgrounds) {
9293
// @ts-expect-error type not satisfied

‎sites/themes.skeleton.dev/src/lib/utils/importer/import-theme-v3.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export async function importThemeV3(fileText: string, fileName: string) {
5151
// Theme Properties
5252
for (const key in properties) {
5353
if (key in settingsColors) {
54+
// @ts-expect-error type not satisfied
5455
settingsColors[key] = properties[key];
5556
} else if (key in settingsBackgrounds) {
5657
// @ts-expect-error type not satisfied

0 commit comments

Comments
 (0)