chore(global.css): flip pascalCase naming to kebab-case

Author: TylerAPfledderer

src/styles/global.css

@@ -55,8 +55,8 @@
 
     /* Semantic Colors: Light mode */
     --primary: var(--blue-500);
-    --primary-highContrast: var(--blue-800);
-    --primary-lowContrast: var(--blue-100);
+    --primary-high-contrast: var(--blue-800);
+    --primary-low-contrast: var(--blue-100);
     --primary-hover: var(--blue-400);
     --primary-visited: var(--blue-700);
     /* ! Deprecating primary-light */
@@ -81,9 +81,9 @@
     --neutral: white;
 
     /* Misc sematics: light mode */
-    --tooltipShadow: rgba(0, 0, 0, 0.24);
-    --switchBackground: var(--gray-300);
-    --hubHeroContentBg: rgba(255, 255, 255, 0.8);
+    --tooltip-shadow: rgba(0, 0, 0, 0.24);
+    --switch-background: var(--gray-300);
+    --hub-hero-content-bg: rgba(255, 255, 255, 0.8);
     --bg-main-gradient: linear-gradient(
       102.7deg,
       rgba(185, 185, 241, 0.2) 0%,
@@ -98,8 +98,8 @@
   [data-theme="dark"] {
     /* Semantic Colors: Dark mode */
     --primary: var(--orange-500);
-    --primary-highContrast: var(--orange-100);
-    --primary-lowContrast: var(--orange-800);
+    --primary-high-contrast: var(--orange-100);
+    --primary-low-contrast: var(--orange-800);
     --primary-hover: var(--orange-400);
     --primary-visited: var(--orange-550);
     /* ! Deprecating primary-light */
@@ -124,9 +124,9 @@
     --neutral: var(--gray-900);
 
     /* Misc sematics: light mode */
-    --tooltipShadow: rgba(255, 255, 255, 0.24);
-    --switchBackground: rgba(255, 255, 255, 0.24);
-    --hubHeroContentBg: rgba(34, 34, 34, 0.8);
+    --tooltip-shadow: rgba(255, 255, 255, 0.24);
+    --switch-background: rgba(255, 255, 255, 0.24);
+    --hub-hero-content-bg: rgba(34, 34, 34, 0.8);
     --bg-main-gradient: linear-gradient(
       102.7deg,
       rgba(185, 185, 241, 0.2) 0%,
@@ -217,7 +217,7 @@
 
 @layer components {
   .accordion-trigger {
-    @apply flex flex-1 items-center justify-between gap-2 px-2 py-2 font-medium transition-all hover:bg-background-highlight hover:text-primary-hover focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]>svg]:-rotate-90 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-highContrast;
+    @apply flex flex-1 items-center justify-between gap-2 px-2 py-2 font-medium transition-all hover:bg-background-highlight hover:text-primary-hover focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]>svg]:-rotate-90 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast;
   }
   .accordion-content {
     @apply overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down;

tailwind.config.ts

@@ -28,8 +28,8 @@ const config = {
       colors: {
         primary: {
           DEFAULT: "var(--primary)",
-          highContrast: "var(--primary-highContrast)",
-          lowContrast: "var(--primary-lowContrast)",
+          "high-contrast": "var(--primary-high-contrast)",
+          "low-contrast": "var(--primary-low-contrast)",
           hover: "var(--primary-hover)",
           visited: "var(--primary-visited)",
           light: "var(--primary-light)",
@@ -48,30 +48,30 @@ const config = {
         },
         disabled: "var(--disabled)",
         neutral: "var(--neutral)",
-        tooltipShadow: "var(--tooltipShadow)",
-        switchBackground: "var(--switchBackground)",
-        hubHeroContentBg: "var(--hubHeroContentBg)",
+        "tooltip-shadow": "var(--tooltip-shadow)",
+        "switch-background": "var(--switch-background)",
+        "hub-hero-content-bg": "var(--hub-hero-content-bg)",
       },
       backgroundImage: {
-        bgMainGradient: "var(--bg-main-gradient)",
+        "bg-main-gradient": "var(--bg-main-gradient)",
       },
       boxShadow: {
-        tableBox: "var(--table-box-shadow)",
+        "table-box": "var(--table-box-shadow)",
         table:
           "0 14px 66px rgba(0,0,0,.07), 0 10px 17px rgba(0,0,0,.03), 0 4px 7px rgba(0,0,0,.05)",
         drop: "0 4px 17px 0 rgba(0,0,0,0.08)",
-        tableBoxHover: "0px 8px 17px rgba(0, 0, 0, 0.15)",
-        tableItemBox: "var(--table-item-box-shadow)",
-        tableItemBoxHover: "0 0 1px var(--primary)",
-        gridYellowBoxShadow: "8px 8px 0px 0px #ffe78e",
-        gridBlueBowShadow: "8px 8px 0px 0px #a7d0f4",
+        "table-box-hover": "0px 8px 17px rgba(0, 0, 0, 0.15)",
+        "table-item-box": "var(--table-item-box-shadow)",
+        "table-item-box-hover": "0 0 1px var(--primary)",
+        "grid-yellow-box-shadow": "8px 8px 0px 0px #ffe78e",
+        "gird-blue-box-shadow": "8px 8px 0px 0px #a7d0f4",
         // Part of new DS
         "menu-accordion":
           "0px 2px 2px 0px rgba(0, 0, 0, 0.12) inset, 0px -3px 2px 0px rgba(0, 0, 0, 0.14) inset",
-        // TODO: From current theme. Deprecate for 'buttonHover'
+        // TODO: From current theme. Deprecate for 'button-hover'
         primary: "4px 4px 0px 0px var(--primary)",
-        buttonHover: "4px 4px 0 0 var(--primary-lowContrast)",
-        tooltip: "0 0 16px var(--tooltipShadow)",
+        "button-hover": "4px 4px 0 0 var(--primary-low-contrast)",
+        tooltip: "0 0 16px var(--tooltip-shadow)",
       },
       spacing: {
         7.5: "1.875rem",