✨ Add css variables and theme switch

frontend/resources/styles/common/base.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 :root {
   --font-family: "worksans", sans-serif;

frontend/resources/styles/common/dependencies/colors.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 // Colors
 $color-white: #ffffff;

frontend/resources/styles/common/dependencies/helpers.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 // Padding & Margin sizes
 $size-1: 0.25rem;

frontend/resources/styles/common/dependencies/mixin.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 /// This mixin allows you  to add styles to a specific Media query inside the style selector specifying which Breaking Point you want to choose.
 /// @group Mixins

frontend/resources/styles/common/dependencies/z-index.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 $autocomplete: 30000;
 $index-lightbox-shadow: 60000;

frontend/resources/styles/common/framework.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2020 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 // Buttons
 

frontend/resources/styles/common/refactor/borders.scss

@@ -0,0 +1,21 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+// Border radius
+$br0: 0px;
+$br2: 2px;
+$br3: 3px;
+$br4: 4px;
+$br5: 5px;
+$br6: 6px;
+$br7: 7px;
+$br8: 8px;
+$br10: 10px;
+$br12: 12px;
+$br25: 25px;
+$br50: 50px;
+$br99: 99px;
+$br-circle: 50%;

frontend/resources/styles/common/refactor/color-defs.scss

@@ -0,0 +1,31 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+:root {
+  // DARK
+  --dark-gray-1: #171a1c;
+  --dark-gray-2: #000;
+  --dark-gray-3: #252a2d;
+  --dark-gray-4: #34393b;
+  --white: #fff;
+  --off-white: #aab5ba;
+  --green: #91fadb;
+  --green-30: rgba(145, 250, 219, 0.3);
+  --lilac: #bb97d8;
+  --strong-green: #00d1b8;
+
+  // LIGHT
+  --light-gray-1: #fff;
+  --light-gray-2: #e8eaee;
+  --light-gray-3: #f3f4f6;
+  --light-gray-4: #eef0f2;
+  --black: #000;
+  --off-black: #495e74;
+  --purple: #6911d4;
+  --purple-30: rgba(105, 17, 212, 0.2);
+  --blue: #1345aa;
+  --strong-purple: #8c33eb;
+}

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -0,0 +1,11 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+.light,
+.default {
+  --button-bg-active: var(--color-background-primary);
+  --button-foreground-active: var(--color-foreground-primary);
+}

frontend/resources/styles/common/refactor/fonts.scss

@@ -0,0 +1,36 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "sass:math";
+
+// Font sizes
+$fs10: 0.625rem;
+$fs12: 0.75rem;
+$fs14: 0.875rem;
+
+// Typography scale
+$fs-base: 16;
+
+$fs-9: math.div(9, $fs-base) + rem;
+$fs-12: math.div(12, $fs-base) + rem;
+$fs-14: math.div(14, $fs-base) + rem;
+$fs-19: math.div(19, $fs-base) + rem;
+$fs-25: math.div(25, $fs-base) + rem;
+$fs-33: math.div(33, $fs-base) + rem;
+$fs-44: math.div(44, $fs-base) + rem;
+
+// Font weight
+$fw400: 400; // Regular (CSS value: 'normal')
+$fw500: 500; // Medium
+$fw700: 700; // Bold (CSS value: 'bold')
+
+// Work Sans
+@include font-face("worksans", "WorkSans-Regular", normal);
+@include font-face("worksans", "WorkSans-Medium", "500");
+@include font-face("worksans", "WorkSans-Bold", bold);
+
+// Space mono
+@include font-face("spacemono", "SpaceMono-Regular", normal);

frontend/resources/styles/common/refactor/shadows.scss

@@ -0,0 +1,5 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC

frontend/resources/styles/common/refactor/spacing.scss

@@ -0,0 +1,26 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+$spacing-4: 0.25rem;
+$spacing-8: calc(var(--spacing-4) * 2);
+$spacing-12: calc(var(--spacing-4) * 3);
+$spacing-16: calc(var(--spacing-4) * 4);
+$spacing-20: calc(var(--spacing-4) * 5);
+$spacing-24: calc(var(--spacing-4) * 6);
+$spacing-28: calc(var(--spacing-4) * 7);
+$spacing-32: calc(var(--spacing-4) * 8);
+$spacing-36: calc(var(--spacing-4) * 9);
+$spacing-40: calc(var(--spacing-4) * 10);
+$spacing-44: calc(var(--spacing-4) * 11);
+$spacing-48: calc(var(--spacing-4) * 12);
+$spacing-52: calc(var(--spacing-4) * 13);
+$spacing-56: calc(var(--spacing-4) * 14);
+$spacing-60: calc(var(--spacing-4) * 15);
+$spacing-64: calc(var(--spacing-4) * 16);
+$spacing-68: calc(var(--spacing-4) * 17);
+$spacing-72: calc(var(--spacing-4) * 18);
+$spacing-76: calc(var(--spacing-4) * 19);
+$spacing-80: calc(var(--spacing-4) * 20);

frontend/resources/styles/common/refactor/themes.scss

@@ -0,0 +1,8 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "./themes/default-theme.scss";
+@import "./themes/light-theme.scss";

frontend/resources/styles/common/refactor/themes/default-theme.scss

@@ -0,0 +1,18 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+:root {
+  --color-background-primary: var(--dark-gray-1);
+  --color-background-secondary: var(--dark-gray-2);
+  --color-background-tertiary: var(--dark-gray-3);
+  --color-background-quaternary: var(--dark-gray-4);
+  --color-foreground-primary: var(--white);
+  --color-foreground-secondary: var(--off-white);
+  --accent-primary: var(--green);
+  --accent-primary-muted: var(--green-30);
+  --accent-secondary: var(--lilac);
+  --accent-tertiary: var(--strong-green);
+}

frontend/resources/styles/common/refactor/themes/light-theme.scss

@@ -0,0 +1,18 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+.light {
+  --color-background-primary: var(--light-gray-1);
+  --color-background-secondary: var(--light-gray-2);
+  --color-background-tertiary: var(--light-gray-3);
+  --color-background-quaternary: var(--light-gray-4);
+  --color-foreground-primary: var(--black);
+  --color-foreground-secondary: var(--off-black);
+  --accent-primary: var(--purple);
+  --accent-primary-muted: var(--purple-30);
+  --accent-secondary: var(--blue);
+  --accent-tertiary: var(--strong-purple);
+}

frontend/resources/styles/main-default.scss

@@ -90,3 +90,19 @@
 @import "main/partials/exception-page";
 @import "main/partials/share-link";
 @import "main/partials/af-signup-questions";
+
+//#################################################
+// Refactor
+//#################################################
+
+//#################################################
+// MAIN STYLES
+//#################################################
+
+@import "common/refactor/color-defs.scss";
+@import "common/refactor/themes.scss";
+@import "common/refactor/design-tokens.scss";
+@import "common/refactor/fonts.scss";
+@import "common/refactor/spacing.scss";
+@import "common/refactor/borders.scss";
+@import "common/refactor/shadows.scss";

frontend/resources/styles/main/layouts/login.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 // TODO: rename to auth.scss
 

frontend/resources/styles/main/partials/colorpicker.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .colorpicker {
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

frontend/resources/styles/main/partials/forms.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 input,
 select,

frontend/resources/styles/main/partials/left-toolbar.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .left-toolbar {
   background-color: $color-gray-50;

frontend/resources/styles/main/partials/project-bar.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .project-bar {
   background-color: $color-gray-50;

frontend/resources/styles/main/partials/sidebar-align-options.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .align-options {
   display: flex;

frontend/resources/styles/main/partials/sidebar-assets.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .assets-bar {
   display: flex;

frontend/resources/styles/main/partials/sidebar-icons.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .figures-catalog {
   width: 100%;

frontend/resources/styles/main/partials/sidebar-interactions.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .interactions-help {
   font-size: $fs12;

frontend/resources/styles/main/partials/sidebar-layers.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .element-list-body {
   align-items: center;

frontend/resources/styles/main/partials/sidebar-sitemap.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 #sitemap {
   height: var(--height, 200px);

frontend/resources/styles/main/partials/sidebar-tools.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .drawing-tools {
   max-height: 185px;

frontend/resources/styles/main/partials/sidebar.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .settings-bar {
   background-color: $color-gray-50;

frontend/resources/styles/main/partials/tool-bar.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .tool-bar {
   background-color: $color-gray-40;

frontend/resources/styles/main/partials/workspace.scss

@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) KALEIDOS INC
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 $width-left-toolbar: 48px;
 

frontend/src/app/main/data/users.cljs

@@ -18,7 +18,6 @@
    [app.util.i18n :as i18n]
    [app.util.router :as rt]
    [app.util.storage :refer [storage]]
-   [app.util.theme :as theme]
    [beicon.core :as rx]
    [cljs.spec.alpha :as s]
    [potok.core :as ptk]))
@@ -115,9 +114,7 @@
     (effect [_ state _]
       (when-let [profile (:profile state)]
         (swap! storage assoc :profile profile)
-        (i18n/set-locale! (:lang profile))
+        (i18n/set-locale! (:lang profile))))))
-        (some-> (:theme profile)
-                (theme/set-current-theme!))))))
 
 (defn fetch-profile
   []

frontend/src/app/main/ui.cljs

@@ -23,6 +23,7 @@
    [app.main.ui.static :as static]
    [app.main.ui.viewer :as viewer]
    [app.main.ui.workspace :as workspace]
+   [app.util.dom :as dom]
    [app.util.router :as rt]
    [rumext.v2 :as mf]))
 
@@ -128,7 +129,11 @@
   []
   (let [route   (mf/deref refs/route)
         edata   (mf/deref refs/exception)
-        profile (mf/deref refs/profile)]
+        profile (mf/deref refs/profile)
+        theme   (or (:theme profile) "default")]
+
+    (mf/with-effect [theme]
+      (dom/set-html-theme-color theme))
     [:& (mf/provider ctx/current-route) {:value route}
      [:& (mf/provider ctx/current-profile) {:value profile}
       (if edata

frontend/src/app/main/ui/dashboard.cljs

@@ -6,7 +6,6 @@
 
 (ns app.main.ui.dashboard
   (:require
-   [app.common.colors :as clr]
    [app.common.data :as d]
    [app.common.math :as mth]
    [app.common.spec :as us]
@@ -318,7 +317,6 @@
 
     (mf/use-effect
      (fn []
-       (dom/set-html-theme-color clr/white "light")
        (let [events [(events/listen goog/global EventType.KEYDOWN
                                     (fn [event]
                                       (when (kbd/enter? event)

frontend/src/app/main/ui/settings/options.cljs

@@ -55,14 +55,14 @@
                      :name :lang
                      :data-test "setting-lang"}]]
 
-     ;; TODO: Do not show as long as we only have one theme
      #_[:h2 (tr "dashboard.theme-change")]
      #_[:div.fields-row
       [:& fm/select {:label (tr "dashboard.select-ui-theme")
                      :name :theme
                      :default "default"
-                     :options [{:label "Default" :value "default"}]
+                     :options [{:label "Penpot Dark (default)" :value "default"}
-                     :data-test "theme-lang"}]]
+                               {:label "Penpot Light" :value "light"}]
+                     :data-test "setting-theme"}]]
      [:& fm/submit-button
       {:label (tr "dashboard.update-settings")
        :data-test "submit-lang-change"}]]))

frontend/src/app/main/ui/viewer.cljs

@@ -6,7 +6,6 @@
 
 (ns app.main.ui.viewer
   (:require
-   [app.common.colors :as clr]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.exceptions :as ex]
@@ -347,7 +346,6 @@
          (dom/set-html-title (str "\u25b6 " (tr "title.viewer" name))))))
 
     (mf/with-effect []
-      (dom/set-html-theme-color clr/gray-50 "dark")
       (let [key1 (events/listen js/window "click" on-click)
             key2 (events/listen (mf/ref-val viewer-section-ref) "wheel" on-wheel #js {"passive" false})]
         (fn []

frontend/src/app/main/ui/workspace.cljs

@@ -6,7 +6,6 @@
 
 (ns app.main.ui.workspace
   (:require
-   [app.common.colors :as clr]
    [app.common.data.macros :as dm]
    [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
@@ -150,7 +149,6 @@
 
     ;; Set html theme color and close any non-modal dialog that may be still open
     (mf/with-effect
-      (dom/set-html-theme-color clr/gray-50 "dark")
       (st/emit! msg/hide))
 
     ;; Set properly the page title

frontend/src/app/util/dom.cljs

@@ -58,10 +58,10 @@
   (.setAttribute (.querySelector js/document "html") "lang" lang))
 
 (defn set-html-theme-color
-  [^string color scheme]
+  [^string color]
-  (let [meta-node (.querySelector js/document "meta[name='theme-color']")]
+  (let [node (.querySelector js/document "body")]
-    (.setAttribute meta-node "content" color)
+    (.removeAttribute node "class")
-    (.setAttribute meta-node "media" (str/format "(prefers-color-scheme: %s)" scheme))))
+    (.add ^js (.-classList ^js node) color)))
 
 (defn set-page-style!
   [styles]