adding

dist/fonts/stylesheet.css

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

dist/plain-ui.css

@@ -1,16 +1,16 @@
 @charset "UTF-8";
 @font-face {
   font-family: "IBM Plex Mono";
-  src: url("IBMPlexMono.eot");
+  src: url("fonts/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");
+  src: url("fonts/IBMPlexMono.eot?#iefix") format("embedded-opentype"), url("fonts/IBMPlexMono.woff2") format("woff2"), url("fonts/IBMPlexMono.woff") format("woff"), url("fonts/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("fonts/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");
+  src: url("fonts/IBMPlexMono-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/IBMPlexMono-Bold.woff2") format("woff2"), url("fonts/IBMPlexMono-Bold.woff") format("woff"), url("fonts/IBMPlexMono-Bold.ttf") format("truetype");
   font-weight: bold;
   font-style: normal;
   font-display: swap;
@@ -1614,23 +1614,27 @@
  *
  */
 :root {
+  --body: #f9f9f9;
+  --text: #363636;
+  --text-contrast: #ffffff;
   --primary: #3e3e3e;
-  --primary-active: #717171;
+  --primary-contrast: #3e3e3e;
-  --primary-active-secondary: #ffffff;
+  --active: #717171;
-  --link: #3e3e3e;
+  --active-contrast: #ffffff;
+  --link: #363636;
   --link-hover: #d95959;
   --danger: #d95959;
-  --danger-light: #d95959;
+  --danger-contrast: #ecacac;
+  --info: #0090d4;
+  --info-constrast: #ecacac;
   --success: #64ac64;
-  --white: #ffffff;
+  --success-contrast: #a6d0a6;
-  --black: #212121;
+  --warning: #f0ad4e;
-  --text: #363636;
+  --warning-contrast: #f8d9ac;
-  --text-secondary: #ffffff;
+  --background: #f9f9f9;
-  --background: #3e3e3e;
+  --background-contrast: #ffffff;
-  --background-secondary: #ffffff;
-  --body: #f9f9f9;
   --border: #3e3e3e;
-  --border-secondary: #ffffff;
+  --border-contrast: #ffffff;
 }
 
 /**
@@ -1960,7 +1964,7 @@ samp {
   overflow-x: auto;
   border: 1px solid var(--primary);
   border-radius: 2px;
-  background-color: var(--background-secondary);
+  background-color: var(--background-contrast);
   margin: 0 0 1rem;
   padding: 0.6rem 0.8rem;
 }
@@ -1978,7 +1982,7 @@ samp {
 .highlight {
   padding: 0.15rem 0.4rem 0.25rem;
   background: var(--primary);
-  color: var(--text-secondary);
+  color: var(--text-contrast);
   border-radius: 2px;
 }
 
@@ -2088,7 +2092,7 @@ h6, .h6 {
 .badge {
   display: inline-block;
   background-color: var(--background);
-  color: var(--text-secondary);
+  color: var(--text-contrast);
   font-size: 0.85rem;
   padding: 0.4rem 0.8rem;
   border: 1px solid var(--primary);
@@ -2407,7 +2411,7 @@ svg.field-choice__checked {
 .tabs__item:hover {
   cursor: pointer;
   background-color: var(--primary-active);
-  color: var(--text-secondary);
+  color: var(--text-contrast);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 }
@@ -2415,19 +2419,19 @@ svg.field-choice__checked {
   color: var(--text);
   border-color: var(--border);
 }
-.tabs--secondary {
+.tabs--contrast {
   border: 0;
 }
-.tabs--secondary .tabs__item {
+.tabs--contrast .tabs__item {
-  color: var(--text-secondary);
+  color: var(--text-contrast);
 }
-.tabs--secondary .tabs__item:hover {
+.tabs--contrast .tabs__item:hover {
-  background-color: var(--primary-active-secondary);
+  background-color: var(--primary-active-contrast);
   color: var(--text);
   border-radius: 0;
 }
-.tabs--secondary .tabs__item--selected {
+.tabs--contrast .tabs__item--selected {
-  border-color: var(--border-secondary);
+  border-color: var(--border-contrast);
 }
 
 /**
@@ -2438,7 +2442,7 @@ svg.field-choice__checked {
 .panel {
   border: 1px solid var(--border);
   border-radius: 2px;
-  background-color: var(--background-secondary);
+  background-color: var(--background-contrast);
 }
 .panel__body {
   padding: 0.6rem 0.8rem;
@@ -2475,7 +2479,7 @@ svg.field-choice__checked {
   background: var(--background);
   line-height: 1.618;
   margin: 0;
-  color: var(--text-secondary);
+  color: var(--text-contrast);
 }
 .figure .media {
   border: 0;
@@ -2566,7 +2570,7 @@ svg.field-choice__checked {
   display: flex;
   min-height: 2.8em;
   background-color: var(--primary);
-  color: var(--text-secondary);
+  color: var(--text-contrast);
   border: 1px solid var(--primary);
   border-radius: 2px;
 }
@@ -7382,52 +7386,340 @@ svg.field-choice__checked {
  *
  *
  */
+.color-body {
+  color: var(--body);
+}
+
+.color-text {
+  color: var(--text);
+}
+
+.color-text-contrast {
+  color: var(--text-contrast);
+}
+
 .color-primary {
   color: var(--primary);
 }
 
+.color-primary-contrast {
+  color: var(--primary-contrast);
+}
+
+.color-active {
+  color: var(--active);
+}
+
+.color-active-contrast {
+  color: var(--active-contrast);
+}
+
+.color-link {
+  color: var(--link);
+}
+
+.color-link-hover {
+  color: var(--link-hover);
+}
+
+.color-danger {
+  color: var(--danger);
+}
+
+.color-danger-contrast {
+  color: var(--danger-contrast);
+}
+
+.color-info {
+  color: var(--info);
+}
+
+.color-info-constrast {
+  color: var(--info-constrast);
+}
+
 .color-success {
   color: var(--success);
 }
 
-.color-white {
+.color-success-contrast {
-  color: var(--white);
+  color: var(--success-contrast);
+}
+
+.color-warning {
+  color: var(--warning);
+}
+
+.color-warning-contrast {
+  color: var(--warning-contrast);
+}
+
+.color-background {
+  color: var(--background);
+}
+
+.color-background-contrast {
+  color: var(--background-contrast);
+}
+
+.color-border {
+  color: var(--border);
+}
+
+.color-border-contrast {
+  color: var(--border-contrast);
+}
+
+.fill-body {
+  fill: var(--body);
+}
+
+.fill-text {
+  fill: var(--text);
+}
+
+.fill-text-contrast {
+  fill: var(--text-contrast);
 }
 
 .fill-primary {
   fill: var(--primary);
 }
 
+.fill-primary-contrast {
+  fill: var(--primary-contrast);
+}
+
+.fill-active {
+  fill: var(--active);
+}
+
+.fill-active-contrast {
+  fill: var(--active-contrast);
+}
+
+.fill-link {
+  fill: var(--link);
+}
+
+.fill-link-hover {
+  fill: var(--link-hover);
+}
+
+.fill-danger {
+  fill: var(--danger);
+}
+
+.fill-danger-contrast {
+  fill: var(--danger-contrast);
+}
+
+.fill-info {
+  fill: var(--info);
+}
+
+.fill-info-constrast {
+  fill: var(--info-constrast);
+}
+
 .fill-success {
   fill: var(--success);
 }
 
-.fill-white {
+.fill-success-contrast {
-  fill: var(--white);
+  fill: var(--success-contrast);
+}
+
+.fill-warning {
+  fill: var(--warning);
+}
+
+.fill-warning-contrast {
+  fill: var(--warning-contrast);
+}
+
+.fill-background {
+  fill: var(--background);
+}
+
+.fill-background-contrast {
+  fill: var(--background-contrast);
+}
+
+.fill-border {
+  fill: var(--border);
+}
+
+.fill-border-contrast {
+  fill: var(--border-contrast);
+}
+
+.border-color-body {
+  border-color: var(--body);
+}
+
+.border-color-text {
+  border-color: var(--text);
+}
+
+.border-color-text-contrast {
+  border-color: var(--text-contrast);
 }
 
 .border-color-primary {
   border-color: var(--primary);
 }
 
+.border-color-primary-contrast {
+  border-color: var(--primary-contrast);
+}
+
+.border-color-active {
+  border-color: var(--active);
+}
+
+.border-color-active-contrast {
+  border-color: var(--active-contrast);
+}
+
+.border-color-link {
+  border-color: var(--link);
+}
+
+.border-color-link-hover {
+  border-color: var(--link-hover);
+}
+
+.border-color-danger {
+  border-color: var(--danger);
+}
+
+.border-color-danger-contrast {
+  border-color: var(--danger-contrast);
+}
+
+.border-color-info {
+  border-color: var(--info);
+}
+
+.border-color-info-constrast {
+  border-color: var(--info-constrast);
+}
+
 .border-color-success {
   border-color: var(--success);
 }
 
-.border-color-white {
+.border-color-success-contrast {
-  border-color: var(--white);
+  border-color: var(--success-contrast);
+}
+
+.border-color-warning {
+  border-color: var(--warning);
+}
+
+.border-color-warning-contrast {
+  border-color: var(--warning-contrast);
+}
+
+.border-color-background {
+  border-color: var(--background);
+}
+
+.border-color-background-contrast {
+  border-color: var(--background-contrast);
+}
+
+.border-color-border {
+  border-color: var(--border);
+}
+
+.border-color-border-contrast {
+  border-color: var(--border-contrast);
+}
+
+.background-color-body {
+  background-color: var(--body);
+}
+
+.background-color-text {
+  background-color: var(--text);
+}
+
+.background-color-text-contrast {
+  background-color: var(--text-contrast);
 }
 
 .background-color-primary {
   background-color: var(--primary);
 }
 
+.background-color-primary-contrast {
+  background-color: var(--primary-contrast);
+}
+
+.background-color-active {
+  background-color: var(--active);
+}
+
+.background-color-active-contrast {
+  background-color: var(--active-contrast);
+}
+
+.background-color-link {
+  background-color: var(--link);
+}
+
+.background-color-link-hover {
+  background-color: var(--link-hover);
+}
+
+.background-color-danger {
+  background-color: var(--danger);
+}
+
+.background-color-danger-contrast {
+  background-color: var(--danger-contrast);
+}
+
+.background-color-info {
+  background-color: var(--info);
+}
+
+.background-color-info-constrast {
+  background-color: var(--info-constrast);
+}
+
 .background-color-success {
   background-color: var(--success);
 }
 
-.background-color-white {
+.background-color-success-contrast {
-  background-color: var(--white);
+  background-color: var(--success-contrast);
+}
+
+.background-color-warning {
+  background-color: var(--warning);
+}
+
+.background-color-warning-contrast {
+  background-color: var(--warning-contrast);
+}
+
+.background-color-background {
+  background-color: var(--background);
+}
+
+.background-color-background-contrast {
+  background-color: var(--background-contrast);
+}
+
+.background-color-border {
+  background-color: var(--border);
+}
+
+.background-color-border-contrast {
+  background-color: var(--border-contrast);
 }
 
 /**

src/fonts/stylesheet.css

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

src/scss/_functions.scss

@@ -21,6 +21,16 @@
     @return $value / ($value * 0 + 1);
 }
 
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
 
 /**
  *  get value of key "default" in map

src/scss/_variables.scss

@@ -55,62 +55,83 @@ $plain-ui__line-height__breakpoints: (
  *
  */
 
+$plain-ui__white: #ffffff !default;
+$plain-ui__black: #212121 !default;
+
 $plain-ui__primary: #3e3e3e !default;
-$plain-ui__primary-secondary: #ffffff !default;
+$plain-ui__primary-contrast: $plain-ui__primary !default;
+
+$plain-ui__active: lighten($plain-ui__primary, 20%) !default;
+$plain-ui__active-contrast: #ffffff !default;
+
+$plain-ui__background: #f9f9f9 !default;
+$plain-ui__background-contrast: #ffffff !default;
+
+$plain-ui__body: #f9f9f9 !default;
+$plain-ui__text: #363636 !default;
+$plain-ui__text-contrast: #ffffff !default;
 
-$plain-ui__primary-active: lighten($plain-ui__primary, 20%) !default;
+$plain-ui__border: $plain-ui__primary !default;
-$plain-ui__secondary: #b3b2af !default;
+$plain-ui__border-contrast: #ffffff !default;
 
 $plain-ui__success: #64ac64 !default;
-$plain-ui__success-light: lighten($plain-ui__success, 20%) !default;
+$plain-ui__success-contrast: lighten($plain-ui__success, 20%) !default;
 $plain-ui__warning: #f0ad4e !default;
-$plain-ui__warning-light: lighten($plain-ui__warning, 20%) !default;
+$plain-ui__warning-contrast: lighten($plain-ui__warning, 20%) !default;
 $plain-ui__danger: #d95959 !default;
-$plain-ui__danger-light: lighten($plain-ui__danger, 20%) !default;
+$plain-ui__danger-contrast: lighten($plain-ui__danger, 20%) !default;
 $plain-ui__info: #0090d4 !default;
-$plain-ui__info-light: lighten($plain-ui__info, 20%) !default;
+$plain-ui__info-contrast: lighten($plain-ui__info, 20%) !default;
 
-$plain-ui__body: #f9f9f9 !default;
-$plain-ui__text: #363636 !default;
-$plain-ui__text-secondary: #ffffff !default;
-$plain-ui__background: #f9f9f9 !default;
-$plain-ui__background--secondary: #ffffff !default;
-$plain-ui__border: $plain-ui__primary !default;
-$plain-ui__border-secondary: #ffffff !default;
 $plain-ui__link: $plain-ui__text !default;
 $plain-ui__link-hover: $plain-ui__danger !default;
 
 $plain-ui__colors: (
-    'primary' : --primary,
+    --body,
-    'success' : --success,
+    --text,
-    'white'   : --white
+    --text-contrast,
+    --primary,
+    --primary-contrast,
+    --active,
+    --active-contrast,
+    --link,
+    --link-hover,
+    --danger,
+    --danger-contrast,
+    --info,
+    --info-constrast,
+    --success,
+    --success-contrast,
+    --warning,
+    --warning-contrast,
+    --background,
+    --background-contrast,
+    --border,
+    --border-contrast
 ) !default;
 
 :root {
     --body: #{$plain-ui__body};
     --text: #{$plain-ui__text};
-    --text-secondary: #{$plain-ui__text-secondary};
+    --text-contrast: #{$plain-ui__text-contrast};
     --primary: #{$plain-ui__primary};
-    --primary-secondary: #{$plain-ui__primary-secondary};
+    --primary-contrast: #{$plain-ui__primary-contrast};
     --active: #{$plain-ui__active};
-    --active-secondary: #{$plain-ui__active-secondary};
+    --active-contrast: #{$plain-ui__active-contrast};
     --link: #{$plain-ui__link};
     --link-hover: #{$plain-ui__link-hover};
     --danger: #{$plain-ui__danger};
-    --danger-activ: #{$plain-ui__danger-activ};
+    --danger-contrast: #{$plain-ui__danger-contrast};
-    --danger-secondary: #{$plain-ui__danger-secondary};
+    --info: #{$plain-ui__info};
-    --info: #{$plain-ui__danger};
+    --info-constrast: #{$plain-ui__danger-contrast};
-    --info-activ: #{$plain-ui__danger-activ};
-    --info-secondary: #{$plain-ui__danger-secondary};
     --success: #{$plain-ui__success};
-    --success-activ: #{$plain-ui__success-activ};
+    --success-contrast: #{$plain-ui__success-contrast};
-    --success-secondary: #{$plain-ui__success-secondary};
+    --warning: #{$plain-ui__warning};
-    --white: #ffffff;
+    --warning-contrast: #{$plain-ui__warning-contrast};
-    --black: #212121;
+    --background: #{$plain-ui__background};
-    --background: #{$plain-ui__primary};
+    --background-contrast: #{$plain-ui__background-contrast};
-    --background-secondary: #{$plain-ui__border-secondary};
     --border: #{$plain-ui__border};
-    --border-secondary: #{$plain-ui__border-secondary};
+    --border-contrast: #{$plain-ui__border-contrast};
 }
 
 /**

src/scss/components/_badge.scss

@@ -13,7 +13,7 @@
     display: inline-block;
 
     background-color: var(--background);
-    color: var(--text-secondary);
+    color: var(--text-contrast);
 
     font-size: 0.85rem;
     padding: 0.4rem 0.8rem;

src/scss/components/_bar.scss

@@ -19,7 +19,7 @@
 
     min-height: 2.8em;
     background-color: var(--primary);
-    color: var(--text-secondary);
+    color: var(--text-contrast);
 
     border: $plain-ui__border;
     border-radius: $plain-ui__border-radius;

src/scss/components/_media.scss

@@ -24,7 +24,7 @@
         background: var(--background);
         line-height: $plain-ui__line-height;
         margin: 0;
-        color: var(--text-secondary);
+        color: var(--text-contrast);
     }
 
     .media {

src/scss/components/_panel.scss

@@ -7,7 +7,7 @@
 .panel {
     border: 1px solid var(--border);
     border-radius: $plain-ui__border-radius;
-    background-color: var(--background-secondary);
+    background-color: var(--background-contrast);
 
     &__body {
         padding: $plain-ui__padding;

src/scss/components/_tabs.scss

@@ -39,7 +39,7 @@
         &:hover {
             cursor: pointer;
             background-color: var(--primary-active);
-            color: var(--text-secondary);
+            color: var(--text-contrast);
 
             border-top-left-radius: $plain-ui__border-radius;
             border-top-right-radius: $plain-ui__border-radius;
@@ -51,21 +51,21 @@
         }
     }
 
-    &--secondary {
+    &--contrast {
         border: 0;
 
         .tabs__item {
-            color: var(--text-secondary);
+            color: var(--text-contrast);
 
             &:hover {
-                background-color: var(--primary-active-secondary);
+                background-color: var(--primary-active-contrast);
                 color: var(--text);
                 border-radius: 0;
             }
         }
 
         .tabs__item--selected {
-            border-color: var(--border-secondary);
+            border-color: var(--border-contrast);
         }
     }
 }

src/scss/core/_content.scss

@@ -135,7 +135,7 @@
         overflow-x: auto;
         border: $plain-ui__border;
         border-radius: $plain-ui__border-radius;
-        background-color: var(--background-secondary);
+        background-color: var(--background-contrast);
 
         margin: $plain-ui__margin;
         @include media-breakpoints('margin', $plain-ui__margin-breakpoints);
@@ -148,7 +148,7 @@
 .highlight {
     padding: 0.15rem 0.4rem 0.25rem;
     background: var(--primary);
-    color: var(--text-secondary);
+    color: var(--text-contrast);
     border-radius: $plain-ui__border-radius;
 }
 

src/scss/helpers/_colors.scss

@@ -6,26 +6,34 @@
  *
  */
 
-@each $name, $color in $plain-ui__colors {
+@each $name in $plain-ui__colors {
-    .color-#{$name} {
+    $class: str-replace($name, '--', '');
-        color: var(#{$color});
+
+    .color-#{$class} {
+        color: var(#{$name});
     }
 }
 
-@each $name, $color in $plain-ui__colors {
+@each $name in $plain-ui__colors {
-    .fill-#{$name} {
+    $class: str-replace($name, '--', '');
-        fill: var(#{$color});
+
+    .fill-#{$class} {
+        fill: var(#{$name});
     }
 }
 
-@each $name, $color in $plain-ui__colors {
+@each $name in $plain-ui__colors {
-    .border-color-#{$name} {
+    $class: str-replace($name, '--', '');
-        border-color: var(#{$color});
+
+    .border-color-#{$class} {
+        border-color: var(#{$name});
     }
 }
 
-@each $name, $color in $plain-ui__colors {
+@each $name in $plain-ui__colors {
-    .background-color-#{$name} {
+    $class: str-replace($name, '--', '');
-        background-color: var(#{$color});
+
+    .background-color-#{$class} {
+        background-color: var(#{$name});
     }
 }