feat: add overlay colors

Author: abelflopes

packages/components/theme/src/styles/_theme-type.scss

@@ -8,6 +8,8 @@ $theme-type: (
     "text-alt",
     "neutral-100",
     "neutral-200",
+    "overlay-light",
+    "overlay-dark",
   ),
   "font": (
     "family",

packages/components/theme/src/themes/default.ts

@@ -12,6 +12,8 @@ export const defaultTheme: Theme = {
     "text-alt": "#323646",
     "neutral-100": "#edf2f7",
     "neutral-200": "#DBDEEB",
+    "overlay-light": "rgba(255,255,255, .2)",
+    "overlay-dark": "rgba(0,0,0,.2)",
   },
   font: {
     "family": "system-ui, sans-serif",

packages/components/theme/src/types.ts

@@ -7,6 +7,8 @@ export interface Theme {
     "text-alt": string;
     "neutral-100": string;
     "neutral-200": string;
+    "overlay-light": string;
+    "overlay-dark": string;
   };
   font: {
     "family": string;