From 08bdc39c54d83484b86d5358a0d1f6de9032eff9 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 7 Jan 2025 15:10:35 +0000
Subject: [PATCH] Fix components issues

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Button/styles.css    |  6 +-
 .../canon/src/components/Checkbox/styles.css  | 56 +++++++++----------
 .../canon/src/components/Heading/styles.css   | 12 ++--
 .../canon/src/components/Table/styles.css     |  2 +-
 4 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index 52fcb57a18..7af027ddcd 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -35,18 +35,18 @@
 
   &:hover {
     background-color: transparent;
-    box-shadow: inset 0 0 0 1px var(--canon-outline-focus);
+    box-shadow: inset 0 0 0 1px var(--canon-border-focus);
     color: var(--canon-text-primary);
   }
 }
 
 .cn-button-secondary {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--canon-outline);
+  box-shadow: inset 0 0 0 1px var(--canon-border-base);
   color: var(--canon-text-primary);
 
   &:hover {
-    box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
+    box-shadow: inset 0 0 0 1px var(--canon-border-hover);
   }
 }
 
diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css
index e4ac30a447..c1f285f7c7 100644
--- a/packages/canon/src/components/Checkbox/styles.css
+++ b/packages/canon/src/components/Checkbox/styles.css
@@ -9,39 +9,33 @@
   color: var(--canon-text-primary);
   user-select: none;
 
-  & .checkbox {
-    all: unset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    box-shadow: inset 0 0 0 1px var(--canon-outline);
-    cursor: pointer;
-    border-radius: 2px;
-    transition: all 0.2s ease-in-out;
-
-    &[data-state='unchecked'] {
-      & .checkbox-indicator {
-        display: none;
-      }
-    }
-
-    &[data-state='checked'] {
-      background: var(--canon-accent);
-    }
-  }
-
-  & .checkbox-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--canon-text-primary-on-accent);
-  }
-
   &:hover {
     & .checkbox {
-      box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
+      box-shadow: inset 0 0 0 1px var(--canon-border-hover);
     }
   }
 }
+
+.checkbox {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  box-shadow: inset 0 0 0 1px var(--canon-border-base);
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.2s ease-in-out;
+
+  &[data-checked] {
+    background-color: var(--canon-accent);
+  }
+}
+
+.checkbox-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--canon-text-primary-on-accent);
+}
diff --git a/packages/canon/src/components/Heading/styles.css b/packages/canon/src/components/Heading/styles.css
index d2d6a27576..446a5b7d2b 100644
--- a/packages/canon/src/components/Heading/styles.css
+++ b/packages/canon/src/components/Heading/styles.css
@@ -23,36 +23,36 @@
   &.text-display {
     font-size: var(--canon-font-size-display);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title1 {
     font-size: var(--canon-font-size-title1);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title2 {
     font-size: var(--canon-font-size-title2);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title3 {
     font-size: var(--canon-font-size-title3);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title4 {
     font-size: var(--canon-font-size-title4);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title5 {
     font-size: var(--canon-font-size-title5);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 }
diff --git a/packages/canon/src/components/Table/styles.css b/packages/canon/src/components/Table/styles.css
index bf3d8603e3..574fae67bf 100644
--- a/packages/canon/src/components/Table/styles.css
+++ b/packages/canon/src/components/Table/styles.css
@@ -18,7 +18,7 @@
 
 .table-header {
   tr {
-    /* border-bottom: 1px solid var(--canon-outline); */
+    /* border-bottom: 1px solid var(--canon-border); */
   }
 }