toggle-button styling

finos · Nov 8, 2024 · 742e190 · 742e190
1 parent b775f08
commit 742e190
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/vuu-ui/packages/vuu-theme/css/components/toggle-button.css b/vuu-ui/packages/vuu-theme/css/components/toggle-button.css
@@ -5,6 +5,22 @@
     gap: 0;
     height: var(--salt-size-base);
     padding: 0;
+
+
+    &[data-accented] {
+      --salt-actionable-secondary-background-active: var(
+        --salt-actionable-accented-background-active
+      );
+      border-color: var(--salt-container-secondary-borderColor);
+    }
+
+    &[data-variant="secondary"] {
+      --salt-actionable-secondary-background-active: var(
+        --salt-actionable-bold-background-active
+      );
+      --salt-container-primary-borderColor: transparent;
+    }
+
   }
 
   .saltToggleButtonGroup-horizontal .saltToggleButton {
@@ -31,19 +47,6 @@
     }
   }
 
-  [data-variant="primary"] {
-    --salt-actionable-secondary-background-active: var(
-      --salt-actionable-bold-background-active
-    );
-    border-color: var(--salt-container-secondary-borderColor);
-  }
-
-  [data-variant="secondary"] {
-    --salt-actionable-secondary-background-active: var(
-      --salt-actionable-bold-background-active
-    );
-    --salt-container-primary-borderColor: transparent;
-  }
 
   .vuuStateButtonGroup {
     .saltToggleButton {

diff --git a/vuu-ui/showcase/src/examples/salt/ToggleButton.examples.tsx b/vuu-ui/showcase/src/examples/salt/ToggleButton.examples.tsx
@@ -7,7 +7,8 @@ import "./ToggleButton.examples.css";
 let displaySequence = 1;
 
 interface ToggleButtonExampleProps {
-  "data-variant": ButtonProps["variant"];
+  "data-variant"?: ButtonProps["variant"];
+  "data-accented"?: boolean;
 }
 
 export const ButtonGroupWithTextOnly = (props: ToggleButtonExampleProps) => {
@@ -156,14 +157,14 @@ export const ToggleButtonGroupVariations = () => {
       <span />
       <ButtonGroupWithTextAndIcon data-variant="secondary" />
 
-      <span>CTA</span>
-      <ButtonGroupWithTextOnly data-variant="cta" />
+      <span>Accented</span>
+      <ButtonGroupWithTextOnly data-accented />
 
       <span />
-      <ButtonGroupWithIconOnly data-variant="cta" />
+      <ButtonGroupWithIconOnly data-accented />
 
       <span />
-      <ButtonGroupWithTextAndIcon data-variant="cta" />
+      <ButtonGroupWithTextAndIcon data-accented />
     </div>
   );
 };