Skip to content

Commit 9d21a67

Browse files
devongovettdevongovett
authored
Add support for spectrum express theme (#3651)
1 parent bb4366c commit 9d21a67

File tree

98 files changed

+1493
-295
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+1493
-295
lines changed

‎.chromatic/constants.js

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import themeDark from '@adobe/spectrum-css-temp/vars/spectrum-dark.css';
55
import themeDarkest from '@adobe/spectrum-css-temp/vars/spectrum-darkest.css';
66
import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
77
import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
8+
import express from '@adobe/spectrum-css-temp/vars/express.css';
89

910
const THEME = {
1011
global: themeGlobal,
@@ -20,15 +21,15 @@ export const scales = {
2021
};
2122

2223
export let defaultTheme = {
23-
global: themeGlobal,
24+
global: THEME.global,
2425
light: THEME.light,
2526
dark: THEME.darkest,
2627
medium: scales.medium,
2728
large: scales.large
2829
};
2930

3031
export let altTheme = {
31-
global: themeGlobal,
32+
global: THEME.global,
3233
light: THEME.lightest,
3334
dark: THEME.dark,
3435
medium: scales.medium,
@@ -42,6 +43,25 @@ export let themes = {
4243
darkest: defaultTheme
4344
};
4445

46+
export let expressThemes = {};
47+
for (let key in themes) {
48+
expressThemes[key] = {
49+
...themes[key],
50+
global: {
51+
...themes[key].global,
52+
express: express.express
53+
},
54+
medium: {
55+
...themes[key].medium,
56+
express: express.medium
57+
},
58+
large: {
59+
...themes[key].large,
60+
express: express.large
61+
}
62+
};
63+
}
64+
4565
// Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
4666
export let locales = [
4767
{label: 'Auto', value: ''},

‎.chromatic/custom-addons/chromatic/index.js

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {locales, scales, themes} from '../../constants';
1+
import {expressThemes, locales, scales, themes} from '../../constants';
22
import {makeDecorator} from '@storybook/addons';
33
import {Provider, View} from '@adobe/react-spectrum';
44
import React, {useEffect} from 'react';
@@ -15,6 +15,8 @@ export const withChromaticProvider = makeDecorator({
1515
} else {
1616
selectedLocales = options.locales ? locales.map(l => l.value).slice(1) : ['en-US', 'ar-AE'];
1717
}
18+
let colorSchemes = options.express ? [] : (options.colorSchemes || Object.keys(themes));
19+
let scalesToRender = options.scales || Object.keys(scales);
1820
let height;
1921
let minHeight;
2022
if(isNaN(options.height)) {
@@ -23,12 +25,17 @@ export const withChromaticProvider = makeDecorator({
2325
height = options.height;
2426
}
2527

28+
let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
29+
let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
30+
let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
31+
let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
32+
2633
// do not add a top level provider, each provider variant needs to be independent so that we don't have RTL/LTR styles that interfere with each other
2734
return (
2835
<DisableAnimations disableAnimations={options.disableAnimations}>
2936
<div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
30-
{(options.colorSchemes || Object.keys(themes)).map(colorScheme =>
31-
(options.scales || Object.keys(scales)).map(scale =>
37+
{colorSchemes.map(colorScheme =>
38+
scalesToRender.map(scale =>
3239
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
3340
<Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
3441
<View margin="size-100">
@@ -39,6 +46,14 @@ export const withChromaticProvider = makeDecorator({
3946
)
4047
)
4148
)}
49+
{options.express !== false &&
50+
<Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
51+
<View margin="size-100">
52+
<h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
53+
{getStory(context)}
54+
</View>
55+
</Provider>
56+
}
4257
</div>
4358
</DisableAnimations>
4459
)

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ packages/@spectrum-icons/color/**
22
packages/@spectrum-icons/ui/**
33
packages/@spectrum-icons/workflow/**
44
packages/@spectrum-icons/illustrations/**
5+
packages/@spectrum-icons/express/**
56
node_modules
67
packages/*/*/dist
78
packages/react-aria/dist

‎.storybook/constants.js

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import themeDark from '@adobe/spectrum-css-temp/vars/spectrum-dark.css';
55
import themeDarkest from '@adobe/spectrum-css-temp/vars/spectrum-darkest.css';
66
import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
77
import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
8+
import express from '@adobe/spectrum-css-temp/vars/express.css';
89

910
const THEME = {
1011
global: themeGlobal,
@@ -20,15 +21,15 @@ export const scales = {
2021
};
2122

2223
export let defaultTheme = {
23-
global: themeGlobal,
24+
global: THEME.global,
2425
light: THEME.light,
2526
dark: THEME.darkest,
2627
medium: scales.medium,
2728
large: scales.large
2829
};
2930

3031
export let altTheme = {
31-
global: themeGlobal,
32+
global: THEME.global,
3233
light: THEME.lightest,
3334
dark: THEME.dark,
3435
medium: scales.medium,
@@ -42,6 +43,25 @@ export let themes = {
4243
darkest: defaultTheme
4344
};
4445

46+
export let expressThemes = {};
47+
for (let key in themes) {
48+
expressThemes[key] = {
49+
...themes[key],
50+
global: {
51+
...themes[key].global,
52+
express: express.express
53+
},
54+
medium: {
55+
...themes[key].medium,
56+
express: express.medium
57+
},
58+
large: {
59+
...themes[key].large,
60+
express: express.large
61+
}
62+
};
63+
}
64+
4565
// Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
4666
export let locales = [
4767
{label: 'Auto', value: ''},

‎.storybook/custom-addons/provider/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
22
import addons, { makeDecorator } from '@storybook/addons';
33
import {getQueryParams} from '@storybook/client-api';
44
import {Provider} from '@react-spectrum/provider';
5-
import {themes, defaultTheme} from '../../constants';
5+
import {expressThemes, themes, defaultTheme} from '../../constants';
66

77
document.body.style.margin = '0';
88

@@ -18,10 +18,11 @@ function ProviderUpdater(props) {
1818
let [themeValue, setTheme] = useState(providerValuesFromUrl.theme || undefined);
1919
let [scaleValue, setScale] = useState(providerValuesFromUrl.scale || undefined);
2020
let [toastPositionValue, setToastPosition] = useState(providerValuesFromUrl.toastPosition || 'bottom');
21+
let [expressValue, setExpress] = useState(providerValuesFromUrl.express === 'true');
2122
let [storyReady, setStoryReady] = useState(window.parent === window); // reduce content flash because it takes a moment to get the provider details
2223
// Typically themes are provided with both light + dark, and both scales.
2324
// To build our selector to see all themes, we need to hack it a bit.
24-
let theme = themes[themeValue] || defaultTheme;
25+
let theme = (expressValue ? expressThemes : themes)[themeValue || 'light'] || defaultTheme;
2526
let colorScheme = themeValue && themeValue.replace(/est$/, '');
2627
useEffect(() => {
2728
let channel = addons.getChannel();
@@ -30,6 +31,7 @@ function ProviderUpdater(props) {
3031
setTheme(event.theme === 'Auto' ? undefined : event.theme);
3132
setScale(event.scale === 'Auto' ? undefined : event.scale);
3233
setToastPosition(event.toastPosition);
34+
setExpress(event.express);
3335
setStoryReady(true);
3436
};
3537

‎.storybook/custom-addons/provider/register.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ let TOAST_POSITIONS = [
3636
];
3737

3838
function ProviderFieldSetter({api}) {
39-
let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined, theme: providerValuesFromUrl.theme || undefined, scale: providerValuesFromUrl.scale || undefined, toastPosition: providerValuesFromUrl.toastPosition || 'bottom'});
39+
let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined, theme: providerValuesFromUrl.theme || undefined, scale: providerValuesFromUrl.scale || undefined, toastPosition: providerValuesFromUrl.toastPosition || 'bottom', express: providerValuesFromUrl.express === 'true'});
4040
let channel = addons.getChannel();
4141
let onLocaleChange = (e) => {
4242
let newValue = e.target.value || undefined;
@@ -70,6 +70,14 @@ function ProviderFieldSetter({api}) {
7070
return next;
7171
});
7272
};
73+
let onExpressChange = (e) => {
74+
let newValue = e.target.checked;
75+
setValues((old) => {
76+
let next = {...old, express: newValue};
77+
channel.emit('provider/updated', next);
78+
return next;
79+
});
80+
};
7381
useEffect(() => {
7482
let storySwapped = () => {
7583
channel.emit('provider/updated', values);
@@ -86,6 +94,7 @@ function ProviderFieldSetter({api}) {
8694
'providerSwitcher-theme': values.theme || '',
8795
'providerSwitcher-scale': values.scale || '',
8896
'providerSwitcher-toastPosition': values.toastPosition || '',
97+
'providerSwitcher-express': String(values.express),
8998
});
9099
});
91100

@@ -115,6 +124,10 @@ function ProviderFieldSetter({api}) {
115124
{TOAST_POSITIONS.map(position => <option key={position.label} value={position.value}>{position.label}</option>)}
116125
</select>
117126
</div>
127+
<div style={{marginRight: '10px'}}>
128+
<label htmlFor="express">Express: </label>
129+
<input type="checkbox" name="express" onChange={onExpressChange} checked={values.express} />
130+
</div>
118131
</div>
119132
)
120133
}

‎packages/@adobe/spectrum-css-temp/components/actiongroup/index.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ governing permissions and limitations under the License.
8282
}
8383

8484
.spectrum-ActionGroup--compact {
85-
--column-gap: calc(-1 * var(--spectrum-actionbutton-border-size));
85+
--column-gap: var(--spectrum-actiongroup-compact-button-gap);
8686
--row-gap: var(--spectrum-actiongroup-button-gap-reset);
8787

8888
&.spectrum-ActionGroup--quiet {
@@ -143,7 +143,7 @@ governing permissions and limitations under the License.
143143

144144
&.spectrum-ActionGroup--vertical {
145145
--column-gap: var(--spectrum-actiongroup-button-gap-reset);
146-
--row-gap: calc(-1 * var(--spectrum-actionbutton-border-size));
146+
--row-gap: var(--spectrum-actiongroup-compact-button-gap);
147147

148148
.spectrum-ActionGroup-item {
149149
border-radius: 0;

‎packages/@adobe/spectrum-css-temp/components/barloader/skin.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13+
:root {
14+
--spectrum-barloader-large-track-fill-color: var(--spectrum-accent-color-900);
15+
}
16+
1317
.spectrum-BarLoader {
1418
.spectrum-BarLoader-fill {
1519
background: var(--spectrum-barloader-large-track-fill-color);

‎packages/@adobe/spectrum-css-temp/components/button/index.css

Lines changed: 20 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ governing permissions and limitations under the License.
4343
border-style: solid;
4444
border-radius: var(--spectrum-button-border-radius);
4545
border-width: var(--spectrum-button-border-width);
46+
--spectrum-focus-ring-border-radius: var(--spectrum-button-border-radius);
47+
--spectrum-focus-ring-border-size: var(--spectrum-button-border-width);
48+
--spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
49+
--spectrum-focus-ring-size: var(--spectrum-button-primary-focus-ring-size-key-focus);
4650

4751
/* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
4852
text-transform: none;
@@ -114,33 +118,9 @@ governing permissions and limitations under the License.
114118

115119
}
116120

117-
%spectrum-ButtonWithFocusRing {
118-
&:after {
119-
border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-alias-focus-ring-gap));
120-
content: '';
121-
display: block;
122-
position: absolute;
123-
left: 0;
124-
right: 0;
125-
bottom: 0;
126-
top: 0;
127-
margin: calc(var(--spectrum-alias-focus-ring-gap) * -1);
128-
transform: translateX(0); /* Forces FF to render on the pixel grid */
129-
130-
transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
131-
margin var(--spectrum-global-animation-duration-100) ease-out;
132-
}
133-
134-
&:focus-ring {
135-
&:after {
136-
margin: calc(var(--spectrum-alias-focus-ring-gap) * -1 - var(--spectrum-button-border-width));
137-
}
138-
}
139-
}
140-
141121
.spectrum-Button {
142122
@inherit: %spectrum-BaseButton;
143-
@inherit: %spectrum-ButtonWithFocusRing;
123+
@inherit: %spectrum-FocusRing;
144124

145125
border-style: solid;
146126
--spectrum-button-border-radius: var(--spectrum-button-primary-border-radius);
@@ -190,7 +170,7 @@ a.spectrum-ActionButton {
190170

191171
.spectrum-ActionButton {
192172
@inherit: %spectrum-BaseButton;
193-
@inherit: %spectrum-ButtonWithFocusRing;
173+
@inherit: %spectrum-FocusRing;
194174
position: relative;
195175

196176
block-size: var(--spectrum-actionbutton-height);
@@ -281,7 +261,7 @@ a.spectrum-ActionButton {
281261

282262
.spectrum-LogicButton {
283263
@inherit: %spectrum-BaseButton;
284-
@inherit: %spectrum-ButtonWithFocusRing;
264+
@inherit: %spectrum-FocusRing;
285265

286266
block-size: var(--spectrum-logicbutton-and-height);
287267
padding: var(--spectrum-logicbutton-and-padding-x);
@@ -296,7 +276,9 @@ a.spectrum-ActionButton {
296276

297277
.spectrum-FieldButton {
298278
@inherit: %spectrum-BaseButton;
279+
@inherit: %spectrum-FocusRing;
299280

281+
position: relative;
300282
block-size: var(--spectrum-dropdown-height);
301283

302284
padding: 0 var(--spectrum-dropdown-padding-x);
@@ -309,16 +291,19 @@ a.spectrum-ActionButton {
309291

310292
cursor: default;
311293
outline: none;
294+
295+
--spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
296+
--spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
312297
}
313298

314299
.spectrum-FieldButton {
315300
margin: 0;
316301
padding-block: 0;
317302
padding-inline: var(--spectrum-dropdown-padding-x);
318303

319-
border-width: var(--spectrum-dropdown-border-size);
304+
--spectrum-button-border-width: var(--spectrum-dropdown-border-size);
305+
--spectrum-button-border-radius: var(--spectrum-border-radius);
320306
border-style: solid;
321-
border-radius: var(--spectrum-border-radius);
322307

323308
transition: background-color var(--spectrum-global-animation-duration-100),
324309
box-shadow var(--spectrum-global-animation-duration-100),
@@ -336,11 +321,14 @@ a.spectrum-ActionButton {
336321
}
337322

338323
.spectrum-FieldButton--quiet {
324+
@inherit: %spectrum-FocusRing--quiet;
325+
339326
margin: var(--spectrum-fieldbutton-quiet-margin);
340327
padding: var(--spectrum-fieldbutton-quiet-padding);
341328

342-
border-width: var(--spectrum-fieldbutton-quiet-border-size);
343-
border-radius: var(--spectrum-fieldbutton-quiet-border-radius);
329+
--spectrum-button-border-width: var(--spectrum-fieldbutton-quiet-border-size);
330+
--spectrum-button-border-radius: var(--spectrum-fieldbutton-quiet-border-radius);
331+
--spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);
344332
&:disabled,
345333
&.is-disabled {
346334
&:focus-ring {
@@ -351,7 +339,7 @@ a.spectrum-ActionButton {
351339

352340
.spectrum-ClearButton {
353341
@inherit: %spectrum-BaseButton;
354-
@inherit: %spectrum-ButtonWithFocusRing;
342+
@inherit: %spectrum-FocusRing;
355343

356344
inline-size: var(--spectrum-clearbutton-medium-width);
357345
block-size: var(--spectrum-clearbutton-medium-height);

0 commit comments

Comments
 (0)