HAR-9797 - feat: added initial support for high contrast mode

packages/super-editor/src/components/toolbar/AlignmentButtons.vue

@@ -1,6 +1,9 @@
 <script setup>
+import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
+
 import { toolbarIcons } from './toolbarIcons.js';
 
+const { isHighContrastMode } = useHighContrastMode();
 const emit = defineEmits(['select']);
 
 const select = (alignment) => {
@@ -9,11 +12,15 @@ const select = (alignment) => {
 </script>
 
 <template>
-  <div class="alignment-buttons">
-    <div class="button-icon" @click="select('left')" v-html="toolbarIcons.alignLeft" data-item="btn-textAlign-option"></div>
-    <div class="button-icon" @click="select('center')" v-html="toolbarIcons.alignCenter" data-item="btn-textAlign-option"></div>
-    <div class="button-icon" @click="select('right')" v-html="toolbarIcons.alignRight" data-item="btn-textAlign-option"></div>
-    <div class="button-icon" @click="select('justify')" v-html="toolbarIcons.alignJustify" data-item="btn-textAlign-option"></div>
+  <div class="alignment-buttons" :class="{ 'high-contrast': isHighContrastMode }">
+    <div class="button-icon" @click="select('left')" v-html="toolbarIcons.alignLeft" data-item="btn-textAlign-option">
+    </div>
+    <div class="button-icon" @click="select('center')" v-html="toolbarIcons.alignCenter"
+      data-item="btn-textAlign-option"></div>
+    <div class="button-icon" @click="select('right')" v-html="toolbarIcons.alignRight" data-item="btn-textAlign-option">
+    </div>
+    <div class="button-icon" @click="select('justify')" v-html="toolbarIcons.alignJustify"
+      data-item="btn-textAlign-option"></div>
   </div>
 </template>
 
@@ -24,27 +31,38 @@ const select = (alignment) => {
   width: 100%;
   padding: 8px;
   box-sizing: border-box;
-}
-.button-icon {
-  cursor: pointer;
-  padding: 5px;
-  font-size: 16px;
-  width: 25px;
-  height: 25px;
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-}
-.button-icon:hover {
-  background-color: #d8dee5;
-}
 
-.button-icon :deep(svg) {
-  width: 100%;
-  height: 100%;
-  display: block;
-  fill: currentColor;
+  .button-icon {
+    cursor: pointer;
+    padding: 5px;
+    font-size: 16px;
+    width: 25px;
+    height: 25px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+
+    &:hover {
+      background-color: #d8dee5;
+    }
+
+    :deep(svg) {
+      width: 100%;
+      height: 100%;
+      display: block;
+      fill: currentColor;
+    }
+  }
+
+  &.high-contrast {
+    .button-icon {
+      &:hover {
+        background-color: #000;
+        color: #fff;
+      }
+    }
+  }
 }
 </style>

packages/super-editor/src/components/toolbar/ButtonGroup.vue

@@ -4,6 +4,7 @@ import ToolbarButton from './ToolbarButton.vue';
 import ToolbarSeparator from './ToolbarSeparator.vue';
 import OverflowMenu from './OverflowMenu.vue';
 import { NDropdown, NTooltip, NSelect } from 'naive-ui';
+import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
 
 const emit = defineEmits(['command']);
 
@@ -23,6 +24,7 @@ const props = defineProps({
 });
 
 const currentItem = ref(null);
+const { isHighContrastMode } = useHighContrastMode();
 // Matches media query from SuperDoc.vue
 const isMobile = window.matchMedia('(max-width: 768px)').matches;
 const styleMap = {
@@ -96,38 +98,23 @@ const handleClickOutside = (e) => {
 
 <template>
   <div :style="getPositionStyle" class="button-group">
-    <div
-      v-for="item in toolbarItems"
-      :key="item.id.value"
-      :class="{
+    <div v-for="item in toolbarItems" :key="item.id.value" :class="{
         narrow: item.isNarrow.value,
         wide: item.isWide.value,
-      }"
-      class="toolbar-item-ctn"
-    >
+      }" class="toolbar-item-ctn">
       <!-- toolbar separator -->
       <ToolbarSeparator v-if="isSeparator(item)" style="width: 20px" />
 
       <!-- Toolbar button -->
-      <n-dropdown
-        v-if="isDropdown(item) && item.nestedOptions?.value?.length"
-        :options="dropdownOptions(item)"
-        :trigger="item.disabled.value ? null : 'click'"
-        :show="item.expand.value"
-        size="medium"
-        placement="bottom-start"
-        class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown"
-        @select="(key, option) => handleSelect(item, option)"
-        @clickoutside="handleClickOutside"
-        :style="item.dropdownStyles.value"
-      >
+      <n-dropdown v-if="isDropdown(item) && item.nestedOptions?.value?.length" :options="dropdownOptions(item)"
+        :trigger="item.disabled.value ? null : 'click'" :show="item.expand.value" size="medium" placement="bottom-start"
+        class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown" :class="{ 'high-contrast': isHighContrastMode }"
+        @select="(key, option) => handleSelect(item, option)" @clickoutside="handleClickOutside"
+        :style="item.dropdownStyles.value">
         <n-tooltip trigger="hover" :disabled="!item.tooltip?.value">
           <template #trigger>
-            <ToolbarButton
-              :toolbar-item="item"
-              @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
-              @buttonClick="handleToolbarButtonClick(item)"
-            />
+            <ToolbarButton :toolbar-item="item" @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
+              @buttonClick="handleToolbarButtonClick(item)" />
           </template>
           <div>
             {{ item.tooltip }}
@@ -138,11 +125,8 @@ const handleClickOutside = (e) => {
 
       <n-tooltip trigger="hover" v-else-if="isButton(item)" class="sd-editor-toolbar-tooltip">
         <template #trigger>
-          <ToolbarButton
-            :toolbar-item="item"
-            @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
-            @buttonClick="handleToolbarButtonClick(item)"
-          />
+          <ToolbarButton :toolbar-item="item" @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
+            @buttonClick="handleToolbarButtonClick(item)" />
         </template>
         <div v-if="item.tooltip">
           {{ item.tooltip }}
@@ -151,11 +135,8 @@ const handleClickOutside = (e) => {
       </n-tooltip>
 
       <!-- Overflow menu -->
-      <OverflowMenu
-        v-if="isOverflow(item) && overflowItems.length"
-        :toolbar-item="item"
-        :overflow-items="overflowItems"
-      />
+      <OverflowMenu v-if="isOverflow(item) && overflowItems.length" :toolbar-item="item"
+        :overflow-items="overflowItems" />
     </div>
   </div>
 </template>
@@ -167,11 +148,32 @@ const handleClickOutside = (e) => {
   cursor: pointer;
 }
 
-.sd-editor-toolbar-dropdown .n-dropdown-option-body {
-  &:hover {
-    &::before,
-    &::after {
-      background-color: #d8dee5 !important;
+.sd-editor-toolbar-dropdown {
+  &.high-contrast {
+    .n-dropdown-option-body {
+      &:hover {
+
+        &::before,
+        &::after {
+          background-color: #000 !important;
+        }
+      }
+
+      &__label {
+        &:hover {
+          color: #fff !important;
+        }
+      }
+    }
+  }
+
+  .n-dropdown-option-body {
+    &:hover {
+
+      &::before,
+      &::after {
+        background-color: #d8dee5 !important;
+      }
     }
   }
 }

packages/super-editor/src/components/toolbar/DocumentMode.vue

@@ -1,5 +1,11 @@
 <script setup>
+import { ref } from 'vue';
+import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
+
 const emit = defineEmits(['select']);
+
+const { isHighContrastMode } = useHighContrastMode();
+
 const props = defineProps({
   options: {
     type: Array,
@@ -12,14 +18,9 @@ const handleClick = (item) => {
 </script>
 
 <template>
-  <div class="document-mode">
-    <div
-      class="option-item"
-      v-for="option in options"
-      @click="handleClick(option)"
-      :class="{ disabled: option.disabled }"
-      data-item="btn-documentMode-option"
-    >
+  <div class="document-mode" :class="{ 'high-contrast': isHighContrastMode }">
+    <div class="option-item" v-for="option in options" @click="handleClick(option)"
+      :class="{ disabled: option.disabled }" data-item="btn-documentMode-option">
       <div class="document-mode-column icon-column">
         <div class="icon-column__icon" v-html="option.icon"></div>
       </div>
@@ -37,24 +38,19 @@ const handleClick = (item) => {
 </template>
 
 <style scoped>
-.document-mode :deep(svg) {
-  width: 100%;
-  height: 100%;
-  display: block;
-  fill: currentColor;
-}
-
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed !important;
-  pointer-events: none;
-}
-.document-mode {
+.document-mode  {
   display: flex;
   flex-direction: column;
   padding: 10px;
   box-sizing: border-box;
-}
+
+  :deep(svg) {
+    width: 100%;
+  height: 100%;
+  display: block;
+  fill: currentColor;
+  }
+
 .option-item {
   display: flex;
   flex-direction: row;
@@ -63,11 +59,44 @@ const handleClick = (item) => {
   border-radius: 4px;
   cursor: pointer;
   box-sizing: border-box;
+
+  &:hover {
+    background-color: #c8d0d8;
+  }
+}
+
+&.high-contrast {
+  .option-item {
+    &:hover {
+      background-color: #000;
+      color: #fff;
+
+      .icon-column__icon {
+        color: #fff;
+      }
+
+      .text-column {
+
+        >.document-mode-type,
+        >.document-mode-description {
+          color: #fff;
+        }
+      }
+    }
+    }
+}
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed !important;
+  pointer-events: none;
 }
 .document-mode-column {
   display: flex;
   flex-direction: column;
 }
+
 .document-mode-type {
   font-weight: 400;
   font-size: 15px;
@@ -82,27 +111,25 @@ const handleClick = (item) => {
   color: black;
   height: 100%;
   box-sizing: border-box;
-}
 
-.icon-column__icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  height: 18px;
-  color: #47484a;
+  &__icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    height: 18px;
+    color: #47484a;
+  }
 }
 
 .icon-column__icon :deep(svg) {
-  width: auto; /* needed for safari */
+  width: auto;
+  /* needed for safari */
   max-height: 18px;
 }
 
 .document-mode-description {
   font-size: 12px;
   color: #666;
 }
-.option-item:hover {
-  background-color: #c8d0d8;
-}
 </style>