extract landscape compact/extend mode switch to tikui molecule

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 button/button
     .tikui-vertical-spacing--line
       include:componentDoc(height=610) chip/chip.md
     .tikui-vertical-spacing--line

src/main/style/atom/button/_button.scss

@@ -1,55 +1,2 @@
-@use 'sass:math';
-
-$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-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: 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;
-  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: $jhlite-button-font-weight;
-
-  &: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 {
-    display: block;
-    width: 100%;
-  }
-
-  &.-small {
-    padding: $jhlite-small-button-padding;
-  }
-
-  &.-rounded-top {
-    border-radius: 0;
-    border-top-left-radius: $jhlite-button-radius;
-    border-top-right-radius: $jhlite-button-radius;
-  }
-}
+@import 'button-main/button-main';
+@import 'button-switch/button-switch';

src/main/style/atom/button/button-main/_button-main.scss

@@ -0,0 +1,63 @@
+@use 'sass:math';
+@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;
+$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%);
+$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: fonts.$jhlite-font-weight-semi-bold;
+
+%jhlite-button-main {
+  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-button-font-family;
+  font-size: $jhlite-button-font-size;
+  font-weight: $jhlite-button-font-weight;
+
+  &: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 {
+    display: block;
+    width: 100%;
+  }
+
+  &.-small {
+    padding: $jhlite-small-button-padding;
+  }
+
+  &.-rounded-top {
+    border-radius: 0;
+    border-top-left-radius: $jhlite-button-radius;
+    border-top-right-radius: $jhlite-button-radius;
+  }
+}
+
+.jhlite-button-main {
+  @extend %jhlite-button-main;
+}

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

src/main/style/atom/button/button-main/button-main.md

@@ -0,0 +1 @@
+### Button Main

src/main/style/atom/button/button-main/button-main.mixin.pug

@@ -0,0 +1,6 @@
+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-main(class=blockClass || smallClass, disabled=disabled)
+    block

src/main/style/atom/button/button-main/button-main.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include button-main.code.pug

src/main/style/atom/button/button-switch/_button-switch.scss

@@ -0,0 +1,29 @@
+@use 'sass:math';
+@use '../../../token/colors' as colors;
+@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;
+$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;
+
+  border-radius: $jhlite-button-switch-radius;
+  background-color: transparent;
+  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;
+  }
+
+  &.-selected {
+    background-color: button-main.$jhlite-button-hover-color-background;
+    color: $jhlite-button-switch-color-text-light;
+  }
+}

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

src/main/style/atom/button/button-switch/button-switch.md

@@ -0,0 +1 @@
+### Button switch

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

src/main/style/atom/button/button-switch/button-switch.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include button-switch.code.pug

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

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';

src/main/style/molecule/mode-switch/_mode-switch.scss

@@ -0,0 +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: $jhlite-mode-switch-radius;
+  }
+}

src/main/style/molecule/mode-switch/mode-switch.code.pug

@@ -0,0 +1,3 @@
+include mode-switch.mixin.pug
+
++jhlite-mode-switch('Option one', 'Option two')

src/main/style/molecule/mode-switch/mode-switch.md

@@ -0,0 +1 @@
+## Mode switch

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(selectedOptionLabel, unselectedOptionLabel)
+  .jhlite-mode-switch
+    .jhlite-mode-switch--modes
+      +jhlite-button-switch({selected: true})= selectedOptionLabel
+      +jhlite-button-switch= unselectedOptionLabel

src/main/style/molecule/mode-switch/mode-switch.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include mode-switch.code.pug

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

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

src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug

@@ -1,13 +1,13 @@
 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
         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
+          option(value='preset.name') Java Library with Maven
+          option(value='preset.name') Webapp: Vue + Spring Boot
+          option(value='preset.name') JHLite Extension with Maven

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;
@@ -24,31 +26,12 @@ $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 {
     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);
   }

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

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  Apply new
       .jhlite-vertical-space--line
-        button.jhlite-button.-block
+        button.jhlite-button-main.-block
           +jhlite-icon('play-circled')
           span  Apply selected
       .jhlite-vertical-space--line
-        button.jhlite-button.-block
+        button.jhlite-button-main.-block
           +jhlite-icon('code')
           span  Format
       .jhlite-vertical-space--line
-        button.jhlite-button.-block
+        button.jhlite-button-main.-block
           +jhlite-icon('download')
           span  Download

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