@knime/kds-styles 0.0.6 → 0.0.8

package/dist/tokens/css/_variables.css

@@ -151,71 +151,33 @@
   --kds-core-color-brown-800: hsl(23 27% 24%);
   --kds-core-color-brown-875: hsl(22 25% 18%);
   --kds-core-color-transparent: hsl(330 0% 11% / 0);
-  --kds-core-dimension-0: 0;
-  --kds-core-dimension-6: 1px;
-  --kds-core-dimension-12: 2px;
-  --kds-core-dimension-25: 4px;
-  --kds-core-dimension-31: 5px;
-  --kds-core-dimension-37: 6px;
-  --kds-core-dimension-44: 7px;
-  --kds-core-dimension-50: 8px;
-  --kds-core-dimension-56: 9px;
-  --kds-core-dimension-75: 12px;
-  --kds-core-dimension-88: 14px;
-  --kds-core-dimension-100: 16px;
-  --kds-core-dimension-125: 20px;
-  --kds-core-dimension-150: 24px;
-  --kds-core-dimension-175: 28px;
-  --kds-core-dimension-200: 32px;
-  --kds-core-dimension-225: 36px;
-  --kds-core-dimension-250: 40px;
-  --kds-core-dimension-275: 44px;
-  --kds-core-dimension-300: 48px;
-  --kds-core-dimension-350: 56px;
-  --kds-core-dimension-400: 64px;
-  --kds-core-dimension-450: 72px;
-  --kds-core-dimension-500: 80px;
-  --kds-core-dimension-600: 96px;
-  --kds-core-dimension-700: 112px;
-  --kds-core-dimension-800: 128px;
-  --kds-core-dimension-900: 144px;
-  --kds-core-dimension-1000: 160px;
-  --kds-core-dimension-1100: 176px;
-  --kds-core-dimension-1200: 192px;
-  --kds-core-dimension-1300: 208px;
-  --kds-core-dimension-1400: 224px;
-  --kds-core-dimension-1500: 240px;
-  --kds-core-dimension-1600: 256px;
-  --kds-core-dimension-2000: 320px;
-  --kds-core-dimension-2400: 384px;
-  --kds-core-dimension-base: 0.16px;
-  --kds-core-size-scale: 16px;
-  --kds-core-font-size-rem: 16px;
-  --kds-core-font-size-scaled-0-5x: 8px;
-  --kds-core-font-size-scaled-0-56x: 9px;
-  --kds-core-font-size-scaled-0-62x: 10px;
-  --kds-core-font-size-scaled-0-68x: 11px;
-  --kds-core-font-size-scaled-0-75x: 12px;
-  --kds-core-font-size-scaled-0-81x: 13px;
-  --kds-core-font-size-scaled-0-87x: 14px;
-  --kds-core-font-size-scaled-1x: 16px;
-  --kds-core-font-size-scaled-1-25x: 20px;
-  --kds-core-font-size-scaled-1-5x: 24px;
-  --kds-core-font-size-scaled-1-75x: 28px;
-  --kds-core-font-size-scaled-2x: 32px;
-  --kds-core-font-size-scaled-2-25x: 36px;
-  --kds-core-font-size-scaled-2-5x: 40px;
-  --kds-core-font-size-scaled-2-75x: 44px;
-  --kds-core-font-size-scaled-3x: 48px;
-  --kds-core-font-size-scaled-3-25x: 52px;
-  --kds-core-font-size-scaled-3-5x: 56px;
-  --kds-core-font-size-scaled-3-75x: 60px;
-  --kds-core-font-size-scaled-4x: 64px;
-  --kds-core-font-size-scaled-4-5x: 72px;
-  --kds-core-font-size-scaled-5x: 80px;
-  --kds-core-font-size-scaled-5-5x: 88px;
-  --kds-core-font-size-scaled-6x: 96px;
-  --kds-core-font-size-scaled-base: 0.16px;
+  --kds-core-font-size-0-5x: 8px;
+  --kds-core-font-size-0-56x: 9px;
+  --kds-core-font-size-0-62x: 10px;
+  --kds-core-font-size-0-68x: 11px;
+  --kds-core-font-size-0-75x: 12px;
+  --kds-core-font-size-0-81x: 13px;
+  --kds-core-font-size-0-87x: 14px;
+  --kds-core-font-size-1x: 16px;
+  --kds-core-font-size-1-25x: 20px;
+  --kds-core-font-size-1-375x: 22px;
+  --kds-core-font-size-1-625x: 26px;
+  --kds-core-font-size-1-5x: 24px;
+  --kds-core-font-size-1-75x: 28px;
+  --kds-core-font-size-1-875x: 30px;
+  --kds-core-font-size-2x: 32px;
+  --kds-core-font-size-2-25x: 36px;
+  --kds-core-font-size-2-5x: 40px;
+  --kds-core-font-size-2-75x: 44px;
+  --kds-core-font-size-3x: 48px;
+  --kds-core-font-size-3-25x: 52px;
+  --kds-core-font-size-3-5x: 56px;
+  --kds-core-font-size-3-75x: 60px;
+  --kds-core-font-size-4x: 64px;
+  --kds-core-font-size-4-5x: 72px;
+  --kds-core-font-size-5x: 80px;
+  --kds-core-font-size-5-5x: 88px;
+  --kds-core-font-size-6x: 96px;
   --kds-core-paragraph-spacing-none: 0;
   --kds-core-paragraph-spacing-small: 0.25px;
   --kds-core-paragraph-spacing-medium: 0.5px;
@@ -223,6 +185,7 @@
   --kds-core-paragraph-spacing-extra-large: 1px;
   --kds-core-font-family-roboto: Roboto;
   --kds-core-font-family-roboto-condensed: 'Roboto Condensed';
+  --kds-core-font-family-roboto-mono: 'Roboto Mono';
   --kds-core-font-weight-regular: 400;
   --kds-core-font-weight-regular-italic-weight: 400;
   --kds-core-font-weight-regular-italic-style: italic;
@@ -231,6 +194,12 @@
   --kds-core-line-height-singleline: 1;
   --kds-core-line-height-multiline-narrow: 1.3;
   --kds-core-line-height-multiline-wide: 1.5;
+  --kds-core-size-scale: 16px;
+  --kds-core-border-width-none: 0;
+  --kds-core-border-width-xs: 1px;
+  --kds-core-border-width-s: 1.2496px;
+  --kds-core-border-width-m: 1.5px;
+  --kds-core-border-width-l: 2px;
   --kds-color-surface-default: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
   --kds-color-surface-muted: light-dark(hsl(0 0% 94%), hsl(0 0% 19%));
   --kds-color-surface-subtle: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
@@ -408,13 +377,10 @@
   --kds-border-radius-container-0-56x: 9px;
   --kds-border-radius-container-1x: 16px;
   --kds-border-radius-container-pill: 1000px;
-  --kds-border-width-base-none: 0;
-  --kds-border-width-base-s: 1px;
-  --kds-border-width-base-m: 2px;
   --kds-border-width-icon-stroke-s: 1px;
-  --kds-border-width-icon-stroke-m: 1.25px;
+  --kds-border-width-icon-stroke-m: 1.2496px;
   --kds-border-width-icon-stroke-l: 1.5px;
-  --kds-border-action-transparent: 1px solid hsl(330 0% 11% / 0);
+  --kds-border-action-transparent: 0 solid hsl(330 0% 11% / 0);
   --kds-border-action-default: 1px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
   --kds-border-action-disabled: 1px solid light-dark(hsl(0 0% 73%), hsl(0 0% 48%));
   --kds-border-action-focused: 2px solid light-dark(hsl(209 57% 50%), hsl(214 92% 77%));
@@ -426,18 +392,18 @@
   --kds-border-base-default: 1px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
   --kds-border-base-muted: 1px solid light-dark(hsl(345 0% 10% / 0.2), hsl(330 0% 99% / 0.2));
   --kds-border-base-subtle: 1px solid light-dark(hsl(345 0% 10% / 0.1), hsl(330 0% 99% / 0.1));
-  --kds-border-base-brand: 1px soild hsl(51 100% 50%);
-  --kds-border-base-danger: 1px soild light-dark(hsl(3 100% 86%), hsl(348 94% 21%));
-  --kds-border-base-warning: 1px soild light-dark(hsl(31 79% 74%), hsl(13 66% 23%));
-  --kds-border-base-success: 1px soild light-dark(hsl(112 57% 71%), hsl(124 47% 21%));
-  --kds-border-base-info: 1px soild light-dark(hsl(215 100% 84%), hsl(210 50% 28%));
+  --kds-border-base-brand: 1px solid hsl(51 100% 50%);
+  --kds-border-base-danger: 1px solid light-dark(hsl(3 100% 86%), hsl(348 94% 21%));
+  --kds-border-base-warning: 1px solid light-dark(hsl(31 79% 74%), hsl(13 66% 23%));
+  --kds-border-base-success: 1px solid light-dark(hsl(112 57% 71%), hsl(124 47% 21%));
+  --kds-border-base-info: 1px solid light-dark(hsl(215 100% 84%), hsl(210 50% 28%));
   --kds-border-node-status-empty: 1px solid light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
   --kds-border-node-status-idle: 1px solid light-dark(hsl(348 94% 21%), hsl(360 84% 63%));
   --kds-border-node-status-warning: 1px solid light-dark(hsl(43 100% 19%), hsl(51 100% 50%));
   --kds-border-node-status-executed: 1px solid light-dark(hsl(116 47% 26%), hsl(107 43% 55%));
-  --kds-border-resize-handle-initial: [object Object];
-  --kds-border-resize-handle-hover: [object Object];
-  --kds-border-resize-handle-active: [object Object];
+  --kds-border-resize-handle-initial: 2px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.4));
+  --kds-border-resize-handle-hover: 2px solid light-dark(hsl(345 0% 10% / 0.64), hsl(330 0% 99% / 0.58));
+  --kds-border-resize-handle-active: 2px solid light-dark(hsl(345 0% 10% / 0.74), hsl(330 0% 99% / 0.68));
   --kds-sizing-viewport-breakpoints-576: 576px;
   --kds-sizing-viewport-breakpoints-768: 768px;
   --kds-sizing-viewport-breakpoints-1024: 1024px;
@@ -496,6 +462,8 @@
   --kds-font-base-title-large: 500 16px/1 Roboto;
   --kds-font-base-title-large-strong: 700 16px/1 Roboto;
   --kds-font-base-body-small: 400 12px/1.5 Roboto;
+  --kds-font-base-body-small-italic: italic 400 12px/1.5 Roboto;
+  --kds-font-base-body-small-strong: 700 12px/1.5 Roboto;
   --kds-font-base-body-medium: 400 14px/1.5 Roboto;
   --kds-font-base-body-large: 400 16px/1.3 Roboto;
   --kds-font-base-body-xlarge: 400 20px/1.5 Roboto;
@@ -510,6 +478,8 @@
   --kds-font-base-interactive-medium-strong: 500 14px/1 Roboto;
   --kds-font-base-interactive-large: 400 16px/1 Roboto;
   --kds-font-base-interactive-large-strong: 500 16px/1 Roboto;
+  --kds-font-base-code-xsmall: 400 10px/1 'Roboto Mono';
+  --kds-font-base-code-small: 400 11px/1.3 'Roboto Mono';
   --kds-font-workflows-annotations-h1: 700 36px/1.5 'Roboto Condensed';
   --kds-font-workflows-annotations-h2: 700 30px/1.5 'Roboto Condensed';
   --kds-font-workflows-annotations-h3: 700 26px/1.5 'Roboto Condensed';

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@knime/kds-styles",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "license": "GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)",
   "author": "KNIME AG, Zurich, Switzerland",
   "type": "module",
+  "dependencies": {
+    "modern-normalize": "3.0.1"
+  },
   "devDependencies": {
     "@knime/styles": "^1.10.0",
     "@tokens-studio/sd-transforms": "^2.0.1",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^24.2.0",
-    "chalk": "^5.5.0",
     "consola": "^3.4.2",
     "jsdom": "^27.0.0",
-    "rimraf": "^6.0.1",
     "style-dictionary": "^5.0.4",
     "svgo": "^4.0.0",
     "typescript": "^5.9.2"
@@ -22,19 +23,22 @@
     "dist"
   ],
   "exports": {
+    "./index.css": "./dist/css/index.css",
     "./kds-variables.css": "./dist/tokens/css/_variables.css",
     "./kds-properties.css": "./dist/tokens/css/_properties.css",
+    "./kds-legacy-theme.css": "./dist/css/legacy/legacy-theme.css",
     "./img/*": "./dist/img/*.svg",
     "./img/*/def": "./dist/img/*/def.ts"
   },
   "engines": {
-    "node": "24.5.0",
+    "node": "24.10.0",
     "npm": "please-use-pnpm"
   },
   "scripts": {
     "build": "pnpm run --parallel --aggregate-output /^build:.*/",
     "build:icons": "node src/processSVGs.js",
     "build:tokens": "node src/buildTokens.js",
+    "build:css": "node src/copyCss.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   }
 }