Rebrand: update primary colour to red and replace navbar/footer logo #265
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,29 +4,49 @@ | |
| * work well for content-centric websites. | ||
| */ | ||
|
|
||
| @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap'); | ||
|
|
||
| @font-face { | ||
| font-family: 'PolySans'; | ||
|
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: # First, let's read the SCSS file to see the current state
cat -n src/scss/custom.scss | head -60Repository: absmartly/docs Length of output: 2359 🏁 Script executed: # Search for Stylelint configuration files
fd -e json -e js -e yml -e yaml | grep -i stylelintRepository: absmartly/docs Length of output: 40 🌐 Web query:
💡 Result: Stylelint rule Citations:
🏁 Script executed: # Search for Stylelint configuration in common locations
find . -maxdepth 2 -type f \( -name ".stylelintrc*" -o -name "stylelint.config.*" \) 2>/dev/nullRepository: absmartly/docs Length of output: 78 🏁 Script executed: # Check if Stylelint config is in package.json
cat package.json | grep -A 20 "stylelint"Repository: absmartly/docs Length of output: 40 🏁 Script executed: # Read the Stylelint configuration file
cat .stylelintrc.jsonRepository: absmartly/docs Length of output: 1418 🌐 Web query:
💡 Result: The stylelint-config-standard-scss package extends stylelint-config-standard [1][2]. The font-family-name-quotes rule is a core Stylelint rule [3][4], and its configuration is inherited from the standard Stylelint configuration [5]. In the standard Stylelint configuration, the font-family-name-quotes rule is typically set to "always-where-recommended" [6]. This option requires quotes around font family names only when they are recommended by the CSS specification (e.g., when the name contains spaces, numbers, or special characters) and disallows them in other cases [6]. To verify or override this setting in your project, you can explicitly define the rule in your Stylelint configuration file (e.g.,.stylelintrc.json or stylelint.config.mjs): { "extends": "stylelint-config-standard-scss", "rules": { "font-family-name-quotes": "always-where-recommended" } } You can change "always-where-recommended" to other available options such as "always-unless-keyword" or "always-where-required" depending on your project's specific requirements [6][7]. Citations:
Remove quotes from The project uses Proposed minimal fix `@font-face` {
- font-family: 'PolySans';
+ font-family: PolySans;
src: url('/fonts/PolySans-Bulky.woff2') format('woff2'),
url('/fonts/PolySans-Bulky.woff') format('woff');
@@
h1,
h2,
h3 {
- font-family: 'PolySans', var(--ifm-heading-font-family);
+ font-family: PolySans, var(--ifm-heading-font-family);
font-weight: 900;
}🧰 Tools🪛 Stylelint (17.11.1)[error] 10-10: Expected no quotes around "PolySans" (font-family-name-quotes) (font-family-name-quotes) 🤖 Prompt for AI Agents |
||
| src: url('/fonts/PolySans-Bulky.woff2') format('woff2'), | ||
| url('/fonts/PolySans-Bulky.woff') format('woff'); | ||
| font-weight: 900; | ||
| font-style: normal; | ||
| font-display: swap; | ||
| } | ||
|
|
||
| /* You can override the default Infima variables here. */ | ||
| :root { | ||
| --ifm-font-family-base: 'Manrope', system-ui, -apple-system, sans-serif; | ||
| --ifm-heading-font-family: 'Manrope', system-ui, -apple-system, sans-serif; | ||
| --ifm-code-font-size: 95%; | ||
| --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); | ||
| --ifm-color-primary: #CA3721; | ||
| --ifm-color-primary-dark: #b6311e; | ||
| --ifm-color-primary-darker: #ac2e1c; | ||
| --ifm-color-primary-darkest: #8e2617; | ||
| --ifm-color-primary-light: #d4503c; | ||
| --ifm-color-primary-lighter: #d75c49; | ||
| --ifm-color-primary-lightest: #e18476; | ||
|
Comment on lines
+24
to
+30
There was a problem hiding this comment. 🧩 Analysis chain🌐 Web query:
💡 Result: WCAG contrast ratio requirements for interactive UI elements 1) Non-text contrast for interactive UI components (WCAG 2.x Success Criterion 1.4.11) - Requirement: Any visual information needed to identify an active user interface component (and its states) must have a contrast ratio of at least 3:1 against adjacent colors, unless the component is inactive or the appearance is determined by the user agent and not modified by the author. [1][2] - State indication: Visual information necessary to indicate state (e.g., selected or focused) must also meet the 3:1 contrast ratio against the adjacent colors for that state. [1][3] 2) Text contrast (in case your interactive element contains text) - WCAG 2.2 Success Criterion 1.4.3 (Contrast (Minimum)): Text and images of text must have contrast of at least 4.5:1 (with standard exceptions). [4][5] - WCAG 2.2 Success Criterion 1.4.6 (Contrast (Enhanced)): Text and images of text must have contrast of at least 7:1 (with standard exceptions). [4][5] (These are separate from the non-text 3:1 requirement for UI component shapes, outlines, icons, etc.) How to verify whether Citations:
🏁 Script executed: cat -n src/scss/custom.scss | head -50Repository: absmartly/docs Length of output: 1911 🏁 Script executed: # Search for references to these colour variables in the codebase
rg 'ifm-color-primary' --max-count 20 -A 2 -B 2Repository: absmartly/docs Length of output: 1598 🏁 Script executed: # Look for background or adjacent colours that would be used with these primary colours
rg 'ifm-color-background|background-color' src/scss/ --max-count 20Repository: absmartly/docs Length of output: 210 🏁 Script executed: # Search for Infima imports or documentation
find . -name "*.md" -o -name "*.json" | xargs grep -l "infima\|docusaurus" | head -10Repository: absmartly/docs Length of output: 143 🏁 Script executed: # Look for text colour definitions or button text colours
rg 'color:.*white|color:.*black|ifm-color-content|text-color' src/scss/ -A 1 -B 1Repository: absmartly/docs Length of output: 40 🏁 Script executed: # Check docusaurus config for theme colours
find . -name "docusaurus.config.*" -o -name "*.json" | head -5Repository: absmartly/docs Length of output: 295 🏁 Script executed: find . -name "docusaurus.config.js" -o -name "docusaurus.config.ts" | xargs catRepository: absmartly/docs Length of output: 6318 🏁 Script executed: cat package.json | grep -A 5 -B 5 "infima\|docusaurus"Repository: absmartly/docs Length of output: 1370 🌐 Web query:
💡 Result: Infima’s default button text styling uses the CSS variable --ifm-button-color (the “text color used for buttons”) which corresponds to the theme “button text” color, i.e. the variable --ifm-color--contrast- value depending on the button variant (e.g., primary uses the primary-contrast color). Docusaurus/Infima documents that --ifm-button-color is the text color for buttons and can be overridden via CSS variables. [1] Practically, unless you override variables, a regular (primary) Infima button will render its label using the relevant contrast text color token (e.g., “primary contrast” text color) because Infima defines buttons using color/contrast design tokens rather than a single fixed hex value. [1] If you’re trying to locate it in your generated CSS, search for “--ifm-button-color” usage in the compiled Infima/Docusaurus CSS; that variable is what controls the default button label color. [1] Citations: 🌐 Web query:
💡 Result: In Infima, the button text color for the “primary” color uses the contrast-foreground variable: --ifm-color-primary-contrast-foreground (not hardcoded to white). Docusaurus/Infima documents this variable naming and that it is a contrasting foreground color derived from the primary color for light/dark theming. [1] Default value for “primary contrast foreground” is theme-dependent (i.e., depends on what --ifm-color-primary is set to), so there is no single universal default value like “white”. In one documented Infima/Docusaurus preset variable set (preset-classic), the defaults are: - --ifm-color-primary: Citations:
🏁 Script executed: cat src/scss/custom.scss | grep -i "contrast"Repository: absmartly/docs Length of output: 40 🌐 Web query:
💡 Result: Infima does not calculate its contrast foreground and background colors using a real-time, dynamic algorithm in the browser [1][2]. Instead, these values are generated statically during the build process using a color generator tool [1][2]. The generation process relies on predefined SCSS functions—specifically Citations:
🏁 Script executed: python3 << 'EOF'
from colorsys import rgb_to_hsv, hsv_to_rgb
def hex_to_rgb(hex_color):
hex_color = hex_color.lstrip('#')
return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
def rgb_to_hex(rgb):
return '#{:02x}{:02x}{:02x}'.format(int(rgb[0]), int(rgb[1]), int(rgb[2]))
def shade(hex_color, percent):
"""Make a colour darker by percent (0-100)"""
r, g, b = hex_to_rgb(hex_color)
r, g, b = r / 255, g / 255, b / 255
h, s, v = rgb_to_hsv(r, g, b)
v = v * (1 - percent / 100) # reduce brightness
r, g, b = hsv_to_rgb(h, s, v)
return rgb_to_hex((r * 255, g * 255, b * 255))
# Light mode: `#CA3721` with 70% shade
light_primary = '`#CA3721`'
light_text = shade(light_primary, 70)
print(f"Light mode primary: {light_primary}")
print(f"Light mode contrast text (shade 70%): {light_text}")
# Dark mode: `#F4665C` with 90% shade
dark_primary = '`#F4665C`'
dark_text = shade(dark_primary, 90)
print(f"Dark mode primary: {dark_primary}")
print(f"Dark mode contrast text (shade 90%): {dark_text}")
EOFRepository: absmartly/docs Length of output: 204 🏁 Script executed: python3 << 'EOF'
def hex_to_rgb(hex_color):
hex_color = hex_color.lstrip('#')
return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
def get_luminance(rgb):
"""Calculate relative luminance per WCAG"""
r, g, b = [x / 255.0 for x in rgb]
r = r / 12.92 if r <= 0.03928 else pow((r + 0.055) / 1.055, 2.4)
g = g / 12.92 if g <= 0.03928 else pow((g + 0.055) / 1.055, 2.4)
b = b / 12.92 if b <= 0.03928 else pow((b + 0.055) / 1.055, 2.4)
return 0.2126 * r + 0.7152 * g + 0.0722 * b
def contrast_ratio(color1_hex, color2_hex):
"""Calculate WCAG contrast ratio between two colours"""
rgb1 = hex_to_rgb(color1_hex)
rgb2 = hex_to_rgb(color2_hex)
l1 = get_luminance(rgb1)
l2 = get_luminance(rgb2)
lighter = max(l1, l2)
darker = min(l1, l2)
return (lighter + 0.05) / (darker + 0.05)
# Test cases
test_cases = [
("`#CA3721`", "`#1a0a04`"), # Light mode primary + estimated shade 70%
("`#F4665C`", "`#0a0201`"), # Dark mode primary + estimated shade 90%
]
for fg, bg in test_cases:
ratio = contrast_ratio(fg, bg)
passes_aa = "✓ WCAG AA" if ratio >= 4.5 else "✗ WCAG AA"
passes_aaa = "✓ WCAG AAA" if ratio >= 7 else "✗ WCAG AAA"
print(f"Contrast between {fg} and {bg}: {ratio:.2f}:1 {passes_aa} {passes_aaa}")
EOFRepository: absmartly/docs Length of output: 194 Define The light mode primary colour ( 🤖 Prompt for AI Agents |
||
| } | ||
|
|
||
| /* For readability concerns, you should choose a lighter palette in dark mode. */ | ||
| [data-theme="dark"] { | ||
| --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); | ||
| --ifm-color-primary: #F4665C; | ||
| --ifm-color-primary-dark: #f24a3e; | ||
| --ifm-color-primary-darker: #f13c2f; | ||
| --ifm-color-primary-darkest: #e01c0e; | ||
| --ifm-color-primary-light: #f6827a; | ||
| --ifm-color-primary-lighter: #f79088; | ||
| --ifm-color-primary-lightest: #fbbbb6; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| h3 { | ||
| font-family: 'PolySans', var(--ifm-heading-font-family); | ||
| font-weight: 900; | ||
| } | ||
|
|
||
| .button { | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.