Skip to content

Commit f635973

Browse files
Afriq Yasin RamadhanAfriq Yasin Ramadhan
Afriq Yasin Ramadhan
authored and
Afriq Yasin Ramadhan
committed
feat(foundation): adjust brand, foregrounds, backgrounds, and borders semantic colors
1 parent d512272 commit f635973

File tree

3 files changed

+526
-266
lines changed

3 files changed

+526
-266
lines changed

‎packages/tailwind-preset/index.js

Lines changed: 93 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ module.exports = {
1111
action: theme.colors.red[40],
1212
accent: {
1313
DEFAULT : theme.colors.blue[40],
14+
subtle : theme.colors.blue[20],
1415
subtlest: theme.colors.blue.milk,
1516
},
1617
},
@@ -20,7 +21,8 @@ module.exports = {
2021
action: theme.colors.red[30],
2122
accent: {
2223
DEFAULT : theme.colors.blue[30],
23-
subtlest: theme.colors.blue.milk,
24+
subtle : theme.colors.blue[50],
25+
subtlest: theme.colors.blue[100],
2426
},
2527
},
2628
},
@@ -128,64 +130,86 @@ module.exports = {
128130
],
129131
},
130132
textColor: {
131-
'DEFAULT' : theme.colors.gray[100],
132-
'default' : theme.colors.gray[100],
133+
'DEFAULT' : theme.colors.gray[95],
134+
'default' : theme.colors.gray[95],
133135
'subtle' : theme.colors.gray[60],
134136
'subtlest': theme.colors.gray[35],
135-
'muted' : theme.colors.gray[25],
137+
'muted' : theme.colors.gray[20],
136138
'link' : {
137139
'DEFAULT' : theme.colors.blue[50],
138140
'on-emphasis': theme.colors.blue[20],
139141
},
140142
'on-emphasis' : theme.colors.gray[0],
141143
'state-emphasis': theme.colors.gray[0],
142-
'info' : theme.colors.blue[60],
143-
'success' : theme.colors.green[60],
144-
'warning' : theme.colors.orange[60],
145-
'danger' : theme.colors.red[60],
146-
'dark' : {
144+
'info' : {
145+
'DEFAULT' : theme.colors.blue[60],
146+
'on-emphasis': theme.colors.blue[30],
147+
},
148+
'success': {
149+
'DEFAULT' : theme.colors.green[60],
150+
'on-emphasis': theme.colors.green[30],
151+
},
152+
'warning': {
153+
'DEFAULT' : theme.colors.orange[70],
154+
'on-emphasis': theme.colors.orange[40],
155+
},
156+
'danger': {
157+
'DEFAULT' : theme.colors.red[60],
158+
'on-emphasis': theme.colors.red[30],
159+
},
160+
'dark': {
147161
'DEFAULT' : theme.colors.gray[0],
148162
'default' : theme.colors.gray[0],
149163
'subtle' : theme.colors.gray[40],
150164
'subtlest': theme.colors.gray[60],
151-
'muted' : theme.colors.gray[75],
165+
'muted' : theme.colors.gray[80],
152166
'link' : {
153-
'DEFAULT' : theme.colors.blue[30],
154-
'on-emphasis': theme.colors.blue[20],
167+
'DEFAULT' : theme.colors.blue[20],
168+
'on-emphasis': theme.colors.blue[50],
155169
},
156-
'on-emphasis' : theme.colors.gray[100],
170+
'on-emphasis' : theme.colors.gray[95],
157171
'state-emphasis': theme.colors.gray[0],
158-
'info' : theme.colors.blue[20],
159-
'success' : theme.colors.green[20],
160-
'warning' : theme.colors.orange[20],
161-
'danger' : theme.colors.red[20],
172+
'info' : {
173+
'DEFAULT' : theme.colors.blue[20],
174+
'on-emphasis': theme.colors.blue[30],
175+
},
176+
'success': {
177+
'DEFAULT' : theme.colors.green[20],
178+
'on-emphasis': theme.colors.green[30],
179+
},
180+
'warning': {
181+
'DEFAULT' : theme.colors.orange[20],
182+
'on-emphasis': theme.colors.orange[40],
183+
},
184+
'danger': {
185+
'DEFAULT' : theme.colors.red[20],
186+
'on-emphasis': theme.colors.red[30],
187+
},
162188
},
163189
},
164190
backgroundColor: {
165191
'inherit' : 'inherit',
166192
'current' : 'currentColor',
167193
'transparent': 'transparent',
168194
'base' : {
169-
DEFAULT: theme.colors.gray[5],
195+
DEFAULT: theme.colors.gray[10],
170196
black : theme.colors.base.black,
171197
white : theme.colors.base.white,
172198
},
199+
'ground' : theme.colors.gray[5],
173200
'DEFAULT': theme.colors.gray[0],
174-
'layer-1': theme.colors.gray[0],
175-
'layer-2': theme.colors.gray[0],
176201
'default': {
177202
DEFAULT: theme.colors.gray[0],
178-
alpha : `rgba(${theme.colors.gray[50]}, ${theme.opacity[5]})`,
203+
alpha : `rgba(${theme.colors.gray[100]}, ${theme.opacity[3]})`,
179204
},
180-
'inverse' : theme.colors.gray[100],
181-
'on-inverse': {
205+
'layer-1' : theme.colors.gray[0],
206+
'layer-2' : theme.colors.gray[0],
207+
'emphasis-alpha': `rgba(${theme.colors.gray[100]}, ${theme.opacity[5]})`,
208+
'inverse' : theme.colors.gray[95],
209+
'on-inverse' : {
182210
DEFAULT: theme.colors.gray[90],
183211
subtle : theme.colors.gray[80],
184212
},
185-
'subtle': {
186-
DEFAULT: theme.colors.gray[10],
187-
alpha : `rgba(${theme.colors.gray[80]}, ${theme.opacity[10]})`,
188-
},
189213
'info': {
190214
DEFAULT : theme.colors.blue[0],
191215
emphasis: theme.colors.blue[40],
@@ -204,21 +228,19 @@ module.exports = {
204228
},
205229
'dark': {
206230
'base' : theme.colors.gray[100],
231+
'ground' : theme.colors.gray[90],
207232
'DEFAULT': theme.colors.gray[95],
208-
'layer-1': theme.colors.gray[90],
209-
'layer-2': theme.colors.gray[85],
210233
'default': {
211234
DEFAULT: theme.colors.gray[95],
212-
alpha : `rgba(${theme.colors.gray[80]}, ${theme.opacity[10]})`,
235+
alpha : `rgba(${theme.colors.gray[0]}, ${theme.opacity[3]})`,
213236
},
214-
'inverse' : theme.colors.gray[0],
215-
'on-inverse': {
216-
DEFAULT: theme.colors.gray[10],
217-
subtle : theme.colors.gray[20],
218-
},
219-
'subtle': {
220-
DEFAULT: theme.colors.gray[90],
221-
alpha : `rgba(${theme.colors.gray[20]}, ${theme.opacity[10]})`,
237+
'layer-1' : theme.colors.gray[90],
238+
'layer-2' : theme.colors.gray[85],
239+
'emphasis-alpha': `rgba(${theme.colors.gray[0]}, ${theme.opacity[5]})`,
240+
'inverse' : theme.colors.gray[10],
241+
'on-inverse' : {
242+
DEFAULT: theme.colors.gray[5],
243+
subtle : theme.colors.gray[0],
222244
},
223245
'info': {
224246
DEFAULT : theme.colors.blue[90],
@@ -241,58 +263,68 @@ module.exports = {
241263
backgroundImage: { 'gradient-maroon-to-dark-red': 'linear-gradient(90deg, #37162E 0%, #482041 43.68%, #492143 55.03%, #52213F 64.67%, #58213C 76.02%, #912121 113.46%)' },
242264
fill : ({ theme }) => ({ ...theme('backgroundColor') }),
243265
borderColor : {
244-
DEFAULT: theme.colors.gray[15],
245-
default: {
246-
DEFAULT: theme.colors.gray[15],
266+
'subtlest': theme.colors.gray[5],
267+
'subtle' : {
268+
DEFAULT: theme.colors.gray[25],
247269
alpha : `rgba(${theme.colors.gray[100]}, ${theme.opacity[5]})`,
248270
},
249-
subtle: {
250-
DEFAULT: theme.colors.gray[25],
271+
'DEFAULT': theme.colors.gray[20],
272+
'default': {
273+
DEFAULT: theme.colors.gray[20],
251274
alpha : `rgba(${theme.colors.gray[100]}, ${theme.opacity[10]})`,
252275
},
253-
muted : theme.colors.gray[10],
254-
inverse: theme.colors.gray[100],
255-
info : {
276+
'emphasis': {
277+
DEFAULT: theme.colors.gray[30],
278+
alpha : `rgba(${theme.colors.gray[100]}, ${theme.opacity[20]})`,
279+
},
280+
'inverse' : theme.colors.gray[90],
281+
'on-inverse': theme.colors.gray[50],
282+
'info' : {
256283
DEFAULT : theme.colors.blue[10],
257284
emphasis: theme.colors.blue[40],
258285
},
259-
success: {
286+
'success': {
260287
DEFAULT : theme.colors.green[10],
261288
emphasis: theme.colors.green[40],
262289
},
263-
warning: {
290+
'warning': {
264291
DEFAULT : theme.colors.orange[10],
265292
emphasis: theme.colors.orange[40],
266293
},
267-
danger: {
294+
'danger': {
268295
DEFAULT : theme.colors.red[10],
269296
emphasis: theme.colors.red[40],
270297
},
271-
dark: {
272-
DEFAULT: theme.colors.gray[90],
273-
default: {
274-
DEFAULT: theme.colors.gray[90],
298+
'dark': {
299+
'subtlest': theme.colors.gray[90],
300+
'DEFAULT' : theme.colors.gray[85],
301+
'subtle' : {
302+
DEFAULT: theme.colors.gray[80],
275303
alpha : `rgba(${theme.colors.gray[0]}, ${theme.opacity[5]})`,
276304
},
277-
subtle: {
278-
DEFAULT: theme.colors.gray[80],
305+
'default': {
306+
DEFAULT: theme.colors.gray[85],
279307
alpha : `rgba(${theme.colors.gray[0]}, ${theme.opacity[10]})`,
280308
},
281-
muted : theme.colors.gray[85],
282-
inverse: theme.colors.gray[0],
283-
info : {
309+
'emphasis': {
310+
DEFAULT: theme.colors.gray[30],
311+
alpha : `rgba(${theme.colors.gray[0]}, ${theme.opacity[20]})`,
312+
},
313+
'inverse' : theme.colors.gray[10],
314+
'on-inverse': theme.colors.gray[40],
315+
'info' : {
284316
DEFAULT : theme.colors.blue[100],
285317
emphasis: theme.colors.blue[30],
286318
},
287-
success: {
319+
'success': {
288320
DEFAULT : theme.colors.green[100],
289321
emphasis: theme.colors.green[30],
290322
},
291-
warning: {
323+
'warning': {
292324
DEFAULT : theme.colors.orange[100],
293325
emphasis: theme.colors.orange[30],
294326
},
295-
danger: {
327+
'danger': {
296328
DEFAULT : theme.colors.red[100],
297329
emphasis: theme.colors.red[30],
298330
},

‎src/components/text/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Used for the title of any sub-sections
1818
Default style of `Text` is a body text
1919

2020
<preview>
21-
<p-text class="bg-brand-accent">The quick brown fox jumps over the lazy dog.</p-text>
21+
<p-text class="border bg-default border-default-alpha">The quick brown fox jumps over the lazy dog.</p-text>
2222
</preview>
2323

2424
```vue

0 commit comments

Comments
 (0)