@idds/styles 1.2.12 → 1.2.13

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 (2) hide show
  1. package/README.md +178 -42
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Shared CSS styles and colors for INA Digital Design System.
4
4
 
5
- This package contains all the CSS files used by both `@idds/react` and `@idds/vue` packages.
5
+ This package contains all the CSS files used by both `@idds/react` and `@idds/vue` packages. All styles are optimized and bundled using PostCSS (autoprefixer, cssnano, postcss-import) and published from the `dist/` folder.
6
6
 
7
7
  ## Installation
8
8
 
@@ -12,51 +12,177 @@ npm install @idds/styles
12
12
 
13
13
  ## Usage
14
14
 
15
- ### Import all styles
15
+ ### Import complete bundle (Recommended)
16
+
17
+ Import the main entry point which includes all components, base styles, colors, and reset:
16
18
 
17
19
  ```css
20
+ /* Development */
18
21
  @import '@idds/styles';
22
+
23
+ /* Or use the explicit path */
24
+ @import '@idds/styles/index';
25
+
26
+ /* Production (minified) */
27
+ @import '@idds/styles/index.min';
19
28
  ```
20
29
 
21
30
  This will import:
22
31
 
32
+ - All component styles (Accordion, Button, Modal, Table, etc.)
33
+ - Base styles (colors, reset CSS)
23
34
  - All color tokens and brand themes
24
- - Reset CSS
25
35
 
26
- ### Import colors only
36
+ ### Import base styles only
37
+
38
+ If you only need base styles (colors and reset) without components:
27
39
 
28
40
  ```css
29
- @import '@idds/styles/colors';
41
+ /* Development */
42
+ @import '@idds/styles/base';
43
+
44
+ /* Production (minified) */
45
+ @import '@idds/styles/base.min';
30
46
  ```
31
47
 
32
- ### Import specific component styles
48
+ This will import:
33
49
 
34
- ```css
35
- @import '@idds/styles/components/button.css';
36
- @import '@idds/styles/components/accordion.css';
37
- @import '@idds/styles/components/modal.css';
50
+ - All color tokens and brand themes
51
+ - CSS reset styles
52
+
53
+ > **Note:** Individual component CSS files are no longer available as separate imports. All component styles are bundled into `index.css` for optimal performance. If you're using `@idds/react` or `@idds/vue`, the components already include the necessary styles via the main bundle.
54
+
55
+ ### Using CDN
56
+
57
+ You can use `@idds/styles` directly via CDN without installing it as a package. This is useful for quick prototypes, static HTML pages, or when you don't want to set up a build process.
58
+
59
+ #### Complete Bundle (Recommended)
60
+
61
+ Include the complete bundle which contains all components, base styles, colors, and reset:
62
+
63
+ ```html
64
+ <!DOCTYPE html>
65
+ <html lang="en">
66
+ <head>
67
+ <meta charset="UTF-8" />
68
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
69
+ <title>My App</title>
70
+
71
+ <!-- INA Digital Design System Styles -->
72
+ <link
73
+ rel="stylesheet"
74
+ href="https://unpkg.com/@idds/styles@latest/dist/index.min.css"
75
+ />
76
+
77
+ <!-- Or use jsDelivr -->
78
+ <link
79
+ rel="stylesheet"
80
+ href="https://cdn.jsdelivr.net/npm/@idds/styles@latest/dist/index.min.css"
81
+ />
82
+ </head>
83
+ <body>
84
+ <!-- Your HTML content using INA Digital Design System classes -->
85
+ <div class="ina-button ina-button--primary">Button</div>
86
+ </body>
87
+ </html>
38
88
  ```
39
89
 
40
- ### Import specific brand colors
90
+ #### Base Styles Only
41
91
 
42
- ```css
43
- @import '@idds/styles/colors/brands/inagov.css';
44
- @import '@idds/styles/colors/brands/inaku.css';
92
+ If you only need base styles (colors and reset) without components:
93
+
94
+ ```html
95
+ <head>
96
+ <!-- Base styles only (colors + reset) -->
97
+ <link
98
+ rel="stylesheet"
99
+ href="https://unpkg.com/@idds/styles@latest/dist/base.min.css"
100
+ />
101
+ </head>
45
102
  ```
46
103
 
104
+ #### Using Specific Version
105
+
106
+ For production, it's recommended to pin to a specific version instead of `@latest`:
107
+
108
+ ```html
109
+ <!-- Using unpkg -->
110
+ <link
111
+ rel="stylesheet"
112
+ href="https://unpkg.com/@idds/styles@1.2.12/dist/index.min.css"
113
+ />
114
+
115
+ <!-- Using jsDelivr -->
116
+ <link
117
+ rel="stylesheet"
118
+ href="https://cdn.jsdelivr.net/npm/@idds/styles@1.2.12/dist/index.min.css"
119
+ />
120
+ ```
121
+
122
+ #### Available CDN Providers
123
+
124
+ - **unpkg**: `https://unpkg.com/@idds/styles@[version]/dist/[file]`
125
+ - **jsDelivr**: `https://cdn.jsdelivr.net/npm/@idds/styles@[version]/dist/[file]`
126
+
127
+ **Available files:**
128
+
129
+ - `index.css` / `index.min.css` - Complete bundle (all components + base)
130
+ - `base.css` / `base.min.css` - Base styles only (colors + reset)
131
+ - `tailwind/css/[theme].css` / `tailwind/css/[theme].min.css` - Tailwind CSS v4 themes
132
+
133
+ **Example CDN URLs:**
134
+
135
+ ```html
136
+ <!-- Complete bundle (minified) -->
137
+ <link
138
+ href="https://unpkg.com/@idds/styles@1.2.12/dist/index.min.css"
139
+ rel="stylesheet"
140
+ />
141
+
142
+ <!-- Base styles only (minified) -->
143
+ <link
144
+ href="https://unpkg.com/@idds/styles@1.2.12/dist/base.min.css"
145
+ rel="stylesheet"
146
+ />
147
+
148
+ <!-- Tailwind theme (minified) -->
149
+ <link
150
+ href="https://unpkg.com/@idds/styles@1.2.12/dist/tailwind/css/idds.min.css"
151
+ rel="stylesheet"
152
+ />
153
+ <link
154
+ href="https://unpkg.com/@idds/styles@1.2.12/dist/tailwind/css/pan-rb.min.css"
155
+ rel="stylesheet"
156
+ />
157
+ ```
158
+
159
+ > **Reference:** Similar to how [Vuetify provides CDN usage](https://vuetifyjs.com/en/getting-started/installation/#using-cdn), `@idds/styles` bundles all components and styles into a single CSS file for easy CDN consumption.
160
+
47
161
  ## Structure
48
162
 
163
+ The package is published from the `dist/` folder with the following structure:
164
+
49
165
  ```
50
166
  @idds/styles/
51
- ├── colors/
52
- │ ├── brands/ # Brand-specific color themes
53
- │ ├── primitives/ # Base color tokens
54
- │ ├── product/ # Product color tokens
55
- │ └── utilities/ # Utility color tokens
56
- └── components/
57
- └── [component].css # Component-specific styles
167
+ ├── index.css # Complete bundle (all components + base)
168
+ ├── index.min.css # Minified complete bundle
169
+ ├── base.css # Base styles only (colors + reset)
170
+ ├── base.min.css # Minified base styles
171
+ └── tailwind/
172
+ ├── css/ # Tailwind CSS v4 theme files
173
+ │ ├── idds.css # Default theme
174
+ │ ├── idds.min.css # Minified
175
+ │ ├── pan-rb.css # Brand themes
176
+ │ └── ... # (with .min.css versions)
177
+ └── ts/ # Tailwind CSS v3 TypeScript tokens
178
+ ├── default.ts
179
+ ├── idds.ts
180
+ ├── pan-rb.ts
181
+ └── ... # Brand-specific tokens
58
182
  ```
59
183
 
184
+ > **Note:** The `colors/`, `components/`, and `reset/` folders are not published to npm. They are bundled into `base.css` and `index.css` during the build process for optimal performance.
185
+
60
186
  ## Available Components
61
187
 
62
188
  This package includes CSS for all INA Digital Design System components:
@@ -75,15 +201,15 @@ For Tailwind v3, use the TypeScript token files:
75
201
 
76
202
  ```js
77
203
  // tailwind.config.js
78
- import inaColorTokens from '@idds/styles/tailwind/ts/ina-color-token';
79
- import inagovTokens from '@idds/styles/tailwind/ts/inagov'; // Optional: brand theme
204
+ import iddsTokens from '@idds/styles/tailwind/ts/idds';
205
+ import panRbTokens from '@idds/styles/tailwind/ts/pan-rb'; // Optional: brand theme
80
206
 
81
207
  export default {
82
208
  theme: {
83
209
  extend: {
84
210
  colors: {
85
- ...inaColorTokens,
86
- ...inagovTokens, // Optional: extend with brand colors
211
+ ...iddsTokens,
212
+ ...panRbTokens, // Optional: extend with brand colors
87
213
  },
88
214
  },
89
215
  },
@@ -98,13 +224,15 @@ Then you can use classes like:
98
224
 
99
225
  **Available brand tokens:**
100
226
 
101
- - `@idds/styles/tailwind/ts/inagov`
102
- - `@idds/styles/tailwind/ts/inaku`
103
- - `@idds/styles/tailwind/ts/inapas`
104
- - `@idds/styles/tailwind/ts/bgn`
105
- - `@idds/styles/tailwind/ts/bkn`
106
- - `@idds/styles/tailwind/ts/lan`
107
- - `@idds/styles/tailwind/ts/panrb`
227
+ - `@idds/styles/tailwind/ts/default` - Default tokens
228
+ - `@idds/styles/tailwind/ts/idds` - IDDS tokens
229
+ - `@idds/styles/tailwind/ts/inagov` - INAGov brand
230
+ - `@idds/styles/tailwind/ts/inaku` - INAKu brand
231
+ - `@idds/styles/tailwind/ts/inapas` - INAPas brand
232
+ - `@idds/styles/tailwind/ts/bgn` - BGN brand
233
+ - `@idds/styles/tailwind/ts/bkn` - BKN brand
234
+ - `@idds/styles/tailwind/ts/lan` - LAN brand
235
+ - `@idds/styles/tailwind/ts/pan-rb` - Pan-RB brand
108
236
 
109
237
  ### Tailwind CSS v4
110
238
 
@@ -112,8 +240,15 @@ For Tailwind v4, use the CSS files with `@theme` syntax:
112
240
 
113
241
  ```css
114
242
  /* your main CSS file */
115
- @import '@idds/styles/tailwind/css/inadigital-color-token.css';
116
- @import '@idds/styles/tailwind/css/inagov-color-token.css'; /* Optional: brand theme */
243
+ @import '@idds/styles/tailwind/css/idds.css';
244
+ @import '@idds/styles/tailwind/css/pan-rb.css'; /* Optional: brand theme */
245
+ ```
246
+
247
+ Or use minified versions for production:
248
+
249
+ ```css
250
+ @import '@idds/styles/tailwind/css/idds.min.css';
251
+ @import '@idds/styles/tailwind/css/pan-rb.min.css';
117
252
  ```
118
253
 
119
254
  Then you can use classes like:
@@ -122,15 +257,16 @@ Then you can use classes like:
122
257
  - `bg-blue-500`
123
258
  - `text-guide-500` (which uses `--ina-blue-500` = `#0968f6`)
124
259
 
125
- **Available brand tokens:**
260
+ **Available brand themes (with .min.css versions):**
126
261
 
127
- - `@idds/styles/tailwind/css/inagov-color-token.css`
128
- - `@idds/styles/tailwind/css/inaku-color-token.css`
129
- - `@idds/styles/tailwind/css/inapas-color-token.css`
130
- - `@idds/styles/tailwind/css/bgn-color-token.css`
131
- - `@idds/styles/tailwind/css/bkn-color-token.css`
132
- - `@idds/styles/tailwind/css/lan-color-token.css`
133
- - `@idds/styles/tailwind/css/pan-rb-color-token.css`
262
+ - `@idds/styles/tailwind/css/idds.css` - Default theme
263
+ - `@idds/styles/tailwind/css/inagov.css` - INAGov brand
264
+ - `@idds/styles/tailwind/css/inaku.css` - INAKu brand
265
+ - `@idds/styles/tailwind/css/inapas.css` - INAPas brand
266
+ - `@idds/styles/tailwind/css/bgn.css` - BGN brand
267
+ - `@idds/styles/tailwind/css/bkn.css` - BKN brand
268
+ - `@idds/styles/tailwind/css/lan.css` - LAN brand
269
+ - `@idds/styles/tailwind/css/pan-rb.css` - Pan-RB brand
134
270
 
135
271
  ### Example Usage
136
272
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/styles",
3
- "version": "1.2.12",
3
+ "version": "1.2.13",
4
4
  "description": "Shared CSS styles and colors for INA Digital Design System",
5
5
  "type": "module",
6
6
  "main": "./dist/index.css",