feat: ✨ details style

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Hst } from '@histoire/plugin-svelte'
+  import style from 'shiraha-ve/dist/typography/details/global.css?inline'
+
+  export let Hst: Hst
+
+  let summary = `Details and summary element`
+  let text = `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="Details">
+  <Hst.Variant title="default">
+    <svelte:element this={'style'}>{style}</svelte:element>
+    <details>
+      <summary>{summary}</summary>
+      <p>{text}</p>
+    </details>
+  </Hst.Variant>
+
+  <svelte:fragment slot="controls">
+    <Hst.Text bind:value={summary} title="Summary Text" />
+    <Hst.Textarea bind:value={text} title="Paragraph Text" />
+  </svelte:fragment>
+</Hst.Story>

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

@@ -0,0 +1,17 @@
+import { globalStyle } from '@vanilla-extract/css'
+
+import * as styles from './styles'
+
+globalStyle(':where(details)', styles.details)
+
+globalStyle(':where(details) > :not(summary)', styles.detailsNotSummary)
+
+globalStyle(':where(details) > summary', styles.detailsSummary)
+
+globalStyle(':where(details) > summary::after', styles.detailsSummaryAfter)
+
+globalStyle(':where(details) > summary::marker', styles.detailsSummaryMarker)
+
+globalStyle(':where(details[open]) > summary', styles.detailsOpenSummary)
+
+globalStyle(':where(details[open]) > summary::after', styles.detailsOpenSummaryAfter)

packages/shiraha-ve/src/typography/details/styles.ts

@@ -0,0 +1,63 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css'
+
+import OP from 'open-props'
+
+import { icon } from '../../utils/icon'
+import { vars } from '../../vars.css'
+
+/** `:where(details)` */
+export const details = {
+  backgroundColor: vars.color.surfaceContainer,
+  /** TODO: change this */
+  borderRadius: 5,
+  color: vars.color.onSurface,
+  paddingBlock: '1rem',
+  position: 'relative',
+} as const satisfies ComplexStyleRule
+
+/** `:where(details) > :not(summary)` */
+export const detailsNotSummary = {
+  paddingInline: '1.5rem',
+} as const satisfies ComplexStyleRule
+
+/** `:where(details) > summary` */
+export const detailsSummary = {
+  alignItems: 'center',
+  cursor: 'pointer',
+  display: 'flex',
+  fontWeight: OP.fontWeight7,
+  gap: '1rem',
+  listStyle: 'none',
+  padding: '0 1.5rem',
+  /** TODO: change this */
+  transition: '0.2s all ease',
+} as const satisfies ComplexStyleRule
+
+/** `:where(details) > summary::after` */
+export const detailsSummaryAfter = {
+  ...icon,
+  content: 'expand_more',
+  marginLeft: 'auto',
+  /** TODO:change this */
+  transition: '0.2s transform ease',
+} as const satisfies ComplexStyleRule
+
+/** `:where(details) > summary::marker` */
+export const detailsSummaryMarker = {
+  display: 'none',
+} as const satisfies ComplexStyleRule
+
+/** `:where(details[open]) > summary` */
+export const detailsOpenSummary = {
+  borderEndEndRadius: 0,
+  borderEndStartRadius: 0,
+  marginBlockEnd: '1rem',
+  padding: '0.5rem 1.5rem',
+  /** TODO: change this */
+  transition: '0.2s all ease',
+} as const satisfies ComplexStyleRule
+
+/** `:where(details[open]) > summary::after` */
+export const detailsOpenSummaryAfter = {
+  transform: 'rotate(180deg)',
+} as const satisfies ComplexStyleRule

packages/shiraha-ve/src/utils/icon.ts

@@ -0,0 +1,31 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css'
+
+export const icon = {
+  MozOsxFontSmoothing: 'grayscale',
+  WebkitFontSmoothing: 'antialiased',
+  direction: 'ltr',
+  display: 'inline-block',
+  fontFamily: [
+    'Material Symbols Outlined',
+    'Material Symbols Rounded',
+    'Material Symbols Sharp',
+    'Material Icons',
+    'Material Icons Outliend',
+    'Material Icons Sharp',
+    'Material Icons Two Tone',
+  ].join(', '),
+  fontFeatureSettings: 'liga',
+  fontSize: 24,
+  fontStyle: 'normal',
+  fontWeight: 'normal',
+  letterSpacing: 'normal',
+  lineHeight: 1,
+  textRendering: 'optimizeLegibility',
+  textTransform: 'none',
+  whiteSpace: 'nowrap',
+  wordWrap: 'normal',
+} as const satisfies ComplexStyleRule
+
+export const iconFill = {
+  fontVariationSettings: '\'FILL\' 1',
+} as const satisfies ComplexStyleRule