From 56da2f21201aa9f2c4b4cc4ce9d681ec40c294e1 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Tue, 30 Jun 2026 11:17:30 -0400 Subject: [PATCH 01/15] remove scss --- packages/gamut/project.json | 2 +- .../gamut/src/Video/lib/VidstackPlayer.tsx | 9 +- packages/gamut/src/Video/styles.ts | 101 ++++++++++++++++++ .../src/Video/styles/vds_base_theme.scss | 101 ------------------ packages/gamut/src/Video/vidstack-vendor.css | 3 + 5 files changed, 112 insertions(+), 104 deletions(-) create mode 100644 packages/gamut/src/Video/styles.ts delete mode 100644 packages/gamut/src/Video/styles/vds_base_theme.scss create mode 100644 packages/gamut/src/Video/vidstack-vendor.css diff --git a/packages/gamut/project.json b/packages/gamut/project.json index f94a7846862..846189d3375 100644 --- a/packages/gamut/project.json +++ b/packages/gamut/project.json @@ -14,7 +14,7 @@ "rm -rf ./dist", "babel ./src --out-dir ./dist --extensions \".ts,.tsx\"", "tsc --emitDeclarationOnly --project ./tsconfig.lib.json", - "cpy './src/**/*.{d.ts,scss,svg,png}' ./dist" + "cpy './src/**/*.{d.ts,scss,css,svg,png}' ./dist" ], "parallel": false } diff --git a/packages/gamut/src/Video/lib/VidstackPlayer.tsx b/packages/gamut/src/Video/lib/VidstackPlayer.tsx index d118500220d..facd939ed26 100644 --- a/packages/gamut/src/Video/lib/VidstackPlayer.tsx +++ b/packages/gamut/src/Video/lib/VidstackPlayer.tsx @@ -1,7 +1,10 @@ +/* Third-party Vidstack default theme styles */ /* eslint-disable gamut/no-css-standalone */ -import '../styles/vds_base_theme.scss'; +import '../vidstack-vendor.css'; +/* eslint-enable gamut/no-css-standalone */ import { styledOptions } from '@codecademy/gamut-styles'; +import { Global } from '@emotion/react'; import styled, { CSSObject } from '@emotion/styled'; import { isYouTubeProvider, @@ -18,13 +21,14 @@ import React, { useRef } from 'react'; import { Box } from '../../Box'; import { VideoProps } from '..'; +import { vdsBaseThemeStyles } from '../styles'; import { keyboardShortcuts } from './utils/constants'; import { vdsVariables } from './utils/variables'; import { VideoLayout } from './VideoLayout'; const VariableProvider = styled(Box, styledOptions(['variables']))<{ variables?: CSSObject; -}>(({ variables }) => variables, { +}>(({ variables }) => variables, vdsBaseThemeStyles, { width: '100%', height: '100%', position: 'relative', @@ -80,6 +84,7 @@ export const VidstackPlayer: React.FC = ({ style={{ width, height }} variables={vdsVariables} > + Date: Tue, 30 Jun 2026 13:28:32 -0400 Subject: [PATCH 02/15] clean up --- packages/gamut/src/Video/lib/VidstackPlayer.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/gamut/src/Video/lib/VidstackPlayer.tsx b/packages/gamut/src/Video/lib/VidstackPlayer.tsx index facd939ed26..b229051469c 100644 --- a/packages/gamut/src/Video/lib/VidstackPlayer.tsx +++ b/packages/gamut/src/Video/lib/VidstackPlayer.tsx @@ -2,9 +2,7 @@ /* eslint-disable gamut/no-css-standalone */ import '../vidstack-vendor.css'; -/* eslint-enable gamut/no-css-standalone */ import { styledOptions } from '@codecademy/gamut-styles'; -import { Global } from '@emotion/react'; import styled, { CSSObject } from '@emotion/styled'; import { isYouTubeProvider, @@ -84,7 +82,6 @@ export const VidstackPlayer: React.FC = ({ style={{ width, height }} variables={vdsVariables} > - Date: Mon, 6 Jul 2026 14:00:52 -0400 Subject: [PATCH 03/15] release plan --- .nx/version-plans/version-plan-1783360840721.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .nx/version-plans/version-plan-1783360840721.md diff --git a/.nx/version-plans/version-plan-1783360840721.md b/.nx/version-plans/version-plan-1783360840721.md new file mode 100644 index 00000000000..a5d4f1ab73d --- /dev/null +++ b/.nx/version-plans/version-plan-1783360840721.md @@ -0,0 +1,5 @@ +--- +gamut: minor +--- + +remove scss from video From b4a5319a09bb208f9da37de9b62e194faa345c85 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Tue, 7 Jul 2026 15:23:53 -0400 Subject: [PATCH 04/15] trigger alpha --- .github/workflows/publish-alpha.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/publish-alpha.yml b/.github/workflows/publish-alpha.yml index b968dd17558..eeb6e02dcc1 100644 --- a/.github/workflows/publish-alpha.yml +++ b/.github/workflows/publish-alpha.yml @@ -27,6 +27,7 @@ jobs: runs-on: ubuntu-22.04 timeout-minutes: 30 steps: + - uses: actions/checkout@v4 - uses: ./.github/actions/prerelease-publish with: node-auth-token: ${{ secrets.NODE_AUTH_TOKEN }} From 85280a0c6720ba38b8be5aa905d6beff05382b91 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Tue, 7 Jul 2026 15:32:29 -0400 Subject: [PATCH 05/15] fix: use webpack ~ prefix for vidstack CSS imports Update vidstack-vendor.css to use the webpack ~ module resolution prefix, which tells webpack to resolve imports from node_modules. This ensures the CSS imports are correctly resolved in both Storybook and consumer builds like Codecademy. Fixes module resolution error: "Can't resolve './@vidstack/react/..." when Codecademy's webpack processes the CSS file from the gamut dist output. Co-Authored-By: Claude Haiku 4.5 --- packages/gamut/src/Video/vidstack-vendor.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gamut/src/Video/vidstack-vendor.css b/packages/gamut/src/Video/vidstack-vendor.css index 3941d8a8b46..dc304ca4e40 100644 --- a/packages/gamut/src/Video/vidstack-vendor.css +++ b/packages/gamut/src/Video/vidstack-vendor.css @@ -1,3 +1,3 @@ -@import "@vidstack/react/player/styles/default/theme.css"; -@import "@vidstack/react/player/styles/default/layouts/video.css"; -@import "@vidstack/react/player/styles/default/layouts/audio.css"; +@import "~@vidstack/react/player/styles/default/theme.css"; +@import "~@vidstack/react/player/styles/default/layouts/video.css"; +@import "~@vidstack/react/player/styles/default/layouts/audio.css"; From 573e7281a126e963a48243d2a5ffec2c30469387 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Thu, 9 Jul 2026 13:09:26 -0400 Subject: [PATCH 06/15] add new video stories --- .../src/lib/Molecules/Video/Video.mdx | 20 +++++++++- .../src/lib/Molecules/Video/Video.stories.tsx | 39 +++++++++++++++++++ 2 files changed, 57 insertions(+), 2 deletions(-) diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.mdx b/packages/styleguide/src/lib/Molecules/Video/Video.mdx index 0e9e2a76ad5..13b88c46463 100644 --- a/packages/styleguide/src/lib/Molecules/Video/Video.mdx +++ b/packages/styleguide/src/lib/Molecules/Video/Video.mdx @@ -46,18 +46,34 @@ The Video component is a feature-rich video player that supports multiple video ## Variants +### Default: Internal MP4 Video + + + ### HLS Stream With Captions, Chapters And Thumbnails -### YouTube Video +### YouTube Video (ReactVideoPlayer - No Captions) -### Vimeo Video +### YouTube Video With Captions (VidstackPlayer) + + + +### Vimeo Video (ReactVideoPlayer - No Captions) +### Multiple Video Sources + + + +### YouTube Without Embed (VidstackPlayer) + + + ## Playground diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx index 331d24d4422..e2083038636 100644 --- a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx +++ b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx @@ -65,3 +65,42 @@ export const VideoWithTracksAndThumbnails: Story = { thumbnails: 'https://files.vidstack.io/sprite-fight/thumbnails.vtt', }, }; + +export const YoutubeWithCaptions: Story = { + args: { + videoUrl: 'https://www.youtube.com/watch?v=wxds6MAtUQ0', + videoTitle: 'Intro to Programming: Loops', + textTracks: [ + { + src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', + label: 'English', + language: 'en-US', + kind: 'captions', + }, + ], + }, +}; + +export const MultipleVideoSources: Story = { + args: { + videoUrl: [ + { + src: 'https://static-assets.codecademy.com/skillshorts/introduction-to-quantum-computing/01-Introduction-to-Quantum-Computing.mp4', + type: 'video/mp4', + }, + { + src: 'https://static-assets.codecademy.com/skillshorts/introduction-to-quantum-computing/01-Introduction-to-Quantum-Computing.webm', + type: 'video/webm', + }, + ], + videoTitle: 'Multi-Format Video', + }, +}; + +export const YoutubeWithoutEmbed: Story = { + args: { + videoUrl: 'https://www.youtube.com/watch?v=wxds6MAtUQ0', + videoTitle: 'Intro to Programming: Loops (VidstackPlayer)', + showPlayerEmbed: false, + }, +}; From a88008f1ad2f9496d270e8a0b2ac9f30999a08e4 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Wed, 15 Jul 2026 14:37:35 -0400 Subject: [PATCH 07/15] undo storybook changes --- .../src/lib/Molecules/Video/Video.mdx | 20 +--------- .../src/lib/Molecules/Video/Video.stories.tsx | 39 ------------------- 2 files changed, 2 insertions(+), 57 deletions(-) diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.mdx b/packages/styleguide/src/lib/Molecules/Video/Video.mdx index 13b88c46463..0e9e2a76ad5 100644 --- a/packages/styleguide/src/lib/Molecules/Video/Video.mdx +++ b/packages/styleguide/src/lib/Molecules/Video/Video.mdx @@ -46,34 +46,18 @@ The Video component is a feature-rich video player that supports multiple video ## Variants -### Default: Internal MP4 Video - - - ### HLS Stream With Captions, Chapters And Thumbnails -### YouTube Video (ReactVideoPlayer - No Captions) +### YouTube Video -### YouTube Video With Captions (VidstackPlayer) - - - -### Vimeo Video (ReactVideoPlayer - No Captions) +### Vimeo Video -### Multiple Video Sources - - - -### YouTube Without Embed (VidstackPlayer) - - - ## Playground diff --git a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx index e2083038636..331d24d4422 100644 --- a/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx +++ b/packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx @@ -65,42 +65,3 @@ export const VideoWithTracksAndThumbnails: Story = { thumbnails: 'https://files.vidstack.io/sprite-fight/thumbnails.vtt', }, }; - -export const YoutubeWithCaptions: Story = { - args: { - videoUrl: 'https://www.youtube.com/watch?v=wxds6MAtUQ0', - videoTitle: 'Intro to Programming: Loops', - textTracks: [ - { - src: 'https://files.vidstack.io/sprite-fight/subs/english.vtt', - label: 'English', - language: 'en-US', - kind: 'captions', - }, - ], - }, -}; - -export const MultipleVideoSources: Story = { - args: { - videoUrl: [ - { - src: 'https://static-assets.codecademy.com/skillshorts/introduction-to-quantum-computing/01-Introduction-to-Quantum-Computing.mp4', - type: 'video/mp4', - }, - { - src: 'https://static-assets.codecademy.com/skillshorts/introduction-to-quantum-computing/01-Introduction-to-Quantum-Computing.webm', - type: 'video/webm', - }, - ], - videoTitle: 'Multi-Format Video', - }, -}; - -export const YoutubeWithoutEmbed: Story = { - args: { - videoUrl: 'https://www.youtube.com/watch?v=wxds6MAtUQ0', - videoTitle: 'Intro to Programming: Loops (VidstackPlayer)', - showPlayerEmbed: false, - }, -}; From 373994b75fcfd6c6611335c1887cc6c54b114182 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Wed, 15 Jul 2026 15:32:04 -0400 Subject: [PATCH 08/15] fix(Video): render vidstack theme overrides via Global to fix tooltip beak Applying vdsBaseThemeStyles as a styled() argument on VariableProvider scoped every .vds-* selector under the player's generated class, which broke the tooltip beak (rendered as a full diamond). Render the overrides via instead so they apply at document level, matching the original flat cascade and reaching portaled .vds-* nodes. Co-Authored-By: Claude Opus 4.8 (1M context) --- packages/gamut/src/Video/lib/VidstackPlayer.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/gamut/src/Video/lib/VidstackPlayer.tsx b/packages/gamut/src/Video/lib/VidstackPlayer.tsx index b229051469c..a5b3d3ae0d0 100644 --- a/packages/gamut/src/Video/lib/VidstackPlayer.tsx +++ b/packages/gamut/src/Video/lib/VidstackPlayer.tsx @@ -3,6 +3,7 @@ import '../vidstack-vendor.css'; import { styledOptions } from '@codecademy/gamut-styles'; +import { Global } from '@emotion/react'; import styled, { CSSObject } from '@emotion/styled'; import { isYouTubeProvider, @@ -26,7 +27,7 @@ import { VideoLayout } from './VideoLayout'; const VariableProvider = styled(Box, styledOptions(['variables']))<{ variables?: CSSObject; -}>(({ variables }) => variables, vdsBaseThemeStyles, { +}>(({ variables }) => variables, { width: '100%', height: '100%', position: 'relative', @@ -82,6 +83,7 @@ export const VidstackPlayer: React.FC = ({ style={{ width, height }} variables={vdsVariables} > + Date: Wed, 22 Jul 2026 11:17:31 -0400 Subject: [PATCH 09/15] feat(Tag): update read only tag styles to be less prominent (#3399) * update read only tag styles * add version plan --- .nx/version-plans/version-plan-1784131265664.md | 5 +++++ packages/gamut/src/Tag/styles.tsx | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .nx/version-plans/version-plan-1784131265664.md diff --git a/.nx/version-plans/version-plan-1784131265664.md b/.nx/version-plans/version-plan-1784131265664.md new file mode 100644 index 00000000000..bcd41d12223 --- /dev/null +++ b/.nx/version-plans/version-plan-1784131265664.md @@ -0,0 +1,5 @@ +--- +gamut: minor +--- + +update read-only tag colors diff --git a/packages/gamut/src/Tag/styles.tsx b/packages/gamut/src/Tag/styles.tsx index e07fad4489a..f56ed207147 100644 --- a/packages/gamut/src/Tag/styles.tsx +++ b/packages/gamut/src/Tag/styles.tsx @@ -63,9 +63,9 @@ export const tagUsageVariants = variant({ }, variants: { readOnly: { - bg: 'text-secondary', + bg: 'background-disabled', borderRadius: 'none', - color: 'background', + color: 'text', }, selection: { bg: 'text-secondary', From f96f9762f719d50bba3c991f20c0fdba78855dad Mon Sep 17 00:00:00 2001 From: codecademydev Date: Wed, 22 Jul 2026 15:19:52 +0000 Subject: [PATCH 10/15] chore(release): publish - project: gamut-kit 3.0.10 - project: gamut 72.3.0 --- .nx/version-plans/version-plan-1784131265664.md | 5 ----- packages/gamut-kit/CHANGELOG.md | 6 ++++++ packages/gamut-kit/package.json | 4 ++-- packages/gamut/CHANGELOG.md | 10 ++++++++++ packages/gamut/package.json | 2 +- yarn.lock | 4 ++-- 6 files changed, 21 insertions(+), 10 deletions(-) delete mode 100644 .nx/version-plans/version-plan-1784131265664.md diff --git a/.nx/version-plans/version-plan-1784131265664.md b/.nx/version-plans/version-plan-1784131265664.md deleted file mode 100644 index bcd41d12223..00000000000 --- a/.nx/version-plans/version-plan-1784131265664.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -gamut: minor ---- - -update read-only tag colors diff --git a/packages/gamut-kit/CHANGELOG.md b/packages/gamut-kit/CHANGELOG.md index 19684616054..07e44ccb888 100644 --- a/packages/gamut-kit/CHANGELOG.md +++ b/packages/gamut-kit/CHANGELOG.md @@ -1,3 +1,9 @@ +## 3.0.10 (2026-07-22) + +### 🧱 Updated Dependencies + +- Updated gamut to 72.3.0 + ## 3.0.9 (2026-07-20) ### 🧱 Updated Dependencies diff --git a/packages/gamut-kit/package.json b/packages/gamut-kit/package.json index 3d34457a744..a5060ac83ff 100644 --- a/packages/gamut-kit/package.json +++ b/packages/gamut-kit/package.json @@ -1,10 +1,10 @@ { "name": "@codecademy/gamut-kit", "description": "Styleguide & Component library for Codecademy", - "version": "3.0.9", + "version": "3.0.10", "author": "Codecademy Engineering ", "dependencies": { - "@codecademy/gamut": "72.2.5", + "@codecademy/gamut": "72.3.0", "@codecademy/gamut-icons": "9.57.10", "@codecademy/gamut-illustrations": "0.58.15", "@codecademy/gamut-patterns": "0.10.34", diff --git a/packages/gamut/CHANGELOG.md b/packages/gamut/CHANGELOG.md index c9b35664930..b2474c95321 100644 --- a/packages/gamut/CHANGELOG.md +++ b/packages/gamut/CHANGELOG.md @@ -1,3 +1,13 @@ +## 72.3.0 (2026-07-22) + +### 🚀 Features + +- update read-only tag colors ([#3399](https://github.com/Codecademy/gamut/pull/3399)) + +### ❤️ Thank You + +- Amy Resnik + ## 72.2.5 (2026-07-20) ### 🩹 Fixes diff --git a/packages/gamut/package.json b/packages/gamut/package.json index 5ad7d01f58d..42c6790e69b 100644 --- a/packages/gamut/package.json +++ b/packages/gamut/package.json @@ -1,7 +1,7 @@ { "name": "@codecademy/gamut", "description": "Styleguide & Component library for Codecademy", - "version": "72.2.5", + "version": "72.3.0", "author": "Codecademy Engineering ", "bin": "./bin/gamut.mjs", "dependencies": { diff --git a/yarn.lock b/yarn.lock index ccf909708ce..18056706450 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1648,7 +1648,7 @@ __metadata: version: 0.0.0-use.local resolution: "@codecademy/gamut-kit@workspace:packages/gamut-kit" dependencies: - "@codecademy/gamut": "npm:72.2.5" + "@codecademy/gamut": "npm:72.3.0" "@codecademy/gamut-icons": "npm:9.57.10" "@codecademy/gamut-illustrations": "npm:0.58.15" "@codecademy/gamut-patterns": "npm:0.10.34" @@ -1705,7 +1705,7 @@ __metadata: languageName: unknown linkType: soft -"@codecademy/gamut@npm:72.2.5, @codecademy/gamut@workspace:*, @codecademy/gamut@workspace:packages/gamut": +"@codecademy/gamut@npm:72.3.0, @codecademy/gamut@workspace:*, @codecademy/gamut@workspace:packages/gamut": version: 0.0.0-use.local resolution: "@codecademy/gamut@workspace:packages/gamut" dependencies: From f3d5d2ac5be6fc0fa6553d5017ce2b0dc40853e2 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Fri, 24 Jul 2026 14:32:46 -0400 Subject: [PATCH 11/15] drop ~ --- packages/gamut/src/Video/vidstack-vendor.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gamut/src/Video/vidstack-vendor.css b/packages/gamut/src/Video/vidstack-vendor.css index dc304ca4e40..3941d8a8b46 100644 --- a/packages/gamut/src/Video/vidstack-vendor.css +++ b/packages/gamut/src/Video/vidstack-vendor.css @@ -1,3 +1,3 @@ -@import "~@vidstack/react/player/styles/default/theme.css"; -@import "~@vidstack/react/player/styles/default/layouts/video.css"; -@import "~@vidstack/react/player/styles/default/layouts/audio.css"; +@import "@vidstack/react/player/styles/default/theme.css"; +@import "@vidstack/react/player/styles/default/layouts/video.css"; +@import "@vidstack/react/player/styles/default/layouts/audio.css"; From 067c150d5d13361a19cc05ea1ccd72dfc30c88a4 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Tue, 28 Jul 2026 13:20:11 -0400 Subject: [PATCH 12/15] add css-loader peer dep --- packages/gamut/package.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/gamut/package.json b/packages/gamut/package.json index 83e19e31f52..99c58146575 100644 --- a/packages/gamut/package.json +++ b/packages/gamut/package.json @@ -44,9 +44,15 @@ "peerDependencies": { "@emotion/react": "^11.4.0", "@emotion/styled": "^11.3.0", + "css-loader": ">=4.0.0", "react": "^17.0.2 || ^18.3.0 || ^19.0.0", "react-dom": "^17.0.2 || ^18.3.0 || ^19.0.0" }, + "peerDependenciesMeta": { + "css-loader": { + "optional": true + } + }, "publishConfig": { "access": "public" }, From 0175355093cf4623f246eb1d5a2eb25984589ca3 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Tue, 28 Jul 2026 15:35:01 -0400 Subject: [PATCH 13/15] drop ~ --- packages/gamut/src/Video/vidstack-vendor.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gamut/src/Video/vidstack-vendor.css b/packages/gamut/src/Video/vidstack-vendor.css index dc304ca4e40..3941d8a8b46 100644 --- a/packages/gamut/src/Video/vidstack-vendor.css +++ b/packages/gamut/src/Video/vidstack-vendor.css @@ -1,3 +1,3 @@ -@import "~@vidstack/react/player/styles/default/theme.css"; -@import "~@vidstack/react/player/styles/default/layouts/video.css"; -@import "~@vidstack/react/player/styles/default/layouts/audio.css"; +@import "@vidstack/react/player/styles/default/theme.css"; +@import "@vidstack/react/player/styles/default/layouts/video.css"; +@import "@vidstack/react/player/styles/default/layouts/audio.css"; From 9f3f3c335e042149cf54ae7fae2db951b6a729f7 Mon Sep 17 00:00:00 2001 From: Amy Resnik Date: Tue, 28 Jul 2026 15:36:09 -0400 Subject: [PATCH 14/15] move around vidstack styles --- .../index.tsx} | 17 ++- .../{utils => VidstackPlayer}/variables.ts | 0 .../lib/VidstackPlayer/vidstack-styles.css | 101 ++++++++++++++++++ packages/gamut/src/Video/styles.ts | 101 ------------------ packages/gamut/src/Video/vidstack-vendor.css | 3 - 5 files changed, 108 insertions(+), 114 deletions(-) rename packages/gamut/src/Video/lib/{VidstackPlayer.tsx => VidstackPlayer/index.tsx} (88%) rename packages/gamut/src/Video/lib/{utils => VidstackPlayer}/variables.ts (100%) create mode 100644 packages/gamut/src/Video/lib/VidstackPlayer/vidstack-styles.css delete mode 100644 packages/gamut/src/Video/styles.ts delete mode 100644 packages/gamut/src/Video/vidstack-vendor.css diff --git a/packages/gamut/src/Video/lib/VidstackPlayer.tsx b/packages/gamut/src/Video/lib/VidstackPlayer/index.tsx similarity index 88% rename from packages/gamut/src/Video/lib/VidstackPlayer.tsx rename to packages/gamut/src/Video/lib/VidstackPlayer/index.tsx index a5b3d3ae0d0..c8cd363b489 100644 --- a/packages/gamut/src/Video/lib/VidstackPlayer.tsx +++ b/packages/gamut/src/Video/lib/VidstackPlayer/index.tsx @@ -1,9 +1,8 @@ -/* Third-party Vidstack default theme styles */ +/* Vidstack default theme (vendored via @import) + gamut overrides */ /* eslint-disable gamut/no-css-standalone */ -import '../vidstack-vendor.css'; +import './vidstack-styles.css'; import { styledOptions } from '@codecademy/gamut-styles'; -import { Global } from '@emotion/react'; import styled, { CSSObject } from '@emotion/styled'; import { isYouTubeProvider, @@ -18,12 +17,11 @@ import { } from '@vidstack/react'; import React, { useRef } from 'react'; -import { Box } from '../../Box'; -import { VideoProps } from '..'; -import { vdsBaseThemeStyles } from '../styles'; -import { keyboardShortcuts } from './utils/constants'; -import { vdsVariables } from './utils/variables'; -import { VideoLayout } from './VideoLayout'; +import { Box } from '../../../Box'; +import { VideoProps } from '../..'; +import { keyboardShortcuts } from '../utils/constants'; +import { VideoLayout } from '../VideoLayout'; +import { vdsVariables } from './variables'; const VariableProvider = styled(Box, styledOptions(['variables']))<{ variables?: CSSObject; @@ -83,7 +81,6 @@ export const VidstackPlayer: React.FC = ({ style={{ width, height }} variables={vdsVariables} > - Date: Tue, 28 Jul 2026 15:38:11 -0400 Subject: [PATCH 15/15] add css-loader peer dep --- packages/gamut/package.json | 10 ++++++++-- yarn.lock | 8 ++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/gamut/package.json b/packages/gamut/package.json index 3d4e136bb16..34d031b5442 100644 --- a/packages/gamut/package.json +++ b/packages/gamut/package.json @@ -44,8 +44,14 @@ "peerDependencies": { "@emotion/react": "^11.4.0", "@emotion/styled": "^11.3.0", - "react": "^17.0.2 || ^18.3.0", - "react-dom": "^17.0.2 || ^18.3.0" + "css-loader": ">=4.0.0", + "react": "^17.0.2 || ^18.3.0 || ^19.0.0", + "react-dom": "^17.0.2 || ^18.3.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "css-loader": { + "optional": true + } }, "publishConfig": { "access": "public" diff --git a/yarn.lock b/yarn.lock index 58889448829..952cae97268 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1736,8 +1736,12 @@ __metadata: peerDependencies: "@emotion/react": ^11.4.0 "@emotion/styled": ^11.3.0 - react: ^17.0.2 || ^18.3.0 - react-dom: ^17.0.2 || ^18.3.0 + css-loader: ">=4.0.0" + react: ^17.0.2 || ^18.3.0 || ^19.0.0 + react-dom: ^17.0.2 || ^18.3.0 || ^19.0.0 + peerDependenciesMeta: + css-loader: + optional: true bin: gamut: ./bin/gamut.mjs languageName: unknown