81 lines
2.3 KiB
SCSS
81 lines
2.3 KiB
SCSS
@use 'sass:meta';
|
|
@use 'sass:map';
|
|
|
|
body {
|
|
--iqser-primary: lightblue;
|
|
--iqser-primary-rgb: 220, 230, 234;
|
|
--iqser-primary-2: orange;
|
|
--iqser-accent: blue;
|
|
--iqser-accent-rgb: 123, 234, 111;
|
|
--iqser-background: white;
|
|
--iqser-text: black;
|
|
--iqser-disabled: #9398a0;
|
|
--iqser-not-disabled-table-item: #f9fafb;
|
|
--iqser-btn-bg-hover: #e2e4e9;
|
|
--iqser-btn-bg: #f0f1f4;
|
|
--iqser-warn: #fdbd00;
|
|
--iqser-white: white;
|
|
--iqser-black: black;
|
|
--iqser-light: white;
|
|
--iqser-separator: rgba(226, 228, 233, 0.9);
|
|
--iqser-grey-1: #283241; // ebony clay
|
|
--iqser-grey-10: #313d4e; // oxford blue - manual only
|
|
--iqser-grey-7: #9398a0; // manatee
|
|
--iqser-grey-3: #aaacb3; // aluminium
|
|
--iqser-grey-5: #d3d5da; // iron
|
|
--iqser-grey-4: #e2e4e9; // athens gray
|
|
--iqser-grey-6: #f0f1f4; // athens gray
|
|
--iqser-grey-2: #f4f5f7; // athens gray
|
|
--iqser-grey-8: #f9fafb; // athens gray
|
|
--iqser-green-1: #00ff00;
|
|
--iqser-green-2: #5ce594;
|
|
--iqser-orange-1: #ff801a;
|
|
--iqser-yellow-1: #ffb83b;
|
|
--iqser-yellow-2: #fdbd00;
|
|
--iqser-yellow-rgb: 253, 189, 0;
|
|
--iqser-red-1: #dd4d50;
|
|
--iqser-red-2: #f16164;
|
|
--iqser-blue-1: #4875f7;
|
|
--iqser-blue-2: #48c9f7;
|
|
--iqser-blue-3: #5b97db;
|
|
--iqser-blue-4: #374c81;
|
|
--iqser-blue-5: #c5d3eb;
|
|
--iqser-pink-1: #f125de;
|
|
--iqser-helpmode-primary: green;
|
|
--iqser-font-size: 13px;
|
|
--iqser-button-radius: 17px;
|
|
--iqser-button-font-size: 13px;
|
|
--iqser-button-height: 34px;
|
|
--iqser-font-family: 'some placeholder value that should be overridden when configuring a theme';
|
|
}
|
|
|
|
$required-variables: 'iqser-font-family' 'iqser-primary';
|
|
|
|
@mixin checkRequiredVariables($args, $theme) {
|
|
@each $var in $required-variables {
|
|
@if map.get(meta.keywords($args), $var) == null {
|
|
@error "Missing #{$var} in #{$theme} theme";
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin configureLight($args...) {
|
|
@include checkRequiredVariables($args, 'light');
|
|
|
|
body.light {
|
|
@each $name, $value in meta.keywords($args) {
|
|
--#{$name}: #{$value};
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin configureDark($args...) {
|
|
@include checkRequiredVariables($args, 'dark');
|
|
|
|
body.dark {
|
|
@each $name, $value in meta.keywords($args) {
|
|
--#{$name}: #{$value};
|
|
}
|
|
}
|
|
}
|