@revikornmann/muka-ui 0.4.1 → 0.6.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 (113) hide show
  1. package/cli/commands/brand.js +7 -0
  2. package/cli/commands/init.js +7 -1
  3. package/cli/templates/CLAUDE.md +18 -4
  4. package/cli/templates/muka-ui-guidelines.md +20 -0
  5. package/dist/cjs/components/DataPieChart/DataPieChart.js +1 -1
  6. package/dist/cjs/components/DataPieChart/DataPieChart.js.map +1 -1
  7. package/dist/cjs/components/DataTable/DataTable.css +17 -0
  8. package/dist/cjs/components/DataTable/DataTable.js +15 -2
  9. package/dist/cjs/components/DataTable/DataTable.js.map +1 -1
  10. package/dist/cjs/components/ListItem/ListItem.css +10 -4
  11. package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.css +207 -0
  12. package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js +66 -0
  13. package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -0
  14. package/dist/cjs/components/ProgressAccordeon/index.js +11 -0
  15. package/dist/cjs/components/ProgressAccordeon/index.js.map +1 -0
  16. package/dist/cjs/components/{FormProgressBar/FormProgressBar.css → ProgressTracker/ProgressTracker.css} +28 -22
  17. package/dist/cjs/components/{FormProgressBar/FormProgressBar.js → ProgressTracker/ProgressTracker.js} +20 -20
  18. package/dist/cjs/components/{FormProgressBar/FormProgressBar.js.map → ProgressTracker/ProgressTracker.js.map} +1 -1
  19. package/dist/cjs/components/ProgressTracker/index.js +8 -0
  20. package/dist/cjs/components/{FormProgressBar → ProgressTracker}/index.js.map +1 -1
  21. package/dist/cjs/components/index.js +7 -5
  22. package/dist/cjs/components/index.js.map +1 -1
  23. package/dist/esm/components/DataPieChart/DataPieChart.js +1 -1
  24. package/dist/esm/components/DataPieChart/DataPieChart.js.map +1 -1
  25. package/dist/esm/components/DataTable/DataTable.css +17 -0
  26. package/dist/esm/components/DataTable/DataTable.js +15 -2
  27. package/dist/esm/components/DataTable/DataTable.js.map +1 -1
  28. package/dist/esm/components/ListItem/ListItem.css +10 -4
  29. package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.css +207 -0
  30. package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js +62 -0
  31. package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -0
  32. package/dist/esm/components/ProgressAccordeon/index.js +3 -0
  33. package/dist/esm/components/ProgressAccordeon/index.js.map +1 -0
  34. package/dist/{styles/components/FormProgressBar.css → esm/components/ProgressTracker/ProgressTracker.css} +28 -22
  35. package/dist/esm/components/{FormProgressBar/FormProgressBar.js → ProgressTracker/ProgressTracker.js} +18 -18
  36. package/dist/esm/components/{FormProgressBar/FormProgressBar.js.map → ProgressTracker/ProgressTracker.js.map} +1 -1
  37. package/dist/esm/components/ProgressTracker/index.js +3 -0
  38. package/dist/esm/components/{FormProgressBar → ProgressTracker}/index.js.map +1 -1
  39. package/dist/esm/components/index.js +2 -1
  40. package/dist/esm/components/index.js.map +1 -1
  41. package/dist/styles/components/DataTable.css +17 -0
  42. package/dist/styles/components/ListItem.css +10 -4
  43. package/dist/styles/components/ProgressAccordeon.css +207 -0
  44. package/dist/{esm/components/FormProgressBar/FormProgressBar.css → styles/components/ProgressTracker.css} +28 -22
  45. package/dist/styles/fonts/funnel-display-latin-wght-normal.woff2 +0 -0
  46. package/dist/styles/fonts/funnel-display.LICENSE.txt +93 -0
  47. package/dist/styles/fonts/funnel-sans-latin-wght-normal.woff2 +0 -0
  48. package/dist/styles/fonts/funnel-sans.LICENSE.txt +93 -0
  49. package/dist/styles/fonts/ibm-plex-sans-latin-wght-normal.woff2 +0 -0
  50. package/dist/styles/fonts/ibm-plex-sans.LICENSE.txt +93 -0
  51. package/dist/styles/fonts/lora-latin-wght-normal.woff2 +0 -0
  52. package/dist/styles/fonts/lora.LICENSE.txt +93 -0
  53. package/dist/styles/fonts/quicksand-latin-wght-normal.woff2 +0 -0
  54. package/dist/styles/fonts/quicksand.LICENSE.txt +93 -0
  55. package/dist/styles/fonts/red-hat-display-latin-wght-normal.woff2 +0 -0
  56. package/dist/styles/fonts/red-hat-display.LICENSE.txt +93 -0
  57. package/dist/styles/fonts/red-hat-text-latin-wght-normal.woff2 +0 -0
  58. package/dist/styles/fonts/red-hat-text.LICENSE.txt +93 -0
  59. package/dist/styles/fonts/yesteryear-latin-400-normal.woff2 +0 -0
  60. package/dist/styles/fonts/yesteryear.LICENSE.txt +93 -0
  61. package/dist/styles/fonts-all.css +75 -0
  62. package/dist/styles/fonts-bouwplan.css +30 -0
  63. package/dist/styles/fonts-fscl.css +21 -0
  64. package/dist/styles/fonts-grip.css +21 -0
  65. package/dist/styles/fonts-muka.css +30 -0
  66. package/dist/styles/fonts-wireframe.css +5 -0
  67. package/dist/styles/index.css +947 -568
  68. package/dist/styles/muka-dark.css +947 -568
  69. package/dist/styles/muka-light.css +947 -568
  70. package/dist/styles/tokens-bouwplan-dark.css +174 -66
  71. package/dist/styles/tokens-bouwplan-light.css +174 -66
  72. package/dist/styles/tokens-fscl-dark.css +113 -5
  73. package/dist/styles/tokens-fscl-light.css +113 -5
  74. package/dist/styles/tokens-grip-dark.css +113 -5
  75. package/dist/styles/tokens-grip-light.css +113 -5
  76. package/dist/styles/tokens-muka-dark.css +113 -5
  77. package/dist/styles/tokens-muka-light.css +113 -5
  78. package/dist/styles/tokens-wireframe-dark.css +113 -5
  79. package/dist/styles/tokens-wireframe-light.css +113 -5
  80. package/dist/styles/wireframe-dark.css +915 -568
  81. package/dist/styles/wireframe-light.css +915 -568
  82. package/dist/types/components/DataPieChart/DataPieChart.d.ts +1 -1
  83. package/dist/types/components/DataPieChart/DataPieChart.d.ts.map +1 -1
  84. package/dist/types/components/DataTable/DataTable.d.ts.map +1 -1
  85. package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts +91 -0
  86. package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts.map +1 -0
  87. package/dist/types/components/ProgressAccordeon/index.d.ts +3 -0
  88. package/dist/types/components/ProgressAccordeon/index.d.ts.map +1 -0
  89. package/dist/types/components/{FormProgressBar/FormProgressBar.d.ts → ProgressTracker/ProgressTracker.d.ts} +9 -9
  90. package/dist/types/components/{FormProgressBar/FormProgressBar.d.ts.map → ProgressTracker/ProgressTracker.d.ts.map} +1 -1
  91. package/dist/types/components/ProgressTracker/index.d.ts +3 -0
  92. package/dist/types/components/{FormProgressBar → ProgressTracker}/index.d.ts.map +1 -1
  93. package/dist/types/components/index.d.ts +2 -1
  94. package/dist/types/components/index.d.ts.map +1 -1
  95. package/docs/consumers/setup-instructions.md +22 -3
  96. package/package.json +12 -2
  97. package/scripts/build-fonts.js +248 -0
  98. package/tokens/t1-primitives/color.json +400 -0
  99. package/tokens/t2-alias/brand/bouwplan/dark.json +15 -1
  100. package/tokens/t2-alias/brand/bouwplan/fonts.json +5 -5
  101. package/tokens/t2-alias/brand/bouwplan/light.json +15 -1
  102. package/tokens/t2-alias/brand/fscl/dark.json +15 -1
  103. package/tokens/t2-alias/brand/fscl/light.json +15 -1
  104. package/tokens/t2-alias/brand/grip/dark.json +51 -1
  105. package/tokens/t2-alias/brand/grip/light.json +51 -1
  106. package/tokens/t2-alias/brand/muka/dark.json +51 -1
  107. package/tokens/t2-alias/brand/muka/light.json +51 -1
  108. package/tokens/t2-alias/brand/wireframe/dark.json +51 -1
  109. package/tokens/t2-alias/brand/wireframe/light.json +51 -1
  110. package/tokens/t3-semantics/ui.json +13 -13
  111. package/dist/cjs/components/FormProgressBar/index.js +0 -8
  112. package/dist/esm/components/FormProgressBar/index.js +0 -3
  113. package/dist/types/components/FormProgressBar/index.d.ts +0 -3
@@ -53,6 +53,56 @@
53
53
  "12": {
54
54
  "$type": "color",
55
55
  "$value": "{color.mauveDark.12}"
56
+ },
57
+ "alphaHued": {
58
+ "1": {
59
+ "$type": "color",
60
+ "$value": "{color.mauveDarkA.1}"
61
+ },
62
+ "2": {
63
+ "$type": "color",
64
+ "$value": "{color.mauveDarkA.2}"
65
+ },
66
+ "3": {
67
+ "$type": "color",
68
+ "$value": "{color.mauveDarkA.3}"
69
+ },
70
+ "4": {
71
+ "$type": "color",
72
+ "$value": "{color.mauveDarkA.4}"
73
+ },
74
+ "5": {
75
+ "$type": "color",
76
+ "$value": "{color.mauveDarkA.5}"
77
+ },
78
+ "6": {
79
+ "$type": "color",
80
+ "$value": "{color.mauveDarkA.6}"
81
+ },
82
+ "7": {
83
+ "$type": "color",
84
+ "$value": "{color.mauveDarkA.7}"
85
+ },
86
+ "8": {
87
+ "$type": "color",
88
+ "$value": "{color.mauveDarkA.8}"
89
+ },
90
+ "9": {
91
+ "$type": "color",
92
+ "$value": "{color.mauveDarkA.9}"
93
+ },
94
+ "10": {
95
+ "$type": "color",
96
+ "$value": "{color.mauveDarkA.10}"
97
+ },
98
+ "11": {
99
+ "$type": "color",
100
+ "$value": "{color.mauveDarkA.11}"
101
+ },
102
+ "12": {
103
+ "$type": "color",
104
+ "$value": "{color.mauveDarkA.12}"
105
+ }
56
106
  }
57
107
  },
58
108
  "brand": {
@@ -305,4 +355,4 @@
305
355
  }
306
356
  }
307
357
  }
308
- }
358
+ }
@@ -53,6 +53,56 @@
53
53
  "12": {
54
54
  "$type": "color",
55
55
  "$value": "{color.mauve.12}"
56
+ },
57
+ "alphaHued": {
58
+ "1": {
59
+ "$type": "color",
60
+ "$value": "{color.mauveA.1}"
61
+ },
62
+ "2": {
63
+ "$type": "color",
64
+ "$value": "{color.mauveA.2}"
65
+ },
66
+ "3": {
67
+ "$type": "color",
68
+ "$value": "{color.mauveA.3}"
69
+ },
70
+ "4": {
71
+ "$type": "color",
72
+ "$value": "{color.mauveA.4}"
73
+ },
74
+ "5": {
75
+ "$type": "color",
76
+ "$value": "{color.mauveA.5}"
77
+ },
78
+ "6": {
79
+ "$type": "color",
80
+ "$value": "{color.mauveA.6}"
81
+ },
82
+ "7": {
83
+ "$type": "color",
84
+ "$value": "{color.mauveA.7}"
85
+ },
86
+ "8": {
87
+ "$type": "color",
88
+ "$value": "{color.mauveA.8}"
89
+ },
90
+ "9": {
91
+ "$type": "color",
92
+ "$value": "{color.mauveA.9}"
93
+ },
94
+ "10": {
95
+ "$type": "color",
96
+ "$value": "{color.mauveA.10}"
97
+ },
98
+ "11": {
99
+ "$type": "color",
100
+ "$value": "{color.mauveA.11}"
101
+ },
102
+ "12": {
103
+ "$type": "color",
104
+ "$value": "{color.mauveA.12}"
105
+ }
56
106
  }
57
107
  },
58
108
  "brand": {
@@ -305,4 +355,4 @@
305
355
  }
306
356
  }
307
357
  }
308
- }
358
+ }
@@ -53,6 +53,56 @@
53
53
  "12": {
54
54
  "$type": "color",
55
55
  "$value": "{color.grayDark.12}"
56
+ },
57
+ "alphaHued": {
58
+ "1": {
59
+ "$type": "color",
60
+ "$value": "{color.grayDarkA.1}"
61
+ },
62
+ "2": {
63
+ "$type": "color",
64
+ "$value": "{color.grayDarkA.2}"
65
+ },
66
+ "3": {
67
+ "$type": "color",
68
+ "$value": "{color.grayDarkA.3}"
69
+ },
70
+ "4": {
71
+ "$type": "color",
72
+ "$value": "{color.grayDarkA.4}"
73
+ },
74
+ "5": {
75
+ "$type": "color",
76
+ "$value": "{color.grayDarkA.5}"
77
+ },
78
+ "6": {
79
+ "$type": "color",
80
+ "$value": "{color.grayDarkA.6}"
81
+ },
82
+ "7": {
83
+ "$type": "color",
84
+ "$value": "{color.grayDarkA.7}"
85
+ },
86
+ "8": {
87
+ "$type": "color",
88
+ "$value": "{color.grayDarkA.8}"
89
+ },
90
+ "9": {
91
+ "$type": "color",
92
+ "$value": "{color.grayDarkA.9}"
93
+ },
94
+ "10": {
95
+ "$type": "color",
96
+ "$value": "{color.grayDarkA.10}"
97
+ },
98
+ "11": {
99
+ "$type": "color",
100
+ "$value": "{color.grayDarkA.11}"
101
+ },
102
+ "12": {
103
+ "$type": "color",
104
+ "$value": "{color.grayDarkA.12}"
105
+ }
56
106
  }
57
107
  },
58
108
  "brand": {
@@ -293,4 +343,4 @@
293
343
  }
294
344
  }
295
345
  }
296
- }
346
+ }
@@ -53,6 +53,56 @@
53
53
  "12": {
54
54
  "$type": "color",
55
55
  "$value": "{color.gray.12}"
56
+ },
57
+ "alphaHued": {
58
+ "1": {
59
+ "$type": "color",
60
+ "$value": "{color.grayA.1}"
61
+ },
62
+ "2": {
63
+ "$type": "color",
64
+ "$value": "{color.grayA.2}"
65
+ },
66
+ "3": {
67
+ "$type": "color",
68
+ "$value": "{color.grayA.3}"
69
+ },
70
+ "4": {
71
+ "$type": "color",
72
+ "$value": "{color.grayA.4}"
73
+ },
74
+ "5": {
75
+ "$type": "color",
76
+ "$value": "{color.grayA.5}"
77
+ },
78
+ "6": {
79
+ "$type": "color",
80
+ "$value": "{color.grayA.6}"
81
+ },
82
+ "7": {
83
+ "$type": "color",
84
+ "$value": "{color.grayA.7}"
85
+ },
86
+ "8": {
87
+ "$type": "color",
88
+ "$value": "{color.grayA.8}"
89
+ },
90
+ "9": {
91
+ "$type": "color",
92
+ "$value": "{color.grayA.9}"
93
+ },
94
+ "10": {
95
+ "$type": "color",
96
+ "$value": "{color.grayA.10}"
97
+ },
98
+ "11": {
99
+ "$type": "color",
100
+ "$value": "{color.grayA.11}"
101
+ },
102
+ "12": {
103
+ "$type": "color",
104
+ "$value": "{color.grayA.12}"
105
+ }
56
106
  }
57
107
  },
58
108
  "brand": {
@@ -261,4 +311,4 @@
261
311
  }
262
312
  }
263
313
  }
264
- }
314
+ }
@@ -82,30 +82,30 @@
82
82
  },
83
83
  "hover": {
84
84
  "$type": "color",
85
- "$value": "{alias.color.neutral.2}",
85
+ "$value": "{alias.color.neutral.alphaHued.2}",
86
86
  "$rag": {
87
- "description": "Interactive surface hover tint between level2 and level3",
87
+ "description": "Brand-hued translucent overlay tint for hover interaction feedback",
88
88
  "usage": ["List item hover", "Menu item hover", "Table row hover", "Any interactive surface hover state"],
89
- "accessibility": "Provides visible hover feedback without blending into surrounding surface",
90
- "relationships": ["color.surface.level2", "color.surface.level3", "color.surface.pressed"],
89
+ "accessibility": "Theme-adaptive alpha tint (dark-translucent in light themes, light-translucent in dark) that reads on any surface level without blending in",
90
+ "relationships": ["color.surface.pressed", "alias.color.neutral.alphaHued"],
91
91
  "examples": ["ListItem hover background", "Menu option hover", "Table row hover highlight"],
92
- "brand-impact": "Low - neutral interaction tint",
93
- "semantic-meaning": "Surface tint for hover interaction feedback",
94
- "do": ["Use for hover states on interactive surfaces", "Pair with level2 or level3 surfaces"],
92
+ "brand-impact": "Low - hued neutral interaction tint that tracks the brand gray",
93
+ "semantic-meaning": "Translucent surface overlay for hover interaction feedback",
94
+ "do": ["Use for hover states on interactive surfaces", "Layer over any surface level (level1/2/3 or transparent)"],
95
95
  "dont": ["Use as a static surface level", "Use for non-interactive elements", "Use for selected states"]
96
96
  }
97
97
  },
98
98
  "pressed": {
99
99
  "$type": "color",
100
- "$value": "{alias.color.neutral.1}",
100
+ "$value": "{alias.color.neutral.alphaHued.3}",
101
101
  "$rag": {
102
- "description": "Interactive surface pressed/active tint",
102
+ "description": "Brand-hued translucent overlay tint for pressed/active interaction feedback (stronger than hover)",
103
103
  "usage": ["List item active/pressed", "Menu item active", "Table row active", "Any interactive surface pressed state"],
104
- "accessibility": "Provides visible pressed feedback distinct from hover",
105
- "relationships": ["color.surface.hover", "color.surface.level3"],
104
+ "accessibility": "Theme-adaptive alpha tint stronger than hover, providing visible pressed feedback distinct from hover on any surface level",
105
+ "relationships": ["color.surface.hover", "alias.color.neutral.alphaHued"],
106
106
  "examples": ["ListItem pressed background", "Menu option pressed", "Button active state"],
107
- "brand-impact": "Low - neutral interaction tint",
108
- "semantic-meaning": "Surface tint for pressed interaction feedback",
107
+ "brand-impact": "Low - hued neutral interaction tint that tracks the brand gray",
108
+ "semantic-meaning": "Translucent surface overlay for pressed interaction feedback",
109
109
  "do": ["Use for active/pressed states on interactive surfaces", "Pair with hover token for full interaction scale"],
110
110
  "dont": ["Use as a static surface level", "Use for hover states", "Use for selected states"]
111
111
  }
@@ -1,8 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.default = exports.FormProgressBar = void 0;
4
- var FormProgressBar_1 = require("./FormProgressBar");
5
- Object.defineProperty(exports, "FormProgressBar", { enumerable: true, get: function () { return FormProgressBar_1.FormProgressBar; } });
6
- var FormProgressBar_2 = require("./FormProgressBar");
7
- Object.defineProperty(exports, "default", { enumerable: true, get: function () { return FormProgressBar_2.FormProgressBar; } });
8
- //# sourceMappingURL=index.js.map
@@ -1,3 +0,0 @@
1
- export { FormProgressBar } from './FormProgressBar';
2
- export { FormProgressBar as default } from './FormProgressBar';
3
- //# sourceMappingURL=index.js.map
@@ -1,3 +0,0 @@
1
- export { FormProgressBar, type FormProgressBarProps, type FormProgressBarStep } from './FormProgressBar';
2
- export { FormProgressBar as default } from './FormProgressBar';
3
- //# sourceMappingURL=index.d.ts.map