feat(foundation): add dim alpha background for overlay or backdrop

Author: Afriq Yasin Ramadhan

packages/tailwind-preset/index.js

@@ -233,6 +233,12 @@ module.exports = {
           DEFAULT : theme.colors.red[0],
           emphasis: theme.colors.red[40],
         },
+        'dim': {
+          subtle  : `rgba(${theme.colors.gray[100]}, ${theme.opacity[10]})`,
+          default : `rgba(${theme.colors.gray[100]}, ${theme.opacity[30]})`,
+          DEFAULT : `rgba(${theme.colors.gray[100]}, ${theme.opacity[30]})`,
+          emphasis: `rgba(${theme.colors.gray[100]}, ${theme.opacity[80]})`,
+        },
         'dark': {
           'base'   : theme.colors.gray[100],
           'ground' : theme.colors.gray[90],
@@ -265,6 +271,12 @@ module.exports = {
             DEFAULT : theme.colors.red[90],
             emphasis: theme.colors.red[30],
           },
+          'dim': {
+            subtle  : `rgba(${theme.colors.gray[100]}, ${theme.opacity[10]})`,
+            default : `rgba(${theme.colors.gray[100]}, ${theme.opacity[30]})`,
+            DEFAULT : `rgba(${theme.colors.gray[100]}, ${theme.opacity[30]})`,
+            emphasis: `rgba(${theme.colors.gray[100]}, ${theme.opacity[80]})`,
+          },
         },
       },
       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%)' },