@taiga-ui/styles 5.21.0-canary.d5429b6 → 5.22.0

package/components/list.less

@@ -1,4 +1,4 @@
-[tuiList]:where(*&) {
+:where([tuiList]:is(ul, ol)&) {
     list-style: none;
     padding: 0.25rem 0;
     margin-block: 0;
@@ -21,7 +21,6 @@
         float: left;
         unicode-bidi: plaintext;
         font-variant-numeric: tabular-nums;
-        // physical shorthand margins keep the marker on the wrong side in RTL
         margin-block: 0;
         margin-inline: -1.5rem 0.5625rem;
     }
@@ -50,22 +49,21 @@
         margin-inline: 0;
     }
 
-    &[data-size='l'] {
+    &:where([data-size='l']) {
         font: var(--tui-typography-body-l);
 
         &:is(ul) > li::before {
             inline-size: 0.875rem;
-            // physical shorthand margins keep the marker on the wrong side in RTL
             margin-block: 0;
             margin-inline: -1.4375rem 0.5625rem;
         }
     }
 
-    &[data-size='m'] {
+    &:where([data-size='m']) {
         font: var(--tui-typography-body-m);
     }
 
-    &[data-size='s'] {
+    &:where([data-size='s']) {
         font: var(--tui-typography-ui-s);
 
         & > li {
@@ -73,3 +71,75 @@
         }
     }
 }
+
+:where(dl[tuiList]&) {
+    display: grid;
+    grid-template-columns: minmax(20%, auto) auto;
+    font: var(--tui-typography-body-s);
+    margin: 0;
+
+    &:where([data-size='s']) {
+        dd,
+        dt {
+            padding: 0.25rem;
+        }
+    }
+
+    &:where([data-size='m']) {
+        dd,
+        dt {
+            padding: 0.625rem 0.375rem;
+        }
+    }
+
+    &:where([data-size='l']) {
+        font: var(--tui-typography-body-m);
+
+        dd,
+        dt {
+            padding: 1rem 0.5rem;
+        }
+    }
+
+    dt,
+    dd {
+        margin: 0;
+        font: inherit;
+
+        &:not(:last-of-type) {
+            box-shadow: 0 1px var(--tui-border-normal);
+        }
+    }
+
+    dt {
+        color: var(--tui-text-secondary);
+        padding-inline-start: 0;
+    }
+
+    dd {
+        padding-inline-end: 0;
+    }
+
+    &:where([compact]) {
+        dt,
+        dd {
+            padding-block-end: 0;
+            box-shadow: none;
+            clip-path: inset(0);
+        }
+
+        dt {
+            white-space: nowrap;
+        }
+
+        dt::after {
+            content: '';
+            display: inline-block;
+            block-size: 1px;
+            margin-inline-start: 0.25rem;
+            transform: scaleX(var(--tui-inline));
+            border-image: repeating-linear-gradient(90deg, var(--tui-text-tertiary) 0 0.0625rem, transparent 0 0.125rem)
+                fill 0 / calc(100% - 1px) 0 0/0 100vw 0 0 repeat;
+        }
+    }
+}

package/mixins/liquid-glass.less

@@ -0,0 +1,78 @@
+// iOS liquid glass, shared by AppBar, TabBar and SearchBar.
+// Apply `.liquid-glass-vars()` at the glass scope root and `.liquid-glass-dark()`
+// in the component's dark theme selector: the surface and the bevel read the
+// values through inherited private properties, so the pieces can sit on any
+// element or pseudo element below the root
+
+@tui-glass-bevel-light: linear-gradient(
+    319deg,
+    #fff 4%,
+    #fff 19%,
+    rgba(255, 255, 255, 0.12) 40%,
+    rgba(255, 255, 255, 0.02) 45%,
+    rgba(255, 255, 255, 0) 48%,
+    rgba(255, 255, 255, 0) 50%,
+    rgba(255, 255, 255, 0) 52%,
+    rgba(255, 255, 255, 0.02) 55%,
+    rgba(255, 255, 255, 0.12) 60%,
+    #fff 80%,
+    #fff 96%
+);
+@tui-glass-bevel-dark: linear-gradient(
+    319deg,
+    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.12) 19%,
+    rgba(255, 255, 255, 0.04) 40%,
+    rgba(255, 255, 255, 0.02) 45%,
+    rgba(255, 255, 255, 0) 48%,
+    rgba(255, 255, 255, 0) 50%,
+    rgba(255, 255, 255, 0) 52%,
+    rgba(255, 255, 255, 0.02) 55%,
+    rgba(255, 255, 255, 0.04) 60%,
+    rgba(255, 255, 255, 0.12) 80%,
+    rgba(255, 255, 255, 0.2) 96%
+);
+
+.liquid-glass-vars() {
+    --t-glass-background: rgba(255, 255, 255, 0.7);
+    --t-glass-glow: var(--tui-background-base);
+    --t-glass-filter: blur(0.25rem) saturate(6) brightness(1.05);
+    --t-glass-bevel: @tui-glass-bevel-light;
+    --t-glass-bevel-filter: none;
+}
+
+.liquid-glass-dark() {
+    --t-glass-background: rgba(88, 88, 88, 0.31);
+    --t-glass-glow: rgba(31, 31, 31, 0.8);
+    --t-glass-filter: blur(0.25rem) saturate(4);
+    --t-glass-bevel: @tui-glass-bevel-dark;
+    --t-glass-bevel-filter: brightness(0.6);
+}
+
+// Frosted translucent surface with an inner glow
+.liquid-glass(@shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.09)) {
+    backdrop-filter: var(--t-glass-filter);
+    background-color: var(--t-glass-background);
+    box-shadow:
+        @shadow,
+        inset 0 0 0.75rem var(--t-glass-glow);
+}
+
+// The bevel of the glass: a gradient clipped to a 1px ring by subtracting the
+// content box from the border box. Put it on a pseudo element of a positioned,
+// rounded container
+.liquid-glass-bevel() {
+    content: '';
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    border-radius: inherit;
+    pointer-events: none;
+    padding: 1px;
+    background: var(--t-glass-bevel);
+    filter: var(--t-glass-bevel-filter);
+    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+    mask-origin: content-box, border-box;
+    mask-clip: content-box, border-box;
+    mask-composite: exclude;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@taiga-ui/styles",
-    "version": "5.21.0-canary.d5429b6",
+    "version": "5.22.0",
     "description": "Framework-agnostic package with styles for Taiga UI",
     "repository": {
         "type": "git",

package/utils.less

@@ -3,6 +3,7 @@
 @import 'mixins/miscellaneous.less';
 @import 'mixins/slider.less';
 @import 'mixins/appearance.less';
+@import 'mixins/liquid-glass.less';
 @import 'mixins/hitbox.less';
 @import 'variables/duration.less';
 @import 'variables/media.less';