@codecademy/gamut-styles 17.10.0-alpha.4e9d26.0 → 17.10.0-alpha.a4fb2a.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.
Files changed (5) hide show
  1. package/dist/themes/percipio.d.ts +15 -51
  2. package/dist/themes/percipio.js +7 -13
  3. package/dist/variables/colors.d.ts +0 -24
  4. package/dist/variables/colors.js +0 -14
  5. package/package.json +2 -2
package/dist/themes/percipio.d.ts CHANGED
@@ -531,24 +531,12 @@ export declare const percipioTheme: Record<"breakpoints", {
531
531
  percipioTextSecondary: "rgba(34, 35, 37, 0.75)";
532
532
  percipioTextDisabled: "#AFB6C2";
533
533
  percipioTextAccent: "#222325";
534
- percipioBgDefault: "#FFFFFF";
535
534
  percipioBgPrimary: "#FAFBFC";
536
- percipioBgContrast: "#FFFFFF";
537
- percipioBgHover: "rgba(16, 22, 47, 0.12)";
538
- percipioBgSelected: "rgba(16, 22, 47, 0.04)";
539
- percipioBgDisabled: "rgba(16, 22, 47, 0.12)";
540
535
  percipioBgSuccess: "#EEF7F3";
541
536
  percipioBgWarning: "#FFF7E0";
542
537
  percipioBgError: "#FFF1F5";
543
- percipioBorderPrimary: "rgba(16, 22, 47, 0.47)";
544
- percipioBorderSecondary: "rgba(16, 22, 47, 0.12)";
545
- percipioBorderTertiary: "#10162F";
546
- percipioBorderDisabled: "rgba(16, 22, 47, 0.28)";
547
- percipioShadowPrimary: "rgba(16, 22, 47, 0.12)";
548
- percipioShadowSecondary: "rgba(16, 22, 47, 0.47)";
549
538
  percipioActionPrimary: "#0073C4";
550
539
  percipioActionPrimaryHover: "#141C36";
551
- percipioActionPrimaryInverse: "#FFFFFF";
552
540
  percipioActionSecondary: "#6A6E75";
553
541
  percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
554
542
  percipioActionDanger: "#B83C3C";
@@ -638,25 +626,19 @@ export declare const percipioTheme: Record<"breakpoints", {
638
626
  warning: "percipioFeedbackWarning";
639
627
  };
640
628
  background: {
641
- _: "percipioBgDefault";
642
- contrast: "percipioBgContrast";
643
- current: "percipioBgDefault";
644
629
  primary: "percipioBgPrimary";
645
- selected: "percipioBgSelected";
646
- disabled: "percipioBgDisabled";
647
- hover: "percipioBgHover";
648
630
  success: "percipioBgSuccess";
649
631
  warning: "percipioBgWarning";
650
632
  error: "percipioBgError";
651
633
  };
652
634
  shadow: {
653
- primary: "percipioShadowPrimary";
654
- secondary: "percipioShadowSecondary";
635
+ primary: "navy-200";
636
+ secondary: "navy-400";
655
637
  };
656
638
  primary: {
657
639
  _: "percipioActionPrimary";
658
640
  hover: "percipioActionPrimaryHover";
659
- inverse: "percipioActionPrimaryInverse";
641
+ inverse: "white";
660
642
  };
661
643
  secondary: {
662
644
  _: "percipioActionSecondary";
@@ -671,10 +653,10 @@ export declare const percipioTheme: Record<"breakpoints", {
671
653
  hover: "percipioActionPrimaryHover";
672
654
  };
673
655
  border: {
674
- primary: "percipioBorderPrimary";
675
- secondary: "percipioBorderSecondary";
676
- tertiary: "percipioBorderTertiary";
677
- disabled: "percipioBorderDisabled";
656
+ primary: "navy-400";
657
+ secondary: "navy-200";
658
+ tertiary: "navy-800";
659
+ disabled: "navy-300";
678
660
  };
679
661
  }, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
680
662
  readonly beige: "#FFF0E5";
@@ -921,24 +903,12 @@ export declare const percipioTheme: Record<"breakpoints", {
921
903
  percipioTextSecondary: "rgba(34, 35, 37, 0.75)";
922
904
  percipioTextDisabled: "#AFB6C2";
923
905
  percipioTextAccent: "#222325";
924
- percipioBgDefault: "#FFFFFF";
925
906
  percipioBgPrimary: "#FAFBFC";
926
- percipioBgContrast: "#FFFFFF";
927
- percipioBgHover: "rgba(16, 22, 47, 0.12)";
928
- percipioBgSelected: "rgba(16, 22, 47, 0.04)";
929
- percipioBgDisabled: "rgba(16, 22, 47, 0.12)";
930
907
  percipioBgSuccess: "#EEF7F3";
931
908
  percipioBgWarning: "#FFF7E0";
932
909
  percipioBgError: "#FFF1F5";
933
- percipioBorderPrimary: "rgba(16, 22, 47, 0.47)";
934
- percipioBorderSecondary: "rgba(16, 22, 47, 0.12)";
935
- percipioBorderTertiary: "#10162F";
936
- percipioBorderDisabled: "rgba(16, 22, 47, 0.28)";
937
- percipioShadowPrimary: "rgba(16, 22, 47, 0.12)";
938
- percipioShadowSecondary: "rgba(16, 22, 47, 0.47)";
939
910
  percipioActionPrimary: "#0073C4";
940
911
  percipioActionPrimaryHover: "#141C36";
941
- percipioActionPrimaryInverse: "#FFFFFF";
942
912
  percipioActionSecondary: "#6A6E75";
943
913
  percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
944
914
  percipioActionDanger: "#B83C3C";
@@ -1134,25 +1104,19 @@ export declare const percipioTheme: Record<"breakpoints", {
1134
1104
  warning: "percipioFeedbackWarning";
1135
1105
  };
1136
1106
  background: {
1137
- _: "percipioBgDefault";
1138
- contrast: "percipioBgContrast";
1139
- current: "percipioBgDefault";
1140
1107
  primary: "percipioBgPrimary";
1141
- selected: "percipioBgSelected";
1142
- disabled: "percipioBgDisabled";
1143
- hover: "percipioBgHover";
1144
1108
  success: "percipioBgSuccess";
1145
1109
  warning: "percipioBgWarning";
1146
1110
  error: "percipioBgError";
1147
1111
  };
1148
1112
  shadow: {
1149
- primary: "percipioShadowPrimary";
1150
- secondary: "percipioShadowSecondary";
1113
+ primary: "navy-200";
1114
+ secondary: "navy-400";
1151
1115
  };
1152
1116
  primary: {
1153
1117
  _: "percipioActionPrimary";
1154
1118
  hover: "percipioActionPrimaryHover";
1155
- inverse: "percipioActionPrimaryInverse";
1119
+ inverse: "white";
1156
1120
  };
1157
1121
  secondary: {
1158
1122
  _: "percipioActionSecondary";
@@ -1167,15 +1131,15 @@ export declare const percipioTheme: Record<"breakpoints", {
1167
1131
  hover: "percipioActionPrimaryHover";
1168
1132
  };
1169
1133
  border: {
1170
- primary: "percipioBorderPrimary";
1171
- secondary: "percipioBorderSecondary";
1172
- tertiary: "percipioBorderTertiary";
1173
- disabled: "percipioBorderDisabled";
1134
+ primary: "navy-400";
1135
+ secondary: "navy-200";
1136
+ tertiary: "navy-800";
1137
+ disabled: "navy-300";
1174
1138
  };
1175
1139
  }, "-", "_">;
1176
1140
  }>;
1177
1141
  mode: "light";
1178
- _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "black" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "percipioTextPrimary" | "percipioTextSecondary" | "percipioTextDisabled" | "percipioTextAccent" | "percipioBgDefault" | "percipioBgPrimary" | "percipioBgContrast" | "percipioBgHover" | "percipioBgSelected" | "percipioBgDisabled" | "percipioBgSuccess" | "percipioBgWarning" | "percipioBgError" | "percipioBorderPrimary" | "percipioBorderSecondary" | "percipioBorderTertiary" | "percipioBorderDisabled" | "percipioShadowPrimary" | "percipioShadowSecondary" | "percipioActionPrimary" | "percipioActionPrimaryHover" | "percipioActionPrimaryInverse" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDanger" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioFeedbackError") => string;
1142
+ _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "black" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "percipioTextPrimary" | "percipioTextSecondary" | "percipioTextDisabled" | "percipioTextAccent" | "percipioBgPrimary" | "percipioBgSuccess" | "percipioBgWarning" | "percipioBgError" | "percipioActionPrimary" | "percipioActionPrimaryHover" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDanger" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioFeedbackError") => string;
1179
1143
  }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
1180
1144
  export type PercipioThemeShape = typeof percipioTheme;
1181
1145
  export interface PercipioTheme extends PercipioThemeShape {
package/dist/themes/percipio.js CHANGED
@@ -25,25 +25,19 @@ export const percipioTheme = createTheme({
25
25
  warning: 'percipioFeedbackWarning'
26
26
  },
27
27
  background: {
28
- _: 'percipioBgDefault',
29
- contrast: 'percipioBgContrast',
30
- current: 'percipioBgDefault',
31
28
  primary: 'percipioBgPrimary',
32
- selected: 'percipioBgSelected',
33
- disabled: 'percipioBgDisabled',
34
- hover: 'percipioBgHover',
35
29
  success: 'percipioBgSuccess',
36
30
  warning: 'percipioBgWarning',
37
31
  error: 'percipioBgError'
38
32
  },
39
33
  shadow: {
40
- primary: 'percipioShadowPrimary',
41
- secondary: 'percipioShadowSecondary'
34
+ primary: 'navy-200',
35
+ secondary: 'navy-400'
42
36
  },
43
37
  primary: {
44
38
  _: 'percipioActionPrimary',
45
39
  hover: 'percipioActionPrimaryHover',
46
- inverse: 'percipioActionPrimaryInverse'
40
+ inverse: 'white'
47
41
  },
48
42
  secondary: {
49
43
  _: 'percipioActionSecondary',
@@ -58,10 +52,10 @@ export const percipioTheme = createTheme({
58
52
  hover: 'percipioActionPrimaryHover'
59
53
  },
60
54
  border: {
61
- primary: 'percipioBorderPrimary',
62
- secondary: 'percipioBorderSecondary',
63
- tertiary: 'percipioBorderTertiary',
64
- disabled: 'percipioBorderDisabled'
55
+ primary: 'navy-400',
56
+ secondary: 'navy-200',
57
+ tertiary: 'navy-800',
58
+ disabled: 'navy-300'
65
59
  }
66
60
  }
67
61
  }).build();
package/dist/variables/colors.d.ts CHANGED
@@ -316,24 +316,12 @@ export declare const percipioColors: {
316
316
  readonly percipioTextSecondary: "rgba(34, 35, 37, 0.75)";
317
317
  readonly percipioTextDisabled: "#AFB6C2";
318
318
  readonly percipioTextAccent: "#222325";
319
- readonly percipioBgDefault: "#FFFFFF";
320
319
  readonly percipioBgPrimary: "#FAFBFC";
321
- readonly percipioBgContrast: "#FFFFFF";
322
- readonly percipioBgHover: "rgba(16, 22, 47, 0.12)";
323
- readonly percipioBgSelected: "rgba(16, 22, 47, 0.04)";
324
- readonly percipioBgDisabled: "rgba(16, 22, 47, 0.12)";
325
320
  readonly percipioBgSuccess: "#EEF7F3";
326
321
  readonly percipioBgWarning: "#FFF7E0";
327
322
  readonly percipioBgError: "#FFF1F5";
328
- readonly percipioBorderPrimary: "rgba(16, 22, 47, 0.47)";
329
- readonly percipioBorderSecondary: "rgba(16, 22, 47, 0.12)";
330
- readonly percipioBorderTertiary: "#10162F";
331
- readonly percipioBorderDisabled: "rgba(16, 22, 47, 0.28)";
332
- readonly percipioShadowPrimary: "rgba(16, 22, 47, 0.12)";
333
- readonly percipioShadowSecondary: "rgba(16, 22, 47, 0.47)";
334
323
  readonly percipioActionPrimary: "#0073C4";
335
324
  readonly percipioActionPrimaryHover: "#141C36";
336
- readonly percipioActionPrimaryInverse: "#FFFFFF";
337
325
  readonly percipioActionSecondary: "#6A6E75";
338
326
  readonly percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
339
327
  readonly percipioActionDanger: "#B83C3C";
@@ -347,24 +335,12 @@ export declare const percipioPalette: {
347
335
  percipioTextSecondary: "rgba(34, 35, 37, 0.75)";
348
336
  percipioTextDisabled: "#AFB6C2";
349
337
  percipioTextAccent: "#222325";
350
- percipioBgDefault: "#FFFFFF";
351
338
  percipioBgPrimary: "#FAFBFC";
352
- percipioBgContrast: "#FFFFFF";
353
- percipioBgHover: "rgba(16, 22, 47, 0.12)";
354
- percipioBgSelected: "rgba(16, 22, 47, 0.04)";
355
- percipioBgDisabled: "rgba(16, 22, 47, 0.12)";
356
339
  percipioBgSuccess: "#EEF7F3";
357
340
  percipioBgWarning: "#FFF7E0";
358
341
  percipioBgError: "#FFF1F5";
359
- percipioBorderPrimary: "rgba(16, 22, 47, 0.47)";
360
- percipioBorderSecondary: "rgba(16, 22, 47, 0.12)";
361
- percipioBorderTertiary: "#10162F";
362
- percipioBorderDisabled: "rgba(16, 22, 47, 0.28)";
363
- percipioShadowPrimary: "rgba(16, 22, 47, 0.12)";
364
- percipioShadowSecondary: "rgba(16, 22, 47, 0.47)";
365
342
  percipioActionPrimary: "#0073C4";
366
343
  percipioActionPrimaryHover: "#141C36";
367
- percipioActionPrimaryInverse: "#FFFFFF";
368
344
  percipioActionSecondary: "#6A6E75";
369
345
  percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
370
346
  percipioActionDanger: "#B83C3C";
package/dist/variables/colors.js CHANGED
@@ -180,27 +180,13 @@ export const percipioColors = {
180
180
  percipioTextDisabled: '#AFB6C2',
181
181
  percipioTextAccent: '#222325',
182
182
  // Background colors
183
- percipioBgDefault: '#FFFFFF',
184
183
  percipioBgPrimary: '#FAFBFC',
185
- percipioBgContrast: '#FFFFFF',
186
- percipioBgHover: 'rgba(16, 22, 47, 0.12)',
187
- percipioBgSelected: 'rgba(16, 22, 47, 0.04)',
188
- percipioBgDisabled: 'rgba(16, 22, 47, 0.12)',
189
184
  percipioBgSuccess: '#EEF7F3',
190
185
  percipioBgWarning: '#FFF7E0',
191
186
  percipioBgError: '#FFF1F5',
192
- // Border colors
193
- percipioBorderPrimary: 'rgba(16, 22, 47, 0.47)',
194
- percipioBorderSecondary: 'rgba(16, 22, 47, 0.12)',
195
- percipioBorderTertiary: '#10162F',
196
- percipioBorderDisabled: 'rgba(16, 22, 47, 0.28)',
197
- // Shadow colors
198
- percipioShadowPrimary: 'rgba(16, 22, 47, 0.12)',
199
- percipioShadowSecondary: 'rgba(16, 22, 47, 0.47)',
200
187
  // Action colors
201
188
  percipioActionPrimary: '#0073C4',
202
189
  percipioActionPrimaryHover: '#141C36',
203
- percipioActionPrimaryInverse: '#FFFFFF',
204
190
  percipioActionSecondary: '#6A6E75',
205
191
  percipioActionSecondaryHover: 'rgba(106, 110, 117, 0.86)',
206
192
  percipioActionDanger: '#B83C3C',
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.10.0-alpha.4e9d26.0",
4
+ "version": "17.10.0-alpha.a4fb2a.0",
5
5
  "author": "Jake Hiller <jake@codecademy.com>",
6
6
  "dependencies": {
7
7
  "@codecademy/variance": "0.24.0",
@@ -34,5 +34,5 @@
34
34
  "scripts": {
35
35
  "build": "nx build @codecademy/gamut-styles"
36
36
  },
37
- "gitHead": "06f20422fc4e5b287dd795d6828b9eb981975d8a"
37
+ "gitHead": "7cc86606fddf97d0b2c8e2439afaf4ed20ecb961"
38
38
  }