@revikornmann/muka-ui 0.26.0 → 0.27.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 (79) hide show
  1. package/dist/cjs/components/Avatar/Avatar.css +79 -30
  2. package/dist/cjs/components/Avatar/Avatar.js +1 -1
  3. package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
  4. package/dist/cjs/components/Avatar/AvatarGroup.js +4 -3
  5. package/dist/cjs/components/Avatar/AvatarGroup.js.map +1 -1
  6. package/dist/cjs/components/Button/Button.css +33 -0
  7. package/dist/cjs/components/Button/Button.js +2 -2
  8. package/dist/cjs/components/DataPieChart/DataPieChart.js +5 -2
  9. package/dist/cjs/components/DataPieChart/DataPieChart.js.map +1 -1
  10. package/dist/cjs/components/DataPieChart/index.js.map +1 -1
  11. package/dist/cjs/components/Tabs/Tabs.css +37 -14
  12. package/dist/cjs/components/Tabs/Tabs.js +30 -10
  13. package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
  14. package/dist/cjs/components/index.js.map +1 -1
  15. package/dist/esm/components/Avatar/Avatar.css +79 -30
  16. package/dist/esm/components/Avatar/Avatar.js +1 -1
  17. package/dist/esm/components/Avatar/Avatar.js.map +1 -1
  18. package/dist/esm/components/Avatar/AvatarGroup.js +4 -3
  19. package/dist/esm/components/Avatar/AvatarGroup.js.map +1 -1
  20. package/dist/esm/components/Button/Button.css +33 -0
  21. package/dist/esm/components/Button/Button.js +2 -2
  22. package/dist/esm/components/DataPieChart/DataPieChart.js +4 -1
  23. package/dist/esm/components/DataPieChart/DataPieChart.js.map +1 -1
  24. package/dist/esm/components/DataPieChart/index.js.map +1 -1
  25. package/dist/esm/components/Tabs/Tabs.css +37 -14
  26. package/dist/esm/components/Tabs/Tabs.js +30 -10
  27. package/dist/esm/components/Tabs/Tabs.js.map +1 -1
  28. package/dist/esm/components/index.js.map +1 -1
  29. package/dist/styles/components/Avatar.css +79 -30
  30. package/dist/styles/components/Button.css +33 -0
  31. package/dist/styles/components/Tabs.css +37 -14
  32. package/dist/styles/index.css +796 -648
  33. package/dist/styles/muka-dark.css +796 -648
  34. package/dist/styles/muka-light.css +796 -648
  35. package/dist/styles/tokens-bouwplan-dark.css +48 -5
  36. package/dist/styles/tokens-bouwplan-light.css +48 -5
  37. package/dist/styles/tokens-fscl-dark.css +48 -5
  38. package/dist/styles/tokens-fscl-light.css +48 -5
  39. package/dist/styles/tokens-grip-dark.css +48 -5
  40. package/dist/styles/tokens-grip-light.css +48 -5
  41. package/dist/styles/tokens-muka-dark.css +48 -5
  42. package/dist/styles/tokens-muka-light.css +48 -5
  43. package/dist/styles/tokens-wireframe-dark.css +48 -5
  44. package/dist/styles/tokens-wireframe-light.css +48 -5
  45. package/dist/styles/wireframe-dark.css +796 -648
  46. package/dist/styles/wireframe-light.css +796 -648
  47. package/dist/types/components/Avatar/Avatar.d.ts +8 -3
  48. package/dist/types/components/Avatar/Avatar.d.ts.map +1 -1
  49. package/dist/types/components/Avatar/AvatarGroup.d.ts +10 -5
  50. package/dist/types/components/Avatar/AvatarGroup.d.ts.map +1 -1
  51. package/dist/types/components/Avatar/index.d.ts +1 -1
  52. package/dist/types/components/Avatar/index.d.ts.map +1 -1
  53. package/dist/types/components/Button/Button.d.ts +3 -3
  54. package/dist/types/components/Button/Button.d.ts.map +1 -1
  55. package/dist/types/components/DataPieChart/DataPieChart.d.ts +13 -2
  56. package/dist/types/components/DataPieChart/DataPieChart.d.ts.map +1 -1
  57. package/dist/types/components/DataPieChart/index.d.ts +1 -1
  58. package/dist/types/components/DataPieChart/index.d.ts.map +1 -1
  59. package/dist/types/components/Tabs/Tabs.d.ts +17 -2
  60. package/dist/types/components/Tabs/Tabs.d.ts.map +1 -1
  61. package/dist/types/components/index.d.ts +2 -2
  62. package/dist/types/components/index.d.ts.map +1 -1
  63. package/package.json +1 -1
  64. package/tokens/t1-primitives/color.json +10 -0
  65. package/tokens/t2-alias/base.json +14 -0
  66. package/tokens/t2-alias/brand/bouwplan/dark.json +5 -0
  67. package/tokens/t2-alias/brand/bouwplan/light.json +5 -0
  68. package/tokens/t2-alias/brand/fscl/dark.json +5 -0
  69. package/tokens/t2-alias/brand/fscl/light.json +5 -0
  70. package/tokens/t2-alias/brand/grip/dark.json +14 -0
  71. package/tokens/t2-alias/brand/grip/light.json +14 -0
  72. package/tokens/t2-alias/brand/muka/dark.json +14 -0
  73. package/tokens/t2-alias/brand/muka/light.json +14 -0
  74. package/tokens/t2-alias/brand/wireframe/dark.json +14 -0
  75. package/tokens/t2-alias/brand/wireframe/light.json +14 -0
  76. package/tokens/t3-semantics/ui.json +49 -2
  77. package/tokens/t4-components/avatar.json +82 -18
  78. package/tokens/t4-components/button.json +56 -0
  79. package/tokens/t4-components/tabs.json +41 -1
package/tokens/t4-components/avatar.json CHANGED
@@ -5,6 +5,18 @@
5
5
  },
6
6
  "avatar": {
7
7
  "size": {
8
+ "4xs": {
9
+ "$type": "sizing",
10
+ "$value": "{size.md}"
11
+ },
12
+ "3xs": {
13
+ "$type": "sizing",
14
+ "$value": "{size.xl}"
15
+ },
16
+ "2xs": {
17
+ "$type": "sizing",
18
+ "$value": "{size.2xl}"
19
+ },
8
20
  "xs": {
9
21
  "$type": "sizing",
10
22
  "$value": "{size.3xl}"
@@ -47,12 +59,6 @@
47
59
  "$value": "{color.text.muted.default}"
48
60
  }
49
61
  },
50
- "border": {
51
- "default": {
52
- "$type": "color",
53
- "$value": "{color.border.default}"
54
- }
55
- },
56
62
  "status": {
57
63
  "online": {
58
64
  "$type": "color",
@@ -80,9 +86,21 @@
80
86
  "square": {
81
87
  "$type": "borderRadius",
82
88
  "$value": "{border.radius.lg}"
89
+ },
90
+ "square-sm": {
91
+ "$type": "borderRadius",
92
+ "$value": "{border.radius.md}"
83
93
  }
84
94
  },
85
95
  "font-size": {
96
+ "3xs": {
97
+ "$type": "dimension",
98
+ "$value": "{font.size.xs}"
99
+ },
100
+ "2xs": {
101
+ "$type": "dimension",
102
+ "$value": "{font.size.xs}"
103
+ },
86
104
  "xs": {
87
105
  "$type": "dimension",
88
106
  "$value": "{font.size.xs}"
@@ -105,6 +123,14 @@
105
123
  }
106
124
  },
107
125
  "status-size": {
126
+ "3xs": {
127
+ "$type": "sizing",
128
+ "$value": "{size.xs}"
129
+ },
130
+ "2xs": {
131
+ "$type": "sizing",
132
+ "$value": "{size.xs}"
133
+ },
108
134
  "xs": {
109
135
  "$type": "sizing",
110
136
  "$value": "{size.xs}"
@@ -126,21 +152,59 @@
126
152
  "$value": "{size.xl}"
127
153
  }
128
154
  },
129
- "border": {
130
- "width": {
131
- "$type": "dimension",
132
- "$value": "{spacing.px}"
133
- }
134
- },
135
155
  "group": {
136
- "spacing": {
137
- "tight": {
156
+ "ring": {
157
+ "width": {
138
158
  "$type": "dimension",
139
- "$value": "-{spacing.2}"
159
+ "$value": "{border.width.bold}"
140
160
  },
141
- "normal": {
142
- "$type": "dimension",
143
- "$value": "-{spacing.1}"
161
+ "color": {
162
+ "$type": "color",
163
+ "$value": "{color.surface.level3}"
164
+ }
165
+ },
166
+ "overlap": {
167
+ "tight": {
168
+ "sm": {
169
+ "$type": "dimension",
170
+ "$value": "{spacing.8}"
171
+ },
172
+ "2xs": {
173
+ "$type": "dimension",
174
+ "$value": "{spacing.5}"
175
+ },
176
+ "3xs": {
177
+ "$type": "dimension",
178
+ "$value": "{spacing.4}"
179
+ }
180
+ },
181
+ "compact": {
182
+ "sm": {
183
+ "$type": "dimension",
184
+ "$value": "{spacing.6}"
185
+ },
186
+ "2xs": {
187
+ "$type": "dimension",
188
+ "$value": "{spacing.4}"
189
+ },
190
+ "3xs": {
191
+ "$type": "dimension",
192
+ "$value": "{spacing.3}"
193
+ }
194
+ },
195
+ "spacious": {
196
+ "sm": {
197
+ "$type": "dimension",
198
+ "$value": "{spacing.4}"
199
+ },
200
+ "2xs": {
201
+ "$type": "dimension",
202
+ "$value": "{spacing.3}"
203
+ },
204
+ "3xs": {
205
+ "$type": "dimension",
206
+ "$value": "{spacing.2}"
207
+ }
144
208
  }
145
209
  }
146
210
  }
package/tokens/t4-components/button.json CHANGED
@@ -61,6 +61,62 @@
61
61
  }
62
62
  }
63
63
  },
64
+ "destructive": {
65
+ "background": {
66
+ "default": {
67
+ "$type": "color",
68
+ "$value": "{color.state.error.solid.default}"
69
+ },
70
+ "hover": {
71
+ "$type": "color",
72
+ "$value": "{color.state.error.solid.hover}"
73
+ },
74
+ "pressed": {
75
+ "$type": "color",
76
+ "$value": "{color.state.error.solid.pressed}"
77
+ },
78
+ "disabled": {
79
+ "$type": "color",
80
+ "$value": "{color.surface.level1}"
81
+ }
82
+ },
83
+ "foreground": {
84
+ "default": {
85
+ "$type": "color",
86
+ "$value": "{color.text.default.inverse}"
87
+ },
88
+ "hover": {
89
+ "$type": "color",
90
+ "$value": "{color.text.default.inverse}"
91
+ },
92
+ "pressed": {
93
+ "$type": "color",
94
+ "$value": "{color.text.default.inverse}"
95
+ },
96
+ "disabled": {
97
+ "$type": "color",
98
+ "$value": "{color.text.muted.default}"
99
+ }
100
+ },
101
+ "shadow": {
102
+ "default": {
103
+ "$type": "boxShadow",
104
+ "$value": "{shadow.bevel}"
105
+ },
106
+ "hover": {
107
+ "$type": "boxShadow",
108
+ "$value": "{shadow.bevel}"
109
+ },
110
+ "pressed": {
111
+ "$type": "boxShadow",
112
+ "$value": "none"
113
+ },
114
+ "disabled": {
115
+ "$type": "boxShadow",
116
+ "$value": "none"
117
+ }
118
+ }
119
+ },
64
120
  "secondary": {
65
121
  "background": {
66
122
  "default": {
package/tokens/t4-components/tabs.json CHANGED
@@ -13,7 +13,7 @@
13
13
  },
14
14
  "foreground": {
15
15
  "$type": "color",
16
- "$value": "{color.text.default.default}"
16
+ "$value": "{color.text.subtle.default}"
17
17
  },
18
18
  "border": {
19
19
  "$type": "color",
@@ -80,6 +80,20 @@
80
80
  "radius": {
81
81
  "$type": "dimension",
82
82
  "$value": "{input.field.radius.lg}"
83
+ },
84
+ "min-height": {
85
+ "sm": {
86
+ "$type": "dimension",
87
+ "$value": "{spacing.10}"
88
+ },
89
+ "md": {
90
+ "$type": "dimension",
91
+ "$value": "{spacing.14}"
92
+ },
93
+ "lg": {
94
+ "$type": "dimension",
95
+ "$value": "{spacing.20}"
96
+ }
83
97
  }
84
98
  },
85
99
  "panel": {
@@ -91,6 +105,32 @@
91
105
  "$type": "color",
92
106
  "$value": "{color.border.contrast}"
93
107
  }
108
+ },
109
+ "indicator": {
110
+ "color": {
111
+ "$type": "color",
112
+ "$value": "{color.text.action.default}"
113
+ },
114
+ "height": {
115
+ "sm": {
116
+ "$type": "dimension",
117
+ "$value": "2px"
118
+ },
119
+ "md": {
120
+ "$type": "dimension",
121
+ "$value": "3px"
122
+ },
123
+ "lg": {
124
+ "$type": "dimension",
125
+ "$value": "4px"
126
+ }
127
+ }
128
+ },
129
+ "list": {
130
+ "padding-x": {
131
+ "$type": "dimension",
132
+ "$value": "{spacing.4}"
133
+ }
94
134
  }
95
135
  }
96
136
  }