@ulu/frontend 0.4.3 → 0.4.5

package/lib/scss/_cssvar.scss

@@ -179,7 +179,7 @@ $config: (
 /// @param {String} $key The key used to retrieve values from the map.
 /// @param {String} $prefix The optional prefix for CSS variables.
 @mixin declare-theme-values($theme, $key, $prefix: get("prefix")) {
-  @warn "ulu.cssvar-declare-theme-values() is deprecated. Please use ulu.themes-declare-values() instead.";
+  @warn "ulu.cssvar-declare-theme-values() is deprecated. Please use ulu.themes-declare() instead.";
   @each $name, $definition in $theme {
     $value: map.get($definition, $key);
     @if ($value) {

package/lib/scss/_utils.scss

@@ -323,8 +323,8 @@ $config: (
 ///
 
 @function map-has($map, $key) {
-  @if (meta.type-of($map) != "map") {
-    @error "map-has(): Incorrect type for $map (should be map)";
+  @if (not is-map($map)) {
+    @error "map-has(): Incorrect type for $map (should be map) got (#{ $type-passed })";
   }
   @return map.get($map, $key) != null;
 }
@@ -793,7 +793,12 @@ $config: (
 /// @return {Boolean} Whether the item was type map
 
 @function is-map($value) {
-  @return meta.type-of($value) == "map";
+  $type: meta.type-of($value);
+  @if ($type == "list") {
+    @return list.length($value) == 0;
+  } @else {
+    @return meta.type-of($value) == "map";
+  }
 }
 
 /// Determines if value passed is a number

package/lib/scss/base/_root.scss

@@ -63,12 +63,22 @@ $cssvars: () !default;
   @include utils.file-header('base', 'root');
   // Core/default css-vars
   :root {
-    @include custom-properties();
-    @include cssvar.declare-breakpoint();
-    @include cssvar.declare-all($cssvars);
+    @include declare();
   }
 }
 
+/// Declare custom properties for ulu (without selector)
+/// @example scss
+///  .cms-backend {
+///    @include ulu.base-root-declare();
+///  }
+
+@mixin declare() {
+  @include custom-properties();
+  @include cssvar.declare-breakpoint();
+  @include cssvar.declare-all($cssvars);
+}
+
 /// Output custom properties for ulu
 
 @mixin custom-properties() {

package/lib/scss/base/_themes.scss

@@ -14,12 +14,18 @@
 /// Module Settings
 /// @type Map
 /// @prop {Boolean} output-inverse [true] Whether to output the `.theme-inverse` utility and corresponding inverse variables
-/// @prop {Color} fake-dark-color [white] The fallback text color applied to elements using the `.theme-dark-fake` utility
-/// @prop {String} fake-dark-filter [invert(1) hue-rotate(180deg) saturate(0.7)] The filter applied to elements using the `.theme-dark-fake` utility
+/// @prop {Color} fake-invert-color [black] The fallback text color applied to elements using the fake inversion utilities. Note: This should be the color that, when inverted, results in the desired theme color.
+/// @prop {String} fake-invert-filter [invert(1) hue-rotate(180deg) saturate(0.7)] The filter applied to elements using the fake inversion utilities.
+/// @prop {String} token-color ["color-type"] The token name used for the `color` property on theme classes. 
+/// @prop {String} token-background-color [null] The token name used for the `background-color` property on theme classes. This is not included by default (normally we don't want to set a specific background color but if you do add the background-color token name from the theme)
+/// @prop {Boolean} token-warnings [true] Since this is an opinionated stylesheet we warn if you have "token-color" set but it's key is not found in the theme. If this is intentional
 $config: (
   "output-inverse": true,
-  "fake-dark-color": white,
-  "fake-dark-filter": invert(1) hue-rotate(180deg) saturate(0.7)
+  "fake-invert-color": black,
+  "fake-invert-filter": invert(1) hue-rotate(180deg) saturate(0.7),
+  "token-color": "color-type",
+  "token-background-color": null,
+  "token-warnings" : true,
 ) !default;
 
 /// Change modules $config
@@ -44,7 +50,7 @@ $config: (
     $keys: themes.get-keys();
     $default: themes.get("default");
     $prefix: selector.class("theme");
-    $dark-selectors: ();
+    $fake-selectors: ();
     $inverses: themes.get("inverses");
     $inverse-prefix: selector.class("theme-inverse");
     $output-inverse: get("output-inverse");
@@ -66,6 +72,20 @@ $config: (
         }
         @include themes.declare($key);
 
+        // Force color and background-color if tokens are set
+        $color-token: get("token-color");
+        $bg-token: get("token-background-color");
+
+        @include -token-warning("token-color", $key);
+        @include -token-warning("token-background-color", $key);
+
+        @if ($color-token) {
+          color: cssvar.use($color-token);
+        }
+        @if ($bg-token) {
+          background-color: cssvar.use($bg-token);
+        }
+
         // Optional Inverse Variables (Variable Swap Approach)
         // Can use @scope in the future but for now we suffix -"inverse"
         @if ($output-inverse) {
@@ -88,26 +108,40 @@ $config: (
           }
         }
 
-        // Contextual trigger for the fake dark utility
-        @if ($color-scheme == "dark") {
-          --ulu-theme-fake-filter: #{ get("fake-dark-filter") };
-          --ulu-theme-fake-color: #{ get("fake-dark-color") };
-        } @else {
-          --ulu-theme-fake-filter: none;
-          --ulu-theme-fake-color: inherit;
+        // Contextual trigger for the fake inversion utility
+        --ulu-theme-fake-filter: #{ get("fake-invert-filter") };
+        
+        $fake-color: get("fake-invert-color");
+        $fake-bg: inherit;
+        $color-token: get("token-color");
+        $bg-token: get("token-background-color");
+
+        @if ($output-inverse) {
+          $inverse-key: map.get($inverses, $key);
+          @if ($inverse-key) {
+            @if ($color-token) {
+              $fake-color: var(#{ cssvar.name("inverse-" + $color-token) }, #{ $fake-color });
+            }
+            @if ($bg-token) {
+              $fake-bg: var(#{ cssvar.name("inverse-" + $bg-token) }, white);
+            }
+          }
         }
-      }
 
-      // Collect dark themes for the fake utility
-      @if (themes.get-color-scheme($key) == "dark") {
-        $dark-selectors: list.append($dark-selectors, $selectors, comma);
-        // Ensure fake dark applies to inverted light themes
-        @each $current-theme, $inverse-target in $inverses {
-          @if ($inverse-target == $key) {
-             $dark-selectors: list.append($dark-selectors, "#{ $prefix }-#{ $current-theme } #{ $inverse-prefix }", comma);
-             @if ($current-theme == $default) {
-               $dark-selectors: list.append($dark-selectors, ":root #{ $inverse-prefix }", comma);
-             }
+        --ulu-theme-fake-color: #{ $fake-color };
+        --ulu-theme-fake-background-color: #{ $fake-bg };
+        
+        $fake-selectors: list.append($fake-selectors, $selectors, comma);
+
+        // Ensure fake utility applies to inverted themes
+        @if ($output-inverse) {
+          @each $current-theme, $inverse-target in $inverses {
+            @if ($inverse-target == $key) {
+               $fake-selectors: list.append($fake-selectors, "#{ $prefix }-#{ $current-theme } #{ $inverse-prefix }", comma);
+               @if ($current-theme == $default) {
+                 $fake-selectors: list.append($fake-selectors, ":root #{ $inverse-prefix }", comma);
+               }
+            }
           }
         }
       }
@@ -124,20 +158,44 @@ $config: (
             @include cssvar.declare($prop, var(#{ $inv-name }));
           }
         }
+        // Force color and background-color if tokens are set
+        $color-token: get("token-color");
+        $bg-token: get("token-background-color");
+        @if ($color-token) {
+          color: cssvar.use($color-token);
+        }
+        @if ($bg-token) {
+          background-color: cssvar.use($bg-token);
+        }
       }
     }
 
-    // 3. The Fake Dark Utility Class
-    /// Can be used on elements that need dark mode but that have colors that can't be updated (canvas charts for example)
+    // 3. The Fake Inversion Utility Class
+    /// Can be used on elements that need a theme but that have colors that can't be updated (canvas charts for example)
     /// It inverts the items color, and then inverts/spins the element colors so they match the hue before inversion
     /// It also decreases the contrast slightly
-    @if (list.length($dark-selectors) > 0) {
-      #{ $dark-selectors } {
-        #{ $prefix }-dark-fake {
+    @if (list.length($fake-selectors) > 0) {
+      #{ $fake-selectors } {
+        #{ $prefix }-fake-invert,
+        #{ $prefix }-dark-fake { // Legacy support
           filter: var(--ulu-theme-fake-filter, none);
           color: var(--ulu-theme-fake-color, inherit);
+          background-color: var(--ulu-theme-fake-background-color, transparent);
         }
       }
     }
   }
 }
+
+/// Internal mixin for warnings (DRY) 
+@mixin -token-warning($token-property, $theme-key) {
+  @if (get("token-warnings")) {
+    $token: get($token-property);
+    @if ($token) {
+      $def: utils.ensure-map(map.get(themes.$tokens, $token));
+      @if (not utils.map-has($def, $theme-key)) {
+        @warn "ULU Themes: The token '#{ $token }' (#{ $token-property}) is missing a value for theme '#{ $theme-key }'. This may cause color inheritance issues.";
+      }
+    }
+  }
+}

package/lib/scss/components/_tabs.scss

@@ -59,6 +59,8 @@ $-fallbacks: (
 /// @prop {Boolean} vertical-indicator-left [true] The indicator for selected tab should be on the left when vertical (false will be on right/inside)
 /// @prop {Boolean} vertical-breakpoint [true] Set the breakpoint when the vertical tabs should switch to horizontal (defaults to breakpoint 'default')
 /// @prop {Boolean} horizontal-tab-wrap [false] Set to true to allow line wrapping when the tabs are in horizontal orientation, vertical is always allowed to wrap
+/// @prop {Color} full-width-tablist-background-color [null] Optional background color for full-width tabs tablist
+/// @prop {Color} full-width-tabpanel-background-color [transparent] Optional background color for full-width tabs tabpanel
 
 $config: (
   "margin" : (2rem 0),
@@ -88,7 +90,9 @@ $config: (
   "vertical-tab-gap" : 0.75em,
   "vertical-indicator-left" : true,
   "vertical-breakpoint" : true,
-  "horizontal-tab-wrap" : false
+  "horizontal-tab-wrap" : false,
+  "full-width-tablist-background-color" : null,
+  "full-width-tabpanel-background-color" : transparent,
 ) !default;
 
 /// Change modules $config
@@ -254,9 +258,10 @@ $config: (
   #{ $prefix }--full-width {
     > [role="tablist"] {
       justify-content: safe center;
+      background-color: color.get(get("full-width-tablist-background-color"));
     }
     >[role="tabpanel"] {
-      background-color: transparent;
+      background-color: color.get(get("full-width-tabpanel-background-color"));
       padding: 0;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
   "type": "module",
   "files": [