@idds/styles 1.0.26

package/README.md

@@ -0,0 +1,147 @@
+# @idds/styles
+
+Shared CSS styles and colors for INA Digital Design System.
+
+This package contains all the CSS files used by both `@idds/react` and `@idds/vue` packages.
+
+## Installation
+
+```bash
+npm install @idds/styles
+```
+
+## Usage
+
+### Import all styles
+
+```css
+@import '@idds/styles';
+```
+
+This will import:
+
+- All color tokens and brand themes
+- Reset CSS
+
+### Import colors only
+
+```css
+@import '@idds/styles/colors';
+```
+
+### Import specific component styles
+
+```css
+@import '@idds/styles/components/button.css';
+@import '@idds/styles/components/accordion.css';
+@import '@idds/styles/components/modal.css';
+```
+
+### Import specific brand colors
+
+```css
+@import '@idds/styles/colors/brands/inagov.css';
+@import '@idds/styles/colors/brands/inaku.css';
+```
+
+## Structure
+
+```
+@idds/styles/
+├── colors/
+│   ├── brands/          # Brand-specific color themes
+│   ├── primitives/      # Base color tokens
+│   ├── product/         # Product color tokens
+│   └── utilities/       # Utility color tokens
+└── components/
+    └── [component].css  # Component-specific styles
+```
+
+## Available Components
+
+This package includes CSS for all INA Digital Design System components:
+
+- Accordion, Alert, Avatar, Badge, Button, Card, Checkbox, Chip
+- DatePicker, Dropdown, FileUpload, Modal, Pagination, Stepper
+- Table, TextField, TextArea, Toast, Tooltip, and more...
+
+## Tailwind CSS Integration
+
+This package provides Tailwind CSS utilities for both Tailwind v3 and v4.
+
+### Tailwind CSS v3
+
+For Tailwind v3, use the TypeScript token files:
+
+```js
+// tailwind.config.js
+import inaColorTokens from '@idds/styles/tailwind/ts/ina-color-token';
+import inagovTokens from '@idds/styles/tailwind/ts/inagov'; // Optional: brand theme
+
+export default {
+  theme: {
+    extend: {
+      colors: {
+        ...inaColorTokens,
+        ...inagovTokens, // 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/inagov`
+- `@idds/styles/tailwind/ts/inaku`
+- `@idds/styles/tailwind/ts/inapas`
+- `@idds/styles/tailwind/ts/bgn`
+- `@idds/styles/tailwind/ts/bkn`
+- `@idds/styles/tailwind/ts/lan`
+- `@idds/styles/tailwind/ts/panrb`
+
+### Tailwind CSS v4
+
+For Tailwind v4, use the CSS files with `@theme` syntax:
+
+```css
+/* your main CSS file */
+@import '@idds/styles/tailwind/css/inadigital-color-token.css';
+@import '@idds/styles/tailwind/css/inagov-color-token.css'; /* Optional: brand theme */
+```
+
+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/css/inagov-color-token.css`
+- `@idds/styles/tailwind/css/inaku-color-token.css`
+- `@idds/styles/tailwind/css/inapas-color-token.css`
+- `@idds/styles/tailwind/css/bgn-color-token.css`
+- `@idds/styles/tailwind/css/bkn-color-token.css`
+- `@idds/styles/tailwind/css/lan-color-token.css`
+- `@idds/styles/tailwind/css/pan-rb-color-token.css`
+
+### 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>
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@idds/styles",
+  "version": "1.0.26",
+  "description": "Shared CSS styles and colors for INA Digital Design System",
+  "type": "module",
+  "main": "./src/index.css",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.css",
+    "./colors": "./src/colors/index.css",
+    "./colors/*": "./src/colors/*.css",
+    "./components/*": "./src/components/*.css",
+    "./tailwind/ts/*": {
+      "import": "./src/tailwind/ts/*.ts",
+      "require": "./src/tailwind/ts/*.ts",
+      "types": "./src/tailwind/ts/*.ts"
+    },
+    "./tailwind/css/idds.css": "./src/tailwind/css/idds.css",
+    "./tailwind/css/pan-rb.css": "./src/tailwind/css/pan-rb.css",
+    "./tailwind/css/inagov.css": "./src/tailwind/css/inagov.css",
+    "./tailwind/css/inaku.css": "./src/tailwind/css/inaku.css",
+    "./tailwind/css/inapas.css": "./src/tailwind/css/inapas.css",
+    "./tailwind/css/bgn.css": "./src/tailwind/css/bgn.css",
+    "./tailwind/css/bkn.css": "./src/tailwind/css/bkn.css",
+    "./tailwind/css/lan.css": "./src/tailwind/css/lan.css"
+  },
+  "scripts": {
+    "prepublishOnly": "echo 'Preparing package for publish...'"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "css",
+    "styles",
+    "design-system",
+    "ina-digital",
+    "ui",
+    "components"
+  ],
+  "author": "INA Digital",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/inadigital/designsystem-advanced.git",
+    "directory": "inadigital-ui/packages/styles"
+  },
+  "bugs": {
+    "url": "https://github.com/inadigital/designsystem-advanced/issues"
+  },
+  "homepage": "https://github.com/inadigital/designsystem-advanced#readme"
+}

package/src/colors/brands/bgn.css

@@ -0,0 +1,29 @@
+/* BGN Theme - Banking & Financial Services */
+[data-brand='bgn'] {
+  /* Primary Colors - Navy Blue theme */
+  --ina-primary-50: #eff6ff;
+  --ina-primary-100: #dbeafe;
+  --ina-primary-200: #bfdbfe;
+  --ina-primary-300: #93c5fd;
+  --ina-primary-400: #60a5fa;
+  --ina-primary-500: #3b82f6;
+  --ina-primary-600: #2563eb;
+  --ina-primary-700: #1d4ed8;
+  --ina-primary-800: #1e40af;
+  --ina-primary-900: #1e3a8a;
+
+  /* Brand-specific colors */
+  --ina-bgn-brand-primary: #005494 !important;
+  --ina-bgn-stroke-primary: #ededed !important;
+  --ina-background-tertiary: #f5f5f5 !important;
+
+  /* Sentiment colors */
+  --ina-sentiment-info-400: #528aff !important;
+  --ina-sentiment-info-500: #2871ff !important;
+  --ina-sentiment-positive-500: #12b76a !important;
+  --ina-sentiment-warning-500: #f79009 !important;
+
+  /* Accent colors */
+  --ina-accent-coral-orange: #ff7b5a !important;
+  --ina-accent-yellow: #ffcb00 !important;
+}

package/src/colors/brands/bkn.css

@@ -0,0 +1,32 @@
+/* BKN Theme - Badan Kepegawaian Negara */
+[data-brand='bkn'] {
+  /* Primary Colors - Pink/Red theme */
+  --ina-primary-25: #fdf2f7;
+  --ina-primary-50: #fde6f1;
+  --ina-primary-100: #fdcde3;
+  --ina-primary-200: #fca5cb;
+  --ina-primary-300: #f96da7;
+  --ina-primary-400: #f24286;
+  --ina-primary-500: #de1d5e;
+  --ina-primary-600: #c41249;
+  --ina-primary-700: #a2123c;
+  --ina-primary-800: #871436;
+  --ina-primary-900: #53041a;
+
+  /* Secondary Colors - Blue theme */
+  --ina-secondary-25: #f2f9fd;
+  --ina-secondary-50: #e3f0fb;
+  --ina-secondary-100: #c1e3f6;
+  --ina-secondary-200: #8accef;
+  --ina-secondary-300: #4cb2e4;
+  --ina-secondary-400: #269dd8;
+  --ina-secondary-500: #177ab2;
+  --ina-secondary-600: #146190;
+  --ina-secondary-700: #145378;
+  --ina-secondary-800: #164564;
+  --ina-secondary-900: #0f2d42;
+
+  /* Interactive Colors */
+  --ina-bkn-brand-hover: #c41249 !important;
+  --ina-bkn-neutral-hover: #fafafa !important;
+}

package/src/colors/brands/inagov.css

@@ -0,0 +1,39 @@
+/* InaGov Theme - Government Services */
+[data-brand='inagov'] {
+  /* Primary Colors - Government Blue theme (Figma InaGov) */
+  --ina-primary-25: #f6f9ff;
+  --ina-primary-50: #eff5fd;
+  --ina-primary-100: #c0d7f9;
+  --ina-primary-200: #a1c4f5;
+  --ina-primary-300: #629cef;
+  --ina-primary-400: #196bcd;
+  --ina-primary-500: #0956c3;
+  --ina-primary-600: #0a489f;
+  --ina-primary-700: #083575;
+  --ina-primary-800: #022a5b;
+  --ina-primary-900: #041225;
+
+  /* Secondary Colors - Orange/Peach theme */
+  --ina-secondary-25: #ffffff;
+  --ina-secondary-50: #ffffff;
+  --ina-secondary-100: #ffffff;
+  --ina-secondary-200: #fff5ee;
+  --ina-secondary-300: #ffe8cc;
+  --ina-secondary-400: #ffd2a6;
+  --ina-secondary-500: #edb98a;
+  --ina-secondary-600: #d39663;
+  --ina-secondary-700: #cc1515;
+
+  /* Accent Colors - Orange theme (Legacy - kept for backward compatibility) */
+  --ina-accent-100: #ffffff !important;
+  --ina-accent-200: #fff5ee !important;
+  --ina-accent-300: #ffe8cc !important;
+  --ina-accent-400: #ffd2a6 !important;
+  --ina-accent-500: #edb98a !important;
+  --ina-accent-600: #d39663 !important;
+  --ina-accent-700: #cc1515 !important;
+
+  /* Interactive Colors */
+  --ina-brand-hover: #588cd7 !important;
+  --ina-neutral-hover: #edeff5 !important;
+}

package/src/colors/brands/inaku.css

@@ -0,0 +1,28 @@
+/* InaKu Theme - Citizen Services */
+[data-brand='inaku'] {
+  /* Primary Colors - Citizen Dark Blue theme (Figma InaKu) */
+  --ina-primary-25: #e8f1fc;
+  --ina-primary-50: #d9e9f9;
+  --ina-primary-100: #abd1ff;
+  --ina-primary-200: #629cef;
+  --ina-primary-300: #3a78c1;
+  --ina-primary-400: #194472;
+  --ina-primary-500: #06264d;
+  --ina-primary-600: #041d35;
+  --ina-primary-700: #020f1f;
+  --ina-primary-800: #020b17;
+  --ina-primary-900: #01080f;
+
+  /* Accent Colors - Gray Blue theme */
+  --ina-accent-100: #ffffff !important;
+  --ina-accent-200: #6a7d94 !important;
+  --ina-accent-300: #06264d !important;
+  --ina-accent-400: #051c3a !important;
+  --ina-accent-500: #031327 !important;
+  --ina-accent-600: #000000 !important;
+  --ina-accent-700: #6a7d94 !important;
+
+  /* Interactive Colors */
+  --ina-inaku-brand-hover: #b81313 !important;
+  --ina-inaku-neutral-hover: #fafafa !important;
+}

package/src/colors/brands/inapas.css

@@ -0,0 +1,28 @@
+/* InaPas Theme - Passport & Immigration Services */
+[data-brand='inapas'] {
+  /* Primary Colors - Red/Coral theme (Figma InaPas) */
+  --ina-primary-25: #fef2f2;
+  --ina-primary-50: #f9dcdc;
+  --ina-primary-100: #f9cdc7;
+  --ina-primary-200: #ffa194;
+  --ina-primary-300: #ff5f42;
+  --ina-primary-400: #e8422d;
+  --ina-primary-500: #cc1515;
+  --ina-primary-600: #a00000;
+  --ina-primary-700: #680000;
+  --ina-primary-800: #290404;
+  --ina-primary-900: #140202;
+
+  /* Accent Colors - Green theme */
+  --ina-accent-100: #f6fef9 !important;
+  --ina-accent-200: #ecfef3 !important;
+  --ina-accent-300: #d1fadf !important;
+  --ina-accent-400: #a6f4c5 !important;
+  --ina-accent-500: #12b76a !important;
+  --ina-accent-600: #039855 !important;
+  --ina-accent-700: #027a48 !important;
+
+  /* Interactive Colors */
+  --ina-inapas-brand-hover: #155eef !important;
+  --ina-inapas-neutral-hover: #f9fafb !important;
+}

package/src/colors/brands/lan.css

@@ -0,0 +1,38 @@
+/* LAN Theme - Local Area Network */
+[data-brand='lan'] {
+  /* Primary Colors - Blue theme */
+  --ina-primary-25: #f3f6fc;
+  --ina-primary-50: #e5edf9;
+  --ina-primary-100: #c6daf1;
+  --ina-primary-200: #94bde5;
+  --ina-primary-300: #5b9bd5;
+  --ina-primary-400: #3781c7;
+  --ina-primary-500: #2663a3;
+  --ina-primary-600: #1f4f85;
+  --ina-primary-700: #1e446e;
+  --ina-primary-800: #1e3a5c;
+  --ina-primary-900: #14263d;
+
+  /* Secondary Colors - Yellow/Orange theme */
+  --ina-secondary-25: #fffdeb;
+  --ina-secondary-50: #fdf9c8;
+  --ina-secondary-100: #fbf38c;
+  --ina-secondary-200: #f9e650;
+  --ina-secondary-300: #f7d628;
+  --ina-secondary-400: #f2bd1d;
+  --ina-secondary-500: #d69009;
+  --ina-secondary-600: #b1670c;
+  --ina-secondary-700: #905110;
+  --ina-secondary-800: #764111;
+  --ina-secondary-900: #442204;
+
+  /* Accent Colors */
+  --ina-accent-red: #a40f0a;
+  --ina-accent-green: #1cbd19;
+  --ina-accent-blue: #0a35c0;
+  --ina-accent-orange: #f08519;
+
+  /* Interactive Colors */
+  --ina-lan-brand-hover: #1f4f85 !important;
+  --ina-lan-neutral-hover: #fafafa !important;
+}

package/src/colors/brands/pan-rb.css

@@ -0,0 +1,30 @@
+/* PAN-RB Theme*/
+[data-brand='pan-rb'] {
+  /* Primary Colors - Red/Maroon theme */
+  --ina-primary-25: #fdf3f3;
+  --ina-primary-50: #fce4e4;
+  --ina-primary-100: #facecf;
+  --ina-primary-200: #f5acad;
+  --ina-primary-300: #ed7c7e;
+  --ina-primary-400: #e15254;
+  --ina-primary-500: #cd3537;
+  --ina-primary-600: #b42b2d;
+  --ina-primary-700: #8f2527;
+  --ina-primary-800: #772526;
+  --ina-primary-900: #400f10;
+
+  /* Secondary Colors - Grey/Purple-brown theme */
+  --ina-secondary-25: #f8f7f8;
+  --ina-secondary-50: #f0eeee;
+  --ina-secondary-100: #ded9da;
+  --ina-secondary-200: #c1b8bb;
+  --ina-secondary-300: #9f9196;
+  --ina-secondary-400: #847379;
+  --ina-secondary-500: #6c5d62;
+  --ina-secondary-600: #584c50;
+  --ina-secondary-700: #4b4144;
+  --ina-secondary-800: #41393b;
+  --ina-secondary-900: #231f20;
+
+  --ina-accent-yellow: #f2c548;
+}

package/src/colors/index.css

@@ -0,0 +1,11 @@
+@import './primitives/index.css';
+@import './utilities/index.css';
+/* Import brand-specific theme files - MUST be at the top */
+@import './brands/inapas.css';
+@import './brands/inagov.css';
+@import './brands/inaku.css';
+@import './brands/bgn.css';
+@import './brands/bkn.css';
+@import './brands/lan.css';
+@import './brands/pan-rb.css';
+@import './product/index.css';

package/src/colors/primitives/index.css

@@ -0,0 +1,150 @@
+:root {
+  /* Neutral Colors */
+  --ina-neutral-25: #ffffff;
+  --ina-neutral-50: #f8f8f7;
+  --ina-neutral-100: #f5f5f5;
+  --ina-neutral-200: #e5e5e5;
+  --ina-neutral-300: #d4d4d4;
+  --ina-neutral-400: #a3a3a3;
+  --ina-neutral-500: #737373;
+  --ina-neutral-600: #525252;
+  --ina-neutral-700: #404040;
+  --ina-neutral-800: #1f1f1f;
+  --ina-neutral-900: #141414;
+  --ina-neutral-1000: #050505;
+
+  /* Blue Colors */
+  --ina-blue-50: #fafcff;
+  --ina-blue-100: #ebf3ff;
+  --ina-blue-200: #d2e4fe;
+  --ina-blue-300: #84b4fb;
+  --ina-blue-400: #4d93fc;
+  --ina-blue-500: #0968f6;
+  --ina-blue-600: #004ab8;
+  --ina-blue-700: #002a69;
+  --ina-blue-800: #0a2142;
+  --ina-blue-900: #031530;
+
+  /* Cyan Colors */
+  --ina-cyan-50: #fafeff;
+  --ina-cyan-100: #ebfaff;
+  --ina-cyan-200: #d2f3fe;
+  --ina-cyan-300: #83defc;
+  --ina-cyan-400: #51d0fb;
+  --ina-cyan-500: #09bbf6;
+  --ina-cyan-600: #008bb9;
+  --ina-cyan-700: #00506b;
+  --ina-cyan-800: #0a3442;
+  --ina-cyan-900: #032530;
+
+  /* Green Colors */
+  --ina-green-50: #fafffb;
+  --ina-green-100: #ebffef;
+  --ina-green-200: #d2fedb;
+  --ina-green-300: #83fc9b;
+  --ina-green-400: #51fb73;
+  --ina-green-500: #09f638;
+  --ina-green-600: #00b925;
+  --ina-green-700: #006b15;
+  --ina-green-800: #0a4215;
+  --ina-green-900: #03300c;
+
+  /* Lime Colors */
+  --ina-lime-50: #fdfffa;
+  --ina-lime-100: #f7ffeb;
+  --ina-lime-200: #ecfed2;
+  --ina-lime-300: #ccfc83;
+  --ina-lime-400: #b7fb51;
+  --ina-lime-500: #97f609;
+  --ina-lime-600: #6fb900;
+  --ina-lime-700: #406b00;
+  --ina-lime-800: #2c420a;
+  --ina-lime-900: #1e3003;
+
+  /* Yellow Colors */
+  --ina-yellow-50: #fffefa;
+  --ina-yellow-100: #fffdeb;
+  --ina-yellow-200: #fef9d2;
+  --ina-yellow-300: #fcee83;
+  --ina-yellow-400: #fbe751;
+  --ina-yellow-500: #f6da09;
+  --ina-yellow-600: #b9a300;
+  --ina-yellow-700: #6b5f00;
+  --ina-yellow-800: #423c0a;
+  --ina-yellow-900: #302b03;
+
+  /* Orange Colors */
+  --ina-orange-50: #fffdfa;
+  --ina-orange-100: #fff3eb;
+  --ina-orange-200: #fee4d2;
+  --ina-orange-300: #fcb583;
+  --ina-orange-400: #fc974f;
+  --ina-orange-500: #f66a09;
+  --ina-orange-600: #b84d00;
+  --ina-orange-700: #6b2d00;
+  --ina-orange-800: #42210a;
+  --ina-orange-900: #301603;
+
+  /* Red Colors */
+  --ina-red-50: #fffafa;
+  --ina-red-100: #ffebeb;
+  --ina-red-200: #fed2d2;
+  --ina-red-300: #fb8383;
+  --ina-red-400: #fc4f4f;
+  --ina-red-500: #f60909;
+  --ina-red-600: #b80000;
+  --ina-red-700: #6b0000;
+  --ina-red-800: #420a0a;
+  --ina-red-900: #300303;
+
+  /* Pink Colors */
+  --ina-pink-50: #fffafd;
+  --ina-pink-100: #ffebf8;
+  --ina-pink-200: #fed2ef;
+  --ina-pink-300: #fc83d3;
+  --ina-pink-400: #fb51c2;
+  --ina-pink-500: #f609a7;
+  --ina-pink-600: #b9007b;
+  --ina-pink-700: #6b0047;
+  --ina-pink-800: #420a2f;
+  --ina-pink-900: #300321;
+
+  /* Magenta Colors */
+  --ina-magenta-50: #fefaff;
+  --ina-magenta-100: #fbebff;
+  --ina-magenta-200: #f5d2fe;
+  --ina-magenta-300: #e483fc;
+  --ina-magenta-400: #d951fb;
+  --ina-magenta-500: #c709f6;
+  --ina-magenta-600: #9400b9;
+  --ina-magenta-700: #56006b;
+  --ina-magenta-800: #370a42;
+  --ina-magenta-900: #270330;
+
+  /* Purple Colors */
+  --ina-purple-50: #fdfaff;
+  --ina-purple-100: #f7ebff;
+  --ina-purple-200: #ecd2fe;
+  --ina-purple-300: #cc83fc;
+  --ina-purple-400: #b751fb;
+  --ina-purple-500: #9709f6;
+  --ina-purple-600: #6f00b9;
+  --ina-purple-700: #40006b;
+  --ina-purple-800: #2c0a42;
+  --ina-purple-900: #1e0330;
+
+  /* Indigo Colors */
+  --ina-indigo-50: #fafaff;
+  --ina-indigo-100: #ebeaff;
+  --ina-indigo-200: #d2d3fe;
+  --ina-indigo-300: #8387fc;
+  --ina-indigo-400: #5157fb;
+  --ina-indigo-500: #0911f6;
+  --ina-indigo-600: #0006b9;
+  --ina-indigo-700: #00046b;
+  --ina-indigo-800: #0a0c42;
+  --ina-indigo-900: #030630;
+
+  /* overlay */
+  --ina-overlay: #1f1f1f7a;
+}