@kaizen/design-tokens 10.3.0 → 10.3.2-canary.32
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/CHANGELOG.md +8 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/tailwind/index.d.ts +2 -0
- package/dist/tailwind/index.d.ts.map +1 -0
- package/dist/tailwind/index.js +18 -0
- package/dist/tailwind/index.js.map +1 -0
- package/dist/tailwind/tailwind-presets.d.ts +2 -0
- package/dist/tailwind/tailwind-presets.d.ts.map +1 -0
- package/dist/tailwind/tailwind-presets.js +122 -0
- package/dist/tailwind/tailwind-presets.js.map +1 -0
- package/package.json +3 -3
- package/src/index.ts +1 -0
- package/src/tailwind/index.ts +1 -0
- package/src/tailwind/tailwind-presets.ts +126 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [10.3.1](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@10.3.0...@kaizen/design-tokens@10.3.1) (2023-02-21)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @kaizen/design-tokens
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
# [10.3.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/design-tokens@10.2.2...@kaizen/design-tokens@10.3.0) (2023-02-20)
|
|
7
15
|
|
|
8
16
|
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * from "./themes";
|
|
|
2
2
|
export * from "./types";
|
|
3
3
|
export * from "./ThemeManager";
|
|
4
4
|
export * from "./react";
|
|
5
|
+
export * from "./tailwind";
|
|
5
6
|
export { makeCssVariableDefinitionsMap } from "./lib/makeCssVariableDefinitionsMap";
|
|
6
7
|
export { makeCSSVariableTheme } from "./lib/makeCssVariableTheme";
|
|
7
8
|
export { mapLeafsOfObject } from "./lib/mapLeafsOfObject";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,qCAAqC,CAAA;AACnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -20,6 +20,7 @@ __exportStar(require("./themes"), exports);
|
|
|
20
20
|
__exportStar(require("./types"), exports);
|
|
21
21
|
__exportStar(require("./ThemeManager"), exports);
|
|
22
22
|
__exportStar(require("./react"), exports);
|
|
23
|
+
__exportStar(require("./tailwind"), exports);
|
|
23
24
|
var makeCssVariableDefinitionsMap_1 = require("./lib/makeCssVariableDefinitionsMap");
|
|
24
25
|
Object.defineProperty(exports, "makeCssVariableDefinitionsMap", { enumerable: true, get: function () { return makeCssVariableDefinitionsMap_1.makeCssVariableDefinitionsMap; } });
|
|
25
26
|
var makeCssVariableTheme_1 = require("./lib/makeCssVariableTheme");
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,4HAA4H;AAC5H,2CAAwB;AACxB,0CAAuB;AACvB,iDAA8B;AAC9B,0CAAuB;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,4HAA4H;AAC5H,2CAAwB;AACxB,0CAAuB;AACvB,iDAA8B;AAC9B,0CAAuB;AACvB,6CAA0B;AAE1B,qFAAmF;AAA1E,8IAAA,6BAA6B,OAAA;AACtC,mEAAiE;AAAxD,4HAAA,oBAAoB,OAAA;AAC7B,2DAAyD;AAAhD,oHAAA,gBAAgB,OAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tailwind/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}
|
|
@@ -0,0 +1,18 @@
|
|
|
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 __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./tailwind-presets"), exports);
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tailwind/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAkC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tailwind-presets.d.ts","sourceRoot":"","sources":["../../src/tailwind/tailwind-presets.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
// ts-check
|
|
15
|
+
// import {Config} from "tailwindcss"
|
|
16
|
+
var __1 = require("../");
|
|
17
|
+
// TODO: create a color mapper since you can't just pass in destructure colour into here
|
|
18
|
+
// const preset: Config = {
|
|
19
|
+
var preset = {
|
|
20
|
+
theme: {
|
|
21
|
+
colors: __assign(__assign({ transparent: "transparent", current: "currentColor", inherit: "inherit" }, __1.defaultTheme.color), __1.defaultTheme.dataViz),
|
|
22
|
+
spacing: __assign({}, __1.defaultTheme.spacing),
|
|
23
|
+
boxShadow: {
|
|
24
|
+
none: "none",
|
|
25
|
+
sm: __1.defaultTheme.shadow.small.boxShadow,
|
|
26
|
+
lg: __1.defaultTheme.shadow.large.boxShadow,
|
|
27
|
+
},
|
|
28
|
+
borderRadius: {
|
|
29
|
+
none: "0px",
|
|
30
|
+
default: "7px",
|
|
31
|
+
"focus-ring": "10px",
|
|
32
|
+
},
|
|
33
|
+
borderWidth: {
|
|
34
|
+
"width-none": "0px",
|
|
35
|
+
"width-default": "2px",
|
|
36
|
+
"width-focus-ring": "2px",
|
|
37
|
+
},
|
|
38
|
+
// how do we want to handle our focus rings?
|
|
39
|
+
// tailwind used a `ring` property
|
|
40
|
+
borderColor: {
|
|
41
|
+
"color-solid": __1.defaultTheme.border.solid.borderColor,
|
|
42
|
+
"color-transparent": __1.defaultTheme.border.borderless.borderColor,
|
|
43
|
+
"color-focus-ring": __1.defaultTheme.color.blue[600],
|
|
44
|
+
},
|
|
45
|
+
fontFamily: {
|
|
46
|
+
"family-paragraph": __1.defaultTheme.typography.paragraphBody.fontFamily,
|
|
47
|
+
"family-heading": __1.defaultTheme.typography.heading1.fontFamily,
|
|
48
|
+
"family-data": __1.defaultTheme.typography.dataLarge.fontFamily,
|
|
49
|
+
"family-display": __1.defaultTheme.typography.display0.fontFamily,
|
|
50
|
+
},
|
|
51
|
+
fontSize: {
|
|
52
|
+
"size-display": __1.defaultTheme.typography.display0.fontSize,
|
|
53
|
+
"size-heading-1": __1.defaultTheme.typography.heading1.fontSize,
|
|
54
|
+
"size-heading-2": __1.defaultTheme.typography.heading2.fontSize,
|
|
55
|
+
"size-heading-3": __1.defaultTheme.typography.heading3.fontSize,
|
|
56
|
+
"size-heading-4": __1.defaultTheme.typography.heading4.fontSize,
|
|
57
|
+
"size-heading-5": __1.defaultTheme.typography.heading5.fontSize,
|
|
58
|
+
"size-heading-6": __1.defaultTheme.typography.heading6.fontSize,
|
|
59
|
+
"size-paragraph": __1.defaultTheme.typography.paragraphBody.fontSize,
|
|
60
|
+
"size-paragraph-lede": __1.defaultTheme.typography.paragraphIntroLede.fontSize,
|
|
61
|
+
"size-paragraph-sm": __1.defaultTheme.typography.paragraphSmall.fontSize,
|
|
62
|
+
"size-paragraph-xs": __1.defaultTheme.typography.paragraphExtraSmall.fontSize,
|
|
63
|
+
"size-data-lg": __1.defaultTheme.typography.dataLarge.fontSize,
|
|
64
|
+
"size-data-md": __1.defaultTheme.typography.dataMedium.fontSize,
|
|
65
|
+
"size-data-sm": __1.defaultTheme.typography.dataSmall.fontSize,
|
|
66
|
+
"size-data-units-lg": __1.defaultTheme.typography.dataLargeUnits.fontSize,
|
|
67
|
+
"size-data-units-md": __1.defaultTheme.typography.dataMediumUnits.fontSize,
|
|
68
|
+
"size-data-units-sm": __1.defaultTheme.typography.dataSmallUnits.fontSize,
|
|
69
|
+
},
|
|
70
|
+
// font weights could have specific tokens (current don't)
|
|
71
|
+
fontWeight: {
|
|
72
|
+
normal: "400",
|
|
73
|
+
medium: "500",
|
|
74
|
+
semibold: "600",
|
|
75
|
+
bold: "700",
|
|
76
|
+
extrabold: "800",
|
|
77
|
+
"weight-paragraph": "400",
|
|
78
|
+
"weight-paragraph-bold": "600",
|
|
79
|
+
"weight-data": "700",
|
|
80
|
+
"weight-heading": "700",
|
|
81
|
+
"weight-display": "800",
|
|
82
|
+
},
|
|
83
|
+
lineHeight: {
|
|
84
|
+
"height-display": __1.defaultTheme.typography.display0.lineHeight,
|
|
85
|
+
"height-heading-1": __1.defaultTheme.typography.heading1.lineHeight,
|
|
86
|
+
"height-heading-2": __1.defaultTheme.typography.heading2.lineHeight,
|
|
87
|
+
"height-heading-3": __1.defaultTheme.typography.heading3.lineHeight,
|
|
88
|
+
"height-heading-4": __1.defaultTheme.typography.heading4.lineHeight,
|
|
89
|
+
"height-heading-5": __1.defaultTheme.typography.heading5.lineHeight,
|
|
90
|
+
"height-heading-6": __1.defaultTheme.typography.heading6.lineHeight,
|
|
91
|
+
"height-paragraph": __1.defaultTheme.typography.paragraphBody.lineHeight,
|
|
92
|
+
"height-paragraph-lede": __1.defaultTheme.typography.paragraphIntroLede.lineHeight,
|
|
93
|
+
"height-paragraph-sm": __1.defaultTheme.typography.paragraphSmall.lineHeight,
|
|
94
|
+
"height-paragraph-xs": __1.defaultTheme.typography.paragraphExtraSmall.lineHeight,
|
|
95
|
+
"height-data-lg": __1.defaultTheme.typography.dataLarge.lineHeight,
|
|
96
|
+
"height-data-md": __1.defaultTheme.typography.dataMedium.lineHeight,
|
|
97
|
+
"height-data-sm": __1.defaultTheme.typography.dataSmall.lineHeight,
|
|
98
|
+
"height-data-units-lg": __1.defaultTheme.typography.dataLargeUnits.lineHeight,
|
|
99
|
+
"height-data-units-md": __1.defaultTheme.typography.dataMediumUnits.lineHeight,
|
|
100
|
+
"height-data-units-sm": __1.defaultTheme.typography.dataSmallUnits.lineHeight,
|
|
101
|
+
},
|
|
102
|
+
letterSpacing: {
|
|
103
|
+
"spacing-normal": "normal",
|
|
104
|
+
},
|
|
105
|
+
// A mix of layout styles
|
|
106
|
+
maxWidth: {
|
|
107
|
+
content: __1.defaultTheme.layout.contentMaxWidth,
|
|
108
|
+
"content-with-side": __1.defaultTheme.layout.contentMaxWidthWithSidebar,
|
|
109
|
+
},
|
|
110
|
+
width: {
|
|
111
|
+
"content-side-margin": __1.defaultTheme.layout.contentSideMargin,
|
|
112
|
+
},
|
|
113
|
+
height: {
|
|
114
|
+
"mobile-actions-drawer-height": __1.defaultTheme.layout.mobileActionsDrawerHeight,
|
|
115
|
+
"navigation-bar-height": __1.defaultTheme.layout.navigationBarHeight,
|
|
116
|
+
},
|
|
117
|
+
// we will probably want to review viewport sizing
|
|
118
|
+
screens: __assign({}, __1.defaultTheme.layout.breakpoints),
|
|
119
|
+
},
|
|
120
|
+
};
|
|
121
|
+
module.exports.TailwindPreset = preset;
|
|
122
|
+
//# sourceMappingURL=tailwind-presets.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tailwind-presets.js","sourceRoot":"","sources":["../../src/tailwind/tailwind-presets.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kaizen/design-tokens",
|
|
3
3
|
"description": "Tokens used in the Kaizen Design System",
|
|
4
|
-
"version": "10.3.
|
|
4
|
+
"version": "10.3.2-canary.32+8a478dd1d",
|
|
5
5
|
"homepage": "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/design-tokens",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"react-highlight": "^0.15.0",
|
|
45
45
|
"react-map-interaction": "^2.1.0",
|
|
46
46
|
"ts-node": "^10.9.1",
|
|
47
|
-
"yargs": "^17.7.
|
|
47
|
+
"yargs": "^17.7.1"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@types/color-string": "^1.5.2",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"react": ">=16 || ^17.0.0 || ^18.0.0"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "8a478dd1dd101326d162574770767c00d0d4087d"
|
|
59
59
|
}
|
package/src/index.ts
CHANGED
|
@@ -3,6 +3,7 @@ export * from "./themes"
|
|
|
3
3
|
export * from "./types"
|
|
4
4
|
export * from "./ThemeManager"
|
|
5
5
|
export * from "./react"
|
|
6
|
+
export * from "./tailwind"
|
|
6
7
|
|
|
7
8
|
export { makeCssVariableDefinitionsMap } from "./lib/makeCssVariableDefinitionsMap"
|
|
8
9
|
export { makeCSSVariableTheme } from "./lib/makeCssVariableTheme"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./tailwind-presets"
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
// ts-check
|
|
2
|
+
// import {Config} from "tailwindcss"
|
|
3
|
+
import { defaultTheme } from "../"
|
|
4
|
+
|
|
5
|
+
// TODO: create a color mapper since you can't just pass in destructure colour into here
|
|
6
|
+
|
|
7
|
+
// const preset: Config = {
|
|
8
|
+
const preset = {
|
|
9
|
+
theme: {
|
|
10
|
+
colors: {
|
|
11
|
+
transparent: "transparent",
|
|
12
|
+
current: "currentColor",
|
|
13
|
+
inherit: "inherit",
|
|
14
|
+
...defaultTheme.color,
|
|
15
|
+
...defaultTheme.dataViz,
|
|
16
|
+
},
|
|
17
|
+
spacing: {
|
|
18
|
+
...defaultTheme.spacing,
|
|
19
|
+
},
|
|
20
|
+
boxShadow: {
|
|
21
|
+
none: "none",
|
|
22
|
+
sm: defaultTheme.shadow.small.boxShadow,
|
|
23
|
+
lg: defaultTheme.shadow.large.boxShadow,
|
|
24
|
+
},
|
|
25
|
+
borderRadius: {
|
|
26
|
+
none: "0px",
|
|
27
|
+
default: "7px",
|
|
28
|
+
"focus-ring": "10px",
|
|
29
|
+
},
|
|
30
|
+
borderWidth: {
|
|
31
|
+
"width-none": "0px",
|
|
32
|
+
"width-default": "2px",
|
|
33
|
+
"width-focus-ring": "2px",
|
|
34
|
+
},
|
|
35
|
+
// how do we want to handle our focus rings?
|
|
36
|
+
// tailwind used a `ring` property
|
|
37
|
+
borderColor: {
|
|
38
|
+
"color-solid": defaultTheme.border.solid.borderColor,
|
|
39
|
+
"color-transparent": defaultTheme.border.borderless.borderColor,
|
|
40
|
+
"color-focus-ring": defaultTheme.color.blue[600],
|
|
41
|
+
},
|
|
42
|
+
fontFamily: {
|
|
43
|
+
"family-paragraph": defaultTheme.typography.paragraphBody.fontFamily,
|
|
44
|
+
"family-heading": defaultTheme.typography.heading1.fontFamily,
|
|
45
|
+
"family-data": defaultTheme.typography.dataLarge.fontFamily,
|
|
46
|
+
"family-display": defaultTheme.typography.display0.fontFamily,
|
|
47
|
+
},
|
|
48
|
+
fontSize: {
|
|
49
|
+
"size-display": defaultTheme.typography.display0.fontSize,
|
|
50
|
+
"size-heading-1": defaultTheme.typography.heading1.fontSize,
|
|
51
|
+
"size-heading-2": defaultTheme.typography.heading2.fontSize,
|
|
52
|
+
"size-heading-3": defaultTheme.typography.heading3.fontSize,
|
|
53
|
+
"size-heading-4": defaultTheme.typography.heading4.fontSize,
|
|
54
|
+
"size-heading-5": defaultTheme.typography.heading5.fontSize,
|
|
55
|
+
"size-heading-6": defaultTheme.typography.heading6.fontSize,
|
|
56
|
+
"size-paragraph": defaultTheme.typography.paragraphBody.fontSize,
|
|
57
|
+
"size-paragraph-lede":
|
|
58
|
+
defaultTheme.typography.paragraphIntroLede.fontSize,
|
|
59
|
+
"size-paragraph-sm": defaultTheme.typography.paragraphSmall.fontSize,
|
|
60
|
+
"size-paragraph-xs": defaultTheme.typography.paragraphExtraSmall.fontSize,
|
|
61
|
+
"size-data-lg": defaultTheme.typography.dataLarge.fontSize,
|
|
62
|
+
"size-data-md": defaultTheme.typography.dataMedium.fontSize,
|
|
63
|
+
"size-data-sm": defaultTheme.typography.dataSmall.fontSize,
|
|
64
|
+
"size-data-units-lg": defaultTheme.typography.dataLargeUnits.fontSize,
|
|
65
|
+
"size-data-units-md": defaultTheme.typography.dataMediumUnits.fontSize,
|
|
66
|
+
"size-data-units-sm": defaultTheme.typography.dataSmallUnits.fontSize,
|
|
67
|
+
},
|
|
68
|
+
// font weights could have specific tokens (current don't)
|
|
69
|
+
fontWeight: {
|
|
70
|
+
normal: "400",
|
|
71
|
+
medium: "500",
|
|
72
|
+
semibold: "600",
|
|
73
|
+
bold: "700",
|
|
74
|
+
extrabold: "800",
|
|
75
|
+
"weight-paragraph": "400",
|
|
76
|
+
"weight-paragraph-bold": "600",
|
|
77
|
+
"weight-data": "700",
|
|
78
|
+
"weight-heading": "700",
|
|
79
|
+
"weight-display": "800",
|
|
80
|
+
},
|
|
81
|
+
lineHeight: {
|
|
82
|
+
"height-display": defaultTheme.typography.display0.lineHeight,
|
|
83
|
+
"height-heading-1": defaultTheme.typography.heading1.lineHeight,
|
|
84
|
+
"height-heading-2": defaultTheme.typography.heading2.lineHeight,
|
|
85
|
+
"height-heading-3": defaultTheme.typography.heading3.lineHeight,
|
|
86
|
+
"height-heading-4": defaultTheme.typography.heading4.lineHeight,
|
|
87
|
+
"height-heading-5": defaultTheme.typography.heading5.lineHeight,
|
|
88
|
+
"height-heading-6": defaultTheme.typography.heading6.lineHeight,
|
|
89
|
+
"height-paragraph": defaultTheme.typography.paragraphBody.lineHeight,
|
|
90
|
+
"height-paragraph-lede":
|
|
91
|
+
defaultTheme.typography.paragraphIntroLede.lineHeight,
|
|
92
|
+
"height-paragraph-sm": defaultTheme.typography.paragraphSmall.lineHeight,
|
|
93
|
+
"height-paragraph-xs":
|
|
94
|
+
defaultTheme.typography.paragraphExtraSmall.lineHeight,
|
|
95
|
+
"height-data-lg": defaultTheme.typography.dataLarge.lineHeight,
|
|
96
|
+
"height-data-md": defaultTheme.typography.dataMedium.lineHeight,
|
|
97
|
+
"height-data-sm": defaultTheme.typography.dataSmall.lineHeight,
|
|
98
|
+
"height-data-units-lg": defaultTheme.typography.dataLargeUnits.lineHeight,
|
|
99
|
+
"height-data-units-md":
|
|
100
|
+
defaultTheme.typography.dataMediumUnits.lineHeight,
|
|
101
|
+
"height-data-units-sm": defaultTheme.typography.dataSmallUnits.lineHeight,
|
|
102
|
+
},
|
|
103
|
+
letterSpacing: {
|
|
104
|
+
"spacing-normal": "normal",
|
|
105
|
+
},
|
|
106
|
+
// A mix of layout styles
|
|
107
|
+
maxWidth: {
|
|
108
|
+
content: defaultTheme.layout.contentMaxWidth,
|
|
109
|
+
"content-with-side": defaultTheme.layout.contentMaxWidthWithSidebar,
|
|
110
|
+
},
|
|
111
|
+
width: {
|
|
112
|
+
"content-side-margin": defaultTheme.layout.contentSideMargin,
|
|
113
|
+
},
|
|
114
|
+
height: {
|
|
115
|
+
"mobile-actions-drawer-height":
|
|
116
|
+
defaultTheme.layout.mobileActionsDrawerHeight,
|
|
117
|
+
"navigation-bar-height": defaultTheme.layout.navigationBarHeight,
|
|
118
|
+
},
|
|
119
|
+
// we will probably want to review viewport sizing
|
|
120
|
+
screens: {
|
|
121
|
+
...defaultTheme.layout.breakpoints,
|
|
122
|
+
},
|
|
123
|
+
},
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
module.exports.TailwindPreset = preset
|