Import ODS.

We consciously decided against importing the history: it's quite huge, contains a lot of bloat (e.g. UiKit assets) and because of the reformatting git blame is only useful with some effort.

.gitignore

@@ -48,6 +48,9 @@ comments.file
 /packages/web-runtime/themes/*
 !/packages/web-runtime/themes/owncloud/
 
+# Compiled tokens
+/packages/design-system/src/assets/tokens/
+
 # Report for tests
 tests/report/cucumber_report.json
 tests/report/cucumber_report.html

packages/design-system/.babelrc

@@ -0,0 +1,24 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-runtime"
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        "@babel/preset-env"
+      ],
+      "plugins": [
+        "@babel/plugin-syntax-dynamic-import",
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-object-rest-spread",
+        "babel-plugin-require-context-hook"
+      ]
+    }
+  }
+}

packages/design-system/.depcheckrc

@@ -0,0 +1,16 @@
+{
+  "ignores": [
+    "autoprefixer",
+    "easygettext",
+    "webpack-dev-server",
+    "stylelint-config-standard",
+    "stylelint-config-sass-guidelines",
+    "style-loader",
+    "postcss-url",
+    "postcss-import"
+  ],
+  "ignorePatterns": [
+    "src/styles/**/*.scss",
+    "docs/**/*.scss"
+  ]
+}

packages/design-system/.stylelintrc.json

@@ -0,0 +1,13 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
+  "rules": {
+    "scss/at-extend-no-missing-placeholder": null,
+    "max-nesting-depth": null,
+    "selector-class-pattern": null,
+    "selector-max-compound-selectors": null,
+    "selector-max-id": null,
+    "selector-no-qualifying-type": null,
+    "property-no-vendor-prefix": null,
+    "string-quotes": "double"
+  }
+}

packages/design-system/CNAME

@@ -0,0 +1 @@
+owncloud.design

packages/design-system/README.md

@@ -0,0 +1,5 @@
+# ownCloud Design System
+
+**ownCloud Design System** is based on [Vue Design System](https://vueds.com/) - **Thanks a lot to [@viljamis](https://twitter.com/viljamis)**
+
+Head over to the [generated docs](https://owncloud.github.io/owncloud-design-system/) for more information!

packages/design-system/build/build-tokens.js

@@ -0,0 +1,44 @@
+const StyleDictionary = require('style-dictionary')
+const path = require('path')
+const yaml = require('yaml')
+
+StyleDictionary.registerFormat(require('./build-tokens/format-writer-json'))
+StyleDictionary.registerFormat(require('./build-tokens/format-writer-scss'))
+StyleDictionary.registerTransform(require('./build-tokens/transform-color'))
+StyleDictionary.registerTransform(require('./build-tokens/transform-namespace'))
+
+StyleDictionary.extend({
+  parsers: [
+    {
+      pattern: /\.yaml$/,
+      parse: ({ contents }) => yaml.parse(contents)
+    }
+  ],
+  source: [path.join(__dirname, '../src/tokens/**/*.yaml')],
+  platforms: {
+    default: {
+      transforms: ['name/cti/kebab', 'transform/ods/namespace', 'transform/ods/color'],
+      buildPath: 'src/assets/tokens/',
+      files: [
+        {
+          destination: 'ods.scss',
+          format: 'format/ods/scss',
+          filter: ({ filePath }) => filePath.includes('/ods/'),
+          report: {
+            colorContrast: true
+          }
+        },
+        {
+          destination: 'ods.json',
+          format: 'format/ods/json',
+          filter: ({ filePath }) => filePath.includes('/ods/')
+        },
+        {
+          destination: 'docs.scss',
+          format: 'format/ods/scss',
+          filter: ({ filePath }) => filePath.includes('/docs/')
+        }
+      ]
+    }
+  }
+}).buildAllPlatforms()

packages/design-system/build/build-tokens/format-report-color-contrast.js

@@ -0,0 +1,71 @@
+const { checkContrast, getPropType } = require('./utils')
+const chalk = require('chalk')
+const util = require('util')
+
+module.exports = (prop) => {
+  if (getPropType(prop) !== 'color' || !prop.check?.contrast) {
+    return
+  }
+  const reports = []
+
+  ;[...(Array.isArray(prop.check.contrast) ? prop.check.contrast : [prop.check.contrast])].forEach(
+    (contrast) => {
+      ;[
+        ...(Array.isArray(contrast.background) ? contrast.background : [contrast.background])
+      ].forEach((background) => {
+        reports.push(
+          checkContrast({
+            givenColor: prop.value,
+            givenBackground: background,
+            ratio: contrast.ratio
+          })
+        )
+      })
+    }
+  )
+
+  if (reports.every((report) => report.givenRatio.valid)) {
+    return
+  }
+
+  const printer = [chalk.red(util.format(`✗  %s`, chalk.bold(prop.name)))]
+  reports.forEach((report, i) => {
+    printer.push('   ----------------------------------------------------------------------------')
+    printer.push(
+      util.format(
+        `   %s  %s has a contrast ratio of %s on %s`,
+        chalk.bold(report.givenRatio.valid ? '✓' : '✗'),
+        chalk.bold(
+          chalk.hex(report.givenColor.toHexString())(`■ ${report.givenColor.toRgbString()}`)
+        ),
+        chalk.bold(report.givenRatio.value),
+        chalk.bold(
+          chalk.hex(report.givenBackground.toHexString())(
+            `■ ${report.givenBackground.toRgbString()}`
+          )
+        )
+      )
+    )
+    printer.push(
+      util.format(
+        `      %s with a ratio of %s fixes this`,
+        chalk.bold(
+          chalk.hex(report.recommendedColor.toHexString())(
+            `■ ${report.recommendedColor.toRgbString()}`
+          )
+        ),
+        chalk.bold(report.recommendedRatio.value),
+        chalk.bold(
+          chalk.hex(report.givenBackground.toHexString())(
+            `■ ${report.givenBackground.toRgbString()}`
+          )
+        )
+      )
+    )
+    if (i + 1 === reports.length) {
+      printer.push('\n')
+    }
+  })
+
+  console.log(printer.join('\n'))
+}

packages/design-system/build/build-tokens/format-writer-json.js

@@ -0,0 +1,39 @@
+const tinyColor = require('tinycolor2')
+const { getPropType, sortProps, getPropCategory } = require('./utils')
+const formatWriter = require('./format')
+
+module.exports = {
+  name: 'format/ods/json',
+  formatter: (dictionary) => {
+    const attributes = sortProps(dictionary.allProperties).reduce((acc, cur) => {
+      const prop = {
+        value: cur.value,
+        name: cur.name,
+        type: getPropType(cur),
+        category: getPropCategory(cur),
+        info: {}
+      }
+
+      if (prop.type === 'color') {
+        const color = tinyColor(cur.value)
+        prop.info.hex = color.toHexString()
+        prop.info.rgb = color.toRgbString()
+        prop.info.hsl = color.toHslString()
+        prop.info.hsv = color.toHsvString()
+      }
+
+      acc[cur.name] = prop
+
+      return acc
+    }, {})
+    const data = [
+      '{',
+      Object.keys(attributes)
+        .map((k) => `  "${k}": ${JSON.stringify(attributes[k])}`)
+        .join(',\n'),
+      '}'
+    ].join('\n')
+
+    return formatWriter({ data, dictionary })
+  }
+}

packages/design-system/build/build-tokens/format-writer-scss.js

@@ -0,0 +1,19 @@
+const { sortProps } = require('./utils')
+const formatWriter = require('./format')
+
+module.exports = {
+  name: 'format/ods/scss',
+  formatter: (dictionary) => {
+    const props = sortProps(dictionary.allProperties)
+    const data = [
+      ...props.map((p) => `$${p.name}: ${p.value};`),
+      '',
+      ':host, :root {',
+      ...props.map((p) => `  --${p.name}: #{$${p.name}};`),
+      '}',
+      ''
+    ].join('\n')
+
+    return formatWriter({ data, dictionary })
+  }
+}

packages/design-system/build/build-tokens/format.js

@@ -0,0 +1,10 @@
+const { sortProps } = require('./utils')
+const reportColorContrast = require('./format-report-color-contrast')
+
+module.exports = ({ data, dictionary }) => {
+  if (dictionary.file.report?.colorContrast) {
+    sortProps(dictionary.allProperties).forEach(reportColorContrast)
+  }
+
+  return data
+}

packages/design-system/build/build-tokens/transform-color.js

@@ -0,0 +1,31 @@
+const path = require('path')
+const tinyColor = require('tinycolor2')
+
+module.exports = {
+  name: 'transform/ods/color',
+  type: 'value',
+  transitive: true,
+  matcher: (prop) => [path.parse(prop.filePath).name].includes('color'),
+  transformer: function ({ value, transform = {} }) {
+    const { lighten, brighten, darken, desaturate, saturate } = transform
+    const color = tinyColor(value)
+
+    if (lighten) {
+      color.lighten(parseInt(lighten))
+    }
+    if (brighten) {
+      color.brighten(parseInt(brighten))
+    }
+    if (darken) {
+      color.darken(parseInt(darken))
+    }
+    if (desaturate) {
+      color.desaturate(parseInt(desaturate))
+    }
+    if (saturate) {
+      color.saturate(parseInt(saturate))
+    }
+
+    return color.toRgbString()
+  }
+}

packages/design-system/build/build-tokens/transform-namespace.js

@@ -0,0 +1,9 @@
+module.exports = {
+  name: 'transform/ods/namespace',
+  type: 'name',
+  transformer: function (prop) {
+    return ['oc', prop.filePath.split('/').some((n) => n === 'docs') ? 'docs' : '', prop.name]
+      .filter(Boolean)
+      .join('-')
+  }
+}

packages/design-system/build/build-tokens/utils.js

@@ -0,0 +1,77 @@
+const tinyColor = require('tinycolor2')
+const path = require('path')
+const { color } = require('style-value-types')
+const { contrast, generateContrastColors } = require('@adobe/leonardo-contrast-colors')
+const getContrast = (color, on) =>
+  contrast(
+    Object.values(tinyColor(color).toRgb()),
+    Object.values(tinyColor(on).toRgb()),
+    undefined
+  ).toFixed(2)
+
+exports.checkContrast = ({
+  givenColor,
+  givenBackground = 'rgb(255, 255, 255)',
+  ratio = 3.5,
+  colorspace = 'CAM02',
+  output = 'RGB'
+}) => {
+  givenColor = tinyColor(givenColor)
+  givenBackground = tinyColor(givenBackground)
+  const recommendedColor = tinyColor(
+    generateContrastColors({
+      colorKeys: [givenColor.toRgbString()],
+      base: givenBackground.toRgbString(),
+      ratios: [ratio + 0.1],
+      colorspace,
+      output
+    })[0]
+  )
+
+  return {
+    givenColor,
+    givenBackground,
+    givenRatio: {
+      value: getContrast(givenColor.toRgbString(), givenBackground.toRgbString()),
+      get valid() {
+        return this.value >= ratio
+      }
+    },
+    recommendedColor,
+    recommendedRatio: {
+      value: getContrast(recommendedColor.toRgbString(), givenBackground.toRgbString()),
+      get valid() {
+        return this.value >= ratio
+      }
+    }
+  }
+}
+
+exports.getPropType = (prop) => {
+  const { type } = prop.arguments | {}
+
+  if (type) {
+    return type
+  } else if (color.test(prop.value)) {
+    return 'color'
+  } else if (!isNaN(parseInt(prop.value)) || !isNaN(parseFloat(prop.value))) {
+    return 'number'
+  }
+
+  return '...'
+}
+
+exports.getPropCategory = (prop) => path.parse(prop.filePath).name
+
+exports.sortProps = (props) => {
+  return props.sort((a, b) => {
+    if (a.name < b.name) {
+      return -1
+    }
+    if (a.name > b.name) {
+      return 1
+    }
+
+    return 0
+  })
+}