@styleframe/theme 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @styleframe/theme
 
+## 2.2.0
+
+### Minor Changes
+
+- [#68](https://github.com/styleframe-dev/styleframe/pull/68) [`653d1fc`](https://github.com/styleframe-dev/styleframe/commit/653d1fc4e8fb80f8c3371e728ffc962cf1fb1cec) Thanks [@alexgrozav](https://github.com/alexgrozav)! - feat: add support for dot notation in variable names
+
+### Patch Changes
+
+- Updated dependencies [[`653d1fc`](https://github.com/styleframe-dev/styleframe/commit/653d1fc4e8fb80f8c3371e728ffc962cf1fb1cec)]:
+  - @styleframe/core@2.3.0
+
 ## 2.1.0
 
 ### Minor Changes

package/dist/theme.d.ts

@@ -41,7 +41,7 @@ import { Variable } from '@styleframe/core';
  * });
  * ```
  */
-export declare function createUseVariable<PropertyName extends string, PropertyType = TokenValue, Delimiter extends string = "--", Defaults extends Record<string, PropertyType> = Record<string, PropertyType>, MergeDefaults extends boolean = false>(propertyName: PropertyName, { defaults, mergeDefaults, transform, delimiter, }?: {
+export declare function createUseVariable<PropertyName extends string, PropertyType = TokenValue, Delimiter extends string = ".", Defaults extends Record<string, PropertyType> = Record<string, PropertyType>, MergeDefaults extends boolean = false>(propertyName: PropertyName, { defaults, mergeDefaults, transform, delimiter, }?: {
     defaults?: Defaults;
     mergeDefaults?: MergeDefaults;
     transform?: (value: PropertyType) => TokenValue;
@@ -180,17 +180,17 @@ export declare const defaultScaleValues: {
  * @example
  * ExportKeys<"example-property", { "default": "...", "variant": "..." }> -> {
  * 		"exampleProperty": Variable<'example-property'>,
- * 		"examplePropertyVariant": Variable<'example-property--variant'>,
+ * 		"examplePropertyVariant": Variable<'example-property.variant'>,
  * }
  */
-export declare type ExportKeys<Prefix extends string, T extends Record<string, unknown>, Separator extends string = "--"> = {
+export declare type ExportKeys<Prefix extends string, T extends Record<string, unknown>, Separator extends string = "."> = {
     [K in keyof T as CamelCase<ExportKeyVariableName<Prefix, K, Separator>>]: Variable<ExportKeyVariableName<Prefix, K, Separator>>;
 };
 
 /**
  * Helper type to compute the variable name for a given prefix and key
  */
-declare type ExportKeyVariableName<Prefix extends string, K, Separator extends string = "--"> = K extends "default" ? Prefix : `${Prefix}${Separator}${K & (string | number)}`;
+declare type ExportKeyVariableName<Prefix extends string, K, Separator extends string = "."> = K extends "default" ? Prefix : `${Prefix}${Separator}${K & (string | number)}`;
 
 export declare function isKeyReferenceValue(value: unknown): value is `@${string}`;
 
@@ -210,15 +210,15 @@ export declare function isKeyReferenceValue(value: unknown): value is `@${string
  * });
  *
  * const {
- *   borderColorPrimary, // Variable<'border-color--primary'>
- *   borderColorSecondary, // Variable<'border-color--secondary'>
+ *   borderColorPrimary, // Variable<'border-color.primary'>
+ *   borderColorSecondary, // Variable<'border-color.secondary'>
  * } = useBorderColor(s, {
  * 	 primary: ref(colorPrimary),
  *   secondary: ref(colorSecondary),
  * });
  * ```
  */
-export declare const useBorderColor: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-color", T, "--">;
+export declare const useBorderColor: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-color", T, ".">;
 
 /**
  * Create a set of border-radius variables for use in a Styleframe instance.
@@ -232,9 +232,9 @@ export declare const useBorderColor: <T extends Record<string, TokenValue> = Rec
  *
  * const {
  *   borderRadius, // Variable<'border-radius'>
- *   borderRadiusSm, // Variable<'border-radius--sm'>
- *   borderRadiusMd, // Variable<'border-radius--md'>
- *   borderRadiusLg, // Variable<'border-radius--lg'>
+ *   borderRadiusSm, // Variable<'border-radius.sm'>
+ *   borderRadiusMd, // Variable<'border-radius.md'>
+ *   borderRadiusLg, // Variable<'border-radius.lg'>
  * } = useBorderRadius(s, {
  *   default: "0.25rem",
  *   sm: "0.125rem",
@@ -243,7 +243,7 @@ export declare const useBorderColor: <T extends Record<string, TokenValue> = Rec
  * });
  * ```
  */
-export declare const useBorderRadius: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-radius", T, "--">;
+export declare const useBorderRadius: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-radius", T, ".">;
 
 /**
  * Create a set of border-style variables for use in a Styleframe instance.
@@ -287,7 +287,7 @@ export declare const useBorderStyle: <T extends Record<string, TokenValue> = {
     readonly groove: "groove";
     readonly inset: "inset";
     readonly outset: "outset";
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-style", T, "--">;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-style", T, ".">;
 
 /**
  * Create a set of border-width variables for use in a Styleframe instance.
@@ -320,7 +320,7 @@ export declare const useBorderWidth: <T extends Record<string, TokenValue> = {
     thin: string;
     medium: string;
     thick: string;
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-width", T, "--">;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"border-width", T, ".">;
 
 /**
  * Create a set of box-shadow variables for use in a Styleframe instance.
@@ -337,9 +337,9 @@ export declare const useBorderWidth: <T extends Record<string, TokenValue> = {
  *
  * const {
  *   boxShadow, // Variable<'box-shadow'>
- *   boxShadowSm, // Variable<'box-shadow--sm'>
- *   boxShadowMd, // Variable<'box-shadow--md'>
- *   boxShadowLg, // Variable<'box-shadow--lg'>
+ *   boxShadowSm, // Variable<'box-shadow.sm'>
+ *   boxShadowMd, // Variable<'box-shadow.md'>
+ *   boxShadowLg, // Variable<'box-shadow.lg'>
  * } = useBoxShadow(s, {
  *   default: '@md',
  *   sm: css`0 1px 2px oklcha(${ref(boxShadowColor)} / 0.05)`,
@@ -359,7 +359,7 @@ export declare const useBoxShadow: <T extends Record<string, TokenValue> = {
     "2xl": string;
     inner: string;
     ring: string;
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"box-shadow", T, "--">;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"box-shadow", T, ".">;
 
 /**
  * Create a set of breakpoint variables for use in a Styleframe instance.
@@ -372,11 +372,11 @@ export declare const useBoxShadow: <T extends Record<string, TokenValue> = {
  * const s = styleframe();
  *
  * const {
- *   breakpointXs, // Variable<'breakpoint--xs'>
- *   breakpointSm, // Variable<'breakpoint--sm'>
- *   breakpointMd, // Variable<'breakpoint--md'>
- *   breakpointLg, // Variable<'breakpoint--lg'>
- *   breakpointXl, // Variable<'breakpoint--xl'>
+ *   breakpointXs, // Variable<'breakpoint.xs'>
+ *   breakpointSm, // Variable<'breakpoint.sm'>
+ *   breakpointMd, // Variable<'breakpoint.md'>
+ *   breakpointLg, // Variable<'breakpoint.lg'>
+ *   breakpointXl, // Variable<'breakpoint.xl'>
  * } = useBreakpoint(s, {
  *   xs: 0,
  *   sm: 576,
@@ -392,7 +392,7 @@ export declare const useBreakpoint: <T extends Record<string, TokenValue> = {
     md: number;
     lg: number;
     xl: number;
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"breakpoint", T, "--">;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"breakpoint", T, ".">;
 
 /**
  * Create a set of color variables for use in a Styleframe instance.
@@ -405,15 +405,15 @@ export declare const useBreakpoint: <T extends Record<string, TokenValue> = {
  * const s = styleframe();
  *
  * const {
- *   colorPrimary, // Variable<'color--primary'>
- *   colorSecondary, // Variable<'color--secondary'>
+ *   colorPrimary, // Variable<'color.primary'>
+ *   colorSecondary, // Variable<'color.secondary'>
  * } = useColors(s, {
  *   primary: "#007bff",
  *   secondary: "#6c757d",
  * });
  * ```
  */
-export declare const useColor: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"color", T, "--">;
+export declare const useColor: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"color", T, ".">;
 
 /**
  * Create a set of lightness levels for a color variable.
@@ -425,12 +425,12 @@ export declare const useColor: <T extends Record<string, TokenValue> = Record<st
  *
  * const s = styleframe();
  *
- * const colorPrimary = s.variable("color--primary", "#007bff");
+ * const { colorPrimary } = useColor(s, { primary: "#007bff" });
  *
  * const {
- *   colorPrimary100, // Variable<'color--primary-100'>
- *   colorPrimary200, // Variable<'color--primary-200'>
- *   colorPrimary300, // Variable<'color--primary-300'>
+ *   colorPrimary100, // Variable<'color.primary-100'>
+ *   colorPrimary200, // Variable<'color.primary-200'>
+ *   colorPrimary300, // Variable<'color.primary-300'>
  *   ...
  * } = useColorLightnessLevels(s, colorPrimary, {
  *   100: 10,
@@ -448,12 +448,12 @@ export declare function useColorLightness<Name extends string, T extends Record<
  * @usage
  * const s = styleframe();
  *
- * const colorPrimary = s.variable("color--primary", "#007bff");
+ * const { colorPrimary } = useColor(s, { primary: "#007bff" });
  *
  * const {
- *   colorPrimaryShade50, // Variable<'color--primary-shade-50'>
- *   colorPrimaryShade100, // Variable<'color--primary-shade-100'>
- *   colorPrimaryShade150, // Variable<'color--primary-shade-150'>
+ *   colorPrimaryShade50, // Variable<'color.primary-shade-50'>
+ *   colorPrimaryShade100, // Variable<'color.primary-shade-100'>
+ *   colorPrimaryShade150, // Variable<'color.primary-shade-150'>
  *   ...
  * } = useColorShadeLevels(s, colorPrimary, {
  *   50: 5,
@@ -471,12 +471,12 @@ export declare function useColorShade<Name extends string, T extends Record<stri
  * @usage
  * const s = styleframe();
  *
- * const colorPrimary = s.variable("color--primary", "#007bff");
+ * const { colorPrimary } = useColor(s, { primary: "#007bff" });
  *
  * const {
- *   colorPrimaryTint50, // Variable<'color--primary-tint-50'>
- *   colorPrimaryTint100, // Variable<'color--primary-tint-100'>
- *   colorPrimaryTint150, // Variable<'color--primary-tint-150'>
+ *   colorPrimaryTint50, // Variable<'color.primary-tint-50'>
+ *   colorPrimaryTint100, // Variable<'color.primary-tint-100'>
+ *   colorPrimaryTint150, // Variable<'color.primary-tint-150'>
  *   ...
  * } = useColorTintLevels(s, colorPrimary, {
  *   50: 5,
@@ -500,8 +500,8 @@ export declare function useColorTint<Name extends string, T extends Record<strin
  *
  * const {
  *   fontFamily, // Variable<'font-family'>
- *   fontFamilyPrint, // Variable<'font-family--print'>
- *   fontFamilyMono, // Variable<'font-family--mono'>
+ *   fontFamilyPrint, // Variable<'font-family.print'>
+ *   fontFamilyMono, // Variable<'font-family.mono'>
  * } = useFontFamily(s, {
  *   default: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
  *   print: "'Georgia', 'Times New Roman', 'Times', serif",
@@ -514,7 +514,7 @@ export declare const useFontFamily: <T extends Record<string, TokenValue> = {
     base: string;
     print: string;
     mono: string;
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"font-family", T, "--">;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"font-family", T, ".">;
 
 /**
  * Create a set of font-size variables for use in a Styleframe instance.
@@ -528,9 +528,9 @@ export declare const useFontFamily: <T extends Record<string, TokenValue> = {
  *
  * const {
  *   fontSize, // Variable<'font-size'>
- *   fontSizeSm, // Variable<'font-size--sm'>
- *   fontSizeMd, // Variable<'font-size--md'>
- *   fontSizeLg, // Variable<'font-size--lg'>
+ *   fontSizeSm, // Variable<'font-size.sm'>
+ *   fontSizeMd, // Variable<'font-size.md'>
+ *   fontSizeLg, // Variable<'font-size.lg'>
  * } = useFontSize(s, {
  *   default: "1rem",
  *   sm: "0.875rem",
@@ -541,7 +541,7 @@ export declare const useFontFamily: <T extends Record<string, TokenValue> = {
  */
 export declare const useFontSize: <T extends Record<string, TokenValue> = {
     default: string;
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"font-size", T, "--">;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"font-size", T, ".">;
 
 /**
  * Create a set of font-weight variables for use in a Styleframe instance.
@@ -591,7 +591,7 @@ export declare const useFontWeight: <T extends Record<string, TokenValue> = {
     lighter: string;
     bolder: string;
     inherit: string;
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"font-weight", T, "--">;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"font-weight", T, ".">;
 
 /**
  * Create a set of letter-spacing variables for use in a Styleframe instance.
@@ -627,7 +627,7 @@ export declare const useLetterSpacing: <T extends Record<string, TokenValue> = {
     normal: string;
     wide: string;
     wider: string;
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"letter-spacing", T, "--">;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"letter-spacing", T, ".">;
 
 /**
  * Create a set of line-height variables for use in a Styleframe instance.
@@ -663,7 +663,7 @@ export declare const useLineHeight: <T extends Record<string, TokenValue> = {
     normal: number;
     relaxed: number;
     loose: number;
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"line-height", T, "--">;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"line-height", T, ".">;
 
 /**
  * Create a font-size scale for use in a Styleframe instance.
@@ -681,11 +681,11 @@ export declare const useLineHeight: <T extends Record<string, TokenValue> = {
  * const scalePowers = useScalePowers(s, scale, defaultScalePowerValues);
  *
  * const {
- *   fontSizeXs, // Variable<'font-size--xs'>
- *   fontSizeSm, // Variable<'font-size--sm'>
- *   fontSizeMd, // Variable<'font-size--md'>
- *   fontSizeLg, // Variable<'font-size--lg'>
- *   fontSizeXl, // Variable<'font-size--xl'>
+ *   fontSizeXs, // Variable<'font-size.xs'>
+ *   fontSizeSm, // Variable<'font-size.sm'>
+ *   fontSizeMd, // Variable<'font-size.md'>
+ *   fontSizeLg, // Variable<'font-size.lg'>
+ *   fontSizeXl, // Variable<'font-size.xl'>
  * } = useMultiplier(s, fontSize, {
  *   xs: scalePowers[-2],
  *   sm: scalePowers[-1],
@@ -740,7 +740,7 @@ export declare const useScale: <T extends Record<string, TokenValue> = {
     readonly "augmented-fourth": 1.414;
     readonly "perfect-fifth": 1.5;
     readonly golden: 1.618;
-}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"scale", T, "--">;
+}>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"scale", T, ".">;
 
 export declare function useScalePowers<T extends readonly number[]>(s: Styleframe, scale: Variable | Reference, powers?: T): Record<number, TokenValue>;
 
@@ -756,9 +756,9 @@ export declare function useScalePowers<T extends readonly number[]>(s: Stylefram
  *
  * const {
  *   spacing, // Variable<'spacing'>
- *   spacingSm, // Variable<'spacing--sm'>
- *   spacingMd, // Variable<'spacing--md'>
- *   spacingLg, // Variable<'spacing--lg'>
+ *   spacingSm, // Variable<'spacing.sm'>
+ *   spacingMd, // Variable<'spacing.md'>
+ *   spacingLg, // Variable<'spacing.lg'>
  * } = useSpacing(s, {
  *   default: "1rem",
  *   sm: "0.875rem",
@@ -767,6 +767,6 @@ export declare function useScalePowers<T extends readonly number[]>(s: Stylefram
  * });
  * ```
  */
-export declare const useSpacing: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"spacing", T, "--">;
+export declare const useSpacing: <T extends Record<string, TokenValue> = Record<string, TokenValue>>(s: Styleframe, tokens?: T | undefined) => ExportKeys<"spacing", T, ".">;
 
 export { }