@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/styles/components/attribute_selector/themes/_theme_builder.scss

@@ -0,0 +1,33 @@
+@mixin generate-attribute-selector-theme-variables(
+    $Attribute____padding: .25em .75em,
+    $Attribute____font-size: var(--font-size--xs),
+
+    $Attribute____border-color: rgba(var(--color--main-rgb), .1),
+    $Attribute____border-radius: var(--radius--tiny),
+    $Attribute____border-width: 1px,
+    
+    $Attribute____color: rgba(var(--color--main-rgb), .3),
+    
+    $Attribute--hover____color: rgba(var(--color--main-rgb), .65),
+    $Attribute--hover____border-color: rgba(var(--color--main-rgb), .2),
+    
+    $Attribute--selected____color: var(--color--dscout),
+    $Attribute--selected____background-color: none,
+    $Attribute--selected____border-color: rgba(var(--color--dscout-rgb), .3)
+) {
+    --Attribute____padding: #{$Attribute____padding};
+    --Attribute____font-size: #{$Attribute____font-size};
+
+    --Attribute____border-color: #{$Attribute____border-color};
+    --Attribute____border-radius: #{$Attribute____border-radius};
+    --Attribute____border-width: #{$Attribute____border-width};
+    
+    --Attribute____color: #{$Attribute____color};
+    
+    --Attribute--hover____color: #{$Attribute--hover____color};
+    --Attribute--hover____border-color: #{$Attribute--hover____border-color};
+    
+    --Attribute--selected____color: #{$Attribute--selected____color};
+    --Attribute--selected____background-color: #{$Attribute--selected____background-color};
+    --Attribute--selected____border-color: #{$Attribute--selected____border-color};
+}

package/styles/components/{_avatar.scss → avatar/_base.scss}

@@ -1,9 +1,12 @@
-.avatar {
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Avatar {
   align-items: center;
   background-position: center;
   background-size: cover;
   border-radius: 50%;
-  color: $color--invert;
+  color: var(--Avatar____color);
   display: flex;
   flex-shrink: 0;
   height: 40px;
@@ -12,15 +15,10 @@
   width: 40px;
 }
 
-.avatar--background {
-  background-color: $color--dscout;
-}
-
-.avatar--img {
-  height: 100%;
-  width: 100%;
+.Avatar--background {
+  background-color: var(--Avatar____bg-color);
 }
 
-.avatar--initials {
+.Avatar--initials {
   line-height: 1;
 }

package/styles/components/avatar/themes/_bandit.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-avatar-theme-variables();
+}

package/styles/components/avatar/themes/_researcher.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--researcher {
+  @include generate-avatar-theme-variables();
+}

package/styles/components/avatar/themes/_theme_builder.scss

@@ -0,0 +1,7 @@
+@mixin generate-avatar-theme-variables(
+  $Avatar____color: var(--color--invert),
+  $Avatar____bg-color: var(--color--dscout)
+) {
+  --Avatar____color: #{$Avatar____color};
+  --Avatar____bg-color: #{$Avatar____bg-color};
+}

package/styles/components/{_blitz.scss → blitz/_base.scss}

@@ -1,31 +1,35 @@
-.blitz-wrapper {
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Blitz__Wrapper {
   display: flex;
   justify-content: center;
   left: 0;
   opacity: 0;
-  padding: $space--m;
+  padding: 1em;
   pointer-events: none;
   position: fixed;
   top: -4em;
-  transition-duration: $timing--fade;
+  transition-duration: var(--timing--fade);
   transition-property: opacity, top, visibility;
   visibility: hidden;
   width: 100%;
   z-index: 15;
 
-  &.show {
+  &--show {
     opacity: 1;
     top: 0;
     visibility: visible;
     transition-property: opacity, top;
   }
 }
-
-.blitz {
-  border-radius: $radius--med;
-  box-shadow: $shadow;
-  color: $color--invert;
+  
+.Blitz {
+  border-radius: var(--radius--med);
+  box-shadow: var(--shadow--s);
+  color: var(--color--invert);
   max-width: 48em;
-  padding: $space--m;
+  padding: 1em;
   pointer-events: all;
 }
+  

package/styles/components/blitz/themes/_bandit.scss

@@ -0,0 +1,5 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-blitz-theme-variables();
+}

package/styles/components/blitz/themes/_researcher.scss

@@ -0,0 +1,6 @@
+@import 'theme_builder';
+
+.theme--researcher {
+  // The Researcher theme uses the default variables
+  @include generate-blitz-theme-variables();
+}

package/styles/components/blitz/themes/_theme_builder.scss

@@ -0,0 +1 @@
+@mixin generate-blitz-theme-variables() {}

package/styles/components/buttons/_base.scss

@@ -0,0 +1,510 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+// === BASICS === //
+
+.btn {
+  @include generate-button-color-variables();
+
+  appearance: none;
+  background-color: var(--Button__bg-color);
+  border-bottom: none; // Clears the border set by `<a>` elements.
+  border-radius: var(--Button__radius);
+  color: var(--Button__color);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: var(--Button__font-weight);
+  line-height: var(--Button__line-height);
+  padding: var(--Button__padding);
+  text-align: center;
+  transition-duration: var(--Button__transition-duration);
+  transition-property: background, box-shadow, color, fill, opacity, top, filter;
+
+  &[disabled] {
+    filter: grayscale(1);
+    opacity: .3;
+    pointer-events: none;
+  }
+
+  &:hover {
+    background-color: var(--Button__bg-color--hover);
+    border-bottom: none; // Clears the border set by `<a>` elements.
+    color: var(--Button__color--hover);
+  }
+
+  &:active {
+    background-color: var(--Button__bg-color--active);
+    color: var(--Button__color--active);
+    transition-duration: var(--timing--click);
+  }
+
+  &--glass {
+    background-color: var(--Button--glass__bg-color);
+    color: var(--Button--glass__color);
+
+    &:hover {
+      background-color: var(--Button--glass__bg-color--hover);
+      color: var(--Button--glass__color--hover);
+    }
+
+    &:active {
+      background-color: var(--Button--glass__bg-color--active);
+      color: var(--Button--glass__color--active);
+    }
+
+    &[disabled] {
+      opacity: .5;
+    }
+  }
+
+  &--outline {
+    background: none;
+    box-shadow: inset 0 0 0 var(--Button--outline__border-width) var(--Button--outline__b-color);
+    color: var(--Button--outline__color);
+
+    &:hover {
+      background: none;
+      box-shadow: inset 0 0 0 var(--Button--outline__border-width) var(--Button--outline__b-color--hover);
+      color: var(--Button--outline__color);
+    }
+
+    &:active {
+      background: none;
+      box-shadow: inset 0 0 0 var(--Button--outline__border-width) var(--Button--outline__b-color--active);
+      color: var(--Button--outline__color);
+    }
+
+    &[disabled] {
+      opacity: .3;
+    }
+  }
+
+  &--shadow {
+    box-shadow: var(--Button--shadow__shadow);;
+
+    &:hover {
+      box-shadow: var(--Button--shadow__shadow-hover);
+    }
+
+    &:active {
+      box-shadow: var(--Button--shadow__shadow-active);
+      transition-duration: var(--timing--click);
+    }
+
+    &[disabled] {
+      box-shadow: none;
+    }
+  }
+}
+
+// === COLORS === //
+
+// alert
+.btn--color-alert {
+  @include generate-button-color-variables(
+    $Button__bg-color: var(--color--alert),
+    $Button__bg-color--hover: var(--color--alert-dark),
+    $Button__bg-color--active: var(--color--alert-darkest),
+  
+    $Button--glass__bg-color: rgba(var(--color--alert-rgb), .1),
+    $Button--glass__bg-color--hover: rgba(var(--color--alert-rgb), .2),
+    $Button--glass__bg-color--active: rgba(var(--color--alert-rgb), .25),
+    $Button--glass__color: var(--color--alert-dark),
+    $Button--glass__color--hover: var(--color--alert-darkest),
+    $Button--glass__color--active: var(--color--alert-darkest),
+  
+    $Button--outline__b-color: rgba(var(--color--alert-rgb), .5),
+    $Button--outline__b-color--hover: rgba(var(--color--alert-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--alert-rgb), .8),
+    $Button--outline__color: var(--color--alert)
+  );
+}
+
+// close
+.btn--color-close {
+  @include generate-button-color-variables(
+    $Button__bg-color: var(--color--close),
+    $Button__bg-color--hover: var(--color--close-dark),
+    $Button__bg-color--active: var(--color--close-darkest),
+
+    $Button--glass__bg-color: rgba(var(--color--close-rgb), .1),
+    $Button--glass__bg-color--hover: rgba(var(--color--close-rgb), .2),
+    $Button--glass__bg-color--active: rgba(var(--color--close-rgb), .25),
+    $Button--glass__color: var(--color--close),
+
+    $Button--outline__b-color: rgba(var(--color--close-rgb), .4),
+    $Button--outline__b-color--hover: rgba(var(--color--close-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--close-rgb), .8),
+    $Button--outline__color: var(--color--close)
+  )
+}
+
+// coachmark
+.btn--color-coachmark {
+  @include generate-button-color-variables(
+    $Button__bg-color: var(--color--coachmark),
+    $Button__bg-color--hover: var(--color--coachmark-dark),
+    $Button__bg-color--active: var(--color--coachmark-darkest),
+
+    $Button--glass__bg-color: rgba(var(--color--coachmark-rgb), .1),
+    $Button--glass__bg-color--hover: rgba(var(--color--coachmark-rgb), .2),
+    $Button--glass__bg-color--active: rgba(var(--color--coachmark-rgb), .25),
+    $Button--glass__color: var(--color--coachmark-dark),
+    $Button--glass__color--hover: var(--color--coachmark-darkest),
+    $Button--glass__color--active: var(--color--coachmark-darkest),
+
+    $Button--outline__b-color: rgba(var(--color--coachmark-rgb), .5),
+    $Button--outline__b-color--hover: rgba(var(--color--coachmark-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--coachmark-rgb), .8),
+    $Button--outline__color: var(--color--coachmark)
+  )
+}
+
+// dscout
+.btn--color-dscout {
+  @include generate-button-color-variables(
+    $Button__bg-color: var(--color--dscout),
+    $Button__bg-color--hover: var(--color--dscout-dark),
+    $Button__bg-color--active: var(--color--dscout-darkest),
+
+    $Button--glass__bg-color: rgba(var(--color--dscout-rgb), .1),
+    $Button--glass__bg-color--hover: rgba(var(--color--dscout-rgb), .2),
+    $Button--glass__bg-color--active: rgba(var(--color--dscout-rgb), .25),
+    $Button--glass__color: var(--color--dscout-dark),
+    $Button--glass__color--hover: var(--color--dscout-darkest),
+    $Button--glass__color--active: var(--color--dscout-darkest),
+
+    $Button--outline__b-color: rgba(var(--color--dscout-rgb), .5),
+    $Button--outline__b-color--hover: rgba(var(--color--dscout-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--dscout-rgb), .8),
+    $Button--outline__color: var(--color--dscout)
+  )
+}
+
+// archive
+.btn--color-archive {
+  @include generate-button-color-variables(
+    $Button__bg-color: var(--color--archive),
+    $Button__bg-color--hover: var(--color--archive-dark),
+    $Button__bg-color--active: var(--color--archive-darkest),
+
+    $Button--glass__bg-color: rgba(var(--color--archive-rgb), .1),
+    $Button--glass__bg-color--hover: rgba(var(--color--archive-rgb), .2),
+    $Button--glass__bg-color--active: rgba(var(--color--archive-rgb), .25),
+    $Button--glass__color: var(--color--archive),
+
+    $Button--outline__b-color: rgba(var(--color--archive-rgb), .4),
+    $Button--outline__b-color--hover: rgba(var(--color--archive-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--archive-rgb), .8),
+    $Button--outline__color: var(--color--archive)
+  )
+}
+
+// none
+.btn--color-none {
+  @include generate-button-color-variables(
+    $Button__bg-color: rgba(var(--color---main-rgb), 0),
+    $Button__bg-color--hover: rgba(var(--color--main-rgb), .05),
+    $Button__bg-color--active: rgba(var(--color--main-rgb), .08),
+    $Button__color: var(--color--gray-1),
+    $Button__color--hover: rgba(var(--color--main-rgb), .8),
+    $Button__color--active: var(--color--main),
+
+    $Button--glass__bg-color: rgba(var(--color--main-rgb), .1),
+    $Button--glass__bg-color--hover: rgba(var(--color--main-rgb), .2),
+    $Button--glass__bg-color--active: rgba(var(--color--main-rgb), .25),
+    $Button--glass__color: var(--Button__color),
+    $Button--glass__color--hover: var(--Button__color--hover),
+    $Button--glass__color--active: var(--Button__color--active),
+
+    $Button--outline__b-color: rgba(var(--color--main-rgb), .4),
+    $Button--outline__b-color--hover: rgba(var(--color--main-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--main-rgb), .8),
+    $Button--outline__color: var(--color--main)
+  )
+}
+
+// success
+.btn--color-success {
+  @include generate-button-color-variables(
+    $Button__bg-color: var(--color--success),
+    $Button__bg-color--hover: var(--color--success-dark),
+    $Button__bg-color--active: var(--color--success-darkest),
+
+    $Button--glass__bg-color: rgba(var(--color--success-rgb), .1),
+    $Button--glass__bg-color--hover: rgba(var(--color--success-rgb), .2),
+    $Button--glass__bg-color--active: rgba(var(--color--success-rgb), .25),
+    $Button--glass__color: var(--color--success),
+
+    $Button--outline__b-color: rgba(var(--color--success-rgb), .4),
+    $Button--outline__b-color--hover: rgba(var(--color--success-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--success-rgb), .8),
+    $Button--outline__color: var(--color--success)
+  )
+}
+
+// screener
+.btn--color-screener {
+  @include generate-button-color-variables(
+    $Button__bg-color: var(--color--screener),
+    $Button__bg-color--hover: var(--color--screener-dark),
+    $Button__bg-color--active: var(--color--screener-darkest),
+
+    $Button--glass__bg-color: rgba(var(--color--screener-rgb), .1),
+    $Button--glass__bg-color--hover: rgba(var(--color--screener-rgb), .2),
+    $Button--glass__bg-color--active: rgba(var(--color--screener-rgb), .25),
+    $Button--glass__color: var(--color--screener),
+
+    $Button--outline__b-color: rgba(var(--color--screener-rgb), .4),
+    $Button--outline__b-color--hover: rgba(var(--color--screener-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--screener-rgb), .8),
+    $Button--outline__color: var(--color--screener)
+  )
+}
+
+// diary
+.btn--color-diary {
+  @include generate-button-color-variables(
+    $Button__bg-color: var(--color--diary),
+    $Button__bg-color--hover: var(--color--diary-dark),
+    $Button__bg-color--active: var(--color--diary-darkest),
+
+    $Button--glass__bg-color: rgba(var(--color--diary-rgb), .1),
+    $Button--glass__bg-color--hover: rgba(var(--color--diary-rgb), .2),
+    $Button--glass__bg-color--active: rgba(var(--color--diary-rgb), .25),
+    $Button--glass__color: var(--color--diary),
+
+    $Button--outline__b-color: rgba(var(--color--diary-rgb), .4),
+    $Button--outline__b-color--hover: rgba(var(--color--diary-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--diary-rgb), .8),
+    $Button--outline__color: var(--color--diary)
+  )
+}
+
+// note
+.btn--color-note {
+  @include generate-button-color-variables(
+    $Button__bg-color: var(--color--note),
+    $Button__bg-color--hover: var(--color--note-dark),
+    $Button__bg-color--active: var(--color--note-darkest),
+    $Button__color: var(--color--archive),
+
+    $Button--glass__bg-color: rgba(var(--color--note-rgb), .25),
+    $Button--glass__bg-color--hover: rgba(var(--color--note-rgb), .35),
+    $Button--glass__bg-color--active: rgba(var(--color--note-rgb), .4),
+    $Button--glass__color: var(--color--archive),
+
+    $Button--outline__b-color: rgba(var(--color--note-rgb), .4),
+    $Button--outline__b-color--hover: rgba(var(--color--note-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--note-rgb), .8),
+    $Button--outline__color: var(--color--archive)
+  )
+}
+
+// test
+.btn--color-test {
+  @include generate-button-color-variables(
+    $Button__bg-color: var(--color--test),
+    $Button__bg-color--hover: var(--color--test-dark),
+    $Button__bg-color--active: var(--color--test-darkest),
+
+    $Button--glass__bg-color: rgba(var(--color--test-rgb), .1),
+    $Button--glass__bg-color--hover: rgba(var(--color--test-rgb), .2),
+    $Button--glass__bg-color--active: rgba(var(--color--test-rgb), .25),
+    $Button--glass__color: var(--color--test),
+
+    $Button--outline__b-color: rgba(var(--color--test-rgb), .4),
+    $Button--outline__b-color--hover: rgba(var(--color--test-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--test-rgb), .8),
+    $Button--outline__color: var(--color--test)
+  )
+}
+
+// invert
+.btn--color-invert {
+  @include generate-button-color-variables(
+    $Button__bg-color: var(--color--invert),
+    $Button__bg-color--hover: rgba(var(--color--invert-rgb), .9),
+    $Button__bg-color--active: rgba(var(--color--invert-rgb), .85),
+    $Button__color: var(--color--main),
+
+    $Button--glass__bg-color: rgba(var(--color--invert-rgb), .1),
+    $Button--glass__bg-color--hover: rgba(var(--color--invert-rgb), .2),
+    $Button--glass__bg-color--active: rgba(var(--color--invert-rgb), .25),
+    $Button--glass__color: var(--color--invert),
+
+    $Button--outline__b-color: rgba(var(--color--invert-rgb), .4),
+    $Button--outline__b-color--hover: rgba(var(--color--invert-rgb), .7),
+    $Button--outline__b-color--active: rgba(var(--color--invert-rgb), .8),
+    $Button--outline__color: var(--color--invert)
+  )
+}
+
+// === PLAIN BUTTONS === //
+
+.btn--plain {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: opacity var(--Button__transition-duration);
+
+  &:disabled {
+    filter: grayscale(1);
+    opacity: .3;
+    pointer-events: none;
+  }
+}
+
+// === SIZES === //
+
+.btn--small {
+  border-radius: var(--Button--small__radius);
+  font-size: var(--Button--small__font-size);
+  padding: var(--Button--small__padding);
+}
+
+.btn--big {
+  border-radius: var(--Button--big__radius);
+  font-size: var(--Button--big__font-size);
+  padding: var(--Button--big__padding);
+}
+
+// === WIDTHS === //
+
+.btn--tight {
+  padding: var(--Button--tight__padding);
+}
+
+.btn--wide {
+  padding: var(--Button--wide__padding);
+}
+
+.btn--fullwidth {
+  display: block;
+  width: 100%;
+}
+
+// === ICON BUTTONS === //
+
+.btn--icon {
+  background-color: rgba(var(--color--main-rgb), .0);
+  border: none;
+  color: var(--color--gray-2);
+  cursor: pointer;
+  display: inline-block;
+  font-size: inherit;
+  transition-property: background, color, height, width;
+  transition-duration: var(--timing--hover);
+
+  &.btn--active,
+  &.btn--selected {
+    color: var(--color--dscout);
+
+    &[disabled],
+    &:hover {
+      color: var(--color--dscout);
+    }
+  }
+
+  &.btn--destructive {
+    &.btn--active,
+    &.btn--selected,
+    &:hover {
+      color: var(--color--alert);
+    }
+  }
+
+  &.btn--affirmative {
+    &.btn--active,
+    &.btn--selected,
+    &:hover {
+      color: var(--color--success);
+    }
+  }
+
+  &:hover {
+    color: var(--color--main);
+  }
+
+  &[disabled] {
+    color: var(--color--gray-3);
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+a.btn--icon {
+  &:active,
+  &:hover {
+    border: none;
+  }
+
+  &:hover {
+    color: var(--color--main);
+  }
+}
+
+// === CONTROL BUTTONS === //
+
+.control-buttons {
+  display: flex;
+  height: 1.5em;
+  justify-content: flex-end;
+
+  .btn--icon {
+    @include vertical-align;
+
+    border-radius: var(--radius--circle);
+    height: 2.063em;
+    margin-right: .25em;
+    padding: 0;
+    width: 2.063em;
+
+    &:hover,
+    &.btn--selected {
+      height: 3.563em;
+      width: 3.563em;
+    }
+
+    &:hover {
+      background-color: rgba(var(--color--main-rgb), .05);
+    }
+
+    &.btn--active:hover,
+    &.btn--selected {
+      background-color: rgba(var(--color--dscout-rgb), .1);
+    }
+
+    &.btn--destructive {
+      &.btn--active:hover {
+        background-color: rgba(var(--color--main-rgb), .05);
+      }
+
+      &.btn--selected,
+      &.btn--selected:hover {
+        background-color: rgba(var(--color--alert-rgb), .1);
+      }
+    }
+
+    &.btn--affirmative {
+      &.btn--active:hover {
+        background-color: rgba(var(--color--main-rgb), .05);
+      }
+
+      &.btn--selected,
+      &.btn--selected:hover {
+        background-color: rgba(var(--color--success-rgb), .1);
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  a.btn--icon {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+}

package/styles/components/buttons/themes/_bandit.scss

@@ -0,0 +1,25 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-button-theme-variables(
+    $Button__font-weight: var(--font-weight--semibold),
+    $Button__line-height: 1,
+    $Button__padding: .875em 1.5em,
+    $Button__radius: var(--radius--med),
+    $Button__transition-duration: var(--timing--hover),
+
+    $Button--outline__border-width: 2px,
+
+    $Button--small__font-size: 1em,
+    $Button--small__padding: .5em 1em,
+    $Button--small__radius: .375em,
+
+    $Button--big__font-size: var(--font-size--l),
+    $Button--big__radius: .5em,
+    $Button--big__padding: .75em 2em,
+
+    $Button--tight__padding: .75em,
+
+    $Button--wide__padding: .875em 4em
+  );
+}

package/styles/components/buttons/themes/_researcher.scss

@@ -0,0 +1,6 @@
+@import 'theme_builder';
+
+.theme--researcher {
+  // The Researcher theme uses the default variables
+  @include generate-button-theme-variables();
+}