@codecademy/gamut-styles 17.14.1-alpha.fbe641.0 → 18.0.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/dist/remoteAssets/fonts.d.ts +2 -2
- package/dist/remoteAssets/fonts.js +79 -26
- package/dist/themes/lxStudio.d.ts +18 -19
- package/dist/themes/lxStudio.js +7 -6
- package/dist/themes/percipio.d.ts +15 -14
- package/dist/themes/percipio.js +4 -10
- package/dist/variables/colors.d.ts +6 -6
- package/dist/variables/colors.js +6 -3
- package/dist/variables/typography.d.ts +13 -3
- package/dist/variables/typography.js +14 -3
- package/package.json +2 -2
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { FontConfig } from '../utilities/fontUtils';
|
|
1
|
+
import type { FontConfig } from '../utilities/fontUtils';
|
|
2
2
|
export declare const FONT_ASSET_PATH = "https://www.codecademy.com/gamut";
|
|
3
3
|
export declare const core: readonly FontConfig[];
|
|
4
|
+
/** Percipio: Skillsoft (accent/base) plus Roboto system + Roboto Mono monospace. */
|
|
4
5
|
export declare const percipio: readonly FontConfig[];
|
|
5
|
-
export declare const lxStudio: readonly FontConfig[];
|
|
6
6
|
export declare const webFonts: {
|
|
7
7
|
readonly core: readonly FontConfig[];
|
|
8
8
|
readonly percipio: readonly FontConfig[];
|
|
@@ -32,7 +32,80 @@ export const core = [{
|
|
|
32
32
|
extensions,
|
|
33
33
|
name: 'Suisse'
|
|
34
34
|
}];
|
|
35
|
-
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Skillsoft Sans (accent) + Skillsoft Text (base).
|
|
38
|
+
* Weights 400 / 500 / 700 + italics; 500 uses Medium files for title/bold tokens.
|
|
39
|
+
*/
|
|
40
|
+
const skillsoftFamilyFonts = [{
|
|
41
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftText-Regular`,
|
|
42
|
+
extensions,
|
|
43
|
+
name: 'Skillsoft Text'
|
|
44
|
+
}, {
|
|
45
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftText-RegularItalic`,
|
|
46
|
+
extensions,
|
|
47
|
+
name: 'Skillsoft Text',
|
|
48
|
+
style: 'italic'
|
|
49
|
+
}, {
|
|
50
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftText-Medium`,
|
|
51
|
+
extensions,
|
|
52
|
+
name: 'Skillsoft Text',
|
|
53
|
+
weight: 500
|
|
54
|
+
}, {
|
|
55
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftText-MediumItalic`,
|
|
56
|
+
extensions,
|
|
57
|
+
name: 'Skillsoft Text',
|
|
58
|
+
weight: 500,
|
|
59
|
+
style: 'italic'
|
|
60
|
+
}, {
|
|
61
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftText-Bold`,
|
|
62
|
+
extensions,
|
|
63
|
+
name: 'Skillsoft Text',
|
|
64
|
+
weight: 700
|
|
65
|
+
}, {
|
|
66
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftText-BoldItalic`,
|
|
67
|
+
extensions,
|
|
68
|
+
name: 'Skillsoft Text',
|
|
69
|
+
weight: 700,
|
|
70
|
+
style: 'italic'
|
|
71
|
+
}, {
|
|
72
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftSans-Regular`,
|
|
73
|
+
extensions,
|
|
74
|
+
name: 'Skillsoft Sans'
|
|
75
|
+
}, {
|
|
76
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftSans-RegularItalic`,
|
|
77
|
+
extensions,
|
|
78
|
+
name: 'Skillsoft Sans',
|
|
79
|
+
style: 'italic'
|
|
80
|
+
}, {
|
|
81
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftSans-Medium`,
|
|
82
|
+
extensions,
|
|
83
|
+
name: 'Skillsoft Sans',
|
|
84
|
+
weight: 500
|
|
85
|
+
}, {
|
|
86
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftSans-MediumItalic`,
|
|
87
|
+
extensions,
|
|
88
|
+
name: 'Skillsoft Sans',
|
|
89
|
+
weight: 500,
|
|
90
|
+
style: 'italic'
|
|
91
|
+
}, {
|
|
92
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftSans-Bold`,
|
|
93
|
+
extensions,
|
|
94
|
+
name: 'Skillsoft Sans',
|
|
95
|
+
weight: 700
|
|
96
|
+
}, {
|
|
97
|
+
filePath: `${FONT_ASSET_PATH}/SkillsoftSans-BoldItalic`,
|
|
98
|
+
extensions,
|
|
99
|
+
name: 'Skillsoft Sans',
|
|
100
|
+
weight: 700,
|
|
101
|
+
style: 'italic'
|
|
102
|
+
}];
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Roboto + Roboto Mono for Percipio `system` and `monospace` theme slots.
|
|
106
|
+
* The default weight for bold fonts is 700; Percipio uses 500 for the base bold.
|
|
107
|
+
*/
|
|
108
|
+
const percipioRobotoFonts = [{
|
|
36
109
|
filePath: `${FONT_ASSET_PATH}/roboto-regular`,
|
|
37
110
|
extensions,
|
|
38
111
|
name: 'Roboto'
|
|
@@ -41,9 +114,7 @@ export const percipio = [{
|
|
|
41
114
|
extensions,
|
|
42
115
|
name: 'Roboto',
|
|
43
116
|
style: 'italic'
|
|
44
|
-
},
|
|
45
|
-
// The default weight for bold fonts is 700, Percipio uses 500 for the base bold
|
|
46
|
-
{
|
|
117
|
+
}, {
|
|
47
118
|
filePath: `${FONT_ASSET_PATH}/roboto-bold`,
|
|
48
119
|
extensions,
|
|
49
120
|
name: 'Roboto',
|
|
@@ -75,29 +146,11 @@ export const percipio = [{
|
|
|
75
146
|
name: 'Roboto Mono',
|
|
76
147
|
weight: 'bold'
|
|
77
148
|
}];
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
name: 'Hanken Grotesk'
|
|
82
|
-
}, {
|
|
83
|
-
filePath: `${FONT_ASSET_PATH}/hanken-grotesk-italic`,
|
|
84
|
-
extensions,
|
|
85
|
-
name: 'Hanken Grotesk',
|
|
86
|
-
style: 'italic'
|
|
87
|
-
}, {
|
|
88
|
-
filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold`,
|
|
89
|
-
extensions,
|
|
90
|
-
name: 'Hanken Grotesk',
|
|
91
|
-
weight: 'bold'
|
|
92
|
-
}, {
|
|
93
|
-
filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold-italic`,
|
|
94
|
-
extensions,
|
|
95
|
-
name: 'Hanken Grotesk',
|
|
96
|
-
weight: 'bold',
|
|
97
|
-
style: 'italic'
|
|
98
|
-
}];
|
|
149
|
+
|
|
150
|
+
/** Percipio: Skillsoft (accent/base) plus Roboto system + Roboto Mono monospace. */
|
|
151
|
+
export const percipio = [...skillsoftFamilyFonts, ...percipioRobotoFonts];
|
|
99
152
|
export const webFonts = {
|
|
100
153
|
core,
|
|
101
154
|
percipio,
|
|
102
|
-
lxStudio
|
|
155
|
+
lxStudio: percipio
|
|
103
156
|
};
|
|
@@ -52,11 +52,19 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
52
52
|
full: string;
|
|
53
53
|
};
|
|
54
54
|
fontFamily: {
|
|
55
|
-
readonly accent: "\"
|
|
56
|
-
readonly base: "\"
|
|
55
|
+
readonly accent: "\"Skillsoft Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
56
|
+
readonly base: "\"Skillsoft Text\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
57
57
|
readonly monospace: "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
|
|
58
58
|
readonly system: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
|
|
59
59
|
};
|
|
60
|
+
fontWeight: {
|
|
61
|
+
readonly title: 500;
|
|
62
|
+
readonly bold: 500;
|
|
63
|
+
readonly 500: 500;
|
|
64
|
+
readonly base: 400;
|
|
65
|
+
readonly 700: 700;
|
|
66
|
+
readonly 400: 400;
|
|
67
|
+
};
|
|
60
68
|
breakpoints: {
|
|
61
69
|
c_base: string;
|
|
62
70
|
c_xs: string;
|
|
@@ -99,12 +107,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
99
107
|
readonly spacedTitle: 1.3;
|
|
100
108
|
readonly title: 1.2;
|
|
101
109
|
};
|
|
102
|
-
fontWeight: {
|
|
103
|
-
readonly base: 400;
|
|
104
|
-
readonly title: 700;
|
|
105
|
-
readonly 700: 700;
|
|
106
|
-
readonly 400: 400;
|
|
107
|
-
};
|
|
108
110
|
spacing: {
|
|
109
111
|
readonly 0: 0;
|
|
110
112
|
readonly 4: string;
|
|
@@ -546,8 +548,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
546
548
|
} & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
547
549
|
lxStudioSuccess: "#06844F";
|
|
548
550
|
lxStudioBgPrimary: "#FAFBFC";
|
|
549
|
-
|
|
550
|
-
lxStudioPurpleHover: "#7955FC";
|
|
551
|
+
sapphire: "#1C50BB";
|
|
551
552
|
beige: "#FFF0E5";
|
|
552
553
|
blue: "#1557FF";
|
|
553
554
|
green: "#008A27";
|
|
@@ -628,8 +629,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
628
629
|
primary: "navy-200";
|
|
629
630
|
};
|
|
630
631
|
primary: {
|
|
631
|
-
_: "
|
|
632
|
-
hover: "
|
|
632
|
+
_: "sapphire";
|
|
633
|
+
hover: "navy-800";
|
|
633
634
|
};
|
|
634
635
|
interface: {
|
|
635
636
|
_: "hyper-500";
|
|
@@ -883,8 +884,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
883
884
|
}, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
884
885
|
lxStudioSuccess: "#06844F";
|
|
885
886
|
lxStudioBgPrimary: "#FAFBFC";
|
|
886
|
-
|
|
887
|
-
lxStudioPurpleHover: "#7955FC";
|
|
887
|
+
sapphire: "#1C50BB";
|
|
888
888
|
beige: "#FFF0E5";
|
|
889
889
|
blue: "#1557FF";
|
|
890
890
|
green: "#008A27";
|
|
@@ -1071,8 +1071,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
1071
1071
|
primary: "navy-200";
|
|
1072
1072
|
};
|
|
1073
1073
|
primary: {
|
|
1074
|
-
_: "
|
|
1075
|
-
hover: "
|
|
1074
|
+
_: "sapphire";
|
|
1075
|
+
hover: "navy-800";
|
|
1076
1076
|
};
|
|
1077
1077
|
interface: {
|
|
1078
1078
|
_: "hyper-500";
|
|
@@ -1086,8 +1086,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
1086
1086
|
}, "-", "_">;
|
|
1087
1087
|
}>;
|
|
1088
1088
|
mode: "light";
|
|
1089
|
-
_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-accent" | "text-disabled" | "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" | "lxStudioSuccess" | "lxStudioBgPrimary" | "
|
|
1089
|
+
_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-accent" | "text-disabled" | "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" | "lxStudioSuccess" | "lxStudioBgPrimary" | "sapphire") => string;
|
|
1090
1090
|
}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
|
|
1091
1091
|
export type LxStudioThemeShape = typeof lxStudioTheme;
|
|
1092
|
-
export
|
|
1093
|
-
}
|
|
1092
|
+
export type LxStudioTheme = LxStudioThemeShape;
|
package/dist/themes/lxStudio.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createTheme } from '@codecademy/variance';
|
|
2
|
-
import {
|
|
2
|
+
import { fontMonospace, fontSystem, fontWeightMediumTitle, lxStudioPalette, percipioFontFamily } from '../variables';
|
|
3
3
|
import { coreTheme } from './core';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -8,8 +8,8 @@ import { coreTheme } from './core';
|
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
const lxStudioFontFamily = {
|
|
11
|
-
accent:
|
|
12
|
-
base:
|
|
11
|
+
accent: percipioFontFamily.accent,
|
|
12
|
+
base: percipioFontFamily.base,
|
|
13
13
|
monospace: fontMonospace,
|
|
14
14
|
system: fontSystem
|
|
15
15
|
};
|
|
@@ -24,7 +24,8 @@ export const lxStudioBorderRadii = {
|
|
|
24
24
|
export const lxStudioTheme = createTheme({
|
|
25
25
|
...coreTheme,
|
|
26
26
|
borderRadii: lxStudioBorderRadii,
|
|
27
|
-
fontFamily: lxStudioFontFamily
|
|
27
|
+
fontFamily: lxStudioFontFamily,
|
|
28
|
+
fontWeight: fontWeightMediumTitle
|
|
28
29
|
}).addColors(lxStudioPalette).addColorModes('light', {
|
|
29
30
|
// these are just the overrides, the rest of the tokens are inherited from coreTheme
|
|
30
31
|
light: {
|
|
@@ -38,8 +39,8 @@ export const lxStudioTheme = createTheme({
|
|
|
38
39
|
primary: 'navy-200'
|
|
39
40
|
},
|
|
40
41
|
primary: {
|
|
41
|
-
_: '
|
|
42
|
-
hover: '
|
|
42
|
+
_: 'sapphire',
|
|
43
|
+
hover: 'navy-800'
|
|
43
44
|
},
|
|
44
45
|
interface: {
|
|
45
46
|
_: 'hyper-500',
|
|
@@ -36,17 +36,18 @@ export declare const percipioTheme: Record<"breakpoints", {
|
|
|
36
36
|
xl: string;
|
|
37
37
|
}> & import("@codecademy/variance/dist/createTheme/types").Merge<{
|
|
38
38
|
fontFamily: {
|
|
39
|
-
readonly accent: "\"Roboto\",
|
|
40
|
-
readonly base: "\"Roboto\",
|
|
39
|
+
readonly accent: "\"Skillsoft Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
40
|
+
readonly base: "\"Skillsoft Text\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
41
41
|
readonly monospace: "\"Roboto Mono\", monospace";
|
|
42
42
|
readonly system: "\"Roboto\", sans-serif";
|
|
43
43
|
};
|
|
44
44
|
fontWeight: {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
45
|
+
readonly title: 500;
|
|
46
|
+
readonly bold: 500;
|
|
47
|
+
readonly 500: 500;
|
|
48
|
+
readonly base: 400;
|
|
49
|
+
readonly 700: 700;
|
|
50
|
+
readonly 400: 400;
|
|
50
51
|
};
|
|
51
52
|
breakpoints: {
|
|
52
53
|
c_base: string;
|
|
@@ -545,7 +546,7 @@ export declare const percipioTheme: Record<"breakpoints", {
|
|
|
545
546
|
percipioBgSuccess: "#EEF7F3";
|
|
546
547
|
percipioBgWarning: "#FFF7E0";
|
|
547
548
|
percipioBgError: "#FFF1F5";
|
|
548
|
-
|
|
549
|
+
sapphire: "#1C50BB";
|
|
549
550
|
percipioActionPrimaryHover: "#141C36";
|
|
550
551
|
percipioActionSecondary: "#6A6E75";
|
|
551
552
|
percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
|
|
@@ -645,7 +646,7 @@ export declare const percipioTheme: Record<"breakpoints", {
|
|
|
645
646
|
secondary: "navy-400";
|
|
646
647
|
};
|
|
647
648
|
primary: {
|
|
648
|
-
_: "
|
|
649
|
+
_: "sapphire";
|
|
649
650
|
hover: "percipioActionPrimaryHover";
|
|
650
651
|
inverse: "white";
|
|
651
652
|
};
|
|
@@ -658,7 +659,7 @@ export declare const percipioTheme: Record<"breakpoints", {
|
|
|
658
659
|
hover: "percipioActionDangerHover";
|
|
659
660
|
};
|
|
660
661
|
interface: {
|
|
661
|
-
_: "
|
|
662
|
+
_: "sapphire";
|
|
662
663
|
hover: "percipioActionPrimaryHover";
|
|
663
664
|
};
|
|
664
665
|
border: {
|
|
@@ -916,7 +917,7 @@ export declare const percipioTheme: Record<"breakpoints", {
|
|
|
916
917
|
percipioBgSuccess: "#EEF7F3";
|
|
917
918
|
percipioBgWarning: "#FFF7E0";
|
|
918
919
|
percipioBgError: "#FFF1F5";
|
|
919
|
-
|
|
920
|
+
sapphire: "#1C50BB";
|
|
920
921
|
percipioActionPrimaryHover: "#141C36";
|
|
921
922
|
percipioActionSecondary: "#6A6E75";
|
|
922
923
|
percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
|
|
@@ -1122,7 +1123,7 @@ export declare const percipioTheme: Record<"breakpoints", {
|
|
|
1122
1123
|
secondary: "navy-400";
|
|
1123
1124
|
};
|
|
1124
1125
|
primary: {
|
|
1125
|
-
_: "
|
|
1126
|
+
_: "sapphire";
|
|
1126
1127
|
hover: "percipioActionPrimaryHover";
|
|
1127
1128
|
inverse: "white";
|
|
1128
1129
|
};
|
|
@@ -1135,7 +1136,7 @@ export declare const percipioTheme: Record<"breakpoints", {
|
|
|
1135
1136
|
hover: "percipioActionDangerHover";
|
|
1136
1137
|
};
|
|
1137
1138
|
interface: {
|
|
1138
|
-
_: "
|
|
1139
|
+
_: "sapphire";
|
|
1139
1140
|
hover: "percipioActionPrimaryHover";
|
|
1140
1141
|
};
|
|
1141
1142
|
border: {
|
|
@@ -1147,7 +1148,7 @@ export declare const percipioTheme: Record<"breakpoints", {
|
|
|
1147
1148
|
}, "-", "_">;
|
|
1148
1149
|
}>;
|
|
1149
1150
|
mode: "light";
|
|
1150
|
-
_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-accent" | "text-disabled" | "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" | "
|
|
1151
|
+
_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-accent" | "text-disabled" | "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" | "sapphire" | "percipioTextPrimary" | "percipioTextSecondary" | "percipioTextDisabled" | "percipioTextAccent" | "percipioBgPrimary" | "percipioBgSuccess" | "percipioBgWarning" | "percipioBgError" | "percipioActionPrimaryHover" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioDanger") => string;
|
|
1151
1152
|
}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
|
|
1152
1153
|
export type PercipioThemeShape = typeof percipioTheme;
|
|
1153
1154
|
export interface PercipioTheme extends PercipioThemeShape {
|
package/dist/themes/percipio.js
CHANGED
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import { createTheme } from '@codecademy/variance';
|
|
2
|
-
import { percipioFontFamily, percipioPalette } from '../variables';
|
|
2
|
+
import { fontWeightMediumTitle, percipioFontFamily, percipioPalette } from '../variables';
|
|
3
3
|
import { coreTheme } from './core';
|
|
4
4
|
export const percipioTheme = createTheme({
|
|
5
5
|
...coreTheme,
|
|
6
6
|
fontFamily: percipioFontFamily,
|
|
7
|
-
fontWeight:
|
|
8
|
-
base: 400,
|
|
9
|
-
title: 500,
|
|
10
|
-
bold: 500,
|
|
11
|
-
700: 700,
|
|
12
|
-
400: 400
|
|
13
|
-
}
|
|
7
|
+
fontWeight: fontWeightMediumTitle
|
|
14
8
|
}).addColors(percipioPalette).addColorModes('light', {
|
|
15
9
|
// these are just the overrides, the rest of the tokens are inherited from coreTheme
|
|
16
10
|
light: {
|
|
@@ -36,7 +30,7 @@ export const percipioTheme = createTheme({
|
|
|
36
30
|
secondary: 'navy-400'
|
|
37
31
|
},
|
|
38
32
|
primary: {
|
|
39
|
-
_: '
|
|
33
|
+
_: 'sapphire',
|
|
40
34
|
hover: 'percipioActionPrimaryHover',
|
|
41
35
|
inverse: 'white'
|
|
42
36
|
},
|
|
@@ -49,7 +43,7 @@ export const percipioTheme = createTheme({
|
|
|
49
43
|
hover: 'percipioActionDangerHover'
|
|
50
44
|
},
|
|
51
45
|
interface: {
|
|
52
|
-
_: '
|
|
46
|
+
_: 'sapphire',
|
|
53
47
|
hover: 'percipioActionPrimaryHover'
|
|
54
48
|
},
|
|
55
49
|
border: {
|
|
@@ -228,17 +228,17 @@ export declare const platformPalette: {
|
|
|
228
228
|
/**
|
|
229
229
|
* LX Studio Colors
|
|
230
230
|
*/
|
|
231
|
+
/** Primary brand blue; used by LX Studio and Percipio theme `primary` tokens */
|
|
232
|
+
export declare const sapphire = "#1C50BB";
|
|
231
233
|
export declare const lxStudioColors: {
|
|
232
234
|
readonly lxStudioSuccess: "#06844F";
|
|
233
235
|
readonly lxStudioBgPrimary: "#FAFBFC";
|
|
234
|
-
readonly
|
|
235
|
-
readonly lxStudioPurpleHover: "#7955FC";
|
|
236
|
+
readonly sapphire: "#1C50BB";
|
|
236
237
|
};
|
|
237
238
|
export declare const lxStudioPalette: {
|
|
238
239
|
lxStudioSuccess: "#06844F";
|
|
239
240
|
lxStudioBgPrimary: "#FAFBFC";
|
|
240
|
-
|
|
241
|
-
lxStudioPurpleHover: "#7955FC";
|
|
241
|
+
sapphire: "#1C50BB";
|
|
242
242
|
beige: "#FFF0E5";
|
|
243
243
|
blue: "#1557FF";
|
|
244
244
|
green: "#008A27";
|
|
@@ -320,7 +320,7 @@ export declare const percipioColors: {
|
|
|
320
320
|
readonly percipioBgSuccess: "#EEF7F3";
|
|
321
321
|
readonly percipioBgWarning: "#FFF7E0";
|
|
322
322
|
readonly percipioBgError: "#FFF1F5";
|
|
323
|
-
readonly
|
|
323
|
+
readonly sapphire: "#1C50BB";
|
|
324
324
|
readonly percipioActionPrimaryHover: "#141C36";
|
|
325
325
|
readonly percipioActionSecondary: "#6A6E75";
|
|
326
326
|
readonly percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
|
|
@@ -338,7 +338,7 @@ export declare const percipioPalette: {
|
|
|
338
338
|
percipioBgSuccess: "#EEF7F3";
|
|
339
339
|
percipioBgWarning: "#FFF7E0";
|
|
340
340
|
percipioBgError: "#FFF1F5";
|
|
341
|
-
|
|
341
|
+
sapphire: "#1C50BB";
|
|
342
342
|
percipioActionPrimaryHover: "#141C36";
|
|
343
343
|
percipioActionSecondary: "#6A6E75";
|
|
344
344
|
percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
|
package/dist/variables/colors.js
CHANGED
|
@@ -158,11 +158,12 @@ export const platformPalette = {
|
|
|
158
158
|
* LX Studio Colors
|
|
159
159
|
*/
|
|
160
160
|
|
|
161
|
+
/** Primary brand blue; used by LX Studio and Percipio theme `primary` tokens */
|
|
162
|
+
export const sapphire = '#1C50BB';
|
|
161
163
|
export const lxStudioColors = {
|
|
162
164
|
lxStudioSuccess: '#06844F',
|
|
163
165
|
lxStudioBgPrimary: '#FAFBFC',
|
|
164
|
-
|
|
165
|
-
lxStudioPurpleHover: '#7955FC'
|
|
166
|
+
sapphire
|
|
166
167
|
};
|
|
167
168
|
export const lxStudioPalette = {
|
|
168
169
|
...corePalette,
|
|
@@ -185,7 +186,7 @@ export const percipioColors = {
|
|
|
185
186
|
percipioBgWarning: '#FFF7E0',
|
|
186
187
|
percipioBgError: '#FFF1F5',
|
|
187
188
|
// Action colors
|
|
188
|
-
|
|
189
|
+
sapphire,
|
|
189
190
|
percipioActionPrimaryHover: '#141C36',
|
|
190
191
|
percipioActionSecondary: '#6A6E75',
|
|
191
192
|
percipioActionSecondaryHover: 'rgba(106, 110, 117, 0.86)',
|
|
@@ -195,6 +196,8 @@ export const percipioColors = {
|
|
|
195
196
|
percipioFeedbackWarning: '#EF5B0D',
|
|
196
197
|
// Multiuse colors
|
|
197
198
|
percipioDanger: '#B83C3C'
|
|
199
|
+
|
|
200
|
+
/** Shared with LX Studio; `primary` color mode resolves here */
|
|
198
201
|
};
|
|
199
202
|
export const percipioPalette = {
|
|
200
203
|
...corePalette,
|
|
@@ -2,7 +2,8 @@ export declare const fontAccent = "\"Suisse\", \"Apercu\", -apple-system, BlinkM
|
|
|
2
2
|
export declare const fontBase = "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
3
3
|
export declare const fontMonospace = "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
|
|
4
4
|
export declare const fontSystem = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const fontPercipioAccent = "\"Skillsoft Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
6
|
+
export declare const fontPercipioBase = "\"Skillsoft Text\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
6
7
|
export declare const fontFamily: {
|
|
7
8
|
readonly accent: "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
|
|
8
9
|
readonly base: "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
@@ -31,9 +32,18 @@ export declare const fontWeight: {
|
|
|
31
32
|
readonly 700: 700;
|
|
32
33
|
readonly 400: 400;
|
|
33
34
|
};
|
|
35
|
+
/** Title/bold semantic tokens use 500 (Medium), matching Skillsoft + Percipio Roboto webfonts. */
|
|
36
|
+
export declare const fontWeightMediumTitle: {
|
|
37
|
+
readonly title: 500;
|
|
38
|
+
readonly bold: 500;
|
|
39
|
+
readonly 500: 500;
|
|
40
|
+
readonly base: 400;
|
|
41
|
+
readonly 700: 700;
|
|
42
|
+
readonly 400: 400;
|
|
43
|
+
};
|
|
34
44
|
export declare const percipioFontFamily: {
|
|
35
|
-
readonly accent: "\"Roboto\",
|
|
36
|
-
readonly base: "\"Roboto\",
|
|
45
|
+
readonly accent: "\"Skillsoft Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
46
|
+
readonly base: "\"Skillsoft Text\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
37
47
|
readonly monospace: "\"Roboto Mono\", monospace";
|
|
38
48
|
readonly system: "\"Roboto\", sans-serif";
|
|
39
49
|
};
|
|
@@ -9,7 +9,10 @@ export const fontMonospace = `Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", C
|
|
|
9
9
|
monospace`;
|
|
10
10
|
export const fontSystem = `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu",
|
|
11
11
|
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`;
|
|
12
|
-
export const
|
|
12
|
+
export const fontPercipioAccent = `"Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
13
|
+
"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
14
|
+
sans-serif`;
|
|
15
|
+
export const fontPercipioBase = `"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
13
16
|
"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
14
17
|
sans-serif`;
|
|
15
18
|
export const fontFamily = {
|
|
@@ -40,9 +43,17 @@ export const fontWeight = {
|
|
|
40
43
|
700: 700,
|
|
41
44
|
400: 400
|
|
42
45
|
};
|
|
46
|
+
|
|
47
|
+
/** Title/bold semantic tokens use 500 (Medium), matching Skillsoft + Percipio Roboto webfonts. */
|
|
48
|
+
export const fontWeightMediumTitle = {
|
|
49
|
+
...fontWeight,
|
|
50
|
+
title: 500,
|
|
51
|
+
bold: 500,
|
|
52
|
+
500: 500
|
|
53
|
+
};
|
|
43
54
|
export const percipioFontFamily = {
|
|
44
|
-
accent:
|
|
45
|
-
base:
|
|
55
|
+
accent: fontPercipioAccent,
|
|
56
|
+
base: fontPercipioBase,
|
|
46
57
|
monospace: '"Roboto Mono", monospace',
|
|
47
58
|
system: '"Roboto", sans-serif'
|
|
48
59
|
};
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut-styles",
|
|
3
3
|
"description": "Styleguide & Component library for codecademy.com",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "18.0.0",
|
|
5
5
|
"author": "Jake Hiller <jake@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@codecademy/variance": "0.26.
|
|
7
|
+
"@codecademy/variance": "0.26.1",
|
|
8
8
|
"@emotion/is-prop-valid": "^1.1.0",
|
|
9
9
|
"framer-motion": "^11.18.0",
|
|
10
10
|
"get-nonce": "^1.0.0",
|