Skip to content

Commit d635ca8

Browse files
Afriq Yasin RamadhanAfriq Yasin Ramadhan
Afriq Yasin Ramadhan
authored and
Afriq Yasin Ramadhan
committed
feat(foundation): adjust component colors with latest color pallete
1 parent f635973 commit d635ca8

File tree

47 files changed

+161
-159
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+161
-159
lines changed

‎packages/tailwind-preset/index.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -368,22 +368,24 @@ module.exports = {
368368
'2xl': [`0 20px 40px -8px rgba(${theme.colors.gray[100]}, ${theme.opacity[25]})`],
369369
},
370370
outlineColor: {
371-
DEFAULT : theme.colors.gray[15],
372-
default : theme.colors.gray[15],
371+
DEFAULT : theme.colors.gray[5],
372+
default : theme.colors.gray[5],
373373
inherit : 'inherit',
374374
current : 'currentColor',
375375
transparent: 'transparent',
376-
info : theme.colors.blue[40],
377-
success : theme.colors.green[40],
378-
warning : theme.colors.orange[40],
379-
danger : theme.colors.red[40],
376+
accent : theme.colors.blue[10],
377+
info : theme.colors.blue[10],
378+
success : theme.colors.green[10],
379+
warning : theme.colors.orange[10],
380+
danger : theme.colors.red[10],
380381
dark : {
381-
DEFAULT: theme.colors.gray[90],
382-
default: theme.colors.gray[90],
383-
info : theme.colors.blue[30],
384-
success: theme.colors.green[30],
385-
warning: theme.colors.orange[30],
386-
danger : theme.colors.red[30],
382+
DEFAULT: theme.colors.gray[80],
383+
default: theme.colors.gray[80],
384+
accent : theme.colors.blue[70],
385+
info : theme.colors.blue[70],
386+
success: theme.colors.green[80],
387+
warning: theme.colors.orange[80],
388+
danger : theme.colors.red[70],
387389
},
388390
},
389391
ringColor: ({ theme }) => ({ ...theme('borderColor') }),

‎src/.vitepress/theme/css/custom.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -230,8 +230,8 @@
230230
}
231231

232232
th {
233-
@apply text-xs bg-base;
234-
@apply dark:bg-dark-base;
233+
@apply text-xs bg-ground;
234+
@apply dark:bg-dark-ground;
235235
}
236236

237237
td {

‎src/components/avatar/Avatar.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ onMounted(() => {
138138

139139
<style lang="postcss">
140140
.avatar {
141-
@apply inline-flex items-center justify-center overflow-hidden text-subtle bg-subtle;
142-
@apply dark:text-dark-subtle dark:bg-dark-subtle;
141+
@apply inline-flex items-center justify-center overflow-hidden text-subtle bg-base;
142+
@apply dark:text-dark-subtle dark:bg-dark-base;
143143
144144
&:not(&--square) {
145145
@apply rounded-full;

‎src/components/badge/Badge.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ const classNames = computed(() => {
4848
* Set global style
4949
* of badge
5050
*/
51-
--p-color-primary-light: lighten(theme(colors.brand.accent), 40%);
52-
--p-color-dark-primary-light: darken(theme(colors.dark.brand.accent), 40%);
51+
--p-color-primary-light: lighten(theme(colors.brand.accent.DEFAULT), 40%);
52+
--p-color-dark-primary-light: darken(theme(colors.dark.brand.accent.DEFAULT), 40%);
5353
5454
@apply inline-block font-bold text-xs px-2 py-0.5 rounded-full space-x-1 align-middle;
5555
@@ -161,8 +161,8 @@ const classNames = computed(() => {
161161
&--variant-light {
162162
&.badge {
163163
&--default {
164-
--p-bg-variant-light: theme(backgroundColor.subtle.alpha);
165-
--p-bg-dark-variant-light: theme(backgroundColor.dark.subtle.alpha);
164+
--p-bg-variant-light: theme(backgroundColor.emphasis-alpha);
165+
--p-bg-dark-variant-light: theme(backgroundColor.dark.emphasis-alpha);
166166
@apply bg-[color:var(--p-bg-variant-light)];
167167
@apply dark:bg-[color:var(--p-bg-dark-variant-light)];
168168
}

‎src/components/badge/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,8 +165,8 @@ Use this variable for [level color](/styleguide/badge/#level-color-customizable-
165165

166166
### `.badge.badge--variant-light.badge--default`
167167
```sass
168-
--p-bg-variant-light: theme(backgroundColor.subtle.alpha);
169-
--p-bg-dark-variant-light: theme(backgroundColor.dark.subtle.alpha);
168+
--p-bg-variant-light: theme(backgroundColor.emphasis-alpha);
169+
--p-bg-dark-variant-light: theme(backgroundColor.dark.emphasis-alpha);
170170
```
171171

172172
## API

‎src/components/banner/Banner.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,8 @@ defineSlots<{
167167
}
168168
169169
&&--info {
170-
@apply bg-base;
171-
@apply dark:bg-dark-base;
170+
@apply bg-ground;
171+
@apply dark:bg-dark-ground;
172172
173173
.banner__icon {
174174
@apply text-info;

‎src/components/button/Button.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -230,8 +230,8 @@ defineSlots<{
230230
231231
&.btn {
232232
&--default {
233-
@apply bg-default-alpha focus:bg-subtle-alpha active:bg-subtle-alpha hover:text-default focus:text-default;
234-
@apply dark:bg-dark-default-alpha focus:dark:bg-dark-subtle-alpha active:dark:bg-dark-subtle-alpha hover:dark:text-dark-default focus:dark:text-dark-default;
233+
@apply bg-default-alpha focus:bg-default-alpha active:bg-default-alpha hover:text-default focus:text-default;
234+
@apply dark:bg-dark-default-alpha focus:dark:bg-dark-default-alpha active:dark:bg-dark-default-alpha hover:dark:text-dark-default focus:dark:text-dark-default;
235235
236236
/* Border */
237237
@apply text-default border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
@@ -367,12 +367,12 @@ defineSlots<{
367367
* Button input variant
368368
*/
369369
&&--variant-input {
370-
@apply border border-solid border-muted text-subtle font-normal bg-default hover:border-subtle focus:border-subtle active:outline-default;
371-
@apply dark:border-dark-muted dark:text-dark-subtle dark:bg-dark-default hover:dark:border-dark-subtle focus:dark:border-dark-subtle active:dark:outline-dark-default;
370+
@apply border border-solid border-subtlest text-subtle font-normal bg-default hover:border-subtle focus:border-subtle active:outline-default;
371+
@apply dark:border-dark-subtlest dark:text-dark-subtle dark:bg-dark-default hover:dark:border-dark-subtle focus:dark:border-dark-subtle active:dark:outline-dark-default;
372372
373373
.state--disabled & {
374-
@apply bg-subtle border-muted pointer-events-none text-muted;
375-
@apply dark:bg-dark-subtle dark:border-dark-muted dark:text-dark-muted;
374+
@apply bg-base border-subtlest pointer-events-none text-muted;
375+
@apply dark:bg-dark-base dark:border-dark-subtlest dark:text-dark-muted;
376376
}
377377
378378
.state--error & {

‎src/components/card/Card.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -278,8 +278,8 @@ defineSlots<{
278278
* when Card are readonly
279279
*/
280280
&&--readonly {
281-
@apply bg-base cursor-not-allowed;
282-
@apply dark:bg-dark-base;
281+
@apply bg-ground cursor-not-allowed;
282+
@apply dark:bg-dark-ground;
283283
}
284284
285285
/**
@@ -338,8 +338,8 @@ defineSlots<{
338338
339339
&&--readonly,
340340
&.card--readonly {
341-
@apply bg-base cursor-not-allowed;
342-
@apply dark:bg-dark-base;
341+
@apply bg-ground cursor-not-allowed;
342+
@apply dark:bg-dark-ground;
343343
}
344344
345345
&.card--disabled {

‎src/components/checkbox/Checkbox.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -191,8 +191,8 @@ defineSlots<{
191191
192192
&:not(.checkbox--checked, .checkbox--indeterminate) {
193193
.checkbox__icon {
194-
@apply bg-subtle border-subtle;
195-
@apply dark:bg-dark-subtle dark:border-dark-subtle;
194+
@apply bg-base border-subtle;
195+
@apply dark:bg-dark-base dark:border-dark-subtle;
196196
197197
> svg {
198198
@apply fill-subtle;

‎src/components/contextual-bar/ContextualBar.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -402,8 +402,8 @@ defineSlots<{
402402
* and neutral
403403
*/
404404
&&--info {
405-
@apply bg-base text-default;
406-
@apply dark:bg-dark-base dark:text-dark-default;
405+
@apply bg-ground text-default;
406+
@apply dark:bg-dark-ground dark:text-dark-default;
407407
408408
.contextual-bar {
409409
&__icon {

0 commit comments

Comments
 (0)