@hero-design/colors 0.0.1

package/.eslintrc

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+}

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "avoid"
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@hero-design/colors",
+  "version": "0.0.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",
+    "dev": "rollup -c -w",
+    "build:js": "rollup -c",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build": "yarn build:js && yarn build:types"
+  },
+  "devDependencies": {
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
+    "eslint": "^8.10.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "prettier": "^2.5.1",
+    "rollup": "^2.70.1",
+    "typescript": "^4.6.2"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,26 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { babel } from '@rollup/plugin-babel';
+import typescript from '@rollup/plugin-typescript';
+
+import pkg from './package.json';
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx'];
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+    },
+    {
+      file: pkg.module,
+      format: 'esm',
+    },
+  ],
+  plugins: [
+    nodeResolve({ extensions }),
+    typescript(),
+    babel({ extensions, babelHelpers: 'bundled' }),
+  ],
+};

package/src/index.ts

@@ -0,0 +1,115 @@
+const palette = {
+  black: '#000000',
+  blue: '#1dbeee',
+  blueDark30: '#1485a7',
+  blueDark75: '#07303c',
+  blueLight30: '#61d2f3',
+  blueLight75: '#c7effb',
+  blueLight90: '#e8f9fd',
+  dodgerBlue: '#4568fb',
+  dodgerBlueDark30: '#3049b0',
+  dodgerBlueLight30: '#7d95fc',
+  dodgerBlueLight90: '#ecf0ff',
+  green: '#01b39c',
+  greenDark15: '#019885',
+  greenDark30: '#017d6d',
+  greenDark75: '#002d27',
+  greenLight30: '#4dcaba',
+  greenLight90: '#e6f7f5',
+  grey: '#a3a6ac',
+  greyDark30: '#727478',
+  greyDark45: '#5a5b5f',
+  greyDark60: '#414245',
+  greyDark75: '#292a2b',
+  greyLight45: '#ccced1',
+  greyLight60: '#dadbde',
+  greyLight75: '#e8e9ea',
+  greyLight85: '#f1f2f3',
+  greyLight90: '#f6f6f7',
+  grotesqueGreen: '#6af293',
+  grotesqueGreenDark45: '#3a8551',
+  grotesqueGreenLight60: '#c3fad4',
+  grotesqueGreenLight75: '#dafce4',
+  grotesqueGreenLight90: '#f0fef4',
+  orange: '#ffa234',
+  orangeDark15: '#d98a2c',
+  orangeDark30: '#b37124',
+  orangeDark75: '#40290d',
+  orangeLight30: '#ffbe71',
+  orangeLight75: '#ffe8cc',
+  orangeLight90: '#fff6eb',
+  pink: '#fe56aa',
+  pinkDark15: '#cf4991',
+  pinkDark30: '#b23c77',
+  pinkDark45: '#8c2f5e',
+  pinkDark75: '#40162b',
+  pinkLight30: '#fe89c4',
+  pinkLight45: '#fea2d0',
+  pinkLight75: '#fcd5ea',
+  pinkLight90: '#ffeef7',
+  purple: '#be83cf',
+  red: '#de350b',
+  redDark15: '#bd2d09',
+  redDark30: '#9b2508',
+  redDark75: '#380d03',
+  redLight30: '#e87254',
+  redLight75: '#f7cdc2',
+  redLight90: '#fcebe7',
+  smalt: '#003580',
+  smaltDark75: '#000d20',
+  smaltLight30: '#4d72a6',
+  smaltLight45: '#7390b9',
+  smaltLight90: '#e6ebf2',
+  violet: '#7622d7',
+  violetDark30: '#531897',
+  violetDark45: '#411376',
+  violetDark75: '#1e0936',
+  violetLight30: '#9f64e3',
+  violetLight60: '#c8a7ef',
+  violetLight75: '#ddc8f5',
+  violetLight90: '#f1e9fb',
+  white: '#ffffff',
+  yellow: '#fadb14',
+  yellowDark75: '#3f3705',
+  yellowLight60: '#fdf1a1',
+  yellowLight90: '#fffbe8',
+};
+
+const systemPalette = {
+  primary: palette.violet,
+  primaryDark: palette.violetDark30,
+  primaryLight: palette.violetLight30,
+  primaryBackground: palette.violetLight90,
+  platformBackground: palette.greyLight85,
+  backgroundDark: palette.black,
+  backgroundLight: palette.white,
+  info: palette.dodgerBlue,
+  infoDark: palette.dodgerBlueDark30,
+  infoLight: palette.dodgerBlueLight30,
+  infoBackground: palette.dodgerBlueLight90,
+  success: palette.green,
+  successDark: palette.greenDark30,
+  successLight: palette.greenLight30,
+  successBackground: palette.greenLight90,
+  danger: palette.red,
+  dangerDark: palette.redDark30,
+  dangerLight: palette.redLight30,
+  dangerBackground: palette.redLight90,
+  warning: palette.orange,
+  warningDark: palette.orangeDark30,
+  warningLight: palette.orangeLight30,
+  warningBackground: palette.orangeLight90,
+  error: palette.pink,
+  errorDark: palette.pinkDark30,
+  errorLight: palette.pinkLight30,
+  errorBackground: palette.pinkLight90,
+  headingText: palette.black,
+  text: palette.greyDark45,
+  subduedText: palette.greyDark30,
+  disabledText: palette.grey,
+  outline: palette.greyLight60,
+  disabledBackground: palette.greyLight90,
+};
+
+
+export { palette, systemPalette };

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "declaration": true,
+    "outDir": "types",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": [
+    "node_modules"
+  ]
+}