add colors css stylesheet for color variables

[mabela416]

Currently we can only use the design system colors if we import them like this in our javascript files

import { colors } from '@cypress-design/css'

but when we're working with css/scss stylesheets, we can't import the colors. In the dashboard, we have a separate design system where we defined the colors ourselves and that's what we've been using but for studio, we're not using this cypress services design system so I decided to add a stylesheet to the package @cypress-design/css so that we can import it in our css/scss files like this

@use "@cypress-design/css/dist/index.cjs.css" as *;

Like this we'll also have a central place where all our color definitions exist.

[changeset-bot]

🦋 Changeset detected

Latest commit: 77678a7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@cypress-design/css	Minor
@cypress-design/rollup-plugin-tailwind-keep	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
cypress-design	✅ Ready (Inspect)	Visit Preview	Jun 5, 2025 2:36pm

[cypress]

cypress-design    Run #2990

Run Properties:   Passed #2990  •  3b10618c82 ℹ️: Merge 77678a7324116da3257c090b35fdb5b71b34be30 into 6137714285595d6e436e6f156f6d...

Project	cypress-design
Branch Review	mabel/create-css-colors-stylesheet
Run status	Passed #2990
Run duration	02m 33s
Commit	3b10618c82 ℹ️: Merge 77678a7324116da3257c090b35fdb5b71b34be30 into 6137714285595d6e436e6f156f6d...
Committer	mabela416
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	236
View all changes introduced in this branch ↗︎

UI Coverage  7.14%
Untested elements	309
Tested elements	25

Accessibility  99.43%
Failed rules	0 critical   2 serious   0 moderate   1 minor
Failed elements	23

[ryanjwilke]

The code looks good to me. I would only make a recommendation simplify the final API for what is consumed in the repositories downstream.

For example, my proposal would be to change this:

@use "@cypress-design/css/dist/index.cjs.css" as *;

To something a bit simpler if it's technically possible:

// Option A
@use "@cypress-design/css" as *;

// Option B
@use "@cypress-design/css/colors" as *;

[ryanjwilke]

@mabela416 Any idea why Percy is missing so many screenshots? It seems a bit odd. I don't remember seeing this issue in other PRs but I could be wrong. I know we've struggled with flake in this repo in the past.

[mabela416]

@mabela416 Any idea why Percy is missing so many screenshots? It seems a bit odd. I don't remember seeing this issue in other PRs but I could be wrong. I know we've struggled with flake in this repo in the past.

I've seen this in other PRs. Not sure why because the other PRs I've seen this happen to are just for icons so we're not making big changes so I don't think the missing snapshots are related to my work

[mabela416]

The code looks good to me. I would only make a recommendation simplify the final API for what is consumed in the repositories downstream.

For example, my proposal would be to change this:

@use "@cypress-design/css/dist/index.cjs.css" as *;

To something a bit simpler if it's technically possible:

// Option A
@use "@cypress-design/css" as *;

// Option B
@use "@cypress-design/css/colors" as *;

I was able to get this name down to @cypress-design/css/index.css

[ryanjwilke]

@mabela416 That seems like a better compromise for sure. The only part that's hard to know is what I'm importing from that file. Is it just colors? Is it the entire design system and other selectors?

Again, your call, but I think it can be helpful to make sure the API as simple and understandable as possible for future engineers.

[mabela416]

@mabela416 That seems like a better compromise for sure. The only part that's hard to know is what I'm importing from that file. Is it just colors? Is it the entire design system and other selectors?

Again, your call, but I think it can be helpful to make sure the API as simple and understandable as possible for future engineers.

Yeah this is limited to the cypress-design/css package and right now it's just what's in colors.css because I'm importing that file here. Then, when we bundle the code all the css we imported in any of the cypress-design/css files get bundled into one file - index.css. If I create other css styles and import them to any of my files in the cypress-design/css package, then they'll also be included in the output file index.css.

[mabela416]

@mabela416 That seems like a better compromise for sure. The only part that's hard to know is what I'm importing from that file. Is it just colors? Is it the entire design system and other selectors?
Again, your call, but I think it can be helpful to make sure the API as simple and understandable as possible for future engineers.

Yeah this is limited to the cypress-design/css package and right now it's just what's in colors.css because I'm importing that file here. Then, when we bundle the code all the css we imported in any of the cypress-design/css files get bundled into one file - index.css. If I create other css styles and import them to any of my files in the cypress-design/css package, then they'll also be included in the output file index.css.

I updated the ReadMe to add a note about this