cx 26.2.2 → 26.2.4

package/src/widgets/overlay/index.scss

@@ -1,15 +1,6 @@
-
-@import 'captureMouse';
-@import 'Overlay';
-@import 'Dropdown';
-@import 'Window';
-@import 'Tooltip';
-@import 'Toast';
-
-
-
-
-
-
-
-
+@use 'captureMouse';
+@use 'Overlay';
+@use 'Dropdown';
+@use 'Window';
+@use 'Tooltip';
+@use 'Toast';

package/src/widgets/overlay/maps.scss

@@ -0,0 +1,44 @@
+@use "../variables" as *;
+
+$cx-dropdown-styles: (
+   color: $cx-default-dropdown-color,
+   background-color: $cx-default-dropdown-background-color,
+   border-radius: $cx-default-border-radius,
+   border-color: $cx-default-border-color,
+   border-width: 0,
+   box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.29),
+   white-space: normal,
+   font-weight: normal,
+   font-size: $cx-default-font-size,
+   text-align: left,
+   line-height: normal,
+) !default;
+
+@forward "./Window.maps.scss";
+
+$cx-toast-mods: (
+   warning: (
+      default: (
+         color: #fff,
+         background-color: #f09037,
+      ),
+   ),
+   primary: (
+      default: (
+         color: #fff,
+         background-color: #1f99f8,
+      ),
+   ),
+   success: (
+      default: (
+         color: #fff,
+         background-color: #5cb85c,
+      ),
+   ),
+   error: (
+      default: (
+         color: #fff,
+         background-color: #d9534f,
+      ),
+   ),
+) !default;

package/src/widgets/overlay/variables.scss

@@ -1,3 +1,5 @@
+@use "../../util/scss/defaults.scss" as *;
+@use "../../util/scss/include.scss" as *;
 @use "sass:map";
 
 // TOOLTIP
@@ -7,7 +9,9 @@ $cx-tooltip-border-width: 1px !default;
 $cx-tooltip-border-radius: 5px !default;
 $cx-tooltip-arrow-size: 5px !default;
 $cx-tooltip-color: null !default;
+$cx-tooltip-font-size: smaller !default;
 $cx-tooltip-padding: 10px !default;
+$cx-tooltip-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3) !default;
 
 $cx-tooltip-background-color-error: white !default;
 $cx-tooltip-border-color-error: #e63001 !default;
@@ -18,20 +22,10 @@ $cx-default-dropdown-color: $cx-default-color !default;
 $cx-default-dropdown-background-color: white !default;
 $cx-default-dropdown-arrow-size: 6px !default;
 $cx-default-dropdown-arrow-offset: 16px !default;
-
-$cx-dropdown-styles: (
-   color: $cx-default-dropdown-color,
-   background-color: $cx-default-dropdown-background-color,
-   border-radius: $cx-default-border-radius,
-   border-color: $cx-default-border-color,
-   border-width: 0,
-   box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.29),
-   white-space: normal,
-   font-weight: normal,
-   font-size: $cx-default-font-size,
-   text-align: left,
-   line-height: normal,
-) !default;
+$cx-default-dropdown-arrow-shadow-color: null !default;
+$cx-default-dropdown-arrow-shadow-size: 2px !default;
+$cx-default-dropdown-arrow-shadow-offset: 2px !default;
+$cx-default-dropdown-padding: $cx-default-container-padding !default;
 
 // TOAST
 $cx-default-toast-color: $cx-default-color !default;
@@ -39,37 +33,12 @@ $cx-default-toast-background-color: rgb(255, 255, 255) !default;
 $cx-default-toast-border-width: 0 !default;
 $cx-default-toast-border-color: rgba(255, 255, 255, 0) !default;
 $cx-default-toast-box-shadow: 0 0 5px 1px rgba(128, 128, 128, 0.3) !default;
+$cx-default-toast-border-radius: $cx-default-border-radius !default;
+$cx-default-toast-font-size: null !default;
 $cx-default-toast-padding: 10px !default;
 
-$cx-toast-mods: (
-   warning: (
-      default: (
-         color: #fff,
-         background-color: #f09037,
-      ),
-   ),
-   primary: (
-      default: (
-         color: #fff,
-         background-color: #1f99f8,
-      ),
-   ),
-   success: (
-      default: (
-         color: #fff,
-         background-color: #5cb85c,
-      ),
-   ),
-   error: (
-      default: (
-         color: #fff,
-         background-color: #d9534f,
-      ),
-   ),
-) !default;
-
 // WINDOW
-@import "Window.variables";
+@forward "Window.variables";
 
 $cx-dependencies: map.merge(
    $cx-dependencies,

package/src/widgets/variables.scss

@@ -1,97 +1,35 @@
-@use "sass:map";
+// Forward utility variables first (so they're available to consumers)
+@forward "../util/scss/defaults.scss";
+@forward "../util/scss/include.scss";
 
-// 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;
+// Forward widget base variables
+@forward "./box.scss";
+@forward "Button.variables.scss";
 
-$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;
+// Use utilities locally for derived variable definitions
+@use "sass:map";
+@use "../util/scss/defaults.scss" as *;
+@use "../util/scss/include.scss" as include;
 
-@import "form/variables";
-@import "grid/variables";
-@import "nav/variables";
-@import "overlay/variables";
-@import "drag-drop/variables";
-@import "Button.variables";
+//Selection
+$cx-selection-background-color: rgba(135, 206, 250, 0.6);
 
-// HEADING
-$cx-caption-style-map: () !default;
+//List
+$cx-default-list-item-padding: 5px 10px !default;
 
-$cx-caption-level-style-map: (
-   1: (
-      margin: 0,
-      padding: 0,
-   ),
-   2: (
-      margin: 0,
-      padding: 0,
-   ),
-   3: (
-      margin: 0,
-      padding: 0,
-   ),
-   4: (
-      margin: 0,
-      padding: 0,
-   ),
-   5: (
-      margin: 0,
-      padding: 0,
-   ),
-   6: (
-      margin: 0,
-      padding: 0,
-   ),
-) !default;
+// Section
+$cx-default-section-header-padding: 1rem 0 !default;
+$cx-default-section-header-margin: 0 1.5rem !default;
+$cx-default-section-header-border-width: 1px !default;
+$cx-default-section-header-border-color: rgba(128, 128, 128, 0.3) !default;
+$cx-default-section-header-font-weight: null !default;
 
-// SECTION
-$cx-section-styles: () !default;
+$cx-default-section-footer-padding: 1rem 0 !default;
+$cx-default-section-footer-margin: 0 1.5rem !default;
+$cx-default-section-footer-border-width: 1px !default;
+$cx-default-section-footer-border-color: rgba(128, 128, 128, 0.3) !default;
 
-$cx-section-mods: (
-   card: (
-      default: (
-         background-color: rgba(255, 255, 255, 0.9),
-         border-radius: 3px,
-         border-color: $cx-default-border-color,
-      ),
-   ),
-   warning: (
-      default: (
-         color: #fff,
-         background-color: #f09037,
-         border-radius: 3px,
-      ),
-   ),
-   primary: (
-      default: (
-         color: #fff,
-         background-color: #1f99f8,
-         border-radius: 3px,
-      ),
-   ),
-   success: (
-      default: (
-         color: #fff,
-         background-color: #5cb85c,
-         border-radius: 3px,
-      ),
-   ),
-   error: (
-      default: (
-         color: #fff,
-         background-color: #d9534f,
-         border-radius: 3px,
-      ),
-   ),
-) !default;
+$cx-default-section-body-padding: 1rem 1.5rem !default;
 
 // ProgressBar
 $cx-default-progressbar-width: 180px !default;
@@ -105,38 +43,16 @@ $cx-default-progressbar-border-radius: 0 !default;
 
 $cx-default-progressbar-indicator-background-color: rgba(#98d4ff, 0.8) !default;
 
-$cx-progressbar-state-style-map: (
-   default: (
-      position: relative,
-      width: $cx-default-progressbar-width,
-      min-height: $cx-default-progressbar-height,
-      background-color: $cx-default-progressbar-background-color,
-      border-style: solid,
-      border-color: $cx-default-progressbar-border-color,
-      border-width: $cx-default-progressbar-border-width,
-      border-radius: $cx-default-progressbar-border-radius,
-      font-size: $cx-default-progressbar-font-size,
-      text-align: center,
-      line-height: $cx-default-progressbar-height,
-   ),
-   disabled: (
-      opacity: 0.2,
-   ),
-);
-
-$cx-progressbar-mods: ();
-
-$cx-highlightedsearchtext-style-map: (
-   font-weight: bold,
-) !default;
-
-// for backward compatibility
-.cxm-well {
-   @extend .cxm-card !optional;
-}
+@forward "form/Field.variables.scss";
+@forward "form/variables";
+@forward "grid/variables";
+@forward "nav/variables";
+@forward "overlay/variables";
+@forward "drag-drop/variables";
+@forward "overlay/variables";
 
 $cx-dependencies: map.merge(
-   $cx-dependencies,
+   include.$cx-dependencies,
    (
       "cx/widgets/FlexRow": "cx/widgets/FlexBox",
       "cx/widgets/FlexCol": "cx/widgets/FlexBox",

package/src/global.scss

@@ -1,14 +0,0 @@
-
-$cx-include-global-rules: false !default;
-
-@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();
-}