@latte-macchiat-io/latte-vanilla-components 0.0.191 → 0.0.193
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/package.json +4 -1
- package/src/components/Actions/index.tsx +20 -0
- package/src/components/Actions/styles.css.ts +54 -0
- package/src/components/Button/index.tsx +29 -0
- package/src/components/Button/stories.tsx +4 -22
- package/src/components/Button/styles.css.ts +131 -0
- package/src/components/Carousel/{Carousel.tsx → index.tsx} +18 -115
- package/src/components/Carousel/styles.css.ts +176 -0
- package/src/components/Columns/index.tsx +36 -0
- package/src/components/Columns/styles.css.ts +70 -0
- package/src/components/ConsentCookie/ConsentCookie.css.ts +1 -1
- package/src/components/ConsentCookie/ConsentCookie.tsx +3 -3
- package/src/components/Footer/index.tsx +21 -0
- package/src/components/Footer/styles.css.ts +33 -0
- package/src/components/Form/Form.css.ts +1 -1
- package/src/components/Form/Row/Row.css.ts +1 -1
- package/src/components/Form/TextField/Input/Input.css.ts +1 -1
- package/src/components/Form/TextField/Label/Label.css.ts +1 -1
- package/src/components/Form/TextField/TextField.css.ts +1 -1
- package/src/components/Form/TextField/Textarea/Textarea.css.ts +1 -1
- package/src/components/Header/index.tsx +53 -0
- package/src/components/Header/styles.css.ts +89 -0
- package/src/components/Heading/index.tsx +22 -0
- package/src/components/Heading/styles.css.ts +66 -0
- package/src/components/Heading/types.tsx +1 -0
- package/src/components/Icon/index.tsx +25 -0
- package/src/components/Icon/style.css.ts +11 -0
- package/src/components/KeyNumber/index.tsx +51 -0
- package/src/components/KeyNumber/styles.css.ts +76 -0
- package/src/components/LanguageSwitcher/index.tsx +80 -0
- package/src/components/LanguageSwitcher/{LanguageSwitcher.css.ts → styles.css.ts} +1 -1
- package/src/components/Logo/index.tsx +13 -0
- package/src/components/Logo/styles.css.ts +14 -0
- package/src/components/Main/index.tsx +17 -0
- package/src/components/Main/styles.css.ts +14 -0
- package/src/components/Modal/index.tsx +42 -0
- package/src/components/Modal/stories.tsx +14 -358
- package/src/components/Modal/styles.css.ts +90 -0
- package/src/components/Nav/index.tsx +22 -0
- package/src/components/Nav/styles.css.ts +30 -0
- package/src/components/NavLegal/index.tsx +17 -0
- package/src/components/NavLegal/styles.css.ts +20 -0
- package/src/components/NavSocial/index.tsx +32 -0
- package/src/components/NavSocial/styles.css.ts +33 -0
- package/src/components/Section/index.tsx +20 -0
- package/src/components/Section/stories.tsx +5 -57
- package/src/components/Section/styles.css.ts +106 -0
- package/src/components/ThemeTest/ThemeTest.css.ts +11 -0
- package/src/components/ThemeTest/ThemeTest.tsx +12 -0
- package/src/components/ThemeToggle/ThemeToggle.tsx +30 -0
- package/src/components/Video/index.tsx +117 -0
- package/src/components/Video/styles.css.ts +200 -0
- package/src/index.ts +31 -41
- package/src/styles/mediaqueries.ts +2 -0
- package/src/styles/sprinkles.css.ts +11 -8
- package/src/theme/baseThemeValues.ts +1235 -0
- package/src/theme/contract.css.ts +676 -0
- package/src/{themes → theme}/createTheme.ts +40 -1
- package/src/theme/default.css.ts +10 -0
- package/src/utils/combineResponsive.ts +9 -0
- package/src/utils/generateResponsiveMedia.ts +19 -0
- package/src/components/Actions/Actions.css.ts +0 -113
- package/src/components/Actions/Actions.tsx +0 -132
- package/src/components/Button/Button.css.ts +0 -119
- package/src/components/Button/Button.tsx +0 -132
- package/src/components/Carousel/Carousel.css.ts +0 -179
- package/src/components/Columns/Columns.css.ts +0 -185
- package/src/components/Columns/Columns.tsx +0 -142
- package/src/components/Footer/Footer.css.ts +0 -108
- package/src/components/Footer/Footer.tsx +0 -130
- package/src/components/Header/Header.css.ts +0 -111
- package/src/components/Header/Header.tsx +0 -158
- package/src/components/Icon/Icon.css.ts +0 -101
- package/src/components/Icon/Icon.tsx +0 -159
- package/src/components/KeyNumber/KeyNumber.css.ts +0 -158
- package/src/components/KeyNumber/KeyNumber.tsx +0 -166
- package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +0 -168
- package/src/components/Logo/Logo.css.ts +0 -98
- package/src/components/Logo/Logo.tsx +0 -137
- package/src/components/Main/Main.css.ts +0 -62
- package/src/components/Main/Main.tsx +0 -130
- package/src/components/Modal/Modal.css.ts +0 -203
- package/src/components/Modal/Modal.tsx +0 -194
- package/src/components/Nav/Nav.css.ts +0 -123
- package/src/components/Nav/Nav.tsx +0 -130
- package/src/components/NavLegal/NavLegal.css.ts +0 -121
- package/src/components/NavLegal/NavLegal.tsx +0 -133
- package/src/components/NavSocial/NavSocial.css.ts +0 -121
- package/src/components/NavSocial/NavSocial.tsx +0 -169
- package/src/components/Section/Section.css.ts +0 -101
- package/src/components/Section/Section.tsx +0 -130
- package/src/components/Video/Video.css.ts +0 -210
- package/src/components/Video/Video.tsx +0 -243
- package/src/components/VideoFullWidth/VideoFullWidth.css.ts +0 -50
- package/src/components/VideoFullWidth/VideoFullWidth.tsx +0 -152
- package/src/components/VideoFullWidth/export.tsx +0 -2
- package/src/themes/baseThemeValues.ts +0 -160
- package/src/themes/contract.css.ts +0 -83
- package/src/types/withClassName.ts +0 -4
package/src/index.ts
CHANGED
@@ -1,70 +1,60 @@
|
|
1
1
|
// Theme system - Import this first to apply global styles
|
2
|
-
export { themeContract } from './
|
3
|
-
export { baseLightTheme, baseDarkTheme } from './
|
4
|
-
export { createLightTheme, createDarkTheme, type ThemeOverrides } from './
|
2
|
+
export { themeContract } from './theme/contract.css';
|
3
|
+
export { baseLightTheme, baseDarkTheme } from './theme/baseThemeValues';
|
4
|
+
export { createLightTheme, createDarkTheme, type ThemeOverrides } from './theme/createTheme';
|
5
5
|
|
6
6
|
// Styles utilities (sprinkles, media queries, etc.)
|
7
|
-
export { sprinkles,
|
7
|
+
export { sprinkles, type Sprinkles } from './styles/sprinkles.css';
|
8
8
|
export { breakpoints, queries } from './styles/mediaqueries';
|
9
9
|
|
10
10
|
// Components
|
11
|
-
export { Button, type ButtonProps } from './components/Button/
|
12
|
-
export { type ButtonVariants } from './components/Button/
|
11
|
+
export { Button, type ButtonProps } from './components/Button/';
|
12
|
+
export { type ButtonVariants } from './components/Button/styles.css';
|
13
13
|
|
14
|
-
export { Section, type SectionProps } from './components/Section
|
15
|
-
export { type SectionVariants } from './components/Section/
|
14
|
+
export { Section, type SectionProps } from './components/Section';
|
15
|
+
export { type SectionVariants } from './components/Section/styles.css';
|
16
16
|
|
17
|
-
export { Main, type MainProps } from './components/Main
|
18
|
-
export { type MainVariants } from './components/Main/Main.css';
|
17
|
+
export { Main, type MainProps } from './components/Main';
|
19
18
|
|
20
|
-
export { Header, type HeaderProps } from './components/Header
|
21
|
-
export { type HeaderVariants } from './components/Header/Header.css';
|
19
|
+
export { Header, type HeaderProps } from './components/Header';
|
22
20
|
|
23
|
-
export { Footer, type FooterProps } from './components/Footer
|
24
|
-
export { type FooterVariants } from './components/Footer/Footer.css';
|
21
|
+
export { Footer, type FooterProps } from './components/Footer';
|
25
22
|
|
26
|
-
export { Nav, type NavProps } from './components/Nav
|
27
|
-
export { type NavVariants } from './components/Nav/Nav.css';
|
23
|
+
export { Nav, type NavProps } from './components/Nav';
|
28
24
|
|
29
|
-
export {
|
30
|
-
export { type IconVariants } from './components/Icon/Icon.css';
|
25
|
+
export { Heading, type HeadingProps } from './components/Heading';
|
31
26
|
|
32
|
-
export {
|
33
|
-
export { type ModalVariants } from './components/Modal/Modal.css';
|
27
|
+
export { Icon, type IconProps } from './components/Icon';
|
34
28
|
|
35
|
-
export {
|
36
|
-
export { type
|
29
|
+
export { Modal, type ModalProps } from './components/Modal';
|
30
|
+
export { type ModalVariants } from './components/Modal/styles.css';
|
37
31
|
|
38
|
-
export {
|
39
|
-
export { type ColumnsVariants } from './components/Columns/Columns.css';
|
32
|
+
export { Logo, type LogoProps } from './components/Logo';
|
40
33
|
|
41
|
-
export {
|
42
|
-
export { type ActionsVariants } from './components/Actions/Actions.css';
|
34
|
+
export { Columns, type ColumnsProps } from './components/Columns';
|
43
35
|
|
44
|
-
export {
|
45
|
-
export { type
|
36
|
+
export { Actions, type ActionsProps } from './components/Actions';
|
37
|
+
export { type ActionsVariants } from './components/Actions/styles.css';
|
38
|
+
|
39
|
+
export { Carousel, type CarouselProps } from './components/Carousel';
|
40
|
+
export { type CarouselVariants } from './components/Carousel/styles.css';
|
46
41
|
|
47
42
|
export { ConsentCookie, type ConsentCookieProps } from './components/ConsentCookie/ConsentCookie';
|
48
43
|
export { type ConsentCookieVariants } from './components/ConsentCookie/ConsentCookie.css';
|
49
44
|
|
50
|
-
export { KeyNumber, type KeyNumberProps } from './components/KeyNumber
|
51
|
-
export { type KeyNumberVariants } from './components/KeyNumber/
|
45
|
+
export { KeyNumber, type KeyNumberProps } from './components/KeyNumber';
|
46
|
+
export { type KeyNumberVariants } from './components/KeyNumber/styles.css';
|
52
47
|
|
53
|
-
export { NavSocial, type NavSocialProps
|
54
|
-
export { type NavSocialVariants } from './components/NavSocial/NavSocial.css';
|
48
|
+
export { NavSocial, type NavSocialProps } from './components/NavSocial';
|
55
49
|
|
56
|
-
export { NavLegal, type NavLegalProps } from './components/NavLegal
|
57
|
-
export { type NavLegalVariants } from './components/NavLegal/NavLegal.css';
|
50
|
+
export { NavLegal, type NavLegalProps } from './components/NavLegal';
|
58
51
|
|
59
|
-
export { LanguageSwitcher, type LanguageSwitcherProps, type Locale } from './components/LanguageSwitcher
|
60
|
-
export { type LanguageSwitcherVariants } from './components/LanguageSwitcher/
|
52
|
+
export { LanguageSwitcher, type LanguageSwitcherProps, type Locale } from './components/LanguageSwitcher';
|
53
|
+
export { type LanguageSwitcherVariants } from './components/LanguageSwitcher/styles.css';
|
61
54
|
|
62
55
|
// Video Components
|
63
|
-
export { Video, type VideoProps } from './components/Video
|
64
|
-
export { type VideoVariants } from './components/Video/
|
65
|
-
|
66
|
-
export { VideoFullWidth, type VideoFullWidthProps } from './components/VideoFullWidth/VideoFullWidth';
|
67
|
-
export { type VideoFullWidthVariants } from './components/VideoFullWidth/VideoFullWidth.css';
|
56
|
+
export { Video, type VideoProps } from './components/Video';
|
57
|
+
export { type VideoVariants } from './components/Video/styles.css';
|
68
58
|
|
69
59
|
// Form Components
|
70
60
|
export { Form, type FormProps } from './components/Form/Form';
|
@@ -1,8 +1,9 @@
|
|
1
1
|
import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
|
2
|
+
|
2
3
|
import { queries } from './mediaqueries';
|
3
|
-
import { themeContract } from '../
|
4
|
+
import { themeContract } from '../theme/contract.css';
|
4
5
|
|
5
|
-
const
|
6
|
+
export const sprinklesConditions = {
|
6
7
|
conditions: {
|
7
8
|
mobile: {},
|
8
9
|
sm: { '@media': queries.sm },
|
@@ -11,15 +12,16 @@ const responsiveProperties = defineProperties({
|
|
11
12
|
xl: { '@media': queries.xl },
|
12
13
|
'2xl': { '@media': queries['2xl'] },
|
13
14
|
},
|
14
|
-
|
15
|
+
};
|
15
16
|
|
17
|
+
const responsiveProperties = defineProperties({
|
18
|
+
...sprinklesConditions,
|
19
|
+
defaultCondition: 'mobile',
|
16
20
|
properties: {
|
17
21
|
// Spacing
|
18
22
|
padding: themeContract.space,
|
19
23
|
paddingTop: themeContract.space,
|
20
24
|
paddingBottom: themeContract.space,
|
21
|
-
paddingLeft: themeContract.space,
|
22
|
-
paddingRight: themeContract.space,
|
23
25
|
margin: themeContract.space,
|
24
26
|
marginTop: themeContract.space,
|
25
27
|
marginBottom: themeContract.space,
|
@@ -27,10 +29,13 @@ const responsiveProperties = defineProperties({
|
|
27
29
|
marginRight: themeContract.space,
|
28
30
|
gap: themeContract.space,
|
29
31
|
|
32
|
+
paddingLeft: themeContract.global.paddingLeft,
|
33
|
+
paddingRight: themeContract.global.paddingRight,
|
34
|
+
|
30
35
|
// Layout
|
31
36
|
display: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid'],
|
32
37
|
flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
|
33
|
-
|
38
|
+
alignItems: ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'],
|
34
39
|
justifyContent: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
|
35
40
|
flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
|
36
41
|
flex: ['1', 'auto', 'initial', 'none'],
|
@@ -78,7 +83,5 @@ const responsiveProperties = defineProperties({
|
|
78
83
|
},
|
79
84
|
});
|
80
85
|
|
81
|
-
// Export both configuration and function for consumer customization
|
82
|
-
export { responsiveProperties };
|
83
86
|
export const sprinkles = createSprinkles(responsiveProperties);
|
84
87
|
export type Sprinkles = Parameters<typeof sprinkles>[0];
|