@paprika/tokens 3.0.0 → 3.1.0

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 (8) hide show
  1. package/README.md +10 -1
  2. package/lib/tokens.js +72 -72
  3. package/lib/tokens.js.map +1 -1
  4. package/lib/tokens.json +72 -72
  5. package/lib/tokens.mdx +72 -72
  6. package/lib/tokens.scss +72 -72
  7. package/lib/tokens.yaml +40 -40
  8. package/package.json +2 -2
package/README.md CHANGED
@@ -8,7 +8,16 @@ They include an extensive colour palette, spacing values, and other CSS properti
8
8
 
9
9
  On the Paprika wiki pages, you can [read more about using design tokens](https://github.com/acl-services/paprika/wiki/Coding-Conventions#tokens).
10
10
 
11
- The Starling Design System site has a [**tokens reference page**](https://design.wegalvanize.com/tokens).
11
+ ## References
12
+
13
+ <details>
14
+ <summary>View All Paprika Design Tokens 👀</summary>
15
+
16
+ ![paprika-tokens](https://user-images.githubusercontent.com/14944896/222009355-5dca239b-9f18-4c6b-8ee5-8f924f446204.png)
17
+
18
+ </details>
19
+
20
+ Source file: [tokens.yaml](src/tokens.yaml)
12
21
 
13
22
  ## Installation
14
23
 
package/lib/tokens.js CHANGED
@@ -11,16 +11,16 @@ var tokens = {
11
11
  "color": {
12
12
  "black": "#3f3d3c",
13
13
  "blackLighten10": "#575757",
14
- "blackLighten20": "#717171",
14
+ "blackLighten20": "rgb(112.5,112.5,112.5)",
15
15
  "blackLighten30": "#8a8a8a",
16
- "blackLighten40": "#a4a4a4",
16
+ "blackLighten40": "rgb(163.5,163.5,163.5)",
17
17
  "blackLighten50": "#bdbdbd",
18
- "blackLighten60": "#d7d7d7",
18
+ "blackLighten60": "rgb(214.5,214.5,214.5)",
19
19
  "blackLighten70": "#f0f0f0",
20
20
  "blackLighten80": "#f7f7f7",
21
21
  "blackLighten90": "#fcfcfc",
22
- "blackDisabled": "#a4a4a4",
23
- "blackPure": "#000000",
22
+ "blackDisabled": "rgb(163.5,163.5,163.5)",
23
+ "blackPure": "#000",
24
24
  "blue": "#276cf5",
25
25
  "blueDarken20": "#004a94",
26
26
  "blueDarken10": "#0063c5",
@@ -30,59 +30,59 @@ var tokens = {
30
30
  "blueLighten40": "#cce5fd",
31
31
  "blueLighten50": "#e5f1fe",
32
32
  "creme": "#e6e3df",
33
- "cremeDarken30": "#a39889",
34
- "cremeDarken20": "#b9b1a6",
35
- "cremeDarken10": "#d0cac2",
36
- "cremeLighten5": "#f1f0ed",
37
- "cremeLighten10": "#fcfcfc",
38
- "diligent": "#2F3B4D",
39
- "diligentLighten10": "#37465B",
33
+ "cremeDarken30": "hsl(34.2857142857,12.2807017544%,58.8235294118%)",
34
+ "cremeDarken20": "hsl(34.2857142857,12.2807017544%,68.8235294118%)",
35
+ "cremeDarken10": "hsl(34.2857142857,12.2807017544%,78.8235294118%)",
36
+ "cremeLighten5": "hsl(34.2857142857,12.2807017544%,93.8235294118%)",
37
+ "cremeLighten10": "hsl(34.2857142857,12.2807017544%,98.8235294118%)",
38
+ "diligent": "#2f3b4d",
39
+ "diligentLighten10": "#37465b",
40
40
  "diligentLighten20": "#455772",
41
- "diligentLighten30": "#5D7599",
42
- "diligentLighten70": "#F4F6F8",
41
+ "diligentLighten30": "#5d7599",
42
+ "diligentLighten70": "#f4f6f8",
43
43
  "diligentDarken10": "#202935",
44
44
  "green": "#42996d",
45
- "greenDarken10": "#337554",
46
- "greenDarken20": "#23523a",
47
- "greenLighten10": "#5db187",
48
- "greenLighten20": "#80c1a0",
49
- "greenLighten30": "#a2d2ba",
50
- "greenLighten40": "#c4e3d3",
51
- "greenLighten50": "#e7f3ed",
45
+ "greenDarken10": "rgb(50.6301369863,117.3698630137,83.6164383562)",
46
+ "greenDarken20": "rgb(35.2602739726,81.7397260274,58.2328767123)",
47
+ "greenLighten10": "rgb(93.3287671233,176.6712328767,134.5210203118)",
48
+ "greenLighten20": "rgb(127.6839041096,193.3160958904,160.1228034955)",
49
+ "greenLighten30": "rgb(162.0390410959,209.9609589041,185.7245866793)",
50
+ "greenLighten40": "rgb(196.3941780822,226.6058219178,211.326369863)",
51
+ "greenLighten50": "rgb(230.7493150685,243.2506849315,236.9281530468)",
52
52
  "offWhite": "#f0f0f0",
53
53
  "orange": "#de4d33",
54
- "orangeDarken10": "#bf371f",
55
- "orangeDarken20": "#932b18",
56
- "orangeDarken30": "#671e11",
57
- "orangeLighten10": "#e07764",
58
- "orangeLighten20": "#e99c8e",
59
- "orangeLighten30": "#f1c1b9",
60
- "orangeLighten40": "#fae7e3",
61
- "orangeDisabled": "#e99c8e",
54
+ "orangeDarken10": "rgb(191.0886075949,55.2658227848,30.9113924051)",
55
+ "orangeDarken20": "rgb(147.1898734177,42.5696202532,23.8101265823)",
56
+ "orangeDarken30": "rgb(103.2911392405,29.8734177215,16.7088607595)",
57
+ "orangeLighten10": "hsl(9.1228070175,67.1518987342%,63.5294117647%)",
58
+ "orangeLighten20": "hsl(9.1228070175,67.1518987342%,73.5294117647%)",
59
+ "orangeLighten30": "hsl(9.1228070175,67.1518987342%,83.5294117647%)",
60
+ "orangeLighten40": "hsl(9.1228070175,67.1518987342%,93.5294117647%)",
61
+ "orangeDisabled": "hsl(9.1228070175,67.1518987342%,73.5294117647%)",
62
62
  "orangeHighlight": "#e1624b",
63
63
  "purple": "#785cba",
64
- "purpleDarken10": "#5f449f",
65
- "purpleDarken20": "#4a347c",
66
- "purpleLighten10": "#9884c5",
67
- "purpleLighten20": "#b5a7d5",
68
- "purpleLighten30": "#d2c9e6",
69
- "purpleLighten40": "#efecf6",
70
- "purpleLighten50": "#fbfafd",
71
- "white": "#ffffff",
64
+ "purpleDarken10": "rgb(94.9094827586,67.5129310345,159.4870689655)",
65
+ "purpleDarken20": "rgb(73.5862068966,52.3448275862,123.6551724138)",
66
+ "purpleLighten10": "rgb(151.5059794571,132.3568965517,196.6431034483)",
67
+ "purpleLighten20": "rgb(180.6672780631,166.9137931034,213.0862068966)",
68
+ "purpleLighten30": "rgb(209.8285766691,201.4706896552,229.5293103448)",
69
+ "purpleLighten40": "rgb(238.9898752751,236.0275862069,245.9724137931)",
70
+ "purpleLighten50": "rgb(250.6543947175,249.8503448276,252.5496551724)",
71
+ "white": "#fff",
72
72
  "yellow": "#eaba51",
73
- "yellowDarken10": "#e5a823",
74
- "yellowDarken20": "#be8a17",
75
- "yellowDarken30": "#916911",
76
- "yellowDarken40": "#63480c",
77
- "yellowLighten10": "#eccb82",
78
- "yellowLighten20": "#f3ddae",
79
- "yellowLighten30": "#f9f0db",
73
+ "yellowDarken10": "rgb(228.5076923077,167.9538461538,35.4923076923)",
74
+ "yellowDarken20": "rgb(190.0615384615,137.6307692308,22.9384615385)",
75
+ "yellowDarken30": "rgb(144.5538461538,104.6769230769,17.4461538462)",
76
+ "yellowDarken40": "rgb(99.0461538462,71.7230769231,11.9538461538)",
77
+ "yellowLighten10": "hsl(41.1764705882,73.4615384615%,71.7647058824%)",
78
+ "yellowLighten20": "hsl(41.1764705882,73.4615384615%,81.7647058824%)",
79
+ "yellowLighten30": "hsl(41.1764705882,73.4615384615%,91.7647058824%)",
80
80
  "gold": "#f0a117",
81
81
  "silver": "#cfcfcf",
82
82
  "eggplant": "#2e143d",
83
83
  "eggplantLighten10": "#4b2164",
84
84
  "eggplantLighten20": "#682e8b",
85
- "eggplantLighten30": "#853AB1",
85
+ "eggplantLighten30": "#853ab1",
86
86
  "chartColor01": "#cd3c44",
87
87
  "chartColor02": "#cb8133",
88
88
  "chartColor03": "#eaba51",
@@ -100,7 +100,7 @@ var tokens = {
100
100
  "spaceSm": "4px",
101
101
  "spaceLg": "12px",
102
102
  "placeholder": {
103
- "color": "#717171",
103
+ "color": "rgb(112.5,112.5,112.5)",
104
104
  "fontStyle": "italic"
105
105
  },
106
106
  "highlight": {
@@ -111,8 +111,8 @@ var tokens = {
111
111
  "borderColor": "#276cf5"
112
112
  },
113
113
  "withBorder": {
114
- "boxShadow": "0 0 0 1px #276cf5, 0 0 0 3px #99cbfc",
115
- "insetBoxShadow": "inset 0 0 0 1px #276cf5, inset 0 0 0 3px #99cbfc"
114
+ "boxShadow": "0 0 0 1px #276cf5,0 0 0 3px #99cbfc",
115
+ "insetBoxShadow": "inset 0 0 0 1px #276cf5,inset 0 0 0 3px #99cbfc"
116
116
  },
117
117
  "nonInteractive": {
118
118
  "outline": "2px dotted #8a8a8a"
@@ -120,38 +120,38 @@ var tokens = {
120
120
  },
121
121
  "text": {
122
122
  "green": {
123
- "background": "#e7f3ed",
124
- "font": "#23523a"
123
+ "background": "hsl(149.655172414,34.7260273972%,92.9411764706%)",
124
+ "font": "rgb(35.2602739726,81.7397260274,58.2328767123)"
125
125
  },
126
126
  "orange": {
127
- "background": "#fae7e3",
128
- "font": "#932b18"
127
+ "background": "hsl(9.1228070175,67.1518987342%,93.5294117647%)",
128
+ "font": "rgb(147.1898734177,42.5696202532,23.8101265823)"
129
129
  },
130
130
  "yellow": {
131
131
  "background": "#f7f3ba",
132
- "font": "#63480c"
132
+ "font": "rgb(99.0461538462,71.7230769231,11.9538461538)"
133
133
  }
134
134
  }
135
135
  },
136
136
  "textColor": {
137
137
  "default": "#3f3d3c",
138
- "subtle": "#717171",
138
+ "subtle": "rgb(112.5,112.5,112.5)",
139
139
  "link": "#0063c5",
140
140
  "linkHover": "#004a94",
141
- "icon": "#717171"
141
+ "icon": "rgb(112.5,112.5,112.5)"
142
142
  },
143
143
  "fontFamily": {
144
- "default": "\"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
145
- "jp": "\"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif, \"Hiragino Kaku Gothic Pro\", \"ヒラギノ角ゴ Pro W3\", \"ＭＳ Ｐゴシック\", \"MS PGothic\"",
146
- "kr": "\"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif, \"Malgun Gothic\"",
147
- "zh": "\"Helvetica Neue\", Helvetica, Arial, sans-serif, 黑體-繁, \"Heiti TC\", 儷黑Pro, \"LiHei Pro\", PMingLiu, 宋体, SimSun"
144
+ "default": "\"Lato\",\"Helvetica Neue\",Helvetica,Arial,sans-serif",
145
+ "jp": "\"Lato\",\"Helvetica Neue\",Helvetica,Arial,sans-serif,\"Hiragino Kaku Gothic Pro\",\"ヒラギノ角ゴ Pro W3\",\"ＭＳ Ｐゴシック\",\"MS PGothic\"",
146
+ "kr": "\"Lato\",\"Helvetica Neue\",Helvetica,Arial,sans-serif,\"Malgun Gothic\"",
147
+ "zh": "\"Helvetica Neue\",Helvetica,Arial,sans-serif,黑體-繁,\"Heiti TC\",儷黑Pro,\"LiHei Pro\",PMingLiu,宋体,SimSun"
148
148
  },
149
149
  "table": {
150
150
  "header": {
151
151
  "backgroundColor": "#f0f0f0"
152
152
  },
153
153
  "row": {
154
- "backgroundColor": "#ffffff"
154
+ "backgroundColor": "#fff"
155
155
  },
156
156
  "rowEven": {
157
157
  "backgroundColor": "#f7f7f7"
@@ -159,27 +159,27 @@ var tokens = {
159
159
  },
160
160
  "border": {
161
161
  "radius": "3px",
162
- "color": "#d7d7d7",
163
- "hoverColor": "#a4a4a4",
164
- "colorTransition": "border-color 0.2s"
162
+ "color": "rgb(214.5,214.5,214.5)",
163
+ "hoverColor": "rgb(163.5,163.5,163.5)",
164
+ "colorTransition": "border-color .2s"
165
165
  },
166
166
  "button": {
167
167
  "borderRadius": "4px"
168
168
  },
169
169
  "card": {
170
170
  "borderRadius": "6px",
171
- "shadow": "0 0 0 1px rgba(63,61,60,0.05),0 1px 3px 0 rgba(63,61,60,0.15)"
171
+ "shadow": "0 0 0 1px rgba(63,61,60,.05),0 1px 3px 0 rgba(63,61,60,.15)"
172
172
  },
173
173
  "overlay": {
174
174
  "animationDuration": "700",
175
175
  "backdrop": {
176
- "backgroundColor": "rgba(63,61,60,0.5)"
176
+ "backgroundColor": "rgba(63,61,60,.5)"
177
177
  }
178
178
  },
179
179
  "modal": {
180
- "backgroundColor": "#ffffff",
180
+ "backgroundColor": "#fff",
181
181
  "borderRadius": "6px",
182
- "shadow": "0 8px 12px -4px rgba(63,61,60,0.2),0 1px 3px 0 rgba(63,61,60,0.1)",
182
+ "shadow": "0 8px 12px -4px rgba(63,61,60,.2),0 1px 3px 0 rgba(63,61,60,.1)",
183
183
  "sizes": {
184
184
  "sm": "450px",
185
185
  "md": "675px",
@@ -209,7 +209,7 @@ var tokens = {
209
209
  },
210
210
  "popover": {
211
211
  "borderRadius": "6px",
212
- "shadow": "0 2px 4px rgba(0,0,0,0.1)"
212
+ "shadow": "0 2px 4px rgba(0,0,0,.1)"
213
213
  },
214
214
  "counter": {
215
215
  "small": "17px",
@@ -221,11 +221,11 @@ var tokens = {
221
221
  "fontSize": {
222
222
  "default": "16px"
223
223
  },
224
- "shadow": "0px 1px 5px rgba(0,0,0,0.07),0px 7px 17px rgba(0,0,0,0.1)",
224
+ "shadow": "0px 1px 5px rgba(0,0,0,.07),0px 7px 17px rgba(0,0,0,.1)",
225
225
  "diligent": {
226
- "actionPrimary": "#5D7599",
227
- "backgroundBase": "#F4F6F8",
228
- "brandPrimary": "#2F3B4D"
226
+ "actionPrimary": "#5d7599",
227
+ "backgroundBase": "#f4f6f8",
228
+ "brandPrimary": "#2f3b4d"
229
229
  }
230
230
  };
231
231
  var _default = tokens;
package/lib/tokens.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tokens.js"],"names":["tokens"],"mappings":"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","sourcesContent":["const tokens = {\n \"color\": {\n \"black\": \"#3f3d3c\",\n \"blackLighten10\": \"#575757\",\n \"blackLighten20\": \"#717171\",\n \"blackLighten30\": \"#8a8a8a\",\n \"blackLighten40\": \"#a4a4a4\",\n \"blackLighten50\": \"#bdbdbd\",\n \"blackLighten60\": \"#d7d7d7\",\n \"blackLighten70\": \"#f0f0f0\",\n \"blackLighten80\": \"#f7f7f7\",\n \"blackLighten90\": \"#fcfcfc\",\n \"blackDisabled\": \"#a4a4a4\",\n \"blackPure\": \"#000000\",\n \"blue\": \"#276cf5\",\n \"blueDarken20\": \"#004a94\",\n \"blueDarken10\": \"#0063c5\",\n \"blueLighten10\": \"#3396f9\",\n \"blueLighten20\": \"#66b0fa\",\n \"blueLighten30\": \"#99cbfc\",\n \"blueLighten40\": \"#cce5fd\",\n \"blueLighten50\": \"#e5f1fe\",\n \"creme\": \"#e6e3df\",\n \"cremeDarken30\": \"#a39889\",\n \"cremeDarken20\": \"#b9b1a6\",\n \"cremeDarken10\": \"#d0cac2\",\n \"cremeLighten5\": \"#f1f0ed\",\n \"cremeLighten10\": \"#fcfcfc\",\n \"diligent\": \"#2F3B4D\",\n \"diligentLighten10\": \"#37465B\",\n \"diligentLighten20\": \"#455772\",\n \"diligentLighten30\": \"#5D7599\",\n \"diligentLighten70\": \"#F4F6F8\",\n \"diligentDarken10\": \"#202935\",\n \"green\": \"#42996d\",\n \"greenDarken10\": \"#337554\",\n \"greenDarken20\": \"#23523a\",\n \"greenLighten10\": \"#5db187\",\n \"greenLighten20\": \"#80c1a0\",\n \"greenLighten30\": \"#a2d2ba\",\n \"greenLighten40\": \"#c4e3d3\",\n \"greenLighten50\": \"#e7f3ed\",\n \"offWhite\": \"#f0f0f0\",\n \"orange\": \"#de4d33\",\n \"orangeDarken10\": \"#bf371f\",\n \"orangeDarken20\": \"#932b18\",\n \"orangeDarken30\": \"#671e11\",\n \"orangeLighten10\": \"#e07764\",\n \"orangeLighten20\": \"#e99c8e\",\n \"orangeLighten30\": \"#f1c1b9\",\n \"orangeLighten40\": \"#fae7e3\",\n \"orangeDisabled\": \"#e99c8e\",\n \"orangeHighlight\": \"#e1624b\",\n \"purple\": \"#785cba\",\n \"purpleDarken10\": \"#5f449f\",\n \"purpleDarken20\": \"#4a347c\",\n \"purpleLighten10\": \"#9884c5\",\n \"purpleLighten20\": \"#b5a7d5\",\n \"purpleLighten30\": \"#d2c9e6\",\n \"purpleLighten40\": \"#efecf6\",\n \"purpleLighten50\": \"#fbfafd\",\n \"white\": \"#ffffff\",\n \"yellow\": \"#eaba51\",\n \"yellowDarken10\": \"#e5a823\",\n \"yellowDarken20\": \"#be8a17\",\n \"yellowDarken30\": \"#916911\",\n \"yellowDarken40\": \"#63480c\",\n \"yellowLighten10\": \"#eccb82\",\n \"yellowLighten20\": \"#f3ddae\",\n \"yellowLighten30\": \"#f9f0db\",\n \"gold\": \"#f0a117\",\n \"silver\": \"#cfcfcf\",\n \"eggplant\": \"#2e143d\",\n \"eggplantLighten10\": \"#4b2164\",\n \"eggplantLighten20\": \"#682e8b\",\n \"eggplantLighten30\": \"#853AB1\",\n \"chartColor01\": \"#cd3c44\",\n \"chartColor02\": \"#cb8133\",\n \"chartColor03\": \"#eaba51\",\n \"chartColor04\": \"#79a551\",\n \"chartColor05\": \"#299a7a\",\n \"chartColor06\": \"#8c6d68\",\n \"chartColor07\": \"#ec848f\",\n \"chartColor08\": \"#b9668f\",\n \"chartColor09\": \"#785cba\",\n \"chartColor10\": \"#2b82bf\",\n \"chartColor11\": \"#7ec0cc\",\n \"chartColor12\": \"#d1cbc2\"\n },\n \"space\": \"8px\",\n \"spaceSm\": \"4px\",\n \"spaceLg\": \"12px\",\n \"placeholder\": {\n \"color\": \"#717171\",\n \"fontStyle\": \"italic\"\n },\n \"highlight\": {\n \"active\": {\n \"noBorder\": {\n \"boxShadow\": \"0 0 0 2px #99cbfc\",\n \"insetBoxShadow\": \"inset 0 0 0 2px #99cbfc\",\n \"borderColor\": \"#276cf5\"\n },\n \"withBorder\": {\n \"boxShadow\": \"0 0 0 1px #276cf5, 0 0 0 3px #99cbfc\",\n \"insetBoxShadow\": \"inset 0 0 0 1px #276cf5, inset 0 0 0 3px #99cbfc\"\n },\n \"nonInteractive\": {\n \"outline\": \"2px dotted #8a8a8a\"\n }\n },\n \"text\": {\n \"green\": {\n \"background\": \"#e7f3ed\",\n \"font\": \"#23523a\"\n },\n \"orange\": {\n \"background\": \"#fae7e3\",\n \"font\": \"#932b18\"\n },\n \"yellow\": {\n \"background\": \"#f7f3ba\",\n \"font\": \"#63480c\"\n }\n }\n },\n \"textColor\": {\n \"default\": \"#3f3d3c\",\n \"subtle\": \"#717171\",\n \"link\": \"#0063c5\",\n \"linkHover\": \"#004a94\",\n \"icon\": \"#717171\"\n },\n \"fontFamily\": {\n \"default\": \"\\\"Lato\\\", \\\"Helvetica Neue\\\", Helvetica, Arial, sans-serif\",\n \"jp\": \"\\\"Lato\\\", \\\"Helvetica Neue\\\", Helvetica, Arial, sans-serif, \\\"Hiragino Kaku Gothic Pro\\\", \\\"ヒラギノ角ゴ Pro W3\\\", \\\"ＭＳ Ｐゴシック\\\", \\\"MS PGothic\\\"\",\n \"kr\": \"\\\"Lato\\\", \\\"Helvetica Neue\\\", Helvetica, Arial, sans-serif, \\\"Malgun Gothic\\\"\",\n \"zh\": \"\\\"Helvetica Neue\\\", Helvetica, Arial, sans-serif, 黑體-繁, \\\"Heiti TC\\\", 儷黑Pro, \\\"LiHei Pro\\\", PMingLiu, 宋体, SimSun\"\n },\n \"table\": {\n \"header\": {\n \"backgroundColor\": \"#f0f0f0\"\n },\n \"row\": {\n \"backgroundColor\": \"#ffffff\"\n },\n \"rowEven\": {\n \"backgroundColor\": \"#f7f7f7\"\n }\n },\n \"border\": {\n \"radius\": \"3px\",\n \"color\": \"#d7d7d7\",\n \"hoverColor\": \"#a4a4a4\",\n \"colorTransition\": \"border-color 0.2s\"\n },\n \"button\": {\n \"borderRadius\": \"4px\"\n },\n \"card\": {\n \"borderRadius\": \"6px\",\n \"shadow\": \"0 0 0 1px rgba(63,61,60,0.05),0 1px 3px 0 rgba(63,61,60,0.15)\"\n },\n \"overlay\": {\n \"animationDuration\": \"700\",\n \"backdrop\": {\n \"backgroundColor\": \"rgba(63,61,60,0.5)\"\n }\n },\n \"modal\": {\n \"backgroundColor\": \"#ffffff\",\n \"borderRadius\": \"6px\",\n \"shadow\": \"0 8px 12px -4px rgba(63,61,60,0.2),0 1px 3px 0 rgba(63,61,60,0.1)\",\n \"sizes\": {\n \"sm\": \"450px\",\n \"md\": \"675px\",\n \"lg\": \"900px\"\n },\n \"margin\": \"24px\",\n \"top\": \"100px\",\n \"footer\": {\n \"backgroundColor\": \"#f0f0f0\"\n }\n },\n \"checkbox\": {\n \"sizeSm\": \"16px\",\n \"sizeMd\": \"18px\",\n \"sizeLg\": \"24px\"\n },\n \"radio\": {\n \"sizeSm\": \"16px\",\n \"sizeMd\": \"20px\",\n \"sizeLg\": \"24px\"\n },\n \"icon\": {\n \"sizeSm\": \"20px\",\n \"sizeMd\": \"24px\",\n \"sizeLg\": \"40px\",\n \"sizeXlg\": \"48px\"\n },\n \"popover\": {\n \"borderRadius\": \"6px\",\n \"shadow\": \"0 2px 4px rgba(0,0,0,0.1)\"\n },\n \"counter\": {\n \"small\": \"17px\",\n \"medium\": \"19px\"\n },\n \"backgroundColor\": {\n \"level0\": \"#f7f7f7\"\n },\n \"fontSize\": {\n \"default\": \"16px\"\n },\n \"shadow\": \"0px 1px 5px rgba(0,0,0,0.07),0px 7px 17px rgba(0,0,0,0.1)\",\n \"diligent\": {\n \"actionPrimary\": \"#5D7599\",\n \"backgroundBase\": \"#F4F6F8\",\n \"brandPrimary\": \"#2F3B4D\"\n }\n};\nexport default tokens;"],"file":"tokens.js"}
1
+ {"version":3,"sources":["../src/tokens.js"],"names":["tokens"],"mappings":"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","sourcesContent":["const tokens = {\n \"color\": {\n \"black\": \"#3f3d3c\",\n \"blackLighten10\": \"#575757\",\n \"blackLighten20\": \"rgb(112.5,112.5,112.5)\",\n \"blackLighten30\": \"#8a8a8a\",\n \"blackLighten40\": \"rgb(163.5,163.5,163.5)\",\n \"blackLighten50\": \"#bdbdbd\",\n \"blackLighten60\": \"rgb(214.5,214.5,214.5)\",\n \"blackLighten70\": \"#f0f0f0\",\n \"blackLighten80\": \"#f7f7f7\",\n \"blackLighten90\": \"#fcfcfc\",\n \"blackDisabled\": \"rgb(163.5,163.5,163.5)\",\n \"blackPure\": \"#000\",\n \"blue\": \"#276cf5\",\n \"blueDarken20\": \"#004a94\",\n \"blueDarken10\": \"#0063c5\",\n \"blueLighten10\": \"#3396f9\",\n \"blueLighten20\": \"#66b0fa\",\n \"blueLighten30\": \"#99cbfc\",\n \"blueLighten40\": \"#cce5fd\",\n \"blueLighten50\": \"#e5f1fe\",\n \"creme\": \"#e6e3df\",\n \"cremeDarken30\": \"hsl(34.2857142857,12.2807017544%,58.8235294118%)\",\n \"cremeDarken20\": \"hsl(34.2857142857,12.2807017544%,68.8235294118%)\",\n \"cremeDarken10\": \"hsl(34.2857142857,12.2807017544%,78.8235294118%)\",\n \"cremeLighten5\": \"hsl(34.2857142857,12.2807017544%,93.8235294118%)\",\n \"cremeLighten10\": \"hsl(34.2857142857,12.2807017544%,98.8235294118%)\",\n \"diligent\": \"#2f3b4d\",\n \"diligentLighten10\": \"#37465b\",\n \"diligentLighten20\": \"#455772\",\n \"diligentLighten30\": \"#5d7599\",\n \"diligentLighten70\": \"#f4f6f8\",\n \"diligentDarken10\": \"#202935\",\n \"green\": \"#42996d\",\n \"greenDarken10\": \"rgb(50.6301369863,117.3698630137,83.6164383562)\",\n \"greenDarken20\": \"rgb(35.2602739726,81.7397260274,58.2328767123)\",\n \"greenLighten10\": \"rgb(93.3287671233,176.6712328767,134.5210203118)\",\n \"greenLighten20\": \"rgb(127.6839041096,193.3160958904,160.1228034955)\",\n \"greenLighten30\": \"rgb(162.0390410959,209.9609589041,185.7245866793)\",\n \"greenLighten40\": \"rgb(196.3941780822,226.6058219178,211.326369863)\",\n \"greenLighten50\": \"rgb(230.7493150685,243.2506849315,236.9281530468)\",\n \"offWhite\": \"#f0f0f0\",\n \"orange\": \"#de4d33\",\n \"orangeDarken10\": \"rgb(191.0886075949,55.2658227848,30.9113924051)\",\n \"orangeDarken20\": \"rgb(147.1898734177,42.5696202532,23.8101265823)\",\n \"orangeDarken30\": \"rgb(103.2911392405,29.8734177215,16.7088607595)\",\n \"orangeLighten10\": \"hsl(9.1228070175,67.1518987342%,63.5294117647%)\",\n \"orangeLighten20\": \"hsl(9.1228070175,67.1518987342%,73.5294117647%)\",\n \"orangeLighten30\": \"hsl(9.1228070175,67.1518987342%,83.5294117647%)\",\n \"orangeLighten40\": \"hsl(9.1228070175,67.1518987342%,93.5294117647%)\",\n \"orangeDisabled\": \"hsl(9.1228070175,67.1518987342%,73.5294117647%)\",\n \"orangeHighlight\": \"#e1624b\",\n \"purple\": \"#785cba\",\n \"purpleDarken10\": \"rgb(94.9094827586,67.5129310345,159.4870689655)\",\n \"purpleDarken20\": \"rgb(73.5862068966,52.3448275862,123.6551724138)\",\n \"purpleLighten10\": \"rgb(151.5059794571,132.3568965517,196.6431034483)\",\n \"purpleLighten20\": \"rgb(180.6672780631,166.9137931034,213.0862068966)\",\n \"purpleLighten30\": \"rgb(209.8285766691,201.4706896552,229.5293103448)\",\n \"purpleLighten40\": \"rgb(238.9898752751,236.0275862069,245.9724137931)\",\n \"purpleLighten50\": \"rgb(250.6543947175,249.8503448276,252.5496551724)\",\n \"white\": \"#fff\",\n \"yellow\": \"#eaba51\",\n \"yellowDarken10\": \"rgb(228.5076923077,167.9538461538,35.4923076923)\",\n \"yellowDarken20\": \"rgb(190.0615384615,137.6307692308,22.9384615385)\",\n \"yellowDarken30\": \"rgb(144.5538461538,104.6769230769,17.4461538462)\",\n \"yellowDarken40\": \"rgb(99.0461538462,71.7230769231,11.9538461538)\",\n \"yellowLighten10\": \"hsl(41.1764705882,73.4615384615%,71.7647058824%)\",\n \"yellowLighten20\": \"hsl(41.1764705882,73.4615384615%,81.7647058824%)\",\n \"yellowLighten30\": \"hsl(41.1764705882,73.4615384615%,91.7647058824%)\",\n \"gold\": \"#f0a117\",\n \"silver\": \"#cfcfcf\",\n \"eggplant\": \"#2e143d\",\n \"eggplantLighten10\": \"#4b2164\",\n \"eggplantLighten20\": \"#682e8b\",\n \"eggplantLighten30\": \"#853ab1\",\n \"chartColor01\": \"#cd3c44\",\n \"chartColor02\": \"#cb8133\",\n \"chartColor03\": \"#eaba51\",\n \"chartColor04\": \"#79a551\",\n \"chartColor05\": \"#299a7a\",\n \"chartColor06\": \"#8c6d68\",\n \"chartColor07\": \"#ec848f\",\n \"chartColor08\": \"#b9668f\",\n \"chartColor09\": \"#785cba\",\n \"chartColor10\": \"#2b82bf\",\n \"chartColor11\": \"#7ec0cc\",\n \"chartColor12\": \"#d1cbc2\"\n },\n \"space\": \"8px\",\n \"spaceSm\": \"4px\",\n \"spaceLg\": \"12px\",\n \"placeholder\": {\n \"color\": \"rgb(112.5,112.5,112.5)\",\n \"fontStyle\": \"italic\"\n },\n \"highlight\": {\n \"active\": {\n \"noBorder\": {\n \"boxShadow\": \"0 0 0 2px #99cbfc\",\n \"insetBoxShadow\": \"inset 0 0 0 2px #99cbfc\",\n \"borderColor\": \"#276cf5\"\n },\n \"withBorder\": {\n \"boxShadow\": \"0 0 0 1px #276cf5,0 0 0 3px #99cbfc\",\n \"insetBoxShadow\": \"inset 0 0 0 1px #276cf5,inset 0 0 0 3px #99cbfc\"\n },\n \"nonInteractive\": {\n \"outline\": \"2px dotted #8a8a8a\"\n }\n },\n \"text\": {\n \"green\": {\n \"background\": \"hsl(149.655172414,34.7260273972%,92.9411764706%)\",\n \"font\": \"rgb(35.2602739726,81.7397260274,58.2328767123)\"\n },\n \"orange\": {\n \"background\": \"hsl(9.1228070175,67.1518987342%,93.5294117647%)\",\n \"font\": \"rgb(147.1898734177,42.5696202532,23.8101265823)\"\n },\n \"yellow\": {\n \"background\": \"#f7f3ba\",\n \"font\": \"rgb(99.0461538462,71.7230769231,11.9538461538)\"\n }\n }\n },\n \"textColor\": {\n \"default\": \"#3f3d3c\",\n \"subtle\": \"rgb(112.5,112.5,112.5)\",\n \"link\": \"#0063c5\",\n \"linkHover\": \"#004a94\",\n \"icon\": \"rgb(112.5,112.5,112.5)\"\n },\n \"fontFamily\": {\n \"default\": \"\\\"Lato\\\",\\\"Helvetica Neue\\\",Helvetica,Arial,sans-serif\",\n \"jp\": \"\\\"Lato\\\",\\\"Helvetica Neue\\\",Helvetica,Arial,sans-serif,\\\"Hiragino Kaku Gothic Pro\\\",\\\"ヒラギノ角ゴ Pro W3\\\",\\\"ＭＳ Ｐゴシック\\\",\\\"MS PGothic\\\"\",\n \"kr\": \"\\\"Lato\\\",\\\"Helvetica Neue\\\",Helvetica,Arial,sans-serif,\\\"Malgun Gothic\\\"\",\n \"zh\": \"\\\"Helvetica Neue\\\",Helvetica,Arial,sans-serif,黑體-繁,\\\"Heiti TC\\\",儷黑Pro,\\\"LiHei Pro\\\",PMingLiu,宋体,SimSun\"\n },\n \"table\": {\n \"header\": {\n \"backgroundColor\": \"#f0f0f0\"\n },\n \"row\": {\n \"backgroundColor\": \"#fff\"\n },\n \"rowEven\": {\n \"backgroundColor\": \"#f7f7f7\"\n }\n },\n \"border\": {\n \"radius\": \"3px\",\n \"color\": \"rgb(214.5,214.5,214.5)\",\n \"hoverColor\": \"rgb(163.5,163.5,163.5)\",\n \"colorTransition\": \"border-color .2s\"\n },\n \"button\": {\n \"borderRadius\": \"4px\"\n },\n \"card\": {\n \"borderRadius\": \"6px\",\n \"shadow\": \"0 0 0 1px rgba(63,61,60,.05),0 1px 3px 0 rgba(63,61,60,.15)\"\n },\n \"overlay\": {\n \"animationDuration\": \"700\",\n \"backdrop\": {\n \"backgroundColor\": \"rgba(63,61,60,.5)\"\n }\n },\n \"modal\": {\n \"backgroundColor\": \"#fff\",\n \"borderRadius\": \"6px\",\n \"shadow\": \"0 8px 12px -4px rgba(63,61,60,.2),0 1px 3px 0 rgba(63,61,60,.1)\",\n \"sizes\": {\n \"sm\": \"450px\",\n \"md\": \"675px\",\n \"lg\": \"900px\"\n },\n \"margin\": \"24px\",\n \"top\": \"100px\",\n \"footer\": {\n \"backgroundColor\": \"#f0f0f0\"\n }\n },\n \"checkbox\": {\n \"sizeSm\": \"16px\",\n \"sizeMd\": \"18px\",\n \"sizeLg\": \"24px\"\n },\n \"radio\": {\n \"sizeSm\": \"16px\",\n \"sizeMd\": \"20px\",\n \"sizeLg\": \"24px\"\n },\n \"icon\": {\n \"sizeSm\": \"20px\",\n \"sizeMd\": \"24px\",\n \"sizeLg\": \"40px\",\n \"sizeXlg\": \"48px\"\n },\n \"popover\": {\n \"borderRadius\": \"6px\",\n \"shadow\": \"0 2px 4px rgba(0,0,0,.1)\"\n },\n \"counter\": {\n \"small\": \"17px\",\n \"medium\": \"19px\"\n },\n \"backgroundColor\": {\n \"level0\": \"#f7f7f7\"\n },\n \"fontSize\": {\n \"default\": \"16px\"\n },\n \"shadow\": \"0px 1px 5px rgba(0,0,0,.07),0px 7px 17px rgba(0,0,0,.1)\",\n \"diligent\": {\n \"actionPrimary\": \"#5d7599\",\n \"backgroundBase\": \"#f4f6f8\",\n \"brandPrimary\": \"#2f3b4d\"\n }\n};\nexport default tokens;"],"file":"tokens.js"}
package/lib/tokens.json CHANGED
@@ -2,16 +2,16 @@
2
2
  "color": {
3
3
  "black": "#3f3d3c",
4
4
  "blackLighten10": "#575757",
5
- "blackLighten20": "#717171",
5
+ "blackLighten20": "rgb(112.5,112.5,112.5)",
6
6
  "blackLighten30": "#8a8a8a",
7
- "blackLighten40": "#a4a4a4",
7
+ "blackLighten40": "rgb(163.5,163.5,163.5)",
8
8
  "blackLighten50": "#bdbdbd",
9
- "blackLighten60": "#d7d7d7",
9
+ "blackLighten60": "rgb(214.5,214.5,214.5)",
10
10
  "blackLighten70": "#f0f0f0",
11
11
  "blackLighten80": "#f7f7f7",
12
12
  "blackLighten90": "#fcfcfc",
13
- "blackDisabled": "#a4a4a4",
14
- "blackPure": "#000000",
13
+ "blackDisabled": "rgb(163.5,163.5,163.5)",
14
+ "blackPure": "#000",
15
15
  "blue": "#276cf5",
16
16
  "blueDarken20": "#004a94",
17
17
  "blueDarken10": "#0063c5",
@@ -21,59 +21,59 @@
21
21
  "blueLighten40": "#cce5fd",
22
22
  "blueLighten50": "#e5f1fe",
23
23
  "creme": "#e6e3df",
24
- "cremeDarken30": "#a39889",
25
- "cremeDarken20": "#b9b1a6",
26
- "cremeDarken10": "#d0cac2",
27
- "cremeLighten5": "#f1f0ed",
28
- "cremeLighten10": "#fcfcfc",
29
- "diligent": "#2F3B4D",
30
- "diligentLighten10": "#37465B",
24
+ "cremeDarken30": "hsl(34.2857142857,12.2807017544%,58.8235294118%)",
25
+ "cremeDarken20": "hsl(34.2857142857,12.2807017544%,68.8235294118%)",
26
+ "cremeDarken10": "hsl(34.2857142857,12.2807017544%,78.8235294118%)",
27
+ "cremeLighten5": "hsl(34.2857142857,12.2807017544%,93.8235294118%)",
28
+ "cremeLighten10": "hsl(34.2857142857,12.2807017544%,98.8235294118%)",
29
+ "diligent": "#2f3b4d",
30
+ "diligentLighten10": "#37465b",
31
31
  "diligentLighten20": "#455772",
32
- "diligentLighten30": "#5D7599",
33
- "diligentLighten70": "#F4F6F8",
32
+ "diligentLighten30": "#5d7599",
33
+ "diligentLighten70": "#f4f6f8",
34
34
  "diligentDarken10": "#202935",
35
35
  "green": "#42996d",
36
- "greenDarken10": "#337554",
37
- "greenDarken20": "#23523a",
38
- "greenLighten10": "#5db187",
39
- "greenLighten20": "#80c1a0",
40
- "greenLighten30": "#a2d2ba",
41
- "greenLighten40": "#c4e3d3",
42
- "greenLighten50": "#e7f3ed",
36
+ "greenDarken10": "rgb(50.6301369863,117.3698630137,83.6164383562)",
37
+ "greenDarken20": "rgb(35.2602739726,81.7397260274,58.2328767123)",
38
+ "greenLighten10": "rgb(93.3287671233,176.6712328767,134.5210203118)",
39
+ "greenLighten20": "rgb(127.6839041096,193.3160958904,160.1228034955)",
40
+ "greenLighten30": "rgb(162.0390410959,209.9609589041,185.7245866793)",
41
+ "greenLighten40": "rgb(196.3941780822,226.6058219178,211.326369863)",
42
+ "greenLighten50": "rgb(230.7493150685,243.2506849315,236.9281530468)",
43
43
  "offWhite": "#f0f0f0",
44
44
  "orange": "#de4d33",
45
- "orangeDarken10": "#bf371f",
46
- "orangeDarken20": "#932b18",
47
- "orangeDarken30": "#671e11",
48
- "orangeLighten10": "#e07764",
49
- "orangeLighten20": "#e99c8e",
50
- "orangeLighten30": "#f1c1b9",
51
- "orangeLighten40": "#fae7e3",
52
- "orangeDisabled": "#e99c8e",
45
+ "orangeDarken10": "rgb(191.0886075949,55.2658227848,30.9113924051)",
46
+ "orangeDarken20": "rgb(147.1898734177,42.5696202532,23.8101265823)",
47
+ "orangeDarken30": "rgb(103.2911392405,29.8734177215,16.7088607595)",
48
+ "orangeLighten10": "hsl(9.1228070175,67.1518987342%,63.5294117647%)",
49
+ "orangeLighten20": "hsl(9.1228070175,67.1518987342%,73.5294117647%)",
50
+ "orangeLighten30": "hsl(9.1228070175,67.1518987342%,83.5294117647%)",
51
+ "orangeLighten40": "hsl(9.1228070175,67.1518987342%,93.5294117647%)",
52
+ "orangeDisabled": "hsl(9.1228070175,67.1518987342%,73.5294117647%)",
53
53
  "orangeHighlight": "#e1624b",
54
54
  "purple": "#785cba",
55
- "purpleDarken10": "#5f449f",
56
- "purpleDarken20": "#4a347c",
57
- "purpleLighten10": "#9884c5",
58
- "purpleLighten20": "#b5a7d5",
59
- "purpleLighten30": "#d2c9e6",
60
- "purpleLighten40": "#efecf6",
61
- "purpleLighten50": "#fbfafd",
62
- "white": "#ffffff",
55
+ "purpleDarken10": "rgb(94.9094827586,67.5129310345,159.4870689655)",
56
+ "purpleDarken20": "rgb(73.5862068966,52.3448275862,123.6551724138)",
57
+ "purpleLighten10": "rgb(151.5059794571,132.3568965517,196.6431034483)",
58
+ "purpleLighten20": "rgb(180.6672780631,166.9137931034,213.0862068966)",
59
+ "purpleLighten30": "rgb(209.8285766691,201.4706896552,229.5293103448)",
60
+ "purpleLighten40": "rgb(238.9898752751,236.0275862069,245.9724137931)",
61
+ "purpleLighten50": "rgb(250.6543947175,249.8503448276,252.5496551724)",
62
+ "white": "#fff",
63
63
  "yellow": "#eaba51",
64
- "yellowDarken10": "#e5a823",
65
- "yellowDarken20": "#be8a17",
66
- "yellowDarken30": "#916911",
67
- "yellowDarken40": "#63480c",
68
- "yellowLighten10": "#eccb82",
69
- "yellowLighten20": "#f3ddae",
70
- "yellowLighten30": "#f9f0db",
64
+ "yellowDarken10": "rgb(228.5076923077,167.9538461538,35.4923076923)",
65
+ "yellowDarken20": "rgb(190.0615384615,137.6307692308,22.9384615385)",
66
+ "yellowDarken30": "rgb(144.5538461538,104.6769230769,17.4461538462)",
67
+ "yellowDarken40": "rgb(99.0461538462,71.7230769231,11.9538461538)",
68
+ "yellowLighten10": "hsl(41.1764705882,73.4615384615%,71.7647058824%)",
69
+ "yellowLighten20": "hsl(41.1764705882,73.4615384615%,81.7647058824%)",
70
+ "yellowLighten30": "hsl(41.1764705882,73.4615384615%,91.7647058824%)",
71
71
  "gold": "#f0a117",
72
72
  "silver": "#cfcfcf",
73
73
  "eggplant": "#2e143d",
74
74
  "eggplantLighten10": "#4b2164",
75
75
  "eggplantLighten20": "#682e8b",
76
- "eggplantLighten30": "#853AB1",
76
+ "eggplantLighten30": "#853ab1",
77
77
  "chartColor01": "#cd3c44",
78
78
  "chartColor02": "#cb8133",
79
79
  "chartColor03": "#eaba51",
@@ -91,7 +91,7 @@
91
91
  "spaceSm": "4px",
92
92
  "spaceLg": "12px",
93
93
  "placeholder": {
94
- "color": "#717171",
94
+ "color": "rgb(112.5,112.5,112.5)",
95
95
  "fontStyle": "italic"
96
96
  },
97
97
  "highlight": {
@@ -102,8 +102,8 @@
102
102
  "borderColor": "#276cf5"
103
103
  },
104
104
  "withBorder": {
105
- "boxShadow": "0 0 0 1px #276cf5, 0 0 0 3px #99cbfc",
106
- "insetBoxShadow": "inset 0 0 0 1px #276cf5, inset 0 0 0 3px #99cbfc"
105
+ "boxShadow": "0 0 0 1px #276cf5,0 0 0 3px #99cbfc",
106
+ "insetBoxShadow": "inset 0 0 0 1px #276cf5,inset 0 0 0 3px #99cbfc"
107
107
  },
108
108
  "nonInteractive": {
109
109
  "outline": "2px dotted #8a8a8a"
@@ -111,38 +111,38 @@
111
111
  },
112
112
  "text": {
113
113
  "green": {
114
- "background": "#e7f3ed",
115
- "font": "#23523a"
114
+ "background": "hsl(149.655172414,34.7260273972%,92.9411764706%)",
115
+ "font": "rgb(35.2602739726,81.7397260274,58.2328767123)"
116
116
  },
117
117
  "orange": {
118
- "background": "#fae7e3",
119
- "font": "#932b18"
118
+ "background": "hsl(9.1228070175,67.1518987342%,93.5294117647%)",
119
+ "font": "rgb(147.1898734177,42.5696202532,23.8101265823)"
120
120
  },
121
121
  "yellow": {
122
122
  "background": "#f7f3ba",
123
- "font": "#63480c"
123
+ "font": "rgb(99.0461538462,71.7230769231,11.9538461538)"
124
124
  }
125
125
  }
126
126
  },
127
127
  "textColor": {
128
128
  "default": "#3f3d3c",
129
- "subtle": "#717171",
129
+ "subtle": "rgb(112.5,112.5,112.5)",
130
130
  "link": "#0063c5",
131
131
  "linkHover": "#004a94",
132
- "icon": "#717171"
132
+ "icon": "rgb(112.5,112.5,112.5)"
133
133
  },
134
134
  "fontFamily": {
135
- "default": "\"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
136
- "jp": "\"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif, \"Hiragino Kaku Gothic Pro\", \"ヒラギノ角ゴ Pro W3\", \"ＭＳ Ｐゴシック\", \"MS PGothic\"",
137
- "kr": "\"Lato\", \"Helvetica Neue\", Helvetica, Arial, sans-serif, \"Malgun Gothic\"",
138
- "zh": "\"Helvetica Neue\", Helvetica, Arial, sans-serif, 黑體-繁, \"Heiti TC\", 儷黑Pro, \"LiHei Pro\", PMingLiu, 宋体, SimSun"
135
+ "default": "\"Lato\",\"Helvetica Neue\",Helvetica,Arial,sans-serif",
136
+ "jp": "\"Lato\",\"Helvetica Neue\",Helvetica,Arial,sans-serif,\"Hiragino Kaku Gothic Pro\",\"ヒラギノ角ゴ Pro W3\",\"ＭＳ Ｐゴシック\",\"MS PGothic\"",
137
+ "kr": "\"Lato\",\"Helvetica Neue\",Helvetica,Arial,sans-serif,\"Malgun Gothic\"",
138
+ "zh": "\"Helvetica Neue\",Helvetica,Arial,sans-serif,黑體-繁,\"Heiti TC\",儷黑Pro,\"LiHei Pro\",PMingLiu,宋体,SimSun"
139
139
  },
140
140
  "table": {
141
141
  "header": {
142
142
  "backgroundColor": "#f0f0f0"
143
143
  },
144
144
  "row": {
145
- "backgroundColor": "#ffffff"
145
+ "backgroundColor": "#fff"
146
146
  },
147
147
  "rowEven": {
148
148
  "backgroundColor": "#f7f7f7"
@@ -150,27 +150,27 @@
150
150
  },
151
151
  "border": {
152
152
  "radius": "3px",
153
- "color": "#d7d7d7",
154
- "hoverColor": "#a4a4a4",
155
- "colorTransition": "border-color 0.2s"
153
+ "color": "rgb(214.5,214.5,214.5)",
154
+ "hoverColor": "rgb(163.5,163.5,163.5)",
155
+ "colorTransition": "border-color .2s"
156
156
  },
157
157
  "button": {
158
158
  "borderRadius": "4px"
159
159
  },
160
160
  "card": {
161
161
  "borderRadius": "6px",
162
- "shadow": "0 0 0 1px rgba(63,61,60,0.05),0 1px 3px 0 rgba(63,61,60,0.15)"
162
+ "shadow": "0 0 0 1px rgba(63,61,60,.05),0 1px 3px 0 rgba(63,61,60,.15)"
163
163
  },
164
164
  "overlay": {
165
165
  "animationDuration": "700",
166
166
  "backdrop": {
167
- "backgroundColor": "rgba(63,61,60,0.5)"
167
+ "backgroundColor": "rgba(63,61,60,.5)"
168
168
  }
169
169
  },
170
170
  "modal": {
171
- "backgroundColor": "#ffffff",
171
+ "backgroundColor": "#fff",
172
172
  "borderRadius": "6px",
173
- "shadow": "0 8px 12px -4px rgba(63,61,60,0.2),0 1px 3px 0 rgba(63,61,60,0.1)",
173
+ "shadow": "0 8px 12px -4px rgba(63,61,60,.2),0 1px 3px 0 rgba(63,61,60,.1)",
174
174
  "sizes": {
175
175
  "sm": "450px",
176
176
  "md": "675px",
@@ -200,7 +200,7 @@
200
200
  },
201
201
  "popover": {
202
202
  "borderRadius": "6px",
203
- "shadow": "0 2px 4px rgba(0,0,0,0.1)"
203
+ "shadow": "0 2px 4px rgba(0,0,0,.1)"
204
204
  },
205
205
  "counter": {
206
206
  "small": "17px",
@@ -212,10 +212,10 @@
212
212
  "fontSize": {
213
213
  "default": "16px"
214
214
  },
215
- "shadow": "0px 1px 5px rgba(0,0,0,0.07),0px 7px 17px rgba(0,0,0,0.1)",
215
+ "shadow": "0px 1px 5px rgba(0,0,0,.07),0px 7px 17px rgba(0,0,0,.1)",
216
216
  "diligent": {
217
- "actionPrimary": "#5D7599",
218
- "backgroundBase": "#F4F6F8",
219
- "brandPrimary": "#2F3B4D"
217
+ "actionPrimary": "#5d7599",
218
+ "backgroundBase": "#f4f6f8",
219
+ "brandPrimary": "#2f3b4d"
220
220
  }
221
221
  }
package/lib/tokens.mdx CHANGED
@@ -12,16 +12,16 @@ import TokenSquare from "./TokenSquare"
12
12
  |:--|:--|:--|
13
13
  | $color--black | #3f3d3c | <TokenSquare color="#3f3d3c" /> |
14
14
  | $color--black-lighten-10 | #575757 | <TokenSquare color="#575757" /> |
15
- | $color--black-lighten-20 | #717171 | <TokenSquare color="#717171" /> |
15
+ | $color--black-lighten-20 | rgb(112.5,112.5,112.5) | |
16
16
  | $color--black-lighten-30 | #8a8a8a | <TokenSquare color="#8a8a8a" /> |
17
- | $color--black-lighten-40 | #a4a4a4 | <TokenSquare color="#a4a4a4" /> |
17
+ | $color--black-lighten-40 | rgb(163.5,163.5,163.5) | |
18
18
  | $color--black-lighten-50 | #bdbdbd | <TokenSquare color="#bdbdbd" /> |
19
- | $color--black-lighten-60 | #d7d7d7 | <TokenSquare color="#d7d7d7" /> |
19
+ | $color--black-lighten-60 | rgb(214.5,214.5,214.5) | |
20
20
  | $color--black-lighten-70 | #f0f0f0 | <TokenSquare color="#f0f0f0" /> |
21
21
  | $color--black-lighten-80 | #f7f7f7 | <TokenSquare color="#f7f7f7" /> |
22
22
  | $color--black-lighten-90 | #fcfcfc | <TokenSquare color="#fcfcfc" /> |
23
- | $color--black-disabled | #a4a4a4 | <TokenSquare color="#a4a4a4" /> |
24
- | $color--black-pure | #000000 | <TokenSquare color="#000000" /> |
23
+ | $color--black-disabled | rgb(163.5,163.5,163.5) | |
24
+ | $color--black-pure | #000 | <TokenSquare color="#000" /> |
25
25
  | $color--blue | #276cf5 | <TokenSquare color="#276cf5" /> |
26
26
  | $color--blue-darken-20 | #004a94 | <TokenSquare color="#004a94" /> |
27
27
  | $color--blue-darken-10 | #0063c5 | <TokenSquare color="#0063c5" /> |
@@ -31,59 +31,59 @@ import TokenSquare from "./TokenSquare"
31
31
  | $color--blue-lighten-40 | #cce5fd | <TokenSquare color="#cce5fd" /> |
32
32
  | $color--blue-lighten-50 | #e5f1fe | <TokenSquare color="#e5f1fe" /> |
33
33
  | $color--creme | #e6e3df | <TokenSquare color="#e6e3df" /> |
34
- | $color--creme-darken-30 | #a39889 | <TokenSquare color="#a39889" /> |
35
- | $color--creme-darken-20 | #b9b1a6 | <TokenSquare color="#b9b1a6" /> |
36
- | $color--creme-darken-10 | #d0cac2 | <TokenSquare color="#d0cac2" /> |
37
- | $color--creme-lighten-5 | #f1f0ed | <TokenSquare color="#f1f0ed" /> |
38
- | $color--creme-lighten-10 | #fcfcfc | <TokenSquare color="#fcfcfc" /> |
39
- | $color--diligent | #2F3B4D | <TokenSquare color="#2F3B4D" /> |
40
- | $color--diligent-lighten-10 | #37465B | <TokenSquare color="#37465B" /> |
34
+ | $color--creme-darken-30 | hsl(34.2857142857,12.2807017544%,58.8235294118%) | |
35
+ | $color--creme-darken-20 | hsl(34.2857142857,12.2807017544%,68.8235294118%) | |
36
+ | $color--creme-darken-10 | hsl(34.2857142857,12.2807017544%,78.8235294118%) | |
37
+ | $color--creme-lighten-5 | hsl(34.2857142857,12.2807017544%,93.8235294118%) | |
38
+ | $color--creme-lighten-10 | hsl(34.2857142857,12.2807017544%,98.8235294118%) | |
39
+ | $color--diligent | #2f3b4d | <TokenSquare color="#2f3b4d" /> |
40
+ | $color--diligent-lighten-10 | #37465b | <TokenSquare color="#37465b" /> |
41
41
  | $color--diligent-lighten-20 | #455772 | <TokenSquare color="#455772" /> |
42
- | $color--diligent-lighten-30 | #5D7599 | <TokenSquare color="#5D7599" /> |
43
- | $color--diligent-lighten-70 | #F4F6F8 | <TokenSquare color="#F4F6F8" /> |
42
+ | $color--diligent-lighten-30 | #5d7599 | <TokenSquare color="#5d7599" /> |
43
+ | $color--diligent-lighten-70 | #f4f6f8 | <TokenSquare color="#f4f6f8" /> |
44
44
  | $color--diligent-darken-10 | #202935 | <TokenSquare color="#202935" /> |
45
45
  | $color--green | #42996d | <TokenSquare color="#42996d" /> |
46
- | $color--green-darken-10 | #337554 | <TokenSquare color="#337554" /> |
47
- | $color--green-darken-20 | #23523a | <TokenSquare color="#23523a" /> |
48
- | $color--green-lighten-10 | #5db187 | <TokenSquare color="#5db187" /> |
49
- | $color--green-lighten-20 | #80c1a0 | <TokenSquare color="#80c1a0" /> |
50
- | $color--green-lighten-30 | #a2d2ba | <TokenSquare color="#a2d2ba" /> |
51
- | $color--green-lighten-40 | #c4e3d3 | <TokenSquare color="#c4e3d3" /> |
52
- | $color--green-lighten-50 | #e7f3ed | <TokenSquare color="#e7f3ed" /> |
46
+ | $color--green-darken-10 | rgb(50.6301369863,117.3698630137,83.6164383562) | |
47
+ | $color--green-darken-20 | rgb(35.2602739726,81.7397260274,58.2328767123) | |
48
+ | $color--green-lighten-10 | rgb(93.3287671233,176.6712328767,134.5210203118) | |
49
+ | $color--green-lighten-20 | rgb(127.6839041096,193.3160958904,160.1228034955) | |
50
+ | $color--green-lighten-30 | rgb(162.0390410959,209.9609589041,185.7245866793) | |
51
+ | $color--green-lighten-40 | rgb(196.3941780822,226.6058219178,211.326369863) | |
52
+ | $color--green-lighten-50 | rgb(230.7493150685,243.2506849315,236.9281530468) | |
53
53
  | $color--off-white | #f0f0f0 | <TokenSquare color="#f0f0f0" /> |
54
54
  | $color--orange | #de4d33 | <TokenSquare color="#de4d33" /> |
55
- | $color--orange-darken-10 | #bf371f | <TokenSquare color="#bf371f" /> |
56
- | $color--orange-darken-20 | #932b18 | <TokenSquare color="#932b18" /> |
57
- | $color--orange-darken-30 | #671e11 | <TokenSquare color="#671e11" /> |
58
- | $color--orange-lighten-10 | #e07764 | <TokenSquare color="#e07764" /> |
59
- | $color--orange-lighten-20 | #e99c8e | <TokenSquare color="#e99c8e" /> |
60
- | $color--orange-lighten-30 | #f1c1b9 | <TokenSquare color="#f1c1b9" /> |
61
- | $color--orange-lighten-40 | #fae7e3 | <TokenSquare color="#fae7e3" /> |
62
- | $color--orange-disabled | #e99c8e | <TokenSquare color="#e99c8e" /> |
55
+ | $color--orange-darken-10 | rgb(191.0886075949,55.2658227848,30.9113924051) | |
56
+ | $color--orange-darken-20 | rgb(147.1898734177,42.5696202532,23.8101265823) | |
57
+ | $color--orange-darken-30 | rgb(103.2911392405,29.8734177215,16.7088607595) | |
58
+ | $color--orange-lighten-10 | hsl(9.1228070175,67.1518987342%,63.5294117647%) | |
59
+ | $color--orange-lighten-20 | hsl(9.1228070175,67.1518987342%,73.5294117647%) | |
60
+ | $color--orange-lighten-30 | hsl(9.1228070175,67.1518987342%,83.5294117647%) | |
61
+ | $color--orange-lighten-40 | hsl(9.1228070175,67.1518987342%,93.5294117647%) | |
62
+ | $color--orange-disabled | hsl(9.1228070175,67.1518987342%,73.5294117647%) | |
63
63
  | $color--orange-highlight | #e1624b | <TokenSquare color="#e1624b" /> |
64
64
  | $color--purple | #785cba | <TokenSquare color="#785cba" /> |
65
- | $color--purple-darken-10 | #5f449f | <TokenSquare color="#5f449f" /> |
66
- | $color--purple-darken-20 | #4a347c | <TokenSquare color="#4a347c" /> |
67
- | $color--purple-lighten-10 | #9884c5 | <TokenSquare color="#9884c5" /> |
68
- | $color--purple-lighten-20 | #b5a7d5 | <TokenSquare color="#b5a7d5" /> |
69
- | $color--purple-lighten-30 | #d2c9e6 | <TokenSquare color="#d2c9e6" /> |
70
- | $color--purple-lighten-40 | #efecf6 | <TokenSquare color="#efecf6" /> |
71
- | $color--purple-lighten-50 | #fbfafd | <TokenSquare color="#fbfafd" /> |
72
- | $color--white | #ffffff | <TokenSquare color="#ffffff" /> |
65
+ | $color--purple-darken-10 | rgb(94.9094827586,67.5129310345,159.4870689655) | |
66
+ | $color--purple-darken-20 | rgb(73.5862068966,52.3448275862,123.6551724138) | |
67
+ | $color--purple-lighten-10 | rgb(151.5059794571,132.3568965517,196.6431034483) | |
68
+ | $color--purple-lighten-20 | rgb(180.6672780631,166.9137931034,213.0862068966) | |
69
+ | $color--purple-lighten-30 | rgb(209.8285766691,201.4706896552,229.5293103448) | |
70
+ | $color--purple-lighten-40 | rgb(238.9898752751,236.0275862069,245.9724137931) | |
71
+ | $color--purple-lighten-50 | rgb(250.6543947175,249.8503448276,252.5496551724) | |
72
+ | $color--white | #fff | <TokenSquare color="#fff" /> |
73
73
  | $color--yellow | #eaba51 | <TokenSquare color="#eaba51" /> |
74
- | $color--yellow-darken-10 | #e5a823 | <TokenSquare color="#e5a823" /> |
75
- | $color--yellow-darken-20 | #be8a17 | <TokenSquare color="#be8a17" /> |
76
- | $color--yellow-darken-30 | #916911 | <TokenSquare color="#916911" /> |
77
- | $color--yellow-darken-40 | #63480c | <TokenSquare color="#63480c" /> |
78
- | $color--yellow-lighten-10 | #eccb82 | <TokenSquare color="#eccb82" /> |
79
- | $color--yellow-lighten-20 | #f3ddae | <TokenSquare color="#f3ddae" /> |
80
- | $color--yellow-lighten-30 | #f9f0db | <TokenSquare color="#f9f0db" /> |
74
+ | $color--yellow-darken-10 | rgb(228.5076923077,167.9538461538,35.4923076923) | |
75
+ | $color--yellow-darken-20 | rgb(190.0615384615,137.6307692308,22.9384615385) | |
76
+ | $color--yellow-darken-30 | rgb(144.5538461538,104.6769230769,17.4461538462) | |
77
+ | $color--yellow-darken-40 | rgb(99.0461538462,71.7230769231,11.9538461538) | |
78
+ | $color--yellow-lighten-10 | hsl(41.1764705882,73.4615384615%,71.7647058824%) | |
79
+ | $color--yellow-lighten-20 | hsl(41.1764705882,73.4615384615%,81.7647058824%) | |
80
+ | $color--yellow-lighten-30 | hsl(41.1764705882,73.4615384615%,91.7647058824%) | |
81
81
  | $color--gold | #f0a117 | <TokenSquare color="#f0a117" /> |
82
82
  | $color--silver | #cfcfcf | <TokenSquare color="#cfcfcf" /> |
83
83
  | $color--eggplant | #2e143d | <TokenSquare color="#2e143d" /> |
84
84
  | $color--eggplant-lighten-10 | #4b2164 | <TokenSquare color="#4b2164" /> |
85
85
  | $color--eggplant-lighten-20 | #682e8b | <TokenSquare color="#682e8b" /> |
86
- | $color--eggplant-lighten-30 | #853AB1 | <TokenSquare color="#853AB1" /> |
86
+ | $color--eggplant-lighten-30 | #853ab1 | <TokenSquare color="#853ab1" /> |
87
87
  | $color--chart-color-01 | #cd3c44 | <TokenSquare color="#cd3c44" /> |
88
88
  | $color--chart-color-02 | #cb8133 | <TokenSquare color="#cb8133" /> |
89
89
  | $color--chart-color-03 | #eaba51 | <TokenSquare color="#eaba51" /> |
@@ -99,44 +99,44 @@ import TokenSquare from "./TokenSquare"
99
99
  | $space | 8px | |
100
100
  | $space-sm | 4px | |
101
101
  | $space-lg | 12px | |
102
- | $placeholder--color | #717171 | <TokenSquare color="#717171" /> |
102
+ | $placeholder--color | rgb(112.5,112.5,112.5) | |
103
103
  | $placeholder--font-style | italic | |
104
104
  | $highlight--active--no-border--box-shadow | 0 0 0 2px #99cbfc | |
105
105
  | $highlight--active--no-border--inset-box-shadow | inset 0 0 0 2px #99cbfc | |
106
106
  | $highlight--active--no-border--border-color | #276cf5 | <TokenSquare color="#276cf5" /> |
107
- | $highlight--active--with-border--box-shadow | 0 0 0 1px #276cf5, 0 0 0 3px #99cbfc | |
108
- | $highlight--active--with-border--inset-box-shadow | inset 0 0 0 1px #276cf5, inset 0 0 0 3px #99cbfc | |
107
+ | $highlight--active--with-border--box-shadow | 0 0 0 1px #276cf5,0 0 0 3px #99cbfc | |
108
+ | $highlight--active--with-border--inset-box-shadow | inset 0 0 0 1px #276cf5,inset 0 0 0 3px #99cbfc | |
109
109
  | $highlight--active--non-interactive--outline | 2px dotted #8a8a8a | |
110
- | $highlight--text--green--background | #e7f3ed | <TokenSquare color="#e7f3ed" /> |
111
- | $highlight--text--green--font | #23523a | <TokenSquare color="#23523a" /> |
112
- | $highlight--text--orange--background | #fae7e3 | <TokenSquare color="#fae7e3" /> |
113
- | $highlight--text--orange--font | #932b18 | <TokenSquare color="#932b18" /> |
110
+ | $highlight--text--green--background | hsl(149.655172414,34.7260273972%,92.9411764706%) | |
111
+ | $highlight--text--green--font | rgb(35.2602739726,81.7397260274,58.2328767123) | |
112
+ | $highlight--text--orange--background | hsl(9.1228070175,67.1518987342%,93.5294117647%) | |
113
+ | $highlight--text--orange--font | rgb(147.1898734177,42.5696202532,23.8101265823) | |
114
114
  | $highlight--text--yellow--background | #f7f3ba | <TokenSquare color="#f7f3ba" /> |
115
- | $highlight--text--yellow--font | #63480c | <TokenSquare color="#63480c" /> |
115
+ | $highlight--text--yellow--font | rgb(99.0461538462,71.7230769231,11.9538461538) | |
116
116
  | $text-color--default | #3f3d3c | <TokenSquare color="#3f3d3c" /> |
117
- | $text-color--subtle | #717171 | <TokenSquare color="#717171" /> |
117
+ | $text-color--subtle | rgb(112.5,112.5,112.5) | |
118
118
  | $text-color--link | #0063c5 | <TokenSquare color="#0063c5" /> |
119
119
  | $text-color--link-hover | #004a94 | <TokenSquare color="#004a94" /> |
120
- | $text-color--icon | #717171 | <TokenSquare color="#717171" /> |
121
- | $font-family--default | "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif | |
122
- | $font-family--jp | "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic" | |
123
- | $font-family--kr | "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Malgun Gothic" | |
124
- | $font-family--zh | "Helvetica Neue", Helvetica, Arial, sans-serif, 黑體-繁, "Heiti TC", 儷黑Pro, "LiHei Pro", PMingLiu, 宋体, SimSun | |
120
+ | $text-color--icon | rgb(112.5,112.5,112.5) | |
121
+ | $font-family--default | "Lato","Helvetica Neue",Helvetica,Arial,sans-serif | |
122
+ | $font-family--jp | "Lato","Helvetica Neue",Helvetica,Arial,sans-serif,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","MS PGothic" | |
123
+ | $font-family--kr | "Lato","Helvetica Neue",Helvetica,Arial,sans-serif,"Malgun Gothic" | |
124
+ | $font-family--zh | "Helvetica Neue",Helvetica,Arial,sans-serif,黑體-繁,"Heiti TC",儷黑Pro,"LiHei Pro",PMingLiu,宋体,SimSun | |
125
125
  | $table--header--background-color | #f0f0f0 | <TokenSquare color="#f0f0f0" /> |
126
- | $table--row--background-color | #ffffff | <TokenSquare color="#ffffff" /> |
126
+ | $table--row--background-color | #fff | <TokenSquare color="#fff" /> |
127
127
  | $table--row-even--background-color | #f7f7f7 | <TokenSquare color="#f7f7f7" /> |
128
128
  | $border--radius | 3px | |
129
- | $border--color | #d7d7d7 | <TokenSquare color="#d7d7d7" /> |
130
- | $border--hover-color | #a4a4a4 | <TokenSquare color="#a4a4a4" /> |
131
- | $border--color-transition | border-color 0.2s | |
129
+ | $border--color | rgb(214.5,214.5,214.5) | |
130
+ | $border--hover-color | rgb(163.5,163.5,163.5) | |
131
+ | $border--color-transition | border-color .2s | |
132
132
  | $button--border-radius | 4px | |
133
133
  | $card--border-radius | 6px | |
134
- | $card--shadow | 0 0 0 1px rgba(63,61,60,0.05),0 1px 3px 0 rgba(63,61,60,0.15) | |
134
+ | $card--shadow | 0 0 0 1px rgba(63,61,60,.05),0 1px 3px 0 rgba(63,61,60,.15) | |
135
135
  | $overlay--animation-duration | 700 | |
136
- | $overlay--backdrop--background-color | rgba(63,61,60,0.5) | |
137
- | $modal--background-color | #ffffff | <TokenSquare color="#ffffff" /> |
136
+ | $overlay--backdrop--background-color | rgba(63,61,60,.5) | |
137
+ | $modal--background-color | #fff | <TokenSquare color="#fff" /> |
138
138
  | $modal--border-radius | 6px | |
139
- | $modal--shadow | 0 8px 12px -4px rgba(63,61,60,0.2),0 1px 3px 0 rgba(63,61,60,0.1) | |
139
+ | $modal--shadow | 0 8px 12px -4px rgba(63,61,60,.2),0 1px 3px 0 rgba(63,61,60,.1) | |
140
140
  | $modal--sizes--sm | 450px | |
141
141
  | $modal--sizes--md | 675px | |
142
142
  | $modal--sizes--lg | 900px | |
@@ -154,14 +154,14 @@ import TokenSquare from "./TokenSquare"
154
154
  | $icon--size-lg | 40px | |
155
155
  | $icon--size-Xlg | 48px | |
156
156
  | $popover--border-radius | 6px | |
157
- | $popover--shadow | 0 2px 4px rgba(0,0,0,0.1) | |
157
+ | $popover--shadow | 0 2px 4px rgba(0,0,0,.1) | |
158
158
  | $counter--small | 17px | |
159
159
  | $counter--medium | 19px | |
160
160
  | $background-color--level0 | #f7f7f7 | <TokenSquare color="#f7f7f7" /> |
161
161
  | $font-size--default | 16px | |
162
- | $shadow | 0px 1px 5px rgba(0,0,0,0.07),0px 7px 17px rgba(0,0,0,0.1) | |
163
- | $diligent--action-primary | #5D7599 | <TokenSquare color="#5D7599" /> |
164
- | $diligent--background-base | #F4F6F8 | <TokenSquare color="#F4F6F8" /> |
165
- | $diligent--brand-primary | #2F3B4D | <TokenSquare color="#2F3B4D" /> |
162
+ | $shadow | 0px 1px 5px rgba(0,0,0,.07),0px 7px 17px rgba(0,0,0,.1) | |
163
+ | $diligent--action-primary | #5d7599 | <TokenSquare color="#5d7599" /> |
164
+ | $diligent--background-base | #f4f6f8 | <TokenSquare color="#f4f6f8" /> |
165
+ | $diligent--brand-primary | #2f3b4d | <TokenSquare color="#2f3b4d" /> |
166
166
 
167
167
  _Page auto-generated by paprika_
package/lib/tokens.scss CHANGED
@@ -2,16 +2,16 @@
2
2
  //color
3
3
  $color--black: #3f3d3c;
4
4
  $color--black-lighten-10: #575757;
5
- $color--black-lighten-20: #717171;
5
+ $color--black-lighten-20: rgb(112.5,112.5,112.5);
6
6
  $color--black-lighten-30: #8a8a8a;
7
- $color--black-lighten-40: #a4a4a4;
7
+ $color--black-lighten-40: rgb(163.5,163.5,163.5);
8
8
  $color--black-lighten-50: #bdbdbd;
9
- $color--black-lighten-60: #d7d7d7;
9
+ $color--black-lighten-60: rgb(214.5,214.5,214.5);
10
10
  $color--black-lighten-70: #f0f0f0;
11
11
  $color--black-lighten-80: #f7f7f7;
12
12
  $color--black-lighten-90: #fcfcfc;
13
- $color--black-disabled: #a4a4a4;
14
- $color--black-pure: #000000;
13
+ $color--black-disabled: rgb(163.5,163.5,163.5);
14
+ $color--black-pure: #000;
15
15
  $color--blue: #276cf5;
16
16
  $color--blue-darken-20: #004a94;
17
17
  $color--blue-darken-10: #0063c5;
@@ -21,59 +21,59 @@ $color--blue-lighten-30: #99cbfc;
21
21
  $color--blue-lighten-40: #cce5fd;
22
22
  $color--blue-lighten-50: #e5f1fe;
23
23
  $color--creme: #e6e3df;
24
- $color--creme-darken-30: #a39889;
25
- $color--creme-darken-20: #b9b1a6;
26
- $color--creme-darken-10: #d0cac2;
27
- $color--creme-lighten-5: #f1f0ed;
28
- $color--creme-lighten-10: #fcfcfc;
29
- $color--diligent: #2F3B4D;
30
- $color--diligent-lighten-10: #37465B;
24
+ $color--creme-darken-30: hsl(34.2857142857,12.2807017544%,58.8235294118%);
25
+ $color--creme-darken-20: hsl(34.2857142857,12.2807017544%,68.8235294118%);
26
+ $color--creme-darken-10: hsl(34.2857142857,12.2807017544%,78.8235294118%);
27
+ $color--creme-lighten-5: hsl(34.2857142857,12.2807017544%,93.8235294118%);
28
+ $color--creme-lighten-10: hsl(34.2857142857,12.2807017544%,98.8235294118%);
29
+ $color--diligent: #2f3b4d;
30
+ $color--diligent-lighten-10: #37465b;
31
31
  $color--diligent-lighten-20: #455772;
32
- $color--diligent-lighten-30: #5D7599;
33
- $color--diligent-lighten-70: #F4F6F8;
32
+ $color--diligent-lighten-30: #5d7599;
33
+ $color--diligent-lighten-70: #f4f6f8;
34
34
  $color--diligent-darken-10: #202935;
35
35
  $color--green: #42996d;
36
- $color--green-darken-10: #337554;
37
- $color--green-darken-20: #23523a;
38
- $color--green-lighten-10: #5db187;
39
- $color--green-lighten-20: #80c1a0;
40
- $color--green-lighten-30: #a2d2ba;
41
- $color--green-lighten-40: #c4e3d3;
42
- $color--green-lighten-50: #e7f3ed;
36
+ $color--green-darken-10: rgb(50.6301369863,117.3698630137,83.6164383562);
37
+ $color--green-darken-20: rgb(35.2602739726,81.7397260274,58.2328767123);
38
+ $color--green-lighten-10: rgb(93.3287671233,176.6712328767,134.5210203118);
39
+ $color--green-lighten-20: rgb(127.6839041096,193.3160958904,160.1228034955);
40
+ $color--green-lighten-30: rgb(162.0390410959,209.9609589041,185.7245866793);
41
+ $color--green-lighten-40: rgb(196.3941780822,226.6058219178,211.326369863);
42
+ $color--green-lighten-50: rgb(230.7493150685,243.2506849315,236.9281530468);
43
43
  $color--off-white: #f0f0f0;
44
44
  $color--orange: #de4d33;
45
- $color--orange-darken-10: #bf371f;
46
- $color--orange-darken-20: #932b18;
47
- $color--orange-darken-30: #671e11;
48
- $color--orange-lighten-10: #e07764;
49
- $color--orange-lighten-20: #e99c8e;
50
- $color--orange-lighten-30: #f1c1b9;
51
- $color--orange-lighten-40: #fae7e3;
52
- $color--orange-disabled: #e99c8e;
45
+ $color--orange-darken-10: rgb(191.0886075949,55.2658227848,30.9113924051);
46
+ $color--orange-darken-20: rgb(147.1898734177,42.5696202532,23.8101265823);
47
+ $color--orange-darken-30: rgb(103.2911392405,29.8734177215,16.7088607595);
48
+ $color--orange-lighten-10: hsl(9.1228070175,67.1518987342%,63.5294117647%);
49
+ $color--orange-lighten-20: hsl(9.1228070175,67.1518987342%,73.5294117647%);
50
+ $color--orange-lighten-30: hsl(9.1228070175,67.1518987342%,83.5294117647%);
51
+ $color--orange-lighten-40: hsl(9.1228070175,67.1518987342%,93.5294117647%);
52
+ $color--orange-disabled: hsl(9.1228070175,67.1518987342%,73.5294117647%);
53
53
  $color--orange-highlight: #e1624b;
54
54
  $color--purple: #785cba;
55
- $color--purple-darken-10: #5f449f;
56
- $color--purple-darken-20: #4a347c;
57
- $color--purple-lighten-10: #9884c5;
58
- $color--purple-lighten-20: #b5a7d5;
59
- $color--purple-lighten-30: #d2c9e6;
60
- $color--purple-lighten-40: #efecf6;
61
- $color--purple-lighten-50: #fbfafd;
62
- $color--white: #ffffff;
55
+ $color--purple-darken-10: rgb(94.9094827586,67.5129310345,159.4870689655);
56
+ $color--purple-darken-20: rgb(73.5862068966,52.3448275862,123.6551724138);
57
+ $color--purple-lighten-10: rgb(151.5059794571,132.3568965517,196.6431034483);
58
+ $color--purple-lighten-20: rgb(180.6672780631,166.9137931034,213.0862068966);
59
+ $color--purple-lighten-30: rgb(209.8285766691,201.4706896552,229.5293103448);
60
+ $color--purple-lighten-40: rgb(238.9898752751,236.0275862069,245.9724137931);
61
+ $color--purple-lighten-50: rgb(250.6543947175,249.8503448276,252.5496551724);
62
+ $color--white: #fff;
63
63
  $color--yellow: #eaba51;
64
- $color--yellow-darken-10: #e5a823;
65
- $color--yellow-darken-20: #be8a17;
66
- $color--yellow-darken-30: #916911;
67
- $color--yellow-darken-40: #63480c;
68
- $color--yellow-lighten-10: #eccb82;
69
- $color--yellow-lighten-20: #f3ddae;
70
- $color--yellow-lighten-30: #f9f0db;
64
+ $color--yellow-darken-10: rgb(228.5076923077,167.9538461538,35.4923076923);
65
+ $color--yellow-darken-20: rgb(190.0615384615,137.6307692308,22.9384615385);
66
+ $color--yellow-darken-30: rgb(144.5538461538,104.6769230769,17.4461538462);
67
+ $color--yellow-darken-40: rgb(99.0461538462,71.7230769231,11.9538461538);
68
+ $color--yellow-lighten-10: hsl(41.1764705882,73.4615384615%,71.7647058824%);
69
+ $color--yellow-lighten-20: hsl(41.1764705882,73.4615384615%,81.7647058824%);
70
+ $color--yellow-lighten-30: hsl(41.1764705882,73.4615384615%,91.7647058824%);
71
71
  $color--gold: #f0a117;
72
72
  $color--silver: #cfcfcf;
73
73
  $color--eggplant: #2e143d;
74
74
  $color--eggplant-lighten-10: #4b2164;
75
75
  $color--eggplant-lighten-20: #682e8b;
76
- $color--eggplant-lighten-30: #853AB1;
76
+ $color--eggplant-lighten-30: #853ab1;
77
77
  $color--chart-color-01: #cd3c44;
78
78
  $color--chart-color-02: #cb8133;
79
79
  $color--chart-color-03: #eaba51;
@@ -92,7 +92,7 @@ $space-sm: 4px;
92
92
  $space-lg: 12px;
93
93
 
94
94
  //placeholder
95
- $placeholder--color: #717171;
95
+ $placeholder--color: rgb(112.5,112.5,112.5);
96
96
  $placeholder--font-style: italic;
97
97
 
98
98
 
@@ -107,8 +107,8 @@ $highlight--active--no-border--border-color: #276cf5;
107
107
 
108
108
 
109
109
  //with-border
110
- $highlight--active--with-border--box-shadow: 0 0 0 1px #276cf5, 0 0 0 3px #99cbfc;
111
- $highlight--active--with-border--inset-box-shadow: inset 0 0 0 1px #276cf5, inset 0 0 0 3px #99cbfc;
110
+ $highlight--active--with-border--box-shadow: 0 0 0 1px #276cf5,0 0 0 3px #99cbfc;
111
+ $highlight--active--with-border--inset-box-shadow: inset 0 0 0 1px #276cf5,inset 0 0 0 3px #99cbfc;
112
112
 
113
113
 
114
114
  //non-interactive
@@ -119,35 +119,35 @@ $highlight--active--non-interactive--outline: 2px dotted #8a8a8a;
119
119
  //text
120
120
 
121
121
  //green
122
- $highlight--text--green--background: #e7f3ed;
123
- $highlight--text--green--font: #23523a;
122
+ $highlight--text--green--background: hsl(149.655172414,34.7260273972%,92.9411764706%);
123
+ $highlight--text--green--font: rgb(35.2602739726,81.7397260274,58.2328767123);
124
124
 
125
125
 
126
126
  //orange
127
- $highlight--text--orange--background: #fae7e3;
128
- $highlight--text--orange--font: #932b18;
127
+ $highlight--text--orange--background: hsl(9.1228070175,67.1518987342%,93.5294117647%);
128
+ $highlight--text--orange--font: rgb(147.1898734177,42.5696202532,23.8101265823);
129
129
 
130
130
 
131
131
  //yellow
132
132
  $highlight--text--yellow--background: #f7f3ba;
133
- $highlight--text--yellow--font: #63480c;
133
+ $highlight--text--yellow--font: rgb(99.0461538462,71.7230769231,11.9538461538);
134
134
 
135
135
 
136
136
 
137
137
 
138
138
  //text-color
139
139
  $text-color--default: #3f3d3c;
140
- $text-color--subtle: #717171;
140
+ $text-color--subtle: rgb(112.5,112.5,112.5);
141
141
  $text-color--link: #0063c5;
142
142
  $text-color--link-hover: #004a94;
143
- $text-color--icon: #717171;
143
+ $text-color--icon: rgb(112.5,112.5,112.5);
144
144
 
145
145
 
146
146
  //font-family
147
- $font-family--default: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
148
- $font-family--jp: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic";
149
- $font-family--kr: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif, "Malgun Gothic";
150
- $font-family--zh: "Helvetica Neue", Helvetica, Arial, sans-serif, 黑體-繁, "Heiti TC", 儷黑Pro, "LiHei Pro", PMingLiu, 宋体, SimSun;
147
+ $font-family--default: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
148
+ $font-family--jp: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","MS PGothic";
149
+ $font-family--kr: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif,"Malgun Gothic";
150
+ $font-family--zh: "Helvetica Neue",Helvetica,Arial,sans-serif,黑體-繁,"Heiti TC",儷黑Pro,"LiHei Pro",PMingLiu,宋体,SimSun;
151
151
 
152
152
 
153
153
  //table
@@ -157,7 +157,7 @@ $table--header--background-color: #f0f0f0;
157
157
 
158
158
 
159
159
  //row
160
- $table--row--background-color: #ffffff;
160
+ $table--row--background-color: #fff;
161
161
 
162
162
 
163
163
  //row-even
@@ -167,9 +167,9 @@ $table--row-even--background-color: #f7f7f7;
167
167
 
168
168
  //border
169
169
  $border--radius: 3px;
170
- $border--color: #d7d7d7;
171
- $border--hover-color: #a4a4a4;
172
- $border--color-transition: border-color 0.2s;
170
+ $border--color: rgb(214.5,214.5,214.5);
171
+ $border--hover-color: rgb(163.5,163.5,163.5);
172
+ $border--color-transition: border-color .2s;
173
173
 
174
174
 
175
175
  //button
@@ -178,21 +178,21 @@ $button--border-radius: 4px;
178
178
 
179
179
  //card
180
180
  $card--border-radius: 6px;
181
- $card--shadow: 0 0 0 1px rgba(63,61,60,0.05),0 1px 3px 0 rgba(63,61,60,0.15);
181
+ $card--shadow: 0 0 0 1px rgba(63,61,60,.05),0 1px 3px 0 rgba(63,61,60,.15);
182
182
 
183
183
 
184
184
  //overlay
185
185
  $overlay--animation-duration: 700;
186
186
 
187
187
  //backdrop
188
- $overlay--backdrop--background-color: rgba(63,61,60,0.5);
188
+ $overlay--backdrop--background-color: rgba(63,61,60,.5);
189
189
 
190
190
 
191
191
 
192
192
  //modal
193
- $modal--background-color: #ffffff;
193
+ $modal--background-color: #fff;
194
194
  $modal--border-radius: 6px;
195
- $modal--shadow: 0 8px 12px -4px rgba(63,61,60,0.2),0 1px 3px 0 rgba(63,61,60,0.1);
195
+ $modal--shadow: 0 8px 12px -4px rgba(63,61,60,.2),0 1px 3px 0 rgba(63,61,60,.1);
196
196
 
197
197
  //sizes
198
198
  $modal--sizes--sm: 450px;
@@ -228,7 +228,7 @@ $icon--size-Xlg: 48px;
228
228
 
229
229
  //popover
230
230
  $popover--border-radius: 6px;
231
- $popover--shadow: 0 2px 4px rgba(0,0,0,0.1);
231
+ $popover--shadow: 0 2px 4px rgba(0,0,0,.1);
232
232
 
233
233
 
234
234
  //counter
@@ -243,10 +243,10 @@ $background-color--level0: #f7f7f7;
243
243
  //font-size
244
244
  $font-size--default: 16px;
245
245
 
246
- $shadow: 0px 1px 5px rgba(0,0,0,0.07),0px 7px 17px rgba(0,0,0,0.1);
246
+ $shadow: 0px 1px 5px rgba(0,0,0,.07),0px 7px 17px rgba(0,0,0,.1);
247
247
 
248
248
  //diligent
249
- $diligent--action-primary: #5D7599;
250
- $diligent--background-base: #F4F6F8;
251
- $diligent--brand-primary: #2F3B4D;
249
+ $diligent--action-primary: #5d7599;
250
+ $diligent--background-base: #f4f6f8;
251
+ $diligent--brand-primary: #2f3b4d;
252
252
 
package/lib/tokens.yaml CHANGED
@@ -1,12 +1,12 @@
1
1
  color:
2
2
  black: '#3f3d3c'
3
- black-lighten-10: desaturate(lighten($color--black, 10), 5)
4
- black-lighten-20: desaturate(lighten($color--black, 20), 5)
5
- black-lighten-30: desaturate(lighten($color--black, 30), 5)
6
- black-lighten-40: desaturate(lighten($color--black, 40), 5)
7
- black-lighten-50: desaturate(lighten($color--black, 50), 5)
8
- black-lighten-60: desaturate(lighten($color--black, 60), 5)
9
- black-lighten-70: desaturate(lighten($color--black, 70), 5)
3
+ black-lighten-10: "color.adjust($color--black, $lightness: 10%, $saturation: -5%, $space: hsl)"
4
+ black-lighten-20: "color.adjust($color--black, $lightness: 20%, $saturation: -5%, $space: hsl)"
5
+ black-lighten-30: "color.adjust($color--black, $lightness: 30%, $saturation: -5%, $space: hsl)"
6
+ black-lighten-40: "color.adjust($color--black, $lightness: 40%, $saturation: -5%, $space: hsl)"
7
+ black-lighten-50: "color.adjust($color--black, $lightness: 50%, $saturation: -5%, $space: hsl)"
8
+ black-lighten-60: "color.adjust($color--black, $lightness: 60%, $saturation: -5%, $space: hsl)"
9
+ black-lighten-70: "color.adjust($color--black, $lightness: 70%, $saturation: -5%, $space: hsl)"
10
10
  black-lighten-80: '#f7f7f7'
11
11
  black-lighten-90: '#fcfcfc'
12
12
  black-disabled: $color--black-lighten-40
@@ -22,11 +22,11 @@ color:
22
22
  blue-lighten-50: '#e5f1fe'
23
23
  #
24
24
  creme: '#e6e3df'
25
- creme-darken-30: darken($color--creme, 30)
26
- creme-darken-20: darken($color--creme, 20)
27
- creme-darken-10: darken($color--creme, 10)
28
- creme-lighten-5: lighten($color--creme, 5)
29
- creme-lighten-10: lighten($color--creme, 10)
25
+ creme-darken-30: "color.adjust($color--creme, $lightness: -30%, $space: hsl)"
26
+ creme-darken-20: "color.adjust($color--creme, $lightness: -20%, $space: hsl)"
27
+ creme-darken-10: "color.adjust($color--creme, $lightness: -10%, $space: hsl)"
28
+ creme-lighten-5: "color.adjust($color--creme, $lightness: 5%, $space: hsl)"
29
+ creme-lighten-10: "color.adjust($color--creme, $lightness: 10%, $space: hsl)"
30
30
  #
31
31
  diligent: '#2F3B4D'
32
32
  diligent-lighten-10: '#37465B'
@@ -36,46 +36,46 @@ color:
36
36
  diligent-darken-10: '#202935'
37
37
  #
38
38
  green: '#42996d'
39
- green-darken-10: darken($color--green, 10)
40
- green-darken-20: darken($color--green, 20)
41
- green-lighten-10: desaturate(lighten($color--green, 10), 5)
42
- green-lighten-20: desaturate(lighten($color--green, 20), 5)
43
- green-lighten-30: desaturate(lighten($color--green, 30), 5)
44
- green-lighten-40: desaturate(lighten($color--green, 40), 5)
45
- green-lighten-50: desaturate(lighten($color--green, 50), 5)
39
+ green-darken-10: "color.adjust($color--green, $lightness: -10%, $space: hsl)"
40
+ green-darken-20: "color.adjust($color--green, $lightness: -20%, $space: hsl)"
41
+ green-lighten-10: "color.adjust($color--green, $lightness: 10%, $saturation: -5%, $space: hsl)"
42
+ green-lighten-20: "color.adjust($color--green, $lightness: 20%, $saturation: -5%, $space: hsl)"
43
+ green-lighten-30: "color.adjust($color--green, $lightness: 30%, $saturation: -5%, $space: hsl)"
44
+ green-lighten-40: "color.adjust($color--green, $lightness: 40%, $saturation: -5%, $space: hsl)"
45
+ green-lighten-50: "color.adjust($color--green, $lightness: 50%, $saturation: -5%, $space: hsl)"
46
46
  #
47
47
  off-white: '#f0f0f0'
48
48
  #
49
49
  orange: '#de4d33'
50
- orange-darken-10: darken($color--orange, 10)
51
- orange-darken-20: darken($color--orange, 20)
52
- orange-darken-30: darken($color--orange, 30)
53
- orange-lighten-10: desaturate(lighten($color--orange, 10), 5)
54
- orange-lighten-20: desaturate(lighten($color--orange, 20), 5)
55
- orange-lighten-30: desaturate(lighten($color--orange, 30), 5)
56
- orange-lighten-40: desaturate(lighten($color--orange, 40), 5)
50
+ orange-darken-10: "color.adjust($color--orange, $lightness: -10%, $space: hsl)"
51
+ orange-darken-20: "color.adjust($color--orange, $lightness: -20%, $space: hsl)"
52
+ orange-darken-30: "color.adjust($color--orange, $lightness: -30%, $space: hsl)"
53
+ orange-lighten-10: "color.adjust($color--orange, $lightness: 10%, $saturation: -5%, $space: hsl)"
54
+ orange-lighten-20: "color.adjust($color--orange, $lightness: 20%, $saturation: -5%, $space: hsl)"
55
+ orange-lighten-30: "color.adjust($color--orange, $lightness: 30%, $saturation: -5%, $space: hsl)"
56
+ orange-lighten-40: "color.adjust($color--orange, $lightness: 40%, $saturation: -5%, $space: hsl)"
57
57
  orange-disabled: $color--orange-lighten-20
58
58
  orange-highlight: '#e1624b'
59
59
  #
60
60
  purple: '#785cba'
61
- purple-darken-10: darken($color--purple, 10)
62
- purple-darken-20: darken($color--purple, 20)
63
- purple-lighten-10: desaturate(lighten($color--purple, 10), 5)
64
- purple-lighten-20: desaturate(lighten($color--purple, 20), 5)
65
- purple-lighten-30: desaturate(lighten($color--purple, 30), 5)
66
- purple-lighten-40: desaturate(lighten($color--purple, 40), 5)
67
- purple-lighten-50: desaturate(lighten($color--purple, 44), 5)
61
+ purple-darken-10: "color.adjust($color--purple, $lightness: -10%, $space: hsl)"
62
+ purple-darken-20: "color.adjust($color--purple, $lightness: -20%, $space: hsl)"
63
+ purple-lighten-10: "color.adjust($color--purple, $lightness: 10%, $saturation: -5%, $space: hsl)"
64
+ purple-lighten-20: "color.adjust($color--purple, $lightness: 20%, $saturation: -5%, $space: hsl)"
65
+ purple-lighten-30: "color.adjust($color--purple, $lightness: 30%, $saturation: -5%, $space: hsl)"
66
+ purple-lighten-40: "color.adjust($color--purple, $lightness: 40%, $saturation: -5%, $space: hsl)"
67
+ purple-lighten-50: "color.adjust($color--purple, $lightness: 44%, $saturation: -5%, $space: hsl)"
68
68
  #
69
69
  white: '#ffffff'
70
70
  #
71
71
  yellow: '#eaba51'
72
- yellow-darken-10: darken($color--yellow, 10)
73
- yellow-darken-20: darken($color--yellow, 20)
74
- yellow-darken-30: darken($color--yellow, 30)
75
- yellow-darken-40: darken($color--yellow, 40)
76
- yellow-lighten-10: desaturate(lighten($color--yellow, 10), 5)
77
- yellow-lighten-20: desaturate(lighten($color--yellow, 20), 5)
78
- yellow-lighten-30: desaturate(lighten($color--yellow, 30), 5)
72
+ yellow-darken-10: "color.adjust($color--yellow, $lightness: -10%, $space: hsl)"
73
+ yellow-darken-20: "color.adjust($color--yellow, $lightness: -20%, $space: hsl)"
74
+ yellow-darken-30: "color.adjust($color--yellow, $lightness: -30%, $space: hsl)"
75
+ yellow-darken-40: "color.adjust($color--yellow, $lightness: -40%, $space: hsl)"
76
+ yellow-lighten-10: "color.adjust($color--yellow, $lightness: 10%, $saturation: -5%, $space: hsl)"
77
+ yellow-lighten-20: "color.adjust($color--yellow, $lightness: 20%, $saturation: -5%, $space: hsl)"
78
+ yellow-lighten-30: "color.adjust($color--yellow, $lightness: 30%, $saturation: -5%, $space: hsl)"
79
79
  #
80
80
  gold: '#f0a117'
81
81
  #
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paprika/tokens",
3
- "version": "3.0.0",
3
+ "version": "3.1.0",
4
4
  "description": "Design tokens generated as scss + js",
5
5
  "author": "@paprika",
6
6
  "main": "lib/index.js",
@@ -23,7 +23,7 @@
23
23
  "prop-types": "^15.7.2"
24
24
  },
25
25
  "devDependencies": {
26
- "node-sass": "^8.0.0",
26
+ "sass": "^1.86.0",
27
27
  "yamljs": "^0.3.0"
28
28
  },
29
29
  "peerDependencies": {