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

Refactor SCSS variable names for better readability

Browse Source
This commit is contained in:
mkpaz 2022-09-13 14:40:40 +04:00
parent 38a5d73a3b
commit 4bfa40e844
19 changed files with 150 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sampler/src/main/java/atlantafx/sampler/page/components/DatePickerPage.java
View File

@ -222,7 +222,7 @@ public class DatePickerPage extends AbstractPage {
private void setColorVariables(String bgColorName, String fgColorName) {
for (Node node : root.getChildren()) {
var style = String.format("-color-dp-border:%s;-color-dp-month-year-bg:%s;-color-dp-month-year-fg:%s;",
var style = String.format("-color-date-border:%s;-color-date-month-year-bg:%s;-color-date-month-year-fg:%s;",
bgColorName,
bgColorName,
fgColorName

4
sampler/src/main/java/atlantafx/sampler/page/showcase/musicplayer/music-player.css
View File

@ -26,8 +26,8 @@
-fx-icon-size: 32px;
}
.music-player-showcase > .player-screen > .split-pane-divider {
-color-divider: -color-dominant-border;
-color-grabber: -color-dominant-border;
-color-split-divider: -color-dominant-border;
-color-split-grabber: -color-dominant-border;
}
.music-player-showcase > .player-screen > * > .playlist {

10
sampler/src/main/resources/assets/styles/scss/layout/_components.scss
View File

@ -9,9 +9,9 @@
}
.popover .date-picker-popup {
-color-dp-border: transparent;
-color-dp-bg: transparent;
-color-dp-day-bg: transparent;
-color-dp-month-year-bg: transparent;
-color-dp-day-bg-hover: -color-bg-subtle;
-color-date-border: transparent;
-color-date-bg: transparent;
-color-date-day-bg: transparent;
-color-date-month-year-bg: transparent;
-color-date-day-bg-hover: -color-bg-subtle;
}

16
styles/src/components/_combo-box.scss
View File

@ -1,13 +1,11 @@
// SPDX-License-Identifier: MIT
@use "../settings/config" as cfg;
@use "../settings/effects";
@use "../settings/icons";
@use "../settings/utils";
$color-cell-bg: -color-bg-default !default;
$color-cell-bg-hover: if(cfg.$darkMode, -color-base-7, -color-base-1) !default;
$color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
$color-list-bg: -color-bg-default !default;
$color-list-bg-hover: if(cfg.$darkMode, -color-base-7, -color-base-1) !default;
$color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
@mixin _arrow() {
@include icons.get("arrow-drop-down", false);
@ -138,7 +136,7 @@ $color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
.combo-box-popup {
>.list-view {
-fx-background-color: -color-border-default, $color-cell-bg;
-fx-background-color: -color-border-default, $color-list-bg;
-fx-background-insets: 0, 1;
-fx-background-radius: cfg.$border-radius;
@ -149,17 +147,17 @@ $color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !defaul
// reset cell size, because height is set via paddings
// to use the same values as ChoiceBox
-fx-cell-size: 0;
-fx-background-color: $color-cell-bg;
-fx-background-color: $color-list-bg;
-fx-padding: cfg.$menu-padding-y cfg.$menu-padding-x cfg.$menu-padding-y cfg.$menu-padding-x;
-fx-graphic-text-gap: cfg.$graphic-gap;
&:filled:hover {
-fx-background-color: $color-cell-bg-hover;
-fx-background-color: $color-list-bg-hover;
}
&:filled:selected,
&:filled:selected:hover {
-fx-background-color: $color-cell-bg-selected;
-fx-background-color: $color-list-bg-selected;
}
}
}

2
styles/src/components/_data.scss
View File

@ -9,8 +9,10 @@ $color-cell-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-1) !defaul
$color-cell-fg-selected: -color-fg-default !default;
$color-cell-bg-odd: -color-bg-subtle !default;
$color-cell-border: -color-border-default !default;
$color-header-bg: -color-bg-subtle !default;
$color-header-fg: -color-fg-default !default;
$color-resize-line: -color-accent-emphasis !default;
$color-drag-header: -color-accent-muted !default;
$color-drag-overlay: -color-accent-muted !default;

118
styles/src/components/_date-picker.scss
View File

@ -6,24 +6,23 @@
$color-bg: -color-bg-default !default;
$color-border: -color-border-default !default;
$month-year-color-bg: -color-bg-default !default;
$month-year-color-fg: -color-fg-default !default;
$day-color-bg: -color-bg-default !default;
$day-color-bg-hover: -color-bg-subtle !default;
$day-color-bg-selected: -color-accent-emphasis !default;
$day-color-fg: -color-fg-default !default;
$day-color-fg-hover: -color-fg-default !default;
$day-color-fg-selected: -color-fg-emphasis !default;
$week-color-bg: -color-bg-default !default;
$week-color-fg: -color-accent-fg !default;
$today-color-bg: -color-accent-subtle !default;
$today-color-fg: -color-accent-fg !default;
$other-month-color-fg: -color-fg-muted !default;
$chrono-color-fg: -color-success-fg !default;
$color-month-year-bg: -color-bg-default !default;
$color-month-year-fg: -color-fg-default !default;
$color-day-bg: -color-bg-default !default;
$color-day-bg-hover: -color-bg-subtle !default;
$color-day-bg-selected: -color-accent-emphasis !default;
$color-day-fg: -color-fg-default !default;
$color-day-fg-hover: -color-fg-default !default;
$color-day-fg-selected: -color-fg-emphasis !default;
$color-week-bg: -color-bg-default !default;
$color-week-fg: -color-accent-fg !default;
$color-today-bg: -color-accent-subtle !default;
$color-today-fg: -color-accent-fg !default;
$color-other-month-fg: -color-fg-muted !default;
$color-chrono-fg: -color-success-fg !default;
$content-padding-x: 8px !default;
$content-padding-y: 8px !default;
$month-year-font-size: 1.1em !default;
$cell-padding-x: 4px !default;
@ -36,22 +35,22 @@ $chrono-cell-size: 2.75em !default;
$chrono-cell-padding: 0.083333em $cell-padding-x 0.083333em 0.333333em !default;
@mixin _color-variables() {
-color-dp-bg: $color-bg;
-color-dp-border: $color-border;
-color-dp-month-year-bg: $month-year-color-bg;
-color-dp-month-year-fg: $month-year-color-fg;
-color-dp-day-bg: $day-color-bg;
-color-dp-day-bg-hover: $day-color-bg-hover;
-color-dp-day-bg-selected: $day-color-bg-selected;
-color-dp-day-fg: $day-color-fg;
-color-dp-day-fg-hover: $day-color-fg-hover;
-color-dp-day-fg-selected: $day-color-fg-selected;
-color-dp-week-bg: $week-color-bg;
-color-dp-week-fg: $week-color-fg;
-color-dp-today-bg: $today-color-bg;
-color-dp-today-fg: $today-color-fg;
-color-dp-other-month-fg: $other-month-color-fg;
-color-dp-chrono-fg: $chrono-color-fg;
-color-date-bg: $color-bg;
-color-date-border: $color-border;
-color-date-month-year-bg: $color-month-year-bg;
-color-date-month-year-fg: $color-month-year-fg;
-color-date-day-bg: $color-day-bg;
-color-date-day-bg-hover: $color-day-bg-hover;
-color-date-day-bg-selected: $color-day-bg-selected;
-color-date-day-fg: $color-day-fg;
-color-date-day-fg-hover: $color-day-fg-hover;
-color-date-day-fg-selected: $color-day-fg-selected;
-color-date-week-bg: $color-week-bg;
-color-date-week-fg: $color-week-fg;
-color-date-today-bg: $color-today-bg;
-color-date-today-fg: $color-today-fg;
-color-date-other-month-fg: $color-other-month-fg;
-color-date-chrono-fg: $color-chrono-fg;
}
.combo-box-base.date-picker {
@ -68,7 +67,8 @@ $chrono-cell-padding: 0.083333em $cell-padding-x 0.083333em 0.333333em !default;
.date-picker-popup {
@include _color-variables();
-fx-background-color: -color-dp-border, -color-dp-bg;
-fx-background-color: -color-date-border, -color-date-bg;
-fx-background-insets: 0, 1;
-fx-background-radius: 0;
-fx-alignment: CENTER;
@ -77,7 +77,7 @@ $chrono-cell-padding: 0.083333em $cell-padding-x 0.083333em 0.333333em !default;
>.month-year-pane {
-fx-padding: $content-padding-y $content-padding-x $content-padding-y $content-padding-x;
-fx-background-color: -color-dp-month-year-bg;
-fx-background-color: -color-date-month-year-bg;
-fx-background-insets: 0;
// this one is actually HBox, but because of the class name it uses Spinner styles
@ -97,30 +97,30 @@ $chrono-cell-padding: 0.083333em $cell-padding-x 0.083333em 0.333333em !default;
>.left-arrow {
@include icons.get("chevron-left", false);
-fx-background-color: -color-dp-month-year-fg;
-fx-background-color: -color-date-month-year-fg;
}
>.right-arrow {
@include icons.get("chevron-right", false);
-fx-background-color: -color-dp-month-year-fg;
-fx-background-color: -color-date-month-year-fg;
}
}
>.label {
-fx-alignment: CENTER;
-fx-text-fill: -color-dp-month-year-fg;
-fx-text-fill: -color-date-month-year-fg;
}
}
>.secondary-label {
-fx-alignment: BASELINE_CENTER;
-fx-padding: $chrono-label-margin 0 0 0;
-fx-text-fill: -color-dp-month-year-fg;
-fx-text-fill: -color-date-month-year-fg;
}
}
>.calendar-grid {
-fx-background-color: -color-dp-bg;
-fx-background-color: -color-date-bg;
-fx-padding: $content-padding-x;
>.date-cell {
@ -128,22 +128,22 @@ $chrono-cell-padding: 0.083333em $cell-padding-x 0.083333em 0.333333em !default;
-fx-padding: 0;
-fx-alignment: BASELINE_CENTER;
-fx-opacity: 1.0;
-fx-text-fill: -color-dp-day-fg;
-fx-text-fill: -color-date-day-fg;
}
>.week-number-cell {
-fx-padding: $cell-padding-y $cell-padding-x $cell-padding-y $cell-padding-x;
-fx-background-color: -color-dp-week-bg;
-fx-text-fill: -color-dp-week-fg;
-fx-background-color: -color-date-week-bg;
-fx-text-fill: -color-date-week-fg;
-fx-font-size: $day-name-font-size;
}
>.day-cell {
-fx-padding: $cell-padding-y $cell-padding-x $cell-padding-y $cell-padding-x;
-fx-background-color: -color-dp-day-bg;
-fx-background-color: -color-date-day-bg;
>.secondary-text {
-fx-fill: -color-dp-chrono-fg;
-fx-fill: -color-date-chrono-fg;
}
&:disabled {
@ -163,8 +163,8 @@ $chrono-cell-padding: 0.083333em $cell-padding-x 0.083333em 0.333333em !default;
}
>.today {
-fx-background-color: -color-dp-today-bg;
-fx-text-fill: -color-dp-today-fg;
-fx-background-color: -color-date-today-bg;
-fx-text-fill: -color-date-today-fg;
-fx-font-weight: bold;
}
}
@ -187,19 +187,19 @@ $chrono-cell-padding: 0.083333em $cell-padding-x 0.083333em 0.333333em !default;
>.back-button {
>.left-arrow {
@include icons.get("chevron-left", false);
-fx-background-color: -color-dp-month-year-fg;
-fx-background-color: -color-date-month-year-fg;
}
}
>.forward-button {
>.right-arrow {
@include icons.get("chevron-right", false);
-fx-background-color: -color-dp-month-year-fg;
-fx-background-color: -color-date-month-year-fg;
}
}
>.label {
-fx-text-fill: -color-dp-month-year-fg;
-fx-text-fill: -color-date-month-year-fg;
-fx-font-size: $month-year-font-size;
}
}
@ -222,25 +222,25 @@ $chrono-cell-padding: 0.083333em $cell-padding-x 0.083333em 0.333333em !default;
.date-picker-popup>.calendar-grid>.selected>.secondary-text,
.date-picker-popup>.calendar-grid>.previous-month.selected,
.date-picker-popup>.calendar-grid>.next-month.selected {
-fx-background-color: -color-dp-day-bg-selected;
-fx-text-fill: -color-dp-day-fg-selected;
-fx-fill: -color-dp-day-fg-selected;
-fx-background-color: -color-date-day-bg-selected;
-fx-text-fill: -color-date-day-fg-selected;
-fx-fill: -color-date-day-fg-selected;
-fx-font-weight: normal;
}
.date-picker-popup>.calendar-grid>.day-cell:hover {
-fx-background-color: -color-dp-day-bg-hover;
-fx-background-color: -color-date-day-bg-hover;
}
.date-picker-popup>.calendar-grid>.today:hover {
-fx-background-color: -color-dp-today-bg;
-fx-text-fill: -color-dp-today-fg;
-fx-background-color: -color-date-today-bg;
-fx-text-fill: -color-date-today-fg;
}
.date-picker-popup>.calendar-grid>.selected:hover {
-fx-background-color: -color-dp-day-bg-selected;
-fx-text-fill: -color-dp-day-fg-selected;
-fx-fill: -color-dp-day-fg-selected;
-fx-background-color: -color-date-day-bg-selected;
-fx-text-fill: -color-date-day-fg-selected;
-fx-fill: -color-date-day-fg-selected;
}
.date-picker-popup>.calendar-grid>.previous-month,
@ -249,7 +249,7 @@ $chrono-cell-padding: 0.083333em $cell-padding-x 0.083333em 0.333333em !default;
.date-picker-popup>.calendar-grid>.next-month.today,
.date-picker-popup>.calendar-grid>.previous-month>.secondary-text,
.date-picker-popup>.calendar-grid>.next-month>.secondary-text {
-fx-text-fill: -color-dp-other-month-fg;
-fx-fill: -color-dp-other-month-fg;
-fx-text-fill: -color-date-other-month-fg;
-fx-fill: -color-date-other-month-fg;
-fx-font-weight: normal;
}

1
styles/src/components/_html-editor.scss
View File

@ -1,7 +1,6 @@
// SPDX-License-Identifier: MIT
@use "../settings/config" as cfg;
@use "../settings/utils";
@use "sass:math";
$color-picker-rect-size: 8px !default;

1
styles/src/components/_menu.scss
View File

@ -3,7 +3,6 @@
@use "../settings/config" as cfg;
@use "../settings/effects";
@use "../settings/icons";
@use "../settings/utils";
///////////////////////////////////////////////////////////////////////////////
// MenuBar //

8
styles/src/components/_progress.scss
View File

@ -7,8 +7,8 @@
// ProgressBar //
///////////////////////////////////////////////////////////////////////////////
$progress-bar-track-color: -color-bg-subtle !default;
$progress-bar-fill-color: -color-accent-emphasis !default;
$color-bar-track: -color-bg-subtle !default;
$color-bar-fill: -color-accent-emphasis !default;
$size: (
"small": 2px,
@ -18,8 +18,8 @@ $size: (
.progress-bar {
-color-progress-bar-track: $progress-bar-track-color;
-color-progress-bar-fill: $progress-bar-fill-color;
-color-progress-bar-track: $color-bar-track;
-color-progress-bar-fill: $color-bar-fill;
-fx-indeterminate-bar-length: 60;
-fx-indeterminate-bar-escape: true;

2
styles/src/components/_separator.scss
View File

@ -3,8 +3,8 @@
@use "../settings/config" as cfg;
$padding: map-get(cfg.$separators, "medium") !default;
$line-width: cfg.$border-width !default;
$line-color: -color-border-muted !default;
$line-width: cfg.$border-width !default;
.separator {

17
styles/src/components/_slider.scss
View File

@ -3,16 +3,17 @@
@use "../settings/config" as cfg;
@use "sass:math";
$thumb-color: if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default;
$thumb-color-border: if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default;
$color-thumb: if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default;
$color-thumb-border: if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default;
$color-track: -color-accent-emphasis !default;
$color-tick: -color-fg-muted !default;
$thumb-size: 8px !default;
$thumb-border-width: 2px !default;
$track-color: -color-accent-emphasis !default;
$track-size: $thumb-size !default; // visual track height (or width)
$track-margin: 6px !default; // increases clickable track area
$tick-color: -color-fg-muted !default;
$tick-major-size: 5px !default;
$tick-minor-size: 3px !default;
@ -20,10 +21,10 @@ $_track-padding: math.div($track-size + $track-margin, 2);
.slider {
-color-slider-thumb: $thumb-color;
-color-slider-thumb-border: $thumb-color-border;
-color-slider-track: $track-color;
-color-slider-tick: $tick-color;
-color-slider-thumb: $color-thumb;
-color-slider-thumb-border: $color-thumb-border;
-color-slider-track: $color-track;
-color-slider-tick: $color-tick;
>.thumb {
-fx-background-color: -color-slider-thumb-border, -color-slider-thumb;

1
styles/src/components/_spinner.scss
View File

@ -2,7 +2,6 @@
@use "../settings/config" as cfg;
@use "../settings/icons";
@use "../settings/utils";
$color-button-bg: -color-bg-subtle !default;
$color-button-fg: -color-fg-default !default;

31
styles/src/components/_split-pane.scss
View File

@ -2,50 +2,51 @@
@use "../settings/config" as cfg;
$divider-color: cfg.$scrollbar-color-track !default;
$divider-color-pressed: -color-accent-emphasis !default;
$divider-thickness: 2px !default;
$color-divider: cfg.$scrollbar-color-track !default;
$color-divider-pressed: -color-accent-emphasis !default;
$grabber-color: cfg.$scrollbar-color-thumb !default;
$grabber-color-pressed: -color-accent-emphasis !default;
$color-grabber: cfg.$scrollbar-color-thumb !default;
$color-grabber-pressed: -color-accent-emphasis !default;
$divider-thickness: 2px !default;
$grabber-length: 10px !default;
.split-pane {
-color-divider: $divider-color;
-color-divider-pressed: $divider-color-pressed;
-color-grabber: $grabber-color;
-color-grabber-pressed: $grabber-color-pressed;
-color-split-divider: $color-divider;
-color-split-divider-pressed: $color-divider-pressed;
-color-split-grabber: $color-grabber;
-color-split-grabber-pressed: $color-grabber-pressed;
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-padding: 0;
>.split-pane-divider {
-fx-background-color: -color-divider;
-fx-background-color: -color-split-divider;
-fx-padding: 0 $divider-thickness 0 $divider-thickness;
-fx-opacity: cfg.$scrollbar-opacity-inactive;
// Just for example, this is how we can increase grab area without increasing divider width.
// Sadly, it's only appropriate when split pane items are allowed to have horizontal padding.
//-fx-border-color: color.$background;
//-fx-border-color: -color-xxx;
//-fx-border-width: 0 5 0 5;
>.horizontal-grabber {
-fx-background-color: -color-grabber;
-fx-background-color: -color-split-grabber;
-fx-padding: $grabber-length $divider-thickness $grabber-length $divider-thickness;
}
>.vertical-grabber {
-fx-background-color: -color-grabber;
-fx-background-color: -color-split-grabber;
-fx-padding: $divider-thickness $grabber-length $divider-thickness $grabber-length;
}
&:pressed {
-fx-background-color: -color-divider-pressed;
-fx-background-color: -color-split-divider-pressed;
>.horizontal-grabber,
>.vertical-grabber {
-fx-background-color: -color-grabber-pressed;
-fx-background-color: -color-split-grabber-pressed;
}
}

3
styles/src/components/_titled-pane.scss
View File

@ -19,8 +19,7 @@ $elevation-interactive: map-get(cfg.$elevation, 2) !default;
-fx-text-fill: -color-fg-default;
-fx-effect: none;
@each $level,
$radius in cfg.$elevation {
@each $level,$radius in cfg.$elevation {
&.elevated-#{$level} {
@include effects.elevate($elevation-color, $radius);
}