feature: improved css variables for button

receter · Sep 30, 2024 · 9ee341f · 9ee341f
1 parent 90d35ce
commit 9ee341f
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 64 deletions.
diff --git a/packages/ui/fixtures/Button.fixture.tsx b/packages/ui/fixtures/Button.fixture.tsx
@@ -1,7 +1,13 @@
 import { useRef } from "react";
 import { useFixtureSelect, useValue } from "react-cosmos/client";
 
-import { Button, ButtonA, classInlineIcon, Stack } from "../lib/main";
+import {
+  Button,
+  ButtonA,
+  classButtonGroup,
+  classInlineIcon,
+  Stack,
+} from "../lib/main";
 
 import SvgIconFocusLog from "./resources/icon-focus-log.svg?react";
 
@@ -22,8 +28,7 @@ export default function ButtonFixture() {
   return (
     <>
       <Stack>
-        <h1>Button</h1>
-        <div>{"<Button>"}</div>
+        <h2>Button</h2>
         <Button
           ref={refButton}
           onClick={() => {
@@ -38,7 +43,7 @@ export default function ButtonFixture() {
           {withIcon && <>&nbsp;</>}
           {label}
         </Button>
-        <div>{"<ButtonA>"}</div>
+        <h2>ButtonA</h2>
         <ButtonA
           href="https://github.com/receter/sys42"
           size={size === "default" ? undefined : size}
@@ -50,8 +55,26 @@ export default function ButtonFixture() {
           {withIcon && <>&nbsp;</>}
           {label}
         </ButtonA>
-        <div>
-          <a href="https://google.com">This is a link</a>
+        <h2>Button mania</h2>
+        <div className={classButtonGroup}>
+          <Button size="lg">Default</Button>
+          <Button size="lg" disabled>
+            Default
+          </Button>
+          <Button>Default</Button>
+          <Button disabled>Default</Button>
+        </div>
+        <div className={classButtonGroup}>
+          <Button variant="primary" size="lg">
+            Primary
+          </Button>
+          <Button variant="primary" size="lg" disabled>
+            Primary
+          </Button>
+          <Button variant="primary">Primary</Button>
+          <Button variant="primary" disabled>
+            Primary
+          </Button>
         </div>
       </Stack>
     </>

diff --git a/packages/ui/lib/Button/styles.module.css b/packages/ui/lib/Button/styles.module.css
@@ -6,7 +6,6 @@
   font-weight: var(--sys42-button-font-weight);
   line-height: var(--sys42-button-line-height);
   background: var(--sys42-button-background);
-  color: var(--sys42-button-color);
   padding: calc(
       var(--sys42-button-padding-horiz) - var(--sys42-button-border-width)
     )
@@ -16,10 +15,15 @@
   transition: var(--sys42-button-transition);
   display: inline-block;
   text-align: center;
-  text-decoration: none;
   cursor: pointer;
 }
 
+.button,
+a.button {
+  color: var(--sys42-button-color);
+  text-decoration: none;
+}
+
 .button:focus {
   outline: 0;
 }
@@ -31,61 +35,64 @@
 
 .button:hover {
   background: var(--sys42-button-background--hover);
-  box-shadow: var(--sys42-button-shadow--hover);
-  transition: var(--sys42-button-transition--hover);
   border-color: var(--sys42-button-border-color--hover);
+  box-shadow: var(--sys42-button-box-shadow--hover);
+  color: var(--sys42-button-color--hover);
+  transition: var(--sys42-button-transition--hover);
 }
 
 .button:active {
   background: var(--sys42-button-background--active);
-  transition: var(--sys42-button-transition--active);
   border-color: var(--sys42-button-border-color--active);
+  box-shadow: var(--sys42-button-box-shadow--active);
+  color: var(--sys42-button-color--active);
+  transition: var(--sys42-button-transition--active);
 }
 
 .button:disabled,
 .button[aria-disabled="true"] {
   background: var(--sys42-button-background--disabled);
-  color: var(--sys42-button-color--disabled);
   border-color: var(--sys42-button-border-color--disabled);
-  box-shadow: var(--sys42-button-shadow);
+  box-shadow: var(
+    --sys42-button-box-shadow
+  ); /* When disabled use the default button shadow */
+  color: var(--sys42-button-color--disabled);
   cursor: default;
 }
 
 .button_primary {
   background: var(--sys42-button_primary-background);
-  border: var(--sys42-button_primary-border-width) solid
-    var(--sys42-button_primary-border-color);
+  border-color: var(--sys42-button_primary-border-color);
   color: var(--sys42-button_primary-color);
-  font-weight: var(
-    --sys42-button_primary-font-weight,
-    var(--sys42-button-font-weight)
-  );
+  font-weight: var(--sys42-button_primary-font-weight);
 }
 
 .button_primary:hover {
   background: var(--sys42-button_primary-background--hover);
-  color: var(--sys42-button_primary-color--hover);
   border-color: var(--sys42-button_primary-border-color--hover);
+  color: var(--sys42-button_primary-color--hover);
 }
 
 .button_primary:active {
   background: var(--sys42-button_primary-background--active);
-  transition: var(--sys42-button_primary-transition--active);
   border-color: var(--sys42-button_primary-border-color--active);
+  color: var(--sys42-button_primary-color--active);
 }
 
 .button_primary:disabled,
 .button_primary[aria-disabled="true"] {
   background: var(--sys42-button_primary-background--disabled);
-  color: var(--sys42-button_primary-color--disabled);
   border-color: var(--sys42-button_primary-border-color--disabled);
+  color: var(--sys42-button_primary-color--disabled);
 }
 
 .button_lg {
   font-size: var(--sys42-button_lg-font-size);
   border-radius: var(--sys42-button_lg-border-radius);
-  padding: var(--sys42-button_lg-padding-horiz)
-    var(--sys42-button_lg-padding-vert);
+  padding: calc(
+      var(--sys42-button_lg-padding-horiz) - var(--sys42-button-border-width)
+    )
+    calc(var(--sys42-button_lg-padding-vert) - var(--sys42-button-border-width));
 }
 
 .button_fullWidth {

diff --git a/packages/ui/lib/default-custom-properties.css b/packages/ui/lib/default-custom-properties.css
@@ -18,68 +18,77 @@
   --sys42-border-radius-lg: 1rem;
 
   /* Button */
-  --sys42-button-background: #eee;
+  /* There is a bug with border-width in Firefox when values differ between normal and :hover */
+  --sys42-button-background: #dfe1f9;
+  --sys42-button-border-color: transparent;
   --sys42-button-border-width: 1px;
-  --sys42-button-border-color: #ddd;
-  --sys42-button-color: #333;
+  --sys42-button-color: #171b2c;
   --sys42-button-font-weight: normal;
   --sys42-button-font-size: 1rem;
   --sys42-button-line-height: inherit;
   --sys42-button-padding-horiz: 0.5rem;
   --sys42-button-padding-vert: 1rem;
   --sys42-button-border-radius: var(--sys42-border-radius-md);
-  --sys42-button-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --sys42-button-box-shadow: none;
   --sys42-button-transition: none;
 
+  /* :focus-visible */
+  --sys42-button-outline--focus-visible: 0.125rem solid #505b92;
+  --sys42-button-outline-offset--focus-visible: 0.125rem;
+
   /* :hover */
-  --sys42-button-background--hover: #eee;
-  --sys42-button-border-color--hover: #aaa;
-  --sys42-button-border-width--hover: var(--sys42-button-border-width);
-  --sys42-button-color--hover: #333;
-  --sys42-button-shadow--hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --sys42-button-background--hover: #d3d4ec;
+  --sys42-button-border-color--hover: var(--sys42-button-border-color);
+  --sys42-button-box-shadow--hover: 0px 1px 2px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --sys42-button-color--hover: var(--sys42-button-color);
   --sys42-button-transition--hover: background-color 0.15s ease-in-out,
     border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
   /* :active */
-  --sys42-button-background--active: #ddd;
-  --sys42-button-border-color--active: #aaa;
-  --sys42-button-border-width--active: var(--sys42-button-border-width);
-  --sys42-button-color--active: #333;
+  --sys42-button-background--active: var(--sys42-button-background--hover);
+  --sys42-button-border-color--active: var(--sys42-button-border-color--hover);
+  --sys42-button-box-shadow--active: none;
+  --sys42-button-color--active: var(--sys42-button-color--hover);
+  --sys42-button-transition--active: none;
+
   /* :disabled */
-  --sys42-button-background--disabled: #eee;
-  --sys42-button-border-color--disabled: #ddd;
-  --sys42-button-border-width--disabled: var(--sys42-button-border-width);
-  --sys42-button-color--disabled: #999;
-  /* :focus-visible */
-  --sys42-button-outline--focus-visible: 0.125rem solid #333;
-  --sys42-button-outline-offset--focus-visible: 0.125rem;
+  --sys42-button-background--disabled: rgba(29, 27, 32, 0.12);
+  --sys42-button-border-color--disabled: transparent;
+  --sys42-button-color--disabled: rgba(
+    from var(--sys42-button-color) r g b / 38%
+  );
 
   /* Button (primary) */
-  --sys42-button_primary-background: #333;
-  --sys42-button_primary-border-color: #333;
-  --sys42-button_primary-border-width: 0;
+  --sys42-button_primary-background: #505b92;
+  --sys42-button_primary-border-color: transparent;
   --sys42-button_primary-color: #fff;
   --sys42-button_primary-font-weight: normal;
+
   /* :hover */
-  --sys42-button_primary-background--hover: #444;
-  --sys42-button_primary-border-color--hover: #444;
-  --sys42-button_primary-border-width--hover: var(
-    --sys42-button_primary-border-width
-  );
-  --sys42-button_primary-color--hover: #fff;
+  --sys42-button_primary-background--hover: #5e689b;
+  --sys42-button_primary-border-color--hover: transparent;
+  --sys42-button_primary-color--hover: var(--sys42-button_primary-color);
+
   /* :active */
-  --sys42-button_primary-background--active: #333;
-  --sys42-button_primary-border-color--active: #333;
-  --sys42-button_primary-border-width--active: var(
-    --sys42-button_primary-border-width
+  --sys42-button_primary-background--active: var(
+    --sys42-button_primary-background--hover
+  );
+  --sys42-button_primary-border-color--active: var(
+    --sys42-button_primary-border-color--hover
   );
-  --sys42-button_primary-color--active: #fff;
+  --sys42-button_primary-color--active: var(
+    --sys42-button_primary-color--hover
+  );
+
   /* :disabled */
-  --sys42-button_primary-background--disabled: #aaa;
-  --sys42-button_primary-border-color--disabled: #aaa;
-  --sys42-button_primary-border-width--disabled: var(
-    --sys42-button_primary-border-width
+  --sys42-button_primary-background--disabled: var(
+    --sys42-button-background--disabled
+  );
+  --sys42-button_primary-border-color--disabled: var(
+    --sys42-button-border-color--disabled
   );
-  --sys42-button_primary-color--disabled: #eee;
+  --sys42-button_primary-color--disabled: var(--sys42-button-color--disabled);
 
   /* Button (size: lg) */
   --sys42-button_lg-font-size: var(--sys42-button-font-size);
@@ -108,7 +117,7 @@
 
   /* classCard */
   --sys42-card-background: #fff;
-  --sys42-card-border-radius: var(--sys42-border-radius-md);
+  --sys42-card-border-radius: var(--sys42-button-border-radius);
   --sys42-card-border-width: 1px;
   --sys42-card-border-color: #ddd;
   --sys42-card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

diff --git a/packages/ui/lib/helperClasses/buttonGroup/styles.module.css b/packages/ui/lib/helperClasses/buttonGroup/styles.module.css
@@ -1,5 +1,6 @@
 .buttonGroup {
   display: flex;
+  align-items: baseline;
   gap: 1rem;
 }