mirror of
https://github.com/penpot/penpot.git
synced 2025-03-17 18:21:23 -05:00
✨ Add css variables and theme switch
This commit is contained in:
Eva
Alonso Torres
parent
b77f85b697
commit
adffdb31f3
42 changed files with 225 additions and 60 deletions
BIN
frontend/resources/fonts/SpaceMono-Bold.ttf
Normal file
BIN
frontend/resources/fonts/SpaceMono-Bold.ttf
Normal file
Binary file not shown.
BIN
frontend/resources/fonts/SpaceMono-BoldItalic.ttf
Normal file
BIN
frontend/resources/fonts/SpaceMono-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
frontend/resources/fonts/SpaceMono-Italic.ttf
Normal file
BIN
frontend/resources/fonts/SpaceMono-Italic.ttf
Normal file
Binary file not shown.
BIN
frontend/resources/fonts/SpaceMono-Regular.ttf
Normal file
BIN
frontend/resources/fonts/SpaceMono-Regular.ttf
Normal file
Binary file not shown.
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
21
frontend/resources/styles/common/refactor/borders.scss
Normal file
21
frontend/resources/styles/common/refactor/borders.scss
Normal 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%;
|
||||
31
frontend/resources/styles/common/refactor/color-defs.scss
Normal file
31
frontend/resources/styles/common/refactor/color-defs.scss
Normal 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;
|
||||
}
|
||||
11
frontend/resources/styles/common/refactor/design-tokens.scss
Normal file
11
frontend/resources/styles/common/refactor/design-tokens.scss
Normal 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);
|
||||
}
|
||||
36
frontend/resources/styles/common/refactor/fonts.scss
Normal file
36
frontend/resources/styles/common/refactor/fonts.scss
Normal 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);
|
||||
5
frontend/resources/styles/common/refactor/shadows.scss
Normal file
5
frontend/resources/styles/common/refactor/shadows.scss
Normal 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
|
||||
26
frontend/resources/styles/common/refactor/spacing.scss
Normal file
26
frontend/resources/styles/common/refactor/spacing.scss
Normal 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);
|
||||
8
frontend/resources/styles/common/refactor/themes.scss
Normal file
8
frontend/resources/styles/common/refactor/themes.scss
Normal 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";
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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"}]]))
|
||||
|
|
|
|||
|
|
@ -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 []
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue