packages/frontend/lib/utils/styles.dart

import 'package:jaspr/dom.dart';

const colorPrimary = Color.variable('--color-primary');
const colorOnPrimary = Color.variable('--color-on-primary');
const colorSurface = Color.variable('--color-surface');
const colorOnSurface = Color.variable('--color-on-surface');
const colorOnSurfaceVariant = Color.variable('--color-on-surface-variant');
const colorContainer = Color.variable('--color-container');
const colorContainerLow = Color.variable('--color-container-low');
const colorContainerHigh = Color.variable('--color-container-high');
const colorBorder = Color.variable('--color-border');

const colorError = Color.variable('--color-error');
const colorWarning = Color.variable('--color-warning');
const colorSuccess = Color.variable('--color-success');
const colorInfo = Color.variable('--color-info');
const colorPurple = Color.variable('--color-purple');
const colorGray = Color.variable('--color-gray');

@css
List<StyleRule> get styles => [
  css(':root').styles(
    raw: {
      '--color-primary': '#4285f4', // Google Blue
      '--color-on-primary': '#ffffff',
      '--color-surface': '#121212', // Dark background
      '--color-on-surface': '#f5f5f5', // White foreground
      '--color-on-surface-variant': '#9e9e9e', // Muted text
      '--color-container': '#1e1e1e', // Panels, editor container, etc.
      '--color-container-low': '#161616', // Sidebar, tabs bg
      '--color-container-high': '#2a2a2a', // Buttons, active items, hover
      '--color-border': '#2d2d2d',
      '--color-error': '#ea4335', // Google Red
      '--color-warning': '#fbbc05', // Google Yellow
      '--color-success': '#34a853', // Google Green
      '--color-info': '#4285f4', // Google Blue
    },
  ),
  css('body').styles(
    display: .flex,
    height: 100.vh,
    margin: Margin.zero,
    overflow: .hidden,
    color: colorOnSurface,
    fontFamily: const FontFamily.list([FontFamily('Inter'), FontFamilies.sansSerif]),
    backgroundColor: colorContainerLow,
    raw: {
      'scrollbar-width': 'thin',
      'scrollbar-color': 'rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.03)',
    },
  ),
  css('::-webkit-scrollbar').styles(
    width: 12.px,
    height: 12.px,
  ),
  css('::-webkit-scrollbar-track').styles(
    radius: .circular(6.px),
    backgroundColor: const Color('rgba(255, 255, 255, 0.03)'),
  ),
  css('::-webkit-scrollbar-thumb').styles(
    radius: .circular(6.px),
    backgroundColor: const Color('rgba(255, 255, 255, 0.15)'),
    raw: {
      'border': '3px solid transparent',
      'background-clip': 'padding-box',
    },
  ),
  css('::-webkit-scrollbar-thumb:hover').styles(
    radius: .circular(6.px),
    backgroundColor: const Color('rgba(255, 255, 255, 0.3)'),
    raw: {
      'border': '3px solid transparent',
      'background-clip': 'padding-box',
    },
  ),
  css('::-webkit-scrollbar-button').styles(
    display: .none,
  ),
  css('::-webkit-scrollbar').styles(
    width: 6.px,
    height: 6.px,
  ),
  css('::-webkit-scrollbar-track').styles(
    backgroundColor: Colors.transparent,
  ),
  css('::-webkit-scrollbar-thumb').styles(
    radius: .circular(3.px),
    backgroundColor: colorBorder,
  ),
  css('::-webkit-scrollbar-thumb:hover').styles(
    backgroundColor: colorOnSurfaceVariant,
  ),
];