feat(core): expand Relative Color Syntax across components (#37)

* feat(core): expand Relative Color Syntax across components

* refactor(docs): reorder theme imports and improve button and theme styles

* fix(core): enhance button, card, and tooltip styles for RCS

* fix(core): adjust min-width for better responsiveness in tooltips

Author: auswm85

apps/docs/astro.config.mjs

@@ -1,9 +1,9 @@
 import mdx from '@astrojs/mdx';
 import { defineConfig } from 'astro/config';
 import critters from 'astro-critters';
-import shiftLight from './src/themes/shift-light.json' with { type: 'json' };
-import shiftDark from './src/themes/shift-dark.json' with { type: 'json' };
 import { oklchTransformer } from './src/lib/oklch-transformer';
+import shiftDark from './src/themes/shift-dark.json' with { type: 'json' };
+import shiftLight from './src/themes/shift-light.json' with { type: 'json' };
 
 export default defineConfig({
 	site: 'https://getshiftcss.com',

apps/docs/src/lib/oklch-transformer.ts

@@ -18,7 +18,7 @@ interface ShikiTransformer {
 
 // Convert sRGB to linear RGB (remove gamma correction)
 function srgbToLinear(c: number): number {
-	return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+	return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
 }
 
 // Convert linear RGB to XYZ (D65 illuminant)
@@ -86,13 +86,15 @@ function hexToOklch(hex: string): string {
 
 // Transform both light and dark color values in a style string
 function transformStyleColors(style: string): string {
-	return style.replace(
-		/color:\s*#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/g,
-		(_, hex) => `color:${hexToOklch('#' + expandHex(hex))}`
-	).replace(
-		/--shiki-dark:\s*#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/g,
-		(_, hex) => `--shiki-dark:${hexToOklch('#' + expandHex(hex))}`
-	);
+	return style
+		.replace(
+			/color:\s*#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/g,
+			(_, hex) => `color:${hexToOklch(`#${expandHex(hex)}`)}`
+		)
+		.replace(
+			/--shiki-dark:\s*#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/g,
+			(_, hex) => `--shiki-dark:${hexToOklch(`#${expandHex(hex)}`)}`
+		);
 }
 
 // Expand 3-digit hex to 6-digit
@@ -105,9 +107,8 @@ function expandHex(hex: string): string {
 
 // Transform all hex colors in a style string (for pre element)
 function transformAllHexColors(style: string): string {
-	return style.replace(
-		/#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/g,
-		(_, hex) => hexToOklch('#' + expandHex(hex))
+	return style.replace(/#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/g, (_, hex) =>
+		hexToOklch(`#${expandHex(hex)}`)
 	);
 }
 

apps/docs/src/pages/demo.astro

@@ -274,9 +274,9 @@ import DocsLayout from '../components/layout/DocsLayout.astro';
 		<h3>Dot Indicators</h3>
 		<p style="font-size: var(--s-text-sm); color: var(--s-text-secondary); margin-bottom: var(--s-space-2);">Size variants also apply to dots.</p>
 		<div class="demo-row">
-			<span s-badge="success" s-dot aria-label="Success status"></span>
-			<span s-badge="warning" s-dot aria-label="Warning status"></span>
-			<span s-badge="danger" s-dot aria-label="Danger status"></span>
+			<span s-badge="success" s-dot role="status" aria-label="Success status"></span>
+			<span s-badge="warning" s-dot role="status" aria-label="Warning status"></span>
+			<span s-badge="danger" s-dot role="status" aria-label="Danger status"></span>
 		</div>
 
 		<h3>In Context</h3>

apps/docs/src/styles/theme.css

@@ -127,90 +127,7 @@ select[s-input] {
   border-radius: var(--s-radius) !important;
 }
 
-/* Primary button - hollow with glow */
-[s-btn="primary"] {
-  background: var(--s-primary);
-  border: var(--s-border-width) solid var(--s-primary);
-  color: #fff;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-weight: 700;
-
-  &:hover {
-    background: var(--s-primary);
-    color: #fff;
-    box-shadow: var(--s-glow);
-  }
-}
-
-/* Secondary button - subtle */
-[s-btn="secondary"] {
-  background: transparent;
-  border: var(--s-border-width) solid var(--void-300);
-  color: var(--void-700);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-
-  &:hover {
-    border-color: var(--s-primary);
-    color: var(--s-primary);
-  }
-}
-
-/* Ghost button */
-[s-btn="ghost"] {
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-
-  &:hover {
-    background: var(--void-100);
-  }
-}
-
-/* Link button */
-[s-btn="link"] {
-  color: var(--s-primary);
-  text-decoration: underline;
-  text-decoration-color: transparent;
-  text-underline-offset: 0.2em;
-
-  &:hover {
-    color: oklch(40% 0.2 var(--shift-hue-primary));
-    text-decoration-color: currentColor;
-  }
-}
-
-/* Light mode: darken link buttons for contrast */
-[data-theme="light"] [s-btn="link"] {
-  color: oklch(35% 0.2 var(--shift-hue-primary));
-
-  &:hover {
-    color: oklch(25% 0.25 var(--shift-hue-primary));
-  }
-}
-
-/* Dark mode: explicit button text colors for a11y tools */
-[data-theme="dark"] [s-btn="primary"] {
-  color: #1a1a1a;
-}
-
-[data-theme="dark"] [s-btn="success"],
-[data-theme="dark"] [s-btn="warning"],
-[data-theme="dark"] [s-btn="danger"] {
-  color: #1a1a1a;
-}
-
-[data-theme="dark"] [s-btn="outline"] {
-  color: var(--s-primary);
-}
-
-[data-theme="dark"] [s-btn="secondary"] {
-  color: var(--void-900);
-}
-
-[data-theme="dark"] [s-btn="ghost"] {
-  color: var(--void-900);
-}
+/* Button styling now handled by core framework with RCS */
 
 /* Cards - sharp with subtle border */
 [s-card] {

apps/docs/src/themes/shift-dark.json

@@ -42,22 +42,14 @@
     },
     {
       "name": "Function",
-      "scope": [
-        "entity.name.function",
-        "support.function",
-        "meta.function-call"
-      ],
+      "scope": ["entity.name.function", "support.function", "meta.function-call"],
       "settings": {
         "foreground": "#c4b5fd"
       }
     },
     {
       "name": "Class",
-      "scope": [
-        "entity.name.class",
-        "entity.name.type.class",
-        "support.class"
-      ],
+      "scope": ["entity.name.class", "entity.name.type.class", "support.class"],
       "settings": {
         "foreground": "#fcd34d"
       }
@@ -71,11 +63,7 @@
     },
     {
       "name": "Property",
-      "scope": [
-        "variable.other.property",
-        "support.type.property-name",
-        "meta.object-literal.key"
-      ],
+      "scope": ["variable.other.property", "support.type.property-name", "meta.object-literal.key"],
       "settings": {
         "foreground": "#67e8f9"
       }
@@ -94,10 +82,7 @@
     },
     {
       "name": "CSS Value",
-      "scope": [
-        "support.constant.property-value.css",
-        "meta.property-value.css"
-      ],
+      "scope": ["support.constant.property-value.css", "meta.property-value.css"],
       "settings": {
         "foreground": "#6ee7b7"
       }
@@ -118,10 +103,7 @@
     },
     {
       "name": "Attribute Value",
-      "scope": [
-        "string.quoted.double.html",
-        "string.quoted.single.html"
-      ],
+      "scope": ["string.quoted.double.html", "string.quoted.single.html"],
       "settings": {
         "foreground": "#6ee7b7"
       }
@@ -135,22 +117,14 @@
     },
     {
       "name": "Punctuation",
-      "scope": [
-        "punctuation",
-        "meta.brace",
-        "punctuation.definition.string"
-      ],
+      "scope": ["punctuation", "meta.brace", "punctuation.definition.string"],
       "settings": {
         "foreground": "#a3a3a3"
       }
     },
     {
       "name": "Type",
-      "scope": [
-        "entity.name.type",
-        "support.type",
-        "support.type.primitive"
-      ],
+      "scope": ["entity.name.type", "support.type", "support.type.primitive"],
       "settings": {
         "foreground": "#67e8f9"
       }

apps/docs/src/themes/shift-light.json

@@ -42,22 +42,14 @@
     },
     {
       "name": "Function",
-      "scope": [
-        "entity.name.function",
-        "support.function",
-        "meta.function-call"
-      ],
+      "scope": ["entity.name.function", "support.function", "meta.function-call"],
       "settings": {
         "foreground": "#7c3aed"
       }
     },
     {
       "name": "Class",
-      "scope": [
-        "entity.name.class",
-        "entity.name.type.class",
-        "support.class"
-      ],
+      "scope": ["entity.name.class", "entity.name.type.class", "support.class"],
       "settings": {
         "foreground": "#b45309"
       }
@@ -71,11 +63,7 @@
     },
     {
       "name": "Property",
-      "scope": [
-        "variable.other.property",
-        "support.type.property-name",
-        "meta.object-literal.key"
-      ],
+      "scope": ["variable.other.property", "support.type.property-name", "meta.object-literal.key"],
       "settings": {
         "foreground": "#0891b2"
       }
@@ -94,10 +82,7 @@
     },
     {
       "name": "CSS Value",
-      "scope": [
-        "support.constant.property-value.css",
-        "meta.property-value.css"
-      ],
+      "scope": ["support.constant.property-value.css", "meta.property-value.css"],
       "settings": {
         "foreground": "#047857"
       }
@@ -118,10 +103,7 @@
     },
     {
       "name": "Attribute Value",
-      "scope": [
-        "string.quoted.double.html",
-        "string.quoted.single.html"
-      ],
+      "scope": ["string.quoted.double.html", "string.quoted.single.html"],
       "settings": {
         "foreground": "#047857"
       }
@@ -135,22 +117,14 @@
     },
     {
       "name": "Punctuation",
-      "scope": [
-        "punctuation",
-        "meta.brace",
-        "punctuation.definition.string"
-      ],
+      "scope": ["punctuation", "meta.brace", "punctuation.definition.string"],
       "settings": {
         "foreground": "#525252"
       }
     },
     {
       "name": "Type",
-      "scope": [
-        "entity.name.type",
-        "support.type",
-        "support.type.primitive"
-      ],
+      "scope": ["entity.name.type", "support.type", "support.type.primitive"],
       "settings": {
         "foreground": "#0891b2"
       }