@trackunit/css-component-tokens 0.0.83 → 0.0.84

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 (9) hide show
  1. package/index.cjs.js +11 -11
  2. package/index.esm.js +11 -11
  3. package/package.json +1 -1
  4. package/src/component-tokens/ComponentTokenVariablesByThemeName.d.ts +13 -13
  5. package/src/component-tokens/ComponentTokens.d.ts +13 -13
  6. package/src/component-tokens/MockComponent.d.ts +6 -6
  7. package/src/component-tokens/components/BaseInput.tokens.d.ts +2 -2
  8. package/src/component-tokens/components/Card.tokens.d.ts +5 -5
  9. package/src/component-tokens/components/Search.tokens.d.ts +6 -6
package/index.cjs.js CHANGED
@@ -35,7 +35,7 @@ const BaseInputTokenDefinition = AsComponentTokenDefinition({
35
35
  prefix: { borderRightWidth: "1px" },
36
36
  },
37
37
  "theme-marketing": {
38
- border: { borderRadius: "70px", borderWidth: "0px" },
38
+ border: { borderRadius: "8px", borderWidth: "1px" },
39
39
  shadow: { boxShadow: "none" },
40
40
  background: { backgroundColor: "rgb(var(--color-stone-50))" },
41
41
  prefix: { borderRightWidth: "0px" },
@@ -67,12 +67,12 @@ const ButtonTokenDefinition = AsComponentTokenDefinition({
67
67
  */
68
68
  const CardTokenDefinition = AsComponentTokenDefinition({
69
69
  DEFAULT: {
70
- border: { borderColor: "rgb(var(--color-slate-200))", borderRadius: "var(--border-radius-DEFAULT)" },
71
- "popover-border": { borderRadius: "var(--border-radius-DEFAULT)" },
72
- shadow: { boxShadow: "var(--box-shadow-DEFAULT)" },
70
+ border: { borderColor: "rgb(var(--color-secondary-200))", borderRadius: "var(--border-radius-lg)" },
71
+ "popover-border": { borderRadius: "var(--border-radius-lg)" },
72
+ shadow: { boxShadow: "var(--box-shadow-none)" },
73
73
  spacing: { gap: "var(--spacing-3)", padding: "var(--spacing-3)" },
74
74
  "spacing-sm": { gap: "var(--spacing-4)", padding: "var(--spacing-4)" },
75
- "spacing-md": { gap: "var(--spacing-4)", padding: "var(--spacing-6)" },
75
+ "spacing-md": { gap: "var(--spacing-4)", padding: "var(--spacing-4)" },
76
76
  },
77
77
  "theme-marketing": {
78
78
  border: { borderColor: "rgba(0, 0, 0, 0)", borderRadius: "2rem" },
@@ -167,18 +167,18 @@ const SearchTokenDefinition = AsComponentTokenDefinition({
167
167
  borderStyle: "hidden",
168
168
  },
169
169
  "focus-hover": {
170
- borderWidth: "0px",
171
- borderBottomWidth: "2px",
170
+ borderWidth: "1px",
171
+ borderBottomWidth: "1px",
172
172
  borderColor: "rgb(var(--color-black-DEFAULT))",
173
173
  borderBottomColor: "rgb(var(--color-black-DEFAULT))",
174
174
  backgroundColor: "transparent",
175
175
  },
176
176
  border: {
177
177
  borderStyle: "solid",
178
- borderWidth: "0px",
179
- borderBottomWidth: "2px",
180
- borderColor: "rgb(var(--color-white-DEFAULT))",
181
- borderBottomColor: "rgb(var(--color-black-DEFAULT))",
178
+ borderWidth: "1px",
179
+ borderBottomWidth: "1px",
180
+ borderColor: "rgb(var(--color-gray-300))",
181
+ borderBottomColor: "rgb(var(--color-gray-300))",
182
182
  borderRadius: "0px",
183
183
  },
184
184
  "focus-within": {
package/index.esm.js CHANGED
@@ -27,7 +27,7 @@ const BaseInputTokenDefinition = AsComponentTokenDefinition({
27
27
  prefix: { borderRightWidth: "1px" },
28
28
  },
29
29
  "theme-marketing": {
30
- border: { borderRadius: "70px", borderWidth: "0px" },
30
+ border: { borderRadius: "8px", borderWidth: "1px" },
31
31
  shadow: { boxShadow: "none" },
32
32
  background: { backgroundColor: "rgb(var(--color-stone-50))" },
33
33
  prefix: { borderRightWidth: "0px" },
@@ -59,12 +59,12 @@ const ButtonTokenDefinition = AsComponentTokenDefinition({
59
59
  */
60
60
  const CardTokenDefinition = AsComponentTokenDefinition({
61
61
  DEFAULT: {
62
- border: { borderColor: "rgb(var(--color-slate-200))", borderRadius: "var(--border-radius-DEFAULT)" },
63
- "popover-border": { borderRadius: "var(--border-radius-DEFAULT)" },
64
- shadow: { boxShadow: "var(--box-shadow-DEFAULT)" },
62
+ border: { borderColor: "rgb(var(--color-secondary-200))", borderRadius: "var(--border-radius-lg)" },
63
+ "popover-border": { borderRadius: "var(--border-radius-lg)" },
64
+ shadow: { boxShadow: "var(--box-shadow-none)" },
65
65
  spacing: { gap: "var(--spacing-3)", padding: "var(--spacing-3)" },
66
66
  "spacing-sm": { gap: "var(--spacing-4)", padding: "var(--spacing-4)" },
67
- "spacing-md": { gap: "var(--spacing-4)", padding: "var(--spacing-6)" },
67
+ "spacing-md": { gap: "var(--spacing-4)", padding: "var(--spacing-4)" },
68
68
  },
69
69
  "theme-marketing": {
70
70
  border: { borderColor: "rgba(0, 0, 0, 0)", borderRadius: "2rem" },
@@ -159,18 +159,18 @@ const SearchTokenDefinition = AsComponentTokenDefinition({
159
159
  borderStyle: "hidden",
160
160
  },
161
161
  "focus-hover": {
162
- borderWidth: "0px",
163
- borderBottomWidth: "2px",
162
+ borderWidth: "1px",
163
+ borderBottomWidth: "1px",
164
164
  borderColor: "rgb(var(--color-black-DEFAULT))",
165
165
  borderBottomColor: "rgb(var(--color-black-DEFAULT))",
166
166
  backgroundColor: "transparent",
167
167
  },
168
168
  border: {
169
169
  borderStyle: "solid",
170
- borderWidth: "0px",
171
- borderBottomWidth: "2px",
172
- borderColor: "rgb(var(--color-white-DEFAULT))",
173
- borderBottomColor: "rgb(var(--color-black-DEFAULT))",
170
+ borderWidth: "1px",
171
+ borderBottomWidth: "1px",
172
+ borderColor: "rgb(var(--color-gray-300))",
173
+ borderBottomColor: "rgb(var(--color-gray-300))",
174
174
  borderRadius: "0px",
175
175
  },
176
176
  "focus-within": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/css-component-tokens",
3
- "version": "0.0.83",
3
+ "version": "0.0.84",
4
4
  "main": "./index.cjs.js",
5
5
  "repository": "https://github.com/Trackunit/manager",
6
6
  "license": "SEE LICENSE IN LICENSE.txt",
package/src/component-tokens/ComponentTokenVariablesByThemeName.d.ts CHANGED
@@ -4,14 +4,14 @@ import { ComponentTokenDefinitions } from "./ComponentTokens";
4
4
  export declare const getComponentTokenVariablesByThemeName: (theme: ThemeNames, componentTokenDefinitions: ComponentTokenDefinitions) => {
5
5
  [k: string]: {
6
6
  readonly border: {
7
- readonly borderColor: "rgb(var(--color-slate-200))";
8
- readonly borderRadius: "var(--border-radius-DEFAULT)";
7
+ readonly borderColor: "rgb(var(--color-secondary-200))";
8
+ readonly borderRadius: "var(--border-radius-lg)";
9
9
  };
10
10
  readonly "popover-border": {
11
- readonly borderRadius: "var(--border-radius-DEFAULT)";
11
+ readonly borderRadius: "var(--border-radius-lg)";
12
12
  };
13
13
  readonly shadow: {
14
- readonly boxShadow: "var(--box-shadow-DEFAULT)";
14
+ readonly boxShadow: "var(--box-shadow-none)";
15
15
  };
16
16
  readonly spacing: {
17
17
  readonly gap: "var(--spacing-3)";
@@ -23,7 +23,7 @@ export declare const getComponentTokenVariablesByThemeName: (theme: ThemeNames,
23
23
  };
24
24
  readonly "spacing-md": {
25
25
  readonly gap: "var(--spacing-4)";
26
- readonly padding: "var(--spacing-6)";
26
+ readonly padding: "var(--spacing-4)";
27
27
  };
28
28
  } | {
29
29
  readonly border: {
@@ -128,18 +128,18 @@ export declare const getComponentTokenVariablesByThemeName: (theme: ThemeNames,
128
128
  readonly borderStyle: "hidden";
129
129
  };
130
130
  readonly "focus-hover": {
131
- readonly borderWidth: "0px";
132
- readonly borderBottomWidth: "2px";
131
+ readonly borderWidth: "1px";
132
+ readonly borderBottomWidth: "1px";
133
133
  readonly borderColor: "rgb(var(--color-black-DEFAULT))";
134
134
  readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
135
135
  readonly backgroundColor: "transparent";
136
136
  };
137
137
  readonly border: {
138
138
  readonly borderStyle: "solid";
139
- readonly borderWidth: "0px";
140
- readonly borderBottomWidth: "2px";
141
- readonly borderColor: "rgb(var(--color-white-DEFAULT))";
142
- readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
139
+ readonly borderWidth: "1px";
140
+ readonly borderBottomWidth: "1px";
141
+ readonly borderColor: "rgb(var(--color-gray-300))";
142
+ readonly borderBottomColor: "rgb(var(--color-gray-300))";
143
143
  readonly borderRadius: "0px";
144
144
  };
145
145
  readonly "focus-within": {
@@ -188,8 +188,8 @@ export declare const getComponentTokenVariablesByThemeName: (theme: ThemeNames,
188
188
  };
189
189
  } | {
190
190
  readonly border: {
191
- readonly borderRadius: "70px";
192
- readonly borderWidth: "0px";
191
+ readonly borderRadius: "8px";
192
+ readonly borderWidth: "1px";
193
193
  };
194
194
  readonly shadow: {
195
195
  readonly boxShadow: "none";
package/src/component-tokens/ComponentTokens.d.ts CHANGED
@@ -3,14 +3,14 @@ export declare const componentTokenDefinitions: {
3
3
  card: {
4
4
  readonly DEFAULT: {
5
5
  readonly border: {
6
- readonly borderColor: "rgb(var(--color-slate-200))";
7
- readonly borderRadius: "var(--border-radius-DEFAULT)";
6
+ readonly borderColor: "rgb(var(--color-secondary-200))";
7
+ readonly borderRadius: "var(--border-radius-lg)";
8
8
  };
9
9
  readonly "popover-border": {
10
- readonly borderRadius: "var(--border-radius-DEFAULT)";
10
+ readonly borderRadius: "var(--border-radius-lg)";
11
11
  };
12
12
  readonly shadow: {
13
- readonly boxShadow: "var(--box-shadow-DEFAULT)";
13
+ readonly boxShadow: "var(--box-shadow-none)";
14
14
  };
15
15
  readonly spacing: {
16
16
  readonly gap: "var(--spacing-3)";
@@ -22,7 +22,7 @@ export declare const componentTokenDefinitions: {
22
22
  };
23
23
  readonly "spacing-md": {
24
24
  readonly gap: "var(--spacing-4)";
25
- readonly padding: "var(--spacing-6)";
25
+ readonly padding: "var(--spacing-4)";
26
26
  };
27
27
  };
28
28
  readonly "theme-marketing": {
@@ -136,18 +136,18 @@ export declare const componentTokenDefinitions: {
136
136
  readonly borderStyle: "hidden";
137
137
  };
138
138
  readonly "focus-hover": {
139
- readonly borderWidth: "0px";
140
- readonly borderBottomWidth: "2px";
139
+ readonly borderWidth: "1px";
140
+ readonly borderBottomWidth: "1px";
141
141
  readonly borderColor: "rgb(var(--color-black-DEFAULT))";
142
142
  readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
143
143
  readonly backgroundColor: "transparent";
144
144
  };
145
145
  readonly border: {
146
146
  readonly borderStyle: "solid";
147
- readonly borderWidth: "0px";
148
- readonly borderBottomWidth: "2px";
149
- readonly borderColor: "rgb(var(--color-white-DEFAULT))";
150
- readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
147
+ readonly borderWidth: "1px";
148
+ readonly borderBottomWidth: "1px";
149
+ readonly borderColor: "rgb(var(--color-gray-300))";
150
+ readonly borderBottomColor: "rgb(var(--color-gray-300))";
151
151
  readonly borderRadius: "0px";
152
152
  };
153
153
  readonly "focus-within": {
@@ -208,8 +208,8 @@ export declare const componentTokenDefinitions: {
208
208
  };
209
209
  readonly "theme-marketing": {
210
210
  readonly border: {
211
- readonly borderRadius: "70px";
212
- readonly borderWidth: "0px";
211
+ readonly borderRadius: "8px";
212
+ readonly borderWidth: "1px";
213
213
  };
214
214
  readonly shadow: {
215
215
  readonly boxShadow: "none";
package/src/component-tokens/MockComponent.d.ts CHANGED
@@ -1,26 +1,26 @@
1
- export declare const MockComponentTokenDefinition: {
1
+ export declare const MockComponentTokenDefinitionAlternative: {
2
2
  readonly DEFAULT: {
3
3
  readonly border: {
4
4
  readonly borderRadius: "var(--border-radius-DEFAULT)";
5
+ readonly borderWidth: "var(--border-width-DEFAULT)";
5
6
  };
6
7
  };
7
8
  readonly "theme-marketing": {
8
9
  readonly border: {
9
- readonly borderRadius: "var(--border-radius-2xl)";
10
+ readonly borderRadius: "var(--border-radius-md)";
11
+ readonly borderWidth: "var(--border-width-thin)";
10
12
  };
11
13
  };
12
14
  };
13
- export declare const MockComponentTokenDefinitionAlternative: {
15
+ export declare const MockComponentTokenDefinition: {
14
16
  readonly DEFAULT: {
15
17
  readonly border: {
16
18
  readonly borderRadius: "var(--border-radius-DEFAULT)";
17
- readonly borderWidth: "var(--border-width-DEFAULT)";
18
19
  };
19
20
  };
20
21
  readonly "theme-marketing": {
21
22
  readonly border: {
22
- readonly borderRadius: "var(--border-radius-md)";
23
- readonly borderWidth: "var(--border-width-thin)";
23
+ readonly borderRadius: "var(--border-radius-2xl)";
24
24
  };
25
25
  };
26
26
  };
package/src/component-tokens/components/BaseInput.tokens.d.ts CHANGED
@@ -16,8 +16,8 @@ export declare const BaseInputTokenDefinition: {
16
16
  };
17
17
  readonly "theme-marketing": {
18
18
  readonly border: {
19
- readonly borderRadius: "70px";
20
- readonly borderWidth: "0px";
19
+ readonly borderRadius: "8px";
20
+ readonly borderWidth: "1px";
21
21
  };
22
22
  readonly shadow: {
23
23
  readonly boxShadow: "none";
package/src/component-tokens/components/Card.tokens.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  export declare const CardTokenDefinition: {
2
2
  readonly DEFAULT: {
3
3
  readonly border: {
4
- readonly borderColor: "rgb(var(--color-slate-200))";
5
- readonly borderRadius: "var(--border-radius-DEFAULT)";
4
+ readonly borderColor: "rgb(var(--color-secondary-200))";
5
+ readonly borderRadius: "var(--border-radius-lg)";
6
6
  };
7
7
  readonly "popover-border": {
8
- readonly borderRadius: "var(--border-radius-DEFAULT)";
8
+ readonly borderRadius: "var(--border-radius-lg)";
9
9
  };
10
10
  readonly shadow: {
11
- readonly boxShadow: "var(--box-shadow-DEFAULT)";
11
+ readonly boxShadow: "var(--box-shadow-none)";
12
12
  };
13
13
  readonly spacing: {
14
14
  readonly gap: "var(--spacing-3)";
@@ -20,7 +20,7 @@ export declare const CardTokenDefinition: {
20
20
  };
21
21
  readonly "spacing-md": {
22
22
  readonly gap: "var(--spacing-4)";
23
- readonly padding: "var(--spacing-6)";
23
+ readonly padding: "var(--spacing-4)";
24
24
  };
25
25
  };
26
26
  readonly "theme-marketing": {
package/src/component-tokens/components/Search.tokens.d.ts CHANGED
@@ -50,18 +50,18 @@ export declare const SearchTokenDefinition: {
50
50
  readonly borderStyle: "hidden";
51
51
  };
52
52
  readonly "focus-hover": {
53
- readonly borderWidth: "0px";
54
- readonly borderBottomWidth: "2px";
53
+ readonly borderWidth: "1px";
54
+ readonly borderBottomWidth: "1px";
55
55
  readonly borderColor: "rgb(var(--color-black-DEFAULT))";
56
56
  readonly borderBottomColor: "rgb(var(--color-black-DEFAULT))";
57
57
  readonly backgroundColor: "transparent";
58
58
  };
59
59
  readonly border: {
60
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))";
61
+ readonly borderWidth: "1px";
62
+ readonly borderBottomWidth: "1px";
63
+ readonly borderColor: "rgb(var(--color-gray-300))";
64
+ readonly borderBottomColor: "rgb(var(--color-gray-300))";
65
65
  readonly borderRadius: "0px";
66
66
  };
67
67
  readonly "focus-within": {