@ironsource/shared-ui 1.4.2 → 1.4.3-andyk.1

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 (35) hide show
  1. package/Dialog.vue_vue_type_style_index_0_scoped_true_lang.css +1 -1
  2. package/Editable.vue_vue_type_style_index_0_scoped_true_lang.css +1 -1
  3. package/README.md +36 -21
  4. package/Typography.vue_vue_type_style_index_0_scoped_true_lang.css +1 -0
  5. package/components/button/index.d.ts +6 -6
  6. package/components/dialog/Dialog.vue.js +2 -2
  7. package/components/emptyState/index.d.ts +3 -3
  8. package/components/icon/Icon.vue.js +1 -0
  9. package/components/icon/icons/Hammer.vue.d.ts +2 -0
  10. package/components/icon/icons/Hammer.vue.js +26 -0
  11. package/components/icon/icons/index.d.ts +3 -0
  12. package/components/icon/icons/index.vue.js +3 -0
  13. package/components/icon/index.d.ts +3 -0
  14. package/components/table-cells/Editable.vue.js +1 -1
  15. package/components/typography/v4/Typography.vue.d.ts +34 -0
  16. package/components/typography/v4/Typography.vue.js +68 -0
  17. package/components/typography/v4/index.d.ts +23 -0
  18. package/components/typography/v4/index.vue.js +6 -0
  19. package/design-foundation.stories/colors/ColorsData.d.ts +114 -0
  20. package/design-foundation.stories/colors/ColorsStoryWrapper.vue.d.ts +3 -0
  21. package/design-foundation.stories/colors/index.d.ts +1 -0
  22. package/design-foundation.stories/elevations/ElevationStoryWrapper.vue.d.ts +4 -0
  23. package/design-foundation.stories/elevations/ElevationsData.d.ts +10 -0
  24. package/design-foundation.stories/elevations/index.d.ts +1 -0
  25. package/design-foundation.stories/typography/TypographyData.d.ts +7 -0
  26. package/design-foundation.stories/typography/TypographyStoryWrapper.vue.d.ts +3 -0
  27. package/design-foundation.stories/typography/index.d.ts +1 -0
  28. package/index.d.ts +1 -0
  29. package/index.vue.js +3 -1
  30. package/package.json +8 -3
  31. package/styles/v4/colors.css +91 -0
  32. package/styles/v4/elevations.css +10 -0
  33. package/styles/v4/fonts.css +1 -0
  34. package/styles/v4/fonts.css.map +1 -0
  35. package/styles/v4/fonts.scss +258 -0
package/styles/v4/fonts.scss ADDED
@@ -0,0 +1,258 @@
1
+ /**
2
+ * Style v4 Typography
3
+ * -----------------------------------------------------------------------------
4
+ */
5
+
6
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
7
+
8
+ // font-family
9
+ $inter: 'Inter', sans-serif;
10
+
11
+ %font-bold {
12
+ font-family: $inter;
13
+ font-weight: 700;
14
+ }
15
+ %font-semibold {
16
+ font-family: $inter;
17
+ font-weight: 600;
18
+ }
19
+ %font-medium {
20
+ font-family: $inter;
21
+ font-weight: 500;
22
+ }
23
+ %font-regular {
24
+ font-family: $inter;
25
+ font-weight: 400;
26
+ }
27
+
28
+ // region heading
29
+ %font-title {
30
+ font-size: 2.5rem;
31
+ line-height: 3rem;
32
+ letter-spacing: -0.055rem;
33
+ @extend %font-semibold;
34
+ }
35
+ %font-heading-1 {
36
+ font-size: 1.5rem;
37
+ line-height: 1.75rem;
38
+ letter-spacing: -0.0285rem;
39
+ @extend %font-semibold;
40
+ }
41
+ %font-heading-2 {
42
+ font-size: 1.125rem;
43
+ line-height: 1.75rem;
44
+ letter-spacing: -0.01575rem;
45
+ @extend %font-semibold;
46
+ }
47
+ %font-heading-3 {
48
+ font-size: 1rem;
49
+ line-height: 1.5rem;
50
+ letter-spacing: -0.011rem;
51
+ @extend %font-semibold;
52
+ }
53
+ %font-heading-4 {
54
+ font-size: 0.875rem;
55
+ line-height: 1rem;
56
+ letter-spacing: unset;
57
+ @extend %font-semibold;
58
+ }
59
+ %font-heading-5 {
60
+ font-size: 0.8125rem;
61
+ line-height: 16px;
62
+ letter-spacing: unset;
63
+ @extend %font-semibold;
64
+ }
65
+ %font-heading-6 {
66
+ font-size: 0.75rem;
67
+ line-height: 0.75rem;
68
+ letter-spacing: 0;
69
+ @extend %font-semibold;
70
+ }
71
+ // endregion
72
+
73
+ // region body
74
+ %font-body-1 {
75
+ font-size: 0.875rem;
76
+ line-height: 1.25rem;
77
+ letter-spacing: -0.00525rem;
78
+ @extend %font-regular;
79
+ }
80
+ %font-body-2 {
81
+ font-size: 0.8125rem;
82
+ line-height: 1.25rem;
83
+ letter-spacing: -0.00244rem;
84
+ @extend %font-regular;
85
+ }
86
+ // endregion
87
+
88
+ // region subtitle
89
+ %font-subtitle-1 {
90
+ font-size: 0.875rem;
91
+ line-height: 1.25rem;
92
+ letter-spacing: -0.00525rem;
93
+ @extend %font-medium;
94
+ }
95
+ %font-subtitle-2 {
96
+ font-size: 0.8125rem;
97
+ line-height: 1.25rem;
98
+ letter-spacing: -0.00244rem;
99
+ @extend %font-medium;
100
+ }
101
+ // endregion
102
+
103
+ // region chart
104
+ %font-chart-1 {
105
+ font-size: 1.5rem;
106
+ line-height: 1.5rem;
107
+ letter-spacing: -0.015rem;
108
+ @extend %font-bold;
109
+ }
110
+ %font-chart-2 {
111
+ font-size: 1.25rem;
112
+ line-height: 1.25rem;
113
+ letter-spacing: -0.0125rem;
114
+ @extend %font-bold;
115
+ }
116
+ // endregion
117
+
118
+
119
+ // region other
120
+ %font-button {
121
+ font-size: 0.875rem;
122
+ line-height: 1.25rem;
123
+ letter-spacing: 0.00875rem;
124
+ @extend %font-semibold;
125
+ }
126
+ %font-overline {
127
+ font-size: 0.75rem;
128
+ line-height: 1rem;
129
+ letter-spacing: 0.045rem;
130
+ text-transform: uppercase;
131
+ @extend %font-medium;
132
+ }
133
+ %font-caption {
134
+ font-size: 0.75rem;
135
+ line-height: 1rem;
136
+ @extend %font-regular;
137
+ }
138
+ %font-table-label {
139
+ font-size: 0.8125rem;
140
+ line-height: 1.25rem;
141
+ letter-spacing: 0.00813rem;
142
+ @extend %font-semibold;
143
+ }
144
+ %font-input-label {
145
+ font-size: 0.8125rem;
146
+ line-height: 1rem;
147
+ letter-spacing: 0.00813rem;
148
+ @extend %font-medium;
149
+ }
150
+ %font-tab-label1 {
151
+ font-size: 0.875rem;
152
+ line-height: 1rem;
153
+ @extend %font-medium;
154
+ }
155
+ %font-tab-label2 {
156
+ font-size: 0.875rem;
157
+ line-height: 1rem;
158
+ @extend %font-bold;
159
+ }
160
+ %font-chip-label {
161
+ font-size: 0.75rem;
162
+ line-height: 1rem;
163
+ @extend %font-semibold;
164
+ }
165
+ // endregion
166
+
167
+ h1,
168
+ h2,
169
+ h3,
170
+ h4,
171
+ h5,
172
+ h6 {
173
+ margin: 0;
174
+ }
175
+
176
+ .font-title {
177
+ @extend %font-title;
178
+ }
179
+
180
+ .font-heading-1 {
181
+ @extend %font-heading-1;
182
+ }
183
+
184
+ .font-heading-2 {
185
+ @extend %font-heading-2;
186
+ }
187
+
188
+ .font-heading-3 {
189
+ @extend %font-heading-3;
190
+ }
191
+
192
+ .font-heading-4 {
193
+ @extend %font-heading-4;
194
+ }
195
+
196
+ .font-heading-5 {
197
+ @extend %font-heading-5;
198
+ }
199
+
200
+ .font-heading-6 {
201
+ @extend %font-heading-6;
202
+ }
203
+
204
+ .font-body-1 {
205
+ @extend %font-body-1;
206
+ }
207
+
208
+ .font-body-2 {
209
+ @extend %font-body-2;
210
+ }
211
+
212
+ .font-subtitle-1 {
213
+ @extend %font-subtitle-1;
214
+ }
215
+
216
+ .font-subtitle-2 {
217
+ @extend %font-subtitle-2;
218
+ }
219
+
220
+ .font-chart-1 {
221
+ @extend %font-chart-1;
222
+ }
223
+
224
+ .font-chart-2 {
225
+ @extend %font-chart-2;
226
+ }
227
+
228
+ .font-button {
229
+ @extend %font-button;
230
+ }
231
+
232
+ .font-overline {
233
+ @extend %font-overline;
234
+ }
235
+
236
+ .font-caption {
237
+ @extend %font-caption;
238
+ }
239
+
240
+ .font-table-label {
241
+ @extend %font-table-label;
242
+ }
243
+
244
+ .font-input-label {
245
+ @extend %font-input-label;
246
+ }
247
+
248
+ .font-tab-label1 {
249
+ @extend %font-tab-label1;
250
+ }
251
+
252
+ .font-tab-label2 {
253
+ @extend %font-tab-label2;
254
+ }
255
+
256
+ .font-chip-label {
257
+ @extend %font-chip-label;
258
+ }