- Buttons are now round. (#583)

StenaIT · Sep 5, 2023 · a601179 · a601179
1 parent eb073bc
commit a601179
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 37 deletions.
diff --git a/packages/elements/src/components/ui/buttons/Button.module.css b/packages/elements/src/components/ui/buttons/Button.module.css
@@ -6,8 +6,8 @@
   --swui-button-text-color: var(--swui-white);
   --swui-button-text-decoration: none;
   --swui-button-letter-spacing: var(--swui-field-letter-spacing);
-  --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px);
-  --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px);
+  --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 3px);
+  --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 3 - 1px);
 
   /* Text */
   --swui-button-text-color-focus: var(--swui-button-text-color);
@@ -30,10 +30,12 @@
   /* Icon */
   --swui-button-icon-height-small: 1.2rem;
   --swui-button-icon-height-small-icon-only: 1.2rem;
-  --swui-button-icon-height-medium: 1.6rem;
-  --swui-button-icon-height-medium-icon-only: 1.6rem;
-  --swui-button-icon-height-large: 1.6rem;
-  --swui-button-icon-height-large-icon-only: 2.4rem;
+  --swui-button-icon-height-medium: 2rem;
+  --swui-button-icon-height-medium-icon-only: 2rem;
+  --swui-button-icon-height-large: 2rem;
+  --swui-button-icon-height-large-icon-only: 2rem;
+  --swui-button-icon-height-larger: 2rem;
+  --swui-button-icon-height-larger-icon-only: 2.4rem;
 
   --swui-button-icon-color: var(--swui-white);
   --swui-button-icon-color-focus: var(--swui-button-icon-color);
@@ -57,7 +59,8 @@
   --swui-button-icon-only-size-small: 24px;
   --swui-button-icon-only-size-medium: 32px;
   --swui-button-icon-only-size-large: 40px;
-  --swui-button-border-radius-icon-only: var(--swui-border-radius);
+  --swui-button-icon-only-size-larger: 72px;
+  --swui-button-border-radius-icon-only: 9999px;
 
   /* Background */
   --swui-button-background-color: var(--swui-primary-action-color);
@@ -82,7 +85,7 @@
 
   /* Border */
   --swui-button-border-color: var(--swui-button-background-color);
-  --swui-button-border-radius: var(--swui-border-radius);
+  --swui-button-border-radius: 9999px;
   --swui-button-border-color-focus: var(--swui-button-background-color-focus);
   --swui-button-border-color-hover: var(--swui-button-background-color-hover);
   --swui-button-border-color-active: var(--swui-button-background-color-active);
@@ -175,6 +178,11 @@
       width: var(--swui-button-icon-only-size-large);
       height: var(--swui-button-icon-only-size-large);
     }
+
+    &.larger {
+      width: var(--swui-button-icon-only-size-larger);
+      height: var(--swui-button-icon-only-size-larger);
+    }
   }
 
   /*
@@ -195,16 +203,33 @@
 
   &.large {
     --current-line-height: 2.4rem;
-    --swui-button-padding-vertical: calc(var(--swui-metrics-space) - 1px);
+    --swui-button-padding-vertical: calc(var(--swui-metrics-space) * 2 - 4px);
     --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px);
-    --current-text-size: 1.6rem;
+    --current-text-size: 1.8rem;
     --current-icon-height: var(--swui-button-icon-height-large);
 
     &.iconButton {
       --current-icon-height: var(--swui-button-icon-height-large-icon-only);
     }
   }
 
+  &.larger {
+    --swui-button-padding-vertical: 24px;
+    --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 6 - 1px);
+
+    --current-text-size: 2rem;
+    --current-line-height: 2.4rem;
+    --swui-button-font-weight: 500;
+
+    --swui-button-box-shadow-focus: unset;
+
+    --current-icon-height: var(--swui-button-icon-height-larger);
+
+    &.iconButton {
+      --current-icon-height: var(--swui-button-icon-height-larger-icon-only);
+    }
+  }
+
   &:hover {
     --current-background-color: var(--swui-button-background-color-hover);
     --current-border-color: var(--swui-button-border-color-hover);

diff --git a/packages/elements/src/components/ui/buttons/Button.stories.tsx b/packages/elements/src/components/ui/buttons/Button.stories.tsx
@@ -9,7 +9,7 @@ import { Icon } from "../icon/Icon";
 import { Story } from "@storybook/react";
 import { stenaCheck } from "../../../icons/ui/IconsUi";
 
-const buttonSizes: Array<ButtonSize> = ["small", "medium", "large"];
+const buttonSizes: Array<ButtonSize> = ["small", "medium", "large", "larger"];
 
 export default {
   title: "elements/Buttons",

diff --git a/packages/elements/src/components/ui/buttons/PrimaryButton.tsx b/packages/elements/src/components/ui/buttons/PrimaryButton.tsx
@@ -83,6 +83,7 @@ export const PrimaryButton = forwardRef<HTMLButtonElement, PrimaryButtonProps>(
           spinnerClassName={spinnerClassName}
           leftWrapperClassName={leftWrapperClassName}
           rightWrapperClassName={rightWrapperClassName}
+          size={size}
         />
       </Button>
     );

diff --git a/packages/elements/src/components/ui/buttons/common/ButtonCommon.ts b/packages/elements/src/components/ui/buttons/common/ButtonCommon.ts
@@ -1,7 +1,7 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { ReactNode } from "react";
 
-export type ButtonSize = "medium" | "small" | "large";
+export type ButtonSize = "medium" | "small" | "large" | "larger";
 export type ButtonVariant = "normal" | "danger" | "success";
 
 export interface CommonButtonProps {

diff --git a/packages/elements/src/components/ui/buttons/common/ButtonContent.module.css b/packages/elements/src/components/ui/buttons/common/ButtonContent.module.css
@@ -13,10 +13,18 @@
 
 .leftWrapper:not(:last-child) {
   margin-right: var(--swui-metrics-indent);
+
+  &.larger {
+    margin-right: calc(var(--swui-metrics-indent) * 2);
+  }
 }
 
 .rightWrapper:not(:first-child) {
   margin-left: var(--swui-metrics-indent);
+
+  &.larger {
+    margin-left: calc(var(--swui-metrics-indent) * 2);
+  }
 }
 
 .spinnerLeft {

diff --git a/packages/elements/src/components/ui/buttons/common/ButtonContent.tsx b/packages/elements/src/components/ui/buttons/common/ButtonContent.tsx
@@ -6,6 +6,7 @@ import { InputSpinner } from "../../spinner/InputSpinner";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import styles from "./ButtonContent.module.css";
 import { stenaCheck } from "../../../../icons/ui/IconsUi";
+import { ButtonSize } from "./ButtonCommon";
 
 export interface ButtonContentProps {
   label?: string;
@@ -20,6 +21,7 @@ export interface ButtonContentProps {
   spinnerClassName?: string;
   leftWrapperClassName?: string;
   rightWrapperClassName?: string;
+  size?: ButtonSize;
 }
 
 export const ButtonContent: React.FC<ButtonContentProps> = ({
@@ -35,11 +37,14 @@ export const ButtonContent: React.FC<ButtonContentProps> = ({
   spinnerClassName,
   leftWrapperClassName,
   rightWrapperClassName,
+  size = "medium",
 }) => {
   return (
     <>
       {(success || loading || leftIcon || left) && (
-        <div className={cx(styles.leftWrapper, leftWrapperClassName)}>
+        <div
+          className={cx(styles.leftWrapper, styles[size], leftWrapperClassName)}
+        >
           {success ? (
             <FontAwesomeIcon
               icon={stenaCheck}
@@ -71,7 +76,13 @@ export const ButtonContent: React.FC<ButtonContentProps> = ({
       )}
 
       {(right || rightIcon) && (
-        <div className={cx(styles.rightWrapper, rightWrapperClassName)}>
+        <div
+          className={cx(
+            styles.rightWrapper,
+            styles[size],
+            rightWrapperClassName
+          )}
+        >
           {right ? (
             right
           ) : rightIcon ? (

diff --git a/packages/elements/src/components/ui/chip/Chip.module.css b/packages/elements/src/components/ui/chip/Chip.module.css
@@ -2,11 +2,11 @@
   /* Theme vars */
   --swui-chip-font-size: var(--swui-font-size-small);
   --swui-chip-line-height: var(--swui-line-height-small);
-  --swui-chip-font-weight: var(--swui-font-weight-text);
+  --swui-chip-font-weight: var(--swui-font-weight-text-bold);
   --swui-chip-font-family: var(--swui-font-primary);
   --swui-chip-letter-spacing: var(--swui-text-letter-spacing);
   --swui-chip-height: 24px;
-  --swui-chip-border-radius: var(--swui-border-radius);
+  --swui-chip-border-radius: 99rem;
 
   /* State vars */
   --current-text-color: var(--swui-white);
@@ -35,7 +35,12 @@
 
   .label {
     white-space: nowrap;
-    padding: 0 var(--swui-metrics-space);
+    padding: 0 calc(var(--swui-metrics-space) * 2);
+
+    &.removable {
+      padding: 0 var(--swui-metrics-space) 0
+        calc(var(--swui-metrics-indent) * 2);
+    }
   }
 
   button {

diff --git a/packages/elements/src/components/ui/chip/Chip.tsx b/packages/elements/src/components/ui/chip/Chip.tsx
@@ -31,25 +31,25 @@ export const Chip: React.FC<ChipProps> = ({
       onClick();
     }
   };
+
+  const removableStyle = onClickRemove ? styles.removable : undefined;
+
   return (
     <div
-      className={cx(
-        styles.chip,
-        styles[variant],
-        onClickRemove ? styles.removable : undefined,
-        className
-      )}
+      className={cx(styles.chip, styles[variant], removableStyle, className)}
       {...getDataProps(rest)}
     >
       {onClick ? (
         <button
           onClick={onClickHandler}
-          className={cx(styles.chipCell, styles.label)}
+          className={cx(styles.chipCell, styles.label, removableStyle)}
         >
           {label}
         </button>
       ) : (
-        <div className={cx(styles.chipCell, styles.label)}>{label}</div>
+        <div className={cx(styles.chipCell, styles.label, removableStyle)}>
+          {label}
+        </div>
       )}
 
       {onClickRemove && (

diff --git a/packages/elements/src/components/ui/tag/Tag.module.css b/packages/elements/src/components/ui/tag/Tag.module.css
@@ -7,7 +7,7 @@
   --swui-tag-letter-spacing: var(--swui-text-letter-spacing);
   --swui-tag-height-normal: 24px;
   --swui-tag-height-small: 16px;
-  --swui-tag-border-radius: 10rem;
+  --swui-tag-border-radius: var(--swui-border-radius);
   --swui-tag-bg-color: var(--lhds-color-blue-100);
   --swui-tag-text-color: var(--lhds-color-blue-800);
   --swui-tag-icon-label-indent: var(--swui-metrics-indent);

diff --git a/packages/theme/src/styles/default-theme.css b/packages/theme/src/styles/default-theme.css
@@ -34,15 +34,15 @@
   --swui-font-weight-link: 400;
   --swui-font-buttons: var(--swui-font-primary);
   --swui-font-input: var(--swui-font-primary);
-  --swui-font-size-inputs: 1.4rem;
-  --swui-font-size-large: 1.6rem;
-  --swui-line-height-large: 2.4rem;
-  --swui-font-size-medium: 1.4rem;
-  --swui-line-height-medium: 1.6rem;
-  --swui-font-size-small: 1.2rem;
-  --swui-line-height-small: 1.6rem;
-  --swui-font-size-smaller: 1rem;
-  --swui-line-height-smaller: 1.6rem;
+  --swui-font-size-inputs: 1.6rem;
+  --swui-font-size-large: 1.8rem;
+  --swui-line-height-large: 2.6rem;
+  --swui-font-size-medium: 1.6rem;
+  --swui-line-height-medium: 1.8rem;
+  --swui-font-size-small: 1.4rem;
+  --swui-line-height-small: 1.8rem;
+  --swui-font-size-smaller: 1.2rem;
+  --swui-line-height-smaller: 1.8rem;
   --swui-font-weight-inputs: 400;
 
   /* Text */
@@ -78,15 +78,15 @@
   --swui-field-box-size-large: 32px;
   --swui-field-box-size-medium: 24px;
   --swui-field-box-size-small: 16px;
-  --swui-field-border-radius: 4px;
+  --swui-field-border-radius: 8px;
   --swui-field-icon-color: var(--swui-text-primary-color);
   --swui-field-icon-size: 13px;
   --swui-field-indicator-active-color: var(--swui-white);
   --swui-field-indicator-inactive-color: var(--swui-hidden);
   --swui-field-placeholder-color: var(--lhds-color-ui-500);
 
   /* Borders */
-  --swui-border-radius: 4px;
+  --swui-border-radius: 8px;
 
   /* Shadows */
   --swui-shadow-modal: rgba(0, 0, 0, 0.2) 0px 0px 10px 4px;