Fix dark mode

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

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>

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',
 });
 

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)',
 });

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 {

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