From d3268ab4fa9085729abc050b6dd2da18afb2ba19 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 5 Dec 2024 12:36:37 +0000
Subject: [PATCH] Fix dark mode

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/docs/Theme.mdx                 |  6 ++---
 .../LayoutComponents/layout-components.css.ts |  4 ++--
 packages/canon/src/components/Box/box.css.ts  |  2 +-
 .../canon/src/components/Button/styles.css    | 13 ++++++++--
 packages/canon/src/theme/theme.css            | 24 +++++++++++++------
 5 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/packages/canon/docs/Theme.mdx b/packages/canon/docs/Theme.mdx
index cab948c6ba..3d76b4e998 100644
--- a/packages/canon/docs/Theme.mdx
+++ b/packages/canon/docs/Theme.mdx
@@ -38,7 +38,7 @@ import * as Table from './components/Table';
   --canon-outline-focus: #ccc;
   --canon-text-primary: #f0f0f0;
   --canon-text-secondary: #666;
-  --canon-font-sans: 'Geist', serif;
+  --canon-font-regular: 'Geist', serif;
   --canon-font-mono: 'Monospace', monospace;
   /* ... other values */
 }
@@ -53,7 +53,7 @@ import * as Table from './components/Table';
   --canon-outline-focus: #ccc;
   --canon-text-primary: #fff;
   --canon-text-secondary: #666;
-  --canon-font-sans: 'Geist', serif;
+  --canon-font-regular: 'Geist', serif;
   --canon-font-mono: 'Monospace', monospace;
   /* ... other values */
 }
@@ -144,7 +144,7 @@ import * as Table from './components/Table';
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-font-sans</Chip>
+        <Chip head>--canon-font-regular</Chip>
       </Table.Cell>
       <Table.Cell>The sans-serif font for the theme.</Table.Cell>
     </Table.Row>
diff --git a/packages/canon/docs/components/LayoutComponents/layout-components.css.ts b/packages/canon/docs/components/LayoutComponents/layout-components.css.ts
index a8440dd01f..dcdaff2662 100644
--- a/packages/canon/docs/components/LayoutComponents/layout-components.css.ts
+++ b/packages/canon/docs/components/LayoutComponents/layout-components.css.ts
@@ -52,7 +52,7 @@ export const content = style({
 
 export const title = style({
   fontSize: '16px',
-  fontFamily: 'var(--canon-font-sans)',
+  fontFamily: 'var(--canon-font-regular)',
   transition: 'color 0.2s ease-in-out',
   marginBottom: '0.25rem',
   selectors: {
@@ -64,7 +64,7 @@ export const title = style({
 
 export const description = style({
   fontSize: '16px',
-  fontFamily: 'var(--canon-font-sans)',
+  fontFamily: 'var(--canon-font-regular)',
   color: '#9e9e9e',
 });
 
diff --git a/packages/canon/src/components/Box/box.css.ts b/packages/canon/src/components/Box/box.css.ts
index 92af783eec..a3e49162fd 100644
--- a/packages/canon/src/components/Box/box.css.ts
+++ b/packages/canon/src/components/Box/box.css.ts
@@ -17,6 +17,6 @@
 import { style } from '@vanilla-extract/css';
 
 export const base = style({
-  fontFamily: 'var(--canon-font-sans)',
+  fontFamily: 'var(--canon-font-regular)',
   color: 'var(--canon-text-primary)',
 });
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index 07d3048397..aaf1cae8bf 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -20,7 +20,7 @@
   align-items: center;
   justify-content: center;
   user-select: none;
-  font-family: var(--canon-font-sans);
+  font-family: var(--canon-font-regular);
   font-weight: var(--canon-font-bold);
   font-size: var(--canon-font-sizes-md);
   padding: 0;
@@ -47,7 +47,16 @@
 }
 
 .button.secondary:hover {
-  box-shadow: 0 0 0 1px var(--canon-outline-focus);
+  box-shadow: 0 0 0 1px var(--canon-outline-hover);
+}
+
+.button.tertiary {
+  background-color: transparent;
+  color: var(--canon-text-primary);
+}
+
+.button.tertiary:hover {
+  color: var(--canon-text-secondary);
 }
 
 .button.small {
diff --git a/packages/canon/src/theme/theme.css b/packages/canon/src/theme/theme.css
index 0bb95d4270..6784cb336f 100644
--- a/packages/canon/src/theme/theme.css
+++ b/packages/canon/src/theme/theme.css
@@ -41,13 +41,13 @@
   --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2);
 
   /* Font families */
-  --canon-font-sans: 'Geist', serif;
+  --canon-font-regular: 'Geist', serif;
   --canon-font-monospace: 'Monospace', monospace;
   --canon-font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
     'Noto Color Emoji';
 
   /* Font weights */
-  --canon-font-regular: 400;
+  --canon-font-normal: 400;
   --canon-font-bold: 600;
 
   /* Font sizes */
@@ -78,12 +78,22 @@
 
 /* Dark theme */
 [data-theme='dark'] {
+  /* Colors */
   --canon-accent: #fff;
   --canon-background: #000;
   --canon-surface-1: #121212;
-  --canon-surface-2: #292929;
-  --canon-outline: #666;
-  --canon-outline-focus: #ccc;
-  --canon-text-primary: #000;
-  --canon-text-secondary: #666;
+  --canon-surface-2: #1a1a1a;
+
+  /* Outlines */
+  --canon-outline: rgba(255, 255, 255, 0.1);
+  --canon-outline-hover: rgba(255, 255, 255, 0.2);
+  --canon-outline-focus: #fff;
+
+  /* States - Add more states */
+  --canon-error: #f50000;
+
+  /* Text colors */
+  --canon-text-primary: #fff;
+  --canon-text-primary-on-accent: #000;
+  --canon-text-secondary: #b3b3b3;
 }