From 9f9841a8a2a1adae63becdcc8e4a74e59f07bbe6 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 6 Dec 2024 18:39:49 +0000
Subject: [PATCH 1/3] Added new theme to match Backstage

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/.storybook/preview.tsx         | 13 +++-
 .../canon/.storybook/themes/backstage.css     | 75 +++++++++++++++++++
 2 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 packages/canon/.storybook/themes/backstage.css

diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx
index bb0c497d2d..8beeb82720 100644
--- a/packages/canon/.storybook/preview.tsx
+++ b/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');
diff --git a/packages/canon/.storybook/themes/backstage.css b/packages/canon/.storybook/themes/backstage.css
new file mode 100644
index 0000000000..4a7821cda2
--- /dev/null
+++ b/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;
+}

From eb459c8bd603479541e3a91e31604fdcecb1a3fd Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sat, 7 Dec 2024 23:05:01 +0000
Subject: [PATCH 2/3] Improve Button docs

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/docs/components/Canvas/index.tsx    | 21 ++++++++
 .../src/components/Button/Button.stories.tsx  |  1 -
 packages/canon/src/components/Button/Docs.mdx | 50 +++++++++++++++++++
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 packages/canon/docs/components/Canvas/index.tsx
 create mode 100644 packages/canon/src/components/Button/Docs.mdx

diff --git a/packages/canon/docs/components/Canvas/index.tsx b/packages/canon/docs/components/Canvas/index.tsx
new file mode 100644
index 0000000000..566b785203
--- /dev/null
+++ b/packages/canon/docs/components/Canvas/index.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const Canvas = props => {
+  console.log(props);
+  return <div>Canvas</div>;
+};
diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index fe3b1d58f6..6cab1cd1ba 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -26,7 +26,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     size: {
       control: 'select',
diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx
new file mode 100644
index 0000000000..7fa1886a4e
--- /dev/null
+++ b/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>

From a87b3b5ea86971389bdc25876cba637bc69374a5 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 9 Dec 2024 09:20:05 +0000
Subject: [PATCH 3/3] Delete index.tsx

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/docs/components/Canvas/index.tsx    | 21 -------------------
 1 file changed, 21 deletions(-)
 delete mode 100644 packages/canon/docs/components/Canvas/index.tsx

diff --git a/packages/canon/docs/components/Canvas/index.tsx b/packages/canon/docs/components/Canvas/index.tsx
deleted file mode 100644
index 566b785203..0000000000
--- a/packages/canon/docs/components/Canvas/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-
-export const Canvas = props => {
-  console.log(props);
-  return <div>Canvas</div>;
-};