@beeq/tailwindcss 1.8.0-beta.9 → 1.8.0

package/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@nx/js/babel",
+      {
+        "useBuiltIns": "usage",
+      },
+    ],
+  ],
+}

package/eslint.config.js

@@ -0,0 +1,72 @@
+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/package.json

@@ -1,26 +1,17 @@
 {
-    "name": "@beeq/tailwindcss",
-    "version": "1.8.0-beta.9",
-    "license": "Apache-2.0",
-    "description": "BEEQ's opinionated TailwindCSS configuration",
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "types": "./src/index.d.ts",
-    "peerDependencies": {
-        "tailwindcss": "^3.4.4",
-        "tailwindcss-theme-swapper": "^0.12.0"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/Endava/BEEQ"
-    },
-    "exports": {
-        "./package.json": "./package.json",
-        ".": {
-            "module": "./index.esm.js",
-            "types": "./index.esm.d.ts",
-            "import": "./index.cjs.mjs",
-            "default": "./index.cjs.js"
-        }
-    }
-}
+  "name": "@beeq/tailwindcss",
+  "version": "1.8.0",
+  "license": "Apache-2.0",
+  "description": "BEEQ's opinionated TailwindCSS configuration",
+  "main": "./index.cjs.js",
+  "module": "./index.esm.js",
+  "types": "./src/index.d.ts",
+  "peerDependencies": {
+    "tailwindcss": "^3.4.4",
+    "tailwindcss-theme-swapper": "^0.12.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Endava/BEEQ"
+  }
+}

package/project.json

@@ -0,0 +1,37 @@
+{
+  "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

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

package/src/index.ts

@@ -0,0 +1,211 @@
+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

@@ -0,0 +1,64 @@
+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

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