@j2-health/design-system 0.5.4 → 0.6.0

package/dist/tailwind.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.cjs","names":[],"sources":["../tailwind.config.ts"],"sourcesContent":["import type { Config } from 'tailwindcss'\n\n// Export as a preset for consuming apps\nexport const tailwindPreset = {\n  theme: {\n    colors: {\n      // Inlined rather than read from `tailwindcss/colors`: the root export\n      // re-exports this preset, so a runtime import here lands in\n      // dist/index.js and makes tailwindcss — which consumers install as a\n      // devDependency — a runtime dependency of every component import.\n      transparent: 'transparent',\n      current: 'currentColor',\n      white: '#fff',\n      black: '#000',\n      j2: {\n        // Generic color definitions\n        'blue-1': 'var(--j2-blue-1)',\n        'blue-2': 'var(--j2-blue-2)',\n        'blue-3': 'var(--j2-blue-3)',\n        'blue-4': 'var(--j2-blue-4)',\n        'blue-5': 'var(--j2-blue-5)',\n        'blue-6': 'var(--j2-blue-6)',\n        'blue-7': 'var(--j2-blue-7)',\n        'blue-8': 'var(--j2-blue-8)',\n        'blue-9': 'var(--j2-blue-9)',\n        'blue-10': 'var(--j2-blue-10)',\n        'blue-11': 'var(--j2-blue-11)',\n        'blue-12': 'var(--j2-blue-12)',\n        'gray-1': 'var(--j2-gray-1)',\n        'gray-2': 'var(--j2-gray-2)',\n        'gray-3': 'var(--j2-gray-3)',\n        'gray-4': 'var(--j2-gray-4)',\n        'gray-5': 'var(--j2-gray-5)',\n        'gray-6': 'var(--j2-gray-6)',\n        'gray-7': 'var(--j2-gray-7)',\n        'gray-8': 'var(--j2-gray-8)',\n        'gray-9': 'var(--j2-gray-9)',\n        'gray-10': 'var(--j2-gray-10)',\n        'gray-11': 'var(--j2-gray-11)',\n        'gray-12': 'var(--j2-gray-12)',\n        'green-1': 'var(--j2-green-1)',\n        'green-2': 'var(--j2-green-2)',\n        'green-3': 'var(--j2-green-3)',\n        'green-4': 'var(--j2-green-4)',\n        'green-5': 'var(--j2-green-5)',\n        'green-6': 'var(--j2-green-6)',\n        'green-7': 'var(--j2-green-7)',\n        'green-8': 'var(--j2-green-8)',\n        'green-9': 'var(--j2-green-9)',\n        'green-10': 'var(--j2-green-10)',\n        'green-11': 'var(--j2-green-11)',\n        'green-12': 'var(--j2-green-12)',\n        'gold-1': 'var(--j2-gold-1)',\n        'gold-2': 'var(--j2-gold-2)',\n        'gold-3': 'var(--j2-gold-3)',\n        'gold-4': 'var(--j2-gold-4)',\n        'gold-5': 'var(--j2-gold-5)',\n        'gold-6': 'var(--j2-gold-6)',\n        'gold-7': 'var(--j2-gold-7)',\n        'gold-8': 'var(--j2-gold-8)',\n        'gold-9': 'var(--j2-gold-9)',\n        'gold-10': 'var(--j2-gold-10)',\n        'gold-11': 'var(--j2-gold-11)',\n        'gold-12': 'var(--j2-gold-12)',\n        'red-1': 'var(--j2-red-1)',\n        'red-2': 'var(--j2-red-2)',\n        'red-3': 'var(--j2-red-3)',\n        'red-4': 'var(--j2-red-4)',\n        'red-5': 'var(--j2-red-5)',\n        'red-6': 'var(--j2-red-6)',\n        'red-7': 'var(--j2-red-7)',\n        'red-8': 'var(--j2-red-8)',\n        'red-9': 'var(--j2-red-9)',\n        'red-10': 'var(--j2-red-10)',\n        'red-11': 'var(--j2-red-11)',\n        'red-12': 'var(--j2-red-12)',\n\n        // Primary color tokens\n        primary: 'var(--j2-color-primary)',\n        'primary-hover': 'var(--j2-color-primary-hover)',\n        'primary-active': 'var(--j2-color-primary-active)',\n        'primary-bg': 'var(--j2-color-primary-bg)',\n        'primary-bg-hover': 'var(--j2-color-primary-bg-hover)',\n        'primary-border': 'var(--j2-color-primary-border)',\n        'primary-border-hover': 'var(--j2-color-primary-border-hover)',\n        'primary-text': 'var(--j2-color-primary-text)',\n        'primary-text-hover': 'var(--j2-color-primary-text-hover)',\n        'primary-text-active': 'var(--j2-color-primary-text-active)',\n\n        // Text color tokens\n        text: 'var(--j2-color-text)',\n        'text-secondary': 'var(--j2-color-text-secondary)',\n        'text-tertiary': 'var(--j2-color-text-tertiary)',\n        'text-quaternary': 'var(--j2-color-text-quaternary)',\n        'text-heading': 'var(--j2-color-text-heading)',\n        'text-label': 'var(--j2-color-text-label)',\n        'text-description': 'var(--j2-color-text-description)',\n        'text-disabled': 'var(--j2-color-text-disabled)',\n        'text-placeholder': 'var(--j2-color-text-placeholder)',\n\n        // Border color tokens\n        border: 'var(--j2-color-border)',\n        'border-secondary': 'var(--j2-color-border-secondary)',\n\n        // Background color tokens\n        'bg-layout': 'var(--j2-color-bg-layout)',\n        'bg-elevated': 'var(--j2-color-bg-elevated)',\n        'bg-mask': 'var(--j2-color-bg-mask)',\n        'bg-spotlight': 'var(--j2-color-bg-spotlight)',\n\n        // Status colors\n        success: 'var(--j2-color-success)',\n        'success-bg': 'var(--j2-color-success-bg)',\n        'success-bg-hover': 'var(--j2-color-success-bg-hover)',\n        'success-border': 'var(--j2-color-success-border)',\n        warning: 'var(--j2-color-warning)',\n        'warning-bg': 'var(--j2-color-warning-bg)',\n        'warning-bg-hover': 'var(--j2-color-warning-bg-hover)',\n        'warning-border': 'var(--j2-color-warning-border)',\n        error: 'var(--j2-color-error)',\n        'error-bg': 'var(--j2-color-error-bg)',\n        'error-bg-hover': 'var(--j2-color-error-bg-hover)',\n        'error-border': 'var(--j2-color-error-border)',\n        info: 'var(--j2-color-info)',\n        'info-bg': 'var(--j2-color-info-bg)',\n        'info-bg-hover': 'var(--j2-color-info-bg-hover)',\n        'info-border': 'var(--j2-color-info-border)',\n\n        // Icon colors\n        icon: 'var(--j2-color-icon)',\n        'icon-hover': 'var(--j2-color-icon-hover)',\n      },\n    },\n    extend: {\n      borderColor: {\n        DEFAULT: 'var(--j2-color-border)',\n      },\n      fontWeight: {\n        normal: '400',\n        medium: '500',\n        semibold: '600',\n        bold: '600',\n      },\n      borderWidth: {\n        j2: 'var(--j2-line-width)',\n        'j2-bold': 'var(--j2-line-width-bold)',\n        'j2-focus': 'var(--j2-line-width-focus)',\n      },\n      borderRadius: {\n        j2: 'var(--j2-border-radius)',\n        'j2-lg': 'var(--j2-border-radius-lg)',\n        'j2-sm': 'var(--j2-border-radius-sm)',\n        'j2-xs': 'var(--j2-border-radius-xs)',\n      },\n      fontSize: {\n        'j2-xs': [\n          'var(--j2-font-size-xs)',\n          { lineHeight: 'var(--j2-line-height-xs)' },\n        ] as [string, { lineHeight: string }],\n        'j2-lg': [\n          'var(--j2-font-size-lg)',\n          { lineHeight: 'var(--j2-line-height-lg)' },\n        ] as [string, { lineHeight: string }],\n      },\n      spacing: {\n        j2: 'var(--j2-size)',\n        'j2-xs': 'var(--j2-size-xs)',\n        'j2-sm': 'var(--j2-size-sm)',\n        'j2-md': 'var(--j2-size-md)',\n        'j2-lg': 'var(--j2-size-lg)',\n        'j2-xl': 'var(--j2-size-xl)',\n        'j2-xxl': 'var(--j2-size-xxl)',\n      },\n    },\n  },\n}\n\n// Default export for this project's own Tailwind config\nexport default {\n  ...tailwindPreset,\n  content: ['./src/**/*.{ts,tsx,mdx}'],\n  plugins: [],\n} satisfies Config\n"],"mappings":";;;;;AAGA,IAAa,iBAAiB,EAC5B,OAAO;CACL,QAAQ;EAKN,aAAa;EACb,SAAS;EACT,OAAO;EACP,OAAO;EACP,IAAI;GAEF,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,YAAY;GACZ,YAAY;GACZ,YAAY;GACZ,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,UAAU;GACV,UAAU;GACV,UAAU;GAGV,SAAS;GACT,iBAAiB;GACjB,kBAAkB;GAClB,cAAc;GACd,oBAAoB;GACpB,kBAAkB;GAClB,wBAAwB;GACxB,gBAAgB;GAChB,sBAAsB;GACtB,uBAAuB;GAGvB,MAAM;GACN,kBAAkB;GAClB,iBAAiB;GACjB,mBAAmB;GACnB,gBAAgB;GAChB,cAAc;GACd,oBAAoB;GACpB,iBAAiB;GACjB,oBAAoB;GAGpB,QAAQ;GACR,oBAAoB;GAGpB,aAAa;GACb,eAAe;GACf,WAAW;GACX,gBAAgB;GAGhB,SAAS;GACT,cAAc;GACd,oBAAoB;GACpB,kBAAkB;GAClB,SAAS;GACT,cAAc;GACd,oBAAoB;GACpB,kBAAkB;GAClB,OAAO;GACP,YAAY;GACZ,kBAAkB;GAClB,gBAAgB;GAChB,MAAM;GACN,WAAW;GACX,iBAAiB;GACjB,eAAe;GAGf,MAAM;GACN,cAAc;EAChB;CACF;CACA,QAAQ;EACN,aAAa,EACX,SAAS,yBACX;EACA,YAAY;GACV,QAAQ;GACR,QAAQ;GACR,UAAU;GACV,MAAM;EACR;EACA,aAAa;GACX,IAAI;GACJ,WAAW;GACX,YAAY;EACd;EACA,cAAc;GACZ,IAAI;GACJ,SAAS;GACT,SAAS;GACT,SAAS;EACX;EACA,UAAU;GACR,SAAS,CACP,0BACA,EAAE,YAAY,2BAA2B,CAC3C;GACA,SAAS,CACP,0BACA,EAAE,YAAY,2BAA2B,CAC3C;EACF;EACA,SAAS;GACP,IAAI;GACJ,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,UAAU;EACZ;CACF;AACF,EACF;AAGA,IAAA,0BAAe;CACb,GAAG;CACH,SAAS,CAAC,yBAAyB;CACnC,SAAS,CAAC;AACZ"}
+{"version":3,"file":"tailwind.cjs","names":[],"sources":["../tailwind.config.ts"],"sourcesContent":["import type { Config } from 'tailwindcss'\n\n// Export as a preset for consuming apps\nexport const tailwindPreset = {\n  theme: {\n    colors: {\n      // Inlined rather than read from `tailwindcss/colors`: the root export\n      // re-exports this preset, so a runtime import here lands in\n      // dist/index.js and makes tailwindcss — which consumers install as a\n      // devDependency — a runtime dependency of every component import.\n      transparent: 'transparent',\n      current: 'currentColor',\n      white: '#fff',\n      black: '#000',\n      j2: {\n        // Generic color definitions\n        'blue-1': 'var(--j2-blue-1)',\n        'blue-2': 'var(--j2-blue-2)',\n        'blue-3': 'var(--j2-blue-3)',\n        'blue-4': 'var(--j2-blue-4)',\n        'blue-5': 'var(--j2-blue-5)',\n        'blue-6': 'var(--j2-blue-6)',\n        'blue-7': 'var(--j2-blue-7)',\n        'blue-8': 'var(--j2-blue-8)',\n        'blue-9': 'var(--j2-blue-9)',\n        'blue-10': 'var(--j2-blue-10)',\n        'blue-11': 'var(--j2-blue-11)',\n        'blue-12': 'var(--j2-blue-12)',\n        'gray-1': 'var(--j2-gray-1)',\n        'gray-2': 'var(--j2-gray-2)',\n        'gray-3': 'var(--j2-gray-3)',\n        'gray-4': 'var(--j2-gray-4)',\n        'gray-5': 'var(--j2-gray-5)',\n        'gray-6': 'var(--j2-gray-6)',\n        'gray-7': 'var(--j2-gray-7)',\n        'gray-8': 'var(--j2-gray-8)',\n        'gray-9': 'var(--j2-gray-9)',\n        'gray-10': 'var(--j2-gray-10)',\n        'gray-11': 'var(--j2-gray-11)',\n        'gray-12': 'var(--j2-gray-12)',\n        'green-1': 'var(--j2-green-1)',\n        'green-2': 'var(--j2-green-2)',\n        'green-3': 'var(--j2-green-3)',\n        'green-4': 'var(--j2-green-4)',\n        'green-5': 'var(--j2-green-5)',\n        'green-6': 'var(--j2-green-6)',\n        'green-7': 'var(--j2-green-7)',\n        'green-8': 'var(--j2-green-8)',\n        'green-9': 'var(--j2-green-9)',\n        'green-10': 'var(--j2-green-10)',\n        'green-11': 'var(--j2-green-11)',\n        'green-12': 'var(--j2-green-12)',\n        'gold-1': 'var(--j2-gold-1)',\n        'gold-2': 'var(--j2-gold-2)',\n        'gold-3': 'var(--j2-gold-3)',\n        'gold-4': 'var(--j2-gold-4)',\n        'gold-5': 'var(--j2-gold-5)',\n        'gold-6': 'var(--j2-gold-6)',\n        'gold-7': 'var(--j2-gold-7)',\n        'gold-8': 'var(--j2-gold-8)',\n        'gold-9': 'var(--j2-gold-9)',\n        'gold-10': 'var(--j2-gold-10)',\n        'gold-11': 'var(--j2-gold-11)',\n        'gold-12': 'var(--j2-gold-12)',\n        'red-1': 'var(--j2-red-1)',\n        'red-2': 'var(--j2-red-2)',\n        'red-3': 'var(--j2-red-3)',\n        'red-4': 'var(--j2-red-4)',\n        'red-5': 'var(--j2-red-5)',\n        'red-6': 'var(--j2-red-6)',\n        'red-7': 'var(--j2-red-7)',\n        'red-8': 'var(--j2-red-8)',\n        'red-9': 'var(--j2-red-9)',\n        'red-10': 'var(--j2-red-10)',\n        'red-11': 'var(--j2-red-11)',\n        'red-12': 'var(--j2-red-12)',\n\n        // Data visualization tokens\n        'interval-1-1': 'var(--j2-color-interval-1-1)',\n        'interval-2-1': 'var(--j2-color-interval-2-1)',\n        'interval-2-2': 'var(--j2-color-interval-2-2)',\n        'interval-3-1': 'var(--j2-color-interval-3-1)',\n        'interval-3-2': 'var(--j2-color-interval-3-2)',\n        'interval-3-3': 'var(--j2-color-interval-3-3)',\n        'interval-4-1': 'var(--j2-color-interval-4-1)',\n        'interval-4-2': 'var(--j2-color-interval-4-2)',\n        'interval-4-3': 'var(--j2-color-interval-4-3)',\n        'interval-4-4': 'var(--j2-color-interval-4-4)',\n        'interval-5-1': 'var(--j2-color-interval-5-1)',\n        'interval-5-2': 'var(--j2-color-interval-5-2)',\n        'interval-5-3': 'var(--j2-color-interval-5-3)',\n        'interval-5-4': 'var(--j2-color-interval-5-4)',\n        'interval-5-5': 'var(--j2-color-interval-5-5)',\n        'interval-6-1': 'var(--j2-color-interval-6-1)',\n        'interval-6-2': 'var(--j2-color-interval-6-2)',\n        'interval-6-3': 'var(--j2-color-interval-6-3)',\n        'interval-6-4': 'var(--j2-color-interval-6-4)',\n        'interval-6-5': 'var(--j2-color-interval-6-5)',\n        'interval-6-6': 'var(--j2-color-interval-6-6)',\n        'interval-7-1': 'var(--j2-color-interval-7-1)',\n        'interval-7-2': 'var(--j2-color-interval-7-2)',\n        'interval-7-3': 'var(--j2-color-interval-7-3)',\n        'interval-7-4': 'var(--j2-color-interval-7-4)',\n        'interval-7-5': 'var(--j2-color-interval-7-5)',\n        'interval-7-6': 'var(--j2-color-interval-7-6)',\n        'interval-7-7': 'var(--j2-color-interval-7-7)',\n        'ramp-orange-1': 'var(--j2-color-ramp-orange-1)',\n        'ramp-orange-2': 'var(--j2-color-ramp-orange-2)',\n        'ramp-orange-3': 'var(--j2-color-ramp-orange-3)',\n        'ramp-orange-4': 'var(--j2-color-ramp-orange-4)',\n        'ramp-orange-5': 'var(--j2-color-ramp-orange-5)',\n        'ramp-blue-1': 'var(--j2-color-ramp-blue-1)',\n        'ramp-blue-2': 'var(--j2-color-ramp-blue-2)',\n        'ramp-blue-3': 'var(--j2-color-ramp-blue-3)',\n        'ramp-blue-4': 'var(--j2-color-ramp-blue-4)',\n        'ramp-blue-5': 'var(--j2-color-ramp-blue-5)',\n        'ramp-green-1': 'var(--j2-color-ramp-green-1)',\n        'ramp-green-2': 'var(--j2-color-ramp-green-2)',\n        'ramp-green-3': 'var(--j2-color-ramp-green-3)',\n        'ramp-green-4': 'var(--j2-color-ramp-green-4)',\n        'ramp-green-5': 'var(--j2-color-ramp-green-5)',\n        'binary-positive': 'var(--j2-color-binary-positive)',\n        'binary-negative': 'var(--j2-color-binary-negative)',\n        'binary-alt-positive': 'var(--j2-color-binary-alt-positive)',\n        'binary-alt-negative': 'var(--j2-color-binary-alt-negative)',\n        'categorical-1': 'var(--j2-color-categorical-1)',\n        'categorical-2': 'var(--j2-color-categorical-2)',\n        'categorical-3': 'var(--j2-color-categorical-3)',\n        'categorical-4': 'var(--j2-color-categorical-4)',\n        'categorical-5': 'var(--j2-color-categorical-5)',\n        'categorical-6': 'var(--j2-color-categorical-6)',\n        'categorical-7': 'var(--j2-color-categorical-7)',\n        'categorical-8': 'var(--j2-color-categorical-8)',\n        'categorical-other': 'var(--j2-color-categorical-other)',\n\n        // Primary color tokens\n        primary: 'var(--j2-color-primary)',\n        'primary-hover': 'var(--j2-color-primary-hover)',\n        'primary-active': 'var(--j2-color-primary-active)',\n        'primary-bg': 'var(--j2-color-primary-bg)',\n        'primary-bg-hover': 'var(--j2-color-primary-bg-hover)',\n        'primary-border': 'var(--j2-color-primary-border)',\n        'primary-border-hover': 'var(--j2-color-primary-border-hover)',\n        'primary-text': 'var(--j2-color-primary-text)',\n        'primary-text-hover': 'var(--j2-color-primary-text-hover)',\n        'primary-text-active': 'var(--j2-color-primary-text-active)',\n\n        // Text color tokens\n        text: 'var(--j2-color-text)',\n        'text-secondary': 'var(--j2-color-text-secondary)',\n        'text-tertiary': 'var(--j2-color-text-tertiary)',\n        'text-quaternary': 'var(--j2-color-text-quaternary)',\n        'text-heading': 'var(--j2-color-text-heading)',\n        'text-label': 'var(--j2-color-text-label)',\n        'text-description': 'var(--j2-color-text-description)',\n        'text-disabled': 'var(--j2-color-text-disabled)',\n        'text-placeholder': 'var(--j2-color-text-placeholder)',\n\n        // Border color tokens\n        border: 'var(--j2-color-border)',\n        'border-secondary': 'var(--j2-color-border-secondary)',\n\n        // Background color tokens\n        'bg-layout': 'var(--j2-color-bg-layout)',\n        'bg-elevated': 'var(--j2-color-bg-elevated)',\n        'bg-mask': 'var(--j2-color-bg-mask)',\n        'bg-spotlight': 'var(--j2-color-bg-spotlight)',\n\n        // Status colors\n        success: 'var(--j2-color-success)',\n        'success-bg': 'var(--j2-color-success-bg)',\n        'success-bg-hover': 'var(--j2-color-success-bg-hover)',\n        'success-border': 'var(--j2-color-success-border)',\n        warning: 'var(--j2-color-warning)',\n        'warning-bg': 'var(--j2-color-warning-bg)',\n        'warning-bg-hover': 'var(--j2-color-warning-bg-hover)',\n        'warning-border': 'var(--j2-color-warning-border)',\n        error: 'var(--j2-color-error)',\n        'error-bg': 'var(--j2-color-error-bg)',\n        'error-bg-hover': 'var(--j2-color-error-bg-hover)',\n        'error-border': 'var(--j2-color-error-border)',\n        info: 'var(--j2-color-info)',\n        'info-bg': 'var(--j2-color-info-bg)',\n        'info-bg-hover': 'var(--j2-color-info-bg-hover)',\n        'info-border': 'var(--j2-color-info-border)',\n\n        // Icon colors\n        icon: 'var(--j2-color-icon)',\n        'icon-hover': 'var(--j2-color-icon-hover)',\n      },\n    },\n    extend: {\n      borderColor: {\n        DEFAULT: 'var(--j2-color-border)',\n      },\n      fontWeight: {\n        normal: '400',\n        medium: '500',\n        semibold: '600',\n        bold: '600',\n      },\n      borderWidth: {\n        j2: 'var(--j2-line-width)',\n        'j2-bold': 'var(--j2-line-width-bold)',\n        'j2-focus': 'var(--j2-line-width-focus)',\n      },\n      borderRadius: {\n        j2: 'var(--j2-border-radius)',\n        'j2-lg': 'var(--j2-border-radius-lg)',\n        'j2-sm': 'var(--j2-border-radius-sm)',\n        'j2-xs': 'var(--j2-border-radius-xs)',\n      },\n      fontSize: {\n        'j2-xs': [\n          'var(--j2-font-size-xs)',\n          { lineHeight: 'var(--j2-line-height-xs)' },\n        ] as [string, { lineHeight: string }],\n        'j2-lg': [\n          'var(--j2-font-size-lg)',\n          { lineHeight: 'var(--j2-line-height-lg)' },\n        ] as [string, { lineHeight: string }],\n      },\n      spacing: {\n        j2: 'var(--j2-size)',\n        'j2-xs': 'var(--j2-size-xs)',\n        'j2-sm': 'var(--j2-size-sm)',\n        'j2-md': 'var(--j2-size-md)',\n        'j2-lg': 'var(--j2-size-lg)',\n        'j2-xl': 'var(--j2-size-xl)',\n        'j2-xxl': 'var(--j2-size-xxl)',\n      },\n    },\n  },\n}\n\n// Default export for this project's own Tailwind config\nexport default {\n  ...tailwindPreset,\n  content: ['./src/**/*.{ts,tsx,mdx}'],\n  plugins: [],\n} satisfies Config\n"],"mappings":"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"}

package/dist/tailwind.config.d.ts

@@ -66,6 +66,62 @@ export declare const tailwindPreset: {
                 'red-10': string;
                 'red-11': string;
                 'red-12': string;
+                'interval-1-1': string;
+                'interval-2-1': string;
+                'interval-2-2': string;
+                'interval-3-1': string;
+                'interval-3-2': string;
+                'interval-3-3': string;
+                'interval-4-1': string;
+                'interval-4-2': string;
+                'interval-4-3': string;
+                'interval-4-4': string;
+                'interval-5-1': string;
+                'interval-5-2': string;
+                'interval-5-3': string;
+                'interval-5-4': string;
+                'interval-5-5': string;
+                'interval-6-1': string;
+                'interval-6-2': string;
+                'interval-6-3': string;
+                'interval-6-4': string;
+                'interval-6-5': string;
+                'interval-6-6': string;
+                'interval-7-1': string;
+                'interval-7-2': string;
+                'interval-7-3': string;
+                'interval-7-4': string;
+                'interval-7-5': string;
+                'interval-7-6': string;
+                'interval-7-7': string;
+                'ramp-orange-1': string;
+                'ramp-orange-2': string;
+                'ramp-orange-3': string;
+                'ramp-orange-4': string;
+                'ramp-orange-5': string;
+                'ramp-blue-1': string;
+                'ramp-blue-2': string;
+                'ramp-blue-3': string;
+                'ramp-blue-4': string;
+                'ramp-blue-5': string;
+                'ramp-green-1': string;
+                'ramp-green-2': string;
+                'ramp-green-3': string;
+                'ramp-green-4': string;
+                'ramp-green-5': string;
+                'binary-positive': string;
+                'binary-negative': string;
+                'binary-alt-positive': string;
+                'binary-alt-negative': string;
+                'categorical-1': string;
+                'categorical-2': string;
+                'categorical-3': string;
+                'categorical-4': string;
+                'categorical-5': string;
+                'categorical-6': string;
+                'categorical-7': string;
+                'categorical-8': string;
+                'categorical-other': string;
                 primary: string;
                 'primary-hover': string;
                 'primary-active': string;
@@ -222,6 +278,62 @@ declare const _default: {
                 'red-10': string;
                 'red-11': string;
                 'red-12': string;
+                'interval-1-1': string;
+                'interval-2-1': string;
+                'interval-2-2': string;
+                'interval-3-1': string;
+                'interval-3-2': string;
+                'interval-3-3': string;
+                'interval-4-1': string;
+                'interval-4-2': string;
+                'interval-4-3': string;
+                'interval-4-4': string;
+                'interval-5-1': string;
+                'interval-5-2': string;
+                'interval-5-3': string;
+                'interval-5-4': string;
+                'interval-5-5': string;
+                'interval-6-1': string;
+                'interval-6-2': string;
+                'interval-6-3': string;
+                'interval-6-4': string;
+                'interval-6-5': string;
+                'interval-6-6': string;
+                'interval-7-1': string;
+                'interval-7-2': string;
+                'interval-7-3': string;
+                'interval-7-4': string;
+                'interval-7-5': string;
+                'interval-7-6': string;
+                'interval-7-7': string;
+                'ramp-orange-1': string;
+                'ramp-orange-2': string;
+                'ramp-orange-3': string;
+                'ramp-orange-4': string;
+                'ramp-orange-5': string;
+                'ramp-blue-1': string;
+                'ramp-blue-2': string;
+                'ramp-blue-3': string;
+                'ramp-blue-4': string;
+                'ramp-blue-5': string;
+                'ramp-green-1': string;
+                'ramp-green-2': string;
+                'ramp-green-3': string;
+                'ramp-green-4': string;
+                'ramp-green-5': string;
+                'binary-positive': string;
+                'binary-negative': string;
+                'binary-alt-positive': string;
+                'binary-alt-negative': string;
+                'categorical-1': string;
+                'categorical-2': string;
+                'categorical-3': string;
+                'categorical-4': string;
+                'categorical-5': string;
+                'categorical-6': string;
+                'categorical-7': string;
+                'categorical-8': string;
+                'categorical-other': string;
                 primary: string;
                 'primary-hover': string;
                 'primary-active': string;

package/dist/tailwind.js

@@ -66,6 +66,62 @@ var tailwindPreset = { theme: {
 			"red-10": "var(--j2-red-10)",
 			"red-11": "var(--j2-red-11)",
 			"red-12": "var(--j2-red-12)",
+			"interval-1-1": "var(--j2-color-interval-1-1)",
+			"interval-2-1": "var(--j2-color-interval-2-1)",
+			"interval-2-2": "var(--j2-color-interval-2-2)",
+			"interval-3-1": "var(--j2-color-interval-3-1)",
+			"interval-3-2": "var(--j2-color-interval-3-2)",
+			"interval-3-3": "var(--j2-color-interval-3-3)",
+			"interval-4-1": "var(--j2-color-interval-4-1)",
+			"interval-4-2": "var(--j2-color-interval-4-2)",
+			"interval-4-3": "var(--j2-color-interval-4-3)",
+			"interval-4-4": "var(--j2-color-interval-4-4)",
+			"interval-5-1": "var(--j2-color-interval-5-1)",
+			"interval-5-2": "var(--j2-color-interval-5-2)",
+			"interval-5-3": "var(--j2-color-interval-5-3)",
+			"interval-5-4": "var(--j2-color-interval-5-4)",
+			"interval-5-5": "var(--j2-color-interval-5-5)",
+			"interval-6-1": "var(--j2-color-interval-6-1)",
+			"interval-6-2": "var(--j2-color-interval-6-2)",
+			"interval-6-3": "var(--j2-color-interval-6-3)",
+			"interval-6-4": "var(--j2-color-interval-6-4)",
+			"interval-6-5": "var(--j2-color-interval-6-5)",
+			"interval-6-6": "var(--j2-color-interval-6-6)",
+			"interval-7-1": "var(--j2-color-interval-7-1)",
+			"interval-7-2": "var(--j2-color-interval-7-2)",
+			"interval-7-3": "var(--j2-color-interval-7-3)",
+			"interval-7-4": "var(--j2-color-interval-7-4)",
+			"interval-7-5": "var(--j2-color-interval-7-5)",
+			"interval-7-6": "var(--j2-color-interval-7-6)",
+			"interval-7-7": "var(--j2-color-interval-7-7)",
+			"ramp-orange-1": "var(--j2-color-ramp-orange-1)",
+			"ramp-orange-2": "var(--j2-color-ramp-orange-2)",
+			"ramp-orange-3": "var(--j2-color-ramp-orange-3)",
+			"ramp-orange-4": "var(--j2-color-ramp-orange-4)",
+			"ramp-orange-5": "var(--j2-color-ramp-orange-5)",
+			"ramp-blue-1": "var(--j2-color-ramp-blue-1)",
+			"ramp-blue-2": "var(--j2-color-ramp-blue-2)",
+			"ramp-blue-3": "var(--j2-color-ramp-blue-3)",
+			"ramp-blue-4": "var(--j2-color-ramp-blue-4)",
+			"ramp-blue-5": "var(--j2-color-ramp-blue-5)",
+			"ramp-green-1": "var(--j2-color-ramp-green-1)",
+			"ramp-green-2": "var(--j2-color-ramp-green-2)",
+			"ramp-green-3": "var(--j2-color-ramp-green-3)",
+			"ramp-green-4": "var(--j2-color-ramp-green-4)",
+			"ramp-green-5": "var(--j2-color-ramp-green-5)",
+			"binary-positive": "var(--j2-color-binary-positive)",
+			"binary-negative": "var(--j2-color-binary-negative)",
+			"binary-alt-positive": "var(--j2-color-binary-alt-positive)",
+			"binary-alt-negative": "var(--j2-color-binary-alt-negative)",
+			"categorical-1": "var(--j2-color-categorical-1)",
+			"categorical-2": "var(--j2-color-categorical-2)",
+			"categorical-3": "var(--j2-color-categorical-3)",
+			"categorical-4": "var(--j2-color-categorical-4)",
+			"categorical-5": "var(--j2-color-categorical-5)",
+			"categorical-6": "var(--j2-color-categorical-6)",
+			"categorical-7": "var(--j2-color-categorical-7)",
+			"categorical-8": "var(--j2-color-categorical-8)",
+			"categorical-other": "var(--j2-color-categorical-other)",
 			primary: "var(--j2-color-primary)",
 			"primary-hover": "var(--j2-color-primary-hover)",
 			"primary-active": "var(--j2-color-primary-active)",

package/dist/tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.js","names":[],"sources":["../tailwind.config.ts"],"sourcesContent":["import type { Config } from 'tailwindcss'\n\n// Export as a preset for consuming apps\nexport const tailwindPreset = {\n  theme: {\n    colors: {\n      // Inlined rather than read from `tailwindcss/colors`: the root export\n      // re-exports this preset, so a runtime import here lands in\n      // dist/index.js and makes tailwindcss — which consumers install as a\n      // devDependency — a runtime dependency of every component import.\n      transparent: 'transparent',\n      current: 'currentColor',\n      white: '#fff',\n      black: '#000',\n      j2: {\n        // Generic color definitions\n        'blue-1': 'var(--j2-blue-1)',\n        'blue-2': 'var(--j2-blue-2)',\n        'blue-3': 'var(--j2-blue-3)',\n        'blue-4': 'var(--j2-blue-4)',\n        'blue-5': 'var(--j2-blue-5)',\n        'blue-6': 'var(--j2-blue-6)',\n        'blue-7': 'var(--j2-blue-7)',\n        'blue-8': 'var(--j2-blue-8)',\n        'blue-9': 'var(--j2-blue-9)',\n        'blue-10': 'var(--j2-blue-10)',\n        'blue-11': 'var(--j2-blue-11)',\n        'blue-12': 'var(--j2-blue-12)',\n        'gray-1': 'var(--j2-gray-1)',\n        'gray-2': 'var(--j2-gray-2)',\n        'gray-3': 'var(--j2-gray-3)',\n        'gray-4': 'var(--j2-gray-4)',\n        'gray-5': 'var(--j2-gray-5)',\n        'gray-6': 'var(--j2-gray-6)',\n        'gray-7': 'var(--j2-gray-7)',\n        'gray-8': 'var(--j2-gray-8)',\n        'gray-9': 'var(--j2-gray-9)',\n        'gray-10': 'var(--j2-gray-10)',\n        'gray-11': 'var(--j2-gray-11)',\n        'gray-12': 'var(--j2-gray-12)',\n        'green-1': 'var(--j2-green-1)',\n        'green-2': 'var(--j2-green-2)',\n        'green-3': 'var(--j2-green-3)',\n        'green-4': 'var(--j2-green-4)',\n        'green-5': 'var(--j2-green-5)',\n        'green-6': 'var(--j2-green-6)',\n        'green-7': 'var(--j2-green-7)',\n        'green-8': 'var(--j2-green-8)',\n        'green-9': 'var(--j2-green-9)',\n        'green-10': 'var(--j2-green-10)',\n        'green-11': 'var(--j2-green-11)',\n        'green-12': 'var(--j2-green-12)',\n        'gold-1': 'var(--j2-gold-1)',\n        'gold-2': 'var(--j2-gold-2)',\n        'gold-3': 'var(--j2-gold-3)',\n        'gold-4': 'var(--j2-gold-4)',\n        'gold-5': 'var(--j2-gold-5)',\n        'gold-6': 'var(--j2-gold-6)',\n        'gold-7': 'var(--j2-gold-7)',\n        'gold-8': 'var(--j2-gold-8)',\n        'gold-9': 'var(--j2-gold-9)',\n        'gold-10': 'var(--j2-gold-10)',\n        'gold-11': 'var(--j2-gold-11)',\n        'gold-12': 'var(--j2-gold-12)',\n        'red-1': 'var(--j2-red-1)',\n        'red-2': 'var(--j2-red-2)',\n        'red-3': 'var(--j2-red-3)',\n        'red-4': 'var(--j2-red-4)',\n        'red-5': 'var(--j2-red-5)',\n        'red-6': 'var(--j2-red-6)',\n        'red-7': 'var(--j2-red-7)',\n        'red-8': 'var(--j2-red-8)',\n        'red-9': 'var(--j2-red-9)',\n        'red-10': 'var(--j2-red-10)',\n        'red-11': 'var(--j2-red-11)',\n        'red-12': 'var(--j2-red-12)',\n\n        // Primary color tokens\n        primary: 'var(--j2-color-primary)',\n        'primary-hover': 'var(--j2-color-primary-hover)',\n        'primary-active': 'var(--j2-color-primary-active)',\n        'primary-bg': 'var(--j2-color-primary-bg)',\n        'primary-bg-hover': 'var(--j2-color-primary-bg-hover)',\n        'primary-border': 'var(--j2-color-primary-border)',\n        'primary-border-hover': 'var(--j2-color-primary-border-hover)',\n        'primary-text': 'var(--j2-color-primary-text)',\n        'primary-text-hover': 'var(--j2-color-primary-text-hover)',\n        'primary-text-active': 'var(--j2-color-primary-text-active)',\n\n        // Text color tokens\n        text: 'var(--j2-color-text)',\n        'text-secondary': 'var(--j2-color-text-secondary)',\n        'text-tertiary': 'var(--j2-color-text-tertiary)',\n        'text-quaternary': 'var(--j2-color-text-quaternary)',\n        'text-heading': 'var(--j2-color-text-heading)',\n        'text-label': 'var(--j2-color-text-label)',\n        'text-description': 'var(--j2-color-text-description)',\n        'text-disabled': 'var(--j2-color-text-disabled)',\n        'text-placeholder': 'var(--j2-color-text-placeholder)',\n\n        // Border color tokens\n        border: 'var(--j2-color-border)',\n        'border-secondary': 'var(--j2-color-border-secondary)',\n\n        // Background color tokens\n        'bg-layout': 'var(--j2-color-bg-layout)',\n        'bg-elevated': 'var(--j2-color-bg-elevated)',\n        'bg-mask': 'var(--j2-color-bg-mask)',\n        'bg-spotlight': 'var(--j2-color-bg-spotlight)',\n\n        // Status colors\n        success: 'var(--j2-color-success)',\n        'success-bg': 'var(--j2-color-success-bg)',\n        'success-bg-hover': 'var(--j2-color-success-bg-hover)',\n        'success-border': 'var(--j2-color-success-border)',\n        warning: 'var(--j2-color-warning)',\n        'warning-bg': 'var(--j2-color-warning-bg)',\n        'warning-bg-hover': 'var(--j2-color-warning-bg-hover)',\n        'warning-border': 'var(--j2-color-warning-border)',\n        error: 'var(--j2-color-error)',\n        'error-bg': 'var(--j2-color-error-bg)',\n        'error-bg-hover': 'var(--j2-color-error-bg-hover)',\n        'error-border': 'var(--j2-color-error-border)',\n        info: 'var(--j2-color-info)',\n        'info-bg': 'var(--j2-color-info-bg)',\n        'info-bg-hover': 'var(--j2-color-info-bg-hover)',\n        'info-border': 'var(--j2-color-info-border)',\n\n        // Icon colors\n        icon: 'var(--j2-color-icon)',\n        'icon-hover': 'var(--j2-color-icon-hover)',\n      },\n    },\n    extend: {\n      borderColor: {\n        DEFAULT: 'var(--j2-color-border)',\n      },\n      fontWeight: {\n        normal: '400',\n        medium: '500',\n        semibold: '600',\n        bold: '600',\n      },\n      borderWidth: {\n        j2: 'var(--j2-line-width)',\n        'j2-bold': 'var(--j2-line-width-bold)',\n        'j2-focus': 'var(--j2-line-width-focus)',\n      },\n      borderRadius: {\n        j2: 'var(--j2-border-radius)',\n        'j2-lg': 'var(--j2-border-radius-lg)',\n        'j2-sm': 'var(--j2-border-radius-sm)',\n        'j2-xs': 'var(--j2-border-radius-xs)',\n      },\n      fontSize: {\n        'j2-xs': [\n          'var(--j2-font-size-xs)',\n          { lineHeight: 'var(--j2-line-height-xs)' },\n        ] as [string, { lineHeight: string }],\n        'j2-lg': [\n          'var(--j2-font-size-lg)',\n          { lineHeight: 'var(--j2-line-height-lg)' },\n        ] as [string, { lineHeight: string }],\n      },\n      spacing: {\n        j2: 'var(--j2-size)',\n        'j2-xs': 'var(--j2-size-xs)',\n        'j2-sm': 'var(--j2-size-sm)',\n        'j2-md': 'var(--j2-size-md)',\n        'j2-lg': 'var(--j2-size-lg)',\n        'j2-xl': 'var(--j2-size-xl)',\n        'j2-xxl': 'var(--j2-size-xxl)',\n      },\n    },\n  },\n}\n\n// Default export for this project's own Tailwind config\nexport default {\n  ...tailwindPreset,\n  content: ['./src/**/*.{ts,tsx,mdx}'],\n  plugins: [],\n} satisfies Config\n"],"mappings":";AAGA,IAAa,iBAAiB,EAC5B,OAAO;CACL,QAAQ;EAKN,aAAa;EACb,SAAS;EACT,OAAO;EACP,OAAO;EACP,IAAI;GAEF,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,YAAY;GACZ,YAAY;GACZ,YAAY;GACZ,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,UAAU;GACV,UAAU;GACV,UAAU;GAGV,SAAS;GACT,iBAAiB;GACjB,kBAAkB;GAClB,cAAc;GACd,oBAAoB;GACpB,kBAAkB;GAClB,wBAAwB;GACxB,gBAAgB;GAChB,sBAAsB;GACtB,uBAAuB;GAGvB,MAAM;GACN,kBAAkB;GAClB,iBAAiB;GACjB,mBAAmB;GACnB,gBAAgB;GAChB,cAAc;GACd,oBAAoB;GACpB,iBAAiB;GACjB,oBAAoB;GAGpB,QAAQ;GACR,oBAAoB;GAGpB,aAAa;GACb,eAAe;GACf,WAAW;GACX,gBAAgB;GAGhB,SAAS;GACT,cAAc;GACd,oBAAoB;GACpB,kBAAkB;GAClB,SAAS;GACT,cAAc;GACd,oBAAoB;GACpB,kBAAkB;GAClB,OAAO;GACP,YAAY;GACZ,kBAAkB;GAClB,gBAAgB;GAChB,MAAM;GACN,WAAW;GACX,iBAAiB;GACjB,eAAe;GAGf,MAAM;GACN,cAAc;EAChB;CACF;CACA,QAAQ;EACN,aAAa,EACX,SAAS,yBACX;EACA,YAAY;GACV,QAAQ;GACR,QAAQ;GACR,UAAU;GACV,MAAM;EACR;EACA,aAAa;GACX,IAAI;GACJ,WAAW;GACX,YAAY;EACd;EACA,cAAc;GACZ,IAAI;GACJ,SAAS;GACT,SAAS;GACT,SAAS;EACX;EACA,UAAU;GACR,SAAS,CACP,0BACA,EAAE,YAAY,2BAA2B,CAC3C;GACA,SAAS,CACP,0BACA,EAAE,YAAY,2BAA2B,CAC3C;EACF;EACA,SAAS;GACP,IAAI;GACJ,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,UAAU;EACZ;CACF;AACF,EACF;AAGA,IAAA,0BAAe;CACb,GAAG;CACH,SAAS,CAAC,yBAAyB;CACnC,SAAS,CAAC;AACZ"}
+{"version":3,"file":"tailwind.js","names":[],"sources":["../tailwind.config.ts"],"sourcesContent":["import type { Config } from 'tailwindcss'\n\n// Export as a preset for consuming apps\nexport const tailwindPreset = {\n  theme: {\n    colors: {\n      // Inlined rather than read from `tailwindcss/colors`: the root export\n      // re-exports this preset, so a runtime import here lands in\n      // dist/index.js and makes tailwindcss — which consumers install as a\n      // devDependency — a runtime dependency of every component import.\n      transparent: 'transparent',\n      current: 'currentColor',\n      white: '#fff',\n      black: '#000',\n      j2: {\n        // Generic color definitions\n        'blue-1': 'var(--j2-blue-1)',\n        'blue-2': 'var(--j2-blue-2)',\n        'blue-3': 'var(--j2-blue-3)',\n        'blue-4': 'var(--j2-blue-4)',\n        'blue-5': 'var(--j2-blue-5)',\n        'blue-6': 'var(--j2-blue-6)',\n        'blue-7': 'var(--j2-blue-7)',\n        'blue-8': 'var(--j2-blue-8)',\n        'blue-9': 'var(--j2-blue-9)',\n        'blue-10': 'var(--j2-blue-10)',\n        'blue-11': 'var(--j2-blue-11)',\n        'blue-12': 'var(--j2-blue-12)',\n        'gray-1': 'var(--j2-gray-1)',\n        'gray-2': 'var(--j2-gray-2)',\n        'gray-3': 'var(--j2-gray-3)',\n        'gray-4': 'var(--j2-gray-4)',\n        'gray-5': 'var(--j2-gray-5)',\n        'gray-6': 'var(--j2-gray-6)',\n        'gray-7': 'var(--j2-gray-7)',\n        'gray-8': 'var(--j2-gray-8)',\n        'gray-9': 'var(--j2-gray-9)',\n        'gray-10': 'var(--j2-gray-10)',\n        'gray-11': 'var(--j2-gray-11)',\n        'gray-12': 'var(--j2-gray-12)',\n        'green-1': 'var(--j2-green-1)',\n        'green-2': 'var(--j2-green-2)',\n        'green-3': 'var(--j2-green-3)',\n        'green-4': 'var(--j2-green-4)',\n        'green-5': 'var(--j2-green-5)',\n        'green-6': 'var(--j2-green-6)',\n        'green-7': 'var(--j2-green-7)',\n        'green-8': 'var(--j2-green-8)',\n        'green-9': 'var(--j2-green-9)',\n        'green-10': 'var(--j2-green-10)',\n        'green-11': 'var(--j2-green-11)',\n        'green-12': 'var(--j2-green-12)',\n        'gold-1': 'var(--j2-gold-1)',\n        'gold-2': 'var(--j2-gold-2)',\n        'gold-3': 'var(--j2-gold-3)',\n        'gold-4': 'var(--j2-gold-4)',\n        'gold-5': 'var(--j2-gold-5)',\n        'gold-6': 'var(--j2-gold-6)',\n        'gold-7': 'var(--j2-gold-7)',\n        'gold-8': 'var(--j2-gold-8)',\n        'gold-9': 'var(--j2-gold-9)',\n        'gold-10': 'var(--j2-gold-10)',\n        'gold-11': 'var(--j2-gold-11)',\n        'gold-12': 'var(--j2-gold-12)',\n        'red-1': 'var(--j2-red-1)',\n        'red-2': 'var(--j2-red-2)',\n        'red-3': 'var(--j2-red-3)',\n        'red-4': 'var(--j2-red-4)',\n        'red-5': 'var(--j2-red-5)',\n        'red-6': 'var(--j2-red-6)',\n        'red-7': 'var(--j2-red-7)',\n        'red-8': 'var(--j2-red-8)',\n        'red-9': 'var(--j2-red-9)',\n        'red-10': 'var(--j2-red-10)',\n        'red-11': 'var(--j2-red-11)',\n        'red-12': 'var(--j2-red-12)',\n\n        // Data visualization tokens\n        'interval-1-1': 'var(--j2-color-interval-1-1)',\n        'interval-2-1': 'var(--j2-color-interval-2-1)',\n        'interval-2-2': 'var(--j2-color-interval-2-2)',\n        'interval-3-1': 'var(--j2-color-interval-3-1)',\n        'interval-3-2': 'var(--j2-color-interval-3-2)',\n        'interval-3-3': 'var(--j2-color-interval-3-3)',\n        'interval-4-1': 'var(--j2-color-interval-4-1)',\n        'interval-4-2': 'var(--j2-color-interval-4-2)',\n        'interval-4-3': 'var(--j2-color-interval-4-3)',\n        'interval-4-4': 'var(--j2-color-interval-4-4)',\n        'interval-5-1': 'var(--j2-color-interval-5-1)',\n        'interval-5-2': 'var(--j2-color-interval-5-2)',\n        'interval-5-3': 'var(--j2-color-interval-5-3)',\n        'interval-5-4': 'var(--j2-color-interval-5-4)',\n        'interval-5-5': 'var(--j2-color-interval-5-5)',\n        'interval-6-1': 'var(--j2-color-interval-6-1)',\n        'interval-6-2': 'var(--j2-color-interval-6-2)',\n        'interval-6-3': 'var(--j2-color-interval-6-3)',\n        'interval-6-4': 'var(--j2-color-interval-6-4)',\n        'interval-6-5': 'var(--j2-color-interval-6-5)',\n        'interval-6-6': 'var(--j2-color-interval-6-6)',\n        'interval-7-1': 'var(--j2-color-interval-7-1)',\n        'interval-7-2': 'var(--j2-color-interval-7-2)',\n        'interval-7-3': 'var(--j2-color-interval-7-3)',\n        'interval-7-4': 'var(--j2-color-interval-7-4)',\n        'interval-7-5': 'var(--j2-color-interval-7-5)',\n        'interval-7-6': 'var(--j2-color-interval-7-6)',\n        'interval-7-7': 'var(--j2-color-interval-7-7)',\n        'ramp-orange-1': 'var(--j2-color-ramp-orange-1)',\n        'ramp-orange-2': 'var(--j2-color-ramp-orange-2)',\n        'ramp-orange-3': 'var(--j2-color-ramp-orange-3)',\n        'ramp-orange-4': 'var(--j2-color-ramp-orange-4)',\n        'ramp-orange-5': 'var(--j2-color-ramp-orange-5)',\n        'ramp-blue-1': 'var(--j2-color-ramp-blue-1)',\n        'ramp-blue-2': 'var(--j2-color-ramp-blue-2)',\n        'ramp-blue-3': 'var(--j2-color-ramp-blue-3)',\n        'ramp-blue-4': 'var(--j2-color-ramp-blue-4)',\n        'ramp-blue-5': 'var(--j2-color-ramp-blue-5)',\n        'ramp-green-1': 'var(--j2-color-ramp-green-1)',\n        'ramp-green-2': 'var(--j2-color-ramp-green-2)',\n        'ramp-green-3': 'var(--j2-color-ramp-green-3)',\n        'ramp-green-4': 'var(--j2-color-ramp-green-4)',\n        'ramp-green-5': 'var(--j2-color-ramp-green-5)',\n        'binary-positive': 'var(--j2-color-binary-positive)',\n        'binary-negative': 'var(--j2-color-binary-negative)',\n        'binary-alt-positive': 'var(--j2-color-binary-alt-positive)',\n        'binary-alt-negative': 'var(--j2-color-binary-alt-negative)',\n        'categorical-1': 'var(--j2-color-categorical-1)',\n        'categorical-2': 'var(--j2-color-categorical-2)',\n        'categorical-3': 'var(--j2-color-categorical-3)',\n        'categorical-4': 'var(--j2-color-categorical-4)',\n        'categorical-5': 'var(--j2-color-categorical-5)',\n        'categorical-6': 'var(--j2-color-categorical-6)',\n        'categorical-7': 'var(--j2-color-categorical-7)',\n        'categorical-8': 'var(--j2-color-categorical-8)',\n        'categorical-other': 'var(--j2-color-categorical-other)',\n\n        // Primary color tokens\n        primary: 'var(--j2-color-primary)',\n        'primary-hover': 'var(--j2-color-primary-hover)',\n        'primary-active': 'var(--j2-color-primary-active)',\n        'primary-bg': 'var(--j2-color-primary-bg)',\n        'primary-bg-hover': 'var(--j2-color-primary-bg-hover)',\n        'primary-border': 'var(--j2-color-primary-border)',\n        'primary-border-hover': 'var(--j2-color-primary-border-hover)',\n        'primary-text': 'var(--j2-color-primary-text)',\n        'primary-text-hover': 'var(--j2-color-primary-text-hover)',\n        'primary-text-active': 'var(--j2-color-primary-text-active)',\n\n        // Text color tokens\n        text: 'var(--j2-color-text)',\n        'text-secondary': 'var(--j2-color-text-secondary)',\n        'text-tertiary': 'var(--j2-color-text-tertiary)',\n        'text-quaternary': 'var(--j2-color-text-quaternary)',\n        'text-heading': 'var(--j2-color-text-heading)',\n        'text-label': 'var(--j2-color-text-label)',\n        'text-description': 'var(--j2-color-text-description)',\n        'text-disabled': 'var(--j2-color-text-disabled)',\n        'text-placeholder': 'var(--j2-color-text-placeholder)',\n\n        // Border color tokens\n        border: 'var(--j2-color-border)',\n        'border-secondary': 'var(--j2-color-border-secondary)',\n\n        // Background color tokens\n        'bg-layout': 'var(--j2-color-bg-layout)',\n        'bg-elevated': 'var(--j2-color-bg-elevated)',\n        'bg-mask': 'var(--j2-color-bg-mask)',\n        'bg-spotlight': 'var(--j2-color-bg-spotlight)',\n\n        // Status colors\n        success: 'var(--j2-color-success)',\n        'success-bg': 'var(--j2-color-success-bg)',\n        'success-bg-hover': 'var(--j2-color-success-bg-hover)',\n        'success-border': 'var(--j2-color-success-border)',\n        warning: 'var(--j2-color-warning)',\n        'warning-bg': 'var(--j2-color-warning-bg)',\n        'warning-bg-hover': 'var(--j2-color-warning-bg-hover)',\n        'warning-border': 'var(--j2-color-warning-border)',\n        error: 'var(--j2-color-error)',\n        'error-bg': 'var(--j2-color-error-bg)',\n        'error-bg-hover': 'var(--j2-color-error-bg-hover)',\n        'error-border': 'var(--j2-color-error-border)',\n        info: 'var(--j2-color-info)',\n        'info-bg': 'var(--j2-color-info-bg)',\n        'info-bg-hover': 'var(--j2-color-info-bg-hover)',\n        'info-border': 'var(--j2-color-info-border)',\n\n        // Icon colors\n        icon: 'var(--j2-color-icon)',\n        'icon-hover': 'var(--j2-color-icon-hover)',\n      },\n    },\n    extend: {\n      borderColor: {\n        DEFAULT: 'var(--j2-color-border)',\n      },\n      fontWeight: {\n        normal: '400',\n        medium: '500',\n        semibold: '600',\n        bold: '600',\n      },\n      borderWidth: {\n        j2: 'var(--j2-line-width)',\n        'j2-bold': 'var(--j2-line-width-bold)',\n        'j2-focus': 'var(--j2-line-width-focus)',\n      },\n      borderRadius: {\n        j2: 'var(--j2-border-radius)',\n        'j2-lg': 'var(--j2-border-radius-lg)',\n        'j2-sm': 'var(--j2-border-radius-sm)',\n        'j2-xs': 'var(--j2-border-radius-xs)',\n      },\n      fontSize: {\n        'j2-xs': [\n          'var(--j2-font-size-xs)',\n          { lineHeight: 'var(--j2-line-height-xs)' },\n        ] as [string, { lineHeight: string }],\n        'j2-lg': [\n          'var(--j2-font-size-lg)',\n          { lineHeight: 'var(--j2-line-height-lg)' },\n        ] as [string, { lineHeight: string }],\n      },\n      spacing: {\n        j2: 'var(--j2-size)',\n        'j2-xs': 'var(--j2-size-xs)',\n        'j2-sm': 'var(--j2-size-sm)',\n        'j2-md': 'var(--j2-size-md)',\n        'j2-lg': 'var(--j2-size-lg)',\n        'j2-xl': 'var(--j2-size-xl)',\n        'j2-xxl': 'var(--j2-size-xxl)',\n      },\n    },\n  },\n}\n\n// Default export for this project's own Tailwind config\nexport default {\n  ...tailwindPreset,\n  content: ['./src/**/*.{ts,tsx,mdx}'],\n  plugins: [],\n} satisfies Config\n"],"mappings":";AAGA,IAAa,iBAAiB,EAC5B,OAAO;CACL,QAAQ;EAKN,aAAa;EACb,SAAS;EACT,OAAO;EACP,OAAO;EACP,IAAI;GAEF,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,YAAY;GACZ,YAAY;GACZ,YAAY;GACZ,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,UAAU;GACV,UAAU;GACV,UAAU;GAGV,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GACjB,eAAe;GACf,eAAe;GACf,eAAe;GACf,eAAe;GACf,eAAe;GACf,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,gBAAgB;GAChB,mBAAmB;GACnB,mBAAmB;GACnB,uBAAuB;GACvB,uBAAuB;GACvB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GACjB,qBAAqB;GAGrB,SAAS;GACT,iBAAiB;GACjB,kBAAkB;GAClB,cAAc;GACd,oBAAoB;GACpB,kBAAkB;GAClB,wBAAwB;GACxB,gBAAgB;GAChB,sBAAsB;GACtB,uBAAuB;GAGvB,MAAM;GACN,kBAAkB;GAClB,iBAAiB;GACjB,mBAAmB;GACnB,gBAAgB;GAChB,cAAc;GACd,oBAAoB;GACpB,iBAAiB;GACjB,oBAAoB;GAGpB,QAAQ;GACR,oBAAoB;GAGpB,aAAa;GACb,eAAe;GACf,WAAW;GACX,gBAAgB;GAGhB,SAAS;GACT,cAAc;GACd,oBAAoB;GACpB,kBAAkB;GAClB,SAAS;GACT,cAAc;GACd,oBAAoB;GACpB,kBAAkB;GAClB,OAAO;GACP,YAAY;GACZ,kBAAkB;GAClB,gBAAgB;GAChB,MAAM;GACN,WAAW;GACX,iBAAiB;GACjB,eAAe;GAGf,MAAM;GACN,cAAc;EAChB;CACF;CACA,QAAQ;EACN,aAAa,EACX,SAAS,yBACX;EACA,YAAY;GACV,QAAQ;GACR,QAAQ;GACR,UAAU;GACV,MAAM;EACR;EACA,aAAa;GACX,IAAI;GACJ,WAAW;GACX,YAAY;EACd;EACA,cAAc;GACZ,IAAI;GACJ,SAAS;GACT,SAAS;GACT,SAAS;EACX;EACA,UAAU;GACR,SAAS,CACP,0BACA,EAAE,YAAY,2BAA2B,CAC3C;GACA,SAAS,CACP,0BACA,EAAE,YAAY,2BAA2B,CAC3C;EACF;EACA,SAAS;GACP,IAAI;GACJ,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,UAAU;EACZ;CACF;AACF,EACF;AAGA,IAAA,0BAAe;CACb,GAAG;CACH,SAAS,CAAC,yBAAyB;CACnC,SAAS,CAAC;AACZ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j2-health/design-system",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "type": "module",
   "description": "J2 Health shared React component library",
   "repository": {
@@ -113,7 +113,7 @@
     "tailwindcss": "^4.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.70.1",
+    "typescript-eslint": "^8.71.0",
     "vite": "^8.3.0",
     "vite-plugin-dts": "^5.1.1",
     "vite-plugin-svgr": "^5.2.0",

package/src/stylesheets/Colors.stories.tsx

@@ -0,0 +1,163 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const Swatch = ({ token }: { token: string }) => (
+  <div className="flex flex-col gap-1" style={{ width: 96 }}>
+    <div
+      className="rounded-j2-sm border border-j2-border-secondary"
+      style={{ height: 40, background: `var(${token})` }}
+    />
+    <code className="text-j2-xs text-j2-text-secondary">
+      {token.replace('--j2-color-', '').replace('--j2-', '')}
+    </code>
+  </div>
+)
+
+const Row = ({ title, tokens }: { title: string; tokens: string[] }) => (
+  <section className="flex flex-col gap-2">
+    <h5 className="m-0">{title}</h5>
+    <div className="flex flex-wrap gap-3">
+      {tokens.map((token) => (
+        <Swatch key={token} token={token} />
+      ))}
+    </div>
+  </section>
+)
+
+const Group = ({
+  title,
+  intro,
+  children,
+}: {
+  title: string
+  intro?: React.ReactNode
+  children: React.ReactNode
+}) => (
+  <section className="flex flex-col gap-4">
+    <h3 className="m-0">{title}</h3>
+    {intro && <p className="m-0 text-sm text-j2-text-secondary">{intro}</p>}
+    {children}
+  </section>
+)
+
+const range = (count: number) => Array.from({ length: count }, (_, i) => i + 1)
+const capitalize = (word: string) => word[0].toUpperCase() + word.slice(1)
+
+const SCALES = ['blue', 'gray', 'green', 'gold', 'red']
+const STATUSES = ['primary', 'success', 'warning', 'error', 'info']
+const STATUS_STEPS = ['', '-bg', '-bg-hover', '-border', '-hover', '-text']
+
+const ColorsPage = () => (
+  <div className="flex max-w-5xl flex-col gap-10 p-6">
+    <Group
+      title="Scales"
+      intro={
+        <>
+          The base palette, 1 (lightest) to 12 (darkest). Reach for a semantic
+          token first; use a scale step directly only when no semantic token
+          fits. Tailwind: <code>bg-j2-blue-9</code>.
+        </>
+      }
+    >
+      {SCALES.map((scale) => (
+        <Row
+          key={scale}
+          title={capitalize(scale)}
+          tokens={range(12).map((step) => `--j2-${scale}-${step}`)}
+        />
+      ))}
+    </Group>
+
+    <Group
+      title="Semantic"
+      intro="What a color means in the interface. Each status has its fill, background, border, hover and text steps."
+    >
+      {STATUSES.map((status) => (
+        <Row
+          key={status}
+          title={capitalize(status)}
+          tokens={STATUS_STEPS.map((step) => `--j2-color-${status}${step}`)}
+        />
+      ))}
+      <Row
+        title="Text"
+        tokens={[
+          '--j2-color-text',
+          '--j2-color-text-secondary',
+          '--j2-color-text-quaternary',
+          '--j2-color-text-disabled',
+        ]}
+      />
+      <Row
+        title="Surfaces and borders"
+        tokens={[
+          '--j2-color-bg-layout',
+          '--j2-color-bg-elevated',
+          '--j2-color-border',
+          '--j2-color-border-secondary',
+        ]}
+      />
+    </Group>
+
+    <Group
+      title="Data visualization"
+      intro={
+        <>
+          Colors for charts, maps and legends. None carries meaning on its own:
+          the consuming app decides what each one stands for. Tailwind classes
+          use the same names, e.g. <code>bg-j2-interval-5-3</code>.
+        </>
+      }
+    >
+      <p className="m-0 text-sm text-j2-text-secondary">
+        <code>interval-{'{n}-{k}'}</code> is step k of an orange ramp cut into n
+        classes. Use the family that matches the number of classes.
+      </p>
+      {range(7).map((n) => (
+        <Row
+          key={n}
+          title={`Sequential, ${n} ${n === 1 ? 'class' : 'classes'}`}
+          tokens={range(n).map((k) => `--j2-color-interval-${n}-${k}`)}
+        />
+      ))}
+      {['orange', 'blue', 'green'].map((name) => (
+        <Row
+          key={name}
+          title={`Sequential, five classes: ${name}`}
+          tokens={range(5).map((k) => `--j2-color-ramp-${name}-${k}`)}
+        />
+      ))}
+      <Row
+        title="Binary: green / red"
+        tokens={['--j2-color-binary-positive', '--j2-color-binary-negative']}
+      />
+      <Row
+        title="Binary: blue / orange"
+        tokens={[
+          '--j2-color-binary-alt-positive',
+          '--j2-color-binary-alt-negative',
+        ]}
+      />
+      <Row
+        title="Categorical"
+        tokens={[
+          ...range(8).map((k) => `--j2-color-categorical-${k}`),
+          '--j2-color-categorical-other',
+        ]}
+      />
+    </Group>
+  </div>
+)
+
+const meta = {
+  title: 'Foundations/Colors',
+  component: ColorsPage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof ColorsPage>
+
+// eslint-disable-next-line no-restricted-exports
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

package/src/stylesheets/base.css

@@ -251,6 +251,87 @@
   --j2-box-shadow-secondary: var(--ant-box-shadow-secondary);
   --j2-box-shadow-tertiary: var(--ant-box-shadow-tertiary);
 
+  /*
+   * Data visualization
+   * Colors for charts, maps and legends. None of them carries meaning on its
+   * own; the consuming app decides what each one stands for.
+   *
+   * Sequential (orange): `interval-{n}-{k}` is step k of a ramp cut into n
+   * classes, light to dark. Pick the family that matches the number of classes
+   * rather than sampling a longer one, so every class count stays legible.
+   */
+  --j2-color-interval-1-1: #fba94b;
+
+  --j2-color-interval-2-1: #fdd1a3;
+  --j2-color-interval-2-2: #fba94b;
+
+  --j2-color-interval-3-1: #fee2c4;
+  --j2-color-interval-3-2: #fdd1a3;
+  --j2-color-interval-3-3: #f08e2e;
+
+  --j2-color-interval-4-1: #fff4e6;
+  --j2-color-interval-4-2: #fdd1a3;
+  --j2-color-interval-4-3: #f08e2e;
+  --j2-color-interval-4-4: #a65200;
+
+  --j2-color-interval-5-1: #fff4e6;
+  --j2-color-interval-5-2: #fee2c4;
+  --j2-color-interval-5-3: #ffc385;
+  --j2-color-interval-5-4: #f08e2e;
+  --j2-color-interval-5-5: #a65200;
+
+  --j2-color-interval-6-1: #fff4e6;
+  --j2-color-interval-6-2: #fee2c4;
+  --j2-color-interval-6-3: #fdd1a3;
+  --j2-color-interval-6-4: #fba94b;
+  --j2-color-interval-6-5: #d97312;
+  --j2-color-interval-6-6: #a65200;
+
+  --j2-color-interval-7-1: #fff4e6;
+  --j2-color-interval-7-2: #fee2c4;
+  --j2-color-interval-7-3: #fdd1a3;
+  --j2-color-interval-7-4: #fba94b;
+  --j2-color-interval-7-5: #f08e2e;
+  --j2-color-interval-7-6: #d97312;
+  --j2-color-interval-7-7: #a65200;
+
+  /* Sequential, five classes, light to dark. */
+  --j2-color-ramp-orange-1: var(--j2-color-interval-5-1);
+  --j2-color-ramp-orange-2: var(--j2-color-interval-5-2);
+  --j2-color-ramp-orange-3: var(--j2-color-interval-5-3);
+  --j2-color-ramp-orange-4: var(--j2-color-interval-5-4);
+  --j2-color-ramp-orange-5: var(--j2-color-interval-5-5);
+  --j2-color-ramp-blue-1: #eef2f9;
+  --j2-color-ramp-blue-2: #c6d3e8;
+  --j2-color-ramp-blue-3: #93aacd;
+  --j2-color-ramp-blue-4: var(--j2-blue-11);
+  --j2-color-ramp-blue-5: var(--j2-blue-9);
+  --j2-color-ramp-green-1: #eef6ee;
+  --j2-color-ramp-green-2: #c8e2c9;
+  --j2-color-ramp-green-3: #94c797;
+  --j2-color-ramp-green-4: #5da261;
+  --j2-color-ramp-green-5: #2f6b33;
+
+  /* Binary: a yes/no measure. Two pairs; `alt` is blue/orange. */
+  --j2-color-binary-positive: var(--j2-green-7);
+  --j2-color-binary-negative: var(--j2-red-7);
+  --j2-color-binary-alt-positive: var(--j2-blue-11);
+  --j2-color-binary-alt-negative: var(--j2-color-interval-5-5);
+
+  /*
+   * Categorical: distinct hues for unordered groups, in the order to assign
+   * them. `other` is the catch-all once a grouping runs past the palette.
+   */
+  --j2-color-categorical-1: #4f86a8;
+  --j2-color-categorical-2: #c58940;
+  --j2-color-categorical-3: #8c5383;
+  --j2-color-categorical-4: #5b8a72;
+  --j2-color-categorical-5: #a34a63;
+  --j2-color-categorical-6: #2f8a8a;
+  --j2-color-categorical-7: #997b52;
+  --j2-color-categorical-8: #6d6d64;
+  --j2-color-categorical-other: #9a9a90;
+
   font-family: var(--j2-font-family);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -312,6 +393,35 @@ body {
   }
 }
 
+/*
+ * Caption text styles
+ * Small uppercase labels that name a group of content (a section, a column,
+ * a band of controls). Two sizes, each with one weight and one tracking:
+ *   - `j2-caption` (12px): captions in page and panel chrome.
+ *   - `j2-caption-xs` (10px): captions inside dense content, such as compact
+ *     cards, chart keys and inline popovers.
+ * In the components layer, so a utility (e.g. a text color) still wins.
+ */
+@layer components {
+  .j2-caption {
+    font-size: var(--j2-font-size-sm);
+    line-height: var(--j2-line-height-sm);
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--j2-color-text-secondary);
+  }
+
+  .j2-caption-xs {
+    font-size: var(--j2-font-size-xs);
+    line-height: var(--j2-line-height-xs);
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--j2-color-text-secondary);
+  }
+}
+
 @keyframes spin {
   from {
     transform: rotate(0deg);