refactor(shiraha-ve): 💄 update styles

docs-ve/src/typography/heading.story.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Hst } from '@histoire/plugin-svelte'
+  import 'shiraha-ve/dist/typography/heading/global.css'
+
+  export let Hst: Hst
+
+  let headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+  let hText = 'Heading'
+  let pText = `Lorem ipsum dolor sit amet,
+  consectetur adipiscing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
+  In hac habitasse platea dictumst quisque.
+  Nam libero justo laoreet sit amet cursus sit amet.`
+</script>
+
+<Hst.Story title="Heading">
+  <Hst.Variant title="default">
+    {#each headings as heading}
+      <svelte:element this={heading}>
+        {@html hText}
+        {heading.at(1)}
+      </svelte:element>
+      {#if pText}
+        <p>{@html pText}</p>
+      {/if}
+    {/each}
+  </Hst.Variant>
+
+  <svelte:fragment slot="controls">
+    <Hst.Text bind:value={hText} title="Heading Text" />
+    <Hst.Textarea bind:value={pText} title="Paragraph Text" />
+  </svelte:fragment>
+</Hst.Story>

packages/shiraha-ve/src/shiraha.css.ts

@@ -7,5 +7,5 @@ import './base/reset.css'
 // theme
 import './themes/baseline.css'
 // typography
-import './typography/divider.global.css'
-import './typography/heading.global.css'
+import './typography/divider/global.css'
+import './typography/heading/global.css'

packages/shiraha-ve/src/typography/divider.global.css.ts → packages/shiraha-ve/src/typography/divider/global.css.ts

@@ -1,6 +1,6 @@
 import { globalStyle } from '@vanilla-extract/css'
 
-import { vars } from '../vars.css'
+import { vars } from '../../vars.css'
 
 globalStyle('hr', {
   borderTopWidth: 1,

packages/shiraha-ve/src/typography/heading/global.css.ts

@@ -0,0 +1,37 @@
+/**
+ * Adaptive Type Scale
+ * 1.2x ~ 1.25x
+ * 20rem (320px) ~ 52.5rem (840px)
+ * {@link https://typescale.com}
+ * {@link https://royalfig.github.io/fluid-typography-calculator/}
+ */
+
+import { globalStyle } from '@vanilla-extract/css'
+import OP from 'open-props'
+
+import * as styles from './style'
+
+globalStyle(':where(h1, h2, h3, h4)', {
+  '@supports': {
+    '(text-wrap: pretty)': {
+      textWrap: 'pretty',
+    },
+    'not (text-wrap: pretty)': {
+      textWrap: 'balance',
+    },
+  },
+  'fontWeight': OP.fontWeight6,
+  // 'margin': '3rem 0 1.38rem',
+})
+
+globalStyle(':where(h1), .h1', styles.h1)
+
+globalStyle(':where(h2), .h2', styles.h2)
+
+globalStyle(':where(h3), .h3', styles.h3)
+
+globalStyle(':where(h4), .h4', styles.h4)
+
+globalStyle(':where(h5), .h5', styles.h5)
+
+globalStyle(':where(h6), .h6', styles.h6)

packages/shiraha-ve/src/typography/heading/style.ts

@@ -0,0 +1,26 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css'
+
+export const h1 = {
+  fontSize: 'clamp(2.49rem, 2.14rem + 1.73vw, 3.05rem)',
+  marginTop: 0,
+} as const satisfies ComplexStyleRule
+
+export const h2 = {
+  fontSize: 'clamp(2.07rem, 1.85rem + 1.13vw, 2.44rem)',
+} as const satisfies ComplexStyleRule
+
+export const h3 = {
+  fontSize: 'clamp(1.73rem, 1.59rem + 0.69vw, 1.95rem)',
+} as const satisfies ComplexStyleRule
+
+export const h4 = {
+  fontSize: 'clamp(1.44rem, 1.36rem + 0.38vw, 1.56rem)',
+} as const satisfies ComplexStyleRule
+
+export const h5 = {
+  fontSize: 'clamp(1.2rem, 1.17rem + 0.15vw, 1.25rem)',
+} as const satisfies ComplexStyleRule
+
+export const h6 = {
+  fontSize: 'clamp(0.8rem, 0.78rem + 0.1vw, 0.83rem)',
+} as const satisfies ComplexStyleRule