@onereach/styles 0.1.1 → 0.1.3

package/README.md

@@ -1,13 +1,13 @@
 # 💅 Onereach styles for components.
 
 ## 🎯 Install
-```
+```sh
 $ yarn add @onereach/styles
 $ npm install @onereach/styles --save
 ```
 
 ## 🛠️ Develop
-```
+```sh
 $ npm run dev
 ```
 
@@ -15,32 +15,61 @@ $ npm run dev
 ### Don't forget that you need style loaders.
 #### Webpack: https://webpack.js.org/loaders/sass-loader
 ### Global styles:
-```
+```js
 import '@onereach/styles';
-or
+// or
 import '@onereach/styles/src/main.scss';
 ```
 
 ### Components (required: Global Styles):
-```
+```js
 import '@onereach/styles/src/components/(base/modern/etc.)/component-name.scss';
 ```
-#### Vue SFC component. Example:
-```
-<template>
-  <span class="base-icon">
-    <template v-if="icon">{{ icon }}</template>
-    <slot v-else />
-  </span>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default /*#__PURE__*/ Vue.extend({});
+#### Vue SFC
+```vue
+<template>Template</template>
+
+<script>
+// with sass-loader
+// import '@onereach/styles/src/components/base/icon.scss';
+
+export default {};
 </script>
 
 <style lang="scss">
   @import "node_modules/@onereach/styles/src/components/base/icon";
 </style>
 ```
+```js
+// example with js or ts files
+import '@onereach/styles/src/components/base/icon.scss';
+
+export default {
+  name: 'BaseHeading',
+
+  props: {
+    level: {
+      type: [String, Number],
+      default: 1
+    },
+
+    text: String
+  },
+
+  render (h) {
+    return h(
+      `h${this.level}`,
+      {
+        class: [
+          'base-title',
+          `h${this.level}`
+        ],
+        domProps: {
+          innerHTML: this.text
+        }
+      }
+    )
+  }
+}
+```
 

package/dist/index.css

@@ -103,34 +103,34 @@
   --c-black-lighten-20: #333333;
   --c-black-darken-3: black;
   --c-black-darken-5: black;
-  --c-neutral-6: #fff;
-  --c-neutral-6-lighten-20: white;
-  --c-neutral-6-darken-3: #f7f7f7;
-  --c-neutral-6-darken-5: #f2f2f2;
-  --c-neutral-5: #f6f6f6;
-  --c-neutral-5-lighten-20: white;
-  --c-neutral-5-darken-3: #eeeeee;
-  --c-neutral-5-darken-5: #e9e9e9;
-  --c-neutral-4: #dfdfdf;
-  --c-neutral-4-lighten-20: white;
-  --c-neutral-4-darken-3: #d7d7d7;
-  --c-neutral-4-darken-5: #d2d2d2;
+  --c-neutral-0: #fff;
+  --c-neutral-0-lighten-20: white;
+  --c-neutral-0-darken-3: #f7f7f7;
+  --c-neutral-0-darken-5: #f2f2f2;
+  --c-neutral-1: #f6f6f6;
+  --c-neutral-1-lighten-20: white;
+  --c-neutral-1-darken-3: #eeeeee;
+  --c-neutral-1-darken-5: #e9e9e9;
+  --c-neutral-2: #dfdfdf;
+  --c-neutral-2-lighten-20: white;
+  --c-neutral-2-darken-3: #d7d7d7;
+  --c-neutral-2-darken-5: #d2d2d2;
   --c-neutral-3: #c6c6c6;
   --c-neutral-3-lighten-20: #f9f9f9;
   --c-neutral-3-darken-3: #bebebe;
   --c-neutral-3-darken-5: #b9b9b9;
-  --c-neutral-2: #91969d;
-  --c-neutral-2-lighten-20: #c7c9cd;
-  --c-neutral-2-darken-3: #898e96;
-  --c-neutral-2-darken-5: #848991;
-  --c-neutral-1: #6c747d;
-  --c-neutral-1-lighten-20: #a1a7ae;
-  --c-neutral-1-darken-3: #656c75;
-  --c-neutral-1-darken-5: #60676f;
-  --c-neutral-0: #1e232b;
-  --c-neutral-0-lighten-20: #485467;
-  --c-neutral-0-darken-3: #181c22;
-  --c-neutral-0-darken-5: #14171c;
+  --c-neutral-4: #91969d;
+  --c-neutral-4-lighten-20: #c7c9cd;
+  --c-neutral-4-darken-3: #898e96;
+  --c-neutral-4-darken-5: #848991;
+  --c-neutral-5: #6c747d;
+  --c-neutral-5-lighten-20: #a1a7ae;
+  --c-neutral-5-darken-3: #656c75;
+  --c-neutral-5-darken-5: #60676f;
+  --c-neutral-6: #1e232b;
+  --c-neutral-6-lighten-20: #485467;
+  --c-neutral-6-darken-3: #181c22;
+  --c-neutral-6-darken-5: #14171c;
 }
 
 html,
@@ -306,6 +306,10 @@ body {
   background-color: var(--c-body-bg);
 }
 
+fieldset {
+  border: none;
+}
+
 a {
   text-decoration: none;
 }
@@ -317,6 +321,24 @@ pre {
   font-family: monospace;
 }
 
+pre {
+  -webkit-overflow-scrolling: touch;
+  padding: 1rem;
+  overflow-x: auto;
+  font-size: inherit;
+  color: var(--c-text);
+  text-align: left;
+  word-wrap: normal;
+  white-space: pre-wrap;
+  background-color: var(--c-neutral-2);
+}
+pre code {
+  padding: 0;
+  font-size: 0.75rem;
+  color: currentColor;
+  background-color: transparent;
+}
+
 input[type=checkbox],
 input[type=radio] {
   vertical-align: baseline;

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/variables/_css-vars.scss","index.css","../src/base/_reset.scss","../src/base/_generic.scss","../src/base/_v-transitions.scss","../src/base/_animation.scss"],"names":[],"mappings":"AAII;;EAGI,oBAAA;EACA,+BAAA;EACA,6BAAA;EACA,6BAAA;EAHA,kBAAA;EACA,6BAAA;EACA,2BAAA;EACA,2BAAA;EAHA,oBAAA;EACA,+BAAA;EACA,6BAAA;EACA,6BAAA;EAHA,oBAAA;EACA,+BAAA;EACA,6BAAA;EACA,6BAAA;EAHA,iBAAA;EACA,4BAAA;EACA,0BAAA;EACA,0BAAA;EAHA,iBAAA;EACA,4BAAA;EACA,0BAAA;EACA,0BAAA;EAHA,iBAAA;EACA,6BAAA;EACA,6BAAA;EACA,6BAAA;EAHA,eAAA;EACA,2BAAA;EACA,2BAAA;EACA,2BAAA;EAHA,eAAA;EACA,6BAAA;EACA,yBAAA;EACA,yBAAA;EAHA,mBAAA;EACA,+BAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,iCAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,iCAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,iCAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,iCAAA;EACA,+BAAA;EACA,+BAAA;ACwDR;;ADlDI;EAEI,oBAAA;EACA,+BAAA;EACA,6BAAA;EACA,6BAAA;EAHA,kBAAA;EACA,6BAAA;EACA,2BAAA;EACA,2BAAA;EAHA,oBAAA;EACA,+BAAA;EACA,6BAAA;EACA,6BAAA;EAHA,oBAAA;EACA,+BAAA;EACA,6BAAA;EACA,6BAAA;EAHA,iBAAA;EACA,4BAAA;EACA,0BAAA;EACA,0BAAA;EAHA,mBAAA;EACA,8BAAA;EACA,4BAAA;EACA,4BAAA;EAHA,mBAAA;EACA,+BAAA;EACA,+BAAA;EACA,+BAAA;EAHA,eAAA;EACA,2BAAA;EACA,2BAAA;EACA,2BAAA;EAHA,eAAA;EACA,6BAAA;EACA,yBAAA;EACA,yBAAA;EAHA,mBAAA;EACA,+BAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,+BAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,iCAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,iCAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,iCAAA;EACA,+BAAA;EACA,+BAAA;EAHA,sBAAA;EACA,iCAAA;EACA,+BAAA;EACA,+BAAA;ACgHR;;ACrIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EE,UAAA;EACA,SAAA;EACA,wBAAA;EACA,SAAA;ADwIF;;ACrIA,yCAAA;AACA;;;;;;;;;EASE,yEAAA;EACA,+BAAA;ADwIF;;ACrIA;;;EAGE,sBAAA;ADwIF;;ACrIA;;;;;;;;;;;EAWE,cAAA;ADwIF;;ACrIA;;EAEE,wCAAA;ADwIF;;ACrIA;;EAEE,YAAA;ADwIF;;ACrIA;;;;EAIE,aAAA;ADwIF;;ACrIA;EACE,iBAAA;EACA,yBAAA;ADwIF;;ACrIA;;EAEE,gBAAA;ADwIF;;ACrIA;EACE,QAAA;ADwIF;;AEpRA;EACE,kCAAA;EACA,mCAAA;EACA,kCAAA;EACA,eAAA;EACA,8BAAA;KAAA,2BAAA;UAAA,sBAAA;AFuRF;;AEpRA;EACE,kBAAA;EACA,gBAAA;EACA,yBAAA;MAAA,yBAAA;EACA,0IAnBiB;EAoBjB,mBAnBe;EAoBf,gBAnBiB;EAoBjB,sBAnBiB;EAoBjB,oBAnBW;EAoBX,kCAnBc;AF0ShB;;AEpRA;EACE,qBAAA;AFuRF;;AEpRA;;EAEE,4CAAA;EACA,6BAAA;EACA,sBAAA;AFuRF;;AEpRA;;EAEE,wBAAA;AFuRF;;AG5TE;EAEE,6DAAA;AH8TJ;AG3TE;EAEE,UAAA;AH4TJ;;AItUA;EACE;IACE,oBAAA;EJyUF;EItUA;IACE,yBAAA;EJwUF;AACF;;AI/UA;EACE;IACE,oBAAA;EJyUF;EItUA;IACE,yBAAA;EJwUF;AACF;AIrUA;EACE;IACE,UAAA;EJuUF;EIpUA;IACE,UAAA;EJsUF;AACF;AI7UA;EACE;IACE,UAAA;EJuUF;EIpUA;IACE,UAAA;EJsUF;AACF","file":"index.css"}
+{"version":3,"sources":["../src/variables/_css-vars.scss","index.css","../src/base/_reset.scss","../src/base/_generic.scss","../src/utils/mixins/_overflow-touch.scss","../src/base/_v-transitions.scss","../src/base/_animation.scss"],"names":[],"mappings":"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","file":"index.css"}

package/dist/index.min.css

@@ -1 +1 @@
-:root,[data-theme=light]{--c-primary:#178ae7;--c-primary-lighten-20:#73b9f1;--c-primary-darken-3:#1682d9;--c-primary-darken-5:#157cd0;--c-error:#da1e28;--c-error-lighten-20:#ec7279;--c-error-darken-3:#cd1c26;--c-error-darken-5:#c41b24;--c-warning:#f0d10d;--c-warning-lighten-20:#f7e46c;--c-warning-darken-3:#e1c40c;--c-warning-darken-5:#d8bc0c;--c-success:#4ec00f;--c-success-lighten-20:#82f045;--c-success-darken-3:#48b20e;--c-success-darken-5:#44a80d;--c-grey:#91969d;--c-grey-lighten-20:#c7c9cd;--c-grey-darken-3:#898e96;--c-grey-darken-5:#848991;--c-text:#1e232b;--c-text-lighten-20:#485467;--c-text-darken-3:#181c22;--c-text-darken-5:#14171c;--c-body-bg:#fff;--c-body-bg-lighten-20:white;--c-body-bg-darken-3:#f7f7f7;--c-body-bg-darken-5:#f2f2f2;--c-white:#fff;--c-white-lighten-20:white;--c-white-darken-3:#f7f7f7;--c-white-darken-5:#f2f2f2;--c-black:#000;--c-black-lighten-20:#333333;--c-black-darken-3:black;--c-black-darken-5:black;--c-neutral-0:#fff;--c-neutral-0-lighten-20:white;--c-neutral-0-darken-3:#f7f7f7;--c-neutral-0-darken-5:#f2f2f2;--c-neutral-1:#f6f6f6;--c-neutral-1-lighten-20:white;--c-neutral-1-darken-3:#eeeeee;--c-neutral-1-darken-5:#e9e9e9;--c-neutral-2:#dfdfdf;--c-neutral-2-lighten-20:white;--c-neutral-2-darken-3:#d7d7d7;--c-neutral-2-darken-5:#d2d2d2;--c-neutral-3:#c6c6c6;--c-neutral-3-lighten-20:#f9f9f9;--c-neutral-3-darken-3:#bebebe;--c-neutral-3-darken-5:#b9b9b9;--c-neutral-4:#91969d;--c-neutral-4-lighten-20:#c7c9cd;--c-neutral-4-darken-3:#898e96;--c-neutral-4-darken-5:#848991;--c-neutral-5:#6c747d;--c-neutral-5-lighten-20:#a1a7ae;--c-neutral-5-darken-3:#656c75;--c-neutral-5-darken-5:#60676f;--c-neutral-6:#1e232b;--c-neutral-6-lighten-20:#485467;--c-neutral-6-darken-3:#181c22;--c-neutral-6-darken-5:#14171c}[data-theme=dark]{--c-primary:#178ae7;--c-primary-lighten-20:#73b9f1;--c-primary-darken-3:#1682d9;--c-primary-darken-5:#157cd0;--c-error:#da1e28;--c-error-lighten-20:#ec7279;--c-error-darken-3:#cd1c26;--c-error-darken-5:#c41b24;--c-warning:#f0d10d;--c-warning-lighten-20:#f7e46c;--c-warning-darken-3:#e1c40c;--c-warning-darken-5:#d8bc0c;--c-success:#4ec00f;--c-success-lighten-20:#82f045;--c-success-darken-3:#48b20e;--c-success-darken-5:#44a80d;--c-grey:#91969d;--c-grey-lighten-20:#c7c9cd;--c-grey-darken-3:#898e96;--c-grey-darken-5:#848991;--c-c-text:#1e232b;--c-c-text-lighten-20:#485467;--c-c-text-darken-3:#181c22;--c-c-text-darken-5:#14171c;--c-c-body-bg:#fff;--c-c-body-bg-lighten-20:white;--c-c-body-bg-darken-3:#f7f7f7;--c-c-body-bg-darken-5:#f2f2f2;--c-white:#fff;--c-white-lighten-20:white;--c-white-darken-3:#f7f7f7;--c-white-darken-5:#f2f2f2;--c-black:#000;--c-black-lighten-20:#333333;--c-black-darken-3:black;--c-black-darken-5:black;--c-neutral-6:#fff;--c-neutral-6-lighten-20:white;--c-neutral-6-darken-3:#f7f7f7;--c-neutral-6-darken-5:#f2f2f2;--c-neutral-5:#f6f6f6;--c-neutral-5-lighten-20:white;--c-neutral-5-darken-3:#eeeeee;--c-neutral-5-darken-5:#e9e9e9;--c-neutral-4:#dfdfdf;--c-neutral-4-lighten-20:white;--c-neutral-4-darken-3:#d7d7d7;--c-neutral-4-darken-5:#d2d2d2;--c-neutral-3:#c6c6c6;--c-neutral-3-lighten-20:#f9f9f9;--c-neutral-3-darken-3:#bebebe;--c-neutral-3-darken-5:#b9b9b9;--c-neutral-2:#91969d;--c-neutral-2-lighten-20:#c7c9cd;--c-neutral-2-darken-3:#898e96;--c-neutral-2-darken-5:#848991;--c-neutral-1:#6c747d;--c-neutral-1-lighten-20:#a1a7ae;--c-neutral-1-darken-3:#656c75;--c-neutral-1-darken-5:#60676f;--c-neutral-0:#1e232b;--c-neutral-0-lighten-20:#485467;--c-neutral-0-darken-3:#181c22;--c-neutral-0-darken-5:#14171c}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,summary,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{padding:0;margin:0;vertical-align:baseline;border:0}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,select:-webkit-autofill,select:-webkit-autofill:focus,select:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{-webkit-transition:color 9999s ease-out,background-color 9999s ease-out;-webkit-transition-delay:9999s}*,::after,::before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{-webkit-tap-highlight-color:transparent}blockquote,q{quotes:none}blockquote::after,blockquote::before,q::after,q::before{content:none}table{border-spacing:0;border-collapse:collapse}input,textarea{border-radius:0}input::-ms-clear{width:0}html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{overflow-x:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:.875rem;font-weight:400;line-height:1.3125rem;color:var(--c-text);background-color:var(--c-body-bg)}a{text-decoration:none}code,pre{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-family:monospace}input[type=checkbox],input[type=radio]{vertical-align:baseline}.fade-enter-active,.fade-leave-active{transition:opacity .25s cubic-bezier(.12, .39, .5, .93)}.fade-enter,.fade-leave-to{opacity:0}@-webkit-keyframes spinAround{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes spinAround{from{transform:rotate(0)}to{transform:rotate(359deg)}}@-webkit-keyframes fade{from{opacity:1}to{opacity:0}}@keyframes fade{from{opacity:1}to{opacity:0}}
+:root,[data-theme=light]{--c-primary:#178ae7;--c-primary-lighten-20:#73b9f1;--c-primary-darken-3:#1682d9;--c-primary-darken-5:#157cd0;--c-error:#da1e28;--c-error-lighten-20:#ec7279;--c-error-darken-3:#cd1c26;--c-error-darken-5:#c41b24;--c-warning:#f0d10d;--c-warning-lighten-20:#f7e46c;--c-warning-darken-3:#e1c40c;--c-warning-darken-5:#d8bc0c;--c-success:#4ec00f;--c-success-lighten-20:#82f045;--c-success-darken-3:#48b20e;--c-success-darken-5:#44a80d;--c-grey:#91969d;--c-grey-lighten-20:#c7c9cd;--c-grey-darken-3:#898e96;--c-grey-darken-5:#848991;--c-text:#1e232b;--c-text-lighten-20:#485467;--c-text-darken-3:#181c22;--c-text-darken-5:#14171c;--c-body-bg:#fff;--c-body-bg-lighten-20:white;--c-body-bg-darken-3:#f7f7f7;--c-body-bg-darken-5:#f2f2f2;--c-white:#fff;--c-white-lighten-20:white;--c-white-darken-3:#f7f7f7;--c-white-darken-5:#f2f2f2;--c-black:#000;--c-black-lighten-20:#333333;--c-black-darken-3:black;--c-black-darken-5:black;--c-neutral-0:#fff;--c-neutral-0-lighten-20:white;--c-neutral-0-darken-3:#f7f7f7;--c-neutral-0-darken-5:#f2f2f2;--c-neutral-1:#f6f6f6;--c-neutral-1-lighten-20:white;--c-neutral-1-darken-3:#eeeeee;--c-neutral-1-darken-5:#e9e9e9;--c-neutral-2:#dfdfdf;--c-neutral-2-lighten-20:white;--c-neutral-2-darken-3:#d7d7d7;--c-neutral-2-darken-5:#d2d2d2;--c-neutral-3:#c6c6c6;--c-neutral-3-lighten-20:#f9f9f9;--c-neutral-3-darken-3:#bebebe;--c-neutral-3-darken-5:#b9b9b9;--c-neutral-4:#91969d;--c-neutral-4-lighten-20:#c7c9cd;--c-neutral-4-darken-3:#898e96;--c-neutral-4-darken-5:#848991;--c-neutral-5:#6c747d;--c-neutral-5-lighten-20:#a1a7ae;--c-neutral-5-darken-3:#656c75;--c-neutral-5-darken-5:#60676f;--c-neutral-6:#1e232b;--c-neutral-6-lighten-20:#485467;--c-neutral-6-darken-3:#181c22;--c-neutral-6-darken-5:#14171c}[data-theme=dark]{--c-primary:#178ae7;--c-primary-lighten-20:#73b9f1;--c-primary-darken-3:#1682d9;--c-primary-darken-5:#157cd0;--c-error:#da1e28;--c-error-lighten-20:#ec7279;--c-error-darken-3:#cd1c26;--c-error-darken-5:#c41b24;--c-warning:#f0d10d;--c-warning-lighten-20:#f7e46c;--c-warning-darken-3:#e1c40c;--c-warning-darken-5:#d8bc0c;--c-success:#4ec00f;--c-success-lighten-20:#82f045;--c-success-darken-3:#48b20e;--c-success-darken-5:#44a80d;--c-grey:#91969d;--c-grey-lighten-20:#c7c9cd;--c-grey-darken-3:#898e96;--c-grey-darken-5:#848991;--c-c-text:#1e232b;--c-c-text-lighten-20:#485467;--c-c-text-darken-3:#181c22;--c-c-text-darken-5:#14171c;--c-c-body-bg:#fff;--c-c-body-bg-lighten-20:white;--c-c-body-bg-darken-3:#f7f7f7;--c-c-body-bg-darken-5:#f2f2f2;--c-white:#fff;--c-white-lighten-20:white;--c-white-darken-3:#f7f7f7;--c-white-darken-5:#f2f2f2;--c-black:#000;--c-black-lighten-20:#333333;--c-black-darken-3:black;--c-black-darken-5:black;--c-neutral-0:#fff;--c-neutral-0-lighten-20:white;--c-neutral-0-darken-3:#f7f7f7;--c-neutral-0-darken-5:#f2f2f2;--c-neutral-1:#f6f6f6;--c-neutral-1-lighten-20:white;--c-neutral-1-darken-3:#eeeeee;--c-neutral-1-darken-5:#e9e9e9;--c-neutral-2:#dfdfdf;--c-neutral-2-lighten-20:white;--c-neutral-2-darken-3:#d7d7d7;--c-neutral-2-darken-5:#d2d2d2;--c-neutral-3:#c6c6c6;--c-neutral-3-lighten-20:#f9f9f9;--c-neutral-3-darken-3:#bebebe;--c-neutral-3-darken-5:#b9b9b9;--c-neutral-4:#91969d;--c-neutral-4-lighten-20:#c7c9cd;--c-neutral-4-darken-3:#898e96;--c-neutral-4-darken-5:#848991;--c-neutral-5:#6c747d;--c-neutral-5-lighten-20:#a1a7ae;--c-neutral-5-darken-3:#656c75;--c-neutral-5-darken-5:#60676f;--c-neutral-6:#1e232b;--c-neutral-6-lighten-20:#485467;--c-neutral-6-darken-3:#181c22;--c-neutral-6-darken-5:#14171c}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,summary,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{padding:0;margin:0;vertical-align:baseline;border:0}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,select:-webkit-autofill,select:-webkit-autofill:focus,select:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{-webkit-transition:color 9999s ease-out,background-color 9999s ease-out;-webkit-transition-delay:9999s}*,::after,::before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{-webkit-tap-highlight-color:transparent}blockquote,q{quotes:none}blockquote::after,blockquote::before,q::after,q::before{content:none}table{border-spacing:0;border-collapse:collapse}input,textarea{border-radius:0}input::-ms-clear{width:0}html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{overflow-x:hidden;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:.875rem;font-weight:400;line-height:1.3125rem;color:var(--c-text);background-color:var(--c-body-bg)}fieldset{border:none}a{text-decoration:none}code,pre{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;font-family:monospace}pre{-webkit-overflow-scrolling:touch;padding:1rem;overflow-x:auto;font-size:inherit;color:var(--c-text);text-align:left;word-wrap:normal;white-space:pre-wrap;background-color:var(--c-neutral-2)}pre code{padding:0;font-size:.75rem;color:currentColor;background-color:transparent}input[type=checkbox],input[type=radio]{vertical-align:baseline}.fade-enter-active,.fade-leave-active{transition:opacity .25s cubic-bezier(.12, .39, .5, .93)}.fade-enter,.fade-leave-to{opacity:0}@-webkit-keyframes spinAround{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes spinAround{from{transform:rotate(0)}to{transform:rotate(359deg)}}@-webkit-keyframes fade{from{opacity:1}to{opacity:0}}@keyframes fade{from{opacity:1}to{opacity:0}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Styles for or-ui components",
   "main": "./dist/index.min.css",
   "unpkg": "./dist/index.css",
@@ -41,5 +41,5 @@
     "sass": "^1.35.1",
     "stylelint": "^13.13.1"
   },
-  "gitHead": "4ed4fba5968eeb9cdcb50ab829a5d3158cd2848b"
+  "gitHead": "74e91e4d630b99224b429fa4091cfe6b1ebeafd8"
 }

package/src/base/_generic.scss

@@ -5,6 +5,9 @@ $body-line-height: get-line-height(1) !default;
 $body-color: var(--c-text) !default;
 $body-bg-color: var(--c-body-bg) !default;
 
+$pre-bg: var(--c-neutral-2) !default;
+$pre-color: var(--c-text) !default;
+
 html {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -25,6 +28,10 @@ body {
   background-color: $body-bg-color;
 }
 
+fieldset {
+  border: none;
+}
+
 a {
   text-decoration: none;
 }
@@ -36,6 +43,26 @@ pre {
   font-family: monospace;
 }
 
+pre {
+  @include overflow-touch;
+
+  padding: get-spacing(4);
+  overflow-x: auto;
+  font-size: inherit; // $pre-font-size
+  color: $pre-color;
+  text-align: left;
+  word-wrap: normal;
+  white-space: pre-wrap;
+  background-color: $pre-bg;
+
+  code {
+    padding: 0;
+    font-size: get-font-size();
+    color: currentColor;
+    background-color: transparent;
+  }
+}
+
 input[type="checkbox"],
 input[type="radio"] {
   vertical-align: baseline;

package/src/components/base/_button.scss

@@ -1,5 +1,7 @@
 @import "../../utils";
 
+$btn-prefix: base !default;
+
 $btn-min-width: px-to-rem(96) !default;
 $btn-padding: get-spacing(2) get-spacing(4) !default;
 $btn-cursor: pointer !default;
@@ -38,7 +40,7 @@ $btn-types: (outline, text, icon);
       background-color: var(--btn-#{$key}-bg-color);
       border-color: var(--c-#{$key});
 
-      .base-button {
+      .#{$btn-prefix}-button {
         &--loader {
           &::after {
             border-color: var(--btn-#{$key}-color);
@@ -56,8 +58,12 @@ $btn-types: (outline, text, icon);
         border-color: var(--btn-#{$key}-darken-5);
       }
 
-      &:disabled,
-      &.is-loading {
+      @include disabled {
+        background-color: var(--btn-#{$key}-lighten-20);
+        border-color: var(--btn-#{$key}-lighten-20);
+      }
+
+      @include loading {
         background-color: var(--btn-#{$key}-lighten-20);
         border-color: var(--btn-#{$key}-lighten-20);
       }
@@ -70,7 +76,7 @@ $btn-types: (outline, text, icon);
     background-color: transparent;
     box-shadow: none;
 
-    .base-button {
+    .#{$btn-prefix}-button {
       &--loader {
         &::after {
           border-color: inherit;
@@ -88,7 +94,7 @@ $btn-types: (outline, text, icon);
         color: var(--btn-#{$key}-color);
         border-color: var(--btn-#{$key}-color);
 
-        .base-button {
+        .#{$btn-prefix}-button {
           &--loader {
             &::after {
               border-color: var(--btn-#{$key}-lighten-20);
@@ -108,8 +114,13 @@ $btn-types: (outline, text, icon);
           border-color: var(--btn-#{$key}-darken-5);
         }
 
-        &:disabled,
-        &.is-loading {
+        @include disabled {
+          color: var(--btn-#{$key}-lighten-20);
+          background-color: transparent;
+          border-color: var(--btn-#{$key}-lighten-20);
+        }
+
+        @include loading {
           color: var(--btn-#{$key}-lighten-20);
           background-color: transparent;
           border-color: var(--btn-#{$key}-lighten-20);
@@ -126,7 +137,7 @@ $btn-types: (outline, text, icon);
       box-shadow: $btn-box-shadow-second;
     }
 
-    &.is-loading {
+    @include loading {
       box-shadow: $btn-box-shadow-second;
     }
   }
@@ -163,34 +174,18 @@ $btn-types: (outline, text, icon);
           border-color: transparent;
         }
 
-        &:disabled,
-        &.is-loading {
+        @include disabled {
           color: var(--btn-#{$key}-lighten-20);
           background-color: transparent;
           border-color: transparent;
         }
-      }
-    }
-  }
-}
 
-@mixin is-loading() {
-  &.is-loading {
-    cursor: progress !important;
-
-    .base-button {
-      &--loader {
-        visibility: visible;
-        opacity: 1;
-
-        &::after {
-          animation-play-state: running;
+        @include loading {
+          color: var(--btn-#{$key}-lighten-20);
+          background-color: transparent;
+          border-color: transparent;
         }
       }
-
-      &--content {
-        opacity: 0;
-      }
     }
   }
 }
@@ -201,7 +196,7 @@ $btn-types: (outline, text, icon);
   }
 }
 
-.base-button {
+.#{$btn-prefix}-button {
   -moz-appearance: none;
   -webkit-appearance: none;
   position: relative;
@@ -224,7 +219,7 @@ $btn-types: (outline, text, icon);
   transition-duration: $btn-transition-time;
   transition-property: color, background-color, box-shadow, border-color;
 
-  .base-icon {
+  .material-icons {
     font-size: $btn-icon-font-size;
   }
 
@@ -271,7 +266,7 @@ $btn-types: (outline, text, icon);
     font-size: calc(#{$btn-font-size} - #{px-to-rem(2)});
     line-height: 1;
 
-    .base-icon {
+    .material-icons {
       font-size: $btn-icon-font-size;
     }
   }
@@ -279,12 +274,26 @@ $btn-types: (outline, text, icon);
   @include default-color-mixin;
   @include outline-type;
   @include text-type;
-  @include is-loading;
   @include is-fullwidth;
 
-  // disabled styles for all btn-types
-  &:disabled {
-    cursor: not-allowed;
+  @include loading {
+    .#{$btn-prefix}-button {
+      &--loader {
+        visibility: visible;
+        opacity: 1;
+
+        &::after {
+          animation-play-state: running;
+        }
+      }
+
+      &--content {
+        opacity: 0;
+      }
+    }
+  }
+
+  @include disabled {
     box-shadow: none;
   }
 }

package/src/components/base/_checkbox.scss

@@ -0,0 +1,122 @@
+@import "../../utils";
+
+$checkbox-prefix: quote(base) !default;
+
+$checkbox-size: px-to-rem(16) !default;
+$checkbox-transition-func: get-transition-func() !default;
+$checkbox-transition-time: get-transition-time() !default;
+$checkbox-border-radius: px-to-rem(2) !default;
+$checkbox-border-width: px-to-rem(1) !default;
+$checkbox-border-color: var(--c-neutral-2) !default;
+$checkbox-border-color-hover: var(--c-neutral-2-darken-3) !default;
+$checkbox-border-color-active: var(--c-neutral-2-darken-5) !default;
+$checkbox-bg-color: var(--c-white) !default;
+$checkbox-text-color: inherit !default;
+$checkbox-font-size: inherit !default;
+$checkbox-line-height: inherit !default;
+$checkbox-content-spacing: get-spacing(3) !default;
+
+// checked
+$checkbox-icon-color-checked: var(--c-white) !default;
+$checkbox-border-color-checked: var(--c-primary) !default;
+$checkbox-border-color-checked-hover: var(--c-primary-darken-3) !default;
+$checkbox-border-color-checked-active: var(--c-primary-darken-5) !default;
+$checkbox-bg-color-checked: var(--c-primary) !default;
+$checkbox-bg-color-checked-hover: var(--c-primary-darken-3) !default;
+$checkbox-bg-color-checked-active: var(--c-primary-darken-5) !default;
+$checkbox-bg-color-checked-disabled: var(--c-primary-lighten-20) !default;
+
+@mixin is-checked () {
+  &.is-checked {
+    .#{$checkbox-prefix}-checkbox {
+      &--checkbox {
+        background-color: $checkbox-bg-color-checked;
+        border-color: $checkbox-border-color-checked;
+      }
+    }
+
+    @include hover {
+      .#{$checkbox-prefix}-checkbox {
+        &--checkbox {
+          background-color: $checkbox-bg-color-checked-hover;
+          border-color: $checkbox-border-color-checked-hover;
+        }
+      }
+    }
+
+    @include active {
+      .#{$checkbox-prefix}-checkbox {
+        &--checkbox {
+          background-color: $checkbox-bg-color-checked-active;
+          border-color: $checkbox-border-color-checked-active;
+        }
+      }
+    }
+
+    @include disabled {
+      .#{$checkbox-prefix}-checkbox {
+        &--checkbox {
+          background-color: $checkbox-bg-color-checked-disabled;
+          border-color: $checkbox-bg-color-checked-disabled;
+        }
+      }
+    }
+  }
+}
+
+.#{$checkbox-prefix}-checkbox {
+  display: inline-flex;
+  align-items: center;
+  font-size: $checkbox-font-size;
+  line-height: $checkbox-size;
+  color: $checkbox-text-color;
+  cursor: pointer;
+
+  &--input {
+    @include visually-hidden;
+  }
+
+  &--checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $checkbox-size;
+    min-width: $checkbox-size;
+    height: $checkbox-size;
+    min-height: $checkbox-size;
+    margin-right: $checkbox-content-spacing;
+    background-color: $checkbox-bg-color;
+    border: $checkbox-border-width solid $checkbox-border-color;
+    border-radius: $checkbox-border-radius;
+    transition-timing-function: $checkbox-transition-func;
+    transition-duration: $checkbox-transition-time;
+    transition-property: background-color, border-color;
+  }
+
+  &--icon {
+    font-size: $checkbox-size;
+    color: $checkbox-icon-color-checked;
+    transition-timing-function: $checkbox-transition-func;
+    transition-duration: $checkbox-transition-time;
+    transition-property: color;
+  }
+
+  @include hover {
+    .#{$checkbox-prefix}-checkbox {
+      &--checkbox {
+        border-color: $checkbox-border-color-hover;
+      }
+    }
+  }
+
+  @include active {
+    .#{$checkbox-prefix}-checkbox {
+      &--checkbox {
+        border-color: $checkbox-border-color-active;
+      }
+    }
+  }
+
+  @include disabled;
+  @include is-checked;
+}

package/src/components/base/_icon.scss

@@ -1,10 +1,11 @@
 @use "../../utils/functions" as *;
 @use "../../utils/mixins" as *;
 
+$icon-prefix: base !default;
 $icon-size: px-to-rem(20) !default;
 $icon-color: inherit !default;
 
-.base-icon {
+.#{$icon-prefix}-icon {
   display: inline-flex;
   font-size: $icon-size;
   color: $icon-color;

package/src/components/base/_loader.scss

@@ -2,6 +2,7 @@
 @use "../../utils/mixins" as *;
 @use "../../base/animation" as *;
 
+$loader-prefix: base !default;
 $loader-width: px-to-rem(24) !default;
 $loader-height: $loader-width !default;
 $loader-border-width: 2px !default;
@@ -39,7 +40,7 @@ $loader-border-color: inherit;
   }
 }
 
-.base-loader {
+.#{$loader-prefix}-loader {
   position: relative;
   display: inline-flex;
   align-items: center;

package/src/components/base/_radio-group.scss

@@ -0,0 +1,32 @@
+@import "../../utils";
+
+$radio-group-prefix: base !default;
+$radio-group-column-mb: get-spacing(4) !default;
+$radio-group-row-mr: get-spacing(4) !default;
+
+.#{$radio-group-prefix}-radio-group {
+  &.is-column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    > * {
+      &:not(:last-child) {
+        margin-bottom: $radio-group-column-mb;
+      }
+    }
+  }
+
+  &.is-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    > * {
+      &:not(:last-child) {
+        margin-right: $radio-group-row-mr;
+      }
+    }
+  }
+}

package/src/components/base/_radio.scss

@@ -0,0 +1,125 @@
+@import "../../utils";
+
+$radio-prefix: base !default;
+$radio-icon-size: px-to-rem(16) !default;
+
+$radio-dot-size: $radio-icon-size - px-to-rem(12) !default;
+$radio-dot-bg: var(--c-white) !default;
+
+$radio-icon-radius: 9999px;
+
+$radio-icon-border-width: px-to-rem(1) !default;
+$radio-icon-border-color: var(--c-neutral-2) !default;
+$radio-icon-border-color-hover: var(--c-neutral-2-darken-3) !default;
+$radio-icon-border-color-active: var(--c-neutral-2-darken-5) !default;
+
+$radio-icon-bg: var(--c-white) !default;
+$radio-icon-bg-hover: var(--c-white-darken-3) !default;
+$radio-icon-bg-active: var(--c-white-darken-5) !default;
+$radio-icon-bg-checked: var(--c-primary) !default;
+
+$radio-content-spacing: get-spacing(3) !default;
+$radio-content-color: var(--c-neutral-6) !default;
+$radio-content-color-disabled: var(--c-neutral-4) !default;
+
+$radio-transition-func: get-transition-func() !default;
+$radio-transition-time: get-transition-time() !default;
+
+@mixin is-checked() {
+  &.is-checked {
+    .#{$radio-prefix}-radio {
+      &--radio {
+        background-color: $radio-icon-bg-checked;
+        border-color: $radio-icon-bg-checked;
+
+        &::after {
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+    }
+  }
+}
+
+.#{$radio-prefix}-radio {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  &--input {
+    @include visually-hidden;
+  }
+
+  &--radio {
+    position: relative;
+    width: $radio-icon-size;
+    min-width: $radio-icon-size;
+    height: $radio-icon-size;
+    min-height: $radio-icon-size;
+    margin-right: $radio-content-spacing;
+    background-color: $radio-icon-bg;
+    border: $radio-icon-border-width solid $radio-icon-border-color;
+    border-radius: $radio-icon-radius;
+    transition-timing-function: $radio-transition-func;
+    transition-duration: $radio-transition-time;
+    transition-property: border-color, background-color, opacity;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: $radio-dot-size;
+      height: $radio-dot-size;
+      content: '';
+      background-color: $radio-dot-bg;
+      border-radius: inherit;
+      transition-delay: 0.15s;
+      transition-timing-function: $radio-transition-func;
+      transition-duration: $radio-transition-time;
+      transition-property: transform;
+      transform: translate(-50%, -50%) scale(0);
+    }
+  }
+
+  &--content {
+    color: $radio-content-color;
+    transition-timing-function: $radio-transition-func;
+    transition-duration: $radio-transition-time;
+    transition-property: color;
+  }
+
+  @include is-checked;
+
+  @include hover {
+    &:not(.is-checked) {
+      .#{$radio-prefix}-radio {
+        &--radio {
+          background-color: $radio-icon-bg-hover;
+          border-color: $radio-icon-border-color-hover;
+        }
+      }
+    }
+  }
+
+  @include active {
+    &:not(.is-checked) {
+      .#{$radio-prefix}-radio {
+        &--radio {
+          background-color: $radio-icon-bg-active;
+          border-color: $radio-icon-border-color-active;
+        }
+      }
+    }
+  }
+
+  @include disabled {
+    .#{$radio-prefix}-radio {
+      &--radio {
+        opacity: 0.5;
+      }
+
+      &--content {
+        color: $radio-content-color-disabled;
+      }
+    }
+  }
+}

package/src/components/base/_switch.scss

@@ -0,0 +1,170 @@
+@import "../../utils";
+
+// base
+$switch-prefix: base !default;
+$switch-transition-func: get-transition-func() !default;
+$switch-transition-time: get-transition-time() !default;
+
+// layer
+$switch-layer-width: px-to-rem(34) !default;
+$switch-layer-height: px-to-rem(14) !default;
+$switch-layer-border-radius: 9999px !default;
+
+$switch-layer-bg: var(--c-neutral-2) !default;
+$switch-layer-bg-hover: var(--c-neutral-2-darken-3) !default;
+$switch-layer-bg-active: var(--c-neutral-2-darken-5) !default;
+
+$switch-layer-bg-checked: var(--c-primary) !default;
+$switch-layer-bg-checked-hover: var(--c-primary-darken-3) !default;
+$switch-layer-bg-checked-active: var(--c-primary-darken-5) !default;
+$switch-layer-bg-checked-disabled: var(--c-primary-lighten-20) !default;
+
+// knob
+$switch-knob-size: px-to-rem(20) !default;
+$switch-knob-bg: var(--c-white) !default;
+$switch-knob-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 1px 0 rgba(0, 0, 0, 0.24) !default;
+$switch-knob-box-shadow-disabled: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 1px 0 rgba(0, 0, 0, 0.24) !default;
+
+$switch-knob-border-width: 1px !default;
+$switch-knob-border-color: var(--c-neutral-1) !default;
+
+$switch-loader-size: calc(#{$switch-knob-size} - #{px-to-rem(5)});
+$switch-loader-color: var(--c-primary) !default;
+
+$switch-content-spacing: get-spacing(3) !default;
+$switch-content-color: var(--c-neutral-6) !default;
+$switch-content-color-disabled: var(--c-neutral-4) !default;
+
+@mixin is-checked() {
+  &.is-checked {
+    .#{$switch-prefix}-switch {
+      &--layer {
+        background-color: $switch-layer-bg-checked;
+      }
+
+      &--knob {
+        transform: translate(calc(100% - 3px), -50%);
+      }
+    }
+
+    @include hover {
+      .#{$switch-prefix}-switch {
+        &--layer {
+          background-color: $switch-layer-bg-checked-hover;
+        }
+      }
+    }
+
+    @include active {
+      .#{$switch-prefix}-switch {
+        &--layer {
+          background-color: $switch-layer-bg-checked-active;
+        }
+      }
+    }
+  }
+}
+
+.#{$switch-prefix}-switch {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  &--input {
+    @include visually-hidden;
+  }
+
+  &--switcher {
+    position: relative;
+    display: inline-flex;
+    margin-right: $switch-content-spacing;
+  }
+
+  &--layer {
+    width: $switch-layer-width;
+    min-width: $switch-layer-width;
+    height: $switch-layer-height;
+    min-height: $switch-layer-height;
+    background-color: $switch-layer-bg;
+    border-radius: $switch-layer-border-radius;
+    transition-timing-function: $switch-transition-func;
+    transition-duration: $switch-transition-time;
+    transition-property: background-color, opacity;
+  }
+
+  &--knob {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $switch-knob-size;
+    min-width: $switch-knob-size;
+    height: $switch-knob-size;
+    min-height: $switch-knob-size;
+    background-color: $switch-knob-bg;
+    border-width: $switch-knob-border-width solid $switch-knob-border-color;
+    border-radius: 9999px;
+    box-shadow: $switch-knob-box-shadow;
+    transition-timing-function: $switch-transition-func;
+    transition-duration: $switch-transition-time;
+    transition-property: transform, box-shadow;
+    transform: translate(-3px, -50%);
+  }
+
+  &--content {
+    color: $switch-content-color;
+    transition-timing-function: $switch-transition-func;
+    transition-duration: $switch-transition-time;
+    transition-property: color;
+  }
+
+  &--loader {
+    &.base-loader {
+      &::after {
+        width: $switch-loader-size;
+        min-width: $switch-loader-size;
+        height: $switch-loader-size;
+        min-height: $switch-loader-size;
+        border-color: $switch-loader-color;
+      }
+    }
+  }
+
+  @include hover {
+    .#{$switch-prefix}-switch {
+      &--layer {
+        background-color: $switch-layer-bg-hover;
+      }
+    }
+  }
+
+  @include active {
+    .#{$switch-prefix}-switch {
+      &--layer {
+        background-color: $switch-layer-bg-active;
+      }
+    }
+  }
+
+  @include disabled {
+    .#{$switch-prefix}-switch {
+      &--layer {
+        opacity: 0.5;
+      }
+
+      &--knob {
+        box-shadow: $switch-knob-box-shadow-disabled;
+      }
+
+      &--content {
+        color: $switch-content-color-disabled;
+      }
+    }
+  }
+
+  @include is-checked;
+  @include loading;
+}

package/src/utils/mixins/_active.scss

@@ -1,5 +1,5 @@
 @mixin active {
-  &:not(&:disabled, &.is-loading) {
+  &:not(&:disabled, &.is-loading, &.is-disabled) {
     &:active {
       @content;
     }

package/src/utils/mixins/_disabled.scss

@@ -0,0 +1,8 @@
+@mixin disabled {
+  &:disabled,
+  &.is-disabled {
+    cursor: not-allowed;
+
+    @content;
+  }
+}

package/src/utils/mixins/_hover.scss

@@ -1,6 +1,6 @@
 @mixin hover {
   @media (hover: hover) and (pointer: fine) {
-    &:not(&:disabled, &.is-loading) {
+    &:not(&:disabled, &.is-loading, &.is-disabled) {
       &:hover {
         @content;
       }
@@ -8,7 +8,7 @@
   }
 
   @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    &:not(&:disabled, &.is-loading) {
+    &:not(&:disabled, &.is-loading, &.is-disabled) {
       &:hover {
         @content;
       }

package/src/utils/mixins/_loading.scss

@@ -0,0 +1,7 @@
+@mixin loading {
+  &.is-loading {
+    cursor: progress;
+
+    @content;
+  }
+}

package/src/utils/mixins/_overflow-touch.scss

@@ -0,0 +1,3 @@
+@mixin overflow-touch () {
+  -webkit-overflow-scrolling: touch;
+}

package/src/utils/mixins/_visual-hidden.scss

@@ -1,10 +1,10 @@
-@mixin visuallyHidden() {
+@mixin visually-hidden() {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
+  margin: -1px !important;
   overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip: rect(1px, 1px, 1px, 1px);
+  clip: rect(0 0 0 0);
   border: 0 !important;
 }

package/src/utils/mixins/index.scss

@@ -5,4 +5,7 @@
 @forward "hover";
 @forward "active";
 @forward "focus";
+@forward "disabled";
+@forward "loading";
 @forward "breakpont";
+@forward "overflow-touch";

package/src/variables/tokens/design-tokens.scss

@@ -62,13 +62,13 @@ $design-tokens: (
       c-body-bg: #fff,
       white: #fff,
       black: #000,
-      neutral-6: #fff,
-      neutral-5: #f6f6f6,
-      neutral-4: #dfdfdf,
+      neutral-0: #fff,
+      neutral-1: #f6f6f6,
+      neutral-2: #dfdfdf,
       neutral-3: #c6c6c6,
-      neutral-2: #91969d,
-      neutral-1: #6c747d,
-      neutral-0: #1e232b
+      neutral-4: #91969d,
+      neutral-5: #6c747d,
+      neutral-6: #1e232b
     )
   )
 );