Skip to content

Commit

Permalink
feat: adds new theme colors and more icons. Renames expo-colors.css t…
Browse files Browse the repository at this point in the history
…o expo-theme.css

BREAKING CHANGE: This renames expo-colors.css to expo-theme.css.
  • Loading branch information
jonsamp committed Apr 24, 2021
1 parent 2442031 commit 7fd4d5b
Show file tree
Hide file tree
Showing 20 changed files with 357 additions and 19 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"scripts": {
"commit": "cz",
"release": "semantic-release",
"include-theme-css": "cp src/theme/expo-colors.css ./dist",
"include-theme-css": "cp src/theme/expo-theme.css ./dist",
"rename-icons": "find ./src/svg -depth -type f \\( -name '*.svg' ! -name '*-icon.svg' \\) -exec sh -c 'mv \"$1\" \"${1%.svg}-icon.svg\"' _ {} \\;",
"build:icons": "rm -rf ./src/icons && yarn rename-icons && svgr --out-dir ./src/icons ./src/svg",
"build": "yarn build:icons && yarn tsc && yarn include-theme-css",
Expand Down
29 changes: 29 additions & 0 deletions src/icons/BadgeIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from "react";
import { IconProps } from "../../types";
export default function BadgeIcon(props: IconProps) {
const { title = "Badge-icon", size, color, width, height, titleId } = props;
return (
<svg
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width={size || width || "20px"}
height={size || height || "20px"}
role="img"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M10 1a.91.91 0 00-.91.91v3.635a.91.91 0 101.82 0V1.91A.91.91 0 0010 1z"
fill={color || "var(--expo-theme-icon-default)"}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.818 3.727h6.364c1.004 0 1.818.814 1.818 1.818v11.819a1.818 1.818 0 01-1.818 1.818H1.818A1.818 1.818 0 010 17.364V5.545c0-1.004.814-1.818 1.818-1.818h6.364v1.818a1.818 1.818 0 003.636 0V3.727zm5.455 7.728h-6.364v-.91h6.364v.91zm-6.364 1.818h6.364v-.91h-6.364v.91zm6.364 1.818h-6.364v-.91h6.364v.91zM5.91 9.18c2.204 0 2.039 2.952 1.06 4.42.979 0 2.123.965 2.12 1.944H2.728c0-.979 1.142-1.944 2.121-1.944-.979-1.469-1.142-4.42 1.062-4.42z"
fill={color || "var(--expo-theme-icon-default)"}
/>
</svg>
);
}
25 changes: 25 additions & 0 deletions src/icons/BranchIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from "react";
import { IconProps } from "../../types";
export default function BranchIcon(props: IconProps) {
const { title = "Branch-icon", size, color, width, height, titleId } = props;
return (
<svg
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width={size || width || "20px"}
height={size || height || "20px"}
role="img"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
fillRule="evenodd"
clipRule="evenodd"
d="M14.189 2.874a.938.938 0 100 1.876.938.938 0 000-1.876zm-2.813.938a2.812 2.812 0 015.394-1.117c.205.473.275.993.205 1.504a2.813 2.813 0 01-1.849 2.265v.785a3.125 3.125 0 01-3.125 3.125h-5a1.25 1.25 0 00-1.25 1.25v1.41a2.813 2.813 0 11-1.875 0v-6.57a2.812 2.812 0 111.875 0V8.76c.394-.172.82-.26 1.25-.26h5a1.25 1.25 0 001.25-1.25v-.785a2.813 2.813 0 01-1.875-2.652zM4.814 14.749a.938.938 0 100 1.875.938.938 0 000-1.875zM3.876 3.812a.938.938 0 111.875 0 .938.938 0 01-1.875 0z"
fill={color || "var(--expo-theme-icon-default)"}
/>
</svg>
);
}
14 changes: 13 additions & 1 deletion src/icons/LogsIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,19 @@ export default function LogsIcon(props: IconProps) {
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M16.146 14.792V3.854c0-1.208-.98-2.187-2.188-2.187H3.385A2.552 2.552 0 00.833 4.219v1.823H4.48v10.937c0 1.208.98 2.188 2.188 2.188h9.114a2.552 2.552 0 002.552-2.552v-1.823h-2.187zM4.479 4.583H2.292V4.22a1.095 1.095 0 012.187 0v.364zm6.99 3.646L12.5 7.2l1.974 1.973a.728.728 0 010 1.031L12.5 12.177l-1.031-1.031 1.458-1.459L11.47 8.23zM6.88 10.203a.728.728 0 010-1.031l1.974-1.974L9.885 8.23 8.427 9.687l1.458 1.459-1.03 1.03-1.975-1.973zm9.995 6.412c0 .603-.49 1.093-1.094 1.093H9.346c.148-.305.237-.667.237-1.093v-.365h7.292v.365z"
d="M13.103 9.45c0 .25-.067.473-.2.667a1.3 1.3 0 01-.572.453 2.233 2.233 0 01-.878.157c-.67 0-1.205-.194-1.602-.581l.485-.534c.308.27.673.406 1.094.406.203 0 .364-.042.485-.127a.425.425 0 00.188-.366.408.408 0 00-.159-.343c-.1-.085-.292-.17-.573-.255-.475-.143-.813-.312-1.012-.505a1 1 0 01-.298-.75c0-.24.066-.448.199-.626.136-.178.32-.314.55-.407.234-.093.493-.139.778-.139.596 0 1.08.174 1.45.523l-.45.516a1.406 1.406 0 00-.445-.25 1.38 1.38 0 00-.485-.087.82.82 0 00-.445.105.321.321 0 00-.157.29.33.33 0 00.07.215c.05.058.132.112.245.163.113.05.283.11.51.18.412.123.719.284.918.482.202.193.304.464.304.812zm-7.114.481h-.755V6.605h-.819l-1.31.79.392.632.837-.523v2.427h-.977v.697h2.632V9.93zm1.577-.308a.626.626 0 00-.187.453c0 .178.062.331.187.459a.633.633 0 00.462.192c.18 0 .331-.064.456-.192a.623.623 0 00.193-.459.617.617 0 00-.193-.453.614.614 0 00-.456-.191.633.633 0 00-.462.191zm8.541-3.013a2.131 2.131 0 00-.725-.11c-.36 0-.683.083-.971.25a1.729 1.729 0 00-.679.725c-.164.318-.246.695-.246 1.132 0 .45.08.835.24 1.156.16.317.38.557.661.72.285.162.612.244.983.244.55 0 1.004-.182 1.363-.546l-.433-.552a2.315 2.315 0 01-.416.267 1.057 1.057 0 01-.462.093.814.814 0 01-.69-.336c-.167-.229-.251-.577-.251-1.046 0-.468.084-.818.251-1.05a.799.799 0 01.673-.349c.292 0 .561.099.807.296l.468-.563a1.95 1.95 0 00-.573-.33zM5.14 13.43a1.695 1.695 0 00-.76-.157 1.7 1.7 0 00-.807.18c-.222.12-.413.29-.573.511l.562.424c.109-.143.22-.246.333-.308a.777.777 0 01.398-.098c.175 0 .31.046.403.139.094.093.14.223.14.389a.997.997 0 01-.163.51 4.215 4.215 0 01-.515.657c-.238.255-.596.614-1.076 1.074v.65h2.69l.1-.702H4.14c.425-.376.752-.69.982-.94.234-.256.402-.486.503-.692.102-.205.152-.418.152-.638 0-.21-.054-.4-.163-.575a1.1 1.1 0 00-.474-.424zm2.239 3.42c0-.174.062-.325.187-.453a.633.633 0 01.462-.192c.18 0 .331.064.456.192a.617.617 0 01.193.453c0 .178-.064.33-.193.458a.614.614 0 01-.456.192.633.633 0 01-.462-.192.633.633 0 01-.187-.458z"
fill={color || "var(--expo-theme-icon-default)"}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.851 16.763a.516.516 0 01-.047-.25v-1.208c0-.727-.452-1.091-1.357-1.091-.175 0-.372.021-.59.064a3.65 3.65 0 00-.62.168l.21.61c.148-.05.3-.09.456-.116.16-.031.293-.047.398-.047.41 0 .614.159.614.476v.11H11.5c-.48 0-.852.094-1.117.28a.882.882 0 00-.398.771c0 .287.096.521.287.703.19.178.446.267.766.267.203 0 .394-.035.573-.105a1.14 1.14 0 00.445-.313.7.7 0 00.292.284c.125.062.28.103.468.122l.193-.603a.286.286 0 01-.158-.122zm-1.181-.006a.65.65 0 01-.316.087.45.45 0 01-.31-.099.363.363 0 01-.106-.278c0-.31.25-.465.75-.465h.227v.505a.608.608 0 01-.245.25zm2.828-.627c.059.468.308.702.749.702.265 0 .53-.085.796-.255l.368.5a1.738 1.738 0 01-.544.313 2.1 2.1 0 01-.696.11c-.347 0-.641-.068-.883-.203a1.375 1.375 0 01-.55-.575 1.936 1.936 0 01-.181-.86c0-.309.058-.588.175-.835.12-.252.295-.45.52-.592.23-.148.504-.221.82-.221.296 0 .553.064.772.191.218.124.386.306.503.546.12.236.18.519.18.848 0 .128-.005.238-.017.33h-2.012zm.574-1.3a.496.496 0 00-.404.185c-.101.12-.162.306-.181.557h1.14c-.008-.495-.193-.743-.556-.743z"
fill={color || "var(--expo-theme-icon-default)"}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20 18a2 2 0 01-2 2H2a2 2 0 01-2-2V2a2 2 0 012-2h16a2 2 0 012 2v16zM1 5h18v3.149h-.942V6.605h-.96v4.023h.96V8.933H19v4.434a1.879 1.879 0 00-.614-.094c-.546 0-1.008.182-1.387.546l.474.488c.246-.232.515-.348.807-.348.176 0 .318.044.427.133.11.085.164.203.164.354a.48.48 0 01-.17.395c-.109.089-.257.134-.444.134H18l-.106.627h.369c.456 0 .684.2.684.603a.538.538 0 01-.187.436.751.751 0 01-.497.157c-.34 0-.62-.128-.842-.384l-.521.482c.172.194.378.343.62.447.242.105.51.157.807.157.249 0 .473-.034.673-.1v.6a1 1 0 01-1 1H2a1 1 0 01-1-1V5zm18 10.28v-.03a1.876 1.876 0 01-.064.02l.064.01z"
fill={color || "var(--expo-theme-icon-default)"}
/>
</svg>
Expand Down
11 changes: 9 additions & 2 deletions src/icons/OpenIcon.tsx → src/icons/OpenInternalIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import React from "react";
import { IconProps } from "../../types";
export default function OpenIcon(props: IconProps) {
const { title = "Open-icon", size, color, width, height, titleId } = props;
export default function OpenInternalIcon(props: IconProps) {
const {
title = "Open-internal-icon",
size,
color,
width,
height,
titleId,
} = props;
return (
<svg
viewBox="0 0 20 20"
Expand Down
49 changes: 49 additions & 0 deletions src/icons/PushToDeviceIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from "react";
import { IconProps } from "../../types";
export default function PushToDeviceIcon(props: IconProps) {
const {
title = "Push-to-device-icon",
size,
color,
width,
height,
titleId,
} = props;
return (
<svg
viewBox="0 0 20 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width={size || width || "20px"}
height={size || height || "20px"}
role="img"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M8.164 7.57v6.816l5.453-3.407L8.164 7.57z"
fill={color || "var(--expo-theme-icon-default)"}
/>
<path
d="M8.164 11.079H1.148"
stroke={color || "var(--expo-theme-icon-default)"}
strokeWidth={1.503}
strokeLinecap="round"
/>
<path
d="M4.69 13.35v4.545a2.272 2.272 0 002.272 2.272h7.951a2.272 2.272 0 002.272-2.272V4.263a2.272 2.272 0 00-2.272-2.272H6.962A2.272 2.272 0 004.69 4.263v4.544"
stroke={color || "var(--expo-theme-icon-default)"}
strokeWidth={2.005}
/>
<rect
x={8.164}
y={1.056}
width={6.014}
height={3.007}
rx={1.002}
fill={color || "var(--expo-theme-icon-default)"}
/>
</svg>
);
}
35 changes: 35 additions & 0 deletions src/icons/QrCodeIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from "react";
import { IconProps } from "../../types";
export default function QrCodeIcon(props: IconProps) {
const { title = "Qr-code-icon", size, color, width, height, titleId } = props;
return (
<svg
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width={size || width || "20px"}
height={size || height || "20px"}
role="img"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<g
opacity={0.91}
clipPath="url(#qr-code-icon_svg__qr-code-icon_svg__clip0)"
stroke={color || "var(--expo-theme-icon-default)"}
>
<path strokeWidth={2} d="M1.018 14h5v5h-5zm0-13h5v5h-5zM14 1h5v5h-5z" />
<path d="M.443 12V8.5H8.5V5H10" />
<path d="M2.5 10v1.5h4V10M7.995.5H11.5V3H8m3.5 4V4.5m-.998 15.52L10.5 14.5H8.49l.003-2.997h2.01V8.496H13.5V11m-5.002 9l.002-4m4-1.95v5.45h7v-5.45" />
<path d="M12 12.5h2.5v2h3v-2h2V8" />
<path d="M15.5 8v2.5H18m-.5 7.5v-1.5h-3V18" />
</g>
<defs>
<clipPath id="qr-code-icon_svg__qr-code-icon_svg__clip0">
<path fill="#fff" d="M0 0h20v20H0z" />
</clipPath>
</defs>
</svg>
);
}
32 changes: 32 additions & 0 deletions src/icons/QuestionIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from "react";
import { IconProps } from "../../types";
export default function QuestionIcon(props: IconProps) {
const {
title = "Question-icon",
size,
color,
width,
height,
titleId,
} = props;
return (
<svg
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width={size || width || "20px"}
height={size || height || "20px"}
role="img"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
fillRule="evenodd"
clipRule="evenodd"
d="M1 10a9 9 0 1118 0 9 9 0 01-18 0zm8.106 3.606a1.09 1.09 0 00-.314.793c0 .31.105.575.314.793.21.215.518.322.923.322.397 0 .695-.11.896-.329.2-.218.3-.48.3-.786 0-.31-.1-.571-.3-.786-.2-.218-.5-.328-.896-.328-.405 0-.713.107-.923.321zm.52-7.417a3.34 3.34 0 01.731-.075c.447 0 .789.094 1.026.28a.863.863 0 01.362.711c0 .224-.036.433-.11.63a1.806 1.806 0 01-.327.54c-.146.163-.278.3-.397.41a7.358 7.358 0 01-.471.39 18.68 18.68 0 00-.397.307 35.448 35.448 0 00-.499.424 9.725 9.725 0 01-.171.164 1.004 1.004 0 00-.15.164c-.019.036-.05.09-.096.164a.485.485 0 00-.082.198l-.034.219a2.28 2.28 0 00-.014.273c0 .32.048.593.144.82.095.224.214.335.355.335l.219.007c.146.005.264.007.355.007.265 0 .397-.139.397-.417 0-.055-.003-.148-.007-.28a10.48 10.48 0 01-.007-.342.86.86 0 01.15-.485 1.75 1.75 0 01.404-.417 7.92 7.92 0 01.54-.383c.2-.132.399-.278.595-.438.2-.159.382-.334.546-.526.164-.191.297-.428.397-.71.105-.288.157-.602.157-.944 0-.697-.262-1.24-.786-1.627-.52-.392-1.208-.588-2.064-.588-.994 0-1.725.17-2.195.513-.465.341-.697.777-.697 1.305 0 .278.089.531.267.76.182.227.458.34.827.34.187 0 .303-.024.348-.074.046-.055.069-.19.069-.404V6.395l.143-.069a2.11 2.11 0 01.472-.137z"
fill={color || "var(--expo-theme-icon-default)"}
/>
</svg>
);
}
39 changes: 39 additions & 0 deletions src/icons/RefreshIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from "react";
import { IconProps } from "../../types";
export default function RefreshIcon(props: IconProps) {
const { title = "Refresh-icon", size, color, width, height, titleId } = props;
return (
<svg
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width={size || width || "20px"}
height={size || height || "20px"}
role="img"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
d="M17.143 9.524v-.762a4 4 0 00-4-4H6.667"
stroke={color || "var(--expo-theme-icon-default)"}
strokeWidth={2}
strokeLinecap="round"
/>
<path
d="M7.619 9.524V0L0 4.535l7.619 4.989z"
fill={color || "var(--expo-theme-icon-default)"}
/>
<path
d="M2.857 10.476v.762a4 4 0 004 4h6.476"
stroke={color || "var(--expo-theme-icon-default)"}
strokeWidth={2}
strokeLinecap="round"
/>
<path
d="M12.381 10.476V20L20 15.465l-7.619-4.989z"
fill={color || "var(--expo-theme-icon-default)"}
/>
</svg>
);
}
8 changes: 7 additions & 1 deletion src/icons/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
export { default as AndroidIcon } from './AndroidIcon'
export { default as AppleIcon } from './AppleIcon'
export { default as BadgeIcon } from './BadgeIcon'
export { default as BellIcon } from './BellIcon'
export { default as BranchIcon } from './BranchIcon'
export { default as BuildIcon } from './BuildIcon'
export { default as ChannelIcon } from './ChannelIcon'
export { default as ChevronDownIcon } from './ChevronDownIcon'
Expand All @@ -18,7 +20,11 @@ export { default as LockIcon } from './LockIcon'
export { default as LogoutMobileIcon } from './LogoutMobileIcon'
export { default as LogsIcon } from './LogsIcon'
export { default as OneTimePasswordIcon } from './OneTimePasswordIcon'
export { default as OpenIcon } from './OpenIcon'
export { default as OpenInternalIcon } from './OpenInternalIcon'
export { default as PushToDeviceIcon } from './PushToDeviceIcon'
export { default as QrCodeIcon } from './QrCodeIcon'
export { default as QuestionIcon } from './QuestionIcon'
export { default as RefreshIcon } from './RefreshIcon'
export { default as ScanIcon } from './ScanIcon'
export { default as SearchIcon } from './SearchIcon'
export { default as SettingsFilledIcon } from './SettingsFilledIcon'
Expand Down
4 changes: 4 additions & 0 deletions src/svg/badge-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/svg/branch-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 7fd4d5b

Please sign in to comment.