785 lines
23 KiB
HTML
785 lines
23 KiB
HTML
|
|
||
|
|
<!doctype html>
|
||
|
|
<html lang="en" class="no-js">
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="icon" href="../../assets/atlantafx.png">
|
||
|
|
<meta name="generator" content="mkdocs-1.4.3, mkdocs-material-8.5.10">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<title>Global Colors - AtlantaFX</title>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../../assets/stylesheets/main.975780f9.min.css">
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../../assets/stylesheets/palette.2505c338.min.css">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<meta name="theme-color" content="#2094f3">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
|
||
|
|
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="blue" data-md-color-accent="">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
|
||
|
|
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
|
||
|
|
<label class="md-overlay" for="__drawer"></label>
|
||
|
|
<div data-md-component="skip">
|
||
|
|
|
||
|
|
|
||
|
|
<a href="#global-colors" class="md-skip">
|
||
|
|
Skip to content
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div data-md-component="announce">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<header class="md-header" data-md-component="header">
|
||
|
|
<nav class="md-header__inner md-grid" aria-label="Header">
|
||
|
|
<a href="../.." title="AtlantaFX" class="md-header__button md-logo" aria-label="AtlantaFX" data-md-component="logo">
|
||
|
|
|
||
|
|
<img src="../../assets/atlantafx.png" alt="logo">
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<label class="md-header__button md-icon" for="__drawer">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
|
||
|
|
</label>
|
||
|
|
<div class="md-header__title" data-md-component="header-title">
|
||
|
|
<div class="md-header__ellipsis">
|
||
|
|
<div class="md-header__topic">
|
||
|
|
<span class="md-ellipsis">
|
||
|
|
AtlantaFX
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="md-header__topic" data-md-component="header-topic">
|
||
|
|
<span class="md-ellipsis">
|
||
|
|
|
||
|
|
Global Colors
|
||
|
|
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<label class="md-header__button md-icon" for="__search">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
|
||
|
|
</label>
|
||
|
|
<div class="md-search" data-md-component="search" role="dialog">
|
||
|
|
<label class="md-search__overlay" for="__search"></label>
|
||
|
|
<div class="md-search__inner" role="search">
|
||
|
|
<form class="md-search__form" name="search">
|
||
|
|
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
|
||
|
|
<label class="md-search__icon md-icon" for="__search">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
|
||
|
|
</label>
|
||
|
|
<nav class="md-search__options" aria-label="Search">
|
||
|
|
|
||
|
|
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
</form>
|
||
|
|
<div class="md-search__output">
|
||
|
|
<div class="md-search__scrollwrap" data-md-scrollfix>
|
||
|
|
<div class="md-search-result" data-md-component="search-result">
|
||
|
|
<div class="md-search-result__meta">
|
||
|
|
Initializing search
|
||
|
|
</div>
|
||
|
|
<ol class="md-search-result__list"></ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="md-header__source">
|
||
|
|
<a href="https://github.com/mkpaz/atlantafx" title="Go to repository" class="md-source" data-md-component="source">
|
||
|
|
<div class="md-source__icon md-icon">
|
||
|
|
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
|
||
|
|
</div>
|
||
|
|
<div class="md-source__repository">
|
||
|
|
GitHub
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="md-container" data-md-component="container">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<main class="md-main" data-md-component="main">
|
||
|
|
<div class="md-main__inner md-grid">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
|
||
|
|
<div class="md-sidebar__scrollwrap">
|
||
|
|
<div class="md-sidebar__inner">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
|
||
|
|
<label class="md-nav__title" for="__drawer">
|
||
|
|
<a href="../.." title="AtlantaFX" class="md-nav__button md-logo" aria-label="AtlantaFX" data-md-component="logo">
|
||
|
|
|
||
|
|
<img src="../../assets/atlantafx.png" alt="logo">
|
||
|
|
|
||
|
|
</a>
|
||
|
|
AtlantaFX
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<div class="md-nav__source">
|
||
|
|
<a href="https://github.com/mkpaz/atlantafx" title="Go to repository" class="md-source" data-md-component="source">
|
||
|
|
<div class="md-source__icon md-icon">
|
||
|
|
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
|
||
|
|
</div>
|
||
|
|
<div class="md-source__repository">
|
||
|
|
GitHub
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="../.." class="md-nav__link">
|
||
|
|
Overview
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="../../getting-started/" class="md-nav__link">
|
||
|
|
Getting Started
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="../../build/" class="md-nav__link">
|
||
|
|
Build
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="../../theming/" class="md-nav__link">
|
||
|
|
Theming
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="../../fxml/" class="md-nav__link">
|
||
|
|
FXML
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
|
||
|
|
|
||
|
|
|
||
|
|
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" checked>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<label class="md-nav__link" for="__nav_6">
|
||
|
|
Reference
|
||
|
|
<span class="md-nav__icon md-icon"></span>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<nav class="md-nav" aria-label="Reference" data-md-level="1">
|
||
|
|
<label class="md-nav__title" for="__nav_6">
|
||
|
|
<span class="md-nav__icon md-icon"></span>
|
||
|
|
Reference
|
||
|
|
</label>
|
||
|
|
<ul class="md-nav__list" data-md-scrollfix>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="../../apidocs/" class="md-nav__link">
|
||
|
|
API
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="md-nav__item md-nav__item--active">
|
||
|
|
|
||
|
|
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<label class="md-nav__link md-nav__link--active" for="__toc">
|
||
|
|
Global Colors
|
||
|
|
<span class="md-nav__icon md-icon"></span>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<a href="./" class="md-nav__link md-nav__link--active">
|
||
|
|
Global Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<label class="md-nav__title" for="__toc">
|
||
|
|
<span class="md-nav__icon md-icon"></span>
|
||
|
|
Table of contents
|
||
|
|
</label>
|
||
|
|
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#functional-colors" class="md-nav__link">
|
||
|
|
Functional Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<nav class="md-nav" aria-label="Functional Colors">
|
||
|
|
<ul class="md-nav__list">
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#foreground-colors" class="md-nav__link">
|
||
|
|
Foreground Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#background-colors" class="md-nav__link">
|
||
|
|
Background Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#border-colors" class="md-nav__link">
|
||
|
|
Border Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#accent-colors" class="md-nav__link">
|
||
|
|
Accent Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#chart-colors" class="md-nav__link">
|
||
|
|
Chart Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#color-scale" class="md-nav__link">
|
||
|
|
Color Scale
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="../typography/" class="md-nav__link">
|
||
|
|
Typography
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="../controls/" class="md-nav__link">
|
||
|
|
Controls
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
|
||
|
|
<div class="md-sidebar__scrollwrap">
|
||
|
|
<div class="md-sidebar__inner">
|
||
|
|
|
||
|
|
|
||
|
|
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<label class="md-nav__title" for="__toc">
|
||
|
|
<span class="md-nav__icon md-icon"></span>
|
||
|
|
Table of contents
|
||
|
|
</label>
|
||
|
|
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#functional-colors" class="md-nav__link">
|
||
|
|
Functional Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<nav class="md-nav" aria-label="Functional Colors">
|
||
|
|
<ul class="md-nav__list">
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#foreground-colors" class="md-nav__link">
|
||
|
|
Foreground Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#background-colors" class="md-nav__link">
|
||
|
|
Background Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#border-colors" class="md-nav__link">
|
||
|
|
Border Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#accent-colors" class="md-nav__link">
|
||
|
|
Accent Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#chart-colors" class="md-nav__link">
|
||
|
|
Chart Colors
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="md-nav__item">
|
||
|
|
<a href="#color-scale" class="md-nav__link">
|
||
|
|
Color Scale
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="md-content" data-md-component="content">
|
||
|
|
<article class="md-content__inner md-typeset">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<a href="https://github.com/mkpaz/atlantafx/edit/master/docs/reference/global-colors.md" title="Edit this page" class="md-content__button md-icon">
|
||
|
|
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"/></svg>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
|
||
|
|
<h1 id="global-colors">Global Colors</h1>
|
||
|
|
<p>Global variables are defined at the Scene root level. You can preview all of them in the Sampler app on <code>Theme</code> page.</p>
|
||
|
|
<p>AtlantaFX is based on GitHub Primer color system. You can check <a href="https://primer.style/design/foundations/color">GitHub Primer interface guidelines</a> for more detailed instructions. There are functional color variables and color scale variables.</p>
|
||
|
|
<h2 id="functional-colors">Functional Colors</h2>
|
||
|
|
<h3 id="foreground-colors">Foreground Colors</h3>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Color</th>
|
||
|
|
<th>Usage</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-fg-default</code></td>
|
||
|
|
<td>Primary color for text and icons. It should be used for body content, titles and labels.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-fg-muted</code></td>
|
||
|
|
<td>For content that is secondary or that provides additional context but is not critical to understanding the flow of an interface.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-fg-subtle</code></td>
|
||
|
|
<td>For placeholders or decorative foregrounds.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-fg-emphasis</code></td>
|
||
|
|
<td>The text color designed to combine with <code>*-emphasis</code> backgrounds for optimal contrast.</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<h3 id="background-colors">Background Colors</h3>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Color</th>
|
||
|
|
<th>Usage</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-bg-default</code></td>
|
||
|
|
<td>Primary background color.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-bg-overlay</code></td>
|
||
|
|
<td>Background color for popup controls such as popovers and tooltips.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-bg-subtle</code></td>
|
||
|
|
<td>Provides visual rest and contrast against the default background.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-bg-inset</code></td>
|
||
|
|
<td>For a focal point, such as in conversations or activity feeds.</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<h3 id="border-colors">Border Colors</h3>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Color</th>
|
||
|
|
<th>Usage</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-border-default</code></td>
|
||
|
|
<td>Default color to create bounds around content.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-border-muted</code></td>
|
||
|
|
<td>For dividers to emphasize the separation between items, columns or sections.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-border-subtle</code></td>
|
||
|
|
<td>Faint border color.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>-color-shadow-default</code></td>
|
||
|
|
<td>Color for creating shadow effects around controls.</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<h3 id="accent-colors">Accent Colors</h3>
|
||
|
|
<p>The below colors are all accent colors. Use them according to their role. The variable names are self-explaining.</p>
|
||
|
|
<p>Neutral colors. Use to highlight content without any added meaning.</p>
|
||
|
|
<ul>
|
||
|
|
<li><code>-color-neutral-emphasis-plus</code></li>
|
||
|
|
<li><code>-color-neutral-emphasis</code></li>
|
||
|
|
<li><code>-color-neutral-muted</code></li>
|
||
|
|
<li><code>-color-neutral-subtle</code></li>
|
||
|
|
</ul>
|
||
|
|
<p>Accent (or primary/brand) color. Use to draw attention to the particular area or component.</p>
|
||
|
|
<ul>
|
||
|
|
<li><code>-color-accent-fg</code></li>
|
||
|
|
<li><code>-color-accent-emphasis</code></li>
|
||
|
|
<li><code>-color-accent-muted</code></li>
|
||
|
|
<li><code>-color-accent-subtle</code></li>
|
||
|
|
</ul>
|
||
|
|
<p>Success colors. Use to express the completion or positive outcome of a task.</p>
|
||
|
|
<ul>
|
||
|
|
<li><code>-color-success-fg</code></li>
|
||
|
|
<li><code>-color-success-emphasis</code></li>
|
||
|
|
<li><code>-color-success-muted</code></li>
|
||
|
|
<li><code>-color-success-subtle</code></li>
|
||
|
|
</ul>
|
||
|
|
<p>Attention colors. Use to warn of pending tasks or highlight active content.</p>
|
||
|
|
<ul>
|
||
|
|
<li><code>-color-warning-fg</code></li>
|
||
|
|
<li><code>-color-warning-emphasis</code></li>
|
||
|
|
<li><code>-color-warning-muted</code></li>
|
||
|
|
<li><code>-color-warning-subtle</code></li>
|
||
|
|
</ul>
|
||
|
|
<p>Danger colors. Use to inform of error or another negative message.</p>
|
||
|
|
<ul>
|
||
|
|
<li><code>-color-danger-fg</code></li>
|
||
|
|
<li><code>-color-danger-emphasis</code></li>
|
||
|
|
<li><code>-color-danger-muted</code></li>
|
||
|
|
<li><code>-color-danger-subtle</code></li>
|
||
|
|
</ul>
|
||
|
|
<p><em>Note that functional color values are not always picked from the color palette. They can have its own unique value, e.g. to add opacity.</em></p>
|
||
|
|
<h3 id="chart-colors">Chart Colors</h3>
|
||
|
|
<p>Chart colors are named as <code>-color-chart-[1-8]</code> and are used, well, for charts. The reason they are defined as global variables is to allow them to be used in controls that do not have <code>.chart</code> class, e.g. for drawing or diagrams.</p>
|
||
|
|
<h2 id="color-scale">Color Scale</h2>
|
||
|
|
<p>Generally, scale variables only supposed to be used by theme devs as a replacement of dynamic brightness calculation functions. Avoid referencing them directly when building UI that needs to adapt to different color themes. Instead, use the functional variables listed above. All legitimate functional color combinations are guaranteed to look good in all color themes, because they need to maintain a certain amount of contrast. In rare cases, you may need to use scale variables to define custom functional variables in your application.</p>
|
||
|
|
<p>Each color scale consists of 10 shades from 0 to 9.</p>
|
||
|
|
<ul>
|
||
|
|
<li><code>-color-dark</code></li>
|
||
|
|
<li><code>-color-light</code></li>
|
||
|
|
<li><code>-color-base-[0-9]</code></li>
|
||
|
|
<li><code>-color-accent-[0-9]</code></li>
|
||
|
|
<li><code>-color-success-[0-9]</code></li>
|
||
|
|
<li><code>-color-warning-[0-9]</code></li>
|
||
|
|
<li><code>-color-danger-[0-9]</code></li>
|
||
|
|
</ul>
|
||
|
|
<p><img alt="Color Scale" src="../../assets/images/color-scale.png" /></p>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a href="#" class="md-top md-icon" data-md-component="top" hidden>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
|
||
|
|
Back to top
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer class="md-footer">
|
||
|
|
|
||
|
|
|
||
|
|
<nav class="md-footer__inner md-grid" aria-label="Footer" >
|
||
|
|
|
||
|
|
|
||
|
|
<a href="../../apidocs/" class="md-footer__link md-footer__link--prev" aria-label="Previous: API" rel="prev">
|
||
|
|
<div class="md-footer__button md-icon">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
|
||
|
|
</div>
|
||
|
|
<div class="md-footer__title">
|
||
|
|
<div class="md-ellipsis">
|
||
|
|
<span class="md-footer__direction">
|
||
|
|
Previous
|
||
|
|
</span>
|
||
|
|
API
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<a href="../typography/" class="md-footer__link md-footer__link--next" aria-label="Next: Typography" rel="next">
|
||
|
|
<div class="md-footer__title">
|
||
|
|
<div class="md-ellipsis">
|
||
|
|
<span class="md-footer__direction">
|
||
|
|
Next
|
||
|
|
</span>
|
||
|
|
Typography
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="md-footer__button md-icon">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="md-footer-meta md-typeset">
|
||
|
|
<div class="md-footer-meta__inner md-grid">
|
||
|
|
<div class="md-copyright">
|
||
|
|
|
||
|
|
|
||
|
|
Made with
|
||
|
|
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
|
||
|
|
Material for MkDocs
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="md-dialog" data-md-component="dialog">
|
||
|
|
<div class="md-dialog__inner md-typeset"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.sections", "navigation.expand", "navigation.path", "navigation.top"], "search": "../../assets/javascripts/workers/search.16e2a7d4.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version.title": "Select version"}}</script>
|
||
|
|
|
||
|
|
|
||
|
|
<script src="../../assets/javascripts/bundle.5a2dcb6a.min.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|