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

package/css/deprecated/palette.css

@@ -1,159 +0,0 @@
-/*
-* **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

@@ -1,48 +0,0 @@
-/* 
-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

@@ -1,155 +0,0 @@
-.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

@@ -1,148 +0,0 @@
-.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));
-}