From 85319ac8cfa393f62aa01b0cbc4ba82166e94db8 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sat, 12 Apr 2025 15:25:58 +0200
Subject: [PATCH] Build CSS

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/css/button.css     | 12 ++++-----
 packages/canon/css/components.css | 44 +++++++++++++++----------------
 packages/canon/css/iconbutton.css | 12 ++++-----
 packages/canon/css/link.css       | 12 ++++-----
 packages/canon/css/select.css     |  4 +--
 packages/canon/css/styles.css     | 44 +++++++++++++++----------------
 packages/canon/css/textfield.css  |  4 +--
 7 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/packages/canon/css/button.css b/packages/canon/css/button.css
index 312f58c5e6..ccfc3b48f5 100644
--- a/packages/canon/css/button.css
+++ b/packages/canon/css/button.css
@@ -16,7 +16,7 @@
   }
 }
 
-.canon-Button--variant-primary {
+.canon-Button[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -40,7 +40,7 @@
   }
 }
 
-.canon-Button--variant-secondary {
+.canon-Button[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -66,24 +66,24 @@
   }
 }
 
-.canon-Button--size-medium {
+.canon-Button[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   padding: 0 var(--canon-space-3);
   height: 40px;
 }
 
-.canon-Button--size-small {
+.canon-Button[data-size="small"] {
   font-size: var(--canon-font-size-3);
   padding: 0 var(--canon-space-2);
   height: 32px;
 }
 
-.canon-Button--size-small .canon-Button--icon {
+.canon-Button[data-size="small"] .canon-Button--icon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button--size-medium .canon-Button--icon {
+.canon-Button[data-size="medium"] .canon-Button--icon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index 9a276a3a0a..216f38c968 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -22,7 +22,7 @@
   }
 }
 
-.canon-Button--variant-primary {
+.canon-Button[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -46,7 +46,7 @@
   }
 }
 
-.canon-Button--variant-secondary {
+.canon-Button[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -72,24 +72,24 @@
   }
 }
 
-.canon-Button--size-medium {
+.canon-Button[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   padding: 0 var(--canon-space-3);
   height: 40px;
 }
 
-.canon-Button--size-small {
+.canon-Button[data-size="small"] {
   font-size: var(--canon-font-size-3);
   padding: 0 var(--canon-space-2);
   height: 32px;
 }
 
-.canon-Button--size-small .canon-Button--icon {
+.canon-Button[data-size="small"] .canon-Button--icon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button--size-medium .canon-Button--icon {
+.canon-Button[data-size="medium"] .canon-Button--icon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -348,7 +348,7 @@
   }
 }
 
-.canon-IconButton--variant-primary {
+.canon-IconButton[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -372,7 +372,7 @@
   }
 }
 
-.canon-IconButton--variant-secondary {
+.canon-IconButton[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -398,24 +398,24 @@
   }
 }
 
-.canon-IconButton--size-medium {
+.canon-IconButton[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   width: 40px;
   height: 40px;
 }
 
-.canon-IconButton--size-small {
+.canon-IconButton[data-size="small"] {
   font-size: var(--canon-font-size-3);
   width: 32px;
   height: 32px;
 }
 
-.canon-IconButton--size-small .canon-IconButton--icon {
+.canon-IconButton[data-size="small"] .canon-IconButton--icon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton--size-medium .canon-IconButton--icon {
+.canon-IconButton[data-size="medium"] .canon-IconButton--icon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -487,11 +487,11 @@
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input-size-small {
+.canon-TextField--input[data-size="small"] {
   height: 2rem;
 }
 
-.canon-TextField--input-size-medium {
+.canon-TextField--input[data-size="medium"] {
   height: 2.5rem;
 }
 
@@ -572,31 +572,31 @@
   }
 }
 
-.canon-Link--variant-body {
+.canon-Link[data-variant="body"] {
   font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
-.canon-Link--variant-subtitle {
+.canon-Link[data-variant="subtitle"] {
   font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
-.canon-Link--variant-caption {
+.canon-Link[data-variant="caption"] {
   font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
-.canon-Link--variant-label {
+.canon-Link[data-variant="label"] {
   font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
-.canon-Link--weight-regular {
+.canon-Link[data-weight="regular"] {
   font-weight: var(--canon-font-weight-regular);
 }
 
-.canon-Link--weight-bold {
+.canon-Link[data-weight="bold"] {
   font-weight: var(--canon-font-weight-bold);
 }
 
@@ -789,11 +789,11 @@
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger-size-small {
+.canon-Select--trigger[data-size="small"] {
   height: 2rem;
 }
 
-.canon-Select--trigger-size-medium {
+.canon-Select--trigger[data-size="medium"] {
   height: 3rem;
 }
 
diff --git a/packages/canon/css/iconbutton.css b/packages/canon/css/iconbutton.css
index 7853c59770..da38b40ba1 100644
--- a/packages/canon/css/iconbutton.css
+++ b/packages/canon/css/iconbutton.css
@@ -16,7 +16,7 @@
   }
 }
 
-.canon-IconButton--variant-primary {
+.canon-IconButton[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -40,7 +40,7 @@
   }
 }
 
-.canon-IconButton--variant-secondary {
+.canon-IconButton[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -66,24 +66,24 @@
   }
 }
 
-.canon-IconButton--size-medium {
+.canon-IconButton[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   width: 40px;
   height: 40px;
 }
 
-.canon-IconButton--size-small {
+.canon-IconButton[data-size="small"] {
   font-size: var(--canon-font-size-3);
   width: 32px;
   height: 32px;
 }
 
-.canon-IconButton--size-small .canon-IconButton--icon {
+.canon-IconButton[data-size="small"] .canon-IconButton--icon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton--size-medium .canon-IconButton--icon {
+.canon-IconButton[data-size="medium"] .canon-IconButton--icon {
   width: 1.5rem;
   height: 1.5rem;
 }
diff --git a/packages/canon/css/link.css b/packages/canon/css/link.css
index ddc47c5d04..535beb3d9f 100644
--- a/packages/canon/css/link.css
+++ b/packages/canon/css/link.css
@@ -16,30 +16,30 @@
   }
 }
 
-.canon-Link--variant-body {
+.canon-Link[data-variant="body"] {
   font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
-.canon-Link--variant-subtitle {
+.canon-Link[data-variant="subtitle"] {
   font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
-.canon-Link--variant-caption {
+.canon-Link[data-variant="caption"] {
   font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
-.canon-Link--variant-label {
+.canon-Link[data-variant="label"] {
   font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
-.canon-Link--weight-regular {
+.canon-Link[data-weight="regular"] {
   font-weight: var(--canon-font-weight-regular);
 }
 
-.canon-Link--weight-bold {
+.canon-Link[data-weight="bold"] {
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/css/select.css b/packages/canon/css/select.css
index 29494c634a..3c37952afd 100644
--- a/packages/canon/css/select.css
+++ b/packages/canon/css/select.css
@@ -74,11 +74,11 @@
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger-size-small {
+.canon-Select--trigger[data-size="small"] {
   height: 2rem;
 }
 
-.canon-Select--trigger-size-medium {
+.canon-Select--trigger[data-size="medium"] {
   height: 3rem;
 }
 
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index d3e61ff556..e4375692f9 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9246,7 +9246,7 @@
   }
 }
 
-.canon-Button--variant-primary {
+.canon-Button[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -9270,7 +9270,7 @@
   }
 }
 
-.canon-Button--variant-secondary {
+.canon-Button[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -9296,24 +9296,24 @@
   }
 }
 
-.canon-Button--size-medium {
+.canon-Button[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   padding: 0 var(--canon-space-3);
   height: 40px;
 }
 
-.canon-Button--size-small {
+.canon-Button[data-size="small"] {
   font-size: var(--canon-font-size-3);
   padding: 0 var(--canon-space-2);
   height: 32px;
 }
 
-.canon-Button--size-small .canon-Button--icon {
+.canon-Button[data-size="small"] .canon-Button--icon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-Button--size-medium .canon-Button--icon {
+.canon-Button[data-size="medium"] .canon-Button--icon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -9572,7 +9572,7 @@
   }
 }
 
-.canon-IconButton--variant-primary {
+.canon-IconButton[data-variant="primary"] {
   background-color: var(--canon-bg-solid);
   color: var(--canon-fg-solid);
   transition: background-color .15s, box-shadow .15s;
@@ -9596,7 +9596,7 @@
   }
 }
 
-.canon-IconButton--variant-secondary {
+.canon-IconButton[data-variant="secondary"] {
   background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
@@ -9622,24 +9622,24 @@
   }
 }
 
-.canon-IconButton--size-medium {
+.canon-IconButton[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   width: 40px;
   height: 40px;
 }
 
-.canon-IconButton--size-small {
+.canon-IconButton[data-size="small"] {
   font-size: var(--canon-font-size-3);
   width: 32px;
   height: 32px;
 }
 
-.canon-IconButton--size-small .canon-IconButton--icon {
+.canon-IconButton[data-size="small"] .canon-IconButton--icon {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-IconButton--size-medium .canon-IconButton--icon {
+.canon-IconButton[data-size="medium"] .canon-IconButton--icon {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -9711,11 +9711,11 @@
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input-size-small {
+.canon-TextField--input[data-size="small"] {
   height: 2rem;
 }
 
-.canon-TextField--input-size-medium {
+.canon-TextField--input[data-size="medium"] {
   height: 2.5rem;
 }
 
@@ -9796,31 +9796,31 @@
   }
 }
 
-.canon-Link--variant-body {
+.canon-Link[data-variant="body"] {
   font-size: var(--canon-font-size-3);
   line-height: 140%;
 }
 
-.canon-Link--variant-subtitle {
+.canon-Link[data-variant="subtitle"] {
   font-size: var(--canon-font-size-4);
   line-height: 140%;
 }
 
-.canon-Link--variant-caption {
+.canon-Link[data-variant="caption"] {
   font-size: var(--canon-font-size-2);
   line-height: 140%;
 }
 
-.canon-Link--variant-label {
+.canon-Link[data-variant="label"] {
   font-size: var(--canon-font-size-1);
   line-height: 140%;
 }
 
-.canon-Link--weight-regular {
+.canon-Link[data-weight="regular"] {
   font-weight: var(--canon-font-weight-regular);
 }
 
-.canon-Link--weight-bold {
+.canon-Link[data-weight="bold"] {
   font-weight: var(--canon-font-weight-bold);
 }
 
@@ -10013,11 +10013,11 @@
   color: var(--canon-fg-disabled);
 }
 
-.canon-Select--trigger-size-small {
+.canon-Select--trigger[data-size="small"] {
   height: 2rem;
 }
 
-.canon-Select--trigger-size-medium {
+.canon-Select--trigger[data-size="medium"] {
   height: 3rem;
 }
 
diff --git a/packages/canon/css/textfield.css b/packages/canon/css/textfield.css
index a542690580..eb43b1f77f 100644
--- a/packages/canon/css/textfield.css
+++ b/packages/canon/css/textfield.css
@@ -65,11 +65,11 @@
   border: 1px solid var(--canon-border-disabled);
 }
 
-.canon-TextField--input-size-small {
+.canon-TextField--input[data-size="small"] {
   height: 2rem;
 }
 
-.canon-TextField--input-size-medium {
+.canon-TextField--input[data-size="medium"] {
   height: 2.5rem;
 }