fixes native button text turning black

kaeizen · kaeizen · commit b3b1f277e7de · 2025-03-31T11:58:55.000+08:00
diff --git a/src/styles/block-design-system-blocks.scss b/src/styles/block-design-system-blocks.scss
@@ -18,7 +18,7 @@
 	color: var(--stk-heading-color);
 }
 
-.stk-block a {
+:is(.stk-block-text__text, .stk-block-heading__text, .is-style-link) > a {
 	color: var(--stk-link-color);
 	&:hover {
 		color: var(--stk-link-color-hover);
diff --git a/src/styles/editor-block-design-system.scss b/src/styles/editor-block-design-system.scss
@@ -14,11 +14,11 @@ div.stk-block > :is(h1,h2,h3,h4,h5,h6) {
 	#{ '--stk-accent-color' }: cssvar(accent-color-parent-hover);
 }
 
-.stk--is-hovered > .stk-hover-parent .stk-block a,
-.stk-preview-state--parent-hover .is-selected > .stk-block a {
+.stk--is-hovered > .stk-hover-parent :is(.stk-block-text__text, .stk-block-heading__text, .is-style-link) > a,
+.stk-preview-state--parent-hover .is-selected > :is(.stk-block-text__text, .stk-block-heading__text, .is-style-link) > a {
 	color: var(--stk-link-color-parent-hover);
 }
-.stk-preview-state--hover .is-selected > .stk-block a {
+.stk-preview-state--hover .is-selected > :is(.stk-block-text__text, .stk-block-heading__text, .is-style-link) > a {
 	color: var(--stk-link-color-hover);
 }
 
diff --git a/src/styles/editor-compat.scss b/src/styles/editor-compat.scss
@@ -46,8 +46,4 @@
 		margin-left: auto;
 		margin-right: auto;
 	}
-
-	.stk-block a {
-		color: var(--stk-link-color);
-	}
 }

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`color: var(--stk-heading-color);`
`19`	`19`	`}`
`20`	`20`
`21`		`-.stk-block a {`
	`21`	`+:is(.stk-block-text__text, .stk-block-heading__text, .is-style-link) > a {`
`22`	`22`	`color: var(--stk-link-color);`
`23`	`23`	`&:hover {`
`24`	`24`	`color: var(--stk-link-color-hover);`
Original file line number	Diff line number	Diff line change
`@@ -14,11 +14,11 @@ div.stk-block > :is(h1,h2,h3,h4,h5,h6) {`
`14`	`14`	`#{ '--stk-accent-color' }: cssvar(accent-color-parent-hover);`
`15`	`15`	`}`
`16`	`16`
`17`		`-.stk--is-hovered > .stk-hover-parent .stk-block a,`
`18`		`-.stk-preview-state--parent-hover .is-selected > .stk-block a {`
	`17`	`+.stk--is-hovered > .stk-hover-parent :is(.stk-block-text__text, .stk-block-heading__text, .is-style-link) > a,`
	`18`	`+.stk-preview-state--parent-hover .is-selected > :is(.stk-block-text__text, .stk-block-heading__text, .is-style-link) > a {`
`19`	`19`	`color: var(--stk-link-color-parent-hover);`
`20`	`20`	`}`
`21`		`-.stk-preview-state--hover .is-selected > .stk-block a {`
	`21`	`+.stk-preview-state--hover .is-selected > :is(.stk-block-text__text, .stk-block-heading__text, .is-style-link) > a {`
`22`	`22`	`color: var(--stk-link-color-hover);`
`23`	`23`	`}`
`24`	`24`