Merge branch 'main' into sg-inline-tooltip-beak-fix

smithgajjar09 · web-flow · commit 025b2bf60393 · 2025-04-03T22:26:01.000+05:30
diff --git a/packages/styleguide/.storybook/components/Scales/ColorScale.tsx b/packages/styleguide/.storybook/components/Scales/ColorScale.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { themed } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
-import { Card, GridBox } from '@codecademy/gamut/src';
+import { Box, GridBox } from '@codecademy/gamut/src';
 
 const HexCode = styled.span`
   font-family: ${themed('fontFamily.monospace')};
@@ -19,19 +19,20 @@ export const ColorScale: React.FC<{ colors: Record<string, string> }> = ({
 
   return (
     <>
-      <Card
+      <Box
         p={0}
         width="100%"
         borderRadius="md"
         display="grid"
         minHeight="3rem"
         gridAutoFlow="column"
         overflow="hidden"
+        border={1}
       >
         {weights.map(([key, hex]) => (
           <Color key={`color-${key}`} bg={hex} />
         ))}
-      </Card>
+      </Box>
       <GridBox width="100%" p={4} gridAutoFlow="column">
         {weights.map(([key, hex]) => (
           <GridBox
diff --git a/packages/styleguide/CHANGELOG.md b/packages/styleguide/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [71.1.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@71.1.1...@codecademy/styleguide@71.1.2) (2025-04-03)
+
+### Bug Fixes
+
+- **ColorScale:** updated notations for colors that have hyphen in their names ([6470234](https://github.com/Codecademy/gamut/commit/6470234693ca7d422e762b5c369f0f2cc291a971))
+
+### [71.1.1](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@71.1.0...@codecademy/styleguide@71.1.1) (2025-04-03)
+
+### Bug Fixes
+
+- **colorscale:** grid display fixed for color swatches ([27e9c87](https://github.com/Codecademy/gamut/commit/27e9c87d2e46da7e2d7dacc898ec2a02952abe17))
+
 ## [71.1.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@71.0.1...@codecademy/styleguide@71.1.0) (2025-04-02)
 
 ### Features
diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "71.1.0",
+  "version": "71.1.2",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
diff --git a/packages/styleguide/src/lib/Foundations/shared/adminElements.tsx b/packages/styleguide/src/lib/Foundations/shared/adminElements.tsx
@@ -2,6 +2,7 @@ import { adminTheme, Background } from '@codecademy/gamut-styles';
 
 import { Code, ColorScale, TokenTable } from '~styleguide/blocks';
 
+import { applyCorrectNotation } from './applyCorrectNotation';
 import { PATH_COLUMN, PROP_COLUMN } from './elements';
 
 export const adminLightMode = {
@@ -13,7 +14,9 @@ export const adminLightMode = {
     { ...PROP_COLUMN, size: 'lg' },
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',
@@ -39,7 +42,9 @@ export const adminDarkMode = {
     { ...PROP_COLUMN, size: 'lg' },
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',
diff --git a/packages/styleguide/src/lib/Foundations/shared/applyCorrectNotation.ts b/packages/styleguide/src/lib/Foundations/shared/applyCorrectNotation.ts
@@ -0,0 +1,5 @@
+export const applyCorrectNotation = ({ id }: { id: string }) => {
+  const hasHypen = id.includes('-');
+  if (!hasHypen) return `.${id}`;
+  return `['${id}']`;
+};
diff --git a/packages/styleguide/src/lib/Foundations/shared/elements.tsx b/packages/styleguide/src/lib/Foundations/shared/elements.tsx
@@ -12,6 +12,8 @@ import kebabCase from 'lodash/kebabCase';
 
 import { Code, ColorScale, LinkTo, TokenTable } from '~styleguide/blocks';
 
+import { applyCorrectNotation } from './applyCorrectNotation';
+
 export const PROP_COLUMN = {
   key: 'key',
   name: 'Prop',
@@ -41,7 +43,9 @@ export const lightMode = {
     { ...PROP_COLUMN, size: 'lg' },
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',
@@ -67,7 +71,9 @@ export const darkMode = {
     { ...PROP_COLUMN, size: 'lg' },
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',
@@ -91,7 +97,9 @@ export const color = {
     PROP_COLUMN,
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',
@@ -117,7 +125,7 @@ export const swatch = {
       render: ({ id, hexes }: any) => {
         return (
           <Code>
-            theme.colors[`{id}-{Object.keys(hexes)[0]}`]
+            theme.colors[&apos;{id}-{Object.keys(hexes)[0]}&apos;]
           </Code>
         );
       },
@@ -145,7 +153,7 @@ export const rgbaSwatch = {
       render: ({ id, hexes }: any) => {
         return (
           <Code>
-            theme.colors[`{id}-{Object.keys(hexes)[0]}`]
+            theme.colors[&apos;{id}-{Object.keys(hexes)[0]}&apos;]
           </Code>
         );
       },
@@ -195,7 +203,9 @@ export const lxStudioColor = {
     PROP_COLUMN,
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',
diff --git a/packages/styleguide/src/lib/Foundations/shared/lxStudioElements.tsx b/packages/styleguide/src/lib/Foundations/shared/lxStudioElements.tsx
@@ -7,6 +7,7 @@ import {
 
 import { Code, ColorScale, TokenTable } from '~styleguide/blocks';
 
+import { applyCorrectNotation } from './applyCorrectNotation';
 import {
   createExampleColumn,
   PATH_COLUMN,
@@ -23,7 +24,9 @@ export const lxStudioColor = {
     PROP_COLUMN,
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',
@@ -43,7 +46,9 @@ export const lxStudioLightMode = {
     { ...PROP_COLUMN, size: 'lg' },
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',
@@ -71,7 +76,9 @@ export const lxStudioDarkMode = {
     { ...PROP_COLUMN, size: 'lg' },
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',
diff --git a/packages/styleguide/src/lib/Foundations/shared/platformElements.tsx b/packages/styleguide/src/lib/Foundations/shared/platformElements.tsx
@@ -7,6 +7,7 @@ import {
 
 import { Code, ColorScale, TokenTable } from '~styleguide/blocks';
 
+import { applyCorrectNotation } from './applyCorrectNotation';
 import { PATH_COLUMN, PROP_COLUMN } from './elements';
 
 export const platformSwatch = {
@@ -20,7 +21,7 @@ export const platformSwatch = {
       ...PATH_COLUMN,
       render: ({ id, hexes }: any) => (
         <Code>
-          theme.colors[`{id}-{Object.keys(hexes)[0]}`]
+          theme.colors[&apos;{id}-{Object.keys(hexes)[0]}&apos;]
         </Code>
       ),
     },
@@ -44,7 +45,9 @@ export const platformColor = {
     PROP_COLUMN,
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',
@@ -64,7 +67,9 @@ export const platformLightMode = {
     { ...PROP_COLUMN, size: 'lg' },
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',
@@ -92,7 +97,9 @@ export const platformDarkMode = {
     { ...PROP_COLUMN, size: 'lg' },
     {
       ...PATH_COLUMN,
-      render: ({ id }: any) => <Code>theme.colors.{id}</Code>,
+      render: ({ id }: any) => (
+        <Code>theme.colors{applyCorrectNotation({ id })}</Code>
+      ),
     },
     {
       key: 'swatch',

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@codecademy/styleguide",`
`3`	`3`	`"description": "Styleguide & Component library for codecademy.com",`
`4`		`- "version": "71.1.0",`
	`4`	`+ "version": "71.1.2",`
`5`	`5`	`"author": "Codecademy Engineering",`
`6`	`6`	`"license": "MIT",`
`7`	`7`	`"publishConfig": {`