@latte-macchiat-io/latte-vanilla-components 0.0.437 → 0.0.438

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.437",
3
+ "version": "0.0.438",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
@@ -31,9 +31,36 @@ export const paragraphRecipe = recipe(
31
31
  justifyContent: 'flex-end',
32
32
  },
33
33
  },
34
+ size: {
35
+ full: {
36
+ width: '100%',
37
+ },
38
+ lg: {
39
+ '@media': {
40
+ ...generateResponsiveMedia({
41
+ width: themeContract.paragraph.size.lg,
42
+ }),
43
+ },
44
+ },
45
+ md: {
46
+ '@media': {
47
+ ...generateResponsiveMedia({
48
+ width: themeContract.paragraph.size.md,
49
+ }),
50
+ },
51
+ },
52
+ sm: {
53
+ '@media': {
54
+ ...generateResponsiveMedia({
55
+ width: themeContract.paragraph.size.sm,
56
+ }),
57
+ },
58
+ },
59
+ },
34
60
  },
35
61
 
36
62
  defaultVariants: {
63
+ size: 'full',
37
64
  align: 'left',
38
65
  },
39
66
  },
@@ -8,6 +8,32 @@ const themeParagraphBase = {
8
8
  xl: '50px',
9
9
  '2xl': '50px',
10
10
  },
11
+ size: {
12
+ lg: {
13
+ mobile: '100%',
14
+ sm: '100%',
15
+ md: '75%',
16
+ lg: '75%',
17
+ xl: '75%',
18
+ '2xl': '75%',
19
+ },
20
+ md: {
21
+ mobile: '100%',
22
+ sm: '100%',
23
+ md: '50%',
24
+ lg: '50%',
25
+ xl: '50%',
26
+ '2xl': '50%',
27
+ },
28
+ sm: {
29
+ mobile: '100%',
30
+ sm: '100%',
31
+ md: '25%',
32
+ lg: '25%',
33
+ xl: '25%',
34
+ '2xl': '25%',
35
+ },
36
+ },
11
37
  plusList: {
12
38
  paddingTop: {
13
39
  mobile: '15px',
@@ -383,6 +383,38 @@ export const themeContract = createGlobalThemeContract({
383
383
  xl: 'latte-paragraph-paddingBottom-xl',
384
384
  '2xl': 'latte-paragraph-paddingBottom-2xl',
385
385
  },
386
+ size: {
387
+ lg: {
388
+ width: {
389
+ mobile: 'latte-paragraph-size-lg-width-mobile',
390
+ sm: 'latte-paragraph-size-lg-width-sm',
391
+ md: 'latte-paragraph-size-lg-width-md',
392
+ lg: 'latte-paragraph-size-lg-width-lg',
393
+ xl: 'latte-paragraph-size-lg-width-xl',
394
+ '2xl': 'latte-paragraph-size-lg-width-2xl',
395
+ },
396
+ },
397
+ md: {
398
+ width: {
399
+ mobile: 'latte-paragraph-size-md-width-mobile',
400
+ sm: 'latte-paragraph-size-md-width-sm',
401
+ md: 'latte-paragraph-size-md-width-md',
402
+ lg: 'latte-paragraph-size-md-width-lg',
403
+ xl: 'latte-paragraph-size-md-width-xl',
404
+ '2xl': 'latte-paragraph-size-md-width-2xl',
405
+ },
406
+ },
407
+ sm: {
408
+ width: {
409
+ mobile: 'latte-paragraph-size-sm-width-mobile',
410
+ sm: 'latte-paragraph-size-sm-width-sm',
411
+ md: 'latte-paragraph-size-sm-width-md',
412
+ lg: 'latte-paragraph-size-sm-width-lg',
413
+ xl: 'latte-paragraph-size-sm-width-xl',
414
+ '2xl': 'latte-paragraph-size-sm-width-2xl',
415
+ },
416
+ },
417
+ },
386
418
  plusList: {
387
419
  paddingTop: {
388
420
  mobile: 'latte-paragraph-plusList-paddingBottom-mobile',