Skip to content

Instantly share code, notes, and snippets.

@BearInHat
Last active February 2, 2022 15:06
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 BearInHat/b1b6e9483e4f588ec38190360562dbcd to your computer and use it in GitHub Desktop.
Save BearInHat/b1b6e9483e4f588ec38190360562dbcd to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
$white: #fff;
$black: #000;
//primary
$primary: #00a4b3;
//$aqua-spring
$primary-background: #e9f7f9;
//$aqua-light
$primary-lighter: #f7feff;
$primary-darker: darken($primary, 20%);
$primary-hover: darken($primary, 10%);
$primary-active: darken($primary, 15%);
$primary-box-shadow: rgba($primary, 80%);
//$jagged-ice
$primary-highlight: #b4e0e3;
//$accent-secondary
$primary-complement: #c9e7ea;
$primary-contrast: $white;
$secondary: #f1f7ff;
$secondary-background: darken($secondary, 20%);
$secondary-lighter: lighten($secondary, 20%);
$secondary-darker: darken($secondary, 20%);
$secondary-hover: darken($secondary, 10%);
$secondary-active: darken($secondary, 20%);
$secondary-box-shadow: rgba($secondary, 80%);
$secondary-highlight: darken($secondary, 20%);
$secondary-complement: #bedaff;
$secondary-contrast: $black;
// Style Guide: orange
$tertiary: #ff6400;
$tertiary-background: lighten($tertiary, 25%);
// Style Guide: orange-light
$tertiary-lighter: #ffefe4;
$tertiary-darker: darken($tertiary, 20%);
$tertiary-hover: darken($tertiary, 10%);
$tertiary-active: darken($tertiary, 20%);
$tertiary-box-shadow: rgba($tertiary, 80%);
$tertiary-highlight: darken($tertiary, 20%);
$tertiary-complement: #ffa266;
$tertiary-contrast: $white;
$info: #4a77c4;
$info-background: lighten($info, 30%);
$info-lighter: lighten($info, 25%);
$info-darker: darken($info, 20%);
$info-hover: darken($info, 10%);
$info-active: darken($info, 20%);
$info-box-shadow: rgba($info, 80%);
$info-highlight: darken($info, 20%);
$info-complement: #97b1dd;
$info-contrast: $white;
//Style Guide: green
$success: #a1dd76;
//$green-lighter
$success-background: #d5f5cb;
//$green-light
$success-lighter: #afd494;
//$green-dark
$success-darker: #0b8c01;
$success-hover: darken($success, 10%);
//$bg-green-secondary
$success-active: #2ead24;
$success-box-shadow: rgba($success, 80%);
//$green-bright
$success-highlight: #7dd40d;
//$bg-green-dark
$success-complement: #457407;
$success-contrast: $white;
$warning: #ffc000;
$warning-background: lighten($warning, 20%);
// Style Guide: yellow-light
$warning-lighter: #ffd87e;
// Style Guide: yellow-dark
$warning-darker: #f9aa30;
$warning-hover: darken($warning, 10%);
$warning-active: darken($warning, 15%);
$warning-box-shadow: rgba($warning, 80%);
$warning-highlight: lighten($warning, 10%);
$warning-complement: #ffe69a;
$warning-contrast: $white;
$error: #e22323;
// $pink-light
$error-background: #fae7e7;
//$pippin
$error-lighter: #ffe2e2;
$error-darker: darken($error, 20%);
$error-hover: darken($error, 10%);
$error-active: darken($error, 15%);
$error-box-shadow: rgba($error, 80%);
//$pink
$error-highlight: #ffc0cb;
$error-complement: #f19494;
$error-contrast: $white;
//Style Guide: purple/$purple-light
$accent: #c483d6;
$accent-background: lighten($accent, 20%);
$accent-lighter: lighten($accent, 20%);
$accent-darker: darken($accent, 20%);
$accent-hover: darken($accent, 10%);
$accent-active: darken($accent, 15%);
$accent-box-shadow: rgba($accent, 75%);
$accent-highlight: darken($accent, 20%);
$accent-complement: #dfbce9;
$accent-contrast: $white;
:root {
//primary
--primary-base: #{$primary};
--primary-background: #{$primary-background};
--primary-lighter: #{$primary-lighter};
--primary-darker: #{$primary-darker};
--primary-hover: #{$primary-hover};
--primary-active: #{$primary-active};
--primary-box-shadow: #{$primary-box-shadow};
--primary-highlight: #{$primary-highlight};
--primary-complement: #{$primary-complement};
--primary-contrast: #{$primary-contrast};
//secondary
--secondary-base: #{$secondary};
--secondary-background: #{$secondary-background};
--secondary-lighter: #{$secondary-lighter};
--secondary-darker: #{$secondary-darker};
--secondary-hover: #{$secondary-hover};
--secondary-active: #{$secondary-active};
--secondary-box-shadow: #{$secondary-box-shadow};
--secondary-highlight: #{$secondary-highlight};
--secondary-complement: #{$secondary-complement};
--secondary-contrast: #{$secondary-contrast};
//tertiary
--tertiary-base: #{$tertiary};
--tertiary-background: #{$tertiary-background};
--tertiary-lighter: #{$tertiary-lighter};
--tertiary-darker: #{$tertiary-darker};
--tertiary-hover: #{$tertiary-hover};
--tertiary-active: #{$tertiary-active};
--tertiary-box-shadow: #{$tertiary-box-shadow};
--tertiary-highlight: #{$tertiary-highlight};
--tertiary-complement: #{$tertiary-complement};
--tertiary-contrast: #{$tertiary-contrast};
//info
--info-base: #{$info};
--info-background: #{$info-background};
--info-lighter: #{$info-lighter};
--info-darker: #{$info-darker};
--info-hover: #{$info-hover};
--info-active: #{$info-active};
--info-box-shadow: #{$info-box-shadow};
--info-highlight: #{$info-highlight};
--info-complement: #{$info-complement};
--info-contrast: #{$info-contrast};
//success
--success-base: #{$success};
--success-background: #{$success-background};
--success-lighter: #{$success-lighter};
--success-darker: #{$success-darker};
--success-hover: #{$success-hover};
--success-active: #{$success-active};
--success-box-shadow: #{$success-box-shadow};
--success-highlight: #{$success-highlight};
--success-complement: #{$success-complement};
--success-contrast: #{$success-contrast};
//warning
--warning-base: #{$warning};
--warning-background: #{$warning-background};
--warning-lighter: #{$warning-lighter};
--warning-darker: #{$warning-darker};
--warning-hover: #{$warning-hover};
--warning-active: #{$warning-active};
--warning-box-shadow: #{$warning-box-shadow};
--warning-highlight: #{$warning-highlight};
--warning-complement: #{$warning-complement};
--warning-contrast: #{$warning-contrast};
//error
--error-base: #{$error};
--error-background: #{$error-background};
--error-lighter: #{$error-lighter};
--error-darker: #{$error-darker};
--error-hover: #{$error-hover};
--error-active: #{$error-active};
--error-box-shadow: #{$error-box-shadow};
--error-highlight: #{$error-highlight};
--error-complement: #{$error-complement};
--error-contrast: #{$error-contrast};
//accent
--accent-base: #{$accent};
--accent-background: #{$accent-background};
--accent-lighter: #{$accent-lighter};
--accent-darker: #{$accent-darker};
--accent-hover: #{$accent-hover};
--accent-active: #{$accent-active};
--accent-box-shadow: #{$accent-box-shadow};
--accent-highlight: #{$accent-highlight};
--accent-complement: #{$accent-complement};
--accent-contrast: #{$accent-contrast};
}
div {
padding: 5px;
}
.primary-base{
color: var(--primary-base);
&:hover{
color: var(--primary-hover);
}
&:active{
color: var(--primary-active);
}
}
.primary-contrast{
color: var(--primary-contrast);
background-color: var(--primary-base);
}
.primary-complement {
background-color: var(--primary-complement);
}
.primary-darker {
color: var(--primary-darker);
}
.primary-lighter{
color: var(--primary-lighter);
background-color: var(--primary-darker);
}
.primary-background{
background-color: var(--primary-background);
}
.primary-shadow{
box-shadow: 0px 0px 2px 2px var(--primary-box-shadow);
}
.primary-border{
border: 2px solid var(--primary-highlight);
margin-top: 2px;
}
.secondary-base{
color: var(--secondary-base);
&:hover{
color: var(--secondary-hover);
}
&:active{
color: var(--secondary-active);
}
}
.secondary-contrast{
color: var(--secondary-contrast);
background-color: var(--secondary-base);
}
.secondary-complement {
background-color: var(--secondary-complement);
}
.secondary-darker {
color: var(--secondary-darker);
}
.secondary-lighter{
color: var(--secondary-lighter);
background-color: var(--secondary-darker);
}
.secondary-background{
background-color: var(--secondary-background);
}
.secondary-shadow{
box-shadow: 0px 0px 2px 2px var(--secondary-box-shadow);
}
.secondary-border{
border: 2px solid var(--secondary-highlight);
margin-top: 2px;
}
.tertiary-base{
color: var(--tertiary-base);
&:hover{
color: var(--tertiary-hover);
}
&:active{
color: var(--tertiary-active);
}
}
.tertiary-contrast{
color: var(--tertiary-contrast);
background-color: var(--tertiary-base);
}
.tertiary-complement {
background-color: var(--tertiary-complement);
}
.tertiary-darker {
color: var(--tertiary-darker);
}
.tertiary-lighter{
color: var(--tertiary-lighter);
background-color: var(--tertiary-darker);
}
.tertiary-background{
background-color: var(--tertiary-background);
}
.tertiary-shadow{
box-shadow: 0px 0px 2px 2px var(--tertiary-box-shadow);
}
.tertiary-border{
border: 2px solid var(--tertiary-highlight);
margin-top: 2px;
}
.info-base{
color: var(--info-base);
&:hover{
color: var(--info-hover);
}
&:active{
color: var(--info-active);
}
}
.info-contrast{
color: var(--info-contrast);
background-color: var(--info-base);
}
.info-complement {
background-color: var(--info-complement);
}
.info-darker {
color: var(--info-darker);
}
.info-lighter{
color: var(--info-lighter);
background-color: var(--info-darker);
}
.info-background{
background-color: var(--info-background);
}
.info-shadow{
box-shadow: 0px 0px 2px 2px var(--info-box-shadow);
}
.info-border{
border: 2px solid var(--info-highlight);
margin-top: 2px;
}
.success-base{
color: var(--success-base);
&:hover{
color: var(--success-hover);
}
&:active{
color: var(--success-active);
}
}
.success-contrast{
color: var(--success-contrast);
background-color: var(--success-base);
}
.success-complement {
background-color: var(--success-complement);
}
.success-darker {
color: var(--success-darker);
}
.success-lighter{
color: var(--success-lighter);
background-color: var(--success-darker);
}
.success-background{
background-color: var(--success-background);
}
.success-shadow{
box-shadow: 0px 0px 2px 2px var(--success-box-shadow);
}
.success-border{
border: 2px solid var(--success-highlight);
margin-top: 2px;
}
.warning-base{
color: var(--warning-base);
&:hover{
color: var(--warning-hover);
}
&:active{
color: var(--warning-active);
}
}
.warning-contrast{
color: var(--warning-contrast);
background-color: var(--warning-base);
}
.warning-complement {
background-color: var(--warning-complement);
}
.warning-darker {
color: var(--warning-darker);
}
.warning-lighter{
color: var(--warning-lighter);
background-color: var(--warning-darker);
}
.warning-background{
background-color: var(--warning-background);
}
.warning-shadow{
box-shadow: 0px 0px 2px 2px var(--warning-box-shadow);
}
.warning-border{
border: 2px solid var(--warning-highlight);
margin-top: 2px;
}
.error-base{
color: var(--error-base);
&:hover{
color: var(--error-hover);
}
&:active{
color: var(--error-active);
}
}
.error-contrast{
color: var(--error-contrast);
background-color: var(--error-base);
}
.error-complement {
background-color: var(--error-complement);
}
.error-darker {
color: var(--error-darker);
}
.error-lighter{
color: var(--error-lighter);
background-color: var(--error-darker);
}
.error-background{
background-color: var(--error-background);
}
.error-shadow{
box-shadow: 0px 0px 2px 2px var(--error-box-shadow);
}
.error-border{
border: 2px solid var(--error-highlight);
margin-top: 2px;
}
.accent-base{
color: var(--accent-base);
&:hover{
color: var(--accent-hover);
}
&:active{
color: var(--accent-active);
}
}
.accent-contrast{
color: var(--accent-contrast);
background-color: var(--accent-base);
}
.accent-complement {
background-color: var(--accent-complement);
}
.accent-darker {
color: var(--accent-darker);
}
.accent-lighter{
color: var(--accent-lighter);
background-color: var(--accent-darker);
}
.accent-background{
background-color: var(--accent-background);
}
.accent-shadow{
box-shadow: 0px 0px 2px 2px var(--accent-box-shadow);
}
.accent-darker {
color: var(--accent-darker);
}
.accent-lighter{
color: var(--accent-lighter);
background-color: var(--accent-darker);
}
.accent-background{
background-color: var(--accent-background);
}
.accent-shadow{
box-shadow: 0px 0px 2px 2px var(--accent-box-shadow);
}
.accent-border{
border: 2px solid var(--accent-highlight);
margin-top: 2px;
}
<div class="primary-shadow" style="margin-bottom: 15px;">
<div class="primary-darker">
darker
</div>
<div class="primary-base">
primary
</div>
<div class="primary-lighter">
lighter
</div>
<div class="primary-contrast">
contrast
</div>
<div class="primary-base primary-complement">
complement
</div>
<div class="primary-background primary-darker">
background
</div>
<div class="primary-border">
border
</div>
</div>
<div class="secondary-shadow" style="margin-bottom: 15px;">
<div class="secondary-darker">
darker
</div>
<div class="secondary-base">
secondary
</div>
<div class="secondary-lighter">
lighter
</div>
<div class="secondary-contrast">
contrast
</div>
<div class="secondary-base secondary-complement">
complement
</div>
<div class="secondary-background secondary-lighter">
background
</div>
<div class="secondary-border">
border
</div>
</div>
<div class="tertiary-shadow" style="margin-bottom: 15px;">
<div class="tertiary-darker">
darker
</div>
<div class="tertiary-base">
tertiary
</div>
<div class="tertiary-lighter">
lighter
</div>
<div class="tertiary-contrast">
contrast
</div>
<div class="tertiary-base tertiary-complement">
complement
</div>
<div class="tertiary-background tertiary-darker">
background
</div>
<div class="tertiary-border">
border
</div>
</div>
<div class="info-shadow" style="margin-bottom: 15px;">
<div class="info-darker">
darker
</div>
<div class="info-base">
info
</div>
<div class="info-lighter">
lighter
</div>
<div class="info-contrast">
contrast
</div>
<div class="info-base info-complement">
complement
</div>
<div class="info-background info-darker">
background
</div>
<div class="info-border">
border
</div>
</div>
<div class="success-shadow" style="margin-bottom: 15px;">
<div class="success-darker">
darker
</div>
<div class="success-base">
success
</div>
<div class="success-lighter">
lighter
</div>
<div class="success-contrast">
contrast
</div>
<div class="success-base success-complement">
complement
</div>
<div class="success-background success-darker">
background
</div>
<div class="success-border">
border
</div>
</div>
<div class="warning-shadow" style="margin-bottom: 15px;">
<div class="warning-darker">
darker
</div>
<div class="warning-base">
warning
</div>
<div class="warning-lighter">
lighter
</div>
<div class="warning-contrast">
contrast
</div>
<div class="warning-base warning-complement">
complement
</div>
<div class="warning-background warning-darker">
background
</div>
<div class="warning-border">
border
</div>
</div>
<div class="error-shadow" style="margin-bottom: 15px;">
<div class="error-darker">
darker
</div>
<div class="error-base">
error
</div>
<div class="error-lighter">
lighter
</div>
<div class="error-contrast">
contrast
</div>
<div class="error-base error-complement">
complement
</div>
<div class="error-background error-darker">
background
</div>
<div class="error-border">
border
</div>
</div>
<div class="accent-shadow" style="margin-bottom: 45px;">
<div class="accent-darker">
darker
</div>
<div class="accent-base">
accent
</div>
<div class="accent-lighter">
lighter
</div>
<div class="accent-contrast">
contrast
</div>
<div class="accent-base accent-complement">
complement
</div>
<div class="accent-background accent-darker">
background
</div>
<div class="accent-border">
border
</div>
</div>
:root {
--primary-base: #00a4b3;
--primary-background: #e9f7f9;
--primary-lighter: #f7feff;
--primary-darker: #00474d;
--primary-hover: #007580;
--primary-active: #005e67;
--primary-box-shadow: rgba(0, 164, 179, 0.8);
--primary-highlight: #b4e0e3;
--primary-complement: #c9e7ea;
--primary-contrast: #fff;
--secondary-base: #f1f7ff;
--secondary-background: #8bbdff;
--secondary-lighter: white;
--secondary-darker: #8bbdff;
--secondary-hover: #bedaff;
--secondary-active: #8bbdff;
--secondary-box-shadow: rgba(241, 247, 255, 0.8);
--secondary-highlight: #8bbdff;
--secondary-complement: #bedaff;
--secondary-contrast: #000;
--tertiary-base: #ff6400;
--tertiary-background: #ffb280;
--tertiary-lighter: #ffefe4;
--tertiary-darker: #993c00;
--tertiary-hover: #cc5000;
--tertiary-active: #993c00;
--tertiary-box-shadow: rgba(255, 100, 0, 0.8);
--tertiary-highlight: #993c00;
--tertiary-complement: #ffa266;
--tertiary-contrast: #fff;
--info-base: #4a77c4;
--info-background: #bdceea;
--info-lighter: #aabfe3;
--info-darker: #29497f;
--info-hover: #365fa5;
--info-active: #29497f;
--info-box-shadow: rgba(74, 119, 196, 0.8);
--info-highlight: #29497f;
--info-complement: #97b1dd;
--info-contrast: #fff;
--success-base: #a1dd76;
--success-background: #d5f5cb;
--success-lighter: #afd494;
--success-darker: #0b8c01;
--success-hover: #85d34d;
--success-active: #2ead24;
--success-box-shadow: rgba(161, 221, 118, 0.8);
--success-highlight: #7dd40d;
--success-complement: #457407;
--success-contrast: #fff;
--warning-base: #ffc000;
--warning-background: #ffd966;
--warning-lighter: #ffd87e;
--warning-darker: #f9aa30;
--warning-hover: #cc9a00;
--warning-active: #b38600;
--warning-box-shadow: rgba(255, 192, 0, 0.8);
--warning-highlight: #ffcd33;
--warning-complement: #ffe69a;
--warning-contrast: #fff;
--error-base: #e22323;
--error-background: #fae7e7;
--error-lighter: #ffe2e2;
--error-darker: #8c1313;
--error-hover: #ba1818;
--error-active: #a31515;
--error-box-shadow: rgba(226, 35, 35, 0.8);
--error-highlight: #ffc0cb;
--error-complement: #f19494;
--error-contrast: #fff;
--accent-base: #c483d6;
--accent-background: #e8d0ef;
--accent-lighter: #e8d0ef;
--accent-darker: #9c3cb7;
--accent-hover: #b25dc9;
--accent-active: #a94ac3;
--accent-box-shadow: rgba(196, 131, 214, 0.75);
--accent-highlight: #9c3cb7;
--accent-complement: #dfbce9;
--accent-contrast: #fff;
}
div {
padding: 5px;
}
.primary-base {
color: var(--primary-base);
}
.primary-base:hover {
color: var(--primary-hover);
}
.primary-base:active {
color: var(--primary-active);
}
.primary-contrast {
color: var(--primary-contrast);
background-color: var(--primary-base);
}
.primary-complement {
background-color: var(--primary-complement);
}
.primary-darker {
color: var(--primary-darker);
}
.primary-lighter {
color: var(--primary-lighter);
background-color: var(--primary-darker);
}
.primary-background {
background-color: var(--primary-background);
}
.primary-shadow {
box-shadow: 0px 0px 2px 2px var(--primary-box-shadow);
}
.primary-border {
border: 2px solid var(--primary-highlight);
margin-top: 2px;
}
.secondary-base {
color: var(--secondary-base);
}
.secondary-base:hover {
color: var(--secondary-hover);
}
.secondary-base:active {
color: var(--secondary-active);
}
.secondary-contrast {
color: var(--secondary-contrast);
background-color: var(--secondary-base);
}
.secondary-complement {
background-color: var(--secondary-complement);
}
.secondary-darker {
color: var(--secondary-darker);
}
.secondary-lighter {
color: var(--secondary-lighter);
background-color: var(--secondary-darker);
}
.secondary-background {
background-color: var(--secondary-background);
}
.secondary-shadow {
box-shadow: 0px 0px 2px 2px var(--secondary-box-shadow);
}
.secondary-border {
border: 2px solid var(--secondary-highlight);
margin-top: 2px;
}
.tertiary-base {
color: var(--tertiary-base);
}
.tertiary-base:hover {
color: var(--tertiary-hover);
}
.tertiary-base:active {
color: var(--tertiary-active);
}
.tertiary-contrast {
color: var(--tertiary-contrast);
background-color: var(--tertiary-base);
}
.tertiary-complement {
background-color: var(--tertiary-complement);
}
.tertiary-darker {
color: var(--tertiary-darker);
}
.tertiary-lighter {
color: var(--tertiary-lighter);
background-color: var(--tertiary-darker);
}
.tertiary-background {
background-color: var(--tertiary-background);
}
.tertiary-shadow {
box-shadow: 0px 0px 2px 2px var(--tertiary-box-shadow);
}
.tertiary-border {
border: 2px solid var(--tertiary-highlight);
margin-top: 2px;
}
.info-base {
color: var(--info-base);
}
.info-base:hover {
color: var(--info-hover);
}
.info-base:active {
color: var(--info-active);
}
.info-contrast {
color: var(--info-contrast);
background-color: var(--info-base);
}
.info-complement {
background-color: var(--info-complement);
}
.info-darker {
color: var(--info-darker);
}
.info-lighter {
color: var(--info-lighter);
background-color: var(--info-darker);
}
.info-background {
background-color: var(--info-background);
}
.info-shadow {
box-shadow: 0px 0px 2px 2px var(--info-box-shadow);
}
.info-border {
border: 2px solid var(--info-highlight);
margin-top: 2px;
}
.success-base {
color: var(--success-base);
}
.success-base:hover {
color: var(--success-hover);
}
.success-base:active {
color: var(--success-active);
}
.success-contrast {
color: var(--success-contrast);
background-color: var(--success-base);
}
.success-complement {
background-color: var(--success-complement);
}
.success-darker {
color: var(--success-darker);
}
.success-lighter {
color: var(--success-lighter);
background-color: var(--success-darker);
}
.success-background {
background-color: var(--success-background);
}
.success-shadow {
box-shadow: 0px 0px 2px 2px var(--success-box-shadow);
}
.success-border {
border: 2px solid var(--success-highlight);
margin-top: 2px;
}
.warning-base {
color: var(--warning-base);
}
.warning-base:hover {
color: var(--warning-hover);
}
.warning-base:active {
color: var(--warning-active);
}
.warning-contrast {
color: var(--warning-contrast);
background-color: var(--warning-base);
}
.warning-complement {
background-color: var(--warning-complement);
}
.warning-darker {
color: var(--warning-darker);
}
.warning-lighter {
color: var(--warning-lighter);
background-color: var(--warning-darker);
}
.warning-background {
background-color: var(--warning-background);
}
.warning-shadow {
box-shadow: 0px 0px 2px 2px var(--warning-box-shadow);
}
.warning-border {
border: 2px solid var(--warning-highlight);
margin-top: 2px;
}
.error-base {
color: var(--error-base);
}
.error-base:hover {
color: var(--error-hover);
}
.error-base:active {
color: var(--error-active);
}
.error-contrast {
color: var(--error-contrast);
background-color: var(--error-base);
}
.error-complement {
background-color: var(--error-complement);
}
.error-darker {
color: var(--error-darker);
}
.error-lighter {
color: var(--error-lighter);
background-color: var(--error-darker);
}
.error-background {
background-color: var(--error-background);
}
.error-shadow {
box-shadow: 0px 0px 2px 2px var(--error-box-shadow);
}
.error-border {
border: 2px solid var(--error-highlight);
margin-top: 2px;
}
.accent-base {
color: var(--accent-base);
}
.accent-base:hover {
color: var(--accent-hover);
}
.accent-base:active {
color: var(--accent-active);
}
.accent-contrast {
color: var(--accent-contrast);
background-color: var(--accent-base);
}
.accent-complement {
background-color: var(--accent-complement);
}
.accent-darker {
color: var(--accent-darker);
}
.accent-lighter {
color: var(--accent-lighter);
background-color: var(--accent-darker);
}
.accent-background {
background-color: var(--accent-background);
}
.accent-shadow {
box-shadow: 0px 0px 2px 2px var(--accent-box-shadow);
}
.accent-darker {
color: var(--accent-darker);
}
.accent-lighter {
color: var(--accent-lighter);
background-color: var(--accent-darker);
}
.accent-background {
background-color: var(--accent-background);
}
.accent-shadow {
box-shadow: 0px 0px 2px 2px var(--accent-box-shadow);
}
.accent-border {
border: 2px solid var(--accent-highlight);
margin-top: 2px;
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment