Skip to content

Commit c83487b

Browse files
maiieulmaiieul
committed
refactor(styled breadcrumbs): change styles to give allow brutalist style on BreadcrumbSeparator
1 parent dc13473 commit c83487b

File tree

8 files changed

+1311
-12
lines changed

8 files changed

+1311
-12
lines changed

‎apps/component-tests/src/global.css

Lines changed: 1252 additions & 2 deletions
Large diffs are not rendered by default.

‎apps/component-tests/tailwind.config.cjs

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const plugin = require('tailwindcss/plugin');
66
module.exports = {
77
content: [
88
join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
9-
join(__dirname, '../website/src/**/*.{js,ts,jsx,tsx,mdx}'),
9+
join(__dirname, '../../packages/kit-tailwind/src/**/*.{js,ts,jsx,tsx,mdx}'),
1010
join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
1111
],
1212
plugins: [
@@ -113,6 +113,12 @@ module.exports = {
113113
'2xl': 'var(--shadow-2xl)',
114114
inner: 'var(--shadow-inner)',
115115
},
116+
strokeWidth: {
117+
0: '0',
118+
base: 'var(--stroke-width)',
119+
1: 'calc(var(--stroke-width) + 1px)',
120+
2: 'calc(var(--stroke-width) + 2px)',
121+
},
116122
// EXTEND-END
117123
animation: {
118124
'accordion-down': '0.2s ease-out 0s 1 normal forwards accordion-open',

‎apps/website/src/global.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@layer base {
66
:root {
77
--border-width: 0px;
8+
--stroke-width: 0px;
89
--shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
910
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1011
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
@@ -62,6 +63,7 @@
6263
/* CSS PARSER: START - DO NOT REMOVE */
6364
.simple {
6465
--border-width: 0px;
66+
--stroke-width: 0px;
6567
--shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
6668
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
6769
--shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
@@ -75,6 +77,7 @@
7577

7678
.brutalist.brutalist {
7779
--border-width: 2px;
80+
--stroke-width: 2px;
7881
--border: 0 0% 0%;
7982
--input: 0 0% 0%;
8083
--ring: 0 0% 0%;
@@ -91,6 +94,7 @@
9194

9295
.dark.brutalist.brutalist {
9396
--border-width: 2px;
97+
--stroke-width: 2px;
9498
--shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
9599
--shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
96100
--shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
@@ -104,6 +108,7 @@
104108

105109
.neumorphic.neumorphic {
106110
--border-width: 0px;
111+
--stroke-width: 0px;
107112
--background: 0 0 88%;
108113
--foreground: 240 5.9% 10%;
109114
--popover: 0 0 88%;
@@ -140,6 +145,7 @@
140145

141146
.dark.neumorphic.neumorphic {
142147
--border-width: 0px;
148+
--stroke-width: 0px;
143149
--background: 240 5.3% 26.1%;
144150
--foreground: 240 5.9% 90%;
145151
--popover: 240 5.3% 26.1%;

‎apps/website/tailwind.config.cjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,12 @@ module.exports = {
113113
'2xl': 'var(--shadow-2xl)',
114114
inner: 'var(--shadow-inner)',
115115
},
116+
strokeWidth: {
117+
0: '0',
118+
base: 'var(--stroke-width)',
119+
1: 'calc(var(--stroke-width) + 1px)',
120+
2: 'calc(var(--stroke-width) + 2px)',
121+
},
116122
// EXTEND-END
117123
animation: {
118124
'accordion-down': '0.2s ease-out 0s 1 normal forwards accordion-open',

‎packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,12 @@ html {
181181
'2xl': 'var(--shadow-2xl)',
182182
inner: 'var(--shadow-inner)',
183183
},
184+
strokeWidth: {
185+
0: '0',
186+
base: 'var(--stroke-width)',
187+
1: 'calc(var(--stroke-width) + 1px)',
188+
2: 'calc(var(--stroke-width) + 2px)',
189+
},
184190
fontFamily: {
185191
sans: ['Inter Variable', 'sans-serif'],
186192
},
@@ -299,6 +305,12 @@ html {
299305
'2xl': 'var(--shadow-2xl)',
300306
inner: 'var(--shadow-inner)',
301307
},
308+
strokeWidth: {
309+
0: '0',
310+
base: 'var(--stroke-width)',
311+
1: 'calc(var(--stroke-width) + 1px)',
312+
2: 'calc(var(--stroke-width) + 2px)',
313+
},
302314
fontFamily: {
303315
sans: ['Inter Variable', 'sans-serif'],
304316
},
@@ -416,6 +428,12 @@ html {
416428
'2xl': 'var(--shadow-2xl)',
417429
inner: 'var(--shadow-inner)',
418430
},
431+
strokeWidth: {
432+
0: '0',
433+
base: 'var(--stroke-width)',
434+
1: 'calc(var(--stroke-width) + 1px)',
435+
2: 'calc(var(--stroke-width) + 2px)',
436+
},
419437
fontFamily: {
420438
sans: ['Inter Variable', 'sans-serif'],
421439
},

‎packages/kit-styled/src/components/breadcrumb/breadcrumb.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const BreadcrumbList = component$<BreadcrumbListProps>((props) => {
1616
return (
1717
<ol
1818
class={cn(
19-
'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
19+
' flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
2020
props.class,
2121
)}
2222
{...props}
@@ -39,7 +39,13 @@ type BreadcrumbLinkProps = PropsOf<'a'> & { asChild?: boolean };
3939
const BreadcrumbLink = component$<BreadcrumbLinkProps>((props) => {
4040
const Comp = props.asChild ? Slot : 'a';
4141
return (
42-
<Comp class={cn('hover:text-foreground transition-colors', props.class)} {...props}>
42+
<Comp
43+
class={cn(
44+
'text-muted-foreground hover:text-foreground transition-colors',
45+
props.class,
46+
)}
47+
{...props}
48+
>
4349
{!props.asChild && <Slot />}
4450
</Comp>
4551
);
@@ -48,13 +54,8 @@ const BreadcrumbLink = component$<BreadcrumbLinkProps>((props) => {
4854
type BreadcrumbSeparatorProps = PropsOf<'li'>;
4955
const BreadcrumbSeparator = component$<BreadcrumbSeparatorProps>((props) => {
5056
return (
51-
<li
52-
role="presentation"
53-
aria-hidden="true"
54-
class={cn('[&>svg]:size-3.5', props.class)}
55-
{...props}
56-
>
57-
<LuChevronRight />
57+
<li role="presentation" aria-hidden="true" {...props}>
58+
<LuChevronRight class="stroke-muted-foreground size-3.5 stroke-2" />
5859
</li>
5960
);
6061
});

‎packages/kit-styled/src/templates/global.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@layer base {
66
:root {
77
--border-width: 0px;
8+
--stroke-width: 0px;
89
--shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
910
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
1011
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
@@ -62,6 +63,7 @@
6263
/* CSS PARSER: START - DO NOT REMOVE */
6364
.simple {
6465
--border-width: 0px;
66+
--stroke-width: 0px;
6567
--shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
6668
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
6769
--shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
@@ -75,6 +77,7 @@
7577

7678
.brutalist.brutalist {
7779
--border-width: 2px;
80+
--stroke-width: 2px;
7881
--border: 0 0% 0%;
7982
--input: 0 0% 0%;
8083
--ring: 0 0% 0%;
@@ -91,6 +94,7 @@
9194

9295
.dark.brutalist.brutalist {
9396
--border-width: 2px;
97+
--stroke-width: 2px;
9498
--shadow-base: 0px 0px 0px 0 rgba(0, 0, 0, 1);
9599
--shadow-sm: 4px 4px 0px 0 rgba(0, 0, 0, 1);
96100
--shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);
@@ -104,6 +108,7 @@
104108

105109
.neumorphic.neumorphic {
106110
--border-width: 0px;
111+
--stroke-width: 0px;
107112
--background: 0 0 88%;
108113
--foreground: 240 5.9% 10%;
109114
--popover: 0 0 88%;
@@ -140,6 +145,7 @@
140145

141146
.dark.neumorphic.neumorphic {
142147
--border-width: 0px;
148+
--stroke-width: 0px;
143149
--background: 240 5.3% 26.1%;
144150
--foreground: 240 5.9% 90%;
145151
--popover: 240 5.3% 26.1%;

‎packages/kit-styled/src/templates/tailwind.config.cjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,12 @@ module.exports = {
113113
'2xl': 'var(--shadow-2xl)',
114114
inner: 'var(--shadow-inner)',
115115
},
116+
strokeWidth: {
117+
0: '0',
118+
base: 'var(--stroke-width)',
119+
1: 'calc(var(--stroke-width) + 1px)',
120+
2: 'calc(var(--stroke-width) + 2px)',
121+
},
116122
// EXTEND-END
117123
animation: {
118124
'accordion-down': '0.2s ease-out 0s 1 normal forwards accordion-open',

0 commit comments

Comments
 (0)