@onereach/styles 0.1.15 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "0.1.15",
+  "version": "0.2.10",
   "description": "Styles for or-ui-next",
   "main": "./dist/index.min.css",
   "unpkg": "./dist/index.css",
@@ -12,7 +12,6 @@
     "build:cleancss": "cleancss -o dist/index.min.css dist/index.css",
     "build:autoprefixer": "npx postcss --use autoprefixer --map false --output dist/index.css dist/index.css",
     "build:tokens": "npm run json-to-scss",
-    "prepare": "npm run build",
     "lint": "stylelint '**/*.scss'",
     "fix": "stylelint --fix '**/*.scss'",
     "clean": "rimraf dist",
@@ -38,5 +37,5 @@
     "sass": "^1.35.1",
     "stylelint": "^13.13.1"
   },
-  "gitHead": "306d70a2adc6519d6afe300515bc402cfbd0a82c"
+  "gitHead": "d3609da80bf8bb9d09df79d270ad77ea84dc839c"
 }

package/src/base/_generic.scss

@@ -51,7 +51,7 @@ pre {
 
   code {
     padding: 0;
-    font-size: get-font-size();
+    font-size: var(--fs-0);
     color: currentColor;
     background-color: transparent;
   }

package/src/base/_reset.scss

@@ -83,20 +83,6 @@ video {
   border: 0;
 }
 
-/* Change Autocomplete styles in Chrome */
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-textarea:-webkit-autofill,
-textarea:-webkit-autofill:hover,
-textarea:-webkit-autofill:focus,
-select:-webkit-autofill,
-select:-webkit-autofill:hover,
-select:-webkit-autofill:focus {
-  -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
-  -webkit-transition-delay: 9999s;
-}
-
 *,
 *::before,
 *::after {

package/src/base/_typography.scss

@@ -1,42 +1,39 @@
-@use "../utils" as *;
-@use "../variables/initial";
-
 body,
 .body-normal {
-  font-family: initial.$body-font-family;
-  font-size: initial.$body-font-size;
-  font-weight: initial.$body-font-weight;
-  line-height: initial.$body-line-height;
+  font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+  font-size: var(--fs-1);
+  font-weight: var(--fw-0);
+  line-height: var(--lh-1);
 }
 
 .caption-normal {
-  font-size: initial.$caption-font-size;
-  font-weight: initial.$caption-font-weight;
-  line-height: initial.$caption-line-height;
+  font-size: var(--fs-0);
+  font-weight: var(--fw-0);
+  line-height: var(--lh-0);
 }
 
 .caption-bold {
   @extend .caption-normal;
 
-  font-weight: get-font-weight(2);
+  font-weight: var(--fw-2);
 }
 
 .body-semibold {
   @extend .body-normal;
 
-  font-weight: get-font-weight(1);
+  font-weight: var(--fw-1);
 }
 
 h4,
 .subheading {
-  font-size: initial.$subheading-font-size;
-  font-weight: initial.$subheading-font-weight;
-  line-height: initial.$subheading-line-height;
+  font-size: var(--fs-2);
+  font-weight: var(--fw-2);
+  line-height: var(--lh-1);
 }
 
 h1,
 .heading {
-  font-size: initial.$heading-font-size;
-  font-weight: initial.$heading-font-weight;
-  line-height: initial.$heading-line-height;
+  font-size: var(--fs-3);
+  font-weight: var(--fw-2);
+  line-height: var(--lh-2);
 }

package/src/utils/functions/index.scss

@@ -1,9 +1,4 @@
-@forward "get-theme-color";
 @forward "px-to-rem";
-@forward "get-font-size";
-@forward "get-line-height";
-@forward "get-font-weight";
-@forward "get-spacing";
 @forward "get-transition-time";
 @forward "get-transition-func";
 @forward "breakpoint";

package/src/utils/mixins/_hover.scss

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

package/src/utils/mixins/index.scss

@@ -1,6 +1,5 @@
 @forward "absolute-stretch";
 @forward "extra-click-area";
-@forward "height-vh";
 @forward "visual-hidden";
 @forward "hover";
 @forward "active";

package/src/variables/_initial.scss

@@ -1,12 +1,11 @@
 @use "sass:map";
 @use "tokens/design-tokens" as *;
 
-$themesList: map.get($design-tokens, themes) !default;
-$spacingList: map.get($design-tokens, spacings) !default;
-$fontSizeList: map.get($design-tokens, typography, font-sizes) !default;
-$fontWeightList: map.get($design-tokens, typography, font-weights) !default;
-$lineHeightList: map.get($design-tokens, typography, line-heights) !default;
-//$colorsList: (primary, error, warning, success, neutral-0, neutral-1, neutral-2, neutral-3, neutral-4, neutral-5, neutral-6);
+$themesList: map.get($design-tokens, themes);
+$spacingList: map.get($design-tokens, spacings);
+$fontSizeList: map.get($design-tokens, typography, font-sizes);
+$fontWeightList: map.get($design-tokens, typography, font-weights);
+$lineHeightList: map.get($design-tokens, typography, line-heights);
 
 // list of values
 $spacingsValues: map.values($spacingList);
@@ -14,27 +13,8 @@ $fontSizeValues: map.values($fontSizeList);
 $fontWeightValues: map.values($fontWeightList);
 $lineHeightValues: map.values($lineHeightList);
 
-// typo
-$body-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif !default;
-$body-font-size: var(--fs-1) !default;
-$body-font-weight: var(--fw-0) !default;
-$body-line-height: var(--lh-1) !default;
-
-$caption-font-size: var(--fs-0) !default;
-$caption-font-weight: var(--fw-0) !default;
-$caption-line-height: var(--lh-0) !default;
-
-$subheading-font-size: var(--fs-2) !default;
-$subheading-font-weight: var(--fw-2) !default;
-$subheading-line-height: var(--lh-1) !default;
-
-$heading-font-size: var(--fs-3) !default;
-$heading-font-weight: var(--fw-2) !default;
-$heading-line-height: var(--lh-2) !default;
-
 // generic
-$base-prefix: quote('or') !default;
-$round: 9999px !default;
+$round: 9999px;
 
-$transition-function: var(--t-func) !default;
-$transition-duration: var(--t-duration) !default;
+$transition-function: var(--t-func);
+$transition-duration: var(--t-duration);