Fix/remove fonts (#30)

* Removed inter fonts

* Made font names lowercase

* Changed variables to default, added iconpath variable

* Moved copying fonts to gulp

Author: EranNL

gulpfile.js

@@ -4,23 +4,41 @@ const gulp = require('gulp');
 const sass = require('gulp-sass');
 sass.compiler = require('sass');
 const rename = require('gulp-rename');
-const ts = require('gulp-typescript');
 
-const buildSass = async () => {
+const buildCss = async () => {
     return await gulp.src('./src/style/index.scss')
         .pipe(sass().on('error', sass.logError))
-        .pipe(gulp.dest('./dist/style'));
+        .pipe(gulp.dest('./dist/css'));
 }
 
-gulp.task('sass', buildSass);
+gulp.task('css:build', buildCss);
 
-const buildSassMin = async () => {
+const copySass = async () => {
+    return await gulp.src('./src/style/**/*.scss')
+        .pipe(gulp.dest('./dist/scss'))
+}
+
+gulp.task('sass:copy', copySass);
+
+const buildCssMin = async () => {
     return await gulp.src('./src/style/index.scss')
         .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
         .pipe(rename('index.min.css'))
-        .pipe(gulp.dest('./dist/style'));
+        .pipe(gulp.dest('./dist/css'));
+}
+
+gulp.task('css:build:min', buildCssMin);
+
+const copyIcons = async () => {
+    return await gulp.src('./src/icons/*')
+        .pipe(gulp.dest('./dist/icons'))
 }
 
-gulp.task('sass:min', buildSassMin);
+gulp.task('icons:copy', copyIcons);
 
-gulp.task('default', gulp.series('sass', 'sass:min'));
+gulp.task('default', gulp.series(
+    'css:build',
+    'css:build:min',
+    'sass:copy',
+    'icons:copy'
+));

package-lock.json

@@ -6,7 +6,7 @@
     "types": "dist/index.d.ts",
     "typings": "dist/index.d.ts",
     "scripts": {
-        "build:css": "rimraf scss && cp -r ./src/style scss && gulp",
+        "build:css": "gulp",
         "build:js": "tsc -p tsconfig-build.json",
         "build": "rimraf dist && npm run build:js && npm run build:css",
         "test": "jest --config=jest.config.json",
@@ -17,23 +17,23 @@
     "license": "ISC",
     "repository": "https://github.com/coderan-io/ui",
     "devDependencies": {
-        "@babel/plugin-proposal-class-properties": "^7.10.4",
-        "@babel/preset-env": "^7.11.0",
-        "@babel/preset-react": "^7.10.4",
-        "@babel/preset-typescript": "^7.10.4",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/preset-env": "^7.13.8",
+        "@babel/preset-react": "^7.12.13",
+        "@babel/preset-typescript": "^7.13.0",
         "@types/enzyme": "^3.10.8",
         "@types/enzyme-adapter-react-16": "^1.0.6",
-        "@types/react": "^16.9.55",
-        "@types/react-dom": "^16.9.9",
-        "@typescript-eslint/eslint-plugin": "^4.6.1",
-        "@typescript-eslint/parser": "^4.6.1",
+        "@types/react": "^16.14.4",
+        "@types/react-dom": "^16.9.11",
+        "@typescript-eslint/eslint-plugin": "^4.15.2",
+        "@typescript-eslint/parser": "^4.15.2",
         "babel-loader": "^8.2.2",
         "css-loader": "^5.1.0",
         "dotenv": "^8.2.0",
         "enzyme": "^3.11.0",
-        "enzyme-adapter-react-16": "^1.15.3",
-        "eslint": "^7.12.1",
-        "eslint-plugin-react": "^7.20.6",
+        "enzyme-adapter-react-16": "^1.15.6",
+        "eslint": "^7.21.0",
+        "eslint-plugin-react": "^7.22.0",
         "file-loader": "^6.2.0",
         "gulp": "^4.0.2",
         "gulp-rename": "^2.0.0",
@@ -46,16 +46,17 @@
         "sass": "^1.32.8",
         "sass-loader": "^11.0.1",
         "style-loader": "^2.0.0",
-        "typescript": "^4.0.5",
+        "typescript": "^4.2.2",
         "webpack": "^5.24.2",
         "webpack-cli": "^4.5.0",
         "webpack-dev-server": "^3.11.2",
         "webpack-manifest-plugin": "^3.0.0"
     },
     "dependencies": {
-        "@popperjs/core": "^2.6.0",
+        "@popperjs/core": "^2.8.6",
+        "bootstrap": "^4.6.0",
         "clsx": "^1.1.1",
-        "framer-motion": "^3.1.1",
+        "framer-motion": "^3.7.0",
         "prop-types": "^15.7.2",
         "react": "^16.14.0"
     },

package.json

@@ -7,8 +7,5 @@ body {
     background: var(--base-body-background);
     color: var(--base-font-color);
     margin: var(--base-body-gutter);
-    font: {
-        family: var(--base-font-family);
-    }
     line-height: 1.2rem;
 }

src/fonts/inter/inter-v2-latin-100.eot

@@ -1,99 +1,15 @@
 @use "mixins";
 @use "variables";
 
-/* inter-100 - latin */
-@font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 100;
-    src: local(''),
-    url('../fonts/inter/inter-v2-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../fonts/inter/inter-v2-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-200 - latin */
-@font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 200;
-    src: local(''),
-    url('../fonts/inter/inter-v2-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../fonts/inter/inter-v2-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-300 - latin */
-@font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 300;
-    src: local(''),
-    url('../fonts/inter/inter-v2-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../fonts/inter/inter-v2-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-regular - latin */
-@font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 400;
-    src: local(''),
-    url('../fonts/inter/inter-v2-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../fonts/inter/inter-v2-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-500 - latin */
-@font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 500;
-    src: local(''),
-    url('../fonts/inter/inter-v2-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../fonts/inter/inter-v2-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-600 - latin */
-@font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 600;
-    src: local(''),
-    url('../fonts/inter/inter-v2-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../fonts/inter/inter-v2-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-700 - latin */
-@font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 700;
-    src: local(''),
-    url('../fonts/inter/inter-v2-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../fonts/inter/inter-v2-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-800 - latin */
-@font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 800;
-    src: local(''),
-    url('../fonts/inter/inter-v2-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../fonts/inter/inter-v2-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* inter-900 - latin */
-@font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 900;
-    src: local(''),
-    url('../fonts/inter/inter-v2-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../fonts/inter/inter-v2-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
-
 @font-face {
     font-family: 'Cui-Icons';
     font-style: normal;
     font-weight: 500;
     src: local(''),
-    url('../fonts/icons/cui-icons.eot') format('eot'),
-    url('../fonts/icons/cui-icons.svg') format('svg'),
-    url('../fonts/icons/cui-icons.ttf') format('ttf'),
-    url('../fonts/icons/cui-icons.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+    url('#{variables.$iconPath}/cui-icons.eot') format('eot'),
+    url('#{variables.$iconPath}/cui-icons.svg') format('svg'),
+    url('#{variables.$iconPath}/cui-icons.ttf') format('ttf'),
+    url('#{variables.$iconPath}/cui-icons.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 h1 {

src/fonts/inter/inter-v2-latin-100.svg

@@ -140,7 +140,7 @@ $colors: (
         'dark': hsl(200, 19%, 18%),
         'default-font-color': #fff, //AAA
     )
-);
+) !default;
 
 @function color($color, $variant: 'default') {
     @return map-get(map-get($colors, $color), $variant);
@@ -149,47 +149,45 @@ $colors: (
 /**
  * 2. Base
  */
-$base-background-color: color('gray', 'background');
-$base-body-gutter: 0;
-$base-font-color: hsl(200, 19%, 18%);
-$base-font-family: 'Inter, apple-sf-pro-text, Helvetica, Arial, sans-serif';
-$base-border-color: hsl(0, 0%, 88%);
-$base-border-hover-color: hsl(0, 0%, 74%);
-$base-border-radius: 4px;
-$base-gutter: 1rem;
-$base-gutter-steps: 0.25;
+$base-background-color: color('gray', 'background') !default;
+$base-body-gutter: 0 !default;
+$base-font-color: hsl(200, 19%, 18%) !default;
+$base-border-color: hsl(0, 0%, 88%) !default;
+$base-border-hover-color: hsl(0, 0%, 74%) !default;
+$base-border-radius: 4px !default;
+$base-gutter: 1rem !default;
+$base-gutter-steps: 0.25 !default;
 
 $breakpoints: (
     'sm': '640px',
     'md': '768px',
     'lg': '1024px',
     'xl': '1280px'
-);
+) !default;
 
 :root {
     --base-body-background: #{$base-background-color};
     --base-body-gutter: #{$base-body-gutter};
     --base-font-color: #{$base-font-color};
-    --base-font-family: #{$base-font-family};
     --base-border-color: #{$base-border-color};
     --base-border-hover-color: #{$base-border-hover-color};
     --base-border-radius: #{$base-border-radius};
     --base-gutter: #{$base-gutter};
 }
 
-$primary-color: color('deep-purple', 'default');
-$primary-color-hover: color('deep-purple', 'hover');
-$primary-color-active: color('deep-purple', 'active');
-$primary-color-light-background: color('deep-purple', 'background');
+$primary-color: color('deep-purple', 'default') !default;
+$primary-color-hover: color('deep-purple', 'hover') !default;
+$primary-color-active: color('deep-purple', 'active') !default;
+$primary-color-light-background: color('deep-purple', 'background') !default;
 
-$danger-color: color('red', 'default');
-$danger-color-hover: color('red', 'hover');
-$danger-color-active: color('red', 'active');
-$danger-color-light-background: color('red', 'background');
+$danger-color: color('red', 'default') !default;
+$danger-color-hover: color('red', 'hover') !default;
+$danger-color-active: color('red', 'active') !default;
+$danger-color-light-background: color('red', 'background') !default;
 
-$success-color: color('green', 'default');
-$success-color-hover: color('green', 'hover');
-$success-color-active: color('green', 'active');
+$success-color: color('green', 'default') !default;
+$success-color-hover: color('green', 'hover') !default;
+$success-color-active: color('green', 'active') !default;
 
 :root {
     --primary-color: #{$primary-color};
@@ -210,8 +208,8 @@ $success-color-active: color('green', 'active');
 /**
  * 3. Panel
  */
-$panel-background: #fff;
-$panel-gutter: 2rem;
+$panel-background: #fff !default;
+$panel-gutter: 2rem !default;
 
 :root {
     --panel-background: #{$panel-background};
@@ -221,7 +219,7 @@ $panel-gutter: 2rem;
 /**
  * 4. Page
  */
-$page-gutter: 2rem;
+$page-gutter: 2rem !default;
 
 :root {
     --page-gutter: #{$page-gutter};
@@ -230,19 +228,19 @@ $page-gutter: 2rem;
 /**
  * 5. Button
  */
-$button-padding: 1rem;
-$button-font-weight: 600;
-$button-font-size: 1rem;
+$button-padding: 1rem !default;
+$button-font-weight: 600 !default;
+$button-font-size: 1rem !default;
 
-$primary-button-ghost-hover-background: color('deep-purple', 'background');
-$primary-button-ghost-active-background: color('deep-purple', 'background-hover');
+$primary-button-ghost-hover-background: color('deep-purple', 'background') !default;
+$primary-button-ghost-active-background: color('deep-purple', 'background-hover') !default;
 
-$secondary-button-background: transparent;
-$secondary-button-hover-background: color('deep-purple', 'background');
-$secondary-button-active-background: color('deep-purple', 'background-hover');
+$secondary-button-background: transparent !default;
+$secondary-button-hover-background: color('deep-purple', 'background') !default;
+$secondary-button-active-background: color('deep-purple', 'background-hover') !default;
 
-$danger-button-ghost-hover-background: color('red', 'background');
-$danger-button-ghost-active-background: color('red', 'background-hover');
+$danger-button-ghost-hover-background: color('red', 'background') !default;
+$danger-button-ghost-active-background: color('red', 'background-hover') !default;
 
 :root {
     --button-padding: #{$button-padding};
@@ -281,8 +279,8 @@ $danger-button-ghost-active-background: color('red', 'background-hover');
 /**
  * 6. Cards
  */
-$card-padding: 1.5rem;
-$card-background: #fff;
+$card-padding: 1.5rem !default;
+$card-background: #fff !default;
 
 :root {
     --card-padding: #{$card-padding};
@@ -292,9 +290,9 @@ $card-background: #fff;
 /**
  * 7. Form fields
  */
-$form-field-padding: 1rem;
-$form-field-font-weight: 500;
-$form-field-font-size: 1rem;
+$form-field-padding: 1rem !default;
+$form-field-font-weight: 500 !default;
+$form-field-font-size: 1rem !default;
 
 :root {
     --form-field-padding: #{$form-field-padding};
@@ -305,6 +303,7 @@ $form-field-font-size: 1rem;
 /**
  * 8. Icons
  */
+$iconPath: '../icons' !default;
 $icons: (
     'activity': '\e900',
     'alert-circle': '\e901',
@@ -559,9 +558,9 @@ $icons: (
 /**
  * 8. Form fields
  */
-$form-field-padding: 1rem;
-$form-field-font-weight: 500;
-$form-field-font-size: 1rem;
+$form-field-padding: 1rem !default;
+$form-field-font-weight: 500 !default;
+$form-field-font-size: 1rem !default;
 
 :root {
     --form-field-padding: #{$form-field-padding};