87 lines
4.0 KiB
SCSS
87 lines
4.0 KiB
SCSS
$keyrune-ui: (
|
|
"black": (
|
|
"100": "#3a3a3a",
|
|
"300": "#2a2a2b", //"#3a3a3a",
|
|
"500": "#1e1f20", //"#202124",
|
|
"600": "#18191b",
|
|
"700": "#131417",
|
|
"900": "#000",
|
|
),
|
|
"blue": (
|
|
"300": "#39b9e4", //"#29c9ff", //#74c0fc
|
|
"500": "#0060e4",
|
|
),
|
|
"pink": (
|
|
"100": "#f4d4e9", // bg
|
|
"300": "#ed73be", // border
|
|
"500": "#df3ea2", // text
|
|
),
|
|
"tan": (
|
|
"100": "#f2f1f1",
|
|
"200": "#f0eded", //eceaea
|
|
"300": "#e0dfde",
|
|
"500": "#d2d1cf",
|
|
"700": "#8e8d88",
|
|
"900": "#575754",
|
|
),
|
|
"white": "#fff",
|
|
);
|
|
|
|
$keyrune-ui-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
|
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
|
|
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
|
|
|
:root {
|
|
--bg-accent: #{map.get($keyrune-ui, "tan", "500")}; // slightly darker content accent
|
|
--bg-active: #{map.get($keyrune-ui, "tan", "500")}; // button active state background
|
|
--bg-body: #{map.get($keyrune-ui, "white")}; // default page background
|
|
--bg-border: #{map.get($keyrune-ui, "black", "900")}; // top border
|
|
--bg-button: #{map.get($keyrune-ui, "white")}; // button background
|
|
--bg-content: #{map.get($keyrune-ui, "tan", "100")}; // content background accent
|
|
--bg-card: #{map.get($keyrune-ui, "tan", "300")}; // icon preview cards over content bg
|
|
--bg-card-hover: #{map.get($keyrune-ui, "tan", "500")}; // hover state for preview cards
|
|
--bg-dialog: #{map.get($keyrune-ui, "tan", "300")}; // cards/dialogs over base body bg
|
|
--bg-hover: #{map.get($keyrune-ui, "tan", "200")}; // hover state for white elements
|
|
--bg-shadow: #{map.get($keyrune-ui, "black", "700")}; // overlay shadow color
|
|
--ss-icon-shadow: #{map.get($keyrune-ui, "white")}; // text shadow on card icons
|
|
--link-default: #{map.get($keyrune-ui, "blue", "500")}; // primary brand color
|
|
--text-default: #{map.get($keyrune-ui, "black", "900")}; // default body text color
|
|
--text-accent: #{map.get($keyrune-ui, "tan", "700")}; // alternate body text color
|
|
--text-contrast: #{map.get($keyrune-ui, "white")}; // opposite of body text color
|
|
--svg-border: #{map.get($keyrune-ui, "white")}; // exploding svg border color
|
|
--rgba-fg: rgba(255,255,255,0.916667);
|
|
--rgba-modal: rgba(0, 0, 0, 0.75);
|
|
|
|
&[data-mode="dark"] {
|
|
--bg-accent: #{map.get($keyrune-ui, "tan", "700")};
|
|
--bg-active: #{map.get($keyrune-ui, "blue", "300")};
|
|
--bg-body: #{map.get($keyrune-ui, "black", "500")};
|
|
--bg-border: #{map.get($keyrune-ui, "tan", "900")};
|
|
--bg-button: #{map.get($keyrune-ui, "black", "600")};
|
|
--bg-content: #{map.get($keyrune-ui, "black", "300")};
|
|
--bg-card: #{map.get($keyrune-ui, "black", "500")};
|
|
--bg-card-hover: #{map.get($keyrune-ui, "black", "600")};
|
|
--bg-dialog: #{map.get($keyrune-ui, "black", "700")};
|
|
--bg-hover: #{map.get($keyrune-ui, "black", "700")};
|
|
--bg-shadow: #{map.get($keyrune-ui, "black", "900")};
|
|
--ss-icon-shadow: transparent; //#{map.get($keyrune-ui, "black", "900")};
|
|
--link-default: #{map.get($keyrune-ui, "blue", "300")};
|
|
--text-default: #{map.get($keyrune-ui, "white")};
|
|
--text-accent: #{map.get($keyrune-ui, "tan", "500")};
|
|
--text-contrast: #{map.get($keyrune-ui, "tan", "100")};
|
|
--svg-border: #{map.get($keyrune-ui, "tan", "900")};
|
|
--rgba-fg: rgba(0,0,0,0.9);
|
|
--rgba-modal: rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Beleren';
|
|
src: url( '../font/beleren.eot' );
|
|
src: url( '../font/beleren.woff' ) format( 'woff' ),
|
|
url( '../font/beleren.ttf' ) format( 'truetype' ),
|
|
url( '../font/beleren.svg' ) format( 'svg' );
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|