Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-13 17:05:43 +01:00
Code Issues Packages Projects Releases Activity

Integrate tailwind css and create new button library (#2098)

Browse Source 
Introduce tailwind as new frontend styling library to replace bulma in the longer run. Also create the first new ui library `ui-buttons` which will be the new standard for buttons ins SCM-Manager. In this library we reconsidered which types of buttons should be used to create a clean and consistent ui.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
This commit is contained in:
Konstantin Schaper
2022-08-02 08:39:37 +02:00
committed by GitHub
parent 09beb8cd3b
commit 27dbcbf28d
67 changed files with 8592 additions and 7519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
scm-ui/ui-styles/src/dark.scss
View File

@@ -229,6 +229,23 @@ $danger-25: scale-color($danger, $lightness: -75%);
--diff-code-delete-edit-background-color: #{desaturate(#000, 20%)};
--diff-code-selected-background-color: #{desaturate(#fffce0, 20%)};
--diff-omit-gutter-line-color: #cb2a1d;
// Tailwind
--scm-primary-contrast-color: #{lighten($text-strong, 2.5%)};
--scm-primary-hover-color: #{darken($primary, 5%)};
--scm-primary-hover-contrast-color: #{lighten($text-strong, 2.5%)};
--scm-primary-active-color: #{darken($primary, 10%)};
--scm-primary-active-contrast-color: #{lighten($text-strong, 2.5%)};
--scm-primary-disabled-color: #{rgba($primary, 0.5)};
--scm-primary-disabled-contrast-color: #{rgba(lighten($text-strong, 2.5%), 0.5)};
--scm-warning-contrast-color: #88550D;
--scm-warning-hover-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-hover-color: #{darken($warning, 10%)};
--scm-warning-active-color: #{darken($warning, 20%)};
--scm-warning-active-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-disabled-color: #{rgba($warning, 0.5)};
--scm-warning-disabled-contrast-color: #{rgba(0,0,0,0.7)};
}
.menu-list {

17
scm-ui/ui-styles/src/highcontrast.scss
View File

@@ -127,6 +127,23 @@ $tooltip-color: $scheme-main;
--diff-code-delete-edit-background-color: #000;
--diff-code-selected-background-color: #fffce0;
--diff-omit-gutter-line-color: #cb2a1d;
// Tailwind
--scm-primary-contrast-color: #{$black-ter};
--scm-primary-hover-color: #{darken($primary, 5%)};
--scm-primary-hover-contrast-color: #{$black-ter};
--scm-primary-active-color: #{darken($primary, 10%)};
--scm-primary-active-contrast-color: #{$black-ter};
--scm-primary-disabled-color: #006970;
--scm-primary-disabled-contrast-color: #{$black-ter};
--scm-warning-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-hover-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-hover-color: #{darken($warning, 5%)};
--scm-warning-active-color: #{darken($warning, 10%)};
--scm-warning-active-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-disabled-color: #{darken($warning, 50%)};
--scm-warning-disabled-contrast-color: #{rgba(0,0,0,0.7)};
}
.button {

17
scm-ui/ui-styles/src/light.scss
View File

@@ -78,6 +78,23 @@ $popover-background-color: $grey-light;
--sh-selected-color: #{$warning-25};
--sh-highlight-background: #f5f5f5;
--sh-highlight-accent: #99d8f3;
// Tailwind
--scm-primary-contrast-color: #{$white};
--scm-primary-hover-color: #{darken($primary, 10%)};
--scm-primary-hover-contrast-color: #{$white};
--scm-primary-active-color: #{darken($primary, 20%)};
--scm-primary-active-contrast-color: #{$white};
--scm-primary-disabled-color: #bff3f7;
--scm-primary-disabled-contrast-color: #{$white};
--scm-warning-contrast-color: #88550D;
--scm-warning-hover-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-hover-color: #{darken($warning, 10%)};
--scm-warning-active-color: #{darken($warning, 20%)};
--scm-warning-active-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-disabled-color: #fff6d5;
--scm-warning-disabled-contrast-color: #e1d4c2;
}
.button {

55
scm-ui/ui-styles/src/tailwind.config.preset.js Normal file
View File

@@ -0,0 +1,55 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: "var(--scm-primary-color)",
contrast: "var(--scm-primary-contrast-color)",
hover: "var(--scm-primary-hover-color)",
"hover-contrast": "var(--scm-primary-hover-contrast-color)",
active: "var(--scm-primary-active-color)",
"active-contrast": "var(--scm-primary-active-contrast-color)",
disabled: "var(--scm-primary-disabled-color)",
"disabled-contrast": "var(--scm-primary-disabled-contrast-color)",
},
signal: {
DEFAULT: "var(--scm-warning-color)",
contrast: "var(--scm-warning-contrast-color)",
hover: "var(--scm-warning-hover-color)",
"hover-contrast": "var(--scm-warning-hover-contrast-color)",
active: "var(--scm-warning-active-color)",
"active-contrast": "var(--scm-warning-active-contrast-color)",
disabled: "var(--scm-warning-disabled-color)",
"disabled-contrast": "var(--scm-warning-disabled-contrast-color)",
},
},
},
},
important: true,
corePlugins: {
preflight: false,
}
};

16
scm-ui/ui-styles/src/utils/_post.scss
View File

@@ -21,7 +21,21 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
@import "bulma/bulma";
@import "bulma/sass/utilities/_all";
@import "bulma/sass/base/_all";
@import "bulma/sass/elements/_all";
@import "bulma/sass/form/_all";
@import "bulma/sass/components/_all";
@import "bulma/sass/grid/_all";
@import "bulma/sass/helpers/color";
@import "bulma/sass/helpers/flexbox";
@import "bulma/sass/helpers/float";
@import "bulma/sass/helpers/other";
@import "bulma/sass/helpers/overflow";
@import "bulma/sass/helpers/position";
@import "bulma/sass/helpers/typography";
@import "bulma/sass/helpers/visibility";
@import "bulma/sass/layout/_all";
@import "../variables/_derived.scss";
@import "bulma-popover/css/bulma-popover";
@import "../components/_main.scss";