@orfium/ictinus 5.41.0 → 5.41.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.41.0",
+  "version": "5.41.2",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
@@ -59,9 +59,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vanilla-extract/css": "^1.17.4",
-    "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/rollup-plugin": "^1.4.1",
-    "@vanilla-extract/sprinkles": "^1.6.5",
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^4.1.0",
     "@vitest/coverage-v8": "^3.2.4",
@@ -96,6 +94,8 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-table": "^8.21.3",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
     "clsx": "^2.1.1",
     "dayjs": "^2.0.0-alpha.4",
     "eslint-plugin-unused-imports": "^3.0.0",

package/src/components/ThemeProvider/ThemeProvider.style.ts

@@ -1,37 +1,7 @@
-import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
-import type { Theme } from 'theme';
-import {
-  headline01,
-  headline02,
-  headline03,
-  headline04,
-  headline05,
-} from '../Typography/Typography.config.styles';
-
-export const globalStyles = (theme: Theme): SerializedStyles => css`
-  h1 {
-    ${headline01(theme)}
-  }
-  h2 {
-    ${headline02(theme)}
-  }
-  h3 {
-    ${headline03(theme)}
-  }
-  h4 {
-    ${headline04(theme)}
-  }
-  h5 {
-    ${headline05(theme)}
-  }
-
-  // default outline for all focused elements defined by the design team
-  // our lightGrey base color (500 shade) with opacity at 50%
-  *:focus {
-    outline: 0;
-  }
 
+// TODO: View transitions used by toast remove when toast is migrated to vanilla extract
+export const globalStyles = () => css`
   ::view-transition-group(*) {
     animation-duration: 250ms;
     /* swift out */

package/src/sprinkles/properties.css.ts

@@ -284,6 +284,7 @@ export const responsiveProps = defineProperties({
     maxWidth: { ...vars.sizing, full: '100%', screen: '100vw' },
     maxHeight: { ...vars.sizing, full: '100%', screen: '100vh' },
     flexDirection: ['column', 'row', 'column-reverse', 'row-reverse'] as const,
+    flexShrink: ['0', '1'] as const,
     position: ['absolute', 'fixed', 'relative', 'sticky'] as const,
     gap: vars.spacing,
     gridGap: vars.spacing,
@@ -345,12 +346,14 @@ export const unresponsiveProps = defineProperties({
     fontSize: vars['font-size'],
     typography,
     fontWeight: vars.weight,
+    fontStyle: ['italic'] as const,
     lineHeight: vars['line-height'],
     letterSpacing: vars['letter-spacing'],
     isolation: ['isolate'] as const,
     objectFit: ['contain', 'cover'] as const,
     pointerEvents: ['auto', 'none'] as const,
     textTransform: ['capitalize', 'none', 'uppercase'] as const,
+    textDecoration: ['underline'] as const,
     visibility: ['hidden', 'visible'] as const,
     wordBreak: ['break-word'] as const,
     wordWrap: ['normal', 'break-word'] as const,

package/src/vanilla/Table/TableHeader.tsx

@@ -8,7 +8,12 @@ export type TableHeaderProps = BoxProps<'thead', NonNullable<styles.HeaderVarian
 
 export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(
   ({ children, className, pinned, ...props }, ref) => (
-    <Box asChild className={cn(styles.header({ pinned }), className)} {...props}>
+    <Box
+      asChild
+      data-pinned={pinned ? '' : undefined}
+      className={cn(styles.header({ pinned }), className)}
+      {...props}
+    >
       <thead ref={ref}>{children}</thead>
     </Box>
   )

package/src/vanilla/Table/TableHeaderCell.css.ts

@@ -1,8 +1,12 @@
-import { vars } from '@orfium/tokens';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sprinkles } from '../../sprinkles';
 import { style } from '../../vanilla-extract';
+import * as headerStyles from './TableHeader.css';
+import * as rowStyles from './TableRow.css';
+
+const header = headerStyles.className;
+const row = rowStyles.className;
 
 export const cell = recipe({
   base: [
@@ -49,7 +53,13 @@ export const content = recipe({
       borderColor: 'decorative.default',
     }),
     style({
-      boxShadow: `0 1px 0 ${vars.color['border-color'].decorative.default}`,
+      borderBottomWidth: '1px',
+
+      selectors: {
+        [`${header}:not([data-pinned]) ${row}:last-child &`]: {
+          borderBottomWidth: 0,
+        },
+      },
     }),
   ],
   variants: {

package/src/vanilla/Text/Text.tsx

@@ -8,19 +8,19 @@ import * as styles from './Text.css';
 
 const Slot = createSlot('@orfium/ictinus/Text');
 
-export type TextProps<T extends ElementType = 'p', P = unknown> = BoxProps<
+export type TextProps<T extends ElementType = 'span', P = unknown> = BoxProps<
   T,
   ExtendProps<styles.TextVariants, P>
 >;
 
-export const Text = forwardRef<HTMLParagraphElement, TextProps>(
+export const Text = forwardRef<HTMLSpanElement, TextProps>(
   ({ asChild, children, className, lineClamp, truncate, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'p';
+    const Comp = asChild ? Slot : 'span';
 
     return (
       <Box
         asChild
-        ref={ref}
+        ref={ref as any} // Box expects HTMLDivElement ref, but asChild forwards to span at runtime
         className={cn(styles.text({ lineClamp, truncate }), className)}
         {...props}
       >