@trackunit/css-component-tokens 0.0.30 → 0.0.32

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 (17) hide show
  1. package/index.cjs +282 -231
  2. package/index.js +284 -229
  3. package/package.json +2 -2
  4. package/src/component-tokens/ComponentTokenDefinition.d.ts +11 -11
  5. package/src/component-tokens/ComponentTokenVariablesByThemeName.d.ts +220 -220
  6. package/src/component-tokens/ComponentTokens.d.ts +250 -250
  7. package/src/component-tokens/MockComponent.d.ts +26 -26
  8. package/src/component-tokens/components/BaseInput.tokens.d.ts +33 -33
  9. package/src/component-tokens/components/Button.tokens.d.ts +35 -35
  10. package/src/component-tokens/components/Card.tokens.d.ts +51 -51
  11. package/src/component-tokens/components/FormGroup.tokens.d.ts +21 -21
  12. package/src/component-tokens/components/Popover/Popover.tokens.d.ts +13 -13
  13. package/src/component-tokens/components/Popover/PopoverListItem.tokens.d.ts +13 -13
  14. package/src/component-tokens/components/Search.tokens.d.ts +83 -83
  15. package/src/component-tokens/pluginUtilityFunctions.d.ts +30 -30
  16. package/src/index.d.ts +3 -3
  17. package/src/plugin.d.ts +4 -4
package/src/component-tokens/components/Button.tokens.d.ts CHANGED
@@ -1,35 +1,35 @@
1
- export declare const ButtonTokenDefinition: {
2
- readonly DEFAULT: {
3
- readonly "secondary-color": {
4
- readonly backgroundColor: "rgb(var(--color-secondary-200))";
5
- readonly color: "rgb(var(--color-secondary-600))";
6
- };
7
- readonly border: {
8
- readonly borderRadius: "var(--border-radius-lg)";
9
- };
10
- readonly height: {
11
- readonly height: "auto";
12
- };
13
- readonly padding: {
14
- readonly paddingLeft: "var(--spacing-2-5)";
15
- readonly paddingRight: "var(--spacing-2-5)";
16
- };
17
- };
18
- readonly "theme-marketing": {
19
- readonly "secondary-color": {
20
- readonly backgroundColor: "rgb(var(--color-secondary-600))";
21
- readonly color: "rgb(var(--color-secondary-50))";
22
- };
23
- readonly border: {
24
- readonly borderRadius: "50px";
25
- };
26
- readonly height: {
27
- readonly height: "55px";
28
- };
29
- readonly padding: {
30
- readonly paddingLeft: "var(--spacing-12)";
31
- readonly paddingRight: "var(--spacing-12)";
32
- };
33
- };
34
- };
35
- export default ButtonTokenDefinition;
1
+ export declare const ButtonTokenDefinition: {
2
+ readonly DEFAULT: {
3
+ readonly "secondary-color": {
4
+ readonly backgroundColor: "rgb(var(--color-secondary-200))";
5
+ readonly color: "rgb(var(--color-secondary-600))";
6
+ };
7
+ readonly border: {
8
+ readonly borderRadius: "var(--border-radius-lg)";
9
+ };
10
+ readonly height: {
11
+ readonly height: "auto";
12
+ };
13
+ readonly padding: {
14
+ readonly paddingLeft: "var(--spacing-2-5)";
15
+ readonly paddingRight: "var(--spacing-2-5)";
16
+ };
17
+ };
18
+ readonly "theme-marketing": {
19
+ readonly "secondary-color": {
20
+ readonly backgroundColor: "rgb(var(--color-secondary-600))";
21
+ readonly color: "rgb(var(--color-secondary-50))";
22
+ };
23
+ readonly border: {
24
+ readonly borderRadius: "50px";
25
+ };
26
+ readonly height: {
27
+ readonly height: "55px";
28
+ };
29
+ readonly padding: {
30
+ readonly paddingLeft: "var(--spacing-12)";
31
+ readonly paddingRight: "var(--spacing-12)";
32
+ };
33
+ };
34
+ };
35
+ export default ButtonTokenDefinition;
package/src/component-tokens/components/Card.tokens.d.ts CHANGED
@@ -1,51 +1,51 @@
1
- export declare const CardTokenDefinition: {
2
- readonly DEFAULT: {
3
- readonly border: {
4
- readonly borderColor: "rgb(var(--color-slate-200))";
5
- readonly borderRadius: "var(--border-radius-DEFAULT)";
6
- };
7
- readonly "popover-border": {
8
- readonly borderRadius: "var(--border-radius-DEFAULT)";
9
- };
10
- readonly shadow: {
11
- readonly boxShadow: "var(--box-shadow-DEFAULT)";
12
- };
13
- readonly spacing: {
14
- readonly gap: "var(--spacing-3)";
15
- readonly padding: "var(--spacing-3)";
16
- };
17
- readonly "spacing-sm": {
18
- readonly gap: "var(--spacing-4)";
19
- readonly padding: "var(--spacing-4)";
20
- };
21
- readonly "spacing-md": {
22
- readonly gap: "var(--spacing-4)";
23
- readonly padding: "var(--spacing-6)";
24
- };
25
- };
26
- readonly "theme-marketing": {
27
- readonly border: {
28
- readonly borderColor: "rgba(0, 0, 0, 0)";
29
- readonly borderRadius: "2rem";
30
- };
31
- readonly "popover-border": {
32
- readonly borderRadius: "1rem";
33
- };
34
- readonly shadow: {
35
- readonly boxShadow: "0px 20px 48px rgba(73, 55, 54, 0.1)";
36
- };
37
- readonly spacing: {
38
- readonly gap: "var(--spacing-1)";
39
- readonly padding: "var(--spacing-1)";
40
- };
41
- readonly "spacing-sm": {
42
- readonly gap: "var(--spacing-1)";
43
- readonly padding: "var(--spacing-1)";
44
- };
45
- readonly "spacing-md": {
46
- readonly gap: "var(--spacing-1)";
47
- readonly padding: "var(--spacing-1)";
48
- };
49
- };
50
- };
51
- export default CardTokenDefinition;
1
+ export declare const CardTokenDefinition: {
2
+ readonly DEFAULT: {
3
+ readonly border: {
4
+ readonly borderColor: "rgb(var(--color-slate-200))";
5
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
6
+ };
7
+ readonly "popover-border": {
8
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
9
+ };
10
+ readonly shadow: {
11
+ readonly boxShadow: "var(--box-shadow-DEFAULT)";
12
+ };
13
+ readonly spacing: {
14
+ readonly gap: "var(--spacing-3)";
15
+ readonly padding: "var(--spacing-3)";
16
+ };
17
+ readonly "spacing-sm": {
18
+ readonly gap: "var(--spacing-4)";
19
+ readonly padding: "var(--spacing-4)";
20
+ };
21
+ readonly "spacing-md": {
22
+ readonly gap: "var(--spacing-4)";
23
+ readonly padding: "var(--spacing-6)";
24
+ };
25
+ };
26
+ readonly "theme-marketing": {
27
+ readonly border: {
28
+ readonly borderColor: "rgba(0, 0, 0, 0)";
29
+ readonly borderRadius: "2rem";
30
+ };
31
+ readonly "popover-border": {
32
+ readonly borderRadius: "1rem";
33
+ };
34
+ readonly shadow: {
35
+ readonly boxShadow: "0px 20px 48px rgba(73, 55, 54, 0.1)";
36
+ };
37
+ readonly spacing: {
38
+ readonly gap: "var(--spacing-1)";
39
+ readonly padding: "var(--spacing-1)";
40
+ };
41
+ readonly "spacing-sm": {
42
+ readonly gap: "var(--spacing-1)";
43
+ readonly padding: "var(--spacing-1)";
44
+ };
45
+ readonly "spacing-md": {
46
+ readonly gap: "var(--spacing-1)";
47
+ readonly padding: "var(--spacing-1)";
48
+ };
49
+ };
50
+ };
51
+ export default CardTokenDefinition;
package/src/component-tokens/components/FormGroup.tokens.d.ts CHANGED
@@ -1,21 +1,21 @@
1
- export declare const FormGroupTokenDefinition: {
2
- readonly DEFAULT: {
3
- readonly gap: {
4
- readonly display: "auto";
5
- readonly gap: "auto";
6
- };
7
- readonly font: {
8
- readonly fontWeight: "normal";
9
- };
10
- };
11
- readonly "theme-marketing": {
12
- readonly gap: {
13
- readonly display: "grid";
14
- readonly gap: "var(--spacing-4)";
15
- };
16
- readonly font: {
17
- readonly fontWeight: "700";
18
- };
19
- };
20
- };
21
- export default FormGroupTokenDefinition;
1
+ export declare const FormGroupTokenDefinition: {
2
+ readonly DEFAULT: {
3
+ readonly gap: {
4
+ readonly display: "auto";
5
+ readonly gap: "auto";
6
+ };
7
+ readonly font: {
8
+ readonly fontWeight: "normal";
9
+ };
10
+ };
11
+ readonly "theme-marketing": {
12
+ readonly gap: {
13
+ readonly display: "grid";
14
+ readonly gap: "var(--spacing-4)";
15
+ };
16
+ readonly font: {
17
+ readonly fontWeight: "700";
18
+ };
19
+ };
20
+ };
21
+ export default FormGroupTokenDefinition;
package/src/component-tokens/components/Popover/Popover.tokens.d.ts CHANGED
@@ -1,13 +1,13 @@
1
- export declare const PopoverTokenDefinition: {
2
- readonly DEFAULT: {
3
- readonly border: {
4
- readonly borderRadius: "var(--border-radius-DEFAULT)";
5
- };
6
- };
7
- readonly "theme-marketing": {
8
- readonly border: {
9
- readonly borderRadius: "1rem";
10
- };
11
- };
12
- };
13
- export default PopoverTokenDefinition;
1
+ export declare const PopoverTokenDefinition: {
2
+ readonly DEFAULT: {
3
+ readonly border: {
4
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
5
+ };
6
+ };
7
+ readonly "theme-marketing": {
8
+ readonly border: {
9
+ readonly borderRadius: "1rem";
10
+ };
11
+ };
12
+ };
13
+ export default PopoverTokenDefinition;
package/src/component-tokens/components/Popover/PopoverListItem.tokens.d.ts CHANGED
@@ -1,13 +1,13 @@
1
- export declare const PopoverListItemTokenDefinition: {
2
- readonly DEFAULT: {
3
- readonly border: {
4
- readonly borderRadius: "var(--border-radius-DEFAULT)";
5
- };
6
- };
7
- readonly "theme-marketing": {
8
- readonly border: {
9
- readonly borderRadius: "1rem";
10
- };
11
- };
12
- };
13
- export default PopoverListItemTokenDefinition;
1
+ export declare const PopoverListItemTokenDefinition: {
2
+ readonly DEFAULT: {
3
+ readonly border: {
4
+ readonly borderRadius: "var(--border-radius-DEFAULT)";
5
+ };
6
+ };
7
+ readonly "theme-marketing": {
8
+ readonly border: {
9
+ readonly borderRadius: "1rem";
10
+ };
11
+ };
12
+ };
13
+ export default PopoverListItemTokenDefinition;
package/src/component-tokens/components/Search.tokens.d.ts CHANGED
@@ -1,83 +1,83 @@
1
- export declare const SearchTokenDefinition: {
2
- readonly DEFAULT: {
3
- readonly width: {
4
- readonly width: "9rem";
5
- };
6
- readonly background: {
7
- readonly backgroundColor: "";
8
- };
9
- readonly borderless: {
10
- readonly borderStyle: "hidden";
11
- };
12
- readonly "focus-hover": {
13
- readonly borderWidth: "1px";
14
- readonly borderBottomWidth: "1px";
15
- readonly borderColor: "rgb(var(--color-gray-400))";
16
- readonly borderBottomColor: "rgb(var(--color-gray-400))";
17
- readonly backgroundColor: "rgb(var(--color-slate-50))";
18
- };
19
- readonly border: {
20
- readonly borderStyle: "solid";
21
- readonly borderWidth: "1px";
22
- readonly borderBottomWidth: "1px";
23
- readonly borderColor: "rgb(var(--color-gray-200))";
24
- readonly borderBottomColor: "rgb(var(--color-gray-200))";
25
- readonly borderRadius: "0.5rem";
26
- };
27
- readonly "focus-within": {
28
- readonly borderColor: "rgb(var(--color-slate-400))";
29
- readonly boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)";
30
- };
31
- readonly widen: {
32
- readonly borderBottomColor: "rgb(var(--color-gray-400))";
33
- };
34
- readonly "widen-focus": {
35
- readonly borderBottomColor: "rgb(var(--color-gray-400))";
36
- };
37
- readonly prefix: {
38
- readonly color: "rgb(var(--color-slate-400))";
39
- readonly cursor: "default";
40
- };
41
- };
42
- readonly "theme-marketing": {
43
- readonly width: {
44
- readonly width: "0px";
45
- };
46
- readonly background: {
47
- readonly backgroundColor: "transparent";
48
- };
49
- readonly borderless: {
50
- readonly borderStyle: "hidden";
51
- };
52
- readonly "focus-hover": {
53
- readonly borderWidth: "0px";
54
- readonly borderBottomWidth: "2px";
55
- readonly borderColor: "rgb(var(--color-black-DEFAULT))";
56
- readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
57
- readonly backgroundColor: "transparent";
58
- };
59
- readonly border: {
60
- readonly borderStyle: "solid";
61
- readonly borderWidth: "0px";
62
- readonly borderBottomWidth: "2px";
63
- readonly borderColor: "rgb(var(--color-white-DEFAULT))";
64
- readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
65
- readonly borderRadius: "0px";
66
- };
67
- readonly "focus-within": {
68
- readonly borderColor: "none";
69
- readonly boxShadow: "none";
70
- };
71
- readonly widen: {
72
- readonly borderBottomColor: "rgb(var(--color-white-DEFAULT))";
73
- };
74
- readonly "widen-focus": {
75
- readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
76
- };
77
- readonly prefix: {
78
- readonly color: "rgb(var(--color-slate-600))";
79
- readonly cursor: "pointer";
80
- };
81
- };
82
- };
83
- export default SearchTokenDefinition;
1
+ export declare const SearchTokenDefinition: {
2
+ readonly DEFAULT: {
3
+ readonly width: {
4
+ readonly width: "9rem";
5
+ };
6
+ readonly background: {
7
+ readonly backgroundColor: "";
8
+ };
9
+ readonly borderless: {
10
+ readonly borderStyle: "hidden";
11
+ };
12
+ readonly "focus-hover": {
13
+ readonly borderWidth: "1px";
14
+ readonly borderBottomWidth: "1px";
15
+ readonly borderColor: "rgb(var(--color-gray-400))";
16
+ readonly borderBottomColor: "rgb(var(--color-gray-400))";
17
+ readonly backgroundColor: "rgb(var(--color-slate-50))";
18
+ };
19
+ readonly border: {
20
+ readonly borderStyle: "solid";
21
+ readonly borderWidth: "1px";
22
+ readonly borderBottomWidth: "1px";
23
+ readonly borderColor: "rgb(var(--color-gray-200))";
24
+ readonly borderBottomColor: "rgb(var(--color-gray-200))";
25
+ readonly borderRadius: "0.5rem";
26
+ };
27
+ readonly "focus-within": {
28
+ readonly borderColor: "rgb(var(--color-slate-400))";
29
+ readonly boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)";
30
+ };
31
+ readonly widen: {
32
+ readonly borderBottomColor: "rgb(var(--color-gray-400))";
33
+ };
34
+ readonly "widen-focus": {
35
+ readonly borderBottomColor: "rgb(var(--color-gray-400))";
36
+ };
37
+ readonly prefix: {
38
+ readonly color: "rgb(var(--color-slate-400))";
39
+ readonly cursor: "default";
40
+ };
41
+ };
42
+ readonly "theme-marketing": {
43
+ readonly width: {
44
+ readonly width: "0px";
45
+ };
46
+ readonly background: {
47
+ readonly backgroundColor: "transparent";
48
+ };
49
+ readonly borderless: {
50
+ readonly borderStyle: "hidden";
51
+ };
52
+ readonly "focus-hover": {
53
+ readonly borderWidth: "0px";
54
+ readonly borderBottomWidth: "2px";
55
+ readonly borderColor: "rgb(var(--color-black-DEFAULT))";
56
+ readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
57
+ readonly backgroundColor: "transparent";
58
+ };
59
+ readonly border: {
60
+ readonly borderStyle: "solid";
61
+ readonly borderWidth: "0px";
62
+ readonly borderBottomWidth: "2px";
63
+ readonly borderColor: "rgb(var(--color-white-DEFAULT))";
64
+ readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
65
+ readonly borderRadius: "0px";
66
+ };
67
+ readonly "focus-within": {
68
+ readonly borderColor: "none";
69
+ readonly boxShadow: "none";
70
+ };
71
+ readonly widen: {
72
+ readonly borderBottomColor: "rgb(var(--color-white-DEFAULT))";
73
+ };
74
+ readonly "widen-focus": {
75
+ readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
76
+ };
77
+ readonly prefix: {
78
+ readonly color: "rgb(var(--color-slate-600))";
79
+ readonly cursor: "pointer";
80
+ };
81
+ };
82
+ };
83
+ export default SearchTokenDefinition;