@solfacil/girassol 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/girassol.es.js +1257 -1546
  2. package/dist/girassol.umd.js +5 -5
  3. package/dist/style.css +1 -1
  4. package/dist/theme/safelist.d.ts +14 -0
  5. package/dist/theme/solfacil/colors.d.ts +6 -0
  6. package/dist/theme/solfacil/effects.d.ts +3 -3
  7. package/dist/theme/solfacil/index.d.ts +1 -0
  8. package/dist/theme/solfacil/spacing.d.ts +3 -0
  9. package/dist/theme/solfacil/typography.d.ts +2 -1
  10. package/dist/theme/solfacil/utilities.d.ts +1 -0
  11. package/dist/types/components/forms/button/Button.vue.d.ts +34 -30
  12. package/dist/types/index.d.ts +46 -34
  13. package/package.json +9 -9
  14. package/theme/safelist.ts +104 -0
  15. package/theme/solfacil/colors.ts +14 -5
  16. package/theme/solfacil/effects.ts +5 -5
  17. package/theme/solfacil/index.ts +2 -1
  18. package/theme/solfacil/spacing.ts +3 -0
  19. package/theme/solfacil/typography.ts +8 -7
  20. package/theme/solfacil/utilities.ts +239 -3
  21. package/vite.config.ts +1 -0
  22. package/windi.config.ts +9 -26
package/theme/solfacil/utilities.ts CHANGED
@@ -1,14 +1,250 @@
1
1
  import plugin from 'windicss/plugin'
2
2
 
3
+ export const componentTypos = plugin(({ addComponents, theme }) => {
4
+ const wrapperThemeType = (path: string) => `${theme(path)}`
5
+
6
+
7
+ const display = {
8
+ '.fonts-display-large': {
9
+ fontSize: wrapperThemeType('fontSize.3xl'),
10
+ fontFamily: wrapperThemeType('fontFamily.highlight'),
11
+ lineHeight: wrapperThemeType('lineHeight.xs'),
12
+ fontWeight: wrapperThemeType('fontWeight.medium'),
13
+ color: wrapperThemeType('colors.neutral.low.dark'),
14
+
15
+ '@media (min-width: 1024px)': {
16
+ fontSize: wrapperThemeType('fontSize.mega'),
17
+ },
18
+ },
19
+
20
+
21
+ '.fonts-display-medium': {
22
+ fontFamily: wrapperThemeType('fontFamily.highlight'),
23
+ fontSize: wrapperThemeType('fontSize.2xl'),
24
+ lineHeight: wrapperThemeType('lineHeight.xs'),
25
+ fontWeight: wrapperThemeType('fontWeight.medium'),
26
+ color: wrapperThemeType('colors.neutral.low.dark'),
27
+
28
+ '@media (min-width: 1024px)': {
29
+ fontSize: wrapperThemeType('fontSize.huge'),
30
+ },
31
+ },
32
+
33
+ '.fonts-display-small': {
34
+ fontFamily: wrapperThemeType('fontFamily.highlight'),
35
+ fontSize: wrapperThemeType('fontSize.xl'),
36
+ lineHeight: wrapperThemeType('lineHeight.xs'),
37
+ fontWeight: wrapperThemeType('fontWeight.medium'),
38
+ color: wrapperThemeType('colors.neutral.low.dark'),
39
+
40
+ '@media (min-width: 1024px)': {
41
+ fontSize: wrapperThemeType('fontSize.3xl'),
42
+ },
43
+ },
44
+
45
+ }
46
+
47
+ const heading = {
48
+ '.fonts-heading-h1': {
49
+ fontSize: wrapperThemeType('fontSize.md'),
50
+ fontFamily: wrapperThemeType('fontFamily.highlight'),
51
+ lineHeight: wrapperThemeType('lineHeight.xs'),
52
+ fontWeight: wrapperThemeType('fontWeight.medium'),
53
+ color: wrapperThemeType('colors.neutral.low.dark'),
54
+
55
+ '@media (min-width: 1024px)': {
56
+ fontSize: wrapperThemeType('fontSize.xl'),
57
+ },
58
+ },
59
+
60
+
61
+ '.fonts-heading-h2': {
62
+ fontFamily: wrapperThemeType('fontFamily.highlight'),
63
+ fontSize: wrapperThemeType('fontSize.sm'),
64
+ lineHeight: wrapperThemeType('lineHeight.xs'),
65
+ fontWeight: wrapperThemeType('fontWeight.medium'),
66
+ color: wrapperThemeType('colors.neutral.low.dark'),
67
+
68
+ '@media (min-width: 1024px)': {
69
+ fontSize: wrapperThemeType('fontSize.lg'),
70
+ },
71
+ },
72
+
73
+ '.fonts-heading-h3': {
74
+ fontFamily: wrapperThemeType('fontFamily.highlight'),
75
+ fontSize: wrapperThemeType('fontSize.xs'),
76
+ lineHeight: wrapperThemeType('lineHeight.xs'),
77
+ fontWeight: wrapperThemeType('fontWeight.medium'),
78
+ color: wrapperThemeType('colors.neutral.low.dark'),
79
+
80
+ '@media (min-width: 1024px)': {
81
+ fontSize: wrapperThemeType('fontSize.sm'),
82
+ },
83
+ },
84
+
85
+ '.fonts-heading-h4': {
86
+ fontFamily: wrapperThemeType('fontFamily.highlight'),
87
+ fontSize: wrapperThemeType('fontSize.2xs'),
88
+ lineHeight: wrapperThemeType('lineHeight.xs'),
89
+ fontWeight: wrapperThemeType('fontWeight.medium'),
90
+ color: wrapperThemeType('colors.neutral.low.dark'),
91
+
92
+ '@media (min-width: 1024px)': {
93
+ fontSize: wrapperThemeType('fontSize.2xs'),
94
+ },
95
+ },
96
+
97
+ }
98
+
99
+ const subtitle = {
100
+ '.fonts-subtitle-medium': {
101
+ fontSize: wrapperThemeType('fontSize.md'),
102
+ fontFamily: wrapperThemeType('fontFamily.base'),
103
+ lineHeight: wrapperThemeType('lineHeight.2xs'),
104
+ fontWeight: wrapperThemeType('fontWeight.regular'),
105
+ color: wrapperThemeType('colors.neutral.low.light'),
106
+
107
+ '@media (min-width: 1024px)': {
108
+ fontSize: wrapperThemeType('fontSize.xs'),
109
+ },
110
+ },
111
+
112
+
113
+ '.fonts-subtitle-small': {
114
+ fontSize: wrapperThemeType('fontSize.md'),
115
+ fontFamily: wrapperThemeType('fontFamily.base'),
116
+ lineHeight: wrapperThemeType('lineHeight.xs'),
117
+ fontWeight: wrapperThemeType('fontWeight.regular'),
118
+ color: wrapperThemeType('colors.neutral.low.light'),
119
+
120
+ '@media (min-width: 1024px)': {
121
+ fontSize: wrapperThemeType('fontSize.3xs'),
122
+ },
123
+ },
124
+ }
125
+
126
+ const body = {
127
+ '.fonts-body-large-regular': {
128
+ fontSize: wrapperThemeType('fontSize.2xs'),
129
+ fontFamily: wrapperThemeType('fontFamily.base'),
130
+ lineHeight: wrapperThemeType('lineHeight.xs'),
131
+ fontWeight: wrapperThemeType('fontWeight.bold'),
132
+ color: wrapperThemeType('colors.neutral.low.medium'),
133
+ },
134
+
135
+ '.fonts-body-larger-bold': {
136
+ fontSize: wrapperThemeType('fontSize.2xs'),
137
+ fontFamily: wrapperThemeType('fontFamily.base'),
138
+ lineHeight: wrapperThemeType('lineHeight.xs'),
139
+ fontWeight: wrapperThemeType('fontWeight.bold'),
140
+ color: wrapperThemeType('colors.neutral.low.medium'),
141
+ },
142
+
143
+ '.fonts-body-medium-regular': {
144
+ fontSize: wrapperThemeType('fontSize.3xs'),
145
+ fontFamily: wrapperThemeType('fontFamily.base'),
146
+ lineHeight: wrapperThemeType('lineHeight.xs'),
147
+ fontWeight: wrapperThemeType('fontWeight.regular'),
148
+ color: wrapperThemeType('colors.neutral.low.medium'),
149
+ },
150
+
151
+ '.fonts-body-medium-bold': {
152
+ fontSize: wrapperThemeType('fontSize.3xs'),
153
+ fontFamily: wrapperThemeType('fontFamily.base'),
154
+ lineHeight: wrapperThemeType('lineHeight.xs'),
155
+ fontWeight: wrapperThemeType('fontWeight.bold'),
156
+ color: wrapperThemeType('colors.neutral.low.medium'),
157
+ },
158
+
159
+ '.fonts-body-small-regular': {
160
+ fontSize: wrapperThemeType('fontSize.micro'),
161
+ fontFamily: wrapperThemeType('fontFamily.base'),
162
+ lineHeight: wrapperThemeType('lineHeight.xs'),
163
+ fontWeight: wrapperThemeType('fontWeight.regular'),
164
+ color: wrapperThemeType('colors.neutral.low.medium'),
165
+ },
166
+
167
+ '.fonts-body-small-bold': {
168
+ fontSize: wrapperThemeType('fontSize.micro'),
169
+ fontFamily: wrapperThemeType('fontFamily.base'),
170
+ lineHeight: wrapperThemeType('lineHeight.xs'),
171
+ fontWeight: wrapperThemeType('fontWeight.bold'),
172
+ color: wrapperThemeType('colors.neutral.low.medium'),
173
+ },
174
+ }
175
+
176
+ const link = {
177
+ '.fonts-link-inline-large': {
178
+ fontSize: wrapperThemeType('fontSize.2xs'),
179
+ fontFamily: wrapperThemeType('fontFamily.base'),
180
+ lineHeight: wrapperThemeType('lineHeight.xs'),
181
+ fontWeight: wrapperThemeType('fontWeight.regular'),
182
+ color: wrapperThemeType('colors.neutral.low.medium'),
183
+ textDecoration: 'underline',
184
+
185
+ '&:hover': {
186
+ color: wrapperThemeType('colors.neutral.low.dark'),
187
+ },
188
+ },
189
+
190
+ '.fonts-link-inline-medium': {
191
+ fontSize: wrapperThemeType('fontSize.3xs'),
192
+ fontFamily: wrapperThemeType('fontFamily.base'),
193
+ lineHeight: wrapperThemeType('lineHeight.xs'),
194
+ fontWeight: wrapperThemeType('fontWeight.regular'),
195
+ color: wrapperThemeType('colors.neutral.low.medium'),
196
+ textDecoration: 'underline',
197
+
198
+ '&:hover': {
199
+ color: wrapperThemeType('colors.neutral.low.dark'),
200
+ },
201
+ },
202
+
203
+ '.fonts-link-inline-small': {
204
+ fontSize: wrapperThemeType('fontSize.micro'),
205
+ fontFamily: wrapperThemeType('fontFamily.base'),
206
+ lineHeight: wrapperThemeType('lineHeight.xs'),
207
+ fontWeight: wrapperThemeType('fontWeight.regular'),
208
+ color: wrapperThemeType('colors.neutral.low.medium'),
209
+ textDecoration: 'underline',
210
+
211
+ '&:hover': {
212
+ color: wrapperThemeType('colors.neutral.low.dark'),
213
+ },
214
+ },
215
+ }
216
+
217
+ const overline = {
218
+ '.fonts-overline-small': {
219
+ fontSize: wrapperThemeType('fontSize.2xs'),
220
+ fontFamily: wrapperThemeType('fontFamily.base'),
221
+ lineHeight: wrapperThemeType('lineHeight.xs'),
222
+ fontWeight: wrapperThemeType('fontWeight.regular'),
223
+ color: wrapperThemeType('colors.neutral.low.medium'),
224
+ textTransform: 'uppercase',
225
+ },
226
+ }
227
+
228
+ addComponents({
229
+ ...display,
230
+ ...heading,
231
+ ...subtitle,
232
+ ...body,
233
+ ...link,
234
+ ...overline,
235
+ })
236
+ })
237
+
238
+
3
239
  export const outlinesForFocus = plugin(({ addUtilities }) => {
4
240
  addUtilities({
5
241
  '.outline-focused': {
6
- outline: '3px solid #292929',
7
- outlineOffset: '0px',
242
+ outline: '2px solid #8250DF',
243
+ outlineOffset: '2px',
8
244
  },
9
245
 
10
246
  '.outline-focused-invert': {
11
- outline: '3px solid #ffffff',
247
+ outline: '2px solid #ffffff',
12
248
  outlineOffset: '0px',
13
249
  },
14
250
  })
package/vite.config.ts CHANGED
@@ -54,6 +54,7 @@ export default defineConfig({
54
54
  Icons({
55
55
  autoInstall: true,
56
56
  compiler: 'vue3',
57
+ scale: 1.0,
57
58
  }),
58
59
 
59
60
  GirassolComponentsTypes(),
package/windi.config.ts CHANGED
@@ -4,9 +4,7 @@ import typography from 'windicss/plugin/typography'
4
4
 
5
5
  import { borders, colors, effects, misc, spacing, typography as typos, utilities } from './theme/solfacil/'
6
6
 
7
- function range(size: number, startAt = 1) {
8
- return Array.from(Array(size).keys()).map(i => i + startAt)
9
- }
7
+ import { safelist } from './theme/safelist'
10
8
 
11
9
  export default defineConfig({
12
10
  darkMode: 'class',
@@ -16,29 +14,13 @@ export default defineConfig({
16
14
  },
17
15
 
18
16
  safelist: [
19
- 'p-nano',
20
- 'p-micro',
21
- 'p-3xs',
22
- 'p-2xs',
23
- 'p-xs',
24
- 'p-sm',
25
- 'p-md',
26
- 'p-lg',
27
- 'm-nano',
28
- 'm-micro',
29
- 'm-3xs',
30
- 'm-2xs',
31
- 'm-xs',
32
- 'm-sm',
33
- 'm-md',
34
- 'm-lg',
35
- range(30).map(i => `grid-rows-${i}`),
36
- range(30).map(i => `grid-cols-${i}`),
37
- range(10).map(i => `gap-${i}`),
38
- range(30).map(i => `row-start-${i}`),
39
- range(30).map(i => `col-start-${i}`),
40
- range(30).map(i => `row-span-${i}`),
41
- range(30).map(i => `col-span-${i}`),
17
+ ...safelist({
18
+ activeSafeList: true,
19
+ data: {
20
+ colors,
21
+ spacing: spacing.space,
22
+ },
23
+ }),
42
24
  ],
43
25
 
44
26
  plugins: [
@@ -47,6 +29,7 @@ export default defineConfig({
47
29
  utilities.maxLines,
48
30
  utilities.debug,
49
31
  utilities.placeholder,
32
+ utilities.componentTypos,
50
33
  ],
51
34
 
52
35
  theme: {