@alfalab/core-components-typography 6.0.6-alfasans → 6.0.6

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 +13 -40
  4. package/cssm/title/component.d.ts +8 -2
  5. package/cssm/title/component.js +6 -3
  6. package/cssm/title/component.js.map +1 -1
  7. package/cssm/title/index.d.ts +4 -1
  8. package/cssm/title/index.module.css +74 -23
  9. package/cssm/title/utils.d.ts +1 -0
  10. package/cssm/title/utils.js +16 -0
  11. package/cssm/title/utils.js.map +1 -0
  12. package/cssm/title-mobile/component.d.ts +4 -1
  13. package/cssm/title-mobile/index.module.css +45 -28
  14. package/cssm/title-responsive/component.d.ts +4 -1
  15. package/esm/colors.css +20 -20
  16. package/esm/colors.module.css.js +1 -1
  17. package/esm/text/index.css +53 -80
  18. package/esm/text/index.module.css.js +1 -1
  19. package/esm/title/common.css +5 -5
  20. package/esm/title/common.module.css.js +1 -1
  21. package/esm/title/component.d.ts +8 -2
  22. package/esm/title/component.js +5 -2
  23. package/esm/title/component.js.map +1 -1
  24. package/esm/title/index.css +89 -38
  25. package/esm/title/index.d.ts +4 -1
  26. package/esm/title/index.module.css.js +1 -1
  27. package/esm/title/index.module.css.js.map +1 -1
  28. package/esm/title/utils.d.ts +1 -0
  29. package/esm/title/utils.js +12 -0
  30. package/esm/title/utils.js.map +1 -0
  31. package/esm/title-mobile/component.d.ts +4 -1
  32. package/esm/title-mobile/index.css +70 -53
  33. package/esm/title-mobile/index.module.css.js +1 -1
  34. package/esm/title-responsive/component.d.ts +4 -1
  35. package/modern/colors.css +20 -20
  36. package/modern/colors.module.css.js +1 -1
  37. package/modern/text/index.css +53 -80
  38. package/modern/text/index.module.css.js +1 -1
  39. package/modern/title/common.css +5 -5
  40. package/modern/title/common.module.css.js +1 -1
  41. package/modern/title/component.d.ts +8 -2
  42. package/modern/title/component.js +4 -1
  43. package/modern/title/component.js.map +1 -1
  44. package/modern/title/index.css +89 -38
  45. package/modern/title/index.d.ts +4 -1
  46. package/modern/title/index.module.css.js +1 -1
  47. package/modern/title/index.module.css.js.map +1 -1
  48. package/modern/title/utils.d.ts +1 -0
  49. package/modern/title/utils.js +12 -0
  50. package/modern/title/utils.js.map +1 -0
  51. package/modern/title-mobile/component.d.ts +4 -1
  52. package/modern/title-mobile/index.css +70 -53
  53. package/modern/title-mobile/index.module.css.js +1 -1
  54. package/modern/title-responsive/component.d.ts +4 -1
  55. package/moderncssm/text/index.module.css +11 -37
  56. package/moderncssm/title/component.d.ts +8 -2
  57. package/moderncssm/title/component.js +4 -1
  58. package/moderncssm/title/component.js.map +1 -1
  59. package/moderncssm/title/index.d.ts +4 -1
  60. package/moderncssm/title/index.module.css +79 -20
  61. package/moderncssm/title/utils.d.ts +1 -0
  62. package/moderncssm/title/utils.js +12 -0
  63. package/moderncssm/title/utils.js.map +1 -0
  64. package/moderncssm/title-mobile/component.d.ts +4 -1
  65. package/moderncssm/title-mobile/index.module.css +40 -25
  66. package/moderncssm/title-responsive/component.d.ts +4 -1
  67. package/package.json +6 -6
  68. package/src/title/component.tsx +8 -3
  69. package/src/title/index.module.css +8 -0
  70. package/src/title/utils.ts +14 -0
  71. package/text/index.css +53 -80
  72. package/text/index.module.css.js +1 -1
  73. package/title/common.css +5 -5
  74. package/title/common.module.css.js +1 -1
  75. package/title/component.d.ts +8 -2
  76. package/title/component.js +5 -2
  77. package/title/component.js.map +1 -1
  78. package/title/index.css +89 -38
  79. package/title/index.d.ts +4 -1
  80. package/title/index.module.css.js +1 -1
  81. package/title/index.module.css.js.map +1 -1
  82. package/title/utils.d.ts +1 -0
  83. package/title/utils.js +16 -0
  84. package/title/utils.js.map +1 -0
  85. package/title-mobile/component.d.ts +4 -1
  86. package/title-mobile/index.css +70 -53
  87. package/title-mobile/index.module.css.js +1 -1
  88. package/title-responsive/component.d.ts +4 -1
package/modern/title-mobile/index.css CHANGED
@@ -8,112 +8,129 @@
8
8
  --gap-40: var(--gap-3xl);
9
9
  }
10
10
  :root {
11
- --font-family-alfasans:
12
- 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
13
- Helvetica, sans-serif;
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;
14
16
  }
15
- .typography__xlarge_jyyka {
17
+ .typography__xlarge_1mm8v {
16
18
  font-size: 34px;
17
19
  line-height: 40px;
18
- font-weight: 500;
19
- letter-spacing: -0.32px;
20
- font-family: var(--font-family-alfasans);
20
+ font-weight: 600;
21
+ font-family: var(--font-family-system);
21
22
  }
22
- .typography__xlarge_jyyka.typography__font_jyyka {
23
+ .typography__xlarge_1mm8v.typography__font_1mm8v {
24
+ font-weight: 500;
25
+ font-feature-settings: 'ss01';
26
+ font-family: var(--font-family-styrene);
23
27
  }
24
- .typography__regular-xlarge_jyyka {
28
+ .typography__regular-xlarge_1mm8v {
25
29
  font-size: 34px;
26
30
  line-height: 40px;
27
31
  font-weight: 400;
28
- letter-spacing: -1.36px;
29
- font-family: var(--font-family-alfasans);
32
+ font-family: var(--font-family-system);
30
33
  }
31
- .typography__regular-xlarge_jyyka.typography__system_jyyka {
34
+ .typography__regular-xlarge_1mm8v.typography__system_1mm8v {
35
+ font-feature-settings: 'ss01';
36
+ font-family: var(--font-family-styrene);
32
37
  }
33
- .typography__large_jyyka {
38
+ .typography__large_1mm8v {
34
39
  font-size: 30px;
35
40
  line-height: 36px;
36
- font-weight: 500;
37
- letter-spacing: -0.25px;
38
- font-family: var(--font-family-alfasans);
41
+ font-weight: 600;
42
+ font-family: var(--font-family-system);
39
43
  }
40
- .typography__large_jyyka.typography__font_jyyka {
44
+ .typography__large_1mm8v.typography__font_1mm8v {
45
+ font-weight: 500;
46
+ font-feature-settings: 'ss01';
47
+ font-family: var(--font-family-styrene);
41
48
  }
42
- .typography__regular-large_jyyka {
49
+ .typography__regular-large_1mm8v {
43
50
  font-size: 30px;
44
51
  line-height: 36px;
45
52
  font-weight: 400;
46
- letter-spacing: -1.25px;
47
- font-family: var(--font-family-alfasans);
53
+ font-family: var(--font-family-system);
48
54
  }
49
- .typography__regular-large_jyyka.typography__system_jyyka {
55
+ .typography__regular-large_1mm8v.typography__system_1mm8v {
56
+ font-feature-settings: 'ss01';
57
+ font-family: var(--font-family-styrene);
50
58
  }
51
- .typography__medium_jyyka {
59
+ .typography__medium_1mm8v {
52
60
  font-size: 26px;
53
61
  line-height: 32px;
54
- font-weight: 500;
55
- letter-spacing: -0.25px;
56
- font-family: var(--font-family-alfasans);
62
+ font-weight: 600;
63
+ font-family: var(--font-family-system);
57
64
  }
58
- .typography__medium_jyyka.typography__font_jyyka {
65
+ .typography__medium_1mm8v.typography__font_1mm8v {
66
+ font-weight: 500;
67
+ font-feature-settings: 'ss01';
68
+ font-family: var(--font-family-styrene);
59
69
  }
60
- .typography__regular-medium_jyyka {
70
+ .typography__regular-medium_1mm8v {
61
71
  font-size: 26px;
62
72
  line-height: 32px;
63
73
  font-weight: 400;
64
- letter-spacing: -1px;
65
- font-family: var(--font-family-alfasans);
74
+ font-family: var(--font-family-system);
66
75
  }
67
- .typography__regular-medium_jyyka.typography__system_jyyka {
76
+ .typography__regular-medium_1mm8v.typography__system_1mm8v {
77
+ font-feature-settings: 'ss01';
78
+ font-family: var(--font-family-styrene);
68
79
  }
69
- .typography__small_jyyka {
80
+ .typography__small_1mm8v {
70
81
  font-size: 20px;
71
82
  line-height: 28px;
72
- font-weight: 500;
73
- letter-spacing: -0.15px;
74
- font-family: var(--font-family-alfasans);
83
+ font-weight: 600;
84
+ font-family: var(--font-family-system);
75
85
  }
76
- .typography__small_jyyka.typography__font_jyyka {
86
+ .typography__small_1mm8v.typography__font_1mm8v {
87
+ font-weight: 500;
88
+ font-feature-settings: 'ss01';
89
+ font-family: var(--font-family-styrene);
77
90
  }
78
- .typography__regular-small_jyyka {
91
+ .typography__regular-small_1mm8v {
79
92
  font-size: 20px;
80
93
  line-height: 28px;
81
94
  font-weight: 400;
82
- letter-spacing: -0.68px;
83
- font-family: var(--font-family-alfasans);
95
+ font-family: var(--font-family-system);
84
96
  }
85
- .typography__regular-small_jyyka.typography__system_jyyka {
97
+ .typography__regular-small_1mm8v.typography__system_1mm8v {
98
+ font-feature-settings: 'ss01';
99
+ font-family: var(--font-family-styrene);
86
100
  }
87
- .typography__xsmall_jyyka {
101
+ .typography__xsmall_1mm8v {
88
102
  font-size: 16px;
89
103
  line-height: 20px;
90
- font-weight: 500;
91
- letter-spacing: 0.17px;
92
- font-family: var(--font-family-alfasans);
104
+ font-weight: 600;
105
+ font-family: var(--font-family-system);
93
106
  }
94
- .typography__xsmall_jyyka.typography__font_jyyka {
107
+ .typography__xsmall_1mm8v.typography__font_1mm8v {
108
+ font-weight: 500;
109
+ font-feature-settings: 'ss01';
110
+ font-family: var(--font-family-styrene);
95
111
  }
96
- .typography__regular-xsmall_jyyka {
112
+ .typography__regular-xsmall_1mm8v {
97
113
  font-size: 16px;
98
114
  line-height: 20px;
99
115
  font-weight: 400;
100
- letter-spacing: -0.24px;
101
- font-family: var(--font-family-alfasans);
116
+ font-family: var(--font-family-system);
102
117
  }
103
- .typography__regular-xsmall_jyyka.typography__system_jyyka {
118
+ .typography__regular-xsmall_1mm8v.typography__system_1mm8v {
119
+ font-feature-settings: 'ss01';
120
+ font-family: var(--font-family-styrene);
104
121
  }
105
- .typography__component_jyyka.typography__margins-xlarge_jyyka {
122
+ .typography__component_1mm8v.typography__margins-xlarge_1mm8v {
106
123
  margin: var(--gap-0) var(--gap-0) var(--gap-24);
107
124
  }
108
- .typography__component_jyyka.typography__margins-large_jyyka {
125
+ .typography__component_1mm8v.typography__margins-large_1mm8v {
109
126
  margin: var(--gap-40) var(--gap-0) var(--gap-16);
110
127
  }
111
- .typography__component_jyyka.typography__margins-medium_jyyka {
128
+ .typography__component_1mm8v.typography__margins-medium_1mm8v {
112
129
  margin: var(--gap-40) var(--gap-0) var(--gap-16);
113
130
  }
114
- .typography__component_jyyka.typography__margins-small_jyyka {
131
+ .typography__component_1mm8v.typography__margins-small_1mm8v {
115
132
  margin: var(--gap-40) var(--gap-0) var(--gap-16);
116
133
  }
117
- .typography__component_jyyka .typography__margins-xsmall_jyyka {
134
+ .typography__component_1mm8v .typography__margins-xsmall_1mm8v {
118
135
  margin: var(--gap-40) var(--gap-0) var(--gap-16);
119
136
  }
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_jyyka","font":"typography__font_jyyka","regular-xlarge":"typography__regular-xlarge_jyyka","system":"typography__system_jyyka","large":"typography__large_jyyka","regular-large":"typography__regular-large_jyyka","medium":"typography__medium_jyyka","regular-medium":"typography__regular-medium_jyyka","small":"typography__small_jyyka","regular-small":"typography__regular-small_jyyka","xsmall":"typography__xsmall_jyyka","regular-xsmall":"typography__regular-xsmall_jyyka","component":"typography__component_jyyka","margins-xlarge":"typography__margins-xlarge_jyyka","margins-large":"typography__margins-large_jyyka","margins-medium":"typography__margins-medium_jyyka","margins-small":"typography__margins-small_jyyka","margins-xsmall":"typography__margins-xsmall_jyyka"};
3
+ const styles = {"xlarge":"typography__xlarge_1mm8v","font":"typography__font_1mm8v","regular-xlarge":"typography__regular-xlarge_1mm8v","system":"typography__system_1mm8v","large":"typography__large_1mm8v","regular-large":"typography__regular-large_1mm8v","medium":"typography__medium_1mm8v","regular-medium":"typography__regular-medium_1mm8v","small":"typography__small_1mm8v","regular-small":"typography__regular-small_1mm8v","xsmall":"typography__xsmall_1mm8v","regular-xsmall":"typography__regular-xsmall_1mm8v","component":"typography__component_1mm8v","margins-xlarge":"typography__margins-xlarge_1mm8v","margins-large":"typography__margins-large_1mm8v","margins-medium":"typography__margins-medium_1mm8v","margins-small":"typography__margins-small_1mm8v","margins-xsmall":"typography__margins-xsmall_1mm8v"};
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,7 +16,10 @@ 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";
19
+ font?: "styrene" | "system" | "alfasans" | {
20
+ font: "alfasans";
21
+ systemCompat: boolean;
22
+ };
20
23
  defaultMargins?: boolean;
21
24
  className?: string;
22
25
  dataTestId?: string;
package/moderncssm/text/index.module.css CHANGED
@@ -20,18 +20,15 @@
20
20
  font-size: 16px;
21
21
  line-height: 20px;
22
22
  font-weight: 400;
23
- letter-spacing: -0.24px;
24
- font-family: var(--font-family-alfasans);
23
+ font-family: var(--font-family-system);
25
24
  }
26
25
 
27
26
  .component.bold {
28
27
  font-weight: 700;
29
- letter-spacing: 0.43px;
30
28
  }
31
29
 
32
30
  .component.medium {
33
31
  font-weight: 500;
34
- letter-spacing: -0.05px;
35
32
  }
36
33
 
37
34
  .caps {
@@ -40,7 +37,7 @@
40
37
  font-weight: 400;
41
38
  letter-spacing: 1.25px;
42
39
  text-transform: uppercase;
43
- font-family: var(--font-family-alfasans);
40
+ font-family: var(--font-family-system);
44
41
  }
45
42
 
46
43
  .caps.bold {
@@ -57,7 +54,7 @@
57
54
  font-weight: 400;
58
55
  letter-spacing: 1.25px;
59
56
  text-transform: uppercase;
60
- font-family: var(--font-family-alfasans);
57
+ font-family: var(--font-family-system);
61
58
  }
62
59
 
63
60
  .tagline.bold {
@@ -72,143 +69,120 @@
72
69
  font-size: 18px;
73
70
  line-height: 24px;
74
71
  font-weight: 400;
75
- letter-spacing: -0.36px;
76
- font-family: var(--font-family-alfasans);
72
+ font-family: var(--font-family-system);
77
73
  }
78
74
 
79
75
  .primary-large.bold {
80
76
  font-weight: 700;
81
- letter-spacing: 0.38px;
82
77
  }
83
78
 
84
79
  .primary-large.medium {
85
80
  font-weight: 500;
86
- letter-spacing: -0.17px;
87
81
  }
88
82
 
89
83
  .primary-medium {
90
84
  font-size: 16px;
91
85
  line-height: 24px;
92
86
  font-weight: 400;
93
- letter-spacing: -0.24px;
94
- font-family: var(--font-family-alfasans);
87
+ font-family: var(--font-family-system);
95
88
  }
96
89
 
97
90
  .primary-medium.bold {
98
91
  font-weight: 700;
99
- letter-spacing: 0.43px;
100
92
  }
101
93
 
102
94
  .primary-medium.medium {
103
95
  font-weight: 500;
104
- letter-spacing: -0.05px;
105
96
  }
106
97
 
107
98
  .primary-small {
108
99
  font-size: 14px;
109
100
  line-height: 20px;
110
101
  font-weight: 400;
111
- letter-spacing: -0.08px;
112
- font-family: var(--font-family-alfasans);
102
+ font-family: var(--font-family-system);
113
103
  }
114
104
 
115
105
  .primary-small.bold {
116
106
  font-weight: 700;
117
- letter-spacing: 0.47px;
118
107
  }
119
108
 
120
109
  .primary-small.medium {
121
110
  font-weight: 500;
122
- letter-spacing: 0.07px;
123
111
  }
124
112
 
125
113
  .component-primary {
126
114
  font-size: 16px;
127
115
  line-height: 20px;
128
116
  font-weight: 400;
129
- letter-spacing: -0.24px;
130
- font-family: var(--font-family-alfasans);
117
+ font-family: var(--font-family-system);
131
118
  }
132
119
 
133
120
  .component-primary.bold {
134
121
  font-weight: 700;
135
- letter-spacing: 0.43px;
136
122
  }
137
123
 
138
124
  .component-primary.medium {
139
125
  font-weight: 500;
140
- letter-spacing: -0.05px;
141
126
  }
142
127
 
143
128
  .secondary-large {
144
129
  font-size: 13px;
145
130
  line-height: 16px;
146
131
  font-weight: 400;
147
- font-family: var(--font-family-alfasans);
132
+ font-family: var(--font-family-system);
148
133
  }
149
134
 
150
135
  .secondary-large.bold {
151
136
  font-weight: 700;
152
- letter-spacing: 0.54px;
153
137
  }
154
138
 
155
139
  .secondary-large.medium {
156
140
  font-weight: 500;
157
- letter-spacing: 0.13px;
158
141
  }
159
142
 
160
143
  .secondary-medium {
161
144
  font-size: 12px;
162
145
  line-height: 16px;
163
146
  font-weight: 400;
164
- letter-spacing: 0.06px;
165
- font-family: var(--font-family-alfasans);
147
+ font-family: var(--font-family-system);
166
148
  }
167
149
 
168
150
  .secondary-medium.bold {
169
151
  font-weight: 700;
170
- letter-spacing: 0.57px;
171
152
  }
172
153
 
173
154
  .secondary-medium.medium {
174
155
  font-weight: 500;
175
- letter-spacing: 0.19px;
176
156
  }
177
157
 
178
158
  .secondary-small {
179
159
  font-size: 11px;
180
160
  line-height: 16px;
181
161
  font-weight: 400;
182
- letter-spacing: 0.15px;
183
- font-family: var(--font-family-alfasans);
162
+ font-family: var(--font-family-system);
184
163
  }
185
164
 
186
165
  .secondary-small.bold {
187
166
  font-weight: 700;
188
- letter-spacing: 0.54px;
189
167
  }
190
168
 
191
169
  .secondary-small.medium {
192
170
  font-weight: 500;
193
- letter-spacing: 0.24px;
194
171
  }
195
172
 
196
173
  .component-secondary {
197
174
  font-size: 14px;
198
175
  line-height: 18px;
199
176
  font-weight: 400;
200
- letter-spacing: -0.08px;
201
- font-family: var(--font-family-alfasans);
177
+ font-family: var(--font-family-system);
202
178
  }
203
179
 
204
180
  .component-secondary.bold {
205
181
  font-weight: 700;
206
- letter-spacing: 0.47px;
207
182
  }
208
183
 
209
184
  .component-secondary.medium {
210
185
  font-weight: 500;
211
- letter-spacing: 0.07px;
212
186
  }
213
187
 
214
188
  .rowLimit1 {
package/moderncssm/title/component.d.ts CHANGED
@@ -24,7 +24,10 @@ export type TitleProps = Omit<NativeProps, 'color'> & {
24
24
  *
25
25
  * @deprecated
26
26
  */
27
- font?: 'styrene' | 'system';
27
+ font?: 'styrene' | 'system' | 'alfasans' | {
28
+ font: 'alfasans';
29
+ systemCompat: boolean;
30
+ };
28
31
  /**
29
32
  * Добавляет отступы
30
33
  */
@@ -87,7 +90,10 @@ export declare const TitleBase: React.ForwardRefExoticComponent<Omit<NativeProps
87
90
  *
88
91
  * @deprecated
89
92
  */
90
- font?: "styrene" | "system";
93
+ font?: "styrene" | "system" | "alfasans" | {
94
+ font: "alfasans";
95
+ systemCompat: boolean;
96
+ };
91
97
  /**
92
98
  * Добавляет отступы
93
99
  */
package/moderncssm/title/component.js CHANGED
@@ -1,11 +1,13 @@
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';
4
5
  import { useSkeleton } from '@alfalab/core-components-skeleton/moderncssm';
6
+ import { getDefaultWeight } from './utils.js';
5
7
  import colors from '../colors.module.css';
6
8
  import commonStyles from './common.module.css';
7
9
 
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) => {
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) => {
9
11
  const { renderSkeleton, textRef } = useSkeleton(showSkeleton, skeletonProps);
10
12
  const skeleton = renderSkeleton({
11
13
  wrapperClassName: cn(defaultMargins && styles[`margins-${view}`]),
@@ -17,6 +19,7 @@ const TitleBase = forwardRef(({ tag: Component = 'div', view = 'medium', font, p
17
19
  return (React.createElement(Component, { className: cn(commonStyles.component, styles.component, className, styles[`${weight === 'regular' ? 'regular-' : ''}${view}`], defaultMargins && styles[`margins-${view}`], color && colors[color], {
18
20
  [commonStyles[`rowLimit${rowLimit}`]]: rowLimit,
19
21
  [commonStyles.transparent]: showSkeleton,
22
+ [styles.font]: (isObject(font) && !font.systemCompat) || !(font === 'system'),
20
23
  }), "data-test-id": dataTestId, ref: mergeRefs([ref, textRef]), ...restProps }, children));
21
24
  });
22
25
 
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 { 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 * @deprecated\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":";;;;;;;AA2Fa,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;;;;"}
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 * @deprecated\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":";;;;;;;;;AA8FO,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;;;;"}
package/moderncssm/title/index.d.ts CHANGED
@@ -5,7 +5,10 @@ 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";
8
+ font?: "styrene" | "system" | "alfasans" | {
9
+ font: "alfasans";
10
+ systemCompat: boolean;
11
+ };
9
12
  defaultMargins?: boolean;
10
13
  className?: string;
11
14
  dataTestId?: string;
package/moderncssm/title/index.module.css CHANGED
@@ -3,82 +3,141 @@
3
3
  font-size: 48px;
4
4
  line-height: 52px;
5
5
  font-weight: 700;
6
- letter-spacing: 0.1px;
7
- font-family: var(--font-family-alfasans);
6
+ font-family: var(--font-family-system);
8
7
  }
9
8
 
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
+
10
16
  .regular-xlarge {
11
17
  font-size: 48px;
12
18
  line-height: 52px;
13
19
  font-weight: 400;
14
- letter-spacing: -2.1px;
15
- font-family: var(--font-family-alfasans);
20
+ font-family: var(--font-family-system);
16
21
  }
17
22
 
23
+ .regular-xlarge.font {
24
+ line-height: 64px;
25
+ font-feature-settings: 'ss01';
26
+ font-family: var(--font-family-styrene);
27
+ }
28
+
18
29
  .large {
19
30
  font-size: 40px;
20
31
  line-height: 48px;
21
32
  font-weight: 700;
22
- letter-spacing: 0.1px;
23
- font-family: var(--font-family-alfasans);
33
+ font-family: var(--font-family-system);
24
34
  }
25
35
 
36
+ .large.font {
37
+ font-weight: 500;
38
+ font-feature-settings: 'ss01';
39
+ font-family: var(--font-family-styrene);
40
+ }
41
+
26
42
  .regular-large {
27
43
  font-size: 40px;
28
44
  line-height: 48px;
29
45
  font-weight: 400;
30
- letter-spacing: -1.7px;
31
- font-family: var(--font-family-alfasans);
46
+ font-family: var(--font-family-system);
32
47
  }
33
48
 
49
+ .regular-large.font {
50
+ font-feature-settings: 'ss01';
51
+ font-family: var(--font-family-styrene);
52
+ }
53
+
34
54
  .medium {
35
55
  font-size: 30px;
36
56
  line-height: 36px;
37
57
  font-weight: 700;
38
- letter-spacing: 0.1px;
39
- font-family: var(--font-family-alfasans);
58
+ font-family: var(--font-family-system);
40
59
  }
41
60
 
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
+
42
69
  .regular-medium {
43
70
  font-size: 30px;
44
71
  line-height: 36px;
45
72
  font-weight: 400;
46
- letter-spacing: -1.25px;
47
- font-family: var(--font-family-alfasans);
73
+ font-family: var(--font-family-system);
48
74
  }
49
75
 
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
+
50
83
  .small {
51
84
  font-size: 22px;
52
85
  line-height: 26px;
53
86
  font-weight: 700;
54
- letter-spacing: 0.2px;
55
- font-family: var(--font-family-alfasans);
87
+ font-family: var(--font-family-system);
56
88
  }
57
89
 
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
+
58
98
  .regular-small {
59
99
  font-size: 22px;
60
100
  line-height: 26px;
61
101
  font-weight: 400;
62
- letter-spacing: -0.8px;
63
- font-family: var(--font-family-alfasans);
102
+ font-family: var(--font-family-system);
64
103
  }
65
104
 
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
+
66
112
  .xsmall {
67
113
  font-size: 18px;
68
114
  line-height: 22px;
69
115
  font-weight: 700;
70
- letter-spacing: 0.38px;
71
- font-family: var(--font-family-alfasans);
116
+ font-family: var(--font-family-system);
72
117
  }
73
118
 
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
+
74
127
  .regular-xsmall {
75
128
  font-size: 18px;
76
129
  line-height: 22px;
77
130
  font-weight: 400;
78
- letter-spacing: -0.36px;
79
- font-family: var(--font-family-alfasans);
131
+ font-family: var(--font-family-system);
80
132
  }
81
133
 
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
+
82
141
  .component.margins-xlarge {
83
142
  margin: var(--gap-0) var(--gap-0) var(--gap-24);
84
143
  }
package/moderncssm/title/utils.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function getDefaultWeight(font: 'styrene' | 'system' | 'alfasans', platform: 'mobile' | 'desktop'): "medium" | "bold" | "semibold";
package/moderncssm/title/utils.js ADDED
@@ -0,0 +1,12 @@
1
+ function getDefaultWeight(font, platform) {
2
+ if (font === 'styrene' || font === 'alfasans') {
3
+ return 'medium';
4
+ }
5
+ if (platform === 'desktop') {
6
+ return 'bold';
7
+ }
8
+ return 'semibold';
9
+ }
10
+
11
+ export { getDefaultWeight };
12
+ //# sourceMappingURL=utils.js.map
package/moderncssm/title/utils.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sources":["../../src/title/utils.ts"],"sourcesContent":["export function getDefaultWeight(\n font: 'styrene' | 'system' | 'alfasans',\n platform: 'mobile' | 'desktop',\n) {\n if (font === 'styrene' || font === 'alfasans') {\n return 'medium';\n }\n\n if (platform === 'desktop') {\n return 'bold';\n }\n\n return 'semibold';\n}\n"],"names":[],"mappings":"AAAgB,SAAA,gBAAgB,CAC5B,IAAuC,EACvC,QAA8B,EAAA;IAE9B,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,UAAU,EAAE;AAC3C,QAAA,OAAO,QAAQ;;AAGnB,IAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;AACxB,QAAA,OAAO,MAAM;;AAGjB,IAAA,OAAO,UAAU;AACrB;;;;"}