tablet/atlantafx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate Sampler stylesheet to SASS

Browse Source
This commit is contained in:
mkpaz 2022-08-31 13:26:05 +04:00
parent 909451fb8b
commit de5a5795a6
17 changed files with 458 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pom.xml
View File

@ -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>

20
sampler/pom.xml
View File

@ -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>

2
sampler/src/main/java/module-info.java
View File

@ -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;
}

335
sampler/src/main/resources/assets/styles/index.css
View File

@ -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;
}

118
sampler/src/main/resources/assets/styles/scss/general/_fonts.scss Normal file
View File

@ -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');
}

5
sampler/src/main/resources/assets/styles/scss/general/_index.scss Normal file
View File

@ -0,0 +1,5 @@
// SPDX-License-Identifier: MIT
@use "fonts";
@use "root";
@use "util";

34
sampler/src/main/resources/assets/styles/scss/general/_root.scss Normal file
View File

@ -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;
}
}
}
}

6
sampler/src/main/resources/assets/styles/scss/general/_util.scss Normal file
View File

@ -0,0 +1,6 @@
// SPDX-License-Identifier: MIT
.bordered {
-fx-border-width: 1px;
-fx-border-color: -color-border-muted;
}

5
sampler/src/main/resources/assets/styles/scss/index.scss Normal file
View File

@ -0,0 +1,5 @@
// SPDX-License-Identifier: MIT
@use "general";
@use "layout";
@use "widgets";

14
sampler/src/main/resources/assets/styles/scss/layout/_components.scss Normal file
View File

@ -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;
}

5
sampler/src/main/resources/assets/styles/scss/layout/_index.scss Normal file
View File

@ -0,0 +1,5 @@
// SPDX-License-Identifier: MIT
@use "sidebar";
@use "page";
@use "components";

42
sampler/src/main/resources/assets/styles/scss/layout/_page.scss Normal file
View File

@ -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;
}
}
}
}
}

45
sampler/src/main/resources/assets/styles/scss/layout/_sidebar.scss Normal file
View File

@ -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;
}
}
}
}

132
sampler/src/main/resources/assets/styles/scss/widgets/_color-palette.scss Normal file
View File

@ -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;
}
}
}
}
}

4
sampler/src/main/resources/assets/styles/scss/widgets/_index.scss Normal file
View File

@ -0,0 +1,4 @@
// SPDX-License-Identifier: MIT
@use "color-palette";
@use "quick-config-menu";

23
sampler/src/main/resources/assets/styles/scss/widgets/_quick-config-menu.scss Normal file
View File

@ -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;
}
}

1
styles/pom.xml
View File

@ -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>