Refactor and expand style tokens for rows and badges.
This commit separates badge and row styles into distinct tokens, improving modularity and theme customization. It also introduces new tokens for section headers and replaces hardcoded values with more consistent styling logic. These changes enhance maintainability and visual consistency across the application.
This commit is contained in:
@@ -48,9 +48,9 @@ export const styles = {
|
||||
fontWeight: 1000,
|
||||
fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
|
||||
letterSpacing: 1.0,
|
||||
color: stylesTokens.textGold,
|
||||
background: "linear-gradient(180deg, rgba(32,32,36,0.92), rgba(14,14,16,0.92))",
|
||||
borderBottom: `1px solid ${stylesTokens.goldLine}`,
|
||||
color: stylesTokens.sectionHeaderText,
|
||||
background: `linear-gradient(180deg, ${stylesTokens.sectionHeaderBgTop}, ${stylesTokens.sectionHeaderBgBottom})`,
|
||||
borderBottom: `1px solid ${stylesTokens.sectionHeaderBorder}`,
|
||||
textTransform: "uppercase",
|
||||
textShadow: "0 1px 0 rgba(0,0,0,0.6)",
|
||||
},
|
||||
|
||||
@@ -10,30 +10,41 @@ export const stylesTokens = {
|
||||
|
||||
goldLine: "var(--hp-goldLine)",
|
||||
|
||||
// ===== NEW: Row/Table colors so themes affect tables =====
|
||||
// ===== Section Header (NEW) =====
|
||||
sectionHeaderBgTop: "var(--hp-sectionHeaderBgTop)",
|
||||
sectionHeaderBgBottom: "var(--hp-sectionHeaderBgBottom)",
|
||||
sectionHeaderText: "var(--hp-sectionHeaderText)",
|
||||
sectionHeaderBorder: "var(--hp-sectionHeaderBorder)",
|
||||
|
||||
// ===== Row/Table colors =====
|
||||
rowDefaultBg: "var(--hp-rowDefaultBg)",
|
||||
|
||||
rowOkBg: "var(--hp-rowOkBg)",
|
||||
rowOkBorder: "var(--hp-rowOkBorder)",
|
||||
rowOkText: "var(--hp-rowOkText)",
|
||||
badgeOkBg: "var(--hp-badgeOkBg)",
|
||||
badgeOkText: "var(--hp-badgeOkText)",
|
||||
|
||||
rowNoBg: "var(--hp-rowNoBg)",
|
||||
rowNoBorder: "var(--hp-rowNoBorder)",
|
||||
rowNoText: "var(--hp-rowNoText)",
|
||||
badgeNoBg: "var(--hp-badgeNoBg)",
|
||||
badgeNoText: "var(--hp-badgeNoText)",
|
||||
|
||||
rowMaybeBg: "var(--hp-rowMaybeBg)",
|
||||
rowMaybeBorder: "var(--hp-rowMaybeBorder)",
|
||||
rowMaybeText: "var(--hp-rowMaybeText)",
|
||||
badgeMaybeBg: "var(--hp-badgeMaybeBg)",
|
||||
badgeMaybeText: "var(--hp-badgeMaybeText)",
|
||||
|
||||
rowEmptyBg: "var(--hp-rowEmptyBg)",
|
||||
rowEmptyBorder: "var(--hp-rowEmptyBorder)",
|
||||
rowEmptyText: "var(--hp-rowEmptyText)",
|
||||
|
||||
// ===== Badge colors (NEW: getrennt von row*) =====
|
||||
badgeOkBg: "var(--hp-badgeOkBg)",
|
||||
badgeOkText: "var(--hp-badgeOkText)",
|
||||
|
||||
badgeNoBg: "var(--hp-badgeNoBg)",
|
||||
badgeNoText: "var(--hp-badgeNoText)",
|
||||
|
||||
badgeMaybeBg: "var(--hp-badgeMaybeBg)",
|
||||
badgeMaybeText: "var(--hp-badgeMaybeText)",
|
||||
|
||||
badgeEmptyBg: "var(--hp-badgeEmptyBg)",
|
||||
badgeEmptyText: "var(--hp-badgeEmptyText)",
|
||||
};
|
||||
|
||||
@@ -20,10 +20,10 @@ export const THEMES = {
|
||||
badgeOkBg: "rgba(0,190,80,0.18)",
|
||||
badgeOkText: "#baf3c9",
|
||||
|
||||
rowNoBg: "rgba(255,35,35,0.16)",
|
||||
rowNoBorder: "rgba(255,35,35,0.55)",
|
||||
rowNoBg: "rgba(255,35,35,0.18)",
|
||||
rowNoBorder: "rgba(255,35,35,0.65)",
|
||||
rowNoText: "#ffb3b3",
|
||||
badgeNoBg: "rgba(255,35,35,0.18)",
|
||||
badgeNoBg: "rgba(255,35,35,0.20)",
|
||||
badgeNoText: "#ffb3b3",
|
||||
|
||||
rowMaybeBg: "rgba(140,140,140,0.12)",
|
||||
@@ -60,17 +60,17 @@ export const THEMES = {
|
||||
badgeOkBg: "rgba(255, 184, 107, 0.20)",
|
||||
badgeOkText: "rgba(255, 235, 210, 0.95)",
|
||||
|
||||
rowNoBg: "rgba(200, 40, 40, 0.26)",
|
||||
rowNoBorder: "rgba(200, 40, 40, 0.70)",
|
||||
rowNoBg: "rgba(255,35,35,0.18)",
|
||||
rowNoBorder: "rgba(255,35,35,0.65)",
|
||||
rowNoText: "#ffb3b3",
|
||||
badgeNoBg: "rgba(200, 40, 40, 0.22)",
|
||||
badgeNoBg: "rgba(255,35,35,0.20)",
|
||||
badgeNoText: "#ffb3b3",
|
||||
|
||||
rowMaybeBg: "rgba(255, 210, 140, 0.14)",
|
||||
rowMaybeBorder: "rgba(255, 210, 140, 0.30)",
|
||||
rowMaybeText: "rgba(255, 235, 210, 0.88)",
|
||||
badgeMaybeBg: "rgba(255, 210, 140, 0.16)",
|
||||
badgeMaybeText: "rgba(255, 235, 210, 0.88)",
|
||||
rowMaybeBg: "rgba(140,140,140,0.12)",
|
||||
rowMaybeBorder: "rgba(233,216,166,0.22)",
|
||||
rowMaybeText: "rgba(233,216,166,0.85)",
|
||||
badgeMaybeBg: "rgba(140,140,140,0.14)",
|
||||
badgeMaybeText: "rgba(233,216,166,0.85)",
|
||||
|
||||
rowEmptyBg: "rgba(255,255,255,0.06)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
@@ -100,17 +100,17 @@ export const THEMES = {
|
||||
badgeOkBg: "rgba(124, 255, 182, 0.18)",
|
||||
badgeOkText: "rgba(210, 255, 235, 0.95)",
|
||||
|
||||
rowNoBg: "rgba(40, 120, 80, 0.28)",
|
||||
rowNoBorder: "rgba(40, 120, 80, 0.70)",
|
||||
rowNoText: "rgba(190, 245, 220, 0.88)",
|
||||
badgeNoBg: "rgba(40, 120, 80, 0.22)",
|
||||
badgeNoText: "rgba(190, 245, 220, 0.88)",
|
||||
rowNoBg: "rgba(255,35,35,0.18)",
|
||||
rowNoBorder: "rgba(255,35,35,0.65)",
|
||||
rowNoText: "#ffb3b3",
|
||||
badgeNoBg: "rgba(255,35,35,0.20)",
|
||||
badgeNoText: "#ffb3b3",
|
||||
|
||||
rowMaybeBg: "rgba(124, 255, 182, 0.10)",
|
||||
rowMaybeBorder: "rgba(124, 255, 182, 0.28)",
|
||||
rowMaybeText: "rgba(200, 255, 230, 0.85)",
|
||||
badgeMaybeBg: "rgba(124, 255, 182, 0.12)",
|
||||
badgeMaybeText: "rgba(200, 255, 230, 0.85)",
|
||||
rowMaybeBg: "rgba(140,140,140,0.12)",
|
||||
rowMaybeBorder: "rgba(233,216,166,0.22)",
|
||||
rowMaybeText: "rgba(233,216,166,0.85)",
|
||||
badgeMaybeBg: "rgba(140,140,140,0.14)",
|
||||
badgeMaybeText: "rgba(233,216,166,0.85)",
|
||||
|
||||
rowEmptyBg: "rgba(255,255,255,0.05)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
@@ -140,17 +140,17 @@ export const THEMES = {
|
||||
badgeOkBg: "rgba(143, 182, 255, 0.18)",
|
||||
badgeOkText: "rgba(225, 235, 255, 0.95)",
|
||||
|
||||
rowNoBg: "rgba(70, 95, 160, 0.28)",
|
||||
rowNoBorder: "rgba(70, 95, 160, 0.70)",
|
||||
rowNoText: "rgba(205, 220, 255, 0.90)",
|
||||
badgeNoBg: "rgba(70, 95, 160, 0.22)",
|
||||
badgeNoText: "rgba(205, 220, 255, 0.90)",
|
||||
rowNoBg: "rgba(255,35,35,0.18)",
|
||||
rowNoBorder: "rgba(255,35,35,0.65)",
|
||||
rowNoText: "#ffb3b3",
|
||||
badgeNoBg: "rgba(255,35,35,0.20)",
|
||||
badgeNoText: "#ffb3b3",
|
||||
|
||||
rowMaybeBg: "rgba(143, 182, 255, 0.10)",
|
||||
rowMaybeBorder: "rgba(143, 182, 255, 0.28)",
|
||||
rowMaybeText: "rgba(210, 225, 255, 0.88)",
|
||||
badgeMaybeBg: "rgba(143, 182, 255, 0.12)",
|
||||
badgeMaybeText: "rgba(210, 225, 255, 0.88)",
|
||||
rowMaybeBg: "rgba(140,140,140,0.12)",
|
||||
rowMaybeBorder: "rgba(233,216,166,0.22)",
|
||||
rowMaybeText: "rgba(233,216,166,0.85)",
|
||||
badgeMaybeBg: "rgba(140,140,140,0.14)",
|
||||
badgeMaybeText: "rgba(233,216,166,0.85)",
|
||||
|
||||
rowEmptyBg: "rgba(255,255,255,0.05)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
@@ -180,17 +180,17 @@ export const THEMES = {
|
||||
badgeOkBg: "rgba(255, 226, 122, 0.20)",
|
||||
badgeOkText: "rgba(255, 245, 210, 0.95)",
|
||||
|
||||
rowNoBg: "rgba(160, 120, 40, 0.28)",
|
||||
rowNoBorder: "rgba(160, 120, 40, 0.70)",
|
||||
rowNoText: "rgba(255, 230, 170, 0.90)",
|
||||
badgeNoBg: "rgba(160, 120, 40, 0.22)",
|
||||
badgeNoText: "rgba(255, 230, 170, 0.90)",
|
||||
rowNoBg: "rgba(255,35,35,0.18)",
|
||||
rowNoBorder: "rgba(255,35,35,0.65)",
|
||||
rowNoText: "#ffb3b3",
|
||||
badgeNoBg: "rgba(255,35,35,0.20)",
|
||||
badgeNoText: "#ffb3b3",
|
||||
|
||||
rowMaybeBg: "rgba(255, 226, 122, 0.10)",
|
||||
rowMaybeBorder: "rgba(255, 226, 122, 0.28)",
|
||||
rowMaybeText: "rgba(255, 245, 210, 0.88)",
|
||||
badgeMaybeBg: "rgba(255, 226, 122, 0.12)",
|
||||
badgeMaybeText: "rgba(255, 245, 210, 0.88)",
|
||||
rowMaybeBg: "rgba(140,140,140,0.12)",
|
||||
rowMaybeBorder: "rgba(233,216,166,0.22)",
|
||||
rowMaybeText: "rgba(233,216,166,0.85)",
|
||||
badgeMaybeBg: "rgba(140,140,140,0.14)",
|
||||
badgeMaybeText: "rgba(233,216,166,0.85)",
|
||||
|
||||
rowEmptyBg: "rgba(255,255,255,0.05)",
|
||||
rowEmptyBorder: "rgba(0,0,0,0)",
|
||||
|
||||
Reference in New Issue
Block a user