+2 -5

apps/docs/src/components/alert/index.tsx

reviewed

··· 21 21 uiColor, 22 22 warningColor, 23 23 } from "../theme/color.stylex"; 24 24 - import { 25 25 - maxBreakpoints, 26 26 - mediaQueries, 27 27 - } from "../theme/media-queries.stylex"; 24 24 + import { maxBreakpoints, mediaQueries } from "../theme/media-queries.stylex"; 28 25 import { radius } from "../theme/radius.stylex"; 29 26 import { 30 27 critical, ··· 44 41 }, 45 42 borderStyle: "solid", 46 43 borderWidth: 1, 47 47 - // eslint-disable-next-line @stylexjs/valid-styles 44 44 + 48 45 cornerShape: "squircle", 49 46 gap: spacing["2.5"], 50 47 gridTemplateAreas: {

-1

apps/docs/src/components/aspect-ratio/index.tsx

reviewed

··· 14 14 position: "relative", 15 15 }, 16 16 rounded: { 17 17 - // eslint-disable-next-line @stylexjs/valid-styles 18 17 cornerShape: "squircle", 19 18 borderBottomLeftRadius: { 20 19 default: radius["md"],

+125 -46

apps/docs/src/components/avatar/index.tsx

reviewed

··· 1 1 import type { ButtonProps as AriaButtonProps } from "react-aria-components"; 2 2 3 3 import * as stylex from "@stylexjs/stylex"; 4 4 - import { use, useLayoutEffect, useState } from "react"; 4 4 + import { use, useLayoutEffect, useRef, useState } from "react"; 5 5 import { Button as AriaButton } from "react-aria-components"; 6 6 7 7 import type { Size, StyleXComponentProps } from "../theme/types"; ··· 34 34 justifyContent: "center", 35 35 position: "relative", 36 36 37 37 - // eslint-disable-next-line @stylexjs/valid-styles 38 37 cornerShape: "squircle", 39 38 }, 40 39 wrapperSm: { ··· 76 75 width: "100%", 77 76 }, 78 77 fallback: { 78 78 + alignItems: "center", 79 79 color: uiColor.text1, 80 80 + display: "flex", 80 81 fontFamily: fontFamily["sans"], 81 82 fontWeight: fontWeight["medium"], 83 83 + justifyContent: "center", 82 84 lineHeight: lineHeight["none"], 85 85 + position: "absolute", 86 86 + bottom: 0, 87 87 + left: 0, 88 88 + right: 0, 89 89 + top: 0, 83 90 }, 84 91 fallbackSm: { 85 92 fontSize: fontSize["sm"], ··· 102 109 display: "inline-block", 103 110 }, 104 111 overlay: { 112 112 + inset: 0, 105 113 backgroundColor: uiColor.solid2, 106 114 opacity: { 107 115 default: 0, 108 108 - ":is([data-avatar-button][data-hovered] *)": 0.5, 116 116 + ":is([data-avatar-button='true'][data-hovered='true'] *)": 0.5, 109 117 }, 110 118 pointerEvents: "none", 111 119 position: "absolute", 112 120 transitionDuration: animationDuration.default, 113 113 - transitionProperty: "opacity", 121 121 + // Only apply transition after mount to prevent initial render animation 122 122 + transitionProperty: { 123 123 + default: "none", 124 124 + ":is([data-overlay-mounted])": "opacity", 125 125 + }, 114 126 transitionTimingFunction: animationTimingFunction.easeOut, 115 115 - bottom: 0, 116 116 - left: 0, 117 117 - right: 0, 118 118 - top: 0, 119 127 }, 120 128 }); 121 129 ··· 132 140 size?: Size | "xl"; 133 141 } 134 142 135 135 - export function Avatar({ 136 136 - style, 137 137 - alt = "", 143 143 + function AvatarImageWithState({ 138 144 src, 139 139 - fallback, 140 140 - size: sizeProp, 141 141 - ...props 142 142 - }: AvatarProps) { 143 143 - const size = sizeProp || use(SizeContext); 144 144 - const [imageLoaded, setImageLoaded] = useState< 145 145 - "loading" | "loaded" | "error" 146 146 - >("loading"); 145 145 + alt, 146 146 + onStateChange, 147 147 + }: { 148 148 + src: string; 149 149 + alt: string; 150 150 + onStateChange: (loaded: boolean, error: boolean) => void; 151 151 + }) { 152 152 + const imgRef = useRef<HTMLImageElement>(null); 147 153 154 154 + // Check if image is already cached/loaded 148 155 useLayoutEffect(() => { 149 149 - if (!src) return; 156 156 + const img = imgRef.current; 157 157 + if (!img) return; 158 158 + 159 159 + const handleLoad = () => { 160 160 + onStateChange(true, false); 161 161 + }; 162 162 + 163 163 + const handleError = () => { 164 164 + onStateChange(false, true); 165 165 + }; 166 166 + 167 167 + // If image is already loaded (cached), call handleLoad immediately 168 168 + if (img.complete && img.naturalWidth > 0) { 169 169 + handleLoad(); 170 170 + } else { 171 171 + // Otherwise, wait for load event 172 172 + img.addEventListener("load", handleLoad); 173 173 + img.addEventListener("error", handleError); 174 174 + 175 175 + return () => { 176 176 + img.removeEventListener("load", handleLoad); 177 177 + img.removeEventListener("error", handleError); 178 178 + }; 179 179 + } 180 180 + }, [src, onStateChange]); 150 181 151 151 - const onLoad = () => setImageLoaded("loaded"); 152 152 - const onError = () => setImageLoaded("error"); 182 182 + return ( 183 183 + <img ref={imgRef} {...stylex.props(styles.image)} src={src} alt={alt} /> 184 184 + ); 185 185 + } 153 186 154 154 - const image = new Image(); 187 187 + function AvatarContent({ 188 188 + src, 189 189 + alt, 190 190 + fallback, 191 191 + size, 192 192 + }: { 193 193 + src?: string; 194 194 + alt: string; 195 195 + fallback: React.ReactNode; 196 196 + size: Size | "xl"; 197 197 + }) { 198 198 + const [imageLoaded, setImageLoaded] = useState(false); 199 199 + const [imageError, setImageError] = useState(false); 200 200 + const [hasCheckedImage, setHasCheckedImage] = useState(false); 201 201 + const overlayRef = useRef<HTMLDivElement>(null); 155 202 156 156 - image.addEventListener("load", onLoad); 157 157 - image.addEventListener("error", onError); 203 203 + useLayoutEffect(() => { 204 204 + // Enable transitions after initial render (CSS can't detect this) 205 205 + if (overlayRef.current) overlayRef.current.dataset.overlayMounted = ""; 206 206 + }, []); 158 207 159 159 - image.src = src; 208 208 + const handleStateChange = (loaded: boolean, error: boolean) => { 209 209 + setImageLoaded(loaded); 210 210 + setImageError(error); 211 211 + setHasCheckedImage(true); 212 212 + }; 160 213 161 161 - return () => { 162 162 - image.removeEventListener("load", onLoad); 163 163 - image.removeEventListener("error", onError); 164 164 - }; 165 165 - }, [src]); 214 214 + // Only show fallback if we've checked and the image isn't loaded or has error 215 215 + const showFallback = 216 216 + !src || (hasCheckedImage && (imageError || !imageLoaded)); 166 217 167 218 return ( 168 168 - <div 169 169 - {...props} 170 170 - {...stylex.props( 171 171 - styles.wrapper, 172 172 - size === "sm" && styles.wrapperSm, 173 173 - size === "md" && styles.wrapperMd, 174 174 - size === "lg" && styles.wrapperLg, 175 175 - size === "xl" && styles.wrapperXl, 176 176 - style, 219 219 + <> 220 220 + {src && !imageError && ( 221 221 + <AvatarImageWithState 222 222 + key={src} 223 223 + src={src} 224 224 + alt={alt} 225 225 + onStateChange={handleStateChange} 226 226 + /> 177 227 )} 178 178 - > 179 179 - {imageLoaded === "loaded" && ( 180 180 - <img {...stylex.props(styles.image)} src={src} alt={alt} /> 181 181 - )} 182 182 - {(!src || imageLoaded === "error") && ( 228 228 + {showFallback && ( 183 229 <div 184 230 {...stylex.props( 185 231 styles.fallback, ··· 192 238 {fallback} 193 239 </div> 194 240 )} 195 195 - <div {...stylex.props(styles.overlay)} /> 241 241 + <div ref={overlayRef} {...stylex.props(styles.overlay)} /> 242 242 + </> 243 243 + ); 244 244 + } 245 245 + 246 246 + export function Avatar({ 247 247 + style, 248 248 + alt = "", 249 249 + src, 250 250 + fallback, 251 251 + size: sizeProp, 252 252 + ...props 253 253 + }: AvatarProps) { 254 254 + const size = sizeProp || use(SizeContext); 255 255 + 256 256 + return ( 257 257 + <div 258 258 + {...props} 259 259 + {...stylex.props( 260 260 + styles.wrapper, 261 261 + size === "sm" && styles.wrapperSm, 262 262 + size === "md" && styles.wrapperMd, 263 263 + size === "lg" && styles.wrapperLg, 264 264 + size === "xl" && styles.wrapperXl, 265 265 + style, 266 266 + )} 267 267 + > 268 268 + <AvatarContent 269 269 + key={src} 270 270 + src={src} 271 271 + alt={alt} 272 272 + fallback={fallback} 273 273 + size={size} 274 274 + /> 196 275 </div> 197 276 ); 198 277 }

+16 -20

apps/docs/src/components/badge/index.tsx

reviewed

··· 4 4 import type { Size, StyleXComponentProps } from "../theme/types"; 5 5 6 6 import { SizeContext } from "../context"; 7 7 - import { mediaQueries } from "../theme/media-queries.stylex"; 8 7 import { radius } from "../theme/radius.stylex"; 9 8 import { 10 9 critical, ··· 18 17 19 18 const styles = stylex.create({ 20 19 wrapper: { 20 20 + // eslint-disable-next-lin @stylexjs/valid-styles 21 21 + borderRadius: radius["full"], 21 22 borderStyle: "solid", 22 23 borderWidth: 1, 23 23 - // eslint-disable-next-line @stylexjs/valid-styles 24 24 - cornerShape: "squircle", 25 24 overflow: "hidden", 26 25 alignItems: "center", 27 26 display: "flex", 27 27 + flexShrink: 0, 28 28 fontFamily: fontFamily["sans"], 29 29 - fontWeight: fontWeight["semibold"], 29 29 + fontWeight: fontWeight["medium"], 30 30 width: "fit-content", 31 31 }, 32 32 sm: { 33 33 - borderRadius: { 34 34 - default: radius["sm"], 35 35 - [mediaQueries.supportsSquircle]: radius["3xl"], 36 36 - }, 37 33 gap: spacing["1"], 38 34 fontSize: fontSize["xs"], 39 35 height: spacing["5"], 40 40 - paddingLeft: spacing["1.5"], 41 41 - paddingRight: spacing["1.5"], 36 36 + paddingBottom: spacing["0.5"], 37 37 + paddingLeft: spacing["2.5"], 38 38 + paddingRight: spacing["2.5"], 39 39 + paddingTop: spacing["0.5"], 42 40 43 41 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 44 42 ":is(*) svg": { ··· 49 47 }, 50 48 }, 51 49 md: { 52 52 - borderRadius: { 53 53 - default: radius["md"], 54 54 - [mediaQueries.supportsSquircle]: radius["3xl"], 55 55 - }, 56 50 gap: spacing["1.5"], 57 51 fontSize: fontSize["sm"], 58 52 height: spacing["6"], 59 59 - paddingLeft: spacing["2"], 60 60 - paddingRight: spacing["2"], 53 53 + paddingBottom: spacing["0.5"], 54 54 + paddingLeft: spacing["3.5"], 55 55 + paddingRight: spacing["3.5"], 56 56 + paddingTop: spacing["0.5"], 61 57 62 58 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 63 59 ":is(*) svg": { ··· 99 95 primary.borderDim, 100 96 primary.text, 101 97 ], 102 102 - variant === "default" && [ui.bgDim, ui.borderDim, ui.text], 98 98 + variant === "default" && [ui.bgDim, ui.borderDim, ui.textDim], 103 99 variant === "warning" && [ 104 100 warning.bgDim, 105 101 warning.borderDim, 106 106 - warning.text, 102 102 + warning.textDim, 107 103 ], 108 104 variant === "critical" && [ 109 105 critical.bgDim, 110 106 critical.borderDim, 111 111 - critical.text, 107 107 + critical.textDim, 112 108 ], 113 109 variant === "success" && [ 114 110 success.bgDim, 115 111 success.borderDim, 116 116 - success.text, 112 112 + success.textDim, 117 113 ], 118 114 style, 119 115 )}

+50 -5

apps/docs/src/components/button/index.tsx

reviewed

··· 7 7 8 8 import type { ButtonVariant, Size, StyleXComponentProps } from "../theme/types"; 9 9 10 10 + import { ProgressCircle } from "../progress-circle"; 11 11 + import { animationDuration } from "../theme/animations.stylex"; 12 12 + import { spacing } from "../theme/spacing.stylex"; 10 13 import { useButtonStyles } from "../theme/useButtonStyles"; 11 14 12 12 - export interface ButtonProps extends StyleXComponentProps<AriaButtonProps> { 15 15 + const styles = stylex.create({ 16 16 + content: { 17 17 + gap: spacing["2"], 18 18 + alignItems: "center", 19 19 + display: "flex", 20 20 + justifyContent: "center", 21 21 + transitionDuration: animationDuration.fast, 22 22 + transitionProperty: "opacity", 23 23 + transitionTimingFunction: "ease-in-out", 24 24 + }, 25 25 + contentPending: { 26 26 + opacity: 0, 27 27 + }, 28 28 + spinner: { 29 29 + position: "absolute", 30 30 + }, 31 31 + link: { 32 32 + cursor: "pointer", 33 33 + }, 34 34 + }); 35 35 + 36 36 + export interface ButtonProps extends StyleXComponentProps< 37 37 + Omit<AriaButtonProps, "children"> 38 38 + > { 13 39 variant?: ButtonVariant; 14 14 - size?: Size; 40 40 + size?: Size | "xl"; 41 41 + isPending?: boolean; 42 42 + children?: React.ReactNode; 15 43 } 16 44 17 45 export const Button = ({ ··· 19 47 style, 20 48 variant = "primary", 21 49 size, 50 50 + isPending = false, 51 51 + isDisabled, 22 52 ...props 23 53 }: ButtonProps) => { 24 54 const buttonStyles = useButtonStyles({ variant, size }); 55 55 + const isHref = "href" in props; 25 56 26 57 return ( 27 58 <AriaButton 28 28 - {...stylex.props(buttonStyles, style)} 59 59 + {...props} 60 60 + {...stylex.props(buttonStyles, isHref && styles.link, style)} 29 61 data-size={size} 30 30 - {...props} 62 62 + data-pending={isPending || undefined} 63 63 + isDisabled={isDisabled || isPending} 31 64 > 32 32 - {children} 65 65 + {isPending && ( 66 66 + <ProgressCircle 67 67 + isIndeterminate 68 68 + size="sm" 69 69 + style={styles.spinner} 70 70 + aria-label="Loading" 71 71 + /> 72 72 + )} 73 73 + <span 74 74 + {...stylex.props(styles.content, isPending && styles.contentPending)} 75 75 + > 76 76 + {children} 77 77 + </span> 33 78 </AriaButton> 34 79 ); 35 80 };

+3 -3

apps/docs/src/components/calendar/index.tsx

reviewed

··· 7 7 import * as stylex from "@stylexjs/stylex"; 8 8 import { ChevronLeft, ChevronRight } from "lucide-react"; 9 9 import { 10 10 - Calendar as AriaCalendar, 10 10 + Calendar as AriaCalendarComponent, 11 11 CalendarCell, 12 12 CalendarGrid, 13 13 CalendarGridBody, ··· 46 46 const calendarStyles = useCalendarStyles({ type: "calendar" }); 47 47 48 48 return ( 49 49 - <AriaCalendar 49 49 + <AriaCalendarComponent 50 50 visibleDuration={visibleDuration} 51 51 {...rest} 52 52 {...stylex.props(calendarStyles.wrapper, style)} ··· 93 93 ))} 94 94 </Flex> 95 95 {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>} 96 96 - </AriaCalendar> 96 96 + </AriaCalendarComponent> 97 97 ); 98 98 }

+48 -18

apps/docs/src/components/card/index.tsx

reviewed

··· 5 5 6 6 import { AspectRatio, AspectRatioImage } from "../aspect-ratio"; 7 7 import { SizeContext } from "../context"; 8 8 + import { uiColor } from "../theme/color.stylex"; 8 9 import { mediaQueries } from "../theme/media-queries.stylex"; 9 10 import { radius } from "../theme/radius.stylex"; 10 11 import { ui } from "../theme/semantic-color.stylex"; 12 12 + import { shadow } from "../theme/shadow.stylex"; 11 13 import { spacing } from "../theme/spacing.stylex"; 12 12 - import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex"; 14 14 + import { 15 15 + fontFamily, 16 16 + fontSize, 17 17 + fontWeight, 18 18 + lineHeight, 19 19 + } from "../theme/typography.stylex"; 13 20 14 21 const styles = stylex.create({ 15 22 card: { 23 23 + borderColor: uiColor.component2, 16 24 borderRadius: { 17 25 default: radius["lg"], 18 26 [mediaQueries.supportsSquircle]: radius["3xl"], 19 27 }, 20 20 - // eslint-disable-next-line @stylexjs/valid-styles 28 28 + borderStyle: "solid", 29 29 + borderWidth: 1, 30 30 + 21 31 cornerShape: "squircle", 22 32 gap: "var(--card-gap)", 23 33 overflow: "hidden", 34 34 + boxShadow: shadow["sm"], 24 35 display: "flex", 25 36 flexDirection: "column", 26 37 fontFamily: fontFamily["sans"], ··· 56 67 'description action' 57 68 `, 58 69 }, 59 59 - gap: "var(--card-gap)", 70 70 + gap: "calc(var(--card-gap) * 0.25)", 60 71 alignItems: "center", 61 72 display: "grid", 62 73 }, 74 74 + headerBorder: { 75 75 + borderColor: uiColor.component2, 76 76 + borderBottomStyle: "solid", 77 77 + borderBottomWidth: 1, 78 78 + paddingBottom: spacing["6"], 79 79 + }, 63 80 cardHeaderAction: { 64 81 gridArea: "action", 65 82 gap: spacing["1"], ··· 68 85 }, 69 86 cardTitle: { 70 87 gridArea: "title", 88 88 + gap: spacing["3"], 89 89 + alignItems: "center", 90 90 + display: "flex", 71 91 fontSize: { 72 92 ":is([data-card-size='lg'] *)": fontSize["2xl"], 73 93 ":is([data-card-size='md'] *)": fontSize["xl"], ··· 82 102 fontWeight: fontWeight["normal"], 83 103 }, 84 104 cardBody: { 85 85 - gap: "var(--card-gap)", 105 105 + gap: "calc(var(--card-gap) * 0.5)", 86 106 display: "flex", 87 107 flexDirection: "column", 108 108 + lineHeight: lineHeight["lg"], 88 109 }, 89 110 cardFooter: { 90 111 gap: spacing["2"], ··· 114 135 <div 115 136 {...props} 116 137 data-card-size={size} 117 117 - {...stylex.props(styles.card, ui.bgSubtle, ui.border, ui.text, style)} 138 138 + {...stylex.props(styles.card, ui.bg, ui.text, style)} 118 139 /> 119 140 </SizeContext> 120 141 ); ··· 122 143 123 144 export interface CardHeaderProps extends StyleXComponentProps< 124 145 React.ComponentProps<"div"> 125 125 - > {} 146 146 + > { 147 147 + hasBorder?: boolean; 148 148 + } 126 149 127 127 - export const CardHeader = ({ style, ...props }: CardHeaderProps) => { 150 150 + export const CardHeader = ({ style, hasBorder, ...props }: CardHeaderProps) => { 128 151 return ( 129 152 <div 130 153 {...props} 131 131 - {...stylex.props(styles.cardSection, styles.cardHeader, style)} 154 154 + {...stylex.props( 155 155 + styles.cardSection, 156 156 + styles.cardHeader, 157 157 + hasBorder && styles.headerBorder, 158 158 + style, 159 159 + )} 132 160 /> 133 161 ); 134 162 }; ··· 195 223 React.ComponentProps<"img"> 196 224 > { 197 225 aspectRatio?: number; 226 226 + imageStyle?: stylex.StyleXStyles; 227 227 + children?: React.ReactNode; 198 228 } 199 229 200 200 - export const CardImage = ({ style, aspectRatio, ...props }: CardImageProps) => { 230 230 + export const CardImage = ({ 231 231 + style, 232 232 + aspectRatio, 233 233 + imageStyle, 234 234 + children, 235 235 + ...props 236 236 + }: CardImageProps) => { 201 237 return ( 202 202 - <AspectRatio 203 203 - aspectRatio={aspectRatio} 204 204 - style={[ 205 205 - styles.cardSection as unknown as stylex.StyleXStyles, 206 206 - styles.cardImage, 207 207 - style, 208 208 - ]} 209 209 - > 210 210 - <AspectRatioImage {...props} /> 238 238 + <AspectRatio aspectRatio={aspectRatio} style={[styles.cardImage, style]}> 239 239 + <AspectRatioImage {...props} style={imageStyle} /> 240 240 + {children} 211 241 </AspectRatio> 212 242 ); 213 243 };

+4 -2

apps/docs/src/components/checkbox/index.tsx

reviewed

··· 40 40 checkbox: { 41 41 alignItems: "center", 42 42 display: "flex", 43 43 + flexShrink: 0, 43 44 justifyContent: "center", 44 45 45 46 borderRadius: { ··· 47 48 [mediaQueries.supportsSquircle]: radius["full"], 48 49 }, 49 50 borderWidth: 2, 50 50 - // eslint-disable-next-line @stylexjs/valid-styles 51 51 + 51 52 cornerShape: "squircle", 52 53 height: spacing["4"], 53 54 width: spacing["4"], ··· 106 107 export function Checkbox({ children, style, ...props }: CheckboxProps) { 107 108 return ( 108 109 <AriaCheckbox {...props} {...stylex.props(styles.wrapper, style)}> 109 109 - {({ isIndeterminate, isSelected, isDisabled }) => ( 110 110 + {({ isIndeterminate, isSelected, isDisabled, isHovered }) => ( 110 111 <> 111 112 <div 113 113 + data-hovered={isHovered || undefined} 112 114 {...stylex.props( 113 115 styles.checkbox, 114 116 isDisabled

+2 -2

apps/docs/src/components/color-area/index.tsx

reviewed

··· 21 21 default: radius["md"], 22 22 [mediaQueries.supportsSquircle]: radius["3xl"], 23 23 }, 24 24 - // eslint-disable-next-line @stylexjs/valid-styles 24 24 + 25 25 cornerShape: "squircle", 26 26 filter: { 27 27 ":is([data-disabled])": "grayscale(1)", ··· 36 36 }, 37 37 borderStyle: "solid", 38 38 borderWidth: 2, 39 39 - // eslint-disable-next-line @stylexjs/valid-styles 39 39 + 40 40 cornerShape: "squircle", 41 41 boxShadow: " 0 0 0 1px black, inset 0 0 0 1px black", 42 42 boxSizing: "border-box",

+4 -6

apps/docs/src/components/color-picker/index.tsx

reviewed

··· 7 7 8 8 import * as stylex from "@stylexjs/stylex"; 9 9 import { Pipette } from "lucide-react"; 10 10 - import { createContext, use } from "react"; 10 10 + import { createContext, use, useMemo } from "react"; 11 11 import { 12 12 ColorPicker as AriaColorPicker, 13 13 Button, ··· 100 100 throw new Error("Color needs to be a defined value"); 101 101 } 102 102 103 103 - return ( 104 104 - <ColorSpaceContext value={state.color.getColorSpace()}> 105 105 - {children} 106 106 - </ColorSpaceContext> 107 107 - ); 103 103 + const colorSpace = useMemo(() => state.color.getColorSpace(), [state.color]); 104 104 + 105 105 + return <ColorSpaceContext value={colorSpace}>{children}</ColorSpaceContext>; 108 106 } 109 107 110 108 export function ColorPicker({

+1 -1

apps/docs/src/components/color-slider/index.tsx

reviewed

··· 55 55 default: radius["full"], 56 56 [mediaQueries.supportsSquircle]: radius["3xl"], 57 57 }, 58 58 - // eslint-disable-next-line @stylexjs/valid-styles 58 58 + 59 59 cornerShape: "squircle", 60 60 height: { 61 61 ":is([data-size=lg] *)": spacing["6"],

+11 -1

apps/docs/src/components/color-swatch/index.tsx

reviewed

··· 19 19 borderWidth: 1, 20 20 boxSizing: "border-box", 21 21 22 22 - // eslint-disable-next-line @stylexjs/valid-styles 23 22 cornerShape: "squircle", 24 23 }, 25 24 swatchSm: { ··· 46 45 height: spacing["8"], 47 46 width: spacing["8"], 48 47 }, 48 48 + circle: { 49 49 + borderRadius: { 50 50 + default: "50%", 51 51 + [mediaQueries.supportsSquircle]: "50%", 52 52 + }, 53 53 + 54 54 + cornerShape: "unset", 55 55 + }, 49 56 }); 50 57 51 58 export interface ColorSwatchProps extends StyleXComponentProps< ··· 53 60 > { 54 61 children?: React.ReactNode; 55 62 size?: Size; 63 63 + variant?: "default" | "circle"; 56 64 } 57 65 58 66 export function ColorSwatch({ 59 67 style, 60 68 size: sizeProp, 69 69 + variant = "default", 61 70 ...props 62 71 }: ColorSwatchProps) { 63 72 const size = sizeProp || use(SizeContext); ··· 70 79 size === "sm" && styles.swatchSm, 71 80 size === "md" && styles.swatchMd, 72 81 size === "lg" && styles.swatchLg, 82 82 + variant === "circle" && styles.circle, 73 83 style, 74 84 )} 75 85 style={({ color }) => ({

+20 -1

apps/docs/src/components/color-wheel/index.tsx

reviewed

··· 11 11 12 12 import { ColorThumb } from "../color-area"; 13 13 import { SizeContext } from "../context"; 14 14 + import { Flex } from "../flex"; 14 15 import { uiColor } from "../theme/color.stylex"; 15 16 import { radius } from "../theme/radius.stylex"; 16 17 import { spacing } from "../theme/spacing.stylex"; 17 18 18 19 const styles = stylex.create({ 20 20 + wrapper: { 21 21 + width: "fit-content", 22 22 + }, 19 23 track: { 20 24 gridArea: "track", 21 25 borderRadius: radius.full, ··· 33 37 thumb: { 34 38 top: "50%", 35 39 }, 40 40 + children: { 41 41 + position: "absolute", 42 42 + transform: "translate(-50%, -50%)", 43 43 + height: "80%", 44 44 + left: "50%", 45 45 + top: "50%", 46 46 + width: "80%", 47 47 + }, 36 48 }); 37 49 38 50 export interface ColorWheelProps extends StyleXComponentProps< ··· 40 52 > { 41 53 size?: Size; 42 54 width: number; 55 55 + children?: React.ReactNode; 43 56 } 44 57 45 58 export function ColorWheel({ 46 59 style, 47 60 size: sizeProp, 48 61 width, 62 62 + children, 49 63 ...props 50 64 }: ColorWheelProps) { 51 65 const size = sizeProp || use(SizeContext); ··· 54 68 return ( 55 69 <AriaColorWheel 56 70 {...props} 57 57 - {...stylex.props(style)} 71 71 + {...stylex.props(styles.wrapper, style)} 58 72 data-size={size} 59 73 outerRadius={width} 60 74 innerRadius={width - trackWidth} 61 75 > 62 76 <ColorWheelTrack {...stylex.props(styles.track)} /> 63 77 <ColorThumb style={styles.thumb} /> 78 78 + {Boolean(children) && ( 79 79 + <Flex style={styles.children} align="center" justify="center"> 80 80 + {children} 81 81 + </Flex> 82 82 + )} 64 83 </AriaColorWheel> 65 84 ); 66 85 }

+14 -3

apps/docs/src/components/combobox/index.tsx

reviewed

··· 125 125 {prefix != null && ( 126 126 <div {...stylex.props(inputStyles.addon)}>{prefix}</div> 127 127 )} 128 128 - <Input {...stylex.props(inputStyles.input)} placeholder={placeholder} /> 128 128 + <Input 129 129 + {...stylex.props(inputStyles.input)} 130 130 + placeholder={placeholder} 131 131 + onKeyDown={(e) => { 132 132 + // Prevent form submission when Enter is pressed in the combobox input 133 133 + // React Aria Components handles Enter key for selection when menu is open 134 134 + // We prevent default to stop form submission in all cases 135 135 + if (e.key === "Enter") { 136 136 + e.preventDefault(); 137 137 + } 138 138 + }} 139 139 + /> 129 140 <SuffixIcon 130 141 suffix={ 131 142 <> ··· 138 149 validationState={validationState} 139 150 /> 140 151 </Button> 141 141 - <Description>{description}</Description> 142 142 - <FieldErrorMessage>{errorMessage}</FieldErrorMessage> 152 152 + {description && <Description>{description}</Description>} 153 153 + {errorMessage && <FieldErrorMessage>{errorMessage}</FieldErrorMessage>} 143 154 <Popover 144 155 containerPadding={8} 145 156 shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}

-2

apps/docs/src/components/context-menu/index.tsx

reviewed

··· 113 113 [overlayTriggerState, setPosition], 114 114 ); 115 115 116 116 - // eslint-disable-next-line @eslint-react/no-children-count 117 116 if (Children.count(children) !== 1) { 118 117 throw new Error("ContextMenuTrigger must have exactly one child"); 119 118 } ··· 121 120 /* eslint-disable react-hooks/refs */ 122 121 return ( 123 122 <> 124 124 - {/* eslint-disable-next-line @eslint-react/no-clone-element */} 125 123 {cloneElement( 126 124 children as React.ReactElement<React.HTMLAttributes<HTMLElement>>, 127 125 mergeProps(props, {

+1 -1

apps/docs/src/components/disclosure/index.tsx

reviewed

··· 39 39 [mediaQueries.supportsSquircle]: radius["2xl"], 40 40 }, 41 41 borderWidth: 0, 42 42 - // eslint-disable-next-line @stylexjs/valid-styles 42 42 + 43 43 cornerShape: "squircle", 44 44 gap: spacing["2"], 45 45 alignItems: "center",

+2 -2

apps/docs/src/components/file-drop-zone/index.tsx

reviewed

··· 48 48 ":is([data-drop-target])": "solid", 49 49 }, 50 50 borderWidth: 2, 51 51 - // eslint-disable-next-line @stylexjs/valid-styles 51 51 + 52 52 cornerShape: "squircle", 53 53 overflow: "hidden", 54 54 backgroundColor: { ··· 82 82 extends 83 83 Omit<AriaFileTriggerProps, "className" | "style">, 84 84 Pick<DropZoneProps, "isDisabled"> { 85 85 - style?: stylex.StyleXStyles | stylex.StyleXStyles[]; 85 85 + style?: stylex.StyleXStyles | Array<stylex.StyleXStyles>; 86 86 onAddFiles?: (files: Array<File>) => void; 87 87 } 88 88

+2 -2

apps/docs/src/components/footer/index.tsx

reviewed

··· 120 120 alignItems: "center", 121 121 color: { 122 122 default: uiColor.text1, 123 123 - ":hover": uiColor.text2, 123 123 + ":is([data-hovered])": uiColor.text2, 124 124 }, 125 125 cursor: "pointer", 126 126 display: "inline-flex", ··· 181 181 flexDirection: "row", 182 182 }, 183 183 subscribeInputField: { 184 184 - flex: "1", 184 184 + flexGrow: 1, 185 185 }, 186 186 }); 187 187

+2 -1

apps/docs/src/components/header-layout/index.tsx

reviewed

··· 10 10 11 11 const styles = stylex.create({ 12 12 root: { 13 13 - backgroundColor: uiColor.bg, 13 13 + backgroundColor: uiColor.bgSubtle, 14 14 containerType: "inline-size", 15 15 display: "flex", 16 16 flexDirection: "column", ··· 21 21 "--page-content-max-width": maxWidth || "1280px", 22 22 }), 23 23 header: { 24 24 + backgroundColor: uiColor.bg, 24 25 flexShrink: 0, 25 26 }, 26 27 page: {

+15

apps/docs/src/components/hover-card/index.tsx

reviewed

··· 27 27 shadow: shadow.md, 28 28 }, 29 29 content: { 30 30 + outline: "none", 30 31 position: "relative", 31 32 paddingBottom: spacing["2"], 32 33 paddingLeft: spacing["2"], ··· 44 45 showDelay?: number; 45 46 hideDelay?: number; 46 47 } 48 48 + 49 49 + /** Ignore leave events for this long after opening to avoid spurious pointerleave from layout shifts when popover mounts */ 50 50 + const IGNORE_LEAVE_AFTER_OPEN_MS = 150; 47 51 48 52 function HoverCardInner({ 49 53 trigger, ··· 66 70 const popoverStyles = usePopoverStyles(); 67 71 const showTimeoutRef = useRef<NodeJS.Timeout | null>(null); 68 72 const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null); 73 73 + const openedAtRef = useRef<number | null>(null); 69 74 const { hoverProps } = useHover({ 70 75 onHoverStart: () => { 71 76 if (showTimeoutRef.current) return; ··· 75 80 } 76 81 showTimeoutRef.current = setTimeout(() => { 77 82 overlayTriggerState?.open(); 83 83 + openedAtRef.current = Date.now(); 78 84 showTimeoutRef.current = null; 79 85 }, showDelay); 80 86 }, 81 87 onHoverEnd: () => { 88 88 + // Ignore leave shortly after opening - popover mount can cause spurious pointerleave 89 89 + // (e.g. from scroll lock shifting layout or DOM updates when overlay appears) 90 90 + if ( 91 91 + openedAtRef.current && 92 92 + Date.now() - openedAtRef.current < IGNORE_LEAVE_AFTER_OPEN_MS 93 93 + ) { 94 94 + return; 95 95 + } 96 96 + openedAtRef.current = null; 82 97 if (showTimeoutRef.current) { 83 98 clearTimeout(showTimeoutRef.current); 84 99 showTimeoutRef.current = null;

+7 -2

apps/docs/src/components/icon-button/index.tsx

reviewed

··· 58 58 }: IconButtonProps) => { 59 59 const size = sizeProp || use(SizeContext); 60 60 61 61 + const buttonChildren = 62 62 + typeof children === "function" 63 63 + ? (children as () => React.ReactNode)() 64 64 + : children; 65 65 + 61 66 if (!label) { 62 67 return ( 63 68 <Button ··· 65 70 style={[styles.button as unknown as stylex.StyleXStyles, style]} 66 71 {...props} 67 72 > 68 68 - {children} 73 73 + {buttonChildren} 69 74 </Button> 70 75 ); 71 76 } ··· 81 86 style={[styles.button as unknown as stylex.StyleXStyles, style]} 82 87 {...props} 83 88 > 84 84 - {children} 89 89 + {buttonChildren} 85 90 </Button> 86 91 </Tooltip> 87 92 );

+1 -1

apps/docs/src/components/kbd/index.tsx

reviewed

··· 18 18 }, 19 19 borderStyle: "solid", 20 20 borderWidth: "1px", 21 21 - // eslint-disable-next-line @stylexjs/valid-styles 21 21 + 22 22 cornerShape: "squircle", 23 23 backgroundColor: uiColor.component2, 24 24 boxShadow: `0 2px 0 1px ${uiColor.border2}`,

+4 -2

apps/docs/src/components/label/index.tsx

reviewed

··· 12 12 import type { Size, StyleXComponentProps } from "../theme/types"; 13 13 14 14 import { SizeContext } from "../context"; 15 15 + import { uiColor } from "../theme/color.stylex"; 15 16 import { critical, ui } from "../theme/semantic-color.stylex"; 16 17 import { fontSize, fontWeight, lineHeight } from "../theme/typography.stylex"; 17 18 18 19 const styles = stylex.create({ 19 20 label: { 21 21 + color: uiColor.text1, 20 22 fontWeight: fontWeight["semibold"], 21 23 22 24 fontSize: { 23 23 - ":is([data-size=lg])": fontSize["base"], 24 24 - ":is([data-size=md])": fontSize["sm"], 25 25 + ":is([data-size=lg])": fontSize["sm"], 26 26 + ":is([data-size=md])": fontSize["xs"], 25 27 ":is([data-size=sm])": fontSize["xs"], 26 28 }, 27 29 lineHeight: {

+1 -1

apps/docs/src/components/menubar/index.tsx

reviewed

··· 46 46 }, 47 47 borderStyle: "solid", 48 48 borderWidth: 1, 49 49 - // eslint-disable-next-line @stylexjs/valid-styles 49 49 + 50 50 cornerShape: "squircle", 51 51 gap: spacing["1"], 52 52 alignItems: "center",

+185 -26

apps/docs/src/components/navbar/Navbar.tsx

reviewed

··· 1 1 "use client"; 2 2 + 2 3 import type { LinkProps } from "react-aria-components"; 3 4 4 5 import * as stylex from "@stylexjs/stylex"; ··· 93 94 ":is([data-navbar-open])": `min-content min-content min-content`, 94 95 ":is([data-navbar-open]):has([data-navbar-action])": `min-content min-content min-content min-content`, 95 96 }, 96 96 - rowGap: spacing["8"], 97 97 + rowGap: { 98 98 + default: spacing["4"], 99 99 + [containerBreakpoints.sm]: spacing["8"], 100 100 + }, 97 101 marginLeft: "auto", 98 102 marginRight: "auto", 99 103 maxWidth: "var(--page-content-max-width)", ··· 118 122 width: "100%", 119 123 }, 120 124 logo: { 125 125 + "--underline-opacity": { 126 126 + default: 0, 127 127 + ":is([aria-current=page])": 1, 128 128 + ":is([data-active])": 1, 129 129 + ":is([data-status=active])": 1, 130 130 + }, 131 131 + gap: spacing["2"], 132 132 + textDecoration: "none", 121 133 alignItems: "center", 134 134 + color: { 135 135 + default: primaryColor.text2, 136 136 + }, 137 137 + cursor: "pointer", 122 138 display: "flex", 139 139 + fontFamily: fontFamily["sans"], 140 140 + fontWeight: fontWeight["normal"], 141 141 + position: "relative", 142 142 + width: { 143 143 + default: "100%", 144 144 + [containerBreakpoints.sm]: "auto", 145 145 + }, 146 146 + }, 147 147 + logoContent: { 148 148 + position: "relative", 149 149 + 150 150 + "::after": { 151 151 + backgroundColor: "currentColor", 152 152 + content: '""', 153 153 + display: "block", 154 154 + opacity: "var(--underline-opacity)", 155 155 + pointerEvents: "none", 156 156 + position: "absolute", 157 157 + bottom: `calc(${spacing["1"]} * -1)`, 158 158 + height: "2px", 159 159 + left: 0, 160 160 + right: 0, 161 161 + width: "100%", 162 162 + }, 163 163 + }, 164 164 + logoImage: { 165 165 + display: "block", 166 166 + objectFit: "contain", 167 167 + height: "40px", 168 168 + width: "auto", 123 169 }, 124 170 separator: { 125 171 gridArea: "separator", ··· 128 174 }, 129 175 navigation: { 130 176 gridArea: "navigation", 131 131 - flex: "1", 132 177 gap: { 133 178 default: spacing["6"], 134 179 [containerBreakpoints.sm]: spacing["8"], ··· 146 191 default: "column", 147 192 [containerBreakpoints.sm]: "row", 148 193 }, 194 194 + flexGrow: 1, 149 195 }, 150 196 navigationJustifyLeft: { 151 197 justifyContent: "flex-start", ··· 194 240 ":is([data-breadcrumb][data-current] *)": uiColor.text2, 195 241 }, 196 242 cursor: "pointer", 197 197 - display: "inline-flex", 243 243 + display: { 244 244 + default: "flex", 245 245 + [containerBreakpoints.sm]: "inline-flex", 246 246 + }, 198 247 fontFamily: fontFamily["sans"], 199 248 fontWeight: fontWeight["normal"], 200 249 position: "relative", 250 250 + width: { 251 251 + default: "100%", 252 252 + [containerBreakpoints.sm]: "auto", 253 253 + }, 201 254 202 255 // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 203 256 ":is(*) svg": { 204 257 height: "1.2em", 205 258 width: "1.2em", 206 259 }, 260 260 + }, 261 261 + linkContent: { 262 262 + position: "relative", 207 263 208 264 "::after": { 209 265 backgroundColor: "currentColor", ··· 221 277 }, 222 278 }); 223 279 280 280 + // ============================================================================= 281 281 + // Mobile Menu Context 282 282 + // ============================================================================= 283 283 + 284 284 + interface MobileMenuContextValue { 285 285 + isOpen: boolean; 286 286 + setIsOpen: (isOpen: boolean) => void; 287 287 + closeMenu: () => void; 288 288 + } 289 289 + 290 290 + const MobileMenuContext = React.createContext<MobileMenuContextValue | null>( 291 291 + null, 292 292 + ); 293 293 + 294 294 + function useMobileMenu() { 295 295 + const context = use(MobileMenuContext); 296 296 + if (!context) { 297 297 + throw new Error("useMobileMenu must be used within Navbar"); 298 298 + } 299 299 + return context; 300 300 + } 301 301 + 224 302 // Define subcomponents first so they can be referenced in Navbar 225 303 export interface NavbarLogoProps extends StyleXComponentProps< 226 304 React.ComponentProps<"div"> 227 227 - > {} 305 305 + > { 306 306 + /** 307 307 + * Whether the logo link is currently active. 308 308 + */ 309 309 + isActive?: boolean; 310 310 + /** 311 311 + * Optional logo image source. If provided, displays the image instead of text. 312 312 + */ 313 313 + logoSrc?: string | null; 314 314 + } 228 315 229 316 /** 230 317 * NavbarLogo component for displaying the logo in the navbar. 231 318 */ 232 232 - export const NavbarLogo = ({ style, ...props }: NavbarLogoProps) => { 319 319 + export const NavbarLogo = ({ 320 320 + style, 321 321 + isActive, 322 322 + logoSrc, 323 323 + ...props 324 324 + }: NavbarLogoProps) => { 233 325 return ( 234 234 - <div {...props} {...stylex.props(styles.logo, style)}> 235 235 - {props.children} 326 326 + <div 327 327 + {...props} 328 328 + data-active={isActive} 329 329 + {...stylex.props(styles.logo, style)} 330 330 + > 331 331 + {logoSrc ? ( 332 332 + <img src={logoSrc} alt="kich" {...stylex.props(styles.logoImage)} /> 333 333 + ) : ( 334 334 + <span {...stylex.props(styles.logoContent)}>{props.children}</span> 335 335 + )} 236 336 </div> 237 337 ); 238 338 }; ··· 308 408 } 309 409 310 410 export function NavbarLink({ style, isActive, ...props }: NavbarLinkProps) { 411 411 + const { closeMenu } = useMobileMenu(); 412 412 + 311 413 return ( 312 414 <Link 313 415 data-active={isActive} 314 416 {...props} 315 417 {...stylex.props(styles.link, style)} 316 316 - /> 418 418 + onPress={(e) => { 419 419 + closeMenu(); 420 420 + props.onPress?.(e); 421 421 + }} 422 422 + onClick={(e) => { 423 423 + // Also handle native click events as a fallback 424 424 + closeMenu(); 425 425 + props.onClick?.(e); 426 426 + }} 427 427 + > 428 428 + <span {...stylex.props(styles.linkContent)}> 429 429 + {typeof props.children === "function" 430 430 + ? props.children( 431 431 + {} as Parameters<NonNullable<typeof props.children>>[0], 432 432 + ) 433 433 + : props.children} 434 434 + </span> 435 435 + </Link> 317 436 ); 318 437 } 319 438 ··· 335 454 }: NavbarProps) => { 336 455 const size = sizeProp || use(SizeContext); 337 456 const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); 457 457 + const navRef = React.useRef<HTMLElement>(null); 458 458 + 459 459 + const closeMenu = React.useCallback(() => { 460 460 + setIsMobileMenuOpen(false); 461 461 + }, []); 462 462 + 463 463 + const mobileMenuContextValue = React.useMemo<MobileMenuContextValue>( 464 464 + () => ({ 465 465 + isOpen: isMobileMenuOpen, 466 466 + setIsOpen: setIsMobileMenuOpen, 467 467 + closeMenu, 468 468 + }), 469 469 + [isMobileMenuOpen, closeMenu], 470 470 + ); 471 471 + 472 472 + // Use effect to handle click events via event delegation 473 473 + React.useEffect(() => { 474 474 + const nav = navRef.current; 475 475 + if (!nav) return; 476 476 + 477 477 + const handleClick = (e: MouseEvent) => { 478 478 + // Close menu when any link or button inside navbar is clicked 479 479 + // Exclude the hamburger button (it toggles the menu instead) 480 480 + const target = e.target as HTMLElement; 481 481 + const link = target.closest("a, button"); 482 482 + const hamburgerButton = target.closest('[aria-label="Open menu"]'); 483 483 + if (link && link !== nav && !hamburgerButton) { 484 484 + closeMenu(); 485 485 + } 486 486 + }; 487 487 + 488 488 + nav.addEventListener("click", handleClick); 489 489 + return () => { 490 490 + nav.removeEventListener("click", handleClick); 491 491 + }; 492 492 + }, [closeMenu]); 338 493 339 494 return ( 340 495 <SizeContext value={size}> 341 341 - <div {...props} {...stylex.props(styles.wrapper, style)}> 342 342 - <nav 343 343 - data-navbar-open={isMobileMenuOpen || undefined} 344 344 - {...stylex.props(styles.navbar, ui.bg, style)} 345 345 - > 346 346 - {children} 347 347 - <Separator 348 348 - style={styles.separator as unknown as stylex.StyleXStyles} 349 349 - /> 350 350 - <IconButton 351 351 - aria-label="Open menu" 352 352 - variant="tertiary" 353 353 - style={styles.hamburgerButton} 354 354 - onPress={() => setIsMobileMenuOpen(!isMobileMenuOpen)} 496 496 + <MobileMenuContext value={mobileMenuContextValue}> 497 497 + <div {...props} {...stylex.props(styles.wrapper, style)}> 498 498 + <nav 499 499 + ref={navRef} 500 500 + data-navbar-open={isMobileMenuOpen || undefined} 501 501 + {...stylex.props(styles.navbar, ui.bg, style)} 355 502 > 356 356 - {isMobileMenuOpen ? <X /> : <Menu />} 357 357 - </IconButton> 358 358 - </nav> 359 359 - </div> 503 503 + {children} 504 504 + <Separator 505 505 + style={styles.separator as unknown as stylex.StyleXStyles} 506 506 + /> 507 507 + <IconButton 508 508 + size="lg" 509 509 + aria-label="Open menu" 510 510 + variant="tertiary" 511 511 + style={styles.hamburgerButton} 512 512 + onPress={() => setIsMobileMenuOpen(!isMobileMenuOpen)} 513 513 + > 514 514 + {isMobileMenuOpen ? <X /> : <Menu />} 515 515 + </IconButton> 516 516 + </nav> 517 517 + </div> 518 518 + </MobileMenuContext> 360 519 </SizeContext> 361 520 ); 362 521 };

+5 -5

apps/docs/src/components/navbar/NavbarMenu.tsx

reviewed

··· 42 42 43 43 gridTemplateAreas: { 44 44 default: '"title"', 45 45 - ":has([data-description])": ` 45 45 + ":has(:is([data-description]))": ` 46 46 "title" 47 47 "description" 48 48 `, 49 49 - ":has([data-icon])": ` 49 49 + ":has(:is([data-icon]))": ` 50 50 "icon title" 51 51 `, 52 52 ":has([data-icon]):has([data-description])": ` ··· 55 55 `, 56 56 }, 57 57 gridTemplateColumns: { 58 58 - ":has([data-icon])": "min-content 1fr", 58 58 + ":has(:is([data-icon]))": "min-content 1fr", 59 59 ":has([data-icon]):has([data-description])": "min-content 1fr", 60 60 }, 61 61 }, ··· 69 69 alignItems: "center", 70 70 backgroundColor: { 71 71 default: uiColor.component2, 72 72 - [stylex.when.ancestor(":hover")]: uiColor.component1, 72 72 + [stylex.when.ancestor(":is([data-hovered])")]: uiColor.component1, 73 73 }, 74 74 color: uiColor.text1, 75 75 display: "flex", ··· 218 218 hoverProps, 219 219 pressProps, 220 220 )} 221 221 - data-hovered={isHovered} 221 221 + data-hovered={isHovered || undefined} 222 222 data-pressed={isPressed} 223 223 {...stylex.props( 224 224 stylex.defaultMarker(),

+46 -20

apps/docs/src/components/number-field/index.tsx

reviewed

··· 12 12 import { 13 13 NumberField as AriaNumberField, 14 14 Button, 15 15 - Group, 16 15 Input, 17 16 NumberFieldStateContext, 18 17 } from "react-aria-components"; ··· 88 87 input: { 89 88 cursor: "text", 90 89 }, 91 91 - buttons: { 92 92 - display: "flex", 93 93 - }, 94 90 button: { 95 95 - borderWidth: 0, 91 91 + padding: 0, 96 92 alignItems: "center", 93 93 + aspectRatio: 1, 97 94 display: "flex", 98 95 flexGrow: 1, 96 96 + flexShrink: 0, 99 97 justifyContent: "center", 100 98 borderBottomWidth: 0, 101 99 borderLeftStyle: "solid", 102 102 - borderLeftWidth: 1, 100 100 + borderLeftWidth: 0, 103 101 borderRightWidth: 0, 104 102 borderTopWidth: 0, 105 103 minHeight: 0, ··· 117 115 ":disabled": uiColor.text1, 118 116 }, 119 117 }, 118 118 + buttonLeft: { 119 119 + borderRightStyle: "solid", 120 120 + borderRightWidth: 1, 121 121 + }, 122 122 + buttonRight: { 123 123 + borderLeftStyle: "solid", 124 124 + borderLeftWidth: 1, 125 125 + }, 126 126 + inputWithStepper: { 127 127 + textAlign: "center", 128 128 + paddingLeft: spacing["2"], 129 129 + paddingRight: spacing["2"], 130 130 + }, 120 131 }); 121 132 122 133 interface NumberFieldContentProps { ··· 152 163 variant, 153 164 validationState: isInvalid ? "invalid" : validationState, 154 165 }); 155 155 - const buttonStyles = stylex.props( 156 156 - styles.button, 157 157 - ui.borderInteractive, 158 158 - ui.bgAction, 159 159 - ); 160 166 161 167 return ( 162 168 <> ··· 169 175 style={inputStyles.wrapper} 170 176 onClick={() => inputRef.current?.focus()} 171 177 > 178 178 + {!hideStepper && ( 179 179 + <Button 180 180 + slot="decrement" 181 181 + {...stylex.props( 182 182 + styles.button, 183 183 + styles.buttonLeft, 184 184 + ui.borderInteractive, 185 185 + ui.bgAction, 186 186 + )} 187 187 + > 188 188 + <Minus /> 189 189 + </Button> 190 190 + )} 172 191 {prefix != null && ( 173 192 <div {...stylex.props(inputStyles.addon)}>{prefix}</div> 174 193 )} 175 194 <Input 176 195 placeholder={placeholder} 177 196 ref={inputRef} 178 178 - {...stylex.props(styles.input, inputStyles.input)} 197 197 + {...stylex.props( 198 198 + styles.input, 199 199 + inputStyles.input, 200 200 + !hideStepper && styles.inputWithStepper, 201 201 + )} 179 202 /> 180 203 <SuffixIcon 181 204 suffix={suffix} ··· 184 207 validationState={validationState} 185 208 /> 186 209 {!hideStepper && ( 187 187 - <Group {...stylex.props(styles.buttons)}> 188 188 - <Button slot="decrement" {...buttonStyles}> 189 189 - <Minus /> 190 190 - </Button> 191 191 - <Button slot="increment" {...buttonStyles}> 192 192 - <Plus /> 193 193 - </Button> 194 194 - </Group> 210 210 + <Button 211 211 + slot="increment" 212 212 + {...stylex.props( 213 213 + styles.button, 214 214 + styles.buttonRight, 215 215 + ui.borderInteractive, 216 216 + ui.bgAction, 217 217 + )} 218 218 + > 219 219 + <Plus /> 220 220 + </Button> 195 221 )} 196 222 </NumberInputWrapper> 197 223 <Description>{description}</Description>

+2 -1

apps/docs/src/components/radio/index.tsx

reviewed

··· 140 140 export function Radio({ children, style, ...props }: RadioProps) { 141 141 return ( 142 142 <AriaRadio {...props} {...stylex.props(styles.wrapper, style)}> 143 143 - {({ isSelected, isDisabled }) => ( 143 143 + {({ isSelected, isDisabled, isHovered }) => ( 144 144 <> 145 145 <div 146 146 + data-hovered={isHovered || undefined} 146 147 {...stylex.props( 147 148 styles.radio, 148 149 isDisabled

+3 -3

apps/docs/src/components/range-calendar/index.tsx

reviewed

··· 7 7 import * as stylex from "@stylexjs/stylex"; 8 8 import { ChevronLeft, ChevronRight } from "lucide-react"; 9 9 import { 10 10 - RangeCalendar as AriaRangeCalendar, 10 10 + RangeCalendar as AriaRangeCalendarComponent, 11 11 CalendarCell, 12 12 CalendarGrid, 13 13 CalendarGridBody, ··· 54 54 const calendarStyles = useCalendarStyles({ type: "range-calendar" }); 55 55 56 56 return ( 57 57 - <AriaRangeCalendar 57 57 + <AriaRangeCalendarComponent 58 58 visibleDuration={visibleDuration} 59 59 {...rest} 60 60 {...stylex.props(styles.root, style)} ··· 101 101 ))} 102 102 </Flex> 103 103 {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>} 104 104 - </AriaRangeCalendar> 104 104 + </AriaRangeCalendarComponent> 105 105 ); 106 106 }

+4 -4

apps/docs/src/components/segmented-control/index.tsx

reviewed

··· 30 30 default: radius["lg"], 31 31 [mediaQueries.supportsSquircle]: radius["4xl"], 32 32 }, 33 33 - // eslint-disable-next-line @stylexjs/valid-styles 33 33 + 34 34 cornerShape: "squircle", 35 35 gap: spacing["2"], 36 36 alignItems: "center", ··· 50 50 [mediaQueries.supportsSquircle]: radius["3xl"], 51 51 }, 52 52 borderWidth: 0, 53 53 - // eslint-disable-next-line @stylexjs/valid-styles 53 53 + 54 54 cornerShape: "squircle", 55 55 alignItems: "center", 56 56 backgroundColor: "transparent", 57 57 boxSizing: "border-box", 58 58 color: { 59 59 default: uiColor.text1, 60 60 + ":is([data-hovered])": uiColor.text2, 60 61 ":is([data-selected])": uiColor.text2, 61 61 - ":hover": uiColor.text2, 62 62 }, 63 63 display: "flex", 64 64 flexGrow: 1, ··· 87 87 default: radius["md"], 88 88 [mediaQueries.supportsSquircle]: radius["3xl"], 89 89 }, 90 90 - // eslint-disable-next-line @stylexjs/valid-styles 90 90 + 91 91 cornerShape: "squircle", 92 92 backgroundColor: uiColor.bgSubtle, 93 93 boxShadow: shadow.sm,

+1 -1

apps/docs/src/components/separator/index.tsx

reviewed

··· 11 11 separator: { 12 12 margin: 0, 13 13 borderWidth: 0, 14 14 - backgroundColor: uiColor.border2, 14 14 + backgroundColor: uiColor.component3, 15 15 height: { 16 16 default: "1px", 17 17 ":is([aria-orientation=vertical])": "100%",

+2 -3

apps/docs/src/components/sidebar/index.tsx

reviewed

··· 76 76 [mediaQueries.supportsSquircle]: radius["3xl"], 77 77 }, 78 78 borderWidth: 0, 79 79 - // eslint-disable-next-line @stylexjs/valid-styles 79 79 + 80 80 cornerShape: "squircle", 81 81 textDecoration: "none", 82 82 alignItems: "center", ··· 168 168 const focusActiveItem = () => { 169 169 const activeItem = 170 170 document.querySelector<HTMLLIElement>("[data-active=true]"); 171 171 - console.log(activeItem); 172 171 activeItem?.scrollIntoView({ behavior: "instant" }); 173 172 }; 174 173 ··· 314 313 hoverProps, 315 314 pressProps, 316 315 )} 317 317 - data-hovered={isHovered} 316 316 + data-hovered={isHovered || undefined} 318 317 data-pressed={isPressed} 319 318 data-active={isActive} 320 319 {...stylex.props(

+1 -1

apps/docs/src/components/skeleton/index.tsx

reviewed

··· 57 57 default: radius["md"], 58 58 [mediaQueries.supportsSquircle]: radius["4xl"], 59 59 }, 60 60 - // eslint-disable-next-line @stylexjs/valid-styles 60 60 + 61 61 cornerShape: "squircle", 62 62 }, 63 63 sizeSm: {

+3 -4

apps/docs/src/components/slider/index.tsx

reviewed

··· 88 88 borderWidth: 1, 89 89 backgroundColor: { 90 90 default: uiColor.component1, 91 91 - ":is([data-dragging=true]):is([data-dragging=true])": uiColor.component3, 92 92 - ":hover": uiColor.component2, 91 91 + ":is([data-dragging=true])": uiColor.component3, 92 92 + ":is([data-hovered])": uiColor.component2, 93 93 }, 94 94 boxShadow: shadow.md, 95 95 content: "''", ··· 184 184 showValueLabel?: boolean; 185 185 } 186 186 187 187 - export function Slider<T extends number | number[]>({ 187 187 + export function Slider<T extends number | Array<number>>({ 188 188 label, 189 189 thumbLabels, 190 190 style, ··· 223 223 )} 224 224 {state.values.map((_, i) => ( 225 225 <SliderThumb 226 226 - // eslint-disable-next-line @eslint-react/no-array-index-key 227 226 key={i} 228 227 index={i} 229 228 aria-label={thumbLabels?.[i]}

+307

apps/docs/src/components/star-rating/index.tsx

reviewed

··· 1 1 + "use client"; 2 2 + 3 3 + import * as stylex from "@stylexjs/stylex"; 4 4 + import { Star } from "lucide-react"; 5 5 + import { useCallback, useRef, useState } from "react"; 6 6 + import { mergeProps, useKeyboard, usePress } from "react-aria"; 7 7 + 8 8 + import type { StyleXComponentProps } from "../theme/types"; 9 9 + 10 10 + import { Flex } from "../flex"; 11 11 + import { primaryColor, uiColor } from "../theme/color.stylex"; 12 12 + import { spacing } from "../theme/spacing.stylex"; 13 13 + import { Text } from "../typography/text"; 14 14 + 15 15 + const MAX_STARS = 5; 16 16 + 17 17 + const styles = stylex.create({ 18 18 + stars: { 19 19 + gap: spacing["0.5"], 20 20 + alignItems: "center", 21 21 + display: "flex", 22 22 + }, 23 23 + starsInput: { 24 24 + cursor: "pointer", 25 25 + }, 26 26 + starsInputDisabled: { 27 27 + cursor: "not-allowed", 28 28 + }, 29 29 + starFilled: { 30 30 + color: primaryColor.solid2, 31 31 + }, 32 32 + starEmpty: { 33 33 + color: uiColor.component3, 34 34 + }, 35 35 + starButton: { 36 36 + margin: 0, 37 37 + padding: 0, 38 38 + borderColor: "transparent", 39 39 + borderStyle: "none", 40 40 + borderWidth: 0, 41 41 + alignItems: "center", 42 42 + backgroundColor: "transparent", 43 43 + cursor: "pointer", 44 44 + display: "flex", 45 45 + }, 46 46 + starButtonDisabled: { 47 47 + cursor: "not-allowed", 48 48 + opacity: 0.5, 49 49 + }, 50 50 + halfStarWrapper: { 51 51 + display: "inline-flex", 52 52 + position: "relative", 53 53 + height: "var(--star-size, 1rem)", 54 54 + width: "var(--star-size, 1rem)", 55 55 + }, 56 56 + halfStarBase: { 57 57 + position: "absolute", 58 58 + left: 0, 59 59 + top: 0, 60 60 + }, 61 61 + halfStarClip: { 62 62 + overflow: "hidden", 63 63 + clipPath: "inset(0 50% 0 0)", 64 64 + position: "absolute", 65 65 + left: 0, 66 66 + top: 0, 67 67 + }, 68 68 + }); 69 69 + 70 70 + export interface StarRatingProps extends StyleXComponentProps< 71 71 + React.HTMLAttributes<HTMLDivElement> 72 72 + > { 73 73 + /** Rating from 0 to 5 (supports 0.5 steps) */ 74 74 + rating: number; 75 75 + /** Optional review count to display */ 76 76 + reviewCount?: number; 77 77 + /** Size of the star icons in pixels */ 78 78 + size?: number; 79 79 + /** Whether to show the review count */ 80 80 + showReviewCount?: boolean; 81 81 + } 82 82 + 83 83 + /** 84 84 + * Displays a read-only star rating with half-star support. 85 85 + */ 86 86 + export function StarRating({ 87 87 + rating, 88 88 + reviewCount, 89 89 + size = 16, 90 90 + showReviewCount = true, 91 91 + style, 92 92 + ...props 93 93 + }: StarRatingProps) { 94 94 + const clamped = Math.min(5, Math.max(0, rating)); 95 95 + const fullStars = Math.floor(clamped); 96 96 + const remainder = clamped - fullStars; 97 97 + const showHalf = remainder >= 0.25 && remainder < 0.75; 98 98 + const showFullLast = remainder >= 0.75; 99 99 + const filledCount = fullStars + (showFullLast ? 1 : 0); 100 100 + const emptyCount = 5 - filledCount - (showHalf ? 1 : 0); 101 101 + 102 102 + return ( 103 103 + <Flex direction="row" align="center" gap="1" style={style} {...props}> 104 104 + <div 105 105 + {...stylex.props(styles.stars)} 106 106 + style={{ "--star-size": `${String(size)}px` } as React.CSSProperties} 107 107 + > 108 108 + {Array.from({ length: filledCount }, (_, i) => ( 109 109 + <Star 110 110 + key={`full-${String(i)}`} 111 111 + size={size} 112 112 + fill="currentColor" 113 113 + {...stylex.props(styles.starFilled)} 114 114 + /> 115 115 + ))} 116 116 + {showHalf && ( 117 117 + <span {...stylex.props(styles.halfStarWrapper)}> 118 118 + <Star 119 119 + size={size} 120 120 + {...stylex.props(styles.starEmpty, styles.halfStarBase)} 121 121 + /> 122 122 + <Star 123 123 + size={size} 124 124 + fill="currentColor" 125 125 + {...stylex.props(styles.starFilled, styles.halfStarClip)} 126 126 + /> 127 127 + </span> 128 128 + )} 129 129 + {Array.from({ length: emptyCount }, (_, i) => ( 130 130 + <Star 131 131 + key={`empty-${String(i)}`} 132 132 + size={size} 133 133 + {...stylex.props(styles.starEmpty)} 134 134 + /> 135 135 + ))} 136 136 + </div> 137 137 + {showReviewCount && 138 138 + typeof reviewCount === "number" && 139 139 + reviewCount > 0 && ( 140 140 + <Text size="xs" variant="secondary"> 141 141 + ({reviewCount}) 142 142 + </Text> 143 143 + )} 144 144 + </Flex> 145 145 + ); 146 146 + } 147 147 + 148 148 + export interface StarRatingInputProps extends StyleXComponentProps< 149 149 + Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> 150 150 + > { 151 151 + /** Current value (1–5). Use with onChange for controlled mode. */ 152 152 + value?: number; 153 153 + /** Default value when uncontrolled. */ 154 154 + defaultValue?: number; 155 155 + /** Called when the user selects a new rating. */ 156 156 + onChange?: (value: number) => void; 157 157 + /** Whether the input is disabled. */ 158 158 + isDisabled?: boolean; 159 159 + /** Size of the star icons in pixels */ 160 160 + size?: number; 161 161 + /** Accessible label for the rating input. */ 162 162 + "aria-label"?: string; 163 163 + } 164 164 + 165 165 + /** 166 166 + * Interactive star rating input for user selection. 167 167 + * Supports keyboard (arrow keys) and pointer interaction. 168 168 + */ 169 169 + export function StarRatingInput({ 170 170 + value: valueProp, 171 171 + defaultValue = 0, 172 172 + onChange, 173 173 + isDisabled = false, 174 174 + size = 16, 175 175 + style, 176 176 + "aria-label": ariaLabel = "Rating", 177 177 + ...props 178 178 + }: StarRatingInputProps) { 179 179 + const [valueState, setValueState] = useState(defaultValue); 180 180 + const value = valueProp === undefined ? valueState : valueProp; 181 181 + const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); 182 182 + const starsRef = useRef<HTMLDivElement>(null); 183 183 + 184 184 + const displayValue = hoveredIndex === null ? value : hoveredIndex + 1; 185 185 + const clampedValue = Math.min(MAX_STARS, Math.max(0, displayValue)); 186 186 + 187 187 + const handleStarsMouseMove = useCallback( 188 188 + (e: React.MouseEvent<HTMLDivElement>) => { 189 189 + if (isDisabled) return; 190 190 + const el = starsRef.current; 191 191 + if (!el) return; 192 192 + const rect = el.getBoundingClientRect(); 193 193 + const x = e.clientX - rect.left; 194 194 + const index = Math.min( 195 195 + MAX_STARS - 1, 196 196 + Math.max(0, Math.floor((x / rect.width) * MAX_STARS)), 197 197 + ); 198 198 + setHoveredIndex(index); 199 199 + }, 200 200 + [isDisabled], 201 201 + ); 202 202 + 203 203 + const handleStarsMouseLeave = useCallback(() => { 204 204 + setHoveredIndex(null); 205 205 + }, []); 206 206 + 207 207 + const setValue = useCallback( 208 208 + (newValue: number) => { 209 209 + const clamped = Math.min(MAX_STARS, Math.max(0, newValue)); 210 210 + if (valueProp === undefined) { 211 211 + setValueState(clamped); 212 212 + } 213 213 + onChange?.(clamped); 214 214 + }, 215 215 + [onChange, valueProp], 216 216 + ); 217 217 + 218 218 + const { keyboardProps } = useKeyboard({ 219 219 + onKeyDown: (e) => { 220 220 + if (isDisabled) return; 221 221 + if (e.key === "ArrowRight" || e.key === "ArrowUp") { 222 222 + e.preventDefault(); 223 223 + setValue(value + 1); 224 224 + } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") { 225 225 + e.preventDefault(); 226 226 + setValue(value - 1); 227 227 + } 228 228 + }, 229 229 + }); 230 230 + 231 231 + return ( 232 232 + <Flex 233 233 + direction="row" 234 234 + align="center" 235 235 + gap="1" 236 236 + role="slider" 237 237 + aria-label={ariaLabel} 238 238 + aria-valuemin={0} 239 239 + aria-valuemax={MAX_STARS} 240 240 + aria-valuenow={value} 241 241 + aria-disabled={isDisabled} 242 242 + tabIndex={isDisabled ? undefined : 0} 243 243 + style={style as stylex.StyleXStyles} 244 244 + {...mergeProps(keyboardProps, props)} 245 245 + > 246 246 + <div 247 247 + ref={starsRef} 248 248 + {...stylex.props( 249 249 + styles.stars, 250 250 + styles.starsInput, 251 251 + isDisabled && styles.starsInputDisabled, 252 252 + )} 253 253 + style={{ "--star-size": `${String(size)}px` } as React.CSSProperties} 254 254 + onMouseMove={handleStarsMouseMove} 255 255 + onMouseLeave={handleStarsMouseLeave} 256 256 + > 257 257 + {Array.from({ length: MAX_STARS }, (_, i) => ( 258 258 + <StarRatingInputButton 259 259 + key={i} 260 260 + size={size} 261 261 + isFilled={i < clampedValue} 262 262 + isDisabled={isDisabled} 263 263 + onPress={() => setValue(i + 1)} 264 264 + /> 265 265 + ))} 266 266 + </div> 267 267 + </Flex> 268 268 + ); 269 269 + } 270 270 + 271 271 + interface StarRatingInputButtonProps { 272 272 + size: number; 273 273 + isFilled: boolean; 274 274 + isDisabled: boolean; 275 275 + onPress: () => void; 276 276 + } 277 277 + 278 278 + function StarRatingInputButton({ 279 279 + size, 280 280 + isFilled, 281 281 + isDisabled, 282 282 + onPress, 283 283 + }: StarRatingInputButtonProps) { 284 284 + const { pressProps } = usePress({ 285 285 + isDisabled, 286 286 + onPress, 287 287 + }); 288 288 + 289 289 + return ( 290 290 + <button 291 291 + type="button" 292 292 + tabIndex={-1} 293 293 + disabled={isDisabled} 294 294 + {...pressProps} 295 295 + {...stylex.props( 296 296 + styles.starButton, 297 297 + isDisabled && styles.starButtonDisabled, 298 298 + )} 299 299 + > 300 300 + <Star 301 301 + size={size} 302 302 + fill={isFilled ? "currentColor" : undefined} 303 303 + {...stylex.props(isFilled ? styles.starFilled : styles.starEmpty)} 304 304 + /> 305 305 + </button> 306 306 + ); 307 307 + }

+2 -1

apps/docs/src/components/switch/index.tsx

reviewed

··· 15 15 16 16 const styles = stylex.create({ 17 17 wrapper: { 18 18 - gap: spacing["2"], 18 18 + gap: spacing["3"], 19 19 alignItems: "center", 20 20 display: "flex", 21 21 }, ··· 26 26 ":is([data-selected=true] *)": primaryColor.solid1, 27 27 }, 28 28 boxShadow: "inset 0 0 6px 1px rgba(0, 0, 0, 0.13)", 29 29 + flexShrink: 0, 29 30 opacity: { 30 31 default: 1, 31 32 ":is([data-disabled=true] *)": 0.5,

+6 -2

apps/docs/src/components/table-of-contents/index.tsx

reviewed

··· 2 2 3 3 import * as stylex from "@stylexjs/stylex"; 4 4 import { createContext, use, useEffect, useState } from "react"; 5 5 + import { useHover } from "react-aria"; 5 6 6 7 import type { StyleXComponentProps } from "../theme/types"; 7 8 ··· 44 45 alignItems: "center", 45 46 backgroundColor: { 46 47 default: "transparent", 47 47 - ":hover::before": primaryColor.solid1, 48 48 - ":hover": uiColor.component1, 48 48 + ":is([data-hovered])": uiColor.component1, 49 49 + ":is([data-hovered])::before": primaryColor.solid1, 49 50 }, 50 51 color: { 51 52 default: uiColor.text1, ··· 97 98 function TocItem({ id, value, children }: TocEntry) { 98 99 const level = use(LevelContext); 99 100 const activeHeaderId = use(ActiveHeaderIdContext); 101 101 + const { hoverProps, isHovered } = useHover({}); 100 102 101 103 return ( 102 104 <li key={id}> 103 105 <a 104 106 href={`#${id ?? ""}`} 107 107 + data-hovered={isHovered || undefined} 108 108 + {...hoverProps} 105 109 {...stylex.props( 106 110 styles.item, 107 111 styles.level(level),

+11 -4

apps/docs/src/components/table/index.tsx

reviewed

··· 11 11 import * as stylex from "@stylexjs/stylex"; 12 12 import { ArrowDown, ArrowUp, GripVertical } from "lucide-react"; 13 13 import { use } from "react"; 14 14 + import { mergeProps, useHover } from "react-aria"; 14 15 import { 15 16 Cell as AriaCell, 16 17 Column as AriaColumn, ··· 44 45 row: { 45 46 backgroundColor: { 46 47 default: uiColor.bg, 47 47 - ":has(td:hover)": uiColor.bgSubtle, 48 48 + ":is([data-hovered])": uiColor.bgSubtle, 48 49 }, 49 50 cursor: { 50 51 ":is([data-href])": "pointer", ··· 52 53 }, 53 54 column: { 54 55 padding: 0, 55 55 - borderBottomColor: uiColor.border2, 56 56 + borderBottomColor: uiColor.border1, 56 57 borderBottomStyle: "solid", 57 58 borderBottomWidth: 1, 58 59 }, ··· 72 73 tableBody: {}, 73 74 cell: { 74 75 overflow: "auto", 75 75 - borderBottomColor: uiColor.border2, 76 76 + borderBottomColor: uiColor.border1, 76 77 borderBottomStyle: "solid", 77 78 borderBottomWidth: { 78 79 default: 1, ··· 305 306 ...props 306 307 }: TableRowProps<T>) { 307 308 const { selectionBehavior, allowsDragging } = useTableOptions(); 309 309 + const { hoverProps, isHovered } = useHover({}); 308 310 309 311 return ( 310 310 - <AriaRow id={id} {...props} {...stylex.props(styles.row, style)}> 312 312 + <AriaRow 313 313 + id={id} 314 314 + {...mergeProps(props, hoverProps)} 315 315 + {...stylex.props(styles.row, style)} 316 316 + data-hovered={isHovered || undefined} 317 317 + > 311 318 {allowsDragging && ( 312 319 <TableCell> 313 320 <IconButton slot="drag" label="Reorder" variant="tertiary">

+3 -3

apps/docs/src/components/tag-group/index.tsx

reviewed

··· 80 80 alignItems: "center", 81 81 backgroundColor: { 82 82 default: "transparent", 83 83 - ":hover": uiColor.component2, 84 84 - ":active": uiColor.component3, 83 83 + ":is([data-hovered])": uiColor.component2, 84 84 + ":is([data-pressed])": uiColor.component3, 85 85 }, 86 86 color: { 87 87 default: uiColor.text1, 88 88 - ":hover": uiColor.text2, 88 88 + ":is([data-hovered])": uiColor.text2, 89 89 }, 90 90 display: "flex", 91 91 justifyContent: "center",

+84 -85

apps/docs/src/components/text-area/index.tsx

reviewed

··· 6 6 } from "react-aria-components"; 7 7 8 8 import * as stylex from "@stylexjs/stylex"; 9 9 - import { use, useRef } from "react"; 9 9 + import { use, useLayoutEffect, useRef } from "react"; 10 10 import { 11 11 TextArea as AriaTextArea, 12 12 TextField as AriaTextField, 13 13 } from "react-aria-components"; 14 14 15 15 - import type { Size, StyleXComponentProps } from "../theme/types"; 15 15 + import type { 16 16 + InputValidationState, 17 17 + InputVariant, 18 18 + Size, 19 19 + StyleXComponentProps, 20 20 + } from "../theme/types"; 16 21 17 22 import { SizeContext } from "../context"; 18 23 import { Description, FieldErrorMessage, Label } from "../label"; 19 19 - import { uiColor } from "../theme/color.stylex"; 20 20 - import { mediaQueries } from "../theme/media-queries.stylex"; 21 21 - import { radius } from "../theme/radius.stylex"; 22 22 - import { ui } from "../theme/semantic-color.stylex"; 23 24 import { spacing } from "../theme/spacing.stylex"; 24 24 - import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex"; 25 25 + import { fontFamily, lineHeight } from "../theme/typography.stylex"; 26 26 + import { useInputStyles } from "../theme/useInputStyles"; 25 27 26 28 const styles = stylex.create({ 27 29 wrapper: { 28 28 - gap: spacing["2"], 29 29 - display: "flex", 30 30 - flexDirection: "column", 30 30 + height: "auto", 31 31 }, 32 32 - addon: { 33 33 - color: ui.textDim, 34 34 - flexShrink: 0, 35 35 - height: "100%", 36 36 - minWidth: spacing["8"], 37 37 - paddingLeft: { ":first-child": spacing["0.5"] }, 38 38 - paddingRight: { 39 39 - ":last-child:has(svg)": spacing["0.5"], 40 40 - ":last-child": spacing["2"], 41 41 - }, 42 42 - 43 43 - gap: spacing["0.5"], 44 44 - alignItems: "center", 45 45 - display: "flex", 46 46 - justifyContent: "center", 47 47 - 48 48 - // eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles 49 49 - ":is(*) svg": { 50 50 - flexShrink: 0, 51 51 - pointerEvents: "none", 52 52 - height: spacing["4"], 53 53 - width: spacing["4"], 54 54 - }, 55 55 - }, 56 56 - inputWrapper: { 57 57 - borderRadius: { 58 58 - default: radius["md"], 59 59 - [mediaQueries.supportsSquircle]: radius["2xl"], 60 60 - }, 61 61 - // eslint-disable-next-line @stylexjs/valid-styles 62 62 - cornerShape: "squircle", 63 63 - boxSizing: "border-box", 64 64 - display: "flex", 65 65 - flexGrow: 1, 66 66 - 67 67 - borderColor: { 68 68 - default: uiColor.border2, 69 69 - ":hover": uiColor.border3, 70 70 - ":focus": uiColor.solid1, 71 71 - }, 72 72 - borderStyle: "solid", 73 73 - borderWidth: 1, 74 74 - }, 75 75 - input: { 76 76 - borderWidth: 0, 77 77 - outline: "none", 78 78 - backgroundColor: "transparent", 79 79 - boxSizing: "border-box", 80 80 - color: { 81 81 - "::placeholder": uiColor.text1, 82 82 - }, 83 83 - flexGrow: 1, 32 32 + textarea: { 84 33 fontFamily: fontFamily["sans"], 85 85 - resize: "none", 86 86 - 87 87 - fontSize: { 88 88 - ":is([data-size=lg])": fontSize["base"], 89 89 - ":is([data-size=md])": fontSize["sm"], 90 90 - ":is([data-size=sm])": fontSize["xs"], 91 91 - }, 92 34 lineHeight: { 93 35 ":is([data-size=lg])": lineHeight["base"], 94 36 ":is([data-size=md])": lineHeight["sm"], 95 37 ":is([data-size=sm])": lineHeight["xs"], 96 38 }, 39 39 + resize: "none", 97 40 minHeight: { 98 41 ":is([data-size=lg])": spacing["10"], 99 42 ":is([data-size=md])": spacing["8"], 100 43 ":is([data-size=sm])": spacing["6"], 101 44 }, 45 45 + minWidth: 0, 102 46 paddingBottom: { 103 47 ":is([data-size=lg])": spacing["3"], 104 48 ":is([data-size=md])": spacing["2"], 105 49 ":is([data-size=sm])": spacing["1"], 106 50 }, 107 107 - paddingLeft: { 108 108 - ":is([data-size=lg])": spacing["3"], 109 109 - ":is([data-size=md])": spacing["2"], 110 110 - ":is([data-size=sm])": spacing["1"], 111 111 - }, 112 112 - paddingRight: { 113 113 - ":is([data-size=lg])": spacing["3"], 114 114 - ":is([data-size=md])": spacing["2"], 115 115 - ":is([data-size=sm])": spacing["1"], 116 116 - }, 117 51 paddingTop: { 118 52 ":is([data-size=lg])": spacing["3"], 119 53 ":is([data-size=md])": spacing["2"], 120 54 ":is([data-size=sm])": spacing["1"], 121 55 }, 56 56 + width: "100%", 122 57 }, 123 58 resizable: { 124 59 resize: "both", 125 60 }, 61 61 + autosize: { 62 62 + overflow: "hidden", 63 63 + resize: "none", 64 64 + }, 126 65 }); 127 66 128 67 export interface TextAreaProps ··· 137 76 prefix?: React.ReactNode; 138 77 suffix?: React.ReactNode; 139 78 isResizable?: boolean; 79 79 + autosize?: boolean; 80 80 + variant?: InputVariant; 81 81 + validationState?: InputValidationState; 140 82 } 141 83 142 84 export function TextArea({ ··· 150 92 placeholder, 151 93 rows, 152 94 isResizable = true, 95 95 + autosize = true, 96 96 + variant, 97 97 + validationState, 153 98 ...props 154 99 }: TextAreaProps) { 155 100 const textAreaRef = useRef<HTMLTextAreaElement>(null); 156 101 const size = sizeProp || use(SizeContext); 102 102 + const inputStyles = useInputStyles({ size, variant, validationState }); 103 103 + 104 104 + useLayoutEffect(() => { 105 105 + const textarea = textAreaRef.current; 106 106 + if (!textarea || !autosize) return; 107 107 + 108 108 + const adjustHeight = () => { 109 109 + // Reset height to auto to get accurate scrollHeight 110 110 + textarea.style.height = "auto"; 111 111 + // Set height to scrollHeight, which will respect minHeight from styles 112 112 + const newHeight = textarea.scrollHeight; 113 113 + textarea.style.height = `${String(newHeight)}px`; 114 114 + }; 115 115 + 116 116 + // Adjust height immediately 117 117 + adjustHeight(); 118 118 + 119 119 + // Listen for input events to adjust height dynamically 120 120 + textarea.addEventListener("input", adjustHeight); 121 121 + 122 122 + // Also adjust on resize in case container size changes 123 123 + const resizeObserver = new ResizeObserver(adjustHeight); 124 124 + resizeObserver.observe(textarea); 125 125 + 126 126 + return () => { 127 127 + textarea.removeEventListener("input", adjustHeight); 128 128 + resizeObserver.disconnect(); 129 129 + }; 130 130 + }, [autosize, props.value, props.defaultValue]); 131 131 + 132 132 + // Handle onChange to trigger resize when value changes programmatically 133 133 + const handleChange = (value: string) => { 134 134 + props.onChange?.(value); 135 135 + // Trigger resize after value update 136 136 + if (autosize && textAreaRef.current) { 137 137 + requestAnimationFrame(() => { 138 138 + const textarea = textAreaRef.current; 139 139 + if (textarea) { 140 140 + textarea.style.height = "auto"; 141 141 + textarea.style.height = `${String(textarea.scrollHeight)}px`; 142 142 + } 143 143 + }); 144 144 + } 145 145 + }; 157 146 158 147 return ( 159 148 <SizeContext value={size}> 160 160 - <AriaTextField {...props} {...stylex.props(styles.wrapper, style)}> 149 149 + <AriaTextField 150 150 + {...props} 151 151 + onChange={props.onChange ? handleChange : undefined} 152 152 + isInvalid={validationState ? validationState === "invalid" : undefined} 153 153 + {...stylex.props(inputStyles.field, style)} 154 154 + > 161 155 <Label>{label}</Label> 162 156 {/* 163 157 This onClick is specifically for mouse users not clicking directly on the input. ··· 165 159 */} 166 160 {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */} 167 161 <div 168 168 - {...stylex.props(styles.inputWrapper, ui.bgUi, ui.text)} 162 162 + {...stylex.props(inputStyles.wrapper, styles.wrapper)} 169 163 onClick={() => textAreaRef.current?.focus()} 170 164 > 171 165 {prefix != null && ( 172 172 - <div {...stylex.props(styles.addon)}>{prefix}</div> 166 166 + <div {...stylex.props(inputStyles.addon)}>{prefix}</div> 173 167 )} 174 168 <AriaTextArea 175 169 data-size={size} 176 176 - {...stylex.props(styles.input, isResizable && styles.resizable)} 170 170 + {...stylex.props( 171 171 + inputStyles.input, 172 172 + styles.textarea, 173 173 + isResizable && !autosize && styles.resizable, 174 174 + autosize && styles.autosize, 175 175 + )} 177 176 ref={textAreaRef} 178 177 placeholder={placeholder} 179 179 - rows={rows} 178 178 + rows={autosize ? 1 : rows} 180 179 /> 181 180 {suffix != null && ( 182 182 - <div {...stylex.props(styles.addon)}>{suffix}</div> 181 181 + <div {...stylex.props(inputStyles.addon)}>{suffix}</div> 183 182 )} 184 183 </div> 185 184 <Description>{description}</Description>

+1 -1

apps/docs/src/components/text-field/index.tsx

reviewed

··· 127 127 /> 128 128 </div> 129 129 <Description>{description}</Description> 130 130 - <FieldErrorMessage>{errorMessage}</FieldErrorMessage> 130 130 + {errorMessage && <FieldErrorMessage>{errorMessage}</FieldErrorMessage>} 131 131 </> 132 132 ); 133 133 }

+11 -11

apps/docs/src/components/theme/colors/amber.stylex.tsx

reviewed

··· 2 2 3 3 export const amber = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fefdfb, #fefdfb)", 5 5 + default: "light-dark(#fefdfb, #16120c)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.995 0.992 0.985), color(display-p3 0.082 0.07 0.05))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fefbe9, #fefbe9)", 10 10 + default: "light-dark(#fefbe9, #1d180f)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.994 0.986 0.921), color(display-p3 0.111 0.094 0.064))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#fff7c2, #fff7c2)", 15 15 + default: "light-dark(#fff7c2, #302008)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.994 0.969 0.782), color(display-p3 0.178 0.128 0.049))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#ffee9c, #ffee9c)", 20 20 + default: "light-dark(#ffee9c, #3f2700)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.989 0.937 0.65), color(display-p3 0.239 0.156 0))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#fbe577, #fbe577)", 25 25 + default: "light-dark(#fbe577, #4d3000)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.97 0.902 0.527), color(display-p3 0.29 0.193 0))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#f3d673, #f3d673)", 30 30 + default: "light-dark(#f3d673, #5c3d05)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.936 0.844 0.506), color(display-p3 0.344 0.245 0.076))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#e9c162, #e9c162)", 35 35 + default: "light-dark(#e9c162, #714f19)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.89 0.762 0.443), color(display-p3 0.422 0.314 0.141))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#e2a336, #e2a336)", 40 40 + default: "light-dark(#e2a336, #8f6424)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.85 0.65 0.3), color(display-p3 0.535 0.399 0.189))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 1 0.77 0.26), color(display-p3 1 0.77 0.26))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#ffba18, #ffba18)", 50 50 + default: "light-dark(#ffba18, #ffd60a)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.959 0.741 0.274), color(display-p3 1 0.87 0.15))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#ab6400, #ab6400)", 55 55 + default: "light-dark(#ab6400, #ffca16)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.64 0.4 0), color(display-p3 1 0.8 0.29))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#4f3422, #4f3422)", 60 60 + default: "light-dark(#4f3422, #ffe7b3)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.294 0.208 0.145), color(display-p3 0.984 0.909 0.726))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/blue.stylex.tsx

reviewed

··· 2 2 3 3 export const blue = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fbfdff, #fbfdff)", 5 5 + default: "light-dark(#fbfdff, #0d1520)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.986 0.992 0.999), color(display-p3 0.057 0.081 0.122))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f4faff, #f4faff)", 10 10 + default: "light-dark(#f4faff, #111927)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.96 0.979 0.998), color(display-p3 0.072 0.098 0.147))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#e6f4fe, #e6f4fe)", 15 15 + default: "light-dark(#e6f4fe, #0d2847)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.912 0.956 0.991), color(display-p3 0.078 0.154 0.27))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#d5efff, #d5efff)", 20 20 + default: "light-dark(#d5efff, #003362)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.853 0.932 1), color(display-p3 0.033 0.197 0.37))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#c2e5ff, #c2e5ff)", 25 25 + default: "light-dark(#c2e5ff, #004074)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.788 0.894 0.998), color(display-p3 0.08 0.245 0.441))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#acd8fc, #acd8fc)", 30 30 + default: "light-dark(#acd8fc, #104d87)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.709 0.843 0.976), color(display-p3 0.14 0.298 0.511))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#8ec8f6, #8ec8f6)", 35 35 + default: "light-dark(#8ec8f6, #205d9e)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.606 0.777 0.947), color(display-p3 0.195 0.361 0.6))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#5eb1ef, #5eb1ef)", 40 40 + default: "light-dark(#5eb1ef, #2870bd)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.451 0.688 0.917), color(display-p3 0.239 0.434 0.72))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.247 0.556 0.969), color(display-p3 0.247 0.556 0.969))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#0588f0, #0588f0)", 50 50 + default: "light-dark(#0588f0, #3b9eff)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.234 0.523 0.912), color(display-p3 0.344 0.612 0.973))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#0d74ce, #0d74ce)", 55 55 + default: "light-dark(#0d74ce, #70b8ff)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.15 0.44 0.84), color(display-p3 0.49 0.72 1))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#113264, #113264)", 60 60 + default: "light-dark(#113264, #c2e6ff)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.102 0.193 0.379), color(display-p3 0.788 0.898 0.99))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/bronze.stylex.tsx

reviewed

··· 2 2 3 3 export const bronze = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fdfcfc, #fdfcfc)", 5 5 + default: "light-dark(#fdfcfc, #141110)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.991 0.988 0.988), color(display-p3 0.076 0.067 0.063))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fdf7f5, #fdf7f5)", 10 10 + default: "light-dark(#fdf7f5, #1c1917)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.989 0.97 0.961), color(display-p3 0.106 0.097 0.093))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#f6edea, #f6edea)", 15 15 + default: "light-dark(#f6edea, #262220)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.958 0.932 0.919), color(display-p3 0.147 0.132 0.125))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#efe4df, #efe4df)", 20 20 + default: "light-dark(#efe4df, #302a27)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.929 0.894 0.877), color(display-p3 0.185 0.166 0.156))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#e7d9d3, #e7d9d3)", 25 25 + default: "light-dark(#e7d9d3, #3b3330)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.898 0.853 0.832), color(display-p3 0.227 0.202 0.19))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#dfcdc5, #dfcdc5)", 30 30 + default: "light-dark(#dfcdc5, #493e3a)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.861 0.805 0.778), color(display-p3 0.278 0.246 0.23))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#d3bcb3, #d3bcb3)", 35 35 + default: "light-dark(#d3bcb3, #5a4c47)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.812 0.739 0.706), color(display-p3 0.343 0.302 0.281))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#c2a499, #c2a499)", 40 40 + default: "light-dark(#c2a499, #6f5f58)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.741 0.647 0.606), color(display-p3 0.426 0.374 0.347))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.611 0.507 0.455), color(display-p3 0.611 0.507 0.455))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#957468, #957468)", 50 50 + default: "light-dark(#957468, #ae8c7e)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.563 0.461 0.414), color(display-p3 0.66 0.556 0.504))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#7d5e54, #7d5e54)", 55 55 + default: "light-dark(#7d5e54, #d4b3a5)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.471 0.373 0.336), color(display-p3 0.81 0.707 0.655))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#43302b, #43302b)", 60 60 + default: "light-dark(#43302b, #ede0d9)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.251 0.191 0.172), color(display-p3 0.921 0.88 0.854))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/brown.stylex.tsx

reviewed

··· 2 2 3 3 export const brown = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fefdfc, #fefdfc)", 5 5 + default: "light-dark(#fefdfc, #12110f)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.995 0.992 0.989), color(display-p3 0.071 0.067 0.059))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fcf9f6, #fcf9f6)", 10 10 + default: "light-dark(#fcf9f6, #1c1816)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.987 0.976 0.964), color(display-p3 0.107 0.095 0.087))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#f6eee7, #f6eee7)", 15 15 + default: "light-dark(#f6eee7, #28211d)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.959 0.936 0.909), color(display-p3 0.151 0.13 0.115))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#f0e4d9, #f0e4d9)", 20 20 + default: "light-dark(#f0e4d9, #322922)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.934 0.897 0.855), color(display-p3 0.191 0.161 0.138))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#ebdaca, #ebdaca)", 25 25 + default: "light-dark(#ebdaca, #3e3128)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.909 0.856 0.798), color(display-p3 0.235 0.194 0.162))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#e4cdb7, #e4cdb7)", 30 30 + default: "light-dark(#e4cdb7, #4d3c2f)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.88 0.808 0.73), color(display-p3 0.291 0.237 0.192))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#dcbc9f, #dcbc9f)", 35 35 + default: "light-dark(#dcbc9f, #614a39)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.841 0.742 0.639), color(display-p3 0.365 0.295 0.232))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#cea37e, #cea37e)", 40 40 + default: "light-dark(#cea37e, #7c5f46)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.782 0.647 0.514), color(display-p3 0.469 0.377 0.287))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.651 0.505 0.368), color(display-p3 0.651 0.505 0.368))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#a07553, #a07553)", 50 50 + default: "light-dark(#a07553, #b88c67)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.601 0.465 0.344), color(display-p3 0.697 0.557 0.423))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#815e46, #815e46)", 55 55 + default: "light-dark(#815e46, #dbb594)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.485 0.374 0.288), color(display-p3 0.835 0.715 0.597))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#3e332e, #3e332e)", 60 60 + default: "light-dark(#3e332e, #f2e1ca)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.236 0.202 0.183), color(display-p3 0.938 0.885 0.802))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/crimson.stylex.tsx

reviewed

··· 2 2 3 3 export const crimson = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fffcfd, #fffcfd)", 5 5 + default: "light-dark(#fffcfd, #191114)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.998 0.989 0.992), color(display-p3 0.093 0.068 0.078))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fef7f9, #fef7f9)", 10 10 + default: "light-dark(#fef7f9, #201318)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.991 0.969 0.976), color(display-p3 0.117 0.078 0.095))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#ffe9f0, #ffe9f0)", 15 15 + default: "light-dark(#ffe9f0, #381525)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.987 0.917 0.941), color(display-p3 0.203 0.091 0.143))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#fedce7, #fedce7)", 20 20 + default: "light-dark(#fedce7, #4d122f)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.975 0.866 0.904), color(display-p3 0.277 0.087 0.182))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#facedd, #facedd)", 25 25 + default: "light-dark(#facedd, #5c1839)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.953 0.813 0.864), color(display-p3 0.332 0.115 0.22))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#f3bed1, #f3bed1)", 30 30 + default: "light-dark(#f3bed1, #6d2545)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.921 0.755 0.817), color(display-p3 0.394 0.162 0.268))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#eaacc3, #eaacc3)", 35 35 + default: "light-dark(#eaacc3, #873356)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.88 0.683 0.761), color(display-p3 0.489 0.222 0.336))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#e093b2, #e093b2)", 40 40 + default: "light-dark(#e093b2, #b0436e)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.834 0.592 0.694), color(display-p3 0.638 0.289 0.429))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.843 0.298 0.507), color(display-p3 0.843 0.298 0.507))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#df3478, #df3478)", 50 50 + default: "light-dark(#df3478, #ee518a)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.807 0.266 0.468), color(display-p3 0.864 0.364 0.539))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#cb1d63, #cb1d63)", 55 55 + default: "light-dark(#cb1d63, #ff92ad)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.731 0.195 0.388), color(display-p3 1 0.56 0.66))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#621639, #621639)", 60 60 + default: "light-dark(#621639, #fdd3e8)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.352 0.111 0.221), color(display-p3 0.966 0.834 0.906))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/cyan.stylex.tsx

reviewed

··· 2 2 3 3 export const cyan = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fafdfe, #fafdfe)", 5 5 + default: "light-dark(#fafdfe, #0b161a)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.982 0.992 0.996), color(display-p3 0.053 0.085 0.098))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f2fafb, #f2fafb)", 10 10 + default: "light-dark(#f2fafb, #101b20)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.955 0.981 0.984), color(display-p3 0.072 0.105 0.122))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#def7f9, #def7f9)", 15 15 + default: "light-dark(#def7f9, #082c36)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.888 0.965 0.975), color(display-p3 0.073 0.168 0.209))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#caf1f6, #caf1f6)", 20 20 + default: "light-dark(#caf1f6, #003848)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.821 0.941 0.959), color(display-p3 0.063 0.216 0.277))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#b5e9f0, #b5e9f0)", 25 25 + default: "light-dark(#b5e9f0, #004558)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.751 0.907 0.935), color(display-p3 0.091 0.267 0.336))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#9ddde7, #9ddde7)", 30 30 + default: "light-dark(#9ddde7, #045468)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.671 0.862 0.9), color(display-p3 0.137 0.324 0.4))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#7dcedc, #7dcedc)", 35 35 + default: "light-dark(#7dcedc, #12677e)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.564 0.8 0.854), color(display-p3 0.186 0.398 0.484))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#3db9cf, #3db9cf)", 40 40 + default: "light-dark(#3db9cf, #11809c)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.388 0.715 0.798), color(display-p3 0.23 0.496 0.6))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.282 0.627 0.765), color(display-p3 0.282 0.627 0.765))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#0797b9, #0797b9)", 50 50 + default: "light-dark(#0797b9, #23afd0)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.264 0.583 0.71), color(display-p3 0.331 0.675 0.801))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#107d98, #107d98)", 55 55 + default: "light-dark(#107d98, #4ccce6)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.08 0.48 0.63), color(display-p3 0.446 0.79 0.887))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#0d3c48, #0d3c48)", 60 60 + default: "light-dark(#0d3c48, #b6ecf7)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.108 0.232 0.277), color(display-p3 0.757 0.919 0.962))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/gold.stylex.tsx

reviewed

··· 2 2 3 3 export const gold = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fdfdfc, #fdfdfc)", 5 5 + default: "light-dark(#fdfdfc, #121211)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.992 0.992 0.989), color(display-p3 0.071 0.071 0.067))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#faf9f2, #faf9f2)", 10 10 + default: "light-dark(#faf9f2, #1b1a17)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.98 0.976 0.953), color(display-p3 0.104 0.101 0.09))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#f2f0e7, #f2f0e7)", 15 15 + default: "light-dark(#f2f0e7, #24231f)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.947 0.94 0.909), color(display-p3 0.141 0.136 0.122))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#eae6db, #eae6db)", 20 20 + default: "light-dark(#eae6db, #2d2b26)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.914 0.904 0.865), color(display-p3 0.177 0.17 0.152))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#e1dccf, #e1dccf)", 25 25 + default: "light-dark(#e1dccf, #38352e)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.88 0.865 0.816), color(display-p3 0.217 0.207 0.185))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#d8d0bf, #d8d0bf)", 30 30 + default: "light-dark(#d8d0bf, #444039)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.84 0.818 0.756), color(display-p3 0.265 0.252 0.225))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#cbc0aa, #cbc0aa)", 35 35 + default: "light-dark(#cbc0aa, #544f46)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.788 0.753 0.677), color(display-p3 0.327 0.31 0.277))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#b9a88d, #b9a88d)", 40 40 + default: "light-dark(#b9a88d, #696256)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.715 0.66 0.565), color(display-p3 0.407 0.384 0.342))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.579 0.517 0.41), color(display-p3 0.579 0.517 0.41))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#8c7a5e, #8c7a5e)", 50 50 + default: "light-dark(#8c7a5e, #a39073)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.538 0.479 0.38), color(display-p3 0.628 0.566 0.463))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#71624b, #71624b)", 55 55 + default: "light-dark(#71624b, #cbb99f)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.433 0.386 0.305), color(display-p3 0.784 0.728 0.635))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#3b352b, #3b352b)", 60 60 + default: "light-dark(#3b352b, #e8e2d9)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.227 0.209 0.173), color(display-p3 0.906 0.887 0.855))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/grass.stylex.tsx

reviewed

··· 2 2 3 3 export const grass = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fbfefb, #fbfefb)", 5 5 + default: "light-dark(#fbfefb, #0e1511)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.986 0.996 0.985), color(display-p3 0.062 0.083 0.067))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f5fbf5, #f5fbf5)", 10 10 + default: "light-dark(#f5fbf5, #141a15)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.966 0.983 0.964), color(display-p3 0.083 0.103 0.085))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#e9f6e9, #e9f6e9)", 15 15 + default: "light-dark(#e9f6e9, #1b2a1e)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.923 0.965 0.917), color(display-p3 0.118 0.163 0.122))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#daf1db, #daf1db)", 20 20 + default: "light-dark(#daf1db, #1d3a24)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.872 0.94 0.865), color(display-p3 0.142 0.225 0.15))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#c9e8ca, #c9e8ca)", 25 25 + default: "light-dark(#c9e8ca, #25482d)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.811 0.908 0.802), color(display-p3 0.178 0.279 0.186))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#b2ddb5, #b2ddb5)", 30 30 + default: "light-dark(#b2ddb5, #2d5736)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.733 0.864 0.724), color(display-p3 0.217 0.337 0.224))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#94ce9a, #94ce9a)", 35 35 + default: "light-dark(#94ce9a, #366740)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.628 0.803 0.622), color(display-p3 0.258 0.4 0.264))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#65ba74, #65ba74)", 40 40 + default: "light-dark(#65ba74, #3e7949)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.477 0.72 0.482), color(display-p3 0.302 0.47 0.305))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.38 0.647 0.378), color(display-p3 0.38 0.647 0.378))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#3e9b4f, #3e9b4f)", 50 50 + default: "light-dark(#3e9b4f, #53b365)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.344 0.598 0.342), color(display-p3 0.426 0.694 0.426))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#2a7e3b, #2a7e3b)", 55 55 + default: "light-dark(#2a7e3b, #71d083)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.263 0.488 0.261), color(display-p3 0.535 0.807 0.542))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#203c25, #203c25)", 60 60 + default: "light-dark(#203c25, #c2f0c2)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.151 0.233 0.153), color(display-p3 0.797 0.936 0.776))", 63 63 },

+24 -24

apps/docs/src/components/theme/colors/gray.stylex.tsx

reviewed

··· 2 2 3 3 export const gray = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fcfcfc, #fcfcfc)", 5 5 + default: "light-dark(#fcfcfc, #111111)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.988 0.988 0.988), color(display-p3 0.067 0.067 0.067))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f9f9f9, #f9f9f9)", 10 10 + default: "light-dark(#f9f9f9, #191919)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.975 0.975 0.975), color(display-p3 0.098 0.098 0.098))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#f0f0f0, #f0f0f0)", 15 15 + default: "light-dark(#f0f0f0, #222222)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.939 0.939 0.939), color(display-p3 0.135 0.135 0.135))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#e8e8e8, #e8e8e8)", 20 20 + default: "light-dark(#e8e8e8, #2a2a2a)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.908 0.908 0.908), color(display-p3 0.163 0.163 0.163))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#e0e0e0, #e0e0e0)", 25 25 + default: "light-dark(#e0e0e0, #313131)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.88 0.88 0.88), color(display-p3 0.192 0.192 0.192))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#d9d9d9, #d9d9d9)", 30 30 + default: "light-dark(#d9d9d9, #3a3a3a)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.849 0.849 0.849), color(display-p3 0.228 0.228 0.228))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#cecece, #cecece)", 35 35 + default: "light-dark(#cecece, #484848)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.807 0.807 0.807), color(display-p3 0.283 0.283 0.283))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#bbbbbb, #bbbbbb)", 40 40 + default: "light-dark(#bbbbbb, #606060)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.732 0.732 0.732), color(display-p3 0.375 0.375 0.375))", 43 43 }, 44 44 solid1: { 45 45 - default: "light-dark(#8d8d8d, #8d8d8d)", 45 45 + default: "light-dark(#8d8d8d, #6e6e6e)", 46 46 "@media (color-gamut: p3)": 47 47 "light-dark(color(display-p3 0.553 0.553 0.553), color(display-p3 0.431 0.431 0.431))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#838383, #838383)", 50 50 + default: "light-dark(#838383, #7b7b7b)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.512 0.512 0.512), color(display-p3 0.484 0.484 0.484))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#646464, #646464)", 55 55 + default: "light-dark(#646464, #b4b4b4)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.392 0.392 0.392), color(display-p3 0.706 0.706 0.706))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#202020, #202020)", 60 60 + default: "light-dark(#202020, #eeeeee)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.125 0.125 0.125), color(display-p3 0.933 0.933 0.933))", 63 63 }, ··· 127 127 128 128 export const grayInverted = stylex.defineVars({ 129 129 bg: { 130 130 - default: "light-dark(#fcfcfc, #fcfcfc)", 130 130 + default: "light-dark(#111111, #fcfcfc)", 131 131 "@media (color-gamut: p3)": 132 132 "light-dark(color(display-p3 0.067 0.067 0.067), color(display-p3 0.988 0.988 0.988))", 133 133 }, 134 134 bgSubtle: { 135 135 - default: "light-dark(#f9f9f9, #f9f9f9)", 135 135 + default: "light-dark(#191919, #f9f9f9)", 136 136 "@media (color-gamut: p3)": 137 137 "light-dark(color(display-p3 0.098 0.098 0.098), color(display-p3 0.975 0.975 0.975))", 138 138 }, 139 139 component1: { 140 140 - default: "light-dark(#f0f0f0, #f0f0f0)", 140 140 + default: "light-dark(#222222, #f0f0f0)", 141 141 "@media (color-gamut: p3)": 142 142 "light-dark(color(display-p3 0.135 0.135 0.135), color(display-p3 0.939 0.939 0.939))", 143 143 }, 144 144 component2: { 145 145 - default: "light-dark(#e8e8e8, #e8e8e8)", 145 145 + default: "light-dark(#2a2a2a, #e8e8e8)", 146 146 "@media (color-gamut: p3)": 147 147 "light-dark(color(display-p3 0.163 0.163 0.163), color(display-p3 0.908 0.908 0.908))", 148 148 }, 149 149 component3: { 150 150 - default: "light-dark(#e0e0e0, #e0e0e0)", 150 150 + default: "light-dark(#313131, #e0e0e0)", 151 151 "@media (color-gamut: p3)": 152 152 "light-dark(color(display-p3 0.192 0.192 0.192), color(display-p3 0.88 0.88 0.88))", 153 153 }, 154 154 border1: { 155 155 - default: "light-dark(#d9d9d9, #d9d9d9)", 155 155 + default: "light-dark(#3a3a3a, #d9d9d9)", 156 156 "@media (color-gamut: p3)": 157 157 "light-dark(color(display-p3 0.228 0.228 0.228), color(display-p3 0.849 0.849 0.849))", 158 158 }, 159 159 border2: { 160 160 - default: "light-dark(#cecece, #cecece)", 160 160 + default: "light-dark(#484848, #cecece)", 161 161 "@media (color-gamut: p3)": 162 162 "light-dark(color(display-p3 0.283 0.283 0.283), color(display-p3 0.807 0.807 0.807))", 163 163 }, 164 164 border3: { 165 165 - default: "light-dark(#bbbbbb, #bbbbbb)", 165 165 + default: "light-dark(#606060, #bbbbbb)", 166 166 "@media (color-gamut: p3)": 167 167 "light-dark(color(display-p3 0.375 0.375 0.375), color(display-p3 0.732 0.732 0.732))", 168 168 }, 169 169 solid1: { 170 170 - default: "light-dark(#8d8d8d, #8d8d8d)", 170 170 + default: "light-dark(#6e6e6e, #8d8d8d)", 171 171 "@media (color-gamut: p3)": 172 172 "light-dark(color(display-p3 0.431 0.431 0.431), color(display-p3 0.553 0.553 0.553))", 173 173 }, 174 174 solid2: { 175 175 - default: "light-dark(#838383, #838383)", 175 175 + default: "light-dark(#7b7b7b, #838383)", 176 176 "@media (color-gamut: p3)": 177 177 "light-dark(color(display-p3 0.484 0.484 0.484), color(display-p3 0.512 0.512 0.512))", 178 178 }, 179 179 text1: { 180 180 - default: "light-dark(#646464, #646464)", 180 180 + default: "light-dark(#b4b4b4, #646464)", 181 181 "@media (color-gamut: p3)": 182 182 "light-dark(color(display-p3 0.706 0.706 0.706), color(display-p3 0.392 0.392 0.392))", 183 183 }, 184 184 text2: { 185 185 - default: "light-dark(#202020, #202020)", 185 185 + default: "light-dark(#eeeeee, #202020)", 186 186 "@media (color-gamut: p3)": 187 187 "light-dark(color(display-p3 0.933 0.933 0.933), color(display-p3 0.125 0.125 0.125))", 188 188 },

+11 -11

apps/docs/src/components/theme/colors/green.stylex.tsx

reviewed

··· 2 2 3 3 export const green = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fbfefc, #fbfefc)", 5 5 + default: "light-dark(#fbfefc, #0e1512)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.986 0.996 0.989), color(display-p3 0.062 0.083 0.071))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f4fbf6, #f4fbf6)", 10 10 + default: "light-dark(#f4fbf6, #121b17)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.963 0.983 0.967), color(display-p3 0.079 0.106 0.09))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#e6f6eb, #e6f6eb)", 15 15 + default: "light-dark(#e6f6eb, #132d21)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.913 0.964 0.925), color(display-p3 0.1 0.173 0.133))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#d6f1df, #d6f1df)", 20 20 + default: "light-dark(#d6f1df, #113b29)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.859 0.94 0.879), color(display-p3 0.115 0.229 0.166))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#c4e8d1, #c4e8d1)", 25 25 + default: "light-dark(#c4e8d1, #174933)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.796 0.907 0.826), color(display-p3 0.147 0.282 0.206))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#adddc0, #adddc0)", 30 30 + default: "light-dark(#adddc0, #20573e)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.718 0.863 0.761), color(display-p3 0.185 0.338 0.25))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#8eceaa, #8eceaa)", 35 35 + default: "light-dark(#8eceaa, #28684a)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.61 0.801 0.675), color(display-p3 0.227 0.403 0.298))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#5bb98b, #5bb98b)", 40 40 + default: "light-dark(#5bb98b, #2f7c57)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.451 0.715 0.559), color(display-p3 0.27 0.479 0.351))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.332 0.634 0.442), color(display-p3 0.332 0.634 0.442))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#2b9a66, #2b9a66)", 50 50 + default: "light-dark(#2b9a66, #33b074)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.308 0.595 0.417), color(display-p3 0.357 0.682 0.474))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#218358, #218358)", 55 55 + default: "light-dark(#218358, #3dd68c)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#193b2d, #193b2d)", 60 60 + default: "light-dark(#193b2d, #b1f1cb)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.132 0.228 0.18), color(display-p3 0.747 0.938 0.807))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/indigo.stylex.tsx

reviewed

··· 2 2 3 3 export const indigo = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fdfdfe, #fdfdfe)", 5 5 + default: "light-dark(#fdfdfe, #11131f)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.992 0.992 0.996), color(display-p3 0.068 0.074 0.118))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f7f9ff, #f7f9ff)", 10 10 + default: "light-dark(#f7f9ff, #141726)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.971 0.977 0.998), color(display-p3 0.081 0.089 0.144))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#edf2fe, #edf2fe)", 15 15 + default: "light-dark(#edf2fe, #182449)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.933 0.948 0.992), color(display-p3 0.105 0.141 0.275))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#e1e9ff, #e1e9ff)", 20 20 + default: "light-dark(#e1e9ff, #1d2e62)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.885 0.914 1), color(display-p3 0.129 0.18 0.369))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#d2deff, #d2deff)", 25 25 + default: "light-dark(#d2deff, #253974)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.831 0.87 1), color(display-p3 0.163 0.22 0.439))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#c1d0ff, #c1d0ff)", 30 30 + default: "light-dark(#c1d0ff, #304384)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.767 0.814 0.995), color(display-p3 0.203 0.262 0.5))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#abbdf9, #abbdf9)", 35 35 + default: "light-dark(#abbdf9, #3a4f97)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.685 0.74 0.957), color(display-p3 0.245 0.309 0.575))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#8da4ef, #8da4ef)", 40 40 + default: "light-dark(#8da4ef, #435db1)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.569 0.639 0.916), color(display-p3 0.285 0.362 0.674))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.276 0.384 0.837), color(display-p3 0.276 0.384 0.837))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#3358d4, #3358d4)", 50 50 + default: "light-dark(#3358d4, #5472e4)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.234 0.343 0.801), color(display-p3 0.354 0.445 0.866))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#3a5bc7, #3a5bc7)", 55 55 + default: "light-dark(#3a5bc7, #9eb1ff)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.256 0.354 0.755), color(display-p3 0.63 0.69 1))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#1f2d5c, #1f2d5c)", 60 60 + default: "light-dark(#1f2d5c, #d6e1ff)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.133 0.175 0.348), color(display-p3 0.848 0.881 0.99))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/iris.stylex.tsx

reviewed

··· 2 2 3 3 export const iris = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fdfdff, #fdfdff)", 5 5 + default: "light-dark(#fdfdff, #13131e)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.992 0.992 0.999), color(display-p3 0.075 0.075 0.114))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f8f8ff, #f8f8ff)", 10 10 + default: "light-dark(#f8f8ff, #171625)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.972 0.973 0.998), color(display-p3 0.089 0.086 0.14))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#f0f1fe, #f0f1fe)", 15 15 + default: "light-dark(#f0f1fe, #202248)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.943 0.945 0.992), color(display-p3 0.128 0.134 0.272))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#e6e7ff, #e6e7ff)", 20 20 + default: "light-dark(#e6e7ff, #262a65)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.902 0.906 1), color(display-p3 0.153 0.165 0.382))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#dadcff, #dadcff)", 25 25 + default: "light-dark(#dadcff, #303374)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.857 0.861 1), color(display-p3 0.192 0.201 0.44))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#cbcdff, #cbcdff)", 30 30 + default: "light-dark(#cbcdff, #3d3e82)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.799 0.805 0.987), color(display-p3 0.239 0.241 0.491))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#b8baf8, #b8baf8)", 35 35 + default: "light-dark(#b8baf8, #4a4a95)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.721 0.727 0.955), color(display-p3 0.291 0.289 0.565))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#9b9ef0, #9b9ef0)", 40 40 + default: "light-dark(#9b9ef0, #5958b1)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.61 0.619 0.918), color(display-p3 0.35 0.345 0.673))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.357 0.357 0.81), color(display-p3 0.357 0.357 0.81))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#5151cd, #5151cd)", 50 50 + default: "light-dark(#5151cd, #6e6ade)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.318 0.318 0.774), color(display-p3 0.428 0.416 0.843))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#5753c6, #5753c6)", 55 55 + default: "light-dark(#5753c6, #b1a9ff)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.337 0.326 0.748), color(display-p3 0.685 0.662 1))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#272962, #272962)", 60 60 + default: "light-dark(#272962, #e0dffe)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.154 0.161 0.371), color(display-p3 0.878 0.875 0.986))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/jade.stylex.tsx

reviewed

··· 2 2 3 3 export const jade = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fbfefd, #fbfefd)", 5 5 + default: "light-dark(#fbfefd, #0d1512)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.986 0.996 0.992), color(display-p3 0.059 0.083 0.071))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f4fbf7, #f4fbf7)", 10 10 + default: "light-dark(#f4fbf7, #121c18)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.962 0.983 0.969), color(display-p3 0.078 0.11 0.094))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#e6f7ed, #e6f7ed)", 15 15 + default: "light-dark(#e6f7ed, #0f2e22)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.912 0.965 0.932), color(display-p3 0.091 0.176 0.138))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#d6f1e3, #d6f1e3)", 20 20 + default: "light-dark(#d6f1e3, #0b3b2c)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.858 0.941 0.893), color(display-p3 0.102 0.228 0.177))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#c3e9d7, #c3e9d7)", 25 25 + default: "light-dark(#c3e9d7, #114837)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.795 0.909 0.847), color(display-p3 0.133 0.279 0.221))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#acdec8, #acdec8)", 30 30 + default: "light-dark(#acdec8, #1b5745)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.715 0.864 0.791), color(display-p3 0.174 0.334 0.273))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#8bceb6, #8bceb6)", 35 35 + default: "light-dark(#8bceb6, #246854)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.603 0.802 0.718), color(display-p3 0.219 0.402 0.335))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#56ba9f, #56ba9f)", 40 40 + default: "light-dark(#56ba9f, #2a7e68)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.44 0.72 0.629), color(display-p3 0.263 0.488 0.411))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.319 0.63 0.521), color(display-p3 0.319 0.63 0.521))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#26997b, #26997b)", 50 50 + default: "light-dark(#26997b, #27b08b)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.299 0.592 0.488), color(display-p3 0.338 0.68 0.555))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#208368, #208368)", 55 55 + default: "light-dark(#208368, #1fd8a4)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.15 0.5 0.37), color(display-p3 0.4 0.835 0.656))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#1d3b31, #1d3b31)", 60 60 + default: "light-dark(#1d3b31, #adf0d4)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.142 0.229 0.194), color(display-p3 0.734 0.934 0.838))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/lime.stylex.tsx

reviewed

··· 2 2 3 3 export const lime = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fcfdfa, #fcfdfa)", 5 5 + default: "light-dark(#fcfdfa, #11130c)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.989 0.992 0.981), color(display-p3 0.067 0.073 0.048))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f8faf3, #f8faf3)", 10 10 + default: "light-dark(#f8faf3, #151a10)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.975 0.98 0.954), color(display-p3 0.086 0.1 0.067))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#eef6d6, #eef6d6)", 15 15 + default: "light-dark(#eef6d6, #1f2917)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.939 0.965 0.851), color(display-p3 0.13 0.16 0.099))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#e2f0bd, #e2f0bd)", 20 20 + default: "light-dark(#e2f0bd, #29371d)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.896 0.94 0.76), color(display-p3 0.172 0.214 0.126))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#d3e7a6, #d3e7a6)", 25 25 + default: "light-dark(#d3e7a6, #334423)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.843 0.903 0.678), color(display-p3 0.213 0.266 0.153))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#c2da91, #c2da91)", 30 30 + default: "light-dark(#c2da91, #3d522a)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.778 0.852 0.599), color(display-p3 0.257 0.321 0.182))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#abc978, #abc978)", 35 35 + default: "light-dark(#abc978, #496231)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.694 0.784 0.508), color(display-p3 0.307 0.383 0.215))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#8db654, #8db654)", 40 40 + default: "light-dark(#8db654, #577538)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.585 0.707 0.378), color(display-p3 0.365 0.456 0.25))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.78 0.928 0.466), color(display-p3 0.78 0.928 0.466))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#b0e64c, #b0e64c)", 50 50 + default: "light-dark(#b0e64c, #d4ff70)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.734 0.896 0.397), color(display-p3 0.865 0.995 0.519))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#5c7c2f, #5c7c2f)", 55 55 + default: "light-dark(#5c7c2f, #bde56c)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.386 0.482 0.227), color(display-p3 0.771 0.893 0.485))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#37401c, #37401c)", 60 60 + default: "light-dark(#37401c, #e3f7ba)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.222 0.25 0.128), color(display-p3 0.905 0.966 0.753))", 63 63 },

+24 -24

apps/docs/src/components/theme/colors/mauve.stylex.tsx

reviewed

··· 2 2 3 3 export const mauve = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fdfcfd, #fdfcfd)", 5 5 + default: "light-dark(#fdfcfd, #121113)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.991 0.988 0.992), color(display-p3 0.07 0.067 0.074))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#faf9fb, #faf9fb)", 10 10 + default: "light-dark(#faf9fb, #1a191b)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.98 0.976 0.984), color(display-p3 0.101 0.098 0.105))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#f2eff3, #f2eff3)", 15 15 + default: "light-dark(#f2eff3, #232225)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.946 0.938 0.952), color(display-p3 0.138 0.134 0.144))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#eae7ec, #eae7ec)", 20 20 + default: "light-dark(#eae7ec, #2b292d)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.915 0.906 0.925), color(display-p3 0.167 0.161 0.175))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#e3dfe6, #e3dfe6)", 25 25 + default: "light-dark(#e3dfe6, #323035)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.886 0.876 0.901), color(display-p3 0.196 0.189 0.206))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#dbd8e0, #dbd8e0)", 30 30 + default: "light-dark(#dbd8e0, #3c393f)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.856 0.846 0.875), color(display-p3 0.232 0.225 0.245))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#d0cdd7, #d0cdd7)", 35 35 + default: "light-dark(#d0cdd7, #49474e)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.814 0.804 0.84), color(display-p3 0.286 0.277 0.302))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#bcbac7, #bcbac7)", 40 40 + default: "light-dark(#bcbac7, #625f69)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.735 0.728 0.777), color(display-p3 0.383 0.373 0.408))", 43 43 }, 44 44 solid1: { 45 45 - default: "light-dark(#8e8c99, #8e8c99)", 45 45 + default: "light-dark(#8e8c99, #6f6d78)", 46 46 "@media (color-gamut: p3)": 47 47 "light-dark(color(display-p3 0.555 0.549 0.596), color(display-p3 0.434 0.428 0.467))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#84828e, #84828e)", 50 50 + default: "light-dark(#84828e, #7c7a85)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.514 0.508 0.552), color(display-p3 0.487 0.48 0.519))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#65636d, #65636d)", 55 55 + default: "light-dark(#65636d, #b5b2bc)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.395 0.388 0.424), color(display-p3 0.707 0.7 0.735))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#211f26, #211f26)", 60 60 + default: "light-dark(#211f26, #eeeef0)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.128 0.122 0.147), color(display-p3 0.933 0.933 0.94))", 63 63 }, ··· 127 127 128 128 export const mauveInverted = stylex.defineVars({ 129 129 bg: { 130 130 - default: "light-dark(#fdfcfd, #fdfcfd)", 130 130 + default: "light-dark(#121113, #fdfcfd)", 131 131 "@media (color-gamut: p3)": 132 132 "light-dark(color(display-p3 0.07 0.067 0.074), color(display-p3 0.991 0.988 0.992))", 133 133 }, 134 134 bgSubtle: { 135 135 - default: "light-dark(#faf9fb, #faf9fb)", 135 135 + default: "light-dark(#1a191b, #faf9fb)", 136 136 "@media (color-gamut: p3)": 137 137 "light-dark(color(display-p3 0.101 0.098 0.105), color(display-p3 0.98 0.976 0.984))", 138 138 }, 139 139 component1: { 140 140 - default: "light-dark(#f2eff3, #f2eff3)", 140 140 + default: "light-dark(#232225, #f2eff3)", 141 141 "@media (color-gamut: p3)": 142 142 "light-dark(color(display-p3 0.138 0.134 0.144), color(display-p3 0.946 0.938 0.952))", 143 143 }, 144 144 component2: { 145 145 - default: "light-dark(#eae7ec, #eae7ec)", 145 145 + default: "light-dark(#2b292d, #eae7ec)", 146 146 "@media (color-gamut: p3)": 147 147 "light-dark(color(display-p3 0.167 0.161 0.175), color(display-p3 0.915 0.906 0.925))", 148 148 }, 149 149 component3: { 150 150 - default: "light-dark(#e3dfe6, #e3dfe6)", 150 150 + default: "light-dark(#323035, #e3dfe6)", 151 151 "@media (color-gamut: p3)": 152 152 "light-dark(color(display-p3 0.196 0.189 0.206), color(display-p3 0.886 0.876 0.901))", 153 153 }, 154 154 border1: { 155 155 - default: "light-dark(#dbd8e0, #dbd8e0)", 155 155 + default: "light-dark(#3c393f, #dbd8e0)", 156 156 "@media (color-gamut: p3)": 157 157 "light-dark(color(display-p3 0.232 0.225 0.245), color(display-p3 0.856 0.846 0.875))", 158 158 }, 159 159 border2: { 160 160 - default: "light-dark(#d0cdd7, #d0cdd7)", 160 160 + default: "light-dark(#49474e, #d0cdd7)", 161 161 "@media (color-gamut: p3)": 162 162 "light-dark(color(display-p3 0.286 0.277 0.302), color(display-p3 0.814 0.804 0.84))", 163 163 }, 164 164 border3: { 165 165 - default: "light-dark(#bcbac7, #bcbac7)", 165 165 + default: "light-dark(#625f69, #bcbac7)", 166 166 "@media (color-gamut: p3)": 167 167 "light-dark(color(display-p3 0.383 0.373 0.408), color(display-p3 0.735 0.728 0.777))", 168 168 }, 169 169 solid1: { 170 170 - default: "light-dark(#8e8c99, #8e8c99)", 170 170 + default: "light-dark(#6f6d78, #8e8c99)", 171 171 "@media (color-gamut: p3)": 172 172 "light-dark(color(display-p3 0.434 0.428 0.467), color(display-p3 0.555 0.549 0.596))", 173 173 }, 174 174 solid2: { 175 175 - default: "light-dark(#84828e, #84828e)", 175 175 + default: "light-dark(#7c7a85, #84828e)", 176 176 "@media (color-gamut: p3)": 177 177 "light-dark(color(display-p3 0.487 0.48 0.519), color(display-p3 0.514 0.508 0.552))", 178 178 }, 179 179 text1: { 180 180 - default: "light-dark(#65636d, #65636d)", 180 180 + default: "light-dark(#b5b2bc, #65636d)", 181 181 "@media (color-gamut: p3)": 182 182 "light-dark(color(display-p3 0.707 0.7 0.735), color(display-p3 0.395 0.388 0.424))", 183 183 }, 184 184 text2: { 185 185 - default: "light-dark(#211f26, #211f26)", 185 185 + default: "light-dark(#eeeef0, #211f26)", 186 186 "@media (color-gamut: p3)": 187 187 "light-dark(color(display-p3 0.933 0.933 0.94), color(display-p3 0.128 0.122 0.147))", 188 188 },

+11 -11

apps/docs/src/components/theme/colors/mint.stylex.tsx

reviewed

··· 2 2 3 3 export const mint = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#f9fefd, #f9fefd)", 5 5 + default: "light-dark(#f9fefd, #0e1515)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.98 0.995 0.992), color(display-p3 0.059 0.082 0.081))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f2fbf9, #f2fbf9)", 10 10 + default: "light-dark(#f2fbf9, #0f1b1b)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.957 0.985 0.977), color(display-p3 0.068 0.104 0.105))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#ddf9f2, #ddf9f2)", 15 15 + default: "light-dark(#ddf9f2, #092c2b)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.888 0.972 0.95), color(display-p3 0.077 0.17 0.168))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#c8f4e9, #c8f4e9)", 20 20 + default: "light-dark(#c8f4e9, #003a38)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.819 0.951 0.916), color(display-p3 0.068 0.224 0.22))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#b3ecde, #b3ecde)", 25 25 + default: "light-dark(#b3ecde, #004744)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.747 0.918 0.873), color(display-p3 0.104 0.275 0.264))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#9ce0d0, #9ce0d0)", 30 30 + default: "light-dark(#9ce0d0, #105650)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.668 0.87 0.818), color(display-p3 0.154 0.332 0.313))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#7ecfbd, #7ecfbd)", 35 35 + default: "light-dark(#7ecfbd, #1e685f)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.567 0.805 0.744), color(display-p3 0.207 0.403 0.373))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#4cbba5, #4cbba5)", 40 40 + default: "light-dark(#4cbba5, #277f70)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.42 0.724 0.649), color(display-p3 0.258 0.49 0.441))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.62 0.908 0.834), color(display-p3 0.62 0.908 0.834))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#7de0cb, #7de0cb)", 50 50 + default: "light-dark(#7de0cb, #a8f5e5)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.585 0.871 0.797), color(display-p3 0.725 0.954 0.898))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#027864, #027864)", 55 55 + default: "light-dark(#027864, #58d5ba)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.203 0.463 0.397), color(display-p3 0.482 0.825 0.733))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#16433c, #16433c)", 60 60 + default: "light-dark(#16433c, #c4f5e1)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.136 0.259 0.236), color(display-p3 0.807 0.955 0.887))", 63 63 },

+24 -24

apps/docs/src/components/theme/colors/olive.stylex.tsx

reviewed

··· 2 2 3 3 export const olive = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fcfdfc, #fcfdfc)", 5 5 + default: "light-dark(#fcfdfc, #111210)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.989 0.992 0.989), color(display-p3 0.067 0.07 0.063))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f8faf8, #f8faf8)", 10 10 + default: "light-dark(#f8faf8, #181917)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.974 0.98 0.973), color(display-p3 0.095 0.098 0.091))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#eff1ef, #eff1ef)", 15 15 + default: "light-dark(#eff1ef, #212220)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.939 0.945 0.937), color(display-p3 0.131 0.135 0.126))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#e7e9e7, #e7e9e7)", 20 20 + default: "light-dark(#e7e9e7, #282a27)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.907 0.914 0.905), color(display-p3 0.158 0.163 0.153))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#dfe2df, #dfe2df)", 25 25 + default: "light-dark(#dfe2df, #2f312e)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.878 0.885 0.875), color(display-p3 0.186 0.192 0.18))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#d7dad7, #d7dad7)", 30 30 + default: "light-dark(#d7dad7, #383a36)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.846 0.855 0.843), color(display-p3 0.221 0.229 0.215))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#cccfcc, #cccfcc)", 35 35 + default: "light-dark(#cccfcc, #454843)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.803 0.812 0.8), color(display-p3 0.273 0.284 0.266))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#b9bcb8, #b9bcb8)", 40 40 + default: "light-dark(#b9bcb8, #5c625b)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.727 0.738 0.723), color(display-p3 0.365 0.382 0.359))", 43 43 }, 44 44 solid1: { 45 45 - default: "light-dark(#898e87, #898e87)", 45 45 + default: "light-dark(#898e87, #687066)", 46 46 "@media (color-gamut: p3)": 47 47 "light-dark(color(display-p3 0.541 0.556 0.532), color(display-p3 0.414 0.438 0.404))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#7f847d, #7f847d)", 50 50 + default: "light-dark(#7f847d, #767d74)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.5 0.515 0.491), color(display-p3 0.467 0.49 0.458))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#60655f, #60655f)", 55 55 + default: "light-dark(#60655f, #afb5ad)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.38 0.395 0.374), color(display-p3 0.69 0.709 0.682))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#1d211c, #1d211c)", 60 60 + default: "light-dark(#1d211c, #eceeec)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.117 0.129 0.111), color(display-p3 0.927 0.933 0.926))", 63 63 }, ··· 127 127 128 128 export const oliveInverted = stylex.defineVars({ 129 129 bg: { 130 130 - default: "light-dark(#fcfdfc, #fcfdfc)", 130 130 + default: "light-dark(#111210, #fcfdfc)", 131 131 "@media (color-gamut: p3)": 132 132 "light-dark(color(display-p3 0.067 0.07 0.063), color(display-p3 0.989 0.992 0.989))", 133 133 }, 134 134 bgSubtle: { 135 135 - default: "light-dark(#f8faf8, #f8faf8)", 135 135 + default: "light-dark(#181917, #f8faf8)", 136 136 "@media (color-gamut: p3)": 137 137 "light-dark(color(display-p3 0.095 0.098 0.091), color(display-p3 0.974 0.98 0.973))", 138 138 }, 139 139 component1: { 140 140 - default: "light-dark(#eff1ef, #eff1ef)", 140 140 + default: "light-dark(#212220, #eff1ef)", 141 141 "@media (color-gamut: p3)": 142 142 "light-dark(color(display-p3 0.131 0.135 0.126), color(display-p3 0.939 0.945 0.937))", 143 143 }, 144 144 component2: { 145 145 - default: "light-dark(#e7e9e7, #e7e9e7)", 145 145 + default: "light-dark(#282a27, #e7e9e7)", 146 146 "@media (color-gamut: p3)": 147 147 "light-dark(color(display-p3 0.158 0.163 0.153), color(display-p3 0.907 0.914 0.905))", 148 148 }, 149 149 component3: { 150 150 - default: "light-dark(#dfe2df, #dfe2df)", 150 150 + default: "light-dark(#2f312e, #dfe2df)", 151 151 "@media (color-gamut: p3)": 152 152 "light-dark(color(display-p3 0.186 0.192 0.18), color(display-p3 0.878 0.885 0.875))", 153 153 }, 154 154 border1: { 155 155 - default: "light-dark(#d7dad7, #d7dad7)", 155 155 + default: "light-dark(#383a36, #d7dad7)", 156 156 "@media (color-gamut: p3)": 157 157 "light-dark(color(display-p3 0.221 0.229 0.215), color(display-p3 0.846 0.855 0.843))", 158 158 }, 159 159 border2: { 160 160 - default: "light-dark(#cccfcc, #cccfcc)", 160 160 + default: "light-dark(#454843, #cccfcc)", 161 161 "@media (color-gamut: p3)": 162 162 "light-dark(color(display-p3 0.273 0.284 0.266), color(display-p3 0.803 0.812 0.8))", 163 163 }, 164 164 border3: { 165 165 - default: "light-dark(#b9bcb8, #b9bcb8)", 165 165 + default: "light-dark(#5c625b, #b9bcb8)", 166 166 "@media (color-gamut: p3)": 167 167 "light-dark(color(display-p3 0.365 0.382 0.359), color(display-p3 0.727 0.738 0.723))", 168 168 }, 169 169 solid1: { 170 170 - default: "light-dark(#898e87, #898e87)", 170 170 + default: "light-dark(#687066, #898e87)", 171 171 "@media (color-gamut: p3)": 172 172 "light-dark(color(display-p3 0.414 0.438 0.404), color(display-p3 0.541 0.556 0.532))", 173 173 }, 174 174 solid2: { 175 175 - default: "light-dark(#7f847d, #7f847d)", 175 175 + default: "light-dark(#767d74, #7f847d)", 176 176 "@media (color-gamut: p3)": 177 177 "light-dark(color(display-p3 0.467 0.49 0.458), color(display-p3 0.5 0.515 0.491))", 178 178 }, 179 179 text1: { 180 180 - default: "light-dark(#60655f, #60655f)", 180 180 + default: "light-dark(#afb5ad, #60655f)", 181 181 "@media (color-gamut: p3)": 182 182 "light-dark(color(display-p3 0.69 0.709 0.682), color(display-p3 0.38 0.395 0.374))", 183 183 }, 184 184 text2: { 185 185 - default: "light-dark(#1d211c, #1d211c)", 185 185 + default: "light-dark(#eceeec, #1d211c)", 186 186 "@media (color-gamut: p3)": 187 187 "light-dark(color(display-p3 0.927 0.933 0.926), color(display-p3 0.117 0.129 0.111))", 188 188 },

+11 -11

apps/docs/src/components/theme/colors/orange.stylex.tsx

reviewed

··· 2 2 3 3 export const orange = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fefcfb, #fefcfb)", 5 5 + default: "light-dark(#fefcfb, #17120e)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.995 0.988 0.985), color(display-p3 0.088 0.07 0.057))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fff7ed, #fff7ed)", 10 10 + default: "light-dark(#fff7ed, #1e160f)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.994 0.968 0.934), color(display-p3 0.113 0.089 0.061))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#ffefd6, #ffefd6)", 15 15 + default: "light-dark(#ffefd6, #331e0b)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.989 0.938 0.85), color(display-p3 0.189 0.12 0.056))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#ffdfb5, #ffdfb5)", 20 20 + default: "light-dark(#ffdfb5, #462100)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 1 0.874 0.687), color(display-p3 0.262 0.132 0))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#ffd19a, #ffd19a)", 25 25 + default: "light-dark(#ffd19a, #562800)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 1 0.821 0.583), color(display-p3 0.315 0.168 0.016))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#ffc182, #ffc182)", 30 30 + default: "light-dark(#ffc182, #66350c)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.975 0.767 0.545), color(display-p3 0.376 0.219 0.088))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#f5ae73, #f5ae73)", 35 35 + default: "light-dark(#f5ae73, #7e451d)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.919 0.693 0.486), color(display-p3 0.465 0.283 0.147))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#ec9455, #ec9455)", 40 40 + default: "light-dark(#ec9455, #a35829)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.877 0.597 0.379), color(display-p3 0.601 0.359 0.201))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.9 0.45 0.2), color(display-p3 0.9 0.45 0.2))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#ef5f00, #ef5f00)", 50 50 + default: "light-dark(#ef5f00, #ff801f)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.87 0.409 0.164), color(display-p3 0.98 0.51 0.23))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#cc4e00, #cc4e00)", 55 55 + default: "light-dark(#cc4e00, #ffa057)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#582d1d, #582d1d)", 60 60 + default: "light-dark(#582d1d, #ffe0c2)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.323 0.185 0.127), color(display-p3 0.98 0.883 0.775))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/pink.stylex.tsx

reviewed

··· 2 2 3 3 export const pink = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fffcfe, #fffcfe)", 5 5 + default: "light-dark(#fffcfe, #191117)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.998 0.989 0.996), color(display-p3 0.093 0.068 0.089))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fef7fb, #fef7fb)", 10 10 + default: "light-dark(#fef7fb, #21121d)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.992 0.97 0.985), color(display-p3 0.121 0.073 0.11))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#fee9f5, #fee9f5)", 15 15 + default: "light-dark(#fee9f5, #37172f)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.981 0.917 0.96), color(display-p3 0.198 0.098 0.179))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#fbdcef, #fbdcef)", 20 20 + default: "light-dark(#fbdcef, #4b143d)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.963 0.867 0.932), color(display-p3 0.271 0.095 0.231))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#f6cee7, #f6cee7)", 25 25 + default: "light-dark(#f6cee7, #591c47)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.939 0.815 0.899), color(display-p3 0.32 0.127 0.273))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#efbfdd, #efbfdd)", 30 30 + default: "light-dark(#efbfdd, #692955)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.907 0.756 0.859), color(display-p3 0.382 0.177 0.326))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#e7acd0, #e7acd0)", 35 35 + default: "light-dark(#e7acd0, #833869)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.869 0.683 0.81), color(display-p3 0.477 0.238 0.405))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#dd93c2, #dd93c2)", 40 40 + default: "light-dark(#dd93c2, #a84885)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.825 0.59 0.751), color(display-p3 0.612 0.304 0.51))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.775 0.297 0.61), color(display-p3 0.775 0.297 0.61))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#cf3897, #cf3897)", 50 50 + default: "light-dark(#cf3897, #de51a8)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.748 0.27 0.581), color(display-p3 0.808 0.356 0.645))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#c2298a, #c2298a)", 55 55 + default: "light-dark(#c2298a, #ff8dcc)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.698 0.219 0.528), color(display-p3 1 0.535 0.78))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#651249, #651249)", 60 60 + default: "light-dark(#651249, #fdd1ea)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.363 0.101 0.279), color(display-p3 0.964 0.826 0.912))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/plum.stylex.tsx

reviewed

··· 2 2 3 3 export const plum = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fefcff, #fefcff)", 5 5 + default: "light-dark(#fefcff, #181118)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.995 0.988 0.999), color(display-p3 0.09 0.068 0.092))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fdf7fd, #fdf7fd)", 10 10 + default: "light-dark(#fdf7fd, #201320)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.988 0.971 0.99), color(display-p3 0.118 0.077 0.121))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#fbebfb, #fbebfb)", 15 15 + default: "light-dark(#fbebfb, #351a35)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.973 0.923 0.98), color(display-p3 0.192 0.105 0.202))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#f7def8, #f7def8)", 20 20 + default: "light-dark(#f7def8, #451d47)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.953 0.875 0.966), color(display-p3 0.25 0.121 0.271))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#f2d1f3, #f2d1f3)", 25 25 + default: "light-dark(#f2d1f3, #512454)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.926 0.825 0.945), color(display-p3 0.293 0.152 0.319))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#e9c2ec, #e9c2ec)", 30 30 + default: "light-dark(#e9c2ec, #5e3061)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.89 0.765 0.916), color(display-p3 0.343 0.198 0.372))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#deade3, #deade3)", 35 35 + default: "light-dark(#deade3, #734079)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.84 0.686 0.877), color(display-p3 0.424 0.262 0.461))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#cf91d8, #cf91d8)", 40 40 + default: "light-dark(#cf91d8, #92549c)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.775 0.58 0.832), color(display-p3 0.54 0.341 0.595))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.624 0.313 0.708), color(display-p3 0.624 0.313 0.708))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#a144af, #a144af)", 50 50 + default: "light-dark(#a144af, #b658c4)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.587 0.29 0.667), color(display-p3 0.666 0.365 0.748))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#953ea3, #953ea3)", 55 55 + default: "light-dark(#953ea3, #e796f3)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.543 0.263 0.619), color(display-p3 0.86 0.602 0.933))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#53195d, #53195d)", 60 60 + default: "light-dark(#53195d, #f4d4f4)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.299 0.114 0.352), color(display-p3 0.936 0.836 0.949))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/purple.stylex.tsx

reviewed

··· 2 2 3 3 export const purple = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fefcfe, #fefcfe)", 5 5 + default: "light-dark(#fefcfe, #18111b)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.995 0.988 0.996), color(display-p3 0.09 0.068 0.103))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fbf7fe, #fbf7fe)", 10 10 + default: "light-dark(#fbf7fe, #1e1523)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.983 0.971 0.993), color(display-p3 0.113 0.082 0.134))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#f7edfe, #f7edfe)", 15 15 + default: "light-dark(#f7edfe, #301c3b)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.963 0.931 0.989), color(display-p3 0.175 0.112 0.224))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#f2e2fc, #f2e2fc)", 20 20 + default: "light-dark(#f2e2fc, #3d224e)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.937 0.888 0.981), color(display-p3 0.224 0.137 0.297))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#ead5f9, #ead5f9)", 25 25 + default: "light-dark(#ead5f9, #48295c)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.904 0.837 0.966), color(display-p3 0.264 0.167 0.349))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#e0c4f4, #e0c4f4)", 30 30 + default: "light-dark(#e0c4f4, #54346b)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.86 0.774 0.942), color(display-p3 0.311 0.208 0.406))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#d1afec, #d1afec)", 35 35 + default: "light-dark(#d1afec, #664282)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.799 0.69 0.91), color(display-p3 0.381 0.266 0.496))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#be93e4, #be93e4)", 40 40 + default: "light-dark(#be93e4, #8457aa)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.719 0.583 0.874), color(display-p3 0.49 0.349 0.649))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.523 0.318 0.751), color(display-p3 0.523 0.318 0.751))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#8347b9, #8347b9)", 50 50 + default: "light-dark(#8347b9, #9a5cd0)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.483 0.289 0.7), color(display-p3 0.57 0.373 0.791))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#8145b5, #8145b5)", 55 55 + default: "light-dark(#8145b5, #d19dff)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.473 0.281 0.687), color(display-p3 0.8 0.62 1))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#402060, #402060)", 60 60 + default: "light-dark(#402060, #ecd9fa)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.234 0.132 0.363), color(display-p3 0.913 0.854 0.971))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/red.stylex.tsx

reviewed

··· 2 2 3 3 export const red = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fffcfc, #fffcfc)", 5 5 + default: "light-dark(#fffcfc, #191111)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.998 0.989 0.988), color(display-p3 0.093 0.068 0.067))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fff7f7, #fff7f7)", 10 10 + default: "light-dark(#fff7f7, #201314)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.995 0.971 0.971), color(display-p3 0.118 0.077 0.079))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#feebec, #feebec)", 15 15 + default: "light-dark(#feebec, #3b1219)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.985 0.925 0.925), color(display-p3 0.211 0.081 0.099))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#ffdbdc, #ffdbdc)", 20 20 + default: "light-dark(#ffdbdc, #500f1c)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.999 0.866 0.866), color(display-p3 0.287 0.079 0.113))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#ffcdce, #ffcdce)", 25 25 + default: "light-dark(#ffcdce, #611623)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.984 0.812 0.811), color(display-p3 0.348 0.11 0.142))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#fdbdbe, #fdbdbe)", 30 30 + default: "light-dark(#fdbdbe, #72232d)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.955 0.751 0.749), color(display-p3 0.414 0.16 0.183))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#f4a9aa, #f4a9aa)", 35 35 + default: "light-dark(#f4a9aa, #8c333a)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.915 0.675 0.672), color(display-p3 0.508 0.224 0.236))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#eb8e90, #eb8e90)", 40 40 + default: "light-dark(#eb8e90, #b54548)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.872 0.575 0.572), color(display-p3 0.659 0.298 0.297))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.83 0.329 0.324), color(display-p3 0.83 0.329 0.324))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#dc3e42, #dc3e42)", 50 50 + default: "light-dark(#dc3e42, #ec5d5e)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.798 0.294 0.285), color(display-p3 0.861 0.403 0.387))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#ce2c31, #ce2c31)", 55 55 + default: "light-dark(#ce2c31, #ff9592)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#641723, #641723)", 60 60 + default: "light-dark(#641723, #ffd1d9)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.36 0.115 0.143), color(display-p3 0.971 0.826 0.852))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/ruby.stylex.tsx

reviewed

··· 2 2 3 3 export const ruby = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fffcfd, #fffcfd)", 5 5 + default: "light-dark(#fffcfd, #191113)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.998 0.989 0.992), color(display-p3 0.093 0.068 0.074))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fff7f8, #fff7f8)", 10 10 + default: "light-dark(#fff7f8, #1e1517)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.995 0.971 0.974), color(display-p3 0.113 0.083 0.089))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#feeaed, #feeaed)", 15 15 + default: "light-dark(#feeaed, #3a141e)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.983 0.92 0.928), color(display-p3 0.208 0.088 0.117))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#ffdce1, #ffdce1)", 20 20 + default: "light-dark(#ffdce1, #4e1325)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.987 0.869 0.885), color(display-p3 0.279 0.092 0.147))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#ffced6, #ffced6)", 25 25 + default: "light-dark(#ffced6, #5e1a2e)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.968 0.817 0.839), color(display-p3 0.337 0.12 0.18))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#f8bfc8, #f8bfc8)", 30 30 + default: "light-dark(#f8bfc8, #6f2539)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.937 0.758 0.786), color(display-p3 0.401 0.166 0.223))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#efacb8, #efacb8)", 35 35 + default: "light-dark(#efacb8, #883447)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.897 0.685 0.721), color(display-p3 0.495 0.224 0.281))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#e592a3, #e592a3)", 40 40 + default: "light-dark(#e592a3, #b3445a)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.851 0.588 0.639), color(display-p3 0.652 0.295 0.359))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.83 0.323 0.408), color(display-p3 0.83 0.323 0.408))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#dc3b5d, #dc3b5d)", 50 50 + default: "light-dark(#dc3b5d, #ec5a72)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.795 0.286 0.375), color(display-p3 0.857 0.392 0.455))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#ca244d, #ca244d)", 55 55 + default: "light-dark(#ca244d, #ff949d)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.728 0.211 0.311), color(display-p3 1 0.57 0.59))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#64172b, #64172b)", 60 60 + default: "light-dark(#64172b, #fed2e1)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.36 0.115 0.171), color(display-p3 0.968 0.83 0.88))", 63 63 },

+24 -24

apps/docs/src/components/theme/colors/sage.stylex.tsx

reviewed

··· 2 2 3 3 export const sage = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fbfdfc, #fbfdfc)", 5 5 + default: "light-dark(#fbfdfc, #101211)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.986 0.992 0.988), color(display-p3 0.064 0.07 0.067))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f7f9f8, #f7f9f8)", 10 10 + default: "light-dark(#f7f9f8, #171918)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.97 0.977 0.974), color(display-p3 0.092 0.098 0.094))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#eef1f0, #eef1f0)", 15 15 + default: "light-dark(#eef1f0, #202221)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.935 0.944 0.94), color(display-p3 0.128 0.135 0.131))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#e6e9e8, #e6e9e8)", 20 20 + default: "light-dark(#e6e9e8, #272a29)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.904 0.913 0.909), color(display-p3 0.155 0.164 0.159))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#dfe2e0, #dfe2e0)", 25 25 + default: "light-dark(#dfe2e0, #2e3130)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.875 0.885 0.88), color(display-p3 0.183 0.193 0.188))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#d7dad9, #d7dad9)", 30 30 + default: "light-dark(#d7dad9, #373b39)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.844 0.854 0.849), color(display-p3 0.218 0.23 0.224))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#cbcfcd, #cbcfcd)", 35 35 + default: "light-dark(#cbcfcd, #444947)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.8 0.811 0.806), color(display-p3 0.269 0.285 0.277))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#b8bcba, #b8bcba)", 40 40 + default: "light-dark(#b8bcba, #5b625f)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.725 0.738 0.732), color(display-p3 0.362 0.382 0.373))", 43 43 }, 44 44 solid1: { 45 45 - default: "light-dark(#868e8b, #868e8b)", 45 45 + default: "light-dark(#868e8b, #63706b)", 46 46 "@media (color-gamut: p3)": 47 47 "light-dark(color(display-p3 0.531 0.556 0.546), color(display-p3 0.398 0.438 0.421))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#7c8481, #7c8481)", 50 50 + default: "light-dark(#7c8481, #717d79)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.492 0.515 0.506), color(display-p3 0.453 0.49 0.474))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#5f6563, #5f6563)", 55 55 + default: "light-dark(#5f6563, #adb5b2)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.377 0.395 0.389), color(display-p3 0.685 0.709 0.697))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#1a211e, #1a211e)", 60 60 + default: "light-dark(#1a211e, #eceeed)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.107 0.129 0.118), color(display-p3 0.927 0.933 0.93))", 63 63 }, ··· 127 127 128 128 export const sageInverted = stylex.defineVars({ 129 129 bg: { 130 130 - default: "light-dark(#fbfdfc, #fbfdfc)", 130 130 + default: "light-dark(#101211, #fbfdfc)", 131 131 "@media (color-gamut: p3)": 132 132 "light-dark(color(display-p3 0.064 0.07 0.067), color(display-p3 0.986 0.992 0.988))", 133 133 }, 134 134 bgSubtle: { 135 135 - default: "light-dark(#f7f9f8, #f7f9f8)", 135 135 + default: "light-dark(#171918, #f7f9f8)", 136 136 "@media (color-gamut: p3)": 137 137 "light-dark(color(display-p3 0.092 0.098 0.094), color(display-p3 0.97 0.977 0.974))", 138 138 }, 139 139 component1: { 140 140 - default: "light-dark(#eef1f0, #eef1f0)", 140 140 + default: "light-dark(#202221, #eef1f0)", 141 141 "@media (color-gamut: p3)": 142 142 "light-dark(color(display-p3 0.128 0.135 0.131), color(display-p3 0.935 0.944 0.94))", 143 143 }, 144 144 component2: { 145 145 - default: "light-dark(#e6e9e8, #e6e9e8)", 145 145 + default: "light-dark(#272a29, #e6e9e8)", 146 146 "@media (color-gamut: p3)": 147 147 "light-dark(color(display-p3 0.155 0.164 0.159), color(display-p3 0.904 0.913 0.909))", 148 148 }, 149 149 component3: { 150 150 - default: "light-dark(#dfe2e0, #dfe2e0)", 150 150 + default: "light-dark(#2e3130, #dfe2e0)", 151 151 "@media (color-gamut: p3)": 152 152 "light-dark(color(display-p3 0.183 0.193 0.188), color(display-p3 0.875 0.885 0.88))", 153 153 }, 154 154 border1: { 155 155 - default: "light-dark(#d7dad9, #d7dad9)", 155 155 + default: "light-dark(#373b39, #d7dad9)", 156 156 "@media (color-gamut: p3)": 157 157 "light-dark(color(display-p3 0.218 0.23 0.224), color(display-p3 0.844 0.854 0.849))", 158 158 }, 159 159 border2: { 160 160 - default: "light-dark(#cbcfcd, #cbcfcd)", 160 160 + default: "light-dark(#444947, #cbcfcd)", 161 161 "@media (color-gamut: p3)": 162 162 "light-dark(color(display-p3 0.269 0.285 0.277), color(display-p3 0.8 0.811 0.806))", 163 163 }, 164 164 border3: { 165 165 - default: "light-dark(#b8bcba, #b8bcba)", 165 165 + default: "light-dark(#5b625f, #b8bcba)", 166 166 "@media (color-gamut: p3)": 167 167 "light-dark(color(display-p3 0.362 0.382 0.373), color(display-p3 0.725 0.738 0.732))", 168 168 }, 169 169 solid1: { 170 170 - default: "light-dark(#868e8b, #868e8b)", 170 170 + default: "light-dark(#63706b, #868e8b)", 171 171 "@media (color-gamut: p3)": 172 172 "light-dark(color(display-p3 0.398 0.438 0.421), color(display-p3 0.531 0.556 0.546))", 173 173 }, 174 174 solid2: { 175 175 - default: "light-dark(#7c8481, #7c8481)", 175 175 + default: "light-dark(#717d79, #7c8481)", 176 176 "@media (color-gamut: p3)": 177 177 "light-dark(color(display-p3 0.453 0.49 0.474), color(display-p3 0.492 0.515 0.506))", 178 178 }, 179 179 text1: { 180 180 - default: "light-dark(#5f6563, #5f6563)", 180 180 + default: "light-dark(#adb5b2, #5f6563)", 181 181 "@media (color-gamut: p3)": 182 182 "light-dark(color(display-p3 0.685 0.709 0.697), color(display-p3 0.377 0.395 0.389))", 183 183 }, 184 184 text2: { 185 185 - default: "light-dark(#1a211e, #1a211e)", 185 185 + default: "light-dark(#eceeed, #1a211e)", 186 186 "@media (color-gamut: p3)": 187 187 "light-dark(color(display-p3 0.927 0.933 0.93), color(display-p3 0.107 0.129 0.118))", 188 188 },

+24 -24

apps/docs/src/components/theme/colors/sand.stylex.tsx

reviewed

··· 2 2 3 3 export const sand = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fdfdfc, #fdfdfc)", 5 5 + default: "light-dark(#fdfdfc, #111110)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.992 0.992 0.989), color(display-p3 0.067 0.067 0.063))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f9f9f8, #f9f9f8)", 10 10 + default: "light-dark(#f9f9f8, #191918)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.977 0.977 0.973), color(display-p3 0.098 0.098 0.094))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#f1f0ef, #f1f0ef)", 15 15 + default: "light-dark(#f1f0ef, #222221)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.943 0.942 0.936), color(display-p3 0.135 0.135 0.129))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#e9e8e6, #e9e8e6)", 20 20 + default: "light-dark(#e9e8e6, #2a2a28)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.913 0.912 0.903), color(display-p3 0.164 0.163 0.156))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#e2e1de, #e2e1de)", 25 25 + default: "light-dark(#e2e1de, #31312e)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.885 0.883 0.873), color(display-p3 0.193 0.192 0.183))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#dad9d6, #dad9d6)", 30 30 + default: "light-dark(#dad9d6, #3b3a37)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.854 0.852 0.839), color(display-p3 0.23 0.229 0.217))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#cfceca, #cfceca)", 35 35 + default: "light-dark(#cfceca, #494844)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.813 0.81 0.794), color(display-p3 0.285 0.282 0.267))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#bcbbb5, #bcbbb5)", 40 40 + default: "light-dark(#bcbbb5, #62605b)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.738 0.734 0.713), color(display-p3 0.384 0.378 0.357))", 43 43 }, 44 44 solid1: { 45 45 - default: "light-dark(#8d8d86, #8d8d86)", 45 45 + default: "light-dark(#8d8d86, #6f6d66)", 46 46 "@media (color-gamut: p3)": 47 47 "light-dark(color(display-p3 0.553 0.553 0.528), color(display-p3 0.434 0.428 0.403))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#82827c, #82827c)", 50 50 + default: "light-dark(#82827c, #7c7b74)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.511 0.511 0.488), color(display-p3 0.487 0.481 0.456))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#63635e, #63635e)", 55 55 + default: "light-dark(#63635e, #b5b3ad)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.388 0.388 0.37), color(display-p3 0.707 0.703 0.68))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#21201c, #21201c)", 60 60 + default: "light-dark(#21201c, #eeeeec)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.129 0.126 0.111), color(display-p3 0.933 0.933 0.926))", 63 63 }, ··· 127 127 128 128 export const sandInverted = stylex.defineVars({ 129 129 bg: { 130 130 - default: "light-dark(#fdfdfc, #fdfdfc)", 130 130 + default: "light-dark(#111110, #fdfdfc)", 131 131 "@media (color-gamut: p3)": 132 132 "light-dark(color(display-p3 0.067 0.067 0.063), color(display-p3 0.992 0.992 0.989))", 133 133 }, 134 134 bgSubtle: { 135 135 - default: "light-dark(#f9f9f8, #f9f9f8)", 135 135 + default: "light-dark(#191918, #f9f9f8)", 136 136 "@media (color-gamut: p3)": 137 137 "light-dark(color(display-p3 0.098 0.098 0.094), color(display-p3 0.977 0.977 0.973))", 138 138 }, 139 139 component1: { 140 140 - default: "light-dark(#f1f0ef, #f1f0ef)", 140 140 + default: "light-dark(#222221, #f1f0ef)", 141 141 "@media (color-gamut: p3)": 142 142 "light-dark(color(display-p3 0.135 0.135 0.129), color(display-p3 0.943 0.942 0.936))", 143 143 }, 144 144 component2: { 145 145 - default: "light-dark(#e9e8e6, #e9e8e6)", 145 145 + default: "light-dark(#2a2a28, #e9e8e6)", 146 146 "@media (color-gamut: p3)": 147 147 "light-dark(color(display-p3 0.164 0.163 0.156), color(display-p3 0.913 0.912 0.903))", 148 148 }, 149 149 component3: { 150 150 - default: "light-dark(#e2e1de, #e2e1de)", 150 150 + default: "light-dark(#31312e, #e2e1de)", 151 151 "@media (color-gamut: p3)": 152 152 "light-dark(color(display-p3 0.193 0.192 0.183), color(display-p3 0.885 0.883 0.873))", 153 153 }, 154 154 border1: { 155 155 - default: "light-dark(#dad9d6, #dad9d6)", 155 155 + default: "light-dark(#3b3a37, #dad9d6)", 156 156 "@media (color-gamut: p3)": 157 157 "light-dark(color(display-p3 0.23 0.229 0.217), color(display-p3 0.854 0.852 0.839))", 158 158 }, 159 159 border2: { 160 160 - default: "light-dark(#cfceca, #cfceca)", 160 160 + default: "light-dark(#494844, #cfceca)", 161 161 "@media (color-gamut: p3)": 162 162 "light-dark(color(display-p3 0.285 0.282 0.267), color(display-p3 0.813 0.81 0.794))", 163 163 }, 164 164 border3: { 165 165 - default: "light-dark(#bcbbb5, #bcbbb5)", 165 165 + default: "light-dark(#62605b, #bcbbb5)", 166 166 "@media (color-gamut: p3)": 167 167 "light-dark(color(display-p3 0.384 0.378 0.357), color(display-p3 0.738 0.734 0.713))", 168 168 }, 169 169 solid1: { 170 170 - default: "light-dark(#8d8d86, #8d8d86)", 170 170 + default: "light-dark(#6f6d66, #8d8d86)", 171 171 "@media (color-gamut: p3)": 172 172 "light-dark(color(display-p3 0.434 0.428 0.403), color(display-p3 0.553 0.553 0.528))", 173 173 }, 174 174 solid2: { 175 175 - default: "light-dark(#82827c, #82827c)", 175 175 + default: "light-dark(#7c7b74, #82827c)", 176 176 "@media (color-gamut: p3)": 177 177 "light-dark(color(display-p3 0.487 0.481 0.456), color(display-p3 0.511 0.511 0.488))", 178 178 }, 179 179 text1: { 180 180 - default: "light-dark(#63635e, #63635e)", 180 180 + default: "light-dark(#b5b3ad, #63635e)", 181 181 "@media (color-gamut: p3)": 182 182 "light-dark(color(display-p3 0.707 0.703 0.68), color(display-p3 0.388 0.388 0.37))", 183 183 }, 184 184 text2: { 185 185 - default: "light-dark(#21201c, #21201c)", 185 185 + default: "light-dark(#eeeeec, #21201c)", 186 186 "@media (color-gamut: p3)": 187 187 "light-dark(color(display-p3 0.933 0.933 0.926), color(display-p3 0.129 0.126 0.111))", 188 188 },

+11 -11

apps/docs/src/components/theme/colors/sky.stylex.tsx

reviewed

··· 2 2 3 3 export const sky = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#f9feff, #f9feff)", 5 5 + default: "light-dark(#f9feff, #0d141f)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.98 0.995 0.999), color(display-p3 0.056 0.078 0.116))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f1fafd, #f1fafd)", 10 10 + default: "light-dark(#f1fafd, #111a27)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.953 0.98 0.99), color(display-p3 0.075 0.101 0.149))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#e1f6fd, #e1f6fd)", 15 15 + default: "light-dark(#e1f6fd, #112840)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.899 0.963 0.989), color(display-p3 0.089 0.154 0.244))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#d1f0fa, #d1f0fa)", 20 20 + default: "light-dark(#d1f0fa, #113555)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.842 0.937 0.977), color(display-p3 0.106 0.207 0.323))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#bee7f5, #bee7f5)", 25 25 + default: "light-dark(#bee7f5, #154467)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.777 0.9 0.954), color(display-p3 0.135 0.261 0.394))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#a9daed, #a9daed)", 30 30 + default: "light-dark(#a9daed, #1b537b)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.701 0.851 0.921), color(display-p3 0.17 0.322 0.469))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#8dcae3, #8dcae3)", 35 35 + default: "light-dark(#8dcae3, #1f6692)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.604 0.785 0.879), color(display-p3 0.205 0.394 0.557))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#60b3d7, #60b3d7)", 40 40 + default: "light-dark(#60b3d7, #197cae)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.457 0.696 0.829), color(display-p3 0.232 0.48 0.665))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.585 0.877 0.983), color(display-p3 0.585 0.877 0.983))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#74daf8, #74daf8)", 50 50 + default: "light-dark(#74daf8, #a8eeff)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.555 0.845 0.959), color(display-p3 0.718 0.925 0.991))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#00749e, #00749e)", 55 55 + default: "light-dark(#00749e, #75c7f0)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.193 0.448 0.605), color(display-p3 0.536 0.772 0.924))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#1d3e56, #1d3e56)", 60 60 + default: "light-dark(#1d3e56, #c2f3ff)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.145 0.241 0.329), color(display-p3 0.799 0.947 0.993))", 63 63 },

+24 -24

apps/docs/src/components/theme/colors/slate.stylex.tsx

reviewed

··· 2 2 3 3 export const slate = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fcfcfd, #fcfcfd)", 5 5 + default: "light-dark(#fcfcfd, #111113)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.988 0.988 0.992), color(display-p3 0.067 0.067 0.074))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f9f9fb, #f9f9fb)", 10 10 + default: "light-dark(#f9f9fb, #18191b)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.976 0.976 0.984), color(display-p3 0.095 0.098 0.105))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#f0f0f3, #f0f0f3)", 15 15 + default: "light-dark(#f0f0f3, #212225)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.94 0.941 0.953), color(display-p3 0.13 0.135 0.145))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#e8e8ec, #e8e8ec)", 20 20 + default: "light-dark(#e8e8ec, #272a2d)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.908 0.909 0.925), color(display-p3 0.156 0.163 0.176))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#e0e1e6, #e0e1e6)", 25 25 + default: "light-dark(#e0e1e6, #2e3135)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.88 0.881 0.901), color(display-p3 0.183 0.191 0.206))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#d9d9e0, #d9d9e0)", 30 30 + default: "light-dark(#d9d9e0, #363a3f)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.85 0.852 0.876), color(display-p3 0.215 0.226 0.244))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#cdced6, #cdced6)", 35 35 + default: "light-dark(#cdced6, #43484e)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.805 0.808 0.838), color(display-p3 0.265 0.28 0.302))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#b9bbc6, #b9bbc6)", 40 40 + default: "light-dark(#b9bbc6, #5a6169)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.727 0.733 0.773), color(display-p3 0.357 0.381 0.409))", 43 43 }, 44 44 solid1: { 45 45 - default: "light-dark(#8b8d98, #8b8d98)", 45 45 + default: "light-dark(#8b8d98, #696e77)", 46 46 "@media (color-gamut: p3)": 47 47 "light-dark(color(display-p3 0.547 0.553 0.592), color(display-p3 0.415 0.431 0.463))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#80838d, #80838d)", 50 50 + default: "light-dark(#80838d, #777b84)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.503 0.512 0.549), color(display-p3 0.469 0.483 0.514))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#60646c, #60646c)", 55 55 + default: "light-dark(#60646c, #b0b4ba)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.379 0.392 0.421), color(display-p3 0.692 0.704 0.728))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#1c2024, #1c2024)", 60 60 + default: "light-dark(#1c2024, #edeef0)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.113 0.125 0.14), color(display-p3 0.93 0.933 0.94))", 63 63 }, ··· 127 127 128 128 export const slateInverted = stylex.defineVars({ 129 129 bg: { 130 130 - default: "light-dark(#fcfcfd, #fcfcfd)", 130 130 + default: "light-dark(#111113, #fcfcfd)", 131 131 "@media (color-gamut: p3)": 132 132 "light-dark(color(display-p3 0.067 0.067 0.074), color(display-p3 0.988 0.988 0.992))", 133 133 }, 134 134 bgSubtle: { 135 135 - default: "light-dark(#f9f9fb, #f9f9fb)", 135 135 + default: "light-dark(#18191b, #f9f9fb)", 136 136 "@media (color-gamut: p3)": 137 137 "light-dark(color(display-p3 0.095 0.098 0.105), color(display-p3 0.976 0.976 0.984))", 138 138 }, 139 139 component1: { 140 140 - default: "light-dark(#f0f0f3, #f0f0f3)", 140 140 + default: "light-dark(#212225, #f0f0f3)", 141 141 "@media (color-gamut: p3)": 142 142 "light-dark(color(display-p3 0.13 0.135 0.145), color(display-p3 0.94 0.941 0.953))", 143 143 }, 144 144 component2: { 145 145 - default: "light-dark(#e8e8ec, #e8e8ec)", 145 145 + default: "light-dark(#272a2d, #e8e8ec)", 146 146 "@media (color-gamut: p3)": 147 147 "light-dark(color(display-p3 0.156 0.163 0.176), color(display-p3 0.908 0.909 0.925))", 148 148 }, 149 149 component3: { 150 150 - default: "light-dark(#e0e1e6, #e0e1e6)", 150 150 + default: "light-dark(#2e3135, #e0e1e6)", 151 151 "@media (color-gamut: p3)": 152 152 "light-dark(color(display-p3 0.183 0.191 0.206), color(display-p3 0.88 0.881 0.901))", 153 153 }, 154 154 border1: { 155 155 - default: "light-dark(#d9d9e0, #d9d9e0)", 155 155 + default: "light-dark(#363a3f, #d9d9e0)", 156 156 "@media (color-gamut: p3)": 157 157 "light-dark(color(display-p3 0.215 0.226 0.244), color(display-p3 0.85 0.852 0.876))", 158 158 }, 159 159 border2: { 160 160 - default: "light-dark(#cdced6, #cdced6)", 160 160 + default: "light-dark(#43484e, #cdced6)", 161 161 "@media (color-gamut: p3)": 162 162 "light-dark(color(display-p3 0.265 0.28 0.302), color(display-p3 0.805 0.808 0.838))", 163 163 }, 164 164 border3: { 165 165 - default: "light-dark(#b9bbc6, #b9bbc6)", 165 165 + default: "light-dark(#5a6169, #b9bbc6)", 166 166 "@media (color-gamut: p3)": 167 167 "light-dark(color(display-p3 0.357 0.381 0.409), color(display-p3 0.727 0.733 0.773))", 168 168 }, 169 169 solid1: { 170 170 - default: "light-dark(#8b8d98, #8b8d98)", 170 170 + default: "light-dark(#696e77, #8b8d98)", 171 171 "@media (color-gamut: p3)": 172 172 "light-dark(color(display-p3 0.415 0.431 0.463), color(display-p3 0.547 0.553 0.592))", 173 173 }, 174 174 solid2: { 175 175 - default: "light-dark(#80838d, #80838d)", 175 175 + default: "light-dark(#777b84, #80838d)", 176 176 "@media (color-gamut: p3)": 177 177 "light-dark(color(display-p3 0.469 0.483 0.514), color(display-p3 0.503 0.512 0.549))", 178 178 }, 179 179 text1: { 180 180 - default: "light-dark(#60646c, #60646c)", 180 180 + default: "light-dark(#b0b4ba, #60646c)", 181 181 "@media (color-gamut: p3)": 182 182 "light-dark(color(display-p3 0.692 0.704 0.728), color(display-p3 0.379 0.392 0.421))", 183 183 }, 184 184 text2: { 185 185 - default: "light-dark(#1c2024, #1c2024)", 185 185 + default: "light-dark(#edeef0, #1c2024)", 186 186 "@media (color-gamut: p3)": 187 187 "light-dark(color(display-p3 0.93 0.933 0.94), color(display-p3 0.113 0.125 0.14))", 188 188 },

+11 -11

apps/docs/src/components/theme/colors/teal.stylex.tsx

reviewed

··· 2 2 3 3 export const teal = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fafefd, #fafefd)", 5 5 + default: "light-dark(#fafefd, #0d1514)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.983 0.996 0.992), color(display-p3 0.059 0.083 0.079))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#f3fbf9, #f3fbf9)", 10 10 + default: "light-dark(#f3fbf9, #111c1b)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.958 0.983 0.976), color(display-p3 0.075 0.11 0.107))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#e0f8f3, #e0f8f3)", 15 15 + default: "light-dark(#e0f8f3, #0d2d2a)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.895 0.971 0.952), color(display-p3 0.087 0.175 0.165))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#ccf3ea, #ccf3ea)", 20 20 + default: "light-dark(#ccf3ea, #023b37)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.831 0.949 0.92), color(display-p3 0.087 0.227 0.214))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#b8eae0, #b8eae0)", 25 25 + default: "light-dark(#b8eae0, #084843)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.761 0.914 0.878), color(display-p3 0.12 0.277 0.261))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#a1ded2, #a1ded2)", 30 30 + default: "light-dark(#a1ded2, #145750)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.682 0.864 0.825), color(display-p3 0.162 0.335 0.314))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#83cdc1, #83cdc1)", 35 35 + default: "light-dark(#83cdc1, #1c6961)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.581 0.798 0.756), color(display-p3 0.205 0.406 0.379))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#53b9ab, #53b9ab)", 40 40 + default: "light-dark(#53b9ab, #207e73)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.433 0.716 0.671), color(display-p3 0.245 0.489 0.453))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.297 0.637 0.581), color(display-p3 0.297 0.637 0.581))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#0d9b8a, #0d9b8a)", 50 50 + default: "light-dark(#0d9b8a, #0eb39e)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.275 0.599 0.542), color(display-p3 0.319 0.69 0.62))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#008573, #008573)", 55 55 + default: "light-dark(#008573, #0bd8b6)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.08 0.5 0.43), color(display-p3 0.388 0.835 0.719))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#0d3d38, #0d3d38)", 60 60 + default: "light-dark(#0d3d38, #adf0dd)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.11 0.235 0.219), color(display-p3 0.734 0.934 0.87))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/tomato.stylex.tsx

reviewed

··· 2 2 3 3 export const tomato = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fffcfc, #fffcfc)", 5 5 + default: "light-dark(#fffcfc, #181111)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.998 0.989 0.988), color(display-p3 0.09 0.068 0.067))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fff8f7, #fff8f7)", 10 10 + default: "light-dark(#fff8f7, #1f1513)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.994 0.974 0.969), color(display-p3 0.115 0.084 0.076))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#feebe7, #feebe7)", 15 15 + default: "light-dark(#feebe7, #391714)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.985 0.924 0.909), color(display-p3 0.205 0.097 0.083))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#ffdcd3, #ffdcd3)", 20 20 + default: "light-dark(#ffdcd3, #4e1511)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.996 0.868 0.835), color(display-p3 0.282 0.099 0.077))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#ffcdc2, #ffcdc2)", 25 25 + default: "light-dark(#ffcdc2, #5e1c16)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.98 0.812 0.77), color(display-p3 0.339 0.129 0.101))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#fdbdaf, #fdbdaf)", 30 30 + default: "light-dark(#fdbdaf, #6e2920)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.953 0.75 0.698), color(display-p3 0.398 0.179 0.141))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#f5a898, #f5a898)", 35 35 + default: "light-dark(#f5a898, #853a2d)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.917 0.673 0.611), color(display-p3 0.487 0.245 0.194))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#ec8e7b, #ec8e7b)", 40 40 + default: "light-dark(#ec8e7b, #ac4d39)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.875 0.575 0.502), color(display-p3 0.629 0.322 0.248))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.831 0.345 0.231), color(display-p3 0.831 0.345 0.231))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#dd4425, #dd4425)", 50 50 + default: "light-dark(#dd4425, #ec6142)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.802 0.313 0.2), color(display-p3 0.862 0.415 0.298))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#d13415, #d13415)", 55 55 + default: "light-dark(#d13415, #ff977d)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.755 0.259 0.152), color(display-p3 1 0.585 0.455))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#5c271f, #5c271f)", 60 60 + default: "light-dark(#5c271f, #fbd3cb)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.335 0.165 0.132), color(display-p3 0.959 0.833 0.802))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/violet.stylex.tsx

reviewed

··· 2 2 3 3 export const violet = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fdfcfe, #fdfcfe)", 5 5 + default: "light-dark(#fdfcfe, #14121f)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.991 0.988 0.995), color(display-p3 0.077 0.071 0.118))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#faf8ff, #faf8ff)", 10 10 + default: "light-dark(#faf8ff, #1b1525)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.978 0.974 0.998), color(display-p3 0.101 0.084 0.141))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#f4f0fe, #f4f0fe)", 15 15 + default: "light-dark(#f4f0fe, #291f43)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.953 0.943 0.993), color(display-p3 0.154 0.123 0.256))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#ebe4ff, #ebe4ff)", 20 20 + default: "light-dark(#ebe4ff, #33255b)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.916 0.897 1), color(display-p3 0.191 0.148 0.345))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#e1d9ff, #e1d9ff)", 25 25 + default: "light-dark(#e1d9ff, #3c2e69)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.876 0.851 1), color(display-p3 0.226 0.182 0.396))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#d4cafe, #d4cafe)", 30 30 + default: "light-dark(#d4cafe, #473876)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.825 0.793 0.981), color(display-p3 0.269 0.223 0.449))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#c2b5f5, #c2b5f5)", 35 35 + default: "light-dark(#c2b5f5, #56468b)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.752 0.712 0.943), color(display-p3 0.326 0.277 0.53))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#aa99ec, #aa99ec)", 40 40 + default: "light-dark(#aa99ec, #6958ad)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.654 0.602 0.902), color(display-p3 0.399 0.346 0.656))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 0.417 0.341 0.784), color(display-p3 0.417 0.341 0.784))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#654dc4, #654dc4)", 50 50 + default: "light-dark(#654dc4, #7d66d9)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.381 0.306 0.741), color(display-p3 0.477 0.402 0.823))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#6550b9, #6550b9)", 55 55 + default: "light-dark(#6550b9, #baa7ff)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.383 0.317 0.702), color(display-p3 0.72 0.65 1))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#2f265f, #2f265f)", 60 60 + default: "light-dark(#2f265f, #e2ddfe)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.179 0.15 0.359), color(display-p3 0.883 0.867 0.986))", 63 63 },

+11 -11

apps/docs/src/components/theme/colors/yellow.stylex.tsx

reviewed

··· 2 2 3 3 export const yellow = stylex.defineVars({ 4 4 bg: { 5 5 - default: "light-dark(#fdfdf9, #fdfdf9)", 5 5 + default: "light-dark(#fdfdf9, #14120b)", 6 6 "@media (color-gamut: p3)": 7 7 "light-dark(color(display-p3 0.992 0.992 0.978), color(display-p3 0.078 0.069 0.047))", 8 8 }, 9 9 bgSubtle: { 10 10 - default: "light-dark(#fefce9, #fefce9)", 10 10 + default: "light-dark(#fefce9, #1b180f)", 11 11 "@media (color-gamut: p3)": 12 12 "light-dark(color(display-p3 0.995 0.99 0.922), color(display-p3 0.103 0.094 0.063))", 13 13 }, 14 14 component1: { 15 15 - default: "light-dark(#fffab8, #fffab8)", 15 15 + default: "light-dark(#fffab8, #2d2305)", 16 16 "@media (color-gamut: p3)": 17 17 "light-dark(color(display-p3 0.997 0.982 0.749), color(display-p3 0.168 0.137 0.039))", 18 18 }, 19 19 component2: { 20 20 - default: "light-dark(#fff394, #fff394)", 20 20 + default: "light-dark(#fff394, #362b00)", 21 21 "@media (color-gamut: p3)": 22 22 "light-dark(color(display-p3 0.992 0.953 0.627), color(display-p3 0.209 0.169 0))", 23 23 }, 24 24 component3: { 25 25 - default: "light-dark(#ffe770, #ffe770)", 25 25 + default: "light-dark(#ffe770, #433500)", 26 26 "@media (color-gamut: p3)": 27 27 "light-dark(color(display-p3 0.984 0.91 0.51), color(display-p3 0.255 0.209 0))", 28 28 }, 29 29 border1: { 30 30 - default: "light-dark(#f3d768, #f3d768)", 30 30 + default: "light-dark(#f3d768, #524202)", 31 31 "@media (color-gamut: p3)": 32 32 "light-dark(color(display-p3 0.934 0.847 0.474), color(display-p3 0.31 0.261 0.07))", 33 33 }, 34 34 border2: { 35 35 - default: "light-dark(#e4c767, #e4c767)", 35 35 + default: "light-dark(#e4c767, #665417)", 36 36 "@media (color-gamut: p3)": 37 37 "light-dark(color(display-p3 0.876 0.785 0.46), color(display-p3 0.389 0.331 0.135))", 38 38 }, 39 39 border3: { 40 40 - default: "light-dark(#d5ae39, #d5ae39)", 40 40 + default: "light-dark(#d5ae39, #836a21)", 41 41 "@media (color-gamut: p3)": 42 42 "light-dark(color(display-p3 0.811 0.689 0.313), color(display-p3 0.497 0.42 0.182))", 43 43 }, ··· 47 47 "light-dark(color(display-p3 1 0.92 0.22), color(display-p3 1 0.92 0.22))", 48 48 }, 49 49 solid2: { 50 50 - default: "light-dark(#ffdc00, #ffdc00)", 50 50 + default: "light-dark(#ffdc00, #ffff57)", 51 51 "@media (color-gamut: p3)": 52 52 "light-dark(color(display-p3 0.977 0.868 0.291), color(display-p3 1 1 0.456))", 53 53 }, 54 54 text1: { 55 55 - default: "light-dark(#9e6c00, #9e6c00)", 55 55 + default: "light-dark(#9e6c00, #f5e147)", 56 56 "@media (color-gamut: p3)": 57 57 "light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392))", 58 58 }, 59 59 text2: { 60 60 - default: "light-dark(#473b1f, #473b1f)", 60 60 + default: "light-dark(#473b1f, #f6eeb4)", 61 61 "@media (color-gamut: p3)": 62 62 "light-dark(color(display-p3 0.271 0.233 0.137), color(display-p3 0.959 0.934 0.731))", 63 63 },

+68 -52

apps/docs/src/components/theme/semantic-color.stylex.tsx

reviewed

··· 8 8 uiColor, 9 9 warningColor, 10 10 } from "./color.stylex"; 11 11 - import { green } from "./colors/green.stylex"; 12 11 import { red } from "./colors/red.stylex"; 13 12 import { yellow } from "./colors/yellow.stylex"; 14 13 import { fontFamily } from "./typography.stylex"; ··· 26 25 borderWidth: 1, 27 26 }, 28 27 border: { 29 29 - borderColor: uiColor.border2, 28 28 + borderColor: uiColor.border1, 30 29 borderStyle: "solid", 31 30 borderWidth: 1, 32 31 }, 33 32 borderInteractive: { 34 33 borderColor: { 35 35 - default: uiColor.border2, 36 36 - ":hover": uiColor.border3, 34 34 + default: uiColor.border1, 35 35 + ":is([data-hovered])": uiColor.border2, 37 36 }, 38 37 borderStyle: "solid", 39 38 borderWidth: 1, ··· 51 50 bgGhost: { 52 51 backgroundColor: { 53 52 default: "transparent", 54 54 - ":hover:not(:has(* button:hover)):not(:disabled)": uiColor.component2, 55 55 - ":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3, 53 53 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 54 54 + uiColor.component2, 55 55 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 56 56 + uiColor.component3, 56 57 ":disabled": "transparent", 57 58 }, 58 59 transitionDuration: animationDuration.fast, ··· 62 63 bgUi: { 63 64 backgroundColor: { 64 65 default: uiColor.component1, 65 65 - ":hover:not(:has(* button:hover)):not(:disabled)": uiColor.component2, 66 66 - ":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3, 66 66 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 67 67 + uiColor.component2, 68 68 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 69 69 + uiColor.component3, 67 70 ":disabled": uiColor.component1, 68 71 }, 69 72 transitionDuration: animationDuration.fast, ··· 73 76 bgAction: { 74 77 backgroundColor: { 75 78 default: uiColor.component2, 76 76 - ":hover:not(:has(* button:hover)):not(:disabled)": uiColor.component3, 77 77 - ":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3, 79 79 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 80 80 + uiColor.component3, 81 81 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 82 82 + uiColor.component3, 78 83 ":disabled": uiColor.component1, 79 84 }, 80 85 transitionDuration: animationDuration.fast, ··· 84 89 bgSolidAction: { 85 90 backgroundColor: { 86 91 default: uiColor.solid1, 87 87 - ":hover:not(:has(* button:hover)):not(:disabled)": uiColor.solid2, 92 92 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 93 93 + uiColor.solid2, 88 94 ":disabled": uiColor.component1, 89 95 }, 90 96 transitionDuration: animationDuration.fast, ··· 106 112 borderWidth: 1, 107 113 }, 108 114 border: { 109 109 - borderColor: primaryColor.border2, 115 115 + borderColor: primaryColor.border1, 110 116 borderStyle: "solid", 111 117 borderWidth: 1, 112 118 }, 113 119 borderInteractive: { 114 120 borderColor: { 115 121 default: primaryColor.border2, 116 116 - ":hover": primaryColor.border3, 122 122 + ":is([data-hovered])": primaryColor.border3, 117 123 }, 118 124 borderStyle: "solid", 119 125 borderWidth: 1, ··· 131 137 bgGhost: { 132 138 backgroundColor: { 133 139 default: "transparent", 134 134 - ":hover:not(:has(* button:hover)):not(:disabled)": 140 140 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 135 141 primaryColor.component2, 136 136 - ":is(:active,[data-pressed=true]):not(:disabled)": 142 142 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 137 143 primaryColor.component3, 138 144 ":disabled": primaryColor.component1, 139 145 }, ··· 144 150 bgUi: { 145 151 backgroundColor: { 146 152 default: primaryColor.component1, 147 147 - ":hover:not(:has(* button:hover)):not(:disabled)": 153 153 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 148 154 primaryColor.component2, 149 149 - ":is(:active,[data-pressed=true])": primaryColor.component3, 155 155 + ":is([data-pressed=true])": primaryColor.component3, 150 156 ":disabled": primaryColor.component1, 151 157 }, 152 158 transitionDuration: animationDuration.fast, ··· 156 162 bgAction: { 157 163 backgroundColor: { 158 164 default: primaryColor.component2, 159 159 - ":hover:not(:has(* button:hover)):not(:disabled)": 165 165 + ":is([data-hovered]:not(:has(* [data-hovered])):not(:disabled))": 160 166 primaryColor.component3, 161 161 - ":is(:active,[data-pressed=true]):not(:disabled)": 162 162 - primaryColor.component3, 167 167 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 168 168 + primaryColor.border1, 163 169 ":disabled": primaryColor.component1, 164 170 }, 165 171 transitionDuration: animationDuration.fast, ··· 169 175 bgSolidAction: { 170 176 backgroundColor: { 171 177 default: primaryColor.solid1, 172 172 - ":hover:not(:has(* button:hover)):not(:disabled)": primaryColor.solid2, 178 178 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 179 179 + primaryColor.solid2, 173 180 ":disabled": primaryColor.component1, 174 181 }, 175 182 transitionDuration: animationDuration.fast, ··· 191 198 borderWidth: 1, 192 199 }, 193 200 border: { 194 194 - borderColor: criticalColor.border2, 201 201 + borderColor: criticalColor.border1, 195 202 borderStyle: "solid", 196 203 borderWidth: 1, 197 204 }, 198 205 borderInteractive: { 199 206 borderColor: { 200 200 - default: criticalColor.border2, 201 201 - ":hover": red.border3, 207 207 + default: criticalColor.border1, 208 208 + ":is([data-hovered])": red.border1, 202 209 }, 203 210 borderStyle: "solid", 204 211 borderWidth: 1, ··· 215 222 bgGhost: { 216 223 backgroundColor: { 217 224 default: "transparent", 218 218 - ":hover:not(:has(* button:hover)):not(:disabled)": 225 225 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 219 226 criticalColor.component2, 220 220 - ":is(:active,[data-pressed=true]):not(:disabled)": 227 227 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 221 228 criticalColor.component3, 222 229 ":disabled": criticalColor.component1, 223 230 }, ··· 228 235 bgUi: { 229 236 backgroundColor: { 230 237 default: criticalColor.component1, 231 231 - ":hover:not(:has(* button:hover)):not(:disabled)": 238 238 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 232 239 criticalColor.component2, 233 233 - ":is(:active,[data-pressed=true]):not(:disabled)": 240 240 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 234 241 criticalColor.component3, 235 235 - ":disabled": criticalColor.component1, 242 242 + // ":disabled": criticalColor.component1, 236 243 }, 237 244 transitionDuration: animationDuration.fast, 238 245 transitionProperty: "background-color", ··· 241 248 bgAction: { 242 249 backgroundColor: { 243 250 default: criticalColor.component2, 244 244 - ":hover:not(:has(* button:hover)):not(:disabled)": 251 251 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 245 252 criticalColor.component3, 246 246 - ":is(:active,[data-pressed=true]):not(:disabled)": 253 253 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 247 254 criticalColor.component3, 248 255 ":disabled": criticalColor.component1, 249 256 }, ··· 254 261 bgSolidAction: { 255 262 backgroundColor: { 256 263 default: criticalColor.solid1, 257 257 - ":hover:not(:has(* button:hover)):not(:disabled)": criticalColor.solid2, 264 264 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 265 265 + criticalColor.solid2, 258 266 ":disabled": criticalColor.component1, 259 267 }, 260 268 transitionDuration: animationDuration.fast, ··· 276 284 borderWidth: 1, 277 285 }, 278 286 border: { 279 279 - borderColor: warningColor.border2, 287 287 + borderColor: warningColor.border1, 280 288 borderStyle: "solid", 281 289 borderWidth: 1, 282 290 }, 283 291 borderInteractive: { 284 292 borderColor: { 285 285 - default: warningColor.border2, 286 286 - ":hover": warningColor.border3, 293 293 + default: warningColor.border1, 294 294 + ":is([data-hovered])": warningColor.border2, 287 295 }, 296 296 + borderStyle: "solid", 297 297 + borderWidth: 1, 298 298 + transitionDuration: animationDuration.fast, 299 299 + transitionProperty: "background-color", 300 300 + transitionTimingFunction: "ease-in-out", 288 301 }, 289 302 bgSolid: { backgroundColor: warningColor.solid1 }, 290 303 bgSolidDark: { backgroundColor: warningColor.solid2 }, ··· 295 308 bgGhost: { 296 309 backgroundColor: { 297 310 default: "transparent", 298 298 - ":hover:not(:has(* button:hover)):not(:disabled)": 311 311 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 299 312 warningColor.component2, 300 300 - ":is(:active,[data-pressed=true]):not(:disabled)": 313 313 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 301 314 warningColor.component3, 302 315 ":disabled": warningColor.component1, 303 316 }, ··· 308 321 bgUi: { 309 322 backgroundColor: { 310 323 default: warningColor.component1, 311 311 - ":hover:not(:has(* button:hover)):not(:disabled)": 324 324 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 312 325 warningColor.component2, 313 313 - ":is(:active,[data-pressed=true]):not(:disabled)": yellow.component3, 326 326 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 327 327 + yellow.component3, 314 328 ":disabled": warningColor.component1, 315 329 }, 316 330 transitionDuration: animationDuration.fast, ··· 320 334 bgAction: { 321 335 backgroundColor: { 322 336 default: warningColor.component2, 323 323 - ":hover:not(:has(* button:hover)):not(:disabled)": 337 337 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 324 338 warningColor.component3, 325 325 - ":is(:active,[data-pressed=true]):not(:disabled)": 339 339 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 326 340 warningColor.component3, 327 341 ":disabled": warningColor.component1, 328 342 }, ··· 333 347 bgSolidAction: { 334 348 backgroundColor: { 335 349 default: warningColor.solid1, 336 336 - ":hover:not(:has(* button:hover)):not(:disabled)": warningColor.solid2, 350 350 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 351 351 + warningColor.solid2, 337 352 ":disabled": warningColor.component1, 338 353 }, 339 354 transitionDuration: animationDuration.fast, ··· 355 370 borderWidth: 1, 356 371 }, 357 372 border: { 358 358 - borderColor: successColor.border2, 373 373 + borderColor: successColor.border1, 359 374 borderStyle: "solid", 360 375 borderWidth: 1, 361 376 }, 362 377 borderInteractive: { 363 378 borderColor: { 364 364 - default: successColor.border2, 365 365 - ":hover": green.border3, 379 379 + default: successColor.border1, 380 380 + ":is([data-hovered])": successColor.border2, 366 381 }, 367 382 borderStyle: "solid", 368 383 borderWidth: 1, ··· 379 394 bgGhost: { 380 395 backgroundColor: { 381 396 default: "transparent", 382 382 - ":hover:not(:has(* button:hover)):not(:disabled)": 397 397 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 383 398 successColor.component2, 384 384 - ":is(:active,[data-pressed=true]):not(:disabled)": 399 399 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 385 400 successColor.component3, 386 401 ":disabled": successColor.component1, 387 402 }, ··· 392 407 bgUi: { 393 408 backgroundColor: { 394 409 default: successColor.component1, 395 395 - ":hover:not(:has(* button:hover)):not(:disabled)": 410 410 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 396 411 successColor.component2, 397 397 - ":is(:active,[data-pressed=true]):not(:disabled)": 412 412 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 398 413 successColor.component3, 399 414 ":disabled": successColor.component1, 400 415 }, ··· 405 420 bgAction: { 406 421 backgroundColor: { 407 422 default: successColor.component2, 408 408 - ":hover:not(:has(* button:hover)):not(:disabled)": 423 423 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 409 424 successColor.component3, 410 410 - ":is(:active,[data-pressed=true]):not(:disabled)": 425 425 + ":is([data-pressed=true]):is([data-pressed=true]):not(:disabled)": 411 426 successColor.component3, 412 427 ":disabled": successColor.component1, 413 428 }, ··· 418 433 bgSolidAction: { 419 434 backgroundColor: { 420 435 default: successColor.solid1, 421 421 - ":hover:not(:has(* button:hover)):not(:disabled)": successColor.solid2, 436 436 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 437 437 + successColor.solid2, 422 438 ":disabled": successColor.component1, 423 439 }, 424 440 transitionDuration: animationDuration.fast,

+21 -16

apps/docs/src/components/theme/useButtonStyles.ts

reviewed

··· 14 14 import { critical, primary, ui } from "./semantic-color.stylex"; 15 15 import { shadow } from "./shadow.stylex"; 16 16 import { spacing } from "./spacing.stylex"; 17 17 - import { 18 18 - fontFamily, 19 19 - fontSize, 20 20 - fontWeight, 21 21 - lineHeight, 22 22 - } from "./typography.stylex"; 17 17 + import { fontFamily, fontSize, fontWeight } from "./typography.stylex"; 23 18 24 19 const styles = stylex.create({ 25 20 shadow: { ··· 27 22 }, 28 23 base: { 29 24 borderRadius: { 30 30 - default: radius["md"], 25 25 + default: radius["lg"], 31 26 [mediaQueries.supportsSquircle]: radius["full"], 32 27 }, 33 28 borderStyle: "solid", 34 29 borderWidth: 1, 35 35 - // eslint-disable-next-line @stylexjs/valid-styles 30 30 + 36 31 cornerShape: "squircle", 37 32 gap: spacing["1"], 38 33 alignItems: "center", ··· 64 59 }, 65 60 small: { 66 61 fontSize: fontSize["xs"], 67 67 - lineHeight: lineHeight["xs"], 68 62 height: spacing["7"], 69 63 paddingLeft: { 70 64 default: spacing["2"], ··· 82 76 medium: { 83 77 gap: spacing["1.5"], 84 78 fontSize: fontSize["sm"], 85 85 - lineHeight: lineHeight["xs"], 86 79 height: spacing["8"], 87 80 paddingLeft: { 88 81 default: spacing["3"], ··· 92 85 }, 93 86 large: { 94 87 gap: spacing["2"], 88 88 + fontSize: fontSize["sm"], 95 89 height: spacing["10"], 96 90 paddingLeft: { 97 91 default: spacing["4"], ··· 99 93 }, 100 94 paddingRight: spacing["4"], 101 95 }, 96 96 + xl: { 97 97 + gap: spacing["2"], 98 98 + fontSize: fontSize["lg"], 99 99 + height: spacing["12"], 100 100 + paddingLeft: { 101 101 + default: spacing["5"], 102 102 + ":has(svg+*)": spacing["4"], 103 103 + }, 104 104 + paddingRight: spacing["5"], 105 105 + }, 102 106 secondary: { 103 107 borderColor: { 104 108 default: uiColor.component1, 105 105 - ":hover": uiColor.component2, 106 106 - ":active": uiColor.component3, 109 109 + ":is([data-hovered])": uiColor.component2, 110 110 + ":is([data-pressed])": uiColor.component3, 107 111 }, 108 112 }, 109 113 tertiary: { 110 114 borderColor: { 111 115 default: "transparent", 112 112 - ":hover": uiColor.component2, 113 113 - ":active": uiColor.component3, 116 116 + ":is([data-hovered])": uiColor.component2, 117 117 + ":is([data-pressed])": uiColor.component3, 114 118 }, 115 119 }, 116 120 ··· 147 151 size: sizeProp, 148 152 }: { 149 153 variant?: ButtonVariant; 150 150 - size?: Size; 154 154 + size?: Size | "xl"; 151 155 }) => { 152 156 const size = sizeProp || use(SizeContext); 153 157 const group = use(ButtonGroupContext); ··· 201 205 ], 202 206 variant === "critical-outline" && [ 203 207 critical.borderInteractive, 204 204 - critical.bgGhost, 208 208 + critical.bgUi, 205 209 critical.text, 206 210 styles.shadow, 207 211 ], 208 212 size === "sm" && styles.small, 209 213 size === "md" && styles.medium, 210 214 size === "lg" && styles.large, 215 215 + size === "xl" && styles.xl, 211 216 group?.variant === "separate" && styles.separate, 212 217 styles.base, 213 218 ];

+16 -13

apps/docs/src/components/theme/useCalendarStyles.ts

reviewed

··· 30 30 }, 31 31 color: { 32 32 default: uiColor.text1, 33 33 - ":is([data-hovered]):not([data-unavailable])": uiColor.text2, 33 33 + ":is([data-hovered]):not(:is([data-unavailable]))": uiColor.text2, 34 34 ":is([data-selected])": primaryColor.text2, 35 35 }, 36 36 cursor: "default", ··· 62 62 }, 63 63 backgroundColor: { 64 64 ":is(*)::before": "transparent", 65 65 - ":is([data-hovered]):not([data-unavailable])::before": uiColor.component2, 66 66 - ":is([data-pressed]):not([data-unavailable])::before": uiColor.component3, 67 67 - ":is([data-selected]):not([data-unavailable])::before": 65 65 + ":is([data-hovered]):not(:is([data-unavailable]))::before": 66 66 + uiColor.component2, 67 67 + ":is([data-pressed]):not(:is([data-unavailable]))::before": 68 68 + uiColor.component3, 69 69 + ":is([data-selected]):not(:is([data-unavailable]))::before": 68 70 primaryColor.component2, 69 69 - ":is([data-selected]):not([data-unavailable]):hover::before": 71 71 + ":is([data-selected]):not(:is([data-unavailable])):is([data-hovered])::before": 70 72 primaryColor.component3, 71 73 }, 72 74 color: { 73 75 default: uiColor.text1, 74 74 - ":is([data-hovered]):not([data-unavailable])": uiColor.text2, 76 76 + ":is([data-hovered]):not(:is([data-unavailable]))": uiColor.text2, 75 77 ":is([data-selected])": primaryColor.text2, 76 78 }, 77 79 }, 78 80 rangeCell: { 79 81 backgroundColor: { 80 82 ":is(*)::before": "transparent", 81 81 - ":is([data-hovered]):not([data-unavailable])::before": uiColor.component3, 82 82 - ":is([data-pressed]):not([data-unavailable])::before": uiColor.border1, 83 83 - ":is([data-selected]):not([data-selection-start],[data-selection-end]):not([data-unavailable])::before": 83 83 + ":is([data-hovered]):not(:is([data-unavailable]))::before": 84 84 + uiColor.component3, 85 85 + ":is([data-pressed]):not(:is([data-unavailable]))::before": 86 86 + uiColor.border1, 87 87 + ":is([data-selected]):not([data-selection-start],[data-selection-end]):not(:is([data-unavailable]))::before": 84 88 primaryColor.component1, 85 85 - ":is([data-selection-start],[data-selection-end]):not([data-unavailable])::before": 89 89 + ":is([data-selection-start],[data-selection-end]):not(:is([data-unavailable]))::before": 86 90 primaryColor.component3, 87 87 - ":is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover::before": 91 91 + ":is([data-selection-start],[data-selection-end]):not(:is([data-unavailable])):is([data-hovered])::before": 88 92 primaryColor.border1, 89 93 }, 90 94 color: { 91 95 default: uiColor.text1, 92 92 - ":is([data-hovered]):not([data-unavailable])": uiColor.text2, 96 96 + ":is([data-hovered]):not(:is([data-unavailable]))": uiColor.text2, 93 97 ":is([data-selection-start],[data-selection-end])": primaryColor.text2, 94 98 }, 95 99 borderBottomLeftRadius: { ··· 133 137 }, 134 138 }); 135 139 136 136 - // eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix 137 140 export function useCalendarStyles({ 138 141 type, 139 142 }: {

+2 -1

apps/docs/src/components/theme/useDialogStyles.ts

reviewed

··· 41 41 default: radius["lg"], 42 42 [mediaQueries.supportsSquircle]: radius["4xl"], 43 43 }, 44 44 - // eslint-disable-next-line @stylexjs/valid-styles 44 44 + 45 45 cornerShape: "squircle", 46 46 outline: "none", 47 47 overflow: "hidden", ··· 52 52 translate: "-50% -50%", 53 53 left: "50%", 54 54 maxHeight: "calc(var(--visual-viewport-height) * 0.8)", 55 55 + maxWidth: "90vw", 55 56 top: "calc(var(--visual-viewport-height) / 2)", 56 57 57 58 animationDuration: animationDuration.slow,

+47 -48

apps/docs/src/components/theme/useInputStyles.ts

reviewed

··· 84 84 [mediaQueries.supportsSquircle]: radius["3xl"], 85 85 }, 86 86 borderWidth: 0, 87 87 - // eslint-disable-next-line @stylexjs/valid-styles 87 87 + 88 88 cornerShape: "squircle", 89 89 overflow: "hidden", 90 90 boxSizing: "border-box", ··· 113 113 }, 114 114 primary: { 115 115 borderColor: { 116 116 - default: uiColor.border2, 117 117 - ":has([data-hovered]):not(:has([data-invalid]))": uiColor.border3, 118 118 - ":focus": uiColor.solid1, 116 116 + default: uiColor.border1, 117 117 + ":has(:is([data-hovered])):not(:has(:is([data-invalid])))": 118 118 + uiColor.border2, 119 119 + ":focus": uiColor.border3, 119 120 }, 120 121 borderStyle: "solid", 121 122 borderWidth: 1, 122 123 backgroundColor: { 123 123 - default: "transparent", 124 124 - ":hover:not(:has(* button:hover)):not(:disabled)": uiColor.component2, 125 125 - ":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3, 124 124 + default: uiColor.bg, 125 125 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 126 126 + uiColor.component1, 127 127 + ":is([data-pressed=true]):not(:disabled)": uiColor.component2, 126 128 ":disabled": "transparent", 127 129 }, 128 130 boxShadow: { 129 129 - ":has([data-invalid])": `0 0 0 2px ${criticalColor.component1}`, 131 131 + ":has(:is([data-invalid]))": `0 0 0 2px ${criticalColor.component1}`, 130 132 }, 131 133 transitionDuration: animationDuration.fast, 132 134 transitionProperty: "background-color", ··· 135 137 primaryInvalid: { 136 138 borderColor: { 137 139 default: criticalColor.border2, 138 138 - ":has([data-hovered])": criticalColor.border3, 140 140 + ":has(:is([data-hovered]))": criticalColor.border3, 139 141 ":focus": uiColor.solid1, 140 142 }, 141 143 backgroundColor: { 142 144 default: criticalColor.bgSubtle, 143 143 - ":hover:not(:has(* button:hover)):not(:disabled)": 145 145 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 144 146 criticalColor.component2, 145 147 ":disabled": "transparent", 146 148 }, ··· 150 152 primaryWarning: { 151 153 borderColor: { 152 154 default: warningColor.border2, 153 153 - ":has([data-hovered])": warningColor.border3, 155 155 + ":has(:is([data-hovered]))": warningColor.border3, 154 156 ":focus": uiColor.solid1, 155 157 }, 156 158 backgroundColor: { 157 159 default: warningColor.bgSubtle, 158 158 - ":hover:not(:has(* button:hover)):not(:disabled)": 160 160 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 159 161 warningColor.component2, 160 162 ":disabled": "transparent", 161 163 }, ··· 165 167 primaryValid: { 166 168 borderColor: { 167 169 default: successColor.border2, 168 168 - ":has([data-hovered])": successColor.border3, 170 170 + ":has(:is([data-hovered]))": successColor.border3, 169 171 ":focus": uiColor.solid1, 170 172 }, 171 173 backgroundColor: { 172 174 default: successColor.bgSubtle, 173 173 - ":hover:not(:has(* button:hover)):not(:disabled)": 175 175 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 174 176 successColor.component2, 175 177 ":disabled": "transparent", 176 178 }, ··· 179 181 }, 180 182 secondary: { 181 183 borderColor: { 182 182 - default: uiColor.component1, 183 183 - ":hover:not(:has(* button:hover)):not(:disabled)": uiColor.component2, 184 184 - ":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3, 185 185 - ":disabled": uiColor.component1, 184 184 + default: uiColor.border1, 185 185 + ":has(:is([data-hovered])):not(:has(:is([data-invalid])))": 186 186 + uiColor.border2, 187 187 + ":focus": uiColor.border3, 186 188 }, 187 189 borderStyle: "solid", 188 190 borderWidth: 1, 189 191 backgroundColor: { 190 192 default: uiColor.component1, 191 191 - ":hover:not(:has(* button:hover)):not(:disabled)": uiColor.component2, 192 192 - ":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3, 193 193 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 194 194 + uiColor.component2, 195 195 + ":is([data-pressed=true]):not(:disabled)": uiColor.component3, 193 196 ":disabled": uiColor.component1, 194 197 }, 195 198 transitionDuration: animationDuration.fast, ··· 199 202 secondaryInvalid: { 200 203 borderColor: { 201 204 default: criticalColor.component1, 202 202 - ":hover:not(:has(* button:hover)):not(:disabled)": 205 205 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 203 206 criticalColor.component2, 204 207 }, 205 208 backgroundColor: { 206 209 default: criticalColor.component1, 207 207 - ":hover:not(:has(* button:hover)):not(:disabled)": 210 210 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 208 211 criticalColor.component2, 209 212 }, 210 213 }, 211 214 secondaryWarning: { 212 215 borderColor: { 213 216 default: warningColor.component1, 214 214 - ":hover:not(:has(* button:hover)):not(:disabled)": 217 217 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 215 218 warningColor.component2, 216 219 }, 217 220 backgroundColor: { 218 221 default: warningColor.component1, 219 219 - ":hover:not(:has(* button:hover)):not(:disabled)": 222 222 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 220 223 warningColor.component2, 221 224 }, 222 225 color: warningColor.text2, ··· 224 227 secondaryValid: { 225 228 borderColor: { 226 229 default: successColor.component1, 227 227 - ":hover:not(:has(* button:hover)):not(:disabled)": 230 230 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 228 231 successColor.component2, 229 232 }, 230 233 backgroundColor: { 231 234 default: successColor.component1, 232 232 - ":hover:not(:has(* button:hover)):not(:disabled)": 235 235 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 233 236 successColor.component2, 234 237 }, 235 238 color: successColor.text2, ··· 237 240 tertiary: { 238 241 borderColor: { 239 242 default: "transparent", 240 240 - ":hover:not(:has(* button:hover)):not(:disabled)": uiColor.component2, 241 241 - ":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3, 243 243 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 244 244 + uiColor.component2, 245 245 + ":is([data-pressed=true]):not(:disabled)": uiColor.component3, 242 246 ":disabled": "transparent", 243 247 }, 244 248 borderStyle: "solid", 245 249 borderWidth: 1, 246 250 backgroundColor: { 247 251 default: "transparent", 248 248 - ":hover:not(:has(* button:hover)):not(:disabled)": uiColor.component2, 249 249 - ":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3, 252 252 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 253 253 + uiColor.component2, 254 254 + ":is([data-pressed=true]):not(:disabled)": uiColor.component3, 250 255 ":disabled": "transparent", 251 256 }, 252 257 transitionDuration: animationDuration.fast, ··· 256 261 tertiaryInvalid: { 257 262 borderColor: { 258 263 default: "transparent", 259 259 - ":hover:not(:has(* button:hover)):not(:disabled)": 264 264 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 260 265 criticalColor.component1, 261 261 - ":is(:active,[data-pressed=true]):not(:disabled)": 262 262 - criticalColor.component2, 266 266 + ":is([data-pressed=true]):not(:disabled)": criticalColor.component2, 263 267 ":disabled": "transparent", 264 268 }, 265 269 backgroundColor: { 266 270 default: "transparent", 267 267 - ":hover:not(:has(* button:hover)):not(:disabled)": 271 271 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 268 272 criticalColor.component1, 269 269 - ":is(:active,[data-pressed=true]):not(:disabled)": 270 270 - criticalColor.component2, 273 273 + ":is([data-pressed=true]):not(:disabled)": criticalColor.component2, 271 274 ":disabled": "transparent", 272 275 }, 273 276 color: criticalColor.text2, ··· 275 278 tertiaryWarning: { 276 279 borderColor: { 277 280 default: "transparent", 278 278 - ":hover:not(:has(* button:hover)):not(:disabled)": 281 281 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 279 282 warningColor.component1, 280 280 - ":is(:active,[data-pressed=true]):not(:disabled)": 281 281 - warningColor.component2, 283 283 + ":is([data-pressed=true]):not(:disabled)": warningColor.component2, 282 284 ":disabled": "transparent", 283 285 }, 284 286 backgroundColor: { 285 287 default: "transparent", 286 286 - ":hover:not(:has(* button:hover)):not(:disabled)": 288 288 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 287 289 warningColor.component1, 288 288 - ":is(:active,[data-pressed=true]):not(:disabled)": 289 289 - warningColor.component2, 290 290 + ":is([data-pressed=true]):not(:disabled)": warningColor.component2, 290 291 ":disabled": "transparent", 291 292 }, 292 293 color: warningColor.text1, ··· 294 295 tertiaryValid: { 295 296 borderColor: { 296 297 default: "transparent", 297 297 - ":hover:not(:has(* button:hover)):not(:disabled)": 298 298 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 298 299 successColor.component1, 299 299 - ":is(:active,[data-pressed=true]):not(:disabled)": 300 300 - successColor.component2, 300 300 + ":is([data-pressed=true]):not(:disabled)": successColor.component2, 301 301 ":disabled": "transparent", 302 302 }, 303 303 backgroundColor: { 304 304 default: "transparent", 305 305 - ":hover:not(:has(* button:hover)):not(:disabled)": 305 305 + ":is([data-hovered]):not(:has(* [data-hovered])):not(:disabled)": 306 306 successColor.component1, 307 307 - ":is(:active,[data-pressed=true]):not(:disabled)": 308 308 - successColor.component2, 307 307 + ":is([data-pressed=true]):not(:disabled)": successColor.component2, 309 308 ":disabled": "transparent", 310 309 }, 311 310 color: successColor.text1,

+10 -7

apps/docs/src/components/theme/useListBoxItemStyles.ts

reviewed

··· 44 44 default: radius["md"], 45 45 [mediaQueries.supportsSquircle]: radius["3xl"], 46 46 }, 47 47 - // eslint-disable-next-line @stylexjs/valid-styles 47 47 + 48 48 cornerShape: "squircle", 49 49 gap: spacing["3"], 50 50 alignItems: "center", 51 51 backgroundColor: { 52 52 default: "transparent", 53 53 - [":is([data-react-aria-pressable=true]:hover:not([data-disabled]) *)"]: 53 53 + [":is([data-focused]:not([data-disabled]) *)"]: uiColor.component2, 54 54 + [":is([data-react-aria-pressable=true]:not([data-disabled])[data-pressed=true] *)"]: 55 55 + uiColor.component3, 56 56 + [":is([data-react-aria-pressable=true][data-hovered]:not([data-disabled]) *)"]: 54 57 uiColor.component2, 55 55 - [":is([data-react-aria-pressable=true]:not([data-disabled]):active *)"]: 56 56 - uiColor.component3, 57 58 }, 58 59 boxSizing: "border-box", 59 60 color: { ··· 70 71 paddingLeft: spacing["3"], 71 72 paddingRight: spacing["3"], 72 73 paddingTop: spacing["2"], 74 74 + 75 75 + /* eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles */ 76 76 + ":is([data-variant=destructive] *) *": { 77 77 + color: criticalColor.text1, 78 78 + }, 73 79 }, 74 80 smItemInner: { 75 81 gap: spacing["2"], ··· 102 108 }, 103 109 label: { 104 110 gap: spacing["1.5"], 105 105 - color: { 106 106 - [":is([data-variant=destructive] *)"]: criticalColor.text1, 107 107 - }, 108 111 display: "flex", 109 112 flexDirection: "column", 110 113 flexGrow: 1,

+1 -2

apps/docs/src/components/theme/usePopoverStyles.ts

reviewed

··· 16 16 default: radius["md"], 17 17 [mediaQueries.supportsSquircle]: radius["3xl"], 18 18 }, 19 19 - // eslint-disable-next-line @stylexjs/valid-styles 19 19 + 20 20 cornerShape: "squircle", 21 21 outline: "none", 22 22 overflow: "auto", ··· 51 51 }, 52 52 }); 53 53 54 54 - // eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix 55 54 export function usePopoverStyles() { 56 55 return { 57 56 wrapper: [styles.popover, ui.bgSubtle, ui.text, ui.border],

+5 -9

apps/docs/src/components/toast/queue.ts

reviewed

··· 16 16 } 17 17 18 18 export const toasts = new ToastQueue<ToastContentType>({ 19 19 - // Wrap state updates in a CSS view transition. 19 19 + // Run toast updates synchronously. Do NOT use startViewTransition here: it 20 20 + // captures the entire page and animates elements with view-transition-name 21 21 + // (e.g. recipe card images when hovered), causing a "loses shape" glitch when 22 22 + // favoriting recipes. Toasts use their own React Stately animations. 20 23 wrapUpdate(fn) { 21 21 - if ("startViewTransition" in document) { 22 22 - document.startViewTransition(() => { 23 23 - // eslint-disable-next-line @eslint-react/dom/no-flush-sync 24 24 - flushSync(fn); 25 25 - }); 26 26 - } else { 27 27 - fn(); 28 28 - } 24 24 + flushSync(fn); 29 25 }, 30 26 });

+14 -15

apps/docs/src/components/toggle-button/index.tsx

reviewed

··· 15 15 primarySelected: { 16 16 backgroundColor: { 17 17 default: primaryColor.solid1, 18 18 - ":hover": primaryColor.solid2, 19 19 - ":active": primaryColor.text1, 18 18 + ":is([data-hovered])": primaryColor.solid2, 19 19 + ":is([data-pressed])": primaryColor.text1, 20 20 }, 21 21 color: "light-dark(white, black)", 22 22 }, 23 23 secondarySelected: { 24 24 borderColor: { 25 25 default: uiColor.border1, 26 26 - ":hover": uiColor.border2, 27 27 - ":active": uiColor.border3, 26 26 + ":is([data-hovered])": uiColor.border2, 27 27 + ":is([data-pressed])": uiColor.border3, 28 28 }, 29 29 backgroundColor: { 30 30 default: uiColor.border1, 31 31 - ":hover": uiColor.border2, 32 32 - ":active": uiColor.border3, 31 31 + ":is([data-hovered])": uiColor.border2, 32 32 + ":is([data-pressed])": uiColor.border3, 33 33 }, 34 34 }, 35 35 tertiarySelected: { 36 36 borderColor: { 37 37 default: uiColor.border1, 38 38 - ":hover": uiColor.border2, 39 39 - ":active": uiColor.border3, 38 38 + ":is([data-hovered])": uiColor.border2, 39 39 + ":is([data-pressed])": uiColor.border3, 40 40 }, 41 41 backgroundColor: { 42 42 default: uiColor.border1, 43 43 - ":hover": uiColor.border2, 44 44 - ":active": uiColor.border3, 43 43 + ":is([data-hovered])": uiColor.border2, 44 44 + ":is([data-pressed])": uiColor.border3, 45 45 }, 46 46 }, 47 47 outlineSelected: { 48 48 borderColor: { 49 49 default: uiColor.border1, 50 50 - ":hover": uiColor.border2, 51 51 - ":active": uiColor.border3, 50 50 + ":is([data-hovered])": uiColor.border2, 51 51 + ":is([data-pressed])": uiColor.border3, 52 52 }, 53 53 backgroundColor: { 54 54 default: uiColor.border1, 55 55 - ":hover": uiColor.border2, 56 56 - ":active": uiColor.border3, 55 55 + ":is([data-hovered])": uiColor.border2, 56 56 + ":is([data-pressed])": uiColor.border3, 57 57 }, 58 58 }, 59 59 sm: { ··· 133 133 toggleButtonStyles(isSelected).className || "" 134 134 } 135 135 > 136 136 - {/* eslint-disable-next-line @eslint-react/no-children-map */} 137 136 {Children.map(children, (child, index) => 138 137 typeof child === "string" ? ( 139 138 <span key={`${child}-${index.toString()}`}>{child}</span>

+1 -1

apps/docs/src/components/tooltip/index.tsx

reviewed

··· 26 26 default: radius["md"], 27 27 [mediaQueries.supportsSquircle]: radius["full"], 28 28 }, 29 29 - // eslint-disable-next-line @stylexjs/valid-styles 29 29 + 30 30 cornerShape: "squircle", 31 31 backgroundColor: uiInverted.bg, 32 32 boxShadow: shadow["sm"],

+3 -3

apps/docs/src/components/tree/index.tsx

reviewed

··· 80 80 dragButtonWrapper: { 81 81 opacity: { 82 82 default: 0, 83 83 - ":is([data-react-aria-pressable=true]:hover:not([data-disabled]) *)": 1, 84 84 - ":hover": 1, 83 83 + ":is([data-hovered])": 1, 84 84 + ":is([data-react-aria-pressable=true][data-hovered]:not([data-disabled]) *)": 1, 85 85 }, 86 86 position: "absolute", 87 87 transform: "translate(-100%, -50%)", ··· 96 96 default: radius["sm"], 97 97 [mediaQueries.supportsSquircle]: radius["2xl"], 98 98 }, 99 99 - // eslint-disable-next-line @stylexjs/valid-styles 99 99 + 100 100 cornerShape: "squircle", 101 101 alignItems: "center", 102 102 display: "flex",

+9 -6

apps/docs/src/components/typography/index.tsx

reviewed

··· 8 8 useRef, 9 9 useState, 10 10 } from "react"; 11 11 + import { useHover } from "react-aria"; 11 12 12 13 import type { StyleXComponentProps, TextVariant } from "../theme/types"; 13 14 ··· 37 38 }, 38 39 borderStyle: "solid", 39 40 borderWidth: 1, 40 40 - // eslint-disable-next-line @stylexjs/valid-styles 41 41 + 41 42 cornerShape: "squircle", 42 43 position: "relative", 43 44 marginBottom: spacing["8"], ··· 87 88 default: radius["sm"], 88 89 [mediaQueries.supportsSquircle]: radius["2xl"], 89 90 }, 90 90 - // eslint-disable-next-line @stylexjs/valid-styles 91 91 + 91 92 cornerShape: "squircle", 92 93 fontSize: "0.95em", 93 94 position: "relative", ··· 113 114 opacity: { 114 115 default: 0, 115 116 ":is([data-focus-visible])": 1, 116 116 - ":is([data-heading-link]:hover *)": 1, 117 117 + ":is([data-heading-link][data-hovered] *)": 1, 117 118 }, 118 119 transitionDuration: animationDuration.fast, 119 120 transitionProperty: { ··· 181 182 style: [ 182 183 variant === "secondary" && ui.textDim, 183 184 variant === "critical" && critical.textDim, 184 184 - styles.underline, 185 185 ], 186 186 }), 187 187 [variant], ··· 350 350 const ref = useRef<HTMLPreElement>(null); 351 351 352 352 useEffect(() => { 353 353 - // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect, react-hooks/set-state-in-effect 354 353 setTextContent(ref.current?.textContent ?? "error"); 355 354 }, [ref]); 356 355 ··· 418 417 * with the anchor to the clipboard. 419 418 */ 420 419 export const LinkedHeading = ({ id, children, style }: LinkedHeadingProps) => { 420 420 + const { hoverProps, isHovered } = useHover({}); 421 421 + 421 422 if (!id) { 422 423 return <>{children}</>; 423 424 } ··· 432 433 direction="row" 433 434 gap="2" 434 435 align="center" 435 435 - data-heading-link={true} 436 436 + data-heading-link 437 437 + data-hovered={isHovered || undefined} 438 438 + {...hoverProps} 436 439 style={style} 437 440 > 438 441 <a href={`#${id}`} {...stylex.props(styles.linkedHeadingLink)}>

+121 -46

apps/docs/src/components/typography/text.tsx

reviewed

··· 3 3 import type { TextVariant, ThemeKeys } from "../theme/types"; 4 4 5 5 import { criticalColor, uiColor } from "../theme/color.stylex"; 6 6 + import { breakpoints } from "../theme/media-queries.stylex"; 6 7 import { 7 8 fontFamily, 8 9 fontSize, 9 10 fontWeight, 10 11 lineHeight, 11 11 - tracking, 12 12 + tracking as trackingStyles, 12 13 } from "../theme/typography.stylex"; 13 14 14 15 const styles = stylex.create({ ··· 16 17 serif: { fontFamily: fontFamily["serif"] }, 17 18 mono: { fontFamily: fontFamily["mono"] }, 18 19 19 19 - thin: { fontWeight: fontWeight["thin"] }, 20 20 - extralight: { fontWeight: fontWeight["extralight"] }, 21 21 - light: { fontWeight: fontWeight["light"] }, 22 22 - normal: { fontWeight: fontWeight["normal"] }, 23 23 - medium: { fontWeight: fontWeight["medium"] }, 24 24 - semibold: { fontWeight: fontWeight["semibold"] }, 25 25 - bold: { fontWeight: fontWeight["bold"] }, 26 26 - extrabold: { fontWeight: fontWeight["extrabold"] }, 27 27 - black: { fontWeight: fontWeight["black"] }, 20 20 + weight: ( 21 21 + defaultWeight: keyof typeof fontWeight, 22 22 + smWeight?: keyof typeof fontWeight, 23 23 + mdWeight?: keyof typeof fontWeight, 24 24 + lgWeight?: keyof typeof fontWeight, 25 25 + xlWeight?: keyof typeof fontWeight, 26 26 + ) => ({ 27 27 + fontWeight: { 28 28 + default: fontWeight[defaultWeight], 29 29 + [breakpoints.sm]: smWeight ? fontWeight[smWeight] : undefined, 30 30 + [breakpoints.md]: mdWeight ? fontWeight[mdWeight] : undefined, 31 31 + [breakpoints.lg]: lgWeight ? fontWeight[lgWeight] : undefined, 32 32 + [breakpoints.xl]: xlWeight ? fontWeight[xlWeight] : undefined, 33 33 + }, 34 34 + }), 28 35 29 29 - "font-xs": { fontSize: fontSize["xs"] }, 30 30 - "font-sm": { fontSize: fontSize["sm"] }, 31 31 - "font-base": { fontSize: fontSize["base"] }, 32 32 - "font-lg": { fontSize: fontSize["lg"] }, 33 33 - "font-xl": { fontSize: fontSize["xl"] }, 34 34 - "font-2xl": { fontSize: fontSize["2xl"] }, 35 35 - "font-3xl": { fontSize: fontSize["3xl"] }, 36 36 - "font-4xl": { fontSize: fontSize["4xl"] }, 37 37 - "font-5xl": { fontSize: fontSize["5xl"] }, 38 38 - "font-6xl": { fontSize: fontSize["6xl"] }, 39 39 - "font-7xl": { fontSize: fontSize["7xl"] }, 40 40 - "font-8xl": { fontSize: fontSize["8xl"] }, 41 41 - "font-9xl": { fontSize: fontSize["9xl"] }, 36 36 + font: ( 37 37 + defaultSize: keyof typeof fontSize, 38 38 + smSize?: keyof typeof fontSize, 39 39 + mdSize?: keyof typeof fontSize, 40 40 + lgSize?: keyof typeof fontSize, 41 41 + xlSize?: keyof typeof fontSize, 42 42 + ) => ({ 43 43 + fontSize: { 44 44 + default: fontSize[defaultSize], 45 45 + [breakpoints.sm]: smSize ? fontSize[smSize] : undefined, 46 46 + [breakpoints.md]: mdSize ? fontSize[mdSize] : undefined, 47 47 + [breakpoints.lg]: lgSize ? fontSize[lgSize] : undefined, 48 48 + [breakpoints.xl]: xlSize ? fontSize[xlSize] : undefined, 49 49 + }, 50 50 + }), 42 51 43 43 - "leading-none": { lineHeight: lineHeight["none"] }, 44 44 - "leading-xs": { lineHeight: lineHeight["xs"] }, 45 45 - "leading-sm": { lineHeight: lineHeight["sm"] }, 46 46 - "leading-base": { lineHeight: lineHeight["base"] }, 47 47 - "leading-lg": { lineHeight: lineHeight["lg"] }, 48 48 - "leading-xl": { lineHeight: lineHeight["xl"] }, 49 49 - "leading-2xl": { lineHeight: lineHeight["2xl"] }, 50 50 - "leading-3xl": { lineHeight: lineHeight["3xl"] }, 52 52 + leading: ( 53 53 + defaultLeading: keyof typeof lineHeight, 54 54 + smLeading?: keyof typeof lineHeight, 55 55 + mdLeading?: keyof typeof lineHeight, 56 56 + lgLeading?: keyof typeof lineHeight, 57 57 + xlLeading?: keyof typeof lineHeight, 58 58 + ) => ({ 59 59 + lineHeight: { 60 60 + default: lineHeight[defaultLeading], 61 61 + [breakpoints.sm]: smLeading ? lineHeight[smLeading] : undefined, 62 62 + [breakpoints.md]: mdLeading ? lineHeight[mdLeading] : undefined, 63 63 + [breakpoints.lg]: lgLeading ? lineHeight[lgLeading] : undefined, 64 64 + [breakpoints.xl]: xlLeading ? lineHeight[xlLeading] : undefined, 65 65 + }, 66 66 + }), 51 67 52 52 - "tracking-tighter": { letterSpacing: tracking["tighter"] }, 53 53 - "tracking-tight": { letterSpacing: tracking["tight"] }, 54 54 - "tracking-normal": { letterSpacing: tracking["normal"] }, 55 55 - "tracking-wide": { letterSpacing: tracking["wide"] }, 56 56 - "tracking-wider": { letterSpacing: tracking["wider"] }, 57 57 - "tracking-widest": { letterSpacing: tracking["widest"] }, 68 68 + tracking: ( 69 69 + defaultTracking: keyof typeof trackingStyles, 70 70 + smTracking?: keyof typeof trackingStyles, 71 71 + mdTracking?: keyof typeof trackingStyles, 72 72 + lgTracking?: keyof typeof trackingStyles, 73 73 + xlTracking?: keyof typeof trackingStyles, 74 74 + ) => ({ 75 75 + letterSpacing: { 76 76 + default: trackingStyles[defaultTracking], 77 77 + [breakpoints.sm]: smTracking ? trackingStyles[smTracking] : undefined, 78 78 + [breakpoints.md]: mdTracking ? trackingStyles[mdTracking] : undefined, 79 79 + [breakpoints.lg]: lgTracking ? trackingStyles[lgTracking] : undefined, 80 80 + [breakpoints.xl]: xlTracking ? trackingStyles[xlTracking] : undefined, 81 81 + }, 82 82 + }), 58 83 59 84 "variant-primary": { color: uiColor.text2 }, 60 85 "variant-secondary": { color: uiColor.text1 }, ··· 73 98 }, 74 99 }); 75 100 101 101 + type ResponsiveValue<TKey extends string> = 102 102 + | TKey 103 103 + | { 104 104 + default: TKey; 105 105 + sm?: TKey; 106 106 + md?: TKey; 107 107 + lg?: TKey; 108 108 + xl?: TKey; 109 109 + }; 110 110 + 111 111 + type FontThemeTypes = "weight" | "font" | "leading" | "tracking"; 112 112 + type ThemeValue<TKey extends FontThemeTypes> = TKey extends "weight" 113 113 + ? typeof fontWeight 114 114 + : TKey extends "font" 115 115 + ? typeof fontSize 116 116 + : TKey extends "leading" 117 117 + ? typeof lineHeight 118 118 + : TKey extends "tracking" 119 119 + ? typeof trackingStyles 120 120 + : never; 121 121 + 122 122 + function getResponsiveStyle<TType extends FontThemeTypes>( 123 123 + type: TType, 124 124 + value: ResponsiveValue<ThemeKeys<ThemeValue<TType>>>, 125 125 + ) { 126 126 + type StyleFn = ( 127 127 + defaultVal: keyof ThemeValue<TType>, 128 128 + smVal?: keyof ThemeValue<TType>, 129 129 + mdVal?: keyof ThemeValue<TType>, 130 130 + lgVal?: keyof ThemeValue<TType>, 131 131 + xlVal?: keyof ThemeValue<TType>, 132 132 + ) => stylex.StyleXStyles; 133 133 + 134 134 + const styleFn = styles[type] as StyleFn; 135 135 + 136 136 + if (typeof value === "string") { 137 137 + return styleFn(value as keyof ThemeValue<TType>); 138 138 + } 139 139 + 140 140 + return styleFn( 141 141 + value.default as keyof ThemeValue<TType>, 142 142 + value.sm as keyof ThemeValue<TType> | undefined, 143 143 + value.md as keyof ThemeValue<TType> | undefined, 144 144 + value.lg as keyof ThemeValue<TType> | undefined, 145 145 + value.xl as keyof ThemeValue<TType> | undefined, 146 146 + ); 147 147 + } 148 148 + 76 149 interface TextProps extends Omit< 77 150 React.ComponentProps<"span">, 78 151 "style" | "className" 79 152 > { 80 153 style?: stylex.StyleXStyles | Array<stylex.StyleXStyles>; 81 154 font?: ThemeKeys<typeof fontFamily>; 82 82 - weight?: ThemeKeys<typeof fontWeight>; 83 83 - size?: ThemeKeys<typeof fontSize>; 84 84 - leading?: ThemeKeys<typeof lineHeight>; 85 85 - tracking?: ThemeKeys<typeof tracking>; 155 155 + 156 156 + weight?: ResponsiveValue<ThemeKeys<typeof fontWeight>>; 157 157 + size?: ResponsiveValue<ThemeKeys<typeof fontSize>>; 158 158 + leading?: ResponsiveValue<ThemeKeys<typeof lineHeight>>; 159 159 + tracking?: ResponsiveValue<ThemeKeys<typeof trackingStyles>>; 160 160 + 86 161 variant?: TextVariant; 87 162 strikethrough?: boolean; 88 163 align?: "left" | "center" | "right"; ··· 95 170 weight, 96 171 size, 97 172 leading, 98 98 - tracking: trackingProp, 173 173 + tracking, 99 174 variant, 100 175 strikethrough = false, 101 176 align, ··· 107 182 {...props} 108 183 {...stylex.props( 109 184 styles[font], 110 110 - weight && styles[weight], 111 111 - size && styles[`font-${size}`], 112 112 - leading && styles[`leading-${leading}`], 113 113 - trackingProp && styles[`tracking-${trackingProp}`], 185 185 + weight && getResponsiveStyle("weight", weight), 186 186 + size && getResponsiveStyle("font", size), 187 187 + leading && getResponsiveStyle("leading", leading), 188 188 + tracking && getResponsiveStyle("tracking", tracking), 114 189 variant && styles[`variant-${variant}`], 115 190 strikethrough && styles.strikethrough, 116 191 align && styles[align],

+57

apps/docs/src/docs/components/status/star-rating.mdx

reviewed

··· 1 1 + --- 2 2 + title: Star Rating 3 3 + description: A rating component with half-star support. 4 4 + --- 5 5 + 6 6 + import { PropDocs } from "../../../lib/PropDocs"; 7 7 + import { Example } from "../../../lib/Example"; 8 8 + import { Basic } from "../../../examples/star-rating/basic"; 9 9 + import { Interactive } from "../../../examples/star-rating/interactive"; 10 10 + import { Sizes } from "../../../examples/star-rating/sizes"; 11 11 + 12 12 + <Example src={Basic} /> 13 13 + 14 14 + ## Installation 15 15 + 16 16 + Run the following command to add the star-rating component to your project. 17 17 + 18 18 + ```bash 19 19 + pnpm hip install star-rating 20 20 + ``` 21 21 + 22 22 + ## Props 23 23 + 24 24 + <PropDocs components={["StarRating", "StarRatingInput"]} /> 25 25 + 26 26 + ## Features 27 27 + 28 28 + ### Interactive 29 29 + 30 30 + Use `StarRatingInput` for user-selectable ratings. 31 31 + Supports click, hover preview, and keyboard (arrow keys). 32 32 + Use `value` and `onChange` for controlled mode, or `defaultValue` for uncontrolled. 33 33 + 34 34 + <Example src={Interactive} /> 35 35 + 36 36 + ### Half-star support 37 37 + 38 38 + The component supports decimal ratings from 0 to 5. 39 39 + Values between 0.25 and 0.74 display a half star. 40 40 + Values of 0.75 and above round up to a full star. 41 41 + 42 42 + ### Sizes 43 43 + 44 44 + The `size` prop controls the star icon size in pixels (default 16). 45 45 + Both read-only and interactive variants support custom sizes. 46 46 + 47 47 + <Example src={Sizes} /> 48 48 + 49 49 + ### Review count 50 50 + 51 51 + Optionally display the number of reviews next to the rating. 52 52 + 53 53 + ## Related Components 54 54 + 55 55 + - [Badge](/docs/components/badge) - For status indicators 56 56 + - [Meter](/docs/components/meter) - For numeric gauges and progress 57 57 + - [ProgressBar](/docs/components/progress-bar) - For completion status

+9

apps/docs/src/examples/star-rating/basic.tsx

reviewed

··· 1 1 + import { StarRating } from "@/components/star-rating"; 2 2 + 3 3 + export function Basic() { 4 4 + return ( 5 5 + <> 6 6 + <StarRating rating={4.5} reviewCount={128} /> 7 7 + </> 8 8 + ); 9 9 + }

+43

apps/docs/src/examples/star-rating/interactive.tsx

reviewed

··· 1 1 + import * as stylex from "@stylexjs/stylex"; 2 2 + import { useState } from "react"; 3 3 + 4 4 + import { Flex } from "@/components/flex"; 5 5 + import { StarRatingInput } from "@/components/star-rating"; 6 6 + import { Text } from "@/components/typography/text"; 7 7 + 8 8 + const styles = stylex.create({ 9 9 + wrapper: { 10 10 + gap: "1rem", 11 11 + }, 12 12 + }); 13 13 + 14 14 + export function Interactive() { 15 15 + const [controlledValue, setControlledValue] = useState(2); 16 16 + 17 17 + return ( 18 18 + <Flex {...stylex.props(styles.wrapper)} direction="column" gap="2"> 19 19 + <div {...stylex.props(styles.wrapper)}> 20 20 + <Text size="sm" variant="secondary"> 21 21 + Uncontrolled (default) 22 22 + </Text> 23 23 + <StarRatingInput defaultValue={0} aria-label="Product rating" /> 24 24 + </div> 25 25 + <div {...stylex.props(styles.wrapper)}> 26 26 + <Text size="sm" variant="secondary"> 27 27 + Uncontrolled with initial value 28 28 + </Text> 29 29 + <StarRatingInput defaultValue={3} aria-label="Service rating" /> 30 30 + </div> 31 31 + <div {...stylex.props(styles.wrapper)}> 32 32 + <Text size="sm" variant="secondary"> 33 33 + Controlled (current: {controlledValue}) 34 34 + </Text> 35 35 + <StarRatingInput 36 36 + value={controlledValue} 37 37 + onChange={setControlledValue} 38 38 + aria-label="Controlled rating" 39 39 + /> 40 40 + </div> 41 41 + </Flex> 42 42 + ); 43 43 + }

+72

apps/docs/src/examples/star-rating/sizes.tsx

reviewed

··· 1 1 + import { Flex } from "@/components/flex"; 2 2 + import { StarRating, StarRatingInput } from "@/components/star-rating"; 3 3 + import { Text } from "@/components/typography/text"; 4 4 + 5 5 + export function Sizes() { 6 6 + return ( 7 7 + <Flex direction="column" gap="4"> 8 8 + <Flex direction="column" align="start" gap="2"> 9 9 + <Text size="sm" variant="secondary"> 10 10 + Read-only (StarRating) 11 11 + </Text> 12 12 + <Flex direction="row" gap="4" align="center" wrap> 13 13 + <Flex direction="column" align="start" gap="1"> 14 14 + <Text size="xs">12px</Text> 15 15 + <StarRating rating={4} size={12} showReviewCount={false} /> 16 16 + </Flex> 17 17 + <Flex direction="column" align="start" gap="1"> 18 18 + <Text size="xs">16px (default)</Text> 19 19 + <StarRating rating={4} size={16} showReviewCount={false} /> 20 20 + </Flex> 21 21 + <Flex direction="column" align="start" gap="1"> 22 22 + <Text size="xs">20px</Text> 23 23 + <StarRating rating={4} size={20} showReviewCount={false} /> 24 24 + </Flex> 25 25 + <Flex direction="column" align="start" gap="1"> 26 26 + <Text size="xs">24px</Text> 27 27 + <StarRating rating={4} size={24} showReviewCount={false} /> 28 28 + </Flex> 29 29 + </Flex> 30 30 + </Flex> 31 31 + <Flex direction="column" align="start" gap="2"> 32 32 + <Text size="sm" variant="secondary"> 33 33 + Interactive (StarRatingInput) 34 34 + </Text> 35 35 + <Flex direction="row" gap="4" align="center" wrap> 36 36 + <Flex direction="column" align="start" gap="1"> 37 37 + <Text size="xs">12px</Text> 38 38 + <StarRatingInput 39 39 + defaultValue={3} 40 40 + size={12} 41 41 + aria-label="Small rating" 42 42 + /> 43 43 + </Flex> 44 44 + <Flex direction="column" align="start" gap="1"> 45 45 + <Text size="xs">16px (default)</Text> 46 46 + <StarRatingInput 47 47 + defaultValue={3} 48 48 + size={16} 49 49 + aria-label="Default rating" 50 50 + /> 51 51 + </Flex> 52 52 + <Flex direction="column" align="start" gap="1"> 53 53 + <Text size="xs">20px</Text> 54 54 + <StarRatingInput 55 55 + defaultValue={3} 56 56 + size={20} 57 57 + aria-label="Medium rating" 58 58 + /> 59 59 + </Flex> 60 60 + <Flex direction="column" align="start" gap="1"> 61 61 + <Text size="xs">24px</Text> 62 62 + <StarRatingInput 63 63 + defaultValue={3} 64 64 + size={24} 65 65 + aria-label="Large rating" 66 66 + /> 67 67 + </Flex> 68 68 + </Flex> 69 69 + </Flex> 70 70 + </Flex> 71 71 + ); 72 72 + }

+63 -63

apps/docs/src/routeTree.gen.ts

reviewed

··· 8 8 // You should NOT make any changes in this file as it will be overwritten. 9 9 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. 10 10 11 11 - import { Route as rootRouteImport } from "./routes/__root"; 12 12 - import { Route as DocsRouteImport } from "./routes/docs"; 13 13 - import { Route as IndexRouteImport } from "./routes/index"; 14 14 - import { Route as DocsSplatRouteImport } from "./routes/docs.$"; 11 11 + import { Route as rootRouteImport } from './routes/__root' 12 12 + import { Route as DocsRouteImport } from './routes/docs' 13 13 + import { Route as IndexRouteImport } from './routes/index' 14 14 + import { Route as DocsSplatRouteImport } from './routes/docs.$' 15 15 16 16 const DocsRoute = DocsRouteImport.update({ 17 17 - id: "/docs", 18 18 - path: "/docs", 17 17 + id: '/docs', 18 18 + path: '/docs', 19 19 getParentRoute: () => rootRouteImport, 20 20 - } as any); 20 20 + } as any) 21 21 const IndexRoute = IndexRouteImport.update({ 22 22 - id: "/", 23 23 - path: "/", 22 22 + id: '/', 23 23 + path: '/', 24 24 getParentRoute: () => rootRouteImport, 25 25 - } as any); 25 25 + } as any) 26 26 const DocsSplatRoute = DocsSplatRouteImport.update({ 27 27 - id: "/$", 28 28 - path: "/$", 27 27 + id: '/$', 28 28 + path: '/$', 29 29 getParentRoute: () => DocsRoute, 30 30 - } as any); 30 30 + } as any) 31 31 32 32 export interface FileRoutesByFullPath { 33 33 - "/": typeof IndexRoute; 34 34 - "/docs": typeof DocsRouteWithChildren; 35 35 - "/docs/$": typeof DocsSplatRoute; 33 33 + '/': typeof IndexRoute 34 34 + '/docs': typeof DocsRouteWithChildren 35 35 + '/docs/$': typeof DocsSplatRoute 36 36 } 37 37 export interface FileRoutesByTo { 38 38 - "/": typeof IndexRoute; 39 39 - "/docs": typeof DocsRouteWithChildren; 40 40 - "/docs/$": typeof DocsSplatRoute; 38 38 + '/': typeof IndexRoute 39 39 + '/docs': typeof DocsRouteWithChildren 40 40 + '/docs/$': typeof DocsSplatRoute 41 41 } 42 42 export interface FileRoutesById { 43 43 - __root__: typeof rootRouteImport; 44 44 - "/": typeof IndexRoute; 45 45 - "/docs": typeof DocsRouteWithChildren; 46 46 - "/docs/$": typeof DocsSplatRoute; 43 43 + __root__: typeof rootRouteImport 44 44 + '/': typeof IndexRoute 45 45 + '/docs': typeof DocsRouteWithChildren 46 46 + '/docs/$': typeof DocsSplatRoute 47 47 } 48 48 export interface FileRouteTypes { 49 49 - fileRoutesByFullPath: FileRoutesByFullPath; 50 50 - fullPaths: "/" | "/docs" | "/docs/$"; 51 51 - fileRoutesByTo: FileRoutesByTo; 52 52 - to: "/" | "/docs" | "/docs/$"; 53 53 - id: "__root__" | "/" | "/docs" | "/docs/$"; 54 54 - fileRoutesById: FileRoutesById; 49 49 + fileRoutesByFullPath: FileRoutesByFullPath 50 50 + fullPaths: '/' | '/docs' | '/docs/$' 51 51 + fileRoutesByTo: FileRoutesByTo 52 52 + to: '/' | '/docs' | '/docs/$' 53 53 + id: '__root__' | '/' | '/docs' | '/docs/$' 54 54 + fileRoutesById: FileRoutesById 55 55 } 56 56 export interface RootRouteChildren { 57 57 - IndexRoute: typeof IndexRoute; 58 58 - DocsRoute: typeof DocsRouteWithChildren; 57 57 + IndexRoute: typeof IndexRoute 58 58 + DocsRoute: typeof DocsRouteWithChildren 59 59 } 60 60 61 61 - declare module "@tanstack/react-router" { 61 61 + declare module '@tanstack/react-router' { 62 62 interface FileRoutesByPath { 63 63 - "/docs": { 64 64 - id: "/docs"; 65 65 - path: "/docs"; 66 66 - fullPath: "/docs"; 67 67 - preLoaderRoute: typeof DocsRouteImport; 68 68 - parentRoute: typeof rootRouteImport; 69 69 - }; 70 70 - "/": { 71 71 - id: "/"; 72 72 - path: "/"; 73 73 - fullPath: "/"; 74 74 - preLoaderRoute: typeof IndexRouteImport; 75 75 - parentRoute: typeof rootRouteImport; 76 76 - }; 77 77 - "/docs/$": { 78 78 - id: "/docs/$"; 79 79 - path: "/$"; 80 80 - fullPath: "/docs/$"; 81 81 - preLoaderRoute: typeof DocsSplatRouteImport; 82 82 - parentRoute: typeof DocsRoute; 83 83 - }; 63 63 + '/docs': { 64 64 + id: '/docs' 65 65 + path: '/docs' 66 66 + fullPath: '/docs' 67 67 + preLoaderRoute: typeof DocsRouteImport 68 68 + parentRoute: typeof rootRouteImport 69 69 + } 70 70 + '/': { 71 71 + id: '/' 72 72 + path: '/' 73 73 + fullPath: '/' 74 74 + preLoaderRoute: typeof IndexRouteImport 75 75 + parentRoute: typeof rootRouteImport 76 76 + } 77 77 + '/docs/$': { 78 78 + id: '/docs/$' 79 79 + path: '/$' 80 80 + fullPath: '/docs/$' 81 81 + preLoaderRoute: typeof DocsSplatRouteImport 82 82 + parentRoute: typeof DocsRoute 83 83 + } 84 84 } 85 85 } 86 86 87 87 interface DocsRouteChildren { 88 88 - DocsSplatRoute: typeof DocsSplatRoute; 88 88 + DocsSplatRoute: typeof DocsSplatRoute 89 89 } 90 90 91 91 const DocsRouteChildren: DocsRouteChildren = { 92 92 DocsSplatRoute: DocsSplatRoute, 93 93 - }; 93 93 + } 94 94 95 95 - const DocsRouteWithChildren = DocsRoute._addFileChildren(DocsRouteChildren); 95 95 + const DocsRouteWithChildren = DocsRoute._addFileChildren(DocsRouteChildren) 96 96 97 97 const rootRouteChildren: RootRouteChildren = { 98 98 IndexRoute: IndexRoute, 99 99 DocsRoute: DocsRouteWithChildren, 100 100 - }; 100 100 + } 101 101 export const routeTree = rootRouteImport 102 102 ._addFileChildren(rootRouteChildren) 103 103 - ._addFileTypes<FileRouteTypes>(); 103 103 + ._addFileTypes<FileRouteTypes>() 104 104 105 105 - import type { getRouter } from "./router.tsx"; 106 106 - import type { createStart } from "@tanstack/react-start"; 107 107 - declare module "@tanstack/react-start" { 105 105 + import type { getRouter } from './router.tsx' 106 106 + import type { createStart } from '@tanstack/react-start' 107 107 + declare module '@tanstack/react-start' { 108 108 interface Register { 109 109 - ssr: true; 110 110 - router: Awaited<ReturnType<typeof getRouter>>; 109 109 + ssr: true 110 110 + router: Awaited<ReturnType<typeof getRouter>> 111 111 } 112 112 }

+2

packages/hip-ui/src/cli/install.tsx

reviewed

··· 77 77 import { sidebarConfig } from "../components/sidebar/sidebar-config.js"; 78 78 import { skeletonConfig } from "../components/skeleton/skeleton-config.js"; 79 79 import { sliderConfig } from "../components/slider/slider-config.js"; 80 80 + import { starRatingConfig } from "../components/star-rating/star-rating-config.js"; 80 81 import { switchConfig } from "../components/switch/switch-config.js"; 81 82 import { tableOfContentsConfig } from "../components/table-of-contents/table-of-contents-config.js"; 82 83 import { tableConfig } from "../components/table/table-config.js"; ··· 115 116 radioConfig, 116 117 separatorConfig, 117 118 skeletonConfig, 119 119 + starRatingConfig, 118 120 textAreaConfig, 119 121 selectConfig, 120 122 toggleButtonConfig,

+307

packages/hip-ui/src/components/star-rating/index.tsx

reviewed

··· 1 1 + "use client"; 2 2 + 3 3 + import * as stylex from "@stylexjs/stylex"; 4 4 + import { Star } from "lucide-react"; 5 5 + import { useCallback, useRef, useState } from "react"; 6 6 + import { mergeProps, useKeyboard, usePress } from "react-aria"; 7 7 + 8 8 + import type { StyleXComponentProps } from "../theme/types"; 9 9 + 10 10 + import { Flex } from "../flex"; 11 11 + import { primaryColor, uiColor } from "../theme/color.stylex"; 12 12 + import { spacing } from "../theme/spacing.stylex"; 13 13 + import { Text } from "../typography/text"; 14 14 + 15 15 + const MAX_STARS = 5; 16 16 + 17 17 + const styles = stylex.create({ 18 18 + stars: { 19 19 + gap: spacing["0.5"], 20 20 + alignItems: "center", 21 21 + display: "flex", 22 22 + }, 23 23 + starsInput: { 24 24 + cursor: "pointer", 25 25 + }, 26 26 + starsInputDisabled: { 27 27 + cursor: "not-allowed", 28 28 + }, 29 29 + starFilled: { 30 30 + color: primaryColor.solid2, 31 31 + }, 32 32 + starEmpty: { 33 33 + color: uiColor.component3, 34 34 + }, 35 35 + starButton: { 36 36 + margin: 0, 37 37 + padding: 0, 38 38 + borderColor: "transparent", 39 39 + borderStyle: "none", 40 40 + borderWidth: 0, 41 41 + alignItems: "center", 42 42 + backgroundColor: "transparent", 43 43 + cursor: "pointer", 44 44 + display: "flex", 45 45 + }, 46 46 + starButtonDisabled: { 47 47 + cursor: "not-allowed", 48 48 + opacity: 0.5, 49 49 + }, 50 50 + halfStarWrapper: { 51 51 + display: "inline-flex", 52 52 + position: "relative", 53 53 + height: "var(--star-size, 1rem)", 54 54 + width: "var(--star-size, 1rem)", 55 55 + }, 56 56 + halfStarBase: { 57 57 + position: "absolute", 58 58 + left: 0, 59 59 + top: 0, 60 60 + }, 61 61 + halfStarClip: { 62 62 + overflow: "hidden", 63 63 + clipPath: "inset(0 50% 0 0)", 64 64 + position: "absolute", 65 65 + left: 0, 66 66 + top: 0, 67 67 + }, 68 68 + }); 69 69 + 70 70 + export interface StarRatingProps extends StyleXComponentProps< 71 71 + React.HTMLAttributes<HTMLDivElement> 72 72 + > { 73 73 + /** Rating from 0 to 5 (supports 0.5 steps) */ 74 74 + rating: number; 75 75 + /** Optional review count to display */ 76 76 + reviewCount?: number; 77 77 + /** Size of the star icons in pixels */ 78 78 + size?: number; 79 79 + /** Whether to show the review count */ 80 80 + showReviewCount?: boolean; 81 81 + } 82 82 + 83 83 + /** 84 84 + * Displays a read-only star rating with half-star support. 85 85 + */ 86 86 + export function StarRating({ 87 87 + rating, 88 88 + reviewCount, 89 89 + size = 16, 90 90 + showReviewCount = true, 91 91 + style, 92 92 + ...props 93 93 + }: StarRatingProps) { 94 94 + const clamped = Math.min(5, Math.max(0, rating)); 95 95 + const fullStars = Math.floor(clamped); 96 96 + const remainder = clamped - fullStars; 97 97 + const showHalf = remainder >= 0.25 && remainder < 0.75; 98 98 + const showFullLast = remainder >= 0.75; 99 99 + const filledCount = fullStars + (showFullLast ? 1 : 0); 100 100 + const emptyCount = 5 - filledCount - (showHalf ? 1 : 0); 101 101 + 102 102 + return ( 103 103 + <Flex direction="row" align="center" gap="1" style={style} {...props}> 104 104 + <div 105 105 + {...stylex.props(styles.stars)} 106 106 + style={{ "--star-size": `${String(size)}px` } as React.CSSProperties} 107 107 + > 108 108 + {Array.from({ length: filledCount }, (_, i) => ( 109 109 + <Star 110 110 + key={`full-${String(i)}`} 111 111 + size={size} 112 112 + fill="currentColor" 113 113 + {...stylex.props(styles.starFilled)} 114 114 + /> 115 115 + ))} 116 116 + {showHalf && ( 117 117 + <span {...stylex.props(styles.halfStarWrapper)}> 118 118 + <Star 119 119 + size={size} 120 120 + {...stylex.props(styles.starEmpty, styles.halfStarBase)} 121 121 + /> 122 122 + <Star 123 123 + size={size} 124 124 + fill="currentColor" 125 125 + {...stylex.props(styles.starFilled, styles.halfStarClip)} 126 126 + /> 127 127 + </span> 128 128 + )} 129 129 + {Array.from({ length: emptyCount }, (_, i) => ( 130 130 + <Star 131 131 + key={`empty-${String(i)}`} 132 132 + size={size} 133 133 + {...stylex.props(styles.starEmpty)} 134 134 + /> 135 135 + ))} 136 136 + </div> 137 137 + {showReviewCount && 138 138 + typeof reviewCount === "number" && 139 139 + reviewCount > 0 && ( 140 140 + <Text size="xs" variant="secondary"> 141 141 + ({reviewCount}) 142 142 + </Text> 143 143 + )} 144 144 + </Flex> 145 145 + ); 146 146 + } 147 147 + 148 148 + export interface StarRatingInputProps extends StyleXComponentProps< 149 149 + Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> 150 150 + > { 151 151 + /** Current value (1–5). Use with onChange for controlled mode. */ 152 152 + value?: number; 153 153 + /** Default value when uncontrolled. */ 154 154 + defaultValue?: number; 155 155 + /** Called when the user selects a new rating. */ 156 156 + onChange?: (value: number) => void; 157 157 + /** Whether the input is disabled. */ 158 158 + isDisabled?: boolean; 159 159 + /** Size of the star icons in pixels */ 160 160 + size?: number; 161 161 + /** Accessible label for the rating input. */ 162 162 + "aria-label"?: string; 163 163 + } 164 164 + 165 165 + /** 166 166 + * Interactive star rating input for user selection. 167 167 + * Supports keyboard (arrow keys) and pointer interaction. 168 168 + */ 169 169 + export function StarRatingInput({ 170 170 + value: valueProp, 171 171 + defaultValue = 0, 172 172 + onChange, 173 173 + isDisabled = false, 174 174 + size = 16, 175 175 + style, 176 176 + "aria-label": ariaLabel = "Rating", 177 177 + ...props 178 178 + }: StarRatingInputProps) { 179 179 + const [valueState, setValueState] = useState(defaultValue); 180 180 + const value = valueProp === undefined ? valueState : valueProp; 181 181 + const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); 182 182 + const starsRef = useRef<HTMLDivElement>(null); 183 183 + 184 184 + const displayValue = hoveredIndex === null ? value : hoveredIndex + 1; 185 185 + const clampedValue = Math.min(MAX_STARS, Math.max(0, displayValue)); 186 186 + 187 187 + const handleStarsMouseMove = useCallback( 188 188 + (e: React.MouseEvent<HTMLDivElement>) => { 189 189 + if (isDisabled) return; 190 190 + const el = starsRef.current; 191 191 + if (!el) return; 192 192 + const rect = el.getBoundingClientRect(); 193 193 + const x = e.clientX - rect.left; 194 194 + const index = Math.min( 195 195 + MAX_STARS - 1, 196 196 + Math.max(0, Math.floor((x / rect.width) * MAX_STARS)), 197 197 + ); 198 198 + setHoveredIndex(index); 199 199 + }, 200 200 + [isDisabled], 201 201 + ); 202 202 + 203 203 + const handleStarsMouseLeave = useCallback(() => { 204 204 + setHoveredIndex(null); 205 205 + }, []); 206 206 + 207 207 + const setValue = useCallback( 208 208 + (newValue: number) => { 209 209 + const clamped = Math.min(MAX_STARS, Math.max(0, newValue)); 210 210 + if (valueProp === undefined) { 211 211 + setValueState(clamped); 212 212 + } 213 213 + onChange?.(clamped); 214 214 + }, 215 215 + [onChange, valueProp], 216 216 + ); 217 217 + 218 218 + const { keyboardProps } = useKeyboard({ 219 219 + onKeyDown: (e) => { 220 220 + if (isDisabled) return; 221 221 + if (e.key === "ArrowRight" || e.key === "ArrowUp") { 222 222 + e.preventDefault(); 223 223 + setValue(value + 1); 224 224 + } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") { 225 225 + e.preventDefault(); 226 226 + setValue(value - 1); 227 227 + } 228 228 + }, 229 229 + }); 230 230 + 231 231 + return ( 232 232 + <Flex 233 233 + direction="row" 234 234 + align="center" 235 235 + gap="1" 236 236 + role="slider" 237 237 + aria-label={ariaLabel} 238 238 + aria-valuemin={0} 239 239 + aria-valuemax={MAX_STARS} 240 240 + aria-valuenow={value} 241 241 + aria-disabled={isDisabled} 242 242 + tabIndex={isDisabled ? undefined : 0} 243 243 + style={style} 244 244 + {...mergeProps(keyboardProps, props)} 245 245 + > 246 246 + <div 247 247 + ref={starsRef} 248 248 + {...stylex.props( 249 249 + styles.stars, 250 250 + styles.starsInput, 251 251 + isDisabled && styles.starsInputDisabled, 252 252 + )} 253 253 + style={{ "--star-size": `${String(size)}px` } as React.CSSProperties} 254 254 + onMouseMove={handleStarsMouseMove} 255 255 + onMouseLeave={handleStarsMouseLeave} 256 256 + > 257 257 + {Array.from({ length: MAX_STARS }, (_, i) => ( 258 258 + <StarRatingInputButton 259 259 + key={i} 260 260 + size={size} 261 261 + isFilled={i < clampedValue} 262 262 + isDisabled={isDisabled} 263 263 + onPress={() => setValue(i + 1)} 264 264 + /> 265 265 + ))} 266 266 + </div> 267 267 + </Flex> 268 268 + ); 269 269 + } 270 270 + 271 271 + interface StarRatingInputButtonProps { 272 272 + size: number; 273 273 + isFilled: boolean; 274 274 + isDisabled: boolean; 275 275 + onPress: () => void; 276 276 + } 277 277 + 278 278 + function StarRatingInputButton({ 279 279 + size, 280 280 + isFilled, 281 281 + isDisabled, 282 282 + onPress, 283 283 + }: StarRatingInputButtonProps) { 284 284 + const { pressProps } = usePress({ 285 285 + isDisabled, 286 286 + onPress, 287 287 + }); 288 288 + 289 289 + return ( 290 290 + <button 291 291 + type="button" 292 292 + tabIndex={-1} 293 293 + disabled={isDisabled} 294 294 + {...pressProps} 295 295 + {...stylex.props( 296 296 + styles.starButton, 297 297 + isDisabled && styles.starButtonDisabled, 298 298 + )} 299 299 + > 300 300 + <Star 301 301 + size={size} 302 302 + fill={isFilled ? "currentColor" : undefined} 303 303 + {...stylex.props(isFilled ? styles.starFilled : styles.starEmpty)} 304 304 + /> 305 305 + </button> 306 306 + ); 307 307 + }

+6

packages/hip-ui/src/components/star-rating/star-rating-config.ts

reviewed

··· 1 1 + import type { ComponentConfig } from "../../types"; 2 2 + 3 3 + export const starRatingConfig: ComponentConfig = { 4 4 + name: "star-rating", 5 5 + filepath: "./index.tsx", 6 6 + };

+3

pnpm-lock.yaml

reviewed

··· 5367 5367 5368 5368 glob@10.4.5: 5369 5369 resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==} 5370 5370 + deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me 5370 5371 hasBin: true 5371 5372 5372 5373 glob@11.0.3: 5373 5374 resolution: {integrity: sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==} 5374 5375 engines: {node: 20 || >=22} 5376 5376 + deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me 5375 5377 hasBin: true 5376 5378 5377 5379 globals@14.0.0: ··· 8011 8013 whatwg-encoding@3.1.1: 8012 8014 resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==} 8013 8015 engines: {node: '>=18'} 8016 8016 + deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation 8014 8017 8015 8018 whatwg-mimetype@4.0.0: 8016 8019 resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}