@telus-uds/system-theme-tokens 2.7.0 → 2.9.0

package/CHANGELOG.md

@@ -1,18 +1,46 @@
 # Change Log - @telus-uds/system-theme-tokens
 
-This log was last generated on Fri, 14 Oct 2022 19:26:37 GMT and should not be manually modified.
+This log was last generated on Wed, 07 Dec 2022 15:09:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.9.0
+
+Wed, 07 Dec 2022 15:09:47 GMT
+
+### Minor changes
+
+- Add generated Swift structs (alan.slater@nearform.com)
+-  QuickLinksFeature component implementation (tiagohldb@gmail.com)
+- Adding iconPosition for ButtonGroup (tiagohldb@gmail.com)
+- Add generated Kotlin type classes (alan.slater@nearform.com)
+
+### Patches
+
+- enable icon padding top for icons themes (mauricio.batresmontejo@telus.com)
+
+## 2.8.0
+
+Tue, 08 Nov 2022 01:35:30 GMT
+
+### Minor changes
+
+- feat: add ButtonDropdown component. (ugursysl@gmail.com)
+- Background feature for Carousel (tiagohldb@gmail.com)
+- Add platform specificity to some appearances (alan.slater@nearform.com)
+- Box gradient (tiagohldb@gmail.com)
+- feat: add clear button tokens to TextInput (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-constants to v1.2.0
+
 ## 2.7.0
 
-Fri, 14 Oct 2022 19:26:37 GMT
+Fri, 14 Oct 2022 19:30:03 GMT
 
 ### Minor changes
 
 - Implementing hide label for pagination on larger screens (tiagohldb@gmail.com)
 - feat: add tokens for TextInput buttons (ruslan.bredikhin@nearform.com)
-- Update `Button` theme with `textLine` and `textLineStyle`  (shahzaibkhalidmalik@outlook.com)
+- Update `Button` theme with `textLine` and `textLineStyle` (shahzaibkhalidmalik@outlook.com)
 - Bump @telus-uds/system-constants to v1.1.0
 
 ## 2.6.0

package/appearances.js

@@ -7,6 +7,14 @@ const focus = {
   description:
     "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
   values: [true],
+  type: 'state',
+  platforms: ['rn'] // In most cases, Native Apps team want to skip focus state
+}
+
+const inputFocus = {
+  description:
+    'Focus states for some input elements are well supported across web, RN, ios and android',
+  values: [true],
   type: 'state'
 }
 
@@ -14,7 +22,8 @@ const hover = {
   description:
     "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
   values: [true],
-  type: 'state'
+  type: 'state',
+  platforms: ['rn'] // Native Apps team currently want to skip ios / android hover
 }
 
 const pressed = {
@@ -50,6 +59,12 @@ const validation = {
   type: 'state'
 }
 
+const open = {
+  description: 'Applies when a ButtonDropdown is open.',
+  values: [true],
+  type: 'state'
+}
+
 // TODO this is used in radio and checkbox, should re-use validation state above?
 const error = { values: [true], type: 'state' }
 
@@ -70,6 +85,7 @@ module.exports = {
     }
   },
   Button: { focus, hover, pressed, inactive, selected },
+  ButtonDropdown: { focus, hover, pressed, inactive, selected, open },
   ButtonGroupItem: { focus, hover, pressed, inactive, selected },
   CarouselTabsPanelItem: { focus, hover, pressed, inactive, selected },
   Checkbox: { checked, error, focus, hover, inactive },
@@ -138,9 +154,9 @@ module.exports = {
   QuickLinksList: { hover, focus, pressed },
   Radio: { checked, error, focus, hover, inactive },
   RadioCard: { pressed, checked, error, focus, hover, inactive },
-  Search: { hover, focus, inactive },
+  Search: { hover, focus: inputFocus, inactive },
   SearchButton: { hover, focus, pressed, inactive },
-  Select: { validation, hover, focus, inactive },
+  Select: { validation, hover, focus: inputFocus, inactive },
   SideNavItem: {
     active: {
       description:
@@ -167,7 +183,7 @@ module.exports = {
   },
   TabsItem: { focus, hover, pressed, selected },
   TagsItem: { focus, hover, pressed, inactive, selected },
-  TextInput: { validation, hover, focus, inactive },
+  TextInput: { validation, hover, inactive, focus: inputFocus },
   ToggleSwitch: { focus, hover, pressed, inactive, selected },
   TooltipButton: { focus, hover, pressed },
   SkipLink: { focus }

package/bin/android/build.js

@@ -0,0 +1,68 @@
+const { writeFile, rm, mkdir } = require('fs/promises')
+const { resolve } = require('path')
+const chalk = require('chalk')
+
+const components = require('../../components')
+const tokensTemplate = require('./templates/component')
+const modelsTemplate = require('./templates/model')
+const packageJson = require('../../package.json')
+const tokenTypes = require('./tokens')
+const { customEnums } = require('./types')
+
+// eslint-disable-next-line no-console
+const log = (message, colour = chalk.grey) => console.log(colour(message))
+
+async function build({ author = 'Telus' } = {}) {
+  log(chalk.grey('Beginning system-theme-tokens/android build:'))
+
+  const { version } = packageJson
+  const credit = `Created by ${author} from @telus-uds/system-theme-tokens ${version}`
+  const outputDir = resolve(__dirname, '../../generated/android')
+
+  const componentsDir = resolve(outputDir, 'Components')
+  const getComponentDirectory = (componentName) => resolve(componentsDir, componentName)
+  const componentEntries = Object.entries(components)
+
+  const modelsDir = resolve(outputDir, 'Models')
+  const models = Object.values(tokenTypes).filter(({ type }) =>
+    Object.values(customEnums).includes(type)
+  )
+
+  // Preparation
+  log(chalk.grey(' • Flushing android/output folders...'))
+  await rm(outputDir, { recursive: true, force: true })
+  await mkdir(outputDir)
+
+  // Models for UDS enum types
+  log(chalk.grey(` • Creating Kotlin enum definitions to model enum token types...`))
+  await mkdir(modelsDir)
+  await Promise.all(
+    models.map(async ({ type, values }) => {
+      const fileName = `${type}.kt`
+      const fileContents = modelsTemplate({ credit, type, values, fileName })
+      const filePath = resolve(modelsDir, fileName)
+      await writeFile(filePath, fileContents)
+    })
+  )
+
+  // Component directories
+  log(chalk.grey(` • Creating component folders in android/output/Components/...`))
+  await mkdir(componentsDir)
+  await Promise.all(
+    componentEntries.map(([componentName]) => mkdir(getComponentDirectory(componentName)))
+  )
+  // Component tokens definitions
+  log(chalk.grey(` • Creating Kotlin token type classes for every component...`))
+  await Promise.all(
+    componentEntries.map(async ([componentName, tokens]) => {
+      const fileName = `${componentName}Tokens.kt`
+      const fileContents = tokensTemplate({ credit, componentName, fileName, tokens })
+      const filePath = resolve(getComponentDirectory(componentName), fileName)
+      await writeFile(filePath, fileContents)
+    })
+  )
+
+  log(chalk.grey('✔️  Completed system-theme-tokens/android build.'))
+}
+
+module.exports = build

package/bin/android/templates/component.js

@@ -0,0 +1,67 @@
+const tokenTypes = require('../tokens')
+const getImports = require('./imports')
+const { customEnums } = require('../types')
+
+const headerTemplate = require('./header')
+
+function getKotlinType(tokenType) {
+  const { type, nullable } = tokenTypes[tokenType]
+  return nullable ? `${type}?` : type
+}
+
+const customEnumValues = Object.values(customEnums)
+
+function formatDefaultValue(defaultValue, type) {
+  if (typeof defaultValue === 'string') {
+    if (defaultValue.match(/^UDSColor/)) {
+      return defaultValue
+    }
+
+    return customEnumValues.includes(type) && defaultValue[0] === '.'
+      ? // Specify enum's default property
+        `${type}${defaultValue}`
+      : // Wrap string value in quotes
+        `"${defaultValue}"`
+  }
+
+  if (typeof defaultValue === 'number') {
+    switch (type) {
+      case 'Dp':
+        return `${defaultValue.toFixed(1)}dp`
+      case 'Double':
+        return defaultValue.toFixed(1)
+      default:
+        return defaultValue
+    }
+  }
+
+  return defaultValue
+}
+
+function getKotlinDefault(tokenType) {
+  const { default: defaultValue, type, nullable } = tokenTypes[tokenType]
+  if (defaultValue === undefined) return ''
+  if (nullable && defaultValue === null) return '' // don't need explicit nullable nulls
+
+  return ` = ${formatDefaultValue(defaultValue, type)}`
+}
+
+function componentTemplate({ componentName, credit, tokens }) {
+  const header = headerTemplate({
+    packageName: `com.telus.udsnative.components.${componentName.toLowerCase()}`,
+    credit,
+    imports: getImports(Object.values(tokens), ['com.telus.udsnative.models.Tokens'])
+  })
+
+  return `${header}data class ${componentName}Tokens(
+${Object.entries(tokens)
+  .map(
+    ([tokenName, tokenType]) => `    // UDS '${tokenType}' token
+    val ${tokenName}: ${getKotlinType(tokenType)}${getKotlinDefault(tokenType)}`
+  )
+  .join(',\n')}
+): Tokens
+`
+}
+
+module.exports = componentTemplate

package/bin/android/templates/header.js

@@ -0,0 +1,21 @@
+function formatPackage(packageName) {
+  return packageName
+    ? `package ${packageName}
+
+`
+    : ''
+}
+
+function formatImports(imports = []) {
+  return imports.length
+    ? `${imports.map((importName) => `import ${importName}`).join('\n')}
+
+`
+    : ''
+}
+
+function headerTemplate({ packageName, imports }) {
+  return `${formatPackage(packageName)}${formatImports(imports)}`
+}
+
+module.exports = headerTemplate

package/bin/android/templates/imports.js

@@ -0,0 +1,28 @@
+const { composeTypes, customTypes, customEnums } = require('../types')
+const tokenTypes = require('../tokens')
+
+function mapImports(source, path) {
+  // This pattern holds for everything so far; if there are exceptions, could add an object of them here
+  return Object.fromEntries(Object.values(source).map((value) => [value, `${path}${value}`]))
+}
+
+const composeImports = mapImports(composeTypes, 'androidx.compose.ui.unit.')
+const udsImports = mapImports({ ...customTypes, ...customEnums }, 'com.telus.udsnative.models.')
+const allImports = { ...composeImports, ...udsImports }
+
+function getImports(tokensValues, imports = []) {
+  tokensValues.forEach((token) => {
+    const { type: tokenType } = tokenTypes[token]
+    const importPath = allImports[tokenType]
+    if (importPath && !imports.includes(importPath)) {
+      imports.push(importPath)
+    }
+  })
+
+  // Follow convention of sorting imports alphabetically
+  imports.sort()
+
+  return imports
+}
+
+module.exports = getImports

package/bin/android/templates/model.js

@@ -0,0 +1,14 @@
+const headerTemplate = require('./header')
+
+function modelTemplate({ type, values }) {
+  const valuesKeys = Object.keys(values)
+
+  const header = headerTemplate({ packageName: 'com.telus.udsnative.models' })
+
+  return `${header}enum class ${type} {
+${valuesKeys.map((valueKey) => `    ${valueKey}`).join(',\n')}
+}
+`
+}
+
+module.exports = modelTemplate

package/bin/android/tokens.js

@@ -0,0 +1,55 @@
+const deepMerge = require('lodash.merge')
+const iosTokens = require('../ios/tokens')
+const { types } = require('./types')
+
+const nilToNull = (tokens) =>
+  Object.fromEntries(
+    Object.entries(tokens).map(([key, { default: defaultValue, ...values }]) => [
+      key,
+      { ...values, default: defaultValue === 'nil' ? null : defaultValue }
+    ])
+  )
+
+const androidTokens = deepMerge({}, nilToNull(iosTokens), {
+  size: {
+    // Gson sometimes has trouble deserializing Dp Optional; might need to use Int or Double?
+    type: types.Dp
+  },
+  border: {
+    type: types.Dp
+  },
+  color: {
+    type: types.Color,
+    default: 'UDSColor(0, 0, 0, 0)'
+  },
+  radius: {
+    type: types.Dp
+  },
+  shadow: {
+    type: types.Shadow
+  },
+  fontSize: {
+    type: types.TextUnit
+  },
+  lineHeight: {
+    type: types.Double
+  },
+  fontWeight: {
+    type: types.Int,
+    default: 400
+  },
+  opacity: {
+    type: types.Double
+  },
+  letterSpacing: {
+    type: types.Dp
+  },
+  duration: {
+    type: types.Double
+  },
+  iconScale: {
+    type: types.Double
+  }
+})
+
+module.exports = androidTokens

package/bin/android/types.js

@@ -0,0 +1,50 @@
+// Built-in Kotlin primitive types:
+const kotlinTypes = {
+  Double: 'Double', // Numbers to use in calculations
+  Int: 'Int', // Integers to use as indexes etc
+  String: 'String', // Arbitrary strings without an existing enum
+  Bool: 'Bool' // Boolean (true | false)
+}
+
+// These types are available as imports from androidx.compose
+const composeTypes = {
+  Dp: 'Dp',
+  TextUnit: 'TextUnit'
+}
+
+// These types are pre-defined in universal-design-system-android
+const customTypes = {
+  Color: 'UDSColor', // Custom class for objects with red, green, blue, alpha
+  PaletteGradient: 'PaletteGradient', // Custom class
+  Shadow: 'Shadow'
+}
+
+// These are enum types generated here
+const customEnums = {
+  TextAlignment: 'TextAlignmentToken',
+  TextLine: 'TextLineToken',
+  TextLineStyle: 'TextLineStyleToken',
+  BorderStyle: 'BorderStyleToken',
+  FlexAlign: 'FlexAlignToken',
+  FlexJustifyContent: 'FlexJustifyContentToken',
+  FontStyle: 'FontStyleToken',
+  Position: 'PositionToken',
+  Direction: 'DirectionToken',
+  VerticalAlign: 'VerticalAlignToken',
+  TextTransform: 'TextTransformToken'
+}
+
+const types = {
+  ...kotlinTypes,
+  ...composeTypes,
+  ...customEnums,
+  ...customTypes
+}
+
+module.exports = {
+  types,
+  kotlinTypes,
+  composeTypes,
+  customEnums,
+  customTypes
+}

package/bin/build-android.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+
+require('dotenv').config()
+const buildAndroid = require('./android/build')
+
+buildAndroid()

package/bin/build-ios.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+
+require('dotenv').config()
+const buildIos = require('./ios/build')
+
+buildIos()

package/bin/ios/build.js

@@ -0,0 +1,68 @@
+const { writeFile, rm, mkdir } = require('fs/promises')
+const { resolve } = require('path')
+const chalk = require('chalk')
+
+const components = require('../../components')
+const tokensTemplate = require('./templates/component')
+const modelsTemplate = require('./templates/model')
+const packageJson = require('../../package.json')
+const tokenTypes = require('./tokens')
+const { customEnums } = require('./types')
+
+// eslint-disable-next-line no-console
+const log = (message, colour = chalk.grey) => console.log(colour(message))
+
+async function build({ author = 'Telus' } = {}) {
+  log(chalk.grey('Beginning system-theme-tokens/ios build:'))
+
+  const { version } = packageJson
+  const credit = `Created by ${author} from @telus-uds/system-theme-tokens ${version}`
+  const outputDir = resolve(__dirname, '../../generated/ios')
+
+  const componentsDir = resolve(outputDir, 'Components')
+  const getComponentDirectory = (componentName) => resolve(componentsDir, componentName)
+  const componentEntries = Object.entries(components)
+
+  const modelsDir = resolve(outputDir, 'Models')
+  const models = Object.values(tokenTypes).filter(({ type }) =>
+    Object.values(customEnums).includes(type)
+  )
+
+  // Preparation
+  log(chalk.grey(' • Flushing ios/output folders...'))
+  await rm(outputDir, { recursive: true, force: true })
+  await mkdir(outputDir)
+
+  // Models for UDS enum types
+  log(chalk.grey(` • Creating Swift enum definitions to model enum token types...`))
+  await mkdir(modelsDir)
+  await Promise.all(
+    models.map(async ({ type, values }) => {
+      const fileName = `${type}.swift`
+      const fileContents = modelsTemplate({ credit, type, values, fileName })
+      const filePath = resolve(modelsDir, fileName)
+      await writeFile(filePath, fileContents)
+    })
+  )
+
+  // Component directories
+  log(chalk.grey(` • Creating component folders in ios/output/Components/...`))
+  await mkdir(componentsDir)
+  await Promise.all(
+    componentEntries.map(([componentName]) => mkdir(getComponentDirectory(componentName)))
+  )
+  // Component tokens definitions
+  log(chalk.grey(` • Creating Swift token type structs for every component...`))
+  await Promise.all(
+    componentEntries.map(async ([componentName, tokens]) => {
+      const fileName = `${componentName}Tokens.swift`
+      const fileContents = tokensTemplate({ credit, componentName, fileName, tokens })
+      const filePath = resolve(getComponentDirectory(componentName), fileName)
+      await writeFile(filePath, fileContents)
+    })
+  )
+
+  log(chalk.grey('✔️  Completed system-theme-tokens/ios build.'))
+}
+
+module.exports = build

package/bin/ios/templates/component.js

@@ -0,0 +1,46 @@
+const tokenTypes = require('../tokens')
+
+const headerTemplate = require('./header')
+
+function getSwiftType(tokenType) {
+  const { type, nullable } = tokenTypes[tokenType]
+  return nullable ? `${type}?` : type
+}
+
+function getSwiftDefault(tokenType) {
+  return ` = ${tokenTypes[tokenType].default}`
+}
+
+function componentTemplate({ componentName, fileName, credit, tokens }) {
+  const tokensEntries = Object.entries(tokens)
+  const header = headerTemplate({ fileName, credit, imports: ['SwiftUI'] })
+
+  return `${header}public struct ${componentName}Tokens: Tokens {
+${tokensEntries
+  .map(
+    ([tokenName, tokenType]) => `    // UDS '${tokenType}' token
+    public let ${tokenName}: ${getSwiftType(tokenType)}`
+  )
+  .join('\n')}
+
+    public init(
+${tokensEntries
+  .map(
+    ([tokenName, tokenType]) =>
+      `        ${tokenName}: ${getSwiftType(tokenType)}${getSwiftDefault(tokenType)}`
+  )
+  .join(',\n')}
+    ) {
+${tokensEntries
+  .map(
+    ([tokenName]) =>
+      // If we need fancy special-case mapping could add it as a function property to ios types
+      `        self.${tokenName} = ${tokenName}`
+  )
+  .join('\n')}
+    }
+}
+`
+}
+
+module.exports = componentTemplate

package/bin/ios/templates/header.js

@@ -0,0 +1,28 @@
+function formatName(fileName) {
+  return `//
+//  ${fileName}
+//
+`
+}
+
+function formatCredit(credit) {
+  if (!credit) return ''
+  return `//  ${credit}
+//
+`
+}
+
+function formatImports(imports = []) {
+  return imports.length
+    ? `
+${imports.map((importName) => `import ${importName}`).join('\n')}
+
+`
+    : ''
+}
+
+function headerTemplate({ fileName, credit, imports }) {
+  return `${formatName(fileName)}${formatCredit(credit)}${formatImports(imports)}`
+}
+
+module.exports = headerTemplate

package/bin/ios/templates/model.js

@@ -0,0 +1,14 @@
+const headerTemplate = require('./header')
+
+function modelTemplate({ type, values, fileName, credit }) {
+  const valuesKeys = Object.keys(values)
+
+  const header = headerTemplate({ fileName, credit, imports: ['SwiftUI'] })
+
+  return `${header}public enum ${type}: String, Codable {
+${valuesKeys.map((valueKey) => `  case ${valueKey}`).join('\n')}
+}
+`
+}
+
+module.exports = modelTemplate

package/bin/ios/tokens.js

@@ -0,0 +1,107 @@
+const deepMerge = require('lodash.merge')
+const rnTokens = require('../../tokens')
+const { types } = require('./types')
+
+const iosTokens = deepMerge({}, rnTokens, {
+  size: {
+    type: types.Double
+  },
+  border: {
+    type: types.Double
+  },
+  color: {
+    type: types.Color,
+    default: '.clear',
+    nullable: false
+  },
+  radius: {
+    type: types.Double
+  },
+  shadow: {
+    type: types.Shadow,
+    default: 'nil'
+  },
+  fontSize: {
+    type: types.CGFloat
+  },
+  lineHeight: {
+    type: types.CGFloat
+  },
+  flexJustifyContent: {
+    type: types.FlexJustifyContent,
+    default: '.flexStart'
+  },
+  flexAlign: {
+    type: types.FlexAlign,
+    default: '.flexStart'
+  },
+  fontName: {
+    type: types.String,
+    default: 'nil'
+  },
+  fontWeight: {
+    type: types.CGFloat
+  },
+  fontStyle: {
+    type: types.FontStyle,
+    default: '.normal'
+  },
+  opacity: {
+    type: types.Double
+  },
+  integer: {
+    type: types.Int
+  },
+  icon: {
+    type: types.String,
+    default: 'nil'
+  },
+  textLine: {
+    type: types.TextLine,
+    default: '.none'
+  },
+  textLineStyle: {
+    type: types.TextLineStyle,
+    default: '.none'
+  },
+  position: {
+    type: types.Position
+  },
+  direction: {
+    type: types.Direction,
+    default: '.column'
+  },
+  show: {
+    type: types.Bool
+  },
+  borderStyle: {
+    type: types.BorderStyle,
+    default: '.solid'
+  },
+  letterSpacing: {
+    type: types.CGFloat
+  },
+  verticalAlign: {
+    type: types.VerticalAlign,
+    default: '.baseline'
+  },
+  duration: {
+    type: types.Double // animate(withDuration) expects TimeInterval, which is a Double
+  },
+  iconScale: {
+    type: types.CGFloat // CGAffineTransform expects CGFloats
+  },
+  textAlign: {
+    type: types.TextAlignment
+  },
+  gradient: {
+    type: types.PaletteGradient,
+    default: 'nil'
+  },
+  textTransform: {
+    type: types.TextTransform,
+    default: '.none'
+  }
+})
+
+module.exports = iosTokens

package/bin/ios/types.js

@@ -0,0 +1,49 @@
+// Built-in Swift primitive types:
+const swiftTypes = {
+  CGFloat: 'CGFloat', // Numbers to pass to APIs that expect 32-bit or 64-bit floats depending on system
+  Double: 'Double', // Numbers to pass to APIs that always expect 64-bit floats
+  Int: 'Int', // Signed integer that is 32 bit or 64 bit depending on platform
+  String: 'String', // Arbitrary strings without an existing enum
+  Bool: 'Bool' // Boolean (true | false)
+}
+
+// These types are available as imports from SwiftUi
+const swiftUiTypes = {
+  TextAlignment: 'TextAlignment',
+  Color: 'Color'
+}
+
+// These types are pre-defined in universal-design-system-ios:
+// See https://github.com/telus/universal-design-system-ios/tree/main/Sources/UDSNative/Models
+const customStructs = {
+  Shadow: 'Shadow', // Custom UDS struct
+  PaletteGradient: 'PaletteGradient' // Custom UDS struct
+}
+
+const customEnums = {
+  TextLine: 'TextLineToken',
+  TextLineStyle: 'TextLineStyleToken',
+  BorderStyle: 'BorderStyleToken',
+  FlexAlign: 'FlexAlignToken',
+  FlexJustifyContent: 'FlexJustifyContentToken',
+  FontStyle: 'FontStyleToken',
+  Position: 'PositionToken',
+  Direction: 'DirectionToken',
+  VerticalAlign: 'VerticalAlignToken',
+  TextTransform: 'TextTransformToken'
+}
+
+const types = {
+  ...swiftTypes,
+  ...swiftUiTypes,
+  ...customEnums,
+  ...customStructs
+}
+
+module.exports = {
+  types,
+  swiftTypes,
+  swiftUiTypes,
+  customEnums,
+  customStructs
+}

package/components.js

@@ -1,7 +1,7 @@
 // Define the required components and their supported tokens
 module.exports = {
   ActivityIndicator: { size: 'size', thickness: 'border', color: 'color' },
-  Box: { backgroundColor: 'color' },
+  Box: { backgroundColor: 'color', gradient: 'gradient' },
   Button: {
     borderColor: 'color',
     borderWidth: 'border',
@@ -35,6 +35,44 @@ module.exports = {
     textLine: 'textLine',
     textLineStyle: 'textLineStyle'
   },
+  ButtonDropdown: {
+    icon: 'icon',
+    iconPosition: 'position',
+    iconSpace: 'integer',
+    iconSize: 'size',
+    iconColor: 'color',
+    iconPadding: 'size',
+    iconAlignSelf: 'flexAlign',
+    iconTranslateX: 'size',
+    iconTranslateY: 'size',
+    iconBackground: 'color',
+    iconBorderRadius: 'radius',
+    // These are duplicated Button tokens. TODO: consider token sets to reduce duplication.
+    // https://github.com/telus/universal-design-system/issues/782
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+    shadow: 'shadow',
+    fontSize: 'fontSize',
+    color: 'color',
+    lineHeight: 'lineHeight',
+    textAlign: 'flexJustifyContent',
+    alignSelf: 'flexAlign',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    backgroundColor: 'color',
+    opacity: 'opacity',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    width: 'size',
+    minWidth: 'size',
+    outerBorderColor: 'color',
+    outerBorderWidth: 'border',
+    outerBorderGap: 'size',
+    outerBackgroundColor: 'color'
+  },
   ButtonGroup: {
     space: 'integer',
     fieldSpace: 'integer',
@@ -69,7 +107,9 @@ module.exports = {
     outerBorderColor: 'color',
     outerBorderWidth: 'border',
     outerBorderGap: 'size',
-    outerBackgroundColor: 'color'
+    outerBackgroundColor: 'color',
+    iconSpace: 'integer',
+    iconSize: 'size'
   },
   Card: {
     flex: 'integer',
@@ -85,6 +125,7 @@ module.exports = {
     shadow: 'shadow'
   },
   Carousel: {
+    backgroundColor: 'color',
     nextIcon: 'icon',
     previousIcon: 'icon',
     showPreviousNextNavigation: 'show',
@@ -162,6 +203,7 @@ module.exports = {
     iconColor: 'color',
     iconSize: 'size',
     iconGap: 'size',
+    iconPaddingTop: 'size',
     iconPosition: 'position',
     verticalAlign: 'verticalAlign',
     justifyContent: 'flexJustifyContent',
@@ -484,6 +526,22 @@ module.exports = {
     iconSize: 'size',
     iconSpace: 'integer'
   },
+  QuickLinksFeature: {
+    stackSpace: 'integer',
+    stackGap: 'integer',
+    stackJustify: 'flexJustifyContent'
+  },
+  QuickLinksFeatureItem: {
+    color: 'color',
+    textLine: 'textLine',
+    imageDimension: 'size',
+    contentMaxDimension: 'size',
+    contentDirection: 'direction',
+    contentSpace: 'integer',
+    contentAlignItems: 'flexAlign',
+    textAlign: 'textAlign',
+    outerBorderColor: 'color'
+  },
   Radio: {
     checkedBackgroundColor: 'color',
     checkedSize: 'size',
@@ -820,6 +878,7 @@ module.exports = {
     buttonSize: 'size',
     buttonsGap: 'size',
     buttonsPaddingRight: 'size',
+    clearButtonIcon: 'icon',
     paddingTop: 'size',
     paddingBottom: 'size',
     paddingLeft: 'size',

package/index.js

@@ -4,5 +4,6 @@
  */
 module.exports = {
   components: require('./components'),
-  appearances: require('./appearances')
+  appearances: require('./appearances'),
+  tokens: require('./tokens')
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/system-theme-tokens",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "description": "Theme token schema for UDS",
   "keywords": [
     "system"
@@ -15,7 +15,10 @@
   "scripts": {
     "lint": "npm run --prefix ../.. lint:path -- --color packages/system-theme-tokens",
     "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/system-theme-tokens",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "build:android": "system-theme-tokens-build-android",
+    "build:ios": "system-theme-tokens-build-ios",
+    "build": "npm run build:android && npm run build:ios"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
@@ -25,6 +28,15 @@
     "skip": true
   },
   "dependencies": {
-    "@telus-uds/system-constants": "^1.1.0"
+    "@telus-uds/system-constants": "^1.2.0"
+  },
+  "devDependencies": {
+    "chalk": "^4.1.2",
+    "dotenv": "^10.0.0",
+    "lodash.merge": "^4.6.2"
+  },
+  "bin": {
+    "system-theme-tokens-build-android": "./bin/build-android.js",
+    "system-theme-tokens-build-ios": "./bin/build-ios.js"
   }
 }

package/tokens.js

@@ -0,0 +1,360 @@
+const { fontBasePixels, viewports } = require('@telus-uds/system-constants')
+
+/*
+ * Simulates an object that has every positive integer as a property
+ * e.g. integer[12345] --> 12345, integer.10px --> undefined
+ */
+const integer = new Proxy(
+  {},
+  {
+    get(self, key) {
+      const n = typeof key === 'string' ? Number(key) : key
+      if (!Number.isInteger(n) || n < 0) {
+        // React Native does some build-time type sniffing on `.prototype` and `.$$typeof`.
+        // Behave like a normal object, return `undefined` or the real default/prototype values.
+        return self[key]
+      }
+      return n
+    }
+  }
+)
+
+// Add a system size for each viewport
+// This adds 'viewportXs', 'viewportSm', 'viewportMd', etc..
+const viewportSizes = Object.fromEntries(
+  [...viewports.map].map(([viewportName, viewportValue]) => [
+    `viewport${viewportName.charAt(0).toUpperCase()}${viewportName.slice(1)}`,
+    viewportValue
+  ])
+)
+
+// Typescript types; may be used to generate .d.ts
+const types = {
+  integer: 'Number',
+  float: 'Number',
+  color: 'String',
+  string: 'String',
+  enum: ({ values }) =>
+    `'${Object.entries(values)
+      .map(([, value]) => value)
+      .join("'|'")}'`,
+  size: 'Number|String',
+  shadow:
+    '{"blur": Number, "color": String, "inset": Boolean, "offsetX": Number, "offsetY": Number, "spread": Number}',
+  gradient:
+    '{"type": ["linear"|"radial"], "angle": Number, "stops": Array<{"stop": Number, "color": String }>}'
+}
+
+const applyDynamicTypes = (tokens) =>
+  Object.fromEntries(
+    Object.entries(tokens).map(([key, properties]) => {
+      const { type, nullable } = properties
+      const typeDef = typeof type === 'function' ? type(properties) : type
+      return [
+        key,
+        {
+          ...properties,
+          type: nullable ? `${typeDef}|null` : typeDef
+        }
+      ]
+    })
+  )
+
+/**
+ * Every token type currently used in themes; i.e. every key on `palette` or `system` as
+ * used in theme source JSON files. Each token type has these properties:
+ *  - `default`: The expected behaviour where a component doesn't apply this token
+ *  - `type`: A platform-specific string which can be used in generated type files (e.g. Typescript type)
+ *  - `nullable`: If true, `null` (or platform equivalent) is a meaningful, valid value for this token
+ *  - `values`: An object of values that can be accessed via `system` like `{system.someType.someValue}`
+ */
+const tokenTypes = applyDynamicTypes({
+  size: {
+    // Size in device pixels that may be used for widths, heights, padding and spacing.
+    default: 0,
+    type: types.size,
+    nullable: true,
+    values: {
+      none: null,
+      full: '100%',
+      twoThirds: '66.67%',
+      zero: 0,
+      ...viewportSizes
+    }
+  },
+  border: {
+    // Width of a border line. To avoid layout shifts where border tokens change, implementations
+    // should consider if they need to also subtract this from an internal padding size.
+    default: 0,
+    nullable: false,
+    type: types.number,
+    values: {
+      zero: 0
+    }
+  },
+  color: {
+    // Accepts as input any colour value understood by TinyColor2 library, which accepts
+    // all common web formats and supports alpha transparency.
+    default: null,
+    nullable: true,
+    type: types.color,
+    values: {
+      transparent: 'transparent',
+      none: null
+    }
+  },
+  radius: {
+    default: 0,
+    nullable: true,
+    type: types.number,
+    values: {
+      zero: 0,
+      // On both React Native and Web, a border radius greater than width/height
+      // creates a circle or pill effect. Use this to create circles or near-circles;
+      // for pill effects around text, where possible use a more reasonable value
+      // to allow for text that is larger than expected due to, for example, user font scaling
+      round: 99999999999999
+    }
+  },
+  shadow: {
+    // An object describing an intended shadow affect. Different platforms will need different
+    // interpretations of these properties to give as close an approximation of the designer's
+    // intent as is reasonably possible on each platform.
+    default: null,
+    nullable: true,
+    type: 'null|{"blur": Number, "color": String, "inset": Boolean, "offsetX": Number, "offsetY": Number, "spread": Number}',
+    values: {
+      none: null
+    }
+  },
+  fontSize: {
+    // An intended font size, in device pixels, before applying user accessibility settings.
+    default: fontBasePixels,
+    nullable: false,
+    type: 'Number'
+  },
+  lineHeight: {
+    // Line heights are applied as relative multipliers on font size
+    default: 1, // check this matches RN / RNW behaviour,
+    nullable: false,
+    type: 'Number'
+  },
+  flexJustifyContent: {
+    // Denotes that an element should have similar layout behaviour to an element in the
+    // Yoga layout engine (https://yogalayout.com/) with this `justify-content` value.
+    default: 'flex-start',
+    type: types.enum,
+    nullable: false,
+    values: {
+      center: 'center',
+      flexStart: 'flex-start',
+      spaceBetween: 'space-between'
+    }
+  },
+  flexAlign: {
+    // Denotes alignment behaviour similar to the Yoga layout engine (https://yogalayout.com/).
+    // Depending on the token, this may apply to the element itself (like `align-self`), its
+    // children in a flex container (like `align-items`), or between lines in a multi-line
+    // wrapping element (like `align-content`). May need special handling on some platforms.
+    default: 'flex-start',
+    type: types.enum,
+    nullable: false,
+    values: {
+      center: 'center',
+      flexStart: 'flex-start',
+      stretch: 'stretch'
+    }
+  },
+  fontName: {
+    // Font family name of a custom palette font. This should be only the typeface name and will be
+    // concatenated with font weight and font style to reference a specific palette font file.
+    default: null,
+    nullable: true,
+    type: 'null|String'
+  },
+  fontWeight: {
+    // A numeric string representation of a font weight. When used with a custom font via `fontName` tokens,
+    // this is appended to the fontName when choosing which palette font file to use, before `fontStyle`.
+    default: '400',
+    nullable: false,
+    type: 'String'
+  },
+  fontStyle: {
+    // A string denoting a font style (e.g. italic). When used with a custom font via `fontName` tokens,
+    // this is appended to the fontName and fontWeight to complete a palette font file selection.
+    default: 'normal',
+    nullable: false,
+    type: types.enum,
+    values: {
+      normal: 'normal',
+      italic: 'italic'
+    }
+  },
+  opacity: {
+    // A floating point number between 0 and 1, where 1 is fully opaque and 0 is fully transparent.
+    default: 1,
+    nullable: false,
+    type: 'Number',
+    values: {
+      opaque: 1
+    }
+  },
+  integer: {
+    // A fallback token type for integers that have context-specific meaning. Use sparingly.
+    default: null,
+    nullable: true,
+    type: 'Number',
+    // Magic proxy enabling any integer to be specified in a theme, e.g. "{system.integer.42}" --> `42`
+    values: integer
+  },
+  icon: {
+    // In theme.json, state the name of an icon that exists in a theme's target palette.
+    // React Native theme builds resolve this to a ready-to-use ReactNativeSVG component.
+    // e.g. `"{palette.icon.CheckMark}"` will resolve as a CheckMark SVG function component
+    // in the theme's React Native build, or the string "PaletteIconCheckMark" in ios/android.
+    default: null,
+    nullable: true,
+    type: 'String|ReactNativeSVGComponent',
+    values: {
+      none: null
+    }
+  },
+  textLine: {
+    // String describing typographic text line effects e.g. underline, strikethrough
+    default: 'none',
+    nullable: false,
+    type: types.enum,
+    values: {
+      none: 'none',
+      underline: 'underline',
+      strikethrough: 'strikethrough'
+    }
+  },
+  textLineStyle: {
+    // String describing the style of a particular textLine e.g. dotted, dashed, solid
+    default: 'solid',
+    nullable: false,
+    type: types.enum,
+    values: {
+      solid: 'solid'
+    }
+  },
+  position: {
+    // String describing the placement of a sub-element relative to a container or main element
+    default: null,
+    nullable: true,
+    type: types.enum,
+    values: {
+      bottom: 'bottom',
+      left: 'left',
+      right: 'right',
+      top: 'top'
+    }
+  },
+  direction: {
+    // String describing how a stacking container should behave relative to its direct children
+    default: 'column',
+    nullable: false,
+    type: types.enum,
+    values: {
+      column: 'column', // Stacks children vertically
+      row: 'row' // Stacks children horizontally
+    }
+  },
+  show: {
+    // Boolean toggle stating whether a sub-element should be shown or hidden.
+    // Take care in component implementations around timing of appearing/disappearing animations
+    // and focusability of children; implementation will rarely be just a simple on/off.
+    default: true,
+    nullable: false,
+    type: 'Boolean',
+    values: {
+      true: true,
+      false: false
+    }
+  },
+  borderStyle: {
+    // How a border line (if there is one) should be drawn e.g. solid, dotted, dashed etc.
+    default: 'solid',
+    nullable: false,
+    type: types.enum,
+    values: {
+      none: 'none',
+      solid: 'solid'
+    }
+  },
+  letterSpacing: {
+    // A relative adjustment, positive or negative, used to control typography spacing between characters.
+    default: 0,
+    nullable: false,
+    type: 'Number',
+    values: {
+      none: 0
+    }
+  },
+  verticalAlign: {
+    // The intended alignment of an element within a flow of content, e.g. an image in inline text.
+    // Implementations may need to map this to different properties depending on context.
+    default: 'baseline',
+    nullable: false,
+    type: types.enum,
+    values: {
+      top: 'top',
+      middle: 'middle',
+      baseline: 'baseline'
+    }
+  },
+  duration: {
+    // A number of milliseconds that something like a transition animation should persist for.
+    // Palettes may define common transition times used for common animation types.
+    default: 0,
+    nullable: false,
+    type: 'Number',
+    values: { zero: 0 }
+  },
+  iconScale: {
+    // A multiplier to apply to an element or sub-element's size, e.g. icon "bulge" effects.
+    // Such scaling should be implemented in a way that does not affect layout.
+    default: 1,
+    nullable: false,
+    type: 'Number',
+    values: {
+      scale1: 1,
+      scale1_10: 1.1,
+      scale1_25: 1.25
+    }
+  },
+  textAlign: {
+    // The horizontal alignment of flowing text within its immediate container.
+    default: 'left',
+    nullable: false,
+    type: types.enum,
+    values: {
+      left: 'left',
+      center: 'center',
+      right: 'right'
+    }
+  },
+  gradient: {
+    // An object describing an intended gradient affect. Different platforms will need different
+    // interpretations of these properties to give as close an approximation of the designer's
+    // intent as is reasonably possible on each platform.
+    default: null,
+    nullable: true,
+    type: '{"type": ["linear"|"radial"], "angle": Number, "stops": Array<{"stop": Number, "color": String }>}',
+    values: {
+      none: null
+    }
+  },
+  textTransform: {
+    default: 'none',
+    type: types.enum,
+    nullable: false,
+    values: {
+      none: 'none',
+      uppercase: 'uppercase'
+    }
+  }
+})
+
+module.exports = tokenTypes