Use the background and primary colors' own alpha
Panels, buttons, cards and tiles multiplied the theme's background and primary colors by a fixed alpha, so they were translucent however the colors were set. They now use the colors as they are, and the defaults and presets carry the old translucency in their alpha instead. Popups stay nearly solid so they're readable over panels. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
@@ -10,14 +10,14 @@ import org.saturnclient.config.property.SelectProperty;
|
|||||||
public class Theme {
|
public class Theme {
|
||||||
public static ConfigManager config;
|
public static ConfigManager config;
|
||||||
|
|
||||||
// Main UI background (slightly warm dark to match Saturn tone)
|
// Main UI background (slightly warm dark to match Saturn tone), translucent over the world
|
||||||
public static final ColorProperty BACKGROUND = Property.color(0xFF12100D);
|
public static final ColorProperty BACKGROUND = Property.color(0xD112100D);
|
||||||
|
|
||||||
// Default text color
|
// Default text color
|
||||||
public static final ColorProperty FOREGROUND = Property.color(0xFFF2E6D2);
|
public static final ColorProperty FOREGROUND = Property.color(0xFFF2E6D2);
|
||||||
|
|
||||||
// Widget default background (normal state)
|
// Widget default background (normal state), translucent over the world
|
||||||
public static final ColorProperty PRIMARY = Property.color(0xFF1C1915);
|
public static final ColorProperty PRIMARY = Property.color(0xB81C1915);
|
||||||
|
|
||||||
// Widget text color
|
// Widget text color
|
||||||
public static final ColorProperty PRIMARY_FG = Property.color(0xFFEAD9B8);
|
public static final ColorProperty PRIMARY_FG = Property.color(0xFFEAD9B8);
|
||||||
@@ -62,10 +62,10 @@ public class Theme {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public static final List<Preset> PRESETS = List.of(
|
public static final List<Preset> PRESETS = List.of(
|
||||||
new Preset("Saturn", 0xFF12100D, 0xFFF2E6D2, 0xFF1C1915, 0xFFEAD9B8, 0xFFE2BF7D, 0xFF1A140A, 0xFFE2BF7D),
|
new Preset("Saturn", 0xD112100D, 0xFFF2E6D2, 0xB81C1915, 0xFFEAD9B8, 0xFFE2BF7D, 0xFF1A140A, 0xFFE2BF7D),
|
||||||
new Preset("Midnight", 0xFF0E1117, 0xFFE4EAF5, 0xFF171C26, 0xFFC9D4E8, 0xFF8FB3FF, 0xFF0A1224, 0xFF8FB3FF),
|
new Preset("Midnight", 0xD10E1117, 0xFFE4EAF5, 0xB8171C26, 0xFFC9D4E8, 0xFF8FB3FF, 0xFF0A1224, 0xFF8FB3FF),
|
||||||
new Preset("Amethyst", 0xFF120F17, 0xFFEDE4F7, 0xFF1C1724, 0xFFD8C9EB, 0xFFC79BFF, 0xFF1A0F2A, 0xFFC79BFF),
|
new Preset("Amethyst", 0xD1120F17, 0xFFEDE4F7, 0xB81C1724, 0xFFD8C9EB, 0xFFC79BFF, 0xFF1A0F2A, 0xFFC79BFF),
|
||||||
new Preset("Emerald", 0xFF0D1210, 0xFFE2F2EA, 0xFF16201B, 0xFFC4E0D2, 0xFF7FD1A8, 0xFF0A1F15, 0xFF7FD1A8));
|
new Preset("Emerald", 0xD10D1210, 0xFFE2F2EA, 0xB816201B, 0xFFC4E0D2, 0xFF7FD1A8, 0xFF0A1F15, 0xFF7FD1A8));
|
||||||
|
|
||||||
public static void init(ConfigManager parent) {
|
public static void init(ConfigManager parent) {
|
||||||
config = new ConfigManager(parent, "UI Style");
|
config = new ConfigManager(parent, "UI Style");
|
||||||
@@ -98,10 +98,19 @@ public class Theme {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Translucent background for panels drawn over the world
|
* Background for panels drawn over the world, as translucent as the
|
||||||
|
* background color is
|
||||||
*/
|
*/
|
||||||
public static int getPanelBg() {
|
public static int getPanelBg() {
|
||||||
return withAlpha(0.82f, BACKGROUND.value);
|
return BACKGROUND.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Background for popups, which sit over other panels: the background color,
|
||||||
|
* kept nearly solid so what's under it doesn't show through
|
||||||
|
*/
|
||||||
|
public static int getPopupBg() {
|
||||||
|
return withAlpha(0.97f, BACKGROUND.value | 0xFF000000);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ public class CosmeticTile extends Element {
|
|||||||
int border = isEquipped ? Theme.ACCENT.value
|
int border = isEquipped ? Theme.ACCENT.value
|
||||||
: Theme.withAlpha(hovered ? 0.22f : 0.06f, Theme.FOREGROUND.value);
|
: Theme.withAlpha(hovered ? 0.22f : 0.06f, Theme.FOREGROUND.value);
|
||||||
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, isEquipped ? 2 : 1,
|
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, isEquipped ? 2 : 1,
|
||||||
Theme.withAlpha(0.72f, Theme.PRIMARY.value), border);
|
Theme.PRIMARY.value, border);
|
||||||
|
|
||||||
// Preview, fitted into its area
|
// Preview, fitted into its area
|
||||||
int areaWidth = width - INSET * 2;
|
int areaWidth = width - INSET * 2;
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ public class EmoteTile extends Element {
|
|||||||
boolean hovered = ctx.isHovering();
|
boolean hovered = ctx.isHovering();
|
||||||
|
|
||||||
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, hovered ? 2 : 1,
|
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, hovered ? 2 : 1,
|
||||||
Theme.withAlpha(0.72f, Theme.PRIMARY.value),
|
Theme.PRIMARY.value,
|
||||||
hovered ? Theme.ACCENT.value : Theme.withAlpha(0.06f, Theme.FOREGROUND.value));
|
hovered ? Theme.ACCENT.value : Theme.withAlpha(0.06f, Theme.FOREGROUND.value));
|
||||||
|
|
||||||
int imageSize = height - INSET * 2 - NAME_AREA;
|
int imageSize = height - INSET * 2 - NAME_AREA;
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ public class SaturnModule extends Element {
|
|||||||
|
|
||||||
// Card
|
// Card
|
||||||
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
|
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
|
||||||
Theme.withAlpha(0.72f, Theme.PRIMARY.value), border);
|
Theme.PRIMARY.value, border);
|
||||||
|
|
||||||
if (enabled) {
|
if (enabled) {
|
||||||
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value,
|
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value,
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ public class ThemePresetCard extends Element {
|
|||||||
: Theme.withAlpha(ctx.isHovering() ? 0.22f : 0.06f, Theme.FOREGROUND.value);
|
: Theme.withAlpha(ctx.isHovering() ? 0.22f : 0.06f, Theme.FOREGROUND.value);
|
||||||
|
|
||||||
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, active ? 2 : 1,
|
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, active ? 2 : 1,
|
||||||
Theme.withAlpha(0.72f, Theme.PRIMARY.value), border);
|
Theme.PRIMARY.value, border);
|
||||||
|
|
||||||
// A panel in the preset's colors: a line of text over an accent and a widget
|
// A panel in the preset's colors: a line of text over an accent and a widget
|
||||||
int previewWidth = width - PADDING * 2;
|
int previewWidth = width - PADDING * 2;
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ public class ColorPicker extends Element {
|
|||||||
registerStrips();
|
registerStrips();
|
||||||
|
|
||||||
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
|
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
|
||||||
Theme.withAlpha(0.97f, Theme.BACKGROUND.value), Theme.withAlpha(0.14f, Theme.FOREGROUND.value));
|
Theme.getPopupBg(), Theme.withAlpha(0.14f, Theme.FOREGROUND.value));
|
||||||
|
|
||||||
renderOpacity(renderScope);
|
renderOpacity(renderScope);
|
||||||
renderSquare(renderScope);
|
renderSquare(renderScope);
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ public class CurvePreview extends Element {
|
|||||||
@Override
|
@Override
|
||||||
public void render(RenderScope renderScope, ElementContext ctx) {
|
public void render(RenderScope renderScope, ElementContext ctx) {
|
||||||
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
|
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
|
||||||
Theme.withAlpha(0.97f, Theme.BACKGROUND.value), Theme.withAlpha(0.14f, Theme.FOREGROUND.value));
|
Theme.getPopupBg(), Theme.withAlpha(0.14f, Theme.FOREGROUND.value));
|
||||||
|
|
||||||
renderScope.drawText(TITLE_SCALE, "PREVIEW", PADDING, PADDING - 2, Theme.FONT.value, Theme.getMutedFg());
|
renderScope.drawText(TITLE_SCALE, "PREVIEW", PADDING, PADDING - 2, Theme.FONT.value, Theme.getMutedFg());
|
||||||
|
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ public class OptionList extends Element {
|
|||||||
@Override
|
@Override
|
||||||
public void render(RenderScope renderScope, ElementContext ctx) {
|
public void render(RenderScope renderScope, ElementContext ctx) {
|
||||||
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
|
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
|
||||||
Theme.withAlpha(0.97f, Theme.BACKGROUND.value), Theme.withAlpha(0.14f, Theme.FOREGROUND.value));
|
Theme.getPopupBg(), Theme.withAlpha(0.14f, Theme.FOREGROUND.value));
|
||||||
|
|
||||||
int visible = Math.min(options.length, MAX_VISIBLE);
|
int visible = Math.min(options.length, MAX_VISIBLE);
|
||||||
hovered = getIndexAt(ctx.mouseX, ctx.mouseY);
|
hovered = getIndexAt(ctx.mouseX, ctx.mouseY);
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ public class Button extends Element {
|
|||||||
*/
|
*/
|
||||||
static void drawSurface(RenderScope renderScope, int width, int height, boolean hovered) {
|
static void drawSurface(RenderScope renderScope, int width, int height, boolean hovered) {
|
||||||
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
|
renderScope.drawRoundedRectangle(0, 0, width, height, Theme.WIDGET_RADIUS.value, 1,
|
||||||
hovered ? Theme.withAlpha(0.9f, Theme.PRIMARY.value) : Theme.getPanelBg(),
|
hovered ? Theme.PRIMARY.value : Theme.getPanelBg(),
|
||||||
Theme.withAlpha(hovered ? 0.25f : 0.1f, Theme.FOREGROUND.value));
|
Theme.withAlpha(hovered ? 0.25f : 0.1f, Theme.FOREGROUND.value));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user