refactor: use tailwind components for core css classes in components

.changeset/major-update.md

@@ -0,0 +1,48 @@
+---
+'@cypress-design/component-tailwind-plugins': major
+'@cypress-design/constants-docmenu': major
+'@cypress-design/react-docmenu': major
+'@cypress-design/vue-docmenu': major
+'@cypress-design/css': major
+'@cypress-design/constants-accordion': major
+'@cypress-design/react-accordion': major
+'@cypress-design/vue-accordion': major
+'@cypress-design/constants-alert': major
+'@cypress-design/react-alert': major
+'@cypress-design/vue-alert': major
+'@cypress-design/constants-button': major
+'@cypress-design/react-button': major
+'@cypress-design/vue-button': major
+'@cypress-design/constants-checkbox': major
+'@cypress-design/react-checkbox': major
+'@cypress-design/vue-checkbox': major
+'@cypress-design/react-icon': major
+'@cypress-design/vue-icon': major
+'@cypress-design/react-logo': major
+'@cypress-design/vue-logo': major
+'@cypress-design/constants-menu': major
+'@cypress-design/react-menu': major
+'@cypress-design/vue-menu': major
+'@cypress-design/constants-modal': major
+'@cypress-design/react-modal': major
+'@cypress-design/vue-modal': major
+'@cypress-design/constants-spinner': major
+'@cypress-design/react-spinner': major
+'@cypress-design/vue-spinner': major
+'@cypress-design/constants-statusicon': major
+'@cypress-design/react-statusicon': major
+'@cypress-design/vue-statusicon': major
+'@cypress-design/constants-tabs': major
+'@cypress-design/react-tabs': major
+'@cypress-design/vue-tabs': major
+'@cypress-design/constants-tag': major
+'@cypress-design/react-tag': major
+'@cypress-design/vue-tag': major
+'@cypress-design/constants-testresult': major
+'@cypress-design/react-testresult': major
+'@cypress-design/vue-testresult': major
+'@cypress-design/react-tooltip': major
+'@cypress-design/vue-tooltip': major
+---
+
+refactor: use tailwind components to manage specificity of styles

components/Accordion/react/package.json

@@ -20,12 +20,12 @@
     "build:types": "tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
+    "@cypress-design/constants-accordion": "*",
     "@cypress-design/details-animation": "*",
     "@cypress-design/react-icon": "*",
     "clsx": "*"
   },
   "devDependencies": {
-    "@cypress-design/constants-accordion": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
   },
   "license": "MIT"

components/Accordion/vue/package.json

@@ -21,11 +21,11 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@cypress-design/constants-accordion": "*",
     "@cypress-design/details-animation": "*",
     "@cypress-design/vue-icon": "*"
   },
   "devDependencies": {
-    "@cypress-design/constants-accordion": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
   }
 }

components/Alert/react/package.json

@@ -20,12 +20,12 @@
     "build:types": "tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
+    "@cypress-design/constants-alert": "*",
     "@cypress-design/details-animation": "*",
     "@cypress-design/react-icon": "*",
     "clsx": "*"
   },
   "devDependencies": {
-    "@cypress-design/constants-alert": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*",
     "postcss": "^8.4.38",
     "rollup-plugin-postcss": "^4.0.2",

components/Alert/vue/package.json

@@ -24,11 +24,11 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
+    "@cypress-design/constants-alert": "*",
     "@cypress-design/details-animation": "*",
     "@cypress-design/vue-icon": "*"
   },
   "devDependencies": {
-    "@cypress-design/constants-alert": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
   },
   "license": "MIT"

components/Button/react/package.json

@@ -20,10 +20,10 @@
     "build:types": "tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
+    "@cypress-design/constants-button": "*",
     "clsx": "*"
   },
   "devDependencies": {
-    "@cypress-design/constants-button": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
   },
   "license": "MIT"

components/Button/vue/package.json

@@ -19,8 +19,10 @@
     "build:module": "yarn vite build",
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
+  "dependencies": {
+    "@cypress-design/constants-button": "*"
+  },
   "devDependencies": {
-    "@cypress-design/constants-button": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
   },
   "license": "MIT"

components/Checkbox/react/package.json

@@ -20,11 +20,11 @@
     "build:types": "tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
+    "@cypress-design/constants-checkbox": "*",
     "@cypress-design/react-icon": "*",
     "clsx": "*"
   },
   "devDependencies": {
-    "@cypress-design/constants-checkbox": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
   },
   "license": "MIT"

components/Checkbox/vue/package.json

@@ -20,10 +20,10 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
+    "@cypress-design/constants-checkbox": "*",
     "@cypress-design/vue-icon": "*"
   },
   "devDependencies": {
-    "@cypress-design/constants-checkbox": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
   },
   "license": "MIT"

components/DocMenu/assertions.ts

@@ -1,6 +1,11 @@
 /// <reference types="cypress" />
 
 import type { NavGroup, NavItemLink } from './constants'
+import { colors } from '@cypress-design/css/dist/colors'
+import hexRgb from 'hex-rgb'
+
+const { red, green, blue } = hexRgb(colors.indigo[500])
+const indigoToCompare = `rgb(${red}, ${green}, ${blue})`
 
 const menuItems = [
   {
@@ -119,17 +124,16 @@ export default function assertions(
   it('expands a section where an element is activated', () => {
     mountCustomLinkStory()
     cy.findByText('Foo', { selector: 'button' }).should(
-      'have.class',
-      'text-indigo-500',
+      'have.css',
+      'color',
+      indigoToCompare,
     )
 
     cy.findByText('Set path to /kephren', { selector: 'button' }).click()
 
     cy.findByText('Kephren', { selector: 'button' })
       .should('be.visible')
-      .should('have.class', 'text-indigo-500')
-
-    cy.findByTestId('doc-menu-active-marker').should('have.css', 'top', '220px')
+      .should('have.css', 'color', indigoToCompare)
   })
 }
 

components/DocMenu/constants/src/index.ts

@@ -22,3 +22,14 @@ export const CssClasses = {
   openListBorderLeft:
     'absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900',
 } as const
+
+export const CssLink = {
+  wrapper: 'list-none p-0 scroll-my-10',
+  static: 'group relative block w-full pl-[24px]',
+  active: 'text-indigo-500 dark:text-indigo-400',
+  inactive: 'text-gray-700 dark:text-gray-500',
+  negativeDepth: 'py-[8px] text-[16px] leading-[24px]',
+  positiveDepth: 'leading-[20px] text-[14px] py-[12px]',
+  markerStatic:
+    'left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full',
+} as const

components/DocMenu/react/_DocLink.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import clsx from 'clsx'
-import { NavItemLink } from '@cypress-design/constants-docmenu'
+import { type NavItemLink, CssLink } from '@cypress-design/constants-docmenu'
 
 export interface Context {
   setMarkerIsMoving: (markerIsMoving: boolean) => void
@@ -86,30 +86,26 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
     }))
 
     return (
-      <li ref={activeLIRef} className="list-none p-0 scroll-my-10">
+      <li ref={activeLIRef} className={CssLink.wrapper}>
         <LinkComponent
           {...itemRest}
-          className={clsx('group relative block w-full pl-[24px]', {
-            'text-indigo-500 dark:text-indigo-400': active,
-            'text-gray-700 dark:text-gray-500': !active,
-            'py-[8px] text-[16px] leading-[24px]': depth < 0,
-            'leading-[20px] text-[14px] py-[12px]': depth >= 0,
+          className={clsx(CssLink.static, {
+            [CssLink.active]: active,
+            [CssLink.inactive]: !active,
+            [CssLink.negativeDepth]: depth < 0,
+            [CssLink.positiveDepth]: depth >= 0,
           })}
           style={{
             paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,
           }}
         >
           {depth >= 0 ? (
             <div
-              className={clsx(
-                'left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full',
-                {
-                  hidden: !markerIsMoving || !active,
-                  'group-hover:block bg-gray-300':
-                    !active && context.collapsible,
-                  'bg-indigo-500 dark:bg-indigo-400': active && markerIsMoving,
-                },
-              )}
+              className={clsx(CssLink.markerStatic, {
+                hidden: !markerIsMoving || !active,
+                'group-hover:block bg-gray-300': !active && context.collapsible,
+                'bg-indigo-500 dark:bg-indigo-400': active && markerIsMoving,
+              })}
             />
           ) : null}
           {item.label}

components/DocMenu/react/package.json

@@ -20,11 +20,11 @@
     "build:types": "tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
+    "@cypress-design/constants-docmenu": "*",
     "@cypress-design/react-icon": "*",
     "clsx": "*"
   },
   "devDependencies": {
-    "@cypress-design/constants-docmenu": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
   },
   "license": "MIT"

components/DocMenu/vue/_DocLink.vue

@@ -8,7 +8,7 @@ import {
   nextTick,
   computed,
 } from 'vue'
-import type { NavItemLink } from '@cypress-design/constants-docmenu'
+import { type NavItemLink, CssLink } from '@cypress-design/constants-docmenu'
 
 const props = withDefaults(
   defineProps<{
@@ -102,29 +102,33 @@ const itemWithoutLabel = computed(() => {
 </script>
 
 <template>
-  <li ref="$container" class="list-none p-0 scroll-my-10">
+  <li ref="$container" :class="CssLink.wrapper">
     <component
       :is="linkComponent"
       v-bind="itemWithoutLabel"
-      class="group relative block w-full pl-[24px]"
-      :class="{
-        'text-indigo-500 dark:text-indigo-400': active,
-        'text-gray-700 dark:text-gray-500': !active,
-        'py-[8px] text-[16px] leading-[24px]': depth < 0,
-        'leading-[20px] text-[14px] py-[12px]': depth >= 0,
-      }"
+      :class="[
+        CssLink.static,
+        {
+          [CssLink.active]: active,
+          [CssLink.inactive]: !active,
+          [CssLink.negativeDepth]: depth < 0,
+          [CssLink.positiveDepth]: depth >= 0,
+        },
+      ]"
       :style="{
         paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,
       }"
     >
       <div
         v-if="depth >= 0"
-        class="left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full"
-        :class="{
-          hidden: !markerIsMoving || !active,
-          'group-hover:block bg-gray-300': !active && collapsible,
-          'bg-indigo-500': active && markerIsMoving,
-        }"
+        :class="[
+          CssLink.markerStatic,
+          {
+            hidden: !markerIsMoving || !active,
+            'group-hover:block bg-gray-300': !active && collapsible,
+            'bg-indigo-500': active && markerIsMoving,
+          },
+        ]"
       />
       {{ item.label }}
     </component>

components/DocMenu/vue/package.json

@@ -20,10 +20,10 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
+    "@cypress-design/constants-docmenu": "*",
     "@cypress-design/vue-icon": "*"
   },
   "devDependencies": {
-    "@cypress-design/constants-docmenu": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
   },
   "license": "MIT"

components/Menu/react/package.json

@@ -19,10 +19,10 @@
     "build:types": "tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
+    "@cypress-design/constants-menu": "*",
     "clsx": "*"
   },
   "devDependencies": {
-    "@cypress-design/constants-menu": "*",
     "@cypress-design/react-icon": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*"
   },

components/Menu/vue/package.json

@@ -19,8 +19,10 @@
     "build:module": "yarn vite build",
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
+  "dependencies": {
+    "@cypress-design/constants-menu": "*"
+  },
   "devDependencies": {
-    "@cypress-design/constants-menu": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*",
     "@cypress-design/vue-icon": "*"
   },

components/Modal/react/package.json

@@ -19,11 +19,11 @@
     "build:types": "tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
+    "@cypress-design/constants-modal": "*",
     "@cypress-design/react-icon": "*",
     "clsx": "*"
   },
   "devDependencies": {
-    "@cypress-design/constants-modal": "*",
     "@cypress-design/css": "*"
   },
   "license": "MIT"

components/Modal/vue/package.json

@@ -19,8 +19,10 @@
     "build:module": "yarn vite build",
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
+  "dependencies": {
+    "@cypress-design/constants-modal": "*"
+  },
   "devDependencies": {
-    "@cypress-design/constants-modal": "*",
     "@cypress-design/vue-icon": "*"
   },
   "license": "MIT"

components/Spinner/react/package.json

@@ -19,8 +19,10 @@
     "build:module": "rollup -c ./rollup.config.mjs",
     "build:types": "tsc --project ./tsconfig.build.json"
   },
+  "dependencies": {
+    "@cypress-design/constants-spinner": "*"
+  },
   "devDependencies": {
-    "@cypress-design/constants-spinner": "*",
     "@cypress-design/rollup-plugin-tailwind-keep": "*",
     "postcss": "^8.4.38",
     "rollup-plugin-postcss": "^4.0.2",