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",
+        "build-grid": "sass src/grid.scss:out/grid.css",
-        "watch": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.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,
+$elevations: 1, 2, 3, 4, 6, 8, 9, 12, 16, 24;
-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;
 
@@ -24,7 +24,7 @@
     span {
         line-height: 1.5rem;
         font-size: 1.5rem;
-        padding: .25rem;
+        padding: 0.25rem;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
@@ -38,11 +38,11 @@
         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 {
+.#{$ns}input-checkbox {
-    @extend .margin;
+    @extend .#{$ns}margin;
 
     display: block;
     position: relative;

src/base/_list.scss

@@ -1,13 +1,13 @@
-.list {
+.#{$ns}list {
     padding: 0;
     list-style: none;
 
     li {
-        padding: .5rem;
+        padding: 0.5rem;
     }
 }
 
-.list-divider {
+.#{$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 {
+    .#{$ns}modal-action {
-        margin-top: .5rem;
+        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,5 +1,4 @@
-.table {
+.#{$ns}table {
-
     border-collapse: collapse;
     width: 100%;
 

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,9 +6,9 @@
 }
 
 .col-sm,
-[class^='col-sm-'],
+[class^="col-sm-"],
-[class^='col-sm-offset-'],
+[class^="col-sm-offset-"],
-.row[class*='cols-sm-']>* {
+.row[class*="cols-sm-"] > * {
     box-sizing: border-box;
     flex: 0 0 auto;
     padding: 0 calc(var(--universal-padding) / 2);
@@ -160,11 +154,10 @@
 }
 
 @media screen and (min-width: 768px) {
-
     .col-md,
-    [class^='col-md-'],
+    [class^="col-md-"],
-    [class^='col-md-offset-'],
+    [class^="col-md-offset-"],
-    .row[class*='cols-md-']>* {
+    .row[class*="cols-md-"] > * {
         box-sizing: border-box;
         flex: 0 0 auto;
         padding: 0 calc(var(--universal-padding) / 2);
@@ -311,11 +304,10 @@
 }
 
 @media screen and (min-width: 1280px) {
-
     .col-lg,
-    [class^='col-lg-'],
+    [class^="col-lg-"],
-    [class^='col-lg-offset-'],
+    [class^="col-lg-offset-"],
-    .row[class*='cols-lg-']>* {
+    .row[class*="cols-lg-"] > * {
         box-sizing: border-box;
         flex: 0 0 auto;
         padding: 0 calc(var(1rem) / 2);

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 {
+.#{$ns}table {
     tr:nth-child(odd):not(:first-child) {
-      background: darken-brighten-color($background, 10%)
+        background: darken-brighten-color($background, 10%);
     }
 }