Update components to use 3.1.0 tokens (#469)

* Update Switch.css refactoring Switch to use 3.1.0 tokens * additional Switch token tweaks * use layout-margin-hair instead of layout-padding-hair in Select * change background-color token in Header * disabled switch colour tweak * clean up padding and border-radius on Select items * replace hardcoded values with tokens in Tag * replace hardcoded value in TextField * replace hardcoded value in TextArea * remove comments from TextField * correcting typos in storybook docs
bcgov · Aug 27, 2024 · f5d3117 · f5d3117
1 parent 0752ee3
commit f5d3117
Show file tree

Hide file tree

Showing 13 changed files with 28 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -34,7 +34,7 @@ If no props are passed to the `<footer/>`, it includes default content that matc
 Learn more about working with the footer component:
 
 - [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content?id=E916498C3E094683BCB3FCE77DFDCAA3)
-- [View the select component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
+- [View the footer component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
 
 ## Controls
 

diff --git a/packages/react-components/src/stories/Header.mdx b/packages/react-components/src/stories/Header.mdx
@@ -32,7 +32,7 @@ The header component returns an [HTML `<header>`](https://developer.mozilla.org/
 Learn more about working with the footer component:
 
 - [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content?id=84633C48F00A4C77BE9584EBFC9A39BF)
-- [View the select component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
+- [View the header component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
 
 ### Responsive design
 

diff --git a/packages/react-components/src/stories/InlineAlert.mdx b/packages/react-components/src/stories/InlineAlert.mdx
@@ -28,7 +28,7 @@ import * as InlineAlertStories from "./InlineAlert.stories";
 Learn more about working with the inline alert component:
 
 - [Usage and best practice guidance]()
-- [View the select component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
+- [View the inline alert component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
 
 ## Controls
 

diff --git a/packages/react-components/src/stories/TagGroup.mdx b/packages/react-components/src/stories/TagGroup.mdx
@@ -32,7 +32,7 @@ import * as TagGroupStories from "./TagGroup.stories";
 Learn more about working with the TagGroup component:
 
 - [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content?id=6AE4A072CEF9498995E10B2A391AE8D1)
-- [View the select component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
+- [View the tag group component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
 
 This component is based on [React Aria TagGroup](https://react-spectrum.adobe.com/react-aria/TagGroup.html), including the [TagList](https://react-spectrum.adobe.com/react-aria/TagGroup.html#taglist) and [Tag](https://react-spectrum.adobe.com/react-aria/TagGroup.html#tag) subcomponents. Consult the React Aria documentation for additional technical information.
 

diff --git a/packages/react-components/src/stories/TextArea.mdx b/packages/react-components/src/stories/TextArea.mdx
@@ -30,7 +30,7 @@ import * as TextAreaStories from "./TextArea.stories";
 Learn more about working with the text area component:
 
 - [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content?id=27E37725D33F45DE86F78BC84435BB66)
-- [View the text field component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
+- [View the text area component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
 
 This component is based on [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html#multi-line).
 

diff --git a/packages/react-components/src/stories/Tooltip.mdx b/packages/react-components/src/stories/Tooltip.mdx
@@ -30,7 +30,7 @@ import * as TooltipStories from "./Tooltip.stories";
 Learn more about working with the tooltip component:
 
 - [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content?id=EC342F905ABF47FD8B131AB67D4EDD7B)
-- [View the select component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
+- [View the tooltip component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
 
 This component is based on [React Aria Tooltip](https://react-spectrum.adobe.com/react-aria/Tooltip.html). Consult the React Aria documentation for additional technical information.