From ce5c4d9b11f130a7758125624f9138c0283e00bf Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Fri, 30 Aug 2024 11:16:55 -0300
Subject: [PATCH 01/12] fix(tikui-organism): indent select options to display
 properly in landscape-preset-configuration.mixin.pug

---
 .../landscape-preset-configuration.mixin.pug                | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug b/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug
index e621d8831f1..36113bdee96 100644
--- a/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug
+++ b/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug
@@ -8,6 +8,6 @@ mixin jhlite-landscape-preset-configuration
       .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
+          option(value='preset.name') Java Library with Maven
+          option(value='preset.name') Webapp: Vue + Spring Boot
+          option(value='preset.name') JHLite Extension with Maven

From e58d24d2e963ed8742187fa21bc39802b86bff86 Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Mon, 2 Sep 2024 11:44:38 -0300
Subject: [PATCH 02/12] feat(tikui-atom): add button small example at tikui
 documentation

---
 src/main/style/atom/button/button.code.pug  | 1 +
 src/main/style/atom/button/button.mixin.pug | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/main/style/atom/button/button.code.pug b/src/main/style/atom/button/button.code.pug
index fcff98411a5..227d077a832 100644
--- a/src/main/style/atom/button/button.code.pug
+++ b/src/main/style/atom/button/button.code.pug
@@ -2,4 +2,5 @@ include button.mixin.pug
 
 +jhlite-button Button
 +jhlite-button({disabled: true}) Button
++jhlite-button({small: true}) Button
 +jhlite-button({block: true}) Button
diff --git a/src/main/style/atom/button/button.mixin.pug b/src/main/style/atom/button/button.mixin.pug
index 85fb890e6ff..c91e469773a 100644
--- a/src/main/style/atom/button/button.mixin.pug
+++ b/src/main/style/atom/button/button.mixin.pug
@@ -1,5 +1,6 @@
 mixin jhlite-button(opts)
-  - const { block: isBlock, disabled } = opts || {};
+  - const { block: isBlock, small: isSmall, disabled } = opts || {};
   - const blockClass = isBlock ? '-block' : null;
-  button.jhlite-button(class=blockClass, disabled=disabled)
+  - const smallClass = isSmall ? '-small' : null;
+  button.jhlite-button(class=blockClass || smallClass, disabled=disabled)
     block

From e08cf45b44732c75cac4eceb668c7fa40e4a6ecc Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Mon, 2 Sep 2024 13:01:48 -0300
Subject: [PATCH 03/12] feat(tikui-atom): create a button-switch which extend
 from button atom

---
 src/main/style/atom/_atom.scss                |  1 +
 src/main/style/atom/atom.pug                  |  2 ++
 src/main/style/atom/button/_button.scss       | 20 ++++++++++-----
 .../button/button-switch/_button-switch.scss  | 25 +++++++++++++++++++
 .../button-switch/button-switch.code.pug      |  4 +++
 .../button/button-switch/button-switch.md     |  1 +
 .../button-switch/button-switch.mixin.pug     |  5 ++++
 .../button-switch/button-switch.render.pug    |  4 +++
 8 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100644 src/main/style/atom/button/button-switch/_button-switch.scss
 create mode 100644 src/main/style/atom/button/button-switch/button-switch.code.pug
 create mode 100644 src/main/style/atom/button/button-switch/button-switch.md
 create mode 100644 src/main/style/atom/button/button-switch/button-switch.mixin.pug
 create mode 100644 src/main/style/atom/button/button-switch/button-switch.render.pug

diff --git a/src/main/style/atom/_atom.scss b/src/main/style/atom/_atom.scss
index 8d6e23d35bc..ac8f53aec41 100644
--- a/src/main/style/atom/_atom.scss
+++ b/src/main/style/atom/_atom.scss
@@ -1,4 +1,5 @@
 @import 'button/button';
+@import 'button/button-switch/button-switch';
 @import 'chip/chip';
 @import 'icon/icon';
 @import 'input/input';
diff --git a/src/main/style/atom/atom.pug b/src/main/style/atom/atom.pug
index c9b62f1d299..e7d582fbd4d 100644
--- a/src/main/style/atom/atom.pug
+++ b/src/main/style/atom/atom.pug
@@ -14,6 +14,8 @@ block content
       include /documentation/atomic-design/quote/atom
     .tikui-vertical-spacing--line
       include:componentDoc(height=100) button/button.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=100) button/button-switch/button-switch.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=610) chip/chip.md
     .tikui-vertical-spacing--line
diff --git a/src/main/style/atom/button/_button.scss b/src/main/style/atom/button/_button.scss
index 5fe4a8f4cc1..e2598b7ff34 100644
--- a/src/main/style/atom/button/_button.scss
+++ b/src/main/style/atom/button/_button.scss
@@ -1,8 +1,11 @@
 @use 'sass:math';
+@use '../../token/color/brand' as brand;
+@use '../../token/colors' as colors;
+@use '../../token/fonts' as fonts;
 
-$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-700;
+$jhlite-button-color-background: brand.$jhlite-color-brand-600;
+$jhlite-button-color-text: colors.$jhlite-global-color-text-light;
+$jhlite-button-hover-color-background: brand.$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%);
@@ -10,10 +13,11 @@ $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-family: fonts.$jhlite-global-font-primary-family;
 $jhlite-button-font-size: 1rem !default;
-$jhlite-button-font-weight: $jhlite-font-weight-semi-bold;
+$jhlite-button-font-weight: fonts.$jhlite-font-weight-semi-bold;
 
-.jhlite-button {
+%jhlite-button {
   box-sizing: border-box;
   border: 0;
   border-radius: $jhlite-button-radius;
@@ -24,7 +28,7 @@ $jhlite-button-font-weight: $jhlite-font-weight-semi-bold;
   text-transform: uppercase;
   line-height: $jhlite-button-line-height;
   color: $jhlite-button-color-text;
-  font-family: $jhlite-global-font-primary-family;
+  font-family: $jhlite-button-font-family;
   font-size: $jhlite-button-font-size;
   font-weight: $jhlite-button-font-weight;
 
@@ -53,3 +57,7 @@ $jhlite-button-font-weight: $jhlite-font-weight-semi-bold;
     border-top-right-radius: $jhlite-button-radius;
   }
 }
+
+.jhlite-button {
+  @extend %jhlite-button;
+}
diff --git a/src/main/style/atom/button/button-switch/_button-switch.scss b/src/main/style/atom/button/button-switch/_button-switch.scss
new file mode 100644
index 00000000000..6b0edef0ed6
--- /dev/null
+++ b/src/main/style/atom/button/button-switch/_button-switch.scss
@@ -0,0 +1,25 @@
+@use 'sass:math';
+@use '../../../token/colors' as colors;
+@use '../button' as button;
+
+$jhlite-button-switch-padding: math.div(5, 16) * 1rem math.div(15, 16) * 1rem;
+$jhlite-button-switch-color-text-light: colors.$jhlite-global-color-text-light;
+
+.jhlite-button-switch {
+  @extend %jhlite-button;
+
+  border-radius: 1.5em;
+  background-color: transparent;
+  padding: $jhlite-button-switch-padding;
+  text-transform: none;
+  color: var(--jhlite-global-color-text);
+
+  &:hover {
+    background-color: transparent;
+  }
+
+  &.-selected {
+    background-color: button.$jhlite-button-hover-color-background;
+    color: $jhlite-button-switch-color-text-light;
+  }
+}
diff --git a/src/main/style/atom/button/button-switch/button-switch.code.pug b/src/main/style/atom/button/button-switch/button-switch.code.pug
new file mode 100644
index 00000000000..4297411228f
--- /dev/null
+++ b/src/main/style/atom/button/button-switch/button-switch.code.pug
@@ -0,0 +1,4 @@
+include button-switch.mixin.pug
+
++jhlite-button-switch button-switch
++jhlite-button-switch({selected: true}) button-switch-selected
diff --git a/src/main/style/atom/button/button-switch/button-switch.md b/src/main/style/atom/button/button-switch/button-switch.md
new file mode 100644
index 00000000000..02d20cd4902
--- /dev/null
+++ b/src/main/style/atom/button/button-switch/button-switch.md
@@ -0,0 +1 @@
+## Button switch
diff --git a/src/main/style/atom/button/button-switch/button-switch.mixin.pug b/src/main/style/atom/button/button-switch/button-switch.mixin.pug
new file mode 100644
index 00000000000..400531e6478
--- /dev/null
+++ b/src/main/style/atom/button/button-switch/button-switch.mixin.pug
@@ -0,0 +1,5 @@
+mixin jhlite-button-switch(opts)
+  - const { selected: isSelected } = opts || {};
+  - const selectedClass = isSelected ? '-selected' : null;
+  button.jhlite-button-switch(class=selectedClass)
+    block
diff --git a/src/main/style/atom/button/button-switch/button-switch.render.pug b/src/main/style/atom/button/button-switch/button-switch.render.pug
new file mode 100644
index 00000000000..d21eebd7cc0
--- /dev/null
+++ b/src/main/style/atom/button/button-switch/button-switch.render.pug
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include button-switch.code.pug

From faf3b27072cf8dab75114db3caead805ea2e0e97 Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Fri, 30 Aug 2024 13:17:04 -0300
Subject: [PATCH 04/12] feat(tikui-molecule): create mode-switch molecule to be
 used in landscape screen

---
 src/main/style/molecule/_molecule.scss                 |  1 +
 src/main/style/molecule/mode-switch/_mode-switch.scss  | 10 ++++++++++
 .../style/molecule/mode-switch/mode-switch.code.pug    |  3 +++
 src/main/style/molecule/mode-switch/mode-switch.md     |  1 +
 .../style/molecule/mode-switch/mode-switch.mixin.pug   |  7 +++++++
 .../style/molecule/mode-switch/mode-switch.render.pug  |  4 ++++
 src/main/style/molecule/molecule.pug                   |  2 ++
 7 files changed, 28 insertions(+)
 create mode 100644 src/main/style/molecule/mode-switch/_mode-switch.scss
 create mode 100644 src/main/style/molecule/mode-switch/mode-switch.code.pug
 create mode 100644 src/main/style/molecule/mode-switch/mode-switch.md
 create mode 100644 src/main/style/molecule/mode-switch/mode-switch.mixin.pug
 create mode 100644 src/main/style/molecule/mode-switch/mode-switch.render.pug

diff --git a/src/main/style/molecule/_molecule.scss b/src/main/style/molecule/_molecule.scss
index d6dbe072d66..dcd78c5e166 100644
--- a/src/main/style/molecule/_molecule.scss
+++ b/src/main/style/molecule/_molecule.scss
@@ -1,6 +1,7 @@
 @import 'field/field';
 @import 'icon-text/icon-text';
 @import 'loader-container/loader-container';
+@import 'mode-switch/mode-switch';
 @import 'nav/nav';
 @import 'tag-filter/tag-filter';
 @import 'toast/toast';
diff --git a/src/main/style/molecule/mode-switch/_mode-switch.scss b/src/main/style/molecule/mode-switch/_mode-switch.scss
new file mode 100644
index 00000000000..750dfc35a0b
--- /dev/null
+++ b/src/main/style/molecule/mode-switch/_mode-switch.scss
@@ -0,0 +1,10 @@
+$jhlite-mode-switch-line-color: $jhlite-global-line-color;
+
+.jhlite-mode-switch {
+  display: flex;
+
+  &--modes {
+    border: 1px solid $jhlite-mode-switch-line-color;
+    border-radius: 1.5em;
+  }
+}
diff --git a/src/main/style/molecule/mode-switch/mode-switch.code.pug b/src/main/style/molecule/mode-switch/mode-switch.code.pug
new file mode 100644
index 00000000000..9c862badb6c
--- /dev/null
+++ b/src/main/style/molecule/mode-switch/mode-switch.code.pug
@@ -0,0 +1,3 @@
+include mode-switch.mixin.pug
+
++jhlite-mode-switch
diff --git a/src/main/style/molecule/mode-switch/mode-switch.md b/src/main/style/molecule/mode-switch/mode-switch.md
new file mode 100644
index 00000000000..fca5087a22d
--- /dev/null
+++ b/src/main/style/molecule/mode-switch/mode-switch.md
@@ -0,0 +1 @@
+## Mode switch
diff --git a/src/main/style/molecule/mode-switch/mode-switch.mixin.pug b/src/main/style/molecule/mode-switch/mode-switch.mixin.pug
new file mode 100644
index 00000000000..2220dabc4d3
--- /dev/null
+++ b/src/main/style/molecule/mode-switch/mode-switch.mixin.pug
@@ -0,0 +1,7 @@
+include /atom/button/button-switch/button-switch.mixin.pug
+
+mixin jhlite-mode-switch
+  .jhlite-mode-switch
+    .jhlite-mode-switch--modes
+      +jhlite-button-switch({selected: true}) Option one
+      +jhlite-button-switch Option two
diff --git a/src/main/style/molecule/mode-switch/mode-switch.render.pug b/src/main/style/molecule/mode-switch/mode-switch.render.pug
new file mode 100644
index 00000000000..2fac3570cd2
--- /dev/null
+++ b/src/main/style/molecule/mode-switch/mode-switch.render.pug
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include mode-switch.code.pug
diff --git a/src/main/style/molecule/molecule.pug b/src/main/style/molecule/molecule.pug
index e3888913f41..7087b295027 100644
--- a/src/main/style/molecule/molecule.pug
+++ b/src/main/style/molecule/molecule.pug
@@ -18,6 +18,8 @@ block content
       include:componentDoc(height=50) icon-text/icon-text.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=70) loader-container/loader-container.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=70) mode-switch/mode-switch.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=50) nav/nav.md
     .tikui-vertical-spacing--line

From 470491a2292f1c2a31480bec39f1f984d9837633 Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Mon, 2 Sep 2024 16:05:10 -0300
Subject: [PATCH 05/12] feat(tikui-token): create a global variable ofr switch
 border radius size

---
 src/main/style/atom/button/button-switch/_button-switch.scss | 4 +++-
 src/main/style/molecule/mode-switch/_mode-switch.scss        | 3 ++-
 src/main/style/token/_size.scss                              | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/main/style/atom/button/button-switch/_button-switch.scss b/src/main/style/atom/button/button-switch/_button-switch.scss
index 6b0edef0ed6..2371223b340 100644
--- a/src/main/style/atom/button/button-switch/_button-switch.scss
+++ b/src/main/style/atom/button/button-switch/_button-switch.scss
@@ -1,14 +1,16 @@
 @use 'sass:math';
 @use '../../../token/colors' as colors;
 @use '../button' as button;
+@use '../../../token/size' as size;
 
 $jhlite-button-switch-padding: math.div(5, 16) * 1rem math.div(15, 16) * 1rem;
 $jhlite-button-switch-color-text-light: colors.$jhlite-global-color-text-light;
+$jhlite-button-switch-radius: size.$jhlite-global-size-switch-radius;
 
 .jhlite-button-switch {
   @extend %jhlite-button;
 
-  border-radius: 1.5em;
+  border-radius: $jhlite-button-switch-radius;
   background-color: transparent;
   padding: $jhlite-button-switch-padding;
   text-transform: none;
diff --git a/src/main/style/molecule/mode-switch/_mode-switch.scss b/src/main/style/molecule/mode-switch/_mode-switch.scss
index 750dfc35a0b..5c48aa8ec42 100644
--- a/src/main/style/molecule/mode-switch/_mode-switch.scss
+++ b/src/main/style/molecule/mode-switch/_mode-switch.scss
@@ -1,10 +1,11 @@
 $jhlite-mode-switch-line-color: $jhlite-global-line-color;
+$jhlite-mode-switch-radius: $jhlite-global-size-switch-radius;
 
 .jhlite-mode-switch {
   display: flex;
 
   &--modes {
     border: 1px solid $jhlite-mode-switch-line-color;
-    border-radius: 1.5em;
+    border-radius: $jhlite-mode-switch-radius;
   }
 }
diff --git a/src/main/style/token/_size.scss b/src/main/style/token/_size.scss
index 47f2fd40ee1..c0b3aaa9242 100644
--- a/src/main/style/token/_size.scss
+++ b/src/main/style/token/_size.scss
@@ -6,3 +6,4 @@ $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: math.div(6, 16) * 1rem;
+$jhlite-global-size-switch-radius: 1.5rem;

From c4b0b34d8a968b38b0e4f23d9912b2729192b672 Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Mon, 2 Sep 2024 16:20:44 -0300
Subject: [PATCH 06/12] refactor(tikui-organism): add jhlite-mode-switch
 molecule to jhlite-landscape organism and remove the local mode switch styles

---
 .../molecule/mode-switch/mode-switch.code.pug |  2 +-
 .../mode-switch/mode-switch.mixin.pug         |  6 +++---
 .../style/organism/landscape/_landscape.scss  | 19 -------------------
 .../organism/landscape/landscape.mixin.pug    |  5 ++---
 4 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/src/main/style/molecule/mode-switch/mode-switch.code.pug b/src/main/style/molecule/mode-switch/mode-switch.code.pug
index 9c862badb6c..3b575a5c26b 100644
--- a/src/main/style/molecule/mode-switch/mode-switch.code.pug
+++ b/src/main/style/molecule/mode-switch/mode-switch.code.pug
@@ -1,3 +1,3 @@
 include mode-switch.mixin.pug
 
-+jhlite-mode-switch
++jhlite-mode-switch('Option one', 'Option two')
diff --git a/src/main/style/molecule/mode-switch/mode-switch.mixin.pug b/src/main/style/molecule/mode-switch/mode-switch.mixin.pug
index 2220dabc4d3..5d5d5980c8e 100644
--- a/src/main/style/molecule/mode-switch/mode-switch.mixin.pug
+++ b/src/main/style/molecule/mode-switch/mode-switch.mixin.pug
@@ -1,7 +1,7 @@
 include /atom/button/button-switch/button-switch.mixin.pug
 
-mixin jhlite-mode-switch
+mixin jhlite-mode-switch(selectedOptionLabel, unselectedOptionLabel)
   .jhlite-mode-switch
     .jhlite-mode-switch--modes
-      +jhlite-button-switch({selected: true}) Option one
-      +jhlite-button-switch Option two
+      +jhlite-button-switch({selected: true})= selectedOptionLabel
+      +jhlite-button-switch= unselectedOptionLabel
diff --git a/src/main/style/organism/landscape/_landscape.scss b/src/main/style/organism/landscape/_landscape.scss
index a537b42c8f4..74866f1ffce 100644
--- a/src/main/style/organism/landscape/_landscape.scss
+++ b/src/main/style/organism/landscape/_landscape.scss
@@ -24,25 +24,6 @@ $jhlite-landscape-primary-alternative-color: $jhlite-global-primary-alternative-
     border-radius: $jhlite-landscape-box-radius;
     background: var(--jhlite-chip-bg-color);
     padding: 10px;
-
-    &--modes {
-      border: 1px solid $jhlite-landscape-line-color;
-      border-radius: 1.5em;
-    }
-
-    &--modes-switch {
-      border: 0;
-      border-radius: 1.5em;
-      background-color: transparent;
-      cursor: pointer;
-      padding: 7px 15px;
-      color: var(--jhlite-global-color-text);
-
-      &.-selected {
-        background-color: $jhlite-landscape-primary-color;
-        color: $jhlite-landscape-color-text-light;
-      }
-    }
   }
 
   .jhipster-landscape-preset-selection {
diff --git a/src/main/style/organism/landscape/landscape.mixin.pug b/src/main/style/organism/landscape/landscape.mixin.pug
index e2708f13e2d..3f67f91d9a5 100644
--- a/src/main/style/organism/landscape/landscape.mixin.pug
+++ b/src/main/style/organism/landscape/landscape.mixin.pug
@@ -1,13 +1,12 @@
 include /organism/module-properties/module-properties.mixin.pug
 include /organism/landscape-module/landscape-module.mixin.pug
 include /organism/project-actions/project-actions.mixin.pug
+include /molecule/mode-switch/mode-switch.mixin.pug
 
 mixin jhlite-landscape
   .jhipster-landscape.jhlite-menu-content-template
     .jhipster-landscape-modes-selection
-      .jhipster-landscape-modes-selection--modes
-        button.jhipster-landscape-modes-selection--modes-switch.-selected Compacted
-        button.jhipster-landscape-modes-selection--modes-switch Extended
+      +jhlite-mode-switch('Compacted', 'Extended')
     .jhipster-landscape-map.jhlite-menu-content-template--content
       .jhipster-landscape-levels
         ul.jhipster-landscape-levels--level.-compacted

From c638a14dbeb048b241f7543599e3779f9462fea5 Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Mon, 2 Sep 2024 17:32:30 -0300
Subject: [PATCH 07/12] refactor(landscape): apply the mode-switch molecule to
 the landscape screen

---
 .../module/primary/landscape/Landscape.html   | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/main/webapp/app/module/primary/landscape/Landscape.html b/src/main/webapp/app/module/primary/landscape/Landscape.html
index df739d3f0b4..bd7ddab5ba1 100644
--- a/src/main/webapp/app/module/primary/landscape/Landscape.html
+++ b/src/main/webapp/app/module/primary/landscape/Landscape.html
@@ -1,23 +1,25 @@
 <LandscapeLoaderVue v-if="levels.isLoading()" />
 <div class="jhipster-landscape jhlite-menu-content-template" v-else data-selector="landscape">
   <div class="jhipster-landscape-modes-selection">
-    <div class="jhipster-landscape-modes-selection--modes">
-      <button
-        class="jhipster-landscape-modes-selection--modes-switch"
-        :class="modeSwitchClass('COMPACTED')"
-        @click="selectMode('COMPACTED')"
-        data-selector="compacted-mode-button"
-      >
-        Compacted
-      </button>
-      <button
-        class="jhipster-landscape-modes-selection--modes-switch"
-        :class="modeSwitchClass('EXTENDED')"
-        @click="selectMode('EXTENDED')"
-        data-selector="extended-mode-button"
-      >
-        Extended
-      </button>
+    <div class="jhlite-mode-switch">
+      <div class="jhlite-mode-switch--modes">
+        <button
+          class="jhlite-button-switch"
+          :class="modeSwitchClass('COMPACTED')"
+          @click="selectMode('COMPACTED')"
+          data-selector="compacted-mode-button"
+        >
+          Compacted
+        </button>
+        <button
+          class="jhlite-button-switch"
+          :class="modeSwitchClass('EXTENDED')"
+          @click="selectMode('EXTENDED')"
+          data-selector="extended-mode-button"
+        >
+          Extended
+        </button>
+      </div>
     </div>
   </div>
   <div class="jhipster-landscape-preset-selection">

From 0511ca48b10b09059a351cc340b3e1333950703f Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Tue, 3 Sep 2024 10:41:25 -0300
Subject: [PATCH 08/12] refactor(tikui-atom): move button atom to button-main
 folder

---
 src/main/style/atom/_atom.scss                              | 2 +-
 src/main/style/atom/atom.pug                                | 2 +-
 src/main/style/atom/button/{ => button-main}/_button.scss   | 6 +++---
 .../style/atom/button/{ => button-main}/button.code.pug     | 0
 src/main/style/atom/button/{ => button-main}/button.md      | 0
 .../style/atom/button/{ => button-main}/button.mixin.pug    | 0
 .../style/atom/button/{ => button-main}/button.render.pug   | 0
 .../style/atom/button/button-switch/_button-switch.scss     | 2 +-
 8 files changed, 6 insertions(+), 6 deletions(-)
 rename src/main/style/atom/button/{ => button-main}/_button.scss (93%)
 rename src/main/style/atom/button/{ => button-main}/button.code.pug (100%)
 rename src/main/style/atom/button/{ => button-main}/button.md (100%)
 rename src/main/style/atom/button/{ => button-main}/button.mixin.pug (100%)
 rename src/main/style/atom/button/{ => button-main}/button.render.pug (100%)

diff --git a/src/main/style/atom/_atom.scss b/src/main/style/atom/_atom.scss
index ac8f53aec41..6c1b2c2eb47 100644
--- a/src/main/style/atom/_atom.scss
+++ b/src/main/style/atom/_atom.scss
@@ -1,4 +1,4 @@
-@import 'button/button';
+@import 'button/button-main/button';
 @import 'button/button-switch/button-switch';
 @import 'chip/chip';
 @import 'icon/icon';
diff --git a/src/main/style/atom/atom.pug b/src/main/style/atom/atom.pug
index e7d582fbd4d..c3298e83cdc 100644
--- a/src/main/style/atom/atom.pug
+++ b/src/main/style/atom/atom.pug
@@ -13,7 +13,7 @@ block content
     .tikui-vertical-spacing--line
       include /documentation/atomic-design/quote/atom
     .tikui-vertical-spacing--line
-      include:componentDoc(height=100) button/button.md
+      include:componentDoc(height=100) button/button-main/button.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=100) button/button-switch/button-switch.md
     .tikui-vertical-spacing--line
diff --git a/src/main/style/atom/button/_button.scss b/src/main/style/atom/button/button-main/_button.scss
similarity index 93%
rename from src/main/style/atom/button/_button.scss
rename to src/main/style/atom/button/button-main/_button.scss
index e2598b7ff34..12a5a70b6f6 100644
--- a/src/main/style/atom/button/_button.scss
+++ b/src/main/style/atom/button/button-main/_button.scss
@@ -1,7 +1,7 @@
 @use 'sass:math';
-@use '../../token/color/brand' as brand;
-@use '../../token/colors' as colors;
-@use '../../token/fonts' as fonts;
+@use '../../../token/color/brand' as brand;
+@use '../../../token/colors' as colors;
+@use '../../../token/fonts' as fonts;
 
 $jhlite-button-color-background: brand.$jhlite-color-brand-600;
 $jhlite-button-color-text: colors.$jhlite-global-color-text-light;
diff --git a/src/main/style/atom/button/button.code.pug b/src/main/style/atom/button/button-main/button.code.pug
similarity index 100%
rename from src/main/style/atom/button/button.code.pug
rename to src/main/style/atom/button/button-main/button.code.pug
diff --git a/src/main/style/atom/button/button.md b/src/main/style/atom/button/button-main/button.md
similarity index 100%
rename from src/main/style/atom/button/button.md
rename to src/main/style/atom/button/button-main/button.md
diff --git a/src/main/style/atom/button/button.mixin.pug b/src/main/style/atom/button/button-main/button.mixin.pug
similarity index 100%
rename from src/main/style/atom/button/button.mixin.pug
rename to src/main/style/atom/button/button-main/button.mixin.pug
diff --git a/src/main/style/atom/button/button.render.pug b/src/main/style/atom/button/button-main/button.render.pug
similarity index 100%
rename from src/main/style/atom/button/button.render.pug
rename to src/main/style/atom/button/button-main/button.render.pug
diff --git a/src/main/style/atom/button/button-switch/_button-switch.scss b/src/main/style/atom/button/button-switch/_button-switch.scss
index 2371223b340..b979a9114ee 100644
--- a/src/main/style/atom/button/button-switch/_button-switch.scss
+++ b/src/main/style/atom/button/button-switch/_button-switch.scss
@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use '../../../token/colors' as colors;
-@use '../button' as button;
+@use '../button-main/button' as button;
 @use '../../../token/size' as size;
 
 $jhlite-button-switch-padding: math.div(5, 16) * 1rem math.div(15, 16) * 1rem;

From 7464afa193ca0f70477711f20f0514f72ae85f19 Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Tue, 3 Sep 2024 11:08:57 -0300
Subject: [PATCH 09/12] refactor(tikui-atom): rename button atom to button-main

---
 src/main/style/atom/_atom.scss                            | 2 +-
 src/main/style/atom/atom.pug                              | 2 +-
 .../button-main/{_button.scss => _button-main.scss}       | 6 +++---
 .../style/atom/button/button-main/button-main.code.pug    | 6 ++++++
 src/main/style/atom/button/button-main/button-main.md     | 1 +
 .../{button.mixin.pug => button-main.mixin.pug}           | 4 ++--
 .../style/atom/button/button-main/button-main.render.pug  | 4 ++++
 src/main/style/atom/button/button-main/button.code.pug    | 6 ------
 src/main/style/atom/button/button-main/button.md          | 1 -
 src/main/style/atom/button/button-main/button.render.pug  | 4 ----
 .../style/atom/button/button-switch/_button-switch.scss   | 6 +++---
 .../landscape-minimap/landscape-minimap.mixin.pug         | 2 +-
 .../landscape-preset-configuration.mixin.pug              | 2 +-
 .../organism/project-actions/project-actions.mixin.pug    | 8 ++++----
 .../menu-content-template/menu-content-template.mixin.pug | 6 +++---
 .../primary/landscape-minimap/LandscapeMiniMap.html       | 6 ++++--
 .../LandscapePresetConfiguration.html                     | 4 ++--
 .../webapp/app/module/primary/landscape/Landscape.html    | 4 ++--
 .../module/primary/project-actions/ProjectActions.html    | 4 ++--
 19 files changed, 40 insertions(+), 38 deletions(-)
 rename src/main/style/atom/button/button-main/{_button.scss => _button-main.scss} (96%)
 create mode 100644 src/main/style/atom/button/button-main/button-main.code.pug
 create mode 100644 src/main/style/atom/button/button-main/button-main.md
 rename src/main/style/atom/button/button-main/{button.mixin.pug => button-main.mixin.pug} (61%)
 create mode 100644 src/main/style/atom/button/button-main/button-main.render.pug
 delete mode 100644 src/main/style/atom/button/button-main/button.code.pug
 delete mode 100644 src/main/style/atom/button/button-main/button.md
 delete mode 100644 src/main/style/atom/button/button-main/button.render.pug

diff --git a/src/main/style/atom/_atom.scss b/src/main/style/atom/_atom.scss
index 6c1b2c2eb47..6d003287d03 100644
--- a/src/main/style/atom/_atom.scss
+++ b/src/main/style/atom/_atom.scss
@@ -1,4 +1,4 @@
-@import 'button/button-main/button';
+@import 'button/button-main/button-main';
 @import 'button/button-switch/button-switch';
 @import 'chip/chip';
 @import 'icon/icon';
diff --git a/src/main/style/atom/atom.pug b/src/main/style/atom/atom.pug
index c3298e83cdc..3da70974234 100644
--- a/src/main/style/atom/atom.pug
+++ b/src/main/style/atom/atom.pug
@@ -13,7 +13,7 @@ block content
     .tikui-vertical-spacing--line
       include /documentation/atomic-design/quote/atom
     .tikui-vertical-spacing--line
-      include:componentDoc(height=100) button/button-main/button.md
+      include:componentDoc(height=100) button/button-main/button-main.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=100) button/button-switch/button-switch.md
     .tikui-vertical-spacing--line
diff --git a/src/main/style/atom/button/button-main/_button.scss b/src/main/style/atom/button/button-main/_button-main.scss
similarity index 96%
rename from src/main/style/atom/button/button-main/_button.scss
rename to src/main/style/atom/button/button-main/_button-main.scss
index 12a5a70b6f6..2ae2b9604c3 100644
--- a/src/main/style/atom/button/button-main/_button.scss
+++ b/src/main/style/atom/button/button-main/_button-main.scss
@@ -17,7 +17,7 @@ $jhlite-button-font-family: fonts.$jhlite-global-font-primary-family;
 $jhlite-button-font-size: 1rem !default;
 $jhlite-button-font-weight: fonts.$jhlite-font-weight-semi-bold;
 
-%jhlite-button {
+%jhlite-button-main {
   box-sizing: border-box;
   border: 0;
   border-radius: $jhlite-button-radius;
@@ -58,6 +58,6 @@ $jhlite-button-font-weight: fonts.$jhlite-font-weight-semi-bold;
   }
 }
 
-.jhlite-button {
-  @extend %jhlite-button;
+.jhlite-button-main {
+  @extend %jhlite-button-main;
 }
diff --git a/src/main/style/atom/button/button-main/button-main.code.pug b/src/main/style/atom/button/button-main/button-main.code.pug
new file mode 100644
index 00000000000..12cbd210295
--- /dev/null
+++ b/src/main/style/atom/button/button-main/button-main.code.pug
@@ -0,0 +1,6 @@
+include button-main.mixin.pug
+
++jhlite-button-main Button
++jhlite-button-main({disabled: true}) Button
++jhlite-button-main({small: true}) Button
++jhlite-button-main({block: true}) Button
diff --git a/src/main/style/atom/button/button-main/button-main.md b/src/main/style/atom/button/button-main/button-main.md
new file mode 100644
index 00000000000..54cd47d4a05
--- /dev/null
+++ b/src/main/style/atom/button/button-main/button-main.md
@@ -0,0 +1 @@
+## Button Main
diff --git a/src/main/style/atom/button/button-main/button.mixin.pug b/src/main/style/atom/button/button-main/button-main.mixin.pug
similarity index 61%
rename from src/main/style/atom/button/button-main/button.mixin.pug
rename to src/main/style/atom/button/button-main/button-main.mixin.pug
index c91e469773a..c4b6a51faca 100644
--- a/src/main/style/atom/button/button-main/button.mixin.pug
+++ b/src/main/style/atom/button/button-main/button-main.mixin.pug
@@ -1,6 +1,6 @@
-mixin jhlite-button(opts)
+mixin jhlite-button-main(opts)
   - const { block: isBlock, small: isSmall, disabled } = opts || {};
   - const blockClass = isBlock ? '-block' : null;
   - const smallClass = isSmall ? '-small' : null;
-  button.jhlite-button(class=blockClass || smallClass, disabled=disabled)
+  button.jhlite-button-main(class=blockClass || smallClass, disabled=disabled)
     block
diff --git a/src/main/style/atom/button/button-main/button-main.render.pug b/src/main/style/atom/button/button-main/button-main.render.pug
new file mode 100644
index 00000000000..8493c6a8e4e
--- /dev/null
+++ b/src/main/style/atom/button/button-main/button-main.render.pug
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include button-main.code.pug
diff --git a/src/main/style/atom/button/button-main/button.code.pug b/src/main/style/atom/button/button-main/button.code.pug
deleted file mode 100644
index 227d077a832..00000000000
--- a/src/main/style/atom/button/button-main/button.code.pug
+++ /dev/null
@@ -1,6 +0,0 @@
-include button.mixin.pug
-
-+jhlite-button Button
-+jhlite-button({disabled: true}) Button
-+jhlite-button({small: true}) Button
-+jhlite-button({block: true}) Button
diff --git a/src/main/style/atom/button/button-main/button.md b/src/main/style/atom/button/button-main/button.md
deleted file mode 100644
index 3151c8f2aaf..00000000000
--- a/src/main/style/atom/button/button-main/button.md
+++ /dev/null
@@ -1 +0,0 @@
-## Button
diff --git a/src/main/style/atom/button/button-main/button.render.pug b/src/main/style/atom/button/button-main/button.render.pug
deleted file mode 100644
index f6444e7792e..00000000000
--- a/src/main/style/atom/button/button-main/button.render.pug
+++ /dev/null
@@ -1,4 +0,0 @@
-extends /layout
-
-block body
-  include button.code.pug
diff --git a/src/main/style/atom/button/button-switch/_button-switch.scss b/src/main/style/atom/button/button-switch/_button-switch.scss
index b979a9114ee..cf2aefeea32 100644
--- a/src/main/style/atom/button/button-switch/_button-switch.scss
+++ b/src/main/style/atom/button/button-switch/_button-switch.scss
@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use '../../../token/colors' as colors;
-@use '../button-main/button' as button;
+@use '../button-main/button-main' as button-main;
 @use '../../../token/size' as size;
 
 $jhlite-button-switch-padding: math.div(5, 16) * 1rem math.div(15, 16) * 1rem;
@@ -8,7 +8,7 @@ $jhlite-button-switch-color-text-light: colors.$jhlite-global-color-text-light;
 $jhlite-button-switch-radius: size.$jhlite-global-size-switch-radius;
 
 .jhlite-button-switch {
-  @extend %jhlite-button;
+  @extend %jhlite-button-main;
 
   border-radius: $jhlite-button-switch-radius;
   background-color: transparent;
@@ -21,7 +21,7 @@ $jhlite-button-switch-radius: size.$jhlite-global-size-switch-radius;
   }
 
   &.-selected {
-    background-color: button.$jhlite-button-hover-color-background;
+    background-color: button-main.$jhlite-button-hover-color-background;
     color: $jhlite-button-switch-color-text-light;
   }
 }
diff --git a/src/main/style/organism/landscape-minimap/landscape-minimap.mixin.pug b/src/main/style/organism/landscape-minimap/landscape-minimap.mixin.pug
index c261012d7b0..58be4fcccc4 100644
--- a/src/main/style/organism/landscape-minimap/landscape-minimap.mixin.pug
+++ b/src/main/style/organism/landscape-minimap/landscape-minimap.mixin.pug
@@ -1,7 +1,7 @@
 mixin jhlite-landscape-minimap
   .jhlite-landscape-minimap
     .jhlite-minimap--container
-      button.jhlite-button.-rounded-top.-small
+      button.jhlite-button-main.-rounded-top.-small
         em.jhlite-icon.jhlite-icon-eye-off(role='img', aria-label='Icon eye-off')
       .jhlite-minimap--size(style='height: 100px; width: 200px')
         .jhlite-minimap--viewer
diff --git a/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug b/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug
index 36113bdee96..eabea8619c6 100644
--- a/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug
+++ b/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug
@@ -1,6 +1,6 @@
 mixin jhlite-landscape-preset-configuration
   .jhlite-landscape-preset-configuration
-    button.jhlite-button.-rounded-top.-small
+    button.jhlite-button-main.-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
diff --git a/src/main/style/organism/project-actions/project-actions.mixin.pug b/src/main/style/organism/project-actions/project-actions.mixin.pug
index 407241403dc..741693e7a7c 100644
--- a/src/main/style/organism/project-actions/project-actions.mixin.pug
+++ b/src/main/style/organism/project-actions/project-actions.mixin.pug
@@ -4,18 +4,18 @@ mixin jhlite-project-actions
   .jhipster-side-form--actions
     .jhlite-vertical-space.-paragraph
       .jhlite-vertical-space--line
-        button.jhlite-button.-block
+        button.jhlite-button-main.-block
           +jhlite-icon('play-circled')
           span &nbsp;Apply new
       .jhlite-vertical-space--line
-        button.jhlite-button.-block
+        button.jhlite-button-main.-block
           +jhlite-icon('play-circled')
           span &nbsp;Apply selected
       .jhlite-vertical-space--line
-        button.jhlite-button.-block
+        button.jhlite-button-main.-block
           +jhlite-icon('code')
           span &nbsp;Format
       .jhlite-vertical-space--line
-        button.jhlite-button.-block
+        button.jhlite-button-main.-block
           +jhlite-icon('download')
           span &nbsp;Download
diff --git a/src/main/style/template/menu-content-template/menu-content-template.mixin.pug b/src/main/style/template/menu-content-template/menu-content-template.mixin.pug
index 6ce1929123e..6661942a9bc 100644
--- a/src/main/style/template/menu-content-template/menu-content-template.mixin.pug
+++ b/src/main/style/template/menu-content-template/menu-content-template.mixin.pug
@@ -1,5 +1,5 @@
 include /atom/input/input-text/input-text.mixin.pug
-include /atom/button/button.mixin.pug
+include /atom/button/button-main/button-main.mixin.pug
 include /molecule/field/field.mixin.pug
 include /organism/side-menu/side-menu.mixin.pug
 include /organism/vertical-space/vertical-space.mixin.pug
@@ -20,6 +20,6 @@ mixin jhlite-menu-content-template
         +jhlite-side-menu--slot
           +jhlite-vertical-space('paragraph')
             +jhlite-vertical-space--line
-              +jhlite-button({block: true}) Button
+              +jhlite-button-main({block: true}) Button
             +jhlite-vertical-space--line
-              +jhlite-button({block: true}) Button
+              +jhlite-button-main({block: true}) Button
diff --git a/src/main/webapp/app/module/primary/landscape-minimap/LandscapeMiniMap.html b/src/main/webapp/app/module/primary/landscape-minimap/LandscapeMiniMap.html
index 730c8398647..c590d0b5bff 100644
--- a/src/main/webapp/app/module/primary/landscape-minimap/LandscapeMiniMap.html
+++ b/src/main/webapp/app/module/primary/landscape-minimap/LandscapeMiniMap.html
@@ -1,7 +1,9 @@
 <div ref="minimapContainer" class="jhlite-landscape-minimap jhlite-minimap--container">
-  <button v-if="!isMiniMapOpen" class="jhlite-button -block" @click="openMiniMap" data-selector="show-minimap-btn">OPEN MINIMAP</button>
+  <button v-if="!isMiniMapOpen" class="jhlite-button-main -block" @click="openMiniMap" data-selector="show-minimap-btn">
+    OPEN MINIMAP
+  </button>
   <button
-    class="jhlite-button -rounded-top -small"
+    class="jhlite-button-main -rounded-top -small"
     v-if="isMiniMapOpen"
     @click="closeMiniMap"
     title="Hide minimap"
diff --git a/src/main/webapp/app/module/primary/landscape-preset-configuration/LandscapePresetConfiguration.html b/src/main/webapp/app/module/primary/landscape-preset-configuration/LandscapePresetConfiguration.html
index 1a2f439b5d5..159c485cc1d 100644
--- a/src/main/webapp/app/module/primary/landscape-preset-configuration/LandscapePresetConfiguration.html
+++ b/src/main/webapp/app/module/primary/landscape-preset-configuration/LandscapePresetConfiguration.html
@@ -1,7 +1,7 @@
 <div class="jhlite-landscape-preset-configuration">
   <button
     v-if="!isPresetConfigurationOpen"
-    class="jhlite-button -small"
+    class="jhlite-button-main -small"
     @click="openPresetConfiguration"
     title="Show presets configurations"
     data-selector="show-preset-configuration-btn"
@@ -9,7 +9,7 @@
     <IconVue name="cog-alt" aria-label="Icon presets configurations" title="Show presets configurations" />
   </button>
   <button
-    class="jhlite-button -rounded-top -small"
+    class="jhlite-button-main -rounded-top -small"
     v-if="isPresetConfigurationOpen"
     @click="closePresetConfiguration"
     title="Hide presets configurations"
diff --git a/src/main/webapp/app/module/primary/landscape/Landscape.html b/src/main/webapp/app/module/primary/landscape/Landscape.html
index bd7ddab5ba1..70658adaaa1 100644
--- a/src/main/webapp/app/module/primary/landscape/Landscape.html
+++ b/src/main/webapp/app/module/primary/landscape/Landscape.html
@@ -116,7 +116,7 @@ <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.sl
         >
           <div class="jhlite-vertical-space--line">
             <button
-              class="jhlite-button -block"
+              class="jhlite-button-main -block"
               data-selector="modules-apply-new-button"
               :disabled="disabledNewApplication()"
               @click="applyNewModules"
@@ -128,7 +128,7 @@ <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.sl
 
           <div class="jhlite-vertical-space--line">
             <button
-              class="jhlite-button -block"
+              class="jhlite-button-main -block"
               data-selector="modules-apply-all-button"
               :disabled="disabledAllApplication()"
               @click="applyAllModules"
diff --git a/src/main/webapp/app/module/primary/project-actions/ProjectActions.html b/src/main/webapp/app/module/primary/project-actions/ProjectActions.html
index c7e34431008..2e3dc33cbbc 100644
--- a/src/main/webapp/app/module/primary/project-actions/ProjectActions.html
+++ b/src/main/webapp/app/module/primary/project-actions/ProjectActions.html
@@ -3,13 +3,13 @@
     <slot />
 
     <div class="jhlite-vertical-space--line">
-      <button class="jhlite-button -block" @click="formatProject()" :disabled="disabledPrettier()" data-selector="format-button">
+      <button class="jhlite-button-main -block" @click="formatProject()" :disabled="disabledPrettier()" data-selector="format-button">
         <IconVue name="code" aria-label="Icon code" />
         Format
       </button>
     </div>
     <div class="jhlite-vertical-space--line">
-      <button class="jhlite-button -block" @click="downloadProject()" :disabled="disabledActions()" data-selector="download-button">
+      <button class="jhlite-button-main -block" @click="downloadProject()" :disabled="disabledActions()" data-selector="download-button">
         <IconVue name="download" aria-label="Icon download" />
         Download
       </button>

From 545b926f621d9e0e9c2a1c7b90fe1dc3d25706b1 Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Tue, 3 Sep 2024 11:18:09 -0300
Subject: [PATCH 10/12] refactor(tikui-atom): organize documentation menu and
 scss to make button-main and button-switch subcategories of button

---
 src/main/style/atom/_atom.scss                            | 3 +--
 src/main/style/atom/atom.pug                              | 4 +---
 src/main/style/atom/button/_button.scss                   | 2 ++
 src/main/style/atom/button/button-main/button-main.md     | 2 +-
 src/main/style/atom/button/button-switch/button-switch.md | 2 +-
 src/main/style/atom/button/button.pug                     | 7 +++++++
 6 files changed, 13 insertions(+), 7 deletions(-)
 create mode 100644 src/main/style/atom/button/_button.scss
 create mode 100644 src/main/style/atom/button/button.pug

diff --git a/src/main/style/atom/_atom.scss b/src/main/style/atom/_atom.scss
index 6d003287d03..8d6e23d35bc 100644
--- a/src/main/style/atom/_atom.scss
+++ b/src/main/style/atom/_atom.scss
@@ -1,5 +1,4 @@
-@import 'button/button-main/button-main';
-@import 'button/button-switch/button-switch';
+@import 'button/button';
 @import 'chip/chip';
 @import 'icon/icon';
 @import 'input/input';
diff --git a/src/main/style/atom/atom.pug b/src/main/style/atom/atom.pug
index 3da70974234..3c05d1d1bbe 100644
--- a/src/main/style/atom/atom.pug
+++ b/src/main/style/atom/atom.pug
@@ -13,9 +13,7 @@ block content
     .tikui-vertical-spacing--line
       include /documentation/atomic-design/quote/atom
     .tikui-vertical-spacing--line
-      include:componentDoc(height=100) button/button-main/button-main.md
-    .tikui-vertical-spacing--line
-      include:componentDoc(height=100) button/button-switch/button-switch.md
+      include button/button
     .tikui-vertical-spacing--line
       include:componentDoc(height=610) chip/chip.md
     .tikui-vertical-spacing--line
diff --git a/src/main/style/atom/button/_button.scss b/src/main/style/atom/button/_button.scss
new file mode 100644
index 00000000000..64b215b7ed8
--- /dev/null
+++ b/src/main/style/atom/button/_button.scss
@@ -0,0 +1,2 @@
+@import 'button-main/button-main';
+@import 'button-switch/button-switch';
diff --git a/src/main/style/atom/button/button-main/button-main.md b/src/main/style/atom/button/button-main/button-main.md
index 54cd47d4a05..b1931d261c3 100644
--- a/src/main/style/atom/button/button-main/button-main.md
+++ b/src/main/style/atom/button/button-main/button-main.md
@@ -1 +1 @@
-## Button Main
+### Button Main
diff --git a/src/main/style/atom/button/button-switch/button-switch.md b/src/main/style/atom/button/button-switch/button-switch.md
index 02d20cd4902..45a543b4b85 100644
--- a/src/main/style/atom/button/button-switch/button-switch.md
+++ b/src/main/style/atom/button/button-switch/button-switch.md
@@ -1 +1 @@
-## Button switch
+### Button switch
diff --git a/src/main/style/atom/button/button.pug b/src/main/style/atom/button/button.pug
new file mode 100644
index 00000000000..2f88bf582df
--- /dev/null
+++ b/src/main/style/atom/button/button.pug
@@ -0,0 +1,7 @@
+.tikui-vertical-spacing.-s32
+  .tikui-vertical-spacing--line
+    h2#input.tikui-title-section Button
+  .tikui-vertical-spacing--line
+    include:componentDoc(height=150) button-main/button-main.md
+  .tikui-vertical-spacing--line
+    include:componentDoc(height=150) button-switch/button-switch.md

From bbee9b2f5e9b4f5a8d50493f4918e64f9e701fa4 Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Tue, 3 Sep 2024 11:53:33 -0300
Subject: [PATCH 11/12] feat(tikui-atom): decrease the size of the font from
 the button switch

---
 src/main/style/atom/button/button-switch/_button-switch.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/main/style/atom/button/button-switch/_button-switch.scss b/src/main/style/atom/button/button-switch/_button-switch.scss
index cf2aefeea32..946a2ae06a6 100644
--- a/src/main/style/atom/button/button-switch/_button-switch.scss
+++ b/src/main/style/atom/button/button-switch/_button-switch.scss
@@ -6,6 +6,7 @@
 $jhlite-button-switch-padding: math.div(5, 16) * 1rem math.div(15, 16) * 1rem;
 $jhlite-button-switch-color-text-light: colors.$jhlite-global-color-text-light;
 $jhlite-button-switch-radius: size.$jhlite-global-size-switch-radius;
+$jhlite-button-switch-font-size: math.div(13, 16) * 1rem;
 
 .jhlite-button-switch {
   @extend %jhlite-button-main;
@@ -15,6 +16,7 @@ $jhlite-button-switch-radius: size.$jhlite-global-size-switch-radius;
   padding: $jhlite-button-switch-padding;
   text-transform: none;
   color: var(--jhlite-global-color-text);
+  font-size: $jhlite-button-switch-font-size;
 
   &:hover {
     background-color: transparent;

From 3d72307c1857fb0df79e933146499e15ba55b248 Mon Sep 17 00:00:00 2001
From: Renan Franca <renan.andradefranca@gmail.com>
Date: Tue, 3 Sep 2024 11:58:50 -0300
Subject: [PATCH 12/12] feat(tikui-organism): increase the vertical distance
 between the modes selection and the presets configurations selection

---
 src/main/style/organism/landscape/_landscape.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/main/style/organism/landscape/_landscape.scss b/src/main/style/organism/landscape/_landscape.scss
index 74866f1ffce..8a6e1e4faf3 100644
--- a/src/main/style/organism/landscape/_landscape.scss
+++ b/src/main/style/organism/landscape/_landscape.scss
@@ -1,4 +1,6 @@
 $jhlite-landscape-padding: 20px;
+$jhipster-landscape-preset-selection-top-position: 85px;
+$jhipster-landscape-preset-selection-left-position: $jhlite-landscape-padding;
 $jhlite-landscape-line-color: $jhlite-global-line-color;
 $jhlite-landscape-box-radius: $jhlite-global-box-radius;
 $jhlite-landscape-primary-color: $jhlite-global-primary-color;
@@ -28,8 +30,8 @@ $jhlite-landscape-primary-alternative-color: $jhlite-global-primary-alternative-
 
   .jhipster-landscape-preset-selection {
     position: absolute;
-    top: 80px;
-    left: $jhlite-landscape-padding;
+    top: $jhipster-landscape-preset-selection-top-position;
+    left: $jhipster-landscape-preset-selection-left-position;
     z-index: 3;
     background: var(--jhlite-chip-bg-color);
   }