@ramosdiego/ui - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/buttons.js

@@ -33,3 +33,3 @@ "use strict";
     }
-    const buttonBaseStyles = Object.assign(Object.assign(Object.assign({ padding: `${theme(`spacing[2]`)} ${theme(`spacing[4]`)}`, userSelect: 'none', outline: '2px solid transparent', width: '100%', outlineOffset: '2px', '&:disabled': {
+    const buttonBaseStyles = Object.assign(Object.assign(Object.assign({ padding: `${theme(`spacing[2]`)} ${theme(`spacing[4]`)}`, borderWidth: theme(`borderWidth[2]`), borderColor: theme('borderColor[transparent]'), userSelect: 'none', outline: '2px solid transparent', outlineOffset: '2px', '&:disabled': {
             opacity: '80%',
@@ -54,8 +54,10 @@ cursor: 'not-allowed',
     colors.forEach((color) => {
-        components[`.btn-${color}-fill`] = Object.assign(Object.assign({}, buttonBaseStyles), { backgroundColor: theme(`colors.${color}[100]`), borderWidth: '0px', color: theme(`colors.${color}[900]`), '&:not(:disabled):hover': {
+        components[`.btn-${color}-fill`] = Object.assign(Object.assign({}, buttonBaseStyles), { backgroundColor: theme(`colors.${color}[100]`), color: theme(`colors.${color}[900]`), '&:not(:disabled):hover': {
                 backgroundColor: theme(`colors.${color}[50]`),
             }, '&:focus': {
+                backgroundColor: theme(`colors.${color}[50]`),
                 boxShadow: `0 0 0 2px ${theme(`colors.${color}[300]`)}`,
             }, '&:disabled': Object.assign(Object.assign({}, buttonBaseStyles['&:disabled']), { color: theme(`colors.neutral[600]`), backgroundColor: theme(`colors.neutral[100]`) }) });
-        components[`.btn-${color}-fill-dark`] = Object.assign(Object.assign({}, buttonBaseStyles), { backgroundColor: theme(`colors.${color}[900]`), borderWidth: '0px', color: theme(`colors.${color}[50]`), '&:not(:disabled):hover': {
+        components[`.btn-${color}-fill-dark`] = Object.assign(Object.assign({}, buttonBaseStyles), { backgroundColor: theme(`colors.${color}[900]`), color: theme(`colors.${color}[50]`), '&:not(:disabled):hover': {
+                color: theme(`colors.white`),
                 backgroundColor: theme(`colors.${color}[800]`),
@@ -65,20 +67,28 @@ }, '&:focus': {
             }, '&:disabled': Object.assign(Object.assign({}, buttonBaseStyles['&:disabled']), { color: theme(`colors.neutral[50]`), backgroundColor: theme(`colors.neutral[600]`) }) });
-        components[`.btn-${color}-outline`] = Object.assign(Object.assign({}, buttonBaseStyles), { borderWidth: buttonBaseStyles['borderWidth'] || theme(`borderWidth[2]`), borderColor: theme(`colors.${color}[200]`), color: theme(`colors.${color}[900]`), '&:not(:disabled):hover': {
+        components[`.btn-${color}-outline`] = Object.assign(Object.assign({}, buttonBaseStyles), { borderColor: theme(`colors.${color}[200]`), color: theme(`colors.${color}[900]`), '&:not(:disabled):hover': {
                 backgroundColor: theme(`colors.${color}[50]`),
             }, '&:focus': {
+                backgroundColor: theme(`colors.${color}[50]`),
                 boxShadow: `0 0 0 2px ${theme(`colors.${color}[300]`)}`,
             }, '&:disabled': Object.assign(Object.assign({}, buttonBaseStyles['&:disabled']), { color: theme(`colors.neutral[600]`), borderColor: theme(`colors.neutral[200]`) }) });
-        components[`.btn-${color}-outline-dark`] = Object.assign(Object.assign({}, buttonBaseStyles), { borderWidth: buttonBaseStyles['borderWidth'] || theme(`borderWidth[2]`), borderColor: theme(`colors.${color}[900]`), color: theme(`colors.${color}[50]`), '&:not(:disabled):hover': {
-                backgroundColor: theme(`colors.${color}[900]`),
+        components[`.btn-${color}-outline-dark`] = Object.assign(Object.assign({}, buttonBaseStyles), { borderColor: theme(`colors.${color}[800]`), color: theme(`colors.${color}[50]`), '&:not(:disabled):hover': {
+                color: theme(`colors.white`),
+                backgroundColor: theme(`colors.${color}[800]`),
             }, '&:focus': {
+                color: theme(`colors.white`),
+                backgroundColor: theme(`colors.${color}[800]`),
                 boxShadow: `0 0 0 2px ${theme(`colors.${color}[500]`)}`,
             }, '&:disabled': Object.assign(Object.assign({}, buttonBaseStyles['&:disabled']), { color: theme(`colors.neutral[50]`), borderColor: theme(`colors.neutral[600]`) }) });
-        components[`.btn-${color}-ghost`] = Object.assign(Object.assign({}, buttonBaseStyles), { borderWidth: '0px', color: theme(`colors.${color}[900]`), '&:not(:disabled):hover': {
+        components[`.btn-${color}-ghost`] = Object.assign(Object.assign({}, buttonBaseStyles), { color: theme(`colors.${color}[900]`), '&:not(:disabled):hover': {
                 backgroundColor: theme(`colors.${color}[50]`),
             }, '&:focus': {
+                backgroundColor: theme(`colors.${color}[50]`),
                 boxShadow: `0 0 0 2px ${theme(`colors.${color}[300]`)}`,
             }, '&:disabled': Object.assign(Object.assign({}, buttonBaseStyles['&:disabled']), { color: theme(`colors.neutral[600]`) }) });
-        components[`.btn-${color}-ghost-dark`] = Object.assign(Object.assign({}, buttonBaseStyles), { borderWidth: '0px', color: theme(`colors.${color}[50]`), '&:not(:disabled):hover': {
-                backgroundColor: theme(`colors.${color}[900]`),
+        components[`.btn-${color}-ghost-dark`] = Object.assign(Object.assign({}, buttonBaseStyles), { color: theme(`colors.${color}[50]`), '&:not(:disabled):hover': {
+                color: theme(`colors.white`),
+                backgroundColor: theme(`colors.${color}[800]`),
             }, '&:focus': {
+                color: theme(`colors.white`),
+                backgroundColor: theme(`colors.${color}[800]`),
                 boxShadow: `0 0 0 2px ${theme(`colors.${color}[500]`)}`,
@@ -85,0 +95,0 @@ }, '&:disabled': Object.assign(Object.assign({}, buttonBaseStyles['&:disabled']), { color: theme(`colors.neutral[50]`), backgroundColor: theme(`colors.nuetral[900]`) }) });

package.json

 {
   "name": "@ramosdiego/ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A TailwindCSS plugin which serves a as UI library.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -325,2 +325,23 @@ # @ramosdiego/ui
 
+You can choose to between three button presets.
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [],
+  ...
+  plugins: [require('@ramosdiego/ui')({
+    buttons: {
+        animate: true,
+        preset: 'playful',
+        // OR
+        preset: 'elegant',
+        // OR DEFAULT
+    }
+)],
+}
+```
+
+To choose the default preset, DO NOT set a preset.
+
 # Types
@@ -339,15 +360,18 @@
 
-interface PluginOptions {
-  globalStyles?: UserStyles
-  buttons?: {
-    animate?: boolean
-    baseStyles?: UserStyles
-  }
-  inputs?: {
-    baseStyles?: UserStyles
-  }
-  badges?: {
-    baseStyles?: UserStyles
-  }
-}
+type PluginOptions =
+  | {
+      globalStyles?: UserStyles
+      buttons?: {
+        animate?: boolean
+        preset?: 'playful' | 'elegant'
+        baseStyles?: UserStyles
+      }
+      inputs?: {
+        baseStyles?: UserStyles
+      }
+      badges?: {
+        baseStyles?: UserStyles
+      }
+    }
+  | undefined
 ```

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

23342

increased by3.77%

Lines of code

223

increased by4.21%

Number of lines in readme file

376

increased by6.82%

No dependency changes