3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 23:18:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add css variables and theme switch

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/styles/common/base.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
:root {
--font-family: "worksans", sans-serif;

3
frontend/resources/styles/common/dependencies/colors.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
// Colors
$color-white: #ffffff;

3
frontend/resources/styles/common/dependencies/helpers.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
// Padding & Margin sizes
$size-1: 0.25rem;

3
frontend/resources/styles/common/dependencies/mixin.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
/// 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

3
frontend/resources/styles/common/dependencies/z-index.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
$autocomplete: 30000;
$index-lightbox-shadow: 60000;

3
frontend/resources/styles/common/framework.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) 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
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%;

31
frontend/resources/styles/common/refactor/color-defs.scss Normal file
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;
}

11
frontend/resources/styles/common/refactor/design-tokens.scss Normal file
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);
}

36
frontend/resources/styles/common/refactor/fonts.scss Normal file
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);

5
frontend/resources/styles/common/refactor/shadows.scss Normal file
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

26
frontend/resources/styles/common/refactor/spacing.scss Normal file
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);

8
frontend/resources/styles/common/refactor/themes.scss Normal file
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";

18
frontend/resources/styles/common/refactor/themes/default-theme.scss Normal file
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);
}

18
frontend/resources/styles/common/refactor/themes/light-theme.scss Normal file
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);
}

16
frontend/resources/styles/main-default.scss
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";

3
frontend/resources/styles/main/layouts/login.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

3
frontend/resources/styles/main/partials/colorpicker.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);

3
frontend/resources/styles/main/partials/forms.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
input,
select,

3
frontend/resources/styles/main/partials/left-toolbar.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
.left-toolbar {
background-color: $color-gray-50;

3
frontend/resources/styles/main/partials/project-bar.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
.project-bar {
background-color: $color-gray-50;

3
frontend/resources/styles/main/partials/sidebar-align-options.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
.align-options {
display: flex;

3
frontend/resources/styles/main/partials/sidebar-assets.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
.assets-bar {
display: flex;

3
frontend/resources/styles/main/partials/sidebar-icons.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
.figures-catalog {
width: 100%;

3
frontend/resources/styles/main/partials/sidebar-interactions.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
.interactions-help {
font-size: $fs12;

3
frontend/resources/styles/main/partials/sidebar-layers.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
.element-list-body {
align-items: center;

3
frontend/resources/styles/main/partials/sidebar-sitemap.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
#sitemap {
height: var(--height, 200px);

3
frontend/resources/styles/main/partials/sidebar-tools.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
.drawing-tools {
max-height: 185px;

3
frontend/resources/styles/main/partials/sidebar.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
.settings-bar {
background-color: $color-gray-50;

3
frontend/resources/styles/main/partials/tool-bar.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
.tool-bar {
background-color: $color-gray-40;

3
frontend/resources/styles/main/partials/workspace.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
$width-left-toolbar: 48px;