@codecademy/gamut-styles 17.14.1-alpha.773c36.0 → 17.14.1-alpha.7a1f24.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.
@@ -1,12 +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
- /**
6
- * LX Studio: Skillsoft Sans (accent) + Skillsoft Text (base).
7
- * Weights 400 / 500 / 700 + italics; 500 uses Medium files for title/bold tokens.
8
- */
9
- export declare const lxStudio: readonly FontConfig[];
10
6
  export declare const webFonts: {
11
7
  readonly core: readonly FontConfig[];
12
8
  readonly percipio: readonly FontConfig[];
@@ -32,55 +32,12 @@ export const core = [{
32
32
  extensions,
33
33
  name: 'Suisse'
34
34
  }];
35
- export const percipio = [{
36
- filePath: `${FONT_ASSET_PATH}/roboto-regular`,
37
- extensions,
38
- name: 'Roboto'
39
- }, {
40
- filePath: `${FONT_ASSET_PATH}/roboto-italic`,
41
- extensions,
42
- name: 'Roboto',
43
- style: 'italic'
44
- },
45
- // The default weight for bold fonts is 700, Percipio uses 500 for the base bold
46
- {
47
- filePath: `${FONT_ASSET_PATH}/roboto-bold`,
48
- extensions,
49
- name: 'Roboto',
50
- weight: 'bold'
51
- }, {
52
- filePath: `${FONT_ASSET_PATH}/roboto-bold`,
53
- extensions,
54
- name: 'Roboto',
55
- weight: 500
56
- }, {
57
- filePath: `${FONT_ASSET_PATH}/roboto-bold-italic`,
58
- extensions,
59
- name: 'Roboto',
60
- weight: 'bold',
61
- style: 'italic'
62
- }, {
63
- filePath: `${FONT_ASSET_PATH}/roboto-bold-italic`,
64
- extensions,
65
- name: 'Roboto',
66
- weight: 500,
67
- style: 'italic'
68
- }, {
69
- filePath: `${FONT_ASSET_PATH}/roboto-mono-regular`,
70
- extensions,
71
- name: 'Roboto Mono'
72
- }, {
73
- filePath: `${FONT_ASSET_PATH}/roboto-mono-bold`,
74
- extensions,
75
- name: 'Roboto Mono',
76
- weight: 'bold'
77
- }];
78
35
 
79
36
  /**
80
- * LX Studio: Skillsoft Sans (accent) + Skillsoft Text (base).
37
+ * Skillsoft Sans (accent) + Skillsoft Text (base).
81
38
  * Weights 400 / 500 / 700 + italics; 500 uses Medium files for title/bold tokens.
82
39
  */
83
- export const lxStudio = [{
40
+ const skillsoftFamilyFonts = [{
84
41
  filePath: `${FONT_ASSET_PATH}/SkillsoftText-Regular`,
85
42
  extensions,
86
43
  name: 'Skillsoft Text'
@@ -143,8 +100,57 @@ export const lxStudio = [{
143
100
  weight: 700,
144
101
  style: 'italic'
145
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 = [{
109
+ filePath: `${FONT_ASSET_PATH}/roboto-regular`,
110
+ extensions,
111
+ name: 'Roboto'
112
+ }, {
113
+ filePath: `${FONT_ASSET_PATH}/roboto-italic`,
114
+ extensions,
115
+ name: 'Roboto',
116
+ style: 'italic'
117
+ }, {
118
+ filePath: `${FONT_ASSET_PATH}/roboto-bold`,
119
+ extensions,
120
+ name: 'Roboto',
121
+ weight: 'bold'
122
+ }, {
123
+ filePath: `${FONT_ASSET_PATH}/roboto-bold`,
124
+ extensions,
125
+ name: 'Roboto',
126
+ weight: 500
127
+ }, {
128
+ filePath: `${FONT_ASSET_PATH}/roboto-bold-italic`,
129
+ extensions,
130
+ name: 'Roboto',
131
+ weight: 'bold',
132
+ style: 'italic'
133
+ }, {
134
+ filePath: `${FONT_ASSET_PATH}/roboto-bold-italic`,
135
+ extensions,
136
+ name: 'Roboto',
137
+ weight: 500,
138
+ style: 'italic'
139
+ }, {
140
+ filePath: `${FONT_ASSET_PATH}/roboto-mono-regular`,
141
+ extensions,
142
+ name: 'Roboto Mono'
143
+ }, {
144
+ filePath: `${FONT_ASSET_PATH}/roboto-mono-bold`,
145
+ extensions,
146
+ name: 'Roboto Mono',
147
+ weight: 'bold'
148
+ }];
149
+
150
+ /** Percipio: Skillsoft (accent/base) plus Roboto system + Roboto Mono monospace. */
151
+ export const percipio = [...skillsoftFamilyFonts, ...percipioRobotoFonts];
146
152
  export const webFonts = {
147
153
  core,
148
154
  percipio,
149
- lxStudio
155
+ lxStudio: percipio
150
156
  };
@@ -1,5 +1,5 @@
1
1
  import { createTheme } from '@codecademy/variance';
2
- import { fontLxStudioAccent, fontLxStudioBase, fontMonospace, fontSystem, fontWeight as coreFontWeight, lxStudioPalette } from '../variables';
2
+ import { fontMonospace, fontSystem, fontWeightMediumTitle, lxStudioPalette, percipioFontFamily } from '../variables';
3
3
  import { coreTheme } from './core';
4
4
 
5
5
  /**
@@ -8,17 +8,11 @@ import { coreTheme } from './core';
8
8
  */
9
9
 
10
10
  const lxStudioFontFamily = {
11
- accent: fontLxStudioAccent,
12
- base: fontLxStudioBase,
11
+ accent: percipioFontFamily.accent,
12
+ base: percipioFontFamily.base,
13
13
  monospace: fontMonospace,
14
14
  system: fontSystem
15
15
  };
16
- const lxStudioFontWeight = {
17
- ...coreFontWeight,
18
- title: 500,
19
- bold: 500,
20
- 500: 500
21
- };
22
16
  export const lxStudioBorderRadii = {
23
17
  none: '0px',
24
18
  sm: '4px',
@@ -31,7 +25,7 @@ export const lxStudioTheme = createTheme({
31
25
  ...coreTheme,
32
26
  borderRadii: lxStudioBorderRadii,
33
27
  fontFamily: lxStudioFontFamily,
34
- fontWeight: lxStudioFontWeight
28
+ fontWeight: fontWeightMediumTitle
35
29
  }).addColors(lxStudioPalette).addColorModes('light', {
36
30
  // these are just the overrides, the rest of the tokens are inherited from coreTheme
37
31
  light: {
@@ -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\", sans-serif";
40
- readonly base: "\"Roboto\", sans-serif";
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
- base: number;
46
- title: number;
47
- bold: number;
48
- 700: number;
49
- 400: number;
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
- percipioActionPrimary: "#0073C4";
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
- _: "percipioActionPrimary";
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
- _: "percipioActionPrimary";
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
- percipioActionPrimary: "#0073C4";
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
- _: "percipioActionPrimary";
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
- _: "percipioActionPrimary";
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" | "percipioActionPrimary" | "percipioActionPrimaryHover" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioDanger") => string;
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 {
@@ -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
- _: 'percipioActionPrimary',
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
- _: 'percipioActionPrimary',
46
+ _: 'sapphire',
53
47
  hover: 'percipioActionPrimaryHover'
54
48
  },
55
49
  border: {
@@ -228,6 +228,8 @@ 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";
@@ -318,7 +320,7 @@ export declare const percipioColors: {
318
320
  readonly percipioBgSuccess: "#EEF7F3";
319
321
  readonly percipioBgWarning: "#FFF7E0";
320
322
  readonly percipioBgError: "#FFF1F5";
321
- readonly percipioActionPrimary: "#0073C4";
323
+ readonly sapphire: "#1C50BB";
322
324
  readonly percipioActionPrimaryHover: "#141C36";
323
325
  readonly percipioActionSecondary: "#6A6E75";
324
326
  readonly percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
@@ -336,7 +338,7 @@ export declare const percipioPalette: {
336
338
  percipioBgSuccess: "#EEF7F3";
337
339
  percipioBgWarning: "#FFF7E0";
338
340
  percipioBgError: "#FFF1F5";
339
- percipioActionPrimary: "#0073C4";
341
+ sapphire: "#1C50BB";
340
342
  percipioActionPrimaryHover: "#141C36";
341
343
  percipioActionSecondary: "#6A6E75";
342
344
  percipioActionSecondaryHover: "rgba(106, 110, 117, 0.86)";
@@ -158,10 +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
- sapphire: '#1C50BB'
166
+ sapphire
165
167
  };
166
168
  export const lxStudioPalette = {
167
169
  ...corePalette,
@@ -184,7 +186,7 @@ export const percipioColors = {
184
186
  percipioBgWarning: '#FFF7E0',
185
187
  percipioBgError: '#FFF1F5',
186
188
  // Action colors
187
- percipioActionPrimary: '#0073C4',
189
+ sapphire,
188
190
  percipioActionPrimaryHover: '#141C36',
189
191
  percipioActionSecondary: '#6A6E75',
190
192
  percipioActionSecondaryHover: 'rgba(106, 110, 117, 0.86)',
@@ -194,6 +196,8 @@ export const percipioColors = {
194
196
  percipioFeedbackWarning: '#EF5B0D',
195
197
  // Multiuse colors
196
198
  percipioDanger: '#B83C3C'
199
+
200
+ /** Shared with LX Studio; `primary` color mode resolves here */
197
201
  };
198
202
  export const percipioPalette = {
199
203
  ...corePalette,
@@ -2,8 +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 fontLxStudioAccent = "\"Skillsoft Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
6
- export declare const fontLxStudioBase = "\"Skillsoft Text\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
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";
7
7
  export declare const fontFamily: {
8
8
  readonly accent: "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
9
9
  readonly base: "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
@@ -32,9 +32,18 @@ export declare const fontWeight: {
32
32
  readonly 700: 700;
33
33
  readonly 400: 400;
34
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
+ };
35
44
  export declare const percipioFontFamily: {
36
- readonly accent: "\"Roboto\", sans-serif";
37
- readonly base: "\"Roboto\", sans-serif";
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";
38
47
  readonly monospace: "\"Roboto Mono\", monospace";
39
48
  readonly system: "\"Roboto\", sans-serif";
40
49
  };
@@ -9,10 +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 fontLxStudioAccent = `"Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
12
+ export const fontPercipioAccent = `"Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
13
13
  "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
14
14
  sans-serif`;
15
- export const fontLxStudioBase = `"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
15
+ export const fontPercipioBase = `"Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
16
16
  "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
17
17
  sans-serif`;
18
18
  export const fontFamily = {
@@ -43,9 +43,17 @@ export const fontWeight = {
43
43
  700: 700,
44
44
  400: 400
45
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
+ };
46
54
  export const percipioFontFamily = {
47
- accent: '"Roboto", sans-serif',
48
- base: '"Roboto", sans-serif',
55
+ accent: fontPercipioAccent,
56
+ base: fontPercipioBase,
49
57
  monospace: '"Roboto Mono", monospace',
50
58
  system: '"Roboto", sans-serif'
51
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": "17.14.1-alpha.773c36.0",
4
+ "version": "17.14.1-alpha.7a1f24.0",
5
5
  "author": "Jake Hiller <jake@codecademy.com>",
6
6
  "dependencies": {
7
- "@codecademy/variance": "0.26.2-alpha.773c36.0",
7
+ "@codecademy/variance": "0.26.2-alpha.7a1f24.0",
8
8
  "@emotion/is-prop-valid": "^1.1.0",
9
9
  "framer-motion": "^11.18.0",
10
10
  "get-nonce": "^1.0.0",