feat(foundation): add new semantic color in brand eg. brand-accent-subtlest

Author: Afriq Yasin Ramadhan

packages/tailwind-preset/index.js

@@ -9,13 +9,19 @@ module.exports = {
         brand: {
           logo  : theme.colors.red[40],
           action: theme.colors.red[40],
-          accent: theme.colors.blue[40],
+          accent: {
+            DEFAULT : theme.colors.blue[40],
+            subtlest: theme.colors.blue.milk,
+          },
         },
         dark: {
           brand: {
             logo  : theme.colors.gray[0],
             action: theme.colors.red[30],
-            accent: theme.colors.blue[30],
+            accent: {
+              DEFAULT : theme.colors.blue[30],
+              subtlest: theme.colors.blue.milk,
+            },
           },
         },
         alpha: {

src/components/text/index.md

@@ -18,7 +18,7 @@ Used for the title of any sub-sections
 Default style of `Text` is a body text
 
 <preview>
-  <p-text>The quick brown fox jumps over the lazy dog.</p-text>
+  <p-text class="bg-brand-accent">The quick brown fox jumps over the lazy dog.</p-text>
 </preview>
 
 ```vue