Initial setup

.gitignore

@@ -0,0 +1,252 @@
+
+### macOS ###
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+
+### ReactNative ###
+# React Native Stack Base
+### ReactNative.Buck Stack ###
+buck-out/
+.buckconfig.local
+.buckd/
+.buckversion
+.fakebuckversion
+
+### ReactNative.Xcode Stack ###
+# Xcode
+#
+# gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
+
+## Build generated
+build/
+DerivedData/
+
+## Various settings
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata/
+
+## Other
+*.moved-aside
+*.xccheckout
+*.xcscmblueprint
+
+### ReactNative.macOS Stack ###
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+
+# Files that might appear in the root of a volume
+
+# Directories potentially created on remote AFP share
+
+### ReactNative.Linux Stack ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### ReactNative.Node Stack ###
+# Logs
+
+# Runtime data
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+# Coverage directory used by tools like istanbul
+
+# nyc test coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+
+# Bower dependency directory (https://bower.io/)
+
+# node-waf configuration
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+
+# Dependency directories
+
+# Typescript v1 declaration files
+
+# Optional npm cache directory
+
+# Optional eslint cache
+
+# Optional REPL history
+
+# Output of 'npm pack'
+
+# Yarn Integrity file
+
+# dotenv environment variables file
+
+
+### ReactNative.Gradle Stack ###
+.gradle
+**/build/
+
+# Ignore Gradle GUI config
+gradle-app.setting
+
+# Avoid ignoring Gradle wrapper jar file (.jar files are usually ignored)
+!gradle-wrapper.jar
+
+# Cache of project
+.gradletasknamecache
+
+# # Work around https://youtrack.jetbrains.com/issue/IDEA-116898
+# gradle/wrapper/gradle-wrapper.properties
+
+### ReactNative.Android Stack ###
+# Built application files
+*.apk
+*.ap_
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+dist/
+
+# Gradle files
+.gradle/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# Intellij
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/dictionaries
+.idea/libraries
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "flow.enabled": false,
+  "editor.formatOnSave": true
+}

package.json

@@ -2,9 +2,15 @@
   "name": "@artsy/palette",
   "version": "0.1.0",
   "description": "Design system library for react components",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rm -rf dist",
+    "compile": "tsc --declaration",
+    "prettier": "prettier",
+    "prettier-project": "yarn run prettier-write 'src/**/*.{ts,tsx}'",
+    "prettier-write": "yarn run prettier --write"
   },
   "repository": {
     "type": "git",
@@ -15,5 +21,31 @@
   "bugs": {
     "url": "https://github.com/artsy/palette/issues"
   },
-  "homepage": "https://github.com/artsy/palette#readme"
+  "homepage": "https://github.com/artsy/palette#readme",
+  "peerDependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "styled-components": "^3"
+  },
+  "devDependencies": {
+    "@types/node": "^10.0.3",
+    "@types/react": "^16.3.13",
+    "prettier": "^1.12.1",
+    "react-dom": "^16.2.0",
+    "typescript": "^2.8.3",
+    "typescript-styled-plugin": "^0.6.3"
+  },
+  "dependencies": {
+    "react": "^16.3.2",
+    "react-primitives": "^0.5.0",
+    "styled-components": "^3.2.6",
+    "styled-system": "^2.2.5"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": false,
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "lineLength": 100
+  }
 }

src/Fonts.tsx

@@ -0,0 +1,62 @@
+import { css } from "styled-components/primitives"
+import {
+  color,
+  fontSize,
+  lineHeight,
+  maxWidth,
+  space,
+  textAlign,
+} from "styled-system"
+
+const fontFamily = {
+  unica: {
+    regular: "'Unica77LL-Regular', 'Unica77LLWebRegular'",
+    italic: "'Unica77LL-Italic', 'Unica77LLWebItalic'",
+    medium: "'Unica77LL-Medium', 'Unica77LLWebMedium'",
+    mediumItalic: "'Unica77LL-MediumItalic', 'Unica77LLWebMediumItalic'",
+  },
+  avantgarde: {
+    regular:
+      "'AvantGardeGothicITC', 'ITC Avant Garde Gothic W04','AvantGardeGothicITCW01D 731075', AvantGardeGothicITCW01Dm, Helvetica, sans-serif",
+  },
+  garamond: {
+    regular:
+      "'AGaramondPro-Regular', 'Adobe Garamond W08', 'adobe-garamond-pro', 'AGaramondPro-Regular', 'Times New Roman', Times, serif",
+  },
+}
+
+// const sizes: {
+//   sans: {
+
+//   }
+// }
+
+export const Sans = css`
+  font-family: ${fontFamily.unica.medium};
+  ${color}
+  ${fontSize}
+  ${lineHeight}
+  ${space}
+  ${textAlign}
+  ${maxWidth}
+`
+
+export const Serif = css`
+  font-family: ${fontFamily.garamond.regular};
+  ${color}
+  ${fontSize}
+  ${lineHeight}
+  ${space}
+  ${textAlign}
+  ${maxWidth}
+`
+
+export const Display = css`
+  font-family: ${fontFamily.avantgarde.regular};
+  ${color}
+  ${fontSize}
+  ${lineHeight}
+  ${space}
+  ${textAlign}
+  ${maxWidth}
+`