From be1195472f3dd041d8df11d18ebd471e07160896 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?=
 <dgonzalezr@users.noreply.github.com>
Date: Mon, 20 Mar 2023 16:17:45 +0200
Subject: [PATCH] feat(Tokens): add extended palette color and update
 declarative colors (#67)

---
 .eslintrc.json                                |   3 +
 package.json                                  |   4 +-
 packages/bee-q/src/components.d.ts            |  12 +-
 .../bee-q/src/components/avatar/bq-avatar.tsx |   2 +-
 .../badge/_storybook/bq-badge.stories.tsx     |   2 +-
 .../bee-q/src/components/badge/bq-badge.tsx   |   2 +-
 packages/bee-q/src/components/badge/readme.md |  15 +-
 .../src/components/badge/scss/bq-badge.scss   |   2 +-
 .../badge/scss/bq-badge.variables.scss        |   2 +-
 .../bee-q/src/components/button/bq-button.tsx |   4 +-
 .../bee-q/src/components/button/readme.md     |   2 +-
 .../src/components/button/scss/bq-button.scss | 143 +++----
 .../_storybook/bq-checkbox.stories.tsx        |   8 +-
 .../src/components/checkbox/bq-checkbox.tsx   |   9 +-
 .../components/checkbox/scss/bq-checkbox.scss |  39 +-
 .../divider/_storybook/bq-divider.stories.tsx |   4 +-
 .../src/components/divider/bq-divider.tsx     |   2 +-
 .../bee-q/src/components/divider/readme.md    |  22 +-
 .../divider/scss/bq-divider.variables.scss    |   2 +-
 .../icon/_storybook/bq-icon.stories.tsx       |   6 +-
 .../_storybook/bq-radio-group.stories.tsx     |  19 +-
 .../components/radio-group/bq-radio-group.tsx |  24 +-
 .../src/components/radio-group/readme.md      |  17 +-
 .../bee-q/src/components/radio/bq-radio.tsx   |  11 +-
 .../src/components/radio/scss/bq-radio.scss   |  41 +-
 .../bee-q/src/components/slider/bq-slider.tsx |  42 +-
 .../slider/scss/bq-slider-variables.scss      |   3 +-
 .../src/components/slider/scss/bq-slider.scss |  15 +-
 .../src/components/spinner/bq-spinner.tsx     |   2 +-
 .../spinner/scss/bq-spinner-variables.scss    |   2 +-
 .../status/__tests__/bq-status.e2e.ts         |   3 +-
 .../status/_storybook/bq-status.stories.tsx   |   6 -
 .../bee-q/src/components/status/bq-status.tsx |   2 +-
 .../src/components/status/bq-status.types.ts  |   2 +-
 .../bee-q/src/components/status/readme.md     |  19 +-
 .../src/components/status/scss/bq-status.scss |  26 +-
 .../bee-q/src/components/switch/bq-switch.tsx |   8 +-
 .../src/components/switch/scss/bq-switch.scss |  12 +-
 packages/bee-q/src/global/styles/default.scss |  12 +-
 .../styles/themes/default/_bg-colors.scss     |  11 +
 .../styles/themes/default/_icon-colors.scss   |  26 ++
 .../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   |   5 +
 .../src/global/styles/variables/_colors.scss  | 185 ++++++++
 .../src/global/styles/variables/index.scss    |   1 +
 tailwind.config.js                            | 398 ++++++++++++++++--
 48 files changed, 1016 insertions(+), 285 deletions(-)
 create mode 100644 packages/bee-q/src/global/styles/themes/default/_bg-colors.scss
 create mode 100644 packages/bee-q/src/global/styles/themes/default/_icon-colors.scss
 create mode 100644 packages/bee-q/src/global/styles/themes/default/_stroke-colors.scss
 create mode 100644 packages/bee-q/src/global/styles/themes/default/_text-colors.scss
 create mode 100644 packages/bee-q/src/global/styles/themes/default/_ui-colors.scss
 create mode 100644 packages/bee-q/src/global/styles/themes/default/index.scss
 create mode 100644 packages/bee-q/src/global/styles/variables/_colors.scss

diff --git a/.eslintrc.json b/.eslintrc.json
index 9a53a2db3..177639dfd 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,9 @@
 {
   "root": true,
   "plugins": ["@nrwl/nx"],
+  "parserOptions": {
+    "ecmaVersion": 2019
+  },
   "overrides": [
     {
       "files": "*.json",
diff --git a/package.json b/package.json
index 8618c35f6..f0da94305 100644
--- a/package.json
+++ b/package.json
@@ -167,7 +167,7 @@
     "jest-config": "$jest"
   },
   "volta": {
-    "node": "18.14.0",
-    "npm": "9.3.1"
+    "node": "18.15.0",
+    "npm": "9.5.0"
   }
 }
diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
index eb65b26c9..06479de5d 100644
--- a/packages/bee-q/src/components.d.ts
+++ b/packages/bee-q/src/components.d.ts
@@ -108,7 +108,7 @@ export namespace Components {
          */
         "type": TButtonType;
         /**
-          * The variant of button to apply on top of the appearance
+          * The variant of button to apply on top of the appearance (applicable only to `appearance="primary"`)
          */
         "variant": TButtonVariant;
     }
@@ -260,6 +260,10 @@ export namespace Components {
         "value": string;
     }
     interface BqRadioGroup {
+        /**
+          * If true, all radio inputs in the group will display a background on hover
+         */
+        "backgroundOnHover"?: boolean;
         /**
           * A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change
          */
@@ -668,7 +672,7 @@ declare namespace LocalJSX {
          */
         "type"?: TButtonType;
         /**
-          * The variant of button to apply on top of the appearance
+          * The variant of button to apply on top of the appearance (applicable only to `appearance="primary"`)
          */
         "variant"?: TButtonVariant;
     }
@@ -828,6 +832,10 @@ declare namespace LocalJSX {
         "value": string;
     }
     interface BqRadioGroup {
+        /**
+          * If true, all radio inputs in the group will display a background on hover
+         */
+        "backgroundOnHover"?: boolean;
         /**
           * A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change
          */
diff --git a/packages/bee-q/src/components/avatar/bq-avatar.tsx b/packages/bee-q/src/components/avatar/bq-avatar.tsx
index 1189aa556..77d6a6b3c 100644
--- a/packages/bee-q/src/components/avatar/bq-avatar.tsx
+++ b/packages/bee-q/src/components/avatar/bq-avatar.tsx
@@ -105,7 +105,7 @@ export class BqAvatar {
     return (
       <div
         class={{
-          'relative overflow-hidden bg-ui-secondary': true,
+          'relative overflow-hidden bg-ui-secondary-light': true,
           [`size--${this.size}`]: true,
           'rounded-full': this.shape === 'circle',
           'rounded-xs': this.shape === 'square' && this.size === 'xsmall',
diff --git a/packages/bee-q/src/components/badge/_storybook/bq-badge.stories.tsx b/packages/bee-q/src/components/badge/_storybook/bq-badge.stories.tsx
index 8cf1962c7..bf7ce5659 100644
--- a/packages/bee-q/src/components/badge/_storybook/bq-badge.stories.tsx
+++ b/packages/bee-q/src/components/badge/_storybook/bq-badge.stories.tsx
@@ -41,6 +41,6 @@ Number.args = { content: '12' };
 
 export const Green = Template.bind({});
 Green.args = {
-  'background-color': 'data--green',
+  'background-color': 'ui--success',
   size: 'large',
 };
diff --git a/packages/bee-q/src/components/badge/bq-badge.tsx b/packages/bee-q/src/components/badge/bq-badge.tsx
index eeb06517a..e5f2a1260 100644
--- a/packages/bee-q/src/components/badge/bq-badge.tsx
+++ b/packages/bee-q/src/components/badge/bq-badge.tsx
@@ -37,7 +37,7 @@ export class BqBadge {
   // ========================
 
   /** Badge background color. The value should be a valid value of the palette color */
-  @Prop({ mutable: true, reflect: true }) backgroundColor? = 'data--red';
+  @Prop({ mutable: true, reflect: true }) backgroundColor? = 'ui--danger';
 
   /** Badge number color. The value should be a valid value of the palette color */
   @Prop({ mutable: true, reflect: true }) textColor? = 'text--inverse';
diff --git a/packages/bee-q/src/components/badge/readme.md b/packages/bee-q/src/components/badge/readme.md
index 9819fc41c..60d7e5845 100644
--- a/packages/bee-q/src/components/badge/readme.md
+++ b/packages/bee-q/src/components/badge/readme.md
@@ -9,7 +9,7 @@
 
 | Property          | Attribute          | Description                                                                    | Type                  | Default           |
 | ----------------- | ------------------ | ------------------------------------------------------------------------------ | --------------------- | ----------------- |
-| `backgroundColor` | `background-color` | Badge background color. The value should be a valid value of the palette color | `string`              | `'data--red'`     |
+| `backgroundColor` | `background-color` | Badge background color. The value should be a valid value of the palette color | `string`              | `'ui--danger'`    |
 | `size`            | `size`             | The size of the badge                                                          | `"medium" \| "small"` | `'small'`         |
 | `textColor`       | `text-color`       | Badge number color. The value should be a valid value of the palette color     | `string`              | `'text--inverse'` |
 
@@ -22,6 +22,19 @@
 | `"number"` | The component's internal wrapper that holds the slot.  |
 
 
+## Dependencies
+
+### Used by
+
+ - [bq-status](../status)
+
+### Graph
+```mermaid
+graph TD;
+  bq-status --> bq-badge
+  style bq-badge fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/bee-q/src/components/badge/scss/bq-badge.scss b/packages/bee-q/src/components/badge/scss/bq-badge.scss
index 09cde6da3..505d61c4c 100644
--- a/packages/bee-q/src/components/badge/scss/bq-badge.scss
+++ b/packages/bee-q/src/components/badge/scss/bq-badge.scss
@@ -9,7 +9,7 @@
 }
 
 .bq-badge {
-  @apply flex items-center justify-center rounded-xl bg-[color:var(--bq-badge--background-color)] text-[color:var(--bq-badge--text-color)];
+  @apply flex items-center justify-center rounded-xl border-[1px] border-solid border-stroke-primary bg-[color:var(--bq-badge--background-color)] text-[color:var(--bq-badge--text-color)];
 }
 
 .size {
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 8d8594a48..a00c23f01 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
@@ -6,6 +6,6 @@
   --bq-badge--size-small: 8px;
   --bq-badge--size-medium: 12px;
   --bq-badge--size-large: 16px;
-  --bq-badge--background-color: theme('colors.data.red');
+  --bq-badge--background-color: theme('colors.ui.danger');
   --bq-badge--text-color: theme('colors.text.inverse');
 }
diff --git a/packages/bee-q/src/components/button/bq-button.tsx b/packages/bee-q/src/components/button/bq-button.tsx
index 853ba7b14..84e68263b 100644
--- a/packages/bee-q/src/components/button/bq-button.tsx
+++ b/packages/bee-q/src/components/button/bq-button.tsx
@@ -77,7 +77,7 @@ export class BqButton {
   /** The default behavior of the button */
   @Prop({ reflect: true }) type: TButtonType = 'button';
 
-  /** The variant of button to apply on top of the appearance */
+  /** The variant of button to apply on top of the appearance (applicable only to `appearance="primary"`) */
   @Prop({ reflect: true }) variant: TButtonVariant = 'standard';
 
   // Prop lifecycle events
@@ -194,7 +194,7 @@ export class BqButton {
         rel={isLink && this.target ? 'noreferrer noopener' : undefined}
         target={isLink ? this.target : undefined}
         type={this.type}
-        tabIndex={0}
+        tabIndex={this.disabled ? -1 : 0}
         onBlur={this.handleBlur}
         onFocus={this.handleFocus}
         onClick={this.handleClick}
diff --git a/packages/bee-q/src/components/button/readme.md b/packages/bee-q/src/components/button/readme.md
index e3122e9ca..fed1b9007 100644
--- a/packages/bee-q/src/components/button/readme.md
+++ b/packages/bee-q/src/components/button/readme.md
@@ -21,7 +21,7 @@ Buttons are designed for users to take action on a page or a screen.
 | `size`       | `size`       | The size of the button                                                                                                                                                                  | `"large" \| "medium" \| "small"`               | `'medium'`   |
 | `target`     | `target`     | Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`) Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target | `"_blank" \| "_parent" \| "_self" \| "_top"`   | `undefined`  |
 | `type`       | `type`       | The default behavior of the button                                                                                                                                                      | `"button" \| "reset" \| "submit"`              | `'button'`   |
-| `variant`    | `variant`    | The variant of button to apply on top of the appearance                                                                                                                                 | `"danger" \| "ghost" \| "standard"`            | `'standard'` |
+| `variant`    | `variant`    | The variant of button to apply on top of the appearance (applicable only to `appearance="primary"`)                                                                                     | `"danger" \| "ghost" \| "standard"`            | `'standard'` |
 
 
 ## Events
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 0c0142ed9..4e1f36dae 100644
--- a/packages/bee-q/src/components/button/scss/bq-button.scss
+++ b/packages/bee-q/src/components/button/scss/bq-button.scss
@@ -5,31 +5,12 @@
 @import './bq-button.variables';
 
 @layer components {
-  .button-disabled {
-    @apply disabled:border-ui-secondary-disabled disabled:bg-ui-secondary-disabled disabled:text-text-secondary;
-    @apply disabled:hover:border-ui-secondary-disabled disabled:hover:bg-ui-secondary-disabled disabled:hover:text-text-secondary;
-  }
-
-  .button--text-link__disabled {
-    @apply disabled:border-transparent disabled:bg-transparent disabled:text-text-secondary;
-    @apply disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-text-secondary;
-  }
-
-  /* SVG spinner icon animation */
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes loading--spin {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(1turn);
-    }
+  // 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-large;
+    @apply transition-[background-color,border-color,color] duration-300;
+    @apply disabled:cursor-not-allowed;
+    @apply focus-visible:focus;
   }
 }
 
@@ -37,71 +18,69 @@
   @apply relative inline-block w-auto cursor-pointer;
 }
 
-.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-large;
-  @apply transition-[background-color,border-color,box-shadow] duration-200;
-  @apply focus:outline-none focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-system-alert;
-  @apply active:outline-none disabled:cursor-not-allowed;
-}
-
-// Appearance
+/* -------------------------------------------------------------------------- */
+/*                                 Appearance                                 */
+/* -------------------------------------------------------------------------- */
 
 .bq-button--primary {
-  @apply bg-ui-primary text-text-inverse hover:bg-ui-primary-hover active:bg-ui-primary-active;
-
-  &.ghost {
-    @apply border-ui-primary bg-transparent text-ui-primary hover:text-text-inverse;
-    @apply hover:border-ui-primary-hover hover:bg-ui-primary-hover;
-    @apply active:border-ui-primary-active active:bg-ui-primary-active;
-  }
-
-  &.danger {
-    @apply border-system-danger bg-system-danger;
-    @apply hover:border-system-danger-hover hover:bg-system-danger-hover;
-    @apply active:border-system-danger-active active:bg-system-danger-active;
-
-    &.disabled {
-      @apply button-disabled;
-    }
-  }
-
-  &.disabled {
-    @apply disabled:border-ui-primary-disabled disabled:bg-ui-primary-disabled disabled:text-text-accent;
-    @apply disabled:hover:border-ui-primary-disabled disabled:hover:bg-ui-primary-disabled disabled:hover:text-text-accent;
-  }
+  @apply bg-ui-brand text-text-inverse;
+  // Primary `HOVER` and `ACTIVE` state
+  @apply hover:bg-ui-brand-hover active:bg-ui-brand-active;
+  // Primary `DISABLED` state
+  @apply disabled:border-stroke-brand-disabled disabled:bg-ui-brand-disabled;
+  @apply disabled:hover:border-stroke-brand-disabled disabled:hover:bg-ui-brand-disabled;
+}
+
+.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;
+  // Primary ghost `ACTIVE` state
+  @apply active:border-stroke-brand-active active:text-text-brand-active;
+  // Primary ghost `DISABLED` state
+  @apply disabled:border-stroke-brand-disabled disabled:bg-transparent disabled:text-text-brand-disabled;
+  @apply disabled:hover:border-stroke-brand-disabled disabled:hover:bg-transparent disabled:hover:text-text-brand-disabled;
+}
+
+.bq-button--primary.danger {
+  @apply bg-ui-danger text-text-inverse;
+  // Primary danger `HOVER` and `ACTIVE` state
+  @apply hover:bg-ui-danger-hover active:bg-ui-danger-active;
+  // Primary danger `DISABLED` state
+  @apply disabled:border-stroke-danger-disabled disabled:bg-ui-danger-disabled;
+  @apply disabled:hover:border-stroke-danger-disabled disabled:hover:bg-ui-danger-disabled;
 }
 
 .bq-button--secondary {
-  @apply bg-ui-secondary text-text-primary hover:bg-ui-secondary-hover active:bg-ui-secondary-active;
-
-  &.ghost {
-    @apply border-ui-inverse bg-transparent text-text-primary;
-    @apply hover:border-ui-secondary-hover hover:bg-ui-secondary-hover;
-    @apply active:border-ui-secondary-active active:bg-ui-secondary-active;
-  }
-
-  &.disabled {
-    @apply button-disabled;
-  }
+  @apply bg-ui-secondary text-text-primary;
+  // Secondary `HOVER` and `ACTIVE` state
+  @apply hover:bg-ui-secondary-hover active:bg-ui-secondary-active;
+  // Secondary `DISABLED` state
+  @apply disabled:border-stroke-secondary-disabled disabled:bg-ui-secondary-disabled disabled:text-text-primary-disabled;
+  @apply disabled:hover:border-stroke-secondary-disabled disabled:hover:bg-ui-secondary-disabled;
 }
 
 .bq-button--link {
-  @apply bg-transparent text-text-accent no-underline hover:bg-ui-secondary-hover active:bg-ui-secondary-active;
+  @apply bg-transparent text-text-brand no-underline;
+  // Link `HOVER` state
+  @apply hover:bg-ui-secondary-hover hover:text-text-brand-hover;
+  // Link `ACTIVE` state
+  @apply active:bg-ui-secondary-active active:text-text-brand-active;
 
   &.disabled {
-    @apply button--text-link__disabled;
+    @apply cursor-not-allowed bg-transparent text-text-brand-disabled;
   }
 }
 
 .bq-button--text {
   @apply bg-transparent text-text-primary hover:bg-ui-secondary-hover active:bg-ui-secondary-active;
-
-  &.disabled {
-    @apply button--text-link__disabled;
-  }
+  // Text `HOVER` state
+  @apply disabled:bg-transparent disabled:text-text-primary-disabled;
 }
 
-// Size
+/* -------------------------------------------------------------------------- */
+/*                                    Size                                    */
+/* -------------------------------------------------------------------------- */
 
 .small {
   @apply h-[var(--bq-button--small-height)] px-[var(--bq-button--small-paddingX)] py-[var(--bq-button--small-paddingY)];
@@ -115,13 +94,17 @@
   @apply h-[var(--bq-button--large-height)] px-[var(--bq-button--large-paddingX)] py-[var(--bq-button--large-paddingY)];
 }
 
-// Label
+/* -------------------------------------------------------------------------- */
+/*                                    Label                                   */
+/* -------------------------------------------------------------------------- */
 
 .bq-button__label ::slotted(bq-icon) {
   @apply flex;
 }
 
-// Prefix and Suffix slots
+/* -------------------------------------------------------------------------- */
+/*                           Prefix and Suffix slots                          */
+/* -------------------------------------------------------------------------- */
 
 .bq-button__prefix,
 .bq-button__suffix {
@@ -136,7 +119,9 @@
   @apply pr-1;
 }
 
-// Loading
+/* -------------------------------------------------------------------------- */
+/*                                   Loading                                  */
+/* -------------------------------------------------------------------------- */
 
 .bq-button.loading {
   @apply relative cursor-wait;
@@ -148,8 +133,10 @@
   @apply invisible;
 }
 
-// Spinner icon
+/* -------------------------------------------------------------------------- */
+/*                                Spinner icon                                */
+/* -------------------------------------------------------------------------- */
 
 .bq-button__loader {
-  @apply absolute animate-[loading--spin_1s_infinite_linear];
+  @apply absolute animate-spin;
 }
diff --git a/packages/bee-q/src/components/checkbox/_storybook/bq-checkbox.stories.tsx b/packages/bee-q/src/components/checkbox/_storybook/bq-checkbox.stories.tsx
index cd76c9270..df7f3da3a 100644
--- a/packages/bee-q/src/components/checkbox/_storybook/bq-checkbox.stories.tsx
+++ b/packages/bee-q/src/components/checkbox/_storybook/bq-checkbox.stories.tsx
@@ -87,14 +87,16 @@ Disabled.args = {
 
 export const Indeterminate = (args) => {
   const allCheckboxChange = (event) => {
-    const interestCheckboxes = [...document.querySelectorAll('bq-checkbox[name="interest"')] as HTMLInputElement[];
+    const interestCheckboxes = [
+      ...Array.from(document.querySelectorAll<HTMLInputElement>('bq-checkbox[name="interest"')),
+    ];
     interestCheckboxes.forEach((interestCheckbox: HTMLInputElement) => {
       interestCheckbox.checked = event.detail.checked;
     });
   };
 
-  const interestCheckboxChange = (event) => {
-    const allInterestCheckbox = document.querySelector('bq-checkbox[name="all-interests"') as HTMLInputElement;
+  const interestCheckboxChange = () => {
+    const allInterestCheckbox = document.querySelector<HTMLInputElement>('bq-checkbox[name="all-interests"');
     const interestCheckboxes = document.querySelectorAll('bq-checkbox[name="interest"');
     const onlyChecked = document.querySelectorAll('bq-checkbox[name="interest"][checked]').length;
     allInterestCheckbox.indeterminate = onlyChecked > 0 && onlyChecked < interestCheckboxes.length;
diff --git a/packages/bee-q/src/components/checkbox/bq-checkbox.tsx b/packages/bee-q/src/components/checkbox/bq-checkbox.tsx
index a3dc00f3e..1711b03b2 100644
--- a/packages/bee-q/src/components/checkbox/bq-checkbox.tsx
+++ b/packages/bee-q/src/components/checkbox/bq-checkbox.tsx
@@ -168,10 +168,10 @@ export class BqCheckbox {
     return (
       <label
         class={{
-          'bq-checkbox': true,
+          'bq-checkbox group': true,
           'is-checked': this.checked,
           'is-indeterminate': this.indeterminate,
-          'is-disabled': this.disabled,
+          'is-disabled !cursor-not-allowed': this.disabled,
           'has-background': this.backgroundOnHover,
         }}
         part="base"
@@ -244,7 +244,10 @@ export class BqCheckbox {
             )}
           </span>
         </div>
-        <span class="bq-checkbox__label ml-1 text-start font-medium leading-large text-text-primary" part="label">
+        <span
+          class="bq-checkbox__label ml-1 text-start font-medium leading-large text-text-primary group-hover-[&:not(.is-disabled)]:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled"
+          part="label"
+        >
           <slot />
         </span>
       </label>
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 1131d0811..b95cdee59 100644
--- a/packages/bee-q/src/components/checkbox/scss/bq-checkbox.scss
+++ b/packages/bee-q/src/components/checkbox/scss/bq-checkbox.scss
@@ -15,7 +15,7 @@
   &:not(.is-checked),
   &:not(.is-indeterminate) {
     &:not(.is-disabled):hover .bq-checkbox__checkbox {
-      @apply border-ui-primary;
+      @apply border-icon-brand-hover;
     }
   }
 
@@ -28,45 +28,48 @@
   &.is-checked,
   &.is-indeterminate {
     &:not(.is-disabled):hover .bq-checkbox__checkbox {
-      background-color: lighten(var(--bq-ui--primary), 20%);
-      border-color: lighten(var(--bq-ui--primary), 20%);
+      @apply border-icon-brand-hover bg-ui-brand-hover;
     }
   }
-
-  // Disabled state
-  &.is-disabled {
-    @apply cursor-not-allowed opacity-40;
-  }
 }
 
 .bq-checkbox__input {
-  @apply focus:outline-none focus-visible:outline-none;
-
-  ~ .bq-checkbox__checkbox {
-    @apply transition-[color,background-color,border-color,box-shadow] duration-300;
-  }
-
+  // Checkbox square icon has `FOCUS`
   &:focus-visible {
     ~ .bq-checkbox__checkbox {
-      @apply ring-4 ring-system-alert;
+      @apply focus;
     }
   }
 
+  // Checkbox square icon is `CHECKED/INDETERMINATE`
   &:checked,
   &:indeterminate {
     ~ .bq-checkbox__checkbox {
-      @apply border-ui-primary bg-ui-primary;
+      @apply border-stroke-brand bg-ui-brand;
     }
   }
 
+  // Checkbox square icon is `CHECKED/INDETERMINATE` and `DISABLED`
   &:checked:disabled,
   &:indeterminate:disabled {
     ~ .bq-checkbox__checkbox {
-      @apply border-text-primary bg-text-primary;
+      @apply border-icon-brand-disabled bg-ui-brand-disabled;
+    }
+  }
+
+  &:disabled {
+    ~ .bq-checkbox__checkbox {
+      @apply border-icon-primary-disabled;
     }
   }
 }
 
+// Checkbox square icon `DEFAULT` state (not checked/indeterminate, not hover, not disabled)
 .bq-checkbox__checkbox {
-  @apply rounded-[var(--bq-checkbox--border-radius)] border-[length:var(--bq-checkbox--border-width)] border-solid border-text-primary;
+  @apply rounded-[var(--bq-checkbox--border-radius)] border-[length:var(--bq-checkbox--border-width)] border-solid border-icon-primary;
+}
+
+.bq-checkbox__checkbox,
+.bq-checkbox__label {
+  @apply transition-[color,background-color,border-color,box-shadow] duration-300;
 }
diff --git a/packages/bee-q/src/components/divider/_storybook/bq-divider.stories.tsx b/packages/bee-q/src/components/divider/_storybook/bq-divider.stories.tsx
index 5f52a69e4..1d8a6515f 100644
--- a/packages/bee-q/src/components/divider/_storybook/bq-divider.stories.tsx
+++ b/packages/bee-q/src/components/divider/_storybook/bq-divider.stories.tsx
@@ -1,4 +1,4 @@
-import { html, nothing } from 'lit-html';
+import { html } from 'lit-html';
 
 import { DIVIDER_TITLE_ALIGNMENT, DIVIDER_ORIENTATION, DIVIDER_STROKE_LINECAP } from '../bq-divider.types';
 import mdx from './bq-divider.mdx';
@@ -28,7 +28,7 @@ export default {
   args: {
     orientation: 'horizontal',
     dashed: false,
-    'stroke-color': 'ui--secondary',
+    'stroke-color': 'stroke--secondary',
     'title-alignment': 'middle',
     'stroke-dash-width': 12,
     'stroke-dash-gap': 7,
diff --git a/packages/bee-q/src/components/divider/bq-divider.tsx b/packages/bee-q/src/components/divider/bq-divider.tsx
index 0ec515b73..d732ecb9c 100644
--- a/packages/bee-q/src/components/divider/bq-divider.tsx
+++ b/packages/bee-q/src/components/divider/bq-divider.tsx
@@ -58,7 +58,7 @@ export class BqDivider {
   @Prop({ reflect: true }) orientation: TDividerOrientation = 'horizontal';
 
   /** Set the stroke color of the divider. The value should be a valid value of the palette color */
-  @Prop({ reflect: true }) strokeColor?: string = 'ui--secondary';
+  @Prop({ reflect: true }) strokeColor?: string = 'stroke--secondary';
 
   /** Set the alignment of the title on the main axis of the divider (horizontal / vertical) */
   @Prop({ reflect: true }) titleAlignment?: TDividerTitleAlignment = 'middle';
diff --git a/packages/bee-q/src/components/divider/readme.md b/packages/bee-q/src/components/divider/readme.md
index 50c003d7e..7e8f860f9 100644
--- a/packages/bee-q/src/components/divider/readme.md
+++ b/packages/bee-q/src/components/divider/readme.md
@@ -5,17 +5,17 @@
 
 ## Properties
 
-| Property          | Attribute           | Description                                                                                      | Type                            | Default           |
-| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------- | ----------------- |
-| `dashed`          | `dashed`            | If true, the divider has a dashed pattern                                                        | `boolean`                       | `false`           |
-| `orientation`     | `orientation`       | The default orientation of the divider                                                           | `"horizontal" \| "vertical"`    | `'horizontal'`    |
-| `strokeBasis`     | `stroke-basis`      | Set the min width of the divider's stroke when text is not centered. Value expressed in px       | `number`                        | `20`              |
-| `strokeColor`     | `stroke-color`      | Set the stroke color of the divider. The value should be a valid value of the palette color      | `string`                        | `'ui--secondary'` |
-| `strokeDashGap`   | `stroke-dash-gap`   | Set the gap of the divider's stroke. This is applicable when the stroke is dashed                | `number`                        | `7`               |
-| `strokeDashWidth` | `stroke-dash-width` | Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed | `number`                        | `12`              |
-| `strokeLinecap`   | `stroke-linecap`    | Set the lineap of the divider's stroke. This is applicable when the stroke is dashed             | `"butt" \| "round" \| "square"` | `'butt'`          |
-| `strokeThickness` | `stroke-thickness`  | Set the thickness of the divider's stroke. Value expressed in px                                 | `number`                        | `2`               |
-| `titleAlignment`  | `title-alignment`   | Set the alignment of the title on the main axis of the divider (horizontal / vertical)           | `"end" \| "middle" \| "start"`  | `'middle'`        |
+| Property          | Attribute           | Description                                                                                      | Type                            | Default               |
+| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------- | --------------------- |
+| `dashed`          | `dashed`            | If true, the divider has a dashed pattern                                                        | `boolean`                       | `false`               |
+| `orientation`     | `orientation`       | The default orientation of the divider                                                           | `"horizontal" \| "vertical"`    | `'horizontal'`        |
+| `strokeBasis`     | `stroke-basis`      | Set the min width of the divider's stroke when text is not centered. Value expressed in px       | `number`                        | `20`                  |
+| `strokeColor`     | `stroke-color`      | Set the stroke color of the divider. The value should be a valid value of the palette color      | `string`                        | `'stroke--secondary'` |
+| `strokeDashGap`   | `stroke-dash-gap`   | Set the gap of the divider's stroke. This is applicable when the stroke is dashed                | `number`                        | `7`                   |
+| `strokeDashWidth` | `stroke-dash-width` | Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed | `number`                        | `12`                  |
+| `strokeLinecap`   | `stroke-linecap`    | Set the lineap of the divider's stroke. This is applicable when the stroke is dashed             | `"butt" \| "round" \| "square"` | `'butt'`              |
+| `strokeThickness` | `stroke-thickness`  | Set the thickness of the divider's stroke. Value expressed in px                                 | `number`                        | `2`                   |
+| `titleAlignment`  | `title-alignment`   | Set the alignment of the title on the main axis of the divider (horizontal / vertical)           | `"end" \| "middle" \| "start"`  | `'middle'`            |
 
 
 ## Shadow Parts
diff --git a/packages/bee-q/src/components/divider/scss/bq-divider.variables.scss b/packages/bee-q/src/components/divider/scss/bq-divider.variables.scss
index 6325a824a..6c7d7221b 100644
--- a/packages/bee-q/src/components/divider/scss/bq-divider.variables.scss
+++ b/packages/bee-q/src/components/divider/scss/bq-divider.variables.scss
@@ -3,6 +3,6 @@
 /* -------------------------------------------------------------------------- */
 
 :host {
-  --bq-divider--color: theme('colors.ui.secondary');
+  --bq-divider--color: theme('colors.stroke.secondary');
   --bq-divider--title-marginX: theme('spacing.4');
 }
diff --git a/packages/bee-q/src/components/icon/_storybook/bq-icon.stories.tsx b/packages/bee-q/src/components/icon/_storybook/bq-icon.stories.tsx
index f836b2ce9..43888ad0e 100644
--- a/packages/bee-q/src/components/icon/_storybook/bq-icon.stories.tsx
+++ b/packages/bee-q/src/components/icon/_storybook/bq-icon.stories.tsx
@@ -22,7 +22,7 @@ export default {
     weight: { control: 'select', options: [...ICON_WEIGHT] },
   },
   args: {
-    color: 'text--accent',
+    color: 'text--brand',
     size: 24,
     weight: 'regular',
   },
@@ -45,7 +45,7 @@ export const ExploreIcons = (args) => html`
     <p class="mt-2">
       Bee-Q icons are based on
       <a
-        class="text-text-accent"
+        class="link"
         href="https://phosphoricons.com/"
         target="_blank"
         title="Phosphor icons"
@@ -72,7 +72,7 @@ export const ExploreIcons = (args) => html`
       (icon) => html`
         <div class="group flex flex-col items-stretch text-center outline-0" role="button" tabindex="0">
           <div
-            class="mb-2 flex w-full justify-center rounded-m border border-solid border-ui-secondary py-4 px-0 transition-shadow group-hover:shadow-m"
+            class="mb-2 flex w-full justify-center rounded-m border border-solid border-stroke-secondary py-4 px-0 transition-shadow group-hover:shadow-m"
           >
             <bq-icon color=${args.color} .name=${icon as string} size=${args.size} weight=${args.weight}></bq-icon>
           </div>
diff --git a/packages/bee-q/src/components/radio-group/_storybook/bq-radio-group.stories.tsx b/packages/bee-q/src/components/radio-group/_storybook/bq-radio-group.stories.tsx
index eb607e39d..f71ad7e84 100644
--- a/packages/bee-q/src/components/radio-group/_storybook/bq-radio-group.stories.tsx
+++ b/packages/bee-q/src/components/radio-group/_storybook/bq-radio-group.stories.tsx
@@ -11,12 +11,13 @@ export default {
     },
   },
   argTypes: {
-    orientation: { control: 'select', options: [...RADIO_GROUP_ORIENTATION] },
+    'background-on-hover': { control: 'boolean' },
+    'debounce-time': { control: 'number' },
     disabled: { control: 'boolean' },
     fieldset: { control: 'boolean' },
-    value: { control: 'text' },
     name: { control: 'text' },
-    'debounce-time': { control: 'number' },
+    value: { control: 'text' },
+    orientation: { control: 'select', options: [...RADIO_GROUP_ORIENTATION] },
     // Event handlers
     bqChange: { action: 'bqChange' },
     bqFocus: { action: 'bqFocus' },
@@ -25,6 +26,7 @@ export default {
     label: { control: 'text' },
   },
   args: {
+    'background-on-hover': false,
     orientation: 'vertical',
     value: 'option1',
     disabled: false,
@@ -37,12 +39,13 @@ export default {
 const Template = (args) => {
   return html`
     <bq-radio-group
-      .name=${args.name}
-      .value=${args.value}
-      .disabled=${args.disabled}
-      .orientation=${args.orientation}
-      .fieldset=${args.fieldset}
+      ?background-on-hover=${args['background-on-hover']}
       debounce-time=${args['debounce-time']}
+      ?disabled=${args.disabled}
+      ?fieldset=${args.fieldset}
+      name=${args.name}
+      orientation=${args.orientation}
+      value=${args.value}
       @bqChange=${args.bqChange}
       @bqFocus=${args.bqFocus}
       @bqBlur=${args.bqBlur}
diff --git a/packages/bee-q/src/components/radio-group/bq-radio-group.tsx b/packages/bee-q/src/components/radio-group/bq-radio-group.tsx
index ef331f698..1f82b249c 100644
--- a/packages/bee-q/src/components/radio-group/bq-radio-group.tsx
+++ b/packages/bee-q/src/components/radio-group/bq-radio-group.tsx
@@ -31,6 +31,9 @@ export class BqRadioGroup {
   // Public Property API
   // ========================
 
+  /** If true, all radio inputs in the group will display a background on hover */
+  @Prop({ reflect: true }) backgroundOnHover? = false;
+
   /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */
   @Prop({ reflect: true }) name!: string;
 
@@ -52,6 +55,21 @@ export class BqRadioGroup {
   // Prop lifecycle events
   // =======================
 
+  @Watch('backgroundOnHover')
+  @Watch('disabled')
+  @Watch('name')
+  @Watch('value')
+  handleGroupProperties() {
+    if (!this.bqRadioElements) return;
+
+    this.bqRadioElements.forEach((bqRadio) => {
+      bqRadio.backgroundOnHover = this.backgroundOnHover;
+      bqRadio.disabled = this.disabled;
+      bqRadio.name = this.name;
+      bqRadio.checked = !isNil(this.value) ? bqRadio.value === this.value : false;
+    });
+  }
+
   @Watch('orientation')
   checkPropValues() {
     validatePropValue(RADIO_GROUP_ORIENTATION, 'vertical', this.el, 'orientation');
@@ -89,11 +107,7 @@ export class BqRadioGroup {
   }
 
   componentDidLoad() {
-    this.bqRadioElements.forEach((bqRadioElement) => {
-      bqRadioElement.name = this.name;
-      bqRadioElement.checked = !isNil(this.value) ? bqRadioElement.value === this.value : false;
-      bqRadioElement.disabled = bqRadioElement.disabled || this.disabled;
-    });
+    this.handleGroupProperties();
   }
 
   // Listeners
diff --git a/packages/bee-q/src/components/radio-group/readme.md b/packages/bee-q/src/components/radio-group/readme.md
index 25d799dde..cf3a8ec75 100644
--- a/packages/bee-q/src/components/radio-group/readme.md
+++ b/packages/bee-q/src/components/radio-group/readme.md
@@ -7,14 +7,15 @@
 
 ## Properties
 
-| Property            | Attribute       | Description                                                                                                               | Type                         | Default      |
-| ------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
-| `debounceTime`      | `debounce-time` | A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change | `number`                     | `0`          |
-| `disabled`          | `disabled`      | If true radio inputs are disabled                                                                                         | `boolean`                    | `false`      |
-| `fieldset`          | `fieldset`      | If true displays fieldset                                                                                                 | `boolean`                    | `false`      |
-| `name` _(required)_ | `name`          | Name of the HTML input form control. Submitted with the form as part of a name/value pair.                                | `string`                     | `undefined`  |
-| `orientation`       | `orientation`   | The display orientation of the radio inputs                                                                               | `"horizontal" \| "vertical"` | `'vertical'` |
-| `value`             | `value`         | A string representing the value of the radio.                                                                             | `string`                     | `undefined`  |
+| Property            | Attribute             | Description                                                                                                               | Type                         | Default      |
+| ------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| `backgroundOnHover` | `background-on-hover` | If true, all radio inputs in the group will display a background on hover                                                 | `boolean`                    | `false`      |
+| `debounceTime`      | `debounce-time`       | A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change | `number`                     | `0`          |
+| `disabled`          | `disabled`            | If true radio inputs are disabled                                                                                         | `boolean`                    | `false`      |
+| `fieldset`          | `fieldset`            | If true displays fieldset                                                                                                 | `boolean`                    | `false`      |
+| `name` _(required)_ | `name`                | Name of the HTML input form control. Submitted with the form as part of a name/value pair.                                | `string`                     | `undefined`  |
+| `orientation`       | `orientation`         | The display orientation of the radio inputs                                                                               | `"horizontal" \| "vertical"` | `'vertical'` |
+| `value`             | `value`               | A string representing the value of the radio.                                                                             | `string`                     | `undefined`  |
 
 
 ## Events
diff --git a/packages/bee-q/src/components/radio/bq-radio.tsx b/packages/bee-q/src/components/radio/bq-radio.tsx
index 188b52837..3365fceab 100644
--- a/packages/bee-q/src/components/radio/bq-radio.tsx
+++ b/packages/bee-q/src/components/radio/bq-radio.tsx
@@ -152,8 +152,8 @@ export class BqRadio {
     return (
       <label
         class={{
-          'bq-radio': true,
-          'is-disabled': this.disabled,
+          'bq-radio group': true,
+          'is-disabled !cursor-not-allowed': this.disabled,
           'is-checked': this.checked,
           'has-background': this.backgroundOnHover,
         }}
@@ -179,11 +179,14 @@ export class BqRadio {
             tabindex={this.tabindex}
             part="input"
           />
-          <div class={{ 'bq-radio__circle': true }} part="radio">
+          <div class="bq-radio__circle" part="radio">
             <div class="bq-radio__checked" />
           </div>
         </div>
-        <span class="bq-radio__label" part="label">
+        <span
+          class="bq-radio__label group-hover:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled"
+          part="label"
+        >
           <slot></slot>
         </span>
       </label>
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 6c493d145..a06eea9fe 100644
--- a/packages/bee-q/src/components/radio/scss/bq-radio.scss
+++ b/packages/bee-q/src/components/radio/scss/bq-radio.scss
@@ -9,18 +9,20 @@
 }
 
 .bq-radio {
-  @apply inline-flex cursor-pointer items-center justify-center gap-2;
+  @apply inline-flex cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;
   @apply rounded-s p-2 pr-4;
 
   &.is-disabled {
-    @apply cursor-not-allowed opacity-40;
-
     .bq-radio__circle {
-      @apply border-text-primary;
+      @apply border-icon-primary-disabled;
+    }
+
+    &.is-checked .bq-radio__circle {
+      @apply border-stroke-brand-disabled;
     }
 
     &.is-checked .bq-radio__checked {
-      @apply bg-text-primary;
+      @apply bg-icon-brand-disabled;
     }
   }
 
@@ -30,41 +32,42 @@
 
   &.is-checked:not(.is-disabled) {
     .bq-radio__circle {
-      @apply border-ui-primary;
+      @apply border-icon-brand;
     }
 
     .bq-radio__checked {
-      @apply bg-ui-primary;
+      @apply bg-ui-brand;
     }
   }
 
   &:not(.is-disabled):hover .bq-radio__circle {
-    @apply border-ui-primary;
+    @apply border-ui-brand-hover;
   }
 
   &.is-checked:not(.is-disabled):hover {
-    .bq-radio__checked {
-      background-color: lighten(var(--bq-ui--primary), 20%);
-    }
-
+    .bq-radio__checked,
     .bq-radio__circle {
-      border-color: lighten(var(--bq-ui--primary), 20%);
+      @apply border-icon-brand-hover;
     }
   }
 }
 
 .bq-radio__input {
-  @apply pointer-events-none absolute m-0 p-0 opacity-0 focus:outline-none focus-visible:outline-none;
+  @apply pointer-events-none absolute m-0 p-0 opacity-0;
 
   &:focus-visible {
     ~ .bq-radio__circle {
-      @apply ring-4 ring-system-alert;
+      @apply focus;
     }
   }
 }
 
+.bq-radio__control {
+  @apply box-border flex h-[var(--bq-radio--size)] w-[var(--bq-radio--size)] items-center justify-center rounded-full p-[2px];
+}
+
 .bq-radio__circle {
-  @apply relative box-border flex h-full w-full items-center justify-center rounded-full border-[length:var(--bq-radio--border-width)] border-solid border-text-primary p-[3px];
+  @apply relative box-border flex h-full w-full items-center justify-center rounded-full border-[length:var(--bq-radio--border-width)] border-solid border-icon-primary-hover p-[3px];
 }
 
 .bq-radio__checked {
@@ -75,6 +78,8 @@
   @apply font-medium leading-large text-text-primary;
 }
 
-.bq-radio__control {
-  @apply box-border flex h-[var(--bq-radio--size)] w-[var(--bq-radio--size)] items-center justify-center rounded-full p-[2px];
+.bq-radio__circle,
+.bq-radio__checked,
+.bq-radio__label {
+  @apply transition-[color,background-color,border-color,box-shadow] duration-300;
 }
diff --git a/packages/bee-q/src/components/slider/bq-slider.tsx b/packages/bee-q/src/components/slider/bq-slider.tsx
index b9b18cf6f..d07b418be 100644
--- a/packages/bee-q/src/components/slider/bq-slider.tsx
+++ b/packages/bee-q/src/components/slider/bq-slider.tsx
@@ -200,6 +200,29 @@ export class BqSlider {
     this.progressDivElement.style.right = rightPercent;
   };
 
+  private sanitizeArrayValue = (defaultValue): void => {
+    if (!Array.isArray(this.value)) return;
+
+    if (!this.value.length) {
+      this.value = defaultValue;
+      return;
+    }
+
+    if (this.isSingleSlider) {
+      this.value = this.value[0];
+      return;
+    }
+
+    if (this.value.length === 1) {
+      this.value[1] = this.value[0];
+    }
+
+    if (this.value.length > 1) {
+      this.value[0] = Math.min(this.value[0], this.value[1]);
+      this.value[1] = Math.max(this.value[0], this.value[1]);
+    }
+  };
+
   private sanitizePropValue = (): void => {
     const defaultValue = !this.isSingleSlider ? [0, 0] : 0;
 
@@ -210,24 +233,7 @@ export class BqSlider {
     this.value = isString(this.value) ? JSON.parse(this.value) : this.value;
 
     if (Array.isArray(this.value)) {
-      if (!this.value.length) {
-        this.value = defaultValue;
-        return;
-      }
-
-      if (this.isSingleSlider) {
-        this.value = this.value[0];
-        return;
-      }
-
-      if (this.value.length === 1) {
-        this.value[1] = this.value[0];
-      }
-
-      if (this.value.length > 1) {
-        this.value[0] = Math.min(this.value[0], this.value[1]);
-        this.value[1] = Math.max(this.value[0], this.value[1]);
-      }
+      this.sanitizeArrayValue(defaultValue);
     }
 
     if (typeof this.value === 'object' && !Array.isArray(this.value)) {
diff --git a/packages/bee-q/src/components/slider/scss/bq-slider-variables.scss b/packages/bee-q/src/components/slider/scss/bq-slider-variables.scss
index 7ce208d92..bfde27632 100644
--- a/packages/bee-q/src/components/slider/scss/bq-slider-variables.scss
+++ b/packages/bee-q/src/components/slider/scss/bq-slider-variables.scss
@@ -8,7 +8,6 @@
   --bq-slider--z-index-input: 2;
   --bq-slider--z-index-progress: 1;
   --bq-slider--thumb-size: 13px;
-  --bq-slider--progress-color: theme('colors.ui.primary');
+  --bq-slider--progress-color: theme('colors.ui.brand');
   --bq-slider--trackarea-color: theme('colors.ui.secondary');
-  --bq-slider--disabled-color: theme('colors.data.grey');
 }
diff --git a/packages/bee-q/src/components/slider/scss/bq-slider.scss b/packages/bee-q/src/components/slider/scss/bq-slider.scss
index 3827ad01b..9da4c59ec 100644
--- a/packages/bee-q/src/components/slider/scss/bq-slider.scss
+++ b/packages/bee-q/src/components/slider/scss/bq-slider.scss
@@ -2,25 +2,24 @@
 
 @layer components {
   .thumb {
-    @apply pointer-events-auto box-content h-[var(--bq-slider--thumb-size)] w-[var(--bq-slider--thumb-size)] cursor-pointer appearance-none rounded-full border-2 border-solid border-[var(--bq-text--accent)] bg-[var(--bq-background--card)];
+    @apply pointer-events-auto box-content h-[var(--bq-slider--thumb-size)] w-[var(--bq-slider--thumb-size)] cursor-pointer appearance-none rounded-full border-2 border-solid border-stroke-brand bg-bg-primary;
     @apply transition-[background-color,border-color,box-shadow] duration-300;
   }
 
   .thumb-focus {
-    @apply ring-4 ring-system-alert;
+    @apply focus;
   }
 
   .thumb-hover {
-    @apply border-2 bg-[var(--bq-background--card)];
-    border-color: lighten(var(--bq-text--accent), 25%);
+    @apply border-2 border-stroke-brand-hover bg-bg-primary;
   }
 
   .thumb-active {
-    @apply border-2 border-[var(--bq-text--accent)] bg-[var(--bq-text--accent)];
+    @apply border-2 border-stroke-brand-active bg-ui-brand-active;
   }
 
   .thumb-disabled {
-    @apply border-[var(--bq-slider--disabled-color)] bg-[var(--bq-background--card)];
+    @apply border-stroke-brand-disabled bg-bg-primary;
   }
 }
 
@@ -98,10 +97,10 @@
   }
 
   .bq-slider__label {
-    @apply text-[var(--bq-slider--disabled-color)];
+    @apply text-text-primary-disabled;
   }
 
   .bq-slider__container .progress {
-    @apply bg-[var(--bq-slider--disabled-color)];
+    @apply bg-stroke-brand-disabled;
   }
 }
diff --git a/packages/bee-q/src/components/spinner/bq-spinner.tsx b/packages/bee-q/src/components/spinner/bq-spinner.tsx
index 6ff6bb505..77f2c116c 100644
--- a/packages/bee-q/src/components/spinner/bq-spinner.tsx
+++ b/packages/bee-q/src/components/spinner/bq-spinner.tsx
@@ -197,7 +197,7 @@ export class BqSpinner {
         </span>
         {this.isTextDisplayed && (
           <span
-            class="bq-spinner--text text-m font-medium leading-large text-text-primary"
+            class="bq-spinner--text font-medium leading-large text-text-primary"
             part="text"
             ref={(spanElem) => (this.slotElem = spanElem)}
           >
diff --git a/packages/bee-q/src/components/spinner/scss/bq-spinner-variables.scss b/packages/bee-q/src/components/spinner/scss/bq-spinner-variables.scss
index aced2eef6..f4588e24d 100644
--- a/packages/bee-q/src/components/spinner/scss/bq-spinner-variables.scss
+++ b/packages/bee-q/src/components/spinner/scss/bq-spinner-variables.scss
@@ -3,7 +3,7 @@
 /* -------------------------------------------------------------------------- */
 
 :host {
-  --bq-spinner--color: theme('colors.ui.primary');
+  --bq-spinner--color: theme('colors.ui.brand');
   --bq-spinner--size-large: 56px;
   --bq-spinner--size-medium: 48px;
   --bq-spinner--size-small: 32px;
diff --git a/packages/bee-q/src/components/status/__tests__/bq-status.e2e.ts b/packages/bee-q/src/components/status/__tests__/bq-status.e2e.ts
index 14224a5cf..1e95ab564 100644
--- a/packages/bee-q/src/components/status/__tests__/bq-status.e2e.ts
+++ b/packages/bee-q/src/components/status/__tests__/bq-status.e2e.ts
@@ -1,5 +1,6 @@
 import { newE2EPage } from '@stencil/core/testing';
 import { computedStyle, setProperties } from '../../../shared/test-utils';
+import { STATUS_TYPE } from '../bq-status.types';
 
 describe('bq-status', () => {
   it('should render', async () => {
@@ -50,7 +51,7 @@ describe('bq-status', () => {
     expect(console).toHaveBeenCalledTimes(1);
     expect(console).toHaveBeenCalledWith(
       'warning',
-      '[BQ-STATUS] Please notice that "type" should be one of success|info|danger|neutral|guide|alert',
+      `[BQ-STATUS] Please notice that "type" should be one of ${STATUS_TYPE.join('|')}`,
     );
   });
 
diff --git a/packages/bee-q/src/components/status/_storybook/bq-status.stories.tsx b/packages/bee-q/src/components/status/_storybook/bq-status.stories.tsx
index dfe2e849d..687da6083 100644
--- a/packages/bee-q/src/components/status/_storybook/bq-status.stories.tsx
+++ b/packages/bee-q/src/components/status/_storybook/bq-status.stories.tsx
@@ -45,12 +45,6 @@ Info.args = {
   type: 'info',
 };
 
-export const Guide = (args) => Template(args);
-Guide.args = {
-  label: 'Guidance status',
-  type: 'guide',
-};
-
 export const Alert = (args) => Template(args);
 Alert.args = {
   label: 'Alert status',
diff --git a/packages/bee-q/src/components/status/bq-status.tsx b/packages/bee-q/src/components/status/bq-status.tsx
index a58b0d131..8183d2e89 100644
--- a/packages/bee-q/src/components/status/bq-status.tsx
+++ b/packages/bee-q/src/components/status/bq-status.tsx
@@ -68,7 +68,7 @@ export class BqStatus {
   render() {
     return (
       <div class="bq-status inline-flex items-center gap-2" part="base" role="status">
-        <span class={`bq-status__circle rounded-full ${this.type}`} part="circle" role="img" />
+        <bq-badge class={`bq-status__circle rounded-full ${this.type}`} size="medium" part="circle" role="img" />
         <div
           class="bq-status__text m-0 max-h-[20px] p-0 text-s font-medium leading-large text-text-primary"
           part="text"
diff --git a/packages/bee-q/src/components/status/bq-status.types.ts b/packages/bee-q/src/components/status/bq-status.types.ts
index f3c7fff7e..2f5139301 100644
--- a/packages/bee-q/src/components/status/bq-status.types.ts
+++ b/packages/bee-q/src/components/status/bq-status.types.ts
@@ -1,2 +1,2 @@
-export const STATUS_TYPE = ['success', 'info', 'danger', 'neutral', 'guide', 'alert'] as const;
+export const STATUS_TYPE = ['alert', 'danger', 'info', 'neutral', 'success'] as const;
 export type TStatusType = (typeof STATUS_TYPE)[number];
diff --git a/packages/bee-q/src/components/status/readme.md b/packages/bee-q/src/components/status/readme.md
index 61929c17f..0ad927ce1 100644
--- a/packages/bee-q/src/components/status/readme.md
+++ b/packages/bee-q/src/components/status/readme.md
@@ -7,9 +7,9 @@
 
 ## Properties
 
-| Property | Attribute | Description                              | Type                                                                 | Default     |
-| -------- | --------- | ---------------------------------------- | -------------------------------------------------------------------- | ----------- |
-| `type`   | `type`    | It defines the type of status to display | `"alert" \| "danger" \| "guide" \| "info" \| "neutral" \| "success"` | `'neutral'` |
+| Property | Attribute | Description                              | Type                                                      | Default     |
+| -------- | --------- | ---------------------------------------- | --------------------------------------------------------- | ----------- |
+| `type`   | `type`    | It defines the type of status to display | `"alert" \| "danger" \| "info" \| "neutral" \| "success"` | `'neutral'` |
 
 
 ## Shadow Parts
@@ -21,6 +21,19 @@
 | `"text"`   | The `<div>` container that holds the text label of the status component |
 
 
+## Dependencies
+
+### Depends on
+
+- [bq-badge](../badge)
+
+### Graph
+```mermaid
+graph TD;
+  bq-status --> bq-badge
+  style bq-status fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/bee-q/src/components/status/scss/bq-status.scss b/packages/bee-q/src/components/status/scss/bq-status.scss
index c8512cea4..0bb80e845 100644
--- a/packages/bee-q/src/components/status/scss/bq-status.scss
+++ b/packages/bee-q/src/components/status/scss/bq-status.scss
@@ -1,30 +1,28 @@
 @import './bq-status-variables';
 
 .bq-status__circle {
-  @apply h-[var(--bq-status-circle--size)] w-[var(--bq-status-circle--size)];
-
-  &.success {
-    @apply bg-system-success;
+  &::part(base) {
+    --bq-badge--size-medium: var(--bq-status-circle--size);
   }
 
-  &.danger {
-    @apply bg-system-danger;
+  &.success::part(base) {
+    --bq-badge--background-color: theme('backgroundColor.ui.success');
   }
 
-  &.neutral {
-    @apply bg-system-neutral;
+  &.danger::part(base) {
+    --bq-badge--background-color: theme('backgroundColor.ui.danger');
   }
 
-  &.guide {
-    @apply bg-system-guide;
+  &.neutral::part(base) {
+    --bq-badge--background-color: theme('backgroundColor.ui.secondary');
   }
 
-  &.alert {
-    @apply bg-system-alert;
+  &.alert::part(base) {
+    --bq-badge--background-color: theme('backgroundColor.ui.warning');
   }
 
-  &.info {
-    @apply bg-system-info;
+  &.info::part(base) {
+    --bq-badge--background-color: theme('backgroundColor.ui.brand');
   }
 }
 
diff --git a/packages/bee-q/src/components/switch/bq-switch.tsx b/packages/bee-q/src/components/switch/bq-switch.tsx
index 26dc37256..9693b3ddb 100644
--- a/packages/bee-q/src/components/switch/bq-switch.tsx
+++ b/packages/bee-q/src/components/switch/bq-switch.tsx
@@ -195,7 +195,7 @@ export class BqSwitch {
 
     return (
       <Host class={{ 'full-width': this.fullWidth }} style={hostStyle}>
-        <label class={{ 'bq-switch': true, ...labelCssClasses }} part="base">
+        <label class={{ 'bq-switch group': true, ...labelCssClasses }} part="base">
           {/* Hidden native HTML input */}
           <input
             class="bq-switch--input peer sr-only peer-checked:invisible"
@@ -216,7 +216,7 @@ export class BqSwitch {
           />
           {/* Control */}
           <div
-            class="bq-switch--control relative box-border flex h-[var(--switch--height)] w-[var(--switch--width)] justify-between rounded-full bg-text-secondary p-1 transition duration-300"
+            class="bq-switch--control relative box-border flex h-[var(--switch--height)] w-[var(--switch--width)] justify-between rounded-full bg-icon-secondary p-1 transition duration-300"
             part="control"
           >
             {this.innerLabel === 'icon' && (
@@ -231,7 +231,7 @@ export class BqSwitch {
             )}
             {/* Dot */}
             <div
-              class="bq-switch--control__dot absolute h-[var(--switch--dot-size)] w-[var(--switch--dot-size)] justify-end rounded-full bg-background-card transition duration-300"
+              class="bq-switch--control__dot absolute h-[var(--switch--dot-size)] w-[var(--switch--dot-size)] justify-end rounded-full bg-bg-primary transition duration-300"
               part="dot"
             />
             {this.innerLabel === 'icon' && (
@@ -248,7 +248,7 @@ export class BqSwitch {
           {/* Label */}
           <span
             class={{
-              'bq-switch--label text-m font-medium leading-large text-text-primary': true,
+              'bq-switch--label': true,
               'ml-3': this.hasLabel && !this.reverseOrder,
               'mr-3': this.hasLabel && this.reverseOrder,
             }}
diff --git a/packages/bee-q/src/components/switch/scss/bq-switch.scss b/packages/bee-q/src/components/switch/scss/bq-switch.scss
index a3e1046c8..33ebc13a6 100644
--- a/packages/bee-q/src/components/switch/scss/bq-switch.scss
+++ b/packages/bee-q/src/components/switch/scss/bq-switch.scss
@@ -28,25 +28,25 @@
 
 .bq-switch--input:checked:disabled {
   ~ .bq-switch--control {
-    @apply bg-ui-primary-disabled;
+    @apply bg-ui-brand-disabled;
   }
 }
 
 .bq-switch--input:not(:checked):disabled {
   ~ .bq-switch--control {
-    @apply bg-ui-secondary-disabled;
+    @apply bg-icon-secondary-disabled;
   }
 }
 
 .bq-switch--input:not(:disabled):focus-visible {
   ~ .bq-switch--control {
-    @apply ring-4 ring-system-alert;
+    @apply focus;
   }
 }
 
 .bq-switch--input:checked {
   ~ .bq-switch--control {
-    @apply bg-ui-primary;
+    @apply bg-ui-brand;
 
     .bq-switch--control__dot {
       @apply translate-x-[calc(var(--switch--width)_-_var(--switch--dot-size)_-_8px)];
@@ -61,3 +61,7 @@
     @apply flex;
   }
 }
+
+.bq-switch--label {
+  @apply text-m font-medium leading-large text-text-primary transition-colors duration-300 group-[.is-disabled]:text-text-primary-disabled;
+}
diff --git a/packages/bee-q/src/global/styles/default.scss b/packages/bee-q/src/global/styles/default.scss
index e36de581c..e46a9f7d9 100644
--- a/packages/bee-q/src/global/styles/default.scss
+++ b/packages/bee-q/src/global/styles/default.scss
@@ -1,7 +1,7 @@
 /* -------------------------------------------------------------------------- */
 /*                                Default theme                               */
 /* -------------------------------------------------------------------------- */
-@import './themes/colors';
+@import './themes/default';
 
 /* -------------------------------------------------------------------------- */
 /*                                 Root styles                                */
@@ -9,7 +9,11 @@
 
 html,
 body {
-  font-family: var(--bq-font-family--outfit);
-  font-size: var(--bq-font-size--m);
-  font-weight: var(--bq-font-weight--regular);
+  @apply font-outfit text-m font-regular text-text-primary;
+}
+
+.link {
+  @apply relative inline-block rounded-xs text-text-brand no-underline focus-visible:focus hover:text-text-brand-hover active:text-text-brand-active;
+  @apply before:absolute before:bottom-0 before:block before:h-[2px] before:w-full before:scale-x-0 before:transition-transform before:duration-300 before:content-empty;
+  @apply hover:before:scale-x-100 hover:before:bg-stroke-brand-hover active:before:bg-stroke-brand-active;
 }
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
new file mode 100644
index 000000000..9e86afd6d
--- /dev/null
+++ b/packages/bee-q/src/global/styles/themes/default/_bg-colors.scss
@@ -0,0 +1,11 @@
+/* -------------------------------------------------------------------------- */
+/*                     Theme: DEFAULT - Background colors                     */
+/* -------------------------------------------------------------------------- */
+
+:root {
+  --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
new file mode 100644
index 000000000..1ef34a6e2
--- /dev/null
+++ b/packages/bee-q/src/global/styles/themes/default/_icon-colors.scss
@@ -0,0 +1,26 @@
+/* -------------------------------------------------------------------------- */
+/*                        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/_stroke-colors.scss b/packages/bee-q/src/global/styles/themes/default/_stroke-colors.scss
new file mode 100644
index 000000000..ddd209f1e
--- /dev/null
+++ b/packages/bee-q/src/global/styles/themes/default/_stroke-colors.scss
@@ -0,0 +1,45 @@
+/* -------------------------------------------------------------------------- */
+/*                       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
new file mode 100644
index 000000000..56a3b9c3a
--- /dev/null
+++ b/packages/bee-q/src/global/styles/themes/default/_text-colors.scss
@@ -0,0 +1,28 @@
+/* -------------------------------------------------------------------------- */
+/*                        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-600);
+  --bq-text--warning: var(--bq-gold-600);
+  --bq-text--danger: var(--bq-red-600);
+}
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
new file mode 100644
index 000000000..c231a701d
--- /dev/null
+++ b/packages/bee-q/src/global/styles/themes/default/_ui-colors.scss
@@ -0,0 +1,51 @@
+/* -------------------------------------------------------------------------- */
+/*                         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
new file mode 100644
index 000000000..82bf1eae5
--- /dev/null
+++ b/packages/bee-q/src/global/styles/themes/default/index.scss
@@ -0,0 +1,5 @@
+@import './bg-colors';
+@import './icon-colors';
+@import './stroke-colors';
+@import './text-colors';
+@import './ui-colors';
diff --git a/packages/bee-q/src/global/styles/variables/_colors.scss b/packages/bee-q/src/global/styles/variables/_colors.scss
new file mode 100644
index 000000000..e03d3bb45
--- /dev/null
+++ b/packages/bee-q/src/global/styles/variables/_colors.scss
@@ -0,0 +1,185 @@
+/* -------------------------------------------------------------------------- */
+/*                           Extended Palette Color                           */
+/* -------------------------------------------------------------------------- */
+
+:root {
+  /** Blue */
+  --bq-blue-100: #e8f0fd;
+  --bq-blue-200: #d0e2fb;
+  --bq-blue-300: #a2c5f7;
+  --bq-blue-400: #73a8f3;
+  --bq-blue-500: #458bef;
+  --bq-blue-600: #166eeb;
+  --bq-blue-700: #1258bc;
+  --bq-blue-800: #0d428d;
+  --bq-blue-900: #092c5e;
+  --bq-blue-1000: #04162f;
+  /** Corai */
+  --bq-corai-100: #fff2f3;
+  --bq-corai-200: #ffe6e6;
+  --bq-corai-300: #ffccce;
+  --bq-corai-400: #ffb3b5;
+  --bq-corai-500: #ff999d;
+  --bq-corai-600: #ff8084;
+  --bq-corai-700: #cc666a;
+  --bq-corai-800: #994d4f;
+  --bq-corai-900: #663335;
+  --bq-corai-1000: #331a1a;
+  /** Cyan */
+  --bq-cyan-100: #e8f7fb;
+  --bq-cyan-200: #d2f0f8;
+  --bq-cyan-300: #a5e1f1;
+  --bq-cyan-400: #78d1e9;
+  --bq-cyan-500: #4bc2e2;
+  --bq-cyan-600: #1eb3db;
+  --bq-cyan-700: #188faf;
+  --bq-cyan-800: #126b83;
+  --bq-cyan-900: #0c4858;
+  --bq-cyan-1000: #06242c;
+  /** Gold */
+  --bq-gold-100: #fbf4ed;
+  --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-800: #82562b;
+  --bq-gold-900: #573a1d;
+  --bq-gold-1000: #2b1d0e;
+  /** Green */
+  --bq-green-100: #e8f8ef;
+  --bq-green-200: #d2f1e0;
+  --bq-green-300: #a5e3c1;
+  --bq-green-400: #78d5a1;
+  --bq-green-500: #4bc782;
+  --bq-green-600: #1eb963;
+  --bq-green-700: #18944f;
+  --bq-green-800: #126f3b;
+  --bq-green-900: #0c4a28;
+  --bq-green-1000: #062514;
+  /** Grey */
+  --bq-grey-50: #f8f8f9;
+  --bq-grey-100: #f0f1f2;
+  --bq-grey-200: #e1e3e6;
+  --bq-grey-300: #c4c7cc;
+  --bq-grey-400: #a6aab3;
+  --bq-grey-500: #898e99;
+  --bq-grey-600: #6b7280;
+  --bq-grey-700: #565b66;
+  --bq-grey-800: #40444d;
+  --bq-grey-900: #2b2e33;
+  /** Indigo */
+  --bq-indigo-100: #edecfc;
+  --bq-indigo-200: #dcdafa;
+  --bq-indigo-300: #b9b5f5;
+  --bq-indigo-400: #9590ef;
+  --bq-indigo-500: #726bea;
+  --bq-indigo-600: #4f46e5;
+  --bq-indigo-700: #3f38b7;
+  --bq-indigo-800: #2f2a89;
+  --bq-indigo-900: #201c5c;
+  --bq-indigo-1000: #100e2e;
+  /** Lime */
+  --bq-lime-100: #f5fae9;
+  --bq-lime-200: #ecf6d2;
+  --bq-lime-300: #d9eda5;
+  --bq-lime-400: #c5e379;
+  --bq-lime-500: #b2da4c;
+  --bq-lime-600: #9fd120;
+  --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;
+  /** Neutral */
+  --bq-neutral-white: #fff;
+  --bq-neutral-black: #000;
+  /** Orange */
+  --bq-orange-100: #fcf0e9;
+  --bq-orange-200: #f8e1d4;
+  --bq-orange-300: #f1c2a8;
+  --bq-orange-400: #eaa47d;
+  --bq-orange-500: #e38551;
+  --bq-orange-600: #dc6726;
+  --bq-orange-700: #b0521e;
+  --bq-orange-800: #843e17;
+  --bq-orange-900: #58290f;
+  --bq-orange-1000: #2c1508;
+  /** Purple */
+  --bq-purple-100: #f0ebf9;
+  --bq-purple-200: #e0d7f2;
+  --bq-purple-300: #c1afe5;
+  --bq-purple-400: #a388d8;
+  --bq-purple-500: #8460cb;
+  --bq-purple-600: #8460cb;
+  --bq-purple-700: #512d98;
+  --bq-purple-800: #3d2272;
+  --bq-purple-900: #28164c;
+  --bq-purple-1000: #140b26;
+  /** Red */
+  --bq-red-100: #fce8ea;
+  --bq-red-200: #f9d1d5;
+  --bq-red-300: #f3a2ac;
+  --bq-red-400: #ed7482;
+  --bq-red-500: #e74559;
+  --bq-red-600: #e1172f;
+  --bq-red-700: #b41226;
+  --bq-red-800: #870e1c;
+  --bq-red-900: #5a0913;
+  --bq-red-1000: #2d0509;
+  /** Sky */
+  --bq-sky-100: #eff5fb;
+  --bq-sky-200: #dfeaf8;
+  --bq-sky-300: #bfd5f1;
+  --bq-sky-400: #9ec1e9;
+  --bq-sky-500: #7eace2;
+  --bq-sky-600: #5e97db;
+  --bq-sky-700: #4b79af;
+  --bq-sky-800: #385b83;
+  --bq-sky-900: #263c58;
+  --bq-sky-1000: #131e2c;
+  /** Teal */
+  --bq-teal-100: #e5f8f5;
+  --bq-teal-200: #e5f8f5;
+  --bq-teal-300: #99e1d8;
+  --bq-teal-400: #66d2c4;
+  --bq-teal-500: #33c3b1;
+  --bq-teal-600: #00b49d;
+  --bq-teal-700: #00907e;
+  --bq-teal-800: #006c5e;
+  --bq-teal-900: #00483f;
+  --bq-teal-1000: #00241f;
+  /** Volcano */
+  --bq-volcano-100: #feede8;
+  --bq-volcano-200: #fddbd1;
+  --bq-volcano-300: #fcb8a3;
+  --bq-volcano-400: #fa9474;
+  --bq-volcano-500: #f97146;
+  --bq-volcano-600: #f97146;
+  --bq-volcano-700: #c63e13;
+  --bq-volcano-800: #942e0e;
+  --bq-volcano-900: #631f0a;
+  --bq-volcano-1000: #310f05;
+  /** Yellow */
+  --bq-yellow-100: #fefbe7;
+  --bq-yellow-200: #fcf6d0;
+  --bq-yellow-300: #faeea0;
+  --bq-yellow-400: #f7e571;
+  --bq-yellow-500: #f5dd41;
+  --bq-yellow-600: #f2d412;
+  --bq-yellow-700: #c2aa0e;
+  --bq-yellow-800: #917f0b;
+  --bq-yellow-900: #615507;
+  --bq-yellow-1000: #302a04;
+}
diff --git a/packages/bee-q/src/global/styles/variables/index.scss b/packages/bee-q/src/global/styles/variables/index.scss
index 5e2e2ac73..484262005 100644
--- a/packages/bee-q/src/global/styles/variables/index.scss
+++ b/packages/bee-q/src/global/styles/variables/index.scss
@@ -1,3 +1,4 @@
 @import './border-radius';
 @import './box-shadow';
+@import './colors';
 @import './typography';
diff --git a/tailwind.config.js b/tailwind.config.js
index 6a07fc19a..3cce100bd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
-/** @type {import('tailwindcss').Config} */
+const plugin = require('tailwindcss/plugin');
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['packages/bee-q/**/*.{jsx,js,tsx,ts}'],
   theme: {
@@ -23,58 +24,349 @@ module.exports = {
     },
     colors: {
       current: 'currentColor',
+      focus: 'var(--bq-stroke--brand-focus)',
       transparent: 'transparent',
-      // Base Colours
-      background: {
-        light: 'var(--bq-background--light)',
-        card: 'var(--bq-background--card)',
+      /* -------------------------------------------------------------------------- */
+      /*                         Default Theme (Declarative)                        */
+      /* -------------------------------------------------------------------------- */
+      bg: {
+        primary: 'var(--bq-background--primary)',
+        secondary: 'var(--bq-background--secondary)',
+        tertiary: 'var(--bq-background--tertiary)',
+        inverse: 'var(--bq-background--inverse)',
+        brand: 'var(--bq-background--brand)',
+      },
+      text: {
+        /** Primary */
+        primary: 'var(--bq-text--primary)',
+        'primary-hover': 'var(--bq-text--primary-hover)',
+        'primary-active': 'var(--bq-text--primary-active)',
+        'primary-disabled': 'var(--bq-text--primary-disabled)',
+        /** Secondary */
+        secondary: 'var(--bq-text--secondary)',
+        'secondary-hover': 'var(--bq-text--secondary-hover)',
+        'secondary-active': 'var(--bq-text--secondary-active)',
+        'secondary-disabled': 'var(--bq-text--secondary-disabled)',
+        'secondary-inverse': 'var(--bq-text--secondary-inverse)',
+        /** Inverse */
+        inverse: 'var(--bq-text--inverse)',
+        /** 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 */
+        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-processing': 'var(--bq-ui--primary-processing)',
         'primary-disabled': 'var(--bq-ui--primary-disabled)',
+        /** Secondary */
         secondary: 'var(--bq-ui--secondary)',
         'secondary-hover': 'var(--bq-ui--secondary-hover)',
         'secondary-active': 'var(--bq-ui--secondary-active)',
-        'secondary-processing': 'var(--bq-ui--secondary-processing)',
         '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 */
         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 */
+        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 */
+        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 */
+        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)',
       },
-      text: {
-        primary: 'var(--bq-text--primary)',
-        'primary-disabled': 'var(--bq-text--primary-disabled)',
-        secondary: 'var(--bq-text--secondary)',
-        'secondary-disabled': 'var(--bq-text--secondary-disabled)',
-        inverse: 'var(--bq-text--inverse)',
-        accent: 'var(--bq-text--accent)',
-      },
-      system: {
-        success: 'var(--bq-system--success)',
-        neutral: 'var(--bq-system--neutral)',
-        info: 'var(--bq-system--info)',
-        danger: 'var(--bq-system--danger)',
-        'danger-hover': 'var(--bq-system--danger-hover)',
-        'danger-active': 'var(--bq-system--danger-active)',
-        alert: 'var(--bq-system--alert)',
-        guide: 'var(--bq-system--guide)',
-      },
-      data: {
-        grey: 'var(--bq-data--grey)',
-        blue: 'var(--bq-data--blue)',
-        geekblue: 'var(--bq-data--geekblue)',
-        purple: 'var(--bq-data--purple)',
-        pink: 'var(--bq-data--pink)',
-        red: 'var(--bq-data--red)',
-        corai: 'var(--bq-data--corai)',
-        orange: 'var(--bq-data--orange)',
-        gold: 'var(--bq-data--gold)',
-        yellow: 'var(--bq-data--yellow)',
-        lime: 'var(--bq-data--lime)',
-        green: 'var(--bq-data--green)',
-        teal: 'var(--bq-data--teal)',
-        cyan: 'var(--bq-data--cyan)',
+      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)',
+      },
+      /* -------------------------------------------------------------------------- */
+      /*                         Extended colors (Primitive)                        */
+      /* -------------------------------------------------------------------------- */
+      blue: {
+        100: 'var(--bq-blue-100)',
+        200: 'var(--bq-blue-200)',
+        300: 'var(--bq-blue-300)',
+        400: 'var(--bq-blue-400)',
+        500: 'var(--bq-blue-500)',
+        600: 'var(--bq-blue-600)',
+        700: 'var(--bq-blue-700)',
+        800: 'var(--bq-blue-800)',
+        900: 'var(--bq-blue-900)',
+        1000: 'var(--bq-blue-1000)',
+      },
+      corai: {
+        100: 'var(--bq-corai-100)',
+        200: 'var(--bq-corai-200)',
+        300: 'var(--bq-corai-300)',
+        400: 'var(--bq-corai-400)',
+        500: 'var(--bq-corai-500)',
+        600: 'var(--bq-corai-600)',
+        700: 'var(--bq-corai-700)',
+        800: 'var(--bq-corai-800)',
+        900: 'var(--bq-corai-900)',
+        1000: 'var(--bq-corai-1000)',
+      },
+      cyan: {
+        100: 'var(--bq-cyan-100)',
+        200: 'var(--bq-cyan-200)',
+        300: 'var(--bq-cyan-300)',
+        400: 'var(--bq-cyan-400)',
+        500: 'var(--bq-cyan-500)',
+        600: 'var(--bq-cyan-600)',
+        700: 'var(--bq-cyan-700)',
+        800: 'var(--bq-cyan-800)',
+        900: 'var(--bq-cyan-900)',
+        1000: 'var(--bq-cyan-1000)',
+      },
+      gold: {
+        100: 'var(--bq-gold-100)',
+        200: 'var(--bq-gold-200)',
+        300: 'var(--bq-gold-300)',
+        400: 'var(--bq-gold-400)',
+        500: 'var(--bq-gold-500)',
+        600: 'var(--bq-gold-600)',
+        700: 'var(--bq-gold-700)',
+        800: 'var(--bq-gold-800)',
+        900: 'var(--bq-gold-900)',
+        1000: 'var(--bq-gold-1000)',
+      },
+      green: {
+        100: 'var(--bq-green-100)',
+        200: 'var(--bq-green-200)',
+        300: 'var(--bq-green-300)',
+        400: 'var(--bq-green-400)',
+        500: 'var(--bq-green-500)',
+        600: 'var(--bq-green-600)',
+        700: 'var(--bq-green-700)',
+        800: 'var(--bq-green-800)',
+        900: 'var(--bq-green-900)',
+        1000: 'var(--bq-green-1000)',
+      },
+      grey: {
+        50: 'var(--bq-neutral-50)',
+        100: 'var(--bq-neutral-100)',
+        200: 'var(--bq-neutral-200)',
+        300: 'var(--bq-neutral-300)',
+        400: 'var(--bq-neutral-400)',
+        500: 'var(--bq-neutral-500)',
+        600: 'var(--bq-neutral-600)',
+        700: 'var(--bq-neutral-700)',
+        800: 'var(--bq-neutral-800)',
+        900: 'var(--bq-neutral-900)',
+      },
+      indigo: {
+        100: 'var(--bq-indigo-100)',
+        200: 'var(--bq-indigo-200)',
+        300: 'var(--bq-indigo-300)',
+        400: 'var(--bq-indigo-400)',
+        500: 'var(--bq-indigo-500)',
+        600: 'var(--bq-indigo-600)',
+        700: 'var(--bq-indigo-700)',
+        800: 'var(--bq-indigo-800)',
+        900: 'var(--bq-indigo-900)',
+        1000: 'var(--bq-indigo-1000)',
+      },
+      lime: {
+        100: 'var(--bq-lime-100)',
+        200: 'var(--bq-lime-200)',
+        300: 'var(--bq-lime-300)',
+        400: 'var(--bq-lime-400)',
+        500: 'var(--bq-lime-500)',
+        600: 'var(--bq-lime-600)',
+        700: 'var(--bq-lime-700)',
+        800: 'var(--bq-lime-800)',
+        900: 'var(--bq-lime-900)',
+        1000: 'var(--bq-lime-1000)',
+      },
+      magenta: {
+        100: 'var(--bq-magenta-100)',
+        200: 'var(--bq-magenta-200)',
+        300: 'var(--bq-magenta-300)',
+        400: 'var(--bq-magenta-400)',
+        500: 'var(--bq-magenta-500)',
+        600: 'var(--bq-magenta-600)',
+        700: 'var(--bq-magenta-700)',
+        800: 'var(--bq-magenta-800)',
+        900: 'var(--bq-magenta-900)',
+        1000: 'var(--bq-magenta-1000)',
+      },
+      neutral: {
+        white: 'var(--bq-neutral-white)',
+        black: 'var(--bq-neutral-black)',
+      },
+      orange: {
+        100: 'var(--bq-orange-100)',
+        200: 'var(--bq-orange-200)',
+        300: 'var(--bq-orange-300)',
+        400: 'var(--bq-orange-400)',
+        500: 'var(--bq-orange-500)',
+        600: 'var(--bq-orange-600)',
+        700: 'var(--bq-orange-700)',
+        800: 'var(--bq-orange-800)',
+        900: 'var(--bq-orange-900)',
+        1000: 'var(--bq-orange-1000)',
+      },
+      purple: {
+        100: 'var(--bq-purple-100)',
+        200: 'var(--bq-purple-200)',
+        300: 'var(--bq-purple-300)',
+        400: 'var(--bq-purple-400)',
+        500: 'var(--bq-purple-500)',
+        600: 'var(--bq-purple-600)',
+        700: 'var(--bq-purple-700)',
+        800: 'var(--bq-purple-800)',
+        900: 'var(--bq-purple-900)',
+        1000: 'var(--bq-purple-1000)',
+      },
+      red: {
+        100: 'var(--bq-red-100)',
+        200: 'var(--bq-red-200)',
+        300: 'var(--bq-red-300)',
+        400: 'var(--bq-red-400)',
+        500: 'var(--bq-red-500)',
+        600: 'var(--bq-red-600)',
+        700: 'var(--bq-red-700)',
+        800: 'var(--bq-red-800)',
+        900: 'var(--bq-red-900)',
+        1000: 'var(--bq-red-1000)',
+      },
+      sky: {
+        100: 'var(--bq-sky-100)',
+        200: 'var(--bq-sky-200)',
+        300: 'var(--bq-sky-300)',
+        400: 'var(--bq-sky-400)',
+        500: 'var(--bq-sky-500)',
+        600: 'var(--bq-sky-600)',
+        700: 'var(--bq-sky-700)',
+        800: 'var(--bq-sky-800)',
+        900: 'var(--bq-sky-900)',
+        1000: 'var(--bq-sky-1000)',
+      },
+      teal: {
+        100: 'var(--bq-teal-100)',
+        200: 'var(--bq-teal-200)',
+        300: 'var(--bq-teal-300)',
+        400: 'var(--bq-teal-400)',
+        500: 'var(--bq-teal-500)',
+        600: 'var(--bq-teal-600)',
+        700: 'var(--bq-teal-700)',
+        800: 'var(--bq-teal-800)',
+        900: 'var(--bq-teal-900)',
+        1000: 'var(--bq-teal-1000)',
+      },
+      volcano: {
+        100: 'var(--bq-volcano-100)',
+        200: 'var(--bq-volcano-200)',
+        300: 'var(--bq-volcano-300)',
+        400: 'var(--bq-volcano-400)',
+        500: 'var(--bq-volcano-500)',
+        600: 'var(--bq-volcano-600)',
+        700: 'var(--bq-volcano-700)',
+        800: 'var(--bq-volcano-800)',
+        900: 'var(--bq-volcano-900)',
+        1000: 'var(--bq-volcano-1000)',
+      },
+      yellow: {
+        100: 'var(--bq-yellow-100)',
+        200: 'var(--bq-yellow-200)',
+        300: 'var(--bq-yellow-300)',
+        400: 'var(--bq-yellow-400)',
+        500: 'var(--bq-yellow-500)',
+        600: 'var(--bq-yellow-600)',
+        700: 'var(--bq-yellow-700)',
+        800: 'var(--bq-yellow-800)',
+        900: 'var(--bq-yellow-900)',
+        1000: 'var(--bq-yellow-1000)',
       },
     },
     fontFamily: {
@@ -110,7 +402,31 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ addComponents, theme }) {
+      addComponents({
+        /**
+         * Common `FOCUS` state that should be used within `focus-visible` Tailwind CSS utility
+         * Examples of usage:
+         *
+         *  class="focus-visible:focus"
+         *
+         *  @apply focus-visible:focus
+         *
+         *  &:focus-visible {
+         *    @apply focus;
+         *  }
+         */
+        '.focus': {
+          '--tw-ring-width': '2px',
+          '--tw-ring-offset-width': '1px',
+          '--tw-ring-color': theme('colors.focus'),
+          outline: `var(--tw-ring-width) solid ${theme('colors.focus')}`,
+          outlineOffset: 'var(--tw-ring-offset-width)',
+        },
+      });
+    }),
+  ],
   corePlugins: {
     preflight: false,
   },