@lightspeed/design-system-css 0.1.0

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lightspeed/design-system-css",
+  "version": "0.1.0",
+  "description": "Lightspeed's Design System in CSS",
+  "author": "Lightspeed Commerce Inc.",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && yarn lint && yarn build:minimal",
+    "build:themes": "yarn ts-node ./src/themes/themeToScss",
+    "build:minimal": "yarn tsc && node-sass -q src/vend-styles/vend-styles.scss -o dist/",
+    "build-watch": "yarn lint && yarn build:themes && node-sass -rw src/ -o dist/",
+    "test": "true",
+    "lint": "yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"
+  },
+  "dependencies": {
+    "react-datepicker": "^4.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^16.11.2",
+    "node-sass": "^4.9.3",
+    "stylelint": "^13.5.0",
+    "stylelint-scss": "^3.17.2",
+    "ts-node": "^10.3.1"
+  }
+}

package/src/fonts-ui/fonts-ns.scss

@@ -0,0 +1,14 @@
+$vd-font-weight--regular: 400;
+$vd-font-weight--bold: 700;
+$vd-font-weight--ultra-bold: 900;
+
+$vd-font-cdn-path: '//vendfrontendassets.freetls.fastly.net/fonts/';
+
+// Font-Awesome font location
+$fa-font-path: '#{$vd-font-cdn-path}/fa-v4';
+
+// Vend.UI font location
+$vd-font-src: $vd-font-cdn-path;
+
+$vd-font-lato: lato, 'Helvetica Neue', helvetica, roboto, arial, sans-serif;
+$vd-font-primary: $vd-font-lato;

package/src/images-ui/images-ui-ns.scss

@@ -0,0 +1 @@
+$vd-images-cdn-path: '//vendfrontendassets.freetls.fastly.net/images/'

package/src/index.ts

@@ -0,0 +1,9 @@
+export {
+  xSeriesDarkTheme,
+  xSeriesDarkThemeByCategory,
+} from './themes/xseries/dark'
+
+export {
+  xSeriesLightTheme,
+  xSeriesLightThemeByCategory,
+} from './themes/xseries/light'

package/src/themes/themeToScss.ts

@@ -0,0 +1,67 @@
+import fs from 'fs'
+import { requiredRgbSwatches, ThemeConfig } from './types'
+import { xSeriesLightTheme } from './xseries/light'
+import { xSeriesDarkTheme } from './xseries/dark'
+
+const THEME_DIR = './src/vend.ui/styles/global/colour/themes'
+const HEADER = '// THIS IS A GENERATED FILE. DO NOT EDIT.\n\n'
+const NO_LINT_START = '// stylelint-disable vend/use-colour-function'
+const NO_LINT_END = '// stylelint-enable vend/use-colour-function'
+
+const themes: ThemeConfig[] = [
+  {
+    theme: xSeriesLightTheme,
+    mapName: 'vd-xseries-theme-light',
+    filename: `${THEME_DIR}/xseries/_theme-light.scss`,
+  },
+  {
+    theme: xSeriesDarkTheme,
+    mapName: 'vd-xseries-theme-dark',
+    filename: `${THEME_DIR}/xseries/_theme-dark.scss`,
+  },
+]
+
+const camelToKebab = (s: string) =>
+  s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
+
+const getKebabKey = (key: string) => {
+  // supplementaryText needs two kebab dashes, supplementary--text ¯\_(ツ)_/¯
+  return camelToKebab(key === 'supplementaryText' ? 'supplementary-Text' : key)
+}
+
+const saveScssMapFile = (filename: string, content: any) => {
+  fs.writeFile(filename, content, err => {
+    if (err) {
+      // eslint-disable-next-line no-console
+      console.error(err)
+      process.exit(1)
+    }
+  })
+}
+
+// Converts theme to SCSS map
+export const themeToScss = ({ theme, mapName, filename }: ThemeConfig) => {
+  const colours = Object.entries(theme).map(c => {
+    const kebabKey = getKebabKey(c[0])
+    return `\n  ${kebabKey}:${c[1]}`
+  })
+  const scssMap = `${HEADER}${NO_LINT_START}\n\n$${mapName}: (${colours});\n\n${NO_LINT_END}`
+  return saveScssMapFile(filename, scssMap)
+}
+
+// Generates SCSS lists of required / available theme keys
+const requiredThemeKeysToScss = () => {
+  const baseKeys = Object.keys(xSeriesLightTheme).map(k => getKebabKey(k))
+  const rgbKeys = requiredRgbSwatches.map(k => getKebabKey(k))
+  const allKeys = baseKeys.concat(rgbKeys.map(k => `${k}-rgb`))
+
+  const requiredBaseKeys = `$vd-theme-required-base-keys: ${baseKeys};`
+  const requiredRgbKeys = `$vd-theme-available-rgb-keys: ${rgbKeys};`
+  const availableThemeKeys = `$vd-theme-available-keys: ${allKeys};`
+
+  const scssList = `${HEADER}${requiredBaseKeys}\n${requiredRgbKeys}\n${availableThemeKeys}`
+  return saveScssMapFile(`${THEME_DIR}/_theme-keys.scss`, scssList)
+}
+
+themes.forEach(theme => themeToScss(theme))
+requiredThemeKeysToScss()

package/src/themes/types.ts

@@ -0,0 +1,68 @@
+export interface ThemeConfig {
+  theme: Theme
+  mapName: string
+  filename: string
+}
+
+export interface Theme {
+  background: string
+  backgroundInverse: string
+  box: string
+  boxInverse: string
+  boxSupplementary: string
+  do: string
+  doDarker: string
+  doHighlight: string
+  doLighter: string
+  framing: string
+  framingInverse: string
+  go: string
+  goDarker: string
+  goHighlight: string
+  goLighter: string
+  goldenSand: string
+  gothic: string
+  keyline: string
+  keylineInverse: string
+  lavenderPurple: string
+  navIconSelected: string
+  navIconUnselected: string
+  navSideDrawer: string
+  navSideTabs: string
+  navTop: string
+  newYorkPink: string
+  no: string
+  noDarker: string
+  noHighlight: string
+  noLighter: string
+  overlay: string
+  selectArrowsBg: string
+  shadow: string
+  shuttleGray: string
+  sinbad: string
+  success: string
+  supplementary: string
+  supplementaryDarker: string
+  supplementaryHighlight: string
+  supplementaryLighter: string
+  supplementaryText: string
+  tacao: string
+  text: string
+  textAction: string
+  textInverse: string
+  textNav: string
+}
+
+// Some swatches require an "rgb" swatch (e.g. vd-background--rgb) to help apps integrate themes
+export const requiredRgbSwatches = [
+  'background',
+  'box',
+  'boxInverse',
+  'do',
+  'go',
+  'navSideDrawer',
+  'navSideTabs',
+  'navTop',
+  'no',
+  'supplementary',
+]

package/src/themes/xseries/dark.ts

@@ -0,0 +1,90 @@
+import { Theme } from '../types'
+
+const backgrounds = {
+  inert: {
+    background: '#141217',
+    box: '#1E1C21',
+    backgroundInverse: '#F4F2F5',
+    boxInverse: '#FFFFFF',
+    success: '#15BF20',
+  },
+  interactive: {
+    goLighter: '#6054FF',
+    go: '#477BFF',
+    goDarker: '#352ACF',
+    goHighlight: 'rgba(0, 23, 229, .1)',
+    noLighter: '#D4301D',
+    no: '#EB4F29',
+    noDarker: '#A12416',
+    supplementaryLighter: '#3C6996',
+    supplementary: '#5B83AC',
+    supplementaryDarker: '#284563',
+  },
+}
+
+const foregrounds = {
+  inert: {
+    text: '#E7E5E8',
+    textInverse: '#0B0B0B',
+    textAction: '#FFFFFF',
+    selectArrowsBg: '#E7E5E8',
+
+    shadow: 'rgba(0, 0, 0, 0.35)',
+    overlay: 'rgba(43, 54, 61, 0.65)',
+  },
+  borders: {
+    framing: '#27252A',
+    keyline: '#37353A',
+    framingInverse: '#E7E5E8',
+    keylineInverse: '#C9C7CA',
+  },
+}
+
+const discretionary = {
+  goldenSand: '#E6B03D',
+  tacao: '#ED6B44',
+  newYorkPink: '#DE3CEC',
+  gothic: '#A02FB6',
+  lavenderPurple: '#501897',
+  sinbad: '#6952F6',
+  shuttleGray: '#5D5D5D',
+}
+
+const navigation = {
+  // When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
+  navTop: '#0B0B0B',
+  navSideTabs: '#27252A',
+  navSideDrawer: '#1E1C21',
+  navIconUnselected: '#FFFFFF',
+  navIconSelected: '#E7E5E8',
+}
+
+const deprecated = {
+  boxSupplementary: '#27252A',
+  textNav: '#FFFFFF',
+  supplementaryText: '#5B83AC',
+  supplementaryHighlight: 'rgba(0, 61, 229, .1)',
+  doHighlight: 'rgba(0, 23, 229, .1)',
+  noHighlight: 'rgba(229, 0, 0,.1)',
+  doLighter: '#618EFF',
+  do: '#477BFF',
+  doDarker: '#406FE5',
+}
+
+export const xSeriesDarkThemeByCategory = {
+  backgrounds,
+  foregrounds,
+  discretionary,
+  navigation,
+  deprecated,
+}
+
+export const xSeriesDarkTheme: Theme = {
+  ...backgrounds.inert,
+  ...backgrounds.interactive,
+  ...foregrounds.inert,
+  ...foregrounds.borders,
+  ...discretionary,
+  ...navigation,
+  ...deprecated,
+}

package/src/themes/xseries/light.ts

@@ -0,0 +1,89 @@
+import { Theme } from '../types'
+
+const backgrounds = {
+  inert: {
+    background: '#F4F2F5',
+    box: '#FFFFFF',
+    backgroundInverse: '#141217',
+    boxInverse: '#1E1C21',
+    success: '#0E7B1D',
+  },
+  interactive: {
+    goLighter: '#6054FF',
+    go: '#3F32F5',
+    goDarker: '#352ACF',
+    goHighlight: 'rgba(128, 140, 255, .1)',
+    noLighter: '#D4301D',
+    no: '#BB2A1A',
+    noDarker: '#A12416',
+    supplementaryLighter: '#3C6996',
+    supplementary: '#32577D',
+    supplementaryDarker: '#284563',
+  },
+}
+
+const foregrounds = {
+  inert: {
+    text: '#27252A',
+    textInverse: '#FFFFFF',
+    textAction: '#FFFFFF',
+    selectArrowsBg: '#27252A',
+    shadow: 'rgba(0, 0, 0, 0.35)',
+    overlay: 'rgba(0, 0, 0, 0.35)',
+  },
+  borders: {
+    framing: '#E7E5E8',
+    keyline: '#C9C7CA',
+    framingInverse: '#27252A',
+    keylineInverse: '#37353A',
+  },
+}
+
+const discretionary = {
+  goldenSand: '#E6B03D',
+  tacao: '#ED6B44',
+  newYorkPink: '#DE3CEC',
+  gothic: '#A02FB6',
+  lavenderPurple: '#501897',
+  sinbad: '#6952F6',
+  shuttleGray: '#5D5D5D',
+}
+
+const navigation = {
+  // When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
+  navTop: '#0B0B0B',
+  navSideTabs: '#E7E5E8',
+  navSideDrawer: '#FFFFFF',
+  navIconUnselected: '#27252A',
+  navIconSelected: '#3F32F5',
+}
+
+const deprecated = {
+  boxSupplementary: '#E7E5E8',
+  textNav: '#FFFFFF',
+  supplementaryText: '#32577D',
+  supplementaryHighlight: 'rgba(76, 124, 255, 0.1)',
+  doHighlight: 'rgba(128, 140, 255, .1)',
+  noHighlight: 'rgba(255, 128, 128, .1)',
+  doLighter: '#6054FF',
+  do: '#3F32F5',
+  doDarker: '#352ACF',
+}
+
+export const xSeriesLightThemeByCategory = {
+  backgrounds,
+  foregrounds,
+  discretionary,
+  navigation,
+  deprecated,
+}
+
+export const xSeriesLightTheme: Theme = {
+  ...backgrounds.inert,
+  ...backgrounds.interactive,
+  ...foregrounds.inert,
+  ...foregrounds.borders,
+  ...discretionary,
+  ...navigation,
+  ...deprecated,
+}

package/src/vend-stylelint/use-colour-function.js

@@ -0,0 +1,60 @@
+const stylelint = require('stylelint')
+const ruleName = 'vend/use-colour-function'
+
+const message = '[VEND] Use the vd-colour SASS function when defining a colour.'
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  expected() {
+    return message
+  },
+})
+
+module.exports = stylelint.createPlugin(ruleName, function(enabled) {
+  if (!enabled) {
+    return
+  }
+
+  // Matches hex, 'rgb', (not -rgb, ignores vend sass functions and values that are prefixed with -) and hsl colours; 'named' colours are
+  // prohibited via the `color-named` rule
+  const UNSUPPORTED_COLOUR_MATCHER = /(?<!-)rgb|hsl|^#([a-fA-F0-9]){3}$|[a-fA-F0-9]{6}$/
+
+  return function(root, result) {
+    // Ensure no named colours are used
+    stylelint.utils.checkAgainstRule(
+      {
+        ruleName: 'color-named',
+        ruleSettings: ['never'],
+        root,
+      },
+      warning => {
+        stylelint.utils.report({
+          message,
+          ruleName,
+          result,
+          node: warning.node,
+          line: warning.line,
+          column: warning.column,
+        })
+      }
+    )
+
+    root.walkDecls(function(decl) {
+      const { value, prop } = decl
+      const isUnsupportedColourValue = value.match(UNSUPPORTED_COLOUR_MATCHER)
+
+      if (!isUnsupportedColourValue) {
+        return
+      }
+
+      stylelint.utils.report({
+        result,
+        ruleName,
+        message: messages.expected(`${prop}, ${value}`),
+        node: decl,
+        word: value,
+      })
+    })
+  }
+})
+
+module.exports.ruleName = ruleName
+module.exports.messages = messages

package/src/vend-styles/components/BarChart/BarChart.scss

@@ -0,0 +1,45 @@
+/* stylelint-disable vend/use-colour-function */
+$bar-chart-background-fill: #F2F2F2;
+$bar-chart-primary-text-color: #76A27B;
+$bar-chart-secondary-text-color: #959595;
+$chart-fill: #009D12;
+$chart-line: #009D12;
+/* stylelint-enable vend/use-colour-function */
+
+$bar-chart-primary-text-size: 14px;
+$bar-chart-secondary-text-size: 13px;
+
+.vd-bar-chart-container {
+  font-size: 11px;
+
+  .y.axis .domain{
+    stroke: none;
+    display: none;
+  }
+
+  .y.axis .tick line {
+    display: none;
+  }
+
+  .y.axis text{
+    font-size: $bar-chart-primary-text-size;
+    fill: $bar-chart-primary-text-color;
+  }
+
+  .bar{
+    fill: $chart-fill;
+    opacity: 0.15;
+  }
+  .top{
+    fill: $chart-line;
+  }
+
+  .bar-label{
+    font-size: $bar-chart-secondary-text-size;
+    fill: $bar-chart-secondary-text-color;
+  }
+
+  .bar-chart-background {
+    fill: $bar-chart-background-fill;
+  }
+}

package/src/vend-styles/components/Carousel/Carousel.scss

@@ -0,0 +1,114 @@
+.vd-carousel-wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+
+  @keyframes vd-slide-in-left {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  @keyframes vd-slide-out-left {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(-200%);
+    }
+  }
+  @keyframes vd-slide-right {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  .vd-carousel-frame {
+    display: flex;
+    flex: 1 0 100%;
+    order: 2;
+    visibility: hidden;
+    max-width: 100%;
+
+    animation-duration: 0.5s;
+    animation-timing-function: ease-in-out;
+  }
+
+  .vd-carousel-frame-content {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+
+  .vd-carousel-frame-transition-left,
+  .vd-carousel-frame-transition-right {
+    visibility: visible;
+    order: 1;
+  }
+
+  .vd-carousel-frame-active {
+    visibility: visible;
+    order: 0;
+
+    &.vd-carousel-frame-transition-left {
+      animation-name: vd-slide-in-left;
+    }
+
+    &.vd-carousel-frame-transition-right {
+      animation-name: vd-slide-right;
+    }
+  }
+
+  .vd-carousel-frame-transition-left:not(.vd-carousel-frame-active) {
+    animation-name: vd-slide-out-left;
+  }
+
+  .vd-carousel-frame-transition-right:not(.vd-carousel-frame-active) {
+    animation-name: vd-slide-right;
+  }
+
+  .vd-carousel-paginator {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background-color: vd-colour(box);
+    padding-top: 8px;
+    height: auto;
+  }
+
+  .vd-carousel-paginator-paddle {
+    width: 45px;
+    font-size: 18px;
+  }
+
+  .vd-carousel-paginator-indicators {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .vd-carousel-paginator-indicator {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: vd-colour(keyline);
+    }
+  }
+
+  .vd-carousel-paginator-indicator--active::before {
+    background-color: vd-colour(do);
+  }
+}

package/src/vend-styles/components/CodeInput/CodeInput.scss

@@ -0,0 +1,25 @@
+@import '../../../vend.ui/styles/global/non-styles';
+
+.code-input--field {
+  font-weight: $vd-font-weight--bold;
+  text-align: center;
+  font-size: 32px;
+  min-width: 38px;
+  max-width: 60px;
+}
+
+.code-input--separated {
+  margin-right: vd-grid-unit(4);
+}
+
+@include vd-viewport-media-max(small) {
+  .code-input--field {
+    font-size: 15px;
+    max-width: 42px;
+  }
+
+  .code-input--separated {
+    margin-right: vd-grid-unit(3);
+  }
+}
+

package/src/vend-styles/components/CurrencyInput/CurrencyInput.scss

@@ -0,0 +1,4 @@
+.vd-currency-input-container {
+  position: relative;
+  font-size: 15px;
+}