@hero-design/rn 6.7.0 → 6.7.1

package/es/index.js

@@ -9750,6 +9750,7 @@ var palette = {
   dodgerBlue: '#4568fb',
   dodgerBlueDark30: '#3049b0',
   dodgerBlueLight30: '#7d95fc',
+  dodgerBlueLight75: '#d1d9fe',
   dodgerBlueLight90: '#ecf0ff',
   green: '#01b39c',
   greenDark15: '#019885',
@@ -9758,6 +9759,7 @@ var palette = {
   greenLight30: '#4dcaba',
   greenLight90: '#e6f7f5',
   grey: '#a3a6ac',
+  greyDark15: '#8b8d92',
   greyDark30: '#727478',
   greyDark45: '#5a5b5f',
   greyDark60: '#414245',
@@ -9767,6 +9769,7 @@ var palette = {
   greyLight75: '#e8e9ea',
   greyLight85: '#f1f2f3',
   greyLight90: '#f6f6f7',
+  greyLight95: '#fafbfb',
   grotesqueGreen: '#6af293',
   grotesqueGreenDark45: '#3a8551',
   grotesqueGreenLight60: '#c3fad4',
@@ -9794,6 +9797,7 @@ var palette = {
   redDark30: '#9b2508',
   redDark75: '#380d03',
   redLight30: '#e87254',
+  redLight60: '#f2ae9d',
   redLight75: '#f7cdc2',
   redLight90: '#fcebe7',
   smalt: '#003580',
@@ -9817,7 +9821,7 @@ var palette = {
   yellowLight60: '#fdf1a1',
   yellowLight90: '#fffbe8'
 };
-var systemPalette = {
+({
   primary: palette.violet,
   primaryDark: palette.violetDark30,
   primaryLight: palette.violetLight30,
@@ -9851,23 +9855,69 @@ var systemPalette = {
   disabledText: palette.grey,
   outline: palette.greyLight60,
   disabledBackground: palette.greyLight60
+});
+
+var systemPalette = {
+  primary: palette.violet,
+  primaryLight: palette.violetLight60,
+  info: palette.dodgerBlue,
+  infoLight: palette.dodgerBlueLight75,
+  infoBackground: palette.dodgerBlueLight90,
+  success: palette.green,
+  successDark: palette.greenDark30,
+  successLight: palette.greenDark75,
+  successBackground: palette.grotesqueGreenLight90,
+  danger: palette.red,
+  dangerLight: palette.redLight60,
+  dangerBackground: palette.redLight90,
+  warning: palette.orange,
+  warningDark: palette.orangeDark15,
+  warningBackground: palette.orangeLight90,
+  platformBackground: palette.greyLight95,
+  backgroundDark: palette.greyDark75,
+  text: palette.greyDark75,
+  disabledText: palette.greyDark15,
+  invertedText: palette.white
 };
 
-var BASE = 8;
+var BASE$1 = 8;
 var space = {
-  xxsmall: BASE * 0.25,
-  xsmall: BASE * 0.5,
-  small: BASE,
-  medium: BASE * 2,
-  large: BASE * 3,
-  xlarge: BASE * 4,
-  xxlarge: BASE * 5,
-  xxxlarge: BASE * 6,
-  xxxxlarge: BASE * 7
+  xxsmall: BASE$1 * 0.25,
+  xsmall: BASE$1 * 0.5,
+  small: BASE$1,
+  medium: BASE$1 * 2,
+  large: BASE$1 * 3,
+  xlarge: BASE$1 * 4,
+  xxlarge: BASE$1 * 5,
+  xxxlarge: BASE$1 * 6,
+  xxxxlarge: BASE$1 * 7
+};
+
+var BASE = 16;
+var fontSizes = {
+  xlarge: BASE * 1.125,
+  large: BASE,
+  medium: BASE * 0.875,
+  small: BASE * 0.75,
+  xsmall: BASE * 0.625 // 10
+
+};
+var fontWeights = {
+  light: 200,
+  regular: 400,
+  semiBold: 600,
+  bold: 700
+};
+var lineHeights = {
+  xlarge: fontSizes.xlarge + 8,
+  large: fontSizes.large + 8,
+  medium: fontSizes.medium + 8,
+  small: fontSizes.small + 8,
+  xsmall: fontSizes.xsmall + 8
 };
 
 var demoStyleColors = {
-  primaryBg: systemPalette.primaryBackground,
+  primaryBg: systemPalette.primaryLight,
   dangerBg: systemPalette.dangerBackground,
   warningBg: systemPalette.warningBackground
 };
@@ -9883,7 +9933,10 @@ var theme = {
   }),
   space: _objectSpread2(_objectSpread2({}, space), {}, {
     demoStyle: demoStyleSpace
-  })
+  }),
+  fontSizes: fontSizes,
+  fontWeights: fontWeights,
+  lineHeights: lineHeights
 };
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;

package/lib/index.js

@@ -9758,6 +9758,7 @@ var palette = {
   dodgerBlue: '#4568fb',
   dodgerBlueDark30: '#3049b0',
   dodgerBlueLight30: '#7d95fc',
+  dodgerBlueLight75: '#d1d9fe',
   dodgerBlueLight90: '#ecf0ff',
   green: '#01b39c',
   greenDark15: '#019885',
@@ -9766,6 +9767,7 @@ var palette = {
   greenLight30: '#4dcaba',
   greenLight90: '#e6f7f5',
   grey: '#a3a6ac',
+  greyDark15: '#8b8d92',
   greyDark30: '#727478',
   greyDark45: '#5a5b5f',
   greyDark60: '#414245',
@@ -9775,6 +9777,7 @@ var palette = {
   greyLight75: '#e8e9ea',
   greyLight85: '#f1f2f3',
   greyLight90: '#f6f6f7',
+  greyLight95: '#fafbfb',
   grotesqueGreen: '#6af293',
   grotesqueGreenDark45: '#3a8551',
   grotesqueGreenLight60: '#c3fad4',
@@ -9802,6 +9805,7 @@ var palette = {
   redDark30: '#9b2508',
   redDark75: '#380d03',
   redLight30: '#e87254',
+  redLight60: '#f2ae9d',
   redLight75: '#f7cdc2',
   redLight90: '#fcebe7',
   smalt: '#003580',
@@ -9825,7 +9829,7 @@ var palette = {
   yellowLight60: '#fdf1a1',
   yellowLight90: '#fffbe8'
 };
-var systemPalette = {
+({
   primary: palette.violet,
   primaryDark: palette.violetDark30,
   primaryLight: palette.violetLight30,
@@ -9859,23 +9863,69 @@ var systemPalette = {
   disabledText: palette.grey,
   outline: palette.greyLight60,
   disabledBackground: palette.greyLight60
+});
+
+var systemPalette = {
+  primary: palette.violet,
+  primaryLight: palette.violetLight60,
+  info: palette.dodgerBlue,
+  infoLight: palette.dodgerBlueLight75,
+  infoBackground: palette.dodgerBlueLight90,
+  success: palette.green,
+  successDark: palette.greenDark30,
+  successLight: palette.greenDark75,
+  successBackground: palette.grotesqueGreenLight90,
+  danger: palette.red,
+  dangerLight: palette.redLight60,
+  dangerBackground: palette.redLight90,
+  warning: palette.orange,
+  warningDark: palette.orangeDark15,
+  warningBackground: palette.orangeLight90,
+  platformBackground: palette.greyLight95,
+  backgroundDark: palette.greyDark75,
+  text: palette.greyDark75,
+  disabledText: palette.greyDark15,
+  invertedText: palette.white
 };
 
-var BASE = 8;
+var BASE$1 = 8;
 var space = {
-  xxsmall: BASE * 0.25,
-  xsmall: BASE * 0.5,
-  small: BASE,
-  medium: BASE * 2,
-  large: BASE * 3,
-  xlarge: BASE * 4,
-  xxlarge: BASE * 5,
-  xxxlarge: BASE * 6,
-  xxxxlarge: BASE * 7
+  xxsmall: BASE$1 * 0.25,
+  xsmall: BASE$1 * 0.5,
+  small: BASE$1,
+  medium: BASE$1 * 2,
+  large: BASE$1 * 3,
+  xlarge: BASE$1 * 4,
+  xxlarge: BASE$1 * 5,
+  xxxlarge: BASE$1 * 6,
+  xxxxlarge: BASE$1 * 7
+};
+
+var BASE = 16;
+var fontSizes = {
+  xlarge: BASE * 1.125,
+  large: BASE,
+  medium: BASE * 0.875,
+  small: BASE * 0.75,
+  xsmall: BASE * 0.625 // 10
+
+};
+var fontWeights = {
+  light: 200,
+  regular: 400,
+  semiBold: 600,
+  bold: 700
+};
+var lineHeights = {
+  xlarge: fontSizes.xlarge + 8,
+  large: fontSizes.large + 8,
+  medium: fontSizes.medium + 8,
+  small: fontSizes.small + 8,
+  xsmall: fontSizes.xsmall + 8
 };
 
 var demoStyleColors = {
-  primaryBg: systemPalette.primaryBackground,
+  primaryBg: systemPalette.primaryLight,
   dangerBg: systemPalette.dangerBackground,
   warningBg: systemPalette.warningBackground
 };
@@ -9891,7 +9941,10 @@ var theme = {
   }),
   space: _objectSpread2(_objectSpread2({}, space), {}, {
     demoStyle: demoStyleSpace
-  })
+  }),
+  fontSizes: fontSizes,
+  fontWeights: fontWeights,
+  lineHeights: lineHeights
 };
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@hero-design/rn",
-  "version": "6.7.0",
+  "version": "6.7.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "types": "types/index.d.ts",
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
@@ -11,10 +12,11 @@
     "test": "jest --runInBand",
     "build:js": "rollup -c",
     "build:types": "tsc --noEmit false --emitDeclarationOnly",
-    "build": "yarn build:js && yarn build:types"
+    "build": "yarn build:js && yarn build:types",
+    "publish:npm": "npm publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "^6.7.0",
+    "@hero-design/colors": "6.7.1",
     "styled-components": "6.0.0-alpha.5"
   },
   "peerDependencies": {

package/src/theme/colors.ts

@@ -0,0 +1,26 @@
+import { palette } from '@hero-design/colors';
+
+const systemPalette = {
+  primary: palette.violet,
+  primaryLight: palette.violetLight60,
+  info: palette.dodgerBlue,
+  infoLight: palette.dodgerBlueLight75,
+  infoBackground: palette.dodgerBlueLight90,
+  success: palette.green,
+  successDark: palette.greenDark30,
+  successLight: palette.greenDark75,
+  successBackground: palette.grotesqueGreenLight90,
+  danger: palette.red,
+  dangerLight: palette.redLight60,
+  dangerBackground: palette.redLight90,
+  warning: palette.orange,
+  warningDark: palette.orangeDark15,
+  warningBackground: palette.orangeLight90,
+  platformBackground: palette.greyLight95,
+  backgroundDark: palette.greyDark75,
+  text: palette.greyDark75,
+  disabledText: palette.greyDark15,
+  invertedText: palette.white,
+}
+
+export { palette, systemPalette };

package/src/theme/components/demoStyle.ts

@@ -1,8 +1,8 @@
-import { systemPalette } from '../global/colors';
-import { space } from '../global/space';
+import { systemPalette } from '../colors';
+import { space } from '../space';
 
 const demoStyleColors = {
-  primaryBg: systemPalette.primaryBackground,
+  primaryBg: systemPalette.primaryLight,
   dangerBg: systemPalette.dangerBackground,
   warningBg: systemPalette.warningBackground,
 };

package/src/theme/index.ts

@@ -1,5 +1,6 @@
-import { palette, systemPalette } from './global/colors';
-import { space } from './global/space';
+import { palette, systemPalette } from './colors';
+import { space } from './space';
+import { fontSizes, fontWeights, lineHeights } from './typography';
 
 import { demoStyleColors, demoStyleSpace } from './components/demoStyle';
 
@@ -13,6 +14,9 @@ const theme = {
     ...space,
     demoStyle: demoStyleSpace,
   },
+  fontSizes,
+  fontWeights,
+  lineHeights,
 };
 
 type Theme = typeof theme;

package/src/theme/typography.ts

@@ -0,0 +1,26 @@
+const BASE = 16;
+
+const fontSizes = {
+  xlarge: BASE * 1.125,   // 18
+  large: BASE,            // 16
+  medium: BASE * 0.875,   // 14
+  small: BASE * 0.75,     // 12
+  xsmall: BASE * 0.625,   // 10
+};
+
+const fontWeights = {
+  light: 200,
+  regular: 400,
+  semiBold: 600,
+  bold: 700,
+};
+
+const lineHeights = {
+  xlarge: fontSizes.xlarge + 8,
+  large: fontSizes.large + 8,
+  medium: fontSizes.medium + 8,
+  small: fontSizes.small + 8,
+  xsmall: fontSizes.xsmall + 8,
+};
+
+export { fontSizes, fontWeights, lineHeights };

package/types/theme/colors.d.ts

@@ -0,0 +1,24 @@
+import { palette } from '@hero-design/colors';
+declare const systemPalette: {
+    primary: string;
+    primaryLight: string;
+    info: string;
+    infoLight: string;
+    infoBackground: string;
+    success: string;
+    successDark: string;
+    successLight: string;
+    successBackground: string;
+    danger: string;
+    dangerLight: string;
+    dangerBackground: string;
+    warning: string;
+    warningDark: string;
+    warningBackground: string;
+    platformBackground: string;
+    backgroundDark: string;
+    text: string;
+    disabledText: string;
+    invertedText: string;
+};
+export { palette, systemPalette };

package/types/theme/index.d.ts

@@ -6,14 +6,8 @@ declare const theme: {
             warningBg: string;
         };
         primary: string;
-        primaryDark: string;
         primaryLight: string;
-        primaryBackground: string;
-        platformBackground: string;
-        backgroundDark: string;
-        backgroundLight: string;
         info: string;
-        infoDark: string;
         infoLight: string;
         infoBackground: string;
         success: string;
@@ -21,23 +15,16 @@ declare const theme: {
         successLight: string;
         successBackground: string;
         danger: string;
-        dangerDark: string;
         dangerLight: string;
         dangerBackground: string;
         warning: string;
         warningDark: string;
-        warningLight: string;
         warningBackground: string;
-        error: string;
-        errorDark: string;
-        errorLight: string;
-        errorBackground: string;
-        headingText: string;
+        platformBackground: string;
+        backgroundDark: string;
         text: string;
-        subduedText: string;
         disabledText: string;
-        outline: string;
-        disabledBackground: string;
+        invertedText: string;
         black: string;
         blue: string;
         blueDark30: string;
@@ -48,6 +35,7 @@ declare const theme: {
         dodgerBlue: string;
         dodgerBlueDark30: string;
         dodgerBlueLight30: string;
+        dodgerBlueLight75: string;
         dodgerBlueLight90: string;
         green: string;
         greenDark15: string;
@@ -56,6 +44,7 @@ declare const theme: {
         greenLight30: string;
         greenLight90: string;
         grey: string;
+        greyDark15: string;
         greyDark30: string;
         greyDark45: string;
         greyDark60: string;
@@ -65,6 +54,7 @@ declare const theme: {
         greyLight75: string;
         greyLight85: string;
         greyLight90: string;
+        greyLight95: string;
         grotesqueGreen: string;
         grotesqueGreenDark45: string;
         grotesqueGreenLight60: string;
@@ -92,6 +82,7 @@ declare const theme: {
         redDark30: string;
         redDark75: string;
         redLight30: string;
+        redLight60: string;
         redLight75: string;
         redLight90: string;
         smalt: string;
@@ -131,6 +122,26 @@ declare const theme: {
         xxxlarge: number;
         xxxxlarge: number;
     };
+    fontSizes: {
+        xlarge: number;
+        large: number;
+        medium: number;
+        small: number;
+        xsmall: number;
+    };
+    fontWeights: {
+        light: number;
+        regular: number;
+        semiBold: number;
+        bold: number;
+    };
+    lineHeights: {
+        xlarge: number;
+        large: number;
+        medium: number;
+        small: number;
+        xsmall: number;
+    };
 };
 declare type Theme = typeof theme;
 export { Theme };

package/types/theme/typography.d.ts

@@ -0,0 +1,21 @@
+declare const fontSizes: {
+    xlarge: number;
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+};
+declare const fontWeights: {
+    light: number;
+    regular: number;
+    semiBold: number;
+    bold: number;
+};
+declare const lineHeights: {
+    xlarge: number;
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+};
+export { fontSizes, fontWeights, lineHeights };

package/src/theme/global/colors.ts

@@ -1,3 +0,0 @@
-import { palette, systemPalette } from '@hero-design/colors';
-
-export { palette, systemPalette };

package/types/theme/global/colors.d.ts

@@ -1,2 +0,0 @@
-import { palette, systemPalette } from '@hero-design/colors';
-export { palette, systemPalette };