From c2886e9d498394d3b61cd262ecd5638998c9f435 Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Tue, 21 May 2024 11:55:54 +0300 Subject: [PATCH 01/11] refactor(Tokens): register stroke width with CSS variables in default root --- packages/beeq-tailwindcss/src/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/beeq-tailwindcss/src/index.ts b/packages/beeq-tailwindcss/src/index.ts index 7c947807c..ec4335507 100644 --- a/packages/beeq-tailwindcss/src/index.ts +++ b/packages/beeq-tailwindcss/src/index.ts @@ -82,6 +82,12 @@ export default { regular: 'var(--bq-font-line-height--regular)', large: 'var(--bq-font-line-height--large)', }, + strokeWidth: { + none: '0', + s: 'var(--bq-stroke-s)', + m: 'var(--bq-stroke-m)', + l: 'var(--bq-stroke-l)', + }, extend: { height: { // Details: https://web.dev/viewport-units/#the-need-for-new-viewport-units From 1ceb0c7cf8f369eec7aed5f7ee1dce48386e5c0b Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Tue, 21 May 2024 11:57:09 +0300 Subject: [PATCH 02/11] refactor(Tokens): declare stroke width with value --- packages/beeq-tailwindcss/src/theme/default/root.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/beeq-tailwindcss/src/theme/default/root.ts b/packages/beeq-tailwindcss/src/theme/default/root.ts index 10d5e3a65..45fd04452 100644 --- a/packages/beeq-tailwindcss/src/theme/default/root.ts +++ b/packages/beeq-tailwindcss/src/theme/default/root.ts @@ -99,4 +99,8 @@ export const DefaultRootTheme = { 'bq-spacing-xxl2': '3.5rem', // 56px 'bq-spacing-xxl3': '4rem', // 64px 'bq-spacing-xxl4': '4.5rem', // 72px + // Stroke width + 'bq-stroke-s': '1px', + 'bq-stroke-m': '2px', + 'bq-stroke-l': '3px', }; From c8d486c50f9ba06313e93447da1f9a096914baee Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Tue, 21 May 2024 14:39:27 +0300 Subject: [PATCH 03/11] feat(Tokens): replace stroke width on avatar component --- .../beeq/src/components/avatar/scss/bq-avatar.variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/beeq/src/components/avatar/scss/bq-avatar.variables.scss b/packages/beeq/src/components/avatar/scss/bq-avatar.variables.scss index e605bba1e..a085b8f94 100644 --- a/packages/beeq/src/components/avatar/scss/bq-avatar.variables.scss +++ b/packages/beeq/src/components/avatar/scss/bq-avatar.variables.scss @@ -30,7 +30,7 @@ --bq-avatar--border-color: theme('colors.stroke.tertiary'); --bq-avatar--border-style: solid; - --bq-avatar--border-width: 2px; + --bq-avatar--border-width: theme('strokeWidth.m'); --bq-avatar--border-radius-circle: theme('borderRadius.full'); --bq-avatar--border-radius-squareXs: theme('borderRadius.xs'); From 21c779c201a910061d225252bd09169644b6b157 Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Tue, 21 May 2024 14:45:23 +0300 Subject: [PATCH 04/11] feat(Tokens): replace with stroke width on alert component --- .../beeq/src/components/alert/scss/bq-alert.variables.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/beeq/src/components/alert/scss/bq-alert.variables.scss b/packages/beeq/src/components/alert/scss/bq-alert.variables.scss index c31a33450..47072b093 100644 --- a/packages/beeq/src/components/alert/scss/bq-alert.variables.scss +++ b/packages/beeq/src/components/alert/scss/bq-alert.variables.scss @@ -22,8 +22,6 @@ * @prop --bq-alert--border-success: The alert border color for success type * @prop --bq-alert--border-warning: The alert border color for warning type * @prop --bq-alert--border-error: The alert border color for error type - * @prop --bq-alert--border-width: The alert border width - * @prop --bq-alert--border-style: The alert border style * @prop --bq-alert--icon-color-info: The alert icon color for info type * @prop --bq-alert--icon-color-success: The alert icon color for success type @@ -52,7 +50,7 @@ --bq-alert--border-warning: theme('colors.stroke.warning'); --bq-alert--border-error: theme('colors.stroke.danger'); --bq-alert--border-default: theme('colors.stroke.secondary'); - --bq-alert--border-width: 1px; + --bq-alert--border-width: theme('strokeWidth.s'); --bq-alert--border-style: solid; --bq-alert--icon-color-info: theme('colors.icon.brand'); From a38478dea17a1562061fb7f5d9b9a9dde7154667 Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Tue, 21 May 2024 14:48:43 +0300 Subject: [PATCH 05/11] feat(Tokens): replace with stroke width on accordion component --- .../src/components/accordion/scss/bq-accordion.variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/beeq/src/components/accordion/scss/bq-accordion.variables.scss b/packages/beeq/src/components/accordion/scss/bq-accordion.variables.scss index 4081d03c1..71bb38e17 100644 --- a/packages/beeq/src/components/accordion/scss/bq-accordion.variables.scss +++ b/packages/beeq/src/components/accordion/scss/bq-accordion.variables.scss @@ -88,7 +88,7 @@ --bq-accordion--panel-filled-border-color: theme('colors.stroke.primary'); --bq-accordion--panel-filled-border-style: solid; - --bq-accordion--panel-filled-border-width: 1px; + --bq-accordion--panel-filled-border-width: theme('strokeWidth.s'); --bq-accordion--panel-small-filled-padding-y: theme('spacing.s'); --bq-accordion--panel-small-filled-padding-start: theme('spacing.s'); --bq-accordion--panel-small-filled-padding-end: theme('spacing.s'); From b8a8e1737bb00cd3ab211c4337ee957771e29f37 Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Tue, 21 May 2024 15:00:13 +0300 Subject: [PATCH 06/11] feat(Tokens): replace with stroke width on badge compoonent --- packages/beeq/src/components/badge/scss/bq-badge.variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/beeq/src/components/badge/scss/bq-badge.variables.scss b/packages/beeq/src/components/badge/scss/bq-badge.variables.scss index 2db46aa1f..a2b833f83 100644 --- a/packages/beeq/src/components/badge/scss/bq-badge.variables.scss +++ b/packages/beeq/src/components/badge/scss/bq-badge.variables.scss @@ -21,7 +21,7 @@ --bq-badge--border-color: theme('colors.stroke.tertiary'); --bq-badge--border-radius: theme('borderRadius.full'); --bq-badge--border-style: none; - --bq-badge--border-width: 0; + --bq-badge--border-width: theme('strokeWidth.none'); --bq-badge--size-small: 8px; --bq-badge--size-medium: 12px; From 23c3bcf2741bc3fb48f4dc1d6897f4d7dd0de8d6 Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Tue, 21 May 2024 15:03:20 +0300 Subject: [PATCH 07/11] feat(Tokens): replace with stroke width on breadcrumb item component --- .../breadcrumb-item/scss/bq-breadcrumb-item.variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/beeq/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss b/packages/beeq/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss index 5c94b9bf1..49394b2cb 100644 --- a/packages/beeq/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss +++ b/packages/beeq/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss @@ -26,7 +26,7 @@ --bq-breadcrumb-item--border-color: theme('colors.transparent'); --bq-breadcrumb-item--border-style: none; - --bq-breadcrumb-item--border-width: 0; + --bq-breadcrumb-item--border-width: theme('strokeWidth.s'); --bq-breadcrumb-item--border-radius: theme('borderRadius.s'); --bq-breadcrumb-item--line-height: theme('lineHeight.regular'); From b72b12f2b2475282b7c4e494585858c46fd8aae5 Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Tue, 21 May 2024 15:25:51 +0300 Subject: [PATCH 08/11] feat(Tokens): replace with stroke width on button component --- packages/beeq/src/components/button/scss/bq-button.scss | 4 ++-- .../beeq/src/components/button/scss/bq-button.variables.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/beeq/src/components/button/scss/bq-button.scss b/packages/beeq/src/components/button/scss/bq-button.scss index 18e0d98f8..07bb5353c 100644 --- a/packages/beeq/src/components/button/scss/bq-button.scss +++ b/packages/beeq/src/components/button/scss/bq-button.scss @@ -39,7 +39,7 @@ } .bq-button--primary.ghost { - @apply border-2 border-solid border-stroke-brand bg-transparent text-text-brand; + @apply border-[length:--bq-stroke-m] border-solid border-stroke-brand bg-transparent text-text-brand; // Primary `HOVER` state @apply hover:enabled:bg-hover-ui-primary; // Primary `ACTIVE` state @@ -63,7 +63,7 @@ } .bq-button--secondary.ghost { - @apply border-2 border-solid border-stroke-tertiary bg-transparent text-text-primary; + @apply border-[length:--bq-stroke-m] border-solid border-stroke-tertiary bg-transparent text-text-primary; // Secondary `HOVER` state @apply hover:enabled:bg-hover-ui-secondary; // Secondary `ACTIVE` state diff --git a/packages/beeq/src/components/button/scss/bq-button.variables.scss b/packages/beeq/src/components/button/scss/bq-button.variables.scss index 866994ad7..21756c2ce 100644 --- a/packages/beeq/src/components/button/scss/bq-button.variables.scss +++ b/packages/beeq/src/components/button/scss/bq-button.variables.scss @@ -24,7 +24,7 @@ --bq-button--border-color: theme('colors.transparent'); --bq-button--border-radius: theme('borderRadius.m'); --bq-button--border-style: solid; - --bq-button--border-width: theme('borderWidth.0'); + --bq-button--border-width: theme('strokeWidth.none'); --bq-button--small-height: 32px; --bq-button--small-paddingX: theme('spacing.xs'); From f4275ea81b524405fc173e5ef08d9f802ee47f0c Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Tue, 21 May 2024 16:24:54 +0300 Subject: [PATCH 09/11] feat(Tokens): replace hardcoded stroke widths with variables for component consistency --- .../src/components/card/scss/bq-card.variables.scss | 2 +- .../checkbox/scss/bq-checkbox.variables.scss | 2 +- .../components/drawer/_storybook/bq-drawer.stories.tsx | 2 +- .../dropdown/_storybook/bq-dropdown.stories.tsx | 2 +- .../src/components/icon/_storybook/bq-icon.stories.tsx | 2 +- packages/beeq/src/components/input/scss/bq-input.scss | 2 +- .../src/components/input/scss/bq-input.variables.scss | 10 +++++----- .../components/option/scss/bq-option.variables.scss | 2 +- .../src/components/radio/scss/bq-radio.variables.scss | 2 +- .../components/select/scss/bq-select.variables.scss | 2 +- .../src/components/side-menu/scss/bq-side-menu.scss | 2 +- 11 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/beeq/src/components/card/scss/bq-card.variables.scss b/packages/beeq/src/components/card/scss/bq-card.variables.scss index cfd703c00..cc6219fe5 100644 --- a/packages/beeq/src/components/card/scss/bq-card.variables.scss +++ b/packages/beeq/src/components/card/scss/bq-card.variables.scss @@ -17,7 +17,7 @@ --bq-card--borderColor: theme('colors.transparent'); --bq-card--borderRadius: theme('borderRadius.m'); --bq-card--borderStyle: solid; - --bq-card--borderWidth: theme('borderWidth.0'); + --bq-card--borderWidth: theme('strokeWidth.none'); --bq-card--padding: theme('spacing.l'); --bq-card--paddingMinimal: theme('spacing.xs'); diff --git a/packages/beeq/src/components/checkbox/scss/bq-checkbox.variables.scss b/packages/beeq/src/components/checkbox/scss/bq-checkbox.variables.scss index bc26a7dc3..401c6a32a 100644 --- a/packages/beeq/src/components/checkbox/scss/bq-checkbox.variables.scss +++ b/packages/beeq/src/components/checkbox/scss/bq-checkbox.variables.scss @@ -10,5 +10,5 @@ */ --bq-checkbox--size: 24px; --bq-checkbox--border-radius: theme('borderRadius.xs'); - --bq-checkbox--border-width: 2px; + --bq-checkbox--border-width: theme('strokeWidth.m'); } diff --git a/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx b/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx index f84aa70eb..25c0c7a80 100644 --- a/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx +++ b/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx @@ -67,7 +67,7 @@ const Template = (args: Args) => { Title
Slot
diff --git a/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.stories.tsx b/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.stories.tsx index 9502c61c4..7fb5f30e6 100644 --- a/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.stories.tsx +++ b/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.stories.tsx @@ -201,7 +201,7 @@ export const CustomTrigger: Story = { export const KeepOpen: Story = { render: (args: Args) => html` -
+

💡 NOTE:

If keepOpenOnSelect is set, the dropdown will remain open after a selection is made. diff --git a/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx b/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx index 223428284..db0541aec 100644 --- a/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx +++ b/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx @@ -104,7 +104,7 @@ export const ExploreIcons: Story = { (icon) => html`
${Template({ ...args, name: icon })}
diff --git a/packages/beeq/src/components/input/scss/bq-input.scss b/packages/beeq/src/components/input/scss/bq-input.scss index eae37cd74..4a618198e 100644 --- a/packages/beeq/src/components/input/scss/bq-input.scss +++ b/packages/beeq/src/components/input/scss/bq-input.scss @@ -42,7 +42,7 @@ // Border @apply rounded-[--bq-input--border-radius] border-[length:--bq-input--border-width] border-[color:--bq-input--border-color]; // Padding - @apply py-[--bq-input--paddingY] pe-[--bq-input--pading-end] ps-[--bq-input--pading-start]; + @apply py-[--bq-input--paddingY] pe-[--bq-input--padding-end] ps-[--bq-input--padding-start]; // Text @apply text-[length:--bq-input--text-size] text-[color:--bq-input--text-color] placeholder:text-[color:--bq-input--text-placeholder-color]; // Hover diff --git a/packages/beeq/src/components/input/scss/bq-input.variables.scss b/packages/beeq/src/components/input/scss/bq-input.variables.scss index 0acbba7a6..07c17be0e 100644 --- a/packages/beeq/src/components/input/scss/bq-input.variables.scss +++ b/packages/beeq/src/components/input/scss/bq-input.variables.scss @@ -18,8 +18,8 @@ * @prop --bq-input--label-margin-bottom - Input label margin bottom * @prop --bq-input--label-text-color - Input label text color * @prop --bq-input--label-text-size - Input label text size - * @prop --bq-input--pading-start - Input padding start - * @prop --bq-input--pading-end - Input padding end + * @prop --bq-input--padding-start - Input padding start + * @prop --bq-input--padding-end - Input padding end * @prop --bq-input--paddingY - Input padding top and bottom * @prop --bq-input--text-color - Input text color * @prop --bq-input--text-size - Input text size @@ -30,7 +30,7 @@ --bq-input--border-color: theme('colors.stroke.tertiary'); --bq-input--border-color-focus: theme('colors.stroke.brand'); --bq-input--border-radius: theme('borderRadius.s'); - --bq-input--border-width: 1px; + --bq-input--border-width: theme('strokeWidth.s'); --bq-input--border-style: solid; --bq-input--gap: theme('spacing.xs'); @@ -45,8 +45,8 @@ --bq-input--label-text-size: theme('fontSize.s'); --bq-input--label-text-color: theme('colors.text.primary'); - --bq-input--pading-start: theme('spacing.m'); - --bq-input--pading-end: theme('spacing.m'); + --bq-input--padding-start: theme('spacing.m'); + --bq-input--padding-end: theme('spacing.m'); --bq-input--paddingY: theme('spacing.s'); --bq-input--text-color: theme('colors.text.primary'); diff --git a/packages/beeq/src/components/option/scss/bq-option.variables.scss b/packages/beeq/src/components/option/scss/bq-option.variables.scss index a2a69b7d2..562d3772d 100644 --- a/packages/beeq/src/components/option/scss/bq-option.variables.scss +++ b/packages/beeq/src/components/option/scss/bq-option.variables.scss @@ -26,7 +26,7 @@ --bq-option--border-color: theme('colors.transparent'); --bq-option--border-style: none; - --bq-option--border-width: 0; + --bq-option--border-width: theme('strokeWidth.none'); --bq-option--border-radius: theme('borderRadius.s'); --bq-option--box-shadow: none; diff --git a/packages/beeq/src/components/radio/scss/bq-radio.variables.scss b/packages/beeq/src/components/radio/scss/bq-radio.variables.scss index d4866eede..697d1934f 100644 --- a/packages/beeq/src/components/radio/scss/bq-radio.variables.scss +++ b/packages/beeq/src/components/radio/scss/bq-radio.variables.scss @@ -8,5 +8,5 @@ * @prop --bq-radio--border-width: Radio border width */ --bq-radio--size: 24px; - --bq-radio--border-width: 2px; + --bq-radio--border-width: theme('strokeWidth.s'); } diff --git a/packages/beeq/src/components/select/scss/bq-select.variables.scss b/packages/beeq/src/components/select/scss/bq-select.variables.scss index e9db3f61b..92ea196f0 100644 --- a/packages/beeq/src/components/select/scss/bq-select.variables.scss +++ b/packages/beeq/src/components/select/scss/bq-select.variables.scss @@ -31,7 +31,7 @@ --bq-select--border-color: theme('colors.stroke.tertiary'); --bq-select--border-color-focus: theme('colors.stroke.brand'); --bq-select--border-radius: theme('borderRadius.s'); - --bq-select--border-width: 1px; + --bq-select--border-width: theme('strokeWidth.s'); --bq-select--border-style: solid; --bq-select--gap: theme('spacing.xs'); diff --git a/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss b/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss index fd3b8a2fb..2d9a78321 100644 --- a/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss +++ b/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss @@ -14,7 +14,7 @@ .bq-side-menu { @apply fixed left-0 top-0 flex h-dynamic-vh w-[--bq-side-menu--width] grow flex-col bg-[--bq-side-menu--bg-color]; - @apply border-0 border-e border-solid border-[color:--bq-side-menu--border-color]; + @apply border-0 border-e-[length:--bq-stroke-s] border-solid border-[color:--bq-side-menu--border-color]; @apply transition-[background-color,width] duration-150; @include hide-scrollbar; } From 2e3309ff341b268ff7f7535c54336feda7068610 Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Wed, 22 May 2024 14:19:01 +0300 Subject: [PATCH 10/11] feat(Tokens): update and replace strokeWidth with borderWith where necessary --- packages/beeq-tailwindcss/src/index.ts | 6 ++++++ .../components/accordion/scss/bq-accordion.variables.scss | 2 +- .../beeq/src/components/alert/scss/bq-alert.variables.scss | 2 +- .../src/components/avatar/scss/bq-avatar.variables.scss | 2 +- .../beeq/src/components/badge/scss/bq-badge.variables.scss | 2 +- .../breadcrumb-item/scss/bq-breadcrumb-item.variables.scss | 2 +- packages/beeq/src/components/button/scss/bq-button.scss | 4 ++-- .../src/components/button/scss/bq-button.variables.scss | 2 +- .../beeq/src/components/card/scss/bq-card.variables.scss | 2 +- .../src/components/checkbox/scss/bq-checkbox.variables.scss | 2 +- .../date-picker/scss/bq-date-picker.variables.scss | 4 ++-- .../src/components/drawer/_storybook/bq-drawer.stories.tsx | 2 +- .../components/dropdown/_storybook/bq-dropdown.stories.tsx | 2 +- .../beeq/src/components/icon/_storybook/bq-icon.stories.tsx | 2 +- .../beeq/src/components/input/scss/bq-input.variables.scss | 2 +- .../src/components/option/scss/bq-option.variables.scss | 2 +- .../beeq/src/components/radio/scss/bq-radio.variables.scss | 2 +- .../src/components/select/scss/bq-select.variables.scss | 2 +- .../beeq/src/components/side-menu/scss/bq-side-menu.scss | 2 +- packages/beeq/src/components/slider/bq-slider.tsx | 2 +- packages/beeq/src/components/slider/scss/bq-slider.scss | 2 +- .../beeq/src/components/tab-group/scss/bq-tab-group.scss | 2 +- packages/beeq/src/components/tag/scss/bq-tag.variables.scss | 2 +- .../src/components/textarea/scss/bq-textarea.variables.scss | 2 +- 24 files changed, 31 insertions(+), 25 deletions(-) diff --git a/packages/beeq-tailwindcss/src/index.ts b/packages/beeq-tailwindcss/src/index.ts index ec4335507..eadcfcbe7 100644 --- a/packages/beeq-tailwindcss/src/index.ts +++ b/packages/beeq-tailwindcss/src/index.ts @@ -89,6 +89,12 @@ export default { l: 'var(--bq-stroke-l)', }, extend: { + borderWidth: { + 0: '0', + s: 'var(--bq-stroke-s)', + m: 'var(--bq-stroke-m)', + l: 'var(--bq-stroke-l)', + }, height: { // Details: https://web.dev/viewport-units/#the-need-for-new-viewport-units 'dynamic-vh': '100dvh', diff --git a/packages/beeq/src/components/accordion/scss/bq-accordion.variables.scss b/packages/beeq/src/components/accordion/scss/bq-accordion.variables.scss index 71bb38e17..03819a0df 100644 --- a/packages/beeq/src/components/accordion/scss/bq-accordion.variables.scss +++ b/packages/beeq/src/components/accordion/scss/bq-accordion.variables.scss @@ -88,7 +88,7 @@ --bq-accordion--panel-filled-border-color: theme('colors.stroke.primary'); --bq-accordion--panel-filled-border-style: solid; - --bq-accordion--panel-filled-border-width: theme('strokeWidth.s'); + --bq-accordion--panel-filled-border-width: theme('borderWidth.s'); --bq-accordion--panel-small-filled-padding-y: theme('spacing.s'); --bq-accordion--panel-small-filled-padding-start: theme('spacing.s'); --bq-accordion--panel-small-filled-padding-end: theme('spacing.s'); diff --git a/packages/beeq/src/components/alert/scss/bq-alert.variables.scss b/packages/beeq/src/components/alert/scss/bq-alert.variables.scss index 47072b093..fdff2c5dc 100644 --- a/packages/beeq/src/components/alert/scss/bq-alert.variables.scss +++ b/packages/beeq/src/components/alert/scss/bq-alert.variables.scss @@ -50,7 +50,7 @@ --bq-alert--border-warning: theme('colors.stroke.warning'); --bq-alert--border-error: theme('colors.stroke.danger'); --bq-alert--border-default: theme('colors.stroke.secondary'); - --bq-alert--border-width: theme('strokeWidth.s'); + --bq-alert--border-width: theme('borderWidth.s'); --bq-alert--border-style: solid; --bq-alert--icon-color-info: theme('colors.icon.brand'); diff --git a/packages/beeq/src/components/avatar/scss/bq-avatar.variables.scss b/packages/beeq/src/components/avatar/scss/bq-avatar.variables.scss index a085b8f94..31703e86d 100644 --- a/packages/beeq/src/components/avatar/scss/bq-avatar.variables.scss +++ b/packages/beeq/src/components/avatar/scss/bq-avatar.variables.scss @@ -30,7 +30,7 @@ --bq-avatar--border-color: theme('colors.stroke.tertiary'); --bq-avatar--border-style: solid; - --bq-avatar--border-width: theme('strokeWidth.m'); + --bq-avatar--border-width: theme('borderWidth.m'); --bq-avatar--border-radius-circle: theme('borderRadius.full'); --bq-avatar--border-radius-squareXs: theme('borderRadius.xs'); diff --git a/packages/beeq/src/components/badge/scss/bq-badge.variables.scss b/packages/beeq/src/components/badge/scss/bq-badge.variables.scss index a2b833f83..8153e907d 100644 --- a/packages/beeq/src/components/badge/scss/bq-badge.variables.scss +++ b/packages/beeq/src/components/badge/scss/bq-badge.variables.scss @@ -21,7 +21,7 @@ --bq-badge--border-color: theme('colors.stroke.tertiary'); --bq-badge--border-radius: theme('borderRadius.full'); --bq-badge--border-style: none; - --bq-badge--border-width: theme('strokeWidth.none'); + --bq-badge--border-width: theme('borderWidth.0'); --bq-badge--size-small: 8px; --bq-badge--size-medium: 12px; diff --git a/packages/beeq/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss b/packages/beeq/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss index 49394b2cb..59772c6fb 100644 --- a/packages/beeq/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss +++ b/packages/beeq/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss @@ -26,7 +26,7 @@ --bq-breadcrumb-item--border-color: theme('colors.transparent'); --bq-breadcrumb-item--border-style: none; - --bq-breadcrumb-item--border-width: theme('strokeWidth.s'); + --bq-breadcrumb-item--border-width: theme('borderWidth.s'); --bq-breadcrumb-item--border-radius: theme('borderRadius.s'); --bq-breadcrumb-item--line-height: theme('lineHeight.regular'); diff --git a/packages/beeq/src/components/button/scss/bq-button.scss b/packages/beeq/src/components/button/scss/bq-button.scss index 07bb5353c..836ec1fb7 100644 --- a/packages/beeq/src/components/button/scss/bq-button.scss +++ b/packages/beeq/src/components/button/scss/bq-button.scss @@ -39,7 +39,7 @@ } .bq-button--primary.ghost { - @apply border-[length:--bq-stroke-m] border-solid border-stroke-brand bg-transparent text-text-brand; + @apply border-m border-solid border-stroke-brand bg-transparent text-text-brand; // Primary `HOVER` state @apply hover:enabled:bg-hover-ui-primary; // Primary `ACTIVE` state @@ -63,7 +63,7 @@ } .bq-button--secondary.ghost { - @apply border-[length:--bq-stroke-m] border-solid border-stroke-tertiary bg-transparent text-text-primary; + @apply border-m border-solid border-stroke-tertiary bg-transparent text-text-primary; // Secondary `HOVER` state @apply hover:enabled:bg-hover-ui-secondary; // Secondary `ACTIVE` state diff --git a/packages/beeq/src/components/button/scss/bq-button.variables.scss b/packages/beeq/src/components/button/scss/bq-button.variables.scss index 21756c2ce..866994ad7 100644 --- a/packages/beeq/src/components/button/scss/bq-button.variables.scss +++ b/packages/beeq/src/components/button/scss/bq-button.variables.scss @@ -24,7 +24,7 @@ --bq-button--border-color: theme('colors.transparent'); --bq-button--border-radius: theme('borderRadius.m'); --bq-button--border-style: solid; - --bq-button--border-width: theme('strokeWidth.none'); + --bq-button--border-width: theme('borderWidth.0'); --bq-button--small-height: 32px; --bq-button--small-paddingX: theme('spacing.xs'); diff --git a/packages/beeq/src/components/card/scss/bq-card.variables.scss b/packages/beeq/src/components/card/scss/bq-card.variables.scss index cc6219fe5..cfd703c00 100644 --- a/packages/beeq/src/components/card/scss/bq-card.variables.scss +++ b/packages/beeq/src/components/card/scss/bq-card.variables.scss @@ -17,7 +17,7 @@ --bq-card--borderColor: theme('colors.transparent'); --bq-card--borderRadius: theme('borderRadius.m'); --bq-card--borderStyle: solid; - --bq-card--borderWidth: theme('strokeWidth.none'); + --bq-card--borderWidth: theme('borderWidth.0'); --bq-card--padding: theme('spacing.l'); --bq-card--paddingMinimal: theme('spacing.xs'); diff --git a/packages/beeq/src/components/checkbox/scss/bq-checkbox.variables.scss b/packages/beeq/src/components/checkbox/scss/bq-checkbox.variables.scss index 401c6a32a..d7d7e1548 100644 --- a/packages/beeq/src/components/checkbox/scss/bq-checkbox.variables.scss +++ b/packages/beeq/src/components/checkbox/scss/bq-checkbox.variables.scss @@ -10,5 +10,5 @@ */ --bq-checkbox--size: 24px; --bq-checkbox--border-radius: theme('borderRadius.xs'); - --bq-checkbox--border-width: theme('strokeWidth.m'); + --bq-checkbox--border-width: theme('borderWidth.m'); } diff --git a/packages/beeq/src/components/date-picker/scss/bq-date-picker.variables.scss b/packages/beeq/src/components/date-picker/scss/bq-date-picker.variables.scss index beca8dae5..1485c03bb 100644 --- a/packages/beeq/src/components/date-picker/scss/bq-date-picker.variables.scss +++ b/packages/beeq/src/components/date-picker/scss/bq-date-picker.variables.scss @@ -32,8 +32,8 @@ --bq-date-picker--border-color: theme(colors.stroke.tertiary); --bq-date-picker--border-radius: theme(borderRadius.s); - --bq-date-picker--border-width: 1px; - --bq-date-picker--currentDate-border-width: 2px; + --bq-date-picker--border-width: theme(borderWidth.s); + --bq-date-picker--currentDate-border-width: theme(borderWidth.m); --bq-date-picker--border-style: solid; --bq-date-picker--gap: theme(spacing.xs); diff --git a/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx b/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx index 25c0c7a80..080c73de9 100644 --- a/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx +++ b/packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx @@ -67,7 +67,7 @@ const Template = (args: Args) => { Title
Slot
diff --git a/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.stories.tsx b/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.stories.tsx index 7fb5f30e6..b62c0798d 100644 --- a/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.stories.tsx +++ b/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.stories.tsx @@ -201,7 +201,7 @@ export const CustomTrigger: Story = { export const KeepOpen: Story = { render: (args: Args) => html` -
+

💡 NOTE:

If keepOpenOnSelect is set, the dropdown will remain open after a selection is made. diff --git a/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx b/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx index db0541aec..b779673f2 100644 --- a/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx +++ b/packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx @@ -104,7 +104,7 @@ export const ExploreIcons: Story = { (icon) => html`
${Template({ ...args, name: icon })}
diff --git a/packages/beeq/src/components/input/scss/bq-input.variables.scss b/packages/beeq/src/components/input/scss/bq-input.variables.scss index 07c17be0e..1c7b5ec96 100644 --- a/packages/beeq/src/components/input/scss/bq-input.variables.scss +++ b/packages/beeq/src/components/input/scss/bq-input.variables.scss @@ -30,7 +30,7 @@ --bq-input--border-color: theme('colors.stroke.tertiary'); --bq-input--border-color-focus: theme('colors.stroke.brand'); --bq-input--border-radius: theme('borderRadius.s'); - --bq-input--border-width: theme('strokeWidth.s'); + --bq-input--border-width: theme('borderWidth.s'); --bq-input--border-style: solid; --bq-input--gap: theme('spacing.xs'); diff --git a/packages/beeq/src/components/option/scss/bq-option.variables.scss b/packages/beeq/src/components/option/scss/bq-option.variables.scss index 562d3772d..b2134b80e 100644 --- a/packages/beeq/src/components/option/scss/bq-option.variables.scss +++ b/packages/beeq/src/components/option/scss/bq-option.variables.scss @@ -26,7 +26,7 @@ --bq-option--border-color: theme('colors.transparent'); --bq-option--border-style: none; - --bq-option--border-width: theme('strokeWidth.none'); + --bq-option--border-width: theme('borderWidth.0'); --bq-option--border-radius: theme('borderRadius.s'); --bq-option--box-shadow: none; diff --git a/packages/beeq/src/components/radio/scss/bq-radio.variables.scss b/packages/beeq/src/components/radio/scss/bq-radio.variables.scss index 697d1934f..058bb600a 100644 --- a/packages/beeq/src/components/radio/scss/bq-radio.variables.scss +++ b/packages/beeq/src/components/radio/scss/bq-radio.variables.scss @@ -8,5 +8,5 @@ * @prop --bq-radio--border-width: Radio border width */ --bq-radio--size: 24px; - --bq-radio--border-width: theme('strokeWidth.s'); + --bq-radio--border-width: theme('borderWidth.s'); } diff --git a/packages/beeq/src/components/select/scss/bq-select.variables.scss b/packages/beeq/src/components/select/scss/bq-select.variables.scss index 92ea196f0..4b1c377a4 100644 --- a/packages/beeq/src/components/select/scss/bq-select.variables.scss +++ b/packages/beeq/src/components/select/scss/bq-select.variables.scss @@ -31,7 +31,7 @@ --bq-select--border-color: theme('colors.stroke.tertiary'); --bq-select--border-color-focus: theme('colors.stroke.brand'); --bq-select--border-radius: theme('borderRadius.s'); - --bq-select--border-width: theme('strokeWidth.s'); + --bq-select--border-width: theme('borderWidth.s'); --bq-select--border-style: solid; --bq-select--gap: theme('spacing.xs'); diff --git a/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss b/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss index 2d9a78321..3d68062f0 100644 --- a/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss +++ b/packages/beeq/src/components/side-menu/scss/bq-side-menu.scss @@ -14,7 +14,7 @@ .bq-side-menu { @apply fixed left-0 top-0 flex h-dynamic-vh w-[--bq-side-menu--width] grow flex-col bg-[--bq-side-menu--bg-color]; - @apply border-0 border-e-[length:--bq-stroke-s] border-solid border-[color:--bq-side-menu--border-color]; + @apply border-0 border-e-s border-solid border-[color:--bq-side-menu--border-color]; @apply transition-[background-color,width] duration-150; @include hide-scrollbar; } diff --git a/packages/beeq/src/components/slider/bq-slider.tsx b/packages/beeq/src/components/slider/bq-slider.tsx index e3dae7c94..bbfdeb76e 100644 --- a/packages/beeq/src/components/slider/bq-slider.tsx +++ b/packages/beeq/src/components/slider/bq-slider.tsx @@ -252,7 +252,7 @@ export class BqSlider { // Get the width of the track area and the size of the input range thumb const trackAreaWidth = this.trackElem.getBoundingClientRect().width; // We need to also add 4px to the thumb size, - // this is because the thumb is 2px border (`border-2`) + // this is because the thumb is 2px border (`border-m`) const inputThumbSize = parseInt(getComputedStyle(this.el).getPropertyValue('--bq-slider--thumb-size'), 10) + 4; const totalWidth = trackAreaWidth - inputThumbSize; diff --git a/packages/beeq/src/components/slider/scss/bq-slider.scss b/packages/beeq/src/components/slider/scss/bq-slider.scss index 8742c8f10..0299f495d 100644 --- a/packages/beeq/src/components/slider/scss/bq-slider.scss +++ b/packages/beeq/src/components/slider/scss/bq-slider.scss @@ -6,7 +6,7 @@ @layer components { .thumb { - @apply pointer-events-auto box-content size-[--bq-slider--thumb-size] cursor-pointer appearance-none rounded-full border-2 border-solid border-stroke-brand bg-ui-primary; + @apply pointer-events-auto box-content size-[--bq-slider--thumb-size] cursor-pointer appearance-none rounded-full border-m border-solid border-stroke-brand bg-ui-primary; @apply transition-[background-color,border-color,box-shadow] duration-300; } diff --git a/packages/beeq/src/components/tab-group/scss/bq-tab-group.scss b/packages/beeq/src/components/tab-group/scss/bq-tab-group.scss index 63a9de4c7..89717be7f 100644 --- a/packages/beeq/src/components/tab-group/scss/bq-tab-group.scss +++ b/packages/beeq/src/components/tab-group/scss/bq-tab-group.scss @@ -10,7 +10,7 @@ @apply relative; &::after { - @apply absolute bottom-0 flex w-full border-0 border-b border-solid border-bg-tertiary content-empty; + @apply absolute bottom-0 flex w-full border-0 border-b-s border-solid border-bg-tertiary content-empty; } } diff --git a/packages/beeq/src/components/tag/scss/bq-tag.variables.scss b/packages/beeq/src/components/tag/scss/bq-tag.variables.scss index 7b69b26c4..0ba2d48b9 100644 --- a/packages/beeq/src/components/tag/scss/bq-tag.variables.scss +++ b/packages/beeq/src/components/tag/scss/bq-tag.variables.scss @@ -25,7 +25,7 @@ --bq-tag--border-color: theme('colors.transparent'); --bq-tag--border-radius: theme('borderRadius.s'); --bq-tag--border-style: solid; - --bq-tag--border-width: 1px; + --bq-tag--border-width: theme('borderWidth.s'); --bq-tag--small-border-radius: theme('borderRadius.xs'); --bq-tag--small-gap: theme('spacing.xs2'); diff --git a/packages/beeq/src/components/textarea/scss/bq-textarea.variables.scss b/packages/beeq/src/components/textarea/scss/bq-textarea.variables.scss index b92ea53d5..7575a0241 100644 --- a/packages/beeq/src/components/textarea/scss/bq-textarea.variables.scss +++ b/packages/beeq/src/components/textarea/scss/bq-textarea.variables.scss @@ -28,7 +28,7 @@ --bq-textarea--border-color: theme('colors.stroke.tertiary'); --bq-textarea--border-color-focus: theme('colors.stroke.brand'); --bq-textarea--border-radius: theme('borderRadius.s'); - --bq-textarea--border-width: 1px; + --bq-textarea--border-width: theme('borderWidth.s'); --bq-textarea--border-style: solid; --bq-textarea--helper-margin-top: theme('spacing.xs'); From 82a41f227c660a5c106015ed85099f84ca45521f Mon Sep 17 00:00:00 2001 From: Lungan Catalin Date: Wed, 22 May 2024 15:15:24 +0300 Subject: [PATCH 11/11] feat(Tokens): move borderWidth above extended obj to overwrite the TW --- packages/beeq-tailwindcss/src/index.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/beeq-tailwindcss/src/index.ts b/packages/beeq-tailwindcss/src/index.ts index eadcfcbe7..806d4b755 100644 --- a/packages/beeq-tailwindcss/src/index.ts +++ b/packages/beeq-tailwindcss/src/index.ts @@ -46,6 +46,12 @@ export default { l: 'var(--bq-radius--l)', full: 'var(--bq-radius--full)', }, + borderWidth: { + 0: '0', + s: 'var(--bq-stroke-s)', + m: 'var(--bq-stroke-m)', + l: 'var(--bq-stroke-l)', + }, boxShadow: { xs: 'var(--bq-box-shadow--xs)', s: 'var(--bq-box-shadow--s)', @@ -89,12 +95,6 @@ export default { l: 'var(--bq-stroke-l)', }, extend: { - borderWidth: { - 0: '0', - s: 'var(--bq-stroke-s)', - m: 'var(--bq-stroke-m)', - l: 'var(--bq-stroke-l)', - }, height: { // Details: https://web.dev/viewport-units/#the-need-for-new-viewport-units 'dynamic-vh': '100dvh',