@codecademy/gamut-styles 17.7.0-alpha.d99e76.0 → 17.7.0-alpha.dd4a6f.0

package/dist/variables/colors.d.ts

@@ -26,21 +26,25 @@ 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': "#E85D7F";
-        readonly '100': "#DC5879";
+        readonly '0': "#FBF1F0";
+        readonly '300': "#E85D7F";
+        readonly '400': "#DC5879";
         readonly '500': "#E91C11";
         readonly '600': "#BE1809";
+        readonly '900': "#280503";
     };
     readonly orange: {
         readonly '100': "#FFE8CC";
@@ -127,15 +131,19 @@ 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": "#E85D7F";
-    readonly "red-100": "#DC5879";
+    readonly "red-0": "#FBF1F0";
+    readonly "red-300": "#E85D7F";
+    readonly "red-400": "#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";
@@ -171,7 +179,7 @@ export declare const platformSwatches: {
         readonly '800': "#CA00D1";
     };
     readonly teal: {
-        readonly '500': "#027E97";
+        readonly '500': "#006D82";
     };
     readonly purple: {
         readonly '300': "#B3CCFF";
@@ -180,19 +188,41 @@ export declare const platformSwatches: {
 export declare const truePlatformColors: {
     readonly lightBeige: "#FFFBF8";
     readonly gold: "#8A7300";
-    readonly teal: "#027E97";
+    readonly teal: "#006D82";
     readonly purple: "#B3CCFF";
 };
+export declare const platformEditorColors: {
+    readonly 'comment-light': "#686C7B";
+    readonly 'comment-dark': "#84868D";
+    readonly 'indent-active-light': "#BCBDC4";
+    readonly 'indent-active-dark': "#3B3D49";
+    readonly 'indent-inactive-light': "#8E919D";
+    readonly 'indent-inactive-dark': "#5F616B";
+    readonly 'line-number-active-light': "#31374C";
+    readonly 'line-number-active-dark': "#CECFD2";
+    readonly 'line-number-inactive-light': "#686C7B";
+    readonly 'line-number-inactive-dark': "#84868D";
+};
 export declare const platformPalette: {
     readonly lightBeige: "#FFFBF8";
     readonly gold: "#8A7300";
-    readonly teal: "#027E97";
+    readonly teal: "#006D82";
     readonly purple: "#B3CCFF";
+    readonly 'comment-light': "#686C7B";
+    readonly 'comment-dark': "#84868D";
+    readonly 'indent-active-light': "#BCBDC4";
+    readonly 'indent-active-dark': "#3B3D49";
+    readonly 'indent-inactive-light': "#8E919D";
+    readonly 'indent-inactive-dark': "#5F616B";
+    readonly 'line-number-active-light': "#31374C";
+    readonly 'line-number-active-dark': "#CECFD2";
+    readonly 'line-number-inactive-light': "#686C7B";
+    readonly 'line-number-inactive-dark': "#84868D";
     readonly "beige-0": "#FFFBF8";
     readonly "pink-800": "#CA00D1";
     readonly "orange-800": "#D14900";
     readonly "gold-800": "#8A7300";
-    readonly "teal-500": "#027E97";
+    readonly "teal-500": "#006D82";
     readonly "purple-300": "#B3CCFF";
 };
 /**
@@ -247,15 +277,19 @@ 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": "#E85D7F";
-    "red-100": "#DC5879";
+    "red-0": "#FBF1F0";
+    "red-300": "#E85D7F";
+    "red-400": "#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,22 +34,26 @@ export const coreSwatches = {
     '0': '#F5FFE3',
     '100': '#EAFDC6',
     '400': '#AEE938',
-    '700': '#008A27'
+    '700': '#008A27',
+    '900': '#151C07'
   },
   yellow: {
     '0': '#FFFAE5',
     '400': '#CCA900',
-    '500': '#FFD300'
+    '500': '#FFD300',
+    '900': '#211B00'
   },
   pink: {
     '0': '#FFF5FF',
     '400': '#F966FF'
   },
   red: {
-    '0': '#E85D7F',
-    '100': '#DC5879',
+    '0': '#FBF1F0',
+    '300': '#E85D7F',
+    '400': '#DC5879',
     '500': '#E91C11',
-    '600': '#BE1809'
+    '600': '#BE1809',
+    '900': '#280503'
   },
   orange: {
     '100': '#FFE8CC',
@@ -91,7 +95,7 @@ export const trueColors = {
   palePink: coreSwatches.pink[0],
   paleYellow: coreSwatches.yellow[0],
   pink: coreSwatches.pink[400],
-  paleRed: coreSwatches.red[100],
+  paleRed: coreSwatches.red[400],
   red: coreSwatches.red[500],
   yellow: coreSwatches.yellow[500],
   black,
@@ -120,7 +124,7 @@ export const platformSwatches = {
     '800': '#CA00D1'
   },
   teal: {
-    '500': '#027E97'
+    '500': '#006D82'
   },
   purple: {
     '300': '#B3CCFF'
@@ -132,8 +136,21 @@ export const truePlatformColors = {
   teal: platformSwatches.teal[500],
   purple: platformSwatches.purple[300]
 };
+export const platformEditorColors = {
+  'comment-light': '#686C7B',
+  'comment-dark': '#84868D',
+  'indent-active-light': '#BCBDC4',
+  'indent-active-dark': '#3B3D49',
+  'indent-inactive-light': '#8E919D',
+  'indent-inactive-dark': '#5F616B',
+  'line-number-active-light': '#31374C',
+  'line-number-active-dark': '#CECFD2',
+  'line-number-inactive-light': '#686C7B',
+  'line-number-inactive-dark': '#84868D'
+};
 export const platformPalette = {
   ...flattenScale(platformSwatches),
+  ...platformEditorColors,
   ...truePlatformColors
 };
 

package/dist/variance/config.d.ts

@@ -372,6 +372,9 @@ export declare const layout: {
     readonly gridArea: {
         readonly property: "gridArea";
     };
+    readonly containerType: {
+        readonly property: "containerType";
+    };
     readonly display: {
         readonly property: "display";
     };
@@ -848,6 +851,9 @@ export declare const all: {
     gridArea: {
         readonly property: "gridArea";
     };
+    containerType: {
+        readonly property: "containerType";
+    };
     display: {
         readonly property: "display";
     };

package/dist/variance/config.js

@@ -330,6 +330,9 @@ export const shadows = {
   }
 };
 export const layout = {
+  containerType: {
+    property: 'containerType'
+  },
   display: {
     property: 'display'
   },

package/dist/variance/props.d.ts

@@ -190,6 +190,9 @@ export declare const layout: import("@codecademy/variance/dist/types/config").Pa
     readonly gridArea: {
         readonly property: "gridArea";
     };
+    readonly containerType: {
+        readonly property: "containerType";
+    };
     readonly display: {
         readonly property: "display";
     };
@@ -851,6 +854,9 @@ export declare const css: import("@codecademy/variance/dist/types/config").CSS<i
     gridArea: {
         readonly property: "gridArea";
     };
+    containerType: {
+        readonly property: "containerType";
+    };
     display: {
         readonly property: "display";
     };
@@ -1302,6 +1308,9 @@ export declare const variant: import("@codecademy/variance/dist/types/config").V
     gridArea: {
         readonly property: "gridArea";
     };
+    containerType: {
+        readonly property: "containerType";
+    };
     display: {
         readonly property: "display";
     };
@@ -1753,6 +1762,9 @@ export declare const states: import("@codecademy/variance/dist/types/config").St
     gridArea: {
         readonly property: "gridArea";
     };
+    containerType: {
+        readonly property: "containerType";
+    };
     display: {
         readonly property: "display";
     };

package/dist/variance/utils.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { ThemeProps } from '@codecademy/variance';
-declare const allPropnames: ["mode", "variant", "p" | "fontSize" | "fontFamily" | "lineHeight" | "fontWeight" | "color" | "background" | "border" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom"];
+declare const allPropnames: ["mode", "variant", "p" | "fontSize" | "fontFamily" | "lineHeight" | "fontWeight" | "color" | "background" | "border" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom"];
 export type SystemPropNames = (typeof allPropnames)[number];
 export type ElementOrProps = keyof JSX.IntrinsicElements | ThemeProps;
 export type ForwardableProps<El extends ElementOrProps, Additional> = Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, Additional | SystemPropNames>;
 export declare function createStyledOptions<El extends ElementOrProps = 'div', Additional extends string = never>(additional?: readonly Additional[]): {
-    shouldForwardProp: (prop: PropertyKey) => prop is Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, "p" | "fontSize" | "fontFamily" | "lineHeight" | "fontWeight" | "color" | "background" | "border" | "mode" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "variant" | Additional>;
+    shouldForwardProp: (prop: PropertyKey) => prop is Exclude<El extends keyof JSX.IntrinsicElements ? keyof JSX.IntrinsicElements[El] : keyof Element, "p" | "fontSize" | "fontFamily" | "lineHeight" | "fontWeight" | "color" | "background" | "border" | "mode" | "alignContent" | "alignItems" | "alignSelf" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "bottom" | "boxShadow" | "columnGap" | "containerType" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "listStyleImage" | "listStylePosition" | "listStyleType" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "position" | "right" | "rowGap" | "textAlign" | "textShadow" | "textTransform" | "top" | "verticalAlign" | "whiteSpace" | "width" | "zIndex" | "backgroundPosition" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "listStyle" | "overflow" | "textDecoration" | "dimensions" | "textColor" | "bg" | "borderColorX" | "borderColorY" | "borderColorLeft" | "borderColorRight" | "borderColorTop" | "borderColorBottom" | "px" | "py" | "pt" | "pb" | "pr" | "pl" | "m" | "mx" | "my" | "mt" | "mb" | "mr" | "ml" | "borderX" | "borderY" | "borderWidthX" | "borderWidthY" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "borderWidthBottom" | "borderRadiusLeft" | "borderRadiusTop" | "borderRadiusBottom" | "borderRadiusRight" | "borderRadiusTopLeft" | "borderRadiusTopRight" | "borderRadiusBottomRight" | "borderRadiusBottomLeft" | "borderStyleX" | "borderStyleY" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "borderStyleBottom" | "variant" | Additional>;
 };
 /**
  * @description

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.7.0-alpha.d99e76.0",
+  "version": "17.7.0-alpha.dd4a6f.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.23.0-alpha.d99e76.0",
+    "@codecademy/variance": "0.23.0-alpha.dd4a6f.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "polished": "^4.1.2"
   },
@@ -34,5 +34,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "724efb772364d19f9c707f95f359ef504633667d"
+  "gitHead": "71b4929afb69be636ef16df393e102f8c9bf1b2c"
 }