@lightspeed/design-system-css 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +12 -0
- package/LICENSE.md +24 -0
- package/README.md +70 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +9 -0
- package/dist/index.js.map +1 -0
- package/dist/themes/types.d.ts +54 -0
- package/dist/themes/types.js +16 -0
- package/dist/themes/types.js.map +1 -0
- package/dist/themes/xseries/dark.d.ts +68 -0
- package/dist/themes/xseries/dark.js +84 -0
- package/dist/themes/xseries/dark.js.map +1 -0
- package/dist/themes/xseries/light.d.ts +68 -0
- package/dist/themes/xseries/light.js +84 -0
- package/dist/themes/xseries/light.js.map +1 -0
- package/dist/vend-styles.css +6643 -0
- package/package.json +34 -0
- package/src/fonts-ui/fonts-ns.scss +14 -0
- package/src/images-ui/images-ui-ns.scss +1 -0
- package/src/index.ts +9 -0
- package/src/themes/themeToScss.ts +67 -0
- package/src/themes/types.ts +68 -0
- package/src/themes/xseries/dark.ts +90 -0
- package/src/themes/xseries/light.ts +89 -0
- package/src/vend-stylelint/use-colour-function.js +60 -0
- package/src/vend-styles/components/BarChart/BarChart.scss +45 -0
- package/src/vend-styles/components/Carousel/Carousel.scss +114 -0
- package/src/vend-styles/components/CodeInput/CodeInput.scss +25 -0
- package/src/vend-styles/components/CurrencyInput/CurrencyInput.scss +4 -0
- package/src/vend-styles/components/DatePicker/DatePicker.scss +232 -0
- package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +32 -0
- package/src/vend-styles/components/FileUpload/FileUpload.scss +8 -0
- package/src/vend-styles/components/InboundIndicator/InboundIndicator.scss +7 -0
- package/src/vend-styles/components/InboundItem/InboundItem.scss +3 -0
- package/src/vend-styles/components/LineChart/LineChart.scss +99 -0
- package/src/vend-styles/components/Modal/Modal.scss +149 -0
- package/src/vend-styles/components/Modal/_Modal-ns.scss +7 -0
- package/src/vend-styles/components/PageHeader/_PageHeader.scss +3 -0
- package/src/vend-styles/components/ProgressBar/ProgressBar.scss +21 -0
- package/src/vend-styles/components/PromotionModal/PromotionModal.scss +44 -0
- package/src/vend-styles/components/SearchFilters/SearchFilters.scss +6 -0
- package/src/vend-styles/components/TableList/TableList.scss +291 -0
- package/src/vend-styles/components/TableList/_TableList-ns.scss +15 -0
- package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +53 -0
- package/src/vend-styles/components/UpsellPrimary/_UpsellPrimary-ns.scss +12 -0
- package/src/vend-styles/components/UpsellSecondary/UpsellSecondary.scss +30 -0
- package/src/vend-styles/components/VendVideo/VendVideo.scss +48 -0
- package/src/vend-styles/utilities/position.scss +3 -0
- package/src/vend-styles/utilities/text.scss +9 -0
- package/src/vend-styles/vend-styles.scss +39 -0
- package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex-ns.scss +2 -0
- package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss +47 -0
- package/src/vend.ui/behaviours/vd-align/vd-align.scss +3 -0
- package/src/vend.ui/components/vd-action-bar/vd-action-bar-ns.scss +3 -0
- package/src/vend.ui/components/vd-action-bar/vd-action-bar.scss +33 -0
- package/src/vend.ui/components/vd-autocomplete/vd-autocomplete.scss +36 -0
- package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +68 -0
- package/src/vend.ui/components/vd-avatar/vd-avatar-ns.scss +3 -0
- package/src/vend.ui/components/vd-avatar/vd-avatar.scss +78 -0
- package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi-ns.scss +4 -0
- package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +70 -0
- package/src/vend.ui/components/vd-badges/vd-badges.scss +1 -0
- package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge-ns.scss +10 -0
- package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +159 -0
- package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +16 -0
- package/src/vend.ui/components/vd-banner/vd-banner.scss +89 -0
- package/src/vend.ui/components/vd-bg/vd-bg.scss +4 -0
- package/src/vend.ui/components/vd-body/vd-body.scss +20 -0
- package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +121 -0
- package/src/vend.ui/components/vd-btn/_vd-btn-ns.scss +7 -0
- package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +74 -0
- package/src/vend.ui/components/vd-btn/vd-btn.scss +112 -0
- package/src/vend.ui/components/vd-card/vd-card-ns.scss +9 -0
- package/src/vend.ui/components/vd-card/vd-card.scss +11 -0
- package/src/vend.ui/components/vd-carousel/vd-carousel.scss +120 -0
- package/src/vend.ui/components/vd-checkbox/vd-checkbox-ns.scss +7 -0
- package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +158 -0
- package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +74 -0
- package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +332 -0
- package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +10 -0
- package/src/vend.ui/components/vd-dialog/vd-dialog.scss +220 -0
- package/src/vend.ui/components/vd-dialog-close/vd-dialog-close-ns.scss +8 -0
- package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +117 -0
- package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer-ns.scss +1 -0
- package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +22 -0
- package/src/vend.ui/components/vd-dott/vd-dott.scss +41 -0
- package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss +15 -0
- package/src/vend.ui/components/vd-expandable/vd-expandable.scss +11 -0
- package/src/vend.ui/components/vd-feedback/vd-feedback.scss +23 -0
- package/src/vend.ui/components/vd-field/vd-field-ns.scss +4 -0
- package/src/vend.ui/components/vd-field/vd-field.scss +59 -0
- package/src/vend.ui/components/vd-fieldset/vd-fieldset.scss +19 -0
- package/src/vend.ui/components/vd-flag/vd-flag-ns.scss +1 -0
- package/src/vend.ui/components/vd-flag/vd-flag.scss +46 -0
- package/src/vend.ui/components/vd-flex/vd-flex.scss +21 -0
- package/src/vend.ui/components/vd-grid/vd-grid.scss +26 -0
- package/src/vend.ui/components/vd-header/vd-header.scss +34 -0
- package/src/vend.ui/components/vd-hero/vd-hero-ns.scss +28 -0
- package/src/vend.ui/components/vd-hero/vd-hero.scss +114 -0
- package/src/vend.ui/components/vd-hr/vd-hr.scss +14 -0
- package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +61 -0
- package/src/vend.ui/components/vd-input/vd-input-ns.scss +99 -0
- package/src/vend.ui/components/vd-input/vd-input.scss +49 -0
- package/src/vend.ui/components/vd-input-char-limit/vd-input-char-limit.scss +8 -0
- package/src/vend.ui/components/vd-link/vd-link.scss +23 -0
- package/src/vend.ui/components/vd-loader/vd-loader.scss +56 -0
- package/src/vend.ui/components/vd-lozenge/vd-lozenge.scss +40 -0
- package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +38 -0
- package/src/vend.ui/components/vd-main-content/vd-main-content.scss +39 -0
- package/src/vend.ui/components/vd-modals-container/vd-modals-container.scss +5 -0
- package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +32 -0
- package/src/vend.ui/components/vd-nav-item/vd-nav-item.scss +30 -0
- package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +62 -0
- package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -0
- package/src/vend.ui/components/vd-overlay/vd-overlay.scss +19 -0
- package/src/vend.ui/components/vd-p/vd-p.scss +8 -0
- package/src/vend.ui/components/vd-panel/vd-panel.scss +9 -0
- package/src/vend.ui/components/vd-popover/vd-popover-ns.scss +5 -0
- package/src/vend.ui/components/vd-popover/vd-popover.scss +180 -0
- package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +16 -0
- package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +128 -0
- package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +12 -0
- package/src/vend.ui/components/vd-promo/vd-promo.scss +86 -0
- package/src/vend.ui/components/vd-radio/vd-radio-ns.scss +7 -0
- package/src/vend.ui/components/vd-radio/vd-radio.scss +130 -0
- package/src/vend.ui/components/vd-save/vd-save.scss +4 -0
- package/src/vend.ui/components/vd-scrollable/vd-scrollable-ns.scss +2 -0
- package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss +54 -0
- package/src/vend.ui/components/vd-section/vd-section-ns.scss +17 -0
- package/src/vend.ui/components/vd-section/vd-section.scss +118 -0
- package/src/vend.ui/components/vd-section-back/vd-section-back-ns.scss +3 -0
- package/src/vend.ui/components/vd-section-back/vd-section-back.scss +34 -0
- package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +82 -0
- package/src/vend.ui/components/vd-select/vd-select-group.scss +47 -0
- package/src/vend.ui/components/vd-select/vd-select-inline.scss +40 -0
- package/src/vend.ui/components/vd-select/vd-select-ns.scss +17 -0
- package/src/vend.ui/components/vd-select/vd-select.scss +26 -0
- package/src/vend.ui/components/vd-settings/vd-settings-ns.scss +1 -0
- package/src/vend.ui/components/vd-settings/vd-settings.scss +8 -0
- package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +10 -0
- package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer-ns.scss +6 -0
- package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer.scss +47 -0
- package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +15 -0
- package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs.scss +73 -0
- package/src/vend.ui/components/vd-splash/vd-splash.scss +47 -0
- package/src/vend.ui/components/vd-status-icon/vd-status-icon-ns.scss +1 -0
- package/src/vend.ui/components/vd-status-icon/vd-status-icon.scss +12 -0
- package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +5 -0
- package/src/vend.ui/components/vd-suggestion/vd-suggestion-list.scss +76 -0
- package/src/vend.ui/components/vd-switch/vd-switch-ns.scss +8 -0
- package/src/vend.ui/components/vd-switch/vd-switch.scss +117 -0
- package/src/vend.ui/components/vd-table/vd-table-ns.scss +13 -0
- package/src/vend.ui/components/vd-table/vd-table.scss +251 -0
- package/src/vend.ui/components/vd-tabs/_vd-tabs-ns.scss +3 -0
- package/src/vend.ui/components/vd-tabs/vd-tabs.scss +76 -0
- package/src/vend.ui/components/vd-text/vd-text.scss +18 -0
- package/src/vend.ui/components/vd-toast-notification/vd-toast-notification-ns.scss +3 -0
- package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +58 -0
- package/src/vend.ui/components/vd-tooltip/vd-tooltip-ns.scss +1 -0
- package/src/vend.ui/components/vd-tooltip/vd-tooltip.scss +15 -0
- package/src/vend.ui/components/vd-topbar/vd-topbar-ns.scss +10 -0
- package/src/vend.ui/components/vd-topbar/vd-topbar.scss +36 -0
- package/src/vend.ui/components/vd-visibility/vd-visibility.scss +73 -0
- package/src/vend.ui/fonts/fira-mono-regular.woff2 +0 -0
- package/src/vend.ui/fonts/lato-black.woff2 +0 -0
- package/src/vend.ui/fonts/lato-bold.woff2 +0 -0
- package/src/vend.ui/fonts/lato-regular.woff2 +0 -0
- package/src/vend.ui/styles/global/_base-mixins.scss +12 -0
- package/src/vend.ui/styles/global/_button-mixins.scss +17 -0
- package/src/vend.ui/styles/global/_grid.scss +102 -0
- package/src/vend.ui/styles/global/_helper-mixins.scss +36 -0
- package/src/vend.ui/styles/global/_layout.scss +10 -0
- package/src/vend.ui/styles/global/_misc.scss +14 -0
- package/src/vend.ui/styles/global/_non-styles.scss +72 -0
- package/src/vend.ui/styles/global/_normalise.scss +16 -0
- package/src/vend.ui/styles/global/_placeholders.scss +11 -0
- package/src/vend.ui/styles/global/_z-index.scss +40 -0
- package/src/vend.ui/styles/global/colour/_base.scss +105 -0
- package/src/vend.ui/styles/global/colour/_colour-functions.scss +76 -0
- package/src/vend.ui/styles/global/colour/_colour-helpers.scss +7 -0
- package/src/vend.ui/styles/global/colour/_colour.scss +5 -0
- package/src/vend.ui/styles/global/colour/themes/_colour-themes.scss +12 -0
- package/src/vend.ui/styles/global/colour/themes/_css-var-theme-generator.scss +1 -0
- package/src/vend.ui/styles/global/colour/themes/_theme-functions.scss +81 -0
- package/src/vend.ui/styles/global/colour/themes/_theme-keys.scss +5 -0
- package/src/vend.ui/styles/global/colour/themes/xseries/_theme-dark.scss +53 -0
- package/src/vend.ui/styles/global/colour/themes/xseries/_theme-light.scss +53 -0
- package/src/vend.ui/styles/global/effects/_effects-ns.scss +13 -0
- package/src/vend.ui/styles/global/effects/_effects.scss +22 -0
- package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +12 -0
- package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +24 -0
- package/src/vend.ui/styles/global/spacing/_spacing.scss +4 -0
- package/src/vend.ui/styles/global/text/_base.scss +6 -0
- package/src/vend.ui/styles/global/text/_text-definitions.scss +65 -0
- package/src/vend.ui/styles/global/text/_text-helpers.scss +17 -0
- package/src/vend.ui/styles/global/text/_text-mixins.scss +141 -0
- package/src/vend.ui/styles/global/text/_text.scss +3 -0
- package/src/vend.ui/styles/global/utils/_functions.scss +84 -0
- package/src/vend.ui/styles/global/viewport/_viewport-data.scss +37 -0
- package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +37 -0
- package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +157 -0
- package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +18 -0
- package/src/vend.ui/styles/navi/_non-styles.scss +2 -0
- package/src/vend.ui/styles/navi/_nv-account-banner.scss +12 -0
- package/src/vend.ui/styles/navi/_nv-notifications-item.scss +15 -0
- package/src/vend.ui/styles/navi/_nv-sidenav.scss +143 -0
- package/src/vend.ui/styles/navi/_nv-topnav-title.scss +24 -0
- package/src/vend.ui/styles/navi/_nv-topnav.scss +112 -0
- package/src/vend.ui/styles/navi/_nv-user-sale-data.scss +14 -0
- package/src/vend.ui/styles/navi/dialogs/_nv-dialog-drawer.scss +44 -0
- package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +85 -0
- package/src/vend.ui/styles/navi/dialogs/_nv-user-dialog.scss +44 -0
- package/src/vend.ui/styles/navi/navi.scss +12 -0
- package/src/vend.ui/styles/navi/non-styles/_mixins.scss +48 -0
- package/src/vend.ui/styles/navi/non-styles/_variables.scss +26 -0
- package/src/vend.ui/styles/vend-ui.scss +98 -0
package/package.json
ADDED
@@ -0,0 +1,34 @@
|
|
1
|
+
{
|
2
|
+
"name": "@lightspeed/design-system-css",
|
3
|
+
"version": "0.1.0",
|
4
|
+
"description": "Lightspeed's Design System in CSS",
|
5
|
+
"author": "Lightspeed Commerce Inc.",
|
6
|
+
"license": "SEE LICENSE IN LICENSE.md",
|
7
|
+
"main": "dist/index.js",
|
8
|
+
"types": "dist/index.d.ts",
|
9
|
+
"publishConfig": {
|
10
|
+
"access": "public"
|
11
|
+
},
|
12
|
+
"files": [
|
13
|
+
"src",
|
14
|
+
"dist"
|
15
|
+
],
|
16
|
+
"scripts": {
|
17
|
+
"build": "rm -rf dist && yarn lint && yarn build:minimal",
|
18
|
+
"build:themes": "yarn ts-node ./src/themes/themeToScss",
|
19
|
+
"build:minimal": "yarn tsc && node-sass -q src/vend-styles/vend-styles.scss -o dist/",
|
20
|
+
"build-watch": "yarn lint && yarn build:themes && node-sass -rw src/ -o dist/",
|
21
|
+
"test": "true",
|
22
|
+
"lint": "yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"
|
23
|
+
},
|
24
|
+
"dependencies": {
|
25
|
+
"react-datepicker": "^4.1.0"
|
26
|
+
},
|
27
|
+
"devDependencies": {
|
28
|
+
"@types/node": "^16.11.2",
|
29
|
+
"node-sass": "^4.9.3",
|
30
|
+
"stylelint": "^13.5.0",
|
31
|
+
"stylelint-scss": "^3.17.2",
|
32
|
+
"ts-node": "^10.3.1"
|
33
|
+
}
|
34
|
+
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
$vd-font-weight--regular: 400;
|
2
|
+
$vd-font-weight--bold: 700;
|
3
|
+
$vd-font-weight--ultra-bold: 900;
|
4
|
+
|
5
|
+
$vd-font-cdn-path: '//vendfrontendassets.freetls.fastly.net/fonts/';
|
6
|
+
|
7
|
+
// Font-Awesome font location
|
8
|
+
$fa-font-path: '#{$vd-font-cdn-path}/fa-v4';
|
9
|
+
|
10
|
+
// Vend.UI font location
|
11
|
+
$vd-font-src: $vd-font-cdn-path;
|
12
|
+
|
13
|
+
$vd-font-lato: lato, 'Helvetica Neue', helvetica, roboto, arial, sans-serif;
|
14
|
+
$vd-font-primary: $vd-font-lato;
|
@@ -0,0 +1 @@
|
|
1
|
+
$vd-images-cdn-path: '//vendfrontendassets.freetls.fastly.net/images/'
|
package/src/index.ts
ADDED
@@ -0,0 +1,67 @@
|
|
1
|
+
import fs from 'fs'
|
2
|
+
import { requiredRgbSwatches, ThemeConfig } from './types'
|
3
|
+
import { xSeriesLightTheme } from './xseries/light'
|
4
|
+
import { xSeriesDarkTheme } from './xseries/dark'
|
5
|
+
|
6
|
+
const THEME_DIR = './src/vend.ui/styles/global/colour/themes'
|
7
|
+
const HEADER = '// THIS IS A GENERATED FILE. DO NOT EDIT.\n\n'
|
8
|
+
const NO_LINT_START = '// stylelint-disable vend/use-colour-function'
|
9
|
+
const NO_LINT_END = '// stylelint-enable vend/use-colour-function'
|
10
|
+
|
11
|
+
const themes: ThemeConfig[] = [
|
12
|
+
{
|
13
|
+
theme: xSeriesLightTheme,
|
14
|
+
mapName: 'vd-xseries-theme-light',
|
15
|
+
filename: `${THEME_DIR}/xseries/_theme-light.scss`,
|
16
|
+
},
|
17
|
+
{
|
18
|
+
theme: xSeriesDarkTheme,
|
19
|
+
mapName: 'vd-xseries-theme-dark',
|
20
|
+
filename: `${THEME_DIR}/xseries/_theme-dark.scss`,
|
21
|
+
},
|
22
|
+
]
|
23
|
+
|
24
|
+
const camelToKebab = (s: string) =>
|
25
|
+
s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
|
26
|
+
|
27
|
+
const getKebabKey = (key: string) => {
|
28
|
+
// supplementaryText needs two kebab dashes, supplementary--text ¯\_(ツ)_/¯
|
29
|
+
return camelToKebab(key === 'supplementaryText' ? 'supplementary-Text' : key)
|
30
|
+
}
|
31
|
+
|
32
|
+
const saveScssMapFile = (filename: string, content: any) => {
|
33
|
+
fs.writeFile(filename, content, err => {
|
34
|
+
if (err) {
|
35
|
+
// eslint-disable-next-line no-console
|
36
|
+
console.error(err)
|
37
|
+
process.exit(1)
|
38
|
+
}
|
39
|
+
})
|
40
|
+
}
|
41
|
+
|
42
|
+
// Converts theme to SCSS map
|
43
|
+
export const themeToScss = ({ theme, mapName, filename }: ThemeConfig) => {
|
44
|
+
const colours = Object.entries(theme).map(c => {
|
45
|
+
const kebabKey = getKebabKey(c[0])
|
46
|
+
return `\n ${kebabKey}:${c[1]}`
|
47
|
+
})
|
48
|
+
const scssMap = `${HEADER}${NO_LINT_START}\n\n$${mapName}: (${colours});\n\n${NO_LINT_END}`
|
49
|
+
return saveScssMapFile(filename, scssMap)
|
50
|
+
}
|
51
|
+
|
52
|
+
// Generates SCSS lists of required / available theme keys
|
53
|
+
const requiredThemeKeysToScss = () => {
|
54
|
+
const baseKeys = Object.keys(xSeriesLightTheme).map(k => getKebabKey(k))
|
55
|
+
const rgbKeys = requiredRgbSwatches.map(k => getKebabKey(k))
|
56
|
+
const allKeys = baseKeys.concat(rgbKeys.map(k => `${k}-rgb`))
|
57
|
+
|
58
|
+
const requiredBaseKeys = `$vd-theme-required-base-keys: ${baseKeys};`
|
59
|
+
const requiredRgbKeys = `$vd-theme-available-rgb-keys: ${rgbKeys};`
|
60
|
+
const availableThemeKeys = `$vd-theme-available-keys: ${allKeys};`
|
61
|
+
|
62
|
+
const scssList = `${HEADER}${requiredBaseKeys}\n${requiredRgbKeys}\n${availableThemeKeys}`
|
63
|
+
return saveScssMapFile(`${THEME_DIR}/_theme-keys.scss`, scssList)
|
64
|
+
}
|
65
|
+
|
66
|
+
themes.forEach(theme => themeToScss(theme))
|
67
|
+
requiredThemeKeysToScss()
|
@@ -0,0 +1,68 @@
|
|
1
|
+
export interface ThemeConfig {
|
2
|
+
theme: Theme
|
3
|
+
mapName: string
|
4
|
+
filename: string
|
5
|
+
}
|
6
|
+
|
7
|
+
export interface Theme {
|
8
|
+
background: string
|
9
|
+
backgroundInverse: string
|
10
|
+
box: string
|
11
|
+
boxInverse: string
|
12
|
+
boxSupplementary: string
|
13
|
+
do: string
|
14
|
+
doDarker: string
|
15
|
+
doHighlight: string
|
16
|
+
doLighter: string
|
17
|
+
framing: string
|
18
|
+
framingInverse: string
|
19
|
+
go: string
|
20
|
+
goDarker: string
|
21
|
+
goHighlight: string
|
22
|
+
goLighter: string
|
23
|
+
goldenSand: string
|
24
|
+
gothic: string
|
25
|
+
keyline: string
|
26
|
+
keylineInverse: string
|
27
|
+
lavenderPurple: string
|
28
|
+
navIconSelected: string
|
29
|
+
navIconUnselected: string
|
30
|
+
navSideDrawer: string
|
31
|
+
navSideTabs: string
|
32
|
+
navTop: string
|
33
|
+
newYorkPink: string
|
34
|
+
no: string
|
35
|
+
noDarker: string
|
36
|
+
noHighlight: string
|
37
|
+
noLighter: string
|
38
|
+
overlay: string
|
39
|
+
selectArrowsBg: string
|
40
|
+
shadow: string
|
41
|
+
shuttleGray: string
|
42
|
+
sinbad: string
|
43
|
+
success: string
|
44
|
+
supplementary: string
|
45
|
+
supplementaryDarker: string
|
46
|
+
supplementaryHighlight: string
|
47
|
+
supplementaryLighter: string
|
48
|
+
supplementaryText: string
|
49
|
+
tacao: string
|
50
|
+
text: string
|
51
|
+
textAction: string
|
52
|
+
textInverse: string
|
53
|
+
textNav: string
|
54
|
+
}
|
55
|
+
|
56
|
+
// Some swatches require an "rgb" swatch (e.g. vd-background--rgb) to help apps integrate themes
|
57
|
+
export const requiredRgbSwatches = [
|
58
|
+
'background',
|
59
|
+
'box',
|
60
|
+
'boxInverse',
|
61
|
+
'do',
|
62
|
+
'go',
|
63
|
+
'navSideDrawer',
|
64
|
+
'navSideTabs',
|
65
|
+
'navTop',
|
66
|
+
'no',
|
67
|
+
'supplementary',
|
68
|
+
]
|
@@ -0,0 +1,90 @@
|
|
1
|
+
import { Theme } from '../types'
|
2
|
+
|
3
|
+
const backgrounds = {
|
4
|
+
inert: {
|
5
|
+
background: '#141217',
|
6
|
+
box: '#1E1C21',
|
7
|
+
backgroundInverse: '#F4F2F5',
|
8
|
+
boxInverse: '#FFFFFF',
|
9
|
+
success: '#15BF20',
|
10
|
+
},
|
11
|
+
interactive: {
|
12
|
+
goLighter: '#6054FF',
|
13
|
+
go: '#477BFF',
|
14
|
+
goDarker: '#352ACF',
|
15
|
+
goHighlight: 'rgba(0, 23, 229, .1)',
|
16
|
+
noLighter: '#D4301D',
|
17
|
+
no: '#EB4F29',
|
18
|
+
noDarker: '#A12416',
|
19
|
+
supplementaryLighter: '#3C6996',
|
20
|
+
supplementary: '#5B83AC',
|
21
|
+
supplementaryDarker: '#284563',
|
22
|
+
},
|
23
|
+
}
|
24
|
+
|
25
|
+
const foregrounds = {
|
26
|
+
inert: {
|
27
|
+
text: '#E7E5E8',
|
28
|
+
textInverse: '#0B0B0B',
|
29
|
+
textAction: '#FFFFFF',
|
30
|
+
selectArrowsBg: '#E7E5E8',
|
31
|
+
|
32
|
+
shadow: 'rgba(0, 0, 0, 0.35)',
|
33
|
+
overlay: 'rgba(43, 54, 61, 0.65)',
|
34
|
+
},
|
35
|
+
borders: {
|
36
|
+
framing: '#27252A',
|
37
|
+
keyline: '#37353A',
|
38
|
+
framingInverse: '#E7E5E8',
|
39
|
+
keylineInverse: '#C9C7CA',
|
40
|
+
},
|
41
|
+
}
|
42
|
+
|
43
|
+
const discretionary = {
|
44
|
+
goldenSand: '#E6B03D',
|
45
|
+
tacao: '#ED6B44',
|
46
|
+
newYorkPink: '#DE3CEC',
|
47
|
+
gothic: '#A02FB6',
|
48
|
+
lavenderPurple: '#501897',
|
49
|
+
sinbad: '#6952F6',
|
50
|
+
shuttleGray: '#5D5D5D',
|
51
|
+
}
|
52
|
+
|
53
|
+
const navigation = {
|
54
|
+
// When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
|
55
|
+
navTop: '#0B0B0B',
|
56
|
+
navSideTabs: '#27252A',
|
57
|
+
navSideDrawer: '#1E1C21',
|
58
|
+
navIconUnselected: '#FFFFFF',
|
59
|
+
navIconSelected: '#E7E5E8',
|
60
|
+
}
|
61
|
+
|
62
|
+
const deprecated = {
|
63
|
+
boxSupplementary: '#27252A',
|
64
|
+
textNav: '#FFFFFF',
|
65
|
+
supplementaryText: '#5B83AC',
|
66
|
+
supplementaryHighlight: 'rgba(0, 61, 229, .1)',
|
67
|
+
doHighlight: 'rgba(0, 23, 229, .1)',
|
68
|
+
noHighlight: 'rgba(229, 0, 0,.1)',
|
69
|
+
doLighter: '#618EFF',
|
70
|
+
do: '#477BFF',
|
71
|
+
doDarker: '#406FE5',
|
72
|
+
}
|
73
|
+
|
74
|
+
export const xSeriesDarkThemeByCategory = {
|
75
|
+
backgrounds,
|
76
|
+
foregrounds,
|
77
|
+
discretionary,
|
78
|
+
navigation,
|
79
|
+
deprecated,
|
80
|
+
}
|
81
|
+
|
82
|
+
export const xSeriesDarkTheme: Theme = {
|
83
|
+
...backgrounds.inert,
|
84
|
+
...backgrounds.interactive,
|
85
|
+
...foregrounds.inert,
|
86
|
+
...foregrounds.borders,
|
87
|
+
...discretionary,
|
88
|
+
...navigation,
|
89
|
+
...deprecated,
|
90
|
+
}
|
@@ -0,0 +1,89 @@
|
|
1
|
+
import { Theme } from '../types'
|
2
|
+
|
3
|
+
const backgrounds = {
|
4
|
+
inert: {
|
5
|
+
background: '#F4F2F5',
|
6
|
+
box: '#FFFFFF',
|
7
|
+
backgroundInverse: '#141217',
|
8
|
+
boxInverse: '#1E1C21',
|
9
|
+
success: '#0E7B1D',
|
10
|
+
},
|
11
|
+
interactive: {
|
12
|
+
goLighter: '#6054FF',
|
13
|
+
go: '#3F32F5',
|
14
|
+
goDarker: '#352ACF',
|
15
|
+
goHighlight: 'rgba(128, 140, 255, .1)',
|
16
|
+
noLighter: '#D4301D',
|
17
|
+
no: '#BB2A1A',
|
18
|
+
noDarker: '#A12416',
|
19
|
+
supplementaryLighter: '#3C6996',
|
20
|
+
supplementary: '#32577D',
|
21
|
+
supplementaryDarker: '#284563',
|
22
|
+
},
|
23
|
+
}
|
24
|
+
|
25
|
+
const foregrounds = {
|
26
|
+
inert: {
|
27
|
+
text: '#27252A',
|
28
|
+
textInverse: '#FFFFFF',
|
29
|
+
textAction: '#FFFFFF',
|
30
|
+
selectArrowsBg: '#27252A',
|
31
|
+
shadow: 'rgba(0, 0, 0, 0.35)',
|
32
|
+
overlay: 'rgba(0, 0, 0, 0.35)',
|
33
|
+
},
|
34
|
+
borders: {
|
35
|
+
framing: '#E7E5E8',
|
36
|
+
keyline: '#C9C7CA',
|
37
|
+
framingInverse: '#27252A',
|
38
|
+
keylineInverse: '#37353A',
|
39
|
+
},
|
40
|
+
}
|
41
|
+
|
42
|
+
const discretionary = {
|
43
|
+
goldenSand: '#E6B03D',
|
44
|
+
tacao: '#ED6B44',
|
45
|
+
newYorkPink: '#DE3CEC',
|
46
|
+
gothic: '#A02FB6',
|
47
|
+
lavenderPurple: '#501897',
|
48
|
+
sinbad: '#6952F6',
|
49
|
+
shuttleGray: '#5D5D5D',
|
50
|
+
}
|
51
|
+
|
52
|
+
const navigation = {
|
53
|
+
// When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
|
54
|
+
navTop: '#0B0B0B',
|
55
|
+
navSideTabs: '#E7E5E8',
|
56
|
+
navSideDrawer: '#FFFFFF',
|
57
|
+
navIconUnselected: '#27252A',
|
58
|
+
navIconSelected: '#3F32F5',
|
59
|
+
}
|
60
|
+
|
61
|
+
const deprecated = {
|
62
|
+
boxSupplementary: '#E7E5E8',
|
63
|
+
textNav: '#FFFFFF',
|
64
|
+
supplementaryText: '#32577D',
|
65
|
+
supplementaryHighlight: 'rgba(76, 124, 255, 0.1)',
|
66
|
+
doHighlight: 'rgba(128, 140, 255, .1)',
|
67
|
+
noHighlight: 'rgba(255, 128, 128, .1)',
|
68
|
+
doLighter: '#6054FF',
|
69
|
+
do: '#3F32F5',
|
70
|
+
doDarker: '#352ACF',
|
71
|
+
}
|
72
|
+
|
73
|
+
export const xSeriesLightThemeByCategory = {
|
74
|
+
backgrounds,
|
75
|
+
foregrounds,
|
76
|
+
discretionary,
|
77
|
+
navigation,
|
78
|
+
deprecated,
|
79
|
+
}
|
80
|
+
|
81
|
+
export const xSeriesLightTheme: Theme = {
|
82
|
+
...backgrounds.inert,
|
83
|
+
...backgrounds.interactive,
|
84
|
+
...foregrounds.inert,
|
85
|
+
...foregrounds.borders,
|
86
|
+
...discretionary,
|
87
|
+
...navigation,
|
88
|
+
...deprecated,
|
89
|
+
}
|
@@ -0,0 +1,60 @@
|
|
1
|
+
const stylelint = require('stylelint')
|
2
|
+
const ruleName = 'vend/use-colour-function'
|
3
|
+
|
4
|
+
const message = '[VEND] Use the vd-colour SASS function when defining a colour.'
|
5
|
+
const messages = stylelint.utils.ruleMessages(ruleName, {
|
6
|
+
expected() {
|
7
|
+
return message
|
8
|
+
},
|
9
|
+
})
|
10
|
+
|
11
|
+
module.exports = stylelint.createPlugin(ruleName, function(enabled) {
|
12
|
+
if (!enabled) {
|
13
|
+
return
|
14
|
+
}
|
15
|
+
|
16
|
+
// Matches hex, 'rgb', (not -rgb, ignores vend sass functions and values that are prefixed with -) and hsl colours; 'named' colours are
|
17
|
+
// prohibited via the `color-named` rule
|
18
|
+
const UNSUPPORTED_COLOUR_MATCHER = /(?<!-)rgb|hsl|^#([a-fA-F0-9]){3}$|[a-fA-F0-9]{6}$/
|
19
|
+
|
20
|
+
return function(root, result) {
|
21
|
+
// Ensure no named colours are used
|
22
|
+
stylelint.utils.checkAgainstRule(
|
23
|
+
{
|
24
|
+
ruleName: 'color-named',
|
25
|
+
ruleSettings: ['never'],
|
26
|
+
root,
|
27
|
+
},
|
28
|
+
warning => {
|
29
|
+
stylelint.utils.report({
|
30
|
+
message,
|
31
|
+
ruleName,
|
32
|
+
result,
|
33
|
+
node: warning.node,
|
34
|
+
line: warning.line,
|
35
|
+
column: warning.column,
|
36
|
+
})
|
37
|
+
}
|
38
|
+
)
|
39
|
+
|
40
|
+
root.walkDecls(function(decl) {
|
41
|
+
const { value, prop } = decl
|
42
|
+
const isUnsupportedColourValue = value.match(UNSUPPORTED_COLOUR_MATCHER)
|
43
|
+
|
44
|
+
if (!isUnsupportedColourValue) {
|
45
|
+
return
|
46
|
+
}
|
47
|
+
|
48
|
+
stylelint.utils.report({
|
49
|
+
result,
|
50
|
+
ruleName,
|
51
|
+
message: messages.expected(`${prop}, ${value}`),
|
52
|
+
node: decl,
|
53
|
+
word: value,
|
54
|
+
})
|
55
|
+
})
|
56
|
+
}
|
57
|
+
})
|
58
|
+
|
59
|
+
module.exports.ruleName = ruleName
|
60
|
+
module.exports.messages = messages
|
@@ -0,0 +1,45 @@
|
|
1
|
+
/* stylelint-disable vend/use-colour-function */
|
2
|
+
$bar-chart-background-fill: #F2F2F2;
|
3
|
+
$bar-chart-primary-text-color: #76A27B;
|
4
|
+
$bar-chart-secondary-text-color: #959595;
|
5
|
+
$chart-fill: #009D12;
|
6
|
+
$chart-line: #009D12;
|
7
|
+
/* stylelint-enable vend/use-colour-function */
|
8
|
+
|
9
|
+
$bar-chart-primary-text-size: 14px;
|
10
|
+
$bar-chart-secondary-text-size: 13px;
|
11
|
+
|
12
|
+
.vd-bar-chart-container {
|
13
|
+
font-size: 11px;
|
14
|
+
|
15
|
+
.y.axis .domain{
|
16
|
+
stroke: none;
|
17
|
+
display: none;
|
18
|
+
}
|
19
|
+
|
20
|
+
.y.axis .tick line {
|
21
|
+
display: none;
|
22
|
+
}
|
23
|
+
|
24
|
+
.y.axis text{
|
25
|
+
font-size: $bar-chart-primary-text-size;
|
26
|
+
fill: $bar-chart-primary-text-color;
|
27
|
+
}
|
28
|
+
|
29
|
+
.bar{
|
30
|
+
fill: $chart-fill;
|
31
|
+
opacity: 0.15;
|
32
|
+
}
|
33
|
+
.top{
|
34
|
+
fill: $chart-line;
|
35
|
+
}
|
36
|
+
|
37
|
+
.bar-label{
|
38
|
+
font-size: $bar-chart-secondary-text-size;
|
39
|
+
fill: $bar-chart-secondary-text-color;
|
40
|
+
}
|
41
|
+
|
42
|
+
.bar-chart-background {
|
43
|
+
fill: $bar-chart-background-fill;
|
44
|
+
}
|
45
|
+
}
|
@@ -0,0 +1,114 @@
|
|
1
|
+
.vd-carousel-wrapper {
|
2
|
+
display: flex;
|
3
|
+
flex-direction: column;
|
4
|
+
padding: 8px;
|
5
|
+
|
6
|
+
@keyframes vd-slide-in-left {
|
7
|
+
from {
|
8
|
+
transform: translateX(100%);
|
9
|
+
}
|
10
|
+
to {
|
11
|
+
transform: translateX(0);
|
12
|
+
}
|
13
|
+
}
|
14
|
+
@keyframes vd-slide-out-left {
|
15
|
+
from {
|
16
|
+
transform: translateX(-100%);
|
17
|
+
}
|
18
|
+
to {
|
19
|
+
transform: translateX(-200%);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
@keyframes vd-slide-right {
|
23
|
+
from {
|
24
|
+
transform: translateX(-100%);
|
25
|
+
}
|
26
|
+
to {
|
27
|
+
transform: translateX(0);
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
.vd-carousel-frame {
|
32
|
+
display: flex;
|
33
|
+
flex: 1 0 100%;
|
34
|
+
order: 2;
|
35
|
+
visibility: hidden;
|
36
|
+
max-width: 100%;
|
37
|
+
|
38
|
+
animation-duration: 0.5s;
|
39
|
+
animation-timing-function: ease-in-out;
|
40
|
+
}
|
41
|
+
|
42
|
+
.vd-carousel-frame-content {
|
43
|
+
flex: 1 1 0;
|
44
|
+
max-width: 100%;
|
45
|
+
}
|
46
|
+
|
47
|
+
.vd-carousel-frame-transition-left,
|
48
|
+
.vd-carousel-frame-transition-right {
|
49
|
+
visibility: visible;
|
50
|
+
order: 1;
|
51
|
+
}
|
52
|
+
|
53
|
+
.vd-carousel-frame-active {
|
54
|
+
visibility: visible;
|
55
|
+
order: 0;
|
56
|
+
|
57
|
+
&.vd-carousel-frame-transition-left {
|
58
|
+
animation-name: vd-slide-in-left;
|
59
|
+
}
|
60
|
+
|
61
|
+
&.vd-carousel-frame-transition-right {
|
62
|
+
animation-name: vd-slide-right;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
.vd-carousel-frame-transition-left:not(.vd-carousel-frame-active) {
|
67
|
+
animation-name: vd-slide-out-left;
|
68
|
+
}
|
69
|
+
|
70
|
+
.vd-carousel-frame-transition-right:not(.vd-carousel-frame-active) {
|
71
|
+
animation-name: vd-slide-right;
|
72
|
+
}
|
73
|
+
|
74
|
+
.vd-carousel-paginator {
|
75
|
+
display: flex;
|
76
|
+
flex-direction: row;
|
77
|
+
justify-content: space-between;
|
78
|
+
background-color: vd-colour(box);
|
79
|
+
padding-top: 8px;
|
80
|
+
height: auto;
|
81
|
+
}
|
82
|
+
|
83
|
+
.vd-carousel-paginator-paddle {
|
84
|
+
width: 45px;
|
85
|
+
font-size: 18px;
|
86
|
+
}
|
87
|
+
|
88
|
+
.vd-carousel-paginator-indicators {
|
89
|
+
display: flex;
|
90
|
+
justify-content: center;
|
91
|
+
align-items: center;
|
92
|
+
}
|
93
|
+
|
94
|
+
.vd-carousel-paginator-indicator {
|
95
|
+
display: inline-flex;
|
96
|
+
justify-content: center;
|
97
|
+
align-items: center;
|
98
|
+
width: 16px;
|
99
|
+
height: 16px;
|
100
|
+
cursor: pointer;
|
101
|
+
&::before {
|
102
|
+
content: '';
|
103
|
+
display: inline-block;
|
104
|
+
width: 8px;
|
105
|
+
height: 8px;
|
106
|
+
border-radius: 50%;
|
107
|
+
background-color: vd-colour(keyline);
|
108
|
+
}
|
109
|
+
}
|
110
|
+
|
111
|
+
.vd-carousel-paginator-indicator--active::before {
|
112
|
+
background-color: vd-colour(do);
|
113
|
+
}
|
114
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@import '../../../vend.ui/styles/global/non-styles';
|
2
|
+
|
3
|
+
.code-input--field {
|
4
|
+
font-weight: $vd-font-weight--bold;
|
5
|
+
text-align: center;
|
6
|
+
font-size: 32px;
|
7
|
+
min-width: 38px;
|
8
|
+
max-width: 60px;
|
9
|
+
}
|
10
|
+
|
11
|
+
.code-input--separated {
|
12
|
+
margin-right: vd-grid-unit(4);
|
13
|
+
}
|
14
|
+
|
15
|
+
@include vd-viewport-media-max(small) {
|
16
|
+
.code-input--field {
|
17
|
+
font-size: 15px;
|
18
|
+
max-width: 42px;
|
19
|
+
}
|
20
|
+
|
21
|
+
.code-input--separated {
|
22
|
+
margin-right: vd-grid-unit(3);
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|