From 297085705d22187591ca2a0d851361e2b9dd711e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kiss=20R=C3=B3bert?= Date: Sat, 21 Oct 2023 20:34:36 +0200 Subject: [PATCH] chore: 5.0.0 modifications --- packages/uhk-web/package-lock.json | 24 +++---- packages/uhk-web/package.json | 2 +- packages/uhk-web/src/styles-dark.scss | 1 + packages/uhk-web/src/styles.scss | 1 + packages/uhk-web/src/styles/_bootstrap.scss | 68 ++++++++----------- packages/uhk-web/src/styles/_variables.scss | 1 + .../src/styles/themes/_dark-bs-variables.scss | 8 +++ packages/uhk-web/src/styles/themes/_dark.scss | 64 +++++++---------- .../styles/themes/_light-bs-variables.scss | 8 +++ .../uhk-web/src/styles/themes/_light.scss | 62 +++++++---------- 10 files changed, 107 insertions(+), 132 deletions(-) create mode 100644 packages/uhk-web/src/styles/themes/_dark-bs-variables.scss create mode 100644 packages/uhk-web/src/styles/themes/_light-bs-variables.scss diff --git a/packages/uhk-web/package-lock.json b/packages/uhk-web/package-lock.json index b05418057cb..cea35bf4cca 100644 --- a/packages/uhk-web/package-lock.json +++ b/packages/uhk-web/package-lock.json @@ -49,7 +49,7 @@ "angular-notifier": "11.0.0", "angular-resize-event": "3.1.1", "angular-split": "13.1.0", - "bootstrap": "5.3.2", + "bootstrap": "5.0.0", "colord": "2.9.3", "dragula": "3.7.3", "jasmine-core": "4.4.0", @@ -5468,22 +5468,16 @@ "dev": true }, "node_modules/bootstrap": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", - "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0.tgz", + "integrity": "sha512-tmhPET9B9qCl8dCofvHeiIhi49iBt0EehmIsziZib65k1erBW1rHhj2s/2JsuQh5Pq+xz2E9bEbzp9B7xHG+VA==", "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/twbs" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - } - ], + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + }, "peerDependencies": { - "@popperjs/core": "^2.11.8" + "@popperjs/core": "^2.9.2" } }, "node_modules/brace-expansion": { diff --git a/packages/uhk-web/package.json b/packages/uhk-web/package.json index ecccf638a82..06b8406576b 100644 --- a/packages/uhk-web/package.json +++ b/packages/uhk-web/package.json @@ -57,7 +57,7 @@ "angular-notifier": "11.0.0", "angular-resize-event": "3.1.1", "angular-split": "13.1.0", - "bootstrap": "5.3.2", + "bootstrap": "5.0.0", "colord": "2.9.3", "dragula": "3.7.3", "jasmine-core": "4.4.0", diff --git a/packages/uhk-web/src/styles-dark.scss b/packages/uhk-web/src/styles-dark.scss index 951aedc5f65..a1e17cc49f1 100644 --- a/packages/uhk-web/src/styles-dark.scss +++ b/packages/uhk-web/src/styles-dark.scss @@ -1,4 +1,5 @@ @import '@fontsource/jetbrains-mono'; +@import './styles/themes/dark-bs-variables'; @import './styles/variables'; @import './styles/themes/dark'; @import './styles/main'; diff --git a/packages/uhk-web/src/styles.scss b/packages/uhk-web/src/styles.scss index 297761f7d91..a86e2558a7d 100644 --- a/packages/uhk-web/src/styles.scss +++ b/packages/uhk-web/src/styles.scss @@ -1,4 +1,5 @@ @import '@fontsource/jetbrains-mono'; +@import './styles/themes/light-bs-variables'; @import './styles/variables'; @import './styles/themes/light'; @import './styles/main'; diff --git a/packages/uhk-web/src/styles/_bootstrap.scss b/packages/uhk-web/src/styles/_bootstrap.scss index db9d73dc8d1..ca99b16b599 100644 --- a/packages/uhk-web/src/styles/_bootstrap.scss +++ b/packages/uhk-web/src/styles/_bootstrap.scss @@ -1,44 +1,36 @@ /*! - * Bootstrap v4.5.3 (https://getbootstrap.com/) - * Copyright 2011-2020 The Bootstrap Authors - * Copyright 2011-2020 Twitter, Inc. + * Bootstrap v5.0.0 (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) -*/ + */ -@import '~bootstrap/scss/functions'; -@import '~bootstrap/scss/variables'; -@import '~bootstrap/scss/mixins'; -@import '~bootstrap/scss/root'; -@import '~bootstrap/scss/reboot'; -@import '~bootstrap/scss/type'; -@import '~bootstrap/scss/images'; -@import '~bootstrap/scss/code'; -@import '~bootstrap/scss/grid'; +@import 'bootstrap/scss/root'; +@import 'bootstrap/scss/reboot'; +@import 'bootstrap/scss/type'; +@import 'bootstrap/scss/images'; +@import 'bootstrap/scss/grid'; //@import '~bootstrap/scss/tables'; -@import '~bootstrap/scss/forms'; -@import '~bootstrap/scss/buttons'; -@import '~bootstrap/scss/transitions'; -@import '~bootstrap/scss/dropdown'; -@import '~bootstrap/scss/button-group'; -@import '~bootstrap/scss/input-group'; +@import 'bootstrap/scss/forms'; +@import 'bootstrap/scss/buttons'; +@import 'bootstrap/scss/transitions'; +@import 'bootstrap/scss/dropdown'; +@import 'bootstrap/scss/button-group'; //@import '~bootstrap/scss/custom-forms'; -@import '~bootstrap/scss/nav'; -@import '~bootstrap/scss/navbar'; -//@import '~bootstrap/scss/card'; -//@import '~bootstrap/scss/breadcrumb'; -//@import '~bootstrap/scss/pagination'; -@import '~bootstrap/scss/badge'; -//@import '~bootstrap/scss/jumbotron'; -@import '~bootstrap/scss/alert'; -@import '~bootstrap/scss/progress'; -//@import '~bootstrap/scss/media'; -@import '~bootstrap/scss/list-group'; -@import '~bootstrap/scss/close'; -@import '~bootstrap/scss/toasts'; -@import '~bootstrap/scss/modal'; -@import '~bootstrap/scss/tooltip'; -@import '~bootstrap/scss/popover'; +@import 'bootstrap/scss/nav'; +@import 'bootstrap/scss/navbar'; +//@import 'bootstrap/scss/card'; +//@import 'bootstrap/scss/breadcrumb'; +//@import 'bootstrap/scss/pagination'; +@import 'bootstrap/scss/badge'; +@import 'bootstrap/scss/alert'; +@import 'bootstrap/scss/progress'; +@import 'bootstrap/scss/list-group'; +@import 'bootstrap/scss/close'; +@import 'bootstrap/scss/toasts'; +@import 'bootstrap/scss/modal'; +@import 'bootstrap/scss/tooltip'; +@import 'bootstrap/scss/popover'; //@import '~bootstrap/scss/carousel'; -@import '~bootstrap/scss/spinners'; -@import '~bootstrap/scss/utilities'; -//@import '~bootstrap/scss/print'; +@import 'bootstrap/scss/spinners'; +//@import 'bootstrap/scss/utilities'; diff --git a/packages/uhk-web/src/styles/_variables.scss b/packages/uhk-web/src/styles/_variables.scss index eacb465fe91..a8c6d0691ca 100644 --- a/packages/uhk-web/src/styles/_variables.scss +++ b/packages/uhk-web/src/styles/_variables.scss @@ -42,3 +42,4 @@ $second-side-menu-width: 250px; @import 'bootstrap/scss/functions'; @import 'bootstrap/scss/variables'; +@import 'bootstrap/scss/mixins'; diff --git a/packages/uhk-web/src/styles/themes/_dark-bs-variables.scss b/packages/uhk-web/src/styles/themes/_dark-bs-variables.scss new file mode 100644 index 00000000000..9c1cfbf293e --- /dev/null +++ b/packages/uhk-web/src/styles/themes/_dark-bs-variables.scss @@ -0,0 +1,8 @@ +$primary: #3ec9e8; +$secondary: #999; +$success: #5cb85c; +$info: #5bc0de; +$warning: #f0ad4e; +$danger: #d9534f; +$light: #444; +$dark: #212529; diff --git a/packages/uhk-web/src/styles/themes/_dark.scss b/packages/uhk-web/src/styles/themes/_dark.scss index 93990de8f5b..984e0bd367c 100644 --- a/packages/uhk-web/src/styles/themes/_dark.scss +++ b/packages/uhk-web/src/styles/themes/_dark.scss @@ -1,50 +1,34 @@ // Dark theme $dark-theme: true; -$light: #444; -$dark: #212529; -$theme-colors: map-merge( - $theme-colors, - ( - 'primary': #3ec9e8, - 'secondary': #999, - 'success': #5cb85c, - 'info': #5bc0de, - 'warning': #f0ad4e, - 'danger': #d9534f, - 'light': $light, - 'dark': $dark - ) -); - $color-bg: #111; $color-bg-light: #222; $color-text: #bbb; $color-text-highlight: #ddd; $color-copy-icon: #6a737d; -$color-popover-bg-light: tint-color($color-bg-light, 5%); -$color-popover-border: tint-color($color-bg-light, 10%); +$color-popover-bg-light: lighten($color-bg-light, 5%); +$color-popover-border: lighten($color-bg-light, 10%); $btn-default-bg: #444; $btn-default-border: #666; -$icon-hover: theme-color('primary'); -$icon-hover-delete: theme-color('danger'); +$icon-hover: $primary; +$icon-hover-delete: $danger; $tooltip-arrow-color: #ccc; $tooltip-border-color: #ccc; // Bootstrap variables $body-bg: $color-bg; $body-color: $color-text; -$link-color: theme-color('primary'); +$link-color: $primary; $link-hover-color: shade-color($link-color, 15%); $list-group-bg: $color-bg-light; $list-group-border-color: #666; $input-bg: #222; $input-color: $color-text; $input-focus-bg: #111; -$input-btn-focus-color: rgba(theme-color('primary'), 0.25); -$color-select-active-bg: shade-color(theme-color('primary'), 40%); +$input-btn-focus-color: rgba($primary, 0.25); +$color-select-active-bg: shade-color($primary, 40%); $color-select-active-text: $white; $color-select-hover-bg: #3ec9e8; $color-select-hover-text: #333; @@ -60,7 +44,7 @@ $dropdown-color: $color-text; $dropdown-bg: $input-bg; $dropdown-link-color: $color-text; $dropdown-link-hover-color: #333; -$dropdown-link-hover-bg: #{theme-color('primary')}; +$dropdown-link-hover-bg: #{$primary}; $tooltip-color: $color-text; $tooltip-bg: $color-bg; $tooltip-arrow-color: $color-bg; @@ -71,7 +55,7 @@ $popover-arrow-color: $color-bg-light; $popover-arrow-outer-color: $color-popover-border; $popover-body-color: $color-popover-bg-light; $popover-border-color: $color-popover-border; -$component-active-bg: theme-color('primary') !default; +$component-active-bg: $primary !default; $input-focus-border-color: tint-color($component-active-bg, 25%) !default; :root, @@ -94,21 +78,21 @@ $input-focus-border-color: tint-color($component-active-bg, 25%) !default; --color-keyboard-border: #888; --color-keyboard-key-bg: #f7f7f7; --color-keyboard-key-hover: #494949; - --color-keyboard-key-active: #{theme-color('primary')}; + --color-keyboard-key-active: #{$primary}; --color-input-bg: #{$input-bg}; --color-input-text: #{$input-color}; - --color-input-border: #{theme-color('secondary')}; + --color-input-border: #{$secondary}; - --color-btn-secondary-border: #{theme-color('secondary')}; + --color-btn-secondary-border: #{$secondary}; - --color-icon-hover: #{theme-color('primary')}; + --color-icon-hover: #{$primary}; --color-icon-hover-delete: #{$icon-hover-delete}; - --color-icon-capture-keystroke: #{theme-color('danger')}; + --color-icon-capture-keystroke: #{$danger}; --color-slider-base-bg: #555; --color-slider-handle-bg: #888; - --color-slider-connect-bg: #{theme-color('primary')}; + --color-slider-connect-bg: #{$primary}; --color-popover-bg: #{$color-bg-light}; --color-popover-bg-light: #{$color-popover-bg-light}; @@ -117,11 +101,11 @@ $input-focus-border-color: tint-color($component-active-bg, 25%) !default; --color-popover-label-disabled: #959595; --color-keymap-tab-background: #{$color-bg}; --color-keypress-tab-setting-label-disabled: #999; - --color-keypress-tab-disabled-info-text: #{theme-color('primary')}; + --color-keypress-tab-disabled-info-text: #{$primary}; - --color-progress-bar-bg: #{shade-color(theme-color('primary'), 40%)}; - --color-progress-bar-progress: #{shade-color(theme-color('primary'), 20%)}; - --color-progress-bar-progress-rgb-colors: #{tint-color(theme-color('success'), 10%)}; + --color-progress-bar-bg: #{shade-color($primary, 40%)}; + --color-progress-bar-progress: #{shade-color($primary, 20%)}; + --color-progress-bar-progress-rgb-colors: #{tint-color($success, 10%)}; --color-progress-bar-text: #{$color-text}; --color-macro-bg: #333; @@ -137,21 +121,21 @@ $input-focus-border-color: tint-color($component-active-bg, 25%) !default; --color-xterm-bg: #000; // uses as the textarea border color too --color-xterm-border: #666; - --color-xterm-text: #{color('white')}; + --color-xterm-text: #{$white}; --color-xterm-text-error: red; - --color-update-available-bg: #{theme-color('info')}; + --color-update-available-bg: #{$info}; --color-update-available-text: #{$color-text-highlight}; --color-firmware-upgrade-panel-bg: #f39c12; --color-firmware-upgrade-panel-text: #fff; - --color-highlight-arrow: #{theme-color('primary')}; + --color-highlight-arrow: #{$primary}; - --color-layers-button-disabled: #{shade-color(theme-color('secondary'), 40)}; + --color-layers-button-disabled: #{shade-color($secondary, 40)}; --color-layers-button-active-disabled: #7c7c7c; - --color-out-of-space-warning-bg: #{theme-color('warning')}; + --color-out-of-space-warning-bg: #{$warning}; --color-out-of-space-warning-text: #000; --color-smart-macro-split-glutter: #000; diff --git a/packages/uhk-web/src/styles/themes/_light-bs-variables.scss b/packages/uhk-web/src/styles/themes/_light-bs-variables.scss new file mode 100644 index 00000000000..e39128b5e18 --- /dev/null +++ b/packages/uhk-web/src/styles/themes/_light-bs-variables.scss @@ -0,0 +1,8 @@ +$primary: #337ab7; +$secondary: #6d6d6d; +$success: #5cb85c; +$info: #5bc0de; +$warning: #f0ad4e; +$danger: #d9534f; +$light: #fff; +$dark: #212529; diff --git a/packages/uhk-web/src/styles/themes/_light.scss b/packages/uhk-web/src/styles/themes/_light.scss index da126d57b0c..8b41fe4c213 100644 --- a/packages/uhk-web/src/styles/themes/_light.scss +++ b/packages/uhk-web/src/styles/themes/_light.scss @@ -1,42 +1,28 @@ // Light aka default theme $dark-theme: false; -$dark: #212529; -$theme-colors: map-merge( - $theme-colors, - ( - 'primary': #337ab7, - 'secondary': #6d6d6d, - 'success': #5cb85c, - 'info': #5bc0de, - 'warning': #f0ad4e, - 'danger': #d9534f, - 'light': #fff, - 'dark': $dark - ) -); - -$color-bg: color('white'); + +$color-bg: $white; $color-bg-light: #f7f7f7; $color-text: #111; $color-text-highlight: #333; $color-copy-icon: #6a737d; -$btn-default-bg: color('white'); +$btn-default-bg: $white; $btn-default-border: #ccc; -$icon-hover: theme-color('primary'); -$icon-hover-delete: theme-color('danger'); +$icon-hover: $primary; +$icon-hover-delete: $danger; // Bootstrap variables $body-bg: $color-bg; $body-color: $color-text; -$link-color: theme-color('primary'); +$link-color: $primary; $link-hover-color: shade-color($link-color, 15%); $input-bg: $color-bg; $input-color: $color-text; $tooltip-color: #111; -$tooltip-bg: color('white'); -$tooltip-arrow-color: color('white'); +$tooltip-bg: $white; +$tooltip-arrow-color: $white; $tooltip-border-color: #ccc; $color-select-active-bg: #f5f5f5; $color-select-active-text: #333; @@ -45,8 +31,8 @@ $color-select-hover-text: #16181b; $popover-header-bg: $color-bg-light; $popover-arrow-color: $color-bg-light; -$component-active-bg: theme-color('primary') !default; -$input-focus-border-color: tint-color($component-active-bg, 25%) !default; +$component-active-bg: $primary !default; +$input-focus-border-color: lighten($component-active-bg, 25%) !default; :root, .theme-light { @@ -65,35 +51,35 @@ $input-focus-border-color: tint-color($component-active-bg, 25%) !default; --color-keyboard-text: #333; --color-keyboard-text-shadow: #fff; --color-keyboard-shadow: rgba(0, 0, 0, 0.2); - --color-keyboard-shadow2: #{color('white')}; + --color-keyboard-shadow2: #{$white}; --color-keyboard-border: #ccc; --color-keyboard-key-bg: #{$color-bg-light}; - --color-keyboard-key-hover: #{theme-color('secondary')}; - --color-keyboard-key-active: #{theme-color('primary')}; + --color-keyboard-key-hover: #{$secondary}; + --color-keyboard-key-active: #{$primary}; --color-input-border: #ccc; --color-btn-secondary-border: #ccc; --color-icon-hover: #{$icon-hover}; --color-icon-hover-delete: #{$icon-hover-delete}; - --color-icon-capture-keystroke: #{theme-color('danger')}; + --color-icon-capture-keystroke: #{$danger}; - --color-slider-base-bg: #{color('white')}; - --color-slider-handle-bg: #{color('white')}; - --color-slider-connect-bg: #{theme-color('primary')}; + --color-slider-base-bg: #{$white}; + --color-slider-handle-bg: #{$white}; + --color-slider-connect-bg: #{$primary}; --color-popover-bg: #{$color-bg-light}; - --color-popover-bg-light: #{color('white')}; + --color-popover-bg-light: #{$white}; --color-popover-border: #ebebeb; --color-popover-tab-hover: #{shade-color($color-bg-light, 5%)}; --color-popover-label-disabled: #959595; - --color-keymap-tab-background: #{color('white')}; + --color-keymap-tab-background: #{color($white)}; --color-keypress-tab-setting-label-disabled: #999; --color-keypress-tab-disabled-info-text: #31708f; --color-progress-bar-bg: #{#d3e4f2}; - --color-progress-bar-progress: #{tint-color(theme-color('primary'), 20%)}; - --color-progress-bar-progress-rgb-colors: #{tint-color(theme-color('success'), 20%)}; + --color-progress-bar-progress: #{tint-color($primary, 20%)}; + --color-progress-bar-progress-rgb-colors: #{tint-color($success, 20%)}; --color-progress-bar-text: #{$color-text}; --color-macro-bg: #{$color-bg-light}; @@ -109,16 +95,16 @@ $input-focus-border-color: tint-color($component-active-bg, 25%) !default; --color-xterm-bg: #000; // uses as the textarea border color too --color-xterm-border: #444; - --color-xterm-text: #{color('white')}; + --color-xterm-text: #{$white}; --color-xterm-text-error: red; --color-update-available-bg: #428bca; - --color-update-available-text: #{color('white')}; + --color-update-available-text: #{$white}; --color-firmware-upgrade-panel-bg: #fff3cd; --color-firmware-upgrade-panel-text: #664d03; - --color-highlight-arrow: #{theme-color('primary')}; + --color-highlight-arrow: #{$primary}; --color-layers-button-disabled: rgba(#ccc, 0.43); --color-layers-button-active-disabled: #7c7c7c;