@tenphi/tasty 0.0.0-snapshot.26b4630 → 0.0.0-snapshot.2705ab9

package/dist/styles/types.d.ts

@@ -1,4 +1,4 @@
-import { KeyframesSteps, PropertyDefinition } from "../injector/types.js";
+import { CounterStyleDescriptors, FontFaceInput, KeyframesSteps, PropertyDefinition } from "../injector/types.js";
 import { CSSProperties } from "../utils/css-types.js";
 import { StyleValue, StyleValueStateMap } from "../utils/styles.js";
 
@@ -40,6 +40,7 @@ type PresetNameKey = Extract<keyof TastyPresetNames, string>;
 type PresetName = [PresetNameKey] extends [never] ? string : PresetNameKey;
 type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type OpaquePercentage = '' | `.${Digit}` | `.${Digit}${Digit}` | '.100';
+type ColorValue = `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})` | (string & {});
 type NoType = false | null | undefined;
 interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font' | 'outline' | 'type' | 'gap' | 'padding' | 'margin' | 'width' | 'height' | 'border' | 'transition' | 'placeContent' | 'placeItems'> {
   /**
@@ -57,13 +58,20 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
   /**
    * Set the background color of the element. Shortcut for `background-color` with enhanced support for Tasty color tokens and syntaxes.
    *
+   * Supports double-color syntax: the second color is applied as a foreground overlay via a CSS custom property.
+   *
    * Examples:
    * - `fill="#purple.10"` // purple background with 10% opacity
    * - `fill="#danger"` // danger theme color
    * - `fill="rgb(255 128 0)"` // custom RGB color
+   * - `fill="rgb(255 128 0 / 0.5)"` // RGB with opacity
+   * - `fill="hsl(200 100% 50%)"` // HSL color
+   * - `fill="okhsl(200 100% 50%)"` // perceptually uniform OKHSL color
+   * - `fill="oklch(0.7 0.15 200)"` // OKLCH color
+   * - `fill="#primary #secondary"` // double color (second as foreground overlay)
    * - `fill={true}` // default fill color
    */
-  fill?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | boolean | (string & {});
+  fill?: ColorValue | boolean;
   /**
    * @deprecated Use `fill` instead.
    */
@@ -92,19 +100,26 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    * - `svgFill="#purple.10"` // purple fill with 10% opacity
    * - `svgFill="#danger"` // danger theme color
    * - `svgFill="rgb(255 128 0)"` // custom RGB color
+   * - `svgFill="hsl(200 100% 50%)"` // HSL color
+   * - `svgFill="okhsl(200 100% 50%)"` // OKHSL color
+   * - `svgFill="oklch(0.7 0.15 200)"` // OKLCH color
    * - `svgFill="currentColor"` // inherit from parent color
    */
-  svgFill?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | (string & {});
+  svgFill?: ColorValue;
   /**
    * Set the text (current) color of the element. Shortcut for `color` with enhanced support for Tasty color tokens and syntaxes.
    *
    * Examples:
    * - `color="#purple"` // purple text color
    * - `color="#danger.6"` // danger color with 60% opacity
+   * - `color="rgb(255 128 0)"` // custom RGB color
+   * - `color="hsl(200 100% 50%)"` // HSL color
+   * - `color="okhsl(200 100% 50%)"` // OKHSL color
+   * - `color="oklch(0.7 0.15 200)"` // OKLCH color
    * - `color="red"` // CSS color name
    * - `color={true}` // currentColor
    */
-  color?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | boolean | string;
+  color?: ColorValue | boolean;
   /**
    * The fade style applies gradient-based fading masks to the edges of an element. Replaces complex CSS mask gradients with a simple, declarative API.
    *
@@ -128,25 +143,22 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    */
   fade?: 'top' | 'right' | 'bottom' | 'left' | string;
   /**
-   * @deprecated Use `scrollbar` style instead.
-   * Whether the element has styled scrollbar.
-   */
-  styledScrollbar?: boolean;
-  /**
-   * The scrollbar style provides a powerful and flexible way to control the appearance and behavior of scrollbars across browsers. It supports custom sizing, color, visibility, and advanced modifiers for modern UI needs.
+   * Scrollbar styling using standard CSS properties (`scrollbar-width`, `scrollbar-color`, `scrollbar-gutter`).
    *
-   * Syntax: `[modifiers] [size] [color1] [color2] [color3]`
+   * Syntax: `[width] [modifiers...] [thumb-color] [track-color]`
    *
-   * Modifiers: `thin`, `none`, `auto`, `stable`, `both-edges`, `always`, `styled`
+   * Width values: `thin` (default), `auto`, `none`
+   * Modifiers: `stable`, `both-edges`, `always`
    *
    * Examples:
-   * - `scrollbar={true}` // thin scrollbar, default color
-   * - `scrollbar="thin 10px #purple.40 #dark.04"`
-   * - `scrollbar="styled 12px #purple.40 #dark.04 #white.10"`
+   * - `scrollbar={true}` // thin scrollbar, default colors
+   * - `scrollbar="thin #purple.40 #dark.04"`
+   * - `scrollbar="auto #red #blue"`
    * - `scrollbar="none"`
-   * - `scrollbar="always 8px #primary.50 #white.02"`
+   * - `scrollbar="always #primary.50 #white.02"`
+   * - `scrollbar="thin stable #red #blue"`
    */
-  scrollbar?: string | boolean | number;
+  scrollbar?: string | boolean;
   /**
    * Set font weight for bold texts.
    */
@@ -354,11 +366,13 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
   /**
    * The preset style sets base text settings according to named presets. Affects `font-size`, `line-height`, `letter-spacing`, `font-weight`, and `text-transform`.
    *
+   * Syntax: `name`, `name / modifier`, or `modifier` (shorthand, name defaults to `inherit`).
    * Preset names are project-specific. Augment `TastyPresetNames` to register them for autocomplete.
    *
    * Examples:
    * - `preset="h1"` // heading 1 typography
-   * - `preset="h2 strong"` // bold heading 2
+   * - `preset="h2 / strong"` // bold heading 2
+   * - `preset="bold"` // inherit with bold (shorthand)
    * - `preset="t3"` // text size 3
    */
   preset?: PresetName | (string & {});
@@ -438,6 +452,24 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    * - `'@properties': { '#theme': { initialValue: 'purple' } }` // syntax: '<color>' is auto-set
    */
   '@properties'?: Record<string, PropertyDefinition>;
+  /**
+   * Local @font-face definitions for this component.
+   * Keys are font-family names, values are descriptors or arrays of descriptors
+   * (for multiple weights/styles of the same family).
+   *
+   * Examples:
+   * - `'@fontFace': { Icons: { src: 'url("/fonts/icons.woff2") format("woff2")', fontDisplay: 'block' } }`
+   * - `'@fontFace': { 'Brand Sans': [{ src: '...', fontWeight: 400 }, { src: '...', fontWeight: 700 }] }`
+   */
+  '@fontFace'?: Record<string, FontFaceInput>;
+  /**
+   * Local @counter-style definitions for this component.
+   * Keys are counter-style names, values are descriptor objects.
+   *
+   * Examples:
+   * - `'@counterStyle': { thumbs: { system: 'cyclic', symbols: '"👍"', suffix: '" "' } }`
+   */
+  '@counterStyle'?: Record<string, CounterStyleDescriptors>;
   /**
    * Apply one or more predefined style recipes by name.
    * Recipes are defined globally via `configure({ recipes: { ... } })`.
@@ -458,7 +490,7 @@ type SuffixForSelector = '&' | '.' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | '
 type Selector = `${SuffixForSelector}${string}`;
 type NotSelector = Exclude<string, Selector | keyof StylesInterface>;
 /** Special style keys that should not be wrapped in StyleValue/StyleValueStateMap */
-type SpecialStyleKeys = '@keyframes' | '@properties' | 'recipe';
+type SpecialStyleKeys = '@keyframes' | '@properties' | '@fontFace' | '@counterStyle' | 'recipe';
 type StylesWithoutSelectors = { [key in keyof StylesInterface as key extends SpecialStyleKeys ? never : key]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]> };
 /**
  * Index signature for recipe-specific arbitrary keys.
@@ -476,16 +508,20 @@ type RecipeIndexSignature = Record<string, StyleValue<string | number | boolean
 type RecipeStyles = StylesWithoutSelectors & RecipeIndexSignature & {
   '@keyframes'?: StylesInterface['@keyframes'];
   '@properties'?: StylesInterface['@properties'];
+  '@fontFace'?: StylesInterface['@fontFace'];
+  '@counterStyle'?: StylesInterface['@counterStyle'];
 };
 /** Special properties that are not regular style values */
 interface SpecialStyleProperties {
   '@keyframes'?: StylesInterface['@keyframes'];
   '@properties'?: StylesInterface['@properties'];
+  '@fontFace'?: StylesInterface['@fontFace'];
+  '@counterStyle'?: StylesInterface['@counterStyle'];
   recipe?: StylesInterface['recipe'];
 }
 /** Index signature for arbitrary style keys (sub-elements, CSS variables, etc.) */
 interface StylesIndexSignature {
-  [key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles | false | StylesInterface['@keyframes'] | StylesInterface['@properties'];
+  [key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles | false | StylesInterface['@keyframes'] | StylesInterface['@properties'] | StylesInterface['@fontFace'] | StylesInterface['@counterStyle'];
   /**
    * Selector combinator: `undefined` (descendant, default), `'>'` (child), `'+'` (adjacent), `'~'` (sibling).
    * Can chain with capitalized names: `'> Body > Row >'`. Spaces required around combinators.
@@ -493,6 +529,19 @@ interface StylesIndexSignature {
   $?: string;
 }
 type Styles = StylesWithoutSelectors & SpecialStyleProperties & StylesIndexSignature;
+/**
+ * Value type for design tokens passed to `configure({ tokens })`.
+ * Can be a direct value or a state map for responsive/theme-aware tokens.
+ */
+type ConfigTokenValue = string | number | boolean | Record<string, string | number | boolean | undefined | null | '@inherit'>;
+/**
+ * Design tokens injected as CSS custom properties on `:root`.
+ * Keys must start with `$` (value tokens) or `#` (color tokens).
+ *
+ * - `$name` keys become `--name` CSS custom properties
+ * - `#name` keys become `--name-color` and `--name-color-{colorSpace}` properties
+ */
+type ConfigTokens = Record<`$${string}` | `#${string}`, ConfigTokenValue>;
 //#endregion
-export { NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames };
+export { ConfigTokenValue, ConfigTokens, NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames };
 //# sourceMappingURL=types.d.ts.map