Implement styling improvements for forced-colors mode

springload · Jul 12, 2022 · 33a0c44 · 33a0c44
1 parent 94096b3
commit 33a0c44
Show file tree

Hide file tree

Showing 14 changed files with 93 additions and 12 deletions.
diff --git a/examples/blocks/MediaBlock.scss b/examples/blocks/MediaBlock.scss
@@ -3,7 +3,7 @@
   position: relative;
   padding: 0;
   cursor: pointer;
-  outline: $draftail-contrast-border;
+  outline: $draftail-contrast-outline;
 
   // stylelint-disable
   &:focus {

diff --git a/examples/components/Modal.scss b/examples/components/Modal.scss
@@ -25,6 +25,7 @@ $spacing-modal: 0.5rem;
   z-index: $modal-z-index;
   background-color: $color-bg-modal;
   animation: modal-in 0.2s $easing-circ 0s backwards;
+  outline: $draftail-contrast-outline-modal;
 
   &[dir="rtl"],
   [dir="rtl"] & {

diff --git a/examples/entities/TooltipEntity.scss b/examples/entities/TooltipEntity.scss
@@ -1,15 +1,27 @@
 .TooltipEntity {
   cursor: pointer;
 
+  @media (forced-colors: active) {
+    color: LinkText;
+  }
+
   &__icon {
     color: $TEAL_WAGTAIL;
     margin-inline-end: 0.2em;
     width: 1em;
     height: 1em;
+
+    @media (forced-colors: active) {
+      color: currentColor;
+    }
   }
 
   &__text {
     background: $LIGHT_BLUE_EEF8FF;
     border-bottom: 1px dotted $TEAL_WAGTAIL;
+
+    @media (forced-colors: active) {
+      border-bottom-color: currentColor;
+    }
   }
 }
diff --git a/src/api/constants.test.ts b/src/api/constants.test.ts
@@ -54,7 +54,8 @@ describe("constants", () => {
             "verticalAlign": "middle",
           },
           "MARK": Object {
-            "backgroundColor": "yellow",
+            "backgroundColor": "Mark",
+            "color": "MarkText",
           },
           "QUOTATION": Object {
             "fontStyle": "italic",

diff --git a/src/api/constants.ts b/src/api/constants.ts
@@ -90,7 +90,8 @@ export const CUSTOM_STYLE_MAP = {
     borderRadius: "3px",
   },
   [INLINE_STYLE.MARK]: {
-    backgroundColor: "yellow",
+    backgroundColor: "Mark",
+    color: "MarkText",
   },
   [INLINE_STYLE.QUOTATION]: {
     fontStyle: "italic",

diff --git a/src/blocks/DividerBlock.scss b/src/blocks/DividerBlock.scss
@@ -3,4 +3,8 @@
   background: $color-light-grey;
   height: 1px;
   margin: 10px 0;
+
+  @media (forced-colors: active) {
+    background: CanvasText;
+  }
 }
diff --git a/src/components/DraftailEditor.scss b/src/components/DraftailEditor.scss
@@ -1,6 +1,5 @@
 .#{$DRAFTAIL}Editor {
   --draftail-offset-inline-start: 2rem;
-  --draftail-editor-padding: #{$draftail-editor-padding};
   --draftail-text-direction: 1;
 
   background-color: $draftail-editor-background;

diff --git a/src/components/Toolbar/BlockToolbar/ComboBox.scss b/src/components/Toolbar/BlockToolbar/ComboBox.scss
@@ -17,7 +17,7 @@
   border-radius: $draftail-tooltip-radius;
   font-size: $draftail-editor-font-size;
   box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
-  outline: $draftail-contrast-border;
+  outline: $draftail-contrast-outline-modal;
 }
 
 .#{$DRAFTAIL}ComboBox__label {
@@ -48,7 +48,11 @@
   padding: 10px;
   font-size: 1rem;
   font-weight: 700;
-  border-top: 4px solid transparent;
+  border-top: $draftail-contrast-outline;
+
+  @media (forced-colors: active) {
+    color: GrayText;
+  }
 }
 
 .#{$DRAFTAIL}ComboBox__menu {
@@ -59,7 +63,7 @@
 .#{$DRAFTAIL}ComboBox__status,
 .#{$DRAFTAIL}ComboBox__option {
   padding: 10px;
-  border: 1px solid transparent;
+  border: $draftail-contrast-outline;
   font-size: 0.875rem;
   font-weight: 700;
   line-height: 1.4;
@@ -69,8 +73,11 @@
   &[aria-selected="true"] {
     background-color: $color-light-grey;
     border-color: currentColor;
-    outline: 6px solid transparent;
-    outline-offset: -6px;
+
+    @media (forced-colors: active) {
+      background: Highlight;
+      color: HighlightText;
+    }
   }
 }
 
@@ -80,3 +87,12 @@
   margin-inline-start: 6px;
   margin-inline-end: 6px;
 }
+
+.#{$DRAFTAIL}ComboBox__option-icon,
+.#{$DRAFTAIL}ComboBox__option-text {
+  // Force the text to CanvasText as forced colors automatically
+  // adds a Canvas outline behind text.
+  @media (forced-colors: active) {
+    color: CanvasText;
+  }
+}
diff --git a/src/components/Toolbar/InlineToolbar/InlineToolbar.scss b/src/components/Toolbar/InlineToolbar/InlineToolbar.scss
@@ -4,7 +4,7 @@
   color: $draftail-editor-chrome-text;
   border-radius: $draftail-toolbar-radius;
   border-bottom: $draftail-toolbar-border-bottom;
-  border: $draftail-contrast-border;
+  outline: $draftail-contrast-outline-modal;
 }
 
 .#{$DRAFTAIL}InlineToolbar__target {

diff --git a/src/components/Toolbar/MetaToolbar.scss b/src/components/Toolbar/MetaToolbar.scss
@@ -5,5 +5,5 @@
   padding: $controls-spacing;
   background-color: $draftail-editor-background;
   color: $draftail-editor-chrome;
-  border-top: 1px solid transparent;
+  border-top: $draftail-contrast-outline;
 }
diff --git a/src/components/Toolbar/ToolbarButton.scss b/src/components/Toolbar/ToolbarButton.scss
@@ -17,6 +17,7 @@ $button-font-size: 1rem;
   background: transparent;
   color: inherit;
   border: 1px solid transparent;
+  outline: $draftail-contrast-outline;
   font-size: $button-font-size;
   font-weight: 600;
   cursor: pointer;
@@ -25,11 +26,23 @@ $button-font-size: 1rem;
   &--active {
     background-color: $button-active-color;
     border: 1px solid $button-active-border-color;
+
+    @media (forced-colors: active) {
+      // Force the text to CanvasText as forced colors automatically
+      // adds a Canvas outline behind text.
+      background: Highlight;
+      color: HighlightText;
+      border-color: currentColor;
+    }
   }
 
   &__label {
     display: inline-block;
     vertical-align: middle;
     height: 1em;
+
+    @media (forced-colors: active) {
+      color: CanvasText;
+    }
   }
 }
diff --git a/src/components/Toolbar/ToolbarTooltip.scss b/src/components/Toolbar/ToolbarTooltip.scss
@@ -94,7 +94,7 @@ button[data-draftail-balloon] {
 
     background: $balloon-bg;
     border-radius: $balloon-radius;
-    border: $draftail-contrast-border;
+    outline: $draftail-contrast-outline-modal;
     color: $balloon-text-color;
     content: attr(aria-label);
     padding: 0.5em 1em;

diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss
@@ -5,6 +5,7 @@
   color: inherit;
   border-radius: 0;
   font-size: inherit;
+  outline: $draftail-contrast-outline-modal;
 
   .tippy-content {
     padding: 0;

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -14,5 +14,38 @@ module.exports = {
       // Only allow logical values.
       "text-align": ["start", "end", "center"],
     },
+    "scale-unlimited/declaration-strict-value": [
+      ["color", "fill", "stroke", "/-color/"],
+      {
+        ignoreKeywords: [
+          "currentColor",
+          "inherit",
+          "transparent",
+          "initial",
+          "none",
+          "unset",
+          "Canvas",
+          "CanvasText",
+          "LinkText",
+          "VisitedText",
+          "ActiveText",
+          "ButtonFace",
+          "ButtonText",
+          "ButtonBorder",
+          "Field",
+          "FieldText",
+          "Highlight",
+          "HighlightText",
+          "SelectedItem",
+          "SelectedItemText",
+          "Mark",
+          "MarkText",
+          "GrayText",
+          "AccentColor",
+          "AccentColorText",
+        ],
+      },
+    ],
+    "value-keyword-case": null,
   },
 };