@tenphi/tasty 0.15.3 → 0.16.0

package/docs/configuration.md

@@ -54,6 +54,8 @@ These docs use `data-schema="dark"` in examples. If your app already standardize
 | `replaceTokens` | `Record<string, string \| number>` | - | Parse-time token substitution (inline replacement) |
 | `keyframes` | `Record<string, KeyframesSteps>` | - | Global keyframes for animations |
 | `properties` | `Record<string, PropertyDefinition>` | - | Global CSS @property definitions |
+| `fontFace` | `Record<string, FontFaceInput>` | - | Global @font-face definitions |
+| `counterStyle` | `Record<string, CounterStyleDescriptors>` | - | Global @counter-style definitions |
 | `autoPropertyTypes` | `boolean` | `true` | Auto-infer and register `@property` types from values |
 | `recipes` | `Record<string, RecipeStyles>` | - | Predefined style recipes (named style bundles) |
 | `colorSpace` | `'rgb' \| 'hsl' \| 'oklch'` | `'oklch'` | Color space for decomposed color token companion variables |
@@ -133,6 +135,65 @@ See [Replace Tokens](dsl.md#replace-tokens) in the Style DSL reference.
 
 ---
 
+## Font Face
+
+Register custom fonts globally so every component can reference them by family name. Values are descriptor objects or arrays (for multiple weights/styles). Rules are injected eagerly when styles are first generated.
+
+```ts
+configure({
+  fontFace: {
+    'Brand Sans': [
+      {
+        src: 'url("/fonts/brand-regular.woff2") format("woff2")',
+        fontWeight: 400,
+        fontDisplay: 'swap',
+      },
+      {
+        src: 'url("/fonts/brand-bold.woff2") format("woff2")',
+        fontWeight: 700,
+        fontDisplay: 'swap',
+      },
+    ],
+    Icons: {
+      src: 'url("/fonts/icons.woff2") format("woff2")',
+      fontDisplay: 'block',
+    },
+  },
+});
+```
+
+Now any component can use `fontFamily: '"Brand Sans", sans-serif'` and the browser will already have the `@font-face` rules in the stylesheet.
+
+See [Font Face (`@fontFace`)](dsl.md#font-face-fontface) for inline usage inside component styles and the full list of supported descriptors.
+
+---
+
+## Counter Style
+
+Define custom list-marker algorithms globally. Rules are injected eagerly when styles are first generated.
+
+```ts
+configure({
+  counterStyle: {
+    thumbs: {
+      system: 'cyclic',
+      symbols: '"👍"',
+      suffix: '" "',
+    },
+    'lower-roman-parens': {
+      system: 'extends lower-roman',
+      suffix: '") "',
+    },
+  },
+});
+```
+
+Components can then reference `listStyleType: 'thumbs'` directly.
+
+See [Counter Style (`@counterStyle`)](dsl.md#counter-style-counterstyle) for inline usage inside component styles and the full list of supported descriptors.
+
+---
+
 ## Recipes
 
 Recipes are predefined, named style bundles. Define them globally via `configure()`:

package/docs/design-system.md

@@ -103,6 +103,23 @@ configure({
 
 Then use `preset: 'h1'` or `preset: 't2'` in any component's styles.
 
+### Registering brand fonts
+
+Register your design system's custom fonts via `configure({ fontFace })` so every component can reference them:
+
+```ts
+configure({
+  fontFace: {
+    'Brand Sans': [
+      { src: 'url("/fonts/brand-regular.woff2") format("woff2")', fontWeight: 400, fontDisplay: 'swap' },
+      { src: 'url("/fonts/brand-bold.woff2") format("woff2")', fontWeight: 700, fontDisplay: 'swap' },
+    ],
+  },
+});
+```
+
+See [Font Face](configuration.md#font-face) for the full configuration reference.
+
 ---
 
 ## Defining state aliases

package/docs/dsl.md

@@ -119,7 +119,6 @@ color: '(#primary, #secondary)',  // Fallback syntax
 | `cr` | Card border radius | `1cr` | `var(--card-radius)` |
 | `bw` | Border width | `2bw` | `calc(var(--border-width) * 2)` |
 | `ow` | Outline width | `1ow` | `var(--outline-width)` |
-| `fs` | Font size | `1fs` | `var(--font-size)` |
 | `lh` | Line height | `1lh` | `var(--line-height)` |
 | `sf` | Stable fraction | `1sf` | `minmax(0, 1fr)` |
 
@@ -569,6 +568,97 @@ Use explicit `@properties` when you need non-default settings like `inherits: fa
 
 ---
 
+## Font Face (`@fontFace`)
+
+Register custom fonts directly inside a `styles` object. Keys are font-family names, values are descriptor objects (or arrays of them for multiple weights/styles).
+
+```ts
+const Heading = tasty({
+  styles: {
+    '@fontFace': {
+      'Brand Sans': {
+        src: 'url("/fonts/brand-sans.woff2") format("woff2")',
+        fontDisplay: 'swap',
+      },
+    },
+    fontFamily: '"Brand Sans", sans-serif',
+  },
+});
+```
+
+### Multiple weights
+
+Supply an array to register several variants of the same family:
+
+```ts
+'@fontFace': {
+  'Brand Sans': [
+    { src: 'url("/fonts/brand-regular.woff2") format("woff2")', fontWeight: 400, fontDisplay: 'swap' },
+    { src: 'url("/fonts/brand-bold.woff2") format("woff2")', fontWeight: 700, fontDisplay: 'swap' },
+  ],
+}
+```
+
+### Supported descriptors
+
+| Descriptor | CSS property | Type |
+|---|---|---|
+| `src` (required) | `src` | `string` |
+| `fontWeight` | `font-weight` | `string \| number` |
+| `fontStyle` | `font-style` | `string` |
+| `fontStretch` | `font-stretch` | `string` |
+| `fontDisplay` | `font-display` | `'auto' \| 'block' \| 'swap' \| 'fallback' \| 'optional'` |
+| `unicodeRange` | `unicode-range` | `string` |
+| `ascentOverride` | `ascent-override` | `string` |
+| `descentOverride` | `descent-override` | `string` |
+| `lineGapOverride` | `line-gap-override` | `string` |
+| `sizeAdjust` | `size-adjust` | `string` |
+| `fontFeatureSettings` | `font-feature-settings` | `string` |
+| `fontVariationSettings` | `font-variation-settings` | `string` |
+
+> Font-face rules are permanent — they are injected once and never cleaned up, matching how browsers handle `@font-face`.
+
+---
+
+## Counter Style (`@counterStyle`)
+
+Define custom list markers via the CSS `@counter-style` at-rule. Keys are counter-style names, values are descriptor objects.
+
+```ts
+const EmojiList = tasty({
+  tag: 'ol',
+  styles: {
+    '@counterStyle': {
+      thumbs: {
+        system: 'cyclic',
+        symbols: '"👍"',
+        suffix: '" "',
+      },
+    },
+    listStyleType: 'thumbs',
+  },
+});
+```
+
+### Supported descriptors
+
+| Descriptor | CSS property | Type |
+|---|---|---|
+| `system` (required) | `system` | `'cyclic' \| 'numeric' \| 'alphabetic' \| 'symbolic' \| 'additive' \| 'fixed' \| string` |
+| `symbols` | `symbols` | `string` |
+| `additiveSymbols` | `additive-symbols` | `string` |
+| `prefix` | `prefix` | `string` |
+| `suffix` | `suffix` | `string` |
+| `negative` | `negative` | `string` |
+| `range` | `range` | `string` |
+| `pad` | `pad` | `string` |
+| `fallback` | `fallback` | `string` |
+| `speakAs` | `speak-as` | `string` |
+
+> Counter-style rules are permanent — they are injected once and never cleaned up, matching how browsers handle `@counter-style`.
+
+---
+
 ## Style Properties
 
 For a complete reference of all enhanced style properties — syntax, values, modifiers, and recommendations — see **[Style Properties Reference](styles.md)**.

package/docs/runtime.md

@@ -378,6 +378,94 @@ function Spinner() {
 - `#name` defines `--name-color` and auto-infers `<color>`
 - `--name` is also supported for existing CSS variables
 
+### useFontFace
+
+Inject `@font-face` rules for custom fonts. Permanent — no cleanup on unmount. Deduplicates by content.
+
+```tsx
+import { useFontFace } from '@tenphi/tasty';
+
+function App() {
+  useFontFace('Brand Sans', {
+    src: 'url("/fonts/brand-sans.woff2") format("woff2")',
+    fontWeight: '400 700',
+    fontDisplay: 'swap',
+  });
+
+  return <div style={{ fontFamily: '"Brand Sans", sans-serif' }}>Hello</div>;
+}
+```
+
+For multiple weights/styles, pass an array:
+
+```tsx
+useFontFace('Brand Sans', [
+  { src: 'url("/fonts/brand-regular.woff2") format("woff2")', fontWeight: 400, fontDisplay: 'swap' },
+  { src: 'url("/fonts/brand-bold.woff2") format("woff2")', fontWeight: 700, fontDisplay: 'swap' },
+]);
+```
+
+Signature:
+
+```ts
+function useFontFace(family: string, input: FontFaceInput): void;
+```
+
+### useCounterStyle
+
+Inject a `@counter-style` rule and get back the counter style name. Permanent — no cleanup on unmount. Deduplicates by name.
+
+```tsx
+import { useCounterStyle } from '@tenphi/tasty';
+
+function EmojiList() {
+  const styleName = useCounterStyle({
+    system: 'cyclic',
+    symbols: '"👍"',
+    suffix: '" "',
+  }, { name: 'thumbs' });
+
+  return (
+    <ol style={{ listStyleType: styleName }}>
+      <li>First</li>
+      <li>Second</li>
+    </ol>
+  );
+}
+```
+
+Factory form with dependencies:
+
+```tsx
+function DynamicList({ marker }: { marker: string }) {
+  const styleName = useCounterStyle(
+    () => ({
+      system: 'cyclic',
+      symbols: `"${marker}"`,
+      suffix: '" "',
+    }),
+    [marker],
+  );
+
+  return <ol style={{ listStyleType: styleName }}>...</ol>;
+}
+```
+
+Signatures:
+
+```ts
+function useCounterStyle(
+  descriptors: CounterStyleDescriptors,
+  options?: { name?: string; root?: Document | ShadowRoot },
+): string;
+
+function useCounterStyle(
+  factory: () => CounterStyleDescriptors,
+  deps: readonly unknown[],
+  options?: { name?: string; root?: Document | ShadowRoot },
+): string;
+```
+
 ### Troubleshooting
 
 - Styles are not updating: make sure `configure()` runs before first render, and verify the generated class name or global rule with [Debug Utilities](debug.md).

package/docs/ssr.md

@@ -317,6 +317,8 @@ Server-safe style collector. One instance per request.
 | `collectChunk(cacheKey, className, rules)` | Record CSS rules for a chunk. Deduplicated by `cacheKey`. |
 | `collectKeyframes(name, css)` | Record a `@keyframes` rule. Deduplicated by name. |
 | `collectProperty(name, css)` | Record a `@property` rule. Deduplicated by name. |
+| `collectFontFace(key, css)` | Record a `@font-face` rule. Deduplicated by content hash. |
+| `collectCounterStyle(name, css)` | Record a `@counter-style` rule. Deduplicated by name. |
 | `getCSS()` | Get all collected CSS as a single string. For non-streaming SSR. |
 | `flushCSS()` | Get only CSS collected since the last flush. For streaming SSR. |
 | `getCacheState()` | Serialize `{ entries: Record<cacheKey, className>, classCounter }` for client hydration. |

package/docs/tasty-static.md

@@ -163,6 +163,8 @@ module.exports = {
 | `config.states` | `Record<string, string>` | `{}` | Predefined state aliases |
 | `config.devMode` | `boolean` | `false` | Add source comments to CSS |
 | `config.recipes` | `Record<string, RecipeStyles>` | `{}` | Predefined style recipes |
+| `config.fontFace` | `Record<string, FontFaceInput>` | — | Global `@font-face` definitions |
+| `config.counterStyle` | `Record<string, CounterStyleDescriptors>` | — | Global `@counter-style` definitions |
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "0.15.3",
+  "version": "0.16.0",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",
@@ -179,7 +179,7 @@
         "path",
         "crypto"
       ],
-      "limit": "39 kB"
+      "limit": "40 kB"
     }
   ],
   "scripts": {