@lunar-js/lunar 0.1.0 → 0.1.1
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @lunar-js/lunar
|
|
2
2
|
|
|
3
|
+
## 0.1.1 (2026-02-18)
|
|
4
|
+
|
|
5
|
+
### Changed
|
|
6
|
+
|
|
7
|
+
- extend type of withBreakpoint to allow updating css variables -
|
|
8
|
+
[`8b9853a`](https://github.com/lunar-js/lunar/commit/8b9853a4263ddd54b96ba6030ce950d3143042ce) Thanks astronaut
|
|
9
|
+
[@prests](https://github.com/prests)!
|
|
10
|
+
|
|
3
11
|
## 0.1.0 (2026-01-07)
|
|
4
12
|
|
|
5
13
|
### Added
|
|
@@ -112,7 +112,7 @@ declare const withCustomOutline: (outlineColor: string, selector?: string) => Re
|
|
|
112
112
|
* }
|
|
113
113
|
* });
|
|
114
114
|
*/
|
|
115
|
-
declare const withBreakpoint: (breakpoint: string, styles:
|
|
115
|
+
declare const withBreakpoint: (breakpoint: string, styles: StyleRule) => StyleRule;
|
|
116
116
|
/**
|
|
117
117
|
* Helper function to create a visually hidden style object for screen reader accessibility.
|
|
118
118
|
* Returns a style object that hides content visually while keeping it accessible to screen readers.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utilities.d.ts","names":[],"sources":["../../../src/themes/styles/utilities.ts"],"sourcesContent":[],"mappings":";;;;;;AAA0E;;;;;AAiCxE;;;;;AA4CmF;;;;;AAqDnF;;;;;;;;cArGI,6BAA8B,cAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgD1C,gEAAyE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiDxF,6CAA8C,
|
|
1
|
+
{"version":3,"file":"utilities.d.ts","names":[],"sources":["../../../src/themes/styles/utilities.ts"],"sourcesContent":[],"mappings":";;;;;;AAA0E;;;;;AAiCxE;;;;;AA4CmF;;;;;AAqDnF;;;;;;;;cArGI,6BAA8B,cAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgD1C,gEAAyE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiDxF,6CAA8C,cAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4C1D,0BAAyB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utilities.js","names":[],"sources":["../../../src/themes/styles/utilities.ts"],"sourcesContent":["import { type CSSProperties, type StyleRule } from '@vanilla-extract/css';\n\nimport { COLORS__PURE } from '../tokens/primitives/colors.js';\n\n/**\n * Helper function to create a motion-safe style object with custom CSS properties.\n * Returns a style object that wraps the provided styles in a `prefers-reduced-motion: no-preference` media query,\n * ensuring animations only run when users haven't requested reduced motion.\n *\n * This function returns a style object that must be used with vanilla-extract's `style()` function or `recipe()` function.\n *\n * @param styles - CSS properties object (e.g., { transition: 'opacity 0.3s ease', transform: 'scale(1.1)' })\n * @returns A style object that applies the CSS properties only when motion is preferred\n *\n * @example\n * import { style } from '@vanilla-extract/css';\n * import { withSafeTransition } from './utilities.css.ts';\n *\n * const fadeTransition = style([\n * withSafeTransition({\n * transition: 'transform 0.2s ease-out, opacity 0.2s ease-out',\n * transform: 'translateY(0)'\n * }),\n * {\n * // Additional styles can be added here\n * padding: '16px'\n * }\n * ]);\n */\nconst withSafeTransition = (styles: StyleRule): StyleRule => ({\n '@media': {\n '(prefers-reduced-motion: no-preference)': styles,\n },\n});\n\n/**\n * Helper function to create a custom focus outline style object.\n *\n * @param outlineColor - The color for the focus outline (e.g., '#0066cc', 'rgb(255, 0, 0)', CSS custom properties)\n * @param selector - Optional CSS selector for the outline state (e.g., ':focus-visible', '&:hover', '& > button:focus-visible', defaults to ':focus-visible')\n * @returns A style object with custom focus outline styling that uses the provided selector\n *\n * @example\n * import { style } from '@vanilla-extract/css';\n * import { recipe } from '@vanilla-extract/recipes';\n * import { withCustomOutline } from './utilities.css.ts';\n *\n * const redOutlineButton = style([\n * withCustomOutline('#ff0000'),\n * {\n * padding: '8px 16px',\n * background: 'white'\n * }\n * ]);\n *\n * // Example with custom selector\n * const hoverOutlineButton = style([\n * withCustomOutline('#00cc66', ':hover'),\n * {\n * padding: '8px 16px',\n * background: 'white'\n * }\n * ]);\n *\n * const buttonVariants = recipe({\n * base: [\n * withCustomOutline(themeContract.colors.shadow.interactive),\n * {\n * // other base styles\n * padding: '12px 24px'\n * }\n * ],\n * variants: {\n * // variant styles\n * }\n * });\n */\nconst withCustomOutline = (outlineColor: string, selector = ':focus-visible'): Record<string, CSSProperties> => ({\n [selector]: {\n boxShadow: `0px 0px 0px 0px, ${COLORS__PURE.transparent} 0px 0px 0px 0px, ${COLORS__PURE.transparent} 0px 0px 0px 0px, ${outlineColor} 0px 0px 0px 3px, ${outlineColor} 0px 1px 2px 0px`,\n outline: '2px solid transparent',\n outlineOffset: '2px',\n },\n});\n\n/**\n * Helper function to create a responsive style object with breakpoint media queries.\n *\n * @param breakpoint - The minimum viewport width for the media query (e.g., '768px', '1024px', '48rem')\n * @param styles - CSS properties object to apply at the breakpoint (e.g., { fontSize: '1.5rem', padding: '24px' })\n * @returns A style object that applies the CSS properties only when the viewport width meets the breakpoint\n *\n * @example\n * import { style } from '@vanilla-extract/css';\n * import { recipe } from '@vanilla-extract/recipes';\n * import { withBreakpoint } from './utilities.css.ts';\n *\n * const responsiveText = style([\n * withBreakpoint('768px', {\n * fontSize: '1.5rem',\n * lineHeight: '1.4'\n * }),\n * {\n * // Base styles\n * fontSize: '1rem',\n * lineHeight: '1.6'\n * }\n * ]);\n *\n * const cardVariants = recipe({\n * base: [\n * withBreakpoint('1024px', {\n * padding: '32px',\n * maxWidth: '800px'\n * }),\n * {\n * // base styles\n * padding: '16px',\n * maxWidth: '100%'\n * }\n * ],\n * variants: {\n * // variant styles\n * }\n * });\n */\nconst withBreakpoint = (breakpoint: string, styles:
|
|
1
|
+
{"version":3,"file":"utilities.js","names":[],"sources":["../../../src/themes/styles/utilities.ts"],"sourcesContent":["import { type CSSProperties, type StyleRule } from '@vanilla-extract/css';\n\nimport { COLORS__PURE } from '../tokens/primitives/colors.js';\n\n/**\n * Helper function to create a motion-safe style object with custom CSS properties.\n * Returns a style object that wraps the provided styles in a `prefers-reduced-motion: no-preference` media query,\n * ensuring animations only run when users haven't requested reduced motion.\n *\n * This function returns a style object that must be used with vanilla-extract's `style()` function or `recipe()` function.\n *\n * @param styles - CSS properties object (e.g., { transition: 'opacity 0.3s ease', transform: 'scale(1.1)' })\n * @returns A style object that applies the CSS properties only when motion is preferred\n *\n * @example\n * import { style } from '@vanilla-extract/css';\n * import { withSafeTransition } from './utilities.css.ts';\n *\n * const fadeTransition = style([\n * withSafeTransition({\n * transition: 'transform 0.2s ease-out, opacity 0.2s ease-out',\n * transform: 'translateY(0)'\n * }),\n * {\n * // Additional styles can be added here\n * padding: '16px'\n * }\n * ]);\n */\nconst withSafeTransition = (styles: StyleRule): StyleRule => ({\n '@media': {\n '(prefers-reduced-motion: no-preference)': styles,\n },\n});\n\n/**\n * Helper function to create a custom focus outline style object.\n *\n * @param outlineColor - The color for the focus outline (e.g., '#0066cc', 'rgb(255, 0, 0)', CSS custom properties)\n * @param selector - Optional CSS selector for the outline state (e.g., ':focus-visible', '&:hover', '& > button:focus-visible', defaults to ':focus-visible')\n * @returns A style object with custom focus outline styling that uses the provided selector\n *\n * @example\n * import { style } from '@vanilla-extract/css';\n * import { recipe } from '@vanilla-extract/recipes';\n * import { withCustomOutline } from './utilities.css.ts';\n *\n * const redOutlineButton = style([\n * withCustomOutline('#ff0000'),\n * {\n * padding: '8px 16px',\n * background: 'white'\n * }\n * ]);\n *\n * // Example with custom selector\n * const hoverOutlineButton = style([\n * withCustomOutline('#00cc66', ':hover'),\n * {\n * padding: '8px 16px',\n * background: 'white'\n * }\n * ]);\n *\n * const buttonVariants = recipe({\n * base: [\n * withCustomOutline(themeContract.colors.shadow.interactive),\n * {\n * // other base styles\n * padding: '12px 24px'\n * }\n * ],\n * variants: {\n * // variant styles\n * }\n * });\n */\nconst withCustomOutline = (outlineColor: string, selector = ':focus-visible'): Record<string, CSSProperties> => ({\n [selector]: {\n boxShadow: `0px 0px 0px 0px, ${COLORS__PURE.transparent} 0px 0px 0px 0px, ${COLORS__PURE.transparent} 0px 0px 0px 0px, ${outlineColor} 0px 0px 0px 3px, ${outlineColor} 0px 1px 2px 0px`,\n outline: '2px solid transparent',\n outlineOffset: '2px',\n },\n});\n\n/**\n * Helper function to create a responsive style object with breakpoint media queries.\n *\n * @param breakpoint - The minimum viewport width for the media query (e.g., '768px', '1024px', '48rem')\n * @param styles - CSS properties object to apply at the breakpoint (e.g., { fontSize: '1.5rem', padding: '24px' })\n * @returns A style object that applies the CSS properties only when the viewport width meets the breakpoint\n *\n * @example\n * import { style } from '@vanilla-extract/css';\n * import { recipe } from '@vanilla-extract/recipes';\n * import { withBreakpoint } from './utilities.css.ts';\n *\n * const responsiveText = style([\n * withBreakpoint('768px', {\n * fontSize: '1.5rem',\n * lineHeight: '1.4'\n * }),\n * {\n * // Base styles\n * fontSize: '1rem',\n * lineHeight: '1.6'\n * }\n * ]);\n *\n * const cardVariants = recipe({\n * base: [\n * withBreakpoint('1024px', {\n * padding: '32px',\n * maxWidth: '800px'\n * }),\n * {\n * // base styles\n * padding: '16px',\n * maxWidth: '100%'\n * }\n * ],\n * variants: {\n * // variant styles\n * }\n * });\n */\nconst withBreakpoint = (breakpoint: string, styles: StyleRule): StyleRule => ({\n '@media': {\n [`(min-width: ${breakpoint})`]: styles,\n },\n});\n\n/**\n * Helper function to create a visually hidden style object for screen reader accessibility.\n * Returns a style object that hides content visually while keeping it accessible to screen readers.\n * This is useful for providing descriptive text, skip links, or other content that should only\n * be available to assistive technologies.\n *\n * @returns A style object that visually hides content while maintaining screen reader accessibility\n *\n * @example\n * import { style } from '@vanilla-extract/css';\n * import { recipe } from '@vanilla-extract/recipes';\n * import { withVisuallyHidden } from './utilities.css.ts';\n *\n * const skipLink = style([\n * withVisuallyHidden(),\n * {\n * // Additional styles can be added here\n * zIndex: 1000\n * }\n * ]);\n *\n * const srOnly = style([\n * withVisuallyHidden()\n * ]);\n *\n * const buttonWithHiddenText = recipe({\n * base: [\n * withVisuallyHidden(),\n * {\n * padding: '8px 12px',\n * background: 'blue'\n * }\n * ],\n * variants: {\n * // variant styles\n * }\n * });\n */\nconst withVisuallyHidden = (): StyleRule => ({\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n});\n\nexport { withSafeTransition, withCustomOutline, withBreakpoint, withVisuallyHidden };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,sBAAsB,YAAkC,EAC5D,UAAU,EACR,2CAA2C,QAC5C,EACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CD,MAAM,qBAAqB,cAAsB,WAAW,sBAAqD,GAC9G,WAAW;CACV,WAAW,oBAAoB,aAAa,YAAY,oBAAoB,aAAa,YAAY,oBAAoB,aAAa,oBAAoB,aAAa;CACvK,SAAS;CACT,eAAe;CAChB,EACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CD,MAAM,kBAAkB,YAAoB,YAAkC,EAC5E,UAAU,GACP,eAAe,WAAW,KAAK,QACjC,EACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCD,MAAM,4BAAuC;CAC3C,UAAU;CACV,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;CACN,YAAY;CACZ,aAAa;CACd"}
|
package/package.json
CHANGED
|
@@ -124,7 +124,7 @@ const withCustomOutline = (outlineColor: string, selector = ':focus-visible'): R
|
|
|
124
124
|
* }
|
|
125
125
|
* });
|
|
126
126
|
*/
|
|
127
|
-
const withBreakpoint = (breakpoint: string, styles:
|
|
127
|
+
const withBreakpoint = (breakpoint: string, styles: StyleRule): StyleRule => ({
|
|
128
128
|
'@media': {
|
|
129
129
|
[`(min-width: ${breakpoint})`]: styles,
|
|
130
130
|
},
|