feat: focus styles

IQSS · Dec 19, 2024 · c6a069a · c6a069a
1 parent db0c3b6
commit c6a069a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/design-system/src/lib/components/rich-text-editor/RichTextEditor.scss b/packages/design-system/src/lib/components/rich-text-editor/RichTextEditor.scss
@@ -8,6 +8,13 @@
   border: solid 1px $dv-border-color;
   border-radius: 6px;
 
+  &:focus,
+  &:focus-within {
+    border-color: color.adjust($dv-primary-color, $alpha: -0.4);
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem color.adjust($dv-primary-color, $alpha: -0.75);
+  }
+
   .editor-content-wrapper {
     display: flex;
     flex: 1;
@@ -29,9 +36,9 @@
       }
 
       &.ProseMirror-focused {
-        border-color: #99bddb;
+        border-color: color.adjust($dv-primary-color, $alpha: -0.4);
         outline: 0;
-        box-shadow: 0 0 0 0.25rem rgba(51 122 183 / 25%);
+        box-shadow: 0 0 0 0.25rem color.adjust($dv-primary-color, $alpha: -0.75);
       }
 
       p.is-editor-empty:first-child::before {

diff --git a/...tion-featured-items/featured-items-form/featured-item-field/FeaturedItemField.module.scss b/...tion-featured-items/featured-items-form/featured-item-field/FeaturedItemField.module.scss
@@ -68,6 +68,12 @@
       display: none;
     }
 
+    &:focus-within {
+      border-color: color.adjust($dv-primary-color, $alpha: -0.4);
+      outline: 0;
+      box-shadow: 0 0 0 0.25rem color.adjust($dv-primary-color, $alpha: -0.75);
+    }
+
     .image-actions {
       position: absolute;
       top: 4px;

diff --git a/...s/collection-featured-items/featured-items-form/featured-item-field/FeaturedItemField.tsx b/...s/collection-featured-items/featured-items-form/featured-item-field/FeaturedItemField.tsx
@@ -16,8 +16,6 @@ interface FeaturedItemFieldProps {
   initialImageUrl?: string
 }
 
-// TODO:ME - Image field focus whithin styles
-
 export const FeaturedItemField = ({
   id,
   itemIndex,