@codecademy/gamut-styles 20.1.1-alpha.d5d6ec.0 → 20.1.1-alpha.e2ff0c.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/themes/admin.d.ts +1 -14
- package/dist/themes/core.d.ts +1 -14
- package/dist/themes/core.js +1 -24
- package/dist/themes/lxStudio.d.ts +0 -14
- package/dist/themes/percipio.d.ts +2 -29
- package/dist/themes/percipio.js +0 -20
- package/dist/themes/platform.d.ts +1 -14
- package/package.json +2 -2
package/dist/themes/admin.d.ts
CHANGED
|
@@ -40,7 +40,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
40
40
|
readonly md: "5rem";
|
|
41
41
|
};
|
|
42
42
|
readonly headerZ: 15;
|
|
43
|
-
}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<
|
|
43
|
+
}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
|
|
44
44
|
c_base: string;
|
|
45
45
|
c_xs: string;
|
|
46
46
|
c_sm: string;
|
|
@@ -544,19 +544,6 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
544
544
|
}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
|
|
545
545
|
1: string;
|
|
546
546
|
2: string;
|
|
547
|
-
}, "-">>>, Record<"elevation", import("@codecademy/variance").LiteralPaths<{
|
|
548
|
-
rest: {
|
|
549
|
-
shadow: string;
|
|
550
|
-
transform: string;
|
|
551
|
-
};
|
|
552
|
-
hover: {
|
|
553
|
-
shadow: string;
|
|
554
|
-
transform: string;
|
|
555
|
-
};
|
|
556
|
-
hoverMirrored: {
|
|
557
|
-
shadow: string;
|
|
558
|
-
transform: string;
|
|
559
|
-
};
|
|
560
547
|
}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
|
|
561
548
|
colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
562
549
|
primary: {
|
package/dist/themes/core.d.ts
CHANGED
|
@@ -21,7 +21,7 @@ export declare const coreTheme: Record<"breakpoints", {
|
|
|
21
21
|
readonly md: "5rem";
|
|
22
22
|
};
|
|
23
23
|
readonly headerZ: 15;
|
|
24
|
-
}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<
|
|
24
|
+
}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
|
|
25
25
|
c_base: string;
|
|
26
26
|
c_xs: string;
|
|
27
27
|
c_sm: string;
|
|
@@ -525,19 +525,6 @@ export declare const coreTheme: Record<"breakpoints", {
|
|
|
525
525
|
}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
|
|
526
526
|
1: string;
|
|
527
527
|
2: string;
|
|
528
|
-
}, "-">>>, Record<"elevation", import("@codecademy/variance").LiteralPaths<{
|
|
529
|
-
rest: {
|
|
530
|
-
shadow: string;
|
|
531
|
-
transform: string;
|
|
532
|
-
};
|
|
533
|
-
hover: {
|
|
534
|
-
shadow: string;
|
|
535
|
-
transform: string;
|
|
536
|
-
};
|
|
537
|
-
hoverMirrored: {
|
|
538
|
-
shadow: string;
|
|
539
|
-
transform: string;
|
|
540
|
-
};
|
|
541
528
|
}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
|
|
542
529
|
export type CoreThemeShape = typeof coreTheme;
|
|
543
530
|
export interface CoreTheme extends CoreThemeShape {
|
package/dist/themes/core.js
CHANGED
|
@@ -129,27 +129,4 @@ export const coreTheme = createTheme({
|
|
|
129
129
|
}) => ({
|
|
130
130
|
1: `1px solid ${colors['border-primary']}`,
|
|
131
131
|
2: `2px solid ${colors['border-primary']}`
|
|
132
|
-
})).
|
|
133
|
-
colors
|
|
134
|
-
}) => {
|
|
135
|
-
const shadowPrimary = colors['shadow-primary'];
|
|
136
|
-
const offset = 8;
|
|
137
|
-
const lift = 4;
|
|
138
|
-
const shadow = x => `${x}px ${offset}px 0 0 ${shadowPrimary}`;
|
|
139
|
-
return {
|
|
140
|
-
rest: {
|
|
141
|
-
shadow: `0 0 0 0 ${shadowPrimary}`,
|
|
142
|
-
transform: 'none'
|
|
143
|
-
},
|
|
144
|
-
hover: {
|
|
145
|
-
shadow: shadow(-offset),
|
|
146
|
-
transform: `translate(${lift}px, -${lift}px)`
|
|
147
|
-
},
|
|
148
|
-
// camelCase: variance's `LiteralPaths` splits token paths on `-`, so a
|
|
149
|
-
// hyphenated key would resolve to `never` and drop out of the theme type.
|
|
150
|
-
hoverMirrored: {
|
|
151
|
-
shadow: shadow(offset),
|
|
152
|
-
transform: `translate(-${lift}px, -${lift}px)`
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
}).createScaleVariables('elements').addName('core').build();
|
|
132
|
+
})).createScaleVariables('elements').addName('core').build();
|
|
@@ -544,20 +544,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
544
544
|
1: string;
|
|
545
545
|
2: string;
|
|
546
546
|
}, "-">;
|
|
547
|
-
elevation: import("@codecademy/variance").LiteralPaths<{
|
|
548
|
-
rest: {
|
|
549
|
-
shadow: string;
|
|
550
|
-
transform: string;
|
|
551
|
-
};
|
|
552
|
-
hover: {
|
|
553
|
-
shadow: string;
|
|
554
|
-
transform: string;
|
|
555
|
-
};
|
|
556
|
-
hoverMirrored: {
|
|
557
|
-
shadow: string;
|
|
558
|
-
transform: string;
|
|
559
|
-
};
|
|
560
|
-
}, "-">;
|
|
561
547
|
name: string;
|
|
562
548
|
} & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
563
549
|
lxStudioSuccess: "#06844F";
|
|
@@ -22,7 +22,7 @@ export declare const percipioTheme: Record<"breakpoints", {
|
|
|
22
22
|
md: string;
|
|
23
23
|
lg: string;
|
|
24
24
|
xl: string;
|
|
25
|
-
}> & import("@codecademy/variance/dist/createTheme/types").Merge<
|
|
25
|
+
}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
|
|
26
26
|
c_base: string;
|
|
27
27
|
c_xs: string;
|
|
28
28
|
c_sm: string;
|
|
@@ -536,20 +536,6 @@ export declare const percipioTheme: Record<"breakpoints", {
|
|
|
536
536
|
1: string;
|
|
537
537
|
2: string;
|
|
538
538
|
}, "-">;
|
|
539
|
-
elevation: import("@codecademy/variance").LiteralPaths<{
|
|
540
|
-
rest: {
|
|
541
|
-
shadow: string;
|
|
542
|
-
transform: string;
|
|
543
|
-
};
|
|
544
|
-
hover: {
|
|
545
|
-
shadow: string;
|
|
546
|
-
transform: string;
|
|
547
|
-
};
|
|
548
|
-
hoverMirrored: {
|
|
549
|
-
shadow: string;
|
|
550
|
-
transform: string;
|
|
551
|
-
};
|
|
552
|
-
}, "-">;
|
|
553
539
|
name: string;
|
|
554
540
|
} & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
555
541
|
percipioTextPrimary: "#222325";
|
|
@@ -1163,20 +1149,7 @@ export declare const percipioTheme: Record<"breakpoints", {
|
|
|
1163
1149
|
}>;
|
|
1164
1150
|
mode: "light";
|
|
1165
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" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "black" | "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;
|
|
1166
|
-
}
|
|
1167
|
-
rest: {
|
|
1168
|
-
shadow: string;
|
|
1169
|
-
transform: string;
|
|
1170
|
-
};
|
|
1171
|
-
hover: {
|
|
1172
|
-
shadow: string;
|
|
1173
|
-
transform: string;
|
|
1174
|
-
};
|
|
1175
|
-
hoverMirrored: {
|
|
1176
|
-
shadow: string;
|
|
1177
|
-
transform: string;
|
|
1178
|
-
};
|
|
1179
|
-
}, "-">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
|
|
1152
|
+
}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
|
|
1180
1153
|
export type PercipioThemeShape = typeof percipioTheme;
|
|
1181
1154
|
export interface PercipioTheme extends PercipioThemeShape {
|
|
1182
1155
|
}
|
package/dist/themes/percipio.js
CHANGED
|
@@ -53,24 +53,4 @@ export const percipioTheme = createTheme({
|
|
|
53
53
|
disabled: 'navy-300'
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
|
-
}).addScale('elevation', ({
|
|
57
|
-
colors
|
|
58
|
-
}) => {
|
|
59
|
-
const shadowPrimary = colors['shadow-primary'];
|
|
60
|
-
const shadowSecondary = colors['shadow-secondary'];
|
|
61
|
-
const hover = `0 1px 4px 0 ${shadowPrimary}, 0 2px 11px 0 ${shadowSecondary}`;
|
|
62
|
-
return {
|
|
63
|
-
rest: {
|
|
64
|
-
shadow: `0 1px 4px 0 ${shadowPrimary}, 0 2px 7px 0 ${shadowPrimary}`,
|
|
65
|
-
transform: 'none'
|
|
66
|
-
},
|
|
67
|
-
hover: {
|
|
68
|
-
shadow: hover,
|
|
69
|
-
transform: 'none'
|
|
70
|
-
},
|
|
71
|
-
hoverMirrored: {
|
|
72
|
-
shadow: hover,
|
|
73
|
-
transform: 'none'
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
56
|
}).addName('percipio').build();
|
|
@@ -56,7 +56,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
56
56
|
readonly md: "5rem";
|
|
57
57
|
};
|
|
58
58
|
readonly headerZ: 15;
|
|
59
|
-
}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<
|
|
59
|
+
}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
|
|
60
60
|
c_base: string;
|
|
61
61
|
c_xs: string;
|
|
62
62
|
c_sm: string;
|
|
@@ -560,19 +560,6 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
560
560
|
}>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
|
|
561
561
|
1: string;
|
|
562
562
|
2: string;
|
|
563
|
-
}, "-">>>, Record<"elevation", import("@codecademy/variance").LiteralPaths<{
|
|
564
|
-
rest: {
|
|
565
|
-
shadow: string;
|
|
566
|
-
transform: string;
|
|
567
|
-
};
|
|
568
|
-
hover: {
|
|
569
|
-
shadow: string;
|
|
570
|
-
transform: string;
|
|
571
|
-
};
|
|
572
|
-
hoverMirrored: {
|
|
573
|
-
shadow: string;
|
|
574
|
-
transform: string;
|
|
575
|
-
};
|
|
576
563
|
}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
577
564
|
readonly lightBeige: "#FFFBF8";
|
|
578
565
|
readonly gold: "#8A7300";
|
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": "20.1.1-alpha.
|
|
4
|
+
"version": "20.1.1-alpha.e2ff0c.0",
|
|
5
5
|
"author": "Jake Hiller <jake@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@codecademy/variance": "0.26.2-alpha.
|
|
7
|
+
"@codecademy/variance": "0.26.2-alpha.e2ff0c.0",
|
|
8
8
|
"@emotion/is-prop-valid": "^1.1.0",
|
|
9
9
|
"framer-motion": "^11.18.0",
|
|
10
10
|
"get-nonce": "^1.0.0",
|