From df4e29216b8ee6d9db8bd1ea747d3d8367a54473 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sat, 12 Apr 2025 12:14:50 +0200
Subject: [PATCH] Move Heading to data props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/neat-ducks-wish.md                     |  5 +++++
 packages/canon/css/components.css                 | 12 ++++++------
 packages/canon/css/heading.css                    | 12 ++++++------
 packages/canon/css/styles.css                     | 12 ++++++------
 packages/canon/src/components/Heading/Heading.tsx |  7 ++-----
 packages/canon/src/components/Heading/styles.css  | 12 ++++++------
 6 files changed, 31 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/neat-ducks-wish.md

diff --git a/.changeset/neat-ducks-wish.md b/.changeset/neat-ducks-wish.md
new file mode 100644
index 0000000000..2568e438c9
--- /dev/null
+++ b/.changeset/neat-ducks-wish.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+Improve class name structure using data attributes instead of class names.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index 8cebf1937b..9a276a3a0a 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -300,32 +300,32 @@
   line-height: 100%;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant="display"] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant="title1"] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant="title2"] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant="title3"] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant="title4"] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant="title5"] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/css/heading.css b/packages/canon/css/heading.css
index 615e7a6e8b..f1bea873b4 100644
--- a/packages/canon/css/heading.css
+++ b/packages/canon/css/heading.css
@@ -6,32 +6,32 @@
   line-height: 100%;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant="display"] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant="title1"] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant="title2"] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant="title3"] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant="title4"] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant="title5"] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index fd9e19a392..d3e61ff556 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9524,32 +9524,32 @@
   line-height: 100%;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant="display"] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant="title1"] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant="title2"] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant="title3"] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant="title4"] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant="title5"] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index 5fe69bbc57..994b1de06e 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -45,11 +45,8 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
     return (
       <Component
         ref={ref}
-        className={clsx(
-          'canon-Heading',
-          responsiveVariant && `canon-Heading--variant-${responsiveVariant}`,
-          className,
-        )}
+        className={clsx('canon-Heading', className)}
+        data-variant={responsiveVariant}
         {...restProps}
       >
         {children}
diff --git a/packages/canon/src/components/Heading/styles.css b/packages/canon/src/components/Heading/styles.css
index 2db11d7eb2..c85bbca135 100644
--- a/packages/canon/src/components/Heading/styles.css
+++ b/packages/canon/src/components/Heading/styles.css
@@ -22,32 +22,32 @@
   margin: 0;
 }
 
-.canon-Heading--variant-display {
+.canon-Heading[data-variant='display'] {
   font-size: var(--canon-font-size-10);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title1 {
+.canon-Heading[data-variant='title1'] {
   font-size: var(--canon-font-size-9);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title2 {
+.canon-Heading[data-variant='title2'] {
   font-size: var(--canon-font-size-8);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title3 {
+.canon-Heading[data-variant='title3'] {
   font-size: var(--canon-font-size-7);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title4 {
+.canon-Heading[data-variant='title4'] {
   font-size: var(--canon-font-size-title4);
   font-weight: var(--canon-font-weight-bold);
 }
 
-.canon-Heading--variant-title5 {
+.canon-Heading[data-variant='title5'] {
   font-size: var(--canon-font-size-5);
   font-weight: var(--canon-font-weight-bold);
 }