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

package/assets/styles/ui/_empty.scss

@@ -28,11 +28,6 @@
 .empty-img {
     margin: 0 0 2rem;
     line-height: 1;
-
-    img {
-        height: 8rem;
-        width: auto;
-    }
 }
 
 .empty-header {

package/assets/styles/ui/_flags.scss

@@ -1,5 +1,5 @@
 $countries: (
-    'ad', 'af', 'ae', 'afrun', 'ag', 'ai', 'al', 'am', 'ams', 'ao', 'aq', 'ar', 'as', 'at', 'au', 'aw', 'ax', 'az', 'ba', 'bb', 'bd', 'be', 'bf', 'bg', 'bh', 'bi', 'bj', 'bl', 'bm', 'bn', 'bo', 'bq-bo', 'bq-sa', 'bq-se', 'br', 'bs', 'bt', 'bv', 'bw', 'by', 'bz', 'ca', 'cc', 'cd', 'cf', 'cg', 'ch', 'ci', 'ck', 'cl', 'cm', 'cn', 'co', 'cr', 'cu', 'cv', 'cw', 'cx', 'cy', 'cz', 'de', 'dj', 'dk', 'dm', 'do', 'ec', 'ee', 'eg', 'eh', 'er', 'es', 'et', 'eu', 'fi', 'fj', 'fk', 'fm', 'fo', 'fr', 'ga', 'gb-eng', 'gb-sct', 'gb', 'gb-wls', 'gb-nir', 'gd', 'ge', 'gf', 'gg', 'gh', 'gi', 'gl', 'gm', 'gn', 'gp', 'gq', 'gr', 'gs', 'gt', 'gu', 'gw', 'gy', 'hk', 'hm', 'hn', 'hr', 'ht', 'hu', 'id', 'ie', 'il', 'im', 'in', 'io', 'iq', 'ir', 'is', 'it', 'je', 'jm', 'jo', 'jp', 'ke', 'kg', 'kh', 'ki', 'km', 'kn-sk', 'kp', 'kr', 'kw', 'ky', 'kz', 'la', 'lb', 'lc', 'li', 'lk', 'lr', 'ls', 'lt', 'lu', 'lv', 'ly', 'ma', 'mc', 'md', 'me', 'mf', 'mg', 'mh', 'mk', 'ml', 'mm', 'mn', 'mo', 'mp', 'mq', 'mr', 'ms', 'mt', 'mu', 'mv', 'mw', 'mx', 'my', 'mz', 'na', 'nc', 'ne', 'nf', 'ng', 'ni', 'nl', 'no', 'np', 'nr', 'nu', 'nz', 'om', 'pa', 'pe', 'pf', 'pg', 'ph', 'pk', 'pl', 'pm', 'pn', 'pr', 'ps', 'pt', 'pw', 'py', 'qa', 'rainbow', 're', 'ro', 'rs', 'ru', 'rw', 'sa', 'sb', 'sc', 'sd', 'se', 'sg', 'sh', 'si', 'sj', 'sk', 'sl', 'sm', 'sn', 'so', 'sr', 'ss', 'st', 'sv', 'sx', 'sy', 'sz', 'tc', 'td', 'tf', 'tg', 'th', 'tj', 'tk', 'tl', 'tm', 'tn', 'to', 'tr', 'tt', 'tv', 'tw', 'tz', 'ua', 'ug', 'um', 'unasur', 'us', 'uy', 'uz', 'va', 'vc', 've', 'vg', 'vi', 'vn', 'vu', 'wf', 'ws', 'ye', 'za', 'zm', 'zw'
+        'ad', 'af', 'ae', 'afrun', 'ag', 'ai', 'al', 'am', 'ao', 'aq', 'ar', 'as', 'at', 'au', 'aw', 'ax', 'az', 'ba', 'bb', 'bd', 'be', 'bf', 'bg', 'bh', 'bi', 'bj', 'bl', 'bm', 'bn', 'bo', 'bq-bo', 'bq-sa', 'bq-se', 'br', 'bs', 'bt', 'bv', 'bw', 'by', 'bz', 'ca', 'cc', 'cd', 'cf', 'cg', 'ch', 'ci', 'ck', 'cl', 'cm', 'cn', 'co', 'cr', 'cu', 'cv', 'cw', 'cx', 'cy', 'cz', 'de', 'dj', 'dk', 'dm', 'do', 'dz', 'ec', 'ee', 'eg', 'eh', 'er', 'es', 'et', 'eu', 'fi', 'fj', 'fk', 'fm', 'fo', 'fr', 'ga', 'gb-eng', 'gb-sct', 'gb', 'gb-wls', 'gb-nir', 'gd', 'ge', 'gf', 'gg', 'gh', 'gi', 'gl', 'gm', 'gn', 'gp', 'gq', 'gr', 'gs', 'gt', 'gu', 'gw', 'gy', 'hk', 'hm', 'hn', 'hr', 'ht', 'hu', 'id', 'ie', 'il', 'im', 'in', 'io', 'iq', 'ir', 'is', 'it', 'je', 'jm', 'jo', 'jp', 'ke', 'kg', 'kh', 'ki', 'km', 'kn', 'kp', 'kr', 'kw', 'ky', 'kz', 'la', 'lb', 'lc', 'li', 'lk', 'lr', 'ls', 'lt', 'lu', 'lv', 'ly', 'ma', 'mc', 'md', 'me', 'mf', 'mg', 'mh', 'mk', 'ml', 'mm', 'mn', 'mo', 'mp', 'mq', 'mr', 'ms', 'mt', 'mu', 'mv', 'mw', 'mx', 'my', 'mz', 'na', 'nc', 'ne', 'nf', 'ng', 'ni', 'nl', 'no', 'np', 'nr', 'nu', 'nz', 'om', 'pa', 'pe', 'pf', 'pg', 'ph', 'pk', 'pl', 'pm', 'pn', 'pr', 'ps', 'pt', 'pw', 'py', 'qa', 'rainbow', 're', 'ro', 'rs', 'ru', 'rw', 'sa', 'sb', 'sc', 'sd', 'se', 'sg', 'sh', 'si', 'sj', 'sk', 'sl', 'sm', 'sn', 'so', 'sr', 'ss', 'st', 'sv', 'sx', 'sy', 'sz', 'tc', 'td', 'tf', 'tg', 'th', 'tj', 'tk', 'tl', 'tm', 'tn', 'to', 'tr', 'tt', 'tv', 'tw', 'tz', 'ua', 'ug', 'um', 'unasur', 'us', 'uy', 'uz', 'va', 'vc', 've', 'vg', 'vi', 'vn', 'vu', 'wf', 'ws', 'ye', 'za', 'zm', 'zw'
 );
 
 .flag {
@@ -28,4 +28,4 @@ $countries: (
     .flag-#{$flag-size} {
         height: map-get($size, size);
     }
-}
+}

package/assets/styles/ui/_forms.scss

@@ -24,7 +24,7 @@ Form label
 .form-label-description {
     float: right;
     font-weight: var(--#{$prefix}font-weight-normal);
-    color: var(--#{$prefix}secondary);
+    color: $form-secondary-color;
 }
 
 /**
@@ -32,7 +32,7 @@ Form hint
  */
 .form-hint {
     display: block;
-    color: var(--#{$prefix}secondary);
+    color: $form-secondary-color;
 
     &:last-child {
         margin-bottom: 0;
@@ -50,11 +50,12 @@ Form hint
     .form-control + &,
     .form-select + & {
         margin-top: .5rem;
+        color: $form-secondary-color;
     }
 }
 
 /**
-Form single
+Form select
  */
 .form-select {
     &:-moz-focusring {
@@ -67,14 +68,14 @@ Form control
  */
 .form-control {
     &:-webkit-autofill {
-        box-shadow: 0 0 0 1000px var(--#{$prefix}body-bg) inset;
+        box-shadow: 0 0 0 1000px var(--#{$prefix}bg-surface-secondary) inset;
         color: var(--#{$prefix}body-color);
         -webkit-text-fill-color: var(--#{$prefix}body-color);
     }
 
     &:disabled,
     &.disabled {
-        color: var(--#{$prefix}secondary);
+        color: $form-secondary-color;
         user-select: none;
     }
 
@@ -124,11 +125,15 @@ Form control
 .form-fieldset {
     padding: 1rem;
     margin-bottom: 1rem;
-    background: var(--#{$prefix}body-bg);
+    background: var(--#{$prefix}bg-surface-secondary);
     border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
     border-radius: var(--#{$prefix}border-radius);
 }
 
+fieldset:empty {
+    display: none;
+}
+
 /**
 Form help
  */
@@ -140,7 +145,7 @@ Form help
     width: 1.125rem;
     height: 1.125rem;
     font-size: .75rem;
-    color: var(--#{$prefix}secondary);
+    color: $form-secondary-color;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
@@ -222,3 +227,24 @@ Upload files
     margin-left: 0;
     border-left: 0;
 }
+
+/**
+Floating inputs
+ */
+// Fix for the bug in twbs/bootstrap v5.3.3. Issue #39080. Should be fixed in v5.3.4
+label[for="floating-input"] {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/**
+Forms on mobile devices 
+  */
+.form-control,
+.form-select {
+    @include media-breakpoint-down(sm) {
+        font-size: 1rem;
+    }
+}

package/assets/styles/ui/_grid.scss

@@ -112,4 +112,4 @@
         justify-content: center;
         flex-direction: column;
     }
-}
+}

package/assets/styles/ui/_icons.scss

@@ -69,4 +69,4 @@
     transition: all .15s ease 0s;
     animation: rotate-360 3s linear infinite;
     animation-fill-mode: both
-}
+}

package/assets/styles/ui/_images.scss

@@ -13,3 +13,7 @@
         --#{$prefix}img-responsive-ratio: #{$ratio};
     }
 }
+
+.img-bg {
+    background: no-repeat center/cover;
+}

package/assets/styles/ui/_lists.scss

@@ -94,26 +94,22 @@
     }
 }
 
-
-.list-separated-item {
-    padding: 1rem 0;
-
-    &:first-child {
-        padding-top: 0;
-    }
-
-    &:last-child {
-        padding-bottom: 0;
-    }
-
-    & + & {
-        border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-    }
+/**
+Seprated list
+*/
+.list-separated {
+    display: flex;
+    flex-direction: column;
+    gap: $spacer;
 }
 
 /**
 Inline list
  */
+.list-inline {
+    margin: 0;
+}
+
 .list-inline-item:not(:last-child) {
     margin-right: auto;
     margin-inline-end: $list-inline-padding;
@@ -124,4 +120,4 @@ Inline list
         content: ' · ';
         margin-inline-end: $list-inline-padding;
     }
-}
+}

package/assets/styles/ui/_loaders.scss

@@ -69,4 +69,4 @@ Dimmer
         content: "...";
         animation: animated-dots 1.2s steps(4, jump-none) infinite;
     }
-}
+}

package/assets/styles/ui/_markdown.scss

@@ -2,7 +2,7 @@
 Markdown
  */
 .markdown {
-    line-height: $line-height-lg;
+    line-height: $line-height-xl;
 
     > :first-child {
         margin-top: 0;
@@ -24,10 +24,15 @@ Markdown
         h1, h2, h3, h4, h5, h6 {
             font-weight: var(--#{$prefix}font-weight-bold);
         }
+
+        h2, h3, h4, h5, h6 {
+            margin-top: 2.5rem;
+        }
     }
 
     > table {
-        @extend .table, .table-bordered;
+        font-size: var(--#{$prefix}body-font-size);
+        @extend .table, .table-bordered, .table-sm;
     }
 
     > blockquote {
@@ -36,7 +41,13 @@ Markdown
         padding: .5rem 1.5rem;
     }
 
-    > img {
+    > img,
+    > p > img {
         border-radius: var(--#{$prefix}border-radius);
+        border: 1px solid var(--#{$prefix}border-color);
+    }
+
+    > pre {
+        max-height: 20rem;
     }
-}
+}

package/assets/styles/ui/_modals.scss

@@ -1,5 +1,5 @@
-.modal-content {
-    .btn-close {
+.modal-content, .modal-header {
+    > .btn-close {
         position: absolute;
         top: 0;
         right: 0;

package/assets/styles/ui/_nav.scss

@@ -1,3 +1,7 @@
+.nav {
+    --#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
+}
+
 .nav-vertical {
     &,
     .nav {
@@ -14,6 +18,7 @@
     .nav-link.active,
     .nav-item.show .nav-link {
         font-weight: var(--#{$prefix}font-weight-bold);
+        color: var(--#{$prefix}nav-link-active-color);
     }
 
     &.nav-pills {
@@ -36,10 +41,9 @@
     .nav-link {
         padding-left: 0;
         padding-right: 0;
-        margin: 0 0 (- $nav-bordered-border-width);
+        margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
         border: 0;
         border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
-        color: var(--#{$prefix}secondary);
     }
 
     .nav-link.active,
@@ -47,13 +51,23 @@
         color: $nav-bordered-link-active-color;
         border-color: $nav-bordered-link-active-border-color;
     }
+}
 
+.nav-underline {
+    .nav-link {
+        border-radius: 0;
+    }
 }
 
 .nav-link {
     display: flex;
-    @include transition(color $transition-time);
+    @include transition(color $transition-time, background-color $transition-time);
     align-items: center;
+
+    &:hover,
+    &:focus {
+        background-color: var(--#{$prefix}nav-link-hover-bg);
+    }
 }
 
 .nav-link-toggle {

package/assets/styles/ui/_offcanvas.scss

@@ -1,5 +1,5 @@
 .offcanvas-header {
-    border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent;
+    border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 }
 
 .offcanvas-footer {
@@ -14,4 +14,4 @@
 
 .offcanvas-narrow {
     width: 20rem;
-}
+}

package/assets/styles/ui/_pagination.scss

@@ -1,5 +1,7 @@
 .pagination {
+    --#{$prefix}pagination-gap: .25rem;
     user-select: none;
+    gap: var(--#{$prefix}pagination-gap);
 }
 
 .page-link {

package/assets/styles/ui/_payments.scss

@@ -1,4 +1,4 @@
-$payment-icons: ('2checkout', 'alipay', 'amazon', 'americanexpress', 'applepay', 'bancontact', 'bitcoin', 'bitpay', 'blik', 'cirrus', 'clickandbuy', 'coinkite', 'dinersclub', 'directdebit', 'discover', 'dotpay', 'dwolla', 'ebay', 'epayco', 'eway', 'giropay', 'googlewallet', 'ingenico', 'jcb', 'klarna', 'laser', 'maestro', 'mastercard', 'mir', 'monero', 'neteller', 'ogone', 'okpay', 'paybox', 'paymill', 'payone', 'payoneer', 'paypal', 'paysafecard', 'payu', 'payza', 'przelewy24', 'ripple', 'sage', 'sepa', 'shopify', 'skrill', 'solo', 'square', 'stripe', 'switch', 'tpay', 'ukash', 'unionpay', 'verifone', 'verisign', 'visa', 'webmoney', 'westernunion', 'worldpay');
+$payment-icons: ("2c2p", "2checkout", "adyen", "affirm", "alipay-plus", "alipay", "allegro-pay", "amazon-pay", "amazon", "americanexpress", "applepay", "authorize", "autopay", "bancontact", "binance-usd", "bitcoin", "bitpay", "bkash", "blik", "braintree", "cash-app", "chime", "cirrus", "clickandbuy", "coinkite", "dinersclub", "directdebit", "discover", "dotpay", "dwolla", "easypaisa", "ebay", "elo", "epayco", "esewa", "ethereum", "eway", "fonepay", "giropay", "google-pay", "googlewallet", "hubspot", "ingenico", "ideal", "imepay", "jcb", "khalti", "klarna", "laser", "litecoin", "maestro", "mastercard", "mercado-pago", "metamask", "mir", "monero", "moneygram", "neteller", "ogone", "okpay", "opensea", "paybox", "payconiq", "payka", "payline", "paymill", "payone", "payoneer", "paypal", "paypo", "paysafe", "paysafecard", "payu", "payza", "poli", "przelewy24", "revolut-pay", "ripple", "sage", "samsung-pay", "sepa", "shop-pay", "shopify", "skrill", "solana", "solo", "spingo", "square", "stax", "stripe", "switch", "tether", "tpay", "troy", "true-usd", "ukash", "unionpay", "venmo", "verifone", "verisign", "visa", "we-chat-pay", "webmoney", "westernunion", "wise", "worldpay", "zelle");
 
 .payment {
     height: $avatar-size;

package/assets/styles/ui/_placeholder.scss

@@ -6,4 +6,4 @@
     &:not(.avatar):not([class*="card-img-"]), {
         border-radius: var(--#{$prefix}border-radius);
     }
-}
+}

package/assets/styles/ui/_progress.scss

@@ -104,4 +104,4 @@ Progressbg
     font-weight: var(--#{$prefix}font-weight-medium);
     margin-left: auto;
     padding-left: 2rem;
-}
+}

package/assets/styles/ui/_ribbons.scss

@@ -87,6 +87,7 @@
 .ribbon-start {
     right: auto;
     left: calc(-1 * var(--#{$prefix}ribbon-margin));
+    border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
 
     &:before {
         top: auto;

package/assets/styles/ui/_segmented.scss

@@ -0,0 +1,101 @@
+.nav-segmented {
+    --#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
+    --#{$prefix}nav-padding: 2px;
+    --#{$prefix}nav-height: 2.5rem;
+    --#{$prefix}nav-gap: .25rem;
+    --#{$prefix}nav-active-bg: var(--#{$prefix}bg-surface);
+    --#{$prefix}nav-font-size: inherit;
+    --#{$prefix}nav-radius: 6px;
+
+
+    --#{$prefix}nav-link-disabled-color: var(--#{$prefix}disabled-color);
+    --#{$prefix}nav-link-gap: .25rem;
+    --#{$prefix}nav-link-padding-x: .75rem;
+    --#{$prefix}nav-link-icon-size: 1.25rem;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--#{$prefix}nav-gap);
+    padding: var(--#{$prefix}nav-padding);
+    list-style: none;
+    background: var(--#{$prefix}nav-bg);
+    border-radius: calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding));
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
+
+    .nav-link {
+        display: inline-flex;
+        gap: calc(.25rem + var(--#{$prefix}nav-link-gap));
+        align-items: center;
+        margin: 0;
+        font-size: var(--#{$prefix}nav-font-size);
+        min-width: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
+        height: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
+        padding: 0 calc(var(--#{$prefix}nav-link-padding-x) - 2px);
+        border: 1px solid transparent;
+        background: transparent;
+        color: var(--#{$prefix}secondary);
+        text-align: center;
+        text-decoration: none;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: background-color $transition-time, color $transition-time;
+        border-radius: var(--#{$prefix}nav-radius);
+        flex-grow: 1;
+        justify-content: center;
+
+        &:hover,
+        &.hover {
+            background: rgba(0, 0, 0, .04);
+            color: var(--#{$prefix}body-color);
+        }
+
+        &.disabled,
+        &:disabled {
+            color: var(--#{$prefix}nav-link-disabled-color);
+            cursor: not-allowed;
+        }
+    }
+
+    .nav-link-input:checked + .nav-link,
+    .nav-link.active {
+        color: var(--#{$prefix}body-color);
+        background: var(--#{$prefix}nav-active-bg);
+        border-color: var(--#{$prefix}border-color);
+    }
+
+    .nav-link-input {
+        display: none;
+    }
+
+    .nav-link-icon {
+        width: var(--#{$prefix}nav-link-icon-size);
+        height: var(--#{$prefix}nav-link-icon-size);
+        margin: 0 -.25rem;
+        color: inherit;
+    }
+}
+
+.nav-segmented-vertical {
+    flex-direction: column;
+
+    .nav-link {
+        justify-content: flex-start;
+    }
+}
+
+.nav-sm {
+    --#{$prefix}nav-height: 2rem;
+    --#{$prefix}nav-font-size: var(--tblr-font-size-h5);
+    --#{$prefix}nav-radius: 4px;
+    --#{$prefix}nav-link-padding-x: .5rem;
+    --#{$prefix}nav-link-gap: .25rem;
+    --#{$prefix}nav-link-icon-size: 1rem;
+}
+
+.nav-lg {
+    --#{$prefix}nav-height: 3rem;
+    --#{$prefix}nav-font-size: var(--tblr-font-size-h3);
+    --#{$prefix}nav-radius: 8px;
+    --#{$prefix}nav-link-padding-x: 1rem;
+    --#{$prefix}nav-link-gap: .5rem;
+    --#{$prefix}nav-link-icon-size: 1.5rem;
+}

package/assets/styles/ui/_signature.scss

@@ -0,0 +1,15 @@
+.signature {
+    --#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
+    --#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
+    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    padding: var(--#{$prefix}signature-padding);
+    border-radius: var(--#{$prefix}border-radius);
+}
+
+.signature-canvas {
+    border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
+    border-radius: calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding));
+    display: block;
+    cursor: crosshair;
+    width: 100%;
+}

package/assets/styles/ui/_social.scss

@@ -0,0 +1,52 @@
+$apps: (
+        "apple",
+        "discord",
+        "dribbble",
+        "facebook",
+        "figma",
+        "github",
+        "google",
+        "instagram",
+        "linkedin",
+        "medium",
+        "meta",
+        "metamask",
+        "pinterest",
+        "reddit",
+        "signal",
+        "skype",
+        "snapchat",
+        "spotify",
+        "telegram",
+        "tiktok",
+        "tumblr",
+        "twitch",
+        "vk",
+        "x",
+        "youtube"
+);
+
+.social {
+    position: relative;
+    display: inline-block;
+    height: $avatar-size;
+    aspect-ratio: 1;
+    background: no-repeat center/cover;
+    vertical-align: bottom;
+}
+
+@each $app in $apps {
+    .social-app-#{$app} {
+        background-image: url("#{$assets-base}/img/social/#{$app}.svg");
+
+        &.social-gray {
+            background-image: url("#{$assets-base}/img/social/#{$app}-gray.svg");
+        }
+    }
+}
+
+@each $flag-size, $size in $flag-sizes {
+    .social-#{$flag-size} {
+        height: map-get($size, size);
+    }
+}

package/assets/styles/ui/_status.scss

@@ -160,4 +160,4 @@
             animation: 2s linear 1s infinite backwards status-pulsate-tertiary;
         }
     }
-}
+}

package/assets/styles/ui/_steps.scss

@@ -17,6 +17,10 @@
 @each $name, $color in $extra-colors {
     .steps-#{$name} {
         --#{$prefix}steps-color: var(--#{$prefix}#{$name});
+
+        &-lt {
+            --#{$prefix}steps-color: var(--#{$prefix}#{$name}-lt);
+        }
     }
 }
 
@@ -149,4 +153,4 @@
             }
         }
     }
-}
+}

package/assets/styles/ui/_switch-icon.scss

@@ -208,4 +208,4 @@
             transform: translateY(0);
         }
     }
-}
+}

package/assets/styles/ui/_tables.scss

@@ -1,7 +1,6 @@
 .table {
     thead {
         th {
-            color: $table-th-color;
             background: $table-th-bg;
             @include subheader;
             padding-top: $table-th-padding-y;
@@ -148,3 +147,30 @@ Table sort
         background: transparent;
     }
 }
+
+//
+// Table selectable
+//
+.table-selectable {
+    tbody tr {
+        .on-checked {
+            display: none;
+        }
+
+        .on-unchecked {
+            display: initial;
+        }
+
+        &:has(.table-selectable-check:checked) {
+            background-color: $table-active-bg;
+
+            .on-checked {
+                display: initial;
+            }
+
+            .on-unchecked {
+                display: none;
+            }
+        }
+    }
+}

package/assets/styles/ui/_tags.scss

@@ -7,7 +7,7 @@
     border-radius: var(--#{$prefix}border-radius);
     padding: 0 0.5rem;
     background: var(--#{$prefix}bg-surface);
-    box-shadow: var(--#{$prefix}box-shadow-input);
+    box-shadow: var(--#{$prefix}shadow-input);
     gap: .5rem;
 
     .btn-close {

package/assets/styles/ui/_timeline.scss

@@ -37,7 +37,7 @@
     justify-content: center;
     width: var(--#{$prefix}timeline-icon-size, $avatar-size);
     height: var(--#{$prefix}timeline-icon-size, $avatar-size);
-    background: var(--#{$prefix}gray-200);
+    background: var(--#{$prefix}bg-surface-secondary);
     color: var(--#{$prefix}secondary);
     border-radius: var(--#{$prefix}border-radius);
     z-index: 5

package/assets/styles/ui/_toasts.scss

@@ -1,5 +1,4 @@
 .toast {
-    background: $white;
     border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
     box-shadow: $alert-shadow;
 

package/assets/styles/ui/_tracking.scss

@@ -26,4 +26,4 @@
     height: var(--#{$prefix}tracking-height);
     min-width: .25rem;
     background: var(--#{$prefix}border-color);
-}
+}