@knime/kds-styles 0.0.1

package/dist/tokens/css/_properties.css

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