@versini/ui-styles 5.0.7 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +72 -1
  2. package/dist/index.js +7 -7
  3. package/package.json +4 -3
package/README.md CHANGED
@@ -1,3 +1,74 @@
1
1
  # @versini/ui-styles
2
2
 
3
- Required package to handle styles via TailwindCSS, including Typography.
3
+ [![npm version](https://img.shields.io/npm/v/@versini/ui-styles?style=flat-square)](https://www.npmjs.com/package/@versini/ui-styles)
4
+
5
+ > TailwindCSS configuration and styles for Versini UI Components.
6
+
7
+ This package provides the core TailwindCSS configuration, custom styles, and design tokens that power all Versini UI components. It includes the TailwindCSS plugin required for proper component styling.
8
+
9
+ ## Table of Contents
10
+
11
+ - [Features](#features)
12
+ - [Installation](#installation)
13
+ - [Usage](#usage)
14
+
15
+ ## Features
16
+
17
+ - **🎨 Design System**: Consistent design tokens and color palette
18
+ - **🔧 TailwindCSS Plugin**: Ready-to-use plugin for component styles
19
+ - **🎭 Theme Support**: Built-in light, dark, and system theme support
20
+ - **📐 Typography**: Optimized typography scales and spacing
21
+ - **🌈 Color Tokens**: Semantic color tokens for consistent theming
22
+
23
+ ## Installation
24
+
25
+ ```bash
26
+ npm install @versini/ui-styles
27
+ ```
28
+
29
+ ## Usage
30
+
31
+ ### TailwindCSS Configuration
32
+
33
+ Add the UI Styles plugin to your `tailwind.config.js`:
34
+
35
+ ```js
36
+ module.exports = {
37
+ content: [
38
+ "./src/**/*.{js,ts,jsx,tsx}",
39
+ "./node_modules/@versini/ui-*/**/*.js"
40
+ ],
41
+ plugins: [require("@versini/ui-styles/plugin")]
42
+ };
43
+ ```
44
+
45
+ ### With CSS Import
46
+
47
+ Import the base styles in your CSS file:
48
+
49
+ ```css
50
+ @import "@versini/ui-styles/dist/styles.css";
51
+ ```
52
+
53
+ ### Complete Setup
54
+
55
+ ```js
56
+ // tailwind.config.js
57
+ module.exports = {
58
+ content: [
59
+ "./src/**/*.{js,ts,jsx,tsx}",
60
+ "./node_modules/@versini/ui-*/**/*.js"
61
+ ],
62
+ darkMode: "selector", // or 'media' for automatic
63
+ plugins: [require("@versini/ui-styles/plugin")]
64
+ };
65
+ ```
66
+
67
+ ```css
68
+ /* styles.css */
69
+ @tailwind base;
70
+ @tailwind components;
71
+ @tailwind utilities;
72
+
73
+ @import "@versini/ui-styles/dist/styles.css";
74
+ ```
package/dist/index.js CHANGED
@@ -118,7 +118,7 @@ function Qa() {
118
118
  };
119
119
  }
120
120
  function Pe(c, v) {
121
- return c == null ? void 0 : c[v];
121
+ return c?.[v];
122
122
  }
123
123
  function Ee(c, v) {
124
124
  return function(k) {
@@ -6739,18 +6739,18 @@ te(Z0);
6739
6739
  te(J0);
6740
6740
  te(tu);
6741
6741
  te(iu);
6742
- var C = { slate: { 100: "oklch(96.8% 0.007 247.896)", 200: "oklch(92.9% 0.013 255.508)", 300: "oklch(86.9% 0.022 252.894)", 400: "oklch(70.4% 0.04 256.788)", 500: "oklch(55.4% 0.046 257.417)", 600: "oklch(44.6% 0.043 257.281)", 700: "oklch(37.2% 0.044 257.287)", 900: "oklch(20.8% 0.042 265.755)" }, gray: { 100: "oklch(96.7% 0.003 264.542)", 200: "oklch(92.8% 0.006 264.531)", 300: "oklch(87.2% 0.01 258.338)", 700: "oklch(37.3% 0.034 259.733)", 800: "oklch(27.8% 0.033 256.848)", 900: "oklch(21% 0.034 264.665)", 950: "oklch(13% 0.028 261.692)" }, red: { 200: "oklch(88.5% 0.062 18.334)", 300: "oklch(80.8% 0.114 19.571)", 400: "oklch(70.4% 0.191 22.216)", 500: "oklch(63.7% 0.237 25.331)", 600: "oklch(57.7% 0.245 27.325)", 700: "oklch(50.5% 0.213 27.518)", 800: "oklch(44.4% 0.177 26.899)", 900: "oklch(39.6% 0.141 25.723)" }, orange: { 200: "oklch(90.1% 0.076 70.697)", 400: "oklch(75% 0.183 55.934)", 800: "oklch(47% 0.157 37.304)" }, green: { 200: "oklch(92.5% 0.084 155.995)", 300: "oklch(87.1% 0.15 154.449)", 400: "oklch(79.2% 0.209 151.711)", 500: "oklch(72.3% 0.219 149.579)", 600: "oklch(62.7% 0.194 149.214)", 700: "oklch(52.7% 0.154 150.069)", 800: "oklch(44.8% 0.119 151.328)" }, violet: { 200: "oklch(89.4% 0.057 293.283)", 400: "oklch(70.2% 0.183 293.541)", 800: "oklch(43.2% 0.232 292.759)" } };
6742
+ var C = { slate: { 100: "oklch(96.8% 0.007 247.896)", 200: "oklch(92.9% 0.013 255.508)", 300: "oklch(86.9% 0.022 252.894)", 400: "oklch(70.4% 0.04 256.788)", 500: "oklch(55.4% 0.046 257.417)", 600: "oklch(44.6% 0.043 257.281)", 700: "oklch(37.2% 0.044 257.287)", 800: "oklch(27.9% 0.041 260.031)", 900: "oklch(20.8% 0.042 265.755)" }, gray: { 100: "oklch(96.7% 0.003 264.542)", 200: "oklch(92.8% 0.006 264.531)", 300: "oklch(87.2% 0.01 258.338)", 700: "oklch(37.3% 0.034 259.733)", 800: "oklch(27.8% 0.033 256.848)", 900: "oklch(21% 0.034 264.665)", 950: "oklch(13% 0.028 261.692)" }, red: { 200: "oklch(88.5% 0.062 18.334)", 300: "oklch(80.8% 0.114 19.571)", 400: "oklch(70.4% 0.191 22.216)", 500: "oklch(63.7% 0.237 25.331)", 600: "oklch(57.7% 0.245 27.325)", 700: "oklch(50.5% 0.213 27.518)", 800: "oklch(44.4% 0.177 26.899)", 900: "oklch(39.6% 0.141 25.723)" }, orange: { 200: "oklch(90.1% 0.076 70.697)", 400: "oklch(75% 0.183 55.934)", 800: "oklch(47% 0.157 37.304)" }, green: { 200: "oklch(92.5% 0.084 155.995)", 300: "oklch(87.1% 0.15 154.449)", 400: "oklch(79.2% 0.209 151.711)", 500: "oklch(72.3% 0.219 149.579)", 600: "oklch(62.7% 0.194 149.214)", 700: "oklch(52.7% 0.154 150.069)", 800: "oklch(44.8% 0.119 151.328)" }, violet: { 200: "oklch(89.4% 0.057 293.283)", 300: "oklch(81.1% 0.111 293.571)", 400: "oklch(70.2% 0.183 293.541)", 500: "oklch(60.6% 0.25 292.717)", 800: "oklch(43.2% 0.232 292.759)" } };
6743
6743
  const Yi = "#ff3f3f", V = {
6744
6744
  colors: {
6745
6745
  /**
6746
6746
  * Action tokens.
6747
6747
  */
6748
- "action-dark": C.slate[900],
6748
+ "action-dark": C.slate[600],
6749
6749
  "action-dark-hover": C.slate[700],
6750
- "action-dark-active": C.slate[600],
6751
- "action-light": C.slate[500],
6752
- "action-light-hover": C.slate[600],
6753
- "action-light-active": C.slate[700],
6750
+ "action-dark-active": C.slate[800],
6751
+ "action-light": C.violet[300],
6752
+ "action-light-hover": C.violet[400],
6753
+ "action-light-active": C.violet[500],
6754
6754
  "action-danger-dark": C.red[900],
6755
6755
  "action-danger-dark-hover": C.red[700],
6756
6756
  "action-danger-dark-active": C.red[600],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-styles",
3
- "version": "5.0.7",
3
+ "version": "6.0.0",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -28,6 +28,7 @@
28
28
  "dev:types": "tsup --watch src",
29
29
  "dev": "npm-run-all clean --parallel dev:js dev:types",
30
30
  "lint": "biome lint src",
31
+ "lint:fix": "biome check src --write --no-errors-on-unmatched",
31
32
  "prettier": "biome check --write --no-errors-on-unmatched",
32
33
  "test:coverage": "vitest run --coverage",
33
34
  "test:watch": "vitest",
@@ -37,8 +38,8 @@
37
38
  "@tailwindcss/container-queries": "0.1.1",
38
39
  "@tailwindcss/typography": "0.5.16",
39
40
  "culori": "4.0.2",
40
- "fs-extra": "11.3.0",
41
+ "fs-extra": "11.3.1",
41
42
  "tailwindcss": "4.1.11"
42
43
  },
43
- "gitHead": "097e81ba959c30dc2ee37ff9050981a02420360b"
44
+ "gitHead": "42daab1fb88c366495abbc1db78a9987de05e59b"
44
45
  }