fix(CSS Shadow token): wrong shadow-m token value (#313)

Endava · Jul 2, 2023 · 8a01169 · 8a01169
1 parent 72f5b40
commit 8a01169
Show file tree

Hide file tree

Showing 19 changed files with 134 additions and 103 deletions.
diff --git a/packages/bee-q/.storybook/manager.ts b/packages/bee-q/.storybook/manager.ts
@@ -4,29 +4,29 @@ import { create } from '@storybook/theming';
 const theme = create({
   base: 'light',
 
-  colorPrimary: '#009bb4',
-  colorSecondary: '#4F46E5',
+  colorPrimary: '#f0f1f2',
+  colorSecondary: '#4f46e5',
 
   // BRAND
   brandTarget: '_self',
   brandTitle: 'Bee-Q Design System',
-  brandImage: './assets/bee-q_logo.svg',
+  brandImage: './assets/beeq-logo.svg',
 
   // UI
-  appBg: '#F9FAFB',
-  appContentBg: '#FFFFFF',
+  appBg: '#f0f1f2',
+  appContentBg: '#fff',
 
   // Typography
-  fontBase: '"Inter", sans-serif',
+  fontBase: '"Outfit", sans-serif',
 
   // Text colors
-  textColor: '#1F2937',
-  textInverseColor: '#ffffff',
+  textColor: '#2b2e33',
+  textInverseColor: '#fff',
 
   // Toolbar default and active colors
-  barTextColor: '#1F2937',
+  barTextColor: '#2b2e33',
   barSelectedColor: '#6366F1',
-  barBg: '#F9FAFB',
+  barBg: '#f0f1f2',
 });
 
 addons.setConfig({

diff --git a/packages/bee-q/src/components/button/scss/bq-button.scss b/packages/bee-q/src/components/button/scss/bq-button.scss
@@ -151,5 +151,6 @@
 /* -------------------------------------------------------------------------- */
 
 .bq-button__loader {
-  @apply absolute animate-spin;
+  @include animation-spin;
+  @apply absolute;
 }
diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.variables.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.variables.scss
@@ -24,7 +24,7 @@
   --bq-dialog--background: theme('colors.bg.primary');
   --bq-dialog--background-backdrop: theme('colors.grey.600');
 
-  --bq-dialog--box-shadow: theme('boxShadow.m');
+  --bq-dialog--box-shadow: theme('boxShadow.l');
 
   --bq-dialog--border-color: theme('colors.transparent');
   --bq-dialog--border-radius: theme('borderRadius.m');

diff --git a/packages/bee-q/src/components/notification/scss/bq-notification.scss b/packages/bee-q/src/components/notification/scss/bq-notification.scss
@@ -1,5 +1,5 @@
 /* -------------------------------------------------------------------------- */
-/*                                Notification styles                */
+/*                             Notification styles                            */
 /* -------------------------------------------------------------------------- */
 
 @import './bq-notification.variables';
@@ -13,11 +13,10 @@
 }
 
 .bq-notification {
-  @apply relative flex  min-w-[var(--bq-notification--min-width)] p-[var(--bq-notification--padding)];
-  @apply rounded-[var(--bq-notification--border-radius)] bg-[var(--bq-notification--background)];
-  @apply animate-slide-in;
+  @include animation-slide-in;
 
-  box-shadow: var(--bq-notification--box-shadow);
+  @apply relative flex  min-w-[var(--bq-notification--min-width)] p-[var(--bq-notification--padding)];
+  @apply rounded-[var(--bq-notification--border-radius)] bg-[var(--bq-notification--background)] shadow-[shadow:var(--bq-notification--box-shadow)];
 }
 
 /**

diff --git a/packages/bee-q/src/components/notification/scss/bq-notification.variables.scss b/packages/bee-q/src/components/notification/scss/bq-notification.variables.scss
@@ -21,7 +21,7 @@
    * @prop --bq-notification--min-width: The notification min width
    */
   --bq-notification--background: theme('colors.bg.primary');
-  --bq-notification--box-shadow: theme('boxShadow.m');
+  --bq-notification--box-shadow: theme('boxShadow.l');
 
   --bq-notification--border-color: theme('colors.transparent');
   --bq-notification--border-radius: theme('borderRadius.s');

diff --git a/packages/bee-q/src/components/side-menu/_storybook/bq-side-menu.stories.tsx b/packages/bee-q/src/components/side-menu/_storybook/bq-side-menu.stories.tsx
@@ -42,15 +42,15 @@ const Template = (args: Args) => html`
     @bqSelect=${args.bqSelect}
   >
     <div class="flex items-center gap-s py-6 pl-s" slot="logo">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 40 40" class="h-10 w-10">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1080 1080" class="h-10 w-10">
         <path
           fill="currentColor"
           fill-rule="evenodd"
-          d="M5.167 10.286c-.328-.053-.592-.292-.775-.577a2.35 2.35 0 0 0-3.317-.69c-1.103.753-1.407 2.282-.678 3.416a2.35 2.35 0 0 0 3.439.6c.209-.162.466-.263.724-.22.413.066.7.453.697.883a8.42 8.42 0 0 0 1.336 4.611c.715 1.111.948 2.588.211 3.684l-4.235 6.3C.872 30.817.354 33.799 1.004 36.156c.67 2.423 2.565 4.092 5.35 3.814.278-.028.555-.06.834-.097 2.866-.377 5.193-2.373 6.603-4.963.726-1.333 2.642-1.857 3.839-.954.677.51 1.367.95 2.06 1.31 2.469 1.285 5.318 1.718 7.592.167 2.273-1.552 2.999-4.424 2.814-7.267a15.75 15.75 0 0 0-.386-2.542c-.327-1.404.798-2.91 2.19-3.069 2.866-.327 5.558-1.755 7.013-4.327.141-.25.279-.5.411-.752 1.336-2.534.584-4.983-1.32-6.563-1.853-1.537-4.72-2.21-7.639-1.585l-7.002 1.499c-1.308.28-2.574-.552-3.312-1.7a8.045 8.045 0 0 0-3.869-3.176.714.714 0 0 1-.44-.827.785.785 0 0 1 .396-.489c.066-.036.13-.075.193-.118 1.103-.753 1.406-2.282.678-3.416a2.35 2.35 0 0 0-3.318-.69c-1.103.753-1.407 2.282-.678 3.416l.015.022c.177.27.282.596.205.912a.952.952 0 0 1-.82.711 7.907 7.907 0 0 0-3.536 1.332A8.207 8.207 0 0 0 6.263 9.72c-.213.397-.634.642-1.07.571l-.026-.004Zm6.457 16.499a1.982 1.982 0 0 0-.163-.46c-.667-1.345-2.593-1.622-3.427-.38l-2.938 4.37c-.988 1.47-1.206 3.074-.894 4.204.293 1.062 1.056 1.777 2.374 1.645.246-.024.493-.053.74-.085 1.605-.211 2.888-1.287 3.718-2.811.848-1.558 1.207-3.58.803-5.48l-.213-1.003Zm.656-14.687c1.435-.98 3.1-1.168 4.753-.85.062.011.109-.058.074-.112-1.38-2.148-4.195-2.733-6.285-1.307-2.09 1.426-2.666 4.324-1.285 6.472.035.054.115.037.128-.027.362-1.692 1.18-3.197 2.615-4.176Zm14.642 1.329c-1.656.354-2.251 2.59-1.203 3.957.126.164.28.32.445.441l.133.097c1.541 1.125 3.488 1.574 5.212 1.377 1.685-.192 3.148-.99 3.962-2.43.126-.222.248-.445.366-.668.632-1.199.29-2.202-.544-2.895-.888-.736-2.407-1.155-4.106-.792l-4.265.913ZM22.9 18.408c.656.53.77 1.508.253 2.185-1.064 1.395-2.058 2.438-3.273 3.26-1.207.817-2.548 1.357-4.22 1.864-.802.243-1.641-.229-1.875-1.053-.235-.825.226-1.69 1.027-1.933 1.546-.468 2.562-.903 3.41-1.477.842-.57 1.604-1.334 2.555-2.58a1.484 1.484 0 0 1 2.123-.266Zm3.267 6.475c.626.55.789 1.495.362 2.11-.878 1.268-1.715 2.203-2.764 2.913-1.043.705-2.223 1.135-3.706 1.513-.71.18-1.5-.325-1.762-1.13-.262-.806.102-1.605.813-1.786 1.37-.349 2.264-.7 2.997-1.195.727-.492 1.37-1.175 2.154-2.308.427-.615 1.28-.668 1.906-.117Z"
+          d="M251.8 942.3c-19.5-14.9-48-20.4-68.6-7.2-30.1 19.8-38.5 60.6-10.6 83.8 40.7 34.7 96 61.2 150.1 61.2 109.9 0 197-74.9 223.7-167 77 51.2 180.8 54 265 2.8l41.8 43.5c21.2 21.5 55.2 21.5 78.1 0 22.3-20.9 24-56.2 3.3-78.2l-41.8-43.5c55.8-82.1 57.5-186.2 10-265.6 93.2-20.4 172.4-105.2 176.9-217.7 6.7-171.4-165.2-277.2-309.1-190.7l-183 110.2c-5.6-7.7-11.7-14.9-18.4-22-49.1-51.8-119.4-72.7-186.4-63.4 0-6.6.6-13.8 1.7-20.9 3.9-27.6 14.5-52.9 35.2-73.3 22.9-21.5 24-56.2 3.3-78.2-21.1-21.5-55.1-21.5-78-.1-44.6 43-63.6 95.3-70.3 140.5-3.9 28.7-3.3 56.2 0 78.8-6.1 4.4-12.3 9.9-18.4 16-6.1 5.5-11.7 11.6-16.7 17.6-22.3-4.4-49.7-6.6-78.7-3.9-45.2 4.4-98.2 20.4-142.8 63.4-22.9 21.5-24 56.2-3.3 78.2 21.2 21.5 55.2 21.5 78.1 0 21.2-19.8 47.4-29.2 74.2-32 7.3 0 14.5-1.1 21.2 0-13.4 67.2 5 138.9 54.1 190.7 5.6 5.5 10.6 10.5 16.7 15.4l-22.3 32c-8.9 13.2-11.7 28.1-8.9 41.9l6.1 30.9c1.7 8.3-.6 17.1-5 23.7-7.3 11-13.9 13.2-24.5 15.4l-36.8 7.7c-16.7 3.3-31.8 13.8-41.8 29.2-20.6 30.9-12.8 71.6 17.3 90.9 30.1 19.3 70.9 9.9 91.5-20.9 10-15.4 13.4-33.1 10-49.6l-7.3-36.4c-2.2-10.5-2.2-18.2 4.5-28.7 4.5-7.2 11.2-12.1 19.5-14.3l30.7-7.2c13.9-3.3 26.2-12.1 34.6-25.3l15.1-23.1 88.2 162c39.1 72.7-18.4 163.7-104.3 163.7-24.8 0-51.6-13.2-73.9-30.3zM494 625.5l38.5 78.2c46.9-9.4 122.8-46.8 157.9-155.9L617.8 507l-61.9 59.5-61.4 59h-.5zm286.2 177.4c-58 55.7-146.2 51.2-194.7-2.8 70.9-25.3 152.9-83.2 198.1-196.2 54.1 51.3 56.3 142.3-3.4 199zM480.6 487.7c45.2-43.5 48.5-113.5 6.7-157-40.7-43.5-111-44.1-156.2-.6-45.2 43.5-48.5 113.5-6.7 157 40.7 43.6 111 44.2 156.2.6zm176.8-132.2L818.7 259c72.5-44.1 158.5 8.8 155.1 95.3-3.3 86.5-94.9 140-163.5 97l-152.9-95.8z"
           clip-rule="evenodd"
         />
       </svg>
-      ${!args.collapse ? html`<h1 class="whitespace-nowrap text-xl">Bee-Q</h1>` : nothing}
+      ${!args.collapse ? html`<h1 class="whitespace-nowrap text-xl">BEEQ</h1>` : nothing}
     </div>
     <bq-side-menu-item active>
       <bq-icon name="diamonds-four" slot="prefix"></bq-icon>

diff --git a/packages/bee-q/src/components/spinner/scss/bq-spinner.scss b/packages/bee-q/src/components/spinner/scss/bq-spinner.scss
@@ -100,6 +100,6 @@
 .is-animated {
   .bq-spinner--icon,
   .bq-spinner--loader > svg {
-    @apply animate-spin;
+    @include animation-spin;
   }
 }
diff --git a/packages/bee-q/src/components/toast/scss/bq-toast.scss b/packages/bee-q/src/components/toast/scss/bq-toast.scss
@@ -1,22 +1,25 @@
 /* -------------------------------------------------------------------------- */
-/*                                Toast styles                */
+/*                                Toast styles                                */
 /* -------------------------------------------------------------------------- */
 
 @import './bq-toast.variables';
 
 :host {
-  @apply hidden animate-slide-in will-change-transform;
+  @apply hidden;
 }
 
 :host([open]) {
   @apply inline-block;
 }
 
 .bq-toast {
+  @include animation-slide-in;
+
   @apply flex items-center gap-[var(--bq-toast--gap)] px-[var(--bq-toast--padding-x)] py-[var(--bq-toast--padding-y)];
   @apply rounded-[var(--bq-toast--border-radius)] bg-[var(--bq-toast--background)] shadow-[shadow:var(--bq-toast--box-shadow)];
+  @apply border-[length:var(--bq-toast--border-width)] border-[color:var(--bq-toast--border-color)];
 
-  border: var(--bq-toast--border-width) var(--bq-toast--border-style) var(--bq-toast--border-color);
+  border-style: var(--bq-toast--border-style);
 }
 
 .bq-toast--icon {
@@ -39,7 +42,8 @@
   }
 
   &.loading {
-    @apply animate-spin text-[var(--bq-toast--icon-color-loading)];
+    @include animation-spin;
+    @apply text-[var(--bq-toast--icon-color-loading)];
   }
 
   &.custom {

diff --git a/packages/bee-q/src/components/tooltip/__tests__/bq-tooltip.e2e.ts b/packages/bee-q/src/components/tooltip/__tests__/bq-tooltip.e2e.ts
@@ -7,89 +7,81 @@ describe('bq-tooltip', () => {
     const page = await newE2EPage();
     await page.setContent('<bq-tooltip></bq-tooltip>');
 
-    const element = await page.find('bq-tooltip');
-    expect(element).toHaveClass('hydrated');
+    const tooltipElem = await page.find('bq-tooltip');
+    expect(tooltipElem).toHaveClass('hydrated');
   });
 
   it('should have shadow root', async () => {
     const page = await newE2EPage();
     await page.setContent('<bq-tooltip></bq-tooltip>');
 
-    const element = await page.find('bq-tooltip');
-    expect(element.shadowRoot).not.toBeNull();
+    const tooltipElem = await page.find('bq-tooltip');
+    expect(tooltipElem.shadowRoot).not.toBeNull();
   });
 
   it('should be visible on hover', async () => {
     const page = await newE2EPage();
     await page.setContent(`
       <bq-tooltip>
         Yuhu! A tooltip!
-        <bq-button slot="trigger">
-            Hover me!
-        </bq-button>
+        <bq-button slot="trigger"> Hover me! </bq-button>
       </bq-tooltip>
     `);
 
-    const element = await page.find('bq-tooltip >>> [part="panel"]');
-    expect(element).toHaveAttribute('aria-hidden');
+    const tooltipPanel = await page.find('bq-tooltip >>> [part="panel"]');
+    expect(tooltipPanel).toHaveAttribute('aria-hidden');
 
     const button = await page.find('bq-button');
     await button.hover();
-    expect(element).not.toHaveAttribute('aria-hidden');
+    expect(tooltipPanel).not.toHaveAttribute('aria-hidden');
   });
 
   it('should hide on mouse out', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<div>
-      <div>another element</div>
-      <bq-tooltip>
-          Yuhu! A tooltip!
-          <bq-button slot="trigger">
-              Hover me!
-          </bq-button>
+    await page.setContent(`
+      <bq-tooltip visible>
+        Yuhu! A tooltip!
+        <bq-button bq-button slot="trigger"> Hover me! </bq-button>
       </bq-tooltip>
-    </div>`);
+    `);
 
-    const element = await page.find('bq-tooltip >>> [part="panel"]');
-    expect(element).toHaveAttribute('aria-hidden');
+    const tooltipPanel = await page.find('bq-tooltip >>> [part="panel"]');
+    expect(tooltipPanel).not.toHaveAttribute('aria-hidden');
 
-    const button = await page.find('bq-button');
-    await button.hover();
-    expect(element).not.toHaveAttribute('aria-hidden');
+    await page.click('body');
+    await page.waitForChanges();
 
-    const anotherEl = await page.find('div');
-    await anotherEl.hover();
-    expect(element).toHaveAttribute('aria-hidden');
+    expect(tooltipPanel).toHaveAttribute('aria-hidden');
   });
 
   it('should be visible only on click if specified', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<bq-tooltip display-on="click">
+    await page.setContent(`
+      <bq-tooltip display-on="click">
         Yuhu! A tooltip!
-        <bq-button slot="trigger">
-            Hover me!
-        </bq-button>
-    </bq-tooltip>`);
+        <bq-button slot="trigger"> Hover me! </bq-button>
+      </bq-tooltip>
+    `);
 
-    const element = await page.find('bq-tooltip >>> [part="panel"]');
-    expect(element).toHaveAttribute('aria-hidden');
+    const tooltipPanel = await page.find('bq-tooltip >>> [part="panel"]');
+    expect(tooltipPanel).toHaveAttribute('aria-hidden');
 
     const button = await page.find('bq-button');
     await button.hover();
-    expect(element).toHaveAttribute('aria-hidden');
+    expect(tooltipPanel).toHaveAttribute('aria-hidden');
 
     await button.click();
-    expect(element).not.toHaveAttribute('aria-hidden');
+    expect(tooltipPanel).not.toHaveAttribute('aria-hidden');
   });
 
   it('should show in specified position', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<bq-tooltip placement="left">
+    await page.setContent(`
+      <bq-tooltip placement="left">
         Yuhu! A tooltip!
-        <bq-button slot="trigger">
-            Hover me!
-        </bq-button>
-    </bq-tooltip>`);
+        <bq-button slot="trigger"> Hover me! </bq-button>
+      </bq-tooltip>
+    `);
 
     const button = await page.find('bq-button');
     await button.hover();

diff --git a/packages/bee-q/src/components/tooltip/bq-tooltip.tsx b/packages/bee-q/src/components/tooltip/bq-tooltip.tsx
@@ -170,10 +170,10 @@ export class BqTooltip {
 
   render() {
     return (
-      <div class="relative" part="base">
+      <div class="bq-tooltip relative" part="base">
         {/* TRIGGER */}
         <div
-          class="bq-tooltip__trigger"
+          class="bq-tooltip--trigger"
           onMouseOver={this.handleTriggerMouseOver}
           onMouseLeave={this.handleTriggerMouseLeave}
           onClick={this.handleTriggerOnClick}
@@ -184,14 +184,14 @@ export class BqTooltip {
         </div>
         {/* PANEL */}
         <div
-          class="bq-tooltip__panel"
+          class="bq-tooltip--panel"
           aria-hidden={!this.visible}
           hidden={!this.visible}
           role="tooltip"
           ref={(el) => (this.panel = el)}
           part="panel"
         >
-          {!this.hideArrow && <div class="bq-tooltip__arrow" ref={(el) => (this.arrow = el)} />}
+          {!this.hideArrow && <div class="bq-tooltip--arrow" ref={(el) => (this.arrow = el)} />}
           <slot />
         </div>
       </div>

diff --git a/packages/bee-q/src/components/tooltip/scss/bq-tooltip.scss b/packages/bee-q/src/components/tooltip/scss/bq-tooltip.scss
@@ -1,25 +1,26 @@
-@import './bq-tooltip.variables';
+/* -------------------------------------------------------------------------- */
+/*                               Tooltip styles                               */
+/* -------------------------------------------------------------------------- */
 
-:host {
-  @apply relative inline-block;
-}
+@import './bq-tooltip.variables';
 
-.bq-tooltip__trigger {
-  @apply block;
-}
+.bq-tooltip--panel {
+  @include animation-fade-in;
 
-.bq-tooltip__panel {
-  @apply fixed box-border w-[var(--bq-tooltip--width)] max-w-[var(--bq-tooltip--max-width)] px-[var(--bq-tooltip--paddingX)] py-[var(--bq-tooltip--paddingY)];
-  @apply pointer-events-none rounded-[var(--bq-tooltip--rounded-corners)] bg-[var(--bq-tooltip--background-color)] text-[length:var(--bq-tooltip--font-size)] leading-large text-[color:var(--bq-tooltip--text-color)];
+  @apply pointer-events-none fixed box-border bg-[var(--bq-tooltip--background-color)];
+  @apply w-[var(--bq-tooltip--width)] max-w-[var(--bq-tooltip--max-width)] px-[var(--bq-tooltip--paddingX)] py-[var(--bq-tooltip--paddingY)];
+  @apply text-[length:var(--bq-tooltip--font-size)] leading-[var(--bq-tooltip--line-height)] text-[color:var(--bq-tooltip--text-color)];
+  @apply rounded-[var(--bq-tooltip--border-radius)] border-[length:var(--bq-tooltip--border-width)] border-[color:var(--bq-tooltip--border-color)];
+  @apply shadow-[shadow:var(--bq-tooltip--box-shadow)];
 }
 
-.bq-tooltip__arrow {
+.bq-tooltip--arrow {
   &,
   &::before {
-    @apply absolute z-[-1] h-2 w-2;
+    @apply absolute -z-[1] h-2 w-2;
   }
 
   &::before {
-    @apply left-0 top-0 rotate-45 bg-[var(--bq-tooltip--background-color)] content-[''];
+    @apply left-0 top-0 rotate-45 bg-[var(--bq-tooltip--background-color)] content-empty;
   }
 }
diff --git a/packages/bee-q/src/components/tooltip/scss/bq-tooltip.variables.scss b/packages/bee-q/src/components/tooltip/scss/bq-tooltip.variables.scss
@@ -4,11 +4,20 @@
 
 :host {
   --bq-tooltip--background-color: theme('colors.ui.inverse');
+  --bq-tooltip--box-shadow: theme('boxShadow.m');
+
   --bq-tooltip--font-size: theme('fontSize.m');
-  --bq-tooltip--width: max-content;
-  --bq-tooltip--max-width: 320px;
+  --bq-tooltip--line-height: theme('lineHeight.large');
+  --bq-tooltip--text-color: theme('colors.text.inverse');
+
   --bq-tooltip--paddingX: theme('padding.xs');
   --bq-tooltip--paddingY: theme('padding.xs2');
-  --bq-tooltip--rounded-corners: theme('borderRadius.s');
-  --bq-tooltip--text-color: theme('colors.text.inverse');
+
+  --bq-tooltip--border-color: theme('colors.transparent');
+  --bq-tooltip--border-radius: theme('borderRadius.s');
+  --bq-tooltip--border-style: none;
+  --bq-tooltip--border-width: unset;
+
+  --bq-tooltip--max-width: 320px;
+  --bq-tooltip--width: max-content;
 }