From bb015d9c5be8fce515a184bc61459b723a8a80e8 Mon Sep 17 00:00:00 2001 From: phranck Date: Sat, 31 Jan 2026 20:47:11 +0100 Subject: [PATCH] =?UTF-8?q?Chore:=20Fix=20palette=20preview=20=E2=80=94=20?= =?UTF-8?q?responsive=20hue=20bar,=20single-column=20mobile,=20sync=20SDK?= =?UTF-8?q?=20colors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Move media queries after base styles (fixes 2-column on mobile) - Fix hue bar losing gradient in vertical layout (flex: none + width: 100%) - Add statusBarBackground to Backgrounds swatch group - Add foregroundPlaceholder to all palettes and Foregrounds group - Remove deleted properties from palette data and swatchGroups - Update existing palettes with correct SDK values including Violet HSL hex --- palette-preview.html | 176 +++++++++++++++++++++---------------------- 1 file changed, 87 insertions(+), 89 deletions(-) diff --git a/palette-preview.html b/palette-preview.html index afe3128..6d2b378 100644 --- a/palette-preview.html +++ b/palette-preview.html @@ -26,31 +26,6 @@ margin: 0 auto; } - @media (max-width: 768px) { - body { padding: 24px 16px 60px; font-size: 16px; } - h1 { font-size: 32px; } - h2 { font-size: 24px; margin: 40px 0 20px; } - .subtitle { font-size: 17px; margin-bottom: 36px; } - .palette-header { padding: 18px 20px 14px; } - .palette-name { font-size: 22px; } - .palette-body { padding: 18px 20px; } - - .hue-wheel { flex-direction: column; gap: 12px; padding: 16px; } - .hue-legend { justify-content: center; } - } - - @media (max-width: 900px) { - .palette-grid { grid-template-columns: 1fr; } - } - - @media (max-width: 480px) { - body { padding: 16px 12px 40px; } - h1 { font-size: 26px; } - .swatch-row { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); } - .swatch-color { height: 32px; } - .existing-grid { grid-template-columns: 1fr; } - } - h1 { font-size: 44px; font-weight: 700; @@ -196,6 +171,7 @@ border: 1px solid rgba(255,255,255,0.06); } + /* Hue distribution bar */ .hue-wheel { display: flex; align-items: center; @@ -263,6 +239,34 @@ height: 3px; border-radius: 2px; } + + /* ── Responsive ──────────────────────────────────────────────────── */ + + @media (max-width: 900px) { + .palette-grid { grid-template-columns: 1fr; } + } + + @media (max-width: 768px) { + body { padding: 24px 16px 60px; font-size: 16px; } + h1 { font-size: 32px; } + h2 { font-size: 24px; margin: 40px 0 20px; } + .subtitle { font-size: 17px; margin-bottom: 36px; } + .palette-header { padding: 18px 20px 14px; } + .palette-name { font-size: 22px; } + .palette-body { padding: 18px 20px; } + .hue-wheel { flex-direction: column; gap: 12px; padding: 16px; } + .hue-bar { width: 100%; height: 16px; flex: none; } + .hue-legend { justify-content: center; } + } + + @media (max-width: 480px) { + body { padding: 16px 12px 40px; } + h1 { font-size: 26px; } + .swatch-row { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); } + .swatch-color { height: 32px; } + .existing-grid { grid-template-columns: 1fr; } + } + @@ -274,19 +278,17 @@
-
-
-
-
-
- - +
+
+
+
+
-
-
-
-
-
+
+
+
+
+
Existing @@ -316,6 +318,7 @@ const newPalettes = [ foreground: "#00DDC0", foregroundSecondary: "#00AA94", foregroundTertiary: "#007A6B", + foregroundPlaceholder: "#00574C", accent: "#33FFE0", accentSecondary: "#00BB9E", success: "#33FFAA", @@ -323,12 +326,7 @@ const newPalettes = [ error: "#FF6633", info: "#66FFEE", border: "#2D5A55", - borderFocused: "#00DDC0", - selection: "#33FFE0", - selectionBackground: "#1A4D47", statusBarBackground: "#0D1E1D", - statusBarForeground: "#00CCAE", - statusBarHighlight: "#33FFE0", buttonBackground: "#144542", appHeaderBackground: "#0A1B1C", overlayBackground: "#060A0A", @@ -344,6 +342,7 @@ const newPalettes = [ foreground: "#FF44CC", foregroundSecondary: "#CC33A3", foregroundTertiary: "#8F2472", + foregroundPlaceholder: "#661952", accent: "#FF77DD", accentSecondary: "#DD33AA", success: "#FF88DD", @@ -351,12 +350,7 @@ const newPalettes = [ error: "#FF6633", info: "#FF99EE", border: "#5A2D50", - borderFocused: "#FF44CC", - selection: "#FF77DD", - selectionBackground: "#4D1A42", statusBarBackground: "#180D19", - statusBarForeground: "#EE3BBB", - statusBarHighlight: "#FF77DD", buttonBackground: "#3A1D3A", appHeaderBackground: "#1C0E1E", overlayBackground: "#0A060A", @@ -372,6 +366,7 @@ const newPalettes = [ foreground: "#DDAA22", foregroundSecondary: "#BB8E1A", foregroundTertiary: "#8A6814", + foregroundPlaceholder: "#634B0E", accent: "#FFCC44", accentSecondary: "#CC9922", success: "#DDCC44", @@ -379,12 +374,7 @@ const newPalettes = [ error: "#FF6633", info: "#EEBB55", border: "#5A4D2D", - borderFocused: "#DDAA22", - selection: "#FFCC44", - selectionBackground: "#4D4020", statusBarBackground: "#191508", - statusBarForeground: "#CC9E1E", - statusBarHighlight: "#FFCC44", buttonBackground: "#3A3018", appHeaderBackground: "#1C170A", overlayBackground: "#0A0906", @@ -400,6 +390,7 @@ const newPalettes = [ foreground: "#FF7744", foregroundSecondary: "#CC5E36", foregroundTertiary: "#8F4226", + foregroundPlaceholder: "#66301B", accent: "#FF9966", accentSecondary: "#DD6633", success: "#FFAA77", @@ -407,12 +398,7 @@ const newPalettes = [ error: "#FF4433", info: "#FFBB88", border: "#5A3A2D", - borderFocused: "#FF7744", - selection: "#FF9966", - selectionBackground: "#4D2E1F", statusBarBackground: "#190F0A", - statusBarForeground: "#EE6E3B", - statusBarHighlight: "#FF9966", buttonBackground: "#3A2418", appHeaderBackground: "#1E100C", overlayBackground: "#0A0706", @@ -428,6 +414,7 @@ const newPalettes = [ foreground: "#88DDFF", foregroundSecondary: "#66AACC", foregroundTertiary: "#4A7A99", + foregroundPlaceholder: "#35586E", accent: "#AAEEFF", accentSecondary: "#66BBDD", success: "#88EEBB", @@ -435,12 +422,7 @@ const newPalettes = [ error: "#FF6633", info: "#BBEEFF", border: "#2D4A5A", - borderFocused: "#88DDFF", - selection: "#AAEEFF", - selectionBackground: "#1A3A4D", statusBarBackground: "#0D1720", - statusBarForeground: "#77CCEE", - statusBarHighlight: "#AAEEFF", buttonBackground: "#142D3E", appHeaderBackground: "#0A151E", overlayBackground: "#060809", @@ -453,69 +435,85 @@ const existingPalettes = [ name: "Green", desc: "P1 phosphor", fg: "#33FF33", - colors: ["#060A07","#0E271C","#0A1B13","#33FF33","#27C227","#1F8F1F","#66FF66","#00CC00", - "#33FF33","#CCFF33","#FF6633","#33FFCC","#2D5A2D","#33FF33","#66FF66","#1A4D1A", - "#0F2215","#2FDD2F","#66FF66","#0E271C","#0A1B13","#145523"] + colors: ["#060A07","#0E271C","#0A1B13", + "#33FF33","#27C227","#1F8F1F","#165A16", + "#66FF66","#00CC00", + "#33FF33","#CCFF33","#FF6633","#33FFCC", + "#2D5A2D", + "#0F2215","#145523","#0A1B13","#060A07"] }, { name: "Amber", desc: "P3 phosphor", fg: "#FFAA00", - colors: ["#0A0706","#251710","#1E110E","#FFAA00","#CC8800","#8F6600","#FFCC33","#CC9900", - "#FFCC00","#FFE066","#FF6633","#FFD966","#5A4A2D","#FFAA00","#FFCC33","#4D3A1F", - "#191613","#FFAA00","#FFCC33","#251710","#1E110E","#3A2A1D"] + colors: ["#0A0706","#251710","#1E110E", + "#FFAA00","#CC8800","#8F6600","#664D00", + "#FFCC33","#CC9900", + "#FFCC00","#FFE066","#FF6633","#FFD966", + "#5A4A2D", + "#191613","#3A2A1D","#1E110E","#0A0706"] }, { name: "Red", desc: "Military", fg: "#FF4444", - colors: ["#0A0606","#281112","#1E0F10","#FF4444","#CC3333","#8F2222","#FF6666","#CC4444", - "#FF8080","#FFAA66","#FFFFFF","#FF9999","#5A2D2D","#FF4444","#FF6666","#4D1F1F", - "#191313","#F23B3B","#FF6666","#281112","#1E0F10","#3A1F22"] + colors: ["#0A0606","#281112","#1E0F10", + "#FF4444","#CC3333","#8F2222","#661616", + "#FF6666","#CC4444", + "#FF8080","#FFAA66","#FFFFFF","#FF9999", + "#5A2D2D", + "#191313","#3A1F22","#1E0F10","#0A0606"] }, { name: "Violet", desc: "Sci-fi", - fg: "#BB77FF", - colors: ["#08060A","#1A0F2B","#11091D","#BB77FF","#8F4DD6","#6B33A3","#CC99FF","#9F40E0", - "#66FF66","#FFCC33","#FF6666","#7799FF","#33265A","#BB77FF","#CC99FF","#2E1A50", - "#120A1E","#AA66EE","#CC99FF","#1A0F2B","#11091D","#281744"] + fg: "#B275EF", + colors: ["#070509","#190F23","#110B18", + "#B275EF","#8C3BDC","#6528A3","#47236B", + "#C697F6","#7F1FDF", + "#E4A567","#EF75B2","#A5F159","#7CB2E8", + "#3F2659", + "#140D1B","#261537","#110B18","#070509"] }, { name: "Blue", desc: "VFD", fg: "#00AAFF", - colors: ["#060708","#0E1825","#0A121C","#00AAFF","#0088CC","#006699","#33BBFF","#0099DD", - "#33CCFF","#66CCFF","#FF6633","#99DDFF","#2D4A5A","#00AAFF","#33BBFF","#1A3A4D", - "#0F1822","#0099EE","#33BBFF","#0E1825","#0A121C","#14304A"] + colors: ["#060708","#0E1825","#0A121C", + "#00AAFF","#0088CC","#006699","#004D73", + "#33BBFF","#0099DD", + "#33CCFF","#66CCFF","#FF6633","#99DDFF", + "#2D4A5A", + "#0F1822","#14304A","#0A121C","#060708"] }, { name: "White", desc: "P4 phosphor", fg: "#E8E8E8", - colors: ["#06070A","#111A2A","#0D131D","#E8E8E8","#B0B0B0","#787878","#FFFFFF","#C0C0C0", - "#C0FFC0","#FFE0A0","#FFA0A0","#A0D0FF","#484848","#E8E8E8","#FFFFFF","#3A3A3A", - "#131619","#DCDCDC","#FFFFFF","#111A2A","#0D131D","#1D2535"] + colors: ["#06070A","#111A2A","#0D131D", + "#E8E8E8","#B0B0B0","#787878","#505050", + "#FFFFFF","#C0C0C0", + "#C0FFC0","#FFE0A0","#FFA0A0","#A0D0FF", + "#484848", + "#131619","#1D2535","#0D131D","#06070A"] }, ]; const colorLabels = [ "background","containerBodyBackground","containerCapBackground", - "foreground","foregroundSecondary","foregroundTertiary", + "foreground","foregroundSecondary","foregroundTertiary","foregroundPlaceholder", "accent","accentSecondary", "success","warning","error","info", - "border","borderFocused","selection","selectionBackground", - "statusBarBg","statusBarFg","statusBarHighlight", - "buttonBg","appHeaderBg","overlayBg" + "border", + "statusBarBackground","buttonBackground","appHeaderBackground","overlayBackground" ]; const swatchGroups = [ - { title: "Backgrounds", keys: ["background","containerBodyBackground","containerCapBackground","buttonBackground","appHeaderBackground","overlayBackground"] }, - { title: "Foregrounds", keys: ["foreground","foregroundSecondary","foregroundTertiary"] }, + { title: "Backgrounds", keys: ["background","containerBodyBackground","containerCapBackground","buttonBackground","statusBarBackground","appHeaderBackground","overlayBackground"] }, + { title: "Foregrounds", keys: ["foreground","foregroundSecondary","foregroundTertiary","foregroundPlaceholder"] }, { title: "Accents", keys: ["accent","accentSecondary"] }, { title: "Semantic", keys: ["success","warning","error","info"] }, - { title: "UI Elements", keys: ["border","borderFocused","selection","selectionBackground"] }, - { title: "Status Bar", keys: ["statusBarBackground","statusBarForeground","statusBarHighlight"] }, + { title: "UI Elements", keys: ["border"] }, ]; function camelToLabel(key) {