- Tas has no longer rounded corners.

- Chip has rounded corner, since user can interact with it.
- Increase padding of chip.
- Default font sizes in theme have been increase by 2px. Normal is now 16px (or 1.6rem).
- Input fields font-size has been increased from 14px to 16px.
- Default border-radius in theme has been increase from 4px to 8px. This affects Tooltip, ToggleButton and Tag.

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 {

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 && (

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);

packages/theme/src/styles/default-theme.css

@@ -34,7 +34,7 @@
   --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-inputs: 1.6rem;
   --swui-font-size-large: 1.8rem;
   --swui-line-height-large: 2.6rem;
   --swui-font-size-medium: 1.6rem;
@@ -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;