diff --git a/lib/varsToTypeScript.js b/lib/varsToTypeScript.js
index b7c5cabcfb9..54db821bc74 100644
--- a/lib/varsToTypeScript.js
+++ b/lib/varsToTypeScript.js
@@ -17,11 +17,12 @@ const customPropertyRegExp = /^--[A-z][\w-]*$/;
const patterns = [
[/^--spectrum-global-dimension-((?:static-)?size-.*)$/, 'DimensionValue'],
[/^--spectrum-alias-(?!.*text)(.*-(?:height|width))$/, 'DimensionValue'],
- [/^--spectrum-global-color-(?!.*opacity)(.*)$/, 'ColorValue'],
+ [/^--spectrum-global-color-(?!.*opacity|status|version)(.*)$/, 'ColorValue'],
[/^--spectrum-semantic-(.*?)-color-default$/, 'ColorValue'],
[/^--spectrum-semantic-(.*?)-color-border$/, 'BorderColorValue'],
[/^--spectrum-alias-border-color-(.*)$/, 'BorderColorValue'],
[/^--spectrum-alias-background-color-(?!.*overlay|quickactions)(.*)$/, 'BackgroundColorValue'],
+ [/^--spectrum-semantic-(.*?)-color-icon$/, 'IconColorValue'],
[/^--spectrum-alias-border-size-(.*)$/, 'BorderSizeValue'],
[/^--spectrum-alias-border-radius-(.*)$/, 'BorderRadiusValue']
];
@@ -86,4 +87,4 @@ for (let type in types) {
ts = ts.trim() + ';\n\n';
}
-fs.writeFileSync(`${__dirname}/../packages/@react-types/shared/src/dna.ts`, ts.trim() + '\n');
+fs.writeFileSync(`${__dirname}/../packages/@react-types/shared/src/dna.d.ts`, ts.trim() + '\n');
diff --git a/packages/@react-spectrum/icon/docs/workflow-icons.mdx b/packages/@react-spectrum/icon/docs/workflow-icons.mdx
index 4140329a4d4..0c06f8a9404 100644
--- a/packages/@react-spectrum/icon/docs/workflow-icons.mdx
+++ b/packages/@react-spectrum/icon/docs/workflow-icons.mdx
@@ -18,6 +18,7 @@ import workflowIconPackageData from '@spectrum-icons/workflow/package.json';
```jsx import
// import {Icon} from '@react-spectrum/icon';
// import IconTable from './IconTable';
+import {Flex} from '@react-spectrum/layout';
```
---
@@ -39,7 +40,7 @@ Workflow icons are graphical metaphors or symbols that can be used to compliment
```tsx example
import Airplane from '@spectrum-icons/workflow/Airplane';
-
+
```
## Sizing
@@ -51,13 +52,32 @@ but if you use icons standalone, you can use the `size` prop to control the sizi
```tsx example
import Beaker from '@spectrum-icons/workflow/Beaker';
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+```
+
+## Coloring
+
+Icons support four Spectrum semantic colors: `negative`, `notice`, `positive`, and `informative`. Icons within React Spectrum components typically
+have their colors styled appropriately, but you can use the `color` prop to adjust the color of any standalone icons.
+
+```tsx example
+import Alert from '@spectrum-icons/workflow/Alert';
+
+
+
+
+
+
+
+
```
## Labeling
diff --git a/packages/@react-spectrum/icon/src/Icon.tsx b/packages/@react-spectrum/icon/src/Icon.tsx
index 6cb19c9000b..338656026ce 100644
--- a/packages/@react-spectrum/icon/src/Icon.tsx
+++ b/packages/@react-spectrum/icon/src/Icon.tsx
@@ -10,8 +10,8 @@
* governing permissions and limitations under the License.
*/
-import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared';
-import {classNames, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import {AriaLabelingProps, DOMProps, IconColorValue, StyleProps} from '@react-types/shared';
+import {classNames, iconStyleProps, useSlotProps, useStyleProps} from '@react-spectrum/utils';
import {filterDOMProps} from '@react-aria/utils';
import React, {ReactElement} from 'react';
import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
@@ -38,7 +38,11 @@ interface IconProps extends DOMProps, AriaLabelingProps, StyleProps {
/**
* Indicates whether the element is exposed to an accessibility API.
*/
- 'aria-hidden'?: boolean | 'false' | 'true'
+ 'aria-hidden'?: boolean | 'false' | 'true',
+ /**
+ * Color of the Icon.
+ */
+ color?: IconColorValue
}
export type IconPropsWithoutChildren = Omit;
@@ -55,7 +59,7 @@ export function Icon(props: IconProps) {
'aria-hidden': ariaHidden,
...otherProps
} = props;
- let {styleProps} = useStyleProps(otherProps);
+ let {styleProps} = useStyleProps(otherProps, iconStyleProps);
let provider = useProvider();
let scale = 'M';
diff --git a/packages/@react-spectrum/utils/src/styleProps.ts b/packages/@react-spectrum/utils/src/styleProps.ts
index 4284ef8f4d9..572efab05d9 100644
--- a/packages/@react-spectrum/utils/src/styleProps.ts
+++ b/packages/@react-spectrum/utils/src/styleProps.ts
@@ -10,7 +10,7 @@
* governing permissions and limitations under the License.
*/
-import {BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderSizeValue, ColorValue, DimensionValue, Direction, StyleProps, ViewStyleProps} from '@react-types/shared';
+import {BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderSizeValue, ColorValue, DimensionValue, Direction, IconColorValue, StyleProps, ViewStyleProps} from '@react-types/shared';
import {CSSProperties, HTMLAttributes} from 'react';
import {useLocale} from '@react-aria/i18n';
@@ -110,6 +110,11 @@ const borderStyleProps = {
borderBottomWidth: 'borderBottomStyle'
};
+export const iconStyleProps: StyleHandlers = {
+ ...baseStyleProps,
+ color: ['color', iconColorValue]
+};
+
function rtl(ltr: string, rtl: string) {
return (direction: Direction) => (
direction === 'rtl' ? rtl : ltr
@@ -134,6 +139,10 @@ function colorValue(value: ColorValue, type: ColorType = 'default') {
return `var(--spectrum-global-color-${value}, var(--spectrum-semantic-${value}-color-${type}))`;
}
+function iconColorValue(value: IconColorValue) {
+ return `var(--spectrum-semantic-${value}-color-icon)`;
+}
+
function backgroundColorValue(value: BackgroundColorValue) {
return `var(--spectrum-alias-background-color-${value}, ${colorValue(value as ColorValue, 'background')})`;
}
diff --git a/packages/@react-types/shared/src/dna.d.ts b/packages/@react-types/shared/src/dna.d.ts
index 40733e40d0f..7a4b6f4c488 100644
--- a/packages/@react-types/shared/src/dna.d.ts
+++ b/packages/@react-types/shared/src/dna.d.ts
@@ -10,6 +10,8 @@
* governing permissions and limitations under the License.
*/
+// This file is generated by lib/varsToTypeScript.js! DO NOT EDIT.
+
/** See the [Styling docs](styling.html#dimension-values) for a visualization of these values. */
export type DimensionValue =
| 'size-0'
@@ -63,7 +65,9 @@ export type DimensionValue =
| 'static-size-100'
| 'static-size-115'
| 'static-size-125'
+ | 'static-size-130'
| 'static-size-150'
+ | 'static-size-160'
| 'static-size-175'
| 'static-size-200'
| 'static-size-225'
@@ -168,10 +172,13 @@ export type ColorValue =
| 'static-gray-700'
| 'static-gray-800'
| 'static-gray-900'
+ | 'static-blue-200'
+ | 'static-blue-300'
| 'static-blue-400'
| 'static-blue-500'
| 'static-blue-600'
| 'static-blue-700'
+ | 'static-blue-800'
| 'static-red-400'
| 'static-red-500'
| 'static-red-600'
@@ -184,18 +191,25 @@ export type ColorValue =
| 'static-green-500'
| 'static-green-600'
| 'static-green-700'
+ | 'static-celery-200'
+ | 'static-celery-300'
| 'static-celery-400'
| 'static-celery-500'
| 'static-celery-600'
| 'static-celery-700'
+ | 'static-chartreuse-300'
| 'static-chartreuse-400'
| 'static-chartreuse-500'
| 'static-chartreuse-600'
| 'static-chartreuse-700'
+ | 'static-yellow-200'
+ | 'static-yellow-300'
| 'static-yellow-400'
| 'static-yellow-500'
| 'static-yellow-600'
| 'static-yellow-700'
+ | 'static-magenta-200'
+ | 'static-magenta-300'
| 'static-magenta-400'
| 'static-magenta-500'
| 'static-magenta-600'
@@ -208,10 +222,15 @@ export type ColorValue =
| 'static-purple-500'
| 'static-purple-600'
| 'static-purple-700'
+ | 'static-purple-800'
+ | 'static-indigo-200'
+ | 'static-indigo-300'
| 'static-indigo-400'
| 'static-indigo-500'
| 'static-indigo-600'
| 'static-indigo-700'
+ | 'static-seafoam-200'
+ | 'static-seafoam-300'
| 'static-seafoam-400'
| 'static-seafoam-500'
| 'static-seafoam-600'
@@ -228,8 +247,10 @@ export type BorderColorValue =
| 'positive'
| 'informative'
| 'hover'
- | 'focus'
| 'down'
+ | 'focus'
+ | 'mouse-focus'
+ | 'disabled'
| 'extralight'
| 'light'
| 'mid'
@@ -245,6 +266,12 @@ export type BackgroundColorValue =
| 'label-gray'
| ColorValue;
+export type IconColorValue =
+ | 'negative'
+ | 'notice'
+ | 'positive'
+ | 'informative';
+
export type BorderSizeValue =
| 'thin'
| 'thick'