Merge pull request #25 from Tripwire/fonts

Font Dependencies
Tripwire · Mar 3, 2017 · c9f770f · c9f770f
2 parents e7c6ef4 + 7536120
commit c9f770f
Show file tree

Hide file tree

Showing 105 changed files with 1,676 additions and 7,357 deletions.
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "nsp": "^2.6.2",
     "perish": "^1.0.1",
     "pify": "^2.3.0",
+    "postcss-cli": "^3.0.0-beta",
     "postcss-cssnext": "^2.8.0",
     "postcss-import": "^9.1.0",
     "postcss-loader": "^1.1.0",
@@ -56,7 +57,9 @@
   },
   "dependencies": {
     "d3": "^4.4.0",
+    "elegant-icons": "^0.0.1",
     "flexbox-react": "^4.1.0",
+    "lato-font": "^2.0.0",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
     "semantic-ui-react": "^0.66.0"

diff --git a/scripts/build.js b/scripts/build.js
@@ -4,6 +4,8 @@ require('perish')
 const build = require('./builder')
 
 build.clean()
-.then(() => build.react())
-.then(() => build.semantic())
+.then(() => build.octagon_componentJs())
+.then(() => build.octagon_componentCss())
+.then(() => build.octagon_copyAssets())
+.then(() => build.semantic_init())
 .then(() => console.log('dist build successfully'))
diff --git a/scripts/builder.js b/scripts/builder.js
@@ -21,30 +21,47 @@ module.exports = {
   get projectRoot () { return path.resolve(__dirname, '..') },
   get semanticDist () { return path.join(this.semanticPath, 'dist') },
   get semanticPath () { return path.join(this.projectRoot, 'semantic') },
+  get postCssConfig () { return path.join(this.projectRoot, 'scripts', 'postcss.config.js') },
   get stylesDist () { return path.join(this.distDir, 'styles') },
+  get assetsDist () { return path.join(this.distDir, 'assets') },
   clean () {
     return Promise.all([remove(this.distDir), remove(this.semanticDist)])
   },
   getBin (bin) {
     return path.join(this.projectRoot, 'node_modules', '.bin', bin) + (isWin ? '.cmd' : '')
   },
-  semantic () {
+  semantic_init () {
     // source maps not yet available!
     // ref: https://github.com/Semantic-Org/Semantic-UI/issues/2171
-    return this._semanticBuild()
+    return this.semantic_build()
     .then(() => copy(this.semanticDist, this.stylesDist))
   },
-  _semanticBuild () {
+  semantic_build () {
     return exec([this.getBin('gulp'), 'build'].join(' '), { cwd: this.semanticPath, stdio: 'inherit' })
     .then(([stdout]) => console.log(stdout))
   },
-  react (opts) {
+  octagon_componentJs (opts) {
     opts = opts || {}
     const args = [this.getBin('babel'), 'src', '-d', this.componentDist, '--ignore', '*.stories.js', '--source-maps']
     if (opts.watch) args.push('--watch')
     return Promise.resolve()
     .then(() => mkdirp(this.componentDist))
     .then(() => exec(args.join(' '), { cwd: this.projectRoot, stdio: 'inherit' }))
     .then(([stdout]) => console.log(stdout))
+  },
+  octagon_componentCss (opts) {
+    opts = opts || {}
+    const outputDir = path.join(this.componentDist, 'styles', 'components')
+    const inputDir = path.join(this.projectRoot, 'src', 'styles', 'components', '*.css')
+    const args = [this.getBin('postcss'), inputDir, '-d', outputDir, '-c', this.postCssConfig]
+    return Promise.resolve()
+    .then(() => mkdirp(this.componentDist))
+    .then(() => exec(args.join(' '), { cwd: this.projectRoot, stdio: 'inherit' }))
+    .then(([stdout]) => console.log(stdout))
+  },
+  octagon_copyAssets (opts) {
+    const assetSource = path.join(this.projectRoot, 'src', 'assets')
+    return Promise.resolve('success')
+      .then(() => copy(assetSource, this.assetsDist))
   }
 }
diff --git a/scripts/postcss.config.js b/scripts/postcss.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-cssnext'), // permit future css rules
+    require('postcss-neat'), // @TODO investigate purging? may be unused
+    require('rucksack-css'), // css function superset (e.g. less like syntax)
+    require('autoprefixer')({ browsers: ['last 2 version'] })
+  ]
+}
diff --git a/semantic/src/themes/tripwire/elements/icon.variables b/semantic/src/themes/tripwire/elements/icon.variables
@@ -16,10 +16,10 @@
   url("@{fontPath}/@{fontName}.ttf") format('truetype'),
   url("@{fontPath}/@{fontName}.svg#icons") format('svg'),
 
-  url("../../src/styles/fonts/ElegantIcons.woff") format('woff'),
-  url("../../src/styles/fonts/ElegantIcons.eot") format('embedded-opentype'),
-  url("../../src/styles/fonts/ElegantIcons.ttf") format('truetype'),
-  url("../../src/styles/fonts/ElegantIcons.svg#icons") format('svg'),
+  url("../../node_modules/elegant-icons/fonts/ElegantIcons.woff") format('woff'),
+  url("../../node_modules/elegant-icons/fonts/ElegantIcons.eot") format('embedded-opentype'),
+  url("../../node_modules/elegant-icons/fonts/ElegantIcons.ttf") format('truetype'),
+  url("../../node_modules/elegant-icons/fonts/ElegantIcons.svg#icons") format('svg'),
 ;
 
 @opacity: 1;

diff --git a/semantic/src/themes/tripwire/globals/site.overrides b/semantic/src/themes/tripwire/globals/site.overrides
diff --git a/semantic/src/themes/tripwire/modules/popup.overrides b/semantic/src/themes/tripwire/modules/popup.overrides
@@ -6,29 +6,34 @@
 }
 
 .ui.popup.red:before {
-  box-shadow: -1px -1px 0 0 @red !important;
+  color: @red !important;
+
+}
+.ui.popup:before{
+  color: darken(@borderColor, 10);
 }
 
+
 .ui.popup.yellow {
     border: 1px solid @yellow !important; 
 }
 
 .ui.popup.yellow:before {
-  box-shadow: -1px -1px 0 0 @yellow !important;
+  color: @yellow !important;
 }
 
 .ui.popup.grey {
     border: 1px solid @grey !important; 
 }
 
 .ui.popup.grey:before {
-  box-shadow: -1px -1px 0 0 @grey !important;
+  color: @grey !important;
 }
 
 .ui.popup.blue {
     border: 1px solid @blue !important; 
 }
 
 .ui.popup.blue:before {
-  box-shadow: -1px -1px 0 0 @blue !important;
+  color: @blue !important;
 }
diff --git a/semantic/src/themes/tripwire/modules/popup.variables b/semantic/src/themes/tripwire/modules/popup.variables
@@ -56,10 +56,10 @@
 @arrowCenterBackground: @arrowBackground;
 @arrowBottomBackground: @arrowBackground;
 
-@arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px @arrowColor;
-@leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px @arrowColor;
-@rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px @arrowColor;
-@bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0px 0px @arrowColor;
+@arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px;
+@leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px;
+@rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px;
+@bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0px 0px;
 
 /*-------------------
        Types

diff --git a/src/components/charts/CircleChart/Circle.jsx b/src/components/charts/CircleChart/Circle.jsx
@@ -41,7 +41,7 @@ const CircleChart = (props) => {
               textAnchor='middle'
               dy='.35em'
               fontSize='2.5em'
-              fontWeight='lighter'
+              fontWeight='300'
             >
               {endPercentValue}
             </text>

diff --git a/src/styles/app.css b/src/styles/app.css
@@ -1,8 +1,6 @@
-/*@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700');*/
-@import "fonts/typography.css";
-@import 'fonts/style.css';
-@import 'fonts/Lato/latofonts.css';
-@import "variables.css";
-.svg-overflow-visible svg {
+/*@import "variables.css";*/
+/*@import "./elegant-icons.css";*/
+/*@import "./lato.css";*/
+/*.svg-overflow-visible svg {
   overflow: visible;
-} 
+} */
diff --git a/src/styles/fonts/style.css → src/styles/elegant-icons.css b/src/styles/fonts/style.css → src/styles/elegant-icons.css
@@ -1,10 +1,10 @@
 @font-face {
 	font-family: 'ElegantIcons';
-	src:url('fonts/ElegantIcons.eot');
-	src:url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
-		url('fonts/ElegantIcons.woff') format('woff'),
-		url('fonts/ElegantIcons.ttf') format('truetype'),
-		url('fonts/ElegantIcons.svg#ElegantIcons') format('svg');
+	src:url('../../node_modules/elegant-icons/fonts/ElegantIcons.eot');
+	src:url('../../node_modules/elegant-icons/fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
+		url('../../node_modules/elegant-icons/fonts/ElegantIcons.woff') format('woff'),
+		url('../../node_modules/elegant-icons/fonts/ElegantIcons.ttf') format('truetype'),
+		url('../../node_modules/elegant-icons/fonts/ElegantIcons.svg#ElegantIcons') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }

diff --git a/src/styles/fonts/ElegantIcons.eot b/src/styles/fonts/ElegantIcons.eot