Skip to content

Commit fe2235c

Browse files
marissahuysentruytmarissahuysentruyt
committed
docs(swatchgroup): refactor swatches and borders
- in most stories, swatchgroup now uses colors that now meet contrast in both our light and dark mode to properly show the "default" of having no border on the swatches in the swatchgroup - for the light border story, a new set of colors that don't meet color contrast for light mode are implemented - the rounding template was updated to use a selection of the new colors that meet contrast - updated light border swatch colors for the light border test case
1 parent 8b75ad8 commit fe2235c

File tree

3 files changed

+68
-59
lines changed

3 files changed

+68
-59
lines changed

‎components/swatchgroup/stories/swatchgroup.stories.js

Lines changed: 49 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ import { Template, RoundingTemplate } from "./template";
1616
*
1717
* The only exception is when a swatch group only takes up a single row. In that case, use any of the rounding options.
1818
*
19-
* ### Border only for low-contrast swatches
19+
* ### Apply border to low-contrast swatches only
2020
*
21-
* When swatches within a swatch group have low contrast (below 3:1 contrast with the background), they have a less prominent border compared to the swatch component when used by itself, and should have the `.spectrum-Swatch--lightBorder` class. Low contrast color swatches have a border of `gray-900` at 20% opacity. This reduces the likelihood of the UI interfering with color perception and comparisons.
21+
* When swatches within a swatch group have low contrast (below 3:1 contrast with the background), they have a less prominent border compared to a single swatch component used by itself, and should have the `.spectrum-Swatch--lightBorder` class. This reduces the likelihood of the UI interfering with color perception and comparisons. Otherwise, swatches within a swatch group that meet contrast should have the `.spectrum-Swatch--noBorder` class.
2222
*
23-
* Otherwise, swatches within a swatch group should have the `.spectrum-Swatch--noBorder` class.
23+
* Implementations should apply the `.spectrum-Swatch--lightBorder` to the individual swatches of a swatch group that do not meet 3:1 contrast.
2424
*
2525
* ### Density
2626
*
@@ -85,24 +85,23 @@ export default {
8585
isDisabled: false,
8686
isSelected: false,
8787
items: [
88-
{swatchColor: "rgb(22, 135, 140)",},
89-
{swatchColor: "rgb(33, 132, 113)",},
90-
{swatchColor: "rgb(254, 132, 152)",},
91-
{swatchColor: "rgb(255, 127, 96)",},
92-
{swatchColor: "rgb(255, 209, 24)",},
93-
{swatchColor: "rgb(120, 91, 199)",},
94-
{swatchColor: "rgb(225, 234, 119)",},
95-
{swatchColor: "rgb(0, 225, 171)",},
96-
{swatchColor: "rgb(248, 239, 187)",},
97-
{swatchColor: "rgb(254, 205, 215)",},
98-
{swatchColor: "rgb(212, 182, 237)",},
99-
{swatchColor: "rgb(153, 219, 244)",},
100-
{swatchColor: "rgb(171, 238, 221)",},
101-
{swatchColor: "rgb(187, 182, 175)",},
102-
{swatchColor: "rgb(238, 211, 190)",},
103-
{swatchColor: "rgb(0, 143, 242)",},
104-
{swatchColor: "rgb(60, 49, 199)",},
105-
{swatchColor: "rgb(254, 71, 144)",},
88+
{swatchColor: "rgb(184, 109, 70)",},
89+
{swatchColor: "rgb(240, 56, 35)",},
90+
{swatchColor: "rgb(212, 91, 0)",},
91+
{swatchColor: "rgb(175, 116, 0)",},
92+
{swatchColor: "rgb(154, 123, 77)",},
93+
{swatchColor: "rgb(114, 137, 0)"},
94+
{swatchColor: "rgb(72, 144, 20)"},
95+
{swatchColor: "rgb(7, 147, 85)"},
96+
{swatchColor: "rgb(9, 144, 120)"},
97+
{swatchColor: "rgb(10, 141, 153)"},
98+
{swatchColor: "rgb(18, 134, 205)"},
99+
{swatchColor: "rgb(75, 117, 255)"},
100+
{swatchColor: "rgb(122, 106, 253)"},
101+
{swatchColor: "rgb(166, 92, 231)"},
102+
{swatchColor: "rgb(200, 68, 220)"},
103+
{swatchColor: "rgb(228, 52, 163)"},
104+
{swatchColor: "rgb(240, 45, 110)"},
106105
],
107106
},
108107
parameters: {
@@ -146,7 +145,14 @@ Spacious.storyName = "Density - Spacious";
146145
* Only use rounded swatches if there is a single row.
147146
*/
148147
export const Rounding = RoundingTemplate.bind({});
149-
Rounding.args = {};
148+
Rounding.args = {
149+
items: [
150+
{swatchColor: "rgb(9, 144, 120)"},
151+
{swatchColor: "rgb(10, 141, 153)"},
152+
{swatchColor: "rgb(228, 52, 163)"},
153+
{swatchColor: "rgb(240, 45, 110)"},
154+
]
155+
};
150156
Rounding.tags = ["!dev"];
151157
Rounding.parameters = {
152158
chromatic: { disableSnapshot: true },
@@ -168,29 +174,31 @@ Sizing.parameters = {
168174
};
169175

170176
/**
171-
* In this example, the lower contrast swatches utilize the `.spectrum-Swatch--lightBorder` class.
177+
* When swatches within a swatch group have low contrast (below 3:1 contrast with the background), the `.spectrum-Swatch--lightBorder` class should be applied to those swatches only.
178+
*
179+
* The swatch group example below contains all swatches with low contrast in light mode, therefore each has the `.spectrum-Swatch--lightBorder` class applied.
172180
*/
173181
export const WithLightBorder = Template.bind({});
174182
WithLightBorder.args = {
183+
borderStyle: "lightBorder",
175184
items: [
176-
{swatchColor: "rgb(22, 135, 140)",},
177-
{swatchColor: "rgb(33, 132, 113)",},
178-
{swatchColor: "rgb(254, 132, 152)", borderStyle: "lightBorder",},
179-
{swatchColor: "rgb(255, 127, 96)", borderStyle: "lightBorder",},
180-
{swatchColor: "rgb(255, 209, 24)", borderStyle: "lightBorder",},
181-
{swatchColor: "rgb(120, 91, 199)",},
182-
{swatchColor: "rgb(225, 234, 119)", borderStyle: "lightBorder",},
183-
{swatchColor: "rgb(0, 225, 171)", borderStyle: "lightBorder",},
184-
{swatchColor: "rgb(248, 239, 187)", borderStyle: "lightBorder",},
185-
{swatchColor: "rgb(254, 205, 215)", borderStyle: "lightBorder",},
186-
{swatchColor: "rgb(212, 182, 237)", borderStyle: "lightBorder",},
187-
{swatchColor: "rgb(153, 219, 244)", borderStyle: "lightBorder",},
188-
{swatchColor: "rgb(171, 238, 221)", borderStyle: "lightBorder",},
189-
{swatchColor: "rgb(187, 182, 175)", borderStyle: "lightBorder",},
190-
{swatchColor: "rgb(238, 211, 190)", borderStyle: "lightBorder",},
191-
{swatchColor: "rgb(0, 143, 242)",},
192-
{swatchColor: "rgb(60, 49, 199)",},
193-
{swatchColor: "rgb(254, 71, 144)",},
185+
{swatchColor: "rgb(237, 196, 172)"},
186+
{swatchColor: "rgb(255, 188, 180)"},
187+
{swatchColor: "rgb(255, 193, 94)"},
188+
{swatchColor: "rgb(245, 199, 0)"},
189+
{swatchColor: "rgb(229, 200, 157)"},
190+
{swatchColor: "rgb(182, 219, 0)"},
191+
{swatchColor: "rgb(129, 228, 58)"},
192+
{swatchColor: "rgb(107, 227, 162)"},
193+
{swatchColor: "rgb(92, 225, 194)"},
194+
{swatchColor: "rgb(111, 221, 228)"},
195+
{swatchColor: "rgb(138, 213, 255)"},
196+
{swatchColor: "rgb(172, 207, 253)"},
197+
{swatchColor: "rgb(192, 201, 255)"},
198+
{swatchColor: "rgb(221, 193, 246)"},
199+
{swatchColor: "rgb(247, 181, 255)"},
200+
{swatchColor: "rgb(255, 181, 230)"},
201+
{swatchColor: "rgb(255, 185, 208)"},
194202
],
195203
};
196204
WithLightBorder.tags = ["!dev"];

‎components/swatchgroup/stories/swatchgroup.test.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,25 @@ export const SwatchgroupGroup = Variants({
2626
{
2727
testHeading: "With light borders",
2828
borderStyle: "lightBorder",
29+
items: [
30+
{swatchColor: "rgb(237, 196, 172)"},
31+
{swatchColor: "rgb(255, 188, 180)"},
32+
{swatchColor: "rgb(255, 193, 94)"},
33+
{swatchColor: "rgb(245, 199, 0)"},
34+
{swatchColor: "rgb(229, 200, 157)"},
35+
{swatchColor: "rgb(182, 219, 0)"},
36+
{swatchColor: "rgb(129, 228, 58)"},
37+
{swatchColor: "rgb(107, 227, 162)"},
38+
{swatchColor: "rgb(92, 225, 194)"},
39+
{swatchColor: "rgb(111, 221, 228)"},
40+
{swatchColor: "rgb(138, 213, 255)"},
41+
{swatchColor: "rgb(172, 207, 253)"},
42+
{swatchColor: "rgb(192, 201, 255)"},
43+
{swatchColor: "rgb(221, 193, 246)"},
44+
{swatchColor: "rgb(247, 181, 255)"},
45+
{swatchColor: "rgb(255, 181, 230)"},
46+
{swatchColor: "rgb(255, 185, 208)"},
47+
],
2948
},
3049
],
3150
});

‎components/swatchgroup/stories/template.js

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,6 @@ export const RoundingTemplate = (args, context) => Container({
5858
content: Template({
5959
...args,
6060
rounding: "full",
61-
items: [
62-
{swatchColor: "rgb(238, 211, 190)",},
63-
{swatchColor: "rgb(0, 143, 242)",},
64-
{swatchColor: "rgb(60, 49, 199)",},
65-
{swatchColor: "rgb(254, 71, 144)",},
66-
],
6761
}, context)
6862
})}
6963
${Container({
@@ -73,12 +67,6 @@ export const RoundingTemplate = (args, context) => Container({
7367
content: Template({
7468
...args,
7569
rounding: "regular",
76-
items: [
77-
{swatchColor: "rgb(212, 182, 237)",},
78-
{swatchColor: "rgb(153, 219, 244)",},
79-
{swatchColor: "rgb(171, 238, 221)",},
80-
{swatchColor: "rgb(187, 182, 175)",},
81-
],
8270
}, context)
8371
})}
8472
${Container({
@@ -88,12 +76,6 @@ export const RoundingTemplate = (args, context) => Container({
8876
content: Template({
8977
...args,
9078
rounding: "none",
91-
items: [
92-
{swatchColor: "rgb(22, 135, 140)",},
93-
{swatchColor: "rgb(93, 137, 255)",},
94-
{swatchColor: "rgb(33, 132, 113)",},
95-
{swatchColor: "rgb(254, 71, 32)",},
96-
],
9779
}, context)
9880
})}
9981
`

0 commit comments

Comments
 (0)