first commit
This commit is contained in:
Christian Lawson-Perfect
commit
89c3ddb84b
14 changed files with 1886 additions and 0 deletions
229
scheme.css
Normal file
229
scheme.css
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
:root {
|
||||
--highlight: white;
|
||||
--off: black;
|
||||
|
||||
--styled-text-mix: 20%;
|
||||
|
||||
--default-style-mix: 10%;
|
||||
--faint-bg-mix: 10%;
|
||||
--faint-line-mix: 20%;
|
||||
|
||||
font-size: 18px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
:root.dark-background {
|
||||
--default-style-mix: 40%;
|
||||
--faint-bg-mix: 20%;
|
||||
--faint-line-mix: 40%;
|
||||
--highlight: black;
|
||||
--off: white;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
* {
|
||||
--styled-background: color-mix(in oklab, var(--background), var(--text) var(--default-style-mix));
|
||||
--styled-text: var(--text);
|
||||
|
||||
--medium-line-color: color-mix(in oklab, var(--background), var(--text) 50%);
|
||||
--faint-line-color: color-mix(in oklab, var(--background), var(--text) var(--faint-line-mix));
|
||||
--faint-background: color-mix(in oklab, var(--background), var(--text) var(--faint-bg-mix));
|
||||
}
|
||||
|
||||
#color-picker {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 10em);
|
||||
grid-gap: 1em;
|
||||
margin: 1em 0;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
|
||||
& input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#preview {
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
padding: 1em;
|
||||
|
||||
|
||||
& a {
|
||||
--highlight-amount: 0%;
|
||||
--off-amount: 0%;
|
||||
color:
|
||||
color-mix(in oklab,
|
||||
color-mix(in oklab,
|
||||
var(--link),
|
||||
var(--highlight)
|
||||
var(--highlight-amount)
|
||||
),
|
||||
var(--off)
|
||||
var(--off-amount)
|
||||
);
|
||||
|
||||
&:hover {
|
||||
--highlight-amount: 20%;
|
||||
}
|
||||
&:focus {
|
||||
--highlight-amount: 40%;
|
||||
}
|
||||
&:active {
|
||||
--off-amount: 20%;
|
||||
}
|
||||
&:visited {
|
||||
--off-amount: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
& .success {
|
||||
color: color-mix(in oklab, var(--success), var(--text) var(--styled-text-mix));
|
||||
--styled-background: var(--success);
|
||||
--styled-text: var(--success-text);
|
||||
}
|
||||
|
||||
& .primary {
|
||||
color: color-mix(in oklab, var(--primary), var(--text) var(--styled-text-mix));
|
||||
--styled-background: var(--primary);
|
||||
--styled-text: var(--primary-text);
|
||||
}
|
||||
|
||||
& .info {
|
||||
color: color-mix(in oklab, var(--info), var(--text) var(--styled-text-mix));
|
||||
--styled-background: var(--info);
|
||||
--styled-text: var(--info-text);
|
||||
}
|
||||
|
||||
& .warning {
|
||||
color: color-mix(in oklab, var(--warning), var(--text) var(--styled-text-mix));
|
||||
--styled-background: var(--warning);
|
||||
--styled-text: var(--warning-text);
|
||||
}
|
||||
|
||||
& .danger {
|
||||
color: color-mix(in oklab, var(--danger), var(--text) var(--styled-text-mix));
|
||||
--styled-background: var(--danger);
|
||||
--styled-text: var(--danger-text);
|
||||
}
|
||||
|
||||
& .muted {
|
||||
color: color-mix(in oklab, var(--muted), var(--text) var(--styled-text-mix));
|
||||
--styled-background: var(--muted);
|
||||
--styled-text: var(--muted-text);
|
||||
}
|
||||
|
||||
button:is(*, .success, .info, .warning, .danger, .muted, .primary) {
|
||||
--highlight-amount: 0%;
|
||||
--off-amount: 0%;
|
||||
--mixed-styled-background:
|
||||
color-mix(in oklab,
|
||||
color-mix(in oklab,
|
||||
var(--styled-background),
|
||||
var(--highlight)
|
||||
var(--highlight-amount)
|
||||
),
|
||||
var(--off)
|
||||
var(--off-amount)
|
||||
);
|
||||
--button-border: color-mix(in oklab, var(--mixed-styled-background), var(--off) 30%);
|
||||
background-color: var(--mixed-styled-background);
|
||||
border: medium solid var(--button-border);
|
||||
color: var(--styled-text);
|
||||
font-size: 1em;
|
||||
|
||||
&:hover {
|
||||
--highlight-amount: 20%;
|
||||
}
|
||||
&:focus {
|
||||
--highlight-amount: 40%;
|
||||
}
|
||||
&:active {
|
||||
--off-amount: 20%;
|
||||
}
|
||||
|
||||
&.info {
|
||||
--styled-background: var(--info);
|
||||
color: var(--info-text);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
--styled-background: var(--warning);
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
--styled-background: var(--danger);
|
||||
color: var(--danger-text);
|
||||
}
|
||||
|
||||
&.primary {
|
||||
--styled-background: var(--primary);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
& .alert {
|
||||
padding: 1em;
|
||||
margin: 1em 0;
|
||||
--alert-background: color-mix(in oklab, var(--styled-background), var(--text) 10%);
|
||||
--alert-border: color-mix(in oklab, var(--alert-background), var(--off) 10%);
|
||||
color: var(--styled-text);
|
||||
|
||||
background-color: var(--alert-background);
|
||||
|
||||
border: medium solid var(--alert-border);
|
||||
}
|
||||
|
||||
& nav {
|
||||
background: var(--main);
|
||||
color: var(--main-text);
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
& hr {
|
||||
border: thin solid var(--medium-line-color);
|
||||
|
||||
&.faint {
|
||||
border: thin solid var(--faint-line-color);
|
||||
}
|
||||
}
|
||||
|
||||
& input {
|
||||
border: thin solid var(--faint-line-color);
|
||||
border-bottom-color: var(--text);
|
||||
border-bottom-width: thin;
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
font-size: 1em;
|
||||
--styled-background: var(--background);
|
||||
background-color: color-mix(in oklab, var(--background), var(--styled-background) var(--faint-line-mix));
|
||||
|
||||
&.answered {
|
||||
--styled-background: var(--info);
|
||||
}
|
||||
|
||||
&.has-errors {
|
||||
--styled-background: var(--danger);
|
||||
}
|
||||
|
||||
&.has-warnings {
|
||||
--styled-background: var(--warning);
|
||||
}
|
||||
}
|
||||
|
||||
& pre,code, kbd {
|
||||
background: var(--faint-background);
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
& kbd {
|
||||
border: thin solid var(--medium-line-color);
|
||||
padding: 0.2em;
|
||||
margin: 0 0.2em;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue