@alfalab/core-components-typography 6.0.8 → 6.0.9-alfasans

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 (88) hide show
  1. package/colors.css +20 -20
  2. package/colors.module.css.js +1 -1
  3. package/cssm/text/index.module.css +40 -13
  4. package/cssm/title/component.d.ts +2 -8
  5. package/cssm/title/component.js +3 -6
  6. package/cssm/title/component.js.map +1 -1
  7. package/cssm/title/index.d.ts +1 -4
  8. package/cssm/title/index.module.css +23 -74
  9. package/cssm/title-mobile/component.d.ts +1 -4
  10. package/cssm/title-mobile/index.module.css +28 -45
  11. package/cssm/title-responsive/component.d.ts +1 -4
  12. package/esm/colors.css +20 -20
  13. package/esm/colors.module.css.js +1 -1
  14. package/esm/text/index.css +80 -53
  15. package/esm/text/index.module.css.js +1 -1
  16. package/esm/title/common.css +5 -5
  17. package/esm/title/common.module.css.js +1 -1
  18. package/esm/title/component.d.ts +2 -8
  19. package/esm/title/component.js +2 -5
  20. package/esm/title/component.js.map +1 -1
  21. package/esm/title/index.css +38 -89
  22. package/esm/title/index.d.ts +1 -4
  23. package/esm/title/index.module.css.js +1 -1
  24. package/esm/title/index.module.css.js.map +1 -1
  25. package/esm/title-mobile/component.d.ts +1 -4
  26. package/esm/title-mobile/index.css +53 -70
  27. package/esm/title-mobile/index.module.css.js +1 -1
  28. package/esm/title-responsive/component.d.ts +1 -4
  29. package/modern/colors.css +20 -20
  30. package/modern/colors.module.css.js +1 -1
  31. package/modern/text/index.css +80 -53
  32. package/modern/text/index.module.css.js +1 -1
  33. package/modern/title/common.css +5 -5
  34. package/modern/title/common.module.css.js +1 -1
  35. package/modern/title/component.d.ts +2 -8
  36. package/modern/title/component.js +1 -4
  37. package/modern/title/component.js.map +1 -1
  38. package/modern/title/index.css +38 -89
  39. package/modern/title/index.d.ts +1 -4
  40. package/modern/title/index.module.css.js +1 -1
  41. package/modern/title/index.module.css.js.map +1 -1
  42. package/modern/title-mobile/component.d.ts +1 -4
  43. package/modern/title-mobile/index.css +53 -70
  44. package/modern/title-mobile/index.module.css.js +1 -1
  45. package/modern/title-responsive/component.d.ts +1 -4
  46. package/moderncssm/text/index.module.css +37 -11
  47. package/moderncssm/title/component.d.ts +2 -8
  48. package/moderncssm/title/component.js +1 -4
  49. package/moderncssm/title/component.js.map +1 -1
  50. package/moderncssm/title/index.d.ts +1 -4
  51. package/moderncssm/title/index.module.css +20 -79
  52. package/moderncssm/title-mobile/component.d.ts +1 -4
  53. package/moderncssm/title-mobile/index.module.css +25 -40
  54. package/moderncssm/title-responsive/component.d.ts +1 -4
  55. package/package.json +6 -6
  56. package/src/title/component.tsx +3 -8
  57. package/src/title/index.module.css +0 -8
  58. package/text/index.css +80 -53
  59. package/text/index.module.css.js +1 -1
  60. package/title/common.css +5 -5
  61. package/title/common.module.css.js +1 -1
  62. package/title/component.d.ts +2 -8
  63. package/title/component.js +2 -5
  64. package/title/component.js.map +1 -1
  65. package/title/index.css +38 -89
  66. package/title/index.d.ts +1 -4
  67. package/title/index.module.css.js +1 -1
  68. package/title/index.module.css.js.map +1 -1
  69. package/title-mobile/component.d.ts +1 -4
  70. package/title-mobile/index.css +53 -70
  71. package/title-mobile/index.module.css.js +1 -1
  72. package/title-responsive/component.d.ts +1 -4
  73. package/cssm/title/utils.d.ts +0 -1
  74. package/cssm/title/utils.js +0 -16
  75. package/cssm/title/utils.js.map +0 -1
  76. package/esm/title/utils.d.ts +0 -1
  77. package/esm/title/utils.js +0 -12
  78. package/esm/title/utils.js.map +0 -1
  79. package/modern/title/utils.d.ts +0 -1
  80. package/modern/title/utils.js +0 -12
  81. package/modern/title/utils.js.map +0 -1
  82. package/moderncssm/title/utils.d.ts +0 -1
  83. package/moderncssm/title/utils.js +0 -12
  84. package/moderncssm/title/utils.js.map +0 -1
  85. package/src/title/utils.ts +0 -14
  86. package/title/utils.d.ts +0 -1
  87. package/title/utils.js +0 -16
  88. package/title/utils.js.map +0 -1
package/modern/title-mobile/index.css CHANGED
@@ -8,129 +8,112 @@
8
8
  --gap-40: var(--gap-3xl);
9
9
  }
10
10
  :root {
11
- --font-family-system:
12
- system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
13
- --font-family-styrene:
14
- 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
15
- sans-serif;
11
+ --font-family-alfasans:
12
+ 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
13
+ Helvetica, sans-serif;
16
14
  }
17
- .typography__xlarge_1v3ec {
15
+ .typography__xlarge_1qkac {
18
16
  font-size: 34px;
19
17
  line-height: 40px;
20
- font-weight: 600;
21
- font-family: var(--font-family-system);
18
+ font-weight: 500;
19
+ letter-spacing: -0.32px;
20
+ font-family: var(--font-family-alfasans);
22
21
  }
23
- .typography__xlarge_1v3ec.typography__font_1v3ec {
24
- font-weight: 500;
25
- font-feature-settings: 'ss01';
26
- font-family: var(--font-family-styrene);
22
+ .typography__xlarge_1qkac.typography__font_1qkac {
27
23
  }
28
- .typography__regular-xlarge_1v3ec {
24
+ .typography__regular-xlarge_1qkac {
29
25
  font-size: 34px;
30
26
  line-height: 40px;
31
27
  font-weight: 400;
32
- font-family: var(--font-family-system);
28
+ letter-spacing: -1.36px;
29
+ font-family: var(--font-family-alfasans);
33
30
  }
34
- .typography__regular-xlarge_1v3ec.typography__system_1v3ec {
35
- font-feature-settings: 'ss01';
36
- font-family: var(--font-family-styrene);
31
+ .typography__regular-xlarge_1qkac.typography__system_1qkac {
37
32
  }
38
- .typography__large_1v3ec {
33
+ .typography__large_1qkac {
39
34
  font-size: 30px;
40
35
  line-height: 36px;
41
- font-weight: 600;
42
- font-family: var(--font-family-system);
36
+ font-weight: 500;
37
+ letter-spacing: -0.25px;
38
+ font-family: var(--font-family-alfasans);
43
39
  }
44
- .typography__large_1v3ec.typography__font_1v3ec {
45
- font-weight: 500;
46
- font-feature-settings: 'ss01';
47
- font-family: var(--font-family-styrene);
40
+ .typography__large_1qkac.typography__font_1qkac {
48
41
  }
49
- .typography__regular-large_1v3ec {
42
+ .typography__regular-large_1qkac {
50
43
  font-size: 30px;
51
44
  line-height: 36px;
52
45
  font-weight: 400;
53
- font-family: var(--font-family-system);
46
+ letter-spacing: -1.25px;
47
+ font-family: var(--font-family-alfasans);
54
48
  }
55
- .typography__regular-large_1v3ec.typography__system_1v3ec {
56
- font-feature-settings: 'ss01';
57
- font-family: var(--font-family-styrene);
49
+ .typography__regular-large_1qkac.typography__system_1qkac {
58
50
  }
59
- .typography__medium_1v3ec {
51
+ .typography__medium_1qkac {
60
52
  font-size: 26px;
61
53
  line-height: 32px;
62
- font-weight: 600;
63
- font-family: var(--font-family-system);
54
+ font-weight: 500;
55
+ letter-spacing: -0.25px;
56
+ font-family: var(--font-family-alfasans);
64
57
  }
65
- .typography__medium_1v3ec.typography__font_1v3ec {
66
- font-weight: 500;
67
- font-feature-settings: 'ss01';
68
- font-family: var(--font-family-styrene);
58
+ .typography__medium_1qkac.typography__font_1qkac {
69
59
  }
70
- .typography__regular-medium_1v3ec {
60
+ .typography__regular-medium_1qkac {
71
61
  font-size: 26px;
72
62
  line-height: 32px;
73
63
  font-weight: 400;
74
- font-family: var(--font-family-system);
64
+ letter-spacing: -1px;
65
+ font-family: var(--font-family-alfasans);
75
66
  }
76
- .typography__regular-medium_1v3ec.typography__system_1v3ec {
77
- font-feature-settings: 'ss01';
78
- font-family: var(--font-family-styrene);
67
+ .typography__regular-medium_1qkac.typography__system_1qkac {
79
68
  }
80
- .typography__small_1v3ec {
69
+ .typography__small_1qkac {
81
70
  font-size: 20px;
82
71
  line-height: 28px;
83
- font-weight: 600;
84
- font-family: var(--font-family-system);
72
+ font-weight: 500;
73
+ letter-spacing: -0.15px;
74
+ font-family: var(--font-family-alfasans);
85
75
  }
86
- .typography__small_1v3ec.typography__font_1v3ec {
87
- font-weight: 500;
88
- font-feature-settings: 'ss01';
89
- font-family: var(--font-family-styrene);
76
+ .typography__small_1qkac.typography__font_1qkac {
90
77
  }
91
- .typography__regular-small_1v3ec {
78
+ .typography__regular-small_1qkac {
92
79
  font-size: 20px;
93
80
  line-height: 28px;
94
81
  font-weight: 400;
95
- font-family: var(--font-family-system);
82
+ letter-spacing: -0.68px;
83
+ font-family: var(--font-family-alfasans);
96
84
  }
97
- .typography__regular-small_1v3ec.typography__system_1v3ec {
98
- font-feature-settings: 'ss01';
99
- font-family: var(--font-family-styrene);
85
+ .typography__regular-small_1qkac.typography__system_1qkac {
100
86
  }
101
- .typography__xsmall_1v3ec {
87
+ .typography__xsmall_1qkac {
102
88
  font-size: 16px;
103
89
  line-height: 20px;
104
- font-weight: 600;
105
- font-family: var(--font-family-system);
90
+ font-weight: 500;
91
+ letter-spacing: 0.17px;
92
+ font-family: var(--font-family-alfasans);
106
93
  }
107
- .typography__xsmall_1v3ec.typography__font_1v3ec {
108
- font-weight: 500;
109
- font-feature-settings: 'ss01';
110
- font-family: var(--font-family-styrene);
94
+ .typography__xsmall_1qkac.typography__font_1qkac {
111
95
  }
112
- .typography__regular-xsmall_1v3ec {
96
+ .typography__regular-xsmall_1qkac {
113
97
  font-size: 16px;
114
98
  line-height: 20px;
115
99
  font-weight: 400;
116
- font-family: var(--font-family-system);
100
+ letter-spacing: -0.24px;
101
+ font-family: var(--font-family-alfasans);
117
102
  }
118
- .typography__regular-xsmall_1v3ec.typography__system_1v3ec {
119
- font-feature-settings: 'ss01';
120
- font-family: var(--font-family-styrene);
103
+ .typography__regular-xsmall_1qkac.typography__system_1qkac {
121
104
  }
122
- .typography__component_1v3ec.typography__margins-xlarge_1v3ec {
105
+ .typography__component_1qkac.typography__margins-xlarge_1qkac {
123
106
  margin: var(--gap-0) var(--gap-0) var(--gap-24);
124
107
  }
125
- .typography__component_1v3ec.typography__margins-large_1v3ec {
108
+ .typography__component_1qkac.typography__margins-large_1qkac {
126
109
  margin: var(--gap-40) var(--gap-0) var(--gap-16);
127
110
  }
128
- .typography__component_1v3ec.typography__margins-medium_1v3ec {
111
+ .typography__component_1qkac.typography__margins-medium_1qkac {
129
112
  margin: var(--gap-40) var(--gap-0) var(--gap-16);
130
113
  }
131
- .typography__component_1v3ec.typography__margins-small_1v3ec {
114
+ .typography__component_1qkac.typography__margins-small_1qkac {
132
115
  margin: var(--gap-40) var(--gap-0) var(--gap-16);
133
116
  }
134
- .typography__component_1v3ec .typography__margins-xsmall_1v3ec {
117
+ .typography__component_1qkac .typography__margins-xsmall_1qkac {
135
118
  margin: var(--gap-40) var(--gap-0) var(--gap-16);
136
119
  }
package/modern/title-mobile/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"xlarge":"typography__xlarge_1v3ec","font":"typography__font_1v3ec","regular-xlarge":"typography__regular-xlarge_1v3ec","system":"typography__system_1v3ec","large":"typography__large_1v3ec","regular-large":"typography__regular-large_1v3ec","medium":"typography__medium_1v3ec","regular-medium":"typography__regular-medium_1v3ec","small":"typography__small_1v3ec","regular-small":"typography__regular-small_1v3ec","xsmall":"typography__xsmall_1v3ec","regular-xsmall":"typography__regular-xsmall_1v3ec","component":"typography__component_1v3ec","margins-xlarge":"typography__margins-xlarge_1v3ec","margins-large":"typography__margins-large_1v3ec","margins-medium":"typography__margins-medium_1v3ec","margins-small":"typography__margins-small_1v3ec","margins-xsmall":"typography__margins-xsmall_1v3ec"};
3
+ const styles = {"xlarge":"typography__xlarge_1qkac","font":"typography__font_1qkac","regular-xlarge":"typography__regular-xlarge_1qkac","system":"typography__system_1qkac","large":"typography__large_1qkac","regular-large":"typography__regular-large_1qkac","medium":"typography__medium_1qkac","regular-medium":"typography__regular-medium_1qkac","small":"typography__small_1qkac","regular-small":"typography__regular-small_1qkac","xsmall":"typography__xsmall_1qkac","regular-xsmall":"typography__regular-xsmall_1qkac","component":"typography__component_1qkac","margins-xlarge":"typography__margins-xlarge_1qkac","margins-large":"typography__margins-large_1qkac","margins-medium":"typography__margins-medium_1qkac","margins-small":"typography__margins-small_1qkac","margins-xsmall":"typography__margins-xsmall_1qkac"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/title-responsive/component.d.ts CHANGED
@@ -16,10 +16,7 @@ export declare const TitleResponsive: React.ForwardRefExoticComponent<Omit<React
16
16
  view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
17
17
  color?: import("..").Color;
18
18
  weight?: "regular" | "medium" | "bold" | "semibold";
19
- font?: "styrene" | "system" | "alfasans" | {
20
- font: "alfasans";
21
- systemCompat: boolean;
22
- };
19
+ font?: "styrene" | "system";
23
20
  defaultMargins?: boolean;
24
21
  className?: string;
25
22
  dataTestId?: string;
package/moderncssm/text/index.module.css CHANGED
@@ -20,15 +20,18 @@
20
20
  font-size: 16px;
21
21
  line-height: 20px;
22
22
  font-weight: 400;
23
- font-family: var(--font-family-system);
23
+ letter-spacing: -0.24px;
24
+ font-family: var(--font-family-alfasans);
24
25
  }
25
26
 
26
27
  .component.bold {
27
28
  font-weight: 700;
29
+ letter-spacing: 0.43px;
28
30
  }
29
31
 
30
32
  .component.medium {
31
33
  font-weight: 500;
34
+ letter-spacing: -0.05px;
32
35
  }
33
36
 
34
37
  .caps {
@@ -37,7 +40,7 @@
37
40
  font-weight: 400;
38
41
  letter-spacing: 1.25px;
39
42
  text-transform: uppercase;
40
- font-family: var(--font-family-system);
43
+ font-family: var(--font-family-alfasans);
41
44
  }
42
45
 
43
46
  .caps.bold {
@@ -54,7 +57,7 @@
54
57
  font-weight: 400;
55
58
  letter-spacing: 1.25px;
56
59
  text-transform: uppercase;
57
- font-family: var(--font-family-system);
60
+ font-family: var(--font-family-alfasans);
58
61
  }
59
62
 
60
63
  .tagline.bold {
@@ -69,120 +72,143 @@
69
72
  font-size: 18px;
70
73
  line-height: 24px;
71
74
  font-weight: 400;
72
- font-family: var(--font-family-system);
75
+ letter-spacing: -0.36px;
76
+ font-family: var(--font-family-alfasans);
73
77
  }
74
78
 
75
79
  .primary-large.bold {
76
80
  font-weight: 700;
81
+ letter-spacing: 0.38px;
77
82
  }
78
83
 
79
84
  .primary-large.medium {
80
85
  font-weight: 500;
86
+ letter-spacing: -0.17px;
81
87
  }
82
88
 
83
89
  .primary-medium {
84
90
  font-size: 16px;
85
91
  line-height: 24px;
86
92
  font-weight: 400;
87
- font-family: var(--font-family-system);
93
+ letter-spacing: -0.24px;
94
+ font-family: var(--font-family-alfasans);
88
95
  }
89
96
 
90
97
  .primary-medium.bold {
91
98
  font-weight: 700;
99
+ letter-spacing: 0.43px;
92
100
  }
93
101
 
94
102
  .primary-medium.medium {
95
103
  font-weight: 500;
104
+ letter-spacing: -0.05px;
96
105
  }
97
106
 
98
107
  .primary-small {
99
108
  font-size: 14px;
100
109
  line-height: 20px;
101
110
  font-weight: 400;
102
- font-family: var(--font-family-system);
111
+ letter-spacing: -0.08px;
112
+ font-family: var(--font-family-alfasans);
103
113
  }
104
114
 
105
115
  .primary-small.bold {
106
116
  font-weight: 700;
117
+ letter-spacing: 0.47px;
107
118
  }
108
119
 
109
120
  .primary-small.medium {
110
121
  font-weight: 500;
122
+ letter-spacing: 0.07px;
111
123
  }
112
124
 
113
125
  .component-primary {
114
126
  font-size: 16px;
115
127
  line-height: 20px;
116
128
  font-weight: 400;
117
- font-family: var(--font-family-system);
129
+ letter-spacing: -0.24px;
130
+ font-family: var(--font-family-alfasans);
118
131
  }
119
132
 
120
133
  .component-primary.bold {
121
134
  font-weight: 700;
135
+ letter-spacing: 0.43px;
122
136
  }
123
137
 
124
138
  .component-primary.medium {
125
139
  font-weight: 500;
140
+ letter-spacing: -0.05px;
126
141
  }
127
142
 
128
143
  .secondary-large {
129
144
  font-size: 13px;
130
145
  line-height: 16px;
131
146
  font-weight: 400;
132
- font-family: var(--font-family-system);
147
+ font-family: var(--font-family-alfasans);
133
148
  }
134
149
 
135
150
  .secondary-large.bold {
136
151
  font-weight: 700;
152
+ letter-spacing: 0.54px;
137
153
  }
138
154
 
139
155
  .secondary-large.medium {
140
156
  font-weight: 500;
157
+ letter-spacing: 0.13px;
141
158
  }
142
159
 
143
160
  .secondary-medium {
144
161
  font-size: 12px;
145
162
  line-height: 16px;
146
163
  font-weight: 400;
147
- font-family: var(--font-family-system);
164
+ letter-spacing: 0.06px;
165
+ font-family: var(--font-family-alfasans);
148
166
  }
149
167
 
150
168
  .secondary-medium.bold {
151
169
  font-weight: 700;
170
+ letter-spacing: 0.57px;
152
171
  }
153
172
 
154
173
  .secondary-medium.medium {
155
174
  font-weight: 500;
175
+ letter-spacing: 0.19px;
156
176
  }
157
177
 
158
178
  .secondary-small {
159
179
  font-size: 11px;
160
180
  line-height: 16px;
161
181
  font-weight: 400;
162
- font-family: var(--font-family-system);
182
+ letter-spacing: 0.15px;
183
+ font-family: var(--font-family-alfasans);
163
184
  }
164
185
 
165
186
  .secondary-small.bold {
166
187
  font-weight: 700;
188
+ letter-spacing: 0.54px;
167
189
  }
168
190
 
169
191
  .secondary-small.medium {
170
192
  font-weight: 500;
193
+ letter-spacing: 0.24px;
171
194
  }
172
195
 
173
196
  .component-secondary {
174
197
  font-size: 14px;
175
198
  line-height: 18px;
176
199
  font-weight: 400;
177
- font-family: var(--font-family-system);
200
+ letter-spacing: -0.08px;
201
+ font-family: var(--font-family-alfasans);
178
202
  }
179
203
 
180
204
  .component-secondary.bold {
181
205
  font-weight: 700;
206
+ letter-spacing: 0.47px;
182
207
  }
183
208
 
184
209
  .component-secondary.medium {
185
210
  font-weight: 500;
211
+ letter-spacing: 0.07px;
186
212
  }
187
213
 
188
214
  .rowLimit1 {
package/moderncssm/title/component.d.ts CHANGED
@@ -22,10 +22,7 @@ export type TitleProps = Omit<NativeProps, 'color'> & {
22
22
  /**
23
23
  * Шрифт текста
24
24
  */
25
- font?: 'styrene' | 'system' | 'alfasans' | {
26
- font: 'alfasans';
27
- systemCompat: boolean;
28
- };
25
+ font?: 'styrene' | 'system';
29
26
  /**
30
27
  * Добавляет отступы
31
28
  */
@@ -86,10 +83,7 @@ export declare const TitleBase: React.ForwardRefExoticComponent<Omit<NativeProps
86
83
  /**
87
84
  * Шрифт текста
88
85
  */
89
- font?: "styrene" | "system" | "alfasans" | {
90
- font: "alfasans";
91
- systemCompat: boolean;
92
- };
86
+ font?: "styrene" | "system";
93
87
  /**
94
88
  * Добавляет отступы
95
89
  */
package/moderncssm/title/component.js CHANGED
@@ -1,13 +1,11 @@
1
1
  import React, { forwardRef } from 'react';
2
2
  import mergeRefs from 'react-merge-refs';
3
3
  import cn from 'classnames';
4
- import { isObject } from '@alfalab/core-components-shared/moderncssm';
5
4
  import { useSkeleton } from '@alfalab/core-components-skeleton/moderncssm';
6
- import { getDefaultWeight } from './utils.js';
7
5
  import colors from '../colors.module.css';
8
6
  import commonStyles from './common.module.css';
9
7
 
10
- const TitleBase = forwardRef(({ tag: Component = 'div', view = 'medium', font = 'styrene', platform, weight = getDefaultWeight(isObject(font) ? font.font : font, platform), defaultMargins = false, color, className, dataTestId, children, rowLimit, styles, skeletonProps, showSkeleton, ...restProps }, ref) => {
8
+ const TitleBase = forwardRef(({ tag: Component = 'div', view = 'medium', font, platform, weight = 'bold', defaultMargins = false, color, className, dataTestId, children, rowLimit, styles, skeletonProps, showSkeleton, ...restProps }, ref) => {
11
9
  const { renderSkeleton, textRef } = useSkeleton(showSkeleton, skeletonProps);
12
10
  const skeleton = renderSkeleton({
13
11
  wrapperClassName: cn(defaultMargins && styles[`margins-${view}`]),
@@ -19,7 +17,6 @@ const TitleBase = forwardRef(({ tag: Component = 'div', view = 'medium', font =
19
17
  return (React.createElement(Component, { className: cn(commonStyles.component, styles.component, className, styles[`${weight === 'regular' ? 'regular-' : ''}${view}`], defaultMargins && styles[`margins-${view}`], color && colors[color], {
20
18
  [commonStyles[`rowLimit${rowLimit}`]]: rowLimit,
21
19
  [commonStyles.transparent]: showSkeleton,
22
- [styles.font]: (isObject(font) && !font.systemCompat) || !(font === 'system'),
23
20
  }), "data-test-id": dataTestId, ref: mergeRefs([ref, textRef]), ...restProps }, children));
24
21
  });
25
22
 
package/moderncssm/title/component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sources":["../../src/title/component.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { isObject } from '@alfalab/core-components-shared';\nimport { type TextSkeletonProps, useSkeleton } from '@alfalab/core-components-skeleton';\n\nimport { type Color } from '../colors';\n\nimport { getDefaultWeight } from './utils';\n\nimport colors from '../colors.module.css';\nimport commonStyles from './common.module.css';\n\ntype NativeProps = HTMLAttributes<HTMLHeadingElement>;\n\nexport type TitleProps = Omit<NativeProps, 'color'> & {\n /**\n * HTML тег\n */\n tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';\n\n /**\n * [Вариант начертания](?path=/docs/guidelines-typography--page)\n */\n view?: 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';\n\n /**\n * Цвет текста\n */\n color?: Color;\n\n /**\n * Толщина шрифта\n */\n weight?: 'regular' | 'medium' | 'bold' | 'semibold';\n\n /**\n * Шрифт текста\n */\n font?: 'styrene' | 'system' | 'alfasans' | { font: 'alfasans'; systemCompat: boolean };\n\n /**\n * Добавляет отступы\n */\n defaultMargins?: boolean;\n\n /**\n * Css-класс для стилизации (native prop)\n */\n className?: string;\n\n /**\n * Id компонента для тестов\n */\n dataTestId?: string;\n\n /**\n * Контент (native prop)\n */\n children?: React.ReactNode;\n\n /**\n * Количество строк\n */\n rowLimit?: 1 | 2 | 3;\n\n /**\n * Показать скелетон\n */\n showSkeleton?: boolean;\n\n /**\n * Пропы для скелетона\n */\n skeletonProps?: TextSkeletonProps;\n\n /**\n * Значение по-умолчанию для хука useMatchMedia\n */\n defaultMatchMediaValue?: boolean | (() => boolean);\n};\n\ntype PrivateProps = {\n styles: {\n [key: string]: string;\n };\n platform: 'mobile' | 'desktop';\n};\n\ntype TitleElementType = HTMLHeadingElement | HTMLDivElement;\n\nexport const TitleBase = forwardRef<TitleElementType, TitleProps & PrivateProps>(\n (\n {\n tag: Component = 'div',\n view = 'medium',\n font = 'styrene',\n platform,\n weight = getDefaultWeight(isObject(font) ? font.font : font, platform),\n defaultMargins = false,\n color,\n className,\n dataTestId,\n children,\n rowLimit,\n styles,\n skeletonProps,\n showSkeleton,\n ...restProps\n },\n ref,\n ) => {\n const { renderSkeleton, textRef } = useSkeleton(showSkeleton, skeletonProps);\n\n const skeleton = renderSkeleton({\n wrapperClassName: cn(defaultMargins && styles[`margins-${view}`]),\n dataTestId,\n });\n\n if (skeleton) {\n return skeleton;\n }\n\n return (\n <Component\n className={cn(\n commonStyles.component,\n styles.component,\n className,\n styles[`${weight === 'regular' ? 'regular-' : ''}${view}`],\n defaultMargins && styles[`margins-${view}`],\n color && colors[color],\n {\n [commonStyles[`rowLimit${rowLimit}`]]: rowLimit,\n [commonStyles.transparent]: showSkeleton,\n [styles.font]:\n (isObject(font) && !font.systemCompat) || !(font === 'system'),\n },\n )}\n data-test-id={dataTestId}\n ref={mergeRefs([ref, textRef])}\n {...restProps}\n >\n {children}\n </Component>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;AA4FO,MAAM,SAAS,GAAG,UAAU,CAC/B,CACI,EACI,GAAG,EAAE,SAAS,GAAG,KAAK,EACtB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,SAAS,EAChB,QAAQ,EACR,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,QAAQ,CAAC,EACtE,cAAc,GAAG,KAAK,EACtB,KAAK,EACL,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,aAAa,EACb,YAAY,EACZ,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,WAAW,CAAC,YAAY,EAAE,aAAa,CAAC;IAE5E,MAAM,QAAQ,GAAG,cAAc,CAAC;QAC5B,gBAAgB,EAAE,EAAE,CAAC,cAAc,IAAI,MAAM,CAAC,CAAW,QAAA,EAAA,IAAI,CAAE,CAAA,CAAC,CAAC;QACjE,UAAU;AACb,KAAA,CAAC;IAEF,IAAI,QAAQ,EAAE;AACV,QAAA,OAAO,QAAQ;;IAGnB,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,EACN,EAAA,SAAS,EAAE,EAAE,CACT,YAAY,CAAC,SAAS,EACtB,MAAM,CAAC,SAAS,EAChB,SAAS,EACT,MAAM,CAAC,CAAG,EAAA,MAAM,KAAK,SAAS,GAAG,UAAU,GAAG,EAAE,CAAA,EAAG,IAAI,CAAE,CAAA,CAAC,EAC1D,cAAc,IAAI,MAAM,CAAC,CAAW,QAAA,EAAA,IAAI,CAAE,CAAA,CAAC,EAC3C,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,EACtB;YACI,CAAC,YAAY,CAAC,CAAW,QAAA,EAAA,QAAQ,EAAE,CAAC,GAAG,QAAQ;AAC/C,YAAA,CAAC,YAAY,CAAC,WAAW,GAAG,YAAY;YACxC,CAAC,MAAM,CAAC,IAAI,GACR,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,KAAK,EAAE,IAAI,KAAK,QAAQ,CAAC;AACrE,SAAA,CACJ,kBACa,UAAU,EACxB,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,EAC1B,GAAA,SAAS,IAEZ,QAAQ,CACD;AAEpB,CAAC;;;;"}
1
+ {"version":3,"file":"component.js","sources":["../../src/title/component.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type TextSkeletonProps, useSkeleton } from '@alfalab/core-components-skeleton';\n\nimport { type Color } from '../colors';\n\nimport colors from '../colors.module.css';\nimport commonStyles from './common.module.css';\n\ntype NativeProps = HTMLAttributes<HTMLHeadingElement>;\n\nexport type TitleProps = Omit<NativeProps, 'color'> & {\n /**\n * HTML тег\n */\n tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';\n\n /**\n * [Вариант начертания](?path=/docs/guidelines-typography--page)\n */\n view?: 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';\n\n /**\n * Цвет текста\n */\n color?: Color;\n\n /**\n * Толщина шрифта\n */\n weight?: 'regular' | 'medium' | 'bold' | 'semibold';\n\n /**\n * Шрифт текста\n */\n font?: 'styrene' | 'system';\n\n /**\n * Добавляет отступы\n */\n defaultMargins?: boolean;\n\n /**\n * Css-класс для стилизации (native prop)\n */\n className?: string;\n\n /**\n * Id компонента для тестов\n */\n dataTestId?: string;\n\n /**\n * Контент (native prop)\n */\n children?: React.ReactNode;\n\n /**\n * Количество строк\n */\n rowLimit?: 1 | 2 | 3;\n\n /**\n * Показать скелетон\n */\n showSkeleton?: boolean;\n\n /**\n * Пропы для скелетона\n */\n skeletonProps?: TextSkeletonProps;\n\n /**\n * Значение по-умолчанию для хука useMatchMedia\n */\n defaultMatchMediaValue?: boolean | (() => boolean);\n};\n\ntype PrivateProps = {\n styles: {\n [key: string]: string;\n };\n platform: 'mobile' | 'desktop';\n};\n\ntype TitleElementType = HTMLHeadingElement | HTMLDivElement;\n\nexport const TitleBase = forwardRef<TitleElementType, TitleProps & PrivateProps>(\n (\n {\n tag: Component = 'div',\n view = 'medium',\n font,\n platform,\n weight = 'bold',\n defaultMargins = false,\n color,\n className,\n dataTestId,\n children,\n rowLimit,\n styles,\n skeletonProps,\n showSkeleton,\n ...restProps\n },\n ref,\n ) => {\n const { renderSkeleton, textRef } = useSkeleton(showSkeleton, skeletonProps);\n\n const skeleton = renderSkeleton({\n wrapperClassName: cn(defaultMargins && styles[`margins-${view}`]),\n dataTestId,\n });\n\n if (skeleton) {\n return skeleton;\n }\n\n return (\n <Component\n className={cn(\n commonStyles.component,\n styles.component,\n className,\n styles[`${weight === 'regular' ? 'regular-' : ''}${view}`],\n defaultMargins && styles[`margins-${view}`],\n color && colors[color],\n {\n [commonStyles[`rowLimit${rowLimit}`]]: rowLimit,\n [commonStyles.transparent]: showSkeleton,\n },\n )}\n data-test-id={dataTestId}\n ref={mergeRefs([ref, textRef])}\n {...restProps}\n >\n {children}\n </Component>\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;AAyFa,MAAA,SAAS,GAAG,UAAU,CAC/B,CACI,EACI,GAAG,EAAE,SAAS,GAAG,KAAK,EACtB,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,MAAM,EACf,cAAc,GAAG,KAAK,EACtB,KAAK,EACL,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,aAAa,EACb,YAAY,EACZ,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,WAAW,CAAC,YAAY,EAAE,aAAa,CAAC;IAE5E,MAAM,QAAQ,GAAG,cAAc,CAAC;QAC5B,gBAAgB,EAAE,EAAE,CAAC,cAAc,IAAI,MAAM,CAAC,CAAW,QAAA,EAAA,IAAI,CAAE,CAAA,CAAC,CAAC;QACjE,UAAU;AACb,KAAA,CAAC;IAEF,IAAI,QAAQ,EAAE;AACV,QAAA,OAAO,QAAQ;;IAGnB,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,EACN,EAAA,SAAS,EAAE,EAAE,CACT,YAAY,CAAC,SAAS,EACtB,MAAM,CAAC,SAAS,EAChB,SAAS,EACT,MAAM,CAAC,CAAG,EAAA,MAAM,KAAK,SAAS,GAAG,UAAU,GAAG,EAAE,CAAA,EAAG,IAAI,CAAE,CAAA,CAAC,EAC1D,cAAc,IAAI,MAAM,CAAC,CAAW,QAAA,EAAA,IAAI,CAAE,CAAA,CAAC,EAC3C,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,EACtB;YACI,CAAC,YAAY,CAAC,CAAW,QAAA,EAAA,QAAQ,EAAE,CAAC,GAAG,QAAQ;AAC/C,YAAA,CAAC,YAAY,CAAC,WAAW,GAAG,YAAY;AAC3C,SAAA,CACJ,kBACa,UAAU,EACxB,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,EAC1B,GAAA,SAAS,IAEZ,QAAQ,CACD;AAEpB,CAAC;;;;"}
package/moderncssm/title/index.d.ts CHANGED
@@ -5,10 +5,7 @@ declare const Title: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<H
5
5
  view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
6
6
  color?: import("..").Color;
7
7
  weight?: "regular" | "medium" | "bold" | "semibold";
8
- font?: "styrene" | "system" | "alfasans" | {
9
- font: "alfasans";
10
- systemCompat: boolean;
11
- };
8
+ font?: "styrene" | "system";
12
9
  defaultMargins?: boolean;
13
10
  className?: string;
14
11
  dataTestId?: string;
package/moderncssm/title/index.module.css CHANGED
@@ -3,141 +3,82 @@
3
3
  font-size: 48px;
4
4
  line-height: 52px;
5
5
  font-weight: 700;
6
- font-family: var(--font-family-system);
6
+ letter-spacing: 0.1px;
7
+ font-family: var(--font-family-alfasans);
7
8
  }
8
9
 
9
- .xlarge.font {
10
- line-height: 64px;
11
- font-weight: 500;
12
- font-feature-settings: 'ss01';
13
- font-family: var(--font-family-styrene);
14
- }
15
-
16
10
  .regular-xlarge {
17
11
  font-size: 48px;
18
12
  line-height: 52px;
19
13
  font-weight: 400;
20
- font-family: var(--font-family-system);
14
+ letter-spacing: -2.1px;
15
+ font-family: var(--font-family-alfasans);
21
16
  }
22
17
 
23
- .regular-xlarge.font {
24
- line-height: 64px;
25
- font-feature-settings: 'ss01';
26
- font-family: var(--font-family-styrene);
27
- }
28
-
29
18
  .large {
30
19
  font-size: 40px;
31
20
  line-height: 48px;
32
21
  font-weight: 700;
33
- font-family: var(--font-family-system);
22
+ letter-spacing: 0.1px;
23
+ font-family: var(--font-family-alfasans);
34
24
  }
35
25
 
36
- .large.font {
37
- font-weight: 500;
38
- font-feature-settings: 'ss01';
39
- font-family: var(--font-family-styrene);
40
- }
41
-
42
26
  .regular-large {
43
27
  font-size: 40px;
44
28
  line-height: 48px;
45
29
  font-weight: 400;
46
- font-family: var(--font-family-system);
30
+ letter-spacing: -1.7px;
31
+ font-family: var(--font-family-alfasans);
47
32
  }
48
33
 
49
- .regular-large.font {
50
- font-feature-settings: 'ss01';
51
- font-family: var(--font-family-styrene);
52
- }
53
-
54
34
  .medium {
55
35
  font-size: 30px;
56
36
  line-height: 36px;
57
37
  font-weight: 700;
58
- font-family: var(--font-family-system);
38
+ letter-spacing: 0.1px;
39
+ font-family: var(--font-family-alfasans);
59
40
  }
60
41
 
61
- .medium.font {
62
- font-size: 32px;
63
- line-height: 40px;
64
- font-weight: 500;
65
- font-feature-settings: 'ss01';
66
- font-family: var(--font-family-styrene);
67
- }
68
-
69
42
  .regular-medium {
70
43
  font-size: 30px;
71
44
  line-height: 36px;
72
45
  font-weight: 400;
73
- font-family: var(--font-family-system);
46
+ letter-spacing: -1.25px;
47
+ font-family: var(--font-family-alfasans);
74
48
  }
75
49
 
76
- .regular-medium.font {
77
- font-size: 32px;
78
- line-height: 40px;
79
- font-feature-settings: 'ss01';
80
- font-family: var(--font-family-styrene);
81
- }
82
-
83
50
  .small {
84
51
  font-size: 22px;
85
52
  line-height: 26px;
86
53
  font-weight: 700;
87
- font-family: var(--font-family-system);
54
+ letter-spacing: 0.2px;
55
+ font-family: var(--font-family-alfasans);
88
56
  }
89
57
 
90
- .small.font {
91
- font-size: 24px;
92
- line-height: 32px;
93
- font-weight: 500;
94
- font-feature-settings: 'ss01';
95
- font-family: var(--font-family-styrene);
96
- }
97
-
98
58
  .regular-small {
99
59
  font-size: 22px;
100
60
  line-height: 26px;
101
61
  font-weight: 400;
102
- font-family: var(--font-family-system);
62
+ letter-spacing: -0.8px;
63
+ font-family: var(--font-family-alfasans);
103
64
  }
104
65
 
105
- .regular-small.font {
106
- font-size: 24px;
107
- line-height: 32px;
108
- font-feature-settings: 'ss01';
109
- font-family: var(--font-family-styrene);
110
- }
111
-
112
66
  .xsmall {
113
67
  font-size: 18px;
114
68
  line-height: 22px;
115
69
  font-weight: 700;
116
- font-family: var(--font-family-system);
70
+ letter-spacing: 0.38px;
71
+ font-family: var(--font-family-alfasans);
117
72
  }
118
73
 
119
- .xsmall.font {
120
- font-size: 20px;
121
- line-height: 24px;
122
- font-weight: 500;
123
- font-feature-settings: 'ss01';
124
- font-family: var(--font-family-styrene);
125
- }
126
-
127
74
  .regular-xsmall {
128
75
  font-size: 18px;
129
76
  line-height: 22px;
130
77
  font-weight: 400;
131
- font-family: var(--font-family-system);
78
+ letter-spacing: -0.36px;
79
+ font-family: var(--font-family-alfasans);
132
80
  }
133
81
 
134
- .regular-xsmall.font {
135
- font-size: 20px;
136
- line-height: 24px;
137
- font-feature-settings: 'ss01';
138
- font-family: var(--font-family-styrene);
139
- }
140
-
141
82
  .component.margins-xlarge {
142
83
  margin: var(--gap-0) var(--gap-0) var(--gap-24);
143
84
  }
package/moderncssm/title-mobile/component.d.ts CHANGED
@@ -4,10 +4,7 @@ export declare const TitleMobile: React.ForwardRefExoticComponent<Omit<React.HTM
4
4
  view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
5
5
  color?: import("..").Color;
6
6
  weight?: "regular" | "medium" | "bold" | "semibold";
7
- font?: "styrene" | "system" | "alfasans" | {
8
- font: "alfasans";
9
- systemCompat: boolean;
10
- };
7
+ font?: "styrene" | "system";
11
8
  defaultMargins?: boolean;
12
9
  className?: string;
13
10
  dataTestId?: string;