A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactoring color

+379 -377
+32 -2
apps/docs/src/routes/__root.tsx
··· 5 5 import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"; 6 6 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"; 7 7 8 - import { ui } from "@/components/theme/semantic-color.stylex"; 8 + import { ui, primaryColor } from "../components/theme/semantic-color.stylex"; 9 + import { blue } from "../components/theme/colors/blue.stylex"; 10 + import { purple } from "../components/theme/colors/purple.stylex"; 9 11 10 12 if (import.meta.env.DEV) { 11 13 import("virtual:stylex:runtime"); ··· 14 16 const styles = stylex.create({ 15 17 body: { 16 18 margin: 0, 19 + }, 20 + themeBlue: { 21 + [primaryColor.bg]: blue.bg, 22 + [primaryColor.bgSubtle]: blue.bgSubtle, 23 + [primaryColor.component1]: blue.component1, 24 + [primaryColor.component2]: blue.component2, 25 + [primaryColor.component3]: blue.component3, 26 + [primaryColor.border1]: blue.border1, 27 + [primaryColor.border2]: blue.border2, 28 + [primaryColor.border3]: blue.border3, 29 + [primaryColor.solid1]: blue.solid1, 30 + [primaryColor.solid2]: blue.solid2, 31 + [primaryColor.text1]: blue.text1, 32 + [primaryColor.text2]: blue.text2, 33 + }, 34 + themePurple: { 35 + [primaryColor.bg]: purple.bg, 36 + [primaryColor.bgSubtle]: purple.bgSubtle, 37 + [primaryColor.component1]: purple.component1, 38 + [primaryColor.component2]: purple.component2, 39 + [primaryColor.component3]: purple.component3, 40 + [primaryColor.border1]: purple.border1, 41 + [primaryColor.border2]: purple.border2, 42 + [primaryColor.border3]: purple.border3, 43 + [primaryColor.solid1]: purple.solid1, 44 + [primaryColor.solid2]: purple.solid2, 45 + [primaryColor.text1]: purple.text1, 46 + [primaryColor.text2]: purple.text2, 17 47 }, 18 48 }); 19 49 ··· 62 92 <head> 63 93 <HeadContent /> 64 94 </head> 65 - <body {...stylex.props(ui.bg, ui.text, styles.body)}> 95 + <body {...stylex.props(ui.bg, ui.text, styles.body, styles.themeBlue)}> 66 96 <script>{` 67 97 const localtColorScheme = localStorage.getItem("hip-ui-color-scheme"); 68 98
+1 -1
packages/hip-ui/src/cli/install.tsx
··· 61 61 import { segmentedControlConfig } from "../components/segmented-control/segmented-control-config.js"; 62 62 import { selectConfig } from "../components/select/select-config.js"; 63 63 import { separatorConfig } from "../components/separator/separator-config.js"; 64 - import { skeletonConfig } from "../components/skeleton/skeleton-config.js"; 65 64 import { sidebarConfig } from "../components/sidebar/sidebar-config.js"; 65 + import { skeletonConfig } from "../components/skeleton/skeleton-config.js"; 66 66 import { sliderConfig } from "../components/slider/slider-config.js"; 67 67 import { switchConfig } from "../components/switch/switch-config.js"; 68 68 import { tableConfig } from "../components/table/table-config.js";
+2 -2
packages/hip-ui/src/components/alert-dialog/index.tsx
··· 27 27 paddingTop: spacing["2"], 28 28 }, 29 29 header: { 30 - alignItems: "center", 31 30 gap: spacing["2"], 31 + alignItems: "center", 32 32 display: "flex", 33 + fontSize: fontSize["lg"], 33 34 justifyContent: "space-between", 34 35 height: spacing["8"], 35 36 paddingLeft: spacing["4"], 36 37 paddingRight: spacing["4"], 37 - fontSize: fontSize["lg"], 38 38 paddingTop: spacing["2"], 39 39 }, 40 40 description: {
+1 -1
packages/hip-ui/src/components/avatar/index.tsx
··· 2 2 import { use, useLayoutEffect, useState } from "react"; 3 3 4 4 import { SizeContext } from "../context"; 5 + import { uiColor } from "../theme/color.stylex"; 5 6 import { radius } from "../theme/radius.stylex"; 6 - import { uiColor } from "../theme/semantic-color.stylex"; 7 7 import { spacing } from "../theme/spacing.stylex"; 8 8 import { Size, StyleXComponentProps } from "../theme/types"; 9 9 import {
-1
packages/hip-ui/src/components/breadcrumbs/breadcrumbs-config.ts
··· 14 14 "lucide-react": "^0.263.1", 15 15 }, 16 16 }; 17 -
+6 -6
packages/hip-ui/src/components/breadcrumbs/index.tsx
··· 7 7 BreadcrumbProps as AriaBreadcrumbProps, 8 8 } from "react-aria-components"; 9 9 10 - import { uiColor } from "../theme/semantic-color.stylex"; 10 + import { uiColor } from "../theme/color.stylex"; 11 11 import { spacing } from "../theme/spacing.stylex"; 12 12 import { StyleXComponentProps } from "../theme/types"; 13 13 import { fontWeight } from "../theme/typography.stylex"; 14 14 15 15 const styles = stylex.create({ 16 16 breadcrumbs: { 17 - alignItems: "center", 18 - display: "flex", 19 - gap: spacing["1"], 20 - listStyle: "none", 21 17 margin: 0, 22 18 padding: 0, 19 + gap: spacing["1"], 20 + listStyle: "none", 21 + alignItems: "center", 22 + display: "flex", 23 23 }, 24 24 breadcrumb: { 25 + gap: spacing["1"], 25 26 alignItems: "center", 26 27 color: { 27 28 default: uiColor.text2, ··· 32 33 default: fontWeight.normal, 33 34 ":is([data-current])": fontWeight.medium, 34 35 }, 35 - gap: spacing["1"], 36 36 }, 37 37 separator: { 38 38 alignItems: "center",
-2
packages/hip-ui/src/components/calendar/calendar-config.ts
··· 4 4 name: "calendar", 5 5 filepath: "./index.tsx", 6 6 }; 7 - 8 -
-1
packages/hip-ui/src/components/calendar/index.tsx
··· 18 18 import { Flex } from "../flex"; 19 19 import { IconButton } from "../icon-button"; 20 20 import { ErrorMessage } from "../label"; 21 - import { spacing } from "../theme/spacing.stylex"; 22 21 import { useCalendarStyles } from "../theme/useCalendarStyles"; 23 22 24 23 export interface CalendarProps<T extends DateValue>
-2
packages/hip-ui/src/components/color-picker/color-picker-config.ts
··· 4 4 name: "color-picker", 5 5 filepath: "./index.tsx", 6 6 }; 7 - 8 -
+6 -6
packages/hip-ui/src/components/color-picker/index.tsx
··· 36 36 37 37 const styles = stylex.create({ 38 38 button: { 39 - alignItems: "center", 40 - backgroundColor: "transparent", 39 + margin: 0, 40 + padding: 0, 41 41 borderWidth: 0, 42 - display: "flex", 43 - fontSize: fontSize["sm"], 44 42 gap: { 45 43 default: spacing["2"], 46 44 ":is([data-size=sm])": spacing["1"], 47 45 }, 48 - margin: 0, 49 - padding: 0, 46 + alignItems: "center", 47 + backgroundColor: "transparent", 48 + display: "flex", 49 + fontSize: fontSize["sm"], 50 50 }, 51 51 root: { 52 52 display: "block",
+1 -1
packages/hip-ui/src/components/color-slider/index.tsx
··· 11 11 import { ColorThumb } from "../color-area"; 12 12 import { SizeContext } from "../context"; 13 13 import { Label } from "../label"; 14 + import { uiColor } from "../theme/color.stylex"; 14 15 import { radius } from "../theme/radius.stylex"; 15 - import { uiColor } from "../theme/semantic-color.stylex"; 16 16 import { spacing } from "../theme/spacing.stylex"; 17 17 import { Size, StyleXComponentProps } from "../theme/types"; 18 18 import { fontSize, lineHeight } from "../theme/typography.stylex";
+1 -1
packages/hip-ui/src/components/color-swatch-picker/index.tsx
··· 9 9 10 10 import { ColorSwatch } from "../color-swatch"; 11 11 import { SizeContext } from "../context"; 12 + import { uiColor } from "../theme/color.stylex"; 12 13 import { radius } from "../theme/radius.stylex"; 13 - import { uiColor } from "../theme/semantic-color.stylex"; 14 14 import { spacing } from "../theme/spacing.stylex"; 15 15 import { Size, StyleXComponentProps } from "../theme/types"; 16 16
+1 -1
packages/hip-ui/src/components/color-swatch/index.tsx
··· 5 5 import { ColorSwatch as AriaColorSwatch } from "react-aria-components"; 6 6 7 7 import { SizeContext } from "../context"; 8 + import { uiColor } from "../theme/color.stylex"; 8 9 import { radius } from "../theme/radius.stylex"; 9 - import { uiColor } from "../theme/semantic-color.stylex"; 10 10 import { spacing } from "../theme/spacing.stylex"; 11 11 import { Size, StyleXComponentProps } from "../theme/types"; 12 12
+1 -1
packages/hip-ui/src/components/color-wheel/index.tsx
··· 9 9 10 10 import { ColorThumb } from "../color-area"; 11 11 import { SizeContext } from "../context"; 12 + import { uiColor } from "../theme/color.stylex"; 12 13 import { radius } from "../theme/radius.stylex"; 13 - import { uiColor } from "../theme/semantic-color.stylex"; 14 14 import { spacing } from "../theme/spacing.stylex"; 15 15 import { Size, StyleXComponentProps } from "../theme/types"; 16 16
+2 -2
packages/hip-ui/src/components/context-menu/index.tsx
··· 24 24 import { useMenuTriggerState } from "react-stately"; 25 25 26 26 import { SizeContext } from "../context"; 27 + import { spacing } from "../theme/spacing.stylex"; 27 28 import { Size, StyleXComponentProps } from "../theme/types"; 28 29 import { usePopoverStyles } from "../theme/usePopoverStyles"; 29 - import { spacing } from "../theme/spacing.stylex"; 30 30 31 31 const styles = stylex.create({ 32 32 menu: { 33 - paddingTop: spacing["0.5"], 34 33 paddingBottom: spacing["0.5"], 34 + paddingTop: spacing["0.5"], 35 35 }, 36 36 }); 37 37
+1 -1
packages/hip-ui/src/components/date-range-picker/index.tsx
··· 18 18 import { Description, FieldErrorMessage, Label } from "../label"; 19 19 import { RangeCalendar, RangeCalendarProps } from "../range-calendar"; 20 20 import { SuffixIcon } from "../suffix-icon"; 21 - import { uiColor } from "../theme/semantic-color.stylex"; 21 + import { uiColor } from "../theme/color.stylex"; 22 22 import { spacing } from "../theme/spacing.stylex"; 23 23 import { 24 24 InputVariant,
+3 -3
packages/hip-ui/src/components/dialog/index.tsx
··· 12 12 } from "react-aria-components"; 13 13 14 14 import { IconButton } from "../icon-button"; 15 - import { uiColor } from "../theme/semantic-color.stylex"; 15 + import { uiColor } from "../theme/color.stylex"; 16 16 import { spacing } from "../theme/spacing.stylex"; 17 17 import { Size, StyleXComponentProps } from "../theme/types"; 18 18 import { fontSize, typeramp } from "../theme/typography.stylex"; ··· 23 23 paddingTop: spacing["2"], 24 24 }, 25 25 header: { 26 - alignItems: "center", 27 26 gap: spacing["2"], 27 + alignItems: "center", 28 28 display: "flex", 29 + fontSize: fontSize["lg"], 29 30 justifyContent: "space-between", 30 31 height: spacing["8"], 31 32 paddingBottom: spacing["2"], 32 33 paddingLeft: spacing["4"], 33 - fontSize: fontSize["lg"], 34 34 paddingRight: spacing["4"], 35 35 36 36 borderBottomColor: uiColor.border1,
+1 -5
packages/hip-ui/src/components/disclosure-group/disclosure-group-config.ts
··· 3 3 export const disclosureGroupConfig: ComponentConfig = { 4 4 name: "disclosure-group", 5 5 filepath: "./index.tsx", 6 - hipDependencies: [ 7 - "../theme/types.ts", 8 - "../context.ts", 9 - ], 6 + hipDependencies: ["../theme/types.ts", "../context.ts"], 10 7 dependencies: { 11 8 "react-aria-components": "^1.13.0", 12 9 }, 13 10 }; 14 -
+3 -3
packages/hip-ui/src/components/disclosure-group/index.tsx
··· 8 8 } from "react-aria-components"; 9 9 10 10 import { SizeContext } from "../context"; 11 - import { uiColor } from "../theme/semantic-color.stylex"; 11 + import { uiColor } from "../theme/color.stylex"; 12 12 import { Size, StyleXComponentProps } from "../theme/types"; 13 13 14 14 const styles = stylex.create({ ··· 17 17 flexDirection: "column", 18 18 }, 19 19 separator: { 20 - backgroundColor: uiColor.border2, 20 + margin: 0, 21 21 borderWidth: 0, 22 + backgroundColor: uiColor.border2, 22 23 height: "1px", 23 - margin: 0, 24 24 width: "100%", 25 25 }, 26 26 });
+1 -1
packages/hip-ui/src/components/disclosure/index.tsx
··· 12 12 13 13 import { SizeContext } from "../context"; 14 14 import { animationDuration } from "../theme/animations.stylex"; 15 + import { uiColor } from "../theme/color.stylex"; 15 16 import { radius } from "../theme/radius.stylex"; 16 - import { uiColor } from "../theme/semantic-color.stylex"; 17 17 import { spacing } from "../theme/spacing.stylex"; 18 18 import { Size, StyleXComponentProps } from "../theme/types"; 19 19 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
+1 -1
packages/hip-ui/src/components/drawer/index.tsx
··· 13 13 14 14 import { IconButton } from "../icon-button"; 15 15 import { animationDuration, animations } from "../theme/animations.stylex"; 16 - import { uiColor } from "../theme/semantic-color.stylex"; 16 + import { uiColor } from "../theme/color.stylex"; 17 17 import { spacing } from "../theme/spacing.stylex"; 18 18 import { Size, StyleXComponentProps } from "../theme/types"; 19 19 import { typeramp } from "../theme/typography.stylex";
-1
packages/hip-ui/src/components/editable-text/editable-text-config.ts
··· 17 17 "react-aria-components": "^1.13.0", 18 18 }, 19 19 }; 20 -
-1
packages/hip-ui/src/components/empty-state/empty-state-config.ts
··· 11 11 "../context.ts", 12 12 ], 13 13 }; 14 -
+21 -44
packages/hip-ui/src/components/empty-state/index.tsx
··· 11 11 12 12 const styles = stylex.create({ 13 13 emptyState: { 14 - display: "flex", 15 - flexDirection: "column", 16 - alignItems: "center", 17 - justifyContent: "center", 18 - fontFamily: fontFamily["sans"], 19 - gap: "var(--empty-state-gap)", 20 - textAlign: "center", 21 14 "--empty-state-gap": { 22 15 ":is([data-empty-state-size=lg])": spacing["8"], 23 16 ":is([data-empty-state-size=md])": spacing["6"], ··· 28 21 ":is([data-empty-state-size=md])": "180px", 29 22 ":is([data-empty-state-size=sm])": "120px", 30 23 }, 24 + gap: "var(--empty-state-gap)", 25 + alignItems: "center", 26 + display: "flex", 27 + flexDirection: "column", 28 + fontFamily: fontFamily["sans"], 29 + justifyContent: "center", 30 + textAlign: "center", 31 31 }, 32 32 image: { 33 - width: "var(--empty-state-image-size)", 34 - height: "var(--empty-state-image-size)", 35 - objectFit: "contain", 36 - display: "flex", 37 33 alignItems: "center", 34 + display: "flex", 38 35 justifyContent: "center", 36 + objectFit: "contain", 37 + height: "var(--empty-state-image-size)", 38 + width: "var(--empty-state-image-size)", 39 39 }, 40 40 title: { 41 + margin: 0, 41 42 fontSize: { 42 43 ":is([data-empty-state-size='lg'] *)": fontSize["2xl"], 43 44 ":is([data-empty-state-size='md'] *)": fontSize["xl"], 44 45 ":is([data-empty-state-size='sm'] *)": fontSize["lg"], 45 46 }, 46 47 fontWeight: fontWeight["semibold"], 47 - margin: 0, 48 48 }, 49 49 description: { 50 + margin: 0, 50 51 fontSize: fontSize["sm"], 51 52 fontWeight: fontWeight["normal"], 52 - margin: 0, 53 53 maxWidth: { 54 54 ":is([data-empty-state-size=lg])": "480px", 55 55 ":is([data-empty-state-size=md])": "400px", ··· 57 57 }, 58 58 }, 59 59 actions: { 60 - display: "flex", 61 - flexDirection: "row", 62 60 gap: spacing["2"], 63 61 alignItems: "center", 64 - justifyContent: "center", 62 + display: "flex", 63 + flexDirection: "row", 65 64 flexWrap: "wrap", 65 + justifyContent: "center", 66 66 }, 67 67 }); 68 68 ··· 117 117 ...props 118 118 }: EmptyStateImageProps) => { 119 119 if (src) { 120 - return ( 121 - <img 122 - src={src} 123 - alt={alt} 124 - {...stylex.props(styles.image, style)} 125 - /> 126 - ); 120 + return <img src={src} alt={alt} {...stylex.props(styles.image, style)} />; 127 121 } 128 122 129 123 return ( ··· 136 130 export interface EmptyStateTitleProps 137 131 extends StyleXComponentProps<React.ComponentProps<"h2">> {} 138 132 139 - export const EmptyStateTitle = ({ 140 - style, 141 - ...props 142 - }: EmptyStateTitleProps) => { 143 - return ( 144 - <h2 145 - {...props} 146 - {...stylex.props(styles.title, ui.text, style)} 147 - /> 148 - ); 133 + export const EmptyStateTitle = ({ style, ...props }: EmptyStateTitleProps) => { 134 + return <div {...props} {...stylex.props(styles.title, ui.text, style)} />; 149 135 }; 150 136 151 137 export interface EmptyStateDescriptionProps ··· 156 142 ...props 157 143 }: EmptyStateDescriptionProps) => { 158 144 return ( 159 - <p 160 - {...props} 161 - {...stylex.props(styles.description, ui.textDim, style)} 162 - /> 145 + <p {...props} {...stylex.props(styles.description, ui.textDim, style)} /> 163 146 ); 164 147 }; 165 148 ··· 170 153 style, 171 154 ...props 172 155 }: EmptyStateActionsProps) => { 173 - return ( 174 - <div 175 - {...props} 176 - {...stylex.props(styles.actions, style)} 177 - /> 178 - ); 156 + return <div {...props} {...stylex.props(styles.actions, style)} />; 179 157 }; 180 -
+1 -1
packages/hip-ui/src/components/file-drop-zone/index.tsx
··· 9 9 DropZoneProps, 10 10 } from "react-aria-components"; 11 11 12 + import { primaryColor, uiColor } from "../theme/color.stylex"; 12 13 import { radius } from "../theme/radius.stylex"; 13 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 14 14 import { spacing } from "../theme/spacing.stylex"; 15 15 16 16 async function getFiles(items: DropItem[]): Promise<File[]> {
+1 -1
packages/hip-ui/src/components/form/index.tsx
··· 11 11 12 12 const styles = stylex.create({ 13 13 form: { 14 + gap: spacing["4"], 14 15 display: "flex", 15 16 flexDirection: "column", 16 - gap: spacing["4"], 17 17 }, 18 18 }); 19 19
+1 -1
packages/hip-ui/src/components/hover-card/index.tsx
··· 23 23 shadow: shadow.md, 24 24 }, 25 25 content: { 26 + position: "relative", 26 27 paddingBottom: spacing["2"], 27 28 paddingLeft: spacing["2"], 28 29 paddingRight: spacing["2"], 29 30 paddingTop: spacing["2"], 30 - position: "relative", 31 31 }, 32 32 }); 33 33
+4 -4
packages/hip-ui/src/components/icon-button/index.tsx
··· 13 13 const styles = stylex.create({ 14 14 button: { 15 15 height: { 16 - ":is([data-size=sm])": spacing["7"], 17 - ":is([data-size=md])": spacing["8"], 18 16 ":is([data-size=lg])": spacing["10"], 17 + ":is([data-size=md])": spacing["8"], 18 + ":is([data-size=sm])": spacing["7"], 19 19 }, 20 20 width: { 21 - ":is([data-size=sm])": spacing["7"], 22 - ":is([data-size=md])": spacing["8"], 23 21 ":is([data-size=lg])": spacing["10"], 22 + ":is([data-size=md])": spacing["8"], 23 + ":is([data-size=sm])": spacing["7"], 24 24 }, 25 25 }, 26 26 });
+1 -1
packages/hip-ui/src/components/kbd/index.tsx
··· 1 1 import { isMac as getIsMac } from "@react-aria/utils"; 2 2 import * as stylex from "@stylexjs/stylex"; 3 3 4 + import { uiColor } from "../theme/color.stylex"; 4 5 import { radius } from "../theme/radius.stylex"; 5 - import { uiColor } from "../theme/semantic-color.stylex"; 6 6 import { spacing } from "../theme/spacing.stylex"; 7 7 import { StyleXComponentProps } from "../theme/types"; 8 8 import { fontFamily, fontSize, tracking } from "../theme/typography.stylex";
+4 -4
packages/hip-ui/src/components/label/index.tsx
··· 20 20 fontWeight: fontWeight["semibold"], 21 21 22 22 fontSize: { 23 - ":is([data-size=sm])": fontSize["xs"], 24 - ":is([data-size=md])": fontSize["sm"], 25 23 ":is([data-size=lg])": fontSize["base"], 24 + ":is([data-size=md])": fontSize["sm"], 25 + ":is([data-size=sm])": fontSize["xs"], 26 26 }, 27 27 lineHeight: { 28 - ":is([data-size=sm])": lineHeight["xs"], 29 - ":is([data-size=md])": lineHeight["sm"], 30 28 ":is([data-size=lg])": lineHeight["base"], 29 + ":is([data-size=md])": lineHeight["sm"], 30 + ":is([data-size=sm])": lineHeight["xs"], 31 31 }, 32 32 }, 33 33 description: {
+6 -6
packages/hip-ui/src/components/link/index.tsx
··· 5 5 Link as AriaLink, 6 6 } from "react-aria-components"; 7 7 8 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 8 + import { primaryColor, uiColor } from "../theme/color.stylex"; 9 9 import { spacing } from "../theme/spacing.stylex"; 10 10 import { StyleXComponentProps } from "../theme/types"; 11 11 import { fontFamily, fontWeight } from "../theme/typography.stylex"; ··· 13 13 14 14 const styles = stylex.create({ 15 15 link: { 16 + textDecoration: { 17 + default: "none", 18 + ":is([data-breadcrumb] *)": "none", 19 + ":is([data-hovered])": "underline", 20 + }, 16 21 color: { 17 22 default: primaryColor.text2, 18 23 ":is([data-breadcrumb] *)": uiColor.text1, ··· 24 29 }, 25 30 fontFamily: fontFamily["sans"], 26 31 fontWeight: fontWeight["normal"], 27 - textDecoration: { 28 - default: "none", 29 - ":is([data-hovered])": "underline", 30 - ":is([data-breadcrumb] *)": "none", 31 - }, 32 32 textUnderlineOffset: spacing["1"], 33 33 }, 34 34 });
+2 -2
packages/hip-ui/src/components/listbox/index.tsx
··· 36 36 paddingTop: spacing["1"], 37 37 38 38 height: { 39 - ":is([data-size=sm])": spacing["7"], 40 - ":is([data-size=md])": spacing["7"], 41 39 ":is([data-size=lg])": spacing["9"], 40 + ":is([data-size=md])": spacing["7"], 41 + ":is([data-size=sm])": spacing["7"], 42 42 }, 43 43 }, 44 44 separator: {
+1 -1
packages/hip-ui/src/components/menu/index.tsx
··· 38 38 }, 39 39 menu: { 40 40 outline: "none", 41 - paddingTop: spacing["0.5"], 42 41 paddingBottom: spacing["0.5"], 42 + paddingTop: spacing["0.5"], 43 43 }, 44 44 }); 45 45
+1 -1
packages/hip-ui/src/components/menubar/index.tsx
··· 16 16 import { SizeContext } from "../context"; 17 17 import { Flex } from "../flex"; 18 18 import { animationDuration } from "../theme/animations.stylex"; 19 + import { uiColor } from "../theme/color.stylex"; 19 20 import { radius } from "../theme/radius.stylex"; 20 - import { uiColor } from "../theme/semantic-color.stylex"; 21 21 import { spacing } from "../theme/spacing.stylex"; 22 22 import { Size, StyleXComponentProps } from "../theme/types"; 23 23 import { fontSize } from "../theme/typography.stylex";
-1
packages/hip-ui/src/components/menubar/menubar-config.ts
··· 15 15 "react-aria-components": "^1.13.0", 16 16 }, 17 17 }; 18 -
+2 -2
packages/hip-ui/src/components/meter/index.tsx
··· 7 7 import { SizeContext } from "../context"; 8 8 import { Label } from "../label"; 9 9 import { animationDuration } from "../theme/animations.stylex"; 10 - import { radius } from "../theme/radius.stylex"; 11 10 import { 12 11 criticalColor, 13 12 primaryColor, 14 13 successColor, 15 14 uiColor, 16 15 warningColor, 17 - } from "../theme/semantic-color.stylex"; 16 + } from "../theme/color.stylex"; 17 + import { radius } from "../theme/radius.stylex"; 18 18 import { spacing } from "../theme/spacing.stylex"; 19 19 import { MeterVariant, Size, StyleXComponentProps } from "../theme/types"; 20 20 import { fontSize, lineHeight } from "../theme/typography.stylex";
+2 -1
packages/hip-ui/src/components/number-field/index.tsx
··· 18 18 import { SizeContext } from "../context"; 19 19 import { Description, FieldErrorMessage, Label } from "../label"; 20 20 import { SuffixIcon } from "../suffix-icon"; 21 - import { ui, uiColor } from "../theme/semantic-color.stylex"; 21 + import { uiColor } from "../theme/color.stylex"; 22 + import { ui } from "../theme/semantic-color.stylex"; 22 23 import { spacing } from "../theme/spacing.stylex"; 23 24 import { 24 25 InputVariant,
+1 -1
packages/hip-ui/src/components/pagination/index.tsx
··· 18 18 19 19 const styles = stylex.create({ 20 20 list: { 21 + gap: spacing["4"], 21 22 alignItems: "center", 22 23 containerType: "inline-size", 23 24 display: "flex", 24 - gap: spacing["4"], 25 25 }, 26 26 pages: { 27 27 flexGrow: 1,
+5 -5
packages/hip-ui/src/components/popover/index.tsx
··· 10 10 Dialog, 11 11 } from "react-aria-components"; 12 12 13 - import { uiColor } from "../theme/semantic-color.stylex"; 13 + import { uiColor } from "../theme/color.stylex"; 14 14 import { spacing } from "../theme/spacing.stylex"; 15 15 import { StyleXComponentProps } from "../theme/types"; 16 16 import { usePopoverStyles } from "../theme/usePopoverStyles"; ··· 26 26 }, 27 27 content: { 28 28 boxShadow: "none", 29 + position: "relative", 29 30 paddingBottom: spacing["2"], 30 31 paddingLeft: spacing["2"], 31 32 paddingRight: spacing["2"], 32 33 paddingTop: spacing["2"], 33 - position: "relative", 34 34 }, 35 35 caret: {}, 36 36 arrow: { 37 37 backgroundColor: uiColor.bgSubtle, 38 - height: spacing["2"], 39 38 transform: { 40 39 [":is([data-placement=bottom] *)"]: "rotate(180deg)", 41 - [":is([data-placement=top] *)"]: "tranuiColorY(-50%) rotate(-45deg)", 42 40 [":is([data-placement=left] *)"]: "rotate(90deg)", 43 41 [":is([data-placement=right] *)"]: "rotate(-90deg)", 42 + [":is([data-placement=top] *)"]: "tranuiColorY(-50%) rotate(-45deg)", 44 43 }, 44 + zIndex: 0, 45 + height: spacing["2"], 45 46 width: spacing["2"], 46 - zIndex: 0, 47 47 }, 48 48 }); 49 49 interface PopoverProps
+1 -1
packages/hip-ui/src/components/progress-bar/index.tsx
··· 7 7 import { SizeContext } from "../context"; 8 8 import { Label } from "../label"; 9 9 import { animationDuration } from "../theme/animations.stylex"; 10 + import { primaryColor, uiColor } from "../theme/color.stylex"; 10 11 import { radius } from "../theme/radius.stylex"; 11 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 12 12 import { spacing } from "../theme/spacing.stylex"; 13 13 import { Size, StyleXComponentProps } from "../theme/types"; 14 14 import { fontSize, lineHeight } from "../theme/typography.stylex";
+11 -11
packages/hip-ui/src/components/progress-circle/index.tsx
··· 10 10 import { SizeContext } from "../context"; 11 11 import { Label } from "../label"; 12 12 import { animationDuration } from "../theme/animations.stylex"; 13 + import { primaryColor, uiColor } from "../theme/color.stylex"; 13 14 import { radius } from "../theme/radius.stylex"; 14 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 15 15 import { spacing } from "../theme/spacing.stylex"; 16 16 17 17 const IndeterminateFillAnimation = stylex.keyframes({ ··· 25 25 26 26 const styles = stylex.create({ 27 27 wrapper: { 28 + gap: spacing["2"], 28 29 alignItems: "center", 29 30 boxSizing: "border-box", 30 31 display: "flex", 31 32 flexDirection: "column", 32 - gap: spacing["2"], 33 33 }, 34 34 circleWrapper: { 35 35 justifyContent: "center", ··· 37 37 38 38 "--progress-border-width": spacing["1"], 39 39 "--progress-size": { 40 + ":is([data-size=lg] *)": spacing["10"], 41 + ":is([data-size=md] *)": spacing["8"], 40 42 ":is([data-size=sm] *)": spacing["4"], 41 - ":is([data-size=md] *)": spacing["8"], 42 - ":is([data-size=lg] *)": spacing["10"], 43 43 }, 44 44 }, 45 45 track: { ··· 52 52 width: "var(--progress-size)", 53 53 }, 54 54 fills: { 55 + position: "absolute", 55 56 height: "100%", 56 57 left: 0, 57 - position: "absolute", 58 58 top: 0, 59 59 width: "100%", 60 60 }, 61 61 fillMask: { 62 - boxSizing: "border-box", 63 - height: "100%", 64 62 overflow: "hidden", 63 + boxSizing: "border-box", 65 64 position: "absolute", 66 65 transformOrigin: "100%", 66 + height: "100%", 67 67 width: "50%", 68 68 }, 69 69 fillMask1: { ··· 73 73 transform: "rotate(180deg)", 74 74 }, 75 75 fillSubmask: { 76 + overflow: "hidden", 76 77 boxSizing: "border-box", 77 - height: "100%", 78 - overflow: "hidden", 79 78 transformOrigin: "100%", 80 79 transitionDuration: animationDuration.default, 81 80 transitionProperty: "transform", 82 81 transitionTimingFunction: "linear", 82 + height: "100%", 83 83 width: "100%", 84 84 }, 85 85 fill: { ··· 92 92 width: "var(--progress-size)", 93 93 }, 94 94 check: { 95 - left: "50%", 96 95 position: "absolute", 97 - top: "50%", 98 96 transform: "translate(-50%, -50%)", 97 + left: "50%", 98 + top: "50%", 99 99 }, 100 100 completed: { 101 101 backgroundColor: primaryColor.solid1,
-1
packages/hip-ui/src/components/progress-circle/progress-circle-config.ts
··· 14 14 "react-aria-components": "^1.13.0", 15 15 }, 16 16 }; 17 -
+1 -1
packages/hip-ui/src/components/range-calendar/index.tsx
··· 29 29 30 30 const styles = stylex.create({ 31 31 root: { 32 + gap: spacing["3"], 32 33 display: "flex", 33 34 flexDirection: "column", 34 - gap: spacing["3"], 35 35 }, 36 36 header: { 37 37 alignItems: "center",
+1 -1
packages/hip-ui/src/components/segmented-control/index.tsx
··· 12 12 13 13 import { SizeContext } from "../context"; 14 14 import { animationDuration } from "../theme/animations-duration.stylex"; 15 + import { uiColor } from "../theme/color.stylex"; 15 16 import { radius } from "../theme/radius.stylex"; 16 - import { uiColor } from "../theme/semantic-color.stylex"; 17 17 import { shadow } from "../theme/shadow.stylex"; 18 18 import { spacing } from "../theme/spacing.stylex"; 19 19 import { Size, StyleXComponentProps } from "../theme/types";
+3 -3
packages/hip-ui/src/components/separator/index.tsx
··· 4 4 Separator as AriaSeparator, 5 5 } from "react-aria-components"; 6 6 7 - import { uiColor } from "../theme/semantic-color.stylex"; 7 + import { uiColor } from "../theme/color.stylex"; 8 8 import { StyleXComponentProps } from "../theme/types"; 9 9 10 10 const styles = stylex.create({ 11 11 separator: { 12 - backgroundColor: uiColor.border2, 12 + margin: 0, 13 13 borderWidth: 0, 14 + backgroundColor: uiColor.border2, 14 15 height: { 15 16 default: "1px", 16 17 ":is([aria-orientation=vertical])": "100%", 17 18 }, 18 - margin: 0, 19 19 width: { 20 20 default: "100%", 21 21 ":is([aria-orientation=vertical])": "1px",
+2 -2
packages/hip-ui/src/components/sidebar/index.tsx
··· 1 1 import { useLayoutEffect } from "@react-aria/utils"; 2 2 import * as stylex from "@stylexjs/stylex"; 3 3 import { ChevronRight } from "lucide-react"; 4 - import { createContext, use, useEffect, useId, useMemo } from "react"; 4 + import { createContext, use, useId, useMemo } from "react"; 5 5 import { mergeProps, useHover, usePress } from "react-aria"; 6 6 import { 7 7 Button, ··· 12 12 13 13 import { Flex } from "../flex"; 14 14 import { animationDuration } from "../theme/animations.stylex"; 15 + import { primaryColor, uiColor } from "../theme/color.stylex"; 15 16 import { radius } from "../theme/radius.stylex"; 16 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 17 17 import { spacing } from "../theme/spacing.stylex"; 18 18 import { StyleXComponentProps } from "../theme/types"; 19 19 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
+1 -1
packages/hip-ui/src/components/skeleton/index.tsx
··· 2 2 3 3 import * as stylex from "@stylexjs/stylex"; 4 4 5 + import { uiColor } from "../theme/color.stylex"; 5 6 import { radius } from "../theme/radius.stylex"; 6 - import { uiColor } from "../theme/semantic-color.stylex"; 7 7 import { shadow } from "../theme/shadow.stylex"; 8 8 import { spacing } from "../theme/spacing.stylex"; 9 9 import { Size, StyleXComponentProps } from "../theme/types";
-1
packages/hip-ui/src/components/skeleton/skeleton-config.ts
··· 10 10 "../theme/types.ts", 11 11 ], 12 12 }; 13 -
+27 -27
packages/hip-ui/src/components/slider/index.tsx
··· 9 9 } from "react-aria-components"; 10 10 11 11 import { Label } from "../label"; 12 + import { primaryColor, uiColor } from "../theme/color.stylex"; 12 13 import { radius } from "../theme/radius.stylex"; 13 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 14 14 import { shadow } from "../theme/shadow.stylex"; 15 15 import { spacing } from "../theme/spacing.stylex"; 16 16 import { StyleXComponentProps } from "../theme/types"; ··· 18 18 19 19 const styles = stylex.create({ 20 20 wrapper: { 21 + gap: { 22 + ":is([data-orientation=vertical])": spacing["2"], 23 + }, 24 + gridTemplateAreas: "'label value-label' 'track track'", 21 25 alignItems: { 22 26 ":is([data-orientation=vertical])": "center", 23 27 }, ··· 28 32 flexDirection: { 29 33 ":is([data-orientation=vertical])": "column", 30 34 }, 31 - gap: { 32 - ":is([data-orientation=vertical])": spacing["2"], 33 - }, 34 - gridTemplateAreas: "'label value-label' 'track track'", 35 35 }, 36 36 track: { 37 + gridArea: "track", 37 38 flexGrow: { 38 39 ":is([data-orientation=vertical] *)": 1, 39 40 }, 40 - gridArea: "track", 41 + opacity: { 42 + ":is([data-disabled=true] *)": 0.5, 43 + }, 44 + position: "relative", 41 45 height: { 42 46 ":is([data-orientation=horizontal] *)": spacing["8"], 43 47 ":is([data-orientation=horizontal] *)::before": spacing["1"], 44 48 ":is([data-orientation=vertical] *)": "100%", 45 49 ":is([data-orientation=vertical] *)::before": "100%", 46 50 }, 47 - opacity: { 48 - ":is([data-disabled=true] *)": 0.5, 49 - }, 50 - position: "relative", 51 51 width: { 52 52 ":is([data-orientation=horizontal] *)": "100%", 53 53 ":is([data-orientation=horizontal] *)::before": "100%", ··· 55 55 ":is([data-orientation=vertical] *)::before": spacing["1"], 56 56 }, 57 57 58 + transform: { 59 + ":is([data-orientation=horizontal] *)::before": "translateY(-50%)", 60 + ":is([data-orientation=vertical] *)::before": "translateX(-50%)", 61 + }, 58 62 bottom: { 59 63 ":is([data-orientation=vertical] *)::before": 0, 60 64 }, ··· 69 73 ":is([data-orientation=horizontal] *)::before": "50%", 70 74 ":is([data-orientation=vertical] *)::before": 0, 71 75 }, 72 - transform: { 73 - ":is([data-orientation=horizontal] *)::before": "translateY(-50%)", 74 - ":is([data-orientation=vertical] *)::before": "translateX(-50%)", 75 - }, 76 76 "::before": { 77 + borderRadius: radius.full, 77 78 backgroundColor: uiColor.border1, 78 - borderRadius: radius.full, 79 79 content: "''", 80 80 position: "absolute", 81 81 }, 82 82 }, 83 83 thumb: { 84 - backgroundColor: { 85 - default: uiColor.component1, 86 - ":hover": uiColor.component2, 87 - ":is([data-dragging=true]):is([data-dragging=true])": uiColor.component3, 88 - }, 89 84 borderColor: uiColor.border1, 90 85 borderRadius: radius.full, 91 86 borderStyle: "solid", 92 87 borderWidth: 1, 88 + backgroundColor: { 89 + default: uiColor.component1, 90 + ":is([data-dragging=true]):is([data-dragging=true])": uiColor.component3, 91 + ":hover": uiColor.component2, 92 + }, 93 93 boxShadow: shadow.md, 94 94 content: "''", 95 95 forcedColorAdjust: "none", ··· 103 103 width: spacing["4"], 104 104 }, 105 105 trackInner: { 106 + borderRadius: radius.full, 106 107 backgroundColor: { 107 108 default: primaryColor.solid1, 108 109 ":is([data-disabled=true] *)": uiColor.border3, 109 110 }, 110 - borderRadius: radius.full, 111 + position: "absolute", 112 + transform: { 113 + ":is([data-orientation=horizontal] *)": "translateY(-50%)", 114 + ":is([data-orientation=vertical] *)": "translateX(-50%)", 115 + }, 111 116 height: { 112 117 ":is([data-orientation=horizontal] *)": spacing["1"], 113 118 ":is([data-orientation=vertical] *)": "100%", ··· 115 120 left: { 116 121 ":is([data-orientation=vertical] *)": "50%", 117 122 }, 118 - position: "absolute", 119 123 top: { 120 124 ":is([data-orientation=horizontal] *)": "50%", 121 - }, 122 - transform: { 123 - ":is([data-orientation=horizontal] *)": "translateY(-50%)", 124 - ":is([data-orientation=vertical] *)": "translateX(-50%)", 125 125 }, 126 126 width: { 127 127 ":is([data-orientation=horizontal] *)": "100%", ··· 163 163 }, 164 164 }, 165 165 valueLabel: { 166 + gridArea: "value-label", 166 167 color: uiColor.text1, 167 168 fontSize: fontSize["sm"], 168 169 fontVariantNumeric: "tabular-nums", 169 - gridArea: "value-label", 170 170 justifySelf: "flex-end", 171 171 lineHeight: lineHeight["sm"], 172 172 },
+1 -1
packages/hip-ui/src/components/switch/index.tsx
··· 5 5 } from "react-aria-components"; 6 6 7 7 import { animationDuration } from "../theme/animations.stylex"; 8 + import { primaryColor, uiColor } from "../theme/color.stylex"; 8 9 import { radius } from "../theme/radius.stylex"; 9 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 10 10 import { shadow } from "../theme/shadow.stylex"; 11 11 import { spacing } from "../theme/spacing.stylex"; 12 12 import { StyleXComponentProps } from "../theme/types";
+21 -21
packages/hip-ui/src/components/table/index.tsx
··· 25 25 import { SizeContext } from "../context"; 26 26 import { Flex } from "../flex"; 27 27 import { IconButton } from "../icon-button"; 28 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 28 + import { primaryColor, uiColor } from "../theme/color.stylex"; 29 29 import { spacing } from "../theme/spacing.stylex"; 30 30 import { Size, StyleXComponentProps } from "../theme/types"; 31 31 import { LabelText } from "../typography"; ··· 42 42 }, 43 43 }, 44 44 column: { 45 + padding: 0, 45 46 borderBottomColor: uiColor.border2, 46 47 borderBottomStyle: "solid", 47 48 borderBottomWidth: 1, 48 - padding: 0, 49 49 }, 50 50 columnHeader: { 51 51 alignItems: "center", ··· 59 59 }, 60 60 tableBody: {}, 61 61 cell: { 62 + overflow: "auto", 62 63 borderBottomColor: uiColor.border2, 63 64 borderBottomStyle: "solid", 64 65 borderBottomWidth: { 65 66 default: 1, 66 67 ":is([role=row]:last-child *)": 0, 67 68 }, 68 - overflow: "auto", 69 69 }, 70 70 cellContent: { 71 71 boxSizing: "border-box", 72 + opacity: { 73 + default: 1, 74 + ":is([aria-disabled=true] *)": 0.5, 75 + }, 76 + textAlign: "left", 72 77 minHeight: { 73 78 default: spacing["8"], 74 - ":is([data-table-size=md] *)": spacing["10"], 75 79 ":is([data-table-size=lg] *)": spacing["12"], 76 - }, 77 - opacity: { 78 - default: 1, 79 - ":is([aria-disabled=true] *)": 0.5, 80 + ":is([data-table-size=md] *)": spacing["10"], 80 81 }, 81 82 paddingBottom: { 82 83 default: spacing["1"], 83 - ":is([data-table-size=md] *)": spacing["2"], 84 84 ":is([data-table-size=lg] *)": spacing["3"], 85 + ":is([data-table-size=md] *)": spacing["2"], 85 86 }, 86 87 paddingLeft: { 87 88 default: spacing["2"], 88 - ":is([data-table-size=md] *:not(:first-child))": spacing["3"], 89 89 ":is([data-table-size=lg] *:not(:first-child))": spacing["4"], 90 + ":is([data-table-size=md] *:not(:first-child))": spacing["3"], 90 91 }, 91 92 paddingRight: { 92 93 default: spacing["2"], 93 - ":is([data-table-size=md] *:not(:last-child))": spacing["3"], 94 94 ":is([data-table-size=lg] *:not(:last-child))": spacing["4"], 95 + ":is([data-table-size=md] *:not(:last-child))": spacing["3"], 95 96 }, 96 97 paddingTop: { 97 98 default: spacing["1"], 99 + ":is([data-table-size=lg] *)": spacing["3"], 98 100 ":is([data-table-size=md] *)": spacing["2"], 99 - ":is([data-table-size=lg] *)": spacing["3"], 100 101 }, 101 - textAlign: "left", 102 102 }, 103 103 textEllipsis: { 104 104 overflow: "hidden", ··· 115 115 flexBasis: "auto", 116 116 flexGrow: 0, 117 117 flexShrink: 0, 118 + position: "relative", 119 + touchAction: "none", 118 120 marginBottom: { 119 121 default: `calc(${spacing["1"]} * -1)`, 122 + ":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`, 120 123 ":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`, 121 - ":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`, 122 124 }, 123 125 marginTop: { 124 126 default: `calc(${spacing["1"]} * -1)`, 125 - ":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`, 126 127 ":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`, 128 + ":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`, 127 129 }, 128 130 minHeight: { 129 131 default: spacing["8"], 130 - ":is([data-table-size=md] *)": spacing["10"], 131 132 ":is([data-table-size=lg] *)": spacing["12"], 133 + ":is([data-table-size=md] *)": spacing["10"], 132 134 }, 133 - position: "relative", 134 - touchAction: "none", 135 135 width: spacing["3"], 136 136 }, 137 137 resizerLine: { ··· 140 140 ":is([data-hovered=true] *)": uiColor.border2, 141 141 ":is([data-resizing=true] *)": uiColor.border3, 142 142 }, 143 - bottom: 0, 144 143 display: "block", 144 + position: "absolute", 145 + transform: "translateX(-50%)", 146 + bottom: 0, 145 147 left: "50%", 146 - position: "absolute", 147 148 top: 0, 148 - transform: "translateX(-50%)", 149 149 width: spacing["0.5"], 150 150 }, 151 151 dropIndicator: {
+1 -1
packages/hip-ui/src/components/tabs/index.tsx
··· 16 16 17 17 import { SizeContext } from "../context"; 18 18 import { animationDuration } from "../theme/animations.stylex"; 19 + import { primaryColor, uiColor } from "../theme/color.stylex"; 19 20 import { radius } from "../theme/radius.stylex"; 20 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 21 21 import { spacing } from "../theme/spacing.stylex"; 22 22 import { Size, StyleXComponentProps } from "../theme/types"; 23 23 import { fontFamily, fontSize } from "../theme/typography.stylex";
+1 -1
packages/hip-ui/src/components/tag-group/index.tsx
··· 12 12 13 13 import { Description, ErrorMessage, Label } from "../label"; 14 14 import { animationDuration } from "../theme/animations.stylex"; 15 + import { primaryColor, uiColor } from "../theme/color.stylex"; 15 16 import { radius } from "../theme/radius.stylex"; 16 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 17 17 import { spacing } from "../theme/spacing.stylex"; 18 18 import { StyleXComponentProps } from "../theme/types"; 19 19 import { typeramp } from "../theme/typography.stylex";
+2 -1
packages/hip-ui/src/components/text-area/index.tsx
··· 11 11 12 12 import { SizeContext } from "../context"; 13 13 import { Description, FieldErrorMessage, Label } from "../label"; 14 + import { uiColor } from "../theme/color.stylex"; 14 15 import { radius } from "../theme/radius.stylex"; 15 - import { ui, uiColor } from "../theme/semantic-color.stylex"; 16 + import { ui } from "../theme/semantic-color.stylex"; 16 17 import { spacing } from "../theme/spacing.stylex"; 17 18 import { Size, StyleXComponentProps } from "../theme/types"; 18 19 import { lineHeight, fontSize, fontFamily } from "../theme/typography.stylex";
+103
packages/hip-ui/src/components/theme/color.stylex.tsx
··· 1 + import * as stylex from "@stylexjs/stylex"; 2 + 3 + import { green } from "./colors/green.stylex"; 4 + import { orange } from "./colors/orange.stylex"; 5 + import { red } from "./colors/red.stylex"; 6 + import { slate, slateInverted } from "./colors/slate.stylex"; 7 + import { yellow } from "./colors/yellow.stylex"; 8 + 9 + export const uiColor = stylex.defineVars({ 10 + bg: slate.bg, 11 + bgSubtle: slate.bgSubtle, 12 + component1: slate.component1, 13 + component2: slate.component2, 14 + component3: slate.component3, 15 + border1: slate.border1, 16 + border2: slate.border2, 17 + border3: slate.border3, 18 + solid1: slate.solid1, 19 + solid2: slate.solid2, 20 + text1: slate.text1, 21 + text2: slate.text2, 22 + textContrast: "white", 23 + }); 24 + 25 + export const uiInverted = stylex.defineVars({ 26 + bg: slateInverted.bg, 27 + bgSubtle: slateInverted.bgSubtle, 28 + component1: slateInverted.component1, 29 + component2: slateInverted.component2, 30 + component3: slateInverted.component3, 31 + border1: slateInverted.border1, 32 + border2: slateInverted.border2, 33 + border3: slateInverted.border3, 34 + solid1: slateInverted.solid1, 35 + solid2: slateInverted.solid2, 36 + text1: slateInverted.text1, 37 + text2: slateInverted.text2, 38 + textContrast: "white", 39 + }); 40 + 41 + export const primaryColor = stylex.defineVars({ 42 + bg: orange.bg, 43 + bgSubtle: orange.bgSubtle, 44 + component1: orange.component1, 45 + component2: orange.component2, 46 + component3: orange.component3, 47 + border1: orange.border1, 48 + border2: orange.border2, 49 + border3: orange.border3, 50 + solid1: orange.solid1, 51 + solid2: orange.solid2, 52 + text1: orange.text1, 53 + text2: orange.text2, 54 + textContrast: "white", 55 + }); 56 + 57 + export const criticalColor = stylex.defineVars({ 58 + bg: red.bg, 59 + bgSubtle: red.bgSubtle, 60 + component1: red.component1, 61 + component2: red.component2, 62 + component3: red.component3, 63 + border1: red.border1, 64 + border2: red.border2, 65 + border3: red.border3, 66 + solid1: red.solid1, 67 + solid2: red.solid2, 68 + text1: red.text1, 69 + text2: red.text2, 70 + textContrast: "white", 71 + }); 72 + 73 + export const warningColor = stylex.defineVars({ 74 + bg: yellow.bg, 75 + bgSubtle: yellow.bgSubtle, 76 + component1: yellow.component1, 77 + component2: yellow.component2, 78 + component3: yellow.component3, 79 + border1: yellow.border1, 80 + border2: yellow.border2, 81 + border3: yellow.border3, 82 + solid1: yellow.solid1, 83 + solid2: yellow.solid2, 84 + text1: yellow.text1, 85 + text2: yellow.text2, 86 + textContrast: "black", 87 + }); 88 + 89 + export const successColor = stylex.defineVars({ 90 + bg: green.bg, 91 + bgSubtle: green.bgSubtle, 92 + component1: green.component1, 93 + component2: green.component2, 94 + component3: green.component3, 95 + border1: green.border1, 96 + border2: green.border2, 97 + border3: green.border3, 98 + solid1: green.solid1, 99 + solid2: green.solid2, 100 + text1: green.text1, 101 + text2: green.text2, 102 + textContrast: "white", 103 + });
+32 -130
packages/hip-ui/src/components/theme/semantic-color.stylex.tsx
··· 1 - /* eslint-disable @stylexjs/valid-styles */ 2 - 3 1 import * as stylex from "@stylexjs/stylex"; 4 2 3 + import { animationDuration } from "./animations-duration.stylex"; 4 + import { 5 + criticalColor, 6 + primaryColor, 7 + successColor, 8 + uiColor, 9 + warningColor, 10 + } from "./color.stylex"; 5 11 import { green } from "./colors/green.stylex"; 6 - import { orange } from "./colors/orange.stylex"; 7 12 import { red } from "./colors/red.stylex"; 8 - import { slate, slateInverted } from "./colors/slate.stylex"; 9 13 import { yellow } from "./colors/yellow.stylex"; 10 14 import { fontFamily } from "./typography.stylex"; 11 15 12 - export const uiColor = stylex.defineVars({ 13 - bg: slate.bg, 14 - bgSubtle: slate.bgSubtle, 15 - component1: slate.component1, 16 - component2: slate.component2, 17 - component3: slate.component3, 18 - border1: slate.border1, 19 - border2: slate.border2, 20 - border3: slate.border3, 21 - solid1: slate.solid1, 22 - solid2: slate.solid2, 23 - text1: slate.text1, 24 - text2: slate.text2, 25 - textContrast: "white", 26 - }); 27 - 28 - export const uiInverted = stylex.defineVars({ 29 - bg: slateInverted.bg, 30 - bgSubtle: slateInverted.bgSubtle, 31 - component1: slateInverted.component1, 32 - component2: slateInverted.component2, 33 - component3: slateInverted.component3, 34 - border1: slateInverted.border1, 35 - border2: slateInverted.border2, 36 - border3: slateInverted.border3, 37 - solid1: slateInverted.solid1, 38 - solid2: slateInverted.solid2, 39 - text1: slateInverted.text1, 40 - text2: slateInverted.text2, 41 - textContrast: "white", 42 - }); 43 - 44 16 // eslint-disable-next-line @stylexjs/enforce-extension 45 17 export const ui = stylex.create({ 46 18 bg: { backgroundColor: uiColor.bg }, ··· 66 38 borderStyle: "solid", 67 39 borderWidth: 1, 68 40 69 - transitionDuration: "100ms", 41 + transitionDuration: animationDuration.fast, 70 42 transitionProperty: "background-color, border-color", 71 43 transitionTimingFunction: "ease-in-out", 72 44 }, ··· 83 55 ":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3, 84 56 ":disabled": "transparent", 85 57 }, 86 - transitionDuration: "100ms", 58 + transitionDuration: animationDuration.fast, 87 59 transitionProperty: "background-color, border-color", 88 60 transitionTimingFunction: "ease-in-out", 89 61 }, ··· 94 66 ":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3, 95 67 ":disabled": uiColor.component1, 96 68 }, 97 - transitionDuration: "100ms", 69 + transitionDuration: animationDuration.fast, 98 70 transitionProperty: "background-color, border-color", 99 71 transitionTimingFunction: "ease-in-out", 100 72 }, ··· 105 77 ":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3, 106 78 ":disabled": uiColor.component1, 107 79 }, 108 - transitionDuration: "100ms", 80 + transitionDuration: animationDuration.fast, 109 81 transitionProperty: "background-color, border-color", 110 82 transitionTimingFunction: "ease-in-out", 111 83 }, ··· 115 87 ":hover:not(:has(* button:hover)):not(:disabled)": uiColor.solid2, 116 88 ":disabled": uiColor.component1, 117 89 }, 118 - transitionDuration: "100ms", 90 + transitionDuration: animationDuration.fast, 119 91 transitionProperty: "background-color, border-color", 120 92 transitionTimingFunction: "ease-in-out", 121 93 }, 122 94 }); 123 95 124 96 // eslint-disable-next-line @stylexjs/enforce-extension 125 - export const primaryColor = stylex.defineVars({ 126 - bg: orange.bg, 127 - bgSubtle: orange.bgSubtle, 128 - component1: orange.component1, 129 - component2: orange.component2, 130 - component3: orange.component3, 131 - border1: orange.border1, 132 - border2: orange.border2, 133 - border3: orange.border3, 134 - solid1: orange.solid1, 135 - solid2: orange.solid2, 136 - text1: orange.text1, 137 - text2: orange.text2, 138 - textContrast: "white", 139 - }); 140 - 141 - // eslint-disable-next-line @stylexjs/enforce-extension 142 97 export const primary = stylex.create({ 143 98 bg: { backgroundColor: primaryColor.bg }, 144 99 bgSubtle: { backgroundColor: primaryColor.bgSubtle }, ··· 163 118 borderStyle: "solid", 164 119 borderWidth: 1, 165 120 166 - transitionDuration: "100ms", 121 + transitionDuration: animationDuration.fast, 167 122 transitionProperty: "background-color, border-color", 168 123 transitionTimingFunction: "ease-in-out", 169 124 }, ··· 182 137 primaryColor.component3, 183 138 ":disabled": primaryColor.component1, 184 139 }, 185 - transitionDuration: "100ms", 140 + transitionDuration: animationDuration.fast, 186 141 transitionProperty: "background-color, border-color", 187 142 transitionTimingFunction: "ease-in-out", 188 143 }, ··· 194 149 ":is(:active,[data-pressed=true])": primaryColor.component3, 195 150 ":disabled": primaryColor.component1, 196 151 }, 197 - transitionDuration: "100ms", 152 + transitionDuration: animationDuration.fast, 198 153 transitionProperty: "background-color, border-color", 199 154 transitionTimingFunction: "ease-in-out", 200 155 }, ··· 207 162 primaryColor.component3, 208 163 ":disabled": primaryColor.component1, 209 164 }, 210 - transitionDuration: "100ms", 165 + transitionDuration: animationDuration.fast, 211 166 transitionProperty: "background-color, border-color", 212 167 transitionTimingFunction: "ease-in-out", 213 168 }, ··· 217 172 ":hover:not(:has(* button:hover)):not(:disabled)": primaryColor.solid2, 218 173 ":disabled": primaryColor.component1, 219 174 }, 220 - transitionDuration: "100ms", 175 + transitionDuration: animationDuration.fast, 221 176 transitionProperty: "background-color, border-color", 222 177 transitionTimingFunction: "ease-in-out", 223 178 }, 224 179 }); 225 180 226 181 // eslint-disable-next-line @stylexjs/enforce-extension 227 - export const criticalColor = stylex.defineVars({ 228 - bg: red.bg, 229 - bgSubtle: red.bgSubtle, 230 - component1: red.component1, 231 - component2: red.component2, 232 - component3: red.component3, 233 - border1: red.border1, 234 - border2: red.border2, 235 - border3: red.border3, 236 - solid1: red.solid1, 237 - solid2: red.solid2, 238 - text1: red.text1, 239 - text2: red.text2, 240 - textContrast: "white", 241 - }); 242 - 243 - // eslint-disable-next-line @stylexjs/enforce-extension 244 182 export const critical = stylex.create({ 245 183 bg: { backgroundColor: criticalColor.bg }, 246 184 bgSubtle: { backgroundColor: criticalColor.bgSubtle }, ··· 264 202 }, 265 203 borderStyle: "solid", 266 204 borderWidth: 1, 267 - transitionDuration: "100ms", 205 + transitionDuration: animationDuration.fast, 268 206 transitionProperty: "background-color, border-color", 269 207 transitionTimingFunction: "ease-in-out", 270 208 }, ··· 283 221 criticalColor.component3, 284 222 ":disabled": criticalColor.component1, 285 223 }, 286 - transitionDuration: "100ms", 224 + transitionDuration: animationDuration.fast, 287 225 transitionProperty: "background-color, border-color", 288 226 transitionTimingFunction: "ease-in-out", 289 227 }, ··· 296 234 criticalColor.component3, 297 235 ":disabled": criticalColor.component1, 298 236 }, 299 - transitionDuration: "100ms", 237 + transitionDuration: animationDuration.fast, 300 238 transitionProperty: "background-color, border-color", 301 239 transitionTimingFunction: "ease-in-out", 302 240 }, ··· 309 247 criticalColor.component3, 310 248 ":disabled": criticalColor.component1, 311 249 }, 312 - transitionDuration: "100ms", 250 + transitionDuration: animationDuration.fast, 313 251 transitionProperty: "background-color, border-color", 314 252 transitionTimingFunction: "ease-in-out", 315 253 }, ··· 319 257 ":hover:not(:has(* button:hover)):not(:disabled)": criticalColor.solid2, 320 258 ":disabled": criticalColor.component1, 321 259 }, 322 - transitionDuration: "100ms", 260 + transitionDuration: animationDuration.fast, 323 261 transitionProperty: "background-color, border-color", 324 262 transitionTimingFunction: "ease-in-out", 325 263 }, 326 264 }); 327 265 328 266 // eslint-disable-next-line @stylexjs/enforce-extension 329 - export const warningColor = stylex.defineVars({ 330 - bg: yellow.bg, 331 - bgSubtle: yellow.bgSubtle, 332 - component1: yellow.component1, 333 - component2: yellow.component2, 334 - component3: yellow.component3, 335 - border1: yellow.border1, 336 - border2: yellow.border2, 337 - border3: yellow.border3, 338 - solid1: yellow.solid1, 339 - solid2: yellow.solid2, 340 - text1: yellow.text1, 341 - text2: yellow.text2, 342 - textContrast: "black", 343 - }); 344 - 345 - // eslint-disable-next-line @stylexjs/enforce-extension 346 267 export const warning = stylex.create({ 347 268 bg: { backgroundColor: warningColor.bg }, 348 269 bgSubtle: { backgroundColor: warningColor.bgSubtle }, ··· 380 301 warningColor.component3, 381 302 ":disabled": warningColor.component1, 382 303 }, 383 - transitionDuration: "100ms", 304 + transitionDuration: animationDuration.fast, 384 305 transitionProperty: "background-color, border-color", 385 306 transitionTimingFunction: "ease-in-out", 386 307 }, ··· 392 313 ":is(:active,[data-pressed=true]):not(:disabled)": yellow.component3, 393 314 ":disabled": warningColor.component1, 394 315 }, 395 - transitionDuration: "100ms", 316 + transitionDuration: animationDuration.fast, 396 317 transitionProperty: "background-color, border-color", 397 318 transitionTimingFunction: "ease-in-out", 398 319 }, ··· 405 326 warningColor.component3, 406 327 ":disabled": warningColor.component1, 407 328 }, 408 - transitionDuration: "100ms", 329 + transitionDuration: animationDuration.fast, 409 330 transitionProperty: "background-color, border-color", 410 331 transitionTimingFunction: "ease-in-out", 411 332 }, ··· 415 336 ":hover:not(:has(* button:hover)):not(:disabled)": warningColor.solid2, 416 337 ":disabled": warningColor.component1, 417 338 }, 418 - transitionDuration: "100ms", 339 + transitionDuration: animationDuration.fast, 419 340 transitionProperty: "background-color, border-color", 420 341 transitionTimingFunction: "ease-in-out", 421 342 }, 422 343 }); 423 344 424 345 // eslint-disable-next-line @stylexjs/enforce-extension 425 - export const successColor = stylex.defineVars({ 426 - bg: green.bg, 427 - bgSubtle: green.bgSubtle, 428 - component1: green.component1, 429 - component2: green.component2, 430 - component3: green.component3, 431 - border1: green.border1, 432 - border2: green.border2, 433 - border3: green.border3, 434 - solid1: green.solid1, 435 - solid2: green.solid2, 436 - text1: green.text1, 437 - text2: green.text2, 438 - textContrast: "white", 439 - }); 440 - 441 - // eslint-disable-next-line @stylexjs/enforce-extension 442 346 export const success = stylex.create({ 443 347 bg: { backgroundColor: successColor.bg }, 444 348 bgSubtle: { backgroundColor: successColor.bgSubtle }, ··· 462 366 }, 463 367 borderStyle: "solid", 464 368 borderWidth: 1, 465 - transitionDuration: "100ms", 369 + transitionDuration: animationDuration.fast, 466 370 transitionProperty: "background-color, border-color", 467 371 transitionTimingFunction: "ease-in-out", 468 372 }, ··· 481 385 successColor.component3, 482 386 ":disabled": successColor.component1, 483 387 }, 484 - transitionDuration: "100ms", 388 + transitionDuration: animationDuration.fast, 485 389 transitionProperty: "background-color, border-color", 486 390 transitionTimingFunction: "ease-in-out", 487 391 }, ··· 494 398 successColor.component3, 495 399 ":disabled": successColor.component1, 496 400 }, 497 - transitionDuration: "100ms", 401 + transitionDuration: animationDuration.fast, 498 402 transitionProperty: "background-color, border-color", 499 403 transitionTimingFunction: "ease-in-out", 500 404 }, ··· 507 411 successColor.component3, 508 412 ":disabled": successColor.component1, 509 413 }, 510 - transitionDuration: "100ms", 414 + transitionDuration: animationDuration.fast, 511 415 transitionProperty: "background-color, border-color", 512 416 transitionTimingFunction: "ease-in-out", 513 417 }, ··· 517 421 ":hover:not(:has(* button:hover)):not(:disabled)": successColor.solid2, 518 422 ":disabled": successColor.component1, 519 423 }, 520 - transitionDuration: "100ms", 424 + transitionDuration: animationDuration.fast, 521 425 transitionProperty: "background-color, border-color", 522 426 transitionTimingFunction: "ease-in-out", 523 427 }, 524 428 }); 525 - 526 - /* eslint-enable @stylexjs/valid-styles */
+2 -1
packages/hip-ui/src/components/theme/useButtonStyles.ts
··· 7 7 import { SizeContext } from "../context"; 8 8 import { Size, ButtonVariant } from "../theme/types"; 9 9 import { animationDuration } from "./animations.stylex"; 10 + import { uiColor } from "./color.stylex"; 10 11 import { radius } from "./radius.stylex"; 11 - import { critical, ui, primary, uiColor } from "./semantic-color.stylex"; 12 + import { critical, ui, primary } from "./semantic-color.stylex"; 12 13 import { shadow } from "./shadow.stylex"; 13 14 import { spacing } from "./spacing.stylex"; 14 15 import {
+1 -1
packages/hip-ui/src/components/theme/useCalendarStyles.ts
··· 8 8 import type { StyleXComponentProps } from "../theme/types"; 9 9 10 10 import { animationDuration } from "../theme/animations.stylex"; 11 + import { primaryColor, uiColor } from "../theme/color.stylex"; 11 12 import { radius } from "../theme/radius.stylex"; 12 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 13 13 import { spacing } from "../theme/spacing.stylex"; 14 14 import { fontSize, fontWeight } from "./typography.stylex"; 15 15
+3 -3
packages/hip-ui/src/components/theme/useInputStyles.ts
··· 4 4 import { SizeContext } from "../context"; 5 5 import { InputValidationState, InputVariant, Size } from "../theme/types"; 6 6 import { animationDuration } from "./animations-duration.stylex"; 7 - import { radius } from "./radius.stylex"; 8 7 import { 9 8 criticalColor, 10 9 successColor, 11 - ui, 12 10 uiColor, 13 11 warningColor, 14 - } from "./semantic-color.stylex"; 12 + } from "./color.stylex"; 13 + import { radius } from "./radius.stylex"; 14 + import { ui } from "./semantic-color.stylex"; 15 15 import { spacing } from "./spacing.stylex"; 16 16 import { lineHeight, fontSize } from "./typography.stylex"; 17 17
+1 -1
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
··· 11 11 typeramp, 12 12 } from "../theme/typography.stylex"; 13 13 import { animationDuration } from "./animations.stylex"; 14 - import { criticalColor, primaryColor, uiColor } from "./semantic-color.stylex"; 14 + import { criticalColor, primaryColor, uiColor } from "./color.stylex"; 15 15 16 16 const styles = stylex.create({ 17 17 item: {
+25 -25
packages/hip-ui/src/components/toast/Toast.tsx
··· 11 11 QueuedToast, 12 12 } from "react-aria-components"; 13 13 14 + import { Button } from "../button"; 14 15 import { IconButton } from "../icon-button"; 15 16 import { 16 17 criticalColor, 17 18 successColor, 18 19 uiColor, 19 20 warningColor, 20 - } from "../theme/semantic-color.stylex"; 21 + } from "../theme/color.stylex"; 21 22 import { spacing } from "../theme/spacing.stylex"; 22 23 import { StyleXComponentProps } from "../theme/types"; 23 24 import { lineHeight, typeramp } from "../theme/typography.stylex"; 25 + import { usePopoverStyles } from "../theme/usePopoverStyles"; 24 26 import { toasts, ToastContentType } from "./queue"; 25 - import { usePopoverStyles } from "../theme/usePopoverStyles"; 26 - import { Button } from "../button"; 27 27 28 28 const styles = stylex.create({ 29 29 region: { 30 - bottom: spacing["4"], 30 + gap: spacing["2"], 31 + outline: "none", 31 32 display: "flex", 32 33 flexDirection: "column-reverse", 33 - gap: spacing["2"], 34 - outline: "none", 35 34 position: "fixed", 35 + zIndex: 9999, 36 + bottom: spacing["4"], 36 37 right: spacing["4"], 37 - zIndex: 9999, 38 38 }, 39 39 toast: { 40 + gap: spacing["4"], 41 + alignItems: "center", 40 42 display: "flex", 41 43 flexDirection: "row", 42 - alignItems: "center", 43 44 justifyContent: "space-between", 44 - gap: spacing["4"], 45 + minWidth: spacing["60"], 46 + paddingBottom: spacing["3"], 45 47 paddingLeft: spacing["4"], 46 48 paddingRight: spacing["4"], 47 49 paddingTop: spacing["3"], 48 - paddingBottom: spacing["3"], 49 - minWidth: spacing["60"], 50 50 }, 51 51 content: { 52 - display: "flex", 53 52 flex: "1 1 auto", 54 - flexDirection: "column", 55 53 gap: spacing["2.5"], 54 + display: "flex", 55 + flexDirection: "column", 56 56 minWidth: 0, 57 57 }, 58 58 title: { 59 - fontWeight: 600, 60 - lineHeight: lineHeight["none"], 61 59 color: { 62 60 default: uiColor.text1, 63 61 ":is([data-variant=critical] *)": criticalColor.textContrast, 64 62 ":is([data-variant=success] *)": successColor.textContrast, 65 63 ":is([data-variant=warning] *)": warningColor.text2, 66 64 }, 65 + fontWeight: 600, 66 + lineHeight: lineHeight["none"], 67 67 }, 68 68 description: { 69 69 color: { ··· 74 74 }, 75 75 }, 76 76 icon: { 77 + alignItems: "center", 77 78 display: "flex", 78 - alignItems: "center", 79 + flexShrink: 0, 79 80 justifyContent: "center", 80 - flexShrink: 0, 81 81 82 82 ":is(*) svg": { 83 - flexShrink: 0, 84 - height: spacing["4"], 85 - pointerEvents: "none", 86 - width: spacing["4"], 87 83 color: { 88 84 ":is([data-variant=critical] *)": criticalColor.solid1, 89 85 ":is([data-variant=success] *)": successColor.solid1, 90 86 ":is([data-variant=warning] *)": warningColor.solid1, 91 87 }, 88 + flexShrink: 0, 89 + pointerEvents: "none", 90 + height: spacing["4"], 91 + width: spacing["4"], 92 92 }, 93 93 }, 94 94 critical: { 95 - backgroundColor: criticalColor.component1, 96 95 borderColor: criticalColor.border2, 96 + backgroundColor: criticalColor.component1, 97 97 color: criticalColor.text2, 98 98 }, 99 99 success: { 100 - backgroundColor: successColor.component1, 101 100 borderColor: successColor.border2, 101 + backgroundColor: successColor.component1, 102 102 color: successColor.text2, 103 103 }, 104 104 warning: { 105 - backgroundColor: warningColor.component1, 106 105 borderColor: warningColor.border2, 106 + backgroundColor: warningColor.component1, 107 107 color: warningColor.text2, 108 108 }, 109 109 }); ··· 123 123 toast.content.variant === "warning" && styles.warning, 124 124 )} 125 125 > 126 - {toast.content.icon && ( 126 + {Boolean(toast.content.icon) && ( 127 127 <div {...stylex.props(styles.icon)}>{toast.content.icon}</div> 128 128 )} 129 129 <ToastContent {...stylex.props(styles.content)}>
packages/hip-ui/src/components/toast/index.tsx packages/hip-ui/src/components/toast/index.ts
+2
packages/hip-ui/src/components/toast/queue.ts
··· 1 1 import { flushSync } from "react-dom"; 2 2 import { ToastQueue } from "react-stately"; 3 + 3 4 import { ButtonVariant, ToastVariant } from "../theme/types"; 4 5 5 6 export interface ToastContentType { ··· 19 20 wrapUpdate(fn) { 20 21 if ("startViewTransition" in document) { 21 22 document.startViewTransition(() => { 23 + // eslint-disable-next-line @eslint-react/dom/no-flush-sync 22 24 flushSync(fn); 23 25 }); 24 26 } else {
+1 -1
packages/hip-ui/src/components/toggle-button-group/index.tsx
··· 45 45 separate: (itemsPerRow?: number) => ({ 46 46 "--items-per-row": itemsPerRow, 47 47 "--toggle-button-group-gap": spacing["2"], 48 - flexWrap: "wrap", 49 48 gap: "var(--toggle-button-group-gap)", 49 + flexWrap: "wrap", 50 50 }), 51 51 }); 52 52
+7 -7
packages/hip-ui/src/components/toggle-button/index.tsx
··· 6 6 } from "react-aria-components"; 7 7 8 8 import { SizeContext } from "../context"; 9 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 9 + import { primaryColor, uiColor } from "../theme/color.stylex"; 10 10 import { spacing } from "../theme/spacing.stylex"; 11 11 import { ButtonVariant, Size, StyleXComponentProps } from "../theme/types"; 12 12 import { useButtonStyles } from "../theme/useButtonStyles"; ··· 21 21 color: "light-dark(white, black)", 22 22 }, 23 23 secondarySelected: { 24 - backgroundColor: { 24 + borderColor: { 25 25 default: uiColor.border1, 26 26 ":hover": uiColor.border2, 27 27 ":active": uiColor.border3, 28 28 }, 29 - borderColor: { 29 + backgroundColor: { 30 30 default: uiColor.border1, 31 31 ":hover": uiColor.border2, 32 32 ":active": uiColor.border3, 33 33 }, 34 34 }, 35 35 tertiarySelected: { 36 - backgroundColor: { 36 + borderColor: { 37 37 default: uiColor.border1, 38 38 ":hover": uiColor.border2, 39 39 ":active": uiColor.border3, 40 40 }, 41 - borderColor: { 41 + backgroundColor: { 42 42 default: uiColor.border1, 43 43 ":hover": uiColor.border2, 44 44 ":active": uiColor.border3, 45 45 }, 46 46 }, 47 47 outlineSelected: { 48 - backgroundColor: { 48 + borderColor: { 49 49 default: uiColor.border1, 50 50 ":hover": uiColor.border2, 51 51 ":active": uiColor.border3, 52 52 }, 53 - borderColor: { 53 + backgroundColor: { 54 54 default: uiColor.border1, 55 55 ":hover": uiColor.border2, 56 56 ":active": uiColor.border3,
+3 -3
packages/hip-ui/src/components/toolbar/index.tsx
··· 10 10 SeparatorProps as AriaSeparatorProps, 11 11 } from "react-aria-components"; 12 12 13 - import { uiColor } from "../theme/semantic-color.stylex"; 13 + import { uiColor } from "../theme/color.stylex"; 14 14 import { spacing } from "../theme/spacing.stylex"; 15 15 import { StyleXComponentProps } from "../theme/types"; 16 16 17 17 const styles = stylex.create({ 18 18 toolbar: { 19 + gap: spacing["1"], 19 20 display: "flex", 20 21 flexWrap: "wrap", 21 - gap: spacing["1"], 22 22 }, 23 23 horizontal: { 24 24 flexDirection: "row", ··· 30 30 display: "contents", 31 31 }, 32 32 separator: { 33 - backgroundColor: uiColor.border2, 34 33 borderWidth: 0, 34 + backgroundColor: uiColor.border2, 35 35 height: { 36 36 ":is([data-orientation=vertical] *)": "1px", 37 37 },
+1 -1
packages/hip-ui/src/components/tooltip/index.tsx
··· 10 10 } from "react-aria-components"; 11 11 12 12 import { animationDuration } from "../theme/animations.stylex"; 13 + import { uiInverted } from "../theme/color.stylex"; 13 14 import { radius } from "../theme/radius.stylex"; 14 - import { uiInverted } from "../theme/semantic-color.stylex"; 15 15 import { shadow } from "../theme/shadow.stylex"; 16 16 import { spacing } from "../theme/spacing.stylex"; 17 17 import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex";
+2 -1
packages/hip-ui/src/components/tree/index.tsx
··· 14 14 import { Checkbox } from "../checkbox"; 15 15 import { SizeContext } from "../context"; 16 16 import { animationDuration } from "../theme/animations.stylex"; 17 + import { primaryColor } from "../theme/color.stylex"; 17 18 import { radius } from "../theme/radius.stylex"; 18 - import { primaryColor, ui } from "../theme/semantic-color.stylex"; 19 + import { ui } from "../theme/semantic-color.stylex"; 19 20 import { spacing } from "../theme/spacing.stylex"; 20 21 import { Size, StyleXComponentProps } from "../theme/types"; 21 22 import { useListBoxItemStyles } from "../theme/useListBoxItemStyles";
+1 -1
packages/hip-ui/src/components/typography/text.tsx
··· 1 1 import * as stylex from "@stylexjs/stylex"; 2 2 3 - import { criticalColor, uiColor } from "../theme/semantic-color.stylex"; 3 + import { criticalColor, uiColor } from "../theme/color.stylex"; 4 4 import { TextVariant, ThemeKeys } from "../theme/types"; 5 5 import { 6 6 fontFamily,
+5 -5
packages/hip-ui/src/components/window-splitter/index.tsx
··· 10 10 type PanelResizerProps, 11 11 } from "@window-splitter/react"; 12 12 13 - import { primaryColor, uiColor } from "../theme/semantic-color.stylex"; 13 + import { primaryColor, uiColor } from "../theme/color.stylex"; 14 14 import { spacing } from "../theme/spacing.stylex"; 15 15 import { StyleXComponentProps } from "../theme/types"; 16 16 ··· 37 37 }, 38 38 position: "absolute", 39 39 40 + transform: { 41 + ":is([data-handle-orientation='horizontal'] *)": "translateX(-50%)", 42 + ":is([data-handle-orientation='vertical'] *)": "translateY(-50%)", 43 + }, 40 44 bottom: { ":is([data-handle-orientation='horizontal'] *)": 0 }, 41 45 left: { ":is([data-handle-orientation='vertical'] *)": 0 }, 42 46 right: { ":is([data-handle-orientation='vertical'] *)": 0 }, 43 47 top: { ":is([data-handle-orientation='horizontal'] *)": 0 }, 44 - transform: { 45 - ":is([data-handle-orientation='horizontal'] *)": "translateX(-50%)", 46 - ":is([data-handle-orientation='vertical'] *)": "translateY(-50%)", 47 - }, 48 48 49 49 height: { 50 50 ":is([data-handle-orientation='horizontal'] *)": "100%",
-1
packages/hip-ui/src/components/window-splitter/window-splitter-config.ts
··· 12 12 "@window-splitter/react": "^1.0.0", 13 13 }, 14 14 }; 15 -