Skip to content

Commit e876e7a

Browse files
nlopinnlopin
committed
feat(icon): migrate to semantic colors
1 parent 9ad1848 commit e876e7a

File tree

471 files changed

+4156
-3030
lines changed

Some content is hidden

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

471 files changed

+4156
-3030
lines changed

‎scripts/generate-icons

+8-9
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,15 @@ const argv = yargs.command('$0 <input>', '', yargs => {
5151
function template(babel, opts, { imports, componentName, props, jsx, exports }) {
5252
const header = `// DO NOT EDIT. This file was generated by running \`npm run generate\`.`;
5353

54-
const libImports = `${opts.colorProp ? "import { Colors } from '../../essentials';" : ''}`;
54+
const libImports = `${opts.colorProp ? "import { getSemanticValue } from '../../utils/cssVariables';" : ''}`;
5555

5656
const typeDef = `type Props = ${opts.colorProp ? 'IconProps' : "Omit<IconProps, 'color'>"};`;
5757

5858
const name = generate(componentName).code;
5959
const nameDecl = `${name}: React.FC<Props>`;
6060

61-
const defaultProps = `${name}.defaultProps = {
62-
${opts.colorProp ? 'color: Colors.AUTHENTIC_BLUE_900' : ''}
63-
};`;
61+
const iconProps = opts.colorProp ? "({ size = 'medium', color = getSemanticValue('icon-primary-default'), ...rest})" :
62+
"({ size = 'medium', ...props})";
6463

6564
return babel.template.smart({ plugins: ['typescript'] }).ast`
6665
${header}
@@ -73,16 +72,15 @@ function template(babel, opts, { imports, componentName, props, jsx, exports })
7372
7473
${typeDef}
7574
76-
const ${nameDecl}: FC = ({ size = 'medium', ...props}: IconProps) => {
75+
const ${nameDecl}: FC = ${iconProps} => {
76+
${opts.colorProp ? 'const props = {...rest, color}' : ''}
7777
const sizePx = (Number.isFinite(size as number)) ? size : get(\`iconSizes.\${size}\`)(props) || get('iconSizes.medium')(props);
78-
78+
7979
return (
8080
${jsx}
8181
);
8282
};
8383
84-
${defaultProps}
85-
8684
${exports}`;
8785
}
8886

@@ -163,7 +161,8 @@ for (let file of getSvgSources(argv.input, { recursive: argv.recursive })) {
163161
svgProps: { width: '{sizePx}', height: '{sizePx}' },
164162
replaceAttrValues: colorProp
165163
? {
166-
[Colors.AUTHENTIC_BLUE_900]: 'currentColor'
164+
// replace default color for the source svg icons (see assets/icons folder)
165+
['#001E3E']: 'currentColor'
167166
}
168167
: {},
169168
...additionalConfig

‎src/icons/IconProps.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { ComponentPropsWithoutRef } from 'react';
2-
import { Colors } from '../essentials';
2+
import { SemanticCssVariable } from '../essentials/Colors/types';
33

44
export interface IconProps extends ComponentPropsWithoutRef<'svg'> {
55
/**
66
* Overrides the default color of the icon.
77
*/
8-
color?: Colors | 'inherit';
8+
color?: SemanticCssVariable | 'inherit' | string;
99
/**
1010
* Adjusts the size of the icon with defaults or the size in pixels.
1111
*/

‎src/icons/actions/AlertIcon.tsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
// DO NOT EDIT. This file was generated by running `npm run generate`.;
22
import * as React from 'react';
3-
import { Colors } from '../../essentials';
3+
import { getSemanticValue } from '../../utils/cssVariables';
44
import { get } from '../../utils/themeGet';
55
import { IconProps } from '../IconProps';
66
type Props = IconProps;
7-
8-
const AlertIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
7+
const AlertIcon: React.FC<Props> = ({ size = 'medium', color = getSemanticValue('icon-primary-default'), ...rest }) => {
8+
const props = { ...rest, color };
99
const sizePx = Number.isFinite(size as number)
1010
? size
1111
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
1212
return (
13-
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
13+
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1414
<path
1515
d="M11.71 2l10.71 19.04H1L11.71 2zm0 4.08L4.42 19.04H19L11.71 6.08zm0 9.56a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4zm1-5.8v4.8h-2v-4.8h2z"
1616
fill="currentColor"
@@ -19,8 +19,4 @@ const AlertIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) =>
1919
</svg>
2020
);
2121
};
22-
23-
AlertIcon.defaultProps = {
24-
color: Colors.AUTHENTIC_BLUE_900
25-
};
2622
export default AlertIcon;

‎src/icons/actions/CheckCircleOutlineIcon.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
// DO NOT EDIT. This file was generated by running `npm run generate`.;
22
import * as React from 'react';
3-
import { Colors } from '../../essentials';
3+
import { getSemanticValue } from '../../utils/cssVariables';
44
import { get } from '../../utils/themeGet';
55
import { IconProps } from '../IconProps';
66
type Props = IconProps;
7-
8-
const CheckCircleOutlineIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
7+
const CheckCircleOutlineIcon: React.FC<Props> = ({
8+
size = 'medium',
9+
color = getSemanticValue('icon-primary-default'),
10+
...rest
11+
}) => {
12+
const props = { ...rest, color };
913
const sizePx = Number.isFinite(size as number)
1014
? size
1115
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
1216
return (
13-
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
17+
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1418
<path
1519
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm3.898 4.293l1.415 1.414-6.32 6.319-3.696-3.657 1.406-1.422 2.283 2.258 4.912-4.912z"
1620
fill="currentColor"
@@ -19,8 +23,4 @@ const CheckCircleOutlineIcon: React.FC<Props> = ({ size = 'medium', ...props }:
1923
</svg>
2024
);
2125
};
22-
23-
CheckCircleOutlineIcon.defaultProps = {
24-
color: Colors.AUTHENTIC_BLUE_900
25-
};
2626
export default CheckCircleOutlineIcon;

‎src/icons/actions/CheckCircleSolidIcon.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
// DO NOT EDIT. This file was generated by running `npm run generate`.;
22
import * as React from 'react';
3-
import { Colors } from '../../essentials';
3+
import { getSemanticValue } from '../../utils/cssVariables';
44
import { get } from '../../utils/themeGet';
55
import { IconProps } from '../IconProps';
66
type Props = IconProps;
7-
8-
const CheckCircleSolidIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
7+
const CheckCircleSolidIcon: React.FC<Props> = ({
8+
size = 'medium',
9+
color = getSemanticValue('icon-primary-default'),
10+
...rest
11+
}) => {
12+
const props = { ...rest, color };
913
const sizePx = Number.isFinite(size as number)
1014
? size
1115
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
1216
return (
13-
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
17+
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1418
<path
1519
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm3.898 6.293l-4.912 4.912-2.283-2.258-1.406 1.422 3.696 3.657 6.32-6.319-1.415-1.414z"
1620
fill="currentColor"
@@ -19,8 +23,4 @@ const CheckCircleSolidIcon: React.FC<Props> = ({ size = 'medium', ...props }: Ic
1923
</svg>
2024
);
2125
};
22-
23-
CheckCircleSolidIcon.defaultProps = {
24-
color: Colors.AUTHENTIC_BLUE_900
25-
};
2626
export default CheckCircleSolidIcon;

‎src/icons/actions/CheckIcon.tsx

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
// DO NOT EDIT. This file was generated by running `npm run generate`.;
22
import * as React from 'react';
3-
import { Colors } from '../../essentials';
3+
import { getSemanticValue } from '../../utils/cssVariables';
44
import { get } from '../../utils/themeGet';
55
import { IconProps } from '../IconProps';
66
type Props = IconProps;
7-
8-
const CheckIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
7+
const CheckIcon: React.FC<Props> = ({ size = 'medium', color = getSemanticValue('icon-primary-default'), ...rest }) => {
8+
const props = { ...rest, color };
99
const sizePx = Number.isFinite(size as number)
1010
? size
1111
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
1212
return (
13-
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" fill="none">
13+
<svg
14+
{...props}
15+
width={sizePx}
16+
height={sizePx}
17+
viewBox="0 0 24 24"
18+
fill="none"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
1421
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" fill="currentColor" />
1522
</svg>
1623
);
1724
};
18-
19-
CheckIcon.defaultProps = {
20-
color: Colors.AUTHENTIC_BLUE_900
21-
};
2225
export default CheckIcon;

‎src/icons/actions/CloseCircleOutlineIcon.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
// DO NOT EDIT. This file was generated by running `npm run generate`.;
22
import * as React from 'react';
3-
import { Colors } from '../../essentials';
3+
import { getSemanticValue } from '../../utils/cssVariables';
44
import { get } from '../../utils/themeGet';
55
import { IconProps } from '../IconProps';
66
type Props = IconProps;
7-
8-
const CloseCircleOutlineIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
7+
const CloseCircleOutlineIcon: React.FC<Props> = ({
8+
size = 'medium',
9+
color = getSemanticValue('icon-primary-default'),
10+
...rest
11+
}) => {
12+
const props = { ...rest, color };
913
const sizePx = Number.isFinite(size as number)
1014
? size
1115
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
1216
return (
13-
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
17+
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1418
<path
1519
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm2.364 4l1.414 1.414-2.475 2.475 2.475 2.475-1.414 1.414-2.475-2.475-2.475 2.475L8 14.364l2.474-2.475L8 9.414 9.414 8l2.475 2.474L14.364 8z"
1620
fill="currentColor"
@@ -19,8 +23,4 @@ const CloseCircleOutlineIcon: React.FC<Props> = ({ size = 'medium', ...props }:
1923
</svg>
2024
);
2125
};
22-
23-
CloseCircleOutlineIcon.defaultProps = {
24-
color: Colors.AUTHENTIC_BLUE_900
25-
};
2626
export default CloseCircleOutlineIcon;

‎src/icons/actions/CloseCircleSolidIcon.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
// DO NOT EDIT. This file was generated by running `npm run generate`.;
22
import * as React from 'react';
3-
import { Colors } from '../../essentials';
3+
import { getSemanticValue } from '../../utils/cssVariables';
44
import { get } from '../../utils/themeGet';
55
import { IconProps } from '../IconProps';
66
type Props = IconProps;
7-
8-
const CloseCircleSolidIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
7+
const CloseCircleSolidIcon: React.FC<Props> = ({
8+
size = 'medium',
9+
color = getSemanticValue('icon-primary-default'),
10+
...rest
11+
}) => {
12+
const props = { ...rest, color };
913
const sizePx = Number.isFinite(size as number)
1014
? size
1115
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
1216
return (
13-
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
17+
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1418
<path
1519
d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm2.364 6l-2.475 2.474L9.414 8 8 9.414l2.474 2.475L8 14.364l1.414 1.414 2.475-2.475 2.475 2.475 1.414-1.414-2.475-2.475 2.475-2.475L14.364 8z"
1620
fill="currentColor"
@@ -19,8 +23,4 @@ const CloseCircleSolidIcon: React.FC<Props> = ({ size = 'medium', ...props }: Ic
1923
</svg>
2024
);
2125
};
22-
23-
CloseCircleSolidIcon.defaultProps = {
24-
color: Colors.AUTHENTIC_BLUE_900
25-
};
2626
export default CloseCircleSolidIcon;

‎src/icons/actions/CloseIcon.tsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
// DO NOT EDIT. This file was generated by running `npm run generate`.;
22
import * as React from 'react';
3-
import { Colors } from '../../essentials';
3+
import { getSemanticValue } from '../../utils/cssVariables';
44
import { get } from '../../utils/themeGet';
55
import { IconProps } from '../IconProps';
66
type Props = IconProps;
7-
8-
const CloseIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
7+
const CloseIcon: React.FC<Props> = ({ size = 'medium', color = getSemanticValue('icon-primary-default'), ...rest }) => {
8+
const props = { ...rest, color };
99
const sizePx = Number.isFinite(size as number)
1010
? size
1111
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
1212
return (
13-
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
13+
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1414
<path
1515
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
1616
fill="currentColor"
@@ -19,8 +19,4 @@ const CloseIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) =>
1919
</svg>
2020
);
2121
};
22-
23-
CloseIcon.defaultProps = {
24-
color: Colors.AUTHENTIC_BLUE_900
25-
};
2622
export default CloseIcon;

‎src/icons/actions/CopyIcon.tsx

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
// DO NOT EDIT. This file was generated by running `npm run generate`.;
22
import * as React from 'react';
3-
import { Colors } from '../../essentials';
3+
import { getSemanticValue } from '../../utils/cssVariables';
44
import { get } from '../../utils/themeGet';
55
import { IconProps } from '../IconProps';
66
type Props = IconProps;
7-
8-
const CopyIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
7+
const CopyIcon: React.FC<Props> = ({ size = 'medium', color = getSemanticValue('icon-primary-default'), ...rest }) => {
8+
const props = { ...rest, color };
99
const sizePx = Number.isFinite(size as number)
1010
? size
1111
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
1212
return (
13-
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" fill="none">
13+
<svg
14+
{...props}
15+
width={sizePx}
16+
height={sizePx}
17+
viewBox="0 0 24 24"
18+
fill="none"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
1421
<path
1522
fillRule="evenodd"
1623
clipRule="evenodd"
@@ -20,8 +27,4 @@ const CopyIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) =>
2027
</svg>
2128
);
2229
};
23-
24-
CopyIcon.defaultProps = {
25-
color: Colors.AUTHENTIC_BLUE_900
26-
};
2730
export default CopyIcon;

‎src/icons/actions/DownloadIcon.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
// DO NOT EDIT. This file was generated by running `npm run generate`.;
22
import * as React from 'react';
3-
import { Colors } from '../../essentials';
3+
import { getSemanticValue } from '../../utils/cssVariables';
44
import { get } from '../../utils/themeGet';
55
import { IconProps } from '../IconProps';
66
type Props = IconProps;
7-
8-
const DownloadIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
7+
const DownloadIcon: React.FC<Props> = ({
8+
size = 'medium',
9+
color = getSemanticValue('icon-primary-default'),
10+
...rest
11+
}) => {
12+
const props = { ...rest, color };
913
const sizePx = Number.isFinite(size as number)
1014
? size
1115
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
1216
return (
13-
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
17+
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1418
<path
1519
d="M19 19v2H5v-2h14zM13 3v10.436l5-4.445v2.676L12 17l-6-5.333V8.991l5 4.445V3h2z"
1620
fill="currentColor"
@@ -19,8 +23,4 @@ const DownloadIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps)
1923
</svg>
2024
);
2125
};
22-
23-
DownloadIcon.defaultProps = {
24-
color: Colors.AUTHENTIC_BLUE_900
25-
};
2626
export default DownloadIcon;

‎src/icons/actions/EnvelopeIcon.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
// DO NOT EDIT. This file was generated by running `npm run generate`.;
22
import * as React from 'react';
3-
import { Colors } from '../../essentials';
3+
import { getSemanticValue } from '../../utils/cssVariables';
44
import { get } from '../../utils/themeGet';
55
import { IconProps } from '../IconProps';
66
type Props = IconProps;
7-
8-
const EnvelopeIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
7+
const EnvelopeIcon: React.FC<Props> = ({
8+
size = 'medium',
9+
color = getSemanticValue('icon-primary-default'),
10+
...rest
11+
}) => {
12+
const props = { ...rest, color };
913
const sizePx = Number.isFinite(size as number)
1014
? size
1115
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
1216
return (
13-
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
17+
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
1418
<path
1519
d="M22 5v14H2V5h20zm-2 3.249L15 12a5 5 0 01-6 0L4 8.249V17h16V8.249zM18.332 7H5.668l4.532 3.4a3 3 0 003.6 0L18.332 7z"
1620
fill="currentColor"
@@ -19,8 +23,4 @@ const EnvelopeIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps)
1923
</svg>
2024
);
2125
};
22-
23-
EnvelopeIcon.defaultProps = {
24-
color: Colors.AUTHENTIC_BLUE_900
25-
};
2626
export default EnvelopeIcon;

0 commit comments

Comments
 (0)