feat: updates shadows, CSS variable names. Importing CSS variables is…

… now required to use shadows
expo · Feb 24, 2021 · 57bb513 · 57bb513
1 parent d842393
commit 57bb513
Show file tree

Hide file tree

Showing 94 changed files with 1,643 additions and 150 deletions.
diff --git a/index.ts b/index.ts
@@ -1,5 +1,4 @@
-import { shadows } from './src/shadows';
-import { theme, colors, legacyColors } from './src/theme';
+import { theme, colors, legacyColors, shadows } from './src/theme';
 import { BlockingSetInitialColorMode } from './src/theme/BlockingSetInitialColorMode';
 import { ThemeProvider, useTheme } from './src/theme/ThemeProvider';
 

diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "commit": "cz",
     "release": "semantic-release",
     "include-theme-css": "cp src/theme/expo-colors.css ./dist",
-    "build:icons": "rm -rf ./src/icons && svgr --out-dir ./src/icons ./src/svg",
+    "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",
     "clean": "expo-module clean",
     "test": "expo-module test",

diff --git a/src/icons/AndroidIcon.tsx b/src/icons/AndroidIcon.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { IconProps } from "../../types";
+export default function AndroidIcon(props: IconProps) {
+  const { title = "Android-icon", size, color, width, height, titleId } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      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.063 14.79a.919.919 0 010-1.838.919.919 0 010 1.838zm-10.126 0a.919.919 0 010-1.838.919.919 0 010 1.838zm10.454-5.536l1.831-3.18a.38.38 0 10-.66-.382l-1.853 3.22A11.27 11.27 0 0012 7.902a11.27 11.27 0 00-4.709 1.01L5.438 5.691a.38.38 0 10-.66.382l1.83 3.181C3.466 10.97 1.316 14.163 1 17.934h22c-.315-3.772-2.465-6.965-5.609-8.68z"
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/AppleIcon.tsx b/src/icons/AppleIcon.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { IconProps } from "../../types";
+export default function AppleIcon(props: IconProps) {
+  const { title = "Apple-icon", size, color, width, height, titleId } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      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="M20.318 17.865a11.42 11.42 0 01-1.129 2.03c-.594.847-1.08 1.433-1.454 1.758-.581.534-1.203.808-1.87.823-.478 0-1.055-.136-1.726-.412-.674-.275-1.293-.411-1.86-.411-.593 0-1.23.136-1.91.411-.683.276-1.232.42-1.652.434-.64.027-1.276-.254-1.912-.845-.405-.354-.913-.96-1.52-1.82-.653-.918-1.19-1.982-1.61-3.195-.45-1.31-.675-2.58-.675-3.808 0-1.408.304-2.621.913-3.639a5.357 5.357 0 011.913-1.934 5.145 5.145 0 012.586-.73c.507 0 1.173.157 2 .465.824.31 1.354.467 1.586.467.174 0 .762-.184 1.759-.55.943-.339 1.739-.48 2.39-.424 1.768.143 3.095.84 3.978 2.094-1.58.957-2.362 2.298-2.346 4.018.014 1.34.5 2.456 1.455 3.34.433.412.917.73 1.455.955-.117.338-.24.662-.371.973zM16.266 1.92c0 1.05-.384 2.031-1.149 2.939-.923 1.079-2.039 1.702-3.25 1.604a3.254 3.254 0 01-.024-.398c0-1.008.44-2.087 1.219-2.97a4.695 4.695 0 011.484-1.114c.599-.292 1.165-.453 1.698-.481.015.14.022.28.022.42z"
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/BranchIcon.tsx b/src/icons/BranchIcon.tsx
@@ -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 24 24"
+      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="M20.177 14.25a.582.582 0 01.778-.224l1.241.658c.185.098.3.286.3.49a.556.556 0 01-.3.49l-1.241.66a.581.581 0 01-.778-.224.551.551 0 01.23-.758l.316-.168-.316-.167a.551.551 0 01-.23-.758zm-16.345-.001a.55.55 0 01-.229.757l-.316.168.317.169a.55.55 0 01.228.758c-.152.27-.5.37-.778.222l-1.238-.659a.556.556 0 01-.298-.49c0-.204.114-.392.298-.49l1.238-.658a.581.581 0 01.778.223zm14.87 2.634c.15.27.048.61-.23.757l-2.483 1.317a.581.581 0 01-.778-.224.55.55 0 01.23-.757l2.483-1.317a.581.581 0 01.777.224zM5.3 16.882c.152-.27.5-.37.778-.222l2.475 1.316a.55.55 0 01.228.758c-.152.27-.5.37-.778.222L5.528 17.64a.55.55 0 01-.228-.758zm4.95 2.633c.152-.27.5-.37.778-.222l.963.513.966-.513a.581.581 0 01.778.223.55.55 0 01-.23.758l-1.24.658a.586.586 0 01-.55 0l-1.237-.659a.551.551 0 01-.228-.758zM11.41 4.15c.355-.2.792-.2 1.147 0l9.37 5.264c.354.2.573.568.573.967 0 .4-.218.768-.573.967l-9.37 5.268c-.355.2-.792.199-1.147-.001l-9.338-5.267a1.112 1.112 0 01-.572-.967c0-.398.218-.767.572-.966L11.41 4.15zm.575 2.256l-7.05 3.976 7.05 3.976 7.075-3.976-7.075-3.976z"
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/BuildIcon.tsx b/src/icons/BuildIcon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { IconProps } from "../../types";
+export default function BuildIcon(props: IconProps) {
+  const { title = "Build-icon", size, color, width, height, titleId } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      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="M11.425 1.142a1.12 1.12 0 011.092 0l8.94 4.97c.338.19.545.54.543.918l-.057 9.949a1.049 1.049 0 01-.541.905l-8.827 4.973a1.12 1.12 0 01-.576.143 1.12 1.12 0 01-.576-.143l-8.83-4.973a1.048 1.048 0 01-.541-.906L2 7.03a1.048 1.048 0 01.544-.918l.01-.005 8.871-4.965zM5.267 7.025l6.706 3.755 2.323-1.297-6.637-3.797-2.392 1.339zm-1.038 9.34L4.191 8.86l6.69 3.746v7.506L4.23 16.365zm5.595-11.89l2.149-1.203L18.7 7.025l-2.237 1.248-6.64-3.799zm3.292 15.636v-7.506l6.692-3.746-.043 7.506-6.649 3.746z"
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/ChannelIcon.tsx b/src/icons/ChannelIcon.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { IconProps } from "../../types";
+export default function ChannelIcon(props: IconProps) {
+  const { title = "Channel-icon", size, color, width, height, titleId } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      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}
+      <rect
+        x={8.5}
+        y={1}
+        width={7}
+        height={7}
+        rx={1}
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+      <rect
+        x={2}
+        y={16}
+        width={7}
+        height={7}
+        rx={1}
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+      <rect
+        x={15}
+        y={16}
+        width={7}
+        height={7}
+        rx={1}
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+      <path
+        d="M12 5.632V9.5a2 2 0 01-2 1.999H7.5a2 2 0 00-2 2v2.975M12 5.632V9.5a2 2 0 002 2h2.5a2 2 0 012 2v3.554"
+        stroke={color || "var(--expo-color-theme-icon-default)"}
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/CloudSlashIcon.tsx b/src/icons/CloudSlashIcon.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { IconProps } from "../../types";
+export default function CloudSlashIcon(props: IconProps) {
+  const {
+    title = "Cloud-slash-icon",
+    size,
+    color,
+    width,
+    height,
+    titleId,
+  } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      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="M5.343 8.296a4.75 4.75 0 00-.38 1.089c-2.281.59-3.989 2.617-3.989 5.06 0 2.918 2.431 5.233 5.366 5.233h10.386L14.8 17.752H6.34c-1.928 0-3.44-1.507-3.44-3.306 0-1.675 1.307-3.097 3.042-3.288l.857-.094v-.863c0-.127.015-.263.045-.404l-1.5-1.502zm3.994-1.373l-1.41-1.41A7.676 7.676 0 0112 4.335c3.676 0 6.751 2.676 7.197 6.184 2.163.41 3.829 2.265 3.829 4.537 0 1.514-.74 2.842-1.874 3.682l-1.386-1.387c.807-.48 1.334-1.339 1.334-2.295 0-1.462-1.23-2.697-2.81-2.697h-.964v-.962c0-2.81-2.357-5.136-5.326-5.136a5.73 5.73 0 00-2.663.662zM19.55 20.767L3.448 4.667l.948-.95 16.1 16.1-.948.95z"
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/DebugIcon.tsx b/src/icons/DebugIcon.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { IconProps } from "../../types";
+export default function DebugIcon(props: IconProps) {
+  const { title = "Debug-icon", size, color, width, height, titleId } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      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="M9.22 8.283l3.336 3.308-3.315 3.288-1.476-1.464 1.84-1.824-1.86-1.845L9.22 8.283zm2.223.207l3.336 3.307 1.476-1.463-1.86-1.845 1.84-1.824-1.476-1.463-3.316 3.287z"
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1 3.035A1.04 1.04 0 012.044 2h19.912A1.04 1.04 0 0123 3.035V17c0 .571-.424 1-1 1h-8v2h2v2H8v-2h2v-2H2c-.576 0-1-.429-1-1V3.035zM3 16V4h18v12H3z"
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/DownloadIcon.tsx b/src/icons/DownloadIcon.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { IconProps } from "../../types";
+export default function DownloadIcon(props: IconProps) {
+  const {
+    title = "Download-icon",
+    size,
+    color,
+    width,
+    height,
+    titleId,
+  } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      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 12H7l5 8 5-8z"
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+      <path
+        d="M3 22h18m-9-10V2"
+        stroke={color || "var(--expo-color-theme-icon-default)"}
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/ErrorIcon.tsx b/src/icons/ErrorIcon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { IconProps } from "../../types";
+export default function ErrorIcon(props: IconProps) {
+  const { title = "Error-icon", size, color, width, height, titleId } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      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="M5 2a3 3 0 00-3 3v14a3 3 0 003 3h14a3 3 0 003-3V5a3 3 0 00-3-3H5zm3.707 5.293a1 1 0 10-1.414 1.414L10.586 12l-3.293 3.293a1 1 0 101.414 1.414L12 13.414l3.293 3.293a1 1 0 101.414-1.414L13.414 12l3.293-3.293a1 1 0 00-1.414-1.414L12 10.586 8.707 7.293z"
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/HomeFilledIcon.tsx b/src/icons/HomeFilledIcon.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { IconProps } from "../../types";
+export default function HomeFilledIcon(props: IconProps) {
+  const {
+    title = "Home-filled-icon",
+    size,
+    color,
+    width,
+    height,
+    titleId,
+  } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      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="M2 8.806V22h7v-6.548c0-.51.305-.97.774-1.168a4.436 4.436 0 013.452 0c.469.198.774.658.774 1.168V22h7V8.806L11.5 3 2 8.806z"
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/HomeIcon.tsx b/src/icons/HomeIcon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { IconProps } from "../../types";
+export default function HomeIcon(props: IconProps) {
+  const { title = "Home-icon", size, color, width, height, titleId } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      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="M3 8.5V21h6v-5.792c0-.722.461-1.362 1.146-1.59a5.865 5.865 0 013.708 0A1.676 1.676 0 0115 15.208V21h6V8.5L12 3 3 8.5z"
+        stroke={color || "var(--expo-color-theme-icon-default)"}
+        strokeWidth={2}
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/InfoIcon.tsx b/src/icons/InfoIcon.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { IconProps } from "../../types";
+export default function InfoIcon(props: IconProps) {
+  const { title = "Info-icon", size, color, width, height, titleId } = props;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      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="M12 3a9 9 0 100 18 9 9 0 000-18zm-.011 4.064a.962.962 0 01.73-.33c.229 0 .43.082.582.238.152.156.23.354.23.59 0 .295-.104.558-.308.78-.209.23-.453.347-.726.347a.777.777 0 01-.576-.244.843.843 0 01-.227-.606c0-.302.099-.562.295-.775zm1.499 8.48c-.746.7-1.279 1.138-1.628 1.337-.372.213-.678.317-.937.317a.814.814 0 01-.622-.254c-.152-.162-.229-.382-.229-.652 0-.69.39-2.293 1.196-4.9.013-.044.024-.086.031-.125a.81.81 0 00-.105.056c-.066.042-.267.2-.854.773a.25.25 0 01-.329.02l-.347-.27a.25.25 0 01-.032-.367c.54-.596 1.046-1.028 1.501-1.286.477-.268.88-.4 1.232-.4.227 0 .411.057.547.17a.621.621 0 01.225.493c0 .13-.063.473-.522 2.014-.657 2.203-.814 3.003-.825 3.28.125-.074.419-.283 1.046-.873a.25.25 0 01.347.003l.308.3a.25.25 0 01-.003.363z"
+        fill={color || "var(--expo-color-theme-icon-default)"}
+      />
+    </svg>
+  );
+}