landsoul 0.1.3 → 0.1.4

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 YieldRay
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 YieldRay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
 # landsoul
 
-Drop in css library landsoul (IE11 is not supported)
-
-To enable dark mode, use `prefers-color-scheme: dark` or `body[data-theme="dark"]`
+A classless CSS library (IE11 is not supported)
 
 Preview: <https://yieldray.github.io/landsoul/>
 
-# usage
+# Usage
+
+To enable dark mode, use `prefers-color-scheme: dark` or `body[data-theme="dark"]`
 
 ```html
 <link rel="stylesheet" href="https://unpkg.com/landsoul" />

package/dist/landsoul.css

@@ -1 +1 @@
-body{--landsoul-bg:#fff;--landsoul-text:#3d424f;--landsoul-shadow:#f4f4f5;--landsoul-accent:#2563eb;--landsoul-color:#e3e4e8;--landsoul-time:0.3s;--landsoul-radius:0.25em;--landsoul-gradient:linear-gradient(#ccfcf7,#c4eae9,#bbd8db,#b3c6cd,#aab4bf)}body[data-theme=dark]{--landsoul-bg:#202021;--landsoul-text:#e7e7e7;--landsoul-shadow:#353e5a;--landsoul-color:#2b414f}@media screen and (prefers-color-scheme:dark){body{--landsoul-bg:#202021;--landsoul-text:#e7e7e7;--landsoul-shadow:#353e5a;--landsoul-color:#2b414f}}body{margin:0}a{background-color:transparent}progress{vertical-align:baseline;width:8rem}body{background-color:var(--landsoul-bg);color:var(--landsoul-text);font-family:Graphik,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;-webkit-transition:color var(--landsoul-time),background-color var(--landsoul-time);transition:color var(--landsoul-time),background-color var(--landsoul-time)}a{color:var(--landsoul-accent);-webkit-text-decoration:none;text-decoration:none}a:hover{-webkit-text-decoration:underline;text-decoration:underline}h1{font-size:2.5rem}h2{font-size:2.25rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.25rem}a[href^="#"] h1,a[href^="#"] h2,a[href^="#"] h3,a[href^="#"] h4,a[href^="#"] h5,a[href^="#"] h6{color:var(--landsoul-text)}a[href^="#"] h1:before,a[href^="#"] h2:before,a[href^="#"] h3:before,a[href^="#"] h4:before,a[href^="#"] h5:before,a[href^="#"] h6:before{color:var(--landsoul-accent);content:"#";margin-right:.3rem}h1,h2,h3,h4,h5,h6{color:inherit;margin:0;padding:0}h1>small,h2>small,h3>small,h4>small,h5>small,h6>small{background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius);font-weight:lighter;margin-left:.25rem;padding:0 .25rem}button,input,select,textarea{background-color:var(--landsoul-shadow);color:var(--landsoul-text)}button,input[type=button],input[type=reset],input[type=submit],select{background-color:var(--landsoul-color);cursor:pointer;-webkit-transition:-webkit-filter var(--landsoul-time);transition:-webkit-filter var(--landsoul-time);transition:filter var(--landsoul-time);transition:filter var(--landsoul-time),-webkit-filter var(--landsoul-time)}button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover,select:hover{-webkit-filter:contrast(.94);filter:contrast(.94)}button,input{border:none;border-radius:var(--landsoul-radius);padding:.3em .45em}input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border:.01em solid var(--landsoul-shadow);border-radius:var(--landsoul-radius);padding:.2em .3em;-webkit-transition:-webkit-filter var(--landsoul-time);transition:-webkit-filter var(--landsoul-time);transition:filter var(--landsoul-time);transition:filter var(--landsoul-time),-webkit-filter var(--landsoul-time)}input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,select:hover,textarea:hover{-webkit-filter:contrast(.94);filter:contrast(.94)}input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-within,select:focus-within,textarea:focus-within{border:.01em solid var(--landsoul-text);outline:none}textarea{min-height:2rem;min-width:2rem}[disabled],input[disabled]{cursor:not-allowed;opacity:.5}label:not(:has([disabled])){cursor:pointer}input[type=checkbox],input[type=radio]{--size:1.25rem;all:unset;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block;height:1.25rem;height:var(--size);opacity:.8;position:relative;-webkit-transition:all var(--landsoul-time);transition:all var(--landsoul-time);vertical-align:text-bottom}input[type=checkbox]:hover,input[type=radio]:hover{opacity:1}input[type=checkbox]{background:var(--landsoul-shadow);border-radius:1rem;width:calc(var(--size)*1.75)}input[type=checkbox]:after{background:var(--landsoul-bg);border-radius:50%;content:"";display:inline-block;height:calc(var(--size)*.8);left:calc(var(--size)*.1);position:absolute;top:calc(var(--size)*.1);-webkit-transition:all .4s;transition:all .4s;width:calc(var(--size)*.8)}input[type=checkbox]:checked{background:var(--landsoul-accent)}input[type=checkbox]:checked:after{content:"";left:100%;position:absolute;-webkit-transform:translateX(calc(-100% - var(--size)*.1));transform:translateX(calc(-100% - var(--size)*.1))}input[type=radio]{border:solid calc(var(--size)*.1) var(--landsoul-shadow);border-radius:50%;width:var(--size)}input[type=radio]:after{background:var(--landsoul-accent);border-radius:50%;content:"";display:inline-block;height:calc(var(--size)*.6);left:50%;opacity:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:opacity var(--landsoul-time);transition:opacity var(--landsoul-time);width:calc(var(--size)*.6)}input[type=radio]:checked:after{opacity:1}input[type=range]{-webkit-appearance:none;background-color:transparent;border-radius:1rem;cursor:pointer;height:.3rem;vertical-align:baseline}input[type=range]::-webkit-slider-runnable-track{background-color:var(--landsoul-shadow);border-radius:1rem;height:.15rem;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--landsoul-bg);border:.2rem solid var(--landsoul-color);border-radius:50%;cursor:-webkit-grab;cursor:grab;height:1rem;-webkit-transform:translateY(-.4rem) scale(.8);transform:translateY(-.4rem) scale(.8);-webkit-transition:transform .2s;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:1rem}input[type=range]::-webkit-slider-thumb:active{-webkit-transform:translateY(-.4rem) scale(1);transform:translateY(-.4rem) scale(1)}input[type=range]::-moz-range-progress{background-color:var(--landsoul-accent);height:.1rem}input[type=range]::-moz-range-track{background-color:var(--landsoul-shadow);height:.15rem;width:100%}input[type=range]::-moz-range-thumb{-moz-appearance:none;background-color:var(--landsoul-bg);border:.2rem solid var(--landsoul-color);border-radius:50%;cursor:grab;height:1rem;transform:scale(.8);-moz-transition:transform .2s;transition:transform .2s;width:1rem}input[type=range]::-moz-range-thumb:active{transform:scale(1)}table{border-collapse:collapse;border-spacing:0;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;max-width:100%;overflow:auto}table caption{padding:.5em}table tfoot th,table thead th{background-color:var(--landsoul-shadow);padding-bottom:.75em;padding-top:.75em;position:sticky;vertical-align:bottom}table thead th{top:0}table tfoot th{bottom:0}table tbody{white-space:nowrap}table tbody tr{background-color:var(--landsoul-bg)}table tbody tr:nth-child(2n){background-color:var(--landsoul-shadow)}table td,table th{padding:.25em .5em}table,td,th{border:2px solid var(--landsoul-color)}td,th{border-bottom-width:0}td:first-child,th:first-child{border-left-width:0}td:last-child,th:last-child{border-right-width:0}figure{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;margin:auto}figure img{max-width:100%}figure figcaption{font-size:.75em;margin:.5em}details{padding:.5em .5em 0}summary{font-weight:700;margin:-.5em -.5em 0}details[open],summary{padding:.5em}details[open] summary{margin-bottom:.5em}dialog{all:unset;background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius);color:var(--landsoul-text);left:50%;max-height:100%;max-width:100%;opacity:0;overflow:auto;padding:.5rem 1rem;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:opacity .3s;transition:opacity .3s;z-index:2}dialog[open]{opacity:1}progress{--height:0.5em;background-color:var(--landsoul-shadow);border:none;border-radius:.5em;border-radius:var(--height);color:var(--landsoul-accent);height:.5em;height:var(--height);line-height:.5em;line-height:var(--height);overflow:hidden}progress::-moz-progress-bar{background-color:var(--landsoul-accent)}progress::-webkit-progress-bar{background-color:var(--landsoul-shadow)}progress::-webkit-progress-value{background-color:var(--landsoul-accent)}::-webkit-meter-bar{background-color:var(--landsoul-shadow);border:none}hr{border:none;border-top:.15em solid var(--landsoul-color)}blockquote{border-left:.25rem solid var(--landsoul-shadow);font-style:italic;margin:.5rem 0;padding:.5rem 1rem}code,kbd,pre{background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius)}code,kbd,pre,samp{font-family:Consolas,monospace}code,kbd{padding:.05em .2em}pre{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;overflow:auto;padding:.5em .75em}kbd{border:solid rgba(0,0,0,.05);border-width:.1em .1em .2em}fieldset,iframe{border:.15em solid var(--landsoul-color);border-radius:var(--landsoul-radius)}
+body{--landsoul-bg:#fff;--landsoul-text:#3d424f;--landsoul-shadow:#f4f4f5;--landsoul-accent:#2563eb;--landsoul-color:#e3e4e8;--landsoul-time:0.3s;--landsoul-radius:0.25rem;--landsoul-gradient:linear-gradient(#ccfcf7,#c4eae9,#bbd8db,#b3c6cd,#aab4bf)}body[data-theme=dark]{--landsoul-bg:#202021;--landsoul-text:#e7e7e7;--landsoul-shadow:#353e5a;--landsoul-color:#2b414f}@media screen and (prefers-color-scheme:dark){body{--landsoul-bg:#202021;--landsoul-text:#e7e7e7;--landsoul-shadow:#353e5a;--landsoul-color:#2b414f}}a{background-color:transparent}progress{vertical-align:baseline;width:8rem}body{background-color:var(--landsoul-bg);color:var(--landsoul-text);font-family:Graphik,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;transition:color var(--landsoul-time),background-color var(--landsoul-time)}a{color:var(--landsoul-accent);-webkit-text-decoration:none;text-decoration:none}a:hover{-webkit-text-decoration:underline;text-decoration:underline}h1{font-size:2.5rem}h2{font-size:2.25rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.25rem}a[href^="#"] h1,a[href^="#"] h2,a[href^="#"] h3,a[href^="#"] h4,a[href^="#"] h5,a[href^="#"] h6{color:var(--landsoul-text)}a[href^="#"] h1:before,a[href^="#"] h2:before,a[href^="#"] h3:before,a[href^="#"] h4:before,a[href^="#"] h5:before,a[href^="#"] h6:before{color:var(--landsoul-accent);content:"#";margin-right:.3rem}h1,h2,h3,h4,h5,h6{color:inherit;margin:0;padding:0}h1>small,h2>small,h3>small,h4>small,h5>small,h6>small{background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius);font-weight:lighter;margin-left:.25rem;padding:0 .25rem}button,input,select,textarea{background-color:var(--landsoul-shadow);color:var(--landsoul-text)}button,input[type=button],input[type=reset],input[type=submit],select{background-color:var(--landsoul-color);cursor:pointer;transition:filter var(--landsoul-time)}button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover,select:hover{filter:contrast(.94)}button,input{border:none;border-radius:var(--landsoul-radius);padding:.3rem .45rem}input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border:.01rem solid var(--landsoul-shadow);border-radius:var(--landsoul-radius);padding:.2rem .3rem;transition:filter var(--landsoul-time)}input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,select:hover,textarea:hover{filter:contrast(.94)}input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-within,select:focus-within,textarea:focus-within{border:.01rem solid var(--landsoul-text);outline:none}textarea{min-height:2rem;min-width:2rem}[disabled],input[disabled]{cursor:not-allowed;opacity:.5}label:not(:has([disabled])){cursor:pointer}input[type=checkbox],input[type=radio]{--size:1.25rem;all:unset;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;cursor:pointer;display:inline-block;height:1.25rem;height:var(--size);opacity:.8;position:relative;transition:all var(--landsoul-time);vertical-align:text-bottom}input[type=checkbox]:hover,input[type=radio]:hover{opacity:1}input[type=checkbox]{background:var(--landsoul-shadow);border-radius:1rem;width:calc(var(--size)*1.75)}input[type=checkbox]:after{background:var(--landsoul-bg);border-radius:50%;content:"";display:inline-block;height:calc(var(--size)*.8);left:calc(var(--size)*.1);position:absolute;top:calc(var(--size)*.1);transition:all .4s;width:calc(var(--size)*.8)}input[type=checkbox]:checked{background:var(--landsoul-accent)}input[type=checkbox]:checked:after{content:"";left:100%;position:absolute;transform:translateX(calc(-100% - var(--size)*.1))}input[type=radio]{border:solid calc(var(--size)*.1) var(--landsoul-shadow);border-radius:50%;width:var(--size)}input[type=radio]:after{background:var(--landsoul-accent);border-radius:50%;content:"";display:inline-block;height:calc(var(--size)*.6);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity var(--landsoul-time);width:calc(var(--size)*.6)}input[type=radio]:checked:after{opacity:1}input[type=range]{-webkit-appearance:none;background-color:transparent;border-radius:1rem;cursor:pointer;height:.3rem;vertical-align:baseline}input[type=range]::-webkit-slider-runnable-track{background-color:var(--landsoul-shadow);border-radius:1rem;height:.15rem;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--landsoul-bg);border:.2rem solid var(--landsoul-color);border-radius:50%;cursor:grab;height:1rem;transform:translateY(-.4rem) scale(.8);-webkit-transition:transform .2s;transition:transform .2s;width:1rem}input[type=range]::-webkit-slider-thumb:active{transform:translateY(-.4rem) scale(1)}input[type=range]::-moz-range-progress{background-color:var(--landsoul-accent);height:.1rem}input[type=range]::-moz-range-track{background-color:var(--landsoul-shadow);height:.15rem;width:100%}input[type=range]::-moz-range-thumb{-moz-appearance:none;background-color:var(--landsoul-bg);border:.2rem solid var(--landsoul-color);border-radius:50%;cursor:grab;height:1rem;transform:scale(.8);-moz-transition:transform .2s;transition:transform .2s;width:1rem}input[type=range]::-moz-range-thumb:active{transform:scale(1)}table{border-collapse:collapse;border-spacing:0;box-sizing:border-box;display:inline-block;max-width:100%;overflow:auto}table caption{padding:.5rem}table tfoot th,table thead th{background-color:var(--landsoul-shadow);padding-bottom:.75rem;padding-top:.75rem;position:sticky;vertical-align:bottom}table thead th{top:0}table tfoot th{bottom:0}table tbody{white-space:nowrap}table tbody tr{background-color:var(--landsoul-bg)}table tbody tr:nth-child(2n){background-color:var(--landsoul-shadow)}table td,table th{padding:.25rem .5rem}table,td,th{border:2px solid var(--landsoul-color)}td,th{border-bottom-width:0}td:first-child,th:first-child{border-left-width:0}td:last-child,th:last-child{border-right-width:0}figure{display:flex;flex-flow:column;margin:auto}figure img{max-width:100%}figure figcaption{font-size:.75rem;margin:.5rem}details{padding:.5rem .5rem 0}summary{font-weight:700;margin:-.5rem -.5rem 0}details[open],summary{padding:.5rem}details[open] summary{margin-bottom:.5rem}dialog{all:unset;background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius);color:var(--landsoul-text);left:50%;max-height:100%;max-width:100%;opacity:0;overflow:auto;padding:.5rem 1rem;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity .3s;z-index:2}dialog[open]{opacity:1}progress{--height:0.5rem;background-color:var(--landsoul-shadow);border:none;border-radius:.5rem;border-radius:var(--height);color:var(--landsoul-accent);height:.5rem;height:var(--height);line-height:.5rem;line-height:var(--height);overflow:hidden}progress::-moz-progress-bar{background-color:var(--landsoul-accent)}progress::-webkit-progress-bar{background-color:var(--landsoul-shadow)}progress::-webkit-progress-value{background-color:var(--landsoul-accent)}::-webkit-meter-bar{background-color:var(--landsoul-shadow);border:none}hr{border:none;border-top:.15rem solid var(--landsoul-color)}blockquote{border-left:.25rem solid var(--landsoul-shadow);font-style:italic;margin:.5rem 0;padding:.5rem 1rem}code,kbd,pre{background-color:var(--landsoul-shadow);border-radius:var(--landsoul-radius)}code,kbd,pre,samp{font-family:Consolas,monospace}code,kbd{padding:.05rem .2rem}pre{box-sizing:border-box;max-width:100%;overflow:auto;padding:.5rem .75rem}kbd{border:solid rgba(0,0,0,.05);border-width:.1rem .1rem .2rem}fieldset,iframe{border:.15rem solid var(--landsoul-color);border-radius:var(--landsoul-radius)}

package/package.json

@@ -1,29 +1,32 @@
-{
-    "name": "landsoul",
-    "version": "0.1.3",
-    "description": "drop in css library landsoul",
-    "main": "./dist/landsoul.css",
-    "scripts": {
-        "dev": "sass --watch src:dist",
-        "build": "rm -rf ./dist && sass src:dist --no-source-map && postcss ./dist/*.css -d ./dist"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/YieldRay/landsoul.git"
-    },
-    "keywords": [],
-    "author": "YieldRay",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/YieldRay/landsoul/issues"
-    },
-    "homepage": "https://github.com/YieldRay/landsoul#readme",
-    "devDependencies": {
-        "autoprefixer": "^10.4.16",
-        "cssnano": "^6.0.1",
-        "postcss": "^8.4.31",
-        "postcss-cli": "^10.1.0",
-        "postcss-preset-env": "^9.3.0",
-        "sass": "^1.69.5"
-    }
-}
+{
+    "name": "landsoul",
+    "version": "0.1.4",
+    "description": "drop in css library landsoul",
+    "main": "./dist/landsoul.css",
+    "scripts": {
+        "dev": "sass --watch src:dist",
+        "build": "rm -rf ./dist && sass src:dist --no-source-map && postcss ./dist/*.css -d ./dist"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/YieldRay/landsoul.git"
+    },
+    "keywords": [
+        "classless",
+        "css"
+    ],
+    "author": "YieldRay",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/YieldRay/landsoul/issues"
+    },
+    "homepage": "https://github.com/YieldRay/landsoul#readme",
+    "devDependencies": {
+        "autoprefixer": "^10.4.20",
+        "cssnano": "^6.1.2",
+        "postcss": "^8.4.47",
+        "postcss-cli": "^10.1.0",
+        "postcss-preset-env": "^9.6.0",
+        "sass": "^1.79.4"
+    }
+}

package/src/_mixins.scss

@@ -1,9 +1,9 @@
-@mixin theme-color($bg: var(--landsoul-bg)) {
-    color: var(--landsoul-text);
-    background-color: $bg;
-}
-
-@mixin bg-radius($bg: var(--landsoul-shadow), $radius: var(--landsoul-radius)) {
-    background-color: $bg;
-    border-radius: $radius;
-}
+@mixin theme-color($bg: var(--landsoul-bg)) {
+    color: var(--landsoul-text);
+    background-color: $bg;
+}
+
+@mixin bg-radius($bg: var(--landsoul-shadow), $radius: var(--landsoul-radius)) {
+    background-color: $bg;
+    border-radius: $radius;
+}

package/src/_theme.scss

@@ -1,32 +1,32 @@
-@mixin light {
-    --landsoul-bg: #fff;
-    --landsoul-text: #3d424f;
-    --landsoul-shadow: #f4f4f5;
-    --landsoul-accent: #2563eb;
-    --landsoul-color: #e3e4e8;
-}
-
-@mixin dark {
-    --landsoul-bg: #202021;
-    --landsoul-text: #e7e7e7;
-    --landsoul-shadow: #353e5a;
-    --landsoul-color: #2b414f;
-}
-
-body {
-    @include light;
-    // other variables
-    --landsoul-time: 0.3s;
-    --landsoul-radius: 0.25em;
-    --landsoul-gradient: linear-gradient(rgb(204, 252, 247), rgb(196, 234, 233), rgb(187, 216, 219), rgb(179, 198, 205), rgb(170, 180, 191));
-}
-
-body[data-theme="dark"] {
-    @include dark;
-}
-
-@media screen and (prefers-color-scheme: dark) {
-    body {
-        @include dark;
-    }
-}
+@mixin light {
+    --landsoul-bg: #fff;
+    --landsoul-text: #3d424f;
+    --landsoul-shadow: #f4f4f5;
+    --landsoul-accent: #2563eb;
+    --landsoul-color: #e3e4e8;
+}
+
+@mixin dark {
+    --landsoul-bg: #202021;
+    --landsoul-text: #e7e7e7;
+    --landsoul-shadow: #353e5a;
+    --landsoul-color: #2b414f;
+}
+
+body {
+    @include light;
+    // other variables
+    --landsoul-time: 0.3s;
+    --landsoul-radius: 0.25rem;
+    --landsoul-gradient: linear-gradient(rgb(204, 252, 247), rgb(196, 234, 233), rgb(187, 216, 219), rgb(179, 198, 205), rgb(170, 180, 191));
+}
+
+body[data-theme="dark"] {
+    @include dark;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+    body {
+        @include dark;
+    }
+}

package/src/landsoul/_details.scss

@@ -1,16 +1,16 @@
-details {
-    padding: 0.5em 0.5em 0;
-}
-
-summary {
-    font-weight: bold;
-    margin: -0.5em -0.5em 0;
-    padding: 0.5em;
-}
-
-details[open] {
-    padding: 0.5em;
-    summary {
-        margin-bottom: 0.5em;
-    }
-}
+details {
+    padding: 0.5rem 0.5rem 0;
+}
+
+summary {
+    font-weight: bold;
+    margin: -0.5rem -0.5rem 0;
+    padding: 0.5rem;
+}
+
+details[open] {
+    padding: 0.5rem;
+    summary {
+        margin-bottom: 0.5rem;
+    }
+}

package/src/landsoul/_dialog.scss

@@ -1,21 +1,21 @@
-@import "../mixins";
-
-dialog {
-    all: unset;
-    @include theme-color(var(--landsoul-shadow));
-    border-radius: var(--landsoul-radius);
-    position: fixed;
-    z-index: 2;
-    padding: 0.5rem 1rem;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    max-height: 100%;
-    max-width: 100%;
-    overflow: auto;
-    opacity: 0;
-    transition: opacity 0.3s;
-    &[open] {
-        opacity: 1;
-    }
-}
+@import "../mixins";
+
+dialog {
+    all: unset;
+    @include theme-color(var(--landsoul-shadow));
+    border-radius: var(--landsoul-radius);
+    position: fixed;
+    z-index: 2;
+    padding: 0.5rem 1rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-height: 100%;
+    max-width: 100%;
+    overflow: auto;
+    opacity: 0;
+    transition: opacity 0.3s;
+    &[open] {
+        opacity: 1;
+    }
+}

package/src/landsoul/_figure.scss

@@ -1,12 +1,12 @@
-figure {
-    display: flex;
-    flex-flow: column;
-    margin: auto;
-    img {
-        max-width: 100%;
-    }
-    figcaption {
-        font-size: 0.75em;
-        margin: 0.5em;
-    }
-}
+figure {
+    display: flex;
+    flex-flow: column;
+    margin: auto;
+    img {
+        max-width: 100%;
+    }
+    figcaption {
+        font-size: 0.75rem;
+        margin: 0.5rem;
+    }
+}

package/src/landsoul/_global.scss

@@ -1,69 +1,69 @@
-@import "../mixins";
-
-body {
-    font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
-        sans-serif;
-    font-size: 16px;
-    transition: color var(--landsoul-time), background-color var(--landsoul-time);
-    @include theme-color;
-}
-
-a {
-    color: var(--landsoul-accent);
-    text-decoration: none;
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-h1 {
-    font-size: 2.5rem;
-}
-h2 {
-    font-size: 2.25rem;
-}
-h3 {
-    font-size: 2rem;
-}
-h4 {
-    font-size: 1.75rem;
-}
-h5 {
-    font-size: 1.5rem;
-}
-h6 {
-    font-size: 1.25rem;
-}
-
-a[href^="#"] {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        color: var(--landsoul-text);
-        &::before {
-            content: "#";
-            margin-right: 0.3rem;
-            color: var(--landsoul-accent);
-        }
-    }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    color: inherit;
-    margin: 0;
-    padding: 0;
-    > small {
-        @include bg-radius;
-        margin-left: 0.25rem;
-        padding: 0 0.25rem;
-        font-weight: lighter;
-    }
-}
+@import "../mixins";
+
+body {
+    font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
+        sans-serif;
+    font-size: 16px;
+    transition: color var(--landsoul-time), background-color var(--landsoul-time);
+    @include theme-color;
+}
+
+a {
+    color: var(--landsoul-accent);
+    text-decoration: none;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+h1 {
+    font-size: 2.5rem;
+}
+h2 {
+    font-size: 2.25rem;
+}
+h3 {
+    font-size: 2rem;
+}
+h4 {
+    font-size: 1.75rem;
+}
+h5 {
+    font-size: 1.5rem;
+}
+h6 {
+    font-size: 1.25rem;
+}
+
+a[href^="#"] {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: var(--landsoul-text);
+        &::before {
+            content: "#";
+            margin-right: 0.3rem;
+            color: var(--landsoul-accent);
+        }
+    }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: inherit;
+    margin: 0;
+    padding: 0;
+    > small {
+        @include bg-radius;
+        margin-left: 0.25rem;
+        padding: 0 0.25rem;
+        font-weight: lighter;
+    }
+}

package/src/landsoul/_input.scss

@@ -28,19 +28,19 @@ button,
 input {
     border: none;
     border-radius: var(--landsoul-radius);
-    padding: 0.3em 0.45em;
+    padding: 0.3rem 0.45rem;
 }
 
 input:not([type="checkbox"], [type="radio"], [type="range"]),
 select,
 textarea {
     @include hover-effect;
-    padding: 0.2em 0.3em;
+    padding: 0.2rem 0.3rem;
     border-radius: var(--landsoul-radius);
-    border: var(--landsoul-shadow) solid 0.01em;
+    border: var(--landsoul-shadow) solid 0.01rem;
     &:focus-within {
         outline: none;
-        border: var(--landsoul-text) solid 0.01em;
+        border: var(--landsoul-text) solid 0.01rem;
     }
 }
 

package/src/landsoul/_input_checkbox_radio.scss

@@ -1,73 +1,73 @@
-/**
- * --size: The size of the switch and radio
- */
-input[type="checkbox"],
-input[type="radio"] {
-    --size: 1.25rem;
-    all: unset;
-    display: inline-block;
-    box-sizing: border-box;
-    appearance: none;
-    transition: all var(--landsoul-time);
-    position: relative;
-    height: var(--size);
-    vertical-align: text-bottom;
-    cursor: pointer;
-    opacity: 0.8;
-    &:hover {
-        opacity: 1;
-    }
-}
-
-input[type="checkbox"] {
-    width: calc(var(--size) * 1.75);
-    background: var(--landsoul-shadow);
-    border-radius: 1rem;
-    &::after {
-        content: "";
-        display: inline-block;
-        border-radius: 50%;
-        background: var(--landsoul-bg);
-        transition: all 0.4s;
-        width: calc(var(--size) * 0.8);
-        height: calc(var(--size) * 0.8);
-        position: absolute;
-        left: calc(var(--size) * 0.1);
-        top: calc(var(--size) * 0.1);
-    }
-
-    &:checked {
-        background: var(--landsoul-accent);
-        &::after {
-            content: "";
-            position: absolute;
-            left: 100%;
-            transform: translateX(calc(-100% - calc(var(--size) * 0.1)));
-        }
-    }
-}
-
-input[type="radio"] {
-    width: var(--size);
-    border: solid calc(var(--size) * 0.1) var(--landsoul-shadow);
-    border-radius: 50%;
-    &::after {
-        content: "";
-        opacity: 0;
-        transition: opacity var(--landsoul-time);
-        position: absolute;
-        display: inline-block;
-        border-radius: 50%;
-        background: var(--landsoul-accent);
-        width: calc(var(--size) * 0.6);
-        height: calc(var(--size) * 0.6);
-        top: calc(50%);
-        left: calc(50%);
-        transform: translate(-50%, -50%);
-    }
-    &:checked {
-        &::after {
-            opacity: 1;
-        }
-    }
-}
+/**
+ * --size: The size of the switch and radio
+ */
+input[type="checkbox"],
+input[type="radio"] {
+    --size: 1.25rem;
+    all: unset;
+    display: inline-block;
+    box-sizing: border-box;
+    appearance: none;
+    transition: all var(--landsoul-time);
+    position: relative;
+    height: var(--size);
+    vertical-align: text-bottom;
+    cursor: pointer;
+    opacity: 0.8;
+    &:hover {
+        opacity: 1;
+    }
+}
+
+input[type="checkbox"] {
+    width: calc(var(--size) * 1.75);
+    background: var(--landsoul-shadow);
+    border-radius: 1rem;
+    &::after {
+        content: "";
+        display: inline-block;
+        border-radius: 50%;
+        background: var(--landsoul-bg);
+        transition: all 0.4s;
+        width: calc(var(--size) * 0.8);
+        height: calc(var(--size) * 0.8);
+        position: absolute;
+        left: calc(var(--size) * 0.1);
+        top: calc(var(--size) * 0.1);
+    }
+
+    &:checked {
+        background: var(--landsoul-accent);
+        &::after {
+            content: "";
+            position: absolute;
+            left: 100%;
+            transform: translateX(calc(-100% - calc(var(--size) * 0.1)));
+        }
+    }
+}
+
+input[type="radio"] {
+    width: var(--size);
+    border: solid calc(var(--size) * 0.1) var(--landsoul-shadow);
+    border-radius: 50%;
+    &::after {
+        content: "";
+        opacity: 0;
+        transition: opacity var(--landsoul-time);
+        position: absolute;
+        display: inline-block;
+        border-radius: 50%;
+        background: var(--landsoul-accent);
+        width: calc(var(--size) * 0.6);
+        height: calc(var(--size) * 0.6);
+        top: calc(50%);
+        left: calc(50%);
+        transform: translate(-50%, -50%);
+    }
+    &:checked {
+        &::after {
+            opacity: 1;
+        }
+    }
+}

package/src/landsoul/_input_range.scss

@@ -1,53 +1,53 @@
-@mixin thunb-common {
-    cursor: grab;
-    height: 1rem;
-    width: 1rem;
-    background-color: var(--landsoul-bg);
-    border-radius: 50%;
-    border: solid 0.2rem var(--landsoul-color);
-    transition: transform 0.2s;
-}
-
-@mixin track-common {
-    width: 100%;
-    height: 0.15rem;
-    background-color: var(--landsoul-shadow);
-}
-
-input[type="range"] {
-    // track
-    -webkit-appearance: none; // only for chrome
-    background-color: transparent;
-    vertical-align: baseline;
-    height: 0.3rem;
-    cursor: pointer;
-    border-radius: 1rem;
-
-    &::-webkit-slider-runnable-track {
-        @include track-common;
-        border-radius: 1rem;
-    }
-    &::-webkit-slider-thumb {
-        @include thunb-common;
-        -webkit-appearance: none; // only for chrome
-        transform: translateY(-0.4rem) scale(0.8, 0.8);
-        &:active {
-            transform: translateY(-0.4rem) scale(1, 1);
-        }
-    }
-    &::-moz-range-progress {
-        height: 0.1rem;
-        background-color: var(--landsoul-accent);
-    }
-    &::-moz-range-track {
-        @include track-common;
-    }
-    &::-moz-range-thumb {
-        @include thunb-common;
-        -moz-appearance: none; // only for firefox
-        transform: scale(0.8, 0.8);
-        &:active {
-            transform: scale(1, 1);
-        }
-    }
-}
+@mixin thumb-common {
+    cursor: grab;
+    height: 1rem;
+    width: 1rem;
+    background-color: var(--landsoul-bg);
+    border-radius: 50%;
+    border: solid 0.2rem var(--landsoul-color);
+    transition: transform 0.2s;
+}
+
+@mixin track-common {
+    width: 100%;
+    height: 0.15rem;
+    background-color: var(--landsoul-shadow);
+}
+
+input[type="range"] {
+    // track
+    -webkit-appearance: none; // only for chrome
+    background-color: transparent;
+    vertical-align: baseline;
+    height: 0.3rem;
+    cursor: pointer;
+    border-radius: 1rem;
+
+    &::-webkit-slider-runnable-track {
+        @include track-common;
+        border-radius: 1rem;
+    }
+    &::-webkit-slider-thumb {
+        @include thumb-common;
+        -webkit-appearance: none; // only for chrome
+        transform: translateY(-0.4rem) scale(0.8, 0.8);
+        &:active {
+            transform: translateY(-0.4rem) scale(1, 1);
+        }
+    }
+    &::-moz-range-progress {
+        height: 0.1rem;
+        background-color: var(--landsoul-accent);
+    }
+    &::-moz-range-track {
+        @include track-common;
+    }
+    &::-moz-range-thumb {
+        @include thumb-common;
+        -moz-appearance: none; // only for firefox
+        transform: scale(0.8, 0.8);
+        &:active {
+            transform: scale(1, 1);
+        }
+    }
+}

package/src/landsoul/_others.scss

@@ -2,7 +2,7 @@
 
 hr {
     border: none;
-    border-top: solid 0.15em var(--landsoul-color);
+    border-top: solid 0.15rem var(--landsoul-color);
 }
 
 blockquote {
@@ -25,23 +25,23 @@ samp {
 
 code,
 kbd {
-    padding: 0.05em 0.2em;
+    padding: 0.05rem 0.2rem;
 }
 
 pre {
-    padding: 0.5em 0.75em;
+    padding: 0.5rem 0.75rem;
     box-sizing: border-box;
     max-width: 100%;
     overflow: auto;
 }
 
 kbd {
-    border: solid 0.1em rgba(0, 0, 0, 0.05);
-    border-bottom: solid 0.2em rgba(0, 0, 0, 0.05);
+    border: solid 0.1rem rgba(0, 0, 0, 0.05);
+    border-bottom: solid 0.2rem rgba(0, 0, 0, 0.05);
 }
 
 iframe,
 fieldset {
-    border: solid 0.15em var(--landsoul-color);
+    border: solid 0.15rem var(--landsoul-color);
     border-radius: var(--landsoul-radius);
 }

package/src/landsoul/_progress_meter.scss

@@ -1,24 +1,24 @@
-progress {
-    --height: 0.5em;
-    height: var(--height);
-    line-height: var(--height);
-    background-color: var(--landsoul-shadow); /*IE*/
-    color: var(--landsoul-accent); /*IE*/
-    overflow: hidden;
-    border: none;
-    border-radius: var(--height);
-    &::-moz-progress-bar {
-        background-color: var(--landsoul-accent);
-    }
-    &::-webkit-progress-bar {
-        background-color: var(--landsoul-shadow);
-    }
-    &::-webkit-progress-value {
-        background-color: var(--landsoul-accent);
-    }
-}
-
-::-webkit-meter-bar {
-    background-color: var(--landsoul-shadow);
-    border: none;
-}
+progress {
+    --height: 0.5rem;
+    height: var(--height);
+    line-height: var(--height);
+    background-color: var(--landsoul-shadow); /*IE*/
+    color: var(--landsoul-accent); /*IE*/
+    overflow: hidden;
+    border: none;
+    border-radius: var(--height);
+    &::-moz-progress-bar {
+        background-color: var(--landsoul-accent);
+    }
+    &::-webkit-progress-bar {
+        background-color: var(--landsoul-shadow);
+    }
+    &::-webkit-progress-value {
+        background-color: var(--landsoul-accent);
+    }
+}
+
+::-webkit-meter-bar {
+    background-color: var(--landsoul-shadow);
+    border: none;
+}

package/src/landsoul/_reset.scss

@@ -1,14 +1,10 @@
-body {
-    margin: 0;
-}
-
-a {
-    // for IE
-    background-color: transparent;
-}
-
-progress {
-    width: 8rem;
-    // for chrome
-    vertical-align: baseline;
-}
+a {
+    // for IE
+    background-color: transparent;
+}
+
+progress {
+    width: 8rem;
+    // for chrome
+    vertical-align: baseline;
+}

package/src/landsoul/_table.scss

@@ -1,61 +1,61 @@
-table {
-    display: inline-block;
-    box-sizing: border-box;
-    max-width: 100%;
-    overflow: auto;
-    border-collapse: collapse;
-    border-spacing: 0;
-    caption {
-        padding: 0.5em;
-    }
-    thead,
-    tfoot {
-        th {
-            padding-top: 0.75em;
-            padding-bottom: 0.75em;
-            position: sticky;
-            vertical-align: bottom;
-            background-color: var(--landsoul-shadow);
-        }
-    }
-    thead th {
-        top: 0;
-    }
-    tfoot th {
-        bottom: 0;
-    }
-    tbody {
-        white-space: nowrap;
-        tr {
-            background-color: var(--landsoul-bg);
-            &:nth-child(2n) {
-                background-color: var(--landsoul-shadow);
-            }
-        }
-    }
-    td,
-    th {
-        padding: 0.25em 0.5em;
-    }
-}
-
-// border
-
-table,
-th,
-td {
-    border: 2px solid var(--landsoul-color);
-}
-th,
-td {
-    border-bottom-width: 0;
-}
-
-th:first-child,
-td:first-child {
-    border-left-width: 0;
-}
-th:last-child,
-td:last-child {
-    border-right-width: 0;
-}
+table {
+    display: inline-block;
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow: auto;
+    border-collapse: collapse;
+    border-spacing: 0;
+    caption {
+        padding: 0.5rem;
+    }
+    thead,
+    tfoot {
+        th {
+            padding-top: 0.75rem;
+            padding-bottom: 0.75rem;
+            position: sticky;
+            vertical-align: bottom;
+            background-color: var(--landsoul-shadow);
+        }
+    }
+    thead th {
+        top: 0;
+    }
+    tfoot th {
+        bottom: 0;
+    }
+    tbody {
+        white-space: nowrap;
+        tr {
+            background-color: var(--landsoul-bg);
+            &:nth-child(2n) {
+                background-color: var(--landsoul-shadow);
+            }
+        }
+    }
+    td,
+    th {
+        padding: 0.25rem 0.5rem;
+    }
+}
+
+// border
+
+table,
+th,
+td {
+    border: 2px solid var(--landsoul-color);
+}
+th,
+td {
+    border-bottom-width: 0;
+}
+
+th:first-child,
+td:first-child {
+    border-left-width: 0;
+}
+th:last-child,
+td:last-child {
+    border-right-width: 0;
+}

package/src/landsoul.scss

@@ -1,12 +1,12 @@
-@import "theme";
-@import "landsoul/reset";
-@import "landsoul/global";
-@import "landsoul/input";
-@import "landsoul/input_checkbox_radio";
-@import "landsoul/input_range";
-@import "landsoul/table";
-@import "landsoul/figure";
-@import "landsoul/details";
-@import "landsoul/dialog";
-@import "landsoul/progress_meter";
-@import "landsoul/others";
+@import "theme";
+@import "landsoul/reset";
+@import "landsoul/global";
+@import "landsoul/input";
+@import "landsoul/input_checkbox_radio";
+@import "landsoul/input_range";
+@import "landsoul/table";
+@import "landsoul/figure";
+@import "landsoul/details";
+@import "landsoul/dialog";
+@import "landsoul/progress_meter";
+@import "landsoul/others";