@kalink-ui/seedly 0.11.0 → 0.12.0

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 (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +3 -3
  3. package/src/components/button/button.css.ts +47 -0
  4. package/src/components/button-icon/button-icon.css.ts +37 -62
  5. package/src/components/input/input.css.ts +1 -0
  6. package/src/components/loader-overlay/loader-overlay.css.ts +24 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @kalink-ui/seedly
2
2
 
3
+ ## 0.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 0f1ff4b: [loader] Correctly use layers to define component styles
8
+
3
9
  ## 0.11.0
4
10
 
5
11
  ### Minor Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kalink-ui/seedly",
3
- "version": "0.11.0",
3
+ "version": "0.12.0",
4
4
  "description": "A set of components for building UIs with React and TypeScript",
5
5
  "sideEffects": false,
6
6
  "license": "MIT",
@@ -47,9 +47,9 @@
47
47
  "vite": "^6.2.1",
48
48
  "vite-tsconfig-paths": "^5.1.4",
49
49
  "vitest": "^3.0.8",
50
- "@kalink-ui/eslint-config": "0.9.0",
50
+ "@kalink-ui/dibbly": "0.4.0",
51
51
  "@kalink-ui/typescript-config": "0.4.0",
52
- "@kalink-ui/dibbly": "0.4.0"
52
+ "@kalink-ui/eslint-config": "0.9.0"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "@vanilla-extract/css": "^1.17.1",
package/src/components/button/button.css.ts CHANGED
@@ -2,8 +2,10 @@ import {
2
2
  assignVars,
3
3
  createThemeContract,
4
4
  fallbackVar,
5
+ globalStyle,
5
6
  style,
6
7
  } from '@vanilla-extract/css';
8
+ import { calc } from '@vanilla-extract/css-utils';
7
9
  import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
8
10
 
9
11
  import { sys, typography } from '../../styles';
@@ -365,4 +367,49 @@ export const buttonSlotStart = style([buttonSlot]);
365
367
 
366
368
  export const buttonSlotEnd = style([buttonSlot]);
367
369
 
370
+ globalStyle(`${buttonRecipe.classNames.variants.size.sm} svg`, {
371
+ '@layer': {
372
+ [components]: {
373
+ width: calc.multiply(
374
+ sys.typography.label.small.lineHeight,
375
+ sys.typography.label.small.size,
376
+ ),
377
+ height: calc.multiply(
378
+ sys.typography.label.small.lineHeight,
379
+ sys.typography.label.small.size,
380
+ ),
381
+ },
382
+ },
383
+ });
384
+
385
+ globalStyle(`${buttonRecipe.classNames.variants.size.md} svg`, {
386
+ '@layer': {
387
+ [components]: {
388
+ width: calc.multiply(
389
+ sys.typography.label.medium.lineHeight,
390
+ sys.typography.label.medium.size,
391
+ ),
392
+ height: calc.multiply(
393
+ sys.typography.label.medium.lineHeight,
394
+ sys.typography.label.medium.size,
395
+ ),
396
+ },
397
+ },
398
+ });
399
+
400
+ globalStyle(`${buttonRecipe.classNames.variants.size.lg} svg`, {
401
+ '@layer': {
402
+ [components]: {
403
+ width: calc.multiply(
404
+ sys.typography.label.large.lineHeight,
405
+ sys.typography.label.large.size,
406
+ ),
407
+ height: calc.multiply(
408
+ sys.typography.label.large.lineHeight,
409
+ sys.typography.label.large.size,
410
+ ),
411
+ },
412
+ },
413
+ });
414
+
368
415
  export type ButtonVariants = NonNullable<RecipeVariants<typeof buttonRecipe>>;
package/src/components/button-icon/button-icon.css.ts CHANGED
@@ -1,5 +1,4 @@
1
- import { assignVars, globalStyle } from '@vanilla-extract/css';
2
- import { calc } from '@vanilla-extract/css-utils';
1
+ import { assignVars } from '@vanilla-extract/css';
3
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
4
3
 
5
4
  import { sys } from '../../styles';
@@ -12,39 +11,48 @@ export const buttonIcon = recipe({
12
11
  variants: {
13
12
  variant: buttonRecipe.classNames.variants.variant,
14
13
  size: {
15
- sm: {
16
- '@layer': {
17
- [components]: {
18
- vars: assignVars(buttonVars.spacing, {
19
- block: sys.spacing[2],
20
- inline: sys.spacing[2],
21
- inner: sys.spacing[2],
22
- }),
14
+ sm: [
15
+ buttonRecipe.classNames.variants.size.sm,
16
+ {
17
+ '@layer': {
18
+ [components]: {
19
+ vars: assignVars(buttonVars.spacing, {
20
+ block: sys.spacing[2],
21
+ inline: sys.spacing[2],
22
+ inner: sys.spacing[2],
23
+ }),
24
+ },
23
25
  },
24
26
  },
25
- },
26
- md: {
27
- '@layer': {
28
- [components]: {
29
- vars: assignVars(buttonVars.spacing, {
30
- block: sys.spacing[2],
31
- inline: sys.spacing[2],
32
- inner: sys.spacing[2],
33
- }),
27
+ ],
28
+ md: [
29
+ buttonRecipe.classNames.variants.size.md,
30
+ {
31
+ '@layer': {
32
+ [components]: {
33
+ vars: assignVars(buttonVars.spacing, {
34
+ block: sys.spacing[2],
35
+ inline: sys.spacing[2],
36
+ inner: sys.spacing[2],
37
+ }),
38
+ },
34
39
  },
35
40
  },
36
- },
37
- lg: {
38
- '@layer': {
39
- [components]: {
40
- vars: assignVars(buttonVars.spacing, {
41
- block: sys.spacing[3],
42
- inline: sys.spacing[3],
43
- inner: sys.spacing[3],
44
- }),
41
+ ],
42
+ lg: [
43
+ buttonRecipe.classNames.variants.size.lg,
44
+ {
45
+ '@layer': {
46
+ [components]: {
47
+ vars: assignVars(buttonVars.spacing, {
48
+ block: sys.spacing[3],
49
+ inline: sys.spacing[3],
50
+ inner: sys.spacing[3],
51
+ }),
52
+ },
45
53
  },
46
54
  },
47
- },
55
+ ],
48
56
  },
49
57
  },
50
58
 
@@ -54,37 +62,4 @@ export const buttonIcon = recipe({
54
62
  },
55
63
  });
56
64
 
57
- globalStyle(`${buttonIcon.classNames.variants.size.sm} > svg`, {
58
- width: calc.multiply(
59
- sys.typography.label.small.lineHeight,
60
- sys.typography.label.small.size,
61
- ),
62
- height: calc.multiply(
63
- sys.typography.label.small.lineHeight,
64
- sys.typography.label.small.size,
65
- ),
66
- });
67
-
68
- globalStyle(`${buttonIcon.classNames.variants.size.md} > svg`, {
69
- width: calc.multiply(
70
- sys.typography.label.medium.lineHeight,
71
- sys.typography.label.medium.size,
72
- ),
73
- height: calc.multiply(
74
- sys.typography.label.medium.lineHeight,
75
- sys.typography.label.medium.size,
76
- ),
77
- });
78
-
79
- globalStyle(`${buttonIcon.classNames.variants.size.lg} > svg`, {
80
- width: calc.multiply(
81
- sys.typography.label.large.lineHeight,
82
- sys.typography.label.large.size,
83
- ),
84
- height: calc.multiply(
85
- sys.typography.label.large.lineHeight,
86
- sys.typography.label.large.size,
87
- ),
88
- });
89
-
90
65
  export type ButtonIconVariants = NonNullable<RecipeVariants<typeof buttonIcon>>;
package/src/components/input/input.css.ts CHANGED
@@ -211,6 +211,7 @@ export const input = style({
211
211
 
212
212
  flexGrow: 1,
213
213
  flexBasis: 1,
214
+ width: '100%',
214
215
 
215
216
  paddingTop: 0,
216
217
  paddingBottom: 0,
package/src/components/loader-overlay/loader-overlay.css.ts CHANGED
@@ -1,30 +1,43 @@
1
1
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
2
2
 
3
3
  import { sys } from '../../styles';
4
+ import { components } from '../../styles/layers.css';
4
5
 
5
6
  export const loaderOverlay = recipe({
6
7
  base: {
7
- display: 'flex',
8
- justifyContent: 'center',
9
- alignItems: 'center',
8
+ '@layer': {
9
+ [components]: {
10
+ display: 'flex',
11
+ justifyContent: 'center',
12
+ alignItems: 'center',
10
13
 
11
- height: '100%',
12
- width: '100%',
14
+ height: '100%',
15
+ width: '100%',
13
16
 
14
- zIndex: 1000,
17
+ zIndex: 1000,
15
18
 
16
- backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
19
+ backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 10%, transparent)`,
20
+ },
21
+ },
17
22
  },
18
23
 
19
24
  variants: {
20
25
  position: {
21
26
  absolute: {
22
- position: 'absolute',
23
- top: 0,
24
- left: 0,
27
+ '@layer': {
28
+ [components]: {
29
+ position: 'absolute',
30
+ top: 0,
31
+ left: 0,
32
+ },
33
+ },
25
34
  },
26
35
  relative: {
27
- position: 'relative',
36
+ '@layer': {
37
+ [components]: {
38
+ position: 'relative',
39
+ },
40
+ },
28
41
  },
29
42
  },
30
43
  },