@beeq/tailwindcss 1.0.1 → 1.2.0

package/index.cjs.js

@@ -826,7 +826,7 @@ const EndavaLightTheme = {
 };
 
 const EndavaRootTheme = {
-  'bq-font-family': "'Roboto', sans-serif",
+  'bq-font-family': "'Poppins', sans-serif",
   'bq-white': '#fafbfb',
   'bq-black': '#030406',
   'bq-neutral-50': 'var(--bq-endava-grey-50)',

package/index.esm.d.ts

@@ -0,0 +1,2 @@
+export * from "./src/index";
+export { default } from "./src/index";

package/index.esm.js

@@ -2,15 +2,6 @@ import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';
 import plugin from 'tailwindcss/plugin';
 import ThemeSwapper from 'tailwindcss-theme-swapper';
 
-/**
- * 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')
- */
 const blendColor = ({
   color,
   base,
@@ -20,12 +11,7 @@ const blendColor = ({
   [property]: `color-mix(in srgb, ${color}, ${base} ${percentage}%)`
 });
 
-/* -------------------------------------------------------------------------- */
-/*                               BEEQ CSS Colors                              */
-/* -------------------------------------------------------------------------- */
-
 const CSS_COLORS = {
-  /** Blue */
   '--bq-blue-100': '#e7f0fd',
   '--bq-blue-200': '#d0e2fb',
   '--bq-blue-300': '#a1c5f7',
@@ -36,7 +22,6 @@ const CSS_COLORS = {
   '--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',
@@ -47,7 +32,6 @@ const CSS_COLORS = {
   '--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',
@@ -58,7 +42,6 @@ const CSS_COLORS = {
   '--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',
@@ -69,7 +52,6 @@ const CSS_COLORS = {
   '--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',
@@ -80,7 +62,6 @@ const CSS_COLORS = {
   '--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',
@@ -93,7 +74,6 @@ const CSS_COLORS = {
   '--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',
@@ -104,7 +84,6 @@ const CSS_COLORS = {
   '--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',
@@ -115,7 +94,6 @@ const CSS_COLORS = {
   '--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',
@@ -126,7 +104,6 @@ const CSS_COLORS = {
   '--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',
@@ -137,10 +114,8 @@ const CSS_COLORS = {
   '--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',
@@ -151,7 +126,6 @@ const CSS_COLORS = {
   '--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',
@@ -162,7 +136,6 @@ const CSS_COLORS = {
   '--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',
@@ -173,7 +146,6 @@ const CSS_COLORS = {
   '--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',
@@ -184,7 +156,6 @@ const CSS_COLORS = {
   '--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',
@@ -195,7 +166,6 @@ const CSS_COLORS = {
   '--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',
@@ -206,7 +176,6 @@ const CSS_COLORS = {
   '--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',
@@ -217,11 +186,6 @@ const CSS_COLORS = {
   '--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',
@@ -234,10 +198,8 @@ const CSS_COLORS = {
   '--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',
@@ -250,10 +212,6 @@ const CSS_COLORS = {
   '--bq-endava-orange-1000': '#471e19'
 };
 
-/* -------------------------------------------------------------------------- */
-/*                 BEEQ declarative colors for Tailwind config                */
-/* -------------------------------------------------------------------------- */
-
 const DECLARATIVE_COLORS = {
   bg: {
     primary: 'var(--bq-background--primary)',
@@ -305,16 +263,11 @@ const DECLARATIVE_COLORS = {
     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)',
@@ -337,10 +290,6 @@ const DECLARATIVE_COLORS = {
   }
 };
 
-/* -------------------------------------------------------------------------- */
-/*                  BEEQ primitive colors for Tailwind config                 */
-/* -------------------------------------------------------------------------- */
-
 const PRIMITIVE_COLORS = {
   blue: {
     100: 'var(--bq-blue-100)',
@@ -555,9 +504,6 @@ const PRIMITIVE_COLORS = {
 };
 
 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)',
@@ -565,102 +511,54 @@ const DefaultDarkTheme = {
   '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)',
   'bq-icon--alt': 'var(--bq-white)',
-  /** Secondary */
   'bq-icon--secondary': 'var(--bq-neutral-400)',
-  /** Inverse */
   'bq-icon--inverse': 'var(--bq-neutral-800)',
-  /** Brand */
   'bq-icon--brand': 'var(--bq-brand)',
-  /** 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)',
   'bq-stroke--alt': 'var(--bq-neutral-1000)',
-  /** 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)',
-  /** 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)',
   'bq-text--alt': 'var(--bq-white)',
-  /** Secondary */
   'bq-text--secondary': 'var(--bq-neutral-400)',
-  /** Inverse */
   'bq-text--inverse': 'var(--bq-neutral-800)',
-  /** Brand */
   'bq-text--brand': 'var(--bq-brand)',
-  /** 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)',
   'bq-ui--alt': 'var(--bq-neutral-950)',
-  /** 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)',
-  /** 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'
 };
 
 const DefaultLightTheme = {
-  /* -------------------------------------------------------------------------- */
-  /*                              Background colors                             */
-  /* -------------------------------------------------------------------------- */
   'bq-background--primary': 'var(--bq-white)',
   'bq-background--secondary': 'var(--bq-neutral-100)',
   'bq-background--tertiary': 'var(--bq-neutral-200)',
@@ -668,94 +566,49 @@ const DefaultLightTheme = {
   'bq-background--inverse': 'var(--bq-neutral-900)',
   '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-800)',
   'bq-icon--alt': 'var(--bq-white)',
-  /** Secondary */
   'bq-icon--secondary': 'var(--bq-neutral-600)',
-  /** Inverse */
   'bq-icon--inverse': 'var(--bq-neutral-50)',
-  /** Brand */
   'bq-icon--brand': 'var(--bq-brand)',
-  /** 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-200)',
   'bq-stroke--alt': 'var(--bq-neutral-50)',
-  /** Secondary */
   'bq-stroke--secondary': 'var(--bq-neutral-600)',
-  /** Tertiary */
   'bq-stroke--tertiary': 'var(--bq-neutral-900)',
-  /** Inverse */
   'bq-stroke--inverse': 'var(--bq-white)',
-  /** Brand */
   'bq-stroke--brand': 'var(--bq-brand)',
-  /** 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-800)',
   'bq-text--alt': 'var(--bq-white)',
-  /** Secondary */
   'bq-text--secondary': 'var(--bq-neutral-600)',
-  /** Inverse */
   'bq-text--inverse': 'var(--bq-neutral-50)',
-  /** Brand */
   'bq-text--brand': 'var(--bq-brand)',
-  /** 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-white)',
   'bq-ui--alt': 'var(--bq-neutral-50)',
-  /** Secondary */
   'bq-ui--secondary': 'var(--bq-neutral-200)',
-  /** Tertiary */
   'bq-ui--tertiary': 'var(--bq-neutral-500)',
-  /** Inverse */
   'bq-ui--inverse': 'var(--bq-neutral-900)',
-  /** Brand */
   'bq-ui--brand': 'var(--bq-brand)',
   'bq-ui--brand-alt': 'var(--bq-brand-light)',
-  /** Success */
   'bq-ui--success': 'var(--bq-success)',
   'bq-ui--success-alt': 'var(--bq-success-light)',
-  /** Warning */
   'bq-ui--warning': 'var(--bq-warning)',
   'bq-ui--warning-alt': 'var(--bq-warning-light)',
-  /** Danger */
   'bq-ui--danger': 'var(--bq-danger)',
   'bq-ui--danger-alt': 'var(--bq-danger-light)',
-  /** Info */
   'bq-ui--info': 'var(--bq-brand)',
   'bq-ui--info-alt': 'var(--bq-brand-light)',
-  /* -------------------------------------------------------------------------- */
-  /*                                   States:                                  */
-  /* -------------------------------------------------------------------------- */
-  // !Note: these tokens are only used as base to create the states colors
   'bq-hover': '#bcbfc5',
   'bq-active': '#444546'
 };
@@ -763,7 +616,6 @@ const DefaultLightTheme = {
 const DefaultRootTheme = {
   'bq-white': '#ffffff',
   'bq-black': '#060708',
-  // Neutrals
   'bq-neutral-50': 'var(--bq-grey-50)',
   'bq-neutral-100': 'var(--bq-grey-100)',
   'bq-neutral-200': 'var(--bq-grey-200)',
@@ -776,33 +628,25 @@ const DefaultRootTheme = {
   'bq-neutral-900': 'var(--bq-grey-900)',
   'bq-neutral-950': 'var(--bq-grey-950)',
   'bq-neutral-1000': 'var(--bq-grey-1000)',
-  // Brand
   'bq-brand-light': 'var(--bq-iris-100)',
   'bq-brand': 'var(--bq-iris-600)',
   'bq-brand-dark': 'var(--bq-iris-1000)',
-  // Accent
   'bq-accent-light': 'var(--bq-purple-100)',
   'bq-accent': 'var(--bq-purple-600)',
   'bq-accent-dark': 'var(--bq-purple-1000)',
-  // Success
   'bq-success-light': 'var(--bq-teal-100)',
   'bq-success': 'var(--bq-teal-600)',
   'bq-success-dark': 'var(--bq-teal-1000)',
-  // Danger
   'bq-danger-light': 'var(--bq-red-100)',
   'bq-danger': 'var(--bq-red-600)',
   'bq-danger-dark': 'var(--bq-red-1000)',
-  // Warning
   'bq-warning-light': 'var(--bq-gold-100)',
   'bq-warning': 'var(--bq-gold-600)',
   'bq-warning-dark': 'var(--bq-gold-1000)',
-  // Info
   'bq-info-light': 'var(--bq-iris-100)',
   'bq-info': 'var(--bq-iris-600)',
   'bq-info-dark': 'var(--bq-iris-1000)',
-  // Focus
   'bq-focus': 'var(--bq-iris-600)',
-  // Data
   'bq-data-01': 'var(--bq-brand)',
   'bq-data-02': 'var(--bq-purple-600)',
   'bq-data-03': 'var(--bq-magenta-600)',
@@ -815,47 +659,28 @@ const DefaultRootTheme = {
   'bq-data-10': 'var(--bq-grey-600)',
   'bq-data-11': 'var(--bq-black)',
   'bq-data-12': 'var(--bq-white)',
-  // Border Radius
   'bq-radius--none': '0',
-  // 0px
   'bq-radius--xs2': '0.125rem',
-  // 2px
   'bq-radius--xs': '0.25rem',
-  // 4px
   'bq-radius--s': '0.5rem',
-  // 8px
   'bq-radius--m': '0.75rem',
-  // 12px
   'bq-radius--l': '1.5rem',
-  // 24px
   'bq-radius--full': '9999px',
-  // Box Shadow
   'bq-box-shadow--xs': '0 2px 0 rgba(0, 0, 0, 0.016)',
   'bq-box-shadow--s': '0 8px 24px rgba(0, 0, 0, 0.04)',
   'bq-box-shadow--m': '0 10px 48px -16px rgba(0, 0, 0, 0.12)',
   'bq-box-shadow--l': '0 20px 58px -16px rgba(0, 0, 0, 0.16)',
-  // Fonts
   'bq-font-family': "'Outfit', sans-serif",
   'bq-font-size--xs': '0.75rem',
-  // 12px
   'bq-font-size--s': '0.875rem',
-  // 14px
   'bq-font-size--m': '1rem',
-  // 16px
   'bq-font-size--l': '1.125rem',
-  // 18px
   'bq-font-size--xl': '1.5rem',
-  // 24px
   'bq-font-size--xxl': '2rem',
-  // 32px
   'bq-font-size--xxl2': '2.5rem',
-  // 40px
   'bq-font-size--xxl3': '3rem',
-  // 48px
   'bq-font-size--xxl4': '3.5rem',
-  // 56px
   'bq-font-size--xxl5': '4rem',
-  // 64px
   'bq-font-weight--thin': '100',
   'bq-font-weight--light': '300',
   'bq-font-weight--regular': '400',
@@ -865,34 +690,20 @@ const DefaultRootTheme = {
   'bq-font-line-height--small': '1.2',
   'bq-font-line-height--regular': '1.5',
   'bq-font-line-height--large': '1.5',
-  // Spacing
   'bq-spacing-xs3': '0.125rem',
-  // 2px
   'bq-spacing-xs2': '0.25rem',
-  // 4px
   'bq-spacing-xs': '0.5rem',
-  // 8px
   'bq-spacing-s': '0.75rem',
-  // 12px
   'bq-spacing-m': '1rem',
-  // 16px
   'bq-spacing-l': '1.5rem',
-  // 24px
   'bq-spacing-xl': '2rem',
-  // 32px
   'bq-spacing-xxl': '2.5rem',
-  // 40px
   'bq-spacing-xxl2': '3.5rem',
-  // 56px
   'bq-spacing-xxl3': '4rem',
-  // 64px
-  'bq-spacing-xxl4': '4.5rem' // 72px
+  'bq-spacing-xxl4': '4.5rem'
 };
 
 const EndavaDarkTheme = {
-  /* -------------------------------------------------------------------------- */
-  /*                              Background colors                             */
-  /* -------------------------------------------------------------------------- */
   'bq-background--primary': 'var(--bq-neutral-1000)',
   'bq-background--secondary': 'var(--bq-neutral-900)',
   'bq-background--tertiary': 'var(--bq-neutral-800)',
@@ -900,103 +711,55 @@ const EndavaDarkTheme = {
   '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)',
   'bq-icon--alt': 'var(--bq-white)',
-  /** Secondary */
   'bq-icon--secondary': 'var(--bq-neutral-400)',
-  /** Inverse */
   'bq-icon--inverse': 'var(--bq-neutral-800)',
-  /** Brand */
   'bq-icon--brand': 'var(--bq-brand)',
-  /** Feedback */
   'bq-icon--info': 'var(--bq-info)',
   '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)',
   'bq-stroke--alt': 'var(--bq-neutral-1000)',
-  /** 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)',
   'bq-stroke--brand-alt': 'var(--bq-brand-dark)',
-  /** 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-info)',
-  /* -------------------------------------------------------------------------- */
-  /*                                 Text colors                                */
-  /* -------------------------------------------------------------------------- */
-  /** Primary */
   'bq-text--primary': 'var(--bq-neutral-100)',
   'bq-text--alt': 'var(--bq-neutral-white)',
-  /** Secondary */
   'bq-text--secondary': 'var(--bq-neutral-400)',
-  /** Inverse */
   'bq-text--inverse': 'var(--bq-neutral-800)',
-  /** Brand */
   'bq-text--brand': 'var(--bq-brand)',
-  /** Feedback */
   'bq-text--info': 'var(--bq-info)',
   '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)',
   'bq-ui--alt': 'var(--bq-neutral-950)',
-  /** 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)',
-  /** 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-info)',
   'bq-ui--info-alt': 'var(--bq-info-dark)',
-  /* -------------------------------------------------------------------------- */
-  /*                                   States:                                  */
-  /* -------------------------------------------------------------------------- */
-  // !Note: these tokens are only used as base to create the states colors
   'bq-hover': '#444546',
   'bq-active': '#1F2026'
 };
 
 const EndavaLightTheme = {
-  /* -------------------------------------------------------------------------- */
-  /*                              Background colors                             */
-  /* -------------------------------------------------------------------------- */
   'bq-background--primary': 'var(--bq-white)',
   'bq-background--secondary': 'var(--bq-neutral-100)',
   'bq-background--tertiary': 'var(--bq-neutral-200)',
@@ -1004,105 +767,58 @@ const EndavaLightTheme = {
   'bq-background--inverse': 'var(--bq-neutral-900)',
   '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-800)',
   'bq-icon--alt': 'var(--bq-white)',
-  /** Secondary */
   'bq-icon--secondary': 'var(--bq-neutral-600)',
-  /** Inverse */
   'bq-icon--inverse': 'var(--bq-neutral-50)',
-  /** Brand */
   'bq-icon--brand': 'var(--bq-brand)',
-  /** Feedback */
   'bq-icon--info': 'var(--bq-info)',
   '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-200)',
   'bq-stroke--alt': 'var(--bq-neutral-50)',
-  /** Secondary */
   'bq-stroke--secondary': 'var(--bq-neutral-600)',
-  /** Tertiary */
   'bq-stroke--tertiary': 'var(--bq-neutral-900)',
-  /** Inverse */
   'bq-stroke--inverse': 'var(--bq-white)',
-  /** Brand */
   'bq-stroke--brand': 'var(--bq-brand)',
   'bq-stroke--brand-alt': 'var(--bq-brand-light)',
-  /** 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-info)',
-  /* -------------------------------------------------------------------------- */
-  /*                                 Text colors                                */
-  /* -------------------------------------------------------------------------- */
-  /** Primary */
   'bq-text--primary': 'var(--bq-neutral-800)',
   'bq-text--alt': 'var(--bq-white)',
-  /** Secondary */
   'bq-text--secondary': 'var(--bq-neutral-600)',
-  /** Inverse */
   'bq-text--inverse': 'var(--bq-neutral-50)',
-  /** Brand */
   'bq-text--brand': 'var(--bq-brand)',
-  /** Feedback */
   'bq-text--info': 'var(--bq-info)',
   '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-white)',
   'bq-ui--alt': 'var(--bq-neutral-50)',
-  /** Secondary */
   'bq-ui--secondary': 'var(--bq-neutral-200)',
-  /** Tertiary */
   'bq-ui--tertiary': 'var(--bq-neutral-500)',
-  /** Inverse */
   'bq-ui--inverse': 'var(--bq-neutral-900)',
-  /** Brand */
   'bq-ui--brand': 'var(--bq-brand)',
   'bq-ui--brand-alt': 'var(--bq-brand-light)',
-  /** Success */
   'bq-ui--success': 'var(--bq-success)',
   'bq-ui--success-alt': 'var(--bq-success-light)',
-  /** Warning */
   'bq-ui--warning': 'var(--bq-warning)',
   'bq-ui--warning-alt': 'var(--bq-warning-light)',
-  /** Danger */
   'bq-ui--danger': 'var(--bq-danger)',
   'bq-ui--danger-alt': 'var(--bq-danger-light)',
-  /** Info */
   'bq-ui--info': 'var(--bq-info)',
   'bq-ui--info-alt': 'var(--bq-info-light)',
-  /* -------------------------------------------------------------------------- */
-  /*                                   States:                                  */
-  /* -------------------------------------------------------------------------- */
-  // !Note: these tokens are only used as base to create the states colors
   'bq-hover': '#444546',
   'bq-active': '#1F2026'
 };
 
 const EndavaRootTheme = {
-  // Fonts
-  'bq-font-family': "'Roboto', sans-serif",
+  'bq-font-family': "'Poppins', sans-serif",
   'bq-white': '#fafbfb',
   'bq-black': '#030406',
-  // Neutrals
   'bq-neutral-50': 'var(--bq-endava-grey-50)',
   'bq-neutral-100': 'var(--bq-endava-grey-100)',
   'bq-neutral-200': 'var(--bq-endava-grey-200)',
@@ -1115,33 +831,25 @@ const EndavaRootTheme = {
   'bq-neutral-900': 'var(--bq-endava-grey-900)',
   'bq-neutral-950': 'var(--bq-endava-grey-950)',
   'bq-neutral-1000': 'var(--bq-endava-grey-1000)',
-  // Brand
   'bq-brand-light': 'var(--bq-endava-orange-100)',
   'bq-brand': 'var(--bq-endava-orange-600)',
   'bq-brand-dark': 'var(--bq-endava-orange-1000)',
-  // Accent
   'bq-accent-light': 'var(--bq-endava-orange-100)',
   'bq-accent': 'var(--bq-endava-orange-600)',
   'bq-accent-dark': 'var(--bq-endava-orange-1000)',
-  // Success
   'bq-success-light': 'var(--bq-green-100)',
   'bq-success': 'var(--bq-green-600)',
   'bq-success-dark': 'var(--bq-green-1000)',
-  // Danger
   'bq-danger-light': 'var(--bq-corai-100)',
   'bq-danger': 'var(--bq-corai-600)',
   'bq-danger-dark': 'var(--bq-corai-1000)',
-  // Warning
   'bq-warning-light': 'var(--bq-yellow-100)',
   'bq-warning': 'var(--bq-yellow-600)',
   'bq-warning-dark': 'var(--bq-yellow-1000)',
-  // Info
   'bq-info-light': 'var(--bq-blue-100)',
   'bq-info': 'var(--bq-blue-600)',
   'bq-info-dark': 'var(--bq-blue-1000)',
-  // Focus
   'bq-focus': 'var(--bq-endava-orange-600)',
-  // Data
   'bq-data-01': 'var(--bq-brand)',
   'bq-data-02': '#af0cd8',
   'bq-data-03': '#0ca8d8',
@@ -1156,32 +864,23 @@ const EndavaRootTheme = {
   'bq-data-12': 'var(--bq-white)'
 };
 
-/* -------------------------------------------------------------------------- */
-/*                  BEEQ's opinionated reset for TailwindCSS                  */
-/* -------------------------------------------------------------------------- */
-
 const reset = {
-  /* Box sizing rules */
   '*, *::before, *::after': {
     'box-sizing': 'border-box'
   },
-  /* Remove default margin and inherit font styles */
   '*': {
     margin: '0',
     font: 'inherit'
   },
-  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
   'ul[role="list"], ol[role="list"]': {
     'list-style-type': 'none'
   },
-  /* Set core root defaults */
   html: {
     'font-size': 'var(--bq-font-size--m)'
   },
   'html:focus-within': {
     'scroll-behavior': 'smooth'
   },
-  /* Set core body defaults */
   body: {
     '-webkit-font-smoothing': 'antialiased',
     '-moz-osx-font-smoothing': 'grayscale',
@@ -1192,24 +891,19 @@ const reset = {
     'min-height': '100vh',
     'text-rendering': 'optimizeSpeed'
   },
-  /* A elements that don't have a class get default styles */
   'a:not([class])': {
     'text-decoration-skip-ink': 'auto'
   },
-  /* Make images easier to work with */
   'img, picture, video, canvas, svg': {
     'max-width': '100%',
     display: 'block'
   },
-  /* Inherit fonts for inputs and buttons */
   'input, button, select, textarea': {
     font: 'inherit'
   },
-  /* Avoid text overflows */
   'p, h1, h2, h3, h4, h5, h6': {
     'overflow-wrap': 'break-word'
   },
-  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
   '@media (prefers-reduced-motion: reduce)': {
     'html:focus-within': {
       'scroll-behavior': 'auto'
@@ -1312,19 +1006,12 @@ const TYPOGRAPHY_DEFAULT = {
   }
 };
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 var index = {
   theme: {
     colors: {
       current: 'currentColor',
       transparent: 'transparent',
-      /* -------------------------------------------------------------------------- */
-      /*                         Default Theme (Declarative)                        */
-      /* -------------------------------------------------------------------------- */
       ...DECLARATIVE_COLORS,
-      /* -------------------------------------------------------------------------- */
-      /*                         Extended colors (Primitive)                        */
-      /* -------------------------------------------------------------------------- */
       ...PRIMITIVE_COLORS
     },
     borderRadius: {
@@ -1374,7 +1061,6 @@ var index = {
     },
     extend: {
       height: {
-        // Details: https://web.dev/viewport-units/#the-need-for-new-viewport-units
         'dynamic-vh': '100dvh'
       },
       content: {
@@ -1402,61 +1088,41 @@ var index = {
     theme
   }) {
     addBase({
-      // CSS variables
       ':root, ::backdrop': {
         ...CSS_COLORS
       },
-      // CSS reset
       ...reset
     });
     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': {
         outline: `var(--bq-ring-width, 2px) solid var(--bq-ring-color-focus, ${String(theme('colors.focus'))})`,
         outlineOffset: 'var(--bq-ring-offset-width, 1px)'
       }
     });
     matchUtilities({
-      // Background `hover` state blend color
       'bg-hover': value => blendColor({
         color: value,
         base: 'var(--bq-hover)'
       }),
-      // Background `active` state blend color
       'bg-active': value => blendColor({
         color: value,
         base: 'var(--bq-active)'
       }),
-      // Border `hover` state blend color
       'border-hover': value => blendColor({
         color: value,
         base: 'var(--bq-hover)',
         property: 'border-color'
       }),
-      // Border `active` state blend color
       'border-active': value => blendColor({
         color: value,
         base: 'var(--bq-active)',
         property: 'border-color'
       }),
-      // Text `hover` state blend color
       'text-hover': value => blendColor({
         color: value,
         base: 'var(--bq-hover)',
         property: 'color'
       }),
-      // Text `active` state blend color
       'text-active': value => blendColor({
         color: value,
         base: 'var(--bq-active)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeq/tailwindcss",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "license": "Apache-2.0",
   "description": "BEEQ's opinionated TailwindCSS configuration",
   "main": "./index.cjs.js",