@dscout/particle 0.46.2 → 1.0.0-alpha.2

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

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

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

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

package/styles/components/input_group/_base.scss

@@ -0,0 +1,74 @@
+@import "../../mixins";
+
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Input-Group {
+  align-items: stretch;
+  display: flex;
+}
+
+.Input-Group__Item {
+  margin-bottom: 0;
+
+  &:not(:first-child) {
+    margin-left: var(--Input-Group__Item____left-offset);
+  }
+
+  &:focus-within {
+    z-index: 1;
+  }
+  
+  .Input-Group__Addon,
+  .Input,
+  .btn {
+    border-radius: 0;
+    height: 100%;
+    position: relative;
+  }
+  
+  &:first-child {
+    .Input-Group__Addon,
+    .Input,
+    .btn {
+      @include rounded-left(var(--Input____radius));
+    }
+  }
+
+  &:last-child {
+    .Input-Group__Addon,
+    .Input,
+    .btn {
+      @include rounded-right(var(--Input____radius));
+    }
+  }
+
+}
+
+.Input-Group__Addon {
+  align-items: center;
+  background-color: var(--Input--Affix____bg-color);
+  border: 1px solid var(--Input--Affix____border-color);
+  color: var(--Input--Affix____color);
+  display: flex;
+  flex-shrink: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: var(--Input____line-height);
+  margin-bottom: 0;
+  padding: var(--Input____padding);
+  transition: color var(--Input____transition-duration), border var(--Input____transition-duration);
+
+  &--mini {
+    padding: var(--Input--mini____padding);
+  }
+
+  &--disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  &--filled {
+    border-color: var(--Input--filled____border-color);
+  }
+}

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

@@ -0,0 +1,7 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-input-group-theme-variables(
+    $Input-Group__Item____left-offset: 0
+  )
+}

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

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

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

@@ -0,0 +1,5 @@
+@mixin generate-input-group-theme-variables(
+  $Input-Group__Item____left-offset: calc(-1 * var(--Input____border-width)),
+) {
+  --Input-Group__Item____left-offset: #{$Input-Group__Item____left-offset};
+}

package/styles/components/inputs/_base.scss

@@ -0,0 +1,84 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Input {
+  appearance: none;
+  background-color: var(--Input____bg-color);
+  border: solid var(--Input____border-width) var(--Input____border-color);
+  border-radius: var(--Input____radius);
+  display: block;
+  color: var(--Input____color);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: var(--Input____line-height);
+  margin: 0;
+  padding: var(--Input____padding);
+  text-align: left;
+  transition-property: background-color, border, color, opacity;
+  transition-duration: var(--Input____transition-duration);
+  width: 100%;
+
+  &::placeholder {
+    color: var(--Input--Placeholder____color);
+    transition-property: color;
+    transition-duration: var(--Input____transition-duration);
+    -moz-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  &::-webkit-inner-spin-button {
+    opacity: 1; // visible number controls in chrome
+  }
+
+  &[type="search"] {
+    appearance: textfield;
+    border-radius: var(--Input--Search____radius);
+  }
+  
+  &[type="search"]::-webkit-search-decoration {
+    appearance: none;
+  }
+}
+
+.Input:disabled,
+.Input--disabled {
+  opacity: .3;
+  pointer-events: none;
+}
+
+.Input--filled {
+  background-color: var(--Input--filled____bg-color);
+  border: var(--Input____border-width) solid var(--Input--filled____border-color);
+  color: var(--Input--filled____color);
+}
+
+.Input:invalid,
+.Input--invalid {
+  background-color: var(--Input--invalid____bg-color);
+  border-color: var(--Input--invalid____border-color);
+  color: var(--Input--invalid____color);
+}
+
+.Input:focus,
+.Input--focused {
+  background-color: var(--Input--focused____bg-color);
+  border: var(--Input____border-width) solid var(--Input--focused____border-color);
+  color: var(--Input--focused____color);
+  outline: none;
+}
+
+.Input--mini {
+  padding: var(--Input--mini____padding);
+}
+
+.File-Input {
+  appearance: none;
+  left: -1000em;
+  position: absolute;
+
+  &:focus {
+    + .File-Input__Label {
+      outline: var(--color--dscout) auto 5px;
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+@import 'theme_builder';
+
+.theme--bandit {
+  @include generate-input-theme-variables(
+    $Input____bg-color: rgba(var(--color--main-rgb), .06125),
+    $Input--focused____bg-color: var(--color--invert),
+    $Input--filled____bg-color: rgba(var(--color--main-rgb), .06125),
+    $Input--invalid____bg-color: var(--color--invert),
+
+    $Input____border-color: rgba(var(--color--dscout-rgb), 0),
+    $Input--focused____border-color: rgba(var(--color--dscout-rgb), 1),
+    $Input--filled____border-color: rgba(var(--color--dscout-rgb), 0),
+    $Input--invalid____border-color: rgba(var(--color--alert-rgb), 1),
+    $Input____border-width: 2px,
+
+    $Input____color: var(--color--main),
+    $Input--focused____color: var(--color--main),
+    $Input--filled____color: var(--color--main),
+    $Input--invalid____color: var(--color--main),
+    $Input--Placeholder____color: var(--color--gray-2),
+
+    $Input____padding: .625em .75em,
+    $Input____radius: var(--radius--med),
+
+    $Input--Affix____color: var(--color--gray-1),
+    $Input--Affix____bg-color: var(--color--gray-4),
+
+    $Input--Search____radius: var(--radius--med)
+  )
+}

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

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

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

@@ -0,0 +1,62 @@
+@mixin generate-input-theme-variables(
+  $Input____bg-color: rgba(var(--color--main-rgb), .02),
+  $Input--focused____bg-color: rgba(var(--color--main-rgb), .01),
+  $Input--filled____bg-color: rgba(var(--color--main-rgb), .01),
+  $Input--invalid____bg-color: rgba(var(--color--alert-rgb), .02),
+
+  $Input____border-color: var(--color--gray-4),
+  $Input--focused____border-color: var(--color--dscout-outline),
+  $Input--filled____border-color: var(--color--gray-5),
+  $Input--invalid____border-color: var(--color--alert-outline),
+  $Input____border-width: 1px,
+
+  $Input____color: rgba(var(--color--main-rgb), .8),
+  $Input--focused____color: rgba(var(--color--main-rgb), .8),
+  $Input--filled____color: rgba(var(--color--main-rgb), .8),
+  $Input--invalid____color: rgba(var(--color--main-rgb), .8),
+
+  $Input____line-height: var(--line-height--copy),
+  $Input____radius: var(--radius--tiny),
+  $Input____transition-duration: var(--timing--hover),
+  
+  $Input____padding: .75em,
+  $Input--mini____padding: .25em .75em,
+  
+  $Input--Affix____color: var(--Input____color),
+  $Input--Affix____bg-color: var(--color--gray-6),
+  $Input--Affix____border-color: $Input____border-color,
+  
+  $Input--Placeholder____color: var(--color--gray-1),
+
+  $Input--Search____radius: var(--radius--pill)
+) {
+  --Input____bg-color: #{$Input____bg-color};
+  --Input--focused____bg-color: #{$Input--focused____bg-color};
+  --Input--filled____bg-color: #{$Input--filled____bg-color};
+  --Input--invalid____bg-color: #{$Input--invalid____bg-color};
+
+  --Input____border-color: #{$Input____border-color};
+  --Input--focused____border-color: #{$Input--focused____border-color};
+  --Input--filled____border-color: #{$Input--filled____border-color};
+  --Input--invalid____border-color: #{$Input--invalid____border-color};
+  --Input____border-width: #{$Input____border-width};
+
+  --Input____color: #{$Input____color};
+  --Input--focused____color: #{$Input--focused____color};
+  --Input--filled____color: #{$Input--filled____color};
+  --Input--invalid____color: #{$Input--invalid____color};
+
+  --Input____line-height: #{$Input____line-height};
+  --Input____radius: #{$Input____radius};
+  --Input____transition-duration: #{$Input____transition-duration};
+  
+  --Input____padding: #{$Input____padding};
+  --Input--mini____padding: #{$Input--mini____padding};
+  
+  --Input--Affix____bg-color: #{$Input--Affix____bg-color};
+  --Input--Affix____border-color: #{$Input--Affix____border-color};
+
+  --Input--Placeholder____color: #{$Input--Placeholder____color};
+  
+  --Input--Search____radius: #{$Input--Search____radius};
+}

package/styles/components/{_list.scss → list/_base.scss}

@@ -1,36 +1,28 @@
-@import '../variables';
-@import '../mixins';
+@import 'themes/bandit';
+@import 'themes/researcher';
 
 $unicode-space: '\00a0';
+$middot: '\00b7';
 
 // === LISTS === //
 
-ul.list,
-ol.list,
-.list ul,
-.list ol {
-  list-style: none;
-  padding: 0;
-}
-
-li > ul,
-li > ol {
-  margin-top: $space--s;
-
-  &:first-child {
-    margin-top: $space--s;
+.List {
+  li > ul,
+  li > ol {
+    margin-top: 0.75em;
+  
+    &:first-child {
+    margin-top: 0.75em;
+    }
   }
 }
 
-.text-align--c ul,
-.text-align--c ol,
-ul.text-align--c,
-ol.text-align--c {
-  list-style-position: inside;
-  padding-left: $space--none;
+.List--plain {
+  list-style: none;
+  padding: 0;
 }
 
-.list--inline {
+.List--inline {
   li {
     display: inline-block;
     margin-bottom: 0;
@@ -45,7 +37,7 @@ ol.text-align--c {
   }
 }
 
-.list--divided-comma {
+.List--divided-comma {
   li {
     &::after {
       content: ',' + $unicode-space;
@@ -57,9 +49,7 @@ ol.text-align--c {
   }
 }
 
-.list--divided-custom {
-  $middot: '\00b7';
-
+.List--divided-custom {
   li {
     &::after {
       content: $unicode-space + $middot + $unicode-space;
@@ -73,60 +63,62 @@ ol.text-align--c {
   }
 }
 
-.list--fancy {
+.List--fancy {
+  padding: 0;
+  
   li {
     list-style: none;
-    padding-left: grid-units(6);
-    text-indent: grid-units(-6);
+    padding-left: 1.5em;
+    text-indent: -1.5em;
   }
 }
 
-ul.list--fancy {
+ul.List--fancy {
   li {
     &:before {
-      border-radius: $radius--circle;
-      box-shadow: inset 0 0 0 $space--1px rgba($color--dscout, .8);
+      border-radius: var(--radius--circle);
+      box-shadow: inset 0 0 0 1px rgba(var(--color--dscout-rgb), .8);
       content: '';
       display: inline-block;
-      height: grid-units(2);
-      margin-right: grid-units(4);
+      height: .5em;
+      margin-right: 1em;
       transform: translateY(-20%);
-      width: grid-units(2);
+      width: .5em;
     }
 
     ul {
       padding-left: 0;
 
       li:before {
-        background-color: rgba($color--dscout, .8);
+        background-color: rgba(var(--color--dscout-rgb), .8);
         box-shadow: none;
-        height: grid-units(1.5);
+        height: .375em;
         transform: translateY(-50%);
-        width: grid-units(1.5);
+        width: .375em;
       }
     }
   }
 }
 
-ol.list--fancy {
+ol.List--fancy {
   counter-reset: li;
 
   li {
     &:before {
-      border: $space--1px solid rgba($color--dscout, .5);
-      border-radius: $radius--circle;
-      color: $color--dscout;
+      border: 1px solid rgba(var(--color--dscout-rgb), .5);
+      border-radius: var(--radius--circle);
+      color: var(--color--dscout);
       content: counter(li);
       counter-increment: li;
       display: inline-block;
-      font-size: $font-size--xxs;
-      height: $space--base;
+      font-size: var(--font-size--xxs);
+      height: 2em;
       line-height: 1.8;
-      margin-right: grid-units(4);
+      margin-right: 1em;
       text-align: center;
       text-indent: 0;
       transform: translateY(-15%);
-      width: $space--base;
+      width: 2em;
     }
 
     ol {

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

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

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

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

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

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

package/styles/components/menu/_base.scss

@@ -0,0 +1,184 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+.Menu {
+  li, 
+  ul {
+    margin-bottom: 0;
+  }
+
+  &--contained {
+    background-color: var(--Menu____bg-color);
+    border-radius: var(--Menu____radius);
+    box-shadow: var(--Menu____box-shadow);
+    padding: 0.25em 0;
+  }
+}
+
+.Menu__Divider {
+  border-top: 1px solid var(--color--gray-4);
+  margin: 0.25em 0;
+  padding: 0;
+}
+
+.Menu__List {
+  list-style: none;
+  padding: 0;
+}
+
+.Menu__Section {
+  margin-bottom: 0;
+}
+
+.Menu__Title {
+  font-size: var(--font-size--base);
+  font-weight: var(--font-weight--bold);
+  margin: 0;
+}
+
+.Menu__Subtitle {
+  background-color: var(--color--gray-6);
+  color: var(--color--gray-2);
+  font-size: var(--font-size--s);
+  font-weight: var(--font-weight--6);
+  letter-spacing: var(--tracked--looser);
+  margin: 0.25em 0;
+  padding: 1em;
+  text-transform: uppercase;
+}
+
+.Menu__Toggle {
+  color: inherit;
+  cursor: pointer;
+}
+
+// These styles normalize some default properties on buttons, but to keep the
+// specificity as low as possible, `button` is left out of the selector.
+.Menu__Item,
+.Menu__Toggle {
+  appearance: none;
+  background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: var(--line-height--copy);
+  position: relative;
+  text-align: left;
+  width: 100%;
+
+  &:active {
+    color: inherit;
+  }
+
+  &[disabled],
+  &--disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+}
+
+.Menu__Item {
+  border-bottom: var(--Menu__Item____border-bottom);
+  color: inherit;
+  cursor: pointer;
+  display: block;
+  margin-bottom: 0;
+  position: relative;
+  transition: background var(--timing--hover);
+
+  &:hover {
+    background-color: var(--Menu__Item--hovered____bg-color);
+    border-bottom: var(--Menu__Item____border-bottom);
+  }
+  
+  &--selected {
+    background-color: var(--Menu__Item--hovered____bg-color);
+  }
+
+  &--active:before {
+    background-color: var(--color--dscout);
+    content: '';
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0px;
+    width: 2px;
+  }
+
+  // Menu components do not at this time directly apply the .Menu__Item__dragging and
+  // .Menu__Item__ghost classes, as Particle does not provide sorting or drag-n-drop
+  // functionality. These classes exist for 3rd party sorting libraries to apply.
+
+  &--dragging {
+    background-color: var(--color--invert);
+    box-shadow: var(--shadow--s);
+    // Opacity may be applied with inline styles, so we need to use !important
+    // to control the opacity of dragging menu items ourselves.
+    opacity: 1 !important;
+  }
+
+  &--ghost {
+    opacity: 0.3;
+    z-index: 1;
+  }
+}
+
+.Menu--loose {
+  --Menu__Item____padding: 1em 2em;
+  --Menu__Divider____margin-left: 5.5em;
+}
+  
+.Menu--tight {
+  --Menu__Item____padding:  0.75em 1em;
+  --Menu__Divider____margin-left: 4.75em;
+}
+
+.Menu__Item,
+.Menu__Title,
+.Menu__Toggle,
+.Menu__Subtitle  {
+  padding: var(--Menu__Item____padding);
+}
+
+.Menu__List--icon-first {
+  .Menu__Divider { 
+    margin-left: var(--Menu__Divider____margin-left);
+  }
+}
+
+.Menu__List--icon-first {
+  .Menu__Item {
+    align-items: center;
+    display: flex;
+  
+    > .icon {
+      margin-right: 2em;
+    }
+  }
+}
+
+.Menu__List--striped {
+  --Menu__Item____border-bottom: 1px solid var(--color--gray-4);
+}
+
+.Menu__List--striped {
+  li:last-child {
+    &.Menu__Item,
+    .Menu__Item {
+      border-bottom: none;
+    }
+  }
+}
+  
+.Menu__Toggle {
+  .Toggle__Icon {
+    color: var(--color--gray-2);
+    transition: color var(--timing--hover);
+  }
+  
+  &:hover {
+    .Toggle__Icon {
+      color: var(--color--dscout);
+    }
+  }
+}

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

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

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

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

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

@@ -0,0 +1,13 @@
+@mixin generate-menu-theme-variables(
+  $Menu____bg-color: var(--color--invert),
+  $Menu____box-shadow: var(--shadow--s),
+  $Menu____radius: var(--radius--med),
+
+  $Menu__Item--hovered____bg-color: rgba(var(--color--main-rgb), .03)
+) {
+  --Menu____bg-color: #{$Menu____bg-color};
+  --Menu____box-shadow: #{$Menu____box-shadow};
+  --Menu____radius: #{$Menu____radius};
+
+  --Menu__Item--hovered____bg-color: #{$Menu__Item--hovered____bg-color};
+}