+123 -2

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

reviewed

··· 25 25 import { Size, StyleXComponentProps } from "../theme/types"; 26 26 import { fontFamily } from "../theme/typography.stylex"; 27 27 import { Text } from "../typography/text"; 28 28 + import { 29 29 + criticalColor, 30 30 + primaryColor, 31 31 + successColor, 32 32 + uiColor, 33 33 + warningColor, 34 34 + } from "../theme/color.stylex"; 28 35 29 36 const styles = stylex.create({ 30 37 alert: { ··· 134 141 actionAndClose: { 135 142 alignSelf: "center", 136 143 }, 144 144 + info: { 145 145 + [uiColor.bg]: primaryColor.bg, 146 146 + [uiColor.bgSubtle]: primaryColor.bgSubtle, 147 147 + [uiColor.component1]: primaryColor.component1, 148 148 + [uiColor.component2]: primaryColor.component2, 149 149 + [uiColor.component3]: primaryColor.component3, 150 150 + [uiColor.border1]: primaryColor.border1, 151 151 + [uiColor.border2]: primaryColor.border2, 152 152 + [uiColor.border3]: primaryColor.border3, 153 153 + [uiColor.solid1]: primaryColor.solid1, 154 154 + [uiColor.solid2]: primaryColor.solid2, 155 155 + [uiColor.text1]: primaryColor.text1, 156 156 + [uiColor.text2]: primaryColor.text2, 157 157 + [uiColor.textContrast]: primaryColor.textContrast, 158 158 + }, 159 159 + success: { 160 160 + [uiColor.bg]: successColor.bg, 161 161 + [uiColor.bgSubtle]: successColor.bgSubtle, 162 162 + [uiColor.component1]: successColor.component1, 163 163 + [uiColor.component2]: successColor.component2, 164 164 + [uiColor.component3]: successColor.component3, 165 165 + [uiColor.border1]: successColor.border1, 166 166 + [uiColor.border2]: successColor.border2, 167 167 + [uiColor.border3]: successColor.border3, 168 168 + [uiColor.solid1]: successColor.solid1, 169 169 + [uiColor.solid2]: successColor.solid2, 170 170 + [uiColor.text1]: successColor.text1, 171 171 + [uiColor.text2]: successColor.text2, 172 172 + [uiColor.textContrast]: successColor.textContrast, 173 173 + 174 174 + [primaryColor.bg]: successColor.bg, 175 175 + [primaryColor.bgSubtle]: successColor.bgSubtle, 176 176 + [primaryColor.component1]: successColor.component1, 177 177 + [primaryColor.component2]: successColor.component2, 178 178 + [primaryColor.component3]: successColor.component3, 179 179 + [primaryColor.border1]: successColor.border1, 180 180 + [primaryColor.border2]: successColor.border2, 181 181 + [primaryColor.border3]: successColor.border3, 182 182 + [primaryColor.solid1]: successColor.solid1, 183 183 + [primaryColor.solid2]: successColor.solid2, 184 184 + [primaryColor.text1]: successColor.text1, 185 185 + [primaryColor.text2]: successColor.text2, 186 186 + [primaryColor.textContrast]: successColor.textContrast, 187 187 + }, 188 188 + warning: { 189 189 + [uiColor.bg]: warningColor.bg, 190 190 + [uiColor.bgSubtle]: warningColor.bgSubtle, 191 191 + [uiColor.component1]: warningColor.component1, 192 192 + [uiColor.component2]: warningColor.component2, 193 193 + [uiColor.component3]: warningColor.component3, 194 194 + [uiColor.border1]: warningColor.border1, 195 195 + [uiColor.border2]: warningColor.border2, 196 196 + [uiColor.border3]: warningColor.border3, 197 197 + [uiColor.solid1]: warningColor.solid1, 198 198 + [uiColor.solid2]: warningColor.solid2, 199 199 + [uiColor.text1]: warningColor.text1, 200 200 + [uiColor.text2]: warningColor.text2, 201 201 + [uiColor.textContrast]: warningColor.textContrast, 202 202 + 203 203 + [primaryColor.bg]: warningColor.bg, 204 204 + [primaryColor.bgSubtle]: warningColor.bgSubtle, 205 205 + [primaryColor.component1]: warningColor.component1, 206 206 + [primaryColor.component2]: warningColor.component2, 207 207 + [primaryColor.component3]: warningColor.component3, 208 208 + [primaryColor.border1]: warningColor.border1, 209 209 + [primaryColor.border2]: warningColor.border2, 210 210 + [primaryColor.border3]: warningColor.border3, 211 211 + [primaryColor.solid1]: warningColor.solid1, 212 212 + [primaryColor.solid2]: warningColor.solid2, 213 213 + [primaryColor.text1]: warningColor.text1, 214 214 + [primaryColor.text2]: warningColor.text2, 215 215 + [primaryColor.textContrast]: warningColor.textContrast, 216 216 + }, 217 217 + critical: { 218 218 + [uiColor.bg]: criticalColor.bg, 219 219 + [uiColor.bgSubtle]: criticalColor.bgSubtle, 220 220 + [uiColor.component1]: criticalColor.component1, 221 221 + [uiColor.component2]: criticalColor.component2, 222 222 + [uiColor.component3]: criticalColor.component3, 223 223 + [uiColor.border1]: criticalColor.border1, 224 224 + [uiColor.border2]: criticalColor.border2, 225 225 + [uiColor.border3]: criticalColor.border3, 226 226 + [uiColor.solid1]: criticalColor.solid1, 227 227 + [uiColor.solid2]: criticalColor.solid2, 228 228 + [uiColor.text1]: criticalColor.text1, 229 229 + [uiColor.text2]: criticalColor.text2, 230 230 + [uiColor.textContrast]: criticalColor.textContrast, 231 231 + 232 232 + [primaryColor.bg]: criticalColor.bg, 233 233 + [primaryColor.bgSubtle]: criticalColor.bgSubtle, 234 234 + [primaryColor.component1]: criticalColor.component1, 235 235 + [primaryColor.component2]: criticalColor.component2, 236 236 + [primaryColor.component3]: criticalColor.component3, 237 237 + [primaryColor.border1]: criticalColor.border1, 238 238 + [primaryColor.border2]: criticalColor.border2, 239 239 + [primaryColor.border3]: criticalColor.border3, 240 240 + [primaryColor.solid1]: criticalColor.solid1, 241 241 + [primaryColor.solid2]: criticalColor.solid2, 242 242 + [primaryColor.text1]: criticalColor.text1, 243 243 + [primaryColor.text2]: criticalColor.text2, 244 244 + [primaryColor.textContrast]: criticalColor.textContrast, 245 245 + }, 137 246 }); 138 247 139 248 export type AlertVariant = "info" | "success" | "warning" | "critical"; ··· 195 304 const displayIcon = icon === undefined ? defaultIcon : icon; 196 305 const hasAction = action != null; 197 306 const hasCloseButton = onDismiss != null; 307 307 + const actionStyles = [ 308 308 + variant === "info" && styles.info, 309 309 + variant === "success" && styles.success, 310 310 + variant === "warning" && styles.warning, 311 311 + variant === "critical" && styles.critical, 312 312 + ]; 198 313 199 314 return ( 200 315 <div ··· 242 357 </Text> 243 358 )} 244 359 </div> 245 245 - {hasAction && <div {...stylex.props(styles.action)}>{action}</div>} 360 360 + {hasAction && ( 361 361 + <div {...stylex.props(styles.action, actionStyles)}>{action}</div> 362 362 + )} 246 363 {hasCloseButton && ( 247 364 <IconButton 248 365 aria-label="Dismiss alert" 249 366 size={size} 250 367 variant="tertiary" 251 368 onPress={onDismiss} 252 252 - style={[styles.closeButton, hasAction && styles.actionAndClose]} 369 369 + style={[ 370 370 + actionStyles, 371 371 + styles.closeButton, 372 372 + hasAction && styles.actionAndClose, 373 373 + ]} 253 374 > 254 375 <X /> 255 376 </IconButton>

+1 -1

apps/docs/src/examples/alert/with-action-title-only.tsx

reviewed

··· 21 21 onDismiss={() => {}} 22 22 action={ 23 23 <Flex gap="2"> 24 24 - <Button variant="critical">Retry</Button> 24 24 + <Button>Retry</Button> 25 25 </Flex> 26 26 } 27 27 />

+1 -1

apps/docs/src/examples/alert/with-action.tsx

reviewed

··· 35 35 variant="critical" 36 36 title="Error" 37 37 onDismiss={() => {}} 38 38 - action={<Button variant="critical">Retry</Button>} 38 38 + action={<Button>Retry</Button>} 39 39 > 40 40 Something went wrong. Please try again. 41 41 </Alert>

+20

apps/docs/src/lib/ColorPreview.tsx

reviewed

··· 1 1 + import { allColors, Color } from "./ThemeContext"; 2 2 + import { spacing } from "../components/theme/spacing.stylex"; 3 3 + import { radius } from "../components/theme/radius.stylex"; 4 4 + import * as stylex from "@stylexjs/stylex"; 5 5 + 6 6 + const styles = stylex.create({ 7 7 + dot: { 8 8 + width: spacing["4"], 9 9 + height: spacing["4"], 10 10 + borderRadius: radius["full"], 11 11 + alignItems: "center", 12 12 + }, 13 13 + preview: (color: Color) => ({ 14 14 + backgroundColor: allColors[color].solid1, 15 15 + }), 16 16 + }); 17 17 + 18 18 + export const ColorPreview = ({ color }: { color: Color }) => { 19 19 + return <div {...stylex.props(styles.dot, styles.preview(color))} />; 20 20 + };

+141

apps/docs/src/lib/ThemeContext.tsx

reviewed

··· 1 1 + import { blue } from "../components/theme/colors/blue.stylex"; 2 2 + import { purple } from "../components/theme/colors/purple.stylex"; 3 3 + import { green } from "../components/theme/colors/green.stylex"; 4 4 + import { red } from "../components/theme/colors/red.stylex"; 5 5 + import { orange } from "../components/theme/colors/orange.stylex"; 6 6 + import { yellow } from "../components/theme/colors/yellow.stylex"; 7 7 + import { pink } from "../components/theme/colors/pink.stylex"; 8 8 + import { brown } from "../components/theme/colors/brown.stylex"; 9 9 + import { gray, grayInverted } from "../components/theme/colors/gray.stylex"; 10 10 + import { mauve, mauveInverted } from "../components/theme/colors/mauve.stylex"; 11 11 + import { slate, slateInverted } from "../components/theme/colors/slate.stylex"; 12 12 + import { sage, sageInverted } from "../components/theme/colors/sage.stylex"; 13 13 + import { olive, oliveInverted } from "../components/theme/colors/olive.stylex"; 14 14 + import { sand, sandInverted } from "../components/theme/colors/sand.stylex"; 15 15 + import { tomato } from "../components/theme/colors/tomato.stylex"; 16 16 + import { ruby } from "../components/theme/colors/ruby.stylex"; 17 17 + import { crimson } from "../components/theme/colors/crimson.stylex"; 18 18 + import { plum } from "../components/theme/colors/plum.stylex"; 19 19 + import { violet } from "../components/theme/colors/violet.stylex"; 20 20 + import { iris } from "../components/theme/colors/iris.stylex"; 21 21 + import { indigo } from "../components/theme/colors/indigo.stylex"; 22 22 + import { cyan } from "../components/theme/colors/cyan.stylex"; 23 23 + import { teal } from "../components/theme/colors/teal.stylex"; 24 24 + import { jade } from "../components/theme/colors/jade.stylex"; 25 25 + import { grass } from "../components/theme/colors/grass.stylex"; 26 26 + import { bronze } from "../components/theme/colors/bronze.stylex"; 27 27 + import { gold } from "../components/theme/colors/gold.stylex"; 28 28 + import { amber } from "../components/theme/colors/amber.stylex"; 29 29 + import { lime } from "../components/theme/colors/lime.stylex"; 30 30 + import { mint } from "../components/theme/colors/mint.stylex"; 31 31 + import { sky } from "../components/theme/colors/sky.stylex"; 32 32 + import { createContext } from "react"; 33 33 + 34 34 + if (import.meta.env.DEV) { 35 35 + import("virtual:stylex:runtime"); 36 36 + } 37 37 + 38 38 + export const uiNames = [ 39 39 + "gray", 40 40 + "mauve", 41 41 + "slate", 42 42 + "sage", 43 43 + "olive", 44 44 + "sand", 45 45 + ] as const; 46 46 + export type UiColor = (typeof uiNames)[number]; 47 47 + export const uiColorsInverted: Record<UiColor, typeof grayInverted> = { 48 48 + gray: grayInverted, 49 49 + mauve: mauveInverted, 50 50 + slate: slateInverted, 51 51 + sage: sageInverted, 52 52 + olive: oliveInverted, 53 53 + sand: sandInverted, 54 54 + }; 55 55 + 56 56 + export const primaryColors = [ 57 57 + "tomato", 58 58 + "red", 59 59 + "ruby", 60 60 + "crimson", 61 61 + "pink", 62 62 + "plum", 63 63 + "purple", 64 64 + "violet", 65 65 + "iris", 66 66 + "indigo", 67 67 + "blue", 68 68 + "cyan", 69 69 + "teal", 70 70 + "jade", 71 71 + "green", 72 72 + "grass", 73 73 + "bronze", 74 74 + "gold", 75 75 + "brown", 76 76 + "orange", 77 77 + "amber", 78 78 + "yellow", 79 79 + "lime", 80 80 + "mint", 81 81 + "sky", 82 82 + ] as const; 83 83 + export type PrimaryColor = (typeof primaryColors)[number]; 84 84 + 85 85 + const names = [...uiNames, ...primaryColors]; 86 86 + export type Color = (typeof names)[number]; 87 87 + 88 88 + export const allColors: Record<Color, typeof blue> = { 89 89 + blue, 90 90 + purple, 91 91 + green, 92 92 + red, 93 93 + orange, 94 94 + yellow, 95 95 + pink, 96 96 + brown, 97 97 + gray, 98 98 + mauve, 99 99 + slate, 100 100 + sage, 101 101 + olive, 102 102 + sand, 103 103 + tomato, 104 104 + ruby, 105 105 + crimson, 106 106 + plum, 107 107 + violet, 108 108 + iris, 109 109 + indigo, 110 110 + cyan, 111 111 + teal, 112 112 + jade, 113 113 + grass, 114 114 + bronze, 115 115 + gold, 116 116 + amber, 117 117 + lime, 118 118 + mint, 119 119 + sky, 120 120 + }; 121 121 + 122 122 + export interface Theme { 123 123 + primaryColor: PrimaryColor; 124 124 + uiColor: UiColor; 125 125 + successColor: PrimaryColor; 126 126 + warningColor: PrimaryColor; 127 127 + criticalColor: PrimaryColor; 128 128 + } 129 129 + 130 130 + export const defaultTheme: Theme = { 131 131 + primaryColor: "brown", 132 132 + uiColor: "slate", 133 133 + successColor: "green", 134 134 + warningColor: "yellow", 135 135 + criticalColor: "red", 136 136 + }; 137 137 + 138 138 + export const ThemeContext = createContext({ 139 139 + theme: defaultTheme, 140 140 + setTheme: (_theme: Theme) => {}, 141 141 + });

+120

apps/docs/src/lib/ThemePicker.tsx

reviewed

··· 1 1 + import { Button } from "@/components/button"; 2 2 + import { 3 3 + Dialog, 4 4 + DialogBody, 5 5 + DialogFooter, 6 6 + DialogHeader, 7 7 + } from "@/components/dialog"; 8 8 + import { 9 9 + Color, 10 10 + PrimaryColor, 11 11 + primaryColors, 12 12 + ThemeContext, 13 13 + UiColor, 14 14 + uiNames, 15 15 + } from "./ThemeContext"; 16 16 + import { use, useState } from "react"; 17 17 + import { Select, SelectItem } from "@/components/select"; 18 18 + import { IconButton } from "@/components/icon-button"; 19 19 + import { ColorPreview } from "./ColorPreview"; 20 20 + import { capitalCase } from "change-case"; 21 21 + import { Flex } from "@/components/flex"; 22 22 + 23 23 + function ColorSelect<T extends Color>({ 24 24 + color, 25 25 + colors, 26 26 + label, 27 27 + onChange, 28 28 + }: { 29 29 + color: T; 30 30 + colors: readonly T[]; 31 31 + label: string; 32 32 + onChange: (color: T) => void; 33 33 + }) { 34 34 + return ( 35 35 + <Select 36 36 + prefix={<ColorPreview color={color} />} 37 37 + label={label} 38 38 + value={color} 39 39 + onChange={(value) => onChange(value as T)} 40 40 + > 41 41 + {colors.map((color) => ( 42 42 + <SelectItem 43 43 + key={color} 44 44 + id={color} 45 45 + prefix={<ColorPreview color={color} />} 46 46 + > 47 47 + {capitalCase(color)} 48 48 + </SelectItem> 49 49 + ))} 50 50 + </Select> 51 51 + ); 52 52 + } 53 53 + 54 54 + export const ThemePicker = () => { 55 55 + const { theme, setTheme } = use(ThemeContext); 56 56 + const [open, setOpen] = useState(false); 57 57 + 58 58 + return ( 59 59 + <Dialog 60 60 + isOpen={open} 61 61 + onOpenChange={setOpen} 62 62 + trigger={ 63 63 + <IconButton aria-label="Theme" variant="tertiary"> 64 64 + <div> 65 65 + <ColorPreview color={theme.primaryColor} /> 66 66 + </div> 67 67 + </IconButton> 68 68 + } 69 69 + > 70 70 + <DialogHeader>Theme</DialogHeader> 71 71 + <DialogBody> 72 72 + <Flex direction="column" gap="4"> 73 73 + <ColorSelect 74 74 + color={theme.primaryColor} 75 75 + colors={primaryColors} 76 76 + label="Primary Color" 77 77 + onChange={(color) => 78 78 + setTheme({ ...theme, primaryColor: color as PrimaryColor }) 79 79 + } 80 80 + /> 81 81 + <ColorSelect 82 82 + color={theme.uiColor} 83 83 + colors={uiNames} 84 84 + label="UI Color" 85 85 + onChange={(color) => 86 86 + setTheme({ ...theme, uiColor: color as UiColor }) 87 87 + } 88 88 + /> 89 89 + <ColorSelect 90 90 + color={theme.successColor} 91 91 + colors={primaryColors} 92 92 + label="Success Color" 93 93 + onChange={(color) => 94 94 + setTheme({ ...theme, successColor: color as PrimaryColor }) 95 95 + } 96 96 + /> 97 97 + <ColorSelect 98 98 + color={theme.warningColor} 99 99 + colors={primaryColors} 100 100 + label="Warning Color" 101 101 + onChange={(color) => 102 102 + setTheme({ ...theme, warningColor: color as PrimaryColor }) 103 103 + } 104 104 + /> 105 105 + <ColorSelect 106 106 + color={theme.criticalColor} 107 107 + colors={primaryColors} 108 108 + label="Critical Color" 109 109 + onChange={(color) => 110 110 + setTheme({ ...theme, criticalColor: color as PrimaryColor }) 111 111 + } 112 112 + /> 113 113 + </Flex> 114 114 + </DialogBody> 115 115 + <DialogFooter> 116 116 + <Button onClick={() => setOpen(false)}>Done</Button> 117 117 + </DialogFooter> 118 118 + </Dialog> 119 119 + ); 120 120 + };

+142 -52

apps/docs/src/routes/__root.tsx

reviewed

··· 6 6 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"; 7 7 8 8 import { ui } from "../components/theme/semantic-color.stylex"; 9 9 - // import { primaryColor } from "../components/theme/color.stylex"; 10 10 - // import { blue } from "../components/theme/colors/blue.stylex"; 11 11 - // import { purple } from "../components/theme/colors/purple.stylex"; 9 9 + import { 10 10 + criticalColor, 11 11 + primaryColor, 12 12 + successColor, 13 13 + uiColor, 14 14 + uiInverted, 15 15 + warningColor, 16 16 + } from "../components/theme/color.stylex"; 17 17 + 18 18 + import { 19 19 + allColors, 20 20 + Color, 21 21 + defaultTheme, 22 22 + Theme, 23 23 + ThemeContext, 24 24 + UiColor, 25 25 + uiColorsInverted, 26 26 + } from "@/lib/ThemeContext"; 27 27 + import { useState } from "react"; 12 28 13 29 if (import.meta.env.DEV) { 14 30 import("virtual:stylex:runtime"); ··· 18 34 body: { 19 35 margin: 0, 20 36 }, 21 21 - themeBlue: { 22 22 - // [primaryColor.bg]: blue.bg, 23 23 - // [primaryColor.bgSubtle]: blue.bgSubtle, 24 24 - // [primaryColor.component1]: blue.component1, 25 25 - // [primaryColor.component2]: blue.component2, 26 26 - // [primaryColor.component3]: blue.component3, 27 27 - // [primaryColor.border1]: blue.border1, 28 28 - // [primaryColor.border2]: blue.border2, 29 29 - // [primaryColor.border3]: blue.border3, 30 30 - // [primaryColor.solid1]: blue.solid1, 31 31 - // [primaryColor.solid2]: blue.solid2, 32 32 - // [primaryColor.text1]: blue.text1, 33 33 - // [primaryColor.text2]: blue.text2, 34 34 - }, 35 35 - themePurple: { 36 36 - // [primaryColor.bg]: purple.bg, 37 37 - // [primaryColor.bgSubtle]: purple.bgSubtle, 38 38 - // [primaryColor.component1]: purple.component1, 39 39 - // [primaryColor.component2]: purple.component2, 40 40 - // [primaryColor.component3]: purple.component3, 41 41 - // [primaryColor.border1]: purple.border1, 42 42 - // [primaryColor.border2]: purple.border2, 43 43 - // [primaryColor.border3]: purple.border3, 44 44 - // [primaryColor.solid1]: purple.solid1, 45 45 - // [primaryColor.solid2]: purple.solid2, 46 46 - // [primaryColor.text1]: purple.text1, 47 47 - // [primaryColor.text2]: purple.text2, 48 48 - }, 37 37 + theme: ( 38 38 + primaryColorOverride: Color, 39 39 + uiColorOverride: UiColor, 40 40 + successColorOverride: Color, 41 41 + warningColorOverride: Color, 42 42 + criticalColorOverride: Color, 43 43 + ) => ({ 44 44 + [primaryColor.bg]: allColors[primaryColorOverride].bg, 45 45 + [primaryColor.bgSubtle]: allColors[primaryColorOverride].bgSubtle, 46 46 + [primaryColor.component1]: allColors[primaryColorOverride].component1, 47 47 + [primaryColor.component2]: allColors[primaryColorOverride].component2, 48 48 + [primaryColor.component3]: allColors[primaryColorOverride].component3, 49 49 + [primaryColor.border1]: allColors[primaryColorOverride].border1, 50 50 + [primaryColor.border2]: allColors[primaryColorOverride].border2, 51 51 + [primaryColor.border3]: allColors[primaryColorOverride].border3, 52 52 + [primaryColor.solid1]: allColors[primaryColorOverride].solid1, 53 53 + [primaryColor.solid2]: allColors[primaryColorOverride].solid2, 54 54 + [primaryColor.text1]: allColors[primaryColorOverride].text1, 55 55 + [primaryColor.text2]: allColors[primaryColorOverride].text2, 56 56 + 57 57 + [uiColor.bg]: allColors[uiColorOverride].bg, 58 58 + [uiColor.bgSubtle]: allColors[uiColorOverride].bgSubtle, 59 59 + [uiColor.component1]: allColors[uiColorOverride].component1, 60 60 + [uiColor.component2]: allColors[uiColorOverride].component2, 61 61 + [uiColor.component3]: allColors[uiColorOverride].component3, 62 62 + [uiColor.border1]: allColors[uiColorOverride].border1, 63 63 + [uiColor.border2]: allColors[uiColorOverride].border2, 64 64 + [uiColor.border3]: allColors[uiColorOverride].border3, 65 65 + [uiColor.solid1]: allColors[uiColorOverride].solid1, 66 66 + [uiColor.solid2]: allColors[uiColorOverride].solid2, 67 67 + [uiColor.text1]: allColors[uiColorOverride].text1, 68 68 + [uiColor.text2]: allColors[uiColorOverride].text2, 69 69 + 70 70 + [uiInverted.bg]: uiColorsInverted[uiColorOverride].bg, 71 71 + [uiInverted.bgSubtle]: uiColorsInverted[uiColorOverride].bgSubtle, 72 72 + [uiInverted.component1]: uiColorsInverted[uiColorOverride].component1, 73 73 + [uiInverted.component2]: uiColorsInverted[uiColorOverride].component2, 74 74 + [uiInverted.component3]: uiColorsInverted[uiColorOverride].component3, 75 75 + [uiInverted.border1]: uiColorsInverted[uiColorOverride].border1, 76 76 + [uiInverted.border2]: uiColorsInverted[uiColorOverride].border2, 77 77 + [uiInverted.border3]: uiColorsInverted[uiColorOverride].border3, 78 78 + [uiInverted.solid1]: uiColorsInverted[uiColorOverride].solid1, 79 79 + [uiInverted.solid2]: uiColorsInverted[uiColorOverride].solid2, 80 80 + [uiInverted.text1]: uiColorsInverted[uiColorOverride].text1, 81 81 + [uiInverted.text2]: uiColorsInverted[uiColorOverride].text2, 82 82 + 83 83 + [successColor.bg]: allColors[successColorOverride].bg, 84 84 + [successColor.bgSubtle]: allColors[successColorOverride].bgSubtle, 85 85 + [successColor.component1]: allColors[successColorOverride].component1, 86 86 + [successColor.component2]: allColors[successColorOverride].component2, 87 87 + [successColor.component3]: allColors[successColorOverride].component3, 88 88 + [successColor.border1]: allColors[successColorOverride].border1, 89 89 + [successColor.border2]: allColors[successColorOverride].border2, 90 90 + [successColor.border3]: allColors[successColorOverride].border3, 91 91 + [successColor.solid1]: allColors[successColorOverride].solid1, 92 92 + [successColor.solid2]: allColors[successColorOverride].solid2, 93 93 + [successColor.text1]: allColors[successColorOverride].text1, 94 94 + [successColor.text2]: allColors[successColorOverride].text2, 95 95 + 96 96 + [warningColor.bg]: allColors[warningColorOverride].bg, 97 97 + [warningColor.bgSubtle]: allColors[warningColorOverride].bgSubtle, 98 98 + [warningColor.component1]: allColors[warningColorOverride].component1, 99 99 + [warningColor.component2]: allColors[warningColorOverride].component2, 100 100 + [warningColor.component3]: allColors[warningColorOverride].component3, 101 101 + [warningColor.border1]: allColors[warningColorOverride].border1, 102 102 + [warningColor.border2]: allColors[warningColorOverride].border2, 103 103 + [warningColor.border3]: allColors[warningColorOverride].border3, 104 104 + [warningColor.solid1]: allColors[warningColorOverride].solid1, 105 105 + [warningColor.solid2]: allColors[warningColorOverride].solid2, 106 106 + [warningColor.text1]: allColors[warningColorOverride].text1, 107 107 + [warningColor.text2]: allColors[warningColorOverride].text2, 108 108 + 109 109 + [criticalColor.bg]: allColors[criticalColorOverride].bg, 110 110 + [criticalColor.bgSubtle]: allColors[criticalColorOverride].bgSubtle, 111 111 + [criticalColor.component1]: allColors[criticalColorOverride].component1, 112 112 + [criticalColor.component2]: allColors[criticalColorOverride].component2, 113 113 + [criticalColor.component3]: allColors[criticalColorOverride].component3, 114 114 + [criticalColor.border1]: allColors[criticalColorOverride].border1, 115 115 + [criticalColor.border2]: allColors[criticalColorOverride].border2, 116 116 + [criticalColor.border3]: allColors[criticalColorOverride].border3, 117 117 + [criticalColor.solid1]: allColors[criticalColorOverride].solid1, 118 118 + [criticalColor.solid2]: allColors[criticalColorOverride].solid2, 119 119 + [criticalColor.text1]: allColors[criticalColorOverride].text1, 120 120 + [criticalColor.text2]: allColors[criticalColorOverride].text2, 121 121 + }), 49 122 }); 50 123 51 124 export const Route = createRootRoute({ ··· 88 161 }); 89 162 90 163 function RootDocument({ children }: { children: React.ReactNode }) { 164 164 + const [theme, setTheme] = useState<Theme>(defaultTheme); 165 165 + 91 166 return ( 92 92 - <html lang="en"> 93 93 - <head> 94 94 - <HeadContent /> 95 95 - </head> 96 96 - <body {...stylex.props(ui.bg, ui.text, styles.body, styles.themeBlue)}> 97 97 - <script>{` 167 167 + <ThemeContext value={{ theme, setTheme }}> 168 168 + <html lang="en"> 169 169 + <head> 170 170 + <HeadContent /> 171 171 + </head> 172 172 + <body 173 173 + {...stylex.props( 174 174 + ui.bg, 175 175 + ui.text, 176 176 + styles.body, 177 177 + styles.theme( 178 178 + theme.primaryColor, 179 179 + theme.uiColor, 180 180 + theme.successColor, 181 181 + theme.warningColor, 182 182 + theme.criticalColor, 183 183 + ), 184 184 + )} 185 185 + > 186 186 + <script>{` 98 187 const localtColorScheme = localStorage.getItem("hip-ui-color-scheme"); 99 188 100 189 if (localtColorScheme) { 101 190 document.body.style.colorScheme = localtColorScheme; 102 191 } 103 192 `}</script> 104 104 - {children} 105 105 - <TanStackDevtools 106 106 - config={{ 107 107 - position: "bottom-right", 108 108 - }} 109 109 - plugins={[ 110 110 - { 111 111 - name: "Tanstack Router", 112 112 - render: <TanStackRouterDevtoolsPanel />, 113 113 - }, 114 114 - ]} 115 115 - /> 116 116 - <Scripts /> 117 117 - </body> 118 118 - </html> 193 193 + {children} 194 194 + <TanStackDevtools 195 195 + config={{ 196 196 + position: "bottom-right", 197 197 + }} 198 198 + plugins={[ 199 199 + { 200 200 + name: "Tanstack Router", 201 201 + render: <TanStackRouterDevtoolsPanel />, 202 202 + }, 203 203 + ]} 204 204 + /> 205 205 + <Scripts /> 206 206 + </body> 207 207 + </html> 208 208 + </ThemeContext> 119 209 ); 120 210 }

+10 -1

apps/docs/src/routes/docs.tsx

reviewed

··· 23 23 import { Text } from "@/components/typography/text"; 24 24 25 25 import { uiColor } from "../components/theme/color.stylex"; 26 26 + import { Flex } from "@/components/flex"; 27 27 + import { ThemePicker } from "@/lib/ThemePicker"; 26 28 27 29 const SidebarItemLink = createLink(SidebarItem); 28 30 ··· 179 181 180 182 return ( 181 183 <Sidebar> 182 182 - <SidebarHeader action={<DarkModeToggle />}> 184 184 + <SidebarHeader 185 185 + action={ 186 186 + <Flex gap="0.5" align="center"> 187 187 + <ThemePicker /> 188 188 + <DarkModeToggle /> 189 189 + </Flex> 190 190 + } 191 191 + > 183 192 <Text font="serif" size="4xl" weight="bold"> 184 193 Hip UI 185 194 </Text>

+93

apps/docs/stylex.css

reviewed

··· 89 89 @property --x-paddingRight { syntax: "*"; inherits: false;} 90 90 @property --x-height { syntax: "*"; inherits: false;} 91 91 @property --x-transform { syntax: "*"; inherits: false;} 92 92 + @property --x-backgroundColor { syntax: "*"; inherits: false;} 92 93 @property --xk6k0je { syntax: "<number>"; inherits: true; initial-value: 100 } 93 94 @property --x12edb6v { syntax: "<number>"; inherits: true; initial-value: 200 } 94 95 @property --x1xrohu8 { syntax: "<number>"; inherits: true; initial-value: 300 } ··· 282 283 .xxs775t{--progress-border-width:var(--x1plbop)} 283 284 .x11hzmvd{--toggle-button-group-gap:var(--xsow7ju)} 284 285 .x14xnieg{--x11as8pt:var(--x---x11as8pt)} 286 286 + .x9ivofj{--x11as8pt:var(--x1a33rbf)} 287 287 + .xgmdgmb{--x11as8pt:var(--x1gfz7lw)} 288 288 + .x1p9n6pm{--x11as8pt:var(--xkgv7eh)} 289 289 + .xjfu2eg{--x11as8pt:var(--xptzz2t)} 285 290 .xe12gv0{--x11hgl6v:var(--x---x11hgl6v)} 291 291 + .x664han{--x11hgl6v:var(--x156ikib)} 292 292 + .xqqlwn1{--x11hgl6v:var(--xhtfb9k)} 293 293 + .xs4intv{--x11hgl6v:var(--xi8u5z9)} 294 294 + .x1ajx7v1{--x11hgl6v:var(--xzgtcz2)} 286 295 .x1gkleh6{--x123awk4:var(--x---x123awk4)} 296 296 + .xe67m00{--x123awk4:var(--x1i13xn6)} 297 297 + .x1bizepc{--x123awk4:var(--x1obn2uh)} 298 298 + .x10bndcb{--x123awk4:var(--x1u2qu9m)} 299 299 + .x1upex69{--x123awk4:var(--xn5r12v)} 287 300 .x1mcird3{--x14k0c5u:var(--x---x14k0c5u)} 288 301 .xxjigmc{--x156ikib:var(--x---x156ikib)} 289 302 .xzrae5y{--x1587jaz:var(--x---x1587jaz)} 303 303 + .x7ig9pv{--x15nwm92:var(--x1f1q847)} 304 304 + .x1tzq262{--x15nwm92:var(--x1f99jtk)} 305 305 + .xg1mm6k{--x15nwm92:var(--x1mspsiw)} 306 306 + .x1tqck4s{--x15nwm92:var(--x1rjp7a6)} 290 307 .xrjt5cq{--x16f4t7r:var(--x---x16f4t7r)} 291 308 .xv4bh4h{--x16ucms1:var(--x---x16ucms1)} 292 309 .xz6xf6v{--x16vpvfb:var(--x---x16vpvfb)} ··· 294 311 .x19zk2cf{--x18xvsux:var(--x---x18xvsux)} 295 312 .x142qatw{--x1a33rbf:var(--x---x1a33rbf)} 296 313 .x28mwtm{--x1aturvj:var(--x---x1aturvj)} 314 314 + .x9wy4t6{--x1aturvj:var(--x1drn8y1)} 315 315 + .x2ak3g8{--x1aturvj:var(--x47z3hi)} 316 316 + .xci5v0c{--x1aturvj:var(--xbgkqvh)} 297 317 .x1sc3ac7{--x1be1b4q:var(--x---x1be1b4q)} 318 318 + .x1s80z81{--x1be1b4q:var(--x1587jaz)} 319 319 + .x1bvkpfs{--x1be1b4q:var(--x1cxb3of)} 320 320 + .x3j2m5l{--x1be1b4q:var(--x1fv6rtg)} 321 321 + .x7d765b{--x1be1b4q:var(--x1wagwp)} 298 322 .x9i8p6r{--x1bs37nf:var(--x---x1bs37nf)} 299 323 .x1hcp7en{--x1cklt06:var(--x---x1cklt06)} 300 324 .x1ivp3gu{--x1crx5cu:var(--x---x1crx5cu)} 325 325 + .xnwgvuz{--x1crx5cu:var(--x1ubhs74)} 326 326 + .xgq2t80{--x1crx5cu:var(--xepqutl)} 327 327 + .x1b6jlu8{--x1crx5cu:var(--xvobw7z)} 301 328 .x1exbl2s{--x1cxb3of:var(--x---x1cxb3of)} 302 329 .xerpi9c{--x1drn8y1:var(--x---x1drn8y1)} 303 330 .x1x07oa2{--x1e4ihis:var(--x---x1e4ihis)} 331 331 + .x1yyt48w{--x1f99jtk:var(--x1f1q847)} 332 332 + .xti2xwz{--x1f99jtk:var(--x1mspsiw)} 333 333 + .xdet16c{--x1f99jtk:var(--x1rjp7a6)} 304 334 .xsrqwli{--x1fv6rtg:var(--x---x1fv6rtg)} 335 335 + .x1mc5nl8{--x1fv6rtg:var(--x1587jaz)} 336 336 + .x1uorwd9{--x1fv6rtg:var(--x1cxb3of)} 337 337 + .xcxkr48{--x1fv6rtg:var(--x1wagwp)} 305 338 .xzhpmvt{--x1gfz7lw:var(--x---x1gfz7lw)} 339 339 + .x2qa0dy{--x1gfz7lw:var(--x1a33rbf)} 340 340 + .x14xsul8{--x1gfz7lw:var(--xkgv7eh)} 341 341 + .x1azxb9i{--x1gfz7lw:var(--xptzz2t)} 306 342 .xvafp6z{--x1h1eurh:var(--x---x1h1eurh)} 307 343 .x117llg9{--x1hmtawr:var(--x---x1hmtawr)} 308 344 .x22mkj7{--x1i13xn6:var(--x---x1i13xn6)} 345 345 + .x1j9heyh{--x1i13xn6:var(--x1obn2uh)} 346 346 + .x40k2lg{--x1i13xn6:var(--x1u2qu9m)} 347 347 + .xzmny39{--x1i13xn6:var(--xn5r12v)} 309 348 .xp08f8v{--x1kg2ygz:var(--x---x1kg2ygz)} 310 349 .x1an1nx4{--x1l5nls6:var(--x---x1l5nls6)} 311 350 .xvdpi6d{--x1o3inj8:var(--x---x1o3inj8)} 312 351 .x1w8ywdz{--x1obn2uh:var(--x---x1obn2uh)} 313 352 .x1qenwvp{--x1ojhc7k:var(--x---x1ojhc7k)} 353 353 + .x2o5xmp{--x1ojhc7k:var(--x16ucms1)} 354 354 + .x12o34th{--x1ojhc7k:var(--x17z0c80)} 355 355 + .xvwmgvd{--x1ojhc7k:var(--x1e4ihis)} 356 356 + .x9lbw2{--x1ojhc7k:var(--xrqvod2)} 314 357 .xc0kyli{--x1pbhz26:var(--x---x1pbhz26)} 315 358 .xbitb2r{--x1qgqpcr:var(--x---x1qgqpcr)} 359 359 + .x7sb9ws{--x1qgqpcr:var(--x14k0c5u)} 360 360 + .xymcuas{--x1qgqpcr:var(--x1uwop3o)} 361 361 + .x501y45{--x1qgqpcr:var(--x6wzzll)} 362 362 + .x14nlmx5{--x1qgqpcr:var(--xs64gu4)} 316 363 .x12r7922{--x1r678bi:var(--x---x1r678bi)} 317 364 .xk7esdy{--x1s275lk:var(--x---x1s275lk)} 318 365 .xjllr0u{--x1u2qu9m:var(--x---x1u2qu9m)} ··· 322 369 .x1ssib8w{--x1uwop3o:var(--x---x1uwop3o)} 323 370 .x1vvs4cd{--x1wagwp:var(--x---x1wagwp)} 324 371 .x1ecjzft{--x1xyma3f:var(--x---x1xyma3f)} 372 372 + .xgjd0m9{--x1xyma3f:var(--x1kg2ygz)} 373 373 + .x1tgfkw9{--x1xyma3f:var(--x1l5nls6)} 374 374 + .x1plf6x8{--x1xyma3f:var(--x1u4qfl5)} 325 375 .x91cy9h{--x1yq3app:var(--x---x1yq3app)} 326 376 .xlgo0sd{--x1yrls9:var(--x---x1yrls9)} 377 377 + .xkw02ms{--x1yrls9:var(--x1aturvj)} 378 378 + .x1ebjrxw{--x1yrls9:var(--x1drn8y1)} 379 379 + .xtbk9fu{--x1yrls9:var(--x47z3hi)} 380 380 + .x18ntyij{--x1yrls9:var(--xbgkqvh)} 327 381 .xu9m9yn{--x45q57k:var(--x---x45q57k)} 382 382 + .x1qf3cla{--x45q57k:var(--x1s275lk)} 383 383 + .x1prntw{--x45q57k:var(--x1umfgwa)} 384 384 + .xz2w0w{--x45q57k:var(--xpii5us)} 385 385 + .x8joo3o{--x45q57k:var(--xw4mcn1)} 328 386 .xone9k4{--x47z3hi:var(--x---x47z3hi)} 329 387 .x1i3ay83{--x50hgqv:var(--x---x50hgqv)} 330 388 .xj1xwct{--x6wzzll:var(--x---x6wzzll)} ··· 333 391 .x1koy5ky{--xbgkqvh:var(--x---xbgkqvh)} 334 392 .x1qv8i2l{--xcc23vl:var(--x---xcc23vl)} 335 393 .xeg1evf{--xdhoy4z:var(--x---xdhoy4z)} 394 394 + .x1rflal3{--xdhoy4z:var(--x1cklt06)} 395 395 + .x1xnusnd{--xdhoy4z:var(--x1yq3app)} 396 396 + .x1mjytdc{--xdhoy4z:var(--x8tqwsr)} 336 397 .x127dqk7{--xelq0bc:var(--x---xelq0bc)} 398 398 + .xyj5zx6{--xelq0bc:var(--x1kg2ygz)} 399 399 + .xvga70b{--xelq0bc:var(--x1l5nls6)} 400 400 + .x15h0woq{--xelq0bc:var(--x1u4qfl5)} 401 401 + .xmejewq{--xelq0bc:var(--x1xyma3f)} 337 402 .xh4r0tq{--xepqutl:var(--x---xepqutl)} 338 403 .xzqqsqy{--xhtfb9k:var(--x---xhtfb9k)} 404 404 + .x8i5in{--xhtfb9k:var(--x156ikib)} 405 405 + .x9ouuv{--xhtfb9k:var(--xi8u5z9)} 406 406 + .xnpki7b{--xhtfb9k:var(--xzgtcz2)} 339 407 .xmixorq{--xi8u5z9:var(--x---xi8u5z9)} 340 408 .x1i63ep6{--xkcrude:var(--x---xkcrude)} 409 409 + .x8esx2s{--xkcrude:var(--x1crx5cu)} 410 410 + .x1hk8fx7{--xkcrude:var(--x1ubhs74)} 411 411 + .xnbfhmh{--xkcrude:var(--xepqutl)} 412 412 + .xhbn0hr{--xkcrude:var(--xvobw7z)} 341 413 .x1v0c26y{--xkgv7eh:var(--x---xkgv7eh)} 342 414 .x1ltryfy{--xl2jk9r:var(--x---xl2jk9r)} 343 415 .xqgnz3e{--xn5r12v:var(--x---xn5r12v)} 344 416 .x19ev3s5{--xohqlzf:var(--x---xohqlzf)} 345 417 .x10djsmo{--xoi766n:var(--x---xoi766n)} 346 418 .x1jymrsr{--xpii5us:var(--x---xpii5us)} 419 419 + .x1i6k6nr{--xpii5us:var(--x1s275lk)} 420 420 + .xr7gobz{--xpii5us:var(--x1umfgwa)} 421 421 + .xvrlgx6{--xpii5us:var(--xw4mcn1)} 347 422 .x1qu3rb3{--xpnxlzk:var(--x---xpnxlzk)} 423 423 + .x19tb7ch{--xpnxlzk:var(--x18xvsux)} 424 424 + .x1um2koz{--xpnxlzk:var(--x1bs37nf)} 425 425 + .xg8so5{--xpnxlzk:var(--xl2jk9r)} 348 426 .xzh9fzc{--xptzz2t:var(--x---xptzz2t)} 349 427 .x1ydry50{--xrqvod2:var(--x---xrqvod2)} 428 428 + .xv5vq2x{--xrqvod2:var(--x16ucms1)} 429 429 + .xjqfowq{--xrqvod2:var(--x17z0c80)} 430 430 + .xyueayk{--xrqvod2:var(--x1e4ihis)} 350 431 .x133xgf5{--xs64gu4:var(--x---xs64gu4)} 432 432 + .x1mg8nvc{--xs64gu4:var(--x14k0c5u)} 433 433 + .x1mujcpr{--xs64gu4:var(--x1uwop3o)} 434 434 + .x3ch3fj{--xs64gu4:var(--x6wzzll)} 351 435 .xzmulj{--xvobw7z:var(--x---xvobw7z)} 352 436 .x15iwxt0{--xw4mcn1:var(--x---xw4mcn1)} 353 437 .x1wwpy88{--xx7wvuk:var(--x---xx7wvuk)} 438 438 + .x37u1dg{--xx7wvuk:var(--x18xvsux)} 439 439 + .x117x602{--xx7wvuk:var(--x1bs37nf)} 440 440 + .x3kq5zd{--xx7wvuk:var(--xl2jk9r)} 441 441 + .xcqsvly{--xx7wvuk:var(--xpnxlzk)} 354 442 .x1atn885{--xxsd9i2:var(--x---xxsd9i2)} 443 443 + .x1chkgug{--xxsd9i2:var(--x1cklt06)} 444 444 + .x60xqo3{--xxsd9i2:var(--x1yq3app)} 445 445 + .x1b1i4bi{--xxsd9i2:var(--x8tqwsr)} 446 446 + .xmxxlhl{--xxsd9i2:var(--xdhoy4z)} 355 447 .x8co2na{--xzgtcz2:var(--x---xzgtcz2)} 356 448 .x15cm67w:is([data-card-size=md]){--card-gap:var(--x109877l)} 357 449 .x1seei51:is([data-card-size=lg]){--card-gap:var(--x58vtwt)} ··· 597 689 .x1esc4pq:not(#\#):not(#\#):not(#\#){background-color:#14b8a6} 598 690 .xcpsgoo:not(#\#):not(#\#):not(#\#){background-color:rgba(0,0,0,.5)} 599 691 .xjbqb8w:not(#\#):not(#\#):not(#\#){background-color:transparent} 692 692 + .xl8spv7:not(#\#):not(#\#):not(#\#){background-color:var(--x-backgroundColor)} 600 693 .x1ijbf8i:not(#\#):not(#\#):not(#\#){background-color:var(--x11as8pt)} 601 694 .x1u99voq:not(#\#):not(#\#):not(#\#){background-color:var(--x11hgl6v)} 602 695 .x1xyr1h3:not(#\#):not(#\#):not(#\#){background-color:var(--x123awk4)}

+125 -3

packages/hip-ui/src/components/alert/index.tsx

reviewed

··· 12 12 13 13 import { SizeContext } from "../context"; 14 14 import { IconButton } from "../icon-button"; 15 15 - import { maxBreakpoints, mediaQueries } from "../theme/media-queries.stylex"; 15 15 + import { 16 16 + criticalColor, 17 17 + primaryColor, 18 18 + successColor, 19 19 + uiColor, 20 20 + warningColor, 21 21 + } from "../theme/color.stylex"; 22 22 + import { maxBreakpoints } from "../theme/media-queries.stylex"; 23 23 + import { mediaQueries } from "../theme/media-queries.stylex"; 16 24 import { radius } from "../theme/radius.stylex"; 17 25 import { 18 26 critical, ··· 133 141 actionAndClose: { 134 142 alignSelf: "center", 135 143 }, 144 144 + info: { 145 145 + [uiColor.bg]: primaryColor.bg, 146 146 + [uiColor.bgSubtle]: primaryColor.bgSubtle, 147 147 + [uiColor.component1]: primaryColor.component1, 148 148 + [uiColor.component2]: primaryColor.component2, 149 149 + [uiColor.component3]: primaryColor.component3, 150 150 + [uiColor.border1]: primaryColor.border1, 151 151 + [uiColor.border2]: primaryColor.border2, 152 152 + [uiColor.border3]: primaryColor.border3, 153 153 + [uiColor.solid1]: primaryColor.solid1, 154 154 + [uiColor.solid2]: primaryColor.solid2, 155 155 + [uiColor.text1]: primaryColor.text1, 156 156 + [uiColor.text2]: primaryColor.text2, 157 157 + [uiColor.textContrast]: primaryColor.textContrast, 158 158 + }, 159 159 + success: { 160 160 + [uiColor.bg]: successColor.bg, 161 161 + [uiColor.bgSubtle]: successColor.bgSubtle, 162 162 + [uiColor.component1]: successColor.component1, 163 163 + [uiColor.component2]: successColor.component2, 164 164 + [uiColor.component3]: successColor.component3, 165 165 + [uiColor.border1]: successColor.border1, 166 166 + [uiColor.border2]: successColor.border2, 167 167 + [uiColor.border3]: successColor.border3, 168 168 + [uiColor.solid1]: successColor.solid1, 169 169 + [uiColor.solid2]: successColor.solid2, 170 170 + [uiColor.text1]: successColor.text1, 171 171 + [uiColor.text2]: successColor.text2, 172 172 + [uiColor.textContrast]: successColor.textContrast, 173 173 + 174 174 + [primaryColor.bg]: successColor.bg, 175 175 + [primaryColor.bgSubtle]: successColor.bgSubtle, 176 176 + [primaryColor.component1]: successColor.component1, 177 177 + [primaryColor.component2]: successColor.component2, 178 178 + [primaryColor.component3]: successColor.component3, 179 179 + [primaryColor.border1]: successColor.border1, 180 180 + [primaryColor.border2]: successColor.border2, 181 181 + [primaryColor.border3]: successColor.border3, 182 182 + [primaryColor.solid1]: successColor.solid1, 183 183 + [primaryColor.solid2]: successColor.solid2, 184 184 + [primaryColor.text1]: successColor.text1, 185 185 + [primaryColor.text2]: successColor.text2, 186 186 + [primaryColor.textContrast]: successColor.textContrast, 187 187 + }, 188 188 + warning: { 189 189 + [uiColor.bg]: warningColor.bg, 190 190 + [uiColor.bgSubtle]: warningColor.bgSubtle, 191 191 + [uiColor.component1]: warningColor.component1, 192 192 + [uiColor.component2]: warningColor.component2, 193 193 + [uiColor.component3]: warningColor.component3, 194 194 + [uiColor.border1]: warningColor.border1, 195 195 + [uiColor.border2]: warningColor.border2, 196 196 + [uiColor.border3]: warningColor.border3, 197 197 + [uiColor.solid1]: warningColor.solid1, 198 198 + [uiColor.solid2]: warningColor.solid2, 199 199 + [uiColor.text1]: warningColor.text1, 200 200 + [uiColor.text2]: warningColor.text2, 201 201 + [uiColor.textContrast]: warningColor.textContrast, 202 202 + 203 203 + [primaryColor.bg]: warningColor.bg, 204 204 + [primaryColor.bgSubtle]: warningColor.bgSubtle, 205 205 + [primaryColor.component1]: warningColor.component1, 206 206 + [primaryColor.component2]: warningColor.component2, 207 207 + [primaryColor.component3]: warningColor.component3, 208 208 + [primaryColor.border1]: warningColor.border1, 209 209 + [primaryColor.border2]: warningColor.border2, 210 210 + [primaryColor.border3]: warningColor.border3, 211 211 + [primaryColor.solid1]: warningColor.solid1, 212 212 + [primaryColor.solid2]: warningColor.solid2, 213 213 + [primaryColor.text1]: warningColor.text1, 214 214 + [primaryColor.text2]: warningColor.text2, 215 215 + [primaryColor.textContrast]: warningColor.textContrast, 216 216 + }, 217 217 + critical: { 218 218 + [uiColor.bg]: criticalColor.bg, 219 219 + [uiColor.bgSubtle]: criticalColor.bgSubtle, 220 220 + [uiColor.component1]: criticalColor.component1, 221 221 + [uiColor.component2]: criticalColor.component2, 222 222 + [uiColor.component3]: criticalColor.component3, 223 223 + [uiColor.border1]: criticalColor.border1, 224 224 + [uiColor.border2]: criticalColor.border2, 225 225 + [uiColor.border3]: criticalColor.border3, 226 226 + [uiColor.solid1]: criticalColor.solid1, 227 227 + [uiColor.solid2]: criticalColor.solid2, 228 228 + [uiColor.text1]: criticalColor.text1, 229 229 + [uiColor.text2]: criticalColor.text2, 230 230 + [uiColor.textContrast]: criticalColor.textContrast, 231 231 + 232 232 + [primaryColor.bg]: criticalColor.bg, 233 233 + [primaryColor.bgSubtle]: criticalColor.bgSubtle, 234 234 + [primaryColor.component1]: criticalColor.component1, 235 235 + [primaryColor.component2]: criticalColor.component2, 236 236 + [primaryColor.component3]: criticalColor.component3, 237 237 + [primaryColor.border1]: criticalColor.border1, 238 238 + [primaryColor.border2]: criticalColor.border2, 239 239 + [primaryColor.border3]: criticalColor.border3, 240 240 + [primaryColor.solid1]: criticalColor.solid1, 241 241 + [primaryColor.solid2]: criticalColor.solid2, 242 242 + [primaryColor.text1]: criticalColor.text1, 243 243 + [primaryColor.text2]: criticalColor.text2, 244 244 + [primaryColor.textContrast]: criticalColor.textContrast, 245 245 + }, 136 246 }); 137 247 138 248 export type AlertVariant = "info" | "success" | "warning" | "critical"; ··· 194 304 const displayIcon = icon === undefined ? defaultIcon : icon; 195 305 const hasAction = action != null; 196 306 const hasCloseButton = onDismiss != null; 307 307 + const actionStyles = [ 308 308 + variant === "info" && styles.info, 309 309 + variant === "success" && styles.success, 310 310 + variant === "warning" && styles.warning, 311 311 + variant === "critical" && styles.critical, 312 312 + ]; 197 313 198 314 return ( 199 315 <div ··· 241 357 </Text> 242 358 )} 243 359 </div> 244 244 - {hasAction && <div {...stylex.props(styles.action)}>{action}</div>} 360 360 + {hasAction && ( 361 361 + <div {...stylex.props(styles.action, actionStyles)}>{action}</div> 362 362 + )} 245 363 {hasCloseButton && ( 246 364 <IconButton 247 365 aria-label="Dismiss alert" 248 366 size={size} 249 367 variant="tertiary" 250 368 onPress={onDismiss} 251 251 - style={[styles.closeButton, hasAction && styles.actionAndClose]} 369 369 + style={[ 370 370 + actionStyles, 371 371 + styles.closeButton, 372 372 + hasAction && styles.actionAndClose, 373 373 + ]} 252 374 > 253 375 <X /> 254 376 </IconButton>