@salt-ds/theme 0.0.0-snapshot-20240726102508 → 0.0.0-snapshot-20240726124318

package/css/foundations/color.css

@@ -0,0 +1,297 @@
+.salt-theme {
+  /* Color palette will stay the same no matter of theming */
+  --salt-color-white: rgb(255, 255, 255);
+  --salt-color-black: rgb(0, 0, 0);
+
+  --salt-color-red-10: rgb(255, 227, 224);
+  --salt-color-red-20: rgb(255, 207, 201);
+  --salt-color-red-30: rgb(255, 187, 178);
+  --salt-color-red-40: rgb(255, 167, 156);
+  --salt-color-red-50: rgb(255, 148, 133);
+  --salt-color-red-100: rgb(255, 128, 111);
+  --salt-color-red-200: rgb(255, 108, 88);
+  --salt-color-red-300: rgb(255, 89, 66);
+  --salt-color-red-400: rgb(237, 65, 42);
+  --salt-color-red-500: rgb(227, 43, 22);
+  --salt-color-red-600: rgb(196, 32, 16);
+  --salt-color-red-700: rgb(166, 21, 11);
+  --salt-color-red-800: rgb(136, 10, 5);
+  --salt-color-red-900: rgb(65, 37, 34);
+
+  --salt-color-orange-10: rgb(255, 232, 191);
+  --salt-color-orange-20: rgb(254, 223, 166);
+  --salt-color-orange-30: rgb(254, 214, 142);
+  --salt-color-orange-40: rgb(254, 205, 118);
+  --salt-color-orange-50: rgb(254, 197, 94);
+  --salt-color-orange-100: rgb(250, 181, 81);
+  --salt-color-orange-200: rgb(246, 165, 68);
+  --salt-color-orange-300: rgb(242, 149, 56);
+  --salt-color-orange-400: rgb(238, 133, 43);
+  --salt-color-orange-500: rgb(234, 115, 25);
+  --salt-color-orange-600: rgb(224, 101, 25);
+  --salt-color-orange-700: rgb(214, 85, 19);
+  --salt-color-orange-800: rgb(204, 68, 13);
+  --salt-color-orange-850: rgb(194, 52, 7);
+  --salt-color-orange-900: rgb(54, 44, 36);
+
+  --salt-color-green-10: rgb(209, 244, 201);
+  --salt-color-green-20: rgb(184, 232, 182);
+  --salt-color-green-30: rgb(160, 221, 164);
+  --salt-color-green-40: rgb(136, 210, 145);
+  --salt-color-green-50: rgb(112, 199, 127);
+  --salt-color-green-100: rgb(93, 189, 116);
+  --salt-color-green-200: rgb(77, 180, 105);
+  --salt-color-green-300: rgb(60, 171, 96);
+  --salt-color-green-400: rgb(48, 156, 90);
+  --salt-color-green-500: rgb(36, 135, 75);
+  --salt-color-green-600: rgb(24, 114, 61);
+  --salt-color-green-700: rgb(12, 93, 46);
+  --salt-color-green-800: rgb(1, 73, 32);
+  --salt-color-green-900: rgb(35, 52, 43);
+
+  --salt-color-teal-10: rgb(218, 240, 240);
+  --salt-color-teal-20: rgb(199, 232, 232);
+  --salt-color-teal-30: rgb(180, 224, 225);
+  --salt-color-teal-40: rgb(162, 217, 218);
+  --salt-color-teal-50: rgb(141, 205, 209);
+  --salt-color-teal-100: rgb(123, 193, 200);
+  --salt-color-teal-200: rgb(99, 181, 192);
+  --salt-color-teal-300: rgb(73, 160, 172);
+  --salt-color-teal-400: rgb(48, 149, 166);
+  --salt-color-teal-500: rgb(0, 130, 151);
+  --salt-color-teal-600: rgb(27, 107, 133);
+  --salt-color-teal-700: rgb(0, 85, 113);
+  --salt-color-teal-800: rgb(1, 65, 86);
+  --salt-color-teal-900: rgb(0, 49, 76);
+
+  --salt-color-blue-10: rgb(203, 231, 249);
+  --salt-color-blue-20: rgb(183, 222, 246);
+  --salt-color-blue-30: rgb(164, 213, 244);
+  --salt-color-blue-40: rgb(144, 204, 242);
+  --salt-color-blue-50: rgb(125, 195, 240);
+  --salt-color-blue-100: rgb(100, 177, 228);
+  --salt-color-blue-200: rgb(75, 159, 216);
+  --salt-color-blue-300: rgb(51, 141, 205);
+  --salt-color-blue-400: rgb(46, 132, 198);
+  --salt-color-blue-500: rgb(38, 112, 169);
+  --salt-color-blue-600: rgb(21, 92, 147);
+  --salt-color-blue-700: rgb(0, 71, 123);
+  --salt-color-blue-800: rgb(39, 60, 77);
+  --salt-color-blue-900: rgb(35, 47, 56);
+
+  --salt-color-purple-10: rgb(249, 224, 247);
+  --salt-color-purple-20: rgb(247, 212, 244);
+  --salt-color-purple-30: rgb(245, 201, 241);
+  --salt-color-purple-40: rgb(243, 189, 238);
+  --salt-color-purple-50: rgb(241, 178, 235);
+  --salt-color-purple-100: rgb(223, 156, 225);
+  --salt-color-purple-200: rgb(205, 135, 215);
+  --salt-color-purple-300: rgb(192, 116, 203);
+  --salt-color-purple-400: rgb(169, 97, 181);
+  --salt-color-purple-500: rgb(150, 78, 162);
+  --salt-color-purple-600: rgb(129, 60, 141);
+  --salt-color-purple-700: rgb(103, 46, 122);
+  --salt-color-purple-800: rgb(83, 37, 109);
+  --salt-color-purple-900: rgb(59, 16, 84);
+
+  --salt-color-gray-10: rgb(242, 244, 246);
+  --salt-color-gray-20: rgb(234, 237, 239);
+  --salt-color-gray-30: rgb(224, 228, 233);
+  --salt-color-gray-40: rgb(217, 221, 227);
+  --salt-color-gray-50: rgb(206, 210, 217);
+  --salt-color-gray-60: rgb(197, 201, 208);
+  --salt-color-gray-70: rgb(180, 183, 190);
+  --salt-color-gray-80: rgb(159, 163, 170);
+  --salt-color-gray-90: rgb(132, 135, 142);
+  --salt-color-gray-100: rgb(116, 119, 127);
+  --salt-color-gray-200: rgb(97, 101, 110);
+  --salt-color-gray-300: rgb(76, 80, 91);
+  --salt-color-gray-400: rgb(68, 72, 79);
+  --salt-color-gray-500: rgb(59, 63, 70);
+  --salt-color-gray-600: rgb(47, 49, 54);
+  --salt-color-gray-700: rgb(42, 44, 47);
+  --salt-color-gray-800: rgb(36, 37, 38);
+  --salt-color-gray-900: rgb(22, 22, 22);
+
+  /* Categorical palette */
+  --salt-color-cobalt-100: rgb(237, 244, 255);
+  --salt-color-cobalt-200: rgb(198, 211, 239);
+  --salt-color-cobalt-300: rgb(159, 179, 223);
+  --salt-color-cobalt-400: rgb(118, 148, 207);
+  --salt-color-cobalt-500: rgb(70, 118, 191);
+  --salt-color-cobalt-600: rgb(53, 95, 161);
+  --salt-color-cobalt-700: rgb(36, 72, 133);
+  --salt-color-cobalt-800: rgb(19, 51, 105);
+  --salt-color-cobalt-900: rgb(0, 31, 79);
+  --salt-color-cider-100: rgb(255, 235, 217);
+  --salt-color-cider-200: rgb(255, 201, 158);
+  --salt-color-cider-300: rgb(242, 172, 116);
+  --salt-color-cider-400: rgb(219, 138, 72);
+  --salt-color-cider-500: rgb(171, 101, 40);
+  --salt-color-cider-600: rgb(143, 82, 31);
+  --salt-color-cider-700: rgb(116, 64, 21);
+  --salt-color-cider-800: rgb(90, 47, 13);
+  --salt-color-cider-900: rgb(66, 31, 0);
+  --salt-color-plum-100: rgb(245, 224, 255);
+  --salt-color-plum-200: rgb(230, 185, 250);
+  --salt-color-plum-300: rgb(209, 148, 235);
+  --salt-color-plum-400: rgb(188, 115, 222);
+  --salt-color-plum-500: rgb(159, 85, 194);
+  --salt-color-plum-600: rgb(131, 67, 161);
+  --salt-color-plum-700: rgb(105, 50, 130);
+  --salt-color-plum-800: rgb(79, 34, 100);
+  --salt-color-plum-900: rgb(55, 18, 71);
+  --salt-color-aqua-100: rgb(220, 247, 247);
+  --salt-color-aqua-200: rgb(177, 229, 229);
+  --salt-color-aqua-300: rgb(135, 200, 201);
+  --salt-color-aqua-400: rgb(90, 171, 173);
+  --salt-color-aqua-500: rgb(42, 130, 133);
+  --salt-color-aqua-600: rgb(31, 109, 111);
+  --salt-color-aqua-700: rgb(19, 88, 90);
+  --salt-color-aqua-800: rgb(8, 68, 70);
+  --salt-color-aqua-900: rgb(0, 49, 51);
+  --salt-color-slate-100: rgb(225, 232, 247);
+  --salt-color-slate-200: rgb(194, 202, 221);
+  --salt-color-slate-300: rgb(164, 173, 196);
+  --salt-color-slate-400: rgb(134, 145, 172);
+  --salt-color-slate-500: rgb(105, 118, 148);
+  --salt-color-slate-600: rgb(84, 95, 122);
+  --salt-color-slate-700: rgb(64, 73, 97);
+  --salt-color-slate-800: rgb(44, 53, 74);
+  --salt-color-slate-900: rgb(26, 33, 51);
+  --salt-color-rose-100: rgb(255, 227, 249);
+  --salt-color-rose-200: rgb(250, 190, 237);
+  --salt-color-rose-300: rgb(229, 154, 212);
+  --salt-color-rose-400: rgb(209, 117, 189);
+  --salt-color-rose-500: rgb(176, 86, 158);
+  --salt-color-rose-600: rgb(146, 67, 130);
+  --salt-color-rose-700: rgb(118, 50, 104);
+  --salt-color-rose-800: rgb(90, 32, 78);
+  --salt-color-rose-900: rgb(64, 16, 54);
+  --salt-color-olive-100: rgb(234, 240, 223);
+  --salt-color-olive-200: rgb(210, 222, 184);
+  --salt-color-olive-300: rgb(180, 194, 149);
+  --salt-color-olive-400: rgb(149, 166, 113);
+  --salt-color-olive-500: rgb(109, 124, 77);
+  --salt-color-olive-600: rgb(88, 103, 58);
+  --salt-color-olive-700: rgb(68, 83, 39);
+  --salt-color-olive-800: rgb(49, 64, 21);
+  --salt-color-olive-900: rgb(31, 46, 0);
+  --salt-color-salmon-100: rgb(255, 232, 233);
+  --salt-color-salmon-200: rgb(255, 194, 194);
+  --salt-color-salmon-300: rgb(240, 155, 153);
+  --salt-color-salmon-400: rgb(222, 120, 120);
+  --salt-color-salmon-500: rgb(189, 85, 88);
+  --salt-color-salmon-600: rgb(154, 64, 67);
+  --salt-color-salmon-700: rgb(121, 44, 48);
+  --salt-color-salmon-800: rgb(89, 25, 29);
+  --salt-color-salmon-900: rgb(59, 6, 8);
+  --salt-color-indigo-100: rgb(231, 227, 255);
+  --salt-color-indigo-200: rgb(208, 194, 252);
+  --salt-color-indigo-300: rgb(180, 162, 242);
+  --salt-color-indigo-400: rgb(149, 129, 229);
+  --salt-color-indigo-500: rgb(120, 104, 206);
+  --salt-color-indigo-600: rgb(98, 85, 170);
+  --salt-color-indigo-700: rgb(77, 66, 135);
+  --salt-color-indigo-800: rgb(57, 49, 102);
+  --salt-color-indigo-900: rgb(38, 32, 71);
+  --salt-color-jade-100: rgb(225, 245, 230);
+  --salt-color-jade-200: rgb(179, 229, 187);
+  --salt-color-jade-300: rgb(137, 201, 146);
+  --salt-color-jade-400: rgb(92, 173, 106);
+  --salt-color-jade-500: rgb(45, 133, 67);
+  --salt-color-jade-600: rgb(33, 111, 53);
+  --salt-color-jade-700: rgb(21, 90, 39);
+  --salt-color-jade-800: rgb(8, 70, 26);
+  --salt-color-jade-900: rgb(0, 51, 13);
+  --salt-color-citrine-100: rgb(255, 249, 217);
+  --salt-color-citrine-200: rgb(240, 225, 165);
+  --salt-color-citrine-300: rgb(209, 189, 115);
+  --salt-color-citrine-400: rgb(178, 156, 66);
+  --salt-color-citrine-500: rgb(135, 116, 16);
+  --salt-color-citrine-600: rgb(114, 98, 12);
+  --salt-color-citrine-700: rgb(94, 80, 9);
+  --salt-color-citrine-800: rgb(74, 63, 6);
+  --salt-color-citrine-900: rgb(51, 43, 0);
+  --salt-color-autumn-100: rgb(255, 233, 217);
+  --salt-color-autumn-200: rgb(255, 197, 161);
+  --salt-color-autumn-300: rgb(242, 163, 114);
+  --salt-color-autumn-400: rgb(222, 126, 64);
+  --salt-color-autumn-500: rgb(189, 91, 21);
+  --salt-color-autumn-600: rgb(153, 73, 18);
+  --salt-color-autumn-700: rgb(119, 55, 14);
+  --salt-color-autumn-800: rgb(86, 39, 10);
+  --salt-color-autumn-900: rgb(56, 23, 0);
+  --salt-color-lavender-100: rgb(250, 235, 250);
+  --salt-color-lavender-200: rgb(237, 199, 237);
+  --salt-color-lavender-300: rgb(212, 167, 212);
+  --salt-color-lavender-400: rgb(186, 134, 186);
+  --salt-color-lavender-500: rgb(148, 102, 148);
+  --salt-color-lavender-600: rgb(126, 80, 126);
+  --salt-color-lavender-700: rgb(105, 58, 105);
+  --salt-color-lavender-800: rgb(84, 37, 84);
+  --salt-color-lavender-900: rgb(64, 15, 64);
+  --salt-color-ocean-100: rgb(227, 251, 255);
+  --salt-color-ocean-200: rgb(180, 229, 240);
+  --salt-color-ocean-300: rgb(131, 197, 212);
+  --salt-color-ocean-400: rgb(80, 167, 186);
+  --salt-color-ocean-500: rgb(0, 128, 148);
+  --salt-color-ocean-600: rgb(0, 106, 122);
+  --salt-color-ocean-700: rgb(0, 84, 97);
+  --salt-color-ocean-800: rgb(0, 64, 74);
+  --salt-color-ocean-900: rgb(0, 44, 51);
+  --salt-color-smoke-100: rgb(242, 245, 250);
+  --salt-color-smoke-200: rgb(208, 211, 216);
+  --salt-color-smoke-300: rgb(176, 179, 184);
+  --salt-color-smoke-400: rgb(144, 147, 152);
+  --salt-color-smoke-500: rgb(114, 117, 122);
+  --salt-color-smoke-600: rgb(93, 96, 101);
+  --salt-color-smoke-700: rgb(73, 76, 81);
+  --salt-color-smoke-800: rgb(53, 56, 61);
+  --salt-color-smoke-900: rgb(35, 38, 43);
+  --salt-color-fuchsia-100: rgb(255, 232, 247);
+  --salt-color-fuchsia-200: rgb(255, 191, 229);
+  --salt-color-fuchsia-300: rgb(240, 151, 203);
+  --salt-color-fuchsia-400: rgb(222, 109, 178);
+  --salt-color-fuchsia-500: rgb(194, 71, 149);
+  --salt-color-fuchsia-600: rgb(167, 54, 125);
+  --salt-color-fuchsia-700: rgb(140, 37, 101);
+  --salt-color-fuchsia-800: rgb(114, 19, 79);
+  --salt-color-fuchsia-900: rgb(89, 0, 57);
+  --salt-color-lime-100: rgb(239, 245, 220);
+  --salt-color-lime-200: rgb(215, 227, 168);
+  --salt-color-lime-300: rgb(182, 196, 120);
+  --salt-color-lime-400: rgb(146, 166, 71);
+  --salt-color-lime-500: rgb(102, 125, 21);
+  --salt-color-lime-600: rgb(85, 106, 16);
+  --salt-color-lime-700: rgb(69, 87, 11);
+  --salt-color-lime-800: rgb(53, 68, 6);
+  --salt-color-lime-900: rgb(36, 46, 0);
+  --salt-color-fur-100: rgb(255, 244, 235);
+  --salt-color-fur-200: rgb(245, 214, 191);
+  --salt-color-fur-300: rgb(219, 178, 147);
+  --salt-color-fur-400: rgb(194, 144, 107);
+  --salt-color-fur-500: rgb(153, 106, 69);
+  --salt-color-fur-600: rgb(130, 85, 52);
+  --salt-color-fur-700: rgb(107, 65, 36);
+  --salt-color-fur-800: rgb(85, 46, 20);
+  --salt-color-fur-900: rgb(64, 28, 0);
+  --salt-color-violet-100: rgb(237, 239, 255);
+  --salt-color-violet-200: rgb(202, 203, 252);
+  --salt-color-violet-300: rgb(167, 169, 235);
+  --salt-color-violet-400: rgb(134, 139, 219);
+  --salt-color-violet-500: rgb(99, 110, 191);
+  --salt-color-violet-600: rgb(81, 90, 159);
+  --salt-color-violet-700: rgb(63, 71, 128);
+  --salt-color-violet-800: rgb(47, 53, 99);
+  --salt-color-violet-900: rgb(31, 36, 71);
+  --salt-color-forest-100: rgb(237, 250, 245);
+  --salt-color-forest-200: rgb(188, 232, 211);
+  --salt-color-forest-300: rgb(141, 204, 174);
+  --salt-color-forest-400: rgb(91, 176, 136);
+  --salt-color-forest-500: rgb(35, 133, 94);
+  --salt-color-forest-600: rgb(25, 111, 77);
+  --salt-color-forest-700: rgb(15, 90, 61);
+  --salt-color-forest-800: rgb(6, 70, 46);
+  --salt-color-forest-900: rgb(0, 51, 31);
+}

package/css/foundations/curve-next.css

@@ -0,0 +1,31 @@
+.salt-density-high {
+  --salt-curve-0: 0;
+  --salt-curve-50: 1px;
+  --salt-curve-100: 2px;
+  --salt-curve-150: 3px;
+  --salt-curve-999: 999px;
+}
+
+.salt-density-medium {
+  --salt-curve-0: 0;
+  --salt-curve-50: 2px;
+  --salt-curve-100: 4px;
+  --salt-curve-150: 6px;
+  --salt-curve-999: 999px;
+}
+
+.salt-density-low {
+  --salt-curve-0: 0;
+  --salt-curve-50: 3px;
+  --salt-curve-100: 6px;
+  --salt-curve-150: 9px;
+  --salt-curve-999: 999px;
+}
+
+.salt-density-touch {
+  --salt-curve-0: 0;
+  --salt-curve-50: 4px;
+  --salt-curve-100: 8px;
+  --salt-curve-150: 12px;
+  --salt-curve-999: 999px;
+}

package/css/foundations/duration.css

@@ -0,0 +1,6 @@
+.salt-theme {
+  --salt-duration-instant: 0ms;
+  --salt-duration-perceptible: 300ms;
+  --salt-duration-notable: 1000ms;
+  --salt-duration-cutoff: 10000ms;
+}

package/css/foundations/fade.css

@@ -0,0 +1,72 @@
+.salt-theme {
+  --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
+  --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
+  --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
+  --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
+  --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
+  --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
+  --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
+  --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
+  --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
+  --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
+  --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
+
+  --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
+  --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
+  --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
+  --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
+  --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));
+  --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));
+  --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));
+  --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
+
+  --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
+  --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
+
+  --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-disabled));
+  --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
+  --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
+  --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-30-fade-background: rgba(224, 228, 233, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-50-fade-background: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
+  --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
+  --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
+
+  --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
+  --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
+  --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
+  --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
+
+  --salt-color-white-fade-backdrop: rgba(255, 255, 255, var(--salt-palette-opacity-backdrop));
+  --salt-color-black-fade-backdrop: rgba(0, 0, 0, var(--salt-palette-opacity-backdrop));
+
+  --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
+  --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
+
+  --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
+  --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
+  --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
+  --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border));
+  --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
+  --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
+
+  --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
+  --salt-color-black-fade-background-selection: rgba(0, 0, 0, var(--salt-opacity-15));
+  --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
+  --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
+}

package/css/foundations/opacity.css

@@ -0,0 +1,9 @@
+.salt-theme {
+  --salt-opacity-0: 0;
+  --salt-opacity-8: 0.08;
+  --salt-opacity-15: 0.15;
+  --salt-opacity-25: 0.25;
+  --salt-opacity-40: 0.4;
+  --salt-opacity-45: 0.45;
+  --salt-opacity-70: 0.7;
+}

package/css/foundations/shadow.css

@@ -0,0 +1,23 @@
+.salt-theme[data-mode="light"] {
+  --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
+  --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
+  --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
+  --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
+  --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
+}
+
+.salt-theme[data-mode="dark"] {
+  --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
+  --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
+  --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
+  --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
+  --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
+}
+
+.salt-theme {
+  --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
+  --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
+  --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
+  --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
+  --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
+}

package/css/foundations/size.css

@@ -0,0 +1,51 @@
+.salt-density-high {
+  --salt-size-adornment: 6px;
+  --salt-size-bar: 2px;
+  --salt-size-base: 20px;
+  --salt-size-border: 1px;
+  --salt-size-icon: 10px;
+  --salt-size-indicator: 2px;
+  --salt-size-selectable: 12px;
+  --salt-size-bar-strong: 4px;
+  --salt-size-bar-small: 2px;
+  --salt-size-border-strong: 2px;
+}
+
+.salt-density-medium {
+  --salt-size-adornment: 8px;
+  --salt-size-bar: 4px;
+  --salt-size-base: 28px;
+  --salt-size-border: 1px;
+  --salt-size-icon: 12px;
+  --salt-size-indicator: 3px;
+  --salt-size-selectable: 14px;
+  --salt-size-bar-strong: 8px;
+  --salt-size-bar-small: 2px;
+  --salt-size-border-strong: 2px;
+}
+
+.salt-density-low {
+  --salt-size-adornment: 10px;
+  --salt-size-bar: 6px;
+  --salt-size-base: 36px;
+  --salt-size-border: 1px;
+  --salt-size-icon: 14px;
+  --salt-size-indicator: 4px;
+  --salt-size-selectable: 16px;
+  --salt-size-bar-strong: 12px;
+  --salt-size-bar-small: 2px;
+  --salt-size-border-strong: 2px;
+}
+
+.salt-density-touch {
+  --salt-size-adornment: 12px;
+  --salt-size-bar: 8px;
+  --salt-size-base: 44px;
+  --salt-size-border: 1px;
+  --salt-size-icon: 16px;
+  --salt-size-indicator: 5px;
+  --salt-size-selectable: 18px;
+  --salt-size-bar-strong: 16px;
+  --salt-size-bar-small: 2px;
+  --salt-size-border-strong: 2px;
+}

package/css/foundations/spacing.css

@@ -0,0 +1,31 @@
+.salt-density-touch {
+  --salt-spacing-100: 16px;
+}
+
+.salt-density-low {
+  --salt-spacing-100: 12px;
+}
+
+.salt-density-medium {
+  --salt-spacing-100: 8px;
+}
+
+.salt-density-high {
+  --salt-spacing-100: 4px;
+}
+
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
+  --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
+  --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
+
+  --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
+  --salt-spacing-200: calc(2 * var(--salt-spacing-100));
+  --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
+  --salt-spacing-300: calc(3 * var(--salt-spacing-100));
+  --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
+  --salt-spacing-400: calc(4 * var(--salt-spacing-100));
+}

package/css/foundations/typography.css

@@ -0,0 +1,12 @@
+.salt-theme {
+  --salt-typography-fontFamily-openSans: "Open Sans";
+  --salt-typography-fontFamily-amplitude: "Amplitude";
+  --salt-typography-fontFamily-ptMono: "PT Mono";
+
+  --salt-typography-fontWeight-light: 300;
+  --salt-typography-fontWeight-regular: 400;
+  --salt-typography-fontWeight-medium: 500;
+  --salt-typography-fontWeight-semiBold: 600;
+  --salt-typography-fontWeight-bold: 700;
+  --salt-typography-fontWeight-extraBold: 800;
+}

package/css/foundations/zindex.css

@@ -0,0 +1,14 @@
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-zIndex-default: 1;
+  --salt-zIndex-popout: 1000;
+  --salt-zIndex-appHeader: 1100;
+  --salt-zIndex-drawer: 1200;
+  --salt-zIndex-modal: 1300;
+  --salt-zIndex-notification: 1400;
+  --salt-zIndex-dragObject: 1420;
+  --salt-zIndex-contextMenu: 1450;
+  --salt-zIndex-flyover: 1500;
+}

package/css/global.css

@@ -1,4 +1,7 @@
-/* css/global.css */
+/**
+ * Have some global styles to simulate more realistic app. Currently only for Storybook.
+ */
+
 .salt-theme {
   color: var(--salt-content-primary-foreground);
   font-family: var(--salt-text-fontFamily);
@@ -6,15 +9,19 @@
   letter-spacing: var(--salt-text-letterSpacing);
   line-height: var(--salt-text-lineHeight);
 }
+
 .salt-theme ::selection {
   background: var(--salt-content-foreground-highlight);
 }
-.salt-theme[data-mode=light] {
+
+.salt-theme[data-mode="light"] {
   color-scheme: light;
 }
-.salt-theme[data-mode=dark] {
+
+.salt-theme[data-mode="dark"] {
   color-scheme: dark;
 }
+
 .salt-visuallyHidden {
   position: absolute;
   height: 1px;

package/css/palette/accent-next.css

@@ -0,0 +1,63 @@
+.salt-theme.salt-theme-next[data-mode="light"][data-accent="blue"] {
+  --salt-palette-accent: var(--salt-color-blue-500);
+  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
+  --salt-palette-accent-strong: var(--salt-color-blue-600);
+  --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a);
+  --salt-palette-accent-stronger: var(--salt-color-blue-700);
+  --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a);
+  --salt-palette-accent-strongest: var(--salt-color-blue-800);
+  --salt-palette-accent-weak: var(--salt-color-blue-400);
+  --salt-palette-accent-weaker: var(--salt-color-blue-200);
+  --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a);
+  --salt-palette-accent-weakest: var(--salt-color-blue-100);
+  --salt-palette-accent-action-hover: var(--salt-color-blue-600);
+  --salt-palette-accent-action-active: var(--salt-color-blue-800);
+}
+
+.salt-theme.salt-theme-next[data-mode="dark"][data-accent="blue"] {
+  --salt-palette-accent: var(--salt-color-blue-500);
+  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
+  --salt-palette-accent-strong: var(--salt-color-blue-400);
+  --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a);
+  --salt-palette-accent-stronger: var(--salt-color-blue-300);
+  --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a);
+  --salt-palette-accent-strongest: var(--salt-color-blue-200);
+  --salt-palette-accent-weak: var(--salt-color-blue-600);
+  --salt-palette-accent-weaker: var(--salt-color-blue-800);
+  --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a);
+  --salt-palette-accent-weakest: var(--salt-color-blue-900);
+  --salt-palette-accent-action-hover: var(--salt-color-blue-600);
+  --salt-palette-accent-action-active: var(--salt-color-blue-800);
+}
+
+.salt-theme.salt-theme-next[data-mode="light"][data-accent="teal"] {
+  --salt-palette-accent: var(--salt-color-teal-500);
+  --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
+  --salt-palette-accent-strong: var(--salt-color-teal-600);
+  --salt-palette-accent-strong-disabled: var(--salt-color-teal-600-40a);
+  --salt-palette-accent-stronger: var(--salt-color-teal-700);
+  --salt-palette-accent-stronger-disabled: var(--salt-color-teal-700-40a);
+  --salt-palette-accent-strongest: var(--salt-color-teal-800);
+  --salt-palette-accent-weak: var(--salt-color-teal-400);
+  --salt-palette-accent-weaker: var(--salt-color-teal-200);
+  --salt-palette-accent-weaker-disabled: var(--salt-color-teal-200-40a);
+  --salt-palette-accent-weakest: var(--salt-color-teal-100);
+  --salt-palette-accent-action-hover: var(--salt-color-teal-600);
+  --salt-palette-accent-action-active: var(--salt-color-teal-800);
+}
+
+.salt-theme.salt-theme-next[data-mode="dark"][data-accent="teal"] {
+  --salt-palette-accent: var(--salt-color-teal-500);
+  --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
+  --salt-palette-accent-strong: var(--salt-color-teal-400);
+  --salt-palette-accent-strong-disabled: var(--salt-color-teal-400-40a);
+  --salt-palette-accent-stronger: var(--salt-color-teal-300);
+  --salt-palette-accent-stronger-disabled: var(--salt-color-teal-300-40a);
+  --salt-palette-accent-strongest: var(--salt-color-teal-200);
+  --salt-palette-accent-weak: var(--salt-color-teal-600);
+  --salt-palette-accent-weaker: var(--salt-color-teal-800);
+  --salt-palette-accent-weaker-disabled: var(--salt-color-teal-800-40a);
+  --salt-palette-accent-weakest: var(--salt-color-teal-900);
+  --salt-palette-accent-action-hover: var(--salt-color-teal-600);
+  --salt-palette-accent-action-active: var(--salt-color-teal-800);
+}

package/css/palette/accent.css

@@ -0,0 +1,11 @@
+.salt-theme[data-mode="light"] {
+  --salt-palette-accent-background: var(--salt-color-blue-500);
+  --salt-palette-accent-border: var(--salt-color-blue-500);
+  --salt-palette-accent-foreground: var(--salt-color-white);
+}
+
+.salt-theme[data-mode="dark"] {
+  --salt-palette-accent-background: var(--salt-color-blue-500);
+  --salt-palette-accent-border: var(--salt-color-blue-500);
+  --salt-palette-accent-foreground: var(--salt-color-white);
+}