mango-ui-v3/styles/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: theme('colors.light-theme.orange');
  --red: theme('colors.light-theme.red');
  --green: theme('colors.light-theme.green');
  --bkg-1: theme('colors.light-theme["bkg-1"]');
  --bkg-2: theme('colors.light-theme["bkg-2"]');
  --bkg-3: theme('colors.light-theme["bkg-3"]');
  --fgd-1: theme('colors.light-theme["fgd-1"]');
  --fgd-2: theme('colors.light-theme["fgd-2"]');
  --fgd-3: theme('colors.light-theme["fgd-3"]');
  --fgd-4: theme('colors.light-theme["fgd-4"]');
}

[data-theme='dark'] {
  --primary: theme('colors.dark-theme.orange');
  --red: theme('colors.dark-theme.red');
  --green: theme('colors.dark-theme.green');
  --bkg-1: theme('colors.dark-theme["bkg-1"]');
  --bkg-2: theme('colors.dark-theme["bkg-2"]');
  --bkg-3: theme('colors.dark-theme["bkg-3"]');
  --fgd-1: theme('colors.dark-theme["fgd-1"]');
  --fgd-2: theme('colors.dark-theme["fgd-2"]');
  --fgd-3: theme('colors.dark-theme["fgd-3"]');
  --fgd-4: theme('colors.dark-theme["fgd-4"]');
}

[data-theme='mango'] {
  --primary: theme('colors.mango-theme.yellow');
  --red: theme('colors.mango-theme.red');
  --green: theme('colors.mango-theme.green');
  --bkg-1: theme('colors.mango-theme["bkg-1"]');
  --bkg-2: theme('colors.mango-theme["bkg-2"]');
  --bkg-3: theme('colors.mango-theme["bkg-3"]');
  --fgd-1: theme('colors.mango-theme["fgd-1"]');
  --fgd-2: theme('colors.mango-theme["fgd-2"]');
  --fgd-3: theme('colors.mango-theme["fgd-3"]');
  --fgd-4: theme('colors.mango-theme["fgd-4"]');
}

button {
  transition: all 0.25s ease;
}

.TVChartContainer {
  height: 100%;
  width: 100%;
}

.tradingview-chart {
  display: contents;
}

.react-grid-item.react-grid-placeholder {
  background: #332f46;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type='number'] {
  -moz-appearance: textfield; /* Firefox */
}

/* TODO: remove. styling for old ant components below */

.ant-input-group-addon {
  background-color: transparent !important;
}

.ant-switch {
  background-color: #5b5868 !important;
}

.ant-switch-checked {
  background-color: #f2c94c !important;
}

.ant-switch-handle::before {
  background-color: #ffffff !important;
}

.ant-input-affix-wrapper-disabled {
  background-color: #262337 !important;
  color: #ffffff !important;
}

.ant-select-arrow {
  color: #817f8a !important;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  color: #f2c94c !important;
  font-weight: 600 !important;
  background-color: #141026 !important;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background-color: #584f81 !important;
}

.ant-input-group::after {
  border-style: none !important;
}

.ant-input-group::before {
  border-style: none !important;
}

.ant-input-group-wrapper {
  border-style: none !important;
}

.ant-input-group:first-child .ant-input-affix-wrapper:not(:first-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.ant-input-group.ant-input-group-compact > *:last-child,
.ant-input-group.ant-input-group-compact
  > .ant-select:last-child
  > .ant-select-selector,
.ant-input-group.ant-input-group-compact
  > .ant-cascader-picker:last-child
  .ant-input,
.ant-input-group.ant-input-group-compact
  > .ant-cascader-picker-focused:last-child
  .ant-input {
  border-color: #524a79 !important;
}