Merge pull request #10702 from renanfranca/10576-upgrade-css-and-tiku…

…i-according-new-design harmonize the css with the current jhipster-website design
jhipster · Aug 30, 2024 · f858105 · f858105
2 parents 33647ee + 0f27243
commit f858105
Show file tree

Hide file tree

Showing 20 changed files with 87 additions and 59 deletions.
diff --git a/src/main/style/atom/button/_button.scss b/src/main/style/atom/button/_button.scss
@@ -1,16 +1,17 @@
 @use 'sass:math';
 
-$jhlite-button-color-background: $jhlite-color-brand-700;
+$jhlite-button-color-background: $jhlite-color-brand-600;
 $jhlite-button-color-text: $jhlite-global-color-text-light;
-$jhlite-button-hover-color-background: $jhlite-color-brand-800;
+$jhlite-button-hover-color-background: $jhlite-color-brand-700;
 $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-padding: math.div(9, 16) * 1rem math.div(17, 16) * 1rem;
 $jhlite-small-button-padding: 0.1rem 0.5rem;
 $jhlite-button-radius: math.div(6, 16) * 1rem;
 $jhlite-button-line-height: 1.5rem !default;
 $jhlite-button-font-size: 1rem !default;
+$jhlite-button-font-weight: $jhlite-font-weight-semi-bold;
 
 .jhlite-button {
  box-sizing: border-box;
@@ -25,7 +26,7 @@ $jhlite-button-font-size: 1rem !default;
  color: $jhlite-button-color-text;
  font-family: $jhlite-global-font-primary-family;
  font-size: $jhlite-button-font-size;
- font-weight: bold;
+ font-weight: $jhlite-button-font-weight;
 
  &:hover {
  background-color: $jhlite-button-hover-color-background;

diff --git a/src/main/style/atom/select/_select.scss b/src/main/style/atom/select/_select.scss
@@ -3,15 +3,17 @@
 
 $jhlite-select-color-background: rgba($jhlite-global-color-fill-light, 0);
 $jhlite-select-color-text: $jhlite-global-color-text-dark;
+$jhlite-select-color-border: $jhlite-global-color-field-border;
+$jhlite-select-color-border-focus: $jhlite-global-color-field-border-focus;
+$jhlite-select-size-field-border-focus: $jhlite-global-size-field-border-focus;
 $jhlite-select-disabled-color-background: $jhlite-global-color-fill-disabled-light;
-$jhlite-select-padding: 0.5rem 1rem;
-$jhlite-small-select-padding: 0.1rem 0.5rem;
-$jhlite-select-radius: math.div(6, 16) * 1rem;
+$jhlite-select-padding: math.div(9, 16) * 1rem math.div(1, 16) * 1rem math.div(9, 16) * 1rem math.div(13, 16) * 1rem;
+$jhlite-select-radius: $jhlite-global-size-field-radius;
 $jhlite-select-line-height: 1.5rem !default;
 $jhlite-select-font-size: 1rem !default;
 
 .jhlite-select {
- box-sizing: border-box;
+ border: $jhlite-global-size-field-border solid $jhlite-global-color-field-border;
  border-radius: $jhlite-select-radius;
  background-color: var(--jhlite-chip-bg-color);
  cursor: pointer;
@@ -20,30 +22,14 @@ $jhlite-select-font-size: 1rem !default;
  color: var(--jhlite-global-color-text);
  font-size: $jhlite-select-font-size;
 
- &:hover {
- background-color: var(--jhlite-accent-color);
- }
-
  &:focus {
  outline: none;
- box-shadow: 0 0 0 2px var(--jhlite-accent-color);
+ border-color: transparent;
+ box-shadow: 0 0 0 $jhlite-select-size-field-border-focus $jhlite-select-color-border-focus;
  }
 
  &:disabled {
  background-color: $jhlite-select-disabled-color-background;
  cursor: not-allowed;
  }
-
- &.-block {
- display: block;
- width: 100%;
- }
-
- &.-small {
- padding: $jhlite-small-select-padding;
- }
-
- &.-rounded-top {
- border-radius: $jhlite-select-radius $jhlite-select-radius 0 0;
- }
 }
diff --git a/src/main/style/font/inter/Inter-Bold.ttf b/src/main/style/font/inter/Inter-Bold.ttf
diff --git a/src/main/style/font/inter/Inter-Regular.ttf b/src/main/style/font/inter/Inter-Regular.ttf
diff --git a/src/main/style/font/inter/Inter-SemiBold.ttf b/src/main/style/font/inter/Inter-SemiBold.ttf
diff --git a/src/main/style/font/inter/inter.scss b/src/main/style/font/inter/inter.scss
@@ -0,0 +1,17 @@
+@font-face {
+ font-family: Inter;
+ font-weight: normal;
+ src: url('./Inter-Regular.ttf');
+}
+
+@font-face {
+ font-family: Inter;
+ font-weight: 600;
+ src: url('./Inter-SemiBold.ttf');
+}
+
+@font-face {
+ font-family: Inter;
+ font-weight: bold;
+ src: url('./Inter-Bold.ttf');
+}
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
diff --git a/src/main/style/layout.pug b/src/main/style/layout.pug
@@ -8,7 +8,7 @@ html(style=htmlStyle)
  block title
  title Tikui
  link(rel='stylesheet', href='[[TIKUI_BASEPATH]]glyph/css/jhlite-icons.css')
- link(rel='stylesheet', href='[[TIKUI_BASEPATH]]font/roboto/roboto.css')
+ link(rel='stylesheet', href='[[TIKUI_BASEPATH]]font/inter/inter.css')
  link(href='[[TIKUI_BASEPATH]]tikui.css', rel='stylesheet')
  body
  block body

diff --git a/src/main/style/molecule/field/field.code.pug b/src/main/style/molecule/field/field.code.pug
@@ -1,4 +1,5 @@
 include /atom/input/input-text/input-text.mixin.pug
+include /atom/select/select.mixin.pug
 
 include field.mixin.pug
 
@@ -7,3 +8,6 @@ include field.mixin.pug
 
 +jhlite-field('Field optional', {forId:'field-optional', optional: true})
  +jhlite-input-text({id: 'field-optional'})
+
++jhlite-field('Field select name', {forId:'field-select-name'})
+ +jhlite-select({id:'field-select-name'})
diff --git a/src/main/style/organism/landscape-preset-configuration/_landscape-preset-configuration.scss b/src/main/style/organism/landscape-preset-configuration/_landscape-preset-configuration.scss
@@ -1,7 +1,10 @@
+$jhlite-landscape-preset-configuration-color-border: $jhlite-global-line-color;
+$jhlite-landscape-preset-configuration-border-radius: $jhlite-global-box-radius;
+
 .jhlite-landscape-preset-configuration {
  &--content {
- border: 1px dotted $jhlite-landscape-line-color;
- border-radius: $jhlite-landscape-box-radius;
+ border: 1px dotted $jhlite-landscape-preset-configuration-color-border;
+ border-radius: 0 $jhlite-landscape-preset-configuration-border-radius $jhlite-landscape-preset-configuration-border-radius;
  padding: 10px;
  }
 

diff --git a/...in/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug b/...in/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug
@@ -1,10 +1,13 @@
 mixin jhlite-landscape-preset-configuration
  .jhlite-landscape-preset-configuration
- .jhlite-field--label
- label.jhlite-input(for='preset-configuration') Presets Configurations
- .jhlite-landscape-preset-configuration--field
- select#preset-configuration.jhlite-select(@change='handlePresetChange', :value='selectedPresetName')
- option(value='') Select a preset...
+ button.jhlite-button.-rounded-top.-small
+ em.jhlite-icon.jhlite-icon-eye-off(role='img', aria-label='Icon eye-off')
+ .jhlite-landscape-preset-configuration--content
+ .jhlite-field--label
+ label.jhlite-input(for='preset-configuration') Presets Configurations
+ .jhlite-landscape-preset-configuration--field
+ select#preset-configuration.jhlite-select(@change='handlePresetChange', :value='selectedPresetName')
+ option(value='') Select a preset...
  option(value='preset.name') Java Library with Maven
  option(value='preset.name') Webapp: Vue + Spring Boot
  option(value='preset.name') JHLite Extension with Maven
diff --git a/src/main/style/organism/modules-patch/_modules-patch.scss b/src/main/style/organism/modules-patch/_modules-patch.scss
@@ -1,12 +1,17 @@
 $jhlite-modules-patch-line-color: $jhlite-global-line-color;
 $jhlite-modules-patch-box-radius: $jhlite-global-box-radius;
 $jhlite-modules-patch-primary-color: $jhlite-global-primary-color;
-$jhlite-modules-patch-line-color: $jhlite-global-line-color;
 $jhlite-modules-patch-applied-module-color: $jhlite-global-applied-module-color;
-$jhlite-modules-patch-primary-color: $jhlite-global-primary-color;
-$jhlite-modules-patch-line-color: $jhlite-global-line-color;
 $jhlite-modules-patch-primary-input-color: $jhlite-global-primary-input-color;
 $jhlite-modules-patch-disabled-color: $jhlite-global-disabled-color;
+$jhlite-filter-color-field-border: $jhlite-global-color-field-border;
+$jhlite-filter-color-field-border-focus: $jhlite-global-color-field-border-focus;
+$jhlite-filter-size-field-border: $jhlite-global-size-field-border;
+$jhlite-filter-size-field-border-focus: $jhlite-global-size-field-border-focus;
+$jhlite-filter-size-field-radius: $jhlite-global-size-field-radius;
+$jhlite-filter-font-size: 1rem !default;
+$jhlite-filter-line-height: 1.5rem !default;
+$jhlite-filter-padding: 2px 10px !default;
 
 .jhipster-modules-patch {
  color: var(--jhlite-global-color-text);
@@ -36,10 +41,17 @@ $jhlite-modules-patch-disabled-color: $jhlite-global-disabled-color;
 
  &--filter {
  flex-grow: 1;
- border: 1px solid $jhlite-modules-patch-line-color;
- border-radius: $jhlite-modules-patch-box-radius;
- padding: 0 10px;
- font-size: 1.4em;
+ border: $jhlite-filter-size-field-border solid $jhlite-filter-color-field-border;
+ border-radius: $jhlite-filter-size-field-radius;
+ padding: $jhlite-filter-padding;
+ line-height: $jhlite-filter-line-height;
+ font-size: $jhlite-filter-font-size;
+
+ &:focus {
+ outline: none;
+ border-color: transparent;
+ box-shadow: 0 0 0 $jhlite-filter-size-field-border-focus $jhlite-filter-color-field-border-focus;
+ }
  }
 
  &--displayed-modules-count {

diff --git a/src/main/style/quark/_quark.scss b/src/main/style/quark/_quark.scss
@@ -8,12 +8,18 @@
 
 @mixin jhlite-q-field {
  box-sizing: border-box;
- border: $jhlite-global-size-field-border solid $jhlite-global-color-fill-primary-darker;
+ border: $jhlite-global-size-field-border solid $jhlite-global-color-field-border;
  border-radius: $jhlite-global-size-field-radius;
  padding: $jhlite-global-size-field-padding;
  line-height: $jhlite-global-size-field-line-height;
  font-size: $jhlite-global-size-field-font-size;
 
+ &:focus {
+ outline: none;
+ border-color: transparent;
+ box-shadow: 0 0 0 $jhlite-global-size-field-border-focus $jhlite-global-color-field-border-focus;
+ }
+
  &:disabled {
  cursor: not-allowed;
  color: $jhlite-global-color-text-disabled;

diff --git a/src/main/style/root/_root.scss b/src/main/style/root/_root.scss
@@ -1,5 +1,5 @@
 :root {
- --jhlite-brand: #045085;
+ --jhlite-brand: #0f5b90;
  --jhlite-white: #fff;
  --jhlite-modules-label: #000;
  --jhlite-line-color: #475569;

diff --git a/src/main/style/token/_colors.scss b/src/main/style/token/_colors.scss
@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use 'sass:math';
 @import 'color/color';
 
 /** Base */
@@ -8,12 +9,14 @@ $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-field-border: $jhlite-color-neutral-300;
+$jhlite-global-color-field-border-focus: $jhlite-color-brand-500;
 
 /** 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;
-$jhlite-global-primary-color: #0f5b90;
+$jhlite-global-primary-color: $jhlite-color-brand-700;
 $jhlite-global-secondary-color: #0f172a;
 $jhlite-global-line-color: var(--jhlite-line-color);
 $jhlite-global-primary-alternative-color: #3e8abf;

diff --git a/src/main/style/token/_fonts.scss b/src/main/style/token/_fonts.scss
@@ -1,6 +1,7 @@
 @import 'https://fonts.googleapis.com/css2?family=Open+Sans&family=Pacifico&display=swap';
 
-$jhlite-global-font-primary-family: 'Roboto', sans-serif;
+$jhlite-font-weight-semi-bold: 600;
+$jhlite-global-font-primary-family: 'Inter', sans-serif;
 $jhlite-global-font-text-size: 2.5vw;
 $jhlite-global-font-text-desktop-size: 16px;
 $jhlite-global-font-glyph-family: jhlite-icons;
diff --git a/src/main/style/token/_size.scss b/src/main/style/token/_size.scss
@@ -1,5 +1,8 @@
+@use 'sass:math';
+
 $jhlite-global-size-field-border: 1px !default;
+$jhlite-global-size-field-border-focus: 2px !default;
 $jhlite-global-size-field-line-height: 1rem !default;
 $jhlite-global-size-field-font-size: 1rem !default;
 $jhlite-global-size-field-padding: 10px !default;
-$jhlite-global-size-field-radius: $jhlite-global-size-field-padding + $jhlite-global-size-field-border;
+$jhlite-global-size-field-radius: math.div(6, 16) * 1rem;
diff --git a/src/main/style/token/color/_brand.scss b/src/main/style/token/color/_brand.scss
@@ -5,6 +5,6 @@ $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: var(--jhlite-brand);
+$jhlite-color-brand-700: var(--jhlite-brand);
+$jhlite-color-brand-800: #045085;
 $jhlite-color-brand-900: #004677;