Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-22 14:39:45 -05:00
Code Issues Activity

✨ Unify the themes under 'default' theme.

Browse source 
Because right now we don't have a real dark and light
themes (right now workspace is dark and dashbaord is
light).
This commit is contained in:
Andrey Antukh 2020-04-13 12:03:56 +02:00
parent ea3e17f7fe
commit 5aa97513de
6 changed files with 13 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/gulpfile.js
View file

@ -14,8 +14,8 @@ const svgSprite = require("gulp-svg-sprite");
const mkdirp = require("mkdirp");
const rimraf = require("rimraf");
const sass = require("sass");
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const autoprefixer = require("autoprefixer")
const postcss = require("postcss")
const paths = {};
paths.resources = "./resources/";
@ -28,7 +28,7 @@ paths.scss = "./resources/styles/**/*.scss";
***********************************************/
function isProduction() {
return (process.env.NODE_ENV === 'production');
return (process.env.NODE_ENV === "production");
}
function scssPipeline(options) {
@ -123,8 +123,9 @@ function templatePipeline(options) {
const input = options.input;
const output = options.output;
const ts = Math.floor(new Date());
const th = process.env.UXBOX_THEME || 'light';
const themes = ['light', 'dark'];
const th = process.env.UXBOX_THEME || "default";
const themes = ["default"];
const locales = readLocales();
const config = readConfig();
@ -148,21 +149,16 @@ function templatePipeline(options) {
* Generic
***********************************************/
gulp.task("scss:main-light", scssPipeline({
input: paths.resources + "styles/main-light.scss",
output: paths.output + "css/main-light.css"
gulp.task("scss:main-default", scssPipeline({
input: paths.resources + "styles/main-default.scss",
output: paths.output + "css/main-default.css"
}));
gulp.task("scss:main-dark", scssPipeline({
input: paths.resources + "styles/main-dark.scss",
output: paths.output + "css/main-dark.css"
}));
gulp.task("scss", gulp.parallel("scss:main-light", "scss:main-dark"));
gulp.task("scss", gulp.parallel("scss:main-default"));
gulp.task("svg:sprite", function() {
return gulp.src(paths.resources + "images/icons/*.svg")
.pipe(rename({prefix: 'icon-'}))
.pipe(rename({prefix: "icon-"}))
.pipe(svgSprite({mode:{symbol: {inline: false}}}))
.pipe(gulp.dest(paths.output + "images/svg-sprite/"));
});

43
frontend/resources/styles/common/dependencies/uxbox-dark.scss
View file

@ -1,43 +0,0 @@
// 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) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// This is a standard color scheme for UXBOX UI
// Hope you like it and feel free to create your own one!
// UXBOX Dark Theme :)
// Main interaction color
$main-ui-color: $color-primary;
$intense-main-ui-color: darken($main-ui-color, 25%);
// Change next colors for more customization
// Background colors
$primary-ui-bg: #2C2C2C;
$secondary-ui-bg: #3d3f40;
$dark-ui-bg: #181818;
// Border color
$intense-ui-border: #a9adaf;
$medium-ui-border: #3d3f40;
$soft-ui-border: #232323;
// Icon colors
$intense-ui-icons: #a9adaf;
$medium-ui-icons: #808386;
$soft-ui-icons: #4a4e52;
// Text colors
$intense-ui-text: #e0e6e9;
$medium-ui-text: #8d9496;
$soft-ui-text: #4e4f50;
// Canvas colors
$canvas-bg: #3d3f40;
$scrollbar-bg: #878c8e;
// Input colors
$input-bg: $color-dark-bg;

46
frontend/resources/styles/common/dependencies/uxbox-light.scss
View file

@ -1,46 +0,0 @@
// 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) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// This is a standard color scheme for UXBOX UI
// Hope you like it and feel free to create your own one!
// UXBOX Light Theme :)
// Main interaction color
$main-ui-color: $color-primary;
$intense-main-ui-color: darken($main-ui-color, 25%);
// Set the UI flavour
$ui-flavour: $color-gray;
// Change next colors for more customization
// Background colors
$primary-ui-bg: $color-gray-50;
$secondary-ui-bg: $color-gray-60;
$dark-ui-bg: $color-gray-10;
// Border color
$intense-ui-border: $color-gray-40;
$medium-ui-border: $color-gray-20;
$soft-ui-border: $color-gray-60;
// Icon colors
$intense-ui-icons: $color-gray-20;
$medium-ui-icons: $color-gray-30;
$soft-ui-icons: $color-gray-60;
// Text colors
$intense-ui-text: $color-gray-60;
$medium-ui-text: $color-gray-20;
$soft-ui-text: $color-gray-10;
// Canvas colors
$canvas-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
$scrollbar-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
// Input colors
$input-bg: $primary-ui-bg;

68
frontend/resources/styles/main-dark.scss
View file

@ -1,68 +0,0 @@
// 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) 2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
// UXBOX MAIN STYLES
//#################################################
//
//#################################################
@import 'common/dependencies/colors';
//@import 'common/dependencies/uxbox-light';
@import 'common/dependencies/uxbox-dark';
@import 'common/dependencies/helpers';
@import 'common/dependencies/mixin';
@import 'common/dependencies/fonts';
@import 'common/dependencies/reset';
@import 'common/dependencies/animations';
@import 'common/dependencies/z-index';
//#################################################
// Layouts
//#################################################
@import 'common/base';
@import 'main/layouts/main-layout';
@import 'main/layouts/login';
//#################################################
// Commons
//#################################################
@import 'common/framework';
//#################################################
// Partials
//#################################################
@import 'main/partials/main-bar';
@import 'main/partials/workspace-bar';
@import 'main/partials/workspace';
@import 'main/partials/tool-bar';
@import 'main/partials/project-bar';
@import 'main/partials/sidebar';
@import 'main/partials/sidebar-tools';
@import 'main/partials/sidebar-element-options';
@import 'main/partials/sidebar-icons';
@import 'main/partials/sidebar-layers';
@import 'main/partials/sidebar-sitemap';
@import 'main/partials/sidebar-document-history';
@import 'main/partials/dashboard-bar';
@import 'main/partials/dashboard-grid';
@import 'main/partials/user-settings';
@import 'main/partials/activity-bar';
@import 'main/partials/library-bar';
@import 'main/partials/lightbox';
@import 'main/partials/color-palette';
@import 'main/partials/colorpicker';
@import 'main/partials/forms';
@import 'main/partials/loader';
//#################################################
// Resources
//#################################################
@import 'collection/font-collection';

2
frontend/resources/styles/main-light.scss → frontend/resources/styles/main-default.scss
View file

@ -11,8 +11,6 @@
//#################################################
@import 'common/dependencies/colors';
@import 'common/dependencies/uxbox-light';
//@import 'common/dependencies/uxbox-dark';
@import 'common/dependencies/helpers';
@import 'common/dependencies/mixin';
@import 'common/dependencies/fonts';

4
frontend/src/uxbox/main/ui/settings/profile.cljs
View file

@ -101,8 +101,8 @@
:class (fm/error-class form :theme)
:on-blur (fm/on-input-blur form :theme)
:on-change (fm/on-input-change form :theme)}
[:option {:value "light"} "Light"]
[:option {:value "dark"} "Dark"]]
[:option {:value "light"} "Default"]]
[:input.btn-primary
{:type "submit"