Added new theme to match Backstage

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/.storybook/preview.tsx

@@ -8,6 +8,9 @@ import '../docs/components/styles.css';
 // Canon specific styles
 import '../src/theme/styles.css';
 
+// Custom themes
+import './themes/backstage.css';
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -23,12 +26,14 @@ const preview: Preview = {
   decorators: [
     withThemeByDataAttribute<ReactRenderer>({
       themes: {
-        light: 'light',
-        dark: 'dark',
+        Light: 'light',
+        Dark: 'dark',
+        'Backstage Light': 'backstage-light',
+        'Backstage Dark': 'backstage-dark',
       },
-      defaultTheme: 'light',
+      defaultTheme: 'Light',
     }),
-    (Story, context) => {
+    Story => {
       document.body.style.backgroundColor = 'var(--canon-background)';
 
       const docsStoryElements = document.getElementsByClassName('docs-story');

packages/canon/.storybook/themes/backstage.css

@@ -0,0 +1,75 @@
+[data-theme='backstage-light'] {
+  /* Colors */
+  --canon-accent: #2e77d0;
+  --canon-background: #f8f8f8;
+  --canon-surface-1: #fff;
+  --canon-surface-2: #f4f4f4;
+
+  /* Text colors */
+  --canon-text-primary: #000;
+  --canon-text-primary-on-accent: #fff;
+  --canon-text-secondary: #646464;
+
+  --canon-font-regular: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+
+  .button {
+    border-radius: 60px;
+    font-weight: 400;
+    text-transform: uppercase;
+    font-size: 0.875rem;
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    line-height: 1.75;
+    border-radius: 4px;
+    background-color: #1f5493;
+    padding: 6px 16px;
+    box-shadow: none;
+  }
+
+  .button:hover {
+    box-shadow: none;
+  }
+
+  .button.primary {
+    color: #fff;
+    background-color: rgb(21, 58, 102);
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  }
+
+  .button.primary:hover {
+    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+      0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  }
+
+  .button.secondary {
+    background-color: transparent;
+    border: 1px solid rgba(31, 84, 147, 0.5);
+    color: #1f5493;
+  }
+
+  .button.secondary:hover {
+    border: 1px solid #1f5493;
+    background-color: rgba(31, 84, 147, 0.04);
+  }
+
+  .button.tertiary {
+    background-color: transparent;
+    border: none;
+    color: #1f5493;
+  }
+}
+
+[data-theme='backstage-dark'] {
+  /* Colors */
+  --canon-accent: #2e77d0;
+  --canon-background: #000;
+  --canon-surface-1: #121212;
+  --canon-surface-2: #1a1a1a;
+
+  /* Text colors */
+  --canon-text-primary: #fff;
+  --canon-text-primary-on-accent: #000;
+  --canon-text-secondary: #b3b3b3;
+}