Skip to content

Commit

Permalink
feat(icon): migrate to semantic colors
Browse files Browse the repository at this point in the history
  • Loading branch information
nlopin committed Jul 12, 2023
1 parent 9ad1848 commit e876e7a
Show file tree
Hide file tree
Showing 471 changed files with 4,156 additions and 3,030 deletions.
17 changes: 8 additions & 9 deletions scripts/generate-icons
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,15 @@ const argv = yargs.command('$0 <input>', '', yargs => {
function template(babel, opts, { imports, componentName, props, jsx, exports }) {
const header = `// DO NOT EDIT. This file was generated by running \`npm run generate\`.`;

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

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

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

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

return babel.template.smart({ plugins: ['typescript'] }).ast`
${header}
Expand All @@ -73,16 +72,15 @@ function template(babel, opts, { imports, componentName, props, jsx, exports })
${typeDef}
const ${nameDecl}: FC = ({ size = 'medium', ...props}: IconProps) => {
const ${nameDecl}: FC = ${iconProps} => {
${opts.colorProp ? 'const props = {...rest, color}' : ''}
const sizePx = (Number.isFinite(size as number)) ? size : get(\`iconSizes.\${size}\`)(props) || get('iconSizes.medium')(props);
return (
${jsx}
);
};
${defaultProps}
${exports}`;
}

Expand Down Expand Up @@ -163,7 +161,8 @@ for (let file of getSvgSources(argv.input, { recursive: argv.recursive })) {
svgProps: { width: '{sizePx}', height: '{sizePx}' },
replaceAttrValues: colorProp
? {
[Colors.AUTHENTIC_BLUE_900]: 'currentColor'
// replace default color for the source svg icons (see assets/icons folder)
['#001E3E']: 'currentColor'
}
: {},
...additionalConfig
Expand Down
4 changes: 2 additions & 2 deletions src/icons/IconProps.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { ComponentPropsWithoutRef } from 'react';
import { Colors } from '../essentials';
import { SemanticCssVariable } from '../essentials/Colors/types';

export interface IconProps extends ComponentPropsWithoutRef<'svg'> {
/**
* Overrides the default color of the icon.
*/
color?: Colors | 'inherit';
color?: SemanticCssVariable | 'inherit' | string;
/**
* Adjusts the size of the icon with defaults or the size in pixels.
*/
Expand Down
12 changes: 4 additions & 8 deletions src/icons/actions/AlertIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
// DO NOT EDIT. This file was generated by running `npm run generate`.;
import * as React from 'react';
import { Colors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';
import { get } from '../../utils/themeGet';
import { IconProps } from '../IconProps';
type Props = IconProps;

const AlertIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
const AlertIcon: React.FC<Props> = ({ size = 'medium', color = getSemanticValue('icon-primary-default'), ...rest }) => {
const props = { ...rest, color };
const sizePx = Number.isFinite(size as number)
? size
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
return (
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="currentColor"
Expand All @@ -19,8 +19,4 @@ const AlertIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) =>
</svg>
);
};

AlertIcon.defaultProps = {
color: Colors.AUTHENTIC_BLUE_900
};
export default AlertIcon;
16 changes: 8 additions & 8 deletions src/icons/actions/CheckCircleOutlineIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
// DO NOT EDIT. This file was generated by running `npm run generate`.;
import * as React from 'react';
import { Colors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';
import { get } from '../../utils/themeGet';
import { IconProps } from '../IconProps';
type Props = IconProps;

const CheckCircleOutlineIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
const CheckCircleOutlineIcon: React.FC<Props> = ({
size = 'medium',
color = getSemanticValue('icon-primary-default'),
...rest
}) => {
const props = { ...rest, color };
const sizePx = Number.isFinite(size as number)
? size
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
return (
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="currentColor"
Expand All @@ -19,8 +23,4 @@ const CheckCircleOutlineIcon: React.FC<Props> = ({ size = 'medium', ...props }:
</svg>
);
};

CheckCircleOutlineIcon.defaultProps = {
color: Colors.AUTHENTIC_BLUE_900
};
export default CheckCircleOutlineIcon;
16 changes: 8 additions & 8 deletions src/icons/actions/CheckCircleSolidIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
// DO NOT EDIT. This file was generated by running `npm run generate`.;
import * as React from 'react';
import { Colors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';
import { get } from '../../utils/themeGet';
import { IconProps } from '../IconProps';
type Props = IconProps;

const CheckCircleSolidIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
const CheckCircleSolidIcon: React.FC<Props> = ({
size = 'medium',
color = getSemanticValue('icon-primary-default'),
...rest
}) => {
const props = { ...rest, color };
const sizePx = Number.isFinite(size as number)
? size
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
return (
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="currentColor"
Expand All @@ -19,8 +23,4 @@ const CheckCircleSolidIcon: React.FC<Props> = ({ size = 'medium', ...props }: Ic
</svg>
);
};

CheckCircleSolidIcon.defaultProps = {
color: Colors.AUTHENTIC_BLUE_900
};
export default CheckCircleSolidIcon;
19 changes: 11 additions & 8 deletions src/icons/actions/CheckIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
// DO NOT EDIT. This file was generated by running `npm run generate`.;
import * as React from 'react';
import { Colors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';
import { get } from '../../utils/themeGet';
import { IconProps } from '../IconProps';
type Props = IconProps;

const CheckIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
const CheckIcon: React.FC<Props> = ({ size = 'medium', color = getSemanticValue('icon-primary-default'), ...rest }) => {
const props = { ...rest, color };
const sizePx = Number.isFinite(size as number)
? size
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
return (
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" fill="none">
<svg
{...props}
width={sizePx}
height={sizePx}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" fill="currentColor" />
</svg>
);
};

CheckIcon.defaultProps = {
color: Colors.AUTHENTIC_BLUE_900
};
export default CheckIcon;
16 changes: 8 additions & 8 deletions src/icons/actions/CloseCircleOutlineIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
// DO NOT EDIT. This file was generated by running `npm run generate`.;
import * as React from 'react';
import { Colors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';
import { get } from '../../utils/themeGet';
import { IconProps } from '../IconProps';
type Props = IconProps;

const CloseCircleOutlineIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
const CloseCircleOutlineIcon: React.FC<Props> = ({
size = 'medium',
color = getSemanticValue('icon-primary-default'),
...rest
}) => {
const props = { ...rest, color };
const sizePx = Number.isFinite(size as number)
? size
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
return (
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="currentColor"
Expand All @@ -19,8 +23,4 @@ const CloseCircleOutlineIcon: React.FC<Props> = ({ size = 'medium', ...props }:
</svg>
);
};

CloseCircleOutlineIcon.defaultProps = {
color: Colors.AUTHENTIC_BLUE_900
};
export default CloseCircleOutlineIcon;
16 changes: 8 additions & 8 deletions src/icons/actions/CloseCircleSolidIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
// DO NOT EDIT. This file was generated by running `npm run generate`.;
import * as React from 'react';
import { Colors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';
import { get } from '../../utils/themeGet';
import { IconProps } from '../IconProps';
type Props = IconProps;

const CloseCircleSolidIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
const CloseCircleSolidIcon: React.FC<Props> = ({
size = 'medium',
color = getSemanticValue('icon-primary-default'),
...rest
}) => {
const props = { ...rest, color };
const sizePx = Number.isFinite(size as number)
? size
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
return (
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="currentColor"
Expand All @@ -19,8 +23,4 @@ const CloseCircleSolidIcon: React.FC<Props> = ({ size = 'medium', ...props }: Ic
</svg>
);
};

CloseCircleSolidIcon.defaultProps = {
color: Colors.AUTHENTIC_BLUE_900
};
export default CloseCircleSolidIcon;
12 changes: 4 additions & 8 deletions src/icons/actions/CloseIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
// DO NOT EDIT. This file was generated by running `npm run generate`.;
import * as React from 'react';
import { Colors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';
import { get } from '../../utils/themeGet';
import { IconProps } from '../IconProps';
type Props = IconProps;

const CloseIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
const CloseIcon: React.FC<Props> = ({ size = 'medium', color = getSemanticValue('icon-primary-default'), ...rest }) => {
const props = { ...rest, color };
const sizePx = Number.isFinite(size as number)
? size
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
return (
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="currentColor"
Expand All @@ -19,8 +19,4 @@ const CloseIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) =>
</svg>
);
};

CloseIcon.defaultProps = {
color: Colors.AUTHENTIC_BLUE_900
};
export default CloseIcon;
19 changes: 11 additions & 8 deletions src/icons/actions/CopyIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
// DO NOT EDIT. This file was generated by running `npm run generate`.;
import * as React from 'react';
import { Colors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';
import { get } from '../../utils/themeGet';
import { IconProps } from '../IconProps';
type Props = IconProps;

const CopyIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
const CopyIcon: React.FC<Props> = ({ size = 'medium', color = getSemanticValue('icon-primary-default'), ...rest }) => {
const props = { ...rest, color };
const sizePx = Number.isFinite(size as number)
? size
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
return (
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" fill="none">
<svg
{...props}
width={sizePx}
height={sizePx}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
Expand All @@ -20,8 +27,4 @@ const CopyIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) =>
</svg>
);
};

CopyIcon.defaultProps = {
color: Colors.AUTHENTIC_BLUE_900
};
export default CopyIcon;
16 changes: 8 additions & 8 deletions src/icons/actions/DownloadIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
// DO NOT EDIT. This file was generated by running `npm run generate`.;
import * as React from 'react';
import { Colors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';
import { get } from '../../utils/themeGet';
import { IconProps } from '../IconProps';
type Props = IconProps;

const DownloadIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
const DownloadIcon: React.FC<Props> = ({
size = 'medium',
color = getSemanticValue('icon-primary-default'),
...rest
}) => {
const props = { ...rest, color };
const sizePx = Number.isFinite(size as number)
? size
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
return (
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M19 19v2H5v-2h14zM13 3v10.436l5-4.445v2.676L12 17l-6-5.333V8.991l5 4.445V3h2z"
fill="currentColor"
Expand All @@ -19,8 +23,4 @@ const DownloadIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps)
</svg>
);
};

DownloadIcon.defaultProps = {
color: Colors.AUTHENTIC_BLUE_900
};
export default DownloadIcon;
16 changes: 8 additions & 8 deletions src/icons/actions/EnvelopeIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
// DO NOT EDIT. This file was generated by running `npm run generate`.;
import * as React from 'react';
import { Colors } from '../../essentials';
import { getSemanticValue } from '../../utils/cssVariables';
import { get } from '../../utils/themeGet';
import { IconProps } from '../IconProps';
type Props = IconProps;

const EnvelopeIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps) => {
const EnvelopeIcon: React.FC<Props> = ({
size = 'medium',
color = getSemanticValue('icon-primary-default'),
...rest
}) => {
const props = { ...rest, color };
const sizePx = Number.isFinite(size as number)
? size
: get(`iconSizes.${size}`)(props) || get('iconSizes.medium')(props);
return (
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24">
<svg {...props} width={sizePx} height={sizePx} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="currentColor"
Expand All @@ -19,8 +23,4 @@ const EnvelopeIcon: React.FC<Props> = ({ size = 'medium', ...props }: IconProps)
</svg>
);
};

EnvelopeIcon.defaultProps = {
color: Colors.AUTHENTIC_BLUE_900
};
export default EnvelopeIcon;
Loading

0 comments on commit e876e7a

Please sign in to comment.