diff --git a/packages/react-components/src/components/Header/Header.css b/packages/react-components/src/components/Header/Header.css index 172ff83d..7343a71f 100644 --- a/packages/react-components/src/components/Header/Header.css +++ b/packages/react-components/src/components/Header/Header.css @@ -4,7 +4,7 @@ flex-direction: row; align-items: center; justify-content: space-around; - background-color: var(--surface-color-background-white); + background-color: var(--surface-color-forms-default); border-bottom-color: var(--surface-color-border-default); border-bottom-style: solid; border-bottom-width: var(--layout-border-width-small); @@ -37,7 +37,7 @@ .bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a, .bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li button { - background-color: var(--surface-color-background-white); + background-color: var(--surface-color-forms-default); box-sizing: border-box; color: var(--typography-color-link); font: var(--typography-regular-body); diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css index a6490474..582ab4dd 100644 --- a/packages/react-components/src/components/Select/Select.css +++ b/packages/react-components/src/components/Select/Select.css @@ -97,7 +97,7 @@ box-shadow: var(--surface-shadow-medium); box-sizing: border-box; overflow-y: auto; - padding: var(--layout-margin-hair) var(--layout-padding-xsmall); + padding: var(--layout-padding-hair) var(--layout-padding-xsmall); width: var( --trigger-width ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */ @@ -115,18 +115,18 @@ .bcds-react-aria-Select--Header { color: var(--typography-color-secondary); font: var(--typography-regular-small-body); - padding: var(--layout-margin-hair) var(--layout-padding-small); + padding: var(--layout-padding-hair) var(--layout-padding-small); } /* ListBox option item */ .bcds-react-aria-Select--ListBoxItem { - border-radius: var(--layout-margin-xsmall); + border-radius: var(--layout-border-radius-medium); cursor: pointer; display: flex; flex-direction: row; align-items: center; gap: var(--layout-margin-small); - padding: 6.5px var(--layout-padding-small); + padding: var(--layout-padding-small); } .bcds-react-aria-Select--ListBoxItem[data-focused], .bcds-react-aria-Select--ListBoxItem[data-hovered] { diff --git a/packages/react-components/src/components/Switch/Switch.css b/packages/react-components/src/components/Switch/Switch.css index dc250580..b777618c 100644 --- a/packages/react-components/src/components/Switch/Switch.css +++ b/packages/react-components/src/components/Switch/Switch.css @@ -12,7 +12,7 @@ align-items: center; width: var(--layout-margin-xxlarge); height: var(--icons-size-medium); - background-color: var(--surface-color-forms-disabled); + background-color: var(--surface-color-primary-disabled); border-radius: var(--icons-size-medium); transition: all 200ms; } @@ -24,7 +24,7 @@ box-sizing: border-box; width: var(--icons-size-medium); height: var(--icons-size-medium); - background-color: var(--surface-color-background-light-gray); + background-color: var(--surface-color-secondary-default); border: var(--layout-border-width-medium) solid var(--surface-color-border-medium); border-radius: var(--icons-size-small); @@ -33,13 +33,13 @@ /* Selected */ .bcds-react-aria-Switch[data-selected] > .indicator { - background-color: var(--surface-color-primary-button-default); + background-color: var(--surface-color-primary-default); } .bcds-react-aria-Switch[data-selected] > .indicator::before { transform: translateX(100%); border: var(--layout-border-width-medium) solid - var(--surface-color-primary-button-default); + var(--surface-color-primary-default); } /* Hover */ @@ -49,7 +49,7 @@ .bcds-react-aria-Switch[data-hovered][data-selected] > .indicator { cursor: pointer; - background-color: var(--surface-color-primary-button-hover); + background-color: var(--surface-color-primary-hover); } .bcds-react-aria-Switch[data-hovered] > .indicator::before { @@ -59,7 +59,7 @@ .bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before { border: var(--layout-border-width-medium) solid - var(--surface-color-primary-button-default); + var(--surface-color-primary-hover); } /* Focused */ @@ -75,11 +75,12 @@ } .bcds-react-aria-Switch[data-disabled] > .indicator { - background-color: var(--surface-color-forms-disabled); + background-color: var(--surface-color-primary-disabled); cursor: not-allowed; } .bcds-react-aria-Switch[data-disabled] > .indicator::before { + background-color: var(--theme-gray-10); border: var(--layout-border-width-medium) solid var(--surface-color-border-default); } diff --git a/packages/react-components/src/components/Tag/Tag.css b/packages/react-components/src/components/Tag/Tag.css index 1e7a449c..3225e179 100644 --- a/packages/react-components/src/components/Tag/Tag.css +++ b/packages/react-components/src/components/Tag/Tag.css @@ -2,12 +2,12 @@ color: var(--typography-color-primary); cursor: pointer; border-radius: var(--layout-margin-hair); - border: 1px solid; + border: var(--layout-border-width-small) solid; display: flex; align-items: center; - gap: 8px; + gap: var(--layout-margin-small); font: var(--typography-regular-label); - padding: 2px 8px; + padding: var(--layout-padding-hair) var(--layout-padding-small); width: fit-content; } .bcds-react-aria-Tag .react-aria-Button { diff --git a/packages/react-components/src/components/TextArea/TextArea.css b/packages/react-components/src/components/TextArea/TextArea.css index 097c3f48..2d746385 100644 --- a/packages/react-components/src/components/TextArea/TextArea.css +++ b/packages/react-components/src/components/TextArea/TextArea.css @@ -95,7 +95,8 @@ .bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container { border-radius: var(--layout-border-radius-medium); - border: 1px solid var(--support-border-color-danger); + border: var(--layout-border-width-small) solid + var(--support-border-color-danger); background: var(--surface-color-forms-default); } diff --git a/packages/react-components/src/components/TextField/TextField.css b/packages/react-components/src/components/TextField/TextField.css index cfa84d95..08b98e4d 100644 --- a/packages/react-components/src/components/TextField/TextField.css +++ b/packages/react-components/src/components/TextField/TextField.css @@ -43,13 +43,11 @@ /* Sizes */ .bcds-react-aria-TextField--container.small { - /* using margin token is kludgy, consider adding component-specific token for input sizing */ height: var(--layout-margin-xlarge); min-height: var(--layout-margin-xlarge); } .bcds-react-aria-TextField--container.medium { - /* using margin token is kludgy, consider adding component-specific token for input sizing */ height: var(--layout-margin-xxlarge); min-height: var(--layout-margin-xxlarge); } @@ -103,7 +101,8 @@ .bcds-react-aria-TextField[data-invalid] > .bcds-react-aria-TextField--container { border-radius: var(--layout-border-radius-medium); - border: 1px solid var(--support-border-color-danger); + border: var(--layout-border-width-small) solid + var(--support-border-color-danger); background: var(--surface-color-forms-default); } diff --git a/packages/react-components/src/stories/Button.mdx b/packages/react-components/src/stories/Button.mdx index f8ec3ced..95aa08f8 100644 --- a/packages/react-components/src/stories/Button.mdx +++ b/packages/react-components/src/stories/Button.mdx @@ -31,7 +31,7 @@ import * as ButtonStories from "./Button.stories"; Learn more about working with the button component: - [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content?id=4C51732F99054326A3E2DB0B82576DD4) -- [View the select component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers) +- [View the button component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers) This component is based on [React Aria Button](https://react-spectrum.adobe.com/react-aria/Button.html). Consult the React Aria documentation for additional technical information. diff --git a/packages/react-components/src/stories/Footer.mdx b/packages/react-components/src/stories/Footer.mdx index 25548f51..b61166cc 100644 --- a/packages/react-components/src/stories/Footer.mdx +++ b/packages/react-components/src/stories/Footer.mdx @@ -34,7 +34,7 @@ If no props are passed to the `