Repository: cypress-io/cypress-design
Pull request #571: Adding tag, gray900
Author: login: emilmilanov
Created: 2025-05-05T13:46:35Z | Merged: 2025-05-08T16:58:17Z

<img width="689" alt="image" src="https://github.com/user-attachments/assets/903681c3-7f80-4369-a206-bfe3e5819313" />


Diff:
diff --git a/.changeset/hip-dragons-cough.md b/.changeset/hip-dragons-cough.md
new file mode 100644
index 000000000..c13879b14
--- /dev/null
+++ b/.changeset/hip-dragons-cough.md
@@ -0,0 +1,6 @@
+---
+'@cypress-design/constants-tag': minor
+---
+
+- Adding gray-dark tag variant
+- Updating all tag variants to support outline
diff --git a/components/Tag/ReadMe.md b/components/Tag/ReadMe.md
index dd2b021da..b7b47cb81 100644
--- a/components/Tag/ReadMe.md
+++ b/components/Tag/ReadMe.md
@@ -16,9 +16,19 @@ import Tag from '@cypress-design/vue-tag'
             {{color}}
           </Tag>
         </div>
+        <div class="flex items-center justify-center">
+          <Tag :size="size" :color="color" outline>
+            {{color}} outline
+          </Tag>
+        </div>
         <div class="flex items-center justify-center">
           <Tag :size="size" :color="color" dark>
-            {{color}}
+            {{color}} dark
+          </Tag>
+        </div>
+        <div class="flex items-center justify-center">
+          <Tag :size="size" :color="color" dark outline>
+            {{color}} dark outline
           </Tag>
         </div>
       </div>
diff --git a/components/Tag/constants/src/index.ts b/components/Tag/constants/src/index.ts
index 03d165a8f..915b2a49f 100644
--- a/components/Tag/constants/src/index.ts
+++ b/components/Tag/constants/src/index.ts
@@ -12,33 +12,55 @@ export const CssColor = {
   white: {
     default: 'bg-white text-gray-700 border-gray-100',
     dark: 'bg-gray-50 text-gray-700 border-gray-50',
+    'default-outline': 'bg-white text-gray-700 border-gray-200',
+    'dark-outline': 'bg-gray-50 text-gray-700 border-gray-100',
   },
   gray: {
-    default: 'bg-gray-50 text-gray-700 border-gray-100',
+    default: 'bg-gray-50 text-gray-700 border-gray-50',
     dark: 'bg-gray-700 text-white border-gray-700',
+    'default-outline': 'bg-gray-50 text-gray-700 border-gray-100',
+    'dark-outline': 'bg-gray-700 text-white border-gray-800',
+  },
+  'gray-dark': {
+    default: 'bg-gray-900 text-gray-300 border-gray-900',
+    dark: 'bg-gray-1100 text-gray-500 border-gray-1100',
+    'default-outline': 'bg-gray-900 text-gray-300 border-gray-800',
+    'dark-outline': 'bg-gray-1100 text-gray-500 border-gray-800',
   },
   jade: {
     default: 'bg-jade-100 text-jade-600 border-jade-100',
     dark: 'bg-jade-500 text-white border-jade-500',
+    'default-outline': 'bg-jade-100 text-jade-600 border-jade-200',
+    'dark-outline': 'bg-jade-500 text-white border-jade-600',
   },
   teal: {
     default: 'bg-teal-100 text-teal-600 border-teal-100',
     dark: 'bg-teal-500 text-white border-teal-500',
+    'default-outline': 'bg-teal-100 text-teal-600 border-teal-200',
+    'dark-outline': 'bg-teal-500 text-white border-teal-600',
   },
   indigo: {
     default: 'bg-indigo-100 text-indigo-600 border-indigo-100',
     dark: 'bg-indigo-500 text-white border-indigo-500',
+    'default-outline': 'bg-indigo-100 text-indigo-600 border-indigo-200',
+    'dark-outline': 'bg-indigo-500 text-white border-indigo-600',
   },
   purple: {
     default: 'bg-purple-100 text-purple-600 border-purple-100',
     dark: 'bg-purple-500 text-white border-purple-500',
+    'default-outline': 'bg-purple-100 text-purple-600 border-purple-200',
+    'dark-outline': 'bg-purple-500 text-white border-purple-600',
   },
   red: {
     default: 'bg-red-100 text-red-600 border-red-100',
     dark: 'bg-red-500 text-white border-red-500',
+    'default-outline': 'bg-red-100 text-red-600 border-red-200',
+    'dark-outline': 'bg-red-500 text-white border-red-600',
   },
   orange: {
     default: 'bg-orange-100 text-orange-600 border-orange-100',
     dark: 'bg-orange-500 text-white border-orange-500',
+    'default-outline': 'bg-orange-100 text-orange-600 border-orange-200',
+    'dark-outline': 'bg-orange-500 text-white border-orange-600',
   },
 } as const
diff --git a/components/Tag/react/Tag.tsx b/components/Tag/react/Tag.tsx
index 46b90de1c..dd9b72036 100644
--- a/components/Tag/react/Tag.tsx
+++ b/components/Tag/react/Tag.tsx
@@ -6,19 +6,27 @@ export interface TagProps {
   size: keyof typeof CssSize
   color: keyof typeof CssColor
   dark?: boolean
+  outline?: boolean
   children: React.ReactNode
   className?: string
 }
 
 export const Tag: React.FC<
   TagProps & Omit<React.HTMLProps<HTMLSpanElement>, 'size'>
-> = ({ className, children, size, color, dark, ...rest }) => {
+> = ({ className, children, size, color, dark, outline, ...rest }) => {
+  const colorKey = dark
+    ? outline
+      ? 'dark-outline'
+      : 'dark'
+    : outline
+      ? 'default-outline'
+      : 'default'
   return (
     <span
       {...rest}
       className={clsx(
         CssSize[size],
-        CssColor[color][dark ? 'dark' : 'default'],
+        CssColor[color][colorKey] || CssColor[color][dark ? 'dark' : 'default'],
         CssShared,
         className,
       )}
diff --git a/components/Tag/react/TagReact.cy.tsx b/components/Tag/react/TagReact.cy.tsx
index 33e33c485..ef16eb969 100644
--- a/components/Tag/react/TagReact.cy.tsx
+++ b/components/Tag/react/TagReact.cy.tsx
@@ -32,9 +32,25 @@ describe('Tag', () => {
                       <div
                         key={`${color}-2`}
                         className="flex items-center justify-center"
+                      >
+                        <Tag size={size} color={color} outline>
+                          {`{Tag outline}`}
+                        </Tag>
+                      </div>
+                      <div
+                        key={`${color}-3`}
+                        className="flex items-center justify-center"
                       >
                         <Tag size={size} color={color} dark>
-                          {`{Tag}`}
+                          {`{Tag dark}`}
+                        </Tag>
+                      </div>
+                      <div
+                        key={`${color}-4`}
+                        className="flex items-center justify-center"
+                      >
+                        <Tag size={size} color={color} dark outline>
+                          {`{Tag dark outline}`}
                         </Tag>
                       </div>
                     </React.Fragment>
diff --git a/components/Tag/vue/Tag.vue b/components/Tag/vue/Tag.vue
index d103568cd..0806f3329 100644
--- a/components/Tag/vue/Tag.vue
+++ b/components/Tag/vue/Tag.vue
@@ -2,7 +2,15 @@
   <span
     :class="[
       CssSize[size],
-      CssColor[color][dark ? 'dark' : 'default'],
+      CssColor[color][
+        (dark
+          ? outline
+            ? 'dark-outline'
+            : 'dark'
+          : outline
+            ? 'default-outline'
+            : 'default') as keyof (typeof CssColor)[typeof color]
+      ] || CssColor[color][dark ? 'dark' : 'default'],
       CssShared,
     ]"
   >
@@ -17,5 +25,6 @@ defineProps<{
   size: keyof typeof CssSize
   color: keyof typeof CssColor
   dark?: boolean
+  outline?: boolean
 }>()
 </script>
diff --git a/components/Tag/vue/TagVue.cy.tsx b/components/Tag/vue/TagVue.cy.tsx
index c4eaa383f..53e80c78c 100644
--- a/components/Tag/vue/TagVue.cy.tsx
+++ b/components/Tag/vue/TagVue.cy.tsx
@@ -22,9 +22,19 @@ describe('<Tag/>', () => {
                           {`{Tag}`}
                         </Tag>
                       </div>
+                      <div class="flex items-center justify-center">
+                        <Tag size={size} color={color} outline>
+                          {`{Tag outline}`}
+                        </Tag>
+                      </div>
                       <div class="flex items-center justify-center">
                         <Tag size={size} color={color} dark>
-                          {`{Tag}`}
+                          {`{Tag dark}`}
+                        </Tag>
+                      </div>
+                      <div class="flex items-center justify-center">
+                        <Tag size={size} color={color} dark outline>
+                          {`{Tag dark outline}`}
                         </Tag>
                       </div>
                     </>


Reviews:
user: login: ryanjwilke
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T14:22:10Z
user: login: emilmilanov
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T14:51:31Z
user: login: ryanjwilke
body: This seems fine for now. I don't have any major concerns on my end.
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-08T14:24:14Z

Review comments:
diff_hunk: @@ -17,6 +17,10 @@ export const CssColor = {
     default: 'bg-gray-50 text-gray-700 border-gray-100',
     dark: 'bg-gray-700 text-white border-gray-700',
   },
+  gray900: {
path: components/Tag/constants/src/index.ts
user: login: ryanjwilke
body: @emilmilanov I would recommend calling this one `gray-dark` maybe just to align closer to how we call our `Button` components.
created_at: 2025-05-05T14:22:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -17,6 +17,10 @@ export const CssColor = {
     default: 'bg-gray-50 text-gray-700 border-gray-100',
     dark: 'bg-gray-700 text-white border-gray-700',
   },
+  gray900: {
path: components/Tag/constants/src/index.ts
user: login: emilmilanov
body: I agree. 
created_at: 2025-05-05T14:51:31Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-05T13:46:39Z
body: ###  🦋  Changeset detected

Latest commit: 42841e2d96d9caec41046bee5350c3368cd5ea82

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

<details><summary>This PR includes changesets to release 1 package</summary>

  | Name                          | Type  |
| ----------------------------- | ----- |
| @cypress-design/constants-tag | Minor |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/cypress-io/cypress-design/new/tag-gray-900?filename=.changeset/fresh-steaks-smoke.md&value=---%0A%22%40cypress-design%2Freact-tag%22%3A%20patch%0A%22%40cypress-design%2Fvue-tag%22%3A%20patch%0A%22%40cypress-design%2Fconstants-tag%22%3A%20patch%0A---%0A%0AAdding%20tag%2C%20gray900%0A)


author_association: NONE
user: login: vercel[bot]
created_at: 2025-05-05T13:47:19Z
body: [vc]: #P7k5U9YpLu9BY3AhP6CFJ8Wl3HoepdGRuE959IT23fQ=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJjeXByZXNzLWRlc2lnbiIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9jeXByZXNzLWlvL2N5cHJlc3MtZGVzaWduL0dmRmp6a3dxZmdwSmpIZm1CWDZFQXNWQnplZ1EiLCJwcmV2aWV3VXJsIjoiY3lwcmVzcy1kZXNpZ24tZ2l0LXRhZy1ncmF5LTkwMC1jeXByZXNzLWlvLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJyb290RGlyZWN0b3J5IjpudWxsfV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **cypress-design** | ✅ Ready ([Inspect](https://vercel.com/cypress-io/cypress-design/GfFjzkwqfgpJjHfmBX6EAsVBzegQ)) | [Visit Preview](https://cypress-design-git-tag-gray-900-cypress-io.vercel.app) | May 8, 2025 2:29pm |


author_association: NONE
user: login: cypress[bot]
created_at: 2025-05-05T13:54:23Z
body: 
<h3>
  <a href="https://cloud.cypress.io/projects/89d3nq?utm_source=github&utm_medium=PASSED&utm_campaign=project">cypress-design</a>&nbsp;
  <img src="https://assets.cypress.io/github-pr-comment-icons/chevron.svg" alt="" height="14" width="14" />&nbsp;
  <a href="https://cloud.cypress.io/projects/89d3nq/runs/2856/overview?utm_source=github&utm_medium=PASSED&utm_campaign=run%20number">Run #2856</a>
</h3>

<details>
  <summary>
    <strong>Run Properties:</strong>&nbsp;
    <code><img src="https://assets.cypress.io/github-pr-comment-icons/passed.svg" alt="status check passed" height="10" width="10" />&nbsp;Passed&nbsp;<a href="https://cloud.cypress.io/projects/89d3nq/runs/2856/overview?utm_source=github&utm_medium=PASSED&utm_campaign=run%20number">#2856</a></code> &nbsp;&bull;&nbsp;
    <code><img src="https://assets.cypress.io/github-pr-comment-icons/git-commit.svg" alt="git commit" width="10" height="10" /> <a href="https://github.com/cypress-io/cypress-design/commit/4bb26e26293c71fb7b811358019be9e3371da053">4bb26e2629 <span style="cursor:help;" title="Your CI provider generated this commit by merging this branch into the target branch.">ℹ️</span></a>: Merge 42841e2d96d9caec41046bee5350c3368cd5ea82 into cdd0897e61cae57257ca4e49e732...</code>
  </summary><br />

  <table width="744">
    <tbody>
      <tr />
      <tr height="48">
        <td width="224">
          <strong>Project</strong>
        </td>
        <td width="520">
          <code><a href="https://cloud.cypress.io/projects/89d3nq?utm_source=github&utm_medium=PASSED&utm_campaign=project">cypress-design</a></code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td width="224">
          <strong>Branch Review</strong>
        </th>
        <td>
          <code><a href="https://cloud.cypress.io/projects/89d3nq/branches/tag-gray-900/review?utm_source=github&utm_medium=PASSED&utm_campaign=review%20changes&changeRequest=571">tag-gray-900</a></code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Run status</strong></td>
        <td>
          <code><img src="https://assets.cypress.io/github-pr-comment-icons/passed.svg" alt="status check passed" height="10" width="10" />&nbsp;Passed&nbsp;<a href="https://cloud.cypress.io/projects/89d3nq/runs/2856/overview?utm_source=github&utm_medium=PASSED&utm_campaign=run%20number">#2856</a></code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Run duration</strong></td>
        <td><code>05m 29s</code></td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Commit</strong></td>
        <td>
          <code><img src="https://assets.cypress.io/github-pr-comment-icons/git-commit.svg" alt="git commit" width="10" height="10" /> <a href="https://github.com/cypress-io/cypress-design/commit/4bb26e26293c71fb7b811358019be9e3371da053">4bb26e2629 <span style="cursor:help;" title="Your CI provider generated this commit by merging this branch into the target branch.">ℹ️</span></a>: Merge 42841e2d96d9caec41046bee5350c3368cd5ea82 into cdd0897e61cae57257ca4e49e732...</code>
        </td>
      </tr>
      <tr />
      <tr height="48">
        <td><strong>Committer</strong></td>
        <td><code>Emil Milanov</code></td>
      </tr>
    </tbody>
    <tfoot>
      <tr />
      <tr height="48">
        <td colspan="2">
          <a href="https://cloud.cypress.io/projects/89d3nq/runs/2856/properties?utm_source=github&utm_medium=PASSED&utm_campaign=properties">View all properties for this run ↗︎</a>
        </td>
      </tr>
    </tfoot>
  </table>
  <hr />
</details>

<table width="744">
  <thead>
    <tr />
    <tr height="48">
      <th colspan="2" align="left" width="744">Test results</th>
    </tr>
  </thead>
  <tbody>
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/failed.svg" alt="Tests that failed" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/89d3nq/runs/2856/overview?reviewViewBy=FAILED&utm_source=github&utm_medium=PASSED&utm_campaign=failed%20tests">
          <strong>Failures</strong>
        </a>
      </td>
      <td>
        <code><strong>0</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/flaky-v3.svg" alt="Tests that were flaky" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/89d3nq/runs/2856/overview?reviewViewBy=FLAKY&utm_source=github&utm_medium=PASSED&utm_campaign=flaky%20tests">
          <strong>Flaky</strong>
        </a>
      </td>
      <td>
        <code><strong>0</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/pending.svg" alt="Tests that did not run due to a developer annotating a test with .skip" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/89d3nq/runs/2856/test-results?utm_source=github&utm_medium=PASSED&utm_campaign=pending%20tests&statuses=%5B%7B%22value%22%3A%22PENDING%22%2C%22label%22%3A%22PENDING%22%7D%5D">
          <strong>Pending</strong>
        </a>
      </td>
      <td>
        <code><strong>0</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/skipped-v3.svg" alt="Tests that did not run due to a failure in a mocha hook" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/89d3nq/runs/2856/test-results?utm_source=github&utm_medium=PASSED&utm_campaign=skipped%20tests&statuses=%5B%7B%22value%22%3A%22SKIPPED%22%2C%22label%22%3A%22SKIPPED%22%7D%5D">
          <strong>Skipped</strong>
        </a>
      </td>
      <td>
        <code><strong>0</strong></code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/passed.svg" alt="Tests that passed" width="10" height="10" />&nbsp;
        <a href="https://cloud.cypress.io/projects/89d3nq/runs/2856/overview?utm_source=github&utm_medium=PASSED&utm_campaign=passed%20tests">
          <strong>Passing</strong>
        </a>
      </td>
      <td>
        <code><strong>236</strong></code>
      </td>
    </tr><tfoot>
    <tr height="48"><td colspan="2"><a href="https://cloud.cypress.io/projects/89d3nq/branches/tag-gray-900/review?utm_source=github&utm_medium=PASSED&utm_campaign=review%20changes&changeRequest=571">View all changes introduced in this branch ↗︎</a></td></tr></tfoot>
  </tbody>
</table>

<table width="744">
  <thead>
    <tr />
    <tr height="48">
      <th colspan="2" align="left" width="744">
        <a href="https://cloud.cypress.io/projects/89d3nq/runs/2856/ui-coverage?utm_source=github&utm_medium=PASSED&utm_campaign=view%20report">UI Coverage</a>
        &nbsp;<code><strong>7.65%</strong></code>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/failed.svg" alt="" height="10" width="10" />&nbsp;
        <strong>Untested elements</strong>
      </td>
      <td>
        <code><strong>298</strong></code>&nbsp;&nbsp;
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/passed.svg" alt="" height="10" width="10" />&nbsp;
        <strong>Tested elements</strong>
      </td>
      <td>
        <code><strong>26</strong></code>&nbsp;&nbsp;
      </td>
    </tr>
  </tbody>
</table>

<table width="744">
  <thead>
    <tr />
    <tr height="48">
      <th colspan="2" align="left" width="744">
        <a href="https://cloud.cypress.io/projects/89d3nq/runs/2856/accessibility?utm_source=github&utm_medium=PASSED&utm_campaign=view%20report">Accessibility</a>
        &nbsp;<code><strong>99.43%</strong></code>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/failed.svg" alt="" height="10" width="10" />&nbsp;
        <strong>Failed rules</strong>&nbsp;
      </td>
      <td>
        <code><strong>0</strong>&nbsp;critical</code> &nbsp;
        <code><strong>2</strong>&nbsp;serious</code> &nbsp;
        <code><strong>0</strong>&nbsp;moderate</code> &nbsp;
        <code><strong>1</strong>&nbsp;minor</code>
      </td>
    </tr>
    <tr />
    <tr height="48">
      <td width="224">
        <img src="https://assets.cypress.io/github-pr-comment-icons/failed.svg" alt="" height="10" width="10" />&nbsp;
        <strong>Failed elements</strong>
      </td>
      <td>
        <code><strong>23</strong></code>&nbsp;&nbsp;
      </td>
    </tr>
  </tbody>
</table>




author_association: NONE
user: login: emilmilanov
created_at: 2025-05-08T13:35:08Z
body: PR is ready for a review @ryanjwilke 

I updated all tag variants to support outline.

The only issue I see is that `white dark` and `gray light` variants look the same. This issue existed before and is consequence of the decision that each color variant has light and dark option.
author_association: CONTRIBUTOR