@taiga-ui/core 4.92.0 → 4.93.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 (33) hide show
  1. package/components/button/button.directive.d.ts +1 -1
  2. package/esm2022/components/button/button.directive.mjs +2 -2
  3. package/esm2022/components/data-list/data-list.component.mjs +3 -3
  4. package/esm2022/components/icon/icon.component.mjs +2 -2
  5. package/esm2022/components/label/label.directive.mjs +3 -3
  6. package/esm2022/components/link/link.directive.mjs +3 -3
  7. package/esm2022/components/notification/notification.directive.mjs +3 -3
  8. package/esm2022/components/root/root.component.mjs +2 -2
  9. package/esm2022/components/textfield/textfield-multi/textfield-multi.component.mjs +3 -3
  10. package/esm2022/components/textfield/textfield.component.mjs +3 -3
  11. package/esm2022/directives/appearance/appearance.directive.mjs +3 -3
  12. package/esm2022/directives/group/group.directive.mjs +3 -3
  13. package/esm2022/directives/icons/icons.directive.mjs +3 -3
  14. package/esm2022/directives/title/title.directive.mjs +3 -3
  15. package/fesm2022/taiga-ui-core-components-button.mjs +2 -2
  16. package/fesm2022/taiga-ui-core-components-data-list.mjs +3 -3
  17. package/fesm2022/taiga-ui-core-components-icon.mjs +2 -2
  18. package/fesm2022/taiga-ui-core-components-label.mjs +3 -3
  19. package/fesm2022/taiga-ui-core-components-link.mjs +3 -3
  20. package/fesm2022/taiga-ui-core-components-notification.mjs +3 -3
  21. package/fesm2022/taiga-ui-core-components-root.mjs +2 -2
  22. package/fesm2022/taiga-ui-core-components-textfield.mjs +6 -6
  23. package/fesm2022/taiga-ui-core-directives-appearance.mjs +3 -3
  24. package/fesm2022/taiga-ui-core-directives-group.mjs +3 -3
  25. package/fesm2022/taiga-ui-core-directives-icons.mjs +3 -3
  26. package/fesm2022/taiga-ui-core-directives-title.mjs +3 -3
  27. package/package.json +15 -15
  28. package/styles/mixins/theme/palette.less +133 -0
  29. package/styles/mixins/theme/variables.less +44 -0
  30. package/styles/mixins/theme.less +86 -0
  31. package/styles/theme/palette.less +4 -136
  32. package/styles/theme/variables.less +2 -41
  33. package/styles/variables/version.less +1 -1
package/styles/theme/palette.less CHANGED
@@ -1,142 +1,10 @@
1
- .dark() {
2
- // Backgrounds
3
- --tui-background-base: #222;
4
- --tui-background-base-alt: #333;
5
- --tui-background-neutral-1: rgba(255, 255, 255, 0.08);
6
- --tui-background-neutral-1-hover: rgba(255, 255, 255, 0.16);
7
- --tui-background-neutral-1-pressed: rgba(255, 255, 255, 0.24);
8
- --tui-background-neutral-2: rgba(255, 255, 255, 0.24);
9
- --tui-background-neutral-2-hover: rgba(255, 255, 255, 0.32);
10
- --tui-background-neutral-2-pressed: rgba(255, 255, 255, 0.4);
11
- --tui-background-accent-opposite: #fff;
12
- --tui-background-accent-opposite-hover: #f6f6f6;
13
- --tui-background-accent-opposite-pressed: #ededed;
14
- --tui-background-elevation-1: #292929;
15
- --tui-background-elevation-2: #2f2f2f;
16
- --tui-background-elevation-3: #373737;
17
- // Other
18
- --tui-service-autofill-background: rgb(85, 74, 42);
19
- --tui-border-normal: rgba(255, 255, 255, 0.14);
20
- --tui-border-hover: rgba(255, 255, 255, 0.6);
21
- --tui-border-focus: rgba(255, 255, 255, 0.64);
22
- // Statuses
23
- --tui-status-negative: #ff4d4d;
24
- --tui-status-negative-pale: rgba(255, 77, 77, 0.24);
25
- --tui-status-negative-pale-hover: rgba(255, 77, 77, 0.32);
26
- --tui-status-positive: rgb(74, 201, 155);
27
- --tui-status-positive-pale: rgba(74, 201, 155, 0.32);
28
- --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.4);
29
- --tui-status-warning: rgb(255, 199, 0);
30
- --tui-status-warning-pale: rgba(255, 199, 0, 0.32);
31
- --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.4);
32
- --tui-status-info: rgb(112, 182, 246);
33
- --tui-status-info-pale: rgba(112, 182, 246, 0.32);
34
- --tui-status-info-pale-hover: rgba(112, 182, 246, 0.4);
35
- --tui-status-neutral: rgb(149, 155, 164);
36
- // Text
37
- --tui-text-primary: rgba(255, 255, 255, 1);
38
- --tui-text-secondary: rgba(255, 255, 255, 0.72);
39
- --tui-text-tertiary: rgba(255, 255, 255, 0.6);
40
- --tui-text-action: #6788ff;
41
- --tui-text-action-hover: #526ed3;
42
- --tui-text-positive: #44c596;
43
- --tui-text-positive-hover: #3aa981;
44
- --tui-text-negative: #ff4d4d;
45
- --tui-text-negative-hover: #f66;
46
- }
47
-
48
- .light() {
49
- // Backgrounds
50
- --tui-background-base: #fff;
51
- --tui-background-base-alt: #f6f6f6;
52
- --tui-background-neutral-1: rgba(0, 0, 0, 0.04);
53
- --tui-background-neutral-1-hover: rgba(0, 0, 0, 0.08);
54
- --tui-background-neutral-1-pressed: rgba(0, 0, 0, 0.12);
55
- --tui-background-neutral-2: rgba(0, 0, 0, 0.08);
56
- --tui-background-neutral-2-hover: rgba(0, 0, 0, 0.1);
57
- --tui-background-neutral-2-pressed: rgba(0, 0, 0, 0.14);
58
- --tui-background-accent-1: #526ed3;
59
- --tui-background-accent-1-hover: #6c86e2;
60
- --tui-background-accent-1-pressed: #314692;
61
- --tui-background-accent-2: #ff7043;
62
- --tui-background-accent-2-hover: #ff9a94;
63
- --tui-background-accent-2-pressed: #e7716a;
64
- --tui-background-accent-opposite: #000;
65
- --tui-background-accent-opposite-hover: #333;
66
- --tui-background-accent-opposite-pressed: #808080;
67
- --tui-background-elevation-1: #fff;
68
- --tui-background-elevation-2: #fff;
69
- --tui-background-elevation-3: #fff;
70
- // Other
71
- --tui-service-autofill-background: #fff5c0;
72
- --tui-service-selection-background: rgba(112, 182, 246, 0.12);
73
- --tui-service-backdrop: rgba(0, 0, 0, 0.75);
74
- --tui-border-normal: rgba(0, 0, 0, 0.1);
75
- --tui-border-hover: rgba(0, 0, 0, 0.16);
76
- --tui-border-focus: rgba(51, 51, 51, 0.64);
77
- // Statuses
78
- --tui-status-negative: #ff291a;
79
- --tui-status-negative-pale: rgba(245, 34, 34, 0.08);
80
- --tui-status-negative-pale-hover: rgba(245, 34, 34, 0.16);
81
- --tui-status-positive: rgba(74, 201, 155, 1);
82
- --tui-status-positive-pale: rgba(74, 201, 155, 0.12);
83
- --tui-status-positive-pale-hover: rgba(74, 201, 155, 0.24);
84
- --tui-status-warning: rgba(255, 199, 0, 1);
85
- --tui-status-warning-pale: rgba(255, 199, 0, 0.12);
86
- --tui-status-warning-pale-hover: rgba(255, 199, 0, 0.24);
87
- --tui-status-info: rgba(112, 182, 246, 1);
88
- --tui-status-info-pale: rgba(112, 182, 246, 0.12);
89
- --tui-status-info-pale-hover: rgba(112, 182, 246, 0.24);
90
- --tui-status-neutral: rgb(121, 129, 140);
91
- // Text
92
- --tui-text-primary: rgba(27, 31, 59, 1);
93
- --tui-text-secondary: rgba(27, 31, 59, 0.65);
94
- --tui-text-tertiary: rgba(27, 31, 59, 0.4);
95
- --tui-text-primary-on-accent-1: #fff;
96
- --tui-text-primary-on-accent-2: #fff;
97
- --tui-text-action: #4c66c3;
98
- --tui-text-action-hover: #6c86e2;
99
- --tui-text-positive: #3aa981;
100
- --tui-text-positive-hover: #7ac5aa;
101
- --tui-text-negative: #ff291a;
102
- --tui-text-negative-hover: #ff4d4d;
103
- // Charts
104
- --tui-chart-categorical-00: var(--tui-background-accent-1);
105
- --tui-chart-categorical-01: #ea97c4;
106
- --tui-chart-categorical-02: #a0c5df;
107
- --tui-chart-categorical-03: #fee797;
108
- --tui-chart-categorical-04: #b0b0b0;
109
- --tui-chart-categorical-05: #e29398;
110
- --tui-chart-categorical-06: #b8474e;
111
- --tui-chart-categorical-07: #fcc068;
112
- --tui-chart-categorical-08: #ff8a00;
113
- --tui-chart-categorical-09: #dab3f9;
114
- --tui-chart-categorical-10: #7b439e;
115
- --tui-chart-categorical-11: #8dda71;
116
- --tui-chart-categorical-12: #fcbb14;
117
- --tui-chart-categorical-13: #a8cef1;
118
- --tui-chart-categorical-14: #bd65a4;
119
- --tui-chart-categorical-15: #7fd7cc;
120
- --tui-chart-categorical-16: #2fad96;
121
- --tui-chart-categorical-17: #d4aca2;
122
- --tui-chart-categorical-18: #9d6f64;
123
- --tui-chart-categorical-19: #d2e9a2;
124
- --tui-chart-categorical-20: #aadc42;
125
- --tui-chart-categorical-21: #3682db;
126
- --tui-chart-categorical-22: #34b41f;
127
- // Shadows
128
- --tui-shadow-small: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
129
- --tui-shadow-small-hover: 0 1rem 2.5rem rgba(0, 0, 0, 0.14);
130
- --tui-shadow-medium: 0 0.375rem 2rem rgba(0, 0, 0, 0.12);
131
- --tui-shadow-medium-hover: 0 1.25rem 4rem rgba(0, 0, 0, 0.18);
132
- --tui-shadow-popup: 0 1.25rem 3rem rgba(0, 0, 0, 0.2);
133
- }
1
+ @import '../mixins/theme/palette.less';
134
2
 
135
3
  @media screen {
136
4
  [tuiTheme='dark'] {
137
5
  color-scheme: dark;
138
6
 
139
- .dark();
7
+ .tui-theme-dark();
140
8
  }
141
9
 
142
10
  [tuiTheme='light'] {
@@ -146,7 +14,7 @@
146
14
  &:root,
147
15
  :host,
148
16
  [tuiTheme='light'] {
149
- .light();
17
+ .tui-theme-light();
150
18
  }
151
19
  }
152
20
 
@@ -156,6 +24,6 @@
156
24
  [tuiTheme] {
157
25
  color-scheme: light;
158
26
 
159
- .light();
27
+ .tui-theme-light();
160
28
  }
161
29
  }
package/styles/theme/variables.less CHANGED
@@ -1,45 +1,6 @@
1
- @font-fallback: -apple-system, 'BlinkMacSystemFont', system-ui, 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
1
+ @import '../mixins/theme/variables.less';
2
2
 
3
3
  &:root,
4
4
  &:host {
5
- // Fonts
6
- --tui-font-heading: 'Manrope', @font-fallback;
7
- --tui-font-text: 'Manrope', @font-fallback;
8
- --tui-font-offset: ~'0rem';
9
- // Heading
10
- --tui-font-heading-1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(50 / 56) var(--tui-font-heading);
11
- --tui-font-heading-2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44) var(--tui-font-heading);
12
- --tui-font-heading-3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36) var(--tui-font-heading);
13
- --tui-font-heading-4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28) var(--tui-font-heading);
14
- --tui-font-heading-5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24) var(--tui-font-heading);
15
- --tui-font-heading-6: bold calc(var(--tui-font-offset) + 1.25rem) / calc(24 / 20) var(--tui-font-heading);
16
- // Body
17
- --tui-font-text-xl: normal calc(var(--tui-font-offset) + 1.1875rem) / calc(28 / 19) var(--tui-font-text);
18
- --tui-font-text-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(28 / 17) var(--tui-font-text);
19
- --tui-font-text-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16) var(--tui-font-text);
20
- --tui-font-text-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(20 / 13) var(--tui-font-text);
21
- --tui-font-text-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11) var(--tui-font-text);
22
- // Reduced
23
- --tui-font-text-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17) var(--tui-font-text);
24
- --tui-font-text-ui-m: normal calc(var(--tui-font-offset) + 1rem) / calc(20 / 16) var(--tui-font-text);
25
- --tui-font-text-ui-s: normal calc(var(--tui-font-offset) + 0.8125rem) / calc(16 / 13) var(--tui-font-text);
26
- --tui-font-text-ui-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(13 / 11) var(--tui-font-text);
27
- // Radii
28
- --tui-radius-xs: 0.25rem;
29
- --tui-radius-s: 0.5rem;
30
- --tui-radius-m: 0.625rem;
31
- --tui-radius-l: 0.75rem;
32
- --tui-radius-xl: 1.5rem;
33
- // Sizes
34
- --tui-height-xs: 1.5rem;
35
- --tui-height-s: 2rem;
36
- --tui-height-m: 2.75rem;
37
- --tui-height-l: 3.5rem;
38
- // Input padding
39
- --tui-padding-s: 0.625rem;
40
- --tui-padding-m: 0.75rem;
41
- --tui-padding-l: 1rem;
42
- // Misc
43
- --tui-duration: 0.3s;
44
- --tui-disabled-opacity: 0.56;
5
+ .tui-theme-variables();
45
6
  }
package/styles/variables/version.less CHANGED
@@ -1 +1 @@
1
- @tui-version: '4.92.0';
1
+ @tui-version: '4.93.0';