@beeq/tailwindcss 1.8.0-beta.8 → 1.8.0

package/src/theme/colors/base.ts

@@ -0,0 +1,230 @@
+/* -------------------------------------------------------------------------- */
+/*                               BEEQ CSS Colors                              */
+/* -------------------------------------------------------------------------- */
+
+export const CSS_COLORS = {
+  /** Blue */
+  '--bq-blue-100': '#e7f0fd',
+  '--bq-blue-200': '#d0e2fb',
+  '--bq-blue-300': '#a1c5f7',
+  '--bq-blue-400': '#73a8f3',
+  '--bq-blue-500': '#448bef',
+  '--bq-blue-600': '#156eeb',
+  '--bq-blue-700': '#1158bc',
+  '--bq-blue-800': '#0d428d',
+  '--bq-blue-900': '#082c5e',
+  '--bq-blue-1000': '#04162f',
+  /** Corai */
+  '--bq-corai-100': '#fff2f2',
+  '--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': '#fbf4ec',
+  '--bq-gold-200': '#f7e9da',
+  '--bq-gold-300': '#f0d3b6',
+  '--bq-gold-400': '#e8bc91',
+  '--bq-gold-500': '#e1a66d',
+  '--bq-gold-600': '#d99048',
+  '--bq-gold-700': '#ae733a',
+  '--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-100': '#f1f2f4',
+  '--bq-grey-200': '#e7e8eb',
+  '--bq-grey-300': '#caccd2',
+  '--bq-grey-400': '#a6aab3',
+  '--bq-grey-50': '#f6f6f8',
+  '--bq-grey-500': '#898e99',
+  '--bq-grey-600': '#646a77',
+  '--bq-grey-700': '#3f4350',
+  '--bq-grey-800': '#2a2c35',
+  '--bq-grey-900': '#1c1d23',
+  '--bq-grey-950': '#15161a',
+  '--bq-grey-1000': '#0d0e11',
+  /** 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',
+  /** Iris */
+  '--bq-iris-100': '#e9f0ff',
+  '--bq-iris-200': '#d6e0ff',
+  '--bq-iris-300': '#b2c0fe',
+  '--bq-iris-400': '#8691f8',
+  '--bq-iris-500': '#6061ee',
+  '--bq-iris-600': '#4f46e5',
+  '--bq-iris-700': '#413abd',
+  '--bq-iris-800': '#332e95',
+  '--bq-iris-900': '#26216d',
+  '--bq-iris-1000': '#181545',
+  /** Lime */
+  '--bq-lime-100': '#f5fae8',
+  '--bq-lime-200': '#ecf6d2',
+  '--bq-lime-300': '#d9eda5',
+  '--bq-lime-400': '#c5e379',
+  '--bq-lime-500': '#b2da4c',
+  '--bq-lime-600': '#9fd11f',
+  '--bq-lime-700': '#7fa719',
+  '--bq-lime-800': '#5f7d13',
+  '--bq-lime-900': '#40540c',
+  '--bq-lime-1000': '#202a06',
+  /** Magenta */
+  '--bq-magenta-100': '#fce7f4',
+  '--bq-magenta-200': '#f9cfea',
+  '--bq-magenta-300': '#f39fd6',
+  '--bq-magenta-400': '#ee6fbf',
+  '--bq-magenta-500': '#e83fab',
+  '--bq-magenta-600': '#de1395',
+  '--bq-magenta-700': '#b20f77',
+  '--bq-magenta-800': '#850c59',
+  '--bq-magenta-900': '#58083c',
+  '--bq-magenta-1000': '#2c041e',
+  /** Neutral */
+  '--bq-neutral-white': '#fbfbfc',
+  '--bq-neutral-black': '#060708',
+  /** Orange */
+  '--bq-orange-100': '#fbf0e9',
+  '--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': '#efebf8',
+  '--bq-purple-200': '#e0d7f2',
+  '--bq-purple-300': '#c1afe5',
+  '--bq-purple-400': '#a388d8',
+  '--bq-purple-500': '#8460cb',
+  '--bq-purple-600': '#6538be',
+  '--bq-purple-700': '#512d98',
+  '--bq-purple-800': '#3d2272',
+  '--bq-purple-900': '#28164c',
+  '--bq-purple-1000': '#140b26',
+  /** Red */
+  '--bq-red-100': '#fce7ea',
+  '--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': '#eff4fb',
+  '--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': '#e5f7f5',
+  '--bq-teal-200': '#ccf0eb',
+  '--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': '#feede7',
+  '--bq-volcano-200': '#fddbd1',
+  '--bq-volcano-300': '#fbb8a3',
+  '--bq-volcano-400': '#fa9474',
+  '--bq-volcano-500': '#f87146',
+  '--bq-volcano-600': '#f64d18',
+  '--bq-volcano-700': '#c53e13',
+  '--bq-volcano-800': '#942e0e',
+  '--bq-volcano-900': '#621f0a',
+  '--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',
+
+  /* -------------------------------------------------------------------------- */
+  /*               These groups are exclusive for the Endava theme              */
+  /* -------------------------------------------------------------------------- */
+
+  /** Endava Grey */
+  '--bq-endava-grey-50': '#f7f7f8',
+  '--bq-endava-grey-100': '#e4e6e7',
+  '--bq-endava-grey-200': '#b5babe',
+  '--bq-endava-grey-300': '#949ca1',
+  '--bq-endava-grey-400': '#737d84',
+  '--bq-endava-grey-500': '#525f67',
+  '--bq-endava-grey-600': '#30404b',
+  '--bq-endava-grey-700': '#2b3942',
+  '--bq-endava-grey-800': '#263139',
+  '--bq-endava-grey-900': '#192b37',
+  '--bq-endava-grey-950': '#151b1e',
+  '--bq-endava-grey-1000': '#0f1316',
+  /** Endava Neutral */
+  '--bq-endava-neutral-white': '#fafbfb',
+  '--bq-endava-neutral-black': '#060708',
+  /** Endava Orange */
+  '--bq-endava-orange-100': '#fef3f1',
+  '--bq-endava-orange-200': '#fbd6d1',
+  '--bq-endava-orange-300': '#fab7af',
+  '--bq-endava-orange-400': '#fa988b',
+  '--bq-endava-orange-500': '#fc7866',
+  '--bq-endava-orange-600': '#ff5640',
+  '--bq-endava-orange-700': '#ce4a39',
+  '--bq-endava-orange-800': '#a03d30',
+  '--bq-endava-orange-900': '#722e25',
+  '--bq-endava-orange-1000': '#471e19',
+};

package/src/theme/colors/declarative.ts

@@ -0,0 +1,87 @@
+/* -------------------------------------------------------------------------- */
+/*                 BEEQ declarative colors for Tailwind config                */
+/* -------------------------------------------------------------------------- */
+
+export const DECLARATIVE_COLORS = {
+  bg: {
+    primary: 'var(--bq-background--primary)',
+    secondary: 'var(--bq-background--secondary)',
+    tertiary: 'var(--bq-background--tertiary)',
+    alt: 'var(--bq-background--alt)',
+    inverse: 'var(--bq-background--inverse)',
+    brand: 'var(--bq-background--brand)',
+    overlay: 'var(--bq-background--overlay)',
+  },
+  data: {
+    '01': 'var(--bq-data-01)',
+    '02': 'var(--bq-data-02)',
+    '03': 'var(--bq-data-03)',
+    '04': 'var(--bq-data-04)',
+    '05': 'var(--bq-data-05)',
+    '06': 'var(--bq-data-06)',
+    '07': 'var(--bq-data-07)',
+    '08': 'var(--bq-data-08)',
+    '09': 'var(--bq-data-09)',
+    '10': 'var(--bq-data-10)',
+    '11': 'var(--bq-data-11)',
+    '12': 'var(--bq-data-12)',
+  },
+  focus: 'var(--bq-focus)',
+  icon: {
+    primary: 'var(--bq-icon--primary)',
+    alt: 'var(--bq-icon--alt)',
+    secondary: 'var(--bq-icon--secondary)',
+    inverse: 'var(--bq-icon--inverse)',
+    brand: 'var(--bq-icon--brand)',
+    info: 'var(--bq-icon--info)',
+    success: 'var(--bq-icon--success)',
+    warning: 'var(--bq-icon--warning)',
+    danger: 'var(--bq-icon--danger)',
+  },
+  state: {
+    hover: 'var(--bq-state--hover)',
+    active: 'var(--bq-state--active)',
+  },
+  stroke: {
+    primary: 'var(--bq-stroke--primary)',
+    secondary: 'var(--bq-stroke--secondary)',
+    tertiary: 'var(--bq-stroke--tertiary)',
+    inverse: 'var(--bq-stroke--inverse)',
+    brand: 'var(--bq-stroke--brand)',
+    alt: 'var(--bq-stroke--alt)',
+    success: 'var(--bq-stroke--success)',
+    warning: 'var(--bq-stroke--warning)',
+    danger: 'var(--bq-stroke--danger)',
+  },
+  text: {
+    /** Primary */
+    primary: 'var(--bq-text--primary)',
+    alt: 'var(--bq-text--alt)',
+    /** Secondary */
+    secondary: 'var(--bq-text--secondary)',
+    /** Inverse */
+    inverse: 'var(--bq-text--inverse)',
+    /** Brand */
+    brand: 'var(--bq-text--brand)',
+    /** Feedback */
+    info: 'var(--bq-text--info)',
+    success: 'var(--bq-text--success)',
+    warning: 'var(--bq-text--warning)',
+    danger: 'var(--bq-text--danger)',
+  },
+  ui: {
+    primary: 'var(--bq-ui--primary)',
+    alt: 'var(--bq-ui--alt)',
+    secondary: 'var(--bq-ui--secondary)',
+    tertiary: 'var(--bq-ui--tertiary)',
+    inverse: 'var(--bq-ui--inverse)',
+    brand: 'var(--bq-ui--brand)',
+    'brand-alt': 'var(--bq-ui--brand-alt)',
+    success: 'var(--bq-ui--success)',
+    'success-alt': 'var(--bq-ui--success-alt)',
+    warning: 'var(--bq-ui--warning)',
+    'warning-alt': 'var(--bq-ui--warning-alt)',
+    danger: 'var(--bq-ui--danger)',
+    'danger-alt': 'var(--bq-ui--danger-alt)',
+  },
+};

package/src/theme/colors/primitive.ts

@@ -0,0 +1,216 @@
+/* -------------------------------------------------------------------------- */
+/*                  BEEQ primitive colors for Tailwind config                 */
+/* -------------------------------------------------------------------------- */
+
+export const PRIMITIVE_COLORS = {
+  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-grey-50)',
+    100: 'var(--bq-grey-100)',
+    200: 'var(--bq-grey-200)',
+    300: 'var(--bq-grey-300)',
+    400: 'var(--bq-grey-400)',
+    500: 'var(--bq-grey-500)',
+    600: 'var(--bq-grey-600)',
+    700: 'var(--bq-grey-700)',
+    800: 'var(--bq-grey-800)',
+    900: 'var(--bq-grey-900)',
+    950: 'var(--bq-grey-950)',
+    1000: 'var(--bq-grey-1000)',
+  },
+  indigo: {
+    100: 'var(--bq-indigo-100)',
+    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)',
+  },
+  iris: {
+    100: 'var(--bq-iris-100)',
+    200: 'var(--bq-iris-200)',
+    300: 'var(--bq-iris-300)',
+    400: 'var(--bq-iris-400)',
+    500: 'var(--bq-iris-500)',
+    600: 'var(--bq-iris-600)',
+    700: 'var(--bq-iris-700)',
+    800: 'var(--bq-iris-800)',
+    900: 'var(--bq-iris-900)',
+    1000: 'var(--bq-iris-1000)',
+  },
+  lime: {
+    100: 'var(--bq-lime-100)',
+    200: 'var(--bq-lime-200)',
+    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)',
+  },
+};

package/src/theme/default/dark.ts

@@ -0,0 +1,105 @@
+export const DefaultDarkTheme = {
+  /* -------------------------------------------------------------------------- */
+  /*                              Background colors                             */
+  /* -------------------------------------------------------------------------- */
+  'bq-background--primary': 'var(--bq-neutral-1000)',
+  'bq-background--secondary': 'var(--bq-neutral-950)',
+  'bq-background--tertiary': 'var(--bq-neutral-800)',
+  'bq-background--alt': 'var(--bq-neutral-700)',
+  'bq-background--inverse': 'var(--bq-neutral-600)',
+  'bq-background--brand': 'var(--bq-brand)',
+  'bq-background--overlay': 'var(--bq-neutral-900)', // with opacity: 60%
+  /* -------------------------------------------------------------------------- */
+  /*                                Icons colors                                */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-icon--primary': 'var(--bq-neutral-100)',
+  /** Secondary */
+  'bq-icon--secondary': 'var(--bq-neutral-400)',
+  /** Inverse */
+  'bq-icon--inverse': 'var(--bq-neutral-800)',
+  /** Brand */
+  'bq-icon--brand': 'var(--bq-brand)',
+  /** Alternative */
+  'bq-icon--alt': 'var(--bq-white)',
+  /** Feedback */
+  'bq-icon--info': 'var(--bq-brand)',
+  'bq-icon--success': 'var(--bq-success)',
+  'bq-icon--warning': 'var(--bq-warning)',
+  'bq-icon--danger': 'var(--bq-danger)',
+  /* -------------------------------------------------------------------------- */
+  /*                                Stroke colors                               */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-stroke--primary': 'var(--bq-neutral-900)',
+  /** Secondary */
+  'bq-stroke--secondary': 'var(--bq-neutral-700)',
+  /** Tertiary */
+  'bq-stroke--tertiary': 'var(--bq-neutral-400)',
+  /** Inverse */
+  'bq-stroke--inverse': 'var(--bq-neutral-950)',
+  /** Brand */
+  'bq-stroke--brand': 'var(--bq-brand)',
+  /** Alternative */
+  'bq-stroke--alt': 'var(--bq-neutral-1000)',
+  /** Success */
+  'bq-stroke--success': 'var(--bq-success)',
+  /** Warning */
+  'bq-stroke--warning': 'var(--bq-warning)',
+  /** Danger */
+  'bq-stroke--danger': 'var(--bq-danger)',
+  /** Info */
+  'bq-stroke--info': 'var(--bq-brand)',
+  /* -------------------------------------------------------------------------- */
+  /*                                 Text colors                                */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-text--primary': 'var(--bq-neutral-100)',
+  /** Secondary */
+  'bq-text--secondary': 'var(--bq-neutral-400)',
+  /** Inverse */
+  'bq-text--inverse': 'var(--bq-neutral-800)',
+  /** Brand */
+  'bq-text--brand': 'var(--bq-brand)',
+  /** Alternative */
+  'bq-text--alt': 'var(--bq-white)',
+  /** Feedback */
+  'bq-text--info': 'var(--bq-brand)',
+  'bq-text--success': 'var(--bq-success)',
+  'bq-text--warning': 'var(--bq-warning)',
+  'bq-text--danger': 'var(--bq-danger)',
+  /* -------------------------------------------------------------------------- */
+  /*                                  UI colors                                 */
+  /* -------------------------------------------------------------------------- */
+  /** Primary */
+  'bq-ui--primary': 'var(--bq-neutral-900)',
+  /** Secondary */
+  'bq-ui--secondary': 'var(--bq-neutral-800)',
+  /** Tertiary */
+  'bq-ui--tertiary': 'var(--bq-neutral-700)',
+  /** Inverse */
+  'bq-ui--inverse': 'var(--bq-neutral-100)',
+  /** Brand */
+  'bq-ui--brand': 'var(--bq-brand)',
+  'bq-ui--brand-alt': 'var(--bq-brand-dark)',
+  /** Alternative */
+  'bq-ui--alt': 'var(--bq-neutral-950)',
+  /** Success */
+  'bq-ui--success': 'var(--bq-success)',
+  'bq-ui--success-alt': 'var(--bq-success-dark)',
+  /** Warning */
+  'bq-ui--warning': 'var(--bq-warning)',
+  'bq-ui--warning-alt': 'var(--bq-warning-dark)',
+  /** Danger */
+  'bq-ui--danger': 'var(--bq-danger)',
+  'bq-ui--danger-alt': 'var(--bq-danger-dark)',
+  /** Info */
+  'bq-ui--info': 'var(--bq-brand)',
+  'bq-ui--info-alt': 'var(--bq-brand-dark)',
+  /* -------------------------------------------------------------------------- */
+  /*                                   States:                                  */
+  /* -------------------------------------------------------------------------- */
+  // !Note: these tokens are only used as base to create the states colors
+  'bq-hover': '#444546',
+  'bq-active': '#1F2026',
+};