Design Sources
Where each value in macos.css comes from.
CupertinoUI takes its values from macOS itself, in two ways: what macOS 27 reports through AppKit’s public API, and measurements of macOS 27 screenshots at one pixel per point. CupertinoUI ships no Apple artwork, fonts or design files.
From AppKit
On macOS 27.0.1, each color was read in the light and dark appearance, along with the text styles and the heights of native controls. Native controls were also drawn offscreen to measure their corners and fills.
| Variables | AppKit | Result |
|---|---|---|
--mac-blue … --mac-gray | NSColor.systemBlue … systemGray | All 13 colors match in light and dark. |
--mac-label … --mac-label-quinary | labelColor … quinaryLabelColor | Match, with opacities rounded to two decimals. |
--mac-fill-primary … --mac-fill-quinary | systemFill … quinarySystemFill | Match. |
--mac-link | linkColor | Matches. |
--mac-selection, --mac-selection-unfocused | selectedContentBackgroundColor, unemphasizedSelectedContentBackgroundColor | Match, the unfocused one over the window background. |
--mac-field | textBackgroundColor | Matches. |
--mac-grid, --mac-border | separatorColor | Match (10%). |
--text-mac-* | NSFont.preferredFont(forTextStyle:), NSLayoutManager line height | All 11 text styles match: size and line height. |
--mac-control-mini … --mac-control-xl | NSButton, NSPopUpButton and NSSegmentedControl at each NSControl.ControlSize | 16, 20, 24, 28 and 36pt, as in the theme. |
--mac-radius-control, --mac-control | NSButton, NSPopUpButton and NSTextField drawn offscreen | 6pt corners and an 8% fill, as in the theme. |
From screenshots
Window chrome, materials and shadows aren’t available through an API, so they were measured from screenshots of a macOS 27 desktop taken at one pixel per point. The desktop demo rebuilds that desktop and is compared with it numerically.
| Variables | Measured from | Result |
|---|---|---|
--mac-window, --mac-content (dark, active and inactive) | Window backgrounds in a dark desktop | #1e1f20, #1e2023 and #202226: macOS tints windows with the wallpaper, so they are bluer than AppKit's #1e1e1e. |
--mac-traffic-* (dark) | The traffic lights of an active window | Match, including the slight top-to-bottom gradient on the close and zoom buttons. |
--mac-radius-window | The outlines of Finder, Safari and System Settings windows | 16pt at all four corners. |
--mac-radius-menu | The outline of an open menu | About 12–13pt, as in the theme. |
--mac-radius-group, --mac-group (dark) | The grouped rows in System Settings | 12pt corners and a 3% white fill, as in the theme. |
--mac-separator (dark) | The lines between those rows | 5% white, as in the theme. AppKit’s separatorColor is 10%, the value --mac-grid uses. |
Materials, shadows, Liquid Glass, Dock | The desktop demo laid over the same screenshot | Tuned until the windows, menu bar and Dock matched. |
The accent color
--mac-accent is systemBlue (#0088ff, and #0091ff in dark). AppKit’s controlAccentColor still reports the older #007aff, while native switches draw a shaded blue that runs from about #0078f9 to #008ffb across the track. The theme keeps systemBlue, the color AppKit names for that blue.
Not confirmed yet
These values don’t have a confirmed macOS 27 source yet. They are next.
--mac-radius-itemand--mac-menu-highlight, which need a screenshot of a menu with a highlighted item.--mac-radius-popoverand--mac-radius-alert, which need screenshots of a popover and an alert.- The light-mode values measured so far only in dark: traffic lights, materials, the group fill and the separator. They need a light-mode desktop screenshot.