Skip to content
This repository was archived by the owner on Sep 23, 2024. It is now read-only.

Commit 092700a

Browse files
andrmazandrmaz
committed
build(css): integrate vanilla-extract vars
1 parent 1476ac3 commit 092700a

30 files changed

+36982
-37198
lines changed

‎.storybook/preview.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
2-
import '../app/styles/global.css'
2+
import '../app/css/global.css'
3+
import '../app/themes/theme.css'
34

45
export const parameters = {
56
actions: {argTypesRegex: '^on[A-Z].*'},
@@ -11,4 +12,10 @@ export const parameters = {
1112
},
1213
}
1314

14-
export const decorators = [Story => <Story />]
15+
export const decorators = [
16+
Story => (
17+
<div id='root'>
18+
<Story />
19+
</div>
20+
),
21+
]

‎.vscode/settings.json

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"editor.fontFamily": "",
33
"cSpell.words": [
4+
"autodocs",
45
"cormorantinfant",
56
"docgen",
67
"Tablist",

‎app/components/Accordion/accordion.css.ts

+12-40
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
1-
import {style} from '@vanilla-extract/css'
2-
import {sprinkles} from '~/themes/sprinkles.css'
1+
import { style } from '@vanilla-extract/css'
2+
import { vars } from '../../themes/theme.css'
33

44
export const wrapper = style([
55
{
66
height: 'auto',
77
width: 'min(300px, 100%)',
88
border: 'solid 1px',
9-
},
10-
/* sprinkles({
11-
borderRadius: 'medium',
12-
borderColor: 'gray-300',
13-
}), */
14-
{
15-
borderRadius: 'var(--border-radius-medium)',
16-
borderColor: 'var(--color-backdrop)',
9+
borderRadius: vars.corner.medium,
10+
borderColor: vars.theme.backdrop,
1711
},
1812
])
1913
export const header = style({
@@ -23,50 +17,28 @@ export const header = style({
2317
export const button = style([
2418
{
2519
width: '100%',
26-
},
27-
/* sprinkles({
28-
backgroundColor: 'background',
29-
}), */
30-
{
31-
backgroundColor: 'var(--color-background)',
20+
backgroundColor: vars.theme.backdrop,
3221
},
3322
])
3423
export const title = style([
3524
{
3625
display: 'flex',
3726
alignItems: 'center',
3827
textTransform: 'capitalize',
39-
},
40-
/* sprinkles({
41-
fontSize: 'small',
42-
color: 'foreground',
43-
}), */
44-
{
45-
fontSize: 'var(--font-size-small)',
46-
color: 'var(--color-foreground)',
28+
fontSize: vars.size.small,
29+
color: vars.theme.foreground,
4730
},
4831
])
49-
/* export const container = sprinkles({
50-
paddingLeft: 'small',
51-
paddingRight: 'medium',
52-
}) */
5332
export const container = style({
54-
paddingLeft: 'var(--space-small)',
55-
paddingRight: 'var(--space-medium)',
33+
paddingLeft: vars.space.small,
34+
paddingRight: vars.space.medium,
5635
})
5736
export const content = style([
5837
{
5938
borderTop: 'solid 1px',
60-
},
61-
/* sprinkles({
62-
borderColor: 'gray-300',
63-
paddingTop: 'medium',
64-
paddingBottom: 'large',
65-
}), */
66-
{
67-
borderColor: 'var(--color-backdrop)',
68-
paddingTop: 'var(--space-medium)',
69-
paddingBottom: 'var(--space-large)',
39+
borderColor: vars.pallette['gray-300'],
40+
paddingTop: vars.space.medium,
41+
paddingBottom: vars.space.large,
7042
},
7143
])
7244
export const icon = style({

‎app/components/Breadcrumb/breadcrumb.css.ts

+11-24
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,25 @@
1-
import {style} from '@vanilla-extract/css'
2-
import {sprinkles} from '~/themes/sprinkles.css'
1+
import { style } from '@vanilla-extract/css'
2+
import { vars } from '../../themes/theme.css'
33

44
export const wrapper = style([
55
{
66
padding: '0.8em 1em',
77
border: '1px solid',
8-
/* selectors: {
9-
'aria-current=page': {
10-
color: 'var(--color-dark)',
11-
fontWeight: 'var(--font-weight-bold)',
12-
textDecoration: 'none',
8+
selectors: {
9+
[`&:has(aria-current=page)`]: {
10+
color: vars.pallette.dark,
11+
fontWeight: vars.weight.bold,
12+
textDecoration: 'none',
13+
},
1314
},
14-
}, */
15-
},
16-
/* sprinkles({
17-
backgroundColor: 'backdrop',
18-
borderColor: 'gray-700',
19-
borderRadius: 'medium',
20-
}), */
21-
{
22-
backgroundColor: 'var(--color-backdrop)',
23-
borderColor: 'var(--color-backdrop)',
24-
borderRadius: 'var(--space-medium)',
15+
backgroundColor: vars.theme.backdrop,
16+
borderColor: vars.pallette['gray-700'],
17+
borderRadius: vars.space.medium,
2518
},
2619
])
2720
export const list = style([
2821
{
2922
listStyle: 'none',
30-
},
31-
/* sprinkles({
32-
margin: 'none',
33-
paddingLeft: 'none',
34-
}), */
35-
{
3623
margin: 0,
3724
paddingLeft: 0,
3825
},

‎app/components/Button/button.css.ts

+5-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {style} from '@vanilla-extract/css'
2-
import {sprinkles} from '~/themes/sprinkles.css'
1+
import { style } from '@vanilla-extract/css'
2+
import { vars } from '../../themes/theme.css'
33

44
export const button = style([
55
{
@@ -11,15 +11,8 @@ export const button = style([
1111
display: 'inline-block',
1212
fontSize: 'var(--font-size)',
1313
padding: 'var(--padding)',
14-
},
15-
/* sprinkles({
16-
borderRadius: 'large',
17-
fontWeight: 'medium',
18-
lineHeight: 'normal',
19-
}), */
20-
{
21-
borderRadius: 'var(--space-large)',
22-
fontWeight: 'var(--font-size-medium)',
23-
lineHeight: 'var(--font-height-normal)',
14+
borderRadius: vars.space.large,
15+
fontWeight: vars.size.medium,
16+
lineHeight: vars.height.normal,
2417
},
2518
])

‎app/components/Chip/chip.css.ts

+6-14
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,16 @@
1-
import {style} from '@vanilla-extract/css'
2-
import {sprinkles} from '~/themes/sprinkles.css'
1+
import { style } from '@vanilla-extract/css'
2+
import { vars } from '../../themes/theme.css'
33

44
export const button = style([
55
{
66
width: '48px',
77
height: '44px',
88
display: 'grid',
99
placeItems: 'center',
10-
},
11-
/* sprinkles({
12-
backgroundColor: 'background',
13-
borderRadius: 'medium',
14-
boxShadow: 'small',
15-
padding: 'small',
16-
}), */
17-
{
18-
backgroundColor: 'var(--color-background)',
19-
borderRadius: 'var(--border-radius-medium)',
20-
boxShadow: 'var(--shadow-small)',
21-
padding: 'var(--space-small)',
10+
backgroundColor: vars.theme.background,
11+
borderRadius: vars.corner.medium,
12+
boxShadow: vars.shadow.small,
13+
padding: vars.space.small,
2214
},
2315
])
2416
export const icon = style({

‎app/components/Manager/manager.css.ts

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {style} from '@vanilla-extract/css'
2-
import {sprinkles} from '~/themes/sprinkles.css'
1+
import { style } from '@vanilla-extract/css'
2+
import { vars } from '../../themes/theme.css'
33

44
export const wrapper = style({
55
height: '100%',
@@ -11,9 +11,6 @@ export const header = style({
1111
display: 'flex',
1212
justifyContent: 'space-between',
1313
})
14-
/* export const title = sprinkles({
15-
marginBottom: 'medium',
16-
}) */
1714
export const title = style({
18-
marginBottom: 'var(--space-medium)',
15+
marginBottom: vars.space.medium,
1916
})

‎app/components/Modal/modal.css.ts

+8-31
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {style} from '@vanilla-extract/css'
2-
import {sprinkles} from '~/themes/sprinkles.css'
1+
import { style } from '@vanilla-extract/css'
2+
import { vars } from '../../themes/theme.css'
33

44
export const overlay = style({
55
position: 'fixed',
@@ -19,14 +19,8 @@ export const backdrop = style([
1919
bottom: 0,
2020
right: 0,
2121
animation: 'fadeIn',
22-
},
23-
/* sprinkles({
24-
backgroundColor: 'backdrop',
25-
animationDuration: 'medium',
26-
}), */
27-
{
28-
backgroundColor: 'var(--color-backdrop)',
29-
animationDuration: 'var(--duration-medium)',
22+
backgroundColor: vars.theme.backdrop,
23+
animationDuration: vars.duration.medium,
3024
},
3125
])
3226
export const content = style([
@@ -35,12 +29,7 @@ export const content = style([
3529
width: '25%',
3630
height: '100%',
3731
padding: '24px 32px',
38-
},
39-
/* sprinkles({
40-
backgroundColor: 'background',
41-
}), */
42-
{
43-
backgroundColor: 'var(--color-background)',
32+
backgroundColor: vars.theme.background,
4433
},
4534
])
4635
export const wrapper = style([
@@ -49,14 +38,8 @@ export const wrapper = style([
4938
display: 'flex',
5039
flexDirection: 'column',
5140
animation: 'fadeIn both',
52-
},
53-
/* sprinkles({
54-
animationDuration: 'long',
55-
animationDelay: 'short',
56-
}), */
57-
{
58-
animationDuration: 'var(--duration-long)',
59-
animationDelay: 'var(--duration-short)',
41+
animationDuration: vars.duration.long,
42+
animationDelay: vars.duration.short,
6043
},
6144
])
6245
export const button = style([
@@ -78,13 +61,7 @@ export const button = style([
7861
outline: 'none',
7962
},
8063
},
81-
},
82-
/* sprinkles({
83-
margin: 'none',
84-
padding: 'large',
85-
}), */
86-
{
8764
margin: 0,
88-
padding: 'var(--space-large)',
65+
padding: vars.space.large,
8966
},
9067
])

‎app/components/Slot/slot.css.ts

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
1-
import {style} from '@vanilla-extract/css'
2-
import {sprinkles} from '~/themes/sprinkles.css'
1+
import { style } from '@vanilla-extract/css'
2+
import { vars } from '../../themes/theme.css'
33

44
export const wrapper = style({
55
display: 'flex',
66
flexDirection: 'column',
77
})
8-
/* export const title = sprinkles({
9-
fontSize: 'small',
10-
}) */
118
export const title = style({
12-
fontSize: 'var(--font-size-small)',
9+
fontSize: vars.size.small,
1310
})
14-
/* export const date = sprinkles({
15-
fontSize: 'small',
16-
}) */
1711
export const date = style({
18-
fontSize: 'var(--font-size-small)',
12+
fontSize: vars.size.small,
1913
})

0 commit comments

Comments
 (0)