@newhighsco/chipset 6.24.0 → 6.25.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.24.0",
+  "version": "6.25.0",
   "author": "New High Score",
   "license": "ISC",
   "repository": {
@@ -123,6 +123,18 @@
           "number-max-precision": null
         }
       }
-    ]
+    ],
+    "rules": {
+      "value-keyword-case": [
+        "lower",
+        {
+          "camelCaseSvgKeywords": true,
+          "ignoreKeywords": [
+            "/(mobile|tablet)Landscape/",
+            "/desktop(Medium|Large)/"
+          ]
+        }
+      ]
+    }
   }
 }

package/styles/_breakpoints.module.scss

@@ -7,8 +7,6 @@ $tablet-landscape: 800px !default;
 $desktop: 960px !default;
 $desktop-medium: 1280px !default;
 $desktop-large: 1600px !default;
-
-/* stylelint-disable value-keyword-case */
 $all: (
   mobile: $mobile,
   mobileLandscape: $mobile-landscape,
@@ -18,7 +16,6 @@ $all: (
   desktopMedium: $desktop-medium,
   desktopLarge: $desktop-large
 );
-/* stylelint-enable value-keyword-case */
 
 :export {
   mobile: strip-unit($mobile);

package/styles/_normalize.scss

@@ -5,8 +5,7 @@
 // 2. Prevent adjustments of font size after orientation changes in iOS
 html {
   box-sizing: border-box; // 1
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-text-size-adjust: 100%; // 2
+  text-size-adjust: 100%; // 2
 }
 
 // 1. Inherit default box-sizing
@@ -153,8 +152,7 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-appearance: button;
+  appearance: auto;
 }
 
 // Remove the inner border and padding in Firefox.
@@ -213,22 +211,19 @@ textarea {
 // 1. Correct the odd appearance in Chrome and Safari.
 // 2. Correct the outline style in Safari.
 [type='search'] {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-appearance: textfield; // 1
+  appearance: textfield; // 1
   outline-offset: -2px; // 2
 }
 
 // Remove the inner padding in Chrome and Safari on macOS.
 [type='search']::-webkit-search-decoration {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 // 1. Correct the inability to style clickable types in iOS and Safari.
 // 2. Change font properties to `inherit` in Safari.
 ::-webkit-file-upload-button {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-appearance: button; // 1
+  appearance: auto; // 1
   font: inherit; // 2
 }
 

package/styles/mixins/_hidpi.scss

@@ -1,10 +1,7 @@
 @use 'sass:math';
 
 @mixin hidpi($ratio: 1.3) {
-  $mq: '(-webkit-min-device-pixel-ratio: #{$ratio}), ';
-  $mq: '#{$mq} (min-resolution: #{math.floor($ratio * 96)}dpi)';
-
-  @media #{$mq} {
+  @media (min-resolution: #{math.floor($ratio * 96)}dpi) {
     @content;
   }
 }

package/styles/mixins/_mq.scss

@@ -1,14 +1,13 @@
-/* stylelint-disable scss/dollar-variable-pattern */
 @mixin mq($min: false, $max: false, $height: false, $and: false, $media: all) {
-  $_direction: if($height, height, width);
+  $-direction: if($height, height, width);
   $mq: '#{$media} ';
 
   @if $min {
-    $mq: '#{$mq} and (min-#{$_direction}: #{$min})';
+    $mq: '#{$mq} and (min-#{$-direction}: #{$min})';
   }
 
   @if $max {
-    $mq: '#{$mq} and (max-#{$_direction}: #{$max})';
+    $mq: '#{$mq} and (max-#{$-direction}: #{$max})';
   }
 
   @if $and {

package/styles/mixins/_triangle.scss

@@ -3,7 +3,7 @@
 
 @mixin triangle($point: 'up', $size: 1em, $color: '') {
   @if $point == 'up' {
-    @include _triangle-borders(
+    @include -triangle-borders(
       (
         right: transparent,
         bottom: filled,
@@ -13,7 +13,7 @@
       $color
     );
   } @else if $point == 'right' {
-    @include _triangle-borders(
+    @include -triangle-borders(
       (
         top: transparent,
         bottom: transparent,
@@ -23,7 +23,7 @@
       $color
     );
   } @else if $point == 'down' {
-    @include _triangle-borders(
+    @include -triangle-borders(
       (
         top: filled,
         right: transparent,
@@ -33,7 +33,7 @@
       $color
     );
   } @else if $point == 'left' {
-    @include _triangle-borders(
+    @include -triangle-borders(
       (
         top: transparent,
         right: filled,
@@ -43,7 +43,7 @@
       $color
     );
   } @else if $point == 'up-left' {
-    @include _triangle-borders(
+    @include -triangle-borders(
       (
         top: filled,
         right: transparent,
@@ -54,7 +54,7 @@
       $color
     );
   } @else if $point == 'up-right' {
-    @include _triangle-borders(
+    @include -triangle-borders(
       (
         top: filled,
         right: filled,
@@ -65,7 +65,7 @@
       $color
     );
   } @else if $point == 'down-right' {
-    @include _triangle-borders(
+    @include -triangle-borders(
       (
         top: transparent,
         right: filled,
@@ -76,7 +76,7 @@
       $color
     );
   } @else if $point == 'down-left' {
-    @include _triangle-borders(
+    @include -triangle-borders(
       (
         top: transparent,
         right: transparent,
@@ -89,9 +89,7 @@
   }
 }
 
-/* stylelint-disable annotation-no-unknown */
-/* stylelint-disable-next-line scss/at-mixin-pattern */
-@mixin _triangle-borders($sides, $size, $color) {
+@mixin -triangle-borders($sides, $size, $color) {
   width: 0;
   height: 0;
 

package/styles/normalize.stories.jsx

@@ -0,0 +1,17 @@
+import { KitchenSink } from '../src/__mocks__/fixtures'
+
+export default { component: KitchenSink }
+
+export const Source = {
+  parameters: {
+    chromatic: { disable: true },
+    docs: {
+      source: {
+        code: "@use '~@newhighsco/chipset/styles/normalize';",
+        language: 'css'
+      }
+    }
+  }
+}
+
+export const Example = {}