feat(Tokens): add extended palette color and update declarative colors

.eslintrc.json

@@ -1,6 +1,9 @@
 {
   "root": true,
   "plugins": ["@nrwl/nx"],
+  "parserOptions": {
+    "ecmaVersion": 2019
+  },
   "overrides": [
     {
       "files": "*.json",

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

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
          */

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

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

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

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/)*

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 {

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

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

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

packages/bee-q/src/components/button/scss/bq-button.scss

@@ -5,16 +5,6 @@
 @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% {
@@ -31,77 +21,84 @@
       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,box-shadow] duration-200;
+    @apply active:outline-none disabled:cursor-not-allowed;
+    @apply focus-visible:focus;
+  }
 }
 
 :host {
   @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:text-text-brand-hover hover:underline hover:decoration-ui-brand-hover hover:underline-offset-4;
+  // Link `ACTIVE` state
+  @apply active:text-text-brand-active active:hover:decoration-ui-brand-active;
 
   &.disabled {
-    @apply button--text-link__disabled;
+    @apply cursor-not-allowed text-text-brand-disabled no-underline;
   }
 }
 
 .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 +112,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 +137,9 @@
   @apply pr-1;
 }
 
-// Loading
+/* -------------------------------------------------------------------------- */
+/*                                   Loading                                  */
+/* -------------------------------------------------------------------------- */
 
 .bq-button.loading {
   @apply relative cursor-wait;
@@ -148,7 +151,9 @@
   @apply invisible;
 }
 
-// Spinner icon
+/* -------------------------------------------------------------------------- */
+/*                                Spinner icon                                */
+/* -------------------------------------------------------------------------- */
 
 .bq-button__loader {
   @apply absolute animate-[loading--spin_1s_infinite_linear];

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;

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>