@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.
Files changed (59) hide show
  1. package/dist/cjs/kz-spacing.cjs +2 -2
  2. package/dist/cjs/tailwind-presets.cjs +65 -65
  3. package/dist/esm/kz-spacing.mjs +2 -2
  4. package/dist/esm/tailwind-presets.mjs +65 -65
  5. package/dist/types/index.d.ts +1 -1
  6. package/dist/types/tailwind-presets.d.ts +1 -1
  7. package/package.json +6 -6
  8. package/src/_docs/pages/backgrounds/background-color.mdx +2 -2
  9. package/src/_docs/pages/backgrounds/background-color.stories.tsx +13 -20
  10. package/src/_docs/pages/borders/border-color.mdx +2 -2
  11. package/src/_docs/pages/borders/border-color.stories.tsx +14 -20
  12. package/src/_docs/pages/borders/border-radius.mdx +2 -2
  13. package/src/_docs/pages/borders/border-radius.stories.tsx +18 -22
  14. package/src/_docs/pages/borders/border-spacing.mdx +2 -2
  15. package/src/_docs/pages/borders/border-spacing.stories.tsx +15 -19
  16. package/src/_docs/pages/borders/border-width.mdx +8 -9
  17. package/src/_docs/pages/borders/border-width.stories.tsx +18 -22
  18. package/src/_docs/pages/configuration.mdx +18 -22
  19. package/src/_docs/pages/contributing.mdx +2 -2
  20. package/src/_docs/pages/effects/shadow.mdx +2 -2
  21. package/src/_docs/pages/effects/shadow.stories.tsx +17 -19
  22. package/src/_docs/pages/getting-started.mdx +9 -9
  23. package/src/_docs/pages/modifiers/media-queries.mdx +2 -2
  24. package/src/_docs/pages/modifiers/media-queries.stories.tsx +14 -24
  25. package/src/_docs/pages/modifiers/pseudo-states.mdx +5 -5
  26. package/src/_docs/pages/modifiers/pseudo-states.stories.tsx +10 -16
  27. package/src/_docs/pages/overview.mdx +6 -5
  28. package/src/_docs/pages/spacing/margin.mdx +7 -7
  29. package/src/_docs/pages/spacing/margin.stories.tsx +17 -22
  30. package/src/_docs/pages/spacing/padding.mdx +7 -7
  31. package/src/_docs/pages/spacing/padding.stories.tsx +17 -24
  32. package/src/_docs/pages/typography/font-family.mdx +2 -2
  33. package/src/_docs/pages/typography/font-family.stories.tsx +15 -19
  34. package/src/_docs/pages/typography/font-size.mdx +2 -2
  35. package/src/_docs/pages/typography/font-size.stories.tsx +11 -12
  36. package/src/_docs/pages/typography/font-weight.mdx +2 -2
  37. package/src/_docs/pages/typography/font-weight.stories.tsx +15 -19
  38. package/src/_docs/pages/typography/line-height.mdx +2 -2
  39. package/src/_docs/pages/typography/line-height.stories.tsx +17 -23
  40. package/src/_docs/pages/typography/max-text-width.mdx +2 -2
  41. package/src/_docs/pages/typography/max-text-width.stories.tsx +25 -29
  42. package/src/_docs/pages/typography/text-color.mdx +2 -2
  43. package/src/_docs/pages/typography/text-color.stories.tsx +16 -17
  44. package/src/_docs/pages/utility-class-helpers-overview.mdx +24 -23
  45. package/src/_docs/pages/working-with-tailwind.mdx +11 -7
  46. package/src/_docs/pages/working-with-tailwind.stories.tsx +12 -21
  47. package/src/_docs/utils/TailwindStoryTemplate/TailwindStoryTemplate.tsx +52 -42
  48. package/src/_docs/utils/TailwindStoryTemplate/components/CardContent/CardContent.tsx +5 -8
  49. package/src/_docs/utils/TailwindStoryTemplate/components/CardContent/index.ts +1 -1
  50. package/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/CodeSnippet.tsx +3 -3
  51. package/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/index.ts +1 -1
  52. package/src/_docs/utils/TailwindStoryTemplate/index.ts +1 -1
  53. package/src/_docs/utils/flattenEntries.ts +12 -13
  54. package/src/_docs/utils/utilityDescription.ts +1 -4
  55. package/src/index.ts +1 -1
  56. package/src/kz-height.ts +10 -10
  57. package/src/kz-spacing.spec.ts +24 -24
  58. package/src/kz-spacing.ts +21 -22
  59. package/src/tailwind-presets.ts +68 -68
package/src/tailwind-presets.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { CustomThemeConfig } from "tailwindcss/types/config"
2
- import { tokens } from "@kaizen/design-tokens/js"
3
- import { kzSpacing } from "./kz-spacing"
1
+ import { CustomThemeConfig } from 'tailwindcss/types/config'
2
+ import { tokens } from '@kaizen/design-tokens/js'
3
+ import { kzSpacing } from './kz-spacing'
4
4
 
5
5
  export type KaizenTailwindTheme = Partial<CustomThemeConfig>
6
6
  export type KaizenTailwindPreset = {
@@ -11,98 +11,98 @@ export type KaizenTailwindPreset = {
11
11
  export const kaizenTailwindTheme: KaizenTailwindTheme = {
12
12
  extend: {
13
13
  maxWidth: {
14
- paragraph: `${tokens.typography.paragraphBody.maxWidth}`,
15
- "paragraph-lede": `${tokens.typography.paragraphIntroLede.maxWidth}`,
16
- "paragraph-sm": `${tokens.typography.paragraphSmall.maxWidth}`,
17
- "paragraph-xs": `${tokens.typography.paragraphExtraSmall.maxWidth}`,
14
+ 'paragraph': `${tokens.typography.paragraphBody.maxWidth}`,
15
+ 'paragraph-lede': `${tokens.typography.paragraphIntroLede.maxWidth}`,
16
+ 'paragraph-sm': `${tokens.typography.paragraphSmall.maxWidth}`,
17
+ 'paragraph-xs': `${tokens.typography.paragraphExtraSmall.maxWidth}`,
18
18
  },
19
19
  },
20
20
  colors: {
21
- transparent: "transparent",
22
- current: "currentColor",
23
- inherit: "inherit",
21
+ transparent: 'transparent',
22
+ current: 'currentColor',
23
+ inherit: 'inherit',
24
24
  ...tokens.color,
25
25
  ...tokens.dataViz,
26
26
  },
27
27
  spacing: kzSpacing,
28
28
  boxShadow: {
29
- none: "none",
29
+ none: 'none',
30
30
  sm: tokens.shadow.small.boxShadow,
31
31
  lg: tokens.shadow.large.boxShadow,
32
32
  },
33
33
  borderRadius: {
34
- DEFAULT: "7px",
35
- default: "7px",
36
- none: "0px",
37
- "focus-ring": "10px",
38
- full: "100%",
34
+ 'DEFAULT': '7px',
35
+ 'default': '7px',
36
+ 'none': '0px',
37
+ 'focus-ring': '10px',
38
+ 'full': '100%',
39
39
  },
40
40
  borderWidth: {
41
- DEFAULT: "2px",
42
- default: "2px",
43
- none: "0px",
44
- 1: "1px",
45
- "focus-ring": "2px",
41
+ 'DEFAULT': '2px',
42
+ 'default': '2px',
43
+ 'none': '0px',
44
+ 1: '1px',
45
+ 'focus-ring': '2px',
46
46
  },
47
47
  borderColor: {
48
- "default-color": `${tokens.border.solid.borderColor}`,
49
- transparent: `${tokens.border.borderless.borderColor}`,
50
- "focus-ring": tokens.color.blue[600],
48
+ 'default-color': `${tokens.border.solid.borderColor}`,
49
+ 'transparent': `${tokens.border.borderless.borderColor}`,
50
+ 'focus-ring': tokens.color.blue[600],
51
51
  ...tokens.color,
52
52
  },
53
53
  fontFamily: {
54
- "family-paragraph": [`${tokens.typography.paragraphBody.fontFamily}`],
55
- "family-heading": [`${tokens.typography.heading1.fontFamily}`],
56
- "family-data": [`${tokens.typography.dataLarge.fontFamily}`],
57
- "family-display": [`${tokens.typography.display0.fontFamily}`],
54
+ 'family-paragraph': [`${tokens.typography.paragraphBody.fontFamily}`],
55
+ 'family-heading': [`${tokens.typography.heading1.fontFamily}`],
56
+ 'family-data': [`${tokens.typography.dataLarge.fontFamily}`],
57
+ 'family-display': [`${tokens.typography.display0.fontFamily}`],
58
58
  },
59
59
  fontSize: {
60
- display: `${tokens.typography.display0.fontSize}`,
61
- "heading-1": `${tokens.typography.heading1.fontSize}`,
62
- "heading-2": `${tokens.typography.heading2.fontSize}`,
63
- "heading-3": `${tokens.typography.heading3.fontSize}`,
64
- "heading-4": `${tokens.typography.heading4.fontSize}`,
65
- "heading-5": `${tokens.typography.heading5.fontSize}`,
66
- "heading-6": `${tokens.typography.heading6.fontSize}`,
67
- paragraph: `${tokens.typography.paragraphBody.fontSize}`,
68
- "paragraph-lede": `${tokens.typography.paragraphIntroLede.fontSize}`,
69
- "paragraph-sm": `${tokens.typography.paragraphSmall.fontSize}`,
70
- "paragraph-xs": `${tokens.typography.paragraphExtraSmall.fontSize}`,
71
- "data-lg": `${tokens.typography.dataLarge.fontSize}`,
72
- "data-md": `${tokens.typography.dataMedium.fontSize}`,
73
- "data-sm": `${tokens.typography.dataSmall.fontSize}`,
74
- "data-units-lg": `${tokens.typography.dataLargeUnits.fontSize}`,
75
- "data-units-md": `${tokens.typography.dataMediumUnits.fontSize}`,
76
- "data-units-sm": `${tokens.typography.dataSmallUnits.fontSize}`,
60
+ 'display': `${tokens.typography.display0.fontSize}`,
61
+ 'heading-1': `${tokens.typography.heading1.fontSize}`,
62
+ 'heading-2': `${tokens.typography.heading2.fontSize}`,
63
+ 'heading-3': `${tokens.typography.heading3.fontSize}`,
64
+ 'heading-4': `${tokens.typography.heading4.fontSize}`,
65
+ 'heading-5': `${tokens.typography.heading5.fontSize}`,
66
+ 'heading-6': `${tokens.typography.heading6.fontSize}`,
67
+ 'paragraph': `${tokens.typography.paragraphBody.fontSize}`,
68
+ 'paragraph-lede': `${tokens.typography.paragraphIntroLede.fontSize}`,
69
+ 'paragraph-sm': `${tokens.typography.paragraphSmall.fontSize}`,
70
+ 'paragraph-xs': `${tokens.typography.paragraphExtraSmall.fontSize}`,
71
+ 'data-lg': `${tokens.typography.dataLarge.fontSize}`,
72
+ 'data-md': `${tokens.typography.dataMedium.fontSize}`,
73
+ 'data-sm': `${tokens.typography.dataSmall.fontSize}`,
74
+ 'data-units-lg': `${tokens.typography.dataLargeUnits.fontSize}`,
75
+ 'data-units-md': `${tokens.typography.dataMediumUnits.fontSize}`,
76
+ 'data-units-sm': `${tokens.typography.dataSmallUnits.fontSize}`,
77
77
  },
78
78
  fontWeight: {
79
- "weight-paragraph": "400",
80
- "weight-paragraph-bold": "600",
81
- "weight-data": "700",
82
- "weight-heading": "700",
83
- "weight-display": "800",
79
+ 'weight-paragraph': '400',
80
+ 'weight-paragraph-bold': '600',
81
+ 'weight-data': '700',
82
+ 'weight-heading': '700',
83
+ 'weight-display': '800',
84
84
  },
85
85
  lineHeight: {
86
- display: `${tokens.typography.display0.lineHeight}`,
87
- "heading-1": `${tokens.typography.heading1.lineHeight}`,
88
- "heading-2": `${tokens.typography.heading2.lineHeight}`,
89
- "heading-3": `${tokens.typography.heading3.lineHeight}`,
90
- "heading-4": `${tokens.typography.heading4.lineHeight}`,
91
- "heading-5": `${tokens.typography.heading5.lineHeight}`,
92
- "heading-6": `${tokens.typography.heading6.lineHeight}`,
93
- paragraph: `${tokens.typography.paragraphBody.lineHeight}`,
94
- "paragraph-lede": `${tokens.typography.paragraphIntroLede.lineHeight}`,
95
- "paragraph-sm": `${tokens.typography.paragraphSmall.lineHeight}`,
96
- "paragraph-xs": `${tokens.typography.paragraphExtraSmall.lineHeight}`,
97
- "data-lg": `${tokens.typography.dataLarge.lineHeight}`,
98
- "data-md": `${tokens.typography.dataMedium.lineHeight}`,
99
- "data-sm": `${tokens.typography.dataSmall.lineHeight}`,
100
- "data-units-lg": `${tokens.typography.dataLargeUnits.lineHeight}`,
101
- "data-units-md": `${tokens.typography.dataMediumUnits.lineHeight}`,
102
- "data-units-sm": `${tokens.typography.dataSmallUnits.lineHeight}`,
86
+ 'display': `${tokens.typography.display0.lineHeight}`,
87
+ 'heading-1': `${tokens.typography.heading1.lineHeight}`,
88
+ 'heading-2': `${tokens.typography.heading2.lineHeight}`,
89
+ 'heading-3': `${tokens.typography.heading3.lineHeight}`,
90
+ 'heading-4': `${tokens.typography.heading4.lineHeight}`,
91
+ 'heading-5': `${tokens.typography.heading5.lineHeight}`,
92
+ 'heading-6': `${tokens.typography.heading6.lineHeight}`,
93
+ 'paragraph': `${tokens.typography.paragraphBody.lineHeight}`,
94
+ 'paragraph-lede': `${tokens.typography.paragraphIntroLede.lineHeight}`,
95
+ 'paragraph-sm': `${tokens.typography.paragraphSmall.lineHeight}`,
96
+ 'paragraph-xs': `${tokens.typography.paragraphExtraSmall.lineHeight}`,
97
+ 'data-lg': `${tokens.typography.dataLarge.lineHeight}`,
98
+ 'data-md': `${tokens.typography.dataMedium.lineHeight}`,
99
+ 'data-sm': `${tokens.typography.dataSmall.lineHeight}`,
100
+ 'data-units-lg': `${tokens.typography.dataLargeUnits.lineHeight}`,
101
+ 'data-units-md': `${tokens.typography.dataMediumUnits.lineHeight}`,
102
+ 'data-units-sm': `${tokens.typography.dataSmallUnits.lineHeight}`,
103
103
  },
104
104
  letterSpacing: {
105
- "letter-spacing-normal": "normal",
105
+ 'letter-spacing-normal': 'normal',
106
106
  },
107
107
  // A mix of layout styles
108
108
  screens: {