@versini/ui-styles 5.0.7 → 6.0.1
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.
- package/README.md +72 -1
- package/dist/index.js +7 -7
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -1,3 +1,74 @@
|
|
|
1
1
|
# @versini/ui-styles
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](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
|
|
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[
|
|
6748
|
+
"action-dark": C.slate[600],
|
|
6749
6749
|
"action-dark-hover": C.slate[700],
|
|
6750
|
-
"action-dark-active": C.slate[
|
|
6751
|
-
"action-light": C.
|
|
6752
|
-
"action-light-hover": C.
|
|
6753
|
-
"action-light-active": C.
|
|
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": "
|
|
3
|
+
"version": "6.0.1",
|
|
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.
|
|
41
|
-
"tailwindcss": "4.1.
|
|
41
|
+
"fs-extra": "11.3.1",
|
|
42
|
+
"tailwindcss": "4.1.12"
|
|
42
43
|
},
|
|
43
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "a2a11904039a5bc55ff17a954e4a16073abbe0bf"
|
|
44
45
|
}
|