felixfoertsch/felixfoertsch.de
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit, add Publish, add minimal theme, add content

Browse Source
This commit is contained in:
Felix Förtsch
2024-03-24 20:24:51 +01:00
commit cd2f440141
1240 changed files with 194709 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Content/Archive/220123-ff.de v10 felixfoertsch.github.io/_site/2020/08/05/Apple-Colors.html
+417
View File
@@ -0,0 +1,417 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<link href="https://gmpg.org/xfn/11" rel="profile" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Enable responsiveness on mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<title>
Apple Colors in SCSS &middot; felixfoertsch.de
</title>
<!-- CSS -->
<link rel="stylesheet" href="/assets/css/main.css" />
<!-- Icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/favicon.png" />
<link rel="shortcut icon" href="/favicon.png" />
<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml" />
</head>
<body class="post">
<nav class="navbar navbar-dark bg-dark navbar-expand-md ">
<div class="container-fluid">
<a class="nav-link navbar-brand " href="/"><img src="/favicon.png" width="30" height="30" alt=""> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-toggle" aria-controls="navigation-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation-toggle">
<div class="navbar-nav">
<a class="nav-link" href="/about">About</a>
<a class="nav-link" href="/repositories">Repositories</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Categories</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item " href="/category/Design">Design</a></li>
<li><a class="dropdown-item " href="/category/Programming">Programming</a></li>
<li><a class="dropdown-item " href="/category/Tips">Tips</a></li>
<li><a class="dropdown-item " href="/category/summaries">Summaries</a></li>
<li><a class="dropdown-item " href="/category/tutorials">Tutorials</a></li>
</ul>
</li>
<a class="nav-link" title="Tags" aria-label="Tags" href="/tags">Tags</a>
<a class="nav-link" title="Subscribe" aria-label="Subscribe" href="/feed.xml">RSS</a>
<span></span>
</div>
</div>
</div>
</nav>
<main class="container py-3">
<header class="row py-3">
<div class="col">
<h1 class="display-1">Apple Colors in SCSS</h1>
</div>
</header>
<div class="row">
<div class="col">
<div class="card-subtitle mb-2 text-muted">
<span class="">2020-08-05</span>
<span class="post-categories">
&bull;
<a href="/category/Design">Design</a>
</span>
</div>
<div>
<p>Colors have a big impact on how software looks. Personally, I think macOS and iOS are beautiful and the colors are very well selected. Since I am not a designer, but I want to understand <strong>why</strong> these systems always looks so good, I started designing this website using the Apple colors. The first step I took was creating variables for the Apple colors from the <a href="https://developer.apple.com/design/human-interface-guidelines/">Human Interface Guidelines</a> (<a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/">iOS</a>/<a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/">macOS</a>).</p>
<p>I published them on GitHub as gists so you can use them, too. It’s just the raw variables; but I could not find them anywhere else in this SCSS form. Gist <a href="https://gist.github.com/felixfoertsch/52904ab569521158dd8494024c0a5d77">macOS-colors-dark.scss</a>, <a href="https://gist.github.com/felixfoertsch/36922ee9a74d9bd0c0887f62cecb7041">macOS-colors-light.scss</a>, <a href="https://gist.github.com/felixfoertsch/69dd59c9e541788056ee6c70928c3769">iOS-colors-dark.scss</a>, <a href="https://gist.github.com/felixfoertsch/e4c73a673bd769218c39c17ac09127aa">iOS-colors-light.scss</a>.</p>
<p>Read more for the actual variables.</p>
<!-- more -->
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// macOS-colors-dark.scss</span>
<span class="nv">$macOS-systemBlue-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">10</span><span class="o">,</span> <span class="m">132</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemBrown-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">172</span><span class="o">,</span> <span class="m">142</span><span class="o">,</span> <span class="m">104</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemGray-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">152</span><span class="o">,</span> <span class="m">152</span><span class="o">,</span> <span class="m">157</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemGreen-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">50</span><span class="o">,</span> <span class="m">215</span><span class="o">,</span> <span class="m">75</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemIndigo-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">94</span><span class="o">,</span> <span class="m">92</span><span class="o">,</span> <span class="m">230</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemOrange-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">159</span><span class="o">,</span> <span class="m">10</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemPink-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">55</span><span class="o">,</span> <span class="m">95</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemPurple-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">191</span><span class="o">,</span> <span class="m">90</span><span class="o">,</span> <span class="m">242</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemRed-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">69</span><span class="o">,</span> <span class="m">58</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemTeal-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">100</span><span class="o">,</span> <span class="m">210</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemYellow-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">214</span><span class="o">,</span> <span class="m">10</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-alternateSelectedControl-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">88</span><span class="o">,</span> <span class="m">208</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-alternateSelectedControlText-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-controlBackground-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">30</span><span class="o">,</span> <span class="m">30</span><span class="o">,</span> <span class="m">30</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-controlText-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.8</span><span class="p">);</span>
<span class="nv">$macOS-disabledControlText-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.2</span><span class="p">);</span>
<span class="nv">$macOS-grid-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
<span class="nv">$macOS-headerText-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-highlight-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">180</span><span class="o">,</span> <span class="m">180</span><span class="o">,</span> <span class="m">180</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-labelColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.8</span><span class="p">);</span>
<span class="nv">$macOS-linkColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">65</span><span class="o">,</span> <span class="m">156</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-placeholderTextColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.2</span><span class="p">);</span>
<span class="nv">$macOS-quaternaryLabelColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
<span class="nv">$macOS-secondaryLabelColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.5</span><span class="p">);</span>
<span class="nv">$macOS-selectedContentBackgroundColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">88</span><span class="o">,</span> <span class="m">208</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-selectedControlColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">63</span><span class="o">,</span> <span class="m">99</span><span class="o">,</span> <span class="m">109</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-selectedControlTextColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.8</span><span class="p">);</span>
<span class="nv">$macOS-selectedMenuItemTextColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-selectedTextBackgroundColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">63</span><span class="o">,</span> <span class="m">99</span><span class="o">,</span> <span class="m">139</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-selectedTextColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-separatorColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
<span class="nv">$macOS-shadowColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="p">);</span>
<span class="nv">$macOS-tertiaryLabelColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.2</span><span class="p">);</span>
<span class="nv">$macOS-textBackgroundColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">30</span><span class="o">,</span> <span class="m">30</span><span class="o">,</span> <span class="m">30</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-textColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-underPageBackgroundColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">40</span><span class="o">,</span> <span class="m">40</span><span class="o">,</span> <span class="m">40</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-unemphasizedSelectedContentBackgroundColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">70</span><span class="o">,</span> <span class="m">70</span><span class="o">,</span> <span class="m">70</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-unemphasizedSelectedTextBackgroundColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">70</span><span class="o">,</span> <span class="m">70</span><span class="o">,</span> <span class="m">70</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-unemphasizedSelectedTextColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-windowBackgroundColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">50</span><span class="o">,</span> <span class="m">50</span><span class="o">,</span> <span class="m">50</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-windowFrameTextColor-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.8</span><span class="p">);</span>
</code></pre></div></div>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// macOS-colors-light.scss</span>
<span class="nv">$macOS-systemBlue</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">122</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemBrown</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">162</span><span class="o">,</span> <span class="m">132</span><span class="o">,</span> <span class="m">94</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemGray</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">142</span><span class="o">,</span> <span class="m">142</span><span class="o">,</span> <span class="m">147</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemGreen</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">40</span><span class="o">,</span> <span class="m">205</span><span class="o">,</span> <span class="m">65</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemIndigo</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">88</span><span class="o">,</span> <span class="m">86</span><span class="o">,</span> <span class="m">214</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemOrange</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">149</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemPink</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">45</span><span class="o">,</span> <span class="m">85</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemPurple</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">175</span><span class="o">,</span> <span class="m">82</span><span class="o">,</span> <span class="m">222</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemRed</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">59</span><span class="o">,</span> <span class="m">48</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemTeal</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">90</span><span class="o">,</span> <span class="m">200</span><span class="o">,</span> <span class="m">250</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-systemYellow</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">204</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-alternateSelectedControl</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">99</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-alternateSelectedControlText</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-controlBackground</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-controlText</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.8</span><span class="p">);</span>
<span class="nv">$macOS-disabledControlText</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.2</span><span class="p">);</span>
<span class="nv">$macOS-grid</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">204</span><span class="o">,</span> <span class="m">204</span><span class="o">,</span> <span class="m">204</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-headerText</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.8</span><span class="p">);</span>
<span class="nv">$macOS-highlight</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-labelColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.8</span><span class="p">);</span>
<span class="nv">$macOS-linkColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">104</span><span class="o">,</span> <span class="m">218</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-placeholderTextColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.2</span><span class="p">);</span>
<span class="nv">$macOS-quaternaryLabelColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
<span class="nv">$macOS-secondaryLabelColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span> <span class="o">,</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.5</span><span class="p">);</span>
<span class="nv">$macOS-selectedContentBackgroundColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">99</span><span class="o">,</span> <span class="m">225</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-selectedControlColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">179</span><span class="o">,</span> <span class="m">215</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-selectedControlTextColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.8</span><span class="p">);</span>
<span class="nv">$macOS-selectedMenuItemTextColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-selectedTextBackgroundColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">179</span><span class="o">,</span> <span class="m">215</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-selectedTextColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-separatorColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
<span class="nv">$macOS-shadowColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-tertiaryLabelColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.2</span><span class="p">);</span>
<span class="nv">$macOS-textBackgroundColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-textColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-underPageBackgroundColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">150</span><span class="o">,</span> <span class="m">150</span><span class="o">,</span> <span class="m">150</span><span class="o">,</span> <span class="m">0</span><span class="mi">.9</span><span class="p">);</span>
<span class="nv">$macOS-unemphasizedSelectedContentBackgroundColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">220</span><span class="o">,</span> <span class="m">220</span><span class="o">,</span> <span class="m">220</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-unemphasizedSelectedTextBackgroundColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">220</span><span class="o">,</span> <span class="m">220</span><span class="o">,</span> <span class="m">220</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-unemphasizedSelectedTextColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-windowBackgroundColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">236</span><span class="o">,</span> <span class="m">236</span><span class="o">,</span> <span class="m">236</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$macOS-windowFrameTextColor</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="mi">.8</span><span class="p">);</span>
</code></pre></div></div>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// iOS-colors-dark.scss</span>
<span class="nv">$iOS-systemBlue-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">10</span><span class="o">,</span> <span class="m">132</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGreen-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">48</span><span class="o">,</span> <span class="m">209</span><span class="o">,</span> <span class="m">88</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemIndigo-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">94</span><span class="o">,</span> <span class="m">92</span><span class="o">,</span> <span class="m">230</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemOrange-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">159</span><span class="o">,</span> <span class="m">10</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemPink-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">55</span><span class="o">,</span> <span class="m">95</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemPurple-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">191</span><span class="o">,</span> <span class="m">90</span><span class="o">,</span> <span class="m">242</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemRed-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">69</span><span class="o">,</span> <span class="m">58</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemTeal-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">100</span><span class="o">,</span> <span class="m">210</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemYellow-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">214</span><span class="o">,</span> <span class="m">10</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">142</span><span class="o">,</span> <span class="m">142</span><span class="o">,</span> <span class="m">147</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray2-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">99</span><span class="o">,</span> <span class="m">99</span><span class="o">,</span> <span class="m">102</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray3-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">72</span><span class="o">,</span> <span class="m">72</span><span class="o">,</span> <span class="m">74</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray4-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">58</span><span class="o">,</span> <span class="m">58</span><span class="o">,</span> <span class="m">60</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray5-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">44</span><span class="o">,</span> <span class="m">44</span><span class="o">,</span> <span class="m">46</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray6-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">28</span><span class="o">,</span> <span class="m">28</span><span class="o">,</span> <span class="m">30</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-label-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-secondaryLabel-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">235</span><span class="o">,</span> <span class="m">235</span><span class="o">,</span> <span class="m">245</span><span class="o">,</span> <span class="m">0</span><span class="mi">.6</span><span class="p">);</span>
<span class="nv">$iOS-tertiaryLabel-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">235</span><span class="o">,</span> <span class="m">235</span><span class="o">,</span> <span class="m">245</span><span class="o">,</span> <span class="m">0</span><span class="mi">.3</span><span class="p">);</span>
<span class="nv">$iOS-quaternaryLabel-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">235</span><span class="o">,</span> <span class="m">235</span><span class="o">,</span> <span class="m">245</span><span class="o">,</span> <span class="m">0</span><span class="mi">.2</span><span class="p">);</span>
<span class="nv">$iOS-placeholderText-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">235</span><span class="o">,</span> <span class="m">235</span><span class="o">,</span> <span class="m">245</span><span class="o">,</span> <span class="m">0</span><span class="mi">.3</span><span class="p">);</span>
<span class="nv">$iOS-separator-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">84</span><span class="o">,</span> <span class="m">84</span><span class="o">,</span> <span class="m">88</span><span class="o">,</span> <span class="m">0</span><span class="mi">.3</span><span class="p">);</span>
<span class="nv">$iOS-opaqueSeparator-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">56</span><span class="o">,</span> <span class="m">56</span><span class="o">,</span> <span class="m">58</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-link-dark</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">9</span><span class="o">,</span> <span class="m">132</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
</code></pre></div></div>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// iOS-colors-light.scss</span>
<span class="nv">$iOS-systemBlue</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">122</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGreen</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">52</span><span class="o">,</span> <span class="m">199</span><span class="o">,</span> <span class="m">89</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemIndigo</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">88</span><span class="o">,</span> <span class="m">86</span><span class="o">,</span> <span class="m">214</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemOrange</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">149</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemPink</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">45</span><span class="o">,</span> <span class="m">85</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemPurple</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">175</span><span class="o">,</span> <span class="m">82</span><span class="o">,</span> <span class="m">222</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemRed</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">59</span><span class="o">,</span> <span class="m">48</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemTeal</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">90</span><span class="o">,</span> <span class="m">200</span><span class="o">,</span> <span class="m">250</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemYellow</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">204</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">142</span><span class="o">,</span> <span class="m">142</span><span class="o">,</span> <span class="m">147</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray2</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">174</span><span class="o">,</span> <span class="m">174</span><span class="o">,</span> <span class="m">178</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray3</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">199</span><span class="o">,</span> <span class="m">199</span><span class="o">,</span> <span class="m">204</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray4</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">209</span><span class="o">,</span> <span class="m">209</span><span class="o">,</span> <span class="m">214</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray5</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">229</span><span class="o">,</span> <span class="m">229</span><span class="o">,</span> <span class="m">234</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-systemGray6</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">242</span><span class="o">,</span> <span class="m">242</span><span class="o">,</span> <span class="m">247</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-label</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-secondaryLabel</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">60</span><span class="o">,</span> <span class="m">60</span><span class="o">,</span> <span class="m">67</span><span class="o">,</span> <span class="m">0</span><span class="mi">.6</span><span class="p">);</span>
<span class="nv">$iOS-tertiaryLabel</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">60</span><span class="o">,</span> <span class="m">60</span><span class="o">,</span> <span class="m">67</span><span class="o">,</span> <span class="m">0</span><span class="mi">.3</span><span class="p">);</span>
<span class="nv">$iOS-quaternaryLabel</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">60</span><span class="o">,</span> <span class="m">60</span><span class="o">,</span> <span class="m">67</span><span class="o">,</span> <span class="m">0</span><span class="mi">.2</span><span class="p">);</span>
<span class="nv">$iOS-placeholderText</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">60</span><span class="o">,</span> <span class="m">60</span><span class="o">,</span> <span class="m">67</span><span class="o">,</span> <span class="m">0</span><span class="mi">.3</span><span class="p">);</span>
<span class="nv">$iOS-separator</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">60</span><span class="o">,</span> <span class="m">60</span><span class="o">,</span> <span class="m">67</span><span class="o">,</span> <span class="m">0</span><span class="mi">.3</span><span class="p">);</span>
<span class="nv">$iOS-opaqueSeparator</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">198</span><span class="o">,</span> <span class="m">198</span><span class="o">,</span> <span class="m">200</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
<span class="nv">$iOS-link</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">122</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">1</span><span class="p">);</span>
</code></pre></div></div>
</div>
<div class="py-3">
<a href="/tags#english"><span class="btn btn-sm btn-secondary"><svg height="12" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg> English</span></a>
</div>
<section>
<h2>Related Posts</h2>
<ul>
<li>
<a href="/2020/08/04/Ideas.html"> Ideas</a>
<span class="badge bg-secondary">2020-08-04</span>
</li>
<li>
<a href="/2020/08/02/Strategies-from-the-Happiness-Lab.html"> Strategies from the Happiness Lab</a>
<span class="badge bg-secondary">2020-08-02</span>
</li>
<li>
<a href="/2020/07/20/The-Collection.html"> The Collection</a>
<span class="badge bg-secondary"><svg height="12" class="octicon octicon-sync" viewBox="0 0 16 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M8 2.5a5.487 5.487 0 00-4.131 1.869l1.204 1.204A.25.25 0 014.896 6H1.25A.25.25 0 011 5.75V2.104a.25.25 0 01.427-.177l1.38 1.38A7.001 7.001 0 0114.95 7.16a.75.75 0 11-1.49.178A5.501 5.501 0 008 2.5zM1.705 8.005a.75.75 0 01.834.656 5.501 5.501 0 009.592 2.97l-1.204-1.204a.25.25 0 01.177-.427h3.646a.25.25 0 01.25.25v3.646a.25.25 0 01-.427.177l-1.38-1.38A7.001 7.001 0 011.05 8.84a.75.75 0 01.656-.834z"></path></svg> 2020-08-28</span>
</li>
</ul>
</section>
</div>
</div>
</main>
<footer class="container-fluid py-3">
<script src="/assets/js/bootstrap.min.js" crossorigin="anonymous"></script>
</footer>
</body>
</html>