From 49aece2994ba6eeec5358aa37c128708775f4fbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?=
 <dgonzalezr@users.noreply.github.com>
Date: Fri, 11 Aug 2023 22:52:05 +0300
Subject: [PATCH] feat(Theme): add dark mode support (#435)

---
 config/tailwind.declarative.colors.ts         | 166 +++---
 config/tailwind.primitve.colors.ts            |  14 +
 config/theme/default/dark.ts                  | 179 ++++++
 config/theme/default/index.ts                 |   3 +
 config/theme/default/light.ts                 | 179 ++++++
 config/theme/default/root.ts                  |  48 ++
 package-lock.json                             | 523 +++++++++++++++++-
 package.json                                  |   1 +
 packages/bee-q/.storybook/preview.ts          |  66 ++-
 .../src/_storybook/foundation/typography.mdx  |  13 +-
 .../avatar/scss/bq-avatar.variables.scss      |   4 +-
 .../badge/scss/bq-badge.variables.scss        |   2 +-
 .../scss/bq-breadcrumb-item.scss              |  17 +-
 .../scss/bq-breadcrumb-item.variables.scss    |  41 +-
 .../src/components/button/scss/bq-button.scss |  12 +-
 .../src/components/checkbox/bq-checkbox.tsx   |   8 +-
 .../components/checkbox/scss/bq-checkbox.scss |   4 +-
 .../dialog/_storybook/bq-dialog.stories.tsx   |   8 +-
 .../bee-q/src/components/dialog/bq-dialog.tsx |   2 +-
 .../src/components/dialog/scss/bq-dialog.scss |  17 +-
 .../dialog/scss/bq-dialog.variables.scss      |   1 +
 .../_storybook/bq-dropdown.stories.tsx        |   2 +-
 .../src/components/input/scss/bq-input.scss   |   4 +-
 .../input/scss/bq-input.variables.scss        |   4 +-
 .../src/components/option/scss/bq-option.scss |   2 +-
 .../src/components/radio/scss/bq-radio.scss   |   2 +-
 .../scss/bq-side-menu-item.variables.scss     |   2 +-
 .../_storybook/bq-side-menu.stories.tsx       |   2 +-
 .../side-menu/scss/bq-side-menu.scss          |   4 +-
 .../scss/bq-side-menu.variables.scss          |   2 +-
 .../bee-q/src/components/switch/bq-switch.tsx |   4 +-
 packages/bee-q/src/components/tab/bq-tab.tsx  |  16 +-
 .../textarea/scss/bq-textarea.variables.scss  |   4 +-
 packages/bee-q/src/global/styles/default.scss |   5 -
 .../bee-q/src/global/styles/tailwind.pcss     | 153 -----
 .../styles/themes/default/_bg-colors.scss     |  12 -
 .../styles/themes/default/_icon-colors.scss   |  26 -
 .../styles/themes/default/_spacing.scss       |  17 -
 .../styles/themes/default/_stroke-colors.scss |  45 --
 .../styles/themes/default/_text-colors.scss   |  28 -
 .../styles/themes/default/_ui-colors.scss     |  51 --
 .../global/styles/themes/default/index.scss   |  15 -
 .../src/global/styles/utils/_typography.scss  |  65 +++
 .../src/global/styles/variables/_base.scss    |  84 +++
 .../styles/variables/_border-radius.scss      |   9 -
 .../global/styles/variables/_box-shadow.scss  |   6 -
 .../src/global/styles/variables/_colors.scss  |  85 +--
 .../global/styles/variables/_typography.scss  |  37 --
 .../src/global/styles/variables/index.scss    |   4 +-
 packages/bee-q/stencil.config.ts              |  19 +-
 postcss.config.js                             |   1 +
 tailwind.config.ts                            |  55 +-
 52 files changed, 1417 insertions(+), 656 deletions(-)
 create mode 100644 config/theme/default/dark.ts
 create mode 100644 config/theme/default/index.ts
 create mode 100644 config/theme/default/light.ts
 create mode 100644 config/theme/default/root.ts
 delete mode 100644 packages/bee-q/src/global/styles/themes/default/_bg-colors.scss
 delete mode 100644 packages/bee-q/src/global/styles/themes/default/_icon-colors.scss
 delete mode 100644 packages/bee-q/src/global/styles/themes/default/_spacing.scss
 delete mode 100644 packages/bee-q/src/global/styles/themes/default/_stroke-colors.scss
 delete mode 100644 packages/bee-q/src/global/styles/themes/default/_text-colors.scss
 delete mode 100644 packages/bee-q/src/global/styles/themes/default/_ui-colors.scss
 delete mode 100644 packages/bee-q/src/global/styles/themes/default/index.scss
 create mode 100644 packages/bee-q/src/global/styles/variables/_base.scss
 delete mode 100644 packages/bee-q/src/global/styles/variables/_border-radius.scss
 delete mode 100644 packages/bee-q/src/global/styles/variables/_box-shadow.scss
 delete mode 100644 packages/bee-q/src/global/styles/variables/_typography.scss

diff --git a/config/tailwind.declarative.colors.ts b/config/tailwind.declarative.colors.ts
index bfb88e637..cf7f44663 100644
--- a/config/tailwind.declarative.colors.ts
+++ b/config/tailwind.declarative.colors.ts
@@ -7,8 +7,84 @@ export const DECLARATIVE_COLORS = {
     primary: 'var(--bq-background--primary)',
     secondary: 'var(--bq-background--secondary)',
     tertiary: 'var(--bq-background--tertiary)',
+    alt: 'var(--bq-background--alt)',
     inverse: 'var(--bq-background--inverse)',
     brand: 'var(--bq-background--brand)',
+    overlay: 'var(--bq-background--overlay)',
+  },
+  data: {
+    black: 'var(--bq-data--black)',
+    blue: 'var(--bq-data--blue)',
+    corai: 'var(--bq-data--corai)',
+    cyan: 'var(--bq-data--cyan)',
+    green: 'var(--bq-data--green)',
+    grey: 'var(--bq-data--grey)',
+    indigo: 'var(--bq-data--indigo)',
+    lime: 'var(--bq-data--lime)',
+    magenta: 'var(--bq-data--magenta)',
+    orange: 'var(--bq-data--orange)',
+    purple: 'var(--bq-data--purple)',
+    red: 'var(--bq-data--red)',
+    sky: 'var(--bq-data--sky)',
+    teal: 'var(--bq-data--teal)',
+    yellow: 'var(--bq-data--yellow)',
+  },
+  focus: 'var(--bq-focus)',
+  icon: {
+    primary: 'var(--bq-icon--primary)',
+    'primary-hover': 'var(--bq-icon--primary-hover)',
+    'primary-active': 'var(--bq-icon--primary-active)',
+    'primary-disabled': 'var(--bq-icon--primary-disabled)',
+    secondary: 'var(--bq-icon--secondary)',
+    'secondary-hover': 'var(--bq-icon--secondary-hover)',
+    'secondary-active': 'var(--bq-icon--secondary-active)',
+    'secondary-disabled': 'var(--bq-icon--secondary-disabled)',
+    'secondary-inverse': 'var(--bq-icon--secondary-inverse)',
+    'secondary-inverse-disabled': 'var(--bq-icon--secondary-inverse-disabled)',
+    brand: 'var(--bq-icon--brand)',
+    'brand-hover': 'var(--bq-icon--brand-hover)',
+    'brand-active': 'var(--bq-icon--brand-active)',
+    'brand-disabled': 'var(--bq-icon--brand-disabled)',
+    info: 'var(--bq-icon--info)',
+    success: 'var(--bq-icon--success)',
+    warning: 'var(--bq-icon--warning)',
+    danger: 'var(--bq-icon--danger)',
+  },
+  stroke: {
+    primary: 'var(--bq-stroke--primary)',
+    'primary-hover': 'var(--bq-stroke--primary-hover)',
+    'primary-active': 'var(--bq-stroke--primary-active)',
+    'primary-disabled': 'var(--bq-stroke--primary-disabled)',
+    secondary: 'var(--bq-stroke--secondary)',
+    'secondary-hover': 'var(--bq-stroke--secondary-hover)',
+    'secondary-active': 'var(--bq-stroke--secondary-active)',
+    'secondary-disabled': 'var(--bq-stroke--secondary-disabled)',
+    tertiary: 'var(--bq-stroke--tertiary)',
+    'tertiary-hover': 'var(--bq-stroke--tertiary-hover)',
+    'tertiary-active': 'var(--bq-stroke--tertiary-active)',
+    'tertiary-disabled': 'var(--bq-stroke--tertiary-disabled)',
+    inverse: 'var(--bq-stroke--inverse)',
+    'inverse-hover': 'var(--bq-stroke--inverse-hover)',
+    'inverse-active': 'var(--bq-stroke--inverse-active)',
+    'inverse-disabled': 'var(--bq-stroke--inverse-disabled)',
+    brand: 'var(--bq-stroke--brand)',
+    'brand-hover': 'var(--bq-stroke--brand-hover)',
+    'brand-active': 'var(--bq-stroke--brand-active)',
+    'brand-disabled': 'var(--bq-stroke--brand-disabled)',
+    'brand-alt': 'var(--bq-stroke--brand-alt)',
+    'brand-focus': 'var(--bq-stroke--brand-focus)',
+    success: 'var(--bq-stroke--success)',
+    'success-hover': 'var(--bq-stroke--success-hover)',
+    'success-active': 'var(--bq-stroke--success-active)',
+    'success-disabled': 'var(--bq-stroke--success-disabled)',
+    warning: 'var(--bq-stroke--warning)',
+    'warning-hover': 'var(--bq-stroke--warning-hover)',
+    'warning-active': 'var(--bq-stroke--warning-active)',
+    'warning-disabled': 'var(--bq-stroke--warning-disabled)',
+    danger: 'var(--bq-stroke--danger)',
+    'danger-hover': 'var(--bq-stroke--danger-hover)',
+    'danger-active': 'var(--bq-stroke--danger-active)',
+    'danger-disabled': 'var(--bq-stroke--danger-disabled)',
   },
   text: {
     /** Primary */
@@ -24,123 +100,55 @@ export const DECLARATIVE_COLORS = {
     'secondary-inverse': 'var(--bq-text--secondary-inverse)',
     /** Inverse */
     inverse: 'var(--bq-text--inverse)',
+    'inverse-disabled': 'var(--bq-text--inverse-disabled)',
     /** Brand */
     brand: 'var(--bq-text--brand)',
     'brand-hover': 'var(--bq-text--brand-hover)',
     'brand-active': 'var(--bq-text--brand-active)',
     'brand-disabled': 'var(--bq-text--brand-disabled)',
     /** Feedback */
+    info: 'var(--bq-text--info)',
     success: 'var(--bq-text--success)',
     warning: 'var(--bq-text--warning)',
     danger: 'var(--bq-text--danger)',
   },
-  icon: {
-    /** Primary */
-    primary: 'var(--bq-icon--primary)',
-    'primary-hover': 'var(--bq-icon--primary-hover)',
-    'primary-active': 'var(--bq-icon--primary-active)',
-    'primary-disabled': 'var(--bq-icon--primary-disabled)',
-    /** Secondary */
-    secondary: 'var(--bq-icon--secondary)',
-    'secondary-hover': 'var(--bq-icon--secondary-hover)',
-    'secondary-active': 'var(--bq-icon--secondary-active)',
-    'secondary-disabled': 'var(--bq-icon--secondary-disabled)',
-    'secondary-inverse': 'var(--bq-icon--secondary-inverse)',
-    /** Brand */
-    brand: 'var(--bq-icon--brand)',
-    'brand-hover': 'var(--bq-icon--brand-hover)',
-    'brand-active': 'var(--bq-icon--brand-active)',
-    'brand-disabled': 'var(--bq-icon--brand-disabled)',
-    /** Feedback */
-    success: 'var(--bq-icon--success)',
-    warning: 'var(--bq-icon--warning)',
-    danger: 'var(--bq-icon--danger)',
-  },
   ui: {
-    /** Primary */
     primary: 'var(--bq-ui--primary)',
     'primary-hover': 'var(--bq-ui--primary-hover)',
     'primary-active': 'var(--bq-ui--primary-active)',
     'primary-disabled': 'var(--bq-ui--primary-disabled)',
-    /** Secondary */
+    'primary-alt': 'var(--bq-ui--primary-alt)',
     secondary: 'var(--bq-ui--secondary)',
     'secondary-hover': 'var(--bq-ui--secondary-hover)',
     'secondary-active': 'var(--bq-ui--secondary-active)',
     'secondary-disabled': 'var(--bq-ui--secondary-disabled)',
-    'secondary-light': 'var(--bq-ui--secondary-light)',
-    /** Tiertary */
-    tiertary: 'var(--bq-ui--tiertary)',
-    'tiertary-hover': 'var(--bq-ui--tiertary-hover)',
-    'tiertary-active': 'var(--bq-ui--tiertary-active)',
-    'tiertary-disabled': 'var(--bq-ui--tiertary-disabled)',
-    /** Inverse */
+    tertiary: 'var(--bq-ui--tertiary)',
+    'tertiary-hover': 'var(--bq-ui--tertiary-hover)',
+    'tertiary-active': 'var(--bq-ui--tertiary-active)',
+    'tertiary-disabled': 'var(--bq-ui--tertiary-disabled)',
     inverse: 'var(--bq-ui--inverse)',
     'inverse-hover': 'var(--bq-ui--inverse-hover)',
     'inverse-active': 'var(--bq-ui--inverse-active)',
     'inverse-disabled': 'var(--bq-ui--inverse-disabled)',
-    /** Brand */
     brand: 'var(--bq-ui--brand)',
     'brand-hover': 'var(--bq-ui--brand-hover)',
     'brand-active': 'var(--bq-ui--brand-active)',
     'brand-disabled': 'var(--bq-ui--brand-disabled)',
-    'brand-light': 'var(--bq-ui--brand-light)',
-    /** Success */
+    'brand-alt': 'var(--bq-ui--brand-alt)',
     success: 'var(--bq-ui--success)',
     'success-hover': 'var(--bq-ui--success-hover)',
     'success-active': 'var(--bq-ui--success-active)',
     'success-disabled': 'var(--bq-ui--success-disabled)',
-    'success-light': 'var(--bq-ui--success-light)',
-    /** Warning */
+    'success-alt': 'var(--bq-ui--success-alt)',
     warning: 'var(--bq-ui--warning)',
     'warning-hover': 'var(--bq-ui--warning-hover)',
     'warning-active': 'var(--bq-ui--warning-active)',
     'warning-disabled': 'var(--bq-ui--warning-disabled)',
-    'warning-light': 'var(--bq-ui--warning-light)',
-    /** Danger */
+    'warning-alt': 'var(--bq-ui--warning-alt)',
     danger: 'var(--bq-ui--danger)',
     'danger-hover': 'var(--bq-ui--danger-hover)',
     'danger-active': 'var(--bq-ui--danger-active)',
     'danger-disabled': 'var(--bq-ui--danger-disabled)',
-    'danger-light': 'var(--bq-ui--danger-light)',
-  },
-  stroke: {
-    /** Primary */
-    primary: 'var(--bq-stroke--primary)',
-    'primary-hover': 'var(--bq-stroke--primary-hover)',
-    'primary-active': 'var(--bq-stroke--primary-active)',
-    'primary-disabled': 'var(--bq-stroke--primary-disabled)',
-    /** Secondary */
-    secondary: 'var(--bq-stroke--secondary)',
-    'secondary-hover': 'var(--bq-stroke--secondary-hover)',
-    'secondary-active': 'var(--bq-stroke--secondary-active)',
-    'secondary-disabled': 'var(--bq-stroke--secondary-disabled)',
-    'secondary-light': 'var(--bq-stroke--secondary-light)',
-    /** Tiertary */
-    tiertary: 'var(--bq-stroke--tiertary)',
-    'tiertary-hover': 'var(--bq-stroke--tiertary-hover)',
-    'tiertary-active': 'var(--bq-stroke--tiertary-active)',
-    'tiertary-disabled': 'var(--bq-stroke--tiertary-disabled)',
-    /** Inverse */
-    inverse: 'var(--bq-stroke--inverse)',
-    /** Brand */
-    brand: 'var(--bq-stroke--brand)',
-    'brand-hover': 'var(--bq-stroke--brand-hover)',
-    'brand-active': 'var(--bq-stroke--brand-active)',
-    'brand-disabled': 'var(--bq-stroke--brand-disabled)',
-    /** Success */
-    success: 'var(--bq-stroke--success)',
-    'success-hover': 'var(--bq-stroke--success-hover)',
-    'success-active': 'var(--bq-stroke--success-active)',
-    'success-disabled': 'var(--bq-stroke--success-disabled)',
-    /** Warning */
-    warning: 'var(--bq-stroke--warning)',
-    'warning-hover': 'var(--bq-stroke--warning-hover)',
-    'warning-active': 'var(--bq-stroke--warning-active)',
-    'warning-disabled': 'var(--bq-stroke--warning-disabled)',
-    /** Danger */
-    danger: 'var(--bq-stroke--danger)',
-    'danger-hover': 'var(--bq-stroke--danger-hover)',
-    'danger-active': 'var(--bq-stroke--danger-active)',
-    'danger-disabled': 'var(--bq-stroke--danger-disabled)',
+    'danger-alt': 'var(--bq-ui--danger-alt)',
   },
 };
diff --git a/config/tailwind.primitve.colors.ts b/config/tailwind.primitve.colors.ts
index 6c16305e3..81a2dff4d 100644
--- a/config/tailwind.primitve.colors.ts
+++ b/config/tailwind.primitve.colors.ts
@@ -74,6 +74,8 @@ export const PRIMITIVE_COLORS = {
     700: 'var(--bq-grey-700)',
     800: 'var(--bq-grey-800)',
     900: 'var(--bq-grey-900)',
+    950: 'var(--bq-grey-950)',
+    1000: 'var(--bq-grey-1000)',
   },
   indigo: {
     100: 'var(--bq-indigo-100)',
@@ -87,6 +89,18 @@ export const PRIMITIVE_COLORS = {
     900: 'var(--bq-indigo-900)',
     1000: 'var(--bq-indigo-1000)',
   },
+  iris: {
+    100: 'var(--bq-iris-100)',
+    200: 'var(--bq-iris-200)',
+    300: 'var(--bq-iris-300)',
+    400: 'var(--bq-iris-400)',
+    500: 'var(--bq-iris-500)',
+    600: 'var(--bq-iris-600)',
+    700: 'var(--bq-iris-700)',
+    800: 'var(--bq-iris-800)',
+    900: 'var(--bq-iris-900)',
+    1000: 'var(--bq-iris-1000)',
+  },
   lime: {
     100: 'var(--bq-lime-100)',
     200: 'var(--bq-lime-200)',
diff --git a/config/theme/default/dark.ts b/config/theme/default/dark.ts
new file mode 100644
index 000000000..bcd8b6c54
--- /dev/null
+++ b/config/theme/default/dark.ts
@@ -0,0 +1,179 @@
+export const DefaultDarkTheme = {
+  /* -------------------------------------------------------------------------- */
+  /*                              Background colors                             */
+  /* -------------------------------------------------------------------------- */
+  'bq-background--primary': 'var(--bq-grey-1000)',
+  'bq-background--secondary': 'var(--bq-grey-950)',
+  'bq-background--tertiary': 'var(--bq-grey-900)',
+  'bq-background--alt': 'var(--bq-grey-800)',
+  'bq-background--inverse': 'var(--bq-grey-600)',
+  'bq-background--brand': 'var(--bq-iris-600)',
+  'bq-background--overlay': 'var(--bq-grey-900)',
+  /* -------------------------------------------------------------------------- */
+  /*                                 Data colors                                */
+  /* -------------------------------------------------------------------------- */
+  'bq-data--black': 'var(--bq-grey-200)',
+  'bq-data--blue': 'var(--bq-blue-500)',
+  'bq-data--corai': 'var(--bq-corai-500)',
+  'bq-data--cyan': 'var(--bq-cyan-500)',
+  'bq-data--green': 'var(--bq-green-500)',
+  'bq-data--grey': 'var(--bq-grey-500)',
+  'bq-data--indigo': 'var(--bq-indigo-500)',
+  'bq-data--lime': 'var(--bq-lime-500)',
+  'bq-data--magenta': 'var(--bq-magenta-500)',
+  'bq-data--orange': 'var(--bq-orange-500)',
+  'bq-data--purple': 'var(--bq-purple-500)',
+  'bq-data--red': 'var(--bq-red-500)',
+  'bq-data--sky': 'var(--bq-sky-500)',
+  'bq-data--teal': 'var(--bq-teal-500)',
+  'bq-data--yellow': 'var(--bq-yellow-500)',
+  /* -------------------------------------------------------------------------- */
+  /*                                    Focus                                   */
+  /* -------------------------------------------------------------------------- */
+  'bq-focus': 'var(--bq-iris-500)',
+  /* -------------------------------------------------------------------------- */
+  /*                                Icons colors                                */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-icon--primary': 'var(--bq-grey-100)',
+  'bq-icon--primary-hover': 'var(--bq-grey-200)',
+  'bq-icon--primary-active': 'var(--bq-grey-300)',
+  'bq-icon--primary-disabled': 'var(--bq-grey-800)',
+  /** Secondary */
+  'bq-icon--secondary': 'var(--bq-grey-600)',
+  'bq-icon--secondary-hover': 'var(--bq-grey-500)',
+  'bq-icon--secondary-active': 'var(--bq-grey-700)',
+  'bq-icon--secondary-disabled': 'var(--bq-grey-400)',
+  /** Inverse */
+  'bq-icon--inverse': 'var(--bq-grey-900)',
+  'bq-icon--inverse-disabled': 'var(--bq-grey-950)',
+  /** Brand */
+  'bq-icon--brand': 'var(--bq-iris-400)',
+  'bq-icon--brand-hover': 'var(--bq-iris-300)',
+  'bq-icon--brand-active': 'var(--bq-iris-500)',
+  'bq-icon--brand-disabled': 'var(--bq-iris-600)',
+  /** Feedback */
+  'bq-icon--info': 'var(--bq-blue-600)',
+  'bq-icon--success': 'var(--bq-teal-600)',
+  'bq-icon--warning': 'var(--bq-gold-600)',
+  'bq-icon--danger': 'var(--bq-red-600)',
+  /* -------------------------------------------------------------------------- */
+  /*                                Stroke colors                               */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-stroke--primary': 'var(--bq-grey-950)',
+  'bq-stroke--primary-hover': 'var(--bq-grey-900)',
+  'bq-stroke--primary-active': 'var(--bq-grey-800)',
+  'bq-stroke--primary-disabled': 'var(--bq-grey-800)',
+  'bq-stroke--primary-alt': 'var(--bq-grey-1000)',
+  /** Secondary */
+  'bq-stroke--secondary': 'var(--bq-grey-900)',
+  'bq-stroke--secondary-hover': 'var(--bq-grey-800)',
+  'bq-stroke--secondary-active': 'var(--bq-grey-700)',
+  'bq-stroke--secondary-disabled': 'var(--bq-grey-800)',
+  /** Tertiary */
+  'bq-stroke--tertiary': 'var(--bq-grey-700)',
+  'bq-stroke--tertiary-hover': 'var(--bq-grey-600)',
+  'bq-stroke--tertiary-active': 'var(--bq-grey-5000)',
+  'bq-stroke--tertiary-disabled': 'var(--bq-grey-800)',
+  /** Inverse */
+  'bq-stroke--inverse': 'var(--bq-grey-400)',
+  'bq-stroke--inverse-hover': 'var(--bq-grey-500)',
+  'bq-stroke--inverse-active': 'var(--bq-grey-600)',
+  'bq-stroke--inverse-disabled': 'var(--bq-grey-700)',
+  /** Brand */
+  'bq-stroke--brand': 'var(--bq-iris-600)',
+  'bq-stroke--brand-hover': 'var(--bq-iris-700)',
+  'bq-stroke--brand-active': 'var(--bq-iris-500)',
+  'bq-stroke--brand-disabled': 'var(--bq-iris-800)',
+  'bq-stroke--brand-alt': 'var(--bq-iris-1000)',
+  /** Success */
+  'bq-stroke--success': 'var(--bq-teal-600)',
+  'bq-stroke--success-hover': 'var(--bq-teal-700)',
+  'bq-stroke--success-active': 'var(--bq-teal-500)',
+  'bq-stroke--success-disabled': 'var(--bq-teal-800)',
+  /** Warning */
+  'bq-stroke--warning': 'var(--bq-gold-600)',
+  'bq-stroke--warning-hover': 'var(--bq-gold-700)',
+  'bq-stroke--warning-active': 'var(--bq-gold-500)',
+  'bq-stroke--warning-disabled': 'var(--bq-gold-800)',
+  /** Danger */
+  'bq-stroke--danger': 'var(--bq-red-600)',
+  'bq-stroke--danger-hover': 'var(--bq-red-700)',
+  'bq-stroke--danger-active': 'var(--bq-red-500)',
+  'bq-stroke--danger-disabled': 'var(--bq-red-800)',
+  /* -------------------------------------------------------------------------- */
+  /*                                 Text colors                                */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-text--primary': 'var(--bq-grey-100)',
+  'bq-text--primary-hover': 'var(--bq-grey-200)',
+  'bq-text--primary-active': 'var(--bq-grey-300)',
+  'bq-text--primary-disabled': 'var(--bq-grey-800)',
+  /** Secondary */
+  'bq-text--secondary': 'var(--bq-grey-500)',
+  'bq-text--secondary-hover': 'var(--bq-grey-600)',
+  'bq-text--secondary-active': 'var(--bq-grey-700)',
+  'bq-text--secondary-disabled': 'var(--bq-grey-800)',
+  /** Inverse */
+  'bq-text--inverse': 'var(--bq-grey-900)',
+  'bq-text--inverse-disabled': 'var(--bq-grey-950)',
+  /** Brand */
+  'bq-text--brand': 'var(--bq-iris-400)',
+  'bq-text--brand-hover': 'var(--bq-iris-300)',
+  'bq-text--brand-active': 'var(--bq-iris-500)',
+  'bq-text--brand-disabled': 'var(--bq-iris-600)',
+  /** Feedback */
+  'bq-text--info': 'var(--bq-blue-600)',
+  'bq-text--success': 'var(--bq-teal-600)',
+  'bq-text--warning': 'var(--bq-gold-600)',
+  'bq-text--danger': 'var(--bq-red-600)',
+  /* -------------------------------------------------------------------------- */
+  /*                                  UI colors                                 */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-ui--primary': 'var(--bq-grey-950)',
+  'bq-ui--primary-hover': 'var(--bq-grey-900)',
+  'bq-ui--primary-active': 'var(--bq-grey-700)',
+  'bq-ui--primary-disabled': 'var(--bq-grey-800)',
+  'bq-ui--primary-alt': 'var(--bq-grey-950)',
+  /** Secondary */
+  'bq-ui--secondary': 'var(--bq-grey-900)',
+  'bq-ui--secondary-hover': 'var(--bq-grey-800)',
+  'bq-ui--secondary-active': 'var(--bq-grey-700)',
+  'bq-ui--secondary-disabled': 'var(--bq-grey-800)',
+  /** Tertiary */
+  'bq-ui--tertiary': 'var(--bq-grey-700)',
+  'bq-ui--tertiary-hover': 'var(--bq-grey-600)',
+  'bq-ui--tertiary-active': 'var(--bq-grey-500)',
+  'bq-ui--tertiary-disabled': 'var(--bq-grey-800)',
+  /** Inverse */
+  'bq-ui--inverse': 'var(--bq-grey-400)',
+  'bq-ui--inverse-hover': 'var(--bq-grey-500)',
+  'bq-ui--inverse-active': 'var(--bq-grey-600)',
+  'bq-ui--inverse-disabled': 'var(--bq-grey-700)',
+  /** Brand */
+  'bq-ui--brand': 'var(--bq-iris-600)',
+  'bq-ui--brand-hover': 'var(--bq-iris-700)',
+  'bq-ui--brand-active': 'var(--bq-iris-500)',
+  'bq-ui--brand-disabled': 'var(--bq-iris-800)',
+  'bq-ui--brand-alt': 'var(--bq-iris-1000)',
+  /** Success */
+  'bq-ui--success': 'var(--bq-teal-600)',
+  'bq-ui--success-hover': 'var(--bq-teal-700)',
+  'bq-ui--success-active': 'var(--bq-teal-800)',
+  'bq-ui--success-disabled': 'var(--bq-teal-900)',
+  'bq-ui--success-alt': 'var(--bq-teal-1000)',
+  /** Warning */
+  'bq-ui--warning': 'var(--bq-gold-600)',
+  'bq-ui--warning-hover': 'var(--bq-gold-700)',
+  'bq-ui--warning-active': 'var(--bq-gold-800)',
+  'bq-ui--warning-disabled': 'var(--bq-gold-900)',
+  'bq-ui--warning-alt': 'var(--bq-gold-1000)',
+  /** Danger */
+  'bq-ui--danger': 'var(--bq-red-600)',
+  'bq-ui--danger-hover': 'var(--bq-red-700)',
+  'bq-ui--danger-active': 'var(--bq-red-800)',
+  'bq-ui--danger-disabled': 'var(--bq-red-900)',
+  'bq-ui--danger-alt': 'var(--bq-red-1000)',
+};
diff --git a/config/theme/default/index.ts b/config/theme/default/index.ts
new file mode 100644
index 000000000..c651e055e
--- /dev/null
+++ b/config/theme/default/index.ts
@@ -0,0 +1,3 @@
+export * from './dark';
+export * from './light';
+export * from './root';
diff --git a/config/theme/default/light.ts b/config/theme/default/light.ts
new file mode 100644
index 000000000..ae4b49b59
--- /dev/null
+++ b/config/theme/default/light.ts
@@ -0,0 +1,179 @@
+export const DefaultLightTheme = {
+  /* -------------------------------------------------------------------------- */
+  /*                              Background colors                             */
+  /* -------------------------------------------------------------------------- */
+  'bq-background--primary': 'var(--bq-neutral-white)',
+  'bq-background--secondary': 'var(--bq-grey-50)',
+  'bq-background--tertiary': 'var(--bq-grey-200)',
+  'bq-background--alt': 'var(--bq-grey-600)',
+  'bq-background--inverse': 'var(--bq-grey-900)',
+  'bq-background--brand': 'var(--bq-iris-600)',
+  'bq-background--overlay': 'var(--bq-grey-900)',
+  /* -------------------------------------------------------------------------- */
+  /*                                 Data colors                                */
+  /* -------------------------------------------------------------------------- */
+  'bq-data--black': 'var(--bq-grey-950)',
+  'bq-data--blue': 'var(--bq-blue-600)',
+  'bq-data--corai': 'var(--bq-corai-600)',
+  'bq-data--cyan': 'var(--bq-cyan-600)',
+  'bq-data--green': 'var(--bq-green-600)',
+  'bq-data--grey': 'var(--bq-grey-600)',
+  'bq-data--indigo': 'var(--bq-indigo-600)',
+  'bq-data--lime': 'var(--bq-lime-600)',
+  'bq-data--magenta': 'var(--bq-magenta-500)',
+  'bq-data--orange': 'var(--bq-orange-600)',
+  'bq-data--purple': 'var(--bq-purple-600)',
+  'bq-data--red': 'var(--bq-red-600)',
+  'bq-data--sky': 'var(--bq-sky-600)',
+  'bq-data--teal': 'var(--bq-teal-600)',
+  'bq-data--yellow': 'var(--bq-yellow-600)',
+  /* -------------------------------------------------------------------------- */
+  /*                                    Focus                                   */
+  /* -------------------------------------------------------------------------- */
+  'bq-focus': 'var(--bq-iris-500)',
+  /* -------------------------------------------------------------------------- */
+  /*                                Icons colors                                */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-icon--primary': 'var(--bq-grey-900)',
+  'bq-icon--primary-hover': 'var(--bq-grey-800)',
+  'bq-icon--primary-active': 'var(--bq-grey-1000)',
+  'bq-icon--primary-disabled': 'var(--bq-grey-400)',
+  /** Secondary */
+  'bq-icon--secondary': 'var(--bq-grey-600)',
+  'bq-icon--secondary-hover': 'var(--bq-grey-500)',
+  'bq-icon--secondary-active': 'var(--bq-grey-700)',
+  'bq-icon--secondary-disabled': 'var(--bq-grey-400)',
+  /** Inverse */
+  'bq-icon--inverse': 'var(--bq-neutral-white)',
+  'bq-icon--inverse-disabled': 'var(--bq-grey-50)',
+  /** Brand */
+  'bq-icon--brand': 'var(--bq-iris-600)',
+  'bq-icon--brand-hover': 'var(--bq-iris-500)',
+  'bq-icon--brand-active': 'var(--bq-iris-700)',
+  'bq-icon--brand-disabled': 'var(--bq-iris-400)',
+  /** Feedback */
+  'bq-icon--info': 'var(--bq-blue-600)',
+  'bq-icon--success': 'var(--bq-teal-600)',
+  'bq-icon--warning': 'var(--bq-gold-600)',
+  'bq-icon--danger': 'var(--bq-red-600)',
+  /* -------------------------------------------------------------------------- */
+  /*                                Stroke colors                               */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-stroke--primary': 'var(--bq-grey-200)',
+  'bq-stroke--primary-hover': 'var(--bq-grey-100)',
+  'bq-stroke--primary-active': 'var(--bq-grey-300)',
+  'bq-stroke--primary-disabled': 'var(--bq-grey-100)',
+  'bq-stroke--primary-alt': 'var(--bq-grey-50)',
+  /** Secondary */
+  'bq-stroke--secondary': 'var(--bq-grey-600)',
+  'bq-stroke--secondary-hover': 'var(--bq-grey-500)',
+  'bq-stroke--secondary-active': 'var(--bq-grey-700)',
+  'bq-stroke--secondary-disabled': 'var(--bq-grey-400)',
+  /** Tertiary */
+  'bq-stroke--tertiary': 'var(--bq-grey-900)',
+  'bq-stroke--tertiary-hover': 'var(--bq-grey-800)',
+  'bq-stroke--tertiary-active': 'var(--bq-grey-1000)',
+  'bq-stroke--tertiary-disabled': 'var(--bq-grey-600)',
+  /** Inverse */
+  'bq-stroke--inverse': 'var(--bq-neutral-white)',
+  'bq-stroke--inverse-hover': 'var(--bq-grey-50)',
+  'bq-stroke--inverse-active': 'var(--bq-grey-200)',
+  'bq-stroke--inverse-disabled': 'var(--bq-grey-100)',
+  /** Brand */
+  'bq-stroke--brand': 'var(--bq-iris-600)',
+  'bq-stroke--brand-hover': 'var(--bq-iris-500)',
+  'bq-stroke--brand-active': 'var(--bq-iris-700)',
+  'bq-stroke--brand-disabled': 'var(--bq-iris-400)',
+  'bq-stroke--brand-alt': 'var(--bq-iris-100)',
+  /** Success */
+  'bq-stroke--success': 'var(--bq-teal-600)',
+  'bq-stroke--success-hover': 'var(--bq-teal-500)',
+  'bq-stroke--success-active': 'var(--bq-teal-700)',
+  'bq-stroke--success-disabled': 'var(--bq-teal-400)',
+  /** Warning */
+  'bq-stroke--warning': 'var(--bq-gold-600)',
+  'bq-stroke--warning-hover': 'var(--bq-gold-500)',
+  'bq-stroke--warning-active': 'var(--bq-gold-700)',
+  'bq-stroke--warning-disabled': 'var(--bq-gold-400)',
+  /** Danger */
+  'bq-stroke--danger': 'var(--bq-red-600)',
+  'bq-stroke--danger-hover': 'var(--bq-red-500)',
+  'bq-stroke--danger-active': 'var(--bq-red-700)',
+  'bq-stroke--danger-disabled': 'var(--bq-red-400)',
+  /* -------------------------------------------------------------------------- */
+  /*                                 Text colors                                */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-text--primary': 'var(--bq-grey-900)',
+  'bq-text--primary-hover': 'var(--bq-grey-800)',
+  'bq-text--primary-active': 'var(--bq-grey-1000)',
+  'bq-text--primary-disabled': 'var(--bq-grey-400)',
+  /** Secondary */
+  'bq-text--secondary': 'var(--bq-grey-600)',
+  'bq-text--secondary-hover': 'var(--bq-grey-500)',
+  'bq-text--secondary-active': 'var(--bq-grey-700)',
+  'bq-text--secondary-disabled': 'var(--bq-grey-400)',
+  /** Inverse */
+  'bq-text--inverse': 'var(--bq-neutral-white)',
+  'bq-text--inverse-disabled': 'var(--bq-grey-50)',
+  /** Brand */
+  'bq-text--brand': 'var(--bq-iris-600)',
+  'bq-text--brand-hover': 'var(--bq-iris-500)',
+  'bq-text--brand-active': 'var(--bq-iris-700)',
+  'bq-text--brand-disabled': 'var(--bq-iris-400)',
+  /** Feedback */
+  'bq-text--info': 'var(--bq-blue-700)',
+  'bq-text--success': 'var(--bq-teal-800)',
+  'bq-text--warning': 'var(--bq-gold-700)',
+  'bq-text--danger': 'var(--bq-red-700)',
+  /* -------------------------------------------------------------------------- */
+  /*                                  UI colors                                 */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-ui--primary': 'var(--bq-neutral-white)',
+  'bq-ui--primary-hover': 'var(--bq-grey-50)',
+  'bq-ui--primary-active': 'var(--bq-grey-200)',
+  'bq-ui--primary-disabled': 'var(--bq-grey-100)',
+  'bq-ui--primary-alt': 'var(--bq-grey-50)',
+  /** Secondary */
+  'bq-ui--secondary': 'var(--bq-grey-200)',
+  'bq-ui--secondary-hover': 'var(--bq-grey-100)',
+  'bq-ui--secondary-active': 'var(--bq-grey-300)',
+  'bq-ui--secondary-disabled': 'var(--bq-grey-100)',
+  /** Tertiary */
+  'bq-ui--tertiary': 'var(--bq-grey-600)',
+  'bq-ui--tertiary-hover': 'var(--bq-grey-500)',
+  'bq-ui--tertiary-active': 'var(--bq-grey-700)',
+  'bq-ui--tertiary-disabled': 'var(--bq-grey-100)',
+  /** Inverse */
+  'bq-ui--inverse': 'var(--bq-grey-900)',
+  'bq-ui--inverse-hover': 'var(--bq-grey-800)',
+  'bq-ui--inverse-active': 'var(--bq-grey-1000)',
+  'bq-ui--inverse-disabled': 'var(--bq-grey-600)',
+  /** Brand */
+  'bq-ui--brand': 'var(--bq-iris-600)',
+  'bq-ui--brand-hover': 'var(--bq-iris-500)',
+  'bq-ui--brand-active': 'var(--bq-iris-700)',
+  'bq-ui--brand-disabled': 'var(--bq-iris-400)',
+  'bq-ui--brand-alt': 'var(--bq-iris-100)',
+  /** Success */
+  'bq-ui--success': 'var(--bq-teal-600)',
+  'bq-ui--success-hover': 'var(--bq-teal-500)',
+  'bq-ui--success-active': 'var(--bq-teal-700)',
+  'bq-ui--success-disabled': 'var(--bq-teal-400)',
+  'bq-ui--success-alt': 'var(--bq-teal-100)',
+  /** Warning */
+  'bq-ui--warning': 'var(--bq-gold-600)',
+  'bq-ui--warning-hover': 'var(--bq-gold-500)',
+  'bq-ui--warning-active': 'var(--bq-gold-700)',
+  'bq-ui--warning-disabled': 'var(--bq-gold-400)',
+  'bq-ui--warning-alt': 'var(--bq-gold-100)',
+  /** Danger */
+  'bq-ui--danger': 'var(--bq-red-600)',
+  'bq-ui--danger-hover': 'var(--bq-red-500)',
+  'bq-ui--danger-active': 'var(--bq-red-700)',
+  'bq-ui--danger-disabled': 'var(--bq-red-400)',
+  'bq-ui--danger-alt': 'var(--bq-red-100)',
+};
diff --git a/config/theme/default/root.ts b/config/theme/default/root.ts
new file mode 100644
index 000000000..d60a3e9c9
--- /dev/null
+++ b/config/theme/default/root.ts
@@ -0,0 +1,48 @@
+export const DefaultRootTheme = {
+  // Border Radius
+  'bq-radius--none': '0',
+  'bq-radius--xs2': '0.125rem',
+  'bq-radius--xs': '0.25rem',
+  'bq-radius--s': '0.5rem',
+  'bq-radius--m': '0.75rem',
+  'bq-radius--l': '1.5rem',
+  'bq-radius--full': '9999px',
+  // Box Shadow
+  '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 10px 48px -16px rgba(0, 0, 0, 0.12)',
+  'bq-box-shadow--l': '0 20px 58px -16px rgba(0, 0, 0, 0.16)',
+  // Fonts
+  'bq-font-family--outfit': "'Outfit', sans-serif",
+  'bq-font-size--xs': '0.75rem',
+  'bq-font-size--s': '0.875rem',
+  'bq-font-size--m': '1rem',
+  'bq-font-size--l': '1.125rem',
+  'bq-font-size--xl': '1.5rem',
+  'bq-font-size--xxl': '2rem',
+  'bq-font-size--xxl2': '2.5rem',
+  'bq-font-size--xxl3': '3rem',
+  'bq-font-size--xxl4': '3.5rem',
+  'bq-font-size--xxl5': '4rem',
+  'bq-font-weight--thin': '100',
+  'bq-font-weight--light': '300',
+  'bq-font-weight--regular': '400',
+  'bq-font-weight--medium': '500',
+  'bq-font-weight--semibold': '600',
+  'bq-font-weight--bold': '700',
+  'bq-font-line-height--small': '1.2',
+  'bq-font-line-height--regular': '1.5',
+  'bq-font-line-height--large': '1.5',
+  // Spacing
+  'bq-spacing-xs3': '0.125rem',
+  'bq-spacing-xs2': '0.25rem',
+  'bq-spacing-xs': '0.5rem',
+  'bq-spacing-s': '0.75rem',
+  'bq-spacing-m': '1rem',
+  'bq-spacing-l': '1.5rem',
+  'bq-spacing-xl': '2rem',
+  'bq-spacing-xxl': '2.5rem',
+  'bq-spacing-xxl2': '3.5rem',
+  'bq-spacing-xxl3': '4rem',
+  'bq-spacing-xxl4': '4.5rem',
+};
diff --git a/package-lock.json b/package-lock.json
index 0aec71615..312ac8af5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -126,6 +126,7 @@
         "stylelint-config-sass-guidelines": "10.0.0",
         "stylelint-config-standard": "34.0.0",
         "tailwindcss": "3.3.3",
+        "tailwindcss-theme-swapper": "0.7.3",
         "ts-jest": "27.1.5",
         "ts-node": "10.9.1",
         "typescript": "4.8.4",
@@ -8469,6 +8470,42 @@
         "@nx/js": "16.3.0"
       }
     },
+    "node_modules/@nx/cypress/node_modules/@nrwl/linter": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nrwl/linter/-/linter-16.3.0.tgz",
+      "integrity": "sha512-n86MG2HaEiIs6ya9plokB3R3HR/7U1U00o6AhaJyAZoDn6zky5P6L7525HWPGbbeho7omjoz52S6ZROBYCHg7g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@nx/linter": "16.3.0"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nrwl/tao": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-16.3.0.tgz",
+      "integrity": "sha512-STZSZ6AWNnOzaOA85bbXJ3QhSN7p4QwWEJ8DvQs2HUB4s/+JQ99kuePXbbpi3LdrC9qhQB4hzote8ahIsl/UAw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "nx": "16.3.0"
+      },
+      "bin": {
+        "tao": "index.js"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nrwl/workspace": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nrwl/workspace/-/workspace-16.3.0.tgz",
+      "integrity": "sha512-kbhTKMpzWBpVG96h3WWfYoJx8ROsE3XQ/L2HfHprGj1hWcBZmn4qlVktgtkenCIBlcqtHSvZoRxnWk8GDZdZJw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@nx/workspace": "16.3.0"
+      }
+    },
     "node_modules/@nx/cypress/node_modules/@nx/devkit": {
       "version": "16.3.0",
       "resolved": "https://registry.npmjs.org/@nx/devkit/-/devkit-16.3.0.tgz",
@@ -8528,6 +8565,238 @@
         }
       }
     },
+    "node_modules/@nx/cypress/node_modules/@nx/linter": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/linter/-/linter-16.3.0.tgz",
+      "integrity": "sha512-4Rz6JYxUwiZXX0HGDEjMjCssPj+iSKJyDjVvxSt1cU/JyPd2uJmSMbdkj9JqwJGfCSGkr2KvYG/SewnYDkqmpg==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@nrwl/linter": "16.3.0",
+        "@nx/devkit": "16.3.0",
+        "@nx/js": "16.3.0",
+        "@phenomnomnominal/tsquery": "~5.0.1",
+        "tmp": "~0.2.1",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "eslint": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nx/nx-darwin-arm64": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-16.3.0.tgz",
+      "integrity": "sha512-xUHQqFPsqh2fRGrjAAeCVkf4K2ChZIxHbJVpxoQqQrDo8gxZ/FD/4Xn1v4K2fp9fbeE+IoV/AxnQ/PSl+Q/yhg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nx/nx-darwin-x64": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-16.3.0.tgz",
+      "integrity": "sha512-lgBDe+gVa2plTmcf0iNynBVyvK/W1ttvBPzNo8mM28XaklF7awXjK6XkZOYZFpW7Aea9mfBp4Gx1jZVaqohyNg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nx/nx-freebsd-x64": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-freebsd-x64/-/nx-freebsd-x64-16.3.0.tgz",
+      "integrity": "sha512-HwDiWmXE8obCxtpBrJavIignutd40DyPLFp39lwN/foguedvGSmSx4tlDpn3MyulfE94AueDxtKDhx4e0AR6eQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nx/nx-linux-arm-gnueabihf": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-16.3.0.tgz",
+      "integrity": "sha512-bWt7hzngOzJfPKqIjzBFBi9EBQXMGiL5IOnTPAOzB5k+DaJCal/ocokTU852YIjlupEgJacVVR9EFEgHOzboBA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nx/nx-linux-arm64-gnu": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-16.3.0.tgz",
+      "integrity": "sha512-QmcXF2NjbAkc0yrN/EdRIFMiGM45dVh3y0H0TTShoKFF43UFBBlKvvARc8ylEZUlkviJsKkIw6vo2bzCCvY0Zg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nx/nx-linux-arm64-musl": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-16.3.0.tgz",
+      "integrity": "sha512-SXHvKjYva5JoXUhR+131fUVwTG/wNP1guJL82qPua8itcZsWuUY8P//pbn/fY+KtyQ2/luuSBu3qLHuQBlZ4QA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nx/nx-linux-x64-gnu": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-16.3.0.tgz",
+      "integrity": "sha512-CIjKaDkfnZ2ftgFNguURsj8fRpKgDa0E6o/rvSUK8RPHg6wjrFE0KPN/27vPcsfkV+1tCNrZ5Maq/oqvVNSTtg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nx/nx-linux-x64-musl": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-musl/-/nx-linux-x64-musl-16.3.0.tgz",
+      "integrity": "sha512-vpqwI9pm8qk6NAi7teXsCRKdu6qa39/i1kySNc4q7nAmJT5iFmCE92m+8I40S91YYxUS4TkRbeKTSVsmMdI05Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nx/nx-win32-arm64-msvc": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-16.3.0.tgz",
+      "integrity": "sha512-lvFuBsbUQVsjISmsJGcmeri0li/6BePDo6BCvm9XHfT3J5OBNdABC1YLbqilpxjrpajH+vD49Eq8nHBfIyDNPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nx/nx-win32-x64-msvc": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-16.3.0.tgz",
+      "integrity": "sha512-TVk4pvoJMyiA57WuSEcNPZo+SHRsYml8PwDV/5syuen8i/aHbsErk7zwsa1E5sNJChrq5olYs11+IwRbkAvwEA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/@nx/workspace": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@nx/workspace/-/workspace-16.3.0.tgz",
+      "integrity": "sha512-1w8XvK9nRj9M1FT4AKvqeOAU+eIJl9FaP2+Jg93dXBRUpAltPsSLJbvNC/rNube9mpQHTHOTp7oXwm0S0ODaUA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@nrwl/workspace": "16.3.0",
+        "@nx/devkit": "16.3.0",
+        "@parcel/watcher": "2.0.4",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.5.1",
+        "cli-cursor": "3.1.0",
+        "cli-spinners": "2.6.1",
+        "dotenv": "~10.0.0",
+        "figures": "3.2.0",
+        "flat": "^5.0.2",
+        "ignore": "^5.0.4",
+        "minimatch": "3.0.5",
+        "npm-run-path": "^4.0.1",
+        "nx": "16.3.0",
+        "open": "^8.4.0",
+        "rxjs": "^7.8.0",
+        "tmp": "~0.2.1",
+        "tslib": "^2.3.0",
+        "yargs": "^17.6.2",
+        "yargs-parser": "21.1.1"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@nx/cypress/node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8540,6 +8809,61 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/@nx/cypress/node_modules/enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "ansi-colors": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/glob": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
+      "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@nx/cypress/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -8568,6 +8892,78 @@
         "node": "*"
       }
     },
+    "node_modules/@nx/cypress/node_modules/nx": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/nx/-/nx-16.3.0.tgz",
+      "integrity": "sha512-D1gzsc7Cq+PweUiIsUjKyc0gldtDl95BF61kzXnGXIiAi/R19uaEBN3A24uD6lY/ngnWEBSV/u/T6Jb7PUZ2nw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@nrwl/tao": "16.3.0",
+        "@parcel/watcher": "2.0.4",
+        "@yarnpkg/lockfile": "^1.1.0",
+        "@yarnpkg/parsers": "^3.0.0-rc.18",
+        "@zkochan/js-yaml": "0.0.6",
+        "axios": "^1.0.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "3.1.0",
+        "cli-spinners": "2.6.1",
+        "cliui": "^7.0.2",
+        "dotenv": "~10.0.0",
+        "enquirer": "~2.3.6",
+        "fast-glob": "3.2.7",
+        "figures": "3.2.0",
+        "flat": "^5.0.2",
+        "fs-extra": "^11.1.0",
+        "glob": "7.1.4",
+        "ignore": "^5.0.4",
+        "js-yaml": "4.1.0",
+        "jsonc-parser": "3.2.0",
+        "lines-and-columns": "~2.0.3",
+        "minimatch": "3.0.5",
+        "npm-run-path": "^4.0.1",
+        "open": "^8.4.0",
+        "semver": "7.3.4",
+        "string-width": "^4.2.3",
+        "strong-log-transformer": "^2.1.0",
+        "tar-stream": "~2.2.0",
+        "tmp": "~0.2.1",
+        "tsconfig-paths": "^4.1.2",
+        "tslib": "^2.3.0",
+        "v8-compile-cache": "2.3.0",
+        "yargs": "^17.6.2",
+        "yargs-parser": "21.1.1"
+      },
+      "bin": {
+        "nx": "bin/nx.js"
+      },
+      "optionalDependencies": {
+        "@nx/nx-darwin-arm64": "16.3.0",
+        "@nx/nx-darwin-x64": "16.3.0",
+        "@nx/nx-freebsd-x64": "16.3.0",
+        "@nx/nx-linux-arm-gnueabihf": "16.3.0",
+        "@nx/nx-linux-arm64-gnu": "16.3.0",
+        "@nx/nx-linux-arm64-musl": "16.3.0",
+        "@nx/nx-linux-x64-gnu": "16.3.0",
+        "@nx/nx-linux-x64-musl": "16.3.0",
+        "@nx/nx-win32-arm64-msvc": "16.3.0",
+        "@nx/nx-win32-x64-msvc": "16.3.0"
+      },
+      "peerDependencies": {
+        "@swc-node/register": "^1.4.2",
+        "@swc/core": "^1.2.173"
+      },
+      "peerDependenciesMeta": {
+        "@swc-node/register": {
+          "optional": true
+        },
+        "@swc/core": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nx/cypress/node_modules/semver": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
@@ -8608,6 +9004,24 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/@nx/cypress/node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@nx/cypress/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -8616,6 +9030,42 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/@nx/cypress/node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@nx/cypress/node_modules/yargs/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@nx/devkit": {
       "version": "16.6.0",
       "resolved": "https://registry.npmjs.org/@nx/devkit/-/devkit-16.6.0.tgz",
@@ -9960,6 +10410,10 @@
         "typescript": "^3 || ^4 || ^5"
       }
     },
+    "node_modules/@phosphor-icons/core": {
+      "resolved": "packages/bee-q-icons/temp/core-main",
+      "link": true
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -18883,6 +19337,19 @@
       "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==",
       "dev": true
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -18901,6 +19368,16 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -39045,6 +39522,21 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true
+    },
     "node_modules/simple-update-notifier": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
@@ -41368,6 +41860,17 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-theme-swapper": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss-theme-swapper/-/tailwindcss-theme-swapper-0.7.3.tgz",
+      "integrity": "sha512-5SJfJCCRF1K8Hq9nJzWOu6b/bXhAwNQPcEpbV7L0YOLmD/x9PsLwDHTcDz2wFEFrS4uzecpjwoMEn+gjqi2wXg==",
+      "dev": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "postcss": "^8.4.21",
+        "tailwindcss": "^3.3.1"
+      }
+    },
     "node_modules/tailwindcss/node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -44420,10 +44923,28 @@
       "name": "@bee-q/icons",
       "version": "0.7.1"
     },
+    "packages/bee-q-icons/node_modules/@types/node": {
+      "version": "18.17.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.4.tgz",
+      "integrity": "sha512-ATL4WLgr7/W40+Sp1WnNTSKbgVn6Pvhc/2RHAdt8fl6NsQyp4oPCi2eKcGOvA494bwf1K/W6nGgZ9TwDqvpjdw==",
+      "dev": true
+    },
+    "packages/bee-q-icons/node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "packages/bee-q-icons/temp/core-main": {
       "name": "@phosphor-icons/core",
       "version": "2.0.2",
-      "extraneous": true,
       "license": "MIT",
       "devDependencies": {
         "@types/node": "^18",
diff --git a/package.json b/package.json
index 765799e62..50abdd4a5 100644
--- a/package.json
+++ b/package.json
@@ -144,6 +144,7 @@
     "stylelint-config-sass-guidelines": "10.0.0",
     "stylelint-config-standard": "34.0.0",
     "tailwindcss": "3.3.3",
+    "tailwindcss-theme-swapper": "0.7.3",
     "ts-jest": "27.1.5",
     "ts-node": "10.9.1",
     "typescript": "4.8.4",
diff --git a/packages/bee-q/.storybook/preview.ts b/packages/bee-q/.storybook/preview.ts
index 0d1754a39..69b817401 100644
--- a/packages/bee-q/.storybook/preview.ts
+++ b/packages/bee-q/.storybook/preview.ts
@@ -1,32 +1,62 @@
 import './css/sb-styles.css';
 
+import type { DecoratorFunction } from '@storybook/types';
+import type { Preview, WebComponentsRenderer } from '@storybook/web-components';
 import { setCustomElements } from '@storybook/web-components';
 
 import customElements from '../custom-elements.json';
 
 setCustomElements(customElements);
 
-export const parameters = {
-  controls: { expanded: true, hideNoControlsWarning: true },
-  docs: {
-    story: {
-      inline: true,
-      height: '250px',
+const withThemeProvider: DecoratorFunction<WebComponentsRenderer, { [x: string]: unknown }> = (storyFn, context) => {
+  const {
+    globals: { theme },
+  } = context;
+  const body = document.querySelector('body.sb-show-main');
+  if (!body) return storyFn();
+
+  body.setAttribute('data-theme', (theme || 'Light').toLowerCase());
+  return storyFn();
+};
+
+const preview: Preview = {
+  decorators: [withThemeProvider],
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Theme mode for BEEQ components',
+      defaultValue: 'Light',
+      toolbar: {
+        icon: 'mirror',
+        items: ['Dark', 'Light'],
+        dynamicTitle: true,
+      },
     },
   },
-  html: {
-    removeComments: true,
-    removeEmptyComments: true,
-    highlighter: {
-      showLineNumbers: true,
-      wrapLines: true,
+  parameters: {
+    controls: { expanded: true, hideNoControlsWarning: true },
+    docs: {
+      story: {
+        inline: true,
+        height: '250px',
+      },
     },
-    prettier: {
-      htmlWhitespaceSensitivity: 'ignore',
-      tabWidth: 2,
-      printWidth: 80,
-      useTabs: false,
+    html: {
+      removeComments: true,
+      removeEmptyComments: true,
+      highlighter: {
+        showLineNumbers: true,
+        wrapLines: true,
+      },
+      prettier: {
+        htmlWhitespaceSensitivity: 'ignore',
+        tabWidth: 2,
+        printWidth: 80,
+        useTabs: false,
+      },
+      root: '#root-inner',
     },
-    root: '#root-inner',
   },
 };
+
+export default preview;
diff --git a/packages/bee-q/src/_storybook/foundation/typography.mdx b/packages/bee-q/src/_storybook/foundation/typography.mdx
index acfc0700b..9a3e43726 100644
--- a/packages/bee-q/src/_storybook/foundation/typography.mdx
+++ b/packages/bee-q/src/_storybook/foundation/typography.mdx
@@ -58,13 +58,12 @@ To use the display font, add the `display` class to the element (recommended to
 
 <Source dark format="dedent" language="html" code={`<h1 class="display">${SampleText}</h1>`} />
 
-<div className="rounded-xs border border-solid border-stroke-success bg-ui-success-light p-m">
-**💡 NOTE:**
-
-In addition to the `.display` class, you can also add the `.semibold` or `.bold` classes to change the font weight of the text.
-The `.semibold` class is a lighter weight than the `.bold` class, but still provides a noticeable difference in weight.
-**It applies to all headings, not just the display heading.**
+<div data-theme="light" className="rounded-xs border border-solid border-stroke-success bg-ui-success-alt p-m">
+  **💡 NOTE:**
 
+  In addition to the `.display` class, you can also add the `.semibold` or `.bold` classes to change the font weight of the text.
+  The `.semibold` class is a lighter weight than the `.bold` class, but still provides a noticeable difference in weight.
+  **It applies to all headings, not just the display heading.**
 </div>
 
 <Typeset
@@ -274,7 +273,7 @@ or the `.h6` class:
 
 The body text is used for the main content of a page, and should be visually distinct from other headings on the page.
 
-<div className="rounded-xs border border-solid border-stroke-warning bg-ui-warning-light p-m">
+<div data-theme="light" className="rounded-xs border border-solid border-stroke-warning bg-ui-warning-alt p-m">
   ❗️ BEEQ set by default the body styles in the global CSS, so **you don't need to add any class to use it**.
 </div>
 
diff --git a/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss b/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss
index 60fd941a4..7799951fd 100644
--- a/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss
+++ b/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss
@@ -26,9 +26,9 @@
   * @prop --bq-avatar--badge-left-circle: Badge left position shape circle
   */
 
-  --bq-avatar-background: theme('colors.ui.secondary-light');
+  --bq-avatar-background: theme('colors.ui.primary-alt');
 
-  --bq-avatar--border-color: theme('colors.stroke.tiertary');
+  --bq-avatar--border-color: theme('colors.stroke.tertiary');
   --bq-avatar--border-style: solid;
   --bq-avatar--border-width: 2px;
 
diff --git a/packages/bee-q/src/components/badge/scss/bq-badge.variables.scss b/packages/bee-q/src/components/badge/scss/bq-badge.variables.scss
index 322418b25..c0de5503b 100644
--- a/packages/bee-q/src/components/badge/scss/bq-badge.variables.scss
+++ b/packages/bee-q/src/components/badge/scss/bq-badge.variables.scss
@@ -18,7 +18,7 @@
   --bq-badge--background-color: theme('colors.ui.danger');
   --bq-badge--box-shadow: none;
 
-  --bq-badge--border-color: theme('colors.stroke.tiertary');
+  --bq-badge--border-color: theme('colors.stroke.tertiary');
   --bq-badge--border-radius: theme('borderRadius.full');
   --bq-badge--border-style: solid;
   --bq-badge--border-width: 1px;
diff --git a/packages/bee-q/src/components/breadcrumb-item/scss/bq-breadcrumb-item.scss b/packages/bee-q/src/components/breadcrumb-item/scss/bq-breadcrumb-item.scss
index 182ff74db..63d7b8ad9 100644
--- a/packages/bee-q/src/components/breadcrumb-item/scss/bq-breadcrumb-item.scss
+++ b/packages/bee-q/src/components/breadcrumb-item/scss/bq-breadcrumb-item.scss
@@ -5,17 +5,18 @@
 @import './bq-breadcrumb-item.variables';
 
 .breadcrumb-item {
-  @apply font-regular leading-[var(--bq-breadcrumb-item--line-height)] text-text-secondary no-underline focus-visible:focus active:outline-none;
-  @apply pe-[var(--bq-breadcrumb-item--padding-end)] ps-[var(--bq-breadcrumb-item--padding-start)];
-  @apply py-[var(--bq-breadcrumb-item--paddingY)] text-[length:var(--bq-breadcrumb-item--font-size)];
-  @apply rounded-[var(--bq-breadcrumb-item--border-radius)] bg-[var(--bq-breadcrumb-item--background)] shadow-[shadow:var(--bq-breadcrumb-item--box-shadow)];
-  @apply border-[length:var(--bq-breadcrumb-item--border-width)] border-[color:var(--bq-breadcrumb-item--border-color)];
-  @apply cursor-pointer hover:text-text-brand-hover;
+  @apply border-[length:--bq-breadcrumb-item--border-width] border-[color:--bq-breadcrumb-item--border-color];
+  @apply rounded-[--bq-breadcrumb-item--border-radius] bg-[--bq-breadcrumb-item--background] shadow-[shadow:--bq-breadcrumb-item--box-shadow];
+  @apply py-[--bq-breadcrumb-item--paddingY] pe-[--bq-breadcrumb-item--padding-end] ps-[--bq-breadcrumb-item--padding-start];
+  @apply text-[length:--bq-breadcrumb-item--text-size] font-regular leading-[--bq-breadcrumb-item--line-height] text-[color:--bq-breadcrumb-item--text-color];
+  @apply focus-visible:focus hover:text-[color:--bq-breadcrumb-item--text-color-hover] active:outline-none;
+  @apply transition-colors duration-300 ease-in-out;
+  @apply cursor-pointer no-underline;
 
   border-style: var(--bq-avatar--border-style);
 }
 
 .breadcrumb-separator {
-  @apply flex items-center text-[length:var(--bq-breadcrumb-item--font-size-separator)];
-  @apply pe-[var(--bq-breadcrumb-item--padding-end-separator)] ps-[var(--bq-breadcrumb-item--padding-start-separator)];
+  @apply flex items-center text-[length:--bq-breadcrumb-item--text-size-separator];
+  @apply pe-[--bq-breadcrumb-item--padding-end-separator] ps-[--bq-breadcrumb-item--padding-start-separator];
 }
diff --git a/packages/bee-q/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss b/packages/bee-q/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss
index c4cf43762..15cc261c7 100644
--- a/packages/bee-q/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss
+++ b/packages/bee-q/src/components/breadcrumb-item/scss/bq-breadcrumb-item.variables.scss
@@ -4,34 +4,36 @@
 
 :host {
   /**
-  * @prop --bq-breadcrumb-item--background: background color
-  * @prop --bq-breadcrumb-item--font-size: font size
-
-  * @prop --bq-breadcrumb-item--border-color: border color
-  * @prop --bq-breadcrumb-item--border-style: border style
-  * @prop --bq-breadcrumb-item--border-width: border width
-  * @prop --bq-breadcrumb-item--border-radius: border radius
-
-  * @prop --bq-breadcrumb-item--box-shadow: box shadow
-
-  * @prop --bq-breadcrumb-item--paddingX: padding X axis
-  * @prop --bq-breadcrumb-item--paddingY: padding Y axis
-
-  * @prop --bq-breadcrumb-item--padding-separator: padding X axis on separator element
-  * @prop --bq-breadcrumb-item--font-size-separator: font size for separator
-
+  * @prop --bq-breadcrumb-item--background: Background color of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--box-shadow: Box shadow of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--border-color: Border color of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--border-style: Border style of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--border-width: Border width of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--border-radius: Border radius of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--line-height: Line height of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--text-color: Text color of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--text-size: Text size of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--text-size-separator: Text size of the breadcrumb item separator.
+  * @prop --bq-breadcrumb-item--padding-start: Padding start of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--padding-end: Padding end of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--paddingY: Padding top and bottom of the breadcrumb item.
+  * @prop --bq-breadcrumb-item--padding-start-separator: Padding start of the breadcrumb item separator.
+  * @prop --bq-breadcrumb-item--padding-end-separator: Padding end of the breadcrumb item separator.
   */
 
   --bq-breadcrumb-item--background: theme('colors.transparent');
-  --bq-breadcrumb-item--font-size: theme('fontSize.s');
-  --bq-breadcrumb-item--line-height: theme('lineHeight.regular');
+  --bq-breadcrumb-item--box-shadow: none;
 
   --bq-breadcrumb-item--border-color: theme('colors.transparent');
   --bq-breadcrumb-item--border-style: none;
   --bq-breadcrumb-item--border-width: 0;
   --bq-breadcrumb-item--border-radius: theme('borderRadius.s');
 
-  --bq-breadcrumb-item--box-shadow: none;
+  --bq-breadcrumb-item--line-height: theme('lineHeight.regular');
+  --bq-breadcrumb-item--text-color: theme('colors.text.secondary');
+  --bq-breadcrumb-item--text-color-hover: theme('colors.text.brand-hover');
+  --bq-breadcrumb-item--text-size: theme('fontSize.s');
+  --bq-breadcrumb-item--text-size-separator: theme('fontSize.xs');
 
   --bq-breadcrumb-item--padding-start: theme('spacing.xs2');
   --bq-breadcrumb-item--padding-end: theme('spacing.xs2');
@@ -39,5 +41,4 @@
 
   --bq-breadcrumb-item--padding-start-separator: theme('spacing.xs2');
   --bq-breadcrumb-item--padding-end-separator: theme('spacing.xs2');
-  --bq-breadcrumb-item--font-size-separator: theme('fontSize.xs');
 }
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 d09e34c61..f381a5433 100644
--- a/packages/bee-q/src/components/button/scss/bq-button.scss
+++ b/packages/bee-q/src/components/button/scss/bq-button.scss
@@ -8,7 +8,7 @@
   // Common button base style
   .bq-button {
     @apply box-border flex cursor-[inherit] items-center justify-center rounded-m border-2 border-solid border-transparent text-m font-medium leading-regular;
-    @apply transition-[background-color,border-color,color] duration-300;
+    @apply transition-[background-color,border-color,color] duration-300 ease-in-out;
     @apply disabled:cursor-not-allowed;
     @apply focus-visible:focus;
   }
@@ -28,7 +28,7 @@
 /* -------------------------------------------------------------------------- */
 
 .bq-button--primary {
-  @apply bg-ui-brand text-text-inverse;
+  @apply bg-ui-brand text-neutral-white;
   // Primary `HOVER` and `ACTIVE` state
   @apply hover:bg-ui-brand-hover active:bg-ui-brand-active;
   // Primary `DISABLED` state
@@ -39,7 +39,7 @@
 .bq-button--primary.ghost {
   @apply border-stroke-brand bg-transparent text-text-brand;
   // Primary ghost `HOVER` state
-  @apply hover:border-stroke-brand-hover hover:text-text-brand-hover;
+  @apply hover:border-stroke-brand-hover hover:bg-ui-primary-hover hover:text-text-brand-hover;
   // Primary ghost `ACTIVE` state
   @apply active:border-stroke-brand-active active:text-text-brand-active;
   // Primary ghost `DISABLED` state
@@ -48,7 +48,7 @@
 }
 
 .bq-button--primary.danger {
-  @apply bg-ui-danger text-text-inverse;
+  @apply bg-ui-danger text-neutral-white;
   // Primary danger `HOVER` and `ACTIVE` state
   @apply hover:bg-ui-danger-hover active:bg-ui-danger-active;
   // Primary danger `DISABLED` state
@@ -125,11 +125,11 @@
 }
 
 .bq-button.has-prefix .bq-button__label {
-  @apply pl-xs2;
+  @apply ps-xs2;
 }
 
 .bq-button.has-suffix .bq-button__label {
-  @apply pr-xs2;
+  @apply pe-xs2;
 }
 
 /* -------------------------------------------------------------------------- */
diff --git a/packages/bee-q/src/components/checkbox/bq-checkbox.tsx b/packages/bee-q/src/components/checkbox/bq-checkbox.tsx
index 9cd4f9fed..1c5f8b0c3 100644
--- a/packages/bee-q/src/components/checkbox/bq-checkbox.tsx
+++ b/packages/bee-q/src/components/checkbox/bq-checkbox.tsx
@@ -178,7 +178,7 @@ export class BqCheckbox {
         part="base"
       >
         <div
-          class="bq-checkbox__control relative box-border flex h-[var(--bq-checkbox--size)] w-[var(--bq-checkbox--size)] items-center justify-center p-[2px]"
+          class="bq-checkbox__control relative box-border flex h-[var(--bq-checkbox--size)] w-[var(--bq-checkbox--size)] items-center justify-center p-xs3"
           part="control"
         >
           <input
@@ -211,7 +211,7 @@ export class BqCheckbox {
             {this.checked && (
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="absolute h-full w-full text-text-inverse"
+                class="absolute h-full w-full text-neutral-white"
                 viewBox="0 0 256 256"
               >
                 <path fill="none" d="M0 0h256v256H0z" />
@@ -228,7 +228,7 @@ export class BqCheckbox {
             {!this.checked && this.indeterminate && (
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="absolute h-full w-full text-text-inverse"
+                class="absolute h-full w-full text-neutral-white"
                 viewBox="0 0 256 256"
                 fill="currentColor"
               >
@@ -246,7 +246,7 @@ export class BqCheckbox {
           </span>
         </div>
         <span
-          class="bq-checkbox__label ml-xs2 text-start font-medium leading-regular text-text-primary group-hover-[&:not(.is-disabled)]:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled"
+          class="bq-checkbox__label ps-xs text-start font-medium leading-regular text-text-primary group-hover-[&:not(.is-disabled)]:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled"
           part="label"
         >
           <slot />
diff --git a/packages/bee-q/src/components/checkbox/scss/bq-checkbox.scss b/packages/bee-q/src/components/checkbox/scss/bq-checkbox.scss
index f5bb7da1c..47848f542 100644
--- a/packages/bee-q/src/components/checkbox/scss/bq-checkbox.scss
+++ b/packages/bee-q/src/components/checkbox/scss/bq-checkbox.scss
@@ -9,7 +9,7 @@
 }
 
 .bq-checkbox {
-  @apply inline-flex cursor-pointer select-none rounded-s p-xs pr-xs2 transition-colors duration-300;
+  @apply inline-flex cursor-pointer select-none rounded-s p-xs transition-colors duration-300 ease-in-out;
 
   // Default hover state
   &:not(.is-checked),
@@ -37,7 +37,7 @@
   // Checkbox square icon has `FOCUS`
   &:focus-visible {
     ~ .bq-checkbox__checkbox {
-      @apply focus;
+      @apply focus border-stroke-brand;
     }
   }
 
diff --git a/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx b/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx
index ebb4274b3..ad4edaed8 100644
--- a/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx
+++ b/packages/bee-q/src/components/dialog/_storybook/bq-dialog.stories.tsx
@@ -71,10 +71,10 @@ const Template = (args: Args) => {
       @bqAfterOpen=${args.bqAfterOpen}
       @bqAfterClose=${args.bqAfterClose}
     >
-      <h3 class="flex items-center gap-s" slot="title">
+      <h5 class="bold flex items-center gap-s" slot="title">
         <bq-icon name="info" size="30" color="text--accent" role="img" title="Info"></bq-icon>
         Title
-      </h3>
+      </h5>
       ${!args.noContent
         ? html`
             <p>
@@ -161,10 +161,10 @@ const ConfirmTemplate = (args: Args) => {
       @bqAfterOpen=${args.bqAfterOpen}
       @bqAfterClose=${args.bqAfterClose}
     >
-      <h3 class="flex items-center gap-s" slot="title">
+      <h5 class="bold flex items-center gap-s" slot="title">
         <bq-icon name="info" size="30" color="icon--danger" role="img" title="Danger"></bq-icon>
         Deactivate account
-      </h3>
+      </h5>
       <p>Are your sure you want to deactivate your account? All of your data will be permanently removed.</p>
       <span class="text-s text-text-secondary"> This action cannot be undone </span>
       <div class="flex gap-xs" slot="footer">
diff --git a/packages/bee-q/src/components/dialog/bq-dialog.tsx b/packages/bee-q/src/components/dialog/bq-dialog.tsx
index a0cbc8f88..fac28bd8f 100644
--- a/packages/bee-q/src/components/dialog/bq-dialog.tsx
+++ b/packages/bee-q/src/components/dialog/bq-dialog.tsx
@@ -271,7 +271,7 @@ export class BqDialog {
           class={{
             hidden: !this.hasFooter,
             'bq-dialog--footer': this.hasFooter,
-            'bg-ui-secondary-light !py-s': this.footerApperance === 'highlight',
+            'bg-ui-primary-alt !py-s': this.footerApperance === 'highlight',
           }}
           ref={(footerElem) => (this.footerElem = footerElem)}
           part="footer"
diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
index 93385cf02..4097dd5ab 100644
--- a/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
+++ b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
@@ -16,23 +16,24 @@
 
 .bq-dialog {
   @apply absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform flex-col gap-[var(--bq-dialog--content-footer-gap)] p-0;
-  @apply rounded-[var(--bq-dialog--border-radius)] bg-[var(--bq-dialog--background)] shadow-[shadow:var(--bq-dialog--box-shadow)];
+  @apply bg-[--bq-dialog--background] text-[--bq-dialog--text-color] shadow-[shadow:--bq-dialog--box-shadow];
+  @apply rounded-[var(--bq-dialog--border-radius)] border-[length:--bq-dialog--border-width] border-[color:--bq-dialog--border-color];
   @apply opacity-0 transition-opacity duration-300 ease-in-out;
   // If mobile resolution, dialog will be full width
   @apply w-[90vw];
 
-  border: var(--bq-dialog--border-width) var(--bq-dialog--border-style) var(--bq-dialog--border-color);
+  border-style: var(--bq-dialog--border-style);
 
   &.small {
-    @apply sm:w-[var(--bq-dialog--width-small)];
+    @apply sm:w-[--bq-dialog--width-small];
   }
 
   &.medium {
-    @apply sm:w-[var(--bq-dialog--width-medium)];
+    @apply sm:w-[--bq-dialog--width-medium];
   }
 
   &.large {
-    @apply sm:w-[var(--bq-dialog--width-large)];
+    @apply sm:w-[--bq-dialog--width-large];
   }
 }
 
@@ -43,7 +44,7 @@
 /* ----------------------------- Dialog backdrop ---------------------------- */
 
 .bq-dialog::backdrop {
-  @apply bg-[var(--bq-dialog--background-backdrop)] opacity-0 transition-[opacity] duration-300 ease-in-out;
+  @apply bg-[--bq-dialog--background-backdrop] opacity-0 transition-[opacity] duration-300 ease-in-out;
 }
 
 .bq-dialog[open]::backdrop {
@@ -53,13 +54,13 @@
 /* ------------------------------ Dialog header ----------------------------- */
 
 .bq-dialog--header {
-  @apply sticky top-0 flex items-center gap-m p-[var(--bq-dialog--padding)] pb-0;
+  @apply sticky top-0 flex items-center gap-m p-[--bq-dialog--padding] pb-0;
 }
 
 /* ------------------------------ Dialog footer ----------------------------- */
 
 .bq-dialog--footer {
-  @apply sticky top-full flex w-full items-center justify-end gap-xs p-[var(--bq-dialog--padding)] pt-0;
+  @apply sticky top-full flex w-full items-center justify-end gap-xs p-[--bq-dialog--padding] pt-0;
 }
 
 /* --------------------------- Dialog close button -------------------------- */
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 930c71257..a23bbbc98 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
@@ -23,6 +23,7 @@
 
   --bq-dialog--background: theme('colors.bg.primary');
   --bq-dialog--background-backdrop: theme('colors.grey.900');
+  --bq-dialog--text-color: theme('colors.text.primary');
 
   --bq-dialog--box-shadow: theme('boxShadow.l');
 
diff --git a/packages/bee-q/src/components/dropdown/_storybook/bq-dropdown.stories.tsx b/packages/bee-q/src/components/dropdown/_storybook/bq-dropdown.stories.tsx
index c42af4b6b..dd29fdd71 100644
--- a/packages/bee-q/src/components/dropdown/_storybook/bq-dropdown.stories.tsx
+++ b/packages/bee-q/src/components/dropdown/_storybook/bq-dropdown.stories.tsx
@@ -186,7 +186,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-light p-m">
+    <div class="bg-ui-success-light mb-l rounded-m border border-solid border-stroke-success 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.
diff --git a/packages/bee-q/src/components/input/scss/bq-input.scss b/packages/bee-q/src/components/input/scss/bq-input.scss
index 66e9276ac..44c40c197 100644
--- a/packages/bee-q/src/components/input/scss/bq-input.scss
+++ b/packages/bee-q/src/components/input/scss/bq-input.scss
@@ -69,7 +69,7 @@
 }
 
 .bq-input--control.disabled {
-  @apply cursor-not-allowed border-[color:--bq-stroke--tiertary-disabled] bg-ui-secondary-disabled;
+  @apply cursor-not-allowed border-[color:--bq-stroke--tertiary-disabled] bg-ui-secondary-disabled;
 }
 
 /* ------------------------------- Validation ------------------------------- */
@@ -106,7 +106,7 @@
 /* -------------------------------------------------------------------------- */
 
 .bq-input--control__input {
-  @apply flex-auto cursor-[inherit] appearance-none bg-[inherit] font-[inherit] text-[length:inherit];
+  @apply flex-auto cursor-[inherit] appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];
   @apply m-0 min-h-[--bq-input--icon-size] min-w-[0] border-none p-0 focus:outline-none focus-visible:outline-none;
 
   box-shadow: none;
diff --git a/packages/bee-q/src/components/input/scss/bq-input.variables.scss b/packages/bee-q/src/components/input/scss/bq-input.variables.scss
index 99105b9b6..39d11b770 100644
--- a/packages/bee-q/src/components/input/scss/bq-input.variables.scss
+++ b/packages/bee-q/src/components/input/scss/bq-input.variables.scss
@@ -29,10 +29,10 @@
    */
   --bq-input--background-color: theme('colors.ui.primary');
 
-  --bq-input--border-color: theme('colors.stroke.tiertary');
+  --bq-input--border-color: theme('colors.stroke.tertiary');
   --bq-input--border-color-hover: theme('colors.stroke.brand-hover');
   --bq-input--border-color-focus: theme('colors.stroke.brand');
-  --bq-input--border-color-disabled: theme('colors.stroke.tiertary-disabled');
+  --bq-input--border-color-disabled: theme('colors.stroke.tertiary-disabled');
   --bq-input--border-radius: theme('borderRadius.s');
   --bq-input--border-width: 1px;
   --bq-input--border-style: solid;
diff --git a/packages/bee-q/src/components/option/scss/bq-option.scss b/packages/bee-q/src/components/option/scss/bq-option.scss
index c0a1a154e..34b8d3897 100644
--- a/packages/bee-q/src/components/option/scss/bq-option.scss
+++ b/packages/bee-q/src/components/option/scss/bq-option.scss
@@ -20,7 +20,7 @@
   // Hover
   @apply [&:not(.disabled)]:hover:bg-ui-secondary-hover;
   // Active
-  @apply [&.active:not(.disabled)]:bg-ui-brand-light [&.active:not(.disabled)]:text-text-brand;
+  @apply [&.active:not(.disabled)]:bg-ui-brand-alt [&.active:not(.disabled)]:text-text-brand;
   // Disabled
   @apply [&.disabled]:cursor-not-allowed [&.disabled]:text-text-primary-disabled;
 
diff --git a/packages/bee-q/src/components/radio/scss/bq-radio.scss b/packages/bee-q/src/components/radio/scss/bq-radio.scss
index 7f5428914..f26200758 100644
--- a/packages/bee-q/src/components/radio/scss/bq-radio.scss
+++ b/packages/bee-q/src/components/radio/scss/bq-radio.scss
@@ -10,7 +10,7 @@
 
 .bq-radio {
   @apply inline-flex cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;
-  @apply rounded-s p-xs pr-m;
+  @apply rounded-s p-xs;
 
   &.is-disabled {
     .bq-radio__circle {
diff --git a/packages/bee-q/src/components/side-menu-item/scss/bq-side-menu-item.variables.scss b/packages/bee-q/src/components/side-menu-item/scss/bq-side-menu-item.variables.scss
index 988f06286..87646f51d 100644
--- a/packages/bee-q/src/components/side-menu-item/scss/bq-side-menu-item.variables.scss
+++ b/packages/bee-q/src/components/side-menu-item/scss/bq-side-menu-item.variables.scss
@@ -5,7 +5,7 @@
 :host {
   --bq-side-menu-item--bg-default: theme('backgroundColor.transparent');
   --bq-side-menu-item--bg-hover: theme('backgroundColor.ui.secondary-hover');
-  --bq-side-menu-item--bg-active: theme('backgroundColor.ui.brand-light');
+  --bq-side-menu-item--bg-active: theme('backgroundColor.ui.brand-alt');
 
   --bq-side-menu-item--text-default: theme('textColor.text.primary');
   --bq-side-menu-item--text-hover: theme('textColor.text.primary');
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 3a3cf9b96..3bc234d8b 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
@@ -90,7 +90,7 @@ const Template = (args: Args) => html`
 
   <main class="grid grid-cols-1 p-m">
     <h1 class="mb-l">Dashboard</h1>
-    <div class="h-80 w-full border border-dashed border-stroke-secondary-light bg-ui-secondary-light">
+    <div class="h-80 w-full border border-dashed border-stroke-primary bg-ui-primary-alt">
       <!-- Your content -->
     </div>
   </main>
diff --git a/packages/bee-q/src/components/side-menu/scss/bq-side-menu.scss b/packages/bee-q/src/components/side-menu/scss/bq-side-menu.scss
index 11fda0b2a..7be5aae94 100644
--- a/packages/bee-q/src/components/side-menu/scss/bq-side-menu.scss
+++ b/packages/bee-q/src/components/side-menu/scss/bq-side-menu.scss
@@ -32,7 +32,7 @@
 }
 
 .bq-side-menu--footer ::slotted([slot='footer']) {
-  --bq-ui--secondary-active: theme('backgroundColor.ui.brand-light');
+  --bq-ui--secondary-active: theme('backgroundColor.ui.brand-alt');
 }
 
 /* -------------------------------------------------------------------------- */
@@ -76,7 +76,7 @@
 
   ::slotted(bq-side-menu-item) {
     --bq-side-menu-item--bg-hover: theme('backgroundColor.ui.inverse-hover');
-    --bq-side-menu-item--bg-active: theme('backgroundColor.ui.secondary-light');
+    --bq-side-menu-item--bg-active: theme('backgroundColor.ui.primary-alt');
 
     --bq-side-menu-item--text-default: theme('textColor.text.inverse');
     --bq-side-menu-item--text-hover: theme('textColor.text.inverse');
diff --git a/packages/bee-q/src/components/side-menu/scss/bq-side-menu.variables.scss b/packages/bee-q/src/components/side-menu/scss/bq-side-menu.variables.scss
index 1a8db2ea9..60796d011 100644
--- a/packages/bee-q/src/components/side-menu/scss/bq-side-menu.variables.scss
+++ b/packages/bee-q/src/components/side-menu/scss/bq-side-menu.variables.scss
@@ -3,7 +3,7 @@
 /* -------------------------------------------------------------------------- */
 
 :host {
-  --bq-side-menu--bg-color: theme('colors.ui.secondary-light');
+  --bq-side-menu--bg-color: theme('colors.ui.primary-alt');
   --bq-side-menu--brand-color: theme('colors.stroke.brand');
   /**
    * ⚠️ There are two CSS properties been added to the global (:root) scope
diff --git a/packages/bee-q/src/components/switch/bq-switch.tsx b/packages/bee-q/src/components/switch/bq-switch.tsx
index 2a7eac448..ed0cf1d19 100644
--- a/packages/bee-q/src/components/switch/bq-switch.tsx
+++ b/packages/bee-q/src/components/switch/bq-switch.tsx
@@ -249,8 +249,8 @@ export class BqSwitch {
           <span
             class={{
               'bq-switch--label': true,
-              'ml-s': this.hasLabel && !this.reverseOrder,
-              'mr-s': this.hasLabel && this.reverseOrder,
+              'ms-s': this.hasLabel && !this.reverseOrder,
+              'me-s': this.hasLabel && this.reverseOrder,
             }}
             ref={(span) => (this.labelElem = span)}
             part="label"
diff --git a/packages/bee-q/src/components/tab/bq-tab.tsx b/packages/bee-q/src/components/tab/bq-tab.tsx
index 113c8fe4c..a2b44fd3e 100644
--- a/packages/bee-q/src/components/tab/bq-tab.tsx
+++ b/packages/bee-q/src/components/tab/bq-tab.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';
 
 import { TAB_SIZE, TTabSize } from './bq-tab.types';
-import { validatePropValue } from '../../shared/utils';
+import { hasSlotContent, validatePropValue } from '../../shared/utils';
 
 /**
  * @part base - The HTML button used under the hood.
@@ -20,6 +20,7 @@ export class BqTab {
   // ====================
 
   private buttonElement: HTMLButtonElement;
+  private iconElement: HTMLSpanElement;
 
   // Reference to host HTML element
   // ===================================
@@ -31,6 +32,7 @@ export class BqTab {
   // =======================================
 
   @State() tabIndex: number | null = null;
+  @State() hasIcon: boolean = false;
 
   // Public Property API
   // ========================
@@ -149,6 +151,10 @@ export class BqTab {
     this.bqKeyDown.emit(event);
   };
 
+  private handleIconSlotChange = () => {
+    this.hasIcon = hasSlotContent(this.iconElement, 'icon');
+  };
+
   private get tabindex(): string {
     // NOTE: this.active is undefined when is not part of bq-tab-group
     return `${this.tabIndex ?? -1 + +(this.active ?? 1)}`;
@@ -180,11 +186,11 @@ export class BqTab {
         tabindex={this.tabindex}
         part="base"
       >
-        <div class="flex items-center justify-center gap-[--bq-tab--label-icon-gap]" part="content">
-          <div class="flex" part="icon">
-            <slot name="icon" />
+        <div class="flex items-center justify-center" part="content">
+          <div class="flex" ref={(span: HTMLSpanElement) => (this.iconElement = span)} part="icon">
+            <slot name="icon" onSlotchange={this.handleIconSlotChange} />
           </div>
-          <div class="line-clamp-1" part="text">
+          <div class={{ 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }} part="text">
             <slot />
           </div>
         </div>
diff --git a/packages/bee-q/src/components/textarea/scss/bq-textarea.variables.scss b/packages/bee-q/src/components/textarea/scss/bq-textarea.variables.scss
index ade795cad..4aaff1cba 100644
--- a/packages/bee-q/src/components/textarea/scss/bq-textarea.variables.scss
+++ b/packages/bee-q/src/components/textarea/scss/bq-textarea.variables.scss
@@ -28,10 +28,10 @@
   --bq-textarea--background-color: theme('colors.ui.primary');
   --bq-textarea--background-color-disabled: theme('colors.ui.secondary-disabled');
 
-  --bq-textarea--border-color: theme('colors.stroke.tiertary');
+  --bq-textarea--border-color: theme('colors.stroke.tertiary');
   --bq-textarea--border-color-hover: theme('colors.stroke.brand-hover');
   --bq-textarea--border-color-focus: theme('colors.stroke.brand');
-  --bq-textarea--border-color-disabled: theme('colors.stroke.tiertary-disabled');
+  --bq-textarea--border-color-disabled: theme('colors.stroke.tertiary-disabled');
   --bq-textarea--border-radius: theme('borderRadius.s');
   --bq-textarea--border-width: 1px;
   --bq-textarea--border-style: solid;
diff --git a/packages/bee-q/src/global/styles/default.scss b/packages/bee-q/src/global/styles/default.scss
index 50c516a6c..d98ab8e6d 100644
--- a/packages/bee-q/src/global/styles/default.scss
+++ b/packages/bee-q/src/global/styles/default.scss
@@ -1,8 +1,3 @@
-/* -------------------------------------------------------------------------- */
-/*                                Default theme                               */
-/* -------------------------------------------------------------------------- */
-@import './themes/default';
-
 /* -------------------------------------------------------------------------- */
 /*                               Utility classes                              */
 /* -------------------------------------------------------------------------- */
diff --git a/packages/bee-q/src/global/styles/tailwind.pcss b/packages/bee-q/src/global/styles/tailwind.pcss
index 2df4e815b..b5c61c956 100644
--- a/packages/bee-q/src/global/styles/tailwind.pcss
+++ b/packages/bee-q/src/global/styles/tailwind.pcss
@@ -1,156 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  /* -------------------------------------------------------------------------- */
-  /*                                    Fonts                                   */
-  /* -------------------------------------------------------------------------- */
-
-  /* Thin */
-  @font-face {
-    font-family: 'Outfit';
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-      U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-  /* Light */
-  @font-face {
-    font-family: 'Outfit';
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-      U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-  /* Regular */
-  @font-face {
-    font-family: 'Outfit';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-      U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-  /* Medium */
-  @font-face {
-    font-family: 'Outfit';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-      U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-  /* Semibold */
-  @font-face {
-    font-family: 'Outfit';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-      U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-  /* Bold */
-  @font-face {
-    font-family: 'Outfit';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-      U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-
-  /* -------------------------------------------------------------------------- */
-  /*                       Custom normalize styles (reset)                      */
-  /* -------------------------------------------------------------------------- */
-
-  /* Box sizing rules */
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  /* Remove default margin */
-  * {
-    margin: 0;
-  }
-
-  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-  ul[role='list'],
-  ol[role='list'] {
-    list-style: none;
-  }
-
-  /* Set core root defaults */
-  html:focus-within {
-    scroll-behavior: smooth;
-  }
-
-  /* Set core body defaults */
-  body {
-    line-height: var(--bq-font-line-height--regular);
-    min-height: 100vh;
-    text-rendering: optimizeSpeed;
-
-    -webkit-font-smoothing: antialiased;
-  }
-
-  /* A elements that don't have a class get default styles */
-  a:not([class]) {
-    text-decoration-skip-ink: auto;
-  }
-
-  /* Make images easier to work with */
-  img,
-  picture,
-  video,
-  canvas,
-  svg {
-    display: block;
-    max-width: 100%;
-  }
-
-  /* Inherit fonts for inputs and buttons */
-  input,
-  button,
-  textarea,
-  select {
-    font: inherit;
-  }
-
-  /* Avoid text overflows */
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    overflow-wrap: break-word;
-  }
-
-  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
-  @media (prefers-reduced-motion: reduce) {
-    html:focus-within {
-      scroll-behavior: auto;
-    }
-
-    *,
-    *::before,
-    *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-}
diff --git a/packages/bee-q/src/global/styles/themes/default/_bg-colors.scss b/packages/bee-q/src/global/styles/themes/default/_bg-colors.scss
deleted file mode 100644
index 8dd3784c2..000000000
--- a/packages/bee-q/src/global/styles/themes/default/_bg-colors.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                     Theme: DEFAULT - Background colors                     */
-/* -------------------------------------------------------------------------- */
-
-:root,
-::backdrop {
-  --bq-background--primary: var(--bq-neutral-white);
-  --bq-background--secondary: var(--bq-grey-200);
-  --bq-background--tertiary: var(--bq-grey-600);
-  --bq-background--inverse: var(--bq-grey-800);
-  --bq-background--brand: var(--bq-indigo-600);
-}
diff --git a/packages/bee-q/src/global/styles/themes/default/_icon-colors.scss b/packages/bee-q/src/global/styles/themes/default/_icon-colors.scss
deleted file mode 100644
index 1ef34a6e2..000000000
--- a/packages/bee-q/src/global/styles/themes/default/_icon-colors.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                        Theme: DEFAULT - Icon colors                        */
-/* -------------------------------------------------------------------------- */
-
-:root {
-  /** Primary */
-  --bq-icon--primary: var(--bq-grey-900);
-  --bq-icon--primary-hover: var(--bq-grey-800);
-  --bq-icon--primary-active: var(--bq-neutral-black);
-  --bq-icon--primary-disabled: var(--bq-grey-600);
-  /** Secondary */
-  --bq-icon--secondary: var(--bq-grey-600);
-  --bq-icon--secondary-hover: var(--bq-grey-500);
-  --bq-icon--secondary-active: var(--bq-grey-700);
-  --bq-icon--secondary-disabled: var(--bq-grey-400);
-  --bq-icon--secondary-inverse: var(--bq-neutral-white);
-  /** Brand */
-  --bq-icon--brand: var(--bq-indigo-600);
-  --bq-icon--brand-hover: var(--bq-indigo-500);
-  --bq-icon--brand-active: var(--bq-indigo-700);
-  --bq-icon--brand-disabled: var(--bq-indigo-400);
-  /** Feedback */
-  --bq-icon--success: var(--bq-teal-600);
-  --bq-icon--warning: var(--bq-gold-600);
-  --bq-icon--danger: var(--bq-red-600);
-}
diff --git a/packages/bee-q/src/global/styles/themes/default/_spacing.scss b/packages/bee-q/src/global/styles/themes/default/_spacing.scss
deleted file mode 100644
index 18315d4a4..000000000
--- a/packages/bee-q/src/global/styles/themes/default/_spacing.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                        Theme: Default - space tokens                       */
-/* -------------------------------------------------------------------------- */
-
-:root {
-  --bq-spacing-xs3: 2px;
-  --bq-spacing-xs2: 4px;
-  --bq-spacing-xs: 8px;
-  --bq-spacing-s: 12px;
-  --bq-spacing-m: 16px;
-  --bq-spacing-l: 24px;
-  --bq-spacing-xl: 32px;
-  --bq-spacing-xxl: 40px;
-  --bq-spacing-xxl2: 56px;
-  --bq-spacing-xxl3: 64px;
-  --bq-spacing-xxl4: 72px;
-}
diff --git a/packages/bee-q/src/global/styles/themes/default/_stroke-colors.scss b/packages/bee-q/src/global/styles/themes/default/_stroke-colors.scss
deleted file mode 100644
index ddd209f1e..000000000
--- a/packages/bee-q/src/global/styles/themes/default/_stroke-colors.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                       Theme: DEFAULT - Stroke colors                       */
-/* -------------------------------------------------------------------------- */
-
-:root {
-  /** Primary */
-  --bq-stroke--primary: var(--bq-grey-600);
-  --bq-stroke--primary-hover: var(--bq-grey-500);
-  --bq-stroke--primary-active: var(--bq-grey-700);
-  --bq-stroke--primary-disabled: var(--bq-grey-400);
-  /** Secondary */
-  --bq-stroke--secondary: var(--bq-grey-200);
-  --bq-stroke--secondary-hover: var(--bq-grey-100);
-  --bq-stroke--secondary-active: var(--bq-grey-300);
-  --bq-stroke--secondary-disabled: var(--bq-grey-100);
-  --bq-stroke--secondary-light: var(--bq-grey-50);
-  /** Tiertary */
-  --bq-stroke--tiertary: var(--bq-grey-900);
-  --bq-stroke--tiertary-hover: var(--bq-grey-800);
-  --bq-stroke--tiertary-active: var(--bq-neutral-black);
-  --bq-stroke--tiertary-disabled: var(--bq-grey-600);
-  /** Inverse */
-  --bq-stroke--inverse: var(--bq-neutral-white);
-  /** Brand */
-  --bq-stroke--brand: var(--bq-indigo-600);
-  --bq-stroke--brand-hover: var(--bq-indigo-500);
-  --bq-stroke--brand-active: var(--bq-indigo-700);
-  --bq-stroke--brand-disabled: var(--bq-indigo-400);
-  --bq-stroke--brand-focus: var(--bq-indigo-400);
-  /** Success */
-  --bq-stroke--success: var(--bq-teal-600);
-  --bq-stroke--success-hover: var(--bq-teal-500);
-  --bq-stroke--success-active: var(--bq-teal-700);
-  --bq-stroke--success-disabled: var(--bq-teal-400);
-  /** Warning */
-  --bq-stroke--warning: var(--bq-gold-600);
-  --bq-stroke--warning-hover: var(--bq-gold-500);
-  --bq-stroke--warning-active: var(--bq-gold-700);
-  --bq-stroke--warning-disabled: var(--bq-gold-400);
-  /** Danger */
-  --bq-stroke--danger: var(--bq-red-600);
-  --bq-stroke--danger-hover: var(--bq-red-500);
-  --bq-stroke--danger-active: var(--bq-red-700);
-  --bq-stroke--danger-disabled: var(--bq-red-400);
-}
diff --git a/packages/bee-q/src/global/styles/themes/default/_text-colors.scss b/packages/bee-q/src/global/styles/themes/default/_text-colors.scss
deleted file mode 100644
index f4dec7afc..000000000
--- a/packages/bee-q/src/global/styles/themes/default/_text-colors.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                        Theme: DEFAULT - Text colors                        */
-/* -------------------------------------------------------------------------- */
-
-:root {
-  /** Primary */
-  --bq-text--primary: var(--bq-grey-900);
-  --bq-text--primary-hover: var(--bq-grey-800);
-  --bq-text--primary-active: var(--bq-neutral-black);
-  --bq-text--primary-disabled: var(--bq-grey-600);
-  /** Secondary */
-  --bq-text--secondary: var(--bq-grey-600);
-  --bq-text--secondary-hover: var(--bq-grey-500);
-  --bq-text--secondary-active: var(--bq-grey-700);
-  --bq-text--secondary-disabled: var(--bq-grey-400);
-  --bq-text--secondary-inverse: var(--bq-neutral-white);
-  /** Inverse */
-  --bq-text--inverse: var(--bq-neutral-white);
-  /** Brand */
-  --bq-text--brand: var(--bq-indigo-600);
-  --bq-text--brand-hover: var(--bq-indigo-500);
-  --bq-text--brand-active: var(--bq-indigo-700);
-  --bq-text--brand-disabled: var(--bq-indigo-400);
-  /** Feedback */
-  --bq-text--success: var(--bq-teal-800);
-  --bq-text--warning: var(--bq-gold-800);
-  --bq-text--danger: var(--bq-red-800);
-}
diff --git a/packages/bee-q/src/global/styles/themes/default/_ui-colors.scss b/packages/bee-q/src/global/styles/themes/default/_ui-colors.scss
deleted file mode 100644
index c231a701d..000000000
--- a/packages/bee-q/src/global/styles/themes/default/_ui-colors.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                         Theme: DEFAULT - UI colors                         */
-/* -------------------------------------------------------------------------- */
-
-:root {
-  /** Primary */
-  --bq-ui--primary: var(--bq-neutral-white);
-  --bq-ui--primary-hover: var(--bq-grey-50);
-  --bq-ui--primary-active: var(--bq-grey-200);
-  --bq-ui--primary-disabled: var(--bq-grey-100);
-  /** Secondary */
-  --bq-ui--secondary: var(--bq-grey-200);
-  --bq-ui--secondary-hover: var(--bq-grey-100);
-  --bq-ui--secondary-active: var(--bq-grey-300);
-  --bq-ui--secondary-disabled: var(--bq-grey-100);
-  --bq-ui--secondary-light: var(--bq-grey-50);
-  /** Tiertary */
-  --bq-ui--tiertary: var(--bq-grey-600);
-  --bq-ui--tiertary-hover: var(--bq-grey-500);
-  --bq-ui--tiertary-active: var(--bq-grey-700);
-  --bq-ui--tiertary-disabled: var(--bq-grey-400);
-  /** Inverse */
-  --bq-ui--inverse: var(--bq-grey-900);
-  --bq-ui--inverse-hover: var(--bq-grey-800);
-  --bq-ui--inverse-active: var(--bq-neutral-black);
-  --bq-ui--inverse-disabled: var(--bq-grey-600);
-  /** Brand */
-  --bq-ui--brand: var(--bq-indigo-600);
-  --bq-ui--brand-hover: var(--bq-indigo-500);
-  --bq-ui--brand-active: var(--bq-indigo-700);
-  --bq-ui--brand-disabled: var(--bq-indigo-400);
-  --bq-ui--brand-light: var(--bq-indigo-100);
-  /** Success */
-  --bq-ui--success: var(--bq-teal-600);
-  --bq-ui--success-hover: var(--bq-teal-500);
-  --bq-ui--success-active: var(--bq-teal-700);
-  --bq-ui--success-disabled: var(--bq-teal-400);
-  --bq-ui--success-light: var(--bq-teal-100);
-  /** Warning */
-  --bq-ui--warning: var(--bq-gold-600);
-  --bq-ui--warning-hover: var(--bq-gold-500);
-  --bq-ui--warning-active: var(--bq-gold-700);
-  --bq-ui--warning-disabled: var(--bq-gold-400);
-  --bq-ui--warning-light: var(--bq-gold-100);
-  /** Danger */
-  --bq-ui--danger: var(--bq-red-600);
-  --bq-ui--danger-hover: var(--bq-red-500);
-  --bq-ui--danger-active: var(--bq-red-700);
-  --bq-ui--danger-disabled: var(--bq-red-400);
-  --bq-ui--danger-light: var(--bq-red-100);
-}
diff --git a/packages/bee-q/src/global/styles/themes/default/index.scss b/packages/bee-q/src/global/styles/themes/default/index.scss
deleted file mode 100644
index 4f504f170..000000000
--- a/packages/bee-q/src/global/styles/themes/default/index.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import './bg-colors';
-@import './icon-colors';
-@import './spacing';
-@import './stroke-colors';
-@import './text-colors';
-@import './ui-colors';
-
-/* -------------------------------------------------------------------------- */
-/*                                 Root styles                                */
-/* -------------------------------------------------------------------------- */
-
-html,
-body {
-  @apply font-outfit text-m font-regular text-text-primary;
-}
diff --git a/packages/bee-q/src/global/styles/utils/_typography.scss b/packages/bee-q/src/global/styles/utils/_typography.scss
index 540966aba..0d78a0dc7 100644
--- a/packages/bee-q/src/global/styles/utils/_typography.scss
+++ b/packages/bee-q/src/global/styles/utils/_typography.scss
@@ -1,3 +1,68 @@
+/* -------------------------------------------------------------------------- */
+/*                                    Fonts                                   */
+/* -------------------------------------------------------------------------- */
+
+/* Thin */
+@font-face {
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* Light */
+@font-face {
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* Regular */
+@font-face {
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* Medium */
+@font-face {
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* Semibold */
+@font-face {
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* Bold */
+@font-face {
+  font-family: 'Outfit';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 /* -------------------------------------------------------------------------- */
 /*                        BEEQ global styles typography                       */
 /* -------------------------------------------------------------------------- */
diff --git a/packages/bee-q/src/global/styles/variables/_base.scss b/packages/bee-q/src/global/styles/variables/_base.scss
new file mode 100644
index 000000000..b31a7957b
--- /dev/null
+++ b/packages/bee-q/src/global/styles/variables/_base.scss
@@ -0,0 +1,84 @@
+/* -------------------------------------------------------------------------- */
+/*              Custom normalize styles for Tailwind CSS (reset)              */
+/* -------------------------------------------------------------------------- */
+
+/* stylelint-disable selector-no-qualifying-type */
+@layer base {
+  /* Box sizing rules */
+  *,
+  *::before,
+  *::after {
+    @apply box-border;
+  }
+
+  /* Remove default margin */
+  * {
+    @apply m-0;
+  }
+
+  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+  ul[role='list'],
+  ol[role='list'] {
+    @apply list-none;
+  }
+
+  /* Set core root defaults */
+  html:focus-within {
+    @apply scroll-smooth;
+  }
+
+  /* Set core body defaults */
+  body {
+    @apply min-h-screen bg-bg-primary font-outfit leading-regular text-text-primary antialiased;
+    text-rendering: optimizeSpeed;
+  }
+
+  /* A elements that don't have a class get default styles */
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+
+  /* Make images easier to work with */
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    @apply block max-w-full;
+  }
+
+  /* Inherit fonts for inputs and buttons */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  /* Avoid text overflows */
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply break-words;
+  }
+
+  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+  @media (prefers-reduced-motion: reduce) {
+    html:focus-within {
+      @apply scroll-auto;
+    }
+
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
diff --git a/packages/bee-q/src/global/styles/variables/_border-radius.scss b/packages/bee-q/src/global/styles/variables/_border-radius.scss
deleted file mode 100644
index 30bf736aa..000000000
--- a/packages/bee-q/src/global/styles/variables/_border-radius.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-:root {
-  --bq-radius--none: 0;
-  --bq-radius--xs2: 2px;
-  --bq-radius--xs: 4px;
-  --bq-radius--s: 8px;
-  --bq-radius--m: 12px;
-  --bq-radius--l: 24px;
-  --bq-radius--xl: 9999px;
-}
diff --git a/packages/bee-q/src/global/styles/variables/_box-shadow.scss b/packages/bee-q/src/global/styles/variables/_box-shadow.scss
deleted file mode 100644
index 4c26760cc..000000000
--- a/packages/bee-q/src/global/styles/variables/_box-shadow.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-: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 10px 48px -16px rgba(0, 0, 0, 0.12);
-  --bq-box-shadow--l: 0 20px 58px -16px rgba(0, 0, 0, 0.16);
-}
diff --git a/packages/bee-q/src/global/styles/variables/_colors.scss b/packages/bee-q/src/global/styles/variables/_colors.scss
index 57eae8f06..39220a718 100644
--- a/packages/bee-q/src/global/styles/variables/_colors.scss
+++ b/packages/bee-q/src/global/styles/variables/_colors.scss
@@ -5,18 +5,18 @@
 :root,
 ::backdrop {
   /** Blue */
-  --bq-blue-100: #e8f0fd;
+  --bq-blue-100: #e7f0fd;
   --bq-blue-200: #d0e2fb;
-  --bq-blue-300: #a2c5f7;
+  --bq-blue-300: #a1c5f7;
   --bq-blue-400: #73a8f3;
-  --bq-blue-500: #458bef;
-  --bq-blue-600: #166eeb;
-  --bq-blue-700: #1258bc;
+  --bq-blue-500: #448bef;
+  --bq-blue-600: #156eeb;
+  --bq-blue-700: #1158bc;
   --bq-blue-800: #0d428d;
-  --bq-blue-900: #092c5e;
+  --bq-blue-900: #082c5e;
   --bq-blue-1000: #04162f;
   /** Corai */
-  --bq-corai-100: #fff2f3;
+  --bq-corai-100: #fff2f2;
   --bq-corai-200: #ffe6e6;
   --bq-corai-300: #ffccce;
   --bq-corai-400: #ffb3b5;
@@ -38,13 +38,13 @@
   --bq-cyan-900: #0c4858;
   --bq-cyan-1000: #06242c;
   /** Gold */
-  --bq-gold-100: #fbf4ed;
+  --bq-gold-100: #fbf4ec;
   --bq-gold-200: #f7e9da;
   --bq-gold-300: #f0d3b6;
   --bq-gold-400: #e8bc91;
   --bq-gold-500: #e1a66d;
   --bq-gold-600: #d99048;
-  --bq-gold-700: #ae733b;
+  --bq-gold-700: #ae733a;
   --bq-gold-800: #82562b;
   --bq-gold-900: #573a1d;
   --bq-gold-1000: #2b1d0e;
@@ -60,7 +60,7 @@
   --bq-green-900: #0c4a28;
   --bq-green-1000: #062514;
   /** Grey */
-  --bq-grey-50: #f8f8f9;
+  --bq-grey-50: #f7f8f9;
   --bq-grey-100: #f0f1f2;
   --bq-grey-200: #e1e3e6;
   --bq-grey-300: #c4c7cc;
@@ -69,7 +69,9 @@
   --bq-grey-600: #6b7280;
   --bq-grey-700: #565b66;
   --bq-grey-800: #40444d;
-  --bq-grey-900: #2b2e33;
+  --bq-grey-900: #25282d;
+  --bq-grey-950: #17191c;
+  --bq-grey-1000: #101112;
   /** Indigo */
   --bq-indigo-100: #edecfc;
   --bq-indigo-200: #dcdafa;
@@ -81,33 +83,44 @@
   --bq-indigo-800: #2f2a89;
   --bq-indigo-900: #201c5c;
   --bq-indigo-1000: #100e2e;
+  /** Iris */
+  --bq-iris-100: #e9f0ff;
+  --bq-iris-200: #d6e0ff;
+  --bq-iris-300: #b2c0fe;
+  --bq-iris-400: #8691f8;
+  --bq-iris-500: #6061ee;
+  --bq-iris-600: #4f46e5;
+  --bq-iris-700: #413abd;
+  --bq-iris-800: #332e95;
+  --bq-iris-900: #26216d;
+  --bq-iris-1000: #181545;
   /** Lime */
-  --bq-lime-100: #f5fae9;
+  --bq-lime-100: #f5fae8;
   --bq-lime-200: #ecf6d2;
   --bq-lime-300: #d9eda5;
   --bq-lime-400: #c5e379;
   --bq-lime-500: #b2da4c;
-  --bq-lime-600: #9fd120;
+  --bq-lime-600: #9fd11f;
   --bq-lime-700: #7fa719;
   --bq-lime-800: #5f7d13;
   --bq-lime-900: #40540c;
   --bq-lime-1000: #202a06;
   /** Magenta */
-  --bq-magenta-100: #f8ebf3;
-  --bq-magenta-200: #f1d7e8;
-  --bq-magenta-300: #e3afd1;
-  --bq-magenta-400: #d687b9;
-  --bq-magenta-500: #c85fa2;
-  --bq-magenta-600: #ba378b;
-  --bq-magenta-700: #952c6f;
-  --bq-magenta-800: #702153;
-  --bq-magenta-900: #4a1638;
-  --bq-magenta-1000: #250b1c;
+  --bq-magenta-100: #fce7f4;
+  --bq-magenta-200: #f9cfea;
+  --bq-magenta-300: #f39fd6;
+  --bq-magenta-400: #ee6fbf;
+  --bq-magenta-500: #e83fab;
+  --bq-magenta-600: #de1395;
+  --bq-magenta-700: #b20f77;
+  --bq-magenta-800: #850c59;
+  --bq-magenta-900: #58083c;
+  --bq-magenta-1000: #2c041e;
   /** Neutral */
   --bq-neutral-white: #fff;
   --bq-neutral-black: #000;
   /** Orange */
-  --bq-orange-100: #fcf0e9;
+  --bq-orange-100: #fbf0e9;
   --bq-orange-200: #f8e1d4;
   --bq-orange-300: #f1c2a8;
   --bq-orange-400: #eaa47d;
@@ -118,18 +131,18 @@
   --bq-orange-900: #58290f;
   --bq-orange-1000: #2c1508;
   /** Purple */
-  --bq-purple-100: #f0ebf9;
+  --bq-purple-100: #efebf8;
   --bq-purple-200: #e0d7f2;
   --bq-purple-300: #c1afe5;
   --bq-purple-400: #a388d8;
   --bq-purple-500: #8460cb;
-  --bq-purple-600: #8460cb;
+  --bq-purple-600: #6538be;
   --bq-purple-700: #512d98;
   --bq-purple-800: #3d2272;
   --bq-purple-900: #28164c;
   --bq-purple-1000: #140b26;
   /** Red */
-  --bq-red-100: #fce8ea;
+  --bq-red-100: #fce7ea;
   --bq-red-200: #f9d1d5;
   --bq-red-300: #f3a2ac;
   --bq-red-400: #ed7482;
@@ -140,7 +153,7 @@
   --bq-red-900: #5a0913;
   --bq-red-1000: #2d0509;
   /** Sky */
-  --bq-sky-100: #eff5fb;
+  --bq-sky-100: #eff4fb;
   --bq-sky-200: #dfeaf8;
   --bq-sky-300: #bfd5f1;
   --bq-sky-400: #9ec1e9;
@@ -151,8 +164,8 @@
   --bq-sky-900: #263c58;
   --bq-sky-1000: #131e2c;
   /** Teal */
-  --bq-teal-100: #e5f8f5;
-  --bq-teal-200: #e5f8f5;
+  --bq-teal-100: #e5f7f5;
+  --bq-teal-200: #ccf0eb;
   --bq-teal-300: #99e1d8;
   --bq-teal-400: #66d2c4;
   --bq-teal-500: #33c3b1;
@@ -162,15 +175,15 @@
   --bq-teal-900: #00483f;
   --bq-teal-1000: #00241f;
   /** Volcano */
-  --bq-volcano-100: #feede8;
+  --bq-volcano-100: #feede7;
   --bq-volcano-200: #fddbd1;
-  --bq-volcano-300: #fcb8a3;
+  --bq-volcano-300: #fbb8a3;
   --bq-volcano-400: #fa9474;
-  --bq-volcano-500: #f97146;
-  --bq-volcano-600: #f97146;
-  --bq-volcano-700: #c63e13;
+  --bq-volcano-500: #f87146;
+  --bq-volcano-600: #f64d18;
+  --bq-volcano-700: #c53e13;
   --bq-volcano-800: #942e0e;
-  --bq-volcano-900: #631f0a;
+  --bq-volcano-900: #621f0a;
   --bq-volcano-1000: #310f05;
   /** Yellow */
   --bq-yellow-100: #fefbe7;
diff --git a/packages/bee-q/src/global/styles/variables/_typography.scss b/packages/bee-q/src/global/styles/variables/_typography.scss
deleted file mode 100644
index d49fbba53..000000000
--- a/packages/bee-q/src/global/styles/variables/_typography.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-:root {
-  /* -------------------------------------------------------------------------- */
-  /*                                 Font family                                */
-  /* -------------------------------------------------------------------------- */
-  --bq-font-family--outfit: 'Outfit', sans-serif;
-
-  /* -------------------------------------------------------------------------- */
-  /*                                  Font size                                 */
-  /* -------------------------------------------------------------------------- */
-  --bq-font-size--xs: 12px;
-  --bq-font-size--s: 14px;
-  --bq-font-size--m: 16px;
-  --bq-font-size--l: 20px;
-  --bq-font-size--xl: 24px;
-  --bq-font-size--xxl: 32px;
-  --bq-font-size--xxl2: 40px;
-  --bq-font-size--xxl3: 48px;
-  --bq-font-size--xxl4: 56px;
-  --bq-font-size--xxl5: 64px;
-
-  /* -------------------------------------------------------------------------- */
-  /*                                 Font weight                                */
-  /* -------------------------------------------------------------------------- */
-  --bq-font-weight--thin: 100;
-  --bq-font-weight--light: 300;
-  --bq-font-weight--regular: 400;
-  --bq-font-weight--medium: 500;
-  --bq-font-weight--semibold: 600;
-  --bq-font-weight--bold: 700;
-
-  /* -------------------------------------------------------------------------- */
-  /*                                 Line height                                */
-  /* -------------------------------------------------------------------------- */
-  --bq-font-line-height--small: 1.2;
-  --bq-font-line-height--regular: 1.5;
-  --bq-font-line-height--large: 1.5;
-}
diff --git a/packages/bee-q/src/global/styles/variables/index.scss b/packages/bee-q/src/global/styles/variables/index.scss
index 484262005..b6b85769f 100644
--- a/packages/bee-q/src/global/styles/variables/index.scss
+++ b/packages/bee-q/src/global/styles/variables/index.scss
@@ -1,4 +1,2 @@
-@import './border-radius';
-@import './box-shadow';
 @import './colors';
-@import './typography';
+@import './base';
diff --git a/packages/bee-q/stencil.config.ts b/packages/bee-q/stencil.config.ts
index 7acb9f1ce..a403f2267 100644
--- a/packages/bee-q/stencil.config.ts
+++ b/packages/bee-q/stencil.config.ts
@@ -4,20 +4,15 @@ import { angularOutputTarget as angular } from '@stencil/angular-output-target';
 import { Config } from '@stencil/core';
 import { reactOutputTarget as react } from '@stencil/react-output-target';
 import { sass } from '@stencil/sass';
-import autoprefixer from 'autoprefixer';
-import tailwind, { tailwindGlobal, tailwindHMR } from 'stencil-tailwind-plugin';
-import tailwindcss from 'tailwindcss';
+import tailwind, { PluginConfigOpts, tailwindHMR } from 'stencil-tailwind-plugin';
 
 import { angularValueAccessorBindings, generateCustomElementsJson } from './src/tools';
 import tailwindConf from '../../tailwind.config';
 
-const tailwindOpts = {
-  postcss: {
-    plugins: [tailwindcss(), autoprefixer()],
-  },
-  stripComments: true,
-  tailwindCssPath: resolve(__dirname, 'src/global/styles/tailwind.pcss').replace(/\\/g, '/'),
+const tailwindOpts: PluginConfigOpts = {
+  postcss: resolve(__dirname, '../../postcss.config.js').replace(/\\/g, '/'),
   tailwindConf: tailwindConf,
+  stripComments: true,
 };
 
 export const config: Config = {
@@ -39,11 +34,9 @@ export const config: Config = {
       sourceMapEmbed: true,
       sourceMapContents: true,
     }),
-    tailwindGlobal(tailwindOpts),
+    // tailwindGlobal(tailwindOpts),
     tailwind(tailwindOpts),
-    tailwindHMR({
-      tailwindConf: tailwindConf,
-    }),
+    tailwindHMR({ tailwindConf }),
   ],
   outputTargets: [
     { type: 'docs-readme' },
diff --git a/postcss.config.js b/postcss.config.js
index bb706546f..5d05b921b 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
 const { resolve } = require('path');
 
+/** @type {import('postcss-load-config').Config} */
 module.exports = {
   plugins: {
     tailwindcss: {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 649d67f14..45c9b64a5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,11 +1,26 @@
+import ThemeSwapper from 'tailwindcss-theme-swapper';
 import plugin from 'tailwindcss/plugin';
+
 import { DECLARATIVE_COLORS, PRIMITIVE_COLORS } from './config';
+import { DefaultDarkTheme, DefaultLightTheme, DefaultRootTheme } from './config/theme/default';
 
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
-  content: ['packages/bee-q/**/*.{jsx,js,tsx,ts,mdx}'],
+  content: ['packages/bee-q/src/**/*.{html,mdx,tsx,ts}'],
   theme: {
+    colors: {
+      current: 'currentColor',
+      transparent: 'transparent',
+      /* -------------------------------------------------------------------------- */
+      /*                         Default Theme (Declarative)                        */
+      /* -------------------------------------------------------------------------- */
+      ...DECLARATIVE_COLORS,
+      /* -------------------------------------------------------------------------- */
+      /*                         Extended colors (Primitive)                        */
+      /* -------------------------------------------------------------------------- */
+      ...PRIMITIVE_COLORS,
+    },
     borderRadius: {
       none: 'var(--bq-radius--none)',
       xs2: 'var(--bq-radius--xs2)',
@@ -13,10 +28,7 @@ const config: Config = {
       s: 'var(--bq-radius--s)',
       m: 'var(--bq-radius--m)',
       l: 'var(--bq-radius--l)',
-      xl: 'var(--bq-radius--xl)',
-      base: 'var(--bq-radius--m)',
-      card: 'var(--bq-radius--l)',
-      full: 'var(--bq-radius--xl)',
+      full: 'var(--bq-radius--full)',
     },
     boxShadow: {
       xs: 'var(--bq-box-shadow--xs)',
@@ -24,19 +36,6 @@ const config: Config = {
       m: 'var(--bq-box-shadow--m)',
       l: 'var(--bq-box-shadow--l)',
     },
-    colors: {
-      current: 'currentColor',
-      focus: 'var(--bq-stroke--brand-focus)',
-      transparent: 'transparent',
-      /* -------------------------------------------------------------------------- */
-      /*                         Default Theme (Declarative)                        */
-      /* -------------------------------------------------------------------------- */
-      ...DECLARATIVE_COLORS,
-      /* -------------------------------------------------------------------------- */
-      /*                         Extended colors (Primitive)                        */
-      /* -------------------------------------------------------------------------- */
-      ...PRIMITIVE_COLORS,
-    },
     fontFamily: {
       outfit: 'var(--bq-font-family--outfit)',
     },
@@ -89,6 +88,26 @@ const config: Config = {
     },
   },
   plugins: [
+    ThemeSwapper({
+      themes: [
+        {
+          name: 'root',
+          selectors: [':root'],
+          theme: { ...DefaultRootTheme },
+        },
+        {
+          name: 'light',
+          selectors: [':root', '.light', '[data-theme="light"]', '[light]'],
+          theme: { ...DefaultLightTheme },
+        },
+        {
+          name: 'dark',
+          selectors: ['.dark', '[data-theme="dark"]', '[dark]'],
+          mediaQuery: '@media (prefers-color-scheme: dark)',
+          theme: { ...DefaultDarkTheme },
+        },
+      ],
+    }),
     plugin(function ({ addComponents, theme }) {
       addComponents({
         /**