@idds/styles 1.0.26

package/src/tailwind/ts/idds.ts

@@ -0,0 +1,240 @@
+/**
+ * INA Digital Color Tokens for Tailwind CSS v3
+ *
+ * This file provides color tokens that reference CSS custom properties
+ * from @idds/styles. Use these tokens in your tailwind.config.js:
+ *
+ * @example
+ * ```js
+ * import iddsColorToken from '@idds/styles/tailwind/ts/idds';
+ *
+ * export default {
+ *   theme: {
+ *     extend: {
+ *       colors: iddsColorToken,
+ *     },
+ *   },
+ * };
+ * ```
+ *
+ * Then you can use classes like: text-neutral-500, bg-blue-500, etc.
+ */
+
+const iddsColorToken: Record<string, string> = {
+  // Neutral Colors
+  'neutral-25': 'var(--ina-neutral-25)',
+  'neutral-50': 'var(--ina-neutral-50)',
+  'neutral-100': 'var(--ina-neutral-100)',
+  'neutral-200': 'var(--ina-neutral-200)',
+  'neutral-300': 'var(--ina-neutral-300)',
+  'neutral-400': 'var(--ina-neutral-400)',
+  'neutral-500': 'var(--ina-neutral-500)',
+  'neutral-600': 'var(--ina-neutral-600)',
+  'neutral-700': 'var(--ina-neutral-700)',
+  'neutral-800': 'var(--ina-neutral-800)',
+  'neutral-900': 'var(--ina-neutral-900)',
+  'neutral-1000': 'var(--ina-neutral-1000)',
+
+  // Blue Colors
+  'blue-50': 'var(--ina-blue-50)',
+  'blue-100': 'var(--ina-blue-100)',
+  'blue-200': 'var(--ina-blue-200)',
+  'blue-300': 'var(--ina-blue-300)',
+  'blue-400': 'var(--ina-blue-400)',
+  'blue-500': 'var(--ina-blue-500)',
+  'blue-600': 'var(--ina-blue-600)',
+  'blue-700': 'var(--ina-blue-700)',
+  'blue-800': 'var(--ina-blue-800)',
+  'blue-900': 'var(--ina-blue-900)',
+
+  // Cyan Colors
+  'cyan-50': 'var(--ina-cyan-50)',
+  'cyan-100': 'var(--ina-cyan-100)',
+  'cyan-200': 'var(--ina-cyan-200)',
+  'cyan-300': 'var(--ina-cyan-300)',
+  'cyan-400': 'var(--ina-cyan-400)',
+  'cyan-500': 'var(--ina-cyan-500)',
+  'cyan-600': 'var(--ina-cyan-600)',
+  'cyan-700': 'var(--ina-cyan-700)',
+  'cyan-800': 'var(--ina-cyan-800)',
+  'cyan-900': 'var(--ina-cyan-900)',
+
+  // Green Colors
+  'green-50': 'var(--ina-green-50)',
+  'green-100': 'var(--ina-green-100)',
+  'green-200': 'var(--ina-green-200)',
+  'green-300': 'var(--ina-green-300)',
+  'green-400': 'var(--ina-green-400)',
+  'green-500': 'var(--ina-green-500)',
+  'green-600': 'var(--ina-green-600)',
+  'green-700': 'var(--ina-green-700)',
+  'green-800': 'var(--ina-green-800)',
+  'green-900': 'var(--ina-green-900)',
+
+  // Lime Colors
+  'lime-50': 'var(--ina-lime-50)',
+  'lime-100': 'var(--ina-lime-100)',
+  'lime-200': 'var(--ina-lime-200)',
+  'lime-300': 'var(--ina-lime-300)',
+  'lime-400': 'var(--ina-lime-400)',
+  'lime-500': 'var(--ina-lime-500)',
+  'lime-600': 'var(--ina-lime-600)',
+  'lime-700': 'var(--ina-lime-700)',
+  'lime-800': 'var(--ina-lime-800)',
+  'lime-900': 'var(--ina-lime-900)',
+
+  // Yellow Colors
+  'yellow-50': 'var(--ina-yellow-50)',
+  'yellow-100': 'var(--ina-yellow-100)',
+  'yellow-200': 'var(--ina-yellow-200)',
+  'yellow-300': 'var(--ina-yellow-300)',
+  'yellow-400': 'var(--ina-yellow-400)',
+  'yellow-500': 'var(--ina-yellow-500)',
+  'yellow-600': 'var(--ina-yellow-600)',
+  'yellow-700': 'var(--ina-yellow-700)',
+  'yellow-800': 'var(--ina-yellow-800)',
+  'yellow-900': 'var(--ina-yellow-900)',
+
+  // Orange Colors
+  'orange-50': 'var(--ina-orange-50)',
+  'orange-100': 'var(--ina-orange-100)',
+  'orange-200': 'var(--ina-orange-200)',
+  'orange-300': 'var(--ina-orange-300)',
+  'orange-400': 'var(--ina-orange-400)',
+  'orange-500': 'var(--ina-orange-500)',
+  'orange-600': 'var(--ina-orange-600)',
+  'orange-700': 'var(--ina-orange-700)',
+  'orange-800': 'var(--ina-orange-800)',
+  'orange-900': 'var(--ina-orange-900)',
+
+  // Red Colors
+  'red-50': 'var(--ina-red-50)',
+  'red-100': 'var(--ina-red-100)',
+  'red-200': 'var(--ina-red-200)',
+  'red-300': 'var(--ina-red-300)',
+  'red-400': 'var(--ina-red-400)',
+  'red-500': 'var(--ina-red-500)',
+  'red-600': 'var(--ina-red-600)',
+  'red-700': 'var(--ina-red-700)',
+  'red-800': 'var(--ina-red-800)',
+  'red-900': 'var(--ina-red-900)',
+
+  // Pink Colors
+  'pink-50': 'var(--ina-pink-50)',
+  'pink-100': 'var(--ina-pink-100)',
+  'pink-200': 'var(--ina-pink-200)',
+  'pink-300': 'var(--ina-pink-300)',
+  'pink-400': 'var(--ina-pink-400)',
+  'pink-500': 'var(--ina-pink-500)',
+  'pink-600': 'var(--ina-pink-600)',
+  'pink-700': 'var(--ina-pink-700)',
+  'pink-800': 'var(--ina-pink-800)',
+  'pink-900': 'var(--ina-pink-900)',
+
+  // Magenta Colors
+  'magenta-50': 'var(--ina-magenta-50)',
+  'magenta-100': 'var(--ina-magenta-100)',
+  'magenta-200': 'var(--ina-magenta-200)',
+  'magenta-300': 'var(--ina-magenta-300)',
+  'magenta-400': 'var(--ina-magenta-400)',
+  'magenta-500': 'var(--ina-magenta-500)',
+  'magenta-600': 'var(--ina-magenta-600)',
+  'magenta-700': 'var(--ina-magenta-700)',
+  'magenta-800': 'var(--ina-magenta-800)',
+  'magenta-900': 'var(--ina-magenta-900)',
+
+  // Purple Colors
+  'purple-50': 'var(--ina-purple-50)',
+  'purple-100': 'var(--ina-purple-100)',
+  'purple-200': 'var(--ina-purple-200)',
+  'purple-300': 'var(--ina-purple-300)',
+  'purple-400': 'var(--ina-purple-400)',
+  'purple-500': 'var(--ina-purple-500)',
+  'purple-600': 'var(--ina-purple-600)',
+  'purple-700': 'var(--ina-purple-700)',
+  'purple-800': 'var(--ina-purple-800)',
+  'purple-900': 'var(--ina-purple-900)',
+
+  // Indigo Colors
+  'indigo-50': 'var(--ina-indigo-50)',
+  'indigo-100': 'var(--ina-indigo-100)',
+  'indigo-200': 'var(--ina-indigo-200)',
+  'indigo-300': 'var(--ina-indigo-300)',
+  'indigo-400': 'var(--ina-indigo-400)',
+  'indigo-500': 'var(--ina-indigo-500)',
+  'indigo-600': 'var(--ina-indigo-600)',
+  'indigo-700': 'var(--ina-indigo-700)',
+  'indigo-800': 'var(--ina-indigo-800)',
+  'indigo-900': 'var(--ina-indigo-900)',
+
+  // Product Colors (Background, Content, Stroke, Guide, Negative, Positive, Warning)
+  'background-primary': 'var(--ina-background-primary)',
+  'background-secondary': 'var(--ina-background-secondary)',
+  'background-tertiary': 'var(--ina-background-tertiary)',
+  'background-overlay': 'var(--ina-background-overlay)',
+
+  'content-primary': 'var(--ina-content-primary)',
+  'content-secondary': 'var(--ina-content-secondary)',
+  'content-tertiary': 'var(--ina-content-tertiary)',
+  'content-guide': 'var(--ina-content-guide)',
+  'content-negative': 'var(--ina-content-negative)',
+  'content-positive': 'var(--ina-content-positive)',
+
+  'stroke-primary': 'var(--ina-stroke-primary)',
+  'stroke-secondary': 'var(--ina-stroke-secondary)',
+  'stroke-tertiary': 'var(--ina-stroke-tertiary)',
+
+  // Guide Colors (alias for blue)
+  'guide-50': 'var(--ina-guide-50)',
+  'guide-100': 'var(--ina-guide-100)',
+  'guide-200': 'var(--ina-guide-200)',
+  'guide-300': 'var(--ina-guide-300)',
+  'guide-400': 'var(--ina-guide-400)',
+  'guide-500': 'var(--ina-guide-500)',
+  'guide-600': 'var(--ina-guide-600)',
+  'guide-700': 'var(--ina-guide-700)',
+  'guide-800': 'var(--ina-guide-800)',
+  'guide-900': 'var(--ina-guide-900)',
+
+  // Negative Colors (alias for red)
+  'negative-50': 'var(--ina-negative-50)',
+  'negative-100': 'var(--ina-negative-100)',
+  'negative-200': 'var(--ina-negative-200)',
+  'negative-300': 'var(--ina-negative-300)',
+  'negative-400': 'var(--ina-negative-400)',
+  'negative-500': 'var(--ina-negative-500)',
+  'negative-600': 'var(--ina-negative-600)',
+  'negative-700': 'var(--ina-negative-700)',
+  'negative-800': 'var(--ina-negative-800)',
+  'negative-900': 'var(--ina-negative-900)',
+
+  // Positive Colors (alias for green)
+  'positive-50': 'var(--ina-positive-50)',
+  'positive-100': 'var(--ina-positive-100)',
+  'positive-200': 'var(--ina-positive-200)',
+  'positive-300': 'var(--ina-positive-300)',
+  'positive-400': 'var(--ina-positive-400)',
+  'positive-500': 'var(--ina-positive-500)',
+  'positive-600': 'var(--ina-positive-600)',
+  'positive-700': 'var(--ina-positive-700)',
+  'positive-800': 'var(--ina-positive-800)',
+  'positive-900': 'var(--ina-positive-900)',
+
+  // Warning Colors (alias for orange)
+  'warning-50': 'var(--ina-warning-50)',
+  'warning-100': 'var(--ina-warning-100)',
+  'warning-200': 'var(--ina-warning-200)',
+  'warning-300': 'var(--ina-warning-300)',
+  'warning-400': 'var(--ina-warning-400)',
+  'warning-500': 'var(--ina-warning-500)',
+  'warning-600': 'var(--ina-warning-600)',
+  'warning-700': 'var(--ina-warning-700)',
+  'warning-800': 'var(--ina-warning-800)',
+  'warning-900': 'var(--ina-warning-900)',
+
+  // Base Colors
+  white: 'var(--ina-white)',
+  black: 'var(--ina-black)',
+};
+
+export default iddsColorToken;

package/src/tailwind/ts/inagov.ts

@@ -0,0 +1,35 @@
+/**
+ * InaGov Color Tokens for Tailwind CSS v3
+ * Government Services Theme
+ */
+
+const inagovTokens: 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/Accent colors
+  'accent-100': 'var(--ina-accent-100)',
+  'accent-200': 'var(--ina-accent-200)',
+  'accent-300': 'var(--ina-accent-300)',
+  'accent-400': 'var(--ina-accent-400)',
+  'accent-500': 'var(--ina-accent-500)',
+  'accent-600': 'var(--ina-accent-600)',
+  'accent-700': 'var(--ina-accent-700)',
+
+  // Interactive hover
+  'brand-hover': 'var(--ina-brand-hover)',
+  'neutral-hover': 'var(--ina-neutral-hover)',
+};
+
+export default inagovTokens;
+

package/src/tailwind/ts/inaku.ts

@@ -0,0 +1,35 @@
+/**
+ * InaKu Color Tokens for Tailwind CSS v3
+ * Citizen Services Theme
+ */
+
+const inakuTokens: 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/Accent colors
+  'accent-100': 'var(--ina-accent-100)',
+  'accent-200': 'var(--ina-accent-200)',
+  'accent-300': 'var(--ina-accent-300)',
+  'accent-400': 'var(--ina-accent-400)',
+  'accent-500': 'var(--ina-accent-500)',
+  'accent-600': 'var(--ina-accent-600)',
+  'accent-700': 'var(--ina-accent-700)',
+
+  // Interactive hover
+  'inaku-brand-hover': 'var(--ina-inaku-brand-hover)',
+  'inaku-neutral-hover': 'var(--ina-inaku-neutral-hover)',
+};
+
+export default inakuTokens;
+

package/src/tailwind/ts/inapas.ts

@@ -0,0 +1,35 @@
+/**
+ * InaPas Color Tokens for Tailwind CSS v3
+ * Passport & Immigration Services Theme
+ */
+
+const inapasTokens: 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)',
+
+  // Accent colors
+  'accent-100': 'var(--ina-accent-100)',
+  'accent-200': 'var(--ina-accent-200)',
+  'accent-300': 'var(--ina-accent-300)',
+  'accent-400': 'var(--ina-accent-400)',
+  'accent-500': 'var(--ina-accent-500)',
+  'accent-600': 'var(--ina-accent-600)',
+  'accent-700': 'var(--ina-accent-700)',
+
+  // Interactive hover
+  'inapas-brand-hover': 'var(--ina-inapas-brand-hover)',
+  'inapas-neutral-hover': 'var(--ina-inapas-neutral-hover)',
+};
+
+export default inapasTokens;
+

package/src/tailwind/ts/lan.ts

@@ -0,0 +1,45 @@
+/**
+ * LAN Color Tokens for Tailwind CSS v3
+ * Local Area Network Theme
+ */
+
+const lanTokens: 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)',
+
+  // Accent colors
+  'accent-red': 'var(--ina-accent-red)',
+  'accent-green': 'var(--ina-accent-green)',
+  'accent-blue': 'var(--ina-accent-blue)',
+  'accent-orange': 'var(--ina-accent-orange)',
+
+  // Interactive hover
+  'lan-brand-hover': 'var(--ina-lan-brand-hover)',
+  'lan-neutral-hover': 'var(--ina-lan-neutral-hover)',
+};
+
+export default lanTokens;
+

package/src/tailwind/ts/panrb.ts

@@ -0,0 +1,37 @@
+/**
+ * PAN-RB Color Tokens for Tailwind CSS v3
+ */
+
+const panrbTokens: 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)',
+
+  // Accent colors
+  'accent-yellow': 'var(--ina-accent-yellow)',
+};
+
+export default panrbTokens;
+