@codecademy/gamut-styles 18.0.1-alpha.edab62.0 → 18.0.1-alpha.f618c1.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/README.md +0 -15
- package/dist/variance/utils.d.ts +4 -3
- package/package.json +4 -4
- package/core/_fonts.scss +0 -131
- package/core/_reboot.scss +0 -487
- package/core/_typography.scss +0 -36
- package/core/index.scss +0 -4
- package/core.scss +0 -1
- package/dist/__tests__/testUtils.d.ts +0 -2
- package/utils/functions/index.scss +0 -26
- package/utils/index.scss +0 -5
- package/utils/mixins/_font-smoothing.scss +0 -9
- package/utils/mixins/_no-select.scss +0 -4
- package/utils/mixins/_responsive.scss +0 -85
- package/utils/mixins/_shadow.scss +0 -19
- package/utils/mixins/_sr-only.scss +0 -37
- package/utils/mixins/index.scss +0 -6
- package/utils/mixins/legacy.scss +0 -48
- package/utils/variables/_base.scss +0 -7
- package/utils/variables/_colors.scss +0 -302
- package/utils/variables/_grid.scss +0 -15
- package/utils/variables/_responsive.scss +0 -1
- package/utils/variables/_typography.scss +0 -56
- package/utils/variables/index.js +0 -8
- package/utils/variables/index.scss +0 -5
- package/utils.scss +0 -1
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
// shamelessly stolen from bootstrap
|
|
2
|
-
// https://github.com/twbs/bootstrap/blob/2085c142679563189dbc34ec6bf4b00e32b8f615/scss/mixins/_screen-reader.scss
|
|
3
|
-
|
|
4
|
-
@mixin screenreader-only {
|
|
5
|
-
position: absolute;
|
|
6
|
-
width: 1px;
|
|
7
|
-
height: 1px;
|
|
8
|
-
padding: 0;
|
|
9
|
-
overflow: hidden;
|
|
10
|
-
clip: rect(0, 0, 0, 0);
|
|
11
|
-
white-space: nowrap;
|
|
12
|
-
clip-path: inset(50%);
|
|
13
|
-
border: 0;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
@mixin sr-only {
|
|
17
|
-
@warn "This is deprecated, please use screenreader-only";
|
|
18
|
-
@include screenreader-only;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@mixin screenreader-only-focusable {
|
|
22
|
-
&:active,
|
|
23
|
-
&:focus {
|
|
24
|
-
position: static;
|
|
25
|
-
width: auto;
|
|
26
|
-
height: auto;
|
|
27
|
-
overflow: visible;
|
|
28
|
-
clip: auto;
|
|
29
|
-
white-space: normal;
|
|
30
|
-
clip-path: none;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
@mixin sr-only-focusable {
|
|
35
|
-
@warn "This is deprecated, please use screenreader-only-focusable";
|
|
36
|
-
@include screenreader-only-focusable;
|
|
37
|
-
}
|
package/utils/mixins/index.scss
DELETED
package/utils/mixins/legacy.scss
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
// Legacy Helper mixins
|
|
2
|
-
@use "../variables/index.scss";
|
|
3
|
-
@use "../mixins/responsive" as *;
|
|
4
|
-
|
|
5
|
-
// these variables should be located in ../variables
|
|
6
|
-
// instead, they're co-located with their legacy functions so they can be removed more easily
|
|
7
|
-
// NOTE: when removing, also remove the legacyBreakpoints JS object in gamut-styles/variables.js
|
|
8
|
-
$bp-phone: 0;
|
|
9
|
-
$bp-tablet: 736px;
|
|
10
|
-
$bp-desktop: 960px;
|
|
11
|
-
|
|
12
|
-
@mixin device-phone {
|
|
13
|
-
@include screen-size-between($bp-phone, $bp-tablet - 1) {
|
|
14
|
-
@content;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
@mixin device-tablet {
|
|
19
|
-
@include screen-size-between($bp-tablet, $bp-desktop - 1) {
|
|
20
|
-
@content;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@mixin device-desktop {
|
|
25
|
-
@include screen-size-gte($bp-desktop) {
|
|
26
|
-
@content;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@mixin devices($devices...) {
|
|
31
|
-
@each $device in $devices {
|
|
32
|
-
@if $device == phone {
|
|
33
|
-
@include device-phone {
|
|
34
|
-
@content;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
@if $device == tablet {
|
|
38
|
-
@include device-tablet {
|
|
39
|
-
@content;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
@if $device == desktop {
|
|
43
|
-
@include device-desktop {
|
|
44
|
-
@content;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
@@ -1,302 +0,0 @@
|
|
|
1
|
-
// NOTE: These are actively being deprecated. Use with caution.
|
|
2
|
-
|
|
3
|
-
@use "sass:color";
|
|
4
|
-
// =======================================
|
|
5
|
-
// STANDARD COLORS
|
|
6
|
-
// =======================================
|
|
7
|
-
|
|
8
|
-
$color-beige: #fff0e5;
|
|
9
|
-
$color-light-blue: #66c4ff;
|
|
10
|
-
$color-blue: #1557ff;
|
|
11
|
-
$color-green: #088a27;
|
|
12
|
-
$color-light-green: #aee938;
|
|
13
|
-
$color-navy: #10162f;
|
|
14
|
-
$color-orange: #ff8c00;
|
|
15
|
-
$color-pink: #f966ff;
|
|
16
|
-
$color-red: #e91c11;
|
|
17
|
-
$color-yellow: #ffd300;
|
|
18
|
-
$color-hyper: #3a10e5;
|
|
19
|
-
$color-pale-blue: #f5fcff;
|
|
20
|
-
$color-pale-green: #f5ffe3;
|
|
21
|
-
$color-pale-pink: #fff5ff;
|
|
22
|
-
$color-pale-yellow: #fffae5;
|
|
23
|
-
|
|
24
|
-
// =======================================
|
|
25
|
-
// INTERACTIVE COLORS
|
|
26
|
-
// =======================================
|
|
27
|
-
|
|
28
|
-
$color-interactive-dark: $color-hyper;
|
|
29
|
-
$color-interactive-light: $color-yellow;
|
|
30
|
-
|
|
31
|
-
// =======================================
|
|
32
|
-
// OTHER COLORS
|
|
33
|
-
// =======================================
|
|
34
|
-
|
|
35
|
-
$color-white: #ffffff;
|
|
36
|
-
$color-black: #000000;
|
|
37
|
-
$color-shadow: rgba($color-black, 0.15);
|
|
38
|
-
|
|
39
|
-
// =======================================
|
|
40
|
-
// PLATFORM COLORS
|
|
41
|
-
// =======================================
|
|
42
|
-
|
|
43
|
-
$platform-mint-500: #37c3be;
|
|
44
|
-
|
|
45
|
-
$platform-mint-600: color.mix($color-black, $platform-mint-500, 20%);
|
|
46
|
-
$platform-mint-700: color.mix($color-black, $platform-mint-500, 40%);
|
|
47
|
-
|
|
48
|
-
$platform-purple-500: #69639a;
|
|
49
|
-
|
|
50
|
-
$platform-purple-200: color.mix($color-white, $platform-purple-500, 60%);
|
|
51
|
-
$platform-purple-300: color.mix($color-white, $platform-purple-500, 40%);
|
|
52
|
-
$platform-purple-400: color.mix($color-white, $platform-purple-500, 20%);
|
|
53
|
-
$platform-purple-600: color.mix($color-black, $platform-purple-500, 20%);
|
|
54
|
-
$platform-purple-700: color.mix($color-black, $platform-purple-500, 40%);
|
|
55
|
-
$platform-purple-800: color.mix($color-black, $platform-purple-500, 60%);
|
|
56
|
-
$platform-purple-900: color.mix($color-black, $platform-purple-500, 80%);
|
|
57
|
-
|
|
58
|
-
// =======================================
|
|
59
|
-
// EDITOR COLORS
|
|
60
|
-
// =======================================
|
|
61
|
-
|
|
62
|
-
$color-editor-blue: #83fff5;
|
|
63
|
-
$color-editor-deep-purple: #cc7bc2;
|
|
64
|
-
$color-editor-gray: #939598;
|
|
65
|
-
$color-editor-green: #b4d353;
|
|
66
|
-
$color-editor-orange: #ff8973;
|
|
67
|
-
$color-editor-purple: #b3ccff;
|
|
68
|
-
$color-editor-red: #ea6c8b;
|
|
69
|
-
$color-editor-yellow: #ffe083;
|
|
70
|
-
|
|
71
|
-
// =======================================
|
|
72
|
-
// LEGACY COLOR SWATCHES
|
|
73
|
-
// =======================================
|
|
74
|
-
|
|
75
|
-
$color-blue-100: #c8d7fa;
|
|
76
|
-
$color-blue-200: #a5befa;
|
|
77
|
-
$color-blue-300: #7da2fa;
|
|
78
|
-
$color-blue-400: #5788fa;
|
|
79
|
-
$color-blue-500: #3069f0;
|
|
80
|
-
$color-blue-600: #2d5dcc;
|
|
81
|
-
$color-blue-700: #2e4a99;
|
|
82
|
-
$color-blue-800: #233466;
|
|
83
|
-
$color-blue-900: #141c3a;
|
|
84
|
-
$color-blue-1000: #10162f;
|
|
85
|
-
$color-blue-1100: #0a0e1d;
|
|
86
|
-
|
|
87
|
-
$color-pink-100: #ffd9fc;
|
|
88
|
-
$color-pink-200: #ffbffa;
|
|
89
|
-
$color-pink-300: #ffa6f8;
|
|
90
|
-
$color-pink-400: #f288e9;
|
|
91
|
-
$color-pink-500: #d957d9;
|
|
92
|
-
$color-pink-600: #b035c9;
|
|
93
|
-
$color-pink-700: #9129a6;
|
|
94
|
-
$color-pink-800: #702080;
|
|
95
|
-
$color-pink-900: #43134d;
|
|
96
|
-
|
|
97
|
-
$color-purple-100: #d5ccff;
|
|
98
|
-
$color-purple-200: #c0b6f2;
|
|
99
|
-
$color-purple-300: #ac9df2;
|
|
100
|
-
$color-purple-400: #917ef2;
|
|
101
|
-
$color-purple-500: #7c5ce6;
|
|
102
|
-
$color-purple-600: #6437cc;
|
|
103
|
-
$color-purple-700: #4b2999;
|
|
104
|
-
$color-purple-800: #381f73;
|
|
105
|
-
$color-purple-900: #231347;
|
|
106
|
-
|
|
107
|
-
$color-red-100: #ffd3cc;
|
|
108
|
-
$color-red-200: #ffb8ad;
|
|
109
|
-
$color-red-300: #ff988c;
|
|
110
|
-
$color-red-400: #ff7566;
|
|
111
|
-
$color-red-500: #fd4d3f;
|
|
112
|
-
$color-red-600: #e53935;
|
|
113
|
-
$color-red-700: #bf2e2c;
|
|
114
|
-
$color-red-800: #992523;
|
|
115
|
-
$color-red-900: #661917;
|
|
116
|
-
|
|
117
|
-
$color-green-100: #bbfae5;
|
|
118
|
-
$color-green-200: #91f2d2;
|
|
119
|
-
$color-green-300: #6aebc0;
|
|
120
|
-
$color-green-400: #4fe0b0;
|
|
121
|
-
$color-green-500: #47cca0;
|
|
122
|
-
$color-green-600: #3eb38c;
|
|
123
|
-
$color-green-700: #318c6e;
|
|
124
|
-
$color-green-800: #246650;
|
|
125
|
-
$color-green-900: #164032;
|
|
126
|
-
|
|
127
|
-
$color-orange-100: #ffe9c8;
|
|
128
|
-
$color-orange-200: #ffd093;
|
|
129
|
-
$color-orange-300: #ffb764;
|
|
130
|
-
$color-orange-400: #ff9f3c;
|
|
131
|
-
$color-orange-500: #ff881d;
|
|
132
|
-
$color-orange-600: #fb7106;
|
|
133
|
-
$color-orange-700: #dc5a03;
|
|
134
|
-
$color-orange-800: #ba4604;
|
|
135
|
-
$color-orange-900: #963606;
|
|
136
|
-
|
|
137
|
-
$color-yellow-100: #fff7cc;
|
|
138
|
-
$color-yellow-200: #fff2b3;
|
|
139
|
-
$color-yellow-300: #ffec8c;
|
|
140
|
-
$color-yellow-400: #ffe359;
|
|
141
|
-
$color-yellow-500: #ffd500;
|
|
142
|
-
$color-yellow-600: #ffb92e;
|
|
143
|
-
$color-yellow-700: #e69729;
|
|
144
|
-
$color-yellow-800: #b37620;
|
|
145
|
-
$color-yellow-900: #805417;
|
|
146
|
-
|
|
147
|
-
$color-gray-100: #f6f5fa;
|
|
148
|
-
$color-gray-200: #dddce0;
|
|
149
|
-
$color-gray-300: #c4c3c7;
|
|
150
|
-
$color-gray-400: #a2a2a6;
|
|
151
|
-
$color-gray-500: #828285;
|
|
152
|
-
$color-gray-600: #646466;
|
|
153
|
-
$color-gray-700: #4b4b4d;
|
|
154
|
-
$color-gray-800: #323233;
|
|
155
|
-
$color-gray-900: #19191a;
|
|
156
|
-
|
|
157
|
-
$color-royal-blue: #6400e4;
|
|
158
|
-
|
|
159
|
-
// =======================================
|
|
160
|
-
// BRAND COLORS
|
|
161
|
-
// =======================================
|
|
162
|
-
|
|
163
|
-
$brand-red: $color-red-500;
|
|
164
|
-
$brand-yellow: $color-yellow-500;
|
|
165
|
-
$brand-orange: $color-orange-400;
|
|
166
|
-
$brand-purple: $color-royal-blue;
|
|
167
|
-
$brand-pink: $color-pink-400;
|
|
168
|
-
$brand-mint: $color-green-300;
|
|
169
|
-
$brand-magenta: $color-pink-700;
|
|
170
|
-
$brand-beige: #efd9ca;
|
|
171
|
-
$brand-blue: $color-blue-500;
|
|
172
|
-
$brand-dark-blue: $color-blue-900;
|
|
173
|
-
$brand-lavender: $color-purple-500;
|
|
174
|
-
|
|
175
|
-
$deprecated-color-white: #ffffff;
|
|
176
|
-
$deprecated-color-black: #000000;
|
|
177
|
-
|
|
178
|
-
$deprecated-gamut-purple-500: #69639a;
|
|
179
|
-
|
|
180
|
-
$deprecated-gamut-purple-100: color.mix(
|
|
181
|
-
$color-white,
|
|
182
|
-
$deprecated-gamut-purple-500,
|
|
183
|
-
80%
|
|
184
|
-
);
|
|
185
|
-
$deprecated-gamut-purple-200: color.mix(
|
|
186
|
-
$color-white,
|
|
187
|
-
$deprecated-gamut-purple-500,
|
|
188
|
-
60%
|
|
189
|
-
);
|
|
190
|
-
$deprecated-gamut-purple-300: color.mix(
|
|
191
|
-
$color-white,
|
|
192
|
-
$deprecated-gamut-purple-500,
|
|
193
|
-
40%
|
|
194
|
-
);
|
|
195
|
-
$deprecated-gamut-purple-400: color.mix(
|
|
196
|
-
$color-white,
|
|
197
|
-
$deprecated-gamut-purple-500,
|
|
198
|
-
20%
|
|
199
|
-
);
|
|
200
|
-
$deprecated-gamut-purple-600: color.mix(
|
|
201
|
-
$color-black,
|
|
202
|
-
$deprecated-gamut-purple-500,
|
|
203
|
-
20%
|
|
204
|
-
);
|
|
205
|
-
$deprecated-gamut-purple-700: color.mix(
|
|
206
|
-
$color-black,
|
|
207
|
-
$deprecated-gamut-purple-500,
|
|
208
|
-
40%
|
|
209
|
-
);
|
|
210
|
-
$deprecated-gamut-purple-800: color.mix(
|
|
211
|
-
$color-black,
|
|
212
|
-
$deprecated-gamut-purple-500,
|
|
213
|
-
60%
|
|
214
|
-
);
|
|
215
|
-
$deprecated-gamut-purple-900: color.mix(
|
|
216
|
-
$color-black,
|
|
217
|
-
$deprecated-gamut-purple-500,
|
|
218
|
-
80%
|
|
219
|
-
);
|
|
220
|
-
|
|
221
|
-
$deprecated-gamut-royal-blue-500: #4b35ef;
|
|
222
|
-
|
|
223
|
-
$deprecated-gamut-royal-blue-600: color.mix(
|
|
224
|
-
$color-black,
|
|
225
|
-
$deprecated-gamut-royal-blue-500,
|
|
226
|
-
20%
|
|
227
|
-
);
|
|
228
|
-
$deprecated-gamut-royal-blue-700: color.mix(
|
|
229
|
-
$color-black,
|
|
230
|
-
$deprecated-gamut-royal-blue-500,
|
|
231
|
-
40%
|
|
232
|
-
);
|
|
233
|
-
$deprecated-gamut-royal-blue-800: color.mix(
|
|
234
|
-
$color-black,
|
|
235
|
-
$deprecated-gamut-royal-blue-500,
|
|
236
|
-
60%
|
|
237
|
-
);
|
|
238
|
-
|
|
239
|
-
$deprecated-gamut-mint-500: #37c3be;
|
|
240
|
-
|
|
241
|
-
$deprecated-gamut-mint-100: color.mix(
|
|
242
|
-
$color-white,
|
|
243
|
-
$deprecated-gamut-mint-500,
|
|
244
|
-
80%
|
|
245
|
-
);
|
|
246
|
-
$deprecated-gamut-mint-200: color.mix(
|
|
247
|
-
$color-white,
|
|
248
|
-
$deprecated-gamut-mint-500,
|
|
249
|
-
60%
|
|
250
|
-
);
|
|
251
|
-
$deprecated-gamut-mint-300: color.mix(
|
|
252
|
-
$color-white,
|
|
253
|
-
$deprecated-gamut-mint-500,
|
|
254
|
-
40%
|
|
255
|
-
);
|
|
256
|
-
$deprecated-gamut-mint-400: color.mix(
|
|
257
|
-
$color-white,
|
|
258
|
-
$deprecated-gamut-mint-500,
|
|
259
|
-
20%
|
|
260
|
-
);
|
|
261
|
-
$deprecated-gamut-mint-600: color.mix(
|
|
262
|
-
$color-black,
|
|
263
|
-
$deprecated-gamut-mint-500,
|
|
264
|
-
20%
|
|
265
|
-
);
|
|
266
|
-
$deprecated-gamut-mint-700: color.mix(
|
|
267
|
-
$color-black,
|
|
268
|
-
$deprecated-gamut-mint-500,
|
|
269
|
-
40%
|
|
270
|
-
);
|
|
271
|
-
$deprecated-gamut-mint-800: color.mix(
|
|
272
|
-
$color-black,
|
|
273
|
-
$deprecated-gamut-mint-500,
|
|
274
|
-
60%
|
|
275
|
-
);
|
|
276
|
-
$deprecated-gamut-mint-900: color.mix(
|
|
277
|
-
$color-black,
|
|
278
|
-
$deprecated-gamut-mint-500,
|
|
279
|
-
80%
|
|
280
|
-
);
|
|
281
|
-
|
|
282
|
-
$deprecated-gamut-purple: $deprecated-gamut-purple-500;
|
|
283
|
-
$deprecated-gamut-royal-blue: $deprecated-gamut-royal-blue-500;
|
|
284
|
-
$deprecated-gamut-mint: $deprecated-gamut-mint-500;
|
|
285
|
-
|
|
286
|
-
$deprecated-color-grey-1: #e9eaea;
|
|
287
|
-
$deprecated-color-grey-2: #d4d5d6;
|
|
288
|
-
$deprecated-color-grey-3: #bebfc1;
|
|
289
|
-
$deprecated-color-grey-4: #939598;
|
|
290
|
-
$deprecated-color-grey-5: #3e3e40;
|
|
291
|
-
$deprecated-color-blue: #52b1db;
|
|
292
|
-
$deprecated-color-mint: #34b3a0;
|
|
293
|
-
$deprecated-color-red: #f65a5b;
|
|
294
|
-
|
|
295
|
-
$deprecated-swatches-cc-blue-500: #225470;
|
|
296
|
-
$deprecated-swatches-cc-blue-700: #204056;
|
|
297
|
-
|
|
298
|
-
$deprecated-swatches-grey-blue-500: #57646e;
|
|
299
|
-
$deprecated-swatches-grey-blue-600: #354551;
|
|
300
|
-
|
|
301
|
-
$deprecated-swatches-mint-700: #34b3a0;
|
|
302
|
-
$deprecated-swatches-mint-800: #1a7b72;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
// Overrides for the Grid component
|
|
2
|
-
@use "../functions/index.scss" as *;
|
|
3
|
-
|
|
4
|
-
// NOTE: When updating, make sure you also update the gamut-styles/variables.js file
|
|
5
|
-
|
|
6
|
-
$max-content-width: 1440px;
|
|
7
|
-
|
|
8
|
-
$grid-cols: 12;
|
|
9
|
-
$grid-gutter-width: px-rem(16);
|
|
10
|
-
$grid-outer-margin: px-rem(16);
|
|
11
|
-
$grid-xs-min: px-rem(480);
|
|
12
|
-
$grid-sm-min: px-rem(768);
|
|
13
|
-
$grid-md-min: px-rem(1024);
|
|
14
|
-
$grid-lg-min: px-rem(1200);
|
|
15
|
-
$grid-xl-min: px-rem($max-content-width);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
$screenSizes: ("xs", "sm", "md", "lg", "xl");
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
@use "base";
|
|
2
|
-
@use "colors";
|
|
3
|
-
|
|
4
|
-
// Font Families:
|
|
5
|
-
|
|
6
|
-
$font-family-accent: "Suisse", "Apercu", -apple-system, BlinkMacSystemFont,
|
|
7
|
-
"Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
|
8
|
-
"Helvetica Neue", sans-serif;
|
|
9
|
-
|
|
10
|
-
$font-family-base: "Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
11
|
-
"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
12
|
-
sans-serif;
|
|
13
|
-
|
|
14
|
-
$font-monospace: Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas,
|
|
15
|
-
monospace;
|
|
16
|
-
|
|
17
|
-
$font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu",
|
|
18
|
-
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
19
|
-
|
|
20
|
-
// Font Weights
|
|
21
|
-
|
|
22
|
-
$font-weight-light: 300;
|
|
23
|
-
$font-weight-normal: normal;
|
|
24
|
-
$font-weight-bold: bold;
|
|
25
|
-
$font-weight-base: $font-weight-normal;
|
|
26
|
-
$font-weight-headings: $font-weight-bold;
|
|
27
|
-
$font-weight-dt: $font-weight-bold;
|
|
28
|
-
|
|
29
|
-
// Font colors
|
|
30
|
-
|
|
31
|
-
$color-body: colors.$color-navy;
|
|
32
|
-
$color-headings: colors.$color-gray-900;
|
|
33
|
-
$bg-body: colors.$color-white;
|
|
34
|
-
$color-link: colors.$deprecated-gamut-royal-blue-500;
|
|
35
|
-
$hover-color-link: colors.$deprecated-gamut-royal-blue-600;
|
|
36
|
-
$decoration-link: none;
|
|
37
|
-
$hover-decoration-link: underline;
|
|
38
|
-
|
|
39
|
-
// Font margins
|
|
40
|
-
|
|
41
|
-
$margin-bottom-paragraph: base.$spacer;
|
|
42
|
-
$margin-bottom-headings: base.$spacer;
|
|
43
|
-
$margin-bottom-label: 0;
|
|
44
|
-
$line-height-base: 1.5;
|
|
45
|
-
$line-height-headings: 1.1;
|
|
46
|
-
|
|
47
|
-
// Font sizes
|
|
48
|
-
|
|
49
|
-
$font-size-base: base.$base-unit;
|
|
50
|
-
$font-size-h1: px-rem(64);
|
|
51
|
-
$font-size-h2: px-rem(44);
|
|
52
|
-
$font-size-h3: px-rem(34);
|
|
53
|
-
$font-size-h4: px-rem(26);
|
|
54
|
-
$font-size-h5: px-rem(22);
|
|
55
|
-
$font-size-h6: px-rem(20);
|
|
56
|
-
$font-size-small: 85%;
|
package/utils/variables/index.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2
|
-
// eslint-disable-next-line no-console
|
|
3
|
-
console.warn(
|
|
4
|
-
'Importing from `gamut-styles/utils/variables` is now deprecated, please import directly from the gamut-styles package'
|
|
5
|
-
);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export * from '../../dist/variables';
|
package/utils.scss
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@forward "utils/index";
|