From 55ecdd42293943c0621d78653118f5f5484b9783 Mon Sep 17 00:00:00 2001 From: Gareth Jones Date: Fri, 8 Sep 2023 16:26:14 -0400 Subject: [PATCH 1/7] Adding more tokens --- src/components/ButtonGroup/ButtonGroup.tsx | 36 +++++++++++++--------- src/styles/types.ts | 36 ++++++++++------------ src/styles/variables.json | 36 ++++++++++------------ 3 files changed, 56 insertions(+), 52 deletions(-) diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx index 05c1ba2c..1f662458 100644 --- a/src/components/ButtonGroup/ButtonGroup.tsx +++ b/src/components/ButtonGroup/ButtonGroup.tsx @@ -35,14 +35,15 @@ interface ButtonProps { } const ButtonGroupWrapper = styled.div` - box-sizing: border-box; +box-sizing: default; display: flex; flex-direction: row; justify-content: center; align-items: center; - padding: 0px 1px; - border: var(--click-button-group-color-stroke-panel); - background: var(--click-button-group-color-background-panel); + padding: 0px; + border: 1px solid ${({ theme }) => theme.click.button.group.color.stroke.panel}; + background: ${({ theme }) => + theme.click.button.group.color.background.panel}; `; const endRadii = "var(--click-button-button-group-radii-end)"; @@ -51,19 +52,29 @@ const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`; const centerBorderRadius = "var(--click-button-button-group-radii-center)"; const Button = styled.button` - box-sizing: border-box; + box-sizing: default; display: flex; flex-direction: row; justify-content: center; align-items: center; border: none; - padding: var(--click-button-basic-space-y) var(--click-button-basic-space-x); - gap: 10px; + background: ${({ theme }) => theme.click.button.group.color.background.default}; + color: ${({ theme }) => theme.click.button.group.color.text.default}; + font: ${({ theme }) => theme.click.button.basic.typography.label.default}; + border-radius: ${({ theme }) => theme.click.button.group.radii}; + padding: ${({ theme }) => + theme.click.button.basic.space.y} ${({ theme }) => + theme.click.button.basic.space.x}; + gap: ${({ theme }) => theme.click.button.basic.space.group}; + + &:hover { + background: ${({ theme }) => theme.click.button.group.color.background.hover}; + } + + &:active, &:focus { + background: ${({ theme }) => theme.click.button.group.color.background.active}; + } - background: ${({ active }: ButtonProps) => - active - ? "var(--click-button-group-color-background-active)" - : "var(--click-button-group-color-background-default)"}; border-radius: ${({ position }: ButtonProps) => position === "left" @@ -72,7 +83,4 @@ const Button = styled.button` ? rightBorderRadius : centerBorderRadius}; - &:hover { - background: var(--click-button-group-color-background-hover); - } `; diff --git a/src/styles/types.ts b/src/styles/types.ts index f60dcce0..ea014e20 100644 --- a/src/styles/types.ts +++ b/src/styles/types.ts @@ -538,10 +538,26 @@ } } }, - "button-group": { + "group": { "radii": { "center": string, "end": string + }, + "color": { + "background": { + "default": string, + "hover": string, + "active": string, + "panel": string + }, + "text": { + "default": string, + "hover": string, + "active": string + }, + "stroke": { + "panel": string + } } }, "alignLeft": { @@ -571,24 +587,6 @@ } } }, - "group": { - "color": { - "background": { - "default": string, - "hover": string, - "active": string, - "panel": string - }, - "text": { - "default": string, - "hover": string, - "active": string - }, - "stroke": { - "panel": string - } - } - }, "alignedLeft": { "color": { "background": { diff --git a/src/styles/variables.json b/src/styles/variables.json index 69facfaf..22811eb6 100644 --- a/src/styles/variables.json +++ b/src/styles/variables.json @@ -537,10 +537,26 @@ } } }, - "button-group": { + "group": { "radii": { "center": "0", "end": "0.25rem" + }, + "color": { + "background": { + "default": "#ffffff", + "hover": "lch(68.1 1.1 272)", + "active": "lch(81 1.31 272)", + "panel": "#ffffff" + }, + "text": { + "default": "#161517", + "hover": "#161517", + "active": "#151515" + }, + "stroke": { + "panel": "lch(91.6 1.1 266)" + } } }, "alignLeft": { @@ -570,24 +586,6 @@ } } }, - "group": { - "color": { - "background": { - "default": "#ffffff", - "hover": "lch(68.1 1.1 272)", - "active": "lch(81 1.31 272)", - "panel": "#ffffff" - }, - "text": { - "default": "#161517", - "hover": "#161517", - "active": "#151515" - }, - "stroke": { - "panel": "lch(91.6 1.1 266)" - } - } - }, "alignedLeft": { "color": { "background": { From e0b836bb0355a6e6b96928f9567c283b76252f06 Mon Sep 17 00:00:00 2001 From: Gareth Jones Date: Fri, 8 Sep 2023 16:55:53 -0400 Subject: [PATCH 2/7] Minor updates --- .../ButtonGroup/ButtonGroup.stories.ts | 1 + src/components/ButtonGroup/ButtonGroup.tsx | 33 ++-- src/styles/types.ts | 149 ++++++++++++---- src/styles/variables.classic.json | 167 +++++++++++++----- src/styles/variables.dark.json | 161 ++++++++++++----- src/styles/variables.json | 155 ++++++++++++---- src/styles/variables.light.json | 167 ++++++++++++------ ....timestamp-1694205012987-cf9ed025d3d95.mjs | 60 +++++++ 8 files changed, 655 insertions(+), 238 deletions(-) create mode 100644 vite.config.ts.timestamp-1694205012987-cf9ed025d3d95.mjs diff --git a/src/components/ButtonGroup/ButtonGroup.stories.ts b/src/components/ButtonGroup/ButtonGroup.stories.ts index 3b76d6fd..b91e6c65 100644 --- a/src/components/ButtonGroup/ButtonGroup.stories.ts +++ b/src/components/ButtonGroup/ButtonGroup.stories.ts @@ -10,5 +10,6 @@ export const Playground = { args: { labels: ["Button 1", "Button 2", "Button 3"], activeIndex: 2, + disabled: [false, false, true], }, }; diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx index 1f662458..337a28eb 100644 --- a/src/components/ButtonGroup/ButtonGroup.tsx +++ b/src/components/ButtonGroup/ButtonGroup.tsx @@ -6,11 +6,7 @@ export interface ButtonGroupProps { onClick?: (index: number) => void; } -export const ButtonGroup = ({ - labels, - activeIndex, - onClick, -}: ButtonGroupProps) => { +export const ButtonGroup = ({ labels, activeIndex, onClick }: ButtonGroupProps) => { const btns = labels.map((label, index) => { const position: ButtonPosition = index === 0 ? "left" : index === labels.length - 1 ? "right" : "center"; @@ -35,15 +31,15 @@ interface ButtonProps { } const ButtonGroupWrapper = styled.div` -box-sizing: default; - display: flex; + box-sizing: border-box; + display: inline-flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px; border: 1px solid ${({ theme }) => theme.click.button.group.color.stroke.panel}; - background: ${({ theme }) => - theme.click.button.group.color.background.panel}; + background: ${({ theme }) => theme.click.button.group.color.background.panel}; + border-radius: ${({ theme }) => theme.click.button.group.radii.end}; `; const endRadii = "var(--click-button-button-group-radii-end)"; @@ -52,7 +48,7 @@ const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`; const centerBorderRadius = "var(--click-button-button-group-radii-center)"; const Button = styled.button` - box-sizing: default; + box-sizing: border-box; display: flex; flex-direction: row; justify-content: center; @@ -61,20 +57,26 @@ const Button = styled.button` background: ${({ theme }) => theme.click.button.group.color.background.default}; color: ${({ theme }) => theme.click.button.group.color.text.default}; font: ${({ theme }) => theme.click.button.basic.typography.label.default}; - border-radius: ${({ theme }) => theme.click.button.group.radii}; - padding: ${({ theme }) => - theme.click.button.basic.space.y} ${({ theme }) => - theme.click.button.basic.space.x}; + border-radius: ${({ theme }) => theme.click.button.group.radii.end}; + padding: ${({ theme }) => theme.click.button.basic.space.y} + ${({ theme }) => theme.click.button.basic.space.x}; gap: ${({ theme }) => theme.click.button.basic.space.group}; + cursor: pointer; &:hover { background: ${({ theme }) => theme.click.button.group.color.background.hover}; } - &:active, &:focus { + &:active, + &:focus { background: ${({ theme }) => theme.click.button.group.color.background.active}; } + &:disabled { + cursor: disabled; + background: ${({ theme }) => + theme.click.button.basic.color.primary.background.disabled}; + } border-radius: ${({ position }: ButtonProps) => position === "left" @@ -82,5 +84,4 @@ const Button = styled.button` : position === "right" ? rightBorderRadius : centerBorderRadius}; - `; diff --git a/src/styles/types.ts b/src/styles/types.ts index ea014e20..e84f44fd 100644 --- a/src/styles/types.ts +++ b/src/styles/types.ts @@ -476,6 +476,23 @@ "text": { "default": string } + }, + "ghost": { + "background": { + "default": string, + "hover": string, + "active": string + }, + "stroke": { + "default": string, + "hover": string, + "active": string + }, + "text": { + "default": string, + "hover": string, + "active": string + } } } }, @@ -1423,22 +1440,6 @@ "height": string, "width": string } - }, - "color": { - "background": { - "active": string, - "hover": string, - "default": string - }, - "text": { - "default": string, - "hover": string, - "active": string, - "muted": string - }, - "icon": { - "default": string - } } }, "title": { @@ -1447,11 +1448,6 @@ "hover": string, "active": string, "disabled": string - }, - "color": { - "default": string, - "hover": string, - "active": string } }, "subItem": { @@ -1483,27 +1479,12 @@ "hover": string, "active": string, "disabled": string - }, - "color": { - "text": { - "default": string, - "hover": string, - "active": string - }, - "background": { - "default": string, - "hover": string, - "active": string - } } }, "dragControl": { "separator": { "size": { "height": string - }, - "color": { - "default": string } } } @@ -1520,6 +1501,54 @@ "stroke": { "default": string } + }, + "navigation": { + "item": { + "color": { + "background": { + "active": string, + "hover": string, + "default": string + }, + "text": { + "default": string, + "hover": string, + "active": string, + "muted": string + }, + "icon": { + "default": string + } + } + }, + "title": { + "color": { + "default": string, + "hover": string, + "active": string + } + }, + "subItem": { + "color": { + "text": { + "default": string, + "hover": string, + "active": string + }, + "background": { + "default": string, + "hover": string, + "active": string + } + } + }, + "dragControl": { + "separator": { + "color": { + "default": string + } + } + } } }, "sqlSidebar": { @@ -1530,6 +1559,54 @@ "stroke": { "default": string } + }, + "navigation": { + "item": { + "color": { + "background": { + "active": string, + "hover": string, + "default": string + }, + "text": { + "default": string, + "hover": string, + "active": string, + "muted": string + }, + "icon": { + "default": string + } + } + }, + "title": { + "color": { + "default": string, + "hover": string, + "active": string + } + }, + "subItem": { + "color": { + "text": { + "default": string, + "hover": string, + "active": string + }, + "background": { + "default": string, + "hover": string, + "active": string + } + } + }, + "dragControl": { + "separator": { + "color": { + "default": string + } + } + } } } }, diff --git a/src/styles/variables.classic.json b/src/styles/variables.classic.json index 0633def8..25a9390c 100644 --- a/src/styles/variables.classic.json +++ b/src/styles/variables.classic.json @@ -117,6 +117,23 @@ "text": { "default": "#c10000" } + }, + "ghost": { + "background": { + "default": "rgba(0,0,0,0)", + "hover": "rgba(0,0,0,0)", + "active": "rgb(0% 0% 0% / 0)" + }, + "stroke": { + "default": "rgba(0,0,0,0)", + "hover": "rgba(0,0,0,0)", + "active": "rgba(0,0,0,0)" + }, + "text": { + "default": "#696e79", + "hover": "#161517", + "active": "#161517" + } } } }, @@ -216,54 +233,6 @@ } }, "sidebar": { - "navigation": { - "item": { - "color": { - "background": { - "active": "lch(38.8 16.8 296 / 0.6)", - "hover": "lch(40.9 16.2 296)", - "default": "rgba(0,0,0,0)" - }, - "text": { - "default": "#f6f7fa", - "hover": "#ffffff", - "active": "#ffffff", - "muted": "#696e79" - }, - "icon": { - "default": "#e4e2e9" - } - } - }, - "title": { - "color": { - "default": "#ada8bd", - "hover": "#ada8bd", - "active": "#ada8bd" - } - }, - "subItem": { - "color": { - "text": { - "default": "#f6f7fa", - "hover": "#ffffff", - "active": "#ffffff" - }, - "background": { - "default": "rgba(0,0,0,0)", - "hover": "lch(40.9 16.2 296)", - "active": "rgba(0,0,0,0)" - } - } - }, - "dragControl": { - "separator": { - "color": { - "default": "#FFC029" - } - } - } - }, "main": { "color": { "background": { @@ -279,6 +248,22 @@ }, "navigation": { "item": { + "color": { + "background": { + "active": "lch(38.8 16.8 296 / 0.6)", + "hover": "lch(40.9 16.2 296)", + "default": "rgba(0,0,0,0)" + }, + "text": { + "default": "#f6f7fa", + "hover": "#ffffff", + "active": "#ffffff", + "muted": "#696e79" + }, + "icon": { + "default": "#e4e2e9" + } + }, "background": { "default": "rgba(0,0,0,0)", "active": "#474257", @@ -288,6 +273,92 @@ "default": "#ffffff", "muted": "#ada8bd" } + }, + "title": { + "color": { + "default": "#ada8bd", + "hover": "#ada8bd", + "active": "#ada8bd" + } + }, + "subItem": { + "color": { + "text": { + "default": "#f6f7fa", + "hover": "#ffffff", + "active": "#ffffff" + }, + "background": { + "default": "rgba(0,0,0,0)", + "hover": "lch(40.9 16.2 296)", + "active": "rgba(0,0,0,0)" + } + } + }, + "dragControl": { + "separator": { + "color": { + "default": "#FFC029" + } + } + } + } + }, + "sqlSidebar": { + "color": { + "background": { + "default": "#f6f7fa" + }, + "stroke": { + "default": "lch(91.6 1.1 266)" + } + }, + "navigation": { + "item": { + "color": { + "background": { + "active": "lch(91.6 1.1 266 / 0.6)", + "hover": "lch(91.6 1.1 266 / 0.6)", + "default": "rgba(0,0,0,0)" + }, + "text": { + "default": "#161517", + "hover": "#161517", + "active": "#161517", + "muted": "#696e79" + }, + "icon": { + "default": "#696e79" + } + } + }, + "title": { + "color": { + "default": "#696e79", + "hover": "#696e79", + "active": "#696e79" + } + }, + "subItem": { + "color": { + "text": { + "default": "#696e79", + "hover": "#ffffff", + "active": "#161517" + }, + "background": { + "default": "rgba(0,0,0,0)", + "hover": "lch(40.9 16.2 296)", + "active": "rgba(0,0,0,0)" + } + } + }, + "dragControl": { + "separator": { + "color": { + "default": "#161517" + } + } } } } diff --git a/src/styles/variables.dark.json b/src/styles/variables.dark.json index ab3194e4..17e22065 100644 --- a/src/styles/variables.dark.json +++ b/src/styles/variables.dark.json @@ -229,6 +229,23 @@ "text": { "default": "#ff7575" } + }, + "ghost": { + "background": { + "default": "rgba(0,0,0,0)", + "hover": "rgba(0,0,0,0)", + "active": "rgb(0% 0% 0% / 0)" + }, + "stroke": { + "default": "rgba(0,0,0,0)", + "hover": "rgba(0,0,0,0)", + "active": "rgba(0,0,0,0)" + }, + "text": { + "default": "#b3b6bd", + "hover": "#ffffff", + "active": "#ffffff" + } } } }, @@ -663,54 +680,6 @@ } }, "sidebar": { - "navigation": { - "item": { - "color": { - "background": { - "active": "lch(27.5 0 0 / 0.6)", - "hover": "lch(19.1 0 0)", - "default": "rgba(0,0,0,0)" - }, - "text": { - "default": "#ffffff", - "hover": "#ffffff", - "active": "#ffffff", - "muted": "#b3b6bd" - }, - "icon": { - "default": "#b3b6bd" - } - } - }, - "title": { - "color": { - "default": "#b3b6bd", - "hover": "#b3b6bd", - "active": "#b3b6bd" - } - }, - "subItem": { - "color": { - "text": { - "default": "#b3b6bd", - "hover": "#ffffff", - "active": "#ffffff" - }, - "background": { - "default": "rgba(0,0,0,0)", - "hover": "lch(19.1 0 0)", - "active": "rgba(0,0,0,0)" - } - } - }, - "dragControl": { - "separator": { - "color": { - "default": "#FAFF69" - } - } - } - }, "main": { "color": { "background": { @@ -723,6 +692,54 @@ "stroke": { "default": "lch(27.5 0 0 / 0.3)" } + }, + "navigation": { + "item": { + "color": { + "background": { + "active": "lch(27.5 0 0 / 0.6)", + "hover": "lch(19.1 0 0)", + "default": "rgba(0,0,0,0)" + }, + "text": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "#ffffff", + "muted": "#b3b6bd" + }, + "icon": { + "default": "#b3b6bd" + } + } + }, + "title": { + "color": { + "default": "#b3b6bd", + "hover": "#b3b6bd", + "active": "#b3b6bd" + } + }, + "subItem": { + "color": { + "text": { + "default": "#b3b6bd", + "hover": "#ffffff", + "active": "#ffffff" + }, + "background": { + "default": "rgba(0,0,0,0)", + "hover": "lch(19.1 0 0)", + "active": "rgba(0,0,0,0)" + } + } + }, + "dragControl": { + "separator": { + "color": { + "default": "#FAFF69" + } + } + } } }, "sqlSidebar": { @@ -733,6 +750,54 @@ "stroke": { "default": "lch(27.5 0 0 / 0.3)" } + }, + "navigation": { + "item": { + "color": { + "background": { + "active": "lch(27.5 0 0 / 0.6)", + "hover": "lch(19.1 0 0)", + "default": "rgba(0,0,0,0)" + }, + "text": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "#ffffff", + "muted": "#b3b6bd" + }, + "icon": { + "default": "#b3b6bd" + } + } + }, + "title": { + "color": { + "default": "#b3b6bd", + "hover": "#b3b6bd", + "active": "#b3b6bd" + } + }, + "subItem": { + "color": { + "text": { + "default": "#b3b6bd", + "hover": "#ffffff", + "active": "#ffffff" + }, + "background": { + "default": "rgba(0,0,0,0)", + "hover": "lch(19.1 0 0)", + "active": "rgba(0,0,0,0)" + } + } + }, + "dragControl": { + "separator": { + "color": { + "default": "#FAFF69" + } + } + } } } }, diff --git a/src/styles/variables.json b/src/styles/variables.json index 22811eb6..3d2944e3 100644 --- a/src/styles/variables.json +++ b/src/styles/variables.json @@ -475,6 +475,23 @@ "text": { "default": "#c10000" } + }, + "ghost": { + "background": { + "default": "rgba(0,0,0,0)", + "hover": "rgba(0,0,0,0)", + "active": "rgb(0% 0% 0% / 0)" + }, + "stroke": { + "default": "rgba(0,0,0,0)", + "hover": "rgba(0,0,0,0)", + "active": "rgba(0,0,0,0)" + }, + "text": { + "default": "#696e79", + "hover": "#161517", + "active": "#161517" + } } } }, @@ -544,10 +561,10 @@ }, "color": { "background": { - "default": "#ffffff", + "default": "#e6e7e9", "hover": "lch(68.1 1.1 272)", - "active": "lch(81 1.31 272)", - "panel": "#ffffff" + "active": "lch(85 0 0)", + "panel": "#e6e7e9" }, "text": { "default": "#161517", @@ -1422,22 +1439,6 @@ "height": "1rem", "width": "1rem" } - }, - "color": { - "background": { - "active": "lch(91.6 1.1 266 / 0.6)", - "hover": "lch(91.6 1.1 266 / 0.6)", - "default": "rgba(0,0,0,0)" - }, - "text": { - "default": "#161517", - "hover": "#161517", - "active": "#161517", - "muted": "#696e79" - }, - "icon": { - "default": "#696e79" - } } }, "title": { @@ -1446,11 +1447,6 @@ "hover": "500 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", "active": "500 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", "disabled": "500 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - }, - "color": { - "default": "#696e79", - "hover": "#696e79", - "active": "#696e79" } }, "subItem": { @@ -1482,27 +1478,12 @@ "hover": "400 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", "active": "500 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;", "disabled": "500 0.875rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;" - }, - "color": { - "text": { - "default": "#696e79", - "hover": "#161517", - "active": "#161517" - }, - "background": { - "default": "rgba(0,0,0,0)", - "hover": "lch(91.6 1.1 266 / 0.6)", - "active": "rgba(0,0,0,0)" - } } }, "dragControl": { "separator": { "size": { "height": "0.125rem" - }, - "color": { - "default": "#161517" } } } @@ -1519,6 +1500,54 @@ "stroke": { "default": "lch(91.6 1.1 266)" } + }, + "navigation": { + "item": { + "color": { + "background": { + "active": "lch(91.6 1.1 266 / 0.6)", + "hover": "lch(91.6 1.1 266 / 0.6)", + "default": "rgba(0,0,0,0)" + }, + "text": { + "default": "#161517", + "hover": "#161517", + "active": "#161517", + "muted": "#696e79" + }, + "icon": { + "default": "#696e79" + } + } + }, + "title": { + "color": { + "default": "#696e79", + "hover": "#696e79", + "active": "#696e79" + } + }, + "subItem": { + "color": { + "text": { + "default": "#696e79", + "hover": "#161517", + "active": "#161517" + }, + "background": { + "default": "rgba(0,0,0,0)", + "hover": "lch(91.6 1.1 266 / 0.6)", + "active": "rgba(0,0,0,0)" + } + } + }, + "dragControl": { + "separator": { + "color": { + "default": "#161517" + } + } + } } }, "sqlSidebar": { @@ -1529,6 +1558,54 @@ "stroke": { "default": "lch(91.6 1.1 266)" } + }, + "navigation": { + "item": { + "color": { + "background": { + "active": "lch(91.6 1.1 266 / 0.6)", + "hover": "lch(91.6 1.1 266 / 0.6)", + "default": "rgba(0,0,0,0)" + }, + "text": { + "default": "#161517", + "hover": "#161517", + "active": "#161517", + "muted": "#696e79" + }, + "icon": { + "default": "#696e79" + } + } + }, + "title": { + "color": { + "default": "#696e79", + "hover": "#696e79", + "active": "#696e79" + } + }, + "subItem": { + "color": { + "text": { + "default": "#696e79", + "hover": "#161517", + "active": "#161517" + }, + "background": { + "default": "rgba(0,0,0,0)", + "hover": "lch(91.6 1.1 266 / 0.6)", + "active": "rgba(0,0,0,0)" + } + } + }, + "dragControl": { + "separator": { + "color": { + "default": "#161517" + } + } + } } } }, diff --git a/src/styles/variables.light.json b/src/styles/variables.light.json index 03936ab8..961b05aa 100644 --- a/src/styles/variables.light.json +++ b/src/styles/variables.light.json @@ -229,6 +229,23 @@ "text": { "default": "#c10000" } + }, + "ghost": { + "background": { + "default": "rgba(0,0,0,0)", + "hover": "rgba(0,0,0,0)", + "active": "rgb(0% 0% 0% / 0)" + }, + "stroke": { + "default": "rgba(0,0,0,0)", + "hover": "rgba(0,0,0,0)", + "active": "rgba(0,0,0,0)" + }, + "text": { + "default": "#696e79", + "hover": "#161517", + "active": "#161517" + } } } }, @@ -271,10 +288,10 @@ "group": { "color": { "background": { - "default": "#ffffff", + "default": "#e6e7e9", "hover": "lch(68.1 1.1 272)", - "active": "lch(81 1.31 272)", - "panel": "#ffffff" + "active": "lch(85 0 0)", + "panel": "#e6e7e9" }, "text": { "default": "#161517", @@ -659,54 +676,6 @@ } }, "sidebar": { - "navigation": { - "item": { - "color": { - "background": { - "active": "lch(91.6 1.1 266 / 0.6)", - "hover": "lch(91.6 1.1 266 / 0.6)", - "default": "rgba(0,0,0,0)" - }, - "text": { - "default": "#161517", - "hover": "#161517", - "active": "#161517", - "muted": "#696e79" - }, - "icon": { - "default": "#696e79" - } - } - }, - "title": { - "color": { - "default": "#696e79", - "hover": "#696e79", - "active": "#696e79" - } - }, - "subItem": { - "color": { - "text": { - "default": "#696e79", - "hover": "#161517", - "active": "#161517" - }, - "background": { - "default": "rgba(0,0,0,0)", - "hover": "lch(91.6 1.1 266 / 0.6)", - "active": "rgba(0,0,0,0)" - } - } - }, - "dragControl": { - "separator": { - "color": { - "default": "#161517" - } - } - } - }, "main": { "color": { "background": { @@ -719,6 +688,54 @@ "stroke": { "default": "lch(91.6 1.1 266)" } + }, + "navigation": { + "item": { + "color": { + "background": { + "active": "lch(91.6 1.1 266 / 0.6)", + "hover": "lch(91.6 1.1 266 / 0.6)", + "default": "rgba(0,0,0,0)" + }, + "text": { + "default": "#161517", + "hover": "#161517", + "active": "#161517", + "muted": "#696e79" + }, + "icon": { + "default": "#696e79" + } + } + }, + "title": { + "color": { + "default": "#696e79", + "hover": "#696e79", + "active": "#696e79" + } + }, + "subItem": { + "color": { + "text": { + "default": "#696e79", + "hover": "#161517", + "active": "#161517" + }, + "background": { + "default": "rgba(0,0,0,0)", + "hover": "lch(91.6 1.1 266 / 0.6)", + "active": "rgba(0,0,0,0)" + } + } + }, + "dragControl": { + "separator": { + "color": { + "default": "#161517" + } + } + } } }, "sqlSidebar": { @@ -729,6 +746,54 @@ "stroke": { "default": "lch(91.6 1.1 266)" } + }, + "navigation": { + "item": { + "color": { + "background": { + "active": "lch(91.6 1.1 266 / 0.6)", + "hover": "lch(91.6 1.1 266 / 0.6)", + "default": "rgba(0,0,0,0)" + }, + "text": { + "default": "#161517", + "hover": "#161517", + "active": "#161517", + "muted": "#696e79" + }, + "icon": { + "default": "#696e79" + } + } + }, + "title": { + "color": { + "default": "#696e79", + "hover": "#696e79", + "active": "#696e79" + } + }, + "subItem": { + "color": { + "text": { + "default": "#696e79", + "hover": "#161517", + "active": "#161517" + }, + "background": { + "default": "rgba(0,0,0,0)", + "hover": "lch(91.6 1.1 266 / 0.6)", + "active": "rgba(0,0,0,0)" + } + } + }, + "dragControl": { + "separator": { + "color": { + "default": "#161517" + } + } + } } } }, diff --git a/vite.config.ts.timestamp-1694205012987-cf9ed025d3d95.mjs b/vite.config.ts.timestamp-1694205012987-cf9ed025d3d95.mjs new file mode 100644 index 00000000..807b087f --- /dev/null +++ b/vite.config.ts.timestamp-1694205012987-cf9ed025d3d95.mjs @@ -0,0 +1,60 @@ +// vite.config.ts +import { defineConfig } from "file:///Users/garethjones/Sites/click-ui/node_modules/vite/dist/node/index.js"; +import react from "file:///Users/garethjones/Sites/click-ui/node_modules/@vitejs/plugin-react/dist/index.mjs"; +import path, { resolve } from "path"; +import dts from "file:///Users/garethjones/Sites/click-ui/node_modules/vite-plugin-dts/dist/index.mjs"; +var __vite_injected_original_dirname = "/Users/garethjones/Sites/click-ui"; +var vite_config_default = defineConfig({ + plugins: [ + react({ + babel: { + plugins: [["babel-plugin-styled-components", { displayName: false }]], + env: { + development: { + plugins: [["babel-plugin-styled-components", { displayName: true }]] + } + } + } + }), + dts({ + include: ["src/"], + exclude: ["**/*.stories.ts", "**/*.stories.tsx", "**/*.test.ts", "**/*.test.tsx"] + }) + ], + resolve: { + alias: { + "@": path.resolve(__vite_injected_original_dirname, "./src") + } + }, + build: { + lib: { + entry: resolve(__vite_injected_original_dirname, "src/index.ts"), + name: "click-ui", + formats: ["es", "umd"], + fileName: (format) => `click-ui.${format}.js` + }, + rollupOptions: { + // Add _all_ external dependencies here + external: [ + "react", + "react-dom", + "styled-components", + "**/*.stories.ts", + "**/*.stories.tsx", + "**/*.test.ts", + "**/*.test.tsx" + ], + output: { + globals: { + react: "React", + "styled-components": "styled", + "react-dom": "ReactDOM" + } + } + } + } +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvZ2FyZXRoam9uZXMvU2l0ZXMvY2xpY2stdWlcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9nYXJldGhqb25lcy9TaXRlcy9jbGljay11aS92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvZ2FyZXRoam9uZXMvU2l0ZXMvY2xpY2stdWkvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidml0ZVwiO1xuaW1wb3J0IHJlYWN0IGZyb20gXCJAdml0ZWpzL3BsdWdpbi1yZWFjdFwiO1xuaW1wb3J0IHBhdGgsIHsgcmVzb2x2ZSB9IGZyb20gXCJwYXRoXCI7XG5pbXBvcnQgZHRzIGZyb20gXCJ2aXRlLXBsdWdpbi1kdHNcIjtcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtcbiAgICByZWFjdCh7XG4gICAgICBiYWJlbDoge1xuICAgICAgICBwbHVnaW5zOiBbW1wiYmFiZWwtcGx1Z2luLXN0eWxlZC1jb21wb25lbnRzXCIsIHsgZGlzcGxheU5hbWU6IGZhbHNlIH1dXSxcblxuICAgICAgICBlbnY6IHtcbiAgICAgICAgICBkZXZlbG9wbWVudDoge1xuICAgICAgICAgICAgcGx1Z2luczogW1tcImJhYmVsLXBsdWdpbi1zdHlsZWQtY29tcG9uZW50c1wiLCB7IGRpc3BsYXlOYW1lOiB0cnVlIH1dXSxcbiAgICAgICAgICB9LFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9KSxcbiAgICBkdHMoe1xuICAgICAgaW5jbHVkZTogW1wic3JjL1wiXSxcbiAgICAgIGV4Y2x1ZGU6IFtcIioqLyouc3Rvcmllcy50c1wiLCBcIioqLyouc3Rvcmllcy50c3hcIiwgXCIqKi8qLnRlc3QudHNcIiwgXCIqKi8qLnRlc3QudHN4XCJdLFxuICAgIH0pLFxuICBdLFxuICByZXNvbHZlOiB7XG4gICAgYWxpYXM6IHtcbiAgICAgIFwiQFwiOiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCBcIi4vc3JjXCIpLFxuICAgIH0sXG4gIH0sXG4gIGJ1aWxkOiB7XG4gICAgbGliOiB7XG4gICAgICBlbnRyeTogcmVzb2x2ZShfX2Rpcm5hbWUsIFwic3JjL2luZGV4LnRzXCIpLFxuICAgICAgbmFtZTogXCJjbGljay11aVwiLFxuICAgICAgZm9ybWF0czogW1wiZXNcIiwgXCJ1bWRcIl0sXG4gICAgICBmaWxlTmFtZTogZm9ybWF0ID0+IGBjbGljay11aS4ke2Zvcm1hdH0uanNgLFxuICAgIH0sXG4gICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgLy8gQWRkIF9hbGxfIGV4dGVybmFsIGRlcGVuZGVuY2llcyBoZXJlXG4gICAgICBleHRlcm5hbDogW1xuICAgICAgICBcInJlYWN0XCIsXG4gICAgICAgIFwicmVhY3QtZG9tXCIsXG4gICAgICAgIFwic3R5bGVkLWNvbXBvbmVudHNcIixcbiAgICAgICAgXCIqKi8qLnN0b3JpZXMudHNcIixcbiAgICAgICAgXCIqKi8qLnN0b3JpZXMudHN4XCIsXG4gICAgICAgIFwiKiovKi50ZXN0LnRzXCIsXG4gICAgICAgIFwiKiovKi50ZXN0LnRzeFwiLFxuICAgICAgXSxcbiAgICAgIG91dHB1dDoge1xuICAgICAgICBnbG9iYWxzOiB7XG4gICAgICAgICAgcmVhY3Q6IFwiUmVhY3RcIixcbiAgICAgICAgICBcInN0eWxlZC1jb21wb25lbnRzXCI6IFwic3R5bGVkXCIsXG4gICAgICAgICAgXCJyZWFjdC1kb21cIjogXCJSZWFjdERPTVwiLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICB9LFxufSk7XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXFSLFNBQVMsb0JBQW9CO0FBQ2xULE9BQU8sV0FBVztBQUNsQixPQUFPLFFBQVEsZUFBZTtBQUM5QixPQUFPLFNBQVM7QUFIaEIsSUFBTSxtQ0FBbUM7QUFNekMsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUztBQUFBLElBQ1AsTUFBTTtBQUFBLE1BQ0osT0FBTztBQUFBLFFBQ0wsU0FBUyxDQUFDLENBQUMsa0NBQWtDLEVBQUUsYUFBYSxNQUFNLENBQUMsQ0FBQztBQUFBLFFBRXBFLEtBQUs7QUFBQSxVQUNILGFBQWE7QUFBQSxZQUNYLFNBQVMsQ0FBQyxDQUFDLGtDQUFrQyxFQUFFLGFBQWEsS0FBSyxDQUFDLENBQUM7QUFBQSxVQUNyRTtBQUFBLFFBQ0Y7QUFBQSxNQUNGO0FBQUEsSUFDRixDQUFDO0FBQUEsSUFDRCxJQUFJO0FBQUEsTUFDRixTQUFTLENBQUMsTUFBTTtBQUFBLE1BQ2hCLFNBQVMsQ0FBQyxtQkFBbUIsb0JBQW9CLGdCQUFnQixlQUFlO0FBQUEsSUFDbEYsQ0FBQztBQUFBLEVBQ0g7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNQLE9BQU87QUFBQSxNQUNMLEtBQUssS0FBSyxRQUFRLGtDQUFXLE9BQU87QUFBQSxJQUN0QztBQUFBLEVBQ0Y7QUFBQSxFQUNBLE9BQU87QUFBQSxJQUNMLEtBQUs7QUFBQSxNQUNILE9BQU8sUUFBUSxrQ0FBVyxjQUFjO0FBQUEsTUFDeEMsTUFBTTtBQUFBLE1BQ04sU0FBUyxDQUFDLE1BQU0sS0FBSztBQUFBLE1BQ3JCLFVBQVUsWUFBVSxZQUFZLE1BQU07QUFBQSxJQUN4QztBQUFBLElBQ0EsZUFBZTtBQUFBO0FBQUEsTUFFYixVQUFVO0FBQUEsUUFDUjtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLE1BQ0Y7QUFBQSxNQUNBLFFBQVE7QUFBQSxRQUNOLFNBQVM7QUFBQSxVQUNQLE9BQU87QUFBQSxVQUNQLHFCQUFxQjtBQUFBLFVBQ3JCLGFBQWE7QUFBQSxRQUNmO0FBQUEsTUFDRjtBQUFBLElBQ0Y7QUFBQSxFQUNGO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K From 5fa852c277c2b6da2ea32850f8dc74540069975f Mon Sep 17 00:00:00 2001 From: Gareth Jones Date: Fri, 8 Sep 2023 21:26:49 -0400 Subject: [PATCH 3/7] tweaking colours --- src/styles/variables.classic.json | 4 ++-- src/styles/variables.dark.json | 4 ++-- src/styles/variables.json | 4 ++-- src/styles/variables.light.json | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/styles/variables.classic.json b/src/styles/variables.classic.json index 25a9390c..d4642f4e 100644 --- a/src/styles/variables.classic.json +++ b/src/styles/variables.classic.json @@ -186,8 +186,8 @@ "color": { "background": { "default": "#ffffff", - "hover": "lch(68.1 1.1 272)", - "active": "lch(81 1.31 272)", + "hover": "#f6f7fa", + "active": "lch(95.3 1.54 272)", "panel": "#ffffff" }, "text": { diff --git a/src/styles/variables.dark.json b/src/styles/variables.dark.json index 17e22065..f881007a 100644 --- a/src/styles/variables.dark.json +++ b/src/styles/variables.dark.json @@ -289,8 +289,8 @@ "color": { "background": { "default": "#282828", - "hover": "lch(19.3 0 0)", - "active": "lch(23.4 0 0)", + "hover": "#414141", + "active": "#414141", "panel": "#282828" }, "text": { diff --git a/src/styles/variables.json b/src/styles/variables.json index 3d2944e3..1500acb0 100644 --- a/src/styles/variables.json +++ b/src/styles/variables.json @@ -562,8 +562,8 @@ "color": { "background": { "default": "#e6e7e9", - "hover": "lch(68.1 1.1 272)", - "active": "lch(85 0 0)", + "hover": "#f6f7fa", + "active": "#ffffff", "panel": "#e6e7e9" }, "text": { diff --git a/src/styles/variables.light.json b/src/styles/variables.light.json index 961b05aa..cc406f87 100644 --- a/src/styles/variables.light.json +++ b/src/styles/variables.light.json @@ -289,8 +289,8 @@ "color": { "background": { "default": "#e6e7e9", - "hover": "lch(68.1 1.1 272)", - "active": "lch(85 0 0)", + "hover": "#f6f7fa", + "active": "#ffffff", "panel": "#e6e7e9" }, "text": { From 86208a6e0c73038ecd3ff40e1f70cd1540183d2b Mon Sep 17 00:00:00 2001 From: Gareth Jones Date: Mon, 11 Sep 2023 14:31:32 -0400 Subject: [PATCH 4/7] Getting active to work again --- src/components/ButtonGroup/ButtonGroup.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx index 337a28eb..7eb89fc1 100644 --- a/src/components/ButtonGroup/ButtonGroup.tsx +++ b/src/components/ButtonGroup/ButtonGroup.tsx @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled, { DefaultTheme } from "styled-components"; export interface ButtonGroupProps { labels: string[]; @@ -25,9 +25,11 @@ export const ButtonGroup = ({ labels, activeIndex, onClick }: ButtonGroupProps) }; type ButtonPosition = "left" | "center" | "right"; + interface ButtonProps { active: boolean; position: ButtonPosition; + theme: DefaultTheme; } const ButtonGroupWrapper = styled.div` @@ -54,7 +56,10 @@ const Button = styled.button` justify-content: center; align-items: center; border: none; - background: ${({ theme }) => theme.click.button.group.color.background.default}; + background: ${({ active, theme }: ButtonProps) => + active + ? theme.click.button.group.color.background.active + : theme.click.button.group.color.background.default}; color: ${({ theme }) => theme.click.button.group.color.text.default}; font: ${({ theme }) => theme.click.button.basic.typography.label.default}; border-radius: ${({ theme }) => theme.click.button.group.radii.end}; From f0e43688fca9921ccfbddfd6ee14a77143870e2a Mon Sep 17 00:00:00 2001 From: Gareth Jones Date: Mon, 11 Sep 2023 15:07:25 -0400 Subject: [PATCH 5/7] Adding tests. --- .../ButtonGroup/ButtonGroup.stories.ts | 5 ++- .../ButtonGroup/ButtonGroup.test.tsx | 42 +++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 src/components/ButtonGroup/ButtonGroup.test.tsx diff --git a/src/components/ButtonGroup/ButtonGroup.stories.ts b/src/components/ButtonGroup/ButtonGroup.stories.ts index b91e6c65..8d4a932d 100644 --- a/src/components/ButtonGroup/ButtonGroup.stories.ts +++ b/src/components/ButtonGroup/ButtonGroup.stories.ts @@ -4,12 +4,15 @@ export default { component: ButtonGroup, title: "Buttons/ButtonGroup", tags: ["button-group", "autodocs"], + argTypes: { + labels: { control: "array", options: ["default", "checked", "unchecked"] }, + activeIndex: { control: "number" }, + } }; export const Playground = { args: { labels: ["Button 1", "Button 2", "Button 3"], activeIndex: 2, - disabled: [false, false, true], }, }; diff --git a/src/components/ButtonGroup/ButtonGroup.test.tsx b/src/components/ButtonGroup/ButtonGroup.test.tsx new file mode 100644 index 00000000..40d544e6 --- /dev/null +++ b/src/components/ButtonGroup/ButtonGroup.test.tsx @@ -0,0 +1,42 @@ +import { fireEvent } from "@testing-library/react"; +import { ButtonGroup, ButtonGroupProps } from "./ButtonGroup"; +import { renderCUI } from "@/utils/test-utils"; + +describe("ButtonGroup", () => { + const renderButtonGroup = (props: ButtonGroupProps) => + renderCUI(); + const labels = ["Option 1", "Option 2", "Option 3"]; + + it("renders buttons with labels correctly", () => { + const { getByText } = renderButtonGroup({ labels: labels }); + + labels.forEach(label => { + expect(getByText(label).textContent).toBe(label); + }); + }); + + it("calls onClick handler when a button is clicked", () => { + let counter = 0; + const handleClick = () => (counter = 1); + + const { getByText } = renderButtonGroup({ + labels: labels, + onClick: handleClick, + }); + + fireEvent.click(getByText("Option 2")); + + expect(counter).toEqual(1); + }); + + it("adds 'active' class to the active button", () => { + const { getByText } = renderButtonGroup({ + labels: labels, + activeIndex: 1, + }); + + const activeButton = getByText("Option 2"); + + expect(activeButton).active == true; + }); +}); From f03b6cd7fbd41f27a62c6b971063eb13511700da Mon Sep 17 00:00:00 2001 From: Gareth Jones Date: Tue, 12 Sep 2023 20:29:46 -0400 Subject: [PATCH 6/7] Updating variables. --- src/styles/variables.classic.json | 2 +- src/styles/variables.dark.json | 2 +- src/styles/variables.json | 22 +++++++++++----------- src/styles/variables.light.json | 6 +++--- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/styles/variables.classic.json b/src/styles/variables.classic.json index c4ce2fe1..34271ace 100644 --- a/src/styles/variables.classic.json +++ b/src/styles/variables.classic.json @@ -186,7 +186,7 @@ "color": { "background": { "default": "lch(100 0 0)", - "hover": "lch(97.4 1.45 272)", + "hover": "lch(97.4 1.44 272)", "active": "lch(95.3 1.54 272)", "panel": "lch(100 0 0)" }, diff --git a/src/styles/variables.dark.json b/src/styles/variables.dark.json index a6537de6..7c08ea82 100644 --- a/src/styles/variables.dark.json +++ b/src/styles/variables.dark.json @@ -289,7 +289,7 @@ "color": { "background": { "default": "lch(18.2 0 0)", - "hover": "lch(22.4 0 0)", + "hover": "lch(22.8 0 0)", "active": "#414141", "panel": "lch(18.2 0 0)" }, diff --git a/src/styles/variables.json b/src/styles/variables.json index e08afd2b..b07972e1 100644 --- a/src/styles/variables.json +++ b/src/styles/variables.json @@ -307,7 +307,7 @@ "basic": { "space": { "x": "1rem", - "y": "0.344rem", + "y": "0.281rem", "gap": "0.5rem", "group": "0.5rem" }, @@ -399,8 +399,8 @@ "iconButton": { "default": { "space": { - "x": "0.5rem", - "y": "0.5rem" + "x": "0.438rem", + "y": "0.438rem" } }, "size": { @@ -499,7 +499,7 @@ "split": { "icon": { "space": { - "y": "0.516rem", + "y": "0.438rem", "x": "0.344rem" } }, @@ -561,10 +561,10 @@ }, "color": { "background": { - "default": "lch(91.8 1.07 266)", - "hover": "lch(97.4 1.45 272)", + "default": "lch(94.5 0.72 266)", + "hover": "lch(97.4 1.44 272)", "active": "#ffffff", - "panel": "lch(91.8 1.07 266)" + "panel": "lch(94.5 0.72 266)" }, "text": { "default": "#161517", @@ -1002,7 +1002,7 @@ }, "space": { "x": "0.75rem", - "y": "0.344rem", + "y": "0.281rem", "gap": "0.5rem" }, "size": { @@ -1402,7 +1402,7 @@ "default": { "space": { "right": "0.75rem", - "y": "0.344rem", + "y": "0.281rem", "gap": "0.75rem", "left": "0" } @@ -1430,7 +1430,7 @@ "space": { "left": "0", "right": "0.75rem", - "y": "0.344rem", + "y": "0.281rem", "gap": "0.75rem" } }, @@ -1454,7 +1454,7 @@ "space": { "left": "2.75rem", "right": "0.75rem", - "y": "0.344rem" + "y": "0.281rem" } }, "mobile": { diff --git a/src/styles/variables.light.json b/src/styles/variables.light.json index 32aea81a..985b110c 100644 --- a/src/styles/variables.light.json +++ b/src/styles/variables.light.json @@ -288,10 +288,10 @@ "group": { "color": { "background": { - "default": "lch(91.8 1.07 266)", - "hover": "lch(97.4 1.45 272)", + "default": "lch(94.5 0.72 266)", + "hover": "lch(97.4 1.44 272)", "active": "#ffffff", - "panel": "lch(91.8 1.07 266)" + "panel": "lch(94.5 0.72 266)" }, "text": { "default": "#161517", From 20a420fd7893d82552baae37a70d6cf5d82ceded Mon Sep 17 00:00:00 2001 From: Gareth Jones Date: Thu, 14 Sep 2023 10:20:44 -0400 Subject: [PATCH 7/7] Adding role to button group. --- src/components/Button/Button.tsx | 1 + src/components/ButtonGroup/ButtonGroup.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 0328b2c6..c36f1a3b 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -34,6 +34,7 @@ export const Button = ({ $align={align} $fillWidth={fillWidth} disabled={disabled || loading} + role="button" {...delegated} > {iconLeft && ( diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx index 7eb89fc1..1b202987 100644 --- a/src/components/ButtonGroup/ButtonGroup.tsx +++ b/src/components/ButtonGroup/ButtonGroup.tsx @@ -16,6 +16,7 @@ export const ButtonGroup = ({ labels, activeIndex, onClick }: ButtonGroupProps) active={index === activeIndex} position={position} onClick={() => onClick?.(index)} + role="button" > {label}