@styleframe/theme 2.5.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @styleframe/theme
 
+## 3.0.0
+
+### Major Changes
+
+- [#117](https://github.com/styleframe-dev/styleframe/pull/117) [`ffe6764`](https://github.com/styleframe-dev/styleframe/commit/ffe6764a2e6c84d5b3cfdf431bf11f17a3f3f118) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Introduce global Styleframe single-instance architecture. Extension files (`*.styleframe.ts`) now share the same instance created in `styleframe.config.ts` instead of creating independent instances. This is a breaking change that affects how styles are imported and composed across files.
+
+### Minor Changes
+
+- [#81](https://github.com/styleframe-dev/styleframe/pull/81) [`266f961`](https://github.com/styleframe-dev/styleframe/commit/266f96143e9ffb47e0e6326d0e5e7cc9d974ab83) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Badge recipe with createUseRecipe factory
+  - Add `useBadgeRecipe` and `useBadgeRecipeBase` recipe composables with color, variant, and size variants
+  - Add `createUseRecipe` factory utility for building reusable, customizable recipe presets
+  - Add `3xs` and `2xs` font-size values
+
+### Patch Changes
+
+- Updated dependencies [[`266f961`](https://github.com/styleframe-dev/styleframe/commit/266f96143e9ffb47e0e6326d0e5e7cc9d974ab83), [`ffe6764`](https://github.com/styleframe-dev/styleframe/commit/ffe6764a2e6c84d5b3cfdf431bf11f17a3f3f118)]:
+  - @styleframe/core@3.0.0
+
 ## 2.5.0
 
 ### Minor Changes

package/dist/theme.d.ts

@@ -1,5 +1,6 @@
 import { CamelCase } from 'scule';
 import { ModifierFactory } from '@styleframe/core';
+import { Recipe } from '@styleframe/core';
 import { Reference } from '@styleframe/core';
 import { Styleframe } from '@styleframe/core';
 import { TokenValue } from '@styleframe/core';
@@ -7,6 +8,7 @@ import { UtilityAutogenerateFn } from '@styleframe/core';
 import { UtilityCallbackFn } from '@styleframe/core';
 import { UtilityCreatorFn } from '@styleframe/core';
 import { Variable } from '@styleframe/core';
+import { VariantDeclarationsBlock } from '@styleframe/core';
 
 /**
  * Default align-content utility values matching Tailwind CSS.
@@ -430,8 +432,12 @@ export declare interface CreateMultiplierAutogenerateOptions {
     fallback?: string;
     /** Optional key replacer function for non-multiplier values */
     replacer?: (key: string) => string;
+    /** Optional namespace for token references (e.g., "spacing" makes "@sm" resolve to ref("spacing.sm")) */
+    namespace?: string | string[];
 }
 
+export declare function createUseRecipe<Name extends string, Variants extends Record<string, Record<string, VariantDeclarationsBlock>>, Config extends RecipeConfig<Variants>>(name: Name, defaults: Config): (s: Styleframe, options?: DeepPartial<Config>) => Recipe<Name, Variants>;
+
 /**
  * Creates a composable function for spacing-based CSS utilities with multiplier support.
  *
@@ -475,6 +481,11 @@ export declare interface CreateUseSpacingUtilityOptions<Defaults extends Record<
      * Only used when baseVariable is a string. Defaults to "1rem".
      */
     fallback?: string;
+    /**
+     * Optional namespace for token references in autogenerate.
+     * When set, "@sm" in array syntax resolves to ref("namespace.sm").
+     */
+    namespace?: string;
 }
 
 /**
@@ -512,6 +523,11 @@ export declare interface CreateUseUtilityOptions<Defaults extends Record<string,
     defaults?: Defaults;
     /** Whether to merge user values with defaults (true) or replace them (false) */
     mergeDefaults?: boolean;
+    /**
+     * Optional namespace for token references in autogenerate.
+     * When set, "@sm" in array syntax resolves to ref("namespace.sm").
+     */
+    namespace?: string | string[];
 }
 
 /**
@@ -602,6 +618,10 @@ export declare const cursorValues: {
     "zoom-out": string;
 };
 
+export declare type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
 declare type DefaultBorderRadius = typeof borderRadiusValues;
 
 declare type DefaultBorderStyle = typeof borderStyleValues;
@@ -861,6 +881,8 @@ export declare const fontFamilyValues: {
 
 export declare const fontSizeValues: {
     default: string;
+    "3xs": string;
+    "2xs": string;
     xs: string;
     sm: string;
     md: string;
@@ -1231,6 +1253,20 @@ export declare const positionValues: {
     sticky: string;
 };
 
+export declare type RecipeConfig<Variants extends Record<string, Record<string, VariantDeclarationsBlock>> = Record<string, Record<string, VariantDeclarationsBlock>>> = {
+    base?: VariantDeclarationsBlock;
+    variants?: Variants;
+    defaultVariants?: {
+        [K in keyof Variants]?: keyof Variants[K] & string;
+    };
+    compoundVariants?: Array<{
+        match: {
+            [K in keyof Variants]?: keyof Variants[K] & string;
+        };
+        css: VariantDeclarationsBlock;
+    }>;
+};
+
 /**
  * Default resize utility values matching Tailwind CSS.
  */
@@ -1724,6 +1760,151 @@ export declare const useBackgroundSizeUtility: <T extends Record<string, TokenVa
  */
 export declare const useBackgroundUtility: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, values?: T | undefined, modifiers?: ModifierFactory[]) => UtilityCreatorFn;
 
+/**
+ * Full badge recipe with color, variant, and size variants.
+ * Includes all Nuxt UI-inspired styling options.
+ */
+export declare const useBadgeRecipe: (s: Styleframe, options?: DeepPartial<    {
+base: {
+display: string;
+alignItems: string;
+fontWeight: string;
+borderWidth: string;
+borderStyle: string;
+borderColor: string;
+};
+variants: {
+color: {
+primary: {};
+secondary: {};
+success: {};
+info: {};
+warning: {};
+danger: {};
+};
+variant: {
+solid: {};
+outline: {};
+soft: {};
+subtle: {};
+};
+size: {
+xs: {
+fontSize: string;
+lineHeight: string;
+paddingTop: string;
+paddingBottom: string;
+paddingLeft: string;
+paddingRight: string;
+gap: string;
+borderRadius: string;
+};
+sm: {
+fontSize: string;
+lineHeight: string;
+paddingTop: string;
+paddingBottom: string;
+paddingLeft: string;
+paddingRight: string;
+gap: string;
+borderRadius: string;
+};
+md: {
+fontSize: string;
+paddingTop: string;
+paddingBottom: string;
+paddingLeft: string;
+paddingRight: string;
+gap: string;
+borderRadius: string;
+};
+lg: {
+fontSize: string;
+paddingTop: string;
+paddingBottom: string;
+paddingLeft: string;
+paddingRight: string;
+gap: string;
+borderRadius: string;
+};
+xl: {
+fontSize: string;
+paddingTop: string;
+paddingBottom: string;
+paddingLeft: string;
+paddingRight: string;
+gap: string;
+borderRadius: string;
+};
+};
+};
+compoundVariants: ({
+match: {
+color: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+variant: "solid";
+};
+css: {
+background: string;
+color: string;
+borderColor?: undefined;
+};
+} | {
+match: {
+color: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+variant: "outline";
+};
+css: {
+color: string;
+borderColor: string;
+background?: undefined;
+};
+} | {
+match: {
+color: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+variant: "soft";
+};
+css: {
+background: string;
+color: string;
+borderColor?: undefined;
+};
+} | {
+match: {
+color: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+variant: "subtle";
+};
+css: {
+background: string;
+color: string;
+borderColor: string;
+};
+})[];
+defaultVariants: {
+color: "primary";
+variant: "solid";
+size: "sm";
+};
+}> | undefined) => Recipe<"badge", Record<string, Record<string, VariantDeclarationsBlock>>>;
+
+/**
+ * Base badge styling - core appearance without variants.
+ * Use this when you want to define your own custom variants.
+ */
+export declare const useBadgeRecipeBase: (s: Styleframe, options?: DeepPartial<    {
+base: {
+display: string;
+alignItems: string;
+fontWeight: string;
+fontSize: string;
+lineHeight: string;
+paddingTop: string;
+paddingBottom: string;
+paddingLeft: string;
+paddingRight: string;
+borderRadius: string;
+};
+}> | undefined) => Recipe<"badge", Record<string, Record<string, VariantDeclarationsBlock>>>;
+
 /**
  * Create blur utility classes.
  *
@@ -2864,6 +3045,8 @@ export declare const useFontFamilyUtility: <T extends Record<string, TokenValue>
  */
 export declare const useFontSize: <T extends Record<string, TokenValue> = {
     default: string;
+    "3xs": string;
+    "2xs": string;
     xs: string;
     sm: string;
     md: string;