mirror of https://github.com/OpenVidu/openvidu.git
82 lines
2.4 KiB
SCSS
82 lines
2.4 KiB
SCSS
// Colour tokens of the dashboard as light/dark pairs. `$overrides` replaces Material system tokens; the custom
|
|
// properties cover status chips and chart series, which Material does not define.
|
|
@use 'sass:map';
|
|
|
|
$brand: #0088aa;
|
|
|
|
$overrides: (
|
|
primary: light-dark(#006b86, #5fd4fb),
|
|
on-primary: light-dark(#ffffff, #003544),
|
|
primary-container: light-dark(#bfeaff, #004d60),
|
|
on-primary-container: light-dark(#001f29, #bfeaff),
|
|
tertiary: light-dark(#00677f, #00c8f7),
|
|
on-tertiary: light-dark(#ffffff, #00363f),
|
|
tertiary-container: light-dark(#00c8f7, #00c8f7),
|
|
on-tertiary-container: light-dark(#001f26, #00363f),
|
|
surface: light-dark(#f8fafb, #0f1416),
|
|
background: light-dark(#f8fafb, #0f1416),
|
|
surface-container-lowest: light-dark(#ffffff, #0a0f11),
|
|
surface-container-low: light-dark(#f0f4f6, #171c1e),
|
|
surface-container: light-dark(#eaf0f2, #1b2124),
|
|
surface-container-high: light-dark(#e0e7ea, #252b2e),
|
|
surface-container-highest: light-dark(#d9e1e4, #30363a),
|
|
on-surface: light-dark(#171c1e, #dfe3e6),
|
|
on-background: light-dark(#171c1e, #dfe3e6),
|
|
on-surface-variant: light-dark(#40484c, #bfc8cc),
|
|
outline: light-dark(#70787c, #8a9296),
|
|
outline-variant: light-dark(#bfc8cc, #40484c),
|
|
error: light-dark(#ba1a1a, #ffb4ab),
|
|
on-error: light-dark(#ffffff, #690005),
|
|
error-container: light-dark(#ffdad6, #5c0a0a),
|
|
on-error-container: light-dark(#ba1a1a, #ffb4ab)
|
|
);
|
|
|
|
// Status chips: container and text per status family.
|
|
$status: (
|
|
success: (
|
|
bg: light-dark(#c8f0cf, #0f3a18),
|
|
fg: light-dark(#1b6e2b, #7fd68a)
|
|
),
|
|
neutral: (
|
|
bg: light-dark(#e0e5e8, #30383b),
|
|
fg: light-dark(#40484c, #bfc8cc)
|
|
),
|
|
error: (
|
|
bg: light-dark(#ffdad6, #5c0a0a),
|
|
fg: light-dark(#ba1a1a, #ffb4ab)
|
|
),
|
|
warning: (
|
|
bg: light-dark(#ffe0c2, #4a2300),
|
|
fg: light-dark(#a04a00, #ffb77a)
|
|
),
|
|
info: (
|
|
bg: light-dark(#bfeaff, #004d60),
|
|
fg: light-dark(#005466, #bfeaff)
|
|
)
|
|
);
|
|
|
|
// Chart series slots; a colour follows the entity, never the rank.
|
|
$chart: (
|
|
1: light-dark(#0088aa, #0088aa),
|
|
2: light-dark(#eb6834, #d95926),
|
|
3: light-dark(#1baf7a, #199e70),
|
|
4: light-dark(#eda100, #c98500),
|
|
5: light-dark(#e87ba4, #d55181),
|
|
6: light-dark(#2f4b7c, #3d6fd1),
|
|
7: light-dark(#6250d6, #9085e9),
|
|
8: light-dark(#e34948, #e66767)
|
|
);
|
|
|
|
@mixin custom-properties {
|
|
--ovd-brand: #{$brand};
|
|
|
|
@each $name, $pair in $status {
|
|
--ovd-status-#{$name}-bg: #{map.get($pair, bg)};
|
|
--ovd-status-#{$name}-fg: #{map.get($pair, fg)};
|
|
}
|
|
|
|
@each $slot, $value in $chart {
|
|
--ovd-chart-#{$slot}: #{$value};
|
|
}
|
|
}
|