@ulu/frontend 0.5.3 → 0.5.4

package/lib/scss/base/_root.scss

@@ -23,18 +23,21 @@ $config: (
 
 /// 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
@@ -54,6 +57,7 @@ $cssvars: () !default;
 ///   ));
 /// @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;
 }

package/lib/scss/base/_themes.scss

@@ -19,6 +19,7 @@
 /// @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-invert-color": black,
@@ -30,20 +31,24 @@ $config: (
 
 /// 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
+/// @param {String} $root-selector [:root] - Top-level selector for default theme, can be adjusted for things like building an editor stylesheet where these are wrapped
 /// @example scss
 ///   @include ulu.base-themes-styles();
-@mixin styles {
+
+@mixin styles($root-selector: ":root") {
   @include utils.file-header('base', 'themes');
 
   @if (list.length(themes.$tokens) > 0) {
@@ -61,7 +66,7 @@ $config: (
       $selectors: list.append($selectors, "#{ $prefix }-#{ $key }", comma);
       
       @if ($key == $default) {
-        $selectors: list.append($selectors, ":root", comma);
+        $selectors: list.append($selectors, $root-selector, comma);
       }
 
       #{ $selectors } {
@@ -139,7 +144,7 @@ $config: (
             @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);
+                 $fake-selectors: list.append($fake-selectors, "#{ $root-selector } #{ $inverse-prefix }", comma);
                }
             }
           }
@@ -171,9 +176,9 @@ $config: (
     }
 
     // 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
+    // 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($fake-selectors) > 0) {
       #{ $fake-selectors } {
         #{ $prefix }-fake-invert,

package/lib/scss/base/_typography.scss

@@ -35,7 +35,7 @@
           @include typography.size($size);
         }
       } @else {
-        .#{$size} {
+        .#{ $size } {
           @include typography.size($size);
         }
       }

package/lib/scss/components/_wysiwyg.scss

@@ -53,6 +53,7 @@ $config: (
 
 /// Output component stylesheet
 /// - Note this is setup so that it can be used for separate stylesheets (ie. tinyMCE or ckeditor)
+/// @param {Boolean} $in-selector [true] - Whether to print with .wysiwyg selector or not, used when building like editor/ckeditor stylesheet where these aren't wrapped in selector and should just affect all elements in the editor
 /// @example scss
 ///   @include ulu.component-wysiwyg-styles(true);
 ///   // Output not in selector (for editor stylesheet/preview)

package/package.json

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