@plumile/ui 0.1.134 → 0.1.142

package/lib/esm/theme/backofficeTheme.css.js

@@ -1710,6 +1710,56 @@ var e = function() {
 			6: "6deg",
 			12: "12deg"
 		},
+		sidebar: {
+			background: "#FFFFFF",
+			borderColor: "#E7EDF4",
+			scrollbarColor: "#EEF2F6",
+			itemColor: "#475467",
+			itemHoverBackground: "#EEF4FA",
+			itemHoverColor: "#101828",
+			itemActiveBackground: "rgba(178, 24, 79, 0.14)",
+			itemActiveBackgroundImage: "none",
+			itemActiveColor: "#A50246",
+			itemActiveBorderColor: "rgba(178, 24, 79, 0.14)",
+			itemActiveShadow: "0 0 0 2px rgba(178, 24, 79, 0.14)",
+			itemDisabledColor: "#667085",
+			itemFocusRing: "0 0 0 3px rgba(178, 24, 79, 0.14)",
+			nestedBorderColor: "#D9E2EC",
+			sectionHeaderColor: "#667085",
+			sectionHeaderIconColor: "#667085",
+			sectionHeaderHoverBackground: "#EEF4FA",
+			sectionToggleColor: "#667085",
+			actionColor: "#475467",
+			actionHoverBackground: "#EEF4FA",
+			actionHoverColor: "#101828",
+			actionFocusRing: "0 0 0 3px rgba(178, 24, 79, 0.14)",
+			dragHandleColor: "#475467",
+			dragHandleHoverBackground: "#EEF4FA",
+			dragHandleHoverColor: "#101828",
+			dragOverlayBackground: "#FFFFFF",
+			dragOverlayColor: "#101828",
+			dragOverlayBorderColor: "#D9E2EC",
+			insertionIndicatorColor: "#A50246",
+			collapseButtonBackground: "transparent",
+			collapseButtonColor: "#475467",
+			collapseButtonBorderColor: "transparent",
+			collapseButtonHoverBackground: "#EEF4FA",
+			collapseButtonHoverColor: "#101828",
+			collapseButtonHoverShadow: "none",
+			collapseButtonFocusRing: "0 0 0 3px rgba(178, 24, 79, 0.14)",
+			profileTitleColor: "#475467",
+			profileTriggerBackground: "#F8FAFD",
+			profileTriggerBorderColor: "#E7EDF4",
+			profileTriggerHoverBackground: "#FFFFFF",
+			profileTriggerHoverBorderColor: "#C5D0DE",
+			profileTriggerFocusRing: "0 0 0 3px rgba(178, 24, 79, 0.14)",
+			profileAvatarBackgroundImage: "linear-gradient(135deg, #c52640, #d4aab1)",
+			profileAvatarColor: "#FFFFFF",
+			profileTextColor: "#101828",
+			profileSubtextColor: "#475467",
+			profileMenuHoverBackground: "#F8FAFD",
+			profileMenuBorderColor: "#E7EDF4"
+		},
 		stroke: {
 			inherit: "inherit",
 			current: "currentColor",
@@ -3752,6 +3802,56 @@ var e = function() {
 			6: "6deg",
 			12: "12deg"
 		},
+		sidebar: {
+			background: "#222d3b",
+			borderColor: "#273244",
+			scrollbarColor: "#3b4658",
+			itemColor: "#c8d1df",
+			itemHoverBackground: "#202a37",
+			itemHoverColor: "#f3f6fb",
+			itemActiveBackground: "rgba(222, 63, 118, 0.24)",
+			itemActiveBackgroundImage: "none",
+			itemActiveColor: "#A50246",
+			itemActiveBorderColor: "rgba(222, 63, 118, 0.24)",
+			itemActiveShadow: "0 0 0 2px rgba(222, 63, 118, 0.24)",
+			itemDisabledColor: "#95a1b4",
+			itemFocusRing: "0 0 0 3px rgba(222, 63, 118, 0.24)",
+			nestedBorderColor: "#334155",
+			sectionHeaderColor: "#95a1b4",
+			sectionHeaderIconColor: "#95a1b4",
+			sectionHeaderHoverBackground: "#202a37",
+			sectionToggleColor: "#95a1b4",
+			actionColor: "#c8d1df",
+			actionHoverBackground: "#202a37",
+			actionHoverColor: "#f3f6fb",
+			actionFocusRing: "0 0 0 3px rgba(222, 63, 118, 0.24)",
+			dragHandleColor: "#c8d1df",
+			dragHandleHoverBackground: "#202a37",
+			dragHandleHoverColor: "#f3f6fb",
+			dragOverlayBackground: "#121821",
+			dragOverlayColor: "#f3f6fb",
+			dragOverlayBorderColor: "#334155",
+			insertionIndicatorColor: "#A50246",
+			collapseButtonBackground: "transparent",
+			collapseButtonColor: "#c8d1df",
+			collapseButtonBorderColor: "transparent",
+			collapseButtonHoverBackground: "#202a37",
+			collapseButtonHoverColor: "#f3f6fb",
+			collapseButtonHoverShadow: "none",
+			collapseButtonFocusRing: "0 0 0 3px rgba(222, 63, 118, 0.24)",
+			profileTitleColor: "#c8d1df",
+			profileTriggerBackground: "#171f2a",
+			profileTriggerBorderColor: "#273244",
+			profileTriggerHoverBackground: "#222d3b",
+			profileTriggerHoverBorderColor: "#475569",
+			profileTriggerFocusRing: "0 0 0 3px rgba(222, 63, 118, 0.24)",
+			profileAvatarBackgroundImage: "linear-gradient(135deg, #c52640, #c6846f)",
+			profileAvatarColor: "#FFFFFF",
+			profileTextColor: "#f3f6fb",
+			profileSubtextColor: "#c8d1df",
+			profileMenuHoverBackground: "#171f2a",
+			profileMenuBorderColor: "#273244"
+		},
 		stroke: {
 			inherit: "inherit",
 			current: "currentColor",

package/lib/esm/theme/backofficeTheme.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeTheme.css.js","names":[],"sources":["../../../src/theme/backofficeTheme.css.ts"],"sourcesContent":["import { createTheme, style } from '@vanilla-extract/css';\n\nimport { publicLightThemeValues, type ThemeValues } from './publicTheme.css.js';\nimport { vars } from './themeContract.css.js';\n\nconst backofficeLightColors = {\n  ...publicLightThemeValues.colors,\n  background: '#F5F7FA',\n  backgroundSecondary: '#EEF2F7',\n  backgroundTertiary: '#E6ECF3',\n  backgroundModifier: '#D8E0EB',\n  surface: '#FFFFFF',\n  surfaceSecondary: '#F8FAFD',\n  surfaceMuted: '#EEF4FA',\n  surfaceElevated: '#FFFFFF',\n  text: '#101828',\n  textSecondary: '#475467',\n  textMuted: '#667085',\n  border: '#D9E2EC',\n  borderSubtle: '#E7EDF4',\n  borderStrong: '#C5D0DE',\n  borderLight: '#EEF2F6',\n  primaryLight: 'rgba(178, 24, 79, 0.14)',\n  brandLightGray: '#F6F8FB',\n  infoLight: '#EAF3FF',\n  successLight: '#EAF7EF',\n  warningLight: '#FFF4DA',\n} as const;\n\nconst backofficeDarkColors = {\n  ...publicLightThemeValues.colors,\n  primaryLight: 'rgba(222, 63, 118, 0.24)',\n  secondaryLight: '#143328',\n  surface: '#121821',\n  surfaceSecondary: '#171f2a',\n  surfaceMuted: '#202a37',\n  surfaceElevated: '#222d3b',\n  background: '#0a0f16',\n  backgroundSecondary: '#111822',\n  backgroundTertiary: '#182230',\n  backgroundModifier: '#2a3647',\n  text: '#f3f6fb',\n  textSecondary: '#c8d1df',\n  textMuted: '#95a1b4',\n  border: '#334155',\n  borderSubtle: '#273244',\n  borderStrong: '#475569',\n  borderLight: '#3b4658',\n  successLight: '#153624',\n  warningLight: '#3a2b12',\n  infoLight: '#142948',\n  brandLightGray: '#18212c',\n  brandDarkGray: '#f2f5fa',\n  brandSecondaryOrange: '#c6846f',\n  'brandSecondaryOrange-10': 'rgba(198, 132, 111, 0.12)',\n  'brandSecondaryOrange-20': 'rgba(198, 132, 111, 0.22)',\n  accent: '#d37c88',\n} as const;\n\nexport const backofficeLightThemeValues = {\n  ...publicLightThemeValues,\n  colors: backofficeLightColors,\n  backgroundImage: {\n    ...publicLightThemeValues.backgroundImage,\n    pageShellSurface: `linear-gradient(180deg, ${backofficeLightColors.background} 0%, ${backofficeLightColors.backgroundSecondary} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${backofficeLightColors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${backofficeLightColors.surface} 0%, ${backofficeLightColors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${backofficeLightColors.surfaceMuted} 0%, ${backofficeLightColors.surfaceSecondary} 45%, ${backofficeLightColors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${backofficeLightColors.surface} 0%, ${backofficeLightColors.surfaceSecondary} 100%)`,\n  },\n  boxShadow: {\n    ...publicLightThemeValues.boxShadow,\n    badgeInset: `inset 0 0 0 1px ${backofficeLightColors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${backofficeLightColors.surface}`,\n    primaryLightRing: `0 0 0 1px ${backofficeLightColors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${backofficeLightColors.primaryLight}`,\n    focusRing: `0 0 0 3px ${backofficeLightColors.primaryLight}`,\n    focusRingBrand: `0 0 0 2px ${backofficeLightColors.brandSecondaryOrange}`,\n    successLightRing: `0 0 0 2px ${backofficeLightColors.successLight}`,\n  },\n  stroke: {\n    ...backofficeLightColors,\n    none: 'none',\n  },\n} as const satisfies ThemeValues;\n\nexport const backofficeDarkThemeValues = {\n  ...publicLightThemeValues,\n  colors: backofficeDarkColors,\n  backgroundImage: {\n    ...publicLightThemeValues.backgroundImage,\n    pageShellSurface: `linear-gradient(180deg, ${backofficeDarkColors.background} 0%, ${backofficeDarkColors.backgroundSecondary} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${backofficeDarkColors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${backofficeDarkColors.surface} 0%, ${backofficeDarkColors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${backofficeDarkColors.surfaceMuted} 0%, ${backofficeDarkColors.surfaceSecondary} 45%, ${backofficeDarkColors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${backofficeDarkColors.surface} 0%, ${backofficeDarkColors.surfaceSecondary} 100%)`,\n  },\n  boxShadow: {\n    ...publicLightThemeValues.boxShadow,\n    inkSoft: '0 6px 18px rgb(0 0 0 / 0.3)',\n    inkGlow: '0 0 45px rgb(0 0 0 / 0.36)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${backofficeDarkColors.black} 40%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${backofficeDarkColors.black} 44%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${backofficeDarkColors.black} 42%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${backofficeDarkColors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${backofficeDarkColors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${backofficeDarkColors.primary}`,\n    primaryLightRing: `0 0 0 1px ${backofficeDarkColors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${backofficeDarkColors.primaryLight}`,\n    focusRing: `0 0 0 3px ${backofficeDarkColors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${backofficeDarkColors.error} 24%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${backofficeDarkColors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${backofficeDarkColors.black} 30%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${backofficeDarkColors.black} 38%, transparent)`,\n    successLightRing: `0 0 0 2px ${backofficeDarkColors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${backofficeDarkColors['blue-400']}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.22)',\n  },\n  stroke: {\n    ...backofficeDarkColors,\n    none: 'none',\n  },\n} as const satisfies ThemeValues;\n\nconst backofficeLightThemeVarsClass = createTheme(\n  vars,\n  backofficeLightThemeValues,\n);\nconst backofficeDarkThemeVarsClass = createTheme(\n  vars,\n  backofficeDarkThemeValues,\n);\n\nexport const backofficeLightThemeClass = style([\n  backofficeLightThemeVarsClass,\n  {\n    colorScheme: 'light',\n    backgroundColor: vars.colors.background,\n    color: vars.colors.text,\n    minHeight: '100vh',\n  },\n]);\n\nexport const backofficeDarkThemeClass = style([\n  backofficeDarkThemeVarsClass,\n  {\n    colorScheme: 'dark',\n    backgroundColor: vars.colors.background,\n    color: vars.colors.text,\n    minHeight: '100vh',\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"backofficeTheme.css.js","names":[],"sources":["../../../src/theme/backofficeTheme.css.ts"],"sourcesContent":["import { createTheme, style } from '@vanilla-extract/css';\n\nimport { publicLightThemeValues, type ThemeValues } from './publicTheme.css.js';\nimport { vars } from './themeContract.css.js';\n\nconst backofficeLightColors = {\n  ...publicLightThemeValues.colors,\n  background: '#F5F7FA',\n  backgroundSecondary: '#EEF2F7',\n  backgroundTertiary: '#E6ECF3',\n  backgroundModifier: '#D8E0EB',\n  surface: '#FFFFFF',\n  surfaceSecondary: '#F8FAFD',\n  surfaceMuted: '#EEF4FA',\n  surfaceElevated: '#FFFFFF',\n  text: '#101828',\n  textSecondary: '#475467',\n  textMuted: '#667085',\n  border: '#D9E2EC',\n  borderSubtle: '#E7EDF4',\n  borderStrong: '#C5D0DE',\n  borderLight: '#EEF2F6',\n  primaryLight: 'rgba(178, 24, 79, 0.14)',\n  brandLightGray: '#F6F8FB',\n  infoLight: '#EAF3FF',\n  successLight: '#EAF7EF',\n  warningLight: '#FFF4DA',\n} as const;\n\nconst backofficeDarkColors = {\n  ...publicLightThemeValues.colors,\n  primaryLight: 'rgba(222, 63, 118, 0.24)',\n  secondaryLight: '#143328',\n  surface: '#121821',\n  surfaceSecondary: '#171f2a',\n  surfaceMuted: '#202a37',\n  surfaceElevated: '#222d3b',\n  background: '#0a0f16',\n  backgroundSecondary: '#111822',\n  backgroundTertiary: '#182230',\n  backgroundModifier: '#2a3647',\n  text: '#f3f6fb',\n  textSecondary: '#c8d1df',\n  textMuted: '#95a1b4',\n  border: '#334155',\n  borderSubtle: '#273244',\n  borderStrong: '#475569',\n  borderLight: '#3b4658',\n  successLight: '#153624',\n  warningLight: '#3a2b12',\n  infoLight: '#142948',\n  brandLightGray: '#18212c',\n  brandDarkGray: '#f2f5fa',\n  brandSecondaryOrange: '#c6846f',\n  'brandSecondaryOrange-10': 'rgba(198, 132, 111, 0.12)',\n  'brandSecondaryOrange-20': 'rgba(198, 132, 111, 0.22)',\n  accent: '#d37c88',\n} as const;\n\nexport const backofficeLightThemeValues = {\n  ...publicLightThemeValues,\n  colors: backofficeLightColors,\n  backgroundImage: {\n    ...publicLightThemeValues.backgroundImage,\n    pageShellSurface: `linear-gradient(180deg, ${backofficeLightColors.background} 0%, ${backofficeLightColors.backgroundSecondary} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${backofficeLightColors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${backofficeLightColors.surface} 0%, ${backofficeLightColors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${backofficeLightColors.surfaceMuted} 0%, ${backofficeLightColors.surfaceSecondary} 45%, ${backofficeLightColors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${backofficeLightColors.surface} 0%, ${backofficeLightColors.surfaceSecondary} 100%)`,\n  },\n  boxShadow: {\n    ...publicLightThemeValues.boxShadow,\n    badgeInset: `inset 0 0 0 1px ${backofficeLightColors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${backofficeLightColors.surface}`,\n    primaryLightRing: `0 0 0 1px ${backofficeLightColors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${backofficeLightColors.primaryLight}`,\n    focusRing: `0 0 0 3px ${backofficeLightColors.primaryLight}`,\n    focusRingBrand: `0 0 0 2px ${backofficeLightColors.brandSecondaryOrange}`,\n    successLightRing: `0 0 0 2px ${backofficeLightColors.successLight}`,\n  },\n  sidebar: {\n    ...publicLightThemeValues.sidebar,\n    background: backofficeLightColors.surfaceElevated,\n    borderColor: backofficeLightColors.borderSubtle,\n    scrollbarColor: backofficeLightColors.borderLight,\n    itemColor: backofficeLightColors.textSecondary,\n    itemHoverBackground: backofficeLightColors.surfaceMuted,\n    itemHoverColor: backofficeLightColors.text,\n    itemActiveBackground: backofficeLightColors.primaryLight,\n    itemActiveBackgroundImage: 'none',\n    itemActiveColor: backofficeLightColors.primary,\n    itemActiveBorderColor: backofficeLightColors.primaryLight,\n    itemActiveShadow: `0 0 0 2px ${backofficeLightColors.primaryLight}`,\n    itemDisabledColor: backofficeLightColors.textMuted,\n    itemFocusRing: `0 0 0 3px ${backofficeLightColors.primaryLight}`,\n    nestedBorderColor: backofficeLightColors.border,\n    sectionHeaderColor: backofficeLightColors.textMuted,\n    sectionHeaderIconColor: backofficeLightColors.textMuted,\n    sectionHeaderHoverBackground: backofficeLightColors.surfaceMuted,\n    sectionToggleColor: backofficeLightColors.textMuted,\n    actionColor: backofficeLightColors.textSecondary,\n    actionHoverBackground: backofficeLightColors.surfaceMuted,\n    actionHoverColor: backofficeLightColors.text,\n    actionFocusRing: `0 0 0 3px ${backofficeLightColors.primaryLight}`,\n    dragHandleColor: backofficeLightColors.textSecondary,\n    dragHandleHoverBackground: backofficeLightColors.surfaceMuted,\n    dragHandleHoverColor: backofficeLightColors.text,\n    dragOverlayBackground: backofficeLightColors.surface,\n    dragOverlayColor: backofficeLightColors.text,\n    dragOverlayBorderColor: backofficeLightColors.border,\n    insertionIndicatorColor: backofficeLightColors.primary,\n    collapseButtonBackground: 'transparent',\n    collapseButtonColor: backofficeLightColors.textSecondary,\n    collapseButtonBorderColor: 'transparent',\n    collapseButtonHoverBackground: backofficeLightColors.surfaceMuted,\n    collapseButtonHoverColor: backofficeLightColors.text,\n    collapseButtonHoverShadow: 'none',\n    collapseButtonFocusRing: `0 0 0 3px ${backofficeLightColors.primaryLight}`,\n    profileTitleColor: backofficeLightColors.textSecondary,\n    profileTriggerBackground: backofficeLightColors.surfaceSecondary,\n    profileTriggerBorderColor: backofficeLightColors.borderSubtle,\n    profileTriggerHoverBackground: backofficeLightColors.surfaceElevated,\n    profileTriggerHoverBorderColor: backofficeLightColors.borderStrong,\n    profileTriggerFocusRing: `0 0 0 3px ${backofficeLightColors.primaryLight}`,\n    profileAvatarBackgroundImage: `linear-gradient(135deg, ${backofficeLightColors.brandPrimaryRed}, ${backofficeLightColors.brandSecondaryOrange})`,\n    profileAvatarColor: backofficeLightColors.brandWhite,\n    profileTextColor: backofficeLightColors.text,\n    profileSubtextColor: backofficeLightColors.textSecondary,\n    profileMenuHoverBackground: backofficeLightColors.surfaceSecondary,\n    profileMenuBorderColor: backofficeLightColors.borderSubtle,\n  },\n  stroke: {\n    ...backofficeLightColors,\n    none: 'none',\n  },\n} as const satisfies ThemeValues;\n\nexport const backofficeDarkThemeValues = {\n  ...publicLightThemeValues,\n  colors: backofficeDarkColors,\n  backgroundImage: {\n    ...publicLightThemeValues.backgroundImage,\n    pageShellSurface: `linear-gradient(180deg, ${backofficeDarkColors.background} 0%, ${backofficeDarkColors.backgroundSecondary} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${backofficeDarkColors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${backofficeDarkColors.surface} 0%, ${backofficeDarkColors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${backofficeDarkColors.surfaceMuted} 0%, ${backofficeDarkColors.surfaceSecondary} 45%, ${backofficeDarkColors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${backofficeDarkColors.surface} 0%, ${backofficeDarkColors.surfaceSecondary} 100%)`,\n  },\n  boxShadow: {\n    ...publicLightThemeValues.boxShadow,\n    inkSoft: '0 6px 18px rgb(0 0 0 / 0.3)',\n    inkGlow: '0 0 45px rgb(0 0 0 / 0.36)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${backofficeDarkColors.black} 40%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${backofficeDarkColors.black} 44%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${backofficeDarkColors.black} 42%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${backofficeDarkColors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${backofficeDarkColors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${backofficeDarkColors.primary}`,\n    primaryLightRing: `0 0 0 1px ${backofficeDarkColors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${backofficeDarkColors.primaryLight}`,\n    focusRing: `0 0 0 3px ${backofficeDarkColors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${backofficeDarkColors.error} 24%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${backofficeDarkColors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${backofficeDarkColors.black} 30%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${backofficeDarkColors.black} 38%, transparent)`,\n    successLightRing: `0 0 0 2px ${backofficeDarkColors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${backofficeDarkColors['blue-400']}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.22)',\n  },\n  sidebar: {\n    ...backofficeLightThemeValues.sidebar,\n    background: backofficeDarkColors.surfaceElevated,\n    borderColor: backofficeDarkColors.borderSubtle,\n    scrollbarColor: backofficeDarkColors.borderLight,\n    itemColor: backofficeDarkColors.textSecondary,\n    itemHoverBackground: backofficeDarkColors.surfaceMuted,\n    itemHoverColor: backofficeDarkColors.text,\n    itemActiveBackground: backofficeDarkColors.primaryLight,\n    itemActiveColor: backofficeDarkColors.primary,\n    itemActiveBorderColor: backofficeDarkColors.primaryLight,\n    itemActiveShadow: `0 0 0 2px ${backofficeDarkColors.primaryLight}`,\n    itemDisabledColor: backofficeDarkColors.textMuted,\n    itemFocusRing: `0 0 0 3px ${backofficeDarkColors.primaryLight}`,\n    nestedBorderColor: backofficeDarkColors.border,\n    sectionHeaderColor: backofficeDarkColors.textMuted,\n    sectionHeaderIconColor: backofficeDarkColors.textMuted,\n    sectionHeaderHoverBackground: backofficeDarkColors.surfaceMuted,\n    sectionToggleColor: backofficeDarkColors.textMuted,\n    actionColor: backofficeDarkColors.textSecondary,\n    actionHoverBackground: backofficeDarkColors.surfaceMuted,\n    actionHoverColor: backofficeDarkColors.text,\n    actionFocusRing: `0 0 0 3px ${backofficeDarkColors.primaryLight}`,\n    dragHandleColor: backofficeDarkColors.textSecondary,\n    dragHandleHoverBackground: backofficeDarkColors.surfaceMuted,\n    dragHandleHoverColor: backofficeDarkColors.text,\n    dragOverlayBackground: backofficeDarkColors.surface,\n    dragOverlayColor: backofficeDarkColors.text,\n    dragOverlayBorderColor: backofficeDarkColors.border,\n    insertionIndicatorColor: backofficeDarkColors.primary,\n    collapseButtonColor: backofficeDarkColors.textSecondary,\n    collapseButtonHoverBackground: backofficeDarkColors.surfaceMuted,\n    collapseButtonHoverColor: backofficeDarkColors.text,\n    collapseButtonFocusRing: `0 0 0 3px ${backofficeDarkColors.primaryLight}`,\n    profileTitleColor: backofficeDarkColors.textSecondary,\n    profileTriggerBackground: backofficeDarkColors.surfaceSecondary,\n    profileTriggerBorderColor: backofficeDarkColors.borderSubtle,\n    profileTriggerHoverBackground: backofficeDarkColors.surfaceElevated,\n    profileTriggerHoverBorderColor: backofficeDarkColors.borderStrong,\n    profileTriggerFocusRing: `0 0 0 3px ${backofficeDarkColors.primaryLight}`,\n    profileAvatarBackgroundImage: `linear-gradient(135deg, ${backofficeDarkColors.brandPrimaryRed}, ${backofficeDarkColors.brandSecondaryOrange})`,\n    profileAvatarColor: backofficeDarkColors.brandWhite,\n    profileTextColor: backofficeDarkColors.text,\n    profileSubtextColor: backofficeDarkColors.textSecondary,\n    profileMenuHoverBackground: backofficeDarkColors.surfaceSecondary,\n    profileMenuBorderColor: backofficeDarkColors.borderSubtle,\n  },\n  stroke: {\n    ...backofficeDarkColors,\n    none: 'none',\n  },\n} as const satisfies ThemeValues;\n\nconst backofficeLightThemeVarsClass = createTheme(\n  vars,\n  backofficeLightThemeValues,\n);\nconst backofficeDarkThemeVarsClass = createTheme(\n  vars,\n  backofficeDarkThemeValues,\n);\n\nexport const backofficeLightThemeClass = style([\n  backofficeLightThemeVarsClass,\n  {\n    colorScheme: 'light',\n    backgroundColor: vars.colors.background,\n    color: vars.colors.text,\n    minHeight: '100vh',\n  },\n]);\n\nexport const backofficeDarkThemeClass = style([\n  backofficeDarkThemeVarsClass,\n  {\n    colorScheme: 'dark',\n    backgroundColor: vars.colors.background,\n    color: vars.colors.text,\n    minHeight: '100vh',\n  },\n]);\n"],"mappings":""}

package/lib/esm/theme/publicTheme.css.js

@@ -1709,6 +1709,56 @@ var e = function() {
 			6: "6deg",
 			12: "12deg"
 		},
+		sidebar: {
+			background: "#F6F7FB",
+			borderColor: "#E6E8EE",
+			scrollbarColor: "#D4D7DC",
+			itemColor: "#333333",
+			itemHoverBackground: "#F8F8F8",
+			itemHoverColor: "#333333",
+			itemActiveBackground: "#c52640",
+			itemActiveBackgroundImage: "linear-gradient(135deg, #c52640, #d4aab1)",
+			itemActiveColor: "#FFFFFF",
+			itemActiveBorderColor: "#c52640",
+			itemActiveShadow: "none",
+			itemDisabledColor: "#747F8D",
+			itemFocusRing: "0 0 0 2px #d4aab1",
+			nestedBorderColor: "#c52640",
+			sectionHeaderColor: "#747F8D",
+			sectionHeaderIconColor: "#747F8D",
+			sectionHeaderHoverBackground: "#F8F8F8",
+			sectionToggleColor: "#747F8D",
+			actionColor: "#c52640",
+			actionHoverBackground: "#d4aab1",
+			actionHoverColor: "#FFFFFF",
+			actionFocusRing: "0 0 0 2px #d4aab1",
+			dragHandleColor: "#c52640",
+			dragHandleHoverBackground: "#F8F8F8",
+			dragHandleHoverColor: "#d4aab1",
+			dragOverlayBackground: "#FFFFFF",
+			dragOverlayColor: "#333333",
+			dragOverlayBorderColor: "#c52640",
+			insertionIndicatorColor: "#c52640",
+			collapseButtonBackground: "#FFFFFF",
+			collapseButtonColor: "#c52640",
+			collapseButtonBorderColor: "#c52640",
+			collapseButtonHoverBackground: "#d4aab1",
+			collapseButtonHoverColor: "#FFFFFF",
+			collapseButtonHoverShadow: "0 10px 24px rgb(252 106 81 / 0.25)",
+			collapseButtonFocusRing: "0 0 0 2px #d4aab1",
+			profileTitleColor: "#4E5058",
+			profileTriggerBackground: "#FFFFFF",
+			profileTriggerBorderColor: "#E6E8EE",
+			profileTriggerHoverBackground: "#F8F8F8",
+			profileTriggerHoverBorderColor: "#d4aab1",
+			profileTriggerFocusRing: "0 0 0 2px #d4aab1",
+			profileAvatarBackgroundImage: "linear-gradient(135deg, #c52640, #d4aab1)",
+			profileAvatarColor: "#FFFFFF",
+			profileTextColor: "#333333",
+			profileSubtextColor: "#4E5058",
+			profileMenuHoverBackground: "#F8F8F8",
+			profileMenuBorderColor: "#F8F8F8"
+		},
 		stroke: {
 			inherit: "inherit",
 			current: "currentColor",
@@ -3751,6 +3801,56 @@ var e = function() {
 			6: "6deg",
 			12: "12deg"
 		},
+		sidebar: {
+			background: "#11161d",
+			borderColor: "#263040",
+			scrollbarColor: "#364357",
+			itemColor: "#c5ccda",
+			itemHoverBackground: "rgba(143, 103, 113, 0.10)",
+			itemHoverColor: "#f5f7fb",
+			itemActiveBackground: "#c52640",
+			itemActiveBackgroundImage: "linear-gradient(135deg, #c52640, #8f6771)",
+			itemActiveColor: "#FFFFFF",
+			itemActiveBorderColor: "#c52640",
+			itemActiveShadow: "0 0 0 2px rgba(143, 103, 113, 0.20)",
+			itemDisabledColor: "#98a3b7",
+			itemFocusRing: "0 0 0 2px #8f6771",
+			nestedBorderColor: "#c52640",
+			sectionHeaderColor: "#98a3b7",
+			sectionHeaderIconColor: "#98a3b7",
+			sectionHeaderHoverBackground: "rgba(143, 103, 113, 0.10)",
+			sectionToggleColor: "#98a3b7",
+			actionColor: "#8f6771",
+			actionHoverBackground: "#c52640",
+			actionHoverColor: "#FFFFFF",
+			actionFocusRing: "0 0 0 2px #8f6771",
+			dragHandleColor: "#8f6771",
+			dragHandleHoverBackground: "rgba(143, 103, 113, 0.10)",
+			dragHandleHoverColor: "#FFFFFF",
+			dragOverlayBackground: "#202938",
+			dragOverlayColor: "#f5f7fb",
+			dragOverlayBorderColor: "#c52640",
+			insertionIndicatorColor: "#c52640",
+			collapseButtonBackground: "#11161d",
+			collapseButtonColor: "#8f6771",
+			collapseButtonBorderColor: "#c52640",
+			collapseButtonHoverBackground: "#c52640",
+			collapseButtonHoverColor: "#FFFFFF",
+			collapseButtonHoverShadow: "0 10px 24px rgba(143, 103, 113, 0.20)",
+			collapseButtonFocusRing: "0 0 0 2px #8f6771",
+			profileTitleColor: "#c5ccda",
+			profileTriggerBackground: "#171d26",
+			profileTriggerBorderColor: "rgba(143, 103, 113, 0.20)",
+			profileTriggerHoverBackground: "#202938",
+			profileTriggerHoverBorderColor: "#8f6771",
+			profileTriggerFocusRing: "0 0 0 2px #8f6771",
+			profileAvatarBackgroundImage: "linear-gradient(135deg, #c52640, #8f6771)",
+			profileAvatarColor: "#FFFFFF",
+			profileTextColor: "#f5f7fb",
+			profileSubtextColor: "#c5ccda",
+			profileMenuHoverBackground: "rgba(143, 103, 113, 0.10)",
+			profileMenuBorderColor: "rgba(143, 103, 113, 0.20)"
+		},
 		stroke: {
 			inherit: "inherit",
 			current: "currentColor",

package/lib/esm/theme/publicTheme.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"publicTheme.css.js","names":[],"sources":["../../../src/theme/publicTheme.css.ts"],"sourcesContent":["import { createTheme, style } from '@vanilla-extract/css';\n\nimport { opacity, screens, spacing } from './common.js';\nimport { colors } from './colors.js';\nimport { vars } from './themeContract.css.js';\n\nexport const publicLightThemeValues = {\n  spacing,\n  screens,\n  animation: {\n    none: 'none',\n    spin: 'spin 1s linear infinite',\n    ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',\n    pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n    bounce: 'bounce 1s infinite',\n  },\n  colors,\n  backgroundImage: {\n    brandDiagonal: `linear-gradient(135deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    brandDiagonal125: `linear-gradient(125deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    brandBackgroundGradient: colors.brandBackgroundGradient,\n    pageShellSurface: `linear-gradient(180deg, ${colors.surfaceSecondary} 0%, ${colors.surfaceMuted} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${colors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${colors.surface} 0%, ${colors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${colors.surfaceMuted} 0%, ${colors.surfaceSecondary} 45%, ${colors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${colors.surface} 0%, ${colors.surfaceSecondary} 100%)`,\n  },\n  borderRadius: {\n    none: '0px',\n    sm: '0.125rem',\n    default: '0.25rem',\n    md: '0.375rem',\n    lg: '0.5rem',\n    xl: '0.75rem',\n    '2xl': '1rem',\n    '3xl': '1.5rem',\n    '4xl': '2rem',\n    '1/2': '50%',\n    full: '9999px',\n  },\n  borderSpacing: spacing,\n  borderWidth: {\n    ...spacing,\n    default: '1px',\n    0: '0px',\n    2: '2px',\n    4: '4px',\n    6: '6px',\n    8: '8px',\n  },\n  boxShadow: {\n    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n    default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',\n    inkSoft: '0 6px 18px rgb(15 23 42 / 0.06)',\n    inkGlow: '0 0 45px rgb(15 23 42 / 0.12)',\n    brandGlow: '0 10px 24px rgb(252 106 81 / 0.25)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${colors.black} 20%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${colors.black} 20%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${colors.brandDarkGray} 12%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${colors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${colors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${colors.primary}`,\n    primaryLightRing: `0 0 0 1px ${colors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${colors.primaryLight}`,\n    focusRing: `0 0 0 3px ${colors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${colors.error} 20%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${colors.black} 8%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${colors.black} 10%, transparent)`,\n    successLightRing: `0 0 0 2px ${colors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${colors['blue-500']}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',\n    none: 'none',\n  },\n  dropShadow: {\n    sm: '0 1px 1px rgb(0 0 0 / 0.05)',\n    default: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'].join(\n      ', ',\n    ),\n    md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'].join(\n      ', ',\n    ),\n    lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'].join(\n      ', ',\n    ),\n    xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'].join(\n      ', ',\n    ),\n    '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',\n    none: '0 0 #0000',\n  },\n  grayscale: {\n    0: '0',\n    default: '100%',\n  },\n  hueRotate: {\n    0: '0deg',\n    15: '15deg',\n    30: '30deg',\n    60: '60deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  invert: {\n    0: '0',\n    default: '100%',\n  },\n  flex: {\n    1: '1 1 0%',\n    auto: '1 1 auto',\n    initial: '0 1 auto',\n    none: 'none',\n  },\n  flexBasis: {\n    ...spacing,\n    260: '260px',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n  },\n  flexGrow: {\n    0: '0',\n    default: '1',\n  },\n  flexShrink: {\n    0: '0',\n    default: '1',\n  },\n  fontFamily: {\n    sans: [\n      'ui-sans-serif',\n      'system-ui',\n      '-apple-system',\n      'BlinkMacSystemFont',\n      '\"Segoe UI\"',\n      'Roboto',\n      '\"Helvetica Neue\"',\n      'Arial',\n      '\"Noto Sans\"',\n      'sans-serif',\n      '\"Apple Color Emoji\"',\n      '\"Segoe UI Emoji\"',\n      '\"Segoe UI Symbol\"',\n      '\"Noto Color Emoji\"',\n    ].join(', '),\n    serif: [\n      'ui-serif',\n      'Georgia',\n      'Cambria',\n      '\"Times New Roman\"',\n      'Times',\n      'serif',\n    ].join(', '),\n    mono: [\n      'ui-monospace',\n      'SFMono-Regular',\n      'Menlo',\n      'Monaco',\n      'Consolas',\n      '\"Liberation Mono\"',\n      '\"Courier New\"',\n      'monospace',\n    ].join(', '),\n  },\n  fontSize: {\n    '3xs': '0.5rem',\n    '2xs': '0.625rem',\n    xs: '0.75rem',\n    sm: '0.875rem',\n    base: '1rem',\n    lg: '1.125rem',\n    xl: '1.25rem',\n    '2xl': '1.5rem',\n    '3xl': '1.875rem',\n    '4xl': '2.5rem',\n    '5xl': '3rem',\n    '6xl': '3.75rem',\n    '7xl': '4.5rem',\n    '8xl': '6rem',\n    '9xl': '8rem',\n    responsive: 'clamp(0.700rem, 0.7vw, 0.875rem)',\n  },\n  fontWeight: {\n    thin: '100',\n    extralight: '200',\n    light: '300',\n    normal: '400',\n    medium: '500',\n    semibold: '600',\n    bold: '700',\n    extrabold: '800',\n    black: '900',\n  },\n  gridAutoColumns: {\n    auto: 'auto',\n    min: 'min-content',\n    max: 'max-content',\n    fr: 'minmax(0, 1fr)',\n  },\n  gridAutoRows: {\n    auto: 'auto',\n    min: 'min-content',\n    max: 'max-content',\n    fr: 'minmax(0, 1fr)',\n  },\n  gridColumn: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-7': 'span 7 / span 7',\n    'span-8': 'span 8 / span 8',\n    'span-9': 'span 9 / span 9',\n    'span-10': 'span 10 / span 10',\n    'span-11': 'span 11 / span 11',\n    'span-12': 'span 12 / span 12',\n    'span-full': '1 / -1',\n  },\n  gridColumnEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridColumnStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridRow: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-full': '1 / -1',\n  },\n  gridRowStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridRowEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridTemplateColumns: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    7: 'repeat(7, minmax(0, 1fr))',\n    8: 'repeat(8, minmax(0, 1fr))',\n    9: 'repeat(9, minmax(0, 1fr))',\n    10: 'repeat(10, minmax(0, 1fr))',\n    11: 'repeat(11, minmax(0, 1fr))',\n    12: 'repeat(12, minmax(0, 1fr))',\n    detailSingle: 'minmax(0, 1fr)',\n    twoFrOneFr: 'minmax(0, 2fr) minmax(0, 1fr)',\n    detailAside320: 'minmax(0, 1fr) 320px',\n    minmax0Auto: 'minmax(0, 1fr) auto',\n    toolbarActions: 'minmax(0, 1fr) auto auto',\n    backofficeList: 'minmax(0, 1fr)',\n    backofficeDetail: 'minmax(0, 1fr) minmax(18rem, 24rem)',\n    settingsSplit: 'minmax(14rem, 18rem) minmax(0, 1fr)',\n    splitViewSplit: 'minmax(16rem, 26rem) minmax(0, 1fr)',\n    keyValueSplit: 'minmax(0, 10rem) minmax(0, 1fr)',\n    metadataStripSplit: 'minmax(0, 128px) minmax(0, 1fr)',\n    dashboardUneven: '1.1fr 1.3fr 1fr',\n    userProfileSplit: 'minmax(220px, 260px) minmax(0, 1fr)',\n    repeat4Fr: 'repeat(4, 1fr)',\n    autoFillMinmax320: 'repeat(auto-fill, minmax(320px, 1fr))',\n    autoFitMinmax0: 'repeat(auto-fit, minmax(0, 1fr))',\n    autoFitMinmax12_5rem: 'repeat(auto-fit, minmax(12.5rem, 1fr))',\n    autoFitMinmax120: 'repeat(auto-fit, minmax(120px, 1fr))',\n    autoFitMinmax160: 'repeat(auto-fit, minmax(160px, 1fr))',\n    autoFitMinmax180: 'repeat(auto-fit, minmax(180px, 1fr))',\n    autoFitMinmax200: 'repeat(auto-fit, minmax(200px, 1fr))',\n    autoFitMinmax220: 'repeat(auto-fit, minmax(220px, 1fr))',\n    autoFitMinmax240: 'repeat(auto-fit, minmax(240px, 1fr))',\n    autoFitMinmax260: 'repeat(auto-fit, minmax(260px, 1fr))',\n    autoFitMinmax280: 'repeat(auto-fit, minmax(280px, 1fr))',\n    autoFitMinmax320: 'repeat(auto-fit, minmax(320px, 1fr))',\n  },\n  gridTemplateRows: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    autoMinmax0: 'auto minmax(0, 1fr)',\n    autoAutoMinmax0: 'auto auto minmax(0, 1fr)',\n    minmax0Auto: 'minmax(0, 1fr) auto',\n    fr0: '0fr',\n    fr1: '1fr',\n  },\n  left: {\n    ...spacing,\n    '1/2': '50%',\n  },\n  top: {\n    ...spacing,\n    '1/2': '50%',\n  },\n  height: {\n    ...spacing,\n    1.1: '1.1rem',\n    260: '260px',\n    300: '300px',\n    340: '340px',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    full: '100%',\n    screen: '100vh',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n    auto: 'auto',\n  },\n  inset: {\n    ...spacing,\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    full: '100%',\n  },\n  keyframes: {\n    spin: {\n      to: {\n        transform: 'rotate(360deg)',\n      },\n    },\n    ping: {\n      '75%, 100%': {\n        transform: 'scale(2)',\n        opacity: '0',\n      },\n    },\n    pulse: {\n      '50%': {\n        opacity: '.5',\n      },\n    },\n    bounce: {\n      '0%, 100%': {\n        transform: 'translateY(-25%)',\n        animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',\n      },\n      '50%': {\n        transform: 'none',\n        animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',\n      },\n    },\n  },\n  letterSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0em',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.125em',\n    caps: '0.08em',\n    capsTight: '0.06em',\n    capsNarrow: '0.04em',\n  },\n  wordSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0em',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.125em',\n  },\n  lineHeight: {\n    ...spacing,\n    1.2: '1.2',\n    1.3: '1.3',\n    1.4: '1.4',\n    1.45: '1.45',\n    1.5: '1.5',\n    1.6: '1.6',\n    1.7: '1.7',\n    none: '1',\n    tight: '1.25',\n    snug: '1.375',\n    normal: '1.5',\n    relaxed: '1.625',\n    loose: '2',\n    '3xs': '0.75rem',\n    '2xs': '0.85rem',\n    xs: '1rem',\n    sm: '1.25rem',\n    base: '1.5rem',\n    lg: '1.75rem',\n    xl: '1.75rem',\n    '2xl': '2rem',\n    '3xl': '2.25rem',\n    '4xl': 'normal',\n    '5xl': '1',\n    '6xl': '1',\n    '7xl': '1',\n    '8xl': '1',\n    '9xl': '1',\n    responsive: '1',\n  },\n  listStyleType: {\n    none: 'none',\n    disc: 'disc',\n    decimal: 'decimal',\n  },\n  margin: {\n    ...spacing,\n  },\n  maxHeight: {\n    ...spacing,\n    '50vh': '50vh',\n    '70vh': '70vh',\n    '90vh': '90vh',\n    none: 'none',\n    full: '100%',\n    screen: '100vh',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n  },\n  maxWidth: {\n    '2xl': '42rem',\n    '3xl': '48rem',\n    '4xl': '56rem',\n    '5xl': '64rem',\n    '6xl': '72rem',\n    '7xl': '80rem',\n    '12rem': '12rem',\n    '26rem': '26rem',\n    '50vw': '50vw',\n    '10ch': '10ch',\n    '18ch': '18ch',\n    '28ch': '28ch',\n    '44ch': '44ch',\n    '64ch': '64ch',\n    960: '960px',\n    '2/5': '40%',\n    '3/4': '75%',\n    700: '700px',\n    720: '720px',\n    800: '800px',\n    640: '640px',\n    0: '0rem',\n    fit: 'fit-content',\n    full: '100%',\n    lg: '32rem',\n    max: 'max-content',\n    md: '28rem',\n    min: 'min-content',\n    none: 'none',\n    prose: '65ch',\n    sm: '24rem',\n    xl: '36rem',\n    xs: '20rem',\n  },\n  minHeight: {\n    ...spacing,\n    350: '350px',\n    360: '360px',\n    0: '0px',\n    fit: 'fit-content',\n    full: '100%',\n    max: 'max-content',\n    min: 'min-content',\n    screen: '100vh',\n    auto: 'auto',\n  },\n  minWidth: {\n    0: '0px',\n    360: '360px',\n    640: '640px',\n    fit: 'fit-content',\n    full: '100%',\n    max: 'max-content',\n    min: 'min-content',\n  },\n  objectPosition: {\n    'left-bottom': 'left bottom',\n    'left-top': 'left top',\n    'right-bottom': 'right bottom',\n    'right-top': 'right top',\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    right: 'right',\n    top: 'top',\n  },\n  opacity,\n  order: {\n    first: '-9999',\n    last: '9999',\n    none: '0',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n  },\n  outlineOffset: {\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  outlineWidth: {\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  rotate: {\n    0: '0deg',\n    1: '1deg',\n    2: '2deg',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n    45: '45deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  scale: {\n    0: '0',\n    50: '.5',\n    75: '.75',\n    90: '.9',\n    95: '.95',\n    100: '1',\n    105: '1.05',\n    110: '1.1',\n    125: '1.25',\n    150: '1.5',\n  },\n  sepia: {\n    0: '0',\n    default: '100%',\n  },\n  skew: {\n    0: '0deg',\n    1: '1deg',\n    2: '2deg',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n  },\n  stroke: {\n    ...colors,\n    none: 'none',\n  },\n  strokeWidth: {\n    0: '0',\n    1: '1',\n    2: '2',\n  },\n  textDecorationThickness: {\n    auto: 'auto',\n    'from-font': 'from-font',\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  textUnderlineOffset: {\n    auto: 'auto',\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  transform: {\n    0: 'translateX(0%)',\n    100: 'translateX(100%)',\n    200: 'translateX(200%)',\n    center: 'translate(-50%, -50%)',\n    left: 'translateX(0%)',\n    right: 'translateX(200%)',\n    none: 'none',\n    press: 'scale(0.98)',\n    lift: 'translateY(-1px)',\n    y0: 'translateY(0)',\n    centerY: 'translateY(-50%)',\n  },\n  transitionDelay: {\n    75: '75ms',\n    100: '100ms',\n    150: '150ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionDuration: {\n    default: '150ms',\n    75: '75ms',\n    100: '100ms',\n    120: '120ms',\n    150: '150ms',\n    160: '160ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionProperty: {\n    none: 'none',\n    all: 'all',\n    default:\n      'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',\n    colors:\n      'color, background-color, border-color, text-decoration-color, fill, stroke',\n    gap: 'gap',\n    gridTemplateRows: 'grid-template-rows',\n    gridTemplateRowsOpacity: 'grid-template-rows, opacity',\n    left: 'left',\n    opacity: 'opacity',\n    opacityVisibility: 'opacity, visibility',\n    shadow: 'box-shadow',\n    transform: 'transform',\n    width: 'width',\n  },\n  transitionTimingFunction: {\n    default: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    linear: 'linear',\n    ease: 'ease',\n    in: 'cubic-bezier(0.4, 0, 1, 1)',\n    'ease-in-out': 'ease-in-out',\n    out: 'cubic-bezier(0, 0, 0.2, 1)',\n    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',\n  },\n  width: {\n    ...spacing,\n    1.1: '1.1rem',\n    auto: 'auto',\n    140: '140px',\n    260: '260px',\n    300: '300px',\n    '8%': '8%',\n    '10%': '10%',\n    '12%': '12%',\n    '15%': '15%',\n    '16%': '16%',\n    '22%': '22%',\n    '26%': '26%',\n    '30%': '30%',\n    '70%': '70%',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n    screen: '100vw',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n  },\n  zIndex: {\n    auto: 'auto',\n    modal: '1000',\n    0: '0',\n    1: '1',\n    2: '2',\n    4: '4',\n    10: '10',\n    20: '20',\n    30: '30',\n    40: '40',\n    50: '50',\n  },\n} as const;\n\ntype ThemeValueTree<T> = T extends string\n  ? string\n  : {\n      readonly [Key in keyof T]: ThemeValueTree<T[Key]>;\n    };\n\nexport type ThemeValues = ThemeValueTree<typeof publicLightThemeValues>;\n\nconst publicDarkColors = {\n  ...colors,\n  primaryLight: 'rgba(165, 2, 70, 0.22)',\n  secondaryLight: '#173126',\n  surface: '#11161d',\n  surfaceSecondary: '#171d26',\n  surfaceMuted: '#1c2430',\n  surfaceElevated: '#202938',\n  background: '#0b1016',\n  backgroundSecondary: '#121822',\n  backgroundTertiary: '#18202c',\n  backgroundModifier: '#283244',\n  text: '#f5f7fb',\n  textSecondary: '#c5ccda',\n  textMuted: '#98a3b7',\n  border: '#2f3a4d',\n  borderSubtle: '#263040',\n  borderStrong: '#415069',\n  borderLight: '#364357',\n  successLight: '#183626',\n  warningLight: '#3b2d16',\n  infoLight: '#182544',\n  brandSecondaryOrange: '#8f6771',\n  'brandSecondaryOrange-10': 'rgba(143, 103, 113, 0.10)',\n  'brandSecondaryOrange-20': 'rgba(143, 103, 113, 0.20)',\n  accent: '#b36a78',\n  brandLightGray: '#1a212d',\n  brandDarkGray: '#eef2f8',\n} as const;\n\nexport const publicDarkThemeValues = {\n  ...publicLightThemeValues,\n  colors: publicDarkColors,\n  backgroundImage: {\n    ...publicLightThemeValues.backgroundImage,\n    pageShellSurface: `linear-gradient(180deg, ${publicDarkColors.surfaceSecondary} 0%, ${publicDarkColors.surfaceMuted} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${publicDarkColors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${publicDarkColors.surface} 0%, ${publicDarkColors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${publicDarkColors.surfaceMuted} 0%, ${publicDarkColors.surfaceSecondary} 45%, ${publicDarkColors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${publicDarkColors.surface} 0%, ${publicDarkColors.surfaceSecondary} 100%)`,\n  },\n  boxShadow: {\n    ...publicLightThemeValues.boxShadow,\n    inkSoft: '0 6px 18px rgb(0 0 0 / 0.28)',\n    inkGlow: '0 0 45px rgb(0 0 0 / 0.35)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${publicDarkColors.black} 38%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${publicDarkColors.black} 42%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${publicDarkColors.black} 40%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${publicDarkColors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${publicDarkColors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${publicDarkColors.primary}`,\n    primaryLightRing: `0 0 0 1px ${publicDarkColors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${publicDarkColors.primaryLight}`,\n    focusRing: `0 0 0 3px ${publicDarkColors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${publicDarkColors.error} 24%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${publicDarkColors.black} 28%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${publicDarkColors.black} 36%, transparent)`,\n    successLightRing: `0 0 0 2px ${publicDarkColors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${publicDarkColors['blue-400']}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.2)',\n  },\n  stroke: {\n    ...publicDarkColors,\n    none: 'none',\n  },\n} as const satisfies ThemeValues;\n\nconst publicLightThemeVarsClass = createTheme(vars, publicLightThemeValues);\nconst publicDarkThemeVarsClass = createTheme(vars, publicDarkThemeValues);\n\nexport const publicLightThemeClass = style([\n  publicLightThemeVarsClass,\n  {\n    colorScheme: 'light',\n  },\n]);\n\nexport const publicDarkThemeClass = style([\n  publicDarkThemeVarsClass,\n  {\n    colorScheme: 'dark',\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"publicTheme.css.js","names":[],"sources":["../../../src/theme/publicTheme.css.ts"],"sourcesContent":["import { createTheme, style } from '@vanilla-extract/css';\n\nimport { opacity, screens, spacing } from './common.js';\nimport { colors } from './colors.js';\nimport { vars } from './themeContract.css.js';\n\nexport const publicLightThemeValues = {\n  spacing,\n  screens,\n  animation: {\n    none: 'none',\n    spin: 'spin 1s linear infinite',\n    ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',\n    pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n    bounce: 'bounce 1s infinite',\n  },\n  colors,\n  backgroundImage: {\n    brandDiagonal: `linear-gradient(135deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    brandDiagonal125: `linear-gradient(125deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    brandBackgroundGradient: colors.brandBackgroundGradient,\n    pageShellSurface: `linear-gradient(180deg, ${colors.surfaceSecondary} 0%, ${colors.surfaceMuted} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${colors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${colors.surface} 0%, ${colors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${colors.surfaceMuted} 0%, ${colors.surfaceSecondary} 45%, ${colors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${colors.surface} 0%, ${colors.surfaceSecondary} 100%)`,\n  },\n  borderRadius: {\n    none: '0px',\n    sm: '0.125rem',\n    default: '0.25rem',\n    md: '0.375rem',\n    lg: '0.5rem',\n    xl: '0.75rem',\n    '2xl': '1rem',\n    '3xl': '1.5rem',\n    '4xl': '2rem',\n    '1/2': '50%',\n    full: '9999px',\n  },\n  borderSpacing: spacing,\n  borderWidth: {\n    ...spacing,\n    default: '1px',\n    0: '0px',\n    2: '2px',\n    4: '4px',\n    6: '6px',\n    8: '8px',\n  },\n  boxShadow: {\n    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n    default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',\n    inkSoft: '0 6px 18px rgb(15 23 42 / 0.06)',\n    inkGlow: '0 0 45px rgb(15 23 42 / 0.12)',\n    brandGlow: '0 10px 24px rgb(252 106 81 / 0.25)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${colors.black} 20%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${colors.black} 20%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${colors.brandDarkGray} 12%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${colors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${colors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${colors.primary}`,\n    primaryLightRing: `0 0 0 1px ${colors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${colors.primaryLight}`,\n    focusRing: `0 0 0 3px ${colors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${colors.error} 20%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${colors.black} 8%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${colors.black} 10%, transparent)`,\n    successLightRing: `0 0 0 2px ${colors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${colors['blue-500']}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',\n    none: 'none',\n  },\n  dropShadow: {\n    sm: '0 1px 1px rgb(0 0 0 / 0.05)',\n    default: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'].join(\n      ', ',\n    ),\n    md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'].join(\n      ', ',\n    ),\n    lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'].join(\n      ', ',\n    ),\n    xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'].join(\n      ', ',\n    ),\n    '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',\n    none: '0 0 #0000',\n  },\n  grayscale: {\n    0: '0',\n    default: '100%',\n  },\n  hueRotate: {\n    0: '0deg',\n    15: '15deg',\n    30: '30deg',\n    60: '60deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  invert: {\n    0: '0',\n    default: '100%',\n  },\n  flex: {\n    1: '1 1 0%',\n    auto: '1 1 auto',\n    initial: '0 1 auto',\n    none: 'none',\n  },\n  flexBasis: {\n    ...spacing,\n    260: '260px',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n  },\n  flexGrow: {\n    0: '0',\n    default: '1',\n  },\n  flexShrink: {\n    0: '0',\n    default: '1',\n  },\n  fontFamily: {\n    sans: [\n      'ui-sans-serif',\n      'system-ui',\n      '-apple-system',\n      'BlinkMacSystemFont',\n      '\"Segoe UI\"',\n      'Roboto',\n      '\"Helvetica Neue\"',\n      'Arial',\n      '\"Noto Sans\"',\n      'sans-serif',\n      '\"Apple Color Emoji\"',\n      '\"Segoe UI Emoji\"',\n      '\"Segoe UI Symbol\"',\n      '\"Noto Color Emoji\"',\n    ].join(', '),\n    serif: [\n      'ui-serif',\n      'Georgia',\n      'Cambria',\n      '\"Times New Roman\"',\n      'Times',\n      'serif',\n    ].join(', '),\n    mono: [\n      'ui-monospace',\n      'SFMono-Regular',\n      'Menlo',\n      'Monaco',\n      'Consolas',\n      '\"Liberation Mono\"',\n      '\"Courier New\"',\n      'monospace',\n    ].join(', '),\n  },\n  fontSize: {\n    '3xs': '0.5rem',\n    '2xs': '0.625rem',\n    xs: '0.75rem',\n    sm: '0.875rem',\n    base: '1rem',\n    lg: '1.125rem',\n    xl: '1.25rem',\n    '2xl': '1.5rem',\n    '3xl': '1.875rem',\n    '4xl': '2.5rem',\n    '5xl': '3rem',\n    '6xl': '3.75rem',\n    '7xl': '4.5rem',\n    '8xl': '6rem',\n    '9xl': '8rem',\n    responsive: 'clamp(0.700rem, 0.7vw, 0.875rem)',\n  },\n  fontWeight: {\n    thin: '100',\n    extralight: '200',\n    light: '300',\n    normal: '400',\n    medium: '500',\n    semibold: '600',\n    bold: '700',\n    extrabold: '800',\n    black: '900',\n  },\n  gridAutoColumns: {\n    auto: 'auto',\n    min: 'min-content',\n    max: 'max-content',\n    fr: 'minmax(0, 1fr)',\n  },\n  gridAutoRows: {\n    auto: 'auto',\n    min: 'min-content',\n    max: 'max-content',\n    fr: 'minmax(0, 1fr)',\n  },\n  gridColumn: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-7': 'span 7 / span 7',\n    'span-8': 'span 8 / span 8',\n    'span-9': 'span 9 / span 9',\n    'span-10': 'span 10 / span 10',\n    'span-11': 'span 11 / span 11',\n    'span-12': 'span 12 / span 12',\n    'span-full': '1 / -1',\n  },\n  gridColumnEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridColumnStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridRow: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-full': '1 / -1',\n  },\n  gridRowStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridRowEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridTemplateColumns: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    7: 'repeat(7, minmax(0, 1fr))',\n    8: 'repeat(8, minmax(0, 1fr))',\n    9: 'repeat(9, minmax(0, 1fr))',\n    10: 'repeat(10, minmax(0, 1fr))',\n    11: 'repeat(11, minmax(0, 1fr))',\n    12: 'repeat(12, minmax(0, 1fr))',\n    detailSingle: 'minmax(0, 1fr)',\n    twoFrOneFr: 'minmax(0, 2fr) minmax(0, 1fr)',\n    detailAside320: 'minmax(0, 1fr) 320px',\n    minmax0Auto: 'minmax(0, 1fr) auto',\n    toolbarActions: 'minmax(0, 1fr) auto auto',\n    backofficeList: 'minmax(0, 1fr)',\n    backofficeDetail: 'minmax(0, 1fr) minmax(18rem, 24rem)',\n    settingsSplit: 'minmax(14rem, 18rem) minmax(0, 1fr)',\n    splitViewSplit: 'minmax(16rem, 26rem) minmax(0, 1fr)',\n    keyValueSplit: 'minmax(0, 10rem) minmax(0, 1fr)',\n    metadataStripSplit: 'minmax(0, 128px) minmax(0, 1fr)',\n    dashboardUneven: '1.1fr 1.3fr 1fr',\n    userProfileSplit: 'minmax(220px, 260px) minmax(0, 1fr)',\n    repeat4Fr: 'repeat(4, 1fr)',\n    autoFillMinmax320: 'repeat(auto-fill, minmax(320px, 1fr))',\n    autoFitMinmax0: 'repeat(auto-fit, minmax(0, 1fr))',\n    autoFitMinmax12_5rem: 'repeat(auto-fit, minmax(12.5rem, 1fr))',\n    autoFitMinmax120: 'repeat(auto-fit, minmax(120px, 1fr))',\n    autoFitMinmax160: 'repeat(auto-fit, minmax(160px, 1fr))',\n    autoFitMinmax180: 'repeat(auto-fit, minmax(180px, 1fr))',\n    autoFitMinmax200: 'repeat(auto-fit, minmax(200px, 1fr))',\n    autoFitMinmax220: 'repeat(auto-fit, minmax(220px, 1fr))',\n    autoFitMinmax240: 'repeat(auto-fit, minmax(240px, 1fr))',\n    autoFitMinmax260: 'repeat(auto-fit, minmax(260px, 1fr))',\n    autoFitMinmax280: 'repeat(auto-fit, minmax(280px, 1fr))',\n    autoFitMinmax320: 'repeat(auto-fit, minmax(320px, 1fr))',\n  },\n  gridTemplateRows: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    autoMinmax0: 'auto minmax(0, 1fr)',\n    autoAutoMinmax0: 'auto auto minmax(0, 1fr)',\n    minmax0Auto: 'minmax(0, 1fr) auto',\n    fr0: '0fr',\n    fr1: '1fr',\n  },\n  left: {\n    ...spacing,\n    '1/2': '50%',\n  },\n  top: {\n    ...spacing,\n    '1/2': '50%',\n  },\n  height: {\n    ...spacing,\n    1.1: '1.1rem',\n    260: '260px',\n    300: '300px',\n    340: '340px',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    full: '100%',\n    screen: '100vh',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n    auto: 'auto',\n  },\n  inset: {\n    ...spacing,\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    full: '100%',\n  },\n  keyframes: {\n    spin: {\n      to: {\n        transform: 'rotate(360deg)',\n      },\n    },\n    ping: {\n      '75%, 100%': {\n        transform: 'scale(2)',\n        opacity: '0',\n      },\n    },\n    pulse: {\n      '50%': {\n        opacity: '.5',\n      },\n    },\n    bounce: {\n      '0%, 100%': {\n        transform: 'translateY(-25%)',\n        animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',\n      },\n      '50%': {\n        transform: 'none',\n        animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',\n      },\n    },\n  },\n  letterSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0em',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.125em',\n    caps: '0.08em',\n    capsTight: '0.06em',\n    capsNarrow: '0.04em',\n  },\n  wordSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0em',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.125em',\n  },\n  lineHeight: {\n    ...spacing,\n    1.2: '1.2',\n    1.3: '1.3',\n    1.4: '1.4',\n    1.45: '1.45',\n    1.5: '1.5',\n    1.6: '1.6',\n    1.7: '1.7',\n    none: '1',\n    tight: '1.25',\n    snug: '1.375',\n    normal: '1.5',\n    relaxed: '1.625',\n    loose: '2',\n    '3xs': '0.75rem',\n    '2xs': '0.85rem',\n    xs: '1rem',\n    sm: '1.25rem',\n    base: '1.5rem',\n    lg: '1.75rem',\n    xl: '1.75rem',\n    '2xl': '2rem',\n    '3xl': '2.25rem',\n    '4xl': 'normal',\n    '5xl': '1',\n    '6xl': '1',\n    '7xl': '1',\n    '8xl': '1',\n    '9xl': '1',\n    responsive: '1',\n  },\n  listStyleType: {\n    none: 'none',\n    disc: 'disc',\n    decimal: 'decimal',\n  },\n  margin: {\n    ...spacing,\n  },\n  maxHeight: {\n    ...spacing,\n    '50vh': '50vh',\n    '70vh': '70vh',\n    '90vh': '90vh',\n    none: 'none',\n    full: '100%',\n    screen: '100vh',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n  },\n  maxWidth: {\n    '2xl': '42rem',\n    '3xl': '48rem',\n    '4xl': '56rem',\n    '5xl': '64rem',\n    '6xl': '72rem',\n    '7xl': '80rem',\n    '12rem': '12rem',\n    '26rem': '26rem',\n    '50vw': '50vw',\n    '10ch': '10ch',\n    '18ch': '18ch',\n    '28ch': '28ch',\n    '44ch': '44ch',\n    '64ch': '64ch',\n    960: '960px',\n    '2/5': '40%',\n    '3/4': '75%',\n    700: '700px',\n    720: '720px',\n    800: '800px',\n    640: '640px',\n    0: '0rem',\n    fit: 'fit-content',\n    full: '100%',\n    lg: '32rem',\n    max: 'max-content',\n    md: '28rem',\n    min: 'min-content',\n    none: 'none',\n    prose: '65ch',\n    sm: '24rem',\n    xl: '36rem',\n    xs: '20rem',\n  },\n  minHeight: {\n    ...spacing,\n    350: '350px',\n    360: '360px',\n    0: '0px',\n    fit: 'fit-content',\n    full: '100%',\n    max: 'max-content',\n    min: 'min-content',\n    screen: '100vh',\n    auto: 'auto',\n  },\n  minWidth: {\n    0: '0px',\n    360: '360px',\n    640: '640px',\n    fit: 'fit-content',\n    full: '100%',\n    max: 'max-content',\n    min: 'min-content',\n  },\n  objectPosition: {\n    'left-bottom': 'left bottom',\n    'left-top': 'left top',\n    'right-bottom': 'right bottom',\n    'right-top': 'right top',\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    right: 'right',\n    top: 'top',\n  },\n  opacity,\n  order: {\n    first: '-9999',\n    last: '9999',\n    none: '0',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n  },\n  outlineOffset: {\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  outlineWidth: {\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  rotate: {\n    0: '0deg',\n    1: '1deg',\n    2: '2deg',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n    45: '45deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  scale: {\n    0: '0',\n    50: '.5',\n    75: '.75',\n    90: '.9',\n    95: '.95',\n    100: '1',\n    105: '1.05',\n    110: '1.1',\n    125: '1.25',\n    150: '1.5',\n  },\n  sepia: {\n    0: '0',\n    default: '100%',\n  },\n  skew: {\n    0: '0deg',\n    1: '1deg',\n    2: '2deg',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n  },\n  sidebar: {\n    background: colors.surfaceSecondary,\n    borderColor: colors.borderSubtle,\n    scrollbarColor: colors.borderLight,\n    itemColor: colors.brandDarkGray,\n    itemHoverBackground: colors.brandLightGray,\n    itemHoverColor: colors.brandDarkGray,\n    itemActiveBackground: colors.brandPrimaryRed,\n    itemActiveBackgroundImage: `linear-gradient(135deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    itemActiveColor: colors.brandWhite,\n    itemActiveBorderColor: colors.brandPrimaryRed,\n    itemActiveShadow: 'none',\n    itemDisabledColor: colors.textMuted,\n    itemFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    nestedBorderColor: colors.brandPrimaryRed,\n    sectionHeaderColor: colors.textMuted,\n    sectionHeaderIconColor: colors.textMuted,\n    sectionHeaderHoverBackground: colors.brandLightGray,\n    sectionToggleColor: colors.textMuted,\n    actionColor: colors.brandPrimaryRed,\n    actionHoverBackground: colors.brandSecondaryOrange,\n    actionHoverColor: colors.brandWhite,\n    actionFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    dragHandleColor: colors.brandPrimaryRed,\n    dragHandleHoverBackground: colors.brandLightGray,\n    dragHandleHoverColor: colors.brandSecondaryOrange,\n    dragOverlayBackground: colors.brandWhite,\n    dragOverlayColor: colors.brandDarkGray,\n    dragOverlayBorderColor: colors.brandPrimaryRed,\n    insertionIndicatorColor: colors.brandPrimaryRed,\n    collapseButtonBackground: colors.brandWhite,\n    collapseButtonColor: colors.brandPrimaryRed,\n    collapseButtonBorderColor: colors.brandPrimaryRed,\n    collapseButtonHoverBackground: colors.brandSecondaryOrange,\n    collapseButtonHoverColor: colors.brandWhite,\n    collapseButtonHoverShadow: '0 10px 24px rgb(252 106 81 / 0.25)',\n    collapseButtonFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    profileTitleColor: colors.textSecondary,\n    profileTriggerBackground: colors.brandWhite,\n    profileTriggerBorderColor: colors.borderSubtle,\n    profileTriggerHoverBackground: colors.brandLightGray,\n    profileTriggerHoverBorderColor: colors.brandSecondaryOrange,\n    profileTriggerFocusRing: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    profileAvatarBackgroundImage: `linear-gradient(135deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    profileAvatarColor: colors.brandWhite,\n    profileTextColor: colors.brandDarkGray,\n    profileSubtextColor: colors.textSecondary,\n    profileMenuHoverBackground: colors.brandLightGray,\n    profileMenuBorderColor: colors.brandLightGray,\n  },\n  stroke: {\n    ...colors,\n    none: 'none',\n  },\n  strokeWidth: {\n    0: '0',\n    1: '1',\n    2: '2',\n  },\n  textDecorationThickness: {\n    auto: 'auto',\n    'from-font': 'from-font',\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  textUnderlineOffset: {\n    auto: 'auto',\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  transform: {\n    0: 'translateX(0%)',\n    100: 'translateX(100%)',\n    200: 'translateX(200%)',\n    center: 'translate(-50%, -50%)',\n    left: 'translateX(0%)',\n    right: 'translateX(200%)',\n    none: 'none',\n    press: 'scale(0.98)',\n    lift: 'translateY(-1px)',\n    y0: 'translateY(0)',\n    centerY: 'translateY(-50%)',\n  },\n  transitionDelay: {\n    75: '75ms',\n    100: '100ms',\n    150: '150ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionDuration: {\n    default: '150ms',\n    75: '75ms',\n    100: '100ms',\n    120: '120ms',\n    150: '150ms',\n    160: '160ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionProperty: {\n    none: 'none',\n    all: 'all',\n    default:\n      'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',\n    colors:\n      'color, background-color, border-color, text-decoration-color, fill, stroke',\n    gap: 'gap',\n    gridTemplateRows: 'grid-template-rows',\n    gridTemplateRowsOpacity: 'grid-template-rows, opacity',\n    left: 'left',\n    opacity: 'opacity',\n    opacityVisibility: 'opacity, visibility',\n    shadow: 'box-shadow',\n    transform: 'transform',\n    width: 'width',\n  },\n  transitionTimingFunction: {\n    default: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    linear: 'linear',\n    ease: 'ease',\n    in: 'cubic-bezier(0.4, 0, 1, 1)',\n    'ease-in-out': 'ease-in-out',\n    out: 'cubic-bezier(0, 0, 0.2, 1)',\n    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',\n  },\n  width: {\n    ...spacing,\n    1.1: '1.1rem',\n    auto: 'auto',\n    140: '140px',\n    260: '260px',\n    300: '300px',\n    '8%': '8%',\n    '10%': '10%',\n    '12%': '12%',\n    '15%': '15%',\n    '16%': '16%',\n    '22%': '22%',\n    '26%': '26%',\n    '30%': '30%',\n    '70%': '70%',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n    screen: '100vw',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n  },\n  zIndex: {\n    auto: 'auto',\n    modal: '1000',\n    0: '0',\n    1: '1',\n    2: '2',\n    4: '4',\n    10: '10',\n    20: '20',\n    30: '30',\n    40: '40',\n    50: '50',\n  },\n} as const;\n\ntype ThemeValueTree<T> = T extends string\n  ? string\n  : {\n      readonly [Key in keyof T]: ThemeValueTree<T[Key]>;\n    };\n\nexport type ThemeValues = ThemeValueTree<typeof publicLightThemeValues>;\n\nconst publicDarkColors = {\n  ...colors,\n  primaryLight: 'rgba(165, 2, 70, 0.22)',\n  secondaryLight: '#173126',\n  surface: '#11161d',\n  surfaceSecondary: '#171d26',\n  surfaceMuted: '#1c2430',\n  surfaceElevated: '#202938',\n  background: '#0b1016',\n  backgroundSecondary: '#121822',\n  backgroundTertiary: '#18202c',\n  backgroundModifier: '#283244',\n  text: '#f5f7fb',\n  textSecondary: '#c5ccda',\n  textMuted: '#98a3b7',\n  border: '#2f3a4d',\n  borderSubtle: '#263040',\n  borderStrong: '#415069',\n  borderLight: '#364357',\n  successLight: '#183626',\n  warningLight: '#3b2d16',\n  infoLight: '#182544',\n  brandSecondaryOrange: '#8f6771',\n  'brandSecondaryOrange-10': 'rgba(143, 103, 113, 0.10)',\n  'brandSecondaryOrange-20': 'rgba(143, 103, 113, 0.20)',\n  accent: '#b36a78',\n  brandLightGray: '#1a212d',\n  brandDarkGray: '#eef2f8',\n} as const;\n\nexport const publicDarkThemeValues = {\n  ...publicLightThemeValues,\n  colors: publicDarkColors,\n  backgroundImage: {\n    ...publicLightThemeValues.backgroundImage,\n    pageShellSurface: `linear-gradient(180deg, ${publicDarkColors.surfaceSecondary} 0%, ${publicDarkColors.surfaceMuted} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${publicDarkColors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${publicDarkColors.surface} 0%, ${publicDarkColors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${publicDarkColors.surfaceMuted} 0%, ${publicDarkColors.surfaceSecondary} 45%, ${publicDarkColors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${publicDarkColors.surface} 0%, ${publicDarkColors.surfaceSecondary} 100%)`,\n  },\n  boxShadow: {\n    ...publicLightThemeValues.boxShadow,\n    inkSoft: '0 6px 18px rgb(0 0 0 / 0.28)',\n    inkGlow: '0 0 45px rgb(0 0 0 / 0.35)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${publicDarkColors.black} 38%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${publicDarkColors.black} 42%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${publicDarkColors.black} 40%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${publicDarkColors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${publicDarkColors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${publicDarkColors.primary}`,\n    primaryLightRing: `0 0 0 1px ${publicDarkColors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${publicDarkColors.primaryLight}`,\n    focusRing: `0 0 0 3px ${publicDarkColors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${publicDarkColors.error} 24%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${publicDarkColors.black} 28%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${publicDarkColors.black} 36%, transparent)`,\n    successLightRing: `0 0 0 2px ${publicDarkColors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${publicDarkColors['blue-400']}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.2)',\n  },\n  sidebar: {\n    ...publicLightThemeValues.sidebar,\n    background: publicDarkColors.surface,\n    borderColor: publicDarkColors.borderSubtle,\n    scrollbarColor: publicDarkColors.borderLight,\n    itemColor: publicDarkColors.textSecondary,\n    itemHoverBackground: publicDarkColors['brandSecondaryOrange-10'],\n    itemHoverColor: publicDarkColors.text,\n    itemActiveBackground: publicDarkColors.brandPrimaryRed,\n    itemActiveBackgroundImage: `linear-gradient(135deg, ${publicDarkColors.brandPrimaryRed}, ${publicDarkColors.brandSecondaryOrange})`,\n    itemActiveColor: publicDarkColors.brandWhite,\n    itemActiveBorderColor: publicDarkColors.brandPrimaryRed,\n    itemActiveShadow: `0 0 0 2px ${publicDarkColors['brandSecondaryOrange-20']}`,\n    itemDisabledColor: publicDarkColors.textMuted,\n    itemFocusRing: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    nestedBorderColor: publicDarkColors.brandPrimaryRed,\n    sectionHeaderColor: publicDarkColors.textMuted,\n    sectionHeaderIconColor: publicDarkColors.textMuted,\n    sectionHeaderHoverBackground: publicDarkColors['brandSecondaryOrange-10'],\n    sectionToggleColor: publicDarkColors.textMuted,\n    actionColor: publicDarkColors.brandSecondaryOrange,\n    actionHoverBackground: publicDarkColors.brandPrimaryRed,\n    actionHoverColor: publicDarkColors.brandWhite,\n    actionFocusRing: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    dragHandleColor: publicDarkColors.brandSecondaryOrange,\n    dragHandleHoverBackground: publicDarkColors['brandSecondaryOrange-10'],\n    dragHandleHoverColor: publicDarkColors.brandWhite,\n    dragOverlayBackground: publicDarkColors.surfaceElevated,\n    dragOverlayColor: publicDarkColors.text,\n    dragOverlayBorderColor: publicDarkColors.brandPrimaryRed,\n    insertionIndicatorColor: publicDarkColors.brandPrimaryRed,\n    collapseButtonBackground: publicDarkColors.surface,\n    collapseButtonColor: publicDarkColors.brandSecondaryOrange,\n    collapseButtonBorderColor: publicDarkColors.brandPrimaryRed,\n    collapseButtonHoverBackground: publicDarkColors.brandPrimaryRed,\n    collapseButtonHoverColor: publicDarkColors.brandWhite,\n    collapseButtonHoverShadow: `0 10px 24px ${publicDarkColors['brandSecondaryOrange-20']}`,\n    collapseButtonFocusRing: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    profileTitleColor: publicDarkColors.textSecondary,\n    profileTriggerBackground: publicDarkColors.surfaceSecondary,\n    profileTriggerBorderColor: publicDarkColors['brandSecondaryOrange-20'],\n    profileTriggerHoverBackground: publicDarkColors.surfaceElevated,\n    profileTriggerHoverBorderColor: publicDarkColors.brandSecondaryOrange,\n    profileTriggerFocusRing: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    profileAvatarBackgroundImage: `linear-gradient(135deg, ${publicDarkColors.brandPrimaryRed}, ${publicDarkColors.brandSecondaryOrange})`,\n    profileAvatarColor: publicDarkColors.brandWhite,\n    profileTextColor: publicDarkColors.text,\n    profileSubtextColor: publicDarkColors.textSecondary,\n    profileMenuHoverBackground: publicDarkColors['brandSecondaryOrange-10'],\n    profileMenuBorderColor: publicDarkColors['brandSecondaryOrange-20'],\n  },\n  stroke: {\n    ...publicDarkColors,\n    none: 'none',\n  },\n} as const satisfies ThemeValues;\n\nconst publicLightThemeVarsClass = createTheme(vars, publicLightThemeValues);\nconst publicDarkThemeVarsClass = createTheme(vars, publicDarkThemeValues);\n\nexport const publicLightThemeClass = style([\n  publicLightThemeVarsClass,\n  {\n    colorScheme: 'light',\n  },\n]);\n\nexport const publicDarkThemeClass = style([\n  publicDarkThemeVarsClass,\n  {\n    colorScheme: 'dark',\n  },\n]);\n"],"mappings":""}