Merge pull request #4195 from Gnuk/improve-buttons

Improve buttons
jhipster · Dec 17, 2022 · 9c42df8 · 9c42df8
2 parents 8b47ded + 5e1571d
commit 9c42df8
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 16 deletions.
diff --git a/src/main/style/atom/button/_button.scss b/src/main/style/atom/button/_button.scss
@@ -1,23 +1,39 @@
-$jhlite-button-color-background: $jhlite-global-color-fill-primary-dark;
+@use 'sass:math';
+
+$jhlite-button-color-background: $jhlite-color-brand-700;
 $jhlite-button-color-text: $jhlite-global-color-text-light;
-$jhlite-button-hover-color-background: $jhlite-global-color-fill-primary-darker;
-$jhlite-button-focus-color-outline: $jhlite-global-color-fill-primary-darker;
-$jhlite-button-disabled-color-background: $jhlite-global-color-fill-disabled-dark;
+$jhlite-button-hover-color-background: $jhlite-color-brand-800;
+$jhlite-button-focus-color-outline: rgba($jhlite-button-color-background, 50%);
+$jhlite-button-disabled-color-background: rgba($jhlite-button-color-background, 50%);
+$jhlite-button-disabled-color-text: rgba($jhlite-button-color-text, 50%);
+$jhlite-button-padding: 0.5rem 1rem;
+$jhlite-button-radius: math.div(6, 16) * 1rem;
+$jhlite-button-line-height: 1.5rem !default;
+$jhlite-button-font-size: 1rem !default;
 
 .jhlite-button {
-  @include jhlite-q-field;
-
+  box-sizing: border-box;
+  border: 0;
+  border-radius: $jhlite-button-radius;
   background-color: $jhlite-button-color-background;
   cursor: pointer;
+  padding: $jhlite-button-padding;
   text-align: center;
+  text-transform: uppercase;
+  line-height: $jhlite-button-line-height;
   color: $jhlite-button-color-text;
+  font-family: $jhlite-global-font-primary-family;
+  font-size: $jhlite-button-font-size;
+  font-weight: bold;
 
   &:hover {
     background-color: $jhlite-button-hover-color-background;
   }
 
   &:disabled {
     background-color: $jhlite-button-disabled-color-background;
+    cursor: not-allowed;
+    color: $jhlite-button-disabled-color-text;
   }
 
   &.-block {

diff --git a/src/main/style/atom/chip/_chip.scss b/src/main/style/atom/chip/_chip.scss
@@ -18,7 +18,7 @@
       float: left;
       margin: 2px 0 0 3px;
       color: $jhlite-global-color-success;
-      font-family: $jhlite-global-font-family;
+      font-family: $jhlite-global-font-glyph-family;
       content: '\e807';
     }
   }

diff --git a/src/main/style/font/roboto/Roboto-Bold.ttf b/src/main/style/font/roboto/Roboto-Bold.ttf
diff --git a/src/main/style/font/roboto/Roboto-Regular.ttf b/src/main/style/font/roboto/Roboto-Regular.ttf
diff --git a/src/main/style/font/roboto/roboto.scss b/src/main/style/font/roboto/roboto.scss
@@ -0,0 +1,11 @@
+@font-face {
+  font-family: Roboto;
+  font-weight: normal;
+  src: url('./Roboto-Regular.ttf');
+}
+
+@font-face {
+  font-family: Roboto;
+  font-weight: bold;
+  src: url('./Roboto-Bold.ttf');
+}
diff --git a/src/main/style/layout.pug b/src/main/style/layout.pug
@@ -9,6 +9,7 @@ html(style=htmlStyle)
       title Tikui
     link(rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans&family=Pacifico&display=swap')
     link(rel='stylesheet' href='[[TIKUI_BASEPATH]]glyph/css/jhlite-icons.css')
+    link(rel='stylesheet' href='[[TIKUI_BASEPATH]]font/roboto/roboto.css')
     link(href='[[TIKUI_BASEPATH]]tikui.css' rel='stylesheet')
   body
     block body

diff --git a/src/main/style/token/_colors.scss b/src/main/style/token/_colors.scss
@@ -1,13 +1,20 @@
 @use 'sass:color';
+@import 'color/color';
 
-$jhlite-global-color-primary: #4ba8f8 !default;
+/** Base */
+$jhlite-global-color-primary: $jhlite-color-brand-400 !default;
 $jhlite-global-color-light: #fff !default;
 $jhlite-global-color-fill-primary: $jhlite-global-color-primary !default;
 $jhlite-global-color-fill-primary-dark: color.change($jhlite-global-color-primary, $lightness: 40%) !default;
 $jhlite-global-color-fill-primary-darker: color.change($jhlite-global-color-primary, $lightness: 15%) !default;
 $jhlite-global-color-fill-light: $jhlite-global-color-light !default;
-$jhlite-global-color-text-primary: $jhlite-global-color-primary !default;
-$jhlite-global-color-text-dark: color.change($jhlite-global-color-primary, $lightness: 5%) !default;
+
+/** Texts */
+$jhlite-global-color-text-primary: $jhlite-color-brand-400 !default;
+$jhlite-global-color-text-dark: $jhlite-color-neutral-800;
+$jhlite-global-color-text-light: #fff !default;
+
+/** Other */
 $jhlite-global-color-fill-disabled-dark: color.change(
   $jhlite-global-color-primary,
   $saturation: 25%,
@@ -23,10 +30,9 @@ $jhlite-global-color-text-disabled: color.change(
   $saturation: 25%,
   $lightness: 60%
 ) !default;
-$jhlite-global-color-fill-secondary: #353d47 !default;
-$jhlite-global-color-text-light: $jhlite-global-color-light !default;
-$jhlite-global-color-link-light: $jhlite-global-color-light !default;
-$jhlite-global-color-link-light-hover: $jhlite-global-color-primary !default;
+$jhlite-global-color-fill-secondary: $jhlite-color-neutral-900 !default; // @deprecated
+$jhlite-global-color-link-light: $jhlite-global-color-text-light !default; // @deprecated
+$jhlite-global-color-link-light-hover: $jhlite-color-brand-200 !default; // @deprecated
 $jhlite-global-color-success: #480 !default;
 $jhlite-global-color-error: #902 !default;
 $jhlite-valid-highlight-animation: jhlite-valid-highlight-animation 2s infinite;

diff --git a/src/main/style/token/_fonts.scss b/src/main/style/token/_fonts.scss
@@ -1,4 +1,4 @@
-$jhlite-global-font-primary-family: sans-serif;
+$jhlite-global-font-primary-family: 'Roboto', sans-serif;
 $jhlite-global-font-text-size: 2.5vw;
 $jhlite-global-font-text-desktop-size: 16px;
-$jhlite-global-font-family: jhlite-icons;
+$jhlite-global-font-glyph-family: jhlite-icons;
diff --git a/src/main/style/token/color/_brand.scss b/src/main/style/token/color/_brand.scss
@@ -0,0 +1,10 @@
+$jhlite-color-brand-050: #eff8fe;
+$jhlite-color-brand-100: #ddeffc;
+$jhlite-color-brand-200: #b9dff9;
+$jhlite-color-brand-300: #83c6f5;
+$jhlite-color-brand-400: #59a5da;
+$jhlite-color-brand-500: #3e8abf;
+$jhlite-color-brand-600: #236fa4;
+$jhlite-color-brand-700: #0f5b90;
+$jhlite-color-brand-800: #045085;
+$jhlite-color-brand-900: #004677;
diff --git a/src/main/style/token/color/_color.scss b/src/main/style/token/color/_color.scss
@@ -0,0 +1,2 @@
+@import 'brand';
+@import 'neutral';
diff --git a/src/main/style/token/color/_neutral.scss b/src/main/style/token/color/_neutral.scss
@@ -0,0 +1,10 @@
+$jhlite-color-neutral-050: #f8fafc;
+$jhlite-color-neutral-100: #f1f5f9;
+$jhlite-color-neutral-200: #e2e8f0;
+$jhlite-color-neutral-300: #cbd5e1;
+$jhlite-color-neutral-400: #94a3b8;
+$jhlite-color-neutral-500: #64748b;
+$jhlite-color-neutral-600: #475569;
+$jhlite-color-neutral-700: #334155;
+$jhlite-color-neutral-800: #1e293b;
+$jhlite-color-neutral-900: #0f172a;