Merge ee0e4ea into e1df3cc

fremtind · Jan 3, 2025 · f7d98ce · f7d98ce
2 parents e1df3cc + ee0e4ea
commit f7d98ce
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 24 deletions.
diff --git a/packages/icon-button/icon-button.scss b/packages/icon-button/icon-button.scss
@@ -15,7 +15,6 @@
     .jkl-icon {
         display: flex;
         align-items: center;
-        @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
 
         &--animated {
             display: revert;
@@ -26,17 +25,14 @@
         color: var(--jkl-color);
 
         @include jkl.focus-outline;
-        @include jkl.forced-colors-mode {
-            border: revert;
-        }
     }
 
     &:hover {
         color: var(--jkl-color-text-interactive-hover);
     }
 
     @include jkl.forced-colors-mode {
-        border: revert;
-        background-color: revert;
+        border: none;
+        background: none;
     }
 }
diff --git a/packages/jokul/src/components/icon-button/styles/icon-button.scss b/packages/jokul/src/components/icon-button/styles/icon-button.scss
@@ -15,7 +15,6 @@
     .jkl-icon {
         display: flex;
         align-items: center;
-        @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
 
         &--animated {
             display: revert;
@@ -26,17 +25,14 @@
         color: var(--jkl-color);
 
         @include jkl.focus-outline;
-        @include jkl.forced-colors-mode {
-            border: revert;
-        }
     }
 
     &:hover {
         color: var(--jkl-color-text-interactive-hover);
     }
 
     @include jkl.forced-colors-mode {
-        border: revert;
-        background-color: revert;
+        border: none;
+        background: none;
     }
 }
diff --git a/packages/jokul/src/components/text-input/styles/text-input.scss b/packages/jokul/src/components/text-input/styles/text-input.scss
@@ -105,6 +105,15 @@ $_text-input-selection-color--inverted: color.scale(
     @include jkl.reset-outline;
     @include jkl.remove-inner-outer-button;
 
+    @include jkl.forced-colors-mode {
+        outline: none;
+        border: none;
+
+        &:focus-visible {
+            outline: none;
+        }
+    }
+
     // Placeholder text style
     &::placeholder {
         opacity: 1;
@@ -184,6 +193,10 @@ $_text-input-selection-color--inverted: color.scale(
         box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color),
             0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color);
         border-color: var(--jkl-text-input-focus-color);
+
+        @include jkl.forced-colors-mode {
+            border: jkl.rem(2px) solid ButtonText;
+        }
     }
 
     &:has(:active) {
@@ -196,6 +209,10 @@ $_text-input-selection-color--inverted: color.scale(
     }
 
     > .jkl-icon-button:focus-visible {
+        @include jkl.forced-colors-mode {
+            --jkl-color-border-action: ButtonText;
+        }
+
         @include jkl.focus-outline($offset: -8px);
     }
 
@@ -226,13 +243,10 @@ $_text-input-selection-color--inverted: color.scale(
                 border: jkl.rem(2px) inset ButtonText;
             }
         }
+    }
 
-        @include jkl.forced-colors-mode {
-            border: revert;
-            background-color: revert;
-        }
-
-        @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+    @include jkl.forced-colors-mode {
+        border: jkl.rem(2px) inset ButtonText;
     }
 }
 

diff --git a/packages/text-input/text-input.scss b/packages/text-input/text-input.scss
@@ -107,6 +107,15 @@ $_text-input-selection-color--inverted: color.scale(
     @include jkl.reset-outline;
     @include jkl.remove-inner-outer-button;
 
+    @include jkl.forced-colors-mode {
+        outline: none;
+        border: none;
+
+        &:focus-visible {
+            outline: none;
+        }
+    }
+
     // Placeholder text style
     &::placeholder {
         opacity: 1;
@@ -186,6 +195,10 @@ $_text-input-selection-color--inverted: color.scale(
         box-shadow: inset 0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color),
             0 0 0 jkl.rem(1px) var(--jkl-text-input-focus-color);
         border-color: var(--jkl-text-input-focus-color);
+
+        @include jkl.forced-colors-mode {
+            border: jkl.rem(2px) solid ButtonText;
+        }
     }
 
     &:has(:active) {
@@ -198,6 +211,10 @@ $_text-input-selection-color--inverted: color.scale(
     }
 
     > .jkl-icon-button:focus-visible {
+        @include jkl.forced-colors-mode {
+            --jkl-color-border-action: ButtonText;
+        }
+
         @include jkl.focus-outline($offset: -8px);
     }
 
@@ -228,13 +245,10 @@ $_text-input-selection-color--inverted: color.scale(
                 border: jkl.rem(2px) inset ButtonText;
             }
         }
+    }
 
-        @include jkl.forced-colors-mode {
-            border: revert;
-            background-color: revert;
-        }
-
-        @include jkl.forced-colors-svg-fallback($stroke: ButtonText);
+    @include jkl.forced-colors-mode {
+        border: jkl.rem(2px) inset ButtonText;
     }
 }