new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

GitHub Primer · all subjects

color

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Color is a fundamental part of Primer's visual language

Color is a fundamental part of Primer's visual language. Primer has a color system with principles, patterns, and abstractions that are documented in the Foundations/Color section.

Color utilities should not override component colors

Color utilities should only be used where color is not provided by a component. When a component provides its own color styling, use the component's color system instead of applying color utilities directly.

Color inheritance utility class

Use the `color-fg-inherit` class to set the color inheritance on an element, allowing it to inherit the text color from its parent element.

Primer CSS v18 color class naming changes

Primer CSS v18 changed the naming of color classes. Applications using Primer CSS should check the v18 migration guide to ensure they are using the current class names and to update any outdated color utility classes.

Border color utilities override default border colors

Use border color utilities to override the default border colors applied to elements.

Canvas color migration from sx to CSS variables

Canvas background colors map from sx keywords to CSS variables: canvas.default maps to --bgColor-default, canvas.overlay maps to --overlay-bgColor, canvas.inset maps to --bgColor-inset, canvas.subtle maps to --bgColor-muted.

Foreground color migration from sx to CSS variables

Foreground colors map from sx keywords to CSS variables: fg.default maps to --fgColor-default, fg.muted maps to --fgColor-muted, fg.subtle is eliminated (use --fgColor-muted instead), fg.onEmphasis maps to --fgColor-onEmphasis.

Border color migration from sx to CSS variables

Border colors map from sx keywords to CSS variables: border.default maps to --borderColor-default, border.muted maps to --borderColor-muted, border.subtle is eliminated (use --borderColor-muted instead).

Accent color migration from sx to CSS variables

Accent colors map from sx keywords to CSS variables: accent.fg maps to --fgColor-accent, accent.emphasis maps to --bgColor-accent-emphasis, accent.muted maps to --borderColor-accent-muted, accent.subtle maps to --bgColor-accent-muted.

Status color migration pattern from sx to CSS variables

Status colors (Success, Attention, Severe, Danger, Open, Closed, Done, Sponsors) map from sx keywords to CSS variables using a pattern: {name}.fg maps to --fgColor-{name}, {name}.emphasis maps to --bgColor-{name}-emphasis, {name}.muted maps to --borderColor-{name}-muted, {name}.subtle maps to --bgColor-{name}-muted.

Theme object colors reference CSS variables from Primer Primitives

Colors in the Primer React theme object reference CSS variables from Primer Primitives with raw values as fallbacks. GitHub recommends using CSS variables directly instead of the theme object for colors.

Color scheme inheritance from Primer CSS

GitHub Desktop's color scheme file is the only element inherited directly from Primer CSS. Desktop uses the same palette as Primer CSS with specific exceptions for primary actions and tab styling.

Desktop primary button color is blue

GitHub Desktop uses blue for primary buttons, unlike github.com which uses green buttons.

Desktop tab underline color is blue

GitHub Desktop uses blue for tab underlines, unlike github.com which uses orange.

Dark mode in GitHub Desktop

GitHub Desktop has a dark mode that users can choose in their app preferences. It is displayed using a theme that converts all elements to their dark mode equivalents.

Mobile color system source of truth

The core color system is maintained in the Mobile Design Toolkit Figma file, which is the source of truth for mobile colors. Changes made there propagate to the Figma Team Library, the Mobile Design Toolkit plugin, and eventually into the iOS and Android apps as Xcassets and XML files.

Primer Primitives as color starting point

Mobile design uses Primer Primitives color values as the starting point for working with color. This ensures inheritance of upstream changes to color values.

Spectrum colors for dark mode support

Mobile apps support dark mode by making minor adjustments to Primer colors so they remain clear in dark environments. This is done by increasing brightness to improve contrast and decreasing saturation to reduce vibration, resulting in a light and dark pairing for each color in the Primer system.

Functional colors purpose and benefits

Functional colors abstract Spectrum values into purpose-driven names like iconTertiary or textPrimary. They are more readable and provide context about when to use them. Functional colors abstract dark mode and high contrast mode, so a single functional color maps to different Spectrum values depending on the mode and contrast setting. For example, textSecondary might use gray800 in light normal contrast, gray850 in light high contrast, gray200 in dark normal contrast, and gray150 in dark high contrast.

Functional colors coverage areas

The functional color system currently covers text, icons, backgrounds, badges, and borders. It is described as a work in progress and is expected to expand and refine over time as new use cases and opportunities for abstraction are encountered.

Give your agent this brain