From 5e5d1301b32390142269ab74a3d23dc9391338fc Mon Sep 17 00:00:00 2001 From: alastair-simon Date: Mon, 19 Jan 2026 17:20:40 +0100 Subject: [PATCH 1/2] feat: update colours in buttons --- .../src/components/button/Button.css | 60 ++++++++++--------- .../src/components/button/Button.stories.tsx | 2 +- .../src/components/button/Button.types.ts | 2 +- 3 files changed, 34 insertions(+), 30 deletions(-) diff --git a/packages/component-library/src/components/button/Button.css b/packages/component-library/src/components/button/Button.css index ef01068..82edf1f 100644 --- a/packages/component-library/src/components/button/Button.css +++ b/packages/component-library/src/components/button/Button.css @@ -5,7 +5,7 @@ justify-content: center; gap: 8px; border: none; - border-radius: 8px; + border-radius: 6px; font-weight: 500; font-family: sans-serif; cursor: pointer; @@ -27,8 +27,8 @@ } .button--medium { - padding: 10px 20px; - font-size: 1em; + padding: 8px 16px; + font-size: 0.875em; gap: 8px; } @@ -40,64 +40,68 @@ /* Variant modifiers */ .button--primary { - background-color: rgb(14, 103, 255); + background-color: rgb(23, 23, 23); color: white; } .button--primary:hover:not(.button--disabled) { - background-color: rgb(10, 78, 194); + background-color: rgb(18, 18, 18); } .button--primary:active:not(.button--disabled) { - background-color: rgb(8, 62, 155); + background-color: rgb(15, 15, 15); } .button--primary.button--disabled { - background-color: rgb(84, 146, 253); + background-color: rgb(60, 60, 60); cursor: not-allowed; opacity: 0.6; } .button--secondary { - background: transparent; - border: 1px solid rgb(14, 103, 255); - color: rgb(14, 103, 255); + background-color: rgb(229, 229, 229); + color: rgb(0, 0, 0); + border: none; } .button--secondary:hover:not(.button--disabled) { - background-color: rgba(14, 103, 255, 0.1); - border-color: rgb(10, 78, 194); - color: rgb(10, 78, 194); + background-color: rgb(212, 212, 212); + color: rgb(0, 0, 0); } .button--secondary:active:not(.button--disabled) { - background-color: rgba(14, 103, 255, 0.2); - border-color: rgb(8, 62, 155); - color: rgb(8, 62, 155); + background-color: rgb(196, 196, 196); + color: rgb(0, 0, 0); } .button--secondary.button--disabled { - border-color: rgb(84, 146, 253); - color: rgb(84, 146, 253); + background-color: rgb(243, 243, 243); + color: rgb(0, 0, 0); cursor: not-allowed; opacity: 0.6; } -.button--critical { - background-color: rgb(220, 38, 38); - color: white; +.button--outline { + background: transparent; + border: 1px solid rgb(229, 229, 229); + color: rgb(0, 0, 0); } -.button--critical:hover:not(.button--disabled) { - background-color: rgb(185, 28, 28); +.button--outline:hover:not(.button--disabled) { + background-color: rgba(229, 229, 229, 0.1); + border-color: rgb(212, 212, 212); + color: rgb(0, 0, 0); } -.button--critical:active:not(.button--disabled) { - background-color: rgb(153, 27, 27); +.button--outline:active:not(.button--disabled) { + background-color: rgba(229, 229, 229, 0.2); + border-color: rgb(196, 196, 196); + color: rgb(0, 0, 0); } -.button--critical.button--disabled { - background-color: rgb(239, 68, 68); +.button--outline.button--disabled { + border-color: rgb(243, 243, 243); + color: rgb(0, 0, 0); cursor: not-allowed; opacity: 0.6; } @@ -152,4 +156,4 @@ to { transform: rotate(360deg); } -} +} \ No newline at end of file diff --git a/packages/component-library/src/components/button/Button.stories.tsx b/packages/component-library/src/components/button/Button.stories.tsx index 9b18606..960cbcb 100644 --- a/packages/component-library/src/components/button/Button.stories.tsx +++ b/packages/component-library/src/components/button/Button.stories.tsx @@ -7,7 +7,7 @@ const meta: Meta = { component: Button, argTypes: { variant: { - options: ['primary', 'secondary', 'critical'], + options: ['primary', 'secondary', 'outline'], control: { type: 'select' } diff --git a/packages/component-library/src/components/button/Button.types.ts b/packages/component-library/src/components/button/Button.types.ts index ddef4df..5acca2d 100644 --- a/packages/component-library/src/components/button/Button.types.ts +++ b/packages/component-library/src/components/button/Button.types.ts @@ -1,6 +1,6 @@ import type { ButtonHTMLAttributes, ReactNode, MouseEvent } from 'react'; -export type ButtonVariant = 'primary' | 'secondary' | 'critical'; +export type ButtonVariant = 'primary' | 'secondary' | 'outline'; export type ButtonSize = 'small' | 'medium' | 'large'; export interface ButtonProps extends Omit, 'onClick'> { From bb2ccd8d297d488d2e867ec8c1dcf88fd0a0bcac Mon Sep 17 00:00:00 2001 From: alastair-simon Date: Mon, 19 Jan 2026 17:26:18 +0100 Subject: [PATCH 2/2] fix: formatting issues --- packages/component-library/src/components/button/Button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/component-library/src/components/button/Button.css b/packages/component-library/src/components/button/Button.css index 82edf1f..43304e5 100644 --- a/packages/component-library/src/components/button/Button.css +++ b/packages/component-library/src/components/button/Button.css @@ -156,4 +156,4 @@ to { transform: rotate(360deg); } -} \ No newline at end of file +}