@vuu-ui/vuu-theme 0.5.10 → 0.5.12

package/css/foundations/fade.css

@@ -1,51 +0,0 @@
-.salt-theme {
-  --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
-  --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
-  --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
-  --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
-  --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
-  --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
-  --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
-
-  --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
-  --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
-  --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
-  --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
-  --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
-  --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
-
-  --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-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
-  --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
-  --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
-  --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-background));
-  --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-background));
-  --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-background));
-  --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-background));
-  --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-background));
-  --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-background));
-  --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-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-background));
-
-  --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-readonly));
-  --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-readonly));
-  --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-readonly));
-  --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-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-fill));
-  --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));
-  --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-fill));
-
-  --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));
-}

package/css/foundations/icon.css

@@ -1,13 +0,0 @@
-.salt-density-touch {
-  --salt-size-icon-base: 16px;
-}
-
-.salt-density-low {
-  --salt-size-icon-base: 14px;
-}
-.salt-density-medium {
-  --salt-size-icon-base: 12px;
-}
-.salt-density-high {
-  --salt-size-icon-base: 10px;
-}

package/css/foundations/opacity.css

@@ -1,6 +0,0 @@
-.salt-theme {
-  --salt-opacity-1: 0.15;
-  --salt-opacity-2: 0.25;
-  --salt-opacity-3: 0.4;
-  --salt-opacity-4: 0.7;
-}

package/css/foundations/palette.css

@@ -1,277 +0,0 @@
-/* Opacities */
-.salt-theme {
-  --salt-palette-opacity-background: var(--salt-opacity-3);
-  --salt-palette-opacity-border: var(--salt-opacity-3);
-  --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
-  --salt-palette-opacity-fill: var(--salt-opacity-3);
-  --salt-palette-opacity-foreground: var(--salt-opacity-4);
-  --salt-palette-opacity-backdrop: var(--salt-opacity-3);
-  --salt-palette-opacity-stroke: var(--salt-opacity-3);
-  --salt-palette-opacity-primary-border: var(--salt-opacity-3);
-  --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
-  --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
-}
-
-.salt-theme[data-mode="light"] {
-  /* Accent */
-  --salt-palette-accent-background: var(--salt-color-blue-500);
-  --salt-palette-accent-border: var(--salt-color-blue-500);
-  --salt-palette-accent-foreground: var(--salt-color-white);
-
-  /* Interact */
-  --salt-palette-interact-background: transparent;
-  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
-  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
-  --salt-palette-interact-background-active: var(--salt-color-blue-30);
-  --salt-palette-interact-background-disabled: transparent;
-  --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-900);
-  --salt-palette-interact-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
-  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
-  --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
-  --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(--salt-color-gray-60);
-  --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(--salt-color-gray-40);
-  --salt-palette-interact-primary-foreground: var(--salt-color-gray-900);
-  --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(--salt-color-gray-900);
-  --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);
-
-  /* States - error, info, success, warning */
-  --salt-palette-error-background-emphasize: var(--salt-color-red-10);
-  --salt-palette-error-border: var(--salt-color-red-500);
-  --salt-palette-error-foreground: var(--salt-color-red-500);
-  --salt-palette-info-background-emphasize: var(--salt-color-blue-10);
-  --salt-palette-info-border: var(--salt-color-blue-500);
-  --salt-palette-info-foreground: var(--salt-color-blue-500);
-  --salt-palette-success-background-emphasize: var(--salt-color-green-10);
-  --salt-palette-success-border: var(--salt-color-green-500);
-  --salt-palette-success-foreground: var(--salt-color-green-500);
-  --salt-palette-warning-background-emphasize: var(--salt-color-orange-10);
-  --salt-palette-warning-border: var(--salt-color-orange-500);
-  --salt-palette-warning-foreground: var(--salt-color-orange-500);
-
-  /* Measure */
-  --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);
-
-  /* Navigate */
-  --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(--salt-color-orange-600);
-  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
-
-  /* Negative */
-  --salt-palette-negative-background: var(--salt-color-red-40);
-  --salt-palette-negative-foreground: var(--salt-color-red-700);
-
-  /* Neutral */
-  --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(--salt-color-gray-900);
-  --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(--salt-color-gray-60);
-  --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
-  --salt-palette-neutral-secondary-background: var(--salt-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-background-readonly: transparent;
-  --salt-palette-neutral-tertiary-border: transparent;
-  --salt-palette-neutral-tertiary-border-disabled: transparent;
-  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
-
-  /* Positive */
-  --salt-palette-positive-background: var(--salt-color-green-20);
-  --salt-palette-positive-foreground: var(--salt-color-green-700);
-}
-
-.salt-theme[data-mode="dark"] {
-  /* Accent */
-  --salt-palette-accent-background: var(--salt-color-blue-500);
-  --salt-palette-accent-border: var(--salt-color-blue-500);
-  --salt-palette-accent-foreground: var(--salt-color-white);
-
-  /* Interact */
-  --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-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-white);
-  --salt-palette-interact-foreground-disabled: var(--salt-color-white-fade-foreground);
-  --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
-  --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
-  --salt-palette-interact-outline: var(--salt-color-blue-100);
-
-  --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);
-
-  /* States - error, info, success, warning */
-  --salt-palette-error-background-emphasize: var(--salt-color-red-900);
-  --salt-palette-error-border: var(--salt-color-red-500);
-  --salt-palette-error-foreground: var(--salt-color-red-500);
-  --salt-palette-info-background-emphasize: var(--salt-color-blue-900);
-  --salt-palette-info-border: var(--salt-color-blue-500);
-  --salt-palette-info-foreground: var(--salt-color-blue-500);
-  --salt-palette-success-background-emphasize: var(--salt-color-green-900);
-  --salt-palette-success-border: var(--salt-color-green-500);
-  --salt-palette-success-foreground: var(--salt-color-green-500);
-  --salt-palette-warning-background-emphasize: var(--salt-color-orange-900);
-  --salt-palette-warning-border: var(--salt-color-orange-500);
-  --salt-palette-warning-foreground: var(--salt-color-orange-500);
-
-  /* Measure */
-  --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);
-
-  /* Navigate */
-
-  --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(--salt-color-orange-400);
-  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
-
-  /* Negative */
-  --salt-palette-negative-background: var(--salt-color-red-40);
-  --salt-palette-negative-foreground: var(--salt-color-red-300);
-
-  /* Neutral */
-  --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-background-readonly: 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);
-
-  /* Positive */
-  --salt-palette-positive-foreground: var(--salt-color-green-300);
-}

package/css/foundations/shadow.css

@@ -1,24 +0,0 @@
-.salt-theme[data-mode="light"] {
-  --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
-  --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
-  --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
-  --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
-  --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
-}
-
-.salt-theme[data-mode="dark"] {
-  --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
-  --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
-  --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
-  --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
-  --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
-}
-
-.salt-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 5px var(--salt-shadow-5-color);
-}

package/css/foundations/size.css

@@ -1,43 +0,0 @@
-/** Size */
-.salt-density-touch,
-.salt-density-low,
-.salt-density-medium,
-.salt-density-high {
-  --salt-size-basis-unit: 4px;
-
-  --salt-size-border: 1px;
-  --salt-size-brandBar: 4px;
-  --salt-size-divider-strokeWidth: 1px;
-  --salt-size-sharktooth-height: 5px;
-  --salt-size-sharktooth-width: 10px;
-
-  --salt-size-divider-height: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
-  --salt-size-selection: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
-  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
-
-  /* TODO: Remove on size/density design work completion */
-  --salt-size-graphic-small: 12px;
-  --salt-size-graphic-medium: 24px;
-  --salt-size-graphic-large: 48px;
-}
-
-.salt-density-high {
-  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
-  --salt-size-detail: calc(var(--salt-size-basis-unit) * 1.5);
-  --salt-size-base: calc(var(--salt-size-basis-unit) * 5);
-}
-.salt-density-medium {
-  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
-  --salt-size-detail: calc(var(--salt-size-basis-unit) * 2);
-  --salt-size-base: calc(var(--salt-size-basis-unit) * 7);
-}
-.salt-density-low {
-  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
-  --salt-size-detail: calc(var(--salt-size-basis-unit) * 2.5);
-  --salt-size-base: calc(var(--salt-size-basis-unit) * 9);
-}
-.salt-density-touch {
-  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
-  --salt-size-detail: calc(var(--salt-size-basis-unit) * 3);
-  --salt-size-base: calc(var(--salt-size-basis-unit) * 11);
-}

package/css/foundations/typography.css

@@ -1,11 +0,0 @@
-.salt-theme {
-  --salt-typography-fontFamily: "Open 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;
-}

package/css/foundations/zindex.css

@@ -1,15 +0,0 @@
-.salt-density-touch,
-.salt-density-low,
-.salt-density-medium,
-.salt-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;
-}

package/css/global.css

@@ -1,27 +0,0 @@
-/**
- * Have some global styles to simulate more realistic app. Currently only for Storybook.
- */
-
- .salt-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);
-}
-
-.salt-theme[data-mode="light"] {
-  color-scheme: light;
-}
-
-.salt-theme[data-mode="dark"] {
-  color-scheme: dark;
-}
-
-/* Setting every element's box-sizing to border-box ensures the declared width
-of the element is never exceeded due to padding or border. */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}

package/css/icons/icons.css

@@ -1,151 +0,0 @@
-.salt-theme {
-  --svg-add: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M29 16h-9V7a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v9H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h9v9a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-9h9a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z"/></svg>');
-  --svg-box: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M8.2,17.797,1.4115,14.0255A.8.8,0,0,1,1,13.326V6.597l7.2,4Z" /><path d="M16.5885,14.0255,9.8,17.797v-7.2l7.2-4v6.729A.8.8,0,0,1,16.5885,14.0255Z" /><path d="M12.3185,1.8585,9.381.2675a.8.8,0,0,0-.762,0L1.296,4.234a.4125.4125,0,0,0,0,.7255L4.0605,6.457Z" /><path d="M16.704,4.234,13.985,2.7615l-8.2575,4.6L9,9.1325l7.704-4.173a.4125.4125,0,0,0,0-.7255Z" /></svg>');
-  --svg-checkbox: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"/><rect fill="none" width="32" height="32"/></svg>');
-  --svg-checkbox-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"/><polygon points="14 21.5 9 16.54 10.59 15 14 18.35 21.41 11 23 12.58 14 21.5"/><rect fill="none" width="32" height="32"/></svg>');
-  --svg-close: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M26.485 6.686L18 15.172 9.515 6.686a1 1 0 0 0-1.414 0L6.686 8.1a1 1 0 0 0 0 1.414L15.172 18l-8.486 8.485a1 1 0 0 0 0 1.414L8.1 29.314a1 1 0 0 0 1.414 0L18 20.828l8.485 8.486a1 1 0 0 0 1.414 0l1.415-1.414a1 1 0 0 0 0-1.414L20.828 18l8.486-8.485a1 1 0 0 0 0-1.414L27.9 6.686a1 1 0 0 0-1.415 0z"/></svg>');
-  --svg-close-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path class="a" d="M14.657,3.343a8,8,0,1,0-.00021,11.31371l.00021-.00021A8,8,0,0,0,14.657,3.343Zm-1.3435,9.265-.707.7055a.6.6,0,0,1-.84853.00147l-.00147-.00147L9,10.5555l-2.758,2.758a.6.6,0,0,1-.84853.00147L5.392,13.3135l-.7045-.7075a.6.6,0,0,1-.00147-.84853L4.6875,11.756,7.4445,9,4.6875,6.242A.6.6,0,0,1,4.686,5.39347L4.6875,5.392l.707-.707A.6.6,0,0,1,6.243,4.68353L6.2445,4.685,9,7.444l2.758-2.7575a.6.6,0,0,1,.84853-.00147l.00147.00147.707.707a.6.6,0,0,1,.00147.84853L13.315,6.2435,10.5555,9l2.758,2.758a.6.6,0,0,1,.00147.84853Z" /></svg>');
-  --svg-checkbox-small: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M3.78809,9A.999.999,0,0,1,3,8.61523L.71191,5.61508A.9998.9998,0,1,1,2.28808,4.38461l1.5,1.99137L7.71192,1.385A.9998.9998,0,1,1,9.28809,2.61549L4.57617,8.61523A.999.999,0,0,1,3.78809,9Z" /></svg>');
-  --svg-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 16 16"><path d="M4,7.01a1,1,0,0,1,1.7055-.7055l3.289,3.286,3.289-3.286a1,1,0,0,1,1.437,1.3865l-.0245.0245L9.7,11.7075a1,1,0,0,1-1.4125,0L4.293,7.716A.9945.9945,0,0,1,4,7.01Z" /></svg>');
-  --svg-chevron-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 16 16"><path d="M6,9a.994.994,0,0,0,.2925.7045l3.9915,3.99a1,1,0,1,0,1.4355-1.386l-.0245-.0245L8.4095,9l3.286-3.285A1,1,0,0,0,10.309,4.28l-.0245.0245L6.293,8.2945A.994.994,0,0,0,6,9Z" /></svg>');
-  --svg-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 16 16"><path d="M12,9a.994.994,0,0,1-.2925.7045l-3.9915,3.99a1,1,0,1,1-1.4355-1.386l.0245-.0245L9.5905,9,6.3045,5.715A1,1,0,0,1,7.691,4.28l.0245.0245,3.9915,3.99A.994.994,0,0,1,12,9Z" /></svg>');
-  --svg-chevron-double-left: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 16 16"><path d="M3,9a.994.994,0,0,0,.2925.7045l3.9915,3.99a1,1,0,1,0,1.4355-1.386L8.695,12.284,5.4095,9l3.286-3.285A1,1,0,0,0,7.309,4.28l-.0245.0245L3.293,8.2945A.994.994,0,0,0,3,9Z"/><path d="M9,9a.994.994,0,0,0,.2925.7045l3.9915,3.99a1,1,0,1,0,1.4355-1.386l-.0245-.0245L11.4095,9l3.286-3.285A1,1,0,0,0,13.309,4.28l-.0245.0245L9.293,8.2945A.994.994,0,0,0,9,9Z"/></svg>');
-  --svg-chevron-double-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 16 16"><path d="M15,9a.994.994,0,0,1-.2925.7045l-3.9915,3.99a1,1,0,1,1-1.4355-1.386l.0245-.0245L12.5905,9,9.3045,5.715A1,1,0,0,1,10.691,4.28l.0245.0245,3.9915,3.99A.994.994,0,0,1,15,9Z"/><path d="M9,9a.994.994,0,0,1-.2925.7045l-3.9915,3.99a1,1,0,1,1-1.436-1.385l.0245-.0245L6.5905,9,3.3045,5.715A1,1,0,0,1,4.6915,4.28l.0245.0245,3.9915,3.99A.994.994,0,0,1,9,9Z"/></svg>');
-  --svg-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path class="a" d="M15.473,1H1.527a.5.5,0,0,0-.3935.8085L7,9.2945V16.95a.496.496,0,0,0,.84.412l1.9905-2.0765A.60949.60949,0,0,0,10,14.864V9.2945l5.8665-7.486A.5.5,0,0,0,15.473,1Z" /></svg>');
-  --svg-tree-node-collapse: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M2,2.5v13a.5.5,0,0,0,.5.5h13a.5.5,0,0,0,.5-.5V2.5a.5.5,0,0,0-.5-.5H2.5A.5.5,0,0,0,2,2.5ZM5.25,10A.25.25,0,0,1,5,9.75V8.25A.25.25,0,0,1,5.25,8h7.5a.25.25,0,0,1,.25.25v1.5a.25.25,0,0,1-.25.25Z" /></svg>');
-  --svg-tree-node-expand: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M2,2.5v13a.5.5,0,0,0,.5.5h13a.5.5,0,0,0,.5-.5V2.5a.5.5,0,0,0-.5-.5H2.5A.5.5,0,0,0,2,2.5ZM12.75,10H10v2.75a.25.25,0,0,1-.25.25H8.25A.25.25,0,0,1,8,12.75V10H5.25A.25.25,0,0,1,5,9.75V8.25A.25.25,0,0,1,5.25,8H8V5.25A.25.25,0,0,1,8.25,5h1.5a.25.25,0,0,1,.25.25V8h2.75a.25.25,0,0,1,.25.25v1.5A.25.25,0,0,1,12.75,10Z" /></svg>');
-  --svg-caret-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon points="12,8 22,16 12,24 "/></svg>');
-  --svg-caret-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon points="12,8 22,16 12,24 "/></svg>');
-  --svg-triangle-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M3.5 1l5 5-5 5z"/></svg>');
-  --svg-triangle-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M11 3.5l-5 5-5-5z"/></svg>');
-  --svg-folder-closed: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1 12v-1h9.998l-0-6.001h-9.999l0.001 7.001h-1v-11h4.117l2 1h5.883v1h-0.002v9h-10.998zM5.881 3l-2-1h-2.882v1.999h9.999l0-0.999h-5.117z"/></svg>');
-  --svg-folder-open: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M1 10l3-6h7v-1h1v9h-12v-11h4.118l2 1h4.882v1h-5.118l-2-1h-2.882v8z"/></svg>');
-  --svg-logout: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect height="9" rx="0.5" width="2" x="8" /><path d="M12.6075,2.5315l-.57.9115a.505.505,0,0,0,.1685.692,5.869,5.869,0,1,1-6.41,0,.5.5,0,0,0,.16917-.68657L5.964,3.4465,5.392,2.531a.5.5,0,0,0-.68667-.16877L4.7,2.3655a7.95,7.95,0,1,0,8.5955,0,.5.5,0,0,0-.68753.16523Z" /></svg>');
-  --svg-rings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M13.995,6.603c0-.035.005-.0685.005-.103a5.5,5.5,0,0,0-11,0c0,.0345.0045.068.005.103A5.497,5.497,0,1,0,8.5,16.1065,5.497,5.497,0,1,0,13.995,6.603ZM8.5,14.832a4.46248,4.46248,0,0,1-1.47-3.0365,5.38556,5.38556,0,0,0,2.94,0A4.46248,4.46248,0,0,1,8.5,14.832ZM8.5,11a4.45,4.45,0,0,1-1.424-.25A4.46452,4.46452,0,0,1,8.5,8.168a4.46448,4.46448,0,0,1,1.424,2.58A4.45014,4.45014,0,0,1,8.5,11Zm-2.368-.688A4.48049,4.48049,0,0,1,4.076,7.25,4.45,4.45,0,0,1,5.5,7a4.44988,4.44988,0,0,1,2.154.572A5.489,5.489,0,0,0,6.132,10.312Zm3.214-2.74a4.265,4.265,0,0,1,3.578-.32,4.4805,4.4805,0,0,1-2.056,3.06A5.489,5.489,0,0,0,9.346,7.572ZM8.5,2a4.4865,4.4865,0,0,1,4.47,4.205,5.45,5.45,0,0,0-4.47.6885A5.45,5.45,0,0,0,4.03,6.205,4.4865,4.4865,0,0,1,8.5,2Zm-3,14A4.4905,4.4905,0,0,1,3.132,7.688,5.50548,5.50548,0,0,0,6.005,11.4c0,.0345-.005.068-.005.1a5.4805,5.4805,0,0,0,1.654,3.928A4.447,4.447,0,0,1,5.5,16Zm6,0a4.447,4.447,0,0,1-2.154-.572A5.4805,5.4805,0,0,0,11,11.5c0-.0345-.0045-.068-.005-.1a5.5055,5.5055,0,0,0,2.873-3.7095A4.4905,4.4905,0,0,1,11.5,16Z" /></svg>');
-  --svg-settings: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path class="fill" d="M16.45,7.8965H14.8945a5.97644,5.97644,0,0,0-.921-2.2535L15.076,4.54a.55.55,0,0,0,.00219-.77781L15.076,3.76l-.8365-.836a.55.55,0,0,0-.77781-.00219L13.4595,2.924,12.357,4.0265a5.96235,5.96235,0,0,0-2.2535-.9205V1.55a.55.55,0,0,0-.55-.55H8.45a.55.55,0,0,0-.55.55V3.106a5.96235,5.96235,0,0,0-2.2535.9205l-1.1-1.1025a.55.55,0,0,0-.77781-.00219L3.7665,2.924,2.924,3.76a.55.55,0,0,0-.00219.77781L2.924,4.54,4.0265,5.643a5.97644,5.97644,0,0,0-.921,2.2535H1.55a.55.55,0,0,0-.55.55V9.55a.55.55,0,0,0,.55.55H3.1055a5.967,5.967,0,0,0,.921,2.2535L2.924,13.4595a.55.55,0,0,0-.00219.77782l.00219.00218.8365.8365a.55.55,0,0,0,.77781.00219L4.5405,15.076,5.643,13.9735a5.96235,5.96235,0,0,0,2.2535.9205V16.45a.55.55,0,0,0,.55.55H9.55a.55.55,0,0,0,.55-.55V14.894a5.96235,5.96235,0,0,0,2.2535-.9205L13.456,15.076a.55.55,0,0,0,.77782.00219L14.236,15.076l.8365-.8365a.55.55,0,0,0,.00219-.77781l-.00219-.00219L13.97,12.357a5.967,5.967,0,0,0,.921-2.2535H16.45a.55.55,0,0,0,.55-.55V8.45a.55.55,0,0,0-.54649-.55349ZM11.207,9A2.207,2.207,0,1,1,9,6.793H9A2.207,2.207,0,0,1,11.207,9Z" /></svg>');
-  --svg-sort-order-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect class="a" height="2" rx="0.5" width="6" x="1" y="12" /><rect class="a" height="2" rx="0.5" width="8" x="1" y="8" /><rect class="a" height="2" rx="0.5" width="10" x="1" y="4" /><path class="a" d="M16,12H14.9965V4.5a.494.494,0,0,0-.488-.5L14.503,4h-.496a.5.5,0,0,0-.5.5L13.5035,12H12.5a.25.25,0,0,0-.25.25.245.245,0,0,0,.0735.175l1.7685,2.0165a.25.25,0,0,0,.316,0l1.7685-2.0165a.245.245,0,0,0,.0735-.175A.25.25,0,0,0,16,12Z" /></svg>');
-  --svg-sorted-asc: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 18 15"><path d="M9,2a.497.497,0,0,0-.3735.168l-5.5,5A.48949.48949,0,0,0,3,7.497.5.5,0,0,0,3.497,8H14.5a.5.5,0,0,0,.5-.5V7.497a.48949.48949,0,0,0-.1275-.329l-5.5-5A.5.5,0,0,0,9,2Z" /></svg>');
-  --svg-sorted-dsc: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 3 18 18"><path d="M9,16a.5.5,0,0,0,.3735-.168l5.5-5A.48949.48949,0,0,0,15,10.503.5.5,0,0,0,14.503,10H3.5a.5.5,0,0,0-.5.5v.003a.48949.48949,0,0,0,.1275.329l5.5,5A.497.497,0,0,0,9,16Z" /></svg>');
-  --svg-user: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16.4745,17a.4965.4965,0,0,0,.50089-.49207q.00015-.01724-.00089-.03443c-.3305-3.592-4.0135-4.8155-5.139-4.9135C11.013,11.4885,11,10.826,11,10a7.51507,7.51507,0,0,0,1.766-4.479C12.766,2.8085,11.2225,1,9,1S5.234,2.8085,5.234,5.521A7.51507,7.51507,0,0,0,7,10c0,.826-.013,1.4885-.837,1.56-1.1255.1-4.8085,1.3215-5.139,4.9135a.49649.49649,0,0,0,.46557.52561q.01719.001.03443.00089Z" /></svg>');
-  --svg-grab-handle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">  <circle cx="7" cy="13" r="1"/><circle cx="7" cy="10" r="1"/><circle cx="7" cy="7" r="1"/><circle cx="7" cy="4" r="1"/><circle cx="10" cy="13" r="1"/><circle cx="10" cy="10" r="1"/><circle cx="10" cy="7" r="1"/><circle cx="10" cy="4" r="1"/></svg>');
-  --svg-column-2A: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16,1H10V17h6a1,1,0,0,0,1-1V2A1,1,0,0,0,16,1Z" /><path d="M8,1H2A1,1,0,0,0,1,2V16a1,1,0,0,0,1,1H8Z" /></svg>');
-  --svg-column-2B: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16,1H13V17h3a1,1,0,0,0,1-1V2A1,1,0,0,0,16,1Z" /><path d="M11,1H2A1,1,0,0,0,1,2V16a1,1,0,0,0,1,1h9Z" /></svg>');
-  --svg-arrow-thin: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M17.75,8.04h-14L8.72,3.07a.48349.48349,0,0,0,.01642-.68357L8.72,2.37l-.35-.36a.5135.5135,0,0,0-.71,0L1.24,8.44a.5135.5135,0,0,0,0,.71l6.39,6.84a.5135.5135,0,0,0,.71,0l.35-.35a.5135.5135,0,0,0,0-.71L3.76,9.5H17.75A.25.25,0,0,0,18,9.25V8.29A.25.25,0,0,0,17.75,8.04Z" /></svg>');
-  --svg-open-in: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16.5,1H1.5a.5.5,0,0,0-.5.5v7a.5.5,0,0,0,.5.5h1A.5.5,0,0,0,3,8.5V3H15V15H9.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h7a.5.5,0,0,0,.5-.5V1.5A.5.5,0,0,0,16.5,1Z" /><path d="M9.318,13.882A.39051.39051,0,0,0,9.6,14a.4.4,0,0,0,.4-.377V8.25A.25.25,0,0,0,9.75,8H4.377A.4.4,0,0,0,4,8.4a.392.392,0,0,0,.1175.28l1.893,1.893-4.521,4.523a.5.5,0,0,0-.00039.70711l.00039.00039.707.707a.5.5,0,0,0,.707,0l4.5215-4.521Z" /></svg>');
-  --svg-sort-up: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><rect height="2" rx="0.5" width="6" x="1" y="4" /><rect height="2" rx="0.5" width="8" x="1" y="8" /><rect height="2" rx="0.5" width="10" x="1" y="12" /><path d="M15.99951,6H14.99634v7.5a.49378.49378,0,0,1-.49317.5h-.49633a.5.5,0,0,1-.5-.49951L13.50366,6H12.50049A.24984.24984,0,0,1,12.25,5.74823a.24439.24439,0,0,1,.07373-.175L14.0918,3.5564a.25007.25007,0,0,1,.3164,0l1.76807,2.01684a.24439.24439,0,0,1,.07373.175A.24984.24984,0,0,1,15.99951,6Z" /></svg>');
-  --svg-plus-box: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M22.5 34h3v-8.5H34v-3h-8.5V14h-3v8.5H14v3h8.5ZM9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h30q1.2 0 2.1.9.9.9.9 2.1v30q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h30V9H9v30ZM9 9v30V9Z"/></svg>');
-  --svg-minus-box: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M12.5 25.4h23.05v-3H12.5ZM9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h30q1.2 0 2.1.9.9.9.9 2.1v30q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h30V9H9v30ZM9 9v30V9Z"/></svg>');
-  --vuu-icon-size: 12px;
-}
-
-span[data-icon]{
-  display: inline-block;
-  height: var(--vuu-icon-height, var(--vuu-icon-size,18px));
-  position: relative;
-  width: var(--vuu-icon-width, var(--vuu-icon-size, 18px));
-}
-
-[data-icon]:after {
-  content: "";
-  background-color: var(--vuu-icon-color, black);
-  left: var(--vuu-icon-left, auto);
-  height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
-  -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
-  mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  position: absolute;
-  top: var(--vuu-icon-top, auto);
-  width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
-}
-
-[data-icon='filter'] {
-  --vuu-icon-svg: var(--svg-filter);
-}
-
-[data-icon='sort-up'] {
-  --vuu-icon-svg: var(--svg-sort-up);
-}
-
-[data-icon='arrow-thin-left'] {
-  --vuu-icon-svg: var(--svg-arrow-thin);
-}
-
-[data-icon='arrow-thin-right'] {
-  --vuu-icon-svg: var(--svg-arrow-thin);
-  transform: rotate(180deg);
-}
-
-[data-icon='arrow-thin-up'] {
-  --vuu-icon-svg: var(--svg-arrow-thin);
-  transform: rotate(90deg);
-}
-[data-icon='arrow-thin-down'] {
-  --vuu-icon-svg: var(--svg-arrow-thin);
-  transform: rotate(270deg);
-}
-
-[data-icon='box'] {
-  --vuu-icon-svg: var(--svg-box);
-}
-
-[data-icon='chevron-double-right'] {
-  --vuu-icon-svg: var(--svg-chevron-double-right);
-}
-
-[data-icon='close'] {
-  --vuu-icon-svg: var(--vuu-close-icon-svg, var(--svg-close));
-}
-
-
-[data-icon='rings'] {
-  --vuu-icon-svg: var(--svg-rings);
-}
-
-[data-icon='open-in'] {
-  --vuu-icon-svg: var(--svg-open-in);
-}
-
-[data-icon='close-circle'] {
-  --vuu-icon-svg: var(--svg-close-circle);
-}
-
-[data-icon='chevron-double-left'] {
-  --vuu-icon-svg: var(--svg-chevron-double-left);
-}
-
-[data-icon='chevron-double-right'] {
-  --vuu-icon-svg: var(--svg-chevron-double-right);
-}
-
-[data-icon='column-2A'] {
-  --vuu-icon-svg: var(--svg-column-2A);
-}
-
-[data-icon='column-2B'] {
-  --vuu-icon-svg: var(--svg-column-2B);
-}
-
-:is([data-icon='folder'], [data-icon='folder-closed']) {
-  --vuu-icon-svg: var(--svg-folder-closed);
-}
-
-[data-icon='settings'] {
-  --vuu-icon-svg: var(--svg-settings);
-}
-
-[data-icon='sorted-asc'] {
-  --vuu-icon-svg: var(--svg-sorted-asc);
-}
-
-[data-icon='sorted-dsc'] {
-  --vuu-icon-svg: var(--svg-sorted-dsc);
-}
-
-[data-icon='triangle-right'] {
-  --vuu-icon-svg: var(--svg-triangle-right);
-}
-
-[data-icon='user'] {
-  --vuu-icon-svg: var(--svg-user);
-}