@rt-tools/ui-kit 0.3.1 → 0.5.0

package/src/lib/ui-kit/table/components/table-base-cell/table-base-cell.component.scss

@@ -1,4 +1,5 @@
 @use '../../../../../styles/base/mixin' as mixins;
+@use '../../../../../styles/base/variables' as vars;
 
 $base-cell: (
     host: (
@@ -18,8 +19,13 @@ $base-cell: (
         position-left: 0.25rem,
         padding: 0.25rem,
         background-color: var(--mat-fab-small-container-color),
+        border-radius: 5px,
+        color: var(--rt-color-neutral-60),
         icon-size: 1rem,
     ),
+    copy-button-hover: (
+        color: var(--rt-color-neutral-100),
+    ),
     copy-button-complete: (
         color: var(--rt-text-base-strong),
     ),
@@ -88,10 +94,24 @@ $base-cell: (
 
         &__copy-button {
             position: absolute;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             padding: var(--rt-table-base-cell-copy-button-padding);
+            border: 0;
+            border-radius: var(--rt-table-base-cell-copy-button-border-radius);
             background-color: var(--rt-table-base-cell-copy-button-background-color);
+            color: var(--rt-table-base-cell-copy-button-color);
+            line-height: 1;
+            transition: all 0.15s linear;
             visibility: hidden;
 
+            // На узком экране кнопка показана всегда: наведения, по которому она
+            // проявляется на широком, там не бывает.
+            @include mixins.media-breakpoint-down(vars.$device-xs) {
+                visibility: visible;
+            }
+
             &--position {
                 &--left {
                     left: var(--rt-table-base-cell-copy-button-position-left);
@@ -106,6 +126,7 @@ $base-cell: (
             &:focus,
             &:active {
                 background-color: var(--rt-table-base-cell-copy-button-background-color);
+                color: var(--rt-table-base-cell-copy-button-hover-color);
             }
 
             &--complete {

package/src/lib/ui-kit/table/components/table-container/table-container.component.scss

@@ -28,6 +28,12 @@ $table-container: (
         height: 2rem,
         border-left: 1px solid var(--rt-border-neutral-divider),
     ),
+    toolbar-action: (
+        color: var(--rt-color-neutral-60),
+    ),
+    toolbar-action-hover: (
+        color: var(--rt-color-neutral-100),
+    ),
     toolbar-search: (
         width: 22rem,
     ),
@@ -139,6 +145,26 @@ $table-container: (
                 border-left: var(--rt-table-container-toolbar-actions-divider-border-left);
             }
 
+            &-action {
+                position: relative;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                border: 0;
+                background-color: transparent;
+                color: var(--rt-table-container-toolbar-action-color);
+                line-height: 1;
+                transition: all 0.15s linear;
+
+                &:hover {
+                    color: var(--rt-table-container-toolbar-action-hover-color);
+
+                    svg g {
+                        fill: var(--rt-table-container-toolbar-action-hover-color);
+                    }
+                }
+            }
+
             &-search {
                 width: var(--rt-table-container-toolbar-search-width);
             }

package/src/lib/ui-kit/table/stories/dynamic-list/test-dynamic-list.component.scss

@@ -12,4 +12,22 @@
         width: 100px;
         height: 40px;
     }
+
+    // Так приложение гасит собственный вид материальной кнопки-действия. Кит своих кнопок
+    // этим набором больше не оформляет, и витрина показывает приём, а не заимствует его.
+    .demo-fab {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        background-color: transparent;
+        color: var(--rt-color-neutral-60);
+        line-height: 1;
+        transition: all 0.15s linear;
+
+        &:hover {
+            color: var(--rt-color-neutral-100);
+        }
+    }
 }

package/src/lib/ui-kit/toolbar/stories/component/test-toolbar.component.scss

@@ -0,0 +1,22 @@
+:host {
+    display: block;
+    width: 100%;
+    margin: -1rem;
+
+    .title {
+        overflow: hidden;
+        padding: 0 1rem;
+        font-weight: 500;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .page {
+        padding: 0 1rem;
+
+        &__row {
+            padding: 0.75rem 0;
+            border-bottom: 1px solid var(--rt-border-neutral-default);
+        }
+    }
+}

package/src/styles/TOKENS.md

@@ -22,7 +22,10 @@ Quick facts:
   ramps (`{primary,info,success,warning,danger,brand}`). Custom brand palettes
   override only those rows — see **Custom color schemes** below.
 - Foundations: `--rt-spacing-{0..64}` (px-named, rem values), `--rt-radius-*`,
-  `--rt-font-*`, `--rt-shadow-*`, `--rt-transition-*`, `--rt-z-index-*`.
+  `--rt-font-*`, `--rt-icon-size-{xs..3xl}`, `--rt-shadow-*`, `--rt-transition-*`,
+  `--rt-z-index-*`.
+- `--rt-icon-size-*` sizes an icon box whole — width, height and font-size take the same
+  step, because a glyph icon is sized by its font-size and the box has to follow it.
 - Prebuilt CSS for non-sass consumers: `dist/ui-kit/styles/tokens.css`
   (`pnpm run build:tokens`).
 - Figma parity: collections `core` (`rt/color/*`) and `theme` (`rt/{bg,text,icon,border}/*`,
@@ -58,21 +61,27 @@ major the internal set stops being emitted and gets inlined into rules.
 - Planned unification (major): emit defaults via `var(--override, default)` indirection so all
   components are ancestor-overridable without `!important`.
 
-## Buttons: legacy vs rtui
-
-`.c-button` (\_button.scss) is **deprecated**; `.rtui-btn` (\_rtui_button.scss) is the system.
-Both stay until the next major because consumers apply `.c-button` classes and override
-`--rt-button-*` directly. Migration map:
-
-| legacy `.c-button`        | `.rtui-btn`                                                           |
-| ------------------------- | --------------------------------------------------------------------- |
-| `--fill-green` / `-light` | `rtui-btn-success` / `-light`                                         |
-| `--fill-red` / `-light`   | `rtui-btn-error` / `-light`                                           |
-| `--fill-blue`             | `rtui-btn-accent-light`                                               |
-| `--fill-base/black/gray`  | `rtui-btn-secondary` (+`-light`)                                      |
-| `--outline-{blue,base}`   | `rtui-btn-{accent,secondary}-outline`                                 |
-| `--txt-*`, `--fab`        | no equivalent yet — needs a text/icon appearance in `.rtui-btn` first |
-| `--size-{sm,md,l}`        | `rtui-btn-{sm,md,lg}` (+`-full`)                                      |
+## Buttons: the retired `.c-button` set
+
+`.c-button` is **gone** — `.rtui-btn` (\_rtui_button.scss) is the only button set the kit ships.
+The `--rt-button-*` custom properties went with it; an app that overrode them (dark mode
+included) overrides `--rt-rtui-btn-*` instead. Migration map:
+
+| retired `.c-button`       | `.rtui-btn`                                                              |
+| ------------------------- | ------------------------------------------------------------------------ |
+| `--fill-green` / `-light` | `rtui-btn-success` / `-light`                                            |
+| `--fill-red` / `-light`   | `rtui-btn-error` / `-light`                                              |
+| `--fill-blue`             | `rtui-btn-accent-light`                                                  |
+| `--fill-base/black/gray`  | `rtui-btn-secondary` (+`-light`)                                         |
+| `--outline-{blue,base}`   | `rtui-btn-{accent,secondary}-outline`                                    |
+| `--txt-{base,gray,blue}`  | `rtui-btn-{secondary,secondary,accent}-text`                             |
+| `--size-{sm,md,l}`        | `rtui-btn-{sm,md,lg}` (+`-full`) — a text appearance sizes itself        |
+| `--fab`                   | none: an icon-only button is styled by the component that owns it        |
+| `--h-{30,40}`, `--shadow` | none — pick a size class, or declare the box on your own component class |
+| `--disabled`              | none: `.rtui-btn:disabled` dims the button, the class is not needed      |
+
+`button { cursor: pointer; line-height: 1 }` used to ride along with the set and now lives in
+`styles/base/_base.scss` — it is a page-wide reset, not part of any button set.
 
 ## Material bridge
 

package/src/styles/base/_base.scss

@@ -57,7 +57,10 @@ $palette: (
 // All CSS custom property emission lives in base/_tokens.scss:
 //   --rt-color-* primitives, --rt-{bg,text,icon,border}-* semantic, and foundations.
 
-:root {
-    // Buttons
-    --rt-button-box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 12%), 0 1px 18px 0 rgb(0 0 0 / 14%);
+// Base reset for every button on the page. It used to ride along with the legacy `.c-button`
+// set; the set is gone, the reset is not — dropping it would move the text metrics of every
+// button in a consuming app, which has nothing to do with retiring a class set.
+button {
+    cursor: pointer;
+    line-height: 1;
 }

package/src/styles/base/_tokens.scss

@@ -193,6 +193,11 @@ $semantic: (
             color-mix(in srgb, var(--rt-color-warning-80) 90%, #fff)
         ),
     bg-accent-warning-disabled: color-mix(in srgb, var(--rt-color-warning-80) 38%, transparent),
+    /* Подсветка найденного. Жёлтая в обеих темах — так подсвечивает найденное сам браузер,
+       и человек читает эту заливку без объяснений. Текст на ней тёмный всегда: жёлтый фон
+       светлый в любой теме, и светлая подпись на нём пропадает. */
+    bg-accent-highlight: t(#ffeb3b, #ffd54f),
+    text-accent-highlight: #181818,
     bg-accent-danger-subtle: t(var(--rt-color-danger-10), color-mix(in srgb, var(--rt-color-danger-100) 18%, #1c1b1e)),
     bg-accent-danger-solid: var(--rt-color-danger-100),
     bg-accent-danger-hover: t(
@@ -267,7 +272,9 @@ $spacing: (
     4: 0.25rem,
     6: 0.375rem,
     8: 0.5rem,
+    10: 0.625rem,
     12: 0.75rem,
+    14: 0.875rem,
     16: 1rem,
     20: 1.25rem,
     24: 1.5rem,
@@ -299,6 +306,19 @@ $font-weight: (
     semibold: 600,
     bold: 700,
 );
+
+// Icon box: one step drives width, height and font-size at once — a glyph icon is sized
+// by its font-size, and the box has to follow it exactly. Separate from $font-size because
+// the large steps (32-56px) are icon sizes, not type sizes.
+$icon-size: (
+    xs: 0.875rem,
+    sm: 1rem,
+    md: 1.5rem,
+    lg: 2rem,
+    xl: 2.5rem,
+    xxl: 3rem,
+    3xl: 3.5rem,
+);
 $shadow: (
     sm: (
         0 0.0625rem 0.25rem 0 rgb(0 0 0 / 12%),
@@ -393,6 +413,10 @@ $breakpoint: (
         --rt-font-weight-#{$token}: #{$value};
     }
 
+    @each $token, $value in $icon-size {
+        --rt-icon-size-#{$token}: #{$value};
+    }
+
     @each $token, $value in $shadow {
         --rt-shadow-#{$token}: #{$value};
     }

package/src/styles/color-scheme.spec.ts

@@ -230,7 +230,10 @@ describe('rt-tools color schemes', () => {
             const scheme: Record<string, string> = extractDeclarations(css, '--rt-color-primary-\\d+');
             // bg-accent-primary-solid === var(--rt-color-primary-100); under the teal scheme that is #008582
             expect(scheme['--rt-color-primary-100']).toBe('#008582');
-            expect(normalize(stripMat(css.match(/--rt-bg-accent-primary-solid:\s*([^;]+);/)![1]))).toBe('var(--rt-color-primary-100)');
+            const solid: RegExpMatchArray | null = css.match(/--rt-bg-accent-primary-solid:\s*([^;]+);/);
+
+            expect(solid).not.toBeNull();
+            expect(normalize(stripMat(solid?.[1] ?? ''))).toBe('var(--rt-color-primary-100)');
         });
     });
 });