npm - @idds/styles - Versions diffs - 1.6.13 → 1.6.14 - Mend

@idds/styles 1.6.13 → 1.6.14

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

package/README.md +20 -142
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -2,7 +2,7 @@
 Shared CSS styles and color tokens for INA Digital Design System.
-This package contains all the CSS files used by both `@idds/react` and `@idds/vue` packages. All styles are built from scratch using pure CSS (not dependent on Tailwind CSS classes) and are optimized and bundled using PostCSS (autoprefixer, cssnano, postcss-import) and published from the `dist/` folder.
+This package contains all the CSS files used by the `@idds/react`, `@idds/vue`, and `@idds/js` packages. All styles are built from scratch using pure CSS (not dependent on Tailwind CSS classes) and are optimized and bundled using PostCSS (autoprefixer, cssnano, postcss-import) and published from the `dist/` folder.
 ## Installation
@@ -54,26 +54,21 @@ This will import:
 ### Using CDN
-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.
+You can use `@idds/styles` directly via CDN without installing it as a package. This is useful for quick HTML prototyping.
 #### Complete Bundle (Recommended)
-Include the complete bundle which contains all components, base styles, colors, and reset:
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>My App</title>
-    <!-- INA Digital Design System Styles -->
+    <!-- Use unpkg -->
     <link
       rel="stylesheet"
       href="https://unpkg.com/@idds/styles@latest/dist/index.min.css"
     />
     <!-- Or use jsDelivr -->
     <link
       rel="stylesheet"
@@ -82,15 +77,13 @@ Include the complete bundle which contains all components, base styles, colors,
   </head>
   <body>
     <!-- Your HTML content using INA Digital Design System classes -->
-    <div class="ina-button ina-button--primary">Button</div>
+    <button class="ina-button ina-button--primary">Button</button>
   </body>
 </html>
 ```
 #### Base Styles Only
-If you only need base styles (colors and reset) without components:
 ```html
 <head>
   <!-- Base styles only (colors + reset) -->
@@ -106,63 +99,18 @@ If you only need base styles (colors and reset) without components:
 For production, it's recommended to pin to a specific version instead of `@latest`:
 ```html
-<!-- Using unpkg -->
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/@idds/styles@1.2.12/dist/index.min.css"
-/>
-<!-- Using jsDelivr -->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@idds/styles@1.2.12/dist/index.min.css"
-/>
-```
-#### Available CDN Providers
-- **unpkg**: `https://unpkg.com/@idds/styles@[version]/dist/[file]`
-- **jsDelivr**: `https://cdn.jsdelivr.net/npm/@idds/styles@[version]/dist/[file]`
-**Available files:**
-- `index.css` / `index.min.css` - Complete bundle (all components + base)
-- `base.css` / `base.min.css` - Base styles only (colors + reset)
-- `tailwind/css/[theme].css` / `tailwind/css/[theme].min.css` - Tailwind CSS v4 themes
-**Example CDN URLs:**
-```html
-<!-- Complete bundle (minified) -->
-<link
-  href="https://unpkg.com/@idds/styles@1.2.12/dist/index.min.css"
-  rel="stylesheet"
-/>
-<!-- Base styles only (minified) -->
-<link
-  href="https://unpkg.com/@idds/styles@1.2.12/dist/base.min.css"
-  rel="stylesheet"
-/>
-<!-- Tailwind theme (minified) -->
+<!-- Example using 1.6.13 -->
 <link
-  href="https://unpkg.com/@idds/styles@1.2.12/dist/tailwind/css/idds.min.css"
-  rel="stylesheet"
-/>
-<link
-  href="https://unpkg.com/@idds/styles@1.2.12/dist/tailwind/css/bgn.min.css"
   rel="stylesheet"
+  href="https://unpkg.com/@idds/styles@1.6.13/dist/index.min.css"
 />
 ```
-> **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.
 ## Structure
 The package is published from the `dist/` folder with the following structure:
-```
+```text
 @idds/styles/
 ├── index.css              # Complete bundle (all components + base)
 ├── index.min.css          # Minified complete bundle
@@ -174,31 +122,17 @@ The package is published from the `dist/` folder with the following structure:
     │   ├── idds.min.css   # Minified
     │   ├── bgn.css        # BGN brand theme
     │   ├── bgn.min.css    # Minified
-    │   ├── inagov.css     # INAGov brand theme
-    │   ├── inaku.css      # INAKu brand theme
-    │   ├── inapas.css     # INAPas brand theme
-    │   ├── bkn.css        # BKN brand theme
-    │   ├── lan.css        # LAN brand theme
-    │   ├── panrb.css      # panrb brand theme
-    │   └── ...            # (with .min.css versions)
-    └── ts/                 # Tailwind CSS v3 TypeScript tokens
+    │   └── ...            # and other brands (with .min.css versions)
+    └── ts/                # Tailwind CSS v3 TypeScript tokens
         ├── default.ts
         ├── idds.ts
         ├── bgn.ts
-        ├── inagov.ts
-        ├── inaku.ts
-        ├── inapas.ts
-        ├── bkn.ts
-        ├── lan.ts
-        ├── panrb.ts
-        └── ...             # Brand-specific tokens
+        └── ...            # and other brands
 ```
-> **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.
 ## Available Components
-This package includes CSS for all INA Digital Design System components:
+This package includes CSS for all INA Digital Design System components deployed across React, Vue, and Vanilla JS:
 - Accordion, AccordionCard, AccordionGroup, ActionDropdown, Alert, Avatar, Badge
 - BottomSheet, Breadcrumb, Button, ButtonGroup, Card, Checkbox, Chip, Collapse
@@ -207,100 +141,44 @@ This package includes CSS for all INA Digital Design System components:
 - Pagination, PasswordInput, PhoneInput, ProgressBar, RadioInput, SelectDropdown
 - SingleFileUpload, Skeleton, Spinner, Stepper, TabHorizontal, TabVertical
 - Table, TableProgressBar, TextArea, TextField, ThemeToggle, TimePicker
-- Toast, Toggle, Tooltip, YearPicker, and more...
+- Toast, Toggle, Tooltip, YearPicker, and more.
 ## Tailwind CSS Integration (Optional)
-This package provides optional Tailwind CSS utilities for both Tailwind v3 and v4. These are **optional** and only needed if you want to use INA Digital color tokens with Tailwind utility classes in your project.
+This package provides **optional** Tailwind CSS utilities if you explicitly want to use INA Digital color tokens alongside Tailwind classes.
 ### Tailwind CSS v3
-For Tailwind v3, use the TypeScript token files:
+For Tailwind v3, import the TypeScript tokens:
 ```js
 // tailwind.config.js
 import iddsTokens from '@idds/styles/tailwind/ts/idds';
-import bgnTokens from '@idds/styles/tailwind/ts/bgn'; // Optional: brand theme
 export default {
   theme: {
     extend: {
       colors: {
         ...iddsTokens,
-        ...bgnTokens, // Optional: extend with brand colors
       },
     },
   },
 };
 ```
-Then you can use classes like:
-- `text-neutral-500`
-- `bg-blue-500`
-- `text-guide-500` (which uses `--ina-blue-500` = `#0968f6`)
-**Available brand tokens:**
-- `@idds/styles/tailwind/ts/default` - Default tokens
-- `@idds/styles/tailwind/ts/idds` - IDDS tokens
-- `@idds/styles/tailwind/ts/inagov` - INAGov brand
-- `@idds/styles/tailwind/ts/inaku` - INAKu brand
-- `@idds/styles/tailwind/ts/inapas` - INAPas brand
-- `@idds/styles/tailwind/ts/bgn` - BGN brand
-- `@idds/styles/tailwind/ts/bkn` - BKN brand
-- `@idds/styles/tailwind/ts/lan` - LAN brand
-- `@idds/styles/tailwind/ts/panrb` - panrb brand
 ### Tailwind CSS v4
-For Tailwind v4, use the CSS files with `@theme` syntax:
+For Tailwind v4, use the CSS files with `@import` configuration inside your entry stylesheet:
 ```css
-/* your main CSS file */
+/* src/index.css */
+@import 'tailwindcss';
 @import '@idds/styles/tailwind/css/idds.css';
-@import '@idds/styles/tailwind/css/bgn.css'; /* Optional: brand theme */
-```
-Or use minified versions for production:
-```css
-@import '@idds/styles/tailwind/css/idds.min.css';
-@import '@idds/styles/tailwind/css/bgn.min.css';
-```
-Then you can use classes like:
-- `text-neutral-500`
-- `bg-blue-500`
-- `text-guide-500` (which uses `--ina-blue-500` = `#0968f6`)
-**Available brand themes (with .min.css versions):**
-- `@idds/styles/tailwind/css/idds.css` - Default theme
-- `@idds/styles/tailwind/css/inagov.css` - INAGov brand
-- `@idds/styles/tailwind/css/inaku.css` - INAKu brand
-- `@idds/styles/tailwind/css/inapas.css` - INAPas brand
-- `@idds/styles/tailwind/css/bgn.css` - BGN brand
-- `@idds/styles/tailwind/css/bkn.css` - BKN brand
-- `@idds/styles/tailwind/css/lan.css` - LAN brand
-- `@idds/styles/tailwind/css/panrb.css` - panrb brand
-### Example Usage
-```html
-<!-- Using Tailwind classes with INA Digital colors -->
-<div class="bg-blue-500 text-white p-4">
-  <p class="text-guide-500">This text uses guide-500 color (#0968f6)</p>
-  <p class="text-neutral-500">This text uses neutral-500 color</p>
-</div>
 ```
-## Important Notes
+## Theme Mode Support
-- **No Tailwind Dependency**: This package does NOT require Tailwind CSS. All styles are built from scratch using pure CSS.
-- **Tailwind Integration is Optional**: The Tailwind token files are provided as a convenience for projects that want to use INA Digital colors with Tailwind utility classes. You can use `@idds/styles` without Tailwind.
-- **Component Styles**: Component styles use BEM-like naming convention (e.g., `ina-button`, `ina-button--primary`) and are self-contained.
+Styles natively hook into `[data-theme="dark"]` and `[data-theme="light"]` attribute selectors dynamically via CSS variables mapped internally by this package.
 ## License

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@idds/styles",
-  "version": "1.6.13",
+  "version": "1.6.14",
   "description": "Shared CSS styles and colors for INA Digital Design System",
   "type": "module",
   "main": "./dist/index.css",