@kaizen/tailwind 1.3.10 → 1.3.12
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/dist/cjs/kz-spacing.cjs +2 -2
- package/dist/cjs/tailwind-presets.cjs +65 -65
- package/dist/esm/kz-spacing.mjs +2 -2
- package/dist/esm/tailwind-presets.mjs +65 -65
- package/dist/types/index.d.ts +1 -1
- package/dist/types/tailwind-presets.d.ts +1 -1
- package/package.json +6 -6
- package/src/_docs/pages/backgrounds/background-color.mdx +2 -2
- package/src/_docs/pages/backgrounds/background-color.stories.tsx +13 -20
- package/src/_docs/pages/borders/border-color.mdx +2 -2
- package/src/_docs/pages/borders/border-color.stories.tsx +14 -20
- package/src/_docs/pages/borders/border-radius.mdx +2 -2
- package/src/_docs/pages/borders/border-radius.stories.tsx +18 -22
- package/src/_docs/pages/borders/border-spacing.mdx +2 -2
- package/src/_docs/pages/borders/border-spacing.stories.tsx +15 -19
- package/src/_docs/pages/borders/border-width.mdx +8 -9
- package/src/_docs/pages/borders/border-width.stories.tsx +18 -22
- package/src/_docs/pages/configuration.mdx +18 -22
- package/src/_docs/pages/contributing.mdx +2 -2
- package/src/_docs/pages/effects/shadow.mdx +2 -2
- package/src/_docs/pages/effects/shadow.stories.tsx +17 -19
- package/src/_docs/pages/getting-started.mdx +9 -9
- package/src/_docs/pages/modifiers/media-queries.mdx +2 -2
- package/src/_docs/pages/modifiers/media-queries.stories.tsx +14 -24
- package/src/_docs/pages/modifiers/pseudo-states.mdx +5 -5
- package/src/_docs/pages/modifiers/pseudo-states.stories.tsx +10 -16
- package/src/_docs/pages/overview.mdx +6 -5
- package/src/_docs/pages/spacing/margin.mdx +7 -7
- package/src/_docs/pages/spacing/margin.stories.tsx +17 -22
- package/src/_docs/pages/spacing/padding.mdx +7 -7
- package/src/_docs/pages/spacing/padding.stories.tsx +17 -24
- package/src/_docs/pages/typography/font-family.mdx +2 -2
- package/src/_docs/pages/typography/font-family.stories.tsx +15 -19
- package/src/_docs/pages/typography/font-size.mdx +2 -2
- package/src/_docs/pages/typography/font-size.stories.tsx +11 -12
- package/src/_docs/pages/typography/font-weight.mdx +2 -2
- package/src/_docs/pages/typography/font-weight.stories.tsx +15 -19
- package/src/_docs/pages/typography/line-height.mdx +2 -2
- package/src/_docs/pages/typography/line-height.stories.tsx +17 -23
- package/src/_docs/pages/typography/max-text-width.mdx +2 -2
- package/src/_docs/pages/typography/max-text-width.stories.tsx +25 -29
- package/src/_docs/pages/typography/text-color.mdx +2 -2
- package/src/_docs/pages/typography/text-color.stories.tsx +16 -17
- package/src/_docs/pages/utility-class-helpers-overview.mdx +24 -23
- package/src/_docs/pages/working-with-tailwind.mdx +11 -7
- package/src/_docs/pages/working-with-tailwind.stories.tsx +12 -21
- package/src/_docs/utils/TailwindStoryTemplate/TailwindStoryTemplate.tsx +52 -42
- package/src/_docs/utils/TailwindStoryTemplate/components/CardContent/CardContent.tsx +5 -8
- package/src/_docs/utils/TailwindStoryTemplate/components/CardContent/index.ts +1 -1
- package/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/CodeSnippet.tsx +3 -3
- package/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/index.ts +1 -1
- package/src/_docs/utils/TailwindStoryTemplate/index.ts +1 -1
- package/src/_docs/utils/flattenEntries.ts +12 -13
- package/src/_docs/utils/utilityDescription.ts +1 -4
- package/src/index.ts +1 -1
- package/src/kz-height.ts +10 -10
- package/src/kz-spacing.spec.ts +24 -24
- package/src/kz-spacing.ts +21 -22
- package/src/tailwind-presets.ts +68 -68
package/dist/cjs/kz-spacing.cjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var designTokens = require('@kaizen/design-tokens');
|
|
4
|
-
var tokenDenyList = [
|
|
4
|
+
var tokenDenyList = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl', 'xxxxl', 'xxxxxl', 'xs-id', 'sm-id', 'md-id', 'lg-id', 'xl-id', 'xxl-id', 'xxxl-id', 'xxxxl-id', 'xxxxxl-id'];
|
|
5
5
|
/**
|
|
6
6
|
* checks if a key from design tokens should be filtered from tailwind
|
|
7
7
|
*/
|
|
8
8
|
var isValidToken = function (key) {
|
|
9
|
-
return tokenDenyList.
|
|
9
|
+
return !tokenDenyList.includes("".concat(key));
|
|
10
10
|
};
|
|
11
11
|
// Filters out non-pixel-based spacing tokens, such as shirt sizes
|
|
12
12
|
var filterDenyListValues = function (spacingTokensObject) {
|
|
@@ -8,95 +8,95 @@ var kzSpacing = require('./kz-spacing.cjs');
|
|
|
8
8
|
var kaizenTailwindTheme = {
|
|
9
9
|
extend: {
|
|
10
10
|
maxWidth: {
|
|
11
|
-
paragraph: "".concat(js.tokens.typography.paragraphBody.maxWidth),
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
'paragraph': "".concat(js.tokens.typography.paragraphBody.maxWidth),
|
|
12
|
+
'paragraph-lede': "".concat(js.tokens.typography.paragraphIntroLede.maxWidth),
|
|
13
|
+
'paragraph-sm': "".concat(js.tokens.typography.paragraphSmall.maxWidth),
|
|
14
|
+
'paragraph-xs': "".concat(js.tokens.typography.paragraphExtraSmall.maxWidth)
|
|
15
15
|
}
|
|
16
16
|
},
|
|
17
17
|
colors: tslib.__assign(tslib.__assign({
|
|
18
|
-
transparent:
|
|
19
|
-
current:
|
|
20
|
-
inherit:
|
|
18
|
+
transparent: 'transparent',
|
|
19
|
+
current: 'currentColor',
|
|
20
|
+
inherit: 'inherit'
|
|
21
21
|
}, js.tokens.color), js.tokens.dataViz),
|
|
22
22
|
spacing: kzSpacing.kzSpacing,
|
|
23
23
|
boxShadow: {
|
|
24
|
-
none:
|
|
24
|
+
none: 'none',
|
|
25
25
|
sm: js.tokens.shadow.small.boxShadow,
|
|
26
26
|
lg: js.tokens.shadow.large.boxShadow
|
|
27
27
|
},
|
|
28
28
|
borderRadius: {
|
|
29
|
-
DEFAULT:
|
|
30
|
-
default:
|
|
31
|
-
none:
|
|
32
|
-
|
|
33
|
-
full:
|
|
29
|
+
'DEFAULT': '7px',
|
|
30
|
+
'default': '7px',
|
|
31
|
+
'none': '0px',
|
|
32
|
+
'focus-ring': '10px',
|
|
33
|
+
'full': '100%'
|
|
34
34
|
},
|
|
35
35
|
borderWidth: {
|
|
36
|
-
DEFAULT:
|
|
37
|
-
default:
|
|
38
|
-
none:
|
|
39
|
-
1:
|
|
40
|
-
|
|
36
|
+
'DEFAULT': '2px',
|
|
37
|
+
'default': '2px',
|
|
38
|
+
'none': '0px',
|
|
39
|
+
1: '1px',
|
|
40
|
+
'focus-ring': '2px'
|
|
41
41
|
},
|
|
42
42
|
borderColor: tslib.__assign({
|
|
43
|
-
|
|
44
|
-
transparent: "".concat(js.tokens.border.borderless.borderColor),
|
|
45
|
-
|
|
43
|
+
'default-color': "".concat(js.tokens.border.solid.borderColor),
|
|
44
|
+
'transparent': "".concat(js.tokens.border.borderless.borderColor),
|
|
45
|
+
'focus-ring': js.tokens.color.blue[600]
|
|
46
46
|
}, js.tokens.color),
|
|
47
47
|
fontFamily: {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
'family-paragraph': ["".concat(js.tokens.typography.paragraphBody.fontFamily)],
|
|
49
|
+
'family-heading': ["".concat(js.tokens.typography.heading1.fontFamily)],
|
|
50
|
+
'family-data': ["".concat(js.tokens.typography.dataLarge.fontFamily)],
|
|
51
|
+
'family-display': ["".concat(js.tokens.typography.display0.fontFamily)]
|
|
52
52
|
},
|
|
53
53
|
fontSize: {
|
|
54
|
-
display: "".concat(js.tokens.typography.display0.fontSize),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
paragraph: "".concat(js.tokens.typography.paragraphBody.fontSize),
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
54
|
+
'display': "".concat(js.tokens.typography.display0.fontSize),
|
|
55
|
+
'heading-1': "".concat(js.tokens.typography.heading1.fontSize),
|
|
56
|
+
'heading-2': "".concat(js.tokens.typography.heading2.fontSize),
|
|
57
|
+
'heading-3': "".concat(js.tokens.typography.heading3.fontSize),
|
|
58
|
+
'heading-4': "".concat(js.tokens.typography.heading4.fontSize),
|
|
59
|
+
'heading-5': "".concat(js.tokens.typography.heading5.fontSize),
|
|
60
|
+
'heading-6': "".concat(js.tokens.typography.heading6.fontSize),
|
|
61
|
+
'paragraph': "".concat(js.tokens.typography.paragraphBody.fontSize),
|
|
62
|
+
'paragraph-lede': "".concat(js.tokens.typography.paragraphIntroLede.fontSize),
|
|
63
|
+
'paragraph-sm': "".concat(js.tokens.typography.paragraphSmall.fontSize),
|
|
64
|
+
'paragraph-xs': "".concat(js.tokens.typography.paragraphExtraSmall.fontSize),
|
|
65
|
+
'data-lg': "".concat(js.tokens.typography.dataLarge.fontSize),
|
|
66
|
+
'data-md': "".concat(js.tokens.typography.dataMedium.fontSize),
|
|
67
|
+
'data-sm': "".concat(js.tokens.typography.dataSmall.fontSize),
|
|
68
|
+
'data-units-lg': "".concat(js.tokens.typography.dataLargeUnits.fontSize),
|
|
69
|
+
'data-units-md': "".concat(js.tokens.typography.dataMediumUnits.fontSize),
|
|
70
|
+
'data-units-sm': "".concat(js.tokens.typography.dataSmallUnits.fontSize)
|
|
71
71
|
},
|
|
72
72
|
fontWeight: {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
'weight-paragraph': '400',
|
|
74
|
+
'weight-paragraph-bold': '600',
|
|
75
|
+
'weight-data': '700',
|
|
76
|
+
'weight-heading': '700',
|
|
77
|
+
'weight-display': '800'
|
|
78
78
|
},
|
|
79
79
|
lineHeight: {
|
|
80
|
-
display: "".concat(js.tokens.typography.display0.lineHeight),
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
paragraph: "".concat(js.tokens.typography.paragraphBody.lineHeight),
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
80
|
+
'display': "".concat(js.tokens.typography.display0.lineHeight),
|
|
81
|
+
'heading-1': "".concat(js.tokens.typography.heading1.lineHeight),
|
|
82
|
+
'heading-2': "".concat(js.tokens.typography.heading2.lineHeight),
|
|
83
|
+
'heading-3': "".concat(js.tokens.typography.heading3.lineHeight),
|
|
84
|
+
'heading-4': "".concat(js.tokens.typography.heading4.lineHeight),
|
|
85
|
+
'heading-5': "".concat(js.tokens.typography.heading5.lineHeight),
|
|
86
|
+
'heading-6': "".concat(js.tokens.typography.heading6.lineHeight),
|
|
87
|
+
'paragraph': "".concat(js.tokens.typography.paragraphBody.lineHeight),
|
|
88
|
+
'paragraph-lede': "".concat(js.tokens.typography.paragraphIntroLede.lineHeight),
|
|
89
|
+
'paragraph-sm': "".concat(js.tokens.typography.paragraphSmall.lineHeight),
|
|
90
|
+
'paragraph-xs': "".concat(js.tokens.typography.paragraphExtraSmall.lineHeight),
|
|
91
|
+
'data-lg': "".concat(js.tokens.typography.dataLarge.lineHeight),
|
|
92
|
+
'data-md': "".concat(js.tokens.typography.dataMedium.lineHeight),
|
|
93
|
+
'data-sm': "".concat(js.tokens.typography.dataSmall.lineHeight),
|
|
94
|
+
'data-units-lg': "".concat(js.tokens.typography.dataLargeUnits.lineHeight),
|
|
95
|
+
'data-units-md': "".concat(js.tokens.typography.dataMediumUnits.lineHeight),
|
|
96
|
+
'data-units-sm': "".concat(js.tokens.typography.dataSmallUnits.lineHeight)
|
|
97
97
|
},
|
|
98
98
|
letterSpacing: {
|
|
99
|
-
|
|
99
|
+
'letter-spacing-normal': 'normal'
|
|
100
100
|
},
|
|
101
101
|
// A mix of layout styles
|
|
102
102
|
screens: {
|
package/dist/esm/kz-spacing.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { heartTheme } from '@kaizen/design-tokens';
|
|
2
|
-
var tokenDenyList = [
|
|
2
|
+
var tokenDenyList = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl', 'xxxxl', 'xxxxxl', 'xs-id', 'sm-id', 'md-id', 'lg-id', 'xl-id', 'xxl-id', 'xxxl-id', 'xxxxl-id', 'xxxxxl-id'];
|
|
3
3
|
/**
|
|
4
4
|
* checks if a key from design tokens should be filtered from tailwind
|
|
5
5
|
*/
|
|
6
6
|
var isValidToken = function (key) {
|
|
7
|
-
return tokenDenyList.
|
|
7
|
+
return !tokenDenyList.includes("".concat(key));
|
|
8
8
|
};
|
|
9
9
|
// Filters out non-pixel-based spacing tokens, such as shirt sizes
|
|
10
10
|
var filterDenyListValues = function (spacingTokensObject) {
|
|
@@ -6,95 +6,95 @@ import { kzSpacing } from './kz-spacing.mjs';
|
|
|
6
6
|
var kaizenTailwindTheme = {
|
|
7
7
|
extend: {
|
|
8
8
|
maxWidth: {
|
|
9
|
-
paragraph: "".concat(tokens.typography.paragraphBody.maxWidth),
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
'paragraph': "".concat(tokens.typography.paragraphBody.maxWidth),
|
|
10
|
+
'paragraph-lede': "".concat(tokens.typography.paragraphIntroLede.maxWidth),
|
|
11
|
+
'paragraph-sm': "".concat(tokens.typography.paragraphSmall.maxWidth),
|
|
12
|
+
'paragraph-xs': "".concat(tokens.typography.paragraphExtraSmall.maxWidth)
|
|
13
13
|
}
|
|
14
14
|
},
|
|
15
15
|
colors: __assign(__assign({
|
|
16
|
-
transparent:
|
|
17
|
-
current:
|
|
18
|
-
inherit:
|
|
16
|
+
transparent: 'transparent',
|
|
17
|
+
current: 'currentColor',
|
|
18
|
+
inherit: 'inherit'
|
|
19
19
|
}, tokens.color), tokens.dataViz),
|
|
20
20
|
spacing: kzSpacing,
|
|
21
21
|
boxShadow: {
|
|
22
|
-
none:
|
|
22
|
+
none: 'none',
|
|
23
23
|
sm: tokens.shadow.small.boxShadow,
|
|
24
24
|
lg: tokens.shadow.large.boxShadow
|
|
25
25
|
},
|
|
26
26
|
borderRadius: {
|
|
27
|
-
DEFAULT:
|
|
28
|
-
default:
|
|
29
|
-
none:
|
|
30
|
-
|
|
31
|
-
full:
|
|
27
|
+
'DEFAULT': '7px',
|
|
28
|
+
'default': '7px',
|
|
29
|
+
'none': '0px',
|
|
30
|
+
'focus-ring': '10px',
|
|
31
|
+
'full': '100%'
|
|
32
32
|
},
|
|
33
33
|
borderWidth: {
|
|
34
|
-
DEFAULT:
|
|
35
|
-
default:
|
|
36
|
-
none:
|
|
37
|
-
1:
|
|
38
|
-
|
|
34
|
+
'DEFAULT': '2px',
|
|
35
|
+
'default': '2px',
|
|
36
|
+
'none': '0px',
|
|
37
|
+
1: '1px',
|
|
38
|
+
'focus-ring': '2px'
|
|
39
39
|
},
|
|
40
40
|
borderColor: __assign({
|
|
41
|
-
|
|
42
|
-
transparent: "".concat(tokens.border.borderless.borderColor),
|
|
43
|
-
|
|
41
|
+
'default-color': "".concat(tokens.border.solid.borderColor),
|
|
42
|
+
'transparent': "".concat(tokens.border.borderless.borderColor),
|
|
43
|
+
'focus-ring': tokens.color.blue[600]
|
|
44
44
|
}, tokens.color),
|
|
45
45
|
fontFamily: {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
'family-paragraph': ["".concat(tokens.typography.paragraphBody.fontFamily)],
|
|
47
|
+
'family-heading': ["".concat(tokens.typography.heading1.fontFamily)],
|
|
48
|
+
'family-data': ["".concat(tokens.typography.dataLarge.fontFamily)],
|
|
49
|
+
'family-display': ["".concat(tokens.typography.display0.fontFamily)]
|
|
50
50
|
},
|
|
51
51
|
fontSize: {
|
|
52
|
-
display: "".concat(tokens.typography.display0.fontSize),
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
paragraph: "".concat(tokens.typography.paragraphBody.fontSize),
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
52
|
+
'display': "".concat(tokens.typography.display0.fontSize),
|
|
53
|
+
'heading-1': "".concat(tokens.typography.heading1.fontSize),
|
|
54
|
+
'heading-2': "".concat(tokens.typography.heading2.fontSize),
|
|
55
|
+
'heading-3': "".concat(tokens.typography.heading3.fontSize),
|
|
56
|
+
'heading-4': "".concat(tokens.typography.heading4.fontSize),
|
|
57
|
+
'heading-5': "".concat(tokens.typography.heading5.fontSize),
|
|
58
|
+
'heading-6': "".concat(tokens.typography.heading6.fontSize),
|
|
59
|
+
'paragraph': "".concat(tokens.typography.paragraphBody.fontSize),
|
|
60
|
+
'paragraph-lede': "".concat(tokens.typography.paragraphIntroLede.fontSize),
|
|
61
|
+
'paragraph-sm': "".concat(tokens.typography.paragraphSmall.fontSize),
|
|
62
|
+
'paragraph-xs': "".concat(tokens.typography.paragraphExtraSmall.fontSize),
|
|
63
|
+
'data-lg': "".concat(tokens.typography.dataLarge.fontSize),
|
|
64
|
+
'data-md': "".concat(tokens.typography.dataMedium.fontSize),
|
|
65
|
+
'data-sm': "".concat(tokens.typography.dataSmall.fontSize),
|
|
66
|
+
'data-units-lg': "".concat(tokens.typography.dataLargeUnits.fontSize),
|
|
67
|
+
'data-units-md': "".concat(tokens.typography.dataMediumUnits.fontSize),
|
|
68
|
+
'data-units-sm': "".concat(tokens.typography.dataSmallUnits.fontSize)
|
|
69
69
|
},
|
|
70
70
|
fontWeight: {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
'weight-paragraph': '400',
|
|
72
|
+
'weight-paragraph-bold': '600',
|
|
73
|
+
'weight-data': '700',
|
|
74
|
+
'weight-heading': '700',
|
|
75
|
+
'weight-display': '800'
|
|
76
76
|
},
|
|
77
77
|
lineHeight: {
|
|
78
|
-
display: "".concat(tokens.typography.display0.lineHeight),
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
paragraph: "".concat(tokens.typography.paragraphBody.lineHeight),
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
78
|
+
'display': "".concat(tokens.typography.display0.lineHeight),
|
|
79
|
+
'heading-1': "".concat(tokens.typography.heading1.lineHeight),
|
|
80
|
+
'heading-2': "".concat(tokens.typography.heading2.lineHeight),
|
|
81
|
+
'heading-3': "".concat(tokens.typography.heading3.lineHeight),
|
|
82
|
+
'heading-4': "".concat(tokens.typography.heading4.lineHeight),
|
|
83
|
+
'heading-5': "".concat(tokens.typography.heading5.lineHeight),
|
|
84
|
+
'heading-6': "".concat(tokens.typography.heading6.lineHeight),
|
|
85
|
+
'paragraph': "".concat(tokens.typography.paragraphBody.lineHeight),
|
|
86
|
+
'paragraph-lede': "".concat(tokens.typography.paragraphIntroLede.lineHeight),
|
|
87
|
+
'paragraph-sm': "".concat(tokens.typography.paragraphSmall.lineHeight),
|
|
88
|
+
'paragraph-xs': "".concat(tokens.typography.paragraphExtraSmall.lineHeight),
|
|
89
|
+
'data-lg': "".concat(tokens.typography.dataLarge.lineHeight),
|
|
90
|
+
'data-md': "".concat(tokens.typography.dataMedium.lineHeight),
|
|
91
|
+
'data-sm': "".concat(tokens.typography.dataSmall.lineHeight),
|
|
92
|
+
'data-units-lg': "".concat(tokens.typography.dataLargeUnits.lineHeight),
|
|
93
|
+
'data-units-md': "".concat(tokens.typography.dataMediumUnits.lineHeight),
|
|
94
|
+
'data-units-sm': "".concat(tokens.typography.dataSmallUnits.lineHeight)
|
|
95
95
|
},
|
|
96
96
|
letterSpacing: {
|
|
97
|
-
|
|
97
|
+
'letter-spacing-normal': 'normal'
|
|
98
98
|
},
|
|
99
99
|
// A mix of layout styles
|
|
100
100
|
screens: {
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './tailwind-presets';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kaizen/tailwind",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.12",
|
|
4
4
|
"description": "Kaizen Tailwind presets",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
"private": false,
|
|
23
23
|
"license": "MIT",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@kaizen/design-tokens": "10.8.
|
|
25
|
+
"@kaizen/design-tokens": "10.8.6"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"classnames": "^2.5.1",
|
|
29
|
-
"rollup": "^4.
|
|
30
|
-
"tailwindcss": "^3.4.
|
|
31
|
-
"tslib": "^2.8.
|
|
32
|
-
"@kaizen/package-bundler": "2.0.
|
|
29
|
+
"rollup": "^4.28.0",
|
|
30
|
+
"tailwindcss": "^3.4.15",
|
|
31
|
+
"tslib": "^2.8.1",
|
|
32
|
+
"@kaizen/package-bundler": "2.0.3"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"tailwindcss": ">=3.4.7"
|
|
@@ -1,21 +1,20 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { Meta, StoryFn } from
|
|
3
|
-
import classnames from
|
|
4
|
-
import { TailwindStoryTemplate } from
|
|
5
|
-
import { flattenEntries } from
|
|
6
|
-
import { utilityDescription } from
|
|
7
|
-
import { kaizenTailwindTheme } from
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Meta, StoryFn } from '@storybook/react'
|
|
3
|
+
import classnames from 'classnames'
|
|
4
|
+
import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
|
|
5
|
+
import { flattenEntries } from '~tailwind/_docs/utils/flattenEntries'
|
|
6
|
+
import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
|
|
7
|
+
import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
|
|
8
8
|
|
|
9
|
-
const prefix =
|
|
10
|
-
const classEntries = flattenEntries(prefix, kaizenTailwindTheme.colors
|
|
9
|
+
const prefix = 'bg-'
|
|
10
|
+
const classEntries = flattenEntries(prefix, kaizenTailwindTheme.colors ?? {})
|
|
11
11
|
|
|
12
12
|
export default {
|
|
13
|
-
title:
|
|
14
|
-
"Guides/Tailwind/Utility Class References/Backgrounds/Background Color",
|
|
13
|
+
title: 'Guides/Tailwind/Utility Class References/Backgrounds/Background Color',
|
|
15
14
|
parameters: {
|
|
16
15
|
a11y: { disable: true },
|
|
17
16
|
chromatic: { disable: false },
|
|
18
|
-
docsLayout:
|
|
17
|
+
docsLayout: 'fullPage',
|
|
19
18
|
docs: {
|
|
20
19
|
description: {
|
|
21
20
|
component: utilityDescription(prefix, classEntries[0].utilityClassName),
|
|
@@ -24,20 +23,14 @@ export default {
|
|
|
24
23
|
},
|
|
25
24
|
} satisfies Meta
|
|
26
25
|
|
|
27
|
-
export const BackgroundColor: StoryFn
|
|
28
|
-
isReversed,
|
|
29
|
-
}) => (
|
|
26
|
+
export const BackgroundColor: StoryFn = () => (
|
|
30
27
|
<TailwindStoryTemplate
|
|
31
28
|
compiledCssPropertyName="background-color"
|
|
32
29
|
classKeyValues={classEntries}
|
|
33
30
|
renderExampleComponent={(utilityClass): React.ReactElement => (
|
|
34
31
|
<div
|
|
35
|
-
className={classnames(
|
|
36
|
-
"w-[100px] h-[100px] border border-purple-100 rounded",
|
|
37
|
-
utilityClass
|
|
38
|
-
)}
|
|
32
|
+
className={classnames('w-[100px] h-[100px] border border-purple-100 rounded', utilityClass)}
|
|
39
33
|
/>
|
|
40
34
|
)}
|
|
41
|
-
isReversed={isReversed}
|
|
42
35
|
/>
|
|
43
36
|
)
|
|
@@ -1,23 +1,20 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { Meta, StoryFn } from
|
|
3
|
-
import classnames from
|
|
4
|
-
import { TailwindStoryTemplate } from
|
|
5
|
-
import { flattenEntries } from
|
|
6
|
-
import { utilityDescription } from
|
|
7
|
-
import { kaizenTailwindTheme } from
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Meta, StoryFn } from '@storybook/react'
|
|
3
|
+
import classnames from 'classnames'
|
|
4
|
+
import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
|
|
5
|
+
import { flattenEntries } from '~tailwind/_docs/utils/flattenEntries'
|
|
6
|
+
import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
|
|
7
|
+
import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
|
|
8
8
|
|
|
9
|
-
const prefix =
|
|
10
|
-
const classEntries = flattenEntries(
|
|
11
|
-
prefix,
|
|
12
|
-
kaizenTailwindTheme.borderColor || {}
|
|
13
|
-
)
|
|
9
|
+
const prefix = 'border-'
|
|
10
|
+
const classEntries = flattenEntries(prefix, kaizenTailwindTheme.borderColor ?? {})
|
|
14
11
|
|
|
15
12
|
export default {
|
|
16
|
-
title:
|
|
13
|
+
title: 'Guides/Tailwind/Utility Class References/Borders/Border Color',
|
|
17
14
|
parameters: {
|
|
18
15
|
a11y: { disable: true },
|
|
19
16
|
chromatic: { disable: false },
|
|
20
|
-
docsLayout:
|
|
17
|
+
docsLayout: 'fullPage',
|
|
21
18
|
docs: {
|
|
22
19
|
description: {
|
|
23
20
|
component: utilityDescription(prefix, classEntries[0].utilityClassName),
|
|
@@ -26,20 +23,17 @@ export default {
|
|
|
26
23
|
},
|
|
27
24
|
} satisfies Meta
|
|
28
25
|
|
|
29
|
-
export const BorderColor: StoryFn
|
|
30
|
-
isReversed,
|
|
31
|
-
}) => (
|
|
26
|
+
export const BorderColor: StoryFn = () => (
|
|
32
27
|
<TailwindStoryTemplate
|
|
33
28
|
compiledCssPropertyName="border-color"
|
|
34
29
|
classKeyValues={classEntries}
|
|
35
30
|
renderExampleComponent={(utilityClass): React.ReactElement => (
|
|
36
31
|
<div
|
|
37
32
|
className={classnames(
|
|
38
|
-
|
|
39
|
-
utilityClass.replace(
|
|
33
|
+
'rounded w-[100px] h-[100px] border',
|
|
34
|
+
utilityClass.replace('-DEFAULT', ''),
|
|
40
35
|
)}
|
|
41
36
|
/>
|
|
42
37
|
)}
|
|
43
|
-
isReversed={isReversed}
|
|
44
38
|
/>
|
|
45
39
|
)
|
|
@@ -1,25 +1,24 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { Meta, StoryFn } from
|
|
3
|
-
import classnames from
|
|
4
|
-
import { TailwindStoryTemplate } from
|
|
5
|
-
import { utilityDescription } from
|
|
6
|
-
import { kaizenTailwindTheme } from
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Meta, StoryFn } from '@storybook/react'
|
|
3
|
+
import classnames from 'classnames'
|
|
4
|
+
import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
|
|
5
|
+
import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
|
|
6
|
+
import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
|
|
7
7
|
|
|
8
|
-
const prefix =
|
|
9
|
-
const classEntries:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
)
|
|
8
|
+
const prefix = 'rounded-'
|
|
9
|
+
const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
|
|
10
|
+
kaizenTailwindTheme.borderRadius ?? [],
|
|
11
|
+
).map(([suffix, cssProperty]) => ({
|
|
12
|
+
utilityClassName: `${prefix}${suffix}`,
|
|
13
|
+
cssProperty,
|
|
14
|
+
}))
|
|
16
15
|
|
|
17
16
|
export default {
|
|
18
|
-
title:
|
|
17
|
+
title: 'Guides/Tailwind/Utility Class References/Borders/Border Radius',
|
|
19
18
|
parameters: {
|
|
20
19
|
a11y: { disable: true },
|
|
21
20
|
chromatic: { disable: false },
|
|
22
|
-
docsLayout:
|
|
21
|
+
docsLayout: 'fullPage',
|
|
23
22
|
docs: {
|
|
24
23
|
description: {
|
|
25
24
|
component: utilityDescription(prefix, classEntries[3].utilityClassName),
|
|
@@ -28,20 +27,17 @@ export default {
|
|
|
28
27
|
},
|
|
29
28
|
} satisfies Meta
|
|
30
29
|
|
|
31
|
-
export const BorderRadius: StoryFn
|
|
32
|
-
isReversed,
|
|
33
|
-
}) => (
|
|
30
|
+
export const BorderRadius: StoryFn = () => (
|
|
34
31
|
<TailwindStoryTemplate
|
|
35
32
|
compiledCssPropertyName="border-radius"
|
|
36
33
|
classKeyValues={classEntries}
|
|
37
34
|
renderExampleComponent={(utilityClass): React.ReactElement => (
|
|
38
35
|
<div
|
|
39
36
|
className={classnames(
|
|
40
|
-
|
|
41
|
-
utilityClass.replace(
|
|
37
|
+
'w-[100px] h-[100px] border border-purple-500',
|
|
38
|
+
utilityClass.replace('-DEFAULT', ''),
|
|
42
39
|
)}
|
|
43
40
|
/>
|
|
44
41
|
)}
|
|
45
|
-
isReversed={isReversed}
|
|
46
42
|
/>
|
|
47
43
|
)
|