refactor(shiraha-ve): 💄 update styles

packages/shiraha-ve/package.json

@@ -21,6 +21,7 @@
     "style"
   ],
   "exports": {
+    ".": "./dist/shiraha.css",
     "./*.css": "./dist/*.css",
     "./*.js": {
       "types": "./dist/*.d.ts",

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

@@ -0,0 +1,5 @@
+import { globalStyle } from '@vanilla-extract/css'
+
+import * as styles from './styles'
+
+globalStyle('blockquote', styles.blockquote)

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

@@ -0,0 +1,10 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css'
+
+import { vars } from '../../vars.css'
+
+export const blockquote = {
+  borderLeftColor: vars.color.surfaceVariant,
+  borderLeftWidth: 2,
+  fontStyle: 'italic',
+  marginTop: 24,
+} as const satisfies ComplexStyleRule

packages/shiraha-ve/src/typography/blockquote/vanilla.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css'
+
+import * as styles from './styles'
+
+export const blockquote = style(styles.blockquote)

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

@@ -0,0 +1,16 @@
+import { globalStyle } from '@vanilla-extract/css'
+import OP from 'open-props'
+
+import { vars } from '../../vars.css'
+
+globalStyle('code', {
+  backgroundColor: vars.color.surfaceVariant,
+  borderRadius: 4,
+  color: vars.color.onSurfaceVariant,
+  fontFamily: OP.fontMono,
+  fontSize: '0.875em',
+})
+
+// globalStyle('pre', {
+//   overflowX: 'auto',
+// })

packages/shiraha-ve/src/typography/code/rehype-pretty-code/line-numbers/global.css.ts

@@ -0,0 +1,15 @@
+/**
+ * Line numbers
+ * {@link https://rehype-pretty-code.netlify.app/}
+ */
+
+import { globalStyle } from '@vanilla-extract/css'
+
+globalStyle('code', {
+  counterReset: 'line',
+})
+
+globalStyle('code > [data-line]::before', {
+  content: 'counter(line)',
+  counterIncrement: 'line',
+})

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

@@ -0,0 +1,11 @@
+import { globalStyle } from '@vanilla-extract/css'
+
+globalStyle('img, audio, video', {
+  maxWidth: '100%',
+})
+
+globalStyle('figure, picture', {
+  margin: '1rem 0',
+})
+
+// globalStyle('figcaption', {})