@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.100

package/assets/styles/_utilities-marketing.scss

@@ -0,0 +1,209 @@
+$negative-spacers-extra: if(
+                $enable-negative-margins,
+                negativify-map(map-merge($spacers, $spacers-extra)),
+                null
+);
+
+$utilities: (
+    // Margin utilities
+        "margin":
+        (
+                responsive: true,
+                property: margin,
+                class: m,
+                values: $spacers-extra,
+        ),
+        "margin-x": (
+                responsive: true,
+                property: margin-right margin-left,
+                class: mx,
+                values: $spacers-extra,
+        ),
+        "margin-y": (
+                responsive: true,
+                property: margin-top margin-bottom,
+                class: my,
+                values: $spacers-extra,
+        ),
+        "margin-top": (
+                responsive: true,
+                property: margin-top,
+                class: mt,
+                values: $spacers-extra,
+        ),
+        "margin-end": (
+                responsive: true,
+                property: margin-right,
+                class: me,
+                values: $spacers-extra,
+        ),
+        "margin-bottom": (
+                responsive: true,
+                property: margin-bottom,
+                class: mb,
+                values: $spacers-extra,
+        ),
+        "margin-start": (
+                responsive: true,
+                property: margin-left,
+                class: ms,
+                values: $spacers-extra,
+        ),
+    // Negative margin utilities
+        "negative-margin":
+        (
+                responsive: true,
+                property: margin,
+                class: m,
+                values: $negative-spacers-extra,
+        ),
+        "negative-margin-x": (
+                responsive: true,
+                property: margin-right margin-left,
+                class: mx,
+                values: $negative-spacers-extra,
+        ),
+        "negative-margin-y": (
+                responsive: true,
+                property: margin-top margin-bottom,
+                class: my,
+                values: $negative-spacers-extra,
+        ),
+        "negative-margin-top": (
+                responsive: true,
+                property: margin-top,
+                class: mt,
+                values: $negative-spacers-extra,
+        ),
+        "negative-margin-end": (
+                responsive: true,
+                property: margin-right,
+                class: me,
+                values: $negative-spacers-extra,
+        ),
+        "negative-margin-bottom": (
+                responsive: true,
+                property: margin-bottom,
+                class: mb,
+                values: $negative-spacers-extra,
+        ),
+        "negative-margin-start": (
+                responsive: true,
+                property: margin-left,
+                class: ms,
+                values: $negative-spacers-extra,
+        ),
+    // Padding utilities
+        "padding":
+        (
+                responsive: true,
+                property: padding,
+                class: p,
+                values: $spacers-extra,
+        ),
+        "padding-x": (
+                responsive: true,
+                property: padding-right padding-left,
+                class: px,
+                values: $spacers-extra,
+        ),
+        "padding-y": (
+                responsive: true,
+                property: padding-top padding-bottom,
+                class: py,
+                values: $spacers-extra,
+        ),
+        "padding-top": (
+                responsive: true,
+                property: padding-top,
+                class: pt,
+                values: $spacers-extra,
+        ),
+        "padding-end": (
+                responsive: true,
+                property: padding-right,
+                class: pe,
+                values: $spacers-extra,
+        ),
+        "padding-bottom": (
+                responsive: true,
+                property: padding-bottom,
+                class: pb,
+                values: $spacers-extra,
+        ),
+        "padding-start": (
+                responsive: true,
+                property: padding-left,
+                class: ps,
+                values: $spacers-extra,
+        ),
+    // Gap utility
+        "gap":
+        (
+                responsive: true,
+                property: gap,
+                class: gap,
+                values: $spacers-extra,
+        ),
+        "row-gap": (
+                responsive: true,
+                property: row-gap,
+                class: row-gap,
+                values: $spacers-extra,
+        ),
+        "column-gap": (
+                responsive: true,
+                property: column-gap,
+                class: column-gap,
+                values: $spacers-extra,
+        ),
+    // Letter spacing
+        "spacing":
+        (
+                property: letter-spacing,
+                class: tracking,
+                values: (
+                        tight: $spacing-tight,
+                        normal: $spacing-normal,
+                        wide: $spacing-wide,
+                ),
+        ),
+        "width": (
+                property: width,
+                class: w,
+                values: $spacers-extra,
+        ),
+        "height": (
+                property: height,
+                class: h,
+                values: $spacers-extra,
+        ),
+        "filter": (
+                property: filter,
+                class: filter,
+                values: (
+                        grayscale: grayscale(100%),
+                ),
+        ),
+        "gutter-x": (
+                responsive: true,
+                css-var: true,
+                css-variable-name: gutter-x,
+                class: gx,
+                values: $spacers-extra,
+        ),
+        "gutter-y": (
+                responsive: true,
+                css-var: true,
+                css-variable-name: gutter-y,
+                class: gy,
+                values: $spacers-extra,
+        ),
+        "gutter": (
+                responsive: true,
+                css-var: true,
+                css-variable-name: gutter-x,
+                class: g,
+                values: $spacers-extra,
+        )
+);

package/assets/styles/_utilities.scss

@@ -0,0 +1,133 @@
+$border-values: (
+        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,
+                ),
+        ),
+        "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

@@ -0,0 +1,19 @@
+@use "sass:color";
+
+//
+// Dark mode
+//
+$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: color.adjust($dark, $lightness: 4%) !default;
+$border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
+
+//new bootsrap variables
+$body-color-dark: $gray-200 !default;
+$body-emphasis-color-dark: $white !default;
+
+$code-color-dark: var(--#{$prefix}gray-300) !default;
+$text-secondary-dark: rgba(153, 159, 164, 1) !default;
+