Skip to content

Commit 6df534e

Browse files
eunjin11claude
eunjin11
and
claude
authored
rename seed tokens (#15)
* refactor: CSS 변수 prefix를 seed에서 lynx-console로 변경하고 미사용 토큰 제거 - --seed-* CSS 변수를 --lynx-console-*로 rename - 실제 사용 중인 토큰만 남기고 나머지 제거 (455개 → ~40개) - 테마 클래스명 data-seed-color-mode → data-lynx-console-color-mode - example에서 테마 클래스 제거 (패키지 내부에서 처리) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: theme을 light로 복원 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: add changeset Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 701ad51 commit 6df534e

8 files changed

Lines changed: 109 additions & 766 deletions

File tree

‎.changeset/rename-seed-to-lynx-console.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"lynx-console": patch
3+
---
4+
5+
CSS 변수 prefix를 seed에서 lynx-console로 변경하고 미사용 토큰 제거

‎example/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ initPerformanceMonitor();
1616

1717
function AppWrapper() {
1818
return (
19-
<page className="data-seed-color-mode__light-only">
19+
<page>
2020
<App />
2121
</page>
2222
);

‎package/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
8383
setShouldClose(false);
8484
};
8585

86-
const themeClass = `data-seed-color-mode__${theme}-only`;
86+
const themeClass = `data-lynx-console-color-mode__${theme}-only`;
8787

8888
return (
8989
<view className={themeClass}>

‎package/src/styles/vars/color.ts‎

Lines changed: 26 additions & 213 deletions
Original file line numberDiff line numberDiff line change
@@ -1,228 +1,41 @@
11
// Color Palette
22
export const palette = {
3-
blue100: "var(--seed-color-palette-blue-100)",
4-
blue200: "var(--seed-color-palette-blue-200)",
5-
blue300: "var(--seed-color-palette-blue-300)",
6-
blue400: "var(--seed-color-palette-blue-400)",
7-
blue500: "var(--seed-color-palette-blue-500)",
8-
blue600: "var(--seed-color-palette-blue-600)",
9-
blue700: "var(--seed-color-palette-blue-700)",
10-
blue800: "var(--seed-color-palette-blue-800)",
11-
blue900: "var(--seed-color-palette-blue-900)",
12-
blue1000: "var(--seed-color-palette-blue-1000)",
13-
14-
carrot100: "var(--seed-color-palette-carrot-100)",
15-
carrot200: "var(--seed-color-palette-carrot-200)",
16-
carrot300: "var(--seed-color-palette-carrot-300)",
17-
carrot400: "var(--seed-color-palette-carrot-400)",
18-
carrot500: "var(--seed-color-palette-carrot-500)",
19-
carrot600: "var(--seed-color-palette-carrot-600)",
20-
carrot700: "var(--seed-color-palette-carrot-700)",
21-
carrot800: "var(--seed-color-palette-carrot-800)",
22-
carrot900: "var(--seed-color-palette-carrot-900)",
23-
carrot1000: "var(--seed-color-palette-carrot-1000)",
24-
25-
gray00: "var(--seed-color-palette-gray-00)",
26-
gray100: "var(--seed-color-palette-gray-100)",
27-
gray200: "var(--seed-color-palette-gray-200)",
28-
gray300: "var(--seed-color-palette-gray-300)",
29-
gray400: "var(--seed-color-palette-gray-400)",
30-
gray500: "var(--seed-color-palette-gray-500)",
31-
gray600: "var(--seed-color-palette-gray-600)",
32-
gray700: "var(--seed-color-palette-gray-700)",
33-
gray800: "var(--seed-color-palette-gray-800)",
34-
gray900: "var(--seed-color-palette-gray-900)",
35-
gray1000: "var(--seed-color-palette-gray-1000)",
36-
37-
green100: "var(--seed-color-palette-green-100)",
38-
green200: "var(--seed-color-palette-green-200)",
39-
green300: "var(--seed-color-palette-green-300)",
40-
green400: "var(--seed-color-palette-green-400)",
41-
green500: "var(--seed-color-palette-green-500)",
42-
green600: "var(--seed-color-palette-green-600)",
43-
green700: "var(--seed-color-palette-green-700)",
44-
green800: "var(--seed-color-palette-green-800)",
45-
green900: "var(--seed-color-palette-green-900)",
46-
green1000: "var(--seed-color-palette-green-1000)",
47-
48-
purple100: "var(--seed-color-palette-purple-100)",
49-
purple200: "var(--seed-color-palette-purple-200)",
50-
purple300: "var(--seed-color-palette-purple-300)",
51-
purple400: "var(--seed-color-palette-purple-400)",
52-
purple500: "var(--seed-color-palette-purple-500)",
53-
purple600: "var(--seed-color-palette-purple-600)",
54-
purple700: "var(--seed-color-palette-purple-700)",
55-
purple800: "var(--seed-color-palette-purple-800)",
56-
purple900: "var(--seed-color-palette-purple-900)",
57-
purple1000: "var(--seed-color-palette-purple-1000)",
58-
59-
red100: "var(--seed-color-palette-red-100)",
60-
red200: "var(--seed-color-palette-red-200)",
61-
red300: "var(--seed-color-palette-red-300)",
62-
red400: "var(--seed-color-palette-red-400)",
63-
red500: "var(--seed-color-palette-red-500)",
64-
red600: "var(--seed-color-palette-red-600)",
65-
red700: "var(--seed-color-palette-red-700)",
66-
red800: "var(--seed-color-palette-red-800)",
67-
red900: "var(--seed-color-palette-red-900)",
68-
red1000: "var(--seed-color-palette-red-1000)",
69-
70-
staticBlack: "var(--seed-color-palette-static-black)",
71-
staticWhite: "var(--seed-color-palette-static-white)",
72-
staticBlackAlpha100: "var(--seed-color-palette-static-black-alpha-100)",
73-
staticBlackAlpha200: "var(--seed-color-palette-static-black-alpha-200)",
74-
staticBlackAlpha300: "var(--seed-color-palette-static-black-alpha-300)",
75-
staticBlackAlpha400: "var(--seed-color-palette-static-black-alpha-400)",
76-
staticBlackAlpha500: "var(--seed-color-palette-static-black-alpha-500)",
77-
staticBlackAlpha600: "var(--seed-color-palette-static-black-alpha-600)",
78-
staticBlackAlpha700: "var(--seed-color-palette-static-black-alpha-700)",
79-
staticBlackAlpha800: "var(--seed-color-palette-static-black-alpha-800)",
80-
staticBlackAlpha900: "var(--seed-color-palette-static-black-alpha-900)",
81-
staticBlackAlpha1000: "var(--seed-color-palette-static-black-alpha-1000)",
82-
staticWhiteAlpha50: "var(--seed-color-palette-static-white-alpha-50)",
83-
staticWhiteAlpha100: "var(--seed-color-palette-static-white-alpha-100)",
84-
staticWhiteAlpha200: "var(--seed-color-palette-static-white-alpha-200)",
85-
staticWhiteAlpha300: "var(--seed-color-palette-static-white-alpha-300)",
86-
staticWhiteAlpha400: "var(--seed-color-palette-static-white-alpha-400)",
87-
staticWhiteAlpha500: "var(--seed-color-palette-static-white-alpha-500)",
88-
staticWhiteAlpha600: "var(--seed-color-palette-static-white-alpha-600)",
89-
staticWhiteAlpha700: "var(--seed-color-palette-static-white-alpha-700)",
90-
staticWhiteAlpha800: "var(--seed-color-palette-static-white-alpha-800)",
91-
staticWhiteAlpha900: "var(--seed-color-palette-static-white-alpha-900)",
92-
staticWhiteAlpha1000: "var(--seed-color-palette-static-white-alpha-1000)",
93-
94-
yellow100: "var(--seed-color-palette-yellow-100)",
95-
yellow200: "var(--seed-color-palette-yellow-200)",
96-
yellow300: "var(--seed-color-palette-yellow-300)",
97-
yellow400: "var(--seed-color-palette-yellow-400)",
98-
yellow500: "var(--seed-color-palette-yellow-500)",
99-
yellow600: "var(--seed-color-palette-yellow-600)",
100-
yellow700: "var(--seed-color-palette-yellow-700)",
101-
yellow800: "var(--seed-color-palette-yellow-800)",
102-
yellow900: "var(--seed-color-palette-yellow-900)",
103-
yellow1000: "var(--seed-color-palette-yellow-1000)",
3+
blue100: "var(--lynx-console-color-palette-blue-100)",
4+
blue600: "var(--lynx-console-color-palette-blue-600)",
5+
gray100: "var(--lynx-console-color-palette-gray-100)",
6+
gray400: "var(--lynx-console-color-palette-gray-400)",
7+
green100: "var(--lynx-console-color-palette-green-100)",
8+
green600: "var(--lynx-console-color-palette-green-600)",
9+
purple100: "var(--lynx-console-color-palette-purple-100)",
10+
purple600: "var(--lynx-console-color-palette-purple-600)",
11+
red100: "var(--lynx-console-color-palette-red-100)",
12+
red600: "var(--lynx-console-color-palette-red-600)",
13+
red900: "var(--lynx-console-color-palette-red-900)",
14+
staticWhite: "var(--lynx-console-color-palette-static-white)",
15+
yellow100: "var(--lynx-console-color-palette-yellow-100)",
16+
yellow600: "var(--lynx-console-color-palette-yellow-600)",
17+
yellow900: "var(--lynx-console-color-palette-yellow-900)",
10418
};
10519

10620
// Foreground Colors
10721
export const fg = {
108-
neutral: "var(--seed-color-fg-neutral)",
109-
placeholder: "var(--seed-color-fg-placeholder)",
110-
disabled: "var(--seed-color-fg-disabled)",
111-
brand: "var(--seed-color-fg-brand)",
112-
informative: "var(--seed-color-fg-informative)",
113-
critical: "var(--seed-color-fg-critical)",
114-
positive: "var(--seed-color-fg-positive)",
115-
warning: "var(--seed-color-fg-warning)",
116-
brandContrast: "var(--seed-color-fg-brand-contrast)",
117-
criticalContrast: "var(--seed-color-fg-critical-contrast)",
118-
informativeContrast: "var(--seed-color-fg-informative-contrast)",
119-
neutralMuted: "var(--seed-color-fg-neutral-muted)",
120-
neutralSubtle: "var(--seed-color-fg-neutral-subtle)",
121-
neutralInverted: "var(--seed-color-fg-neutral-inverted)",
122-
positiveContrast: "var(--seed-color-fg-positive-contrast)",
123-
warningContrast: "var(--seed-color-fg-warning-contrast)",
22+
neutral: "var(--lynx-console-color-fg-neutral)",
23+
placeholder: "var(--lynx-console-color-fg-placeholder)",
24+
disabled: "var(--lynx-console-color-fg-disabled)",
25+
neutralMuted: "var(--lynx-console-color-fg-neutral-muted)",
26+
neutralSubtle: "var(--lynx-console-color-fg-neutral-subtle)",
12427
};
12528

12629
// Background Colors
12730
export const bg = {
128-
overlay: "var(--seed-color-bg-overlay)",
129-
disabled: "var(--seed-color-bg-disabled)",
130-
brandWeak: "var(--seed-color-bg-brand-weak)",
131-
brandSolid: "var(--seed-color-bg-brand-solid)",
132-
brandSolidPressed: "var(--seed-color-bg-brand-solid-pressed)",
133-
brandWeakPressed: "var(--seed-color-bg-brand-weak-pressed)",
134-
criticalWeak: "var(--seed-color-bg-critical-weak)",
135-
criticalSolid: "var(--seed-color-bg-critical-solid)",
136-
criticalSolidPressed: "var(--seed-color-bg-critical-solid-pressed)",
137-
criticalWeakPressed: "var(--seed-color-bg-critical-weak-pressed)",
138-
informativeWeak: "var(--seed-color-bg-informative-weak)",
139-
informativeSolid: "var(--seed-color-bg-informative-solid)",
140-
informativeSolidPressed: "var(--seed-color-bg-informative-solid-pressed)",
141-
informativeWeakPressed: "var(--seed-color-bg-informative-weak-pressed)",
142-
layerBasement: "var(--seed-color-bg-layer-basement)",
143-
layerDefault: "var(--seed-color-bg-layer-default)",
144-
layerFill: "var(--seed-color-bg-layer-fill)",
145-
layerFloating: "var(--seed-color-bg-layer-floating)",
146-
layerDefaultPressed: "var(--seed-color-bg-layer-default-pressed)",
147-
layerFloatingPressed: "var(--seed-color-bg-layer-floating-pressed)",
148-
magicWeak: "var(--seed-color-bg-magic-weak)",
149-
neutralWeak: "var(--seed-color-bg-neutral-weak)",
150-
neutralInverted: "var(--seed-color-bg-neutral-inverted)",
151-
neutralSolid: "var(--seed-color-bg-neutral-solid)",
152-
neutralInvertedPressed: "var(--seed-color-bg-neutral-inverted-pressed)",
153-
neutralSolidMuted: "var(--seed-color-bg-neutral-solid-muted)",
154-
neutralSolidMutedPressed: "var(--seed-color-bg-neutral-solid-muted-pressed)",
155-
neutralWeakPressed: "var(--seed-color-bg-neutral-weak-pressed)",
156-
overlayMuted: "var(--seed-color-bg-overlay-muted)",
157-
positiveWeak: "var(--seed-color-bg-positive-weak)",
158-
positiveSolid: "var(--seed-color-bg-positive-solid)",
159-
positiveSolidPressed: "var(--seed-color-bg-positive-solid-pressed)",
160-
positiveWeakPressed: "var(--seed-color-bg-positive-weak-pressed)",
161-
warningWeak: "var(--seed-color-bg-warning-weak)",
162-
warningSolid: "var(--seed-color-bg-warning-solid)",
163-
warningSolidPressed: "var(--seed-color-bg-warning-solid-pressed)",
164-
warningWeakPressed: "var(--seed-color-bg-warning-weak-pressed)",
31+
overlay: "var(--lynx-console-color-bg-overlay)",
32+
layerDefault: "var(--lynx-console-color-bg-layer-default)",
33+
layerFloating: "var(--lynx-console-color-bg-layer-floating)",
34+
neutralWeak: "var(--lynx-console-color-bg-neutral-weak)",
16535
};
16636

16737
// Stroke Colors
16838
export const stroke = {
169-
brandWeak: "var(--seed-color-stroke-brand-weak)",
170-
brandSolid: "var(--seed-color-stroke-brand-solid)",
171-
criticalWeak: "var(--seed-color-stroke-critical-weak)",
172-
criticalSolid: "var(--seed-color-stroke-critical-solid)",
173-
informativeWeak: "var(--seed-color-stroke-informative-weak)",
174-
informativeSolid: "var(--seed-color-stroke-informative-solid)",
175-
neutralContrast: "var(--seed-color-stroke-neutral-contrast)",
176-
neutralSolid: "var(--seed-color-stroke-neutral-solid)",
177-
neutralWeak: "var(--seed-color-stroke-neutral-weak)",
178-
neutralMuted: "var(--seed-color-stroke-neutral-muted)",
179-
neutralSubtle: "var(--seed-color-stroke-neutral-subtle)",
180-
positiveWeak: "var(--seed-color-stroke-positive-weak)",
181-
positiveSolid: "var(--seed-color-stroke-positive-solid)",
182-
warningWeak: "var(--seed-color-stroke-warning-weak)",
183-
warningSolid: "var(--seed-color-stroke-warning-solid)",
184-
};
185-
186-
// Manner Temp Colors
187-
export const mannerTemp = {
188-
l1: {
189-
text: "var(--seed-color-manner-temp-l1-text)",
190-
bg: "var(--seed-color-manner-temp-l1-bg)",
191-
},
192-
l2: {
193-
text: "var(--seed-color-manner-temp-l2-text)",
194-
bg: "var(--seed-color-manner-temp-l2-bg)",
195-
},
196-
l3: {
197-
text: "var(--seed-color-manner-temp-l3-text)",
198-
bg: "var(--seed-color-manner-temp-l3-bg)",
199-
},
200-
l4: {
201-
text: "var(--seed-color-manner-temp-l4-text)",
202-
bg: "var(--seed-color-manner-temp-l4-bg)",
203-
},
204-
l5: {
205-
text: "var(--seed-color-manner-temp-l5-text)",
206-
bg: "var(--seed-color-manner-temp-l5-bg)",
207-
},
208-
l6: {
209-
text: "var(--seed-color-manner-temp-l6-text)",
210-
bg: "var(--seed-color-manner-temp-l6-bg)",
211-
},
212-
l7: {
213-
text: "var(--seed-color-manner-temp-l7-text)",
214-
bg: "var(--seed-color-manner-temp-l7-bg)",
215-
},
216-
l8: {
217-
text: "var(--seed-color-manner-temp-l8-text)",
218-
bg: "var(--seed-color-manner-temp-l8-bg)",
219-
},
220-
l9: {
221-
text: "var(--seed-color-manner-temp-l9-text)",
222-
bg: "var(--seed-color-manner-temp-l9-bg)",
223-
},
224-
l10: {
225-
text: "var(--seed-color-manner-temp-l10-text)",
226-
bg: "var(--seed-color-manner-temp-l10-bg)",
227-
},
39+
neutralSubtle: "var(--lynx-console-color-stroke-neutral-subtle)",
40+
neutralWeak: "var(--lynx-console-color-stroke-neutral-weak)",
22841
};

‎package/src/styles/vars/dimension.ts‎

Lines changed: 5 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,10 @@
11
// Dimensions
2-
export const x0_5 = "var(--seed-dimension-x0_5)";
3-
export const x1 = "var(--seed-dimension-x1)";
4-
export const x1_5 = "var(--seed-dimension-x1_5)";
5-
export const x2 = "var(--seed-dimension-x2)";
6-
export const x2_5 = "var(--seed-dimension-x2_5)";
7-
export const x3 = "var(--seed-dimension-x3)";
8-
export const x3_5 = "var(--seed-dimension-x3_5)";
9-
export const x4 = "var(--seed-dimension-x4)";
10-
export const x4_5 = "var(--seed-dimension-x4_5)";
11-
export const x5 = "var(--seed-dimension-x5)";
12-
export const x6 = "var(--seed-dimension-x6)";
13-
export const x7 = "var(--seed-dimension-x7)";
14-
export const x8 = "var(--seed-dimension-x8)";
15-
export const x9 = "var(--seed-dimension-x9)";
16-
export const x10 = "var(--seed-dimension-x10)";
17-
export const x12 = "var(--seed-dimension-x12)";
18-
export const x13 = "var(--seed-dimension-x13)";
19-
export const x14 = "var(--seed-dimension-x14)";
20-
export const x16 = "var(--seed-dimension-x16)";
2+
export const x2 = "var(--lynx-console-dimension-x2)";
3+
export const x3 = "var(--lynx-console-dimension-x3)";
4+
export const x4 = "var(--lynx-console-dimension-x4)";
5+
export const x6 = "var(--lynx-console-dimension-x6)";
216

227
// Spacing
238
export const spacingX = {
24-
betweenChips: "var(--seed-dimension-spacing-x-between-chips)",
25-
globalGutter: "var(--seed-dimension-spacing-x-global-gutter)",
26-
};
27-
28-
export const spacingY = {
29-
componentDefault: "var(--seed-dimension-spacing-y-component-default)",
30-
navToTitle: "var(--seed-dimension-spacing-y-nav-to-title)",
31-
screenBottom: "var(--seed-dimension-spacing-y-screen-bottom)",
32-
betweenText: "var(--seed-dimension-spacing-y-between-text)",
33-
};
34-
35-
// Font Sizes
36-
export const t1 = "var(--seed-font-size-t1)";
37-
export const t2 = "var(--seed-font-size-t2)";
38-
export const t3 = "var(--seed-font-size-t3)";
39-
export const t4 = "var(--seed-font-size-t4)";
40-
export const t5 = "var(--seed-font-size-t5)";
41-
export const t6 = "var(--seed-font-size-t6)";
42-
export const t7 = "var(--seed-font-size-t7)";
43-
export const t8 = "var(--seed-font-size-t8)";
44-
export const t9 = "var(--seed-font-size-t9)";
45-
export const t10 = "var(--seed-font-size-t10)";
46-
export const t1Static = "var(--seed-font-size-t1-static)";
47-
export const t2Static = "var(--seed-font-size-t2-static)";
48-
export const t3Static = "var(--seed-font-size-t3-static)";
49-
export const t4Static = "var(--seed-font-size-t4-static)";
50-
export const t5Static = "var(--seed-font-size-t5-static)";
51-
export const t6Static = "var(--seed-font-size-t6-static)";
52-
export const t7Static = "var(--seed-font-size-t7-static)";
53-
export const t8Static = "var(--seed-font-size-t8-static)";
54-
export const t9Static = "var(--seed-font-size-t9-static)";
55-
export const t10Static = "var(--seed-font-size-t10-static)";
56-
57-
// Line Heights
58-
export const lineHeight = {
59-
t1: "var(--seed-line-height-t1)",
60-
t2: "var(--seed-line-height-t2)",
61-
t3: "var(--seed-line-height-t3)",
62-
t4: "var(--seed-line-height-t4)",
63-
t5: "var(--seed-line-height-t5)",
64-
t6: "var(--seed-line-height-t6)",
65-
t7: "var(--seed-line-height-t7)",
66-
t8: "var(--seed-line-height-t8)",
67-
t9: "var(--seed-line-height-t9)",
68-
t10: "var(--seed-line-height-t10)",
69-
t1Static: "var(--seed-line-height-t1-static)",
70-
t2Static: "var(--seed-line-height-t2-static)",
71-
t3Static: "var(--seed-line-height-t3-static)",
72-
t4Static: "var(--seed-line-height-t4-static)",
73-
t5Static: "var(--seed-line-height-t5-static)",
74-
t6Static: "var(--seed-line-height-t6-static)",
75-
t7Static: "var(--seed-line-height-t7-static)",
76-
t8Static: "var(--seed-line-height-t8-static)",
77-
t9Static: "var(--seed-line-height-t9-static)",
78-
t10Static: "var(--seed-line-height-t10-static)",
9+
globalGutter: "var(--lynx-console-dimension-spacing-x-global-gutter)",
7910
};

0 commit comments

Comments
 (0)