refactor(Tokens)!: simplify the declarative design tokens (#835)

BREAKING CHANGE: all the tokens related to hover, active, and disable states have been removed.

Before, we used to have e.g. primary-hover, and primary-active applied on a button when it hovered or active, this refactor relies now on the use of color-mix() to archive the same result.

Author: Cata1989

packages/beeq-tailwindcss/src/helpers/blend-color.ts

@@ -0,0 +1,18 @@
+type blendOptions = {
+  color: string;
+  base: string;
+  percentage?: number;
+  property?: string;
+};
+/**
+ * Blend color with base color and percentage
+ *
+ * @param {Object} opt - The blendColor options object
+ * @param {string} opt.color - The color to blend
+ * @param {string} opt.base - The base color layer to blend with
+ * @param {number} opt.percentage - The percentage to blend
+ * @param {string} [opt.property ='background-color'] - The CSS property to blend (e.g: 'background-color', 'color')
+ */
+export const blendColor = ({ color, base, percentage = 20, property = 'background-color' }: blendOptions) => ({
+  [property]: `color-mix(in srgb, ${color}, ${base} ${percentage}%)`,
+});

packages/beeq-tailwindcss/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './blend-color';