@import "themes/base/light"; $background-color: #f7f7f7; $primary-color: #43b268; $secondary-color: #88c3ac; $success-color: #6be49d; :root { /* Main colors */ --background-color: $background-color; --text-light-color: $background-color; /* Link colors */ --link-color: hsl(from $primary-color h s calc(l - 12)); /* Primary color (block backgrounds and such) */ --primary-color: $primary-color; --primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5)); --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 35)); --primary-dark-color: hsl(from $primary-color h s calc(l + 45)); --primary-link-color: var(--link-color); /* for consistency */ /* Secondary color (most buttons) */ --secondary-color: $secondary-color; --secondary-border-color: hsl(from $secondary-color h s calc(l - 45)); --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18)); --secondary-dark-color: hsl(from $secondary-color h calc(s + 5) calc(l + 23)); --secondary-link-color: hsl(from $secondary-color h s calc(l - 55)); /* Type (information category) colors */ @mixin type-color success, $success-color; }