fix #135

.browserslistrc

@@ -1,2 +1 @@
 extends @wordpress/browserslist-config
-IE 11

CHANGELOG.md

@@ -1,5 +1,16 @@
 #Changelog
 
+## December 17, 2021 16.0.0
+* Drop IE support.
+* Add new function: `_font-size()`.
+* Add new function: `_line-height()`.
+* Add new CSS custom property: `--_form-control-border-color`.
+* Add new CSS custom property: `--_form-control-border-color-hover`.
+* Add new CSS custom property: `--_form-control-border-color-focus`.
+* Add new CSS custom property: `--_transition-duration`.
+* Add new CSS custom property: `--_transition-function-timing`.
+* Add new CSS custom property: `--_base-font-size-px`.
+
 ## November 8, 2021 15.0.3
 * Support sub navigation hover effect on mobile device.
 

README.md

@@ -95,26 +95,8 @@ https://cdn.jsdelivr.net/npm/sass-basis@latest/dist/
 <a class="c-btn c-btn--block">Btn</a>
 ```
 
-### Option
-
-Support IE9 ( Not perfect )
-
-```html
-<!--[if lt IE 10]>
-<link rel="stylesheet" href="node_modules/sass-basis/dist/css/plugin/basis-ie9/basis-ie9.min.css" />
-<![endif]-->
-```
-
-And support IE8 ( Not perfect )
-
-```html
-<!--[if lt IE 9]>
-<script src="node_modules/html5shiv/dist/html5shiv.js"></script>
-<![endif]-->
-```
-
 ## Browser support
-Modern Browser and IE10+
+Modern Browser only
 
 ## How to contribute
 

package.json

@@ -32,24 +32,24 @@
     "README.md"
   ],
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
+    "@babel/core": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
     "@wordpress/browserslist-config": "^4.1.0",
-    "autoprefixer": "^10.3.3",
-    "babel-loader": "^8.2.2",
-    "browser-sync": "^2.27.5",
+    "autoprefixer": "^10.4.0",
+    "babel-loader": "^8.2.3",
+    "browser-sync": "^2.27.7",
     "cpy-cli": "^3.1.1",
-    "cssnano": "^5.0.8",
+    "cssnano": "^5.0.13",
     "node-aigis": "^1.4.1",
-    "node-sass": "^6.0.1",
+    "node-sass": "^7.0.0",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.6",
-    "postcss-cli": "^8.3.1",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
     "postcss-import": "^14.0.2",
     "postcss-mq-optimize": "^1.1.0",
-    "webpack": "^5.51.1",
-    "webpack-cli": "^4.8.0"
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1"
   },
   "scripts": {
     "prepublish": "npm run cleanup:aigis && npm run build",
@@ -60,16 +60,14 @@
     "cleanup:js": "rimraf dist/js && mkdir -p dist/js",
     "cleanup:aigis": "rimraf public && mkdir -p public/aigis_assets",
     "css:basis": "node-sass src/css/basis.scss dist/css/basis.min.css && postcss -r dist/css/basis.min.css -c=postcss.config.js",
-    "css:basis-ie9": "node-sass src/css/plugin/basis-ie9/basis-ie9.scss dist/css/plugin/basis-ie9/basis-ie9.min.css && postcss -r dist/css/plugin/basis-ie9/basis-ie9.min.css -c=postcss.config.js",
     "css": "npm run cleanup:css && npm-run-all -p css:*",
     "js:basis": "webpack ./src/js/basis.js -o ./dist/js/ --output-filename basis.min.js --config webpack.config.js",
     "js": "npm run cleanup:js && npm-run-all -p js:*",
     "aigis:css:sass": "node-sass src/aigis/assets/css/style.scss -o public/aigis_assets/css",
     "aigis:css:postcss": "postcss public/aigis_assets/css/style.css -o public/aigis_assets/css/style.min.css -c=postcss.config.js",
     "aigis:css": "npm-run-all -s aigis:css:*",
-    "aigis-ie9:css": "node-sass src/aigis/assets/css/basis-ie9.scss public/aigis_assets/css/basis-ie9.min.css && postcss -r public/aigis_assets/css/basis-ie9.min.css -c=postcss.config.js",
     "aigis:js": "webpack ./src/aigis/assets/js/app.js -o ./public/aigis_assets/js/ --output-filename app.min.js --config webpack.config.js",
-    "aigis": "npm run cleanup:aigis && aigis run -c src/aigis/aigis_config.yml && npm-run-all -p aigis:css aigis-ie9:css aigis:js",
+    "aigis": "npm run cleanup:aigis && aigis run -c src/aigis/aigis_config.yml && npm-run-all -p aigis:css aigis:js",
     "browsersync": "npm run aigis && browser-sync start -s 'public' -f 'public'",
     "zip": "rimraf basis.zip && rsync -a --exclude '.*' --exclude '/basis/' --exclude '/node_modules/' --exclude '/bin/' ./ basis && cd basis && cd ../ && zip -9 -qmr basis.zip basis"
   },

src/aigis/assets/css/foundation/_foundation.scss

@@ -3,9 +3,9 @@ body {
 }
 
 a {
-  transition: background-color $_transition-duration $_transition-function-timing,
-              color $_transition-duration $_transition-function-timing;
-  color: _dark($color-primary);
+  transition: background-color #{ _var-transition-duration() } #{ _var-transition-function-timing() },
+              color #{ _var-transition-duration() } #{ _var-transition-function-timing() };
+  color: _var-dark-color-primary();
 }
 
 .hljs, pre {

src/aigis/assets/css/layout/_footer.scss

@@ -1,12 +1,9 @@
 .#{$_prefix}l-footer {
   padding: ($_base-line-height * 2) 0 0;
-  background-color: _dark($_color-text); // For IE11
   background-color: _var-dark-color-text();
-  color: $_color-white; // For IE11
   color: _var-color-white();
 
   a {
-    color: $_color-gray; // For IE11
     color: _var-color-gray();
   }
 }

src/aigis/assets/css/layout/_header.scss

@@ -4,7 +4,6 @@
   overflow: hidden;
 
   &, a {
-    color: $_color-white; // For IE11
     color: _var-color-white();
     text-decoration: none;
   }
@@ -24,7 +23,6 @@
     transform: translateY(-50%);
 
     &__bar {
-      background-color: $_color-white; // For IE11
       background-color: _var-color-white();
     }
   }

src/aigis/assets/css/object/component/_btn.scss

@@ -9,15 +9,12 @@
   }
 
   &--ghost {
-    border: 1px solid transparent;
-    border-color: $_color-white; // For IE11
-    border-color: _var-color-white();
+    border: 1px solid _var-color-white();
     background-color: transparent;
   }
 
   &--launch, &--download, &--buy {
     background-color: $color-primary;
-    color: $_color-white; // For IE11
     color: _var-color-white();
 
     @include _hover(lg) {

src/aigis/assets/css/object/component/_copyright.scss

@@ -3,7 +3,6 @@
   @include _padding(1, 0, 2);
 
   a {
-    color: $_color-gray; // For IE11
     color: _var-color-gray();
   }
 }

src/aigis/assets/css/object/component/_drawer.scss

@@ -1,7 +1,6 @@
 .#{$_prefix}l-body > .#{$_prefix}c-drawer {
-  background-color: $_color-text;
+  background-color: _var-color-text();
   @include _padding(.5);
-  color: $_color-white; // For IE11
   color: _var-color-white();
 
   a {

src/aigis/assets/css/object/component/_entry.scss

@@ -5,9 +5,7 @@
 
   .#{$_prefix}c-entry__title {
     @include _padding(0, 0, .25);
-    border-bottom: 1px solid transparent;
-    border-bottom-color: _light($_color-gray); // For IE11
-    border-bottom-color: _var-light-color-gray();
+    border-bottom: 1px solid _var-light-color-gray();
     @include _padding(0, 0, .25);
   }
 

src/aigis/assets/css/object/component/_label.scss

@@ -1,9 +1,7 @@
 .#{$_prefix}c-label {
   display: inline-block;
-  background-color: $_color-gray; // For IE11
   background-color: _var-color-gray();
   border-radius: 2px;
-  color: $_color-white; // For IE11
   color: _var-color-white();
   font-size: ($_base-font-size-px - 2);
   line-height: 1;

src/aigis/assets/css/object/component/_meta.scss

@@ -2,7 +2,6 @@
   @include _font-size-line-height($_base-font-size-px - 2);
 
   &, a {
-    color: $_color-gray; // For IE11
     color: _var-color-gray();
   }
 }

src/aigis/assets/css/object/project/_local-nav.scss

@@ -14,7 +14,6 @@
   }
 
   a[href] {
-    color: _light($_color-text); // For IE11
     color: _var-light-color-text();
     text-decoration: none;
 
@@ -24,7 +23,6 @@
   }
 
   a:not([href]) {
-    color: _lightest($_color-text); // For IE11
     color: _var-lightest-color-text();
     cursor: text;
     text-decoration: none;

src/aigis/assets/css/object/project/_media.scss

@@ -51,7 +51,6 @@
   &__lead {
     margin: 0;
     padding: 0;
-    color: $_color-gray; // For IE11
     color: _var-color-gray();
   }
 

src/aigis/assets/css/object/project/_scroll-top.scss

@@ -9,7 +9,6 @@
     @include _square(48px);
     overflow: hidden;
     background-color: rgba( 0, 0, 0, .8 );
-    color: $_color-white; // For IE11
     color: _var-color-white();
     position: relative;
 

src/aigis/assets/css/object/project/_show-grid.scss

@@ -1,13 +1,8 @@
 .#{$_prefix}p-show-grid {
   &__item {
     background-color: #00DAE6;
-    border-left: 1px solid transparent;
-    border-bottom: 1px solid transparent;
-    border-left-color: $_color-white; // For IE11
-    border-left-color: _var-color-white();
-    border-bottom-color: $_color-white; // For IE11
-    border-bottom-color: _var-color-white();
-    color: $_color-white; // For IE11
+    border-left: 1px solid _var-color-white();
+    border-bottom: 1px solid _var-color-white();
     color: _var-color-white();
     padding: 16px;
 

src/aigis/assets/css/object/project/_table-of-contents.scss

@@ -4,13 +4,11 @@
   @include _padding(0, 1);
   background-color: #fafafa;
   border: 1px solid transparent;
-  border-color: _lighter($_color-gray); // For IE11
   border-color: _var_lighter-color-gray();
-  border-radius: $_border-radius;
+  border-radius: _var-border-radius();
 
   &__item {
     border-bottom: 1px solid transparent;
-    border-bottom-color: _lighter($_color-gray); // For IE11
     border-bottom-color: _var-lighter-color-gray();
 
     &:last-child {
@@ -20,7 +18,7 @@
     > a {
       display: block;
       @include _padding(.5, 0);
-      color: $_color-text;
+      color: inherit;
       text-decoration: none;
 
       @include _hover(lg) {

src/aigis/assets/css/style.scss

@@ -45,7 +45,7 @@ $_prefix: '';
   min-height: 150px;
 }
 
-@for $i from 10 through 500 {
+@for $i from 10 through 200 {
   .font-size-#{ $i }px {
     @include _font-size-line-height(_strip-unit($i / $_base-font-size-px));
 

src/aigis/template_ejs/_layout/_head.ejs

@@ -10,9 +10,6 @@
   <link rel="stylesheet" href="<%= root %>aigis_assets/css/style.min.css">
   <link rel="stylesheet" href="<%= root %>aigis_assets/css/theme.css">
   <link rel="stylesheet" href="<%= root %>aigis_assets/css/highlight/okadia.css">
-  <!--[if lt IE 10]>
-  <link rel="stylesheet" href="/aigis_assets/css/plugin/basis-ie9/basis-ie9.min.css" />
-  <![endif]-->
   <link href="//fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet" type="text/css">
   <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
   <link rel="shortcut icon" href="<%= root %>/aigis_assets/images/favicon.ico">

src/css/basis-core.scss

@@ -12,15 +12,16 @@
 @import 'core/function/size-prefix';
 @import 'core/function/space';
 @import 'core/function/strip-unit';
+@import 'core/function/typography';
 
 @import 'core/variable/typography';
 @import 'core/variable/transition';
 @import 'core/variable/border-radius';
 @import 'core/variable/color';
 @import 'core/variable/media-query';
 @import 'core/variable/container';
-@import 'core/variable/form';
 @import 'core/variable/page-effect';
+@import 'core/variable/transition';
 
 @import 'core/var/background-color';
 @import 'core/var/border-radius';
@@ -35,6 +36,7 @@
 @import 'core/var/margin-scale';
 @import 'core/var/space';
 @import 'core/var/typography';
+@import 'core/var/transition';
 
 @import 'core/mixin/animation';
 @import 'core/mixin/background-image';

src/css/core/abstract/_breadcrumbs.scss

@@ -35,7 +35,6 @@ Abstract breadcrumbs component
         display: inline-block;
         height: .4em;
         width: .4em;
-        border-color: $_color-text;
         border-color: _var-color-text();
         border-style: solid;
         border-width: 1px 1px 0 0;

src/css/core/abstract/_checkbox.scss

@@ -36,7 +36,6 @@ Abstract checkbox component
       display: inline-block;
       cursor: pointer;
       @include _form-control-base-border();
-      background-color: $_color-white; // For IE11
       background-color: _var-color-white();
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, .035);
       @include _square(16px);
@@ -49,7 +48,6 @@ Abstract checkbox component
         height: 8px;
         width: 6px;
         border-style: solid;
-        border-color: $_color-white; // For IE11
         border-color: _var-color-white();
         border-width: 0 2px 2px 0;
         visibility: hidden;
@@ -68,11 +66,9 @@ Abstract checkbox component
       }
 
       &:disabled {
-        background-color: _lightest($_color-gray); // For IE11
         background-color: _var-lightest-color-gray();
 
         &::before {
-          border-color: _dark($_color-gray); // For IE11
           border-color: _var-dark-color-gray();
         }
       }