@pluralsight/headless-styles - npm Package Compare versions

Comparing version 0.0.0-experimental-a4ff83-20220321 to 0.0.0-experimental-aae46e-20220325

build/components/Button/buttonCSS.js

 import { getDefaultOptions } from './shared';
 import styles from './buttonCSS.module.css';
 export function getButtonProps(options) {
-    const { kind, size } = getDefaultOptions(options);
+    var _a;
+    const { kind, size, tech } = getDefaultOptions(options);
     const formattedSize = `size-${size}`;
+    const framework = (_a = styles[tech]) !== null && _a !== void 0 ? _a : '';
     return {
-        className: `ps-btn ${styles.base} ${styles[kind]} ${styles[formattedSize]}`,
+        className: `ps-btn ${styles.base} ${styles[kind]} ${styles[formattedSize]} ${framework}`,
         type: 'button',
     };
 }

build/components/Button/buttonJS.d.ts

@@ -5,14 +5,10 @@ import type { ButtonOptions, ButtonType } from './types';
     styles: {
-        hover: {
+        '&:hover': {
             color: string;
             backgroundColor: string;
         };
-        active: {
+        '&:active': {
             backgroundColor: string;
             outline: string;
         };
-        focus: {
-            boxShadow: string;
-            outline: number;
-        };
         fontSize: string;
@@ -23,25 +19,29 @@ padding: string;
         appearance: string;
+        border: string;
         borderRadius: string;
-        border: string;
         cursor: string;
+        fontFamily: string;
+        fontWeight: string;
+        height: string;
+        outlineOffset: string;
         textAlign: string;
         textDecoration: string;
+        textTransform: string;
         transition: string;
-        focusNotFocusVisible: {
+        '&:focus': {
+            outline: string;
+        };
+        '&:focus:not(:focus-visible)': {
             boxShadow: string;
-            outline: number;
+            outline: string;
         };
     } | {
-        hover: {
+        '&:hover': {
             color: string;
             backgroundColor: string;
         };
-        active: {
+        '&:active': {
             backgroundColor: string;
             outline: string;
         };
-        focus: {
-            boxShadow: string;
-            outline: number;
-        };
         fontSize: string;
@@ -52,11 +52,19 @@ padding: string;
         appearance: string;
+        border: string;
         borderRadius: string;
-        border: string;
         cursor: string;
+        fontFamily: string;
+        fontWeight: string;
+        height: string;
+        outlineOffset: string;
         textAlign: string;
         textDecoration: string;
+        textTransform: string;
         transition: string;
-        focusNotFocusVisible: {
+        '&:focus': {
+            outline: string;
+        };
+        '&:focus:not(:focus-visible)': {
             boxShadow: string;
-            outline: number;
+            outline: string;
         };
@@ -63,0 +71,0 @@ };

build/components/Button/buttonJS.js

 import { psBackground, psBackgroundActive, psBackgroundHover, psBackgroundWeak, psNeutralBackground, psNeutralBackgroundActive, psNeutralBackgroundHover, psNeutralText, psNeutralTextWeak, psText, psTextMedium, } from '@pluralsight/design-tokens';
 import { getDefaultOptions } from './shared';
-const buttonStyles = {
-    appearance: 'none',
-    borderRadius: '6px',
-    backgroundColor: 'transparent',
-    border: 'none',
-    cursor: 'pointer',
-    fontSize: '16px',
-    padding: '10px 16px',
-    textAlign: 'center',
-    textDecoration: 'none',
-    transition: 'background-color 250ms ease-in-out, color 250ms ease-in-out',
-    active: {
-        outline: 'none',
+const BASE_FONT_SIZE = '16px';
+const baseStyles = {
+    js: {
+        appearance: 'none',
+        backgroundColor: 'transparent',
+        border: 'none',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        fontFamily: 'PS TT Commons Roman, Gotham SSm A, Gotham SSm B, Arial,sans-serif',
+        fontSize: BASE_FONT_SIZE,
+        fontWeight: 'inherit',
+        height: 'initial',
+        outlineOffset: 'initial',
+        padding: '10px 16px',
+        textAlign: 'center',
+        textDecoration: 'none',
+        textTransform: 'none',
+        transition: 'background-color 250ms ease-in-out, color 250ms ease-in-out',
+        '&:active': {
+            outline: 'none',
+        },
+        '&:focus': {
+            outline: `3px solid ${psBackgroundActive}`,
+        },
+        '&:focus:not(:focus-visible)': {
+            boxShadow: 'none',
+            outline: 'none',
+        },
     },
-    focus: {
-        outline: `3px solid ${psBackgroundActive}`,
-    },
-    focusNotFocusVisible: {
-        boxShadow: 'none',
-        outline: 0,
-    },
-};
-const baseCSSProps = `
+    css: `
   appearance: none;
@@ -31,4 +38,10 @@ background-color: transparent;
   cursor: pointer;
+  font-family: 'PS TT Commons Roman', 'Gotham SSm A', 'Gotham SSm B', Arial,
+  sans-serif;
+  font-weight: inherit;
+  height: initial;
+  outline-offset: initial;
   text-align: center;
   text-decoration: none;
+  text-transform: none;
   transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
@@ -44,5 +57,6 @@
     box-shadow: none;
-    outline: 0;
+    outline: none;
   }
-`;
+`,
+};
 function getKindStyles(kind) {
@@ -66,3 +80,3 @@ switch (kind) {
                 js: {
-                    backgroundColor: psNeutralBackground,
+                    backgroundColor: `${psNeutralBackground}`,
                     color: psNeutralText,
@@ -78,3 +92,3 @@ },
                 js: {
-                    backgroundColor: psBackground,
+                    backgroundColor: `${psBackground}`,
                     color: '#fff',
@@ -90,3 +104,3 @@ },
                 js: {
-                    backgroundColor: psBackgroundWeak,
+                    backgroundColor: `${psBackgroundWeak}`,
                     color: psText,
@@ -137,3 +151,3 @@ },
                 js: {
-                    fontSize: '16px',
+                    fontSize: BASE_FONT_SIZE,
                     padding: '14.5px 24px',
@@ -149,3 +163,3 @@ },
                 js: {
-                    fontSize: '16px',
+                    fontSize: BASE_FONT_SIZE,
                     padding: '10px 16px',
@@ -177,3 +191,3 @@ },
                     active: {
-                        backgroundColor: psBackgroundActive,
+                        backgroundColor: `${psBackgroundActive}`,
                     },
@@ -199,3 +213,3 @@ },
                     active: {
-                        backgroundColor: psNeutralBackgroundActive,
+                        backgroundColor: `${psNeutralBackgroundActive}`,
                     },
@@ -221,3 +235,3 @@ },
                     active: {
-                        backgroundColor: psBackgroundActive,
+                        backgroundColor: `${psBackgroundActive}`,
                     },
@@ -235,3 +249,3 @@ },
         cssProps: `
-      ${baseCSSProps}
+      ${baseStyles.css.trim()}
       ${kindStyles.css.trim()}
@@ -243,5 +257,5 @@ ${sizeStyles.css.trim()}
             .replace(/^ {2,12}/gm, ''),
-        styles: Object.assign(Object.assign(Object.assign(Object.assign({}, buttonStyles), kindStyles.js), sizeStyles.js), { hover: Object.assign({}, psuedoStyles.js.hover), active: Object.assign(Object.assign({}, buttonStyles.active), psuedoStyles.js.active), focus: Object.assign(Object.assign({}, buttonStyles.focus), buttonStyles.focusNotFocusVisible) }),
+        styles: Object.assign(Object.assign(Object.assign(Object.assign({}, baseStyles.js), kindStyles.js), sizeStyles.js), { '&:hover': Object.assign({}, psuedoStyles.js.hover), '&:active': Object.assign(Object.assign({}, baseStyles.js['&:active']), psuedoStyles.js.active) }),
         type: 'button',
     };
 }

build/components/Button/shared.d.ts

@@ -1,5 +0,6 @@
-import type { ButtonOptions, Kind, Size } from './types';
+import type { ButtonOptions, Kind, Size, Tech } from './types';
 export declare const defaultButtonOptions: {
     kind: Kind;
     size: Size;
+    tech: Tech;
 };
@@ -9,2 +10,3 @@ export declare function getDefaultOptions(options?: ButtonOptions): {
     size: Size;
+    tech: Tech;
 };

build/components/Button/shared.js

 export const defaultButtonOptions = {
     kind: 'text',
     size: 'm',
+    tech: '',
 };
 export function getDefaultOptions(options) {
-    var _a, _b;
+    var _a, _b, _c;
     return {
         kind: (_a = options === null || options === void 0 ? void 0 : options.kind) !== null && _a !== void 0 ? _a : defaultButtonOptions.kind,
         size: (_b = options === null || options === void 0 ? void 0 : options.size) !== null && _b !== void 0 ? _b : defaultButtonOptions.size,
+        tech: (_c = options === null || options === void 0 ? void 0 : options.tech) !== null && _c !== void 0 ? _c : defaultButtonOptions.tech,
     };
 }

build/components/Button/types.d.ts

@@ -5,2 +5,3 @@ import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
     size?: Size;
+    tech?: Tech;
 }
@@ -10,1 +11,2 @@ export declare type ButtonType = 'button' | 'submit' | 'reset' | undefined;
 export declare type Size = 'xs' | 's' | 'm' | 'l';
+export declare type Tech = 'chakra' | '';

package.json

 {
   "name": "@pluralsight/headless-styles",
-  "version": "0.0.0-experimental-a4ff83-20220321",
+  "version": "0.0.0-experimental-aae46e-20220325",
   "description": "Headless styles for Pluralsight.",
@@ -5,0 +5,0 @@ "main": "./build/index.js",

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16873

increased by21.64%

Lines of code

525

increased by24.11%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of downloads

117

decreased by-52.05%

No dependency changes