feat: ✨ add chip and tag (#22)

* feat: ✨ chip and tag * refactor(chip): ♻️ align styles with md3
importantimport · Oct 15, 2023 · 1b5d0e7 · 1b5d0e7
1 parent 0b474bf
commit 1b5d0e7
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 3 deletions.
diff --git a/docs-ve/src/typography/chip.story.svelte b/docs-ve/src/typography/chip.story.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Hst } from '@histoire/plugin-svelte'
+  import style from 'shiraha-ve/dist/typography/chip/global.css?inline'
+
+  export let Hst: Hst
+
+  let text = 'Chip'
+</script>
+
+<Hst.Story title="Chip">
+  <Hst.Variant title="default">
+    <svelte:element this={'style'}>{style}</svelte:element>
+      {#each { length: 5 } as _}
+        <!-- svelte-ignore a11y-invalid-attribute -->
+        <a href="#" rel="chip">{@html text}</a>
+      {/each}
+  </Hst.Variant>
+
+  <svelte:fragment slot="controls">
+    <Hst.Text bind:value={text} title="Chip Text" />
+  </svelte:fragment>
+</Hst.Story>
diff --git a/docs-ve/src/typography/link.story.svelte b/docs-ve/src/typography/link.story.svelte
@@ -4,7 +4,8 @@
 
   export let Hst: Hst
 
-  let text = 'Shiraha'
+  let linkText = 'Shiraha'
+  let tagText = 'tag'
 </script>
 
 <Hst.Story title="Link">
@@ -13,12 +14,17 @@
     <ul>
       {#each { length: 5 } as _}
         <!-- svelte-ignore a11y-invalid-attribute -->
-        <li><a href="#">{@html text}</a></li>
+        <li><a href="#">{@html linkText}</a></li>
       {/each}
     </ul>
+      {#each { length: 5 } as _}
+        <!-- svelte-ignore a11y-invalid-attribute -->
+        <a href="#" rel="tag">{@html tagText}</a>
+      {/each}
   </Hst.Variant>
 
   <svelte:fragment slot="controls">
-    <Hst.Text bind:value={text} title="Link Text" />
+    <Hst.Text bind:value={linkText} title="Link Text" />
+    <Hst.Text bind:value={tagText} title="Tag Text" />
   </svelte:fragment>
 </Hst.Story>
diff --git a/packages/shiraha-ve/src/typography/chip/global.css.ts b/packages/shiraha-ve/src/typography/chip/global.css.ts
@@ -0,0 +1,7 @@
+import { globalStyle } from '@vanilla-extract/css'
+
+import * as styles from './styles'
+
+globalStyle(':where(a[rel="chip"])', styles.chip)
+
+globalStyle(':where(a[rel="chip"]):hover', styles.chipHover)
diff --git a/packages/shiraha-ve/src/typography/chip/styles.ts b/packages/shiraha-ve/src/typography/chip/styles.ts
@@ -0,0 +1,19 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css'
+
+import { vars } from '../../vars.css'
+
+export const chip = {
+  backgroundColor: vars.color.surfaceContainerLow,
+  borderRadius: '8px',
+  color: vars.color.onSurface,
+  display: 'inline-block',
+  fontSize: '14px',
+  fontWeight: 500,
+  marginRight: '4px',
+  paddingBlock: '4px',
+  paddingInline: '12px',
+} as const satisfies ComplexStyleRule
+
+export const chipHover = {
+  backgroundColor: vars.color.secondaryContainer,
+} as const satisfies ComplexStyleRule
diff --git a/packages/shiraha-ve/src/typography/link/global.css.ts b/packages/shiraha-ve/src/typography/link/global.css.ts
@@ -5,3 +5,6 @@ import * as styles from './styles'
 globalStyle('a:not([role])', styles.link)
 
 globalStyle('a:not([role]):hover', styles.linkHover)
+
+globalStyle(':where(a[rel="tag"])', styles.tag)
+globalStyle(':where(a[rel="tag"])::before', styles.tagMarker)
diff --git a/packages/shiraha-ve/src/typography/link/styles.ts b/packages/shiraha-ve/src/typography/link/styles.ts
@@ -15,3 +15,15 @@ export const linkHover = {
   backgroundSize: '100% 0.125em',
   color: vars.color.onPrimaryContainer,
 } as const satisfies ComplexStyleRule
+
+export const tag = {
+  color: vars.color.primary,
+  display: 'inline-block',
+  marginInlineEnd: '8px',
+} as const satisfies ComplexStyleRule
+
+export const tagMarker = {
+  content: '#',
+  display: 'inline-block',
+  marginInlineEnd: '2px',
+} as const satisfies ComplexStyleRule