variables.css

:root {
  --main-50: /*[(${cssColors.shade50Rgb})]*/ #e8fbef;
  --main-100: /*[(${cssColors.shade100Rgb})]*/ #d0f7df;
  --main-200: /*[(${cssColors.shade200Rgb})]*/ #a1efbd;
  --main-300: /*[(${cssColors.shade300Rgb})]*/ #71e69c;
  --main-400: /*[(${cssColors.shade400Rgb})]*/ #41de7b;
  --main-500: /*[(${cssColors.shade500Rgb})]*/ #22c55e;
  --main-600: /*[(${cssColors.shade600Rgb})]*/ #1a9547;
  --main-700: /*[(${cssColors.shade700Rgb})]*/ #116530;
  --main-800: /*[(${cssColors.shade800Rgb})]*/ #09351a;
  --main-900: /*[(${cssColors.shade900Rgb})]*/ #010603;

  --bg-color-start: /*[(${uiSettings.theme.palette.shade300})]*/ #71e69c;
  --bg-color-stop: /*[(${uiSettings.theme.palette.shade700})]*/ #09351a;
}

.bg-color-start {
  transition: 0.4s ease;
  stop-color: var(--bg-color-start);
}

.bg-color-stop {
  transition: 0.4s ease;
  stop-color: var(--bg-color-stop);
}