@updevs/components 1.0.0-alpha.8 → 1.0.0-alpha.81

package/assets/styles/_utilities.scss

@@ -1,98 +1,133 @@
 $border-values: (
-    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
-    wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
-    0: 0,
+        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
+        wide: $border-width-wide var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
+        0: 0,
 );
 
+$utilities-border-colors: map-loop((
+        "red": red,
+        "green": green,
+), rgba-css-var, "$key", "border") !default;
+
 //Utilities
 $utilities: (
-    "object": (
-        property: object-fit,
-        class: object,
-        values: (
-            contain: contain,
-            cover: cover,
-            fill: fill,
-            scale-down: scale-down,
-            none: none,
-        ),
-    ),
-    "spacing": (
-        property: letter-spacing,
-        class: tracking,
-        values: (
-            tight: -0.05em,
-            normal: 0,
-            wide: 0.05em,
-        ),
-    ),
-    "cursor": (
-        property: cursor,
-        class: cursor,
-        values: (
-            auto: auto,
-            pointer: pointer,
-            move: move,
-            not-allowed: not-allowed,
-            zoom-in: zoom-in,
-            zoom-out: zoom-out,
-            default: default,
-            none: none,
-            help: help,
-            progress: progress,
-            wait: wait,
-            text: text,
-            v-text: vertical-text,
-            grab: grab,
-            grabbing: grabbing,
-        ),
-    ),
-    "border": (
-        property: border,
-        values: $border-values,
-    ),
-    "border-top": (
-        property: border-top,
-        values: $border-values,
-    ),
-    "border-end": (
-        class: border-end,
-        property: border-right,
-        values: $border-values,
-    ),
-    "border-bottom": (
-        property: border-bottom,
-        values: $border-values,
-    ),
-    "border-start": (
-        class: border-start,
-        property: border-left,
-        values: $border-values,
-    ),
-    "border-x": (
-        class: border-x,
-        property: border-left border-right,
-        values: $border-values,
-    ),
-    "border-y": (
-        class: border-y,
-        property: border-top border-bottom,
-        values: $border-values,
-    ),
-    "width": (
-        property: width,
-        class: w,
-        values: $size-values,
-    ),
-    "height": (
-        property: height,
-        class: h,
-        values: $size-values,
-    ),
-    "columns": (
-        property: columns,
-        class: columns,
-        responsive: true,
-        values: 2 3 4,
-    ),
+        "object": (
+                property: object-fit,
+                class: object,
+                values: (
+                        contain: contain,
+                        cover: cover,
+                        fill: fill,
+                        scale-down: scale-down,
+                        none: none,
+                ),
+        ),
+        "cursor": (
+                property: cursor,
+                class: cursor,
+                values: (
+                        auto: auto,
+                        pointer: pointer,
+                        move: move,
+                        not-allowed: not-allowed,
+                        zoom-in: zoom-in,
+                        zoom-out: zoom-out,
+                        default: default,
+                        none: none,
+                        help: help,
+                        progress: progress,
+                        wait: wait,
+                        text: text,
+                        v-text: vertical-text,
+                        grab: grab,
+                        grabbing: grabbing,
+                        crosshair: crosshair,
+                ),
+        ),
+        "border": (
+                property: border,
+                values: $border-values,
+        ),
+        "border-top": (
+                property: border-top,
+                values: $border-values,
+        ),
+        "border-end": (
+                class: border-end,
+                property: border-right,
+                values: $border-values,
+        ),
+        "border-bottom": (
+                property: border-bottom,
+                values: $border-values,
+        ),
+        "border-start": (
+                class: border-start,
+                property: border-left,
+                values: $border-values,
+        ),
+        "border-x": (
+                class: border-x,
+                property: border-left border-right,
+                values: $border-values,
+        ),
+        "border-y": (
+                class: border-y,
+                property: border-top border-bottom,
+                values: $border-values,
+        ),
+        "width": (
+                property: width,
+                class: w,
+                values: $size-values,
+        ),
+        "height": (
+                property: height,
+                class: h,
+                values: $size-values,
+        ),
+        "columns": (
+                property: columns,
+                class: columns,
+                responsive: true,
+                values: 2 3 4,
+        ),
+        "bg-pattern": (
+                property: background,
+                class: bg-pattern,
+                values: (
+                        transparent: #{url-svg(
+        '<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>'
+      )} repeat center/16px 16px,
+                )
+        ),
+        "bg-gradient": (
+                property: background,
+                class: bg-gradient,
+                values: (
+                        null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
+                ),
+        ),
+        "bg-gradient-direction": (
+                property: --#{$prefix}gradient-direction,
+                class: bg-gradient,
+                values: (
+                        to-t: to top,
+                        to-te: to top right,
+                        to-e: to right,
+                        to-be: to bottom right,
+                        to-b: to bottom,
+                        to-bs: to bottom left,
+                        to-s: to left,
+                        to-ts: to top left,
+                ),
+        ),
+        "table-layout": (
+                property: table-layout,
+                class: table,
+                values: (
+                        auto: auto,
+                        fixed: fixed,
+                ),
+        ),
 ) !default;

package/assets/styles/_variables-dark.scss

@@ -1,15 +1,17 @@
+@use "sass:color";
+
 //
 // Dark mode
 //
-$darken-dark: darken($dark, 2%) !default;
-$lighten-dark: lighten($dark, 2%) !default;
-$border-color-dark: lighten($dark, 4%) !default;
+$darken-dark: color.adjust($dark, $lightness: -2%) !default;
+$lighten-dark: color.adjust($dark, $lightness: 2%) !default;
+$border-color-dark: color.adjust($dark, $lightness: 8%) !default;
 $border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
-$border-dark-color-dark: lighten($dark, 4%) !default;
-$border-color-active-dark: lighten($dark, 12%) !default;
+$border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
+$border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
 
 //new bootsrap variables
-$body-color-dark: $light !default;
+$body-color-dark: $gray-200 !default;
 $body-emphasis-color-dark: $white !default;
 
 $code-color-dark: var(--#{$prefix}gray-300) !default;