@updevs/components 1.0.0-alpha.40 → 1.0.0-alpha.42

package/assets/styles/_core.scss

@@ -1,6 +1,8 @@
 @import "config";
 @import "bootstrap-components";
 
+@import "props";
+
 @import "fonts/webfonts";
 
 @import "layout/root";
@@ -49,6 +51,7 @@
 @import "ui/ribbons";
 @import "ui/markdown";
 @import "ui/placeholder";
+@import "ui/segmented";
 @import "ui/steps";
 @import "ui/status";
 @import "ui/switch-icon";
@@ -61,6 +64,10 @@
 @import "ui/type";
 @import "ui/charts";
 @import "ui/offcanvas";
+@import "ui/chat";
+@import "ui/signature";
+
+@import "helpers/index";
 
 @import "utils/background";
 @import "utils/colors";
@@ -69,3 +76,5 @@
 @import "utils/opacity";
 @import "utils/shadow";
 @import "utils/text";
+
+@import "debug";

package/assets/styles/_debug.scss

@@ -0,0 +1,49 @@
+$debug: false;
+
+@if $debug {
+    $colors: (
+            "blue": $blue,
+            "azure": $azure,
+            "indigo": $indigo,
+            "purple": $purple,
+            "pink": $pink,
+            "red": $red,
+            "orange": $orange,
+            "yellow": $yellow,
+            "lime": $lime,
+            "green": $green,
+            "teal": $teal,
+            "cyan": $cyan,
+    );
+
+    @each $name, $color in $colors {
+        @debug ("#{$name}: '#{$color}'");
+        @debug ("#{$name}-100: '#{tint-color($color, 8)}'");
+        @debug ("#{$name}-200: '#{tint-color($color, 6)}'");
+        @debug ("#{$name}-300: '#{tint-color($color, 4)}'");
+        @debug ("#{$name}-400: '#{tint-color($color, 2)}'");
+        @debug ("#{$name}-500: '#{$color}'");
+        @debug ("#{$name}-600: '#{shade-color($color, 2)}'");
+        @debug ("#{$name}-700: '#{shade-color($color, 4)}'");
+        @debug ("#{$name}-800: '#{shade-color($color, 6)}'");
+        @debug ("#{$name}-900: '#{shade-color($color, 8)}'");
+    }
+
+    @debug ("gray: '#{$gray-500}'");
+    @debug ("gray-100: '#{$gray-100}'");
+    @debug ("gray-200: '#{$gray-200}'");
+    @debug ("gray-300: '#{$gray-300}'");
+    @debug ("gray-400: '#{$gray-400}'");
+    @debug ("gray-500: '#{$gray-500}'");
+    @debug ("gray-600: '#{$gray-600}'");
+    @debug ("gray-700: '#{$gray-700}'");
+    @debug ("gray-800: '#{$gray-800}'");
+    @debug ("gray-900: '#{$gray-900}'");
+
+    @debug ("border-color: '#{$border-color}'");
+    @debug ("text-secondary: '#{$text-secondary}'");
+
+    @each $name, $color in $social-colors {
+        @debug ("#{$name}: '#{$color}'");
+    }
+}

package/assets/styles/_props.scss

@@ -0,0 +1,91 @@
+@import "config";
+
+:root,
+:host {
+    /** Fonts */
+    --#{$prefix}font-monospace: #{$font-family-monospace};
+    --#{$prefix}font-sans-serif: #{$font-family-sans-serif};
+    --#{$prefix}font-serif: #{$font-family-serif};
+    --#{$prefix}font-comic: #{$font-family-comic};
+
+    /** Gray colors */
+    --#{$prefix}gray-50: #{$gray-50};
+    --#{$prefix}gray-100: #{$gray-100};
+    --#{$prefix}gray-200: #{$gray-200};
+    --#{$prefix}gray-300: #{$gray-300};
+    --#{$prefix}gray-400: #{$gray-400};
+    --#{$prefix}gray-500: #{$gray-500};
+    --#{$prefix}gray-600: #{$gray-600};
+    --#{$prefix}gray-700: #{$gray-700};
+    --#{$prefix}gray-800: #{$gray-800};
+    --#{$prefix}gray-900: #{$gray-900};
+    --#{$prefix}gray-950: #{$gray-950};
+
+    --#{$prefix}white: #{$white};
+    --#{$prefix}black: #{$black};
+    --#{$prefix}dark: #{$dark};
+    --#{$prefix}light: #{$light};
+
+    /** Brand colors */
+    --#{$prefix}brand: #{$primary};
+
+    /** Theme colors */
+    @each $name, $color in map-merge($theme-colors, $social-colors) {
+        --#{$prefix}#{$name}: #{$color};
+        --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+        --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
+        --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
+        --#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%);
+        --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
+        --#{$prefix}#{$name}-lt: color-mix(in oklab, var(--#{$prefix}#{$name}) 10%, transparent);
+        --#{$prefix}#{$name}-200: color-mix(in oklab, var(--#{$prefix}#{$name}) 20%, transparent);
+        --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
+    }
+
+    /** Gray colors */
+    @each $name, $color in $gray-colors {
+        --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color, white) > $min-contrast-ratio, var(--#{$prefix}white), var(--#{$prefix}body-color))};
+    }
+
+    /** Spacers */
+    @each $name, $value in $spacers {
+        --#{$prefix}spacer-#{$name}: #{$value};
+    }
+
+    /** Font sizes */
+    @each $name, $value in $font-weights {
+        --#{$prefix}font-weight-#{$name}: #{$value};
+    }
+
+    @each $name, $value in $font-sizes {
+        --#{$prefix}font-size-h#{$name}: #{$value};
+    }
+
+    @each $name, $value in $line-heights {
+        --#{$prefix}line-height-#{$name}: #{$value};
+    }
+
+    /** Shadows */
+    @each $name, $value in $box-shadows {
+        --#{$prefix}shadow#{if($name, '-#{$name}', '')}: #{$value};
+    }
+
+    /** Border radiuses */
+    --#{$prefix}border-radius-scale: 1;
+    @each $name, $value in $border-radiuses {
+        @if $name {
+            --#{$prefix}border-radius-#{$name}: calc(#{$value} * var(--#{$prefix}border-radius-scale, 1));
+        } @else {
+            --#{$prefix}border-radius: #{$value};
+        }
+    }
+
+    /** Backdrops */
+    --#{$prefix}backdrop-opacity: #{$backdrop-opacity};
+    --#{$prefix}backdrop-bg: var(--#{$prefix}bg-surface-dark);
+    @each $name, $value in $backdrops {
+        --#{$prefix}backdrop-bg#{if($name, '-#{$name}', '')}: #{$value};
+    }
+    --#{$prefix}backdrop-blur: #{$backdrop-blur};
+    --#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
+}

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

@@ -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;