@knime/kds-styles 0.20.1 → 0.22.0

package/dist/img/icons/circle-unchecked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M6 11A5 5 0 1 0 6 1a5 5 0 0 0 0 10" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/db-database.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M10 5.977c0 1.134-1.79 2.054-4 2.054s-4-.92-4-2.054m8 2.469C10 9.58 8.21 10.5 6 10.5s-4-.92-4-2.054m8-4.892c0 1.135-1.79 2.054-4 2.054s-4-.92-4-2.054S3.79 1.5 6 1.5s4 .92 4 2.054" vector-effect="non-scaling-stroke"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M2 3c0 .398.421.78 1.172 1.06.75.282 1.767.44 2.828.44s2.078-.158 2.828-.44C9.578 3.78 10 3.399 10 3M2 3c0-.398.421-.78 1.172-1.06.75-.282 1.767-.44 2.828-.44s2.078.158 2.828.44C9.578 2.22 10 2.601 10 3M2 3v3m8-3v3M2 6c0 .398.421.78 1.172 1.06.75.282 1.767.44 2.828.44s2.078-.158 2.828-.44C9.578 6.78 10 6.399 10 6M2 6v3c0 .398.421.78 1.172 1.06.75.282 1.767.44 2.828.44s2.078-.158 2.828-.44C9.578 9.78 10 9.399 10 9V6" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/def.ts

@@ -24,6 +24,7 @@ export const iconNames = [
   'circle-info',
   'circle-question',
   'circle-success',
+  'circle-unchecked',
   'cloud-download',
   'cloud-knime',
   'cloud-pending-changes',
@@ -69,10 +70,12 @@ export const iconNames = [
   'flow-variable-in',
   'flow-variable-out',
   'folder-plus',
+  'folder-search',
   'folder-workflow',
   'folder',
   'forum',
   'function-catalog',
+  'hide-eye',
   'home',
   'import',
   'info',
@@ -91,6 +94,7 @@ export const iconNames = [
   'list',
   'local-filesystem',
   'lock',
+  'menu',
   'metanode',
   'mini-map',
   'minimize-dialog',
@@ -104,8 +108,10 @@ export const iconNames = [
   'pan-mode',
   'parameter',
   'pending-changes',
+  'pin',
   'placeholder',
   'plus',
+  'python',
   'quote',
   're-execution',
   'redo',
@@ -139,7 +145,9 @@ export const iconNames = [
   'stepwise-execution',
   'stop',
   'strikethrough',
+  'tag',
   'team',
+  'template-gallery',
   'text',
   'textstyles',
   'thumbs-down',
@@ -152,6 +160,7 @@ export const iconNames = [
   'underline',
   'undo',
   'unlink',
+  'usage',
   'user',
   'version',
   'view-cards',

package/dist/img/icons/folder-search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M3.5 9.75H2A.75.75 0 0 1 1.25 9V2.75c0-.263.213-.5.476-.5H4.5l1 1.25h4.75a.5.5 0 0 1 .5.5M9.279 9.267c.314-.347.505-.812.505-1.323C9.784 6.871 8.937 6 7.892 6S6 6.87 6 7.944 6.847 9.89 7.892 9.89c.548 0 1.041-.24 1.387-.622m0 0L11 11" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/hide-eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M5.214 5.215a1.111 1.111 0 0 0 1.572 1.571M8.6 8.596A4.84 4.84 0 0 1 6 9.333Q3 9.333 1 6q1.06-1.766 2.4-2.597m1.589-.636q.5-.102 1.011-.1 3 0 5 3.333a9.2 9.2 0 0 1-1.188 1.594M1 1l10 10" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M1.5 2H11M1.5 6H11m-9.5 4H11" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/pin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M5.276 6.902 2.349 9.627l2.734-2.918c-.293-.293-.735-.663-1.326-1.396-.534-.662-.457-1.198.108-1.44.565-.244 1.24-.001 1.77.482.612-.444.92-.761 1.556-1.3-.432-.514-.41-1.21.101-1.463.512-.253.868.044 1.237.413.376.376.736.733.736.733s.338.342.714.718c.37.37.667.724.413 1.236-.253.512-.948.534-1.462.102-.54.636-.856.943-1.3 1.556.483.529.725 1.205.482 1.77s-.778.642-1.44.108c-.733-.591-1.103-1.033-1.396-1.326" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/python.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M6 4.5H2.5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1H4m2-1h3.5a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H8m-4 1v-2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1V5a1 1 0 0 1-1 1H5a1 1 0 0 0-1 1v2.5a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2M5.5 3v.005M6.5 9v.005" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/tag.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M4.248 4.69a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0" vector-effect="non-scaling-stroke"/><path d="M2 3.5v2.586a1 1 0 0 0 .293.707l3.855 3.854a1.205 1.205 0 0 0 1.703 0l2.796-2.796a1.205 1.205 0 0 0 0-1.703L6.793 2.293A1 1 0 0 0 6.086 2H3.5A1.5 1.5 0 0 0 2 3.5" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/template-gallery.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M1 7.812V2.269s.326-.763 1.05-.763 1.128.764 1.128.764l.005.206M1 7.812s.04-.987 1.05-.987 1.132.775 1.132.775V2.476M1 7.812c0 .883.491 1.3 1.19 1.3h6.918V2.477H3.183m-.479 8.202h4.342l3.746.012-.01-6.838M5 5.718h2m-1.028-.949v2" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/usage.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M2 2v6.5m8 1.5H2V8.5m0 0 2.5-3L8 6l2-4" vector-effect="non-scaling-stroke"/></svg>

package/dist/tokens/css/_properties.css

@@ -2072,12 +2072,6 @@ syntax: "<color>";
   initial-value: hsl(360 84% 63%);
 }
 
-@property --kds-color-skeleton-default {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(linear-gradient(90deg, hsla(0, 0%, 10%, 0.02) 0%, hsla(0, 0%, 10%, 0.15) 25%, hsla(0, 0%, 10%, 0.02) 65%, hsla(0, 0%, 10%, 0.00) 100%), linear-gradient(90deg, hsla(0, 0%, 94%, 0.02) 0%, hsla(0, 0%, 94%, 0.15) 25%, hsla(0, 0%, 94%, 0.02) 65%, hsla(0, 0%, 94%, 0.00) 100%));
-}
-
 @property --kds-color-elevation-top {
 syntax: "<color>";
   inherits: true;
@@ -2198,12 +2192,6 @@ syntax: "<color>";
   initial-value: light-dark(hsl(120 0% 16% / 0.24), hsl(0 0% 94% / 0.24));
 }
 
-@property --kds-color-skeleton-bar-background-default {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(linear-gradient(90deg, hsla(0, 0%, 10%, 0.02) 0%, hsla(0, 0%, 10%, 0.15) 25%, hsla(0, 0%, 10%, 0.02) 65%, hsla(0, 0%, 10%, 0.00) 100%), linear-gradient(90deg, hsla(0, 0%, 94%, 0.02) 0%, hsla(0, 0%, 94%, 0.15) 25%, hsla(0, 0%, 94%, 0.02) 65%, hsla(0, 0%, 94%, 0.00) 100%));
-}
-
 @property --kds-color-tooltip-background-default {
 syntax: "<color>";
   inherits: true;
@@ -2672,6 +2660,12 @@ syntax: "<length>";
   initial-value: 64px;
 }
 
+@property --kds-dimension-component-height-5x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 80px;
+}
+
 @property --kds-dimension-component-height-12x {
 syntax: "<length>";
   inherits: false;

package/dist/tokens/css/_variables.css

@@ -348,7 +348,6 @@
   --kds-color-state-background: light-dark(hsl(0 0% 90%), hsl(0 0% 32%));
   --kds-color-connector-data: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
   --kds-color-connector-flow-variable: hsl(360 84% 63%);
-  --kds-color-skeleton-default: light-dark(linear-gradient(90deg, hsla(0, 0%, 10%, 0.02) 0%, hsla(0, 0%, 10%, 0.15) 25%, hsla(0, 0%, 10%, 0.02) 65%, hsla(0, 0%, 10%, 0.00) 100%), linear-gradient(90deg, hsla(0, 0%, 94%, 0.02) 0%, hsla(0, 0%, 94%, 0.15) 25%, hsla(0, 0%, 94%, 0.02) 65%, hsla(0, 0%, 94%, 0.00) 100%));
   --kds-color-elevation-top: light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9));
   --kds-color-elevation-middle: light-dark(hsl(330 0% 32% / 0.14), hsl(345 0% 10% / 0.94));
   --kds-color-elevation-bottom: light-dark(hsl(330 0% 32% / 0.12), hsl(345 0% 10% / 0.98));
@@ -369,7 +368,6 @@
   --kds-color-loading-spinner-progress-on-surface: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
   --kds-color-loading-spinner-track-on-primary: hsl(166 68% 93% / 0.24);
   --kds-color-loading-spinner-track-on-surface: light-dark(hsl(120 0% 16% / 0.24), hsl(0 0% 94% / 0.24));
-  --kds-color-skeleton-bar-background-default: light-dark(linear-gradient(90deg, hsla(0, 0%, 10%, 0.02) 0%, hsla(0, 0%, 10%, 0.15) 25%, hsla(0, 0%, 10%, 0.02) 65%, hsla(0, 0%, 10%, 0.00) 100%), linear-gradient(90deg, hsla(0, 0%, 94%, 0.02) 0%, hsla(0, 0%, 94%, 0.15) 25%, hsla(0, 0%, 94%, 0.02) 65%, hsla(0, 0%, 94%, 0.00) 100%));
   --kds-color-tooltip-background-default: light-dark(hsl(0 0% 13%), hsl(0 0% 22%));
   --kds-color-tooltip-text-and-icon-neutral: hsl(0 0% 98%);
   --kds-color-text-highlight-background-default: hsl(212 78% 68% / 0.6);
@@ -448,6 +446,7 @@
   --kds-dimension-component-height-2-75x: 44px;
   --kds-dimension-component-height-2-5x: 40px;
   --kds-dimension-component-height-4x: 64px;
+  --kds-dimension-component-height-5x: 80px;
   --kds-dimension-component-height-12x: 192px;
   --kds-dimension-component-height-12-5x: 200px;
   --kds-dimension-component-height-20x: 320px;

package/dist/tokens/ts/_tokens.ts

@@ -71,6 +71,7 @@ export const kdsDimensionComponentHeight2p5x = 40;
 export const kdsDimensionComponentHeight2p75x = 44;
 export const kdsDimensionComponentHeight45x = 720;
 export const kdsDimensionComponentHeight4x = 64;
+export const kdsDimensionComponentHeight5x = 80;
 export const kdsDimensionComponentWidth0p125x = 2;
 export const kdsDimensionComponentWidth0p25x = 4;
 export const kdsDimensionComponentWidth0p75x = 12;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "0.20.1",
+  "version": "0.22.0",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",