@vuu-ui/vuu-theme 0.0.27

package/css/foundations/palette.css

@@ -0,0 +1,284 @@
+/* Opacities */
+.uitk-theme {
+  --uitk-palette-opacity-background: var(--uitk-opacity-2);
+  --uitk-palette-opacity-border: var(--uitk-opacity-2);
+  --uitk-palette-opacity-border-readonly: var(--uitk-opacity-1);
+  --uitk-palette-opacity-fill: var(--uitk-opacity-2);
+  --uitk-palette-opacity-foreground: var(--uitk-opacity-3);
+  --uitk-palette-opacity-scrim-low: var(--uitk-opacity-4);
+  --uitk-palette-opacity-stroke: var(--uitk-opacity-2);
+}
+
+.uitk-theme[data-mode="light"] {
+  --uitk-palette-opacity-scrim-medium: var(--uitk-opacity-4);
+}
+
+.uitk-theme[data-mode="dark"] {
+  --uitk-palette-opacity-scrim-medium: var(--uitk-opacity-3);
+}
+
+.uitk-theme[data-mode="light"] {
+  /* Accent */
+  --uitk-palette-accent-background: var(--uitk-color-blue-500);
+  --uitk-palette-accent-border: var(--uitk-color-blue-500);
+  --uitk-palette-accent-foreground: var(--uitk-color-white);
+
+  /* Interact */
+  --uitk-palette-interact-background-high: var(--uitk-color-grey-20);
+  --uitk-palette-interact-background-disabled-high: var(--uitk-color-grey-20-fade-background);
+  --uitk-palette-interact-background-low: transparent;
+  --uitk-palette-interact-background-medium: var(--uitk-color-white);
+  --uitk-palette-interact-background-disabled-medium: var(--uitk-color-white-fade-background);
+  --uitk-palette-interact-background-blurSelected: var(--uitk-color-grey-30);
+  --uitk-palette-interact-background-hover: var(--uitk-color-blue-20);
+  --uitk-palette-interact-background-active: var(--uitk-color-blue-500);
+  --uitk-palette-interact-border: var(--uitk-color-grey-90);
+  --uitk-palette-interact-border-active: var(--uitk-color-blue-600);
+  --uitk-palette-interact-border-activeDisabled: var(--uitk-color-blue-600-fade-fill);
+  --uitk-palette-interact-border-disabled: var(--uitk-color-grey-90-fade-border);
+  --uitk-palette-interact-border-hover: var(--uitk-color-blue-500);
+  --uitk-palette-interact-border-readonly: var(--uitk-color-grey-90-fade-border-readonly);
+  --uitk-palette-interact-foreground: var(--uitk-color-grey-900);
+  --uitk-palette-interact-foreground-active: var(--uitk-color-white);
+  --uitk-palette-interact-foreground-blurSelected: var(--uitk-color-grey-900);
+  --uitk-palette-interact-foreground-disabled: var(--uitk-color-grey-900-fade-foreground);
+  --uitk-palette-interact-foreground-hover: var(--uitk-color-grey-900);
+  --uitk-palette-interact-foreground-partial: var(--uitk-color-blue-600);
+  --uitk-palette-interact-foreground-partialDisabled: var(--uitk-color-blue-600-fade-foreground);
+  --uitk-palette-interact-foreground-activeDisabled: var(--uitk-color-white-fade-foreground);
+
+  --uitk-palette-interact-cta-background: var(--uitk-color-blue-600);
+  --uitk-palette-interact-cta-background-active: var(--uitk-color-blue-700);
+  --uitk-palette-interact-cta-background-activeDisabled: var(--uitk-color-blue-700-fade-background);
+  --uitk-palette-interact-cta-background-disabled: var(--uitk-color-blue-600-fade-background);
+  --uitk-palette-interact-cta-background-hover: var(--uitk-color-blue-500);
+  --uitk-palette-interact-cta-foreground: var(--uitk-color-white);
+  --uitk-palette-interact-cta-foreground-active: var(--uitk-color-white);
+  --uitk-palette-interact-cta-foreground-activeDisabled: var(--uitk-color-white-fade-foreground);
+  --uitk-palette-interact-cta-foreground-disabled: var(--uitk-color-white-fade-foreground);
+  --uitk-palette-interact-cta-foreground-hover: var(--uitk-color-white);
+  --uitk-palette-interact-primary-background: var(--uitk-color-grey-60);
+  --uitk-palette-interact-primary-background-active: var(--uitk-color-grey-200);
+  --uitk-palette-interact-primary-background-activeDisabled: var(--uitk-color-grey-200-fade-background);
+  --uitk-palette-interact-primary-background-disabled: var(--uitk-color-grey-60-fade-background);
+  --uitk-palette-interact-primary-background-hover: var(--uitk-color-grey-40);
+  --uitk-palette-interact-primary-foreground: var(--uitk-color-grey-900);
+  --uitk-palette-interact-primary-foreground-active: var(--uitk-color-white);
+  --uitk-palette-interact-primary-foreground-activeDisabled: var(--uitk-color-white-fade-foreground);
+  --uitk-palette-interact-primary-foreground-disabled: var(--uitk-color-grey-900-fade-foreground);
+  --uitk-palette-interact-primary-foreground-hover: var(--uitk-color-grey-900);
+  --uitk-palette-interact-secondary-background: transparent;
+  --uitk-palette-interact-secondary-background-active: var(--uitk-color-grey-200);
+  --uitk-palette-interact-secondary-background-activeDisabled: var(--uitk-color-grey-200-fade-background);
+  --uitk-palette-interact-secondary-background-disabled: transparent;
+  --uitk-palette-interact-secondary-background-hover: var(--uitk-color-grey-40);
+  --uitk-palette-interact-secondary-foreground: var(--uitk-color-grey-900);
+  --uitk-palette-interact-secondary-foreground-active: var(--uitk-color-white);
+  --uitk-palette-interact-secondary-foreground-activeDisabled: var(--uitk-color-white-fade-foreground);
+  --uitk-palette-interact-secondary-foreground-disabled: var(--uitk-color-grey-900-fade-foreground);
+  --uitk-palette-interact-secondary-foreground-hover: var(--uitk-color-grey-900);
+
+  /* States - error, info, success, warning */
+  --uitk-palette-error-background-high: var(--uitk-color-red-10);
+  --uitk-palette-error-border: var(--uitk-color-red-500);
+  --uitk-palette-error-icon: var(--uitk-color-red-500);
+  --uitk-palette-info-background-high: var(--uitk-color-blue-10);
+  --uitk-palette-info-border: var(--uitk-color-blue-500);
+  --uitk-palette-info-icon: var(--uitk-color-blue-500);
+  --uitk-palette-success-background-high: var(--uitk-color-green-10);
+  --uitk-palette-success-border: var(--uitk-color-green-500);
+  --uitk-palette-success-icon: var(--uitk-color-green-500);
+  --uitk-palette-warning-background-high: var(--uitk-color-orange-10);
+  --uitk-palette-warning-border: var(--uitk-color-orange-500);
+  --uitk-palette-warning-icon: var(--uitk-color-orange-500);
+
+  /* Measure */
+  --uitk-palette-measured-fill: var(--uitk-color-blue-500);
+  --uitk-palette-measured-fill-disabled: var(--uitk-color-blue-500-fade-fill);
+  --uitk-palette-measured-foreground: var(--uitk-color-grey-90);
+  --uitk-palette-measured-foreground-active: var(--uitk-color-blue-500);
+  --uitk-palette-measured-foreground-disabled: var(--uitk-color-grey-90-fade-foreground);
+  --uitk-palette-measured-foreground-activeDisabled: var(--uitk-color-blue-500-fade-fill);
+  --uitk-palette-measured-background: var(--uitk-color-grey-60);
+  --uitk-palette-measured-background-disabled: var(--uitk-color-grey-60-fade-background);
+  --uitk-palette-measured-border: var(--uitk-color-grey-90);
+  --uitk-palette-measured-border-disabled: var(--uitk-color-grey-90-fade-border);
+
+  /* Navigate */
+  --uitk-palette-navigate-background-low: transparent;
+  --uitk-palette-navigate-background-active-low: transparent;
+  --uitk-palette-navigate-background-high: transparent;
+  --uitk-palette-navigate-background-active-high: transparent;
+  --uitk-palette-navigate-background-medium: transparent;
+  --uitk-palette-navigate-background-active-medium: transparent;
+  --uitk-palette-navigate-background-hover-high: var(--uitk-color-grey-30);
+  --uitk-palette-navigate-background-hover-low: var(--uitk-color-grey-20);
+  --uitk-palette-navigate-background-hover-medium: var(--uitk-color-grey-20);
+  --uitk-palette-navigate-foreground: var(--uitk-color-grey-400);
+  --uitk-palette-navigate-foreground-hover: var(--uitk-color-blue-600);
+  --uitk-palette-navigate-indicator-active: var(--uitk-color-orange-600);
+  --uitk-palette-navigate-indicator-hover: var(--uitk-color-grey-90);
+  --uitk-palette-navigate-indicator-activeDisabled: var(--uitk-color-grey-90-fade-border);
+
+  /* Negative */
+  --uitk-palette-negative-background: var(--uitk-color-red-40);
+  --uitk-palette-negative-foreground: var(--uitk-color-red-700);
+
+  /* Neutral */
+  --uitk-palette-neutral-background-high: var(--uitk-color-grey-20);
+  --uitk-palette-neutral-background-medium: var(--uitk-color-white);
+  --uitk-palette-neutral-background-low: transparent;
+  --uitk-palette-neutral-border-high: var(--uitk-color-grey-90);
+  --uitk-palette-neutral-border-low: var(--uitk-color-grey-30);
+  --uitk-palette-neutral-border-medium: var(--uitk-color-grey-60);
+  --uitk-palette-neutral-border-disabled-high: var(--uitk-color-grey-90-fade-border);
+  --uitk-palette-neutral-border-disabled-low: var(--uitk-color-grey-30-fade-border);
+  --uitk-palette-neutral-border-disabled-medium: var(--uitk-color-grey-60-fade-border);
+  --uitk-palette-neutral-highlight: var(--uitk-color-blue-30);
+  --uitk-palette-neutral-scrim-low: var(--uitk-color-white-fade-scrim-low);
+  --uitk-palette-neutral-scrim-medium: var(--uitk-color-black-fade-scrim-medium);
+
+  --uitk-palette-neutral-cta-border: var(--uitk-color-grey-90);
+  --uitk-palette-neutral-primary-border: var(--uitk-color-grey-60);
+  --uitk-palette-neutral-primary-foreground: var(--uitk-color-grey-900);
+  --uitk-palette-neutral-primary-foreground-disabled: var(--uitk-color-grey-900-fade-foreground);
+  --uitk-palette-neutral-secondary-border: transparent;
+  --uitk-palette-neutral-secondary-foreground: var(--uitk-color-grey-200);
+  --uitk-palette-neutral-secondary-foreground-disabled: var(--uitk-color-grey-200-fade-foreground);
+
+  /* Positive */
+  --uitk-palette-positive-background: var(--uitk-color-green-20);
+  --uitk-palette-positive-foreground: var(--uitk-color-green-700);
+}
+
+.uitk-theme[data-mode="dark"] {
+  /* Accent */
+  --uitk-palette-accent-background: var(--uitk-color-blue-500);
+  --uitk-palette-accent-border: var(--uitk-color-blue-500);
+  --uitk-palette-accent-foreground: var(--uitk-color-white);
+
+  /* Interact */
+  --uitk-palette-interact-background-high: var(--uitk-color-grey-700);
+  --uitk-palette-interact-background-disabled-high: var(--uitk-color-grey-700-fade-background);
+  --uitk-palette-interact-background-low: transparent;
+  --uitk-palette-interact-background-medium: var(--uitk-color-grey-800);
+  --uitk-palette-interact-background-disabled-medium: var(--uitk-color-grey-800-fade-background);
+  --uitk-palette-interact-background-active: var(--uitk-color-blue-500);
+  --uitk-palette-interact-background-blurSelected: var(--uitk-color-grey-600);
+  --uitk-palette-interact-background-hover: var(--uitk-color-blue-800);
+  --uitk-palette-interact-border: var(--uitk-color-grey-90);
+  --uitk-palette-interact-border-active: var(--uitk-color-blue-400);
+  --uitk-palette-interact-border-activeDisabled: var(--uitk-color-blue-400-fade-fill);
+  --uitk-palette-interact-border-disabled: var(--uitk-color-grey-90-fade-border);
+  --uitk-palette-interact-border-hover: var(--uitk-color-blue-500);
+  --uitk-palette-interact-border-readonly: var(--uitk-color-grey-90-fade-border-readonly);
+  --uitk-palette-interact-foreground: var(--uitk-color-white);
+  --uitk-palette-interact-foreground-active: var(--uitk-color-white);
+  --uitk-palette-interact-foreground-blurSelected: var(--uitk-color-white);
+  --uitk-palette-interact-foreground-disabled: var(--uitk-color-white-fade-foreground);
+  --uitk-palette-interact-foreground-hover: var(--uitk-color-white);
+  --uitk-palette-interact-foreground-partial: var(--uitk-color-blue-400);
+  --uitk-palette-interact-foreground-partialDisabled: var(--uitk-color-blue-400-fade-foreground);
+  --uitk-palette-interact-foreground-activeDisabled: var(--uitk-color-white-fade-foreground);
+
+  --uitk-palette-interact-cta-background: var(--uitk-color-blue-600);
+  --uitk-palette-interact-cta-background-active: var(--uitk-color-blue-700);
+  --uitk-palette-interact-cta-background-activeDisabled: var(--uitk-color-blue-700-fade-background);
+  --uitk-palette-interact-cta-background-disabled: var(--uitk-color-blue-600-fade-background);
+  --uitk-palette-interact-cta-background-hover: var(--uitk-color-blue-500);
+  --uitk-palette-interact-cta-foreground: var(--uitk-color-white);
+  --uitk-palette-interact-cta-foreground-active: var(--uitk-color-white);
+  --uitk-palette-interact-cta-foreground-activeDisabled: var(--uitk-color-white-fade-foreground);
+  --uitk-palette-interact-cta-foreground-disabled: var(--uitk-color-white-fade-foreground);
+  --uitk-palette-interact-cta-foreground-hover: var(--uitk-color-white);
+  --uitk-palette-interact-primary-background: var(--uitk-color-grey-300);
+  --uitk-palette-interact-primary-background-active: var(--uitk-color-grey-70);
+  --uitk-palette-interact-primary-background-activeDisabled: var(--uitk-color-grey-70-fade-background);
+  --uitk-palette-interact-primary-background-disabled: var(--uitk-color-grey-300-fade-background);
+  --uitk-palette-interact-primary-background-hover: var(--uitk-color-grey-200);
+  --uitk-palette-interact-primary-foreground: var(--uitk-color-white);
+  --uitk-palette-interact-primary-foreground-active: var(--uitk-color-grey-800);
+  --uitk-palette-interact-primary-foreground-activeDisabled: var(--uitk-color-grey-800-fade-foreground);
+  --uitk-palette-interact-primary-foreground-disabled: var(--uitk-color-white-fade-foreground);
+  --uitk-palette-interact-primary-foreground-hover: var(--uitk-color-white);
+  --uitk-palette-interact-secondary-background: transparent;
+  --uitk-palette-interact-secondary-background-active: var(--uitk-color-grey-70);
+  --uitk-palette-interact-secondary-background-activeDisabled: var(--uitk-color-grey-70-fade-background);
+  --uitk-palette-interact-secondary-background-disabled: transparent;
+  --uitk-palette-interact-secondary-background-hover: var(--uitk-color-grey-200);
+  --uitk-palette-interact-secondary-foreground: var(--uitk-color-white);
+  --uitk-palette-interact-secondary-foreground-active: var(--uitk-color-grey-800);
+  --uitk-palette-interact-secondary-foreground-activeDisabled: var(--uitk-color-grey-800-fade-foreground);
+  --uitk-palette-interact-secondary-foreground-disabled: var(--uitk-color-white-fade-foreground);
+  --uitk-palette-interact-secondary-foreground-hover: var(--uitk-color-white);
+
+  /* States - error, info, success, warning */
+  --uitk-palette-error-background-high: var(--uitk-color-red-900);
+  --uitk-palette-error-border: var(--uitk-color-red-500);
+  --uitk-palette-error-icon: var(--uitk-color-red-500);
+  --uitk-palette-info-background-high: var(--uitk-color-blue-900);
+  --uitk-palette-info-border: var(--uitk-color-blue-500);
+  --uitk-palette-info-icon: var(--uitk-color-blue-500);
+  --uitk-palette-success-background-high: var(--uitk-color-green-900);
+  --uitk-palette-success-border: var(--uitk-color-green-500);
+  --uitk-palette-success-icon: var(--uitk-color-green-500);
+  --uitk-palette-warning-background-high: var(--uitk-color-orange-900);
+  --uitk-palette-warning-border: var(--uitk-color-orange-500);
+  --uitk-palette-warning-icon: var(--uitk-color-orange-500);
+
+  /* Measure */
+  --uitk-palette-measured-fill: var(--uitk-color-blue-300);
+  --uitk-palette-measured-fill-disabled: var(--uitk-color-blue-300-fade-fill);
+  --uitk-palette-measured-foreground: var(--uitk-color-grey-90);
+  --uitk-palette-measured-foreground-active: var(--uitk-color-blue-300);
+  --uitk-palette-measured-foreground-disabled: var(--uitk-color-grey-90-fade-foreground);
+  --uitk-palette-measured-foreground-activeDisabled: var(--uitk-color-blue-300-fade-fill);
+  --uitk-palette-measured-background: var(--uitk-color-grey-300);
+  --uitk-palette-measured-background-disabled: var(--uitk-color-grey-300-fade-background);
+  --uitk-palette-measured-border: var(--uitk-color-grey-90);
+  --uitk-palette-measured-border-disabled: var(--uitk-color-grey-90-fade-border);
+
+  /* Navigate */
+  --uitk-palette-navigate-background-low: transparent;
+  --uitk-palette-navigate-background-active-low: transparent;
+  --uitk-palette-navigate-background-high: transparent;
+  --uitk-palette-navigate-background-active-high: transparent;
+  --uitk-palette-navigate-background-medium: transparent;
+  --uitk-palette-navigate-background-active-medium: transparent;
+  --uitk-palette-navigate-background-hover-high: var(--uitk-color-grey-600);
+  --uitk-palette-navigate-background-hover-low: var(--uitk-color-grey-700);
+  --uitk-palette-navigate-background-hover-medium: var(--uitk-color-grey-700);
+  --uitk-palette-navigate-foreground: var(--uitk-color-grey-90);
+  --uitk-palette-navigate-foreground-hover: var(--uitk-color-blue-200);
+  --uitk-palette-navigate-indicator-active: var(--uitk-color-orange-400);
+  --uitk-palette-navigate-indicator-hover: var(--uitk-color-grey-90);
+  --uitk-palette-navigate-indicator-activeDisabled: var(--uitk-color-grey-90-fade-border);
+
+  /* Negative */
+  --uitk-palette-negative-foreground: var(--uitk-color-red-300);
+
+  /* Neutral */
+  --uitk-palette-neutral-background-low: transparent;
+  --uitk-palette-neutral-background-high: var(--uitk-color-grey-700);
+  --uitk-palette-neutral-background-medium: var(--uitk-color-grey-800);
+  --uitk-palette-neutral-border-low: var(--uitk-color-grey-600);
+  --uitk-palette-neutral-border-medium: var(--uitk-color-grey-300);
+  --uitk-palette-neutral-border-high: var(--uitk-color-grey-90);
+  --uitk-palette-neutral-border-disabled-low: var(--uitk-color-grey-600-fade-border);
+  --uitk-palette-neutral-border-disabled-medium: var(--uitk-color-grey-300-fade-border);
+  --uitk-palette-neutral-border-disabled-high: var(--uitk-color-grey-90-fade-border);
+  --uitk-palette-neutral-highlight: var(--uitk-color-blue-700);
+  --uitk-palette-neutral-scrim-low: var(--uitk-color-black-fade-scrim-medium);
+  --uitk-palette-neutral-scrim-medium: var(--uitk-color-grey-800-fade-scrim-medium);
+
+  --uitk-palette-neutral-cta-border: var(--uitk-color-grey-90);
+  --uitk-palette-neutral-primary-border: var(--uitk-color-grey-300);
+  --uitk-palette-neutral-primary-foreground: var(--uitk-color-white);
+  --uitk-palette-neutral-primary-foreground-disabled: var(--uitk-color-white-fade-foreground);
+  --uitk-palette-neutral-secondary-border: transparent;
+  --uitk-palette-neutral-secondary-foreground: var(--uitk-color-grey-70);
+  --uitk-palette-neutral-secondary-foreground-disabled: var(--uitk-color-grey-70-fade-foreground);
+
+  /* Positive */
+  --uitk-palette-positive-foreground: var(--uitk-color-green-300);
+}

package/css/foundations/shadow.css

@@ -0,0 +1,17 @@
+.uitk-theme[data-mode="light"] {
+  --uitk-shadow-0: none;
+  --uitk-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --uitk-shadow-2: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --uitk-shadow-3: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
+  --uitk-shadow-4: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
+  --uitk-shadow-5: 0 12px 40px 5px rgba(0, 0, 0, 0.3);
+}
+
+.uitk-theme[data-mode="dark"] {
+  --uitk-shadow-0: none;
+  --uitk-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  --uitk-shadow-2: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+  --uitk-shadow-3: 0 4px 8px 0 rgba(0, 0, 0, 0.55);
+  --uitk-shadow-4: 0 6px 10px 0 rgba(0, 0, 0, 0.55);
+  --uitk-shadow-5: 0 12px 40px 5px rgba(0, 0, 0, 0.65);
+}

package/css/foundations/size.css

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

package/css/foundations/typography.css

@@ -0,0 +1,22 @@
+.uitk-density-touch,
+.uitk-density-low,
+.uitk-density-medium,
+.uitk-density-high {
+  --uitk-typography-fontFamily: uitk-sans;
+  --uitk-typography-fontFamily-code: "PT Mono";
+
+  --uitk-typography-lineHeight: 1.3;
+
+  --uitk-typography-fontWeight-light: 300;
+  --uitk-typography-fontWeight-regular: 400;
+  --uitk-typography-fontWeight-medium: 500;
+  --uitk-typography-fontWeight-semiBold: 600;
+  --uitk-typography-fontWeight-bold: 700;
+  --uitk-typography-fontWeight-extraBold: 800;
+}
+
+/* TODO add uitk top-level identifier */
+.uitk-theme {
+  font-family: var(--uitk-typography-fontFamily);
+  font-size: 14px;
+}

package/css/foundations/zindex.css

@@ -0,0 +1,15 @@
+.uitk-density-touch,
+.uitk-density-low,
+.uitk-density-medium,
+.uitk-density-high {
+  --uitk-zIndex-default: 1;
+  --uitk-zIndex-popout: 1000;
+  --uitk-zIndex-docked: 1050;
+  --uitk-zIndex-appheader: 1100;
+  --uitk-zIndex-drawer: 1200;
+  --uitk-zIndex-modal: 1300;
+  --uitk-zIndex-notification: 1400;
+  --uitk-zIndex-dragobject: 1420;
+  --uitk-zIndex-contextmenu: 1450;
+  --uitk-zIndex-tooltip: 1500;
+}

package/css/global.css

@@ -0,0 +1,34 @@
+/**
+ * Have some global styles to simulate more realistic app. Currently only for Storybook.
+ * We don't have a universal set of styling on each component, e.g. some component set font-family some don't.
+ *
+ * It would be nice to do these as a global reset, so each component doesn't need to set these.
+ * - font-family
+ * - line-height
+ * - background
+ * - color
+ */
+
+p {
+  font-size: var(--uitk-text-fontSize);
+}
+
+body {
+  font-family: "uitk-sans";
+}
+
+.uitk-theme[data-mode="light"] {
+  color-scheme: light;
+}
+
+.uitk-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

@@ -0,0 +1,70 @@
+.uitk-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-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-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-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-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-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-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>');
+}
+
+[data-icon]:after {
+  content: "";
+  background-color: black;
+  height: var(--vuu-icon-size);
+  inset: calc(50% - var(--vuu-icon-size) / 2) auto 0 calc(50% - var(--vuu-icon-size) / 2);
+  -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);
+  position: absolute;
+  width: var(--vuu-icon-size);
+}
+
+
+[data-icon='filter'] {
+  --vuu-icon-svg: var(--svg-filter);
+}
+
+[data-icon='user'] {
+  --vuu-icon-svg: var(--svg-user);
+}
+
+[data-icon='box'] {
+  --vuu-icon-svg: var(--svg-box);
+}
+
+[data-icon='rings'] {
+  --vuu-icon-svg: var(--svg-rings);
+}
+
+[data-icon='close'] {
+  --vuu-icon-svg: var(--svg-close);
+}
+
+[data-icon='close-circle'] {
+  --vuu-icon-svg: var(--svg-close-circle);
+}
+
+:is([data-icon='folder'], [data-icon='folder-closed']) {
+  --vuu-icon-svg: var(--svg-folder-closed);
+}

package/css/theme.css

@@ -0,0 +1,40 @@
+/**
+ * We're using url importing for now. When performance becomes a concern, we can always run a
+ * scripts to massage them into one. Or even split them to theme specific ones.
+ */
+
+/* Foundations (base values) */
+@import url(foundations/animation.css);
+@import url(foundations/color.css);
+@import url(foundations/delay.css);
+@import url(foundations/fade.css);
+@import url(foundations/icon.css);
+@import url(foundations/opacity.css);
+@import url(foundations/shadow.css);
+@import url(foundations/size.css);
+@import url(foundations/typography.css);
+@import url(foundations/zindex.css);
+
+/* Intermediate palette (refined colors) */
+@import url(foundations/palette.css);
+
+/* Each characteristic file references values from above foundations */
+@import url(characteristics/accent.css);
+@import url(characteristics/actionable.css);
+@import url(characteristics/container.css);
+@import url(characteristics/differential.css);
+@import url(characteristics/draggable.css);
+@import url(characteristics/target.css);
+@import url(characteristics/droptarget.css);
+@import url(characteristics/editable.css);
+@import url(characteristics/focused.css);
+@import url(characteristics/measured.css);
+@import url(characteristics/navigable.css);
+@import url(characteristics/overlayable.css);
+@import url(characteristics/selectable.css);
+@import url(characteristics/separable.css);
+@import url(characteristics/status.css);
+@import url(characteristics/taggable.css);
+@import url(characteristics/text.css);
+
+@import url(icons/icons.css);

package/index.css

@@ -0,0 +1,3 @@
+@import url(css/global.css);
+@import url(css/OpenSans.css);
+@import url(css/theme.css);

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@vuu-ui/vuu-theme",
+  "version": "0.0.27",
+  "license": "Apache-2.0",
+  "style": "index.css",
+  "files": [
+    "index.css",
+    "/css"
+  ],
+  "scripts": {
+    "build": "node ../../scripts/run-build.mjs"
+  }
+}