@beeq/tailwindcss 1.8.0-beta.9 → 1.8.0

package/src/theme/default/light.ts

@@ -0,0 +1,104 @@
+export const DefaultLightTheme = {
+  /* -------------------------------------------------------------------------- */
+  /*                              Background colors                             */
+  /* -------------------------------------------------------------------------- */
+  'bq-background--primary': 'var(--bq-white)',
+  'bq-background--secondary': 'var(--bq-neutral-100)',
+  'bq-background--tertiary': 'var(--bq-neutral-200)',
+  'bq-background--alt': 'var(--bq-neutral-300)',
+  '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)',
+  /** 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)',
+  /** Alternative */
+  'bq-stroke--alt': 'var(--bq-neutral-50)',
+  /** 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)',
+  /** Secondary */
+  'bq-text--secondary': 'var(--bq-neutral-600)',
+  /** Inverse */
+  'bq-text--inverse': 'var(--bq-neutral-50)',
+  /** 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-white)',
+  /** 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)',
+  /** Alternative */
+  'bq-ui--alt': 'var(--bq-neutral-50)',
+  /** 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',
+};

package/src/theme/default/root.ts

@@ -0,0 +1,106 @@
+export 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)',
+  'bq-neutral-300': 'var(--bq-grey-300)',
+  'bq-neutral-400': 'var(--bq-grey-400)',
+  'bq-neutral-500': 'var(--bq-grey-500)',
+  'bq-neutral-600': 'var(--bq-grey-600)',
+  'bq-neutral-700': 'var(--bq-grey-700)',
+  'bq-neutral-800': 'var(--bq-grey-800)',
+  '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)',
+  'bq-data-04': 'var(--bq-cyan-600)',
+  'bq-data-05': 'var(--bq-teal-600)',
+  'bq-data-06': 'var(--bq-orange-600)',
+  'bq-data-07': 'var(--bq-yellow-600)',
+  'bq-data-08': 'var(--bq-red-600)',
+  'bq-data-09': 'var(--bq-blue-600)',
+  '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',
+  'bq-font-weight--medium': '500',
+  'bq-font-weight--semibold': '600',
+  'bq-font-weight--bold': '700',
+  '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
+  // Stroke width
+  'bq-stroke-s': '1px',
+  'bq-stroke-m': '2px',
+  'bq-stroke-l': '3px',
+};

package/src/theme/endava/dark.ts

@@ -0,0 +1,106 @@
+export 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)',
+  '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-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)',
+  /** 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)',
+  /** 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-info)',
+  /* -------------------------------------------------------------------------- */
+  /*                                 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-neutral-white)',
+  /** 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)',
+  /** 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-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',
+};

package/src/theme/endava/light.ts

@@ -0,0 +1,106 @@
+export const EndavaLightTheme = {
+  /* -------------------------------------------------------------------------- */
+  /*                              Background colors                             */
+  /* -------------------------------------------------------------------------- */
+  'bq-background--primary': 'var(--bq-white)',
+  'bq-background--secondary': 'var(--bq-neutral-100)',
+  'bq-background--tertiary': 'var(--bq-neutral-200)',
+  'bq-background--alt': 'var(--bq-neutral-300)',
+  '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)',
+  /** Secondary */
+  'bq-icon--secondary': 'var(--bq-neutral-600)',
+  /** Inverse */
+  'bq-icon--inverse': 'var(--bq-neutral-50)',
+  /** Brand */
+  'bq-icon--brand': 'var(--bq-brand)',
+  /** Alternative */
+  'bq-icon--alt': 'var(--bq-white)',
+  /** 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)',
+  /** 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)',
+  /** Alternative */
+  'bq-stroke--alt': 'var(--bq-neutral-50)',
+  '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)',
+  /** Secondary */
+  'bq-text--secondary': 'var(--bq-neutral-600)',
+  /** Inverse */
+  'bq-text--inverse': 'var(--bq-neutral-50)',
+  /** Brand */
+  'bq-text--brand': 'var(--bq-brand)',
+  /** Alternative */
+  'bq-text--alt': 'var(--bq-white)',
+  /** 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)',
+  /** 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--alt': 'var(--bq-neutral-50)',
+  'bq-ui--brand-alt': 'var(--bq-brand-light)',
+  /** Alternative */
+  'bq-ui--brand': 'var(--bq-brand)',
+  /** 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',
+};

package/src/theme/endava/root.ts

@@ -0,0 +1,58 @@
+export const EndavaRootTheme = {
+  // Fonts
+  '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)',
+  'bq-neutral-300': 'var(--bq-endava-grey-300)',
+  'bq-neutral-400': 'var(--bq-endava-grey-400)',
+  'bq-neutral-500': 'var(--bq-endava-grey-500)',
+  'bq-neutral-600': 'var(--bq-endava-grey-600)',
+  'bq-neutral-700': 'var(--bq-endava-grey-700)',
+  'bq-neutral-800': 'var(--bq-endava-grey-800)',
+  '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',
+  'bq-data-04': 'var(--bq-teal-600)',
+  'bq-data-05': 'var(--bq-yellow-600)',
+  'bq-data-06': 'var(--bq-orange-600)',
+  'bq-data-07': 'var(--bq-blue-600)',
+  'bq-data-08': 'var(--bq-red-600)',
+  'bq-data-09': 'var(--bq-purple-600)',
+  'bq-data-10': '#394b56',
+  'bq-data-11': 'var(--bq-black)',
+  'bq-data-12': 'var(--bq-white)',
+};

package/src/theme/reset.ts

@@ -0,0 +1,68 @@
+/* -------------------------------------------------------------------------- */
+/*                  BEEQ's opinionated reset for TailwindCSS                  */
+/* -------------------------------------------------------------------------- */
+
+import type { CSSRuleObject } from 'tailwindcss/types/config';
+
+export const reset: CSSRuleObject | CSSRuleObject[] = {
+  /* 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',
+    'background-color': 'var(--bq-background--primary)',
+    color: 'var(--bq-text--primary)',
+    'font-family': 'var(--bq-font-family)',
+    'line-height': 'var(--bq-font-line-height--regular)',
+    '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',
+    },
+    '*, *::before, *::after': {
+      'animation-duration': '0.01ms !important',
+      'animation-iteration-count': '1 !important',
+      'transition-duration': '0.01ms !important',
+      'scroll-behavior': 'auto',
+    },
+  },
+};

package/src/theme/typography/default.ts

@@ -0,0 +1,74 @@
+import type { CSSRuleObject } from 'tailwindcss/types/config';
+
+export const TYPOGRAPHY_DEFAULT: CSSRuleObject | CSSRuleObject[] = {
+  '.display': { fontSize: 'var(--bq-font-size--xxl5)' },
+  '.display,.h1,h1': {
+    fontFamily: 'inherit',
+    fontWeight: 'var(--bq-font-weight--regular)',
+    lineHeight: 'var(--bq-font-line-height--small)',
+  },
+  '.h1,h1': { fontSize: 'var(--bq-font-size--xxl4)' },
+  '.h2,h2': { fontSize: 'var(--bq-font-size--xxl3)' },
+  '.h2,.h3,h2,h3': {
+    fontFamily: 'inherit',
+    fontWeight: 'var(--bq-font-weight--regular)',
+    lineHeight: 'var(--bq-font-line-height--small)',
+  },
+  '.h3,h3': { fontSize: 'var(--bq-font-size--xxl2)' },
+  '.h4,h4': {
+    fontFamily: 'inherit',
+    fontSize: 'var(--bq-font-size--xxl)',
+    fontWeight: 'var(--bq-font-weight--regular)',
+    lineHeight: 'var(--bq-font-line-height--small)',
+  },
+  '.h5,h5': { fontSize: 'var(--bq-font-size--xl)' },
+  '.h5,.h6,h5,h6': {
+    fontFamily: 'inherit',
+    fontWeight: 'var(--bq-font-weight--regular)',
+    lineHeight: 'var(--bq-font-line-height--regular)',
+  },
+  '.h6,h6': { fontSize: 'var(--bq-font-size--l)' },
+  '.caption,figcaption': { fontSize: 'var(--bq-font-size--s)' },
+  '.caption,.overline,figcaption': {
+    fontFamily: 'inherit',
+    fontWeight: 'var(--bq-font-weight--regular)',
+    lineHeight: 'var(--bq-font-line-height--regular)',
+  },
+  '.overline': { fontSize: 'var(--bq-font-size--xs)' },
+  [`.caption.semibold,
+    .display.semibold,
+    .h1.semibold,
+    .h2.semibold,
+    .h3.semibold,
+    .h4.semibold,
+    .h5.semibold,
+    .h6.semibold,
+    .overline.semibold,
+    caption.semibold,
+    h1.semibold,
+    h2.semibold,
+    h3.semibold,
+    h4.semibold,
+    h5.semibold,
+    h6.semibold`]: {
+    fontWeight: 'var(--bq-font-weight--semibold)',
+  },
+  [`.caption.bold,
+    .display.bold,
+    .h1.bold,
+    .h2.bold,
+    .h3.bold,
+    .h4.bold,
+    .h5.bold,
+    .h6.bold,
+    .overline.bold,
+    caption.bold,
+    h1.bold,
+    h2.bold,
+    h3.bold,
+    h4.bold,
+    h5.bold,
+    h6.bold`]: {
+    fontWeight: 'var(--bq-font-weight--bold)',
+  },
+};

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noFallthroughCasesInSwitch": true,
+    "removeComments": true,
+    "sourceMap": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

package/index.cjs.d.ts

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

package/index.cjs.default.js

@@ -1 +0,0 @@
-exports._default = require('./index.cjs.js').default;