@knime/kds-styles 0.0.6 → 0.0.8

package/dist/tokens/css/_properties.css

@@ -890,396 +890,168 @@ syntax: "<color>";
   initial-value: hsl(330 0% 11% / 0);
 }
 
-@property --kds-core-dimension-0 {
+@property --kds-core-font-size-0-5x {
 syntax: "<length>";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --kds-core-dimension-6 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 1px;
-}
-
-@property --kds-core-dimension-12 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 2px;
-}
-
-@property --kds-core-dimension-25 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 4px;
-}
-
-@property --kds-core-dimension-31 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 5px;
-}
-
-@property --kds-core-dimension-37 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 6px;
-}
-
-@property --kds-core-dimension-44 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 7px;
-}
-
-@property --kds-core-dimension-50 {
-syntax: "<length>";
-  inherits: false;
+  inherits: true;
   initial-value: 8px;
 }
 
-@property --kds-core-dimension-56 {
+@property --kds-core-font-size-0-56x {
 syntax: "<length>";
-  inherits: false;
+  inherits: true;
   initial-value: 9px;
 }
 
-@property --kds-core-dimension-75 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 12px;
-}
-
-@property --kds-core-dimension-88 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 14px;
-}
-
-@property --kds-core-dimension-100 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 16px;
-}
-
-@property --kds-core-dimension-125 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 20px;
-}
-
-@property --kds-core-dimension-150 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 24px;
-}
-
-@property --kds-core-dimension-175 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 28px;
-}
-
-@property --kds-core-dimension-200 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 32px;
-}
-
-@property --kds-core-dimension-225 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 36px;
-}
-
-@property --kds-core-dimension-250 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 40px;
-}
-
-@property --kds-core-dimension-275 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 44px;
-}
-
-@property --kds-core-dimension-300 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 48px;
-}
-
-@property --kds-core-dimension-350 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 56px;
-}
-
-@property --kds-core-dimension-400 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 64px;
-}
-
-@property --kds-core-dimension-450 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 72px;
-}
-
-@property --kds-core-dimension-500 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 80px;
-}
-
-@property --kds-core-dimension-600 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 96px;
-}
-
-@property --kds-core-dimension-700 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 112px;
-}
-
-@property --kds-core-dimension-800 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 128px;
-}
-
-@property --kds-core-dimension-900 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 144px;
-}
-
-@property --kds-core-dimension-1000 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 160px;
-}
-
-@property --kds-core-dimension-1100 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 176px;
-}
-
-@property --kds-core-dimension-1200 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 192px;
-}
-
-@property --kds-core-dimension-1300 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 208px;
-}
-
-@property --kds-core-dimension-1400 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 224px;
-}
-
-@property --kds-core-dimension-1500 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 240px;
-}
-
-@property --kds-core-dimension-1600 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 256px;
-}
-
-@property --kds-core-dimension-2000 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 320px;
-}
-
-@property --kds-core-dimension-2400 {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 384px;
-}
-
-@property --kds-core-dimension-base {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 0.16px;
-}
-
-@property --kds-core-size-scale {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 16px;
-}
-
-@property --kds-core-font-size-rem {
+@property --kds-core-font-size-0-62x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 16px;
+  initial-value: 10px;
 }
 
-@property --kds-core-font-size-scaled-0-5x {
+@property --kds-core-font-size-0-68x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 8px;
+  initial-value: 11px;
 }
 
-@property --kds-core-font-size-scaled-0-56x {
+@property --kds-core-font-size-0-75x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 9px;
+  initial-value: 12px;
 }
 
-@property --kds-core-font-size-scaled-0-62x {
+@property --kds-core-font-size-0-81x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 10px;
+  initial-value: 13px;
 }
 
-@property --kds-core-font-size-scaled-0-68x {
+@property --kds-core-font-size-0-87x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 11px;
+  initial-value: 14px;
 }
 
-@property --kds-core-font-size-scaled-0-75x {
+@property --kds-core-font-size-1x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 12px;
+  initial-value: 16px;
 }
 
-@property --kds-core-font-size-scaled-0-81x {
+@property --kds-core-font-size-1-25x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 13px;
+  initial-value: 20px;
 }
 
-@property --kds-core-font-size-scaled-0-87x {
+@property --kds-core-font-size-1-375x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 14px;
+  initial-value: 22px;
 }
 
-@property --kds-core-font-size-scaled-1x {
+@property --kds-core-font-size-1-625x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 16px;
+  initial-value: 26px;
 }
 
-@property --kds-core-font-size-scaled-1-25x {
+@property --kds-core-font-size-1-5x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 20px;
+  initial-value: 24px;
 }
 
-@property --kds-core-font-size-scaled-1-5x {
+@property --kds-core-font-size-1-75x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 24px;
+  initial-value: 28px;
 }
 
-@property --kds-core-font-size-scaled-1-75x {
+@property --kds-core-font-size-1-875x {
 syntax: "<length>";
   inherits: true;
-  initial-value: 28px;
+  initial-value: 30px;
 }
 
-@property --kds-core-font-size-scaled-2x {
+@property --kds-core-font-size-2x {
 syntax: "<length>";
   inherits: true;
   initial-value: 32px;
 }
 
-@property --kds-core-font-size-scaled-2-25x {
+@property --kds-core-font-size-2-25x {
 syntax: "<length>";
   inherits: true;
   initial-value: 36px;
 }
 
-@property --kds-core-font-size-scaled-2-5x {
+@property --kds-core-font-size-2-5x {
 syntax: "<length>";
   inherits: true;
   initial-value: 40px;
 }
 
-@property --kds-core-font-size-scaled-2-75x {
+@property --kds-core-font-size-2-75x {
 syntax: "<length>";
   inherits: true;
   initial-value: 44px;
 }
 
-@property --kds-core-font-size-scaled-3x {
+@property --kds-core-font-size-3x {
 syntax: "<length>";
   inherits: true;
   initial-value: 48px;
 }
 
-@property --kds-core-font-size-scaled-3-25x {
+@property --kds-core-font-size-3-25x {
 syntax: "<length>";
   inherits: true;
   initial-value: 52px;
 }
 
-@property --kds-core-font-size-scaled-3-5x {
+@property --kds-core-font-size-3-5x {
 syntax: "<length>";
   inherits: true;
   initial-value: 56px;
 }
 
-@property --kds-core-font-size-scaled-3-75x {
+@property --kds-core-font-size-3-75x {
 syntax: "<length>";
   inherits: true;
   initial-value: 60px;
 }
 
-@property --kds-core-font-size-scaled-4x {
+@property --kds-core-font-size-4x {
 syntax: "<length>";
   inherits: true;
   initial-value: 64px;
 }
 
-@property --kds-core-font-size-scaled-4-5x {
+@property --kds-core-font-size-4-5x {
 syntax: "<length>";
   inherits: true;
   initial-value: 72px;
 }
 
-@property --kds-core-font-size-scaled-5x {
+@property --kds-core-font-size-5x {
 syntax: "<length>";
   inherits: true;
   initial-value: 80px;
 }
 
-@property --kds-core-font-size-scaled-5-5x {
+@property --kds-core-font-size-5-5x {
 syntax: "<length>";
   inherits: true;
   initial-value: 88px;
 }
 
-@property --kds-core-font-size-scaled-6x {
+@property --kds-core-font-size-6x {
 syntax: "<length>";
   inherits: true;
   initial-value: 96px;
 }
 
-@property --kds-core-font-size-scaled-base {
-syntax: "<length>";
-  inherits: true;
-  initial-value: 0.16px;
-}
-
 @property --kds-core-paragraph-spacing-none {
 syntax: "<length>";
   inherits: false;
@@ -1322,6 +1094,12 @@ syntax: "<string>#";
   initial-value: 'Roboto Condensed';
 }
 
+@property --kds-core-font-family-roboto-mono {
+syntax: "<string>#";
+  inherits: true;
+  initial-value: 'Roboto Mono';
+}
+
 @property --kds-core-font-weight-regular {
 syntax: "<number>";
   inherits: true;
@@ -1370,6 +1148,42 @@ syntax: "<number> | <percentage>";
   initial-value: 1.5;
 }
 
+@property --kds-core-size-scale {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 16px;
+}
+
+@property --kds-core-border-width-none {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --kds-core-border-width-xs {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 1px;
+}
+
+@property --kds-core-border-width-s {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 1.2496px;
+}
+
+@property --kds-core-border-width-m {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 1.5px;
+}
+
+@property --kds-core-border-width-l {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 2px;
+}
+
 @property --kds-color-surface-default {
 syntax: "<color>";
   inherits: true;
@@ -2432,24 +2246,6 @@ syntax: "<length>";
   initial-value: 1000px;
 }
 
-@property --kds-border-width-base-none {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --kds-border-width-base-s {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 1px;
-}
-
-@property --kds-border-width-base-m {
-syntax: "<length>";
-  inherits: false;
-  initial-value: 2px;
-}
-
 @property --kds-border-width-icon-stroke-s {
 syntax: "<length>";
   inherits: false;
@@ -2459,7 +2255,7 @@ syntax: "<length>";
 @property --kds-border-width-icon-stroke-m {
 syntax: "<length>";
   inherits: false;
-  initial-value: 1.25px;
+  initial-value: 1.2496px;
 }
 
 @property --kds-border-width-icon-stroke-l {
@@ -2471,7 +2267,7 @@ syntax: "<length>";
 @property --kds-border-action-transparent {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(330 0% 11% / 0);
+  initial-value: 0 solid hsl(330 0% 11% / 0);
 }
 
 @property --kds-border-action-default {
@@ -2543,31 +2339,31 @@ syntax: "<string>";
 @property --kds-border-base-brand {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px soild hsl(51 100% 50%);
+  initial-value: 1px solid hsl(51 100% 50%);
 }
 
 @property --kds-border-base-danger {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px soild light-dark(hsl(3 100% 86%), hsl(348 94% 21%));
+  initial-value: 1px solid light-dark(hsl(3 100% 86%), hsl(348 94% 21%));
 }
 
 @property --kds-border-base-warning {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px soild light-dark(hsl(31 79% 74%), hsl(13 66% 23%));
+  initial-value: 1px solid light-dark(hsl(31 79% 74%), hsl(13 66% 23%));
 }
 
 @property --kds-border-base-success {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px soild light-dark(hsl(112 57% 71%), hsl(124 47% 21%));
+  initial-value: 1px solid light-dark(hsl(112 57% 71%), hsl(124 47% 21%));
 }
 
 @property --kds-border-base-info {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px soild light-dark(hsl(215 100% 84%), hsl(210 50% 28%));
+  initial-value: 1px solid light-dark(hsl(215 100% 84%), hsl(210 50% 28%));
 }
 
 @property --kds-border-node-status-empty {
@@ -2595,21 +2391,21 @@ syntax: "<string>";
 }
 
 @property --kds-border-resize-handle-initial {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
-  initial-value: [object Object];
+  initial-value: 2px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.4));
 }
 
 @property --kds-border-resize-handle-hover {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
-  initial-value: [object Object];
+  initial-value: 2px solid light-dark(hsl(345 0% 10% / 0.64), hsl(330 0% 99% / 0.58));
 }
 
 @property --kds-border-resize-handle-active {
-syntax: "*";
+syntax: "<string>";
   inherits: false;
-  initial-value: [object Object];
+  initial-value: 2px solid light-dark(hsl(345 0% 10% / 0.74), hsl(330 0% 99% / 0.68));
 }
 
 @property --kds-sizing-viewport-breakpoints-576 {
@@ -2960,6 +2756,18 @@ syntax: "<string>";
   initial-value: 400 12px/1.5 Roboto;
 }
 
+@property --kds-font-base-body-small-italic {
+syntax: "<string>";
+  inherits: true;
+  initial-value: italic 400 12px/1.5 Roboto;
+}
+
+@property --kds-font-base-body-small-strong {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 12px/1.5 Roboto;
+}
+
 @property --kds-font-base-body-medium {
 syntax: "<string>";
   inherits: true;
@@ -3044,6 +2852,18 @@ syntax: "<string>";
   initial-value: 500 16px/1 Roboto;
 }
 
+@property --kds-font-base-code-xsmall {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 400 10px/1 'Roboto Mono';
+}
+
+@property --kds-font-base-code-small {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 400 11px/1.3 'Roboto Mono';
+}
+
 @property --kds-font-workflows-annotations-h1 {
 syntax: "<string>";
   inherits: true;