Skip to content

Instantly share code, notes, and snippets.

@oelna
Created October 13, 2023 13:05
Show Gist options
  • Save oelna/dc4d77e80f15f81f6a6fce3fc19088be to your computer and use it in GitHub Desktop.
Save oelna/dc4d77e80f15f81f6a6fce3fc19088be to your computer and use it in GitHub Desktop.
Native OS styles exposed in the Browser via CSS
/* SYSTEM FONTS */
.body { font: -apple-system-body; }
.headline { font: -apple-system-headline; }
.subheadline { font: -apple-system-subheadline; }
.caption1 { font: -apple-system-caption1; }
.caption2 { font: -apple-system-caption2; }
.footnote { font: -apple-system-footnote; }
.short-body { font: -apple-system-short-body; }
.short-headline { font: -apple-system-short-headline; }
.short-subheadline { font: -apple-system-short-subheadline; }
.short-caption1 { font: -apple-system-short-caption1; }
.short-footnote { font: -apple-system-short-footnote; }
.tall-body { font: -apple-system-tall-body; }
/* SYSTEM COLORS https://blog.jim-nielsen.com/2021/css-system-colors/ */
.colors {
color: AccentColor; /* Background of accented user interface controls */
color: AccentColorText; /* Text of accented user interface controls */
color: ActiveText; /* Text of active links */
color: ButtonBorder; /* Base border color of controls */
color: ButtonFace; /* Background color of controls */
color: ButtonText; /* Text color of controls */
color: Canvas; /* Background of application content or documents */
color: CanvasText; /* Text color in application content or documents */
color: Field; /* Background of input fields */
color: FieldText; /* Text in input fields */
color: GrayText; /* Text color for disabled items (e.g. a disabled control) */
color: Highlight; /* Background of selected items */
color: HighlightText; /* Text color of selected items */
color: LinkText; /* Text of non-active, non-visited links */
color: Mark; /* Background of text that has been specially marked (such as by the HTML mark element) */
color: MarkText; /* Text that has been specially marked (such as by the HTML mark element) */
color: VisitedText; /* Text of visited links */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment