@codecademy/gamut-styles 17.6.5-alpha.fed1a2.0 → 17.7.0-alpha.1dc930.0

package/dist/variables/colors.d.ts

@@ -26,25 +26,21 @@ export declare const coreSwatches: {
         readonly '100': "#EAFDC6";
         readonly '400': "#AEE938";
         readonly '700': "#008A27";
-        readonly '900': "#151C07";
     };
     readonly yellow: {
         readonly '0': "#FFFAE5";
         readonly '400': "#CCA900";
         readonly '500': "#FFD300";
-        readonly '900': "#211B00";
     };
     readonly pink: {
         readonly '0': "#FFF5FF";
         readonly '400': "#F966FF";
     };
     readonly red: {
-        readonly '0': "#FBF1F0";
-        readonly '300': "#E85D7F";
-        readonly '400': "#DC5879";
+        readonly '0': "#E85D7F";
+        readonly '100': "#DC5879";
         readonly '500': "#E91C11";
         readonly '600': "#BE1809";
-        readonly '900': "#280503";
     };
     readonly orange: {
         readonly '100': "#FFE8CC";
@@ -131,19 +127,15 @@ export declare const corePalette: {
     readonly "green-100": "#EAFDC6";
     readonly "green-400": "#AEE938";
     readonly "green-700": "#008A27";
-    readonly "green-900": "#151C07";
     readonly "yellow-0": "#FFFAE5";
     readonly "yellow-400": "#CCA900";
     readonly "yellow-500": "#FFD300";
-    readonly "yellow-900": "#211B00";
     readonly "pink-0": "#FFF5FF";
     readonly "pink-400": "#F966FF";
-    readonly "red-0": "#FBF1F0";
-    readonly "red-300": "#E85D7F";
-    readonly "red-400": "#DC5879";
+    readonly "red-0": "#E85D7F";
+    readonly "red-100": "#DC5879";
     readonly "red-500": "#E91C11";
     readonly "red-600": "#BE1809";
-    readonly "red-900": "#280503";
     readonly "orange-100": "#FFE8CC";
     readonly "orange-500": "#FF8C00";
     readonly "hyper-400": "#5533FF";
@@ -179,7 +171,7 @@ export declare const platformSwatches: {
         readonly '800': "#CA00D1";
     };
     readonly teal: {
-        readonly '500': "#006d82";
+        readonly '500': "#027E97";
     };
     readonly purple: {
         readonly '300': "#B3CCFF";
@@ -188,19 +180,19 @@ export declare const platformSwatches: {
 export declare const truePlatformColors: {
     readonly lightBeige: "#FFFBF8";
     readonly gold: "#8A7300";
-    readonly teal: "#006d82";
+    readonly teal: "#027E97";
     readonly purple: "#B3CCFF";
 };
 export declare const platformPalette: {
     readonly lightBeige: "#FFFBF8";
     readonly gold: "#8A7300";
-    readonly teal: "#006d82";
+    readonly teal: "#027E97";
     readonly purple: "#B3CCFF";
     readonly "beige-0": "#FFFBF8";
     readonly "pink-800": "#CA00D1";
     readonly "orange-800": "#D14900";
     readonly "gold-800": "#8A7300";
-    readonly "teal-500": "#006d82";
+    readonly "teal-500": "#027E97";
     readonly "purple-300": "#B3CCFF";
 };
 /**
@@ -255,19 +247,15 @@ export declare const lxStudioPalette: {
     "green-100": "#EAFDC6";
     "green-400": "#AEE938";
     "green-700": "#008A27";
-    "green-900": "#151C07";
     "yellow-0": "#FFFAE5";
     "yellow-400": "#CCA900";
     "yellow-500": "#FFD300";
-    "yellow-900": "#211B00";
     "pink-0": "#FFF5FF";
     "pink-400": "#F966FF";
-    "red-0": "#FBF1F0";
-    "red-300": "#E85D7F";
-    "red-400": "#DC5879";
+    "red-0": "#E85D7F";
+    "red-100": "#DC5879";
     "red-500": "#E91C11";
     "red-600": "#BE1809";
-    "red-900": "#280503";
     "orange-100": "#FFE8CC";
     "orange-500": "#FF8C00";
     "hyper-400": "#5533FF";

package/dist/variables/colors.js

@@ -34,26 +34,22 @@ export const coreSwatches = {
     '0': '#F5FFE3',
     '100': '#EAFDC6',
     '400': '#AEE938',
-    '700': '#008A27',
-    '900': '#151C07'
+    '700': '#008A27'
   },
   yellow: {
     '0': '#FFFAE5',
     '400': '#CCA900',
-    '500': '#FFD300',
-    '900': '#211B00'
+    '500': '#FFD300'
   },
   pink: {
     '0': '#FFF5FF',
     '400': '#F966FF'
   },
   red: {
-    '0': '#FBF1F0',
-    '300': '#E85D7F',
-    '400': '#DC5879',
+    '0': '#E85D7F',
+    '100': '#DC5879',
     '500': '#E91C11',
-    '600': '#BE1809',
-    '900': '#280503'
+    '600': '#BE1809'
   },
   orange: {
     '100': '#FFE8CC',
@@ -95,7 +91,7 @@ export const trueColors = {
   palePink: coreSwatches.pink[0],
   paleYellow: coreSwatches.yellow[0],
   pink: coreSwatches.pink[400],
-  paleRed: coreSwatches.red[400],
+  paleRed: coreSwatches.red[100],
   red: coreSwatches.red[500],
   yellow: coreSwatches.yellow[500],
   black,
@@ -124,7 +120,7 @@ export const platformSwatches = {
     '800': '#CA00D1'
   },
   teal: {
-    '500': '#006d82'
+    '500': '#027E97'
   },
   purple: {
     '300': '#B3CCFF'

package/dist/variables/responsive.d.ts

@@ -6,6 +6,7 @@ export declare const breakpoints: {
     readonly xl: "1440px";
 };
 export type MediaSize = keyof typeof breakpoints;
+export type ContainerSize = keyof typeof containerQueries;
 export declare const mediaQueries: {
     xs: string;
     sm: string;
@@ -13,6 +14,13 @@ export declare const mediaQueries: {
     lg: string;
     xl: string;
 };
+export declare const containerQueries: {
+    c_xs: string;
+    c_sm: string;
+    c_md: string;
+    c_lg: string;
+    c_xl: string;
+};
 export declare const contentWidths: {
     md: "1200px";
     max: "1440px";

package/dist/variables/responsive.js

@@ -6,6 +6,7 @@ export const breakpoints = {
   xl: '1440px'
 };
 const createMediaQuery = (size, direction) => `@media only screen and (${direction}-width: ${breakpoints[size]})`;
+const createContainerQuery = (size, direction) => `@container (${direction}-width: ${breakpoints[size]})`;
 export const mediaQueries = {
   xs: createMediaQuery('xs', 'min'),
   sm: createMediaQuery('sm', 'min'),
@@ -13,6 +14,13 @@ export const mediaQueries = {
   lg: createMediaQuery('lg', 'min'),
   xl: createMediaQuery('xl', 'min')
 };
+export const containerQueries = {
+  c_xs: createContainerQuery('xs', 'min'),
+  c_sm: createContainerQuery('sm', 'min'),
+  c_md: createContainerQuery('md', 'min'),
+  c_lg: createContainerQuery('lg', 'min'),
+  c_xl: createContainerQuery('xl', 'min')
+};
 export const contentWidths = {
   md: breakpoints.lg,
   max: breakpoints.xl

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.6.5-alpha.fed1a2.0",
+  "version": "17.7.0-alpha.1dc930.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.22.1",
+    "@codecademy/variance": "0.23.0-alpha.1dc930.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "polished": "^4.1.2"
   },
@@ -34,5 +34,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "07a8bf9afd638d400f5be5ba1478d1e3fb92fff2"
+  "gitHead": "a03042de4ba6e2bbfa9924659494a4ad0134afa7"
 }