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

package/assets/styles/_variables.scss

@@ -7,7 +7,7 @@ $enable-gradients: false !default;
 $enable-shadows: true !default;
 $enable-navbar-vertical: true !default;
 $enable-dark-mode: true !default;
-$enable-negative-margins: false !default;
+$enable-negative-margins: true !default;
 $enable-rfs: false !default;
 $enable-cssgrid: true !default;
 
@@ -23,11 +23,10 @@ $font-google-monospaced: null !default;
 $font-local: null !default;
 $font-icons: () !default;
 
-/* prettier-ignore */
-$font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
-/* prettier-ignore */
-$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+$font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
+$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
+$font-family-comic: "Comic Sans MS", "Comic Sans", 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
 
 //Icons
 $icon-stroke-width: 1.5 !default;
@@ -52,27 +51,35 @@ $line-height-600: 2.5rem !default;
 $line-height-700: 3rem !default;
 
 $font-size-base: 0.875rem !default;
+
+$spacing-wide: .04em !default;
+$spacing-normal: 0 !default;
+$spacing-tight: -.04em !default;
+
 $body-letter-spacing: 0 !default;
 
 $font-weight-light: 300 !default;
 $font-weight-normal: 400 !default;
 $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
+$font-weight-black: 700 !default;
 
 $headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
 
 $font-weights: (
-    light: $font-weight-light,
-    normal: $font-weight-normal,
-    medium: $font-weight-medium,
-    bold: $font-weight-bold,
-    headings: $headings-font-weight,
+        'light': $font-weight-light,
+        'normal': $font-weight-normal,
+        'medium': $font-weight-medium,
+        'bold': $font-weight-bold,
+        'black': $font-weight-black,
+        'headings': $headings-font-weight,
 ) !default;
 
 $line-height-base: divide(1.25rem, $font-size-base) !default;
 $line-height-sm: divide(1rem, $font-size-base) !default;
 $line-height-lg: divide(1.5rem, $font-size-base) !default;
+$line-height-xl: divide(1.75rem, $font-size-base) !default;
 
 $h1-font-size: 1.5rem !default;
 $h1-line-height: 2rem !default;
@@ -92,33 +99,35 @@ $h5-line-height: 1rem !default;
 $h6-font-size: 0.625rem !default;
 $h6-line-height: 1rem !default;
 
-$small-font-size: 85.714285% !default;
+$font-size-reative-xs: .71428571em !default;
+$font-size-reative-sm: .85714285em !default;
+$font-size-reative-md: 1em !default;
 
 $font-sizes: (
-    1: $h1-font-size,
-    2: $h2-font-size,
-    3: $h3-font-size,
-    4: $h4-font-size,
-    5: $h5-font-size,
-    6: $h6-font-size,
+        1: $h1-font-size,
+        2: $h2-font-size,
+        3: $h3-font-size,
+        4: $h4-font-size,
+        5: $h5-font-size,
+        6: $h6-font-size,
 ) !default;
 
 $line-heights: (
-    h1: $h1-line-height,
-    h2: $h2-line-height,
-    h3: $h3-line-height,
-    h4: $h4-line-height,
-    h5: $h5-line-height,
-    h6: $h6-line-height,
+        h1: $h1-line-height,
+        h2: $h2-line-height,
+        h3: $h3-line-height,
+        h4: $h4-line-height,
+        h5: $h5-line-height,
+        h6: $h6-line-height,
 ) !default;
 
 $display-font-sizes: (
-    1: 5rem,
-    2: 4.5rem,
-    3: 4rem,
-    4: 3.5rem,
-    5: 3rem,
-    6: 2rem,
+        1: 5rem,
+        2: 4.5rem,
+        3: 4rem,
+        4: 3.5rem,
+        5: 3rem,
+        6: 2rem,
 ) !default;
 
 $lead-font-size: $font-size-base !default;
@@ -135,18 +144,19 @@ $text-secondary-dark-opacity: 0.8 !default;
 $border-opacity: 0.16 !default;
 $border-light-opacity: 0.08 !default;
 $border-dark-opacity: 0.24 !default;
-$border-active-opacity: 0.48 !default;
-
-$gray-50: #fcfdfe !default;
-$gray-100: #f6f8fb !default;
-$gray-200: #eef1f4 !default;
-$gray-300: #dadfe5 !default;
-$gray-400: #bbc3cd !default;
-$gray-500: #929dab !default;
-$gray-600: #667382 !default;
-$gray-700: #3a4859 !default;
-$gray-800: #182433 !default;
-$gray-900: #040a11 !default;
+$border-active-opacity: 0.58 !default;
+
+$gray-50: #f9fafb !default;
+$gray-100: #f3f4f6 !default;
+$gray-200: #e5e7eb !default;
+$gray-300: #d1d5db !default;
+$gray-400: #9ca3af !default;
+$gray-500: #6b7280 !default;
+$gray-600: #4b5563 !default;
+$gray-700: #374151 !default;
+$gray-800: #1f2937 !default;
+$gray-900: #111827 !default;
+$gray-950: #030712 !default;
 
 $black: #000000 !default;
 $white: #ffffff !default;
@@ -159,14 +169,14 @@ $bg-surface-secondary: var(--#{$prefix}gray-100) !default;
 $bg-surface-tertiary: var(--#{$prefix}gray-50) !default;
 $bg-surface-dark: var(--#{$prefix}dark) !default;
 
-$body-bg: $gray-100 !default;
+$body-bg: $gray-50 !default;
 $body-color: $dark !default;
-$body-emphasis-color: $dark !default;
+$body-emphasis-color: $gray-700 !default;
 
 $color-contrast-dark: $body-color !default;
 $color-contrast-light: $light !default;
 
-$blue: #0054a6 !default;
+$blue: #066fd1 !default;
 $azure: #4299e1 !default;
 $indigo: #4263eb !default;
 $purple: #ae3ec9 !default;
@@ -179,25 +189,13 @@ $green: #2fb344 !default;
 $teal: #0ca678 !default;
 $cyan: #17a2b8 !default;
 
-$color-blue: #0054a6;
-$color-azure: #3586c9;
-$color-indigo: #4263eb;
-$color-purple: #ae3ec9;
-$color-pink: #d6336c;
-$color-red: #e73f3f;
-$color-orange: #f76707;
-$color-yellow: #f59f00;
-$color-lime: #74b816;
-$color-green: #2fb344;
-$color-teal: #0ca678;
-$color-cyan: #17a2b8;
-
-$text-secondary: $gray-600 !default;
-$text-secondary-light: $gray-500 !default;
-$text-secondary-dark: $gray-700 !default;
-
-$border-color: $gray-300 !default;
-$border-color-translucent: rgba(4, 32, 69, 0.14);
+$text-muted: $gray-500 !default;
+$text-secondary: $gray-500 !default;
+$text-secondary-light: $gray-400 !default;
+$text-secondary-dark: $gray-600 !default;
+
+$border-color: $gray-200 !default;
+$border-color-translucent: rgba(4, 32, 69, 0.1);
 
 $border-dark-color: $gray-400 !default;
 $border-dark-color-translucent: rgba(4, 32, 69, 0.27);
@@ -209,97 +207,124 @@ $active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
 $active-color: var(--#{$prefix}primary) !default;
 $active-border-color: var(--#{$prefix}primary) !default;
 
-$hover-bg: rgba(var(--#{$prefix}text-secondary-rgb), 0.04) !default;
+$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
 
 $disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
-$disabled-color: var(--#{$prefix}gray-300) !default;
+$disabled-color: color-transparent(var(--#{$prefix}body-color), .4) !default;
 
 $primary: $blue !default;
 $secondary: $text-secondary !default;
+$muted: $text-secondary !default;
 $success: $green !default;
 $info: $azure !default;
-$warning: $orange !default;
+$warning: $yellow !default;
 $danger: $red !default;
 
 $link-color: $primary !default;
 
 $theme-colors: (
-    "primary": $primary,
-    "secondary": $text-secondary,
-    "success": $success,
-    "info": $info,
-    "warning": $warning,
-    "danger": $danger,
-    "light": $light,
-    "dark": $dark,
-    "muted": $text-secondary,
+        "primary": $primary,
+        "secondary": $secondary,
+        "success": $success,
+        "info": $info,
+        "warning": $warning,
+        "danger": $danger,
+        "light": $light,
+        "dark": $dark,
+        "muted": $muted,
 ) !default;
 
 $extra-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,
+        "blue": $blue,
+        "azure": $azure,
+        "indigo": $indigo,
+        "purple": $purple,
+        "pink": $pink,
+        "red": $red,
+        "orange": $orange,
+        "yellow": $yellow,
+        "lime": $lime,
+        "green": $green,
+        "teal": $teal,
+        "cyan": $cyan,
 ) !default;
 
 $social-colors: (
-    "facebook": #1877f2,
-    "twitter": #1da1f2,
-    "linkedin": #0a66c2,
-    "google": #dc4e41,
-    "youtube": #ff0000,
-    "vimeo": #1ab7ea,
-    "dribbble": #ea4c89,
-    "github": #181717,
-    "instagram": #e4405f,
-    "pinterest": #bd081c,
-    "vk": #6383a8,
-    "rss": #ffa500,
-    "flickr": #0063dc,
-    "bitbucket": #0052cc,
-    "tabler": #0054a6,
+        "x": #000000,
+        "facebook": #1877f2,
+        "twitter": #1da1f2,
+        "linkedin": #0a66c2,
+        "google": #dc4e41,
+        "youtube": #ff0000,
+        "vimeo": #1ab7ea,
+        "dribbble": #ea4c89,
+        "github": #181717,
+        "instagram": #e4405f,
+        "pinterest": #bd081c,
+        "vk": #6383a8,
+        "rss": #ffa500,
+        "flickr": #0063dc,
+        "bitbucket": #0052cc,
+        "tabler": #066fd1,
 ) !default;
 
 $gray-colors: (
-    gray-50: $gray-50,
-    gray-100: $gray-100,
-    gray-200: $gray-200,
-    gray-300: $gray-300,
-    gray-400: $gray-400,
-    gray-500: $gray-500,
-    gray-600: $gray-600,
-    gray-700: $gray-700,
-    gray-800: $gray-800,
-    gray-900: $gray-900,
+        gray-50: $gray-50,
+        gray-100: $gray-100,
+        gray-200: $gray-200,
+        gray-300: $gray-300,
+        gray-400: $gray-400,
+        gray-500: $gray-500,
+        gray-600: $gray-600,
+        gray-700: $gray-700,
+        gray-800: $gray-800,
+        gray-900: $gray-900,
+        gray-950: $gray-950,
 ) !default;
 
-$theme-colors: map-merge($theme-colors, map-merge($extra-colors, $social-colors));
+$theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
+
+// BACKDROPS
+$backdrop-opacity: 24% !default;
+$backdrop-blur: 4px !default;
+$backdrop-bg: var(--#{$prefix}gray-800) !default;
+$backdrops: (
+        dark: color-mix(in srgb, var(--#{$prefix}color-dark), transparent var(--#{$prefix}backdrop-opacity)),
+        light: color-mix(in srgb, var(--#{$prefix}color-light), transparent var(--#{$prefix}backdrop-opacity)),
+) !default;
 
 // Borders
 $border-width: 1px !default;
 $border-width-wide: 2px !default;
 
-$border-radius-sm: 2px !default;
-$border-radius: 4px !default;
+$border-radius-sm: 4px !default;
+$border-radius: 6px !default;
 $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;
 
+$border-radiuses: (
+        0: 0,
+        sm: $border-radius-sm,
+        md: $border-radius,
+        lg: $border-radius-lg,
+        pill: $border-radius-pill,
+        null: var(--#{$prefix}border-radius-md),
+) !default;
+
+$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,
+);
+
 // Icons
-$icon-color: var(--#{$prefix}gray-500) !default;
+$icon-color: var(--#{$prefix}gray-400) !default;
 
 // Code
-$code-color: var(--#{$prefix}gray-600) !default;
-$code-font-size: $small-font-size !default;
+$code-color: var(--#{$prefix}primary) !default;
+$code-font-size: $font-size-reative-sm !default;
 $code-line-height: 1.25rem !default;
-$code-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$code-bg: var(--#{$prefix}primary-lt) !default;
 
 $pre-padding: 1rem !default;
 $pre-bg: var(--#{$prefix}bg-surface-dark) !default;
@@ -319,54 +344,62 @@ $avatar-size: 2.5rem !default;
 $avatar-status-size: .75rem !default;
 $avatar-font-size: 1rem !default;
 $avatar-icon-size: 1.5rem !default;
+$avatar-brand-size: 1.25rem !default;
 $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $avatar-sizes: (
-    "xxs": (
-        size: 1rem,
-        font-size: .5rem,
-        icon-size: .75rem,
-        status-size: .25rem
-    ),
-    "xs": (
-        size: 1.25rem,
-        font-size: $h6-font-size,
-        icon-size: 1rem,
-        status-size: .375rem
-    ),
-    "sm": (
-        size: 2rem,
-        font-size: $h5-font-size,
-        icon-size: 1.25rem,
-        status-size: .5rem
-    ),
-    "md": (
-        size: 2.5rem,
-        font-size: $h4-font-size,
-        icon-size: 1.5rem,
-        status-size: .75rem
-    ),
-    "lg": (
-        size: 3rem,
-        font-size: $h2-font-size,
-        icon-size: 2rem,
-        status-size: .75rem
-    ),
-    "xl": (
-        size: 5rem,
-        font-size: 2rem,
-        icon-size: 3rem,
-        status-size: 1rem
-    ),
-    "2xl": (
-        size: 7rem,
-        font-size: 3rem,
-        icon-size: 5rem,
-        status-size: 1rem
-    ),
+        "xxs": (
+                size: 1rem,
+                font-size: .5rem,
+                icon-size: .5rem,
+                status-size: .25rem,
+                brand-size: .5rem
+        ),
+        "xs": (
+                size: 1.25rem,
+                font-size: $h6-font-size,
+                icon-size: .75rem,
+                status-size: .375rem,
+                brand-size: .75rem
+        ),
+        "sm": (
+                size: 2rem,
+                font-size: $h5-font-size,
+                icon-size: 1.5rem,
+                status-size: .5rem,
+                brand-size: 1rem
+        ),
+        "md": (
+                size: 2.5rem,
+                font-size: $h4-font-size,
+                icon-size: 1.5rem,
+                status-size: .75rem,
+                brand-size: 1.25rem
+        ),
+        "lg": (
+                size: 3rem,
+                font-size: $h2-font-size,
+                icon-size: 2rem,
+                status-size: .75rem,
+                brand-size: 1.25rem
+        ),
+        "xl": (
+                size: 5rem,
+                font-size: 2rem,
+                icon-size: 3rem,
+                status-size: 1rem,
+                brand-size: 1.25rem
+        ),
+        "2xl": (
+                size: 7rem,
+                font-size: 3rem,
+                icon-size: 5rem,
+                status-size: 1rem,
+                brand-size: 2rem
+        ),
 ) !default;
 $avatar-border-radius: var(--#{$prefix}border-radius) !default;
 $avatar-font-size: $h4-font-size !default;
-$avatar-box-shadow: var(--#{$prefix}box-shadow-border) !default;
+$avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
 $avatar-list-spacing: -0.5;
 
 $link-decoration: none !default;
@@ -393,9 +426,9 @@ $grid-gutter-width: var(--#{$prefix}page-padding) !default;
 $grid-gutter-width: 1rem !default;
 
 $container-variations: (
-    slim: 16rem,
-    tight: 30rem,
-    narrow: 45rem,
+        slim: 16rem,
+        tight: 30rem,
+        narrow: 61.875rem,
 ) !default;
 
 // Spacers
@@ -405,59 +438,73 @@ $spacer-2: 0.5rem !default;
 $spacer-3: 1rem !default;
 $spacer-4: 1.5rem !default;
 $spacer-5: 2rem !default;
-$spacer-6: 3rem !default;
-$spacer-7: 5rem !default;
-$spacer-8: 8rem !default;
+$spacer-6: 2.5rem !default;
+
+$spacer-7: 3rem !default;
+$spacer-8: 4rem !default;
+$spacer-9: 5rem !default;
+$spacer-10: 6rem !default;
+$spacer-11: 7rem !default;
+$spacer-12: 8rem !default;
 
 $spacer: $spacer-3 !default;
 
 $spacers: (
-    0: 0,
-    1: $spacer-1,
-    2: $spacer-2,
-    3: $spacer-3,
-    4: $spacer-4,
-    5: $spacer-5,
-    6: $spacer-6,
-    7: $spacer-7,
-    8: $spacer-8,
+        0: 0,
+        1: $spacer-1,
+        2: $spacer-2,
+        3: $spacer-3,
+        4: $spacer-4,
+        5: $spacer-5,
+        6: $spacer-6,
+) !default;
+
+$spacers-extra: (
+        7: $spacer-7,
+        8: $spacer-8,
+        9: $spacer-9,
+        10: $spacer-10,
+        11: $spacer-11,
+        12: $spacer-12,
 ) !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+$negative-spacers: null !default;
 
 // Sizes
 $size-spacers: (
-    auto: auto,
-    px: 1px,
-    full: 100%,
+        auto: auto,
+        px: 1px,
+        full: 100%,
 ) !default;
 
 $size-values: map-merge(
-        $spacers,
-        (
-            25: 25%,
-            33: 33.33333%,
-            50: 50%,
-            66: 66.66666%,
-            75: 75%,
-            100: 100%,
-            auto: auto,
-        )
+                $spacers,
+                (
+                        25: 25%,
+                        33: 33.33333%,
+                        50: 50%,
+                        66: 66.66666%,
+                        75: 75%,
+                        100: 100%,
+                        auto: auto,
+                )
 ) !default;
 
 // Aspect ratios
 $aspect-ratios: (
-    "1x1": 100%,
-    "2x1": calc(1 / 2 * 100%),
-    "1x2": calc(2 / 1 * 100%),
-    "3x1": calc(1 / 3 * 100%),
-    "1x3": calc(3 / 1 * 100%),
-    "4x3": calc(3 / 4 * 100%),
-    "3x4": calc(4 / 3 * 100%),
-    "16x9": calc(9 / 16 * 100%),
-    "9x16": calc(16 / 9 * 100%),
-    "21x9": calc(9 / 21 * 100%),
-    "9x21": calc(21 / 9 * 100%),
+        "1x1": 100%,
+        "2x1": calc(1 / 2 * 100%),
+        "1x2": calc(2 / 1 * 100%),
+        "3x1": calc(1 / 3 * 100%),
+        "1x3": calc(3 / 1 * 100%),
+        "4x1": calc(1 / 4 * 100%),
+        "1x4": calc(4 / 1 * 100%),
+        "4x3": calc(3 / 4 * 100%),
+        "3x4": calc(4 / 3 * 100%),
+        "16x9": calc(9 / 16 * 100%),
+        "9x16": calc(16 / 9 * 100%),
+        "21x9": calc(9 / 21 * 100%),
+        "9x21": calc(21 / 9 * 100%),
 ) !default;
 
 // Shadows
@@ -467,16 +514,16 @@ $box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !d
 $box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
 $box-shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
 $box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
-$box-shadow-dropdown: 0 16px 24px 2px rgb(0, 0, 0, 0.07), 0 6px 30px 5px rgb(0, 0, 0, 0.06), 0 8px 10px -5px rgb(0, 0, 0, 0.1) !default;
+$box-shadow-dropdown: 0 16px 24px 2px rgba(0, 0, 0, 0.07), 0 6px 30px 5px rgba(0, 0, 0, 0.06), 0 8px 10px -5px rgba(0, 0, 0, 0.1) !default;
 
 $box-shadows: (
-    box-shadow: $box-shadow,
-    box-shadow-border: $box-shadow-border,
-    box-shadow-transparent: $box-shadow-transparent,
-    box-shadow-input: $box-shadow-input,
-    box-shadow-card: $box-shadow-card,
-    box-shadow-card-hover: $box-shadow-card-hover,
-    box-shadow-dropdown: $box-shadow-dropdown,
+        null: $box-shadow,
+        border: $box-shadow-border,
+        transparent: $box-shadow-transparent,
+        input: $box-shadow-input,
+        card: $box-shadow-card,
+        card-hover: $box-shadow-card-hover,
+        dropdown: $box-shadow-dropdown,
 ) !default;
 
 $box-shadow-inset: 0 0 transparent !default;
@@ -486,8 +533,6 @@ $focus-ring-width: 0.25rem !default;
 $focus-ring-opacity: 0.25 !default;
 $focus-ring-color: rgba(var(--#{$prefix}primary-rgb), $focus-ring-opacity) !default;
 $focus-ring-blur: 0 !default;
-$focus-ring-border-color: rgba(var(--#{$prefix}primary-rgb), 50%) !default;
-$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 
 // Transitions
 $transition-time: 0.3s !default;
@@ -516,41 +561,48 @@ $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
 $alert-shadow: rgba($dark, 0.04) 0 2px 4px 0 !default;
 
 // Breadcrumb
-$breadcrumb-divider-color: var(--#{$prefix}secondary) !default;
+$breadcrumb-divider-color: var(--#{$prefix}gray-500) !default;
 $breadcrumb-link-color: var(--#{$prefix}link-color) !default;
 $breadcrumb-active-color: inherit !default;
 $breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
 $breadcrumb-disabled-color: var(--#{$prefix}disabled-color) !default;
 
 $breadcrumb-variants: (
-    dots: "·",
-    arrows: "›",
-    bullets: "\02022",
+        dots: "·",
+        arrows: "›",
+        bullets: "\02022",
 ) !default;
 
 // Badges
-$badge-font-size: $code-font-size !default;
+$badge-font-size: $font-size-reative-sm !default;
+$badge-font-size-sm: $font-size-reative-xs !default;
+$badge-font-size-lg: $font-size-reative-md !default;
 $badge-line-height: $code-line-height !default;
 $badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $badge-padding-y: 0.25em !default;
 $badge-padding-x: 0.5em !default;
-$badge-empty-size: 0.5rem !default;
+$badge-empty-size: 10px !default;
 $badge-color: var(--#{$prefix}secondary) !default;
 $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
 
 // Buttons
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
-$input-btn-font-family: var(--#{$prefix}font-sans-serif) !default;
-$input-btn-padding-y: 0.625rem - 0.0625rem !default;
+$input-btn-font-family: var(--#{$prefix}body-font-face) !default;
+$input-btn-padding-y: 0.5rem - 0.0625rem !default;
+$input-btn-icon-size: $icon-size !default;
 
 $input-btn-font-size-sm: $h5-font-size !default;
 $input-btn-padding-x-sm: 0.25rem !default;
-$input-btn-padding-y-sm: 0.125rem !default;
+$input-btn-padding-y-sm: 0.125rem - 0.0625rem !default;
+$input-btn-line-height-sm: 1rem !default;
+$input-btn-icon-size-sm: 1rem !default;
 
 $input-btn-font-size-lg: $h2-font-size !default;
-$input-btn-padding-x-lg: 0.75rem !default;
-$input-btn-padding-y-lg: 0.5rem !default;
+$input-btn-padding-x-lg: 1.5rem !default;
+$input-btn-padding-y-lg: 0.75rem - 0.0625rem !default;
+$input-btn-line-height-lg: 2rem !default;
+$input-btn-icon-size-lg: 2rem !default;
 
 $input-btn-focus-width: 0.25rem !default;
 
@@ -561,15 +613,18 @@ $input-height-lg: null !default;
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 $input-color: var(--#{$prefix}body-color) !default;
 $input-focus-color: var(--#{$prefix}body-color) !default;
-$input-box-shadow: var(--#{$prefix}box-shadow-input) !default;
+$input-box-shadow: var(--#{$prefix}shadow-input) !default;
 
 // Buttons
-$btn-disabled-opacity: 0.4 !default;
+$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+
+$btn-disabled-opacity: .4 !default;
 $btn-padding-x: 1rem !default;
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-color: var(--#{$prefix}border-color) !default;
 $btn-border-radius: var(--#{$prefix}border-radius) !default;
-$btn-box-shadow: var(--#{$prefix}box-shadow-input) !default;
+$btn-box-shadow: var(--#{$prefix}shadow-input) !default;
 
 // Cards
 $card-title-spacer-y: 1.25rem !default;
@@ -582,10 +637,10 @@ $card-color: inherit !default;
 
 $card-border-width: var(--#{$prefix}border-width) !default;
 $card-border-color: var(--#{$prefix}border-color-translucent) !default;
-$card-border-radius: var(--#{$prefix}border-radius) !default;
+$card-border-radius: var(--#{$prefix}border-radius-lg) !default;
 
 $card-spacer-x: 1.25rem !default;
-$card-spacer-y: 1.25rem !default;
+$card-spacer-y: 1rem !default;
 
 $card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $card-cap-color: inherit !default;
@@ -641,23 +696,23 @@ $dropdown-max-width: 25rem !default;
 $dropdown-scrollable-height: 13rem !default;
 $dropdown-link-active-color: var(--#{$prefix}primary) !default;
 $dropdown-link-active-bg: var(--#{$prefix}active-bg) !default;
-$dropdown-box-shadow: var(--#{$prefix}box-shadow-dropdown) !default;
+$dropdown-box-shadow: var(--#{$prefix}shadow-dropdown) !default;
 
 $dropdown-divider-bg: $dropdown-border-color !default;
-$dropdown-divider-margin-y: var(--#{$prefix}spacer) !default;
+$dropdown-divider-margin-y: var(--#{$prefix}spacer-2) !default;
 
 // Tooltip
-$tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
-$tooltip-color: var(--#{$prefix}light) !default;
-$tooltip-padding-y: var(--#{$prefix}spacer-2) !default;
-$tooltip-padding-x: var(--#{$prefix}spacer-2) !default;
+$tooltip-bg: var(--#{$prefix}bg-surface-inverted) !default;
+$tooltip-color: var(--#{$prefix}text-inverted) !default;
+$tooltip-padding-y: var(--#{$prefix}spacer-1) !default;
+$tooltip-padding-x: var(--#{$prefix}spacer-3) !default;
 
 // Loader
 $loader-size: 2.5rem !default;
 
 // Lists
 $list-group-header-bg: var(--#{$prefix}bg-surface-tertiary) !default;
-$list-group-header-color: var(--#{$prefix}secondary) !default;
+$list-group-header-color: var(--#{$prefix}gray-500) !default;
 
 $list-group-border-color: var(--#{$prefix}border-color) !default;
 $list-group-item-padding-y: $card-cap-padding-y !default;
@@ -665,7 +720,7 @@ $list-group-item-padding-x: $card-cap-padding-x !default;
 
 // Modals
 $modal-backdrop-opacity: 0.24 !default;
-$modal-backdrop-bg: $dark !default;
+$modal-backdrop-bg: $backdrop-bg !default;
 $modal-backdrop-blur: 4px !default;
 
 $modal-fade-transform: translate(0, -1rem) !default;
@@ -684,7 +739,7 @@ $modal-inner-padding: 1.5rem !default;
 
 $modal-footer-border-width: var(--#{$prefix}border-width) !default;
 $modal-footer-margin-between: 0.75rem !default;
-$modal-footer-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$modal-footer-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 
 $modal-status-size: $border-width-wide !default;
 
@@ -696,10 +751,11 @@ $modal-sm: 380px !default;
 // Nav
 $nav-link-padding-y: 0.5rem !default;
 $nav-link-padding-x: 0.75rem !default;
-$nav-link-color: var(--#{$prefix}secondary) !default;
+$nav-link-color: var(--#{$prefix}gray-500) !default;
+$nav-link-active-color: var(--#{$prefix}body-color) !default;
 $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
 $nav-link-icon-size: $icon-size !default;
-$nav-link-icon-color: var(--#{$prefix}icon-color) !default;
+$nav-link-icon-color: inherit !default;
 
 $nav-pills-link-active-color: var(--#{$prefix}primary) !default;
 $nav-pills-link-active-bg: var(--#{$prefix}active-bg) !default;
@@ -721,15 +777,19 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 // Navbar
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
+$navbar-light-color: var(--#{$prefix}secondary) !default;
+
+$navbar-hover-color: var(--#{$prefix}body-color) !default;
 
 $navbar-border-width: var(--#{$prefix}border-width) !default;
 $navbar-border-color: var(--#{$prefix}border-color) !default;
 
 $navbar-light-color: var(--#{$prefix}body-color) !default;
 $navbar-light-brand-color: var(--#{$prefix}body-color) !default;
-$navbar-light-active-color: var(--#{$prefix}body-color) color !default;
+$navbar-light-active-color: var(--#{$prefix}body-color) !default;
+$navbar-light-hover-color: var(--#{$prefix}body-color) !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
-$navbar-light-active-bg: rgba(0, 0, 0, 0.06) !default;
+$navbar-light-active-bg: rgba(0, 0, 0, 0.2) !default;
 
 $navbar-dark-color: rgba($white, $text-secondary-opacity) !default;
 $navbar-dark-brand-color: $white !default;
@@ -751,6 +811,7 @@ $navbar-toggler-focus-width: 0 !default;
 $navbar-overlap-height: 9rem !default;
 
 $navbar-nav-link-padding-x: $nav-link-padding-x !default;
+$navbar-nav-link-hover-bg: rgba(0, 0, 0, .04) !default;
 
 $navbar-active-border-color: var(--#{$prefix}primary) !default;
 
@@ -759,7 +820,7 @@ $sidebar-width: 15rem !default;
 
 // Page
 $page-title-font-size: var(--#{$prefix}font-size-h2) !default;
-$page-title-line-height: var(--#{$prefix}line-height-h4) !default;
+$page-title-line-height: var(--#{$prefix}line-height-h2) !default;
 $page-title-font-weight: var(--#{$prefix}font-weight-headings) !default;
 
 // Popover
@@ -767,18 +828,21 @@ $popover-bg: var(--#{$prefix}bg-surface) !default;
 $popover-header-bg: transparent !default;
 $popover-border-color: var(--#{$prefix}border-color) !default;
 $popover-body-color: inherit !default;
+$popover-body-padding-x: .5rem !default;
+$popover-body-padding-y: .5rem !default;
+$popover-box-shadow: var(--#{$prefix}shadow-lg) !default;
 
 // Footer
 $footer-padding-y: 2rem !default;
-$footer-bg: $white !default;
+$footer-bg: var(--#{$prefix}bg-surface) !default;
 $footer-border-color: var(--#{$prefix}border-color) !default;
-$footer-color: var(--#{$prefix}secondary) !default;
+$footer-color: var(--#{$prefix}gray-500) !default;
 
 // Pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: 0.25rem !default;
 $pagination-padding-x: 0.25rem !default;
-$pagination-color: var(--#{$prefix}secondary) !default;
+$pagination-color: var(--#{$prefix}gray-500) !default;
 $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
@@ -814,11 +878,12 @@ $table-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-padding-x: $table-cell-padding-x !default;
 $table-th-padding-y: 0.5rem !default;
-$table-th-color: var(--#{$prefix}secondary) !default;
+$table-th-color: var(--#{$prefix}gray-500) !default;
 $table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-striped-order: even !default;
 $table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-group-separator-color: var(--#{$prefix}border-color-translucent) !default;
+$table-active-bg: var(--#{$prefix}active-bg) !default;
 
 $table-sort-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
 $table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !default;
@@ -826,7 +891,8 @@ $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org
 
 // Toasts
 $toast-border-color: var(--#{$prefix}border-color) !default;
-$toast-header-color: var(--#{$prefix}secondary) !default;
+$toast-header-color: var(--#{$prefix}gray-500) !default;
+$toast-background-color: var(--#{$prefix}bg-surface) !default;
 
 // Tracking
 $tracking-height: 1.5rem !default;
@@ -852,10 +918,10 @@ $input-bg: var(--#{$prefix}bg-forms) !default;
 $input-disabled-bg: $disabled-bg !default;
 $input-border-color: var(--#{$prefix}border-color) !default;
 $input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
-$input-placeholder-color: $text-secondary-light !default;
+$input-placeholder-color: var(--#{$prefix}tertiary) !default;
 
 $input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
-$input-group-addon-color: var(--#{$prefix}secondary) !default;
+$input-group-addon-color: var(--#{$prefix}gray-500) !default;
 
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 
@@ -883,7 +949,7 @@ $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
 $form-check-label-disabled-opacity: $text-secondary-opacity;
 
 $form-select-indicator-color: $text-secondary-light !default;
-$form-select-box-shadow: var(--#{$prefix}box-shadow-input) !default;
+$form-select-box-shadow: var(--#{$prefix}shadow-input) !default;
 
 $form-switch-width: 2rem !default;
 $form-switch-height: 1.25rem !default;
@@ -899,26 +965,28 @@ $form-range-thumb-height: 1rem !default;
 $form-range-thumb-focus-box-shadow-width: 0.125rem !default;
 
 $form-feedback-icon-valid: str-replace(
-        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"),
-        "#",
-        "%23"
+                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"),
+                "#",
+                "%23"
 ) !default;
 $form-feedback-icon-invalid: str-replace(
-        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"),
-        "#",
-        "%23"
+                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"),
+                "#",
+                "%23"
 ) !default;
 
 $form-label-font-size: $h4-font-size !default;
 $form-label-font-weight: var(--#{$prefix}font-weight-medium) !default;
 
+$form-secondary-color: var(--#{$prefix}secondary) !default;
+
 // Legend
 $legend-bg: var(--#{$prefix}border-color) !default;
 $legend-size: 0.75em !default;
 $legend-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 // Flags
-$flag-box-shadow: var(--#{$prefix}box-shadow-border) !default;
+$flag-box-shadow: var(--#{$prefix}shadow-border) !default;
 $flag-border-radius: var(--#{$prefix}border-radius) !default;
 $flag-sizes: $avatar-sizes !default;
 
@@ -928,6 +996,7 @@ $payment-sizes: $avatar-sizes !default;
 // Offcanvas
 $offcanvas-bg-color: var(--#{$prefix}bg-surface) !default;
 $offcanvas-border-color: var(--#{$prefix}border-color) !default;
+$offcanvas-backdrop-bg: $backdrop-bg !default;
 
 // Placeholder
 $placeholder-opacity-min: 0.1 !default;