@byline/ui 1.10.2 → 1.10.3

package/src/components/button/button.module.css

@@ -11,7 +11,7 @@
 
 @layer byline-components {
   .button,
-  :global(.infonomic-button) {
+  :global(.byline-button) {
     border: none;
     cursor: pointer;
     font-weight: normal;
@@ -32,27 +32,27 @@
 
   .button:disabled,
   .button[disabled],
-  :global(.infonomic-button):disabled,
-  :global(.infonomic-button)[disabled] {
+  :global(.byline-button):disabled,
+  :global(.byline-button)[disabled] {
     pointer-events: none;
   }
 
   .button:focus,
   .button:active,
-  :global(.infonomic-button):focus,
-  :global(.infonomic-button):active {
+  :global(.byline-button):focus,
+  :global(.byline-button):active {
     outline-color: var(--ring-color);
   }
 
   .button.square,
-  :global(.infonomic-button-square) {
+  :global(.byline-button-square) {
     aspect-ratio: 1 / 1;
     padding: 0;
     border-radius: var(--border-radius-sm);
   }
 
   .button.round,
-  :global(.infonomic-button-round) {
+  :global(.byline-button-round) {
     aspect-ratio: 1 / 1;
     padding: 0;
     border-radius: var(--border-radius-full);
@@ -60,35 +60,35 @@
 
   /* Sizes */
   .xs,
-  :global(.infonomic-button-xs) {
+  :global(.byline-button-xs) {
     min-height: 26px;
     font-size: 0.7rem;
     padding: 0.2rem 0.4rem;
   }
 
   .sm,
-  :global(.infonomic-button-sm) {
+  :global(.byline-button-sm) {
     min-height: 32px;
     font-size: 0.775rem;
     padding: 0.25rem 0.5rem;
   }
 
   .md,
-  :global(.infonomic-button-md) {
+  :global(.byline-button-md) {
     min-height: 38px;
     font-size: 0.95rem;
     padding: 0.625rem 1.25rem;
   }
 
   .lg,
-  :global(.infonomic-button-lg) {
+  :global(.byline-button-lg) {
     min-height: 46px;
     font-size: 1.1rem;
     padding: 0.75rem 1.5rem;
   }
 
   .xl,
-  :global(.infonomic-button-xl) {
+  :global(.byline-button-xl) {
     min-height: 54px;
     font-size: 1.2rem;
     padding: 0.75rem 1.5rem;
@@ -96,34 +96,37 @@
 
   /* Variants - Consuming Variables */
   .filled,
-  :global(.infonomic-button-filled) {
+  :global(.byline-button-filled) {
     color: var(--button-variant-filled-foreground);
     background-color: var(--button-variant-filled);
   }
 
   .filled:hover,
-  :global(.infonomic-button-filled):hover {
+  :global(.byline-button-filled):hover {
     background-color: var(--button-variant-filled-hover);
   }
 
   .filled:focus,
   .filled:active,
-  :global(.infonomic-button-filled):focus,
-  :global(.infonomic-button-filled):active {
+  :global(.byline-button-filled):focus,
+  :global(.byline-button-filled):active {
     --ring-color: var(--button-ring-color);
   }
 
   .filled:disabled,
   .filled[disabled],
-  :global(.infonomic-button-filled):disabled,
-  :global(.infonomic-button-filled)[disabled] {
+  :global(.byline-button-filled):disabled,
+  :global(.byline-button-filled)[disabled] {
     background-color: var(
       --button-variant-filled-disabled,
       oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
     );
     color: var(
       --button-variant-filled-foreground-disabled,
-      oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
+      oklch(
+        from var(--button-variant-filled-foreground) calc(l * 0.9)
+          calc(c * 0.85) h
+      )
     );
   }
 
@@ -131,39 +134,44 @@
   /* Weak variant for close button on selected button */
 
   .filled-weak,
-  :global(.infonomic-button-filled-weak) {
+  :global(.byline-button-filled-weak) {
     color: var(--button-variant-filled-weak-foreground);
     background-color: var(--button-variant-filled-weak);
   }
 
   .filled-weak:hover,
-  :global(.infonomic-button-filled-weak):hover {
+  :global(.byline-button-filled-weak):hover {
     background-color: var(--button-variant-filled-weak-hover);
   }
 
   .filled-weak:focus,
   .filled-weak:active,
-  :global(.infonomic-button-filled-weak):focus,
-  :global(.infonomic-button-filled-weak):active {
+  :global(.byline-button-filled-weak):focus,
+  :global(.byline-button-filled-weak):active {
     --ring-color: var(--button-ring-color);
   }
 
   .filled-weak:disabled,
   .filled-weak[disabled],
-  :global(.infonomic-button-filled-weak):disabled,
-  :global(.infonomic-button-filled-weak)[disabled] {
+  :global(.byline-button-filled-weak):disabled,
+  :global(.byline-button-filled-weak)[disabled] {
     background-color: var(
       --button-variant-filled-weak-disabled,
-      oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
+      oklch(
+        from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h
+      )
     );
     color: var(
       --button-variant-filled-weak-foreground-disabled,
-      oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
+      oklch(
+        from var(--button-variant-filled-weak-foreground) calc(l * 0.9)
+          calc(c * 0.85) h
+      )
     );
   }
 
   .outlined,
-  :global(.infonomic-button-outlined) {
+  :global(.byline-button-outlined) {
     border: 1px solid var(--button-variant-outlined-border);
     color: var(--button-variant-outlined-foreground);
     background-color: var(--button-variant-outlined);
@@ -171,32 +179,37 @@
 
   .outlined:disabled,
   .outlined[disabled],
-  :global(.infonomic-button-outlined):disabled,
-  :global(.infonomic-button-outlined)[disabled] {
+  :global(.byline-button-outlined):disabled,
+  :global(.byline-button-outlined)[disabled] {
     border-color: var(
       --button-variant-outlined-border-disabled,
-      oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
+      oklch(
+        from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h
+      )
     );
     color: var(
       --button-variant-outlined-foreground-disabled,
-      oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
+      oklch(
+        from var(--button-variant-outlined-foreground) calc(l * 1.1)
+          calc(c * 0.7) h
+      )
     );
   }
 
   .outlined:hover,
-  :global(.infonomic-button-outlined):hover {
+  :global(.byline-button-outlined):hover {
     background-color: var(--button-variant-outlined-hover);
   }
 
   .outlined:focus,
   .outlined:active,
-  :global(.infonomic-button-outlined):focus,
-  :global(.infonomic-button-outlined):active {
+  :global(.byline-button-outlined):focus,
+  :global(.byline-button-outlined):active {
     --ring-color: var(--button-ring-color);
   }
 
   .gradient,
-  :global(.infonomic-button-gradient) {
+  :global(.byline-button-gradient) {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(
       45deg,
@@ -207,21 +220,26 @@
 
   .gradient:disabled,
   .gradient[disabled],
-  :global(.infonomic-button-gradient):disabled,
-  :global(.infonomic-button-gradient)[disabled] {
+  :global(.byline-button-gradient):disabled,
+  :global(.byline-button-gradient)[disabled] {
     background: unset;
     background-color: var(
       --button-variant-gradient-disabled,
-      oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h)
+      oklch(
+        from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h
+      )
     );
     color: var(
       --button-variant-gradient-foreground-disabled,
-      oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h)
+      oklch(
+        from var(--button-variant-gradient-foreground) calc(l * 0.9)
+          calc(c * 0.85) h
+      )
     );
   }
 
   .gradient:hover,
-  :global(.infonomic-button-gradient):hover {
+  :global(.byline-button-gradient):hover {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(
       45deg,
@@ -232,39 +250,41 @@
 
   .gradient:focus,
   .gradient:active,
-  :global(.infonomic-button-gradient):focus,
-  :global(.infonomic-button-gradient):active {
+  :global(.byline-button-gradient):focus,
+  :global(.byline-button-gradient):active {
     --ring-color: var(--button-ring-color);
   }
 
   .text,
-  :global(.infonomic-button-text) {
+  :global(.byline-button-text) {
     background-color: var(--button-variant-text);
     color: var(--button-variant-text-foreground);
   }
 
   .text:disabled,
   .text[disabled],
-  :global(.infonomic-button-text):disabled,
-  :global(.infonomic-button-text)[disabled] {
-    color: oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
+  :global(.byline-button-text):disabled,
+  :global(.byline-button-text)[disabled] {
+    color: oklch(
+      from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h
+    );
   }
 
   .text:hover,
-  :global(.infonomic-button-text):hover {
+  :global(.byline-button-text):hover {
     background-color: var(--button-variant-text-hover);
   }
 
   .text:focus,
   .text:active,
-  :global(.infonomic-button-text):focus,
-  :global(.infonomic-button-text):active {
+  :global(.byline-button-text):focus,
+  :global(.byline-button-text):active {
     --ring-color: var(--button-ring-color);
   }
 
   /* Intents - Defining Variables */
   .primary,
-  :global(.infonomic-button-primary) {
+  :global(.byline-button-primary) {
     --button-ring-color: var(--ring-primary);
 
     /* Filled */
@@ -272,14 +292,18 @@
     --button-variant-filled-hover: var(--fill-primary-strong-hover);
     --button-variant-filled-disabled: var(--fill-primary-strong-disabled);
     --button-variant-filled-foreground: var(--text-on-primary-strong);
-    --button-variant-filled-foreground-disabled: var(--text-on-primary-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(
+      --text-on-primary-strong-disabled
+    );
 
     /* Filled Weak */
     --button-variant-filled-weak: var(--fill-primary-weak);
     --button-variant-filled-weak-hover: var(--fill-primary-weak-hover);
     --button-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
     --button-variant-filled-weak-foreground: var(--text-on-primary-weak);
-    --button-variant-filled-weak-foreground-disabled: var(--text-on-primary-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(
+      --text-on-primary-weak-disabled
+    );
 
     /* Outlined */
     --button-variant-outlined: var(--fill-primary-outlined);
@@ -287,7 +311,9 @@
     --button-variant-outlined-border: var(--stroke-primary);
     --button-variant-outlined-border-disabled: var(--stroke-primary-disabled);
     --button-variant-outlined-foreground: var(--text-on-primary-outlined);
-    --button-variant-outlined-foreground-disabled: var(--text-on-primary-outlined-disabled);
+    --button-variant-outlined-foreground-disabled: var(
+      --text-on-primary-outlined-disabled
+    );
 
     /* Text */
     --button-variant-text: var(--fill-primary-text);
@@ -299,11 +325,13 @@
     --button-variant-gradient-end: var(--gradient-primary-end);
     --button-variant-gradient-foreground: var(--gradient-primary-foreground);
     --button-variant-gradient-disabled: var(--gradient-primary-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-primary-strong-disabled);
+    --button-variant-gradient-foreground-disabled: var(
+      --text-on-primary-strong-disabled
+    );
   }
 
   .secondary,
-  :global(.infonomic-button-secondary) {
+  :global(.byline-button-secondary) {
     --button-ring-color: var(--ring-secondary);
 
     /* Filled */
@@ -311,14 +339,18 @@
     --button-variant-filled-hover: var(--fill-secondary-strong-hover);
     --button-variant-filled-disabled: var(--fill-secondary-strong-disabled);
     --button-variant-filled-foreground: var(--text-on-secondary-strong);
-    --button-variant-filled-foreground-disabled: var(--text-on-secondary-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(
+      --text-on-secondary-strong-disabled
+    );
 
     /* Filled Weak */
     --button-variant-filled-weak: var(--fill-secondary-weak);
     --button-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
     --button-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
     --button-variant-filled-weak-foreground: var(--text-on-secondary-weak);
-    --button-variant-filled-weak-foreground-disabled: var(--text-on-secondary-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(
+      --text-on-secondary-weak-disabled
+    );
 
     /* Outlined */
     --button-variant-outlined: var(--fill-secondary-outlined);
@@ -326,7 +358,9 @@
     --button-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
     --button-variant-outlined-hover: var(--fill-secondary-outlined-hover);
     --button-variant-outlined-foreground: var(--text-on-secondary-outlined);
-    --button-variant-outlined-foreground-disabled: var(--text-on-secondary-outlined-disabled);
+    --button-variant-outlined-foreground-disabled: var(
+      --text-on-secondary-outlined-disabled
+    );
 
     /* Text */
     --button-variant-text: var(--fill-secondary-text);
@@ -338,11 +372,13 @@
     --button-variant-gradient-end: var(--gradient-secondary-end);
     --button-variant-gradient-foreground: var(--gradient-secondary-foreground);
     --button-variant-gradient-disabled: var(--gradient-secondary-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-secondary-strong-disabled);
+    --button-variant-gradient-foreground-disabled: var(
+      --text-on-secondary-strong-disabled
+    );
   }
 
   .noeffect,
-  :global(.infonomic-button-noeffect) {
+  :global(.byline-button-noeffect) {
     --button-ring-color: var(--ring-noeffect);
 
     /* Filled */
@@ -350,14 +386,18 @@
     --button-variant-filled-hover: var(--fill-noeffect-strong-hover);
     --button-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
     --button-variant-filled-foreground: var(--text-on-noeffect-strong);
-    --button-variant-filled-foreground-disabled: var(--text-on-noeffect-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(
+      --text-on-noeffect-strong-disabled
+    );
 
     /* Filled Weak */
     --button-variant-filled-weak: var(--fill-noeffect-weak);
     --button-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
     --button-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
     --button-variant-filled-weak-foreground: var(--text-on-noeffect-weak);
-    --button-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(
+      --text-on-noeffect-weak-disabled
+    );
 
     /* Outlined */
     --button-variant-outlined: var(--fill-noeffect-outlined);
@@ -366,7 +406,9 @@
     --button-variant-outlined-border: var(--stroke-noeffect);
     --button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
     --button-variant-outlined-foreground: var(--text-on-noeffect-outlined);
-    --button-variant-outlined-foreground-disabled: var(--text-on-noeffect-outlined-disabled);
+    --button-variant-outlined-foreground-disabled: var(
+      --text-on-noeffect-outlined-disabled
+    );
 
     /* Text */
     --button-variant-text: var(--fill-noeffect-text);
@@ -378,11 +420,13 @@
     --button-variant-gradient-end: var(--gradient-noeffect-end);
     --button-variant-gradient-foreground: var(--gradient-noeffect-foreground);
     --button-variant-gradient-disabled: var(--gradient-noeffect-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-strong-disabled);
+    --button-variant-gradient-foreground-disabled: var(
+      --text-on-noeffect-strong-disabled
+    );
   }
 
   .success,
-  :global(.infonomic-button-success) {
+  :global(.byline-button-success) {
     --button-ring-color: var(--ring-success);
 
     /* Filled */
@@ -390,14 +434,18 @@
     --button-variant-filled-hover: var(--fill-success-strong-hover);
     --button-variant-filled-disabled: var(--fill-success-strong-disabled);
     --button-variant-filled-foreground: var(--text-on-success-strong);
-    --button-variant-filled-foreground-disabled: var(--text-on-success-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(
+      --text-on-success-strong-disabled
+    );
 
     /* Filled Weak */
     --button-variant-filled-weak: var(--fill-success-weak);
     --button-variant-filled-weak-hover: var(--fill-success-weak-hover);
     --button-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
     --button-variant-filled-weak-foreground: var(--text-on-success-weak);
-    --button-variant-filled-weak-foreground-disabled: var(--text-on-success-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(
+      --text-on-success-weak-disabled
+    );
 
     /* Outlined */
     --button-variant-outlined: var(--fill-success-outlined);
@@ -405,7 +453,9 @@
     --button-variant-outlined-border: var(--stroke-success);
     --button-variant-outlined-border-disabled: var(--stroke-success-disabled);
     --button-variant-outlined-foreground: var(--text-on-success-outlined);
-    --button-variant-outlined-foreground-disabled: var(--text-on-success-outlined-disabled);
+    --button-variant-outlined-foreground-disabled: var(
+      --text-on-success-outlined-disabled
+    );
 
     /* Text */
     --button-variant-text: transparent;
@@ -417,11 +467,13 @@
     --button-variant-gradient-end: var(--gradient-success-end);
     --button-variant-gradient-foreground: var(--gradient-success-foreground);
     --button-variant-gradient-disabled: var(--gradient-success-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-success-strong-disabled);
+    --button-variant-gradient-foreground-disabled: var(
+      --text-on-success-strong-disabled
+    );
   }
 
   .info,
-  :global(.infonomic-button-info) {
+  :global(.byline-button-info) {
     --button-ring-color: var(--ring-info);
 
     /* Filled */
@@ -429,14 +481,18 @@
     --button-variant-filled-hover: var(--fill-info-strong-hover);
     --button-variant-filled-disabled: var(--fill-info-strong-disabled);
     --button-variant-filled-foreground: var(--text-on-info-strong);
-    --button-variant-filled-foreground-disabled: var(--text-on-info-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(
+      --text-on-info-strong-disabled
+    );
 
     /* Filled Weak */
     --button-variant-filled-weak: var(--fill-info-weak);
     --button-variant-filled-weak-hover: var(--fill-info-weak-hover);
     --button-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
     --button-variant-filled-weak-foreground: var(--text-on-info-weak);
-    --button-variant-filled-weak-foreground-disabled: var(--text-on-info-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(
+      --text-on-info-weak-disabled
+    );
 
     /* Outlined */
     --button-variant-outlined: transparent;
@@ -444,7 +500,9 @@
     --button-variant-outlined-border: var(--stroke-info);
     --button-variant-outlined-border-disabled: var(--stroke-info-disabled);
     --button-variant-outlined-foreground: var(--text-on-info-outlined);
-    --button-variant-outlined-foreground-disabled: var(--text-on-info-outlined-disabled);
+    --button-variant-outlined-foreground-disabled: var(
+      --text-on-info-outlined-disabled
+    );
 
     /* Text */
     --button-variant-text: transparent;
@@ -456,11 +514,13 @@
     --button-variant-gradient-end: var(--gradient-info-end);
     --button-variant-gradient-foreground: var(--gradient-info-foreground);
     --button-variant-gradient-disabled: var(--gradient-info-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-info-strong-disabled);
+    --button-variant-gradient-foreground-disabled: var(
+      --text-on-info-strong-disabled
+    );
   }
 
   .warning,
-  :global(.infonomic-button-warning) {
+  :global(.byline-button-warning) {
     --button-ring-color: var(--ring-warning);
 
     /* Filled */
@@ -468,14 +528,18 @@
     --button-variant-filled-hover: var(--fill-warning-strong-hover);
     --button-variant-filled-disabled: var(--fill-warning-strong-disabled);
     --button-variant-filled-foreground: var(--text-on-warning-strong);
-    --button-variant-filled-foreground-disabled: var(--text-on-warning-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(
+      --text-on-warning-strong-disabled
+    );
 
     /* Filled Weak */
     --button-variant-filled-weak: var(--fill-warning-weak);
     --button-variant-filled-weak-hover: var(--fill-warning-weak-hover);
     --button-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
     --button-variant-filled-weak-foreground: var(--text-on-warning-weak);
-    --button-variant-filled-weak-foreground-disabled: var(--text-on-warning-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(
+      --text-on-warning-weak-disabled
+    );
 
     /* Outlined */
     --button-variant-outlined: var(--fill-warning-outlined);
@@ -483,7 +547,9 @@
     --button-variant-outlined-border: var(--stroke-warning);
     --button-variant-outlined-border-disabled: var(--stroke-warning-disabled);
     --button-variant-outlined-foreground: var(--text-on-warning-outlined);
-    --button-variant-outlined-foreground-disabled: var(--text-on-warning-outlined-disabled);
+    --button-variant-outlined-foreground-disabled: var(
+      --text-on-warning-outlined-disabled
+    );
 
     /* Text */
     --button-variant-text: transparent;
@@ -495,11 +561,13 @@
     --button-variant-gradient-end: var(--gradient-warning-end);
     --button-variant-gradient-foreground: var(--gradient-warning-foreground);
     --button-variant-gradient-disabled: var(--gradient-warning-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-warning-strong-disabled);
+    --button-variant-gradient-foreground-disabled: var(
+      --text-on-warning-strong-disabled
+    );
   }
 
   .danger,
-  :global(.infonomic-button-danger) {
+  :global(.byline-button-danger) {
     --button-ring-color: var(--ring-danger);
 
     /* Filled */
@@ -507,14 +575,18 @@
     --button-variant-filled-hover: var(--fill-danger-strong-hover);
     --button-variant-filled-disabled: var(--fill-danger-strong-disabled);
     --button-variant-filled-foreground: var(--text-on-danger-strong);
-    --button-variant-filled-foreground-disabled: var(--text-on-danger-strong-disabled);
+    --button-variant-filled-foreground-disabled: var(
+      --text-on-danger-strong-disabled
+    );
 
     /* Filled Weak */
     --button-variant-filled-weak: var(--fill-danger-weak);
     --button-variant-filled-weak-hover: var(--fill-danger-weak-hover);
     --button-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
     --button-variant-filled-weak-foreground: var(--text-on-danger-weak);
-    --button-variant-filled-weak-foreground-disabled: var(--text-on-danger-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(
+      --text-on-danger-weak-disabled
+    );
 
     /* Outlined */
     --button-variant-outlined: transparent;
@@ -522,7 +594,9 @@
     --button-variant-outlined-border: var(--stroke-danger);
     --button-variant-outlined-border-disabled: var(--stroke-danger-disabled);
     --button-variant-outlined-foreground: var(--text-on-danger-outlined);
-    --button-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
+    --button-variant-outlined-foreground-disabled: var(
+      --text-on-danger-outlined-disabled
+    );
 
     /* Text */
     --button-variant-text: transparent;
@@ -534,12 +608,14 @@
     --button-variant-gradient-end: var(--gradient-danger-end);
     --button-variant-gradient-foreground: var(--gradient-danger-foreground);
     --button-variant-gradient-disabled: var(--gradient-danger-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-danger-strong-disabled);
+    --button-variant-gradient-foreground-disabled: var(
+      --text-on-danger-strong-disabled
+    );
   }
 
   /* Full width */
   .fullWidth,
-  :global(.infonomic-button-full-width) {
+  :global(.byline-button-full-width) {
     width: 100%;
     display: flex;
   }

package/src/components/button/button.tsx

@@ -38,10 +38,10 @@ export const Button = ({
   const defaultProps: Record<string, unknown> = {
     type,
     className: cx(
-      'infonomic-button',
-      `infonomic-button-${intent}`,
-      `infonomic-button-${variant}`,
-      `infonomic-button-${size}`,
+      'byline-button',
+      `byline-button-${intent}`,
+      `byline-button-${variant}`,
+      `byline-button-${size}`,
       styles.button,
       styles[variant],
       styles[size],