feat: ✨ footer style

docs-ve/src/components/footer/global.story.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { Hst } from '@histoire/plugin-svelte'
+  import style from 'shiraha-ve/dist/components/footer/global.css?inline'
+  import styleL from 'shiraha-ve/dist/typography/link/global.css?inline'
+  import styleP from 'shiraha-ve/dist/typography/paragraph/global.css?inline'
+
+  export let Hst: Hst
+
+  let text = 'Copyright © 2023 - All right reserved by ACME Industries Ltd'
+</script>
+
+<Hst.Story title="Footer (global)">
+  <Hst.Variant title="default">
+    <svelte:element this={'style'}>{style}</svelte:element>
+    <svelte:element this={'style'}>{styleL}</svelte:element>
+    <svelte:element this={'style'}>{styleP}</svelte:element>
+    <p>Footer with copyright text</p>
+    <footer>
+      <p>{text}</p>
+    </footer>
+    <!-- <p>Footer with copyright text and social icons</p> -->
+    <p>Two footer</p>
+    <footer>
+      <p>{text}</p>
+    </footer>
+    <footer>
+      <p>{text}</p>
+    </footer>
+    <p>with main</p>
+    <main>
+      <p>Footer with copyright text</p>
+      <footer>
+        <p>{text}</p>
+      </footer>
+      <!-- <p>Footer with copyright text and social icons</p> -->
+      <p>Two footer</p>
+      <footer>
+        <p>{text}</p>
+      </footer>
+      <footer>
+        <p>{text}</p>
+      </footer>
+    </main>
+  </Hst.Variant>
+
+  <svelte:fragment slot="controls">
+    <Hst.Text bind:value={text} title="Text" />
+  </svelte:fragment>
+</Hst.Story>

packages/shiraha-ve/src/components/footer/global.css.ts

@@ -0,0 +1,13 @@
+import { globalStyle } from '@vanilla-extract/css'
+
+import * as styles from './styles'
+
+globalStyle(':where(footer)', styles.footer)
+
+globalStyle(':where(footer):has(+ footer)', styles.footerHasFooter)
+
+globalStyle(':where(footer+footer)', styles.footerFooter)
+
+globalStyle(':where(:not(main) footer)', styles.notMainFooter)
+
+globalStyle(':where(main footer)', styles.mainFooter)

packages/shiraha-ve/src/components/footer/styles.ts

@@ -0,0 +1,35 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css'
+
+import { vars } from '../../vars.css'
+
+/** `:where(footer)` */
+export const footer = {
+  backgroundColor: vars.color.surfaceContainer,
+  marginTop: '1.5rem',
+  padding: '1.5rem 0',
+  width: '100%',
+} as const satisfies ComplexStyleRule
+
+/** `:where(footer):has(+ footer)` (first footer) */
+export const footerHasFooter = {
+  borderBottomLeftRadius: '0 !important',
+  borderBottomRightRadius: '0 !important',
+} as const satisfies ComplexStyleRule
+
+/** `:where(footer+footer)` (second footer) */
+export const footerFooter = {
+  borderTopLeftRadius: '0 !important',
+  borderTopRightRadius: '0 !important',
+  marginTop: 1,
+} as const satisfies ComplexStyleRule
+
+/** `:where(:not(main) footer)` */
+export const notMainFooter = {
+  // TODO: container like `main`
+} as const satisfies ComplexStyleRule
+
+/** `:where(main footer)` */
+export const mainFooter = {
+  borderRadius: '2rem',
+  padding: '2rem',
+} as const satisfies ComplexStyleRule