added theme support + color modes

extrabright · extrabright · commit bcf8b0dd8256 · 2023-10-13T17:17:48.000+03:00
diff --git a/dist/main.css b/dist/main.css
diff --git a/dist/main.css.map b/dist/main.css.map
diff --git a/dist/utility.css b/dist/utility.css
diff --git a/dist/utility.css.map b/dist/utility.css.map
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@webpixels/css",
   "description": "Utility and component-centric design system based on Bootstrap for fast, responsive UI development.",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.14",
   "version_short": "2.0",
   "license": "MIT",
   "style": "dist/index.css",
@@ -33,7 +33,7 @@
   "bugs": {
     "url": "https://github.com/webpixels/css/issues"
   },
-   "bin": {
+  "bin": {
     "webpixels": "./bin.js"
   },
   "scripts": {
@@ -58,13 +58,16 @@
   "devDependencies": {
     "autoprefixer": "^10.2.6",
     "find-unused-sass-variables": "^4.0.4",
+    "fs-extra": "^11.1.1",
     "install": "^0.13.0",
+    "minimist": "^1.2.8",
     "nodemon": "^2.0.7",
     "npm": "^8.19.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.0",
     "postcss-cli": "^8.3.1",
     "purgecss": "^4.0.3",
+    "replace-in-file": "^7.0.1",
     "sass": "^1.62.1",
     "serve": "^14.0.1",
     "stylelint": "^14.11.0",
diff --git a/scss/core/_colors.scss b/scss/core/_colors.scss
@@ -9,28 +9,41 @@ $gray-300: #cbd5e1 !default;
 $gray-400: #94a3b8 !default;
 $gray-500: #64748b !default;
 $gray-600: #475569 !default;
-$gray-700: #334155 !default; // Used for text color
-$gray-800: #1e293b !default; // Used for headings color
+$gray-700: #334155 !default;
+$gray-800: #1e293b !default;
 $gray-900: #0f172a !default;
+$gray-950: #020617 !default;
 $black:    #000 !default;
 
+$grays: (
+	"50": $gray-50,
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900,
+  "950": $gray-950
+) !default;
+
 // Base colors
-$blue:    #0099FF !default;
-$indigo:  #5C60F5 !default;
-$purple:  #8957FF !default;
-$pink:    #FF579A !default;
-$magenta: #EE33FF !default;
-$red:     #FF3366 !default;
-$orange:  #FF8C00 !default;
-$yellow:  #FFBB00 !default;
-$lime:    #84cc16 !default;
-$green:   #00CC88 !default;
-$teal:    #22DDDD !default;
-$cyan:    #00D4FF !default;
+$blue:    #3b82f6 !default;
+$indigo:  #6366f1 !default;
+$purple:  #8b5cf6 !default;
+$pink:    #ec4899 !default;
+$red:     #ef4444 !default;
+$orange:  #f97316 !default;
+$yellow:  #eab308 !default;
+$green:   #22c55e !default;
+$teal:    #14b8a6 !default;
+$cyan:    #06b6d4 !default;
 
 // Theme colors
-$primary:       $gray-900 !default;
-$secondary:     $lime !default;
+$primary:       $purple !default;
+$secondary:     $gray-900 !default;
 $success:       $green !default;
 $info:          $cyan !default;
 $warning:       $orange !default;
diff --git a/scss/core/_root.scss b/scss/core/_root.scss
@@ -5,19 +5,18 @@
     --#{$prefix}#{$color}: #{$value};
   }
 
+  // Fonts
+  --#{$prefix}font-display: #{inspect($font-display-bundle)};
+  --#{$prefix}font-serif: #{inspect($font-serif-bundle)};
+  --#{$prefix}font-monospace: #{inspect($font-monospace-bundle)};
+
   // Logo
   .logo-light {
     display: none;
   }
   .logo-dark {
     display: block;
   }
-
-  // Fonts
-  --#{$prefix}font-display: #{inspect($font-display-bundle)};
-  --#{$prefix}font-serif: #{inspect($font-serif-bundle)};
-  --#{$prefix}font-monospace: #{inspect($font-monospace-bundle)};
-
 }
 
 @if $enable-dark-mode {
@@ -30,7 +29,6 @@
       display: none;
     }
 
-
     // Buttons
     .btn-neutral {
       --#{$prefix}btn-bg: var(--#{$prefix}gray-800);
diff --git a/scss/extra.scss b/scss/extra.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v2.0.0-beta.13 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.14 (https://webpixels.io/)
  * Copyright 2023 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */
diff --git a/scss/index.scss b/scss/index.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v2.0.0-beta.13 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.14 (https://webpixels.io/)
  * Copyright 2023 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */
diff --git a/scss/main.scss b/scss/main.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v2.0.0-beta.13 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.14 (https://webpixels.io/)
  * Copyright 2023 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */
diff --git a/scss/maps/_maps.scss b/scss/maps/_maps.scss
@@ -1,13 +1,30 @@
 // Maps
 // 
 
+// We created this map because the one in Bootstrap doesn't contain the gray word as key
+// to get bg-gray-100
+
+$gray-colors: (
+  "gray-50": $gray-50,
+  "gray-100": $gray-100,
+  "gray-200": $gray-200,
+  "gray-300": $gray-300,
+  "gray-400": $gray-400,
+  "gray-500": $gray-500,
+  "gray-600": $gray-600,
+  "gray-700": $gray-700,
+  "gray-800": $gray-800,
+  "gray-900": $gray-900,
+  "gray-950": $gray-950
+) !default;
+
 $all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
 
 // Typography
 $utilities-font-family-values: (
   base: var(--#{$prefix}font-sans-serif),
-  display: var(--#{$prefix}font-display),
   serif: var(--#{$prefix}font-serif),
+  display: var(--#{$prefix}font-display),
   code: var(--#{$prefix}font-monospace)
 ) !default;
 
diff --git a/scss/themes/_linear.scss b/scss/themes/_linear.scss
@@ -0,0 +1,11 @@
+/**
+ * Theme: linear
+ */
+
+// Variables
+@import "linear/variables";
+@import "linear/variables-dark";
+
+// Themes
+@import "linear/light";
+@import "linear/dark";
diff --git a/scss/themes/linear/_dark.scss b/scss/themes/linear/_dark.scss
@@ -0,0 +1,3 @@
+@mixin dark {
+	
+}
diff --git a/scss/themes/linear/_light.scss b/scss/themes/linear/_light.scss
@@ -0,0 +1,90 @@
+@mixin light {
+  $primary: #3D5A80;
+  $secondary: #98C1D9;
+  $tertiary: #EE6C4D;
+  $dark: #252422;
+
+  $body-bg: #fff;
+  $surface-secondary: #f1f5f9;
+
+  --x-body-bg: #{$body-bg};
+
+  --x-surface-secondary: #{$surface-secondary};
+  --x-surface-secondary-rgb: #{to-rgb($surface-secondary)};
+  --x-primary: #{$primary};
+  --x-primary-rgb: #{to-rgb($primary)};
+  --x-secondary: #{$secondary};
+  --x-secondary-rgb: #{to-rgb($secondary)};
+  --x-tertiary: #{$tertiary};
+  --x-tertiary-rgb: #{to-rgb($tertiary)};
+  --x-dark: #{$dark};
+  --x-dark-rgb: #{to-rgb($dark)};
+
+  --x-link-color: rgba(var(--x-primary-rgb), .8);
+  --x-link-hover-color: rgba(var(--x-primary-rgb), 1); 
+  
+  --x-border-color: var(--x-gray-200);
+
+  .btn-primary {
+    --x-btn-bg: var(--x-primary);
+    --x-btn-color: var(--x-white);
+    --x-btn-border-color: var(--x-primary);
+    --x-btn-hover-bg: #{lighten($primary, 6%)};
+    --x-btn-hover-color: #{color-contrast($primary)};
+    --x-btn-hover-border-color: #{lighten($primary, 6%)};
+    --x-btn-active-bg: #{lighten($primary, 6%)};
+    --x-btn-active-color: #{color-contrast($primary)};
+    --x-btn-active-border-color: #{lighten($primary, 6%)};
+  }
+
+  .btn-secondary {
+    --x-btn-bg: var(--x-secondary);
+    --x-btn-color: var(--x-white);
+    --x-btn-border-color: var(--x-secondary);
+    --x-btn-hover-bg: #{lighten($secondary, 6%)};
+    --x-btn-hover-color: #{color-contrast($secondary)};
+    --x-btn-hover-border-color: #{lighten($secondary, 6%)};
+    --x-btn-active-bg: #{lighten($secondary, 6%)};
+    --x-btn-active-color: #{color-contrast($secondary)};
+    --x-btn-active-border-color: #{lighten($secondary, 6%)};
+  }
+
+  .btn-tertiary {
+    --x-btn-bg: var(--x-tertiary);
+    --x-btn-color: var(--x-white);
+    --x-btn-border-color: var(--x-tertiary);
+    --x-btn-hover-bg: #{lighten($tertiary, 6%)};
+    --x-btn-hover-color: var(--x-white);
+    --x-btn-hover-border-color: #{lighten($tertiary, 6%)};
+    --x-btn-active-bg: #{lighten($tertiary, 6%)};
+    --x-btn-active-color: var(--x-white);
+    --x-btn-active-border-color: #{lighten($tertiary, 6%)};
+  }
+
+  .btn-dark {
+    --x-btn-bg: var(--x-dark);
+    --x-btn-color: var(--x-white);
+    --x-btn-border-color: var(--x-dark);
+    --x-btn-hover-bg: #{lighten($dark, 6%)};
+    --x-btn-hover-color: #{color-contrast($dark)};
+    --x-btn-hover-border-color: #{lighten($dark, 6%)};
+    --x-btn-active-bg: #{lighten($dark, 6%)};
+    --x-btn-active-color: #{color-contrast($dark)};
+    --x-btn-active-border-color: #{lighten($dark, 6%)};
+  }
+  
+  .btn-neutral {
+    --x-btn-hover-bg: var(--x-dark);
+    --x-btn-hover-border-color: var(--x-dark);
+    --x-btn-hover-color: #{color-contrast($dark)};
+  }
+
+  .navbar {
+    --x-navbar-hover-bg: var(--x-gray-200);
+    --x-navbar-active-bg: var(--x-gray-200);
+  }
+
+  .card {
+    --x-card-border-color: var(--x-border-color);
+  }
+}
diff --git a/scss/themes/linear/_variables-dark.scss b/scss/themes/linear/_variables-dark.scss
diff --git a/scss/themes/linear/_variables.scss b/scss/themes/linear/_variables.scss
diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss
@@ -1,9 +1,3 @@
-@each $color, $value in $theme-colors {
-  .bg-soft-#{$color} {
-    background-color: shift-color($value, $bg-soft-level) !important;
-  }
-}
-
 // Loop over each breakpoint
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
diff --git a/scss/utilities/_gradient.scss b/scss/utilities/_gradient.scss
@@ -35,8 +35,10 @@
     --#{$prefix}gradient: var(--#{$prefix}start-color), var(--#{$prefix}end-color, rgba(0, 0, 0, 0));
   }
 
+  $gradient-colors: map-merge($gray-colors, $all-colors);
+  
   // For color values
-  @each $color, $value in $all-colors {
+  @each $color, $value in $gradient-colors {
     $end-color: rgba(0, 0, 0, 0);
     .start-#{$color},
     .start-#{$color}-hover:hover {
@@ -51,7 +53,7 @@
     --#{$prefix}gradient: var(--#{$prefix}start-color), var(--#{$prefix}middle-color), var(--#{$prefix}end-color, rgba(0, 0, 0, 0));
   }
 
-  @each $color, $value in $colors {
+  @each $color, $value in $gradient-colors {
     $end-color: rgba($value, 0);
     .middle-#{$color},
     .middle-#{$color}-hover:hover {
@@ -65,7 +67,7 @@
     --#{$prefix}end-color: transparent;
   }
   
-  @each $color, $value in $colors {
+  @each $color, $value in $gradient-colors {
     .end-#{$color},
     .end-#{$color}-hover:hover {
       --#{$prefix}end-color: var(--#{$prefix}#{$color});
diff --git a/scss/utilities/_utilities.scss b/scss/utilities/_utilities.scss
@@ -193,11 +193,11 @@ $utilities: map-merge($utilities, (
     map-get($utilities, "background-color"),
     (
       state: hover,
-      values: map-merge(
+      values: map-merge-multiple(
         map-get(map-get($utilities, "background-color"), "values"),
-        (
-          $all-colors
-        )
+        $all-colors,
+        $gray-colors
+
       )
     )
   ),
diff --git a/scss/utility.scss b/scss/utility.scss
@@ -1,5 +1,5 @@
 // /*!
-//  * Webpixels CSS v2.0.0-beta.13 (https://webpixels.io/)
+//  * Webpixels CSS v2.0.0-beta.14 (https://webpixels.io/)
 //  * Copyright 2023 Webpixels
 //  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
 //  */
diff --git a/scss/variables/_variables.scss b/scss/variables/_variables.scss
@@ -66,7 +66,6 @@ $body-emphasis-color:       $gray-900 !default;
 // You can add more entries to the $spacers map, should you need more variation.
 
 $spacer: 1rem !default;
-
 $spacers: (
   0: 0,
   1: $spacer * 0.25,
@@ -262,21 +261,21 @@ $font-serif-system:         ui-serif, Georgia, Cambria, "Times New Roman", Times
 $font-monospace-system:     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 
 // Additional variable to add custom fonts
-$font-sans-serif:           "Inter" !default;
-$font-display:              $font-sans-serif !default;
-$font-monospace:            null !default;
+$font-sans-serif:           null !default;
 $font-serif:                null !default;
+$font-display:              null !default;
+$font-monospace:            null !default;
 
 // Generate the font family by adding the custom font to the collection if that exists
 $font-sans-serif-bundle:    if($font-sans-serif, #{$font-sans-serif,$font-sans-serif-system}, $font-sans-serif-system) !default;
-$font-monospace-bundle:     if($font-monospace, #{$font-monospace,$font-monospace-system}, $font-monospace-system) !default;
 $font-serif-bundle:         if($font-serif, #{$font-serif,$font-serif-system}, $font-serif-system) !default;
 $font-display-bundle:       if($font-display, #{$font-display,$font-sans-serif-system}, $font-sans-serif-system) !default;
+$font-monospace-bundle:     if($font-monospace, #{$font-monospace,$font-monospace-system}, $font-monospace-system) !default;
 
-$font-family-base:           var(--#{$prefix}font-sans-serif) !default;
-$font-family-monospace:      var(--#{$prefix}font-monospace) !default;
-$font-family-display:        var(--#{$prefix}font-display) !default;
-$font-family-serif:          var(--#{$prefix}font-serif) !default;
+$font-family-base:          var(--#{$prefix}font-sans-serif) !default;
+$font-family-serif:         var(--#{$prefix}font-serif) !default;
+$font-family-display:       var(--#{$prefix}font-display) !default;
+$font-family-monospace:     var(--#{$prefix}font-monospace) !default;
 
 // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
 // $font-size-base effects the font size of the body text

Original file line number	Diff line number	Diff line change
`@@ -5,19 +5,18 @@`
`5`	`5`	`--#{$prefix}#{$color}: #{$value};`
`6`	`6`	`}`
`7`	`7`
	`8`	`+ // Fonts`
	`9`	`+ --#{$prefix}font-display: #{inspect($font-display-bundle)};`
	`10`	`+ --#{$prefix}font-serif: #{inspect($font-serif-bundle)};`
	`11`	`+ --#{$prefix}font-monospace: #{inspect($font-monospace-bundle)};`
	`12`	`+`
`8`	`13`	`// Logo`
`9`	`14`	`.logo-light {`
`10`	`15`	`display: none;`
`11`	`16`	`}`
`12`	`17`	`.logo-dark {`
`13`	`18`	`display: block;`
`14`	`19`	`}`
`15`		`-`
`16`		`- // Fonts`
`17`		`- --#{$prefix}font-display: #{inspect($font-display-bundle)};`
`18`		`- --#{$prefix}font-serif: #{inspect($font-serif-bundle)};`
`19`		`- --#{$prefix}font-monospace: #{inspect($font-monospace-bundle)};`
`20`		`-`
`21`	`20`	`}`
`22`	`21`
`23`	`22`	`@if $enable-dark-mode {`
`@@ -30,7 +29,6 @@`
`30`	`29`	`display: none;`
`31`	`30`	`}`
`32`	`31`
`33`		`-`
`34`	`32`	`// Buttons`
`35`	`33`	`.btn-neutral {`
`36`	`34`	`--#{$prefix}btn-bg: var(--#{$prefix}gray-800);`