Skip to content

Instantly share code, notes, and snippets.

@jdanyow

jdanyow/index.html

Last active January 17, 2021 03:22
Show Gist options
  • Save jdanyow/77a16813b042b7e8ae786be0003b5a9d to your computer and use it in GitHub Desktop.
Save jdanyow/77a16813b042b7e8ae786be0003b5a9d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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);
}
.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);
--outline-offset: calc(-1 * var(--outline-width));
}
.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