From a170a0cc74184cdf2c2a6c87f282d43871610acf Mon Sep 17 00:00:00 2001 From: Florian Heft Date: Wed, 14 Jun 2023 01:04:53 +0200 Subject: [PATCH] Added npm scripts to rebuild theme files * Add Bootstrap 4 dependency * Add scripts to compile theme files using SASS * Remove circular dependency of theme variables and Bootstrap base variables --- package.json | 6 +- .../css/themes/_variables.darkly-red.scss | 108 ++++++++++++++++++ src/assets/css/themes/_variables.darkly.scss | 4 +- .../css/themes/_variables.litely-red.scss | 47 ++++++++ src/assets/css/themes/_variables.litely.scss | 24 +++- src/assets/css/themes/darkly-red.scss | 2 + src/assets/css/themes/darkly.scss | 2 + src/assets/css/themes/litely-red.scss | 2 + src/assets/css/themes/litely.scss | 2 + 9 files changed, 188 insertions(+), 9 deletions(-) create mode 100644 src/assets/css/themes/_variables.darkly-red.scss create mode 100644 src/assets/css/themes/_variables.litely-red.scss create mode 100644 src/assets/css/themes/darkly-red.scss create mode 100644 src/assets/css/themes/darkly.scss create mode 100644 src/assets/css/themes/litely-red.scss create mode 100644 src/assets/css/themes/litely.scss diff --git a/package.json b/package.json index 413144e3..2e09e897 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,9 @@ "dev": "yarn start", "lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"", "prepare": "husky install", - "start": "yarn build:dev --watch" + "start": "yarn build:dev --watch", + "themes:build": "sass src/assets/css/themes/:src/assets/css/themes", + "themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes" }, "lint-staged": { "*.{ts,tsx,js}": [ @@ -102,7 +104,7 @@ "@types/toastify-js": "^1.11.1", "@typescript-eslint/eslint-plugin": "^5.59.5", "@typescript-eslint/parser": "^5.59.5", - "bootswatch": "^5.2.3", + "bootstrap-v4": "npm:bootstrap@^4.6.2", "eslint": "^8.40.0", "eslint-plugin-inferno": "^7.32.2", "eslint-plugin-prettier": "^4.2.1", diff --git a/src/assets/css/themes/_variables.darkly-red.scss b/src/assets/css/themes/_variables.darkly-red.scss new file mode 100644 index 00000000..c36cbb3d --- /dev/null +++ b/src/assets/css/themes/_variables.darkly-red.scss @@ -0,0 +1,108 @@ +$white: #fff; +$gray-100: #f8f9fa; +$gray-200: #ebebeb; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #888; +$gray-700: #444; +$gray-800: #303030; +$gray-900: #222; +$black: #000; +$blue: #375a7f; +$indigo: #6610f2; +$purple: #6f42c1; +$pink: #e83e8c; +$red: #e74c3c; +$orange: #fd7e14; +$yellow: #f39c12; +$green: #00bc8c; +$teal: #20c997; +$cyan: #3498db; +$primary: $blue; +$secondary: #444; +$success: $green; +$info: $cyan; +$warning: $yellow; +$danger: $red; +$light: $gray-800; +$dark: $gray-300; +$yiq-contrasted-threshold: 175; +$body-bg: $gray-900; +$body-color: $gray-300; +$link-color: $red; +$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol"; +$font-size-base: 0.9375rem; +$h1-font-size: 3rem; +$h2-font-size: 2.5rem; +$h3-font-size: 2rem; +$text-muted: $gray-600; +$table-accent-bg: $gray-800; +$table-border-color: $gray-700; +$input-border-color: $body-bg; +$input-group-addon-color: $gray-500; +$input-group-addon-bg: $gray-700; +$custom-file-color: $gray-500; +$custom-file-border-color: $body-bg; +$dropdown-bg: $gray-900; +$dropdown-border-color: $gray-700; +$dropdown-divider-bg: $gray-700; +$dropdown-link-color: $white; +$dropdown-link-hover-color: $white; +$dropdown-link-hover-bg: $primary; +$nav-link-padding-x: 2rem; +$nav-link-disabled-color: $gray-500; +$nav-tabs-border-color: $gray-700; +$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color + transparent; +$nav-tabs-link-active-color: $white; +$nav-tabs-link-active-border-color: $nav-tabs-border-color + $nav-tabs-border-color transparent; +$navbar-padding-y: 1rem; +$navbar-dark-color: rgba($white, 0.6); +$navbar-dark-hover-color: $white; +$navbar-light-color: rgba($white, 0.6); +$navbar-light-hover-color: $white; +$navbar-light-active-color: $white; +$navbar-light-toggler-border-color: rgba($gray-900, 0.1); +$pagination-color: $white; +$pagination-bg: $success; +$pagination-border-width: 0; +$pagination-border-color: transparent; +$pagination-hover-color: $white; +$pagination-hover-bg: lighten($success, 10%); +$pagination-hover-border-color: transparent; +$pagination-active-bg: $pagination-hover-bg; +$pagination-active-border-color: transparent; +$pagination-disabled-color: $white; +$pagination-disabled-bg: darken($success, 15%); +$pagination-disabled-border-color: transparent; +$jumbotron-bg: $gray-800; +$card-cap-bg: $gray-700; +$card-bg: $gray-800; +$popover-bg: $gray-800; +$popover-header-bg: $gray-700; +$toast-background-color: $gray-700; +$toast-header-background-color: $gray-800; +$modal-content-bg: $gray-800; +$modal-content-border-color: $gray-700; +$modal-header-border-color: $gray-700; +$progress-bg: $gray-700; +$list-group-bg: $gray-800; +$list-group-border-color: $gray-700; +$list-group-hover-bg: $gray-700; +$breadcrumb-bg: $gray-700; +$close-color: $white; +$close-text-shadow: none; +$pre-color: inherit; +$mark-bg: #333; +$custom-select-bg: $secondary; +$custom-select-color: $white; +$input-bg: $secondary; +$input-color: $white; +$input-disabled-bg: darken($secondary, 10%); +$light: $gray-800; +$navbar-light-brand-color: $white; +$navbar-light-brand-hover-color: $navbar-light-brand-color; diff --git a/src/assets/css/themes/_variables.darkly.scss b/src/assets/css/themes/_variables.darkly.scss index 668f5a62..608b4001 100644 --- a/src/assets/css/themes/_variables.darkly.scss +++ b/src/assets/css/themes/_variables.darkly.scss @@ -103,5 +103,5 @@ $input-bg: $secondary; $input-color: $white; $input-disabled-bg: darken($secondary, 10%); $light: $gray-800; -$navbar-light-brand-color: $navbar-dark-active-color; -$navbar-light-brand-hover-color: $navbar-dark-active-color; +$navbar-light-brand-color: $white; +$navbar-light-brand-hover-color: $navbar-light-brand-color; diff --git a/src/assets/css/themes/_variables.litely-red.scss b/src/assets/css/themes/_variables.litely-red.scss new file mode 100644 index 00000000..2c4c72e8 --- /dev/null +++ b/src/assets/css/themes/_variables.litely-red.scss @@ -0,0 +1,47 @@ +$white: #fff; +$gray-100: #f8f9fa; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #6c757d; +$gray-700: #495057; +$gray-800: #343a40; +$gray-900: #212529; +$black: #000; +$blue: #007bff; +$indigo: #6610f2; +$white: #ffffff; +$orange: #f1641e; +$cyan: #02bdc2; +$green: #00c853; +$primary: #d84848; +$secondary: $green; +$info: $cyan; +$body-color: $gray-700; +$link-color: $primary; +$red: #d8486a; +$border-radius: 0.5rem; +$border-radius-lg: 0.5rem; +$border-radius-sm: 1rem; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans", + "Segoe UI", "Helvetica", Arial, sans-serif; +$headings-color: $gray-700; +$input-btn-focus-color: rgba($primary, 0.75); +$form-feedback-valid-color: $info; +$navbar-light-color: $gray-600; +$black: #222222; +$navbar-dark-toggler-border-color: rgba($black, 0.1); +$navbar-light-active-color: $gray-900; +$card-color: $gray-700; +$card-cap-color: $gray-700; +$info: $blue; +$body-bg: #fff; +$success: $indigo; +$danger: darken($primary, 24%); +$navbar-light-hover-color: $gray-900; +$card-bg: $gray-100; +$border-color: $gray-700; +$mark-bg: rgb(255, 252, 239); +$font-weight-bold: 600; +$rounded-pill: 0.25rem; diff --git a/src/assets/css/themes/_variables.litely.scss b/src/assets/css/themes/_variables.litely.scss index cfb12052..1f78cd28 100644 --- a/src/assets/css/themes/_variables.litely.scss +++ b/src/assets/css/themes/_variables.litely.scss @@ -1,11 +1,25 @@ +$white: #fff; +$gray-100: #f8f9fa; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #6c757d; +$gray-700: #495057; +$gray-800: #343a40; +$gray-900: #212529; +$black: #000; +$blue: #007bff; +$indigo: #6610f2; $white: #ffffff; $orange: #f1641e; $cyan: #02bdc2; $green: #00c853; -$secondary: $green; -$body-color: $gray-700; -$link-color: theme-color("primary"); $primary: $orange; +$secondary: $green; +$info: $cyan; +$body-color: $gray-700; +$link-color: $primary; $red: #d8486a; $border-radius: 0.5rem; $border-radius-lg: 0.5rem; @@ -13,8 +27,8 @@ $border-radius-sm: 1rem; $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", "Helvetica", Arial, sans-serif; $headings-color: $gray-700; -$input-btn-focus-color: rgba($component-active-bg, 0.75); -$form-feedback-valid-color: theme-color("info"); +$input-btn-focus-color: rgba($primary, 0.75); +$form-feedback-valid-color: $info; $navbar-light-color: $gray-600; $black: #222222; $navbar-dark-toggler-border-color: rgba($black, 0.1); diff --git a/src/assets/css/themes/darkly-red.scss b/src/assets/css/themes/darkly-red.scss new file mode 100644 index 00000000..f6dfb3df --- /dev/null +++ b/src/assets/css/themes/darkly-red.scss @@ -0,0 +1,2 @@ +@import "variables.darkly-red"; +@import "../../../../node_modules/bootstrap-v4/scss/bootstrap"; diff --git a/src/assets/css/themes/darkly.scss b/src/assets/css/themes/darkly.scss new file mode 100644 index 00000000..ef808d56 --- /dev/null +++ b/src/assets/css/themes/darkly.scss @@ -0,0 +1,2 @@ +@import "variables.darkly"; +@import "../../../../node_modules/bootstrap-v4/scss/bootstrap"; diff --git a/src/assets/css/themes/litely-red.scss b/src/assets/css/themes/litely-red.scss new file mode 100644 index 00000000..388d70bd --- /dev/null +++ b/src/assets/css/themes/litely-red.scss @@ -0,0 +1,2 @@ +@import "variables.litely-red"; +@import "../../../../node_modules/bootstrap-v4/scss/bootstrap"; diff --git a/src/assets/css/themes/litely.scss b/src/assets/css/themes/litely.scss new file mode 100644 index 00000000..061bcc48 --- /dev/null +++ b/src/assets/css/themes/litely.scss @@ -0,0 +1,2 @@ +@import "variables.litely"; +@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";