From d2048464cdc1cfaa5b16a53da72e897b9dacd56e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Fri, 30 Jun 2023 14:18:45 +0300
Subject: [PATCH 01/10] fix(tokens): wrong `shadow-m` value

---
 packages/bee-q/src/global/styles/variables/_box-shadow.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bee-q/src/global/styles/variables/_box-shadow.scss b/packages/bee-q/src/global/styles/variables/_box-shadow.scss
index d0f690a35..4c26760cc 100644
--- a/packages/bee-q/src/global/styles/variables/_box-shadow.scss
+++ b/packages/bee-q/src/global/styles/variables/_box-shadow.scss
@@ -1,6 +1,6 @@
 :root {
   --bq-box-shadow--xs: 0 2px 0 rgba(0, 0, 0, 0.016);
   --bq-box-shadow--s: 0 8px 24px rgba(0, 0, 0, 0.04);
-  --bq-box-shadow--m: 0 2px 48px 16px rgba(0, 0, 0, 0.08);
+  --bq-box-shadow--m: 0 10px 48px -16px rgba(0, 0, 0, 0.12);
   --bq-box-shadow--l: 0 20px 58px -16px rgba(0, 0, 0, 0.16);
 }

From 68c06dc9e1b7733536b20e9a800fdc03a959200f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Fri, 30 Jun 2023 14:19:50 +0300
Subject: [PATCH 02/10] fix(dialog,notification): wrong shadow token

---
 .../bee-q/src/components/dialog/scss/bq-dialog.variables.scss   | 2 +-
 .../components/notification/scss/bq-notification.variables.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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
index 3d4e51820..d571ab759 100644
--- 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.variables.scss b/packages/bee-q/src/components/notification/scss/bq-notification.variables.scss
index 887002321..2c2d84ec7 100644
--- 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');

From 6dd7c956fa0a877490c4a125be29e315773c5ba8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Fri, 30 Jun 2023 14:23:38 +0300
Subject: [PATCH 03/10] fix(tooltip): missing CSS variables and animation

---
 .../src/components/tooltip/bq-tooltip.tsx     |  8 ++---
 .../components/tooltip/scss/bq-tooltip.scss   | 31 ++++++++++++-------
 .../tooltip/scss/bq-tooltip.variables.scss    | 17 +++++++---
 3 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/packages/bee-q/src/components/tooltip/bq-tooltip.tsx b/packages/bee-q/src/components/tooltip/bq-tooltip.tsx
index ae8a5ef1f..796e3d822 100644
--- 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
index 8e538ac1f..c583011ea 100644
--- 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,34 @@
+/* -------------------------------------------------------------------------- */
+/*                               Tooltip styles                               */
+/* -------------------------------------------------------------------------- */
+
 @import './bq-tooltip.variables';
 
-:host {
-  @apply relative inline-block;
+@layer utilities {
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+  }
 }
 
-.bq-tooltip__trigger {
-  @apply block;
-}
+.bq-tooltip--panel {
+  @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__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)];
+  animation: fade-in 0.3s ease;
 }
 
-.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
index 0f02d734d..0bf02e6ed 100644
--- 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;
 }

From e923ec739646debe7293443bd47eac849e2ec9cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Fri, 30 Jun 2023 14:24:36 +0300
Subject: [PATCH 04/10] fix(notification,toast): move animation as utility
 layer

For some reason the plugin do not always pick the animaton keyframes.
---
 .../notification/scss/bq-notification.scss    | 21 ++++++++++++++----
 .../src/components/toast/scss/bq-toast.scss   | 22 ++++++++++++++++---
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/packages/bee-q/src/components/notification/scss/bq-notification.scss b/packages/bee-q/src/components/notification/scss/bq-notification.scss
index c46bb32b5..c6e764b34 100644
--- a/packages/bee-q/src/components/notification/scss/bq-notification.scss
+++ b/packages/bee-q/src/components/notification/scss/bq-notification.scss
@@ -1,9 +1,23 @@
 /* -------------------------------------------------------------------------- */
-/*                                Notification styles                */
+/*                             Notification styles                            */
 /* -------------------------------------------------------------------------- */
 
 @import './bq-notification.variables';
 
+@layer utilities {
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-in {
+    from {
+      transform: translateY(10px);
+    }
+  }
+}
+
 :host {
   @apply hidden;
 }
@@ -14,10 +28,9 @@
 
 .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;
+  @apply rounded-[var(--bq-notification--border-radius)] bg-[var(--bq-notification--background)] shadow-[shadow:var(--bq-notification--box-shadow)];
 
-  box-shadow: var(--bq-notification--box-shadow);
+  animation: fade-in 0.3s ease, slide-in 0.3s ease;
 }
 
 /**
diff --git a/packages/bee-q/src/components/toast/scss/bq-toast.scss b/packages/bee-q/src/components/toast/scss/bq-toast.scss
index e53b2dac6..62e0ccc1a 100644
--- a/packages/bee-q/src/components/toast/scss/bq-toast.scss
+++ b/packages/bee-q/src/components/toast/scss/bq-toast.scss
@@ -1,11 +1,25 @@
 /* -------------------------------------------------------------------------- */
-/*                                Toast styles                */
+/*                                Toast styles                                */
 /* -------------------------------------------------------------------------- */
 
 @import './bq-toast.variables';
 
+@layer utilities {
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-in {
+    from {
+      transform: translateY(10px);
+    }
+  }
+}
+
 :host {
-  @apply hidden animate-slide-in will-change-transform;
+  @apply hidden;
 }
 
 :host([open]) {
@@ -15,8 +29,10 @@
 .bq-toast {
   @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);
+  animation: fade-in 0.3s ease, slide-in 0.3s ease;
+  border-style: var(--bq-toast--border-style);
 }
 
 .bq-toast--icon {

From 9bc439a51f656c51e1dbad0949e281f27dd3ad09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Fri, 30 Jun 2023 15:01:51 +0300
Subject: [PATCH 05/10] test(tooltip): fix e2e tests

---
 .../tooltip/__tests__/bq-tooltip.e2e.ts       | 72 +++++++++----------
 1 file changed, 32 insertions(+), 40 deletions(-)

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
index 7f8f15640..daf8b31af 100644
--- 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,16 +7,16 @@ 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 () => {
@@ -24,72 +24,64 @@ describe('bq-tooltip', () => {
     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();

From e0dc5e0f0103121a4a5c4aeb37ba7d9f9307fe61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Sun, 2 Jul 2023 11:38:50 +0300
Subject: [PATCH 06/10] feat(CSS): add keyframes mixins

---
 .../src/global/styles/mixins/_keyframes.scss  | 37 +++++++++++++++++++
 .../bee-q/src/global/styles/mixins/index.scss |  1 +
 2 files changed, 38 insertions(+)
 create mode 100644 packages/bee-q/src/global/styles/mixins/_keyframes.scss

diff --git a/packages/bee-q/src/global/styles/mixins/_keyframes.scss b/packages/bee-q/src/global/styles/mixins/_keyframes.scss
new file mode 100644
index 000000000..60d914c50
--- /dev/null
+++ b/packages/bee-q/src/global/styles/mixins/_keyframes.scss
@@ -0,0 +1,37 @@
+/* -------------------------------------------------------------------------- */
+/*                             Animation keyframes                            */
+/* -------------------------------------------------------------------------- */
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateY(10px);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@mixin animation-fade-in($duration: 0.3s, $delay: 0s, $timing-function: ease) {
+  animation: fade-in $duration $timing-function $delay;
+}
+
+@mixin animation-slide-in($duration: 0.3s, $delay: 0s, $timing-function: ease) {
+  animation: fade-in $duration $timing-function $delay, slide-in $duration $timing-function $delay;
+}
+
+@mixin animtion-spin($duration: 1s, $delay: 0s, $timing-function: linear) {
+  animation: spin $duration $timing-function $delay infinite;
+}
diff --git a/packages/bee-q/src/global/styles/mixins/index.scss b/packages/bee-q/src/global/styles/mixins/index.scss
index dabe45321..ae2b3f6e6 100644
--- a/packages/bee-q/src/global/styles/mixins/index.scss
+++ b/packages/bee-q/src/global/styles/mixins/index.scss
@@ -1 +1,2 @@
+@import './keyframes';
 @import './scrollbar';

From aad0f33519b0b68e7dc4fff1e5eb73d79b743e11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Sun, 2 Jul 2023 11:40:20 +0300
Subject: [PATCH 07/10] fix(CSS): tailwind CSS built-in animation not working

---
 .../src/components/button/scss/bq-button.scss |  3 ++-
 .../notification/scss/bq-notification.scss    | 18 ++---------------
 .../components/spinner/scss/bq-spinner.scss   |  2 +-
 .../src/components/toast/scss/bq-toast.scss   | 20 ++++---------------
 .../components/tooltip/scss/bq-tooltip.scss   | 12 ++---------
 tailwind.config.ts                            | 14 -------------
 6 files changed, 11 insertions(+), 58 deletions(-)

diff --git a/packages/bee-q/src/components/button/scss/bq-button.scss b/packages/bee-q/src/components/button/scss/bq-button.scss
index dfd316535..8b3cbf834 100644
--- 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 animtion-spin;
+  @apply absolute;
 }
diff --git a/packages/bee-q/src/components/notification/scss/bq-notification.scss b/packages/bee-q/src/components/notification/scss/bq-notification.scss
index c6e764b34..b0b8c8bd7 100644
--- a/packages/bee-q/src/components/notification/scss/bq-notification.scss
+++ b/packages/bee-q/src/components/notification/scss/bq-notification.scss
@@ -4,20 +4,6 @@
 
 @import './bq-notification.variables';
 
-@layer utilities {
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-  }
-
-  @keyframes slide-in {
-    from {
-      transform: translateY(10px);
-    }
-  }
-}
-
 :host {
   @apply hidden;
 }
@@ -27,10 +13,10 @@
 }
 
 .bq-notification {
+  @include animation-slide-in;
+
   @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)];
-
-  animation: fade-in 0.3s ease, slide-in 0.3s ease;
 }
 
 /**
diff --git a/packages/bee-q/src/components/spinner/scss/bq-spinner.scss b/packages/bee-q/src/components/spinner/scss/bq-spinner.scss
index eea2ed269..ec522ee92 100644
--- 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 animtion-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
index 62e0ccc1a..45ab69f05 100644
--- a/packages/bee-q/src/components/toast/scss/bq-toast.scss
+++ b/packages/bee-q/src/components/toast/scss/bq-toast.scss
@@ -4,20 +4,6 @@
 
 @import './bq-toast.variables';
 
-@layer utilities {
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-  }
-
-  @keyframes slide-in {
-    from {
-      transform: translateY(10px);
-    }
-  }
-}
-
 :host {
   @apply hidden;
 }
@@ -27,11 +13,12 @@
 }
 
 .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)];
 
-  animation: fade-in 0.3s ease, slide-in 0.3s ease;
   border-style: var(--bq-toast--border-style);
 }
 
@@ -55,7 +42,8 @@
   }
 
   &.loading {
-    @apply animate-spin text-[var(--bq-toast--icon-color-loading)];
+    @include animtion-spin;
+    @apply text-[var(--bq-toast--icon-color-loading)];
   }
 
   &.custom {
diff --git a/packages/bee-q/src/components/tooltip/scss/bq-tooltip.scss b/packages/bee-q/src/components/tooltip/scss/bq-tooltip.scss
index c583011ea..4cd18a585 100644
--- a/packages/bee-q/src/components/tooltip/scss/bq-tooltip.scss
+++ b/packages/bee-q/src/components/tooltip/scss/bq-tooltip.scss
@@ -4,22 +4,14 @@
 
 @import './bq-tooltip.variables';
 
-@layer utilities {
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-  }
-}
-
 .bq-tooltip--panel {
+  @include animation-fade-in;
+
   @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)];
-
-  animation: fade-in 0.3s ease;
 }
 
 .bq-tooltip--arrow {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 87c90f0ae..7fa8c0cc5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -85,20 +85,6 @@ const config: Config = {
         xxl3: 'var(--bq-spacing-xxl3)',
         xxl4: 'var(--bq-spacing-xxl4)',
       },
-      keyframes: {
-        'fade-in': {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        'slide-up': {
-          '0%': {
-            transform: 'translateY(10px)',
-          },
-        },
-      },
-      animation: {
-        'slide-in': 'fade-in 0.3s ease, slide-up 0.3s ease',
-      },
     },
   },
   plugins: [

From fa79cbf4da18783043bb5dbef7cadd22b85dda40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Sun, 2 Jul 2023 12:12:04 +0300
Subject: [PATCH 08/10] style: update BEEQ logo

---
 packages/bee-q/.storybook/manager.ts                        | 2 +-
 .../side-menu/_storybook/bq-side-menu.stories.tsx           | 6 +++---
 packages/bee-q/src/global/assets/bee-q_logo.svg             | 1 -
 packages/bee-q/src/global/assets/beeq-logo-small.svg        | 1 +
 packages/bee-q/src/global/assets/beeq-logo.svg              | 1 +
 5 files changed, 6 insertions(+), 5 deletions(-)
 delete mode 100644 packages/bee-q/src/global/assets/bee-q_logo.svg
 create mode 100644 packages/bee-q/src/global/assets/beeq-logo-small.svg
 create mode 100644 packages/bee-q/src/global/assets/beeq-logo.svg

diff --git a/packages/bee-q/.storybook/manager.ts b/packages/bee-q/.storybook/manager.ts
index 71644c614..f9207e1a8 100644
--- a/packages/bee-q/.storybook/manager.ts
+++ b/packages/bee-q/.storybook/manager.ts
@@ -10,7 +10,7 @@ const theme = create({
   // BRAND
   brandTarget: '_self',
   brandTitle: 'Bee-Q Design System',
-  brandImage: './assets/bee-q_logo.svg',
+  brandImage: './assets/beeq-logo.svg',
 
   // UI
   appBg: '#F9FAFB',
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
index eb3a9f4dc..3a3cf9b96 100644
--- 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/global/assets/bee-q_logo.svg b/packages/bee-q/src/global/assets/bee-q_logo.svg
deleted file mode 100644
index 4ba478119..000000000
--- a/packages/bee-q/src/global/assets/bee-q_logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 774 201"><path fill="#000" fill-rule="evenodd" d="M52.937 20.982c.12-.526.183-1.074.183-1.636 0-4.057-3.297-7.346-7.364-7.346-4.068 0-7.365 3.289-7.365 7.346 0 4.056 3.297 7.345 7.365 7.345.596 0 1.175-.07 1.73-.204l2.638 2.412a24.6 24.6 0 0 0-5.531 15.576c0 2.401.343 4.723.983 6.918L17.833 62.48c-8.51 3.4-14.748 9.94-16.964 16.906-2.278 7.162-.17 14.532 7.428 18.567.755.4 1.52.792 2.293 1.173 7.966 3.928 17.218 2.911 25.1-1.138a37.404 37.404 0 0 0 8.683-6.195c1.093 6.427 3.102 12.277 5.846 17.09 4.209 7.386 10.798 13.3 19.18 13.3s14.972-5.914 19.18-13.3c2.668-4.68 4.642-10.341 5.754-16.56a37.342 37.342 0 0 0 8.116 5.665c7.881 4.049 17.133 5.066 25.099 1.138a85.346 85.346 0 0 0 2.293-1.173c7.598-4.035 9.707-11.405 7.428-18.567-2.215-6.967-8.454-13.506-16.964-16.906l-27.152-10.85a24.684 24.684 0 0 0 1.053-7.154c0-6.091-2.207-11.668-5.866-15.979l2.198-2.009a7.403 7.403 0 0 0 1.73.204c4.067 0 7.364-3.289 7.364-7.345 0-4.057-3.297-7.346-7.364-7.346-4.068 0-7.365 3.289-7.365 7.346 0 .562.064 1.11.184 1.636l-2.66 2.432a24.738 24.738 0 0 0-13.028-3.682c-4.972 0-9.603 1.46-13.485 3.972l-2.977-2.722Zm-9.154 52.44C44.2 69.32 44.98 65.4 46.08 61.766l-25.104 10.03c-4.953 1.98-8.155 5.603-9.216 8.94-1 3.14-.221 6.216 3.372 8.124.67.356 1.35.704 2.039 1.043 4.46 2.2 9.521 1.7 14.158-.682 4.741-2.436 8.99-6.857 11.087-12.27l1.367-3.53Zm25.616-34.746c5.464 0 10.167 2.513 13.945 6.308.006-.169.009-.339.009-.51 0-7.686-6.247-13.917-13.954-13.917-7.706 0-13.953 6.231-13.953 13.918 0 .17.003.34.009.51 3.778-3.796 8.48-6.31 13.944-6.31Zm23.409 23.39c1.244 4.193 2.063 8.761 2.395 13.543l.52 1.343c2.095 5.413 6.345 9.834 11.087 12.27 4.636 2.383 9.698 2.881 14.157.682.689-.339 1.368-.687 2.039-1.043 3.594-1.908 4.372-4.983 3.373-8.124-1.062-3.337-4.263-6.96-9.216-8.94l-24.355-9.73Zm-6.591 10.33a4.637 4.637 0 0 1-2.95 5.864c-5.026 1.663-9.293 2.572-13.759 2.555-4.44-.016-8.765-.948-13.885-2.526a4.637 4.637 0 0 1-3.07-5.802 4.653 4.653 0 0 1 5.816-3.063c4.733 1.458 8.054 2.101 11.174 2.113 3.095.011 6.305-.598 10.795-2.084a4.654 4.654 0 0 1 5.879 2.943Zm-2.294 21.65c.698 2.432-.442 5.057-2.548 5.864-4.34 1.663-8.025 2.571-11.882 2.555-3.835-.017-7.569-.948-11.99-2.526-2.12-.756-3.307-3.354-2.653-5.801.655-2.448 2.904-3.82 5.024-3.063 4.087 1.458 6.955 2.1 9.65 2.112 2.672.012 5.444-.597 9.322-2.083 2.105-.806 4.378.51 5.077 2.942Z" clip-rule="evenodd"/><path fill="#000" d="M176.133 179h-20.205v-65.474h21.101c6.351 0 11.786 1.311 16.304 3.932 4.518 2.6 7.982 6.341 10.39 11.222 2.409 4.859 3.613 10.678 3.613 17.455 0 6.82-1.215 12.692-3.645 17.615-2.429 4.902-5.967 8.675-10.614 11.318-4.646 2.621-10.294 3.932-16.944 3.932Zm-12.276-7.033h11.765c5.413 0 9.9-1.045 13.459-3.133 3.559-2.089 6.213-5.062 7.961-8.92 1.747-3.858 2.621-8.451 2.621-13.779 0-5.286-.863-9.836-2.589-13.651-1.727-3.836-4.306-6.778-7.737-8.824-3.432-2.067-7.705-3.101-12.82-3.101h-12.66v51.408Zm76.344 8.056c-4.732 0-8.813-1.044-12.245-3.133-3.41-2.11-6.042-5.051-7.896-8.824-1.833-3.793-2.75-8.205-2.75-13.235 0-5.03.917-9.463 2.75-13.3 1.854-3.857 4.433-6.862 7.736-9.015 3.325-2.174 7.204-3.261 11.637-3.261 2.558 0 5.084.426 7.577 1.279 2.494.852 4.764 2.238 6.81 4.156 2.046 1.897 3.676 4.412 4.891 7.545 1.215 3.133 1.822 6.991 1.822 11.573v3.197h-37.852v-6.522h30.18c0-2.771-.554-5.243-1.663-7.417-1.087-2.174-2.643-3.89-4.667-5.147-2.004-1.258-4.369-1.886-7.098-1.886-3.005 0-5.605.746-7.8 2.238a14.71 14.71 0 0 0-5.019 5.754c-1.173 2.366-1.759 4.902-1.759 7.609v4.348c0 3.708.64 6.852 1.918 9.431 1.301 2.557 3.101 4.508 5.403 5.85 2.302 1.322 4.977 1.982 8.025 1.982 1.982 0 3.772-.277 5.371-.831 1.619-.575 3.015-1.428 4.188-2.557 1.172-1.151 2.078-2.579 2.717-4.284l7.289 2.046a16.17 16.17 0 0 1-3.868 6.522c-1.812 1.854-4.05 3.303-6.714 4.347-2.664 1.024-5.658 1.535-8.983 1.535Zm66.593-39.131-6.778 1.918c-.426-1.129-1.055-2.227-1.886-3.293-.81-1.087-1.918-1.982-3.325-2.685-1.407-.703-3.208-1.055-5.403-1.055-3.005 0-5.509.693-7.513 2.078-1.982 1.364-2.973 3.101-2.973 5.211 0 1.876.682 3.357 2.046 4.444 1.364 1.087 3.495 1.993 6.394 2.717l7.289 1.791c4.391 1.065 7.662 2.696 9.815 4.891 2.152 2.174 3.229 4.977 3.229 8.408 0 2.813-.81 5.328-2.43 7.545-1.598 2.216-3.836 3.964-6.714 5.243-2.877 1.279-6.223 1.918-10.038 1.918-5.009 0-9.154-1.087-12.436-3.261-3.282-2.174-5.361-5.349-6.234-9.527l7.161-1.79c.682 2.643 1.971 4.625 3.868 5.946 1.918 1.322 4.423 1.982 7.513 1.982 3.517 0 6.309-.746 8.376-2.238 2.089-1.513 3.133-3.324 3.133-5.434 0-1.705-.597-3.133-1.79-4.284-1.194-1.173-3.027-2.046-5.499-2.622l-8.184-1.918c-4.497-1.066-7.801-2.717-9.911-4.955-2.088-2.26-3.133-5.084-3.133-8.472 0-2.771.778-5.222 2.334-7.353 1.577-2.132 3.719-3.805 6.426-5.02 2.728-1.214 5.818-1.822 9.271-1.822 4.86 0 8.675 1.066 11.445 3.197 2.792 2.131 4.774 4.945 5.947 8.44ZM319.046 179v-49.106h7.545V179h-7.545Zm3.836-57.29c-1.47 0-2.738-.501-3.804-1.502-1.044-1.002-1.567-2.206-1.567-3.613s.523-2.611 1.567-3.612c1.066-1.002 2.334-1.503 3.804-1.503 1.471 0 2.728.501 3.773 1.503 1.065 1.001 1.598 2.205 1.598 3.612s-.533 2.611-1.598 3.613c-1.045 1.001-2.302 1.502-3.773 1.502Zm37.349 76.728c-3.645 0-6.778-.469-9.399-1.407-2.622-.917-4.806-2.131-6.554-3.645-1.726-1.492-3.101-3.09-4.124-4.795l6.01-4.22c.682.895 1.546 1.918 2.59 3.069 1.044 1.172 2.472 2.185 4.284 3.037 1.833.874 4.231 1.311 7.193 1.311 3.964 0 7.236-.959 9.815-2.877 2.579-1.919 3.868-4.924 3.868-9.016v-9.974h-.639c-.554.895-1.343 2.003-2.366 3.324-1.002 1.301-2.451 2.462-4.348 3.485-1.876 1.002-4.412 1.503-7.609 1.503-3.964 0-7.523-.938-10.678-2.814-3.133-1.875-5.616-4.603-7.449-8.184-1.811-3.58-2.717-7.928-2.717-13.044 0-5.029.884-9.409 2.653-13.139 1.769-3.751 4.231-6.65 7.385-8.696 3.155-2.067 6.799-3.101 10.934-3.101 3.197 0 5.733.533 7.609 1.599 1.897 1.044 3.346 2.237 4.348 3.58 1.023 1.322 1.811 2.409 2.366 3.261h.767v-7.801h7.289v50.513c0 4.22-.959 7.651-2.877 10.294-1.897 2.664-4.455 4.614-7.673 5.85-3.197 1.258-6.756 1.887-10.678 1.887Zm-.256-26.983c3.027 0 5.584-.693 7.673-2.078 2.089-1.385 3.677-3.378 4.764-5.978 1.086-2.6 1.63-5.712 1.63-9.335 0-3.538-.533-6.661-1.599-9.368-1.065-2.706-2.642-4.827-4.731-6.361-2.089-1.535-4.668-2.302-7.737-2.302-3.197 0-5.861.81-7.992 2.429-2.11 1.62-3.698 3.794-4.764 6.522-1.044 2.728-1.566 5.755-1.566 9.08 0 3.41.533 6.426 1.598 9.047 1.087 2.6 2.686 4.646 4.796 6.138 2.131 1.471 4.774 2.206 7.928 2.206Zm42.84-21.995V179h-7.545v-49.106h7.289v7.673h.639c1.151-2.493 2.899-4.497 5.243-6.01 2.345-1.535 5.371-2.302 9.08-2.302 3.325 0 6.234.682 8.728 2.046 2.493 1.343 4.433 3.389 5.818 6.138 1.385 2.728 2.078 6.181 2.078 10.359V179H426.6v-30.691c0-3.858-1.002-6.863-3.005-9.015-2.003-2.174-4.753-3.261-8.248-3.261-2.409 0-4.561.522-6.458 1.566-1.876 1.045-3.357 2.568-4.444 4.572-1.087 2.003-1.63 4.433-1.63 7.289Zm105.22-8.568-6.777 1.918c-.427-1.129-1.055-2.227-1.887-3.293-.81-1.087-1.918-1.982-3.325-2.685-1.406-.703-3.207-1.055-5.402-1.055-3.006 0-5.51.693-7.513 2.078-1.982 1.364-2.974 3.101-2.974 5.211 0 1.876.683 3.357 2.047 4.444 1.364 1.087 3.495 1.993 6.393 2.717l7.29 1.791c4.39 1.065 7.662 2.696 9.814 4.891 2.153 2.174 3.229 4.977 3.229 8.408 0 2.813-.81 5.328-2.429 7.545-1.599 2.216-3.837 3.964-6.714 5.243-2.877 1.279-6.224 1.918-10.039 1.918-5.008 0-9.154-1.087-12.436-3.261-3.282-2.174-5.36-5.349-6.234-9.527l7.161-1.79c.682 2.643 1.972 4.625 3.869 5.946 1.918 1.322 4.422 1.982 7.513 1.982 3.516 0 6.308-.746 8.376-2.238 2.088-1.513 3.133-3.324 3.133-5.434 0-1.705-.597-3.133-1.791-4.284-1.193-1.173-3.026-2.046-5.498-2.622l-8.185-1.918c-4.497-1.066-7.8-2.717-9.91-4.955-2.089-2.26-3.133-5.084-3.133-8.472 0-2.771.778-5.222 2.333-7.353 1.578-2.132 3.72-3.805 6.426-5.02 2.728-1.214 5.819-1.822 9.272-1.822 4.859 0 8.674 1.066 11.445 3.197 2.792 2.131 4.774 4.945 5.946 8.44Zm17.112 56.523c-1.279 0-2.419-.107-3.421-.32-1.002-.192-1.694-.384-2.078-.576l1.918-6.649c1.833.469 3.453.639 4.86.511 1.406-.128 2.653-.756 3.74-1.886 1.108-1.108 2.121-2.909 3.037-5.403l1.407-3.836-18.159-49.362h8.184l13.556 39.131h.511l13.555-39.131h8.184l-20.844 56.267c-.938 2.536-2.099 4.636-3.485 6.298-1.385 1.684-2.994 2.931-4.827 3.741-1.812.81-3.858 1.215-6.138 1.215Zm80.036-56.523-6.777 1.918c-.427-1.129-1.055-2.227-1.887-3.293-.81-1.087-1.918-1.982-3.325-2.685-1.406-.703-3.207-1.055-5.402-1.055-3.006 0-5.51.693-7.513 2.078-1.982 1.364-2.974 3.101-2.974 5.211 0 1.876.683 3.357 2.047 4.444 1.364 1.087 3.495 1.993 6.393 2.717l7.29 1.791c4.39 1.065 7.662 2.696 9.814 4.891 2.153 2.174 3.229 4.977 3.229 8.408 0 2.813-.81 5.328-2.429 7.545-1.599 2.216-3.837 3.964-6.714 5.243-2.877 1.279-6.224 1.918-10.039 1.918-5.008 0-9.154-1.087-12.436-3.261-3.282-2.174-5.36-5.349-6.234-9.527l7.161-1.79c.682 2.643 1.972 4.625 3.869 5.946 1.918 1.322 4.422 1.982 7.513 1.982 3.516 0 6.308-.746 8.376-2.238 2.088-1.513 3.133-3.324 3.133-5.434 0-1.705-.597-3.133-1.791-4.284-1.193-1.173-3.026-2.046-5.498-2.622l-8.185-1.918c-4.497-1.066-7.8-2.717-9.91-4.955-2.089-2.26-3.133-5.084-3.133-8.472 0-2.771.778-5.222 2.333-7.353 1.578-2.132 3.72-3.805 6.426-5.02 2.728-1.214 5.819-1.822 9.272-1.822 4.859 0 8.674 1.066 11.445 3.197 2.792 2.131 4.774 4.945 5.946 8.44Zm33.608-10.998v6.394h-25.448v-6.394h25.448ZM620.76 118.13h7.545v46.803c0 2.132.309 3.73.927 4.796.64 1.044 1.45 1.747 2.43 2.11a9.756 9.756 0 0 0 3.165.511c.831 0 1.513-.042 2.046-.128l1.279-.255 1.534 6.777c-.511.192-1.225.384-2.142.576-.916.213-2.078.319-3.484.319-2.132 0-4.22-.458-6.266-1.374-2.025-.917-3.709-2.313-5.052-4.188-1.321-1.876-1.982-4.242-1.982-7.098V118.13Zm49.442 61.893c-4.732 0-8.813-1.044-12.245-3.133-3.41-2.11-6.042-5.051-7.896-8.824-1.833-3.793-2.75-8.205-2.75-13.235 0-5.03.917-9.463 2.75-13.3 1.854-3.857 4.433-6.862 7.736-9.015 3.325-2.174 7.204-3.261 11.637-3.261 2.558 0 5.083.426 7.577 1.279 2.494.852 4.764 2.238 6.81 4.156 2.046 1.897 3.676 4.412 4.891 7.545 1.215 3.133 1.822 6.991 1.822 11.573v3.197h-37.852v-6.522h30.18c0-2.771-.555-5.243-1.663-7.417-1.087-2.174-2.643-3.89-4.667-5.147-2.004-1.258-4.37-1.886-7.098-1.886-3.005 0-5.605.746-7.8 2.238a14.72 14.72 0 0 0-5.02 5.754c-1.172 2.366-1.758 4.902-1.758 7.609v4.348c0 3.708.639 6.852 1.918 9.431 1.3 2.557 3.101 4.508 5.403 5.85 2.302 1.322 4.977 1.982 8.025 1.982 1.982 0 3.772-.277 5.37-.831 1.62-.575 3.016-1.428 4.188-2.557 1.173-1.151 2.079-2.579 2.718-4.284l7.289 2.046a16.17 16.17 0 0 1-3.868 6.522c-1.812 1.854-4.05 3.303-6.714 4.347-2.664 1.024-5.659 1.535-8.983 1.535ZM702.011 179v-49.106h7.29v7.673h.639c1.023-2.621 2.675-4.657 4.955-6.106 2.281-1.471 5.019-2.206 8.216-2.206 3.24 0 5.936.735 8.089 2.206 2.174 1.449 3.868 3.485 5.083 6.106h.511c1.258-2.536 3.144-4.55 5.659-6.042 2.515-1.513 5.531-2.27 9.048-2.27 4.39 0 7.981 1.375 10.773 4.124 2.792 2.728 4.188 6.98 4.188 12.756V179h-7.544v-32.865c0-3.623-.992-6.213-2.974-7.769-1.982-1.555-4.316-2.333-7.001-2.333-3.453 0-6.128 1.044-8.024 3.133-1.897 2.067-2.846 4.689-2.846 7.864V179h-7.672v-33.632c0-2.792-.906-5.041-2.718-6.746-1.812-1.726-4.145-2.589-7.001-2.589-1.961 0-3.794.522-5.499 1.566-1.684 1.045-3.048 2.494-4.092 4.348-1.023 1.833-1.535 3.954-1.535 6.362V179h-7.545ZM156.691 87V21.526h13.619v24.617h.415c.597-1.322 1.46-2.665 2.59-4.029 1.151-1.385 2.643-2.536 4.476-3.452 1.854-.938 4.156-1.407 6.905-1.407 3.581 0 6.884.938 9.911 2.813 3.026 1.855 5.445 4.657 7.257 8.409 1.811 3.73 2.717 8.408 2.717 14.034 0 5.478-.884 10.103-2.653 13.875-1.748 3.751-4.135 6.597-7.161 8.536-3.006 1.918-6.373 2.877-10.103 2.877-2.643 0-4.891-.437-6.745-1.31-1.833-.874-3.336-1.972-4.508-3.293-1.172-1.343-2.068-2.697-2.686-4.06h-.607V87h-13.427Zm13.331-24.553c0 2.92.405 5.467 1.215 7.641.81 2.174 1.982 3.868 3.517 5.083 1.534 1.194 3.399 1.79 5.594 1.79 2.217 0 4.092-.607 5.627-1.822 1.534-1.236 2.696-2.941 3.485-5.115.809-2.195 1.214-4.72 1.214-7.577 0-2.834-.394-5.328-1.182-7.48-.789-2.153-1.951-3.837-3.485-5.052-1.535-1.215-3.421-1.822-5.659-1.822-2.216 0-4.092.586-5.626 1.758-1.514 1.172-2.675 2.835-3.485 4.988-.81 2.152-1.215 4.688-1.215 7.608Zm66.025 25.512c-5.051 0-9.399-1.023-13.043-3.069-3.623-2.067-6.415-4.987-8.376-8.76-1.961-3.793-2.941-8.28-2.941-13.459 0-5.051.98-9.484 2.941-13.3 1.961-3.814 4.721-6.788 8.28-8.919 3.581-2.131 7.779-3.197 12.596-3.197 3.24 0 6.255.522 9.047 1.567 2.814 1.023 5.265 2.568 7.353 4.635 2.11 2.068 3.752 4.668 4.924 7.8 1.172 3.113 1.758 6.757 1.758 10.934v3.74h-41.465v-8.44h28.645c0-1.96-.426-3.697-1.279-5.21a9.157 9.157 0 0 0-3.548-3.549c-1.492-.874-3.229-1.31-5.211-1.31-2.068 0-3.901.479-5.499 1.438a10.095 10.095 0 0 0-3.709 3.804c-.895 1.578-1.353 3.336-1.374 5.276v8.024c0 2.43.447 4.529 1.343 6.298.916 1.769 2.205 3.133 3.868 4.092 1.662.96 3.634 1.439 5.914 1.439 1.513 0 2.899-.213 4.156-.64 1.258-.426 2.334-1.065 3.229-1.918.895-.852 1.577-1.897 2.046-3.133l12.596.831c-.639 3.027-1.95 5.67-3.932 7.929-1.961 2.238-4.497 3.985-7.609 5.243-3.09 1.236-6.66 1.854-10.71 1.854Zm53.806 0c-5.052 0-9.4-1.023-13.044-3.069-3.623-2.067-6.415-4.987-8.376-8.76-1.961-3.793-2.941-8.28-2.941-13.459 0-5.051.98-9.484 2.941-13.3 1.961-3.814 4.721-6.788 8.28-8.919 3.581-2.131 7.779-3.197 12.596-3.197 3.24 0 6.255.522 9.047 1.567 2.814 1.023 5.265 2.568 7.354 4.635 2.11 2.068 3.751 4.668 4.923 7.8 1.172 3.113 1.758 6.757 1.758 10.934v3.74h-41.465v-8.44h28.645c0-1.96-.426-3.697-1.278-5.21a9.166 9.166 0 0 0-3.549-3.549c-1.492-.874-3.229-1.31-5.211-1.31-2.068 0-3.9.479-5.499 1.438a10.085 10.085 0 0 0-3.708 3.804c-.896 1.578-1.354 3.336-1.375 5.276v8.024c0 2.43.447 4.529 1.343 6.298.916 1.769 2.205 3.133 3.868 4.092 1.662.96 3.634 1.439 5.914 1.439 1.514 0 2.899-.213 4.156-.64 1.258-.426 2.334-1.065 3.229-1.918.895-.852 1.577-1.897 2.046-3.133l12.596.831c-.639 3.027-1.95 5.67-3.932 7.929-1.961 2.238-4.497 3.985-7.609 5.243-3.09 1.236-6.66 1.854-10.709 1.854Zm62.021-33.248v10.805h-29.86V54.711h29.86Zm44.054 50.704v-26.28h-.416c-.639 1.364-1.545 2.718-2.717 4.06-1.151 1.322-2.653 2.42-4.508 3.294-1.833.873-4.07 1.31-6.713 1.31-3.73 0-7.108-.959-10.135-2.877-3.005-1.94-5.392-4.785-7.161-8.536-1.748-3.772-2.621-8.397-2.621-13.875 0-5.627.905-10.305 2.717-14.035 1.812-3.75 4.22-6.553 7.225-8.408 3.027-1.875 6.341-2.813 9.943-2.813 2.749 0 5.04.469 6.873 1.407 1.854.916 3.346 2.067 4.476 3.453 1.151 1.363 2.025 2.706 2.621 4.028h.576v-8.248h13.427v67.52h-13.587ZM385.89 76.961c2.195 0 4.049-.596 5.562-1.79 1.535-1.215 2.707-2.909 3.517-5.083.831-2.174 1.247-4.72 1.247-7.64s-.405-5.457-1.215-7.61c-.81-2.152-1.982-3.815-3.517-4.987-1.534-1.172-3.399-1.758-5.594-1.758-2.238 0-4.124.607-5.659 1.822-1.535 1.215-2.696 2.899-3.485 5.051-.788 2.153-1.183 4.647-1.183 7.481 0 2.856.395 5.382 1.183 7.577.81 2.174 1.972 3.88 3.485 5.115 1.535 1.215 3.421 1.823 5.659 1.823Z"/></svg>
\ No newline at end of file
diff --git a/packages/bee-q/src/global/assets/beeq-logo-small.svg b/packages/bee-q/src/global/assets/beeq-logo-small.svg
new file mode 100644
index 000000000..36b895827
--- /dev/null
+++ b/packages/bee-q/src/global/assets/beeq-logo-small.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 1080 1080"><path fill-rule="evenodd" 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>
\ No newline at end of file
diff --git a/packages/bee-q/src/global/assets/beeq-logo.svg b/packages/bee-q/src/global/assets/beeq-logo.svg
new file mode 100644
index 000000000..5af1daef4
--- /dev/null
+++ b/packages/bee-q/src/global/assets/beeq-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 108 40"><path fill="#2b2e33" fill-rule="evenodd" d="M9.327 34.899c-.724-.551-1.778-.755-2.542-.266-1.116.735-1.426 2.245-.393 3.102C7.901 39.02 9.946 40 11.951 40c4.07 0 7.295-2.775 8.287-6.183 2.851 1.898 6.695 2 9.815.102l1.55 1.612c.785.796 2.046.796 2.893 0 .827-.775.889-2.081.124-2.897l-1.55-1.613c2.067-3.04 2.129-6.896.372-9.835 3.451-.755 6.386-3.897 6.551-8.06.248-6.346-6.117-10.264-11.448-7.06l-6.778 4.08a8.425 8.425 0 0 0-.682-.816c-1.819-1.918-4.422-2.693-6.902-2.346 0-.245.02-.51.062-.776.144-1.02.537-1.959 1.302-2.714.847-.795.888-2.08.124-2.897-.786-.796-2.046-.796-2.893 0-1.654 1.591-2.356 3.53-2.604 5.203a10.578 10.578 0 0 0 0 2.918 5.877 5.877 0 0 0-.682.592 6.145 6.145 0 0 0-.62.653 10.253 10.253 0 0 0-2.914-.143c-1.674.163-3.637.755-5.29 2.347-.847.796-.889 2.081-.124 2.897.785.796 2.046.796 2.893 0 .785-.734 1.757-1.081 2.749-1.183.268 0 .537-.04.785 0-.496 2.49.186 5.142 2.004 7.06.207.204.393.388.62.572l-.826 1.183c-.331.49-.434 1.04-.331 1.55l.227 1.144c.062.306-.02.632-.186.877-.268.408-.516.49-.909.571l-1.364.286c-.62.123-1.178.51-1.55 1.082-.764 1.142-.475 2.652.64 3.367 1.117.714 2.625.367 3.39-.776a2.46 2.46 0 0 0 .372-1.836l-.269-1.347c-.082-.388-.082-.674.166-1.061.165-.265.413-.45.723-.53l1.136-.266a2.087 2.087 0 0 0 1.282-.939l.558-.857 3.265 6c1.446 2.693-.682 6.06-3.865 6.06-.909 0-1.9-.49-2.727-1.122Zm8.968-11.734 1.426 2.898c1.736-.347 4.546-1.735 5.848-5.775l-2.686-1.51-2.294 2.204-2.273 2.183h-.021Zm10.601 6.571c-2.15 2.061-5.414 1.898-7.212-.102 2.624-.939 5.662-3.081 7.336-7.264 2.005 1.897 2.087 5.264-.124 7.366ZM17.799 18.064c1.674-1.612 1.798-4.204.248-5.816-1.509-1.612-4.112-1.632-5.786-.02-1.674 1.612-1.798 4.204-.248 5.816 1.508 1.612 4.112 1.632 5.786.02Zm6.55-4.897 5.973-3.571c2.686-1.633 5.869.326 5.745 3.53-.124 3.204-3.513 5.183-6.055 3.591l-5.662-3.55Z" clip-rule="evenodd"/><path fill="#2b2e33" d="M63.87 19.845c.62.76.929 1.66.929 2.645 0 .9-.225 1.687-.675 2.362-.45.675-1.07 1.21-1.913 1.604-.844.393-1.828.59-2.954.59H52v-16.82h6.948c1.153 0 2.138.196 2.954.562.815.365 1.462.872 1.884 1.547.422.647.647 1.406.647 2.25 0 .985-.253 1.8-.787 2.447a4.367 4.367 0 0 1-2.082 1.407c.928.14 1.716.619 2.307 1.406Zm-8.494-2.7h3.094c.816 0 1.434-.169 1.856-.535.422-.365.647-.872.647-1.547 0-.675-.225-1.21-.647-1.575-.422-.366-1.04-.563-1.856-.563h-3.094v4.22Zm5.316 6.582c.45-.394.675-.928.675-1.631 0-.732-.253-1.294-.731-1.688-.479-.422-1.126-.619-1.941-.619h-3.32v4.529h3.404c.816-.028 1.463-.225 1.913-.59ZM70.425 12.925v4.22h5.654v2.672h-5.654v4.473h6.385v2.756h-9.76v-16.85h9.76v2.758h-6.385v-.029ZM82.69 12.925v4.22h5.653v2.672H82.69v4.473h6.386v2.756h-9.761v-16.85h9.76v2.758H82.69v-.029ZM103.73 30l-2.56-3.066a9.303 9.303 0 0 1-2.166.253c-1.575 0-3.01-.366-4.332-1.097a8.173 8.173 0 0 1-3.122-3.066c-.76-1.322-1.153-2.785-1.153-4.445 0-1.631.393-3.122 1.153-4.416.76-1.322 1.828-2.335 3.122-3.066C95.994 10.366 97.43 10 99.004 10c1.604 0 3.038.366 4.36 1.097 1.322.731 2.335 1.772 3.123 3.066.787 1.294 1.153 2.785 1.153 4.416 0 1.491-.309 2.87-.956 4.08-.647 1.237-1.491 2.221-2.588 3.01L107.949 30h-4.219Zm-9.255-8.467c.422.844 1.041 1.519 1.829 1.97.787.45 1.688.674 2.7.674 1.013 0 1.913-.225 2.673-.675.759-.45 1.378-1.125 1.8-1.969.422-.844.647-1.828.647-2.954 0-1.125-.225-2.11-.647-2.953a4.631 4.631 0 0 0-1.8-1.941c-.76-.45-1.66-.675-2.673-.675-1.012 0-1.913.225-2.7.675-.788.45-1.379 1.097-1.829 1.94-.422.845-.647 1.83-.647 2.954 0 1.126.225 2.11.647 2.954Z"/></svg>

From 57818d256a4828365f6e101053a7909d43272be8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Sun, 2 Jul 2023 12:23:50 +0300
Subject: [PATCH 09/10] docs(storybook): update theme colors

---
 packages/bee-q/.storybook/manager.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/bee-q/.storybook/manager.ts b/packages/bee-q/.storybook/manager.ts
index f9207e1a8..a7f5e5f0d 100644
--- a/packages/bee-q/.storybook/manager.ts
+++ b/packages/bee-q/.storybook/manager.ts
@@ -4,8 +4,8 @@ import { create } from '@storybook/theming';
 const theme = create({
   base: 'light',
 
-  colorPrimary: '#009bb4',
-  colorSecondary: '#4F46E5',
+  colorPrimary: '#f0f1f2',
+  colorSecondary: '#4f46e5',
 
   // BRAND
   brandTarget: '_self',
@@ -13,20 +13,20 @@ const theme = create({
   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({

From 6f068766674e80243a7dc76dfb738fa5c2eeedf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?= <dabiel.ramos@endava.com>
Date: Sun, 2 Jul 2023 12:58:44 +0300
Subject: [PATCH 10/10] fix: animation-spin typo

---
 packages/bee-q/src/components/button/scss/bq-button.scss   | 2 +-
 packages/bee-q/src/components/spinner/scss/bq-spinner.scss | 2 +-
 packages/bee-q/src/components/toast/scss/bq-toast.scss     | 2 +-
 packages/bee-q/src/global/styles/mixins/_keyframes.scss    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/bee-q/src/components/button/scss/bq-button.scss b/packages/bee-q/src/components/button/scss/bq-button.scss
index 8b3cbf834..11c58f18a 100644
--- a/packages/bee-q/src/components/button/scss/bq-button.scss
+++ b/packages/bee-q/src/components/button/scss/bq-button.scss
@@ -151,6 +151,6 @@
 /* -------------------------------------------------------------------------- */
 
 .bq-button__loader {
-  @include animtion-spin;
+  @include animation-spin;
   @apply absolute;
 }
diff --git a/packages/bee-q/src/components/spinner/scss/bq-spinner.scss b/packages/bee-q/src/components/spinner/scss/bq-spinner.scss
index ec522ee92..a935cf4f9 100644
--- 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 {
-    @include animtion-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
index 45ab69f05..e81140ff4 100644
--- a/packages/bee-q/src/components/toast/scss/bq-toast.scss
+++ b/packages/bee-q/src/components/toast/scss/bq-toast.scss
@@ -42,7 +42,7 @@
   }
 
   &.loading {
-    @include animtion-spin;
+    @include animation-spin;
     @apply text-[var(--bq-toast--icon-color-loading)];
   }
 
diff --git a/packages/bee-q/src/global/styles/mixins/_keyframes.scss b/packages/bee-q/src/global/styles/mixins/_keyframes.scss
index 60d914c50..6b1b3dc92 100644
--- a/packages/bee-q/src/global/styles/mixins/_keyframes.scss
+++ b/packages/bee-q/src/global/styles/mixins/_keyframes.scss
@@ -32,6 +32,6 @@
   animation: fade-in $duration $timing-function $delay, slide-in $duration $timing-function $delay;
 }
 
-@mixin animtion-spin($duration: 1s, $delay: 0s, $timing-function: linear) {
+@mixin animation-spin($duration: 1s, $delay: 0s, $timing-function: linear) {
   animation: spin $duration $timing-function $delay infinite;
 }