@auth0/quantum-product 1.5.13 → 1.5.15
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.
- package/card/card.js +1 -1
- package/esm/card/card.js +1 -1
- package/esm/foundations/token-tables.js +179 -0
- package/foundations/token-tables.d.ts +11 -0
- package/foundations/token-tables.js +211 -0
- package/package.json +1 -1
package/card/card.js
CHANGED
|
@@ -85,7 +85,7 @@ exports.Root = (0, styled_1.styled)(Card_1.default, {
|
|
|
85
85
|
},
|
|
86
86
|
};
|
|
87
87
|
return __assign(__assign(__assign(__assign(__assign({}, (ownerState.button && __assign({
|
|
88
|
-
borderColor: theme.tokens.
|
|
88
|
+
borderColor: theme.tokens.color_border_default,
|
|
89
89
|
cursor: 'pointer',
|
|
90
90
|
transition: theme.transitions.create(['box-shadow', 'border-color'], {
|
|
91
91
|
duration: theme.transitions.duration.shortest,
|
package/esm/card/card.js
CHANGED
|
@@ -56,7 +56,7 @@ export var Root = styled(MuiCard, {
|
|
|
56
56
|
},
|
|
57
57
|
};
|
|
58
58
|
return __assign(__assign(__assign(__assign(__assign({}, (ownerState.button && __assign({
|
|
59
|
-
borderColor: theme.tokens.
|
|
59
|
+
borderColor: theme.tokens.color_border_default,
|
|
60
60
|
cursor: 'pointer',
|
|
61
61
|
transition: theme.transitions.create(['box-shadow', 'border-color'], {
|
|
62
62
|
duration: theme.transitions.duration.shortest,
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
+
if (!m) return o;
|
|
4
|
+
var i = m.call(o), r, ar = [], e;
|
|
5
|
+
try {
|
|
6
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
+
}
|
|
8
|
+
catch (error) { e = { error: error }; }
|
|
9
|
+
finally {
|
|
10
|
+
try {
|
|
11
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
+
}
|
|
13
|
+
finally { if (e) throw e.error; }
|
|
14
|
+
}
|
|
15
|
+
return ar;
|
|
16
|
+
};
|
|
17
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
18
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
19
|
+
if (ar || !(i in from)) {
|
|
20
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
21
|
+
ar[i] = from[i];
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
25
|
+
};
|
|
26
|
+
import { Avatar, AvatarBlock, Code, DataTable, TitleBlock } from '@auth0/quantum-product';
|
|
27
|
+
import * as React from 'react';
|
|
28
|
+
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
|
29
|
+
var tokensJSON = require('../../../quantum-tokens/old/json/tokens.json');
|
|
30
|
+
function transformJsonToken(jsonToken) {
|
|
31
|
+
return {
|
|
32
|
+
id: jsonToken.path.join('_'),
|
|
33
|
+
cssVariable: "--qds-".concat(jsonToken.path.join('-')),
|
|
34
|
+
value: jsonToken.value,
|
|
35
|
+
jsonPath: jsonToken.path.join('.'),
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
var transformJsonColorShadeToken = function (shade) {
|
|
39
|
+
return Object.values(shade).map(function (color) { return transformJsonToken(color); });
|
|
40
|
+
};
|
|
41
|
+
var colorDataTableColumns = [
|
|
42
|
+
{
|
|
43
|
+
field: 'id',
|
|
44
|
+
title: 'Token',
|
|
45
|
+
render: function (_a) {
|
|
46
|
+
var item = _a.item;
|
|
47
|
+
return (React.createElement(AvatarBlock, { avatar: React.createElement(Avatar, { showBorder: true, sx: { bgcolor: item.value } },
|
|
48
|
+
React.createElement("span", null)), title: React.createElement(Code, null, item.id), description: item.value, descriptionTypographyProps: { variant: 'code2' } }));
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
{ field: 'cssVariable', title: 'CSS Token', render: function (_a) {
|
|
52
|
+
var item = _a.item;
|
|
53
|
+
return React.createElement(Code, null, item.cssVariable);
|
|
54
|
+
} },
|
|
55
|
+
{ field: 'jsonPath', title: 'JSON Path', render: function (_a) {
|
|
56
|
+
var item = _a.item;
|
|
57
|
+
return React.createElement(Code, null, item.jsonPath);
|
|
58
|
+
} },
|
|
59
|
+
];
|
|
60
|
+
var colorEntries = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonColorShadeToken(tokensJSON.color.purple)), false), __read(transformJsonColorShadeToken(tokensJSON.color.neutral)), false), __read(transformJsonColorShadeToken(tokensJSON.color.blue)), false), __read(transformJsonColorShadeToken(tokensJSON.color.green)), false), __read(transformJsonColorShadeToken(tokensJSON.color.magenta)), false), __read(transformJsonColorShadeToken(tokensJSON.color.red)), false), __read(transformJsonColorShadeToken(tokensJSON.color.yellow)), false), __read(transformJsonColorShadeToken(tokensJSON.color.common)), false), __read(transformJsonColorShadeToken(tokensJSON.color.text)), false);
|
|
61
|
+
export var ColorTokens = function () {
|
|
62
|
+
return React.createElement(DataTable, { items: colorEntries, columns: colorDataTableColumns });
|
|
63
|
+
};
|
|
64
|
+
export var ThemeTokens = function (_a) {
|
|
65
|
+
var _b = _a.mode, mode = _b === void 0 ? 'light' : _b;
|
|
66
|
+
return (React.createElement(DataTable, { items: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.text)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.background)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.border)), false), [
|
|
67
|
+
transformJsonToken(tokensJSON.theme[mode].color.divider)
|
|
68
|
+
], false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.link)), false), columns: colorDataTableColumns }));
|
|
69
|
+
};
|
|
70
|
+
export var FontFamilyTokens = function () {
|
|
71
|
+
return (React.createElement(DataTable, { items: [
|
|
72
|
+
transformJsonToken(tokensJSON.typography.font_family),
|
|
73
|
+
transformJsonToken(tokensJSON.typography.font_family_heading),
|
|
74
|
+
transformJsonToken(tokensJSON.typography.font_family_monospace),
|
|
75
|
+
], columns: [
|
|
76
|
+
{
|
|
77
|
+
field: 'id',
|
|
78
|
+
title: 'Token',
|
|
79
|
+
render: function (_a) {
|
|
80
|
+
var item = _a.item;
|
|
81
|
+
return (React.createElement(TitleBlock, { title: React.createElement(Code, null, item.id), description: item.value.join(', '), descriptionTypographyProps: { variant: 'code2' } }));
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
{ field: 'cssVariable', title: 'CSS Token', render: function (_a) {
|
|
85
|
+
var item = _a.item;
|
|
86
|
+
return React.createElement(Code, { noWrap: true }, item.cssVariable);
|
|
87
|
+
} },
|
|
88
|
+
{ field: 'jsonPath', title: 'JSON Path', render: function (_a) {
|
|
89
|
+
var item = _a.item;
|
|
90
|
+
return React.createElement(Code, { noWrap: true }, item.jsonPath);
|
|
91
|
+
} },
|
|
92
|
+
] }));
|
|
93
|
+
};
|
|
94
|
+
var transformJsonTextVariantTokenGroup = function (shade) {
|
|
95
|
+
return Object.values(shade).map(function (variant) { return transformJsonToken(variant); });
|
|
96
|
+
};
|
|
97
|
+
export var TypographyVariantsTokens = function () {
|
|
98
|
+
return (React.createElement(DataTable, { items: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.headings)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.subtitles)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.body)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.forms)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.caption)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.code)), false), columns: [
|
|
99
|
+
{
|
|
100
|
+
field: 'id',
|
|
101
|
+
title: 'Token',
|
|
102
|
+
render: function (_a) {
|
|
103
|
+
var item = _a.item;
|
|
104
|
+
return React.createElement(Code, null, item.id);
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
title: 'Value',
|
|
109
|
+
render: function (_a) {
|
|
110
|
+
var item = _a.item;
|
|
111
|
+
return React.createElement("pre", null, JSON.stringify(item.value, null, 2));
|
|
112
|
+
},
|
|
113
|
+
},
|
|
114
|
+
{ field: 'jsonPath', title: 'JSON Path', render: function (_a) {
|
|
115
|
+
var item = _a.item;
|
|
116
|
+
return React.createElement(Code, { noWrap: true }, item.jsonPath);
|
|
117
|
+
} },
|
|
118
|
+
] }));
|
|
119
|
+
};
|
|
120
|
+
var transformTypographySubGroup = function (keyPrefix) {
|
|
121
|
+
return Object.keys(tokensJSON.typography)
|
|
122
|
+
.filter(function (key) { return key.startsWith(keyPrefix); })
|
|
123
|
+
.map(function (key) { return transformJsonToken(tokensJSON.typography[key]); });
|
|
124
|
+
};
|
|
125
|
+
export var FontSizeTokens = function () {
|
|
126
|
+
return (React.createElement(DataTable, { items: transformTypographySubGroup('font_size'), columns: [
|
|
127
|
+
{
|
|
128
|
+
field: 'id',
|
|
129
|
+
title: 'Token',
|
|
130
|
+
render: function (_a) {
|
|
131
|
+
var item = _a.item;
|
|
132
|
+
return React.createElement(Code, null, item.id);
|
|
133
|
+
},
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
title: 'Value',
|
|
137
|
+
render: function (_a) {
|
|
138
|
+
var item = _a.item;
|
|
139
|
+
return React.createElement(Code, null, item.value);
|
|
140
|
+
},
|
|
141
|
+
},
|
|
142
|
+
{ field: 'cssVariable', title: 'CSS Token', render: function (_a) {
|
|
143
|
+
var item = _a.item;
|
|
144
|
+
return React.createElement(Code, { noWrap: true }, item.cssVariable);
|
|
145
|
+
} },
|
|
146
|
+
{ field: 'jsonPath', title: 'JSON Path', render: function (_a) {
|
|
147
|
+
var item = _a.item;
|
|
148
|
+
return React.createElement(Code, { noWrap: true }, item.jsonPath);
|
|
149
|
+
} },
|
|
150
|
+
] }));
|
|
151
|
+
};
|
|
152
|
+
export var SimpleFontValueTokens = function (_a) {
|
|
153
|
+
var prefix = _a.prefix;
|
|
154
|
+
return (React.createElement(DataTable, { items: transformTypographySubGroup(prefix), columns: [
|
|
155
|
+
{
|
|
156
|
+
field: 'id',
|
|
157
|
+
title: 'Token',
|
|
158
|
+
render: function (_a) {
|
|
159
|
+
var item = _a.item;
|
|
160
|
+
return React.createElement(Code, null, item.id);
|
|
161
|
+
},
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
title: 'Value',
|
|
165
|
+
render: function (_a) {
|
|
166
|
+
var item = _a.item;
|
|
167
|
+
return React.createElement(Code, null, item.value);
|
|
168
|
+
},
|
|
169
|
+
},
|
|
170
|
+
{ field: 'cssVariable', title: 'CSS Token', render: function (_a) {
|
|
171
|
+
var item = _a.item;
|
|
172
|
+
return React.createElement(Code, { noWrap: true }, item.cssVariable);
|
|
173
|
+
} },
|
|
174
|
+
{ field: 'jsonPath', title: 'JSON Path', render: function (_a) {
|
|
175
|
+
var item = _a.item;
|
|
176
|
+
return React.createElement(Code, { noWrap: true }, item.jsonPath);
|
|
177
|
+
} },
|
|
178
|
+
] }));
|
|
179
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const ColorTokens: () => JSX.Element;
|
|
3
|
+
export declare const ThemeTokens: ({ mode }: {
|
|
4
|
+
mode: 'light' | 'dark';
|
|
5
|
+
}) => JSX.Element;
|
|
6
|
+
export declare const FontFamilyTokens: () => JSX.Element;
|
|
7
|
+
export declare const TypographyVariantsTokens: () => JSX.Element;
|
|
8
|
+
export declare const FontSizeTokens: () => JSX.Element;
|
|
9
|
+
export declare const SimpleFontValueTokens: ({ prefix }: {
|
|
10
|
+
prefix: string;
|
|
11
|
+
}) => JSX.Element;
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
26
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
27
|
+
if (!m) return o;
|
|
28
|
+
var i = m.call(o), r, ar = [], e;
|
|
29
|
+
try {
|
|
30
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
31
|
+
}
|
|
32
|
+
catch (error) { e = { error: error }; }
|
|
33
|
+
finally {
|
|
34
|
+
try {
|
|
35
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
36
|
+
}
|
|
37
|
+
finally { if (e) throw e.error; }
|
|
38
|
+
}
|
|
39
|
+
return ar;
|
|
40
|
+
};
|
|
41
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
42
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
43
|
+
if (ar || !(i in from)) {
|
|
44
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
45
|
+
ar[i] = from[i];
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
49
|
+
};
|
|
50
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
|
+
exports.SimpleFontValueTokens = exports.FontSizeTokens = exports.TypographyVariantsTokens = exports.FontFamilyTokens = exports.ThemeTokens = exports.ColorTokens = void 0;
|
|
52
|
+
var quantum_product_1 = require("@auth0/quantum-product");
|
|
53
|
+
var React = __importStar(require("react"));
|
|
54
|
+
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
|
55
|
+
var tokensJSON = require('../../../quantum-tokens/old/json/tokens.json');
|
|
56
|
+
function transformJsonToken(jsonToken) {
|
|
57
|
+
return {
|
|
58
|
+
id: jsonToken.path.join('_'),
|
|
59
|
+
cssVariable: "--qds-".concat(jsonToken.path.join('-')),
|
|
60
|
+
value: jsonToken.value,
|
|
61
|
+
jsonPath: jsonToken.path.join('.'),
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
var transformJsonColorShadeToken = function (shade) {
|
|
65
|
+
return Object.values(shade).map(function (color) { return transformJsonToken(color); });
|
|
66
|
+
};
|
|
67
|
+
var colorDataTableColumns = [
|
|
68
|
+
{
|
|
69
|
+
field: 'id',
|
|
70
|
+
title: 'Token',
|
|
71
|
+
render: function (_a) {
|
|
72
|
+
var item = _a.item;
|
|
73
|
+
return (React.createElement(quantum_product_1.AvatarBlock, { avatar: React.createElement(quantum_product_1.Avatar, { showBorder: true, sx: { bgcolor: item.value } },
|
|
74
|
+
React.createElement("span", null)), title: React.createElement(quantum_product_1.Code, null, item.id), description: item.value, descriptionTypographyProps: { variant: 'code2' } }));
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
{ field: 'cssVariable', title: 'CSS Token', render: function (_a) {
|
|
78
|
+
var item = _a.item;
|
|
79
|
+
return React.createElement(quantum_product_1.Code, null, item.cssVariable);
|
|
80
|
+
} },
|
|
81
|
+
{ field: 'jsonPath', title: 'JSON Path', render: function (_a) {
|
|
82
|
+
var item = _a.item;
|
|
83
|
+
return React.createElement(quantum_product_1.Code, null, item.jsonPath);
|
|
84
|
+
} },
|
|
85
|
+
];
|
|
86
|
+
var colorEntries = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonColorShadeToken(tokensJSON.color.purple)), false), __read(transformJsonColorShadeToken(tokensJSON.color.neutral)), false), __read(transformJsonColorShadeToken(tokensJSON.color.blue)), false), __read(transformJsonColorShadeToken(tokensJSON.color.green)), false), __read(transformJsonColorShadeToken(tokensJSON.color.magenta)), false), __read(transformJsonColorShadeToken(tokensJSON.color.red)), false), __read(transformJsonColorShadeToken(tokensJSON.color.yellow)), false), __read(transformJsonColorShadeToken(tokensJSON.color.common)), false), __read(transformJsonColorShadeToken(tokensJSON.color.text)), false);
|
|
87
|
+
var ColorTokens = function () {
|
|
88
|
+
return React.createElement(quantum_product_1.DataTable, { items: colorEntries, columns: colorDataTableColumns });
|
|
89
|
+
};
|
|
90
|
+
exports.ColorTokens = ColorTokens;
|
|
91
|
+
var ThemeTokens = function (_a) {
|
|
92
|
+
var _b = _a.mode, mode = _b === void 0 ? 'light' : _b;
|
|
93
|
+
return (React.createElement(quantum_product_1.DataTable, { items: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.text)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.background)), false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.border)), false), [
|
|
94
|
+
transformJsonToken(tokensJSON.theme[mode].color.divider)
|
|
95
|
+
], false), __read(transformJsonColorShadeToken(tokensJSON.theme[mode].color.link)), false), columns: colorDataTableColumns }));
|
|
96
|
+
};
|
|
97
|
+
exports.ThemeTokens = ThemeTokens;
|
|
98
|
+
var FontFamilyTokens = function () {
|
|
99
|
+
return (React.createElement(quantum_product_1.DataTable, { items: [
|
|
100
|
+
transformJsonToken(tokensJSON.typography.font_family),
|
|
101
|
+
transformJsonToken(tokensJSON.typography.font_family_heading),
|
|
102
|
+
transformJsonToken(tokensJSON.typography.font_family_monospace),
|
|
103
|
+
], columns: [
|
|
104
|
+
{
|
|
105
|
+
field: 'id',
|
|
106
|
+
title: 'Token',
|
|
107
|
+
render: function (_a) {
|
|
108
|
+
var item = _a.item;
|
|
109
|
+
return (React.createElement(quantum_product_1.TitleBlock, { title: React.createElement(quantum_product_1.Code, null, item.id), description: item.value.join(', '), descriptionTypographyProps: { variant: 'code2' } }));
|
|
110
|
+
},
|
|
111
|
+
},
|
|
112
|
+
{ field: 'cssVariable', title: 'CSS Token', render: function (_a) {
|
|
113
|
+
var item = _a.item;
|
|
114
|
+
return React.createElement(quantum_product_1.Code, { noWrap: true }, item.cssVariable);
|
|
115
|
+
} },
|
|
116
|
+
{ field: 'jsonPath', title: 'JSON Path', render: function (_a) {
|
|
117
|
+
var item = _a.item;
|
|
118
|
+
return React.createElement(quantum_product_1.Code, { noWrap: true }, item.jsonPath);
|
|
119
|
+
} },
|
|
120
|
+
] }));
|
|
121
|
+
};
|
|
122
|
+
exports.FontFamilyTokens = FontFamilyTokens;
|
|
123
|
+
var transformJsonTextVariantTokenGroup = function (shade) {
|
|
124
|
+
return Object.values(shade).map(function (variant) { return transformJsonToken(variant); });
|
|
125
|
+
};
|
|
126
|
+
var TypographyVariantsTokens = function () {
|
|
127
|
+
return (React.createElement(quantum_product_1.DataTable, { items: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.headings)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.subtitles)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.body)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.forms)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.caption)), false), __read(transformJsonTextVariantTokenGroup(tokensJSON.typography.variants.code)), false), columns: [
|
|
128
|
+
{
|
|
129
|
+
field: 'id',
|
|
130
|
+
title: 'Token',
|
|
131
|
+
render: function (_a) {
|
|
132
|
+
var item = _a.item;
|
|
133
|
+
return React.createElement(quantum_product_1.Code, null, item.id);
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
title: 'Value',
|
|
138
|
+
render: function (_a) {
|
|
139
|
+
var item = _a.item;
|
|
140
|
+
return React.createElement("pre", null, JSON.stringify(item.value, null, 2));
|
|
141
|
+
},
|
|
142
|
+
},
|
|
143
|
+
{ field: 'jsonPath', title: 'JSON Path', render: function (_a) {
|
|
144
|
+
var item = _a.item;
|
|
145
|
+
return React.createElement(quantum_product_1.Code, { noWrap: true }, item.jsonPath);
|
|
146
|
+
} },
|
|
147
|
+
] }));
|
|
148
|
+
};
|
|
149
|
+
exports.TypographyVariantsTokens = TypographyVariantsTokens;
|
|
150
|
+
var transformTypographySubGroup = function (keyPrefix) {
|
|
151
|
+
return Object.keys(tokensJSON.typography)
|
|
152
|
+
.filter(function (key) { return key.startsWith(keyPrefix); })
|
|
153
|
+
.map(function (key) { return transformJsonToken(tokensJSON.typography[key]); });
|
|
154
|
+
};
|
|
155
|
+
var FontSizeTokens = function () {
|
|
156
|
+
return (React.createElement(quantum_product_1.DataTable, { items: transformTypographySubGroup('font_size'), columns: [
|
|
157
|
+
{
|
|
158
|
+
field: 'id',
|
|
159
|
+
title: 'Token',
|
|
160
|
+
render: function (_a) {
|
|
161
|
+
var item = _a.item;
|
|
162
|
+
return React.createElement(quantum_product_1.Code, null, item.id);
|
|
163
|
+
},
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
title: 'Value',
|
|
167
|
+
render: function (_a) {
|
|
168
|
+
var item = _a.item;
|
|
169
|
+
return React.createElement(quantum_product_1.Code, null, item.value);
|
|
170
|
+
},
|
|
171
|
+
},
|
|
172
|
+
{ field: 'cssVariable', title: 'CSS Token', render: function (_a) {
|
|
173
|
+
var item = _a.item;
|
|
174
|
+
return React.createElement(quantum_product_1.Code, { noWrap: true }, item.cssVariable);
|
|
175
|
+
} },
|
|
176
|
+
{ field: 'jsonPath', title: 'JSON Path', render: function (_a) {
|
|
177
|
+
var item = _a.item;
|
|
178
|
+
return React.createElement(quantum_product_1.Code, { noWrap: true }, item.jsonPath);
|
|
179
|
+
} },
|
|
180
|
+
] }));
|
|
181
|
+
};
|
|
182
|
+
exports.FontSizeTokens = FontSizeTokens;
|
|
183
|
+
var SimpleFontValueTokens = function (_a) {
|
|
184
|
+
var prefix = _a.prefix;
|
|
185
|
+
return (React.createElement(quantum_product_1.DataTable, { items: transformTypographySubGroup(prefix), columns: [
|
|
186
|
+
{
|
|
187
|
+
field: 'id',
|
|
188
|
+
title: 'Token',
|
|
189
|
+
render: function (_a) {
|
|
190
|
+
var item = _a.item;
|
|
191
|
+
return React.createElement(quantum_product_1.Code, null, item.id);
|
|
192
|
+
},
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
title: 'Value',
|
|
196
|
+
render: function (_a) {
|
|
197
|
+
var item = _a.item;
|
|
198
|
+
return React.createElement(quantum_product_1.Code, null, item.value);
|
|
199
|
+
},
|
|
200
|
+
},
|
|
201
|
+
{ field: 'cssVariable', title: 'CSS Token', render: function (_a) {
|
|
202
|
+
var item = _a.item;
|
|
203
|
+
return React.createElement(quantum_product_1.Code, { noWrap: true }, item.cssVariable);
|
|
204
|
+
} },
|
|
205
|
+
{ field: 'jsonPath', title: 'JSON Path', render: function (_a) {
|
|
206
|
+
var item = _a.item;
|
|
207
|
+
return React.createElement(quantum_product_1.Code, { noWrap: true }, item.jsonPath);
|
|
208
|
+
} },
|
|
209
|
+
] }));
|
|
210
|
+
};
|
|
211
|
+
exports.SimpleFontValueTokens = SimpleFontValueTokens;
|