Fix styles

components/common/Editor/index.module.scss

@@ -74,21 +74,21 @@
     h1 {
       font-size: $font-xlarge;
       font-weight: $medium;
-      margin: $unit 0;
+      margin: $unit-2x 0;
       text-align: left;
     }
 
     h2 {
       font-size: $font-large;
       font-weight: $medium;
-      margin: $unit 0;
+      margin: $unit-2x 0;
       text-align: left;
     }
 
     h3 {
       font-size: $font-regular;
       font-weight: $medium;
-      margin: $unit 0;
+      margin: $unit-2x 0;
       text-align: left;
     }
 
@@ -96,6 +96,7 @@
       border-radius: $item-corner-small;
       background: var(--highlight-bg);
       color: var(--highlight-text);
+      font-weight: $normal;
       padding: 1px $unit-fourth;
     }
 
@@ -116,15 +117,18 @@
     .mention {
       border-radius: $item-corner-small;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
-        0 1px 0px rgba(0, 0, 0, 0.25);
+        0 1px 0px var(--null-shadow);
-      background: var(--card-bg);
+      background: var(--null-bg);
       color: var(--text-primary);
       font-weight: $medium;
       font-size: 15px;
       padding: 1px $unit-half;
+      transition: all 0.1s ease-out;
 
       &:hover {
-        background: var(--card-bg-hover);
+        background: var(--null-bg-hover);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
+          0 1px 0px var(--null-shadow-hover);
         text-decoration: none;
         cursor: pointer;
       }
@@ -136,6 +140,7 @@
         color: var(--fire-text);
 
         &:hover {
+          background: var(--fire-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--fire-shadow-hover);
           color: var(--fire-text-hover);
@@ -149,6 +154,7 @@
         color: var(--water-text);
 
         &:hover {
+          background: var(--water-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--water-shadow-hover);
           color: var(--water-text-hover);
@@ -162,6 +168,7 @@
         color: var(--earth-text);
 
         &:hover {
+          background: var(--earth-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--earth-shadow-hover);
           color: var(--earth-text-hover);
@@ -188,6 +195,7 @@
         color: var(--dark-text);
 
         &:hover {
+          background: var(--dark-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--dark-shadow-hover);
           color: var(--dark-text-hover);
@@ -201,6 +209,7 @@
         color: var(--light-text);
 
         &:hover {
+          background: var(--light-bg-hover);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
             0 1px 0px var(--light-shadow-hover);
           color: var(--light-text-hover);

styles/themes.scss

@@ -159,6 +159,14 @@
   --grid-border-color: #{$grid--border--color--light};
 
   // Light - Element theming
+  --null-bg: #{$null--bg--light};
+  --null-bg-hover: #{$null--bg--hover--light};
+  --null-text: #{$null--text--light};
+  --null-raid-text: #{$null--text--raid--light};
+  --null-text-hover: #{$null--text--hover--light};
+  --null-shadow: #{$null--shadow--light};
+  --null-shadow-hover: #{$null--shadow--light--hover};
+
   --wind-bg: #{$wind--bg--light};
   --wind-bg-hover: #{$wind--bg--hover--light};
   --wind-text: #{$wind--text--light};
@@ -373,6 +381,14 @@
   --grid-border-color: #{$grid--border--color--dark};
 
   // Dark - Element theming
+  --null-bg: #{$null--bg--dark};
+  --null-bg-hover: #{$null--bg--hover--dark};
+  --null-text: #{$null--text--dark};
+  --null-raid-text: #{$null--text--raid--dark};
+  --null-text-hover: #{$null--text--hover--dark};
+  --null-shadow: #{$null--shadow--dark};
+  --null-shadow-hover: #{$null--shadow--dark--hover};
+
   --wind-bg: #{$wind--bg--dark};
   --wind-bg-hover: #{$wind--bg--hover--dark};
   --wind-text: #{$wind--text--dark};

styles/variables.scss

@@ -464,6 +464,28 @@ $wind--shadow--dark: fade-out($wind-text-20, 0.3);
 $wind--shadow--light--hover: fade-out($wind-text-00, 0.3);
 $wind--shadow--dark--hover: fade-out($wind-text-00, 0.3);
 
+// Color Definitions: Element / Null
+$null--bg--light: $grey-75;
+$null--bg--dark: $grey-40;
+
+$null--bg--hover--light: $grey-70;
+$null--bg--hover--dark: $grey-30;
+
+$null--text--light: $grey-40;
+$null--text--dark: $grey-90;
+
+$null--text--raid--light: $grey-40;
+$null--text--raid--dark: $grey-90;
+
+$null--text--hover--light: $grey-20;
+$null--text--hover--dark: $grey-90;
+
+$null--shadow--light: fade-out($grey-60, 0.3);
+$null--shadow--dark: fade-out($grey-25, 0.3);
+
+$null--shadow--light--hover: fade-out($grey-50, 0.3);
+$null--shadow--dark--hover: fade-out($grey-10, 0.3);
+
 // Color Definitions: Element / Fire
 $fire--bg--light: $fire-bg-10;
 $fire--bg--dark: $fire-bg-10;