From 973464a07a7867545588620a50cebed9ae3107d3 Mon Sep 17 00:00:00 2001 From: upsiflu Date: Mon, 16 Dec 2024 15:04:01 +0100 Subject: [PATCH] feat(ui): set and document global dark colors (theme-dark) --- front/src/style/colors.scss | 320 ++++++++++++++++++++++----------- front/src/style/inc/theme.scss | 4 +- front/ui-docs/using-color.md | 294 +++++++++++++++++++++++------- 3 files changed, 450 insertions(+), 168 deletions(-) diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss index 1d2ec6a38..feddb3b65 100644 --- a/front/src/style/colors.scss +++ b/front/src/style/colors.scss @@ -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); - } - } -} diff --git a/front/src/style/inc/theme.scss b/front/src/style/inc/theme.scss index a388c705c..655f8339f 100644 --- a/front/src/style/inc/theme.scss +++ b/front/src/style/inc/theme.scss @@ -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 diff --git a/front/ui-docs/using-color.md b/front/ui-docs/using-color.md index a60c49f55..a778ae01b 100644 --- a/front/ui-docs/using-color.md +++ b/front/ui-docs/using-color.md @@ -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 -
-
-
-
+Use neutral colors for non-interactive surfaces + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ ### Color -Primary +#### Primary -
-
-
-
+Only use for at most one call-to-action on a screen -Secondary + +
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+ -Destructive +#### Secondary -
-
-
-
+Use for interactive items and colatilv surfaces such as menus and modals + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +#### Destructive + +Use for dangerous actions + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ ### Pastel -Blue, Red, Purple, Green, Yellow +Use `Blue`, `Red`, `Purple`, `Green`, `Yellow` for user-defined tags and for friendly messages such as +Alerts
@@ -93,58 +172,143 @@ Blue, Red, Purple, Green, Yellow
---- - ### Variant -Solid (default), Ghost, Outline +You can de-emphasize interactive elements by hiding their background and/or outline. + +`Solid` (default), `Ghost`, `Outline`:

---- +
+
### Interactive and/or Raised -
-
-
+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. + + + +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Normal +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Raised +
+
+ + + + +| neutral | +| --------- | +| secondary | +| primary | + +| (normal) | interactive | disabled | pressed | +| -------- | ----------- | -------- | ------- | + + + ## 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