@codemonster-ru/vueforge-core 1.6.0 → 1.8.0

package/dist/theme-api.js

@@ -1,234 +1,5 @@
-import { vfMotionTokens as o } from "@codemonster-ru/vueforge-theme";
-import { createThemePreset as f } from "@codemonster-ru/vueforge-theme";
-import { b as r } from "./breakpoints-hxAiWC8U.js";
-const e = {
-  breakpointXs: `${r.xs}px`,
-  breakpointSm: `${r.sm}px`,
-  breakpointMd: `${r.md}px`,
-  breakpointLg: `${r.lg}px`,
-  breakpointXl: `${r.xl}px`,
-  breakpoint2xl: `${r["2xl"]}px`
-}, a = {
-  name: "vueforge-default",
-  tokens: {
-    colorBg: "#fcfcfd",
-    colorSurface: "#ffffff",
-    colorSurfaceMuted: "#f5f7fb",
-    colorText: "#172033",
-    colorMuted: "#69738a",
-    colorBorder: "#d8e0ef",
-    colorPrimary: "#0b63f6",
-    colorPrimaryContrast: "#ffffff",
-    colorPrimarySoft: "color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface))",
-    colorPrimaryBorderSoft: "color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border))",
-    colorFocusRing: "color-mix(in srgb, var(--vf-color-primary) 32%, var(--vf-color-surface))",
-    colorSuccess: "#16a34a",
-    colorSuccessContrast: "#ffffff",
-    colorInfo: "#0ea5e9",
-    colorInfoContrast: "#ffffff",
-    colorWarn: "#f59e0b",
-    colorWarnContrast: "#1f1300",
-    colorHelp: "#8b5cf6",
-    colorHelpContrast: "#ffffff",
-    colorDanger: "#dc2626",
-    colorDangerContrast: "#ffffff",
-    colorContrast: "#111827",
-    colorContrastContrast: "#ffffff",
-    colorSuccessSoft: "color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface))",
-    colorInfoSoft: "color-mix(in srgb, var(--vf-color-info) 12%, var(--vf-color-surface))",
-    colorWarnSoft: "color-mix(in srgb, var(--vf-color-warn) 12%, var(--vf-color-surface))",
-    colorHelpSoft: "color-mix(in srgb, var(--vf-color-help) 12%, var(--vf-color-surface))",
-    colorDangerSoft: "color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface))",
-    colorContrastSoft: "color-mix(in srgb, var(--vf-color-contrast) 10%, var(--vf-color-surface))",
-    colorSuccessBorderSoft: "color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border))",
-    colorInfoBorderSoft: "color-mix(in srgb, var(--vf-color-info) 24%, var(--vf-color-border))",
-    colorWarnBorderSoft: "color-mix(in srgb, var(--vf-color-warn) 24%, var(--vf-color-border))",
-    colorHelpBorderSoft: "color-mix(in srgb, var(--vf-color-help) 24%, var(--vf-color-border))",
-    colorDangerBorderSoft: "color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border))",
-    colorContrastBorderSoft: "color-mix(in srgb, var(--vf-color-contrast) 24%, var(--vf-color-border))",
-    focusRingWidth: "3px",
-    radius: "0.75rem",
-    radiusControl: "calc(var(--vf-radius) - 0.125rem)",
-    radiusControlTight: "calc(var(--vf-radius) - 0.25rem)",
-    radiusSurface: "var(--vf-radius)",
-    radiusOverlay: "calc(var(--vf-radius) + 0.125rem)",
-    ...e,
-    controlHeightSm: "1.75rem",
-    controlHeightMd: "2.25rem",
-    controlHeightLg: "2.5rem",
-    controlFontSizeSm: "0.875rem",
-    controlFontSizeMd: "0.9375rem",
-    controlFontSizeLg: "1rem",
-    buttonPaddingSm: "0.25rem 0.5rem",
-    buttonPaddingMd: "0.375rem 0.75rem",
-    buttonPaddingLg: "0.5rem 1rem",
-    buttonGap: "0.5rem",
-    fieldPaddingSm: "0.25rem 0.5rem",
-    fieldPaddingMd: "0.375rem 0.75rem",
-    fieldPaddingLg: "0.5rem 1rem",
-    checkboxSizeSm: "1rem",
-    checkboxSizeMd: "1.125rem",
-    checkboxSizeLg: "1.25rem",
-    selectionGap: "0.75rem",
-    checkboxMarkWidth: "0.25rem",
-    checkboxMarkHeight: "0.5rem",
-    checkboxMarkStrokeWidth: "2px",
-    checkboxMarkOffsetY: "-0.0625rem",
-    radioDotSize: "0.5rem",
-    switchWidthSm: "2rem",
-    switchWidthMd: "2.25rem",
-    switchWidthLg: "2.5rem",
-    switchHeightSm: "1.125rem",
-    switchHeightMd: "1.25rem",
-    switchHeightLg: "1.375rem",
-    switchThumbSizeSm: "0.75rem",
-    switchThumbSizeMd: "0.875rem",
-    switchThumbSizeLg: "1rem",
-    switchThumbInset: "0.125rem",
-    textareaMinHeightSm: "4.5rem",
-    textareaMinHeightMd: "6rem",
-    textareaMinHeightLg: "7rem",
-    overlayPadding: "1rem",
-    overlayGap: "0.75rem",
-    overlayViewportPadding: "1rem",
-    menuPadding: "0.5rem",
-    menuGap: "0.25rem",
-    menuMinWidth: "12rem",
-    surfacePadding: "1rem",
-    surfaceGap: "0.75rem",
-    surfacePaddingCompact: "0.75rem",
-    surfaceGapCompact: "0.5rem",
-    sectionPadding: "0.75rem 1rem",
-    sectionGap: "0.75rem",
-    tabsGap: "0.75rem",
-    tabsListGap: "0.25rem",
-    tabsListPadding: "0.25rem",
-    tabsTabPaddingInline: "0.75rem",
-    tabsPanelPaddingTop: "0.75rem",
-    navMenuListGap: "0.25rem",
-    navMenuNestedGap: "0.25rem",
-    navMenuCollapseOffsetTop: "0.25rem",
-    navMenuCollapseInsetLevel0Margin: "0.5rem",
-    navMenuCollapseInsetLevel0Padding: "0.5rem",
-    navMenuCollapseInsetSimpleLevel0Margin: "0.5rem",
-    navMenuCollapseInsetSimpleLevel0Padding: "0.5rem",
-    navMenuCollapseInsetDeepMargin: "0.5rem",
-    navMenuCollapseInsetDeepPadding: "0.5rem",
-    navMenuCollapseInsetSimpleDeepMargin: "0.5rem",
-    navMenuCollapseInsetSimpleDeepPadding: "0.5rem",
-    navMenuNodeGroupSpacing: "0.25rem",
-    navMenuGroupPadding: "0.375rem 0.75rem",
-    navMenuGroupFontSize: "0.875rem",
-    navMenuItemPadding: "0.375rem 0.75rem",
-    navMenuItemGap: "0.5rem",
-    navMenuLeadingIconSize: "1rem",
-    navMenuLeadingIconColumnSize: "1.25rem",
-    tableOfContentsGap: "0.25rem",
-    tableOfContentsListGap: "var(--vf-nav-menu-list-gap)",
-    tableOfContentsTitleFontSize: "0.75rem",
-    tableOfContentsTitleColor: "var(--vf-color-muted)",
-    tableOfContentsItemPadding: "var(--vf-nav-menu-item-padding)",
-    tableOfContentsLevelStep: "0.5rem",
-    tableOfContentsColor: "var(--vf-color-text)",
-    tableOfContentsHoverColor: "var(--vf-color-primary)",
-    tableOfContentsHoverBackground: "color-mix(in srgb, var(--vf-color-primary) 10%, var(--vf-color-surface))",
-    tableOfContentsActiveColor: "var(--vf-color-primary)",
-    tableOfContentsActiveBackground: "color-mix(in srgb, var(--vf-color-primary) 14%, var(--vf-color-surface))",
-    badgeHeight: "1.5rem",
-    badgePadding: "0.25rem 0.5rem",
-    badgeGap: "0.25rem",
-    badgeRadius: "999px",
-    badgeFontSize: "0.8125rem",
-    badgeLineHeight: "1.2",
-    tagHeight: "1.75rem",
-    tagPadding: "0.25rem 0.5rem",
-    tagFontSize: "0.8125rem",
-    tagLineHeight: "1.2",
-    tooltipPadding: "0.5rem 0.75rem",
-    tooltipMaxWidth: "16rem",
-    tooltipFontSize: "0.8125rem",
-    tooltipLineHeight: "1.4",
-    dialogWidthSm: "28rem",
-    dialogWidthMd: "36rem",
-    dialogWidthLg: "48rem",
-    dialogMaxHeight: "min(85vh, 48rem)",
-    drawerSizeSm: "20rem",
-    drawerSizeMd: "26rem",
-    drawerSizeLg: "32rem",
-    drawerOffsetTop: "0px",
-    drawerBodyPadding: "var(--vf-overlay-padding)",
-    dialogTitleFontSize: "1.125rem",
-    dialogHeaderGap: "0.75rem",
-    dialogActionsGap: "0.5rem",
-    popoverWidth: "min(100vw - 2rem, 22rem)",
-    floatingArrowSize: "0.625rem",
-    overlayBackdrop: "rgba(15, 23, 42, 0.56)",
-    alertPrimarySoft: "color-mix(in srgb, var(--vf-color-primary) 8%, var(--vf-color-surface))",
-    alertPrimaryBorderSoft: "color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border))",
-    alertContentGap: "0.25rem",
-    alertTitleFontSize: "0.9375rem",
-    cardTitleFontSize: "1rem",
-    panelTitleFontSize: "0.9375rem",
-    textLineHeight: "1.5",
-    headingLineHeight: "1.3",
-    tabsLineHeight: "1.2",
-    motionDurationFast: o.durationFast,
-    motionDurationNormal: o.durationNormal,
-    motionEaseStandard: o.easeStandard,
-    zOverlay: "1000",
-    zDrawer: "1000",
-    zDropdown: "900",
-    zPopover: "925",
-    zTooltip: "950",
-    spacing: "1rem",
-    shadow: "none"
-  },
-  dark: {
-    colorBg: "#0f172a",
-    colorSurface: "#162033",
-    colorSurfaceMuted: "#1b2840",
-    colorText: "#eff4ff",
-    colorMuted: "#9fb0cf",
-    colorBorder: "#2d405f",
-    colorPrimary: "#6ea8fe",
-    colorPrimaryContrast: "#081120",
-    colorPrimarySoft: "color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface))",
-    colorPrimaryBorderSoft: "color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border))",
-    colorFocusRing: "color-mix(in srgb, var(--vf-color-primary) 32%, var(--vf-color-surface))",
-    colorSuccess: "#4ade80",
-    colorSuccessContrast: "#081120",
-    colorInfo: "#38bdf8",
-    colorInfoContrast: "#081120",
-    colorWarn: "#fbbf24",
-    colorWarnContrast: "#1f1300",
-    colorHelp: "#a78bfa",
-    colorHelpContrast: "#081120",
-    colorDanger: "#f87171",
-    colorDangerContrast: "#081120",
-    colorContrast: "#f3f4f6",
-    colorContrastContrast: "#111827",
-    colorSuccessSoft: "color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface))",
-    colorInfoSoft: "color-mix(in srgb, var(--vf-color-info) 12%, var(--vf-color-surface))",
-    colorWarnSoft: "color-mix(in srgb, var(--vf-color-warn) 12%, var(--vf-color-surface))",
-    colorHelpSoft: "color-mix(in srgb, var(--vf-color-help) 12%, var(--vf-color-surface))",
-    colorDangerSoft: "color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface))",
-    colorContrastSoft: "color-mix(in srgb, var(--vf-color-contrast) 10%, var(--vf-color-surface))",
-    colorSuccessBorderSoft: "color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border))",
-    colorInfoBorderSoft: "color-mix(in srgb, var(--vf-color-info) 24%, var(--vf-color-border))",
-    colorWarnBorderSoft: "color-mix(in srgb, var(--vf-color-warn) 24%, var(--vf-color-border))",
-    colorHelpBorderSoft: "color-mix(in srgb, var(--vf-color-help) 24%, var(--vf-color-border))",
-    colorDangerBorderSoft: "color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border))",
-    colorContrastBorderSoft: "color-mix(in srgb, var(--vf-color-contrast) 24%, var(--vf-color-border))",
-    focusRingWidth: "3px",
-    zOverlay: "1000",
-    zDrawer: "1000",
-    zDropdown: "900",
-    zPopover: "925",
-    zTooltip: "950",
-    shadow: "none"
-  }
-}, n = a;
+import { c as t, d as a } from "./utils-BJVEoCfQ.js";
 export {
-  f as createThemePreset,
-  n as defaultThemePreset
+  t as createThemePreset,
+  a as defaultThemePreset
 };

package/dist/theme.css

@@ -6,30 +6,38 @@
   color: var(--vf-color-text);
 }
 
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit;
+}
+
 :root[data-vf-theme="dark"] {
   color-scheme: dark;
-  --vf-color-bg: #0f172a;
-  --vf-color-surface: #162033;
-  --vf-color-surface-muted: #1b2840;
-  --vf-color-text: #eff4ff;
-  --vf-color-muted: #9fb0cf;
-  --vf-color-border: #2d405f;
-  --vf-color-primary: #6ea8fe;
-  --vf-color-primary-contrast: #081120;
+  --vf-color-bg: #1e1e1e;
+  --vf-color-surface: #252526;
+  --vf-color-surface-muted: #2d2d30;
+  --vf-color-text: #d4d4d4;
+  --vf-color-muted: #9da0a6;
+  --vf-color-border: #3c3c3c;
+  --vf-color-primary: #2f7fd6;
+  --vf-color-primary-contrast: #ffffff;
   --vf-color-primary-soft: color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface));
   --vf-color-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));
   --vf-color-focus-ring: color-mix(in srgb, var(--vf-color-primary) 32%, var(--vf-color-surface));
-  --vf-color-success: #4ade80;
-  --vf-color-success-contrast: #081120;
-  --vf-color-info: #38bdf8;
-  --vf-color-info-contrast: #081120;
-  --vf-color-warn: #fbbf24;
+  --vf-color-success: #3f8746;
+  --vf-color-success-contrast: #ffffff;
+  --vf-color-info: #1f76be;
+  --vf-color-info-contrast: #ffffff;
+  --vf-color-warn: #c6a25f;
   --vf-color-warn-contrast: #1f1300;
-  --vf-color-help: #a78bfa;
-  --vf-color-help-contrast: #081120;
-  --vf-color-danger: #f87171;
-  --vf-color-danger-contrast: #081120;
-  --vf-color-contrast: #f3f4f6;
+  --vf-color-help: #8553a1;
+  --vf-color-help-contrast: #ffffff;
+  --vf-color-danger: #bf3f3f;
+  --vf-color-danger-contrast: #ffffff;
+  --vf-color-contrast: #d7d7d7;
   --vf-color-contrast-contrast: #111827;
   --vf-color-success-soft: color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface));
   --vf-color-info-soft: color-mix(in srgb, var(--vf-color-info) 12%, var(--vf-color-surface));

package/dist/tokens.css

@@ -3,28 +3,99 @@
 @import "./generated-breakpoints.css";
 
 :root {
-  --vf-color-bg: #fcfcfd;
+  --vf-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --vf-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --vf-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --vf-font-weight-regular: 400;
+  --vf-font-weight-medium: 500;
+  --vf-font-weight-semibold: 600;
+  --vf-font-weight-bold: 700;
+  --vf-font-size-xs: 0.75rem;
+  --vf-font-size-sm: 0.8125rem;
+  --vf-font-size-md: 0.875rem;
+  --vf-font-size-lg: 0.9375rem;
+  --vf-font-size-xl: 1rem;
+  --vf-font-size-2xl: 1.125rem;
+  --vf-font-size-3xl: 1.25rem;
+  --vf-line-height-tight: 1.2;
+  --vf-line-height-normal: 1.5;
+  --vf-line-height-relaxed: 1.65;
+  --vf-selectable-hover-color: var(--vf-color-primary);
+  --vf-selectable-hover-background: transparent;
+  --vf-selectable-active-color: var(--vf-color-primary);
+  --vf-selectable-active-background: color-mix(in srgb, var(--vf-color-primary) 20%, var(--vf-color-surface));
+  --vf-text-body-font-size: var(--vf-font-size-xl);
+  --vf-text-body-line-height: var(--vf-line-height-normal);
+  --vf-text-body-font-weight: var(--vf-font-weight-regular);
+  --vf-text-caption-font-size: var(--vf-font-size-sm);
+  --vf-text-caption-line-height: var(--vf-line-height-normal);
+  --vf-text-caption-font-weight: var(--vf-font-weight-medium);
+  --vf-text-label-font-size: var(--vf-font-size-md);
+  --vf-text-label-line-height: var(--vf-line-height-tight);
+  --vf-text-label-font-weight: var(--vf-font-weight-medium);
+  --vf-heading-font-size-sm: var(--vf-font-size-lg);
+  --vf-heading-font-size-md: var(--vf-font-size-xl);
+  --vf-heading-font-size-lg: var(--vf-font-size-2xl);
+  --vf-heading-font-size-xl: var(--vf-font-size-3xl);
+  --vf-heading-font-weight: var(--vf-font-weight-semibold);
+  --vf-button-secondary-hover-background: color-mix(in srgb, var(--vf-color-surface-muted) 94%, var(--vf-color-text));
+  --vf-button-secondary-hover-border-color: var(--vf-color-border);
+  --vf-button-secondary-active-background: color-mix(in srgb, var(--vf-color-surface-muted) 90%, var(--vf-color-text));
+  --vf-button-secondary-active-border-color: var(--vf-color-border);
+  --vf-button-ghost-hover-background: color-mix(in srgb, var(--vf-color-primary) 8%, var(--vf-color-surface));
+  --vf-button-ghost-hover-border-color: transparent;
+  --vf-button-ghost-active-background: color-mix(in srgb, var(--vf-color-primary) 14%, var(--vf-color-surface));
+  --vf-button-ghost-active-border-color: transparent;
+  --vf-button-solid-hover-filter: brightness(0.95) saturate(1.03);
+  --vf-button-solid-active-filter: brightness(0.9) saturate(1.04);
+  --vf-radio-control-background: color-mix(in srgb, var(--vf-color-border) 12%, var(--vf-color-surface));
+  --vf-radio-hover-border-color: var(--vf-color-primary-border-soft);
+  --vf-switch-track-background: color-mix(in srgb, var(--vf-color-text) 10%, var(--vf-color-surface));
+  --vf-switch-track-hover-background: color-mix(in srgb, var(--vf-color-text) 12%, var(--vf-color-surface));
+  --vf-switch-track-checked-background: var(--vf-color-primary);
+  --vf-switch-track-checked-hover-background: color-mix(in srgb, var(--vf-color-primary) 92%, var(--vf-color-surface));
+  --vf-switch-thumb-background: color-mix(in srgb, var(--vf-color-surface) 88%, var(--vf-color-surface-muted));
+  --vf-switch-thumb-border-color: color-mix(in srgb, var(--vf-color-surface) 80%, var(--vf-color-border));
+  --vf-switch-thumb-shadow: none;
+  --vf-switch-thumb-color: color-mix(in srgb, var(--vf-color-text) 55%, transparent);
+  --vf-switch-thumb-icon-size: 0.625rem;
+  --vf-switch-thumb-checked-background: var(--vf-color-surface);
+  --vf-switch-thumb-checked-border-color: color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface));
+  --vf-switch-thumb-checked-shadow: none;
+  --vf-prose-heading-margin: 1.5em;
+  --vf-prose-heading-gap: 0.5em;
+  --vf-prose-block-spacing: 1em;
+  --vf-prose-list-padding-inline-start: 1.5em;
+  --vf-prose-list-item-spacing: 0.375em;
+  --vf-prose-link-hover-color: color-mix(in srgb, var(--vf-color-primary) 82%, var(--vf-color-text));
+  --vf-prose-blockquote-padding-inline-start: 1rem;
+  --vf-prose-blockquote-border-width: 3px;
+  --vf-prose-inline-code-font-size: 0.95em;
+  --vf-prose-inline-code-padding: 0.125rem 0.375rem;
+  --vf-prose-code-block-padding: 0.75rem 1rem;
+  --vf-prose-hr-margin: 1.5rem;
+  --vf-color-bg: #f6f8fb;
   --vf-color-surface: #ffffff;
-  --vf-color-surface-muted: #f5f7fb;
-  --vf-color-text: #172033;
-  --vf-color-muted: #69738a;
-  --vf-color-border: #d8e0ef;
-  --vf-color-primary: #0b63f6;
+  --vf-color-surface-muted: #f3f3f3;
+  --vf-color-text: #1f232b;
+  --vf-color-muted: #616773;
+  --vf-color-border: #d9dde3;
+  --vf-color-primary: #0e639c;
   --vf-color-primary-contrast: #ffffff;
   --vf-color-primary-soft: color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface));
   --vf-color-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));
   --vf-color-focus-ring: color-mix(in srgb, var(--vf-color-primary) 32%, var(--vf-color-surface));
-  --vf-color-success: #16a34a;
+  --vf-color-success: #2e7d32;
   --vf-color-success-contrast: #ffffff;
-  --vf-color-info: #0ea5e9;
+  --vf-color-info: #0069ba;
   --vf-color-info-contrast: #ffffff;
-  --vf-color-warn: #f59e0b;
+  --vf-color-warn: #9f8400;
   --vf-color-warn-contrast: #1f1300;
-  --vf-color-help: #8b5cf6;
+  --vf-color-help: #7245ae;
   --vf-color-help-contrast: #ffffff;
-  --vf-color-danger: #dc2626;
+  --vf-color-danger: #c72e39;
   --vf-color-danger-contrast: #ffffff;
-  --vf-color-contrast: #111827;
+  --vf-color-contrast: #252526;
   --vf-color-contrast-contrast: #ffffff;
   --vf-color-success-soft: color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface));
   --vf-color-info-soft: color-mix(in srgb, var(--vf-color-info) 12%, var(--vf-color-surface));
@@ -47,15 +118,15 @@
   --vf-control-height-sm: 1.75rem;
   --vf-control-height-md: 2.25rem;
   --vf-control-height-lg: 2.5rem;
-  --vf-control-font-size-sm: 0.875rem;
-  --vf-control-font-size-md: 0.9375rem;
-  --vf-control-font-size-lg: 1rem;
+  --vf-control-font-size-sm: var(--vf-text-label-font-size);
+  --vf-control-font-size-md: var(--vf-text-body-font-size);
+  --vf-control-font-size-lg: var(--vf-font-size-xl);
   --vf-button-padding-sm: 0.25rem 0.5rem;
-  --vf-button-padding-md: 0.375rem 0.75rem;
+  --vf-button-padding-md: 0.3125rem 0.75rem;
   --vf-button-padding-lg: 0.5rem 1rem;
   --vf-button-gap: 0.5rem;
   --vf-field-padding-sm: 0.25rem 0.5rem;
-  --vf-field-padding-md: 0.375rem 0.75rem;
+  --vf-field-padding-md: 0.3125rem 0.75rem;
   --vf-field-padding-lg: 0.5rem 1rem;
   --vf-checkbox-size-sm: 1rem;
   --vf-checkbox-size-md: 1.125rem;
@@ -109,36 +180,36 @@
   --vf-nav-menu-collapse-inset-simple-deep-padding: 0.5rem;
   --vf-nav-menu-node-group-spacing: 0.25rem;
   --vf-nav-menu-group-padding: 0.375rem 0.75rem;
-  --vf-nav-menu-group-font-size: 0.875rem;
-  --vf-nav-menu-item-padding: 0.375rem 0.75rem;
+  --vf-nav-menu-group-font-size: var(--vf-text-label-font-size);
+  --vf-nav-menu-item-padding: var(--vf-field-padding-md);
   --vf-nav-menu-item-gap: 0.5rem;
   --vf-nav-menu-leading-icon-size: 1rem;
   --vf-nav-menu-leading-icon-column-size: 1.25rem;
   --vf-table-of-contents-gap: 0.25rem;
   --vf-table-of-contents-list-gap: var(--vf-nav-menu-list-gap);
-  --vf-table-of-contents-title-font-size: 0.75rem;
+  --vf-table-of-contents-title-font-size: var(--vf-text-caption-font-size);
   --vf-table-of-contents-title-color: var(--vf-color-muted);
   --vf-table-of-contents-item-padding: var(--vf-nav-menu-item-padding);
-  --vf-table-of-contents-level-step: 0.5rem;
+  --vf-table-of-contents-level-step: calc(var(--vf-nav-menu-collapse-inset-simple-level-0-margin) + var(--vf-nav-menu-collapse-inset-simple-level-0-padding));
   --vf-table-of-contents-color: var(--vf-color-text);
-  --vf-table-of-contents-hover-color: var(--vf-color-primary);
-  --vf-table-of-contents-hover-background: color-mix(in srgb, var(--vf-color-primary) 10%, var(--vf-color-surface));
-  --vf-table-of-contents-active-color: var(--vf-color-primary);
-  --vf-table-of-contents-active-background: color-mix(in srgb, var(--vf-color-primary) 14%, var(--vf-color-surface));
-  --vf-badge-height: 1.5rem;
-  --vf-badge-padding: 0.25rem 0.5rem;
+  --vf-table-of-contents-hover-color: var(--vf-selectable-hover-color);
+  --vf-table-of-contents-hover-background: var(--vf-selectable-hover-background);
+  --vf-table-of-contents-active-color: var(--vf-selectable-active-color);
+  --vf-table-of-contents-active-background: var(--vf-selectable-active-background);
+  --vf-badge-height: 1.375rem;
+  --vf-badge-padding: 0.0625rem 0.25rem;
   --vf-badge-gap: 0.25rem;
-  --vf-badge-radius: 999px;
-  --vf-badge-font-size: 0.8125rem;
-  --vf-badge-line-height: 1.2;
-  --vf-tag-height: 1.75rem;
-  --vf-tag-padding: 0.25rem 0.5rem;
-  --vf-tag-font-size: 0.8125rem;
-  --vf-tag-line-height: 1.2;
+  --vf-badge-radius: var(--vf-radius-control-tight);
+  --vf-badge-font-size: var(--vf-text-label-font-size);
+  --vf-badge-line-height: var(--vf-text-label-line-height);
+  --vf-tag-height: 1.5rem;
+  --vf-tag-padding: 0.125rem 0.3125rem;
+  --vf-tag-font-size: var(--vf-text-label-font-size);
+  --vf-tag-line-height: var(--vf-text-label-line-height);
   --vf-tooltip-padding: 0.5rem 0.75rem;
   --vf-tooltip-max-width: 16rem;
-  --vf-tooltip-font-size: 0.8125rem;
-  --vf-tooltip-line-height: 1.4;
+  --vf-tooltip-font-size: var(--vf-text-body-font-size);
+  --vf-tooltip-line-height: var(--vf-text-body-line-height);
   --vf-dialog-width-sm: 28rem;
   --vf-dialog-width-md: 36rem;
   --vf-dialog-width-lg: 48rem;
@@ -148,21 +219,18 @@
   --vf-drawer-size-lg: 32rem;
   --vf-drawer-offset-top: 0px;
   --vf-drawer-body-padding: var(--vf-overlay-padding);
-  --vf-dialog-title-font-size: 1.125rem;
+  --vf-dialog-title-font-size: var(--vf-text-body-font-size);
   --vf-dialog-header-gap: 0.75rem;
   --vf-dialog-actions-gap: 0.5rem;
   --vf-popover-width: min(100vw - 2rem, 22rem);
   --vf-floating-arrow-size: 0.625rem;
-  --vf-overlay-backdrop: rgba(15, 23, 42, 0.56);
+  --vf-overlay-backdrop: rgba(0, 0, 0, 0.44);
   --vf-alert-primary-soft: color-mix(in srgb, var(--vf-color-primary) 8%, var(--vf-color-surface));
   --vf-alert-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));
   --vf-alert-content-gap: 0.25rem;
-  --vf-alert-title-font-size: 0.9375rem;
-  --vf-card-title-font-size: 1rem;
-  --vf-panel-title-font-size: 0.9375rem;
-  --vf-text-line-height: 1.5;
-  --vf-heading-line-height: 1.3;
-  --vf-tabs-line-height: 1.2;
+  --vf-alert-title-font-size: var(--vf-text-body-font-size);
+  --vf-card-title-font-size: var(--vf-text-body-font-size);
+  --vf-panel-title-font-size: var(--vf-text-body-font-size);
   --vf-motion-duration-fast: 220ms;
   --vf-motion-duration-normal: 320ms;
   --vf-motion-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

package/dist/types/components.d.ts

@@ -2,6 +2,7 @@ import { IconName } from '@codemonster-ru/vueiconify';
 export type VfButtonVariant = "primary" | "secondary" | "success" | "info" | "warn" | "help" | "danger" | "contrast" | "ghost";
 export type VfControlSize = "sm" | "md" | "lg";
 export type VfLinkTone = "default" | "muted";
+export type VfLinkUnderline = "none" | "hover" | "always";
 export type VfBadgeTone = "neutral" | "primary" | "success" | "info" | "warn" | "help" | "danger" | "contrast";
 export type VfFeedbackTone = "neutral" | "primary" | "success" | "info" | "warn" | "help" | "danger" | "contrast";
 export type VfDividerOrientation = "horizontal" | "vertical";
@@ -9,6 +10,20 @@ export type VfDialogSize = "sm" | "md" | "lg";
 export type VfDrawerPlacement = "left" | "right" | "top" | "bottom";
 export type VfDropdownPlacement = "bottom-start" | "bottom-end";
 export type VfTooltipPlacement = "top" | "bottom";
+export interface VfSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface VfBreadcrumbItem {
+    label: string;
+    href?: string;
+    to?: string | Record<string, unknown>;
+    target?: string;
+    rel?: string;
+    disabled?: boolean;
+    current?: boolean;
+}
 export interface VfTabItem {
     value: string;
     label: string;

package/dist/types/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/types/components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAE3D,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,GACV,OAAO,CAAC;AACZ,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,CAAC;AACf,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,CAAC;AACf,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AACpE,MAAM,MAAM,mBAAmB,GAAG,cAAc,GAAG,YAAY,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/types/components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAE3D,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,GACV,OAAO,CAAC;AACZ,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC1D,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,CAAC;AACf,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,CAAC;AACf,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AACpE,MAAM,MAAM,mBAAmB,GAAG,cAAc,GAAG,YAAY,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/types/theme.d.ts

@@ -1,6 +1,99 @@
 import { InjectionKey, Ref } from 'vue';
-import { VfResolvedTheme, VfThemeConfig, VfThemeMode } from '@codemonster-ru/vueforge-theme';
-export type { VfResolvedTheme, VfResolvedThemeConfig, VfResolvedThemePreset, VfResolvedThemePresetOptions, VfThemeConfig, VfThemeMode, VfThemePreset, VfThemePresetOptions, VfThemeTokens, } from '@codemonster-ru/vueforge-theme';
+import { VfResolvedTheme as BaseVfResolvedTheme, VfResolvedThemeConfig as BaseVfResolvedThemeConfig, VfResolvedThemePreset as BaseVfResolvedThemePreset, VfResolvedThemePresetOptions, VfThemeConfig as BaseVfThemeConfig, VfThemeMode as BaseVfThemeMode, VfThemePreset as BaseVfThemePreset, VfThemePresetOptions, VfThemeTokens as BaseVfThemeTokens } from '@codemonster-ru/vueforge-theme';
+export type VfResolvedTheme = BaseVfResolvedTheme;
+export type VfThemeMode = BaseVfThemeMode;
+export type { VfResolvedThemePresetOptions, VfThemePresetOptions };
+type BaseVfThemeTokensWithoutLegacyTypography = Omit<BaseVfThemeTokens, "textLineHeight" | "headingLineHeight" | "tabsLineHeight">;
+export interface VfThemeTokens extends BaseVfThemeTokensWithoutLegacyTypography {
+    fontFamilyBase: string;
+    fontFamilyHeading: string;
+    fontFamilyMono: string;
+    fontWeightRegular: string;
+    fontWeightMedium: string;
+    fontWeightSemibold: string;
+    fontWeightBold: string;
+    fontSizeXs: string;
+    fontSizeSm: string;
+    fontSizeMd: string;
+    fontSizeLg: string;
+    fontSizeXl: string;
+    fontSize2xl: string;
+    fontSize3xl: string;
+    lineHeightTight: string;
+    lineHeightNormal: string;
+    lineHeightRelaxed: string;
+    selectableHoverColor: string;
+    selectableHoverBackground: string;
+    selectableActiveColor: string;
+    selectableActiveBackground: string;
+    textBodyFontSize: string;
+    textBodyLineHeight: string;
+    textBodyFontWeight: string;
+    textCaptionFontSize: string;
+    textCaptionLineHeight: string;
+    textCaptionFontWeight: string;
+    textLabelFontSize: string;
+    textLabelLineHeight: string;
+    textLabelFontWeight: string;
+    headingFontSizeSm: string;
+    headingFontSizeMd: string;
+    headingFontSizeLg: string;
+    headingFontSizeXl: string;
+    headingFontWeight: string;
+    buttonSecondaryHoverBackground: string;
+    buttonSecondaryHoverBorderColor: string;
+    buttonSecondaryActiveBackground: string;
+    buttonSecondaryActiveBorderColor: string;
+    buttonGhostHoverBackground: string;
+    buttonGhostHoverBorderColor: string;
+    buttonGhostActiveBackground: string;
+    buttonGhostActiveBorderColor: string;
+    buttonSolidHoverFilter: string;
+    buttonSolidActiveFilter: string;
+    radioControlBackground: string;
+    radioHoverBorderColor: string;
+    switchTrackBackground: string;
+    switchTrackHoverBackground: string;
+    switchTrackCheckedBackground: string;
+    switchTrackCheckedHoverBackground: string;
+    switchThumbBackground: string;
+    switchThumbBorderColor: string;
+    switchThumbShadow: string;
+    switchThumbColor: string;
+    switchThumbIconSize: string;
+    switchThumbCheckedBackground: string;
+    switchThumbCheckedBorderColor: string;
+    switchThumbCheckedShadow: string;
+    proseHeadingMargin: string;
+    proseHeadingGap: string;
+    proseBlockSpacing: string;
+    proseListPaddingInlineStart: string;
+    proseListItemSpacing: string;
+    proseLinkHoverColor: string;
+    proseBlockquotePaddingInlineStart: string;
+    proseBlockquoteBorderWidth: string;
+    proseInlineCodeFontSize: string;
+    proseInlineCodePadding: string;
+    proseCodeBlockPadding: string;
+    proseHrMargin: string;
+}
+export interface VfThemePreset extends Omit<BaseVfThemePreset, "tokens" | "dark"> {
+    tokens: VfThemeTokens;
+    dark?: Partial<VfThemeTokens>;
+}
+export interface VfResolvedThemePreset extends Omit<BaseVfResolvedThemePreset, "light" | "dark"> {
+    light: VfThemeTokens;
+    dark: VfThemeTokens;
+}
+export interface VfThemeConfig extends Omit<BaseVfThemeConfig, "preset" | "extend" | "light" | "dark"> {
+    preset?: VfThemePreset;
+    extend?: Partial<VfThemeTokens>;
+    light?: Partial<VfThemeTokens>;
+    dark?: Partial<VfThemeTokens>;
+}
+export interface VfResolvedThemeConfig extends Omit<BaseVfResolvedThemeConfig, "preset"> {
+    preset: VfResolvedThemePreset;
+}
 export interface VfVueForgeOptions {
     theme?: VfThemeConfig;
     defaultTheme?: VfThemeMode;