adding

dist/fonts/stylesheet.css

@@ -1,24 +1 @@
-@font-face {
+@font-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono.eot');src:url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono.woff2') format('woff2'),url('IBMPlexMono.woff') format('woff'),url('IBMPlexMono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono-Bold.eot');src:url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono-Bold.woff2') format('woff2'),url('IBMPlexMono-Bold.woff') format('woff'),url('IBMPlexMono-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
-    font-family: 'IBM Plex Mono';
-    src: url('IBMPlexMono.eot');
-    src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),
-        url('IBMPlexMono.woff2') format('woff2'),
-        url('IBMPlexMono.woff') format('woff'),
-        url('IBMPlexMono.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'IBM Plex Mono';
-    src: url('IBMPlexMono-Bold.eot');
-    src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
-        url('IBMPlexMono-Bold.woff2') format('woff2'),
-        url('IBMPlexMono-Bold.woff') format('woff'),
-        url('IBMPlexMono-Bold.ttf') format('truetype');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-

spritemap.js

@@ -1,13 +1 @@
-(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{
+(self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]);
-
-/***/ "?4e0c":
-/*!******************************!*\
-  !*** spritemap-dummy-module ***!
-  \******************************/
-/***/ (() => {
-
-
-
-/***/ })
-
-}]);

src/scss/_core.scss

@@ -10,5 +10,4 @@
 
 @import
     'core/normalize',
-    'core/heading',
+    'core/heading';
-    'core/content';

src/scss/components/_bar.scss

@@ -1,5 +1,12 @@
 /**
- *
+ *  <div class="bar">
+ *      <div class="bar__start">
+ *      </div>
+ *      <div class="bar__main">
+ *      </div>
+ *      <div class="bar__end">
+ *      </div>
+ *  </div>
  *
  *
  *

src/scss/components/_content.scss

@@ -1,22 +1,125 @@
 /**
+ *  Heading
  *
  *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
 
-@mixin component__content()
+.content {
-{
-    .content {
-        font-size: 1rem;
 
-        a {
+    // paragraphs
-            text-decoration: underline;
+    p {
-        }
+        margin: $plain-ui__margin;
+        //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
+    }
+
+    // Semantic text elements
+    a,
+    ins,
+    u {
+        text-decoration-skip: ink edges;
+    }
+
+    // Add the correct font weight in Chrome, Edge, and Safari.
+    b,
+    strong {
+        font-weight: bolder;
+    }
+
+    // Add the correct font size in all browsers.
+    small {
+        font-size: 80%;
+    }
+
+    /**
+     *  Prevent `sub` and `sup` elements from affecting the line height in
+     *  all browsers.
+     */
+    sub,
+    sup {
+        font-size: 70%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sub {
+        bottom: -0.25em;
+    }
+
+    sup {
+        top: -0.5em;
+    }
+
+    abbr[title] {
+        border-bottom: 1px dotted;
+        cursor: help;
+        text-decoration: none;
+    }
+
+    mark {
+        padding: 0.25em;
+    }
 
-        ul {
+    /**
-            li {
+     *  blockquote
+     *
+     *
+     */
+    blockquote {
+        border-left: $plain-ui__border;
+        margin-left: 0;
+        padding: $plain-ui__padding;
 
-            }
+        p:last-child {
+            margin-bottom: 0;
         }
     }
+
+    /**
+     *  lists
+     *
+     */
+    dl,
+    ol,
+    ul {
+        padding: 0;
+        margin: $plain-ui__margin;
+        //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
+    }
+
+    ol,
+    ul {
+        margin-left: 1.5em;
+    }
+
+    ol ol,
+    ul ul {
+        margin-top: 0;
+        margin-left: 1em;
+    }
+
+    ol {
+        list-style: decimal outside;
+    }
+
+    ul {
+        list-style: disc outside;
+    }
+
+    dl {
+        margin-left: 0.5em;
+    }
+
+    dd,
+    dt {
+        margin: 0;
+    }
+
+    dt {
+        font-weight: bold;
+    }
 }

src/scss/components/_field.scss

@@ -5,145 +5,145 @@
  *
  */
 
-@mixin plain-ui__component__field()
+.field-group {
-{
+    margin: $plain-ui__margin;
-    // group, container for fields
-    .field-group {
-        margin-bottom: 1.2em;
-
-        &--valid {
-            input.field-text, textarea.field-text {
-                border-color: $plain-ui__success-light;
-            }
-
-            .icon {
-                fill: $plain-ui__success-light;
-            }
-        }
 
-        &--error {
+    &--valid {
-            input.field-text, textarea.field-text {
+        input.field-text, textarea.field-text {
-                border-color: $plain-ui__danger-light;
+            border-color: var(--success);
-            }
+        }
 
-            .icon {
+        .icon {
-                fill: $plain-ui__danger-light;
+            fill: var(--success);
-            }
         }
     }
 
-    .field-label {
+    &--error {
-        font-size: 1rem;
+        input.field-text, textarea.field-text {
-        font-family: $plain-ui__font-family;
+            border-color: var(--danger);
-
-        .icon {
-            vertical-align: text-bottom;
         }
 
-        &:hover {
+        .icon {
-            cursor: pointer;
+            fill: var(--danger);
         }
     }
+}
 
-    input.field-text, textarea.field-text, select.field-choice {
+.field-label {
-        font-family: $plain-ui__font-family;
+    font-size: 1rem;
-        font-size: 0.95rem;
+    font-family: $plain-ui__font-family;
 
-        width: 100%;
+    .icon {
+        vertical-align: text-bottom;
+    }
 
-        border: 1px solid lighten($plain-ui__primary-light, 40%);
+    &:hover {
-        background-color: white;
+        cursor: pointer;
-        border-radius: 2px;
+    }
+}
 
-        margin: 0.7em 0 0;
+input.field-text, textarea.field-text, select.field-choice {
+    font-family: $plain-ui__font-family;
+    font-size: 0.95rem;
 
-        &:focus, &:active {
+    width: 100%;
-            outline: 0;
-            border-color: $plain-ui__primary-light;
-        }
-    }
 
-    input.field-text, textarea.field-text {
+    border: 1px solid var(--primary-active);
-        padding: 0.8em 1.1em;
+    background-color: var(--white);
-    }
+    border-radius: $plain-ui__border-radius;
 
-    /**
+    margin: 0.7rem 0 0;
-     *
+
-     *
+    &:focus, &:active {
-     */
+        outline: 0;
-
+        border-color: var(--primary);
-    select.field-choice {
-        appearance: none;
-        padding: 0.8em;
-        position: relative;
-
-        &::after {
-            position: absolute;
-            right: 0;
-            top: 0;
-            display: block;
-            content: " ";
-            width: 10px;
-            height: 10px;
-            background: red;
-        }
     }
+}
 
-    /**
+input.field-text, textarea.field-text {
-     * radio & checkbox
+    padding: 0.8em 1.1em;
-     *
+}
-     * <div class="field">
-     *     <label for="field__checkbox__1" class="field__label">
-     *         <input class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
-     *         <svg class="icon field__choice__unchecked" aria-hidden="true">
-     *             <use xlink:href="symbol-defs.svg#icon-minus"></use>
-     *         </svg>
-     *         <svg class="icon field__choice__checked" aria-hidden="true">
-     *             <use xlink:href="symbol-defs.svg#icon-checked"></use>
-     *         </svg>
-     *         checkbox 1
-     *    </label>
-     * </div>
-     *
-     */
-
-    input[type=checkbox].field-choice,
-    input[type=radio].field-choice {
-        position: relative;
-        display: none;
 
-        ~ .field-choice__checked {
-            display: none;
-        }
 
-        &:checked ~ .field-choice__checked {
+/**
-            display: inline-block;
+ * field-choice
-        }
+ *
+ *
+ */
 
-        &:checked ~ .field-choice__unchecked {
+select.field-choice {
-            display: none;
+    appearance: none;
-        }
+    padding: 0.8em;
+    position: relative;
+
+    &::after {
+        position: absolute;
+        right: 0;
+        top: 0;
+        display: block;
+        content: " ";
+        width: 10px;
+        height: 10px;
+        background: red;
     }
+}
 
-    svg.field-choice__unchecked {
+/**
-        fill: lighten($plain-ui__primary-light, 40%);
+ * radio & checkbox
-    }
+ *
+ * <div class="field">
+ *     <label for="field__checkbox__1" class="field__label">
+ *         <input class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
+ *         <svg class="icon field__choice__unchecked" aria-hidden="true">
+ *             <use xlink:href="symbol-defs.svg#icon-minus"></use>
+ *         </svg>
+ *         <svg class="icon field__choice__checked" aria-hidden="true">
+ *             <use xlink:href="symbol-defs.svg#icon-checked"></use>
+ *         </svg>
+ *         checkbox 1
+ *    </label>
+ * </div>
+ *
+ */
+
+input[type=checkbox].field-choice,
+input[type=radio].field-choice {
+    position: relative;
+    display: none;
 
-    svg.field-choice__checked {
+    ~ .field-choice__checked {
-        fill: $plain-ui__success-light;
+        display: none;
     }
 
-    //
+    &:checked ~ .field-choice__checked {
-    .field-help, .field-error {
         display: inline-block;
-        width: 100%;
-
-        padding: 0.6em 0.5em;
-        font-size: 0.8rem;
     }
 
-    // display error for fields
+    &:checked ~ .field-choice__unchecked {
-    .field-error {
+        display: none;
-        color: $plain-ui__danger-light;
     }
 }
+
+svg.field-choice__unchecked {
+    fill: var(--primary-active);
+}
+
+svg.field-choice__checked {
+    fill: var(--success);
+}
+
+.field-help, .field-error {
+    display: inline-block;
+    width: 100%;
+
+    padding: 0.6em 0.5em;
+    font-size: 0.8rem;
+}
+
+/**
+ * display error for fields
+ *
+ */
+.field-error {
+    color: var(--danger);
+}

src/scss/core/_content.scss

@@ -1,125 +0,0 @@
-/**
- *  Heading
- *
- *
- *  @author Björn Hase, Tentakelfabrik
- *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://github.com/tentakelfabrik/crispy-css
- *
- */
-
-.content {
-
-    // paragraphs
-    p {
-        margin: $plain-ui__margin;
-        //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
-    }
-
-    // Semantic text elements
-    a,
-    ins,
-    u {
-        text-decoration-skip: ink edges;
-    }
-
-    // Add the correct font weight in Chrome, Edge, and Safari.
-    b,
-    strong {
-        font-weight: bolder;
-    }
-
-    // Add the correct font size in all browsers.
-    small {
-        font-size: 80%;
-    }
-
-    /**
-     *  Prevent `sub` and `sup` elements from affecting the line height in
-     *  all browsers.
-     */
-    sub,
-    sup {
-        font-size: 70%;
-        line-height: 0;
-        position: relative;
-        vertical-align: baseline;
-    }
-
-    sub {
-        bottom: -0.25em;
-    }
-
-    sup {
-        top: -0.5em;
-    }
-
-    abbr[title] {
-        border-bottom: 1px dotted;
-        cursor: help;
-        text-decoration: none;
-    }
-
-    mark {
-        padding: 0.25em;
-    }
-
-    /**
-     *  blockquote
-     *
-     *
-     */
-    blockquote {
-        border-left: $plain-ui__border;
-        margin-left: 0;
-        padding: $plain-ui__padding;
-
-        p:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    /**
-     *  lists
-     *
-     */
-    dl,
-    ol,
-    ul {
-        padding: 0;
-        margin: $plain-ui__margin;
-        //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
-    }
-
-    ol,
-    ul {
-        margin-left: 1.5em;
-    }
-
-    ol ol,
-    ul ul {
-        margin-top: 0;
-        margin-left: 1em;
-    }
-
-    ol {
-        list-style: decimal outside;
-    }
-
-    ul {
-        list-style: disc outside;
-    }
-
-    dl {
-        margin-left: 0.5em;
-    }
-
-    dd,
-    dt {
-        margin: 0;
-    }
-
-    dt {
-        font-weight: bold;
-    }
-}

src/scss/plain-ui.scss

@@ -9,6 +9,7 @@
     'core',
 
     'components/badge',
+    'components/content',
     'components/button',
     'components/field',
     'components/icon',
@@ -31,7 +32,6 @@
 
 @include plain-ui__helpers__core();
 
-@include plain-ui__component__field();
 @include plain-ui__component__panel();
 @include plain-ui__component__media();
 @include plain-ui__component__table();