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

package/css/deprecated/palette.css

@@ -0,0 +1,159 @@
+/*
+* **Deprecated:**
+* Delete below on breaking change
+*/
+
+.salt-theme {
+  --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
+  --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
+  --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
+  --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
+
+  --salt-palette-opacity-fill: var(--salt-palette-opacity-disabled);
+  --salt-palette-opacity-stroke: var(--salt-palette-opacity-disabled);
+  --salt-palette-opacity-background: var(--salt-palette-opacity-disabled);
+  --salt-palette-opacity-border: var(--salt-palette-opacity-disabled);
+  --salt-palette-opacity-foreground: var(--salt-palette-opacity-disabled);
+}
+
+.salt-theme[data-mode="light"] {
+  /* Interact */
+  --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-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
+  --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
+  --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
+  --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
+  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
+  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
+
+  /* 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);
+
+  /* Neutral */
+  --salt-palette-neutral-tertiary-background-readonly: transparent;
+
+  /* Status */
+  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
+  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
+  --salt-palette-error-foreground: var(--salt-color-red-500);
+
+  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
+  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
+  --salt-palette-info-foreground: var(--salt-color-blue-500);
+
+  --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
+
+  --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
+
+  --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
+  --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
+  --salt-palette-success-foreground: var(--salt-color-green-500);
+
+  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
+  --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
+  --salt-palette-warning-foreground: var(--salt-color-orange-700);
+
+  /* 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-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
+
+  /* Track */
+  --salt-palette-track-border: var(--salt-color-gray-90);
+  --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
+  --salt-palette-track-background: var(--salt-color-gray-60);
+  --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
+
+  /* Accent */
+  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
+  --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
+  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
+}
+
+.salt-theme[data-mode="dark"] {
+  /* Interact */
+  --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-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
+  --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
+  --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
+  --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
+  --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
+  --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
+
+  /* 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);
+
+  /* Neutral */
+  --salt-palette-neutral-tertiary-background-readonly: transparent;
+
+  /* Status */
+  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
+  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
+  --salt-palette-error-foreground: var(--salt-color-red-500);
+
+  --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
+  --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
+  --salt-palette-info-foreground: var(--salt-color-blue-500);
+
+  --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
+
+  --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
+
+  --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
+  --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
+  --salt-palette-success-foreground: var(--salt-color-green-400);
+
+  --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
+  --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
+  --salt-palette-warning-foreground: var(--salt-color-orange-500);
+
+  /* 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-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
+
+  /* Track */
+  --salt-palette-track-border: var(--salt-color-gray-90);
+  --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
+  --salt-palette-track-background: var(--salt-color-gray-300);
+  --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
+
+  /* Accent */
+  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
+  --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
+  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
+}

package/css/foundations/alpha-next.css

@@ -0,0 +1,48 @@
+/* 
+TODO: discuss whether this should be an actual file, or should inline these values.
+con: If we offer these values, then it could misleading that we're offering all these values
+ */
+.salt-theme.salt-theme-next {
+  --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
+  --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
+  --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
+  --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
+  --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
+  --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
+  --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
+  --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
+  --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
+  --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
+  --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
+  --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
+  --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
+  --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
+  --salt-color-gray-300-10a: rgba(var(--salt-color-gray-300-rgb), 0.1);
+  --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
+  --salt-color-gray-400-40a: rgba(var(--salt-color-gray-400-rgb), 0.4);
+  --salt-color-gray-500-10a: rgba(var(--salt-color-gray-500-rgb), 0.1);
+  --salt-color-gray-500-40a: rgba(var(--salt-color-gray-500-rgb), 0.4);
+  --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
+  --salt-color-gray-700-10a: rgba(var(--salt-color-gray-700-rgb), 0.1);
+  --salt-color-gray-700-40a: rgba(var(--salt-color-gray-700-rgb), 0.4);
+  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
+  --salt-color-blue-300-40a: rgba(var(--salt-color-blue-300-rgb), 0.4);
+  --salt-color-blue-400-40a: rgba(var(--salt-color-blue-400-rgb), 0.4);
+  --salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
+  --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
+  --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
+  --salt-color-blue-800-40a: rgba(var(--salt-color-blue-800-rgb), 0.4);
+  --salt-color-teal-200-40a: rgba(var(--salt-color-teal-200-rgb), 0.4);
+  --salt-color-teal-300-40a: rgba(var(--salt-color-teal-300-rgb), 0.4);
+  --salt-color-teal-400-40a: rgba(var(--salt-color-teal-400-rgb), 0.4);
+  --salt-color-teal-500-40a: rgba(var(--salt-color-teal-500-rgb), 0.4);
+  --salt-color-teal-600-40a: rgba(var(--salt-color-teal-600-rgb), 0.4);
+  --salt-color-teal-700-40a: rgba(var(--salt-color-teal-700-rgb), 0.4);
+  --salt-color-teal-800-40a: rgba(var(--salt-color-teal-800-rgb), 0.4);
+  --salt-color-background-snow-40a: rgba(var(--salt-color-background-snow-rgb), 0.4);
+  --salt-color-background-marble-40a: rgba(var(--salt-color-background-marble-rgb), 0.4);
+  --salt-color-background-limestone-40a: rgba(var(--salt-color-background-limestone-rgb), 0.4);
+  --salt-color-background-granite-40a: rgba(var(--salt-color-background-granite-rgb), 0.4);
+  --salt-color-background-jet-40a: rgba(var(--salt-color-background-jet-rgb), 0.4);
+  --salt-color-background-leather-40a: rgba(var(--salt-color-background-leather-rgb), 0.4);
+}

package/css/foundations/animation.css

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

package/css/foundations/color-next.css

@@ -0,0 +1,148 @@
+.salt-theme.salt-theme-next {
+  --salt-color-white-rgb: 255, 255, 255;
+  --salt-color-gray-100-rgb: 245, 247, 248;
+  --salt-color-gray-200-rgb: 211, 213, 216;
+  --salt-color-gray-300-rgb: 177, 181, 185;
+  --salt-color-gray-400-rgb: 145, 149, 154;
+  --salt-color-gray-500-rgb: 114, 119, 125;
+  --salt-color-gray-600-rgb: 95, 100, 106;
+  --salt-color-gray-700-rgb: 76, 81, 87;
+  --salt-color-gray-800-rgb: 58, 63, 68;
+  --salt-color-gray-900-rgb: 41, 46, 51;
+  --salt-color-black-rgb: 0, 0, 0;
+  --salt-color-blue-100-rgb: 234, 246, 255;
+  --salt-color-blue-200-rgb: 199, 222, 255;
+  --salt-color-blue-300-rgb: 154, 189, 245;
+  --salt-color-blue-400-rgb: 102, 156, 232;
+  --salt-color-blue-500-rgb: 0, 120, 207;
+  --salt-color-blue-600-rgb: 0, 94, 166;
+  --salt-color-blue-700-rgb: 0, 69, 126;
+  --salt-color-blue-800-rgb: 0, 45, 89;
+  --salt-color-blue-900-rgb: 0, 23, 54;
+  --salt-color-green-100-rgb: 234, 245, 242;
+  --salt-color-green-200-rgb: 184, 229, 209;
+  --salt-color-green-300-rgb: 137, 204, 173;
+  --salt-color-green-400-rgb: 83, 176, 135;
+  --salt-color-green-500-rgb: 0, 135, 93;
+  --salt-color-green-600-rgb: 0, 107, 72;
+  --salt-color-green-700-rgb: 0, 86, 55;
+  --salt-color-green-800-rgb: 0, 63, 37;
+  --salt-color-green-900-rgb: 0, 41, 21;
+  --salt-color-teal-100-rgb: 219, 245, 247;
+  --salt-color-teal-200-rgb: 175, 224, 237;
+  --salt-color-teal-300-rgb: 131, 192, 214;
+  --salt-color-teal-400-rgb: 76, 161, 194;
+  --salt-color-teal-500-rgb: 27, 127, 158;
+  --salt-color-teal-600-rgb: 18, 100, 126;
+  --salt-color-teal-700-rgb: 9, 74, 96;
+  --salt-color-teal-800-rgb: 3, 49, 66;
+  --salt-color-teal-900-rgb: 0, 27, 41;
+  --salt-color-orange-100-rgb: 255, 236, 217;
+  --salt-color-orange-200-rgb: 255, 198, 161;
+  --salt-color-orange-300-rgb: 247, 160, 106;
+  --salt-color-orange-400-rgb: 232, 122, 56;
+  --salt-color-orange-500-rgb: 199, 83, 0;
+  --salt-color-orange-600-rgb: 163, 68, 0;
+  --salt-color-orange-700-rgb: 129, 54, 0;
+  --salt-color-orange-800-rgb: 97, 41, 0;
+  --salt-color-orange-900-rgb: 66, 32, 0;
+  --salt-color-red-100-rgb: 255, 236, 234;
+  --salt-color-red-200-rgb: 255, 193, 186;
+  --salt-color-red-300-rgb: 255, 147, 138;
+  --salt-color-red-400-rgb: 255, 93, 87;
+  --salt-color-red-500-rgb: 229, 33, 53;
+  --salt-color-red-600-rgb: 186, 23, 41;
+  --salt-color-red-700-rgb: 145, 13, 30;
+  --salt-color-red-800-rgb: 105, 4, 19;
+  --salt-color-red-900-rgb: 69, 0, 2;
+  --salt-color-purple-100-rgb: 246, 240, 250;
+  --salt-color-purple-200-rgb: 240, 214, 245;
+  --salt-color-purple-300-rgb: 218, 175, 224;
+  --salt-color-purple-400-rgb: 195, 136, 204;
+  --salt-color-purple-500-rgb: 162, 91, 173;
+  --salt-color-purple-600-rgb: 133, 67, 143;
+  --salt-color-purple-700-rgb: 104, 45, 113;
+  --salt-color-purple-800-rgb: 73, 21, 82;
+  --salt-color-purple-900-rgb: 51, 0, 59;
+  --salt-color-background-snow-rgb: 255, 255, 255;
+  --salt-color-background-marble-rgb: 245, 247, 248;
+  --salt-color-background-limestone-rgb: 250, 248, 242;
+  --salt-color-background-gradientlight-rgb: 226, 228, 229;
+  --salt-color-background-jet-rgb: 16, 24, 32;
+  --salt-color-background-granite-rgb: 26, 34, 41;
+  --salt-color-background-leather-rgb: 38, 41, 43;
+  --salt-color-logo-brown-rgb: 58, 34, 6;
+  --salt-color-white: rgb(var(--salt-color-white-rgb));
+  --salt-color-gray-100: rgb(var(--salt-color-gray-100-rgb));
+  --salt-color-gray-200: rgb(var(--salt-color-gray-200-rgb));
+  --salt-color-gray-300: rgb(var(--salt-color-gray-300-rgb));
+  --salt-color-gray-400: rgb(var(--salt-color-gray-400-rgb));
+  --salt-color-gray-500: rgb(var(--salt-color-gray-500-rgb));
+  --salt-color-gray-600: rgb(var(--salt-color-gray-600-rgb));
+  --salt-color-gray-700: rgb(var(--salt-color-gray-700-rgb));
+  --salt-color-gray-800: rgb(var(--salt-color-gray-800-rgb));
+  --salt-color-gray-900: rgb(var(--salt-color-gray-900-rgb));
+  --salt-color-black: rgb(var(--salt-color-black-rgb));
+  --salt-color-blue-100: rgb(var(--salt-color-blue-100-rgb));
+  --salt-color-blue-200: rgb(var(--salt-color-blue-200-rgb));
+  --salt-color-blue-300: rgb(var(--salt-color-blue-300-rgb));
+  --salt-color-blue-400: rgb(var(--salt-color-blue-400-rgb));
+  --salt-color-blue-500: rgb(var(--salt-color-blue-500-rgb));
+  --salt-color-blue-600: rgb(var(--salt-color-blue-600-rgb));
+  --salt-color-blue-700: rgb(var(--salt-color-blue-700-rgb));
+  --salt-color-blue-800: rgb(var(--salt-color-blue-800-rgb));
+  --salt-color-blue-900: rgb(var(--salt-color-blue-900-rgb));
+  --salt-color-green-100: rgb(var(--salt-color-green-100-rgb));
+  --salt-color-green-200: rgb(var(--salt-color-green-200-rgb));
+  --salt-color-green-300: rgb(var(--salt-color-green-300-rgb));
+  --salt-color-green-400: rgb(var(--salt-color-green-400-rgb));
+  --salt-color-green-500: rgb(var(--salt-color-green-500-rgb));
+  --salt-color-green-600: rgb(var(--salt-color-green-600-rgb));
+  --salt-color-green-700: rgb(var(--salt-color-green-700-rgb));
+  --salt-color-green-800: rgb(var(--salt-color-green-800-rgb));
+  --salt-color-green-900: rgb(var(--salt-color-green-900-rgb));
+  --salt-color-teal-100: rgb(var(--salt-color-teal-100-rgb));
+  --salt-color-teal-200: rgb(var(--salt-color-teal-200-rgb));
+  --salt-color-teal-300: rgb(var(--salt-color-teal-300-rgb));
+  --salt-color-teal-400: rgb(var(--salt-color-teal-400-rgb));
+  --salt-color-teal-500: rgb(var(--salt-color-teal-500-rgb));
+  --salt-color-teal-600: rgb(var(--salt-color-teal-600-rgb));
+  --salt-color-teal-700: rgb(var(--salt-color-teal-700-rgb));
+  --salt-color-teal-800: rgb(var(--salt-color-teal-800-rgb));
+  --salt-color-teal-900: rgb(var(--salt-color-teal-900-rgb));
+  --salt-color-orange-100: rgb(var(--salt-color-orange-100-rgb));
+  --salt-color-orange-200: rgb(var(--salt-color-orange-200-rgb));
+  --salt-color-orange-300: rgb(var(--salt-color-orange-300-rgb));
+  --salt-color-orange-400: rgb(var(--salt-color-orange-400-rgb));
+  --salt-color-orange-500: rgb(var(--salt-color-orange-500-rgb));
+  --salt-color-orange-600: rgb(var(--salt-color-orange-600-rgb));
+  --salt-color-orange-700: rgb(var(--salt-color-orange-700-rgb));
+  --salt-color-orange-800: rgb(var(--salt-color-orange-800-rgb));
+  --salt-color-orange-900: rgb(var(--salt-color-orange-900-rgb));
+  --salt-color-red-100: rgb(var(--salt-color-red-100-rgb));
+  --salt-color-red-200: rgb(var(--salt-color-red-200-rgb));
+  --salt-color-red-300: rgb(var(--salt-color-red-300-rgb));
+  --salt-color-red-400: rgb(var(--salt-color-red-400-rgb));
+  --salt-color-red-500: rgb(var(--salt-color-red-500-rgb));
+  --salt-color-red-600: rgb(var(--salt-color-red-600-rgb));
+  --salt-color-red-700: rgb(var(--salt-color-red-700-rgb));
+  --salt-color-red-800: rgb(var(--salt-color-red-800-rgb));
+  --salt-color-red-900: rgb(var(--salt-color-red-900-rgb));
+  --salt-color-purple-100: rgb(var(--salt-color-purple-100-rgb));
+  --salt-color-purple-200: rgb(var(--salt-color-purple-200-rgb));
+  --salt-color-purple-300: rgb(var(--salt-color-purple-300-rgb));
+  --salt-color-purple-400: rgb(var(--salt-color-purple-400-rgb));
+  --salt-color-purple-500: rgb(var(--salt-color-purple-500-rgb));
+  --salt-color-purple-600: rgb(var(--salt-color-purple-600-rgb));
+  --salt-color-purple-700: rgb(var(--salt-color-purple-700-rgb));
+  --salt-color-purple-800: rgb(var(--salt-color-purple-800-rgb));
+  --salt-color-purple-900: rgb(var(--salt-color-purple-900-rgb));
+  --salt-color-background-snow: rgb(var(--salt-color-background-snow-rgb));
+  --salt-color-background-marble: rgb(var(--salt-color-background-marble-rgb));
+  --salt-color-background-limestone: rgb(var(--salt-color-background-limestone-rgb));
+  --salt-color-background-gradientlight: rgb(var(--salt-color-background-gradientlight-rgb));
+  --salt-color-background-jet: rgb(var(--salt-color-background-jet-rgb));
+  --salt-color-background-granite: rgb(var(--salt-color-background-granite-rgb));
+  --salt-color-background-leather: rgb(var(--salt-color-background-leather-rgb));
+  --salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb));
+}