diff --git a/bau-ui/examples/bau-storybook/src/components/Hero.js b/bau-ui/examples/bau-storybook/src/components/Hero.js index 34620584..af5d0867 100644 --- a/bau-ui/examples/bau-storybook/src/components/Hero.js +++ b/bau-ui/examples/bau-storybook/src/components/Hero.js @@ -9,15 +9,12 @@ export default function (context) { padding: 0 1rem 1rem 1rem; & h1 { font-size: 56px; - line-height: 2rem; } & h2 { font-size: 48px; - line-height: 1.8rem; } & p { font-size: 24px; - line-height: 1.8rem; color: var(--color-emphasis-900); } `; diff --git a/bau-ui/examples/bau-storybook/src/components/footer.js b/bau-ui/examples/bau-storybook/src/components/footer.js index 19bcbda7..7586b482 100644 --- a/bau-ui/examples/bau-storybook/src/components/footer.js +++ b/bau-ui/examples/bau-storybook/src/components/footer.js @@ -60,6 +60,7 @@ export default function ({ tr, bau, css }) { align-items: center; gap: 1rem; margin-top: 4rem; + padding: 1rem; border-top: 1px solid var(--color-emphasis-200); color: var(--color-content-secondary); `, diff --git a/bau-ui/examples/bau-storybook/src/pages/gallery.ts b/bau-ui/examples/bau-storybook/src/pages/gallery.ts index 31fff34f..21e60ee3 100644 --- a/bau-ui/examples/bau-storybook/src/pages/gallery.ts +++ b/bau-ui/examples/bau-storybook/src/pages/gallery.ts @@ -213,7 +213,7 @@ export default (context: Context) => { flex-wrap: wrap; gap: 1rem; list-style: none; - padding: 0; + padding: 1rem; `, }, components.map(({ name }) => diff --git a/bau-ui/form/form.js b/bau-ui/form/form.js index f5ba1469..66b26753 100644 --- a/bau-ui/form/form.js +++ b/bau-ui/form/form.js @@ -12,10 +12,8 @@ export default function (context, options = {}) { gap: 1rem; padding: 1rem; min-width: 350px; - & > header { & h1 { - line-height: 0; font-size: 1.3rem; } } diff --git a/bau-ui/globalStyle/globalStyle.js b/bau-ui/globalStyle/globalStyle.js index f5229888..80aa7232 100644 --- a/bau-ui/globalStyle/globalStyle.js +++ b/bau-ui/globalStyle/globalStyle.js @@ -94,6 +94,10 @@ export default function globalStyle( { colorPalette = ColorPaletteDefault } = {} ) { createGlobalStyles` + * { + margin: 0; + padding: 0; + } :root { --color-scheme: light; --contrast-background-value: 90%; diff --git a/bau-ui/modal/modal.js b/bau-ui/modal/modal.js index 782351d0..bf7de269 100644 --- a/bau-ui/modal/modal.js +++ b/bau-ui/modal/modal.js @@ -25,6 +25,8 @@ export default function (context, options = {}) { ).join("\n"); const className = css` + margin: auto; + padding: 1rem; box-shadow: var(--shadow-s); background-color: var(--background-color); border-radius: var(--global-radius); diff --git a/bau-ui/paper/paper.js b/bau-ui/paper/paper.js index 09aded66..e55438f9 100644 --- a/bau-ui/paper/paper.js +++ b/bau-ui/paper/paper.js @@ -8,6 +8,7 @@ export default function (context, options = {}) { border: 1px solid transparent; height: fit-content; border-radius: var(--global-radius); + margin: 1rem 0; &.sm { box-shadow: var(--shadow-s); background-image: linear-gradient( diff --git a/examples/gccd/src/components/page.ts b/examples/gccd/src/components/page.ts index 8e4257fd..b2a973ee 100644 --- a/examples/gccd/src/components/page.ts +++ b/examples/gccd/src/components/page.ts @@ -13,12 +13,10 @@ export default function (context: Context) { & h1 { font-weight: 700; font-size: 1.3rem; - line-height: 1.4rem; } & h2 { font-weight: 600; font-size: 1.2rem; - line-height: 1.3rem; } & > header { display: flex; diff --git a/examples/gccd/src/layoutDefault.ts b/examples/gccd/src/layoutDefault.ts index a858dbdc..9296b8fa 100644 --- a/examples/gccd/src/layoutDefault.ts +++ b/examples/gccd/src/layoutDefault.ts @@ -47,7 +47,6 @@ export const layoutDefault = (context: Context) => { { class: css` grid-area: main; - margin: 1rem; display: grid; overflow-y: scroll; `, diff --git a/examples/gccd/src/style.ts b/examples/gccd/src/style.ts index 9a774bd1..b0c93df8 100644 --- a/examples/gccd/src/style.ts +++ b/examples/gccd/src/style.ts @@ -13,6 +13,7 @@ export const createStyles = (context: Context) => { } fieldset { border: 1px solid var(--color-emphasis-200); + padding: 0.5rem; } `; };