kristofersxyz/static/main/css/colors.css
2023-01-20 00:33:01 +02:00

69 lines
2.5 KiB
CSS

:root {
--color-scale-black: #010409;
--color-scale-white: #ffffff;
--color-scale-white-transparent-7: #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-4-transparent-40: #6e768166;
--color-scale-gray-8-transparent-50: #161b2280;
--color-scale-gray-9-transparent-0: #0d111700;
--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-4-transparent-06: #a371f70f;
--color-canvas-default: var(--color-scale-gray-9);
--color-canvas-default-transparent: var(--color-scale-gray-9-transparent-0);
--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-5);
--color-header-text: var(--color-scale-white-transparent-7);
--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-1);
--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);
--base-text-weight-semibold: 600;
--font-monospace: "JetBrains Mono", Menlo, Consolas, monospace;
font-family: "Roboto", arial, sans-serif;
font-size: 16px;
}