@pluralsight/headless-styles - npm Package Compare versions

Comparing version 0.0.0-experimental-04c0da-20220322 to 0.0.0-experimental-08c739-20220324

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

@@ -24,2 +24,3 @@ import type { ButtonOptions, ButtonType } from './types';
         height: string;
+        outlineOffset: string;
         textAlign: string;
@@ -29,3 +30,2 @@ textDecoration: string;
         transition: string;
-        transitionProperty: string;
         '&:focus': {
@@ -58,2 +58,3 @@ outline: string;
         height: string;
+        outlineOffset: string;
         textAlign: string;
@@ -63,3 +64,2 @@ textDecoration: string;
         transition: string;
-        transitionProperty: string;
         '&:focus': {
@@ -66,0 +66,0 @@ outline: string;

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 BASE_FONT_SIZE = '16px !important';
+const BASE_FONT_SIZE = '16px';
 const baseStyles = {
     js: {
         appearance: 'none',
-        backgroundColor: 'transparent !important',
+        backgroundColor: 'transparent',
         border: 'none',
-        borderRadius: '6px !important',
+        borderRadius: '6px',
         cursor: 'pointer',
         fontFamily: 'PS TT Commons Roman, Gotham SSm A, Gotham SSm B, Arial,sans-serif',
         fontSize: BASE_FONT_SIZE,
-        fontWeight: 'inherit !important',
-        height: 'initial !important',
+        fontWeight: 'inherit',
+        height: 'initial',
+        outlineOffset: 'initial',
         padding: '10px 16px',
@@ -20,3 +21,2 @@ textAlign: 'center',
         transition: 'background-color 250ms ease-in-out, color 250ms ease-in-out',
-        transitionProperty: 'background-color, color !important',
         '&:active': {
@@ -35,10 +35,11 @@ outline: 'none',
   appearance: none;
-  background-color: transparent !important;
+  background-color: transparent;
   border: none;
-  border-radius: 6px !important;
+  border-radius: 6px;
   cursor: pointer;
   font-family: 'PS TT Commons Roman', 'Gotham SSm A', 'Gotham SSm B', Arial,
   sans-serif;
-  font-weight: inherit !important;
-  height: initial !important;
+  font-weight: inherit;
+  height: initial;
+  outline-offset: initial;
   text-align: center;
@@ -48,3 +49,2 @@ text-decoration: none;
   transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
-  transition-property: background-color, color !important;
 
@@ -77,7 +77,7 @@ &:active {
                 css: `
-          background-color: ${psNeutralBackground} !important;
+          background-color: ${psNeutralBackground};
           color: ${psNeutralText};
         `,
                 js: {
-                    backgroundColor: `${psNeutralBackground} !important`,
+                    backgroundColor: `${psNeutralBackground}`,
                     color: psNeutralText,
@@ -89,7 +89,7 @@ },
                 css: `
-          background-color: ${psBackground} !important;
+          background-color: ${psBackground};
           color: #fff;
         `,
                 js: {
-                    backgroundColor: `${psBackground} !important`,
+                    backgroundColor: `${psBackground}`,
                     color: '#fff',
@@ -101,7 +101,7 @@ },
                 css: `
-          background-color: ${psBackgroundWeak} !important;
+          background-color: ${psBackgroundWeak};
           color: ${psText};
         `,
                 js: {
-                    backgroundColor: `${psBackgroundWeak} !important`,
+                    backgroundColor: `${psBackgroundWeak}`,
                     color: psText,
@@ -126,7 +126,7 @@ },
                 css: `
-          font-size: 12px !important;
+          font-size: 12px;
           padding: 4px 8px;
         `,
                 js: {
-                    fontSize: '12px !important',
+                    fontSize: '12px',
                     padding: '4px 8px',
@@ -138,7 +138,7 @@ },
                 css: `
-          font-size: 14px !important;
+          font-size: 14px;
           padding: 6px 12px;
         `,
                 js: {
-                    fontSize: '14px !important',
+                    fontSize: '14px',
                     padding: '6px 12px',
@@ -150,3 +150,3 @@ },
                 css: `
-          font-size: 16px !important;
+          font-size: 16px;
           padding: 14.5px 24px;
@@ -162,3 +162,3 @@ `,
                 css: `
-          font-size: 16px !important;
+          font-size: 16px;
           padding: 10px 16px;
@@ -185,3 +185,3 @@ `,
           &:active {
-            background-color: ${psBackgroundActive} !important;
+            background-color: ${psBackgroundActive};
           }
@@ -195,3 +195,3 @@ `,
                     active: {
-                        backgroundColor: `${psBackgroundActive} !important`,
+                        backgroundColor: `${psBackgroundActive}`,
                     },
@@ -208,3 +208,3 @@ },
           &:active {
-            background-color: ${psNeutralBackgroundActive} !important;
+            background-color: ${psNeutralBackgroundActive};
           }
@@ -218,3 +218,3 @@ `,
                     active: {
-                        backgroundColor: `${psNeutralBackgroundActive} !important`,
+                        backgroundColor: `${psNeutralBackgroundActive}`,
                     },
@@ -231,3 +231,3 @@ },
           &:active {
-            background-color: ${psBackgroundActive} !important;
+            background-color: ${psBackgroundActive};
           }
@@ -241,3 +241,3 @@ `,
                     active: {
-                        backgroundColor: `${psBackgroundActive} !important`,
+                        backgroundColor: `${psBackgroundActive}`,
                     },
@@ -244,0 +244,0 @@ },

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-04c0da-20220322",
+  "version": "0.0.0-experimental-08c739-20220324",
   "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

Improved metrics

Total package byte prevSize

16490

increased by6.09%

Lines of code

510

increased by11.84%

No dependency changes