Skip to content

Commit 5549aa2

Browse files
maiieulmaiieul
authored
Merge pull request #642 from maiieul/logo-secondary
Logo secondary
2 parents 3e4e64f + a631eb0 commit 5549aa2

File tree

19 files changed

+639
-472
lines changed

19 files changed

+639
-472
lines changed

‎apps/website/src/_state/make-it-yours.ts

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

‎apps/website/src/components/icons/logo.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ export const Logo = component$<PropsOf<'svg'>>(({ ...props }) => {
5252
d="M 1266.5,270.5 C 1311.17,270.5 1355.83,270.5 1400.5,270.5C 1400.5,378.167 1400.5,485.833 1400.5,593.5C 1355.83,593.5 1311.17,593.5 1266.5,593.5C 1266.5,485.833 1266.5,378.167 1266.5,270.5 Z"
5353
/>
5454
</g>
55-
<path class="fill-secondary" d="M1266.5 270.5h134v323h-134v-323Z" />
5655
</svg>
5756
);
5857
});
@@ -113,7 +112,6 @@ export const LogoWithBorders = component$<PropsOf<'svg'>>(({ ...props }) => {
113112
d="M 1266.5,270.5 C 1311.17,270.5 1355.83,270.5 1400.5,270.5C 1400.5,378.167 1400.5,485.833 1400.5,593.5C 1355.83,593.5 1311.17,593.5 1266.5,593.5C 1266.5,485.833 1266.5,378.167 1266.5,270.5 Z"
114113
/>
115114
</g>
116-
<path class="fill-secondary" d="M1266.5 270.5h134v323h-134v-323Z" />
117115
</g>
118116
</svg>
119117
);

‎apps/website/src/components/make-it-yours/make-it-yours.tsx

Lines changed: 302 additions & 270 deletions
Large diffs are not rendered by default.

‎apps/website/src/global.css

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -200,8 +200,8 @@
200200
--card-foreground: 222.2 47.4% 11.2%;
201201
--border: 214.3 31.8% 91.4%;
202202
--input: 214.3 31.8% 91.4%;
203-
--secondary: 222.2 47.4% 11.2%;
204-
--secondary-foreground: 0 0% 100%;
203+
--secondary: 214.3 31.8% 91.4%;
204+
--secondary-foreground: 0 0% 0%;
205205
--accent: 210 40% 96.1%;
206206
--accent-foreground: 222.2 47.4% 11.2%;
207207
--alert: 0 84.2% 60.2%;
@@ -219,7 +219,7 @@
219219
--card-foreground: 210 40% 98%;
220220
--border: 217.2 32.6% 17.5%;
221221
--input: 217.2 32.6% 17.5%;
222-
--secondary: 210 40% 96.1%;
222+
--secondary: 214.3 31.8% 91.4%;
223223
--secondary-foreground: 0 0% 0%;
224224
--accent: 217.2 32.6% 17.5%;
225225
--accent-foreground: 210 40% 98%;
@@ -239,8 +239,8 @@
239239
--card-foreground: 220.9 39.3% 11%;
240240
--border: 220 13% 91%;
241241
--input: 220 13% 91%;
242-
--secondary: 220.9 39.3% 11%;
243-
--secondary-foreground: 0 0% 100%;
242+
--secondary: 220 13% 91%;
243+
--secondary-foreground: 0 0% 0%;
244244
--accent: 220 14.3% 95.9%;
245245
--accent-foreground: 220.9 39.3% 11%;
246246
--alert: 0 84.2% 60.2%;
@@ -258,7 +258,7 @@
258258
--card-foreground: 210 20% 98%;
259259
--border: 215 27.9% 16.9%;
260260
--input: 215 27.9% 16.9%;
261-
--secondary: 220 14.3% 95.9%;
261+
--secondary: 220 13% 91%;
262262
--secondary-foreground: 0 0% 0%;
263263
--accent: 215 27.9% 16.9%;
264264
--accent-foreground: 210 20% 98%;
@@ -278,8 +278,8 @@
278278
--card-foreground: 240 5.9% 10%;
279279
--border: 240 5.9% 90%;
280280
--input: 240 5.9% 90%;
281-
--secondary: 240 5.9% 10%;
282-
--secondary-foreground: 0 0% 100%;
281+
--secondary: 240 5.9% 90%;
282+
--secondary-foreground: 0 0% 0%;
283283
--accent: 240 4.8% 95.9%;
284284
--accent-foreground: 240 5.9% 10%;
285285
--alert: 0 84.2% 60.2%;
@@ -297,7 +297,7 @@
297297
--card-foreground: 0 0% 98%;
298298
--border: 240 3.7% 15.9%;
299299
--input: 240 3.7% 15.9%;
300-
--secondary: 240 4.8% 95.9%;
300+
--secondary: 240 5.9% 90%;
301301
--secondary-foreground: 0 0% 0%;
302302
--accent: 240 3.7% 15.9%;
303303
--accent-foreground: 0 0% 98%;
@@ -317,8 +317,8 @@
317317
--card-foreground: 0 0% 9%;
318318
--border: 0 0% 89.8%;
319319
--input: 0 0% 89.8%;
320-
--secondary: 0 0% 9%;
321-
--secondary-foreground: 0 0% 100%;
320+
--secondary: 0 0% 89.8%;
321+
--secondary-foreground: 0 0% 0%;
322322
--accent: 0 0% 96.1%;
323323
--accent-foreground: 0 0% 9%;
324324
--alert: 0 84.2% 60.2%;
@@ -336,7 +336,7 @@
336336
--card-foreground: 0 0% 98%;
337337
--border: 0 0% 14.9%;
338338
--input: 0 0% 14.9%;
339-
--secondary: 0 0% 96.1%;
339+
--secondary: 0 0% 89.8%;
340340
--secondary-foreground: 0 0% 0%;
341341
--accent: 0 0% 14.9%;
342342
--accent-foreground: 0 0% 98%;
@@ -356,8 +356,8 @@
356356
--card-foreground: 24 9.8% 10%;
357357
--border: 20 5.9% 90%;
358358
--input: 20 5.9% 90%;
359-
--secondary: 24 9.8% 10%;
360-
--secondary-foreground: 0 0% 100%;
359+
--secondary: 20 5.9% 90%;
360+
--secondary-foreground: 0 0% 0%;
361361
--accent: 60 4.8% 95.9%;
362362
--accent-foreground: 24 9.8% 10%;
363363
--alert: 0 84.2% 60.2%;
@@ -375,7 +375,7 @@
375375
--card-foreground: 60 9.1% 97.8%;
376376
--border: 12 6.5% 15.1%;
377377
--input: 12 6.5% 15.1%;
378-
--secondary: 60 4.8% 95.9%;
378+
--secondary: 20 5.9% 90%;
379379
--secondary-foreground: 0 0% 0%;
380380
--accent: 12 6.5% 15.1%;
381381
--accent-foreground: 60 9.1% 97.8%;
@@ -1344,6 +1344,6 @@ body {
13441344
/* Not used yet - could be used for the colored text on the landing page when the make-it-yours color is too bright in light mode or too dim in dark mode */
13451345
@layer components {
13461346
.text-outlined {
1347-
@apply [text-shadow:-1px_0_#aaa,_0_1px_#aaa,_1px_0_#aaa,_0_-1px_#aaa] dark:[text-shadow:-1px_0_#888,_0_1px_#888,_1px_0_#888,_0_-1px_#888];
1347+
@apply [text-shadow:-1px_0_#bbb,_0_1px_#bbb,_1px_0_#bbb,_0_-1px_#bbb] dark:[text-shadow:-1px_0_#777,_0_1px_#777,_1px_0_#777,_0_-1px_#777];
13481348
}
13491349
}

‎apps/website/src/root.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@ import { RouterHead } from './components/router-head/router-head';
1111
import globalStyles from './global.css?inline';
1212

1313
import { ThemeProvider } from 'qwik-themes';
14-
import {
15-
baseOptions,
16-
borderRadiusOptions,
17-
modeOptions,
18-
primaryOptions,
19-
styleOptions,
20-
fontOptions,
21-
} from './_state/make-it-yours';
2214

2315
import '@fontsource-variable/inter';
2416
import '@fontsource/ibm-plex-mono';
2517
import '@fontsource/source-serif-pro';
2618
import '@fontsource/londrina-shadow';
2719
import '@fontsource/rubik-doodle-shadow';
20+
import {
21+
ThemeBaseColor,
22+
ThemeBorderRadius,
23+
ThemeFont,
24+
ThemeMode,
25+
ThemePrimaryColor,
26+
ThemeStyle,
27+
} from '@qwik-ui/utils';
2828

2929
export default component$(() => {
3030
/**
@@ -57,12 +57,12 @@ export default component$(() => {
5757
attribute="class"
5858
enableSystem={false}
5959
themes={[
60-
...modeOptions,
61-
...fontOptions,
62-
...styleOptions,
63-
...baseOptions,
64-
...primaryOptions,
65-
...borderRadiusOptions,
60+
...Object.values(ThemeFont),
61+
...Object.values(ThemeMode),
62+
...Object.values(ThemeStyle),
63+
...Object.values(ThemeBaseColor),
64+
...Object.values(ThemePrimaryColor),
65+
...Object.values(ThemeBorderRadius),
6666
]}
6767
>
6868
<RouterOutlet />

‎apps/website/src/routes/[email protected]

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default component$(() => {
1010
<div class="flex flex-col gap-8">
1111
<h1 class="text-center text-3xl font-bold leading-normal lg:text-5xl">
1212
<span class="text-primary text-outlined font-black tracking-wide">Qwik</span>{' '}
13-
<span class="text-secondary font-black tracking-wide">UI</span>
13+
<span class="text-secondary text-outlined font-black tracking-wide">UI</span>
1414
</h1>
1515
<h2 class="text-center text-2xl font-bold leading-normal lg:text-4xl">
1616
The world's fastest loading UI components <br />

‎packages/cli/bin/index.ts

Lines changed: 39 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,12 @@ import {
1919
writeJsonFile,
2020
} from '@nx/devkit';
2121

22-
import { Color, ThemeStyle, type BorderRadius, type ThemeConfig } from '@qwik-ui/utils';
22+
import {
23+
ThemePrimaryColor,
24+
ThemeStyle,
25+
ThemeBorderRadius,
26+
ThemeConfig,
27+
} from '@qwik-ui/utils';
2328
import { bgRgb, bold, cyan, green, red } from 'ansis';
2429
import { execSync } from 'child_process';
2530
import { existsSync, readFileSync, writeFileSync } from 'fs';
@@ -127,8 +132,8 @@ async function handleInit() {
127132
uiComponentsPath: args['uiComponentsPath'] as string,
128133
rootCssPath: args['rootCssPath'] as string,
129134
style: args['style'] as ThemeStyle,
130-
primaryColor: args['primaryColor'] as string,
131-
borderRadius: args['borderRadius'] as BorderRadius,
135+
primaryColor: args['primaryColor'] as ThemePrimaryColor,
136+
borderRadius: args['borderRadius'] as ThemeBorderRadius,
132137
};
133138

134139
if (!config.projectRoot) {
@@ -211,8 +216,8 @@ async function handleInit() {
211216

212217
if (!shouldCustomize) {
213218
config.style ||= ThemeStyle.SIMPLE;
214-
config.primaryColor ||= Color.CYAN + '-600';
215-
config.borderRadius ||= 'border-radius-0';
219+
config.primaryColor ||= ThemePrimaryColor.CYAN600;
220+
config.borderRadius ||= ThemeBorderRadius['BORDER-RADIUS-0'];
216221
} else {
217222
if (!config.style) {
218223
config.style = cancelable(
@@ -224,7 +229,7 @@ async function handleInit() {
224229
{ label: 'Brutalist', value: ThemeStyle.BRUTALIST },
225230
{ label: 'Neumorphic', value: ThemeStyle.NEUMORPHIC },
226231
],
227-
initialValue: 'simple',
232+
initialValue: ThemeStyle.SIMPLE,
228233
}),
229234
);
230235
}
@@ -233,63 +238,51 @@ async function handleInit() {
233238
config.primaryColor = cancelable(
234239
await select({
235240
message: cyan('Choose a primary color'),
236-
initialValue: Color.CYAN + '-600',
241+
initialValue: ThemePrimaryColor.CYAN600,
237242
options: [
238243
{
239-
label: bold`${bgRgb(220, 38, 38)` `} ${capitalizeFirstLetter(
240-
Color.RED,
241-
)} `,
242-
hint: Color.RED + '-600',
243-
value: Color.RED + '-600',
244-
}, // 600
244+
label: bold`${bgRgb(220, 38, 38)` `} ${capitalizeFirstLetter('Red')} `,
245+
hint: ThemePrimaryColor.RED600,
246+
value: ThemePrimaryColor.RED600,
247+
},
245248
{
246-
label: bold`${bgRgb(234, 88, 12)` `} ${capitalizeFirstLetter(
247-
Color.ORANGE,
248-
)} `, // 600
249-
hint: Color.ORANGE + '-600',
250-
value: Color.ORANGE + '-600',
249+
label: bold`${bgRgb(234, 88, 12)` `} ${capitalizeFirstLetter('Orange')} `,
250+
hint: ThemePrimaryColor.ORANGE600,
251+
value: ThemePrimaryColor.ORANGE600,
251252
},
252253
{
253254
label: bold`${bgRgb(250, 204, 21)` `} ${capitalizeFirstLetter(
254-
Color.YELLOW,
255-
)} `, // 400
256-
hint: Color.YELLOW + '-400',
257-
value: Color.YELLOW + '-400',
255+
'Yellow',
256+
)} `,
257+
hint: ThemePrimaryColor.YELLOW400,
258+
value: ThemePrimaryColor.YELLOW400,
258259
},
259260
{
260-
label: bold`${bgRgb(22, 163, 74)` `} ${capitalizeFirstLetter(
261-
Color.GREEN,
262-
)} `, // 600
263-
hint: Color.GREEN + '-600',
264-
value: Color.GREEN + '-600',
261+
label: bold`${bgRgb(22, 163, 74)` `} ${capitalizeFirstLetter('Green')} `,
262+
hint: ThemePrimaryColor.GREEN600,
263+
value: ThemePrimaryColor.GREEN600,
265264
},
266265
{
267-
label: bold`${bgRgb(6, 182, 212)` `} ${capitalizeFirstLetter(
268-
Color.CYAN,
269-
)} `, // 600
270-
hint: Color.CYAN + '-600',
271-
value: Color.CYAN + '-600',
266+
label: bold`${bgRgb(6, 182, 212)` `} ${capitalizeFirstLetter('Cyan')} `,
267+
hint: ThemePrimaryColor.CYAN600,
268+
value: ThemePrimaryColor.CYAN600,
272269
},
273270
{
274-
label: bold`${bgRgb(37, 99, 235)` `} ${capitalizeFirstLetter(
275-
Color.BLUE,
276-
)} `, // 600
277-
hint: Color.BLUE + '-600',
278-
value: Color.BLUE + '-600',
271+
label: bold`${bgRgb(37, 99, 235)` `} ${capitalizeFirstLetter('Blue')} `,
272+
hint: ThemePrimaryColor.BLUE600,
273+
value: ThemePrimaryColor.BLUE600,
279274
},
280275
{
281276
label: bold`${bgRgb(147, 51, 234)` `} ${capitalizeFirstLetter(
282-
Color.PURPLE,
283-
)} `, // 600
284-
hint: Color.PURPLE + '-600',
285-
value: Color.PURPLE + '-600',
277+
'Purple',
278+
)} `,
279+
hint: ThemePrimaryColor.PURPLE600,
280+
value: ThemePrimaryColor.PURPLE600,
286281
},
287282
{
288-
label: bold`${bgRgb(219, 39, 119)` `} ${capitalizeFirstLetter(
289-
Color.PINK,
290-
)} `, // 600
291-
hint: Color.PINK + '-600',
292-
value: Color.PINK + '-600',
283+
label: bold`${bgRgb(219, 39, 119)` `} ${capitalizeFirstLetter('Pink')} `,
284+
hint: ThemePrimaryColor.PINK600,
285+
value: ThemePrimaryColor.PINK600,
293286
},
294287
],
295288
}),

0 commit comments

Comments
 (0)