Skip to content

Commit dec5028

Browse files
kirill-grouchnikovkirill-grouchnikov
committed
Second pass for tonal Night Shade skin
Update various elements (borders, separators, drag bumps) to use container outline and inverse container outline in dark mode. For #400
1 parent db419a1 commit dec5028

File tree

10 files changed

+142
-114
lines changed

10 files changed

+142
-114
lines changed

‎theming/src/main/java/org/pushingpixels/radiance/theming/api/painter/decoration/FlatDecorationPainter.java

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,10 @@
2929
*/
3030
package org.pushingpixels.radiance.theming.api.painter.decoration;
3131

32-
import org.pushingpixels.radiance.theming.api.RadianceThemingSlices;
3332
import org.pushingpixels.radiance.theming.api.RadianceSkin;
33+
import org.pushingpixels.radiance.theming.api.RadianceThemingSlices;
3434
import org.pushingpixels.radiance.theming.api.colorscheme.RadianceColorScheme;
35+
import org.pushingpixels.radiance.theming.api.palette.ExtendedContainerColorTokens;
3536
import org.pushingpixels.radiance.theming.internal.utils.RadianceCoreUtilities;
3637

3738
import java.awt.*;
@@ -55,19 +56,29 @@ public String getDisplayName() {
5556

5657
@Override
5758
public void paintDecorationArea(Graphics2D graphics, Component comp,
58-
RadianceThemingSlices.DecorationAreaType decorationAreaType, int width, int height,
59-
RadianceSkin skin) {
60-
graphics.setColor(RadianceCoreUtilities.getBackgroundFill(
61-
skin, RadianceThemingSlices.DecorationAreaType.PRIMARY_TITLE_PANE));
62-
// skin.getBackgroundColorScheme(DecorationAreaType.PRIMARY_TITLE_PANE)
63-
// .getBackgroundFillColor());
59+
RadianceThemingSlices.DecorationAreaType decorationAreaType, int width, int height,
60+
RadianceSkin skin) {
61+
62+
graphics.setColor(RadianceCoreUtilities.getBackgroundFill(skin,
63+
RadianceThemingSlices.DecorationAreaType.PRIMARY_TITLE_PANE));
6464
graphics.fillRect(0, 0, width, height);
6565
}
6666

6767
@Override
68-
public void paintDecorationArea(Graphics2D graphics, Component comp, RadianceThemingSlices.DecorationAreaType decorationAreaType,
69-
Shape contour, RadianceColorScheme colorScheme) {
68+
public void paintDecorationArea(Graphics2D graphics, Component comp,
69+
RadianceThemingSlices.DecorationAreaType decorationAreaType,
70+
Shape contour, RadianceColorScheme colorScheme) {
71+
7072
graphics.setColor(colorScheme.getBackgroundFillColor());
7173
graphics.fill(contour);
7274
}
75+
76+
@Override
77+
public void paintDecorationArea(Graphics2D graphics, Component comp,
78+
RadianceThemingSlices.DecorationAreaType decorationAreaType, Shape contour,
79+
ExtendedContainerColorTokens colorTokens) {
80+
81+
graphics.setColor(colorTokens.getSurface());
82+
graphics.fill(contour);
83+
}
7384
}

‎theming/src/main/java/org/pushingpixels/radiance/theming/api/painter/decoration/MatteDecorationPainter.java

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
import org.pushingpixels.radiance.theming.api.RadianceSkin;
3333
import org.pushingpixels.radiance.theming.api.RadianceThemingSlices;
3434
import org.pushingpixels.radiance.theming.api.colorscheme.RadianceColorScheme;
35+
import org.pushingpixels.radiance.theming.api.palette.ContainerColorTokens;
3536
import org.pushingpixels.radiance.theming.api.palette.ExtendedContainerColorTokens;
3637
import org.pushingpixels.radiance.theming.api.palette.TonalSkin;
3738
import org.pushingpixels.radiance.theming.internal.utils.RadianceColorUtilities;
@@ -163,15 +164,15 @@ protected void fill(Graphics2D graphics, RadianceColorScheme scheme,
163164
graphics.fillRect(x, y, width, height);
164165
}
165166

166-
protected void fill(Graphics2D graphics, ExtendedContainerColorTokens colorTokens,
167+
protected void fill(Graphics2D graphics, ExtendedContainerColorTokens extendedColorTokens,
167168
int offsetY, int x, int y, int width, int height) {
168169
// 0 - flex : gradient
169170
// flex - : fill
170171

171-
Color startColor = colorTokens.getBaseContainerTokens().isDark()
172-
? colorTokens.getBaseContainerTokens().getContainerSurfaceHigh()
173-
: colorTokens.getBaseContainerTokens().getContainerSurfaceLowest();
174-
Color endColor = colorTokens.getBaseContainerTokens().getContainerSurface();
172+
ContainerColorTokens colorTokens = extendedColorTokens.getBaseContainerTokens();
173+
Color startColor = colorTokens.isDark() ? colorTokens.getContainerSurfaceHigh()
174+
: colorTokens.getContainerSurfaceLowest();
175+
Color endColor = colorTokens.getContainerSurface();
175176

176177
int gradientHeight = Math.max(FLEX_POINT, height + offsetY);
177178
Paint paint = (gradientHeight == FLEX_POINT) ?

‎theming/src/main/java/org/pushingpixels/radiance/theming/api/skin/NightShadeSkin.java

Lines changed: 26 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
import org.pushingpixels.radiance.theming.api.colorscheme.ContainerColorTokensSingleColorQuery;
3737
import org.pushingpixels.radiance.theming.api.colorscheme.RadianceColorScheme;
3838
import org.pushingpixels.radiance.theming.api.painter.border.*;
39+
import org.pushingpixels.radiance.theming.api.painter.decoration.FlatDecorationPainter;
3940
import org.pushingpixels.radiance.theming.api.painter.decoration.MatteDecorationPainter;
4041
import org.pushingpixels.radiance.theming.api.painter.fill.ClassicFillPainter;
4142
import org.pushingpixels.radiance.theming.api.painter.fill.ClassicTonalFillPainter;
@@ -238,66 +239,27 @@ public NightShadeTonalSkin() {
238239
this.registerDecorationAreaSchemeBundle(nightShadeDefaultBundle,
239240
RadianceThemingSlices.DecorationAreaType.NONE);
240241

241-
// RadianceColorScheme2 marinerHeaderColorScheme = ColorSchemeUtils.getColorScheme(
242-
// /* palettesSource */ new ColorSchemeUtils.FidelityPaletteSource(
243-
// Hct.fromInt(0xFFF5D47A), Hct.fromInt(0xFF281D1E), Hct.fromInt(0xFF2C2021)),
244-
// /* activeStatesContainerType */ RadianceThemingSlices.ActiveContainerType.TONAL,
245-
// /* isDark */ true,
246-
// /* schemeColorResolver */ SchemeResolverUtils.getSchemeColorResolver());
247-
//
248-
// RadianceColorSchemeBundle2 marinerHeaderBundle =
249-
// new RadianceColorSchemeBundle2(marinerHeaderColorScheme);
250-
// // More saturated seed for controls in selected state
251-
// marinerHeaderBundle.registerActiveContainerTokens(marinerSelectedContainerTokens,
252-
// ComponentState.SELECTED);
253-
// // More saturated highlights
254-
// marinerHeaderBundle.registerActiveContainerTokens(
255-
// marinerSelectedContainerTokens,
256-
// RadianceThemingSlices.ContainerColorTokensAssociationKind.HIGHLIGHT,
257-
// ComponentState.getActiveStates());
258-
// // More muted separators
259-
// marinerHeaderBundle.registerEnabledContainerTokens(
260-
// ColorSchemeUtils.getContainerTokens(
261-
// /* seed */ Hct.fromInt(0xFF261D1E),
262-
// /* isFidelity */ true,
263-
// /* isDark */ true,
264-
// /* contrastLevel */ -0.7,
265-
// /* colorResolver */ PaletteResolverUtils.getPaletteTonalColorResolver().overlayWith(
266-
// PaletteContainerColorsResolverOverlay.builder()
267-
// //.containerOutline(DynamicPalette::getTonalContainerOutlineVariant)
268-
// .build())),
269-
// RadianceThemingSlices.ContainerColorTokensAssociationKind.SEPARATOR);
270-
// this.registerDecorationAreaSchemeBundle(marinerHeaderBundle,
271-
// ColorSchemeUtils.getExtendedContainerTokens(
272-
// /* seed */ Hct.fromInt(0xFF261D1E),
273-
// /* isFidelity */ true,
274-
// /* isDark */ true,
275-
// /* contrastLevel */ 1.0,
276-
// /* colorResolver */ PaletteResolverUtils.getPaletteTonalColorResolver().overlayWith(
277-
// PaletteContainerColorsResolverOverlay.builder()
278-
// .containerOutline(DynamicPalette::getTonalContainerOutlineVariant)
279-
// .build())),
280-
// RadianceThemingSlices.DecorationAreaType.PRIMARY_TITLE_PANE,
281-
// RadianceThemingSlices.DecorationAreaType.SECONDARY_TITLE_PANE,
282-
// RadianceThemingSlices.DecorationAreaType.HEADER);
283-
//
284-
// RadianceColorScheme2 marinerFooterColorScheme = ColorSchemeUtils.getColorScheme(
285-
// /* palettesSource */ new ColorSchemeUtils.FidelityPaletteSource(
286-
// Hct.fromInt(0xFFF6DD9D), Hct.fromInt(0xFFC5C4C2), Hct.fromInt(0xFFB9B7B9)),
287-
// /* activeStatesContainerType */ RadianceThemingSlices.ActiveContainerType.TONAL,
288-
// /* isDark */ false,
289-
// /* schemeColorResolver */ SchemeResolverUtils.getSchemeColorResolver());
290-
//
291-
// RadianceColorSchemeBundle2 marinerFooterBundle =
292-
// new RadianceColorSchemeBundle2(marinerFooterColorScheme);
293-
// this.registerDecorationAreaSchemeBundle(marinerFooterBundle,
294-
// ColorSchemeUtils.getExtendedContainerTokens(
295-
// /* seed */ Hct.fromInt(0xFFB9B7B9),
296-
// /* isFidelity */ true,
297-
// /* isDark */ false),
298-
// RadianceThemingSlices.DecorationAreaType.FOOTER,
299-
// RadianceThemingSlices.DecorationAreaType.TOOLBAR,
300-
// RadianceThemingSlices.DecorationAreaType.CONTROL_PANE);
242+
// Toolbars, footers, control panes
243+
this.registerAsDecorationArea(
244+
ColorSchemeUtils.getExtendedContainerTokens(
245+
/* seed */ Hct.fromInt(0xFF22252A),
246+
/* isFidelity */ true,
247+
/* isDark */ true),
248+
RadianceThemingSlices.DecorationAreaType.FOOTER,
249+
RadianceThemingSlices.DecorationAreaType.TOOLBAR,
250+
RadianceThemingSlices.DecorationAreaType.CONTROL_PANE);
251+
252+
// Headers
253+
this.registerAsDecorationArea(
254+
ColorSchemeUtils.getExtendedContainerTokens(
255+
/* seed */ Hct.fromInt(0xFF22252A),
256+
/* isFidelity */ true,
257+
/* isDark */ true,
258+
/* contrastLevel */ 0.6f,
259+
/* colorResolver */ PaletteResolverUtils.getPaletteTonalColorResolver()),
260+
RadianceThemingSlices.DecorationAreaType.PRIMARY_TITLE_PANE,
261+
RadianceThemingSlices.DecorationAreaType.SECONDARY_TITLE_PANE,
262+
RadianceThemingSlices.DecorationAreaType.HEADER);
301263

302264
this.buttonShaper = new ClassicButtonShaper();
303265
this.fillPainter = new FractionBasedTonalFillPainter("Night Shade",
@@ -307,7 +269,7 @@ public NightShadeTonalSkin() {
307269
ContainerColorTokensSingleColorQuery.CONTAINER_SURFACE,
308270
ContainerColorTokensSingleColorQuery.CONTAINER_SURFACE});
309271

310-
this.decorationPainter = new MatteDecorationPainter();
272+
this.decorationPainter = new FlatDecorationPainter();
311273
this.highlightFillPainter = new ClassicTonalFillPainter();
312274

313275
this.borderPainter = new CompositeBorderPainter("Night Shade",
@@ -326,10 +288,9 @@ public NightShadeTonalSkin() {
326288

327289
@Override
328290
void configureOverlayPainters() {
329-
// Add overlay painters to paint drop shadows along the bottom
330-
// edges of toolbars and footers
291+
// Add overlay painters to paint drop shadows along the bottom edges of toolbars
331292
this.addOverlayPainter(BottomShadowOverlayPainter.getInstance(100),
332-
RadianceThemingSlices.DecorationAreaType.TOOLBAR, RadianceThemingSlices.DecorationAreaType.FOOTER);
293+
RadianceThemingSlices.DecorationAreaType.TOOLBAR);
333294

334295
// add an overlay painter to paint a dark line along the bottom
335296
// edge of toolbars
@@ -343,7 +304,7 @@ void configureOverlayPainters() {
343304
ContainerColorTokensSingleColorQuery.CONTAINER_OUTLINE_VARIANT,
344305
ContainerColorTokensSingleColorQuery.composite(
345306
ContainerColorTokensSingleColorQuery.INVERSE_CONTAINER_OUTLINE,
346-
ColorTransform.alpha(32)));
307+
ColorTransform.alpha(72)));
347308
this.addOverlayPainter(footerTopBezelOverlayPainter, RadianceThemingSlices.DecorationAreaType.FOOTER);
348309
}
349310

‎theming/src/main/java/org/pushingpixels/radiance/theming/internal/blade/BladeDrawingUtils.java

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,7 @@ public static void paintBladeSimpleTonalBorder(Component c, Graphics2D g, int wi
139139
RenderingHints.VALUE_ANTIALIAS_ON);
140140
RadianceCommonCortex.paintAtScale1x(graphics, 0, 0, width, height,
141141
(graphics1X, x, y, scaledWidth, scaledHeight, scaleFactor) -> {
142-
Color borderColor = colorTokens.isDark()
143-
? colorTokens.getContainerSurfaceLowest()
144-
: colorTokens.getContainerOutline();
142+
Color borderColor = colorTokens.getContainerOutline();
145143
graphics1X.setColor(borderColor);
146144
if (baseRadius == 0.0f) {
147145
graphics1X.setStroke(new BasicStroke(1.0f, BasicStroke.CAP_SQUARE, BasicStroke.JOIN_MITER));

‎theming/src/main/java/org/pushingpixels/radiance/theming/internal/painter/SeparatorPainterUtils.java

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -455,13 +455,19 @@ public static void paintTonalSeparator(Component c, Graphics g,
455455

456456
Color backgroundFill = RadianceColorUtilities.getTonalBackgroundFillColor(
457457
c, RadianceThemingSlices.ContainerType.NEUTRAL);
458-
Color primary = colorTokens.getContainerOutlineVariant();
459-
// TODO: TONAL - verify this across light and dark skins
460-
Color secondary = RadianceColorUtilities.getAlphaColor(
461-
colorTokens.getInverseContainerOutline(), 64);
462-
// System.out.println("Separator in " + decorationAreaType +
463-
// ": primary=" + RadianceColorUtilities.encode(primary) + ", secondary=" +
464-
// RadianceColorUtilities.encode(secondary));
458+
459+
Color primary;
460+
Color secondary;
461+
if (colorTokens.isDark()) {
462+
primary = RadianceColorUtilities.getAlphaColor(
463+
colorTokens.getInverseContainerOutline(), 128);
464+
secondary = RadianceColorUtilities.getAlphaColor(
465+
colorTokens.getContainerOutline(), 192);
466+
} else {
467+
primary = colorTokens.getContainerOutlineVariant();
468+
secondary = RadianceColorUtilities.getAlphaColor(
469+
colorTokens.getInverseContainerOutline(), 64);
470+
}
465471

466472
Color primaryZero = toUseAlphaColors
467473
? RadianceColorUtilities.getAlphaColor(primary, 0)

0 commit comments

Comments
 (0)