@updevs/components 1.0.0-alpha.5 → 1.0.0-alpha.51

package/README.md

@@ -1,11 +1 @@
-# After updating tabler
-
-Replace all "tblr" to "upd"
-
-LOCAL:
-"@updevs/icons": "file:../icons",
-"@updevs/sdk": "file:../sdk",
-
-PUBLISHED:
-"@updevs/icons": "^1.0.4",
-"@updevs/sdk": "^1.0.0-alpha.15",
+# UpDevs Components Library for Angular v18

package/assets/styles/_bootstrap-components.scss

@@ -33,6 +33,23 @@
 
 // Helpers
 @import "bootstrap/scss/helpers";
+@import "bootstrap/scss/utilities";
 
-// Utilities
+// extend `text-align` utility
+$utilities: map-merge(
+        $utilities,
+        (
+            "text-align": map-merge(
+                    map-get($utilities, "text-align"),
+                    (
+                        values: map-merge(
+                                map-get(map-get($utilities, "text-align"), "values"),
+                                (justify: justify),
+                        ),
+                    ),
+            ),
+        )
+);
+
+// include utilities API last to generate classes based on the Sass map in `_utilities.scss`
 @import "bootstrap/scss/utilities/api";

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/_seven-columns.scss

@@ -0,0 +1,73 @@
+@media (min-width: 768px) {
+    .seven-cols .col-1 {
+        width: 100%;
+    }
+
+    .seven-cols .col-6 {
+        width: 85.7142857143%;
+    }
+}
+
+@media (min-width: 992px) {
+    .seven-cols .col-1 {
+        width: 14.285714285714285714285714285714%;
+    }
+
+    .seven-cols .col-2 {
+        width: 28.5714285714%;
+    }
+
+    .seven-cols .col-3 {
+        width: 42.8571428571%;
+    }
+
+    .seven-cols .col-4 {
+        width: 57.1428571429%;
+    }
+
+    .seven-cols .col-5 {
+        width: 71.4285714286%;
+    }
+
+    .seven-cols .col-6 {
+        width: 85.7142857143%;
+    }
+
+    .seven-cols .col-7 {
+        width: 100%;
+    }
+}
+
+/**
+ *  The following is not really needed in this case
+ *  Only to demonstrate the usage of @media for large screens
+ */
+@media (min-width: 1200px) {
+    .seven-cols .col-1 {
+        width: 14.285714285714285714285714285714%;
+    }
+
+    .seven-cols .col-2 {
+        width: 28.5714285714%;
+    }
+
+    .seven-cols .col-3 {
+        width: 42.8571428571%;
+    }
+
+    .seven-cols .col-4 {
+        width: 57.1428571429%;
+    }
+
+    .seven-cols .col-5 {
+        width: 71.4285714286%;
+    }
+
+    .seven-cols .col-6 {
+        width: 85.7142857143%;
+    }
+
+    .seven-cols .col-7 {
+        width: 100%;
+    }
+}

package/assets/styles/_updevs.scss

@@ -7,3 +7,19 @@
 .upd-right-login-image {
     content: var(--upd-right-login-image-src);
 }
+
+.upd-right-login-cover-image {
+    background-image: var(--upd-right-login-cover-image-bg);
+}
+
+// TODO: Workaround. Wait for resolution of bug: https://github.com/tabler/tabler/issues/2271
+@media (min-width: 992px) {
+    :host,
+    :root {
+        margin-left: 0;
+    }
+}
+
+body {
+    overflow-y: scroll;
+}

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,
+        )
+);