Created
February 10, 2022 15:32
-
-
Save BearInHat/93e54b6ea3df76cc3173bc7f5666772b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| $white: #fff; | |
| $black: #000; | |
| $base-bg: #f6f6f6; | |
| $base-text: #444444; | |
| $body-text: #444444; | |
| $body-bg: #ffffff; | |
| //form | |
| $form-bg: #f8f9ff; | |
| $form-label: #6f6f6f; | |
| $form-text: #444444; | |
| //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 | |
| $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-darker, 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, 15%); | |
| $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 | |
| $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 | |
| $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 | |
| $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 { | |
| --base-bg: #{$base-bg}; | |
| --body-bg: #{$body-bg}; | |
| //form | |
| --form-bg: #{$form-bg}; | |
| --form-label: #{$form-label}; | |
| --form-text: #{$form-text}; | |
| //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}; | |
| } | |
| body { | |
| background-color: var(--body-bg); | |
| } | |
| .wrapper { | |
| background-color: var(--base-bg); | |
| div { | |
| padding: 5px; | |
| } | |
| } | |
| .form-bg { | |
| background-color: var(--form-bg); | |
| } | |
| .form-label { | |
| color: var(--form-label); | |
| } | |
| .form-text { | |
| color: var(--form-text); | |
| } | |
| .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; | |
| } |
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
| <div class="wrapper"> | |
| <div class="form-bg"> | |
| <label class="form-label">Form Label</label> | |
| <div class="form-text">Form Text</div> | |
| </div> | |
| <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> | |
| </div> |
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
| :root { | |
| --base-bg: #f6f6f6; | |
| --body-bg: #ffffff; | |
| --form-bg: #f8f9ff; | |
| --form-label: #6f6f6f; | |
| --form-text: #444444; | |
| --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(139, 189, 255, 0.8); | |
| --secondary-highlight: #8bbdff; | |
| --secondary-complement: #bedaff; | |
| --secondary-contrast: #000; | |
| --tertiary-base: #ff6400; | |
| --tertiary-background: #ffb280; | |
| --tertiary-lighter: #ffefe4; | |
| --tertiary-darker: #b34600; | |
| --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; | |
| } | |
| body { | |
| background-color: var(--body-bg); | |
| } | |
| .wrapper { | |
| background-color: var(--base-bg); | |
| } | |
| .wrapper div { | |
| padding: 5px; | |
| } | |
| .form-bg { | |
| background-color: var(--form-bg); | |
| } | |
| .form-label { | |
| color: var(--form-label); | |
| } | |
| .form-text { | |
| color: var(--form-text); | |
| } | |
| .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; | |
| } |
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
| { | |
| "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