Merge branch 'develop' into develop

2025-01-30 12:52:43 +08:00 · 2020-02-28 16:53:03 +08:00 · 2020-02-28 16:53:03 +08:00 · f170f0690d
commit f170f0690d
parent 740987a06d ad38aef489
56 changed files with 912 additions and 496 deletions
--- a/demo/docEntry.vue
+++ b/demo/docEntry.vue
@ -0,0 +1,44 @@
+<template>
+  <n-nimbus-service-layout
+    ref="layout"
+    :padding-body="false"
+    :items="items"
+    :header-z-index="3000"
+  >
+    <router-view />
+  </n-nimbus-service-layout>
+</template>
+
+<script>
+export default {
+  provide () {
+    return {
+      NDocRoot: this
+    }
+  },
+  inject: {
+    NEntry: {
+      default: null
+    }
+  },
+  beforeRouteUpdate (to, from, next) {
+    this.memorizedPath = from ? from.path : null
+    next()
+  },
+  data () {
+    return {
+      memorizedPath: null
+    }
+  },
+  computed: {
+    items () {
+      return this.NEntry.items
+    }
+  },
+  methods: {
+    resetScrollPosition () {
+      this.$refs.layout.resetScrollPosition()
+    }
+  }
+}
+</script>
--- a/demo/documentation/landing/Left.vue
+++ b/demo/documentation/landing/Left.vue
--- a/demo/documentation/landing/Right.vue
+++ b/demo/documentation/landing/Right.vue
--- a/demo/documentation/landing/footer.vue
+++ b/demo/documentation/landing/footer.vue
@ -0,0 +1,33 @@
+<template>
+  <n-layout-footer mode="absolute" class="footer" style="z-index: auto;">
+    <div style="max-width: 1200px; margin: auto;">
+      <n-divider style="margin: 0 0 16px 0;" />
+      <n-text depth="tertiary">
+        A <a ref="noopener noreferer" href="https://www.tusimple.com" target="_blank">
+          <n-text>
+            Tusimple
+          </n-text>
+        </a> Project ·&nbsp;
+      </n-text>
+      <n-text depth="tertiary">
+        Designed by <a ref="noopener noreferer" href="https://www.ritalei.com" target="_blank">
+          <n-text>
+            Rita Lei
+          </n-text>
+        </a>
+        <n-text depth="tertiary">
+          &nbsp;· Refined by Haiyang Yu &amp; 07akioni
+        </n-text>
+      </n-text>
+    </div>
+  </n-layout-footer>
+</template>
+
+<style scoped>
+.footer {
+  font-size: 15px;
+  text-align: center;
+  padding: 20px;
+  padding-top: 0;
+}
+</style>
--- a/demo/documentation/landing/index.vue
+++ b/demo/documentation/landing/index.vue
@ -0,0 +1,122 @@
+<i18n>
+{
+  "zh-CN": {
+    "start": "开始使用",
+    "intro1": "一个实验性的 Vue UI 框架",
+    "intro2": "在意样式，带主题，完整，快",
+    "intro3": "有点意思"
+  },
+  "en-US": {
+    "start": "Getting Start",
+    "intro1": "An Experimental Vue UI Framework",
+    "intro2": "Caring About Styles, Themed, Batteries Included, Fast",
+    "intro3": "Intresting Somehow"
+  }
+}
+</i18n>
+
+<template>
+  <n-config-consumer>
+    <template v-slot="{ styleScheme, theme }">
+      <div>
+        <landing-footer />
+        <div class="banner">
+          <left-image class="left-image" />
+          <right-image class="right-image" />
+          <n-h1
+            style="margin-top: 0;"
+            class="naive-title"
+          >
+            Naive UI
+          </n-h1>
+          <n-p style="font-size: 16px; margin-bottom: 0;">
+            {{ $t("intro1") }}
+          </n-p>
+          <n-p style="font-size: 16px; margin-bottom: 4px; margin-top: 4px; font-weight: 600;">
+            {{ $t("intro2") }}
+          </n-p>
+          <n-p style="font-size: 16px; margin-top: 0;">
+            {{ $t("intro3") }}
+          </n-p>
+          <n-button type="primary" :ghost="theme === 'dark'" size="large" @click="handleStartClick">
+            {{ $t("start") }}
+          </n-button>
+        </div>
+      </div>
+    </template>
+  </n-config-consumer>
+</template>
+
+<script>
+import LandingFooter from './footer'
+import leftImage from './Left'
+import rightImage from './Right'
+
+export default {
+  components: {
+    LandingFooter,
+    leftImage,
+    rightImage
+  },
+  methods: {
+    handleStartClick () {
+      this.$router.push(
+        /^(\/[^/]+){2}/.exec(this.$route.path)[0] + '/doc/start'
+      )
+    }
+  }
+}
+</script>
+
+<style scoped>
+.banner {
+  text-align: center;
+  position: absolute;
+  top: calc(50% - 36px);
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+.naive-title {
+  font-family: 'Metropolis';
+  font-size: 80px;
+  margin-bottom: 18px;
+}
+
+@media only screen and (max-width: 1920px) {
+  .left-image {
+    right: calc(50% + 270px);
+    width: calc(50% - 270px);
+    min-width: 440px;
+  }
+  .right-image {
+    left: calc(50% + 270px);
+    width: calc(50% - 270px);
+    min-width: 440px;
+  }
+}
+
+@media only screen and (min-width: 1920px) {
+  .left-image {
+    left: 0;
+    width: 700px;
+  }
+  .right-image {
+    right: 0;
+    width: 700px;
+  }
+}
+
+.left-image {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.right-image {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>
--- a/demo/entry.vue
+++ b/demo/entry.vue
@ -1,20 +1,17 @@
 <template>
  <n-config-provider class="demo" namespace="naive-ui-doc" :theme="theme" :language="lang">
-    <n-nimbus-service-layout
-      ref="layout"
-      :padding-body="false"
-      :items="items"
-      :header-z-index="3000"
-    >
-      <template v-slot:nav>
+    <n-layout mode="absolute" class="root-layout">
+      <n-layout-header bordered>
        <doc-header
          :lang="lang"
          :items="flattenedItems"
          @lang-change="handleLangChange"
        />
-      </template>
-      <router-view />
-    </n-nimbus-service-layout>
+      </n-layout-header>
+      <n-layout class="home-layout" style="top: 64px; overflow: hidden;" mode="absolute">
+        <router-view />
+      </n-layout>
+    </n-layout>
  </n-config-provider>
 </template>

@ -29,7 +26,7 @@ export default {
  },
  provide () {
    return {
-      NDocRoot: this
+      NEntry: this
    }
  },
  beforeRouteEnter (to, from, next) {
@ -38,14 +35,8 @@ export default {
  },
  beforeRouteUpdate (to, from, next) {
    this.$i18n.locale = to.params.lang
-    this.memorizedPath = from ? from.path : null
    next()
  },
-  data () {
-    return {
-      memorizedPath: null
-    }
-  },
  computed: {
    items () {
      return menuOptions(this.lang, this)
@ -81,9 +72,6 @@ export default {
    }
  },
  methods: {
-    resetScrollPosition () {
-      this.$refs.layout.resetScrollPosition()
-    },
    handleLangChange (lang) {
      this.lang = lang
    }
@ -117,45 +105,10 @@ body {
  -webkit-text-size-adjust: 100%;
 }

-.n-doc {
-  width: 720px;
-  margin: 0 auto;
-  .n-doc-header {
-    display: flex;
-    // height: 60px;
-    // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-    margin-bottom: 16px;
-    // align-items: center;
-  }
-  .n-doc-section {
-    .n-doc-section__header {
-      font-size: 16px;
-      font-weight: 500;
-      margin-bottom: 12px;
-    }
-    .n-doc-section__view {
-      background: #5c657eff;
-      padding: 18px;
-      border-radius: 8px;
-      justify-content: center;
-      display: flex;
-      margin-bottom: 12px;
-      flex-wrap: wrap;
-    }
-    .n-doc-section__inspect {
-      background: #5c657eff;
-      padding: 18px;
-      border-radius: 8px;
-      display: flex;
-      margin-bottom: 12px;
-      flex-wrap: wrap;
-    }
-    .n-doc-section__text-content {
-      font-size: 16px;
-    }
-    .n-doc-section__source {
-      position: relative;
-    }
-  }
+.root-layout.n-layout.n-light-theme {
+  background-color: white;
+}
+.home-layout.n-layout.n-light-theme {
+  background-color: white;
 }
 </style>
--- a/demo/header.vue
+++ b/demo/header.vue
@ -3,25 +3,30 @@
  "zh-CN": {
    "dark": "深色",
    "light": "浅色",
-    "searchPlaceholder": "搜索组件"
+    "searchPlaceholder": "搜索组件",
+    "home": "首页",
+    "doc": "文档"
  },
  "en-US": {
    "dark": "Dark",
    "light": "Light",
-    "searchPlaceholder": "Search Components"
+    "searchPlaceholder": "Search Components",
+    "home": "Home",
+    "doc": "Documentation"
  }
 }
 </i18n>

 <template>
  <div class="nav">
-    <div class="ui-logo">
+    <div class="ui-logo" @click="handleLogoClick">
      <img src="./assets/images/naivelogo.svg">
      Naive UI ({{ version }})
    </div>
-    <div style="width: 216px; margin-left: 56px;">
+    <div style=" margin-left: 56px; display: flex; align-items: center;">
      <n-auto-complete
        v-model="searchInputValue"
+        style="width: 216px;"
        :z-index="3001"
        :placeholder="$t('searchPlaceholder')"
        :options="searchOptions"
@ -29,6 +34,12 @@
        blur-after-select
        @select="handleSelect"
      />
+      <div class="nav-menu">
+        <n-menu mode="horizontal" :value="menuValue" @select="handleMenuSelect">
+          <n-menu-item :title="$t('home')" name="home" />
+          <n-menu-item :title="$t('doc')" name="doc" />
+        </n-menu>
+      </div>
    </div>
    <div class="theme-picker">
      <n-select
@ -91,6 +102,11 @@ export default {
    }
  },
  computed: {
+    menuValue () {
+      if (/^(\/[^/]+){2}\/doc/.test(this.$route.path)) return 'doc'
+      else if (this.$route.name === 'home') return 'home'
+      return null
+    },
    searchOptions () {
      function getLabel (item) {
        if (item.title) return item.title + (item.titleExtra ? (' ' + item.titleExtra) : '')
@ -121,9 +137,28 @@ export default {
    }
  },
  methods: {
+    handleLogoClick () {
+      this.$router.push(
+        /^(\/[^/]+){2}/.exec(this.$route.path)[0]
+      )
+    },
    handleSelect (value) {
      this.$router.push(value)
-      document.body.focus()
+    },
+    handleMenuSelect (value) {
+      if (value === 'home') {
+        this.$router.push(
+          /^(\/[^/]+){2}/.exec(this.$route.path)[0]
+        )
+      } if (value === 'doc') {
+        if (/^(\/[^/]+){2}\/doc/.test(this.$route.path)) {
+
+        } else {
+          this.$router.push(
+            /^(\/[^/]+){2}/.exec(this.$route.path)[0] + '/doc/start'
+          )
+        }
+      }
    },
    handleThemeChange (theme) {
      this.NConfigProvider.$parent.theme = theme
@ -138,11 +173,12 @@ export default {
 <style lang="scss" scoped>
 .nav {
  display: grid;
-  grid-template-columns: 288px 1fr 96px 140px;
-  grid-template-rows: 64px;
+  grid-template-columns: 288px 1fr auto 140px;
+  grid-template-rows: 63px;
  align-items: center;
 }
 .ui-logo {
+  cursor: pointer;
  display: flex;
  align-items: center;
  padding-left: 36px;
@ -153,6 +189,12 @@ export default {
  height: 32px;
  width: 32px;
 }
+.nav-menu {
+  padding-left: 32px;
+}
+.nav-menu .n-menu-item {
+  height: 63px !important;
+}
 .theme-picker {
  padding-right: 16px;
 }
--- a/demo/init.js
+++ b/demo/init.js
@ -2,6 +2,9 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import VueI18n from 'vue-i18n'

+import LandingPage from './documentation/landing'
+import Entry from './entry'
+
 import intro from './documentation/intro/intro'
 import start from './documentation/intro/start'
 import devGuildlines from './documentation/intro/devGuidelines'
@ -73,7 +76,7 @@ import code from './documentation/components/code'
 import upload from './documentation/components/upload'
 import table from './documentation/components/table'

-import demo from './demo'
+import DocEntry from './docEntry'
 import ComponentDemo from './utils/ComponentDemo'
 import ComponentDemos from './utils/ComponentDemos'
 import ComponentDocumentation from './utils/ComponentDocumentation'
@ -157,100 +160,111 @@ const routes = [
    component: cascaderDebug
  },
  {
-    path: '/:lang/:theme/start',
-    component: demo,
-    children: withPrefix('/:lang/:theme', [
-      { path: '/intro', component: intro },
-      { path: '/start', component: start },
-      { path: '/dev-guildlines', component: devGuildlines },
-      { path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
-      { path: '/n-layout', component: layout },
-      { path: '/n-gradient-text', component: gradientText },
+    path: '/:lang/:theme',
+    component: Entry,
+    children: [
      {
-        path: '/n-icon',
-        component: () => import('./documentation/components/icon')
+        path: '/:lang/:theme',
+        component: LandingPage,
+        name: 'home'
      },
-      { path: '/n-checkbox', component: checkbox },
-      { path: '/n-button', component: button },
-      { path: '/n-switch', component: nswitch },
-      // { path: '/n-table', component: tableDemo },
-      { path: '/n-data-table', component: dataTable },
-      { path: '/n-input', component: input },
-      { path: '/n-select', component: select },
-      { path: '/n-cascader', component: cascader },
-      { path: '/n-custom-input', component: customInput },
-      { path: '/n-modal', component: modal },
-      { path: '/n-message', component: message },
-      { path: '/n-tooltip', component: tooltip },
-      { path: '/n-popover', component: popover },
-      { path: '/n-notification', component: notification },
-      { path: '/n-pagination', component: pagination },
-      { path: '/n-alert', component: alert },
-      { path: '/n-date-picker', component: datePicker },
-      { path: '/n-input-number', component: inputNumber },
-      { path: '/n-radio', component: radio },
-      { path: '/n-form', component: form },
-      { path: '/n-tabs', component: tabs },
-      { path: '/n-time-picker', component: timePicker },
-      { path: '/n-confirm', component: confirm },
-      { path: '/n-router-debug', component: routerDebug },
-      { path: '/n-modal-debug', component: modalDebug },
-      { path: '/n-scrollbar-debug', component: scrollbarDebug },
-      { path: '/n-badge', component: badge },
-      { path: '/n-steps', component: steps },
-      { path: '/n-collapse', component: collapse },
-      { path: '/n-progress', component: progress },
-      { path: '/n-tag', component: tag },
-      { path: '/n-menu', component: menu },
-      { path: '/n-timeline', component: timeline },
-      { path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
-      { path: '/n-back-top', component: backTop },
-      { path: '/n-date-picker-debug', component: datePickerDebug },
-      { path: '/n-divider', component: divider },
-      { path: '/n-popconfirm', component: popconfirm },
-      { path: '/n-anchor', component: anchor },
-      { path: '/n-dropdown', component: dropdown },
-      { path: '/n-popselect', component: popselect },
-      { path: '/n-config-provider', component: configProvider },
-      { path: '/n--debug', component: suffixDebug },
-      { path: '/n-transfer', component: transfer },
-      { path: '/n-spin', component: spin },
-      { path: '/n-drawer', component: drawer },
-      { path: '/n-loading-bar', component: loadingBar },
-      { path: '/n-time', component: time },
-      { path: '/n-slider', component: slider },
-      { path: '/n-tree', component: tree },
-      { path: '/n-vertical-align-debug', component: verticalAlignDebug },
-      { path: '/n-affix', component: affix },
-      { path: '/n-statistic', component: statistic },
-      { path: '/n-grid', component: grid },
-      { path: '/n-breadcrumb', component: breadcrumb },
-      { path: '/n-config-consumer', component: configConsumer },
-      { path: '/n-descriptions', component: descriptions },
-      { path: '/n-list', component: list },
-      { path: '/n-card', component: card },
-      { path: '/n-avatar', component: avatar },
-      { path: '/n-result', component: result },
-      { path: '/n-thing', component: thing },
-      { path: '/n-auto-complete', component: autoComplete },
-      { path: '/n-empty', component: empty },
-      { path: '/n-theme', component: theme },
-      { path: '/n-element', component: element },
-      { path: '/n-log', component: log },
-      { path: '/n-code', component: code },
-      { path: '/n-typography', component: typography },
-      { path: '/n-upload', component: upload },
-      { path: '/n-table', component: table },
      {
-        path: '/n-icon-transition-debug',
-        component: iconTransitionDebug
-      },
-      { path: '/n-select-debug', component: selectDebug }
-    ])
+        path: '/:lang/:theme/doc',
+        component: DocEntry,
+        children: withPrefix('/:lang/:theme/doc', [
+          { path: '/intro', component: intro },
+          { path: '/start', component: start },
+          { path: '/dev-guildlines', component: devGuildlines },
+          { path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
+          { path: '/n-layout', component: layout },
+          { path: '/n-gradient-text', component: gradientText },
+          {
+            path: '/n-icon',
+            component: () => import('./documentation/components/icon')
+          },
+          { path: '/n-checkbox', component: checkbox },
+          { path: '/n-button', component: button },
+          { path: '/n-switch', component: nswitch },
+          // { path: '/n-table', component: tableDemo },
+          { path: '/n-data-table', component: dataTable },
+          { path: '/n-input', component: input },
+          { path: '/n-select', component: select },
+          { path: '/n-cascader', component: cascader },
+          { path: '/n-custom-input', component: customInput },
+          { path: '/n-modal', component: modal },
+          { path: '/n-message', component: message },
+          { path: '/n-tooltip', component: tooltip },
+          { path: '/n-popover', component: popover },
+          { path: '/n-notification', component: notification },
+          { path: '/n-pagination', component: pagination },
+          { path: '/n-alert', component: alert },
+          { path: '/n-date-picker', component: datePicker },
+          { path: '/n-input-number', component: inputNumber },
+          { path: '/n-radio', component: radio },
+          { path: '/n-form', component: form },
+          { path: '/n-tabs', component: tabs },
+          { path: '/n-time-picker', component: timePicker },
+          { path: '/n-confirm', component: confirm },
+          { path: '/n-router-debug', component: routerDebug },
+          { path: '/n-modal-debug', component: modalDebug },
+          { path: '/n-scrollbar-debug', component: scrollbarDebug },
+          { path: '/n-badge', component: badge },
+          { path: '/n-steps', component: steps },
+          { path: '/n-collapse', component: collapse },
+          { path: '/n-progress', component: progress },
+          { path: '/n-tag', component: tag },
+          { path: '/n-menu', component: menu },
+          { path: '/n-timeline', component: timeline },
+          { path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
+          { path: '/n-back-top', component: backTop },
+          { path: '/n-date-picker-debug', component: datePickerDebug },
+          { path: '/n-divider', component: divider },
+          { path: '/n-popconfirm', component: popconfirm },
+          { path: '/n-anchor', component: anchor },
+          { path: '/n-dropdown', component: dropdown },
+          { path: '/n-popselect', component: popselect },
+          { path: '/n-config-provider', component: configProvider },
+          { path: '/n--debug', component: suffixDebug },
+          { path: '/n-transfer', component: transfer },
+          { path: '/n-spin', component: spin },
+          { path: '/n-drawer', component: drawer },
+          { path: '/n-loading-bar', component: loadingBar },
+          { path: '/n-time', component: time },
+          { path: '/n-slider', component: slider },
+          { path: '/n-tree', component: tree },
+          { path: '/n-vertical-align-debug', component: verticalAlignDebug },
+          { path: '/n-affix', component: affix },
+          { path: '/n-statistic', component: statistic },
+          { path: '/n-grid', component: grid },
+          { path: '/n-breadcrumb', component: breadcrumb },
+          { path: '/n-config-consumer', component: configConsumer },
+          { path: '/n-descriptions', component: descriptions },
+          { path: '/n-list', component: list },
+          { path: '/n-card', component: card },
+          { path: '/n-avatar', component: avatar },
+          { path: '/n-result', component: result },
+          { path: '/n-thing', component: thing },
+          { path: '/n-auto-complete', component: autoComplete },
+          { path: '/n-empty', component: empty },
+          { path: '/n-theme', component: theme },
+          { path: '/n-element', component: element },
+          { path: '/n-log', component: log },
+          { path: '/n-code', component: code },
+          { path: '/n-typography', component: typography },
+          { path: '/n-upload', component: upload },
+          { path: '/n-table', component: table },
+          {
+            path: '/n-icon-transition-debug',
+            component: iconTransitionDebug
+          },
+          { path: '/n-select-debug', component: selectDebug }
+        ])
+      }
+    ]
  },
  {
    path: '/*',
-    redirect: '/zh-CN/light/start'
+    redirect: '/zh-CN/light'
  }
 ]

--- a/demo/menuOptions.js
+++ b/demo/menuOptions.js
--- a/demo/utils/ComponentDocumentation.vue
+++ b/demo/utils/ComponentDocumentation.vue
@ -12,12 +12,12 @@ export default {
    }
  },
  mounted () {
-    const paramsRegex = /\/([^/]+)\/([^/]+)\/([^/]+)/
+    const paramsRegex = /\/([^/]+)\/([^/]+)\/([^/]+)\/([^/]+)/
    if (this.NDocRoot.memorizedPath) {
      const memorizedPath = this.NDocRoot.memorizedPath
      const currentPath = this.$route.path
-      const memorizedDemoName = (paramsRegex.exec(memorizedPath) || [])[3]
-      const currentDemoName = (paramsRegex.exec(currentPath) || [])[3]
+      const memorizedDemoName = (paramsRegex.exec(memorizedPath) || [])[4]
+      const currentDemoName = (paramsRegex.exec(currentPath) || [])[4]
      if (
        memorizedDemoName &&
        currentDemoName &&
--- a/src/Button/src/Button.vue
+++ b/src/Button/src/Button.vue
@ -19,6 +19,7 @@
    :tabindex="syntheticFocusable ? 0 : -1"
    @click="handleClick"
    @blur="handleBlur"
+    @mousedown="handleMouseDown"
    @keyup.enter="handleKeyUpEnter"
    @keydown.enter="handleKeyDownEnter"
  >
@ -37,7 +38,7 @@
            :style="{
              transition: hollowOutColorTransitionDisabled ? 'none' : null
            }"
-            :stroke="simulateHollowOut ? ascendantBackgroundColor : null"
+            :stroke="hollowText ? ascendantBackgroundColor : null"
            :stroke-width="24"
          />
          <n-icon
@ -45,8 +46,8 @@
            key="icon"
            :style="{
              transition: hollowOutColorTransitionDisabled ? 'none' : null,
-              fill: simulateHollowOut ? ascendantBackgroundColor : null,
-              stroke: simulateHollowOut ? ascendantBackgroundColor : null
+              fill: hollowText ? ascendantBackgroundColor : null,
+              stroke: hollowText ? ascendantBackgroundColor : null
            }"
            class="n-icon-slot"
          >
@ -62,7 +63,7 @@
      class="n-button__content"
      :style="{
        transition: hollowOutColorTransitionDisabled ? 'none' : null,
-        color: simulateHollowOut ? ascendantBackgroundColor : null
+        color: hollowText ? ascendantBackgroundColor : null
      }"
    >
      <slot />
@ -83,7 +84,7 @@
            :style="{
              transition: hollowOutColorTransitionDisabled ? 'none' : null
            }"
-            :stroke="simulateHollowOut ? ascendantBackgroundColor : null"
+            :stroke="hollowText ? ascendantBackgroundColor : null"
            :stroke-width="24"
          />
          <n-icon
@ -92,8 +93,8 @@
            class="n-icon-slot"
            :style="{
              transition: hollowOutColorTransitionDisabled ? 'none' : null,
-              fill: simulateHollowOut ? ascendantBackgroundColor : null,
-              stroke: simulateHollowOut ? ascendantBackgroundColor : null
+              fill: hollowText ? ascendantBackgroundColor : null,
+              stroke: hollowText ? ascendantBackgroundColor : null
            }"
          >
            <slot
@ -214,19 +215,11 @@ export default {
      return (
        this.text ||
        this.ghost ||
-        !['primary', 'link', 'info', 'success', 'warning', 'error'].includes(
-          this.type
-        )
+        this.type === 'default'
      )
    },
-    simulateHollowOut () {
-      if (this.ghost) return false
-      if (this.text) return false
-      if (
-        ['primary', 'link', 'info', 'success', 'warning', 'error'].includes(
-          this.type
-        )
-      ) { return true } else return false
+    hollowText () {
+      return !this.avoidHollowOut
    },
    syntheticFocusable () {
      return this.focusable && !this.disabled
@ -238,23 +231,17 @@ export default {
      return this.iconPlacement === 'right'
    }
  },
-  watch: {
-    type (value) {
-      if (
-        ['primary', 'link', 'info', 'success', 'warning', 'error'].includes(
-          value
-        )
-      ) {
-        if (!this.cssNode) {
-          // TODO: something
-        }
-      }
-    }
-  },
  beforeDestroy () {
    window.clearTimeout(this.rippleTimer)
  },
  methods: {
+    handleMouseDown (e) {
+      if (this.disabled) return
+      if (this.syntheticFocusable) {
+        e.preventDefault()
+        this.$el.focus()
+      }
+    },
    handleClick (e) {
      if (!this.disabled) {
        this.$emit('click', e)
--- a/src/DatePicker/src/DatePicker.vue
+++ b/src/DatePicker/src/DatePicker.vue
@ -81,7 +81,7 @@
          :is-date-disabled="isDateDisabled"
          :is-time-disabled="isTimeDisabled"
          :format="computedFormat"
-          @blur="handlePanelTabOut"
+          @tab-out="handlePanelTabOut"
          @input="handlePanelInput"
          @close="handlePanelClose"
        />
@ -95,7 +95,7 @@
          :theme="syntheticTheme"
          :is-date-disabled="isDateDisabled"
          @input="handlePanelInput"
-          @blur="handlePanelTabOut"
+          @tab-out="handlePanelTabOut"
          @close="handlePanelClose"
        />
        <daterange-panel
@ -108,7 +108,7 @@
          :theme="syntheticTheme"
          :is-date-disabled="isDateDisabled"
          @input="handleRangePanelInput"
-          @blur="handlePanelTabOut"
+          @tab-out="handlePanelTabOut"
          @close="handlePanelClose"
          @check-value="setInvalidStatus"
        />
@ -125,7 +125,7 @@
          :is-time-disabled="isTimeDisabled"
          @input="handleRangePanelInput"
          @close="handlePanelClose"
-          @blur="handlePanelTabOut"
+          @tab-out="handlePanelTabOut"
          @check-value="setInvalidStatus"
        />
      </div>
@ -336,9 +336,6 @@ export default {
      this.$emit('change', null)
      this.refresh(null)
    },
-    /**
-     * this blur is not really blur event, its key tab out of panel
-     */
    handlePanelTabOut () {
      this.closeCalendar({
        returnFocus: true,
@ -510,13 +507,8 @@ export default {
      emitBlur
    }) {
      if (this.active) {
-        console.log('closeCalendar', {
-          returnFocus,
-          emitBlur
-        })
        this.active = false
        if (returnFocus) {
-          console.log('returnFocus', this.$refs.input)
          if (this.$refs.input) {
            this.$refs.input.focus()
          }
--- a/src/DatePicker/src/panel/commonCalendarMixin.js
+++ b/src/DatePicker/src/panel/commonCalendarMixin.js
@ -1,6 +1,8 @@
 import clickoutside from '../../../_directives/clickoutside'
 import focusDetector from '../../../_base/FocusDetector'
 import locale from '../../../_mixins/locale'
+import keyboardDelegate from '../../../_utils/delegate/keyboardDelegate'
+import { KEY_CODE } from '../../../_utils/event/keyCode'

 const TIME_CONST = {
  hours: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
@ -42,8 +44,8 @@ export default {
    clearValue () {
      this.$emit('input', null)
    },
-    handleBlur (e) {
-      this.$emit('blur', e)
+    handleFocusDetectorFocus (e) {
+      this.$emit('tab-out', e)
    },
    disableTransitionOneTick () {
      if (this.active) {
@ -57,6 +59,24 @@ export default {
      } else {
        this.noTransition = false
      }
+    },
+    handlePanelKeyDown (e) {
+      if (
+        e.keyCode === KEY_CODE.TAB &&
+        e.target === this.$el &&
+        keyboardDelegate.shiftPressed
+      ) {
+        e.preventDefault()
+        this.$emit('tab-out')
+      }
+    },
+    handlePanelFocus (e) {
+      if (
+        e.target === this.$el &&
+        this.$el.contains(e.relatedTarget)
+      ) {
+        this.$emit('tab-out')
+      }
    }
  }
 }
--- a/src/DatePicker/src/panel/date.vue
+++ b/src/DatePicker/src/panel/date.vue
@ -9,6 +9,8 @@
        [`n-${theme}-theme`]: theme
      }"
      @click.prevent="() => {}"
+      @focus="handlePanelFocus"
+      @keydown="handlePanelKeyDown"
    >
      <div style="width: 100%; height: 12px" />
      <div class="n-date-panel-month">
@ -102,7 +104,7 @@
          {{ localeNamespace.confirm }}
        </n-button>
      </div>
-      <focus-detector @focus="handleBlur" />
+      <focus-detector @focus="handleFocusDetectorFocus" />
    </div>
  </transition>
 </template>
--- a/src/DatePicker/src/panel/daterange.vue
+++ b/src/DatePicker/src/panel/daterange.vue
@ -9,6 +9,8 @@
        [`n-${theme}-theme`]: theme
      }"
      @click.capture="resetSelectingStatus"
+      @keydown="handlePanelKeyDown"
+      @focus="handlePanelFocus"
    >
      <div
        ref="startDates"
@ -168,7 +170,7 @@
          {{ localeNamespace.confirm }}
        </n-button>
      </div>
-      <focus-detector @focus="handleBlur" />
+      <focus-detector @focus="handleFocusDetectorFocus" />
    </div>
  </transition>
 </template>
--- a/src/DatePicker/src/panel/datetime.vue
+++ b/src/DatePicker/src/panel/datetime.vue
@ -8,6 +8,8 @@
      :class="{
        [`n-${theme}-theme`]: theme
      }"
+      @keydown="handlePanelKeyDown"
+      @focus="handlePanelFocus"
    >
      <div
        class="n-date-panel-input-wrapper"
@ -126,7 +128,7 @@
          {{ localeNamespace.confirm }}
        </n-button>
      </div>
-      <focus-detector @focus="handleBlur" />
+      <focus-detector @focus="handleFocusDetectorFocus" />
    </div>
  </transition>
 </template>
--- a/src/DatePicker/src/panel/datetimerange.vue
+++ b/src/DatePicker/src/panel/datetimerange.vue
@ -9,6 +9,8 @@
        [`n-${theme}-theme`]: theme
      }"
      @click.capture="resetSelectingStatus"
+      @keydown="handlePanelKeyDown"
+      @focus="handlePanelFocus"
    >
      <div
        class="n-date-panel-input-wrapper"
@ -241,7 +243,7 @@
        v-else
        style="height: 12px"
      />
-      <focus-detector @focus="handleBlur" />
+      <focus-detector @focus="handleFocusDetectorFocus" />
    </div>
  </transition>
 </template>
--- a/src/Input/src/Input.vue
+++ b/src/Input/src/Input.vue
@ -212,8 +212,7 @@ export default {
      focused: false,
      hover: false,
      isComposing: false,
-      inputFocused: false,
-      waitingBlurCallback: false
+      inputFocused: false
    }
  },
  computed: {
--- a/src/Menu/src/MenuItemContent.vue
+++ b/src/Menu/src/MenuItemContent.vue
@ -28,7 +28,7 @@
        <render :render="title" />
      </slot>
      <slot name="header-extra">
-        <span class="n-menu-item-content-header__extra">
+        <span v-if="titleExtra" class="n-menu-item-content-header__extra">
          <render v-if="titleExtra" :render="titleExtra" />
        </span>
      </slot>
--- a/src/TimePicker/src/main.vue
+++ b/src/TimePicker/src/main.vue
@ -44,6 +44,7 @@
            :class="{
              [`n-${syntheticTheme}-theme`]: syntheticTheme
            }"
+            @focus="handleMenuFocus"
            @keydown="handleMenuKeyDown"
          >
            <div class="n-time-picker-selector-time">
@ -571,6 +572,18 @@ export default {
        returnFocus: true,
        emitBlur: false
      })
+    },
+    handleMenuFocus (e) {
+      const panel = this.$refs.panel
+      if (
+        e.target === panel &&
+        panel.contains(e.relatedTarget)
+      ) {
+        this.closeTimeSelector({
+          returnFocus: true,
+          emitBlur: false
+        })
+      }
    }
  }
 }
--- a/src/Typography/src/getTheme.js
+++ b/src/Typography/src/getTheme.js
@ -1,6 +1,8 @@
 function getTheme (cursor) {
  while (cursor) {
-    if (cursor.syntheticTheme) return cursor.syntheticTheme
+    if (cursor.syntheticTheme) {
+      return cursor.syntheticTheme
+    }
    cursor = cursor.$parent
  }
  return null
--- a/src/Typography/src/header.js
+++ b/src/Typography/src/header.js
@ -23,8 +23,8 @@ export default level => ({
    const theme = getTheme(context.parent)
    const defaultSlot = context.slots.default || (context.scopedSlots.default && context.scopedSlots.default())
    return h(`h${level}`, {
-      staticClass: `n-h${level}`,
      class: {
+        [`n-h${level}`]: true,
        [`n-${theme}-theme`]: theme,
        [`n-h${level}--${props.type}-type`]: props.type,
        [`n-h${level}--prefix-bar`]: props.prefix,
--- a/src/_mixins/hollowoutable.js
+++ b/src/_mixins/hollowoutable.js
@ -14,7 +14,7 @@ function createDiffedStyleObject (style, computedStyle) {
  for (const key of Object.keys(style)) {
    if (~key.indexOf('ransition')) continue
    if (computedStyle[key] !== style[key]) {
-      diffedStyle[key] = style[key]
+      diffedStyle[key] = computedStyle[key]
    }
  }
  return diffedStyle
@ -25,18 +25,27 @@ function getNextBackgroundColorOf (el) {
  const prevStyle = createStyleObject(computedStyle)
  const memorizedTransition = el.style.transition
  const memorizedBackgroundColor = el.style.backgroundColor
+  /** Switch to target background */
  el.style.transition = 'none'
  const nextBackgroundColor = computedStyle.backgroundColor
  const diffedStyle = createDiffedStyleObject(prevStyle, computedStyle)
  const memorizedInlineStyle = {}
-  for (const key of Object.keys(diffedStyle)) {
-    if (~key.indexOf('ransition')) continue
+  const diffedKeys = Object.keys(diffedStyle)
+  for (const key of diffedKeys) {
    memorizedInlineStyle[key] = el.style[key]
+  }
+  for (const key of diffedKeys) {
    el.style[key] = diffedStyle[key]
  }
+  /** Restore previous styles */
+  for (const key of diffedKeys) {
+    el.style[key] = prevStyle[key]
+  }
  void (el.offsetHeight)
-  for (const key of Object.keys(diffedStyle)) {
-    if (~key.indexOf('ransition')) continue
+  for (const key of diffedKeys) {
+    el.style[key] = ''
+  }
+  for (const key of Object.keys(memorizedInlineStyle)) {
    el.style[key] = memorizedInlineStyle[key]
  }
  el.style.transition = memorizedTransition
--- a/src/_mixins/withlightbar.js
+++ b/src/_mixins/withlightbar.js
@ -1,38 +0,0 @@
-export default {
-  data () {
-    return {
-      showLightBar: false,
-      lightBarTop: 0,
-      lightBarVanishTimerId: null
-    }
-  },
-  computed: {
-    lightBarStyleTop () {
-      return this.lightBarTop + 'px'
-    }
-  },
-  beforeDestory () {
-    window.clearTimeout(this.lightBarVanishTimerId)
-  },
-  methods: {
-    updateLightBarPosition (el) {
-      if (this.active) {
-        if (this.lightBarVanishTimerId) {
-          window.clearTimeout(this.lightBarVanishTimerId)
-          this.lightBarVanishTimerId = null
-        }
-        this.showLightBar = true
-        this.lightBarTop = el.offsetTop
-      }
-    },
-    hideLightBar (delay = 80) {
-      window.clearTimeout(this.lightBarVanishTimerId)
-      this.lightBarVanishTimerId = window.setTimeout(() => {
-        this.showLightBar = false
-      }, delay)
-    },
-    hideLightBarSync () {
-      this.showLightBar = false
-    }
-  }
-}
--- a/src/_mixins/withsecondlightbar.js
+++ b/src/_mixins/withsecondlightbar.js
@ -1,35 +0,0 @@
-export default {
-  data () {
-    return {
-      showSecondLightBar: false,
-      secondLightBarTop: 0,
-      secondLightBarVanishTimerId: null
-    }
-  },
-  computed: {
-    secondLightBarStyleTop () {
-      return this.secondLightBarTop + 'px'
-    }
-  },
-  beforeDestory () {
-    window.clearTimeout(this.secondLightBarVanishTimerId)
-  },
-  methods: {
-    updateSecondLightBarPosition (el) {
-      if (this.active) {
-        if (this.secondLightBarVanishTimerId) {
-          window.clearTimeout(this.secondLightBarVanishTimerId)
-          this.secondLightBarVanishTimerId = null
-        }
-        this.showSecondLightBar = true
-        this.secondLightBarTop = el.offsetTop
-      }
-    },
-    hideSecondLightBar (delay = 100) {
-      window.clearTimeout(this.secondLightBarVanishTimerId)
-      this.secondLightBarVanishTimerId = window.setTimeout(() => {
-        this.showSecondLightBar = false
-      }, delay)
-    }
-  }
-}
--- a/styles/Alert.scss
+++ b/styles/Alert.scss
@ -64,7 +64,7 @@
          transition: color .3s $--n-ease-in-out-cubic-bezier;
          font-size: 16px;
          line-height: 19px;
-          font-weight: 500;
+          font-weight: $--n-strong-weight;
          & + {
            @include e(content) {
              margin-top: 9px;
--- a/styles/Badge.scss
+++ b/styles/Badge.scss
@ -145,7 +145,7 @@
      transform: translateX(-50%);
      left: 100%;
      bottom: calc(100% - 9px);
-      font-weight: 500;
+      font-weight: $--n-strong-weight;
      @include e(ripple-mask) {
        position: absolute;
        top: 0;
--- a/styles/Button.scss
+++ b/styles/Button.scss
@ -69,7 +69,7 @@
    }
    @include m(text) {
      padding: 0;
-      font-weight: 500;
+      font-weight: $--n-strong-weight;
      border-radius: 0;
    }
  }
--- a/styles/Card.scss
+++ b/styles/Card.scss
@ -152,7 +152,7 @@
        }
        @include e(main) {
          @include once {
-            font-weight: 500;
+            font-weight: $--n-strong-weight;
            font-size: 18px;
            transition: color .3s $--n-ease-in-out-cubic-bezier;
            flex: 1;
--- a/styles/Code.scss
+++ b/styles/Code.scss
@ -88,7 +88,7 @@
    }
  
    .hljs-strong {
-      font-weight: 500;
+      font-weight: $--n-strong-weight;
    }
  
    .hljs-link {
@ -168,7 +168,7 @@
      font-style: italic;
    }
    .hljs-strong {
-      font-weight: 500;
+      font-weight: $--n-strong-weight;
    }
    .hljs-link {
      text-decoration: underline;
--- a/styles/Confirm.scss
+++ b/styles/Confirm.scss
@ -32,7 +32,7 @@
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
-        font-weight: 500;
+        font-weight: $--n-strong-weight;
        @include b(confirm-title-icon) {
          vertical-align: middle;
          margin-right: 8px;
--- a/styles/DataTable.scss
+++ b/styles/DataTable.scss
@ -123,7 +123,7 @@
          position: relative;
          padding: 10px 10px 10px 16px;
          text-align: left;
-          font-weight: 500;
+          font-weight: $--n-strong-weight;
          box-sizing: border-box;
          transition:
            border-color .3s $--n-ease-in-out-cubic-bezier,
--- a/styles/DatePicker.scss
+++ b/styles/DatePicker.scss
@ -135,7 +135,7 @@
      @include e(month-year) {
        @include once {
          font-size: 14px;
-          font-weight: 500;
+          font-weight: $--n-strong-weight;
          line-height: 17px;
          flex-grow: 1;
          text-align: center;
--- a/styles/Descriptions.scss
+++ b/styles/Descriptions.scss
@ -109,7 +109,7 @@
    }
    @include b(descriptions-header) {
      @include once {
-        font-weight: 500;
+        font-weight: $--n-strong-weight;
        font-size: 18px;
        transition: color .3s $--n-ease-in-out-cubic-bezier;
      }
@ -133,7 +133,7 @@
          }
          @include b(descriptions-table-header) {
            @include once {
-              font-weight: 500;
+              font-weight: $--n-strong-weight;
              line-height: 1.75;
              display: table-cell;
              box-sizing: border-box;
@ -152,7 +152,7 @@
            @include e(label) {
              color: $--descriptions-header-text-color;
              @include once {
-                font-weight: 500;
+                font-weight: $--n-strong-weight;
                transition: color .3s $--n-ease-in-out-cubic-bezier;
                display: inline-block;
                margin-right: 14px;
--- a/styles/Divider.scss
+++ b/styles/Divider.scss
@ -24,7 +24,7 @@
        margin-left: 12px;
        margin-right: 12px;
        white-space: nowrap;
-        font-weight: 500;
+        font-weight: $--n-strong-weight;
      }
      @include m(title-position-left) {
        @include e(line) {
--- a/styles/GradientText.scss
+++ b/styles/GradientText.scss
@ -10,7 +10,7 @@
  @include b(gradient-text) {
    @include once {
      display: inline-block;
-      font-weight: 500;
+      font-weight: $--n-strong-weight;
      font-size: inherit;
      background-clip: text;
      color: transparent;
--- a/styles/Layout.scss
+++ b/styles/Layout.scss
@ -10,7 +10,10 @@
      z-index: auto;
      display: flex;
      flex-wrap: nowrap;
-      transition: margin-left .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
+      transition:
+        margin-left .3s $--n-ease-in-out-cubic-bezier,
+        background-color .3s $--n-ease-in-out-cubic-bezier,
+        color .3s $--n-ease-in-out-cubic-bezier;
      flex-direction: column;
      overflow: auto;
      @include m(has-sider) {
@ -35,7 +38,9 @@
  }
  @include b(layout-header) {
    @include once {
-      transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
+      transition:
+        background-color .3s $--n-ease-in-out-cubic-bezier,
+        border-color .3s $--n-ease-in-out-cubic-bezier;
      box-sizing: border-box;
      width: 100%;
      @include m(absolute-positioned) {
@ -56,11 +61,16 @@
      z-index: auto;
      position: relative;
    }
-    transition: margin-left .3s $--n-ease-in-out-cubic-bezier;
+    transition:
+      margin-left .3s $--n-ease-in-out-cubic-bezier,
+      background-color .3s $--n-ease-in-out-cubic-bezier,
+      color .3s $--n-ease-in-out-cubic-bezier;
  }
  @include b(layout-footer) {
    @include once {
-      transition: border-color .3s $--n-ease-in-out-cubic-bezier;
+      transition:
+        background-color .3s $--n-ease-in-out-cubic-bezier,
+        border-color .3s $--n-ease-in-out-cubic-bezier;
      box-sizing: border-box;
      @include m(absolute-positioned) {
        position: absolute;
@ -78,7 +88,12 @@
      box-sizing: border-box;
      z-index: auto;
      position: relative;
-      transition: min-width .3s  $--n-ease-in-out-cubic-bezier, max-width .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
+      transition:
+        min-width .3s  $--n-ease-in-out-cubic-bezier,
+        max-width .3s $--n-ease-in-out-cubic-bezier,
+        transform .3s $--n-ease-in-out-cubic-bezier,
+        background-color .3s $--n-ease-in-out-cubic-bezier,
+        border-color .3s $--n-ease-in-out-cubic-bezier;
    }  
    background-color: $--layout-sider-background-color;
    @include e(toggle-button) {
--- a/styles/Menu.scss
+++ b/styles/Menu.scss
@ -85,10 +85,14 @@
        padding: 0;
        @include b(menu-item) {
          list-style: none;
+          height: 48px;
        }
        @include b(submenu) {
          cursor: pointer;
          position: relative; 
+          @include b(menu-item-content) {
+            height: 48px;
+          }
          @include b(submenu-content) {
            padding: 0;
            list-style: none;
@ -100,7 +104,7 @@
        @include once {
          box-sizing: border-box;
          line-height: 1.75;
-          height: 48px;
+          height: 100%;
          display: flex;
          align-items: center;
          cursor: pointer;
--- a/styles/Notification.scss
+++ b/styles/Notification.scss
@ -145,7 +145,7 @@
      }
      @include e(header) {
        @include once {
-          font-weight: 500;
+          font-weight: $--n-strong-weight;
          font-size: 16px;
          transition: color .3s $--n-ease-in-out-cubic-bezier;
        }
--- a/styles/Popselect.scss
+++ b/styles/Popselect.scss
@ -1,7 +1,7 @@
@import './mixins/mixins.scss';

@include b(popselect) {
-  @include b(popover-content) {
+  @include b(base-select-menu) {
    box-shadow: none !important;
  }
 }
--- a/styles/Progress.scss
+++ b/styles/Progress.scss
@ -142,7 +142,7 @@
        }
        @include b(progress-text) {
          white-space: nowrap;
-          font-weight: 500;
+          font-weight: $--n-strong-weight;
          transition: color .3s $--n-ease-in-out-cubic-bezier;
          @include e(percentage) {
            color: inherit;
@ -216,7 +216,7 @@
              transition: color .3s $--n-ease-in-out-cubic-bezier;
              white-space: nowrap;
              text-align: right;
-              font-weight: 500;
+              font-weight: $--n-strong-weight;
              margin-left: 14px;
              margin-right: 14px; 
              height: 21px;
@ -248,7 +248,7 @@
              border-radius: 10.5px;
              position: absolute;
              white-space: nowrap;
-              font-weight: 500;
+              font-weight: $--n-strong-weight;
              font-size: 14px;
            }
            color: map-get($--progress-indicator-text-color, 'inside');
--- a/styles/Result.scss
+++ b/styles/Result.scss
@ -42,7 +42,7 @@
        @include once {
          margin-top: 16px;
          font-size: 32px;
-          font-weight: 500;
+          font-weight: $--n-strong-weight;
          transition: color .3s $--n-ease-in-out-cubic-bezier;
          text-align: center;
        }
--- a/styles/Statistic.scss
+++ b/styles/Statistic.scss
@ -5,7 +5,7 @@
    @include b(statistic-value) {
      @include once {
        margin-top: 4px;
-        font-weight: 500;
+        font-weight: $--n-strong-weight;
      }
      @include e(prefix) {
        @include once {
@ -45,7 +45,7 @@
    }
    @include e(label) {
      @include once {
-        font-weight: 500;
+        font-weight: $--n-strong-weight;
        transition: .3s color $--n-ease-in-out-cubic-bezier;
        font-size: 14px;
      }
--- a/styles/Steps.scss
+++ b/styles/Steps.scss
@ -93,7 +93,7 @@
          transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
          position: relative;
          display: flex;
-          font-weight: 500;
+          font-weight: $--n-strong-weight;
          margin-left: 9px;
          @include e(title) {
            white-space: nowrap;
--- a/styles/Table.scss
+++ b/styles/Table.scss
@ -30,7 +30,7 @@
        vertical-align: inherit;
        text-transform: none;
        border: none;
-        font-weight: 500;
+        font-weight: $--n-strong-weight;
      }
      color: $--table-header-text-color;
      background-color: $--table-header-background-color;
--- a/styles/Tabs.scss
+++ b/styles/Tabs.scss
@ -76,7 +76,7 @@
    @include b(tabs-label-wrapper) {
      @include once {
        display: inline-block;
-        font-weight: 500;
+        font-weight: $--n-strong-weight;
        white-space: nowrap;
        position: relative;
      }
--- a/styles/Thing.scss
+++ b/styles/Thing.scss
@ -24,7 +24,7 @@
          margin-bottom: 4px;
          @include e(title) {
            font-size: 16px;
-            font-weight: 500;
+            font-weight: $--n-strong-weight;
            transition: color .3s $--n-ease-in-out-cubic-bezier;
          }
          justify-content: space-between;
--- a/styles/Timeline.scss
+++ b/styles/Timeline.scss
@ -78,7 +78,7 @@
          @include once {
            transition: color .3s $--n-ease-in-out-cubic-bezier;
            font-size: 14px;
-            font-weight: 500;
+            font-weight: $--n-strong-weight;
            margin-bottom: 6px;
          }
          color: $--timeline-item-title-color;
--- a/styles/Transfer.scss
+++ b/styles/Transfer.scss
@ -115,7 +115,7 @@
            flex: 1;
            line-height: 1;
            font-size: 14px;
-            font-weight: 500;
+            font-weight: $--n-strong-weight;
            transition: color .3s $--n-ease-in-out-cubic-bezier;
          }
          color: map-get($--transfer-list-header-text-color, 'default');
--- a/styles/Typography.scss
+++ b/styles/Typography.scss
@ -4,7 +4,7 @@
  @include b('h' + $level) {
    @include once {
      font-size: map-get($--n-typography-header-font-size, $level);
-      font-weight: 500; 
+      font-weight: $--n-strong-weight; 
      margin: map-get($--n-typography-header-margin, $level);
      transition: color .3s $--n-ease-in-out-cubic-bezier;
      &:first-child {
@ -148,7 +148,7 @@
      display: inline-block;
      transition: color .3s $--n-ease-in-out-cubic-bezier;
      @include m(strong) {
-        font-weight: 500;
+        font-weight: $--n-strong-weight;
      }
      @include m(italic) {
        font-style: italic;
--- a/styles/base.scss
+++ b/styles/base.scss
@ -1,5 +1,6 @@
@import './fonts/FiraCode.scss';
@import './fonts/FiraSans.scss';
+@import './fonts/Metropolis.scss';
@import './themes/common.scss';
@import './themes/light/index.scss';
@import './mixins/mixins.scss';
--- a/styles/fonts/FiraSans.scss
+++ b/styles/fonts/FiraSans.scss
@ -6,6 +6,6 @@

@font-face {
  font-family: 'FiraSans';
-  font-weight: 500;
+  font-weight: 600;
  src: url('./resources/fonts/FiraSans-Medium.woff2');
 }
--- a/styles/fonts/Metropolis.scss
+++ b/styles/fonts/Metropolis.scss
@ -0,0 +1,5 @@
+@font-face {
+  font-family: 'Metropolis';
+  font-weight: 700;
+  src: url('./resources/fonts/Metropolis-Bold.woff2');
+}
--- a/styles/fonts/OpenSans.scss
+++ b/styles/fonts/OpenSans.scss
@ -6,6 +6,6 @@

@font-face {
  font-family: 'Open Sans';
-  font-weight: 500;
+  font-weight: 600;
  src: url('./resources/fonts/OpenSans-SemiBold.ttf');
 }
--- a/styles/resources/fonts/Metropolis-Bold.woff2
+++ b/styles/resources/fonts/Metropolis-Bold.woff2
--- a/styles/themes/common.scss
+++ b/styles/themes/common.scss
@ -1,6 +1,8 @@
 $--n-font-family: 'FiraSans';
 $--n-mono-font-family: 'FiraCode', monospace;

+$--n-strong-weight: 600;
+
 $--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
 $--n-ease-out-cubic-bezier: cubic-bezier(0, 0, .2, 1);
 $--n-ease-in-cubic-bezier: cubic-bezier(.4, 0, 1, 1);