@beehexa/design-rules 0.0.0-stage → 2611.3.2

package/dist/docs/tokens/elevation.json

@@ -0,0 +1,26 @@
+{
+  "elevation": {
+    "shadow": {
+      "raised": {
+        "$type": "shadow",
+        "$value": "0 1px 2px rgb(43 42 40 / 8%), 0 1px 3px rgb(43 42 40 / 6%)",
+        "$description": "Cards that sit on the page.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%)"
+          }
+        }
+      },
+      "overlay": {
+        "$type": "shadow",
+        "$value": "0 24px 80px rgb(43 42 40 / 14%)",
+        "$description": "Dropdowns, popovers and dialogs.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "0 24px 80px rgb(0 0 0 / 50%)"
+          }
+        }
+      }
+    }
+  }
+}

package/dist/docs/tokens/layout.json

@@ -0,0 +1,29 @@
+{
+  "layout": {
+    "$description": "App-frame, page and data-inspection overlay contracts. See foundations/styles/layout pages; numeric framework APIs convert source rem at a 16px reference root.",
+    "header": {
+      "height": { "$type": "dimension", "$value": "{space.600}", "$description": "48px app header content height; the bottom border is separate. Global controls only; breadcrumbs and page actions belong to the page header." }
+    },
+    "sidebar": {
+      "expanded": { "$type": "dimension", "$value": "17.5rem", "$description": "280px expanded app navigation; below breakpoint.lg it appears in a drawer, not a permanent sider." },
+      "collapsed": { "$type": "dimension", "$value": "{space.800}", "$description": "64px navigation rail after an explicit user collapse. Preserve accessible labels and tooltips." }
+    },
+    "page": {
+      "narrow": { "$type": "dimension", "$value": "48rem", "$description": "768px maximum content width for forms, wizard steps, help and documentation; page margins are outside this cap." },
+      "wide": { "$type": "dimension", "$value": "80rem", "$description": "1280px maximum content width for dashboards, details and settings overviews. Tables, logs, builders and canvases use Full without a cap." },
+      "margin": {
+        "small": { "$type": "dimension", "$value": "{space.200}", "$description": "16px page margin below breakpoint.md." },
+        "medium": { "$type": "dimension", "$value": "{space.300}", "$description": "24px page margin from breakpoint.md to below breakpoint.xl." },
+        "large": { "$type": "dimension", "$value": "{space.400}", "$description": "32px page margin from breakpoint.xl." }
+      }
+    },
+    "overlay": {
+      "default": { "$type": "dimension", "$value": "max(50vw, 900px)", "$description": "Default desktop width for a data-inspection overlay, from breakpoint.lg. Use the mobile role below breakpoint.lg. Not a default for small confirmation dialogs." },
+      "wide": { "$type": "dimension", "$value": "70vw", "$description": "Explicit wide data-inspection variant when its content needs it, from breakpoint.lg. Never a blanket override of all drawers." },
+      "mobile": { "$type": "dimension", "$value": "100vw", "$description": "Full available viewport width for data-inspection overlays below breakpoint.lg; content and actions must reflow." }
+    },
+    "description": {
+      "minimum": { "$type": "dimension", "$value": "12.5rem", "$description": "200px nominal minimum description-column width in desktop structured data inspection. Below the available inline budget, stack content instead of forcing horizontal overflow." }
+    }
+  }
+}

package/dist/docs/tokens/motion.json

@@ -0,0 +1,12 @@
+{
+  "motion": {
+    "duration": {
+      "fast": { "$type": "duration", "$value": "100ms", "$description": "Hover and press feedback." },
+      "default": { "$type": "duration", "$value": "200ms", "$description": "Opening small surfaces." },
+      "slow": { "$type": "duration", "$value": "300ms", "$description": "Opening dialogs and drawers." }
+    },
+    "easing": {
+      "standard": { "$type": "cubicBezier", "$value": "cubic-bezier(0.2, 0, 0, 1)", "$description": "Most transitions." }
+    }
+  }
+}

package/dist/docs/tokens/radius.json

@@ -0,0 +1,44 @@
+{
+  "radius": {
+    "0": {
+      "$type": "dimension",
+      "$value": "0",
+      "$description": "0. Edges that touch the screen, full-width tables and the page header."
+    },
+    "025": {
+      "$type": "dimension",
+      "$value": "0.125rem",
+      "$description": "2 px. A part inside a control, 6 px from its edge."
+    },
+    "050": {
+      "$type": "dimension",
+      "$value": "0.25rem",
+      "$description": "4 px. Checkboxes, tags, badges and menu items; a part inside a control, 4 px from its edge."
+    },
+    "075": {
+      "$type": "dimension",
+      "$value": "0.375rem",
+      "$description": "6 px. No component by default. Use only when the nesting rule gives 6 px."
+    },
+    "100": {
+      "$type": "dimension",
+      "$value": "0.5rem",
+      "$description": "8 px. Buttons, inputs, selects, menus, popovers, tooltips and alerts."
+    },
+    "150": {
+      "$type": "dimension",
+      "$value": "0.75rem",
+      "$description": "12 px. Cards, and groups of controls with 4 px padding."
+    },
+    "200": {
+      "$type": "dimension",
+      "$value": "1rem",
+      "$description": "16 px. Dialogs and drawers, and groups of controls with 8 px padding."
+    },
+    "full": {
+      "$type": "dimension",
+      "$value": "999px",
+      "$description": "Pill and circle. Avatars, switches and pill-shaped chips."
+    }
+  }
+}

package/dist/docs/tokens/size.json

@@ -0,0 +1,13 @@
+{
+  "size": {
+    "control": {
+      "small": { "$type": "dimension", "$value": "1.5rem", "$description": "24 px. Height of small controls: dense tables and their toolbars, filters, tags. Side padding space.100." },
+      "default": { "$type": "dimension", "$value": "2rem", "$description": "32 px. Height of buttons, text fields, selects, segmented controls and tabs everywhere else: forms, the header, toolbars. Side padding space.150." },
+      "large": { "$type": "dimension", "$value": "2.5rem", "$description": "40 px. Height of controls on sign-in and onboarding pages. Optional for the main action on touch screens." }
+    },
+    "target": {
+      "minimum": { "$type": "dimension", "$value": "1.5rem", "$description": "24 px. Smallest area that responds to a click or tap (WCAG 2.2 SC 2.5.8). Every control and icon button is at least this size." },
+      "touch": { "$type": "dimension", "$value": "2.75rem", "$description": "44 px. Area that responds to a tap on touch screens. Extend the hit area around a smaller control; its visible height stays the same." }
+    }
+  }
+}

package/dist/docs/tokens/spacing.json

@@ -0,0 +1,18 @@
+{
+  "space": {
+    "0": { "$type": "dimension", "$value": "0", "$description": "0. Joined items, such as the buttons of a segmented group." },
+    "025": { "$type": "dimension", "$value": "0.125rem", "$description": "2 px. A badge on an icon, a status dot beside text. Never between controls or as padding." },
+    "050": { "$type": "dimension", "$value": "0.25rem", "$description": "4 px. Between an icon and 14 px text; between a title and its description." },
+    "075": { "$type": "dimension", "$value": "0.375rem", "$description": "6 px. Inside components only: above and below the label of a 32 px control, and the sides of a tooltip. Never for layout, sections or card padding." },
+    "100": { "$type": "dimension", "$value": "0.5rem", "$description": "8 px. Between an icon and 16 px text; between buttons; between a label and its field; side padding of 24 px controls." },
+    "150": { "$type": "dimension", "$value": "0.75rem", "$description": "12 px. Side padding of 32 px controls, such as text fields and buttons." },
+    "200": { "$type": "dimension", "$value": "1rem", "$description": "16 px. Between related items: fields, list items, cards. Page margin and grid gutter below 768 px." },
+    "250": { "$type": "dimension", "$value": "1.25rem", "$description": "20 px. Between a section heading and its content. The edge of the logo and the side navigation icons." },
+    "300": { "$type": "dimension", "$value": "1.5rem", "$description": "24 px. Inside cards, panels and dialogs. Page margin and grid gutter from 768 px." },
+    "400": { "$type": "dimension", "$value": "2rem", "$description": "32 px. Between groups, such as form sections. Page margin from 1440 px." },
+    "500": { "$type": "dimension", "$value": "2.5rem", "$description": "40 px. Around empty states." },
+    "600": { "$type": "dimension", "$value": "3rem", "$description": "48 px. Between page sections." },
+    "800": { "$type": "dimension", "$value": "4rem", "$description": "64 px. Between the major sections of a long page. The width of the collapsed side navigation." },
+    "1000": { "$type": "dimension", "$value": "5rem", "$description": "80 px. Top and bottom of sign-in and onboarding pages. Use rarely." }
+  }
+}

package/dist/docs/tokens/states.json

@@ -0,0 +1,12 @@
+{
+  "state": {
+    "$description": "Interaction states. Every colour for a state is a role token: color.*.hover, color.*.pressed, color.background.selected, color.*.disabled and color.border.focus. The focus ring width is border.width.focused; this group holds only the gap between a control and its ring.",
+    "focus": {
+      "offset": {
+        "$type": "dimension",
+        "$value": "2px",
+        "$description": "2 px. Gap between a control and its focus ring. The ring is drawn outside; inside a box that clips it (menu items, table cells, tabs in a scroll area) use the negative value."
+      }
+    }
+  }
+}

package/dist/docs/tokens/typography.json

@@ -0,0 +1,220 @@
+{
+  "font": {
+    "family": {
+      "sans": {
+        "$type": "fontFamily",
+        "$value": "Inter, \"Noto Sans\", system-ui, sans-serif",
+        "$description": "All interface and reading text. Noto Sans is the fallback: it covers Vietnamese and ₫ and is close to Inter in size."
+      },
+      "mono": {
+        "$type": "fontFamily",
+        "$value": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+        "$description": "Code, IDs, keys and token names."
+      }
+    },
+    "size": {
+      "100": {
+        "$type": "dimension",
+        "$value": "0.75rem",
+        "$description": "12 px. Small body, small labels, captions."
+      },
+      "200": {
+        "$type": "dimension",
+        "$value": "0.875rem",
+        "$description": "14 px. Default UI text, labels, code, smallest heading."
+      },
+      "300": {
+        "$type": "dimension",
+        "$value": "1rem",
+        "$description": "16 px. Reading text, card titles."
+      },
+      "400": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "20 px. Section headings."
+      },
+      "500": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "$description": "24 px. Page titles."
+      },
+      "600": {
+        "$type": "dimension",
+        "$value": "2rem",
+        "$description": "32 px. Large titles."
+      },
+      "700": {
+        "$type": "dimension",
+        "$value": "3rem",
+        "$description": "48 px. Display, marketing only."
+      },
+      "800": {
+        "$type": "dimension",
+        "$value": "3.75rem",
+        "$description": "60 px. Display, marketing only."
+      },
+      "900": {
+        "$type": "dimension",
+        "$value": "4.5rem",
+        "$description": "72 px. Display, marketing only."
+      }
+    },
+    "weight": {
+      "regular": {
+        "$type": "fontWeight",
+        "$value": "400",
+        "$description": "Body text."
+      },
+      "medium": {
+        "$type": "fontWeight",
+        "$value": "500",
+        "$description": "Labels: buttons, form labels, tabs, menu items."
+      },
+      "semibold": {
+        "$type": "fontWeight",
+        "$value": "600",
+        "$description": "Headings."
+      },
+      "bold": {
+        "$type": "fontWeight",
+        "$value": "700",
+        "$description": "Display text only."
+      }
+    },
+    "display": {
+      "large": {
+        "$type": "font",
+        "$value": "{font.weight.bold} {font.size.900}/5rem {font.family.sans}",
+        "$description": "72/80. Marketing hero. Below 768 px, use display.small. Vietnamese: 72/108.",
+        "$extensions": {
+          "design.beehexa": {
+            "vi": "{font.weight.bold} {font.size.900}/6.75rem {font.family.sans}"
+          }
+        }
+      },
+      "medium": {
+        "$type": "font",
+        "$value": "{font.weight.bold} {font.size.800}/4.25rem {font.family.sans}",
+        "$description": "60/68. Marketing section opener. Below 768 px, use display.small. Vietnamese: 60/88.",
+        "$extensions": {
+          "design.beehexa": {
+            "vi": "{font.weight.bold} {font.size.800}/5.5rem {font.family.sans}"
+          }
+        }
+      },
+      "small": {
+        "$type": "font",
+        "$value": "{font.weight.bold} {font.size.700}/3.5rem {font.family.sans}",
+        "$description": "48/56. Marketing headline. Below 768 px, use heading.xlarge. Vietnamese: 48/72.",
+        "$extensions": {
+          "design.beehexa": {
+            "vi": "{font.weight.bold} {font.size.700}/4.5rem {font.family.sans}"
+          }
+        }
+      }
+    },
+    "heading": {
+      "xlarge": {
+        "$type": "font",
+        "$value": "{font.weight.semibold} {font.size.600}/2.5rem {font.family.sans}",
+        "$description": "32/40. Large title: empty states, onboarding, docs and landing sections. Vietnamese: 32/48.",
+        "$extensions": {
+          "design.beehexa": {
+            "vi": "{font.weight.semibold} {font.size.600}/3rem {font.family.sans}"
+          }
+        }
+      },
+      "large": {
+        "$type": "font",
+        "$value": "{font.weight.semibold} {font.size.500}/2rem {font.family.sans}",
+        "$description": "24/32. Page title, one per page. Vietnamese: 24/40.",
+        "$extensions": {
+          "design.beehexa": {
+            "vi": "{font.weight.semibold} {font.size.500}/2.5rem {font.family.sans}"
+          }
+        }
+      },
+      "medium": {
+        "$type": "font",
+        "$value": "{font.weight.semibold} {font.size.400}/1.75rem {font.family.sans}",
+        "$description": "20/28. Section and dialog titles. Vietnamese: 20/32.",
+        "$extensions": {
+          "design.beehexa": {
+            "vi": "{font.weight.semibold} {font.size.400}/2rem {font.family.sans}"
+          }
+        }
+      },
+      "small": {
+        "$type": "font",
+        "$value": "{font.weight.semibold} {font.size.300}/1.5rem {font.family.sans}",
+        "$description": "16/24. Card, panel and drawer titles. Vietnamese: same line height."
+      },
+      "xsmall": {
+        "$type": "font",
+        "$value": "{font.weight.semibold} {font.size.200}/1.25rem {font.family.sans}",
+        "$description": "14/20. Group titles in forms, lists and menus; banner titles. Vietnamese: 14/24.",
+        "$extensions": {
+          "design.beehexa": {
+            "vi": "{font.weight.semibold} {font.size.200}/1.5rem {font.family.sans}"
+          }
+        }
+      }
+    },
+    "body": {
+      "large": {
+        "$type": "font",
+        "$value": "{font.weight.regular} {font.size.300}/1.5rem {font.family.sans}",
+        "$description": "16/24. Reading text: descriptions, help, documents, email. Vietnamese: same line height."
+      },
+      "default": {
+        "$type": "font",
+        "$value": "{font.weight.regular} {font.size.200}/1.25rem {font.family.sans}",
+        "$description": "14/20. Default UI text: table cells, inputs, messages. Vietnamese: 14/24.",
+        "$extensions": {
+          "design.beehexa": {
+            "vi": "{font.weight.regular} {font.size.200}/1.5rem {font.family.sans}"
+          }
+        }
+      },
+      "small": {
+        "$type": "font",
+        "$value": "{font.weight.regular} {font.size.100}/1rem {font.family.sans}",
+        "$description": "12/16. Secondary text: helper text, meta, timestamps, tooltips. Vietnamese: 12/20.",
+        "$extensions": {
+          "design.beehexa": {
+            "vi": "{font.weight.regular} {font.size.100}/1.25rem {font.family.sans}"
+          }
+        }
+      }
+    },
+    "label": {
+      "default": {
+        "$type": "font",
+        "$value": "{font.weight.medium} {font.size.200}/1.25rem {font.family.sans}",
+        "$description": "14/20. Buttons, form labels, tabs, menu and nav items. Vietnamese: 14/24.",
+        "$extensions": {
+          "design.beehexa": {
+            "vi": "{font.weight.medium} {font.size.200}/1.5rem {font.family.sans}"
+          }
+        }
+      },
+      "small": {
+        "$type": "font",
+        "$value": "{font.weight.medium} {font.size.100}/1rem {font.family.sans}",
+        "$description": "12/16. Badges, tags, small buttons, table headers. Vietnamese: 12/20.",
+        "$extensions": {
+          "design.beehexa": {
+            "vi": "{font.weight.medium} {font.size.100}/1.25rem {font.family.sans}"
+          }
+        }
+      }
+    },
+    "code": {
+      "default": {
+        "$type": "font",
+        "$value": "{font.weight.regular} {font.size.200}/1.25rem {font.family.mono}",
+        "$description": "14/20. Code blocks, IDs, keys, JSON. Same size as body.default: JetBrains Mono and Inter have the same x-height. Vietnamese: same line height."
+      }
+    }
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export interface RuleDocument {
+  readonly id: string;
+  readonly path: string;
+  readonly documentPath: string;
+  readonly locale: 'en' | 'vi';
+  readonly kind: 'guidance' | 'news' | 'reference';
+  readonly title: string;
+  /** Authored guidance, not a release/GA claim, or an explicitly unfinished source stub. */
+  readonly status: 'active' | 'planned';
+  readonly releasePhase: string | null;
+  readonly planned: readonly string[];
+  readonly body: string;
+  readonly raw: string;
+  readonly frontmatter: Readonly<Record<string, unknown>>;
+}
+export declare const catalog: readonly RuleDocument[];
+export declare function listRules(): readonly RuleDocument[];
+export declare function readRule(id: string): RuleDocument | undefined;
+export declare function searchRules(query: string): readonly RuleDocument[];