@vuu-ui/vuu-theme 0.0.27

package/css/characteristics/text.css

@@ -0,0 +1,184 @@
+.uitk-theme {
+  /* Body text (default), tokens that don't vary by density */
+  --uitk-text-base-lineHeight: var(--uitk-typography-lineHeight);
+  --uitk-text-fontFamily: var(--uitk-typography-fontFamily);
+  --uitk-text-fontWeight: var(--uitk-typography-fontWeight-regular);
+  --uitk-text-fontWeight-small: var(--uitk-typography-fontWeight-light);
+  --uitk-text-fontWeight-strong: var(--uitk-typography-fontWeight-semiBold);
+  --uitk-text-letterSpacing: 0;
+  --uitk-text-textAlign: left;
+  --uitk-text-textAlign-embedded: center;
+  --uitk-text-textDecoration: none;
+  --uitk-text-textTransform: none;
+
+  /* H1 */
+  --uitk-text-h1-fontWeight: var(--uitk-typography-fontWeight-bold);
+  --uitk-text-h1-fontWeight-small: var(--uitk-typography-fontWeight-light);
+  --uitk-text-h1-fontWeight-strong: var(--uitk-typography-fontWeight-extraBold);
+
+  /* H2 */
+  --uitk-text-h2-fontWeight: var(--uitk-typography-fontWeight-semiBold);
+  --uitk-text-h2-fontWeight-small: var(--uitk-typography-fontWeight-regular);
+  --uitk-text-h2-fontWeight-strong: var(--uitk-typography-fontWeight-extraBold);
+
+  /* H3 */
+  --uitk-text-h3-fontWeight: var(--uitk-typography-fontWeight-semiBold);
+  --uitk-text-h3-fontWeight-small: var(--uitk-typography-fontWeight-regular);
+  --uitk-text-h3-fontWeight-strong: var(--uitk-typography-fontWeight-extraBold);
+
+  /* H4 */
+  --uitk-text-h4-fontWeight: var(--uitk-typography-fontWeight-semiBold);
+  --uitk-text-h4-fontWeight-small: var(--uitk-typography-fontWeight-regular);
+  --uitk-text-h4-fontWeight-strong: var(--uitk-typography-fontWeight-extraBold);
+
+  /* Caption */
+  --uitk-text-caption-fontStyle: normal;
+  --uitk-text-caption-fontWeight: var(--uitk-typography-fontWeight-regular);
+  --uitk-text-caption-fontWeight-strong: var(--uitk-typography-fontWeight-semiBold);
+
+  /* Help text */
+  --uitk-text-help-fontStyle: italic;
+  --uitk-text-help-fontWeight: var(--uitk-typography-fontWeight-regular);
+
+  /* Figure text */
+  --uitk-text-figure1-fontSize: 56px;
+  --uitk-text-figure1-lineHeight: 74px;
+  --uitk-text-figure1-fontWeight: var(--uitk-typography-fontWeight-semiBold);
+
+  --uitk-text-figure2-fontSize: 36px;
+  --uitk-text-figure2-lineHeight: 48px;
+  --uitk-text-figure2-fontWeight: var(--uitk-typography-fontWeight-semiBold);
+
+  --uitk-text-figure3-lineHeight: 32px;
+  --uitk-text-figure3-fontSize: 24px;
+  --uitk-text-figure3-fontWeight: var(--uitk-typography-fontWeight-semiBold);
+
+  /* Colors */
+  --uitk-text-background: transparent;
+  --uitk-text-background-hover: transparent;
+  --uitk-text-background-selected: var(--uitk-palette-neutral-highlight);
+
+  --uitk-text-primary-foreground: var(--uitk-palette-neutral-primary-foreground);
+  --uitk-text-primary-foreground-hover: var(--uitk-palette-neutral-primary-foreground);
+  --uitk-text-primary-foreground-selected: var(--uitk-palette-neutral-primary-foreground);
+  --uitk-text-primary-foreground-disabled: var(--uitk-palette-neutral-primary-foreground-disabled);
+
+  --uitk-text-secondary-foreground: var(--uitk-palette-neutral-secondary-foreground);
+  --uitk-text-secondary-foreground-hover: var(--uitk-palette-neutral-secondary-foreground);
+  --uitk-text-secondary-foreground-selected: var(--uitk-palette-neutral-secondary-foreground);
+  --uitk-text-secondary-foreground-disabled: var(--uitk-palette-neutral-secondary-foreground-disabled);
+
+  /* Link */
+  --uitk-text-link-foreground-hover: var(--uitk-palette-navigate-foreground-hover);
+  --uitk-text-link-textDecoration: underline;
+  --uitk-text-link-textDecoration-hover: none;
+  --uitk-text-link-textDecoration-selected: underline;
+
+  /* Code */
+  --uitk-text-code-fontFamily: var(--uitk-typography-fontFamily-code);
+}
+
+/* Sizes by density */
+.uitk-density-touch {
+  --uitk-text-h1-fontSize: 42px;
+  --uitk-text-h1-lineHeight: auto;
+
+  --uitk-text-h2-fontSize: 32px;
+  --uitk-text-h2-lineHeight: 36px;
+
+  --uitk-text-h3-fontSize: 24px;
+  --uitk-text-h3-lineHeight: 26px;
+
+  --uitk-text-h4-fontSize: 16px;
+  --uitk-text-h4-lineHeight: 22px;
+
+  --uitk-text-caption-fontSize: 14px;
+  --uitk-text-caption-lineHeight: 16px;
+  --uitk-text-caption-minHeight: 16px;
+
+  --uitk-text-help-fontSize: 14px;
+  --uitk-text-help-lineHeight: 16px;
+  --uitk-text-help-minHeight: 16px;
+
+  --uitk-text-fontSize: 16px;
+  --uitk-text-lineHeight: 22px;
+  --uitk-text-minHeight: 20px;
+}
+
+.uitk-density-low {
+  --uitk-text-h1-fontSize: 32px;
+  --uitk-text-h1-lineHeight: 42px;
+
+  --uitk-text-h2-fontSize: 24px;
+  --uitk-text-h2-lineHeight: 32px;
+
+  --uitk-text-h3-fontSize: 18px;
+  --uitk-text-h3-lineHeight: 26px;
+
+  --uitk-text-h4-fontSize: 14px;
+  --uitk-text-h4-lineHeight: 18px;
+
+  --uitk-text-caption-fontSize: 12px;
+  --uitk-text-caption-lineHeight: 14px;
+  --uitk-text-caption-minHeight: 14px;
+
+  --uitk-text-help-fontSize: 12px;
+  --uitk-text-help-lineHeight: 14px;
+  --uitk-text-help-minHeight: 14px;
+
+  --uitk-text-fontSize: 14px;
+  --uitk-text-lineHeight: 18px;
+  --uitk-text-minHeight: 18px;
+}
+
+.uitk-density-medium {
+  --uitk-text-h1-fontSize: 24px;
+  --uitk-text-h1-lineHeight: 31px;
+
+  --uitk-text-h2-fontSize: 18px;
+  --uitk-text-h2-lineHeight: 24px;
+
+  --uitk-text-h3-fontSize: 14px;
+  --uitk-text-h3-lineHeight: 22px;
+
+  --uitk-text-h4-fontSize: 12px;
+  --uitk-text-h4-lineHeight: 16px;
+
+  --uitk-text-caption-fontSize: 11px;
+  --uitk-text-caption-lineHeight: 14px;
+  --uitk-text-caption-minHeight: 14px;
+
+  --uitk-text-help-fontSize: 11px;
+  --uitk-text-help-lineHeight: 14px;
+  --uitk-text-help-minHeight: 14px;
+
+  --uitk-text-fontSize: 12px;
+  --uitk-text-lineHeight: 16px;
+  --uitk-text-minHeight: 16px;
+}
+
+.uitk-density-high {
+  --uitk-text-h1-fontSize: 18px;
+  --uitk-text-h1-lineHeight: 24px;
+
+  --uitk-text-h2-fontSize: 14px;
+  --uitk-text-h2-lineHeight: 18px;
+
+  --uitk-text-h3-fontSize: 12px;
+  --uitk-text-h3-lineHeight: 16px;
+
+  --uitk-text-h4-fontSize: 11px;
+  --uitk-text-h4-lineHeight: 14px;
+
+  --uitk-text-caption-fontSize: 10px;
+  --uitk-text-caption-lineHeight: 14px;
+  --uitk-text-caption-minHeight: 14px;
+
+  --uitk-text-help-fontSize: 10px;
+  --uitk-text-help-lineHeight: 13px;
+  --uitk-text-help-minHeight: 14px;
+
+  --uitk-text-fontSize: 11px;
+  --uitk-text-lineHeight: 14px;
+  --uitk-text-minHeight: 14px;
+}

package/css/foundations/animation.css

@@ -0,0 +1,155 @@
+.uitk-density-touch,
+.uitk-density-low,
+.uitk-density-medium,
+.uitk-density-high {
+  --uitk-animation-opacity-start: 0;
+  --uitk-animation-opacity-end: 1;
+  --uitk-animation-scale-start: 0;
+  --uitk-animation-scale-end: 1;
+  --uitk-animation-transform-start: 100%;
+  --uitk-animation-transform-end: 0;
+  --uitk-animation-duration: 0.3s;
+  --uitk-animation-timing-function: ease-in;
+
+  /* Slide Animations */
+  --uitk-animation-slide-in-top: slide-in-top var(--uitk-animation-duration) var(--uitk-animation-timing-function);
+  --uitk-animation-slide-in-left: slide-in-left var(--uitk-animation-duration) var(--uitk-animation-timing-function);
+  --uitk-animation-slide-in-right: slide-in-right var(--uitk-animation-duration) var(--uitk-animation-timing-function);
+  --uitk-animation-slide-in-bottom: slide-in-bottom var(--uitk-animation-duration) var(--uitk-animation-timing-function);
+
+  --uitk-animation-slide-out-top: slide-out-top var(--uitk-animation-duration) var(--uitk-animation-timing-function);
+  --uitk-animation-slide-out-left: slide-out-left var(--uitk-animation-duration) var(--uitk-animation-timing-function);
+  --uitk-animation-slide-out-right: slide-out-right var(--uitk-animation-duration) var(--uitk-animation-timing-function);
+  --uitk-animation-slide-out-bottom: slide-out-bottom var(--uitk-animation-duration) var(--uitk-animation-timing-function);
+
+  /* Fade Animations */
+  --uitk-animation-fade-in-back: fade-in-back var(--uitk-animation-duration) var(--uitk-animation-timing-function);
+  --uitk-animation-fade-in-forward: fade-in-forward var(--uitk-animation-duration) var(--uitk-animation-timing-function);
+  --uitk-animation-fade-in-center: fade-in-center var(--uitk-animation-duration) var(--uitk-animation-timing-function);
+  --uitk-animation-fade-out-back: fade-out-back var(--uitk-animation-duration) ease-out both;
+}
+
+/*Slide keyframes */
+@keyframes slide-in-top {
+  0% {
+    opacity: var(--uitk-animation-opacity-start);
+    transform: translateY(var(--uitk-animation-transform-start));
+  }
+  100% {
+    opacity: var(--uitk-animation-opacity-end);
+    transform: translateY(var(--uitk-animation-transform-end));
+  }
+}
+@keyframes slide-out-top {
+  0% {
+    opacity: var(--uitk-animation-opacity-end);
+    transform: translateY(var(--uitk-animation-transform-end));
+  }
+  100% {
+    opacity: var(--uitk-animation-opacity-start);
+    transform: translateY(var(--uitk-animation-transform-start));
+  }
+}
+@keyframes slide-in-left {
+  0% {
+    opacity: var(--uitk-animation-opacity-start);
+    transform: translateX(calc(-1 * var(--uitk-animation-transform-start)));
+  }
+  100% {
+    opacity: var(--uitk-animation-opacity-end);
+    transform: translateX(var(--uitk-animation-transform-end));
+  }
+}
+@keyframes slide-out-left {
+  0% {
+    opacity: var(--uitk-animation-opacity-end);
+    transform: translateX(var(--uitk-animation-transform-end));
+  }
+  100% {
+    opacity: var(--uitk-animation-opacity-start);
+    transform: translateX(calc(-1 * var(--uitk-animation-transform-start)));
+  }
+}
+@keyframes slide-in-right {
+  0% {
+    opacity: var(--uitk-animation-opacity-start);
+    transform: translateX(var(--uitk-animation-transform-start));
+  }
+  100% {
+    opacity: var(--uitk-animation-opacity-end);
+    transform: translateX(var(--uitk-animation-transform-end));
+  }
+}
+@keyframes slide-out-right {
+  0% {
+    opacity: var(--uitk-animation-opacity-end);
+    transform: translateX(var(--uitk-animation-transform-end));
+  }
+  100% {
+    opacity: var(--uitk-animation-opacity-start);
+    transform: translateX(var(--uitk-animation-transform-start));
+  }
+}
+@keyframes slide-in-bottom {
+  0% {
+    opacity: var(--uitk-animation-opacity-start);
+    transform: translateY(calc(-1 * var(--uitk-animation-transform-start)));
+  }
+  100% {
+    opacity: var(--uitk-animation-opacity-end);
+    transform: translateY(var(--uitk-animation-transform-end));
+  }
+}
+@keyframes slide-out-bottom {
+  0% {
+    opacity: var(--uitk-animation-opacity-end);
+    transform: translateY(var(--uitk-animation-transform-end));
+  }
+  100% {
+    opacity: var(--uitk-animation-opacity-start);
+    transform: translateY(calc(-1 * var(--uitk-animation-transform-start)));
+  }
+}
+/* Fade keyframes */
+@keyframes fade-in-back {
+  0% {
+    --uitk-animation-scale-start: 1.4;
+    opacity: var(--uitk-animation-opacity-start);
+    transform: scale(var(--uitk-animation-scale-start));
+  }
+
+  100% {
+    opacity: var(--uitk-animation-opacity-end);
+    transform: scale(var(--uitk-animation-scale-end));
+  }
+}
+@keyframes fade-in-forward {
+  0% {
+    --uitk-animation-scale-start: 0.6;
+    opacity: var(--uitk-animation-opacity-start);
+    transform: scale(var(--uitk-animation-scale-start));
+  }
+
+  100% {
+    opacity: var(--uitk-animation-opacity-end);
+    transform: scale(var(--uitk-animation-scale-end));
+  }
+}
+@keyframes fade-in-center {
+  0% {
+    opacity: var(--uitk-animation-opacity-start);
+  }
+
+  100% {
+    opacity: var(--uitk-animation-opacity-end);
+  }
+}
+
+@keyframes fade-out-back {
+  0% {
+    opacity: var(--uitk-animation-opacity-end);
+  }
+  100% {
+    opacity: var(--uitk-animation-opacity-start);
+  }
+}

package/css/foundations/color.css

@@ -0,0 +1,114 @@
+.uitk-theme {
+  /* Color palette will stay the same no matter of theming */
+  --uitk-color-white: rgb(255, 255, 255);
+  --uitk-color-black: rgb(0, 0, 0);
+
+  --uitk-color-red-10: rgb(255, 227, 224);
+  --uitk-color-red-20: rgb(255, 207, 201);
+  --uitk-color-red-30: rgb(255, 187, 178);
+  --uitk-color-red-40: rgb(255, 167, 156);
+  --uitk-color-red-50: rgb(255, 148, 133);
+  --uitk-color-red-100: rgb(255, 128, 111);
+  --uitk-color-red-200: rgb(255, 108, 88);
+  --uitk-color-red-300: rgb(255, 89, 66);
+  --uitk-color-red-400: rgb(237, 65, 42);
+  --uitk-color-red-500: rgb(227, 43, 22);
+  --uitk-color-red-600: rgb(196, 32, 16);
+  --uitk-color-red-700: rgb(166, 21, 11);
+  --uitk-color-red-800: rgb(136, 10, 5);
+  --uitk-color-red-900: rgb(65, 37, 34);
+
+  --uitk-color-orange-10: rgb(255, 232, 191);
+  --uitk-color-orange-20: rgb(254, 223, 166);
+  --uitk-color-orange-30: rgb(254, 214, 142);
+  --uitk-color-orange-40: rgb(254, 205, 118);
+  --uitk-color-orange-50: rgb(254, 197, 94);
+  --uitk-color-orange-100: rgb(250, 181, 81);
+  --uitk-color-orange-200: rgb(246, 165, 68);
+  --uitk-color-orange-300: rgb(242, 149, 56);
+  --uitk-color-orange-400: rgb(238, 133, 43);
+  --uitk-color-orange-500: rgb(234, 115, 25);
+  --uitk-color-orange-600: rgb(224, 101, 25);
+  --uitk-color-orange-700: rgb(214, 85, 19);
+  --uitk-color-orange-800: rgb(204, 68, 13);
+  --uitk-color-orange-900: rgb(54, 44, 36);
+
+  --uitk-color-green-10: rgb(209, 244, 201);
+  --uitk-color-green-20: rgb(184, 232, 182);
+  --uitk-color-green-30: rgb(160, 221, 164);
+  --uitk-color-green-40: rgb(136, 210, 145);
+  --uitk-color-green-50: rgb(112, 199, 127);
+  --uitk-color-green-100: rgb(93, 189, 116);
+  --uitk-color-green-200: rgb(77, 180, 105);
+  --uitk-color-green-300: rgb(60, 171, 96);
+  --uitk-color-green-400: rgb(48, 156, 90);
+  --uitk-color-green-500: rgb(36, 135, 75);
+  --uitk-color-green-600: rgb(24, 114, 61);
+  --uitk-color-green-700: rgb(12, 93, 46);
+  --uitk-color-green-800: rgb(1, 73, 32);
+  --uitk-color-green-900: rgb(35, 52, 43);
+
+  --uitk-color-teal-10: rgb(218, 240, 240);
+  --uitk-color-teal-20: rgb(199, 232, 232);
+  --uitk-color-teal-30: rgb(180, 224, 225);
+  --uitk-color-teal-40: rgb(162, 217, 218);
+  --uitk-color-teal-50: rgb(141, 205, 209);
+  --uitk-color-teal-100: rgb(123, 193, 200);
+  --uitk-color-teal-200: rgb(99, 181, 192);
+  --uitk-color-teal-300: rgb(73, 160, 172);
+  --uitk-color-teal-400: rgb(48, 149, 166);
+  --uitk-color-teal-500: rgb(0, 130, 151);
+  --uitk-color-teal-600: rgb(27, 107, 133);
+  --uitk-color-teal-700: rgb(0, 85, 113);
+  --uitk-color-teal-800: rgb(1, 65, 86);
+  --uitk-color-teal-900: rgb(0, 49, 76);
+
+  --uitk-color-blue-10: rgb(203, 231, 249);
+  --uitk-color-blue-20: rgb(183, 222, 246);
+  --uitk-color-blue-30: rgb(164, 213, 244);
+  --uitk-color-blue-40: rgb(144, 204, 242);
+  --uitk-color-blue-50: rgb(125, 195, 240);
+  --uitk-color-blue-100: rgb(100, 177, 228);
+  --uitk-color-blue-200: rgb(75, 159, 216);
+  --uitk-color-blue-300: rgb(51, 141, 205);
+  --uitk-color-blue-400: rgb(46, 132, 198);
+  --uitk-color-blue-500: rgb(38, 112, 169);
+  --uitk-color-blue-600: rgb(21, 92, 147);
+  --uitk-color-blue-700: rgb(0, 71, 123);
+  --uitk-color-blue-800: rgb(39, 60, 77);
+  --uitk-color-blue-900: rgb(35, 47, 56);
+
+  --uitk-color-purple-10: rgb(249, 224, 247);
+  --uitk-color-purple-20: rgb(247, 212, 244);
+  --uitk-color-purple-30: rgb(245, 201, 241);
+  --uitk-color-purple-40: rgb(243, 189, 238);
+  --uitk-color-purple-50: rgb(241, 178, 235);
+  --uitk-color-purple-100: rgb(223, 156, 225);
+  --uitk-color-purple-200: rgb(205, 135, 215);
+  --uitk-color-purple-300: rgb(192, 116, 203);
+  --uitk-color-purple-400: rgb(169, 97, 181);
+  --uitk-color-purple-500: rgb(150, 78, 162);
+  --uitk-color-purple-600: rgb(129, 60, 141);
+  --uitk-color-purple-700: rgb(103, 46, 122);
+  --uitk-color-purple-800: rgb(83, 37, 109);
+  --uitk-color-purple-900: rgb(59, 16, 84);
+
+  --uitk-color-grey-10: rgb(242, 244, 246);
+  --uitk-color-grey-20: rgb(234, 237, 239);
+  --uitk-color-grey-30: rgb(224, 228, 233);
+  --uitk-color-grey-40: rgb(217, 221, 227);
+  --uitk-color-grey-50: rgb(206, 210, 217);
+  --uitk-color-grey-60: rgb(197, 201, 208);
+  --uitk-color-grey-70: rgb(180, 183, 190);
+  --uitk-color-grey-80: rgb(159, 163, 170);
+  --uitk-color-grey-90: rgb(132, 135, 142);
+  --uitk-color-grey-100: rgb(116, 119, 127);
+  --uitk-color-grey-200: rgb(97, 101, 110);
+  --uitk-color-grey-300: rgb(76, 80, 91);
+  --uitk-color-grey-400: rgb(68, 72, 79);
+  --uitk-color-grey-500: rgb(59, 63, 70);
+  --uitk-color-grey-600: rgb(47, 49, 54);
+  --uitk-color-grey-700: rgb(42, 44, 47);
+  --uitk-color-grey-800: rgb(36, 37, 38);
+  --uitk-color-grey-900: rgb(22, 22, 22);
+}

package/css/foundations/delay.css

@@ -0,0 +1,6 @@
+.uitk-theme {
+  --uitk-delay-instant: 100;
+  --uitk-delay-perceptible: 300;
+  --uitk-delay-notable: 1000;
+  --uitk-delay-cutoff: 10000;
+}

package/css/foundations/fade.css

@@ -0,0 +1,46 @@
+.uitk-theme {
+  --uitk-color-blue-30-fade-99: rgba(164, 213, 244, 0.99); /* see Editable characteristic for explanation of this value */
+  --uitk-color-blue-700-fade-99: rgba(0, 71, 123, 0.99); /* see Editable characteristic for explanation of this value */
+
+  --uitk-color-blue-400-fade-foreground: rgba(46, 132, 198, var(--uitk-palette-opacity-foreground));
+  --uitk-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--uitk-palette-opacity-foreground));
+  --uitk-color-grey-60-fade-foreground: rgba(197, 201, 208, var(--uitk-palette-opacity-foreground));
+  --uitk-color-grey-70-fade-foreground: rgba(180, 183, 190, var(--uitk-palette-opacity-foreground));
+  --uitk-color-grey-200-fade-foreground: rgba(97, 101, 110, var(--uitk-palette-opacity-foreground));
+  --uitk-color-grey-800-fade-foreground: rgba(36, 37, 38, var(--uitk-palette-opacity-foreground));
+  --uitk-color-grey-90-fade-foreground: rgba(132, 135, 142, var(--uitk-palette-opacity-foreground));
+  --uitk-color-grey-900-fade-foreground: rgba(22, 22, 22, var(--uitk-palette-opacity-foreground));
+  --uitk-color-white-fade-foreground: rgba(255, 255, 255, var(--uitk-palette-opacity-foreground));
+
+  --uitk-color-grey-30-fade-border: rgba(224, 228, 233, var(--uitk-palette-opacity-border));
+  --uitk-color-grey-60-fade-border: rgba(197, 201, 208, var(--uitk-palette-opacity-border));
+  --uitk-color-grey-90-fade-border: rgba(132, 135, 142, var(--uitk-palette-opacity-border));
+  --uitk-color-grey-300-fade-border: rgba(76, 80, 91, var(--uitk-palette-opacity-border));
+  --uitk-color-grey-600-fade-border: rgba(47, 49, 54, var(--uitk-palette-opacity-border));
+
+  --uitk-color-grey-90-fade-border-readonly: rgba(132, 135, 142, var(--uitk-palette-opacity-border-readonly));
+
+  --uitk-color-blue-600-fade-background: rgba(21, 92, 147, var(--uitk-palette-opacity-background));
+  --uitk-color-blue-700-fade-background: rgba(0, 71, 123, var(--uitk-palette-opacity-background));
+  --uitk-color-grey-20-fade-background: rgba(234, 237, 239, var(--uitk-palette-opacity-background));
+  --uitk-color-grey-60-fade-background: rgba(197, 201, 208, var(--uitk-palette-opacity-background));
+  --uitk-color-grey-70-fade-background: rgba(180, 183, 190, var(--uitk-palette-opacity-background));
+  --uitk-color-grey-200-fade-background: rgba(97, 101, 110, var(--uitk-palette-opacity-background));
+  --uitk-color-grey-300-fade-background: rgba(76, 80, 91, var(--uitk-palette-opacity-background));
+  --uitk-color-grey-700-fade-background: rgba(42, 44, 47, var(--uitk-palette-opacity-background));
+  --uitk-color-grey-800-fade-background: rgba(36, 37, 38, var(--uitk-palette-opacity-background));
+  --uitk-color-orange-400-fade-background: rgba(238, 133, 43, var(--uitk-palette-opacity-background));
+  --uitk-color-orange-600-fade-background: rgba(224, 101, 25, var(--uitk-palette-opacity-background));
+  --uitk-color-white-fade-background: rgba(255, 255, 255, var(--uitk-palette-opacity-background));
+
+  --uitk-color-black-fade-scrim-medium: rgba(0, 0, 0, var(--uitk-palette-opacity-scrim-low));
+  --uitk-color-grey-800-fade-scrim-medium: rgba(36, 37, 38, var(--uitk-palette-opacity-scrim-medium));
+  --uitk-color-white-fade-scrim-low: rgba(255, 255, 255, var(--uitk-palette-opacity-scrim-medium));
+
+  --uitk-color-grey-90-fade-stroke: rgba(132, 135, 142, var(--uitk-palette-opacity-stroke));
+
+  --uitk-color-blue-300-fade-fill: rgba(51, 141, 205, var(--uitk-palette-opacity-fill));
+  --uitk-color-blue-400-fade-fill: rgba(46, 132, 198, var(--uitk-palette-opacity-fill));
+  --uitk-color-blue-500-fade-fill: rgba(38, 112, 169, var(--uitk-palette-opacity-fill));
+  --uitk-color-blue-600-fade-fill: rgba(21, 92, 147, var(--uitk-palette-opacity-fill));
+}

package/css/foundations/icon.css

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

package/css/foundations/opacity.css

@@ -0,0 +1,6 @@
+.uitk-theme {
+  --uitk-opacity-1: 0.2;
+  --uitk-opacity-2: 0.4;
+  --uitk-opacity-3: 0.7;
+  --uitk-opacity-4: 0.8;
+}