@dscout/particle 1.0.0-alpha.2 → 1.0.0-alpha.3

package/styles/utilities/_colors.scss

@@ -1,606 +1,77 @@
-/*
-@styleguide
-@title Text Colors
-
-Use the color class names to change the font color of elements.
-The following color names are accepted:
-
-<div class="flex align-items--stretch wrap">
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--main padding--1">main</p>
-  </div>
-
-  <div class="bg-color--main" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">invert</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--gray-1 padding--1">gray-1</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--gray-2 padding--1">gray-2</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--gray-3 padding--1">gray-3</p>
-  </div>
-</div>
-
-Accent and interface-specific colors:
-
-<div class="flex align-items--stretch wrap">
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--note padding--1">note</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--marker padding--1">marker</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--test padding--1">test</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--dscout padding--1">dscout</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--close padding--1">close</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--coachmark padding--1">coachmark</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--success padding--1">success</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--alert padding--1">alert</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--archive padding--1">archive</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--diary padding--1">diary</p>
-  </div>
-</div>
-
-Part colors:
-
-<div class="flex align-items--stretch wrap">
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-0 padding--1">part-0</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-1 padding--1">part-1</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-2 padding--1">part-2</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-3 padding--1">part-3</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-4 padding--1">part-4</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-5 padding--1">part-5</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-6 padding--1">part-6</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-7 padding--1">part-7</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-8 padding--1">part-8</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-9 padding--1">part-9</p>
-  </div>
-</div>
-
-<p class="color--main padding--1">Default text color</p>
-
-```html
-<p class="color--main padding--1">Default text color</p>
-```
-
-<div class="bg-color--main">
-  <p class="color--gray-1 padding--1">Gray 1 color</p>
-</div>
-
-```html
-<div class="bg-color--main">
-  <p class="color--gray-1 padding--1">Gray 1 color</p>
-</div>
-```
-
-<p class="color--dscout">dscout blue</p>
-
-```html
-<p class="color--dscout">dscout blue</p>
-```
-
-<p class="color--part-3">Part 4 color</p>
-
-```html
-<p class="color--part-3">Part 4 color</p>
-```
-*/
-
-.color--main         { color: var(--color--main); }
-
-.color--gray-1       { color: var(--color--gray-1); }
-.color--gray-2       { color: var(--color--gray-2); }
-.color--gray-3     { color: var(--color--gray-3); }
-.color--gray-4         { color: var(--color--gray-4); }
-.color--gray-5        { color: var(--color--gray-5); }
-.color--gray-6          { color: var(--color--gray-6); }
-
-.color--invert       { color: var(--color--invert); }
-
-.color--none         { color: var(--color--none); }
-
-.color--dscout     { color: var(--color--dscout); }
-.color--alert      { color: var(--color--alert); }
-.color--coachmark  { color: var(--color--coachmark); }
-
-.color--close      { color: var(--color--close); }
-.color--success    { color: var(--color--success); }
-.color--archive    { color: var(--color--archive); }
-.color--note       { color: var(--color--note); }
-.color--marker     { color: var(--color--marker); }
-.color--test       { color: var(--color--test); }
-
-.color--diary    { color: var(--color--diary); }
-.color--live     { color: var(--color--live); }
-.color--screener { color: var(--color--screener); }
-
-.color--part-0 { color: var(--color--part-0); }
-.color--part-1 { color: var(--color--part-1); }
-.color--part-2 { color: var(--color--part-2); }
-.color--part-3 { color: var(--color--part-3); }
-.color--part-4 { color: var(--color--part-4); }
-.color--part-5 { color: var(--color--part-5); }
-.color--part-6 { color: var(--color--part-6); }
-.color--part-7 { color: var(--color--part-7); }
-.color--part-8 { color: var(--color--part-8); }
-.color--part-9 { color: var(--color--part-9); }
-
-/*
-@styleguide
-@title Background Colors
-
-You can use all of the same colors as the Text Colors, just prefix the class
-name with <span class="display--ib">`bg-`</span>.
-
-The background colors available are:
-
-<div class="flex align-items--stretch wrap">
-  <div class="bg-color--main" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1 padding--1">main</p>
-  </div>
-
-  <div class="bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--main padding--1">invert</p>
-  </div>
-
-  <div class="bg-color--gray-1" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">gray-1</p>
-  </div>
-
-  <div class="bg-color--gray-2" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">gray-2</p>
-  </div>
-
-  <div class="bg-color--gray-3" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">gray-3</p>
-  </div>
-
-  <div class="bg-color--gray-4" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">gray-4</p>
-  </div>
-
-  <div class="bg-color--gray-5" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--main padding--1">gray-5</p>
-  </div>
-
-  <div class="bg-color--gray-6" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--main padding--1">gray-6</p>
-  </div>
-
-  <div class="bg-color--note" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--main padding--1">note</p>
-  </div>
-
-  <div class="bg-color--marker" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--main padding--1">marker</p>
-  </div>
-
-  <div class="bg-color--test" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">test</p>
-  </div>
-
-  <div class="bg-color--dscout" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">dscout</p>
-  </div>
-
-  <div class="bg-color--close" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">close</p>
-  </div>
-
-  <div class="bg-color--coachmark" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">coachmark</p>
-  </div>
-
-  <div class="bg-color--success" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">success</p>
-  </div>
-
-  <div class="bg-color--alert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">alert</p>
-  </div>
-
-  <div class="bg-color--archive" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">archive</p>
-  </div>
-
-  <div class="bg-color--diary" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">diary</p>
-  </div>
-
-  <div class="bg-color--part-0" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">part-0</p>
-  </div>
-
-  <div class="bg-color--part-1" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">part-1</p>
-  </div>
-
-  <div class="bg-color--part-2" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">part-2</p>
-  </div>
-
-  <div class="bg-color--part-3" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">part-3</p>
-  </div>
-
-  <div class="bg-color--part-4" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">part-4</p>
-  </div>
-
-  <div class="bg-color--part-5" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">part-5</p>
-  </div>
-
-  <div class="bg-color--part-6" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">part-6</p>
-  </div>
-
-  <div class="bg-color--part-7" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">part-7</p>
-  </div>
-
-  <div class="bg-color--part-8" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">part-8</p>
-  </div>
-
-  <div class="bg-color--part-9" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">part-9</p>
-  </div>
-</div>
-
-```html
-<div class="bg-color--dscout">
-  <p class="color--invert padding--1">
-    This text is white against a dscout blue background
-  </p>
-</div>
-```
-*/
-
-.bg-color--main         { background-color: var(--color--main); }
-.bg-color--gray-1       { background-color: var(--color--gray-1); }
-.bg-color--gray-2       { background-color: var(--color--gray-2); }
-.bg-color--gray-3       { background-color: var(--color--gray-3); }
-.bg-color--gray-4       { background-color: var(--color--gray-4); }
-.bg-color--gray-5       { background-color: var(--color--gray-5); }
-.bg-color--gray-6       { background-color: var(--color--gray-6); }
-.bg-color--invert       { background-color: var(--color--invert); }
-.bg-color--none         { background-color: var(--color--none); }
-
-.bg-color--dscout    { background-color: var(--color--dscout); }
-.bg-color--alert     { background-color: var(--color--alert); }
-.bg-color--coachmark { background-color: var(--color--coachmark); }
-
-.bg-color--close     { background-color: var(--color--close); }
-.bg-color--success   { background-color: var(--color--success); }
-.bg-color--archive   { background-color: var(--color--archive); }
-.bg-color--note   { background-color: var(--color--note); }
-.bg-color--marker { background-color: var(--color--marker); }
-.bg-color--test   { background-color: var(--color--test); }
-
-.bg-color--diary    { background-color: var(--color--diary); }
-.bg-color--live     { background-color: var(--color--live); }
-.bg-color--screener { background-color: var(--color--screener); }
-
-.bg-color--part-0 { background-color: var(--color--part-0); }
-.bg-color--part-1 { background-color: var(--color--part-1); }
-.bg-color--part-2 { background-color: var(--color--part-2); }
-.bg-color--part-3 { background-color: var(--color--part-3); }
-.bg-color--part-4 { background-color: var(--color--part-4); }
-.bg-color--part-5 { background-color: var(--color--part-5); }
-.bg-color--part-6 { background-color: var(--color--part-6); }
-.bg-color--part-7 { background-color: var(--color--part-7); }
-.bg-color--part-8 { background-color: var(--color--part-8); }
-.bg-color--part-9 { background-color: var(--color--part-9); }
-
-/*
-@styleguide
-@title Border Colors
-
-Border color class names can be used in the same way as background color class
-names. The prefix for border color class names is
-<span class="display--ib">`b-`</span>.
-
-<div class="flex align-items--stretch wrap">
-  <div class="border b-color--main" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--main padding--1 padding--1">main</p>
-  </div>
-
-  <div class="border b-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--invert padding--1">invert</p>
-  </div>
-
-  <div class="border b-color--gray-1 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--gray-1 padding--1">gray-1</p>
-  </div>
-
-  <div class="border b-color--gray-2 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--gray-2 padding--1">gray-2</p>
-  </div>
-
-  <div class="border b-color--gray-3 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--gray-3 padding--1">gray-3</p>
-  </div>
-
-  <div class="border b-color--gray-4 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--gray-4 padding--1">gray-4</p>
-  </div>
-
-  <div class="border b-color--gray-5" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--gray-5 padding--1">gray-5</p>
-  </div>
-
-  <div class="border b-color--gray-6" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--gray-6 padding--1">gray-6</p>
-  </div>
-
-  <div class="border b-color--note bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--note padding--1">note</p>
-  </div>
-
-  <div class="border b-color--marker bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--marker padding--1">marker</p>
-  </div>
-
-  <div class="border b-color--test bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--test padding--1">test</p>
-  </div>
-
-  <div class="border b-color--dscout bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--dscout padding--1">dscout</p>
-  </div>
-
-  <div class="border b-color--close bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--close padding--1">close</p>
-  </div>
-
-  <div class="border b-color--coachmark bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--coachmark padding--1">coachmark</p>
-  </div>
-
-  <div class="border b-color--success bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--success padding--1">success</p>
-  </div>
-
-  <div class="border b-color--alert bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--alert padding--1">alert</p>
-  </div>
-
-  <div class="border b-color--archive bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--archive padding--1">archive</p>
-  </div>
-
-  <div class="border b-color--diary bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--diary padding--1">diary</p>
-  </div>
-
-  <div class="border b-color--part-0 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-0 padding--1">part-0</p>
-  </div>
-
-  <div class="border b-color--part-1 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-1 padding--1">part-1</p>
-  </div>
-
-  <div class="border b-color--part-2 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-2 padding--1">part-2</p>
-  </div>
-
-  <div class="border b-color--part-3 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-3 padding--1">part-3</p>
-  </div>
-
-  <div class="border b-color--part-4 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-4 padding--1">part-4</p>
-  </div>
-
-  <div class="border b-color--part-5 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-5 padding--1">part-5</p>
-  </div>
-
-  <div class="border b-color--part-6 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-6 padding--1">part-6</p>
-  </div>
-
-  <div class="border b-color--part-7 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-7 padding--1">part-7</p>
-  </div>
-
-  <div class="border b-color--part-8 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-8 padding--1">part-8</p>
-  </div>
-
-  <div class="border b-color--part-9 bg-color--invert" style="border-radius: .313rem; margin: .75em; width: fit-content;">
-    <p class="color--part-9 padding--1">part-9</p>
-  </div>
-</div>
-
-<div class="border b-color--dscout">
-  <p>This container has a dscout blue border on all sides.</p>
-</div>
-
-    <div class="border b-color--dscout">
-      <p>This container has a dscout blue border on all sides.</p>
-    </div>
-*/
-
-// TODO: Refactor default `a` styles so we don't need to bump specificity to
-// handle border colors on links
-.b-color--main,
-a.b-color--main {
-  border-color: var(--color--main);
-}
-
-.b-color--invert,
-a.b-color--invert {
-  border-color: var(--color--invert);
-}
-
-.b-color--gray-1,
-a.b-color--gray-1 {
-  border-color: var(--color--gray-1);
-}
-
-.b-color--gray-2,
-a.b-color--gray-2 {
-  border-color: var(--color--gray-2);
-}
-
-.b-color--gray-3,
-a.b-color--gray-3 {
-  border-color: var(--color--gray-3);
-}
-
-.b-color--gray-4,
-a.b-color--gray-4 {
-  border-color: var(--color--gray-4);
-}
-
-.b-color--gray-5,
-a.b-color--gray-5 {
-  border-color: var(--color--gray-5);
-}
-
-.b-color--gray-6,
-a.b-color--gray-6 {
-  border-color: var(--color--gray-6);
-}
-
-.b-color--note,
-a.b-color--note {
-  border-color: var(--color--note);
-}
-.b-color--marker,
-a.b-color--marker {
-  border-color: var(--color--marker);
-}
-.b-color--test,
-a.b-color--test {
-  border-color: var(--color--test);
-}
-
-.b-color--dscout,
-a.b-color--dscout {
-  border-color: var(--color--dscout);
-}
-.b-color--close,
-a.b-color--close {
-  border-color: var(--color--close);
-}
-.b-color--coachmark,
-a.b-color--coachmark {
-  border-color: var(--color--coachmark);
-}
-.b-color--success,
-a.b-color--success {
-  border-color: var(--color--success);
-}
-.b-color--alert,
-a.b-color--alert {
-  border-color: var(--color--alert);
-}
-.b-color--archive,
-a.b-color--archive {
-  border-color: var(--color--archive);
-}
-
-.b-color--part-0,
-a.b-color--part-0,
-.b-color--diary,
-a.b-color--diary {
-  border-color: var(--color--part-0);
-}
-.b-color--part-1,
-a.b-color--part-1 {
-  border-color: var(--color--part-1);
-}
-.b-color--part-2,
-a.b-color--part-2 {
-  border-color: var(--color--part-2);
-}
-.b-color--part-3,
-a.b-color--part-3 {
-  border-color: var(--color--part-3);
-}
-.b-color--part-4,
-a.b-color--part-4 {
-  border-color: var(--color--part-4);
-}
-.b-color--part-5,
-a.b-color--part-5 {
-  border-color: var(--color--part-5);
-}
-.b-color--part-6,
-a.b-color--part-6 {
-  border-color: var(--color--part-6);
-}
-.b-color--part-7,
-a.b-color--part-7 {
-  border-color: var(--color--part-7);
-}
-.b-color--part-8,
-a.b-color--part-8 {
-  border-color: var(--color--part-8);
-}
-.b-color--part-9,
-a.b-color--part-9 {
-  border-color: var(--color--part-9);
+$colors: (
+  main,
+  gray-1,
+  gray-2,
+  gray-3,
+  gray-4,
+  gray-5,
+  gray-6,
+  invert,
+  none,
+
+  dscout-light,
+  dscout,
+  dscout-dark,
+  dscout-darkest,
+  
+  alert-light,
+  alert,
+  alert-dark,
+  alert-darkest,
+  
+  coachmark-light,
+  coachmark,
+  coachmark-dark,
+  coachmark-darkest,
+  
+  close-light,
+  close,
+  close-dark,
+  close-darkest,
+  
+  success-light,
+  success,
+  success-dark,
+  success-darkest,
+  
+  archive-light,
+  archive,
+  archive-dark,
+  archive-darkest,
+  
+  note-light,
+  note,
+  note-dark,
+  note-darkest,
+  
+  marker-light,
+  marker,
+  marker-dark,
+  marker-darkest,
+  
+  test-light,
+  test,
+  test-dark,
+  test-darkest,
+  
+  diary,
+  live,
+  screener,
+  
+  part-0,
+  part-1,
+  part-2,
+  part-3,
+  part-4,
+  part-5,
+  part-6,
+  part-7,
+  part-8,
+  part-9
+);
+
+@each $enum in $colors {
+  .color--#{$enum} { color: var(--color--#{$enum}); }
+  .bg-color--#{$enum} { background-color: var(--color--#{$enum}); }
+  .b-color--#{$enum} { border-color: var(--color--#{$enum}); }
 }