Skip to content

Commit 1ccc542

Browse files
bre97-webbre97-web
committed
chore: split provide* into src/internal
1 parent f3603ba commit 1ccc542

13 files changed

+888
-828
lines changed

‎src/tokens/provider.interface.ts renamed to ‎src/declaration/provider.interface.ts

File renamed without changes.

‎src/tokens/index.ts

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11

2+
/**
3+
* provide*()
4+
*/
25
export * from './provide-all'
36
export * from './provide-color'
47
export * from './provide-elevation'
58
export * from './provide-motion'
69
export * from './provide-shape'
7-
export * from './provide-typography'
10+
export * from './provide-typography'
11+
12+
export * from './internal/color'
13+
export * from './internal/elevation'
14+
export * from './internal/motion'
15+
export * from './internal/shape'
16+
export * from './internal/typography'
17+

‎src/tokens/internal/color.ts

+365
Large diffs are not rendered by default.

‎src/tokens/internal/elevation.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import plugin from "tailwindcss/plugin";
2+
import type { IProvider } from "./provider.interface";
3+
4+
export type TElevationProviderConstructorParams = {
5+
readonly shadowToken?: string
6+
}
7+
8+
export class ElevationProvider implements IProvider {
9+
10+
public shadowToken
11+
12+
constructor(params: TElevationProviderConstructorParams) {
13+
this.shadowToken = params.shadowToken
14+
}
15+
16+
public getPlugin() {
17+
return plugin(({ addUtilities }) => {
18+
addUtilities({
19+
'.elevation-none': {
20+
'box-shadow': `none`,
21+
},
22+
'.elevation-1': {
23+
'box-shadow': `rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.14)) 0px 1px 1px 0px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.12)) 0px 1px 3px 0px`,
24+
},
25+
'.elevation-2': {
26+
'box-shadow': `rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.14)) 0px 3px 4px 0px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.12)) 0px 1px 8px 0px`,
27+
},
28+
'.elevation-3': {
29+
'box-shadow': `rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.14)) 0px 6px 10px 0px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.12)) 0px 1px 18px 0px`,
30+
},
31+
'.elevation-4': {
32+
'box-shadow': `rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.14)) 0px 8px 10px 1px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.12)) 0px 3px 14px 2px`,
33+
},
34+
'.elevation-5': {
35+
'box-shadow': `rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.14)) 0px 12px 17px 2px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.12)) 0px 5px 22px 4px`,
36+
},
37+
})
38+
})
39+
}
40+
}

‎src/tokens/internal/motion.ts

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import plugin from 'tailwindcss/plugin'
2+
import { type IProvider } from '../../declaration/provider.interface'
3+
4+
export type TMotionProviderConstructorParams = {
5+
readonly prefix?: string
6+
}
7+
8+
export class MotionProvider implements IProvider {
9+
public prefix
10+
11+
constructor(params: TMotionProviderConstructorParams) {
12+
this.prefix = params.prefix
13+
}
14+
15+
public getPlugin() {
16+
return plugin(({ addUtilities }) => {
17+
addUtilities({
18+
'.transition-easing-emphasized': {
19+
'transition-timing-function': `var(--${this.prefix}-easing-emphasized, ease-in-out)`,
20+
},
21+
'.animation-easing-emphasized': {
22+
'animation-timing-function': `var(--${this.prefix}-easing-emphasized, ease-in-out)`,
23+
},
24+
'.transition-easing-emphasized-decelerate': {
25+
'transition-timing-function': `var(--${this.prefix}-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1.0))`,
26+
},
27+
'.animation-easing-emphasized-decelerate': {
28+
'animation-timing-function': `var(--${this.prefix}-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1.0))`,
29+
},
30+
'.transition-easing-emphasized-accelerate': {
31+
'transition-timing-function': `var(--${this.prefix}-easing-emphasized-accelerate, cubic-bezier(0.3, 0.0, 0.8, 0.15))`,
32+
},
33+
'.animation-easing-emphasized-accelerate': {
34+
'animation-timing-function': `var(--${this.prefix}-easing-emphasized-accelerate, cubic-bezier(0.3, 0.0, 0.8, 0.15))`,
35+
},
36+
37+
'.transition-easing-standard': {
38+
'transition-timing-function': `var(--${this.prefix}-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0))`,
39+
},
40+
'.animation-easing-standard': {
41+
'animation-timing-function': `var(--${this.prefix}-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0))`,
42+
},
43+
'.transition-easing-standard-decelerate': {
44+
'transition-timing-function': `var(--${this.prefix}-easing-standard-decelerate, cubic-bezier(0, 0, 0, 1))`,
45+
},
46+
'.animation-easing-standard-decelerate': {
47+
'animation-timing-function': `var(--${this.prefix}-easing-standard-decelerate, cubic-bezier(0, 0, 0, 1))`,
48+
},
49+
'.transition-easing-standard-accelerate': {
50+
'transition-timing-function': `var(--${this.prefix}-easing-standard-accelerate, cubic-bezier(0.3, 0, 1, 1))`,
51+
},
52+
'.animation-easing-standard-accelerate': {
53+
'animation-timing-function': `var(--${this.prefix}-easing-standard-accelerate, cubic-bezier(0.3, 0, 1, 1))`,
54+
},
55+
})
56+
57+
addUtilities({
58+
/**
59+
* Begin and end on screen
60+
*/
61+
'.transition-duration-emphasized': {
62+
'transition-duration': '500ms',
63+
},
64+
'.animation-duration-emphasized': {
65+
'animation-duration': '500ms',
66+
},
67+
/**
68+
* Enter the screen
69+
*/
70+
'.transition-duration-emphasized-decelerate': {
71+
'transition-duration': '400ms',
72+
},
73+
'.animation-duration-emphasized-decelerate': {
74+
'animation-duration': '400ms',
75+
},
76+
/**
77+
* Exit the screen
78+
*/
79+
'.transition-duration-emphasized-accelerate': {
80+
'transition-duration': '200ms',
81+
},
82+
'.animation-duration-emphasized-accelerate': {
83+
'animation-duration': '200ms',
84+
},
85+
/**
86+
* Begin and end on screen
87+
*/
88+
'.transition-duration-standard': {
89+
'transition-duration': '300ms',
90+
},
91+
'.animation-duration-standard': {
92+
'animation-duration': '300ms',
93+
},
94+
/**
95+
* Enter the screen
96+
*/
97+
'.transition-duration-standard-decelerate': {
98+
'transition-duration': '250ms',
99+
},
100+
'.animation-duration-standard-decelerate': {
101+
'animation-duration': '250ms',
102+
},
103+
/**
104+
* Exit the screen
105+
*/
106+
'.transition-duration-standard-accelerate': {
107+
'transition-duration': '200ms',
108+
},
109+
'.animation-duration-standard-accelerate': {
110+
'animation-duration': '200ms',
111+
},
112+
})
113+
})
114+
}
115+
}

‎src/tokens/internal/shape.ts

+172
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
import plugin from 'tailwindcss/plugin'
2+
import { type IProvider } from '../../declaration/provider.interface'
3+
4+
export type TShapeProviderConstructorParams = {
5+
readonly prefix?: string
6+
readonly defaultUnit?: string
7+
}
8+
9+
export class ShapeProvider implements IProvider {
10+
public prefix
11+
public defaultUnit
12+
13+
constructor(params: TShapeProviderConstructorParams) {
14+
this.prefix = params.prefix
15+
this.defaultUnit = params.defaultUnit
16+
}
17+
18+
public getPlugin() {
19+
return plugin(({ addUtilities }) => {
20+
addUtilities({
21+
'.shape-full': {
22+
'border-radius': `calc(var(--${this.prefix}-full, 9999px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
23+
},
24+
'.shape-full-t': {
25+
'border-top-left-radius': `calc(var(--${this.prefix}-full, 9999px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
26+
'border-top-right-radius': `calc(var(--${this.prefix}-full, 9999px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
27+
},
28+
'.shape-full-tl': {
29+
'border-top-left-radius': `calc(var(--${this.prefix}-full, 9999px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
30+
},
31+
'.shape-full-tr': {
32+
'border-top-right-radius': `calc(var(--${this.prefix}-full, 9999px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
33+
},
34+
'.shape-full-b': {
35+
'border-bottom-left-radius': `calc(var(--${this.prefix}-full, 9999px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
36+
'border-bottom-right-radius': `calc(var(--${this.prefix}-full, 9999px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
37+
},
38+
'.shape-full-bl': {
39+
'border-bottom-left-radius': `calc(var(--${this.prefix}-full, 9999px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
40+
},
41+
'.shape-full-br': {
42+
'border-bottom-right-radius': `calc(var(--${this.prefix}-full, 9999px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
43+
},
44+
45+
'.shape-extra': {
46+
'border-radius': `calc(var(--${this.prefix}-extra, 28px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
47+
},
48+
'.shape-extra-t': {
49+
'border-top-left-radius': `calc(var(--${this.prefix}-extra, 28px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
50+
'border-top-right-radius': `calc(var(--${this.prefix}-extra, 28px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
51+
},
52+
'.shape-extra-tl': {
53+
'border-top-left-radius': `calc(var(--${this.prefix}-extra, 28px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
54+
},
55+
'.shape-extra-tr': {
56+
'border-top-right-radius': `calc(var(--${this.prefix}-extra, 28px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
57+
},
58+
'.shape-extra-b': {
59+
'border-bottom-left-radius': `calc(var(--${this.prefix}-extra, 28px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
60+
'border-bottom-right-radius': `calc(var(--${this.prefix}-extra, 28px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
61+
},
62+
'.shape-extra-bl': {
63+
'border-bottom-left-radius': `calc(var(--${this.prefix}-extra, 28px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
64+
},
65+
'.shape-extra-br': {
66+
'border-bottom-right-radius': `calc(var(--${this.prefix}-extra, 28px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
67+
},
68+
69+
'.shape-large': {
70+
'border-radius': `calc(var(--${this.prefix}-large, 16px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
71+
},
72+
'.shape-large-t': {
73+
'border-top-left-radius': `calc(var(--${this.prefix}-large, 16px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
74+
'border-top-right-radius': `calc(var(--${this.prefix}-large, 16px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
75+
},
76+
'.shape-large-tl': {
77+
'border-top-left-radius': `calc(var(--${this.prefix}-large, 16px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
78+
},
79+
'.shape-large-tr': {
80+
'border-top-right-radius': `calc(var(--${this.prefix}-large, 16px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
81+
},
82+
'.shape-large-b': {
83+
'border-bottom-left-radius': `calc(var(--${this.prefix}-large, 16px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
84+
'border-bottom-right-radius': `calc(var(--${this.prefix}-large, 16px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
85+
},
86+
'.shape-large-bl': {
87+
'border-bottom-left-radius': `calc(var(--${this.prefix}-large, 16px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
88+
},
89+
'.shape-large-br': {
90+
'border-bottom-right-radius': `calc(var(--${this.prefix}-large, 16px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
91+
},
92+
93+
'.shape-medium': {
94+
'border-radius': `calc(var(--${this.prefix}-medium, 12px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
95+
},
96+
'.shape-medium-t': {
97+
'border-top-left-radius': `calc(var(--${this.prefix}-medium, 12px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
98+
'border-top-right-radius': `calc(var(--${this.prefix}-medium, 12px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
99+
},
100+
'.shape-medium-tl': {
101+
'border-top-left-radius': `calc(var(--${this.prefix}-medium, 12px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
102+
},
103+
'.shape-medium-tr': {
104+
'border-top-right-radius': `calc(var(--${this.prefix}-medium, 12px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
105+
},
106+
'.shape-medium-b': {
107+
'border-bottom-left-radius': `calc(var(--${this.prefix}-medium, 12px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
108+
'border-bottom-right-radius': `calc(var(--${this.prefix}-medium, 12px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
109+
},
110+
'.shape-medium-bl': {
111+
'border-bottom-left-radius': `calc(var(--${this.prefix}-medium, 12px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
112+
},
113+
'.shape-medium-br': {
114+
'border-bottom-right-radius': `calc(var(--${this.prefix}-medium, 12px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
115+
},
116+
117+
'.shape-small': {
118+
'border-radius': `calc(var(--${this.prefix}-small, 8px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
119+
},
120+
'.shape-small-t': {
121+
'border-top-left-radius': `calc(var(--${this.prefix}-small, 8px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
122+
'border-top-right-radius': `calc(var(--${this.prefix}-small, 8px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
123+
},
124+
'.shape-small-tl': {
125+
'border-top-left-radius': `calc(var(--${this.prefix}-small, 8px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
126+
},
127+
'.shape-small-tr': {
128+
'border-top-right-radius': `calc(var(--${this.prefix}-small, 8px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
129+
},
130+
'.shape-small-b': {
131+
'border-bottom-left-radius': `calc(var(--${this.prefix}-small, 8px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
132+
'border-bottom-right-radius': `calc(var(--${this.prefix}-small, 8px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
133+
},
134+
'.shape-small-bl': {
135+
'border-bottom-left-radius': `calc(var(--${this.prefix}-small, 8px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
136+
},
137+
'.shape-small-br': {
138+
'border-bottom-right-radius': `calc(var(--${this.prefix}-small, 8px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
139+
},
140+
141+
'.shape-extra-small': {
142+
'border-radius': `calc(var(--${this.prefix}-extra-small, 4px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
143+
},
144+
'.shape-extra-small-t': {
145+
'border-top-left-radius': `calc(var(--${this.prefix}-extra-small, 4px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
146+
'border-top-right-radius': `calc(var(--${this.prefix}-extra-small, 4px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
147+
},
148+
'.shape-extra-small-tl': {
149+
'border-top-left-radius': `calc(var(--${this.prefix}-extra-small, 4px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
150+
},
151+
'.shape-extra-small-tr': {
152+
'border-top-right-radius': `calc(var(--${this.prefix}-extra-small, 4px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
153+
},
154+
'.shape-extra-small-b': {
155+
'border-bottom-left-radius': `calc(var(--${this.prefix}-extra-small, 4px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
156+
'border-bottom-right-radius': `calc(var(--${this.prefix}-extra-small, 4px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
157+
},
158+
'.shape-extra-small-bl': {
159+
'border-bottom-left-radius': `calc(var(--${this.prefix}-extra-small, 4px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
160+
},
161+
'.shape-extra-small-br': {
162+
'border-bottom-right-radius': `calc(var(--${this.prefix}-extra-small, 4px) * var(--${this.prefix}-unit, ${this.defaultUnit}))`,
163+
},
164+
165+
'.shape-none': {
166+
'border-radius': `var(--${this.prefix}-none, none)`,
167+
},
168+
})
169+
})
170+
}
171+
172+
}

0 commit comments

Comments
 (0)