@ulu/frontend 0.4.0 → 0.4.2

package/lib/scss/base/_root.scss

@@ -8,6 +8,39 @@
 @use "../utils";
 @use "../cssvar";
 
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} sticky-top-offset [0px]
+/// @prop {Dimension} sticky-bottom-offset [0px]
+
+$config: (
+  "sticky-top-offset": 0px,
+  "sticky-bottom-offset": 0px
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {String} $name Name of property
+@function get($name) {
+  @return utils.require-map-get($config, $name, "base root [config]");
+}
+
+/// Global root variables (CSS Custom Properties)
+/// @type Map
+$cssvars: () !default;
+
+/// Set global root variables
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+@mixin set-cssvars($changes, $merge-mode: null) {
+  $cssvars: utils.map-merge($cssvars, $changes, $merge-mode) !global;
+}
+
 /// Output custom properties in :root for base stylesheet
 /// @example scss
 ///  @include ulu.base-root-styles();
@@ -18,13 +51,14 @@
   :root {
     @include custom-properties();
     @include cssvar.declare-breakpoint();
+    @include cssvar.declare-all($cssvars);
   }
 }
 
 /// Output custom properties for ulu
 
 @mixin custom-properties() {
-  --ulu-sticky-top-offset: 0px; // Should be adjusted by user
-  --ulu-sticky-bottom-offset: 0px; // Should be adjusted by user
+  --ulu-sticky-top-offset: #{ get("sticky-top-offset") }; // Should be adjusted by user
+  --ulu-sticky-bottom-offset: #{ get("sticky-bottom-offset") }; // Should be adjusted by user
   --ulu-scrollbar-width: 0px; // Needs to be set by JS
 }

package/lib/scss/base/_themes.scss

@@ -0,0 +1,143 @@
+////
+/// @group themes
+/// Output base themes stylesheets
+////
+
+@use "sass:list";
+@use "sass:string";
+@use "sass:map";
+@use "../utils";
+@use "../themes";
+@use "../cssvar";
+@use "../selector";
+
+/// 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
+$config: (
+  "output-inverse": true,
+  "fake-dark-color": white,
+  "fake-dark-filter": invert(1) hue-rotate(180deg) saturate(0.7)
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {String} $name Name of property
+@function get($name) {
+  @return utils.require-map-get($config, $name, "base themes [config]");
+}
+
+/// Outputs base theme variables and classes
+/// @example scss
+///   @include ulu.base-themes-styles();
+@mixin styles {
+  @include utils.file-header('base', 'themes');
+
+  @if (list.length(themes.$tokens) > 0) {
+    $keys: themes.get-keys();
+    $default: themes.get("default");
+    $prefix: selector.class("theme");
+    $dark-selectors: ();
+    $inverses: themes.get("inverses");
+    $inverse-prefix: selector.class("theme-inverse");
+    $output-inverse: get("output-inverse");
+    
+    // 1. Build Base Themes
+    @each $key in $keys {
+      $selectors: ();
+      $selectors: list.append($selectors, "#{ $prefix }-#{ $key }", comma);
+      
+      @if ($key == $default) {
+        $selectors: list.append($selectors, ":root", comma);
+      }
+
+      #{ $selectors } {
+        // Standard color-scheme and CSS vars
+        $color-scheme: themes.get-color-scheme($key);
+        @if ($color-scheme) {
+          color-scheme: #{ $color-scheme };
+        }
+        @include themes.declare($key);
+
+        // Optional Inverse Variables (Variable Swap Approach)
+        // Can use @scope in the future but for now we suffix -"inverse"
+        @if ($output-inverse) {
+          $inverse-key: map.get($inverses, $key);
+          @if ($inverse-key) {
+            $inv-scheme: themes.get-color-scheme($inverse-key);
+            @if ($inv-scheme) {
+              --ulu-inverse-color-scheme: #{ $inv-scheme };
+            }
+            
+            @each $prop, $theme-map in themes.$tokens {
+              @if (utils.is-map($theme-map)) {
+                $inv-value: map.get($theme-map, $inverse-key);
+                @if ($inv-value) {
+                  // Only output the inverse variable, not its fallback!
+                  @include cssvar.declare("inverse-#{$prop}", $inv-value);
+                }
+              }
+            }
+          }
+        }
+
+        // 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;
+        }
+      }
+
+      // 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);
+             }
+          }
+        }
+      }
+    }
+
+    // 2. The Inverse Utility Class
+    @if ($output-inverse and list.length(map.keys($inverses)) > 0) {
+      #{ $inverse-prefix } {
+        color-scheme: var(--ulu-inverse-color-scheme, inherit);
+        @each $prop, $theme-map in themes.$tokens {
+          @if (utils.is-map($theme-map)) {
+            $inv-name: cssvar.name("inverse-" + $prop);
+            // Swap them: --site-color-bg: var(--site-inverse-color-bg)
+            @include cssvar.declare($prop, var(#{ $inv-name }));
+          }
+        }
+      }
+    }
+
+    // 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)
+    /// 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 {
+          filter: var(--ulu-theme-fake-filter, none);
+          color: var(--ulu-theme-fake-color, inherit);
+        }
+      }
+    }
+  }
+}

package/lib/scss/components/_flipcard.scss

@@ -19,11 +19,15 @@
 /// @prop {Dimension} border-width [1px] Flipcard border width
 /// @prop {Color} border-color ["rule-light"] Flipcard border color
 /// @prop {Dimension} border-radius [6px] Border radius for flipcard.
-/// @prop {Color} border-color-hover ["rule-dark"] border color when hovered.
+/// @prop {Color} border-color-hover ["rule"] border color when hovered.
 /// @prop {Dimension} border-width-focus [3px] Border width that shows when focused.
 /// @prop {Color} border-color-focus ["focus"] border color when focused
 /// @prop {Time} anim-duration [430ms] Animation duration.
 /// @prop {Time} anim-delay [200ms] Animation delay.
+/// @prop {String} anim-front-close ["FlipcardFrontClose"] Animation name for front close.
+/// @prop {String} anim-front-open ["FlipcardFrontOpen"] Animation name for front open.
+/// @prop {String} anim-back-open ["FlipcardBackOpen"] Animation name for back open.
+/// @prop {CssValue} anim-timing-function [ease-out] Animation timing function.
 /// @prop {Dimension} padding [1.5rem] Padding for the flipcard.
 /// @prop {Color} title-color ["type"] Color of the front page text.
 /// @prop {Color} title-color-hover ["link-hover"] Color of the front page text when hovered or focused.

package/lib/scss/components/_progress-bar.scss

@@ -71,13 +71,13 @@ $config: (
   "animation-initial-duration" : 500ms,
   "animation-initial-timing" : ease-in,
   "animation-indeterminate-duration" : 2.5s
-  ) !default;
+) !default;
 
-  /// @type Map
-  /// This is the map of styles (variations in progress bar types)
-  /// - Each style becomes the modifier and accepts ("bar-color", "bar-height", "track-color")
-  /// - Use this to match whatever progress system(s) your creating
-  $styles: (
+/// @type Map
+/// This is the map of styles (variations in progress bar types)
+/// - Each style becomes the modifier and accepts ("bar-color", "bar-height", "track-color")
+/// - Use this to match whatever progress system(s) your creating
+$styles: (
   "success" : (
     "bar-color" : "success",
     "icon-color" : "success"
@@ -97,7 +97,7 @@ $config: (
     "bar-height" : 4px,
     "track-color" : transparent,
   )
-  ) !default;
+) !default;
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "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": [