feat(ui): set and document global dark colors (theme-dark)
This commit is contained in:
upsiflu
parent
24c3eec56a
commit
973464a07a
|
|
@ -22,9 +22,12 @@
|
|||
// Blue
|
||||
--fw-blue-010: #fdfdff;
|
||||
--fw-blue-100: #65a2bb;
|
||||
--fw-blue-400: #067cae;
|
||||
--fw-blue-500: #05719e;
|
||||
--fw-blue-600: #00638c;
|
||||
--fw-blue-400: #0a85ae;
|
||||
// was --fw-blue-400: #067cae;
|
||||
--fw-blue-500: #05769d;
|
||||
// was --fw-blue-500: #05719e;
|
||||
--fw-blue-600: #00658c;
|
||||
// was --fw-blue-600: #00638c;
|
||||
--fw-blue-700: #004f70;
|
||||
--fw-blue-800: #003f5a;
|
||||
--fw-blue-900: #1f1f2d;
|
||||
|
|
@ -174,9 +177,7 @@
|
|||
}
|
||||
:root{
|
||||
@include light-theme {
|
||||
--fw-page-bg-color: var(--fw-beige-100);
|
||||
|
||||
.default {
|
||||
.default, body {
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: var(--fw-beige-100);
|
||||
--border-color:var(--fw-gray-300);
|
||||
|
|
@ -185,11 +186,11 @@
|
|||
--hover-background-color:var(--fw-beige-200);
|
||||
--hover-border-color:var(--fw-gray-800);
|
||||
|
||||
--active-color:var(--fw-red-40);
|
||||
--active-color:var(--fw-red-010);
|
||||
--active-background-color:var(--fw-beige-400);
|
||||
--active-border-color:var(--fw-gray-600);
|
||||
|
||||
--pressed-color:var(--fw-red-40);
|
||||
--pressed-color:var(--fw-red-010);
|
||||
--pressed-background-color:var(--fw-gray-900);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
|
|
@ -202,31 +203,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary {
|
||||
--color: var(--fw-blue-010);
|
||||
--background-color:var(--fw-blue-400);
|
||||
--border-color:var(--fw-blue-010);
|
||||
|
||||
--hover-color: var(--fw-blue-010);
|
||||
--hover-background-color:var(--fw-blue-500);
|
||||
|
||||
--active-color: var(--fw-blue-010);
|
||||
--active-background-color:var(--fw-blue-600);
|
||||
|
||||
--pressed-color:var(--fw-blue-010);
|
||||
--pressed-background-color:var(--fw-blue-800);
|
||||
|
||||
--disabled-color:var(--fw-blue-900);
|
||||
--disabled-background-color:var(--fw-blue-100);
|
||||
--disabled-border-color:var(--fw-blue-100);
|
||||
|
||||
&.raised {
|
||||
--background-color:var(--fw-blue-500);
|
||||
--hover-background-color:var(--fw-blue-600);
|
||||
--active-background-color:var(--fw-blue-700);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary, button {
|
||||
--color: var(--fw-gray-700);
|
||||
--background-color: var(--fw-gray-200);
|
||||
|
|
@ -255,6 +231,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
.primary {
|
||||
--color: var(--fw-blue-010);
|
||||
--background-color:var(--fw-blue-400);
|
||||
--border-color:var(--fw-blue-010);
|
||||
|
||||
--hover-color: var(--fw-blue-010);
|
||||
--hover-background-color:var(--fw-blue-500);
|
||||
|
||||
--active-color: var(--fw-blue-010);
|
||||
--active-background-color:var(--fw-blue-600);
|
||||
|
||||
--pressed-color:var(--fw-blue-010);
|
||||
--pressed-background-color:var(--fw-blue-800);
|
||||
|
||||
--disabled-color:var(--fw-blue-900);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-blue-100) 20%, var(--fw-blue-400));
|
||||
--disabled-border-color:transparent;
|
||||
|
||||
&.raised {
|
||||
--background-color:var(--fw-blue-500);
|
||||
--hover-background-color:var(--fw-blue-600);
|
||||
--active-background-color:var(--fw-blue-700);
|
||||
}
|
||||
}
|
||||
|
||||
.destructive {
|
||||
--color: var(--fw-red-010);
|
||||
--background-color: var(--fw-red-500);
|
||||
|
|
@ -276,7 +277,7 @@
|
|||
.blue {
|
||||
--color: var(--fw-blue-900);
|
||||
--background-color: var(--fw-pastel-blue-1);
|
||||
.raised, button {
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-blue-2);
|
||||
--hover-background-color: var(--fw-pastel-blue-3);
|
||||
--active-background-color: var(--fw-pastel-blue-4);
|
||||
|
|
@ -289,109 +290,222 @@
|
|||
.red {
|
||||
--color: var(--fw-red-900);
|
||||
--background-color: var(--fw-pastel-red-2);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-red-2);
|
||||
--hover-background-color: var(--fw-pastel-red-3);
|
||||
--active-background-color: var(--fw-pastel-red-4);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.purple {
|
||||
--color: var(--fw-gray-970);
|
||||
--background-color: var(--fw-pastel-purple-1);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-purple-2);
|
||||
--hover-background-color: var(--fw-pastel-purple-3);
|
||||
--active-background-color: var(--fw-pastel-purple-4);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: var(--fw-pastel-green-1);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-green-2);
|
||||
--hover-background-color: var(--fw-pastel-green-3);
|
||||
--active-background-color: var(--fw-pastel-green-4);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.yellow {
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: var(--fw-pastel-yellow-1);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-yellow-2);
|
||||
--hover-background-color: var(--fw-pastel-yellow-3);
|
||||
--active-background-color: var(--fw-pastel-yellow-4);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
.is-primary {
|
||||
--fw-bg-color: var(--fw-blue-600);
|
||||
--fw-text-color: var(--fw-blue-010);
|
||||
.default, body {
|
||||
--color: var(--fw-beige-100);
|
||||
--background-color: var(--fw-gray-970);
|
||||
--border-color:var(--fw-gray-700);
|
||||
|
||||
&.is-colored {
|
||||
&[disabled] {
|
||||
--fw-bg-color: var(--fw-blue-100) !important;
|
||||
--fw-text-color: var(--fw-blue-900) !important;
|
||||
}
|
||||
--hover-color:var(--fw-beige-400);
|
||||
--hover-background-color:var(--fw-gray-950);
|
||||
--hover-border-color:var(--fw-beige-400);
|
||||
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
--fw-bg-color: var(--fw-blue-700);
|
||||
}
|
||||
--active-color:var(--fw-gray-600);
|
||||
--active-background-color:var(--fw-beige-400);
|
||||
--active-border-color:var(--fw-gray-600);
|
||||
|
||||
&.is-active,
|
||||
&.active,
|
||||
&:active {
|
||||
--fw-bg-color: var(--fw-blue-800);
|
||||
&.router-link-exact-active {
|
||||
--fw-bg-color: var(--fw-blue-900);
|
||||
}
|
||||
}
|
||||
--pressed-color:var(--fw-red-010);
|
||||
--pressed-background-color:var(--fw-gray-900);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-gray-950);
|
||||
--disabled-border-color:var(--fw-gray-950);
|
||||
|
||||
&.raised{
|
||||
--background-color:var(--fw-gray-800);
|
||||
--border-color:var(--fw-gray-600);
|
||||
}
|
||||
}
|
||||
|
||||
.is-secondary {
|
||||
--fw-bg-color: var(--fw-gray-700);
|
||||
--fw-text-color: var(--fw-red-010);
|
||||
.secondary, button {
|
||||
--color: var(--fw-gray-300);
|
||||
--background-color: var(--fw-gray-850);
|
||||
--border-color:var(--fw-gray-600);
|
||||
|
||||
&.is-colored {
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
--fw-bg-color: var(--fw-gray-950);
|
||||
}
|
||||
--hover-color:var(--fw-gray-200);
|
||||
--hover-background-color:var(--fw-gray-800);
|
||||
--hover-border-color:var(--fw-gray-300);
|
||||
|
||||
&.is-active,
|
||||
&.active,
|
||||
&:active {
|
||||
--fw-bg-color: var(--fw-gray-900);
|
||||
&.router-link-exact-active {
|
||||
--fw-bg-color: var(--fw-gray-850);
|
||||
}
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
--fw-bg-color: var(--fw-gray-600)
|
||||
--fw-text-color: var(--fw-gray-950)
|
||||
--active-color:var(--fw-gray-300);
|
||||
--active-background-color:var(--fw-gray-970);
|
||||
--active-border-color:var(--fw-gray-400);
|
||||
|
||||
--pressed-color:var(--fw-beige-200);
|
||||
--pressed-background-color:var(--fw-gray-900);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-gray-900) 20%, var(--fw-gray-950));
|
||||
--disabled-border-color:transparent;
|
||||
|
||||
&.raised {
|
||||
--color: var(--fw-gray-200);
|
||||
--background-color:var(--fw-gray-700);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-gray-800) 80%, var(--fw-gray-700));
|
||||
--border-color:var(--fw-gray-500);
|
||||
--hover-background-color:color-mix(in oklab, var(--fw-gray-600) 20%, var(--fw-gray-700));
|
||||
--active-color:var(--fw-gray-400);
|
||||
--active-background-color:var(--fw-gray-900);
|
||||
}
|
||||
}
|
||||
|
||||
.is-destructive {
|
||||
--fw-bg-color: var(--fw-red-600);
|
||||
--fw-text-color: var(--fw-red-010);
|
||||
.primary {
|
||||
--color: var(--fw-blue-010);
|
||||
--background-color:var(--fw-blue-600);
|
||||
--border-color:var(--fw-blue-010);
|
||||
|
||||
&.is-colored {
|
||||
&[disabled] {
|
||||
--fw-bg-color: var(--fw-red-100) !important;
|
||||
--fw-text-color: var(--fw-red-900) !important;
|
||||
}
|
||||
--hover-color: var(--fw-blue-010);
|
||||
--hover-background-color:var(--fw-blue-500);
|
||||
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
--fw-bg-color: var(--fw-red-700);
|
||||
}
|
||||
--active-color: var(--fw-blue-010);
|
||||
--active-background-color:var(--fw-blue-800);
|
||||
|
||||
&.is-active,
|
||||
&.active,
|
||||
&:active {
|
||||
--fw-bg-color: var(--fw-red-800);
|
||||
}
|
||||
--pressed-color:var(--fw-blue-010);
|
||||
--pressed-background-color:var(--fw-blue-700);
|
||||
|
||||
--disabled-color:color-mix(in oklab, var(--fw-blue-010) 10%, var(--fw-blue-100));
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-blue-700) 50%, var(--fw-blue-600));
|
||||
--disabled-border-color:transparent;
|
||||
|
||||
|
||||
&.raised {
|
||||
--background-color:var(--fw-blue-500);
|
||||
--hover-background-color:var(--fw-blue-400);
|
||||
--active-background-color:var(--fw-blue-900);
|
||||
--disabled-background-color:color-mix(in oklab, var(--fw-blue-500) 20%, var(--fw-blue-600));
|
||||
}
|
||||
}
|
||||
|
||||
.destructive {
|
||||
--color: var(--fw-red-010);
|
||||
--background-color: var(--fw-red-500);
|
||||
--border-color:var(--fw-red-500);
|
||||
|
||||
--hover-color:var(--fw-gray-100);
|
||||
--hover-background-color:var(--fw-red-600);
|
||||
--hover-border-color:var(--fw-red-600);
|
||||
|
||||
--active-color:var(--fw-gray-100);
|
||||
--active-background-color:var(--fw-red-700);
|
||||
--active-border-color:var(--fw-red-700);
|
||||
|
||||
--disabled-color:var(--fw-gray-500);
|
||||
--disabled-background-color:var(--fw-gray-100);
|
||||
--disabled-border-color:var(--fw-gray-100);
|
||||
}
|
||||
|
||||
.blue {
|
||||
--color: var(--fw-blue-900);
|
||||
--background-color: var(--fw-pastel-blue-1);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-blue-2);
|
||||
--hover-background-color: var(--fw-pastel-blue-3);
|
||||
--active-background-color: var(--fw-pastel-blue-4);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.red {
|
||||
--color: var(--fw-red-900);
|
||||
--background-color: var(--fw-pastel-red-2);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-red-2);
|
||||
--hover-background-color: var(--fw-pastel-red-3);
|
||||
--active-background-color: var(--fw-pastel-red-4);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.purple {
|
||||
--color: var(--fw-gray-970);
|
||||
--background-color: var(--fw-pastel-purple-1);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-purple-2);
|
||||
--hover-background-color: var(--fw-pastel-purple-3);
|
||||
--active-background-color: var(--fw-pastel-purple-4);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: var(--fw-pastel-green-1);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-green-2);
|
||||
--hover-background-color: var(--fw-pastel-green-3);
|
||||
--active-background-color: var(--fw-pastel-green-4);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.yellow {
|
||||
--color: var(--fw-gray-900);
|
||||
--background-color: var(--fw-pastel-yellow-1);
|
||||
&.raised, .action>button {
|
||||
--background-color: var(--fw-pastel-yellow-2);
|
||||
--hover-background-color: var(--fw-pastel-yellow-3);
|
||||
--active-background-color: var(--fw-pastel-yellow-4);
|
||||
--disabled-color: var(--fw-gray-700);
|
||||
--disabled-border-color: var(--fw-gray-400);
|
||||
--disabled-background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.funkwhale {
|
||||
@each $pastel in ("blue", "red", "green", "purple", "yellow") {
|
||||
&.is-#{$pastel} {
|
||||
--fw-pastel-1: var(--fw-pastel-#{$pastel}-1);
|
||||
--fw-pastel-2: var(--fw-pastel-#{$pastel}-2);
|
||||
--fw-pastel-3: var(--fw-pastel-#{$pastel}-3);
|
||||
--fw-pastel-4: var(--fw-pastel-#{$pastel}-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ $font-main: "Lato", sans-serif;
|
|||
@mixin theme($isDark) {
|
||||
$root-selectors: ();
|
||||
/* Satisfy both vitepress (docs) and funkwhale (front) convention */
|
||||
$root-element: ":is(body.theme-dark, html.dark>body:not(.theme-light))";
|
||||
$root-element: ":is(body.theme-dark, html.dark>body:not(.theme-light), .force-dark-theme)";
|
||||
|
||||
@if $isDark == false {
|
||||
$root-element: ":is(body.theme-light, html:not(.dark)>body:not(.theme-dark))";
|
||||
$root-element: ":is(body.theme-light, html:not(.dark)>body:not(.theme-dark), .force-light-theme)";
|
||||
}
|
||||
|
||||
// If we call `@include dark-theme {}` at the root of the file
|
||||
|
|
|
|||
|
|
@ -53,39 +53,118 @@ import { color } from "~/composables/colors.ts";
|
|||
|
||||
## Base colors
|
||||
|
||||
Keep most of the screen neutral. Secondary surfaces indicate actionability. Use them sparingly. Primary and destructive surfaces immediately catch the eye. Use them only once or twice per screen.
|
||||
|
||||
### Neutral
|
||||
|
||||
<div :class="$style.swatch" v-bind="color('default solid')" />
|
||||
<div :class="$style.swatch" v-bind="color('default solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="color('default solid raised')" />
|
||||
<div :class="$style.swatch" v-bind="color('default solid interactive')" />
|
||||
Use neutral colors for non-interactive surfaces
|
||||
|
||||
<Layout flex>
|
||||
<div class="force-dark-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="$style.swatch" v-bind="color('default solid')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="color('default solid raised')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="force-light-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="$style.swatch" v-bind="color('default solid')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="color('default solid raised')" />
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('default solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
### Color
|
||||
|
||||
Primary
|
||||
#### Primary
|
||||
|
||||
<div :class="$style.swatch" v-bind="color('primary solid')" />
|
||||
<div :class="$style.swatch" v-bind="color('primary solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="color('primary solid raised')" />
|
||||
<div :class="$style.swatch" v-bind="color('primary solid interactive')" />
|
||||
Only use for at most one call-to-action on a screen
|
||||
|
||||
Secondary
|
||||
<Layout flex>
|
||||
<div class="force-dark-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('primary solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('primary solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid')" />
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid raised')" />
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid interactive')" />
|
||||
<div class="force-light-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('primary solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('primary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('primary solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
Destructive
|
||||
#### Secondary
|
||||
|
||||
<div :class="$style.swatch" v-bind="color('destructive solid')" />
|
||||
<div :class="$style.swatch" v-bind="color('destructive solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="color('destructive solid raised')" />
|
||||
<div :class="$style.swatch" v-bind="color('destructive solid interactive')" />
|
||||
Use for interactive items and colatilv surfaces such as menus and modals
|
||||
|
||||
<Layout flex>
|
||||
<div class="force-dark-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('secondary solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('secondary solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="force-light-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('secondary solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="$style.swatch" v-bind="color('secondary solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('secondary solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
#### Destructive
|
||||
|
||||
Use for dangerous actions
|
||||
|
||||
<Layout flex>
|
||||
<div class="force-dark-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('destructive solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('destructive solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="force-light-theme">
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('destructive solid interactive')" />
|
||||
</div><div v-bind="color('default solid raised')">
|
||||
<div :class="[$style.swatch, $style.deemphasized]" v-bind="color('destructive solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('destructive solid raised interactive')" />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
### Pastel
|
||||
|
||||
Blue, Red, Purple, Green, Yellow
|
||||
Use `Blue`, `Red`, `Purple`, `Green`, `Yellow` for user-defined tags and for friendly messages such as
|
||||
Alerts
|
||||
|
||||
<div :class="$style.swatch" v-bind="color('blue solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="color('red solid interactive')" />
|
||||
|
|
@ -93,58 +172,143 @@ Blue, Red, Purple, Green, Yellow
|
|||
<div :class="$style.swatch" v-bind="color('green solid interactive')" />
|
||||
<div :class="$style.swatch" v-bind="color('yellow solid interactive')" />
|
||||
|
||||
---
|
||||
|
||||
### Variant
|
||||
|
||||
Solid (default), Ghost, Outline
|
||||
You can de-emphasize interactive elements by hiding their background and/or outline.
|
||||
|
||||
`Solid` (default), `Ghost`, `Outline`:
|
||||
|
||||
<Button round shadow icon="bi-x" solid />
|
||||
|
||||
<div :class="$style.swatch" v-bind="color('solid raised')">
|
||||
<Button round icon="bi-x" ghost />
|
||||
<Spacer />
|
||||
<Button round icon="bi-x" outline />
|
||||
<Button round icon="bi-x" ghost />
|
||||
<Spacer />
|
||||
<Button round icon="bi-x" outline />
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<Button round shadow icon="bi-x" primary solid />
|
||||
<div :class="$style.swatch" v-bind="color('primary solid')">
|
||||
<Button round icon="bi-x" primary ghost />
|
||||
<Spacer />
|
||||
<Button round icon="bi-x" primary outline />
|
||||
</div>
|
||||
|
||||
---
|
||||
<div :class="$style.swatch" v-bind="color('primary solid')">
|
||||
<Button round icon="bi-x" primary ghost />
|
||||
<Spacer />
|
||||
<Button round icon="bi-x" primary outline />
|
||||
</div>
|
||||
|
||||
### Interactive and/or Raised
|
||||
|
||||
<div v-bind="color('default solid')" style="display:inline-flex;">
|
||||
<div :class="$style.swatch" v-bind="color('solid')" />
|
||||
<div :class="$style.swatch" v-bind="color('solid interactive')" />
|
||||
Use raised surfaces sparingly, about ¼ of the screen. Only use raised surfaces to highlight one area of a component over others. Good examples are `aside`s such as the sidebar or info-boxes.
|
||||
|
||||
Space out interactive surfaces.
|
||||
|
||||
<Layout>
|
||||
|
||||
<div class="force-light-theme">
|
||||
|
||||
<Layout flex>
|
||||
<div>
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
</div>
|
||||
<div v-bind="color('secondary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
</div>
|
||||
<div v-bind="color('primary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
</div>
|
||||
</div><div>
|
||||
<div v-bind="color('default raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
</div>
|
||||
<div v-bind="color('secondary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
</div>
|
||||
<div v-bind="color('primary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
</div>
|
||||
<div v-bind="color('secondary solid')" style="display:inline-flex;">
|
||||
<div :class="$style.swatch" v-bind="color('solid')" />
|
||||
<div :class="$style.swatch" v-bind="color('solid interactive')" />
|
||||
</div>
|
||||
<div v-bind="color('primary solid')" style="display:inline-flex;">
|
||||
<div :class="$style.swatch" v-bind="color('solid')" />
|
||||
<div :class="$style.swatch" v-bind="color('solid interactive')" />
|
||||
</div>
|
||||
<br/>
|
||||
<div v-bind="color('default raised solid')" style="display:inline-flex;">
|
||||
<div :class="$style.swatch" v-bind="color('solid raised')" />
|
||||
<div :class="$style.swatch" v-bind="color('solid interactive raised')" />
|
||||
</div>
|
||||
<div v-bind="color('secondary raised solid')" style="display:inline-flex;">
|
||||
<div :class="$style.swatch" v-bind="color('solid raised')" />
|
||||
<div :class="$style.swatch" v-bind="color('solid interactive raised')" />
|
||||
</div>
|
||||
<div v-bind="color('primary raised solid')" style="display:inline-flex;">
|
||||
<div :class="$style.swatch" v-bind="color('solid raised')" />
|
||||
<div :class="$style.swatch" v-bind="color('solid interactive raised')" />
|
||||
|
||||
<div class="force-dark-theme">
|
||||
|
||||
<Layout flex>
|
||||
<div>
|
||||
<div v-bind="color('default solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
</div>
|
||||
<div v-bind="color('secondary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
</div>
|
||||
<div v-bind="color('primary solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive')" aria-pressed="true"/>
|
||||
</div><br/>Normal
|
||||
</div><div>
|
||||
<div v-bind="color('default raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
</div>
|
||||
<div v-bind="color('secondary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
</div>
|
||||
<div v-bind="color('primary raised solid')">
|
||||
<div :class="[$style.swatch]" v-bind="color('solid raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" />
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" disabled/>
|
||||
<div :class="[$style.swatch]" v-bind="color('solid interactive raised')" aria-pressed="true"/>
|
||||
</div><br/><strong>Raised</strong>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
|
||||
</Layout>
|
||||
|
||||
<Layout flex style="align-items: center;">
|
||||
|
||||
| neutral |
|
||||
| --------- |
|
||||
| secondary |
|
||||
| primary |
|
||||
|
||||
| (normal) | interactive | disabled | pressed |
|
||||
| -------- | ----------- | -------- | ------- |
|
||||
|
||||
</Layout>
|
||||
|
||||
## Palette
|
||||
|
||||
The color palette consists of Blues, Reds, Grays, Beiges, as well as pastel blue/red/green/yellow.
|
||||
|
|
@ -281,6 +445,8 @@ It's good practice to limit the scope of a variable to the module that needs it:
|
|||
|
||||
Read more about [style modules in the corresponding vue docs](https://vuejs.org/api/sfc-css-features.html#css-modules).
|
||||
|
||||
For testing purposes and side-by-side comparisons, you can add the classes `force-dark-theme` and `force-light-theme`.
|
||||
|
||||
## Semantic colors
|
||||
|
||||
We use semantic color variables that can mean a different shade depending on the currently chosen theme
|
||||
|
|
@ -334,6 +500,7 @@ For each semantic color, we set a foreground and a background. In addition, we n
|
|||
|
||||
<style module>
|
||||
.swatch {
|
||||
transition:all .15s, filter 0s;
|
||||
border-radius: 2em;
|
||||
min-width: 3.2em;
|
||||
min-height: 3.2em;
|
||||
|
|
@ -344,26 +511,27 @@ For each semantic color, we set a foreground and a background. In addition, we n
|
|||
justify-items:center;
|
||||
position:relative;
|
||||
|
||||
&::after{
|
||||
&::after {
|
||||
position:absolute;
|
||||
inset:13%;
|
||||
content:"fw";
|
||||
line-height:2.68em;
|
||||
font-size:80%;
|
||||
text-align: center;
|
||||
outline: 2.5px dashed currentcolor;
|
||||
outline-offset:-.95em;
|
||||
transform:rotate(15deg);
|
||||
letter-spacing:-.02em;
|
||||
font-weight:800;
|
||||
}
|
||||
&:is(:not(:global(.solid)):not(:hover),:has(*))::after{
|
||||
&:is(:not(:global(.solid)):not(:hover),:has(*))::after {
|
||||
opacity:0
|
||||
}
|
||||
|
||||
&:not(:hover)::after{
|
||||
outline-color:transparent;
|
||||
}
|
||||
}
|
||||
:not(:hover)>.deemphasized {
|
||||
filter:blur(4px);
|
||||
opacity:.5;
|
||||
&::after {
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
.small, .tiny {
|
||||
|
|
|
|||
Loading…
Reference in New Issue