@knime/kds-styles 0.5.1 → 0.5.3

package/dist/img/icons/cloud-pending-changes.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="M9.493 7.723C10.375 7.307 11 6.44 11 5.436c0-1.57-1.42-2.53-2.868-2.53C7.728 1.797 6.625 1 5.302 1c-1.558.067-3.398 1.572-2.942 3.292-.809.243-1.36.97-1.36 1.802 0 .868.512 1.415 1.188 1.69M5.9 7.375V8m0-.625-.442.183m.442-.183.442.183M5.9 8v.625M5.9 8l-.442-.442M5.9 8l.442.442M5.9 8l.442-.442M5.9 8l-.442.442M5.9 8h-.625M5.9 8h.625M5.9 8l-.313-.541M5.9 8l.312.541M5.9 8l-.604-.162M5.9 8l.604.162M5.9 8l.162-.604M5.9 8l-.162.604M5.9 8l-.541.313M5.9 8l.541-.312m-.541.937.442-.183m-.442.183-.442-.183m0-.884L5.275 8m1.067.442L6.525 8m-.183-.442L6.525 8m-1.067.442L5.275 8m.312-.541-.29.38m.29-.38.475-.063m.15 1.145.292-.38m-.292.38-.474.063m-.442-.766.063.474m1.145-.15-.063-.475m-.38-.29.38.29m-.703.917-.38-.291" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/cloud-synced.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="M9.493 7.723C10.375 7.307 11 6.44 11 5.436c0-1.57-1.42-2.53-2.868-2.53C7.728 1.797 6.625 1 5.302 1c-1.558.067-3.398 1.572-2.942 3.292-.809.243-1.36.97-1.36 1.802 0 .785.42 1.308 1 1.604m2.15-.313L5.65 9l2.357-3" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/def.ts

@@ -25,6 +25,8 @@ export const iconNames = [
   'circle-success',
   'cloud-download',
   'cloud-knime',
+  'cloud-pending-changes',
+  'cloud-synced',
   'cloud-upload',
   'cloud-workflow',
   'code-block',

package/dist/tokens/css/_properties-legacy.css

@@ -932,25 +932,25 @@ syntax: "<color>";
   initial-value: hsl(0 0% 64%);
 }
 
-@property --kds-color-loading-spinner-progress-on-filled {
+@property --kds-color-loading-spinner-progress-on-primary {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(none 0% 98%);
 }
 
-@property --kds-color-loading-spinner-progress-on-transparent {
+@property --kds-color-loading-spinner-progress-on-surface {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(0 0% 16%);
 }
 
-@property --kds-color-loading-spinner-track-on-filled {
+@property --kds-color-loading-spinner-track-on-primary {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(none 0% 98% / 0.24);
 }
 
-@property --kds-color-loading-spinner-track-on-transparent {
+@property --kds-color-loading-spinner-track-on-surface {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(120 0% 16% / 0.24);
@@ -1118,6 +1118,12 @@ syntax: "<string>";
   initial-value: 0 2px 4px 0 hsl(330 0% 73% / 0.32), 0 4px 8px 0 hsl(330 0% 32% / 0.14), 0 0 20px 0 hsl(330 0% 32% / 0.12);
 }
 
+@property --kds-fake-border-xs-muted {
+syntax: "<string>";
+  inherits: false;
+  initial-value: inset 0 0 0 0.5px 0px hsl(345 0% 10% / 0.2);
+}
+
 @property --kds-box-shadow-knob {
 syntax: "<string>";
   inherits: false;

package/dist/tokens/css/_properties.css

@@ -2138,25 +2138,25 @@ syntax: "<color>";
   initial-value: hsl(0 0% 64%);
 }
 
-@property --kds-color-loading-spinner-progress-on-filled {
+@property --kds-color-loading-spinner-progress-on-primary {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(166 68% 93%);
 }
 
-@property --kds-color-loading-spinner-progress-on-transparent {
+@property --kds-color-loading-spinner-progress-on-surface {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
 }
 
-@property --kds-color-loading-spinner-track-on-filled {
+@property --kds-color-loading-spinner-track-on-primary {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(166 68% 93% / 0.24);
 }
 
-@property --kds-color-loading-spinner-track-on-transparent {
+@property --kds-color-loading-spinner-track-on-surface {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(120 0% 16% / 0.24), hsl(0 0% 94% / 0.24));
@@ -3074,6 +3074,12 @@ syntax: "<string>";
   initial-value: 0 2px 4px 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9)), 0 4px 8px 0 light-dark(hsl(330 0% 32% / 0.14), hsl(345 0% 10% / 0.94)), 0 0 20px 0 light-dark(hsl(330 0% 32% / 0.12), hsl(345 0% 10% / 0.98));
 }
 
+@property --kds-fake-border-xs-muted {
+syntax: "<string>";
+  inherits: false;
+  initial-value: inset 0 0 0 0.5px 0px light-dark(hsl(345 0% 10% / 0.2), hsl(330 0% 99% / 0.2));
+}
+
 @property --kds-box-shadow-knob {
 syntax: "<string>";
   inherits: false;

package/dist/tokens/css/_variables-legacy.css

@@ -158,10 +158,10 @@
   --kds-color-toggle-switch-icon-on: hsl(0 0% 16%);
   --kds-color-toggle-switch-icon-off: hsl(0 0% 43%);
   --kds-color-toggle-switch-icon-disabled: hsl(0 0% 64%);
-  --kds-color-loading-spinner-progress-on-filled: hsl(none 0% 98%);
-  --kds-color-loading-spinner-progress-on-transparent: hsl(0 0% 16%);
-  --kds-color-loading-spinner-track-on-filled: hsl(none 0% 98% / 0.24);
-  --kds-color-loading-spinner-track-on-transparent: hsl(120 0% 16% / 0.24);
+  --kds-color-loading-spinner-progress-on-primary: hsl(none 0% 98%);
+  --kds-color-loading-spinner-progress-on-surface: hsl(0 0% 16%);
+  --kds-color-loading-spinner-track-on-primary: hsl(none 0% 98% / 0.24);
+  --kds-color-loading-spinner-track-on-surface: hsl(120 0% 16% / 0.24);
   --kds-border-action-transparent: 1px solid hsl(330 0% 11% / 0);
   --kds-border-action-default: 1px solid hsl(345 0% 10% / 0.4);
   --kds-border-action-disabled: 1px solid hsl(0 0% 73%);
@@ -189,5 +189,6 @@
   --kds-elevation-level-0: 0 0 0 0 hsl(330 0% 73% / 0.32);
   --kds-elevation-level-1: 0 1px 1px 0 hsl(330 0% 73% / 0.32), 0 0 1px 0 hsl(330 0% 32% / 0.14), 0 0 8px 0 hsl(330 0% 32% / 0.12);
   --kds-elevation-level-3: 0 2px 4px 0 hsl(330 0% 73% / 0.32), 0 4px 8px 0 hsl(330 0% 32% / 0.14), 0 0 20px 0 hsl(330 0% 32% / 0.12);
+  --kds-fake-border-xs-muted: inset 0 0 0 0.5px 0px hsl(345 0% 10% / 0.2);
   --kds-box-shadow-knob: 0 1px 2px 0 hsl(330 0% 32% / 0.5);
 }

package/dist/tokens/css/_variables.css

@@ -359,10 +359,10 @@
   --kds-color-toggle-switch-icon-on: hsl(176 67% 22%);
   --kds-color-toggle-switch-icon-off: hsl(0 0% 43%);
   --kds-color-toggle-switch-icon-disabled: hsl(0 0% 64%);
-  --kds-color-loading-spinner-progress-on-filled: hsl(166 68% 93%);
-  --kds-color-loading-spinner-progress-on-transparent: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
-  --kds-color-loading-spinner-track-on-filled: hsl(166 68% 93% / 0.24);
-  --kds-color-loading-spinner-track-on-transparent: light-dark(hsl(120 0% 16% / 0.24), hsl(0 0% 94% / 0.24));
+  --kds-color-loading-spinner-progress-on-primary: hsl(166 68% 93%);
+  --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-border-radius-container-none: 0;
   --kds-border-radius-container-0-12x: 2px;
@@ -515,5 +515,6 @@
   --kds-elevation-level-0: 0 0 0 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9));
   --kds-elevation-level-1: 0 1px 1px 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9)), 0 0 1px 0 light-dark(hsl(330 0% 32% / 0.14), hsl(345 0% 10% / 0.94)), 0 0 8px 0 light-dark(hsl(330 0% 32% / 0.12), hsl(345 0% 10% / 0.98));
   --kds-elevation-level-3: 0 2px 4px 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9)), 0 4px 8px 0 light-dark(hsl(330 0% 32% / 0.14), hsl(345 0% 10% / 0.94)), 0 0 20px 0 light-dark(hsl(330 0% 32% / 0.12), hsl(345 0% 10% / 0.98));
+  --kds-fake-border-xs-muted: inset 0 0 0 0.5px 0px light-dark(hsl(345 0% 10% / 0.2), hsl(330 0% 99% / 0.2));
   --kds-box-shadow-knob: 0 1px 2px 0 light-dark(hsl(330 0% 32% / 0.5), hsl(345 0% 10% / 0.6));
 }

package/package.json

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