@latte-macchiat-io/latte-vanilla-components 0.0.191 → 0.0.192

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 (99) hide show
  1. package/package.json +4 -1
  2. package/src/components/Actions/index.tsx +20 -0
  3. package/src/components/Actions/styles.css.ts +54 -0
  4. package/src/components/Button/index.tsx +29 -0
  5. package/src/components/Button/stories.tsx +4 -22
  6. package/src/components/Button/styles.css.ts +131 -0
  7. package/src/components/Carousel/{Carousel.tsx → index.tsx} +18 -115
  8. package/src/components/Carousel/styles.css.ts +176 -0
  9. package/src/components/Columns/index.tsx +36 -0
  10. package/src/components/Columns/styles.css.ts +70 -0
  11. package/src/components/ConsentCookie/ConsentCookie.css.ts +1 -1
  12. package/src/components/ConsentCookie/ConsentCookie.tsx +3 -3
  13. package/src/components/Footer/index.tsx +21 -0
  14. package/src/components/Footer/styles.css.ts +33 -0
  15. package/src/components/Form/Form.css.ts +1 -1
  16. package/src/components/Form/Row/Row.css.ts +1 -1
  17. package/src/components/Form/TextField/Input/Input.css.ts +1 -1
  18. package/src/components/Form/TextField/Label/Label.css.ts +1 -1
  19. package/src/components/Form/TextField/TextField.css.ts +1 -1
  20. package/src/components/Form/TextField/Textarea/Textarea.css.ts +1 -1
  21. package/src/components/Header/index.tsx +53 -0
  22. package/src/components/Header/styles.css.ts +89 -0
  23. package/src/components/Heading/index.tsx +22 -0
  24. package/src/components/Heading/styles.css.ts +66 -0
  25. package/src/components/Heading/types.tsx +1 -0
  26. package/src/components/Icon/index.tsx +25 -0
  27. package/src/components/Icon/style.css.ts +11 -0
  28. package/src/components/KeyNumber/index.tsx +51 -0
  29. package/src/components/KeyNumber/styles.css.ts +76 -0
  30. package/src/components/LanguageSwitcher/index.tsx +80 -0
  31. package/src/components/LanguageSwitcher/{LanguageSwitcher.css.ts → styles.css.ts} +1 -1
  32. package/src/components/Logo/index.tsx +13 -0
  33. package/src/components/Logo/styles.css.ts +14 -0
  34. package/src/components/Main/index.tsx +17 -0
  35. package/src/components/Main/styles.css.ts +14 -0
  36. package/src/components/Modal/index.tsx +42 -0
  37. package/src/components/Modal/stories.tsx +14 -358
  38. package/src/components/Modal/styles.css.ts +90 -0
  39. package/src/components/Nav/index.tsx +22 -0
  40. package/src/components/Nav/styles.css.ts +30 -0
  41. package/src/components/NavLegal/index.tsx +17 -0
  42. package/src/components/NavLegal/styles.css.ts +20 -0
  43. package/src/components/NavSocial/index.tsx +32 -0
  44. package/src/components/NavSocial/styles.css.ts +33 -0
  45. package/src/components/Section/index.tsx +20 -0
  46. package/src/components/Section/stories.tsx +5 -57
  47. package/src/components/Section/styles.css.ts +106 -0
  48. package/src/components/ThemeTest/ThemeTest.css.ts +11 -0
  49. package/src/components/ThemeTest/ThemeTest.tsx +12 -0
  50. package/src/components/ThemeToggle/ThemeToggle.tsx +30 -0
  51. package/src/components/Video/index.tsx +117 -0
  52. package/src/components/Video/styles.css.ts +200 -0
  53. package/src/index.ts +29 -41
  54. package/src/styles/mediaqueries.ts +2 -0
  55. package/src/styles/sprinkles.css.ts +11 -8
  56. package/src/theme/baseThemeValues.ts +1235 -0
  57. package/src/theme/contract.css.ts +676 -0
  58. package/src/{themes → theme}/createTheme.ts +40 -1
  59. package/src/theme/default.css.ts +10 -0
  60. package/src/utils/combineResponsive.ts +9 -0
  61. package/src/utils/generateResponsiveMedia.ts +19 -0
  62. package/src/components/Actions/Actions.css.ts +0 -113
  63. package/src/components/Actions/Actions.tsx +0 -132
  64. package/src/components/Button/Button.css.ts +0 -119
  65. package/src/components/Button/Button.tsx +0 -132
  66. package/src/components/Carousel/Carousel.css.ts +0 -179
  67. package/src/components/Columns/Columns.css.ts +0 -185
  68. package/src/components/Columns/Columns.tsx +0 -142
  69. package/src/components/Footer/Footer.css.ts +0 -108
  70. package/src/components/Footer/Footer.tsx +0 -130
  71. package/src/components/Header/Header.css.ts +0 -111
  72. package/src/components/Header/Header.tsx +0 -158
  73. package/src/components/Icon/Icon.css.ts +0 -101
  74. package/src/components/Icon/Icon.tsx +0 -159
  75. package/src/components/KeyNumber/KeyNumber.css.ts +0 -158
  76. package/src/components/KeyNumber/KeyNumber.tsx +0 -166
  77. package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +0 -168
  78. package/src/components/Logo/Logo.css.ts +0 -98
  79. package/src/components/Logo/Logo.tsx +0 -137
  80. package/src/components/Main/Main.css.ts +0 -62
  81. package/src/components/Main/Main.tsx +0 -130
  82. package/src/components/Modal/Modal.css.ts +0 -203
  83. package/src/components/Modal/Modal.tsx +0 -194
  84. package/src/components/Nav/Nav.css.ts +0 -123
  85. package/src/components/Nav/Nav.tsx +0 -130
  86. package/src/components/NavLegal/NavLegal.css.ts +0 -121
  87. package/src/components/NavLegal/NavLegal.tsx +0 -133
  88. package/src/components/NavSocial/NavSocial.css.ts +0 -121
  89. package/src/components/NavSocial/NavSocial.tsx +0 -169
  90. package/src/components/Section/Section.css.ts +0 -101
  91. package/src/components/Section/Section.tsx +0 -130
  92. package/src/components/Video/Video.css.ts +0 -210
  93. package/src/components/Video/Video.tsx +0 -243
  94. package/src/components/VideoFullWidth/VideoFullWidth.css.ts +0 -50
  95. package/src/components/VideoFullWidth/VideoFullWidth.tsx +0 -152
  96. package/src/components/VideoFullWidth/export.tsx +0 -2
  97. package/src/themes/baseThemeValues.ts +0 -160
  98. package/src/themes/contract.css.ts +0 -83
  99. package/src/types/withClassName.ts +0 -4
@@ -1,243 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef, useEffect, useRef, useState } from 'react';
3
- import {
4
- closeButton,
5
- pauseButton,
6
- playButton,
7
- posterImage,
8
- soundButton,
9
- videoElement,
10
- videoPoster,
11
- videoRecipe,
12
- type VideoVariants,
13
- } from './Video.css';
14
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
15
- import { Icon } from '../Icon/Icon';
16
-
17
- export interface VideoProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<VideoVariants> {
18
- css?: string;
19
- video: string;
20
- poster?: string;
21
- isAutoPlay?: boolean;
22
- startMuted?: boolean;
23
- showControls?: boolean;
24
- hidePlayButton?: boolean;
25
- isVideoFullWidth?: boolean;
26
- isPlayingFullScreen?: boolean;
27
- onPlay?: () => void;
28
- onClose?: () => void;
29
- onEnded?: () => void;
30
- }
31
-
32
- export const Video = forwardRef<HTMLDivElement, VideoProps>(
33
- (
34
- {
35
- video,
36
- poster,
37
- isAutoPlay = false,
38
- startMuted = false,
39
- showControls = false,
40
- hidePlayButton = false,
41
- isVideoFullWidth = false,
42
- isPlayingFullScreen = false,
43
- onPlay,
44
- onClose,
45
- onEnded,
46
- size,
47
- aspectRatio,
48
- css,
49
- className,
50
- // Extract sprinkles props
51
- margin,
52
- marginTop,
53
- marginBottom,
54
- marginLeft,
55
- marginRight,
56
- padding,
57
- paddingTop,
58
- paddingBottom,
59
- paddingLeft,
60
- paddingRight,
61
- gap,
62
- display,
63
- flexDirection,
64
- justifyContent,
65
- flexWrap,
66
- flex,
67
- width,
68
- height,
69
- minWidth,
70
- maxWidth,
71
- minHeight,
72
- position,
73
- top,
74
- bottom,
75
- left,
76
- right,
77
- zIndex,
78
- fontSize,
79
- fontFamily,
80
- lineHeight,
81
- textAlign,
82
- fontWeight,
83
- color,
84
- backgroundColor,
85
- borderRadius,
86
- borderWidth,
87
- borderStyle,
88
- borderColor,
89
- boxShadow,
90
- opacity,
91
- overflow,
92
- overflowX,
93
- overflowY,
94
- ...htmlProps
95
- },
96
- ref
97
- ) => {
98
- const videoRef = useRef<HTMLVideoElement>(null);
99
- const [isPlaying, setIsPlaying] = useState(false);
100
- const [isMuted, setIsMuted] = useState(isAutoPlay || startMuted);
101
-
102
- const playVideo = () => {
103
- if (onPlay) onPlay();
104
- videoRef.current?.play();
105
- setIsPlaying(true);
106
- };
107
-
108
- const closeVideo = () => {
109
- if (onClose) onClose();
110
- videoRef.current?.pause();
111
- setIsPlaying(false);
112
- };
113
-
114
- const pauseVideo = () => {
115
- videoRef.current?.pause();
116
- setIsPlaying(false);
117
- };
118
-
119
- const toggleMutedVideo = () => {
120
- const newIsMuted = !isMuted;
121
- setIsMuted(newIsMuted);
122
- if (videoRef.current) videoRef.current.muted = newIsMuted;
123
- };
124
-
125
- const handleVideoEnded = () => {
126
- if (onEnded) onEnded();
127
- closeVideo();
128
- };
129
-
130
- const onEscape = (event: KeyboardEvent) => {
131
- if (event.key === 'Escape') closeVideo();
132
- };
133
-
134
- useEffect(() => {
135
- window.addEventListener('keydown', onEscape);
136
-
137
- return () => {
138
- window.removeEventListener('keydown', onEscape);
139
- };
140
- }, []);
141
-
142
- useEffect(() => {
143
- if (videoRef.current) {
144
- videoRef.current.muted = isMuted;
145
- }
146
- }, [isMuted]);
147
-
148
- return (
149
- <div
150
- ref={ref}
151
- className={clsx(
152
- videoRecipe({
153
- size: isVideoFullWidth ? 'fullWidth' : size,
154
- aspectRatio,
155
- }),
156
- sprinkles({
157
- margin,
158
- marginTop,
159
- marginBottom,
160
- marginLeft,
161
- marginRight,
162
- padding,
163
- paddingTop,
164
- paddingBottom,
165
- paddingLeft,
166
- paddingRight,
167
- gap,
168
- display,
169
- flexDirection,
170
- justifyContent,
171
- flexWrap,
172
- flex,
173
- width,
174
- height,
175
- minWidth,
176
- maxWidth,
177
- minHeight,
178
- position,
179
- top,
180
- bottom,
181
- left,
182
- right,
183
- zIndex,
184
- fontSize,
185
- fontFamily,
186
- lineHeight,
187
- textAlign,
188
- fontWeight,
189
- color,
190
- backgroundColor,
191
- borderRadius,
192
- borderWidth,
193
- borderStyle,
194
- borderColor,
195
- boxShadow,
196
- opacity,
197
- overflow,
198
- overflowX,
199
- overflowY,
200
- }),
201
- css,
202
- className
203
- )}
204
- {...htmlProps}>
205
- <video ref={videoRef} className={videoElement} playsInline muted={isMuted} autoPlay={isAutoPlay} onEnded={handleVideoEnded}>
206
- <source src={video} type="video/mp4" />
207
- </video>
208
-
209
- {poster && (
210
- <div className={videoPoster} data-playing={isPlaying}>
211
- <img src={poster} alt="Video poster" className={posterImage} sizes="2560" />
212
- </div>
213
- )}
214
-
215
- {!hidePlayButton && !isAutoPlay && (
216
- <button className={playButton} data-playing={isPlaying} onClick={playVideo} aria-label="Play video" type="button">
217
- <Icon icon="play" size="lg" />
218
- </button>
219
- )}
220
-
221
- {isPlayingFullScreen && (
222
- <button className={closeButton} onClick={closeVideo} aria-label="Close video" type="button">
223
- <Icon icon="close" size="md" />
224
- </button>
225
- )}
226
-
227
- {isPlaying && showControls && (
228
- <button className={pauseButton} onClick={pauseVideo} aria-label="Pause video" type="button">
229
- <Icon icon="pause" size="md" />
230
- </button>
231
- )}
232
-
233
- {showControls && (
234
- <button className={soundButton} onClick={toggleMutedVideo} aria-label={isMuted ? 'Unmute video' : 'Mute video'} type="button">
235
- <Icon icon={isMuted ? 'volumeMute' : 'volumeUp'} size="md" />
236
- </button>
237
- )}
238
- </div>
239
- );
240
- }
241
- );
242
-
243
- Video.displayName = 'Video';
@@ -1,50 +0,0 @@
1
- import { style } from '@vanilla-extract/css';
2
- import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../themes/contract.css';
4
-
5
- const videoFullWidthBase = style({
6
- height: 0,
7
- width: '100vw',
8
- overflow: 'hidden',
9
- position: 'relative',
10
- paddingBottom: '56.25%', // 16:9 aspect ratio
11
- backgroundColor: themeContract.colors.background,
12
-
13
- // Break out of container padding
14
- marginLeft: `calc(-50vw + 50%)`,
15
- marginRight: `calc(-50vw + 50%)`,
16
-
17
- '@media': {
18
- 'screen and (min-width: 768px)': {
19
- marginLeft: `calc(-50vw + 50%)`,
20
- marginRight: `calc(-50vw + 50%)`,
21
- },
22
- },
23
- });
24
-
25
- export const videoFullWidthRecipe = recipe({
26
- base: videoFullWidthBase,
27
-
28
- variants: {
29
- aspectRatio: {
30
- '16:9': {
31
- paddingBottom: '56.25%',
32
- },
33
- '4:3': {
34
- paddingBottom: '75%',
35
- },
36
- '1:1': {
37
- paddingBottom: '100%',
38
- },
39
- '21:9': {
40
- paddingBottom: '42.86%',
41
- },
42
- },
43
- },
44
-
45
- defaultVariants: {
46
- aspectRatio: '16:9',
47
- },
48
- });
49
-
50
- export type VideoFullWidthVariants = RecipeVariants<typeof videoFullWidthRecipe>;
@@ -1,152 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import { videoFullWidthRecipe, type VideoFullWidthVariants } from './VideoFullWidth.css';
4
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
5
- import { Video } from '../Video/Video';
6
-
7
- export interface VideoFullWidthProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<VideoFullWidthVariants> {
8
- css?: string;
9
- video: string;
10
- poster?: string;
11
- isAutoPlay?: boolean;
12
- startMuted?: boolean;
13
- showControls?: boolean;
14
- onPlay?: () => void;
15
- onClose?: () => void;
16
- onEnded?: () => void;
17
- }
18
-
19
- export const VideoFullWidth = forwardRef<HTMLDivElement, VideoFullWidthProps>(
20
- (
21
- {
22
- video,
23
- poster,
24
- isAutoPlay = false,
25
- startMuted = false,
26
- showControls = false,
27
- onPlay,
28
- onClose,
29
- onEnded,
30
- aspectRatio,
31
- css,
32
- className,
33
- // Extract sprinkles props
34
- margin,
35
- marginTop,
36
- marginBottom,
37
- marginLeft,
38
- marginRight,
39
- padding,
40
- paddingTop,
41
- paddingBottom,
42
- paddingLeft,
43
- paddingRight,
44
- gap,
45
- display,
46
- flexDirection,
47
- justifyContent,
48
- flexWrap,
49
- flex,
50
- width,
51
- height,
52
- minWidth,
53
- maxWidth,
54
- minHeight,
55
- position,
56
- top,
57
- bottom,
58
- left,
59
- right,
60
- zIndex,
61
- fontSize,
62
- fontFamily,
63
- lineHeight,
64
- textAlign,
65
- fontWeight,
66
- color,
67
- backgroundColor,
68
- borderRadius,
69
- borderWidth,
70
- borderStyle,
71
- borderColor,
72
- boxShadow,
73
- opacity,
74
- overflow,
75
- overflowX,
76
- overflowY,
77
- ...htmlProps
78
- },
79
- ref
80
- ) => {
81
- return (
82
- <div
83
- ref={ref}
84
- className={clsx(
85
- videoFullWidthRecipe({ aspectRatio }),
86
- sprinkles({
87
- margin,
88
- marginTop,
89
- marginBottom,
90
- marginLeft,
91
- marginRight,
92
- padding,
93
- paddingTop,
94
- paddingBottom,
95
- paddingLeft,
96
- paddingRight,
97
- gap,
98
- display,
99
- flexDirection,
100
- justifyContent,
101
- flexWrap,
102
- flex,
103
- width,
104
- height,
105
- minWidth,
106
- maxWidth,
107
- minHeight,
108
- position,
109
- top,
110
- bottom,
111
- left,
112
- right,
113
- zIndex,
114
- fontSize,
115
- fontFamily,
116
- lineHeight,
117
- textAlign,
118
- fontWeight,
119
- color,
120
- backgroundColor,
121
- borderRadius,
122
- borderWidth,
123
- borderStyle,
124
- borderColor,
125
- boxShadow,
126
- opacity,
127
- overflow,
128
- overflowX,
129
- overflowY,
130
- }),
131
- css,
132
- className
133
- )}
134
- {...htmlProps}>
135
- <Video
136
- video={video}
137
- poster={poster}
138
- isAutoPlay={isAutoPlay}
139
- startMuted={startMuted}
140
- showControls={showControls}
141
- onPlay={onPlay}
142
- onClose={onClose}
143
- onEnded={onEnded}
144
- isVideoFullWidth
145
- size="fullWidth"
146
- />
147
- </div>
148
- );
149
- }
150
- );
151
-
152
- VideoFullWidth.displayName = 'VideoFullWidth';
@@ -1,2 +0,0 @@
1
- // export { VideoFullWidth } from './VideoFullWidth';
2
- // export type { VideoFullWidthProps } from './VideoFullWidth';
@@ -1,160 +0,0 @@
1
- // Base theme values that can be imported and extended by apps
2
- export const baseLightTheme = {
3
- colors: {
4
- primary: '#FF7377',
5
- secondary: '#FCEFE6',
6
- accent: '#FF7377',
7
- background: '#ffffff',
8
- surface: '#f8f9fa',
9
- text: '#000000',
10
- textSecondary: '#666666',
11
- textLight: '#f5f5f5',
12
- border: '#e1e1e1',
13
- error: '#dc3545',
14
- warning: '#ffc107',
15
- success: '#28a745',
16
- info: '#17a2b8',
17
- },
18
- space: {
19
- none: '0px',
20
- xs: '4px',
21
- sm: '8px',
22
- md: '16px',
23
- lg: '32px',
24
- xl: '64px',
25
- '2xl': '128px',
26
- },
27
- radii: {
28
- none: '0px',
29
- sm: '4px',
30
- md: '8px',
31
- lg: '16px',
32
- xl: '24px',
33
- full: '9999px',
34
- },
35
- fonts: {
36
- body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
37
- heading: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
38
- mono: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace',
39
- },
40
- fontSizes: {
41
- xs: '12px',
42
- sm: '14px',
43
- md: '16px',
44
- lg: '18px',
45
- xl: '20px',
46
- '2xl': '24px',
47
- '3xl': '32px',
48
- '4xl': '40px',
49
- },
50
- fontWeights: {
51
- light: '300',
52
- normal: '400',
53
- medium: '500',
54
- semibold: '600',
55
- bold: '700',
56
- },
57
- lineHeights: {
58
- tight: '1.2',
59
- normal: '1.5',
60
- relaxed: '1.75',
61
- },
62
- shadows: {
63
- none: 'none',
64
- sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
65
- md: '0 4px 6px rgba(0, 0, 0, 0.1)',
66
- lg: '0 10px 15px rgba(0, 0, 0, 0.1)',
67
- xl: '0 20px 25px rgba(0, 0, 0, 0.1)',
68
- },
69
- maxWidth: '1500px',
70
- section: {
71
- paddingTop: '48px',
72
- paddingBottom: '48px',
73
- },
74
- header: {
75
- height: '80px',
76
- },
77
- footer: {
78
- height: '80px',
79
- },
80
- };
81
-
82
- export const baseDarkTheme = {
83
- colors: {
84
- primary: '#1a73e8',
85
- secondary: '#374151',
86
- accent: '#60a5fa',
87
- background: '#111827',
88
- surface: '#1f2937',
89
- text: '#ffffff',
90
- textSecondary: '#9ca3af',
91
- textLight: '#f3f4f6',
92
- border: '#374151',
93
- error: '#ef4444',
94
- warning: '#f59e0b',
95
- success: '#10b981',
96
- info: '#3b82f6',
97
- },
98
- space: {
99
- none: '0px',
100
- xs: '4px',
101
- sm: '8px',
102
- md: '16px',
103
- lg: '32px',
104
- xl: '64px',
105
- '2xl': '128px',
106
- },
107
- radii: {
108
- none: '0px',
109
- sm: '4px',
110
- md: '8px',
111
- lg: '16px',
112
- xl: '24px',
113
- full: '9999px',
114
- },
115
- fonts: {
116
- body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
117
- heading: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
118
- mono: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace',
119
- },
120
- fontSizes: {
121
- xs: '12px',
122
- sm: '14px',
123
- md: '16px',
124
- lg: '18px',
125
- xl: '20px',
126
- '2xl': '24px',
127
- '3xl': '32px',
128
- '4xl': '40px',
129
- },
130
- fontWeights: {
131
- light: '300',
132
- normal: '400',
133
- medium: '500',
134
- semibold: '600',
135
- bold: '700',
136
- },
137
- lineHeights: {
138
- tight: '1.2',
139
- normal: '1.5',
140
- relaxed: '1.75',
141
- },
142
- shadows: {
143
- none: 'none',
144
- sm: '0 1px 2px rgba(0, 0, 0, 0.1)',
145
- md: '0 4px 6px rgba(0, 0, 0, 0.15)',
146
- lg: '0 10px 15px rgba(0, 0, 0, 0.2)',
147
- xl: '0 20px 25px rgba(0, 0, 0, 0.25)',
148
- },
149
- maxWidth: '1500px',
150
- section: {
151
- paddingTop: '48px',
152
- paddingBottom: '48px',
153
- },
154
- header: {
155
- height: '80px',
156
- },
157
- footer: {
158
- height: '80px',
159
- },
160
- };
@@ -1,83 +0,0 @@
1
- import { createGlobalThemeContract } from '@vanilla-extract/css';
2
-
3
- // Define a theme contract with design tokens using createGlobalThemeContract
4
- // This enables predictable CSS variable names for external consumption and runtime overrides
5
- export const themeContract = createGlobalThemeContract({
6
- colors: {
7
- primary: 'latte-colors-primary',
8
- secondary: 'latte-colors-secondary',
9
- accent: 'latte-colors-accent',
10
- background: 'latte-colors-background',
11
- surface: 'latte-colors-surface',
12
- text: 'latte-colors-text',
13
- textSecondary: 'latte-colors-textSecondary',
14
- textLight: 'latte-colors-textLight',
15
- border: 'latte-colors-border',
16
- error: 'latte-colors-error',
17
- warning: 'latte-colors-warning',
18
- success: 'latte-colors-success',
19
- info: 'latte-colors-info',
20
- },
21
- space: {
22
- none: 'latte-space-none',
23
- xs: 'latte-space-xs',
24
- sm: 'latte-space-sm',
25
- md: 'latte-space-md',
26
- lg: 'latte-space-lg',
27
- xl: 'latte-space-xl',
28
- '2xl': 'latte-space-2xl',
29
- },
30
- radii: {
31
- none: 'latte-radii-none',
32
- sm: 'latte-radii-sm',
33
- md: 'latte-radii-md',
34
- lg: 'latte-radii-lg',
35
- xl: 'latte-radii-xl',
36
- full: 'latte-radii-full',
37
- },
38
- fonts: {
39
- body: 'latte-fonts-body',
40
- heading: 'latte-fonts-heading',
41
- mono: 'latte-fonts-mono',
42
- },
43
- fontSizes: {
44
- xs: 'latte-fontSizes-xs',
45
- sm: 'latte-fontSizes-sm',
46
- md: 'latte-fontSizes-md',
47
- lg: 'latte-fontSizes-lg',
48
- xl: 'latte-fontSizes-xl',
49
- '2xl': 'latte-fontSizes-2xl',
50
- '3xl': 'latte-fontSizes-3xl',
51
- '4xl': 'latte-fontSizes-4xl',
52
- },
53
- fontWeights: {
54
- light: 'latte-fontWeights-light',
55
- normal: 'latte-fontWeights-normal',
56
- medium: 'latte-fontWeights-medium',
57
- semibold: 'latte-fontWeights-semibold',
58
- bold: 'latte-fontWeights-bold',
59
- },
60
- lineHeights: {
61
- tight: 'latte-lineHeights-tight',
62
- normal: 'latte-lineHeights-normal',
63
- relaxed: 'latte-lineHeights-relaxed',
64
- },
65
- shadows: {
66
- none: 'latte-shadows-none',
67
- sm: 'latte-shadows-sm',
68
- md: 'latte-shadows-md',
69
- lg: 'latte-shadows-lg',
70
- xl: 'latte-shadows-xl',
71
- },
72
- maxWidth: 'latte-maxWidth',
73
- section: {
74
- paddingTop: 'latte-section-paddingTop',
75
- paddingBottom: 'latte-section-paddingBottom',
76
- },
77
- header: {
78
- height: 'latte-header-height',
79
- },
80
- footer: {
81
- height: 'latte-footer-height',
82
- },
83
- });
@@ -1,4 +0,0 @@
1
- // TODO Could be removed and replaced by `React.HTMLAttributes<HTMLElement>` in most cases
2
- export type WithClassName = {
3
- className: string;
4
- };