@cube-dev/ui-kit 0.125.0 → 0.126.0

package/docs/tasty/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/tasty/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/tasty/dsl.md

@@ -119,8 +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)` |
 
 You can register additional custom units via [`configure()`](configuration.md#options).
@@ -569,6 +567,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/tasty/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/tasty/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/styles.md

@@ -361,24 +361,27 @@ Multiple shadows: `shadow="1x 1x 2x #dark.20, inset 0 0 4x #dark.10"`
 
 Typography preset that sets font-size, line-height, letter-spacing, font-weight, font-style, and text-transform from named design tokens.
 
-**Syntax:** `[name] [modifiers...]`
+**Syntax:** `name`, `name / modifier`, or `modifier` (shorthand)
 
 Preset names are project-specific (e.g. `h1`–`h6`, `t1`–`t4`, `p1`–`p4`). Register them for autocomplete by augmenting `TastyPresetNames`.
 
+Use `/` to separate the preset name from a modifier. When a modifier is used alone (without a name), the preset name defaults to `inherit`.
+
 **Modifiers:**
 
 | Modifier | Effect |
 |----------|--------|
-| `strong` | Sets `font-weight` to bold (from `$bold-font-weight` token) |
+| `strong` (or `bold`) | Sets `font-weight` to bold (from `$bold-font-weight` token) |
 | `italic` | Sets `font-style: italic` |
 | `icon` | Sets font-size and line-height to icon size |
 | `tight` | Sets line-height equal to font-size |
 
 ```jsx
-preset="h1"           // heading 1
-preset="h2 strong"    // bold heading 2
-preset="t3 italic"    // italic text 3
-preset="t2 tight"     // text 2 with tight line-height
+preset="h1"              // heading 1
+preset="h2 / strong"     // bold heading 2
+preset="t3 / italic"     // italic text 3
+preset="t2 / tight"      // text 2 with tight line-height
+preset="bold"             // inherit preset with bold (shorthand for "inherit / bold")
 ```
 
 Individual typography props (`fontSize`, `lineHeight`, `letterSpacing`, `fontWeight`, `fontStyle`, `textTransform`) can be used alongside `preset` to override specific values, but using `preset` alone is recommended.

package/docs/tasty/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": "@cube-dev/ui-kit",
-  "version": "0.125.0",
+  "version": "0.126.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -45,7 +45,7 @@
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
-    "@tenphi/tasty": "0.15.3",
+    "@tenphi/tasty": "1.1.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -82,7 +82,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.2.3",
     "@storybook/react-vite": "^10.2.3",
-    "@tenphi/eslint-plugin-tasty": "^0.3.1",
+    "@tenphi/eslint-plugin-tasty": "^0.6.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",