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

package/assets/styles/marketing/_pricing.scss

@@ -0,0 +1,111 @@
+$pricing-card-width: 22rem;
+
+.pricing {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    justify-content: center;
+
+    @include media-breakpoint-up(md) {
+        flex-direction: row;
+    }
+}
+
+.pricing-card {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--#{$prefix}bg-surface);
+    border: 1px solid $border-color;
+    padding: 2rem;
+    margin: 0 0 1rem;
+    position: relative;
+    box-shadow: $box-shadow-card;
+    text-align: center;
+    border-radius: $border-radius-lg;
+
+    @include media-breakpoint-up(md) {
+        margin: 1rem -1px;
+        max-width: $pricing-card-width;
+
+        &:first-child {
+            border-radius: $border-radius-lg 0 0 $border-radius-lg;
+        }
+
+        &:last-child {
+            border-radius: 0 $border-radius-lg $border-radius-lg 0;
+        }
+    }
+
+    &.featured {
+        z-index: 1;
+        border: 2px solid var(--#{$prefix}primary);
+        order: -1;
+
+        @include media-breakpoint-up(md) {
+            order: unset;
+            margin-top: 0;
+            margin-bottom: 0;
+            box-shadow: $box-shadow-card;
+            border-radius: $border-radius-lg;
+        }
+    }
+}
+
+.pricing-title {
+    font-size: $h2-font-size;
+    line-height: $h2-line-height;
+}
+
+.pricing-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateY(-50%);
+    vertical-align: bottom;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.pricing-btn {
+    margin-top: auto;
+    padding-top: 2rem;
+}
+
+.pricing-price {
+    display: flex;
+    justify-content: center;
+    font-size: 2.5rem;
+    line-height: 1;
+    font-weight: $font-weight-black;
+    margin: 0.75rem 0;
+}
+
+.pricing-price-currency {
+    font-size: $h2-font-size;
+    line-height: 1.5;
+    margin-right: 0.25rem;
+    font-weight: $font-weight-bold;
+}
+
+.pricing-price-description {
+    font-size: $h4-font-size;
+    line-height: $h4-line-height;
+    font-weight: $font-weight-normal;
+    color: $text-secondary;
+    align-self: center;
+    margin-left: 0.5rem;
+}
+
+.pricing-features {
+    margin: 1rem 0 0;
+    padding: 0;
+    list-style: none;
+    text-align: left;
+
+    > li:not(:first-child) {
+        margin-top: 0.25rem;
+    }
+}

package/assets/styles/marketing/_sections.scss

@@ -0,0 +1,124 @@
+@keyframes move-forever1 {
+    0% {
+        transform: translate(85px, 0%);
+    }
+
+    100% {
+        transform: translate(-90px, 0%);
+    }
+}
+
+@keyframes move-forever2 {
+    0% {
+        transform: translate(-90px, 0%);
+    }
+
+    100% {
+        transform: translate(85px, 0%);
+    }
+}
+
+@keyframes move-forever3 {
+    0% {
+        transform: translate(-90px, 0%);
+    }
+
+    100% {
+        transform: translate(85px, 0%);
+    }
+}
+
+//
+// Sections
+//
+.section {
+    --section-bg: transparent;
+    background: var(--section-bg);
+    position: relative;
+    padding: 5rem 0;
+}
+
+.section-sm {
+    padding: 4rem 0;
+}
+
+.section-white {
+    --section-bg: var(--#{$prefix}bg-surface);
+}
+
+.section-light {
+    --section-bg: var(--#{$prefix}bg-surface-secondary);
+}
+
+.section-primary {
+    --section-bg: var(--#{$prefix}primary);
+    color: $white;
+}
+
+.section-dark {
+    --section-bg: var(--#{$prefix}dark);
+    color: $white;
+}
+
+.section-header {
+    text-align: center;
+    max-width: 45rem;
+    margin: 0 auto 5rem;
+
+    @at-root .section-sm & {
+        margin-bottom: 4rem;
+    }
+}
+
+.section-title {
+    font-size: var(--#{$prefix}font-size-h1);
+    font-weight: var(--#{$prefix}font-weight-bold);
+    line-height: 1.2;
+}
+
+.section-title-lg {
+    font-size: 2rem;
+}
+
+.section-description {
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h3);
+    line-height: var(--#{$prefix}line-height-h3);
+    margin-top: 1rem;
+}
+
+//
+// Section divider
+//
+.section-divider {
+    position: absolute;
+    bottom: 100%;
+    pointer-events: none;
+    height: 5rem;
+    width: 100%;
+
+    path {
+        fill: var(--section-bg);
+    }
+
+    .wave-1 {
+        animation: move-forever1 30s linear infinite;
+        animation-delay: -2s;
+    }
+
+    .wave-2 {
+        animation: move-forever2 24s linear infinite;
+        opacity: .5;
+        animation-delay: -2s;
+    }
+
+    .wave-3 {
+        animation: move-forever3 18s linear infinite;
+        opacity: .3;
+        animation-delay: -2s;
+    }
+}
+
+.section-divider-auto {
+    height: auto;
+}

package/assets/styles/marketing/_shape.scss

@@ -0,0 +1,31 @@
+.shape {
+    --#{$prefix}shape-size: #{$avatar-size};
+    --#{$prefix}shape-icon-size: #{$avatar-icon-size};
+    background-color: var(--#{$prefix}primary-lt);
+    color: var(--#{$prefix}primary);
+    border-radius: 35%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--#{$prefix}shape-size);
+    width: var(--#{$prefix}shape-size);
+
+    .icon {
+        width: var(--#{$prefix}shape-icon-size);
+        height: var(--#{$prefix}shape-icon-size);
+    }
+}
+
+@each $avatar-size, $size in $avatar-sizes {
+    .shape-#{$avatar-size} {
+        --#{$prefix}shape-size: #{map-get($size, size)};
+        --#{$prefix}shape-icon-size: #{map-get($size, icon-size)};
+    }
+}
+
+@each $name, $color in $colors {
+    .shape-#{$name} {
+        background: var(--#{$prefix}#{$name}-lt);
+        color: var(--#{$prefix}#{$name});
+    }
+}

package/assets/styles/mixins/_functions.scss

@@ -6,6 +6,9 @@
     @return shade-color($color, 10%);
 }
 
+//
+// Replace all occurrences of a substring within a string.
+//
 @function str-replace($string, $search, $replace: "") {
     $index: str-index($string, $search);
 
@@ -41,3 +44,53 @@
     }
     @return if($n > 1, nth($breakpoint-names, $n - 1), null);
 }
+
+//
+// Escape SVG strings.
+//
+@function escape-svg($string) {
+    @if str-index($string, "data:image/svg+xml") {
+        @each $char, $encoded in $escaped-characters {
+            // Do not escape the url brackets
+            @if str-index($string, "url(") == 1 {
+                $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+            } @else {
+                $string: str-replace($string, $char, $encoded);
+            }
+        }
+    }
+
+    @return $string;
+}
+
+/**
+ * Converts a given value to a percentage string.
+ *
+ * @param {Number} $value - The value to be converted to a percentage.
+ * @return {String} - The percentage representation of the value.
+ */
+@function to-percentage($value) {
+    @return if(unitless($value), percentage($value), $value);
+}
+
+/**
+ * Generates a transparent version of the given color.
+ *
+ * @param {Color} $color - The base color to be made transparent.
+ * @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
+ * @return {Color} - The resulting color with the specified transparency.
+ */
+@function color-transparent($color, $alpha: 1, $background: transparent) {
+    @if $alpha == 1 {
+        @return $color;
+    } @else {
+        @return color-mix(in srgb, #{$color} #{to-percentage($alpha)}, $background);
+    }
+}
+
+@function url-svg($svg) {
+    $svg: str-replace($svg, '#', '%23');
+    $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+
+    @return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
+}

package/assets/styles/mixins/_mixins.scss

@@ -1,11 +1,11 @@
 @mixin subheader($include-color: true, $include-line-height: true) {
-    font-size: $h6-font-size;
-    font-weight: var(--#{$prefix}font-weight-bold);
+    font-size: $h5-font-size;
+    font-weight: var(--#{$prefix}font-weight-medium);
     text-transform: uppercase;
     letter-spacing: .04em;
 
     @if $include-line-height {
-        line-height: $h6-line-height;
+        line-height: $h5-line-height;
     }
 
     @if ($include-color) {
@@ -13,9 +13,9 @@
     }
 }
 
-@mixin scrollbar($color: var(--#{$prefix}body-color-rgb)) {
+@mixin scrollbar {
     #{if(&, "&", "*")} {
-        scrollbar-color: rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16) transparent;
+        scrollbar-color: color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20) transparent;
     }
 
     #{if(&, "&", "*")}::-webkit-scrollbar {
@@ -27,7 +27,7 @@
     #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
         border-radius: 1rem;
         border: 5px solid transparent;
-        box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16);
+        box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .20);
     }
 
     #{if(&, "&", "*")}::-webkit-scrollbar-track {
@@ -35,7 +35,7 @@
     }
 
     #{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
-        box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .32);
+        box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), .40);
     }
 
     #{if(&, "&", "*")}::-webkit-scrollbar-corner {
@@ -60,9 +60,9 @@
 
 @mixin focus-ring($show-border: false) {
     outline: 0;
-    box-shadow: $focus-ring-box-shadow;
+    box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(var(--#{$prefix}primary-rgb), 0.25);
 
     @if ($show-border) {
-        border-color: $focus-ring-border-color;
+        border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);
     }
 }

package/assets/styles/ui/_accordion.scss

@@ -1,24 +1,178 @@
 .accordion {
-    --#{$prefix}accordion-color: #{$accordion-color};
+    --#{$prefix}accordion-color: var(--#{$prefix}body-color);
+    --#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
+    --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+    --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+    --#{$prefix}accordion-padding-x: #{$accordion-body-padding-x};
+    --#{$prefix}accordion-gap: 0;
+    --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+    --#{$prefix}accordion-btn-color: var(--#{$prefix}accordion-color);
+    --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+    --#{$prefix}accordion-btn-toggle-width: 1.25rem;
+    --#{$prefix}accordion-btn-padding-x: var(--#{$prefix}accordion-padding-x);
+    --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+    --#{$prefix}accordion-btn-font-weight: var(--#{$prefix}font-weight-medium);
+    --#{$prefix}accordion-body-padding-x: var(--#{$prefix}accordion-padding-x);
+    --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}accordion-gap);
 }
 
 .accordion-button {
-    &:focus:not(:focus-visible) {
-        outline: none;
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-padding-x);
+    color: inherit;
+    text-align: inherit;
+    background-color: transparent;
+    border: 0;
+    font-size: inherit;
+    font-weight: var(--#{$prefix}accordion-btn-font-weight);
+    gap: .75rem;
+
+    &:not(.collapsed) {
+        border-bottom-color: transparent;
         box-shadow: none;
+        color: var(--#{$prefix}accordion-active-color);
     }
+}
+
+.accordion-header {
+    margin: 0;
+    position: relative;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    width: 100%;
+    color: var(--#{$prefix}accordion-btn-color);
+    text-align: left;
+    background-color: transparent;
+    border: 0;
+    overflow-anchor: none;
+    transition: transform $transition-time;
 
-    &:after {
-        opacity: $text-secondary-opacity;
+    &:hover {
+        z-index: 2;
     }
 
-    &:not(.collapsed) {
-        font-weight: var(--#{$prefix}font-weight-bold);
-        border-bottom-color: transparent;
-        box-shadow: none;
+    &:focus {
+        z-index: 3;
+        outline: 0;
+        box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+
+        &:not(:focus-visible) {
+            outline: none;
+            box-shadow: none;
+        }
+    }
+}
+
+.accordion-button-icon {
+    color: var(--#{$prefix}secondary);
+}
+
+.accordion-button-toggle {
+    display: flex;
+    line-height: 1;
+    transition: $transition-time transform;
+    margin-left: auto;
+    margin-right: 0;
+    color: var(--#{$prefix}secondary);
+    width: var(--#{$prefix}accordion-btn-toggle-width);
+    height: var(--#{$prefix}accordion-btn-toggle-width);
+
+    .accordion-button:not(.collapsed) & {
+        transform: rotate(-180deg);
+        color: var(--#{$prefix}accordion-active-color);
+    }
+
+    path {
+        transition: $transition-time opacity;
+    }
+}
+
+.accordion-button-toggle-plus {
+    .accordion-button:not(.collapsed) & {
+        path:first-child {
+            opacity: 0;
+        }
+    }
+}
+
+.accordion-item {
+    color: var(--#{$prefix}accordion-color);
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
+
+    &:first-of-type {
+        @include border-top-radius(var(--#{$prefix}accordion-border-radius));
 
-        &:after {
-            opacity: 1;
+        > .accordion-header {
+            @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
         }
     }
+
+    &:not(:first-of-type) {
+        border-top: 0;
+    }
+
+    &:last-of-type {
+        @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+
+        > .accordion-header {
+            &.collapsed {
+                @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+            }
+        }
+
+        > .accordion-collapse {
+            @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+        }
+    }
+}
+
+.accordion-body {
+    color: var(--#{$prefix}secondary);
+    padding: 0 var(--#{$prefix}accordion-body-padding-x) var(--#{$prefix}accordion-body-padding-y);
+}
+
+.accordion-flush {
+    > .accordion-item {
+        border-right: 0;
+        border-left: 0;
+        @include border-radius(0);
+
+        &:first-child {
+            border-top: 0;
+        }
+
+        &:last-child {
+            border-bottom: 0;
+        }
+
+        > .accordion-collapse,
+        > .accordion-header .accordion-button,
+        > .accordion-header .accordion-button.collapsed {
+            @include border-radius(0);
+        }
+    }
+}
+
+.accordion-tabs {
+    --#{$prefix}accordion-gap: 0.75rem;
+
+    > .accordion-item {
+        border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
+        border-radius: var(--#{$prefix}accordion-border-radius);
+    }
+}
+
+.accordion-inverted {
+    .accordion-button-toggle {
+        order: -1;
+        margin-left: 0;
+    }
 }