Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/system-colors.css4.html

Created September 19, 2022 15:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/5330a5f1cd7533585683b8297e6bdf67 to your computer and use it in GitHub Desktop.
Save nfreear/5330a5f1cd7533585683b8297e6bdf67 to your computer and use it in GitHub Desktop.
Download ZIP
CSS4 System Colors
Raw
system-colors.css4.html
<!doctype html> <title> CSS 4 System Colours </title>
<style>
body {
background-color: var(--canvas, Canvas);
color: var(--canvas-text, CanvasText);
margin: 1rem auto;
max-width: 30rem;
}
button,
[ role = button ],
details summary,
.button {
background-color: ButtonFace;
border: 2px outset ButtonBorder;
border-radius: .2rem;
color: ButtonText;
cursor: default;
font: inherit;
padding: .5rem 1rem;
}
a:link,
[ role = link ] {
color: LinkText;
cursor: pointer;
text-decoration: underline;
}
highlight,
.highlight {
background-color: Highlight;
color: HighlightText;
padding: .1rem;
}
mark,
.mark {
background-color: Mark;
color: MarkText;
padding: .1rem;
}
:disabled,
[ aria-disabled = 'true' ] {
color: GrayText;
cursor: not-allowed;
}
</style>
<h1> CSS 4 System Colours </h1>
<p><button> I’m a button </button>
<button disabled> I’m a disabled button </button>
</p>
<details>
<summary> I’m a summary </summary>
<p> ... </p>
</details>
<p> <highlight>I’m a highlight.</highlight> </p>
<p> I’m <mark>a mark</mark>! </p>
<p> I’m <a href="#">a link</a>! </p>
<pre>
NDF, 11-Sep-2022.
* https://www.w3.org/TR/css-color-4/#css-system-colors
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment