mirror of
https://github.com/roleypoly/roleypoly-v1.git
synced 2025-04-25 12:19:10 +00:00
77 lines
1.3 KiB
JavaScript
77 lines
1.3 KiB
JavaScript
export const colors = {
|
|
white: '#efefef',
|
|
c9: '#EBD6D4',
|
|
c7: '#ab9b9a',
|
|
c5: '#756867',
|
|
c3: '#5d5352',
|
|
c1: '#453e3d',
|
|
dark: '#332d2d',
|
|
green: '#46b646',
|
|
red: '#e95353',
|
|
discord: '#7289da'
|
|
}
|
|
|
|
const getColors = () => {
|
|
Object.keys(colors).map(key => {
|
|
const nk = key.replace(/c([0-9])/, '$1')
|
|
return `--c-${nk}: ${colors[key]};`
|
|
}).join(' \n')
|
|
}
|
|
|
|
const Colors = () => <style global jsx>{`
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "source-han-sans-japanese", "Source Sans Pro", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.font-sans-serif {
|
|
font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
}
|
|
|
|
:root {
|
|
${getColors()}
|
|
}
|
|
|
|
::selection {
|
|
background: var(--c-9);
|
|
color: var(--c-1);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: var(--c-9);
|
|
color: var(--c-1);
|
|
}
|
|
|
|
html {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
overflow: auto;
|
|
color: var(--c-white);
|
|
background-color: var(--c-1);
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6 {
|
|
color: var(--c-9);
|
|
}
|
|
|
|
.fade-element {
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.fade {
|
|
opacity: 0;
|
|
}
|
|
|
|
`}</style>
|
|
|
|
export default Colors
|