@keboola/tailwind-config 0.1.1

package/README.md

@@ -0,0 +1,69 @@
+# @keboola/tailwind-config
+
+Shared Tailwind CSS v3 configuration for the Keboola UI platform —
+the same semantic color palette, plugins, and `tw-` class prefix that
+[`@keboola/design`](https://github.com/keboola/ui/tree/main/packages/design)
+is built on.
+
+Use this when you want your Tailwind-styled app to inherit the platform's
+visual primitives — most relevant for audiences B (Keboola-branded external
+builders) and audience A (internal monorepo work). Audience C (customer-
+branded) typically supplies its own tokens; this package is optional then.
+
+## Install
+
+```bash
+npm install -D @keboola/tailwind-config tailwindcss@^3
+# or
+yarn add -D @keboola/tailwind-config tailwindcss@^3
+```
+
+## Use
+
+Extend or reuse the config from your own `tailwind.config.{js,ts}`:
+
+```js
+import keboolaConfig from '@keboola/tailwind-config';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  ...keboolaConfig,
+  content: ['./src/**/*.{ts,tsx,mdx}'],
+};
+```
+
+### Subpath imports
+
+If you only need the raw token data:
+
+```ts
+import colors from '@keboola/tailwind-config/colors';
+import typography from '@keboola/tailwind-config/typography';
+```
+
+> **Heads up — `colors` and `typography` are shipped as `.ts` source.**
+> Resolution works when the consumer is **Tailwind v3.3+** (uses
+> [jiti](https://github.com/unjs/jiti) under the hood for config loading)
+> or any bundler that's TypeScript-aware (Vite, esbuild, swc, tsx, ts-node
+> via `--loader`). Plain Node ESM **cannot** load these files without a TS
+> loader. A pre-compiled `.js` variant is planned — track or open an issue
+> if your toolchain hits this.
+
+## Layout
+
+- `index.js` — the config entry; consumed via `import` (ESM).
+- `colors.ts` — semantic palette (`primary`, `background`, `foreground`,
+  `muted`, `border`, `destructive`, etc.) wired to the CSS variables
+  shipped by `@keboola/design`.
+- `typography.ts` — typography scale (used by the `@tailwindcss/typography`
+  plugin).
+
+## Tailwind v4
+
+Tailwind v4 migration is tracked in
+[UT-3997](https://linear.app/keboola/issue/UT-3997). For now this package
+ships a v3-shaped config; the v4 migration moves tokens to CSS `@theme`.
+
+## License
+
+MIT

package/colors.ts

@@ -0,0 +1,176 @@
+export default {
+  inherit: 'inherit',
+  transparent: 'rgba(255,255,255,0)',
+  white: '#fff',
+  black: '#000',
+  prose: {
+    code: '#c7254e',
+    preCode: '#33373d',
+    preCodeBg: '#f5f5f5',
+  },
+
+  // Main application colors — channel values live in CSS variables (see packages/design/src/styles.css :root).
+  // The `<alpha-value>` placeholder lets Tailwind apply opacity modifiers like `tw-bg-muted/50`.
+  background: 'rgb(var(--color-background) / <alpha-value>)',
+  foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
+
+  popover: {
+    DEFAULT: 'rgb(var(--color-popover) / <alpha-value>)',
+    foreground: 'rgb(var(--color-popover-foreground) / <alpha-value>)',
+  },
+
+  // Highlight color for active or focused elements
+  accent: {
+    DEFAULT: 'rgb(var(--color-accent) / <alpha-value>)',
+    foreground: 'rgb(var(--color-accent-foreground) / <alpha-value>)',
+  },
+
+  border: 'rgb(var(--color-border) / <alpha-value>)',
+
+  input: {
+    DEFAULT: 'rgb(var(--color-input) / <alpha-value>)',
+  },
+
+  destructive: {
+    DEFAULT: 'rgb(var(--color-destructive) / <alpha-value>)',
+    foreground: 'rgb(var(--color-destructive-foreground) / <alpha-value>)',
+  },
+  success: {
+    DEFAULT: 'rgb(var(--color-success) / <alpha-value>)',
+  },
+
+  muted: {
+    DEFAULT: 'rgb(var(--color-muted) / <alpha-value>)',
+    foreground: 'rgb(var(--color-muted-foreground) / <alpha-value>)',
+  },
+
+  // Sidebar semantic colors
+  sidebar: {
+    DEFAULT: 'rgb(var(--color-sidebar) / <alpha-value>)',
+    foreground: 'rgb(var(--color-sidebar-foreground) / <alpha-value>)',
+    primary: 'rgb(var(--color-sidebar-primary) / <alpha-value>)',
+    'primary-foreground': 'rgb(var(--color-sidebar-primary-foreground) / <alpha-value>)',
+    accent: 'rgb(var(--color-sidebar-accent) / <alpha-value>)',
+    'accent-foreground': 'rgb(var(--color-sidebar-accent-foreground) / <alpha-value>)',
+    border: 'rgb(var(--color-sidebar-border) / <alpha-value>)',
+    ring: 'rgb(var(--color-sidebar-ring) / <alpha-value>)',
+  },
+  neutral: {
+    50: '#f2f4f7',
+    100: '#edf0f5',
+    150: '#d9dde5',
+    200: '#c5cbd6',
+    300: '#a2aab8',
+    400: '#7c8594',
+    500: '#565c66',
+    600: '#454952',
+    700: '#33373d',
+    800: '#222529',
+    900: '#101114',
+  },
+  primary: {
+    DEFAULT: '#1F8FFF',
+    foreground: '#FFFFFF',
+    100: '#e0ffe0',
+    200: '#baf5ba',
+    300: '#93f593',
+    400: '#51e051',
+    500: '#1ec71e',
+    600: '#1bb31b',
+    700: '#189f18',
+    800: '#158b15',
+    900: '#0f630f',
+  },
+  secondary: {
+    DEFAULT: '#E2E8F0',
+    foreground: '#1E293B',
+    100: '#e0f0ff',
+    200: '#c2e0ff',
+    300: '#99ccff',
+    400: '#5cadff',
+    500: '#1f8fff',
+    600: '#0975e0',
+    700: '#075fb8',
+    800: '#064a8f',
+    900: '#043566',
+  },
+  error: {
+    100: '#ffe0e6',
+    200: '#ffc2cc',
+    300: '#ff99aa',
+    400: '#ff5c77',
+    500: '#e00025',
+    550: '#c40021',
+    600: '#b8001f',
+    700: '#a3001b',
+    800: '#7a0014',
+    900: '#52000e',
+  },
+  warning: {
+    100: '#fff3e0',
+    200: '#ffe7c2',
+    300: '#ffd699',
+    400: '#ffbe5c',
+    500: '#f59300',
+    550: '#e38800',
+    600: '#d17d00',
+    700: '#a36200',
+    800: '#7a4900',
+    900: '#523100',
+  },
+  purple: {
+    100: '#ebe0ff',
+    200: '#d6c2ff',
+    300: '#c9adff',
+    400: '#ad85ff',
+    500: '#925cff',
+    600: '#6f36e0',
+    700: '#5b2cb8',
+    800: '#46228f',
+    900: '#321866',
+  },
+  cyan: {
+    100: '#e0f9ff',
+    200: '#bef3ff',
+    300: '#83ebff',
+    400: '#00def7',
+    500: '#00bbd1',
+    600: '#00a0b2',
+    700: '#007d8c',
+    800: '#005d69',
+    900: '#003f47',
+  },
+  teal: {
+    100: '#cfffe6',
+    200: '#96ffce',
+    300: '#00faaf',
+    400: '#00e6a1',
+    500: '#00c287',
+    600: '#00a673',
+    700: '#008159',
+    800: '#006141',
+    900: '#00422b',
+  },
+  yellow: {
+    100: '#FFFFCC',
+    200: '#FFFF99',
+    300: '#FFFF33',
+    400: '#F5F500',
+    500: '#E5E500',
+    600: '#CCCC00',
+    700: '#B2B200',
+    800: '#999900',
+    900: '#808000',
+  },
+  pink: {
+    100: '#FDE8FB',
+    200: '#FAD1F6',
+    300: '#F7BBF2',
+    400: '#F28CE8',
+    500: '#ED5EDF',
+    600: '#E619D1',
+    700: '#B814A7',
+    800: '#8A0F7D',
+    900: '#5C0A54',
+  },
+};

package/index.js

@@ -0,0 +1,164 @@
+import plugin from 'tailwindcss/plugin';
+import colors from './colors';
+import animatePlugin from 'tailwindcss-animate';
+import { scopedPreflightStyles, isolateInsideOfContainer } from 'tailwindcss-scoped-preflight';
+import typographyPlugin from '@tailwindcss/typography';
+import containerQueriesPlugin from '@tailwindcss/container-queries';
+import { typography } from './typography';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  prefix: 'tw-',
+  content: ['./src/**/*.{js,jsx,ts,tsx,mdx}', '../../packages/design/src/**/*.{ts,tsx}'],
+  corePlugins: {
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      fill: {
+        aigradient: {
+          600: 'url(#aigradient-600)',
+          700: 'url(#aigradient-700)',
+        },
+      },
+      screens: {
+        'sm-legacy': '992px',
+        'md-legacy': '1092px',
+      },
+      animation: {
+        fade: 'fadeIn 100ms 100ms ease-in-out',
+        collapseDown: 'collapseDown 300ms both',
+        'dot-pulse-1': 'dot-pulse 1.5s infinite',
+        'dot-pulse-2': 'dot-pulse 1.5s infinite 0.2s',
+        'dot-pulse-3': 'dot-pulse 1.5s infinite 0.4s',
+        'toast-progress': 'toast-progress 5s linear forwards',
+        'collapsible-down': 'collapsible-down 0.2s ease-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-out',
+        'marching-ants': 'marching-ants 1s linear infinite',
+        'spinner-dots': 'spinner-dots 1s ease-in-out infinite',
+        'progress-bar': 'progress-bar var(--progress-bar-duration, 3s) linear forwards',
+      },
+      keyframes: {
+        shimmer: {
+          '100%': {
+            transform: 'translateX(100%)',
+          },
+        },
+        collapseDown: {
+          from: { overflow: 'hidden' },
+          '99%': { overflow: 'hidden' },
+          to: { overflow: 'visible' },
+        },
+        fadeIn: {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        'dot-pulse': {
+          '0%, 100%': {
+            transform: 'scale(0.1)',
+            opacity: '0.1',
+          },
+          '40%': {
+            transform: 'scale(1)',
+            opacity: '1',
+          },
+        },
+        'toast-progress': {
+          '0%': {
+            width: '100%',
+          },
+          '100%': {
+            width: '0%',
+          },
+        },
+        'collapsible-down': {
+          from: { height: '0', overflow: 'hidden' },
+          to: { height: 'var(--radix-collapsible-content-height)', overflow: 'visible' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)', overflow: 'visible' },
+          to: { height: '0', overflow: 'hidden' },
+        },
+        'marching-ants': {
+          to: { strokeDashoffset: '-12' },
+        },
+        'spinner-dots': {
+          '0%, 100%': { opacity: '0' },
+          '12.5%': { opacity: '1' },
+          '25%': { opacity: '0' },
+        },
+        'progress-bar': {
+          from: { width: '0%' },
+          to: { width: '100%' },
+        },
+      },
+      backgroundImage: {
+        'loader-gradient': 'radial-gradient(circle closest-side,#000 90%,#0000)',
+      },
+      ringWidth: {
+        3: '3px',
+      },
+      boxShadow: {
+        outline: '0 0 0 3px rgba(34, 141, 255, 0.25)',
+        table: '0px 6px 6px -4px rgba(100, 135, 153, 0.13)',
+        card: '0px 1px 4px rgba(100, 135, 153, 0.15)',
+      },
+      borderRadius: {
+        card: '10px',
+      },
+      typography: typography,
+      colors,
+    },
+    fontFamily: {
+      mono: [
+        'SFMono-Regular',
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        'Liberation Mono',
+        'Courier New',
+        'monospace',
+      ],
+      sans: [
+        'Inter',
+        'system-ui',
+        '-apple-system',
+        'Segoe UI',
+        'Roboto',
+        'Helvetica Neue',
+        'Arial',
+        'Noto Sans',
+        'Liberation Sans',
+        'sans-serif',
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol',
+        'Noto Color Emoji',
+      ],
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+    },
+  },
+  plugins: [
+    animatePlugin,
+    scopedPreflightStyles({
+      isolationStrategy: isolateInsideOfContainer('.tailwindcss-preflight'),
+    }),
+    typographyPlugin,
+    containerQueriesPlugin,
+    plugin(function ({ addVariant, addUtilities }) {
+      addVariant('hover|focus', ['&:enabled:hover', '&:enabled:focus']);
+      addVariant('active|focus', ['&:enabled:active', '&:enabled:focus', '&:enabled:focus-within']);
+      addVariant('not-disabled', ['&:not([data-disabled="true"]):not(:disabled)']);
+      addUtilities({
+        '.break-anywhere': {
+          overflowWrap: 'anywhere',
+        },
+      });
+    }),
+  ],
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@keboola/tailwind-config",
+  "version": "0.1.1",
+  "description": "Shared Tailwind CSS v3 config for the Keboola UI platform — semantic color palette, plugins, and the `tw-` class prefix.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./index.js",
+  "exports": {
+    ".": "./index.js",
+    "./colors": "./colors.ts",
+    "./typography": "./typography.ts"
+  },
+  "files": [
+    "index.js",
+    "colors.ts",
+    "typography.ts",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/keboola/ui.git",
+    "directory": "packages/tailwind-config"
+  },
+  "homepage": "https://github.com/keboola/ui/tree/main/packages/tailwind-config#readme",
+  "bugs": {
+    "url": "https://github.com/keboola/ui/issues"
+  },
+  "keywords": [
+    "keboola",
+    "tailwind",
+    "tailwindcss",
+    "config",
+    "design-tokens"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "knip:check": "yarn --cwd ../.. exec knip --workspace packages/tailwind-config",
+    "knip:fix": "yarn --cwd ../.. exec knip --workspace packages/tailwind-config --fix-type types,exports,files"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.4.0"
+  },
+  "dependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/typography": "^0.5.19",
+    "tailwindcss-animate": "1.0.7",
+    "tailwindcss-scoped-preflight": "3.5.2"
+  }
+}

package/typography.ts

@@ -0,0 +1,120 @@
+import colors from './colors';
+
+export const typography = {
+  invert: {
+    css: {
+      'h1, h2, h3, h4, h5, h6': {
+        color: 'inherit',
+      },
+      'blockquote code': {
+        color: 'var(--tw-prose-code)',
+      },
+      'pre code': {
+        color: 'var(--tw-prose-code)',
+      },
+    },
+  },
+  DEFAULT: {
+    css: {
+      '--tw-prose-code': colors.prose.code,
+      '--tw-prose-pre-code': colors.prose.preCode,
+      '--tw-prose-pre-bg': colors.prose.preCodeBg,
+      '--tw-prose-invert-body': colors.white,
+      '--tw-prose-invert-code': colors.prose.code,
+      '--tw-prose-invert-pre-code': colors.prose.preCode,
+      '--tw-prose-invert-pre-bg': colors.prose.preCodeBg,
+      '--tw-prose-invert-quote-borders': 'var(--tw-prose-quotes)',
+      '--tw-prose-invert-bullets': colors.white,
+      maxWidth: 'none',
+      fontSize: '14px',
+      lineHeight: '1.42857143',
+      h1: {
+        fontSize: '32px',
+        lineHeight: '40px',
+        fontWeight: '500',
+        marginTop: 0,
+        marginBottom: '10px',
+      },
+      'h1:first-child': {
+        marginTop: '10px',
+      },
+      h2: {
+        fontSize: '24px',
+        lineHeight: '32px',
+        fontWeight: '500',
+        color: colors.neutral[900],
+        marginTop: 0,
+        marginBottom: '10px',
+      },
+      'h2:first-child': {
+        marginTop: '10px',
+      },
+      h3: {
+        fontSize: '16px',
+        lineHeight: '24px',
+        fontWeight: '500',
+        color: colors.neutral[900],
+        margin: 0,
+      },
+      h4: {
+        fontSize: '14px',
+        lineHeight: '20px',
+        fontWeight: '500',
+        color: colors.neutral[900],
+        margin: 0,
+      },
+      h5: {
+        fontSize: '12px',
+        lineHeight: '20px',
+        fontWeight: '500',
+        color: colors.neutral[900],
+        margin: 0,
+      },
+      'h1 small, h2 small, h3 small, h4 small, h5 small, h6 small': {
+        color: colors.neutral[400],
+        fontSize: '75%',
+      },
+      p: {
+        marginTop: 0,
+        marginBottom: '10px',
+        lineHeight: '1.42857143',
+      },
+      'p:last-child': {
+        marginBottom: 0,
+      },
+      'ul, ol': {
+        listStyle: 'initial',
+        marginTop: 0,
+        marginBottom: '10px',
+        paddingLeft: '24px',
+        lineHeight: '1.42857143',
+      },
+      li: {
+        margin: 0,
+      },
+      table: {
+        fontSize: 'initial',
+        lineHeight: 'initial',
+        marginTop: 0,
+      },
+      hr: {
+        marginTop: '18px',
+        marginBottom: '18px',
+      },
+      img: {
+        margin: 0,
+      },
+      code: {
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        // Remove backticks around inline code
+        '&::before': { display: 'none' },
+        '&::after': { display: 'none' },
+      },
+      pre: {
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+      },
+    },
+  },
+};