From de5a5795a6d9528d793d0c600f6391b8544983a1 Mon Sep 17 00:00:00 2001
From: mkpaz <quizynox@gmail.com>
Date: Wed, 31 Aug 2022 13:26:05 +0400
Subject: [PATCH] Migrate Sampler stylesheet to SASS

---
 pom.xml                                       |   4 +
 sampler/pom.xml                               |  20 ++
 sampler/src/main/java/module-info.java        |   2 +-
 .../main/resources/assets/styles/index.css    | 335 ------------------
 .../assets/styles/scss/general/_fonts.scss    | 118 ++++++
 .../assets/styles/scss/general/_index.scss    |   5 +
 .../assets/styles/scss/general/_root.scss     |  34 ++
 .../assets/styles/scss/general/_util.scss     |   6 +
 .../resources/assets/styles/scss/index.scss   |   5 +
 .../styles/scss/layout/_components.scss       |  14 +
 .../assets/styles/scss/layout/_index.scss     |   5 +
 .../assets/styles/scss/layout/_page.scss      |  42 +++
 .../assets/styles/scss/layout/_sidebar.scss   |  45 +++
 .../styles/scss/widgets/_color-palette.scss   | 132 +++++++
 .../assets/styles/scss/widgets/_index.scss    |   4 +
 .../scss/widgets/_quick-config-menu.scss      |  23 ++
 styles/pom.xml                                |   1 -
 17 files changed, 458 insertions(+), 337 deletions(-)
 delete mode 100755 sampler/src/main/resources/assets/styles/index.css
 create mode 100644 sampler/src/main/resources/assets/styles/scss/general/_fonts.scss
 create mode 100644 sampler/src/main/resources/assets/styles/scss/general/_index.scss
 create mode 100644 sampler/src/main/resources/assets/styles/scss/general/_root.scss
 create mode 100644 sampler/src/main/resources/assets/styles/scss/general/_util.scss
 create mode 100644 sampler/src/main/resources/assets/styles/scss/index.scss
 create mode 100644 sampler/src/main/resources/assets/styles/scss/layout/_components.scss
 create mode 100644 sampler/src/main/resources/assets/styles/scss/layout/_index.scss
 create mode 100644 sampler/src/main/resources/assets/styles/scss/layout/_page.scss
 create mode 100644 sampler/src/main/resources/assets/styles/scss/layout/_sidebar.scss
 create mode 100644 sampler/src/main/resources/assets/styles/scss/widgets/_color-palette.scss
 create mode 100644 sampler/src/main/resources/assets/styles/scss/widgets/_index.scss
 create mode 100644 sampler/src/main/resources/assets/styles/scss/widgets/_quick-config-menu.scss

diff --git a/pom.xml b/pom.xml
index d4ab205..0f16402 100755
--- a/pom.xml
+++ b/pom.xml
@@ -60,6 +60,7 @@
 
         <java.version>17</java.version>
         <openjfx.version>17.0.0.1</openjfx.version>
+        <sass.version>1.54.4</sass.version>
 
         <app.name>AtlantaFX</app.name>
         <!-- DO NOT use ${project.version} as jpackage will fail on
@@ -197,6 +198,9 @@
                     <groupId>us.hebi.sass</groupId>
                     <artifactId>sass-cli-maven-plugin</artifactId>
                     <version>1.0.1</version>
+                    <configuration>
+                        <sassVersion>1.54.5</sassVersion>
+                    </configuration>
                 </plugin>
                 <plugin>
                     <groupId>org.apache.maven.plugins</groupId>
diff --git a/sampler/pom.xml b/sampler/pom.xml
index a9127c7..7c5883f 100755
--- a/sampler/pom.xml
+++ b/sampler/pom.xml
@@ -136,6 +136,26 @@
         </resources>
 
         <plugins>
+            <!-- compile SCSS -->
+            <plugin>
+                <groupId>us.hebi.sass</groupId>
+                <artifactId>sass-cli-maven-plugin</artifactId>
+                <configuration>
+                    <args>
+                        <arg>src/main/resources/assets/styles/scss/index.scss:${project.build.directory}/classes/atlantafx/sampler/assets/styles/index.css</arg>
+                        <arg>--no-source-map</arg>
+                    </args>
+                </configuration>
+                <executions>
+                    <execution>
+                        <id>run-sass</id>
+                        <phase>generate-resources</phase>
+                        <goals>
+                            <goal>run</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
             <plugin>
                 <groupId>org.openjfx</groupId>
                 <artifactId>javafx-maven-plugin</artifactId>
diff --git a/sampler/src/main/java/module-info.java b/sampler/src/main/java/module-info.java
index bf929ce..4d5fd68 100755
--- a/sampler/src/main/java/module-info.java
+++ b/sampler/src/main/java/module-info.java
@@ -31,7 +31,7 @@ module atlantafx.sampler {
     opens atlantafx.sampler.fake.domain;
 
     // resources
-    opens atlantafx.sampler.assets.fonts;
+    opens atlantafx.sampler.assets;
     opens atlantafx.sampler.assets.highlightjs;
     opens atlantafx.sampler.assets.styles;
 }
diff --git a/sampler/src/main/resources/assets/styles/index.css b/sampler/src/main/resources/assets/styles/index.css
deleted file mode 100755
index 219410e..0000000
--- a/sampler/src/main/resources/assets/styles/index.css
+++ /dev/null
@@ -1,335 +0,0 @@
-/** SPDX-License-Identifier: MIT */
-
-@font-face {
-    font-family: "Inter";
-    font-weight: 900;
-    src: url('../fonts/Inter/Inter-Black.otf') format('truetype');
-}
-@font-face {
-    font-family: "Inter";
-    font-weight: 900;
-    font-style: italic, oblique;
-    src: url('../fonts/Inter/Inter-BlackItalic.otf') format('truetype');
-}
-
-@font-face {
-    font-family: "Inter";
-    font-weight: 800;
-    src: url('../fonts/Inter/Inter-ExtraBold.otf') format('truetype');
-}
-@font-face {
-    font-family: "Inter";
-    font-weight: 800;
-    font-style: italic, oblique;
-    src: url('../fonts/Inter/Inter-ExtraBoldItalic.otf') format('truetype');
-}
-
-@font-face {
-    font-family: "Inter";
-    font-weight: 700;
-    src: url('../fonts/Inter/Inter-Bold.otf') format('truetype');
-}
-@font-face {
-    font-family: "Inter";
-    font-weight: 700;
-    font-style: italic, oblique;
-    src: url('../fonts/Inter/Inter-BoldItalic.otf') format('truetype');
-}
-
-@font-face {
-    font-family: "Inter";
-    font-weight: 600;
-    src: url('../fonts/Inter/Inter-SemiBold.otf') format('truetype');
-}
-@font-face {
-    font-family: "Inter";
-    font-weight: 600;
-    font-style: italic, oblique;
-    src: url('../fonts/Inter/Inter-SemiBoldItalic.otf') format('truetype');
-}
-
-@font-face {
-    font-family: "Inter";
-    font-weight: 500;
-    src: url('../fonts/Inter/Inter-Medium.otf') format('truetype');
-}
-@font-face {
-    font-family: "Inter";
-    font-weight: 500;
-    font-style: italic, oblique;
-    src: url('../fonts/Inter/Inter-MediumItalic.otf') format('truetype');
-}
-
-@font-face {
-    font-family: "Inter";
-    font-weight: 400;
-    src: url('../fonts/Inter/Inter-Regular.otf') format('truetype');
-}
-@font-face {
-    font-family: "Inter";
-    font-weight: 400;
-    font-style: italic, oblique;
-    src: url('../fonts/Inter/Inter-Italic.otf') format('truetype');
-}
-
-@font-face {
-    font-family: "Inter";
-    font-weight: 300;
-    src: url('../fonts/Inter/Inter-Light.otf') format('truetype');
-}
-@font-face {
-    font-family: "Inter";
-    font-weight: 300;
-    font-style: italic, oblique;
-    src: url('../fonts/Inter/Inter-LightItalic.otf') format('truetype');
-}
-
-@font-face {
-    font-family: "Inter";
-    font-weight: 200;
-    src: url('../fonts/Inter/Inter-ExtraLight.otf') format('truetype');
-}
-@font-face {
-    font-family: "Inter";
-    font-weight: 200;
-    font-style: italic, oblique;
-    src: url('../fonts/Inter/Inter-ExtraLightItalic.otf') format('truetype');
-}
-
-@font-face {
-    font-family: "Inter";
-    font-weight: 100;
-    src: url('../fonts/Inter/Inter-Thin.otf') format('truetype');
-}
-@font-face {
-    font-family: "Inter";
-    font-weight: 100;
-    font-style: italic, oblique;
-    src: url('../fonts/Inter/Inter-ThinItalic.otf') format('truetype');
-}
-
-.root {
-    -fx-font-family: "Inter";
-}
-.root:showcase-mode #sidebar,
-.root:showcase-mode .page > .header {
-    -fx-min-width: 0;
-    -fx-pref-width: 0;
-    -fx-max-width: 0;
-    -fx-min-height: 0;
-    -fx-pref-height: 0;
-    -fx-max-height: 0;
-    visibility: false;
-}
-.root:showcase-mode .page > .stack > .scroll-pane > .viewport > * > .wrapper > .user-content {
-    -fx-max-width: 4096px;
-    -fx-padding: 0;
-    -fx-spacing: 0;
-}
-
-#sidebar {
-    -fx-padding: 0 0 12px 0;
-    -fx-background-color: -color-bg-inset;
-    -fx-border-color: -color-border-default;
-    -fx-border-width: 0 1px 0 0;
-}
-#sidebar #search-form {
-    -fx-padding: 12px;
-    -fx-border-color: -color-border-muted;
-    -fx-border-width: 0 0 1px 0;
-}
-#sidebar .nav-menu {
-    -fx-padding: 0 6px 0 6px;
-}
-#sidebar .nav-menu > .caption {
-    -fx-padding: 10px 0 10px 6px;
-    -fx-font-weight: bold;
-    -fx-text-fill: -color-fg-muted;
-}
-#sidebar .nav-menu > .nav-link {
-   -fx-padding: 6px 12px 6px 12px;
-}
-#sidebar .nav-menu > .nav-link:hover {
-   -fx-background-color: -color-accent-muted;
-   -fx-background-radius: 6px;
-}
-#sidebar .nav-menu > .nav-link:selected {
-   -fx-text-fill: -color-accent-fg;
-   -fx-font-weight: bold;
-}
-#sidebar .nav-menu > .nav-link > .tag {
-   -fx-background-color: -color-accent-emphasis;
-   -fx-text-fill: -color-fg-emphasis;
-   -fx-padding: 2px;
-   -fx-background-radius: 4px;
-}
-
-.page > .header {
-    -fx-padding: 10px 20px 14px 20px;
-    -fx-spacing: 10px;
-    -fx-background-color: -color-bg-default;
-}
-.page > .stack > .scroll-pane {
-    -fx-background-color: -color-bg-default;
-}
-/* wrapper is used to center the content and also guarantees some minimum paddings via min-width */
-.page > .stack > .scroll-pane > .viewport > * > .wrapper {
-    -fx-min-width: 880px;
-    -fx-alignment: TOP_CENTER;
-}
-.page > .stack > .scroll-pane > .viewport > * > .wrapper > .user-content {
-    -fx-padding: 40px 0 40px 0;
-    -fx-spacing: 40px;
-    -fx-max-width: 800px;
-}
-.page > .stack > .wrapper {
-    -fx-background-color: -color-bg-default;
-    -fx-alignment: TOP_CENTER;
-}
-.page > .stack > .wrapper > .code-viewer {
-    -fx-background-color: transparent;
-    -fx-padding: 0px 0px 20px 20px;
-    -fx-max-width: 1000px;
-}
-.page > .stack > .wrapper > .code-viewer > .web-view {
-    -fx-background-color: transparent;
-}
-
-.sample-block {
-    -fx-spacing: 1em;
-}
-.sample-block>.title {
-    -fx-font-weight: bold;
-}
-
-#color-palette {
-    -fx-spacing: 20px;
-    /* mandatory, base bg color for flatten feature */
-    -fx-background-color: -color-bg-default;
-}
-#color-palette > .header {
-    -fx-pref-height: 40px;
-}
-#color-palette > .grid {
-    -fx-vgap: 20px;
-    -fx-hgap: 40px;
-}
-#color-palette > .grid > .color-block {
-    -fx-spacing: 5px;
-}
-#color-palette > .grid > .color-block > .box {
-    -fx-min-width: 12em;
-    -fx-min-height: 5em;
-    -fx-max-width: 12em;
-    -fx-max-height: 5em;
-    -fx-cursor: hand;
-}
-#color-palette > .grid > .color-block > .box > .wsag-label {
-    -fx-text-fill: white;
-    -fx-background-color: #ef5350;
-    -fx-background-radius: 6px;
-    -fx-padding: 3px;
-}
-#color-palette > .grid > .color-block > .box:passed > .wsag-label {
-    -fx-background-color: #388e3c;
-}
-#color-palette > .grid > .color-block > .box > .wsag-label > .ikonli-font-icon {
-    -fx-fill: white;
-    -fx-icon-color: white;
-}
-
-#color-palette > .contrast-checker-area {
-    -fx-padding: 0 0 0 -20px;
-}
-#color-palette > .contrast-checker-area > .contrast-checker {
-    -fx-background-color: -color-contrast-checker-bg;
-    -fx-hgap: 40px;
-    -fx-vgap: 20px;
-    -fx-padding: 20px 20px 40px 20px;
-}
-#color-palette > .contrast-checker-area > .contrast-checker .label {
-    -fx-text-fill: -color-contrast-checker-fg;
-}
-#color-palette > .contrast-checker-area > .contrast-checker .text-field {
-    -fx-background-insets: 0;
-    -fx-background-color: transparent;
-    -fx-background-radius: 0;
-    -fx-text-fill: -color-contrast-checker-fg;
-    -fx-border-color: -color-contrast-checker-fg;
-    -fx-border-width: 0 0 1 0;
-}
-#color-palette > .contrast-checker-area > .contrast-checker .button {
-    -color-button-bg: -color-contrast-checker-fg-flat;
-    -color-button-fg: -color-contrast-checker-bg-flat;
-    -color-button-border: -color-contrast-checker-bg-flat;
-
-    -color-button-bg-hover: -color-contrast-checker-fg-flat;
-    -color-button-fg-hover: -color-contrast-checker-bg-flat;
-    -color-button-border-hover: -color-contrast-checker-bg-flat;
-
-    -color-button-bg-focused: -color-contrast-checker-fg-flat;
-    -color-button-fg-focused: -color-contrast-checker-bg-flat;
-    -color-button-border-focused: -color-contrast-checker-bg-flat;
-
-    -color-button-bg-pressed: -color-contrast-checker-bg-flat;
-    -color-button-fg-pressed: -color-contrast-checker-fg-flat;
-    -color-button-border-pressed: -color-contrast-checker-fg-flat;
-}
-#color-palette > .contrast-checker-area > .contrast-checker .ikonli-font-icon {
-    -fx-icon-color: -color-contrast-checker-fg;
-    -fx-fill: -color-contrast-checker-fg;
-}
-#color-palette > .contrast-checker-area > .contrast-checker .slider > .thumb {
-    -fx-background-color: -color-contrast-checker-fg;
-}
-#color-palette > .contrast-checker-area > .contrast-checker .slider > .track {
-    -fx-background-color: transparent, -color-contrast-checker-fg;
-    -fx-opacity: 0.5;
-}
-#color-palette > .contrast-checker-area > .contrast-checker > .font-box > .text {
-    -fx-font-size: 4em;
-}
-#color-palette > .contrast-checker-area > .contrast-checker > .font-box > .ratio {
-    -fx-font-size: 2em;
-}
-#color-palette > .contrast-checker-area > .contrast-checker > .wsag-box > * > .wsag-label {
-    -fx-padding: 0.5em 1em 0.5em 1em;
-    -fx-background-color: #ef5350;
-    -fx-background-radius: 6px;
-    -fx-text-fill: white;
-}
-#color-palette > .contrast-checker-area > .contrast-checker > .wsag-box > * > .wsag-label > .ikonli-font-icon {
-    -fx-fill: white;
-    -fx-icon-color: white;
-}
-#color-palette > .contrast-checker-area > .contrast-checker > .wsag-box > * > .wsag-label:passed {
-    -fx-background-color: #388e3c;
-}
-
-#quick-config-menu {
-    -fx-min-width: 200px;
-}
-#quick-config-menu .row {
-    -fx-padding: 6px;
-    -fx-background-radius: 4px;
-}
-#quick-config-menu .action:hover {
-    /* FIXME: Not visible in some themes (subtle over subtle) */
-    -fx-background-color: -color-bg-subtle;
-}
-#quick-config-menu .radio > .ikonli-font-icon {
-    visibility: hidden;
-}
-#quick-config-menu .radio:selected > .ikonli-font-icon {
-    visibility: visible;
-}
-
-.popover .date-picker-popup {
-    -fx-background-color: transparent;
-    -fx-background-insets: 0;
-}
-
-.bordered {
-    -fx-border-width: 1px;
-    -fx-border-color: -color-border-muted;
-}
diff --git a/sampler/src/main/resources/assets/styles/scss/general/_fonts.scss b/sampler/src/main/resources/assets/styles/scss/general/_fonts.scss
new file mode 100644
index 0000000..a186f64
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/general/_fonts.scss
@@ -0,0 +1,118 @@
+// SPDX-License-Identifier: MIT
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 900;
+  src: url('../fonts/Inter/Inter-Black.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 900;
+  font-style: italic, oblique;
+  src: url('../fonts/Inter/Inter-BlackItalic.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 800;
+  src: url('../fonts/Inter/Inter-ExtraBold.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 800;
+  font-style: italic, oblique;
+  src: url('../fonts/Inter/Inter-ExtraBoldItalic.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 700;
+  src: url('../fonts/Inter/Inter-Bold.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 700;
+  font-style: italic, oblique;
+  src: url('../fonts/Inter/Inter-BoldItalic.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 600;
+  src: url('../fonts/Inter/Inter-SemiBold.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 600;
+  font-style: italic, oblique;
+  src: url('../fonts/Inter/Inter-SemiBoldItalic.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 500;
+  src: url('../fonts/Inter/Inter-Medium.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 500;
+  font-style: italic, oblique;
+  src: url('../fonts/Inter/Inter-MediumItalic.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 400;
+  src: url('../fonts/Inter/Inter-Regular.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 400;
+  font-style: italic, oblique;
+  src: url('../fonts/Inter/Inter-Italic.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 300;
+  src: url('../fonts/Inter/Inter-Light.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 300;
+  font-style: italic, oblique;
+  src: url('../fonts/Inter/Inter-LightItalic.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 200;
+  src: url('../fonts/Inter/Inter-ExtraLight.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 200;
+  font-style: italic, oblique;
+  src: url('../fonts/Inter/Inter-ExtraLightItalic.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 100;
+  src: url('../fonts/Inter/Inter-Thin.otf') format('truetype');
+}
+
+@font-face {
+  font-family: "Inter";
+  font-weight: 100;
+  font-style: italic, oblique;
+  src: url('../fonts/Inter/Inter-ThinItalic.otf') format('truetype');
+}
\ No newline at end of file
diff --git a/sampler/src/main/resources/assets/styles/scss/general/_index.scss b/sampler/src/main/resources/assets/styles/scss/general/_index.scss
new file mode 100644
index 0000000..8c25206
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/general/_index.scss
@@ -0,0 +1,5 @@
+// SPDX-License-Identifier: MIT
+
+@use "fonts";
+@use "root";
+@use "util";
\ No newline at end of file
diff --git a/sampler/src/main/resources/assets/styles/scss/general/_root.scss b/sampler/src/main/resources/assets/styles/scss/general/_root.scss
new file mode 100644
index 0000000..a59ab00
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/general/_root.scss
@@ -0,0 +1,34 @@
+// SPDX-License-Identifier: MIT
+
+@mixin hide() {
+  -fx-min-width: 0;
+  -fx-pref-width: 0;
+  -fx-max-width: 0;
+  -fx-min-height: 0;
+  -fx-pref-height: 0;
+  -fx-max-height: 0;
+  visibility: false;
+}
+
+.root {
+  -fx-font-family: "Inter";
+
+  &:showcase-mode {
+
+    #sidebar {
+      @include hide();
+    }
+
+    .page {
+      >.header {
+        @include hide();
+      }
+
+      >.stack>.scroll-pane>.viewport>*>.wrapper>.user-content {
+        -fx-max-width: 4096px;
+        -fx-padding: 0;
+        -fx-spacing: 0;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/sampler/src/main/resources/assets/styles/scss/general/_util.scss b/sampler/src/main/resources/assets/styles/scss/general/_util.scss
new file mode 100644
index 0000000..027cb2b
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/general/_util.scss
@@ -0,0 +1,6 @@
+// SPDX-License-Identifier: MIT
+
+.bordered {
+  -fx-border-width: 1px;
+  -fx-border-color: -color-border-muted;
+}
\ No newline at end of file
diff --git a/sampler/src/main/resources/assets/styles/scss/index.scss b/sampler/src/main/resources/assets/styles/scss/index.scss
new file mode 100644
index 0000000..7f48be1
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/index.scss
@@ -0,0 +1,5 @@
+// SPDX-License-Identifier: MIT
+
+@use "general";
+@use "layout";
+@use "widgets";
\ No newline at end of file
diff --git a/sampler/src/main/resources/assets/styles/scss/layout/_components.scss b/sampler/src/main/resources/assets/styles/scss/layout/_components.scss
new file mode 100644
index 0000000..5a8a1ea
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/layout/_components.scss
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+
+.sample-block {
+  -fx-spacing: 1em;
+
+  >.title {
+    -fx-font-weight: bold;
+  }
+}
+
+.popover .date-picker-popup {
+  -fx-background-color: transparent;
+  -fx-background-insets: 0;
+}
\ No newline at end of file
diff --git a/sampler/src/main/resources/assets/styles/scss/layout/_index.scss b/sampler/src/main/resources/assets/styles/scss/layout/_index.scss
new file mode 100644
index 0000000..cc6dc7b
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/layout/_index.scss
@@ -0,0 +1,5 @@
+// SPDX-License-Identifier: MIT
+
+@use "sidebar";
+@use "page";
+@use "components";
\ No newline at end of file
diff --git a/sampler/src/main/resources/assets/styles/scss/layout/_page.scss b/sampler/src/main/resources/assets/styles/scss/layout/_page.scss
new file mode 100644
index 0000000..3b87892
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/layout/_page.scss
@@ -0,0 +1,42 @@
+// SPDX-License-Identifier: MIT
+
+.page {
+  >.header {
+    -fx-padding: 10px 20px 14px 20px;
+    -fx-spacing: 10px;
+    -fx-background-color: -color-bg-default;
+  }
+
+  >.stack {
+    >.scroll-pane {
+      -fx-background-color: -color-bg-default;
+
+      /* wrapper is used to center the content and also guarantees some minimum paddings via min-width */
+      >.viewport>*>.wrapper {
+        -fx-min-width: 880px;
+        -fx-alignment: TOP_CENTER;
+
+        >.user-content {
+          -fx-padding: 40px 0 40px 0;
+          -fx-spacing: 40px;
+          -fx-max-width: 800px;
+        }
+      }
+    }
+
+    >.wrapper {
+      -fx-background-color: -color-bg-default;
+      -fx-alignment: TOP_CENTER;
+
+      >.code-viewer {
+        -fx-background-color: transparent;
+        -fx-padding: 0px 0px 20px 20px;
+        -fx-max-width: 1000px;
+
+        >.web-view {
+          -fx-background-color: transparent;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/sampler/src/main/resources/assets/styles/scss/layout/_sidebar.scss b/sampler/src/main/resources/assets/styles/scss/layout/_sidebar.scss
new file mode 100644
index 0000000..646ee53
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/layout/_sidebar.scss
@@ -0,0 +1,45 @@
+// SPDX-License-Identifier: MIT
+
+#sidebar {
+  -fx-padding: 0 0 12px 0;
+  -fx-background-color: -color-bg-inset;
+  -fx-border-color: -color-border-default;
+  -fx-border-width: 0 1px 0 0;
+
+  #search-form {
+    -fx-padding: 12px;
+    -fx-border-color: -color-border-muted;
+    -fx-border-width: 0 0 1px 0;
+  }
+
+  .nav-menu {
+    -fx-padding: 0 6px 0 6px;
+
+    >.caption {
+      -fx-padding: 10px 0 10px 6px;
+      -fx-font-weight: bold;
+      -fx-text-fill: -color-fg-muted;
+    }
+
+    >.nav-link {
+      -fx-padding: 6px 12px 6px 12px;
+
+      >.tag {
+        -fx-background-color: -color-accent-emphasis;
+        -fx-text-fill: -color-fg-emphasis;
+        -fx-padding: 2px;
+        -fx-background-radius: 4px;
+      }
+
+      &:hover {
+        -fx-background-color: -color-accent-muted;
+        -fx-background-radius: 6px;
+      }
+
+      &:selected {
+        -fx-text-fill: -color-accent-fg;
+        -fx-font-weight: bold;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/sampler/src/main/resources/assets/styles/scss/widgets/_color-palette.scss b/sampler/src/main/resources/assets/styles/scss/widgets/_color-palette.scss
new file mode 100644
index 0000000..d5fdc0d
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/widgets/_color-palette.scss
@@ -0,0 +1,132 @@
+// SPDX-License-Identifier: MIT
+
+$color-wsag-bg-passed: #388e3c;
+$color-wsag-bg-failed: #ef5350;
+$color-wsag-fg:        white;
+
+#color-palette {
+
+  -fx-spacing: 20px;
+  -fx-background-color: -color-bg-default; // mandatory base bg for flatten color calc
+
+  >.header {
+    -fx-pref-height: 40px;
+  }
+
+  >.grid {
+    -fx-vgap: 20px;
+    -fx-hgap: 40px;
+
+    >.color-block {
+      -fx-spacing: 5px;
+
+      >.box {
+        -fx-min-width: 12em;
+        -fx-min-height: 5em;
+        -fx-max-width: 12em;
+        -fx-max-height: 5em;
+        -fx-cursor: hand;
+
+        &:passed>.wsag-label {
+          -fx-background-color: $color-wsag-bg-passed;
+        }
+
+        >.wsag-label {
+          -fx-text-fill: $color-wsag-fg;
+          -fx-background-color: $color-wsag-bg-failed;
+          -fx-background-radius: 6px;
+          -fx-padding: 3px;
+
+          >.ikonli-font-icon {
+            -fx-fill: $color-wsag-fg;
+            -fx-icon-color: $color-wsag-fg;
+          }
+        }
+      }
+    }
+  }
+
+  >.contrast-checker-area {
+    -fx-padding: 0 0 0 -20px;
+
+    >.contrast-checker {
+      -fx-background-color: -color-contrast-checker-bg;
+      -fx-hgap: 40px;
+      -fx-vgap: 20px;
+      -fx-padding: 20px 20px 40px 20px;
+
+      .label {
+        -fx-text-fill: -color-contrast-checker-fg;
+      }
+
+      .text-field {
+        -fx-background-insets: 0;
+        -fx-background-color: transparent;
+        -fx-background-radius: 0;
+        -fx-text-fill: -color-contrast-checker-fg;
+        -fx-border-color: -color-contrast-checker-fg;
+        -fx-border-width: 0 0 1 0;
+      }
+
+      .button {
+        -color-button-bg: -color-contrast-checker-fg-flat;
+        -color-button-fg: -color-contrast-checker-bg-flat;
+        -color-button-border: -color-contrast-checker-bg-flat;
+
+        -color-button-bg-hover: -color-contrast-checker-fg-flat;
+        -color-button-fg-hover: -color-contrast-checker-bg-flat;
+        -color-button-border-hover: -color-contrast-checker-bg-flat;
+
+        -color-button-bg-focused: -color-contrast-checker-fg-flat;
+        -color-button-fg-focused: -color-contrast-checker-bg-flat;
+        -color-button-border-focused: -color-contrast-checker-bg-flat;
+
+        -color-button-bg-pressed: -color-contrast-checker-bg-flat;
+        -color-button-fg-pressed: -color-contrast-checker-fg-flat;
+        -color-button-border-pressed: -color-contrast-checker-fg-flat;
+      }
+
+      .ikonli-font-icon {
+        -fx-icon-color: -color-contrast-checker-fg;
+        -fx-fill: -color-contrast-checker-fg;
+      }
+
+      .slider {
+        >.thumb {
+          -fx-background-color: -color-contrast-checker-fg;
+        }
+
+        >.track {
+          -fx-background-color: transparent, -color-contrast-checker-fg;
+          -fx-opacity: 0.5;
+        }
+      }
+
+      .font-box {
+        >.text {
+          -fx-font-size: 4em;
+        }
+
+        >.ratio {
+          -fx-font-size: 2em;
+        }
+      }
+
+      >.wsag-box>*>.wsag-label {
+        -fx-padding: 0.5em 1em 0.5em 1em;
+        -fx-background-color: $color-wsag-bg-failed;
+        -fx-background-radius: 6px;
+        -fx-text-fill: $color-wsag-fg;
+
+        &:passed {
+          -fx-background-color: $color-wsag-bg-passed;
+        }
+
+        >.ikonli-font-icon {
+          -fx-fill: $color-wsag-fg;
+          -fx-icon-color: $color-wsag-fg;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/sampler/src/main/resources/assets/styles/scss/widgets/_index.scss b/sampler/src/main/resources/assets/styles/scss/widgets/_index.scss
new file mode 100644
index 0000000..04b1f3d
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/widgets/_index.scss
@@ -0,0 +1,4 @@
+// SPDX-License-Identifier: MIT
+
+@use "color-palette";
+@use "quick-config-menu";
\ No newline at end of file
diff --git a/sampler/src/main/resources/assets/styles/scss/widgets/_quick-config-menu.scss b/sampler/src/main/resources/assets/styles/scss/widgets/_quick-config-menu.scss
new file mode 100644
index 0000000..f19fa06
--- /dev/null
+++ b/sampler/src/main/resources/assets/styles/scss/widgets/_quick-config-menu.scss
@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: MIT
+
+#quick-config-menu {
+  -fx-min-width: 200px;
+
+  .row {
+    -fx-padding: 6px;
+    -fx-background-radius: 4px;
+  }
+
+  .action:hover {
+    // FIXME: Not visible in some themes (subtle over subtle)
+    -fx-background-color: -color-bg-subtle;
+  }
+
+  .radio>.ikonli-font-icon {
+    visibility: hidden;
+  }
+
+  .radio:selected>.ikonli-font-icon {
+    visibility: visible;
+  }
+}
\ No newline at end of file
diff --git a/styles/pom.xml b/styles/pom.xml
index 9659909..aeafec0 100755
--- a/styles/pom.xml
+++ b/styles/pom.xml
@@ -13,7 +13,6 @@
     <properties>
         <scss.inputDir>${project.basedir}/src</scss.inputDir>
         <css.outputDir>${project.basedir}/dist</css.outputDir>
-        <sass.version>1.54.4</sass.version>
     </properties>
 
     <build>