thumbtack/thumbprint-tokens

Design variables that power Thumbtack’s UI.

Thumbprint Tokens

Design variables that power Thumbtack’s UI.

Thumbprint Tokens are published as JavaScript, SCSS, Swift, and Kotlin.

Platform	Languages	Package
Web	React & SCSS
Android	Kotlin
iOS	Swift	Swift Package Manager

API

You can use the Thumbprint Tokens GraphQL server to query tokens and view the schema.

Releasing

1. Pull latest changes: Run git checkout master && git pull to grab the latest changes rom GitHub.
2. Update the package.json and changelog: Edit the version in the package.json and then open the CHANGELOG.md file and look at the unreleased changes. Add the new version number (following SemVer) and date as a heading under the ## Unreleased heading.
3. Commit the changelog changes: Commit the changes on master with git add CHANGELOG.md package.json && git commit -m "Preparing for release."
4. Create a Git tag: Run git tag vX.Y.Z, replacing X.Y.Z with the new version number.
5. Release to NPM: Run yarn install && yarn release.
6. Push to GitHub: Run git push --tags to push the changes to GitHub.
7. Publish to JitPack: Visit https://jitpack.io/com/github/thumbtack/thumbprint-tokens/12.1.1/build.log but replace 12.1.1 with the new version number. This will kick off a build in JitPack which will be indicated on the JitPack Thumbprint Tokens page.

Installation

Swift Package Manager

Swift Package Manager is a tool for managing the distribution of Swift code. It’s integrated with the Swift build system to automate the process of downloading, compiling, and linking dependencies.

Xcode 11+ is required to build SwiftRunOnce using Swift Package Manager.

To integrate ThumbprintTokens into your Xcode project using Swift Package Manager, add it to the dependencies value of your Package.swift:

dependencies: [
    .package(url: "https://github.com/thumbtack/thumbprint-tokens.git", .upToNextMajor(from: "12.3.0"))
]

thumbprint-tokens's Issues

Add tokens for the various different icon sizes

On iOS I was doing some work to implement a shimmer loading view for a cell that contained 3 labels and an icon view. We have useful tokens to be able to keep the height of the labels accurate to their actual counterparts (in sass it'd be $tp-font__body__2__line-height), however the icons have no corresponding tokens.

@danoc pointed out that the SVGs don't actually depend on tokens since they have their height/width embedded, or hard-coded. It's possible that having 2 sources of truth might introduce issues.

Upgrade to use latest Node LTS

The v8 LTS ends on Dec. 31.

Write "Contributing" documentation for Thumbprint Tokens

Should cover:

• How to add a token
• How our templating works
• How to test the values
• How to publish and release

CocoaPods publish is failing due to changes in `10.1.0`

Here's the output from the command. It refers to the ThumbprintTokens.swift file that exists within the ZIP file we publish to NPM:

❯ pod spec lint

 -> ThumbprintTokens (10.1.0)
    - ERROR | [iOS] xcodebuild: Returned an unsuccessful exit code. You can use `--verbose` for more information.
    - NOTE  | xcodebuild:  note: Using new build system
    - NOTE  | [iOS] xcodebuild:  note: Planning build
    - NOTE  | [iOS] xcodebuild:  note: Constructing build description
    - NOTE  | [iOS] xcodebuild:  warning: Skipping code signing because the target does not have an Info.plist file and one is not being generated automatically. (in target 'App' from project 'App')
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:92:34: error: expected type
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:92:33: error: consecutive declarations on a line must be separated by ';'
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:92:34: error: expected declaration
    - NOTE  | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:91:13: note: in declaration of 'Duration'
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:93:34: error: expected type
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:93:33: error: consecutive declarations on a line must be separated by ';'
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:93:34: error: expected declaration
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:94:34: error: expected type
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:94:33: error: consecutive declarations on a line must be separated by ';'
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:94:34: error: expected declaration
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:95:34: error: expected type
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:95:33: error: consecutive declarations on a line must be separated by ';'
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:95:34: error: expected declaration
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:96:34: error: expected type
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:96:33: error: consecutive declarations on a line must be separated by ';'
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:96:34: error: expected declaration
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:97:34: error: expected type
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:97:33: error: consecutive declarations on a line must be separated by ';'
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:97:34: error: expected declaration
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:102:39: error: unexpected initializer in pattern; did you mean to use '='?
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:103:38: error: unexpected initializer in pattern; did you mean to use '='?
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:102:23: error: 'static var' declaration requires an initializer expression or getter/setter specifier
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:103:23: error: 'static var' declaration requires an initializer expression or getter/setter specifier

Fix iOS output in 10.1.1

Getting this error:

❯ pod spec lint

 -> ThumbprintTokens (10.1.1)
    - ERROR | [iOS] xcodebuild: Returned an unsuccessful exit code. You can use `--verbose` for more information.
    - NOTE  | xcodebuild:  note: Using new build system
    - NOTE  | [iOS] xcodebuild:  note: Planning build
    - NOTE  | [iOS] xcodebuild:  note: Constructing build description
    - ERROR | xcodebuild:  ThumbprintTokens/ThumbprintTokens.swift:88:48: error: cannot assign to immutable expression of type 'UIColor.Type'
    - NOTE  | [iOS] xcodebuild:  warning: Skipping code signing because the target does not have an Info.plist file and one is not being generated automatically. (in target 'App' from project 'App')

Analyzed 1 podspec.

[!] The spec did not pass validation, due to 2 errors.

Simplify Tokens input in SCSS

Instead of:

@import '@thumbtack/thumbprint-tokens/dist/scss/_index';

It'd be great if we could do:

@import '@thumbtack/thumbprint-tokens/scss';

Or, even better:

@import '@thumbtack/thumbprint-tokens';

That last one may not be possible yet. Maybe it will be once sass/node-sass#2339 merges.

Purple token has value in the wrong place

thumbprint-tokens/src/tokens.js

Lines 514 to 540 in a60ec94

	{
	id: 'purple-200',
	platforms: {
	scss: {
	name: '$tp-color__purple-200',
	value: '#dfccff',
	},
	javascript: {
	name: 'tpColorPurple200',
	value: '#dfccff',
	},
	ios: {
	name: 'purple200',
	description: 'Purple 200 – #dfccff',
	value:
	'UIColor = UIColor(red: 0.8745098, green: 0.8, blue: 1.0, alpha: 1.0)',
	},
	android: {
	name: 'tp_purple_200',
	value: '#dfccff',
	},
	},
	value: {
	ios: 'UIColor = UIColor(red: 0.8745098, green: 0.8, blue: 1.0, alpha: 1.0)',
	},
	format: 'color',
	},

It should only be within platforms.

Update tokens to target es5

Right now the ES Module build uses ES6 modules and ES6 syntax in the TypeScript config. We should target ES6 modules but ES5 syntax, to ensure no ES6 code can accidentally slip into IE11 when consumed by clients.

This is not a problem for the thumbprint-react package, since it uses Rollup and babel-plugin-typescript, rather than the tsc command directly.

cc @danoc

Fix Android tokens output in 10.1.0

Getting this error in the JitPack build:

* What went wrong:
Execution failed for task ':packageDebugResources'.
> /home/jitpack/build/dist/android/index.xml: Error: Can't determine type for tag '<item name="tp_duration_1">75</item>'

Rename "Border Radius" to "Corner Radius"

1. Add new "Corner Radius" token and deprecate "Border Radius"
2. Update website to use the new token
3. Remove deprecated token

cc @danoc @tomgenoni

Update typography tokens to use new `Title` 1-8 and `Text` 1-3

The type names were simplified a few months ago but the changes need to be reflected in tokens:

https://thumbprint.design/tokens/#section-type