@rt-tools/ui-kit 0.3.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/fesm2022/rt-tools-ui-kit.mjs +405 -156
  2. package/fesm2022/rt-tools-ui-kit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/rt-tools-ui-kit-0.4.0.tgz +0 -0
  5. package/src/lib/ui-kit/action-bar/components/bar/rtui-action-bar.component.scss +14 -0
  6. package/src/lib/ui-kit/aside/components/error-notification/aside-error-box.component.scss +1 -1
  7. package/src/lib/ui-kit/buttons/unified-button/rtui-button.component.scss +210 -206
  8. package/src/lib/ui-kit/buttons/unified-button/stories/component/test-button-matrix.component.scss +38 -0
  9. package/src/lib/ui-kit/icon/rtui-icon.component.scss +43 -24
  10. package/src/lib/ui-kit/info-badge/info-badge.component.scss +23 -23
  11. package/src/lib/ui-kit/spinner/spinner.component.scss +1 -1
  12. package/src/lib/ui-kit/table/components/pagination-view/rtui-pagination.component.scss +20 -17
  13. package/src/lib/ui-kit/table/components/table-base-cell/table-base-cell.component.scss +21 -0
  14. package/src/lib/ui-kit/table/components/table-container/table-container.component.scss +26 -0
  15. package/src/lib/ui-kit/table/stories/dynamic-list/test-dynamic-list.component.scss +18 -0
  16. package/src/styles/TOKENS.md +25 -16
  17. package/src/styles/base/_base.scss +6 -3
  18. package/src/styles/base/_tokens.scss +19 -0
  19. package/src/styles/main.scss +0 -1
  20. package/styles/tokens.css +9 -0
  21. package/types/rt-tools-ui-kit.d.ts +150 -33
  22. package/rt-tools-ui-kit-0.3.1.tgz +0 -0
  23. package/src/styles/components/_button.scss +0 -372
package/src/lib/ui-kit/icon/rtui-icon.component.scss CHANGED
@@ -1,3 +1,22 @@
1
+ @use '../../../styles/base/mixin' as mixins;
2
+
3
+ /* Component tier: the one size every projected icon takes inside a text-appearance button.
4
+ It sits between the `md` and `lg` steps of the icon scale on purpose — see the rule at the
5
+ bottom of this file. */
6
+ $icon: (
7
+ text-button: (
8
+ size: 1.375rem,
9
+ ),
10
+ );
11
+
12
+ :root {
13
+ @each $element, $elements in $icon {
14
+ @each $style-token, $value in $elements {
15
+ #{mixins.generateCssVar('icon', #{$element}, #{$style-token})}: #{$value};
16
+ }
17
+ }
18
+ }
19
+
1
20
  .rtui-icon {
2
21
  display: inline-flex;
3
22
  align-items: center;
@@ -19,45 +38,45 @@
19
38
  }
20
39
 
21
40
  &--size-xs {
22
- width: 0.875rem;
23
- height: 0.875rem;
24
- font-size: 0.875rem;
41
+ width: var(--rt-icon-size-xs);
42
+ height: var(--rt-icon-size-xs);
43
+ font-size: var(--rt-icon-size-xs);
25
44
  }
26
45
 
27
46
  &--size-sm {
28
- width: 1rem;
29
- height: 1rem;
30
- font-size: 1rem;
47
+ width: var(--rt-icon-size-sm);
48
+ height: var(--rt-icon-size-sm);
49
+ font-size: var(--rt-icon-size-sm);
31
50
  }
32
51
 
33
52
  &--size-md {
34
- width: 1.5rem;
35
- height: 1.5rem;
36
- font-size: 1.5rem;
53
+ width: var(--rt-icon-size-md);
54
+ height: var(--rt-icon-size-md);
55
+ font-size: var(--rt-icon-size-md);
37
56
  }
38
57
 
39
58
  &--size-lg {
40
- width: 2rem;
41
- height: 2rem;
42
- font-size: 2rem;
59
+ width: var(--rt-icon-size-lg);
60
+ height: var(--rt-icon-size-lg);
61
+ font-size: var(--rt-icon-size-lg);
43
62
  }
44
63
 
45
64
  &--size-xl {
46
- width: 2.5rem;
47
- height: 2.5rem;
48
- font-size: 2.5rem;
65
+ width: var(--rt-icon-size-xl);
66
+ height: var(--rt-icon-size-xl);
67
+ font-size: var(--rt-icon-size-xl);
49
68
  }
50
69
 
51
70
  &--size-xxl {
52
- width: 3rem;
53
- height: 3rem;
54
- font-size: 3rem;
71
+ width: var(--rt-icon-size-xxl);
72
+ height: var(--rt-icon-size-xxl);
73
+ font-size: var(--rt-icon-size-xxl);
55
74
  }
56
75
 
57
76
  &--size-3xl {
58
- width: 3.5rem;
59
- height: 3.5rem;
60
- font-size: 3.5rem;
77
+ width: var(--rt-icon-size-3xl);
78
+ height: var(--rt-icon-size-3xl);
79
+ font-size: var(--rt-icon-size-3xl);
61
80
  }
62
81
 
63
82
  &--theme-inherit {
@@ -104,7 +123,7 @@
104
123
  and reaches the projected icon; specificity (0,2,0) wins over the icon's own
105
124
  `--size-*` (0,1,0). */
106
125
  .rtui-button--appearance-text .rtui-icon {
107
- width: 1.375rem;
108
- height: 1.375rem;
109
- font-size: 1.375rem;
126
+ width: var(--rt-icon-text-button-size);
127
+ height: var(--rt-icon-text-button-size);
128
+ font-size: var(--rt-icon-text-button-size);
110
129
  }
package/src/lib/ui-kit/info-badge/info-badge.component.scss CHANGED
@@ -22,33 +22,37 @@
22
22
  text-overflow: ellipsis;
23
23
  white-space: nowrap;
24
24
  }
25
- }
26
25
 
27
- .size-l {
28
- padding: var(--rt-spacing-4) var(--rt-spacing-12);
29
- font-size: var(--rt-font-size-md);
26
+ &--size-l {
27
+ padding: var(--rt-spacing-4) var(--rt-spacing-12);
28
+ font-size: var(--rt-font-size-md);
30
29
 
31
- .mat-icon {
32
- font-size: var(--rt-font-size-xl);
30
+ .mat-icon {
31
+ font-size: var(--rt-font-size-xl);
32
+ }
33
33
  }
34
- }
35
34
 
36
- .size-m {
37
- padding: var(--rt-spacing-4) var(--rt-spacing-12);
38
- font-size: var(--rt-font-size-sm);
35
+ &--size-m {
36
+ padding: var(--rt-spacing-4) var(--rt-spacing-12);
37
+ font-size: var(--rt-font-size-sm);
39
38
 
40
- .mat-icon {
41
- font-size: var(--rt-font-size-md);
39
+ .mat-icon {
40
+ font-size: var(--rt-font-size-md);
41
+ }
42
42
  }
43
- }
44
-
45
- .size-s {
46
- padding: var(--rt-spacing-4) var(--rt-spacing-12);
47
- font-size: var(--rt-font-size-xs);
48
- letter-spacing: 0.025rem;
49
43
 
50
- .mat-icon {
44
+ &--size-s {
45
+ padding: var(--rt-spacing-4) var(--rt-spacing-12);
51
46
  font-size: var(--rt-font-size-xs);
47
+ letter-spacing: 0.025rem;
48
+
49
+ .mat-icon {
50
+ font-size: var(--rt-font-size-xs);
51
+ }
52
+ }
53
+
54
+ &--bold {
55
+ font-weight: var(--rt-font-weight-bold);
52
56
  }
53
57
  }
54
58
 
@@ -56,8 +60,4 @@
56
60
  width: unset;
57
61
  height: unset;
58
62
  }
59
-
60
- .bold {
61
- font-weight: var(--rt-font-weight-bold);
62
- }
63
63
  }
package/src/lib/ui-kit/spinner/spinner.component.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  align-items: center;
8
8
  justify-content: center;
9
9
 
10
- .c-spinner {
10
+ .rtui-spinner {
11
11
  &__container {
12
12
  display: flex;
13
13
  width: 100%;
package/src/lib/ui-kit/table/components/pagination-view/rtui-pagination.component.scss CHANGED
@@ -10,13 +10,13 @@ $pagination: (
10
10
  font-weight: 400,
11
11
  line-height: 1rem,
12
12
  ),
13
- container-mobile: (
13
+ container-clipped: (
14
14
  gap: 1rem,
15
15
  ),
16
16
  paging: (
17
17
  gap: 0.5rem,
18
18
  ),
19
- paging-mobile: (
19
+ paging-clipped: (
20
20
  margin: 0.5rem 0 0 0,
21
21
  ),
22
22
  paging-item: (
@@ -42,7 +42,7 @@ $pagination: (
42
42
  min-width: 3rem,
43
43
  height: 2rem,
44
44
  ),
45
- size-toggle-selector-mobile: (
45
+ size-toggle-selector-clipped: (
46
46
  margin: 0 0 0.5rem 0,
47
47
  ),
48
48
  );
@@ -69,16 +69,15 @@ $pagination: (
69
69
  gap: var(--rt-table-pagination-container-gap);
70
70
  line-height: var(--rt-table-pagination-container-line-height);
71
71
 
72
- &--clipped {
73
- flex-direction: column;
74
- align-items: flex-start;
75
- justify-content: center;
76
- gap: var(--rt-table-pagination-container-mobile-gap);
77
- }
78
-
79
- &--mobile {
80
- width: 100%;
81
- justify-content: space-between;
72
+ // Перенос в столбец — ответ на нехватку ширины под полный список страниц.
73
+ // На узком экране списка нет вовсе, и строка туда влезает: правило туда не идёт.
74
+ @include mixins.media-breakpoint-up(vars.$device-xs) {
75
+ &--clipped {
76
+ flex-direction: column;
77
+ align-items: flex-start;
78
+ justify-content: center;
79
+ gap: var(--rt-table-pagination-container-clipped-gap);
80
+ }
82
81
  }
83
82
 
84
83
  .paging {
@@ -88,8 +87,10 @@ $pagination: (
88
87
  margin: var(--rt-table-pagination-container-margin);
89
88
  gap: var(--rt-table-pagination-paging-gap);
90
89
 
91
- &--clipped {
92
- margin: var(--rt-table-pagination-paging-mobile-margin);
90
+ @include mixins.media-breakpoint-up(vars.$device-xs) {
91
+ &--clipped {
92
+ margin: var(--rt-table-pagination-paging-clipped-margin);
93
+ }
93
94
  }
94
95
 
95
96
  &__item {
@@ -148,8 +149,10 @@ $pagination: (
148
149
  margin: var(--rt-table-pagination-container-margin);
149
150
  gap: var(--rt-table-pagination-size-toggle-gap);
150
151
 
151
- &--clipped {
152
- margin: var(--rt-table-pagination-size-toggle-selector-mobile-margin);
152
+ @include mixins.media-breakpoint-up(vars.$device-xs) {
153
+ &--clipped {
154
+ margin: var(--rt-table-pagination-size-toggle-selector-clipped-margin);
155
+ }
153
156
  }
154
157
 
155
158
  &__title {
package/src/lib/ui-kit/table/components/table-base-cell/table-base-cell.component.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../../../../../styles/base/mixin' as mixins;
2
+ @use '../../../../../styles/base/variables' as vars;
2
3
 
3
4
  $base-cell: (
4
5
  host: (
@@ -18,8 +19,13 @@ $base-cell: (
18
19
  position-left: 0.25rem,
19
20
  padding: 0.25rem,
20
21
  background-color: var(--mat-fab-small-container-color),
22
+ border-radius: 5px,
23
+ color: var(--rt-color-neutral-60),
21
24
  icon-size: 1rem,
22
25
  ),
26
+ copy-button-hover: (
27
+ color: var(--rt-color-neutral-100),
28
+ ),
23
29
  copy-button-complete: (
24
30
  color: var(--rt-text-base-strong),
25
31
  ),
@@ -88,10 +94,24 @@ $base-cell: (
88
94
 
89
95
  &__copy-button {
90
96
  position: absolute;
97
+ display: inline-flex;
98
+ align-items: center;
99
+ justify-content: center;
91
100
  padding: var(--rt-table-base-cell-copy-button-padding);
101
+ border: 0;
102
+ border-radius: var(--rt-table-base-cell-copy-button-border-radius);
92
103
  background-color: var(--rt-table-base-cell-copy-button-background-color);
104
+ color: var(--rt-table-base-cell-copy-button-color);
105
+ line-height: 1;
106
+ transition: all 0.15s linear;
93
107
  visibility: hidden;
94
108
 
109
+ // На узком экране кнопка показана всегда: наведения, по которому она
110
+ // проявляется на широком, там не бывает.
111
+ @include mixins.media-breakpoint-down(vars.$device-xs) {
112
+ visibility: visible;
113
+ }
114
+
95
115
  &--position {
96
116
  &--left {
97
117
  left: var(--rt-table-base-cell-copy-button-position-left);
@@ -106,6 +126,7 @@ $base-cell: (
106
126
  &:focus,
107
127
  &:active {
108
128
  background-color: var(--rt-table-base-cell-copy-button-background-color);
129
+ color: var(--rt-table-base-cell-copy-button-hover-color);
109
130
  }
110
131
 
111
132
  &--complete {
package/src/lib/ui-kit/table/components/table-container/table-container.component.scss CHANGED
@@ -28,6 +28,12 @@ $table-container: (
28
28
  height: 2rem,
29
29
  border-left: 1px solid var(--rt-border-neutral-divider),
30
30
  ),
31
+ toolbar-action: (
32
+ color: var(--rt-color-neutral-60),
33
+ ),
34
+ toolbar-action-hover: (
35
+ color: var(--rt-color-neutral-100),
36
+ ),
31
37
  toolbar-search: (
32
38
  width: 22rem,
33
39
  ),
@@ -139,6 +145,26 @@ $table-container: (
139
145
  border-left: var(--rt-table-container-toolbar-actions-divider-border-left);
140
146
  }
141
147
 
148
+ &-action {
149
+ position: relative;
150
+ display: inline-flex;
151
+ align-items: center;
152
+ justify-content: center;
153
+ border: 0;
154
+ background-color: transparent;
155
+ color: var(--rt-table-container-toolbar-action-color);
156
+ line-height: 1;
157
+ transition: all 0.15s linear;
158
+
159
+ &:hover {
160
+ color: var(--rt-table-container-toolbar-action-hover-color);
161
+
162
+ svg g {
163
+ fill: var(--rt-table-container-toolbar-action-hover-color);
164
+ }
165
+ }
166
+ }
167
+
142
168
  &-search {
143
169
  width: var(--rt-table-container-toolbar-search-width);
144
170
  }
package/src/lib/ui-kit/table/stories/dynamic-list/test-dynamic-list.component.scss CHANGED
@@ -12,4 +12,22 @@
12
12
  width: 100px;
13
13
  height: 40px;
14
14
  }
15
+
16
+ // Так приложение гасит собственный вид материальной кнопки-действия. Кит своих кнопок
17
+ // этим набором больше не оформляет, и витрина показывает приём, а не заимствует его.
18
+ .demo-fab {
19
+ position: relative;
20
+ display: inline-flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ border: 0;
24
+ background-color: transparent;
25
+ color: var(--rt-color-neutral-60);
26
+ line-height: 1;
27
+ transition: all 0.15s linear;
28
+
29
+ &:hover {
30
+ color: var(--rt-color-neutral-100);
31
+ }
32
+ }
15
33
  }
package/src/styles/TOKENS.md CHANGED
@@ -22,7 +22,10 @@ Quick facts:
22
22
  ramps (`{primary,info,success,warning,danger,brand}`). Custom brand palettes
23
23
  override only those rows — see **Custom color schemes** below.
24
24
  - Foundations: `--rt-spacing-{0..64}` (px-named, rem values), `--rt-radius-*`,
25
- `--rt-font-*`, `--rt-shadow-*`, `--rt-transition-*`, `--rt-z-index-*`.
25
+ `--rt-font-*`, `--rt-icon-size-{xs..3xl}`, `--rt-shadow-*`, `--rt-transition-*`,
26
+ `--rt-z-index-*`.
27
+ - `--rt-icon-size-*` sizes an icon box whole — width, height and font-size take the same
28
+ step, because a glyph icon is sized by its font-size and the box has to follow it.
26
29
  - Prebuilt CSS for non-sass consumers: `dist/ui-kit/styles/tokens.css`
27
30
  (`pnpm run build:tokens`).
28
31
  - 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.
58
61
  - Planned unification (major): emit defaults via `var(--override, default)` indirection so all
59
62
  components are ancestor-overridable without `!important`.
60
63
 
61
- ## Buttons: legacy vs rtui
62
-
63
- `.c-button` (\_button.scss) is **deprecated**; `.rtui-btn` (\_rtui_button.scss) is the system.
64
- Both stay until the next major because consumers apply `.c-button` classes and override
65
- `--rt-button-*` directly. Migration map:
66
-
67
- | legacy `.c-button` | `.rtui-btn` |
68
- | ------------------------- | --------------------------------------------------------------------- |
69
- | `--fill-green` / `-light` | `rtui-btn-success` / `-light` |
70
- | `--fill-red` / `-light` | `rtui-btn-error` / `-light` |
71
- | `--fill-blue` | `rtui-btn-accent-light` |
72
- | `--fill-base/black/gray` | `rtui-btn-secondary` (+`-light`) |
73
- | `--outline-{blue,base}` | `rtui-btn-{accent,secondary}-outline` |
74
- | `--txt-*`, `--fab` | no equivalent yet — needs a text/icon appearance in `.rtui-btn` first |
75
- | `--size-{sm,md,l}` | `rtui-btn-{sm,md,lg}` (+`-full`) |
64
+ ## Buttons: the retired `.c-button` set
65
+
66
+ `.c-button` is **gone** — `.rtui-btn` (\_rtui_button.scss) is the only button set the kit ships.
67
+ The `--rt-button-*` custom properties went with it; an app that overrode them (dark mode
68
+ included) overrides `--rt-rtui-btn-*` instead. Migration map:
69
+
70
+ | retired `.c-button` | `.rtui-btn` |
71
+ | ------------------------- | ------------------------------------------------------------------------ |
72
+ | `--fill-green` / `-light` | `rtui-btn-success` / `-light` |
73
+ | `--fill-red` / `-light` | `rtui-btn-error` / `-light` |
74
+ | `--fill-blue` | `rtui-btn-accent-light` |
75
+ | `--fill-base/black/gray` | `rtui-btn-secondary` (+`-light`) |
76
+ | `--outline-{blue,base}` | `rtui-btn-{accent,secondary}-outline` |
77
+ | `--txt-{base,gray,blue}` | `rtui-btn-{secondary,secondary,accent}-text` |
78
+ | `--size-{sm,md,l}` | `rtui-btn-{sm,md,lg}` (+`-full`) — a text appearance sizes itself |
79
+ | `--fab` | none: an icon-only button is styled by the component that owns it |
80
+ | `--h-{30,40}`, `--shadow` | none — pick a size class, or declare the box on your own component class |
81
+ | `--disabled` | none: `.rtui-btn:disabled` dims the button, the class is not needed |
82
+
83
+ `button { cursor: pointer; line-height: 1 }` used to ride along with the set and now lives in
84
+ `styles/base/_base.scss` — it is a page-wide reset, not part of any button set.
76
85
 
77
86
  ## Material bridge
78
87
 
package/src/styles/base/_base.scss CHANGED
@@ -57,7 +57,10 @@ $palette: (
57
57
  // All CSS custom property emission lives in base/_tokens.scss:
58
58
  // --rt-color-* primitives, --rt-{bg,text,icon,border}-* semantic, and foundations.
59
59
 
60
- :root {
61
- // Buttons
62
- --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%);
60
+ // Base reset for every button on the page. It used to ride along with the legacy `.c-button`
61
+ // set; the set is gone, the reset is not — dropping it would move the text metrics of every
62
+ // button in a consuming app, which has nothing to do with retiring a class set.
63
+ button {
64
+ cursor: pointer;
65
+ line-height: 1;
63
66
  }
package/src/styles/base/_tokens.scss CHANGED
@@ -267,7 +267,9 @@ $spacing: (
267
267
  4: 0.25rem,
268
268
  6: 0.375rem,
269
269
  8: 0.5rem,
270
+ 10: 0.625rem,
270
271
  12: 0.75rem,
272
+ 14: 0.875rem,
271
273
  16: 1rem,
272
274
  20: 1.25rem,
273
275
  24: 1.5rem,
@@ -299,6 +301,19 @@ $font-weight: (
299
301
  semibold: 600,
300
302
  bold: 700,
301
303
  );
304
+
305
+ // Icon box: one step drives width, height and font-size at once — a glyph icon is sized
306
+ // by its font-size, and the box has to follow it exactly. Separate from $font-size because
307
+ // the large steps (32-56px) are icon sizes, not type sizes.
308
+ $icon-size: (
309
+ xs: 0.875rem,
310
+ sm: 1rem,
311
+ md: 1.5rem,
312
+ lg: 2rem,
313
+ xl: 2.5rem,
314
+ xxl: 3rem,
315
+ 3xl: 3.5rem,
316
+ );
302
317
  $shadow: (
303
318
  sm: (
304
319
  0 0.0625rem 0.25rem 0 rgb(0 0 0 / 12%),
@@ -393,6 +408,10 @@ $breakpoint: (
393
408
  --rt-font-weight-#{$token}: #{$value};
394
409
  }
395
410
 
411
+ @each $token, $value in $icon-size {
412
+ --rt-icon-size-#{$token}: #{$value};
413
+ }
414
+
396
415
  @each $token, $value in $shadow {
397
416
  --rt-shadow-#{$token}: #{$value};
398
417
  }
package/src/styles/main.scss CHANGED
@@ -10,7 +10,6 @@
10
10
 
11
11
  // Components
12
12
  @forward 'components/form';
13
- @forward 'components/button';
14
13
  @forward 'components/rtui_button';
15
14
  @forward 'components/table';
16
15
  @forward 'components/snackbar';
package/styles/tokens.css CHANGED
@@ -241,7 +241,9 @@
241
241
  --rt-spacing-4: 0.25rem;
242
242
  --rt-spacing-6: 0.375rem;
243
243
  --rt-spacing-8: 0.5rem;
244
+ --rt-spacing-10: 0.625rem;
244
245
  --rt-spacing-12: 0.75rem;
246
+ --rt-spacing-14: 0.875rem;
245
247
  --rt-spacing-16: 1rem;
246
248
  --rt-spacing-20: 1.25rem;
247
249
  --rt-spacing-24: 1.5rem;
@@ -266,6 +268,13 @@
266
268
  --rt-font-weight-medium: 500;
267
269
  --rt-font-weight-semibold: 600;
268
270
  --rt-font-weight-bold: 700;
271
+ --rt-icon-size-xs: 0.875rem;
272
+ --rt-icon-size-sm: 1rem;
273
+ --rt-icon-size-md: 1.5rem;
274
+ --rt-icon-size-lg: 2rem;
275
+ --rt-icon-size-xl: 2.5rem;
276
+ --rt-icon-size-xxl: 3rem;
277
+ --rt-icon-size-3xl: 3.5rem;
269
278
  --rt-shadow-sm: 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.12);
270
279
  --rt-shadow-md: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.14);
271
280
  --rt-shadow-lg: 0 0.5rem 1rem 0 var(--rt-shadow-color);