@beehexa/design-rules 0.0.0-stage → 2611.3.2

package/dist/docs/src/styles/tokens.css

@@ -0,0 +1,461 @@
+/* Generated from beehexa.design tokens/*.json. Do not edit by hand. */
+:root {
+  --bh-border-width-default: 1px;
+  --bh-border-width-selected: 2px;
+  --bh-border-width-focused: 2px;
+  --bh-border-width-accent: 4px;
+  --bh-breakpoint-xs: 0px;
+  --bh-breakpoint-md: 768px;
+  --bh-breakpoint-lg: 1024px;
+  --bh-breakpoint-xl: 1440px;
+  --bh-color-brand-yellow: #fcb017;
+  --bh-color-brand-graphite: #2b2a28;
+  --bh-color-brand-white: #ffffff;
+  --bh-color-static-white: #ffffff;
+  --bh-color-static-black: #000000;
+  --bh-color-graphite-1: #fdfdfc;
+  --bh-color-graphite-2: #f8f8f8;
+  --bh-color-graphite-3: #f2f2f1;
+  --bh-color-graphite-4: #e8e8e7;
+  --bh-color-graphite-5: #dfdedd;
+  --bh-color-graphite-6: #d0cfce;
+  --bh-color-graphite-7: #bcbbb9;
+  --bh-color-graphite-8: #a3a29f;
+  --bh-color-graphite-9: #878582;
+  --bh-color-graphite-10: #676663;
+  --bh-color-graphite-11: #494846;
+  --bh-color-graphite-12: #2b2a28;
+  --bh-color-yellow-1: #fefdf4;
+  --bh-color-yellow-2: #fff9dd;
+  --bh-color-yellow-3: #fff1bd;
+  --bh-color-yellow-4: #ffe59c;
+  --bh-color-yellow-5: #ffd87c;
+  --bh-color-yellow-6: #ffc757;
+  --bh-color-yellow-7: #fcb017;
+  --bh-color-yellow-8: #d68b00;
+  --bh-color-yellow-9: #a96700;
+  --bh-color-yellow-10: #905600;
+  --bh-color-yellow-11: #764400;
+  --bh-color-yellow-12: #4a3015;
+  --bh-color-blue-1: #fbfdff;
+  --bh-color-blue-2: #f4faff;
+  --bh-color-blue-3: #e6f4fe;
+  --bh-color-blue-4: #d5efff;
+  --bh-color-blue-5: #c2e5ff;
+  --bh-color-blue-6: #acd8fc;
+  --bh-color-blue-7: #8ec8f6;
+  --bh-color-blue-8: #52a1e6;
+  --bh-color-blue-9: #0077d5;
+  --bh-color-blue-10: #0064b5;
+  --bh-color-blue-11: #005195;
+  --bh-color-blue-12: #113264;
+  --bh-color-green-1: #fbfefc;
+  --bh-color-green-2: #f4fbf6;
+  --bh-color-green-3: #e6f6eb;
+  --bh-color-green-4: #d6f1df;
+  --bh-color-green-5: #c4e8d1;
+  --bh-color-green-6: #adddc0;
+  --bh-color-green-7: #8eceaa;
+  --bh-color-green-8: #51ac7d;
+  --bh-color-green-9: #008753;
+  --bh-color-green-10: #007246;
+  --bh-color-green-11: #005c3a;
+  --bh-color-green-12: #193b2d;
+  --bh-color-orange-1: #fefcfb;
+  --bh-color-orange-2: #fff7ed;
+  --bh-color-orange-3: #ffefd6;
+  --bh-color-orange-4: #ffdfb5;
+  --bh-color-orange-5: #ffd19a;
+  --bh-color-orange-6: #ffc182;
+  --bh-color-orange-7: #f5ae73;
+  --bh-color-orange-8: #df8547;
+  --bh-color-orange-9: #ba4e00;
+  --bh-color-orange-10: #a74500;
+  --bh-color-orange-11: #8a3600;
+  --bh-color-orange-12: #582d1d;
+  --bh-color-red-1: #fffcfc;
+  --bh-color-red-2: #fff7f6;
+  --bh-color-red-3: #feebe9;
+  --bh-color-red-4: #ffdbd7;
+  --bh-color-red-5: #ffcec8;
+  --bh-color-red-6: #fdbeb7;
+  --bh-color-red-7: #f4aaa2;
+  --bh-color-red-8: #eb7a71;
+  --bh-color-red-9: #d83b39;
+  --bh-color-red-10: #ba2d2d;
+  --bh-color-red-11: #9b1e20;
+  --bh-color-red-12: #641817;
+  --bh-color-text: var(--bh-color-graphite-12);
+  --bh-color-text-subtle: var(--bh-color-graphite-11);
+  --bh-color-text-subtlest: var(--bh-color-graphite-10);
+  --bh-color-text-disabled: var(--bh-color-graphite-8);
+  --bh-color-text-inverse: var(--bh-color-graphite-1);
+  --bh-color-text-on-bold: var(--bh-color-static-white);
+  --bh-color-text-on-brand: var(--bh-color-brand-graphite);
+  --bh-color-text-danger: var(--bh-color-red-11);
+  --bh-color-text-warning: var(--bh-color-orange-11);
+  --bh-color-text-success: var(--bh-color-green-11);
+  --bh-color-text-info: var(--bh-color-blue-11);
+  --bh-color-icon: var(--bh-color-graphite-11);
+  --bh-color-icon-subtle: var(--bh-color-graphite-10);
+  --bh-color-icon-disabled: var(--bh-color-graphite-8);
+  --bh-color-icon-inverse: var(--bh-color-graphite-1);
+  --bh-color-icon-on-bold: var(--bh-color-static-white);
+  --bh-color-icon-danger: var(--bh-color-red-11);
+  --bh-color-icon-warning: var(--bh-color-orange-11);
+  --bh-color-icon-success: var(--bh-color-green-11);
+  --bh-color-icon-info: var(--bh-color-blue-11);
+  --bh-color-link: var(--bh-color-blue-11);
+  --bh-color-link-hover: var(--bh-color-blue-12);
+  --bh-color-background-neutral: var(--bh-color-graphite-3);
+  --bh-color-background-neutral-hover: var(--bh-color-graphite-4);
+  --bh-color-background-neutral-pressed: var(--bh-color-graphite-5);
+  --bh-color-background-neutral-subtle: transparent;
+  --bh-color-background-neutral-subtle-hover: var(--bh-color-graphite-2);
+  --bh-color-background-neutral-subtle-pressed: var(--bh-color-graphite-3);
+  --bh-color-background-neutral-bold: var(--bh-color-graphite-12);
+  --bh-color-background-neutral-bold-hover: var(--bh-color-graphite-11);
+  --bh-color-background-neutral-bold-pressed: var(--bh-color-graphite-10);
+  --bh-color-background-selected: var(--bh-color-graphite-3);
+  --bh-color-background-selected-hover: var(--bh-color-graphite-4);
+  --bh-color-background-disabled: var(--bh-color-graphite-3);
+  --bh-color-background-brand-subtle: var(--bh-color-yellow-2);
+  --bh-color-background-brand-bold: var(--bh-color-brand-yellow);
+  --bh-color-background-danger-subtle: var(--bh-color-red-3);
+  --bh-color-background-danger-subtle-hover: var(--bh-color-red-4);
+  --bh-color-background-danger-subtle-pressed: var(--bh-color-red-5);
+  --bh-color-background-danger: var(--bh-color-red-5);
+  --bh-color-background-danger-bold: var(--bh-color-red-9);
+  --bh-color-background-danger-bold-hover: var(--bh-color-red-10);
+  --bh-color-background-danger-bold-pressed: var(--bh-color-red-11);
+  --bh-color-background-warning-subtle: var(--bh-color-orange-3);
+  --bh-color-background-warning-subtle-hover: var(--bh-color-orange-4);
+  --bh-color-background-warning-subtle-pressed: var(--bh-color-orange-5);
+  --bh-color-background-warning: var(--bh-color-orange-5);
+  --bh-color-background-warning-bold: var(--bh-color-orange-9);
+  --bh-color-background-warning-bold-hover: var(--bh-color-orange-10);
+  --bh-color-background-warning-bold-pressed: var(--bh-color-orange-11);
+  --bh-color-background-success-subtle: var(--bh-color-green-3);
+  --bh-color-background-success-subtle-hover: var(--bh-color-green-4);
+  --bh-color-background-success-subtle-pressed: var(--bh-color-green-5);
+  --bh-color-background-success: var(--bh-color-green-5);
+  --bh-color-background-success-bold: var(--bh-color-green-9);
+  --bh-color-background-success-bold-hover: var(--bh-color-green-10);
+  --bh-color-background-success-bold-pressed: var(--bh-color-green-11);
+  --bh-color-background-info-subtle: var(--bh-color-blue-3);
+  --bh-color-background-info-subtle-hover: var(--bh-color-blue-4);
+  --bh-color-background-info-subtle-pressed: var(--bh-color-blue-5);
+  --bh-color-background-info: var(--bh-color-blue-5);
+  --bh-color-background-info-bold: var(--bh-color-blue-9);
+  --bh-color-background-info-bold-hover: var(--bh-color-blue-10);
+  --bh-color-background-info-bold-pressed: var(--bh-color-blue-11);
+  --bh-color-surface: var(--bh-color-brand-white);
+  --bh-color-surface-page: var(--bh-color-brand-white);
+  --bh-color-surface-subtle: var(--bh-color-graphite-2);
+  --bh-color-surface-inverse: var(--bh-color-graphite-12);
+  --bh-color-surface-scrim: rgb(43 42 40 / 40%);
+  --bh-color-border: var(--bh-color-graphite-6);
+  --bh-color-border-bold: var(--bh-color-graphite-9);
+  --bh-color-border-disabled: var(--bh-color-graphite-6);
+  --bh-color-border-focus: var(--bh-color-blue-11);
+  --bh-color-border-selected: var(--bh-color-brand-yellow);
+  --bh-color-border-brand: var(--bh-color-brand-yellow);
+  --bh-color-border-brand-subtle: var(--bh-color-yellow-6);
+  --bh-color-border-danger: var(--bh-color-red-9);
+  --bh-color-border-danger-subtle: var(--bh-color-red-7);
+  --bh-color-border-warning: var(--bh-color-orange-9);
+  --bh-color-border-warning-subtle: var(--bh-color-orange-7);
+  --bh-color-border-success: var(--bh-color-green-9);
+  --bh-color-border-success-subtle: var(--bh-color-green-7);
+  --bh-color-border-info: var(--bh-color-blue-9);
+  --bh-color-border-info-subtle: var(--bh-color-blue-7);
+  --bh-color-skeleton: var(--bh-color-graphite-4);
+  --bh-color-skeleton-subtle: var(--bh-color-graphite-3);
+  --bh-color-code-background: var(--bh-color-brand-graphite);
+  --bh-color-code-text: var(--bh-color-graphite-2);
+  --bh-elevation-shadow-raised: 0 1px 2px rgb(43 42 40 / 8%), 0 1px 3px rgb(43 42 40 / 6%);
+  --bh-elevation-shadow-overlay: 0 24px 80px rgb(43 42 40 / 14%);
+  --bh-layout-header-height: var(--bh-space-600);
+  --bh-layout-sidebar-expanded: 17.5rem;
+  --bh-layout-sidebar-collapsed: var(--bh-space-800);
+  --bh-layout-page-narrow: 48rem;
+  --bh-layout-page-wide: 80rem;
+  --bh-layout-page-margin-small: var(--bh-space-200);
+  --bh-layout-page-margin-medium: var(--bh-space-300);
+  --bh-layout-page-margin-large: var(--bh-space-400);
+  --bh-layout-overlay-default: max(50vw, 900px);
+  --bh-layout-overlay-wide: 70vw;
+  --bh-layout-overlay-mobile: 100vw;
+  --bh-layout-description-minimum: 12.5rem;
+  --bh-motion-duration-fast: 100ms;
+  --bh-motion-duration-default: 200ms;
+  --bh-motion-duration-slow: 300ms;
+  --bh-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --bh-radius-0: 0;
+  --bh-radius-100: 0.5rem;
+  --bh-radius-150: 0.75rem;
+  --bh-radius-200: 1rem;
+  --bh-radius-025: 0.125rem;
+  --bh-radius-050: 0.25rem;
+  --bh-radius-075: 0.375rem;
+  --bh-radius-full: 999px;
+  --bh-size-control-small: 1.5rem;
+  --bh-size-control-default: 2rem;
+  --bh-size-control-large: 2.5rem;
+  --bh-size-target-minimum: 1.5rem;
+  --bh-size-target-touch: 2.75rem;
+  --bh-space-0: 0;
+  --bh-space-100: 0.5rem;
+  --bh-space-150: 0.75rem;
+  --bh-space-200: 1rem;
+  --bh-space-250: 1.25rem;
+  --bh-space-300: 1.5rem;
+  --bh-space-400: 2rem;
+  --bh-space-500: 2.5rem;
+  --bh-space-600: 3rem;
+  --bh-space-800: 4rem;
+  --bh-space-1000: 5rem;
+  --bh-space-025: 0.125rem;
+  --bh-space-050: 0.25rem;
+  --bh-space-075: 0.375rem;
+  --bh-state-focus-offset: 2px;
+  --bh-font-family-sans: Inter, "Noto Sans", system-ui, sans-serif;
+  --bh-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --bh-font-size-100: 0.75rem;
+  --bh-font-size-200: 0.875rem;
+  --bh-font-size-300: 1rem;
+  --bh-font-size-400: 1.25rem;
+  --bh-font-size-500: 1.5rem;
+  --bh-font-size-600: 2rem;
+  --bh-font-size-700: 3rem;
+  --bh-font-size-800: 3.75rem;
+  --bh-font-size-900: 4.5rem;
+  --bh-font-weight-regular: 400;
+  --bh-font-weight-medium: 500;
+  --bh-font-weight-semibold: 600;
+  --bh-font-weight-bold: 700;
+  --bh-font-display-large: var(--bh-font-weight-bold) var(--bh-font-size-900)/5rem var(--bh-font-family-sans);
+  --bh-font-display-medium: var(--bh-font-weight-bold) var(--bh-font-size-800)/4.25rem var(--bh-font-family-sans);
+  --bh-font-display-small: var(--bh-font-weight-bold) var(--bh-font-size-700)/3.5rem var(--bh-font-family-sans);
+  --bh-font-heading-xlarge: var(--bh-font-weight-semibold) var(--bh-font-size-600)/2.5rem var(--bh-font-family-sans);
+  --bh-font-heading-large: var(--bh-font-weight-semibold) var(--bh-font-size-500)/2rem var(--bh-font-family-sans);
+  --bh-font-heading-medium: var(--bh-font-weight-semibold) var(--bh-font-size-400)/1.75rem var(--bh-font-family-sans);
+  --bh-font-heading-small: var(--bh-font-weight-semibold) var(--bh-font-size-300)/1.5rem var(--bh-font-family-sans);
+  --bh-font-heading-xsmall: var(--bh-font-weight-semibold) var(--bh-font-size-200)/1.25rem var(--bh-font-family-sans);
+  --bh-font-body-large: var(--bh-font-weight-regular) var(--bh-font-size-300)/1.5rem var(--bh-font-family-sans);
+  --bh-font-body-default: var(--bh-font-weight-regular) var(--bh-font-size-200)/1.25rem var(--bh-font-family-sans);
+  --bh-font-body-small: var(--bh-font-weight-regular) var(--bh-font-size-100)/1rem var(--bh-font-family-sans);
+  --bh-font-label-default: var(--bh-font-weight-medium) var(--bh-font-size-200)/1.25rem var(--bh-font-family-sans);
+  --bh-font-label-small: var(--bh-font-weight-medium) var(--bh-font-size-100)/1rem var(--bh-font-family-sans);
+  --bh-font-code-default: var(--bh-font-weight-regular) var(--bh-font-size-200)/1.25rem var(--bh-font-family-mono);
+}
+:root[data-theme='dark'] {
+  --bh-color-graphite-1: #181717;
+  --bh-color-graphite-2: #201f1f;
+  --bh-color-graphite-3: #282827;
+  --bh-color-graphite-4: #302f2e;
+  --bh-color-graphite-5: #373735;
+  --bh-color-graphite-6: #434241;
+  --bh-color-graphite-7: #555452;
+  --bh-color-graphite-8: #6b6a67;
+  --bh-color-graphite-9: #878682;
+  --bh-color-graphite-10: #a8a6a3;
+  --bh-color-graphite-11: #cac9c6;
+  --bh-color-graphite-12: #eeeeed;
+  --bh-color-yellow-1: #17130d;
+  --bh-color-yellow-2: #1d170f;
+  --bh-color-yellow-3: #32210a;
+  --bh-color-yellow-4: #422902;
+  --bh-color-yellow-5: #513304;
+  --bh-color-yellow-6: #61400c;
+  --bh-color-yellow-7: #74501c;
+  --bh-color-yellow-8: #9a6613;
+  --bh-color-yellow-9: #bd7e1b;
+  --bh-color-yellow-10: #db9517;
+  --bh-color-yellow-11: #fcb017;
+  --bh-color-yellow-12: #f2dba4;
+  --bh-color-blue-1: #0d1520;
+  --bh-color-blue-2: #111927;
+  --bh-color-blue-3: #0d2847;
+  --bh-color-blue-4: #003362;
+  --bh-color-blue-5: #004074;
+  --bh-color-blue-6: #104d87;
+  --bh-color-blue-7: #205d9e;
+  --bh-color-blue-8: #1b6fc5;
+  --bh-color-blue-9: #0088f1;
+  --bh-color-blue-10: #3599fa;
+  --bh-color-blue-11: #6bb3fa;
+  --bh-color-blue-12: #b8dcf5;
+  --bh-color-green-1: #0e1512;
+  --bh-color-green-2: #121b17;
+  --bh-color-green-3: #132d21;
+  --bh-color-green-4: #113b29;
+  --bh-color-green-5: #174933;
+  --bh-color-green-6: #20573e;
+  --bh-color-green-7: #28684a;
+  --bh-color-green-8: #207d54;
+  --bh-color-green-9: #1f9962;
+  --bh-color-green-10: #37a971;
+  --bh-color-green-11: #5ec18a;
+  --bh-color-green-12: #a6e5c0;
+  --bh-color-orange-1: #17120e;
+  --bh-color-orange-2: #1e160f;
+  --bh-color-orange-3: #331e0b;
+  --bh-color-orange-4: #462100;
+  --bh-color-orange-5: #562800;
+  --bh-color-orange-6: #66350c;
+  --bh-color-orange-7: #7e451d;
+  --bh-color-orange-8: #ab5315;
+  --bh-color-orange-9: #db6200;
+  --bh-color-orange-10: #ef7200;
+  --bh-color-orange-11: #f5974e;
+  --bh-color-orange-12: #f1d2b4;
+  --bh-color-red-1: #191110;
+  --bh-color-red-2: #201312;
+  --bh-color-red-3: #3b1310;
+  --bh-color-red-4: #50100f;
+  --bh-color-red-5: #611716;
+  --bh-color-red-6: #722421;
+  --bh-color-red-7: #8c3430;
+  --bh-color-red-8: #bc403b;
+  --bh-color-red-9: #ef4c48;
+  --bh-color-red-10: #ff615a;
+  --bh-color-red-11: #ff8e84;
+  --bh-color-red-12: #facdc8;
+  --bh-color-text-on-bold: var(--bh-color-graphite-1);
+  --bh-color-icon-on-bold: var(--bh-color-graphite-1);
+  --bh-color-background-neutral-subtle-hover: var(--bh-color-graphite-3);
+  --bh-color-background-neutral-subtle-pressed: var(--bh-color-graphite-4);
+  --bh-color-background-selected: var(--bh-color-graphite-4);
+  --bh-color-background-selected-hover: var(--bh-color-graphite-5);
+  --bh-color-surface: var(--bh-color-graphite-2);
+  --bh-color-surface-page: var(--bh-color-graphite-1);
+  --bh-color-surface-scrim: rgb(0 0 0 / 60%);
+  --bh-color-border-danger: var(--bh-color-red-10);
+  --bh-color-border-warning: var(--bh-color-orange-10);
+  --bh-color-border-success: var(--bh-color-green-10);
+  --bh-color-border-info: var(--bh-color-blue-10);
+  --bh-color-code-background: var(--bh-color-graphite-1);
+  --bh-color-code-text: var(--bh-color-graphite-12);
+  --bh-elevation-shadow-raised: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
+  --bh-elevation-shadow-overlay: 0 24px 80px rgb(0 0 0 / 50%);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --bh-color-graphite-1: #181717;
+    --bh-color-graphite-2: #201f1f;
+    --bh-color-graphite-3: #282827;
+    --bh-color-graphite-4: #302f2e;
+    --bh-color-graphite-5: #373735;
+    --bh-color-graphite-6: #434241;
+    --bh-color-graphite-7: #555452;
+    --bh-color-graphite-8: #6b6a67;
+    --bh-color-graphite-9: #878682;
+    --bh-color-graphite-10: #a8a6a3;
+    --bh-color-graphite-11: #cac9c6;
+    --bh-color-graphite-12: #eeeeed;
+    --bh-color-yellow-1: #17130d;
+    --bh-color-yellow-2: #1d170f;
+    --bh-color-yellow-3: #32210a;
+    --bh-color-yellow-4: #422902;
+    --bh-color-yellow-5: #513304;
+    --bh-color-yellow-6: #61400c;
+    --bh-color-yellow-7: #74501c;
+    --bh-color-yellow-8: #9a6613;
+    --bh-color-yellow-9: #bd7e1b;
+    --bh-color-yellow-10: #db9517;
+    --bh-color-yellow-11: #fcb017;
+    --bh-color-yellow-12: #f2dba4;
+    --bh-color-blue-1: #0d1520;
+    --bh-color-blue-2: #111927;
+    --bh-color-blue-3: #0d2847;
+    --bh-color-blue-4: #003362;
+    --bh-color-blue-5: #004074;
+    --bh-color-blue-6: #104d87;
+    --bh-color-blue-7: #205d9e;
+    --bh-color-blue-8: #1b6fc5;
+    --bh-color-blue-9: #0088f1;
+    --bh-color-blue-10: #3599fa;
+    --bh-color-blue-11: #6bb3fa;
+    --bh-color-blue-12: #b8dcf5;
+    --bh-color-green-1: #0e1512;
+    --bh-color-green-2: #121b17;
+    --bh-color-green-3: #132d21;
+    --bh-color-green-4: #113b29;
+    --bh-color-green-5: #174933;
+    --bh-color-green-6: #20573e;
+    --bh-color-green-7: #28684a;
+    --bh-color-green-8: #207d54;
+    --bh-color-green-9: #1f9962;
+    --bh-color-green-10: #37a971;
+    --bh-color-green-11: #5ec18a;
+    --bh-color-green-12: #a6e5c0;
+    --bh-color-orange-1: #17120e;
+    --bh-color-orange-2: #1e160f;
+    --bh-color-orange-3: #331e0b;
+    --bh-color-orange-4: #462100;
+    --bh-color-orange-5: #562800;
+    --bh-color-orange-6: #66350c;
+    --bh-color-orange-7: #7e451d;
+    --bh-color-orange-8: #ab5315;
+    --bh-color-orange-9: #db6200;
+    --bh-color-orange-10: #ef7200;
+    --bh-color-orange-11: #f5974e;
+    --bh-color-orange-12: #f1d2b4;
+    --bh-color-red-1: #191110;
+    --bh-color-red-2: #201312;
+    --bh-color-red-3: #3b1310;
+    --bh-color-red-4: #50100f;
+    --bh-color-red-5: #611716;
+    --bh-color-red-6: #722421;
+    --bh-color-red-7: #8c3430;
+    --bh-color-red-8: #bc403b;
+    --bh-color-red-9: #ef4c48;
+    --bh-color-red-10: #ff615a;
+    --bh-color-red-11: #ff8e84;
+    --bh-color-red-12: #facdc8;
+    --bh-color-text-on-bold: var(--bh-color-graphite-1);
+    --bh-color-icon-on-bold: var(--bh-color-graphite-1);
+    --bh-color-background-neutral-subtle-hover: var(--bh-color-graphite-3);
+    --bh-color-background-neutral-subtle-pressed: var(--bh-color-graphite-4);
+    --bh-color-background-selected: var(--bh-color-graphite-4);
+    --bh-color-background-selected-hover: var(--bh-color-graphite-5);
+    --bh-color-surface: var(--bh-color-graphite-2);
+    --bh-color-surface-page: var(--bh-color-graphite-1);
+    --bh-color-surface-scrim: rgb(0 0 0 / 60%);
+    --bh-color-border-danger: var(--bh-color-red-10);
+    --bh-color-border-warning: var(--bh-color-orange-10);
+    --bh-color-border-success: var(--bh-color-green-10);
+    --bh-color-border-info: var(--bh-color-blue-10);
+    --bh-color-code-background: var(--bh-color-graphite-1);
+    --bh-color-code-text: var(--bh-color-graphite-12);
+    --bh-elevation-shadow-raised: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
+    --bh-elevation-shadow-overlay: 0 24px 80px rgb(0 0 0 / 50%);
+  }
+}
+:lang(vi) {
+  --bh-font-display-large: var(--bh-font-weight-bold) var(--bh-font-size-900)/6.75rem var(--bh-font-family-sans);
+  --bh-font-display-medium: var(--bh-font-weight-bold) var(--bh-font-size-800)/5.5rem var(--bh-font-family-sans);
+  --bh-font-display-small: var(--bh-font-weight-bold) var(--bh-font-size-700)/4.5rem var(--bh-font-family-sans);
+  --bh-font-heading-xlarge: var(--bh-font-weight-semibold) var(--bh-font-size-600)/3rem var(--bh-font-family-sans);
+  --bh-font-heading-large: var(--bh-font-weight-semibold) var(--bh-font-size-500)/2.5rem var(--bh-font-family-sans);
+  --bh-font-heading-medium: var(--bh-font-weight-semibold) var(--bh-font-size-400)/2rem var(--bh-font-family-sans);
+  --bh-font-heading-xsmall: var(--bh-font-weight-semibold) var(--bh-font-size-200)/1.5rem var(--bh-font-family-sans);
+  --bh-font-body-default: var(--bh-font-weight-regular) var(--bh-font-size-200)/1.5rem var(--bh-font-family-sans);
+  --bh-font-body-small: var(--bh-font-weight-regular) var(--bh-font-size-100)/1.25rem var(--bh-font-family-sans);
+  --bh-font-label-default: var(--bh-font-weight-medium) var(--bh-font-size-200)/1.5rem var(--bh-font-family-sans);
+  --bh-font-label-small: var(--bh-font-weight-medium) var(--bh-font-size-100)/1.25rem var(--bh-font-family-sans);
+}
+[lang]:not(:lang(vi)) {
+  --bh-font-display-large: var(--bh-font-weight-bold) var(--bh-font-size-900)/5rem var(--bh-font-family-sans);
+  --bh-font-display-medium: var(--bh-font-weight-bold) var(--bh-font-size-800)/4.25rem var(--bh-font-family-sans);
+  --bh-font-display-small: var(--bh-font-weight-bold) var(--bh-font-size-700)/3.5rem var(--bh-font-family-sans);
+  --bh-font-heading-xlarge: var(--bh-font-weight-semibold) var(--bh-font-size-600)/2.5rem var(--bh-font-family-sans);
+  --bh-font-heading-large: var(--bh-font-weight-semibold) var(--bh-font-size-500)/2rem var(--bh-font-family-sans);
+  --bh-font-heading-medium: var(--bh-font-weight-semibold) var(--bh-font-size-400)/1.75rem var(--bh-font-family-sans);
+  --bh-font-heading-xsmall: var(--bh-font-weight-semibold) var(--bh-font-size-200)/1.25rem var(--bh-font-family-sans);
+  --bh-font-body-default: var(--bh-font-weight-regular) var(--bh-font-size-200)/1.25rem var(--bh-font-family-sans);
+  --bh-font-body-small: var(--bh-font-weight-regular) var(--bh-font-size-100)/1rem var(--bh-font-family-sans);
+  --bh-font-label-default: var(--bh-font-weight-medium) var(--bh-font-size-200)/1.25rem var(--bh-font-family-sans);
+  --bh-font-label-small: var(--bh-font-weight-medium) var(--bh-font-size-100)/1rem var(--bh-font-family-sans);
+}