its called padding

- also includes some more changes to theme and colors

src/main/java/com/simibubi/create/foundation/config/ui/BaseConfigScreen.java

@@ -53,7 +53,7 @@ public class BaseConfigScreen extends ConfigScreen {
 		} else {
 			serverConfigWidget.active = false;
 			serverConfigWidget.updateColorsFromState();
-			text3.withElementRenderer((ms, width, height, alpha) -> UIRenderHelper.angledGradient(ms, 0, 0, height / 2, height, width, Theme.i(Theme.Key.BUTTON_DISABLE_1), Theme.i(Theme.Key.BUTTON_DISABLE_2) | 0x40_000000));
+			text3.withElementRenderer((ms, width, height, alpha) -> UIRenderHelper.angledGradient(ms, 0, 0, height / 2, height, width, Theme.i(Theme.Key.BUTTON_DISABLE, true), Theme.i(Theme.Key.BUTTON_DISABLE, false) | 0x40_000000));
 		}
 	}
 }

src/main/java/com/simibubi/create/foundation/config/ui/ConfigScreenList.java

@@ -14,6 +14,7 @@ import com.simibubi.create.foundation.gui.UIRenderHelper;
 
 import net.minecraft.client.MainWindow;
 import net.minecraft.client.Minecraft;
+import net.minecraft.client.gui.FontRenderer;
 import net.minecraft.client.gui.IGuiEventListener;
 import net.minecraft.client.gui.screen.Screen;
 import net.minecraft.client.gui.widget.TextFieldWidget;
@@ -34,6 +35,7 @@ public class ConfigScreenList extends ExtendedList<ConfigScreenList.Entry> {
 		func_244606_c(false);
 		setRenderSelection(false);
 		currentText = null;
+		headerHeight = 3;
 	}
 
 	@Override
@@ -67,12 +69,12 @@ public class ConfigScreenList extends ExtendedList<ConfigScreenList.Entry> {
 
 	@Override
 	public int getRowWidth() {
-		return width - 18;
+		return width - 16;
 	}
 
 	@Override
 	protected int getScrollbarPositionX() {
-		return left + this.width - 5;
+		return left + this.width - 6;
 	}
 
 	public void tick() {
@@ -119,12 +121,6 @@ public class ConfigScreenList extends ExtendedList<ConfigScreenList.Entry> {
 		}
 
 		protected void setEditable(boolean b) {}
-
-		protected boolean isForServer() {
-			if (list == null)
-				return false;
-			return ((ConfigScreenList) list).isForServer;
-		}
 	}
 
 	public static class LabeledEntry extends Entry {
@@ -133,21 +129,30 @@ public class ConfigScreenList extends ExtendedList<ConfigScreenList.Entry> {
 
 		protected TextStencilElement label;
 		protected List<ITextComponent> labelTooltip;
+		protected String unit = null;
 
 		public LabeledEntry(String label) {
 			this.label = new TextStencilElement(Minecraft.getInstance().fontRenderer, label);
-			this.label.withElementRenderer((ms, width, height, alpha) -> UIRenderHelper.angledGradient(ms, 0, 0, height / 2, height, width, Theme.i(Theme.Key.TEXT_ACCENT_1), Theme.i(Theme.Key.TEXT_ACCENT_2)));
+			this.label.withElementRenderer((ms, width, height, alpha) -> UIRenderHelper.angledGradient(ms, 0, 0, height / 2, height, width, Theme.p(Theme.Key.TEXT_ACCENT)));
 			labelTooltip = new ArrayList<>();
 		}
 
 		@Override
 		public void render(MatrixStack ms, int index, int y, int x, int width, int height, int mouseX, int mouseY, boolean p_230432_9_, float partialTicks) {
-			UIRenderHelper.streak(ms, 0, x, y + height / 2, height - 10, width, 0xdd_000000);
+			UIRenderHelper.streak(ms, 0, x, y + height / 2, height - 6, width, 0xdd_000000);
 			IFormattableTextComponent component = label.getComponent();
-			if (Minecraft.getInstance().fontRenderer.getWidth(component) > getLabelWidth(width) - 10) {
+			FontRenderer font = Minecraft.getInstance().fontRenderer;
-				label.withText(Minecraft.getInstance().fontRenderer.trimToWidth(component, getLabelWidth(width) - 15).getString() + "...");
+			if (font.getWidth(component) > getLabelWidth(width) - 10) {
+				label.withText(font.trimToWidth(component, getLabelWidth(width) - 15).getString() + "...");
 			}
+			if (unit != null) {
+				int unitWidth = font.getStringWidth(unit);
+				font.draw(ms, unit, x + getLabelWidth(width) - unitWidth - 5, y + height / 2 + 2, Theme.i(Theme.Key.TEXT_DARKER));
+				label.at(x + 10, y + height / 2 - 10, 0).render(ms);
+			} else {
 				label.at(x + 10, y + height / 2 - 4, 0).render(ms);
+			}
+
 
 			if (mouseX > x && mouseX < x + getLabelWidth(width) && mouseY > y + 5 && mouseY < y + height - 5) {
 				List<ITextComponent> tooltip = getLabelTooltip();
@@ -158,7 +163,7 @@ public class ConfigScreenList extends ExtendedList<ConfigScreenList.Entry> {
 				Screen screen = Minecraft.getInstance().currentScreen;
 				ms.push();
 				ms.translate(0, 0, 400);
-				GuiUtils.drawHoveringText(ms, tooltip, mouseX, mouseY, screen.width, screen.height, 300, Minecraft.getInstance().fontRenderer);
+				GuiUtils.drawHoveringText(ms, tooltip, mouseX, mouseY, screen.width, screen.height, 300, font);
 				ms.pop();
 				GL11.glEnable(GL11.GL_SCISSOR_TEST);
 			}

src/main/java/com/simibubi/create/foundation/config/ui/SubMenuConfigScreen.java

@@ -24,6 +24,7 @@ import com.simibubi.create.foundation.gui.UIRenderHelper;
 import com.simibubi.create.foundation.gui.widgets.BoxWidget;
 import com.simibubi.create.foundation.item.TooltipHelper;
 import com.simibubi.create.foundation.networking.AllPackets;
+import com.simibubi.create.foundation.utility.Couple;
 
 import net.minecraft.client.Minecraft;
 import net.minecraft.client.gui.IGuiEventListener;
@@ -124,6 +125,7 @@ public class SubMenuConfigScreen extends ConfigScreen {
 		int listR = this.width / 2 + listWidth / 2;
 
 		resetAll = new BoxWidget(listR + 10, yCenter - 25, 20, 20)
+				.withPadding(2, 2)
 				.withCallback((x, y) ->
 						new ConfirmationScreen()
 								.at(x, y)
@@ -135,12 +137,12 @@ public class SubMenuConfigScreen extends ConfigScreen {
 								.open(this)
 				);
 
-		resetAll.showingElement(AllIcons.I_CONFIG_RESET.asStencil().withElementRenderer(BoxWidget.gradientFactory.apply(resetAll))
+		resetAll.showingElement(AllIcons.I_CONFIG_RESET.asStencil().withElementRenderer(BoxWidget.gradientFactory.apply(resetAll)));
-				.at(2, 2));
 		resetAll.getToolTip().add(new StringTextComponent("Reset All"));
 		resetAll.getToolTip().addAll(TooltipHelper.cutStringTextComponent("Click here to reset all configs to their default value.", TextFormatting.GRAY, TextFormatting.GRAY));
 
 		saveChanges = new BoxWidget(listL - 30, yCenter - 25, 20, 20)
+				.withPadding(2, 2)
 				.withCallback((x, y) -> {
 					if (changes.isEmpty())
 						return;
@@ -154,12 +156,12 @@ public class SubMenuConfigScreen extends ConfigScreen {
 							})
 							.open(this);
 				});
-		saveChanges.showingElement(AllIcons.I_CONFIG_SAVE.asStencil().withElementRenderer(BoxWidget.gradientFactory.apply(saveChanges))
+		saveChanges.showingElement(AllIcons.I_CONFIG_SAVE.asStencil().withElementRenderer(BoxWidget.gradientFactory.apply(saveChanges)));
-				.at(2, 2));
 		saveChanges.getToolTip().add(new StringTextComponent("Save Changes"));
 		saveChanges.getToolTip().addAll(TooltipHelper.cutStringTextComponent("Click here to save your current changes.", TextFormatting.GRAY, TextFormatting.GRAY));
 
 		discardChanges = new BoxWidget(listL - 30, yCenter + 5, 20, 20)
+				.withPadding(2, 2)
 				.withCallback((x, y) -> {
 					if (changes.isEmpty())
 						return;
@@ -173,15 +175,14 @@ public class SubMenuConfigScreen extends ConfigScreen {
 							})
 							.open(this);
 				});
-		discardChanges.showingElement(AllIcons.I_CONFIG_DISCARD.asStencil().withElementRenderer(BoxWidget.gradientFactory.apply(discardChanges))
+		discardChanges.showingElement(AllIcons.I_CONFIG_DISCARD.asStencil().withElementRenderer(BoxWidget.gradientFactory.apply(discardChanges)));
-				.at(2, 2));
 		discardChanges.getToolTip().add(new StringTextComponent("Discard Changes"));
 		discardChanges.getToolTip().addAll(TooltipHelper.cutStringTextComponent("Click here to discard all the changes you made.", TextFormatting.GRAY, TextFormatting.GRAY));
 
 		goBack = new BoxWidget(listL - 30, yCenter + 65, 20, 20)
+				.withPadding(2, 2)
 				.withCallback(this::attemptBackstep);
-		goBack.showingElement(AllIcons.I_CONFIG_BACK.asStencil().withElementRenderer(BoxWidget.gradientFactory.apply(goBack))
+		goBack.showingElement(AllIcons.I_CONFIG_BACK.asStencil().withElementRenderer(BoxWidget.gradientFactory.apply(goBack)));
-				.at(2, 2));
 		goBack.getToolTip().add(new StringTextComponent("Go Back"));
 
 		widgets.add(resetAll);
@@ -232,28 +233,27 @@ public class SubMenuConfigScreen extends ConfigScreen {
 		list.isForServer = true;
 		boolean canEdit = client != null && client.player != null && client.player.hasPermissionLevel(2);
 
-		Color colRed1 = Theme.c("button_fail_1");
+		Couple<Color> red = Theme.p(Theme.Key.BUTTON_FAIL);
-		Color colRed2 = Theme.c("button_fail_2");
+		Couple<Color> green = Theme.p(Theme.Key.BUTTON_SUCCESS);
-		Color colGreen1 = Theme.c("button_success_1");
-		Color colGreen2 = Theme.c("button_success_2");
 
 		DelegatedStencilElement stencil = new DelegatedStencilElement();
 
 		serverLocked = new BoxWidget(listR + 10, yCenter + 5, 20, 20)
-				.showingElement(stencil.at(2, 2));
+				.withPadding(2, 2)
+				.showingElement(stencil);
 
 		if (!canEdit) {
 			list.children().forEach(e -> e.setEditable(false));
 			resetAll.active = false;
 			stencil.withStencilRenderer((ms, w, h, alpha) -> AllIcons.I_CONFIG_LOCKED.draw(ms, 0, 0));
-			stencil.withElementRenderer((ms, w, h, alpha) -> UIRenderHelper.angledGradient(ms, 90, 8, 0, 16, 16, colRed1.getRGB(), colRed2.getRGB()));
+			stencil.withElementRenderer((ms, w, h, alpha) -> UIRenderHelper.angledGradient(ms, 90, 8, 0, 16, 16, red));
-			serverLocked.withBorderColors(colRed1, colRed2);
+			serverLocked.withBorderColors(red);
 			serverLocked.getToolTip().add(new StringTextComponent("Locked").formatted(TextFormatting.BOLD));
 			serverLocked.getToolTip().addAll(TooltipHelper.cutStringTextComponent("You don't have enough permissions to edit the server config. You can still look at the current values here though.", TextFormatting.GRAY, TextFormatting.GRAY));
 		} else {
 			stencil.withStencilRenderer((ms, w, h, alpha) -> AllIcons.I_CONFIG_UNLOCKED.draw(ms, 0, 0));
-			stencil.withElementRenderer((ms, w, h, alpha) -> UIRenderHelper.angledGradient(ms, 90, 8, 0, 16, 16, colGreen1.getRGB(), colGreen2.getRGB()));
+			stencil.withElementRenderer((ms, w, h, alpha) -> UIRenderHelper.angledGradient(ms, 90, 8, 0, 16, 16, green));
-			serverLocked.withBorderColors(colGreen1, colGreen2);
+			serverLocked.withBorderColors(green);
 			serverLocked.getToolTip().add(new StringTextComponent("Unlocked").formatted(TextFormatting.BOLD));
 			serverLocked.getToolTip().addAll(TooltipHelper.cutStringTextComponent("You have enough permissions to edit the server config. Changes you make here will be synced with the server once you saved them.", TextFormatting.GRAY, TextFormatting.GRAY));
 		}
@@ -266,7 +266,7 @@ public class SubMenuConfigScreen extends ConfigScreen {
 		super.renderWindow(ms, mouseX, mouseY, partialTicks);
 
 		int x = width/2;
-		drawCenteredString(ms, client.fontRenderer, "Editing config: " + type.toString() + "@" + title, x, 15, Theme.i(Theme.Key.TEXT_1));
+		drawCenteredString(ms, client.fontRenderer, "Editing config: " + type.toString() + "@" + title, x, 15, Theme.i(Theme.Key.TEXT));
 
 		list.render(ms, mouseX, mouseY, partialTicks);
 	}

src/main/java/com/simibubi/create/foundation/config/ui/entries/EnumEntry.java

@@ -24,17 +24,15 @@ public class EnumEntry extends ValueEntry<Enum<?>> {
 
 		valueText = new TextStencilElement(Minecraft.getInstance().fontRenderer, "YEP").centered(true, true);
 		valueText.withElementRenderer((ms, width, height, alpha) -> UIRenderHelper.angledGradient(ms, 0, 0, height / 2,
-			height, width, Theme.i(Theme.Key.TEXT_1), Theme.i(Theme.Key.TEXT_2)));
+			height, width, Theme.p(Theme.Key.TEXT)));
 
 		DelegatedStencilElement l = AllIcons.I_CONFIG_PREV.asStencil();
 		cycleLeft = new BoxWidget(0, 0, cycleWidth + 8, 16).showingElement(l)
-//				.rescaleElement(16, 16)
 			.withCallback(() -> cycleValue(-1));
 		l.withElementRenderer(BoxWidget.gradientFactory.apply(cycleLeft));
 
 		DelegatedStencilElement r = AllIcons.I_CONFIG_NEXT.asStencil();
 		cycleRight = new BoxWidget(0, 0, cycleWidth + 8, 16).showingElement(r)
-//				.rescaleElement(16, 16)
 			.withCallback(() -> cycleValue(1));
 		r.at(cycleWidth - 8, 0);
 		r.withElementRenderer(BoxWidget.gradientFactory.apply(cycleRight));

src/main/java/com/simibubi/create/foundation/config/ui/entries/NumberEntry.java

@@ -54,13 +54,13 @@ public abstract class NumberEntry<T extends Number> extends ValueEntry<T> {
 			if (min.doubleValue() > getTypeMin().doubleValue()) {
 				StringTextComponent t = new StringTextComponent(formatBound(min) + " < ");
 				minText = new TextStencilElement(font, t).centered(true, false);
-				minText.withElementRenderer((ms, width, height, alpha) -> UIRenderHelper.angledGradient(ms, 0 ,0, height/2, height, width, Theme.c(Theme.Key.TEXT_1).darker().getRGB(), Theme.c(Theme.Key.TEXT_2).darker().getRGB()));
+				minText.withElementRenderer((ms, width, height, alpha) -> UIRenderHelper.angledGradient(ms, 0 ,0, height/2, height, width, Theme.p(Theme.Key.TEXT_DARKER)));
 				minOffset = font.getWidth(t);
 			}
 			if (max.doubleValue() < getTypeMax().doubleValue()) {
 				StringTextComponent t = new StringTextComponent(" < " + formatBound(max));
 				maxText = new TextStencilElement(font, t).centered(true, false);
-				maxText.withElementRenderer((ms, width, height, alpha) -> UIRenderHelper.angledGradient(ms, 0 ,0, height/2, height, width, Theme.c(Theme.Key.TEXT_1).darker().getRGB(), Theme.c(Theme.Key.TEXT_2).darker().getRGB()));
+				maxText.withElementRenderer((ms, width, height, alpha) -> UIRenderHelper.angledGradient(ms, 0 ,0, height/2, height, width, Theme.p(Theme.Key.TEXT_DARKER)));
 				maxOffset = font.getWidth(t);
 			}
 		} catch (NoSuchFieldException | IllegalAccessException | ClassCastException | NullPointerException ignored) {

src/main/java/com/simibubi/create/foundation/config/ui/entries/SubMenuEntry.java

@@ -17,13 +17,11 @@ public class SubMenuEntry extends ConfigScreenList.LabeledEntry {
 
 	public SubMenuEntry(SubMenuConfigScreen parent, String label, ForgeConfigSpec spec, UnmodifiableConfig config) {
 		super(label);
-		DelegatedStencilElement element = AllIcons.I_CONFIG_OPEN.asStencil();
 
-		button = new BoxWidget()
+		button = new BoxWidget(0, 0, 35, 16)
-				.showingElement(element)
+				.showingElement(AllIcons.I_CONFIG_OPEN.asStencil().at(10, 0))
 				.withCallback(() -> ScreenOpener.open(new SubMenuConfigScreen(parent, label, parent.type, spec, config)));
-		element.withElementRenderer(BoxWidget.gradientFactory.apply(button));
+		button.modifyElement(e -> ((DelegatedStencilElement) e).withElementRenderer(BoxWidget.gradientFactory.apply(button)));
-		element.at(10, 0);
 
 		listeners.add(button);
 	}
@@ -40,7 +38,6 @@ public class SubMenuEntry extends ConfigScreenList.LabeledEntry {
 
 		button.x = x + width - 108;
 		button.y = y + 10;
-		button.setWidth(35);
 		button.setHeight(height - 20);
 		button.render(ms, mouseX, mouseY, partialTicks);
 	}

src/main/java/com/simibubi/create/foundation/config/ui/entries/ValueEntry.java

@@ -32,7 +32,6 @@ public class ValueEntry<T> extends ConfigScreenList.LabeledEntry {
 	protected ForgeConfigSpec.ValueSpec spec;
 	protected BoxWidget resetButton;
 	protected boolean editable = true;
-	protected String unit = null;
 	protected String path;
 
 	public ValueEntry(String label, ForgeConfigSpec.ConfigValue<T> value, ForgeConfigSpec.ValueSpec spec) {
@@ -75,8 +74,6 @@ public class ValueEntry<T> extends ConfigScreenList.LabeledEntry {
 			if (u.equals("in Stress Units"))
 				u = "in SU";
 			unit = u;
-			commentLines = ArrayUtils.remove(commentLines, i);
-			break;
 		}
 		//add comment to tooltip
 		labelTooltip.addAll(Arrays.stream(commentLines).map(StringTextComponent::new).collect(Collectors.toList()));

src/main/java/com/simibubi/create/foundation/gui/BoxElement.java

@@ -7,6 +7,7 @@ import org.lwjgl.opengl.GL11;
 import com.mojang.blaze3d.matrix.MatrixStack;
 import com.mojang.blaze3d.systems.RenderSystem;
 import com.simibubi.create.foundation.utility.ColorHelper;
+import com.simibubi.create.foundation.utility.Couple;
 
 import net.minecraft.client.renderer.BufferBuilder;
 import net.minecraft.client.renderer.Tessellator;
@@ -41,6 +42,13 @@ public class BoxElement extends RenderElement {
 		return flatBorder(new Color(color, true));
 	}
 
+	public <T extends BoxElement> T gradientBorder(Couple<Color> colors) {
+		this.borderTop = colors.getFirst();
+		this.borderBot = colors.getSecond();
+		//noinspection unchecked
+		return (T) this;
+	}
+
 	public <T extends BoxElement> T gradientBorder(Color top, Color bot) {
 		this.borderTop = top;
 		this.borderBot = bot;

src/main/java/com/simibubi/create/foundation/gui/ConfirmationScreen.java

@@ -6,14 +6,14 @@ import java.util.function.Consumer;
 
 import javax.annotation.Nonnull;
 
-import org.lwjgl.opengl.GL11;
+import org.lwjgl.opengl.GL30;
 
 import com.mojang.blaze3d.matrix.MatrixStack;
-import com.mojang.blaze3d.systems.RenderSystem;
 import com.simibubi.create.foundation.gui.widgets.BoxWidget;
 
 import net.minecraft.client.Minecraft;
 import net.minecraft.client.gui.screen.Screen;
+import net.minecraft.client.shader.Framebuffer;
 import net.minecraft.util.text.ITextProperties;
 import net.minecraft.util.text.Style;
 
@@ -126,7 +126,7 @@ public class ConfirmationScreen extends AbstractSimiScreen {
 		widgets.add(cancel);
 
 		textBackground = new BoxElement()
-				.gradientBorder(Theme.c(Theme.Key.BUTTON_DISABLE_1), Theme.c(Theme.Key.BUTTON_DISABLE_2))
+				.gradientBorder(Theme.p(Theme.Key.BUTTON_DISABLE))
 				.withBounds(textWidth, textHeight)
 				.at(x, y);
 
@@ -178,14 +178,13 @@ public class ConfirmationScreen extends AbstractSimiScreen {
 		UIRenderHelper.framebuffer.bindFramebuffer(true);
 		source.render(ms, mouseX, mouseY, 10);
 		UIRenderHelper.framebuffer.unbindFramebuffer();
-		Minecraft.getInstance().getFramebuffer().bindFramebuffer(true);
+		Framebuffer mainBuffer = Minecraft.getInstance().getFramebuffer();
 		ms.pop();
 
-		//RenderSystem.disableAlphaTest();
+		GL30.glBindFramebuffer(GL30.GL_READ_FRAMEBUFFER, UIRenderHelper.framebuffer.framebufferObject);
-		RenderSystem.disableBlend();
+		GL30.glBindFramebuffer(GL30.GL_DRAW_FRAMEBUFFER, mainBuffer.framebufferObject);
-		UIRenderHelper.drawFramebuffer(1);
+		GL30.glBlitFramebuffer(0, 0, mainBuffer.framebufferWidth, mainBuffer.framebufferHeight, 0, 0,  mainBuffer.framebufferWidth, mainBuffer.framebufferHeight, GL30.GL_COLOR_BUFFER_BIT, GL30.GL_LINEAR);
-		RenderSystem.enableBlend();
+		mainBuffer.bindFramebuffer(true);
-		RenderSystem.blendFunc(GL11.GL_SRC_ALPHA, GL11.GL_ONE_MINUS_SRC_ALPHA);
 
 		this.fillGradient(ms, 0, 0, this.width, this.height, 0x70101010, 0x80101010);
 		//RenderSystem.enableAlphaTest();

src/main/java/com/simibubi/create/foundation/gui/Theme.java

@@ -7,6 +7,8 @@ import java.util.Map;
 import javax.annotation.Nonnull;
 import javax.annotation.Nullable;
 
+import com.simibubi.create.foundation.utility.Couple;
+
 public class Theme {
 
 	private static final Theme base = new Theme();
@@ -16,36 +18,39 @@ public class Theme {
 		custom = theme;
 	}
 
-	@Nonnull public static Color c(String key) {
+	private static ColorHolder resolve(String key) {
-		Color r = null;
+		ColorHolder h = null;
 
 		if (custom != null)
-			r = custom.get(key);
+			h = custom.get(key);
 
-		if (r == null)
+		if (h == null)
-			r = base.get(key);
+			h = base.get(key);
 
-		if (r == null)
+		if (h == null)
-			r = Color.BLACK;
+			h = ColorHolder.missing;
 
-		return r;
+		return h;
 	}
 
-	@Nonnull public static Color c(Key key) {
+	@Nonnull public static Couple<Color> p(@Nonnull Key key) {return p(key.get());}
-		return c(key.get());
+	@Nonnull public static Couple<Color> p(String key) {return resolve(key).asPair();}
-	}
 
-	public static int i(String key) {
+	@Nonnull public static Color c(@Nonnull Key key, boolean first) {return c(key.get(), first);}
-		return c(key).getRGB();
+	@Nonnull public static Color c(String key, boolean first) {return p(key).get(first);}
-	}
 
-	public static int i(Key key) {
+	public static int i(@Nonnull Key key, boolean first) {return i(key.get(), first);}
-		return i(key.get());
+	public static int i(String key, boolean first) {return p(key).get(first).getRGB();}
-	}
+
+	@Nonnull public static Color c(@Nonnull Key key) {return c(key.get());}
+	@Nonnull public static Color c(String key) {return resolve(key).get();}
+
+	public static int i(@Nonnull Key key) {return i(key.get());}
+	public static int i(String key) {return resolve(key).get().getRGB();}
 
 	//-----------//
 
-	protected final Map<String, Color> colors;
+	protected final Map<String, ColorHolder> colors;
 
 	protected Theme() {
 		colors = new HashMap<>();
@@ -53,77 +58,105 @@ public class Theme {
 	}
 
 	protected void init() {
-		put(Key.BUTTON_IDLE_1, new Color(0x60_c0c0ff, true));
+		put(Key.BUTTON_IDLE, new Color(0x60_c0c0ff, true), new Color(0x30_c0c0ff, true));
-		put(Key.BUTTON_IDLE_2, new Color(0x30_c0c0ff, true));
+		put(Key.BUTTON_HOVER, new Color(0xa0_c0c0ff, true), new Color(0x50_c0c0ff, true));
-		put(Key.BUTTON_HOVER_1, new Color(0xa0_c0c0ff, true));
+		put(Key.BUTTON_CLICK, new Color(0xff_4b4bff), new Color(0xff_3b3bdd));
-		put(Key.BUTTON_HOVER_2, new Color(0x50_c0c0ff, true));
+		put(Key.BUTTON_DISABLE, new Color(0x80_909090, true), new Color(0x20_909090, true));
-		put(Key.BUTTON_CLICK_1, new Color(0xff_4b4bff));
+		put(Key.BUTTON_SUCCESS, new Color(0xcc_88f788, true), new Color(0xcc_20cc20, true));
-		put(Key.BUTTON_CLICK_2, new Color(0xff_3b3bdd));
+		put(Key.BUTTON_FAIL, new Color(0xcc_f78888, true), new Color(0xcc_cc2020, true));
-		put(Key.BUTTON_DISABLE_1, new Color(0x80_909090, true));
+		put(Key.TEXT, new Color(0xff_eeeeee), new Color(0xff_a3a3a3));
-		put(Key.BUTTON_DISABLE_2, new Color(0x20_909090, true));
+		put(Key.TEXT_DARKER, new Color(0xff_a3a3a3), new Color(0xff_808080));
-		put("button_success_1", new Color(0xcc_88f788, true));
+		put(Key.TEXT_ACCENT, new Color(0xff_7b7ba3), new Color(0xff_616192));
-		put("button_success_2", new Color(0xcc_20cc20, true));
-		put("button_fail_1", new Color(0xcc_f78888, true));
-		put("button_fail_2", new Color(0xcc_cc2020, true));
-		put(Key.TEXT_1, new Color(0xff_eeeeee));
-		put(Key.TEXT_2, new Color(0xff_a3a3a3));
-		put(Key.TEXT_ACCENT_1, new Color(0xff_7b7ba3));
-		put(Key.TEXT_ACCENT_2, new Color(0xff_616192));
 		//values from PonderUI & PonderButton
 		put(Key.PONDER_BACKGROUND, new Color(0xdd_000000, true));
-		put(Key.PONDER_IDLE_1, new Color(0x40ffeedd, true));
+		put(Key.PONDER_IDLE, new Color(0x40ffeedd, true), new Color(0x20ffeedd, true));
-		put(Key.PONDER_IDLE_2, new Color(0x20ffeedd, true));
+		put(Key.PONDER_HOVER, new Color(0x70ffffff, true), new Color(0x30ffffff, true));
-		put(Key.PONDER_HOVER_1, new Color(0x70ffffff, true));
+		put(Key.PONDER_HIGHLIGHT, new Color(0xf0ffeedd, true), new Color(0x60ffeedd, true));
-		put(Key.PONDER_HOVER_2, new Color(0x30ffffff, true));
+		put(Key.TEXT_WINDOW_BORDER, new Color(0x607a6000, true), new Color(0x207a6000, true));
-		put(Key.PONDER_HIGHLIGHT_1, new Color(0xf0ffeedd, true));
+
-		put(Key.PONDER_HIGHLIGHT_2, new Color(0x60ffeedd, true));
 	}
 
 	protected void put(String key, Color c) {
-		colors.put(key, c);
+		colors.put(key, ColorHolder.single(c));
 	}
 
 	protected void put(Key key, Color c) {
 		put(key.get(), c);
 	}
 
-	@Nullable public Color get(String key) {
+	protected void put(String key, Color c1, Color c2) {
+		colors.put(key, ColorHolder.pair(c1, c2));
+	}
+
+	protected void put(Key key, Color c1, Color c2) {
+		put(key.get(), c1 , c2);
+	}
+
+	@Nullable protected ColorHolder get(String key) {
 		return colors.get(key);
 	}
 
-	public enum Key {
+	public static class Key {
-		BUTTON_IDLE_1("button_idle_1"),
-		BUTTON_IDLE_2("button_idle_2"),
-		BUTTON_HOVER_1("button_hover_1"),
-		BUTTON_HOVER_2("button_hover_2"),
-		BUTTON_CLICK_1("button_click_1"),
-		BUTTON_CLICK_2("button_click_2"),
-		BUTTON_DISABLE_1("button_disable_1"),
-		BUTTON_DISABLE_2("button_disable_2"),
 
-		TEXT_1("text_1"),
+		public static Key BUTTON_IDLE = new Key();
-		TEXT_2("text_2"),
+		public static Key BUTTON_HOVER = new Key();
-		TEXT_ACCENT_1("text_accent_1"),
+		public static Key BUTTON_CLICK = new Key();
-		TEXT_ACCENT_2("text_accent_2"),
+		public static Key BUTTON_DISABLE = new Key();
+		public static Key BUTTON_SUCCESS = new Key();
+		public static Key BUTTON_FAIL = new Key();
 
-		PONDER_BACKGROUND("ponder_background"),
+		public static Key TEXT = new Key();
-		PONDER_IDLE_1("ponder_idle_1"),
+		public static Key TEXT_DARKER = new Key();
-		PONDER_IDLE_2("ponder_idle_2"),
+		public static Key TEXT_ACCENT = new Key();
-		PONDER_HOVER_1("ponder_hover_1"),
-		PONDER_HOVER_2("ponder_hover_2"),
-		PONDER_HIGHLIGHT_1("ponder_highlight_1"),
-		PONDER_HIGHLIGHT_2("ponder_highlight_2"),
 
-		;
+		public static Key PONDER_BACKGROUND = new Key();
+		public static Key PONDER_IDLE = new Key();
+		public static Key PONDER_HOVER = new Key();
+		public static Key PONDER_HIGHLIGHT = new Key();
+		public static Key TEXT_WINDOW_BORDER = new Key();
 
-		String s;
+		private static int index = 0;
 
-		Key(String s) {
+		private final String s;
+
+		protected Key() {
+			this.s = "_" + index++;
+		}
+
+		protected Key(String s) {
 			this.s = s;
 		}
 
-		String get() {
+		public String get() {
 			return s;
 		}
 	}
+
+	private static class ColorHolder {
+
+		private static final ColorHolder missing = ColorHolder.single(Color.BLACK);
+
+		private Couple<Color> colors;
+
+		private static ColorHolder single(Color c) {
+			ColorHolder h = new ColorHolder();
+			h.colors = Couple.create(c, c);
+			return h;
+		}
+
+		private static ColorHolder pair(Color first, Color second) {
+			ColorHolder h = new ColorHolder();
+			h.colors = Couple.create(first, second);
+			return h;
+		}
+
+		private Color get() {
+			return colors.getFirst();
+		}
+
+		private Couple<Color> asPair() {
+			return colors;
+		}
+
+	}
 }

src/main/java/com/simibubi/create/foundation/gui/UIRenderHelper.java

@@ -1,5 +1,7 @@
 package com.simibubi.create.foundation.gui;
 
+import java.awt.Color;
+
 import javax.annotation.Nonnull;
 
 import org.lwjgl.opengl.GL11;
@@ -9,6 +11,7 @@ import org.lwjgl.opengl.KHRDebug;
 import com.mojang.blaze3d.matrix.MatrixStack;
 import com.mojang.blaze3d.systems.RenderSystem;
 import com.simibubi.create.foundation.utility.ColorHelper;
+import com.simibubi.create.foundation.utility.Couple;
 
 import net.minecraft.client.MainWindow;
 import net.minecraft.client.Minecraft;
@@ -106,6 +109,18 @@ public class UIRenderHelper {
 		GuiUtils.drawGradientRect(model, 0, -width, (int) (split2 * height), width, height, c3, c4);
 	}
 
+	/**
+	 * @see #angledGradient(MatrixStack, float, int, int, int, int, int, int, int)
+	 */
+	public static void angledGradient(@Nonnull MatrixStack ms, float angle, int x, int y, int breadth, int length, Couple<Color> c) {
+		angledGradient(ms, angle, x, y, 0, breadth, length, c);
+	}
+	/**
+	 * @see #angledGradient(MatrixStack, float, int, int, int, int, int, int, int)
+	 */
+	public static void angledGradient(@Nonnull MatrixStack ms, float angle, int x, int y, int z, int breadth, int length, Couple<Color> c) {
+		angledGradient(ms, angle, x, y, z, breadth, length, c.getFirst().getRGB(), c.getSecond().getRGB());
+	}
 	/**
 	 * @see #angledGradient(MatrixStack, float, int, int, int, int, int, int, int)
 	 */

src/main/java/com/simibubi/create/foundation/gui/widgets/BoxWidget.java

@@ -11,6 +11,7 @@ import com.simibubi.create.foundation.gui.DelegatedStencilElement;
 import com.simibubi.create.foundation.gui.Theme;
 import com.simibubi.create.foundation.gui.UIRenderHelper;
 import com.simibubi.create.foundation.utility.ColorHelper;
+import com.simibubi.create.foundation.utility.Couple;
 import com.simibubi.create.foundation.utility.animation.LerpedFloat;
 
 public class BoxWidget extends ElementWidget {
@@ -24,7 +25,7 @@ public class BoxWidget extends ElementWidget {
 	protected boolean animateColors = true;
 	protected LerpedFloat colorAnimation = LerpedFloat.linear();
 	protected Color gradientColor1, gradientColor2;
-	private Color colorTarget1 = Theme.c(Theme.Key.BUTTON_IDLE_1), colorTarget2 = Theme.c(Theme.Key.BUTTON_IDLE_2);
+	private Color colorTarget1 = Theme.c(Theme.Key.BUTTON_IDLE, true), colorTarget2 = Theme.c(Theme.Key.BUTTON_IDLE, false);
 	private Color previousColor1, previousColor2;
 
 	public BoxWidget() {
@@ -51,6 +52,14 @@ public class BoxWidget extends ElementWidget {
 		return (T) this;
 	}
 
+	public <T extends BoxWidget> T withBorderColors(Couple<Color> colors) {
+		this.customBorderTop = colors.getFirst();
+		this.customBorderBot = colors.getSecond();
+		updateColorsFromState();
+		//noinspection unchecked
+		return (T) this;
+	}
+
 	public <T extends BoxWidget> T withBorderColors(Color top, Color bot) {
 		this.customBorderTop = top;
 		this.customBorderBot = bot;
@@ -75,8 +84,8 @@ public class BoxWidget extends ElementWidget {
 	public void onClick(double x, double y) {
 		super.onClick(x, y);
 
-		gradientColor1 = Theme.c(Theme.Key.BUTTON_CLICK_1);
+		gradientColor1 = Theme.c(Theme.Key.BUTTON_CLICK, true);
-		gradientColor2 = Theme.c(Theme.Key.BUTTON_CLICK_2);
+		gradientColor2 = Theme.c(Theme.Key.BUTTON_CLICK, true);
 		startGradientAnimation(getColorForState(true), getColorForState(false), true, 0.15);
 	}
 
@@ -171,18 +180,18 @@ public class BoxWidget extends ElementWidget {
 
 	private Color getColorForState(boolean first) {
 		if (!active)
-			return first ? Theme.c(Theme.Key.BUTTON_DISABLE_1) : Theme.c(Theme.Key.BUTTON_DISABLE_2);
+			return Theme.p(Theme.Key.BUTTON_DISABLE).get(first);
 
 		if (hovered) {
 			if (first)
-				return customBorderTop != null ? customBorderTop.darker() : Theme.c(Theme.Key.BUTTON_HOVER_1);
+				return customBorderTop != null ? customBorderTop.darker() : Theme.c(Theme.Key.BUTTON_HOVER, true);
 			else
-				return customBorderBot != null ? customBorderBot.darker() : Theme.c(Theme.Key.BUTTON_HOVER_2);
+				return customBorderBot != null ? customBorderBot.darker() : Theme.c(Theme.Key.BUTTON_HOVER, false);
 		}
 
 		if (first)
-			return customBorderTop != null ? customBorderTop : Theme.c(Theme.Key.BUTTON_IDLE_1);
+			return customBorderTop != null ? customBorderTop : Theme.c(Theme.Key.BUTTON_IDLE, true);
 		else
-			return customBorderBot != null ? customBorderBot : Theme.c(Theme.Key.BUTTON_IDLE_2);
+			return customBorderBot != null ? customBorderBot : Theme.c(Theme.Key.BUTTON_IDLE, false);
 	}
 }

src/main/java/com/simibubi/create/foundation/gui/widgets/ElementWidget.java

@@ -23,6 +23,9 @@ public class ElementWidget extends AbstractSimiWidget {
 	protected float rescaleSizeX;
 	protected float rescaleSizeY;
 
+	protected float paddingX = 0;
+	protected float paddingY = 0;
+
 	public ElementWidget(int x, int y) {
 		super(x, y);
 	}
@@ -55,6 +58,13 @@ public class ElementWidget extends AbstractSimiWidget {
 		return (T) this;
 	}
 
+	public <T extends ElementWidget> T withPadding(float paddingX, float paddingY) {
+		this.paddingX = paddingX;
+		this.paddingY = paddingY;
+		//noinspection unchecked
+		return (T) this;
+	}
+
 	public <T extends ElementWidget> T enableFade(int fadeModifierX, int fadeModifierY) {
 		this.fade.startWithValue(0);
 		this.usesFade = true;
@@ -115,19 +125,16 @@ public class ElementWidget extends AbstractSimiWidget {
 	@Override
 	public void renderButton(@Nonnull MatrixStack ms, int mouseX, int mouseY, float partialTicks) {
 		ms.push();
-		ms.translate(x, y, z);
+		ms.translate(x + paddingX, y + paddingY, z);
-		//element x/y get treated as a border around the element
+		float innerWidth = width - 2 * paddingX;
-		float eX = element.getX();
+		float innerHeight = height - 2 * paddingY;
-		float eY = element.getY();
-		float eWidth = width;// - 2 * eX;
-		float eHeight = height;// - 2 * eY;
 		if (rescaleElement) {
-			float xScale = eWidth / rescaleSizeX;
+			float xScale = innerWidth / rescaleSizeX;
-			float yScale = eHeight / rescaleSizeY;
+			float yScale = innerHeight / rescaleSizeY;
 			ms.scale(xScale, yScale, 1);
-			element.at(eX / xScale, eY / yScale);
+			element.at(element.getX() / xScale, element.getY() / yScale);
 		}
-		element.withBounds((int) eWidth, (int) eHeight).render(ms);
+		element.withBounds((int) innerWidth, (int) innerHeight).render(ms);
 		ms.pop();
 	}
 

src/main/java/com/simibubi/create/foundation/ponder/NavigatableSimiScreen.java

@@ -99,7 +99,7 @@ public abstract class NavigatableSimiScreen extends AbstractSimiScreen {
 		ms.push();
 		ms.translate(0, 0, 500);
 		if (backTrack.isHovered()) {
-			textRenderer.draw(ms, Lang.translate(THINK_BACK), 15, height - 16, Theme.i(Theme.Key.TEXT_2));
+			textRenderer.draw(ms, Lang.translate(THINK_BACK), 15, height - 16, Theme.i(Theme.Key.TEXT_DARKER));
 			if (MathHelper.epsilonEquals(arrowAnimation.getValue(), arrowAnimation.getChaseTarget())) {
 				arrowAnimation.setValue(1);
 				arrowAnimation.setValue(1);//called twice to also set the previous value to 1

src/main/java/com/simibubi/create/foundation/ponder/PonderProgressBar.java

@@ -120,7 +120,7 @@ public class PonderProgressBar extends AbstractSimiWidget {
 
 		new BoxElement()
 				.withBackground(0xff000000)
-				.gradientBorder(Theme.i(Theme.Key.PONDER_IDLE_1), Theme.i(Theme.Key.PONDER_IDLE_2))
+				.gradientBorder(Theme.p(Theme.Key.PONDER_IDLE))
 				.at(x, y, 100)
 				.withBounds(width, height)
 				.render(ms);

src/main/java/com/simibubi/create/foundation/ponder/PonderUI.java

@@ -559,7 +559,7 @@ public class PonderUI extends NavigatableSimiScreen {
 			//renderBox(ms, 21, 21, 30, 30, false);
 			new BoxElement()
 					.withBackground(0xff000000)
-					.gradientBorder(Theme.i(Theme.Key.PONDER_IDLE_1), Theme.i(Theme.Key.PONDER_IDLE_2))
+					.gradientBorder(Theme.p(Theme.Key.PONDER_IDLE))
 					.at(21, 21, 100)
 					.withBounds(30, 30)
 					.render(ms);
@@ -863,10 +863,6 @@ public class PonderUI extends NavigatableSimiScreen {
 		return hovered;
 	}
 
-	/*public static void renderBox(MatrixStack ms, int x, int y, int w, int h, boolean highlighted) {
-		renderBox(ms, x, y, w, h, 0xff000000, highlighted ? 0xf0ffeedd : 0x40ffeedd, highlighted ? 0x60ffeedd : 0x20ffeedd);
-	}*/
-
 	public static void renderSpeechBox(MatrixStack ms, int x, int y, int w, int h, boolean highlighted, Pointing pointing,
 		boolean returnWithLocalTransform) {
 		if (!returnWithLocalTransform)
@@ -914,17 +910,12 @@ public class PonderUI extends NavigatableSimiScreen {
 		}
 
 		//renderBox(ms, boxX, boxY, w, h, highlighted);
-		BoxElement box = new BoxElement()
+		new BoxElement()
 				.withBackground(0xff000000)
+				.gradientBorder(Theme.p(highlighted ? Theme.Key.PONDER_HIGHLIGHT : Theme.Key.PONDER_IDLE))
 				.at(boxX, boxY, 100)
-				.withBounds(w, h);
+				.withBounds(w, h)
-
+				.render(ms);
-		if (highlighted)
-			box.gradientBorder(Theme.i(Theme.Key.PONDER_IDLE_1), Theme.i(Theme.Key.PONDER_IDLE_2));
-		else
-			box.gradientBorder(Theme.i(Theme.Key.PONDER_HIGHLIGHT_1), Theme.i(Theme.Key.PONDER_HIGHLIGHT_2));
-
-		box.render(ms);
 
 		ms.push();
 		AllGuiTextures toRender = highlighted ? AllGuiTextures.SPEECH_TOOLTIP_HIGHLIGHT : AllGuiTextures.SPEECH_TOOLTIP;

src/main/java/com/simibubi/create/foundation/ponder/content/PonderTagScreen.java

@@ -197,7 +197,7 @@ public class PonderTagScreen extends NavigatableSimiScreen {
 		//PonderUI.renderBox(ms, 21, 21, 30, 30, false);
 		new BoxElement()
 				.withBackground(0xff000000)
-				.gradientBorder(Theme.i(Theme.Key.PONDER_IDLE_1), Theme.i(Theme.Key.PONDER_IDLE_2))
+				.gradientBorder(Theme.p(Theme.Key.PONDER_IDLE))
 				.at(21, 21, 100)
 				.withBounds(30, 30)
 				.render(ms);
@@ -229,7 +229,7 @@ public class PonderTagScreen extends NavigatableSimiScreen {
 		//PonderUI.renderBox(ms, x - 3, y - 3, w + 6, h + 6, false);
 		new BoxElement()
 				.withBackground(0xff000000)
-				.gradientBorder(Theme.i(Theme.Key.PONDER_IDLE_1), Theme.i(Theme.Key.PONDER_IDLE_2))
+				.gradientBorder(Theme.p(Theme.Key.PONDER_IDLE))
 				.at(x - 3, y - 3, 90)
 				.withBounds(w + 6, h + 6)
 				.render(ms);
@@ -254,7 +254,7 @@ public class PonderTagScreen extends NavigatableSimiScreen {
 		//PonderUI.renderBox(ms, (sWidth - stringWidth) / 2 - 5, itemArea.getY() - 21, stringWidth + 10, 10, false);
 		new BoxElement()
 				.withBackground(0xff000000)
-				.gradientBorder(Theme.i(Theme.Key.PONDER_IDLE_1), Theme.i(Theme.Key.PONDER_IDLE_2))
+				.gradientBorder(Theme.p(Theme.Key.PONDER_IDLE))
 				.at((sWidth - stringWidth) / 2f - 5, itemArea.getY() - 21, 100)
 				.withBounds(stringWidth + 10, 10)
 				.render(ms);

src/main/java/com/simibubi/create/foundation/ponder/elements/TextWindowElement.java

@@ -5,6 +5,7 @@ import java.util.function.Supplier;
 
 import com.mojang.blaze3d.matrix.MatrixStack;
 import com.simibubi.create.foundation.gui.BoxElement;
+import com.simibubi.create.foundation.gui.Theme;
 import com.simibubi.create.foundation.ponder.PonderLocalization;
 import com.simibubi.create.foundation.ponder.PonderScene;
 import com.simibubi.create.foundation.ponder.PonderUI;
@@ -113,7 +114,7 @@ public class TextWindowElement extends AnimatedOverlayElement {
 
 		new BoxElement()
 				.withBackground(0xaa000000)
-				.gradientBorder(0x30eebb00, 0x10eebb00)
+				.gradientBorder(Theme.p(Theme.Key.TEXT_WINDOW_BORDER))
 				.at(targetX - 10, 3, 100)
 				.withBounds(boxWidth, boxHeight - 1)
 				.render(ms);

src/main/java/com/simibubi/create/foundation/ponder/ui/PonderButton.java

@@ -32,6 +32,8 @@ public class PonderButton extends BoxWidget {
 	public PonderButton(int x, int y, int width, int height) {
 		super(x, y, width, height);
 		z = 400;
+		paddingX = 2;
+		paddingY = 2;
 	}
 
 	public <T extends PonderButton> T withShortcut(KeyBinding key) {
@@ -44,12 +46,12 @@ public class PonderButton extends BoxWidget {
 		this.item = item;
 		return super.showingElement(GuiGameElement.of(item)
 				.scale(1.5f)
-				.at(-2, -2));
+				.at(-4, -4));
 	}
 
 	@Override
 	public <T extends ElementWidget> T showingElement(RenderElement element) {
-		return super.showingElement(element.at(2, 2));
+		return super.showingElement(element);
 	}
 
 	public void flash() {
@@ -93,7 +95,7 @@ public class PonderButton extends BoxWidget {
 
 		if (shortcut != null) {
 			ms.translate(0, 0, z+50);
-			drawCenteredText(ms, Minecraft.getInstance().fontRenderer, shortcut.getBoundKeyLocalizedText(), x + width / 2 + 8, y + height - 6, ColorHelper.applyAlpha(Theme.i(Theme.Key.TEXT_2), fadeValue));
+			drawCenteredText(ms, Minecraft.getInstance().fontRenderer, shortcut.getBoundKeyLocalizedText(), x + width / 2 + 8, y + height - 6, ColorHelper.applyAlpha(Theme.i(Theme.Key.TEXT_DARKER), fadeValue));
 		}
 	}