@beeq/tailwindcss 1.8.0 → 1.8.2

package/eslint.config.js

@@ -1,72 +0,0 @@
-const nxESLint = require('@nx/eslint-plugin');
-const importXPlugin = require('eslint-plugin-import-x');
-const prettierRecommended = require('eslint-plugin-prettier/recommended');
-const jsoncParser = require('jsonc-eslint-parser');
-const tsESLint = require('typescript-eslint');
-
-/** @type { import("eslint").Linter.Config[] } */
-module.exports = [
-  ...tsESLint.configs.recommended,
-  prettierRecommended,
-  importXPlugin.flatConfigs.recommended,
-  importXPlugin.flatConfigs.typescript,
-  {
-    files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
-  },
-  {
-    languageOptions: {
-      sourceType: 'module',
-    },
-  },
-  {
-    rules: {
-      '@typescript-eslint/no-inferrable-types': 'off',
-      'import-x/consistent-type-specifier-style': 'error',
-      'import-x/no-named-as-default': 'off',
-      'import-x/no-named-as-default-member': 'off',
-      'import-x/namespace': [
-        // @see https://github.com/import-js/eslint-plugin-import/blob/v2.27.5/docs/rules/namespace.md
-        'error',
-        {
-          allowComputed: true,
-        },
-      ],
-      'import-x/order': [
-        'error',
-        {
-          groups: ['builtin', 'external', ['parent', 'sibling'], 'index'],
-          'newlines-between': 'always',
-          alphabetize: {
-            order: 'asc',
-            caseInsensitive: true,
-          },
-        },
-      ],
-      'sort-imports': [
-        'error',
-        {
-          ignoreCase: true,
-          ignoreDeclarationSort: true,
-        },
-      ],
-    },
-  },
-  {
-    files: ['**/package.json', '**/project.json'],
-    languageOptions: {
-      parser: jsoncParser,
-    },
-    plugins: {
-      '@nx': nxESLint,
-    },
-    rules: {
-      '@nx/dependency-checks': 'error',
-    },
-  },
-  {
-    files: ['**/*.js'],
-    rules: {
-      '@typescript-eslint/no-require-imports': 'off',
-    },
-  },
-];

package/project.json

@@ -1,37 +0,0 @@
-{
-  "name": "beeq-tailwindcss",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/beeq-tailwindcss/src",
-  "projectType": "library",
-  "tags": ["publishable", "preset", "tailwindcss"],
-  "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "format": ["esm", "cjs"],
-        "deleteOutputPath": true,
-        "generateExportsField": true,
-        "outputPath": "dist/beeq-tailwindcss",
-        "main": "packages/beeq-tailwindcss/src/index.ts",
-        "tsConfig": "packages/beeq-tailwindcss/tsconfig.lib.json",
-        "project": "packages/beeq-tailwindcss/package.json",
-        "external": ["tailwindcss", "tailwindcss-theme-swapper"],
-        "assets": [
-          {
-            "glob": "packages/beeq-tailwindcss/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ]
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-      "dependsOn": ["build"],
-      "options": {
-        "lintFilePatterns": ["{projectRoot}/**/*.ts", "{projectRoot}/package.json", "{projectRoot}/project.json"]
-      }
-    }
-  }
-}

package/src/helpers/blend-color.ts

@@ -1,18 +0,0 @@
-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}%)`,
-});

package/src/index.ts

@@ -1,211 +0,0 @@
-import type { Config } from 'tailwindcss';
-import plugin from 'tailwindcss/plugin';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import ThemeSwapper from 'tailwindcss-theme-swapper';
-
-import { ColorMix, LogicalProperties } from './plugins';
-import {
-  CSS_COLORS,
-  DECLARATIVE_COLORS,
-  DefaultDarkTheme,
-  DefaultLightTheme,
-  DefaultRootTheme,
-  EndavaDarkTheme,
-  EndavaLightTheme,
-  EndavaRootTheme,
-  PRIMITIVE_COLORS,
-  reset,
-  TYPOGRAPHY_DEFAULT,
-} from './theme';
-
-const inherit: string = 'inherit';
-
-export default {
-  theme: {
-    colors: {
-      inherit,
-      current: 'currentColor',
-      transparent: 'transparent',
-      /* ------------------- Extended palette color (Primitive) ------------------- */
-      ...PRIMITIVE_COLORS,
-      /* ------------------- Specific Theme Colors (Declarative) ------------------ */
-      focus: DECLARATIVE_COLORS.focus,
-      data: { ...DECLARATIVE_COLORS.data },
-      icon: { ...DECLARATIVE_COLORS.icon },
-      ui: { ...DECLARATIVE_COLORS.ui },
-    },
-    borderRadius: {
-      none: 'var(--bq-radius--none)',
-      xs2: 'var(--bq-radius--xs2)',
-      xs: 'var(--bq-radius--xs)',
-      s: 'var(--bq-radius--s)',
-      m: 'var(--bq-radius--m)',
-      l: 'var(--bq-radius--l)',
-      full: 'var(--bq-radius--full)',
-    },
-    borderWidth: {
-      0: '0',
-      s: 'var(--bq-stroke-s)',
-      m: 'var(--bq-stroke-m)',
-      l: 'var(--bq-stroke-l)',
-    },
-    boxShadow: {
-      xs: 'var(--bq-box-shadow--xs)',
-      s: 'var(--bq-box-shadow--s)',
-      m: 'var(--bq-box-shadow--m)',
-      l: 'var(--bq-box-shadow--l)',
-    },
-    fontFamily: {
-      inherit,
-      default: 'var(--bq-font-family)',
-      outfit: 'var(--bq-font-family--outfit)',
-      poppins: 'var(--bq-font-family--poppins)',
-    },
-    fontSize: {
-      xs: 'var(--bq-font-size--xs)',
-      s: 'var(--bq-font-size--s)',
-      m: 'var(--bq-font-size--m)',
-      l: 'var(--bq-font-size--l)',
-      xl: 'var(--bq-font-size--xl)',
-      xxl: 'var(--bq-font-size--xxl)',
-      xxl2: 'var(--bq-font-size--xxl2)',
-      xxl3: 'var(--bq-font-size--xxl3)',
-      xxl4: 'var(--bq-font-size--xxl4)',
-      xxl5: 'var(--bq-font-size--xxl5)',
-    },
-    fontWeight: {
-      thin: 'var(--bq-font-weight--thin)',
-      light: 'var(--bq-font-weight--light)',
-      regular: 'var(--bq-font-weight--regular)',
-      medium: 'var(--bq-font-weight--medium)',
-      semibold: 'var(--bq-font-weight--semibold)',
-      bold: 'var(--bq-font-weight--bold)',
-    },
-    lineHeight: {
-      inherit,
-      small: 'var(--bq-font-line-height--small)',
-      regular: 'var(--bq-font-line-height--regular)',
-      large: 'var(--bq-font-line-height--large)',
-    },
-    strokeWidth: {
-      inherit,
-      none: '0',
-      s: 'var(--bq-stroke-s)',
-      m: 'var(--bq-stroke-m)',
-      l: 'var(--bq-stroke-l)',
-    },
-    extend: {
-      /* ------------------ Extend colors with declarative colors ----------------- */
-      backgroundColor: { ...DECLARATIVE_COLORS.bg },
-      borderColor: { ...DECLARATIVE_COLORS.stroke },
-      stroke: { ...DECLARATIVE_COLORS.stroke },
-      textColor: { ...DECLARATIVE_COLORS.text },
-      fill: { ...DECLARATIVE_COLORS.icon },
-      /* --------------------------- End: Extend colors --------------------------- */
-      content: {
-        empty: "''",
-      },
-      cursor: {
-        inherit,
-      },
-      height: {
-        inherit,
-        // Details: https://web.dev/viewport-units/#the-need-for-new-viewport-units
-        'dynamic-vh': '100dvh',
-      },
-      spacing: {
-        xs3: 'var(--bq-spacing-xs3)',
-        xs2: 'var(--bq-spacing-xs2)',
-        xs: 'var(--bq-spacing-xs)',
-        s: 'var(--bq-spacing-s)',
-        m: 'var(--bq-spacing-m)',
-        l: 'var(--bq-spacing-l)',
-        xl: 'var(--bq-spacing-xl)',
-        xxl: 'var(--bq-spacing-xxl)',
-        xxl2: 'var(--bq-spacing-xxl2)',
-        xxl3: 'var(--bq-spacing-xxl3)',
-        xxl4: 'var(--bq-spacing-xxl4)',
-      },
-    },
-  },
-  plugins: [
-    plugin(function ({ addBase, addComponents, 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)',
-        },
-      });
-    }),
-    // Local Custom Plugins
-    ColorMix,
-    LogicalProperties,
-    // Tailwind CSS Theme Swapper
-    ThemeSwapper({
-      themes: [
-        {
-          name: 'root',
-          selectors: [':root'],
-          theme: { ...DefaultRootTheme },
-        },
-        {
-          name: 'light',
-          selectors: [':root', '.light', '.beeq.light', '[bq-mode="light"]'],
-          theme: { ...DefaultLightTheme },
-        },
-        {
-          name: 'dark',
-          selectors: ['.dark', '.beeq.dark', '[bq-mode="dark"]'],
-          theme: { ...DefaultDarkTheme },
-        },
-        {
-          name: 'endava',
-          selectors: ['.endava', '[bq-theme="endava"]'],
-          theme: { ...EndavaRootTheme },
-        },
-        {
-          name: 'endava-light',
-          selectors: ['.endava.light', '[bq-theme="endava"][bq-mode="light"]'],
-          theme: { ...EndavaLightTheme },
-        },
-        {
-          name: 'endava-dark',
-          selectors: ['.endava.dark', '[bq-theme="endava"][bq-mode="dark"]'],
-          theme: { ...EndavaDarkTheme },
-        },
-      ],
-    }),
-  ],
-} satisfies Partial<Config>;
-
-export {
-  CSS_COLORS,
-  DECLARATIVE_COLORS,
-  DefaultDarkTheme,
-  DefaultLightTheme,
-  DefaultRootTheme,
-  EndavaDarkTheme,
-  EndavaLightTheme,
-  EndavaRootTheme,
-  PRIMITIVE_COLORS,
-  TYPOGRAPHY_DEFAULT,
-};

package/src/plugins/color-mix.ts

@@ -1,64 +0,0 @@
-import type { Config } from 'tailwindcss';
-import plugin from 'tailwindcss/plugin';
-
-import { blendColor } from '../helpers';
-
-// NOTE: https://github.com/tailwindlabs/tailwindcss/discussions/6925#discussioncomment-1919382
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette');
-
-export const ColorMix: Partial<Config> = plugin(function ({ matchUtilities, theme }) {
-  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)', property: 'color' }),
-    },
-    { values: flattenColorPalette(theme('colors')) },
-  );
-  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)' }),
-    },
-    { values: flattenColorPalette(theme('backgroundColor')) },
-  );
-  matchUtilities(
-    {
-      // 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' }),
-    },
-    { values: flattenColorPalette(theme('borderColor')) },
-  );
-  matchUtilities(
-    {
-      // 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)', property: 'color' }),
-    },
-    { values: flattenColorPalette(theme('textColor')) },
-  );
-  matchUtilities(
-    {
-      // Stroke `hover` state blend color
-      'stroke-hover': (value) => blendColor({ color: value, base: 'var(--bq-hover)', property: 'color' }),
-      // Stroke `active` state blend color
-      'stroke-active': (value) => blendColor({ color: value, base: 'var(--bq-active)', property: 'color' }),
-    },
-    { values: flattenColorPalette(theme('stroke')) },
-  );
-});

package/src/plugins/logical-properties.ts

@@ -1,84 +0,0 @@
-import type { Config } from 'tailwindcss';
-import plugin from 'tailwindcss/plugin';
-
-// NOTE: https://github.com/tailwindlabs/tailwindcss/discussions/6925#discussioncomment-1919382
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette');
-
-export const LogicalProperties: Partial<Config> = plugin(function ({ matchUtilities, theme }) {
-  matchUtilities(
-    {
-      // Logical Border Width properties
-      'border-bl': (value) => ({ 'border-block-width': value }),
-      'border-bs': (value) => ({ 'border-block-start-width': value }),
-      'border-be': (value) => ({ 'border-block-end-width': value }),
-      'border-i': (value) => ({ 'border-inline-width': value }),
-      'border-is': (value) => ({ 'border-inline-start-width': value }),
-      'border-ie': (value) => ({ 'border-inline-end-width': value }),
-    },
-    { values: theme('borderWidth') },
-  );
-  matchUtilities(
-    {
-      // Logical Border Color properties
-      'border-bl': (value) => ({ 'border-block-color': value }),
-      'border-bs': (value) => ({ 'border-block-start-color': value }),
-      'border-be': (value) => ({ 'border-block-end-color': value }),
-      'border-i': (value) => ({ 'border-inline-color': value }),
-      'border-is': (value) => ({ 'border-inline-start-color': value }),
-      'border-ie': (value) => ({ 'border-inline-end-color': value }),
-    },
-    { values: flattenColorPalette(theme('colors')) },
-  );
-  matchUtilities(
-    {
-      // Logical Height and Width properties
-      bs: (value) => ({ 'block-size': value }),
-      'max-bs': (value) => ({ 'max-block-size': value }),
-      'min-bs': (value) => ({ 'min-block-size': value }),
-      is: (value) => ({ 'inline-size': value }),
-      'max-is': (value) => ({ 'max-inline-size': value }),
-      'min-is': (value) => ({ 'min-inline-size': value }),
-    },
-    { values: theme('width') },
-  );
-  matchUtilities(
-    {
-      // Logical Border properties
-      'border-bl': (value) => ({ 'border-block': value }),
-      'border-bs': (value) => ({ 'border-block-start': value }),
-      'border-be': (value) => ({ 'border-block-end': value }),
-      'border-i': (value) => ({ 'border-inline': value }),
-      'border-is': (value) => ({ 'border-inline-start': value }),
-      'border-ie': (value) => ({ 'border-inline-end': value }),
-      // Logical Padding properties (only those not covered by Tailwind CSS)
-      'p-b': (value) => ({ 'padding-block': value }),
-      'p-bs': (value) => ({ 'padding-block-start': value }),
-      'p-be': (value) => ({ 'padding-block-end': value }),
-      'p-i': (value) => ({ 'padding-inline': value }),
-    },
-    {
-      values: theme('spacing'),
-    },
-  );
-  matchUtilities(
-    {
-      // Logical Top, Right, Bottom, and Left properties
-      'inset-b': (value) => ({ 'inset-block': value }),
-      'inset-bs': (value) => ({ 'inset-block-start': value }),
-      'inset-be': (value) => ({ 'inset-block-end': value }),
-      'inset-i': (value) => ({ 'inset-inline': value }),
-      'inset-is': (value) => ({ 'inset-inline-start': value }),
-      'inset-ie': (value) => ({ 'inset-inline-end': value }),
-      // Logical Margin properties (only those not covered by Tailwind CSS)
-      'm-b': (value) => ({ 'margin-block': value }),
-      'm-bs': (value) => ({ 'margin-block-start': value }),
-      'm-be': (value) => ({ 'margin-block-end': value }),
-      'm-i': (value) => ({ 'margin-inline': value }),
-    },
-    {
-      values: theme('spacing'),
-      supportsNegativeValues: true,
-    },
-  );
-});