Merge pull request #28014 from backstage/canon-backstage-theme

New theme for Canon to match Backstage existing theme

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;
+}

packages/canon/src/components/Button/Button.stories.tsx

@@ -26,7 +26,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     size: {
       control: 'select',

packages/canon/src/components/Button/Docs.mdx

@@ -0,0 +1,50 @@
+import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
+import * as ButtonStories from './Button.stories';
+import { Title, Text } from '../../../docs/components';
+import { PropsTable } from '../../../docs/components/PropsTable';
+
+<Meta of={ButtonStories} />
+
+<Unstyled>
+
+<Title type="h1">Button</Title>
+<Text>A button component that can be used to trigger actions.</Text>
+
+<Canvas of={ButtonStories.Primary} />
+
+<Source of={ButtonStories.Primary} dark />
+
+<Title type="h2" style={{ marginBottom: '16px' }}>
+  API reference
+</Title>
+
+<PropsTable
+  data={{
+    size: {
+      type: ['small', 'medium'],
+      responsive: false,
+    },
+    variant: {
+      type: ['primary', 'secondary', 'tertiary'],
+      responsive: false,
+    },
+    disabled: {
+      type: 'boolean',
+      responsive: false,
+    },
+    children: {
+      type: 'ReactNode',
+      responsive: false,
+    },
+    className: {
+      type: 'string',
+      responsive: false,
+    },
+    style: {
+      type: 'CSSProperties',
+      responsive: false,
+    },
+  }}
+/>
+
+</Unstyled>