@codecademy/gamut-styles 17.6.1 → 17.6.2

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 (12) hide show
  1. package/core/index.scss +4 -4
  2. package/core.scss +1 -1
  3. package/package.json +2 -3
  4. package/utils/index.scss +3 -3
  5. package/utils/mixins/_responsive.scss +0 -1
  6. package/utils/mixins/index.scss +6 -6
  7. package/utils/mixins/legacy.scss +3 -5
  8. package/utils/variables/_base.scss +2 -4
  9. package/utils/variables/_colors.scss +28 -61
  10. package/utils/variables/_typography.scss +8 -11
  11. package/utils/variables/index.scss +5 -5
  12. package/utils.scss +1 -1
package/core/index.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "../utils";
2
- @use "reboot";
3
- @use "fonts";
4
- @use "typography";
1
+ @import "../utils";
2
+ @import "reboot";
3
+ @import "fonts";
4
+ @import "typography";
package/core.scss CHANGED
@@ -1 +1 @@
1
- @use "core/index";
1
+ @import "core/index";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@codecademy/gamut-styles",
3
3
  "description": "Styleguide & Component library for codecademy.com",
4
- "version": "17.6.1",
4
+ "version": "17.6.2",
5
5
  "author": "Jake Hiller <jake@codecademy.com>",
6
6
  "dependencies": {
7
7
  "@codecademy/variance": "0.22.1",
@@ -25,7 +25,6 @@
25
25
  "@emotion/styled": "^11.3.0",
26
26
  "lodash": "^4.17.5",
27
27
  "react": "^17.0.2 || ^18.2.0",
28
- "sass": "^1.85.0",
29
28
  "stylis": "^4.0.7"
30
29
  },
31
30
  "publishConfig": {
@@ -35,5 +34,5 @@
35
34
  "scripts": {
36
35
  "build": "nx build @codecademy/gamut-styles"
37
36
  },
38
- "gitHead": "801212973707f01ab897b4a26d04643411e3b0c8"
37
+ "gitHead": "9350d2db484745522c18c4feb2cc921cfda139a3"
39
38
  }
package/utils/index.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  // import order is unfortunately important here
2
2
  // variables needs to access functions, and mixins needs to access variables
3
- @forward "functions/index";
4
- @forward "variables/index";
5
- @forward "mixins/index";
3
+ @import "functions/index";
4
+ @import "variables/index";
5
+ @import "mixins/index";
package/utils/mixins/_responsive.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  // Try to use these simple mixins if possible for your responsive needs
2
- @use "../variables/index.scss" as *;
3
2
 
4
3
  // Example usage:
5
4
  //
package/utils/mixins/index.scss CHANGED
@@ -1,6 +1,6 @@
1
- @forward "font-smoothing";
2
- @forward "no-select";
3
- @forward "responsive";
4
- @forward "shadow";
5
- @forward "sr-only";
6
- @forward "legacy";
1
+ @import "font-smoothing";
2
+ @import "no-select";
3
+ @import "responsive";
4
+ @import "shadow";
5
+ @import "sr-only";
6
+ @import "legacy";
package/utils/mixins/legacy.scss CHANGED
@@ -1,5 +1,3 @@
1
- @use "responsive";
2
-
3
1
  // Legacy Helper mixins
4
2
 
5
3
  // these variables should be located in ../variables
@@ -10,19 +8,19 @@ $bp-tablet: 736px;
10
8
  $bp-desktop: 960px;
11
9
 
12
10
  @mixin device-phone {
13
- @include responsive.screen-size-between($bp-phone, $bp-tablet - 1) {
11
+ @include screen-size-between($bp-phone, $bp-tablet - 1) {
14
12
  @content;
15
13
  }
16
14
  }
17
15
 
18
16
  @mixin device-tablet {
19
- @include responsive.screen-size-between($bp-tablet, $bp-desktop - 1) {
17
+ @include screen-size-between($bp-tablet, $bp-desktop - 1) {
20
18
  @content;
21
19
  }
22
20
  }
23
21
 
24
22
  @mixin device-desktop {
25
- @include responsive.screen-size-gte($bp-desktop) {
23
+ @include screen-size-gte($bp-desktop) {
26
24
  @content;
27
25
  }
28
26
  }
package/utils/variables/_base.scss CHANGED
@@ -1,7 +1,5 @@
1
- @use "colors";
2
-
3
1
  $base-unit: 1rem;
4
2
  $spacer: $base-unit;
5
- $box-shadow: 0 1px 4px 0 colors.$color-shadow;
6
- $box-shadow-hovered: 0 4px 10px 0 colors.$color-shadow;
3
+ $box-shadow: 0 1px 4px 0 $color-shadow;
4
+ $box-shadow-hovered: 0 4px 10px 0 $color-shadow;
7
5
  $height-header: 4rem;
package/utils/variables/_colors.scss CHANGED
@@ -1,4 +1,3 @@
1
- @use "sass:color";
2
1
  // NOTE: When updating, make sure you also update the gamut-styles/variables/index.js file
3
2
 
4
3
  // =======================================
@@ -42,18 +41,18 @@ $color-shadow: rgba($color-black, 0.15);
42
41
 
43
42
  $platform-mint-500: #37c3be;
44
43
 
45
- $platform-mint-600: color.mix($color-black, $platform-mint-500, 20%);
46
- $platform-mint-700: color.mix($color-black, $platform-mint-500, 40%);
44
+ $platform-mint-600: mix($color-black, $platform-mint-500, 20%);
45
+ $platform-mint-700: mix($color-black, $platform-mint-500, 40%);
47
46
 
48
47
  $platform-purple-500: #69639a;
49
48
 
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%);
49
+ $platform-purple-200: mix($color-white, $platform-purple-500, 60%);
50
+ $platform-purple-300: mix($color-white, $platform-purple-500, 40%);
51
+ $platform-purple-400: mix($color-white, $platform-purple-500, 20%);
52
+ $platform-purple-600: mix($color-black, $platform-purple-500, 20%);
53
+ $platform-purple-700: mix($color-black, $platform-purple-500, 40%);
54
+ $platform-purple-800: mix($color-black, $platform-purple-500, 60%);
55
+ $platform-purple-900: mix($color-black, $platform-purple-500, 80%);
57
56
 
58
57
  // =======================================
59
58
  // EDITOR COLORS
@@ -177,42 +176,42 @@ $deprecated-color-black: #000000;
177
176
 
178
177
  $deprecated-gamut-purple-500: #69639a;
179
178
 
180
- $deprecated-gamut-purple-100: color.mix(
179
+ $deprecated-gamut-purple-100: mix(
181
180
  $color-white,
182
181
  $deprecated-gamut-purple-500,
183
182
  80%
184
183
  );
185
- $deprecated-gamut-purple-200: color.mix(
184
+ $deprecated-gamut-purple-200: mix(
186
185
  $color-white,
187
186
  $deprecated-gamut-purple-500,
188
187
  60%
189
188
  );
190
- $deprecated-gamut-purple-300: color.mix(
189
+ $deprecated-gamut-purple-300: mix(
191
190
  $color-white,
192
191
  $deprecated-gamut-purple-500,
193
192
  40%
194
193
  );
195
- $deprecated-gamut-purple-400: color.mix(
194
+ $deprecated-gamut-purple-400: mix(
196
195
  $color-white,
197
196
  $deprecated-gamut-purple-500,
198
197
  20%
199
198
  );
200
- $deprecated-gamut-purple-600: color.mix(
199
+ $deprecated-gamut-purple-600: mix(
201
200
  $color-black,
202
201
  $deprecated-gamut-purple-500,
203
202
  20%
204
203
  );
205
- $deprecated-gamut-purple-700: color.mix(
204
+ $deprecated-gamut-purple-700: mix(
206
205
  $color-black,
207
206
  $deprecated-gamut-purple-500,
208
207
  40%
209
208
  );
210
- $deprecated-gamut-purple-800: color.mix(
209
+ $deprecated-gamut-purple-800: mix(
211
210
  $color-black,
212
211
  $deprecated-gamut-purple-500,
213
212
  60%
214
213
  );
215
- $deprecated-gamut-purple-900: color.mix(
214
+ $deprecated-gamut-purple-900: mix(
216
215
  $color-black,
217
216
  $deprecated-gamut-purple-500,
218
217
  80%
@@ -220,17 +219,17 @@ $deprecated-gamut-purple-900: color.mix(
220
219
 
221
220
  $deprecated-gamut-royal-blue-500: #4b35ef;
222
221
 
223
- $deprecated-gamut-royal-blue-600: color.mix(
222
+ $deprecated-gamut-royal-blue-600: mix(
224
223
  $color-black,
225
224
  $deprecated-gamut-royal-blue-500,
226
225
  20%
227
226
  );
228
- $deprecated-gamut-royal-blue-700: color.mix(
227
+ $deprecated-gamut-royal-blue-700: mix(
229
228
  $color-black,
230
229
  $deprecated-gamut-royal-blue-500,
231
230
  40%
232
231
  );
233
- $deprecated-gamut-royal-blue-800: color.mix(
232
+ $deprecated-gamut-royal-blue-800: mix(
234
233
  $color-black,
235
234
  $deprecated-gamut-royal-blue-500,
236
235
  60%
@@ -238,46 +237,14 @@ $deprecated-gamut-royal-blue-800: color.mix(
238
237
 
239
238
  $deprecated-gamut-mint-500: #37c3be;
240
239
 
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
- );
240
+ $deprecated-gamut-mint-100: mix($color-white, $deprecated-gamut-mint-500, 80%);
241
+ $deprecated-gamut-mint-200: mix($color-white, $deprecated-gamut-mint-500, 60%);
242
+ $deprecated-gamut-mint-300: mix($color-white, $deprecated-gamut-mint-500, 40%);
243
+ $deprecated-gamut-mint-400: mix($color-white, $deprecated-gamut-mint-500, 20%);
244
+ $deprecated-gamut-mint-600: mix($color-black, $deprecated-gamut-mint-500, 20%);
245
+ $deprecated-gamut-mint-700: mix($color-black, $deprecated-gamut-mint-500, 40%);
246
+ $deprecated-gamut-mint-800: mix($color-black, $deprecated-gamut-mint-500, 60%);
247
+ $deprecated-gamut-mint-900: mix($color-black, $deprecated-gamut-mint-500, 80%);
281
248
 
282
249
  $deprecated-gamut-purple: $deprecated-gamut-purple-500;
283
250
  $deprecated-gamut-royal-blue: $deprecated-gamut-royal-blue-500;
package/utils/variables/_typography.scss CHANGED
@@ -1,6 +1,3 @@
1
- @use "base";
2
- @use "colors";
3
-
4
1
  // Font Families:
5
2
 
6
3
  $font-family-accent: "Suisse", "Apercu", -apple-system, BlinkMacSystemFont,
@@ -28,25 +25,25 @@ $font-weight-dt: $font-weight-bold;
28
25
 
29
26
  // Font colors
30
27
 
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;
28
+ $color-body: $color-navy;
29
+ $color-headings: $color-gray-900;
30
+ $bg-body: $color-white;
31
+ $color-link: $deprecated-gamut-royal-blue-500;
32
+ $hover-color-link: $deprecated-gamut-royal-blue-600;
36
33
  $decoration-link: none;
37
34
  $hover-decoration-link: underline;
38
35
 
39
36
  // Font margins
40
37
 
41
- $margin-bottom-paragraph: base.$spacer;
42
- $margin-bottom-headings: base.$spacer;
38
+ $margin-bottom-paragraph: $spacer;
39
+ $margin-bottom-headings: $spacer;
43
40
  $margin-bottom-label: 0;
44
41
  $line-height-base: 1.5;
45
42
  $line-height-headings: 1.1;
46
43
 
47
44
  // Font sizes
48
45
 
49
- $font-size-base: base.$base-unit;
46
+ $font-size-base: $base-unit;
50
47
  $font-size-h1: px-rem(64);
51
48
  $font-size-h2: px-rem(44);
52
49
  $font-size-h3: px-rem(34);
package/utils/variables/index.scss CHANGED
@@ -1,5 +1,5 @@
1
- @forward "colors";
2
- @forward "base";
3
- @forward "grid";
4
- @forward "typography";
5
- @forward "responsive";
1
+ @import "colors";
2
+ @import "base";
3
+ @import "grid";
4
+ @import "typography";
5
+ @import "responsive";
package/utils.scss CHANGED
@@ -1 +1 @@
1
- @forward "utils/index";
1
+ @import "utils/index";