feat(Tokens): add --bq-stroke-* token values for border width (#1062)

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)',
@@ -82,6 +88,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

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',
 };

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

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('borderWidth.s');
   --bq-alert--border-style: solid;
 
   --bq-alert--icon-color-info: theme('colors.icon.brand');

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('borderWidth.m');
 
   --bq-avatar--border-radius-circle: theme('borderRadius.full');
   --bq-avatar--border-radius-squareXs: theme('borderRadius.xs');

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('borderWidth.0');
 
   --bq-badge--size-small: 8px;
   --bq-badge--size-medium: 12px;

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('borderWidth.s');
   --bq-breadcrumb-item--border-radius: theme('borderRadius.s');
 
   --bq-breadcrumb-item--line-height: theme('lineHeight.regular');

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-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-m border-solid border-stroke-tertiary bg-transparent text-text-primary;
   // Secondary `HOVER` state
   @apply hover:enabled:bg-hover-ui-secondary;
   // Secondary `ACTIVE` state

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('borderWidth.m');
 }

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

packages/beeq/src/components/drawer/_storybook/bq-drawer.stories.tsx

@@ -67,7 +67,7 @@ const Template = (args: Args) => {
         Title
       </div>
       <div
-        class="flex h-full items-center justify-center rounded-xs border border-dashed border-stroke-brand bg-red-100"
+        class="flex h-full items-center justify-center rounded-xs border-s border-dashed border-stroke-brand bg-red-100"
       >
         Slot
       </div>

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`
-    <div class="mb-l rounded-m border border-solid border-stroke-success bg-ui-success-alt p-m">
+    <div class="mb-l rounded-m border-s border-solid border-stroke-success bg-ui-success-alt p-m">
       <p class="mb-xs text-m font-bold">💡 NOTE:</p>
       If <code class="text-text-danger">keepOpenOnSelect</code> is set, the dropdown will remain open after a selection
       is made.

packages/beeq/src/components/icon/_storybook/bq-icon.stories.tsx

@@ -104,7 +104,7 @@ export const ExploreIcons: Story = {
         (icon) => html`
           <div class="group flex flex-col items-stretch text-center outline-0" role="button" tabindex="0">
             <div
-              class="mb-s flex w-full justify-center rounded-m border border-solid border-stroke-primary px-0 py-m transition-[shadow,transform] group-hover:scale-125 group-hover:shadow-l"
+              class="mb-s flex w-full justify-center rounded-m border-s border-solid border-stroke-primary px-0 py-m transition-[shadow,transform] group-hover:scale-125 group-hover:shadow-l"
             >
               ${Template({ ...args, name: icon })}
             </div>

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

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('borderWidth.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');

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('borderWidth.0');
   --bq-option--border-radius: theme('borderRadius.s');
 
   --bq-option--box-shadow: none;

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('borderWidth.s');
 }

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('borderWidth.s');
   --bq-select--border-style: solid;
 
   --bq-select--gap: theme('spacing.xs');

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-s border-solid border-[color:--bq-side-menu--border-color];
   @apply transition-[background-color,width] duration-150;
   @include hide-scrollbar;
 }

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;
 

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

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

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

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