Merge pull request #290 from wanli-song/upstream-develop

feat(slider, pagination): css in js

src/Pagination/index.js

@@ -1,7 +0,0 @@
-import Pagination from './src/main.vue'
-
-Pagination.install = function (Vue) {
-  Vue.component(Pagination.name, Pagination)
-}
-
-export default Pagination

src/Pagination/tests/main.spec.js

@@ -1,21 +0,0 @@
-import { expect } from 'chai'
-import { mount } from '@vue/test-utils'
-import Pagination from '../src/main.vue'
-
-describe('n-pagination', () => {
-  describe('props.page', () => {
-    it('should work', () => {
-      const wrapper = mount(Pagination, {
-        propsData: {
-          page: 5,
-          pageCount: 10
-        }
-      })
-      expect(
-        wrapper
-          .find('.n-pagination-item--active')
-          .text()
-      ).to.equal('5')
-    })
-  })
-})

src/Slider/index.js

@@ -1,8 +0,0 @@
-/* istanbul ignore file */
-import Scaffold from './src/main.vue'
-
-Scaffold.install = function (Vue) {
-  Vue.component(Scaffold.name, Scaffold)
-}
-
-export default Scaffold

src/_styles/index.scss

@@ -10,10 +10,18 @@
 @import './DatePicker.scss';
 @import './Descriptions.scss';
 @import './Form.scss';
-@import './Pagination.scss';
+// @import './Grid.scss';
+// @import './Message.scss';
+// @import './Layout.scss';
+// @import './Notification.scss';
+// @import './Pagination.scss';
+@import './Popconfirm.scss';
 @import './Popover.scss';
 @import './Popselect.scss';
-@import './Slider.scss';
+@import './Radio.scss';
+// @import './Slider.scss';
+@import './Steps.scss';
+// @import './Switch.scss';
 @import './Table.scss';
 @import './Tabs.scss';
 @import './TimePicker.scss';

src/data-table/src/DataTable.vue

@@ -69,7 +69,7 @@ import locale from '../../_mixins/locale'
 import { setCheckStatusOfRow, createRowKey } from './utils'
 import BaseTable from './BaseTable.vue'
 import NEmpty from '../../empty'
-import NPagination from '../../Pagination'
+import NPagination from '../../pagination'
 import formatLength from '../../_utils/css/formatLength'
 import isPlainObject from 'lodash-es/isPlainObject'
 import styles from './styles'

src/index.js

@@ -42,7 +42,7 @@ import Menu from './menu'
 import Message from './message'
 import Modal from './modal'
 import Notification from './notification'
-import Pagination from './Pagination'
+import Pagination from './pagination'
 import Popconfirm from './popconfirm'
 import Popselect from './popselect'
 import Popup from './Popover'
@@ -51,7 +51,7 @@ import Radio from './radio'
 import Result from './result'
 import Select from './select'
 import Scrollbar from './scrollbar'
-import Slider from './Slider'
+import Slider from './slider'
 import Spin from './spin'
 import Statistic from './statistic'
 import Steps from './steps'
@@ -178,6 +178,10 @@ import layoutDarkStyle from './layout/styles/dark'
 import layoutLightStyle from './layout/styles/light'
 import treeLightStyle from './tree/styles/light'
 import treeDarkStyle from './tree/styles/dark'
+import paginationLightStyle from './pagination/styles/light'
+import paginationDarkStyle from './pagination/styles/dark'
+import sliderLightStyle from './slider/styles/light'
+import sliderDarkStyle from './slider/styles/dark'
 
 // Can be remove after refactoring
 import baseSelectionLightStyle from './_base/selection/styles/light'
@@ -385,6 +389,10 @@ export default create({
     layoutLightStyle,
     treeLightStyle,
     treeDarkStyle,
+    paginationLightStyle,
+    paginationDarkStyle,
+    sliderLightStyle,
+    sliderDarkStyle,
     // Can be remove after refactoring
     baseSelectionLightStyle,
     baseSelectionDarkStyle

src/pagination/index.js

@@ -0,0 +1,7 @@
+import Pagination from './src/Pagination.vue'
+
+Pagination.install = function (Vue, naive) {
+  Vue.component(naive.componentPrefix + Pagination.name, Pagination)
+}
+
+export default Pagination

src/pagination/src/Pagination.vue

@@ -100,15 +100,22 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import locale from '../../_mixins/locale'
 import { pageItems } from './utils'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 export default {
-  name: 'NPagination',
+  name: 'Pagination',
   components: {
     NSelect,
     NInput,
     NBaseIcon
   },
-  mixins: [ withapp, themeable, locale('Pagination') ],
+  mixins: [
+    withapp,
+    themeable,
+    usecssr(styles),
+    locale('Pagination')
+  ],
   model: {
     prop: 'page',
     event: 'change'

src/pagination/src/styles/index.js

@@ -0,0 +1,9 @@
+import baseStyle from './themed-base.cssr.js'
+
+export default [
+  {
+    key: 'syntheticTheme',
+    watch: ['syntheticTheme'],
+    CNode: baseStyle
+  }
+]

src/pagination/src/styles/themed-base.cssr.js

@@ -0,0 +1,175 @@
+import { cTB, c, cB, cE, cM, cNotM } from '../../../_utils/cssr'
+
+export default c([
+  ({ props }) => {
+    const {
+      itemTextColorDefault,
+      itemTextColorHover,
+      itemTextColorActive,
+      itemTextColorDisabled,
+      itemBackgroundColorDefault,
+      itemBackgroundColorActive,
+      itemBackgroundColorDisabled,
+      itemBorderColorDefault,
+      itemBorderColorActive,
+      itemBorderColorDisabled,
+      textColorDisabled,
+      borderRadius
+    } = props.$local
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return cTB('pagination', {
+      raw: `
+        display: flex;
+        vertical-align: middle;
+      `
+    }, [
+      cB('select', {
+        raw: `
+          width: unset;
+        `
+      }),
+      cM('transition-disabled', [
+        cB('pagination-item', {
+          raw: `
+            transition: none;
+          `
+        })
+      ]),
+      cB('pagination-quick-jumper', {
+        raw: `
+          white-space: nowrap;
+          display: flex;
+          width: 110px;
+          line-height: 28px;
+          transition: color .3s ${easeInOutCubicBezier};
+        `,
+        color: itemTextColorDefault
+      }, [
+        cB('input', {
+          raw: `
+            margin: 0 8px;
+          `
+        }, [
+          c('input', {
+            raw: `
+              padding-left: 6px;
+              padding-right: 10px;
+            `
+          })
+        ])
+      ]),
+      cB('pagination-item', {
+        raw: `
+          position: relative;
+          cursor: pointer;
+          user-select: none;
+          min-width:28px;
+          height:28px;
+          padding-left: 4px;
+          padding-right: 4px;
+          box-sizing: border-box;
+          opacity: 1;
+          transition:
+            color .3s ${easeInOutCubicBezier},
+            box-shadow .3s ${easeInOutCubicBezier},
+            background-color .3s ${easeInOutCubicBezier},
+            opacity .3s ${easeInOutCubicBezier},
+            fill .3s ${easeInOutCubicBezier};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: ${borderRadius};
+          line-height: 28px;
+        `,
+        color: itemTextColorDefault,
+        fill: itemTextColorDefault
+      }, [
+        c('&:not(:last-child)', {
+          raw: `
+            margin-right: 8px;
+          `
+        }),
+        cE('more-icon, arrow-icon', {
+          raw: `
+            position: relative;
+            z-index: auto;
+            width: 16px;
+            height: 16px;
+          `
+        }, [
+          cB('base-icon', {
+            raw: `
+              position: absolute;
+              left: 0;
+              right: 0;
+              top: 0;
+              bottom: 0;
+            `
+          })
+        ]),
+        cM('fast-backward, fast-forward', [
+          cE('more-icon', {
+            raw: `
+             display: block;
+            `
+          }),
+          cE('arrow-icon', {
+            raw: `
+             display: none;
+            `
+          })
+        ]),
+        cM('active', {
+          background: itemBackgroundColorActive,
+          color: itemTextColorActive,
+          boxShadow: `inset 0 0 0 1px ${itemBorderColorActive}`
+        }),
+        cM('backward, forward', {
+          backgroundColor: itemBackgroundColorDefault,
+          boxShadow: `inset 0 0 0 1px  ${itemBorderColorDefault}`
+        }),
+        cNotM('disabled', [
+          c('&:hover', {
+            color: itemTextColorHover
+          }, [
+            cM('fast-backward, fast-forward', [
+              cE('more-icon', {
+                raw: `
+                  display: none;
+                `
+              }),
+              cE('arrow-icon', {
+                raw: `
+                  display: block;
+                `
+              })
+            ])
+          ])
+        ]),
+        cM('disabled', {
+          raw: `
+            cursor: not-allowed;
+          `,
+          fill: itemTextColorDisabled,
+          color: itemTextColorDisabled
+        }, [
+          cM('active, backward, forward', {
+            backgroundColor: itemBackgroundColorDisabled,
+            boxShadow: `inset 0 0 0 1px ${itemBorderColorDisabled}`
+          })
+        ])
+      ]),
+      cM('disabled', {
+        raw: `
+          cursor: not-allowed;
+        `
+      }, [
+        cB('pagination-quick-jumper', {
+          color: textColorDisabled
+        })
+      ])
+    ])
+  }
+])

src/pagination/styles/dark.js

@@ -0,0 +1,37 @@
+import create from '../../styles/_utils/create-component-base'
+import { changeColor } from '../../_utils/color/index'
+import suffixStyle from '../../_base/suffix/styles/dark'
+
+export default create({
+  name: 'Pagination',
+  theme: 'dark',
+  peer: [ suffixStyle ],
+  getDerivedVariables ({ base, derived }) {
+    const {
+      secondaryTextOverlayColor,
+      primaryColor,
+      disabledBackgroundColor,
+      disabledTextOverlayColor,
+      borderOverlayColor,
+      tertiaryOpacity
+    } = derived
+    const {
+      borderRadius
+    } = base
+    return {
+      itemTextColorDefault: secondaryTextOverlayColor,
+      itemTextColorHover: primaryColor,
+      itemTextColorActive: primaryColor,
+      itemTextColorDisabled: disabledTextOverlayColor,
+      itemBackgroundColorDefault: 'transparent',
+      itemBackgroundColorActive: 'transparent',
+      itemBackgroundColorDisabled: disabledBackgroundColor,
+      itemBorderColorDefault: borderOverlayColor,
+      itemBorderColorActive: changeColor(primaryColor, { alpha: tertiaryOpacity }),
+      itemBorderColorDisabled: 'transparent',
+      textColorDefault: secondaryTextOverlayColor,
+      textColorDisabled: secondaryTextOverlayColor,
+      borderRadius: borderRadius
+    }
+  }
+})

src/pagination/styles/light.js

@@ -0,0 +1,37 @@
+import create from '../../styles/_utils/create-component-base'
+import suffixStyle from '../../_base/suffix/styles/dark'
+
+export default create({
+  name: 'Pagination',
+  theme: 'light',
+  peer: [ suffixStyle ],
+  getDerivedVariables ({ base, derived }) {
+    const {
+      secondaryTextColor,
+      primaryColor,
+      disabledBackgroundColor,
+      disabledTextColor,
+      cardBackgroundColor,
+      baseBackgroundColor,
+      borderColor
+    } = derived
+    const {
+      borderRadius
+    } = base
+    return {
+      itemTextColorDefault: secondaryTextColor,
+      itemTextColorHover: primaryColor,
+      itemTextColorActive: primaryColor,
+      itemTextColorDisabled: disabledTextColor,
+      itemBackgroundColorDefault: cardBackgroundColor,
+      itemBackgroundColorActive: baseBackgroundColor,
+      itemBackgroundColorDisabled: disabledBackgroundColor,
+      itemBorderColorDefault: borderColor,
+      itemBorderColorActive: primaryColor,
+      itemBorderColorDisabled: borderColor,
+      textColorDefault: secondaryTextColor,
+      textColorDisabled: disabledTextColor,
+      borderRadius: borderRadius
+    }
+  }
+})

src/pagination/tests/Pagination.spec.js

@@ -0,0 +1,50 @@
+import Vue from 'vue'
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import Pagination from '../index'
+import create from '../../create'
+import zhCN from '../../locale/zhCN'
+import enUS from '../../locale/enUS'
+import lightScheme from '../../_styles-in-js/lightStyleScheme.scss'
+import darkScheme from '../../_styles-in-js/darkStyleScheme.scss'
+import paginationLightStyle from '../styles/light'
+import paginationDarkStyle from '../styles/dark'
+import baseDarkStyle from '../../styles/base/dark'
+import baseLightStyle from '../../styles/base/light'
+
+describe('n-pagination', () => {
+  describe('props.page', () => {
+    it('should work', () => {
+      const naive = create({
+        locales: [zhCN, enUS],
+        fallbackLocale: enUS,
+        fallbackTheme: 'light',
+        components: [
+          Pagination
+        ],
+        styles: [
+          baseLightStyle,
+          baseDarkStyle,
+          paginationLightStyle,
+          paginationDarkStyle
+        ],
+        styleSchemes: {
+          light: lightScheme,
+          dark: darkScheme
+        }
+      })
+      Vue.use(naive)
+      const wrapper = mount(Pagination, {
+        propsData: {
+          page: 5,
+          pageCount: 10
+        }
+      })
+      expect(
+        wrapper
+          .find('.n-pagination-item--active')
+          .text()
+      ).to.equal('5')
+    })
+  })
+})

src/slider/index.js

@@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import Slider from './src/Slider.vue'
+
+Slider.install = function (Vue, naive) {
+  Vue.component(naive.componentPrefix + Slider.name, Slider)
+}
+
+export default Slider

src/slider/src/Slider.vue

@@ -101,6 +101,8 @@ import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import asformitem from '../../_mixins/asformitem'
 import zindexable from '../../_mixins/zindexable'
+import usecssr from '../../_mixins/usecssr'
+import styles from './styles'
 
 function handleFirstHandleMouseMove (e) {
   const railRect = this.$refs.rail.getBoundingClientRect()
@@ -123,7 +125,7 @@ function handleSecondHandleMouseMove (e) {
 }
 
 export default {
-  name: 'NSlider',
+  name: 'Slider',
   mixins: [
     withapp,
     themeable,
@@ -131,6 +133,7 @@ export default {
     detachable,
     placeable,
     zindexable,
+    usecssr(styles),
     asformitem()
   ],
   model: {

src/slider/src/styles/index.js

@@ -0,0 +1,9 @@
+import baseStyle from './themed-base.cssr.js'
+
+export default [
+  {
+    key: 'syntheticTheme',
+    watch: ['syntheticTheme'],
+    CNode: baseStyle
+  }
+]

src/slider/src/styles/themed-base.cssr.js

@@ -0,0 +1,181 @@
+import { cTB, c, cB, cM, cE } from '../../../_utils/cssr'
+import fadeInScaleUpTransition from '../../../styles/_transitions/fade-in-scale-up'
+
+export default c([
+  ({ props }) => {
+    const {
+      railBackgroundColorDefault,
+      railBackgroundColorHover,
+      railFillBackgroundColorDefault,
+      railFillBackgroundColorHover,
+      handleBackgroundColor,
+      handleBoxShadowDefault,
+      handleBoxShadowHover,
+      handleBoxShadowActive,
+      handleBoxShadowFocus,
+      indicatorBackgroundColor,
+      indicatorBoxShadow,
+      indicatorTextColor,
+      dotBoxShadowDefault,
+      dotBoxShadowActive,
+      railHeight,
+      transformDebounceScale,
+      handleSize,
+      dotSize
+    } = props.$local
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    return [
+      cTB('slider', {
+        raw: `
+          display: block;
+          padding: 5px 0;
+          position: relative;
+          z-index: 0;
+          width: calc(100% - 14px);
+          margin-left: 7px;
+          margin-right: 7px;
+          cursor: pointer;
+        `
+      }, [
+        cB('slider-marks', {
+          raw: `
+            position: absolute;
+            top: 14px;
+            left: 0;
+            right: 0;
+          `
+        }, [
+          cB('slider-mark', {
+            raw: `
+              position: absolute;
+              transform: translateX(-50%);
+            `
+          })
+        ]),
+        cM('width-mark', {
+          raw: `
+            width: calc(100% - 24px);
+            margin: 8px 12px 32px 12px;
+          `
+        }),
+        c('&:hover', [
+          cB('slider-rail', {
+            backgroundColor: railBackgroundColorHover
+          }, [
+            cE('fill', {
+              backgroundColor: railFillBackgroundColorHover
+            }),
+            cB('slider-dots', [
+              cB('slider-dot', {
+                boxShadow: dotBoxShadowActive
+              })
+            ])
+          ]),
+          cB('slider-handle', {
+            boxShadow: handleBoxShadowHover
+          })
+        ]),
+        cM('active', [
+          cB('slider-rail', {
+            backgroundColor: railBackgroundColorHover
+          }, [
+            cE('fill', {
+              backgroundColor: railFillBackgroundColorHover
+            }),
+            cB('slider-dots', [
+              cB('slider-dot', {
+                boxShadow: dotBoxShadowActive
+              })
+            ])
+          ]),
+          cB('slider-handle', {
+            boxShadow: handleBoxShadowHover
+          })
+        ]),
+        cB('slider-rail', {
+          raw: `
+            width: 100%;
+            position: relative;
+          `,
+          height: railHeight,
+          backgroundColor: railBackgroundColorDefault,
+          transition: `background-color .3s ${easeInOutCubicBezier}`,
+          borderRadius: `${parseInt(railHeight) / 2}px`
+        }, [
+          cE('fill', {
+            raw: `
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              border-radius: ${parseInt(railHeight) / 2}px,
+              transition: background-color .3s ${easeInOutCubicBezier};
+            `,
+            backgroundColor: railFillBackgroundColorDefault
+          })
+        ]),
+        cB('slider-handle', {
+          raw: `
+            outline: none;
+            height: ${handleSize};
+            width: ${handleSize};
+            border-radius: ${parseInt(handleSize) / 2}px;
+            transition: box-shadow .2s ${easeInOutCubicBezier}, background-color .3s ${easeInOutCubicBezier};
+            position: absolute;
+            top: 0;
+            transform: translateX(-50%);
+            overflow: hidden;
+            cursor: pointer;
+          `,
+          backgroundColor: handleBackgroundColor,
+          boxShadow: handleBoxShadowDefault
+        }, [
+          c('&:hover', {
+            boxShadow: handleBoxShadowHover
+          }),
+          c('&:hover:focus', {
+            boxShadow: handleBoxShadowActive
+          }),
+          c('&:focus', {
+            boxShadow: handleBoxShadowFocus
+          })
+        ]),
+        cB('slider-dots', {
+          raw: `
+            position: absolute;
+            left: 0;
+            top: 50%;
+            right: 0;
+          `
+        }, [
+          cB('slider-dot', {
+            raw: `
+              transition: box-shadow .3s ${easeInOutCubicBezier}, background-color .3s ${easeInOutCubicBezier};
+              position: absolute;
+              transform: translateX(-50%) translateY(-50%);
+              height: ${dotSize};
+              width: ${dotSize};
+              border-radius: ${parseInt(dotSize) / 2}px;
+              overflow: hidden;
+            `,
+            boxShadow: dotBoxShadowDefault
+          })
+        ])
+      ]),
+      cTB('slider-handle-indicator', {
+        raw: `
+            ${fadeInScaleUpTransition('slider-indicator')},
+            transform:${transformDebounceScale};
+            font-size: 14px;
+            padding: 8px 12px;
+            margin-bottom: 12px;
+            border-radius: 4px;
+          `,
+        color: indicatorTextColor,
+        backgroundColor: indicatorBackgroundColor,
+        boxShadow: indicatorBoxShadow
+      })
+    ]
+  }
+])

src/slider/styles/_common.js

@@ -0,0 +1,5 @@
+export default {
+  railHeight: '4px',
+  handleSize: '14px',
+  dotSize: '8px'
+}

src/slider/styles/dark.js

@@ -0,0 +1,42 @@
+import create from '../../styles/_utils/create-component-base'
+import { composite, changeColor } from '../../_utils/color/index.js'
+import sizeVariables from './_common'
+
+export default create({
+  name: 'Slider',
+  theme: 'dark',
+  getDerivedVariables ({ base, derived }) {
+    const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)'
+    const {
+      railBackgroundOverlayColor,
+      railHoverBackgroundOverlayColor,
+      cardBackgroundColor,
+      primaryColor,
+      popoverBackgroundColor,
+      secondaryTextOverlayColor
+    } = derived
+    const {
+      transformDebounceScale
+    } = base
+    const defaultFillColor = composite(cardBackgroundColor, changeColor(primaryColor, { alpha: 0.7 }))
+    return {
+      ...sizeVariables,
+      // defaultFillColor: defaultFillColor,
+      railBackgroundColorDefault: railBackgroundOverlayColor,
+      railBackgroundColorHover: railHoverBackgroundOverlayColor,
+      railFillBackgroundColorDefault: defaultFillColor,
+      railFillBackgroundColorHover: primaryColor,
+      handleBackgroundColor: cardBackgroundColor,
+      handleBoxShadowDefault: `inset 0 0 0 2px ${defaultFillColor}`,
+      handleBoxShadowHover: `inset 0 0 0 2px ${primaryColor}`,
+      handleBoxShadowActive: `inset 0 0 0 2px ${primaryColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`,
+      handleBoxShadowFocus: `inset 0 0 0 2px ${primaryColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`,
+      indicatorBackgroundColor: popoverBackgroundColor,
+      indicatorBoxShadow: boxShadow,
+      indicatorTextColor: secondaryTextOverlayColor,
+      dotBoxShadowDefault: `inset 0 0 0 2px ${defaultFillColor}`,
+      dotBoxShadowActive: `inset 0 0 0 2px ${primaryColor}`,
+      transformDebounceScale: transformDebounceScale
+    }
+  }
+})

src/slider/styles/light.js

@@ -0,0 +1,41 @@
+
+import create from '../../styles/_utils/create-component-base'
+import { changeColor } from '../../_utils/color/index.js'
+import sizeVariables from './_common'
+
+export default create({
+  name: 'Slider',
+  theme: 'light',
+  getDerivedVariables ({ base, derived }) {
+    const indicatorBackgroundColor = 'rgba(0, 0, 0, .85)'
+    const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)'
+    const {
+      railBackgroundOverlayColor,
+      railHoverBackgroundOverlayColor,
+      primaryColor,
+      primaryHoverColor,
+      baseBackgroundColor
+    } = derived
+    const {
+      transformDebounceScale
+    } = base
+    return {
+      ...sizeVariables,
+      railBackgroundColorDefault: railBackgroundOverlayColor,
+      railBackgroundColorHover: railHoverBackgroundOverlayColor,
+      railFillBackgroundColorDefault: primaryColor,
+      railFillBackgroundColorHover: primaryHoverColor,
+      handleBackgroundColor: baseBackgroundColor,
+      handleBoxShadowDefault: `inset 0 0 0 2px ${primaryColor}`,
+      handleBoxShadowHover: `inset 0 0 0 2px ${primaryHoverColor}`,
+      handleBoxShadowActive: `inset 0 0 0 2px ${primaryHoverColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`,
+      handleBoxShadowFocus: `inset 0 0 0 2px ${primaryHoverColor}, 0 0 0 3px ${changeColor(primaryColor, { alpha: 0.2 })}`,
+      indicatorBackgroundColor: indicatorBackgroundColor,
+      indicatorBoxShadow: boxShadow,
+      indicatorTextColor: baseBackgroundColor,
+      dotBoxShadowDefault: `inset 0 0 0 2px ${primaryColor}`,
+      dotBoxShadowActive: `inset 0 0 0 2px ${primaryHoverColor}`,
+      transformDebounceScale: transformDebounceScale
+    }
+  }
+})

src/styles/base/dark.js

@@ -170,6 +170,7 @@ export default create({
       progressRailBackgroundOverlayColor: overlay(base.alphaProgressRail),
       railBackgroundColor: neutral(base.alphaRail),
       railBackgroundOverlayColor: overlay(base.alphaRail),
+      railHoverBackgroundOverlayColor: overlay(base.alphaRail * 1.5),
 
       popoverBackgroundColor: base.neutralPopover,
       tableBodyBackgroundColor: base.neutralCard,

src/styles/base/light.js

@@ -170,6 +170,7 @@ export default create({
       progressRailBackgroundOverlayColor: overlay(base.alphaProgressRail),
       railBackgroundColor: neutral(base.alphaRail),
       railBackgroundOverlayColor: overlay(base.alphaRail),
+      railHoverBackgroundOverlayColor: overlay(base.alphaRail * 0.75),
 
       popoverBackgroundColor: base.neutralPopover,
       tableBodyBackgroundColor: base.neutralCard,

test/unit/index.js

@@ -6,5 +6,5 @@ import 'regenerator-runtime/runtime'
 // packagesContext.keys().forEach(packagesContext)
 
 // require all test files (files that ends with .spec.js)
-const testsContext = require.context('./specs/src/Pagination', true, /\.spec.js$/)
+const testsContext = require.context('./specs/src/pagination', true, /\.spec.js$/)
 testsContext.keys().forEach(testsContext)

test/unit/specs/src/Pagination/index.spec.js

@@ -1,4 +1,4 @@
-import { pagesToShow, mapPagesToPageItems, pageItems } from 'src/Pagination/src/utils'
+import { pagesToShow, mapPagesToPageItems, pageItems } from 'src/pagination/src/utils'
 import { expect } from 'chai'
 
 describe('Pagination', function () {