@lukso/web-components 1.161.1 → 1.162.0

package/tailwind.config.cjs

@@ -1,201 +1,231 @@
-const plugin = require('tailwindcss/plugin')
+const plugin = require("tailwindcss/plugin");
 
-const { colorPalette, boxShadows, fontWeights, fontSizes, lineHeights, scales, heights, borderRadius, spacing } = require('./tools/tailwind-config.cjs')
+const {
+	colorPalette,
+	boxShadows,
+	fontWeights,
+	fontSizes,
+	lineHeights,
+	scales,
+	heights,
+	borderRadius,
+	spacing,
+	proseSpacing,
+	proseVariants,
+} = require("./tools/tailwind-config.cjs");
 
 /**
  * Add animation delay utilities. Example: .animation-delay-1000
  */
 const animationDelayPlugin = plugin(({ addUtilities, theme, e }) => {
-  const values = theme('animationDelay')
-  const utilities = Object.entries(values).map(([key, value]) => {
-    return {
-      [`.${e(`animation-delay-${key}`)}`]: { animationDelay: `${value}` },
-    }
-  })
-  addUtilities(utilities)
-})
+	const values = theme("animationDelay");
+	const utilities = Object.entries(values).map(([key, value]) => {
+		return {
+			[`.${e(`animation-delay-${key}`)}`]: { animationDelay: `${value}` },
+		};
+	});
+	addUtilities(utilities);
+});
 
 /**
  * Add animation iteration utilities. Example: .animation-iteration-infinite
  */
 const animationIterationPlugin = plugin(({ addUtilities, theme, e }) => {
-  const values = theme('animationIteration')
-  const utilities = Object.entries(values).map(([key, value]) => {
-    return {
-      [`.${e(`animation-iteration-${key}`)}`]: {
-        animationIterationCount: `${value}`,
-      },
-    }
-  })
-  addUtilities(utilities)
-})
+	const values = theme("animationIteration");
+	const utilities = Object.entries(values).map(([key, value]) => {
+		return {
+			[`.${e(`animation-iteration-${key}`)}`]: {
+				animationIterationCount: `${value}`,
+			},
+		};
+	});
+	addUtilities(utilities);
+});
 
 /**
  * Add animation duration utilities. Example: .animation-duration-1000
  */
 const animationDuration = plugin(({ addUtilities, theme, e }) => {
-  const values = theme('animationDuration')
-  const utilities = Object.entries(values).map(([key, value]) => {
-    return {
-      [`.${e(`animation-duration-${key}`)}`]: {
-        animationDuration: `${value}`,
-      },
-    }
-  })
-  addUtilities(utilities)
-})
+	const values = theme("animationDuration");
+	const utilities = Object.entries(values).map(([key, value]) => {
+		return {
+			[`.${e(`animation-duration-${key}`)}`]: {
+				animationDuration: `${value}`,
+			},
+		};
+	});
+	addUtilities(utilities);
+});
 
 /**
  * Add animation fill mode  utilities. Example: .animation-fill-forwards
  */
 const animationFill = plugin(({ addUtilities, theme, e }) => {
-  const values = theme('animationFill')
-  const utilities = Object.entries(values).map(([key, value]) => {
-    return {
-      [`.${e(`animation-fill-${key}`)}`]: {
-        animationFillMode: `${value}`,
-      },
-    }
-  })
-  addUtilities(utilities)
-})
+	const values = theme("animationFill");
+	const utilities = Object.entries(values).map(([key, value]) => {
+		return {
+			[`.${e(`animation-fill-${key}`)}`]: {
+				animationFillMode: `${value}`,
+			},
+		};
+	});
+	addUtilities(utilities);
+});
 
 module.exports = {
-  content: [
-    './src/**/*.{ts,html,css,scss,mdx}',
-    './package/**/*.{ts,html,css,scss,mdx}',
-    './stories/**/*.{ts,html,css,scss,mdx}',
-    './*.{ts,html,css,scss,mdx}'
-  ],
-  theme: {
-    fontFamily: {
-      inter: ['Inter', 'sans-serif'],
-      apax: ['Apax', 'sans-serif'],
-      mono: ['"PT Mono"', 'sans-serif'],
-    },
-    extend: {
-      colors: colorPalette,
-      boxShadow: boxShadows,
-      fontSize: fontSizes,
-      fontWeight: fontWeights,
-      lineHeight: lineHeights,
-      transitionDuration: {
-        25: '25ms',
-        250: '250ms',
-      },
-      transitionProperty: {
-        width: 'width',
-        height: 'height',
-      },
-      scale: scales,
-      height: heights,
-      animation: {
-        'pulse-resize': 'pulse-resize 1s ease-in-out infinite',
-        'resize-in': 'resize-in 0.5s ease-in-out',
-        'fade-in': 'fade-in 0.5s ease-in-out',
-        bounce2: 'bounce2 1s ease-in-out infinite alternate',
-        'fade-in-up': 'fade-in-up 0.5s ease-out forwards',
-      },
-      keyframes: {
-        'pulse-resize': {
-          '0%, 100%': { transform: 'scale(1)' },
-          '50%': { transform: 'scale(0.7)' },
-        },
-        'resize-in': {
-          '0%': { transform: 'scale(0.5)' },
-          '100%': { transform: 'scale(1)' },
-        },
-        'fade-in': {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        bounce2: {
-          '0%': { transform: 'translateY(-6px)' },
-          '100%': { transform: 'translateY(10)' },
-        },
-        'fade-in-up': {
-          '0%': {
-            opacity: '0',
-            transform: 'translateY(10px)',
-          },
-          '100%': {
-            opacity: '1',
-            transform: 'translateY(0)',
-          },
-        },
-      },
-      animationDelay: {
-        none: '0s',
-        75: '75ms',
-        100: '100ms',
-        150: '150ms',
-        200: '200ms',
-        300: '300ms',
-        400: '400ms',
-        500: '500ms',
-        600: '600ms',
-        700: '700ms',
-        800: '800ms',
-        900: '900ms',
-        1000: '1000ms',
-        1500: '1500ms',
-        2000: '2000ms',
-        3000: '3000ms',
-        5000: '5000ms',
-      },
-      animationIteration: {
-        infinite: 'infinite',
-        1: '1',
-        2: '2',
-        3: '3',
-      },
-      animationDuration: {
-        25: '25ms',
-        50: '50ms',
-        75: '75ms',
-        100: '100ms',
-        150: '150ms',
-        200: '200ms',
-        300: '300ms',
-        400: '400ms',
-        500: '500ms',
-        600: '600ms',
-        700: '700ms',
-        800: '800ms',
-        900: '900ms',
-        1000: '1000ms',
-        1500: '1500ms',
-        2000: '2000ms',
-        3000: '3000ms',
-      },
-      animationFill: {
-        none: 'none',
-        forwards: 'forwards',
-        backwards: 'backwards',
-        both: 'both',
-      },
-      borderRadius,
-      spacing,
-      typography: () => ({
-        inherit: {
-          css: {
-            '--tw-prose-body': 'inherit',
-            '--tw-prose-headings': 'inherit',
-            '--tw-prose-lead': 'inherit',
-            '--tw-prose-links': 'inherit',
-            '--tw-prose-bold': 'inherit',
-            '--tw-prose-counters': 'inherit',
-            '--tw-prose-bullets': 'inherit',
-          },
-        },
-      }),
-    },
-  },
-  plugins: [
-    animationDelayPlugin,
-    animationIterationPlugin,
-    animationDuration,
-    animationFill,
-    require('@tailwindcss/typography'),
-  ],
-}
+	content: [
+		"./src/**/*.{ts,html,css,scss,mdx}",
+		"./package/**/*.{ts,html,css,scss,mdx}",
+		"./stories/**/*.{ts,html,css,scss,mdx}",
+		"./*.{ts,html,css,scss,mdx}",
+	],
+	theme: {
+		fontFamily: {
+			inter: ["Inter", "sans-serif"],
+			apax: ["Apax", "sans-serif"],
+			mono: ['"PT Mono"', "sans-serif"],
+		},
+		extend: {
+			colors: colorPalette,
+			boxShadow: boxShadows,
+			fontSize: fontSizes,
+			fontWeight: fontWeights,
+			lineHeight: lineHeights,
+			transitionDuration: {
+				25: "25ms",
+				250: "250ms",
+			},
+			transitionProperty: {
+				width: "width",
+				height: "height",
+			},
+			scale: scales,
+			height: heights,
+			animation: {
+				"pulse-resize": "pulse-resize 1s ease-in-out infinite",
+				"resize-in": "resize-in 0.5s ease-in-out",
+				"fade-in": "fade-in 0.5s ease-in-out",
+				bounce2: "bounce2 1s ease-in-out infinite alternate",
+				"fade-in-up": "fade-in-up 0.5s ease-out forwards",
+			},
+			keyframes: {
+				"pulse-resize": {
+					"0%, 100%": { transform: "scale(1)" },
+					"50%": { transform: "scale(0.7)" },
+				},
+				"resize-in": {
+					"0%": { transform: "scale(0.5)" },
+					"100%": { transform: "scale(1)" },
+				},
+				"fade-in": {
+					"0%": { opacity: "0" },
+					"100%": { opacity: "1" },
+				},
+				bounce2: {
+					"0%": { transform: "translateY(-6px)" },
+					"100%": { transform: "translateY(10)" },
+				},
+				"fade-in-up": {
+					"0%": {
+						opacity: "0",
+						transform: "translateY(10px)",
+					},
+					"100%": {
+						opacity: "1",
+						transform: "translateY(0)",
+					},
+				},
+			},
+			animationDelay: {
+				none: "0s",
+				75: "75ms",
+				100: "100ms",
+				150: "150ms",
+				200: "200ms",
+				300: "300ms",
+				400: "400ms",
+				500: "500ms",
+				600: "600ms",
+				700: "700ms",
+				800: "800ms",
+				900: "900ms",
+				1000: "1000ms",
+				1500: "1500ms",
+				2000: "2000ms",
+				3000: "3000ms",
+				5000: "5000ms",
+			},
+			animationIteration: {
+				infinite: "infinite",
+				1: "1",
+				2: "2",
+				3: "3",
+			},
+			animationDuration: {
+				25: "25ms",
+				50: "50ms",
+				75: "75ms",
+				100: "100ms",
+				150: "150ms",
+				200: "200ms",
+				300: "300ms",
+				400: "400ms",
+				500: "500ms",
+				600: "600ms",
+				700: "700ms",
+				800: "800ms",
+				900: "900ms",
+				1000: "1000ms",
+				1500: "1500ms",
+				2000: "2000ms",
+				3000: "3000ms",
+			},
+			animationFill: {
+				none: "none",
+				forwards: "forwards",
+				backwards: "backwards",
+				both: "both",
+			},
+			borderRadius,
+			spacing,
+			typography: {
+				...Object.fromEntries(
+					proseVariants.map((variant) => [
+						variant,
+						{
+							css: {
+								maxWidth: "none",
+								lineHeight: "1.6", // general baseline line-height for prose content
+								...proseSpacing,
+							},
+						},
+					]),
+				),
+				inherit: {
+					css: {
+						"--tw-prose-body": "inherit",
+						"--tw-prose-headings": "inherit",
+						"--tw-prose-lead": "inherit",
+						"--tw-prose-links": "inherit",
+						"--tw-prose-bold": "inherit",
+						"--tw-prose-counters": "inherit",
+						"--tw-prose-bullets": "inherit",
+					},
+				},
+			},
+		},
+	},
+	// styles that will be always included in the build
+	safelist: [
+		{
+			pattern: /^prose(-[a-z0-9]+)?$/,
+		},
+	],
+	plugins: [
+		animationDelayPlugin,
+		animationIterationPlugin,
+		animationDuration,
+		animationFill,
+		require("@tailwindcss/typography"),
+	],
+};

package/tools/cn.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const tailwindConfig = require('./tailwind-config-BIErjaAT.cjs');
+const tailwindConfig = require('./tailwind-config-DoMZEvsr.cjs');
 
 const CLASS_PART_SEPARATOR = '-';
 const createClassGroupUtils = config => {

package/tools/cn.js

@@ -1,4 +1,4 @@
-import { l as lineHeights, a as heights, s as scales, f as fontWeights, b as fontSizes, c as boxShadows, d as borderRadius, e as colorPalette } from './tailwind-config-Ch2-b3Be.js';
+import { l as lineHeights, a as heights, s as scales, f as fontWeights, b as fontSizes, c as boxShadows, d as borderRadius, e as colorPalette } from './tailwind-config-DVTyRd7x.js';
 
 const CLASS_PART_SEPARATOR = '-';
 const createClassGroupUtils = config => {

package/tools/copy-assets.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const fs = require('fs');
-const path = require('path');
+const node_fs = require('node:fs');
+const node_path = require('node:path');
 
 const fileExtensionWhitelist = [
   ".woff2",
@@ -15,27 +15,27 @@ const fileExtensionWhitelist = [
 ];
 function copyFileSync(source, target) {
   let targetFile = target;
-  if (fs.existsSync(target)) {
-    if (fs.lstatSync(target).isDirectory()) {
-      targetFile = path.join(target, path.basename(source));
+  if (node_fs.existsSync(target)) {
+    if (node_fs.lstatSync(target).isDirectory()) {
+      targetFile = node_path.join(target, node_path.basename(source));
     }
   }
-  if (!fileExtensionWhitelist.includes(path.extname(source))) {
+  if (!fileExtensionWhitelist.includes(node_path.extname(source))) {
     return;
   }
-  fs.copyFileSync(source, targetFile);
+  node_fs.copyFileSync(source, targetFile);
 }
 function copyFolderRecursiveSync(source, target) {
   let files = [];
-  const targetFolder = path.join(target, path.basename(source));
-  if (!fs.existsSync(targetFolder)) {
-    fs.mkdirSync(targetFolder);
+  const targetFolder = node_path.join(target, node_path.basename(source));
+  if (!node_fs.existsSync(targetFolder)) {
+    node_fs.mkdirSync(targetFolder);
   }
-  if (fs.lstatSync(source).isDirectory()) {
-    files = fs.readdirSync(source);
+  if (node_fs.lstatSync(source).isDirectory()) {
+    files = node_fs.readdirSync(source);
     for (const file of files) {
-      const curSource = path.join(source, file);
-      if (fs.lstatSync(curSource).isDirectory()) {
+      const curSource = node_path.join(source, file);
+      if (node_fs.lstatSync(curSource).isDirectory()) {
         copyFolderRecursiveSync(curSource, targetFolder);
       } else {
         copyFileSync(curSource, targetFolder);
@@ -44,8 +44,8 @@ function copyFolderRecursiveSync(source, target) {
   }
 }
 const copyAssets = (assetDir, assets) => {
-  if (!fs.existsSync(assetDir)) {
-    fs.mkdirSync(assetDir, { recursive: true });
+  if (!node_fs.existsSync(assetDir)) {
+    node_fs.mkdirSync(assetDir, { recursive: true });
   }
   copyFolderRecursiveSync(assets, assetDir);
 };

package/tools/copy-assets.js

@@ -1,5 +1,5 @@
-import { existsSync, mkdirSync, lstatSync, readdirSync, copyFileSync as copyFileSync$1 } from 'fs';
-import { join, basename, extname } from 'path';
+import { existsSync, mkdirSync, lstatSync, readdirSync, copyFileSync as copyFileSync$1 } from 'node:fs';
+import { join, basename, extname } from 'node:path';
 
 const fileExtensionWhitelist = [
   ".woff2",

package/tools/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const tailwindConfig = require('./tailwind-config-BIErjaAT.cjs');
+const tailwindConfig = require('./tailwind-config-DoMZEvsr.cjs');
 const assets_index = require('./assets/index.cjs');
 const cn = require('./cn.cjs');
 const assets_fonts_index = require('./assets/fonts/index.cjs');

package/tools/index.js

@@ -1,4 +1,4 @@
-export { h as hslColorMap } from './tailwind-config-Ch2-b3Be.js';
+export { h as hslColorMap } from './tailwind-config-DVTyRd7x.js';
 export { assets } from './assets/index.js';
 export { cn } from './cn.js';
 export { fonts } from './assets/fonts/index.js';

package/tools/{tailwind-config-Ch2-b3Be.js → tailwind-config-DVTyRd7x.js}

@@ -1377,5 +1377,68 @@ const grey2 = splitColor(
   8,
   Object.keys(colorPalette.grey).length
 );
+const proseSpacing = {
+  // Paragraphs
+  p: {
+    marginTop: "0.5em",
+    marginBottom: "0.5em",
+    lineHeight: "1.5"
+    // slightly tighter
+  },
+  // Horizontal rule
+  hr: { marginTop: "2em", marginBottom: "2em" },
+  // Headings
+  h1: { marginTop: "0.75em", marginBottom: "0.5em", lineHeight: "1.2" },
+  h2: { marginTop: "0.65em", marginBottom: "0.45em", lineHeight: "1.25" },
+  h3: { marginTop: "0.6em", marginBottom: "0.4em", lineHeight: "1.3" },
+  h4: { marginTop: "0.5em", marginBottom: "0.35em", lineHeight: "1.35" },
+  h5: { marginTop: "0.45em", marginBottom: "0.3em", lineHeight: "1.4" },
+  h6: { marginTop: "0.4em", marginBottom: "0.25em", lineHeight: "1.45" },
+  // Lists
+  ul: {
+    marginTop: "0.5em",
+    marginBottom: "0.5em",
+    paddingLeft: "1.25em"
+  },
+  ol: {
+    marginTop: "0.5em",
+    marginBottom: "0.5em",
+    paddingLeft: "1.25em"
+  },
+  "ul ul, ul ol, ol ul, ol ol": {
+    marginTop: "0.25em",
+    marginBottom: "0.25em"
+  },
+  li: {
+    marginTop: "0.25em",
+    marginBottom: "0.25em"
+  },
+  // Blockquotes
+  blockquote: {
+    marginTop: "0.5em",
+    marginBottom: "0.5em",
+    paddingLeft: "1em",
+    borderLeftWidth: "0.25rem",
+    fontStyle: "italic",
+    color: "inherit"
+  },
+  // Links (restore default link look)
+  a: {
+    color: "var(--tw-prose-links)",
+    textDecoration: "underline",
+    fontWeight: "500",
+    "&:hover": {
+      color: "var(--tw-prose-links-hover, var(--tw-prose-links))",
+      textDecoration: "none"
+    }
+  },
+  // Code blocks
+  pre: {
+    marginTop: "0.5em",
+    marginBottom: "0.5em",
+    lineHeight: "1.45"
+  }
+};
+const proseVariants = ["sm", "base", "lg", "xl"];
 
-export { heights as a, fontSizes as b, boxShadows as c, borderRadius as d, colorPalette as e, fontWeights as f, spacing as g, hslColorMap as h, neutral2 as i, neutral3 as j, grey1 as k, lineHeights as l, grey2 as m, neutral1 as n, scales as s };
+export { heights as a, fontSizes as b, boxShadows as c, borderRadius as d, colorPalette as e, fontWeights as f, spacing as g, hslColorMap as h, neutral2 as i, neutral3 as j, grey1 as k, lineHeights as l, grey2 as m, neutral1 as n, proseVariants as o, proseSpacing as p, scales as s };

package/tools/{tailwind-config-BIErjaAT.cjs → tailwind-config-DoMZEvsr.cjs}

@@ -1379,6 +1379,69 @@ const grey2 = splitColor(
   8,
   Object.keys(colorPalette.grey).length
 );
+const proseSpacing = {
+  // Paragraphs
+  p: {
+    marginTop: "0.5em",
+    marginBottom: "0.5em",
+    lineHeight: "1.5"
+    // slightly tighter
+  },
+  // Horizontal rule
+  hr: { marginTop: "2em", marginBottom: "2em" },
+  // Headings
+  h1: { marginTop: "0.75em", marginBottom: "0.5em", lineHeight: "1.2" },
+  h2: { marginTop: "0.65em", marginBottom: "0.45em", lineHeight: "1.25" },
+  h3: { marginTop: "0.6em", marginBottom: "0.4em", lineHeight: "1.3" },
+  h4: { marginTop: "0.5em", marginBottom: "0.35em", lineHeight: "1.35" },
+  h5: { marginTop: "0.45em", marginBottom: "0.3em", lineHeight: "1.4" },
+  h6: { marginTop: "0.4em", marginBottom: "0.25em", lineHeight: "1.45" },
+  // Lists
+  ul: {
+    marginTop: "0.5em",
+    marginBottom: "0.5em",
+    paddingLeft: "1.25em"
+  },
+  ol: {
+    marginTop: "0.5em",
+    marginBottom: "0.5em",
+    paddingLeft: "1.25em"
+  },
+  "ul ul, ul ol, ol ul, ol ol": {
+    marginTop: "0.25em",
+    marginBottom: "0.25em"
+  },
+  li: {
+    marginTop: "0.25em",
+    marginBottom: "0.25em"
+  },
+  // Blockquotes
+  blockquote: {
+    marginTop: "0.5em",
+    marginBottom: "0.5em",
+    paddingLeft: "1em",
+    borderLeftWidth: "0.25rem",
+    fontStyle: "italic",
+    color: "inherit"
+  },
+  // Links (restore default link look)
+  a: {
+    color: "var(--tw-prose-links)",
+    textDecoration: "underline",
+    fontWeight: "500",
+    "&:hover": {
+      color: "var(--tw-prose-links-hover, var(--tw-prose-links))",
+      textDecoration: "none"
+    }
+  },
+  // Code blocks
+  pre: {
+    marginTop: "0.5em",
+    marginBottom: "0.5em",
+    lineHeight: "1.45"
+  }
+};
+const proseVariants = ["sm", "base", "lg", "xl"];
 
 exports.borderRadius = borderRadius;
 exports.boxShadows = boxShadows;
@@ -1393,5 +1456,7 @@ exports.lineHeights = lineHeights;
 exports.neutral1 = neutral1;
 exports.neutral2 = neutral2;
 exports.neutral3 = neutral3;
+exports.proseSpacing = proseSpacing;
+exports.proseVariants = proseVariants;
 exports.scales = scales;
 exports.spacing = spacing;