@wistia/vhs-design-tokens 1.5.0 → 1.5.1-beta.25608ee5.5f8a5b7

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 +73 -66
  2. package/dist/js/colorMetadata.js +662 -633
  3. package/dist/js/designTokens.js +73 -50
  4. package/dist/scss/_design-tokens.scss +73 -66
  5. package/index.d.ts +26 -28
  6. package/package.json +8 -8
package/dist/js/designTokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 08 Feb 2024 16:16:51 GMT
3
+ * Generated on Mon, 12 Feb 2024 14:20:51 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -12,30 +12,30 @@ module.exports = {
12
12
  xl: '90em',
13
13
  },
14
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',
15
+ brandBlue100: '#f7f8ff',
16
+ brandBlue200: '#ccd5ff',
17
+ brandBlue300: '#99abff',
18
+ brandBlue400: '#6b84ff',
19
+ brandBlue500: '#2949e5',
20
+ brandBlue600: '#1f3399',
21
+ brandBlue700: '#222d66',
22
+ brandBlue800: '#000934',
23
+ purple100: '#fdf7ff',
24
+ purple200: '#f9e5ff',
25
+ purple300: '#f2caff',
26
+ purple400: '#e093fa',
27
+ purple500: '#d65cff',
28
+ purple600: '#ac12e0',
29
+ purple700: '#752e8c',
30
+ purple800: '#39004d',
31
+ green100: '#f4fff2',
32
+ green200: '#dfffd9',
33
+ green300: '#b0e5a5',
34
+ green400: '#76d962',
35
+ green500: '#44b62d',
36
+ green600: '#268713',
37
+ green700: '#38662e',
38
+ green800: '#093300',
39
39
  blue100: '#e9f5ff',
40
40
  blue200: '#c7e7ff',
41
41
  blue300: '#91ceff',
@@ -44,30 +44,30 @@ module.exports = {
44
44
  blue600: '#1b7fde',
45
45
  blue700: '#165fac',
46
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',
47
+ pink100: '#fff8fc',
48
+ pink200: '#ffe5f4',
49
+ pink300: '#ffc7e8',
50
+ pink400: '#ff8cd0',
51
+ pink500: '#ff40b3',
52
+ pink600: '#e0128e',
53
+ pink700: '#661f4a',
54
+ pink800: '#4d002e',
55
+ red100: '#fff7f9',
56
+ red200: '#ffccd5',
57
+ red300: '#ff99ab',
58
+ red400: '#ff6682',
59
+ red500: '#ff2b51',
60
+ red600: '#d60027',
61
+ red700: '#99001c',
62
+ red800: '#660013',
63
+ yellow100: '#fffff0',
64
+ yellow200: '#eff18d',
65
+ yellow300: '#e8ec1e',
66
+ yellow400: '#d9dc25',
67
+ yellow500: '#bcbf19',
68
+ yellow600: '#9ea00f',
69
+ yellow700: '#7c7e07',
70
+ yellow800: '#4a4d00',
71
71
  grey100: '#f8f8f9',
72
72
  grey200: '#ebebed',
73
73
  grey300: '#dedee1',
@@ -79,7 +79,30 @@ module.exports = {
79
79
  grey900: '#37373c',
80
80
  grey1000: '#1f1f22',
81
81
  grey1100: '#0b0d0e',
82
- statuserror: '#ffecec',
82
+ error100: '#ffecec',
83
+ error200: '#ffcaca',
84
+ error300: '#ff9a9a',
85
+ error400: '#ff6962',
86
+ error500: '#fa4040',
87
+ error600: '#d63727',
88
+ error700: '#aa0d15',
89
+ error800: '#860011',
90
+ success100: '#e6f9f3',
91
+ success200: '#bfefe0',
92
+ success300: '#81e0c1',
93
+ success400: '#41d0a3',
94
+ success500: '#00c185',
95
+ success600: '#00966e',
96
+ success700: '#047063',
97
+ success800: '#025050',
98
+ warning100: '#fff8e6',
99
+ warning200: '#ffefc8',
100
+ warning300: '#ffdf96',
101
+ warning400: '#ffce5a',
102
+ warning500: '#fabe1f',
103
+ warning600: '#dc9601',
104
+ warning700: '#be7200',
105
+ warning800: '#b45101',
83
106
  },
84
107
  duration: {
85
108
  productive: {
package/dist/scss/_design-tokens.scss CHANGED
@@ -1,36 +1,36 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 08 Feb 2024 16:16:51 GMT
3
+ // Generated on Mon, 12 Feb 2024 14:20:51 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: #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;
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;
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: #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;
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;
66
66
  $color-grey-100: #f8f8f9;
67
67
  $color-grey-200: #ebebed;
68
68
  $color-grey-300: #dedee1;
@@ -74,23 +74,30 @@ $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
+ $color-error-100: #ffecec;
78
+ $color-error-200: #ffcaca;
79
+ $color-error-300: #ff9a9a;
80
+ $color-error-400: #ff6962;
81
+ $color-error-500: #fa4040;
82
+ $color-error-600: #d63727;
83
+ $color-error-700: #aa0d15;
84
+ $color-error-800: #860011;
85
+ $color-success-100: #e6f9f3;
86
+ $color-success-200: #bfefe0;
87
+ $color-success-300: #81e0c1;
88
+ $color-success-400: #41d0a3;
89
+ $color-success-500: #00c185;
90
+ $color-success-600: #00966e;
91
+ $color-success-700: #047063;
92
+ $color-success-800: #025050;
93
+ $color-warning-100: #fff8e6;
94
+ $color-warning-200: #ffefc8;
95
+ $color-warning-300: #ffdf96;
96
+ $color-warning-400: #ffce5a;
97
+ $color-warning-500: #fabe1f;
98
+ $color-warning-600: #dc9601;
99
+ $color-warning-700: #be7200;
100
+ $color-warning-800: #b45101;
94
101
  $duration-productive-fast: 70ms;
95
102
  $duration-productive-moderate: 110ms;
96
103
  $duration-productive-slow: 150ms;
package/index.d.ts CHANGED
@@ -132,34 +132,32 @@ declare module '@wistia/vhs-design-tokens' {
132
132
  readonly grey1000: CSSHexString;
133
133
  readonly grey1100: CSSHexString;
134
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
- };
135
+ readonly error100: CSSHexString;
136
+ readonly error200: CSSHexString;
137
+ readonly error300: CSSHexString;
138
+ readonly error400: CSSHexString;
139
+ readonly error500: CSSHexString;
140
+ readonly error600: CSSHexString;
141
+ readonly error700: CSSHexString;
142
+ readonly error800: CSSHexString;
143
+
144
+ readonly warning100: CSSHexString;
145
+ readonly warning200: CSSHexString;
146
+ readonly warning300: CSSHexString;
147
+ readonly warning400: CSSHexString;
148
+ readonly warning500: CSSHexString;
149
+ readonly warning600: CSSHexString;
150
+ readonly warning700: CSSHexString;
151
+ readonly warning800: CSSHexString;
152
+
153
+ readonly success100: CSSHexString;
154
+ readonly success200: CSSHexString;
155
+ readonly success300: CSSHexString;
156
+ readonly success400: CSSHexString;
157
+ readonly success500: CSSHexString;
158
+ readonly success600: CSSHexString;
159
+ readonly success700: CSSHexString;
160
+ readonly success800: CSSHexString;
163
161
  }
164
162
 
165
163
  export type FontWeightNumbers = 1 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wistia/vhs-design-tokens",
3
- "version": "1.5.0",
3
+ "version": "1.5.1-beta.25608ee5.5f8a5b7",
4
4
  "description": "VHS design tokens",
5
5
  "main": "index.js",
6
6
  "exports": {
@@ -26,15 +26,15 @@
26
26
  "@karibash/pixel-units": "^2.3.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@commitlint/cli": "^18.4.3",
30
- "@commitlint/config-conventional": "^18.4.3",
31
- "@wistia/eslint-config": "^0.23.2",
32
- "eslint": "^8.51.0",
33
- "husky": "^8.0.3",
29
+ "@commitlint/cli": "^18.6.0",
30
+ "@commitlint/config-conventional": "^18.6.0",
31
+ "@wistia/eslint-config": "^0.30.0",
32
+ "eslint": "^8.56.0",
33
+ "husky": "^9.0.10",
34
34
  "js-yaml": "^4.1.0",
35
35
  "onchange": "^7.1.0",
36
36
  "prettier": "^2.8.8",
37
- "style-dictionary": "^3.8.0"
37
+ "style-dictionary": "^3.9.2"
38
38
  },
39
39
  "author": "Wistia Engineering",
40
40
  "license": "UNLICENSED",
@@ -46,5 +46,5 @@
46
46
  "url": "https://github.com/wistia/vhs-design-tokens/issues"
47
47
  },
48
48
  "homepage": "https://github.com/wistia/vhs-design-tokens#readme",
49
- "packageManager": "yarn@4.0.1"
49
+ "packageManager": "yarn@4.0.2"
50
50
  }