From 1c9989bd6055291457b8d19632bf6c06fc920aed Mon Sep 17 00:00:00 2001 From: Bob Vandevliet Date: Fri, 18 Feb 2022 11:40:37 +0100 Subject: [PATCH] modified style to support multi-theme and dark-mode (read below) at this point this is still a WIP, and see below PR: https://github.com/jgthms/bulma/pull/3490 --- .eslintrc.json | 3 + .gitignore | 4 +- package.json | 3 +- src/renderer/assets/css/_vars-_.scss | 67 --------- src/renderer/assets/css/_vars-derived.sass | 70 --------- src/renderer/assets/css/style.scss | 160 ++++++++++++--------- tsconfig.json | 3 +- 7 files changed, 104 insertions(+), 206 deletions(-) delete mode 100644 src/renderer/assets/css/_vars-_.scss delete mode 100644 src/renderer/assets/css/_vars-derived.sass diff --git a/.eslintrc.json b/.eslintrc.json index 47c4e96..ea07179 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,5 +1,8 @@ { "root": true, + "ignorePatterns": [ + "src/renderer/assets/bulma/" + ], "env": { "browser": true, "es6": true diff --git a/.gitignore b/.gitignore index fdb6703..d6c2eda 100644 --- a/.gitignore +++ b/.gitignore @@ -12,4 +12,6 @@ package-lock.json favicon*.ico favicon*.png -favicon*.svg \ No newline at end of file +favicon*.svg + +**/assets/bulma/ \ No newline at end of file diff --git a/package.json b/package.json index 339ea00..a2de9aa 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "description": "A simple PDM tool.", "main": "dist/main/main.js", "scripts": { - "dist": "( if exist .\\dist\\ rd .\\dist\\ /s /q ) && tsc && tsc --project .\\src\\main\\tsc.cjs.json && ejs -p [ -c ] -w .\\src\\renderer\\index.ejs -o .\\dist\\renderer\\index.html && sass src\\:dist\\ --style=compressed", + "dist": "( if exist .\\dist\\ rd .\\dist\\ /s /q ) && tsc && tsc --project .\\src\\main\\tsc.cjs.json && ejs -p [ -c ] -w .\\src\\renderer\\index.ejs -o .\\dist\\renderer\\index.html && sass src\\renderer\\assets\\css\\style.scss:dist\\renderer\\assets\\css\\style.css --style=compressed", "start": "npm run dist && .\\node_modules\\electron\\dist\\electron.exe . --dev", "build": "npm run dist && ( if exist .\\out\\ rd .\\out\\ /s /q ) && electron-builder build --win" }, @@ -52,7 +52,6 @@ "@types/tedious": "^4.0.6", "@typescript-eslint/eslint-plugin": "^5.10.0", "@typescript-eslint/parser": "^5.10.0", - "bulma": "^0.9.3", "ejs": "^3.1.6", "electron": "^17.0.1", "electron-builder": "^22.14.5", diff --git a/src/renderer/assets/css/_vars-_.scss b/src/renderer/assets/css/_vars-_.scss deleted file mode 100644 index 4fb82a9..0000000 --- a/src/renderer/assets/css/_vars-_.scss +++ /dev/null @@ -1,67 +0,0 @@ -// Colors - -$black: hsl(0, 0%, 4%); -$black-bis: hsl(0, 0%, 7%); -$black-ter: hsl(0, 0%, 14%); - -$grey-darker: hsl(0, 0%, 21%); -$grey-dark: hsl(0, 0%, 29%); -$grey: hsl(0, 0%, 48%); -$grey-light: hsl(0, 0%, 71%); -$grey-lighter: hsl(0, 0%, 86%); -$grey-lightest: hsl(0, 0%, 93%); - -$white-ter: hsl(0, 0%, 96%); -$white-bis: hsl(0, 0%, 98%); -$white: hsl(0, 0%, 100%); - -$orange: hsl(14, 100%, 53%); -$yellow: hsl(44, 100%, 77%); -$green: hsl(153, 53%, 53%); -$turquoise: hsl(171, 100%, 41%); -$cyan: hsl(207, 61%, 53%); -$blue: hsl(229, 53%, 53%); -$purple: hsl(271, 100%, 71%); -$red: hsl(348, 86%, 61%); - -// Typography - -$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -$family-monospace: monospace; -$render-mode: optimizeLegibility; - -$size-1: 3rem; -$size-2: 2.5rem; -$size-3: 2rem; -$size-4: 1.5rem; -$size-5: 1.25rem; -$size-6: 1rem; -$size-7: 0.75rem; - -$weight-light: 300; -$weight-normal: 400; -$weight-medium: 500; -$weight-semibold: 600; -$weight-bold: 700; - -// Spacing - -$column-gap: 0.75rem; -$block-spacing: 1.5rem; - -// Compensate and reset padding (also for input controls with respect to removal of borders). - -$control-padding-vertical: .2em; -$control-padding-horizontal: .5em; -$control-height: unset; -$table-cell-padding: $control-padding-vertical $control-padding-horizontal; -$tabs-link-padding: $table-cell-padding; - -// Miscellaneous - -$easing: ease-out; -$speed: 86ms; -$radius-small: 2px; -$radius: 4px; -$radius-large: 6px; -$radius-rounded: 9999px; \ No newline at end of file diff --git a/src/renderer/assets/css/_vars-derived.sass b/src/renderer/assets/css/_vars-derived.sass deleted file mode 100644 index 598d3c3..0000000 --- a/src/renderer/assets/css/_vars-derived.sass +++ /dev/null @@ -1,70 +0,0 @@ -$primary: $turquoise !default - -$info: $cyan !default -$success: $green !default -$warning: $yellow !default -$danger: $red !default - -$light: $white-ter !default -$dark: $grey-darker !default - -// General colors - -$scheme-main: $white !default -$scheme-main-bis: $white-bis !default -$scheme-main-ter: $white-ter !default -$scheme-invert: $black !default -$scheme-invert-bis: $black-bis !default -$scheme-invert-ter: $black-ter !default - -$background: $white-ter !default - -$border: $grey-lighter !default -$border-hover: $grey-light !default -$border-light: $grey-lightest !default -$border-light-hover: $grey-light !default - -// Text colors - -$text: $grey-dark !default -$text-light: $grey !default -$text-strong: $grey-darker !default - -// Code colors - -// $code: darken($red, 15%) !default -$code-background: $background !default - -$pre: $text !default -$pre-background: $background !default - -// Link colors - -$link: $blue !default -// $link-light: findLightColor($link) !default -// $link-dark: findDarkColor($link) !default -$link-visited: $purple !default - -$link-hover: $grey-darker !default -$link-hover-border: $grey-light !default - -$link-focus: $grey-darker !default -$link-focus-border: $blue !default - -$link-active: $grey-darker !default -$link-active-border: $grey-dark !default - -// Typography - -$family-primary: $family-sans-serif !default -$family-secondary: $family-sans-serif !default -$family-code: $family-monospace !default - -$size-small: $size-7 !default -$size-normal: $size-6 !default -$size-medium: $size-5 !default -$size-large: $size-4 !default - -// Effects - -$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default \ No newline at end of file diff --git a/src/renderer/assets/css/style.scss b/src/renderer/assets/css/style.scss index 599a5dc..bf605cd 100644 --- a/src/renderer/assets/css/style.scss +++ b/src/renderer/assets/css/style.scss @@ -1,69 +1,99 @@ @charset 'utf-8'; -@import './_vars-_.scss'; -@import './_vars-derived.sass'; - -// Bulma scripts .. - -@import '../../../../node_modules/bulma/sass/utilities/_all.sass'; -@import '../../../../node_modules/bulma/sass/base/_all.sass'; - -// @import '../../../../node_modules/bulma/sass/elements/_all.sass'; -// @import '../../../../node_modules/bulma/sass/elements/box.sass'; -@import '../../../../node_modules/bulma/sass/elements/button.sass'; -// @import '../../../../node_modules/bulma/sass/elements/container.sass'; -// @import '../../../../node_modules/bulma/sass/elements/content.sass'; -// @import '../../../../node_modules/bulma/sass/elements/icon.sass'; -// @import '../../../../node_modules/bulma/sass/elements/image.sass'; -// @import '../../../../node_modules/bulma/sass/elements/notification.sass'; -// @import '../../../../node_modules/bulma/sass/elements/progress.sass'; -@import '../../../../node_modules/bulma/sass/elements/table.sass'; -@import '../../../../node_modules/bulma/sass/elements/tag.sass'; -@import '../../../../node_modules/bulma/sass/elements/title.sass'; -@import '../../../../node_modules/bulma/sass/elements/other.sass'; - -// @import '../../../../node_modules/bulma/sass/form/_all.sass'; -@import '../../../../node_modules/bulma/sass/form/shared.sass'; -@import '../../../../node_modules/bulma/sass/form/input-textarea.sass'; -// @import '../../../../node_modules/bulma/sass/form/checkbox-radio.sass'; -// @import '../../../../node_modules/bulma/sass/form/select.sass'; -// @import '../../../../node_modules/bulma/sass/form/file.sass'; -@import '../../../../node_modules/bulma/sass/form/tools.sass'; - -// @import '../../../../node_modules/bulma/sass/components/_all.sass'; -// @import '../../../../node_modules/bulma/sass/components/breadcrumb.sass'; -// @import '../../../../node_modules/bulma/sass/components/card.sass'; -// @import '../../../../node_modules/bulma/sass/components/dropdown.sass'; -// @import '../../../../node_modules/bulma/sass/components/level.sass'; -// @import '../../../../node_modules/bulma/sass/components/media.sass'; -// @import '../../../../node_modules/bulma/sass/components/menu.sass'; -// @import '../../../../node_modules/bulma/sass/components/message.sass'; -// @import '../../../../node_modules/bulma/sass/components/modal.sass'; -// @import '../../../../node_modules/bulma/sass/components/navbar.sass'; -// @import '../../../../node_modules/bulma/sass/components/pagination.sass'; -// @import '../../../../node_modules/bulma/sass/components/panel.sass'; -@import '../../../../node_modules/bulma/sass/components/tabs.sass'; - -// @import '../../../../node_modules/bulma/sass/grid/_all.sass'; -@import '../../../../node_modules/bulma/sass/grid/columns.sass'; -// @import '../../../../node_modules/bulma/sass/grid/tiles.sass'; - -// @import '../../../../node_modules/bulma/sass/helpers/_all.sass'; -@import '../../../../node_modules/bulma/sass/helpers/color.sass'; -@import '../../../../node_modules/bulma/sass/helpers/flexbox.sass'; -@import '../../../../node_modules/bulma/sass/helpers/float.sass'; -@import '../../../../node_modules/bulma/sass/helpers/other.sass'; -@import '../../../../node_modules/bulma/sass/helpers/overflow.sass'; -@import '../../../../node_modules/bulma/sass/helpers/position.sass'; -@import '../../../../node_modules/bulma/sass/helpers/spacing.sass'; -@import '../../../../node_modules/bulma/sass/helpers/typography.sass'; -@import '../../../../node_modules/bulma/sass/helpers/visibility.sass'; - -// @import '../../../../node_modules/bulma/sass/layout/_all.sass'; -// @import '../../../../node_modules/bulma/sass/layout/hero.sass'; -@import '../../../../node_modules/bulma/sass/layout/section.sass'; -// @import '../../../../node_modules/bulma/sass/layout/footer.sass'; - -// Local scripts .. + + +// Typography + +$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; +$family-monospace: monospace; +$render-mode: optimizeLegibility; + +$size-1: 3rem; +$size-2: 2.5rem; +$size-3: 2rem; +$size-4: 1.5rem; +$size-5: 1.25rem; +$size-6: 1rem; +$size-7: 0.75rem; + + +// Spacing + +$column-gap: 0.75rem; +$block-spacing: 1.5rem; + + +// Compensate and reset padding (also for input controls with respect to removal of borders). + +$control-padding-vertical: .2em; +$control-padding-horizontal: .5em; +$control-height: unset; +$table-cell-padding: $control-padding-vertical $control-padding-horizontal; +$tabs-link-padding: $table-cell-padding; + + +// Bulma .. + +@import './../bulma/sass/utilities/_all.scss'; +@import './../bulma/sass/base/_all.sass'; + +// @import './../bulma/sass/elements/_all.sass'; +// @import './../bulma/sass/elements/box.sass'; +@import './../bulma/sass/elements/button.sass'; +// @import './../bulma/sass/elements/container.sass'; +// @import './../bulma/sass/elements/content.sass'; +// @import './../bulma/sass/elements/icon.sass'; +// @import './../bulma/sass/elements/image.sass'; +// @import './../bulma/sass/elements/notification.sass'; +// @import './../bulma/sass/elements/progress.sass'; +@import './../bulma/sass/elements/table.sass'; +@import './../bulma/sass/elements/tag.sass'; +@import './../bulma/sass/elements/title.sass'; +@import './../bulma/sass/elements/other.sass'; + +// @import './../bulma/sass/form/_all.sass'; +@import './../bulma/sass/form/shared.sass'; +@import './../bulma/sass/form/input-textarea.sass'; +// @import './../bulma/sass/form/checkbox-radio.sass'; +// @import './../bulma/sass/form/select.sass'; +// @import './../bulma/sass/form/file.sass'; +@import './../bulma/sass/form/tools.sass'; + +// @import './../bulma/sass/components/_all.sass'; +// @import './../bulma/sass/components/breadcrumb.sass'; +// @import './../bulma/sass/components/card.sass'; +// @import './../bulma/sass/components/dropdown.sass'; +// @import './../bulma/sass/components/level.sass'; +// @import './../bulma/sass/components/media.sass'; +// @import './../bulma/sass/components/menu.sass'; +// @import './../bulma/sass/components/message.sass'; +// @import './../bulma/sass/components/modal.sass'; +// @import './../bulma/sass/components/navbar.sass'; +// @import './../bulma/sass/components/pagination.sass'; +// @import './../bulma/sass/components/panel.sass'; +@import './../bulma/sass/components/tabs.sass'; + +// @import './../bulma/sass/grid/_all.sass'; +@import './../bulma/sass/grid/columns.sass'; +// @import './../bulma/sass/grid/tiles.sass'; + +// @import './../bulma/sass/helpers/_all.sass'; +@import './../bulma/sass/helpers/color.sass'; +@import './../bulma/sass/helpers/flexbox.sass'; +@import './../bulma/sass/helpers/float.sass'; +@import './../bulma/sass/helpers/other.sass'; +@import './../bulma/sass/helpers/overflow.sass'; +@import './../bulma/sass/helpers/position.sass'; +@import './../bulma/sass/helpers/spacing.sass'; +@import './../bulma/sass/helpers/typography.sass'; +@import './../bulma/sass/helpers/visibility.sass'; + +// @import './../bulma/sass/layout/_all.sass'; +// @import './../bulma/sass/layout/hero.sass'; +@import './../bulma/sass/layout/section.sass'; +// @import './../bulma/sass/layout/footer.sass'; + + +// Customizations .. @import './extensions/helpers'; diff --git a/tsconfig.json b/tsconfig.json index 915c79d..c88e72a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -98,5 +98,6 @@ // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ // "skipLibCheck": true /* Skip type checking all .d.ts files. */ }, - "include": ["src/**/*"] + "include": ["src/**/*"], + "exclude": ["src/renderer/assets/bulma/"] } \ No newline at end of file