@yl_lowcode/docs-theme 0.0.6 → 0.0.8

package/color/blue.ts

@@ -0,0 +1,12 @@
+export default {
+  "Brand-1": "#E9F5FE",
+  "Brand-2": "#BDE2FF",
+  "Brand-10": "#001D61",
+  "Brand-3": "#94CDFF",
+  "Brand-4": "#6BB5FF",
+  "Brand-5": "#429AFF",
+  "Brand-6": "#197AFA",
+  "Brand-7": "#0B5BD4",
+  "Brand-8": "#0040AD",
+  "Brand-9": "#002D87",
+};

package/color/dark.ts

@@ -0,0 +1,298 @@
+export default {
+  "Brand-1": "#283546",
+  "Brand-2": "#2A4366",
+  "Brand-10": "#D9F0FF",
+  "Brand-3": "#2B5285",
+  "Brand-4": "#2D61A5F9",
+  "Brand-5": "#3079DA",
+  "Brand-6": "#3288FA",
+  "Brand-7": "#58A9FC",
+  "Brand-8": "#8BC8FD",
+  "Brand-9": "#B2DCFE",
+  "Neutral-text-5": "#FFFFFFE6",
+  "Neutral-text-4": "#FFFFFFBF",
+  "Neutral-text-3": "#FFFFFF99",
+  "Neutral-text-2": "#FFFFFF4D",
+  "Neutral-border-2": "#555555",
+  "Neutral-border-1": "#333333",
+  "Neutral-fill-4": "#515151",
+  "Neutral-fill-3": "#3B3B3B",
+  "Neutral-fill-2": "#181819",
+  "Neutral-fill-1": "#1b1b1f",
+  buttonPrimaryDisabledFontColor: "var(--soui-neutral-text-2)",
+  buttonSecondaryFontColor: "var(--soui-neutral-text-1)",
+  buttonWarningDisabledFontColor: "var(--soui-neutral-text-2)",
+  inputFontColor: "var(--soui-neutral-text-5)",
+  selectFontColor: "var(--soui-neutral-text-1)",
+  selectBorderWidth: "var(--soui-border-2)",
+  selectPlaceholderColor: "var(--soui-neutral-text-2)",
+  selectBackgroundColor: "var(--soui-neutral-fill-2)",
+  "Danger-1": "#412B2B",
+  "Danger-10": "#FFECE8",
+  "Danger-2": "#542E2E",
+  "Danger-3": "#6F3233",
+  "Danger-4": "#C33136",
+  "Danger-5": "#B83E40",
+  "Danger-6": "#DC4446",
+  "Danger-7": "#E36461",
+  "Danger-8": "#F7ADA6",
+  "Danger-9": "#FBCDC7",
+  "Success-1": "#20392E",
+  "Success-2": "#1D4534",
+  "Success-10": "#EBFFF3",
+  "Success-3": "#17583C",
+  "Success-4": "#11915E",
+  "Success-5": "#088A51",
+  "Success-6": "#00A35C",
+  "Success-7": "#21B570",
+  "Success-8": "#7BDCA9",
+  "Success-9": "#B0EECB",
+  "Warning-1": "#433128",
+  "Warning-10": "#FFF5E8",
+  "Warning-2": "#573929",
+  "Warning-3": "#74442B",
+  "Warning-4": "#CB5C16",
+  "Warning-5": "#C16330",
+  "Warning-6": "#E87233",
+  "Warning-7": "#ED8F55",
+  "Warning-8": "#FBC58A",
+  "Warning-9": "#FDDFB9",
+  "Shadow-2": "0px 4px 10px 0px rgba(2, 11, 24, 0.10)",
+  "Shadow-3": "0px 8px 20px 0px rgba(2, 11, 24, 0.10)",
+  "Shadow-4": "0px -2px 10px 0px rgba(2, 11, 24, 0.08)",
+  buttonSuccessDisabledFontColor: "var(--soui-neutral-text-2)",
+  buttonDangerDisabledFontColor: "var(--soui-neutral-text-2)",
+  buttonSecondaryActiveBackgroundColor: "var(--soui-neutral-fill-4)",
+  buttonSecondaryActiveBorderColor: "var(--soui-neutral-fill-4)",
+  popoverBackgroundColor: "var(--soui-neutral-fill-2)",
+  popoverSuccessBackgroundColor: "var(--soui-success-1)",
+  popoverInfoBackgroundColor: "var(--soui-brand-1)",
+  tableTbodyHoverBackgroundColor: "var(--soui-neutral-fill-3)",
+  cardBackgroundColor: "var(--soui-neutral-fill-1)",
+  cascaderOptionBackgroundColor: "var(--soui-neutral-fill-2)",
+  tooltipBackgroundColor: "var(--soui-success-5)",
+  tooltipLightColor: "var(--soui-neutral-fill-2)",
+  tooltipLightBackgroundColor: "var(--soui-neutral-fill-10)",
+  tooltipPrimaryBackgroundColor: "var(--soui-brand-1)",
+  tooltipSuccessColor: "var(--soui-success-6)",
+  treeLineBackgroundColor: "var(--soui-neutral-border-2)",
+  treeContentActiveBackgroundColor: "var(--soui-brand-1)",
+  datePickerCellHoverBackgroundColor: "var(--soui-neutral-fill-3)",
+  tagInfoBackgroundColor: "var(--soui-brand-1)",
+  alertInfoBackgroundColor: "var(--soui-brand-1)",
+  messageBackgroundColor: "var(--soui-neutral-fill-2)",
+  progressCircleInfoFontColor: "var(--soui-neutral-text-5)",
+  dropdownListBackgroundColor: "var(--soui-neutral-fill-2)",
+  menuItemActiveBackgroundColor: "var(--soui-brand-1)",
+  dividerFontColor: "var(--soui-neutral-text-2)",
+  cascaderPanelBackgroundColor: "var(--soui-neutral-fill-2)",
+  cascaderOptionDisabledBackgroundColor: "var(--soui-neutral-fill-2)",
+  cascaderOptionHoverBackgroundColor: "var(--soui-neutral-fill-3)",
+  datePickerPanelBackgroundColor: "var(--soui-neutral-fill-2)",
+  dropdownOptionHoverBackgroundColor: "var(--soui-neutral-fill-3)",
+  treeSelectPanelBackgroundColor: "var(--soui-neutral-fill-2)",
+  treeSelectContentHoverBackgroundColor: "var(--soui-neutral-fill-3)",
+  modalPanelBackground: "var(--soui-neutral-fill-2)",
+  dropdownOptionDisabledBackgroundColor: "var(--soui-neutral-fill-2)",
+  messageBorderColor: "var(--soui-transparent)",
+  modalPanelBorder: "var(--soui-transparent)",
+  popoverBorderColor: "var(--soui-transparent)",
+  dropdownOptionBackgroundColor: "var(--soui-neutral-fill-2)",
+  selectPanelBackgroundColor: "var(--soui-neutral-fill-2)",
+  selectOptionBackgroundColor: "var(--soui-neutral-fill-2)",
+  selectOptionHoverBackgroundColor: "var(--soui-neutral-fill-3)",
+  selectOptionDisabledBackgroundColor: "var(--soui-neutral-fill-2)",
+  switchDisabledCircleFill: "var(--soui-neutral-text-2)",
+  switchCheckedCircleFill: "var(--soui-neutral-text-1)",
+  switchCheckedDisabledCircleFill: "var(--soui-neutral-text-2)",
+  switchCheckedDisabledFontColor: "var(--soui-neutral-text-2)",
+  "Neutral-mask-2": "#FFFFFF66",
+  descriptionsLabelColor: "var(--soui-neutral-text-3)",
+  menuDarkItemBackgroundColor: "var(--soui-neutral-fill-1)",
+  menuDarkItemHoverBackgroundColor: "var(--soui-neutral-fill-2)",
+  menuDarkItemActiveBackgroundColor: "var(--soui-brand-4)",
+  menuDarkItemDisabledBackgroundColor: "var(--soui-neutral-fill-1)",
+  rateFrontBackgroundColor: "var(--soui-functional-le-6)",
+  "Neutral-fill-9": "#E4E4E4",
+  "Neutral-fill-10": "#FFFFFF",
+  "Neutral-fill-6": "#A4A4A4",
+  "Neutral-fill-8": "#CCCCCC",
+  "Mask-fill-1": "#00000080",
+  "Neutral-fill-11": "#2A2A2A",
+  alertInfoBorderColor: "var(--soui-brand-2)",
+  listStripedBackgroundColor: "var(--soui-neutral-fill-11)",
+  menuItemActiveFontColor: "var(--soui-brand-6)",
+  tabsFillCheckedBackgroundColor: "var(--soui-neutral-fill-3)",
+  "Neutral-fill-5": "#757575",
+  buttonPrimaryOutlineDisabledFontColor: "var(--soui-brand-3)",
+  buttonPrimaryOutlineDisabledBorderColor: "var(--soui-brand-3)",
+  buttonWarningOutlineDisabledFontColor: "var(--soui-warning-3)",
+  buttonSecondaryOutlineDisabledBorderColor: "var(--soui-neutral-border-2)",
+  cascaderOptionActiveBackgroundColor: "var(--soui-brand-2)",
+  tagInfoFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagSuccessFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagWarningFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagDangerFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tooltipWarningColor: "var(--soui-warning-6)",
+  tooltipDangerColor: "var(--soui-danger-6)",
+  "Neutral-text-1": "#FFFFFFE6",
+  checkboxIconDisabledBackgroundColor: "var(--soui-neutral-fill-3)",
+  checkboxIconBackgroundColor: "var(--soui-transparent)",
+  checkboxIconDisabledBorderColor: "var(--soui-neutral-border-2)",
+  radioIconBackgroundColor: "var(--soui-transparent)",
+  radioIconDisabledBackgroundColor: "var(--soui-neutral-fill-3)",
+  radioIconDisabledColor: "var(--soui-neutral-border-2)",
+  datePickerTimeItemActiveBackgroundColor: "var(--soui-brand-2)",
+  selectOptionActiveBackgroundColor: "var(--soui-brand-2)",
+  dropdownOptionSelectBackgroundColor: "var(--soui-brand-2)",
+  treeSelectContentActiveBackgroundColor: "var(--soui-brand-2)",
+  treeSelectContentDisabledHoverBackgroundColor: "var(--soui-neutral-fill-3)",
+  sliderValueHoverBackgroundColor: "var(--soui-warning-6)",
+  checkboxIconCheckedColor: "var(--soui-neutral-text-1)",
+  checkboxIconCheckedDisabledColor: "var(--soui-neutral-text-2)",
+  switchDisabledCircleCheckedFill: "var(--soui-neutral-text-2)",
+  tagTangerineFontColor: "var(--soui-functional-t-6)",
+  tagTangerineBackgroundColor: "var(--soui-functional-t-1)",
+  tagTangerineBorderColor: "var(--soui-functional-t-1)",
+  tagTangerineOutlineFontColor: "var(--soui-functional-t-6)",
+  tagTangerineOutlineBorderColor: "var(--soui-functional-t-3)",
+  tagTangerineFillBackgroundColor: "var(--soui-functional-t-6)",
+  tagTangerineFillBorderColor: "var(--soui-functional-t-6)",
+  tagPurpleFontColor: "var(--soui-functional-p-6)",
+  tagPurpleBackgroundColor: "var(--soui-functional-p-1)",
+  tagPurpleBorderColor: "var(--soui-functional-p-1)",
+  tagPurpleOutlineFontColor: "var(--soui-functional-p-6)",
+  tagPurpleOutlineBorderColor: "var(--soui-functional-p-3)",
+  tagPurpleFillBackgroundColor: "var(--soui-functional-p-6)",
+  tagPurpleFillBorderColor: "var(--soui-functional-p-6)",
+  tagMagentaFontColor: "var(--soui-functional-ma-6)",
+  tagMagentaBackgroundColor: "var(--soui-functional-ma-1)",
+  tagMagentaBorderColor: "var(--soui-functional-ma-1)",
+  tagMagentaOutlineFontColor: "var(--soui-functional-ma-6)",
+  tagMagentaOutlineBorderColor: "var(--soui-functional-ma-3)",
+  tagMagentaFillBackgroundColor: "var(--soui-functional-ma-6)",
+  tagMagentaFillBorderColor: "var(--soui-functional-ma-6)",
+  tagBrownFontColor: "var(--soui-functional-br-6)",
+  tagBrownBackgroundColor: "var(--soui-functional-br-1)",
+  tagBrownBorderColor: "var(--soui-functional-br-1)",
+  tagBrownOutlineFontColor: "var(--soui-functional-br-6)",
+  tagBrownOutlineBorderColor: "var(--soui-functional-br-3)",
+  tagBrownFillBackgroundColor: "var(--soui-functional-br-6)",
+  tagBrownFillBorderColor: "var(--soui-functional-br-6)",
+  tagIndigoFontColor: "var(--soui-functional-in-6)",
+  tagIndigoBackgroundColor: "var(--soui-functional-in-1)",
+  tagIndigoBorderColor: "var(--soui-functional-in-1)",
+  tagIndigoOutlineFontColor: "var(--soui-functional-in-6)",
+  tagIndigoOutlineBorderColor: "var(--soui-functional-in-3)",
+  tagIndigoFillBackgroundColor: "var(--soui-functional-in-6)",
+  tagIndigoFillBorderColor: "var(--soui-functional-in-6)",
+  tagCyanFontColor: "var(--soui-functional-cy-6)",
+  tagCyanBackgroundColor: "var(--soui-functional-cy-1)",
+  tagCyanBorderColor: "var(--soui-functional-cy-1)",
+  tagCyanOutlineFontColor: "var(--soui-functional-cy-6)",
+  tagCyanOutlineBorderColor: "var(--soui-functional-cy-3)",
+  tagCyanFillBackgroundColor: "var(--soui-functional-cy-6)",
+  tagCyanFillBorderColor: "var(--soui-functional-cy-6)",
+  tagNeonFontColor: "var(--soui-functional-ne-6)",
+  tagNeonBackgroundColor: "var(--soui-functional-ne-1)",
+  tagNeonBorderColor: "var(--soui-functional-ne-1)",
+  tagNeonOutlineFontColor: "var(--soui-functional-ne-6)",
+  tagNeonOutlineBorderColor: "var(--soui-functional-ne-3)",
+  tagNeonFillBackgroundColor: "var(--soui-functional-ne-6)",
+  tagNeonFillBorderColor: "var(--soui-functional-ne-6)",
+  tagLemonFontColor: "var(--soui-functional-le-6)",
+  tagLemonBackgroundColor: "var(--soui-functional-le-1)",
+  tagLemonBorderColor: "var(--soui-functional-le-1)",
+  tagLemonOutlineFontColor: "var(--soui-functional-le-6)",
+  tagLemonOutlineBorderColor: "var(--soui-functional-le-3)",
+  tagLemonFillBackgroundColor: "var(--soui-functional-le-6)",
+  tagLemonFillBorderColor: "var(--soui-functional-le-6)",
+  tagOrangeFontColor: "var(--soui-functional-or-6)",
+  tagOrangeBackgroundColor: "var(--soui-functional-or-1)",
+  tagOrangeBorderColor: "var(--soui-functional-or-1)",
+  tagOrangeOutlineFontColor: "var(--soui-functional-or-6)",
+  tagOrangeOutlineBorderColor: "var(--soui-functional-or-3)",
+  tagOrangeFillBackgroundColor: "var(--soui-functional-or-6)",
+  tagOrangeFillBorderColor: "var(--soui-functional-or-6)",
+  tagTangerineDisabledFontColor: "var(--soui-functional-t-3)",
+  tagTangerineDisabledBackgroundColor: "var(--soui-functional-t-1)",
+  tagTangerineDisabledBorderColor: "var(--soui-functional-t-1)",
+  tagTangerineOutlineDisabledFontColor: "var(--soui-functional-t-3)",
+  tagTangerineOutlineDisabledBorderColor: "var(--soui-functional-t-2)",
+  tagTangerineFillDisabledBackgroundColor: "var(--soui-functional-t-3)",
+  tagTangerineFillDisabledBorderColor: "var(--soui-functional-t-3)",
+  tagPurpleDisabledFontColor: "var(--soui-functional-p-4)",
+  tagPurpleDisabledBackgroundColor: "var(--soui-functional-p-1)",
+  tagPurpleDisabledBorderColor: "var(--soui-functional-p-1)",
+  tagPurpleOutlineDisabledFontColor: "var(--soui-functional-p-3)",
+  tagPurpleOutlineDisabledBorderColor: "var(--soui-functional-p-2)",
+  tagPurpleFillDisabledBackgroundColor: "var(--soui-functional-p-3)",
+  tagPurpleFillDisabledBorderColor: "var(--soui-functional-p-3)",
+  tagBrownDisabledFontColor: "var(--soui-functional-br-3)",
+  tagBrownDisabledBackgroundColor: "var(--soui-functional-br-1)",
+  tagBrownDisabledBorderColor: "var(--soui-functional-br-1)",
+  tagBrownOutlineDisabledFontColor: "var(--soui-functional-br-3)",
+  tagBrownOutlineDisabledBorderColor: "var(--soui-functional-br-2)",
+  tagBrownFillDisabledBackgroundColor: "var(--soui-functional-br-3)",
+  tagBrownFillDisabledBorderColor: "var(--soui-functional-br-3)",
+  tagMagentaDisabledFontColor: "var(--soui-functional-ma-3)",
+  tagMagentaDisabledBackgroundColor: "var(--soui-functional-ma-1)",
+  tagMagentaDisabledBorderColor: "var(--soui-functional-ma-1)",
+  tagMagentaOutlineDisabledFontColor: "var(--soui-functional-ma-3)",
+  tagMagentaOutlineDisabledBorderColor: "var(--soui-functional-ma-2)",
+  tagMagentaFillDisabledBackgroundColor: "var(--soui-functional-ma-3)",
+  tagMagentaFillDisabledBorderColor: "var(--soui-functional-ma-3)",
+  tagIndigoDisabledFontColor: "var(--soui-functional-in-3)",
+  tagIndigoDisabledBackgroundColor: "var(--soui-functional-in-1)",
+  tagIndigoDisabledBorderColor: "var(--soui-functional-in-1)",
+  tagIndigoOutlineDisabledFontColor: "var(--soui-functional-in-3)",
+  tagIndigoOutlineDisabledBorderColor: "var(--soui-functional-in-2)",
+  tagIndigoFillDisabledBackgroundColor: "var(--soui-functional-in-3)",
+  tagIndigoFillDisabledBorderColor: "var(--soui-functional-in-3)",
+  tagCyanDisabledFontColor: "var(--soui-functional-cy-3)",
+  tagCyanDisabledBackgroundColor: "var(--soui-functional-cy-1)",
+  tagCyanDisabledBorderColor: "var(--soui-functional-cy-1)",
+  tagCyanOutlineDisabledFontColor: "var(--soui-functional-cy-3)",
+  tagCyanOutlineDisabledBorderColor: "var(--soui-functional-cy-2)",
+  tagCyanFillDisabledBackgroundColor: "var(--soui-functional-cy-3)",
+  tagCyanFillDisabledBorderColor: "var(--soui-functional-cy-3)",
+  tagNeonDisabledFontColor: "var(--soui-functional-ne-3)",
+  tagNeonDisabledBackgroundColor: "var(--soui-functional-ne-1)",
+  tagNeonDisabledBorderColor: "var(--soui-functional-ne-1)",
+  tagNeonOutlineDisabledFontColor: "var(--soui-functional-ne-3)",
+  tagNeonOutlineDisabledBorderColor: "var(--soui-functional-ne-2)",
+  tagNeonFillDisabledBackgroundColor: "var(--soui-functional-ne-3)",
+  tagNeonFillDisabledBorderColor: "var(--soui-functional-ne-3)",
+  tagLemonDisabledFontColor: "var(--soui-functional-le-3)",
+  tagLemonDisabledBackgroundColor: "var(--soui-functional-le-1)",
+  tagLemonDisabledBorderColor: "var(--soui-functional-le-1)",
+  tagLemonOutlineDisabledFontColor: "var(--soui-functional-le-3)",
+  tagLemonOutlineDisabledBorderColor: "var(--soui-functional-le-2)",
+  tagLemonFillDisabledBackgroundColor: "var(--soui-functional-le-3)",
+  tagLemonFillDisabledBorderColor: "var(--soui-functional-le-3)",
+  tagOrangeDisabledFontColor: "var(--soui-functional-or-3)",
+  tagOrangeDisabledBackgroundColor: "var(--soui-functional-or-1)",
+  tagOrangeDisabledBorderColor: "var(--soui-functional-or-1)",
+  tagOrangeOutlineDisabledFontColor: "var(--soui-functional-or-3)",
+  tagOrangeOutlineDisabledBorderColor: "var(--soui-functional-or-2)",
+  tagOrangeFillDisabledBackgroundColor: "var(--soui-functional-or-3)",
+  tagOrangeFillDisabledBorderColor: "var(--soui-functional-or-3)",
+  tagMagentaFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagBrownFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagPurpleFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagIndigoFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagCyanFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagNeonFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagLemonFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagOrangeFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagTangerineFillDisabledFontColor: "var(--soui-neutral-text-2)",
+  tagInfoOutlineBorderColor: "var(--soui-brand-3)",
+  tagSuccessOutlineBorderColor: "var(--soui-success-3)",
+  tagWarningOutlineBorderColor: "var(--soui-warning-3)",
+  tagDangerOutlineBorderColor: "var(--soui-danger-3)",
+  tagInfoOutlineDisabledBorderColor: "var(--soui-brand-2)",
+  tagSuccessOutlineDisabledBorderColor: "var(--soui-success-2)",
+  tagWarningOutlineDisabledBorderColor: "var(--soui-warning-2)",
+  tagDangerOutlineDisabledBorderColor: "var(--soui-danger-2)",
+  treeSelectContentDisabledBackgroundColor: "var(--soui-neutral-fill-2)",
+};

package/color/default.ts

@@ -0,0 +1,309 @@
+export default {
+  "Brand-1": "#E9F5FE",
+  "Brand-2": "#BDE2FF",
+  "Brand-10": "#001D61",
+  "Brand-3": "#94CDFF",
+  "Brand-4": "#6BB5FF",
+  "Brand-5": "#429AFF",
+  "Brand-6": "#197AFA",
+  "Brand-7": "#0B5BD4",
+  "Brand-8": "#0040AD",
+  "Brand-9": "#002D87",
+  "Cyan-1": "#E3FEFA",
+  "Cyan-10": "#051F24",
+  "Cyan-2": "#ADF2E9",
+  "Cyan-3": "#7DE3D9",
+  "Cyan-4": "#54D4CC",
+  "Cyan-5": "#34C6C1",
+  "Cyan-6": "#1DB8B9",
+  "Cyan-7": "#158B90",
+  "Cyan-8": "#0D6169",
+  "Cyan-9": "#093D45",
+  "Danger-1": "#FCE6E6",
+  "Danger-10": "#4D000A",
+  "Danger-2": "#F7C1C0",
+  "Danger-3": "#F29896",
+  "Danger-4": "#F38981",
+  "Danger-5": "#EF6661",
+  "Danger-6": "#EB4242",
+  "Danger-7": "#CC2C29",
+  "Danger-8": "#9C161F",
+  "Danger-9": "#740813",
+  "Indigo-1": "#EEF2FE",
+  "Indigo-10": "#170F69",
+  "Indigo-2": "#D7DDFF",
+  "Indigo-3": "#ABB4FB",
+  "Indigo-4": "#848FF9",
+  "Indigo-5": "#6972F6",
+  "Indigo-6": "#4446F7",
+  "Indigo-7": "#3431CD",
+  "Indigo-8": "#2822A6",
+  "Indigo-9": "#1E1782",
+  "Lemon-1": "#FCFADE",
+  "Lemon-10": "#4D3000",
+  "Lemon-2": "#FFF9BF",
+  "Lemon-3": "#FFE76C",
+  "Lemon-4": "#FFE76C",
+  "Lemon-5": "#FFD943",
+  "Lemon-6": "#FFC91A",
+  "Lemon-7": "#D29F10",
+  "Lemon-8": "#A67708",
+  "Lemon-9": "#795203",
+  "Magenta-1": "#FCF1F6",
+  "Magenta-10": "#4B0C37",
+  "Magenta-2": "#F8D8E6",
+  "Magenta-3": "#F3B1D0",
+  "Magenta-4": "#EF8BBE",
+  "Magenta-5": "#E564A8",
+  "Magenta-6": "#D84293",
+  "Magenta-7": "#B4317D",
+  "Magenta-8": "#912266",
+  "Magenta-9": "#6E164E",
+  "Neon-1": "#F1FAE1",
+  "Neon-10": "#194D00",
+  "Neon-2": "#DDF2BE",
+  "Neon-3": "#C4E598",
+  "Neon-4": "#AAD974",
+  "Neon-5": "#90CC54",
+  "Neon-6": "#77BF37",
+  "Neon-7": "#5AA223",
+  "Neon-8": "#418613",
+  "Neon-9": "#2B6908",
+  "Neutral-1": "#000000",
+  "Neutral-10": "#020B18",
+  "Neutral-2": "#F4F5F8",
+  "Neutral-3": "#E8EBF0",
+  "Neutral-4": "#CCCFD7",
+  "Neutral-5": "#B3B7C1",
+  "Neutral-6": "#999DA8",
+  "Neutral-7": "#666C7C",
+  "Neutral-8": "#333E59",
+  "Neutral-9": "#141737",
+  "Orange-1": "#FFF8E6",
+  "Orange-10": "#4D2100",
+  "Orange-2": "#FFEABA",
+  "Orange-3": "#FFD98D",
+  "Orange-4": "#FFC45F",
+  "Orange-5": "#FFAD32",
+  "Orange-6": "#FF9204",
+  "Orange-7": "#D27102",
+  "Orange-8": "#A65401",
+  "Orange-9": "#793900",
+  "Brown-1": "#FAF4E3",
+  "Brown-10": "#4D2100",
+  "Brown-2": "#EBDDBC",
+  "Brown-3": "#D6C094",
+  "Brown-4": "#C2A470",
+  "Brown-5": "#AD8951",
+  "Brown-6": "#996F37",
+  "Brown-7": "#865824",
+  "Brown-8": "#734415",
+  "Brown-9": "#603109",
+  "Purple-1": "#F8EEFE",
+  "Purple-10": "#150530",
+  "Purple-2": "#EDD6FE",
+  "Purple-3": "#CFA3F3",
+  "Purple-4": "#AD72E4",
+  "Purple-5": "#8B48D5",
+  "Purple-6": "#6C23C6",
+  "Purple-7": "#4E159E",
+  "Purple-8": "#360C77",
+  "Purple-9": "#220652",
+  "Success-1": "#E4FCED",
+  "Success-2": "#ADEEC9",
+  "Success-10": "#004D36",
+  "Success-3": "#78DCA7",
+  "Success-4": "#4ACB8A",
+  "Success-5": "#22B973",
+  "Success-6": "#00A85F",
+  "Success-7": "#009157",
+  "Success-8": "#007A4D",
+  "Success-9": "#006342",
+  "Tangerine-1": "#FFF0E5",
+  "Tangerine-10": "#56130A",
+  "Tangerine-2": "#FED4B9",
+  "Tangerine-3": "#FDB58F",
+  "Tangerine-4": "#FD9568",
+  "Tangerine-5": "#FD7445",
+  "Tangerine-6": "#F75229",
+  "Tangerine-7": "#CD3A1D",
+  "Tangerine-8": "#A22614",
+  "Tangerine-9": "#7B1B0E",
+  "Warning-1": "#FFF3E2",
+  "Warning-10": "#4D1600",
+  "Warning-2": "#FDDFBA",
+  "Warning-3": "#FBC68D",
+  "Warning-4": "#FDBB66",
+  "Warning-5": "#F78C35",
+  "Warning-6": "#F56C0A",
+  "Warning-7": "#CB5206",
+  "Warning-8": "#A13A03",
+  "Warning-9": "#772601",
+  "Neutral-text-5": "#141737",
+  "Neutral-text-4": "#666C7C",
+  "Neutral-text-3": "#999DA8",
+  "Neutral-text-2": "#B3B7C1",
+  "Neutral-text-1": "#FFFFFF",
+  "Neutral-border-2": "#CCCFD7",
+  "Neutral-border-1": "#E8EBF0",
+  "Neutral-fill-7": "#666C7C",
+  "Neutral-fill-5": "#B3B7C1",
+  "Neutral-fill-9": "#141737",
+  "Neutral-fill-10": "#020B18",
+  "Neutral-fill-6": "#999DA8",
+  "Neutral-fill-8": "#333E59",
+  "Neutral-fill-4": "#CCCFD7",
+  "Neutral-fill-3": "#E8EBF0",
+  "Neutral-fill-2": "#F4F5F8",
+  "Neutral-fill-1": "#FFFFFF",
+  "Padding-1": "1px",
+  "Padding-2": "2px",
+  "Padding-3": "3px",
+  "Padding-4": "4px",
+  "Padding-5": "5px",
+  "Padding-6": "6px",
+  "Padding-7": "7px",
+  "Padding-8": "8px",
+  "Padding-9": "9px",
+  "Padding-10": "10px",
+  "Padding-11": "11px",
+  "Padding-12": "12px",
+  "Padding-13": "13px",
+  "Padding-14": "14px",
+  "Padding-15": "15px",
+  "Padding-16": "16px",
+  "Padding-17": "17px",
+  "Padding-18": "18px",
+  "Padding-19": "19px",
+  "Padding-20": "20px",
+  "Padding-21": "21px",
+  "Padding-22": "22px",
+  "Padding-23": "23px",
+  "Padding-24": "24px",
+  "Margin-4": "4px",
+  "Margin-8": "8px",
+  "Margin-12": "12px",
+  "Margin-16": "16px",
+  "Margin-24": "24px",
+  "Margin-32": "32px",
+  "Radius-0": "0px",
+  "Radius-2": "2px",
+  "Radius-3": "3px",
+  "Radius-4": "4px",
+  "Radius-8": "8px",
+  "Radius-12": "12px",
+  "Radius-1000": "1000px",
+  "Shadow-1": "0px 2px 5px rgba(2, 11, 24, 0.1)",
+  "Shadow-2": "0px 4px 10px rgba(2, 11, 24, 0.1)",
+  "Shadow-3": "0px 8px 20px rgba(2, 11, 24, 0.1)",
+  "Shadow-4": "0 -2px 10px rgba(102,108,124,0.08)",
+  "Shadow-5": "0 2px 10px rgba(102,108,124,0.08)",
+  "Line-height-dynamic": "calc( 1em + 8px )",
+  "Line-height-dynamic-min": "calc( max(1em, 14px) + 8px )",
+  Transparent: "transparent",
+  "Mask-fill-1": "rgba(2, 11, 24, 0.3)",
+  Size: "2",
+  "Radius-rect": "0px",
+  "Radius-lesser": "2px",
+  "Radius-small": "3px",
+  "Radius-default": "4px",
+  "Radius-large": "8px",
+  "Radius-full": "1000px",
+  "Radius-circle": "50%",
+  "Border-0": "0px",
+  "Border-1": "1px",
+  "Border-2": "2px",
+  "Border-3": "3px",
+  "Weight-light": "300",
+  "Weight-regular": "400",
+  "Weight-medium": "500",
+  "Weight-Semibold": "600",
+  "Weight-Bold": "700",
+  "Font-12": "12px",
+  "Font-14": "14px",
+  "Font-16": "16px",
+  "Font-18": "18px",
+  "Font-20": "20px",
+  "Font-24": "24px",
+  "Font-28": "28px",
+  "Font-32": "32px",
+  "Font-36": "36px",
+  "Font-48": "48px",
+  "Spacing-0": "0px",
+  "Spacing-1": "1px",
+  "Spacing-2": "2px",
+  "Spacing-3": "3px",
+  "Spacing-4": "4px",
+  "Spacing-5": "5px",
+  "Spacing-6": "6px",
+  "Spacing-7": "7px",
+  "Spacing-8": "8px",
+  "Spacing-9": "9px",
+  "Spacing-10": "10px",
+  "Spacing-11": "11px",
+  "Spacing-12": "12px",
+  "Spacing-13": "13px",
+  "Spacing-14": "14px",
+  "Spacing-15": "15px",
+  "Spacing-16": "16px",
+  "Spacing-17": "17px",
+  "Spacing-18": "18px",
+  "Spacing-19": "19px",
+  "Spacing-20": "20px",
+  "Spacing-21": "21px",
+  "Spacing-22": "22px",
+  "Spacing-23": "23px",
+  "Spacing-24": "24px",
+  "Spacing-25": "25px",
+  "Spacing-26": "26px",
+  "Spacing-27": "27px",
+  "Spacing-28": "28px",
+  "Spacing-29": "29px",
+  "Spacing-30": "30px",
+  "Spacing-31": "31px",
+  "Spacing-32": "32px",
+  "Spacing-33": "33px",
+  "Spacing-34": "34px",
+  "Spacing-35": "35px",
+  "Spacing-36": "36px",
+  "Spacing-37": "37px",
+  "Spacing-38": "38px",
+  "Spacing-39": "39px",
+  "Spacing-40": "40px",
+  "Spacing-41": "41px",
+  "Spacing-42": "42px",
+  "Spacing-43": "43px",
+  "Spacing-44": "44px",
+  "Spacing-45": "45px",
+  "Spacing-46": "46px",
+  "Spacing-47": "47px",
+  "Spacing-48": "48px",
+  "Size-1": "2px",
+  "Size-2": "4px",
+  "Size-3": "6px",
+  "Size-4": "8px",
+  "Size-5": "10px",
+  "Size-6": "12px",
+  "Size-7": "14px",
+  "Size-8": "16px",
+  "Size-9": "18px",
+  "Size-10": "20px",
+  "Size-11": "22px",
+  "Size-12": "24px",
+  "Size-13": "26px",
+  "Size-14": "28px",
+  "Size-15": "30px",
+  "Size-16": "32px",
+  "Size-17": "34px",
+  "Size-18": "36px",
+  "Size-19": "38px",
+  "Size-20": "40px",
+  "Size-21": "42px",
+  "Size-22": "44px",
+  "Size-23": "46px",
+  "Size-24": "48px",
+  "Size-25": "50px",
+  "Size-26": "52px",
+  "Size-27": "54px",
+  "Size-28": "56px",
+};

package/color/green.ts

@@ -0,0 +1,12 @@
+export default {
+  "Brand-1": "#e8fff4",
+  "Brand-2": "#BCF5DA",
+  "Brand-3": "#93EBC5",
+  "Brand-4": "#6DE0B2",
+  "Brand-5": "#49D6A3",
+  "Brand-6": "#29CC97",
+  "Brand-7": "#1AAC80",
+  "Brand-8": "#0E8C6B",
+  "Brand-9": "#056C54",
+  "Brand-10": "#004D3D",
+};

package/color/index.ts

@@ -0,0 +1,41 @@
+import dark from "./dark";
+import light from "./default";
+import blue from "./blue";
+import red from "./red";
+import pink from "./pink";
+import green from "./green";
+import orange from "./orange";
+import purple from "./purple";
+
+export const themeColors =  {
+  green,
+  orange,
+  purple,
+  blue,
+  red,
+  pink,
+  dark,
+  light
+};
+
+export default (
+  theme: "dark" | "light",
+  color: "red" | "pink" | "blue" | "green" | "orange" | "purple" = "blue"
+) => {
+  console.log(theme, color);
+  const themeColor = themeColors[color];
+  (window as any).Shineout?.setToken?.({
+    selector: "html",
+    token: {
+      ...(theme === "dark" ? dark : light),
+      ...themeColor,
+      "Brand-1":
+        theme === "dark" ? themeColor["Brand-1"] + "00" : themeColor["Brand-1"],
+    },
+  });
+  if (theme === "dark") {
+    document.documentElement.style.setProperty("color-scheme", "dark");
+  } else {
+    document.documentElement.style.removeProperty("color-scheme");
+  }
+};

package/color/orange.ts

@@ -0,0 +1,12 @@
+export default {
+  "Brand-1": "#fff0e5",
+  "Brand-2": "#FED4B9",
+  "Brand-3": "#FDB58F",
+  "Brand-4": "#FD9568",
+  "Brand-5": "#FD7445",
+  "Brand-6": "#F75229",
+  "Brand-7": "#CD3A1D",
+  "Brand-8": "#A22614",
+  "Brand-9": "#7B1B0E",
+  "Brand-10": "#56130A",
+};

package/color/pink.ts

@@ -0,0 +1,12 @@
+export default {
+  "Brand-1": "#FCF1F6",
+  "Brand-10": "#4B0C37",
+  "Brand-2": "#F8D8E6",
+  "Brand-3": "#F3B1D0",
+  "Brand-4": "#EF8BBE",
+  "Brand-5": "#E564A8",
+  "Brand-6": "#D84293",
+  "Brand-7": "#B4317D",
+  "Brand-8": "#912266",
+  "Brand-9": "#6E164E",
+};

package/color/purple.ts

@@ -0,0 +1,12 @@
+export default {
+  "Brand-1": "#ece8ff",
+  "Brand-2": "#D1CAF7",
+  "Brand-3": "#B6AEEE",
+  "Brand-4": "#9B94E6",
+  "Brand-5": "#807BDD",
+  "Brand-6": "#6463D5",
+  "Brand-7": "#3E40B3",
+  "Brand-8": "#222791",
+  "Brand-9": "#0D156F",
+  "Brand-10": "#00094D",
+};

package/color/red.ts

@@ -0,0 +1,12 @@
+export default {
+  "Brand-1": "#FBEBEB",
+  "Brand-2": "#F4C9BF",
+  "Brand-10": "#4D0006",
+  "Brand-3": "#E8A599",
+  "Brand-4": "#DD8175",
+  "Brand-5": "#D15F55",
+  "Brand-6": "#C63F37",
+  "Brand-7": "#A82523",
+  "Brand-8": "#891315",
+  "Brand-9": "#6B070C",
+};

package/drop-down.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { ref, onMounted, onUnmounted } from "vue";
+
+// --- 1. 定义配置项接口 ---
+export interface DropdownItem {
+  id?: string | number;
+  label?: string; // 显示的文字
+  color?: string; // 【核心】自定义颜色 (如 '#ff4d4f', 'blue', 'rgb(0,0,0)')
+  disabled?: boolean; // 是否禁用
+  divider?: boolean; // 是否是分割线
+  onClick?: () => void; // 点击回调
+}
+
+// --- 2. Props 定义 ---
+const props = withDefaults(
+  defineProps<{
+    options: DropdownItem[]; // 配置数组
+    width?: string; // 下拉框宽度
+    trigger?: "click" | "hover";
+  }>(),
+  {
+    options: () => [],
+    width: "180px",
+    trigger: "click",
+  }
+);
+
+// --- 3. 状态管理 ---
+const visible = ref(false);
+const containerRef = ref<HTMLElement | null>(null);
+
+// 切换显示
+const toggle = () => {
+  if (props.trigger === "hover") return;
+  visible.value = !visible.value;
+};
+
+// Hover 逻辑
+const handleMouseEnter = () => {
+  if (props.trigger === "hover") visible.value = true;
+};
+const handleMouseLeave = () => {
+  if (props.trigger === "hover") visible.value = false;
+};
+
+// --- 4. 点击菜单项逻辑 ---
+const handleItemClick = (item: DropdownItem) => {
+  if (item.disabled || item.divider) return;
+
+  // 关闭菜单
+  visible.value = false;
+
+  // 执行回调
+  if (typeof item.onClick === "function") {
+    item.onClick();
+  }
+};
+
+// 点击外部关闭
+const handleClickOutside = (event: MouseEvent) => {
+  if (
+    containerRef.value &&
+    !containerRef.value.contains(event.target as Node)
+  ) {
+    visible.value = false;
+  }
+};
+
+onMounted(() => document.addEventListener("click", handleClickOutside));
+onUnmounted(() => document.removeEventListener("click", handleClickOutside));
+</script>
+
+<template>
+  <div
+    class="dropdown-container"
+    ref="containerRef"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <!-- 触发器 (Slot) -->
+    <div class="trigger-wrapper" @click.stop="toggle">
+      <slot name="trigger">
+        <button class="default-btn">菜单 ▾</button>
+      </slot>
+    </div>
+
+    <!-- 下拉菜单 -->
+    <transition name="scale-fade">
+      <div v-if="visible" class="dropdown-menu" :style="{ width: width }">
+        <ul class="menu-list">
+          <li
+            class="menu-item"
+            @click.stop="handleItemClick(item)"
+            v-for="item in options"
+            :key="item.label"
+          >
+            <!-- 核心：动态绑定颜色 -->
+            <span class="item-label">
+              {{ item.label }}
+            </span>
+            <span
+              v-if="item.color"
+              :style="{ background: item.color }"
+              class="item-color"
+            />
+          </li>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.dropdown-container {
+  position: relative;
+  display: inline-block;
+}
+
+.trigger-wrapper {
+  cursor: pointer;
+  display: flex;
+}
+
+/* 下拉框主体 */
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 8px); /* 距离触发器下方 8px */
+  right: -20px;
+  /* 如果需要居右对齐，把 left:0 改为 right:0 */
+  background-color: var(--soui-neutral-fill-2);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--soui-neutral-border-1);
+  padding: 6px 0;
+  z-index: 2000;
+  overflow: hidden;
+}
+
+.menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* 菜单项样式 */
+.menu-item {
+  padding: 4px 16px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background-color 0.2s;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  user-select: none;
+}
+
+.menu-item:hover {
+  background-color: var(--soui-neutral-fill-3); /* 浅灰色 hover 背景 */
+}
+
+/* Label 样式 */
+.item-label {
+  color: var(--vp-custom-block-info-text);
+  font-weight: 500;
+  flex: 1;
+}
+
+.item-color {
+  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+}
+
+/* 默认按钮样式 */
+.default-btn {
+  padding: 8px 16px;
+  border: 1px solid #dcdfe6;
+  background: white;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #606266;
+}
+
+/* 动画效果 */
+.scale-fade-enter-active,
+.scale-fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.scale-fade-enter-from,
+.scale-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px) scaleY(0.95);
+}
+</style>

package/index.ts

@@ -2,7 +2,7 @@
 import DefaultTheme from "vitepress/theme";
 import Layout from "./layout.vue";
 import Demo from "./demo.vue";
-import "./custom.css";
+import "./theme.css";
 
 export default {
   extends: DefaultTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yl_lowcode/docs-theme",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "共享 VitePress 文档主题（React Demo 支持）",
   "type": "module",
   "main": "index.ts",
@@ -8,14 +8,6 @@
     ".": "./index.ts",
     "./plugins/shiki-raw": "./plugins/shiki-raw.js"
   },
-  "files": [
-    "index.ts",
-    "layout.vue",
-    "demo.vue",
-    "playground.vue",
-    "plugins",
-    "styles"
-  ],
   "dependencies": {
     "sucrase": "3.35.1",
     "@yl_lowcode/editor": "0.0.1"

package/publish.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+# 发布包
+# 用法: ./publish.sh [patch|minor|major]
+# npm config set //registry.npmjs.org/:_authToken=新的TOKEN值
+
+set -e
+
+VERSION_TYPE=${1:-patch}
+DIR=$(cd "$(dirname "$0")" && pwd)
+
+cd "$DIR"
+
+echo ">>> 升版本 ($VERSION_TYPE)"
+npm version "$VERSION_TYPE" --no-git-tag-version
+
+echo ">>> 发布"
+pnpm publish --no-git-checks --access public --ignore-scripts
+
+echo ">>> 完成！"

package/theme.css

@@ -0,0 +1,192 @@
+.dark .shiki span {
+  color: var(--shiki-dark, inherit);
+  font-size: 13px;
+}
+
+html:not(.dark) .shiki span {
+  color: var(--shiki-light, inherit);
+  font-size: 13px;
+}
+
+.vp-doc .language-tsx {
+  margin: 0 !important;
+  border-radius: 0 !important;
+}
+
+.vp-doc .shiki-themes {
+  padding: 10px 0 !important;
+}
+
+.vp-doc img {
+  margin: 0 !important;
+}
+
+.vp-doc {
+  color: var(--vp-c-text-1);
+}
+
+/* demo 代码展示区：复用 VitePress 代码块，隐藏多余 UI */
+.aui-demo-code .language-tsx {
+  margin: 0;
+}
+
+.aui-demo-code .copy,
+.aui-demo-code .lang {
+  display: none !important;
+}
+
+.aui-demo-code pre.shiki {
+  margin: 0;
+  padding: 20px 24px;
+  font-size: 13px;
+  line-height: 1.7;
+  border-radius: 0;
+}
+
+/** 自定义样式 */
+h3 {
+  margin-bottom: 16px !important;
+}
+
+table {
+  display: table !important;
+  margin: 0 !important;
+}
+
+a {
+  text-decoration: none !important;
+}
+
+.vp-doc li+li {
+  margin-top: 0 !important;
+}
+
+.vp-doc th,
+.vp-doc td {
+  border: none;
+}
+
+.vp-doc ul,
+.vp-doc ol {
+  padding-left: 0 !important;
+  margin: 0 !important;
+}
+
+.vp-doc blockquote {
+  border-left: 2px solid var(--primary-color);
+  padding-left: 10px;
+  color: var(--vp-c-text-1) !important;
+}
+
+#api+table {
+  width: 100%;
+}
+
+blockquote+table {
+  width: 100%;
+}
+
+p.text {
+  margin-bottom: 1em;
+}
+
+h2.text {
+  margin-top: 20px;
+  margin-bottom: 0.5em;
+}
+
+.VPDoc.has-aside .content-container {
+  max-width: 940px;
+}
+
+.VPDoc .content {
+  min-width: 940px;
+  padding: 0;
+}
+
+.VPDoc .content .content-container {
+  max-width: 100% !important;
+}
+
+.VPDoc .prev-next {
+  padding-bottom: 40px !important;
+}
+
+.VPDocAside .content {
+  padding-left: 10px;
+}
+
+.VPHomeHero .text {
+  margin-top: 12px !important;
+  color: var(--vp-c-text-1);
+}
+
+#VPContent.has-sidebar {
+  padding-right: 0;
+  padding-left: 260px;
+}
+
+.VPSidebar {
+  padding-left: 60px !important;
+  width: 280px !important;
+}
+
+.VPNavBar.has-sidebar .container>.title {
+  padding-left: 60px !important;
+  width: 280px !important;
+}
+
+.VPNavBar.has-sidebar .content {
+  padding-left: 280px !important;
+}
+
+.VPNavBar.has-sidebar .divider {
+  padding-left: 300px !important;
+}
+
+.content-container {
+  margin-left: 30px !important;
+}
+
+.custom-block {
+  padding: 12px 30px !important;
+}
+
+.custom-block-title {
+  display: none;
+}
+
+.VPHomeHero .image-bg {
+  background-image: linear-gradient(-45deg, #646cffcc 50%, #ffd14785 50%);
+  filter: blur(68px);
+}
+
+.vp-doc tr:nth-child(2n) {
+  background-color: transparent;
+}
+
+.vp-doc h2 {
+  border-top: none;
+  margin: 10px;
+}
+
+h2.text {
+  margin-top: 0;
+}
+
+:root {
+  --soui-font-14: 12px;
+  --soui-tabs-tab-font-size: 12px;
+  --soui-14-regular: 12px;
+  --vp-c-brand-1: var(--soui-brand-6, #197afa);
+  --vp-c-brand-2: var(--soui-brand-6, #197afa);
+  --vp-button-brand-bg: var(--soui-brand-6, #197afa);
+}
+
+.VPNavBar.has-sidebar .content {
+  padding-right: 40px !important;
+}
+
+h2 {
+  margin-left: 0 !important;
+}