vega-frontend-monorepo/apps/trading/pages/styles.css

@import 'ag-grid-community/dist/styles/ag-grid.css';
@import 'ag-grid-community/dist/styles/ag-theme-balham.css';
@import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';

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

html,
body,
#__next {
  @apply h-full;
}

/* Styles for allotment */
html {
  --focus-border: theme('colors.vega.pink.500');
  --separator-border: theme('colors.vega.light.200');
  --pennant-color-danger: theme('colors.vega.pink.500');
}

html.dark {
  --focus-border: theme('colors.vega.yellow.500');
  --separator-border: theme('colors.vega.dark.200');
}

.border-default {
  @apply border-vega-light-200 dark:border-vega-dark-200;
}

/* PENNANT */

html [data-theme='dark'] {
  --pennant-color-danger: theme('colors.vega.pink.DEFAULT');

  /* candles */
  --pennant-color-buy-fill: theme('colors.vega.green.650');
  --pennant-color-buy-stroke: theme('colors.vega.green.500');
  /* sell candles only use stroke as the candle is solid (without border) */
  --pennant-color-sell-stroke: theme('colors.vega.pink.500');

  /* studies */
  --pennant-color-eldar-ray-bear-power: theme('colors.vega.pink.500');
  --pennant-color-eldar-ray-bull-power: theme('colors.vega.green.650');

  --pennant-color-macd-divergence-buy: theme('colors.vega.green.650');
  --pennant-color-macd-divergence-sell: theme('colors.vega.pink.500');
  --pennant-color-macd-signal: theme('colors.vega.blue.500');
  --pennant-color-macd-macd: theme('colors.vega.yellow.500');

  --pennant-color-volume-buy: theme('colors.vega.green.650');
  --pennant-color-volume-sell: theme('colors.vega.pink.500');

  /* depth chart */
  --pennant-color-depth-buy-fill: theme('colors.vega.green.650');
  --pennant-color-depth-buy-stroke: theme('colors.vega.green.500');
  --pennant-color-depth-sell-fill: theme('colors.vega.pink.650');
  --pennant-color-depth-sell-stroke: theme('colors.vega.pink.500');
}

html [data-theme='light'] {
  --pennant-color-danger: theme('colors.vega.pink.500');

  /* candles */
  --pennant-color-buy-fill: theme('colors.vega.green.400');
  --pennant-color-buy-stroke: theme('colors.vega.green.550');
  /* sell candles only use stroke as the candle is solid (without border) */
  --pennant-color-sell-stroke: theme('colors.vega.pink.400');

  --pennant-color-volume-buy: theme('colors.vega.green.400');
  --pennant-color-volume-sell: theme('colors.vega.pink.400');

  /* depth chart */
  --pennant-color-depth-buy-fill: theme('colors.vega.green.400');
  --pennant-color-depth-buy-stroke: theme('colors.vega.green.550');
  --pennant-color-depth-sell-fill: theme('colors.vega.pink.400');
  --pennant-color-depth-sell-stroke: theme('colors.vega.pink.550');
}

/* AG GRID - Do not edit without updating other global stylesheets for each app */

.vega-ag-grid .ag-root-wrapper {
  border: solid 0px;
}

.vega-ag-grid .ag-react-container {
  overflow: hidden;
  text-overflow: ellipsis;
}

.vega-ag-grid .ag-cell,
.vega-ag-grid .ag-full-width-row .ag-cell-wrapper.ag-row-group {
  line-height: calc(min(var(--ag-line-height, 26px), 26px) - 4px);
}

.vega-ag-grid .ag-row {
  border-width: 1px 0;
  border-bottom: 1px solid transparent;
}

/* Light variables */
.ag-theme-balham {
  --ag-background-color: theme(colors.white);
  --ag-border-color: theme(colors.neutral[300]);
  --ag-header-background-color: theme(colors.white);
  --ag-odd-row-background-color: theme(colors.white);
  --ag-header-column-separator-color: theme(colors.neutral[300]);
  --ag-row-border-color: theme(colors.white);
  --ag-row-hover-color: theme(colors.neutral[100]);
  --ag-font-size: 12px;
}

/* Dark variables */
.ag-theme-balham-dark {
  --ag-background-color: theme(colors.black);
  --ag-border-color: theme(colors.neutral[700]);
  --ag-header-background-color: theme(colors.black);
  --ag-odd-row-background-color: theme(colors.black);
  --ag-header-column-separator-color: theme(colors.neutral[600]);
  --ag-row-border-color: theme(colors.black);
  --ag-row-hover-color: theme(colors.neutral[800]);
  --ag-font-size: 12px;
}