Last active
January 17, 2021 03:42
-
-
Save jdanyow/edc4b4d2e7c3e5728a266c76ffdc05a5 to your computer and use it in GitHub Desktop.
Variable button/background colors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
This is an experiment where adding a new brand color or semantic color is only | |
a matter of adding a class that assigns r,g,b variables: | |
.color-brand-office { | |
--r: 216; | |
--g: 59; | |
--b: 1; | |
} | |
This experiment contains two items: | |
1. An element called ".btn". Used in conjunction with a color class it will automatically | |
choose an invert color, hover color, and active color. | |
2. A utility called ".background". Used in conjunction with a color class it will | |
automatically choose a text color, as well as set the outline color. | |
Q: Why RGB??? | |
A: I haven't found a way to calculate the perceived lightness of an HSL color. | |
https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/ | |
https://thoughtbot.com/blog/closer-look-color-lightness | |
--> | |
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>GistRun</title> | |
<style> | |
:root { | |
--lightness-threshold: 0.6; | |
--text: #000; | |
--body-background: #fff; | |
--outline-color: #000; | |
--outline-offset: .125rem; | |
--outline-width: .125rem; | |
--outline-style: dashed; | |
--control-radius: .13rem; | |
} | |
html { | |
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans"; | |
color: var(--text); | |
background-color: var(--body-background); | |
outline-color: var(--outline-color); | |
} | |
* { | |
box-sizing: border-box; | |
} | |
:not(:focus-visible) { | |
outline: none; | |
} | |
:focus-visible { | |
outline-color: var(--outline-color); | |
outline-offset: var(--outline-offset); | |
outline-style: var(--outline-style); | |
outline-width: var(--outline-width); | |
} | |
.has-inner-focus { | |
--outline-offset: calc(-1 * var(--outline-width)); | |
} | |
.btn { | |
--r: 255; | |
--g: 255; | |
--b: 255; | |
--perceived-lightness: calc((var(--r) * 0.299 + var(--g) * 0.587 + var(--b) * 0.114) / 255); | |
--color-invert-sign: clamp(-1, calc((var(--perceived-lightness) - var(--lightness-threshold)) * 10), 1); | |
--color: rgb(var(--r), var(--g), var(--b)); | |
--color-invert: hsl(0, 0%, calc(var(--color-invert-sign) * -10000000%)); | |
display: inline-block; | |
padding: .375rem .75rem; | |
font-size: 1rem; | |
text-align: center; | |
text-decoration: none; | |
white-space: nowrap; | |
vertical-align: middle; | |
cursor: pointer; | |
user-select: none; | |
color: var(--color-invert); | |
background-color: var(--color); | |
border-width: 1px; | |
border-style: solid; | |
border-color: transparent; | |
border-radius: var(--control-radius); | |
} | |
.btn:hover:not(:disabled) { | |
filter: brightness(calc(100% + 7% * var(--color-invert-sign))) contrast(125%); | |
} | |
.btn:active:not(:disabled) { | |
filter: brightness(calc(100% + 18% * var(--color-invert-sign))) contrast(150%); | |
/*filter: initial;*/ | |
} | |
.btn:disabled { | |
cursor: not-allowed; | |
opacity: 75%; | |
} | |
.btn.has-inner-focus { | |
--outline-color: var(--color-invert); | |
} | |
.background { | |
--r: 255; | |
--g: 255; | |
--b: 255; | |
--perceived-lightness: calc((var(--r) * 0.299 + var(--g) * 0.587 + var(--b) * 0.114) / 255); | |
--color-invert-sign: clamp(-1, calc((var(--perceived-lightness) - var(--lightness-threshold)) * 10), 1); | |
--color: rgb(var(--r), var(--g), var(--b)); | |
--color-invert: hsl(0, 0%, calc(var(--color-invert-sign) * -10000000%)); | |
--outline-color: var(--color-invert); | |
color: var(--color-invert); | |
background-color: var(--color); | |
} | |
.color-primary { | |
--r: 0; | |
--g: 101; | |
--b: 179; | |
} | |
.color-secondary { | |
--r: 171; | |
--g: 171; | |
--b: 171; | |
} | |
.color-tertiary { | |
--r: 69; | |
--g: 69; | |
--b: 69; | |
} | |
.color-success { | |
--r: 18; | |
--g: 135; | |
--b: 18; | |
} | |
.color-info { | |
--r: 135; | |
--g: 99; | |
--b: 197; | |
} | |
.color-warning { | |
--r: 255; | |
--g: 187; | |
--b: 0; | |
} | |
.color-danger { | |
--r: 176; | |
--g: 42; | |
--b: 55; | |
} | |
.color-brand-aspnet { | |
--r: 81; | |
--g: 43; | |
--b: 212; | |
} | |
.color-brand-azure { | |
--r: 0; | |
--g: 91; | |
--b: 161; | |
} | |
.color-azure-free-account { | |
--r: 137; | |
--g: 196; | |
--b: 2; | |
} | |
.color-brand-bot-framework { | |
--r: 227; | |
--g: 0; | |
--b: 140; | |
} | |
.color-brand-office { | |
--r: 216; | |
--g: 59; | |
--b: 1; | |
} | |
.color-brand-playfab { | |
--r: 255; | |
--g: 109; | |
--b: 33; | |
} | |
/* lazyness */ | |
button { | |
margin-bottom: 8px; | |
margin-right: 8px; | |
} | |
.example-box { | |
padding: 16px 36px; | |
margin-bottom: 24px; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Hello world!</h1> | |
<input> | |
<h2>Buttons</h2> | |
<button class="btn color-primary" type="button">Primary</button> | |
<button class="btn color-secondary" type="button">Secondary</button> | |
<button class="btn color-tertiary" type="button">Tertiary</button> | |
<button class="btn color-success" type="button">Success</button> | |
<button class="btn color-info" type="button">Info</button> | |
<button class="btn color-warning" type="button">Warning</button> | |
<button class="btn color-danger" type="button">Danger</button> | |
<button class="btn color-brand-aspnet" type="button">ASP.NET</button> | |
<button class="btn color-brand-azure" type="button">Azure</button> | |
<button class="btn color-azure-free-account" type="button">Try azure for free</button> | |
<button class="btn color-brand-bot-framework" type="button">Bot framework</button> | |
<button class="btn color-brand-office" type="button">Office</button> | |
<button class="btn color-brand-playfab" type="button">Playfab</button> | |
<h2>Disabled buttons</h2> | |
<button disabled class="btn color-primary" type="button">Primary</button> | |
<button disabled class="btn color-secondary" type="button">Secondary</button> | |
<button disabled class="btn color-tertiary" type="button">Tertiary</button> | |
<button disabled class="btn color-success" type="button">Success</button> | |
<button disabled class="btn color-info" type="button">Info</button> | |
<button disabled class="btn color-warning" type="button">Warning</button> | |
<button disabled class="btn color-danger" type="button">Danger</button> | |
<button disabled class="btn color-brand-aspnet" type="button">ASP.NET</button> | |
<button disabled class="btn color-brand-azure" type="button">Azure</button> | |
<button disabled class="btn color-azure-free-account" type="button">Try azure for free</button> | |
<button disabled class="btn color-brand-bot-framework" type="button">Bot framework</button> | |
<button disabled class="btn color-brand-office" type="button">Office</button> | |
<button disabled class="btn color-brand-playfab" type="button">Playfab</button> | |
<h2>Inner focus buttons</h2> | |
<button class="has-inner-focus btn color-primary" type="button">Primary</button> | |
<button class="has-inner-focus btn color-secondary" type="button">Secondary</button> | |
<button class="has-inner-focus btn color-tertiary" type="button">Tertiary</button> | |
<button class="has-inner-focus btn color-success" type="button">Success</button> | |
<button class="has-inner-focus btn color-info" type="button">Info</button> | |
<button class="has-inner-focus btn color-warning" type="button">Warning</button> | |
<button class="has-inner-focus btn color-danger" type="button">Danger</button> | |
<button class="has-inner-focus btn color-brand-aspnet" type="button">ASP.NET</button> | |
<button class="has-inner-focus btn color-brand-azure" type="button">Azure</button> | |
<button class="has-inner-focus btn color-azure-free-account" type="button">Try azure for free</button> | |
<button class="has-inner-focus btn color-brand-bot-framework" type="button">Bot framework</button> | |
<button class="has-inner-focus btn color-brand-office" type="button">Office</button> | |
<button class="has-inner-focus btn color-brand-playfab" type="button">Playfab</button> | |
<h2>Background</h2> | |
<div class="background color-primary example-box"> | |
<p> | |
Lorem ipsum sumit dolar | |
<button class="btn color-azure-free-account">Hello</button> | |
</p> | |
</div> | |
<div class="background color-secondary example-box"> | |
<p> | |
Lorem ipsum sumit dolar | |
<button class="btn color-azure-free-account">Hello</button> | |
</p> | |
</div> | |
<div class="background color-tertiary example-box"> | |
<p> | |
Lorem ipsum sumit dolar | |
<button class="btn color-azure-free-account">Hello</button> | |
</p> | |
</div> | |
<div class="background color-success example-box"> | |
<p> | |
Lorem ipsum sumit dolar | |
<button class="btn color-azure-free-account">Hello</button> | |
</p> | |
</div> | |
<div class="background color-info example-box"> | |
<p> | |
Lorem ipsum sumit dolar | |
<button class="btn color-azure-free-account">Hello</button> | |
</p> | |
</div> | |
<div class="background color-warning example-box"> | |
<p> | |
Lorem ipsum sumit dolar | |
<button class="btn color-azure-free-account">Hello</button> | |
</p> | |
</div> | |
<div class="background color-danger example-box"> | |
<p> | |
Lorem ipsum sumit dolar | |
<button class="btn color-azure-free-account">Hello</button> | |
</p> | |
</div> | |
<div class="background color-brand-aspnet example-box"> | |
<p> | |
Lorem ipsum sumit dolar | |
<button class="btn color-azure-free-account">Hello</button> | |
</p> | |
</div> | |
<div class="background color-brand-azure example-box"> | |
<p> | |
Lorem ipsum sumit dolar | |
<button class="btn color-azure-free-account">Hello</button> | |
</p> | |
</div> | |
<div class="background color-azure-free-account example-box"> | |
<p> | |
Lorem ipsum sumit dolar | |
<button class="btn color-azure-free-account">Hello</button> | |
</p> | |
</div> | |
<div class="background color-success example-box"> | |
<p> | |
Lorem ipsum sumit dolar | |
<button class="btn color-azure-free-account">Hello</button> | |
</p> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment