feat(foundation): add alpha black and alpha white colors; add opacity 3

Author: Afriq Yasin Ramadhan

packages/tailwind-preset/basic.js

@@ -208,6 +208,34 @@ module.exports = {
         90  : '#200040',
         100 : '#130026',
       },
+      violet: {
+        milk: '#FBF5FF',
+        0   : '#F5E5FF',
+        10  : '#DFADFF',
+        20  : '#C975FF',
+        30  : '#B33DFF',
+        40  : '#9B00FF',
+        50  : '#8400D9',
+        60  : '#6D00B3',
+        70  : '#55008C',
+        80  : '#3E0066',
+        90  : '#270040',
+        100 : '#170026',
+      },
+      pink: {
+        milk: '#FEF7FF',
+        0   : '#FEEBFF',
+        10  : '#FBC0FF',
+        20  : '#F895FF',
+        30  : '#F56AFF',
+        40  : '#F23BFF',
+        50  : '#CE32D9',
+        60  : '#AA29B3',
+        70  : '#85208C',
+        80  : '#611866',
+        90  : '#3D0F40',
+        100 : '#240926',
+      },
     },
     borderRadius: {
       'none'   : 0,
@@ -224,6 +252,7 @@ module.exports = {
     },
     opacity: {
       0  : 0,
+      3  : 0.03,
       5  : 0.05,
       10 : 0.1,
       15 : 0.15,

packages/tailwind-preset/index.js

@@ -18,6 +18,36 @@ module.exports = {
             accent: theme.colors.blue[30],
           },
         },
+        alpha: {
+          black: {
+            3 : `rgba(${theme.colors.gray[100]}, ${theme.opacity[3]})`,
+            5 : `rgba(${theme.colors.gray[100]}, ${theme.opacity[5]})`,
+            10: `rgba(${theme.colors.gray[100]}, ${theme.opacity[10]})`,
+            20: `rgba(${theme.colors.gray[100]}, ${theme.opacity[20]})`,
+            30: `rgba(${theme.colors.gray[100]}, ${theme.opacity[30]})`,
+            40: `rgba(${theme.colors.gray[100]}, ${theme.opacity[40]})`,
+            50: `rgba(${theme.colors.gray[100]}, ${theme.opacity[50]})`,
+            60: `rgba(${theme.colors.gray[100]}, ${theme.opacity[60]})`,
+            70: `rgba(${theme.colors.gray[100]}, ${theme.opacity[70]})`,
+            80: `rgba(${theme.colors.gray[100]}, ${theme.opacity[80]})`,
+            90: `rgba(${theme.colors.gray[100]}, ${theme.opacity[90]})`,
+            95: `rgba(${theme.colors.gray[100]}, ${theme.opacity[95]})`,
+          },
+          white: {
+            3 : `rgba(${theme.colors.gray[0]}, ${theme.opacity[3]})`,
+            5 : `rgba(${theme.colors.gray[0]}, ${theme.opacity[5]})`,
+            10: `rgba(${theme.colors.gray[0]}, ${theme.opacity[10]})`,
+            20: `rgba(${theme.colors.gray[0]}, ${theme.opacity[20]})`,
+            30: `rgba(${theme.colors.gray[0]}, ${theme.opacity[30]})`,
+            40: `rgba(${theme.colors.gray[0]}, ${theme.opacity[40]})`,
+            50: `rgba(${theme.colors.gray[0]}, ${theme.opacity[50]})`,
+            60: `rgba(${theme.colors.gray[0]}, ${theme.opacity[60]})`,
+            70: `rgba(${theme.colors.gray[0]}, ${theme.opacity[70]})`,
+            80: `rgba(${theme.colors.gray[0]}, ${theme.opacity[80]})`,
+            90: `rgba(${theme.colors.gray[0]}, ${theme.opacity[90]})`,
+            95: `rgba(${theme.colors.gray[0]}, ${theme.opacity[95]})`,
+          },
+        },
       },
       fontSize: {
         'tn': [

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-alpha-black-3">The quick brown fox jumps over the lazy dog.</p-text>
 </preview>
 
 ```vue