[Test] Publishing test for atoms

atomic/_particles.scss

@@ -1,3 +1,4 @@
+@import "util";
 @import "particles/props";
 @import "particles/modifiers";
 @import "particles/mixins";

atomic/_util.scss

@@ -0,0 +1,70 @@
+@import "../props";
+
+@mixin custom_property($prop, $val, $fallback: true) {
+    // Modified from
+    // http://codepen.io/jakealbaugh/post/css4-variables-with-fallbacks-using-sass
+  $map__name: map-get($prop__map, $prop);
+  $nest__name: null;
+  $nest__map__name: null;
+  $map: null;
+  $var__fall: null;
+  $var__output: null;
+
+  @if type-of($map__name) == list {
+    $nest__name: nth($map__name, 1);
+    $nest__map__name: nth($map__name, 2);
+  }
+
+  @if $nest-name {
+    $map: map-get($prop__map, $nest__name);
+    $nest__map: map-get($map, $nest__map__name);
+    $var__fall: map-get($nest__map, $val);
+    $var-output: var(--#{$nest__name}-#{$nest__map__name}-#{$val});
+  } @else {
+    $map: map-get($prop__map, $map-name);
+    $var-fall: map-get($map, $var);
+    $var-output: var(--#{$map__name}-#{$val});
+  }
+  @if $fallback {
+    #{$prop}: $val;
+  }
+  #{$prop}: $var__output;
+
+}
+
+@mixin apply-directive($name, $fallback: true){
+  @if $name {
+    @if $fallback {
+       @extend %#{$name};
+    }
+    @apply #{--$name}
+  }
+}
+
+@mixin custom_properties($var__map){
+  @each $prop__name, $prop__mapping in $prop__map {
+
+    @each $var, $val in $prop__mapping {
+      @if type-of($val) == map {
+        @each $var__n, $val__n in $val {
+          #{--$prop__name}__#{$var}__#{$var__n}: $val__n;
+        }
+      } @else {
+        #{--$prop__name}__#{$var}: $val;
+      }
+    }
+  }
+}
+
+@mixin divide_children($box-spacing) {
+
+  > *:after {
+    content: "|";
+    margin: 0 $box-spacing;
+  }
+
+  > *:last-child:after {
+    content: none;
+  }
+
+}

atomic/atoms.scss

@@ -0,0 +1,4 @@
+@import "atoms/directives";
+@import "atoms/custom_properties";
+@import "atoms/reset";
+@import "atoms/elements";

atomic/atoms/custom_properties.scss

@@ -0,0 +1,5 @@
+@import "../particles";
+
+:root {
+  @include custom_properties($prop__map);
+}

atomic/atoms/directives.scss

@@ -0,0 +1,4 @@
+@import "directives/font-face/primary";
+@import "directives/font-face/secondary";
+@import "directives/font-face/icon";
+@import "directives/keyframes";

atomic/atoms/directives/font-face/primary.scss

@@ -0,0 +1,15 @@
+@import "particles/mixins/type";
+@import "particles/props/type";
+
+$font_faces: map-get($type, map-get(font, primary));
+
+@each $font in $font_faces {
+
+  @font-face {
+      font-family: '#{$font}';
+      @include type-src($font);
+      font-weight: normal;
+      font-style: normal;
+  }
+
+}

atomic/atoms/directives/font-face/secondary.scss

@@ -0,0 +1,15 @@
+@import "particles/mixins/type";
+@import "particles/props/type";
+
+$font_faces: map-get($type, map-get(font, secondary));
+
+@each $font in $font_faces {
+
+  @font-face {
+      font-family: '#{$font}';
+      @include type-src($font);
+      font-weight: normal;
+      font-style: normal;
+  }
+
+}

atomic/atoms/elements.scss

@@ -0,0 +1,13 @@
+@import "elements/body";
+@import "elements/lists";
+@import "elements/anchor";
+@import "elements/em";
+@import "elements/headlines";
+@import "elements/hr";
+@import "elements/inputs";
+@import "elements/lists";
+@import "elements/media";
+@import "elements/small";
+@import "elements/strong";
+@import "elements/table";
+@import "elements/template";

atomic/atoms/elements/anchor.scss

@@ -0,0 +1,16 @@
+@import "../../particles/props/color";
+
+a,
+[role=link] {
+
+    background-color: $color-white--alpha;
+    -webkit-text-decoration-skip: objects;
+    text-decoration: none;
+    font-size: inherit;
+
+    &:active,
+    &:hover {
+      outline-width: 0;
+      text-decoration: underline;
+    }
+}

atomic/atoms/elements/body.scss

@@ -0,0 +1,11 @@
+
+@import "../../particles/mixins/type";
+@import "../../particles/props/color";
+@import "../config";
+
+body {
+  margin: 0;
+  padding: 0;
+  color: map-get($color, gray--dark);
+  @include type-baseline(map-get($type, map-get(font, body)));
+}

atomic/atoms/elements/headlines.scss

@@ -0,0 +1,31 @@
+@import "../../particles/props/type";
+@import "../../particles/props/color";
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: map-get($type, weight--heavy);
+  color: map-get($color, gray--darker);
+}
+
+// h1 {
+//   font-size: $type-size--h1;
+// }
+//
+// h2 {
+//   font-size: $type-size--h2;
+// }
+//
+// h3 {
+//   font-size: $type-size--h3;
+// }
+//
+// h4 {
+//   font-size: $type-size--h4;
+// }
+//
+// h5 {
+//   font-size: $type-size--h5;
+// }
+//
+// h6 {
+//   font-size: $type-size--h6;
+// }

atomic/atoms/elements/hr.scss

@@ -0,0 +1,5 @@
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}

atomic/atoms/elements/inputs.scss

@@ -0,0 +1,11 @@
+@import "inputs/button";
+@import "inputs/checkbox";
+@import "inputs/fieldset";
+@import "inputs/file";
+@import "inputs/label";
+@import "inputs/legend";
+@import "inputs/number";
+@import "inputs/optgroup";
+@import "inputs/radio";
+@import "inputs/search";
+@import "inputs/textarea";

atomic/atoms/elements/inputs/button.scss

@@ -0,0 +1,39 @@
+@import '../../particles/mixins/box';
+@import '../../particles/props/type';
+@import '../../particles/props/color';
+
+button,
+[role=button],
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button;
+    appearance: button;
+    cursor: pointer;
+    display: block;
+    width: 100%;
+    font-size: map-get($type, size--baseline);
+    line-height: map-get($type, map-get(leading, icon));
+    margin: 0;
+    @include box__border__radius;
+    padding: map-get($box-spacing, spacing--wide);
+    text-align: center;
+
+    @include form__button;
+    @include form__button--disabled;
+
+    &::-moz-focus-inner,
+      [type="button"]::-moz-focus-inner,
+      [type="reset"]::-moz-focus-inner,
+      [type="submit"]::-moz-focus-inner {
+        border-style: none;
+        padding: 0;
+    }
+
+    &:-moz-focusring,
+      [type="button"]:-moz-focusring,
+      [type="reset"]:-moz-focusring,
+      [type="submit"]:-moz-focusring {
+        outline: 1px dotted ButtonText;
+    }
+}

atomic/atoms/elements/inputs/checkbox.scss

@@ -0,0 +1,19 @@
+@import "../../particles/props/color";
+@import "../../particles/props/box";
+@import "../../particles/mixins/box";
+@import "../../particles/props/icon";
+
+input[type=checkbox],
+[role=checkbox] {
+
+  padding: 0;
+  margin: map-get($box, space--thinner);
+  text-align: center;
+  @include box__border;
+
+  &:checked {map-get(
+    content: map-get($)icon, input--checkbox);
+    color: map-get($color, action--success);
+  }
+
+}

atomic/atoms/elements/inputs/fieldset.scss

@@ -0,0 +1,8 @@
+@import "../../particles/props/box";
+@import "../../particles/mixins/box";
+
+fieldset {
+  @include box__border;
+  margin: 0 map-get($box, spacing--thinner);
+  padding: 0.35em 0.625em 0.75em;
+}

atomic/atoms/elements/inputs/file.scss

@@ -0,0 +1,8 @@
+input[type=file] {
+
+    ::-webkit-file-upload-button {
+      -webkit-appearance: button;
+      font: inherit;
+    }
+
+}

atomic/atoms/elements/inputs/label.scss

@@ -0,0 +1,8 @@
+@import "../../particles/props/type";
+@import "../../particles/props/box";
+
+label {
+  display: inline-block;
+  font-size: map-get($type, size--baseline);
+  margin-right: map-get($box, space);
+}

atomic/atoms/elements/inputs/legend.scss

@@ -0,0 +1,8 @@
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}

atomic/atoms/elements/inputs/number.scss

@@ -0,0 +1,8 @@
+input[type="number"] {
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      height: auto;
+    }
+
+}

atomic/atoms/elements/inputs/optgroup.scss

@@ -0,0 +1,3 @@
+optgroup {
+  font-weight: bold;
+}

atomic/atoms/elements/inputs/radio.scss

@@ -0,0 +1,24 @@
+input[type=radio],
+[role=radio] {
+
+  border-radius: 50%;
+  cursor: pointer;
+  display:  flex;
+  min-width: 1.5em;
+  min-height: 1.5em;
+  margin: 0 1em 0 0;
+  justify-content:  center;
+  align-items: center;
+
+  &:checked::after {
+     display: block;
+     background-color: #3777bc;
+     border-radius: 50%;
+     content: "";
+     position: relative;
+     left: .025em;
+     min-width: .75em;
+     min-height: .75em;
+  }
+
+}

atomic/atoms/elements/inputs/search.scss

@@ -0,0 +1,12 @@
+input[type=search],
+[role=search] {
+
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+
+}

atomic/atoms/elements/inputs/textarea.scss

@@ -0,0 +1,3 @@
+textarea {
+  overflow: auto;
+}

atomic/atoms/elements/lists.scss

@@ -0,0 +1,2 @@
+@import "lists/unordered";
+@import "lists/listitems";

atomic/atoms/elements/lists/listitems.scss

@@ -0,0 +1,3 @@
+li {
+  list-style: none;
+}

atomic/atoms/elements/lists/unordered.scss

@@ -0,0 +1,4 @@
+ul {
+  list-style: none;
+  width: 100%;
+}

atomic/atoms/elements/media.scss

@@ -0,0 +1,4 @@
+@import "media/audio";
+@import "media/svg";
+@import "media/image";
+@import "media/picture";

atomic/atoms/elements/media/audio.scss

@@ -0,0 +1,6 @@
+audio { 
+  &:not([controls]) {
+    display: none;
+    height: 0;
+  }
+}