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

package/styles/themes/_researcher_colors.scss

@@ -0,0 +1,91 @@
+/* Monotone color palette */
+$color--main: #222;
+$color--invert: #fff;
+$color--none: rgba(0,0,0, 0);
+
+$color--gray-1: mix($color--invert, $color--main, 37%);
+$color--gray-2: mix($color--invert, $color--main, 70%);
+$color--gray-3: mix($color--invert, $color--main, 85%);
+$color--gray-4: mix($color--invert, $color--main, 90%);
+$color--gray-5: mix($color--invert, $color--main, 95%);
+$color--gray-6: mix($color--invert, $color--main, 98%);
+
+/* Primary color palette */
+$color--dscout-light:   #e5f0ff;
+$color--dscout-outline: #84b9f5;
+$color--dscout:         #0a73eb;
+$color--dscout-dark:    #0966d1;
+$color--dscout-darkest: #0860c4;
+
+$color--alert-light:   #fbdfe4;
+$color--alert-outline: #f28aa2;
+$color--alert:         #e51546;
+$color--alert-dark:    #cc133e;
+$color--alert-darkest: #bf123a;
+
+$color--coachmark-light:   #e6e6f4;
+$color--coachmark-outline: #b6b2e1;
+$color--coachmark:         #6d65c3;
+$color--coachmark-dark:    #5e57a8;
+$color--coachmark-darkest: #57519c;
+
+/* Secondary color palette */
+$color--close:         #445ea3;
+$color--close-light:    mix(white, $color--close, 90%);
+$color--close-dark:    mix(black, $color--close, 10%);
+$color--close-darkest: mix(black, $color--close, 20%);
+
+$color--success:         #2ed491;
+$color--success-light:    mix(white, $color--success, 90%);
+$color--success-dark:    mix(black, $color--success, 10%);
+$color--success-darkest: mix(black, $color--success, 20%);
+
+$color--archive:      #c69c6d;
+$color--archive-light:    mix(white, $color--archive, 90%);
+$color--archive-dark: mix(black, $color--archive, 10%);
+$color--archive-darkest: mix(black, $color--archive, 20%);
+
+$color--note:         #ffe291;
+$color--note-light:    mix(white, $color--note, 90%);
+$color--note-dark:    mix(black, $color--note, 5%);
+$color--note-darkest: mix(black, $color--note, 10%);
+
+$color--marker:         #fff480;
+$color--marker-light:    mix(white, $color--marker, 90%);
+$color--marker-dark:    mix(black, $color--marker, 10%);
+$color--marker-darkest: mix(black, $color--marker, 20%);
+
+$color--test:         #8bd9d0;
+$color--test-light:    mix(white, $color--test, 90%);
+$color--test-dark:    mix(black, $color--test, 10%);
+$color--test-darkest: mix(black, $color--test, 20%);
+
+$color--scout:         #8cffd0;
+$color--scout-light:    mix(white, $color--scout, 90%);
+$color--scout-dark:    mix(black, $color--scout, 10%);
+$color--scout-darkest: mix(black, $color--scout, 20%);
+
+/* Part colors */
+$color--part-0: #2bae92; // dark green (approx Niagara)
+$color--part-1: #a5d570; // light green (approx Feijoa)
+$color--part-2: #ffd566; // yellow (approx Dandelion)
+$color--part-3: #fead04; // orange (approx Orange)
+$color--part-4: #e76161; // red (approx Roman)
+$color--part-5: #f2659a; // pink (approx Brilliant Rose)
+$color--part-6: #aa81d2; // purple (approx East Side)
+$color--part-7: #00acf1; // dark blue (approx Deep Sky Blue)
+$color--part-8: #8edde8; // light blue (approx Anakiwa)
+$color--part-9: #86c4c2; // teal (approx Bermuda)
+
+/* Product color aliases */
+$color--live: $color--alert;
+$color--live-dark: $color--alert-dark;
+$color--live-darkest: $color--alert-darkest;
+
+$color--diary: $color--part-0;
+$color--diary-dark: mix(black, $color--part-0, 10%);
+$color--diary-darkest: mix(black, $color--part-0, 20%);
+
+$color--screener: $color--part-6;
+$color--screener-dark: mix(black, $color--screener, 10%);
+$color--screener-darkest: mix(black, $color--screener, 20%);

package/styles/themes/_theme_builder.scss

@@ -0,0 +1,215 @@
+@function extract-rgb($color) {
+  @return red($color), green($color), blue($color);
+}
+
+$default-variables: (
+  /* Monotone color palette */
+  "color--main": $color--main,
+  "color--main-rgb": extract-rgb($color--main),
+
+  "color--invert": $color--invert,
+  "color--invert-rgb": extract-rgb($color--invert),
+
+  "color--none": $color--none,
+  
+  "color--gray-1": $color--gray-1,
+  "color--gray-1-rgb": extract-rgb($color--gray-1),
+
+  "color--gray-2": $color--gray-2,
+  "color--gray-2-rgb": extract-rgb($color--gray-2),
+
+  "color--gray-3": $color--gray-3,
+  "color--gray-3-rgb": extract-rgb($color--gray-3),
+
+  "color--gray-4": $color--gray-4,
+  "color--gray-4-rgb": extract-rgb($color--gray-4),
+
+  "color--gray-5": $color--gray-5,
+  "color--gray-5-rgb": extract-rgb($color--gray-5),
+
+  "color--gray-6": $color--gray-6,
+  "color--gray-6-rgb": extract-rgb($color--gray-6),
+  
+  /* Primary color palette */
+  "color--dscout-light": $color--dscout-light,
+  "color--dscout-outline": $color--dscout-outline,
+  "color--dscout": $color--dscout,
+  "color--dscout-rgb": extract-rgb($color--dscout),
+  "color--dscout-dark": $color--dscout-dark,
+  "color--dscout-darkest": $color--dscout-darkest,
+
+  "color--alert-light": $color--alert-light,
+  "color--alert-outline": $color--alert-outline,
+  "color--alert":  $color--alert,
+  "color--alert-rgb":  extract-rgb($color--alert),
+  "color--alert-dark": $color--alert-dark,
+  "color--alert-darkest": $color--alert-darkest,
+
+  "color--coachmark-light": $color--coachmark-light,
+  "color--coachmark-outline": $color--coachmark-outline,
+  "color--coachmark":  $color--coachmark,
+  "color--coachmark-rgb": extract-rgb($color--coachmark),
+  "color--coachmark-dark": $color--coachmark-dark,
+  "color--coachmark-darkest": $color--coachmark-darkest,
+
+  /* Secondary color palette */
+  "color--close-light": $color--close-light,
+  "color--close": $color--close,
+  "color--close-rgb": extract-rgb($color--close),
+  "color--close-dark": $color--close-dark,
+  "color--close-darkest": $color--close-darkest,
+
+  "color--success-light": $color--success-light,
+  "color--success": $color--success,
+  "color--success-rgb": extract-rgb($color--success),
+  "color--success-dark": $color--success-dark,
+  "color--success-darkest": $color--success-darkest,
+
+  "color--archive-light": $color--archive-light,
+  "color--archive": $color--archive,
+  "color--archive-rgb": extract-rgb($color--archive),
+  "color--archive-dark": $color--archive-dark,
+  "color--archive-darkest": $color--archive-darkest,
+
+  "color--note-light": $color--note-light,
+  "color--note": $color--note,
+  "color--note-rgb": extract-rgb($color--note),
+  "color--note-dark": $color--note-dark,
+  "color--note-darkest": $color--note-darkest,
+
+  "color--marker-light": $color--marker-light,
+  "color--marker": $color--marker,
+  "color--marker-rgb": extract-rgb($color--marker),
+  "color--marker-dark": $color--marker-dark,
+  "color--marker-darkest": $color--marker-darkest,
+
+  "color--test-light": $color--test-light,
+  "color--test": $color--test,
+  "color--test-rgb": extract-rgb($color--test),
+  "color--test-dark": $color--test-dark,
+  "color--test-darkest": $color--test-darkest,
+
+  "color--scout-light": $color--scout-light,
+  "color--scout": $color--scout,
+  "color--scout-rgb": extract-rgb($color--scout),
+  "color--scout-dark": $color--scout-dark,
+  "color--scout-darkest": $color--scout-darkest,
+
+  /* Part colors */
+  "color--part-0": $color--part-0,
+  "color--part-0-rgb": extract-rgb($color--part-0),
+
+  "color--part-1": $color--part-1,
+  "color--part-1-rgb": extract-rgb($color--part-1),
+
+  "color--part-2": $color--part-2,
+  "color--part-2-rgb": extract-rgb($color--part-2),
+
+  "color--part-3": $color--part-3,
+  "color--part-3-rgb": extract-rgb($color--part-3),
+
+  "color--part-4": $color--part-4,
+  "color--part-4-rgb": extract-rgb($color--part-4),
+
+  "color--part-5": $color--part-5,
+  "color--part-5-rgb": extract-rgb($color--part-5),
+
+  "color--part-6": $color--part-6,
+  "color--part-6-rgb": extract-rgb($color--part-6),
+
+  "color--part-7": $color--part-7,
+  "color--part-7-rgb": extract-rgb($color--part-7),
+
+  "color--part-8": $color--part-8,
+  "color--part-8-rgb": extract-rgb($color--part-8),
+
+  "color--part-9": $color--part-9,
+  "color--part-9-rgb": extract-rgb($color--part-9),
+
+  /* Product color aliases */
+  "color--live": $color--alert,
+  "color--live-rgb": extract-rgb($color--live),
+  "color--live-dark": $color--alert-dark,
+  "color--live-darkest": $color--alert-darkest,
+
+  "color--diary": $color--diary,
+  "color--diary-rgb": extract-rgb($color--diary),
+  "color--diary-dark": $color--diary-dark,
+  "color--diary-darkest": $color--diary-darkest,
+
+  "color--screener": $color--screener,
+  "color--screener-rgb": extract-rgb($color--screener),
+  "color--screener-dark": $color--screener-dark,
+  "color--screener-darkest": $color--screener-darkest,
+
+  /* Shadows */
+  "shadow--s": 0 .22rem .5rem rgba(var(--color--main-rgb), 0.03),
+  "shadow--m": 0 .22rem .5rem rgba(var(--color--main-rgb), 0.08),
+  "shadow--l": 0 1em 2em rgba(var(--color--main-rgb), 0.1),
+  "shadow--xl": 0 1em 2em rgba(var(--color--main-rgb), 0.2),
+
+  /* Radii */
+  "radius--none": 0,
+  "radius--tiny": 0.125em,
+  "radius--small": 0.188em,
+  "radius--med": 0.313em,
+  "radius--large": 0.625em,
+  "radius--circle": 50%,
+  "radius--pill": 50em,
+
+  /* Fonts */
+  "font--stack": (-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif),
+  "font--monospace": ('Input Mono', Consolas, monospace),
+  "font--emoji": ('Apple Color Emoji', 'Segoe UI Emoji', 'NotoColorEmoji', 'Segoe UI Symbol', 'Android Emoji', 'EmojiSymbols'),
+
+  /* Font sizes */
+  "font-size--xxs": 0.563em,
+  "font-size--xs": 0.75em,
+  "font-size--s": 0.875em,
+  "font-size--base": 1em,
+  "font-size--l": 1.2em,
+  "font-size--xl": 1.44em,
+  "font-size--xxl": 1.728em,
+  "font-size--xxxl": 2.074em,
+  "font-size--subheadline": 5em,
+  "font-size--headline": 6em,
+
+  /* Font weights */
+  "font-weight--normal": 400,
+  "font-weight--semibold": 600,
+  "font-weight--bold": 700,
+
+  /* Line heights */
+  "line-height--copy": 1.5,
+  "line-height--solid": 1,
+  "line-height--title": 1.25,
+  "line-height--loose": 2,
+
+  /* Tracking */
+  "tracked--tighter": -0.0625em,
+  "tracked--tight": -0.03125em,
+  "tracked--loose": 0.03125em,
+  "tracked--looser": 0.0625em,
+  "tracked--mega": 0.25em,
+  
+  /* Transition timings */
+  "timing--click": 0.1s,
+  "timing--hover": 0.2s,
+  "timing--fade": 0.4s,
+  "timing--rotate": 0.6s,
+
+  /* Body variables */
+  "base____bg-color": var(--color--gray-5),
+  "base____color": var(--color--main),
+  "base____font-family": var(--font--stack),
+  "base____font-size": .875rem,
+  "base____line-height": var(--line-height--copy)
+);
+
+@mixin generate-theme-variables($theme-variables: ()) {
+  $variables: map-merge($default-variables, $theme-variables);
+
+  @each $name, $value in $variables {
+    --#{$name}: #{$value};
+  }
+}

package/styles/utilities/_alignment.scss

@@ -1,105 +1,10 @@
-/*
-@styleguide
-@title Vertical Alignment
-
-Use vertical class names to control vertical alignment on inline elements.
-
-<div>
-  <img class="vertical--top" src="https://via.placeholder.com/50x50" />
-  Top aligned
-</div>
-
-```html
-<div>
-  <img class="vertical--top" src="https://via.placeholder.com/50x50" />
-  Top aligned
-</div>
-```
-
-<div>
-  <img class="vertical--mid" src="https://via.placeholder.com/50x50" />
-  Middle aligned
-</div>
-
-```html
-<div>
-  <img class="vertical--mid" src="https://via.placeholder.com/50x50" />
-  Middle aligned
-</div>
-```
-
-<div>
-  <img class="vertical--btm" src="https://via.placeholder.com/50x50" />
-  Bottom aligned
-</div>
-
-```html
-<div>
-  <img class="vertical--btm" src="https://via.placeholder.com/50x50" />
-  Bottom aligned
-</div>
-```
-*/
+/*=== Vertical alignment ===*/
 
 .vertical--top { vertical-align: top; }
 .vertical--mid { vertical-align: middle; }
 .vertical--bottom { vertical-align: bottom; }
 
-/*
-@styleguide
-@title Flex
-
-Use flex utility methods to set various flex layout properties.
-
-Flex shorthand:
-- `.flex--0`
-- `.flex--1`
-- `.flex--2`
-- `.flex--3`
-
-Flex shrink:
-- `.flex-shrink--0`
-- `.flex-shrink--1`
-- `.flex-shrink--2`
-- `.flex-shrink--3`
-
-Flex grow:
-- `.flex-grow--0`
-- `.flex-grow--1`
-- `.flex-grow--2`
-- `.flex-grow--3`
-
-Align content:
-- `.align-content--around` (sets `space-around`)
-- `.align-content--between` (sets `space-between`)
-- `.align-content--end` (sets `flex-end`)
-- `.align-content--center`
-- `.align-content--start` (sets `flex-start`)
-
-Align items:
-- `.align-items--baseline`
-- `.align-items--center`
-- `.align-items--end` (sets `flex-end`)
-- `.align-items--stretch`
-- `.align-items--start` (sets `flex-start`)
-
-Flex direction:
-- `.direction--column`
-- `.direction--column-reverse`
-- `.direction--row`
-- `.direction--row-reverse`
-
-Justify content
-- `.justify--start`
-- `.justify--around`
-- `.justify--between`
-- `.justify--center`
-- `.justify--end`
-
-Flex wrap
-- `.wrap`
-- `.wrap--reverse`
-*/
+/*=== Flex ===*/
 
 .flex {
   align-items: center;
@@ -111,6 +16,16 @@ Flex wrap
   }
 }
 
+.inline-flex {
+  align-items: center;
+  display: inline-flex;
+
+  > * {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+}
+
 .flex--0 { flex: 0; }
 .flex--1 { flex: 1; }
 .flex--2 { flex: 2; }
@@ -152,46 +67,8 @@ Flex wrap
 .wrap { flex-wrap: wrap; }
 .wrap--reverse { flex-wrap: wrap-reverse; }
 
-/*
-@styleguide
-@title Text Alignment
-
-Text alignment classes work on block-level elements.
-
-<div>
-  <p class="text-align--l">Left Aligned</p>
-  <p class="text-align--r">Right Aligned</p>
-  <p class="text-align--c">Center Aligned</p>
-  <p class="text-align--j">
-    <strong>Justified:</strong>
-    Spicy jalapeno bacon ipsum dolor amet tri-tip jowl rump cow bresaola strip
-    steak short ribs, ground round shoulder jerky shank beef sirloin. Ground
-    round pork belly burgdoggen jerky tenderloin alcatra tail brisket doner
-    sausage swine. Pastrami hamburger picanha spare ribs shankle corned beef
-    pork belly tail flank turducken kielbasa rump beef swine. Meatball sirloin
-    turducken short ribs ham hock corned beef picanha beef fatback tri-tip rump
-    boudin meatloaf landjaeger.
-  </p>
-</div>
-
-```html
-<p class="text-align--l">Left Aligned</p>
-<p class="text-align--r">Right Aligned</p>
-<p class="text-align--c">Center Aligned</p>
-<p class="text-align--j">
-  <strong>Justified:</strong>
-  Spicy jalapeno bacon ipsum dolor amet tri-tip jowl rump cow bresaola
-  strip steak short ribs, ground round shoulder jerky shank beef sirloin.
-  Ground round pork belly burgdoggen jerky tenderloin alcatra tail brisket
-  doner sausage swine. Pastrami hamburger picanha spare ribs shankle corned
-  beef pork belly tail flank turducken kielbasa rump beef swine. Meatball
-  sirloin turducken short ribs ham hock corned beef picanha beef fatback
-  tri-tip rump boudin meatloaf landjaeger.
-</p>
-```
-*/
-
-// === TEXT ALIGNMENT === //
+
+/*=== TEXT ALIGNMENT ===*/
 
 .text-align--l  { text-align: left; }
 .text-align--r  { text-align: right; }

package/styles/utilities/_borders.scss

@@ -1,47 +1,3 @@
-/*
-@styleguide
-
-@title Borders
-
-Use border classes to add solid borders to elements.
-
-<div class="border">1px solid border on all sides</div>
-
-```html
-<div class="border">1px solid border on all sides</div>
-```
-
-<div class="border--t">1px solid top border</div>
-
-```html
-<div class="border--t">1px solid top border</div>
-```
-
-<div class="border--r">1px solid right border</div>
-
-```html
-<div class="border--r">1px solid right border</div>
-```
-
-<div class="border--b">1px solid bottom border</div>
-
-```html
-    <div class="border--b">1px solid bottom border</div>
-```
-
-<div class="border--l">1px solid left border</div>
-
-```html
-<div class="border--l">1px solid left border</div>
-```
-
-<a href="#" class="border--none">No border</a>
-
-```html
-<a href="#" class="border--none">No border</a>
-```
-*/
-
 .border    { border-style: solid; border-width: 1px; }
 .border--t { border-top-style: solid; border-top-width: 1px; }
 .border--r { border-right-style: solid; border-right-width: 1px; }