@keboola/design 16.1.0 → 17.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/design",
-  "version": "16.1.0",
+  "version": "17.0.0",
   "description": "Keboola UI platform design system — shadcn-aligned React primitives, Keboola-branded blocks, and the form bindings built on TanStack Form.",
   "license": "MIT",
   "type": "module",
@@ -122,7 +122,7 @@
     "@arethetypeswrong/cli": "^0.18.2",
     "@google/design.md": "0.2.0",
     "@keboola/agent-vocabulary": "^0.2.0",
-    "@keboola/eslint-plugin-design": "^0.6.0",
+    "@keboola/eslint-plugin-design": "^0.7.0",
     "@keboola/oxlint-config": "^10.2.0",
     "@keboola/tsconfig": "^0.2.1",
     "@keboola/vitest-config": "^1.0.0",
@@ -196,7 +196,7 @@
     "@iconify-json/lucide": "^1.2.118",
     "@keboola/brand-registry": "^3.1.0",
     "@keboola/codemirror-lang-sql": "^0.7.4",
-    "@keboola/tailwind-config": "^1.2.0",
+    "@keboola/tailwind-config": "^1.2.1",
     "@lexical/code": "^0.42.0",
     "@lexical/link": "^0.42.0",
     "@lexical/list": "^0.42.0",

package/src/styles.css

@@ -213,6 +213,7 @@
   --font-display: var(
     --font-sans,
     'Inter',
+    'Inter Fallback',
     system-ui,
     -apple-system,
     'Segoe UI',
@@ -415,6 +416,44 @@
         format('woff2');
   }
 
+  /* `Inter Fallback` — Arial scaled to Inter's metrics, painted until Inter arrives.
+     - Listed right after `Inter` in every Inter stack, so the swap reflows no text.
+     - `size-adjust` matches Inter's average advance width per weight.
+     - The overrides are Inter's ascent (96.9%) and descent (24.1%) divided by `size-adjust`.
+     - Liberation Sans shares Arial's metrics. */
+  @font-face {
+    font-family: 'Inter Fallback';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Arial'), local('Liberation Sans');
+    size-adjust: 106.37%;
+    ascent-override: 91.1%;
+    descent-override: 22.66%;
+    line-gap-override: 0%;
+  }
+
+  @font-face {
+    font-family: 'Inter Fallback';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Arial'), local('Liberation Sans');
+    size-adjust: 107.5%;
+    ascent-override: 90.14%;
+    descent-override: 22.42%;
+    line-gap-override: 0%;
+  }
+
+  @font-face {
+    font-family: 'Inter Fallback';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Arial Bold'), local('Liberation Sans Bold');
+    size-adjust: 101.29%;
+    ascent-override: 95.67%;
+    descent-override: 23.79%;
+    line-gap-override: 0%;
+  }
+
   html {
     /* Brand font opt-in: a brand's `typography.fontFamily` is injected as
        `--font-sans` by ThemeProvider and inherited from `html`; absent a brand
@@ -425,6 +464,7 @@
     font-family: var(
       --font-sans,
       'Inter',
+      'Inter Fallback',
       system-ui,
       -apple-system,
       'Segoe UI',

package/src/theme.css

@@ -21,9 +21,9 @@
    * name is prefixed (`--tw-font-sans`) and so cannot cycle with the runtime var it
    * reads — unlike `font-display`, which must stay an @utility. */
   --font-sans:
-    var(--font-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';
+    var(--font-sans, Inter, 'Inter Fallback'), 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';
 
   /* Legacy Bootstrap-era breakpoints (screens). */
   --breakpoint-sm-legacy: 992px;
@@ -566,7 +566,7 @@
 /* Scroll-container edge fade — `scroll-fade` (= `scroll-fade-y`) and `scroll-fade-x`.
  * - A mask driven by scroll-driven animations; each edge holds 1 (solid) until there is overflow past it.
  * - `--tw-scroll-fade-size` sets the depth; `--tw-scroll-fade-size-start` overrides the leading edge.
- * - Browsers without scroll timelines show a static fade on both edges. */
+ * - Browsers without scroll timelines show no fade: the reveal animations are off, both edges solid. */
 @property --tw-scroll-fade-start {
   syntax: '<number>';
   inherits: false;
@@ -613,8 +613,9 @@
     calc(100% - var(--tw-scroll-fade-size)) 100%;
 
   @supports not (animation-timeline: scroll()) {
-    --tw-scroll-fade-start: 0;
-    --tw-scroll-fade-end: 0;
+    animation: none;
+    --tw-scroll-fade-start: 1;
+    --tw-scroll-fade-end: 1;
   }
 }
 @utility scroll-fade {
@@ -640,7 +641,8 @@
     calc(100% - var(--tw-scroll-fade-size)) 100%;
 
   @supports not (animation-timeline: scroll()) {
-    --tw-scroll-fade-start: 0;
-    --tw-scroll-fade-end: 0;
+    animation: none;
+    --tw-scroll-fade-start: 1;
+    --tw-scroll-fade-end: 1;
   }
 }