diff --git a/packages/elements/src/components/ui/chip/Chip.module.css b/packages/elements/src/components/ui/chip/Chip.module.css index e5ab4df4b..f93ba96c8 100644 --- 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 index 0eefbda72..132b9b00d 100644 --- 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 = ({ onClick(); } }; + + const removableStyle = onClickRemove ? styles.removable : undefined; + return (
{onClick ? ( ) : ( -
{label}
+
+ {label} +
)} {onClickRemove && ( diff --git a/packages/elements/src/components/ui/tag/Tag.module.css b/packages/elements/src/components/ui/tag/Tag.module.css index 3fe5d2c4d..9ca52bdc0 100644 --- 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 index b26ec3fc5..4b7bc02d0 100644 --- a/packages/theme/src/styles/default-theme.css +++ b/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,7 +78,7 @@ --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); @@ -86,7 +86,7 @@ --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;