Update arch-docs theme to match brand guidelines#16
Merged
jonathanpopham merged 17 commits intomainfrom Mar 11, 2026
Merged
Conversation
- Replace Inter/JetBrains Mono with Public Sans/Martian Mono - Update :root CSS variables to brand palette (pure black bg, teal accent, muted secondary colors) - Fix hardcoded colors in CTA gradient, hero button hovers, and source code block Closes #15 (arch-docs portion)
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughReplaced Google Fonts link and swapped Inter/JetBrains Mono for Public Sans, Martian Mono, and Lexend Peta; updated root CSS tokens, extensive theming and typography adjustments across styles and JS (colors, fonts, chart text rendering), and added treemap clipping for labels. No API or data-signature changes. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
templates/_styles.css (1)
524-524: Use the theme tokens here instead of repeating the resolved hex values.
#08191C,#161616, and#E9E9E9already exist as--bg-hover,--bg-card, and--text. Reusing the variables keeps the brand palette centralized and avoids drift on the next theme change.Tokenized version
- background: linear-gradient(135deg, var(--bg-card) 0%, `#08191C` 100%); + background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%);- background: `#161616`; + background: var(--bg-card);- color: `#E9E9E9`; + color: var(--text);Also applies to: 610-623
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_styles.css` at line 524, The gradient line using a hardcoded hex (background: linear-gradient(135deg, var(--bg-card) 0%, `#08191C` 100%);) should use theme tokens instead of literal colors: replace the trailing hexs with the corresponding CSS variables (e.g., use var(--bg-hover) for `#08191C` and var(--text) or var(--bg-card) where appropriate) so the rule uses var(--bg-card), var(--bg-hover), var(--text) as intended; update the same pattern in the other gradient/color occurrences noted (the block around the later occurrences) so all instances reuse --bg-hover, --bg-card and --text instead of hardcoded hexes.templates/_head.html (1)
8-8: Trim the Google Fonts import to just the weights you're actually using.Right now you're asking for Public Sans weights
200;300;400;500;600;700, but looking at your CSS, you only actually use400/500/600/700. Same thing with Martian Mono—you're importing weights300;400;500, but the CSS only uses400(regular). So you can shrink the import URL down to just the weights you need. This saves a little bit on the font download size, which is a nice win for performance.Here's what the updated import would look like:
Public Sans: 400, 500, 600, 700 Martian Mono: 400🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_head.html` at line 8, Update the Google Fonts import link tag that loads Public Sans and Martian Mono so it only requests the weights actually used in the styles: reduce Public Sans weights to 400,500,600,700 and Martian Mono to 400; edit the <link> element that contains the fonts.googleapis.com URL (the Google Fonts import line) to reflect those weight parameters so the fetched URL only includes those weight values, reducing unnecessary font downloads.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@templates/_styles.css`:
- Line 14: The custom property --font currently contains an unquoted
BlinkMacSystemFont which triggers stylelint's value-keyword-case; update the
--font declaration used in templates/_styles.css (the --font variable string) to
quote "BlinkMacSystemFont" (e.g. '--font: 'Public Sans', -apple-system,
"BlinkMacSystemFont", sans-serif;') so the fallback is quoted and the
value-keyword-case lint error is resolved.
- Around line 8-9: The brand accent variable (--accent: `#71B9BC`) is too light
for white text (failing WCAG AA on filled controls); update the affected
controls (.skip-link, .cta-button, .pagination .current, .letter-active) to use
a high-contrast foreground (e.g., color: var(--accent-on)) or darken --accent to
a value that meets 4.5:1 contrast against white; modify either the variable
--accent or add rules for those selectors to set color to var(--accent-on) so
filled states render an accessible foreground.
---
Nitpick comments:
In `@templates/_head.html`:
- Line 8: Update the Google Fonts import link tag that loads Public Sans and
Martian Mono so it only requests the weights actually used in the styles: reduce
Public Sans weights to 400,500,600,700 and Martian Mono to 400; edit the <link>
element that contains the fonts.googleapis.com URL (the Google Fonts import
line) to reflect those weight parameters so the fetched URL only includes those
weight values, reducing unnecessary font downloads.
In `@templates/_styles.css`:
- Line 524: The gradient line using a hardcoded hex (background:
linear-gradient(135deg, var(--bg-card) 0%, `#08191C` 100%);) should use theme
tokens instead of literal colors: replace the trailing hexs with the
corresponding CSS variables (e.g., use var(--bg-hover) for `#08191C` and
var(--text) or var(--bg-card) where appropriate) so the rule uses
var(--bg-card), var(--bg-hover), var(--text) as intended; update the same
pattern in the other gradient/color occurrences noted (the block around the
later occurrences) so all instances reuse --bg-hover, --bg-card and --text
instead of hardcoded hexes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 37277d6d-ce0a-4b41-ac50-73b888dcf331
📒 Files selected for processing (2)
templates/_head.htmltemplates/_styles.css
templates/_styles.css
Outdated
| --orange: #D0A27D; | ||
| --red: #E589C6; | ||
| --blue: #8E8CE9; | ||
| --font: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif; |
There was a problem hiding this comment.
Quote BlinkMacSystemFont so stylelint stops tripping here.
This stack currently violates value-keyword-case. Quoting the fallback keeps the behavior the same and clears the lint error.
Small fix
- --font: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+ --font: 'Public Sans', -apple-system, 'BlinkMacSystemFont', sans-serif;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| --font: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --font: 'Public Sans', -apple-system, 'BlinkMacSystemFont', sans-serif; |
🧰 Tools
🪛 Stylelint (17.4.0)
[error] 14-14: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@templates/_styles.css` at line 14, The custom property --font currently
contains an unquoted BlinkMacSystemFont which triggers stylelint's
value-keyword-case; update the --font declaration used in templates/_styles.css
(the --font variable string) to quote "BlinkMacSystemFont" (e.g. '--font:
'Public Sans', -apple-system, "BlinkMacSystemFont", sans-serif;') so the
fallback is quoted and the value-keyword-case lint error is resolved.
- Remap all hardcoded D3 chart colors from indigo/bright to brand teal/muted palette - Update background, border, and text colors in JS to match CSS variables - Replace Inter font references with Public Sans in SVG text elements - Add clipPath to homepage treemap to prevent text overflow - Set --text to #FFFFFF, --radius to 0px to match supermodel.com - Align font fallback stacks with supermodel.com
There was a problem hiding this comment.
🧹 Nitpick comments (5)
templates/_main.js (2)
31-33: Tiny inconsistency:"#fff"vs"#FFFFFF"for the same white color.They render identically, but for consistency you might want to pick one format. Since you're using
#FFFFFFelsewhere (like--textin the CSS), maybe standardize on that.Suggested change
var fill = isLast ? "#71B9BC" : "#161616"; var stroke = isLast ? "#8CC6C9" : "#202020"; - var textColor = isLast ? "#fff" : "#FFFFFF"; + var textColor = "#FFFFFF";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_main.js` around lines 31 - 33, The ternary that sets textColor uses inconsistent hex formats ("#fff" vs "#FFFFFF"); update the textColor assignment in the same block where fill and stroke are defined (the variables fill, stroke, textColor computed from isLast) to use "#FFFFFF" instead of "#fff" so the white color format matches the rest of the codebase.
386-386: Pre-existing code smell: multiplevarredeclarations in the same function scope.Static analysis flags
svg,typeColors,root, andnodebeing redeclared multiple times within this load handler. Since everything's wrapped in one big function, thesevardeclarations all hoist to the same scope.It's not a bug (JavaScript allows this with
var), but it makes the code harder to reason about. For example, if someone accidentally referencessvgafter the treemap section thinking it's the force graph SVG, they'd get the wrong one.A future refactor could:
- Extract each chart into its own function (cleanest)
- Switch to
let/constwhich would catch accidental reuse at dev timeThis is pre-existing and outside the scope of your brand update, so totally fine to defer.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_main.js` at line 386, The load handler uses multiple var declarations (svg, typeColors, root, node, etc.) that hoist to the same function scope; to avoid accidental reuse, replace these var declarations with block-scoped let/const (use const for values that don't reassign and let for ones that do) in the sections that create the treemap and force graph (e.g., the svg created from hpChartEl with hpW/hpH and related typeColors/root/node variables), or better yet extract each chart into its own function to give each chart its own scope; update the declarations consistently so each chart’s svg and related variables are not reused across the handler.templates/_styles.css (3)
623-623: And#FFFFFFis--text.One more swap to keep everything pointing at the same source of truth.
Suggested change
.source-code code { font-family: var(--mono); font-size: 13px; - color: `#FFFFFF`; + color: var(--text);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_styles.css` at line 623, Replace the hardcoded color declaration "color: `#FFFFFF`;" with the CSS variable so the component uses the theme token; change it to "color: var(--text);" in the same rule where "color: `#FFFFFF`;" appears to ensure all text colors reference the single source of truth (--text).
610-610: Same deal here —#161616is--bg-card.Swap in the variable so you don't have to hunt down hardcoded values if the palette changes.
Suggested change
.source-code { - background: `#161616`; + background: var(--bg-card);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_styles.css` at line 610, Replace the hardcoded color value "#161616" with the CSS variable for the card background so the palette is centralized; locate the rule in templates/_styles.css where "background: `#161616`;" is used and change it to use "var(--bg-card)". Ensure any related properties in the same selector (e.g., background-color, border colors, hover/active states) are updated to use the same variable for consistency.
524-524: Consider usingvar(--bg-hover)instead of the hardcoded hex.The
#08191Cvalue is already defined as--bg-hoverin your root variables. Using the variable keeps things DRY and means if you tweak the palette later, this gradient updates automatically.Suggested change
-.cta-section { - background: linear-gradient(135deg, var(--bg-card) 0%, `#08191C` 100%); +.cta-section { + background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_styles.css` at line 524, Replace the hardcoded color in the gradient declaration for the background property — change the second stop from "#08191C" to the CSS variable "var(--bg-hover)" so the rule uses var(--bg-hover) instead of the hex literal, ensuring the linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%) updates automatically when theme variables change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@templates/_main.js`:
- Around line 31-33: The ternary that sets textColor uses inconsistent hex
formats ("#fff" vs "#FFFFFF"); update the textColor assignment in the same block
where fill and stroke are defined (the variables fill, stroke, textColor
computed from isLast) to use "#FFFFFF" instead of "#fff" so the white color
format matches the rest of the codebase.
- Line 386: The load handler uses multiple var declarations (svg, typeColors,
root, node, etc.) that hoist to the same function scope; to avoid accidental
reuse, replace these var declarations with block-scoped let/const (use const for
values that don't reassign and let for ones that do) in the sections that create
the treemap and force graph (e.g., the svg created from hpChartEl with hpW/hpH
and related typeColors/root/node variables), or better yet extract each chart
into its own function to give each chart its own scope; update the declarations
consistently so each chart’s svg and related variables are not reused across the
handler.
In `@templates/_styles.css`:
- Line 623: Replace the hardcoded color declaration "color: `#FFFFFF`;" with the
CSS variable so the component uses the theme token; change it to "color:
var(--text);" in the same rule where "color: `#FFFFFF`;" appears to ensure all
text colors reference the single source of truth (--text).
- Line 610: Replace the hardcoded color value "#161616" with the CSS variable
for the card background so the palette is centralized; locate the rule in
templates/_styles.css where "background: `#161616`;" is used and change it to use
"var(--bg-card)". Ensure any related properties in the same selector (e.g.,
background-color, border colors, hover/active states) are updated to use the
same variable for consistency.
- Line 524: Replace the hardcoded color in the gradient declaration for the
background property — change the second stop from "#08191C" to the CSS variable
"var(--bg-hover)" so the rule uses var(--bg-hover) instead of the hex literal,
ensuring the linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%)
updates automatically when theme variables change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 720dfde0-65d5-4550-9bcf-95982df5a113
📒 Files selected for processing (2)
templates/_main.jstemplates/_styles.css
Below 600px width, use d3.treemapSlice instead of squarify so each taxonomy gets a full-width horizontal bar. Prevents text overflow and keeps all labels readable on mobile.
This reverts commit 474a83b.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
templates/_main.js (1)
77-84: Pull the palette from CSS tokens instead of copying hexes through JS.This file now hardcodes the brand colors in a bunch of separate maps plus Mermaid config. The next token tweak will need
_styles.cssand_main.jsto stay perfectly in sync by hand again. I’d read the CSS custom properties once withgetComputedStyle(document.documentElement)and build the D3/Mermaid palettes from that.Also applies to: 193-215, 297-297, 388-389, 411-412, 486-486, 550-550, 600-606
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_main.js` around lines 77 - 84, Replace the hardcoded color maps (typeColors and edgeColors) by reading CSS custom properties at runtime: use getComputedStyle(document.documentElement) to read the palette tokens and then construct the D3/Mermaid palettes from those values (e.g., map token names to the same keys used in typeColors and edgeColors). Update any other hardcoded hex usages in this file (the other color maps and Mermaid config regions referenced) to source their values from the same computed-style lookup so all palettes are built from CSS tokens instead of inline hex strings.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@templates/_main.js`:
- Around line 31-33: The current logic sets textColor to white unconditionally
for certain brand fills (see variables fill, stroke, textColor and condition
isLast); replace this by choosing a contrasting foreground based on the fill
color at render time: compute the relative luminance or contrast ratio of the
fill (or use an existing utility) and set textColor to a dark color (e.g.,
"#161616" or computed dark) when contrast against "#fff" is below WCAG
thresholds, otherwise keep white; update every occurrence where textColor is set
(including the blocks around the variables shown and the other ranges noted) so
labels use the derived contrasting color instead of hardcoded "#fff".
- Around line 34-41: The SVG injection is vulnerable because items[i].name (used
as label) is concatenated into the svg string and later inserted via innerHTML;
escape XML special characters (&, <, >, ", ') in label before concatenation or
switch to building the SVG using DOM APIs; update the code that defines label
(from items[i].name) and the places that append the text node (the svg += '<text
...>' line and the similar occurrence around lines 54-55) to use an escapedLabel
or a created textNode so no raw input is placed into the SVG markup.
- Around line 105-106: The legend/text elements using fill "#505050" (e.g., the
svg.append("text") -> .attr("fill", "#505050") call) are too low-contrast on
black; update these small-size text fills to an AA-safe neutral (replace
"#505050" with "#808080" or your chosen AA-safe token) across all similar
occurrences (the repeated svg.append("text" / .attr("fill", "#505050") usages
and any small legend/heading/value label attributes) so that 10px–11px text
meets WCAG AA contrast on a black background.
- Around line 389-395: The chart code uses function-scoped var bindings (e.g.,
root, svg, node, typeColors, cell) which collide across multiple charts; update
these declarations to block-scoped names or unique chart-prefixed identifiers:
replace var with const/let for local, block-scoped bindings (e.g., const root =
..., const svg = ...) or rename to chart-specific identifiers (e.g., hpRoot,
hpSvg, hpCell, aeRoot, etc.) so each chart (references: hpChartEl, hpW, hpH,
colors and the other chart sections noted) has independent variables and avoids
accidental reuse across the shared load handler.
---
Nitpick comments:
In `@templates/_main.js`:
- Around line 77-84: Replace the hardcoded color maps (typeColors and
edgeColors) by reading CSS custom properties at runtime: use
getComputedStyle(document.documentElement) to read the palette tokens and then
construct the D3/Mermaid palettes from those values (e.g., map token names to
the same keys used in typeColors and edgeColors). Update any other hardcoded hex
usages in this file (the other color maps and Mermaid config regions referenced)
to source their values from the same computed-style lookup so all palettes are
built from CSS tokens instead of inline hex strings.
There was a problem hiding this comment.
♻️ Duplicate comments (1)
templates/_main.js (1)
500-501:⚠️ Potential issue | 🟡 MinorLine count values using
#505050at 10px will be hard to see.These are the actual line count numbers next to the bars — pretty important info! At 10px with
#505050on black, they'll be barely visible. Consider#808080or lighter to match the label text on line 497.Proposed fix
g.append("text").attr("x", teLabelW + Math.max(teScale(d.lines), 3) + 5).attr("y", y + teBarH / 2 + 4) - .attr("fill", "#505050").attr("font-size", "10px").attr("font-family", "Public Sans,system-ui,sans-serif").text(d.lines); + .attr("fill", "#808080").attr("font-size", "10px").attr("font-family", "Public Sans,system-ui,sans-serif").text(d.lines);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_main.js` around lines 500 - 501, The small line-count text appended with g.append("text") for d.lines is too dark and small on a black background; update its styling to match the other label text by changing the fill from "#505050" to a lighter color like "#808080" (or the exact color used on the label at line 497) and ensure the font-size/font-family match that label's settings (reuse the same font-size and font-family values instead of hardcoding different ones).
🧹 Nitpick comments (2)
templates/_main.js (2)
701-705: NiceescHtmlhelper here — could reuse a similar pattern for SVG labels.This DOM-based escaping approach for search results is solid. A similar helper (but for XML entities) could fix the SVG injection issue in the architecture map. Just a thought!
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_main.js` around lines 701 - 705, Add an XML-escaping helper mirroring escHtml (e.g., escXml or escSvg) that escapes XML entities (&, <, >, ", ') and returns a safe string for SVG text/attributes; implement it by creating a DOM node and using createTextNode or by replacing the five XML entities. Then replace direct insertions of label strings into the architecture map SVG rendering code (where SVG text/labels are created) with calls to this new escXml helper so SVG labels are sanitized before being inserted into the DOM.
194-203: Metric colors updated — minor note on#505050for Files.The new brand colors look solid here. One small thing: using
#505050for the "Files" bar (line 202) might make it nearly invisible against a dark background like#000or#161616. If that's intentional (de-emphasizing files), cool — just wanted to flag it in case it's unintentional.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_main.js` around lines 194 - 203, The "Files" metric uses color "#505050" which may be too low-contrast on dark backgrounds; update the color value in the metrics array entry with key "fc" (label "Files") in templates/_main.js to a higher-contrast hex (or the intended de-emphasized color) to ensure visibility against dark backgrounds, e.g., pick a lighter shade or confirm the current value is intentional and document that choice.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@templates/_main.js`:
- Around line 500-501: The small line-count text appended with g.append("text")
for d.lines is too dark and small on a black background; update its styling to
match the other label text by changing the fill from "#505050" to a lighter
color like "#808080" (or the exact color used on the label at line 497) and
ensure the font-size/font-family match that label's settings (reuse the same
font-size and font-family values instead of hardcoding different ones).
---
Nitpick comments:
In `@templates/_main.js`:
- Around line 701-705: Add an XML-escaping helper mirroring escHtml (e.g.,
escXml or escSvg) that escapes XML entities (&, <, >, ", ') and returns a safe
string for SVG text/attributes; implement it by creating a DOM node and using
createTextNode or by replacing the five XML entities. Then replace direct
insertions of label strings into the architecture map SVG rendering code (where
SVG text/labels are created) with calls to this new escXml helper so SVG labels
are sanitized before being inserted into the DOM.
- Around line 194-203: The "Files" metric uses color "#505050" which may be too
low-contrast on dark backgrounds; update the color value in the metrics array
entry with key "fc" (label "Files") in templates/_main.js to a higher-contrast
hex (or the intended de-emphasized color) to ensure visibility against dark
backgrounds, e.g., pick a lighter shade or confirm the current value is
intentional and document that choice.
- Body: font-weight 300 (Public Sans Light) - H1/hero: font-weight 200 (Extralight), letter-spacing -0.04em - H2/section titles: font-weight 300-400, letter-spacing -0.02em - Nav links: Martian Mono, uppercase, 0.68rem (matching supermodel.com) - Overline labels: Lexend Peta 10px uppercase (brand accent typeface) - Pills: Martian Mono (data/details font) - Add Lexend Peta to Google Fonts import
There was a problem hiding this comment.
🧹 Nitpick comments (4)
templates/_styles.css (4)
14-15: Quote these font names to silence stylelint.Stylelint is complaining about the casing of
BlinkMacSystemFont,Roboto,Consolas, andMenlo. These are proper font names so the capitalization is correct, but quoting them makes the linter happy and is totally valid CSS.Quick fix
- --font: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - --mono: 'Martian Mono', "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; + --font: 'Public Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', sans-serif; + --mono: 'Martian Mono', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_styles.css` around lines 14 - 15, Update the CSS variable declarations for --font and --mono so the unquoted font family identifiers are wrapped in quotes to satisfy stylelint: specifically quote BlinkMacSystemFont, Roboto, Consolas, and Menlo within the --font and --mono variable values (leave already-quoted families as-is) so the declarations using --font and --mono are valid and lint-clean.
280-282: Consider using CSScolor-mix()for easier maintenance.These hardcoded rgba values work, but if you ever change
--orangeor--blue, you'd need to update these too. Modern CSS hascolor-mix()which can derive these automatically:Example using color-mix()
.hero-btn-star:hover { background: color-mix(in srgb, var(--orange) 10%, transparent); } .hero-btn-fork:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); }Not a big deal for now, just a nice-to-have if you want to reduce future maintenance.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_styles.css` around lines 280 - 282, Replace the hardcoded rgba backgrounds on the hover rules for .hero-btn-star:hover and .hero-btn-fork:hover with color-mix() that blends the respective CSS variables (--orange and --blue) with transparent (e.g., 10%) so the hover tint tracks changes to those variables; update the two rules .hero-btn-star:hover and .hero-btn-fork:hover to use color-mix(in srgb, var(--orange) X%, transparent) and color-mix(in srgb, var(--blue) X%, transparent) respectively (adjust X to match the original opacity).
623-636: Use CSS variables instead of hardcoded hex values.You've got
#161616(same as--bg-card) and#FFFFFF(same as--text) hardcoded here. Using the variables keeps everything in sync if the palette changes.Consistency fix
.source-code { - background: `#161616`; + background: var(--bg-card); ... } .source-code code { ... - color: `#FFFFFF`; + color: var(--text); ... }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_styles.css` around lines 623 - 636, The CSS currently hardcodes colors in the rule that styles the code container and code text; replace background: `#161616` with background: var(--bg-card) and color: `#FFFFFF` with color: var(--text) so .source-code (and its nested code selector) use the theme variables instead of literal hex values, keeping the styling consistent when the palette changes.
535-535: Usevar(--bg-hover)instead of hardcoding#08191C.You've got
--bg-hover:#08191C`` defined at line 4 but here you're hardcoding the same value. If the brand palette changes, this could get out of sync.Small fix
- background: linear-gradient(135deg, var(--bg-card) 0%, `#08191C` 100%); + background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@templates/_styles.css` at line 535, Replace the hardcoded color in the linear-gradient with the CSS variable to keep palette centralized: in the rule that currently uses "background: linear-gradient(135deg, var(--bg-card) 0%, `#08191C` 100%);" switch the second stop to "var(--bg-hover)" so it reads use var(--bg-card) and var(--bg-hover) instead of the literal "#08191C"; this ensures the gradient stays in sync with the --bg-hover variable defined earlier.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@templates/_styles.css`:
- Around line 14-15: Update the CSS variable declarations for --font and --mono
so the unquoted font family identifiers are wrapped in quotes to satisfy
stylelint: specifically quote BlinkMacSystemFont, Roboto, Consolas, and Menlo
within the --font and --mono variable values (leave already-quoted families
as-is) so the declarations using --font and --mono are valid and lint-clean.
- Around line 280-282: Replace the hardcoded rgba backgrounds on the hover rules
for .hero-btn-star:hover and .hero-btn-fork:hover with color-mix() that blends
the respective CSS variables (--orange and --blue) with transparent (e.g., 10%)
so the hover tint tracks changes to those variables; update the two rules
.hero-btn-star:hover and .hero-btn-fork:hover to use color-mix(in srgb,
var(--orange) X%, transparent) and color-mix(in srgb, var(--blue) X%,
transparent) respectively (adjust X to match the original opacity).
- Around line 623-636: The CSS currently hardcodes colors in the rule that
styles the code container and code text; replace background: `#161616` with
background: var(--bg-card) and color: `#FFFFFF` with color: var(--text) so
.source-code (and its nested code selector) use the theme variables instead of
literal hex values, keeping the styling consistent when the palette changes.
- Line 535: Replace the hardcoded color in the linear-gradient with the CSS
variable to keep palette centralized: in the rule that currently uses
"background: linear-gradient(135deg, var(--bg-card) 0%, `#08191C` 100%);" switch
the second stop to "var(--bg-hover)" so it reads use var(--bg-card) and
var(--bg-hover) instead of the literal "#08191C"; this ensures the gradient
stays in sync with the --bg-hover variable defined earlier.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 3746aa98-4eda-4013-8cba-1c5414a92459
📒 Files selected for processing (2)
templates/_head.htmltemplates/_styles.css
Below 600px, the codebase composition switches from a squarified treemap to a simple stacked bar list — full-width colored bars with labels and counts. Treemap stays unchanged on desktop.
Extracts treemap/bar rendering into a function that re-renders on window resize (debounced 150ms). Switches between treemap (>=600px) and horizontal bar list (<600px) live as the viewport changes.
Move flex-wrap to the base rule so stats wrap naturally before overflowing. Tighten gap on mobile for compact rows.
Codebase composition now uses flex-wrap divs instead of D3 treemap. Each taxonomy is a flex item sized by flex-grow proportional to count, with min-width ensuring text is always visible. Reflows naturally at any viewport width — no breakpoints or resize listeners needed.
Each box now gets flex-basis as a percentage of total count (min 10%) with no grow/shrink, so smaller items like File Extensions stay small even when they wrap to a new row.
Fixed container height at 200px, items stretch to fill, labels anchored to bottom. Tighter gap and padding for denser feel.
Split taxonomies at ~65% cumulative value: large items in a tall top row (140px), small items in a short bottom row (60px). Width is proportional within each row. Visual area now reflects data magnitude.
This reverts commit 4133cc1.
Both the architecture overview and entity force graphs now resize their SVG width and re-center the simulation on window resize (debounced 150ms). Nodes reflow to fill the new canvas.
When a taxonomy hub page has null/empty distributions and no top entities, hide the chart panel container instead of showing an empty rectangle.
This reverts commit 2fadd03.
- Use black text on accent-filled controls (skip-link, cta-button, pagination current, letter-active) for AA contrast on #71B9BC - Bump chart label gray from #505050 to #808080 for AA contrast on black
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
:rootCSS variables to match the official Supermodel brand palette — pure black backgrounds, Deep Space teal surfaces, Starlight Blue accent, muted secondary colors (brown, green, purple, pink)Color mapping applied
--bg#0f1117(blue-gray)#000000(Black)--bg-card#1a1d27(blue-gray)#161616(Light Black)--bg-hover#22263a#08191C(Deep Space)--accent#6366f1(indigo)#71B9BC(Starlight Blue)--green#22c55e#7CCE86(muted green)--orange#f59e0b#D0A27D(brown)--red#ef4444#E589C6(pink)--blue#3b82f6#8E8CE9(purple)Closes #15 (arch-docs portion —
supermodeltools.github.iostill needs separate update)Test plan
Summary by CodeRabbit