Design token POC and landing page content

README.md

@@ -22,4 +22,4 @@ Trello board: https://trello.com/b/2VvbnblC/flame
 
 # Support
 
-Slack channel: #flame
+Slack channel: #flame

design-tokens/button.yml

@@ -0,0 +1,8 @@
+global:
+  type: color
+  category: buttons
+imports:
+  - "./colors.yml"
+props:
+  button_background:
+    value: "{!ELECTRIC_BLUE}"

design-tokens/colors.yml

@@ -0,0 +1,21 @@
+aliases:
+  # Primary colors
+  ELECTRIC_BLUE: "#00A7E0"
+  SKY_BLUE: "#80CAED"
+  BABY_BLUE: "#C2E3F6"
+  STONE_GRAY: "#58595B"
+  TERMINAL_BLACK: "#000000"
+  # Secondary colors
+  NETWORK_GRAY_FULL: "#618291"
+  NETWORK_GRAY_BLEND: "#A7BCCA"
+  NETWORK_GRAY_LIGHT: "#DBE0E7"
+  RAIN_PURPLE_FULL: "#494A95"
+  RAIN_PURPLE_BLEND: "#8C8ABF"
+  RAIN_PURPLE_LIGHT: "#C4C3E1"
+  # Tertiary colors
+  OCEAN_GREEN_FULL: "#00988C"
+  OCEAN_GREEN_BLEND: "#87BFB9"
+  OCEAN_GREEN_LIGHT: "#C8E0DD"
+  CRIMSON_RED_FULL: "#AC3E52"
+  CRIMSON_RED_BLEND: "#C98E8F"
+  CRIMSON_RED_LIGHT: "#E4C8C6"

design-tokens/typography.yml

@@ -0,0 +1,21 @@
+aliases:
+  # Font families
+  LATO: "'Lato', sans-serif"
+  INDUSTRYINC: "'IndustryInc', sans-serif"
+  HEURISTICA: "'Heuristica', serif"
+  # Font weights
+  FONT_WEIGHT:_LIGHT: "300"
+  FONT_WEIGHT_REGULAR: "400"
+  FONT_WEIGHT_BOLD: "700"
+  # Font sizes
+  FONT_SIZE_1: "0.625rem"
+  FONT_SIZE_2: "0.75rem"
+  FONT_SIZE_3: "0.8125rem"
+  FONT_SIZE_4: "0.875rem"
+  FONT_SIZE_5: "1rem"
+  FONT_SIZE_6: "1.125rem"
+  FONT_SIZE_7: "1.25rem"
+  FONT_SIZE_8: "1.5rem"
+  FONT_SIZE_9: "1.75rem"
+  FONT_SIZE_10: "2rem"
+  FONT_SIZE_11: "2.625rem"

package.json

@@ -21,8 +21,7 @@
     "build-storybook": "build-storybook",
     "build-deploy": "build-storybook; cd storybook-static; surge --domain nitor-flame.surge.sh;"
   },
-  "dependencies": {
-  },
+  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.1.0",
     "@storybook/addon-actions": "^4.1.1",
@@ -39,17 +38,12 @@
     "@types/storybook__addon-actions": "^3.4.1",
     "@types/storybook__react": "^4.0.0",
     "@types/webpack-env": "^1.13.6",
-    "postcss": "^7.0.6",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
-    "react-hot-loader": "^4.3.11",
-    "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
     "autoprefixer": "^9.4.2",
     "babel-loader": "^8.0.2",
     "css-loader": "^2.0.0",
     "fork-ts-checker-webpack-plugin": "^0.4.9",
     "html-webpack-plugin": "^3.2.0",
+    "postcss": "^7.0.6",
     "postcss-color-function": "^4.0.1",
     "postcss-css-variables": "^0.11.0",
     "postcss-import": "^12.0.1",
@@ -58,8 +52,14 @@
     "postcss-nested": "^4.1.0",
     "postcss-simple-vars": "^5.0.1",
     "prettier": "^1.14.3",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "react-hot-loader": "^4.3.11",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.23.1",
+    "theo": "^8.0.1",
     "ts-loader": "^5.2.0",
     "tslint": "^5.11.0",
     "tslint-microsoft-contrib": "^5.2.1",

scripts/tokenizer.js

@@ -0,0 +1,13 @@
+const theo = require('theo');
+
+theo.convert({
+  transform: {
+    type: 'web',
+    file: '../design-tokens/button.yml'
+  },
+  format: {
+    type: 'custom-properties.css'
+  }
+}).then(css => {
+  console.log(css);
+}).catch(error => console.log(`Tokenizer error: ${error}`));

src/App.tsx

@@ -6,6 +6,9 @@ class App extends React.Component {
     return (
       <div className="app">
         <h1>Flame</h1>
+        <p>Nitor is a Digital Engineering company where we – grown-up professionals – help our clients to succeed. Nitor’s reputation among its clients and employees is one its most valuable assets. For us, the benefit in maintaining a Design System is the added transparency in our design and communication as well as brand development.</p>
+        <p>A Design System is a framework of practices that connect designers, developers and marketing professionals. It creates a common vocabulary with guidelines, patterns and components, raising confidence in the organization and in clients. This Flame Design System is an ever-expanding effort to start gathering Nitor’s design and brand assets in one place, where they can be developed and improved openly and in a consistent way.</p>
+        <p>For more information go to <a href="https://www.nitor.com/">Nitor.com</a></p>
       </div>
     );
   }