@pluralsight/headless-styles - npm Package Compare versions

Comparing version 0.0.0-alpha-e5a00d to 0.0.0-alpha-e77b36

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';
-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',
-        },
-    },
-    css: `
-  appearance: none;
-  background-color: transparent;
-  border: none;
-  border-radius: 6px;
-  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;
-
-  &:active {
-    outline: none;
-  }
-  &:focus {
-    outline: 3px solid ${psBackgroundActive};
-  }
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-    outline: none;
-  }
-`,
-};
+import { transformStyles } from '../../utils/helpers';
+import styles from './generated/buttonCSS.module';
+const baseStyles = Object.assign(Object.assign({}, styles.base), { '&:focus': {
+        outline: `3px solid ${psBackgroundActive}`,
+    } });
 function getKindStyles(kind) {
     switch (kind) {
         case 'text-weak':
-            return {
-                css: `
-          color: ${psTextMedium};
-        `,
-                js: {
-                    color: psTextMedium,
-                },
-            };
+            return Object.assign(Object.assign({}, styles.text_weak), { color: psTextMedium, '&:active': {
+                    backgroundColor: psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: psBackgroundHover,
+                    color: '#fff',
+                } });
         case 'weak':
-            return {
-                css: `
-          background-color: ${psNeutralBackground};
-          color: ${psNeutralText};
-        `,
-                js: {
-                    backgroundColor: `${psNeutralBackground}`,
-                    color: psNeutralText,
-                },
-            };
+            return Object.assign(Object.assign({}, styles.weak), { backgroundColor: psNeutralBackground, color: psNeutralText, '&:active': {
+                    backgroundColor: psNeutralBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: psNeutralBackgroundHover,
+                } });
         case 'medium':
-            return {
-                css: `
-          background-color: ${psBackground};
-          color: #fff;
-        `,
-                js: {
-                    backgroundColor: `${psBackground}`,
+            return Object.assign(Object.assign({}, styles.medium), { backgroundColor: psBackground, '&:active': {
+                    backgroundColor: psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: psBackgroundHover,
                     color: '#fff',
-                },
-            };
+                } });
         case 'strong':
-            return {
-                css: `
-          background-color: ${psBackgroundWeak};
-          color: ${psText};
-        `,
-                js: {
-                    backgroundColor: `${psBackgroundWeak}`,
-                    color: psText,
-                },
-            };
+            return Object.assign(Object.assign({}, styles.strong), { backgroundColor: psBackgroundWeak, color: psText, '&:active': {
+                    backgroundColor: psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: psBackgroundHover,
+                    color: '#fff',
+                } });
         default:
-            return {
-                css: `
-          color: ${psNeutralTextWeak};
-        `,
-                js: {
-                    color: psNeutralTextWeak,
-                },
-            };
+            return Object.assign(Object.assign({}, styles.text), { color: psNeutralTextWeak, '&:active': {
+                    backgroundColor: psBackgroundActive,
+                }, '&:hover': {
+                    backgroundColor: psNeutralBackgroundHover,
+                    color: '#fff',
+                } });
     }
 }
-function getSizeStyles(size) {
-    switch (size) {
-        case 'xs':
-            return {
-                css: `
-          font-size: 12px;
-          padding: 4px 8px;
-        `,
-                js: {
-                    fontSize: '12px',
-                    padding: '4px 8px',
-                },
-            };
-        case 's':
-            return {
-                css: `
-          font-size: 14px;
-          padding: 6px 12px;
-        `,
-                js: {
-                    fontSize: '14px',
-                    padding: '6px 12px',
-                },
-            };
-        case 'l':
-            return {
-                css: `
-          font-size: 16px;
-          padding: 14.5px 24px;
-        `,
-                js: {
-                    fontSize: BASE_FONT_SIZE,
-                    padding: '14.5px 24px',
-                },
-            };
-        default:
-            return {
-                css: `
-          font-size: 16px;
-          padding: 10px 16px;
-        `,
-                js: {
-                    fontSize: BASE_FONT_SIZE,
-                    padding: '10px 16px',
-                },
-            };
-    }
-}
-function getPsuedoStyles(kind) {
-    switch (kind) {
-        case 'text-weak':
-        case 'medium':
-        case 'strong':
-            return {
-                css: `
-          &:hover {
-            color: #fff;
-            background-color: ${psBackgroundHover};
-          }
-          &:active {
-            background-color: ${psBackgroundActive};
-          }
-        `,
-                js: {
-                    hover: {
-                        color: '#fff',
-                        backgroundColor: psBackgroundHover,
-                    },
-                    active: {
-                        backgroundColor: `${psBackgroundActive}`,
-                    },
-                },
-            };
-        case 'weak':
-            return {
-                css: `
-          &:hover {
-            color: #fff;
-            background-color: ${psNeutralBackgroundHover};
-          }
-          &:active {
-            background-color: ${psNeutralBackgroundActive};
-          }
-        `,
-                js: {
-                    hover: {
-                        color: '#fff',
-                        backgroundColor: psNeutralBackgroundHover,
-                    },
-                    active: {
-                        backgroundColor: `${psNeutralBackgroundActive}`,
-                    },
-                },
-            };
-        default:
-            return {
-                css: `
-          &:hover {
-            color: #fff;
-            background-color: ${psNeutralBackgroundHover};
-          }
-          &:active {
-            background-color: ${psBackgroundActive};
-          }
-        `,
-                js: {
-                    hover: {
-                        color: '#fff',
-                        backgroundColor: psNeutralBackgroundHover,
-                    },
-                    active: {
-                        backgroundColor: `${psBackgroundActive}`,
-                    },
-                },
-            };
-    }
-}
 export function getJSButtonProps(options) {
     const { kind, size } = getDefaultOptions(options);
     const kindStyles = getKindStyles(kind);
-    const sizeStyles = getSizeStyles(size);
-    const psuedoStyles = getPsuedoStyles(kind);
+    const sizeKey = `size_${size}`;
+    const JsStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, baseStyles), kindStyles), styles[sizeKey]), { '&:active': Object.assign(Object.assign({}, baseStyles['&:active']), kindStyles['&:active']) });
     return {
-        cssProps: `
-      ${baseStyles.css.trim()}
-      ${kindStyles.css.trim()}
-      ${sizeStyles.css.trim()}
-      ${psuedoStyles.css.trim()}
-    `
-            .trim()
-            .replace(/^ {2,12}/gm, ''),
-        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) }),
+        cssProps: transformStyles(JsStyles),
+        styles: JsStyles,
         type: 'button',
     };
 }

package.json

 {
   "name": "@pluralsight/headless-styles",
-  "version": "0.0.0-alpha-e5a00d",
+  "version": "0.0.0-alpha-e77b36",
   "description": "Headless styles for Pluralsight.",
-  "main": "./build/index.js",
+  "main": "build/common/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
   "files": [
@@ -13,4 +15,9 @@ "build/**/*"
   ],
+  "workspaces": [
+    "sandbox"
+  ],
   "scripts": {
-    "build": "yarn copy:css && tsc --project tsconfig.build.json",
+    "build": "yarn build:common && yarn build:es",
+    "build:common": "tsc --project tsconfig.cjs.json",
+    "build:es": "yarn copy:css && tsc --project tsconfig.build.json",
     "copy:css": "copyfiles --up 1 ./src/**/*.module.css build",
@@ -20,3 +27,4 @@ "test": "echo \"'yarn test' should be run from root directory.\" && exit 1"
   "dependencies": {
-    "@pluralsight/design-tokens": "alpha"
+    "@pluralsight/design-tokens": "alpha",
+    "kebab-case": "^1.0.1"
   },
@@ -23,0 +31,0 @@ "devDependencies": {

New alerts

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

182853

increased by1009.95%

Number of package files

31

increased by138.46%

Lines of code

6641

increased by1202.16%

Worsened metrics

Dependency count

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedkebab-case@^1.0.1

• + Addedkebab-case@1.0.2(transitive)