@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/styles/utilities/_colors.scss

@@ -0,0 +1,606 @@
+/*
+@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);
+}