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

package/styles/_theme_builder.scss

@@ -1,356 +0,0 @@
-@function extract-rgb($color) {
-  @return red($color), green($color), blue($color);
-}
-
-@mixin generate-theme-variables(
-  /* Monotone color palette */
-  $color--main: $color--main,
-  $color--invert: $color--invert,
-  $color--none: $color--none,
-
-  $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: $color--dscout-light,
-  $color--dscout-outline: $color--dscout-outline,
-  $color--dscout: $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-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-dark: $color--coachmark-dark,
-  $color--coachmark-darkest: $color--coachmark-darkest,
-
-  /* Secondary color palette */
-  $color--close: $color--close,
-  $color--close-dark: mix(black, $color--close, 10%),
-  $color--close-darkest: mix(black, $color--close, 20%),
-
-  $color--success: $color--success,
-  $color--success-dark: mix(black, $color--success, 10%),
-  $color--success-darkest: mix(black, $color--success, 20%),
-
-  $color--archive: $color--archive,
-  $color--archive-dark: mix(black, $color--archive, 10%),
-  $color--archive-darkest: mix(black, $color--archive, 20%),
-
-  $color--note: $color--note,
-  $color--note-dark: mix(black, $color--note, 5%),
-  $color--note-darkest: mix(black, $color--note, 10%),
-
-  $color--marker: $color--marker,
-  $color--marker-dark: mix(black, $color--marker, 10%),
-  $color--marker-darkest: mix(black, $color--marker, 20%),
-
-  $color--test: $color--test,
-  $color--test-dark: mix(black, $color--test, 10%),
-  $color--test-darkest: mix(black, $color--test, 20%),
-
-  $color--scout: $color--scout,
-  $color--scout-dark: mix(black, $color--scout, 10%),
-  $color--scout-darkest: mix(black, $color--scout, 20%),
-
-  /* Part colors */
-  $color--part-0: $color--part-0,
-  $color--part-1: $color--part-1,
-  $color--part-2: $color--part-2,
-  $color--part-3: $color--part-3,
-  $color--part-4: $color--part-4,
-  $color--part-5: $color--part-5,
-  $color--part-6: $color--part-6,
-  $color--part-7: $color--part-7,
-  $color--part-8: $color--part-8,
-  $color--part-9: $color--part-9,
-
-  /* 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%),
-
-  /* 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 $space--m $space--base rgba(var(--color--main-rgb), 0.1),
-  $shadow--xl: 0 $space--m $space--base rgba(var(--color--main-rgb), 0.2),
-
-  /* Radii */
-  $radius--none: $radius--none,
-  $radius--tiny: $radius--tiny,
-  $radius--small: $radius--small,
-  $radius--med: $radius--med,
-  $radius--large: $radius--large,
-  $radius--circle: $radius--circle,
-  $radius--pill: $radius--pill,
-
-  /* Fonts */
-  $font--stack: $font--stack,
-  $font--monospace: $font--monospace,
-  $font--emoji: $font--emoji,
-
-  /* Font sizes */
-  $font-size--xxs: $font-size--xxs,
-  $font-size--xs: $font-size--xs,
-  $font-size--s: $font-size--s,
-  $font-size--base: $font-size--base,
-  $font-size--l: $font-size--l,
-  $font-size--xl: $font-size--xl,
-  $font-size--xxl: $font-size--xxl,
-  $font-size--xxxl: $font-size--xxxl,
-  $font-size--subheadline: $font-size--subheadline,
-  $font-size--headline: $font-size--headline,
-
-  /* Font weights */
-  $font-weight--normal: 400,
-  $font-weight--semibold: 600,
-  $font-weight--bold: 700,
-
-  /* Line heights */
-  $line-height--copy: $line-height--copy,
-  $line-height--solid: $line-height--solid,
-  $line-height--title: $line-height--title,
-  $line-height--loose: $line-height--loose,
-
-  /* Tracking */
-  $tracked--tighter: $tracked--tighter,
-  $tracked--tight: $tracked--tight,
-  $tracked--loose: $tracked--loose,
-  $tracked--looser: $tracked--looser,
-  $tracked--mega: $tracked--mega,
-  
-  /* Transition timings */
-  $timing--click: $timing--click,
-  $timing--hover: $timing--hover,
-  $timing--fade: $timing--fade,
-  $timing--rotate: $timing--rotate,
-
-  /* Body variables */
-  $Body__bg-color: var(--color--gray-5),
-  $Body__color: $color--main,
-  $Body__font-family: $font--stack,
-  $Body__font-size: .875rem,
-  $Body__line-height: $line-height--copy
-) {
-  /* Monotone color palette */
-  --color--main: #{$color--main};
-  --color--main-rgb: #{extract-rgb($color--main)};
-
-  --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)};
-
-  --color--invert: #{$color--invert};
-  --color--invert-rgb: #{extract-rgb($color--invert)};
-
-  --color--none: #{$color--none};
-
-  /* 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: #{$color--close};
-  --color--close-rgb: #{extract-rgb($color--close)};
-  --color--close-dark: #{$color--close-dark};
-  --color--close-darkest: #{$color--close-darkest};
-
-  --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: #{$color--archive};
-  --color--archive-rgb: #{extract-rgb($color--archive)};
-  --color--archive-dark: #{$color--archive-dark};
-  --color--archive-darkest: #{$color--archive-darkest};
-
-  --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: #{$color--marker};
-  --color--marker-rgb: #{extract-rgb($color--marker)};
-  --color--marker-dark: #{$color--marker-dark};
-  --color--marker-darkest: #{$color--marker-darkest};
-
-  --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: #{$color--scout};
-  --color--scout-rgb: #{extract-rgb($color--scout)};
-  --color--scout-dark: #{$color--scout-dark};
-  --color--scout-darkest: #{$color--scout-darkest};
-
-  /* Product color aliases */
-  --color--live: #{$color--live};
-  --color--live-rgb: #{extract-rgb($color--live)};
-  --color--live-dark: #{$color--live-dark};
-  --color--live-darkest: #{$color--live-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};
-
-  /* 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)};
-
-  /* Shadows */
-  --shadow--s: #{$shadow--s};
-  --shadow--m: #{$shadow--m};
-  --shadow--l: #{$shadow--l};
-  --shadow--xl: #{$shadow--xl};
-
-  /* Radii */
-  --radius--none: #{$radius--none};
-  --radius--tiny: #{$radius--tiny};
-  --radius--small: #{$radius--small};
-  --radius--med: #{$radius--med};
-  --radius--large: #{$radius--large};
-  --radius--circle: #{$radius--circle};
-  --radius--pill: #{$radius--pill};
-
-  /* Fonts */
-  --font--stack: #{$font--stack};
-  --font--monospace: #{$font--monospace};
-  --font--emoji: #{$font--emoji};
-
-  /* Font sizes */
-  --font-size--xxs: #{$font-size--xxs};
-  --font-size--xs: #{$font-size--xs};
-  --font-size--s: #{$font-size--s};
-  --font-size--base: #{$font-size--base};
-  --font-size--l: #{$font-size--l};
-  --font-size--xl: #{$font-size--xl};
-  --font-size--xxl: #{$font-size--xxl};
-  --font-size--xxxl: #{$font-size--xxxl};
-  --font-size--subheadline: #{$font-size--subheadline};
-  --font-size--headline: #{$font-size--headline};
-
-  /* Font weights */
-  --font-weight--normal: #{$font-weight--normal};
-  --font-weight--semibold: #{$font-weight--semibold};
-  --font-weight--bold: #{$font-weight--bold};
-  --font-weight--1: #{$font-weight--1};
-  --font-weight--2: #{$font-weight--2};
-  --font-weight--3: #{$font-weight--3};
-  --font-weight--4: #{$font-weight--4};
-  --font-weight--5: #{$font-weight--5};
-  --font-weight--6: #{$font-weight--6};
-  --font-weight--7: #{$font-weight--7};  
-  --font-weight--8: #{$font-weight--8};
-  --font-weight--9: #{$font-weight--9};     
-
-  /* Line heights */
-  --line-height--copy: #{$line-height--copy};
-  --line-height--solid: #{$line-height--solid};
-  --line-height--title: #{$line-height--title};
-  --line-height--loose: #{$line-height--loose};
-
-  /* Tracking */
-  --tracked--tighter: #{$tracked--tighter};
-  --tracked--tight: #{$tracked--tight};
-  --tracked--loose: #{$tracked--loose};
-  --tracked--looser: #{$tracked--looser};
-  --tracked--mega: #{$tracked--mega};
-
-  /* Transition timings */
-  --timing--click: #{$timing--click};
-  --timing--hover: #{$timing--hover};
-  --timing--fade: #{$timing--fade};
-  --timing--rotate: #{$timing--rotate};
-
-  --Body__bg-color: #{$Body__bg-color};
-  --Body__color: #{$Body__color};
-  --Body__font-family: #{$Body__font-family};
-  --Body__font-size: #{$Body__font-size};
-  --Body__line-height: #{$Body__line-height};
-}

package/styles/_variables.scss

@@ -1,248 +0,0 @@
-// grid
-
-$grid-unit: .25em;  // Grid size
-
-@function grid-units($n, $unit: $grid-unit) {
-  @return $n * $unit;
-}
-
-$space--none: 0;
-$space--1px:  1px;
-$space--xs:   $grid-unit;
-$space--s:    grid-units(3);  // space below paragraphs and block elements
-$space--m:    grid-units(4);  // small space
-$space--base: grid-units(8);  // standard space
-$space--l:    grid-units(12); // large space
-$space--xl:   grid-units(16); // extra large space
-
-$space--icon-1x: 1.563em;
-$space--icon-2x: 3.125em;
-
-$space--1:  $space--base;
-$space--2:  grid-units(2, $space--base);
-$space--3:  grid-units(3, $space--base);
-$space--4:  grid-units(4, $space--base);
-$space--5:  grid-units(5, $space--base);
-$space--6:  grid-units(6, $space--base);
-$space--7:  grid-units(7, $space--base);
-$space--8:  grid-units(8, $space--base);
-$space--9:  grid-units(9, $space--base);
-$space--10: grid-units(10, $space--base);
-$space--11: grid-units(11, $space--base);
-$space--12: grid-units(12, $space--base);
-$space--13: grid-units(13, $space--base);
-$space--14: grid-units(14, $space--base);
-$space--15: grid-units(15, $space--base);
-$space--16: grid-units(16, $space--base);
-$space--20: grid-units(20, $space--base);
-$space--24: grid-units(24, $space--base);
-$space--30: grid-units(30, $space--base);
-
-// media-queries
-
-$breakpoint--not-small: 'screen and (min-width: 30em)' !default;
-$breakpoint--medium:    'screen and (min-width: 30em) and (max-width: 60em)'
-                        !default;
-$breakpoint--large:     'screen and (min-width: 60em)' !default;
-
-// 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';
-
-// line-heights
-
-$line-height--copy:  1.5;
-$line-height--solid: 1;
-$line-height--title: 1.25;
-$line-height--loose: 2;
-
-// letter-spacings
-
-$tracked--loose:    .03125em;
-$tracked--looser:   .0625em;
-$tracked--tight:   -.03125em;
-$tracked--tighter: -.0625em;
-$tracked--mega:     .25em;
-
-// radii
-
-$radius--none:   0;
-$radius--tiny:   .125rem;
-$radius--small:  .188em;
-$radius--med:    .313rem;
-$radius--large:  .625rem;
-$radius--circle: 50%;
-$radius--pill:   50rem;
-
-// timings
-
-$timing--click:  .1s;
-$timing--hover:  .2s;
-$timing--fade:   .4s;
-$timing--rotate: .6s;
-
-// font-sizes
-
-$font-size--headline: 6em;
-$font-size--subheadline: 5em;
-$font-size--xxxl: 2.074em;
-$font-size--xxl:  1.728em;
-$font-size--xl:   1.44em;
-$font-size--l:    1.2em;
-$font-size--base: 1em;
-$font-size--s:    .875em;
-$font-size--xs:   .750em;
-$font-size--xxs:  .563em;
-
-// font-weights
-
-$font-weight--normal: normal;
-$font-weight--bold:   bold;
-$font-weight--1:      100;
-$font-weight--2:      200;
-$font-weight--3:      300;
-$font-weight--4:      400;
-$font-weight--5:      500;
-$font-weight--6:      600;
-$font-weight--7:      700;
-$font-weight--8:      800;
-$font-weight--9:      900;
-
-// colors
-
-$color--main:       #222;                    // text color
-$color--invert:     #fff;                    // white
-
-$color--main-light: rgba($color--main, .6275); // sibling to text, lighter version
-$color--dem:        rgba($color--main, .3);    // de-emphasised elements
-$color--disabled:   rgba($color--main, .15);   // disabled elements
-$color--faint:      rgba($color--main, .05);   // use this to de-emphasise more
-$color--min:        rgba($color--main, .02);   // off-white. minimal visible bg
-$color--none:       rgba(0,0,0, 0);          // transparent
-
-// if you need any of the colors above without being affected by the
-// background, use these (or when using svg icons)
-
-$color--main-light-s:     mix($color--invert, $color--main, 37%);
-$color--dem-s:     mix($color--invert, $color--main, 70%);
-$color--disabled-s:     mix($color--invert, $color--main, 85%);
-$color--faint-s:      mix($color--invert, $color--main, 95%);
-$color--min-s:     mix($color--invert, $color--main, 98%);
-
-// special purpose
-
-$color--edit-state:   rgba($color--main, .03); // bg for edit questions
-$color--hover-bg:     rgba($color--main, .03); // bg color for hovers in lists
-$color--edit-state-s: mix($color--invert, $color--main, 97%);
-$color--hover-bg-s:   mix($color--invert, $color--main, 97%);
-
-$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)
-
-$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));
-
-// lines
-
-$color--line: rgba($color--main, .1); // color for lines
-$color--line-s: mix($color--invert, $color--main, 90%); // color for lines
-
-// accents
-
-$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;
-
-$color--close:         #445ea3;
-$color--close-dark:    mix(black, $color--close, 10%);
-$color--close-darkest: mix(black, $color--close, 20%);
-
-$color--success:         #2ed491;
-$color--success-dark:    mix(black, $color--success, 10%);
-$color--success-darkest: mix(black, $color--success, 20%);
-
-$color--archive:      #c69c6d;
-$color--archive-dark: mix(black, $color--archive, 10%);
-$color--archive-darkest: mix(black, $color--archive, 20%);
-
-$color--note:         #ffe291;
-$color--note-dark:    mix(black, $color--note, 5%);
-$color--note-darkest: mix(black, $color--note, 10%);
-
-$color--marker:         #fff480;
-$color--marker-dark:    mix(black, $color--marker, 10%);
-$color--marker-darkest: mix(black, $color--marker, 20%);
-
-$color--test:         #8bd9d0;
-$color--test-dark:    mix(black, $color--test, 10%);
-$color--test-darkest: mix(black, $color--test, 20%);
-
-$color--scout:         #8cffd0;
-$color--scout-dark:    mix(black, $color--scout, 10%);
-$color--scout-darkest: mix(black, $color--scout, 20%);
-
-$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%);
-
-// form fields
-
-$color--field-text:         $color--main-light; // placeholder text
-$color--field-text-focus:   $color--main-light; // placeholder text on focus
-$color--field-text-filled:  rgba($color--main, .8);
-$color--field-text-invalid: rgba($color--alert, 1);
-
-$color--field-bg:           rgba($color--main,  .02);
-$color--field-bg-focus:     rgba($color--main,  .01);
-$color--field-bg-filled:    rgba($color--main,  .01);
-$color--field-bg-invalid:   rgba($color--alert, .02);
-
-$color--field-b:            rgba($color--main,   .1);
-$color--field-b-radio:      rgba($color--main,   .2);
-$color--field-b-focus:      rgba($color--dscout, .5);
-$color--field-b-filled:     rgba($color--main,   .05);
-$color--field-b-invalid:    rgba($color--alert,  .3);
-
-// box-shadows
-
-$shadow--s : 0 .22rem .5rem rgba($color--main, 0.03);
-$shadow--m : 0 .22rem .5rem rgba($color--main, 0.08);
-$shadow--l : 0 $space--m $space--base rgba($color--main, 0.1);
-$shadow--xl: 0 $space--m $space--base rgba($color--main, 0.2);
-$shadow    : $shadow--s;