Ajr video beta

.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 }}

.nx/version-plans/version-plan-1783360840721.md

@@ -0,0 +1,5 @@
+---
+gamut: minor
+---
+
+remove scss from video

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

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 <dev@codecademy.com>",
   "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",

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

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 <dev@codecademy.com>",
   "bin": "./bin/gamut.mjs",
   "dependencies": {
@@ -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"
   },

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
       }

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',

packages/gamut/src/Video/lib/VidstackPlayer.tsx → packages/gamut/src/Video/lib/VidstackPlayer/index.tsx

@@ -1,5 +1,6 @@
+/* Vidstack default theme (vendored via @import) + gamut overrides */
 /* eslint-disable gamut/no-css-standalone */
-import '../styles/vds_base_theme.scss';
+import './vidstack-styles.css';
 
 import { styledOptions } from '@codecademy/gamut-styles';
 import styled, { CSSObject } from '@emotion/styled';
@@ -16,11 +17,11 @@ import {
 } from '@vidstack/react';
 import React, { useRef } from 'react';
 
-import { Box } from '../../Box';
-import { VideoProps } from '..';
-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;

packages/gamut/src/Video/styles/vds_base_theme.scss → packages/gamut/src/Video/lib/VidstackPlayer/vidstack-styles.css

@@ -1,11 +1,11 @@
-@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";
 
 /**
-  * Youtube overlay
-  * - Why 120% ? hiding yt logo and copy link button which are not accessible.
-  */
+ * Youtube overlay
+ * - Why 120% ? hiding yt logo and copy link button which are not accessible.
+ */
 iframe.vds-youtube[data-no-controls] {
   height: 120%;
 }
@@ -14,7 +14,7 @@ iframe.vds-youtube[data-no-controls] {
   height: 1000%;
 }
 
-// Control buttons
+/* Control buttons */
 :where(.vds-button .vds-icon) {
   border-radius: unset;
 }
@@ -27,7 +27,7 @@ iframe.vds-youtube[data-no-controls] {
   padding: 0px 4px !important;
 }
 
-// Small layout volume / time slider
+/* Small layout volume / time slider */
 :where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track) {
   background-color: var(--color-gray-600);
 }
@@ -39,7 +39,7 @@ iframe.vds-youtube[data-no-controls] {
   color: white;
 }
 
-// Tooltip
+/* Tooltip */
 .vds-tooltip-content::after {
   content: "";
   -webkit-transform: rotate(45deg);

yarn.lock

@@ -1591,7 +1591,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"
@@ -1648,7 +1648,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:
@@ -1679,8 +1679,12 @@ __metadata:
   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
   bin:
     gamut: ./bin/gamut.mjs
   languageName: unknown