Skip to content

Commit cc8b1ea

Browse files
ASafaeiradASafaeirad
committed
feat: add theme generator
1 parent 452ef47 commit cc8b1ea

40 files changed

Lines changed: 1215 additions & 936 deletions

‎eslint.config.mjs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
import { defineConfig } from '@fullstacksjs/eslint-config';
22

3-
export default defineConfig();
3+
export default defineConfig({
4+
rules: {
5+
'max-lines-per-function': 'off',
6+
},
7+
});

‎package.json‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,29 @@
3535
"contributes": {
3636
"themes": [
3737
{
38-
"label": "FullstacksJS Dark",
38+
"label": "FullstacksJS (Legacy)",
3939
"uiTheme": "vs-dark",
40-
"path": "./themes/generated/main.json"
40+
"path": "./themes/legacy.json"
4141
},
4242
{
43-
"label": "FullstacksJS Legacy",
43+
"label": "FullstacksJS (Main)",
4444
"uiTheme": "vs-dark",
45-
"path": "./themes/legacy.json"
45+
"path": "themes/generated/main.json"
46+
},
47+
{
48+
"label": "FullstacksJS (Dark)",
49+
"uiTheme": "vs-dark",
50+
"path": "themes/generated/dark.json"
51+
},
52+
{
53+
"label": "FullstacksJS (Warm)",
54+
"uiTheme": "vs-dark",
55+
"path": "themes/generated/warm.json"
4656
}
4757
]
4858
},
4959
"scripts": {
50-
"dev": "node --watch --experimental-strip-types src/generate.ts",
60+
"dev": "node --watch --experimental-strip-types --watch-path src/ src/generate.ts",
5161
"verify": "eslint src/",
5262
"build": "node --experimental-strip-types src/generate.ts && vsce package",
5363
"publish": "vsce publish"

‎src/colors.ts‎

Lines changed: 220 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,237 @@
1-
export const Palette = {
2-
Orange: { 500: '#ffb58a', 600: '#ffa478' },
3-
Yellow: { 100: '#ffdf9c', 600: '#ffd257' },
4-
Blue: { 500: '#66deff', 600: '#4fd9ff' },
5-
Cyan: { 100: '#adfff4', 600: '#14FFDE', 700: '#2dced0' },
6-
Green: { 600: '#c6ff90', 700: '#a9ff78' },
7-
Red: { 100: '#ff94a6', 500: '#e17e85', 600: '#ff7272' },
8-
Magenta: { 500: '#a7a7ff', 600: '#c5b5ff' },
9-
Gray: {
10-
100: '#ffffff',
11-
200: '#f8f8f8',
12-
400: '#556570',
13-
500: '#313744',
14-
600: '#23252e',
15-
700: '#1c1e25',
16-
800: '#121420',
17-
900: '#000000',
18-
},
19-
};
1+
import type { ColorConfig } from './ui/VSCodeToken.ts';
2+
3+
import { withAlpha } from './utils.ts';
4+
5+
export interface Palette {
6+
orange: string;
7+
yellow: string;
8+
blue: string;
9+
cyan: string;
10+
green: string;
11+
red: string;
12+
magenta: string;
13+
}
2014

21-
export function withAlpha(hex: string, alpha: number) {
22-
return `${hex}${Math.round(alpha * 255)
23-
.toString(16)
24-
.padStart(2, '0')}`;
15+
export interface UIColors {
16+
background: {
17+
default: ColorConfig;
18+
elevated: ColorConfig;
19+
focus: ColorConfig;
20+
hover: ColorConfig;
21+
overlay: ColorConfig;
22+
};
23+
24+
foreground: {
25+
default: ColorConfig;
26+
muted: ColorConfig;
27+
support: ColorConfig;
28+
};
29+
30+
selection: {
31+
default: ColorConfig;
32+
focus: ColorConfig;
33+
inactive: ColorConfig;
34+
found: ColorConfig;
35+
};
36+
37+
border: {
38+
default: ColorConfig;
39+
muted: ColorConfig;
40+
};
41+
42+
rainbow: {
43+
white: ColorConfig;
44+
yellow: ColorConfig;
45+
red: ColorConfig;
46+
cyan: ColorConfig;
47+
};
48+
49+
success: {
50+
foreground: ColorConfig;
51+
background: ColorConfig;
52+
onForeground: ColorConfig;
53+
focus: ColorConfig;
54+
};
55+
56+
link: {
57+
default: ColorConfig;
58+
hover: ColorConfig;
59+
};
60+
61+
info: {
62+
foreground: ColorConfig;
63+
background: ColorConfig;
64+
onForeground: ColorConfig;
65+
focus: ColorConfig;
66+
};
67+
68+
warning: {
69+
foreground: ColorConfig;
70+
background: ColorConfig;
71+
onForeground: ColorConfig;
72+
focus: ColorConfig;
73+
};
74+
75+
danger: {
76+
foreground: ColorConfig;
77+
background: ColorConfig;
78+
onForeground: ColorConfig;
79+
focus: ColorConfig;
80+
};
81+
82+
primary: {
83+
foreground: ColorConfig;
84+
hover: ColorConfig;
85+
onForeground: ColorConfig;
86+
};
87+
88+
secondary: {
89+
foreground: ColorConfig;
90+
hover: ColorConfig;
91+
onForeground: ColorConfig;
92+
};
93+
94+
tertiary: {
95+
foreground: ColorConfig;
96+
background: ColorConfig;
97+
onForeground: ColorConfig;
98+
focus: ColorConfig;
99+
};
100+
101+
transparent: ColorConfig;
102+
unknown: ColorConfig;
25103
}
26104

105+
export const defaultPalette: Palette = {
106+
orange: '#ffa478',
107+
yellow: '#ffd257',
108+
blue: '#66deff',
109+
cyan: '#14FFDE',
110+
green: '#c6ff90',
111+
red: '#e17e85',
112+
magenta: '#a7a7ff',
113+
};
114+
115+
const white = '#ffffff';
116+
const black = '#000000';
117+
const Gray = {
118+
400: '#556570',
119+
500: '#313744',
120+
600: '#23252e',
121+
700: '#1c1e25',
122+
};
123+
27124
export const Foregrounds = {
28-
Orange: Palette.Orange['600'],
29-
Yellow: Palette.Yellow['600'],
30-
Blue: Palette.Blue['600'],
31-
Cyan: Palette.Cyan['600'],
32-
Green: Palette.Green['600'],
33-
Neutral: Palette.Gray['100'],
34-
Magenta: Palette.Magenta['600'],
35-
Muted: withAlpha(Palette.Gray['100'], 0.3),
36-
Red: Palette.Red['600'],
37-
38-
Support: withAlpha(Palette.Gray['100'], 0.6),
39-
OnPrimary: Palette.Gray['900'],
40-
OnSuccess: Palette.Gray['900'],
41-
OnSecondary: Palette.Gray['100'],
42-
OnDanger: Palette.Gray['900'],
43-
OnInfo: Palette.Gray['900'],
44-
OnWarning: Palette.Gray['900'],
45-
OnTertiary: Palette.Gray['900'],
125+
Orange: defaultPalette.orange,
126+
Yellow: defaultPalette.yellow,
127+
Blue: '#4fd9ff',
128+
Cyan: defaultPalette.cyan,
129+
Green: defaultPalette.green,
130+
Neutral: white,
131+
Magenta: '#c5b5ff',
132+
Muted: withAlpha(white, 0.3),
133+
Red: '#ff7272',
46134
};
47135

48-
export const UIColors = {
49-
Unknown: 'unknown',
50-
Fallback: Palette.Red['500'],
51-
Background: Palette.Gray['600'],
52-
BackgroundElevated: Palette.Gray['700'],
53-
BackgroundFocus: withAlpha(Palette.Gray['900'], 0.3),
54-
BackgroundHover: withAlpha(Palette.Gray['100'], 0.1),
55-
BackgroundOverlay: withAlpha(Palette.Gray['900'], 0.15),
56-
57-
Selection: withAlpha(Palette.Gray['100'], 0.1),
58-
SelectionFocus: withAlpha(Palette.Gray['100'], 0.2),
59-
SelectionInactive: withAlpha(Palette.Gray['900'], 0.25),
60-
SelectionFound: withAlpha(Palette.Blue['600'], 0.15),
61-
62-
Danger: Palette.Red['600'],
63-
Success: Palette.Green['600'],
64-
Info: Palette.Blue['600'],
65-
Warning: Palette.Yellow['600'],
66-
67-
BackgroundSuccess: withAlpha(Palette.Green['600'], 0.2),
68-
BackgroundDanger: withAlpha(Palette.Red['600'], 0.2),
69-
BackgroundInfo: withAlpha(Palette.Blue['600'], 0.2),
70-
BackgroundWarning: withAlpha(Palette.Yellow['600'], 0.2),
71-
BackgroundTertiary: withAlpha(Palette.Magenta['600'], 0.2),
72-
73-
BackgroundSuccessFocus: withAlpha(Palette.Green['600'], 0.4),
74-
BackgroundDangerFocus: withAlpha(Palette.Red['600'], 0.4),
75-
BackgroundInfoFocus: withAlpha(Palette.Blue['600'], 0.4),
76-
BackgroundWarningFocus: withAlpha(Palette.Yellow['600'], 0.4),
77-
BackgroundTertiaryFocus: withAlpha(Palette.Magenta['600'], 0.4),
78-
79-
Border: Palette.Gray['800'],
80-
BorderMuted: Palette.Gray['700'],
81-
Transparent: '#00000000',
82-
Foreground: Palette.Gray['100'],
83-
84-
Primary: Palette.Orange['600'],
85-
PrimaryHover: Palette.Orange['500'],
86-
87-
Link: Palette.Magenta['500'],
88-
LinkHover: Palette.Magenta['600'],
89-
90-
Secondary: Palette.Gray['500'],
91-
SecondaryHover: Palette.Gray['400'],
92-
SecondaryForeground: Palette.Gray['100'],
93-
94-
Tertiary: Palette.Magenta['500'],
95-
TertiaryHover: Palette.Magenta['600'],
96-
TertiaryForeground: Palette.Magenta['500'],
136+
export const defaultColors: UIColors = {
137+
unknown: 'unknown',
138+
transparent: '#00000000',
139+
background: {
140+
default: Gray['600'],
141+
elevated: Gray['700'],
142+
focus: withAlpha(black, 0.3),
143+
overlay: withAlpha(black, 0.15),
144+
hover: withAlpha(white, 0.1),
145+
},
146+
selection: {
147+
default: withAlpha(white, 0.1),
148+
focus: withAlpha(white, 0.2),
149+
inactive: withAlpha(black, 0.25),
150+
found: withAlpha('#4fd9ff', 0.1),
151+
},
152+
danger: {
153+
foreground: '#ff7272',
154+
background: withAlpha('#ff7272', 0.2),
155+
onForeground: Gray['600'],
156+
focus: withAlpha('#ff7272', 0.4),
157+
},
158+
success: {
159+
foreground: defaultPalette.green,
160+
background: withAlpha(defaultPalette.green, 0.2),
161+
focus: withAlpha(defaultPalette.green, 0.4),
162+
onForeground: Gray['600'],
163+
},
164+
info: {
165+
foreground: '#4fd9ff',
166+
background: withAlpha('#4fd9ff', 0.2),
167+
focus: withAlpha('#4fd9ff', 0.4),
168+
onForeground: Gray['600'],
169+
},
170+
warning: {
171+
foreground: defaultPalette.yellow,
172+
background: withAlpha(defaultPalette.yellow, 0.2),
173+
focus: withAlpha(defaultPalette.yellow, 0.4),
174+
onForeground: Gray['600'],
175+
},
176+
tertiary: {
177+
foreground: defaultPalette.magenta,
178+
background: withAlpha('#c5b5ff', 0.2),
179+
focus: withAlpha('#c5b5ff', 0.4),
180+
onForeground: Gray['600'],
181+
},
182+
border: {
183+
default: '#121420',
184+
muted: Gray['700'],
185+
},
186+
foreground: {
187+
default: white,
188+
muted: withAlpha(white, 0.3),
189+
support: withAlpha(white, 0.6),
190+
},
191+
primary: {
192+
foreground: defaultPalette.orange,
193+
hover: '#ffb58a',
194+
onForeground: Gray['600'],
195+
},
196+
secondary: {
197+
foreground: Gray['500'],
198+
hover: Gray['400'],
199+
onForeground: white,
200+
},
201+
link: {
202+
default: defaultPalette.magenta,
203+
hover: '#c5b5ff',
204+
},
205+
rainbow: {
206+
white: '#f8f8f8',
207+
yellow: '#ffdf9c',
208+
red: '#ff94a6',
209+
cyan: '#adfff4',
210+
},
97211
};
98212

99213
export const ShellColors = {
100-
White: Palette.Gray['200'],
101-
BrightWhite: Palette.Gray['100'],
214+
White: '#f8f8f8',
215+
BrightWhite: white,
102216

103-
Black: Palette.Gray['400'],
104-
BrightBlack: Palette.Gray['500'],
217+
Black: Gray['400'],
218+
BrightBlack: Gray['500'],
105219

106-
Red: Palette.Red['600'],
107-
BrightRed: Palette.Red['500'],
220+
Red: '#ff7272',
221+
BrightRed: defaultPalette.red,
108222

109-
Yellow: Palette.Orange['600'],
110-
BrightYellow: Palette.Yellow['600'],
223+
Yellow: defaultPalette.orange,
224+
BrightYellow: defaultPalette.yellow,
111225

112-
Blue: Palette.Blue['600'],
113-
BrightBlue: Palette.Blue['500'],
226+
Blue: '#4fd9ff',
227+
BrightBlue: defaultPalette.blue,
114228

115-
Cyan: Palette.Cyan['700'],
116-
BrightCyan: Palette.Cyan['600'],
229+
Cyan: '#2dced0',
230+
BrightCyan: defaultPalette.cyan,
117231

118-
Green: Palette.Green['700'],
119-
BrightGreen: Palette.Green['600'],
232+
Green: '#a9ff78',
233+
BrightGreen: defaultPalette.green,
120234

121-
Magenta: Palette.Magenta['600'],
122-
BrightMagenta: Palette.Magenta['500'],
235+
Magenta: '#c5b5ff',
236+
BrightMagenta: defaultPalette.magenta,
123237
};

0 commit comments

Comments
 (0)