@latte-macchiat-io/latte-vanilla-components 0.0.458 → 0.0.460

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 (8) hide show
  1. package/package.json +1 -1
  2. package/src/components/Box/Alert/index.tsx +24 -24
  3. package/src/components/Box/Alert/stories.tsx +25 -25
  4. package/src/components/Box/Alert/styles.css.ts +32 -32
  5. package/src/components/Box/styles.css.ts +12 -12
  6. package/src/index.ts +1 -1
  7. package/src/theme/contract.css.ts +20 -20
  8. package/src/theme/createTheme.ts +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.458",
3
+ "version": "0.0.460",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/components/Box/Alert/index.tsx CHANGED
@@ -1,29 +1,29 @@
1
- import { alertBoxContent, AlertBoxVariants } from './styles.css';
1
+ // import { alertBoxContent, AlertBoxVariants } from './styles.css';
2
2
 
3
- import { Box } from '..';
3
+ // import { Box } from '..';
4
4
 
5
- import { themeContract } from '../../../theme/contract.css';
5
+ // import { themeContract } from '../../../theme/contract.css';
6
6
 
7
- import { Heading } from '../../Heading';
8
- import { Icon } from '../../Icon';
9
- import icons from '../../Icon/path';
10
- import { Paragraph } from '../../Paragraph';
7
+ // import { Heading } from '../../Heading';
8
+ // import { Icon } from '../../Icon';
9
+ // import icons from '../../Icon/path';
10
+ // import { Paragraph } from '../../Paragraph';
11
11
 
12
- export type AlertBoxProps = React.HTMLAttributes<HTMLDivElement> &
13
- AlertBoxVariants & {
14
- text: string;
15
- noIcon?: boolean;
16
- title?: string | null;
17
- };
12
+ // export type AlertBoxProps = React.HTMLAttributes<HTMLDivElement> &
13
+ // AlertBoxVariants & {
14
+ // text: string;
15
+ // noIcon?: boolean;
16
+ // title?: string | null;
17
+ // };
18
18
 
19
- export const AlertBox = ({ title, text, noIcon = false, variant = 'info', className }: AlertBoxProps) => {
20
- return (
21
- <Box className={className} variant={variant} direction="row">
22
- {!noIcon && <Icon iconPath={icons.close} size={50} color={themeContract.boxAlert.variant[variant].iconColor} />}
23
- <div className={alertBoxContent}>
24
- {title && <Heading as="h4">{title}</Heading>}
25
- <Paragraph>{text}</Paragraph>
26
- </div>
27
- </Box>
28
- );
29
- };
19
+ // export const AlertBox = ({ title, text, noIcon = false, variant = 'info', className }: AlertBoxProps) => {
20
+ // return (
21
+ // <Box className={className} variant={variant} direction="row">
22
+ // {!noIcon && <Icon iconPath={icons.close} size={50} color={themeContract.boxAlert.variant[variant].iconColor} />}
23
+ // <div className={alertBoxContent}>
24
+ // {title && <Heading as="h4">{title}</Heading>}
25
+ // <Paragraph>{text}</Paragraph>
26
+ // </div>
27
+ // </Box>
28
+ // );
29
+ // };
package/src/components/Box/Alert/stories.tsx CHANGED
@@ -1,29 +1,29 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
1
+ // import type { Meta, StoryObj } from '@storybook/react-vite';
2
2
 
3
- import { AlertBox } from '.';
3
+ // import { AlertBox } from '.';
4
4
 
5
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6
- const meta: Meta<typeof AlertBox> = {
7
- title: 'Latte Components / 1. Global / AlertBox',
8
- component: AlertBox,
9
- parameters: {
10
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
11
- layout: 'centered',
12
- },
13
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
14
- tags: ['autodocs'],
15
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
16
- argTypes: {},
17
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
18
- };
5
+ // // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6
+ // const meta: Meta<typeof AlertBox> = {
7
+ // title: 'Latte Components / 1. Global / AlertBox',
8
+ // component: AlertBox,
9
+ // parameters: {
10
+ // // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
11
+ // layout: 'centered',
12
+ // },
13
+ // // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
14
+ // tags: ['autodocs'],
15
+ // // More on argTypes: https://storybook.js.org/docs/api/argtypes
16
+ // argTypes: {},
17
+ // // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
18
+ // };
19
19
 
20
- export default meta;
21
- type Story = StoryObj<typeof meta>;
20
+ // export default meta;
21
+ // type Story = StoryObj<typeof meta>;
22
22
 
23
- // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
24
- export const Default: Story = {
25
- args: {
26
- title: 'Lorem ipsum',
27
- text: 'Lorem ipsum Lorem ipsum',
28
- },
29
- };
23
+ // // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
24
+ // export const Default: Story = {
25
+ // args: {
26
+ // title: 'Lorem ipsum',
27
+ // text: 'Lorem ipsum Lorem ipsum',
28
+ // },
29
+ // };
package/src/components/Box/Alert/styles.css.ts CHANGED
@@ -1,38 +1,38 @@
1
- import { globalStyle, style } from '@vanilla-extract/css';
1
+ // import { globalStyle, style } from '@vanilla-extract/css';
2
2
 
3
- import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
4
- import { themeContract } from '../../../theme/contract.css';
5
- import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
3
+ // import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
4
+ // import { themeContract } from '../../../theme/contract.css';
5
+ // import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
6
6
 
7
- export const alertBox = recipe({
8
- variants: {
9
- variant: {
10
- warning: {
11
- backgroundColor: themeContract.section.variant.primary.backgroundColor,
12
- },
13
- info: {
14
- backgroundColor: themeContract.section.variant.primary.backgroundColor,
15
- },
16
- success: {
17
- backgroundColor: themeContract.section.variant.primary.backgroundColor,
18
- },
19
- danger: {
20
- backgroundColor: themeContract.section.variant.primary.backgroundColor,
21
- },
22
- },
23
- },
24
- });
7
+ // export const alertBox = recipe({
8
+ // variants: {
9
+ // variant: {
10
+ // warning: {
11
+ // backgroundColor: themeContract.section.variant.primary.backgroundColor,
12
+ // },
13
+ // info: {
14
+ // backgroundColor: themeContract.section.variant.primary.backgroundColor,
15
+ // },
16
+ // success: {
17
+ // backgroundColor: themeContract.section.variant.primary.backgroundColor,
18
+ // },
19
+ // danger: {
20
+ // backgroundColor: themeContract.section.variant.primary.backgroundColor,
21
+ // },
22
+ // },
23
+ // },
24
+ // });
25
25
 
26
- globalStyle(`${alertBox} > div `, {
27
- flexDirection: 'row',
26
+ // globalStyle(`${alertBox} > div `, {
27
+ // flexDirection: 'row',
28
28
 
29
- '@media': generateResponsiveMedia({
30
- gap: themeContract.box.gap,
31
- }),
32
- });
29
+ // '@media': generateResponsiveMedia({
30
+ // gap: themeContract.box.gap,
31
+ // }),
32
+ // });
33
33
 
34
- export const alertBoxContent = style({
35
- width: '100%',
36
- });
34
+ // export const alertBoxContent = style({
35
+ // width: '100%',
36
+ // });
37
37
 
38
- export type AlertBoxVariants = RecipeVariants<typeof alertBox>;
38
+ // export type AlertBoxVariants = RecipeVariants<typeof alertBox>;
package/src/components/Box/styles.css.ts CHANGED
@@ -53,18 +53,18 @@ export const box = recipe({
53
53
  transparent: {
54
54
  backgroundColor: themeContract.section.variant.transparent.backgroundColor,
55
55
  },
56
- warning: {
57
- backgroundColor: themeContract.boxAlert.variant.warning.backgroundColor,
58
- },
59
- info: {
60
- backgroundColor: themeContract.boxAlert.variant.info.backgroundColor,
61
- },
62
- success: {
63
- backgroundColor: themeContract.boxAlert.variant.success.backgroundColor,
64
- },
65
- danger: {
66
- backgroundColor: themeContract.boxAlert.variant.danger.backgroundColor,
67
- },
56
+ // warning: {
57
+ // backgroundColor: themeContract.boxAlert.variant.warning.backgroundColor,
58
+ // },
59
+ // info: {
60
+ // backgroundColor: themeContract.boxAlert.variant.info.backgroundColor,
61
+ // },
62
+ // success: {
63
+ // backgroundColor: themeContract.boxAlert.variant.success.backgroundColor,
64
+ // },
65
+ // danger: {
66
+ // backgroundColor: themeContract.boxAlert.variant.danger.backgroundColor,
67
+ // },
68
68
  },
69
69
 
70
70
  paddingTop: {
package/src/index.ts CHANGED
@@ -25,7 +25,7 @@ export * from './components/Header/HeaderToggleNav/export';
25
25
  export * from './components/Footer/export';
26
26
 
27
27
  export * from './components/Box/export';
28
- export * from './components/Box/Alert/export';
28
+ // export * from './components/Box/Alert/export';
29
29
 
30
30
  export * from './components/Nav/export';
31
31
 
package/src/theme/contract.css.ts CHANGED
@@ -719,26 +719,26 @@ export const themeContract = createGlobalThemeContract({
719
719
  },
720
720
  },
721
721
 
722
- boxAlert: {
723
- variant: {
724
- warning: {
725
- iconColor: 'latte-boxAlert-variant-warning-iconColor',
726
- backgroundColor: 'latte-boxAlert-variant-warning-backgroundColor',
727
- },
728
- info: {
729
- iconColor: 'latte-boxAlert-variant-info-iconColor',
730
- backgroundColor: 'latte-boxAlert-variant-info-backgroundColor',
731
- },
732
- success: {
733
- iconColor: 'latte-boxAlert-variant-success-iconColor',
734
- backgroundColor: 'latte-boxAlert-variant-success-backgroundColor',
735
- },
736
- danger: {
737
- iconColor: 'latte-boxAlert-variant-danger-iconColor',
738
- backgroundColor: 'latte-boxAlert-variant-danger-backgroundColor',
739
- },
740
- },
741
- },
722
+ // boxAlert: {
723
+ // variant: {
724
+ // warning: {
725
+ // iconColor: 'latte-boxAlert-variant-warning-iconColor',
726
+ // backgroundColor: 'latte-boxAlert-variant-warning-backgroundColor',
727
+ // },
728
+ // info: {
729
+ // iconColor: 'latte-boxAlert-variant-info-iconColor',
730
+ // backgroundColor: 'latte-boxAlert-variant-info-backgroundColor',
731
+ // },
732
+ // success: {
733
+ // iconColor: 'latte-boxAlert-variant-success-iconColor',
734
+ // backgroundColor: 'latte-boxAlert-variant-success-backgroundColor',
735
+ // },
736
+ // danger: {
737
+ // iconColor: 'latte-boxAlert-variant-danger-iconColor',
738
+ // backgroundColor: 'latte-boxAlert-variant-danger-backgroundColor',
739
+ // },
740
+ // },
741
+ // },
742
742
 
743
743
  modal: {
744
744
  border: 'latte-modal-border',
package/src/theme/createTheme.ts CHANGED
@@ -35,7 +35,7 @@ export type ThemeOverrides = {
35
35
  form?: Partial<typeof baseLightTheme.form>;
36
36
  logo?: Partial<typeof baseLightTheme.logo>;
37
37
  box?: Partial<typeof baseLightTheme.box>;
38
- boxAlert?: Partial<typeof baseLightTheme.boxAlert>;
38
+ // boxAlert?: Partial<typeof baseLightTheme.boxAlert>;
39
39
  consentCookie?: Partial<typeof baseLightTheme.consentCookie>;
40
40
  };
41
41
 
@@ -73,7 +73,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
73
73
  form: { ...baseLightTheme.form, ...overrides.form },
74
74
  logo: { ...baseLightTheme.logo, ...overrides.logo },
75
75
  box: { ...baseLightTheme.box, ...overrides.box },
76
- boxAlert: { ...baseLightTheme.boxAlert, ...overrides.boxAlert },
76
+ // boxAlert: { ...baseLightTheme.boxAlert, ...overrides.boxAlert },
77
77
  consentCookie: { ...baseLightTheme.consentCookie, ...overrides.consentCookie },
78
78
  });
79
79
  };
@@ -112,7 +112,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
112
112
  form: { ...baseDarkTheme.form, ...overrides.form },
113
113
  logo: { ...baseDarkTheme.logo, ...overrides.logo },
114
114
  box: { ...baseDarkTheme.box, ...overrides.box },
115
- boxAlert: { ...baseDarkTheme.boxAlert, ...overrides.boxAlert },
115
+ // boxAlert: { ...baseDarkTheme.boxAlert, ...overrides.boxAlert },
116
116
  consentCookie: { ...baseDarkTheme.consentCookie, ...overrides.consentCookie },
117
117
  });
118
118
  };