@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 4.6.0 to 5.0.0

lib/hooks/use-element-should-close.js

 import { useEffect } from 'preact/hooks';
-import { normalizeKeyName } from '../browser-compatibility-utils';
 /**
@@ -56,3 +55,3 @@ * Attach listeners for one or multiple events to an element and return a
 
-      if (normalizeKeyName(keyEvent.key) === 'Escape') {
+      if (keyEvent.key === 'Escape') {
         handleClose();
@@ -59,0 +58,0 @@ }

lib/index.d.ts

@@ -8,3 +8,2 @@ export { Dialog } from "./components/Dialog";
 export { useElementShouldClose } from "./hooks/use-element-should-close";
-export { normalizeKeyName } from "./browser-compatibility-utils";
 export { IconButton, LabeledButton, LinkButton } from "./components/buttons";
@@ -11,0 +10,0 @@ export { LabeledCheckbox, Checkbox } from "./components/Checkbox";

lib/index.js

@@ -16,5 +16,3 @@ // Components
 
-export { useElementShouldClose } from './hooks/use-element-should-close'; // Utilities
-
-export { normalizeKeyName } from './browser-compatibility-utils';
+export { useElementShouldClose } from './hooks/use-element-should-close';
 //# sourceMappingURL=index.js.map

lib/pattern-library/components/patterns/ColorFoundations.js

@@ -146,2 +146,9 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ColorFoundations.js";
   children: [_jsxDEV(ColorSwatch, {
+    colorClass: "bg-slate-0",
+    colorName: "slate-0"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 41,
+    columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
     colorClass: "bg-slate-1",
@@ -151,3 +158,3 @@ colorName: "slate-1"
     fileName: _jsxFileName,
-    lineNumber: 41,
+    lineNumber: 42,
     columnNumber: 5
@@ -159,3 +166,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 42,
+    lineNumber: 43,
     columnNumber: 5
@@ -167,3 +174,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 43,
+    lineNumber: 44,
     columnNumber: 5
@@ -175,4 +182,11 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 44,
+    lineNumber: 45,
     columnNumber: 5
+  }, this), _jsxDEV(ColorSwatch, {
+    colorClass: "bg-slate-9",
+    colorName: "slate-9"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 46,
+    columnNumber: 5
   }, this)]
@@ -187,3 +201,3 @@ }, void 0, true);
     fileName: _jsxFileName,
-    lineNumber: 50,
+    lineNumber: 52,
     columnNumber: 5
@@ -195,3 +209,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 51,
+    lineNumber: 53,
     columnNumber: 5
@@ -203,3 +217,3 @@ }, this), _jsxDEV(ColorSwatch, {
     fileName: _jsxFileName,
-    lineNumber: 52,
+    lineNumber: 54,
     columnNumber: 5
@@ -209,2 +223,13 @@ }, this)]
 
+const focusExamples = _jsxDEV(_Fragment, {
+  children: _jsxDEV(ColorSwatch, {
+    colorClass: "bg-blue-focus",
+    colorName: "blue-focus"
+  }, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 60,
+    columnNumber: 5
+  }, this)
+}, void 0, false);
+
 export default function ColorFoundations() {
@@ -220,3 +245,3 @@ return _jsxDEV(Library.Page, {
         fileName: _jsxFileName,
-        lineNumber: 60,
+        lineNumber: 68,
         columnNumber: 9
@@ -226,3 +251,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 59,
+      lineNumber: 67,
       columnNumber: 7
@@ -236,3 +261,3 @@ }, this), _jsxDEV(Library.Pattern, {
         fileName: _jsxFileName,
-        lineNumber: 64,
+        lineNumber: 72,
         columnNumber: 9
@@ -242,3 +267,3 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 63,
+      lineNumber: 71,
       columnNumber: 7
@@ -251,3 +276,3 @@ }, this), _jsxDEV(Library.Pattern, {
         fileName: _jsxFileName,
-        lineNumber: 68,
+        lineNumber: 76,
         columnNumber: 9
@@ -259,3 +284,3 @@ }, this), _jsxDEV("div", {
         fileName: _jsxFileName,
-        lineNumber: 72,
+        lineNumber: 80,
         columnNumber: 9
@@ -265,3 +290,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 67,
+      lineNumber: 75,
       columnNumber: 7
@@ -275,3 +300,3 @@ }, this), _jsxDEV(Library.Pattern, {
         fileName: _jsxFileName,
-        lineNumber: 76,
+        lineNumber: 84,
         columnNumber: 9
@@ -281,8 +306,22 @@ }, this)
       fileName: _jsxFileName,
-      lineNumber: 75,
+      lineNumber: 83,
       columnNumber: 7
+    }, this), _jsxDEV(Library.Pattern, {
+      title: "Focus indicators",
+      children: _jsxDEV("div", {
+        className: "flex flex-row flex-wrap gap-4",
+        children: focusExamples
+      }, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 88,
+        columnNumber: 9
+      }, this)
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 87,
+      columnNumber: 7
     }, this)]
   }, void 0, true, {
     fileName: _jsxFileName,
-    lineNumber: 58,
+    lineNumber: 66,
     columnNumber: 5
@@ -289,0 +328,0 @@ }, this);

lib/pattern-library/components/patterns/ContainerComponents.js

@@ -135,3 +135,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerComponents.js";
           children: _jsxDEV(Card, {
-            classes: "hyp-u-bg-color--grey-3",
+            classes: "bg-grey-3",
             children: [_jsxDEV("div", {
@@ -138,0 +138,0 @@ children: "This content is inside of a card."

lib/pattern-library/components/patterns/ContainerPatterns.js

@@ -577,3 +577,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerPatterns.js";
             }, this), _jsxDEV("div", {
-              className: "hyp-u-overlay",
+              className: "fixed top-0 left-0 bottom-0 right-0 bg-black/50 z-5",
               style: {
@@ -695,3 +695,3 @@ visibility: showModalExample ? 'visible' : 'hidden'
               children: _jsxDEV("ul", {
-                className: "hyp-u-padding hyp-u-vertical-spacing",
+                className: "p-3 space-y-4",
                 children: _jsxDEV(SampleListElements, {}, void 0, false, {
@@ -767,3 +767,3 @@ fileName: _jsxFileName,
               }, this), _jsxDEV("ul", {
-                className: "hyp-u-padding hyp-u-vertical-spacing",
+                className: "p-3 space-y-4",
                 children: _jsxDEV(SampleListElements, {}, void 0, false, {
@@ -770,0 +770,0 @@ fileName: _jsxFileName,

lib/pattern-library/components/patterns/DialogComponents.js

@@ -389,15 +389,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/DialogComponents.js";
             columnNumber: 35
-          }, this), ". The highlighted outline is added here by using ", _jsxDEV("code", {
-            children: ".hyp-u-focus-outline"
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 246,
-            columnNumber: 33
-          }, this), " on the", ' ', _jsxDEV("code", {
-            children: "input"
-          }, void 0, false, {
-            fileName: _jsxFileName,
-            lineNumber: 247,
-            columnNumber: 13
-          }, this), " element."]
+          }, this), "."]
         }, void 0, true, {
@@ -412,3 +400,3 @@ fileName: _jsxFileName,
             fileName: _jsxFileName,
-            lineNumber: 251,
+            lineNumber: 249,
             columnNumber: 30
@@ -419,3 +407,3 @@ }, this), " or ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 251,
+            lineNumber: 249,
             columnNumber: 53
@@ -426,3 +414,3 @@ }, this), " is opened. This might arise if you have nested components within a", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 253,
+            lineNumber: 251,
             columnNumber: 13
@@ -433,3 +421,3 @@ }, this), " or ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 253,
+            lineNumber: 251,
             columnNumber: 35
@@ -440,3 +428,3 @@ }, this), ", or there is complex logic about focus. Setting the ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 254,
+            lineNumber: 252,
             columnNumber: 38
@@ -447,3 +435,3 @@ }, this), " prop to", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 255,
+            lineNumber: 253,
             columnNumber: 13
@@ -453,3 +441,3 @@ }, this), " will opt out of automatic focus handling."]
           fileName: _jsxFileName,
-          lineNumber: 249,
+          lineNumber: 247,
           columnNumber: 11
@@ -459,3 +447,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 259,
+            lineNumber: 257,
             columnNumber: 13
@@ -465,3 +453,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 258,
+          lineNumber: 256,
           columnNumber: 11
@@ -480,3 +468,3 @@ }, this)]
             fileName: _jsxFileName,
-            lineNumber: 265,
+            lineNumber: 263,
             columnNumber: 27
@@ -487,3 +475,3 @@ }, this), " will render both a close button (x) and a Cancel button if an ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 266,
+            lineNumber: 264,
             columnNumber: 43
@@ -494,3 +482,3 @@ }, this), " callback is provided, but this can be overridden with the", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 268,
+            lineNumber: 266,
             columnNumber: 13
@@ -501,3 +489,3 @@ }, this), " and ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 268,
+            lineNumber: 266,
             columnNumber: 47
@@ -507,3 +495,3 @@ }, this), ' ', "boolean props for the cancel button and close button, respectively."]
           fileName: _jsxFileName,
-          lineNumber: 264,
+          lineNumber: 262,
           columnNumber: 11
@@ -514,3 +502,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 272,
+            lineNumber: 270,
             columnNumber: 13
@@ -520,3 +508,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 271,
+          lineNumber: 269,
           columnNumber: 11
@@ -527,3 +515,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 276,
+            lineNumber: 274,
             columnNumber: 13
@@ -533,3 +521,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 275,
+          lineNumber: 273,
           columnNumber: 11
@@ -539,3 +527,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 263,
+        lineNumber: 261,
         columnNumber: 9
@@ -554,3 +542,3 @@ }, this)]
           fileName: _jsxFileName,
-          lineNumber: 283,
+          lineNumber: 281,
           columnNumber: 13
@@ -561,3 +549,3 @@ }, this), " is a type of ", _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 283,
+          lineNumber: 281,
           columnNumber: 45
@@ -567,3 +555,3 @@ }, this), " that centers on the screen and obscures the background with an overlay."]
         fileName: _jsxFileName,
-        lineNumber: 282,
+        lineNumber: 280,
         columnNumber: 9
@@ -576,3 +564,3 @@ }, this), _jsxDEV(Library.Example, {
           fileName: _jsxFileName,
-          lineNumber: 287,
+          lineNumber: 285,
           columnNumber: 11
@@ -582,3 +570,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 292,
+            lineNumber: 290,
             columnNumber: 13
@@ -588,3 +576,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 291,
+          lineNumber: 289,
           columnNumber: 11
@@ -594,3 +582,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 286,
+        lineNumber: 284,
         columnNumber: 9
@@ -603,3 +591,3 @@ }, this), _jsxDEV(Library.Example, {
           fileName: _jsxFileName,
-          lineNumber: 297,
+          lineNumber: 295,
           columnNumber: 11
@@ -611,3 +599,3 @@ }, this), _jsxDEV("p", {
             fileName: _jsxFileName,
-            lineNumber: 304,
+            lineNumber: 302,
             columnNumber: 13
@@ -618,3 +606,3 @@ }, this), " to the element you wish to contain. This element needs to be an immediate-child element of the", ' ', _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 306,
+            lineNumber: 304,
             columnNumber: 13
@@ -624,3 +612,3 @@ }, this), "."]
           fileName: _jsxFileName,
-          lineNumber: 302,
+          lineNumber: 300,
           columnNumber: 11
@@ -630,3 +618,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 309,
+            lineNumber: 307,
             columnNumber: 13
@@ -636,3 +624,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 308,
+          lineNumber: 306,
           columnNumber: 11
@@ -642,3 +630,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 296,
+        lineNumber: 294,
         columnNumber: 9
@@ -648,3 +636,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 281,
+      lineNumber: 279,
       columnNumber: 7
@@ -658,3 +646,3 @@ }, this), _jsxDEV(Library.Pattern, {
           fileName: _jsxFileName,
-          lineNumber: 316,
+          lineNumber: 314,
           columnNumber: 11
@@ -665,3 +653,3 @@ }, this), " is intended to mirror the functionality of", ' ', _jsxDEV("code", {
           fileName: _jsxFileName,
-          lineNumber: 317,
+          lineNumber: 315,
           columnNumber: 11
@@ -671,3 +659,3 @@ }, this), "."]
         fileName: _jsxFileName,
-        lineNumber: 315,
+        lineNumber: 313,
         columnNumber: 9
@@ -680,3 +668,3 @@ }, this), _jsxDEV(Library.Example, {
             fileName: _jsxFileName,
-            lineNumber: 321,
+            lineNumber: 319,
             columnNumber: 13
@@ -686,3 +674,3 @@ }, this), " prompts the user for a boolean yes/no input. Close and cancel are considered no."]
           fileName: _jsxFileName,
-          lineNumber: 320,
+          lineNumber: 318,
           columnNumber: 11
@@ -694,3 +682,3 @@ }, this), _jsxDEV("p", {
             fileName: _jsxFileName,
-            lineNumber: 326,
+            lineNumber: 324,
             columnNumber: 13
@@ -701,3 +689,3 @@ }, this), ") and no/cancel (", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 326,
+            lineNumber: 324,
             columnNumber: 52
@@ -708,3 +696,3 @@ }, this), "). Typically, both would (also) close the modal, though in this example, the ", _jsxDEV("code", {
             fileName: _jsxFileName,
-            lineNumber: 328,
+            lineNumber: 326,
             columnNumber: 26
@@ -714,3 +702,3 @@ }, this), " handler does not close the modal."]
           fileName: _jsxFileName,
-          lineNumber: 324,
+          lineNumber: 322,
           columnNumber: 11
@@ -720,3 +708,3 @@ }, this), _jsxDEV(Library.Demo, {
             fileName: _jsxFileName,
-            lineNumber: 332,
+            lineNumber: 330,
             columnNumber: 13
@@ -726,3 +714,3 @@ }, this)
           fileName: _jsxFileName,
-          lineNumber: 331,
+          lineNumber: 329,
           columnNumber: 11
@@ -732,3 +720,3 @@ }, this)]
         fileName: _jsxFileName,
-        lineNumber: 319,
+        lineNumber: 317,
         columnNumber: 9
@@ -738,3 +726,3 @@ }, this)]
       fileName: _jsxFileName,
-      lineNumber: 314,
+      lineNumber: 312,
       columnNumber: 7
@@ -741,0 +729,0 @@ }, this)]

lib/pattern-library/components/patterns/FormPatterns.js

@@ -45,3 +45,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/FormPatterns.js";
           children: _jsxDEV("div", {
-            className: "hyp-u-layout-row hyp-u-horizontal-spacing",
+            className: "flex space-x-3",
             children: [_jsxDEV("div", {
@@ -48,0 +48,0 @@ children: [_jsxDEV("input", {

lib/pattern-library/components/patterns/LayoutFoundations.js

@@ -39,3 +39,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/LayoutFoundations.js";
             }, this), _jsxDEV("div", {
-              className: "hyp-u-fixed-centered",
+              className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
               style: `width:450px;${showExample1 ? 'visibility:visible' : 'visibility:hidden'}`,
@@ -114,6 +114,6 @@ children: _jsxDEV(Card, {
             }, this), _jsxDEV("div", {
-              className: "hyp-u-overlay",
+              className: "fixed top-0 left-0 bottom-0 right-0 bg-black/50 z-5",
               style: showExample2 ? 'visibility:visible' : 'visibility:hidden',
               children: _jsxDEV("div", {
-                className: "hyp-u-fixed-centered",
+                className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
                 children: _jsxDEV(LabeledButton, {
@@ -182,6 +182,6 @@ onClick: () => setShowExample2(false),
             }, this), _jsxDEV("div", {
-              className: "hyp-u-overlay",
+              className: "fixed top-0 left-0 bottom-0 right-0 bg-black/50 z-5",
               style: showExample3 ? 'visibility:visible' : 'visibility:hidden',
               children: _jsxDEV("div", {
-                className: "hyp-u-fixed-centered",
+                className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
                 children: _jsxDEV(Card, {
@@ -188,0 +188,0 @@ classes: "w-[450px]",

lib/pattern-library/components/patterns/SpinnerPatterns.js

@@ -162,3 +162,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/SpinnerPatterns.js";
             name: "hyp-spinner",
-            containerClasses: "hyp-spinner hyp-u-color--brand"
+            containerClasses: "hyp-spinner text-brand"
           }, void 0, false, {
@@ -165,0 +165,0 @@ fileName: _jsxFileName,

lib/tailwind.preset.js

 import plugin from 'tailwindcss/plugin.js';
 import colors from 'tailwindcss/colors.js';
-import focusVisibleRing from './tailwind.focus-visible-ring.js';
+import focusVisibleRing from './tailwind.focus-visible-ring.js'; // Equivalent to spacing value 11; minimum touch-target size
+
+const minimumTouchDimension = '44px';
 export default
@@ -12,2 +14,6 @@ /** @type {Partial<import('tailwindcss').Config>} */
       },
+      boxShadow: {
+        DEFAULT: '0 1px 1px rgba(0, 0, 0, 0.1)',
+        md: '0px 2px 3px 0px rgba(0, 0, 0, 0.15)'
+      },
       colors: {
@@ -31,9 +37,12 @@ transparent: 'transparent',
         slate: {
-          //0: '#f4f4f6', Proposed
+          0: '#f4f4f6',
           1: '#e3e3e5',
           3: '#babac4',
           5: '#9c9cab',
-          7: '#595969' //9: '#131316', Proposed
-
+          7: '#595969',
+          9: '#131316'
         },
+        blue: {
+          focus: '#59a7e8'
+        },
         green: {
@@ -56,5 +65,12 @@ success: '#00a36d'
           DEFAULT: '#202020',
-          light: '#737373'
+          light: '#737373',
+          inverted: '#f2f2f2'
         }
       },
+      minHeight: {
+        'touch-minimum': minimumTouchDimension
+      },
+      minWidth: {
+        'touch-minimum': minimumTouchDimension
+      },
       ringColor: {
@@ -70,5 +86,17 @@ DEFAULT: '#59a7e8'
       },
+      screens: {
+        touch: {
+          raw: '(pointer: coarse)'
+        }
+      },
       spacing: {
-        'touch-minimum': '44px' // Equivalent to spacing 11; minimum touch-target size
-
+        'touch-minimum': minimumTouchDimension
+      },
+      zIndex: {
+        1: '1',
+        2: '2',
+        3: '3',
+        4: '4',
+        5: '5',
+        max: '2147483647'
       }
@@ -75,0 +103,0 @@ }

package.json

 {
   "name": "@hypothesis/frontend-shared",
-  "version": "4.6.0",
+  "version": "5.0.0",
   "description": "Shared components, styles and utilities for Hypothesis projects",
@@ -48,3 +48,3 @@ "license": "BSD-2-Clause",
     "prettier": "^2.2.1",
-    "puppeteer": "^14.1.0",
+    "puppeteer": "^15.1.1",
     "rollup": "^2.58.0",
@@ -54,3 +54,3 @@ "rollup-plugin-string": "^3.0.0",
     "sinon": "^14.0.0",
-    "tailwindcss": "3.1.3",
+    "tailwindcss": "3.1.4",
     "typescript": "^4.1.5",
@@ -57,0 +57,0 @@ "yalc": "^1.0.0-pre.50"

README.md

@@ -17,4 +17,32 @@ # Shared resources for Hypothesis front-end applications
 
-### SASS
+### Components (preact)
 
+```js
+import { LabeledButton } from '@hypothesis/frontend-shared';
+```
+
+### Icons
+
+```js
+import {
+  profile,
+  share,
+  trash,
+} from '@hypothesis/frontend-shared/lib/icons';
+
+import { registerIcons } from '@hypothesis/frontend-shared';
+
+registerIcons({ profile, shareAnnotation: share, trash});
+
+export default function MyComponent() => {
+  return (
+    <div>
+      <Icon name="profile" />
+      <Icon name="shareAnnotation" />
+    </div>
+  );
+```
+
+### Styling (CSS)
+
 Your project must have `sass` and `tailwindcss` dependencies installed.
@@ -28,8 +56,2 @@
 
-### In JS
-
-```js
-import { Icon } from '@hypothesis/frontend-shared';
-```
-
 ## Additional documentation
@@ -36,0 +58,0 @@

styles/README.md

@@ -19,3 +19,3 @@ # SASS structure and conventions
 
-## Deprecated SASS API
+## Deprecated SASS
 
@@ -32,5 +32,4 @@ - `pattern-library.scss` (deprecated):
 
-  - At this time, the only publicly-available mixins are `focus` and `buttons` (for button customizations only—use only if you know what you're doing). Do not use other mixins.
-  - Mixins may not be available publicly in the future.
+  - Mixins are not part of the public API.
 
 _Note_: `pattern-library.scss` is also used internally by this project to build a CSS bundle for serving the pattern library using `make dev`.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

10569

increased by0.15%

Number of lines in readme file

59

increased by59.46%

Worsened metrics

Total package byte prevSize

815314

decreased by-0.75%

Number of package files

290

decreased by-3.01%

No dependency changes