From d06ef7ec6e740e1d282b265c338205e61e296036 Mon Sep 17 00:00:00 2001 From: BryanFRD Date: Wed, 28 Oct 2026 09:12:21 +0100 Subject: [PATCH 1/2] feat(ui-ng): render flr-tag as a filled pill by default Signed-off-by: BryanFRD --- packages/showcase/src/stories/Tag.stories.ts | 4 ++-- packages/ui-ng/src/lib/tag/tag.component.ts | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/showcase/src/stories/Tag.stories.ts b/packages/showcase/src/stories/Tag.stories.ts index 9c73c9f9..7046f22c 100644 --- a/packages/showcase/src/stories/Tag.stories.ts +++ b/packages/showcase/src/stories/Tag.stories.ts @@ -6,7 +6,7 @@ const meta: Meta = { title: 'Primitives/Tag', component: TagComponent, decorators: [moduleMetadata({ imports: [TagComponent] })], - args: { variant: 'neutral', size: 'md', soft: false, dot: true, removable: false }, + args: { variant: 'neutral', size: 'md', soft: true, dot: false, removable: false }, argTypes: { variant: { control: 'inline-radio', @@ -38,6 +38,6 @@ export const Variants: Story = { }), }; -export const Soft: Story = { args: { soft: true, variant: 'accent' } }; +export const Outlined: Story = { args: { soft: false, dot: true, variant: 'accent' } }; export const Removable: Story = { args: { removable: true, variant: 'accent' } }; diff --git a/packages/ui-ng/src/lib/tag/tag.component.ts b/packages/ui-ng/src/lib/tag/tag.component.ts index d6a84397..d840af31 100644 --- a/packages/ui-ng/src/lib/tag/tag.component.ts +++ b/packages/ui-ng/src/lib/tag/tag.component.ts @@ -20,8 +20,8 @@ const VARIANT_TEXT: Record = { }; const SIZE: Record = { - sm: { padding: '2px 7px', fontSize: '9.5px', gap: '5px', dot: 4 }, - md: { padding: '3px 9px', fontSize: '10.5px', gap: '6px', dot: 5 }, + sm: { padding: '2px 6px', fontSize: '9.5px', gap: '5px', dot: 4 }, + md: { padding: '3px 8px', fontSize: '10px', gap: '6px', dot: 5 }, }; @Component({ @@ -62,8 +62,8 @@ const SIZE: Record(null); readonly color = input(null); - readonly soft = input(false); - readonly dot = input(true); + readonly soft = input(true); + readonly dot = input(false); readonly size = input('md'); readonly removable = input(false); @@ -120,7 +120,7 @@ export class TagComponent { gap: dim.gap, padding: dim.padding, 'font-size': dim.fontSize, - background: this.soft() ? `color-mix(in oklab, ${c} 14%, transparent)` : 'transparent', + background: this.soft() ? `color-mix(in oklab, ${c} 20%, transparent)` : 'transparent', border: this.soft() ? 'none' : '1px solid var(--color-rule, rgba(30, 41, 59, 0.14))', color: this.resolvedTextColor(), }; From c878a2bf4608fa377ba3a0fbe576aa31c075bb90 Mon Sep 17 00:00:00 2001 From: BryanFRD Date: Wed, 28 Oct 2026 09:12:23 +0100 Subject: [PATCH 2/2] feat(ui-ng): tighten button and form control radii to 4px Signed-off-by: BryanFRD --- packages/ui-ng/src/lib/button/button.component.ts | 6 +++--- packages/ui-ng/src/lib/input/input.component.ts | 2 +- packages/ui-ng/src/lib/menu/menu.component.ts | 4 ++-- .../ui-ng/src/lib/search-field/search-field.component.ts | 2 +- packages/ui-ng/src/lib/segmented/segmented.component.css | 6 +++--- packages/ui-ng/src/lib/select/select.component.ts | 2 +- packages/ui-ng/src/lib/submit/submit.component.ts | 2 +- packages/ui-ng/src/lib/textarea/textarea.component.ts | 2 +- 8 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/ui-ng/src/lib/button/button.component.ts b/packages/ui-ng/src/lib/button/button.component.ts index 3305faea..2d90941c 100644 --- a/packages/ui-ng/src/lib/button/button.component.ts +++ b/packages/ui-ng/src/lib/button/button.component.ts @@ -12,9 +12,9 @@ interface SizeDim { } const SIZE: Record = { - sm: { padding: '5px 10px', fontSize: '11px', gap: '6px', radius: '6px' }, - md: { padding: '8px 14px', fontSize: '12px', gap: '8px', radius: '8px' }, - lg: { padding: '12px 20px', fontSize: '14px', gap: '10px', radius: '10px' }, + sm: { padding: '5px 10px', fontSize: '11px', gap: '6px', radius: '4px' }, + md: { padding: '8px 14px', fontSize: '12px', gap: '8px', radius: '4px' }, + lg: { padding: '12px 20px', fontSize: '14px', gap: '10px', radius: '4px' }, }; const DANGER = 'var(--color-danger, #dc2626)'; diff --git a/packages/ui-ng/src/lib/input/input.component.ts b/packages/ui-ng/src/lib/input/input.component.ts index d7a4c70f..3cf3cd1e 100644 --- a/packages/ui-ng/src/lib/input/input.component.ts +++ b/packages/ui-ng/src/lib/input/input.component.ts @@ -56,7 +56,7 @@ const ERROR = 'var(--color-danger, #dc2626)'; font-family: var(--font-sans, 'Fraunces', Georgia, ui-serif, serif); line-height: 1.4; color: var(--color-ink, #1e293b); - border-radius: 8px; + border-radius: 4px; outline: none; transition: border-color 140ms, diff --git a/packages/ui-ng/src/lib/menu/menu.component.ts b/packages/ui-ng/src/lib/menu/menu.component.ts index c54c4bd2..f9adf692 100644 --- a/packages/ui-ng/src/lib/menu/menu.component.ts +++ b/packages/ui-ng/src/lib/menu/menu.component.ts @@ -77,7 +77,7 @@ export type MenuDirection = 'down' | 'up'; .flr-menu__panel { background: var(--color-card, #ffffff); border: 1px solid var(--color-card-rule, rgba(30, 41, 59, 0.1)); - border-radius: 10px; + border-radius: 6px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); padding: 6px; } @@ -220,7 +220,7 @@ export class MenuComponent { align-items: center; gap: 10px; padding: 8px 12px; - border-radius: 6px; + border-radius: 4px; font-size: 14px; font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace); color: var(--color-ink-2, #475569); diff --git a/packages/ui-ng/src/lib/search-field/search-field.component.ts b/packages/ui-ng/src/lib/search-field/search-field.component.ts index fe4cdc3d..99bcc94e 100644 --- a/packages/ui-ng/src/lib/search-field/search-field.component.ts +++ b/packages/ui-ng/src/lib/search-field/search-field.component.ts @@ -112,7 +112,7 @@ const SIZE: Record = { .flr-search__input { width: 100%; box-sizing: border-box; - border-radius: 8px; + border-radius: 4px; font-family: var(--font-sans, 'Fraunces', Georgia, ui-serif, serif); font-weight: 400; line-height: 1.4; diff --git a/packages/ui-ng/src/lib/segmented/segmented.component.css b/packages/ui-ng/src/lib/segmented/segmented.component.css index 328e037b..ad52dd8f 100644 --- a/packages/ui-ng/src/lib/segmented/segmented.component.css +++ b/packages/ui-ng/src/lib/segmented/segmented.component.css @@ -9,7 +9,7 @@ gap: 2px; padding: 3px; border: 1px solid var(--color-rule, rgba(30, 41, 59, 0.14)); - border-radius: 10px; + border-radius: 6px; background: var(--color-app-bg-2, #f4f4f2); } @@ -18,7 +18,7 @@ top: 3px; bottom: 3px; left: 0; - border-radius: 7px; + border-radius: 4px; background: var(--color-card, #ffffff); box-shadow: 0 1px 2px rgba(30, 41, 59, 0.12); pointer-events: none; @@ -48,7 +48,7 @@ height: 30px; padding: 0 12px; border: 0; - border-radius: 7px; + border-radius: 4px; background: transparent; color: var(--color-ink-3, #64748b); font: inherit; diff --git a/packages/ui-ng/src/lib/select/select.component.ts b/packages/ui-ng/src/lib/select/select.component.ts index 8acd981e..aa85dc2e 100644 --- a/packages/ui-ng/src/lib/select/select.component.ts +++ b/packages/ui-ng/src/lib/select/select.component.ts @@ -83,7 +83,7 @@ const ERROR = 'var(--color-danger, #dc2626)'; appearance: none; -webkit-appearance: none; -moz-appearance: none; - border-radius: 8px; + border-radius: 4px; outline: none; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); diff --git a/packages/ui-ng/src/lib/submit/submit.component.ts b/packages/ui-ng/src/lib/submit/submit.component.ts index b3c56c61..9978a031 100644 --- a/packages/ui-ng/src/lib/submit/submit.component.ts +++ b/packages/ui-ng/src/lib/submit/submit.component.ts @@ -47,7 +47,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co color: #fff; background: var(--color-accent, var(--color-ink, #1e293b)); border: 1px solid var(--color-accent, var(--color-ink, #1e293b)); - border-radius: 8px; + border-radius: 4px; cursor: pointer; transition: background 160ms ease-out, diff --git a/packages/ui-ng/src/lib/textarea/textarea.component.ts b/packages/ui-ng/src/lib/textarea/textarea.component.ts index bd5a4816..f168011f 100644 --- a/packages/ui-ng/src/lib/textarea/textarea.component.ts +++ b/packages/ui-ng/src/lib/textarea/textarea.component.ts @@ -49,7 +49,7 @@ const ERROR = 'var(--color-danger, #dc2626)'; font-family: var(--font-sans, 'Fraunces', Georgia, ui-serif, serif); line-height: 1.5; color: var(--color-ink, #1e293b); - border-radius: 8px; + border-radius: 4px; outline: none; resize: vertical; transition: