Skip to content

Commit 03ec2b3

Browse files
psd-coderpsd-coder
committed
[WIP] Rename dark & light fields in the config to left & right
1 parent 42778a6 commit 03ec2b3

6 files changed

Lines changed: 70 additions & 43 deletions

File tree

‎packages/core/src/defaultConfig.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ export const defaultConfig = {
2323
directionMode: "fgToBg",
2424
chromaMode: "even",
2525
colorSpace: "p3",
26-
bgColorLight: "#fff",
27-
bgColorDark: "#000",
28-
bgLightStart: 5,
26+
bgColorLeft: "#000",
27+
bgColorRight: "#fff",
28+
bgRightStart: 5,
2929
},
3030
} as const;
3131

‎packages/core/src/schemas/exportConfig.ts‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as v from "valibot";
22

33
import { formatValidationError, safeParse } from "@core/schemas";
4+
import { ensureNonNullable } from "@core/utils/assertions/ensureNonNullable";
45
import { ValidationError } from "@core/utils/errors/ValidationError";
56

67
import {
@@ -26,15 +27,41 @@ export const exportConfigSchema = v.pipe(
2627
v.object({ name: levelNameSchema, contrast: baseContrastSchema, chroma: levelChromaSchema }),
2728
),
2829
hues: v.array(v.object({ name: hueNameSchema, angle: hueAngleSchema })),
29-
settings: v.object({
30-
contrastModel: contrastModelSchema,
31-
directionMode: directionModeSchema,
32-
chromaMode: chromaModeSchema,
33-
bgLightStart: bgRightStartSchema,
34-
bgColorLight: colorStringSchema,
35-
bgColorDark: colorStringSchema,
36-
colorSpace: colorSpaceSchema,
37-
}),
30+
settings: v.pipe(
31+
v.object({
32+
contrastModel: contrastModelSchema,
33+
directionMode: directionModeSchema,
34+
chromaMode: chromaModeSchema,
35+
bgRightStart: v.optional(bgRightStartSchema),
36+
bgColorRight: v.optional(colorStringSchema),
37+
bgColorLeft: v.optional(colorStringSchema),
38+
colorSpace: colorSpaceSchema,
39+
// Migration for old properties
40+
bgLightStart: v.optional(bgRightStartSchema),
41+
bgColorDark: v.optional(colorStringSchema),
42+
bgColorLight: v.optional(colorStringSchema),
43+
}),
44+
v.transform((parsed) => {
45+
return {
46+
contrastModel: parsed.contrastModel,
47+
directionMode: parsed.directionMode,
48+
chromaMode: parsed.chromaMode,
49+
bgRightStart: ensureNonNullable(
50+
parsed.bgRightStart ?? parsed.bgLightStart,
51+
"At least one of properties must present in the config: 'bgRightStart' or 'bgLightStart'",
52+
),
53+
bgColorRight: ensureNonNullable(
54+
parsed.bgColorRight ?? parsed.bgColorLight,
55+
"At least one of properties must present in the config: 'bgColorRight' or 'bgColorLight'",
56+
),
57+
bgColorLeft: ensureNonNullable(
58+
parsed.bgColorLeft ?? parsed.bgColorDark,
59+
"At least one of properties must present in the config: 'bgColorLeft' or 'bgColorDark'",
60+
),
61+
colorSpace: parsed.colorSpace,
62+
};
63+
}),
64+
),
3865
}),
3966
v.check(({ levels, settings }) => {
4067
return levels.every(
@@ -100,9 +127,9 @@ export function toCompactExportConfig(config: ExportConfig): CompactExportConfig
100127
config.settings.contrastModel,
101128
config.settings.directionMode,
102129
config.settings.chromaMode,
103-
config.settings.bgColorLight,
104-
config.settings.bgColorDark,
105-
config.settings.bgLightStart,
130+
config.settings.bgColorRight,
131+
config.settings.bgColorLeft,
132+
config.settings.bgRightStart,
106133
config.settings.colorSpace,
107134
],
108135
];
@@ -135,9 +162,9 @@ export function toExportConfig(compactConfig: CompactExportConfig): ExportConfig
135162
contrastModel,
136163
directionMode: compactConfig[2][1],
137164
chromaMode: compactConfig[2][2],
138-
bgColorLight: compactConfig[2][3],
139-
bgColorDark: compactConfig[2][4],
140-
bgLightStart: compactConfig[2][5],
165+
bgColorRight: compactConfig[2][3],
166+
bgColorLeft: compactConfig[2][4],
167+
bgRightStart: compactConfig[2][5],
141168
colorSpace: compactConfig[2][6],
142169
},
143170
};

‎packages/core/src/stores/config.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@ export const $exportConfig = signal<ExportConfig>((get) => {
6060
contrastModel: get(contrastModelStore.$lastValidValue),
6161
directionMode: get(directionModeStore.$lastValidValue),
6262
chromaMode: get(chromaModeStore.$lastValidValue),
63-
bgColorLight: get(bgColorRightStore.$lastValidValue),
64-
bgColorDark: get(bgColorLeftStore.$lastValidValue),
65-
bgLightStart: get($bgRightStart),
63+
bgColorRight: get(bgColorRightStore.$lastValidValue),
64+
bgColorLeft: get(bgColorLeftStore.$lastValidValue),
65+
bgRightStart: get($bgRightStart),
6666
colorSpace: get(colorSpaceStore.$lastValidValue),
6767
},
6868
};
@@ -134,9 +134,9 @@ export function updateConfig(config: ExportConfig) {
134134
contrastModelStore.$raw.set(config.settings.contrastModel);
135135
directionModeStore.$raw.set(config.settings.directionMode);
136136
chromaModeStore.$raw.set(config.settings.chromaMode);
137-
bgColorRightStore.$raw.set(config.settings.bgColorLight);
138-
bgColorLeftStore.$raw.set(config.settings.bgColorDark);
139-
$bgRightStart.set(config.settings.bgLightStart);
137+
bgColorRightStore.$raw.set(config.settings.bgColorRight);
138+
bgColorLeftStore.$raw.set(config.settings.bgColorLeft);
139+
$bgRightStart.set(config.settings.bgRightStart);
140140
if (!isDifferentFromLockedColorSpace) {
141141
colorSpaceStore.$raw.set(config.settings.colorSpace);
142142
}

‎packages/core/src/stores/settings.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,15 @@ export const colorSpaceStore = validationStore(
5151
export const $isColorSpaceLocked = signal<boolean>(false);
5252

5353
export const bgColorLeftStore = validationStore(
54-
ColorString(defaultConfig.settings.bgColorDark),
54+
ColorString(defaultConfig.settings.bgColorLeft),
5555
colorStringSchema,
5656
);
5757
export const bgColorRightStore = validationStore(
58-
ColorString(defaultConfig.settings.bgColorLight),
58+
ColorString(defaultConfig.settings.bgColorRight),
5959
colorStringSchema,
6060
);
6161

62-
export const $bgRightStart = signal(BgRightStart(defaultConfig.settings.bgLightStart));
62+
export const $bgRightStart = signal(BgRightStart(defaultConfig.settings.bgRightStart));
6363
export const $isSingleBgLeft = signal((get) =>
6464
isSingleBgLeft(get($bgRightStart), get($levelsCount)),
6565
);

‎packages/figma-plugin/src/plugin/utils/palette.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ function createColorCell(
132132
paint: SolidPaint,
133133
) {
134134
const node = figma.createRectangle();
135-
const isBgLeft = levelIndex < config.settings.bgLightStart;
135+
const isBgLeft = levelIndex < config.settings.bgRightStart;
136136
const levelName = config.levels[levelIndex]?.name;
137137
const hueName = config.hues[hueIndex]?.name;
138138

@@ -149,17 +149,17 @@ function createColorCell(
149149

150150
function getBgColorLeft(config: ExportConfigWithColors) {
151151
return getBgValueLeft(
152-
isSingleBgRight(config.settings.bgLightStart),
153-
config.settings.bgColorDark,
154-
config.settings.bgColorLight,
152+
isSingleBgRight(config.settings.bgRightStart),
153+
config.settings.bgColorLeft,
154+
config.settings.bgColorRight,
155155
);
156156
}
157157

158158
function getBgColorRight(config: ExportConfigWithColors) {
159159
return getBgValueRight(
160-
isSingleBgLeft(config.settings.bgLightStart, config.levels.length),
161-
config.settings.bgColorDark,
162-
config.settings.bgColorLight,
160+
isSingleBgLeft(config.settings.bgRightStart, config.levels.length),
161+
config.settings.bgColorLeft,
162+
config.settings.bgColorRight,
163163
);
164164
}
165165

@@ -176,7 +176,7 @@ export async function drawPalette(
176176

177177
// Color samples
178178
const BgWidthLeft =
179-
PALETTE.PADDING + PALETTE.HUE_HEADER_WIDTH + PALETTE.CELL_WIDTH * config.settings.bgLightStart;
179+
PALETTE.PADDING + PALETTE.HUE_HEADER_WIDTH + PALETTE.CELL_WIDTH * config.settings.bgRightStart;
180180
const BgWidthRight = frame.width - BgWidthLeft;
181181
const bgLeft = figma.createRectangle();
182182
bgLeft.resize(BgWidthLeft, frame.height);

‎packages/figma-plugin/src/plugin/utils/variables.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -84,34 +84,34 @@ export async function upsertPaletteVariablesCollection(
8484

8585
// upsertPaletteVariablesCollection({ config: ExportConfigWithColors }) {
8686
// if (canCreateVariableModes()) {
87-
// const darkModeId = getDarkModeId(collection);
88-
// const lightModeId = getLightModeId(collection);
87+
// const leftModeId = getDarkModeId(collection);
88+
// const rightModeId = getLightModeId(collection);
8989
// variables[LABELS.BACKGROUND] = updateVariable(
9090
// collection,
9191
// variables,
92-
// darkModeId,
92+
// leftModeId,
9393
// LABELS.BACKGROUND,
94-
// config.settings.bgColorDark,
94+
// config.settings.bgColorLeft,
9595
// );
9696
// variables[LABELS.BACKGROUND] = updateVariable(
9797
// collection,
9898
// variables,
99-
// lightModeId,
99+
// rightModeId,
100100
// LABELS.BACKGROUND,
101-
// config.settings.bgColorLight,
101+
// config.settings.bgColorRight,
102102
// );
103103

104104
// for (const [hueKey, hue] of config.hues.entries()) {
105105
// for (const [levelKey, level] of config.levels.entries()) {
106-
// const isDark = levelKey < config.settings.bgLightStart;
106+
// const isDark = levelKey < config.settings.bgRightStart;
107107
// const variableName = getVariableColorName(level.name, hue.name);
108108
// const color = config.colors[`${LevelIndex(levelKey)}-${HueIndex(hueKey)}`];
109109

110110
// invariant(color, `Color not found for level ${levelKey} and hue ${hueKey}`);
111111
// variables[variableName] = updateVariable(
112112
// collection,
113113
// variables,
114-
// isDark ? darkModeId : lightModeId,
114+
// isDark ? leftModeId : rightModeId,
115115
// variableName,
116116
// color,
117117
// );

0 commit comments

Comments
 (0)