@wistia/vhs-design-tokens 1.4.2-beta.ff8c9b4a.585a97d → 1.4.3-beta.6b8e7ef8.69f6596

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/css/design-tokens.css +66 -49
  2. package/dist/js/colorMetadata.js +722 -97
  3. package/dist/js/designTokens.js +144 -2
  4. package/dist/scss/_design-tokens.scss +66 -49
  5. package/index.d.ts +39 -1
  6. package/package.json +6 -5
package/dist/js/designTokens.js CHANGED
@@ -1,6 +1,148 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 22 Nov 2023 16:45:08 GMT
3
+ * Generated on Wed, 07 Feb 2024 18:51:27 GMT
4
4
  */
5
5
 
6
- [object Promise]
6
+ module.exports = {
7
+ breakpoint: {
8
+ xs: '0em',
9
+ sm: '37.5em',
10
+ md: '56.5625em',
11
+ lg: '77.5em',
12
+ xl: '90em',
13
+ },
14
+ color: {
15
+ brandBlue100: '#e2effd',
16
+ brandBlue200: '#bed8fb',
17
+ brandBlue300: '#87abff',
18
+ brandBlue400: '#5387fa',
19
+ brandBlue500: '#1e64f0',
20
+ brandBlue600: '#174bd2',
21
+ brandBlue700: '#0f33a6',
22
+ brandBlue800: '#09217d',
23
+ purple100: '#f5f3ff',
24
+ purple200: '#e6dffe',
25
+ purple300: '#cfbfff',
26
+ purple400: '#b89fff',
27
+ purple500: '#a07eff',
28
+ purple600: '#815fe0',
29
+ purple700: '#6446af',
30
+ purple800: '#462d8c',
31
+ green100: '#e6f9f3',
32
+ green200: '#bfefe0',
33
+ green300: '#81e0c1',
34
+ green400: '#41d0a3',
35
+ green500: '#00c185',
36
+ green600: '#00966e',
37
+ green700: '#047063',
38
+ green800: '#025050',
39
+ blue100: '#e9f5ff',
40
+ blue200: '#c7e7ff',
41
+ blue300: '#91ceff',
42
+ blue400: '#58b7fe',
43
+ blue500: '#229fff',
44
+ blue600: '#1b7fde',
45
+ blue700: '#165fac',
46
+ blue800: '#0d407a',
47
+ pink100: '#ffedf5',
48
+ pink200: '#ffd2e6',
49
+ pink300: '#ffa2cb',
50
+ pink400: '#ff74b4',
51
+ pink500: '#fa50a0',
52
+ pink600: '#d63180',
53
+ pink700: '#aa1460',
54
+ pink800: '#7d084d',
55
+ red100: '#ffecec',
56
+ red200: '#ffcaca',
57
+ red300: '#ff9a9a',
58
+ red400: '#ff6962',
59
+ red500: '#fa4040',
60
+ red600: '#d63727',
61
+ red700: '#aa0d15',
62
+ red800: '#860011',
63
+ yellow100: '#fff8e6',
64
+ yellow200: '#ffefc8',
65
+ yellow300: '#ffdf96',
66
+ yellow400: '#ffce5a',
67
+ yellow500: '#fabe1f',
68
+ yellow600: '#dc9601',
69
+ yellow700: '#be7200',
70
+ yellow800: '#b45101',
71
+ grey100: '#f8f8f9',
72
+ grey200: '#ebebed',
73
+ grey300: '#dedee1',
74
+ grey400: '#c4c4c8',
75
+ grey500: '#a3a3aa',
76
+ grey600: '#7b7b87',
77
+ grey700: '#62626c',
78
+ grey800: '#4a4a51',
79
+ grey900: '#37373c',
80
+ grey1000: '#1f1f22',
81
+ grey1100: '#0b0d0e',
82
+ statuserror: '#ffecec',
83
+ },
84
+ duration: {
85
+ productive: {
86
+ fast: '70ms',
87
+ moderate: '110ms',
88
+ slow: '150ms',
89
+ },
90
+ expressive: {
91
+ fast: '240ms',
92
+ moderate: '400ms',
93
+ slow: '700ms',
94
+ },
95
+ },
96
+ easing: {
97
+ standard: {
98
+ productive: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
99
+ expressive: 'cubic-bezier(0.4, 0.14, 0.3, 1)',
100
+ },
101
+ entrance: {
102
+ productive: 'cubic-bezier(0, 0, 0.38, 0.9)',
103
+ expressive: 'cubic-bezier(0, 0, 0.3, 1)',
104
+ },
105
+ exit: {
106
+ productive: 'cubic-bezier(0.2, 0, 1, 0.9)',
107
+ expressive: 'cubic-bezier(0.4, 0.14, 1, 1)',
108
+ },
109
+ },
110
+ font: {
111
+ family: {
112
+ default: 'Inter, Helvetica, Arial, sans-serif',
113
+ monospace: '"IBM Plex Mono", Consolas, Monaco, monospace',
114
+ },
115
+ weight: {
116
+ thin: 100,
117
+ extraLight: 200,
118
+ light: 300,
119
+ regular: 400,
120
+ medium: 500,
121
+ semiBold: 600,
122
+ bold: 700,
123
+ extraBold: 800,
124
+ },
125
+ size: {
126
+ default: '16px',
127
+ small: '14px',
128
+ },
129
+ },
130
+ shadow: {
131
+ elevation0: 'none',
132
+ elevation1: '0 2px 4px rgba(0, 0, 0, 0.1)',
133
+ elevation2: '0 0 64px 0 rgba(0, 0, 0, 0.08)',
134
+ },
135
+ spacing: {
136
+ space01: '4px',
137
+ space02: '8px',
138
+ space03: '12px',
139
+ space04: '16px',
140
+ space05: '24px',
141
+ space06: '32px',
142
+ space07: '48px',
143
+ space08: '64px',
144
+ space09: '80px',
145
+ space10: '96px',
146
+ space11: '120px',
147
+ },
148
+ };
package/dist/scss/_design-tokens.scss CHANGED
@@ -1,36 +1,36 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 22 Nov 2023 16:45:08 GMT
3
+ // Generated on Wed, 07 Feb 2024 18:51:26 GMT
4
4
 
5
5
  $breakpoint-xs: 0em;
6
6
  $breakpoint-sm: 37.5em;
7
7
  $breakpoint-md: 56.5625em;
8
8
  $breakpoint-lg: 77.5em;
9
9
  $breakpoint-xl: 90em;
10
- $color-brand-blue-100: #f7f8ff;
11
- $color-brand-blue-200: #ccd5ff;
12
- $color-brand-blue-300: #99abff;
13
- $color-brand-blue-400: #6b84ff;
14
- $color-brand-blue-500: #2949e5;
15
- $color-brand-blue-600: #1f3399;
16
- $color-brand-blue-700: #222d66;
17
- $color-brand-blue-800: #000934;
18
- $color-purple-100: #fdf7ff;
19
- $color-purple-200: #f9e5ff;
20
- $color-purple-300: #f2caff;
21
- $color-purple-400: #e093fa;
22
- $color-purple-500: #d65cff;
23
- $color-purple-600: #ac12e0;
24
- $color-purple-700: #752e8c;
25
- $color-purple-800: #39004d;
26
- $color-green-100: #f4fff2;
27
- $color-green-200: #dfffd9;
28
- $color-green-300: #b0e5a5;
29
- $color-green-400: #76d962;
30
- $color-green-500: #44b62d;
31
- $color-green-600: #268713;
32
- $color-green-700: #38662e;
33
- $color-green-800: #093300;
10
+ $color-brand-blue-100: #e2effd;
11
+ $color-brand-blue-200: #bed8fb;
12
+ $color-brand-blue-300: #87abff;
13
+ $color-brand-blue-400: #5387fa;
14
+ $color-brand-blue-500: #1e64f0;
15
+ $color-brand-blue-600: #174bd2;
16
+ $color-brand-blue-700: #0f33a6;
17
+ $color-brand-blue-800: #09217d;
18
+ $color-purple-100: #f5f3ff;
19
+ $color-purple-200: #e6dffe;
20
+ $color-purple-300: #cfbfff;
21
+ $color-purple-400: #b89fff;
22
+ $color-purple-500: #a07eff;
23
+ $color-purple-600: #815fe0;
24
+ $color-purple-700: #6446af;
25
+ $color-purple-800: #462d8c;
26
+ $color-green-100: #e6f9f3;
27
+ $color-green-200: #bfefe0;
28
+ $color-green-300: #81e0c1;
29
+ $color-green-400: #41d0a3;
30
+ $color-green-500: #00c185;
31
+ $color-green-600: #00966e;
32
+ $color-green-700: #047063;
33
+ $color-green-800: #025050;
34
34
  $color-blue-100: #e9f5ff;
35
35
  $color-blue-200: #c7e7ff;
36
36
  $color-blue-300: #91ceff;
@@ -39,30 +39,30 @@ $color-blue-500: #229fff;
39
39
  $color-blue-600: #1b7fde;
40
40
  $color-blue-700: #165fac;
41
41
  $color-blue-800: #0d407a;
42
- $color-pink-100: #fff8fc;
43
- $color-pink-200: #ffe5f4;
44
- $color-pink-300: #ffc7e8;
45
- $color-pink-400: #ff8cd0;
46
- $color-pink-500: #ff40b3;
47
- $color-pink-600: #e0128e;
48
- $color-pink-700: #661f4a;
49
- $color-pink-800: #4d002e;
50
- $color-red-100: #fff7f9;
51
- $color-red-200: #ffccd5;
52
- $color-red-300: #ff99ab;
53
- $color-red-400: #ff6682;
54
- $color-red-500: #ff2b51;
55
- $color-red-600: #d60027;
56
- $color-red-700: #99001c;
57
- $color-red-800: #660013;
58
- $color-yellow-100: #fffff0;
59
- $color-yellow-200: #eff18d;
60
- $color-yellow-300: #e8ec1e;
61
- $color-yellow-400: #d9dc25;
62
- $color-yellow-500: #bcbf19;
63
- $color-yellow-600: #9ea00f;
64
- $color-yellow-700: #7c7e07;
65
- $color-yellow-800: #4a4d00;
42
+ $color-pink-100: #ffedf5;
43
+ $color-pink-200: #ffd2e6;
44
+ $color-pink-300: #ffa2cb;
45
+ $color-pink-400: #ff74b4;
46
+ $color-pink-500: #fa50a0;
47
+ $color-pink-600: #d63180;
48
+ $color-pink-700: #aa1460;
49
+ $color-pink-800: #7d084d;
50
+ $color-red-100: #ffecec;
51
+ $color-red-200: #ffcaca;
52
+ $color-red-300: #ff9a9a;
53
+ $color-red-400: #ff6962;
54
+ $color-red-500: #fa4040;
55
+ $color-red-600: #d63727;
56
+ $color-red-700: #aa0d15;
57
+ $color-red-800: #860011;
58
+ $color-yellow-100: #fff8e6;
59
+ $color-yellow-200: #ffefc8;
60
+ $color-yellow-300: #ffdf96;
61
+ $color-yellow-400: #ffce5a;
62
+ $color-yellow-500: #fabe1f;
63
+ $color-yellow-600: #dc9601;
64
+ $color-yellow-700: #be7200;
65
+ $color-yellow-800: #b45101;
66
66
  $color-grey-100: #f8f8f9;
67
67
  $color-grey-200: #ebebed;
68
68
  $color-grey-300: #dedee1;
@@ -74,6 +74,23 @@ $color-grey-800: #4a4a51;
74
74
  $color-grey-900: #37373c;
75
75
  $color-grey-1000: #1f1f22;
76
76
  $color-grey-1100: #0b0d0e;
77
+ $color-status-error: #ffecec;
78
+ $color-status-warning-100: #fff8e6;
79
+ $color-status-warning-200: #ffefc8;
80
+ $color-status-warning-300: #ffdf96;
81
+ $color-status-warning-400: #ffce5a;
82
+ $color-status-warning-500: #fabe1f;
83
+ $color-status-warning-600: #dc9601;
84
+ $color-status-warning-700: #be7200;
85
+ $color-status-warning-800: #b45101;
86
+ $color-status-success-100: #e6f9f3;
87
+ $color-status-success-200: #bfefe0;
88
+ $color-status-success-300: #81e0c1;
89
+ $color-status-success-400: #41d0a3;
90
+ $color-status-success-500: #00c185;
91
+ $color-status-success-600: #00966e;
92
+ $color-status-success-700: #047063;
93
+ $color-status-success-800: #025050;
77
94
  $duration-productive-fast: 70ms;
78
95
  $duration-productive-moderate: 110ms;
79
96
  $duration-productive-slow: 150ms;
package/index.d.ts CHANGED
@@ -131,10 +131,48 @@ declare module '@wistia/vhs-design-tokens' {
131
131
  readonly grey900: CSSHexString;
132
132
  readonly grey1000: CSSHexString;
133
133
  readonly grey1100: CSSHexString;
134
+
135
+ readonly status: {
136
+ error100: CSSHexString;
137
+ error200: CSSHexString;
138
+ error300: CSSHexString;
139
+ error400: CSSHexString;
140
+ error500: CSSHexString;
141
+ error600: CSSHexString;
142
+ error700: CSSHexString;
143
+ error800: CSSHexString;
144
+
145
+ warning100: CSSHexString;
146
+ warning200: CSSHexString;
147
+ warning300: CSSHexString;
148
+ warning400: CSSHexString;
149
+ warning500: CSSHexString;
150
+ warning600: CSSHexString;
151
+ warning700: CSSHexString;
152
+ warning800: CSSHexString;
153
+
154
+ success100: CSSHexString;
155
+ success200: CSSHexString;
156
+ success300: CSSHexString;
157
+ success400: CSSHexString;
158
+ success500: CSSHexString;
159
+ success600: CSSHexString;
160
+ success700: CSSHexString;
161
+ success800: CSSHexString;
162
+ };
134
163
  }
135
164
 
136
165
  export type FontWeightNumbers = 1 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
137
- export type FontWeightStrings = 'normal' | 'bold' | 'lighter' | 'bolder' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
166
+ export type FontWeightStrings =
167
+ | 'normal'
168
+ | 'bold'
169
+ | 'lighter'
170
+ | 'bolder'
171
+ | 'inherit'
172
+ | 'initial'
173
+ | 'revert'
174
+ | 'revert-layer'
175
+ | 'unset';
138
176
  export type FontWeight = FontWeightNumbers | FontWeightStrings;
139
177
 
140
178
  export interface Fonts {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wistia/vhs-design-tokens",
3
- "version": "1.4.2-beta.ff8c9b4a.585a97d",
3
+ "version": "1.4.3-beta.6b8e7ef8.69f6596",
4
4
  "description": "VHS design tokens",
5
5
  "main": "index.js",
6
6
  "exports": {
@@ -15,9 +15,9 @@
15
15
  "dist/"
16
16
  ],
17
17
  "scripts": {
18
- "build": "style-dictionary build",
18
+ "build": "style-dictionary build --config ./config.cjs",
19
19
  "build:watch": "onchange \"./tokens/**/*.yaml\" -i -- yarn run build",
20
- "clean": "style-dictionary clean",
20
+ "clean": "style-dictionary clean --config ./config.cjs",
21
21
  "lint": "eslint --fix --report-unused-disable-directives --cache --ext js,mjs,cjs .",
22
22
  "outdated": "yarn upgrade-interactive",
23
23
  "prepare": "husky install && yarn run clean && yarn run build"
@@ -26,13 +26,14 @@
26
26
  "@karibash/pixel-units": "^2.3.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@commitlint/cli": "^17.8.0",
30
- "@commitlint/config-conventional": "^17.8.0",
29
+ "@commitlint/cli": "^18.4.3",
30
+ "@commitlint/config-conventional": "^18.4.3",
31
31
  "@wistia/eslint-config": "^0.23.2",
32
32
  "eslint": "^8.51.0",
33
33
  "husky": "^8.0.3",
34
34
  "js-yaml": "^4.1.0",
35
35
  "onchange": "^7.1.0",
36
+ "prettier": "^2.8.8",
36
37
  "style-dictionary": "^3.8.0"
37
38
  },
38
39
  "author": "Wistia Engineering",