polaris_tokens 2.0.0 → 2.1.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: 394ea24382d2338ff7e377210010e9be8e01b57a
4
- data.tar.gz: 42cb4362aabd739b1d668f0e4fdf3e0a9b9fb158
2
+ SHA256:
3
+ metadata.gz: 6c2e46756c2380589610e0fddd199dbeced1e714407249cd95cf5433640ce05b
4
+ data.tar.gz: 4b910e67b7324954ba3f4ebc55b3d70de4839990532a65b90426ef391302ec8b
5
5
  SHA512:
6
- metadata.gz: f39416b88f86cd97cf8ae264cf10312f7750d53986e7b889776ece36571b34d9780c7e2ca293a046934ffb8a4859fee8a71a84f8da095ebc74e08e1f478d46f3
7
- data.tar.gz: f6364cbc9278aba16bce05cd5116d9ab0878f6e332d15d62ccec4a63f370bf0ad20d82b77a351d17d67a8bb233fe0e473d5406cb0571b6c5fe7e52d4ae913bb1
6
+ metadata.gz: a0b7570d09d118df00a061d954927ab9a16cfee69bba13159a03ebd572432c2596207109b150d50602e3c9a609424cd95eaeec326f4cb4031f7cf0a00ad7d2b3
7
+ data.tar.gz: 5aaf66fd3455be756fae90d86a201dcf5c4ec618716213ed4766d0717c90deaea1c644ed43925bd9c01bb11e7a35196b6a1f149c229a8641d67028902901f294
data/README.md CHANGED
@@ -64,6 +64,14 @@ const tokens = require('@shopify/polaris-tokens/dist/index.json');
64
64
  console.log(tokens['color-blue-lighter']); // rgb(235, 245, 250)
65
65
  ```
66
66
 
67
+ Note that, if your project supports ECMAScript Modules, you can also use the `import` syntax.
68
+
69
+ ```js
70
+ import * as tokens from '@shopify/polaris-tokens';
71
+ // or
72
+ import {colorBlueLighter} from '@shopify/polaris-tokens';
73
+ ```
74
+
67
75
  ### Sass
68
76
 
69
77
  Sass variables and map keys are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).
@@ -117,7 +125,7 @@ polaris_colors['color-blue-lighter'] # "rgb(235, 245, 250)"
117
125
 
118
126
  ### CSS Filters
119
127
 
120
- Color tokens include a [CSS Filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (`filter`) value as part of their metadata. When this filter is applied to an element, it will change that element’s color to _approximate_ the target token color.
128
+ Color tokens include a [CSS Filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (`filter`) value as part of [their metadata](https://github.com/Shopify/polaris-tokens/blob/master/data/color-metadata.yml). When this filter is applied to an element, it will change that element’s color to _approximate_ the target token color.
121
129
 
122
130
  ```
123
131
  <div>
Binary file
Binary file
@@ -147,9 +147,9 @@
147
147
  "alpha": 1
148
148
  },
149
149
  {
150
- "red": 0.611764705882353,
151
- "green": 0.43529411764705883,
152
- "blue": 0.09803921568627451,
150
+ "red": 0.5411764705882353,
151
+ "green": 0.3803921568627451,
152
+ "blue": 0.08627450980392157,
153
153
  "alpha": 1
154
154
  },
155
155
  {
@@ -1,116 +1,60 @@
1
1
  {
2
- "color-purple-text":
3
- "brightness(0) saturate(100%) invert(29%) sepia(3%) saturate(2843%) hue-rotate(223deg) brightness(92%) contrast(86%)",
4
- "color-purple-darker":
5
- "brightness(0) saturate(100%) invert(8%) sepia(38%) saturate(6605%) hue-rotate(265deg) brightness(99%) contrast(124%)",
6
- "color-purple-dark":
7
- "brightness(0) saturate(100%) invert(12%) sepia(46%) saturate(4964%) hue-rotate(258deg) brightness(101%) contrast(93%)",
8
- "color-purple":
9
- "brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(1864%) hue-rotate(229deg) brightness(91%) contrast(91%)",
10
- "color-purple-light":
11
- "brightness(0) saturate(100%) invert(82%) sepia(13%) saturate(1535%) hue-rotate(203deg) brightness(103%) contrast(104%)",
12
- "color-purple-lighter":
13
- "brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(135%) hue-rotate(219deg) brightness(110%) contrast(98%)",
14
- "color-indigo-text":
15
- "brightness(0) saturate(100%) invert(24%) sepia(11%) saturate(1035%) hue-rotate(195deg) brightness(97%) contrast(94%)",
16
- "color-indigo-darker":
17
- "brightness(0) saturate(100%) invert(5%) sepia(81%) saturate(5060%) hue-rotate(229deg) brightness(72%) contrast(111%)",
18
- "color-indigo-dark":
19
- "brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(4409%) hue-rotate(218deg) brightness(87%) contrast(98%)",
20
- "color-indigo":
21
- "brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1966%) hue-rotate(194deg) brightness(88%) contrast(84%)",
22
- "color-indigo-light":
23
- "brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(4261%) hue-rotate(194deg) brightness(111%) contrast(92%)",
24
- "color-indigo-lighter":
25
- "brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%)",
26
- "color-blue-text":
27
- "brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(709%) hue-rotate(158deg) brightness(96%) contrast(89%)",
28
- "color-blue-darker":
29
- "brightness(0) saturate(100%) invert(5%) sepia(33%) saturate(5606%) hue-rotate(195deg) brightness(97%) contrast(102%)",
30
- "color-blue-dark":
31
- "brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1308%) hue-rotate(182deg) brightness(94%) contrast(101%)",
32
- "color-blue":
33
- "brightness(0) saturate(100%) invert(32%) sepia(99%) saturate(1186%) hue-rotate(181deg) brightness(91%) contrast(103%)",
34
- "color-blue-light":
35
- "brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(1832%) hue-rotate(178deg) brightness(108%) contrast(96%)",
36
- "color-blue-lighter":
37
- "brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%)",
38
- "color-teal-text":
39
- "brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(665%) hue-rotate(128deg) brightness(94%) contrast(93%)",
40
- "color-teal-darker":
41
- "brightness(0) saturate(100%) invert(15%) sepia(23%) saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%)",
42
- "color-teal-dark":
43
- "brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(3919%) hue-rotate(168deg) brightness(93%) contrast(101%)",
44
- "color-teal":
45
- "brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%) hue-rotate(130deg) brightness(92%) contrast(87%)",
46
- "color-teal-light":
47
- "brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(683%) hue-rotate(122deg) brightness(97%) contrast(91%)",
48
- "color-teal-lighter":
49
- "brightness(0) saturate(100%) invert(87%) sepia(5%) saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%)",
50
- "color-green-text":
51
- "brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(1010%) hue-rotate(63deg) brightness(91%) contrast(91%)",
52
- "color-green-darker":
53
- "brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(727%) hue-rotate(118deg) brightness(93%) contrast(91%)",
54
- "color-green-dark":
55
- "brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(6649%) hue-rotate(155deg) brightness(97%) contrast(87%)",
56
- "color-green":
57
- "brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(2637%) hue-rotate(64deg) brightness(106%) contrast(91%)",
58
- "color-green-light":
59
- "brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(599%) hue-rotate(52deg) brightness(93%) contrast(93%)",
60
- "color-green-lighter":
61
- "brightness(0) saturate(100%) invert(92%) sepia(51%) saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%)",
62
- "color-yellow-text":
63
- "brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(413%) hue-rotate(11deg) brightness(97%) contrast(91%)",
64
- "color-yellow-darker":
65
- "brightness(0) saturate(100%) invert(19%) sepia(75%) saturate(981%) hue-rotate(17deg) brightness(103%) contrast(103%)",
66
- "color-yellow-dark":
67
- "brightness(0) saturate(100%) invert(45%) sepia(48%) saturate(6022%) hue-rotate(31deg) brightness(93%) contrast(80%)",
68
- "color-yellow":
69
- "brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%)",
70
- "color-yellow-light":
71
- "brightness(0) saturate(100%) invert(77%) sepia(72%) saturate(246%) hue-rotate(355deg) brightness(103%) contrast(107%)",
72
- "color-yellow-lighter":
73
- "brightness(0) saturate(100%) invert(88%) sepia(27%) saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%)",
74
- "color-orange-text":
75
- "brightness(0) saturate(100%) invert(23%) sepia(18%) saturate(1092%) hue-rotate(348deg) brightness(99%) contrast(84%)",
76
- "color-orange-darker":
77
- "brightness(0) saturate(100%) invert(9%) sepia(83%) saturate(1926%) hue-rotate(356deg) brightness(98%) contrast(99%)",
78
- "color-orange-dark":
79
- "brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(1431%) hue-rotate(5deg) brightness(96%) contrast(82%)",
80
- "color-orange":
81
- "brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(416%) hue-rotate(340deg) brightness(105%) contrast(91%)",
82
- "color-orange-light":
83
- "brightness(0) saturate(100%) invert(77%) sepia(39%) saturate(483%) hue-rotate(335deg) brightness(101%) contrast(103%)",
84
- "color-orange-lighter":
85
- "brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(918%) hue-rotate(312deg) brightness(107%) contrast(98%)",
86
- "color-red-text":
87
- "brightness(0) saturate(100%) invert(22%) sepia(9%) saturate(2068%) hue-rotate(325deg) brightness(92%) contrast(83%)",
88
- "color-red-darker":
89
- "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
90
- "color-red-dark":
91
- "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
92
- "color-red":
93
- "brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)",
94
- "color-red-light":
95
- "brightness(0) saturate(100%) invert(80%) sepia(9%) saturate(2561%) hue-rotate(313deg) brightness(101%) contrast(99%)",
96
- "color-red-lighter":
97
- "brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%)",
98
- "color-ink":
99
- "brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%) hue-rotate(171deg) brightness(99%) contrast(84%)",
100
- "color-ink-light":
101
- "brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1069%) hue-rotate(173deg) brightness(83%) contrast(84%)",
102
- "color-ink-lighter":
103
- "brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%)",
104
- "color-ink-lightest":
105
- "brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%)",
106
- "color-sky-dark":
107
- "brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(502%) hue-rotate(167deg) brightness(96%) contrast(91%)",
108
- "color-sky":
109
- "brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%) hue-rotate(175deg) brightness(97%) contrast(87%)",
110
- "color-sky-light":
111
- "brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(467%) hue-rotate(174deg) brightness(99%) contrast(96%)",
112
- "color-sky-lighter":
113
- "brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(159%) hue-rotate(170deg) brightness(99%) contrast(99%)",
2
+ "color-purple-text": "brightness(0) saturate(100%) invert(29%) sepia(3%) saturate(2843%) hue-rotate(223deg) brightness(92%) contrast(86%)",
3
+ "color-purple-darker": "brightness(0) saturate(100%) invert(8%) sepia(38%) saturate(6605%) hue-rotate(265deg) brightness(99%) contrast(124%)",
4
+ "color-purple-dark": "brightness(0) saturate(100%) invert(12%) sepia(46%) saturate(4964%) hue-rotate(258deg) brightness(101%) contrast(93%)",
5
+ "color-purple": "brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(1864%) hue-rotate(229deg) brightness(91%) contrast(91%)",
6
+ "color-purple-light": "brightness(0) saturate(100%) invert(82%) sepia(13%) saturate(1535%) hue-rotate(203deg) brightness(103%) contrast(104%)",
7
+ "color-purple-lighter": "brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(135%) hue-rotate(219deg) brightness(110%) contrast(98%)",
8
+ "color-indigo-text": "brightness(0) saturate(100%) invert(24%) sepia(11%) saturate(1035%) hue-rotate(195deg) brightness(97%) contrast(94%)",
9
+ "color-indigo-darker": "brightness(0) saturate(100%) invert(5%) sepia(81%) saturate(5060%) hue-rotate(229deg) brightness(72%) contrast(111%)",
10
+ "color-indigo-dark": "brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(4409%) hue-rotate(218deg) brightness(87%) contrast(98%)",
11
+ "color-indigo": "brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1966%) hue-rotate(194deg) brightness(88%) contrast(84%)",
12
+ "color-indigo-light": "brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(4261%) hue-rotate(194deg) brightness(111%) contrast(92%)",
13
+ "color-indigo-lighter": "brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%)",
14
+ "color-blue-text": "brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(709%) hue-rotate(158deg) brightness(96%) contrast(89%)",
15
+ "color-blue-darker": "brightness(0) saturate(100%) invert(5%) sepia(33%) saturate(5606%) hue-rotate(195deg) brightness(97%) contrast(102%)",
16
+ "color-blue-dark": "brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1308%) hue-rotate(182deg) brightness(94%) contrast(101%)",
17
+ "color-blue": "brightness(0) saturate(100%) invert(32%) sepia(99%) saturate(1186%) hue-rotate(181deg) brightness(91%) contrast(103%)",
18
+ "color-blue-light": "brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(1832%) hue-rotate(178deg) brightness(108%) contrast(96%)",
19
+ "color-blue-lighter": "brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%)",
20
+ "color-teal-text": "brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(665%) hue-rotate(128deg) brightness(94%) contrast(93%)",
21
+ "color-teal-darker": "brightness(0) saturate(100%) invert(15%) sepia(23%) saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%)",
22
+ "color-teal-dark": "brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(3919%) hue-rotate(168deg) brightness(93%) contrast(101%)",
23
+ "color-teal": "brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%) hue-rotate(130deg) brightness(92%) contrast(87%)",
24
+ "color-teal-light": "brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(683%) hue-rotate(122deg) brightness(97%) contrast(91%)",
25
+ "color-teal-lighter": "brightness(0) saturate(100%) invert(87%) sepia(5%) saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%)",
26
+ "color-green-text": "brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(1010%) hue-rotate(63deg) brightness(91%) contrast(91%)",
27
+ "color-green-darker": "brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(727%) hue-rotate(118deg) brightness(93%) contrast(91%)",
28
+ "color-green-dark": "brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(6649%) hue-rotate(155deg) brightness(97%) contrast(87%)",
29
+ "color-green": "brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(2637%) hue-rotate(64deg) brightness(106%) contrast(91%)",
30
+ "color-green-light": "brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(599%) hue-rotate(52deg) brightness(93%) contrast(93%)",
31
+ "color-green-lighter": "brightness(0) saturate(100%) invert(92%) sepia(51%) saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%)",
32
+ "color-yellow-text": "brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(413%) hue-rotate(11deg) brightness(97%) contrast(91%)",
33
+ "color-yellow-darker": "brightness(0) saturate(100%) invert(19%) sepia(75%) saturate(981%) hue-rotate(17deg) brightness(103%) contrast(103%)",
34
+ "color-yellow-dark": "brightness(0) saturate(100%) invert(45%) sepia(48%) saturate(6022%) hue-rotate(31deg) brightness(93%) contrast(80%)",
35
+ "color-yellow": "brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%)",
36
+ "color-yellow-light": "brightness(0) saturate(100%) invert(77%) sepia(72%) saturate(246%) hue-rotate(355deg) brightness(103%) contrast(107%)",
37
+ "color-yellow-lighter": "brightness(0) saturate(100%) invert(88%) sepia(27%) saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%)",
38
+ "color-orange-text": "brightness(0) saturate(100%) invert(23%) sepia(18%) saturate(1092%) hue-rotate(348deg) brightness(99%) contrast(84%)",
39
+ "color-orange-darker": "brightness(0) saturate(100%) invert(9%) sepia(83%) saturate(1926%) hue-rotate(356deg) brightness(98%) contrast(99%)",
40
+ "color-orange-dark": "brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(1431%) hue-rotate(5deg) brightness(96%) contrast(82%)",
41
+ "color-orange": "brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(416%) hue-rotate(340deg) brightness(105%) contrast(91%)",
42
+ "color-orange-light": "brightness(0) saturate(100%) invert(77%) sepia(39%) saturate(483%) hue-rotate(335deg) brightness(101%) contrast(103%)",
43
+ "color-orange-lighter": "brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(918%) hue-rotate(312deg) brightness(107%) contrast(98%)",
44
+ "color-red-text": "brightness(0) saturate(100%) invert(22%) sepia(9%) saturate(2068%) hue-rotate(325deg) brightness(92%) contrast(83%)",
45
+ "color-red-darker": "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
46
+ "color-red-dark": "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
47
+ "color-red": "brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)",
48
+ "color-red-light": "brightness(0) saturate(100%) invert(80%) sepia(9%) saturate(2561%) hue-rotate(313deg) brightness(101%) contrast(99%)",
49
+ "color-red-lighter": "brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%)",
50
+ "color-ink": "brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%) hue-rotate(171deg) brightness(99%) contrast(84%)",
51
+ "color-ink-light": "brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1069%) hue-rotate(173deg) brightness(83%) contrast(84%)",
52
+ "color-ink-lighter": "brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%)",
53
+ "color-ink-lightest": "brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%)",
54
+ "color-sky-dark": "brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(502%) hue-rotate(167deg) brightness(96%) contrast(91%)",
55
+ "color-sky": "brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%) hue-rotate(175deg) brightness(97%) contrast(87%)",
56
+ "color-sky-light": "brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(467%) hue-rotate(174deg) brightness(99%) contrast(96%)",
57
+ "color-sky-lighter": "brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(159%) hue-rotate(170deg) brightness(99%) contrast(99%)",
114
58
  "color-black": "brightness(0) saturate(100%)",
115
59
  "color-white": "brightness(0) saturate(100%) invert(100%)"
116
60
  }
@@ -25,7 +25,7 @@
25
25
  "value": "#b3bcf5"
26
26
  },
27
27
  "color-yellow-dark": {
28
- "value": "#9c6f19"
28
+ "value": "#8a6116"
29
29
  },
30
30
  "color-ink-light": {
31
31
  "value": "#454f5b"
@@ -180,448 +180,392 @@
180
180
  "type": "color",
181
181
  "category": "text-color",
182
182
  "name": "color-purple-text",
183
- "value":
184
- "brightness(0) saturate(100%) invert(29%) sepia(3%) saturate(2843%) hue-rotate(223deg) brightness(92%) contrast(86%)",
183
+ "value": "brightness(0) saturate(100%) invert(29%) sepia(3%) saturate(2843%) hue-rotate(223deg) brightness(92%) contrast(86%)",
185
184
  "originalValue": "{!color-purple-text}"
186
185
  },
187
186
  "color-purple-darker": {
188
187
  "type": "color",
189
188
  "category": "background-color",
190
189
  "name": "color-purple-darker",
191
- "value":
192
- "brightness(0) saturate(100%) invert(8%) sepia(38%) saturate(6605%) hue-rotate(265deg) brightness(99%) contrast(124%)",
190
+ "value": "brightness(0) saturate(100%) invert(8%) sepia(38%) saturate(6605%) hue-rotate(265deg) brightness(99%) contrast(124%)",
193
191
  "originalValue": "{!color-purple-darker}"
194
192
  },
195
193
  "color-purple-dark": {
196
194
  "type": "color",
197
195
  "category": "background-color",
198
196
  "name": "color-purple-dark",
199
- "value":
200
- "brightness(0) saturate(100%) invert(12%) sepia(46%) saturate(4964%) hue-rotate(258deg) brightness(101%) contrast(93%)",
197
+ "value": "brightness(0) saturate(100%) invert(12%) sepia(46%) saturate(4964%) hue-rotate(258deg) brightness(101%) contrast(93%)",
201
198
  "originalValue": "{!color-purple-dark}"
202
199
  },
203
200
  "color-purple": {
204
201
  "type": "color",
205
202
  "category": "background-color",
206
203
  "name": "color-purple",
207
- "value":
208
- "brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(1864%) hue-rotate(229deg) brightness(91%) contrast(91%)",
204
+ "value": "brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(1864%) hue-rotate(229deg) brightness(91%) contrast(91%)",
209
205
  "originalValue": "{!color-purple}"
210
206
  },
211
207
  "color-purple-light": {
212
208
  "type": "color",
213
209
  "category": "background-color",
214
210
  "name": "color-purple-light",
215
- "value":
216
- "brightness(0) saturate(100%) invert(82%) sepia(13%) saturate(1535%) hue-rotate(203deg) brightness(103%) contrast(104%)",
211
+ "value": "brightness(0) saturate(100%) invert(82%) sepia(13%) saturate(1535%) hue-rotate(203deg) brightness(103%) contrast(104%)",
217
212
  "originalValue": "{!color-purple-light}"
218
213
  },
219
214
  "color-purple-lighter": {
220
215
  "type": "color",
221
216
  "category": "background-color",
222
217
  "name": "color-purple-lighter",
223
- "value":
224
- "brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(135%) hue-rotate(219deg) brightness(110%) contrast(98%)",
218
+ "value": "brightness(0) saturate(100%) invert(84%) sepia(15%) saturate(135%) hue-rotate(219deg) brightness(110%) contrast(98%)",
225
219
  "originalValue": "{!color-purple-lighter}"
226
220
  },
227
221
  "color-indigo-text": {
228
222
  "type": "color",
229
223
  "category": "text-color",
230
224
  "name": "color-indigo-text",
231
- "value":
232
- "brightness(0) saturate(100%) invert(24%) sepia(11%) saturate(1035%) hue-rotate(195deg) brightness(97%) contrast(94%)",
225
+ "value": "brightness(0) saturate(100%) invert(24%) sepia(11%) saturate(1035%) hue-rotate(195deg) brightness(97%) contrast(94%)",
233
226
  "originalValue": "{!color-indigo-text}"
234
227
  },
235
228
  "color-indigo-darker": {
236
229
  "type": "color",
237
230
  "category": "background-color",
238
231
  "name": "color-indigo-darker",
239
- "value":
240
- "brightness(0) saturate(100%) invert(5%) sepia(81%) saturate(5060%) hue-rotate(229deg) brightness(72%) contrast(111%)",
232
+ "value": "brightness(0) saturate(100%) invert(5%) sepia(81%) saturate(5060%) hue-rotate(229deg) brightness(72%) contrast(111%)",
241
233
  "originalValue": "{!color-indigo-darker}"
242
234
  },
243
235
  "color-indigo-dark": {
244
236
  "type": "color",
245
237
  "category": "background-color",
246
238
  "name": "color-indigo-dark",
247
- "value":
248
- "brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(4409%) hue-rotate(218deg) brightness(87%) contrast(98%)",
239
+ "value": "brightness(0) saturate(100%) invert(17%) sepia(28%) saturate(4409%) hue-rotate(218deg) brightness(87%) contrast(98%)",
249
240
  "originalValue": "{!color-indigo-dark}"
250
241
  },
251
242
  "color-indigo": {
252
243
  "type": "color",
253
244
  "category": "background-color",
254
245
  "name": "color-indigo",
255
- "value":
256
- "brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1966%) hue-rotate(194deg) brightness(88%) contrast(84%)",
246
+ "value": "brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1966%) hue-rotate(194deg) brightness(88%) contrast(84%)",
257
247
  "originalValue": "{!color-indigo}"
258
248
  },
259
249
  "color-indigo-light": {
260
250
  "type": "color",
261
251
  "category": "background-color",
262
252
  "name": "color-indigo-light",
263
- "value":
264
- "brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(4261%) hue-rotate(194deg) brightness(111%) contrast(92%)",
253
+ "value": "brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(4261%) hue-rotate(194deg) brightness(111%) contrast(92%)",
265
254
  "originalValue": "{!color-indigo-light}"
266
255
  },
267
256
  "color-indigo-lighter": {
268
257
  "type": "color",
269
258
  "category": "background-color",
270
259
  "name": "color-indigo-lighter",
271
- "value":
272
- "brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%)",
260
+ "value": "brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(1090%) hue-rotate(179deg) brightness(100%) contrast(96%)",
273
261
  "originalValue": "{!color-indigo-lighter}"
274
262
  },
275
263
  "color-blue-text": {
276
264
  "type": "color",
277
265
  "category": "text-color",
278
266
  "name": "color-blue-text",
279
- "value":
280
- "brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(709%) hue-rotate(158deg) brightness(96%) contrast(89%)",
267
+ "value": "brightness(0) saturate(100%) invert(27%) sepia(13%) saturate(709%) hue-rotate(158deg) brightness(96%) contrast(89%)",
281
268
  "originalValue": "{!color-blue-text}"
282
269
  },
283
270
  "color-blue-darker": {
284
271
  "type": "color",
285
272
  "category": "background-color",
286
273
  "name": "color-blue-darker",
287
- "value":
288
- "brightness(0) saturate(100%) invert(5%) sepia(33%) saturate(5606%) hue-rotate(195deg) brightness(97%) contrast(102%)",
274
+ "value": "brightness(0) saturate(100%) invert(5%) sepia(33%) saturate(5606%) hue-rotate(195deg) brightness(97%) contrast(102%)",
289
275
  "originalValue": "{!color-blue-darker}"
290
276
  },
291
277
  "color-blue-dark": {
292
278
  "type": "color",
293
279
  "category": "background-color",
294
280
  "name": "color-blue-dark",
295
- "value":
296
- "brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1308%) hue-rotate(182deg) brightness(94%) contrast(101%)",
281
+ "value": "brightness(0) saturate(100%) invert(22%) sepia(70%) saturate(1308%) hue-rotate(182deg) brightness(94%) contrast(101%)",
297
282
  "originalValue": "{!color-blue-dark}"
298
283
  },
299
284
  "color-blue": {
300
285
  "type": "color",
301
286
  "category": "background-color",
302
287
  "name": "color-blue",
303
- "value":
304
- "brightness(0) saturate(100%) invert(32%) sepia(99%) saturate(1186%) hue-rotate(181deg) brightness(91%) contrast(103%)",
288
+ "value": "brightness(0) saturate(100%) invert(32%) sepia(99%) saturate(1186%) hue-rotate(181deg) brightness(91%) contrast(103%)",
305
289
  "originalValue": "{!color-blue}"
306
290
  },
307
291
  "color-blue-light": {
308
292
  "type": "color",
309
293
  "category": "background-color",
310
294
  "name": "color-blue-light",
311
- "value":
312
- "brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(1832%) hue-rotate(178deg) brightness(108%) contrast(96%)",
295
+ "value": "brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(1832%) hue-rotate(178deg) brightness(108%) contrast(96%)",
313
296
  "originalValue": "{!color-blue-light}"
314
297
  },
315
298
  "color-blue-lighter": {
316
299
  "type": "color",
317
300
  "category": "background-color",
318
301
  "name": "color-blue-lighter",
319
- "value":
320
- "brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%)",
302
+ "value": "brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(686%) hue-rotate(175deg) brightness(103%) contrast(96%)",
321
303
  "originalValue": "{!color-blue-lighter}"
322
304
  },
323
305
  "color-teal-text": {
324
306
  "type": "color",
325
307
  "category": "text-color",
326
308
  "name": "color-teal-text",
327
- "value":
328
- "brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(665%) hue-rotate(128deg) brightness(94%) contrast(93%)",
309
+ "value": "brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(665%) hue-rotate(128deg) brightness(94%) contrast(93%)",
329
310
  "originalValue": "{!color-teal-text}"
330
311
  },
331
312
  "color-teal-darker": {
332
313
  "type": "color",
333
314
  "category": "background-color",
334
315
  "name": "color-teal-darker",
335
- "value":
336
- "brightness(0) saturate(100%) invert(15%) sepia(23%) saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%)",
316
+ "value": "brightness(0) saturate(100%) invert(15%) sepia(23%) saturate(2237%) hue-rotate(141deg) brightness(96%) contrast(104%)",
337
317
  "originalValue": "{!color-teal-darker}"
338
318
  },
339
319
  "color-teal-dark": {
340
320
  "type": "color",
341
321
  "category": "background-color",
342
322
  "name": "color-teal-dark",
343
- "value":
344
- "brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(3919%) hue-rotate(168deg) brightness(93%) contrast(101%)",
323
+ "value": "brightness(0) saturate(100%) invert(28%) sepia(83%) saturate(3919%) hue-rotate(168deg) brightness(93%) contrast(101%)",
345
324
  "originalValue": "{!color-teal-dark}"
346
325
  },
347
326
  "color-teal": {
348
327
  "type": "color",
349
328
  "category": "background-color",
350
329
  "name": "color-teal",
351
- "value":
352
- "brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%) hue-rotate(130deg) brightness(92%) contrast(87%)",
330
+ "value": "brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(2838%) hue-rotate(130deg) brightness(92%) contrast(87%)",
353
331
  "originalValue": "{!color-teal}"
354
332
  },
355
333
  "color-teal-light": {
356
334
  "type": "color",
357
335
  "category": "background-color",
358
336
  "name": "color-teal-light",
359
- "value":
360
- "brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(683%) hue-rotate(122deg) brightness(97%) contrast(91%)",
337
+ "value": "brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(683%) hue-rotate(122deg) brightness(97%) contrast(91%)",
361
338
  "originalValue": "{!color-teal-light}"
362
339
  },
363
340
  "color-teal-lighter": {
364
341
  "type": "color",
365
342
  "category": "background-color",
366
343
  "name": "color-teal-lighter",
367
- "value":
368
- "brightness(0) saturate(100%) invert(87%) sepia(5%) saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%)",
344
+ "value": "brightness(0) saturate(100%) invert(87%) sepia(5%) saturate(1124%) hue-rotate(173deg) brightness(114%) contrast(92%)",
369
345
  "originalValue": "{!color-teal-lighter}"
370
346
  },
371
347
  "color-green-text": {
372
348
  "type": "color",
373
349
  "category": "text-color",
374
350
  "name": "color-green-text",
375
- "value":
376
- "brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(1010%) hue-rotate(63deg) brightness(91%) contrast(91%)",
351
+ "value": "brightness(0) saturate(100%) invert(30%) sepia(8%) saturate(1010%) hue-rotate(63deg) brightness(91%) contrast(91%)",
377
352
  "originalValue": "{!color-green-text}"
378
353
  },
379
354
  "color-green-darker": {
380
355
  "type": "color",
381
356
  "category": "background-color",
382
357
  "name": "color-green-darker",
383
- "value":
384
- "brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(727%) hue-rotate(118deg) brightness(93%) contrast(91%)",
358
+ "value": "brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(727%) hue-rotate(118deg) brightness(93%) contrast(91%)",
385
359
  "originalValue": "{!color-green-darker}"
386
360
  },
387
361
  "color-green-dark": {
388
362
  "type": "color",
389
363
  "category": "background-color",
390
364
  "name": "color-green-dark",
391
- "value":
392
- "brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(6649%) hue-rotate(155deg) brightness(97%) contrast(87%)",
365
+ "value": "brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(6649%) hue-rotate(155deg) brightness(97%) contrast(87%)",
393
366
  "originalValue": "{!color-green-dark}"
394
367
  },
395
368
  "color-green": {
396
369
  "type": "color",
397
370
  "category": "background-color",
398
371
  "name": "color-green",
399
- "value":
400
- "brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(2637%) hue-rotate(64deg) brightness(106%) contrast(91%)",
372
+ "value": "brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(2637%) hue-rotate(64deg) brightness(106%) contrast(91%)",
401
373
  "originalValue": "{!color-green}"
402
374
  },
403
375
  "color-green-light": {
404
376
  "type": "color",
405
377
  "category": "background-color",
406
378
  "name": "color-green-light",
407
- "value":
408
- "brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(599%) hue-rotate(52deg) brightness(93%) contrast(93%)",
379
+ "value": "brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(599%) hue-rotate(52deg) brightness(93%) contrast(93%)",
409
380
  "originalValue": "{!color-green-light}"
410
381
  },
411
382
  "color-green-lighter": {
412
383
  "type": "color",
413
384
  "category": "background-color",
414
385
  "name": "color-green-lighter",
415
- "value":
416
- "brightness(0) saturate(100%) invert(92%) sepia(51%) saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%)",
386
+ "value": "brightness(0) saturate(100%) invert(92%) sepia(51%) saturate(187%) hue-rotate(46deg) brightness(108%) contrast(89%)",
417
387
  "originalValue": "{!color-green-lighter}"
418
388
  },
419
389
  "color-yellow-text": {
420
390
  "type": "color",
421
391
  "category": "text-color",
422
392
  "name": "color-yellow-text",
423
- "value":
424
- "brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(413%) hue-rotate(11deg) brightness(97%) contrast(91%)",
393
+ "value": "brightness(0) saturate(100%) invert(28%) sepia(42%) saturate(413%) hue-rotate(11deg) brightness(97%) contrast(91%)",
425
394
  "originalValue": "{!color-yellow-text}"
426
395
  },
427
396
  "color-yellow-darker": {
428
397
  "type": "color",
429
398
  "category": "background-color",
430
399
  "name": "color-yellow-darker",
431
- "value":
432
- "brightness(0) saturate(100%) invert(19%) sepia(75%) saturate(981%) hue-rotate(17deg) brightness(103%) contrast(103%)",
400
+ "value": "brightness(0) saturate(100%) invert(19%) sepia(75%) saturate(981%) hue-rotate(17deg) brightness(103%) contrast(103%)",
433
401
  "originalValue": "{!color-yellow-darker}"
434
402
  },
435
403
  "color-yellow-dark": {
436
404
  "type": "color",
437
405
  "category": "background-color",
438
406
  "name": "color-yellow-dark",
439
- "value":
440
- "brightness(0) saturate(100%) invert(45%) sepia(48%) saturate(6022%) hue-rotate(31deg) brightness(93%) contrast(80%)",
407
+ "value": "brightness(0) saturate(100%) invert(45%) sepia(48%) saturate(6022%) hue-rotate(31deg) brightness(93%) contrast(80%)",
441
408
  "originalValue": "{!color-yellow-dark}"
442
409
  },
443
410
  "color-yellow": {
444
411
  "type": "color",
445
412
  "category": "background-color",
446
413
  "name": "color-yellow",
447
- "value":
448
- "brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%)",
414
+ "value": "brightness(0) saturate(100%) invert(65%) sepia(91%) saturate(530%) hue-rotate(5deg) brightness(100%) contrast(100%)",
449
415
  "originalValue": "{!color-yellow}"
450
416
  },
451
417
  "color-yellow-light": {
452
418
  "type": "color",
453
419
  "category": "background-color",
454
420
  "name": "color-yellow-light",
455
- "value":
456
- "brightness(0) saturate(100%) invert(77%) sepia(72%) saturate(246%) hue-rotate(355deg) brightness(103%) contrast(107%)",
421
+ "value": "brightness(0) saturate(100%) invert(77%) sepia(72%) saturate(246%) hue-rotate(355deg) brightness(103%) contrast(107%)",
457
422
  "originalValue": "{!color-yellow-light}"
458
423
  },
459
424
  "color-yellow-lighter": {
460
425
  "type": "color",
461
426
  "category": "background-color",
462
427
  "name": "color-yellow-lighter",
463
- "value":
464
- "brightness(0) saturate(100%) invert(88%) sepia(27%) saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%)",
428
+ "value": "brightness(0) saturate(100%) invert(88%) sepia(27%) saturate(234%) hue-rotate(357deg) brightness(103%) contrast(98%)",
465
429
  "originalValue": "{!color-yellow-lighter}"
466
430
  },
467
431
  "color-orange-text": {
468
432
  "type": "color",
469
433
  "category": "text-color",
470
434
  "name": "color-orange-text",
471
- "value":
472
- "brightness(0) saturate(100%) invert(23%) sepia(18%) saturate(1092%) hue-rotate(348deg) brightness(99%) contrast(84%)",
435
+ "value": "brightness(0) saturate(100%) invert(23%) sepia(18%) saturate(1092%) hue-rotate(348deg) brightness(99%) contrast(84%)",
473
436
  "originalValue": "{!color-orange-text}"
474
437
  },
475
438
  "color-orange-darker": {
476
439
  "type": "color",
477
440
  "category": "background-color",
478
441
  "name": "color-orange-darker",
479
- "value":
480
- "brightness(0) saturate(100%) invert(9%) sepia(83%) saturate(1926%) hue-rotate(356deg) brightness(98%) contrast(99%)",
442
+ "value": "brightness(0) saturate(100%) invert(9%) sepia(83%) saturate(1926%) hue-rotate(356deg) brightness(98%) contrast(99%)",
481
443
  "originalValue": "{!color-orange-darker}"
482
444
  },
483
445
  "color-orange-dark": {
484
446
  "type": "color",
485
447
  "category": "background-color",
486
448
  "name": "color-orange-dark",
487
- "value":
488
- "brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(1431%) hue-rotate(5deg) brightness(96%) contrast(82%)",
449
+ "value": "brightness(0) saturate(100%) invert(29%) sepia(94%) saturate(1431%) hue-rotate(5deg) brightness(96%) contrast(82%)",
489
450
  "originalValue": "{!color-orange-dark}"
490
451
  },
491
452
  "color-orange": {
492
453
  "type": "color",
493
454
  "category": "background-color",
494
455
  "name": "color-orange",
495
- "value":
496
- "brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(416%) hue-rotate(340deg) brightness(105%) contrast(91%)",
456
+ "value": "brightness(0) saturate(100%) invert(54%) sepia(86%) saturate(416%) hue-rotate(340deg) brightness(105%) contrast(91%)",
497
457
  "originalValue": "{!color-orange}"
498
458
  },
499
459
  "color-orange-light": {
500
460
  "type": "color",
501
461
  "category": "background-color",
502
462
  "name": "color-orange-light",
503
- "value":
504
- "brightness(0) saturate(100%) invert(77%) sepia(39%) saturate(483%) hue-rotate(335deg) brightness(101%) contrast(103%)",
463
+ "value": "brightness(0) saturate(100%) invert(77%) sepia(39%) saturate(483%) hue-rotate(335deg) brightness(101%) contrast(103%)",
505
464
  "originalValue": "{!color-orange-light}"
506
465
  },
507
466
  "color-orange-lighter": {
508
467
  "type": "color",
509
468
  "category": "background-color",
510
469
  "name": "color-orange-lighter",
511
- "value":
512
- "brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(918%) hue-rotate(312deg) brightness(107%) contrast(98%)",
470
+ "value": "brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(918%) hue-rotate(312deg) brightness(107%) contrast(98%)",
513
471
  "originalValue": "{!color-orange-lighter}"
514
472
  },
515
473
  "color-red-text": {
516
474
  "type": "color",
517
475
  "category": "text-color",
518
476
  "name": "color-red-text",
519
- "value":
520
- "brightness(0) saturate(100%) invert(22%) sepia(9%) saturate(2068%) hue-rotate(325deg) brightness(92%) contrast(83%)",
477
+ "value": "brightness(0) saturate(100%) invert(22%) sepia(9%) saturate(2068%) hue-rotate(325deg) brightness(92%) contrast(83%)",
521
478
  "originalValue": "{!color-red-text}"
522
479
  },
523
480
  "color-red-darker": {
524
481
  "type": "color",
525
482
  "category": "background-color",
526
483
  "name": "color-red-darker",
527
- "value":
528
- "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
484
+ "value": "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
529
485
  "originalValue": "{!color-red-darker}"
530
486
  },
531
487
  "color-red-dark": {
532
488
  "type": "color",
533
489
  "category": "background-color",
534
490
  "name": "color-red-dark",
535
- "value":
536
- "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
491
+ "value": "brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(5699%) hue-rotate(353deg) brightness(75%) contrast(101%)",
537
492
  "originalValue": "{!color-red-dark}"
538
493
  },
539
494
  "color-red": {
540
495
  "type": "color",
541
496
  "category": "background-color",
542
497
  "name": "color-red",
543
- "value":
544
- "brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)",
498
+ "value": "brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)",
545
499
  "originalValue": "{!color-red}"
546
500
  },
547
501
  "color-red-light": {
548
502
  "type": "color",
549
503
  "category": "background-color",
550
504
  "name": "color-red-light",
551
- "value":
552
- "brightness(0) saturate(100%) invert(80%) sepia(9%) saturate(2561%) hue-rotate(313deg) brightness(101%) contrast(99%)",
505
+ "value": "brightness(0) saturate(100%) invert(80%) sepia(9%) saturate(2561%) hue-rotate(313deg) brightness(101%) contrast(99%)",
553
506
  "originalValue": "{!color-red-light}"
554
507
  },
555
508
  "color-red-lighter": {
556
509
  "type": "color",
557
510
  "category": "background-color",
558
511
  "name": "color-red-lighter",
559
- "value":
560
- "brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%)",
512
+ "value": "brightness(0) saturate(100%) invert(89%) sepia(21%) saturate(137%) hue-rotate(324deg) brightness(102%) contrast(97%)",
561
513
  "originalValue": "{!color-red-lighter}"
562
514
  },
563
515
  "color-ink": {
564
516
  "type": "color",
565
517
  "category": "background-color",
566
518
  "name": "color-ink",
567
- "value":
568
- "brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%) hue-rotate(171deg) brightness(99%) contrast(84%)",
519
+ "value": "brightness(0) saturate(100%) invert(10%) sepia(10%) saturate(2259%) hue-rotate(171deg) brightness(99%) contrast(84%)",
569
520
  "originalValue": "{!color-ink}"
570
521
  },
571
522
  "color-ink-light": {
572
523
  "type": "color",
573
524
  "category": "background-color",
574
525
  "name": "color-ink-light",
575
- "value":
576
- "brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1069%) hue-rotate(173deg) brightness(83%) contrast(84%)",
526
+ "value": "brightness(0) saturate(100%) invert(32%) sepia(9%) saturate(1069%) hue-rotate(173deg) brightness(83%) contrast(84%)",
577
527
  "originalValue": "{!color-ink-light}"
578
528
  },
579
529
  "color-ink-lighter": {
580
530
  "type": "color",
581
531
  "category": "background-color",
582
532
  "name": "color-ink-lighter",
583
- "value":
584
- "brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%)",
533
+ "value": "brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%)",
585
534
  "originalValue": "{!color-ink-lighter}"
586
535
  },
587
536
  "color-ink-lightest": {
588
537
  "type": "color",
589
538
  "category": "background-color",
590
539
  "name": "color-ink-lightest",
591
- "value":
592
- "brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%)",
540
+ "value": "brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(246%) hue-rotate(169deg) brightness(88%) contrast(90%)",
593
541
  "originalValue": "{!color-ink-lightest}"
594
542
  },
595
543
  "color-sky-dark": {
596
544
  "type": "color",
597
545
  "category": "background-color",
598
546
  "name": "color-sky-dark",
599
- "value":
600
- "brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(502%) hue-rotate(167deg) brightness(96%) contrast(91%)",
547
+ "value": "brightness(0) saturate(100%) invert(86%) sepia(4%) saturate(502%) hue-rotate(167deg) brightness(96%) contrast(91%)",
601
548
  "originalValue": "{!color-sky-dark}"
602
549
  },
603
550
  "color-sky": {
604
551
  "type": "color",
605
552
  "category": "background-color",
606
553
  "name": "color-sky",
607
- "value":
608
- "brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%) hue-rotate(175deg) brightness(97%) contrast(87%)",
554
+ "value": "brightness(0) saturate(100%) invert(100%) sepia(95%) saturate(336%) hue-rotate(175deg) brightness(97%) contrast(87%)",
609
555
  "originalValue": "{!color-sky}"
610
556
  },
611
557
  "color-sky-light": {
612
558
  "type": "color",
613
559
  "category": "background-color",
614
560
  "name": "color-sky-light",
615
- "value":
616
- "brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(467%) hue-rotate(174deg) brightness(99%) contrast(96%)",
561
+ "value": "brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(467%) hue-rotate(174deg) brightness(99%) contrast(96%)",
617
562
  "originalValue": "{!color-sky-light}"
618
563
  },
619
564
  "color-sky-lighter": {
620
565
  "type": "color",
621
566
  "category": "background-color",
622
567
  "name": "color-sky-lighter",
623
- "value":
624
- "brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(159%) hue-rotate(170deg) brightness(99%) contrast(99%)",
568
+ "value": "brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(159%) hue-rotate(170deg) brightness(99%) contrast(99%)",
625
569
  "originalValue": "{!color-sky-lighter}"
626
570
  },
627
571
  "color-black": {
@@ -53,7 +53,7 @@
53
53
  <color name="polaris_color_teal_text">#ff405352</color>
54
54
  <color name="polaris_color_white">#ffffffff</color>
55
55
  <color name="polaris_color_yellow">#ffeec200</color>
56
- <color name="polaris_color_yellow_dark">#ff9c6f19</color>
56
+ <color name="polaris_color_yellow_dark">#ff8a6116</color>
57
57
  <color name="polaris_color_yellow_darker">#ff573b00</color>
58
58
  <color name="polaris_color_yellow_light">#ffffea8a</color>
59
59
  <color name="polaris_color_yellow_lighter">#fffcf1cd</color>
@@ -198,7 +198,7 @@
198
198
  "name": "yellow-dark",
199
199
  "model": "RGB",
200
200
  "type": "global",
201
- "color": [0.611764705882353, 0.43529411764705883, 0.09803921568627451]
201
+ "color": [0.5411764705882353, 0.3803921568627451, 0.08627450980392157]
202
202
  },
203
203
  {
204
204
  "name": "yellow",
@@ -42,7 +42,7 @@ $polaris-colors: (
42
42
  'yellow': (
43
43
  'text': rgb(89, 81, 48),
44
44
  'darker': rgb(87, 59, 0),
45
- 'dark': rgb(156, 111, 25),
45
+ 'dark': rgb(138, 97, 22),
46
46
  'base': rgb(238, 194, 0),
47
47
  'light': rgb(255, 234, 138),
48
48
  'lighter': rgb(252, 241, 205),
@@ -31,7 +31,7 @@ module.exports = {
31
31
  colorGreenLighter: 'rgb(227, 241, 223)',
32
32
  colorYellowText: 'rgb(89, 81, 48)',
33
33
  colorYellowDarker: 'rgb(87, 59, 0)',
34
- colorYellowDark: 'rgb(156, 111, 25)',
34
+ colorYellowDark: 'rgb(138, 97, 22)',
35
35
  colorYellow: 'rgb(238, 194, 0)',
36
36
  colorYellowLight: 'rgb(255, 234, 138)',
37
37
  colorYellowLighter: 'rgb(252, 241, 205)',
@@ -31,7 +31,7 @@
31
31
  --color-green-lighter: rgb(227, 241, 223);
32
32
  --color-yellow-text: rgb(89, 81, 48);
33
33
  --color-yellow-darker: rgb(87, 59, 0);
34
- --color-yellow-dark: rgb(156, 111, 25);
34
+ --color-yellow-dark: rgb(138, 97, 22);
35
35
  --color-yellow: rgb(238, 194, 0);
36
36
  --color-yellow-light: rgb(255, 234, 138);
37
37
  --color-yellow-lighter: rgb(252, 241, 205);
@@ -31,7 +31,7 @@
31
31
  "color-green-lighter": "rgb(227, 241, 223)",
32
32
  "color-yellow-text": "rgb(89, 81, 48)",
33
33
  "color-yellow-darker": "rgb(87, 59, 0)",
34
- "color-yellow-dark": "rgb(156, 111, 25)",
34
+ "color-yellow-dark": "rgb(138, 97, 22)",
35
35
  "color-yellow": "rgb(238, 194, 0)",
36
36
  "color-yellow-light": "rgb(255, 234, 138)",
37
37
  "color-yellow-lighter": "rgb(252, 241, 205)",
@@ -96,7 +96,7 @@ $polaris-colors-map: (
96
96
  rgb(87, 59, 0),
97
97
  ),
98
98
  'color-yellow-dark': (
99
- rgb(156, 111, 25),
99
+ rgb(138, 97, 22),
100
100
  ),
101
101
  'color-yellow': (
102
102
  rgb(238, 194, 0),
@@ -25,7 +25,7 @@
25
25
  "value": "#b3bcf5"
26
26
  },
27
27
  "color-yellow-dark": {
28
- "value": "#9c6f19"
28
+ "value": "#8a6116"
29
29
  },
30
30
  "color-ink-light": {
31
31
  "value": "#454f5b"
@@ -404,7 +404,7 @@
404
404
  "type": "color",
405
405
  "category": "background-color",
406
406
  "name": "color-yellow-dark",
407
- "value": "rgb(156, 111, 25)",
407
+ "value": "rgb(138, 97, 22)",
408
408
  "originalValue": "{!color-yellow-dark}"
409
409
  },
410
410
  "color-yellow": {
@@ -30,7 +30,7 @@ $color-green-light: rgb(187, 229, 179);
30
30
  $color-green-lighter: rgb(227, 241, 223);
31
31
  $color-yellow-text: rgb(89, 81, 48);
32
32
  $color-yellow-darker: rgb(87, 59, 0);
33
- $color-yellow-dark: rgb(156, 111, 25);
33
+ $color-yellow-dark: rgb(138, 97, 22);
34
34
  $color-yellow: rgb(238, 194, 0);
35
35
  $color-yellow-light: rgb(255, 234, 138);
36
36
  $color-yellow-lighter: rgb(252, 241, 205);
@@ -31,7 +31,7 @@ module.exports = {
31
31
  colorGreenLighter: 'rgb(227, 241, 223)',
32
32
  colorYellowText: 'rgb(89, 81, 48)',
33
33
  colorYellowDarker: 'rgb(87, 59, 0)',
34
- colorYellowDark: 'rgb(156, 111, 25)',
34
+ colorYellowDark: 'rgb(138, 97, 22)',
35
35
  colorYellow: 'rgb(238, 194, 0)',
36
36
  colorYellowLight: 'rgb(255, 234, 138)',
37
37
  colorYellowLighter: 'rgb(252, 241, 205)',
@@ -31,7 +31,7 @@
31
31
  --color-green-lighter: rgb(227, 241, 223);
32
32
  --color-yellow-text: rgb(89, 81, 48);
33
33
  --color-yellow-darker: rgb(87, 59, 0);
34
- --color-yellow-dark: rgb(156, 111, 25);
34
+ --color-yellow-dark: rgb(138, 97, 22);
35
35
  --color-yellow: rgb(238, 194, 0);
36
36
  --color-yellow-light: rgb(255, 234, 138);
37
37
  --color-yellow-lighter: rgb(252, 241, 205);
@@ -52,7 +52,7 @@ declare interface Tokens {
52
52
  colorTealText: "rgb(64, 83, 82)";
53
53
  colorWhite: "rgb(255, 255, 255)";
54
54
  colorYellow: "rgb(238, 194, 0)";
55
- colorYellowDark: "rgb(156, 111, 25)";
55
+ colorYellowDark: "rgb(138, 97, 22)";
56
56
  colorYellowDarker: "rgb(87, 59, 0)";
57
57
  colorYellowLight: "rgb(255, 234, 138)";
58
58
  colorYellowLighter: "rgb(252, 241, 205)";
@@ -31,7 +31,7 @@
31
31
  "color-green-lighter": "rgb(227, 241, 223)",
32
32
  "color-yellow-text": "rgb(89, 81, 48)",
33
33
  "color-yellow-darker": "rgb(87, 59, 0)",
34
- "color-yellow-dark": "rgb(156, 111, 25)",
34
+ "color-yellow-dark": "rgb(138, 97, 22)",
35
35
  "color-yellow": "rgb(238, 194, 0)",
36
36
  "color-yellow-light": "rgb(255, 234, 138)",
37
37
  "color-yellow-lighter": "rgb(252, 241, 205)",
@@ -63,7 +63,6 @@
63
63
  "spacing-base": "16px",
64
64
  "spacing-loose": "20px",
65
65
  "spacing-extra-loose": "32px",
66
- "font-stack-base":
67
- "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
66
+ "font-stack-base": "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
68
67
  "font-stack-monospace": "Monaco, Consolas, 'Lucida Console', monospace"
69
68
  }
@@ -96,7 +96,7 @@ $polaris-index-map: (
96
96
  rgb(87, 59, 0),
97
97
  ),
98
98
  'color-yellow-dark': (
99
- rgb(156, 111, 25),
99
+ rgb(138, 97, 22),
100
100
  ),
101
101
  'color-yellow': (
102
102
  rgb(238, 194, 0),
@@ -25,7 +25,7 @@
25
25
  "value": "#b3bcf5"
26
26
  },
27
27
  "color-yellow-dark": {
28
- "value": "#9c6f19"
28
+ "value": "#8a6116"
29
29
  },
30
30
  "color-ink-light": {
31
31
  "value": "#454f5b"
@@ -404,7 +404,7 @@
404
404
  "type": "color",
405
405
  "category": "background-color",
406
406
  "name": "color-yellow-dark",
407
- "value": "rgb(156, 111, 25)",
407
+ "value": "rgb(138, 97, 22)",
408
408
  "originalValue": "{!color-yellow-dark}"
409
409
  },
410
410
  "color-yellow": {
@@ -628,10 +628,8 @@
628
628
  "type": "string",
629
629
  "category": "font-family",
630
630
  "name": "font-stack-base",
631
- "value":
632
- "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
633
- "originalValue":
634
- "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif"
631
+ "value": "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
632
+ "originalValue": "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif"
635
633
  },
636
634
  "font-stack-monospace": {
637
635
  "type": "string",
@@ -30,7 +30,7 @@ $color-green-light: rgb(187, 229, 179);
30
30
  $color-green-lighter: rgb(227, 241, 223);
31
31
  $color-yellow-text: rgb(89, 81, 48);
32
32
  $color-yellow-darker: rgb(87, 59, 0);
33
- $color-yellow-dark: rgb(156, 111, 25);
33
+ $color-yellow-dark: rgb(138, 97, 22);
34
34
  $color-yellow: rgb(238, 194, 0);
35
35
  $color-yellow-light: rgb(255, 234, 138);
36
36
  $color-yellow-lighter: rgb(252, 241, 205);
@@ -1,5 +1,4 @@
1
1
  {
2
- "font-stack-base":
3
- "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
2
+ "font-stack-base": "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
4
3
  "font-stack-monospace": "Monaco, Consolas, 'Lucida Console', monospace"
5
4
  }
@@ -5,10 +5,8 @@
5
5
  "type": "string",
6
6
  "category": "font-family",
7
7
  "name": "font-stack-base",
8
- "value":
9
- "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
10
- "originalValue":
11
- "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif"
8
+ "value": "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
9
+ "originalValue": "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif"
12
10
  },
13
11
  "font-stack-monospace": {
14
12
  "type": "string",
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@shopify/polaris-tokens",
3
- "version": "2.0.0",
3
+ "version": "2.1.1",
4
4
  "description": "Design Tokens for the Polaris Design System",
5
5
  "main": "index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "scripts": {
8
- "test": "jest",
8
+ "test": "sewing-kit test",
9
9
  "test-watch": "nodemon --exec 'npm-run-all dist test' --watch ./tokens --watch ./formats --watch ./gulpfile.js --watch ./scripts",
10
10
  "clean": "rimraf ./dist",
11
11
  "get-tokens-from-invision-dsm": "node ./scripts/get-tokens-from-invision-dsm.js",
@@ -14,14 +14,11 @@
14
14
  "dist-ci": "npm-run-all dist:* dist:*:*",
15
15
  "dist:gulp": "gulp",
16
16
  "dist:docs": "gulp docs",
17
- "dist:prettier": "prettier ./{dist,docs}/*.{scss,css,json,js} --write",
18
- "dist:colors:prettier-sketchpalette": "prettier ./dist/*.sketchpalette --write --parser json",
17
+ "dist:format": "prettier ./{dist,docs}/*.{js,json,css,scss,sketchpalette} --write",
19
18
  "dist:colors:ase": "node ./scripts/ase-encode.js",
20
19
  "dist:colors:clr:exclude-from-ci": "ase2clr ./dist/colors.ase ./dist/colors.clr",
21
20
  "dist:colors:rename-palettes:exclude-from-ci": "renamer --find colors --replace Polaris ./dist/colors.{ase,clr,sketchpalette}",
22
- "lint": "npm-run-all lint:**",
23
- "lint:js": "eslint . --format codeframe",
24
- "lint:tokens": "yamllint ./tokens/*.yml",
21
+ "lint": "sewing-kit lint",
25
22
  "watch": "gulp watch",
26
23
  "heroku-postbuild": "yarn dist-ci",
27
24
  "start": "http-server docs"
@@ -48,52 +45,42 @@
48
45
  "plugin:shopify/node",
49
46
  "plugin:shopify/esnext",
50
47
  "plugin:shopify/prettier"
51
- ],
52
- "rules": {
53
- "func-style": [
54
- "error",
55
- "declaration",
56
- {
57
- "allowArrowFunctions": true
58
- }
59
- ]
60
- }
48
+ ]
49
+ },
50
+ "stylelint": {
51
+ "extends": [
52
+ "stylelint-config-shopify/prettier"
53
+ ]
61
54
  },
62
55
  "homepage": "https://github.com/Shopify/polaris-tokens#readme",
63
56
  "devDependencies": {
57
+ "@shopify/sewing-kit": "^0.65.0",
64
58
  "ase-util": "^1.0.1",
65
59
  "ase-utils": "^0.1.1",
66
- "browser-sync": "^2.24.6",
67
- "dashify": "^1.0.0",
68
- "eslint": "^5.2.0",
69
- "eslint-config-prettier": "^2.9.0",
70
- "eslint-plugin-prettier": "^2.6.2",
71
- "eslint-plugin-shopify": "^23.0.0",
72
- "fs-extra": "^7.0.0",
60
+ "browser-sync": "^2.26.3",
61
+ "dashify": "^2.0.0",
62
+ "fs-extra": "^7.0.1",
73
63
  "gray-matter": "^4.0.1",
74
64
  "gulp": "^3.9.1",
75
65
  "gulp-load-plugins": "^1.5.0",
76
- "gulp-plumber": "^1.2.0",
66
+ "gulp-plumber": "^1.2.1",
77
67
  "gulp-rename": "^1.4.0",
78
68
  "gulp-restart": "^0.1.1",
79
- "gulp-sass": "^4.0.1",
69
+ "gulp-sass": "^4.0.2",
80
70
  "gulp-sourcemaps": "^2.6.4",
81
71
  "gulp-theo": "^2.0.0",
82
72
  "http-server": "^0.11.1",
83
73
  "immutable": "^3.8.2",
84
- "jest": "^23.4.1",
85
74
  "js-yaml": "^3.12.0",
86
- "lodash": "^4.17.10",
87
- "node-fetch": "^2.2.0",
88
- "nodemon": "^1.18.3",
89
- "npm-run-all": "^4.1.3",
90
- "prettier": "1.13.7",
91
- "renamer": "^1.0.0",
75
+ "lodash": "^4.17.11",
76
+ "node-fetch": "^2.3.0",
77
+ "nodemon": "^1.18.7",
78
+ "npm-run-all": "^4.1.5",
79
+ "renamer": "^1.1.0",
92
80
  "rimraf": "^2.6.2",
93
81
  "run-sequence": "^2.2.1",
94
- "theo": "8.0.0-beta.2",
82
+ "theo": "8.0.1",
95
83
  "tinycolor2": "^1.4.1",
96
- "xml": "^1.0.1",
97
- "yaml-lint": "^1.2.4"
84
+ "xml": "^1.0.1"
98
85
  }
99
86
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: polaris_tokens
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.0.0
4
+ version: 2.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Shopify
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-10-23 00:00:00.000000000 Z
11
+ date: 2019-01-04 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description: Design Tokens for the Polaris Design System
14
14
  email:
@@ -85,7 +85,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
85
85
  version: '0'
86
86
  requirements: []
87
87
  rubyforge_project:
88
- rubygems_version: 2.6.14
88
+ rubygems_version: 2.7.6
89
89
  signing_key:
90
90
  specification_version: 4
91
91
  summary: Design Tokens for the Polaris Design System