styleframe 3.1.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/CHANGELOG.md +136 -0
  2. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,141 @@
1
1
  # styleframe
2
2
 
3
+ ## 3.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#154](https://github.com/styleframe-dev/styleframe/pull/154) [`352f10c`](https://github.com/styleframe-dev/styleframe/commit/352f10c958ac12b7dde245657f3ae8d548e9378b) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Update color palette for accessibility and show hex values in swatches
8
+ - Revise base color values to OKLCH-aligned accessible colors for both light and dark modes
9
+ - Remove per-color `text.on-*` tokens in favor of a single `colorTextInverted` reference
10
+ - Display computed hex values inside color swatch previews
11
+ - Add `color.<name>` labels below each swatch with monospace styling
12
+
13
+ - [#149](https://github.com/styleframe-dev/styleframe/pull/149) [`b9e54ed`](https://github.com/styleframe-dev/styleframe/commit/b9e54eda1acbf1b1b256f96bf6306dc300602618) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Flatten design tokens preset result and rename variable composables
14
+ - Rename all variable composables from `use{Name}` to `use{Name}DesignTokens` for clearer naming
15
+ - Flatten `useDesignTokensPreset` result so variables are directly destructurable instead of nested by domain
16
+ - Add OKLCH gamut mapping utilities for color processing
17
+ - Add color reference value support so colors can reference generated shade/tint variants
18
+ - Add border, transition, and animation utility implementations
19
+
20
+ - [#155](https://github.com/styleframe-dev/styleframe/pull/155) [`cc4f170`](https://github.com/styleframe-dev/styleframe/commit/cc4f170c56ad2e246b94ab4d64b7f6c3097c7223) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Refactor recipes, improve modifier at-rule support, and forward variables through modifier factories
21
+ - Refactor recipes and utilities with improved color theming composables
22
+ - Add at-rule support for modifiers (e.g. media preference modifiers)
23
+ - Forward variables and children through all modifier factory functions
24
+ - Restructure docs for components, utilities, and modifiers into composable subdirectories
25
+ - Add Button composable recipe documentation
26
+ - Update plugin scanner for improved recipe handling
27
+
28
+ - [#151](https://github.com/styleframe-dev/styleframe/pull/151) [`6a18eeb`](https://github.com/styleframe-dev/styleframe/commit/6a18eeb5e36d9f66ef48f2e107d2b6ff65b2a792) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Rename colorLightness to colorLevel across theme, docs, and storybook
29
+ - Rename `colorLightness` value to `colorLevel` for clearer terminology
30
+ - Rename `useColorLightnessDesignTokens` to `useColorLevelDesignTokens`
31
+ - Update all color-related design token references from lightness to level
32
+
33
+ ### Patch Changes
34
+
35
+ - [#152](https://github.com/styleframe-dev/styleframe/pull/152) [`d7f4405`](https://github.com/styleframe-dev/styleframe/commit/d7f440585c942842b20bd97e2781131d28c3ee08) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Reorganize composable documentation into dedicated subdirectories
36
+ - Move design token, utility, and modifier composable docs into `02.composables/` subdirectories
37
+ - Update content to use "composable" terminology consistently
38
+ - Add animations composable documentation page
39
+ - Split transitions-animation into separate transitions and animations pages
40
+
41
+ - Updated dependencies [[`cc4f170`](https://github.com/styleframe-dev/styleframe/commit/cc4f170c56ad2e246b94ab4d64b7f6c3097c7223)]:
42
+ - @styleframe/core@3.2.0
43
+ - @styleframe/transpiler@3.1.0
44
+ - @styleframe/plugin@3.2.0
45
+
46
+ ## 3.2.0
47
+
48
+ ### Minor Changes
49
+
50
+ - [#145](https://github.com/styleframe-dev/styleframe/pull/145) [`1597105`](https://github.com/styleframe-dev/styleframe/commit/1597105d55c1dd43adc6ec146858770a830dc1fb) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add duration design tokens for consistent animation and transition timing
51
+ - Add `useDuration` composable with semantic duration scale from `instant` (0ms) through `slowest` (1000ms)
52
+ - Add `durationValues` default token values: instant, fastest, faster, fast, normal, slow, slower, slowest
53
+ - Register `duration` domain in `useDesignTokensPreset` with full theming and override support
54
+ - Add `duration` namespace to `useTransitionDurationUtility` and `useTransitionDelayUtility` for `@token` references
55
+ - Replace hardcoded `150ms` with `@duration.fast` in `useTransitionPropertyUtility`
56
+
57
+ - [#129](https://github.com/styleframe-dev/styleframe/pull/129) [`2610041`](https://github.com/styleframe-dev/styleframe/commit/2610041beb03a8afc8de17af8857b9931f3359b0) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add custom utility syntax support and separate class name generation from CSS escaping
58
+ - Extract `defaultUtilitySelectorFn` to `@styleframe/core` returning raw class names; add `classNameToCssSelector` for consistent CSS escaping
59
+ - Add `ScannerUtilitiesConfig` with pluggable `pattern`, `parse`, and `selector` functions for custom utility naming conventions
60
+ - Thread custom utilities config through extractor, matcher, scanner, and plugin layers
61
+
62
+ - [#146](https://github.com/styleframe-dev/styleframe/pull/146) [`bff61d1`](https://github.com/styleframe-dev/styleframe/commit/bff61d104eca9b1f2a72911593abf0a7fc90ec34) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Close 416px breakpoint gap by adding 768px md breakpoint
63
+ - Shift default breakpoint scale to align with industry standards (Tailwind, Bootstrap, Chakra)
64
+ - Change md from 992px to 768px to cover the tablet range
65
+ - Shift lg to 992px, xl to 1200px, and add new 2xl at 1440px
66
+
67
+ - [#135](https://github.com/styleframe-dev/styleframe/pull/135) [`228b0c0`](https://github.com/styleframe-dev/styleframe/commit/228b0c0bc36332d371dd8a7ca430ebe2be3ac046) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Implement importree-based HMR with selective cache invalidation
68
+ - Replace full-reload HMR with importree-powered dependency graph for selective Jiti cache invalidation
69
+ - Use persistent shared Jiti instance with `moduleCache: true` so unchanged dependencies stay cached across reloads
70
+ - Add `dependency-graph` module that builds merged forward/reverse import trees for cross-entry dependency tracking
71
+ - Export `createSharedJiti`, `clearJitiCache`, and `clearAllJitiCache` from `@styleframe/loader`
72
+ - Remove `resolve.alias` option in favor of automatic dependency detection via importree
73
+
74
+ - [#137](https://github.com/styleframe-dev/styleframe/pull/137) [`8d6e731`](https://github.com/styleframe-dev/styleframe/commit/8d6e7316dff6ebd0ed5cc29a4061c50786e9e8f5) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add `resolve.alias` option to plugin for custom path resolution
75
+ - Add `resolve.alias` option to plugin types for configuring module path alias mappings
76
+ - Resolve relative alias paths to absolute paths relative to the plugin working directory
77
+ - Pass aliases through to Jiti loader and importree dependency graph for proper module resolution and HMR tracking
78
+
79
+ - [#133](https://github.com/styleframe-dev/styleframe/pull/133) [`ce62d31`](https://github.com/styleframe-dev/styleframe/commit/ce62d318275deed277d828fdd8d2500c1a9d767f) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Refactor design tokens preset, add Button recipe, and improve Badge recipe
80
+ - Refactor `useDesignTokensPreset` with improved variable composables and `createUseDerivedVariable` utility
81
+ - Add `useButtonRecipe` with color, variant, and size support including compound variant styles
82
+ - Improve `useBadgeRecipe` sizing, contrast, and accessibility
83
+ - Update color references from `@color.light`/`@color.dark` to `@color.white`/`@color.black`
84
+ - Enhance `createUseRecipe` with better types and `@`-prefixed token reference support in recipe definitions
85
+
86
+ - [#138](https://github.com/styleframe-dev/styleframe/pull/138) [`5f06459`](https://github.com/styleframe-dev/styleframe/commit/5f064599bae7a3679aeef0dbcb9bfaf0c4167355) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add sanitize.css preset with configurable normalization categories
87
+ - Add `useSanitizePreset` with opt-out config for base, forms, typography, and reduced motion
88
+ - Add `useSanitizeBaseSelectors` with cross-browser normalization (box-sizing, margins, forms, accessibility)
89
+ - Add `useSanitizeFormsSelectors` with form element normalization and consistent select appearance
90
+ - Add `useSanitizeTypographySelectors` with system font stack defaults
91
+ - Add `useSanitizeReduceMotionSelectors` with `prefers-reduced-motion` media query support
92
+
93
+ - [#133](https://github.com/styleframe-dev/styleframe/pull/133) [`ce62d31`](https://github.com/styleframe-dev/styleframe/commit/ce62d318275deed277d828fdd8d2500c1a9d767f) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add unique id and parent-child traversal to token types, validate @ references, and resolve utility sibling keys
94
+ - Add unique `id` field to Root, Selector, AtRule, Theme, Utility, Modifier, and Variable token types for stable identity tracking
95
+ - Add `parentId` to track parent-child relationships across the token tree
96
+ - Add `root._registry` for efficient id-based lookups and tree traversal
97
+ - Validate `@`-prefixed string references against root-level variables in `parseDeclarationsBlock`, throwing descriptive errors for undefined variables
98
+ - Add null/undefined guard to `ref()` with clear error messages
99
+ - Support `@`-prefixed values in utility entries that resolve to sibling keys (e.g., `{ default: "@solid", solid: "solid" }`)
100
+
101
+ - [#130](https://github.com/styleframe-dev/styleframe/pull/130) [`7ec356a`](https://github.com/styleframe-dev/styleframe/commit/7ec356a0ff945c58df7de5740ef85c6ed781a50a) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add custom utility name support and shorthand utilities preset
102
+ - Add `names` config option to `useUtilitiesPreset` for custom CSS class name prefixes on any utility
103
+ - Add `utilityOptions` parameter to `createUseUtility` and `createUseSpacingUtility` to support name overrides
104
+ - Add `useShorthandUtilitiesPreset` with TailwindCSS-compatible shorthand mappings (e.g., `._m:sm` instead of `._margin:sm`)
105
+
106
+ - [#142](https://github.com/styleframe-dev/styleframe/pull/142) [`89032b8`](https://github.com/styleframe-dev/styleframe/commit/89032b86dee47538a85f10e3083d128aaf60f864) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add z-index design token with semantic stacking scale
107
+ - Add `useZIndex` composable with semantic layer names (base, dropdown, sticky, overlay, modal, popover, toast, max)
108
+ - Add `zIndexValues` defaults with 100-increment scale for consistent stacking order
109
+ - Integrate z-index into `useDesignTokensPreset` and `useUtilitiesPreset`
110
+ - Update z-index utility docs to use semantic token values instead of arbitrary numbers
111
+
112
+ ### Patch Changes
113
+
114
+ - [#141](https://github.com/styleframe-dev/styleframe/pull/141) [`295f04e`](https://github.com/styleframe-dev/styleframe/commit/295f04e6fdd011df6437986cc179e17efd8cd1be) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add `@variablename` notation support in `css` template literals
115
+ - `@variablename` strings in static parts of `css` template literals are automatically converted to variable references: `` css`1px solid @color.primary` `` resolves `@color.primary` to `ref("color.primary")`
116
+ - Supports dotted names (e.g., `@color.primary.500`) and multiple references per segment (e.g., `` css`@spacing.x @spacing.y` ``)
117
+
118
+ - [#128](https://github.com/styleframe-dev/styleframe/pull/128) [`71009c2`](https://github.com/styleframe-dev/styleframe/commit/71009c2c0a07a0bfd240e70e61020c8b7e923edb) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add auto-resolve for variables and at-rules in `css` template literal interpolations
119
+ - Variables interpolated directly in `css` are automatically converted to references: `` css`${variable}` `` is equivalent to `` css`${ref(variable)}` ``
120
+ - AtRule and keyframes instances interpolated in `css` resolve to their rule name: `` css`${keyframeInstance}` `` is equivalent to `` css`${keyframeInstance.rule}` ``
121
+
122
+ - [#126](https://github.com/styleframe-dev/styleframe/pull/126) [`3ffb881`](https://github.com/styleframe-dev/styleframe/commit/3ffb8814f9b7db1912180b2e0c53e1b6675df4d6) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Extract modifier registration from `useUtilitiesPreset` into a dedicated `useModifiersPreset` composable with independent configuration
123
+
124
+ - [#140](https://github.com/styleframe-dev/styleframe/pull/140) [`7a61df0`](https://github.com/styleframe-dev/styleframe/commit/7a61df083bc534caa9271a1ef4535f7be979d7c2) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add `@variablename` reference support in `variable()` values, `ref()` fallbacks, and `selector()` declaration values
125
+ - `variable('name', '1px solid @color.primary')` resolves embedded `@` references to a CSS object with mixed text and reference parts
126
+ - `ref('name', '@fallbackvar')` resolves `@`-prefixed fallback values to nested references
127
+ - `selector({ border: "1px solid @color.primary" })` resolves embedded `@` references in declaration values
128
+ - Extract shared `resolvePropertyValue()` utility for consistent `@` reference resolution across all contexts
129
+
130
+ - [#130](https://github.com/styleframe-dev/styleframe/pull/130) [`7ec356a`](https://github.com/styleframe-dev/styleframe/commit/7ec356a0ff945c58df7de5740ef85c6ed781a50a) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Document custom utility names and `useShorthandUtilitiesPreset` in utilities preset docs
131
+ - Add `Custom Names` section documenting the `names` config option in `useUtilitiesPreset`
132
+ - Add `useShorthandUtilitiesPreset` section with usage examples and full shorthand name mapping table
133
+
134
+ - Updated dependencies [[`295f04e`](https://github.com/styleframe-dev/styleframe/commit/295f04e6fdd011df6437986cc179e17efd8cd1be), [`71009c2`](https://github.com/styleframe-dev/styleframe/commit/71009c2c0a07a0bfd240e70e61020c8b7e923edb), [`2610041`](https://github.com/styleframe-dev/styleframe/commit/2610041beb03a8afc8de17af8857b9931f3359b0), [`228b0c0`](https://github.com/styleframe-dev/styleframe/commit/228b0c0bc36332d371dd8a7ca430ebe2be3ac046), [`8d6e731`](https://github.com/styleframe-dev/styleframe/commit/8d6e7316dff6ebd0ed5cc29a4061c50786e9e8f5), [`7a61df0`](https://github.com/styleframe-dev/styleframe/commit/7a61df083bc534caa9271a1ef4535f7be979d7c2), [`ce62d31`](https://github.com/styleframe-dev/styleframe/commit/ce62d318275deed277d828fdd8d2500c1a9d767f)]:
135
+ - @styleframe/core@3.1.0
136
+ - @styleframe/plugin@3.1.0
137
+ - @styleframe/transpiler@3.0.1
138
+
3
139
  ## 3.1.0
4
140
 
5
141
  ### Minor Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "styleframe",
3
- "version": "3.1.0",
3
+ "version": "3.3.0",
4
4
  "bin": {
5
5
  "styleframe": "./dist/cli.cjs"
6
6
  },
@@ -88,18 +88,18 @@
88
88
  "@styleframe/license": "^2.0.2"
89
89
  },
90
90
  "peerDependencies": {
91
- "@styleframe/plugin": "^3.0.0",
92
- "@styleframe/core": "^3.0.1",
91
+ "@styleframe/plugin": "^3.2.0",
92
+ "@styleframe/core": "^3.2.0",
93
93
  "@styleframe/loader": "^3.0.0",
94
- "@styleframe/transpiler": "^3.0.0"
94
+ "@styleframe/transpiler": "^3.1.0"
95
95
  },
96
96
  "devDependencies": {
97
97
  "@styleframe/config-typescript": "^3.0.0",
98
98
  "@styleframe/cli": "^3.0.0",
99
- "@styleframe/plugin": "^3.0.0",
100
- "@styleframe/core": "^3.0.1",
99
+ "@styleframe/plugin": "^3.2.0",
100
+ "@styleframe/core": "^3.2.0",
101
101
  "@styleframe/loader": "^3.0.0",
102
- "@styleframe/transpiler": "^3.0.0",
102
+ "@styleframe/transpiler": "^3.1.0",
103
103
  "@types/node": "^22.15.17",
104
104
  "@vitest/coverage-v8": "^3.2.4",
105
105
  "bumpp": "^10.1.0",