@carbon/styles 1.69.0 → 1.70.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.
- package/css/styles.css +693 -111
- package/css/styles.min.css +1 -1
- package/package.json +10 -2
- package/scss/__tests__/__snapshots__/config-test.js.snap +1 -0
- package/scss/_config.scss +6 -0
- package/scss/_reset.scss +1 -0
- package/scss/components/checkbox/_checkbox.scss +39 -2
- package/scss/components/data-table/_data-table.scss +8 -1
- package/scss/components/data-table/sort/_data-table-sort.scss +2 -2
- package/scss/components/date-picker/_date-picker.scss +30 -2
- package/scss/components/dropdown/_dropdown.scss +4 -0
- package/scss/components/fluid-date-picker/_fluid-date-picker.scss +19 -3
- package/scss/components/fluid-list-box/_fluid-list-box.scss +93 -2
- package/scss/components/fluid-number-input/_fluid-number-input.scss +40 -2
- package/scss/components/fluid-select/_fluid-select.scss +6 -2
- package/scss/components/fluid-text-area/_fluid-text-area.scss +37 -3
- package/scss/components/fluid-text-input/_fluid-text-input.scss +31 -1
- package/scss/components/fluid-time-picker/_fluid-time-picker.scss +6 -0
- package/scss/components/list-box/_list-box.scss +136 -2
- package/scss/components/modal/_modal.scss +45 -5
- package/scss/components/multiselect/_multiselect.scss +1 -1
- package/scss/components/number-input/_number-input.scss +67 -3
- package/scss/components/radio-button/_radio-button.scss +24 -1
- package/scss/components/select/_select.scss +23 -3
- package/scss/components/slug/_slug.scss +374 -1
- package/scss/components/tag/_tag.scss +26 -1
- package/scss/components/text-area/_text-area.scss +54 -2
- package/scss/components/text-input/_text-input.scss +56 -2
- package/scss/components/tile/_tile.scss +91 -5
- package/scss/fonts/__tests__/__snapshots__/fonts-test.js.snap +180 -180
- package/scss/fonts/_mono.scss +66 -9
- package/scss/fonts/_sans-arabic.scss +17 -8
- package/scss/fonts/_sans-devanagari.scss +17 -8
- package/scss/fonts/_sans-hebrew.scss +17 -8
- package/scss/fonts/_sans-thai-looped.scss +17 -8
- package/scss/fonts/_sans-thai.scss +17 -8
- package/scss/fonts/_sans.scss +66 -9
- package/scss/fonts/_serif.scss +66 -9
- package/scss/fonts/_src.scss +39 -12
package/scss/fonts/_serif.scss
CHANGED
|
@@ -13,7 +13,8 @@ $font-family: 'IBM Plex Serif';
|
|
|
13
13
|
$name: 'IBM-Plex-Serif';
|
|
14
14
|
$styles: (normal, italic);
|
|
15
15
|
$unicode-ranges: (Cyrillic, Pi, Latin3, Latin2, Latin1);
|
|
16
|
-
$formats: (woff2
|
|
16
|
+
$formats: (woff2);
|
|
17
|
+
$package-name: 'serif';
|
|
17
18
|
|
|
18
19
|
@mixin thin($styles: $styles, $unicode-ranges: $unicode-ranges) {
|
|
19
20
|
@each $style in $styles {
|
|
@@ -23,7 +24,14 @@ $formats: (woff2, woff);
|
|
|
23
24
|
font-family: $font-family;
|
|
24
25
|
font-style: $style;
|
|
25
26
|
font-weight: 100;
|
|
26
|
-
src: src.get(
|
|
27
|
+
src: src.get(
|
|
28
|
+
$name,
|
|
29
|
+
Thin,
|
|
30
|
+
$style,
|
|
31
|
+
$unicode-range,
|
|
32
|
+
$formats,
|
|
33
|
+
$package-name
|
|
34
|
+
);
|
|
27
35
|
unicode-range: unicode.get-range($unicode-range);
|
|
28
36
|
}
|
|
29
37
|
}
|
|
@@ -38,7 +46,14 @@ $formats: (woff2, woff);
|
|
|
38
46
|
font-family: $font-family;
|
|
39
47
|
font-style: $style;
|
|
40
48
|
font-weight: 200;
|
|
41
|
-
src: src.get(
|
|
49
|
+
src: src.get(
|
|
50
|
+
$name,
|
|
51
|
+
ExtraLight,
|
|
52
|
+
$style,
|
|
53
|
+
$unicode-range,
|
|
54
|
+
$formats,
|
|
55
|
+
$package-name
|
|
56
|
+
);
|
|
42
57
|
unicode-range: unicode.get-range($unicode-range);
|
|
43
58
|
}
|
|
44
59
|
}
|
|
@@ -53,7 +68,14 @@ $formats: (woff2, woff);
|
|
|
53
68
|
font-family: $font-family;
|
|
54
69
|
font-style: $style;
|
|
55
70
|
font-weight: 300;
|
|
56
|
-
src: src.get(
|
|
71
|
+
src: src.get(
|
|
72
|
+
$name,
|
|
73
|
+
Light,
|
|
74
|
+
$style,
|
|
75
|
+
$unicode-range,
|
|
76
|
+
$formats,
|
|
77
|
+
$package-name
|
|
78
|
+
);
|
|
57
79
|
unicode-range: unicode.get-range($unicode-range);
|
|
58
80
|
}
|
|
59
81
|
}
|
|
@@ -68,7 +90,14 @@ $formats: (woff2, woff);
|
|
|
68
90
|
font-family: $font-family;
|
|
69
91
|
font-style: $style;
|
|
70
92
|
font-weight: 400;
|
|
71
|
-
src: src.get(
|
|
93
|
+
src: src.get(
|
|
94
|
+
$name,
|
|
95
|
+
Regular,
|
|
96
|
+
$style,
|
|
97
|
+
$unicode-range,
|
|
98
|
+
$formats,
|
|
99
|
+
$package-name
|
|
100
|
+
);
|
|
72
101
|
unicode-range: unicode.get-range($unicode-range);
|
|
73
102
|
}
|
|
74
103
|
}
|
|
@@ -83,7 +112,14 @@ $formats: (woff2, woff);
|
|
|
83
112
|
font-family: $font-family;
|
|
84
113
|
font-style: $style;
|
|
85
114
|
font-weight: 450;
|
|
86
|
-
src: src.get(
|
|
115
|
+
src: src.get(
|
|
116
|
+
$name,
|
|
117
|
+
Text,
|
|
118
|
+
$style,
|
|
119
|
+
$unicode-range,
|
|
120
|
+
$formats,
|
|
121
|
+
$package-name
|
|
122
|
+
);
|
|
87
123
|
unicode-range: unicode.get-range($unicode-range);
|
|
88
124
|
}
|
|
89
125
|
}
|
|
@@ -98,7 +134,14 @@ $formats: (woff2, woff);
|
|
|
98
134
|
font-family: $font-family;
|
|
99
135
|
font-style: $style;
|
|
100
136
|
font-weight: 500;
|
|
101
|
-
src: src.get(
|
|
137
|
+
src: src.get(
|
|
138
|
+
$name,
|
|
139
|
+
Medium,
|
|
140
|
+
$style,
|
|
141
|
+
$unicode-range,
|
|
142
|
+
$formats,
|
|
143
|
+
$package-name
|
|
144
|
+
);
|
|
102
145
|
unicode-range: unicode.get-range($unicode-range);
|
|
103
146
|
}
|
|
104
147
|
}
|
|
@@ -113,7 +156,14 @@ $formats: (woff2, woff);
|
|
|
113
156
|
font-family: $font-family;
|
|
114
157
|
font-style: $style;
|
|
115
158
|
font-weight: 600;
|
|
116
|
-
src: src.get(
|
|
159
|
+
src: src.get(
|
|
160
|
+
$name,
|
|
161
|
+
SemiBold,
|
|
162
|
+
$style,
|
|
163
|
+
$unicode-range,
|
|
164
|
+
$formats,
|
|
165
|
+
$package-name
|
|
166
|
+
);
|
|
117
167
|
unicode-range: unicode.get-range($unicode-range);
|
|
118
168
|
}
|
|
119
169
|
}
|
|
@@ -128,7 +178,14 @@ $formats: (woff2, woff);
|
|
|
128
178
|
font-family: $font-family;
|
|
129
179
|
font-style: $style;
|
|
130
180
|
font-weight: 700;
|
|
131
|
-
src: src.get(
|
|
181
|
+
src: src.get(
|
|
182
|
+
$name,
|
|
183
|
+
Bold,
|
|
184
|
+
$style,
|
|
185
|
+
$unicode-range,
|
|
186
|
+
$formats,
|
|
187
|
+
$package-name
|
|
188
|
+
);
|
|
132
189
|
unicode-range: unicode.get-range($unicode-range);
|
|
133
190
|
}
|
|
134
191
|
}
|
package/scss/fonts/_src.scss
CHANGED
|
@@ -79,14 +79,21 @@ $-akamai-filenames: (
|
|
|
79
79
|
/// @param {String} $unicode-range
|
|
80
80
|
/// @param {List} $formats
|
|
81
81
|
/// @returns List
|
|
82
|
-
@function -default-resolver(
|
|
82
|
+
@function -default-resolver(
|
|
83
|
+
$name,
|
|
84
|
+
$weight,
|
|
85
|
+
$style,
|
|
86
|
+
$unicode-range,
|
|
87
|
+
$formats,
|
|
88
|
+
$package-name
|
|
89
|
+
) {
|
|
83
90
|
@if (config.$use-akamai-cdn) {
|
|
84
91
|
$name: -get-akamai-filename($-akamai-filenames, $name, 'name');
|
|
85
92
|
$filename: -get-akamai-filename($-akamai-filenames, $name, 'filename');
|
|
86
93
|
|
|
87
94
|
// Special case for weight = Regular (400)
|
|
88
|
-
@if $weight ==
|
|
89
|
-
@if $style ==
|
|
95
|
+
@if $weight ==Regular {
|
|
96
|
+
@if $style ==italic {
|
|
90
97
|
$filename: '#{$filename}-Italic';
|
|
91
98
|
} @else {
|
|
92
99
|
$filename: '#{$filename}-Regular';
|
|
@@ -94,7 +101,8 @@ $-akamai-filenames: (
|
|
|
94
101
|
} @else {
|
|
95
102
|
// Otherwise add weight + optional style (italic)
|
|
96
103
|
$filename: '#{$filename}-#{$weight}';
|
|
97
|
-
|
|
104
|
+
|
|
105
|
+
@if $style ==italic {
|
|
98
106
|
$filename: '#{$filename}Italic';
|
|
99
107
|
}
|
|
100
108
|
}
|
|
@@ -103,6 +111,7 @@ $-akamai-filenames: (
|
|
|
103
111
|
|
|
104
112
|
@each $format in $formats {
|
|
105
113
|
$url: 'https://1.www.s81c.com/common/carbon/plex/fonts/#{$name}';
|
|
114
|
+
|
|
106
115
|
@if $unicode-range {
|
|
107
116
|
$url: 'https://1.www.s81c.com/common/carbon/plex/fonts/#{$name}/fonts/split/#{$format}/#{$filename}-#{$unicode-range}';
|
|
108
117
|
} @else {
|
|
@@ -123,8 +132,8 @@ $-akamai-filenames: (
|
|
|
123
132
|
$filename: -get-base-filename($name);
|
|
124
133
|
|
|
125
134
|
// Special case for weight = Regular (400)
|
|
126
|
-
@if $weight ==
|
|
127
|
-
@if $style ==
|
|
135
|
+
@if $weight ==Regular {
|
|
136
|
+
@if $style ==italic {
|
|
128
137
|
$filename: '#{$filename}-Italic';
|
|
129
138
|
} @else {
|
|
130
139
|
$filename: '#{$filename}-Regular';
|
|
@@ -132,7 +141,8 @@ $-akamai-filenames: (
|
|
|
132
141
|
} @else {
|
|
133
142
|
// Otherwise add weight + optional style (italic)
|
|
134
143
|
$filename: '#{$filename}-#{$weight}';
|
|
135
|
-
|
|
144
|
+
|
|
145
|
+
@if $style ==italic {
|
|
136
146
|
$filename: '#{$filename}Italic';
|
|
137
147
|
}
|
|
138
148
|
}
|
|
@@ -141,10 +151,19 @@ $-akamai-filenames: (
|
|
|
141
151
|
|
|
142
152
|
@each $format in $formats {
|
|
143
153
|
$url: $filename;
|
|
144
|
-
|
|
145
|
-
|
|
154
|
+
|
|
155
|
+
@if config.$use-per-family-plex {
|
|
156
|
+
@if $unicode-range {
|
|
157
|
+
$url: '#{config.$font-path}-#{$package-name}/fonts/split/#{$format}/#{$filename}-#{$unicode-range}';
|
|
158
|
+
} @else {
|
|
159
|
+
$url: '#{config.$font-path}-#{$package-name}/fonts/complete/#{$format}/#{$filename}';
|
|
160
|
+
}
|
|
146
161
|
} @else {
|
|
147
|
-
$
|
|
162
|
+
@if $unicode-range {
|
|
163
|
+
$url: '#{config.$font-path}/#{$name}/fonts/split/#{$format}/#{$filename}-#{$unicode-range}';
|
|
164
|
+
} @else {
|
|
165
|
+
$url: '#{config.$font-path}/#{$name}/fonts/complete/#{$format}/#{$filename}';
|
|
166
|
+
}
|
|
148
167
|
}
|
|
149
168
|
|
|
150
169
|
// Add extension
|
|
@@ -173,13 +192,21 @@ $resolver: meta.get-function('-default-resolver') !default;
|
|
|
173
192
|
/// @param {String} $unicode-range
|
|
174
193
|
/// @param {List} $formats
|
|
175
194
|
/// @returns List
|
|
176
|
-
@function get(
|
|
195
|
+
@function get(
|
|
196
|
+
$name,
|
|
197
|
+
$weight,
|
|
198
|
+
$style,
|
|
199
|
+
$unicode-range: null,
|
|
200
|
+
$formats,
|
|
201
|
+
$package-name
|
|
202
|
+
) {
|
|
177
203
|
@return meta.call(
|
|
178
204
|
$resolver,
|
|
179
205
|
$name: $name,
|
|
180
206
|
$weight: $weight,
|
|
181
207
|
$style: $style,
|
|
182
208
|
$unicode-range: $unicode-range,
|
|
183
|
-
$formats: $formats
|
|
209
|
+
$formats: $formats,
|
|
210
|
+
$package-name: $package-name
|
|
184
211
|
);
|
|
185
212
|
}
|