@expo/styleguide-native 1.0.1 → 1.0.4

package/dist/{src/icons → icons}/QuestionMarkIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function QuestionMarkIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/RefreshIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function RefreshIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/RolloutIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function RolloutIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/RunIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function RunIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/RuntimeVersionIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function RuntimeVersionIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/ScanIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function ScanIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/SearchIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function SearchIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/SecretsIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function SecretsIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/SettingsFilledIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function SettingsFilledIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/SettingsIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function SettingsIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/SparklesIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function SparklesIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/StoreIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function StoreIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/ThemeAutoIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function ThemeAutoIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/ThemeDarkIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function ThemeDarkIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/ThemeLightIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function ThemeLightIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/TokensIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function TokensIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/TrashIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function TrashIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/TriangleDownIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function TriangleDownIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/TriangleRightIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function TriangleRightIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/TwitchIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function TwitchIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/TwitterIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function TwitterIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/UndoIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function UndoIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/UpdateIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function UpdateIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/UploadIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function UploadIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/UserFilledIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function UserFilledIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/UserIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function UserIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/UsersFilledIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function UsersFilledIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/UsersIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function UsersIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/VersionIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function VersionIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/WarningIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function WarningIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/XIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function XIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/{src/icons → icons}/YoutubeIcon.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SvgProps } from "react-native-svg";
-import { IconProps } from "../../types";
+import { IconProps } from "../types";
 export default function YoutubeIcon(props: SvgProps & IconProps): JSX.Element;

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { palette } from './src/styles/palette';
-import { shadows } from './src/styles/shadows';
-import { lightTheme, darkTheme } from './src/styles/themes';
-import { iconSize, borderRadius } from './src/styles/sizing';
-import { spacing } from './src/styles/spacing';
-import { breakpoints } from './src/styles/breakpoints';
-import { typography } from './src/styles/typography';
-export * from './src/icons';
+import { palette } from './styles/palette';
+import { shadows } from './styles/shadows';
+import { lightTheme, darkTheme } from './styles/themes';
+import { iconSize, borderRadius } from './styles/sizing';
+import { spacing } from './styles/spacing';
+import { breakpoints } from './styles/breakpoints';
+import { typography } from './styles/typography';
+export * from './icons';
 export { borderRadius, breakpoints, darkTheme, iconSize, lightTheme, palette, shadows, spacing, typography, };

package/dist/index.js

@@ -11,20 +11,20 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.typography = exports.spacing = exports.shadows = exports.palette = exports.lightTheme = exports.iconSize = exports.darkTheme = exports.breakpoints = exports.borderRadius = void 0;
-const palette_1 = require("./src/styles/palette");
+const palette_1 = require("./styles/palette");
 Object.defineProperty(exports, "palette", { enumerable: true, get: function () { return palette_1.palette; } });
-const shadows_1 = require("./src/styles/shadows");
+const shadows_1 = require("./styles/shadows");
 Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return shadows_1.shadows; } });
-const themes_1 = require("./src/styles/themes");
+const themes_1 = require("./styles/themes");
 Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return themes_1.lightTheme; } });
 Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return themes_1.darkTheme; } });
-const sizing_1 = require("./src/styles/sizing");
+const sizing_1 = require("./styles/sizing");
 Object.defineProperty(exports, "iconSize", { enumerable: true, get: function () { return sizing_1.iconSize; } });
 Object.defineProperty(exports, "borderRadius", { enumerable: true, get: function () { return sizing_1.borderRadius; } });
-const spacing_1 = require("./src/styles/spacing");
+const spacing_1 = require("./styles/spacing");
 Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return spacing_1.spacing; } });
-const breakpoints_1 = require("./src/styles/breakpoints");
+const breakpoints_1 = require("./styles/breakpoints");
 Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return breakpoints_1.breakpoints; } });
-const typography_1 = require("./src/styles/typography");
+const typography_1 = require("./styles/typography");
 Object.defineProperty(exports, "typography", { enumerable: true, get: function () { return typography_1.typography; } });
-__exportStar(require("./src/icons"), exports);
+__exportStar(require("./icons"), exports);

package/dist/{src/styles → styles}/palette.js

@@ -16,17 +16,17 @@ exports.palette = {
             900: '#05264c',
         },
         gray: {
-            '000': '#fdfdfe',
-            100: '#f8f8fa',
-            200: '#f0f1f2',
-            300: '#e1e4e8',
-            400: '#d1d5da',
-            500: '#9b9fa3',
-            600: '#6c737c',
-            700: '#596068',
-            800: '#464d55',
-            900: '#30363c',
-            1000: '#25292e',
+            '000': '#FDFDFE',
+            100: '#F8F9FA',
+            200: '#F0F1F2',
+            300: '#E1E4E8',
+            400: '#D1D5DA',
+            500: '#9B9EA3',
+            600: '#6C737C',
+            700: '#595F68',
+            800: '#464C55',
+            900: '#30353C',
+            1000: '#25292E',
         },
         green: {
             '000': '#f0fff4',
@@ -129,17 +129,17 @@ exports.palette = {
             900: '#cae8ff',
         },
         gray: {
-            '000': '#0d1117',
-            100: '#161b22',
-            200: '#21262d',
-            300: '#30363d',
-            400: '#484f58',
-            500: '#6e7681',
-            600: '#8b949e',
-            700: '#b1bac4',
-            800: '#c9d1d9',
-            900: '#f0f6fc',
-            1000: '#fdfdfe',
+            '000': '#0B0F13',
+            100: '#14191F',
+            200: '#1C2026',
+            300: '#262A31',
+            400: '#32373E',
+            500: '#49505A',
+            600: '#737B87',
+            700: '#9BA4B0',
+            800: '#BCC3CD',
+            900: '#E0E4EB',
+            1000: '#F0F2F5',
         },
         green: {
             '000': '#1a2b20',
@@ -226,6 +226,6 @@ exports.palette = {
             900: '#fae296',
         },
         white: '#fff',
-        black: '#0d1117',
+        black: '#0B0F13',
     },
 };

package/dist/{src/styles → styles}/themes.js

@@ -27,15 +27,15 @@ exports.lightTheme = {
         },
         secondary: {
             background: palette_1.palette.light.gray[200],
-            foreground: palette_1.palette.light.black,
+            foreground: palette_1.palette.light.gray[1000],
         },
         tertiary: {
-            background: palette_1.palette.light.black,
-            foreground: palette_1.palette.light.white,
+            background: palette_1.palette.light.gray[1000],
+            foreground: palette_1.palette.light.gray['000'],
         },
         transparent: {
             background: 'transparent',
-            foreground: palette_1.palette.light.black,
+            foreground: palette_1.palette.light.gray[1000],
         },
         ghost: {
             background: 'transparent',
@@ -99,7 +99,7 @@ exports.darkTheme = {
         error: palette_1.palette.dark.red['000'],
         warning: palette_1.palette.dark.yellow['000'],
         success: palette_1.palette.dark.green['000'],
-        overlay: palette_1.palette.dark.gray[100],
+        overlay: palette_1.palette.dark.gray[200],
     },
     border: {
         default: palette_1.palette.dark.gray[400],
@@ -114,11 +114,11 @@ exports.darkTheme = {
         },
         secondary: {
             background: palette_1.palette.dark.gray[300],
-            foreground: palette_1.palette.dark.white,
+            foreground: palette_1.palette.dark.gray[800],
         },
         tertiary: {
-            background: palette_1.palette.dark.gray[900],
-            foreground: palette_1.palette.dark.black,
+            background: palette_1.palette.dark.gray[500],
+            foreground: palette_1.palette.dark.gray[1000],
         },
         transparent: {
             background: 'transparent',
@@ -132,7 +132,7 @@ exports.darkTheme = {
     },
     icon: {
         default: palette_1.palette.dark.gray[800],
-        secondary: palette_1.palette.dark.gray[600],
+        secondary: palette_1.palette.dark.gray[700],
     },
     link: {
         default: palette_1.palette.dark.primary[700],
@@ -146,7 +146,7 @@ exports.darkTheme = {
     },
     text: {
         default: palette_1.palette.dark.gray[800],
-        secondary: palette_1.palette.dark.gray[600],
+        secondary: palette_1.palette.dark.gray[700],
         error: palette_1.palette.dark.red[600],
         warning: palette_1.palette.dark.yellow[900],
         success: palette_1.palette.dark.green[600],

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@expo/styleguide-native",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "Foundational styles for Expo interfaces.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rimraf ./dist",
     "build:icons": "rimraf ./src/icons && svgr ../../common/svg --out-dir ./src/icons",
-    "build": "yarn build:icons && yarn clean && yarn tsc"
+    "build": "yarn build:icons && yarn clean && yarn tsc",
+    "dev": "yarn tsc --watch"
   },
   "files": [
     "dist"
@@ -20,7 +21,8 @@
   "homepage": "https://github.com/expo/styleguide",
   "repository": {
     "type": "git",
-    "url": "https://github.com/expo/styleguide.git"
+    "url": "https://github.com/expo/styleguide.git",
+    "directory": "packages/styleguide-native"
   },
   "devDependencies": {
     "@svgr/cli": "^5.5.0",