chiplet 0.3.0-dev.3 → 0.3.0-dev.4

package/src/component/popover/style/index.css.ts

@@ -1,21 +1,17 @@
-import { stretch, theme } from '#theme'
+import { radiusVar, SquircleStyle, stretch, theme } from '#theme'
 import { createVar, style } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 
 const width = createVar()
 const maxWidth = createVar()
-const minHeight = createVar()
 const maxHeight = createVar()
 const padding = createVar()
 const paddingBlock = createVar()
 const paddingInline = createVar()
 const margin = createVar()
-const fontSize = createVar()
-const lineHeight = createVar()
 const color = createVar()
 const background = createVar()
 const border = createVar()
-const radius = createVar()
 const shadow = createVar()
 const backdrop = createVar()
 const filter = createVar()
@@ -27,48 +23,50 @@ const transition = createVar()
 const transitionProperty = `background, opacity, transform, display, overlay`
 
 export const DialogStyle = recipe({
-  base: {
-    vars: {
-      [maxWidth]: `calc(100% - 2 * ${margin})`,
-      [maxHeight]: `calc(100% - 2 * ${margin})`,
-      [margin]: theme.dialog.margin,
-      [color]: theme.dialog.color,
-      [background]: theme.dialog.background,
-      [backdrop]: theme.dialog.backdrop,
-      [radius]: theme.dialog.radius,
-      [shadow]: theme.dialog.shadow,
-      [filter]: theme.dialog.filter,
-      [transform]: 'none',
-      [transition]: theme.dialog.transition,
-    },
-    boxSizing: 'border-box',
-    maxInlineSize: maxWidth,
-    maxBlockSize: maxHeight,
-    padding: '0',
-    margin: 'auto',
-    overflow: 'clip auto',
-    color,
-    background,
-    border: 'none',
-    borderRadius: radius,
-    boxShadow: shadow,
-    transform: 'none',
-    transition,
-    transitionProperty,
-    '::backdrop': {
-      background: backdrop,
-      backdropFilter: filter,
-      transition: 'inherit',
-    },
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style
-    '@starting-style': {
-      opacity: 0,
-      transform,
+  base: [
+    SquircleStyle,
+    {
+      vars: {
+        [maxWidth]: `calc(100% - 2 * ${margin})`,
+        [maxHeight]: `calc(100% - 2 * ${margin})`,
+        [margin]: theme.dialog.margin,
+        [color]: theme.dialog.color,
+        [background]: theme.dialog.background,
+        [backdrop]: theme.dialog.backdrop,
+        [radiusVar]: theme.dialog.radius,
+        [shadow]: theme.dialog.shadow,
+        [filter]: theme.dialog.filter,
+        [transform]: 'none',
+        [transition]: theme.dialog.transition,
+      },
+      boxSizing: 'border-box',
+      maxInlineSize: maxWidth,
+      maxBlockSize: maxHeight,
+      padding: '0',
+      margin: 'auto',
+      overflow: 'clip auto',
+      color,
+      background,
+      border: 'none',
+      boxShadow: shadow,
+      transform: 'none',
+      transition,
+      transitionProperty,
       '::backdrop': {
-        background: 'none',
+        background: backdrop,
+        backdropFilter: filter,
+        transition: 'inherit',
+      },
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style
+      '@starting-style': {
+        opacity: 0,
+        transform,
+        '::backdrop': {
+          background: 'none',
+        },
       },
     },
-  },
+  ],
   variants: {
     size: {
       auto: {
@@ -91,37 +89,39 @@ export const DialogStyle = recipe({
 })
 
 export const PopoverStyle = recipe({
-  base: {
-    vars: {
-      [color]: theme.popover.color,
-      [background]: theme.popover.background,
-      [border]: theme.popover.border,
-      [radius]: theme.popover.radius,
-      [shadow]: theme.popover.shadow,
-      [transform]: `${translate} scale(0.95)`,
-      [translateValue]: '0.5rem',
-      [transition]: theme.popover.transition,
-    },
-    boxSizing: 'border-box',
-    padding: '0',
-    margin: '0',
-    overflow: 'hidden auto',
-    color,
-    background,
-    border,
-    borderRadius: radius,
-    boxShadow: shadow,
-    transform: 'none',
-    transformOrigin,
-    transition,
-    transitionProperty,
-    '@starting-style': {
-      opacity: 0,
-      // Do not set the CSS 'translate' property here;
-      // it is controlled by the 'usePositioning' hook.
-      transform,
+  base: [
+    SquircleStyle,
+    {
+      vars: {
+        [color]: theme.popover.color,
+        [background]: theme.popover.background,
+        [border]: theme.popover.border,
+        [radiusVar]: theme.popover.radius,
+        [shadow]: theme.popover.shadow,
+        [transform]: `${translate} scale(0.95)`,
+        [translateValue]: '0.5rem',
+        [transition]: theme.popover.transition,
+      },
+      boxSizing: 'border-box',
+      padding: '0',
+      margin: '0',
+      overflow: 'clip auto',
+      color,
+      background,
+      border,
+      boxShadow: shadow,
+      transform: 'none',
+      transformOrigin,
+      transition,
+      transitionProperty,
+      '@starting-style': {
+        opacity: 0,
+        // Do not set the CSS 'translate' property here;
+        // it is controlled by the 'usePositioning' hook.
+        transform,
+      },
     },
-  },
+  ],
   variants: {
     position: {
       'above': {
@@ -200,47 +200,44 @@ export const PopoverStyle = recipe({
   },
 })
 
-export const TooltipStyle = style({
-  vars: {
-    [minHeight]: theme.tooltip.minHeight,
-    [padding]: `${paddingBlock} ${paddingInline}`,
-    [paddingBlock]: `calc((${minHeight} - ${lineHeight}) / 2)`,
-    [paddingInline]: theme.tooltip.padding,
-    [fontSize]: theme.tooltip.fontSize,
-    [lineHeight]: theme.tooltip.lineHeight,
-    [color]: theme.tooltip.color,
-    [background]: theme.tooltip.background,
-    [border]: theme.tooltip.border,
-    [radius]: theme.tooltip.radius,
-    [filter]: theme.tooltip.filter,
+export const TooltipStyle = style([
+  SquircleStyle,
+  {
+    vars: {
+      [padding]: `${paddingBlock} ${paddingInline}`,
+      [paddingBlock]: `calc((${theme.tooltip.minHeight} - 1lh) / 2)`,
+      [paddingInline]: theme.tooltip.padding,
+      [color]: theme.tooltip.color,
+      [background]: theme.tooltip.background,
+      [border]: theme.tooltip.border,
+      [radiusVar]: theme.tooltip.radius,
+      [filter]: theme.tooltip.filter,
+    },
+    boxSizing: 'border-box',
+    inlineSize: 'fit-content',
+    blockSize: 'fit-content',
+    padding,
+    margin: '0',
+    overflow: 'visible',
+    color,
+    background,
+    border,
+    filter,
   },
-  boxSizing: 'border-box',
-  inlineSize: 'fit-content',
-  blockSize: 'fit-content',
-  padding,
-  margin: '0',
-  overflow: 'visible',
-  fontSize,
-  lineHeight,
-  color,
-  background,
-  border,
-  borderRadius: radius,
-  filter,
-})
+])
 
 export const TooltipArrowStyle = recipe({
   base: {
     vars: {
       [width]: theme.tooltip.arrow.size,
-      [radius]: theme.tooltip.arrow.radius,
+      [radiusVar]: theme.tooltip.arrow.radius,
     },
     position: 'absolute',
     zIndex: '-1',
     inlineSize: width,
     aspectRatio: '1 / 1',
     background: 'inherit',
-    borderRadius: radius,
+    borderRadius: radiusVar,
     transform: 'skew(15deg, 15deg)',
   },
   variants: {

package/src/component/select/Group.tsx

@@ -1,6 +1,7 @@
 import { useUniqueId } from '#hook'
 import clsx from 'clsx'
 import {
+  GroupHeaderStyle,
   GroupLabelStyle,
   GroupNestedListStyle,
   GroupStyle,
@@ -17,6 +18,7 @@ export interface GroupProps
   label?: string | undefined
   slot?: {
     root?: React.ComponentProps<'li'> | undefined
+    header?: React.ComponentProps<'div'> | undefined
     label?: React.ComponentProps<'div'> | undefined
     nested?: React.ComponentProps<'ul'> | undefined
   }
@@ -39,11 +41,17 @@ export function Group(props: GroupProps) {
     >
       {label != null && (
         <div
-          {...labelProps}
-          className={clsx(GroupLabelStyle, labelProps.className)}
+          {...slot?.header}
+          className={clsx(GroupHeaderStyle, slot?.header?.className)}
           role='none'
         >
-          {label}
+          <div
+            {...labelProps}
+            className={clsx(GroupLabelStyle, labelProps.className)}
+            role='none'
+          >
+            {label}
+          </div>
         </div>
       )}
 

package/src/component/select/style/index.css.ts

@@ -2,6 +2,8 @@ import {
   ActiveSelector,
   DisabledSelector,
   HighlightName,
+  radiusVar,
+  SquircleStyle,
   theme,
   TRANSPARENT,
 } from '#theme'
@@ -10,7 +12,6 @@ import { recipe } from '@vanilla-extract/recipes'
 
 const gap = createVar()
 const width = createVar()
-const height = createVar()
 const padding = createVar()
 const paddingBlock = createVar()
 const paddingInline = createVar()
@@ -18,8 +19,6 @@ const margin = createVar()
 const marginBlock = createVar()
 const marginInline = createVar()
 const font = createVar()
-const fontSize = createVar()
-const lineHeight = createVar()
 const icon = createVar()
 const color = createVar()
 const colorChecked = createVar()
@@ -32,10 +31,10 @@ const backgroundActive = createVar()
 const backgroundDisabled = createVar()
 const border = createVar()
 const borderSize = createVar()
-const radius = createVar()
 
 const gridTemplate = "'a b c' / auto 1fr auto"
 const gridColumn = 'span 3'
+const paddingBlockValue = `calc((${theme.item.height} - 1lh) / 2)`
 
 export const ListStyle = style({
   vars: {
@@ -52,6 +51,8 @@ export const ListStyle = style({
   padding,
   margin: '0',
   overflow: 'auto',
+  scrollSnapType: 'both mandatory',
+  scrollPadding: padding,
   selectors: {
     [`&::highlight(${HighlightName})`]: {
       textDecorationLine: 'underline',
@@ -60,59 +61,57 @@ export const ListStyle = style({
 })
 
 export const ItemStyle = recipe({
-  base: {
-    vars: {
-      [gap]: theme.item.gap,
-      [height]: theme.item.height,
-      [padding]: `${paddingBlock} ${paddingInline}`,
-      [paddingBlock]: `calc((${height} - ${lineHeight}) / 2)`,
-      [paddingInline]: theme.item.padding,
-      [fontSize]: theme.item.fontSize,
-      [lineHeight]: theme.item.lineHeight,
-      [icon]: theme.item.icon,
-      [color]: 'inherit',
-      [colorDisabled]: theme.disabled.color,
-      [cursor]: 'pointer',
-      [cursorDisabled]: 'not-allowed',
-      [background]: 'none',
-      [backgroundHover]: theme.hover.background,
-      [backgroundActive]: theme.active.background,
-      [backgroundDisabled]: 'none',
-      [radius]: theme.item.radius,
-    },
-    display: 'grid',
-    gridTemplateRows: 'subgrid',
-    gridTemplateColumns: 'subgrid',
-    gridColumn,
-    gap,
-    placeItems: 'start',
-    padding,
-    fontSize,
-    lineHeight,
-    color,
-    cursor,
-    background,
-    borderRadius: radius,
-    ':hover': {
+  base: [
+    SquircleStyle,
+    {
       vars: {
-        [background]: backgroundHover,
+        [gap]: theme.item.gap,
+        [padding]: `${paddingBlock} ${paddingInline}`,
+        [paddingBlock]: paddingBlockValue,
+        [paddingInline]: theme.item.padding,
+        [icon]: theme.item.icon,
+        [color]: 'inherit',
+        [colorDisabled]: theme.disabled.color,
+        [cursor]: 'pointer',
+        [cursorDisabled]: 'not-allowed',
+        [background]: 'none',
+        [backgroundHover]: theme.hover.background,
+        [backgroundActive]: theme.active.background,
+        [backgroundDisabled]: 'none',
+        [radiusVar]: theme.item.radius,
       },
-    },
-    selectors: {
-      [`&${ActiveSelector}`]: {
+      display: 'grid',
+      gridTemplateRows: 'subgrid',
+      gridTemplateColumns: 'subgrid',
+      gridColumn,
+      gap,
+      placeItems: 'start',
+      padding,
+      color,
+      cursor,
+      scrollSnapAlign: 'center',
+      background,
+      ':hover': {
         vars: {
-          [background]: backgroundActive,
+          [background]: backgroundHover,
         },
       },
-      [`&${DisabledSelector}`]: {
-        vars: {
-          [color]: colorDisabled,
-          [cursor]: cursorDisabled,
-          [background]: backgroundDisabled,
+      selectors: {
+        [`&${ActiveSelector}`]: {
+          vars: {
+            [background]: backgroundActive,
+          },
+        },
+        [`&${DisabledSelector}`]: {
+          vars: {
+            [color]: colorDisabled,
+            [cursor]: cursorDisabled,
+            [background]: backgroundDisabled,
+          },
         },
       },
     },
-  },
+  ],
   variants: {
     danger: {
       true: {
@@ -148,7 +147,7 @@ export const ItemAfterStyle = style({
 
 export const ItemIconStyle = style({
   vars: {
-    [marginBlock]: `calc((${lineHeight} - ${icon}) / 2)`,
+    [marginBlock]: `calc((1lh - ${icon}) / 2)`,
     [color]: TRANSPARENT,
     [colorChecked]: 'inherit',
   },
@@ -168,7 +167,7 @@ export const ItemIconStyle = style({
 export const SeparatorStyle = style({
   vars: {
     [margin]: `${marginBlock} ${marginInline}`,
-    [marginBlock]: `calc((${theme.item.height} - ${theme.item.lineHeight}) / 2)`,
+    [marginBlock]: paddingBlockValue,
     [marginInline]: '0',
     [color]: theme.separator.color,
     [border]: `${borderSize} solid`,
@@ -189,18 +188,25 @@ export const GroupStyle = style({
   gap: 'inherit',
 })
 
-export const GroupLabelStyle = style({
+export const GroupHeaderStyle = style({
   vars: {
     [padding]: `${paddingBlock} ${paddingInline}`,
-    [paddingBlock]: `calc((${theme.item.height} - ${theme.item.lineHeight}) / 2)`,
+    [paddingBlock]: paddingBlockValue,
     [paddingInline]: theme.item.padding,
     [font]: theme.group.font,
     [color]: theme.group.color,
   },
   position: 'sticky',
   insetBlockStart: '0',
+  display: 'grid',
+  gridTemplateColumns: 'subgrid',
   gridColumn,
+  gap: 'inherit',
   padding,
+})
+
+export const GroupLabelStyle = style({
+  gridColumn,
   font,
   color,
 })

package/src/component/style/article.css.ts

@@ -0,0 +1,189 @@
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+
+const gap = createVar()
+const width = createVar()
+const color = createVar()
+const background = createVar()
+
+export const ArticleStyle = style({
+  vars: {
+    [width]: '48rem',
+    [color]: 'light-dark(#131313, #fff)',
+    [background]: 'light-dark(#fff, #131313)',
+  },
+  maxInlineSize: width,
+  paddingInline: '1.5rem',
+  margin: 'auto',
+  fontFamily: `'Proxima Nova', 'Myriad Set Pro', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif`,
+  fontSize: '0.875rem',
+  lineHeight: '1.25rem',
+})
+
+globalStyle(`${ArticleStyle} h1, ${ArticleStyle} section`, {
+  color,
+  background,
+})
+
+globalStyle(
+  ['h1', 'h2', 'h3', 'p', 'ul', 'ol', 'pre', 'hr', 'section']
+    .map((selector) => `${ArticleStyle} ${selector}`)
+    .join(', '),
+  {
+    maxInlineSize: width,
+    margin: 'auto',
+  }
+)
+
+globalStyle(`${ArticleStyle} h1`, {
+  padding: '2.5rem 2rem',
+  fontFamily: `'Proxima Nova', 'Segoe UI Light', Quicksand, 'Myriad Set Pro', 'Lucida Grande', sans-serif`,
+  fontSize: '2rem',
+  lineHeight: '3rem',
+  textAlign: 'center',
+})
+
+globalStyle(`${ArticleStyle} h2`, {
+  padding: '1rem 1.5rem 0.75rem 1.25rem',
+  fontSize: '1.125rem',
+  lineHeight: '1.75rem',
+  borderInlineStart: '0.25rem solid #aaf',
+})
+
+globalStyle(`${ArticleStyle} h3`, {
+  position: 'relative',
+  marginBlock: '1.25rem',
+})
+
+globalStyle(`${ArticleStyle} h3::before`, {
+  position: 'absolute',
+  insetBlock: '0.1875rem 0.375rem',
+  insetInlineStart: '-1.5rem',
+  content: '',
+  borderInlineStart: '0.25rem solid #999',
+})
+
+globalStyle(`${ArticleStyle} p, ${ArticleStyle} li`, {
+  marginBlock: '1.25rem',
+})
+
+globalStyle(`${ArticleStyle} ul`, {
+  paddingInlineStart: '1em',
+  listStyle: 'circle',
+})
+
+globalStyle(`${ArticleStyle} ol`, {
+  paddingInlineStart: '1em',
+  listStyle: 'auto',
+})
+
+globalStyle(`${ArticleStyle} a`, {
+  color: '#08c',
+})
+
+globalStyle(`${ArticleStyle} a:hover`, {
+  color: '#15c',
+  textDecoration: 'underline',
+  textDecorationColor: '#58e',
+})
+
+globalStyle(`${ArticleStyle} a:focus-visible`, {
+  outline: '1px dotted rgb(0 0 0 / 75%)',
+  outlineOffset: '2px',
+})
+
+globalStyle(`${ArticleStyle} a[download]`, {
+  vars: {
+    [color]: 'light-dark(#fff, #fff)',
+    [background]: 'light-dark(#acc, #222)',
+  },
+  display: 'inline-block',
+  blockSize: '1.75rem',
+  padding: '0 0.5rem',
+  fontSize: '0.875rem',
+  lineHeight: '1.75rem',
+  color,
+  background,
+  borderRadius: '0.125rem',
+})
+
+globalStyle(`${ArticleStyle} :has(> a[download]:only-child)`, {
+  paddingInline: '1.5rem',
+})
+
+globalStyle(`${ArticleStyle} a[download]:hover`, {
+  color: '#fff',
+  textDecoration: 'none',
+  background: '#8aa',
+})
+
+globalStyle(`${ArticleStyle} a[download]:focus-visible`, {
+  outline: '2px solid rgb(102 136 136 / 40%)',
+  outlineOffset: '1px',
+  background: '#688',
+})
+
+globalStyle(`${ArticleStyle} code`, {
+  display: 'inline-block',
+  padding: '0.125rem',
+  fontFamily: `Monaco, 'Andale Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace`,
+  fontSize: '0.875rem',
+  lineHeight: '1rem',
+  verticalAlign: 'top',
+  color: '#333',
+  whiteSpace: 'pre',
+  background: '#e5e5e5',
+  borderRadius: '0.125rem',
+})
+
+globalStyle(`${ArticleStyle} code::selection`, {
+  background: '#bbb',
+})
+
+globalStyle(`${ArticleStyle} section`, {
+  padding: '0.25rem 1.5rem',
+})
+
+globalStyle(`${ArticleStyle} footer`, {
+  vars: {
+    [gap]: '1.25rem',
+    [color]: '#aaf',
+  },
+  display: 'flex',
+  gap,
+  placeContent: 'center',
+  placeItems: 'center',
+  marginBlock: '2.5rem',
+  overflow: 'clip',
+  color,
+})
+
+globalStyle(`${ArticleStyle} footer::selection`, {
+  color: '#88d',
+  background: '#ccc',
+})
+
+globalStyle(`${ArticleStyle} footer strong, ${ArticleStyle} footer time`, {
+  position: 'relative',
+})
+
+globalStyle(
+  `${ArticleStyle} footer strong::before, ${ArticleStyle} footer time::after`,
+  {
+    position: 'absolute',
+    insetBlockStart: '0.5625rem',
+    inlineSize: width,
+    blockSize: '0.125rem',
+    content: '',
+    background: color,
+  }
+)
+
+globalStyle(`${ArticleStyle} footer strong::before`, {
+  insetInlineEnd: '100%',
+  marginInlineEnd: gap,
+})
+
+globalStyle(`${ArticleStyle} footer time::after`, {
+  insetInlineStart: '100%',
+  marginInlineStart: gap,
+})

package/src/component/style/index.ts

@@ -0,0 +1 @@
+export * from './article.css'