style(colors): added focus shadows for message colors

Author: liamross

src/__stories__/2_style/3_mixins.stories.mdx

@@ -207,4 +207,14 @@ Standard transition for all opacity changes.
 transition: opacity 0.25s;
 ```
 
+### `opacity-transition-fast`
+
+A faster transition for more critical items such as thumbnail buttons.
+
+<Mixins index={10} />
+
+```scss
+transition: opacity 0.1s;
+```
+
 </ToastProvider>

src/__stories__/2_style/generated/mixins.ts

@@ -9,4 +9,5 @@ export default [
   '@include spinner;',
   '@include slide-in;',
   '@include opacity-transition;',
+  '@include opacity-transition-fast;',
 ];

src/__stories__/2_style/generated/styleVariables.ts

@@ -125,6 +125,30 @@ export default {
         value: '#e74c3c',
         dark: '#e74c3c',
       },
+      {
+        scss: '$color-message-info-focus-shadow',
+        css: 'var(--color-message-info-focus-shadow)',
+        value: 'rgba(41, 128, 185, 0.4)',
+        dark: 'rgba(41, 128, 185, 0.4)',
+      },
+      {
+        scss: '$color-message-success-focus-shadow',
+        css: 'var(--color-message-success-focus-shadow)',
+        value: 'rgba(39, 174, 96, 0.4)',
+        dark: 'rgba(39, 174, 96, 0.4)',
+      },
+      {
+        scss: '$color-message-warning-focus-shadow',
+        css: 'var(--color-message-warning-focus-shadow)',
+        value: 'rgba(230, 126, 34, 0.4)',
+        dark: 'rgba(230, 126, 34, 0.4)',
+      },
+      {
+        scss: '$color-message-error-focus-shadow',
+        css: 'var(--color-message-error-focus-shadow)',
+        value: 'rgba(231, 76, 60, 0.4)',
+        dark: 'rgba(231, 76, 60, 0.4)',
+      },
     ],
     other: [
       {

src/styles/_base.scss

@@ -8,6 +8,7 @@
   line-height: 1.25;
   font-family: inherit;
   color: $color-font-primary;
+  fill: $color-font-primary;
   font-weight: $font-weight-normal;
   font-family: $font-family;
   -webkit-font-smoothing: auto;

src/styles/_theme.scss

@@ -29,6 +29,11 @@
   --color-message-warning: #e67e22;
   --color-message-error: #e74c3c;
 
+  --color-message-info-focus-shadow: rgba(41, 128, 185, 0.4);
+  --color-message-success-focus-shadow: rgba(39, 174, 96, 0.4);
+  --color-message-warning-focus-shadow: rgba(230, 126, 34, 0.4);
+  --color-message-error-focus-shadow: rgba(231, 76, 60, 0.4);
+
   --color-background-canvas: #eee;
   --color-focus-shadow: rgba(20, 110, 170, 0.4);
   --color-overlay-canvas: rgba(0, 0, 0, 0.4);

src/styles/_variables.scss

@@ -32,6 +32,10 @@ $color-message-info: var(--color-message-info);
 $color-message-success: var(--color-message-success);
 $color-message-warning: var(--color-message-warning);
 $color-message-error: var(--color-message-error);
+$color-message-info-focus-shadow: var(--color-message-info-focus-shadow);
+$color-message-success-focus-shadow: var(--color-message-success-focus-shadow);
+$color-message-warning-focus-shadow: var(--color-message-warning-focus-shadow);
+$color-message-error-focus-shadow: var(--color-message-error-focus-shadow);
 
 // Other.
 $color-background-canvas: var(--color-background-canvas);