feat(foundation): adjust component colors with latest color pallete

Author: Afriq Yasin Ramadhan

packages/tailwind-preset/index.js

@@ -368,22 +368,24 @@ module.exports = {
         '2xl': [`0 20px 40px -8px rgba(${theme.colors.gray[100]}, ${theme.opacity[25]})`],
       },
       outlineColor: {
-        DEFAULT    : theme.colors.gray[15],
-        default    : theme.colors.gray[15],
+        DEFAULT    : theme.colors.gray[5],
+        default    : theme.colors.gray[5],
         inherit    : 'inherit',
         current    : 'currentColor',
         transparent: 'transparent',
-        info       : theme.colors.blue[40],
-        success    : theme.colors.green[40],
-        warning    : theme.colors.orange[40],
-        danger     : theme.colors.red[40],
+        accent     : theme.colors.blue[10],
+        info       : theme.colors.blue[10],
+        success    : theme.colors.green[10],
+        warning    : theme.colors.orange[10],
+        danger     : theme.colors.red[10],
         dark       : {
-          DEFAULT: theme.colors.gray[90],
-          default: theme.colors.gray[90],
-          info   : theme.colors.blue[30],
-          success: theme.colors.green[30],
-          warning: theme.colors.orange[30],
-          danger : theme.colors.red[30],
+          DEFAULT: theme.colors.gray[80],
+          default: theme.colors.gray[80],
+          accent : theme.colors.blue[70],
+          info   : theme.colors.blue[70],
+          success: theme.colors.green[80],
+          warning: theme.colors.orange[80],
+          danger : theme.colors.red[70],
         },
       },
       ringColor: ({ theme }) => ({ ...theme('borderColor') }),

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

@@ -230,8 +230,8 @@
     }
 
     th {
-      @apply text-xs bg-base;
-      @apply dark:bg-dark-base;
+      @apply text-xs bg-ground;
+      @apply dark:bg-dark-ground;
     }
 
     td {

src/components/avatar/Avatar.vue

@@ -138,8 +138,8 @@ onMounted(() => {
 
 <style lang="postcss">
 .avatar {
-  @apply inline-flex items-center justify-center overflow-hidden text-subtle bg-subtle;
-  @apply dark:text-dark-subtle dark:bg-dark-subtle;
+  @apply inline-flex items-center justify-center overflow-hidden text-subtle bg-base;
+  @apply dark:text-dark-subtle dark:bg-dark-base;
 
   &:not(&--square) {
     @apply rounded-full;

src/components/badge/Badge.vue

@@ -48,8 +48,8 @@ const classNames = computed(() => {
   * Set global style
   * of badge
   */
-  --p-color-primary-light: lighten(theme(colors.brand.accent), 40%);
-  --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent), 40%);
+  --p-color-primary-light: lighten(theme(colors.brand.accent.DEFAULT), 40%);
+  --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent.DEFAULT), 40%);
 
   @apply inline-block font-bold text-xs px-2 py-0.5 rounded-full space-x-1 align-middle;
 
@@ -161,8 +161,8 @@ const classNames = computed(() => {
   &--variant-light {
     &.badge {
       &--default {
-        --p-bg-variant-light: theme(backgroundColor.subtle.alpha);
-        --p-bg-dark-variant-light: theme(backgroundColor.dark.subtle.alpha);
+        --p-bg-variant-light: theme(backgroundColor.emphasis-alpha);
+        --p-bg-dark-variant-light: theme(backgroundColor.dark.emphasis-alpha);
         @apply bg-[color:var(--p-bg-variant-light)];
         @apply dark:bg-[color:var(--p-bg-dark-variant-light)];
       }

src/components/badge/index.md

@@ -165,8 +165,8 @@ Use this variable for [level color](/styleguide/badge/#level-color-customizable-
 
 ### `.badge.badge--variant-light.badge--default`
 ```sass
---p-bg-variant-light: theme(backgroundColor.subtle.alpha);
---p-bg-dark-variant-light: theme(backgroundColor.dark.subtle.alpha);
+--p-bg-variant-light: theme(backgroundColor.emphasis-alpha);
+--p-bg-dark-variant-light: theme(backgroundColor.dark.emphasis-alpha);
 ```
 
 ## API

src/components/banner/Banner.vue

@@ -167,8 +167,8 @@ defineSlots<{
   }
 
   &&--info {
-    @apply bg-base;
-    @apply dark:bg-dark-base;
+    @apply bg-ground;
+    @apply dark:bg-dark-ground;
 
     .banner__icon {
       @apply text-info;

src/components/button/Button.vue

@@ -230,8 +230,8 @@ defineSlots<{
 
     &.btn {
       &--default {
-        @apply bg-default-alpha focus:bg-subtle-alpha active:bg-subtle-alpha hover:text-default focus:text-default;
-        @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;
+        @apply bg-default-alpha focus:bg-default-alpha active:bg-default-alpha hover:text-default focus:text-default;
+        @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;
 
         /* Border */
         @apply text-default border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
@@ -367,12 +367,12 @@ defineSlots<{
   * Button input variant
   */
   &&--variant-input {
-    @apply border border-solid border-muted text-subtle font-normal bg-default hover:border-subtle focus:border-subtle active:outline-default;
-    @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;
+    @apply border border-solid border-subtlest text-subtle font-normal bg-default hover:border-subtle focus:border-subtle active:outline-default;
+    @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;
 
     .state--disabled & {
-      @apply bg-subtle border-muted pointer-events-none text-muted;
-      @apply dark:bg-dark-subtle dark:border-dark-muted dark:text-dark-muted;
+      @apply bg-base border-subtlest pointer-events-none text-muted;
+      @apply dark:bg-dark-base dark:border-dark-subtlest dark:text-dark-muted;
     }
 
     .state--error & {

src/components/card/Card.vue

@@ -278,8 +278,8 @@ defineSlots<{
   * when Card are readonly
   */
   &&--readonly {
-    @apply bg-base cursor-not-allowed;
-    @apply dark:bg-dark-base;
+    @apply bg-ground cursor-not-allowed;
+    @apply dark:bg-dark-ground;
   }
 
   /**
@@ -338,8 +338,8 @@ defineSlots<{
 
     &&--readonly,
     &.card--readonly {
-      @apply bg-base cursor-not-allowed;
-      @apply dark:bg-dark-base;
+      @apply bg-ground cursor-not-allowed;
+      @apply dark:bg-dark-ground;
     }
 
     &.card--disabled {

src/components/checkbox/Checkbox.vue

@@ -191,8 +191,8 @@ defineSlots<{
 
     &:not(.checkbox--checked, .checkbox--indeterminate) {
       .checkbox__icon {
-        @apply bg-subtle border-subtle;
-        @apply dark:bg-dark-subtle dark:border-dark-subtle;
+        @apply bg-base border-subtle;
+        @apply dark:bg-dark-base dark:border-dark-subtle;
 
         > svg {
           @apply fill-subtle;

src/components/contextual-bar/ContextualBar.vue

@@ -402,8 +402,8 @@ defineSlots<{
   * and neutral
   */
   &&--info {
-    @apply bg-base text-default;
-    @apply dark:bg-dark-base dark:text-dark-default;
+    @apply bg-ground text-default;
+    @apply dark:bg-dark-ground dark:text-dark-default;
 
     .contextual-bar {
       &__icon {