feat: add yellow

wd-4000 · Feb 4, 2024 · a8ed346 · a8ed346
1 parent bc98139
commit a8ed346
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/src/module.ts b/src/module.ts
@@ -14,6 +14,7 @@ export interface ModuleOptions {
     light?: string;
     red?: string;
     blue?: string;
+    yellow?: string;
   };
   breakpoints: {
     sm?: string;
@@ -23,7 +24,7 @@ export interface ModuleOptions {
   };
   borderRadius: string;
   corePaddingX: string;
-  font: {family: string, weight?: number};
+  font: { family: string, weight?: number };
 }
 
 const defaults: ModuleOptions = {
@@ -33,6 +34,7 @@ const defaults: ModuleOptions = {
     light: "#ffffff",
     red: "#f44336",
     blue: "#2196f3",
+    yellow: '#FFA000'
   },
   breakpoints: {
     sm: "16em",
@@ -42,7 +44,7 @@ const defaults: ModuleOptions = {
   },
   borderRadius: "8px",
   corePaddingX: "1rem",
-  font: {family: "Roboto, sans-serif", weight: 400},
+  font: { family: "Roboto, sans-serif", weight: 400 },
 };
 
 export default defineNuxtModule<ModuleOptions>({

diff --git a/src/runtime/css/main.scss b/src/runtime/css/main.scss
@@ -6,10 +6,13 @@ $root-light-rgb: red($root-light), green($root-light), blue($root-light);
 $root-primary-rgb: red($root-primary), green($root-primary), blue($root-primary);
 $root-red-rgb: red($root-red), green($root-red), blue($root-red);
 $root-blue-rgb: red($root-blue), green($root-blue), blue($root-blue);
+$root-yellow-rgb: red($root-yellow), green($root-yellow), blue($root-yellow);
+
 
 .rounded {
   border-radius: var(--e-rounded-border-radius);
 }
+
 .rounded-top {
   border-top-left-radius: var(--e-rounded-border-radius);
   border-top-right-radius: var(--e-rounded-border-radius);
@@ -30,15 +33,18 @@ $color-map: (
   "primary": $root-primary,
   "dark": $root-dark,
   "light": $root-light,
+  "yellow": $root-yellow,
 );
 
 @each $name, $color in $color-map {
   :root {
     #{'--e-color-'+$name}: $color;
   }
+
   .bg-#{$name} {
     background: $color;
   }
+
   .color-#{$name} {
     color: $color;
   }
@@ -51,6 +57,7 @@ a,
   &:visited {
     color: color.scale($root-blue, $lightness: -10%);
   }
+
   &:active,
   .e-link-active {
     color: color.scale($root-blue, $lightness: 10%);
@@ -66,7 +73,10 @@ a,
 
   --e-color-elev-2: #{$root-elev-2};
   --e-color-elev-2-rgb: #{red($root-elev-2), green($root-elev-2),
-    blue($root-elev-2)};
+ blue($root-elev-2)
+}
+
+;
 }
 
 :root {
@@ -88,7 +98,7 @@ a,
 
     --e-color-dark: #{$root-light};
     --e-color-dark-rgb: #{$root-light-rgb};
-color-scheme: dark;
+    color-scheme: dark;
     @include elev($root-dark, 5%);
   }
-}
+}