@taiga-ui/styles 5.23.0-canary.dd294f6 → 5.24.0

package/components/card-large.less

@@ -0,0 +1,95 @@
+:where([tuiCardLarge]:not([tuiHeader])&) {
+    font: var(--tui-typography-body-m);
+}
+
+[tuiCardLarge][data-space]:where(*&) {
+    --t-space: 0.75rem;
+    --t-radius: var(--tui-radius-l);
+    --t-comp: -0.25rem;
+    --t-padding: 0.75rem;
+    --t-dim: calc(var(--t-padding) + var(--t-comp));
+
+    padding: var(--t-padding);
+    border-radius: var(--t-radius);
+    box-sizing: border-box;
+    text-align: start;
+
+    &[data-space='normal'] {
+        --t-radius: 1.5rem;
+        --t-padding: 1.5rem;
+        --t-space: 1.5rem;
+    }
+
+    &[data-space='compact'] {
+        --t-radius: 1rem;
+        --t-padding: 1.25rem;
+        --t-space: 1.25rem;
+    }
+
+    &:not([tuiCell], [tuiHeader], [tuiForm]) {
+        flex-direction: column;
+        gap: var(--t-space);
+        align-items: stretch;
+
+        > :last-child:not([tuiCell]) {
+            margin-block-start: auto;
+        }
+    }
+
+    &[tuiHeader] {
+        padding: var(--t-dim) var(--t-padding);
+
+        [tuiButton]:last-child,
+        [tuiAvatar]:last-child,
+        [tuiSwitch]:last-child,
+        tui-segmented:last-child {
+            margin-inline-end: var(--t-comp);
+        }
+    }
+
+    > [tuiHeader] {
+        margin: var(--t-comp) 0 calc(2 * var(--t-comp));
+
+        [tuiButton]:last-child,
+        [tuiAvatar]:last-child,
+        [tuiSwitch]:last-child,
+        tui-segmented:last-child {
+            margin-inline-end: var(--t-comp);
+        }
+    }
+
+    [tuiCell]:not(:where(tui-textfield *, [tuiStep])) {
+        inline-size: 100%;
+        margin: -0.5rem -0.5rem -0.75rem;
+        border-radius: var(--tui-radius-l);
+
+        --t-pad: 0.5rem;
+
+        &:last-of-type {
+            margin-block-end: -0.5rem;
+        }
+    }
+
+    [tuiHeader] + [tuiDescription] {
+        margin-block: -0.5rem -0.25rem;
+    }
+
+    [tuiHeader] + [tuiCell] {
+        margin-block-start: var(--t-comp);
+    }
+
+    [tuiAccessories] > [tuiButtonX] {
+        align-self: flex-start;
+
+        --t-size: 1.5rem;
+    }
+
+    > footer {
+        margin-block-end: var(--t-comp);
+
+        > [tuiButton],
+        > [tuiBlock] {
+            margin-block-end: calc(-1 * var(--t-comp));
+        }
+    }
+}

package/components/card-medium.less

@@ -0,0 +1,26 @@
+[tuiCardMedium]:where(*&) {
+    inline-size: calc(8.75rem * var(--tui-font-scale));
+    block-size: calc(8.75rem * var(--tui-font-scale));
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 0.75rem;
+    border-radius: var(--tui-radius-l);
+    box-sizing: border-box;
+
+    &[tuiTitle] {
+        padding: 0.625rem 0.75rem;
+    }
+
+    [tuiTitle] {
+        margin: -0.125rem 0;
+    }
+
+    [tuiSubtitle] {
+        color: var(--tui-text-primary);
+    }
+
+    &[tuiTitle],
+    [tuiTitle]:not([tuiCell] *):not([tuiLabel] *) {
+        font-weight: bold;
+    }
+}

package/components/card-row.less

@@ -0,0 +1,29 @@
+[tuiCardRow]:where(*&) {
+    display: flex;
+    align-items: center;
+    gap: 3rem;
+
+    tui-icon {
+        font-size: 1rem;
+    }
+
+    [tuiTitle] {
+        font: var(--tui-typography-body-s);
+
+        > :not([tuiSubtitle]) {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+    }
+
+    [tuiSubtitle] {
+        color: var(--tui-text-secondary);
+        font: var(--tui-typography-body-xs);
+    }
+
+    & > [tuiButton],
+    & > [tuiIconButton] {
+        margin-inline-start: auto;
+    }
+}

package/components/card.less

@@ -0,0 +1,23 @@
+@import '@taiga-ui/styles/utils';
+
+[tuiCardMedium],
+[tuiCardLarge] {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    flex-shrink: 0;
+    text-decoration: none;
+    overflow: hidden;
+    padding: 0;
+    border: 0;
+    background: var(--tui-background-elevation-2);
+
+    [tuiTitle],
+    [tuiSubtitle] {
+        max-inline-size: 100%;
+    }
+
+    > * {
+        .scrollbar-hidden();
+    }
+}

package/mixins/browsers.less

@@ -16,6 +16,12 @@
     }
 }
 
+.liquid-glass-only(@ruleset) {
+    @supports (-webkit-touch-callout: none) and (position-anchor: --value) {
+        @ruleset();
+    }
+}
+
 .chrome-only(@ruleset) {
     @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
         @ruleset();

package/mixins/browsers.scss

@@ -16,6 +16,12 @@
     }
 }
 
+@mixin liquid-glass-only {
+    @supports (-webkit-touch-callout: none) and (position-anchor: --value) {
+        @content;
+    }
+}
+
 @mixin chrome-only {
     @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
         @content;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@taiga-ui/styles",
-    "version": "5.23.0-canary.dd294f6",
+    "version": "5.24.0",
     "description": "Framework-agnostic package with styles for Taiga UI",
     "repository": {
         "type": "git",
@@ -25,6 +25,6 @@
         "./*": "./*"
     },
     "peerDependencies": {
-        "@taiga-ui/design-tokens": "~0.316.0"
+        "@taiga-ui/design-tokens": "~0.320.0"
     }
 }