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

package/styles/color_schemes/_bandit_dark.scss

@@ -0,0 +1,53 @@
+@use 'bandit_dark_colors' as *;
+@use 'color_scheme_builder' as *;
+
+.color-scheme--bandit-dark,
+.color-scheme--bandit-dark-close,
+.color-scheme--bandit-dark-coachmark,
+.color-scheme--bandit-dark-dscout,
+.color-scheme--bandit-dark-success,
+.color-scheme--bandit-dark-test {
+  @include generate-color-scheme-variables($colors, (
+    "color--main": var(--color--white),
+    "color--main-rgb": var(--color--white-rgb),
+    "color--invert": var(--color--black),
+    "color--invert-rgb": var(--color--black-rgb),
+    "base____bg-color": var(--color--invert),
+  ));
+}
+
+.color-scheme--bandit-dark {
+  --color--shadow: #000;
+  --color--shadow-rgb: 0,0,0;
+  --base____bg-color: #111;
+}
+
+.color-scheme--bandit-dark-close {
+  --color--invert: var(--color--close);
+  --color--invert-rgb: var(--color--close-rgb);
+  --base____bg-color: var(--color--close-dark);
+}
+
+.color-scheme--bandit-dark-coachmark {
+  --color--invert: var(--color--coachmark);
+  --color--invert-rgb: var(--color--coachmark-rgb);
+  --base____bg-color: var(--color--coachmark-dark);
+}
+
+.color-scheme--bandit-dark-dscout {
+  --color--invert: var(--color--dscout);
+  --color--invert-rgb: var(--color--dscout-rgb);
+  --base____bg-color: var(--color--dscout-dark);
+}
+
+.color-scheme--bandit-dark-success {
+  --color--invert: var(--color--success);
+  --color--invert-rgb: var(--color--success-rgb);
+  --base____bg-color: var(--color--success-dark);
+}
+
+.color-scheme--bandit-dark-test {
+  --color--invert: var(--color--test);
+  --color--invert-rgb: var(--color--test-rgb);
+  --base____bg-color: var(--color--test-dark);
+}

package/styles/color_schemes/_bandit_dark_colors.scss

@@ -0,0 +1,20 @@
+@use 'sass:meta';
+@use 'base_colors';
+
+// It may be useful in the future to define these Bandit-specific color values
+// with Sass variables to be able to more easily reuse them between the
+// different Bandit-specific color schemes. Lets revisit this when color
+// schemes have gone through a more thorough design review and we've solidified
+// their values.
+
+$colors: map-merge(
+  meta.module-variables(base_colors),
+  (
+    'color--gray-1': #fafafa,
+    'color--gray-2': #f0f0f0,
+    'color--gray-3': #dedede,
+    'color--gray-4': #aeaeae,
+    'color--gray-5': #646464,
+    'color--gray-6': #323232
+  )
+);

package/styles/color_schemes/_bandit_light.scss

@@ -0,0 +1,6 @@
+@use 'bandit_light_colors' as *;
+@use 'color_scheme_builder' as *;
+
+.color-scheme--bandit-light {
+  @include generate-color-scheme-variables($colors);
+}

package/styles/color_schemes/_bandit_light_colors.scss

@@ -0,0 +1,20 @@
+@use 'sass:meta';
+@use 'base_colors';
+
+// It may be useful in the future to define these Bandit-specific color values
+// with Sass variables to be able to more easily reuse them between the
+// different Bandit-specific color schemes. Lets revisit this when color
+// schemes have gone through a more thorough design review and we've solidified
+// their values.
+
+$colors: map-merge(
+  meta.module-variables(base_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_colors.scss → color_schemes/_base_colors.scss}

@@ -1,14 +1,14 @@
 /* Monotone color palette */
-$color--main: #222;
-$color--invert: #fff;
+$color--black: #222;
+$color--white: #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%);
+$color--gray-1: mix($color--white, $color--black, 37%);
+$color--gray-2: mix($color--white, $color--black, 70%);
+$color--gray-3: mix($color--white, $color--black, 85%);
+$color--gray-4: mix($color--white, $color--black, 90%);
+$color--gray-5: mix($color--white, $color--black, 95%);
+$color--gray-6: mix($color--white, $color--black, 98%);
 
 /* Primary color palette */
 $color--dscout-light:   #e5f0ff;

package/styles/color_schemes/_color_scheme_builder.scss

@@ -0,0 +1,169 @@
+@use 'sass:meta';
+@use '../functions/colors' as *;
+
+@function get-color($colors, $name) {
+  @return map-get($colors, 'color--#{$name}');
+}
+
+@function get-default-variables($colors) {
+  @return (
+    /* Monotone color palette */
+    "color--main": get-color($colors, 'black'),
+    "color--main-rgb": extract-rgb(get-color($colors, 'black')),
+  
+    "color--invert": get-color($colors, 'white'),
+    "color--invert-rgb": extract-rgb(get-color($colors, 'white')),
+  
+    "color--none": get-color($colors, 'none'),
+  
+    "color--black": get-color($colors, 'black'),
+    "color--black-rgb": extract-rgb(get-color($colors, 'black')),
+    
+    "color--gray-1": get-color($colors, 'gray-1'),
+    "color--gray-1-rgb": extract-rgb(get-color($colors, 'gray-1')),
+  
+    "color--gray-2": get-color($colors, 'gray-2'),
+    "color--gray-2-rgb": extract-rgb(get-color($colors, 'gray-2')),
+  
+    "color--gray-3": get-color($colors, 'gray-3'),
+    "color--gray-3-rgb": extract-rgb(get-color($colors, 'gray-3')),
+  
+    "color--gray-4": get-color($colors, 'gray-4'),
+    "color--gray-4-rgb": extract-rgb(get-color($colors, 'gray-4')),
+  
+    "color--gray-5": get-color($colors, 'gray-5'),
+    "color--gray-5-rgb": extract-rgb(get-color($colors, 'gray-5')),
+  
+    "color--gray-6": get-color($colors, 'gray-6'),
+    "color--gray-6-rgb": extract-rgb(get-color($colors, 'gray-6')),
+  
+    "color--white": get-color($colors, 'white'),
+    "color--white-rgb": extract-rgb(get-color($colors, 'white')),
+    
+    /* Primary color palette */
+    "color--dscout-light": get-color($colors, 'dscout-light'),
+    "color--dscout-outline": get-color($colors, 'dscout-outline'),
+    "color--dscout": get-color($colors, 'dscout'),
+    "color--dscout-rgb": extract-rgb(get-color($colors, 'dscout')),
+    "color--dscout-dark": get-color($colors, 'dscout-dark'),
+    "color--dscout-darkest": get-color($colors, 'dscout-darkest'),
+  
+    "color--alert-light": get-color($colors, 'alert-light'),
+    "color--alert-outline": get-color($colors, 'alert-outline'),
+    "color--alert":  get-color($colors, 'alert'),
+    "color--alert-rgb":  extract-rgb(get-color($colors, 'alert')),
+    "color--alert-dark": get-color($colors, 'alert-dark'),
+    "color--alert-darkest": get-color($colors, 'alert-darkest'),
+  
+    "color--coachmark-light": get-color($colors, 'coachmark-light'),
+    "color--coachmark-outline": get-color($colors, 'coachmark-outline'),
+    "color--coachmark":  get-color($colors, 'coachmark'),
+    "color--coachmark-rgb": extract-rgb(get-color($colors, 'coachmark')),
+    "color--coachmark-dark": get-color($colors, 'coachmark-dark'),
+    "color--coachmark-darkest": get-color($colors, 'coachmark-darkest'),
+  
+    /* Secondary color palette */
+    "color--close-light": get-color($colors, 'close-light'),
+    "color--close": get-color($colors, 'close'),
+    "color--close-rgb": extract-rgb(get-color($colors, 'close')),
+    "color--close-dark": get-color($colors, 'close-dark'),
+    "color--close-darkest": get-color($colors, 'close-darkest'),
+  
+    "color--success-light": get-color($colors, 'success-light'),
+    "color--success": get-color($colors, 'success'),
+    "color--success-rgb": extract-rgb(get-color($colors, 'success')),
+    "color--success-dark": get-color($colors, 'success-dark'),
+    "color--success-darkest": get-color($colors, 'success-darkest'),
+  
+    "color--archive-light": get-color($colors, 'archive-light'),
+    "color--archive": get-color($colors, 'archive'),
+    "color--archive-rgb": extract-rgb(get-color($colors, 'archive')),
+    "color--archive-dark": get-color($colors, 'archive-dark'),
+    "color--archive-darkest": get-color($colors, 'archive-darkest'),
+  
+    "color--note-light": get-color($colors, 'note-light'),
+    "color--note": get-color($colors, 'note'),
+    "color--note-rgb": extract-rgb(get-color($colors, 'note')),
+    "color--note-dark": get-color($colors, 'note-dark'),
+    "color--note-darkest": get-color($colors, 'note-darkest'),
+  
+    "color--marker-light": get-color($colors, 'marker-light'),
+    "color--marker": get-color($colors, 'marker'),
+    "color--marker-rgb": extract-rgb(get-color($colors, 'marker')),
+    "color--marker-dark": get-color($colors, 'marker-dark'),
+    "color--marker-darkest": get-color($colors, 'marker-darkest'),
+  
+    "color--test-light": get-color($colors, 'test-light'),
+    "color--test": get-color($colors, 'test'),
+    "color--test-rgb": extract-rgb(get-color($colors, 'test')),
+    "color--test-dark": get-color($colors, 'test-dark'),
+    "color--test-darkest": get-color($colors, 'test-darkest'),
+  
+    "color--scout-light": get-color($colors, 'scout-light'),
+    "color--scout": get-color($colors, 'scout'),
+    "color--scout-rgb": extract-rgb(get-color($colors, 'scout')),
+    "color--scout-dark": get-color($colors, 'scout-dark'),
+    "color--scout-darkest": get-color($colors, 'scout-darkest'),
+  
+    /* Part colors */
+    "color--part-0": get-color($colors, 'part-0'),
+    "color--part-0-rgb": extract-rgb(get-color($colors, 'part-0')),
+  
+    "color--part-1": get-color($colors, 'part-1'),
+    "color--part-1-rgb": extract-rgb(get-color($colors, 'part-1')),
+  
+    "color--part-2": get-color($colors, 'part-2'),
+    "color--part-2-rgb": extract-rgb(get-color($colors, 'part-2')),
+  
+    "color--part-3": get-color($colors, 'part-3'),
+    "color--part-3-rgb": extract-rgb(get-color($colors, 'part-3')),
+  
+    "color--part-4": get-color($colors, 'part-4'),
+    "color--part-4-rgb": extract-rgb(get-color($colors, 'part-4')),
+  
+    "color--part-5": get-color($colors, 'part-5'),
+    "color--part-5-rgb": extract-rgb(get-color($colors, 'part-5')),
+  
+    "color--part-6": get-color($colors, 'part-6'),
+    "color--part-6-rgb": extract-rgb(get-color($colors, 'part-6')),
+  
+    "color--part-7": get-color($colors, 'part-7'),
+    "color--part-7-rgb": extract-rgb(get-color($colors, 'part-7')),
+  
+    "color--part-8": get-color($colors, 'part-8'),
+    "color--part-8-rgb": extract-rgb(get-color($colors, 'part-8')),
+  
+    "color--part-9": get-color($colors, 'part-9'),
+    "color--part-9-rgb": extract-rgb(get-color($colors, 'part-9')),
+  
+    /* Product color aliases */
+    "color--live": get-color($colors, 'alert'),
+    "color--live-rgb": extract-rgb(get-color($colors, 'live')),
+    "color--live-dark": get-color($colors, 'alert-dark'),
+    "color--live-darkest": get-color($colors, 'alert-darkest'),
+  
+    "color--diary": get-color($colors, 'diary'),
+    "color--diary-rgb": extract-rgb(get-color($colors, 'diary')),
+    "color--diary-dark": get-color($colors, 'diary-dark'),
+    "color--diary-darkest": get-color($colors, 'diary-darkest'),
+  
+    "color--screener": get-color($colors, 'screener'),
+    "color--screener-rgb": extract-rgb(get-color($colors, 'screener')),
+    "color--screener-dark": get-color($colors, 'screener-dark'),
+    "color--screener-darkest": get-color($colors, 'screener-darkest'),
+  
+    "color--shadow": get-color($colors, 'black'),
+    "color--shadow-rgb": extract-rgb(get-color($colors, 'black')),
+
+    "base____bg-color": var(--color--gray-5),
+    "base____color": var(--color--main),
+  );
+}
+
+@mixin generate-color-scheme-variables($colors, $color-scheme-variables: ()) {
+  $variables: map-merge(get-default-variables($colors), $color-scheme-variables);
+
+  @each $name, $value in $variables {
+    --#{$name}: #{$value};
+  }
+}

package/styles/color_schemes/_index.scss

@@ -0,0 +1,12 @@
+@use 'researcher_light';
+@use 'researcher_dark';
+@use 'bandit_light';
+@use 'bandit_dark';
+
+.color-scheme--with-background-color {
+  background-color: var(--base____bg-color);
+}
+
+.color-scheme--with-color {
+  color: var(--base____color);
+}

package/styles/color_schemes/_researcher_dark.scss

@@ -0,0 +1,52 @@
+@use 'researcher_dark_colors' as *;
+@use 'color_scheme_builder' as *;
+
+.color-scheme--researcher-dark,
+.color-scheme--researcher-dark-close,
+.color-scheme--researcher-dark-coachmark,
+.color-scheme--researcher-dark-dscout,
+.color-scheme--researcher-dark-success,
+.color-scheme--researcher-dark-test {
+  @include generate-color-scheme-variables($colors, (
+    "color--main": var(--color--white),
+    "color--main-rgb": var(--color--white-rgb),
+    "color--invert": var(--color--black),
+    "color--invert-rgb": var(--color--black-rgb)
+  ));
+}
+
+.color-scheme--researcher-dark {
+  --color--shadow: #000;
+  --color--shadow-rgb: 0,0,0;
+  --base____bg-color: #111;
+}
+
+.color-scheme--researcher-dark-close {
+  --color--invert: var(--color--close);
+  --color--invert-rgb: var(--color--close-rgb);
+  --base____bg-color: var(--color--close-dark);
+}
+
+.color-scheme--researcher-dark-coachmark {
+  --color--invert: var(--color--coachmark);
+  --color--invert-rgb: var(--color--coachmark-rgb);
+  --base____bg-color: var(--color--coachmark-dark);
+}
+
+.color-scheme--researcher-dark-dscout {
+  --color--invert: var(--color--dscout);
+  --color--invert-rgb: var(--color--dscout-rgb);
+  --base____bg-color: var(--color--dscout-dark);
+}
+
+.color-scheme--researcher-dark-success {
+  --color--invert: var(--color--success);
+  --color--invert-rgb: var(--color--success-rgb);
+  --base____bg-color: var(--color--success-dark);
+}
+
+.color-scheme--researcher-dark-test {
+  --color--invert: var(--color--test);
+  --color--invert-rgb: var(--color--test-rgb);
+  --base____bg-color: var(--color--test-dark);
+}

package/styles/color_schemes/_researcher_dark_colors.scss

@@ -0,0 +1,14 @@
+@use 'sass:meta';
+@use 'base_colors';
+
+$colors: map-merge(
+  meta.module-variables(base_colors),
+  (
+    'color--gray-1': base_colors.$color--gray-6,
+    'color--gray-2': base_colors.$color--gray-5,
+    'color--gray-3': base_colors.$color--gray-4,
+    'color--gray-4': base_colors.$color--gray-3,
+    'color--gray-5': base_colors.$color--gray-2,
+    'color--gray-6': base_colors.$color--gray-1
+  )
+);

package/styles/color_schemes/_researcher_light.scss

@@ -0,0 +1,6 @@
+@use 'researcher_light_colors' as *;
+@use 'color_scheme_builder' as *;
+
+.color-scheme--researcher-light {
+  @include generate-color-scheme-variables($colors);
+}

package/styles/color_schemes/_researcher_light_colors.scss

@@ -0,0 +1,4 @@
+@use 'sass:meta';
+@use 'base_colors';
+
+$colors: meta.module-variables(base_colors);

package/styles/components/_focus-intent.scss

@@ -7,8 +7,8 @@
 
 .mouse-intent {
   .blitz,
-  .btn,
-  .btn--icon,
+  .Button,
+  .Button-Icon,
   .Menu__Item,
   .Menu__Toggle,
   .modal,

package/styles/components/attribute_selector/_base.scss

@@ -22,6 +22,11 @@
   left: -1000em;
   font-size: inherit;
   position: absolute;
+
+  &:disabled + .Attribute__Label {
+    opacity: 0.3;
+    pointer-events: none;
+  }
   
   &:focus {
     outline: none;
@@ -39,10 +44,8 @@
   border-radius: var(--Attribute____border-radius);
   color: var(--Attribute____color);
   cursor: pointer;
-  font-size: var(--Attribute____font-size);
-  letter-spacing: var(--tracked--loose);
+  display: inline-block;
   padding: var(--Attribute____padding);
-  text-transform: uppercase;
   transition: border var(--timing--hover), color var(--timing--hover);
 
   &:hover {
@@ -50,6 +53,15 @@
     color: var(--Attribute--hover____color)
   }
 
+  &--read-only {
+    cursor: default;
+
+    &:hover {
+      border: var(--Attribute____border-width) solid var(--Attribute____border-color);
+      color: var(--Attribute____color);
+    }
+  }
+
   &--selected,
   &--selected:hover {
     background-color: var(--Attribute--selected____background-color);
@@ -58,3 +70,11 @@
     cursor: default;
   }
 }
+
+.Attribute__Label__Content {
+  display: block;
+  font-size: var(--Attribute____font-size);
+  letter-spacing: var(--tracked--loose);
+  line-height: var(--Attribute____line-height);
+  text-transform: uppercase;
+}

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

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

package/styles/components/avatar/_base.scss

@@ -3,6 +3,7 @@
 
 .Avatar {
   align-items: center;
+  background-color: var(--Avatar____bg-color);
   background-position: center;
   background-size: cover;
   border-radius: 50%;
@@ -15,10 +16,10 @@
   width: 40px;
 }
 
-.Avatar--background {
-  background-color: var(--Avatar____bg-color);
+.Avatar--loaded {
+  background-color: initial;
 }
 
-.Avatar--initials {
+.Avatar__Initials {
   line-height: 1;
 }