From b4ffbaed1b38ee9bf35778fc4fc98292f82a4cc4 Mon Sep 17 00:00:00 2001 From: cieloazul310 Date: Fri, 27 Oct 2023 15:22:08 +0900 Subject: [PATCH 1/5] feat(layout): change sidebar default to sticky and add `disableSidebarSticky` props --- packages/layout/src/layout.astro | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/layout/src/layout.astro b/packages/layout/src/layout.astro index 8f5e1e0..ec95134 100644 --- a/packages/layout/src/layout.astro +++ b/packages/layout/src/layout.astro @@ -72,6 +72,7 @@ export type Props = SeoProps & RecipeVariantProps & { menu?: Menu; htmlLang?: string; + disableSidebarSticky?: boolean; }; const { @@ -82,11 +83,18 @@ const { variant = "default", htmlLang = "ja", menu = defaultMenu, + disableSidebarSticky = false, siteType = "website", twitterCardType = "summary", } = Astro.props; const { sidebar, fab } = layoutStyle({ variant }); +const sidebarStickyStyle = css({ + position: "sticky", + top: "calc(token(sizes.headerHeight) + token(spacing.4))", + maxHeight: "calc(100vh - token(sizes.headerHeight))", + overflowY: "auto", +}); const contentTitle = title && title !== siteMetadata.title ? `${title} - ${siteMetadata.title}` @@ -165,7 +173,12 @@ const favicon = { -
+
Date: Fri, 27 Oct 2023 16:05:04 +0900 Subject: [PATCH 2/5] refactor: add semanticTokens for spacing as `xs`, `sm`, `md`, `lg` and `xl` --- packages/article-classes/src/index.ts | 36 +++++++++---------- packages/components/src/astro/Alert.astro | 2 +- .../components/src/astro/ArticleList.astro | 2 +- .../components/src/astro/Navigation.astro | 4 +-- packages/components/src/astro/PanelLink.astro | 4 +-- packages/components/src/patterns.ts | 1 + packages/components/src/slotRecipes.ts | 4 +-- packages/layout/src/drawer.astro | 4 +-- packages/layout/src/footer.astro | 4 +-- packages/layout/src/layout.astro | 4 +-- packages/layout/src/menu.astro | 4 +-- packages/preset-base/src/semanticTokens.ts | 7 ++++ 12 files changed, 42 insertions(+), 34 deletions(-) diff --git a/packages/article-classes/src/index.ts b/packages/article-classes/src/index.ts index 6827e27..b5b1b37 100644 --- a/packages/article-classes/src/index.ts +++ b/packages/article-classes/src/index.ts @@ -15,46 +15,46 @@ export const heading1 = css({ ...common, textStyle: "headings", fontSize: ["xl", "2xl", "4xl"], - mt: 12, - mb: 6, + mt: "calc(token(spacing.md) + token(spacing.lg))", + mb: "calc(token(spacing.sm) + token(spacing.md))", }); export const heading2 = css({ ...common, textStyle: "headings", fontSize: ["xl", "2xl", "3xl"], - mt: 12, - mb: 4, + mt: "calc(token(spacing.md) + token(spacing.lg))", + mb: "md", }); export const heading3 = css({ ...common, textStyle: "headings", fontSize: ["lg", "lg", "2xl"], - mt: 12, - mb: 4, + mt: "calc(token(spacing.md) + token(spacing.lg))", + mb: "md", }); export const heading4 = css({ ...common, textStyle: "headings", fontSize: ["md", "lg", "xl"], - mt: 8, - mb: 4, + mt: "lg", + mb: "md", }); export const heading5 = css({ ...common, textStyle: "headings", fontSize: ["md", "md", "lg"], - mt: 4, - mb: 2, + mt: "md", + mb: "sm", }); export const paragraph = css({ ...common, fontSize: "md", - my: 2, + my: "sm", overflowWrap: "break-word", }); @@ -67,7 +67,7 @@ export const anchor = css({ export const blockquote = cx( css({ colorPalette: "primary" }), paper({ - my: 4, + my: "md", }), ); @@ -77,7 +77,7 @@ export const table = cx( width: "100%", borderWidth: "1px", borderColor: { base: "primary.50", _dark: "primary.950" }, - my: 8, + my: "lg", fontSize: ["sm", "md"], }), ); @@ -103,25 +103,25 @@ export const td = css({ export const hr = divider({ orientation: "horizontal", color: { base: "primary.50", _dark: "primary.950" }, - my: 8, + my: "lg", }); export const unorderedList = css({ ...common, - my: 4, + my: "md", listStyleType: "disc", paddingInlineStart: 4, }); export const orderedList = css({ ...common, - my: 4, + my: "md", listStyleType: "decimal", paddingInlineStart: 4, }); export const img = css({ - my: 4, + my: "md", maxWidth: "100%", rounded: "xl", }); @@ -129,7 +129,7 @@ export const img = css({ export const pre = cx( css({ colorPalette: "primary" }), paper({ - my: 8, + my: "lg", overflowX: "auto", maxWidth: "100%", }), diff --git a/packages/components/src/astro/Alert.astro b/packages/components/src/astro/Alert.astro index bb0be54..5299864 100644 --- a/packages/components/src/astro/Alert.astro +++ b/packages/components/src/astro/Alert.astro @@ -46,7 +46,7 @@ const iconName = (() => { if (status === "tips") return "mdi:lightbulb-on"; return "mdi:alert-circle"; })(); -const withMarginStyle = css({ my: 4 }); +const withMarginStyle = css({ my: "md" }); ---