merge

assets/js/theme/design-system/notes.js

@@ -44,7 +44,7 @@ class Note {
         });
     }
 
-    a11yDesactivation () {
+    a11yDisabling () {
         this.closeWithKeyboard = (event) => {
             if (event.keyCode === 27 || event.key === 'Escape' || event.key === 'Tab' || event.keyCode === 9) {
                 this.deactivateAllNotes();
@@ -62,7 +62,7 @@ class Note {
         document.addEventListener('click', this.closeWithClick);
     }
 
-    removeA11yDesactivation() {
+    removeA11yDisabling () {
         window.removeEventListener('keydown', this.closeWithKeyboard);
         document.removeEventListener('click', this.closeWithClick);
     }

assets/sass/_theme/design-system/notes.sass

 .note
-    margin-left: pxToRem($space-unit)
     display: inline-block
     &__call
         @include meta
-        background: $color-background-alt
+        background: var(--color-background-alt)
         border-radius: 4px
         cursor: pointer
         display: inline
@@ -17,8 +16,8 @@
         text-align: center
         user-select: none
     &__content
-        background: $color-text
-        color: $color-background
+        background: var(--color-text)
+        color: var(--color-background)
         display: none
         max-width: 100vw
         padding: $spacing-3
@@ -28,8 +27,8 @@
         @include small
     &--active
         .note__call
-            background: $color-text
-            color: $color-background
+            background: var(--color-text)
+            color: var(--color-background)
             border-bottom-left-radius: 0
             border-bottom-right-radius: 0
         .note__content