Skip to content

Commit

Permalink
Removed opacity styles from button component
Browse files Browse the repository at this point in the history
  • Loading branch information
@Explicit12
Explicit12 committed Jun 3, 2024
1 parent 3d429bb commit 2712eda
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 74 deletions.
2 changes: 1 addition & 1 deletion src/preset.tailwind/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function vuelessPreset() {
const devSafelist = [
{
pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
variants: ["hover", "focus", "focus-within", "active"],
variants: ["hover", "focus", "focus-within", "active", "disabled"],
},
];

Expand Down
128 changes: 55 additions & 73 deletions src/ui.button/configs/default.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,39 @@ export default /*tw*/ {
flex items-center justify-center
text-base font-medium rounded-lg outline-none
transition duration-100 ease-in-out
focus:ring-4 focus:ring-opacity-10 focus:outline-none
focus:ring-4 focus:outline-none
disabled:ring-0 disabled:cursor-no-drop
`,
variants: {
size: {
xs: "px-2 py-1.5 text-xs leading-tight",
sm: "px-3 py-2.5 text-sm leading-tight",
md: "px-4 py-3.5 text-base leading-tight",
lg: "px-5 py-[1.125rem] text-lg leading-tight",
xs: "px-2 py-1.5 text-xs leading-tight gap-0.5",
sm: "px-3 py-2.5 text-sm leading-tight gap-1",
md: "px-4 py-3.5 text-base leading-tight gap-1.5",
lg: "px-5 py-[1.125rem] text-lg leading-tight gap-2",
},
variant: {
primary: `
border border-solid border-{color}-500 bg-{color}-500 text-white
focus:border-opacity-0 focus:bg-opacity-80 focus:border-{color}-500 focus:bg-{color}-500
focus:ring-{color}-500
hover:border-{color}-500 hover:bg-{color}-500
hover:border-opacity-0 hover:bg-opacity-80
active:border-{color}-500 active:bg-{color}-500
active:border-opacity-0 active:bg-opacity-70`,
border border-solid border-{color}-600 bg-{color}-600 text-white
focus:border-{color}-700 focus:bg-{color}-700 focus:ring-{color}-100
hover:border-{color}-700 hover:bg-{color}-700 hover:border-transparent
active:bg-{color}-800 active:border-{color}-800
disabled:bg-{color}-300 disabled:text-white disabled:border-{color}-300
`,
secondary: `
border border-solid bg-transparent
border-{color}-500 text-{color}-500
focus:text-{color}-500 focus:border-{color}-500 focus:ring-{color}-500
focus:text-opacity-80 focus:border-opacity-80
hover:border-{color}-500 hover:text-{color}-500
hover:text-opacity-80 hover:border-opacity-80
active:border-{color}-500 active:text-{color}-500
active:border-opacity-70 active:text-opacity-70`,
border-{color}-600 text-{color}-600
focus:text-{color}-700 focus:border-{color}-700 focus:ring-{color}-100
hover:border-{color}-700 hover:text-{color}-700
active:border-{color}-800 active:text-{color}-800
disabled:text-{color}-300 disabled:border-{color}-300
`,
thirdary: `
border border-transparent bg-transparent text-{color}-500
focus:text-{color}-500 focus:bg-{color}-500 focus:ring-{color}-500
focus:text-opacity-70 focus:bg-opacity-5
hover:text-{color}-500 hover:bg-{color}-500
hover:text-opacity-70 hover:bg-opacity-10
active:text-{color}-500 active:bg-{color}-500
active:text-opacity-60 active:bg-opacity-15`,
border border-transparent bg-transparent text-{color}-600
focus:text-{color}-700 focus:bg-{color}-50 focus:ring-{color}-100
hover:text-{color}-700 hover:bg-{color}-150
active:text-{color}-800 active:bg-{color}-100
disabled:text-{color}-300
`,
},
loading: {
true: "pointer-events-none",
Expand All @@ -51,62 +49,37 @@ export default /*tw*/ {
},
},
compoundVariants: [
{
disabled: true,
variant: "primary",
class: `
border-opacity-0 bg-opacity-40 cursor-no-drop text-white
hover:bg-opacity-40
focus:bg-opacity-40 focus:ring-0
active:bg-opacity-40 active:ring-0
`,
},
{
disabled: true,
variant: "secondary",
class: `
text-opacity-40 border-opacity-40 cursor-no-drop
hover:text-opacity-40 hover:border-opacity-40
focus:text-opacity-40 focus:border-opacity-40 focus:ring-0
active:text-opacity-40 active:border-opacity-40 active:ring-0
`,
},
{
disabled: true,
variant: "thirdary",
class: `
bg-opacity-5 text-opacity-40 ring-opacity-0 cursor-no-drop
hover:bg-opacity-5 hover:text-opacity-40
focus:ring-0 focus:bg-opacity-5 focus:text-opacity-40
active:bg-opacity-5 active:ring-0 active:text-opacity-40
`,
},
{
color: "grayscale",
variant: "primary",
class: `
border-gray-900 bg-gray-900
hover:border-gray-900 hover:bg-gray-900
focus:border-gray-900 focus:ring-gray-900/20
active:border-gray-900 active:bg-gray-900`,
hover:border-gray-700 hover:bg-gray-700
focus:ring-gray-100 focus:ring-gray-100
active:border-gray-600 active:bg-gray-600
disabled:bg-gray-500 disabled:border-gray-500
`,
},
{
color: "grayscale",
variant: "secondary",
class: `
text-gray-900 border-gray-900
hover:border-gray-900 hover:text-gray-900
focus:border-gray-900 focus:text-gray-900 focus:ring-gray-900/20
active:border-gray-900 active:text-gray-900`,
hover:border-gray-700 hover:text-gray-700
focus:border-gray-700 focus:text-gray-700 focus:ring-gray-100
active:border-gray-600 active:text-gray-600
disabled:border-gray-500 disabled:text-gray-500
`,
},
{
color: "grayscale",
variant: "thirdary",
class: `
text-gray-900
focus:text-gray-800 focus:bg-gray-800 focus:ring-gray-800
hover:text-gray-800 hover:bg-gray-800
active:text-gray-800 active:bg-gray-800`,
text-gray-800
focus:text-gray-600 focus:bg-gray-200 focus:ring-gray-100
hover:text-gray-600 hover:bg-gray-200
active:text-gray-600 active:bg-gray-300 disabled:text-gray-500
`,
},
{
color: "white",
Expand All @@ -121,7 +94,7 @@ export default /*tw*/ {
color: "white",
variant: "secondary",
class: `
border-white bg-transparent text-white
border-white bg-transparent text-gray-500
focus:border-white focus:ring-white
hover:border-white
active:border-white`,
Expand All @@ -130,7 +103,7 @@ export default /*tw*/ {
color: "white",
variant: "thirdary",
class: `
border-transparent bg-transparent text-white
border-transparent bg-transparent text-gray-500
focus:bg-white focus:ring-white
hover:bg-white
active:bg-white`,
Expand All @@ -144,7 +117,7 @@ export default /*tw*/ {
{ square: true, size: "lg", class: "py-4" },
],
},
text: "whitespace-nowrap px-1.5",
text: "whitespace-nowrap",
defaultVariants: {
color: "brand",
variant: "primary",
Expand All @@ -158,9 +131,18 @@ export default /*tw*/ {
disabled: false,
},
safelist: (colors) => [
{ pattern: `border-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
{ pattern: `text-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
{ pattern: `ring-(${colors})-500`, variants: ["focus"] },
{ pattern: `bg-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
{ pattern: `border-(${colors})-600` },
{ pattern: `border-(${colors})-700`, variants: ["hover", "focus"] },
{ pattern: `border-(${colors})-800`, variants: ["active"] },
{ pattern: `border-(${colors})-300`, variants: ["disabled"] },
{ pattern: `bg-(${colors})-600` },
{ pattern: `bg-(${colors})-700`, variants: ["hover", "focus"] },
{ pattern: `bg-(${colors})-800`, variants: ["active"] },
{ pattern: `bg-(${colors})-300`, variants: ["disabled"] },
{ pattern: `text-(${colors})-600` },
{ pattern: `text-(${colors})-700`, variants: ["hover", "focus"] },
{ pattern: `text-(${colors})-800`, variants: ["active"] },
{ pattern: `text-(${colors})-300`, variants: ["disabled"] },
{ pattern: `ring-(${colors})-100`, variants: ["focus"] },
],
};

0 comments on commit 2712eda

Please sign in to comment.