Files
telemetry_visualization/frontend/src/assets/variables.scss
2025-02-14 20:22:31 -08:00

64 lines
1.5 KiB
SCSS

@use 'sass:color';
$gray-0: oklch(100% 0 0);
$gray-1: oklch(90% 0 0);
$gray-2: oklch(80% 0 0);
$gray-3: oklch(70% 0 0);
$gray-4: oklch(60% 0 0);
$gray-5: oklch(50% 0 0);
$gray-6: oklch(40% 0 0);
$gray-7: oklch(30% 0 0);
$gray-8: oklch(20% 0 0);
$gray-9: oklch(10% 0 0);
$red-1: oklch(75% 0.4 030);
$orange-1: oklch(75% 0.4 090);
$green-1: oklch(75% 0.4 150);
$cyan-1: oklch(75% 0.4 210);
$blue-1: oklch(75% 0.4 270);
$magenta-1: oklch(75% 0.4 330);
$red-2: oklch(75% 0.2 030);
$orange-2: oklch(75% 0.2 090);
$green-2: oklch(75% 0.2 150);
$cyan-2: oklch(75% 0.2 210);
$blue-2: oklch(75% 0.2 270);
$magenta-2: oklch(75% 0.2 330);
$text-color: $gray-1;
$background-color: $gray-7;
$light2-background-color: color.adjust($background-color, $lightness: 10%);
$light-background-color: color.adjust($background-color, $lightness: 5%);
$dark-background-color: color.adjust($background-color, $lightness: -5%);
$dark2-background-color: color.adjust($background-color, $lightness: -10%);
$cursor-tick: $gray-0;
$time-tick: $gray-1;
$grid-line: $gray-1;
$major-tick: $gray-4;
$minor-tick: $gray-5;
$text-font: Helvetica, sans-serif;
$large-text-size: 20px;
$normal-text-size: 16px;
$small-text-size: 12px;
$monospace-text-font: Monaco, monospace, monospace;
$normal-monospace-text-size: 12px;
$small-monospace-text-size: 10px;
$colors: (
$red-1,
$green-1,
$blue-1,
$orange-1,
$cyan-1,
$magenta-1,
$red-2,
$green-2,
$blue-2,
$orange-2,
$cyan-2,
$magenta-2
);