@rt-tools/ui-kit 0.0.16 → 0.0.19

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 (41) hide show
  1. package/fesm2022/rt-tools-ui-kit.mjs +150 -40
  2. package/fesm2022/rt-tools-ui-kit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/rt-tools-ui-kit-0.0.19.tgz +0 -0
  5. package/src/lib/ui-kit/aside/components/panel/aside-panel.component.scss +8 -8
  6. package/src/lib/ui-kit/buttons/multi-button/rtui-multi-button.component.scss +6 -6
  7. package/src/lib/ui-kit/checkbox/rtui-checkbox.component.scss +2 -2
  8. package/src/lib/ui-kit/dynamic-selectors/components/actions/rtui-dynamic-selector-list-actions.component.scss +1 -1
  9. package/src/lib/ui-kit/dynamic-selectors/components/multi-selector-popup/rtui-multi-selector-popup.component.scss +11 -11
  10. package/src/lib/ui-kit/dynamic-selectors/components/placeholder/rtui-dynamic-selector-placeholder.component.scss +3 -3
  11. package/src/lib/ui-kit/file-uploader/rtui-file-upload.component.scss +3 -3
  12. package/src/lib/ui-kit/modal/modal.component.scss +4 -4
  13. package/src/lib/ui-kit/scrollable/scrollable-container.component.scss +4 -4
  14. package/src/lib/ui-kit/side-menu/menu/rtui-side-menu.component.scss +1 -1
  15. package/src/lib/ui-kit/side-menu/menu-sub-item/rtui-side-menu-sub-item.component.scss +1 -1
  16. package/src/lib/ui-kit/snack-bar/snack-bar.component.scss +4 -4
  17. package/src/lib/ui-kit/spinner/spinner.component.scss +2 -2
  18. package/src/lib/ui-kit/table/components/clear-search-button/rtui-clear-button.component.scss +3 -3
  19. package/src/lib/ui-kit/table/components/pagination-view/rtui-pagination.component.scss +6 -6
  20. package/src/lib/ui-kit/table/components/table-base-cell/table-base-cell.component.scss +1 -1
  21. package/src/lib/ui-kit/table/components/table-container/table-container.component.scss +7 -7
  22. package/src/lib/ui-kit/table/components/table-header-cell/table-header-cell.component.scss +2 -2
  23. package/src/lib/ui-kit/toggle/rtui-toggle.component.scss +8 -8
  24. package/src/lib/ui-kit/toolbar/toolbar.component.scss +1 -1
  25. package/src/styles/TOKENS.md +28 -0
  26. package/src/styles/base/_base.scss +5 -12
  27. package/src/styles/base/_tokens.scss +386 -0
  28. package/src/styles/base/_variables.scss +4 -4
  29. package/src/styles/components/_action-bar.scss +8 -8
  30. package/src/styles/components/_button.scss +31 -31
  31. package/src/styles/components/_checkbox.scss +5 -5
  32. package/src/styles/components/_dynamic-selectors.scss +4 -4
  33. package/src/styles/components/_form.scss +1 -1
  34. package/src/styles/components/_rtui_button.scss +77 -77
  35. package/src/styles/components/_snackbar.scss +14 -14
  36. package/src/styles/components/_table.scss +11 -11
  37. package/src/styles/main.scss +1 -0
  38. package/src/styles/tokens.scss +5 -0
  39. package/styles/tokens.css +323 -0
  40. package/types/rt-tools-ui-kit.d.ts +53 -2
  41. package/rt-tools-ui-kit-0.0.16.tgz +0 -0
package/src/styles/components/_rtui_button.scss CHANGED
@@ -5,7 +5,7 @@ $rtui-button: (
5
5
  width: auto,
6
6
  bg: transparent,
7
7
  border: 0,
8
- color: var(--clr-black-80),
8
+ color: var(--rt-text-base-soft),
9
9
  display: inline-flex,
10
10
  font-size: 0,
11
11
  gap: 0,
@@ -14,109 +14,109 @@ $rtui-button: (
14
14
  shadow-blur: 8px,
15
15
  ),
16
16
  accent: (
17
- border: 1px solid var(--clr-blue-100),
18
- color: var(--clr-white-100),
19
- bg: var(--clr-blue-60),
20
- hover-bg: var(--clr-blue-40),
21
- active-shadow: var(--clr-blue-40),
17
+ border: 1px solid var(--rt-color-blue-100),
18
+ color: var(--rt-text-static-light),
19
+ bg: var(--rt-color-blue-60),
20
+ hover-bg: var(--rt-color-blue-40),
21
+ active-shadow: var(--rt-color-blue-40),
22
22
  ),
23
23
  accent-outline: (
24
- border: 1px solid var(--clr-blue-100),
25
- bg: var(--clr-blue-20),
26
- color: var(--clr-blue-100),
27
- hover-border: 1px solid var(--clr-blue-80),
28
- hover-bg: var(--clr-white-100),
29
- active-shadow: var(--clr-blue-40),
24
+ border: 1px solid var(--rt-color-blue-100),
25
+ bg: var(--rt-color-blue-20),
26
+ color: var(--rt-text-accent-info),
27
+ hover-border: 1px solid var(--rt-color-blue-80),
28
+ hover-bg: var(--rt-bg-base-base),
29
+ active-shadow: var(--rt-color-blue-40),
30
30
  ),
31
31
  accent-light: (
32
- color: var(--clr-blue-100),
33
- bg: var(--clr-blue-40),
34
- hover-color: var(--clr-blue-80),
35
- hover-bg: var(--clr-blue-20),
36
- active-shadow: var(--clr-blue-40),
32
+ color: var(--rt-text-accent-info),
33
+ bg: var(--rt-color-blue-40),
34
+ hover-color: var(--rt-text-accent-info-soft),
35
+ hover-bg: var(--rt-color-blue-20),
36
+ active-shadow: var(--rt-color-blue-40),
37
37
  ),
38
38
  success: (
39
- border: 1px solid var(--clr-green-100),
40
- color: var(--clr-white-100),
41
- bg: var(--clr-green-80),
42
- hover-bg: var(--clr-green-60),
43
- active-shadow: var(--clr-green-40),
39
+ border: 1px solid var(--rt-color-green-100),
40
+ color: var(--rt-text-static-light),
41
+ bg: var(--rt-bg-accent-success-solid),
42
+ hover-bg: var(--rt-color-green-60),
43
+ active-shadow: var(--rt-color-green-40),
44
44
  ),
45
45
  success-outline: (
46
- border: 1px solid var(--clr-green-100),
47
- bg: var(--clr-green-20),
48
- color: var(--clr-green-100),
49
- hover-border: 1px solid var(--clr-green-80),
50
- hover-bg: var(--clr-white-100),
51
- active-shadow: var(--clr-green-40),
46
+ border: 1px solid var(--rt-color-green-100),
47
+ bg: var(--rt-color-green-20),
48
+ color: var(--rt-text-accent-success),
49
+ hover-border: 1px solid var(--rt-color-green-80),
50
+ hover-bg: var(--rt-bg-base-base),
51
+ active-shadow: var(--rt-color-green-40),
52
52
  ),
53
53
  success-light: (
54
- color: var(--clr-green-100),
55
- bg: var(--clr-green-20),
56
- hover-color: var(--clr-green-80),
57
- hover-bg: var(--clr-green-10),
58
- active-shadow: var(--clr-green-40),
54
+ color: var(--rt-text-accent-success),
55
+ bg: var(--rt-color-green-20),
56
+ hover-color: var(--rt-text-accent-success-soft),
57
+ hover-bg: var(--rt-bg-accent-success-subtle),
58
+ active-shadow: var(--rt-color-green-40),
59
59
  ),
60
60
  secondary: (
61
- border: 1px solid var(--clr-black-60),
62
- color: var(--clr-white-100),
63
- bg: var(--clr-black-60),
64
- hover-bg: var(--clr-black-40),
65
- active-shadow: var(--clr-black-40),
61
+ border: 1px solid var(--rt-border-neutral-emphasis),
62
+ color: var(--rt-text-static-light),
63
+ bg: var(--rt-bg-base-emphasis),
64
+ hover-bg: var(--rt-bg-base-emphasis-soft),
65
+ active-shadow: var(--rt-bg-base-emphasis-soft),
66
66
  ),
67
67
  secondary-outline: (
68
- border: 1px solid var(--clr-black-60),
69
- bg: var(--clr-black-20),
70
- color: var(--clr-black-60),
71
- hover-bg: var(--clr-white-100),
72
- active-shadow: var(--clr-black-40),
68
+ border: 1px solid var(--rt-border-neutral-emphasis),
69
+ bg: var(--rt-bg-base-strong),
70
+ color: var(--rt-text-base-secondary),
71
+ hover-bg: var(--rt-bg-base-base),
72
+ active-shadow: var(--rt-bg-base-emphasis-soft),
73
73
  ),
74
74
  secondary-light: (
75
- color: var(--clr-black-80),
76
- bg: var(--clr-black-40),
77
- hover-color: var(--clr-black-60),
78
- hover-bg: var(--clr-black-20),
79
- active-shadow: var(--clr-black-40),
75
+ color: var(--rt-text-base-soft),
76
+ bg: var(--rt-bg-base-emphasis-soft),
77
+ hover-color: var(--rt-text-base-secondary),
78
+ hover-bg: var(--rt-bg-base-strong),
79
+ active-shadow: var(--rt-bg-base-emphasis-soft),
80
80
  ),
81
81
  error: (
82
- border: 1px solid var(--clr-red-100),
83
- color: var(--clr-white-100),
84
- bg: var(--clr-red-80),
85
- hover-bg: var(--clr-red-60),
86
- active-shadow: var(--clr-red-40),
82
+ border: 1px solid var(--rt-border-accent-danger),
83
+ color: var(--rt-text-static-light),
84
+ bg: var(--rt-color-red-80),
85
+ hover-bg: var(--rt-color-red-60),
86
+ active-shadow: var(--rt-color-red-40),
87
87
  ),
88
88
  error-outline: (
89
- border: 1px solid var(--clr-red-100),
90
- bg: var(--clr-red-10),
91
- color: var(--clr-red-100),
92
- hover-bg: var(--clr-white-100),
93
- active-shadow: var(--clr-red-40),
89
+ border: 1px solid var(--rt-border-accent-danger),
90
+ bg: var(--rt-bg-accent-danger-subtle),
91
+ color: var(--rt-text-accent-danger),
92
+ hover-bg: var(--rt-bg-base-base),
93
+ active-shadow: var(--rt-color-red-40),
94
94
  ),
95
95
  error-light: (
96
- color: var(--clr-red-100),
97
- bg: var(--clr-red-40),
98
- hover-bg: var(--clr-red-10),
99
- active-shadow: var(--clr-red-40),
96
+ color: var(--rt-text-accent-danger),
97
+ bg: var(--rt-color-red-40),
98
+ hover-bg: var(--rt-bg-accent-danger-subtle),
99
+ active-shadow: var(--rt-color-red-40),
100
100
  ),
101
101
  warning: (
102
- border: 1px solid var(--clr-orange-100),
103
- color: var(--clr-white-100),
104
- bg: var(--clr-orange-80),
105
- hover-bg: var(--clr-orange-60),
106
- active-shadow: var(--clr-orange-40),
102
+ border: 1px solid var(--rt-color-orange-100),
103
+ color: var(--rt-text-static-light),
104
+ bg: var(--rt-bg-accent-warning-solid),
105
+ hover-bg: var(--rt-color-orange-60),
106
+ active-shadow: var(--rt-color-orange-40),
107
107
  ),
108
108
  warning-outline: (
109
- border: 1px solid var(--clr-orange-100),
110
- bg: var(--clr-orange-10),
111
- color: var(--clr-orange-100),
112
- hover-bg: var(--clr-white-100),
113
- active-shadow: var(--clr-orange-40),
109
+ border: 1px solid var(--rt-color-orange-100),
110
+ bg: var(--rt-color-orange-10),
111
+ color: var(--rt-text-accent-warning),
112
+ hover-bg: var(--rt-bg-base-base),
113
+ active-shadow: var(--rt-color-orange-40),
114
114
  ),
115
115
  warning-light: (
116
- color: var(--clr-orange-100),
117
- bg: var(--clr-orange-10),
118
- hover-bg: var(--clr-orange-5),
119
- active-shadow: var(--clr-orange-40),
116
+ color: var(--rt-text-accent-warning),
117
+ bg: var(--rt-color-orange-10),
118
+ hover-bg: var(--rt-color-orange-5),
119
+ active-shadow: var(--rt-color-orange-40),
120
120
  ),
121
121
  size-sm: (
122
122
  gap: 4px,
@@ -198,7 +198,7 @@ $rtui-button: (
198
198
  }
199
199
 
200
200
  &:focus-visible {
201
- outline: 2px dashed var(--clr-blue-40);
201
+ outline: 2px dashed var(--rt-border-focus);
202
202
  outline-offset: 2px;
203
203
  }
204
204
 
package/src/styles/components/_snackbar.scss CHANGED
@@ -2,43 +2,43 @@
2
2
 
3
3
  $snack-bar: (
4
4
  default: (
5
- background-color: var(--clr-black-80),
5
+ background-color: var(--rt-bg-base-inverse-soft),
6
6
  ),
7
7
  success: (
8
- background-color: var(--clr-green-80),
8
+ background-color: var(--rt-bg-accent-success-solid),
9
9
  ),
10
10
  success-text: (
11
- color: var(--clr-white-100),
11
+ color: var(--rt-text-base-inverse),
12
12
  ),
13
13
  success-action: (
14
- color: var(--clr-black-80),
14
+ color: var(--rt-text-base-soft),
15
15
  ),
16
16
  success-close-button: (
17
- color: var(--clr-white-100),
17
+ color: var(--rt-text-base-inverse),
18
18
  ),
19
19
  warning: (
20
- background-color: var(--clr-orange-80),
20
+ background-color: var(--rt-bg-accent-warning-solid),
21
21
  ),
22
22
  warning-text: (
23
- color: var(--clr-white-100),
23
+ color: var(--rt-text-base-inverse),
24
24
  ),
25
25
  warning-action: (
26
- color: var(--clr-black-80),
26
+ color: var(--rt-text-base-soft),
27
27
  ),
28
28
  warning-close-button: (
29
- color: var(--clr-white-100),
29
+ color: var(--rt-text-base-inverse),
30
30
  ),
31
31
  danger: (
32
- background-color: var(--clr-red-100),
32
+ background-color: var(--rt-bg-accent-danger-solid),
33
33
  ),
34
34
  danger-text: (
35
- color: var(--clr-white-100),
35
+ color: var(--rt-text-base-inverse),
36
36
  ),
37
37
  danger-action: (
38
- color: var(--clr-black-80),
38
+ color: var(--rt-text-base-soft),
39
39
  ),
40
40
  danger-close-button: (
41
- color: var(--clr-white-100),
41
+ color: var(--rt-text-base-inverse),
42
42
  ),
43
43
  );
44
44
 
@@ -50,7 +50,7 @@ $snack-bar: (
50
50
  }
51
51
 
52
52
  --mat-snack-bar-container-color: var(--rt-snack-bar-default-background-color);
53
- --mdc-snackbar-supporting-text-color: var(--clr-white-100);
53
+ --mdc-snackbar-supporting-text-color: var(--rt-text-base-inverse);
54
54
  --mdc-snackbar-container-shape: 0.5rem;
55
55
  }
56
56
 
package/src/styles/components/_table.scss CHANGED
@@ -7,7 +7,7 @@ $table: (
7
7
  background-color: var(--mat-form-field-filled-container-color),
8
8
  ),
9
9
  header-row-last-child: (
10
- border-bottom: var(--rt-table-header-cell-wrapper-border-width) solid var(--clr-black-20),
10
+ border-bottom: var(--rt-table-header-cell-wrapper-border-width) solid var(--rt-border-neutral-default),
11
11
  ),
12
12
  body: (
13
13
  font-size: 0.875rem,
@@ -15,26 +15,26 @@ $table: (
15
15
  ),
16
16
  row: (
17
17
  height: 3rem,
18
- color: var(--clr-txt),
19
- border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-black-20),
18
+ color: var(--rt-text-base-primary),
19
+ border-bottom: var(--rt-table-row-border-bottom-width) solid var(--rt-border-neutral-default),
20
20
  background-color: transparent,
21
21
  ),
22
22
  row-hover: (
23
- border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-blue-100),
23
+ border-bottom: var(--rt-table-row-border-bottom-width) solid var(--rt-border-accent-info),
24
24
  transition: 0.2s,
25
25
  ),
26
26
  row-active: (
27
- border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-blue-100),
27
+ border-bottom: var(--rt-table-row-border-bottom-width) solid var(--rt-border-accent-info),
28
28
  ),
29
29
  header-cell-wrapper: (
30
30
  padding: 0.625rem,
31
- text-color: var(--clr-txt),
31
+ text-color: var(--rt-text-base-primary),
32
32
  font-size: 1rem,
33
33
  font-weight: 500,
34
34
  text-align: left,
35
35
  line-height: 1.2,
36
- border-right: var(--rt-table-header-cell-wrapper-border-width) solid var(--clr-black-40),
37
- background-color: var(--clr-white-100),
36
+ border-right: var(--rt-table-header-cell-wrapper-border-width) solid var(--rt-border-neutral-strong),
37
+ background-color: var(--rt-bg-base-base),
38
38
  ),
39
39
  header-filterable-cell-wrapper: (
40
40
  padding: 0.25rem 0.5rem,
@@ -49,7 +49,7 @@ $table: (
49
49
  z-index: 1,
50
50
  ),
51
51
  actions-container: (
52
- background-color: var(--clr-white-100),
52
+ background-color: var(--rt-bg-base-base),
53
53
  ),
54
54
  );
55
55
 
@@ -89,7 +89,7 @@ $table: (
89
89
  }
90
90
 
91
91
  th {
92
- background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--clr-white-100) 50%);
92
+ background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--rt-bg-base-base) 50%);
93
93
 
94
94
  &:not(.c-table__cell--filterable):not(.c-table__cell--empty) {
95
95
  background-color: var(--rt-table-header-background-color);
@@ -97,7 +97,7 @@ $table: (
97
97
 
98
98
  &:hover {
99
99
  &:not(.c-table__cell--selectable):not(.c-table__cell--filterable) {
100
- background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--clr-white-100) 30%);
100
+ background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--rt-bg-base-base) 30%);
101
101
  }
102
102
  }
103
103
  }
package/src/styles/main.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @forward 'base/variables' as vars-*;
3
3
  @forward 'base/mixin' as mixins-*;
4
4
  @forward 'base/base';
5
+ @forward 'base/tokens' as tokens-*;
5
6
 
6
7
  // Components
7
8
  @forward 'components/form';
package/src/styles/tokens.scss ADDED
@@ -0,0 +1,5 @@
1
+ // Standalone design-token entry.
2
+ // Compiled to dist/ui-kit/styles/tokens.css for consumers without a sass pipeline:
3
+ // @import 'rt-tools/styles/tokens.css';
4
+ // SCSS consumers should @use 'rt-tools/src/styles/main' instead (mixins + component styles included).
5
+ @use './base/tokens';