gent_styleguide 6.0.0-alpha2 → 6.0.0-alpha21

package/build/styleguide/sass/21-atoms/fieldset/_fieldset.scss

@@ -1,15 +1,14 @@
 .fieldset-wrapper fieldset,
 fieldset  {
-  @include theme('border-color', 'color-tertiary--lighten-2', 'fieldset-border-color');
+  @include theme('border-color', 'color-primary', 'fieldset-border-color');
 
   max-width: 41rem;
   margin-bottom: 1.2rem;
   padding: .8rem .8rem .4rem;
-  border: 1px solid;
-  border-radius: border-radius("radius-1");
+  border: 2px solid;
 
   @include tablet {
-    padding: .8rem 1.2rem .4rem;
+    padding: .8rem 1.5rem .4rem;
   }
 
   .form-item {
@@ -17,11 +16,13 @@ fieldset  {
   }
 
   legend {
-    @include bold-text;
+    @include semi-bold-text;
+    @include medium-text;
+    @include theme('color', 'color-none', 'fieldset-legend-color');
+    @include theme('background-color', 'color-primary', 'fieldset-legend-background-color');
 
-    padding: 0 .4rem;
-    font-size: .8rem;
-    line-height: 2;
+    margin-bottom: .2rem;
+    padding: .1rem .5rem;
 
     + .field-message,
     + .form-item > .field-message:first-child {
@@ -31,8 +32,12 @@ fieldset  {
   }
 
   fieldset {
+    @include theme('border-color', 'color-zero', 'inner-fieldset-border-color');
+    border: 1px dashed;
+
     legend {
-      margin-left: 1.8rem;
+      @include theme('color', 'color-zero', 'inner-fieldset-legend-color');
+      @include theme('background-color', 'color-none', 'inner-fieldset-legend-background-color');
       padding: 0 .4rem;
     }
   }

package/build/styleguide/sass/21-atoms/figcaption/_figcaption.scss

@@ -1,7 +1,11 @@
+$accolade-width: 2.25rem;
+$accolade-height: .9rem;
+
 figcaption {
-  @include theme('color', 'color-tertiary--lighten-1', 'figcaption-color');
+  @include accolade();
+  @include medium-text;
+  @include normal-text;
 
-  margin: .4rem 0;
-  font-size: .6rem;
-  text-align: right;
+  margin: -.8rem 1rem 0 0;
+  float: right;
 }

package/build/styleguide/sass/21-atoms/file/_file.scss

@@ -3,33 +3,34 @@
   position: relative;
   flex-wrap: wrap;
   align-items: center;
-  max-width: 100%;
-  margin: 0 -.6rem;
-  margin-top: .2rem;
+  margin: .25rem 0 0;
 
   .file__button {
+    @extend %button-secondary;
     @include button;
     @include button-small;
-    @include theme('background-color', 'color-secondary', 'button-secondary-background');
-    @include theme('color', 'color-primary', 'button-secondary-color');
-    @include theme('border-color', 'color-primary--lighten-1', 'button-secondary-border-color');
+    @include button-hover;
 
     max-width: 100%;
-    margin: 0 .6rem;
-    padding-top: .6rem;
-    padding-bottom: .6rem;
+    margin: 0 .75rem 0 0;
+    padding: .4rem .75rem;
     content: attr(data-text);
   }
 
   &::after {
+    @include theme('color', 'default-text-color', 'no-file-selected-text-color');
+
     max-width: 100%;
-    margin: .6rem;
-    color: color('dark-gray', -1);
+    margin: .5rem .5rem 0;
     font-size: .7rem;
     font-style: italic;
     text-overflow: ellipsis;
     content: attr(data-file);
     overflow: hidden;
+
+    @include phablet {
+      margin: 0;
+    }
   }
 
   input[type="file"] {
@@ -38,6 +39,7 @@
     left: 0;
     width: 100%;
     height: 100%;
+    line-height: 1.4rem;
     cursor: pointer;
     opacity: 0;
 
@@ -52,16 +54,14 @@
     &:hover + .file__button,
     &:focus + .file__button,
     &:focus-within + .file__button {
-      @include theme('background-color', 'color-primary--lighten-5', 'button-secondary-hover-background');
-      @include theme('color', 'color-primary', 'button-secondary-hover-color');
-      @include theme('border-color', 'color-primary--lighten-2', 'button-secondary-hover-border-color');
+      @include theme('color', 'color-quaternary', 'button-secondary-hover-color');
+      background-size: 100% 100%;
     }
 
     &:active + .file__button {
-      @include theme('background-color', 'color-primary--lighten-3', 'button-secondary-focus-background');
-      @include theme('color', 'color-primary--darken-3', 'button-secondary-focus-color');
-      @include theme('border-color', 'color-primary', 'button-secondary-focus-border-color');
-
+      @include theme('background-color', 'color-tertiary-pastel', 'button-secondary-active-background');
+      @include theme('color', 'color-primary', 'button-secondary-active-color');
+      background-image: none;
       box-shadow: none;
     }
 
@@ -71,9 +71,10 @@
   }
 
   +.help-text {
-    @include theme('color', 'color-tertiary--lighten-1', 'file-size-color');
+    @include theme('color', 'help-text-color', 'help-text-color');
     display: block;
-    margin-top: .4rem;
-    font-size: .6rem;
+    margin-top: .5rem;
+    font-size: .7rem;
+    line-height: 1.2rem;
   }
 }

package/build/styleguide/sass/21-atoms/form-label/_form-label.scss

@@ -0,0 +1,19 @@
+label {
+  @include theme('color', 'color-primary', 'label-color');
+  @include semi-bold-text;
+
+  .label-optional {
+    @include theme('color', 'color-zero', 'label-optional-color');
+    @include theme('background-color', 'color-secondary', 'label-optional-background');
+    @include normal-text;
+
+    padding: 0 .2rem;
+    float: right;
+    font-size: .6rem;
+  }
+
+  display: block;
+  margin: 0 0 .4rem;
+  font-size: .8rem;
+  line-height: 1.4rem;
+}

package/build/styleguide/sass/21-atoms/heading/_heading.scss

@@ -15,7 +15,6 @@ h5,
 %h5 {
   @include bold-text;
 
-  margin: 1.6rem 0;
   font-style: normal;
 
   button {
@@ -34,3 +33,27 @@ h5,
     }
   }
 }
+
+h1,
+.h1,
+%h1 {
+  margin: 0 0 1.25rem;
+}
+
+h2,
+.h2,
+%h2 {
+  margin: 0 0 .75rem;
+}
+
+h3,
+.h3,
+%h3,
+h4,
+.h4,
+%h4,
+h5,
+.h5,
+%h5 {
+  margin: 0 0 .5rem;
+}

package/build/styleguide/sass/21-atoms/heading/css/_background-title.scss

@@ -3,19 +3,40 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  &[class^="bg-"] {
+    span {
+      padding: .125rem .5rem;
+      box-decoration-break: clone;
+    }
+  }
+
   &.bg-primary {
     span {
-      padding: 0 .75rem;
-      background-color: color('blue');
-      color: color('white');
+      @include theme('color', 'color-none', 'heading-with-bg-color');
+      @include theme('background-color', 'color-primary', 'heading-with-bg-background-color');
     }
   }
 
   &.bg-none {
     span {
-      padding: 0 .75rem;
-      background-color: color('white');
+      @include theme('color', 'color-zero', 'heading-with-white-bg-color');
+      @include theme('background-color', 'color-none', 'heading-with-white-bg-background-color');
+    }
+  }
+}
+
+h1,
+.h1 {
+  &[class^="bg-"] {
+    span {
+      padding: .15rem .75rem;
     }
   }
 }

package/build/styleguide/sass/21-atoms/heading/css/_heading-1.scss

@@ -11,4 +11,8 @@ h1,
     font-size: 2.5rem;
     line-height: 3.25rem;
   }
+
+  .dark-background & {
+    @include theme('color', 'color-none', 'heading-1-color-inverse');
+  }
 }

package/build/styleguide/sass/21-atoms/heading/css/_heading-2.scss

@@ -1,13 +1,17 @@
 h2,
 .h2,
 %h2 {
-  @include theme('color', 'color-zero', 'heading-2-color');
+  @include theme('color', 'color-primary', 'heading-2-color');
 
   font-size: 1.6rem;
-  line-height: 2.6rem;
+  line-height: 2.1rem;
 
   @include tablet {
     font-size: 2rem;
-    line-height: 2.1rem;
+    line-height: 2.6rem;
+  }
+
+  .dark-background & {
+    @include theme('color', 'color-none', 'heading-2-color-inverse');
   }
 }

package/build/styleguide/sass/21-atoms/heading/css/_heading-3.scss

@@ -10,4 +10,8 @@ h3,
     font-size: 1.5rem;
     line-height: 1.95rem;
   }
+
+  .dark-background & {
+    @include theme('color', 'color-none', 'heading-3-color-inverse');
+  }
 }

package/build/styleguide/sass/21-atoms/heading/css/_heading-4.scss

@@ -6,9 +6,13 @@ h4,
 
   font-size: .9rem;
   line-height: 1.15rem;
-  
+
   @include tablet {
     font-size: 1rem;
     line-height: 1.3rem;
   }
+
+  .dark-background & {
+    @include theme('color', 'color-none', 'heading-4-color-inverse');
+  }
 }

package/build/styleguide/sass/21-atoms/image/_image.scss

@@ -11,7 +11,7 @@ figure {
 }
 
 .image-wrapper {
-  @include theme('background-color', 'color-primary--lighten-5', 'form-step--active-border-color');
+  @include theme('background-color', 'color-tertiary--lighten-5', 'image-placeholder-background-color');
 
   position: relative;
   padding-bottom: calc(100% / 8 * 5); // Default ratio 8:5
@@ -19,8 +19,8 @@ figure {
 
   &:empty {
     &::before {
-      @include spot-image('camera-light', auto);
       @include theme('color', 'color-primary', 'image-spot-shadow');
+      $image-icon-svg: svg-icon('image', color('cyan'), 70, 70);
 
       position: absolute;
       top: 0;
@@ -30,9 +30,8 @@ figure {
       max-width: 3rem;
       max-height: 3rem;
       margin: auto;
-      border-radius: 50%;
+      background-image: svg-url($image-icon-svg);
       background-size: contain;
-      box-shadow: 0 10px 35px -25px;
       content: "";
 
       @include tablet {
@@ -56,7 +55,7 @@ figure {
     min-height: 100%;
 
     &::before {
-      @include theme('background-color', 'color-primary--lighten-5', 'form-step--active-border-color');
+      @include theme('background-color', 'color-zero--lighten-5', 'broken-image-background-color');
 
       display: block;
       position: absolute;
@@ -78,7 +77,7 @@ figure {
       transform: translate(-50%, -50%);
       background: url('#{$styleguide-dir}/img/iconfont/broken-link.svg') no-repeat top center;
       background-size: 1.2rem auto;
-      color: color('dark-gray', -1);
+      color: color('gray', -1);
       font-size: .6rem;
       line-height: 1rem;
       text-align: center;

package/build/styleguide/sass/21-atoms/input/_input.scss

@@ -15,25 +15,39 @@ input[type="password"] {
     &,
     &:focus {
       padding-right: $field-icon-padding;
-      background-image: svg-as-background('lock-closed', color('dark-gray'), 30, 26);
+      background-image: svg-as-background('lock-closed', color('gray'), 24, 24);
       background-repeat: no-repeat;
       background-position: right .75rem center;
 
       &:disabled {
-        background-image: svg-as-background('lock-closed', color('dark-gray', -2), 30, 26);
+        background-image: svg-as-background('lock-closed', color('gray', -2), 24, 24);
       }
     }
   }
 }
 
-// Fixes vertical alignment on mobile safari.
 input[type=date] {
+  padding-right: 0;
+  // Fixes vertical alignment on mobile safari.
   line-height: 2.4rem;
-}
 
-input[type=date]::-webkit-inner-spin-button { // sass-lint:disable-line no-vendor-prefixes
-  margin-left: .5rem;
-  -webkit-appearance: none;  // sass-lint:disable-line no-vendor-prefixes
+  &::-webkit-calendar-picker-indicator { // sass-lint:disable-line no-vendor-prefixes
+    @include theme('background-color', 'button-secondary-background');
+    width: 1.2rem;
+    height: 1.2rem;
+    padding: .5rem;
+    background-image: svg-as-background('calendar', color('gray'), 30, 30);
+
+    &:hover {
+      @include theme('background-color', 'button-secondary-hover-background');
+      cursor: pointer;
+    }
+  }
+
+  &::-webkit-inner-spin-button { // sass-lint:disable-line no-vendor-prefixes
+    margin-left: .5rem;
+    -webkit-appearance: none;  // sass-lint:disable-line no-vendor-prefixes
+  }
 }
 
 .radio {
@@ -42,15 +56,15 @@ input[type=date]::-webkit-inner-spin-button { // sass-lint:disable-line no-vendo
   &:hover {
     // Unchecked and hovered.
     label::before {
-      @include theme('background-color', 'color-tertiary--lighten-4', 'radio-background-color-hover');
-      @include theme('border-color', 'color-tertiary--lighten-1', 'radio-border-color-hover');
+      @include theme('background-color', 'color-zero--lighten-5', 'radio-background-color-hover');
+      @include theme('border-color', 'color-zero--lighten-2', 'radio-border-color-hover');
     }
 
     // Checked and hovered.
     input[type="radio"]:checked + label::before {
-      @include theme('background-color', 'color-tertiary--lighten-3', 'radio-background-color-hover-and-checked');
-      @include theme('border-color', 'color-tertiary--darken-3', 'radio-border-color-hover-and-checked');
-      @include theme('color', 'color-tertiary--darken-3', 'radio-color-hover-and-checked');
+      @include theme('background-color', 'color-zero--lighten-5', 'radio-background-color-hover-and-checked');
+      @include theme('border-color', 'color-primary', 'radio-border-color-hover-and-checked');
+      @include theme('color', 'color-primary', 'radio-color-hover-and-checked');
     }
   }
 
@@ -66,15 +80,14 @@ input[type=date]::-webkit-inner-spin-button { // sass-lint:disable-line no-vendo
   &:hover {
     // Unchecked and hovered.
     label::before {
-      @include theme('background-color', 'color-tertiary--lighten-4', 'checkbox-background-color-hover');
-      @include theme('border-color', 'color-tertiary--lighten-1', 'checkbox-border-color-hover');
+      @include theme('background-color', 'color-zero--lighten-5', 'checkbox-background-color-hover');
     }
 
     // Checked and hovered.
     input[type="checkbox"]:checked + label::before {
-      @include theme('background-color', 'color-tertiary--lighten-3', 'checkbox-background-color-hover-and-checked');
-      @include theme('border-color', 'color-tertiary--darken-2', 'checkbox-border-color-hover-and-checked');
-      @include theme('color', 'color-tertiary--darken-3', 'checkbox-color-hover-and-checked');
+      @include theme('background-color', 'color-zero--lighten-5', 'checkbox-background-color-hover-and-checked');
+      @include theme('border-color', 'color-primary', 'checkbox-border-color-hover-and-checked');
+      @include theme('color', 'color-zero', 'checkbox-color-hover-and-checked');
     }
   }
 

package/build/styleguide/sass/21-atoms/label/_label.scss

@@ -1,20 +1,39 @@
-label {
-  @include theme('color', 'color-tertiary', 'label-color');
-  @include bold-text;
+.label {
+  @include theme('background-color', 'color-none', 'label-background-color');
+  @include small-text();
 
-  .label-optional {
-    @include theme('color', 'color-primary--darken-2', 'label-optional-color');
-    @include theme('background-color', 'color-primary--lighten-5', 'label-optional-background');
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid color('gray');
+  text-decoration: none;
 
-    padding: 0 .2rem;
-    float: right;
-    border-top-left-radius: border-radius('radius-1');
-    border-top-right-radius: border-radius('radius-1');
-    font-size: .6rem;
+  &.success {
+    @include theme('color', 'color-success', 'label-color-success');
+    @include theme('border-color', 'color-success', 'label-color-success');
+    @include theme('background-color', 'color-success-light', 'label-background-color-success');
   }
 
-  display: block;
-  //margin: 0 0 .4rem;
-  font-size: .8rem;
-  line-height: 1.2rem;
+  &.warning {
+    @include theme('color', 'color-warning', 'label-color-warning');
+    @include theme('border-color', 'color-warning', 'label-color-warning');
+    @include theme('background-color', 'color-warning-light', 'label-background-color-warning');
+  }
+
+  &.error {
+    @include theme('color', 'color-error', 'label-color-error');
+    @include theme('border-color', 'color-error', 'label-color-error');
+    @include theme('background-color', 'color-error-light', 'label-background-color-error');
+  }
+
+  i {
+    margin-right: 5px;
+    font-size: .8rem;
+
+    &::before {
+      font-size: .8rem;
+    }
+  }
 }