utility fixes

webpixels · Oct 11, 2023 · 5e5a94e · 5e5a94e
1 parent a7b801d
commit 5e5a94e
Show file tree

Hide file tree

Showing 14 changed files with 50 additions and 44 deletions.
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.12",
+  "version": "2.0.0-beta.13",
   "version_short": "2.0",
   "license": "MIT",
   "style": "dist/index.css",
@@ -32,6 +32,9 @@
   },
   "bugs": {
     "url": "https://github.com/webpixels/css/issues"
+  },
+   "bin": {
+    "webpixels": "./bin.js"
   },
   "scripts": {
     "build": "npm run css",

diff --git a/scss/core/_colors.scss b/scss/core/_colors.scss
@@ -2,16 +2,16 @@
 
 // White/Grays/Black colors
 $white:    #FFF !default;
-$gray-50:  #f9fafb !default;
-$gray-100: #f3f4f6 !default;
-$gray-200: #e5e7eb !default;
-$gray-300: #d1d5db !default;
-$gray-400: #9ca3af !default;
-$gray-500: #6b7280 !default;
-$gray-600: #4b5563 !default;
-$gray-700: #374151 !default; // Used for text color
-$gray-800: #1f2937 !default; // Used for headings color
-$gray-900: #111827 !default;
+$gray-50:  #f8fafc !default;
+$gray-100: #f1f5f9 !default;
+$gray-200: #e2e8f0 !default;
+$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-900: #0f172a !default;
 $black:    #000 !default;
 
 // Base colors

diff --git a/scss/core/_root.scss b/scss/core/_root.scss
@@ -1,5 +1,10 @@
 :root,
 [data-bs-theme="light"] {
+
+  @each $color, $value in $all-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
   // Logo
   .logo-light {
     display: none;
@@ -34,7 +39,6 @@
       --#{$prefix}btn-hover-bg: var(--#{$prefix}gray-700);
       --#{$prefix}btn-hover-color: var(--#{$prefix}white);
       --#{$prefix}btn-hover-border-color: var(--#{$prefix}gray-700);
-      // --#{$prefix}btn-hover-color: #{color-contrast($dark)};
     }
   }
 }
diff --git a/scss/extra.scss b/scss/extra.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v2.0.0-beta.12 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.13 (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.12 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.13 (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.12 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.13 (https://webpixels.io/)
  * Copyright 2023 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */

diff --git a/scss/utilities/_gradient.scss b/scss/utilities/_gradient.scss
@@ -2,7 +2,7 @@
 // options to pass to the utility API
 //
 
-@if(map-get($theme, gradient, disable) != true) {
+@if($enable-gradient-utilities == true) {
   .gradient-top {
     background-image: linear-gradient(to top, var(--#{$prefix}gradient)) !important;
   }

diff --git a/scss/utilities/_utilities.scss b/scss/utilities/_utilities.scss
@@ -114,6 +114,7 @@ $utilities: map-merge($utilities, (
   "border-style": ( 
     css-var: true,
     css-variable-name: border-style,
+    // property: border-style,
     class: border,
     values: solid dashed dotted none
   ),
@@ -396,6 +397,12 @@ $utilities: map-merge($utilities, (
       responsive: true 
     ),
   ),
+  "z-index": map-merge(
+    map-get($utilities, "z-index"),
+    ( 
+      state: hover 
+    ),
+  ),
   "scroll-behaviour": (
     property: scroll-behaviour,
     class: scroll,

diff --git a/scss/utility.scss b/scss/utility.scss
@@ -1,5 +1,5 @@
 // /*!
-//  * Webpixels CSS v2.0.0-beta.12 (https://webpixels.io/)
+//  * Webpixels CSS v2.0.0-beta.13 (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
@@ -5,10 +5,6 @@
 
 @import '../core/colors';
 
-// Theme object init
-$theme: () !default;
-$theme-utilities: () !default;
-
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
@@ -27,7 +23,10 @@ $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;
 $enable-negative-margins:     true !default;
 $enable-deprecation-messages: true !default;
-$enable-important-utilities:  false !default;
+$enable-important-utilities:  true !default;
+
+// added in wpx
+$enable-gradient-utilities:   true !default;
 
 // Prefix for :root CSS variables
 $prefix:    x- !default;
@@ -50,7 +49,7 @@ $bg-tint-level:            15% !default;
 // Settings for the `<body>` element.
 
 $body-bg:     $white !default;
-$body-color:  $gray-800 !default;
+$body-color:  $gray-700 !default;
 
 $body-secondary-color:      rgba($body-color, .75) !default;
 $body-secondary-bg:         $gray-100 !default;
@@ -681,36 +680,29 @@ $dropdown-left-offset:              50% !default;
 $dropdown-padding-x:                .5rem !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
-$dropdown-bg:                       $white !default;
-$dropdown-border-width:             1px !default;
-$dropdown-border-color:             lighten($gray-200, 3%) !default;
-$dropdown-border-radius:            $border-radius-xl !default;
-$dropdown-border-width:             $border-width !default;
-$dropdown-divider-bg:               tint-color($dropdown-border-color, 10%) !default;
+$dropdown-color:                    var(--#{$prefix}body-color) !default;
+$dropdown-bg:                       var(--#{$prefix}body-bg) !default;
+$dropdown-border-color:             var(--#{$prefix}border-color) !default;
+$dropdown-border-radius:            var(--#{$prefix}border-radius-lg) !default;
+$dropdown-divider-bg:               var(--#{$prefix}border-color) !default;
 $dropdown-divider-margin-y:         $dropdown-padding-y !default;
 $dropdown-box-shadow:               $box-shadow-2xl !default;
 $dropdown-font-size:                $font-size-sm !default;
 
-$dropdown-secondary-bg:             $gray-100 !default;
+$dropdown-secondary-bg:             var(--#{$prefix}secondary-bg) !default;
 
-$dropdown-heading-color:            $gray-900 !default;
+$dropdown-heading-color:            var(--#{$prefix}heading-color) !default;
 $dropdown-heading-font-size:        $font-size-base !default;
 $dropdown-heading-font-weight:      $font-weight-semibold !default;
 $dropdown-heading-focus-color:      $primary !default;
 
 $dropdown-helper-color:             $text-muted !default;
 
-$dropdown-link-border-radius:       $border-radius !default;
-$dropdown-link-color:               $gray-900 !default;
-$dropdown-link-bg:                  $white !default;
-$dropdown-link-hover-color:         $gray-900 !default;
-$dropdown-link-hover-bg:            $gray-100 !default;
-$dropdown-link-active-color:        $primary !default;
-$dropdown-link-active-bg:           transparent !default;
+$dropdown-link-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 
 $dropdown-item-padding-y:           .5rem !default;
 $dropdown-item-padding-x:           1rem !default;
-$dropdown-item-border-radius:       $border-radius !default; 
+$dropdown-item-border-radius:       var(--#{$prefix}border-radius-lg) !default; 
 
 // Frames