npm - @expo/styleguide-native - Versions diffs - 0.4.1 → 0.4.2-alpha.0 - Mend

@expo/styleguide-native 0.4.1 → 0.4.2-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.d.ts +2 -1
package/dist/index.js +3 -1
package/dist/src/styles/breakpoints.d.ts +5 -0
package/dist/src/styles/breakpoints.js +8 -0
package/dist/src/styles/palette.js +84 -84
package/dist/src/styles/themes.d.ts +20 -0
package/dist/src/styles/themes.js +20 -0
package/package.json +2 -2

package/dist/index.d.ts CHANGED Viewed

@@ -3,5 +3,6 @@ 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';
 export * from './src/icons';
-export { borderRadius, darkTheme, iconSize, lightTheme, palette, shadows, spacing, };
+export { borderRadius, breakpoints, darkTheme, iconSize, lightTheme, palette, shadows, spacing, };

package/dist/index.js CHANGED Viewed

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.spacing = exports.shadows = exports.palette = exports.lightTheme = exports.iconSize = exports.darkTheme = exports.borderRadius = void 0;
+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");
 Object.defineProperty(exports, "palette", { enumerable: true, get: function () { return palette_1.palette; } });
 const shadows_1 = require("./src/styles/shadows");
@@ -23,4 +23,6 @@ Object.defineProperty(exports, "iconSize", { enumerable: true, get: function ()
 Object.defineProperty(exports, "borderRadius", { enumerable: true, get: function () { return sizing_1.borderRadius; } });
 const spacing_1 = require("./src/styles/spacing");
 Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return spacing_1.spacing; } });
+const breakpoints_1 = require("./src/styles/breakpoints");
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return breakpoints_1.breakpoints; } });
 __exportStar(require("./src/icons"), exports);

package/dist/src/styles/breakpoints.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const breakpoints: {
+    small: number;
+    medium: number;
+    large: number;
+};

package/dist/src/styles/breakpoints.js ADDED Viewed

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breakpoints = void 0;
+exports.breakpoints = {
+    small: 400,
+    medium: 900,
+    large: 1200,
+};

package/dist/src/styles/palette.js CHANGED Viewed

@@ -45,12 +45,12 @@ exports.palette = {
             100: '#ffebda',
             200: '#ffd1ac',
             300: '#ffab70',
-            400: '#fb8532',
-            500: '#f66a0a',
-            600: '#e36209',
-            700: '#d15704',
-            800: '#c24e00',
-            900: '#a04100',
+            400: '#fb8e41',
+            500: '#fa7c25',
+            600: '#de6614',
+            700: '#c45408',
+            800: '#96430b',
+            900: '#7a4018',
         },
         pink: {
             '000': '#ffeef8',
@@ -80,13 +80,13 @@ exports.palette = {
             '000': '#f9f7ff',
             100: '#ede9ff',
             200: '#d2cafd',
-            300: '#a89af9',
-            400: '#7f6df3',
+            300: '#a193f9',
+            400: '#664fff',
             500: '#4630eb',
-            600: '#3423ca',
-            700: '#2518a9',
-            800: '#190f88',
-            900: '#100970',
+            600: '#3929c4',
+            700: '#2e2496',
+            800: '#261f73',
+            900: '#221e5c',
         },
         red: {
             '000': '#fee',
@@ -104,12 +104,12 @@ exports.palette = {
             '000': '#fffdef',
             100: '#fffbdd',
             200: '#fff5b1',
-            300: '#ffea7f',
+            300: '#ffeb87',
             400: '#ffdf5d',
             500: '#ffd33d',
-            600: '#f9c513',
-            700: '#dbab09',
-            800: '#b08800',
+            600: '#f2c012',
+            700: '#cfa108',
+            800: '#9c7800',
             900: '#735c0f',
         },
         white: '#fff',
@@ -117,15 +117,15 @@ exports.palette = {
     },
     dark: {
         blue: {
-            '000': '#051d4d',
-            100: '#0c2d6b',
-            200: '#0d419d',
-            300: '#1158c7',
-            400: '#1f6feb',
-            500: '#388bfd',
-            600: '#58a6ff',
-            700: '#79c0ff',
-            800: '#a5d6ff',
+            '000': '#122447',
+            100: '#173366',
+            200: '#1e4894',
+            300: '#2362c4',
+            400: '#2d73e0',
+            500: '#4794fd',
+            600: '#61abff',
+            700: '#8fcaff',
+            800: '#addaff',
             900: '#cae8ff',
         },
         gray: {
@@ -142,88 +142,88 @@ exports.palette = {
             1000: '#fdfdfe',
         },
         green: {
-            '000': '#04260f',
-            100: '#033a16',
-            200: '#0f5323',
-            300: '#196c2e',
-            400: '#238636',
-            500: '#2ea043',
-            600: '#3fb950',
-            700: '#56d364',
-            800: '#7ee787',
-            900: '#aff5b4',
+            '000': '#1a2b20',
+            100: '#1d3b27',
+            200: '#255232',
+            300: '#256936',
+            400: '#2e853f',
+            500: '#38a04b',
+            600: '#4ab959',
+            700: '#65d372',
+            800: '#8ae592',
+            900: '#b9f0bd',
         },
         orange: {
-            '000': '#3d1300',
-            100: '#5a1e02',
-            200: '#762d0a',
-            300: '#9b4215',
-            400: '#bd561d',
-            500: '#db6d28',
-            600: '#f0883e',
-            700: '#ffa657',
-            800: '#ffc680',
-            900: '#ffdfb6',
+            '000': '#2e1e17',
+            100: '#472a1d',
+            200: '#66361f',
+            300: '#8f4824',
+            400: '#ad5a2b',
+            500: '#d67233',
+            600: '#eb853d',
+            700: '#f5a35b',
+            800: '#fcc279',
+            900: '#fcd49f',
         },
         pink: {
-            '000': '#42062a',
-            100: '#5e103e',
-            200: '#7d2457',
-            300: '#9e3670',
+            '000': '#3d182f',
+            100: '#571e40',
+            200: '#782a57',
+            300: '#9c356e',
             400: '#bf4b8a',
-            500: '#db61a2',
-            600: '#f778ba',
+            500: '#de62a4',
+            600: '#f77ebd',
             700: '#ff9bce',
             800: '#ffbedd',
-            900: '#ffdaec',
+            900: '#ffcfe6',
         },
         primary: {
-            '000': '#0c0752',
-            100: '#0f0869',
-            200: '#190f88',
-            300: '#2518a9',
-            400: '#3423ca',
-            500: '#4630eb',
-            600: '#7464de',
-            700: '#9c90e8',
+            '000': '#1b183d',
+            100: '#201d52',
+            200: '#2a2375',
+            300: '#342a9c',
+            400: '#4436c7',
+            500: '#5c49eb',
+            600: '#7766e8',
+            700: '#a498ed',
             800: '#c9c2f2',
             900: '#e4e0f5',
         },
         purple: {
-            '000': '#271052',
-            100: '#3c1e70',
-            200: '#553098',
+            '000': '#2b1d47',
+            100: '#3c2563',
+            200: '#553096',
             300: '#6e40c9',
             400: '#8957e5',
             500: '#a371f7',
             600: '#bc8cff',
             700: '#d2a8ff',
             800: '#e2c5ff',
-            900: '#eddeff',
+            900: '#e9d6ff',
         },
         red: {
-            '000': '#490202',
-            100: '#67060c',
-            200: '#8e1519',
-            300: '#b6231e',
-            400: '#d92a2b',
-            500: '#f85149',
-            600: '#ff7b72',
-            700: '#ffa198',
-            800: '#ffc1ba',
-            900: '#ffdcd7',
+            '000': '#3d1515',
+            100: '#541c1f',
+            200: '#732225',
+            300: '#962926',
+            400: '#bd3939',
+            500: '#e0514a',
+            600: '#f76f65',
+            700: '#ff8d82',
+            800: '#ffb1a8',
+            900: '#ffd2cc',
         },
         yellow: {
-            '000': '#342400',
-            100: '#4b3200',
-            200: '#694600',
-            300: '#845a06',
-            400: '#9e6a03',
-            500: '#bb8009',
-            600: '#d29922',
-            700: '#e3b341',
-            800: '#f2cc60',
-            900: '#f8e3a1',
+            '000': '#30250a',
+            100: '#473510',
+            200: '#664b14',
+            300: '#856018',
+            400: '#a3751a',
+            500: '#bf8a1f',
+            600: '#d4a035',
+            700: '#e8bb51',
+            800: '#f2d06d',
+            900: '#fae296',
         },
         white: '#fff',
         black: '#0d1117',

package/dist/src/styles/themes.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ export declare const lightTheme: {
     background: {
         default: string;
         canvas: string;
+        screen: string;
         secondary: string;
         tertiary: string;
         quaternary: string;
@@ -75,11 +76,21 @@ export declare const lightTheme: {
         accent: string;
         emphasis: string;
     };
+    project: {
+        blue: string;
+        green: string;
+        yellow: string;
+        orange: string;
+        red: string;
+        pink: string;
+        purple: string;
+    };
 };
 export declare const darkTheme: {
     background: {
         default: string;
         canvas: string;
+        screen: string;
         secondary: string;
         tertiary: string;
         quaternary: string;
@@ -153,4 +164,13 @@ export declare const darkTheme: {
         accent: string;
         emphasis: string;
     };
+    project: {
+        blue: string;
+        green: string;
+        yellow: string;
+        orange: string;
+        red: string;
+        pink: string;
+        purple: string;
+    };
 };

package/dist/src/styles/themes.js CHANGED Viewed

@@ -6,6 +6,7 @@ exports.lightTheme = {
     background: {
         default: palette_1.palette.light.white,
         canvas: palette_1.palette.light.gray['000'],
+        screen: palette_1.palette.light.gray[100],
         secondary: palette_1.palette.light.gray[100],
         tertiary: palette_1.palette.light.gray[200],
         quaternary: palette_1.palette.light.gray[300],
@@ -79,11 +80,21 @@ exports.lightTheme = {
         accent: palette_1.palette.light.primary[300],
         emphasis: palette_1.palette.light.yellow[300],
     },
+    project: {
+        blue: '#6299d9',
+        green: '#54a767',
+        yellow: '#e5c145',
+        orange: '#d9864c',
+        red: '#d95757',
+        pink: '#d977b2',
+        purple: '#8a66cc',
+    },
 };
 exports.darkTheme = {
     background: {
         default: palette_1.palette.dark.gray['000'],
         canvas: palette_1.palette.dark.gray[100],
+        screen: palette_1.palette.dark.gray['000'],
         secondary: palette_1.palette.dark.gray[200],
         tertiary: palette_1.palette.dark.gray[300],
         quaternary: palette_1.palette.dark.gray[400],
@@ -157,4 +168,13 @@ exports.darkTheme = {
         accent: palette_1.palette.dark.primary[700],
         emphasis: palette_1.palette.dark.yellow[300],
     },
+    project: {
+        blue: '#395a80',
+        green: '#32633d',
+        yellow: '#8a6319',
+        orange: '#8c5731',
+        red: '#8c3838',
+        pink: '#8a4c71',
+        purple: '#4e3973',
+    },
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@expo/styleguide-native",
-  "version": "0.4.1",
+  "version": "0.4.2-alpha.0",
   "description": "Foundational styles for Expo interfaces.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,5 +33,5 @@
     "react": "*",
     "react-native-svg": "*"
   },
-  "gitHead": "729f74893412c374f7e953da8f3ee981bdf2c0b6"
+  "gitHead": "c90b726d5511e0f6600290c63c85420b7ed629c2"
 }