@updevs/components 1.0.0-alpha.6 → 1.0.0-alpha.61

package/assets/styles/helpers/_index.scss

@@ -0,0 +1,143 @@
+//
+// Clearfix
+//
+.clearfix {
+    @include clearfix();
+}
+
+//
+// Text truncation
+//
+.text-truncate {
+    @include text-truncate();
+}
+
+//
+// Vertical rule
+//
+.vr {
+    display: inline-block;
+    align-self: stretch;
+    width: $vr-border-width;
+    min-height: 1em;
+    background-color: currentcolor;
+    opacity: $hr-opacity;
+}
+
+//
+// Stretched link
+//
+.stretched-link {
+    &::#{$stretched-link-pseudo-element} {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: $stretched-link-z-index;
+        content: "";
+    }
+}
+
+//
+// Visually hidden
+//
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+    @include visually-hidden();
+}
+
+//
+// Stacks
+//
+.hstack {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: stretch;
+}
+
+.vstack {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-self: stretch;
+}
+
+//
+// Position
+//
+// Shorthand
+
+.fixed-top {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $zindex-fixed;
+}
+
+// Responsive sticky top and bottom
+@each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .sticky#{$infix}-top {
+            position: sticky;
+            top: 0;
+            z-index: $zindex-sticky;
+        }
+
+        .sticky#{$infix}-bottom {
+            position: sticky;
+            bottom: 0;
+            z-index: $zindex-sticky;
+        }
+    }
+}
+
+//
+// Aspect ratio
+//
+.ratio {
+    position: relative;
+    width: 100%;
+
+    &::before {
+        display: block;
+        padding-top: var(--#{$prefix}aspect-ratio);
+        content: "";
+    }
+
+    > * {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+@each $key, $ratio in $aspect-ratios {
+    .ratio-#{$key} {
+        --#{$prefix}aspect-ratio: #{$ratio};
+    }
+}
+
+//
+// Focus ring
+//
+.focus-ring:focus {
+    outline: 0;
+    // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+    box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+}
+

package/assets/styles/layout/_core.scss

@@ -3,10 +3,11 @@ body {
     letter-spacing: $body-letter-spacing;
     touch-action: manipulation;
     text-rendering: optimizeLegibility;
-    font-feature-settings: "liga" 0;
+    font-feature-settings: "liga" 0, "cv03", "cv04", "cv11";
     position: relative;
     min-height: 100%;
     height: 100%;
+    padding: 0;
 
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -58,4 +59,4 @@ body {
             border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
         }
     }
-}
+}

package/assets/styles/layout/_dark.scss

@@ -1,50 +1,62 @@
+@use "sass:color";
+
 // stylelint-disable declaration-no-important
 
-body {
-    &:not(.theme-dark):not([data-bs-theme=dark]) {
-        .hide-theme-light {
-            display: none !important;
+@if $enable-dark-mode {
+    :root {
+        &:not(.theme-dark):not([data-bs-theme="dark"]) {
+            .hide-theme-light {
+                display: none !important;
+            }
+
+            .img-dark {
+                display: none !important;
+            }
         }
-    }
 
-    &.theme-dark,
-    &[data-bs-theme=dark] {
-        .hide-theme-dark {
-            display: none !important;
+        &.theme-dark,
+        &[data-bs-theme="dark"] {
+            .hide-theme-dark {
+                display: none !important;
+            }
+
+            .img-light {
+                display: none !important;
+            }
         }
     }
-}
 
-@if $enable-dark-mode {
+
     @include color-mode(dark, true) {
-        --#{$prefix}body-color: #{$body-color-dark};
-        --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
-        --#{$prefix}muted: #{$text-secondary-dark};
+        color-scheme: dark;
+        --#{$prefix}body-color: var(--#{$prefix}gray-200);
+        --#{$prefix}secondary: var(--#{$prefix}gray-400);
 
-        --#{$prefix}body-bg: #{$darken-dark};
-        --#{$prefix}body-bg-rgb: #{to-rgb($darken-dark)};
+        --#{$prefix}body-bg: var(--#{$prefix}gray-900);
         --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
         --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
 
-        --#{$prefix}bg-forms: #{$darken-dark};
-        --#{$prefix}bg-surface: #{$dark};
-        --#{$prefix}bg-surface-dark: #{$darken-dark};
-        --#{$prefix}bg-surface-secondary: #{$lighten-dark};
-        --#{$prefix}bg-surface-tertiary: #{$darken-dark};
+        --#{$prefix}bg-forms: var(--#{$prefix}gray-900);
+        --#{$prefix}bg-surface: var(--#{$prefix}gray-800);
+        --#{$prefix}bg-surface-inverted: var(--#{$prefix}gray-100);
+        --#{$prefix}bg-surface-secondary: var(--#{$prefix}gray-900);
+        --#{$prefix}bg-surface-tertiary: var(--#{$prefix}gray-800);
 
-        --#{$prefix}link-color: #{lighten($primary, 8%)};
-        --#{$prefix}link-hover-color: #ffdd00; // #{$primary};
+        --#{$prefix}text-inverted: var(--#{$prefix}gray-800);
+
+        --#{$prefix}link-color: var(--#{$prefix}primary);
+        --#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), black 20%);
 
         --#{$prefix}active-bg: #{$lighten-dark};
-        --#{$prefix}disabled-color: var(--#{$prefix}gray-700);
+        --#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), .4)};
 
-        --#{$prefix}border-color: var(--#{$prefix}dark-mode-border-color);
+        --#{$prefix}border-color: var(--#{$prefix}gray-700);
         --#{$prefix}border-color-translucent: var(
-                --#{$prefix}dark-mode-border-color-translucent
+                        --#{$prefix}dark-mode-border-color-translucent
         );
         --#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
-        --#{$prefix}border-color-active: var(
-                --#{$prefix}dark-mode-border-color-active
+        --#{$prefix}border-active-color: var(
+                        --#{$prefix}dark-mode-border-active-color
         );
 
         --#{$prefix}btn-color: #{$darken-dark};
@@ -52,13 +64,6 @@ body {
         --#{$prefix}code-color: var(--#{$prefix}body-color);
         --#{$prefix}code-bg: #{$border-dark-color-dark};
 
-        @each $color, $value in $theme-colors {
-            --#{$prefix}#{$color}-lt: #{theme-color-lighter($value, $dark)};
-            --#{$prefix}#{$color}-lt-rgb: #{to-rgb(
-          theme-color-lighter($value, $dark)
-        )};
-        }
-
         .navbar-brand-autodark {
             .navbar-brand-image {
                 @include autodark-image;

package/assets/styles/layout/_footer.scss

@@ -9,4 +9,4 @@
 .footer-transparent {
     background-color: transparent;
     border-top: 0;
-}
+}

package/assets/styles/layout/_navbar.scss

@@ -13,7 +13,7 @@
             margin-right: 0;
 
             .nav-link {
-                padding: .5rem calc(#{$container-padding-x} / 2);
+                padding: 0.5rem calc(#{$container-padding-x} / 2);
                 justify-content: flex-start;
             }
         }
@@ -39,6 +39,12 @@
                 padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem);
                 color: inherit;
 
+                &.disabled {
+                    color: var(--#{$prefix}disabled-color);
+                    pointer-events: none;
+                    background-color: transparent;
+                }
+
                 &.active,
                 &:active {
                     background: var(--#{$prefix}navbar-active-bg);
@@ -76,8 +82,8 @@ Navbar
     --#{$prefix}navbar-border-width: #{$navbar-border-width};
     --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
     --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
-    --#{$prefix}navbar-color: var(--#{$prefix}body-color);
     --#{$prefix}navbar-border-color: #{$navbar-border-color};
+    --#{$prefix}navbar-hover-color: #{$navbar-hover-color};
     align-items: stretch;
     min-height: $navbar-height;
     box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
@@ -102,26 +108,21 @@ Navbar
 
         .nav-link {
             position: relative;
-            min-width: 2rem;
-            min-height: 2rem;
+            min-width: 2.5rem;
+            min-height: 2.5rem;
             justify-content: center;
             border-radius: var(--#{$prefix}border-radius);
 
             .badge {
                 position: absolute;
-                top: .375rem;
-                right: .375rem;
+                top: 0.375rem;
+                right: 0.375rem;
                 transform: translate(50%, -50%);
             }
         }
     }
 }
 
-.navbar-nav {
-    margin: 0;
-    padding: 0;
-}
-
 .navbar-expand {
     @each $breakpoint in map-keys($grid-breakpoints) {
         $next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -141,12 +142,16 @@ Navbar
                 .nav-item.active {
                     position: relative;
 
+                    .nav-link {
+                        color: var(--#{$prefix}navbar-active-color);
+                    }
+
                     &:after {
                         content: "";
                         position: absolute;
                         left: 0;
                         right: 0;
-                        bottom: -.25rem;
+                        bottom: -0.25rem;
                         border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
                         border-bottom-width: 2px;
                     }
@@ -214,7 +219,12 @@ Navbar toggler
     width: 1.25em;
     background: currentColor;
     border-radius: 10px;
-    @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
+    @include transition(
+                    top $navbar-toggler-animation-time $navbar-toggler-animation-time,
+                    bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
+                    transform $navbar-toggler-animation-time,
+                    opacity 0s $navbar-toggler-animation-time
+    );
     position: relative;
 
     &:before,
@@ -231,11 +241,11 @@ Navbar toggler
     }
 
     &:before {
-        top: -.45em;
+        top: -0.45em;
     }
 
     &:after {
-        bottom: -.45em;
+        bottom: -0.45em;
     }
 
     .navbar-toggler[aria-expanded="true"] & {
@@ -266,6 +276,9 @@ Navbar transparent
 Navbar nav
  */
 .navbar-nav {
+    --#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
+    margin: 0;
+    padding: 0;
     align-items: stretch;
 
     .nav-item {
@@ -315,7 +328,7 @@ Navbar vertical
                         }
 
                         .navbar-brand {
-                            padding: (($navbar-height - $navbar-brand-image-height) * .5) 0;
+                            padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
                             justify-content: center;
                         }
 
@@ -329,8 +342,8 @@ Navbar vertical
                             min-height: auto;
 
                             .nav-link {
-                                padding-top: .5rem;
-                                padding-bottom: .5rem;
+                                padding-top: 0.5rem;
+                                padding-bottom: 0.5rem;
                             }
                         }
 
@@ -364,7 +377,6 @@ Navbar vertical
     }
 }
 
-
 .navbar-overlap {
     &:after {
         content: "";

package/assets/styles/layout/_page.scss

@@ -6,10 +6,7 @@
 }
 
 .page-center {
-    .container {
-        margin-top: auto;
-        margin-bottom: auto;
-    }
+    justify-content: center;
 }
 
 .page-wrapper {
@@ -33,6 +30,9 @@
 .page-body {
     margin-top: var(--#{$prefix}page-padding-y);
     margin-bottom: var(--#{$prefix}page-padding-y);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
 }
 
 .page-body-card {
@@ -81,6 +81,7 @@
     min-height: 2.25rem;
     flex-direction: column;
     justify-content: center;
+    max-width: 100%;
 
     .page-wrapper & {
         margin: var(--#{$prefix}page-padding-y) 0 0;
@@ -166,4 +167,4 @@
     + .page-body-card {
         margin-top: 0;
     }
-}
+}

package/assets/styles/layout/_root.scss

@@ -2,31 +2,38 @@
 :host {
     font-size: 16px;
     height: 100%;
+
+    @include media-breakpoint-up(lg) {
+        margin-left: calc(100vw - 100%);
+        margin-right: 0;
+    }
 }
 
 :root,
 :host,
 [data-bs-theme="light"] {
-    @each $name, $color in map-merge($theme-colors, $gray-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}-lt: #{theme-color-lighter($color)};
-        --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
-    }
-
-    @each $name, $value in $spacers {
-        --#{$prefix}spacer-#{$name}: #{$value};
-    }
-    --#{$prefix}spacer: #{$spacer};
+    color-scheme: light;
+    --#{$prefix}spacer: var(--#{$prefix}spacer-2);
 
-    --#{$prefix}bg-surface: #{$bg-surface};
-    --#{$prefix}bg-surface-secondary: #{$bg-surface-secondary};
-    --#{$prefix}bg-surface-tertiary: #{$bg-surface-tertiary};
-    --#{$prefix}bg-surface-dark: #{$bg-surface-dark};
+    --#{$prefix}bg-surface: var(--#{$prefix}bg-surface-primary);
+    --#{$prefix}bg-surface-primary: var(--#{$prefix}white);
+    --#{$prefix}bg-surface-secondary: var(--#{$prefix}gray-50);
+    --#{$prefix}bg-surface-tertiary: var(--#{$prefix}gray-50);
+    --#{$prefix}bg-surface-dark: var(--#{$prefix}gray-900);
+    --#{$prefix}bg-surface-inverted: var(--#{$prefix}gray-900);
     --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
 
+    --#{$prefix}text-inverted: var(--#{$prefix}gray-100);
+
+    --#{$prefix}body-color: var(--#{$prefix}gray-700);
+    --#{$prefix}body-bg: var(--#{$prefix}bg-surface-secondary);
+
+    --#{$prefix}link-color: var(--#{$prefix}primary);
+    --#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), #000 20%);
+
+    --#{$prefix}secondary: var(--#{$prefix}gray-500);
+    --#{$prefix}tertiary: var(--#{$prefix}gray-400);
+
     --#{$prefix}border-color: #{$border-color};
     --#{$prefix}border-color-translucent: #{$border-color-translucent};
     --#{$prefix}border-dark-color: #{$border-dark-color};
@@ -45,28 +52,13 @@
 
     --#{$prefix}dark-mode-border-color: #{$border-color-dark};
     --#{$prefix}dark-mode-border-color-translucent: #{$border-color-translucent-dark};
-    --#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
+    --#{$prefix}dark-mode-border-active-color: #{$border-active-color-dark};
     --#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
 
     --#{$prefix}page-padding: #{$page-padding};
     --#{$prefix}page-padding-y: #{$page-padding-y};
+
     @include media-breakpoint-down($cards-grid-breakpoint) {
         --#{$prefix}page-padding: #{$page-padding-sm};
     }
-
-    @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};
-    }
-
-    @each $name, $value in $box-shadows {
-        --#{$prefix}#{$name}: #{$value};
-    }
 }

package/assets/styles/marketing/_browser.scss

@@ -0,0 +1,67 @@
+//
+// Browser
+//
+.browser {
+    border-radius: var(--#{$prefix}border-radius-lg);
+    box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
+    background: var(--#{$prefix}bg-surface-secondary);
+    overflow: hidden;
+}
+
+.browser-header {
+    padding: .25rem 1rem;
+    background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .03));
+    border-bottom: 1px solid var(--#{$prefix}border-color);
+    border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
+}
+
+.browser-dots {
+    margin-right: 3rem;
+    display: flex;
+}
+
+.browser-dots-colored {
+    .browser-dot {
+        &:nth-child(1) {
+            background: #fb6058;
+        }
+
+        &:nth-child(2) {
+            background: #fcbe3b;
+        }
+
+        &:nth-child(3) {
+            background: #2ccb4c;
+        }
+    }
+}
+
+.browser-dot {
+    margin-right: .5rem;
+    width: .75rem;
+    min-width: .75rem;
+    height: .75rem;
+    background: var(--#{$prefix}border-color);
+    border-radius: 50%;
+    border: 1px solid var(--#{$prefix}border-color-dark);
+}
+
+.browser-input {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    padding: .25rem;
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h5);
+    border-radius: var(--#{$prefix}border-radius);
+    line-height: 1;
+    cursor: pointer;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
+
+    &:hover {
+        text-decoration: none;
+    }
+}

package/assets/styles/marketing/_core.scss

@@ -0,0 +1,8 @@
+.body-marketing {
+    --#{$prefix}body-font-size: 1rem;
+    --#{$prefix}body-line-height: 1.75;
+}
+
+.body-gradient {
+    background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
+}

package/assets/styles/marketing/_hero.scss

@@ -0,0 +1,70 @@
+//
+// Hero
+//
+.hero {
+    text-align: center;
+    padding: 6.5rem 0;
+}
+
+.hero-title {
+    font-size: 3rem;
+    font-weight: var(--#{$prefix}font-weight-black);
+    letter-spacing: $spacing-tight;
+    line-height: $headings-line-height;
+
+    @include media-breakpoint-down(md) {
+        font-size: 2rem;
+    }
+}
+
+.hero-description {
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h2);
+    line-height: 1.5;
+    margin: 0 auto;
+    max-width: 45rem;
+
+    @include media-breakpoint-down(sm) {
+        font-size: var(--#{$prefix}font-size-h3);
+    }
+}
+
+.hero-description-wide {
+    max-width: 61.875rem;
+}
+
+//
+// Hero subheader
+//
+.hero-subheader {
+    @include subheader;
+    margin-bottom: 0.5rem;
+}
+
+.hero-img {
+    margin: 4rem auto;
+    max-width: 65rem;
+    border-radius: $border-radius-lg;
+    position: relative;
+    z-index: 1;
+    //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
+    //  0 4px 6px -2px rgba($color-text, 0.05);
+
+    img,
+    svg {
+        max-width: 100%;
+        height: auto;
+        display: block;
+        position: relative;
+    }
+}
+
+//
+//.hero-img-side {
+//  img,
+//  svg {
+//    max-width: 100%;
+//    height: auto;
+//    display: block;
+//  }
+//}