Adding prefixed style output

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hibas123/theme",
-    "version": "1.2.19",
+    "version": "2.0.0",
     "description": "",
     "main": " ",
     "files": [
@@ -11,8 +11,13 @@
         "Roboto-Regular.woff2"
     ],
     "scripts": {
-        "build": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
-        "watch": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
+        "build-grid": "sass src/grid.scss:out/grid.css",
+        "watch-grid": "sass --watch src/grid.scss:out/grid.css",
+        "build-clean": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css ",
+        "watch-clean": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
+        "build-prefix": "sass src/base-ht.scss:out/base-ht.css src/dark-ht.scss:out/dark-ht.css src/light-ht.scss:out/light-ht.css",
+        "watch-prefix": "sass --watch src/base-ht.scss:out/base-ht.css src/dark-ht.scss:out/dark-ht.css src/light-ht.scss:out/light-ht.css",
+        "build": "npm run build-clean && npm run build-prefix && npm run build-grid",
         "prepublishOnly": "npm run build"
     },
     "author": "Fabian Stamm <dev@fabianstamm.de>",

src/_maketheme.scss

@@ -1,5 +1,7 @@
 @import "./_vals.scss";
 
+$ns: "" !default;
+
 $background: false !default;
 $on-background: false !default;
 $button-color: #cccccc !default;

src/_vals.scss

@@ -1,10 +1 @@
-$elevations: 1,
-2,
-3,
-4,
-6,
-8,
-9,
-12,
-16,
-24;
+$elevations: 1, 2, 3, 4, 6, 8, 9, 12, 16, 24;

src/base-ht.scss

@@ -0,0 +1,3 @@
+$ns: "ht-";
+
+@import "./base.scss";

src/base.scss

@@ -1,3 +1,5 @@
+$ns: "" !default;
+
 /* latin */
 @font-face {
     font-family: "Roboto";
@@ -45,6 +47,5 @@ $on-success: var(--on-success) !default;
 @import "./base/_list.scss";
 @import "./base/_header.scss";
 @import "./base/_card.scss";
-@import "./base/_grid.scss";
 @import "./base/_table.scss";
 @import "./base/_scroll";

src/base/_btn.scss

@@ -13,11 +13,11 @@
     outline: none;
 }
 
-.btn-flat {
+.#{$ns}btn-flat {
     @include btn-flat();
 }
 
-.btn {
+.#{$ns}btn {
     @include btn-flat();
 }
 
@@ -34,23 +34,23 @@
     }
 }
 
-.btn-primary {
+.#{$ns}btn-primary {
     @include btn-color($primary, $on-primary);
 }
 
-.btn-secondary {
+.#{$ns}btn-secondary {
     @include btn-color($secondary, $on-secondary);
 }
 
-.btn-success {
+.#{$ns}btn-success {
     @include btn-color($success, $on-success);
 }
 
-.btn-error {
+.#{$ns}btn-error {
     @include btn-color($error, $on-error);
 }
 
-.btn-icon {
+.#{$ns}btn-icon {
     background-color: unset !important;
     border: 0 !important;
     box-shadow: unset !important;
@@ -61,7 +61,7 @@
     }
 }
 
-.fab {
+.#{$ns}fab {
     border-radius: 50%;
     width: 3.5rem;
     height: 3.5rem;
@@ -81,7 +81,7 @@
     border: none;
 }
 
-.fab-left {
+.#{$ns}fab-left {
     right: unset;
     left: 1.5rem;
 }

src/base/_card.scss

@@ -1,3 +1,3 @@
-.card {
+.#{$ns}card {
     padding: 1rem;
 }

src/base/_global.scss

@@ -8,14 +8,14 @@ body {
     min-height: 100vh;
     min-width: 100%;
     font-size: 1rem;
-    font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
 }
 
-.margin {
+.#{$ns}margin {
     margin-bottom: 1.5rem;
 }
 
-.container {
+.#{$ns}container {
     box-sizing: content-box;
     padding-left: 1rem;
     padding-right: 1rem;
@@ -36,11 +36,11 @@ h3 {
 }
 
 h5 {
-    font-size: .83rem;
+    font-size: 0.83rem;
 }
 
 h6 {
-    font-size: .67rem;
+    font-size: 0.67rem;
 }
 
 hr {

src/base/_header.scss

@@ -2,7 +2,7 @@
     --header-height: 4rem;
 }
 
-.header {
+.#{$ns}header {
     background: $primary !important;
     color: $on-primary !important;
 
@@ -10,21 +10,21 @@
     // justify-content: space-between;
     padding: 1rem;
 
-    >* {
+    > * {
         max-height: 2rem;
         margin: 0;
         background: $primary;
         color: $on-primary;
     }
 
-    >*:not(:last-child) {
+    > *:not(:last-child) {
         margin-right: 1rem;
     }
 
     span {
         line-height: 1.5rem;
         font-size: 1.5rem;
-        padding: .25rem;
+        padding: 0.25rem;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
@@ -34,15 +34,15 @@
         width: auto;
     }
 
-    >a {
+    > a {
         font-size: 1rem;
         text-overflow: ellipsis;
         white-space: nowrap;
-        padding: .5rem;
+        padding: 0.5rem;
         text-decoration: none;
 
         &:hover {
-            filter: brightness(.95);
+            filter: brightness(0.95);
         }
 
         &:active {

src/base/_input.scss

@@ -1,4 +1,4 @@
-.inp {
+.#{$ns}inp {
     background: unset;
     border: 1px grey solid;
     padding: 0 0.5rem;
@@ -13,19 +13,19 @@
     }
 }
 
-textarea.inp {
+textarea.#{$ns}inp {
     height: unset;
     min-height: 6rem !important;
     font-size: 1.1rem;
 }
 
-.input-group {
+.#{$ns}input-group {
     display: flex;
     flex-direction: column;
-    @extend .margin;
+    @extend .#{$ns}margin;
 
     input {
-        @extend .inp;
+        @extend .#{$ns}inp;
     }
 
     label {
@@ -35,8 +35,8 @@ textarea.inp {
     }
 }
 
-.input-checkbox {
-    @extend .margin;
+.#{$ns}input-checkbox {
+    @extend .#{$ns}margin;
 
     display: block;
     position: relative;

src/base/_list.scss

@@ -1,14 +1,14 @@
-.list {
+.#{$ns}list {
     padding: 0;
     list-style: none;
 
     li {
-        padding: .5rem;
+        padding: 0.5rem;
     }
 }
 
-.list-divider {
-    li:nth-child(n+2) {
+.#{$ns}list-divider {
+    li:nth-child(n + 2) {
         border-top: 1px solid rgb(128, 128, 128);
     }
 }

src/base/_modal.scss

@@ -1,4 +1,4 @@
-.modal {
+.#{$ns}modal {
     padding: 1rem;
 
     margin: auto;
@@ -14,20 +14,20 @@
     top: 50%;
     left: 50%;
 
-    .modal-title {
+    .#{$ns}modal-title {
         font-weight: 600;
         font-size: 1.2rem;
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
     }
 
-    .modal-content {
+    .#{$ns}modal-content {
         overflow-y: auto;
         max-height: calc(100vh - 10rem);
         // margin: auto;
     }
 
-    .modal-action {
-        margin-top: .5rem;
+    .#{$ns}modal-action {
+        margin-top: 0.5rem;
         display: flex;
 
         :first-child {
@@ -35,12 +35,12 @@
         }
 
         button {
-            @extend .btn;
+            @extend .#{$ns}btn;
         }
     }
 
     transform-origin: center;
-    animation: growModalBox .2s linear;
+    animation: growModalBox 0.2s linear;
 }
 
 @keyframes growModalBox {
@@ -53,6 +53,6 @@
     }
 }
 
-.modal-hidden {
+.#{$ns}modal-hidden {
     display: none;
 }

src/base/_table.scss

@@ -1,16 +1,15 @@
-.table {
+.#{$ns}table {
+    border-collapse: collapse;
+    width: 100%;
 
-   border-collapse: collapse;
-   width: 100%;
+    th,
+    td {
+        text-align: left;
+        padding: 8px;
+    }
 
-   th,
-   td {
-      text-align: left;
-      padding: 8px;
-   }
-
-   tr:first-child {
-      background-color: $primary;
-      color: var(--on-primary);
-   }
+    tr:first-child {
+        background-color: $primary;
+        color: var(--on-primary);
+    }
 }

src/dark-ht.scss

@@ -0,0 +1,3 @@
+$ns: "ht-";
+
+@import "./dark.scss";

src/grid.scss

@@ -1,9 +1,3 @@
-// .container {
-//     margin: 0 auto;
-//     padding: 0 calc(1.5 * 1rem);
-// }
-
-
 .row {
     box-sizing: border-box;
     display: flex;
@@ -12,23 +6,23 @@
 }
 
 .col-sm,
-[class^='col-sm-'],
-[class^='col-sm-offset-'],
-.row[class*='cols-sm-']>* {
+[class^="col-sm-"],
+[class^="col-sm-offset-"],
+.row[class*="cols-sm-"] > * {
     box-sizing: border-box;
     flex: 0 0 auto;
     padding: 0 calc(var(--universal-padding) / 2);
 }
 
 .col-sm,
-.row.cols-sm>* {
+.row.cols-sm > * {
     max-width: 100%;
     flex-grow: 1;
     flex-basis: 0;
 }
 
 .col-sm-1,
-.row.cols-sm-1>* {
+.row.cols-sm-1 > * {
     max-width: 8.33333%;
     flex-basis: 8.33333%;
 }
@@ -38,7 +32,7 @@
 }
 
 .col-sm-2,
-.row.cols-sm-2>* {
+.row.cols-sm-2 > * {
     max-width: 16.66667%;
     flex-basis: 16.66667%;
 }
@@ -48,7 +42,7 @@
 }
 
 .col-sm-3,
-.row.cols-sm-3>* {
+.row.cols-sm-3 > * {
     max-width: 25%;
     flex-basis: 25%;
 }
@@ -58,7 +52,7 @@
 }
 
 .col-sm-4,
-.row.cols-sm-4>* {
+.row.cols-sm-4 > * {
     max-width: 33.33333%;
     flex-basis: 33.33333%;
 }
@@ -68,7 +62,7 @@
 }
 
 .col-sm-5,
-.row.cols-sm-5>* {
+.row.cols-sm-5 > * {
     max-width: 41.66667%;
     flex-basis: 41.66667%;
 }
@@ -78,7 +72,7 @@
 }
 
 .col-sm-6,
-.row.cols-sm-6>* {
+.row.cols-sm-6 > * {
     max-width: 50%;
     flex-basis: 50%;
 }
@@ -88,7 +82,7 @@
 }
 
 .col-sm-7,
-.row.cols-sm-7>* {
+.row.cols-sm-7 > * {
     max-width: 58.33333%;
     flex-basis: 58.33333%;
 }
@@ -98,7 +92,7 @@
 }
 
 .col-sm-8,
-.row.cols-sm-8>* {
+.row.cols-sm-8 > * {
     max-width: 66.66667%;
     flex-basis: 66.66667%;
 }
@@ -108,7 +102,7 @@
 }
 
 .col-sm-9,
-.row.cols-sm-9>* {
+.row.cols-sm-9 > * {
     max-width: 75%;
     flex-basis: 75%;
 }
@@ -118,7 +112,7 @@
 }
 
 .col-sm-10,
-.row.cols-sm-10>* {
+.row.cols-sm-10 > * {
     max-width: 83.33333%;
     flex-basis: 83.33333%;
 }
@@ -128,7 +122,7 @@
 }
 
 .col-sm-11,
-.row.cols-sm-11>* {
+.row.cols-sm-11 > * {
     max-width: 91.66667%;
     flex-basis: 91.66667%;
 }
@@ -138,7 +132,7 @@
 }
 
 .col-sm-12,
-.row.cols-sm-12>* {
+.row.cols-sm-12 > * {
     max-width: 100%;
     flex-basis: 100%;
 }
@@ -160,25 +154,24 @@
 }
 
 @media screen and (min-width: 768px) {
-
     .col-md,
-    [class^='col-md-'],
-    [class^='col-md-offset-'],
-    .row[class*='cols-md-']>* {
+    [class^="col-md-"],
+    [class^="col-md-offset-"],
+    .row[class*="cols-md-"] > * {
         box-sizing: border-box;
         flex: 0 0 auto;
         padding: 0 calc(var(--universal-padding) / 2);
     }
 
     .col-md,
-    .row.cols-md>* {
+    .row.cols-md > * {
         max-width: 100%;
         flex-grow: 1;
         flex-basis: 0;
     }
 
     .col-md-1,
-    .row.cols-md-1>* {
+    .row.cols-md-1 > * {
         max-width: 8.33333%;
         flex-basis: 8.33333%;
     }
@@ -188,7 +181,7 @@
     }
 
     .col-md-2,
-    .row.cols-md-2>* {
+    .row.cols-md-2 > * {
         max-width: 16.66667%;
         flex-basis: 16.66667%;
     }
@@ -198,7 +191,7 @@
     }
 
     .col-md-3,
-    .row.cols-md-3>* {
+    .row.cols-md-3 > * {
         max-width: 25%;
         flex-basis: 25%;
     }
@@ -208,7 +201,7 @@
     }
 
     .col-md-4,
-    .row.cols-md-4>* {
+    .row.cols-md-4 > * {
         max-width: 33.33333%;
         flex-basis: 33.33333%;
     }
@@ -218,7 +211,7 @@
     }
 
     .col-md-5,
-    .row.cols-md-5>* {
+    .row.cols-md-5 > * {
         max-width: 41.66667%;
         flex-basis: 41.66667%;
     }
@@ -228,7 +221,7 @@
     }
 
     .col-md-6,
-    .row.cols-md-6>* {
+    .row.cols-md-6 > * {
         max-width: 50%;
         flex-basis: 50%;
     }
@@ -238,7 +231,7 @@
     }
 
     .col-md-7,
-    .row.cols-md-7>* {
+    .row.cols-md-7 > * {
         max-width: 58.33333%;
         flex-basis: 58.33333%;
     }
@@ -248,7 +241,7 @@
     }
 
     .col-md-8,
-    .row.cols-md-8>* {
+    .row.cols-md-8 > * {
         max-width: 66.66667%;
         flex-basis: 66.66667%;
     }
@@ -258,7 +251,7 @@
     }
 
     .col-md-9,
-    .row.cols-md-9>* {
+    .row.cols-md-9 > * {
         max-width: 75%;
         flex-basis: 75%;
     }
@@ -268,7 +261,7 @@
     }
 
     .col-md-10,
-    .row.cols-md-10>* {
+    .row.cols-md-10 > * {
         max-width: 83.33333%;
         flex-basis: 83.33333%;
     }
@@ -278,7 +271,7 @@
     }
 
     .col-md-11,
-    .row.cols-md-11>* {
+    .row.cols-md-11 > * {
         max-width: 91.66667%;
         flex-basis: 91.66667%;
     }
@@ -288,7 +281,7 @@
     }
 
     .col-md-12,
-    .row.cols-md-12>* {
+    .row.cols-md-12 > * {
         max-width: 100%;
         flex-basis: 100%;
     }
@@ -311,25 +304,24 @@
 }
 
 @media screen and (min-width: 1280px) {
-
     .col-lg,
-    [class^='col-lg-'],
-    [class^='col-lg-offset-'],
-    .row[class*='cols-lg-']>* {
+    [class^="col-lg-"],
+    [class^="col-lg-offset-"],
+    .row[class*="cols-lg-"] > * {
         box-sizing: border-box;
         flex: 0 0 auto;
         padding: 0 calc(var(1rem) / 2);
     }
 
     .col-lg,
-    .row.cols-lg>* {
+    .row.cols-lg > * {
         max-width: 100%;
         flex-grow: 1;
         flex-basis: 0;
     }
 
     .col-lg-1,
-    .row.cols-lg-1>* {
+    .row.cols-lg-1 > * {
         max-width: 8.33333%;
         flex-basis: 8.33333%;
     }
@@ -339,7 +331,7 @@
     }
 
     .col-lg-2,
-    .row.cols-lg-2>* {
+    .row.cols-lg-2 > * {
         max-width: 16.66667%;
         flex-basis: 16.66667%;
     }
@@ -349,7 +341,7 @@
     }
 
     .col-lg-3,
-    .row.cols-lg-3>* {
+    .row.cols-lg-3 > * {
         max-width: 25%;
         flex-basis: 25%;
     }
@@ -359,7 +351,7 @@
     }
 
     .col-lg-4,
-    .row.cols-lg-4>* {
+    .row.cols-lg-4 > * {
         max-width: 33.33333%;
         flex-basis: 33.33333%;
     }
@@ -369,7 +361,7 @@
     }
 
     .col-lg-5,
-    .row.cols-lg-5>* {
+    .row.cols-lg-5 > * {
         max-width: 41.66667%;
         flex-basis: 41.66667%;
     }
@@ -379,7 +371,7 @@
     }
 
     .col-lg-6,
-    .row.cols-lg-6>* {
+    .row.cols-lg-6 > * {
         max-width: 50%;
         flex-basis: 50%;
     }
@@ -389,7 +381,7 @@
     }
 
     .col-lg-7,
-    .row.cols-lg-7>* {
+    .row.cols-lg-7 > * {
         max-width: 58.33333%;
         flex-basis: 58.33333%;
     }
@@ -399,7 +391,7 @@
     }
 
     .col-lg-8,
-    .row.cols-lg-8>* {
+    .row.cols-lg-8 > * {
         max-width: 66.66667%;
         flex-basis: 66.66667%;
     }
@@ -409,7 +401,7 @@
     }
 
     .col-lg-9,
-    .row.cols-lg-9>* {
+    .row.cols-lg-9 > * {
         max-width: 75%;
         flex-basis: 75%;
     }
@@ -419,7 +411,7 @@
     }
 
     .col-lg-10,
-    .row.cols-lg-10>* {
+    .row.cols-lg-10 > * {
         max-width: 83.33333%;
         flex-basis: 83.33333%;
     }
@@ -429,7 +421,7 @@
     }
 
     .col-lg-11,
-    .row.cols-lg-11>* {
+    .row.cols-lg-11 > * {
         max-width: 91.66667%;
         flex-basis: 91.66667%;
     }
@@ -439,7 +431,7 @@
     }
 
     .col-lg-12,
-    .row.cols-lg-12>* {
+    .row.cols-lg-12 > * {
         max-width: 100%;
         flex-basis: 100%;
     }

src/light-ht.scss

@@ -0,0 +1,3 @@
+$ns: "ht-";
+
+@import "./light.scss";

src/theme/_btn.scss

@@ -17,7 +17,7 @@
     @include btn-flat();
 }
 
-.btn {
+.#{$ns}btn {
     @include Elevation(1);
     @include ElevationTransition(0.2s);
     &:focus {
@@ -26,7 +26,7 @@
     @include btn-flat();
 }
 
-.fab {
+.#{$ns}fab {
     @include Elevation(8);
     @include ElevationTransition(0.2s);
     &:focus {

src/theme/_card.scss

@@ -1,7 +1,7 @@
-.card {
+.#{$ns}card {
     @include Elevation(3);
 }
 
-.card-elevated {
+.#{$ns}card-elevated {
     @include Elevation(8);
 }

src/theme/_header.scss

@@ -1,3 +1,3 @@
-.header {
+.#{$ns}header {
     @include Elevation(3);
 }

src/theme/_input.scss

@@ -1,4 +1,4 @@
-.inp {
+.#{$ns}inp {
     color: $on-background;
 
     option {
@@ -7,13 +7,13 @@
     }
 }
 
-.input-group {
+.#{$ns}input-group {
     input {
-        @extend .inp;
+        @extend .#{$ns}inp;
     }
 }
 
-.input-checkbox {
+.#{$ns}input-checkbox {
     span {
         background-color: $button-color;
     }

src/theme/_list.scss

@@ -1,9 +1,9 @@
-.list-clickable {
+.#{$ns}list-clickable {
     li:hover {
         background: darken-brighten-color($background, 5%);
     }
 }
 
-.list-selected {
+.#{$ns}list-selected {
     background: darken-brighten-color($background, 10%);
 }

src/theme/_modal.scss

@@ -1,10 +1,10 @@
-.modal {
+.#{$ns}modal {
     background: $background;
     @include Elevation(24);
 
-    .modal-action {
+    .#{$ns}modal-action {
         button {
-            @extend .btn;
+            @extend .#{$ns}btn;
         }
     }
 }

src/theme/_table.scss

@@ -1,5 +1,5 @@
-.table {
-   tr:nth-child(odd):not(:first-child) {
-      background: darken-brighten-color($background, 10%)
-   }
+.#{$ns}table {
+    tr:nth-child(odd):not(:first-child) {
+        background: darken-brighten-color($background, 10%);
+    }
 }