@vuu-ui/vuu-theme 0.8.7 → 0.8.8-debug

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/index.css +1566 -1
  2. package/index.css.map +3 -3
  3. package/package.json +1 -1
  4. package/LICENSE +0 -201
package/index.css CHANGED
@@ -1,2 +1,1567 @@
1
- .vuu-theme{color:var(--salt-text-primary-foreground);font-family:var(--salt-typography-fontFamily);font-size:var(--salt-text-fontSize);letter-spacing:var(--salt-text-letterSpacing);line-height:var(--salt-text-lineHeight)}::selection{background:var(--salt-text-background-selected)}.vuu-theme[data-mode=light]{color-scheme:light}.vuu-theme[data-mode=dark]{color-scheme:dark}*,*:before,*:after{box-sizing:border-box}.salt-visuallyHidden{position:absolute;height:1px;width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.vuu-density-touch,.vuu-density-low,.vuu-density-medium,.vuu-density-high{--salt-animation-opacity-start: 0;--salt-animation-opacity-end: 1;--salt-animation-scale-start: 0;--salt-animation-scale-end: 1;--salt-animation-transform-start: 100%;--salt-animation-transform-end: 0;--salt-animation-duration: .3s;--salt-animation-timing-function: ease-in;--salt-animation-slide-in-top: slide-in-top var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function) both;--salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function) both;--salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function) both;--salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function) both;--salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);--salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-out both}@keyframes slide-in-top{0%{opacity:var(--salt-animation-opacity-start);transform:translateY(var(--salt-animation-transform-start))}to{opacity:var(--salt-animation-opacity-end);transform:translateY(var(--salt-animation-transform-end))}}@keyframes slide-out-top{0%{opacity:var(--salt-animation-opacity-end);transform:translateY(var(--salt-animation-transform-end))}to{opacity:var(--salt-animation-opacity-start);transform:translateY(var(--salt-animation-transform-start))}}@keyframes slide-in-left{0%{opacity:var(--salt-animation-opacity-start);transform:translate(calc(-1 * var(--salt-animation-transform-start)))}to{opacity:var(--salt-animation-opacity-end);transform:translate(var(--salt-animation-transform-end))}}@keyframes slide-out-left{0%{opacity:var(--salt-animation-opacity-end);transform:translate(var(--salt-animation-transform-end))}to{opacity:var(--salt-animation-opacity-start);transform:translate(calc(-1 * var(--salt-animation-transform-start)))}}@keyframes slide-in-right{0%{opacity:var(--salt-animation-opacity-start);transform:translate(var(--salt-animation-transform-start))}to{opacity:var(--salt-animation-opacity-end);transform:translate(var(--salt-animation-transform-end))}}@keyframes slide-out-right{0%{opacity:var(--salt-animation-opacity-end);transform:translate(var(--salt-animation-transform-end))}to{opacity:var(--salt-animation-opacity-start);transform:translate(var(--salt-animation-transform-start))}}@keyframes slide-in-bottom{0%{opacity:var(--salt-animation-opacity-start);transform:translateY(calc(-1 * var(--salt-animation-transform-start)))}to{opacity:var(--salt-animation-opacity-end);transform:translateY(var(--salt-animation-transform-end))}}@keyframes slide-out-bottom{0%{opacity:var(--salt-animation-opacity-end);transform:translateY(var(--salt-animation-transform-end))}to{opacity:var(--salt-animation-opacity-start);transform:translateY(calc(-1 * var(--salt-animation-transform-start)))}}@keyframes fade-in-back{0%{--salt-animation-scale-start: 1.4;opacity:var(--salt-animation-opacity-start);transform:scale(var(--salt-animation-scale-start))}to{opacity:var(--salt-animation-opacity-end);transform:scale(var(--salt-animation-scale-end))}}@keyframes fade-in-forward{0%{--salt-animation-scale-start: .6;opacity:var(--salt-animation-opacity-start);transform:scale(var(--salt-animation-scale-start))}to{opacity:var(--salt-animation-opacity-end);transform:scale(var(--salt-animation-scale-end))}}@keyframes fade-in-center{0%{opacity:var(--salt-animation-opacity-start)}to{opacity:var(--salt-animation-opacity-end)}}@keyframes fade-out-back{0%{opacity:var(--salt-animation-opacity-end)}to{opacity:var(--salt-animation-opacity-start)}}.vuu-theme{--vuu-color-transparent: transparent;--vuu-color-black: black;--vuu-color-white: white;--vuu-color-purple-10: rgb(109,24,189);--vuu-color-pink-10: rgb(234, 120, 128);--vuu-color-gray-05: rgb(237, 237, 237);--vuu-color-gray-10: rgb(228, 227, 231);--vuu-color-gray-20: rgb(245, 242, 248);--vuu-color-gray-40: rgb(169, 170, 173);--vuu-color-gray-50: rgb(96, 100, 119);--vuu-color-gray-80: rgb(21, 23, 27);--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-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)}.vuu-theme{--salt-duration-instant: 0ms;--salt-duration-perceptible: .3s;--salt-duration-notable: 1s;--salt-duration-cutoff: 10s}.vuu-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-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-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-black-fade-backdrop: rgba(36, 37, 38, 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))}.vuu-density-touch{--salt-icon-size-base: 16px;--salt-icon-size-status-adornment: 12px}.vuu-density-low{--salt-icon-size-base: 14px;--salt-icon-size-status-adornment: 10px}.vuu-density-medium{--salt-icon-size-base: 12px;--salt-icon-size-status-adornment: 8px}.vuu-density-high{--salt-icon-size-base: 10px;--salt-icon-size-status-adornment: 6px}.vuu-theme{--salt-opacity-0: 0;--salt-opacity-8: .08;--salt-opacity-15: .15;--salt-opacity-25: .25;--salt-opacity-40: .4;--salt-opacity-70: .7}.vuu-theme[data-mode=light]{--salt-shadow-1-color: rgba(0, 0, 0, .1);--salt-shadow-2-color: rgba(0, 0, 0, .1);--salt-shadow-3-color: rgba(0, 0, 0, .15);--salt-shadow-4-color: rgba(0, 0, 0, .2);--salt-shadow-5-color: rgba(0, 0, 0, .3)}.vuu-theme[data-mode=dark]{--salt-shadow-1-color: rgba(0, 0, 0, .5);--salt-shadow-2-color: rgba(0, 0, 0, .5);--salt-shadow-3-color: rgba(0, 0, 0, .55);--salt-shadow-4-color: rgba(0, 0, 0, .55);--salt-shadow-5-color: rgba(0, 0, 0, .65)}.vuu-theme{--salt-shadow-0: none;--salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);--salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);--salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);--salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);--salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color)}.vuu-density-touch,.vuu-density-low,.vuu-density-medium,.vuu-density-high{--salt-size-basis-unit: 4px;--salt-size-adornmentGap: calc(.75 * var(--salt-size-unit));--salt-size-container-spacing: calc(3 * var(--salt-size-unit));--salt-size-separator-strokeWidth: 1px;--salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (.5 * var(--salt-size-basis-unit)));--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));--salt-size-sharktooth-height: 5px;--salt-size-sharktooth-width: 10px;--salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit))}.vuu-density-high{--salt-size-unit: calc(var(--salt-size-basis-unit) * 1);--salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);--salt-size-accent: calc(var(--salt-size-basis-unit) * .5);--salt-size-adornment: 6px;--salt-size-bar: 2px;--salt-size-base: 20px;--salt-size-border: 1px;--salt-size-selectable: 12px;--salt-size-icon: 12px}.vuu-density-medium{--salt-size-unit: calc(var(--salt-size-basis-unit) * 2);--salt-size-compact: calc(var(--salt-size-basis-unit) * 2);--salt-size-accent: calc(var(--salt-size-basis-unit) * 1);--salt-size-adornment: 8px;--salt-size-bar: 4px;--salt-size-base: 28px;--salt-size-border: 1px;--salt-size-selectable: 14px;--salt-size-icon: 12px}.vuu-density-low{--salt-size-unit: calc(var(--salt-size-basis-unit) * 3);--salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);--salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);--salt-size-adornment: 10px;--salt-size-bar: 6px;--salt-size-base: 36px;--salt-size-border: 1px;--salt-size-selectable: 16px;--salt-size-icon: 14px}.vuu-density-touch{--salt-size-unit: calc(var(--salt-size-basis-unit) * 4);--salt-size-compact: calc(var(--salt-size-basis-unit) * 3);--salt-size-accent: calc(var(--salt-size-basis-unit) * 2);--salt-size-adornment: 12px;--salt-size-bar: 8px;--salt-size-base: 44px;--salt-size-border: 1px;--salt-size-selectable: 18px;--salt-size-icon: 16px}.vuu-density-touch{--salt-spacing-100: 16px}.vuu-density-low{--salt-spacing-100: 12px}.vuu-density-medium{--salt-spacing-100: 8px}.vuu-density-high{--salt-spacing-100: 4px}.vuu-density-touch,.vuu-density-low,.vuu-density-medium,.vuu-density-high{--salt-spacing-25: calc(.25 * var(--salt-spacing-100));--salt-spacing-50: calc(.5 * var(--salt-spacing-100));--salt-spacing-75: calc(.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))}.vuu-theme{--salt-typography-fontFamily: "Nunito Sans";--salt-typography-fontFamily-code: "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}.vuu-density-touch,.vuu-density-low,.vuu-density-medium,.vuu-density-high{--salt-zIndex-default: 1;--salt-zIndex-popout: 1000;--salt-zIndex-docked: 1050;--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}.vuu-theme[data-mode=light],.vuu-theme[data-mode=dark]{--salt-palette-accent-background: var(--salt-color-blue-500);--salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);--salt-palette-accent-border: var(--salt-color-blue-500);--salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);--salt-palette-accent-foreground: var(--salt-color-white);--salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground)}.vuu-theme[data-mode=light]{--salt-palette-error-background: var(--salt-color-red-10);--salt-palette-error-background-selected: var(--salt-color-red-20);--salt-palette-error-border: var(--salt-color-red-500);--salt-palette-error-foreground: var(--salt-color-red-500)}.vuu-theme[data-mode=dark]{--salt-palette-error-background: var(--salt-color-red-900);--salt-palette-error-background-selected: var(--salt-color-red-900);--salt-palette-error-border: var(--salt-color-red-500);--salt-palette-error-foreground: var(--salt-color-red-500)}.vuu-theme[data-mode=light]{--salt-palette-info-background: var(--salt-color-blue-10);--salt-palette-info-border: var(--salt-color-blue-500);--salt-palette-info-foreground: var(--salt-color-blue-500)}.vuu-theme[data-mode=dark]{--salt-palette-info-background: var(--salt-color-blue-900);--salt-palette-info-border: var(--salt-color-blue-500);--salt-palette-info-foreground: var(--salt-color-blue-500)}.vuu-theme[data-mode=light]{--salt-palette-interact-background: transparent;--salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);--salt-palette-interact-background-hover: var(--vuu-color-gray-10);--salt-palette-interact-background-active: var(--salt-color-blue-30);--salt-palette-interact-background-disabled: transparent;--salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);--salt-palette-interact-border: var(--salt-color-gray-200);--salt-palette-interact-border-active: var(--salt-color-blue-600);--salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill);--salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);--salt-palette-interact-border-hover: var(--salt-color-blue-500);--salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);--salt-palette-interact-foreground: var(--salt-color-gray-200);--salt-palette-interact-foreground-active: var(--salt-color-blue-600);--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);--salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);--salt-palette-interact-outline: var(--salt-color-blue-600);--salt-palette-interact-cta-background: var(--salt-color-blue-600);--salt-palette-interact-cta-background-active: var(--salt-color-blue-700);--salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);--salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);--salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);--salt-palette-interact-cta-foreground: var(--salt-color-white);--salt-palette-interact-cta-foreground-active: var(--salt-color-white);--salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);--salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);--salt-palette-interact-cta-foreground-hover: var(--salt-color-white);--salt-palette-interact-primary-background: var(--vuu-color-white);--salt-palette-interact-primary-background-active: var(--salt-color-gray-200);--salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background);--salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);--salt-palette-interact-primary-background-hover: var(--vuu-color-pink-10);--salt-palette-interact-primary-foreground: var(--vuu-color-gray-50);--salt-palette-interact-primary-foreground-active: var(--salt-color-white);--salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);--salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);--salt-palette-interact-primary-foreground-hover: var(--vuu-color-gray-80);--salt-palette-interact-secondary-background: transparent;--salt-palette-interact-secondary-background-active: var(--salt-color-gray-200);--salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);--salt-palette-interact-secondary-background-disabled: transparent;--salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40);--salt-palette-interact-secondary-foreground: var(--salt-color-gray-900);--salt-palette-interact-secondary-foreground-active: var(--salt-color-white);--salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);--salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);--salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900)}.vuu-theme[data-mode=dark]{--salt-palette-interact-background: transparent;--salt-palette-interact-background-active: var(--salt-color-blue-700);--salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);--salt-palette-interact-background-hover: var(--salt-color-blue-800);--salt-palette-interact-background-disabled: transparent;--salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);--salt-palette-interact-border: var(--salt-color-gray-90);--salt-palette-interact-border-active: var(--salt-color-blue-100);--salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill);--salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);--salt-palette-interact-border-hover: var(--salt-color-blue-500);--salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);--salt-palette-interact-foreground: var(--salt-color-gray-90);--salt-palette-interact-foreground-active: var(--salt-color-blue-100);--salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);--salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);--salt-palette-interact-foreground-hover: var(--salt-color-blue-500);--salt-palette-interact-outline: var(--vuu-color-pink-10);--salt-palette-interact-cta-background: var(--salt-color-blue-600);--salt-palette-interact-cta-background-active: var(--salt-color-blue-700);--salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);--salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);--salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);--salt-palette-interact-cta-foreground: var(--salt-color-white);--salt-palette-interact-cta-foreground-active: var(--salt-color-white);--salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);--salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);--salt-palette-interact-cta-foreground-hover: var(--salt-color-white);--salt-palette-interact-primary-background: var(--salt-color-gray-300);--salt-palette-interact-primary-background-active: var(--salt-color-gray-70);--salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background);--salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);--salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);--salt-palette-interact-primary-foreground: var(--salt-color-white);--salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);--salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);--salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground);--salt-palette-interact-primary-foreground-hover: var(--salt-color-white);--salt-palette-interact-secondary-background: transparent;--salt-palette-interact-secondary-background-active: var(--salt-color-gray-70);--salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);--salt-palette-interact-secondary-background-disabled: transparent;--salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200);--salt-palette-interact-secondary-foreground: var(--salt-color-white);--salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900);--salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);--salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);--salt-palette-interact-secondary-foreground-hover: var(--salt-color-white)}.vuu-theme[data-mode=light]{--salt-palette-navigate-primary-background: transparent;--salt-palette-navigate-primary-background-active: transparent;--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);--salt-palette-navigate-secondary-background: transparent;--salt-palette-navigate-secondary-background-active: transparent;--salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);--salt-palette-navigate-tertiary-background: transparent;--salt-palette-navigate-tertiary-background-active: transparent;--salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);--salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);--salt-palette-navigate-foreground-active: var(--salt-color-blue-700);--salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);--salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);--salt-palette-navigate-indicator-active: var(--vuu-color-purple-10);--salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border)}.vuu-theme[data-mode=dark]{--salt-palette-navigate-primary-background: transparent;--salt-palette-navigate-primary-background-active: transparent;--salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);--salt-palette-navigate-secondary-background: transparent;--salt-palette-navigate-secondary-background-active: transparent;--salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-600);--salt-palette-navigate-tertiary-background: transparent;--salt-palette-navigate-tertiary-background-active: transparent;--salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);--salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);--salt-palette-navigate-foreground-active: var(--salt-color-blue-300);--salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);--salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);--salt-palette-navigate-indicator-active: var(--vuu-color-pink-10);--salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border)}.vuu-theme[data-mode=light]{--salt-palette-negative-foreground: var(--salt-color-red-700)}.vuu-theme[data-mode=dark]{--salt-palette-negative-foreground: var(--salt-color-red-300)}.vuu-theme[data-mode=light]{--salt-palette-neutral-primary-background: var(--salt-color-white);--salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);--salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);--salt-palette-neutral-primary-foreground: var(--vuu-color-gray-80);--salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);--salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);--salt-palette-neutral-primary-border: var(--vuu-color-purple-10);--salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);--salt-palette-neutral-secondary-background: var(--vuu-color-gray-20);--salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);--salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);--salt-palette-neutral-secondary-border: var(--salt-color-gray-90);--salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);--salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);--salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);--salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);--salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);--salt-palette-neutral-tertiary-background: transparent;--salt-palette-neutral-tertiary-background-disabled: transparent;--salt-palette-neutral-tertiary-border: transparent;--salt-palette-neutral-tertiary-border-disabled: transparent;--salt-palette-neutral-tertiary-separator: var(--vuu-color-gray-05)}.vuu-theme[data-mode=dark]{--salt-palette-neutral-primary-background: var(--salt-color-gray-800);--salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);--salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);--salt-palette-neutral-primary-border: var(--salt-color-gray-300);--salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-300-fade-border);--salt-palette-neutral-primary-foreground: var(--salt-color-white);--salt-palette-neutral-primary-foreground-disabled: var(--salt-color-white-fade-foreground);--salt-palette-neutral-primary-separator: var(--salt-color-white-fade-separatorOpacity-primary);--salt-palette-neutral-secondary-background: var(--salt-color-gray-600);--salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background);--salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly);--salt-palette-neutral-secondary-border: var(--salt-color-gray-90);--salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);--salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);--salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);--salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);--salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);--salt-palette-neutral-tertiary-background: transparent;--salt-palette-neutral-tertiary-background-disabled: transparent;--salt-palette-neutral-tertiary-border: transparent;--salt-palette-neutral-tertiary-border-disabled: transparent;--salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary)}.vuu-theme{--salt-palette-opacity-backdrop: var(--salt-opacity-70);--salt-palette-opacity-disabled: var(--salt-opacity-40);--salt-palette-opacity-background-readonly: var(--salt-opacity-0);--salt-palette-opacity-border-readonly: var(--salt-opacity-15);--salt-palette-opacity-primary-border: var(--salt-opacity-40);--salt-palette-opacity-secondary-border: var(--salt-opacity-25);--salt-palette-opacity-tertiary-border: var(--salt-opacity-15)}.vuu-theme[data-mode=light]{--salt-palette-positive-foreground: var(--salt-color-green-700)}.vuu-theme[data-mode=dark]{--salt-palette-positive-foreground: var(--salt-color-green-300)}.vuu-theme[data-mode=light]{--salt-palette-success-background: var(--salt-color-green-10);--salt-palette-success-background-selected: var(--salt-color-green-20);--salt-palette-success-border: var(--salt-color-green-500);--salt-palette-success-foreground: var(--salt-color-green-500)}.vuu-theme[data-mode=dark]{--salt-palette-success-background: var(--salt-color-green-900);--salt-palette-success-background-selected: var(--salt-color-green-900);--salt-palette-success-border: var(--salt-color-green-400);--salt-palette-success-foreground: var(--salt-color-green-400)}.vuu-theme[data-mode=light]{--salt-palette-track-background: var(--salt-color-gray-60);--salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);--salt-palette-track-border: var(--salt-color-gray-90);--salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border)}.vuu-theme[data-mode=dark]{--salt-palette-track-background: var(--salt-color-gray-300);--salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);--salt-palette-track-border: var(--salt-color-gray-90);--salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border)}.vuu-theme[data-mode=light]{--salt-palette-warning-background: var(--salt-color-orange-10);--salt-palette-warning-background-selected: var(--salt-color-orange-20);--salt-palette-warning-border: var(--salt-color-orange-700);--salt-palette-warning-foreground: var(--salt-color-orange-700)}.vuu-theme[data-mode=dark]{--salt-palette-warning-background: var(--salt-color-orange-900);--salt-palette-warning-background-selected: var(--salt-color-orange-900);--salt-palette-warning-border: var(--salt-color-orange-500);--salt-palette-warning-foreground: var(--salt-color-orange-500)}.vuu-density-high{--salt-accent-fontSize: 8px;--salt-accent-lineHeight: 11px}.vuu-density-medium{--salt-accent-fontSize: 10px;--salt-accent-lineHeight: 13px}.vuu-density-low{--salt-accent-fontSize: 12px;--salt-accent-lineHeight: 16px}.vuu-density-touch{--salt-accent-fontSize: 14px;--salt-accent-lineHeight: 18px}.vuu-theme{--salt-accent-background: var(--salt-palette-accent-background);--salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);--salt-accent-borderColor: var(--salt-palette-accent-border);--salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);--salt-accent-foreground: var(--salt-palette-accent-foreground);--salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);--salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold)}.vuu-theme{--salt-actionable-cursor-hover: pointer;--salt-actionable-cursor-active: pointer;--salt-actionable-cursor-disabled: not-allowed;--salt-actionable-letterSpacing: .6px;--salt-actionable-textAlign: center;--salt-actionable-textTransform: uppercase;--salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);--salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);--salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);--salt-actionable-primary-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);--salt-actionable-primary-background: var(--salt-palette-interact-primary-background);--salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);--salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);--salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);--salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);--salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);--salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);--salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);--salt-actionable-cta-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);--salt-actionable-cta-background: var(--salt-palette-interact-cta-background);--salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);--salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);--salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);--salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);--salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);--salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);--salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);--salt-actionable-secondary-foreground-disabled: var(--salt-palette-interact-secondary-foreground-disabled);--salt-actionable-secondary-background: var(--salt-palette-interact-secondary-background);--salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);--salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);--salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);--salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold)}.vuu-theme{--salt-container-borderStyle: solid;--salt-container-primary-background: var(--salt-palette-neutral-primary-background);--salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);--salt-container-primary-borderColor: var(--salt-palette-neutral-primary-border);--salt-container-primary-borderColor-disabled: var(--salt-palette-neutral-primary-border-disabled);--salt-container-secondary-background: var(--salt-palette-neutral-secondary-background);--salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);--salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);--salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);--salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background);--salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);--salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border);--salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled)}.vuu-theme{--salt-draggable-horizontal-cursor-hover: row-resize;--salt-draggable-horizontal-cursor-active: row-resize;--salt-draggable-vertical-cursor-hover: col-resize;--salt-draggable-vertical-cursor-active: col-resize;--salt-draggable-grab-cursor-hover: grab;--salt-draggable-grab-cursor-active: grabbing}.vuu-theme{--salt-target-background-hover: var(--salt-palette-interact-background-hover);--salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);--salt-target-borderStyle: dashed;--salt-target-borderStyle-hover: solid;--salt-target-borderStyle-disabled: dashed;--salt-target-cursor-disabled: not-allowed}.vuu-theme{--salt-editable-cursor-hover: text;--salt-editable-cursor-active: text;--salt-editable-cursor-disabled: not-allowed;--salt-editable-cursor-readonly: text;--salt-editable-borderStyle: solid;--salt-editable-borderStyle-hover: solid;--salt-editable-borderStyle-active: solid;--salt-editable-borderStyle-disabled: solid;--salt-editable-borderStyle-readonly: solid;--salt-editable-borderWidth-active: 2px;--salt-editable-borderColor: var(--salt-palette-interact-border);--salt-editable-borderColor-active: var(--salt-palette-interact-border-active);--salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);--salt-editable-borderColor-hover: var(--salt-palette-interact-border-hover);--salt-editable-borderColor-readonly: var(--salt-palette-interact-border-readonly);--salt-editable-primary-background: var(--salt-palette-neutral-primary-background);--salt-editable-primary-background-active: var(--salt-palette-neutral-primary-background);--salt-editable-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);--salt-editable-primary-background-hover: var(--salt-palette-neutral-primary-background);--salt-editable-primary-background-readonly: var(--salt-palette-neutral-primary-background-readonly);--salt-editable-secondary-background: var(--salt-palette-neutral-secondary-background);--salt-editable-secondary-background-active: var(--salt-palette-neutral-secondary-background);--salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);--salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);--salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);--salt-editable-help-fontStyle: italic}.vuu-theme{--salt-focused-outlineColor: var(--salt-palette-interact-outline);--salt-focused-outlineStyle: dotted;--salt-focused-outlineWidth: 2px;--salt-focused-outlineInset: 0;--salt-focused-outlineOffset: 0;--salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor)}.saltFocusVisible:after,.focused:focus:after,.focused:focus-visible:after{content:"";inset:var(--salt-focused-outlineInset);outline-color:var(--salt-focused-outlineColor);outline-offset:var(--salt-focused-outlineOffset);outline-style:var(--salt-focused-outlineStyle);outline-width:var(--salt-focused-outlineWidth);position:absolute}.vuu-theme{--salt-navigable-cursor-active: pointer;--salt-navigable-cursor-hover: pointer;--salt-navigable-cursor-disabled: not-allowed;--salt-navigable-cursor-edit: text;--salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);--salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);--salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);--salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);--salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);--salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);--salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);--salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);--salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);--salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);--salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);--salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);--salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);--salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);--salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);--salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active)}.vuu-theme{--salt-overlayable-shadow-scroll: var(--salt-shadow-1);--salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);--salt-overlayable-shadow: var(--salt-shadow-2);--salt-overlayable-shadow-hover: var(--salt-shadow-3);--salt-overlayable-shadow-popout: var(--salt-shadow-4);--salt-overlayable-shadow-drag: var(--salt-shadow-4);--salt-overlayable-shadow-modal: var(--salt-shadow-5);--salt-overlayable-background: var(--salt-palette-neutral-backdrop)}.vuu-theme{--salt-selectable-cursor-hover: pointer;--salt-selectable-cursor-selected: pointer;--salt-selectable-cursor-blurSelected: pointer;--salt-selectable-cursor-disabled: not-allowed;--salt-selectable-cursor-readonly: not-allowed;--salt-selectable-borderStyle: solid;--salt-selectable-borderStyle-hover: solid;--salt-selectable-borderStyle-selected: solid;--salt-selectable-borderStyle-blurSelected: solid;--salt-selectable-borderColor: var(--salt-palette-interact-border);--salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);--salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);--salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);--salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);--salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);--salt-selectable-foreground: var(--salt-palette-interact-foreground);--salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);--salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);--salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);--salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);--salt-selectable-background: var(--salt-palette-interact-background);--salt-selectable-background-hover: var(--salt-palette-interact-background-hover);--salt-selectable-background-selected: var(--salt-palette-interact-background-active);--salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);--salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);--salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);--salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);--salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);--salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);--salt-selectable-cta-background: var(--salt-palette-interact-background);--salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);--salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);--salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);--salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);--salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);--salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);--salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);--salt-selectable-primary-background: var(--salt-palette-interact-background);--salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);--salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);--salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);--salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);--salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);--salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);--salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);--salt-selectable-secondary-background: var(--salt-palette-interact-background);--salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);--salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);--salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);--salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled)}.vuu-theme{--salt-separable-borderStyle: solid;--salt-separable-primary-borderColor: var(--salt-palette-neutral-primary-separator);--salt-separable-secondary-borderColor: var(--salt-palette-neutral-secondary-separator);--salt-separable-tertiary-borderColor: var(--salt-palette-neutral-tertiary-separator)}.vuu-theme{--salt-status-info-foreground: var(--salt-palette-info-foreground);--salt-status-success-foreground: var(--salt-palette-success-foreground);--salt-status-warning-foreground: var(--salt-palette-warning-foreground);--salt-status-error-foreground: var(--salt-palette-error-foreground);--salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);--salt-status-negative-foreground: var(--salt-palette-negative-foreground);--salt-status-positive-foreground: var(--salt-palette-positive-foreground);--salt-status-info-borderColor: var(--salt-palette-info-border);--salt-status-success-borderColor: var(--salt-palette-success-border);--salt-status-warning-borderColor: var(--salt-palette-warning-border);--salt-status-error-borderColor: var(--salt-palette-error-border);--salt-status-info-background: var(--salt-palette-info-background);--salt-status-success-background: var(--salt-palette-success-background);--salt-status-warning-background: var(--salt-palette-warning-background);--salt-status-error-background: var(--salt-palette-error-background);--salt-status-success-background-selected: var(--salt-palette-success-background-selected);--salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);--salt-status-error-background-selected: var(--salt-palette-error-background-selected)}.vuu-theme{--salt-taggable-cursor-hover: pointer;--salt-taggable-cursor-active: pointer;--salt-taggable-cursor-disabled: not-allowed;--salt-taggable-background: var(--salt-palette-interact-primary-background);--salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);--salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);--salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);--salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);--salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);--salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);--salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled)}.vuu-theme{--salt-text-letterSpacing: 0;--salt-text-textAlign: left;--salt-text-textAlign-embedded: center;--salt-text-textDecoration: none;--salt-text-textTransform: none;--salt-text-fontFamily: var(--salt-typography-fontFamily);--salt-text-fontWeight: var(--salt-typography-fontWeight-regular);--salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);--salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);--salt-text-h1-fontFamily: var(--salt-typography-fontFamily);--salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);--salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);--salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);--salt-text-h2-fontFamily: var(--salt-typography-fontFamily);--salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-h3-fontFamily: var(--salt-typography-fontFamily);--salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-h4-fontFamily: var(--salt-typography-fontFamily);--salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-label-fontFamily: var(--salt-typography-fontFamily);--salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);--salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);--salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);--salt-text-display1-fontFamily: var(--salt-typography-fontFamily);--salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-display2-fontFamily: var(--salt-typography-fontFamily);--salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-display3-fontFamily: var(--salt-typography-fontFamily);--salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);--salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);--salt-text-background-selected: var(--salt-palette-interact-background-active);--salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);--salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);--salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);--salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);--salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);--salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);--salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);--salt-text-link-textDecoration: underline;--salt-text-link-textDecoration-hover: none;--salt-text-link-textDecoration-selected: underline;--salt-text-code-fontFamily: var(--salt-typography-fontFamily-code)}.vuu-density-touch{--salt-text-h1-fontSize: 42px;--salt-text-h1-lineHeight: 54px;--salt-text-h2-fontSize: 32px;--salt-text-h2-lineHeight: 42px;--salt-text-h3-fontSize: 24px;--salt-text-h3-lineHeight: 32px;--salt-text-h4-fontSize: 16px;--salt-text-h4-lineHeight: 20px;--salt-text-label-fontSize: 14px;--salt-text-label-lineHeight: 18px;--salt-text-fontSize: 16px;--salt-text-lineHeight: 20px;--salt-text-minHeight: 20px;--salt-text-display1-fontSize: 84px;--salt-text-display1-lineHeight: 109px;--salt-text-display2-fontSize: 58px;--salt-text-display2-lineHeight: 76px;--salt-text-display3-fontSize: 42px;--salt-text-display3-lineHeight: 54px}.vuu-density-low{--salt-text-h1-fontSize: 32px;--salt-text-h1-lineHeight: 42px;--salt-text-h2-fontSize: 24px;--salt-text-h2-lineHeight: 32px;--salt-text-h3-fontSize: 18px;--salt-text-h3-lineHeight: 24px;--salt-text-h4-fontSize: 14px;--salt-text-h4-lineHeight: 18px;--salt-text-label-fontSize: 12px;--salt-text-label-lineHeight: 16px;--salt-text-fontSize: 14px;--salt-text-lineHeight: 18px;--salt-text-minHeight: 18px;--salt-text-display1-fontSize: 68px;--salt-text-display1-lineHeight: 88px;--salt-text-display2-fontSize: 46px;--salt-text-display2-lineHeight: 60px;--salt-text-display3-fontSize: 32px;--salt-text-display3-lineHeight: 42px}.vuu-density-medium{--salt-text-h1-fontSize: 24px;--salt-text-h1-lineHeight: 32px;--salt-text-h2-fontSize: 18px;--salt-text-h2-lineHeight: 24px;--salt-text-h3-fontSize: 14px;--salt-text-h3-lineHeight: 18px;--salt-text-h4-fontSize: 12px;--salt-text-h4-lineHeight: 16px;--salt-text-label-fontSize: 11px;--salt-text-label-lineHeight: 14px;--salt-text-fontSize: 12px;--salt-text-lineHeight: 16px;--salt-text-minHeight: 16px;--salt-text-display1-fontSize: 54px;--salt-text-display1-lineHeight: 70px;--salt-text-display2-fontSize: 36px;--salt-text-display2-lineHeight: 47px;--salt-text-display3-fontSize: 24px;--salt-text-display3-lineHeight: 32px}.vuu-density-high{--salt-text-h1-fontSize: 18px;--salt-text-h1-lineHeight: 24px;--salt-text-h2-fontSize: 14px;--salt-text-h2-lineHeight: 18px;--salt-text-h3-fontSize: 12px;--salt-text-h3-lineHeight: 16px;--salt-text-h4-fontSize: 11px;--salt-text-h4-lineHeight: 14px;--salt-text-label-fontSize: 10px;--salt-text-label-lineHeight: 13px;--salt-text-fontSize: 11px;--salt-text-lineHeight: 14px;--salt-text-minHeight: 14px;--salt-text-display1-fontSize: 42px;--salt-text-display1-lineHeight: 54px;--salt-text-display2-fontSize: 28px;--salt-text-display2-lineHeight: 36px;--salt-text-display3-fontSize: 18px;--salt-text-display3-lineHeight: 24px}.vuu-theme{--salt-track-borderStyle: solid;--salt-track-borderStyle-active: solid;--salt-track-borderStyle-complete: solid;--salt-track-borderStyle-incomplete: dotted;--salt-track-borderWidth: 2px;--salt-track-borderWidth-active: 2px;--salt-track-borderWidth-complete: 2px;--salt-track-borderWidth-incomplete: 2px;--salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-track-textAlign: center;--salt-track-background: var(--salt-palette-track-background);--salt-track-background-disabled: var(--salt-palette-track-background-disabled);--salt-track-borderColor: var(--salt-palette-track-border);--salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled)}.vuu-theme{--salt-differential-positive-foreground: var(--salt-palette-positive-foreground);--salt-differential-negative-foreground: var(--salt-palette-negative-foreground);--salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);--salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);--salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);--salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);--salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);--salt-measured-borderStyle: solid;--salt-measured-borderStyle-active: solid;--salt-measured-borderStyle-complete: solid;--salt-measured-borderStyle-incomplete: dotted;--salt-measured-borderWidth: 2px;--salt-measured-borderWidth-active: 2px;--salt-measured-borderWidth-complete: 2px;--salt-measured-borderWidth-incomplete: 2px;--salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);--salt-measured-textAlign: center;--salt-measured-background: var(--salt-palette-measured-background);--salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);--salt-measured-borderColor: var(--salt-palette-measured-border);--salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);--salt-measured-fill: var(--salt-palette-measured-fill);--salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);--salt-measured-foreground: var(--salt-palette-measured-foreground);--salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);--salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);--salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);--salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);--salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);--salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);--salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);--salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);--salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);--salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);--salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);--salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);--salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);--salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);--salt-status-info-background-emphasize: var(--salt-status-info-background);--salt-status-success-background-emphasize: var(--salt-status-success-background);--salt-status-warning-background-emphasize: var(--salt-status-warning-background);--salt-status-error-background-emphasize: var(--salt-status-error-background);--salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);--salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);--salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);--salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);--salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);--salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);--salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);--salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);--salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);--salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);--salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled)}.vuu-theme{--salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));--salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));--salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));--salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));--salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));--salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill))}.vuu-theme{--salt-delay-instant: .1s;--salt-delay-perceptible: .3s;--salt-delay-notable: 1s;--salt-delay-cutoff: 10s;--salt-size-icon-base: var(--salt-icon-size-base);--salt-opacity-1: .15;--salt-opacity-2: .25;--salt-opacity-3: .4;--salt-opacity-4: .7}.vuu-density-touch,.vuu-density-low,.vuu-density-medium,.vuu-density-high{--salt-size-selection: var(--salt-size-selectable);--salt-size-brandBar: 4px;--salt-size-graphic-small: 12px;--salt-size-graphic-medium: 24px;--salt-size-graphic-large: 48px;--salt-size-divider-height: var(--salt-size-separator-height);--salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);--salt-size-detail: var(--salt-size-compact)}.vuu-theme{--salt-palette-error-background-emphasize: var(--salt-palette-error-background);--salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);--salt-palette-success-background-emphasize: var(--salt-palette-success-background);--salt-palette-info-background-emphasize: var(--salt-palette-info-background);--salt-palette-opacity-fill: var(--salt-palette-opacity-disabled);--salt-palette-opacity-stroke: var(--salt-palette-opacity-disabled);--salt-palette-opacity-background: var(--salt-palette-opacity-disabled);--salt-palette-opacity-border: var(--salt-palette-opacity-disabled);--salt-palette-opacity-foreground: var(--salt-palette-opacity-disabled)}.vuu-theme[data-mode=light]{--salt-palette-interact-foreground-partial: var(--salt-color-blue-600);--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);--salt-palette-measured-fill: var(--salt-color-blue-500);--salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);--salt-palette-measured-foreground: var(--salt-color-gray-90);--salt-palette-measured-foreground-active: var(--salt-color-blue-500);--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);--salt-palette-measured-background: var(--salt-color-gray-60);--salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);--salt-palette-measured-border: var(--salt-color-gray-90);--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);--salt-palette-neutral-tertiary-background-readonly: transparent;--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);--salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);--salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);--salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);--salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);--salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);--salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border)}.vuu-theme[data-mode=dark]{--salt-palette-interact-foreground-partial: var(--salt-color-blue-100);--salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);--salt-palette-measured-fill: var(--salt-color-blue-300);--salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);--salt-palette-measured-foreground: var(--salt-color-gray-90);--salt-palette-measured-foreground-active: var(--salt-color-blue-300);--salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);--salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);--salt-palette-measured-background: var(--salt-color-gray-300);--salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);--salt-palette-measured-border: var(--salt-color-gray-90);--salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);--salt-palette-neutral-tertiary-background-readonly: transparent;--salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);--salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);--salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);--salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);--salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);--salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);--salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);--salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);--salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);--salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border)}.saltButton-primary{--saltButton-borderColor: var(--salt-actionable-primary-foreground);--saltButton-borderWidth: 1px;--saltButton-borderRadius: 6px;--saltButton-borderStyle: solid;--vuu-icon-color: var(--saltIcon-color)}.saltButton-primary:hover{--saltButton-borderColor: var(--salt-actionable-primary-background-hover) }.vuu-theme.saltList{border-radius:4px}.vuu-theme .saltListItem{font-size:12px;padding:0 8px}
1
+ /* css/global.css */
2
+ .vuu-theme {
3
+ color: var(--salt-text-primary-foreground);
4
+ font-family: var(--salt-typography-fontFamily);
5
+ font-size: var(--salt-text-fontSize);
6
+ letter-spacing: var(--salt-text-letterSpacing);
7
+ line-height: var(--salt-text-lineHeight);
8
+ }
9
+ ::selection {
10
+ background: var(--salt-text-background-selected);
11
+ }
12
+ .vuu-theme[data-mode=light] {
13
+ color-scheme: light;
14
+ }
15
+ .vuu-theme[data-mode=dark] {
16
+ color-scheme: dark;
17
+ }
18
+ *,
19
+ *::before,
20
+ *::after {
21
+ box-sizing: border-box;
22
+ }
23
+ .salt-visuallyHidden {
24
+ position: absolute;
25
+ height: 1px;
26
+ width: 1px;
27
+ padding: 0;
28
+ margin: -1px;
29
+ overflow: hidden;
30
+ clip: rect(0, 0, 0, 0);
31
+ white-space: nowrap;
32
+ border-width: 0;
33
+ }
34
+
35
+ /* css/foundations/animation.css */
36
+ .vuu-density-touch,
37
+ .vuu-density-low,
38
+ .vuu-density-medium,
39
+ .vuu-density-high {
40
+ --salt-animation-opacity-start: 0;
41
+ --salt-animation-opacity-end: 1;
42
+ --salt-animation-scale-start: 0;
43
+ --salt-animation-scale-end: 1;
44
+ --salt-animation-transform-start: 100%;
45
+ --salt-animation-transform-end: 0;
46
+ --salt-animation-duration: 0.3s;
47
+ --salt-animation-timing-function: ease-in;
48
+ --salt-animation-slide-in-top: slide-in-top var(--salt-animation-duration) var(--salt-animation-timing-function);
49
+ --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
50
+ --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
51
+ --salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
52
+ --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function) both;
53
+ --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function) both;
54
+ --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function) both;
55
+ --salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function) both;
56
+ --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
57
+ --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
58
+ --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
59
+ --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-out both;
60
+ }
61
+ @keyframes slide-in-top {
62
+ 0% {
63
+ opacity: var(--salt-animation-opacity-start);
64
+ transform: translateY(var(--salt-animation-transform-start));
65
+ }
66
+ 100% {
67
+ opacity: var(--salt-animation-opacity-end);
68
+ transform: translateY(var(--salt-animation-transform-end));
69
+ }
70
+ }
71
+ @keyframes slide-out-top {
72
+ 0% {
73
+ opacity: var(--salt-animation-opacity-end);
74
+ transform: translateY(var(--salt-animation-transform-end));
75
+ }
76
+ 100% {
77
+ opacity: var(--salt-animation-opacity-start);
78
+ transform: translateY(var(--salt-animation-transform-start));
79
+ }
80
+ }
81
+ @keyframes slide-in-left {
82
+ 0% {
83
+ opacity: var(--salt-animation-opacity-start);
84
+ transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
85
+ }
86
+ 100% {
87
+ opacity: var(--salt-animation-opacity-end);
88
+ transform: translateX(var(--salt-animation-transform-end));
89
+ }
90
+ }
91
+ @keyframes slide-out-left {
92
+ 0% {
93
+ opacity: var(--salt-animation-opacity-end);
94
+ transform: translateX(var(--salt-animation-transform-end));
95
+ }
96
+ 100% {
97
+ opacity: var(--salt-animation-opacity-start);
98
+ transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
99
+ }
100
+ }
101
+ @keyframes slide-in-right {
102
+ 0% {
103
+ opacity: var(--salt-animation-opacity-start);
104
+ transform: translateX(var(--salt-animation-transform-start));
105
+ }
106
+ 100% {
107
+ opacity: var(--salt-animation-opacity-end);
108
+ transform: translateX(var(--salt-animation-transform-end));
109
+ }
110
+ }
111
+ @keyframes slide-out-right {
112
+ 0% {
113
+ opacity: var(--salt-animation-opacity-end);
114
+ transform: translateX(var(--salt-animation-transform-end));
115
+ }
116
+ 100% {
117
+ opacity: var(--salt-animation-opacity-start);
118
+ transform: translateX(var(--salt-animation-transform-start));
119
+ }
120
+ }
121
+ @keyframes slide-in-bottom {
122
+ 0% {
123
+ opacity: var(--salt-animation-opacity-start);
124
+ transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
125
+ }
126
+ 100% {
127
+ opacity: var(--salt-animation-opacity-end);
128
+ transform: translateY(var(--salt-animation-transform-end));
129
+ }
130
+ }
131
+ @keyframes slide-out-bottom {
132
+ 0% {
133
+ opacity: var(--salt-animation-opacity-end);
134
+ transform: translateY(var(--salt-animation-transform-end));
135
+ }
136
+ 100% {
137
+ opacity: var(--salt-animation-opacity-start);
138
+ transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
139
+ }
140
+ }
141
+ @keyframes fade-in-back {
142
+ 0% {
143
+ --salt-animation-scale-start: 1.4;
144
+ opacity: var(--salt-animation-opacity-start);
145
+ transform: scale(var(--salt-animation-scale-start));
146
+ }
147
+ 100% {
148
+ opacity: var(--salt-animation-opacity-end);
149
+ transform: scale(var(--salt-animation-scale-end));
150
+ }
151
+ }
152
+ @keyframes fade-in-forward {
153
+ 0% {
154
+ --salt-animation-scale-start: 0.6;
155
+ opacity: var(--salt-animation-opacity-start);
156
+ transform: scale(var(--salt-animation-scale-start));
157
+ }
158
+ 100% {
159
+ opacity: var(--salt-animation-opacity-end);
160
+ transform: scale(var(--salt-animation-scale-end));
161
+ }
162
+ }
163
+ @keyframes fade-in-center {
164
+ 0% {
165
+ opacity: var(--salt-animation-opacity-start);
166
+ }
167
+ 100% {
168
+ opacity: var(--salt-animation-opacity-end);
169
+ }
170
+ }
171
+ @keyframes fade-out-back {
172
+ 0% {
173
+ opacity: var(--salt-animation-opacity-end);
174
+ }
175
+ 100% {
176
+ opacity: var(--salt-animation-opacity-start);
177
+ }
178
+ }
179
+
180
+ /* css/foundations/color.css */
181
+ .vuu-theme {
182
+ --vuu-color-transparent: transparent;
183
+ --vuu-color-black: black;
184
+ --vuu-color-white: white;
185
+ --vuu-color-purple-10: rgb(109,24,189);
186
+ --vuu-color-pink-10: rgb(234, 120, 128);
187
+ --vuu-color-gray-05: rgb(237, 237, 237);
188
+ --vuu-color-gray-10: rgb(228, 227, 231);
189
+ --vuu-color-gray-20: rgb(245, 242, 248);
190
+ --vuu-color-gray-30: rgb(214, 215, 218);
191
+ --vuu-color-gray-35: rgb(155, 158, 168);
192
+ --vuu-color-gray-40: rgb(169, 170, 173);
193
+ --vuu-color-gray-45: rgb(119, 124, 148);
194
+ --vuu-color-gray-50: rgb(96, 100, 119);
195
+ --vuu-color-gray-80: rgb(21, 23, 27);
196
+ --salt-color-white: rgb(255, 255, 255);
197
+ --salt-color-black: rgb(0, 0, 0);
198
+ --salt-color-red-10: rgb(255, 227, 224);
199
+ --salt-color-red-20: rgb(255, 207, 201);
200
+ --salt-color-red-30: rgb(255, 187, 178);
201
+ --salt-color-red-40: rgb(255, 167, 156);
202
+ --salt-color-red-50: rgb(255, 148, 133);
203
+ --salt-color-red-100: rgb(255, 128, 111);
204
+ --salt-color-red-200: rgb(255, 108, 88);
205
+ --salt-color-red-300: rgb(255, 89, 66);
206
+ --salt-color-red-400: rgb(237, 65, 42);
207
+ --salt-color-red-500: rgb(227, 43, 22);
208
+ --salt-color-red-600: rgb(196, 32, 16);
209
+ --salt-color-red-700: rgb(166, 21, 11);
210
+ --salt-color-red-800: rgb(136, 10, 5);
211
+ --salt-color-red-900: rgb(65, 37, 34);
212
+ --salt-color-orange-10: rgb(255, 232, 191);
213
+ --salt-color-orange-20: rgb(254, 223, 166);
214
+ --salt-color-orange-30: rgb(254, 214, 142);
215
+ --salt-color-orange-40: rgb(254, 205, 118);
216
+ --salt-color-orange-50: rgb(254, 197, 94);
217
+ --salt-color-orange-100: rgb(250, 181, 81);
218
+ --salt-color-orange-200: rgb(246, 165, 68);
219
+ --salt-color-orange-300: rgb(242, 149, 56);
220
+ --salt-color-orange-400: rgb(238, 133, 43);
221
+ --salt-color-orange-500: rgb(234, 115, 25);
222
+ --salt-color-orange-600: rgb(224, 101, 25);
223
+ --salt-color-orange-700: rgb(214, 85, 19);
224
+ --salt-color-orange-800: rgb(204, 68, 13);
225
+ --salt-color-orange-900: rgb(54, 44, 36);
226
+ --salt-color-green-10: rgb(209, 244, 201);
227
+ --salt-color-green-20: rgb(184, 232, 182);
228
+ --salt-color-green-30: rgb(160, 221, 164);
229
+ --salt-color-green-40: rgb(136, 210, 145);
230
+ --salt-color-green-50: rgb(112, 199, 127);
231
+ --salt-color-green-100: rgb(93, 189, 116);
232
+ --salt-color-green-200: rgb(77, 180, 105);
233
+ --salt-color-green-300: rgb(60, 171, 96);
234
+ --salt-color-green-400: rgb(48, 156, 90);
235
+ --salt-color-green-500: rgb(36, 135, 75);
236
+ --salt-color-green-600: rgb(24, 114, 61);
237
+ --salt-color-green-700: rgb(12, 93, 46);
238
+ --salt-color-green-800: rgb(1, 73, 32);
239
+ --salt-color-green-900: rgb(35, 52, 43);
240
+ --salt-color-teal-10: rgb(218, 240, 240);
241
+ --salt-color-teal-20: rgb(199, 232, 232);
242
+ --salt-color-teal-30: rgb(180, 224, 225);
243
+ --salt-color-teal-40: rgb(162, 217, 218);
244
+ --salt-color-teal-50: rgb(141, 205, 209);
245
+ --salt-color-teal-100: rgb(123, 193, 200);
246
+ --salt-color-teal-200: rgb(99, 181, 192);
247
+ --salt-color-teal-300: rgb(73, 160, 172);
248
+ --salt-color-teal-400: rgb(48, 149, 166);
249
+ --salt-color-teal-500: rgb(0, 130, 151);
250
+ --salt-color-teal-600: rgb(27, 107, 133);
251
+ --salt-color-teal-700: rgb(0, 85, 113);
252
+ --salt-color-teal-800: rgb(1, 65, 86);
253
+ --salt-color-teal-900: rgb(0, 49, 76);
254
+ --salt-color-blue-10: rgb(203, 231, 249);
255
+ --salt-color-blue-20: rgb(183, 222, 246);
256
+ --salt-color-blue-30: rgb(164, 213, 244);
257
+ --salt-color-blue-40: rgb(144, 204, 242);
258
+ --salt-color-blue-50: rgb(125, 195, 240);
259
+ --salt-color-blue-100: rgb(100, 177, 228);
260
+ --salt-color-blue-200: rgb(75, 159, 216);
261
+ --salt-color-blue-300: rgb(51, 141, 205);
262
+ --salt-color-blue-400: rgb(46, 132, 198);
263
+ --salt-color-blue-500: rgb(38, 112, 169);
264
+ --salt-color-blue-600: rgb(21, 92, 147);
265
+ --salt-color-blue-700: rgb(0, 71, 123);
266
+ --salt-color-blue-800: rgb(39, 60, 77);
267
+ --salt-color-blue-900: rgb(35, 47, 56);
268
+ --salt-color-purple-10: rgb(249, 224, 247);
269
+ --salt-color-purple-20: rgb(247, 212, 244);
270
+ --salt-color-purple-30: rgb(245, 201, 241);
271
+ --salt-color-purple-40: rgb(243, 189, 238);
272
+ --salt-color-purple-50: rgb(241, 178, 235);
273
+ --salt-color-purple-100: rgb(223, 156, 225);
274
+ --salt-color-purple-200: rgb(205, 135, 215);
275
+ --salt-color-purple-300: rgb(192, 116, 203);
276
+ --salt-color-purple-400: rgb(169, 97, 181);
277
+ --salt-color-purple-500: rgb(150, 78, 162);
278
+ --salt-color-purple-600: rgb(129, 60, 141);
279
+ --salt-color-purple-700: rgb(103, 46, 122);
280
+ --salt-color-purple-800: rgb(83, 37, 109);
281
+ --salt-color-purple-900: rgb(59, 16, 84);
282
+ --salt-color-gray-10: rgb(242, 244, 246);
283
+ --salt-color-gray-20: rgb(234, 237, 239);
284
+ --salt-color-gray-30: rgb(224, 228, 233);
285
+ --salt-color-gray-40: rgb(217, 221, 227);
286
+ --salt-color-gray-50: rgb(206, 210, 217);
287
+ --salt-color-gray-60: rgb(197, 201, 208);
288
+ --salt-color-gray-70: rgb(180, 183, 190);
289
+ --salt-color-gray-80: rgb(159, 163, 170);
290
+ --salt-color-gray-90: rgb(132, 135, 142);
291
+ --salt-color-gray-100: rgb(116, 119, 127);
292
+ --salt-color-gray-200: rgb(97, 101, 110);
293
+ --salt-color-gray-300: rgb(76, 80, 91);
294
+ --salt-color-gray-400: rgb(68, 72, 79);
295
+ --salt-color-gray-500: rgb(59, 63, 70);
296
+ --salt-color-gray-600: rgb(47, 49, 54);
297
+ --salt-color-gray-700: rgb(42, 44, 47);
298
+ --salt-color-gray-800: rgb(36, 37, 38);
299
+ --salt-color-gray-900: rgb(22, 22, 22);
300
+ }
301
+
302
+ /* css/foundations/duration.css */
303
+ .vuu-theme {
304
+ --salt-duration-instant: 0ms;
305
+ --salt-duration-perceptible: 300ms;
306
+ --salt-duration-notable: 1000ms;
307
+ --salt-duration-cutoff: 10000ms;
308
+ }
309
+
310
+ /* css/foundations/fade.css */
311
+ .vuu-theme {
312
+ --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
313
+ --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
314
+ --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
315
+ --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
316
+ --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
317
+ --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
318
+ --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
319
+ --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
320
+ --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
321
+ --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
322
+ --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
323
+ --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
324
+ --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
325
+ --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
326
+ --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
327
+ --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
328
+ --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
329
+ --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
330
+ --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
331
+ --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
332
+ --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
333
+ --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
334
+ --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
335
+ --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));
336
+ --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));
337
+ --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));
338
+ --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
339
+ --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
340
+ --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
341
+ --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-disabled));
342
+ --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
343
+ --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
344
+ --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
345
+ --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
346
+ --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
347
+ --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
348
+ --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
349
+ --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
350
+ --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
351
+ --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
352
+ --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
353
+ --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
354
+ --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
355
+ --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
356
+ --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
357
+ --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
358
+ --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
359
+ --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
360
+ --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
361
+ --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
362
+ --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
363
+ --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border));
364
+ --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
365
+ --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
366
+ }
367
+
368
+ /* css/foundations/icon.css */
369
+ .vuu-density-touch {
370
+ --salt-icon-size-base: 16px;
371
+ --salt-icon-size-status-adornment: 12px;
372
+ }
373
+ .vuu-density-low {
374
+ --salt-icon-size-base: 14px;
375
+ --salt-icon-size-status-adornment: 10px;
376
+ }
377
+ .vuu-density-medium {
378
+ --salt-icon-size-base: 12px;
379
+ --salt-icon-size-status-adornment: 8px;
380
+ }
381
+ .vuu-density-high {
382
+ --salt-icon-size-base: 10px;
383
+ --salt-icon-size-status-adornment: 6px;
384
+ }
385
+
386
+ /* css/foundations/opacity.css */
387
+ .vuu-theme {
388
+ --salt-opacity-0: 0;
389
+ --salt-opacity-8: 0.08;
390
+ --salt-opacity-15: 0.15;
391
+ --salt-opacity-25: 0.25;
392
+ --salt-opacity-40: 0.4;
393
+ --salt-opacity-70: 0.7;
394
+ }
395
+
396
+ /* css/foundations/shadow.css */
397
+ .vuu-theme[data-mode=light] {
398
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
399
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
400
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
401
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
402
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
403
+ }
404
+ .vuu-theme[data-mode=dark] {
405
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
406
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
407
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
408
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
409
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
410
+ }
411
+ .vuu-theme {
412
+ --salt-shadow-0: none;
413
+ --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
414
+ --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
415
+ --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
416
+ --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
417
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
418
+ }
419
+
420
+ /* css/foundations/size.css */
421
+ .vuu-density-touch,
422
+ .vuu-density-low,
423
+ .vuu-density-medium,
424
+ .vuu-density-high {
425
+ --salt-size-basis-unit: 4px;
426
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
427
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
428
+ --salt-size-separator-strokeWidth: 1px;
429
+ --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
430
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
431
+ --salt-size-sharktooth-height: 5px;
432
+ --salt-size-sharktooth-width: 10px;
433
+ --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
434
+ }
435
+ .vuu-density-high {
436
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
437
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
438
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
439
+ --salt-size-adornment: 6px;
440
+ --salt-size-bar: 2px;
441
+ --salt-size-base: 20px;
442
+ --salt-size-border: 1px;
443
+ --salt-size-selectable: 12px;
444
+ --salt-size-icon: 12px;
445
+ }
446
+ .vuu-density-medium {
447
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
448
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
449
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
450
+ --salt-size-adornment: 8px;
451
+ --salt-size-bar: 4px;
452
+ --salt-size-base: 28px;
453
+ --salt-size-border: 1px;
454
+ --salt-size-selectable: 14px;
455
+ --salt-size-icon: 12px;
456
+ }
457
+ .vuu-density-low {
458
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
459
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
460
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
461
+ --salt-size-adornment: 10px;
462
+ --salt-size-bar: 6px;
463
+ --salt-size-base: 36px;
464
+ --salt-size-border: 1px;
465
+ --salt-size-selectable: 16px;
466
+ --salt-size-icon: 14px;
467
+ }
468
+ .vuu-density-touch {
469
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
470
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
471
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
472
+ --salt-size-adornment: 12px;
473
+ --salt-size-bar: 8px;
474
+ --salt-size-base: 44px;
475
+ --salt-size-border: 1px;
476
+ --salt-size-selectable: 18px;
477
+ --salt-size-icon: 16px;
478
+ }
479
+
480
+ /* css/foundations/spacing.css */
481
+ .vuu-density-touch {
482
+ --salt-spacing-100: 16px;
483
+ }
484
+ .vuu-density-low {
485
+ --salt-spacing-100: 12px;
486
+ }
487
+ .vuu-density-medium {
488
+ --salt-spacing-100: 8px;
489
+ }
490
+ .vuu-density-high {
491
+ --salt-spacing-100: 4px;
492
+ }
493
+ .vuu-density-touch,
494
+ .vuu-density-low,
495
+ .vuu-density-medium,
496
+ .vuu-density-high {
497
+ --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
498
+ --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
499
+ --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
500
+ --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
501
+ --salt-spacing-200: calc(2 * var(--salt-spacing-100));
502
+ --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
503
+ --salt-spacing-300: calc(3 * var(--salt-spacing-100));
504
+ --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
505
+ --salt-spacing-400: calc(4 * var(--salt-spacing-100));
506
+ }
507
+
508
+ /* css/foundations/typography.css */
509
+ .vuu-theme {
510
+ --salt-typography-fontFamily: "Nunito Sans";
511
+ --salt-typography-fontFamily-code: "PT Mono";
512
+ --salt-typography-fontWeight-light: 300;
513
+ --salt-typography-fontWeight-regular: 400;
514
+ --salt-typography-fontWeight-medium: 500;
515
+ --salt-typography-fontWeight-semiBold: 600;
516
+ --salt-typography-fontWeight-bold: 700;
517
+ --salt-typography-fontWeight-extraBold: 800;
518
+ }
519
+
520
+ /* css/foundations/zindex.css */
521
+ .vuu-density-touch,
522
+ .vuu-density-low,
523
+ .vuu-density-medium,
524
+ .vuu-density-high {
525
+ --salt-zIndex-default: 1;
526
+ --salt-zIndex-popout: 1000;
527
+ --salt-zIndex-docked: 1050;
528
+ --salt-zIndex-appHeader: 1100;
529
+ --salt-zIndex-drawer: 1200;
530
+ --salt-zIndex-modal: 1300;
531
+ --salt-zIndex-notification: 1400;
532
+ --salt-zIndex-dragObject: 1420;
533
+ --salt-zIndex-contextMenu: 1450;
534
+ --salt-zIndex-flyover: 1500;
535
+ }
536
+
537
+ /* css/palette/accent.css */
538
+ .vuu-theme[data-mode=light] {
539
+ --salt-palette-accent-background: var(--salt-color-blue-500);
540
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
541
+ --salt-palette-accent-border: var(--salt-color-blue-500);
542
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
543
+ --salt-palette-accent-foreground: var(--salt-color-white);
544
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
545
+ }
546
+ .vuu-theme[data-mode=dark] {
547
+ --salt-palette-accent-background: var(--salt-color-blue-500);
548
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
549
+ --salt-palette-accent-border: var(--salt-color-blue-500);
550
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
551
+ --salt-palette-accent-foreground: var(--salt-color-white);
552
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
553
+ }
554
+
555
+ /* css/palette/error.css */
556
+ .vuu-theme[data-mode=light] {
557
+ --salt-palette-error-background: var(--salt-color-red-10);
558
+ --salt-palette-error-background-selected: var(--salt-color-red-20);
559
+ --salt-palette-error-border: var(--salt-color-red-500);
560
+ --salt-palette-error-foreground: var(--salt-color-red-500);
561
+ }
562
+ .vuu-theme[data-mode=dark] {
563
+ --salt-palette-error-background: var(--salt-color-red-900);
564
+ --salt-palette-error-background-selected: var(--salt-color-red-900);
565
+ --salt-palette-error-border: var(--salt-color-red-500);
566
+ --salt-palette-error-foreground: var(--salt-color-red-500);
567
+ }
568
+
569
+ /* css/palette/info.css */
570
+ .vuu-theme[data-mode=light] {
571
+ --salt-palette-info-background: var(--salt-color-blue-10);
572
+ --salt-palette-info-border: var(--salt-color-blue-500);
573
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
574
+ }
575
+ .vuu-theme[data-mode=dark] {
576
+ --salt-palette-info-background: var(--salt-color-blue-900);
577
+ --salt-palette-info-border: var(--salt-color-blue-500);
578
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
579
+ }
580
+
581
+ /* css/palette/interact.css */
582
+ .vuu-theme[data-mode=light] {
583
+ --salt-palette-interact-background: transparent;
584
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
585
+ --salt-palette-interact-background-hover: var(--vuu-color-gray-10);
586
+ --salt-palette-interact-background-active: var(--vuu-color-purple-10);
587
+ --salt-palette-interact-background-disabled: var(--vuu-color-gray-35);
588
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);
589
+ --salt-palette-interact-border: var(--vuu-color-gray-45);
590
+ --salt-palette-interact-border-active: var(--vuu-color-purple-10);
591
+ --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill);
592
+ --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
593
+ --salt-palette-interact-border-hover: var(--salt-color-blue-500);
594
+ --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
595
+ --salt-palette-interact-foreground: var(--salt-color-gray-200);
596
+ --salt-palette-interact-foreground-active: var(--vuu-color-purple-10);
597
+ --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
598
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
599
+ --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
600
+ --salt-palette-interact-outline: var(--salt-color-blue-600);
601
+ --salt-palette-interact-cta-background: var(--salt-color-blue-600);
602
+ --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
603
+ --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
604
+ --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
605
+ --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
606
+ --salt-palette-interact-cta-foreground: var(--salt-color-white);
607
+ --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
608
+ --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
609
+ --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
610
+ --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
611
+ --salt-palette-interact-primary-background: var(--vuu-color-white);
612
+ --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
613
+ --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
614
+ --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
615
+ --salt-palette-interact-primary-background-hover: var(--vuu-color-pink-10);
616
+ --salt-palette-interact-primary-foreground: var(--vuu-color-gray-50);
617
+ --salt-palette-interact-primary-foreground-active: var(--salt-color-white);
618
+ --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
619
+ --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
620
+ --salt-palette-interact-primary-foreground-hover: var(--vuu-color-gray-80);
621
+ --salt-palette-interact-secondary-background: transparent;
622
+ --salt-palette-interact-secondary-background-active: var(--vuu-color-purple-10);
623
+ --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
624
+ --salt-palette-interact-secondary-background-disabled: transparent;
625
+ --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40);
626
+ --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900);
627
+ --salt-palette-interact-secondary-foreground-active: var(--salt-color-white);
628
+ --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
629
+ --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
630
+ --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
631
+ }
632
+ .vuu-theme[data-mode=dark] {
633
+ --salt-palette-interact-background: transparent;
634
+ --salt-palette-interact-background-active: var(--salt-color-blue-700);
635
+ --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
636
+ --salt-palette-interact-background-hover: var(--salt-color-blue-800);
637
+ --salt-palette-interact-background-disabled: transparent;
638
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);
639
+ --salt-palette-interact-border: var(--salt-color-gray-90);
640
+ --salt-palette-interact-border-active: var(--salt-color-blue-100);
641
+ --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill);
642
+ --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
643
+ --salt-palette-interact-border-hover: var(--salt-color-blue-500);
644
+ --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
645
+ --salt-palette-interact-foreground: var(--salt-color-gray-90);
646
+ --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
647
+ --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
648
+ --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
649
+ --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
650
+ --salt-palette-interact-outline: var(--vuu-color-pink-10);
651
+ --salt-palette-interact-cta-background: var(--salt-color-blue-600);
652
+ --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
653
+ --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
654
+ --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
655
+ --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
656
+ --salt-palette-interact-cta-foreground: var(--salt-color-white);
657
+ --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
658
+ --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
659
+ --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
660
+ --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
661
+ --salt-palette-interact-primary-background: var(--salt-color-gray-300);
662
+ --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
663
+ --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
664
+ --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
665
+ --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);
666
+ --salt-palette-interact-primary-foreground: var(--salt-color-white);
667
+ --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);
668
+ --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
669
+ --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
670
+ --salt-palette-interact-primary-foreground-hover: var(--salt-color-white);
671
+ --salt-palette-interact-secondary-background: transparent;
672
+ --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70);
673
+ --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
674
+ --salt-palette-interact-secondary-background-disabled: transparent;
675
+ --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200);
676
+ --salt-palette-interact-secondary-foreground: var(--salt-color-white);
677
+ --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900);
678
+ --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
679
+ --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
680
+ --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
681
+ }
682
+
683
+ /* css/palette/navigate.css */
684
+ .vuu-theme[data-mode=light] {
685
+ --salt-palette-navigate-primary-background: transparent;
686
+ --salt-palette-navigate-primary-background-active: transparent;
687
+ --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
688
+ --salt-palette-navigate-secondary-background: transparent;
689
+ --salt-palette-navigate-secondary-background-active: transparent;
690
+ --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
691
+ --salt-palette-navigate-tertiary-background: transparent;
692
+ --salt-palette-navigate-tertiary-background-active: transparent;
693
+ --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
694
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
695
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
696
+ --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
697
+ --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
698
+ --salt-palette-navigate-indicator-active: var(--vuu-color-purple-10);
699
+ --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
700
+ }
701
+ .vuu-theme[data-mode=dark] {
702
+ --salt-palette-navigate-primary-background: transparent;
703
+ --salt-palette-navigate-primary-background-active: transparent;
704
+ --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
705
+ --salt-palette-navigate-secondary-background: transparent;
706
+ --salt-palette-navigate-secondary-background-active: transparent;
707
+ --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-600);
708
+ --salt-palette-navigate-tertiary-background: transparent;
709
+ --salt-palette-navigate-tertiary-background-active: transparent;
710
+ --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);
711
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
712
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
713
+ --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
714
+ --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
715
+ --salt-palette-navigate-indicator-active: var(--vuu-color-pink-10);
716
+ --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
717
+ }
718
+
719
+ /* css/palette/negative.css */
720
+ .vuu-theme[data-mode=light] {
721
+ --salt-palette-negative-foreground: var(--salt-color-red-700);
722
+ }
723
+ .vuu-theme[data-mode=dark] {
724
+ --salt-palette-negative-foreground: var(--salt-color-red-300);
725
+ }
726
+
727
+ /* css/palette/neutral.css */
728
+ .vuu-theme[data-mode=light] {
729
+ --salt-palette-neutral-primary-background: var(--salt-color-white);
730
+ --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
731
+ --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
732
+ --salt-palette-neutral-primary-foreground: var(--vuu-color-gray-80);
733
+ --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
734
+ --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
735
+ --salt-palette-neutral-primary-border: var(--vuu-color-purple-10);
736
+ --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
737
+ --salt-palette-neutral-secondary-background: var(--vuu-color-gray-20);
738
+ --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
739
+ --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
740
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
741
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
742
+ --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
743
+ --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
744
+ --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
745
+ --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
746
+ --salt-palette-neutral-tertiary-background: transparent;
747
+ --salt-palette-neutral-tertiary-background-disabled: transparent;
748
+ --salt-palette-neutral-tertiary-border: transparent;
749
+ --salt-palette-neutral-tertiary-border-disabled: transparent;
750
+ --salt-palette-neutral-tertiary-separator: var(--vuu-color-gray-05);
751
+ }
752
+ .vuu-theme[data-mode=dark] {
753
+ --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
754
+ --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
755
+ --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
756
+ --salt-palette-neutral-primary-border: var(--salt-color-gray-300);
757
+ --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-300-fade-border);
758
+ --salt-palette-neutral-primary-foreground: var(--salt-color-white);
759
+ --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
760
+ --salt-palette-neutral-primary-separator: var(--salt-color-white-fade-separatorOpacity-primary);
761
+ --salt-palette-neutral-secondary-background: var(--salt-color-gray-600);
762
+ --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background);
763
+ --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly);
764
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
765
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
766
+ --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
767
+ --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
768
+ --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
769
+ --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
770
+ --salt-palette-neutral-tertiary-background: transparent;
771
+ --salt-palette-neutral-tertiary-background-disabled: transparent;
772
+ --salt-palette-neutral-tertiary-border: transparent;
773
+ --salt-palette-neutral-tertiary-border-disabled: transparent;
774
+ --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
775
+ }
776
+
777
+ /* css/palette/opacity.css */
778
+ .vuu-theme {
779
+ --salt-palette-opacity-backdrop: var(--salt-opacity-70);
780
+ --salt-palette-opacity-disabled: var(--salt-opacity-40);
781
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
782
+ --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
783
+ --salt-palette-opacity-primary-border: var(--salt-opacity-40);
784
+ --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
785
+ --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
786
+ }
787
+
788
+ /* css/palette/positive.css */
789
+ .vuu-theme[data-mode=light] {
790
+ --salt-palette-positive-foreground: var(--salt-color-green-700);
791
+ }
792
+ .vuu-theme[data-mode=dark] {
793
+ --salt-palette-positive-foreground: var(--salt-color-green-300);
794
+ }
795
+
796
+ /* css/palette/success.css */
797
+ .vuu-theme[data-mode=light] {
798
+ --salt-palette-success-background: var(--salt-color-green-10);
799
+ --salt-palette-success-background-selected: var(--salt-color-green-20);
800
+ --salt-palette-success-border: var(--salt-color-green-500);
801
+ --salt-palette-success-foreground: var(--salt-color-green-500);
802
+ }
803
+ .vuu-theme[data-mode=dark] {
804
+ --salt-palette-success-background: var(--salt-color-green-900);
805
+ --salt-palette-success-background-selected: var(--salt-color-green-900);
806
+ --salt-palette-success-border: var(--salt-color-green-400);
807
+ --salt-palette-success-foreground: var(--salt-color-green-400);
808
+ }
809
+
810
+ /* css/palette/track.css */
811
+ .vuu-theme[data-mode=light] {
812
+ --salt-palette-track-background: var(--salt-color-gray-60);
813
+ --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
814
+ --salt-palette-track-border: var(--salt-color-gray-90);
815
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
816
+ }
817
+ .vuu-theme[data-mode=dark] {
818
+ --salt-palette-track-background: var(--salt-color-gray-300);
819
+ --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
820
+ --salt-palette-track-border: var(--salt-color-gray-90);
821
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
822
+ }
823
+
824
+ /* css/palette/warning.css */
825
+ .vuu-theme[data-mode=light] {
826
+ --salt-palette-warning-background: var(--salt-color-orange-10);
827
+ --salt-palette-warning-background-selected: var(--salt-color-orange-20);
828
+ --salt-palette-warning-border: var(--salt-color-orange-700);
829
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
830
+ }
831
+ .vuu-theme[data-mode=dark] {
832
+ --salt-palette-warning-background: var(--salt-color-orange-900);
833
+ --salt-palette-warning-background-selected: var(--salt-color-orange-900);
834
+ --salt-palette-warning-border: var(--salt-color-orange-500);
835
+ --salt-palette-warning-foreground: var(--salt-color-orange-500);
836
+ }
837
+
838
+ /* css/characteristics/accent.css */
839
+ .vuu-density-high {
840
+ --salt-accent-fontSize: 8px;
841
+ --salt-accent-lineHeight: 11px;
842
+ }
843
+ .vuu-density-medium {
844
+ --salt-accent-fontSize: 10px;
845
+ --salt-accent-lineHeight: 13px;
846
+ }
847
+ .vuu-density-low {
848
+ --salt-accent-fontSize: 12px;
849
+ --salt-accent-lineHeight: 16px;
850
+ }
851
+ .vuu-density-touch {
852
+ --salt-accent-fontSize: 14px;
853
+ --salt-accent-lineHeight: 18px;
854
+ }
855
+ .vuu-theme {
856
+ --salt-accent-background: var(--salt-palette-accent-background);
857
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
858
+ --salt-accent-borderColor: var(--salt-palette-accent-border);
859
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
860
+ --salt-accent-foreground: var(--salt-palette-accent-foreground);
861
+ --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
862
+ --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
863
+ }
864
+
865
+ /* css/characteristics/actionable.css */
866
+ .vuu-theme {
867
+ --salt-actionable-cursor-hover: pointer;
868
+ --salt-actionable-cursor-active: pointer;
869
+ --salt-actionable-cursor-disabled: not-allowed;
870
+ --salt-actionable-letterSpacing: 0.6px;
871
+ --salt-actionable-textAlign: center;
872
+ --salt-actionable-textTransform: uppercase;
873
+ --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);
874
+ --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
875
+ --salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);
876
+ --salt-actionable-primary-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
877
+ --salt-actionable-primary-background: var(--salt-palette-interact-primary-background);
878
+ --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
879
+ --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
880
+ --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
881
+ --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
882
+ --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
883
+ --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
884
+ --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
885
+ --salt-actionable-cta-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
886
+ --salt-actionable-cta-background: var(--salt-palette-interact-cta-background);
887
+ --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
888
+ --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
889
+ --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
890
+ --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
891
+ --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
892
+ --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
893
+ --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
894
+ --salt-actionable-secondary-foreground-disabled: var(--salt-palette-interact-secondary-foreground-disabled);
895
+ --salt-actionable-secondary-background: var(--salt-palette-interact-secondary-background);
896
+ --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
897
+ --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
898
+ --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
899
+ --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
900
+ }
901
+
902
+ /* css/characteristics/container.css */
903
+ .vuu-theme {
904
+ --salt-container-borderStyle: solid;
905
+ --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
906
+ --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
907
+ --salt-container-primary-borderColor: var(--salt-palette-neutral-primary-border);
908
+ --salt-container-primary-borderColor-disabled: var(--salt-palette-neutral-primary-border-disabled);
909
+ --salt-container-secondary-background: var(--salt-palette-neutral-secondary-background);
910
+ --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
911
+ --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);
912
+ --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);
913
+ --salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background);
914
+ --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
915
+ --salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border);
916
+ --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
917
+ }
918
+
919
+ /* css/characteristics/draggable.css */
920
+ .vuu-theme {
921
+ --salt-draggable-horizontal-cursor-hover: row-resize;
922
+ --salt-draggable-horizontal-cursor-active: row-resize;
923
+ --salt-draggable-vertical-cursor-hover: col-resize;
924
+ --salt-draggable-vertical-cursor-active: col-resize;
925
+ --salt-draggable-grab-cursor-hover: grab;
926
+ --salt-draggable-grab-cursor-active: grabbing;
927
+ }
928
+
929
+ /* css/characteristics/target.css */
930
+ .vuu-theme {
931
+ --salt-target-background-hover: var(--salt-palette-interact-background-hover);
932
+ --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
933
+ --salt-target-borderStyle: dashed;
934
+ --salt-target-borderStyle-hover: solid;
935
+ --salt-target-borderStyle-disabled: dashed;
936
+ --salt-target-cursor-disabled: not-allowed;
937
+ }
938
+
939
+ /* css/characteristics/editable.css */
940
+ .vuu-theme {
941
+ --salt-editable-cursor-hover: text;
942
+ --salt-editable-cursor-active: text;
943
+ --salt-editable-cursor-disabled: not-allowed;
944
+ --salt-editable-cursor-readonly: text;
945
+ --salt-editable-borderStyle: solid;
946
+ --salt-editable-borderStyle-hover: solid;
947
+ --salt-editable-borderStyle-active: solid;
948
+ --salt-editable-borderStyle-disabled: solid;
949
+ --salt-editable-borderStyle-readonly: solid;
950
+ --salt-editable-borderWidth-active: 2px;
951
+ --salt-editable-borderColor: var(--salt-palette-interact-border);
952
+ --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
953
+ --salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
954
+ --salt-editable-borderColor-hover: var(--salt-palette-interact-border-hover);
955
+ --salt-editable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
956
+ --salt-editable-primary-background: var(--salt-palette-neutral-primary-background);
957
+ --salt-editable-primary-background-active: var(--salt-palette-neutral-primary-background);
958
+ --salt-editable-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
959
+ --salt-editable-primary-background-hover: var(--salt-palette-neutral-primary-background);
960
+ --salt-editable-primary-background-readonly: var(--salt-palette-neutral-primary-background-readonly);
961
+ --salt-editable-secondary-background: var(--salt-palette-neutral-secondary-background);
962
+ --salt-editable-secondary-background-active: var(--salt-palette-neutral-secondary-background);
963
+ --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
964
+ --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
965
+ --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
966
+ --salt-editable-help-fontStyle: italic;
967
+ }
968
+
969
+ /* css/characteristics/focused.css */
970
+ .vuu-theme {
971
+ --salt-focused-outlineColor: var(--salt-palette-interact-outline);
972
+ --salt-focused-outlineStyle: dotted;
973
+ --salt-focused-outlineWidth: 2px;
974
+ --salt-focused-outlineInset: 0;
975
+ --salt-focused-outlineOffset: 0;
976
+ --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
977
+ }
978
+ .saltFocusVisible:after,
979
+ .focused:focus:after,
980
+ .focused:focus-visible:after {
981
+ content: "";
982
+ inset: var(--salt-focused-outlineInset);
983
+ outline-color: var(--salt-focused-outlineColor);
984
+ outline-offset: var(--salt-focused-outlineOffset);
985
+ outline-style: var(--salt-focused-outlineStyle);
986
+ outline-width: var(--salt-focused-outlineWidth);
987
+ position: absolute;
988
+ }
989
+
990
+ /* css/characteristics/navigable.css */
991
+ .vuu-theme {
992
+ --salt-navigable-cursor-active: pointer;
993
+ --salt-navigable-cursor-hover: pointer;
994
+ --salt-navigable-cursor-disabled: not-allowed;
995
+ --salt-navigable-cursor-edit: text;
996
+ --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
997
+ --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
998
+ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
999
+ --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1000
+ --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1001
+ --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1002
+ --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
1003
+ --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
1004
+ --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
1005
+ --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
1006
+ --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);
1007
+ --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);
1008
+ --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);
1009
+ --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
1010
+ --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
1011
+ --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
1012
+ }
1013
+
1014
+ /* css/characteristics/overlayable.css */
1015
+ .vuu-theme {
1016
+ --salt-overlayable-shadow-scroll: var(--salt-shadow-1);
1017
+ --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
1018
+ --salt-overlayable-shadow: var(--salt-shadow-2);
1019
+ --salt-overlayable-shadow-hover: var(--salt-shadow-3);
1020
+ --salt-overlayable-shadow-popout: var(--salt-shadow-4);
1021
+ --salt-overlayable-shadow-drag: var(--salt-shadow-4);
1022
+ --salt-overlayable-shadow-modal: var(--salt-shadow-5);
1023
+ --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1024
+ }
1025
+
1026
+ /* css/characteristics/selectable.css */
1027
+ .vuu-theme {
1028
+ --salt-selectable-cursor-hover: pointer;
1029
+ --salt-selectable-cursor-selected: pointer;
1030
+ --salt-selectable-cursor-blurSelected: pointer;
1031
+ --salt-selectable-cursor-disabled: not-allowed;
1032
+ --salt-selectable-cursor-readonly: not-allowed;
1033
+ --salt-selectable-borderStyle: solid;
1034
+ --salt-selectable-borderStyle-hover: solid;
1035
+ --salt-selectable-borderStyle-selected: solid;
1036
+ --salt-selectable-borderStyle-blurSelected: solid;
1037
+ --salt-selectable-borderColor: var(--salt-palette-interact-border);
1038
+ --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
1039
+ --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
1040
+ --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
1041
+ --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1042
+ --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
1043
+ --salt-selectable-foreground: var(--salt-palette-interact-foreground);
1044
+ --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1045
+ --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
1046
+ --salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
1047
+ --salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
1048
+ --salt-selectable-background: var(--salt-palette-interact-background);
1049
+ --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
1050
+ --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
1051
+ --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
1052
+ --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
1053
+ --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
1054
+ --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1055
+ --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
1056
+ --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
1057
+ --salt-selectable-cta-background: var(--salt-palette-interact-background);
1058
+ --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
1059
+ --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1060
+ --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
1061
+ --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
1062
+ --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1063
+ --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
1064
+ --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
1065
+ --salt-selectable-primary-background: var(--salt-palette-interact-background);
1066
+ --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
1067
+ --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1068
+ --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
1069
+ --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
1070
+ --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1071
+ --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
1072
+ --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
1073
+ --salt-selectable-secondary-background: var(--salt-palette-interact-background);
1074
+ --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
1075
+ --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1076
+ --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
1077
+ --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1078
+ }
1079
+
1080
+ /* css/characteristics/separable.css */
1081
+ .vuu-theme {
1082
+ --salt-separable-borderStyle: solid;
1083
+ --salt-separable-primary-borderColor: var(--salt-palette-neutral-primary-separator);
1084
+ --salt-separable-secondary-borderColor: var(--salt-palette-neutral-secondary-separator);
1085
+ --salt-separable-tertiary-borderColor: var(--salt-palette-neutral-tertiary-separator);
1086
+ }
1087
+
1088
+ /* css/characteristics/status.css */
1089
+ .vuu-theme {
1090
+ --salt-status-info-foreground: var(--salt-palette-info-foreground);
1091
+ --salt-status-success-foreground: var(--salt-palette-success-foreground);
1092
+ --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
1093
+ --salt-status-error-foreground: var(--salt-palette-error-foreground);
1094
+ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
1095
+ --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
1096
+ --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
1097
+ --salt-status-info-borderColor: var(--salt-palette-info-border);
1098
+ --salt-status-success-borderColor: var(--salt-palette-success-border);
1099
+ --salt-status-warning-borderColor: var(--salt-palette-warning-border);
1100
+ --salt-status-error-borderColor: var(--salt-palette-error-border);
1101
+ --salt-status-info-background: var(--salt-palette-info-background);
1102
+ --salt-status-success-background: var(--salt-palette-success-background);
1103
+ --salt-status-warning-background: var(--salt-palette-warning-background);
1104
+ --salt-status-error-background: var(--salt-palette-error-background);
1105
+ --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1106
+ --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1107
+ --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1108
+ }
1109
+
1110
+ /* css/characteristics/taggable.css */
1111
+ .vuu-theme {
1112
+ --salt-taggable-cursor-hover: pointer;
1113
+ --salt-taggable-cursor-active: pointer;
1114
+ --salt-taggable-cursor-disabled: not-allowed;
1115
+ --salt-taggable-background: var(--salt-palette-interact-primary-background);
1116
+ --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
1117
+ --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
1118
+ --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1119
+ --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
1120
+ --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1121
+ --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1122
+ --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1123
+ }
1124
+
1125
+ /* css/characteristics/text.css */
1126
+ .vuu-theme {
1127
+ --salt-text-letterSpacing: 0;
1128
+ --salt-text-textAlign: left;
1129
+ --salt-text-textAlign-embedded: center;
1130
+ --salt-text-textDecoration: none;
1131
+ --salt-text-textTransform: none;
1132
+ --salt-text-fontFamily: var(--salt-typography-fontFamily);
1133
+ --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1134
+ --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1135
+ --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1136
+ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
1137
+ --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1138
+ --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
1139
+ --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
1140
+ --salt-text-h2-fontFamily: var(--salt-typography-fontFamily);
1141
+ --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1142
+ --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1143
+ --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1144
+ --salt-text-h3-fontFamily: var(--salt-typography-fontFamily);
1145
+ --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1146
+ --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1147
+ --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1148
+ --salt-text-h4-fontFamily: var(--salt-typography-fontFamily);
1149
+ --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1150
+ --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1151
+ --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1152
+ --salt-text-label-fontFamily: var(--salt-typography-fontFamily);
1153
+ --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
1154
+ --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
1155
+ --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1156
+ --salt-text-display1-fontFamily: var(--salt-typography-fontFamily);
1157
+ --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1158
+ --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1159
+ --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1160
+ --salt-text-display2-fontFamily: var(--salt-typography-fontFamily);
1161
+ --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1162
+ --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1163
+ --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1164
+ --salt-text-display3-fontFamily: var(--salt-typography-fontFamily);
1165
+ --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1166
+ --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1167
+ --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1168
+ --salt-text-background-selected: var(--salt-palette-interact-background-active);
1169
+ --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1170
+ --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1171
+ --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1172
+ --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1173
+ --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1174
+ --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
1175
+ --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1176
+ --salt-text-link-textDecoration: underline;
1177
+ --salt-text-link-textDecoration-hover: none;
1178
+ --salt-text-link-textDecoration-selected: underline;
1179
+ --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
1180
+ }
1181
+ .vuu-density-touch {
1182
+ --salt-text-h1-fontSize: 42px;
1183
+ --salt-text-h1-lineHeight: 54px;
1184
+ --salt-text-h2-fontSize: 32px;
1185
+ --salt-text-h2-lineHeight: 42px;
1186
+ --salt-text-h3-fontSize: 24px;
1187
+ --salt-text-h3-lineHeight: 32px;
1188
+ --salt-text-h4-fontSize: 16px;
1189
+ --salt-text-h4-lineHeight: 20px;
1190
+ --salt-text-label-fontSize: 14px;
1191
+ --salt-text-label-lineHeight: 18px;
1192
+ --salt-text-fontSize: 16px;
1193
+ --salt-text-lineHeight: 20px;
1194
+ --salt-text-minHeight: 20px;
1195
+ --salt-text-display1-fontSize: 84px;
1196
+ --salt-text-display1-lineHeight: 109px;
1197
+ --salt-text-display2-fontSize: 58px;
1198
+ --salt-text-display2-lineHeight: 76px;
1199
+ --salt-text-display3-fontSize: 42px;
1200
+ --salt-text-display3-lineHeight: 54px;
1201
+ }
1202
+ .vuu-density-low {
1203
+ --salt-text-h1-fontSize: 32px;
1204
+ --salt-text-h1-lineHeight: 42px;
1205
+ --salt-text-h2-fontSize: 24px;
1206
+ --salt-text-h2-lineHeight: 32px;
1207
+ --salt-text-h3-fontSize: 18px;
1208
+ --salt-text-h3-lineHeight: 24px;
1209
+ --salt-text-h4-fontSize: 14px;
1210
+ --salt-text-h4-lineHeight: 18px;
1211
+ --salt-text-label-fontSize: 12px;
1212
+ --salt-text-label-lineHeight: 16px;
1213
+ --salt-text-fontSize: 14px;
1214
+ --salt-text-lineHeight: 18px;
1215
+ --salt-text-minHeight: 18px;
1216
+ --salt-text-display1-fontSize: 68px;
1217
+ --salt-text-display1-lineHeight: 88px;
1218
+ --salt-text-display2-fontSize: 46px;
1219
+ --salt-text-display2-lineHeight: 60px;
1220
+ --salt-text-display3-fontSize: 32px;
1221
+ --salt-text-display3-lineHeight: 42px;
1222
+ }
1223
+ .vuu-density-medium {
1224
+ --salt-text-h1-fontSize: 24px;
1225
+ --salt-text-h1-lineHeight: 32px;
1226
+ --salt-text-h2-fontSize: 18px;
1227
+ --salt-text-h2-lineHeight: 24px;
1228
+ --salt-text-h3-fontSize: 14px;
1229
+ --salt-text-h3-lineHeight: 18px;
1230
+ --salt-text-h4-fontSize: 12px;
1231
+ --salt-text-h4-lineHeight: 16px;
1232
+ --salt-text-label-fontSize: 11px;
1233
+ --salt-text-label-lineHeight: 14px;
1234
+ --salt-text-fontSize: 12px;
1235
+ --salt-text-lineHeight: 16px;
1236
+ --salt-text-minHeight: 16px;
1237
+ --salt-text-display1-fontSize: 54px;
1238
+ --salt-text-display1-lineHeight: 70px;
1239
+ --salt-text-display2-fontSize: 36px;
1240
+ --salt-text-display2-lineHeight: 47px;
1241
+ --salt-text-display3-fontSize: 24px;
1242
+ --salt-text-display3-lineHeight: 32px;
1243
+ }
1244
+ .vuu-density-high {
1245
+ --salt-text-h1-fontSize: 18px;
1246
+ --salt-text-h1-lineHeight: 24px;
1247
+ --salt-text-h2-fontSize: 14px;
1248
+ --salt-text-h2-lineHeight: 18px;
1249
+ --salt-text-h3-fontSize: 12px;
1250
+ --salt-text-h3-lineHeight: 16px;
1251
+ --salt-text-h4-fontSize: 11px;
1252
+ --salt-text-h4-lineHeight: 14px;
1253
+ --salt-text-label-fontSize: 10px;
1254
+ --salt-text-label-lineHeight: 13px;
1255
+ --salt-text-fontSize: 12px;
1256
+ --salt-text-lineHeight: 14px;
1257
+ --salt-text-minHeight: 14px;
1258
+ --salt-text-display1-fontSize: 42px;
1259
+ --salt-text-display1-lineHeight: 54px;
1260
+ --salt-text-display2-fontSize: 28px;
1261
+ --salt-text-display2-lineHeight: 36px;
1262
+ --salt-text-display3-fontSize: 18px;
1263
+ --salt-text-display3-lineHeight: 24px;
1264
+ }
1265
+
1266
+ /* css/characteristics/track.css */
1267
+ .vuu-theme {
1268
+ --salt-track-borderStyle: solid;
1269
+ --salt-track-borderStyle-active: solid;
1270
+ --salt-track-borderStyle-complete: solid;
1271
+ --salt-track-borderStyle-incomplete: dotted;
1272
+ --salt-track-borderWidth: 2px;
1273
+ --salt-track-borderWidth-active: 2px;
1274
+ --salt-track-borderWidth-complete: 2px;
1275
+ --salt-track-borderWidth-incomplete: 2px;
1276
+ --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
1277
+ --salt-track-textAlign: center;
1278
+ --salt-track-background: var(--salt-palette-track-background);
1279
+ --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
1280
+ --salt-track-borderColor: var(--salt-palette-track-border);
1281
+ --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1282
+ }
1283
+
1284
+ /* css/deprecated/characteristics.css */
1285
+ .vuu-theme {
1286
+ --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
1287
+ --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
1288
+ --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
1289
+ --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
1290
+ --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1291
+ --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
1292
+ --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
1293
+ --salt-measured-borderStyle: solid;
1294
+ --salt-measured-borderStyle-active: solid;
1295
+ --salt-measured-borderStyle-complete: solid;
1296
+ --salt-measured-borderStyle-incomplete: dotted;
1297
+ --salt-measured-borderWidth: 2px;
1298
+ --salt-measured-borderWidth-active: 2px;
1299
+ --salt-measured-borderWidth-complete: 2px;
1300
+ --salt-measured-borderWidth-incomplete: 2px;
1301
+ --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
1302
+ --salt-measured-textAlign: center;
1303
+ --salt-measured-background: var(--salt-palette-measured-background);
1304
+ --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
1305
+ --salt-measured-borderColor: var(--salt-palette-measured-border);
1306
+ --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
1307
+ --salt-measured-fill: var(--salt-palette-measured-fill);
1308
+ --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
1309
+ --salt-measured-foreground: var(--salt-palette-measured-foreground);
1310
+ --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
1311
+ --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
1312
+ --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
1313
+ --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
1314
+ --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
1315
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
1316
+ --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1317
+ --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1318
+ --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1319
+ --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1320
+ --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1321
+ --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1322
+ --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1323
+ --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1324
+ --salt-status-info-background-emphasize: var(--salt-status-info-background);
1325
+ --salt-status-success-background-emphasize: var(--salt-status-success-background);
1326
+ --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1327
+ --salt-status-error-background-emphasize: var(--salt-status-error-background);
1328
+ --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1329
+ --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1330
+ --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1331
+ --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1332
+ --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1333
+ --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1334
+ --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1335
+ --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1336
+ --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1337
+ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1338
+ --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1339
+ }
1340
+
1341
+ /* css/deprecated/fade.css */
1342
+ .vuu-theme {
1343
+ --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
1344
+ --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
1345
+ --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
1346
+ --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
1347
+ --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
1348
+ --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
1349
+ }
1350
+
1351
+ /* css/deprecated/foundations.css */
1352
+ .vuu-theme {
1353
+ --salt-delay-instant: 100ms;
1354
+ --salt-delay-perceptible: 300ms;
1355
+ --salt-delay-notable: 1000ms;
1356
+ --salt-delay-cutoff: 10000ms;
1357
+ --salt-size-icon-base: var(--salt-icon-size-base);
1358
+ --salt-opacity-1: 0.15;
1359
+ --salt-opacity-2: 0.25;
1360
+ --salt-opacity-3: 0.4;
1361
+ --salt-opacity-4: 0.7;
1362
+ }
1363
+ .vuu-density-touch,
1364
+ .vuu-density-low,
1365
+ .vuu-density-medium,
1366
+ .vuu-density-high {
1367
+ --salt-size-selection: var(--salt-size-selectable);
1368
+ --salt-size-brandBar: 4px;
1369
+ --salt-size-graphic-small: 12px;
1370
+ --salt-size-graphic-medium: 24px;
1371
+ --salt-size-graphic-large: 48px;
1372
+ --salt-size-divider-height: var(--salt-size-separator-height);
1373
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
1374
+ --salt-size-detail: var(--salt-size-compact);
1375
+ }
1376
+
1377
+ /* css/deprecated/palette.css */
1378
+ .vuu-theme {
1379
+ --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
1380
+ --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
1381
+ --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
1382
+ --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
1383
+ --salt-palette-opacity-fill: var(--salt-palette-opacity-disabled);
1384
+ --salt-palette-opacity-stroke: var(--salt-palette-opacity-disabled);
1385
+ --salt-palette-opacity-background: var(--salt-palette-opacity-disabled);
1386
+ --salt-palette-opacity-border: var(--salt-palette-opacity-disabled);
1387
+ --salt-palette-opacity-foreground: var(--salt-palette-opacity-disabled);
1388
+ }
1389
+ .vuu-theme[data-mode=light] {
1390
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
1391
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
1392
+ --salt-palette-measured-fill: var(--salt-color-blue-500);
1393
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
1394
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
1395
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
1396
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
1397
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
1398
+ --salt-palette-measured-background: var(--salt-color-gray-60);
1399
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
1400
+ --salt-palette-measured-border: var(--salt-color-gray-90);
1401
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1402
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
1403
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1404
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1405
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1406
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1407
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
1408
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
1409
+ --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
1410
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
1411
+ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
1412
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1413
+ }
1414
+ .vuu-theme[data-mode=dark] {
1415
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
1416
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
1417
+ --salt-palette-measured-fill: var(--salt-color-blue-300);
1418
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
1419
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
1420
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
1421
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
1422
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
1423
+ --salt-palette-measured-background: var(--salt-color-gray-300);
1424
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
1425
+ --salt-palette-measured-border: var(--salt-color-gray-90);
1426
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1427
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
1428
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1429
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1430
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1431
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1432
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
1433
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
1434
+ --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
1435
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
1436
+ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
1437
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1438
+ }
1439
+
1440
+ /* css/theme.css */
1441
+
1442
+ /* css/components/button.css */
1443
+ .saltButton-primary {
1444
+ --saltButton-borderColor: var(--salt-actionable-primary-foreground);
1445
+ --saltButton-borderWidth: 1px;
1446
+ --saltButton-borderRadius: 6px;
1447
+ --saltButton-borderStyle: solid;
1448
+ --vuu-icon-color: var(--saltIcon-color);
1449
+ }
1450
+ .saltButton-primary:hover {
1451
+ --saltButton-borderColor: var(--salt-actionable-primary-background-hover) ;
1452
+ }
1453
+
1454
+ /* css/components/checkbox.css */
1455
+ .saltCheckbox {
1456
+ --vuu-icon-size: 12px;
1457
+ --vuu-icon-left: -1px;
1458
+ --vuu-icon-top: -1px;
1459
+ }
1460
+ .saltCheckboxIcon {
1461
+ border-radius: 3px;
1462
+ height: 12px;
1463
+ width: 12px;
1464
+ }
1465
+ .saltCheckboxIcon-checked {
1466
+ background-color: var(--vuuCheckboxIcon-background-checked, var(--salt-selectable-background-selected));
1467
+ }
1468
+ .saltCheckboxIcon-checked.saltCheckboxIcon-disabled,
1469
+ .saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {
1470
+ background-color: var(--salt-selectable-background-disabled);
1471
+ border-color: transparent;
1472
+ }
1473
+ .saltCheckboxIcon-checked:after {
1474
+ content: "";
1475
+ background-color: white;
1476
+ left: var(--vuu-icon-left, auto);
1477
+ height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
1478
+ -webkit-mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1479
+ mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1480
+ mask-repeat: no-repeat;
1481
+ -webkit-mask-repeat: no-repeat;
1482
+ position: absolute;
1483
+ top: var(--vuu-icon-top, auto);
1484
+ width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
1485
+ }
1486
+
1487
+ /* css/components/icon.css */
1488
+ .saltIcon {
1489
+ display: none;
1490
+ }
1491
+
1492
+ /* css/components/input.css */
1493
+ .saltInput-activationIndicator {
1494
+ display: none;
1495
+ }
1496
+ .saltInput-primary {
1497
+ border: solid 1px var(--salt-editable-borderColor);
1498
+ border-radius: 6px;
1499
+ height: 24px;
1500
+ }
1501
+
1502
+ /* css/components/switch.css */
1503
+ .saltSwitch {
1504
+ --vuu-icon-left: -1px;
1505
+ }
1506
+ .saltSwitch-track,
1507
+ .saltSwitch-track:hover {
1508
+ background-color: var(--vuu-color-gray-45);
1509
+ border: none;
1510
+ border-radius: 4px;
1511
+ height: 14px;
1512
+ padding: 0 2px;
1513
+ width: 26px;
1514
+ }
1515
+ .saltSwitch-thumb {
1516
+ background-color: var(--vuu-color-white);
1517
+ border: none;
1518
+ border-radius: 3px;
1519
+ height: 10px;
1520
+ margin: 0;
1521
+ width: 10px;
1522
+ }
1523
+ .saltSwitch-checked .saltSwitch-track {
1524
+ background-color: var(--salt-selectable-background-selected);
1525
+ }
1526
+ .saltSwitch-checked .saltSwitch-thumb,
1527
+ .saltSwitch-checked:hover .saltSwitch-thumb {
1528
+ background-color: white;
1529
+ transform: translateX(calc(100% + 2px));
1530
+ }
1531
+ .saltSwitch-checked .saltSwitch-thumb:after {
1532
+ background-color: var(--vuu-color-purple-10);
1533
+ content: "";
1534
+ left: var(--vuu-icon-left, auto);
1535
+ height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
1536
+ -webkit-mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1537
+ mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
1538
+ mask-repeat: no-repeat;
1539
+ -webkit-mask-repeat: no-repeat;
1540
+ position: absolute;
1541
+ top: var(--vuu-icon-top, auto);
1542
+ width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
1543
+ }
1544
+
1545
+ /* css/components/toggle-button.css */
1546
+ .saltToggleButtonGroup {
1547
+ border-radius: 6px;
1548
+ padding: 0;
1549
+ }
1550
+ .saltToggleButtonGroup-horizontal .saltToggleButton {
1551
+ height: 24px;
1552
+ }
1553
+ .vuuIconToggleButton {
1554
+ --vuu-icon-size: 48px;
1555
+ width: 48px;
1556
+ }
1557
+ .vuuIconToggleButton:first-child {
1558
+ border-radius: 6px 0 0 6px;
1559
+ }
1560
+ .vuuIconToggleButton:last-child {
1561
+ border-radius: 0 6px 6px 0;
1562
+ }
1563
+
1564
+ /* css/components/components.css */
1565
+
1566
+ /* index.css */
2
1567
  /*# sourceMappingURL=index.css.map */