@keboola/tailwind-config 0.2.0 → 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)',
@@ -15,7 +41,10 @@ export default {
   foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
 
   // Raised container chrome (Modal/Card/Sheet). White in light, lifted off background in dark.
-  surface: 'rgb(var(--color-surface) / <alpha-value>)',
+  card: {
+    DEFAULT: 'rgb(var(--color-card) / <alpha-value>)',
+    foreground: 'rgb(var(--color-card-foreground) / <alpha-value>)',
+  },
 
   popover: {
     DEFAULT: 'rgb(var(--color-popover) / <alpha-value>)',
@@ -34,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: {
@@ -74,28 +120,12 @@ export default {
   primary: {
     DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
     foreground: 'rgb(var(--color-primary-foreground) / <alpha-value>)',
-    100: '#e0ffe0',
-    200: '#baf5ba',
-    300: '#93f593',
-    400: '#51e051',
-    500: '#1ec71e',
-    600: '#1bb31b',
-    700: '#189f18',
-    800: '#158b15',
-    900: '#0f630f',
+    ...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',
@@ -110,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',
@@ -176,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 {
@@ -174,5 +175,6 @@ export default {
         },
       });
     }),
+    scrollFadePlugin,
   ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/tailwind-config",
-  "version": "0.2.0",
+  "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'),
+  });
+});