@knime/kds-styles 0.0.1

package/dist/tokens/css/_variables.css

@@ -0,0 +1,407 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root, :host {
+  --kds-core-color-neutral-25: hsl(0 0% 99%);
+  --kds-core-color-neutral-50: hsl(0 0% 98%);
+  --kds-core-color-neutral-100: hsl(0 0% 94%);
+  --kds-core-color-neutral-175: hsl(0 0% 90%);
+  --kds-core-color-neutral-250: hsl(0 0% 73%);
+  --kds-core-color-neutral-275: hsl(0 0% 64%);
+  --kds-core-color-neutral-325: hsl(0 0% 48%);
+  --kds-core-color-neutral-375: hsl(0 0% 43%);
+  --kds-core-color-neutral-400: hsl(0 0% 32%);
+  --kds-core-color-neutral-475: hsl(0 0% 22%);
+  --kds-core-color-neutral-550: hsl(0 0% 19%);
+  --kds-core-color-neutral-650: hsl(0 0% 16%);
+  --kds-core-color-neutral-725: hsl(0 0% 13%);
+  --kds-core-color-neutral-800: hsl(0 0% 11%);
+  --kds-core-color-neutral-875: hsl(0 0% 10%);
+  --kds-core-color-red-25: hsl(0 56% 98%);
+  --kds-core-color-red-50: hsl(0 100% 97%);
+  --kds-core-color-red-100: hsl(2 100% 92%);
+  --kds-core-color-red-175: hsl(3 100% 86%);
+  --kds-core-color-red-250: hsl(4 100% 80%);
+  --kds-core-color-red-325: hsl(3 100% 72%);
+  --kds-core-color-red-400: hsl(0 100% 66%);
+  --kds-core-color-red-475: hsl(356 77% 54%);
+  --kds-core-color-red-550: hsl(353 75% 45%);
+  --kds-core-color-red-650: hsl(349 91% 35%);
+  --kds-core-color-red-725: hsl(348 97% 27%);
+  --kds-core-color-red-800: hsl(348 94% 21%);
+  --kds-core-color-red-875: hsl(353 84% 15%);
+  --kds-core-color-orange-25: hsl(34 54% 98%);
+  --kds-core-color-orange-50: hsl(30 95% 92%);
+  --kds-core-color-orange-100: hsl(31 100% 83%);
+  --kds-core-color-orange-175: hsl(31 79% 74%);
+  --kds-core-color-orange-250: hsl(31 83% 66%);
+  --kds-core-color-orange-325: hsl(30 80% 60%);
+  --kds-core-color-orange-400: hsl(27 68% 55%);
+  --kds-core-color-orange-475: hsl(25 59% 51%);
+  --kds-core-color-orange-550: hsl(22 60% 45%);
+  --kds-core-color-orange-650: hsl(19 63% 38%);
+  --kds-core-color-orange-725: hsl(16 67% 31%);
+  --kds-core-color-orange-800: hsl(13 66% 23%);
+  --kds-core-color-orange-875: hsl(13 58% 14%);
+  --kds-core-color-yellow-25: hsl(43 78% 97%);
+  --kds-core-color-yellow-50: hsl(43 100% 89%);
+  --kds-core-color-yellow-100: hsl(45 100% 78%);
+  --kds-core-color-yellow-175: hsl(48 100% 68%);
+  --kds-core-color-yellow-250: hsl(51 100% 50%);
+  --kds-core-color-yellow-325: hsl(51 99% 47%);
+  --kds-core-color-yellow-400: hsl(49 99% 44%);
+  --kds-core-color-yellow-475: hsl(47 100% 39%);
+  --kds-core-color-yellow-550: hsl(46 100% 34%);
+  --kds-core-color-yellow-650: hsl(44 100% 26%);
+  --kds-core-color-yellow-725: hsl(43 100% 19%);
+  --kds-core-color-yellow-800: hsl(44 94% 14%);
+  --kds-core-color-yellow-875: hsl(51 100% 8%);
+  --kds-core-color-green-25: hsl(125 65% 97%);
+  --kds-core-color-green-50: hsl(120 95% 92%);
+  --kds-core-color-green-100: hsl(116 72% 82%);
+  --kds-core-color-green-175: hsl(112 57% 71%);
+  --kds-core-color-green-250: hsl(109 47% 61%);
+  --kds-core-color-green-325: hsl(107 43% 55%);
+  --kds-core-color-green-400: hsl(107 42% 44%);
+  --kds-core-color-green-475: hsl(108 46% 37%);
+  --kds-core-color-green-550: hsl(111 48% 31%);
+  --kds-core-color-green-650: hsl(116 47% 26%);
+  --kds-core-color-green-725: hsl(124 47% 21%);
+  --kds-core-color-green-800: hsl(132 52% 15%);
+  --kds-core-color-green-875: hsl(139 56% 10%);
+  --kds-core-color-teal-25: hsl(165 80% 96%);
+  --kds-core-color-teal-50: hsl(166 68% 93%);
+  --kds-core-color-teal-100: hsl(168 47% 85%);
+  --kds-core-color-teal-175: hsl(169 34% 76%);
+  --kds-core-color-teal-250: hsl(170 31% 66%);
+  --kds-core-color-teal-325: hsl(170 28% 57%);
+  --kds-core-color-teal-400: hsl(172 27% 48%);
+  --kds-core-color-teal-475: hsl(173 37% 39%);
+  --kds-core-color-teal-550: hsl(174 48% 31%);
+  --kds-core-color-teal-650: hsl(176 67% 22%);
+  --kds-core-color-teal-725: hsl(177 82% 18%);
+  --kds-core-color-teal-800: hsl(175 93% 12%);
+  --kds-core-color-teal-875: hsl(174 73% 9%);
+  --kds-core-color-blue-25: hsl(225 40% 98%);
+  --kds-core-color-blue-50: hsl(217 100% 97%);
+  --kds-core-color-blue-100: hsl(216 100% 92%);
+  --kds-core-color-blue-175: hsl(215 100% 84%);
+  --kds-core-color-blue-250: hsl(214 92% 77%);
+  --kds-core-color-blue-325: hsl(212 78% 68%);
+  --kds-core-color-blue-400: hsl(211 67% 59%);
+  --kds-core-color-blue-475: hsl(209 57% 50%);
+  --kds-core-color-blue-550: hsl(208 63% 41%);
+  --kds-core-color-blue-650: hsl(208 61% 34%);
+  --kds-core-color-blue-725: hsl(210 50% 28%);
+  --kds-core-color-blue-800: hsl(209 50% 20%);
+  --kds-core-color-blue-875: hsl(209 59% 14%);
+  --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-paragraph-spacing-none: 0;
+  --kds-core-paragraph-spacing-small: 0.25px;
+  --kds-core-paragraph-spacing-medium: 0.5px;
+  --kds-core-paragraph-spacing-large: 0.75px;
+  --kds-core-paragraph-spacing-extra-large: 1px;
+  --kds-core-font-family-roboto: Roboto;
+  --kds-core-font-family-roboto-condensed: 'Roboto Condensed';
+  --kds-core-font-weight-regular: 400;
+  --kds-core-font-weight-regular-italic-weight: 400;
+  --kds-core-font-weight-regular-italic-style: italic;
+  --kds-core-font-weight-medium: 500;
+  --kds-core-font-weight-strong: 700;
+  --kds-core-line-height-singleline: 1;
+  --kds-core-line-height-multiline-narrow: 1.3;
+  --kds-core-line-height-multiline-wide: 1.5;
+  --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%));
+  --kds-color-background-page-default: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
+  --kds-color-background-neutral-initial: hsl(330 0% 11% / 0);
+  --kds-color-background-neutral-hover: light-dark(hsl(180 0% 48% / 0.16), hsl(300 0% 90% / 0.16));
+  --kds-color-background-neutral-active: light-dark(hsl(180 0% 48% / 0.32), hsl(180 0% 48% / 0.56));
+  --kds-color-background-neutral-bold-initial: light-dark(hsl(330 0% 73% / 0.4), hsl(0 0% 32%));
+  --kds-color-background-neutral-bold-hover: light-dark(hsl(330 0% 63.406% / 0.4), hsl(0 0% 48%));
+  --kds-color-background-neutral-bold-active: light-dark(hsl(180 0% 60.265% / 0.4), hsl(0 0% 73%));
+  --kds-color-background-primary-initial: light-dark(hsl(168 47% 85%), hsl(170 31% 66%));
+  --kds-color-background-primary-hover: light-dark(hsl(167.99 28.225% 77.432%), hsl(169.8 30.912% 68.747%));
+  --kds-color-background-primary-active: light-dark(hsl(167.97 19.012% 70%), hsl(169.17 30.736% 78.281%));
+  --kds-color-background-primary-bold-initial: light-dark(hsl(176 67% 22%), hsl(174 48% 31%));
+  --kds-color-background-primary-bold-hover: light-dark(hsl(175.68 58.452% 19.462%), hsl(172.81 27.176% 42.604%));
+  --kds-color-background-primary-bold-active: light-dark(hsl(175.24 49.005% 15.917%), hsl(171.42 19.56% 64.2%));
+  --kds-color-background-selected-initial: light-dark(hsl(166 68% 93%), hsl(176 67% 22% / 0.32));
+  --kds-color-background-selected-hover: light-dark(hsl(168 47% 85%), hsl(174 48% 31% / 0.56));
+  --kds-color-background-selected-active: light-dark(hsl(169 34% 76%), hsl(172 27% 48% / 0.72));
+  --kds-color-background-selected-bold-initial: light-dark(hsl(174 48% 31%), hsl(176 67% 22%));
+  --kds-color-background-selected-bold-hover: light-dark(hsl(176 67% 22%), hsl(174 48% 31%));
+  --kds-color-background-selected-bold-active: light-dark(hsl(177 82% 18%), hsl(172 27% 48%));
+  --kds-color-background-danger-initial: light-dark(hsl(2.4731 100% 96.876%), hsl(356.66 65.093% 15.235%));
+  --kds-color-background-danger-hover: light-dark(hsl(3 100% 86%), hsl(349 91% 35% / 0.72));
+  --kds-color-background-danger-active: light-dark(hsl(4 100% 80%), hsl(353 75% 45% / 0.72));
+  --kds-color-background-danger-bold-initial: light-dark(hsl(349 91% 35%), hsl(348 97% 27%));
+  --kds-color-background-danger-bold-hover: light-dark(hsl(348 97% 27%), hsl(353 75% 45% / 0.8));
+  --kds-color-background-danger-bold-active: light-dark(hsl(348 94% 21%), hsl(356 77% 54% / 0.8));
+  --kds-color-background-warning-initial: light-dark(hsl(29.514 98.554% 96.838%), hsl(14.626 60.206% 14.715%));
+  --kds-color-background-warning-hover: light-dark(hsl(29.512 39.352% 92.463%), hsl(14.171 48.783% 17.797%));
+  --kds-color-background-warning-active: light-dark(hsl(29.51 23.726% 88.128%), hsl(14.532 35.821% 23.829%));
+  --kds-color-background-warning-bold-initial: light-dark(hsl(22 60% 45%), hsl(19 63% 38%));
+  --kds-color-background-warning-bold-hover: light-dark(hsl(21.929 58.367% 37.68%), hsl(19.04 44.421% 47.984%));
+  --kds-color-background-warning-bold-active: light-dark(hsl(21.825 55.638% 28.836%), hsl(19.038 42.206% 52.935%));
+  --kds-color-background-success-initial: light-dark(hsl(118.68 97.025% 96.828%), hsl(128.09 38.652% 10.529%));
+  --kds-color-background-success-hover: light-dark(hsl(118.68 38.813% 92.454%), hsl(126.93 29.012% 13.533%));
+  --kds-color-background-success-active: light-dark(hsl(118.67 23.411% 88.119%), hsl(125.21 18.669% 19.69%));
+  --kds-color-background-success-bold-initial: light-dark(hsl(111 48% 31%), hsl(116 47% 26%));
+  --kds-color-background-success-bold-hover: light-dark(hsl(110.47 45.877% 26.246%), hsl(112.26 28.404% 37.07%));
+  --kds-color-background-success-bold-active: light-dark(hsl(109.63 42.516% 20.454%), hsl(111.19 22.717% 42.67%));
+  --kds-color-background-info-initial: light-dark(hsl(216.77 100% 96.851%), hsl(211.86 41.035% 17.864%));
+  --kds-color-background-info-hover: light-dark(hsl(216.77 39.826% 92.476%), hsl(212.68 33.733% 20.806%));
+  --kds-color-background-info-active: light-dark(hsl(216.78 23.993% 88.14%), hsl(213.81 24.237% 26.721%));
+  --kds-color-background-info-bold-initial: light-dark(hsl(208 63% 41%), hsl(208 61% 34%));
+  --kds-color-background-info-bold-hover: light-dark(hsl(208.92 58.259% 34.934%), hsl(211.76 34.965% 45.77%));
+  --kds-color-background-info-bold-active: light-dark(hsl(210.19 52% 27.273%), hsl(212.8 29.174% 51.036%));
+  --kds-color-background-brand-initial: hsl(51 100% 50%);
+  --kds-color-background-brand-hover: light-dark(hsl(50.165 84.159% 44.695%), hsl(48.411 100% 65.242%));
+  --kds-color-background-brand-active: light-dark(hsl(49.385 73.102% 35.333%), hsl(47.704 100% 69.488%));
+  --kds-color-background-input-initial: light-dark(hsl(0 0% 99%), hsl(0 0% 22%));
+  --kds-color-background-input-hover: light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%));
+  --kds-color-background-input-active: light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%));
+  --kds-color-background-disabled-default: hsl(180 0% 48% / 0.48);
+  --kds-color-text-and-icon-neutral: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
+  --kds-color-text-and-icon-muted: light-dark(hsl(0 0% 32%), hsl(0 0% 73%));
+  --kds-color-text-and-icon-subtle: light-dark(hsl(0 0% 43%), hsl(0 0% 73%));
+  --kds-color-text-and-icon-neutral-inverted: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
+  --kds-color-text-and-icon-primary: hsl(176 67% 22%);
+  --kds-color-text-and-icon-primary-inverted: hsl(166 68% 93%);
+  --kds-color-text-and-icon-selected: light-dark(hsl(176 67% 22%), hsl(169 34% 76%));
+  --kds-color-text-and-icon-selected-inverted: hsl(165 80% 96%);
+  --kds-color-text-and-icon-warning: light-dark(hsl(19 63% 38%), hsl(31 83% 66%));
+  --kds-color-text-and-icon-warning-inverted: hsl(31 100% 83%);
+  --kds-color-text-and-icon-danger: light-dark(hsl(349 91% 35%), hsl(4 100% 80%));
+  --kds-color-text-and-icon-danger-inverted: light-dark(hsl(0 100% 97%), hsl(2 100% 92%));
+  --kds-color-text-and-icon-success: light-dark(hsl(116 47% 26%), hsl(109 47% 61%));
+  --kds-color-text-and-icon-success-inverted: hsl(120 95% 92%);
+  --kds-color-text-and-icon-disabled: light-dark(hsl(0 0% 64%), hsl(0 0% 48%));
+  --kds-color-text-and-icon-info: light-dark(hsl(208 61% 34%), hsl(214 92% 77%));
+  --kds-color-border-neutral: light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
+  --kds-color-border-muted: light-dark(hsl(345 0% 10% / 0.2), hsl(330 0% 99% / 0.2));
+  --kds-color-border-subtle: light-dark(hsl(345 0% 10% / 0.1), hsl(330 0% 99% / 0.1));
+  --kds-color-border-primary-bold: hsl(177 82% 18%);
+  --kds-color-border-primary: light-dark(hsl(170 31% 66%), hsl(169 34% 76%));
+  --kds-color-border-selected-bold: light-dark(hsl(174 48% 31%), hsl(169 34% 76%));
+  --kds-color-border-selected: light-dark(hsl(172 27% 48%), hsl(168 47% 85%));
+  --kds-color-border-selected-accent: light-dark(hsl(209 57% 50%), hsl(214 92% 77%));
+  --kds-color-border-warning-bold: light-dark(hsl(19 63% 38%), hsl(31 100% 83%));
+  --kds-color-border-warning: light-dark(hsl(31 79% 74%), hsl(13 66% 23%));
+  --kds-color-border-danger-bold: light-dark(hsl(349 91% 35%), hsl(4 100% 80%));
+  --kds-color-border-danger: light-dark(hsl(3 100% 86%), hsl(348 94% 21%));
+  --kds-color-border-success-bold: light-dark(hsl(116 47% 26%), hsl(112 57% 71%));
+  --kds-color-border-success: light-dark(hsl(112 57% 71%), hsl(124 47% 21%));
+  --kds-color-border-info-bold: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
+  --kds-color-border-info: light-dark(hsl(215 100% 84%), hsl(210 50% 28%));
+  --kds-color-border-transparent: hsl(330 0% 11% / 0);
+  --kds-color-border-disabled: light-dark(hsl(0 0% 73%), hsl(0 0% 48%));
+  --kds-color-border-brand: hsl(51 100% 50%);
+  --kds-color-border-neutral-bold-initial: light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.4));
+  --kds-color-border-neutral-bold-hover: light-dark(hsl(345 0% 10% / 0.64), hsl(330 0% 99% / 0.58));
+  --kds-color-border-neutral-bold-active: light-dark(hsl(345 0% 10% / 0.74), hsl(330 0% 99% / 0.68));
+  --kds-color-focus-outline: light-dark(hsl(209 57% 50%), hsl(214 92% 77%));
+  --kds-color-focus-background: light-dark(hsl(217 100% 97%), hsl(211.86 41.035% 17.864%));
+  --kds-color-blanket-default: hsl(330 0% 11% / 0.8);
+  --kds-color-nodes-and-variables-flow-variable: hsl(0 100% 65%);
+  --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));
+  --kds-color-desktop-header-background-default: hsl(0 0% 10%);
+  --kds-color-desktop-header-background-muted: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
+  --kds-color-desktop-header-background-accent: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
+  --kds-color-desktop-header-text-and-icon-neutral: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
+  --kds-color-desktop-header-text-and-icon-muted: light-dark(hsl(0 0% 32%), hsl(0 0% 73%));
+  --kds-color-desktop-header-border-default: light-dark(hsl(345 0% 10% / 0.1), hsl(330 0% 99% / 0.1));
+  --kds-color-table-header-background-default: hsl(0 0% 99%);
+  --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-skeleton-bar-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;
+  --kds-border-radius-container-0-25x: 4px;
+  --kds-border-radius-container-0-31x: 5px;
+  --kds-border-radius-container-0-37x: 6px;
+  --kds-border-radius-container-0-44x: 7px;
+  --kds-border-radius-container-0-50x: 8px;
+  --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-l: 1.5px;
+  --kds-border-action-transparent: 1px 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%));
+  --kds-border-action-selected: 1px solid light-dark(hsl(172 27% 48%), hsl(168 47% 85%));
+  --kds-border-action-selected-accent: 1px solid light-dark(hsl(209 57% 50%), hsl(214 92% 77%));
+  --kds-border-action-error: 1px solid light-dark(hsl(349 91% 35%), hsl(4 100% 80%));
+  --kds-border-action-primary: 1px solid hsl(177 82% 18%);
+  --kds-border-action-input: 1px none light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.5));
+  --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-sizing-viewport-breakpoints-576: 576px;
+  --kds-sizing-viewport-breakpoints-768: 768px;
+  --kds-sizing-viewport-breakpoints-1024: 1024px;
+  --kds-sizing-viewport-breakpoints-1200: 1200px;
+  --kds-sizing-viewport-breakpoints-1400: 1400px;
+  --kds-sizing-viewport-breakpoints-1728: 1728px;
+  --kds-spacing-container-none: 0;
+  --kds-spacing-container-0-10x: 1px;
+  --kds-spacing-container-0-12x: 2px;
+  --kds-spacing-container-0-25x: 4px;
+  --kds-spacing-container-0-37x: 6px;
+  --kds-spacing-container-0-5x: 8px;
+  --kds-spacing-container-0-75x: 12px;
+  --kds-spacing-container-1x: 16px;
+  --kds-spacing-container-1-25x: 20px;
+  --kds-spacing-container-1-5x: 24px;
+  --kds-spacing-container-2x: 32px;
+  --kds-spacing-container-auto: AUTO;
+  --kds-spacing-input-label-spacing-bottom: 6px;
+  --kds-spacing-input-sub-text-spacing-top: 4px;
+  --kds-dimension-component-height-0-75x: 12px;
+  --kds-dimension-component-height-0-88x: 14px;
+  --kds-dimension-component-height-1x: 16px;
+  --kds-dimension-component-height-1-25x: 20px;
+  --kds-dimension-component-height-1-5x: 24px;
+  --kds-dimension-component-height-1-75x: 28px;
+  --kds-dimension-component-height-2-25x: 36px;
+  --kds-dimension-component-height-2-5x: 40px;
+  --kds-dimension-component-width-0-75x: 12px;
+  --kds-dimension-component-width-0-88x: 14px;
+  --kds-dimension-component-width-1x: 16px;
+  --kds-dimension-component-width-1-25x: 20px;
+  --kds-dimension-component-width-1-5x: 24px;
+  --kds-dimension-component-width-1-75x: 28px;
+  --kds-dimension-component-width-2-25x: 36px;
+  --kds-dimension-icon-0-56x: 9px;
+  --kds-dimension-icon-0-75x: 12px;
+  --kds-dimension-icon-1x: 16px;
+  --kds-dimension-icon-1-25x: 20px;
+  --kds-font-base-display-small: 700 20px/1.3 Roboto;
+  --kds-font-base-display-medium: 700 24px/1.3 Roboto;
+  --kds-font-base-display-large: 700 32px/1.3 Roboto;
+  --kds-font-base-display-xlarge: 700 40px/1.3 Roboto;
+  --kds-font-base-title-xsmall: 500 10px/1 Roboto;
+  --kds-font-base-title-small: 500 12px/1 Roboto;
+  --kds-font-base-title-small-strong: 700 12px/1 Roboto;
+  --kds-font-base-title-medium: 500 14px/1 Roboto;
+  --kds-font-base-title-medium-strong: 700 14px/1 Roboto;
+  --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-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;
+  --kds-font-base-subtext-xsmall: 400 9px Roboto;
+  --kds-font-base-subtext-small: 400 10px/1.3 Roboto;
+  --kds-font-base-subtext-medium: 400 12px/1.3 Roboto;
+  --kds-font-base-interactive-xsmall-strong: 500 11px/1 Roboto;
+  --kds-font-base-interactive-small: 400 12px/1 Roboto;
+  --kds-font-base-interactive-small-italic: italic 400 12px/1 Roboto;
+  --kds-font-base-interactive-small-strong: 500 12px/1 Roboto;
+  --kds-font-base-interactive-medium: 400 14px/1 Roboto;
+  --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-annotations-h1: 700 36px/1.5 'Roboto Condensed';
+  --kds-font-annotations-h2: 700 30px/1.5 'Roboto Condensed';
+  --kds-font-annotations-h3: 700 26px/1.5 'Roboto Condensed';
+  --kds-font-annotations-h4: 700 22px/1.5 'Roboto Condensed';
+  --kds-font-annotations-h5: 700 16px/1.5 'Roboto Condensed';
+  --kds-font-annotations-h6: 700 13px/1.5 'Roboto Condensed';
+  --kds-font-annotations-body: 700 13px/1.5 'Roboto Condensed';
+  --kds-font-dataapps-h1: 700 36px/1.5 Roboto;
+  --kds-font-dataapps-h2: 700 30px/1.5 Roboto;
+  --kds-font-dataapps-h3: 700 26px/1.5 Roboto;
+  --kds-font-dataapps-h4: 700 22px/1.5 Roboto;
+  --kds-font-dataapps-h5: 700 16px/1.5 Roboto;
+  --kds-font-dataapps-h6: 700 13px/1.5 Roboto;
+  --kds-font-dataapps-body: 700 13px/1.5 Roboto;
+  --kds-font-dataapps-body-small: 700 10px/1.5 Roboto;
+  --elevation-level-0: 0 0 0 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9));
+  --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));
+  --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));
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@knime/kds-styles",
+  "version": "0.0.1",
+  "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",
+  "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": "^26.0.0",
+    "rimraf": "^6.0.1",
+    "style-dictionary": "^5.0.1",
+    "svgo": "^4.0.0",
+    "typescript": "^5.9.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./kds-variables.css": "./dist/tokens/css/_variables.css",
+    "./kds-properties.css": "./dist/tokens/css/_properties.css",
+    "./icons/*": "./dist/icons/*.svg",
+    "./icons/def": "./dist/icons/def.ts"
+  },
+  "engines": {
+    "node": "24.5.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",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}