@codecademy/gamut-styles 17.6.5-alpha.2ccc85.0 → 17.6.5-alpha.30169d.0

package/dist/themes/platform.d.ts

@@ -76,10 +76,6 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly 8: string;
         readonly 12: string;
         readonly 16: string;
-        /**
-         * @description This is an extended theme for the learning environment with an expanded set of tokens
-         * That are not needed for the rest of the application.
-         */
         readonly 24: string;
         readonly 32: string;
         readonly 40: string;
@@ -519,22 +515,33 @@ export declare const platformTheme: Record<"breakpoints", {
 }, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     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-light': "#686c7b";
+    readonly 'line-number-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";
 }, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+        background: {
+            primary: "blue-0";
+        };
         editor: {
             attribute: "green-700";
             annotation: "red-500";
             atom: "pink-800";
             basic: "navy-800";
-            comment: "navy-300";
+            comment: "comment-light";
             constant: "orange-800";
             decoration: "red-500";
             invalid: "red-500";
@@ -553,9 +560,9 @@ export declare const platformTheme: Record<"breakpoints", {
             ui: {
                 background: "white";
                 text: "navy-800";
-                'indent-active': "navy-900";
-                'indent-inactive': "navy-600";
-                'line-number': "navy-300";
+                'indent-active': "indent-active-light";
+                'indent-inactive': "indent-inactive-light";
+                'line-number': "line-number-light";
             };
         };
     } | {
@@ -564,7 +571,7 @@ export declare const platformTheme: Record<"breakpoints", {
             annotation: "red-300";
             atom: "pink-400";
             basic: "white";
-            comment: "gray-600";
+            comment: "comment-dark";
             constant: "orange-500";
             decoration: "red-300";
             invalid: "red-300";
@@ -583,9 +590,9 @@ export declare const platformTheme: Record<"breakpoints", {
             ui: {
                 background: "navy-900";
                 text: "white";
-                'indent-active': "gray-900";
-                'indent-inactive': "gray-800";
-                'line-number': "gray-600";
+                'indent-active': "indent-active-dark";
+                'indent-inactive': "indent-inactive-dark";
+                'line-number': "line-number-dark";
             };
         };
     }, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
@@ -831,13 +838,21 @@ export declare const platformTheme: Record<"breakpoints", {
     }, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         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-light': "#686c7b";
+        readonly 'line-number-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";
     }, "-">, "color">>;
     modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
@@ -947,12 +962,15 @@ export declare const platformTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>, {
         light: import("@codecademy/variance").LiteralPaths<{
+            background: {
+                primary: "blue-0";
+            };
             editor: {
                 attribute: "green-700";
                 annotation: "red-500";
                 atom: "pink-800";
                 basic: "navy-800";
-                comment: "navy-300";
+                comment: "comment-light";
                 constant: "orange-800";
                 decoration: "red-500";
                 invalid: "red-500";
@@ -971,9 +989,9 @@ export declare const platformTheme: Record<"breakpoints", {
                 ui: {
                     background: "white";
                     text: "navy-800";
-                    'indent-active': "navy-900";
-                    'indent-inactive': "navy-600";
-                    'line-number': "navy-300";
+                    'indent-active': "indent-active-light";
+                    'indent-inactive': "indent-inactive-light";
+                    'line-number': "line-number-light";
                 };
             };
         }, "-", "_">;
@@ -983,7 +1001,7 @@ export declare const platformTheme: Record<"breakpoints", {
                 annotation: "red-300";
                 atom: "pink-400";
                 basic: "white";
-                comment: "gray-600";
+                comment: "comment-dark";
                 constant: "orange-500";
                 decoration: "red-300";
                 invalid: "red-300";
@@ -1002,9 +1020,9 @@ export declare const platformTheme: Record<"breakpoints", {
                 ui: {
                     background: "navy-900";
                     text: "white";
-                    'indent-active': "gray-900";
-                    'indent-inactive': "gray-800";
-                    'line-number': "gray-600";
+                    'indent-active': "indent-active-dark";
+                    'indent-inactive': "indent-inactive-dark";
+                    'line-number': "line-number-dark";
                 };
             };
         }, "-", "_">;
@@ -1082,13 +1100,21 @@ export declare const platformTheme: Record<"breakpoints", {
     }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "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" | import("@codecademy/variance").Path<{
         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-light': "#686c7b";
+        readonly 'line-number-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";
     }, "-">) => string;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;

package/dist/themes/platform.js

@@ -2,8 +2,6 @@ import { createTheme } from '@codecademy/variance';
 import { platformPalette } from '../variables';
 import { coreTheme } from './core';
 
-// KENNY: main branch to update color tokens for core + platform themes
-
 /**
  * @description This is an extended theme for the learning environment with an expanded set of tokens
  * That are not needed for the rest of the application.
@@ -11,12 +9,15 @@ import { coreTheme } from './core';
 
 export const platformTheme = createTheme(coreTheme).addColors(platformPalette).addColorModes('dark', {
   light: {
+    background: {
+      primary: 'blue-0'
+    },
     editor: {
       attribute: 'green-700',
       annotation: 'red-500',
       atom: 'pink-800',
       basic: 'navy-800',
-      comment: 'navy-300',
+      comment: 'comment-light',
       constant: 'orange-800',
       decoration: 'red-500',
       invalid: 'red-500',
@@ -35,9 +36,9 @@ export const platformTheme = createTheme(coreTheme).addColors(platformPalette).a
       ui: {
         background: 'white',
         text: 'navy-800',
-        'indent-active': 'navy-900',
-        'indent-inactive': 'navy-600',
-        'line-number': 'navy-300'
+        'indent-active': 'indent-active-light',
+        'indent-inactive': 'indent-inactive-light',
+        'line-number': 'line-number-light'
       }
     }
   },
@@ -47,7 +48,7 @@ export const platformTheme = createTheme(coreTheme).addColors(platformPalette).a
       annotation: 'red-300',
       atom: 'pink-400',
       basic: 'white',
-      comment: 'gray-600',
+      comment: 'comment-dark',
       constant: 'orange-500',
       decoration: 'red-300',
       invalid: 'red-300',
@@ -66,9 +67,9 @@ export const platformTheme = createTheme(coreTheme).addColors(platformPalette).a
       ui: {
         background: 'navy-900',
         text: 'white',
-        'indent-active': 'gray-900',
-        'indent-inactive': 'gray-800',
-        'line-number': 'gray-600'
+        'indent-active': 'indent-active-dark',
+        'indent-inactive': 'indent-inactive-dark',
+        'line-number': 'line-number-dark'
       }
     }
   }

package/dist/variables/colors.d.ts

@@ -179,7 +179,7 @@ export declare const platformSwatches: {
         readonly '800': "#CA00D1";
     };
     readonly teal: {
-        readonly '500': "#027E97";
+        readonly '500': "#006d82";
     };
     readonly purple: {
         readonly '300': "#B3CCFF";
@@ -188,19 +188,37 @@ 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-light': "#686c7b";
+    readonly 'line-number-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-light': "#686c7b";
+    readonly 'line-number-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";
 };
 /**

package/dist/variables/colors.js

@@ -124,7 +124,7 @@ export const platformSwatches = {
     '800': '#CA00D1'
   },
   teal: {
-    '500': '#027E97'
+    '500': '#006d82'
   },
   purple: {
     '300': '#B3CCFF'
@@ -136,8 +136,19 @@ 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-light': '#686c7b',
+  'line-number-dark': '#84868d'
+};
 export const platformPalette = {
   ...flattenScale(platformSwatches),
+  ...platformEditorColors,
   ...truePlatformColors
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.6.5-alpha.2ccc85.0",
+  "version": "17.6.5-alpha.30169d.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
     "@codecademy/variance": "0.22.1",
@@ -34,5 +34,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "9823d0e84feafdef697906e220c19e9f8056439f"
+  "gitHead": "5fb8da41fe54d1adeacf7b44a45b794aa2313928"
 }