@codecademy/gamut-styles 18.0.1-alpha.f8b396.0 → 19.0.1-alpha.416911.0

package/README.md

@@ -1,23 +1,8 @@
 # Gamut Styles
 
-Base SCSS for Codecademy
-
-## Variables/
-
-This folder houses all shared SCSS style variables.
-It also contains a JavaScript file with color variables.
+Design tokens, Emotion themes, and system props for the Gamut design system.
 
 ## Core/
 
 This folder contains a base stylesheet for the app.
 This should be imported **once** in your application.
-
-## Utils/
-
-This folder contains Sass functions (pure utilities with no stylesheet output values) and mixins (outputs CSS)
-to be used as needed both in Gamut and across the Codecademy app.
-
-The `utils.scss` and `core.scss` just import the index files from their respective folders, to make the syntax to import them from elsewhere easier, e.g.:
-
-`@use "~@codecademy/gamut-styles/utils";`
-`@use "~@codecademy/gamut-styles/core";`

package/dist/themes/lxStudio.d.ts

@@ -1086,7 +1086,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light";
-    _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;
+    _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" | "lxStudioSuccess" | "lxStudioBgPrimary" | "sapphire") => string;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type LxStudioThemeShape = typeof lxStudioTheme;
 export type LxStudioTheme = LxStudioThemeShape;

package/dist/themes/percipio.d.ts

@@ -1148,7 +1148,7 @@ export declare const percipioTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light";
-    _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;
+    _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;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type PercipioThemeShape = typeof percipioTheme;
 export interface PercipioTheme extends PercipioThemeShape {

package/dist/variables/index.d.ts

@@ -5,4 +5,3 @@ export * from './responsive';
 export * from './spacing';
 export * from './timing';
 export * from './typography';
-export * from './deprecated-colors';

package/dist/variables/index.js

@@ -4,6 +4,4 @@ export * from './elements';
 export * from './responsive';
 export * from './spacing';
 export * from './timing';
-export * from './typography';
-// Deprecated variables
-export * from './deprecated-colors';
+export * from './typography';

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "18.0.1-alpha.f8b396.0",
+  "version": "19.0.1-alpha.416911.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.26.2-alpha.f8b396.0",
+    "@codecademy/variance": "0.26.2-alpha.416911.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "framer-motion": "^11.18.0",
     "get-nonce": "^1.0.0",

package/core/_fonts.scss

@@ -1,131 +0,0 @@
-@font-face {
-  font-family: "Nunito Sans";
-  font-display: swap;
-  src: url("../fonts/Nunito_Sans/nunitosans-regular-webfont.eot");
-  src: url("../fonts/Nunito_Sans/nunitosans-regular-webfont.woff2")
-      format("woff2"),
-    url("../fonts/Nunito_Sans/nunitosans-regular-webfont.woff") format("woff"),
-    url("../fonts/Nunito_Sans/nunitosans-regular-webfont.ttf") format("ttf");
-  font-weight: normal;
-}
-
-@font-face {
-  font-family: "Nunito Sans";
-  font-display: swap;
-  src: url("../fonts/Nunito_Sans/nunitosans-bold-webfont.eot");
-  src: url("../fonts/Nunito_Sans/nunitosans-bold-webfont.woff2") format("woff2"),
-    url("../fonts/Nunito_Sans/nunitosans-bold-webfont.woff") format("woff"),
-    url("../fonts/Nunito_Sans/nunitosans-bold-webfont.ttf") format("ttf");
-  font-weight: bold;
-}
-
-@font-face {
-  font-family: "Regular Bold";
-  font-display: swap;
-  src: url("../fonts/Regular_Bold/Regular-BoldWEB.eot");
-  src: url("../fonts/Regular_Bold/Regular-BoldWEB.woff2") format("woff2"),
-    url("../fonts/Regular_Bold/Regular-BoldWEB.woff") format("woff"),
-    url("../fonts/Regular_Bold/Regular-BoldWEB.svg") format("svg");
-}
-
-// because Regular has weird caret styles
-@font-face {
-  font-family: "Regular Patch";
-  src: url("../fonts/Nunito_Sans/nunitosans-bold-webfont.eot");
-  src: url("../fonts/Nunito_Sans/nunitosans-bold-webfont.woff2") format("woff2"),
-    url("../fonts/Nunito_Sans/nunitosans-bold-webfont.woff") format("woff"),
-    url("../fonts/Nunito_Sans/nunitosans-bold-webfont.ttf") format("ttf");
-  unicode-range: U+003C, U+003E;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Apercu";
-  font-style: normal;
-  font-weight: normal;
-  src: url("../fonts/Apercu/apercu-regular-pro.woff2") format("woff2"),
-    url("../fonts/Apercu/apercu-regular-pro.woff") format("woff");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Apercu";
-  font-style: normal;
-  font-weight: bold;
-  src: url("../fonts/Apercu/apercu-bold-pro.woff2") format("woff2"),
-    url("../fonts/Apercu/apercu-bold-pro.woff") format("woff");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Apercu";
-  font-style: italic;
-  font-weight: normal;
-  src: url("../fonts/Apercu/apercu-italic-pro.woff2") format("woff2"),
-    url("../fonts/Apercu/apercu-italic-pro.woff") format("woff");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Apercu";
-  font-style: italic;
-  font-weight: bold;
-  src: url("../fonts/Apercu/apercu-bold-italic-pro.woff2") format("woff2"),
-    url("../fonts/Apercu/apercu-bold-italic-pro.woff") format("woff");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Suisse";
-  font-weight: normal;
-  src: url("../fonts/Suisse/SuisseIntlMono-Regular-WebS.woff2") format("woff2"),
-    url("../fonts/Suisse/SuisseIntlMono-Regular-WebS.woff") format("woff");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Suisse";
-  font-weight: bold;
-  src: url("../fonts/Suisse/SuisseIntlMono-Bold-WebS.woff2") format("woff2"),
-    url("../fonts/Suisse/SuisseIntlMono-Bold-WebS.woff") format("woff");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Hanken Grotesk";
-  font-style: normal;
-  font-weight: normal;
-  src: url("../fonts/Hanken_Grotesk/hanken-grotesk-regular.woff2")
-      format("woff2"),
-    url("../fonts/Hanken_Grotesk/hanken-grotesk-regular.woff") format("woff");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Hanken Grotesk";
-  font-style: normal;
-  font-weight: bold;
-  src: url("../fonts/Hanken_Grotesk/hanken-grotesk-bold.woff2") format("woff2"),
-    url("../fonts/Hanken_Grotesk/hanken-grotesk-bold.woff") format("woff");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Hanken Grotesk";
-  font-style: italic;
-  font-weight: normal;
-  src: url("../fonts/Hanken_Grotesk/hanken-grotesk-italic.woff2")
-      format("woff2"),
-    url("../fonts/Hanken_Grotesk/hanken-grotesk-italic.woff") format("woff");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Hanken Grotesk";
-  font-style: italic;
-  font-weight: bold;
-  src: url("../fonts/Hanken_Grotesk/hanken-grotesk-bold-italic.woff2")
-      format("woff2"),
-    url("../fonts/Hanken_Grotesk/hanken-grotesk-bold-italic.woff")
-      format("woff");
-}