diff --git a/frontend/resources/fonts/SpaceMono-Bold.ttf b/frontend/resources/fonts/SpaceMono-Bold.ttf new file mode 100644 index 000000000..20e344951 Binary files /dev/null and b/frontend/resources/fonts/SpaceMono-Bold.ttf differ diff --git a/frontend/resources/fonts/SpaceMono-BoldItalic.ttf b/frontend/resources/fonts/SpaceMono-BoldItalic.ttf new file mode 100644 index 000000000..ff2ea5a5c Binary files /dev/null and b/frontend/resources/fonts/SpaceMono-BoldItalic.ttf differ diff --git a/frontend/resources/fonts/SpaceMono-Italic.ttf b/frontend/resources/fonts/SpaceMono-Italic.ttf new file mode 100644 index 000000000..f36282f26 Binary files /dev/null and b/frontend/resources/fonts/SpaceMono-Italic.ttf differ diff --git a/frontend/resources/fonts/SpaceMono-Regular.ttf b/frontend/resources/fonts/SpaceMono-Regular.ttf new file mode 100644 index 000000000..04e56b923 Binary files /dev/null and b/frontend/resources/fonts/SpaceMono-Regular.ttf differ diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index c961d3954..f26095188 100644 --- a/frontend/resources/styles/common/base.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC :root { --font-family: "worksans", sans-serif; diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss index eb58034ef..5689308e8 100644 --- a/frontend/resources/styles/common/dependencies/colors.scss +++ b/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 -// Copyright (c) 2015-2020 Juan de la Cruz +// Copyright (c) KALEIDOS INC // Colors $color-white: #ffffff; diff --git a/frontend/resources/styles/common/dependencies/helpers.scss b/frontend/resources/styles/common/dependencies/helpers.scss index bad304b97..005357e6a 100644 --- a/frontend/resources/styles/common/dependencies/helpers.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC // Padding & Margin sizes $size-1: 0.25rem; diff --git a/frontend/resources/styles/common/dependencies/mixin.scss b/frontend/resources/styles/common/dependencies/mixin.scss index 0daf5ff32..d2bb77b2c 100644 --- a/frontend/resources/styles/common/dependencies/mixin.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// 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 diff --git a/frontend/resources/styles/common/dependencies/z-index.scss b/frontend/resources/styles/common/dependencies/z-index.scss index 6324aa112..0275fbe3e 100644 --- a/frontend/resources/styles/common/dependencies/z-index.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC $autocomplete: 30000; $index-lightbox-shadow: 60000; diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 1e8abb2df..7475cc951 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/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 -// Copyright (c) 2020 Juan de la Cruz +// Copyright (c) KALEIDOS INC // Buttons diff --git a/frontend/resources/styles/common/refactor/borders.scss b/frontend/resources/styles/common/refactor/borders.scss new file mode 100644 index 000000000..851f894d7 --- /dev/null +++ b/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%; diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss new file mode 100644 index 000000000..0cfc7cf52 --- /dev/null +++ b/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; +} diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss new file mode 100644 index 000000000..4ba3ffa62 --- /dev/null +++ b/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); +} diff --git a/frontend/resources/styles/common/refactor/fonts.scss b/frontend/resources/styles/common/refactor/fonts.scss new file mode 100644 index 000000000..94262bc16 --- /dev/null +++ b/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); diff --git a/frontend/resources/styles/common/refactor/shadows.scss b/frontend/resources/styles/common/refactor/shadows.scss new file mode 100644 index 000000000..bc2be4d61 --- /dev/null +++ b/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 diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss new file mode 100644 index 000000000..09ff33996 --- /dev/null +++ b/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); diff --git a/frontend/resources/styles/common/refactor/themes.scss b/frontend/resources/styles/common/refactor/themes.scss new file mode 100644 index 000000000..3df0c6f25 --- /dev/null +++ b/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"; diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss new file mode 100644 index 000000000..78a0194ba --- /dev/null +++ b/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); +} diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss new file mode 100644 index 000000000..b7b28f04a --- /dev/null +++ b/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); +} diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index 6b22e9a5b..3205cbf41 100644 --- a/frontend/resources/styles/main-default.scss +++ b/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"; diff --git a/frontend/resources/styles/main/layouts/login.scss b/frontend/resources/styles/main/layouts/login.scss index 6b77a0ecf..cee660c18 100644 --- a/frontend/resources/styles/main/layouts/login.scss +++ b/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 -// Copyright (c) 2015-2020 Juan de la Cruz +// Copyright (c) KALEIDOS INC // TODO: rename to auth.scss diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss index 268afc00b..7930beac2 100644 --- a/frontend/resources/styles/main/partials/colorpicker.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC .colorpicker { box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); diff --git a/frontend/resources/styles/main/partials/forms.scss b/frontend/resources/styles/main/partials/forms.scss index 04affd6d5..4a50a01a3 100644 --- a/frontend/resources/styles/main/partials/forms.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC input, select, diff --git a/frontend/resources/styles/main/partials/left-toolbar.scss b/frontend/resources/styles/main/partials/left-toolbar.scss index 0de27c611..3fec7182c 100644 --- a/frontend/resources/styles/main/partials/left-toolbar.scss +++ b/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 -// Copyright (c) 2015-2020 Juan de la Cruz +// Copyright (c) KALEIDOS INC .left-toolbar { background-color: $color-gray-50; diff --git a/frontend/resources/styles/main/partials/project-bar.scss b/frontend/resources/styles/main/partials/project-bar.scss index 6ebb76fd2..dff2da1e7 100644 --- a/frontend/resources/styles/main/partials/project-bar.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC .project-bar { background-color: $color-gray-50; diff --git a/frontend/resources/styles/main/partials/sidebar-align-options.scss b/frontend/resources/styles/main/partials/sidebar-align-options.scss index 18ced6518..b792e060c 100644 --- a/frontend/resources/styles/main/partials/sidebar-align-options.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC .align-options { display: flex; diff --git a/frontend/resources/styles/main/partials/sidebar-assets.scss b/frontend/resources/styles/main/partials/sidebar-assets.scss index 0f84b1047..1df6ebcec 100644 --- a/frontend/resources/styles/main/partials/sidebar-assets.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC .assets-bar { display: flex; diff --git a/frontend/resources/styles/main/partials/sidebar-icons.scss b/frontend/resources/styles/main/partials/sidebar-icons.scss index 0b140d4b1..c48dd2e39 100644 --- a/frontend/resources/styles/main/partials/sidebar-icons.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC .figures-catalog { width: 100%; diff --git a/frontend/resources/styles/main/partials/sidebar-interactions.scss b/frontend/resources/styles/main/partials/sidebar-interactions.scss index 05cfd0f38..8c164535c 100644 --- a/frontend/resources/styles/main/partials/sidebar-interactions.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC .interactions-help { font-size: $fs12; diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss index 15da99526..1b581cab7 100644 --- a/frontend/resources/styles/main/partials/sidebar-layers.scss +++ b/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 -// Copyright (c) 2015-2020 Juan de la Cruz +// Copyright (c) KALEIDOS INC .element-list-body { align-items: center; diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss index 0d0546a3a..f7ed9e3fc 100644 --- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC #sitemap { height: var(--height, 200px); diff --git a/frontend/resources/styles/main/partials/sidebar-tools.scss b/frontend/resources/styles/main/partials/sidebar-tools.scss index 819f1c378..90a320cc4 100644 --- a/frontend/resources/styles/main/partials/sidebar-tools.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC .drawing-tools { max-height: 185px; diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index fd41ce521..f6e4a903e 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/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 -// Copyright (c) 2015-2020 Juan de la Cruz +// Copyright (c) KALEIDOS INC .settings-bar { background-color: $color-gray-50; diff --git a/frontend/resources/styles/main/partials/tool-bar.scss b/frontend/resources/styles/main/partials/tool-bar.scss index e502d2168..eea14f2e3 100644 --- a/frontend/resources/styles/main/partials/tool-bar.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC .tool-bar { background-color: $color-gray-40; diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index e2bd7767e..7385faecb 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/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 -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) KALEIDOS INC $width-left-toolbar: 48px; diff --git a/frontend/src/app/main/data/users.cljs b/frontend/src/app/main/data/users.cljs index 5cf2932ab..e8cfe8d65 100644 --- a/frontend/src/app/main/data/users.cljs +++ b/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)) - (some-> (:theme profile) - (theme/set-current-theme!)))))) + (i18n/set-locale! (:lang profile)))))) (defn fetch-profile [] diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index 5569d827e..266113c86 100644 --- a/frontend/src/app/main/ui.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs index 152859a06..7e0c6ab0b 100644 --- a/frontend/src/app/main/ui/dashboard.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/settings/options.cljs b/frontend/src/app/main/ui/settings/options.cljs index f74de00f1..08f53d59b 100644 --- a/frontend/src/app/main/ui/settings/options.cljs +++ b/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"}] - :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"}]])) diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 4b7de5729..d0d748f7e 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/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 [] diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index fa0f55059..0aad0e97e 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/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 diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index d6f064546..4da8f75af 100644 --- a/frontend/src/app/util/dom.cljs +++ b/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] - (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]