diff --git a/src/theme/focus.ts b/src/theme/focus.ts
index 3dbca41f..ecaac166 100644
--- a/src/theme/focus.ts
+++ b/src/theme/focus.ts
@@ -16,10 +16,12 @@ export const getFocusPartials = ({ mode }: { mode: ColorMode }) => {
       boxShadow: boxShadows.focused,
     },
     outline: {
-      outline: `${borderWidths.focus}px solid ${semanticColorCssVars['border-outline-focused']}`,
+      '--outlineC': semanticColorCssVars['border-outline-focused'],
+      outline: `${borderWidths.focus}px solid var(--outlineC)`,
     },
     button: {
-      outline: `1px solid ${semanticColorCssVars['border-outline-focused']}`,
+      '--outlineC': semanticColorCssVars['border-outline-focused'],
+      outline: `1px solid var(--outlineC)}`,
       outlineOffset: '-1px',
     },
     insetAbsolute: {
diff --git a/src/theme/text.ts b/src/theme/text.ts
index 93692fcb..d0557957 100644
--- a/src/theme/text.ts
+++ b/src/theme/text.ts
@@ -156,15 +156,17 @@ const textPartials = {
     textOverflow: 'ellipsis',
   },
   inlineLink: {
-    color: semanticColorCssVars['action-link-inline'],
+    '--inlineLinkC': semanticColorCssVars['action-link-inline'],
+    color: `var(--inlineLinkC)`,
     textDecoration: 'underline',
     '&:hover': {
-      color: semanticColorCssVars['action-link-inline-hover'],
+      '--inlineLinkC': semanticColorCssVars['action-link-inline-hover'],
     },
     '&:visited, &:active': {
-      color: semanticColorCssVars['action-link-inline-visited'],
+      '--inlineLinkC': semanticColorCssVars['action-link-inline-visited'],
       '&:hover': {
-        color: semanticColorCssVars['action-link-inline-visited-hover'],
+        '--inlineLinkC':
+          semanticColorCssVars['action-link-inline-visited-hover'],
       },
     },
   },