0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-18 02:32:13 -05:00

Add css variables and theme switch

This commit is contained in:
Eva 2023-03-01 16:00:34 +01:00 committed by Alonso Torres
parent b77f85b697
commit adffdb31f3
42 changed files with 225 additions and 60 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
:root {
--font-family: "worksans", sans-serif;

View file

@ -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) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
// Colors
$color-white: #ffffff;

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
// Padding & Margin sizes
$size-1: 0.25rem;

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
/// 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

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
$autocomplete: 30000;
$index-lightbox-shadow: 60000;

View file

@ -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) 2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
// Buttons

View file

@ -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%;

View file

@ -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;
}

View file

@ -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);
}

View file

@ -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);

View file

@ -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

View file

@ -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);

View file

@ -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";

View file

@ -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);
}

View file

@ -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);
}

View file

@ -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";

View file

@ -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) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
// TODO: rename to auth.scss

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
.colorpicker {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
input,
select,

View file

@ -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) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
.left-toolbar {
background-color: $color-gray-50;

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
.project-bar {
background-color: $color-gray-50;

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
.align-options {
display: flex;

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
.assets-bar {
display: flex;

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
.figures-catalog {
width: 100%;

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
.interactions-help {
font-size: $fs12;

View file

@ -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) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
.element-list-body {
align-items: center;

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
#sitemap {
height: var(--height, 200px);

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
.drawing-tools {
max-height: 185px;

View file

@ -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) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
.settings-bar {
background-color: $color-gray-50;

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
.tool-bar {
background-color: $color-gray-40;

View file

@ -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) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// Copyright (c) KALEIDOS INC
$width-left-toolbar: 48px;

View file

@ -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))
(some-> (:theme profile)
(theme/set-current-theme!))))))
(i18n/set-locale! (:lang profile))))))
(defn fetch-profile
[]

View file

@ -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

View file

@ -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)

View file

@ -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"}]
:data-test "theme-lang"}]]
:options [{:label "Penpot Dark (default)" :value "default"}
{:label "Penpot Light" :value "light"}]
:data-test "setting-theme"}]]
[:& fm/submit-button
{:label (tr "dashboard.update-settings")
:data-test "submit-lang-change"}]]))

View file

@ -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 []

View file

@ -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

View file

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