@keboola/tailwind-config 0.1.1 → 0.3.0

package/README.md

@@ -15,7 +15,7 @@ branded) typically supplies its own tokens; this package is optional then.
 ```bash
 npm install -D @keboola/tailwind-config tailwindcss@^3
 # or
-yarn add -D @keboola/tailwind-config tailwindcss@^3
+pnpm add -D @keboola/tailwind-config tailwindcss@^3
 ```
 
 ## Use

package/colors.ts

@@ -1,3 +1,29 @@
+// Keboola brand ramps. Historically these lived under `primary[100..900]` (green)
+// and `secondary[100..900]` (blue); defined once here so the legacy `primary`/
+// `secondary` aliases and the semantic-correct `green`/`blue` palettes can't drift.
+const greenScale = {
+  100: '#e0ffe0',
+  200: '#baf5ba',
+  300: '#93f593',
+  400: '#51e051',
+  500: '#1ec71e',
+  600: '#1bb31b',
+  700: '#189f18',
+  800: '#158b15',
+  900: '#0f630f',
+};
+const blueScale = {
+  100: '#e0f0ff',
+  200: '#c2e0ff',
+  300: '#99ccff',
+  400: '#5cadff',
+  500: '#1f8fff',
+  600: '#0975e0',
+  700: '#075fb8',
+  800: '#064a8f',
+  900: '#043566',
+};
+
 export default {
   inherit: 'inherit',
   transparent: 'rgba(255,255,255,0)',
@@ -14,6 +40,12 @@ export default {
   background: 'rgb(var(--color-background) / <alpha-value>)',
   foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
 
+  // Raised container chrome (Modal/Card/Sheet). White in light, lifted off background in dark.
+  card: {
+    DEFAULT: 'rgb(var(--color-card) / <alpha-value>)',
+    foreground: 'rgb(var(--color-card-foreground) / <alpha-value>)',
+  },
+
   popover: {
     DEFAULT: 'rgb(var(--color-popover) / <alpha-value>)',
     foreground: 'rgb(var(--color-popover-foreground) / <alpha-value>)',
@@ -31,12 +63,29 @@ export default {
     DEFAULT: 'rgb(var(--color-input) / <alpha-value>)',
   },
 
+  // Focus ring (brand blue).
+  ring: 'rgb(var(--color-ring) / <alpha-value>)',
+
+  // Categorical chart palette (brand-derived).
+  chart: {
+    1: 'rgb(var(--color-chart-1) / <alpha-value>)',
+    2: 'rgb(var(--color-chart-2) / <alpha-value>)',
+    3: 'rgb(var(--color-chart-3) / <alpha-value>)',
+    4: 'rgb(var(--color-chart-4) / <alpha-value>)',
+    5: 'rgb(var(--color-chart-5) / <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>)',
+    foreground: 'rgb(var(--color-success-foreground) / <alpha-value>)',
+  },
+  info: {
+    DEFAULT: 'rgb(var(--color-info) / <alpha-value>)',
+    foreground: 'rgb(var(--color-info-foreground) / <alpha-value>)',
   },
 
   muted: {
@@ -69,30 +118,14 @@ export default {
     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',
+    DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
+    foreground: 'rgb(var(--color-primary-foreground) / <alpha-value>)',
+    ...greenScale,
   },
   secondary: {
-    DEFAULT: '#E2E8F0',
-    foreground: '#1E293B',
-    100: '#e0f0ff',
-    200: '#c2e0ff',
-    300: '#99ccff',
-    400: '#5cadff',
-    500: '#1f8fff',
-    600: '#0975e0',
-    700: '#075fb8',
-    800: '#064a8f',
-    900: '#043566',
+    DEFAULT: 'rgb(var(--color-secondary) / <alpha-value>)',
+    foreground: 'rgb(var(--color-secondary-foreground) / <alpha-value>)',
+    ...blueScale,
   },
   error: {
     100: '#ffe0e6',
@@ -107,6 +140,8 @@ export default {
     900: '#52000e',
   },
   warning: {
+    DEFAULT: 'rgb(var(--color-warning) / <alpha-value>)',
+    foreground: 'rgb(var(--color-warning-foreground) / <alpha-value>)',
     100: '#fff3e0',
     200: '#ffe7c2',
     300: '#ffd699',
@@ -173,4 +208,15 @@ export default {
     800: '#8A0F7D',
     900: '#5C0A54',
   },
+
+  // Semantic-correct names for the Keboola brand ramps that historically lived under
+  // `primary[100..900]` (green) and `secondary[100..900]` (blue) — fixed tints used
+  // directly regardless of brand, unlike `primary.DEFAULT` / `secondary.DEFAULT`
+  // (shadcn semantic, CSS-var driven). New code should use these; the `primary`/
+  // `secondary` ramps remain as aliases until their callsites are migrated (Step 2).
+  //
+  // Like the existing custom palettes (`cyan`/`teal`/`yellow`/`pink`/`purple`), these
+  // are `100..900` only and override Tailwind's same-named defaults.
+  green: { ...greenScale },
+  blue: { ...blueScale },
 };

package/index.js

@@ -5,6 +5,7 @@ import { scopedPreflightStyles, isolateInsideOfContainer } from 'tailwindcss-sco
 import typographyPlugin from '@tailwindcss/typography';
 import containerQueriesPlugin from '@tailwindcss/container-queries';
 import { typography } from './typography';
+import { scrollFadePlugin } from './scrollFade';
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -21,6 +22,15 @@ export default {
           700: 'url(#aigradient-700)',
         },
       },
+      // Lucide icons are stroke-based — exposing the AI gradient as a
+      // stroke utility lets us paint the visible line with the gradient,
+      // not just the (often empty) interior fill area.
+      stroke: {
+        aigradient: {
+          600: 'url(#aigradient-600)',
+          700: 'url(#aigradient-700)',
+        },
+      },
       screens: {
         'sm-legacy': '992px',
         'md-legacy': '1092px',
@@ -37,6 +47,7 @@ export default {
         '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',
+        'caret-blink': 'caret-blink 1.25s ease-out infinite',
       },
       keyframes: {
         shimmer: {
@@ -91,6 +102,10 @@ export default {
           from: { width: '0%' },
           to: { width: '100%' },
         },
+        'caret-blink': {
+          '0%, 70%, 100%': { opacity: '1' },
+          '20%, 50%': { opacity: '0' },
+        },
       },
       backgroundImage: {
         'loader-gradient': 'radial-gradient(circle closest-side,#000 90%,#0000)',
@@ -160,5 +175,6 @@ export default {
         },
       });
     }),
+    scrollFadePlugin,
   ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/tailwind-config",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Shared Tailwind CSS v3 config for the Keboola UI platform — semantic color palette, plugins, and the `tw-` class prefix.",
   "license": "MIT",
   "type": "module",
@@ -14,6 +14,7 @@
     "index.js",
     "colors.ts",
     "typography.ts",
+    "scrollFade.ts",
     "README.md"
   ],
   "publishConfig": {
@@ -39,10 +40,6 @@
   "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"
   },
@@ -51,5 +48,9 @@
     "@tailwindcss/typography": "^0.5.19",
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-scoped-preflight": "3.5.2"
+  },
+  "scripts": {
+    "knip:check": "pnpm --dir ../.. exec knip --workspace packages/tailwind-config",
+    "knip:fix": "pnpm --dir ../.. exec knip --workspace packages/tailwind-config --fix-type types,exports,files"
   }
-}
+}

package/scrollFade.ts

@@ -0,0 +1,53 @@
+import plugin from 'tailwindcss/plugin';
+
+// scroll-fade: fades scroll-container edges purely in CSS (mask-image + CSS scroll-driven
+// animations, no JS). Mirrors shadcn/ui. https://ui.shadcn.com/docs/utils/scroll-fade
+// Edge opacity is driven by two registered custom props (0 = faded, 1 = solid). With no
+// overflow the scroll timeline is inactive, both hold their initial value (1), so short
+// content shows no fade. Fade thickness is tunable via `--tw-scroll-fade-size`.
+export const scrollFadePlugin = plugin(function ({ addUtilities, addBase }) {
+  addBase({
+    '@property --tw-scroll-fade-start': {
+      syntax: "'<number>'",
+      inherits: 'false',
+      'initial-value': '1',
+    },
+    '@property --tw-scroll-fade-end': {
+      syntax: "'<number>'",
+      inherits: 'false',
+      'initial-value': '1',
+    },
+    '@keyframes tw-scroll-fade-reveal-start': {
+      from: { '--tw-scroll-fade-start': '1' },
+      to: { '--tw-scroll-fade-start': '0' },
+    },
+    '@keyframes tw-scroll-fade-reveal-end': {
+      from: { '--tw-scroll-fade-end': '0' },
+      to: { '--tw-scroll-fade-end': '1' },
+    },
+  });
+
+  const scrollFadeMask = (direction: 'bottom' | 'right') =>
+    `linear-gradient(to ${direction}, rgb(0 0 0 / var(--tw-scroll-fade-start)) 0, #000 var(--tw-scroll-fade-size), #000 calc(100% - var(--tw-scroll-fade-size)), rgb(0 0 0 / var(--tw-scroll-fade-end)) 100%)`;
+
+  const scrollFade = (direction: 'bottom' | 'right', axis: 'x' | 'y') => ({
+    '--tw-scroll-fade-size': '1.5rem',
+    WebkitMaskImage: scrollFadeMask(direction),
+    maskImage: scrollFadeMask(direction),
+    animation: 'tw-scroll-fade-reveal-start linear both, tw-scroll-fade-reveal-end linear both',
+    animationTimeline: `scroll(self ${axis}), scroll(self ${axis})`,
+    animationRange: '0 var(--tw-scroll-fade-size), calc(100% - var(--tw-scroll-fade-size)) 100%',
+    // Browsers without scroll-driven animations show a static fade on both edges.
+    '@supports not (animation-timeline: scroll())': {
+      '--tw-scroll-fade-start': '0',
+      '--tw-scroll-fade-end': '0',
+    },
+  });
+
+  const scrollFadeVertical = scrollFade('bottom', 'y');
+  addUtilities({
+    '.scroll-fade': scrollFadeVertical,
+    '.scroll-fade-y': scrollFadeVertical,
+    '.scroll-fade-x': scrollFade('right', 'x'),
+  });
+});

package/typography.ts

@@ -82,8 +82,15 @@ export const typography = {
       'p:last-child': {
         marginBottom: 0,
       },
-      'ul, ol': {
-        listStyle: 'initial',
+      ul: {
+        listStyleType: 'disc',
+        marginTop: 0,
+        marginBottom: '10px',
+        paddingLeft: '24px',
+        lineHeight: '1.42857143',
+      },
+      ol: {
+        listStyleType: 'decimal',
         marginTop: 0,
         marginBottom: '10px',
         paddingLeft: '24px',