@idds/styles 1.0.26

package/src/tailwind/css/idds.css

@@ -0,0 +1,231 @@
+/**
+ * INA Digital Color Tokens for Tailwind CSS v4
+ * 
+ * This file provides color tokens using @theme syntax for Tailwind v4.
+ * Import this file in your CSS:
+ * 
+ * @example
+ * ```css
+ * @import '@idds/styles/tailwind/css/idds.css';
+ * ```
+ * 
+ * Then you can use classes like: text-neutral-500, bg-blue-500, etc.
+ */
+
+@theme {
+  /* Neutral Colors */
+  --color-neutral-25: var(--ina-neutral-25);
+  --color-neutral-50: var(--ina-neutral-50);
+  --color-neutral-100: var(--ina-neutral-100);
+  --color-neutral-200: var(--ina-neutral-200);
+  --color-neutral-300: var(--ina-neutral-300);
+  --color-neutral-400: var(--ina-neutral-400);
+  --color-neutral-500: var(--ina-neutral-500);
+  --color-neutral-600: var(--ina-neutral-600);
+  --color-neutral-700: var(--ina-neutral-700);
+  --color-neutral-800: var(--ina-neutral-800);
+  --color-neutral-900: var(--ina-neutral-900);
+  --color-neutral-1000: var(--ina-neutral-1000);
+
+  /* Blue Colors */
+  --color-blue-50: var(--ina-blue-50);
+  --color-blue-100: var(--ina-blue-100);
+  --color-blue-200: var(--ina-blue-200);
+  --color-blue-300: var(--ina-blue-300);
+  --color-blue-400: var(--ina-blue-400);
+  --color-blue-500: var(--ina-blue-500);
+  --color-blue-600: var(--ina-blue-600);
+  --color-blue-700: var(--ina-blue-700);
+  --color-blue-800: var(--ina-blue-800);
+  --color-blue-900: var(--ina-blue-900);
+
+  /* Cyan Colors */
+  --color-cyan-50: var(--ina-cyan-50);
+  --color-cyan-100: var(--ina-cyan-100);
+  --color-cyan-200: var(--ina-cyan-200);
+  --color-cyan-300: var(--ina-cyan-300);
+  --color-cyan-400: var(--ina-cyan-400);
+  --color-cyan-500: var(--ina-cyan-500);
+  --color-cyan-600: var(--ina-cyan-600);
+  --color-cyan-700: var(--ina-cyan-700);
+  --color-cyan-800: var(--ina-cyan-800);
+  --color-cyan-900: var(--ina-cyan-900);
+
+  /* Green Colors */
+  --color-green-50: var(--ina-green-50);
+  --color-green-100: var(--ina-green-100);
+  --color-green-200: var(--ina-green-200);
+  --color-green-300: var(--ina-green-300);
+  --color-green-400: var(--ina-green-400);
+  --color-green-500: var(--ina-green-500);
+  --color-green-600: var(--ina-green-600);
+  --color-green-700: var(--ina-green-700);
+  --color-green-800: var(--ina-green-800);
+  --color-green-900: var(--ina-green-900);
+
+  /* Lime Colors */
+  --color-lime-50: var(--ina-lime-50);
+  --color-lime-100: var(--ina-lime-100);
+  --color-lime-200: var(--ina-lime-200);
+  --color-lime-300: var(--ina-lime-300);
+  --color-lime-400: var(--ina-lime-400);
+  --color-lime-500: var(--ina-lime-500);
+  --color-lime-600: var(--ina-lime-600);
+  --color-lime-700: var(--ina-lime-700);
+  --color-lime-800: var(--ina-lime-800);
+  --color-lime-900: var(--ina-lime-900);
+
+  /* Yellow Colors */
+  --color-yellow-50: var(--ina-yellow-50);
+  --color-yellow-100: var(--ina-yellow-100);
+  --color-yellow-200: var(--ina-yellow-200);
+  --color-yellow-300: var(--ina-yellow-300);
+  --color-yellow-400: var(--ina-yellow-400);
+  --color-yellow-500: var(--ina-yellow-500);
+  --color-yellow-600: var(--ina-yellow-600);
+  --color-yellow-700: var(--ina-yellow-700);
+  --color-yellow-800: var(--ina-yellow-800);
+  --color-yellow-900: var(--ina-yellow-900);
+
+  /* Orange Colors */
+  --color-orange-50: var(--ina-orange-50);
+  --color-orange-100: var(--ina-orange-100);
+  --color-orange-200: var(--ina-orange-200);
+  --color-orange-300: var(--ina-orange-300);
+  --color-orange-400: var(--ina-orange-400);
+  --color-orange-500: var(--ina-orange-500);
+  --color-orange-600: var(--ina-orange-600);
+  --color-orange-700: var(--ina-orange-700);
+  --color-orange-800: var(--ina-orange-800);
+  --color-orange-900: var(--ina-orange-900);
+
+  /* Red Colors */
+  --color-red-50: var(--ina-red-50);
+  --color-red-100: var(--ina-red-100);
+  --color-red-200: var(--ina-red-200);
+  --color-red-300: var(--ina-red-300);
+  --color-red-400: var(--ina-red-400);
+  --color-red-500: var(--ina-red-500);
+  --color-red-600: var(--ina-red-600);
+  --color-red-700: var(--ina-red-700);
+  --color-red-800: var(--ina-red-800);
+  --color-red-900: var(--ina-red-900);
+
+  /* Pink Colors */
+  --color-pink-50: var(--ina-pink-50);
+  --color-pink-100: var(--ina-pink-100);
+  --color-pink-200: var(--ina-pink-200);
+  --color-pink-300: var(--ina-pink-300);
+  --color-pink-400: var(--ina-pink-400);
+  --color-pink-500: var(--ina-pink-500);
+  --color-pink-600: var(--ina-pink-600);
+  --color-pink-700: var(--ina-pink-700);
+  --color-pink-800: var(--ina-pink-800);
+  --color-pink-900: var(--ina-pink-900);
+
+  /* Magenta Colors */
+  --color-magenta-50: var(--ina-magenta-50);
+  --color-magenta-100: var(--ina-magenta-100);
+  --color-magenta-200: var(--ina-magenta-200);
+  --color-magenta-300: var(--ina-magenta-300);
+  --color-magenta-400: var(--ina-magenta-400);
+  --color-magenta-500: var(--ina-magenta-500);
+  --color-magenta-600: var(--ina-magenta-600);
+  --color-magenta-700: var(--ina-magenta-700);
+  --color-magenta-800: var(--ina-magenta-800);
+  --color-magenta-900: var(--ina-magenta-900);
+
+  /* Purple Colors */
+  --color-purple-50: var(--ina-purple-50);
+  --color-purple-100: var(--ina-purple-100);
+  --color-purple-200: var(--ina-purple-200);
+  --color-purple-300: var(--ina-purple-300);
+  --color-purple-400: var(--ina-purple-400);
+  --color-purple-500: var(--ina-purple-500);
+  --color-purple-600: var(--ina-purple-600);
+  --color-purple-700: var(--ina-purple-700);
+  --color-purple-800: var(--ina-purple-800);
+  --color-purple-900: var(--ina-purple-900);
+
+  /* Indigo Colors */
+  --color-indigo-50: var(--ina-indigo-50);
+  --color-indigo-100: var(--ina-indigo-100);
+  --color-indigo-200: var(--ina-indigo-200);
+  --color-indigo-300: var(--ina-indigo-300);
+  --color-indigo-400: var(--ina-indigo-400);
+  --color-indigo-500: var(--ina-indigo-500);
+  --color-indigo-600: var(--ina-indigo-600);
+  --color-indigo-700: var(--ina-indigo-700);
+  --color-indigo-800: var(--ina-indigo-800);
+  --color-indigo-900: var(--ina-indigo-900);
+
+  /* Product Colors */
+  --color-background-primary: var(--ina-background-primary);
+  --color-background-secondary: var(--ina-background-secondary);
+  --color-background-tertiary: var(--ina-background-tertiary);
+  --color-background-overlay: var(--ina-background-overlay);
+
+  --color-content-primary: var(--ina-content-primary);
+  --color-content-secondary: var(--ina-content-secondary);
+  --color-content-tertiary: var(--ina-content-tertiary);
+  --color-content-guide: var(--ina-content-guide);
+  --color-content-negative: var(--ina-content-negative);
+  --color-content-positive: var(--ina-content-positive);
+
+  --color-stroke-primary: var(--ina-stroke-primary);
+  --color-stroke-secondary: var(--ina-stroke-secondary);
+  --color-stroke-tertiary: var(--ina-stroke-tertiary);
+
+  /* Guide Colors (alias for blue) */
+  --color-guide-50: var(--ina-guide-50);
+  --color-guide-100: var(--ina-guide-100);
+  --color-guide-200: var(--ina-guide-200);
+  --color-guide-300: var(--ina-guide-300);
+  --color-guide-400: var(--ina-guide-400);
+  --color-guide-500: var(--ina-guide-500);
+  --color-guide-600: var(--ina-guide-600);
+  --color-guide-700: var(--ina-guide-700);
+  --color-guide-800: var(--ina-guide-800);
+  --color-guide-900: var(--ina-guide-900);
+
+  /* Negative Colors (alias for red) */
+  --color-negative-50: var(--ina-negative-50);
+  --color-negative-100: var(--ina-negative-100);
+  --color-negative-200: var(--ina-negative-200);
+  --color-negative-300: var(--ina-negative-300);
+  --color-negative-400: var(--ina-negative-400);
+  --color-negative-500: var(--ina-negative-500);
+  --color-negative-600: var(--ina-negative-600);
+  --color-negative-700: var(--ina-negative-700);
+  --color-negative-800: var(--ina-negative-800);
+  --color-negative-900: var(--ina-negative-900);
+
+  /* Positive Colors (alias for green) */
+  --color-positive-50: var(--ina-positive-50);
+  --color-positive-100: var(--ina-positive-100);
+  --color-positive-200: var(--ina-positive-200);
+  --color-positive-300: var(--ina-positive-300);
+  --color-positive-400: var(--ina-positive-400);
+  --color-positive-500: var(--ina-positive-500);
+  --color-positive-600: var(--ina-positive-600);
+  --color-positive-700: var(--ina-positive-700);
+  --color-positive-800: var(--ina-positive-800);
+  --color-positive-900: var(--ina-positive-900);
+
+  /* Warning Colors (alias for orange) */
+  --color-warning-50: var(--ina-warning-50);
+  --color-warning-100: var(--ina-warning-100);
+  --color-warning-200: var(--ina-warning-200);
+  --color-warning-300: var(--ina-warning-300);
+  --color-warning-400: var(--ina-warning-400);
+  --color-warning-500: var(--ina-warning-500);
+  --color-warning-600: var(--ina-warning-600);
+  --color-warning-700: var(--ina-warning-700);
+  --color-warning-800: var(--ina-warning-800);
+  --color-warning-900: var(--ina-warning-900);
+
+  /* Base Colors */
+  --color-white: var(--ina-white);
+  --color-black: var(--ina-black);
+}
+

package/src/tailwind/css/inagov.css

@@ -0,0 +1,33 @@
+/**
+ * InaGov Color Tokens for Tailwind CSS v4
+ * Government Services Theme
+ */
+
+@theme {
+  /* Primary shades */
+  --color-primary-25: var(--ina-primary-25);
+  --color-primary-50: var(--ina-primary-50);
+  --color-primary-100: var(--ina-primary-100);
+  --color-primary-200: var(--ina-primary-200);
+  --color-primary-300: var(--ina-primary-300);
+  --color-primary-400: var(--ina-primary-400);
+  --color-primary-500: var(--ina-primary-500);
+  --color-primary-600: var(--ina-primary-600);
+  --color-primary-700: var(--ina-primary-700);
+  --color-primary-800: var(--ina-primary-800);
+  --color-primary-900: var(--ina-primary-900);
+
+  /* Secondary/Accent colors */
+  --color-accent-100: var(--ina-accent-100);
+  --color-accent-200: var(--ina-accent-200);
+  --color-accent-300: var(--ina-accent-300);
+  --color-accent-400: var(--ina-accent-400);
+  --color-accent-500: var(--ina-accent-500);
+  --color-accent-600: var(--ina-accent-600);
+  --color-accent-700: var(--ina-accent-700);
+
+  /* Interactive hover */
+  --color-brand-hover: var(--ina-brand-hover);
+  --color-neutral-hover: var(--ina-neutral-hover);
+}
+

package/src/tailwind/css/inaku.css

@@ -0,0 +1,33 @@
+/**
+ * InaKu Color Tokens for Tailwind CSS v4
+ * Citizen Services Theme
+ */
+
+@theme {
+  /* Primary shades */
+  --color-primary-25: var(--ina-primary-25);
+  --color-primary-50: var(--ina-primary-50);
+  --color-primary-100: var(--ina-primary-100);
+  --color-primary-200: var(--ina-primary-200);
+  --color-primary-300: var(--ina-primary-300);
+  --color-primary-400: var(--ina-primary-400);
+  --color-primary-500: var(--ina-primary-500);
+  --color-primary-600: var(--ina-primary-600);
+  --color-primary-700: var(--ina-primary-700);
+  --color-primary-800: var(--ina-primary-800);
+  --color-primary-900: var(--ina-primary-900);
+
+  /* Secondary/Accent colors */
+  --color-accent-100: var(--ina-accent-100);
+  --color-accent-200: var(--ina-accent-200);
+  --color-accent-300: var(--ina-accent-300);
+  --color-accent-400: var(--ina-accent-400);
+  --color-accent-500: var(--ina-accent-500);
+  --color-accent-600: var(--ina-accent-600);
+  --color-accent-700: var(--ina-accent-700);
+
+  /* Interactive hover */
+  --color-inaku-brand-hover: var(--ina-inaku-brand-hover);
+  --color-inaku-neutral-hover: var(--ina-inaku-neutral-hover);
+}
+

package/src/tailwind/css/inapas.css

@@ -0,0 +1,33 @@
+/**
+ * InaPas Color Tokens for Tailwind CSS v4
+ * Passport & Immigration Services Theme
+ */
+
+@theme {
+  /* Primary shades */
+  --color-primary-25: var(--ina-primary-25);
+  --color-primary-50: var(--ina-primary-50);
+  --color-primary-100: var(--ina-primary-100);
+  --color-primary-200: var(--ina-primary-200);
+  --color-primary-300: var(--ina-primary-300);
+  --color-primary-400: var(--ina-primary-400);
+  --color-primary-500: var(--ina-primary-500);
+  --color-primary-600: var(--ina-primary-600);
+  --color-primary-700: var(--ina-primary-700);
+  --color-primary-800: var(--ina-primary-800);
+  --color-primary-900: var(--ina-primary-900);
+
+  /* Accent colors */
+  --color-accent-100: var(--ina-accent-100);
+  --color-accent-200: var(--ina-accent-200);
+  --color-accent-300: var(--ina-accent-300);
+  --color-accent-400: var(--ina-accent-400);
+  --color-accent-500: var(--ina-accent-500);
+  --color-accent-600: var(--ina-accent-600);
+  --color-accent-700: var(--ina-accent-700);
+
+  /* Interactive hover */
+  --color-inapas-brand-hover: var(--ina-inapas-brand-hover);
+  --color-inapas-neutral-hover: var(--ina-inapas-neutral-hover);
+}
+

package/src/tailwind/css/lan.css

@@ -0,0 +1,43 @@
+/**
+ * LAN Color Tokens for Tailwind CSS v4
+ * Local Area Network Theme
+ */
+
+@theme {
+  /* Primary shades */
+  --color-primary-25: var(--ina-primary-25);
+  --color-primary-50: var(--ina-primary-50);
+  --color-primary-100: var(--ina-primary-100);
+  --color-primary-200: var(--ina-primary-200);
+  --color-primary-300: var(--ina-primary-300);
+  --color-primary-400: var(--ina-primary-400);
+  --color-primary-500: var(--ina-primary-500);
+  --color-primary-600: var(--ina-primary-600);
+  --color-primary-700: var(--ina-primary-700);
+  --color-primary-800: var(--ina-primary-800);
+  --color-primary-900: var(--ina-primary-900);
+
+  /* Secondary shades */
+  --color-secondary-25: var(--ina-secondary-25);
+  --color-secondary-50: var(--ina-secondary-50);
+  --color-secondary-100: var(--ina-secondary-100);
+  --color-secondary-200: var(--ina-secondary-200);
+  --color-secondary-300: var(--ina-secondary-300);
+  --color-secondary-400: var(--ina-secondary-400);
+  --color-secondary-500: var(--ina-secondary-500);
+  --color-secondary-600: var(--ina-secondary-600);
+  --color-secondary-700: var(--ina-secondary-700);
+  --color-secondary-800: var(--ina-secondary-800);
+  --color-secondary-900: var(--ina-secondary-900);
+
+  /* Accent colors */
+  --color-accent-red: var(--ina-accent-red);
+  --color-accent-green: var(--ina-accent-green);
+  --color-accent-blue: var(--ina-accent-blue);
+  --color-accent-orange: var(--ina-accent-orange);
+
+  /* Interactive hover */
+  --color-lan-brand-hover: var(--ina-lan-brand-hover);
+  --color-lan-neutral-hover: var(--ina-lan-neutral-hover);
+}
+

package/src/tailwind/css/pan-rb.css

@@ -0,0 +1,35 @@
+/**
+ * PAN-RB Color Tokens for Tailwind CSS v4
+ */
+
+@theme {
+  /* Primary shades */
+  --color-primary-25: var(--ina-primary-25);
+  --color-primary-50: var(--ina-primary-50);
+  --color-primary-100: var(--ina-primary-100);
+  --color-primary-200: var(--ina-primary-200);
+  --color-primary-300: var(--ina-primary-300);
+  --color-primary-400: var(--ina-primary-400);
+  --color-primary-500: var(--ina-primary-500);
+  --color-primary-600: var(--ina-primary-600);
+  --color-primary-700: var(--ina-primary-700);
+  --color-primary-800: var(--ina-primary-800);
+  --color-primary-900: var(--ina-primary-900);
+
+  /* Secondary shades */
+  --color-secondary-25: var(--ina-secondary-25);
+  --color-secondary-50: var(--ina-secondary-50);
+  --color-secondary-100: var(--ina-secondary-100);
+  --color-secondary-200: var(--ina-secondary-200);
+  --color-secondary-300: var(--ina-secondary-300);
+  --color-secondary-400: var(--ina-secondary-400);
+  --color-secondary-500: var(--ina-secondary-500);
+  --color-secondary-600: var(--ina-secondary-600);
+  --color-secondary-700: var(--ina-secondary-700);
+  --color-secondary-800: var(--ina-secondary-800);
+  --color-secondary-900: var(--ina-secondary-900);
+
+  /* Accent colors */
+  --color-accent-yellow: var(--ina-accent-yellow);
+}
+

package/src/tailwind/ts/bgn.ts

@@ -0,0 +1,20 @@
+/**
+ * BGN Color Tokens for Tailwind CSS v3
+ * Banking & Financial Services Theme
+ */
+
+const bgnTokens: Record<string, string> = {
+  // Primary shades
+  'primary-50': 'var(--ina-primary-50)',
+  'primary-100': 'var(--ina-primary-100)',
+  'primary-200': 'var(--ina-primary-200)',
+  'primary-300': 'var(--ina-primary-300)',
+  'primary-400': 'var(--ina-primary-400)',
+  'primary-500': 'var(--ina-primary-500)',
+  'primary-600': 'var(--ina-primary-600)',
+  'primary-700': 'var(--ina-primary-700)',
+  'primary-800': 'var(--ina-primary-800)',
+  'primary-900': 'var(--ina-primary-900)',
+};
+
+export default bgnTokens;

package/src/tailwind/ts/bkn.ts

@@ -0,0 +1,38 @@
+/**
+ * BKN Color Tokens for Tailwind CSS v3
+ * Badan Kepegawaian Negara Theme
+ */
+
+const bknTokens: Record<string, string> = {
+  // Primary shades
+  'primary-25': 'var(--ina-primary-25)',
+  'primary-50': 'var(--ina-primary-50)',
+  'primary-100': 'var(--ina-primary-100)',
+  'primary-200': 'var(--ina-primary-200)',
+  'primary-300': 'var(--ina-primary-300)',
+  'primary-400': 'var(--ina-primary-400)',
+  'primary-500': 'var(--ina-primary-500)',
+  'primary-600': 'var(--ina-primary-600)',
+  'primary-700': 'var(--ina-primary-700)',
+  'primary-800': 'var(--ina-primary-800)',
+  'primary-900': 'var(--ina-primary-900)',
+
+  // Secondary shades
+  'secondary-25': 'var(--ina-secondary-25)',
+  'secondary-50': 'var(--ina-secondary-50)',
+  'secondary-100': 'var(--ina-secondary-100)',
+  'secondary-200': 'var(--ina-secondary-200)',
+  'secondary-300': 'var(--ina-secondary-300)',
+  'secondary-400': 'var(--ina-secondary-400)',
+  'secondary-500': 'var(--ina-secondary-500)',
+  'secondary-600': 'var(--ina-secondary-600)',
+  'secondary-700': 'var(--ina-secondary-700)',
+  'secondary-800': 'var(--ina-secondary-800)',
+  'secondary-900': 'var(--ina-secondary-900)',
+
+  // Interactive hover
+  'bkn-brand-hover': 'var(--ina-bkn-brand-hover)',
+  'bkn-neutral-hover': 'var(--ina-bkn-neutral-hover)',
+};
+
+export default bknTokens;