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

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

@@ -1,25 +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),
+  @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--outline____border-width": 2px,
 
-    $Button--small__font-size: 1em,
-    $Button--small__padding: .5em 1em,
-    $Button--small__radius: .375em,
+    "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--big____font-size": var(--font-size--l),
+    "Button--big____radius": .5em,
+    "Button--big____padding": .75em 2em,
 
-    $Button--tight__padding: .75em,
+    "Button--tight____padding": .75em,
 
-    $Button--wide__padding: .875em 4em
-  );
+    "Button--wide____padding": .875em 4em
+  ));
 }

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

@@ -1,89 +1,65 @@
-@mixin generate-button-theme-variables(
-  $Button__font-weight: var(--font-weight--normal),
-  $Button__line-height: var(--line-height--copy),
-  $Button__padding: .75em 2em,
-  $Button__radius: var(--radius--small),
-  $Button__transition-duration: var(--timing--hover),
+$default-variables: (
+  "Button____font-weight": var(--font-weight--normal),
+  "Button____line-height": var(--line-height--copy),
+  "Button____padding": .75em 2em,
+  "Button____radius": var(--radius--small),
+  "Button____transition-duration": var(--timing--hover),
   
-  $Button--outline__border-width: 1px,
+  "Button--outline____border-width": 1px,
 
-  $Button--small__font-size: var(--font-size--s),
-  $Button--small__padding: .25em 1em,
-  $Button--small__radius: var(--radius--small),
+  "Button--small____font-size": var(--font-size--s),
+  "Button--small____padding": .25em 1em,
+  "Button--small____radius": var(--radius--small),
 
-  $Button--big__font-size: var(--font-size--l),
-  $Button--big__radius: var(--radius--small),
-  $Button--big__padding: .75em 2em,
+  "Button--big____font-size": var(--font-size--l),
+  "Button--big____radius": var(--radius--small),
+  "Button--big____padding": .75em 2em,
 
-  $Button--tight__padding: .75em,
+  "Button--tight____padding": .75em,
 
-  $Button--wide__padding: .75em 4em
-) {
-  --Button__font-weight: #{$Button__font-weight};
-  --Button__line-height: #{$Button__line-height};
-  --Button__padding: #{$Button__padding};
-  --Button__radius: #{$Button__radius};
-  --Button__transition-duration: #{$Button__transition-duration};
-  
-  --Button--outline__border-width: #{$Button--outline__border-width};
-
-  --Button--small__font-size: #{$Button--small__font-size};
-  --Button--small__padding: #{$Button--small__padding};
-  --Button--small__radius: #{$Button--small__radius};
+  "Button--wide____padding": .75em 4em
+);
 
-  --Button--big__font-size: #{$Button--big__font-size};
-  --Button--big__radius: #{$Button--big__radius};
-  --Button--big__padding: #{$Button--big__padding};
+$default-color-variables: (
+  "Button____bg-color": var(--color--main),
+  "Button--hover____bg-color": rgba(var(--color--main-rgb), .9),
+  "Button--active____bg-color": rgba(var(--color--main-rgb), .85),
 
-  --Button--tight__padding: #{$Button--tight__padding};
+  "Button____color": var(--color--invert),
+  "Button--hover____color": var(--Button____color),
+  "Button--active____color": var(--Button____color),
 
-  --Button--wide__padding: #{$Button--wide__padding};
-}
+  "Button--shadow____shadow": 0 5px 8px 0px rgba(var(--color--main-rgb), .25),
+  "Button--shadow--hover____shadow": 0 15px 20px 0px rgba(var(--color--main-rgb), .3),
+  "Button--shadow--active____shadow": 0 2px 3px 0px rgba(var(--color--main-rgb), .25),
 
-@mixin generate-button-color-variables(
-  $Button__bg-color: var(--color--main),
-  $Button__bg-color--hover: rgba(var(--color--main-rgb), .9),
-  $Button__bg-color--active: rgba(var(--color--main-rgb), .85),
-  $Button__color: var(--color--invert),
-  $Button__color--hover: $Button__color,
-  $Button__color--active: $Button__color,
+  "Button--glass____bg-color": rgba(var(--color--main-rgb), .1),
+  "Button--glass--hover____bg-color": rgba(var(--color--main-rgb), .2),
+  "Button--glass--active____bg-color": rgba(var(--color--main-rgb), .25),
 
-  $Button--shadow__shadow: 0 5px 8px 0px rgba(var(--color--main-rgb), .25),
-  $Button--shadow__shadow-hover: 0 15px 20px 0px rgba(var(--color--main-rgb), .3),
-  $Button--shadow__shadow-active: 0 2px 3px 0px rgba(var(--color--main-rgb), .25),
+  "Button--glass____color": var(--color--main),
+  "Button--glass--hover____color": var(--Button--glass____color),
+  "Button--glass--active____color": var(--Button--glass____color),
 
-  $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(--color--main),
-  $Button--glass__color--hover: var(--Button--glass__color),
-  $Button--glass__color--active: var(--Button--glass__color),
+  "Button--outline____b-color": rgba(var(--color--main-rgb), .2),
+  "Button--outline--hover____b-color": rgba(var(--color--main-rgb), .5),
+  "Button--outline--active____b-color": rgba(var(--color--main-rgb), .6275),
+  
+  "Button--outline____color": var(--color--main)
+);
 
-  $Button--outline__b-color: rgba(var(--color--main-rgb), .2),
-  $Button--outline__b-color--hover: rgba(var(--color--main-rgb), .5),
-  $Button--outline__b-color--active: rgba(var(--color--main-rgb), .6275),
-  $Button--outline__color: var(--color--main)
-) {
-  --Button__bg-color: #{$Button__bg-color};
-  --Button__bg-color--hover: #{$Button__bg-color--hover};
-  --Button__bg-color--active: #{$Button__bg-color--active};
-  --Button__color: #{$Button__color};
-  --Button__color--hover: #{$Button__color--hover};
-  --Button__color--active: #{$Button__color--active};
+@mixin generate-button-theme-variables($theme-variables: ()) {
+  $variables: map-merge($default-variables, $theme-variables);
 
-  --Button--shadow__shadow: #{$Button--shadow__shadow};
-  --Button--shadow__shadow-hover: #{$Button--shadow__shadow-hover};
-  --Button--shadow__shadow-active: #{$Button--shadow__shadow-active};
+  @each $name, $value in $variables {
+    --#{$name}: #{$value};
+  }
+}
 
-  --Button--glass__bg-color: #{$Button--glass__bg-color};
-  --Button--glass__bg-color--hover: #{$Button--glass__bg-color--hover};
-  --Button--glass__bg-color--active: #{$Button--glass__bg-color--active};
-  --Button--glass__color: #{$Button--glass__color};
-  --Button--glass__color--hover: #{$Button--glass__color--hover};
-  --Button--glass__color--active: #{$Button--glass__color--active};
+@mixin generate-button-color-variables($color-variables: ()) {
+  $variables: map-merge($default-color-variables, $color-variables);
 
-  --Button--outline__b-color: #{$Button--outline__b-color};
-  --Button--outline__b-color--hover: #{$Button--outline__b-color--hover};
-  --Button--outline__b-color--active: #{$Button--outline__b-color--active};
-  --Button--outline__color: #{$Button--outline__color};
+  @each $name, $value in $variables {
+    --#{$name}: #{$value};
+  }
 }

package/styles/components/card/_base.scss

@@ -24,14 +24,6 @@ a.Card {
   &:hover {
     box-shadow: var(--Card--hover____box-shadow);
   }
-
-  &:not(.Card--bordered) {
-    border-bottom: none; // overwrite default link styling
-
-    &:hover {
-      border-bottom: none; // overwrite default link styling
-    }
-  }
 }
 
 .Card.Card--bordered {

package/styles/components/container/_base.scss

@@ -2,31 +2,26 @@
 @import 'themes/researcher';
 
 .Container {
-  background-color: var(--Container__bg-color);
-  border-radius:  var(--Container__radius);
-  box-shadow: var(--Container__shadow--uneditable);
-  margin: 1em 0;
+  background-color: var(--Container____bg-color);
+  border-radius:  var(--Container____radius);
+  box-shadow: var(--Container-undeditable____shadow);
   transition: box-shadow var(--timing--hover), margin var(--timing--fade), opacity var(--timing--fade);
 
-  &__editing {
-    box-shadow: var(--Container__shadow--editing);
+  &--editing {
+    box-shadow: var(--Container--editing____shadow);
   }
 
-  &__editable {
-    box-shadow: var(--Container__shadow--editable);
+  &--editable {
+    box-shadow: var(--Container--editable____shadow);
 
     &:focus,
     &:hover {
-      box-shadow: var(--Container__shadow--editable-hover);
+      box-shadow: var(--Container--editable--hover____shadow);
     }
   }
-
-  &:first-child {
-    margin-top: 0;
-  }
 }
 
-.Container--Header {
+.Container__Header {
   border-bottom: solid 1px var(--color--none);
   margin-bottom: 0;
   opacity: 1;
@@ -36,14 +31,9 @@
   transition-property: border, opacity, padding;
 }
 
-.Container--Header__editing {
+.Container__Header--editing {
   border-bottom: solid 1px var(--color--gray-4);
   padding-bottom: 2em;
   transition-delay: var(--timing--hover), 0s, 0s;
   transition-duration: var(--timing--hover);
 }
-
-.Container--Inner {
-  margin: 0;
-  padding: 2em;
-}

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

@@ -1,15 +1,16 @@
-@mixin generate-container-theme-variables(
-  $Container__bg-color: var(--color--invert),
-  $Container__shadow--uneditable: var(--shadow--s),
-  $Container__shadow--editable: var(--shadow--m),
-  $Container__shadow--editable-hover: var(--shadow--l),
-  $Container__shadow--editing: var(--shadow--xl),
-  $Container__radius: var(--radius--med),
-) {
-  --Container__bg-color: #{$Container__bg-color};
-  --Container__shadow--uneditable: #{$Container__shadow--uneditable};
-  --Container__shadow--editable: #{$Container__shadow--editable};
-  --Container__shadow--editable-hover: #{$Container__shadow--editable-hover};
-  --Container__shadow--editing: #{$Container__shadow--editing};
-  --Container__radius: #{$Container__radius};
+$default-variables: (
+  "Container____bg-color": var(--color--invert),
+  "Container--uneditable____shadow": var(--shadow--s),
+  "Container--editable____shadow": var(--shadow--m),
+  "Container--editable--hover____shadow": var(--shadow--l),
+  "Container--editing____shadow": var(--shadow--xl),
+  "Container____radius": var(--radius--med),
+);
+
+@mixin generate-container-theme-variables($theme-variables: ()) {
+  $variables: map-merge($default-variables, $theme-variables);
+
+  @each $name, $value in $variables {
+    --#{$name}: #{$value};
+  }
 }

package/styles/components/footnote/_base.scss

@@ -2,7 +2,7 @@
 @import 'themes/researcher';
 
 .Footnote {
-  @include border-l(2px, var(--color--note));
+  border-left: 2px solid var(--color--note);
   color: var(--color--gray-1);
   padding: 0.25em;
   padding-left: 0.75em;

package/styles/components/input_group/_base.scss

@@ -1,5 +1,3 @@
-@import "../../mixins";
-
 @import 'themes/bandit';
 @import 'themes/researcher';
 
@@ -31,7 +29,8 @@
     .Input-Group__Addon,
     .Input,
     .btn {
-      @include rounded-left(var(--Input____radius));
+      border-bottom-left-radius: var(--Input____radius);
+      border-top-left-radius: var(--Input____radius);
     }
   }
 
@@ -39,7 +38,8 @@
     .Input-Group__Addon,
     .Input,
     .btn {
-      @include rounded-right(var(--Input____radius));
+      border-bottom-right-radius: var(--Input____radius);
+      border-top-right-radius: var(--Input____radius);
     }
   }
 

package/styles/components/link_text/_base.scss

@@ -0,0 +1,52 @@
+@import 'themes/bandit';
+@import 'themes/researcher';
+
+$colors: (
+  main,
+  gray-1,
+  gray-2,
+  gray-3,
+  gray-4,
+  gray-5,
+  gray-6,
+  invert,
+  dscout,
+  coachmark,
+  alert,
+  close,
+  success,
+  archive,
+  note,
+  marker,
+  test,
+  part-0,
+  part-1,
+  part-2,
+  part-3,
+  part-4,
+  part-5,
+  part-6,
+  part-7,
+  part-8,
+  part-9
+);
+
+.Link-Text {
+  color: inherit;
+  position: relative;
+  text-decoration: none;
+  border-bottom: solid var(--Link-Text____underline-width);
+  border-bottom-color: rgba(var(--Link-Text____underline-color-rgb), var(--Link-Text____underline-opacity));
+  transition: border-bottom var(--timing--hover);
+
+  &:hover {
+    border-bottom-color: rgba(var(--Link-Text____underline-color-rgb), var(--Link-Text--hover____underline-opacity));
+  }
+}
+
+@each $enum in $colors {
+  .color--#{$enum} .Link-Text,
+  .Link-Text.color--#{$enum} {
+    --Link-Text____underline-color-rgb: var(--color--#{$enum}-rgb);
+  }
+}

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

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

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

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

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

@@ -0,0 +1,11 @@
+@mixin generate-link-text-theme-variables(
+  $Link-Text____underline-color-rgb: var(--color--main-rgb),
+  $Link-Text____underline-width: 1px,
+  $Link-Text____underline-opacity: 0.3,
+  $Link-Text--hover____underline-opacity: 0.625,
+) {
+  --Link-Text____underline-color-rgb: #{$Link-Text____underline-color-rgb};
+  --Link-Text____underline-width: #{$Link-Text____underline-width};
+  --Link-Text____underline-opacity: #{$Link-Text____underline-opacity};
+  --Link-Text--hover____underline-opacity: #{$Link-Text--hover____underline-opacity};
+}

package/styles/components/menu/_base.scss

@@ -40,7 +40,7 @@
   background-color: var(--color--gray-6);
   color: var(--color--gray-2);
   font-size: var(--font-size--s);
-  font-weight: var(--font-weight--6);
+  font-weight: 600;
   letter-spacing: var(--tracked--looser);
   margin: 0.25em 0;
   padding: 1em;
@@ -87,7 +87,6 @@
 
   &:hover {
     background-color: var(--Menu__Item--hovered____bg-color);
-    border-bottom: var(--Menu__Item____border-bottom);
   }
   
   &--selected {
@@ -106,7 +105,7 @@
   }
 
   // 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
+  // .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 {

package/styles/components/pill/_base.scss

@@ -1,6 +1,19 @@
 @import 'themes/bandit';
 @import 'themes/researcher';
 
+$part-colors: (
+  var(--color--part-0),
+  var(--color--part-1),
+  var(--color--part-2),
+  var(--color--part-3), 
+  var(--color--part-4),
+  var(--color--part-5),
+  var(--color--part-6),
+  var(--color--part-7), 
+  var(--color--part-8),
+  var(--color--part-9)
+);
+
 .Pill {
   background-color: var(--Pill____background-color);
   border: 1px solid var(--Pill____border-color);

package/styles/components/segmented_controls/_base.scss

@@ -16,7 +16,7 @@
   border-right: 1px solid var(--color--gray-5);
   color: var(--color--gray-2);
   flex: 1 0 0;
-  font-weight: var(--font-weight--7);
+  font-weight: var(--font-weight--bold);
   margin: 0;
   padding: .75em 0;
   text-align: center;

package/styles/components/swappable/_base.scss

@@ -21,7 +21,11 @@
 
   &--show-B {
     .Swappable-Content__A {
-      @include container-hidden;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      visibility: hidden;
+      width: 100%;
     }
 
     .Swappable-Content__B {
@@ -35,7 +39,11 @@
     }
 
     .Swappable-Content__B {
-      @include container-hidden;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      visibility: hidden;
+      width: 100%;
     }
   }
 }

package/styles/particle.scss

@@ -22,7 +22,6 @@ You can import it into your own scss file like so:
 
 @import 'reset';
 @import 'base';
-@import 'tables';
 
 /* Component classes */
 @import 'components/avatar/base';
@@ -30,6 +29,7 @@ You can import it into your own scss file like so:
 @import 'components/blitz/base';
 @import 'components/chip/base';
 @import 'components/buttons/base';
+@import 'components/button_icon/base';
 @import 'components/card/base';
 @import 'components/collapsible/base';
 @import 'components/container/base';
@@ -41,7 +41,7 @@ You can import it into your own scss file like so:
 @import 'components/icons';
 @import 'components/inputs/base';
 @import 'components/input_group/base';
-@import 'components/links';
+@import 'components/link_text/base';
 @import 'components/list/base';
 @import 'components/menu/base';
 @import 'components/modal/base';

package/styles/themes/_bandit.scss

@@ -1,9 +1,44 @@
+@import 'bandit_colors';
+@import 'theme_builder';
+
 .theme--bandit {
-  @import '../css_variables/bandit';
+  @include generate-theme-variables((
+    /* Shadows */
+    "shadow--s": 0 .125em 1em rgba(var(--color--main-rgb), .08),
+    "shadow--m": 0 .25em 2em rgba(var(--color--main-rgb), .12),
+    "shadow--l": 0 .375em 3em rgba(var(--color--main-rgb), .16),
+    "shadow--xl": 0 .5em 4em rgba(var(--color--main-rgb), .24),
+    
+    /* Radii */
+    "radius--tiny": .125em,
+    "radius--small": .25em,
+    "radius--med": .5em,
+    "radius--large": .75em,
+    
+    /* Font sizes */
+    "font-size--xxs": .5em,
+    "font-size--xs": .75em,
+    "font-size--s": .875em,
+    "font-size--base": 1em,
+    "font-size--l": 1.125em,
+    "font-size--xl": 1.5em,
+    "font-size--xxl": 2em,
+    "font-size--xxxl": 3em,
+    "font-size--subheadline": 4em,
+    "font-size--headline": 5em,
+    
+    /* Font weights */
+    "font-weight--normal": 400,
+    "font-weight--semibold": 600,
+    "font-weight--bold": 700,
+
+    /* Body variables */
+    "base____font-size": 1rem
+  ));
 
   /* Default inherited properties */
-  color: var(--Body__color);
-  font-family: var(--Body__font-family);
-  font-size: var(--Body__font-size);
-  line-height: var(--Body__line-height);
+  color: var(--base____color);
+  font-family: var(--base____font-family);
+  font-size: var(--base____font-size);
+  line-height: var(--base____line-height);
 }

package/styles/themes/_bandit_colors.scss

@@ -0,0 +1,9 @@
+// The Bandit theme extends the Researcher theme's color palette.
+@import 'researcher_colors';
+
+$color--gray-1: #323232;
+$color--gray-2: #646464;
+$color--gray-3: #aeaeae;
+$color--gray-4: #dedede;
+$color--gray-5: #f0f0f0;
+$color--gray-6: #fafafa;

package/styles/themes/_researcher.scss

@@ -1,9 +1,12 @@
+@import 'researcher_colors';
+@import 'theme_builder';
+
 .theme--researcher {
-  @import '../css_variables/researcher';
+  @include generate-theme-variables();
 
   /* Default inherited properties */
-  color: var(--Body__color);
-  font-family: var(--Body__font-family);
-  font-size: var(--Body__font-size);
-  line-height: var(--Body__line-height);
+  color: var(--base____color);
+  font-family: var(--base____font-family);
+  font-size: var(--base____font-size);
+  line-height: var(--base____line-height);
 }