mirror of
https://github.com/kristoferssolo/kristofersxyz.git
synced 2025-10-21 18:30:34 +00:00
118 lines
4.5 KiB
CSS
118 lines
4.5 KiB
CSS
:root {
|
|
--color-scale-black: #010409;
|
|
--color-scale-white: #ffffff;
|
|
|
|
--color-scale-white-transparent-70: #ffffffbc;
|
|
|
|
--color-scale-gray-0: #f0f6fc;
|
|
--color-scale-gray-1: #c9d1d9;
|
|
--color-scale-gray-2: #b1bac4;
|
|
--color-scale-gray-3: #8b949e;
|
|
--color-scale-gray-4: #6e7681;
|
|
--color-scale-gray-5: #484f58;
|
|
--color-scale-gray-6: #30363d;
|
|
--color-scale-gray-7: #21262d;
|
|
--color-scale-gray-8: #161b22;
|
|
--color-scale-gray-9: #0d1117;
|
|
|
|
--color-scale-gray-0-transparent-10: #f0f6fc1a;
|
|
--color-scale-gray-1-transparent-15: #c9d1d966;
|
|
--color-scale-gray-3-transparent-20: #8b949e33;
|
|
--color-scale-gray-3-transparent-50: #8b949e80;
|
|
--color-scale-gray-4-transparent-40: #6e768166;
|
|
--color-scale-gray-8-transparent-50: #161b2280;
|
|
|
|
--color-scale-purple-0: #eddeff;
|
|
--color-scale-purple-1: #e2c5ff;
|
|
--color-scale-purple-2: #d2a8ff;
|
|
--color-scale-purple-3: #bc8cff;
|
|
--color-scale-purple-4: #a371f7;
|
|
--color-scale-purple-5: #8957e5;
|
|
--color-scale-purple-6: #6e40c9;
|
|
--color-scale-purple-7: #553098;
|
|
--color-scale-purple-8: #3c1e70;
|
|
--color-scale-purple-9: #271052;
|
|
|
|
--color-scale-purple-2-transparent-40: #d2a8ff4d;
|
|
--color-scale-purple-4-transparent-10: #a371f71a;
|
|
|
|
--base-text-weight-semibold: 600;
|
|
|
|
--font-monospace: "JetBrains Mono", Menlo, Consolas, monospace;
|
|
font-family: "Roboto", arial, sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
|
|
[data-color-mode="dark"] {
|
|
--color-canvas-default: var(--color-scale-gray-9);
|
|
--color-canvas-default-transparent: var(--color-transparent);
|
|
--color-canvas-subtle: var(--color-scale-gray-8);
|
|
--color-canvas-subtle-transparent: var(--color-scale-gray-4-transparent-40);
|
|
|
|
--color-border-default: var(--color-scale-gray-6);
|
|
--color-border-muted: var(--color-scale-gray-7);
|
|
|
|
--color-header-bg-default: var(--color-scale-gray-8);
|
|
--color-header-bg-transparent: var(--color-scale-gray-8-transparent-50);
|
|
--color-header-text: var(--color-scale-gray-0);
|
|
--color-header-text-hover: var(--color-scale-white-transparent-70);
|
|
|
|
--color-btn-text: var(--color-scale-gray-1);
|
|
--color-btn-bg: var(--color-scale-gray-7);
|
|
--color-btn-border: var(--color-scale-gray-0-transparent-10);
|
|
--color-btn-hover-bg: var(--color-scale-gray-6);
|
|
--color-btn-hover-border: var(--color-scale-gray-3);
|
|
--color-btn-active-border: var(--color-scale-gray-5);
|
|
|
|
--color-fg-default: var(--color-scale-gray-1);
|
|
--color-fg-muted: var(--color-scale-gray-3);
|
|
--color-fg-subtle: var(--color-scale-gray-4);
|
|
--color-fg-on-emphasis: var(--color-scale-white);
|
|
--color-text-hover: var(--color-fg-muted);
|
|
|
|
--color-accent-fg: var(--color-scale-purple-4);
|
|
|
|
--color-text-link: var(--color-accent-fg);
|
|
|
|
--color-card-default: var(--color-scale-gray-8);
|
|
--color-card-border: var(--color-scale-gray-0-transparent-10);
|
|
--color-card-bg-hover: var(--color-scale-purple-4-transparent-10);
|
|
--color-card-accent: var(--color-accent-fg);
|
|
}
|
|
|
|
[data-color-mode="light"] {
|
|
--color-canvas-default: var(--color-scale-white);
|
|
--color-canvas-default-transparent: var(--color-transparent);
|
|
--color-canvas-subtle: var(--color-scale-gray-0);
|
|
--color-canvas-subtle-transparent: var(--color-scale-gray-3-transparent-20);
|
|
|
|
--color-border-default: var(--color-scale-gray-1);
|
|
--color-border-muted: var(--color-scale-gray-2);
|
|
|
|
--color-header-bg-default: var(--color-scale-gray-7);
|
|
--color-header-bg-transparent: var(--color-scale-gray-3-transparent-50);
|
|
--color-header-text: var(--color-scale-gray-0);
|
|
--color-header-text-hover: var(--color-scale-white-transparent-70);
|
|
|
|
--color-btn-text: var(--color-scale-gray-7);
|
|
--color-btn-bg: var(--color-scale-gray-0);
|
|
--color-btn-border: var(--color-scale-gray-1-transparent-15);
|
|
--color-btn-hover-bg: var(--color-scale-gray-1);
|
|
--color-btn-hover-border: var(--color-scale-gray-1-transparent-15);
|
|
--color-btn-active-border: var(--color-scale-gray-1-transparent-15);
|
|
|
|
--color-fg-default: var(--color-scale-gray-7);
|
|
--color-fg-muted: var(--color-scale-gray-5);
|
|
--color-fg-subtle: var(--color-scale-gray-4);
|
|
--color-fg-on-emphasis: var(--color-scale-white);
|
|
--color-text-hover: var(--color-fg-muted);
|
|
|
|
--color-accent-fg: var(--color-scale-purple-5);
|
|
--color-text-link: var(--color-accent-fg);
|
|
|
|
--color-card-default: var(--color-scale-gray-1);
|
|
--color-card-border: var(--color-scale-gray-1-transparent-15);
|
|
--color-card-bg-hover: var(--color-scale-purple-2-transparent-40);
|
|
--color-card-accent: var(--color-accent-fg);
|
|
}
|