cx 26.2.1 → 26.2.3

package/src/util/scss/calc.scss

@@ -1,45 +1,137 @@
+@use "sass:color";
 @use "sass:list";
 @use "sass:map";
 @use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
+// Check if a value is or contains a CSS variable (var(--...)) or calc expression
+@function cx-is-css-var($value) {
+   @if meta.type-of($value) == "string" {
+      @return string.index($value, "var(") != null or
+         string.index($value, "calc(") != null or
+         string.index($value, "color-mix(") != null;
+   }
+   // Also check for calc type returned by calc()
+   @if meta.type-of($value) == "calculation" {
+      @return true;
+   }
+   @return false;
+}
+
+// Lighten a color, supporting CSS variables
+// For CSS variables, outputs color-mix(in srgb, color, white amount)
+// For Sass colors, uses color.adjust (same as old lighten) at compile time
+@function cx-lighten($color, $amount) {
+   @if cx-is-css-var($color) or cx-is-css-var($amount) {
+      @return #{"color-mix(in srgb, " + $color + ", white " + $amount + ")"};
+   }
+   @return color.adjust($color, $lightness: $amount);
+}
+
+// Darken a color, supporting CSS variables
+// For CSS variables, outputs color-mix(in srgb, color, black amount)
+// For Sass colors, uses color.adjust (same as old darken) at compile time
+@function cx-darken($color, $amount) {
+   @if cx-is-css-var($color) or cx-is-css-var($amount) {
+      @return #{"color-mix(in srgb, " + $color + ", black " + $amount + ")"};
+   }
+   @return color.adjust($color, $lightness: -$amount);
+}
+
+// Multiply a value by a factor, supporting CSS variables
+// For CSS variables, outputs calc(var(...) * factor)
+// For numeric values, performs the multiplication at compile time
+@function cx-multiply($value, $factor) {
+   @if cx-is-css-var($value) or cx-is-css-var(($factor)) {
+      @return calc(#{$value} * #{$factor});
+   }
+   @return $value * $factor;
+}
+
+@function cx-divide($value, $factor) {
+   @if cx-is-css-var($value) or cx-is-css-var(($factor)) {
+      @return calc(#{$value} / #{$factor});
+   }
+   @return math.div($value, $factor);
+}
+
+// Round a value, supporting CSS variables
+// For CSS variables, outputs CSS round() function
+// For numeric values, performs the rounding at compile time
+@function cx-round($value) {
+   @if cx-is-css-var($value) {
+      @return round(#{$value});
+   }
+   @return math.round($value);
+}
 
 @function cx-calc($lengths...) {
    $units: ();
+   $css-vars: ();
 
    @each $l in $lengths {
-      $unit: math.unit($l);
-      @if (map.has-key($units, $unit)) {
-         $nl: map.get($units, $unit) + $l;
-         $units: map.merge($units, ($unit: $nl))
+      // Handle CSS variables separately
+      @if cx-is-css-var($l) {
+         $css-vars: list.append($css-vars, $l);
       } @else {
-         $units: map.merge($units, ($unit: $l))
+         $unit: math.unit($l);
+         @if (map.has-key($units, $unit)) {
+            $nl: map.get($units, $unit) + $l;
+            $units: map.merge(
+               $units,
+               (
+                  $unit: $nl,
+               )
+            );
+         } @else {
+            $units: map.merge(
+               $units,
+               (
+                  $unit: $l,
+               )
+            );
+         }
       }
    }
 
    $keys: map.keys($units);
-   @if (list.length($keys) == 1) {
+   $has-css-vars: list.length($css-vars) > 0;
+
+   // If only one unit type and no CSS vars, return directly
+   @if (list.length($keys) == 1 and not $has-css-vars) {
       @return map.get($units, list.nth($keys, 1));
    }
 
-   $calc: '';
+   $calc: "";
    $count: 0;
 
    @each $u, $v in $units {
       @if ($v != 0) {
          $count: $count + 1;
          @if ($count > 1) {
-            $calc: $calc + ' + ';
+            $calc: $calc + " + ";
          }
          $calc: $calc + $v;
       }
    }
 
+   // Add CSS variables to the calc expression
+   @each $var in $css-vars {
+      $count: $count + 1;
+      @if ($count > 1) {
+         $calc: $calc + " + ";
+      }
+      $calc: $calc + $var;
+   }
+
    @if ($count == 0) {
       @return 0;
    }
 
-   @if ($count == 1) {
+   @if ($count == 1 and not $has-css-vars) {
       @return #{$calc};
    }
 
-   @return #{'calc(' + $calc  + ')'};
-}
+   @return #{"calc(" + $calc + ")"};
+}

package/src/util/scss/defaults.scss

@@ -0,0 +1,24 @@
+// Text
+$cx-default-font-family: (
+   -apple-system,
+   BlinkMacSystemFont,
+   "Segoe UI",
+   "Roboto",
+   "Helvetica Neue",
+   Arial,
+   sans-serif
+) !default;
+$cx-default-font-size: 14px !default;
+$cx-default-color: #373a3c !default;
+
+// Border
+$cx-default-border-color: #bfbfbf !default;
+$cx-default-border-radius: 0 !default;
+$cx-default-border-width: 1px !default;
+
+// Container
+$cx-default-container-padding: 5px !default;
+
+// Cover
+$cx-default-cover-border-color: $cx-default-border-color !default;
+$cx-default-cover-background-color: white !default;

package/src/util/scss/elements.scss

@@ -0,0 +1,78 @@
+@use "./variables.scss" as *;
+
+$cx-element-style-map: (
+   html: (
+      font-family: $cx-default-font-family,
+      font-size: $cx-default-font-size,
+      height: 100%,
+      background-color: #eee,
+   ),
+   body: (
+      margin: 0,
+      padding: 0,
+      height: 100%,
+      color: $cx-default-color,
+   ),
+   h1: (
+      font-size: 2rem,
+      line-height: 1.1,
+      margin: 0 0 0.75rem 0,
+      font-weight: 500,
+   ),
+   h2: (
+      font-size: 1.75rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500,
+   ),
+   h3: (
+      font-size: 1.5rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500,
+   ),
+   h4: (
+      font-size: 1.3rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500,
+   ),
+   h5: (
+      font-size: 1.15rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500,
+   ),
+   h6: (
+      font-size: 1rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500,
+   ),
+   p: (
+      margin: 0 0 1rem 0,
+   ),
+   a: (
+      text-decoration: none,
+      color: #0275d8,
+   ),
+   "a:hover": (
+      text-decoration: underline,
+   ),
+   ul: (
+      margin: 0 0 1rem 0,
+   ),
+   ol: (
+      margin: 0 0 1rem 0,
+   ),
+   th: (
+      font-weight: 500,
+   ),
+   text: (
+      fill: currentColor,
+      stroke: none,
+   ),
+   table: (
+      font-size: inherit,
+   ),
+) !default;

package/src/util/scss/global.scss

@@ -0,0 +1,15 @@
+@use "./variables.scss" as *;
+@use "./elements.scss" as *;
+@use "./add-rules.scss" as *;
+
+@mixin cx-global-rules() {
+   @each $tag, $styles in $cx-element-style-map {
+      #{$tag} {
+         @include cx-add-rules($styles);
+      }
+   }
+}
+
+@if ($cx-include-global-rules and cx-call-once("cx/globals")) {
+   @include cx-global-rules();
+}

package/src/util/scss/include.scss

@@ -1,6 +1,7 @@
+@forward "colors";
+@use "call-once" as *;
+@use "colors" as *;
 @use "sass:map";
-@import "call-once";
-@import "colors";
 
 $cx-include-all: true !default;
 
@@ -11,11 +12,13 @@ $cx-dependencies: () !default;
 
 @function cx-should-include($name, $once: true) {
    @return (
-       (map.get($cx-excluded, $name) != true) and
-       ($cx-include-all or
-       ($cx-used != null and map.get($cx-used, $name) == true))
-   )
-   and ($once != true or cx-call-once($name));
+         (map.get($cx-excluded, $name) != true) and
+            (
+               $cx-include-all or
+                  ($cx-used != null and map.get($cx-used, $name) == true)
+            )
+      )
+      and ($once != true or cx-call-once($name));
 }
 
 @function cx-included($name) {
@@ -26,7 +29,12 @@ $cx-dependencies: () !default;
    @if (map.get($cx-excluded, $name)) {
       @return 0;
    }
-   $cx-used: map.merge($cx-used, ($name: true)) !global;
+   $cx-used: map.merge(
+      $cx-used,
+      (
+         $name: true,
+      )
+   ) !global;
    $dummy: 1;
    $deps: map.get($cx-dependencies, $name);
    @if ($deps == null) {
@@ -43,6 +51,6 @@ $cx-dependencies: () !default;
    $cx-used: () !default !global;
 
    @each $name in $names {
-      $dummy: cx-widget($name)
+      $dummy: cx-widget($name);
    }
 }

package/src/util/scss/index.scss

@@ -1,9 +1 @@
-@import "add-rules";
-@import "calc";
-@import "call-once";
-@import "clockwise";
-@import "colors";
-@import "deep-merge";
-@import "deep-get";
-@import "include";
-@import "divide";
+@use "./global.scss" as *;

package/src/util/scss/maps.scss

@@ -0,0 +1,2 @@
+@forward "./elements.scss";
+@forward "./pad-size.scss";

package/src/util/scss/pad-size.scss

@@ -0,0 +1,9 @@
+@use "./padding.scss" as *;
+
+$cx-pad-size: (
+   xsmall: $cx-default-padding-extra-small,
+   small: $cx-default-padding-small,
+   medium: $cx-default-padding-medium,
+   large: $cx-default-padding-large,
+   xlarge: $cx-default-padding-extra-large,
+) !default;

package/src/util/scss/padding.scss

@@ -0,0 +1,6 @@
+// Padding
+$cx-default-padding-extra-small: 3px !default;
+$cx-default-padding-small: 5px !default;
+$cx-default-padding-medium: 10px !default;
+$cx-default-padding-large: 15px !default;
+$cx-default-padding-extra-large: 20px !default;

package/src/util/scss/screen-size.scss

@@ -0,0 +1,5 @@
+// SCREEN SIZE
+$screen-size-small: 400px !default;
+$screen-size-medium: 800px !default;
+$screen-size-large: 1300px !default;
+$screen-size-extra-large: 1800px !default;

package/src/util/scss/variables.scss

@@ -0,0 +1,6 @@
+$cx-include-global-rules: false !default;
+
+@forward "./besm.scss";
+@forward "./defaults.scss";
+@forward "./screen-size.scss";
+@forward "./padding.scss";

package/src/util/variables.scss

@@ -0,0 +1 @@
+@forward "./scss/variables.scss";

package/src/variables.scss

@@ -1,217 +1,5 @@
-// FUNCTIONS
-@import "util/scss/index";
-
-// SCREEN SIZE
-$cx-screen-size-small: 400px !default;
-$cx-screen-size-medium: 800px !default;
-$cx-screen-size-large: 1300px !default;
-$cx-screen-size-extra-large: 1800px !default;
-
-//
-// BESM
-//
-// B - block - top level HTML element
-// E - element - part of the component (block)
-// S - state - indicator of the component state which affects the appearance
-// M - mod - user supplied instruction which overrides default appearance
-//
-
-$cx-besm: (
-   block: "cxb-",
-   element: "cxe-",
-   state: "cxs-",
-   mod: "cxm-"
-) !default;
-
-//
-// Boxes
-// -----
-//
-// Boxes are inline-block elements which are likely to appear in the same row, such as buttons and form elements.
-// These elements should have the same height in order to avoid problems when put together in a toolbar
-// or a complex form.
-//
-// To ensure the height consistency, all box models should use the same line-height, top/bottom padding and border-width;
-//
-// For elements which do not have a natural border, such as checkboxes, radios and buttons,
-// border-color should be set to transparent.
-//
-//  box height = line-height + padding-top + padding-bottom + border-width-top + border-width-bottom
-//
-// Some browsers do not respect the line-height being set and therefore explicit height value is
-// calculated and set on all box elements.
-//
-// Hint: Use em units to make the box height grow with the font-size, but note that the elements
-//       will not be aligned in case of pixel boundaries and icons may appear blurry in some desktop browsers.
-//
-
-$cx-default-box-font-size: 13px !default;
-$cx-default-box-font-family: inherit !default;
-$cx-default-box-line-height: 16px !default;
-$cx-default-box-padding: 5px !default; //should not be a list
-$cx-default-box-border-width: 1px !default;
-
-// Borders
-// -------
-
-$cx-default-border-color: #bfbfbf !default;
-$cx-default-border-radius: 0 !default;
-$cx-default-border-width: 1px !default;
-
-// Padding
-// -------
-
-$cx-default-container-padding: 5px !default;
-
-// Empty Texts
-// ------------
-//
-// Displayed instead of whitespace
-
-$cx-default-empty-text-color: rgba(128, 128, 128, 0.7) !default;
-
-$cx-empty-text: (
-   color: $cx-default-empty-text-color
-) !default;
-
-//Icons
-$cx-default-icon-size: 16px !default;
-
-//Selection
-$cx-selection-background-color: rgba(135, 206, 250, 0.6);
-
-//List
-$cx-default-list-item-padding: 5px 10px !default;
-
-//Lists
-$cx-list: (
-   default: (
-      -webkit-overflow-scrolling: touch
-   ),
-   hover: (),
-   focus: (
-      outline: none
-   )
-);
-
-$cx-list-item: (
-   default: (),
-   hover: (
-      background-color: rgba(128, 128, 128, 0.1),
-      outline: none,
-      cursor: pointer
-   ),
-   cursor: (
-      background-color: rgba(123, 190, 255, 0.15),
-      outline: none
-   ),
-   selected: (
-      background-color: rgba(123, 190, 255, 0.4)
-   ),
-   selected-hover: (
-      background-color: rgba(123, 190, 255, 0.2)
-   ),
-   selected-cursor: (
-      background-color: rgba(123, 190, 255, 0.3),
-      outline: none
-   ),
-   disabled: (
-      cursor: default,
-      opacity: 0.5,
-      pointer-events: none
-   ),
-   active: (
-      //causes flickering
-         //background: rgba(123,190,255, 0.7)
-   )
-) !default;
-
-$cx-default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-   "Helvetica Neue", Arial, sans-serif !default;
-
-$cx-default-font-size: 14px !default;
-$cx-default-color: #373a3c !default;
-
-$cx-element-style-map: (
-   html: (
-      font-family: $cx-default-font-family,
-      font-size: $cx-default-font-size,
-      height: 100%,
-      background-color: #eee
-   ),
-   body: (
-      margin: 0,
-      padding: 0,
-      height: 100%,
-      color: $cx-default-color
-   ),
-   h1: (
-      font-size: 2rem,
-      line-height: 1.1,
-      margin: 0 0 0.75rem 0,
-      font-weight: 500
-   ),
-   h2: (
-      font-size: 1.75rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h3: (
-      font-size: 1.5rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h4: (
-      font-size: 1.3rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h5: (
-      font-size: 1.15rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h6: (
-      font-size: 1rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   p: (
-      margin: 0 0 1rem 0
-   ),
-   a: (
-      text-decoration: none,
-      color: #0275d8
-   ),
-   "a:hover": (
-      text-decoration: underline
-   ),
-   ul: (
-      margin: 0 0 1rem 0
-   ),
-   ol: (
-      margin: 0 0 1rem 0
-   ),
-   th: (
-      font-weight: 500
-   ),
-   text: (
-      fill: currentColor,
-      stroke: none
-   ),
-   table: (
-      font-size: inherit
-   )
-) !default;
-
-$cx-default-cover-border-color: $cx-default-border-color !default;
-$cx-default-cover-background-color: white !default;
-
-@import "charts/variables";
-@import "ui/variables";
-@import "widgets/variables";
+@forward "./util/variables.scss";
+@forward "./ui/variables.scss";
+@forward "./widgets/variables.scss";
+@forward "./svg/variables.scss";
+@forward "./charts/variables.scss";

package/src/widgets/Button.maps.scss

@@ -0,0 +1,103 @@
+@use "sass:map";
+@use "./lists" as *;
+@use "./variables" as *;
+
+$cx-button-state-style-map: (
+   default: (
+      background-color: $cx-default-button-background-color,
+      box-shadow: $cx-default-button-box-shadow,
+      border-color: $cx-default-button-border-color,
+      border-width: $cx-default-button-border-width,
+      border-radius: $cx-default-button-border-radius,
+      border-style: solid,
+      user-select: none,
+      color: $cx-default-button-color,
+      font-family: $cx-default-button-font-family,
+      font-size: $cx-default-button-font-size,
+      font-weight: $cx-default-button-font-weight,
+      line-height: $cx-default-button-line-height,
+      padding: $cx-default-button-padding,
+      cursor: pointer,
+      -webkit-appearance: none,
+      -moz-appearance: none,
+      appearance: none,
+      white-space: nowrap,
+      text-decoration: none,
+   ),
+   hover: (
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
+      text-decoration: none,
+   ),
+   focus: (
+      outline: none,
+      box-shadow: 0 0 1px 1px rgba(77, 144, 254, 0.8),
+   ),
+   hover-focus: (),
+   disabled: (
+      color: gray,
+      box-shadow: none,
+      pointer-events: none,
+   ),
+   active: (
+      top: 1px,
+      box-shadow: none,
+   ),
+) !default;
+
+$cx-button-mods: (
+   primary: (
+      default: (
+         background-color: #1f99f8,
+         border-color: #1e88e5,
+         color: white,
+      ),
+      disabled: (
+         background-color: rgba(31, 153, 248, 0.5),
+         border-color: rgba(30, 136, 229, 0.1),
+         color: rgba(255, 255, 255, 0.6),
+      ),
+      hover: (
+         background-color: #1f99f8,
+      ),
+   ),
+   danger: (
+      default: (
+         background-color: #d32f2f,
+         border-color: #c62828,
+         color: white,
+      ),
+      disabled: (
+         background-color: rgba(211, 47, 47, 0.6),
+         border-color: rgba(198, 40, 40, 0.1),
+         color: rgba(255, 255, 255, 0.5),
+      ),
+      hover: (
+         background-color: #d32f2f,
+      ),
+   ),
+   hollow: (
+      default: (
+         background-color: transparent,
+         border-color: transparent,
+         color: inherit,
+         box-shadow: none,
+      ),
+      hover: map.merge(
+            map.get($cx-list-item, hover),
+            (
+               box-shadow: none,
+               border-color: transparent,
+            )
+         ),
+      focus: map.merge(
+            map.get($cx-list-item, selected-cursor),
+            (
+               box-shadow: none,
+               border-color: transparent,
+            )
+         ),
+      disabled: (
+         color: rgba(128, 128, 128, 0.5),
+      ),
+   ),
+) !default;