@beehexa/design-rules 2611.3.2 → 2611.4.1

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 (68) hide show
  1. package/README.md +1 -1
  2. package/dist/AGENTS.md +1 -7
  3. package/dist/catalog.json +153 -125
  4. package/dist/docs/scripts/color-pairs.mjs +5 -1
  5. package/dist/docs/scripts/token-utils.mjs +16 -1
  6. package/dist/docs/src/components/ColorDemo.astro +5 -5
  7. package/dist/docs/src/components/ElevationDemo.astro +196 -0
  8. package/dist/docs/src/components/LayoutDemo.astro +1 -1
  9. package/dist/docs/src/components/OpacityDemo.astro +95 -0
  10. package/dist/docs/src/components/ShapeDemo.astro +11 -10
  11. package/dist/docs/src/components/ShapePin.astro +5 -3
  12. package/dist/docs/src/components/ZIndexDemo.astro +102 -0
  13. package/dist/docs/src/content/foundations/styles/border.mdx +3 -3
  14. package/dist/docs/src/content/foundations/styles/color/usage.mdx +11 -4
  15. package/dist/docs/src/content/foundations/styles/data-visualization.mdx +74 -6
  16. package/dist/docs/src/content/foundations/styles/elevation.mdx +66 -3
  17. package/dist/docs/src/content/foundations/styles/icons/usage.mdx +9 -6
  18. package/dist/docs/src/content/foundations/styles/layout/app-frame.mdx +10 -0
  19. package/dist/docs/src/content/foundations/styles/opacity.mdx +43 -5
  20. package/dist/docs/src/content/foundations/styles/size-and-density.mdx +7 -0
  21. package/dist/docs/src/content/foundations/styles/typography/code.mdx +1 -1
  22. package/dist/docs/src/content/foundations/styles/z-index.mdx +63 -5
  23. package/dist/docs/src/content/tools/ant-design-vue-theme.mdx +125 -18
  24. package/dist/docs/src/content/tools/application-content.mdx +42 -0
  25. package/dist/docs/src/content/tools/editors.mdx +27 -0
  26. package/dist/docs/src/content/tools/mermaid.mdx +95 -0
  27. package/dist/docs/src/content/tools/vueflow.mdx +121 -0
  28. package/dist/docs/src/content-vi/foundations/styles/border.mdx +3 -3
  29. package/dist/docs/src/content-vi/foundations/styles/color/usage.mdx +11 -4
  30. package/dist/docs/src/content-vi/foundations/styles/data-visualization.mdx +75 -6
  31. package/dist/docs/src/content-vi/foundations/styles/elevation.mdx +75 -0
  32. package/dist/docs/src/content-vi/foundations/styles/icons/usage.mdx +9 -6
  33. package/dist/docs/src/content-vi/foundations/styles/layout/app-frame.mdx +10 -0
  34. package/dist/docs/src/content-vi/foundations/styles/opacity.mdx +43 -5
  35. package/dist/docs/src/content-vi/foundations/styles/size-and-density.mdx +7 -0
  36. package/dist/docs/src/content-vi/foundations/styles/typography/code.mdx +1 -1
  37. package/dist/docs/src/content-vi/foundations/styles/z-index.mdx +63 -5
  38. package/dist/docs/src/lib/token-descriptions-vi.ts +21 -5
  39. package/dist/docs/src/styles/chrome.css +14 -14
  40. package/dist/docs/src/styles/color.css +19 -32
  41. package/dist/docs/src/styles/docs.css +18 -34
  42. package/dist/docs/src/styles/elevation.css +83 -0
  43. package/dist/docs/src/styles/global.css +1 -10
  44. package/dist/docs/src/styles/icons.css +11 -15
  45. package/dist/docs/src/styles/kit.css +112 -0
  46. package/dist/docs/src/styles/layout.css +1 -6
  47. package/dist/docs/src/styles/opacity.css +43 -0
  48. package/dist/docs/src/styles/shapes.css +15 -19
  49. package/dist/docs/src/styles/tokens.css +1282 -3
  50. package/dist/docs/src/styles/tokens.js +358 -3
  51. package/dist/docs/src/styles/typography.css +4 -7
  52. package/dist/docs/src/styles/zindex.css +56 -0
  53. package/dist/docs/tokens/border.json +1 -1
  54. package/dist/docs/tokens/color.json +57 -3
  55. package/dist/docs/tokens/content.json +19 -0
  56. package/dist/docs/tokens/diagram.json +48 -0
  57. package/dist/docs/tokens/editor.json +129 -0
  58. package/dist/docs/tokens/elevation.json +15 -5
  59. package/dist/docs/tokens/flow.json +497 -0
  60. package/dist/docs/tokens/opacity.json +9 -0
  61. package/dist/docs/tokens/resize.json +67 -0
  62. package/dist/docs/tokens/size.json +6 -0
  63. package/dist/docs/tokens/spacing.json +4 -4
  64. package/dist/docs/tokens/typography.json +5 -0
  65. package/dist/docs/tokens/visualization.json +123 -0
  66. package/dist/docs/tokens/z-index.json +49 -0
  67. package/dist/index.js +153 -125
  68. package/package.json +6 -1
package/dist/docs/src/styles/shapes.css CHANGED
@@ -25,30 +25,22 @@
25
25
  /* Small UI parts drawn with tokens. */
26
26
  .sh-check { display: inline-grid; place-items: center; width: var(--bh-space-200); height: var(--bh-space-200); border-radius: var(--bh-radius-050); color: var(--bh-color-text-inverse); background: var(--bh-color-background-neutral-bold); }
27
27
  .sh-check svg { width: var(--bh-space-150); height: var(--bh-space-150); }
28
- .sh-tag { display: inline-flex; align-items: center; height: var(--bh-size-control-small); padding: 0 var(--bh-space-100); border-radius: var(--bh-radius-050); color: var(--bh-color-text); background: var(--bh-color-background-neutral); font: var(--bh-font-label-small); }
29
- .sh-tag.is-pill { border-radius: var(--bh-radius-full); color: var(--bh-color-text-success); background: var(--bh-color-background-success-subtle); }
30
28
  .sh-badge { display: inline-grid; place-items: center; min-width: var(--bh-space-250); height: var(--bh-space-250); padding: 0 var(--bh-space-050); border-radius: var(--bh-radius-050); color: var(--bh-color-text-on-bold); background: var(--bh-color-background-danger-bold); font: var(--bh-font-label-small); }
31
- .sh-menu { display: grid; width: 12rem; padding: var(--bh-space-050); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-100); background: var(--bh-color-surface); box-shadow: var(--bh-elevation-shadow-overlay); }
32
- .sh-menu > span:not(.sh-pin), .sh-menu > .sh-pin > span:first-child { padding: var(--bh-space-075) var(--bh-space-100); border-radius: var(--bh-radius-050); color: var(--bh-color-text); font: var(--bh-font-body-default); }
33
- .sh-menu > span:not(.sh-pin).is-on, .sh-menu > .sh-pin > span:first-child.is-on { background: var(--bh-color-background-neutral-subtle-hover); }
34
- .sh-menu > span:not(.sh-pin).is-focus, .sh-menu > .sh-pin > span:first-child.is-focus { outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus); outline-offset: calc(-1 * var(--bh-state-focus-offset)); }
35
- .sh-tip { position: relative; padding: var(--bh-space-050) var(--bh-space-100); border-radius: var(--bh-radius-100); color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); font: var(--bh-font-body-small); }
29
+ .sh-menu { width: 12rem; }
30
+ .sh-tip { position: relative; }
36
31
  .sh-card { display: grid; gap: var(--bh-space-050); width: 15rem; padding: var(--bh-space-300); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-150); background: var(--bh-color-surface); }
37
32
  .sh-card b { color: var(--bh-color-text); font: var(--bh-font-heading-small); }
38
33
  .sh-card span { color: var(--bh-color-text-subtle); font: var(--bh-font-body-default); }
39
34
  .sh-card.is-selected { border: var(--bh-border-width-selected) solid var(--bh-color-border-selected); padding: calc(var(--bh-space-300) - var(--bh-border-width-selected) + var(--bh-border-width-default)); }
40
- .sh-dialog { display: grid; gap: var(--bh-space-200); width: 18rem; padding: var(--bh-space-300); border-radius: var(--bh-radius-200); background: var(--bh-color-surface); box-shadow: var(--bh-elevation-shadow-overlay); }
35
+ .sh-dialog { display: grid; gap: var(--bh-space-200); width: 18rem; padding: var(--bh-space-300); border-radius: var(--bh-radius-200); background: var(--bh-color-surface-overlay); box-shadow: var(--bh-elevation-shadow-modal); }
41
36
  .sh-dialog b { font: var(--bh-font-heading-small); }
42
37
  .sh-dialog p { margin: 0; color: var(--bh-color-text-subtle); font: var(--bh-font-body-default); }
43
38
  .sh-dialog .sh-row { justify-content: flex-end; }
44
39
  .sh-group { display: inline-flex; white-space: nowrap; gap: var(--bh-space-050); padding: var(--bh-space-050); border-radius: var(--bh-radius-150); background: var(--bh-color-background-neutral); }
45
40
  .sh-group > span:not(.sh-pin), .sh-group > .sh-pin > span:first-child { display: inline-flex; align-items: center; height: var(--bh-size-control-small); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); color: var(--bh-color-text-subtle); font: var(--bh-font-label-default); }
46
41
  .sh-group > span:not(.sh-pin).is-on, .sh-group > .sh-pin > span:first-child.is-on { color: var(--bh-color-text); background: var(--bh-color-surface); box-shadow: 0 0 0 var(--bh-border-width-default) var(--bh-color-border); }
47
- .sh-avatar { display: inline-grid; place-items: center; width: var(--bh-space-600); height: var(--bh-space-600); border-radius: var(--bh-radius-full); color: var(--bh-color-text); background: var(--bh-color-background-neutral); font: var(--bh-font-label-default); }
48
- .sh-switch { position: relative; width: var(--bh-space-500); height: var(--bh-size-control-small); border-radius: var(--bh-radius-full); background: var(--bh-color-background-neutral-bold); }
49
- .sh-switch::after { content: ""; position: absolute; top: var(--bh-space-025); right: var(--bh-space-025); width: calc(var(--bh-size-control-small) - 2 * var(--bh-space-025)); height: calc(var(--bh-size-control-small) - 2 * var(--bh-space-025)); border-radius: var(--bh-radius-full); background: var(--bh-color-surface); }
50
42
  .sh-frame { display: grid; width: min(100%, 26rem); border: var(--bh-border-width-default) solid var(--bh-color-border); background: var(--bh-color-surface); }
51
- .sh-frame header { padding: var(--bh-space-100) var(--bh-space-200); border-bottom: var(--bh-border-width-default) solid var(--bh-color-border); font: var(--bh-font-label-default); }
43
+ .sh-frame header { padding: var(--bh-space-100) var(--bh-space-150); border-bottom: var(--bh-border-width-default) solid var(--bh-color-border); font: var(--bh-font-heading-small); }
52
44
  .sh-table { display: grid; }
53
45
  .sh-table > span:not(.sh-pin), .sh-table > .sh-pin > span:first-child { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--bh-space-150); padding: var(--bh-space-100) var(--bh-space-200); border-bottom: var(--bh-border-width-default) solid var(--bh-color-border); color: var(--bh-color-text); font: var(--bh-font-body-default); font-variant-numeric: tabular-nums; }
54
46
  .sh-table > span:not(.sh-pin):last-child, .sh-table > .sh-pin > span:first-child:last-child { border-bottom: 0; }
@@ -56,14 +48,11 @@
56
48
  .sh-table em { font-style: normal; color: var(--bh-color-text-subtle); }
57
49
 
58
50
  /* Alerts and quotes: the accent bar is a strip clipped by the box, so it follows the corner. */
59
- .sh-alert { position: relative; display: grid; gap: var(--bh-space-025); width: min(100%, 24rem); padding: var(--bh-space-150) var(--bh-space-200) var(--bh-space-150) calc(var(--bh-space-200) + var(--bh-border-width-accent)); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-100); background: var(--bh-color-surface); overflow: hidden; --sh-bar: var(--bh-color-border-danger); }
60
- .sh-alert::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--bh-border-width-accent); background: var(--sh-bar); }
61
- .sh-alert.is-warning { --sh-bar: var(--bh-color-border-warning); }
62
- .sh-alert.is-info { --sh-bar: var(--bh-color-border-info); }
63
- .sh-alert b { color: var(--bh-color-text); font: var(--bh-font-label-default); }
64
- .sh-alert span { color: var(--bh-color-text-subtle); font: var(--bh-font-body-default); }
51
+ .sh-alert { width: min(100%, 24rem); }
52
+ .sh-alert.is-warning { --kit-bar: var(--bh-color-border-warning); }
53
+ .sh-alert.is-info { --kit-bar: var(--bh-color-border-info); }
65
54
  .sh-alert.is-squared { border-radius: 0 var(--bh-radius-100) var(--bh-radius-100) 0; }
66
- .sh-alert.is-boxed { border: var(--bh-border-width-accent) solid var(--bh-color-border-danger); padding-left: var(--bh-space-200); }
55
+ .sh-alert.is-boxed { border: var(--bh-border-width-accent) solid var(--kit-bar); padding-left: var(--bh-space-200); }
67
56
  .sh-alert.is-boxed::before { display: none; }
68
57
  .prose .sh-quote, .sh-quote { margin: 0; max-width: 20rem; padding: var(--bh-space-050) 0 var(--bh-space-050) var(--bh-space-200); border-left: var(--bh-border-width-accent) solid var(--bh-color-border-brand); color: var(--bh-color-text); font: var(--bh-font-body-large); }
69
58
 
@@ -124,7 +113,14 @@
124
113
  .sh-anno.is-left { top: 50%; left: auto; right: calc(100% - var(--sh-m) / 2); flex-direction: row-reverse; align-items: center; transform: translateY(-50%); }
125
114
  .sh-anno.is-left .sh-ln { width: var(--sh-len); height: var(--sh-lw); }
126
115
  .sh-anno.is-solid.is-left { right: 100%; }
116
+ /* Inside pins point at a fill: the dot sits inside the element, the line leaves it downwards or to the left. */
117
+ .sh-anno.is-inside { top: calc(100% - var(--bh-space-150)); left: calc(var(--sh-in) - var(--sh-m) / 2); align-items: flex-start; }
118
+ .sh-anno.is-inside .sh-ln { margin-left: calc(var(--sh-m) / 2 - var(--sh-lw) / 2); }
119
+ .sh-anno.is-inside-left { top: 50%; right: calc(100% - var(--sh-in) - var(--sh-m) / 2); flex-direction: row-reverse; align-items: center; transform: translateY(-50%); }
120
+ .sh-anno.is-inside-left .sh-ln { width: var(--sh-len); height: var(--sh-lw); }
127
121
  @container prose (max-width: 560px) {
122
+ .sh-anno.is-inside-left { top: calc(100% - var(--bh-space-150)); right: auto; left: calc(var(--sh-in) - var(--sh-m) / 2); flex-direction: column; align-items: flex-start; transform: none; }
123
+ .sh-anno.is-inside-left .sh-ln { width: var(--sh-lw); height: var(--sh-len-n, var(--bh-space-1000)); margin-left: calc(var(--sh-m) / 2 - var(--sh-lw) / 2); }
128
124
  .sh-ex.is-left { justify-content: center; padding: var(--bh-space-500) var(--bh-space-300) var(--bh-space-1000); }
129
125
  .sh-anno.is-left, .sh-anno.is-solid.is-left { top: 100%; right: auto; left: calc(var(--bh-border-width-selected) / 2 - var(--sh-m) / 2); flex-direction: column; align-items: flex-start; transform: none; }
130
126
  .sh-anno.is-left .sh-ln { width: var(--sh-lw); height: var(--sh-len-n, var(--sh-len)); margin-left: calc(var(--sh-m) / 2 - var(--sh-lw) / 2); }