Update button colors (#1365)

* Update background colors

* Update TSdoc

* Add changeset

* Fix format

Author: oscarcarlstrom

.changeset/few-poets-return.md

@@ -0,0 +1,16 @@
+---
+"@obosbbl/grunnmuren-react": major
+---
+
+Changes background colors on buttons. The `green` color prop value is now replaced by `blue`. So upgrading to this version means you have to migrate any `<Button color="green">` to `<Button color="blue">`. You also have to make sure the new colors have sufficent contranst against your backgrounds.
+
+Buttons like these will need a visual check against their backgrounds:
+- `<Button>`
+- `<Button variant="primary">`
+- `<Button color="blue">`
+- `<Button color="blue" variant="primary" >`
+- `<Button variant="secondary">`
+- `<Button color="blue" variant="secondary">`
+
+
+Since `blue` is the new default for `color`, you *probably* only have <Button> or <Button variant="secondary"> and maybe <Button variant="primary"> in your code base. As the rest of the combinations would be verbose considering the the defaults.

packages/react/src/button/button.stories.tsx

@@ -15,7 +15,7 @@ const meta: Meta<typeof Button> = {
     let bgColor = '';
 
     if (props.color === 'mint') {
-      bgColor = 'bg-green-dark';
+      bgColor = 'bg-blue-dark';
     } else if (props.color === 'white') {
       bgColor = 'bg-blue';
     }
@@ -37,7 +37,6 @@ type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = {
   args: {
-    color: 'green',
     variant: 'primary',
     isPending: false,
   },
@@ -105,33 +104,33 @@ export const ButtonSandbox = () => {
         <Button variant="tertiary">Tertiary</Button>
       </div>
 
-      <div className="bg-mint-lightest p-8">
+      <div className="bg-sky-lightest p-8">
         <div className="flex gap-8">
           <Button>Primary</Button>
           <Button variant="secondary">Secondary</Button>
           <Button variant="tertiary">Tertiary</Button>
         </div>
       </div>
 
-      <div className="bg-green-dark">
+      <div className="bg-blue-dark">
         <div className="flex gap-8 p-8">
-          <Button color="mint">Primary</Button>
-          <Button color="mint" variant="secondary">
+          <Button color="white">Primary</Button>
+          <Button color="white" variant="secondary">
             Secondary
           </Button>
-          <Button color="mint" variant="tertiary">
+          <Button color="white" variant="tertiary">
             Tertiary
           </Button>
         </div>
       </div>
 
-      <div className="bg-blue p-8">
+      <div className="bg-green-dark p-8">
         <div className="flex gap-8">
-          <Button color="white">Primary</Button>
-          <Button color="white" variant="secondary">
+          <Button color="mint">Primary</Button>
+          <Button color="mint" variant="secondary">
             Secondary
           </Button>
-          <Button color="white" variant="tertiary">
+          <Button color="mint" variant="tertiary">
             Tertiary
           </Button>
         </div>

packages/react/src/button/button.tsx

@@ -29,15 +29,16 @@ const buttonVariants = cva({
     variant: {
       primary: 'no-underline',
       // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
-      secondary: 'no-underline shadow-[inset_0_0_0_2px]',
+      secondary:
+        'border-2 border-current no-underline hover:border-transparent',
       tertiary: 'underline hover:no-underline',
     },
     /**
      * Adjusts the color of the button for usage on different backgrounds.
-     * @default green
+     * @default blue
      */
     color: {
-      green: 'focus-visible:outline-focus',
+      blue: 'focus-visible:outline-focus',
       mint: 'focus-visible:outline-focus focus-visible:outline-mint',
       white: 'focus-visible:outline-focus focus-visible:outline-white',
     },
@@ -54,20 +55,20 @@ const buttonVariants = cva({
   },
   compoundVariants: [
     {
-      color: 'green',
+      color: 'blue',
       variant: 'primary',
       // Darken bg by 20% on hover. The color is manually crafted
       className:
-        'bg-green text-white hover:bg-green-dark active:bg-[#007352] [&_[role="progressbar"]]:text-white',
+        'bg-blue-dark text-white hover:bg-blue active:bg-[#0536A0] active:text-white [&_[role="progressbar"]]:text-white',
     },
     {
-      color: 'green',
+      color: 'blue',
       variant: 'secondary',
       className:
-        'text-black shadow-green hover:bg-green hover:text-white active:bg-green [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-black',
+        'text-blue-dark hover:border-transparent hover:bg-blue hover:text-blue-dark hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-blue-dark',
     },
     {
-      color: 'green',
+      color: 'blue',
       variant: 'tertiary',
       className: '[&_[role="progressbar"]]:text-black',
     },
@@ -82,7 +83,7 @@ const buttonVariants = cva({
       color: 'mint',
       variant: 'secondary',
       className:
-        'text-mint shadow-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint',
+        'text-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint',
     },
     {
       color: 'mint',
@@ -99,7 +100,7 @@ const buttonVariants = cva({
       color: 'white',
       variant: 'secondary',
       className:
-        'text-white shadow-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white',
+        'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white',
     },
     {
       color: 'white',
@@ -109,7 +110,7 @@ const buttonVariants = cva({
   ],
   defaultVariants: {
     variant: 'primary',
-    color: 'green',
+    color: 'blue',
     isIconOnly: false,
     isPending: false,
   },