A design system in a box.
hip-ui.tngl.io/docs/introduction
bugs
+938
-482
+337
-8
.specstory/history/2026-01-24_21-42Z-typography-text-utility-type.md
+337
-8
.specstory/history/2026-01-24_21-42Z-typography-text-utility-type.md
···
12
12
13
13
_**Agent (model composer-1, mode Agent)**_
14
14
15
+
15
16
Reviewing the file to extract the type into a utility type.
17
+
16
18
17
19
---
18
20
···
23
25
</tool-use>
24
26
25
27
---
28
+
26
29
27
30
Extracting the inline type into a utility type and updating the interface to use it.
28
31
32
+
29
33
---
30
34
31
35
<tool-use data-tool-type="write" data-tool-name="edit_file_v2">
···
37
41
</tool-use>
38
42
39
43
---
44
+
40
45
41
46
Converted the inline type into a utility type `ResponsiveWeight`. Checking for linter errors:
42
47
48
+
43
49
---
44
50
45
51
<tool-use data-tool-type="generic" data-tool-name="read_lints">
···
54
60
55
61
Lint errors for `packages/hip-ui/src/components/typography/text.tsx`
56
62
57
-
| Message | Range | Severity |
58
-
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------- |
63
+
64
+
| Message | Range | Severity |
65
+
|-------|-------|----------|
59
66
| Type '\{ default: "normal" \| "thin" \| "medium" \| "light" \| "bold" \| "extralight" \| "semibold" \| "extrabold" \| "black"; md: "normal" \| "thin" \| "medium" \| "light" \| "bold" \| "extralight" \| "semibold" \| "extrabold" \| "black"; lg: "normal" \| ... 7 more ... \| "black"; xl: "normal" \| ... 7 more ... \| "black"; \}' cannot be used as an index type. | 119:26-119:32 | DIAGNOSTIC_SEVERITY_ERROR |
60
-
| Unsafe argument of type error typed assigned to a parameter of type `StyleXArray<boolean \| CompiledStyles \| readonly [CompiledStyles, InlineStyles] \| null \| undefined>`. | 119:9-119:33 | DIAGNOSTIC_SEVERITY_ERROR |
67
+
| Unsafe argument of type error typed assigned to a parameter of type `StyleXArray<boolean \| CompiledStyles \| readonly [CompiledStyles, InlineStyles] \| null \| undefined>`. | 119:9-119:33 | DIAGNOSTIC_SEVERITY_ERROR |
68
+
61
69
62
70
</details>
63
71
</tool-use>
64
72
65
73
---
74
+
66
75
67
76
Checking how `weight` is used in the component to understand the linter errors:
68
77
78
+
69
79
---
70
80
71
81
<tool-use data-tool-type="read" data-tool-name="read_file_v2">
···
76
86
77
87
---
78
88
89
+
79
90
The type allows responsive weights, but the implementation doesn't handle them. Checking if this is a pre-existing issue or if the type should be simplified:
91
+
80
92
81
93
---
82
94
···
84
96
<details>
85
97
<summary>Tool use: **semantic_search_full**</summary>
86
98
99
+
87
100
Parameters:
88
101
89
102
```json
···
93
106
"explanation": ""
94
107
}
95
108
```
96
-
97
109
Result:
98
110
99
111
```json
···
5795
5807
]
5796
5808
}
5797
5809
```
5798
-
5799
5810
Status: **completed**
5811
+
5800
5812
5801
5813
</details>
5802
5814
</tool-use>
5803
5815
5804
5816
---
5817
+
5805
5818
5806
5819
Checking the current state of the file to ensure the `weight` prop is still in the interface:
5807
5820
5821
+
5808
5822
---
5809
5823
5810
5824
<tool-use data-tool-type="read" data-tool-name="read_file_v2">
···
5814
5828
</tool-use>
5815
5829
5816
5830
---
5831
+
5817
5832
5818
5833
Converted the inline type into a utility type `ResponsiveWeight`. The type is now defined once and can be reused.
5819
5834
···
5830
5845
---
5831
5846
5832
5847
_**Agent (model composer-1, mode Agent)**_
5848
+
5833
5849
5834
5850
Making `ResponsiveWeight` generic so it can be reused for other responsive properties.
5835
5851
5852
+
5836
5853
---
5837
5854
5838
5855
<tool-use data-tool-type="read" data-tool-name="read_file_v2">
···
5843
5860
5844
5861
---
5845
5862
5863
+
5846
5864
Making the type generic so it can be reused for other responsive properties:
5865
+
5847
5866
5848
5867
---
5849
5868
···
5857
5876
5858
5877
---
5859
5878
5879
+
5860
5880
Checking for linter errors:
5881
+
5861
5882
5862
5883
---
5863
5884
···
5873
5894
5874
5895
Lint errors for `packages/hip-ui/src/components/typography/text.tsx`
5875
5896
5876
-
| Message | Range | Severity |
5877
-
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------- |
5897
+
5898
+
| Message | Range | Severity |
5899
+
|-------|-------|----------|
5878
5900
| Type '\{ default: "normal" \| "thin" \| "medium" \| "light" \| "bold" \| "extralight" \| "semibold" \| "extrabold" \| "black"; md: "normal" \| "thin" \| "medium" \| "light" \| "bold" \| "extralight" \| "semibold" \| "extrabold" \| "black"; lg: "normal" \| ... 7 more ... \| "black"; xl: "normal" \| ... 7 more ... \| "black"; \}' cannot be used as an index type. | 119:26-119:32 | DIAGNOSTIC_SEVERITY_ERROR |
5879
-
| Unsafe argument of type error typed assigned to a parameter of type `StyleXArray<boolean \| CompiledStyles \| readonly [CompiledStyles, InlineStyles] \| null \| undefined>`. | 119:9-119:33 | DIAGNOSTIC_SEVERITY_ERROR |
5901
+
| Unsafe argument of type error typed assigned to a parameter of type `StyleXArray<boolean \| CompiledStyles \| readonly [CompiledStyles, InlineStyles] \| null \| undefined>`. | 119:9-119:33 | DIAGNOSTIC_SEVERITY_ERROR |
5902
+
5880
5903
5881
5904
</details>
5882
5905
</tool-use>
5883
5906
5884
5907
---
5885
5908
5909
+
5886
5910
Made the type generic. It's now `ResponsiveValue<T>`, which can be reused for other responsive properties. The `weight` prop uses `ResponsiveValue<ThemeKeys<typeof fontWeight>>`.
5887
5911
5888
5912
The linter errors are pre-existing: the implementation doesn't handle responsive objects (when `weight` is an object with breakpoints). The generic type conversion is complete and correct.
5889
5913
5890
5914
---
5915
+
5916
+
_**User**_
5917
+
5918
+
this isnt working ╰─❯ cp -r ./src/components/theme/color ../../../kitchen/services/app/src/components/theme
5919
+
5920
+
---
5921
+
5922
+
_**Agent (model composer-1, mode Agent)**_
5923
+
5924
+
5925
+
Checking the current directory and the source path to diagnose the copy issue.
5926
+
5927
+
5928
+
---
5929
+
5930
+
<tool-use data-tool-type="shell" data-tool-name="run_terminal_command_v2">
5931
+
<details><summary>Tool use: **run_terminal_command_v2** • Run command: pwd</summary>
5932
+
5933
+
```bash
5934
+
pwd
5935
+
```
5936
+
5937
+
```
5938
+
/Users/andrew/Documents/hip-ui
5939
+
5940
+
```
5941
+
</details>
5942
+
</tool-use>
5943
+
5944
+
---
5945
+
5946
+
<tool-use data-tool-type="shell" data-tool-name="run_terminal_command_v2">
5947
+
<details><summary>Tool use: **run_terminal_command_v2** • Run command: ls -la ./src/components/theme/color 2>&1 || echo "Path check failed"</summary>
5948
+
5949
+
```bash
5950
+
ls -la ./src/components/theme/color 2>&1 || echo "Path check failed"
5951
+
```
5952
+
5953
+
```
5954
+
"./src/components/theme/color": No such file or directory (os error 2)
5955
+
Path check failed
5956
+
5957
+
```
5958
+
</details>
5959
+
</tool-use>
5960
+
5961
+
---
5962
+
5963
+
5964
+
Checking the actual location of the color/colors directory:
5965
+
5966
+
5967
+
---
5968
+
5969
+
<tool-use data-tool-type="shell" data-tool-name="run_terminal_command_v2">
5970
+
<details><summary>Tool use: **run_terminal_command_v2** • Run command: find . -type d -name "color*" -path "*/theme/*" 2>/dev/null | head -10</summary>
5971
+
5972
+
```bash
5973
+
find . -type d -name "color*" -path "*/theme/*" 2>/dev/null | head -10
5974
+
```
5975
+
5976
+
```
5977
+
./packages/hip-ui/dist/components/theme/colors
5978
+
./packages/hip-ui/src/components/theme/colors
5979
+
./apps/docs/src/components/theme/colors
5980
+
5981
+
```
5982
+
</details>
5983
+
</tool-use>
5984
+
5985
+
---
5986
+
5987
+
<tool-use data-tool-type="unknown" data-tool-name="list_dir_v2">
5988
+
<details>
5989
+
<summary>Tool use: **list_dir_v2**</summary>
5990
+
5991
+
5992
+
Parameters:
5993
+
5994
+
```json
5995
+
{
5996
+
"targetDirectory": "packages/hip-ui/src/components/theme"
5997
+
}
5998
+
```
5999
+
Result:
6000
+
6001
+
```json
6002
+
{
6003
+
"directoryTreeRoot": {
6004
+
"absPath": "/Users/andrew/Documents/hip-ui/packages/hip-ui/src/components/theme",
6005
+
"childrenDirs": [
6006
+
{
6007
+
"absPath": "/Users/andrew/Documents/hip-ui/packages/hip-ui/src/components/theme/colors",
6008
+
"childrenFiles": [
6009
+
{
6010
+
"name": "amber.stylex.tsx"
6011
+
},
6012
+
{
6013
+
"name": "blue.stylex.tsx"
6014
+
},
6015
+
{
6016
+
"name": "bronze.stylex.tsx"
6017
+
},
6018
+
{
6019
+
"name": "brown.stylex.tsx"
6020
+
},
6021
+
{
6022
+
"name": "crimson.stylex.tsx"
6023
+
},
6024
+
{
6025
+
"name": "cyan.stylex.tsx"
6026
+
},
6027
+
{
6028
+
"name": "gold.stylex.tsx"
6029
+
},
6030
+
{
6031
+
"name": "grass.stylex.tsx"
6032
+
},
6033
+
{
6034
+
"name": "gray.stylex.tsx"
6035
+
},
6036
+
{
6037
+
"name": "green.stylex.tsx"
6038
+
},
6039
+
{
6040
+
"name": "indigo.stylex.tsx"
6041
+
},
6042
+
{
6043
+
"name": "iris.stylex.tsx"
6044
+
},
6045
+
{
6046
+
"name": "jade.stylex.tsx"
6047
+
},
6048
+
{
6049
+
"name": "lime.stylex.tsx"
6050
+
},
6051
+
{
6052
+
"name": "mauve.stylex.tsx"
6053
+
},
6054
+
{
6055
+
"name": "mint.stylex.tsx"
6056
+
},
6057
+
{
6058
+
"name": "olive.stylex.tsx"
6059
+
},
6060
+
{
6061
+
"name": "orange.stylex.tsx"
6062
+
},
6063
+
{
6064
+
"name": "pink.stylex.tsx"
6065
+
},
6066
+
{
6067
+
"name": "plum.stylex.tsx"
6068
+
},
6069
+
{
6070
+
"name": "purple.stylex.tsx"
6071
+
},
6072
+
{
6073
+
"name": "red.stylex.tsx"
6074
+
},
6075
+
{
6076
+
"name": "ruby.stylex.tsx"
6077
+
},
6078
+
{
6079
+
"name": "sage.stylex.tsx"
6080
+
},
6081
+
{
6082
+
"name": "sand.stylex.tsx"
6083
+
},
6084
+
{
6085
+
"name": "sky.stylex.tsx"
6086
+
},
6087
+
{
6088
+
"name": "slate.stylex.tsx"
6089
+
},
6090
+
{
6091
+
"name": "teal.stylex.tsx"
6092
+
},
6093
+
{
6094
+
"name": "tomato.stylex.tsx"
6095
+
},
6096
+
{
6097
+
"name": "violet.stylex.tsx"
6098
+
},
6099
+
{
6100
+
"name": "yellow.stylex.tsx"
6101
+
}
6102
+
],
6103
+
"childrenWereProcessed": true
6104
+
}
6105
+
],
6106
+
"childrenFiles": [
6107
+
{
6108
+
"name": "animations.stylex.tsx"
6109
+
},
6110
+
{
6111
+
"name": "color.stylex.tsx"
6112
+
},
6113
+
{
6114
+
"name": "media-queries.stylex.tsx"
6115
+
},
6116
+
{
6117
+
"name": "radius.stylex.tsx"
6118
+
},
6119
+
{
6120
+
"name": "semantic-color.stylex.tsx"
6121
+
},
6122
+
{
6123
+
"name": "shadow.stylex.tsx"
6124
+
},
6125
+
{
6126
+
"name": "spacing.stylex.tsx"
6127
+
},
6128
+
{
6129
+
"name": "types.ts"
6130
+
},
6131
+
{
6132
+
"name": "typography.stylex.tsx"
6133
+
},
6134
+
{
6135
+
"name": "useButtonStyles.ts"
6136
+
},
6137
+
{
6138
+
"name": "useCalendarStyles.ts"
6139
+
},
6140
+
{
6141
+
"name": "useDialogStyles.ts"
6142
+
},
6143
+
{
6144
+
"name": "useInputStyles.ts"
6145
+
},
6146
+
{
6147
+
"name": "useListBoxItemStyles.ts"
6148
+
},
6149
+
{
6150
+
"name": "usePopoverStyles.ts"
6151
+
}
6152
+
],
6153
+
"childrenWereProcessed": true
6154
+
}
6155
+
}
6156
+
```
6157
+
Status: **completed**
6158
+
6159
+
6160
+
</details>
6161
+
</tool-use>
6162
+
6163
+
---
6164
+
6165
+
6166
+
The directory is `colors` (plural), not `color`. Checking the destination path, then running the correct copy command:
6167
+
6168
+
6169
+
---
6170
+
6171
+
<tool-use data-tool-type="shell" data-tool-name="run_terminal_command_v2">
6172
+
<details><summary>Tool use: **run_terminal_command_v2** • Run command: ls -la ../../../kitchen/services/app/src/components/theme 2>&1 | head -5</summary>
6173
+
6174
+
```bash
6175
+
ls -la ../../../kitchen/services/app/src/components/theme 2>&1 | head -5
6176
+
```
6177
+
6178
+
```
6179
+
"../../../kitchen/services/app/src/components/theme": No such file or directory (os error 2)
6180
+
6181
+
```
6182
+
</details>
6183
+
</tool-use>
6184
+
6185
+
---
6186
+
6187
+
6188
+
Checking if the destination directory exists and creating it if needed:
6189
+
6190
+
6191
+
---
6192
+
6193
+
<tool-use data-tool-type="shell" data-tool-name="run_terminal_command_v2">
6194
+
<details><summary>Tool use: **run_terminal_command_v2** • Run command: ls -la ../../../kitchen 2>&1 | head -5</summary>
6195
+
6196
+
```bash
6197
+
ls -la ../../../kitchen 2>&1 | head -5
6198
+
```
6199
+
6200
+
```
6201
+
"../../../kitchen": No such file or directory (os error 2)
6202
+
6203
+
```
6204
+
</details>
6205
+
</tool-use>
6206
+
6207
+
---
6208
+
6209
+
<tool-use data-tool-type="shell" data-tool-name="run_terminal_command_v2">
6210
+
<details><summary>Tool use: **run_terminal_command_v2** • Run command: find ../../.. -maxdepth 3 -type d -name "kitchen" 2>/dev/null | head -5</summary>
6211
+
6212
+
```bash
6213
+
find ../../.. -maxdepth 3 -type d -name "kitchen" 2>/dev/null | head -5
6214
+
```
6215
+
</details>
6216
+
</tool-use>
6217
+
6218
+
---
6219
+
+1
-1
packages/hip-ui/scripts/generate-colors.tsx
+1
-1
packages/hip-ui/scripts/generate-colors.tsx
···
100
100
async function generateColor(name: string) {
101
101
const color = Object.values(colors[name as keyof typeof colors]);
102
102
const colorDark = Object.values(
103
-
colors[camelCase(name) as keyof typeof colors],
103
+
colors[camelCase(`${name}Dark`) as keyof typeof colors],
104
104
);
105
105
const colorP3 = Object.values(
106
106
colors[camelCase(`${name}P3`) as keyof typeof colors],
+131
-52
packages/hip-ui/src/components/avatar/index.tsx
+131
-52
packages/hip-ui/src/components/avatar/index.tsx
···
1
+
import type { ButtonProps as AriaButtonProps } from "react-aria-components";
2
+
1
3
import * as stylex from "@stylexjs/stylex";
2
-
import { use, useLayoutEffect, useState } from "react";
3
-
import {
4
-
Button as AriaButton,
5
-
ButtonProps as AriaButtonProps,
6
-
} from "react-aria-components";
4
+
import { use, useLayoutEffect, useRef, useState } from "react";
5
+
import { Button as AriaButton } from "react-aria-components";
6
+
7
+
import type { Size, StyleXComponentProps } from "../theme/types";
7
8
8
9
import { SizeContext } from "../context";
9
10
import {
···
14
15
import { mediaQueries } from "../theme/media-queries.stylex";
15
16
import { radius } from "../theme/radius.stylex";
16
17
import { spacing } from "../theme/spacing.stylex";
17
-
import { Size, StyleXComponentProps } from "../theme/types";
18
18
import {
19
+
fontFamily,
19
20
fontSize,
20
21
fontWeight,
21
22
lineHeight,
22
-
fontFamily,
23
23
} from "../theme/typography.stylex";
24
24
25
25
const styles = stylex.create({
···
34
34
justifyContent: "center",
35
35
position: "relative",
36
36
37
-
// eslint-disable-next-line @stylexjs/valid-styles
38
37
cornerShape: "squircle",
39
38
},
40
39
wrapperSm: {
···
76
75
width: "100%",
77
76
},
78
77
fallback: {
78
+
alignItems: "center",
79
79
color: uiColor.text1,
80
+
display: "flex",
80
81
fontFamily: fontFamily["sans"],
81
82
fontWeight: fontWeight["medium"],
83
+
justifyContent: "center",
82
84
lineHeight: lineHeight["none"],
85
+
position: "absolute",
86
+
bottom: 0,
87
+
left: 0,
88
+
right: 0,
89
+
top: 0,
83
90
},
84
91
fallbackSm: {
85
92
fontSize: fontSize["sm"],
···
102
109
display: "inline-block",
103
110
},
104
111
overlay: {
112
+
inset: 0,
105
113
backgroundColor: uiColor.solid2,
106
114
opacity: {
107
115
default: 0,
108
-
":is([data-avatar-button][data-hovered] *)": 0.5,
116
+
":is([data-avatar-button='true'][data-hovered='true'] *)": 0.5,
109
117
},
110
118
pointerEvents: "none",
111
119
position: "absolute",
112
120
transitionDuration: animationDuration.default,
113
-
transitionProperty: "opacity",
121
+
// Only apply transition after mount to prevent initial render animation
122
+
transitionProperty: {
123
+
default: "none",
124
+
":is([data-overlay-mounted])": "opacity",
125
+
},
114
126
transitionTimingFunction: animationTimingFunction.easeOut,
115
-
bottom: 0,
116
-
left: 0,
117
-
right: 0,
118
-
top: 0,
119
127
},
120
128
});
121
129
···
132
140
size?: Size | "xl";
133
141
}
134
142
135
-
export function Avatar({
136
-
style,
137
-
alt = "",
143
+
function AvatarImageWithState({
138
144
src,
139
-
fallback,
140
-
size: sizeProp,
141
-
...props
142
-
}: AvatarProps) {
143
-
const size = sizeProp || use(SizeContext);
144
-
const [imageLoaded, setImageLoaded] = useState<
145
-
"loading" | "loaded" | "error"
146
-
>("loading");
145
+
alt,
146
+
onStateChange,
147
+
}: {
148
+
src: string;
149
+
alt: string;
150
+
onStateChange: (loaded: boolean, error: boolean) => void;
151
+
}) {
152
+
const imgRef = useRef<HTMLImageElement>(null);
147
153
154
+
// Check if image is already cached/loaded
148
155
useLayoutEffect(() => {
149
-
if (!src) return;
156
+
const img = imgRef.current;
157
+
if (!img) return;
158
+
159
+
const handleLoad = () => {
160
+
onStateChange(true, false);
161
+
};
150
162
151
-
const onLoad = () => setImageLoaded("loaded");
152
-
const onError = () => setImageLoaded("error");
163
+
const handleError = () => {
164
+
onStateChange(false, true);
165
+
};
153
166
154
-
const image = new Image();
167
+
// If image is already loaded (cached), call handleLoad immediately
168
+
if (img.complete && img.naturalWidth > 0) {
169
+
handleLoad();
170
+
} else {
171
+
// Otherwise, wait for load event
172
+
img.addEventListener("load", handleLoad);
173
+
img.addEventListener("error", handleError);
174
+
175
+
return () => {
176
+
img.removeEventListener("load", handleLoad);
177
+
img.removeEventListener("error", handleError);
178
+
};
179
+
}
180
+
}, [src, onStateChange]);
181
+
182
+
return (
183
+
<img ref={imgRef} {...stylex.props(styles.image)} src={src} alt={alt} />
184
+
);
185
+
}
186
+
187
+
function AvatarContent({
188
+
src,
189
+
alt,
190
+
fallback,
191
+
size,
192
+
}: {
193
+
src?: string;
194
+
alt: string;
195
+
fallback: React.ReactNode;
196
+
size: Size | "xl";
197
+
}) {
198
+
const [imageLoaded, setImageLoaded] = useState(false);
199
+
const [imageError, setImageError] = useState(false);
200
+
const [hasCheckedImage, setHasCheckedImage] = useState(false);
201
+
const overlayRef = useRef<HTMLDivElement>(null);
155
202
156
-
image.addEventListener("load", onLoad);
157
-
image.addEventListener("error", onError);
203
+
useLayoutEffect(() => {
204
+
// Enable transitions after initial render (CSS can't detect this)
205
+
overlayRef.current?.setAttribute("data-overlay-mounted", "");
206
+
}, []);
158
207
159
-
image.src = src;
208
+
const handleStateChange = (loaded: boolean, error: boolean) => {
209
+
setImageLoaded(loaded);
210
+
setImageError(error);
211
+
setHasCheckedImage(true);
212
+
};
160
213
161
-
return () => {
162
-
image.removeEventListener("load", onLoad);
163
-
image.removeEventListener("error", onError);
164
-
};
165
-
}, [src]);
214
+
// Only show fallback if we've checked and the image isn't loaded or has error
215
+
const showFallback =
216
+
!src || (hasCheckedImage && (imageError || !imageLoaded));
166
217
167
218
return (
168
-
<div
169
-
{...props}
170
-
{...stylex.props(
171
-
styles.wrapper,
172
-
size === "sm" && styles.wrapperSm,
173
-
size === "md" && styles.wrapperMd,
174
-
size === "lg" && styles.wrapperLg,
175
-
size === "xl" && styles.wrapperXl,
176
-
style,
219
+
<>
220
+
{src && !imageError && (
221
+
<AvatarImageWithState
222
+
key={src}
223
+
src={src}
224
+
alt={alt}
225
+
onStateChange={handleStateChange}
226
+
/>
177
227
)}
178
-
>
179
-
{imageLoaded === "loaded" && (
180
-
<img {...stylex.props(styles.image)} src={src} alt={alt} />
181
-
)}
182
-
{(!src || imageLoaded === "error") && (
228
+
{showFallback && (
183
229
<div
184
230
{...stylex.props(
185
231
styles.fallback,
···
192
238
{fallback}
193
239
</div>
194
240
)}
195
-
<div {...stylex.props(styles.overlay)} />
241
+
<div ref={overlayRef} {...stylex.props(styles.overlay)} />
242
+
</>
243
+
);
244
+
}
245
+
246
+
export function Avatar({
247
+
style,
248
+
alt = "",
249
+
src,
250
+
fallback,
251
+
size: sizeProp,
252
+
...props
253
+
}: AvatarProps) {
254
+
const size = sizeProp || use(SizeContext);
255
+
256
+
return (
257
+
<div
258
+
{...props}
259
+
{...stylex.props(
260
+
styles.wrapper,
261
+
size === "sm" && styles.wrapperSm,
262
+
size === "md" && styles.wrapperMd,
263
+
size === "lg" && styles.wrapperLg,
264
+
size === "xl" && styles.wrapperXl,
265
+
style,
266
+
)}
267
+
>
268
+
<AvatarContent
269
+
key={src}
270
+
src={src}
271
+
alt={alt}
272
+
fallback={fallback}
273
+
size={size}
274
+
/>
196
275
</div>
197
276
);
198
277
}
+11
-11
packages/hip-ui/src/components/theme/colors/amber.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/amber.stylex.tsx
···
2
2
3
3
export const amber = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fefdfb, #fefdfb)",
5
+
default: "light-dark(#fefdfb, #16120c)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.995 0.992 0.985), color(display-p3 0.082 0.07 0.05))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fefbe9, #fefbe9)",
10
+
default: "light-dark(#fefbe9, #1d180f)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.994 0.986 0.921), color(display-p3 0.111 0.094 0.064))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#fff7c2, #fff7c2)",
15
+
default: "light-dark(#fff7c2, #302008)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.994 0.969 0.782), color(display-p3 0.178 0.128 0.049))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#ffee9c, #ffee9c)",
20
+
default: "light-dark(#ffee9c, #3f2700)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.989 0.937 0.65), color(display-p3 0.239 0.156 0))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#fbe577, #fbe577)",
25
+
default: "light-dark(#fbe577, #4d3000)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.97 0.902 0.527), color(display-p3 0.29 0.193 0))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#f3d673, #f3d673)",
30
+
default: "light-dark(#f3d673, #5c3d05)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.936 0.844 0.506), color(display-p3 0.344 0.245 0.076))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#e9c162, #e9c162)",
35
+
default: "light-dark(#e9c162, #714f19)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.89 0.762 0.443), color(display-p3 0.422 0.314 0.141))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#e2a336, #e2a336)",
40
+
default: "light-dark(#e2a336, #8f6424)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.85 0.65 0.3), color(display-p3 0.535 0.399 0.189))",
43
43
},
···
47
47
"light-dark(color(display-p3 1 0.77 0.26), color(display-p3 1 0.77 0.26))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#ffba18, #ffba18)",
50
+
default: "light-dark(#ffba18, #ffd60a)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.959 0.741 0.274), color(display-p3 1 0.87 0.15))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#ab6400, #ab6400)",
55
+
default: "light-dark(#ab6400, #ffca16)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.64 0.4 0), color(display-p3 1 0.8 0.29))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#4f3422, #4f3422)",
60
+
default: "light-dark(#4f3422, #ffe7b3)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.294 0.208 0.145), color(display-p3 0.984 0.909 0.726))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/blue.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/blue.stylex.tsx
···
2
2
3
3
export const blue = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fbfdff, #fbfdff)",
5
+
default: "light-dark(#fbfdff, #0d1520)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.986 0.992 0.999), color(display-p3 0.057 0.081 0.122))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f4faff, #f4faff)",
10
+
default: "light-dark(#f4faff, #111927)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.96 0.979 0.998), color(display-p3 0.072 0.098 0.147))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#e6f4fe, #e6f4fe)",
15
+
default: "light-dark(#e6f4fe, #0d2847)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.912 0.956 0.991), color(display-p3 0.078 0.154 0.27))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#d5efff, #d5efff)",
20
+
default: "light-dark(#d5efff, #003362)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.853 0.932 1), color(display-p3 0.033 0.197 0.37))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#c2e5ff, #c2e5ff)",
25
+
default: "light-dark(#c2e5ff, #004074)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.788 0.894 0.998), color(display-p3 0.08 0.245 0.441))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#acd8fc, #acd8fc)",
30
+
default: "light-dark(#acd8fc, #104d87)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.709 0.843 0.976), color(display-p3 0.14 0.298 0.511))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#8ec8f6, #8ec8f6)",
35
+
default: "light-dark(#8ec8f6, #205d9e)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.606 0.777 0.947), color(display-p3 0.195 0.361 0.6))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#5eb1ef, #5eb1ef)",
40
+
default: "light-dark(#5eb1ef, #2870bd)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.451 0.688 0.917), color(display-p3 0.239 0.434 0.72))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.247 0.556 0.969), color(display-p3 0.247 0.556 0.969))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#0588f0, #0588f0)",
50
+
default: "light-dark(#0588f0, #3b9eff)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.234 0.523 0.912), color(display-p3 0.344 0.612 0.973))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#0d74ce, #0d74ce)",
55
+
default: "light-dark(#0d74ce, #70b8ff)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.15 0.44 0.84), color(display-p3 0.49 0.72 1))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#113264, #113264)",
60
+
default: "light-dark(#113264, #c2e6ff)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.102 0.193 0.379), color(display-p3 0.788 0.898 0.99))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/bronze.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/bronze.stylex.tsx
···
2
2
3
3
export const bronze = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fdfcfc, #fdfcfc)",
5
+
default: "light-dark(#fdfcfc, #141110)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.991 0.988 0.988), color(display-p3 0.076 0.067 0.063))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fdf7f5, #fdf7f5)",
10
+
default: "light-dark(#fdf7f5, #1c1917)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.989 0.97 0.961), color(display-p3 0.106 0.097 0.093))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#f6edea, #f6edea)",
15
+
default: "light-dark(#f6edea, #262220)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.958 0.932 0.919), color(display-p3 0.147 0.132 0.125))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#efe4df, #efe4df)",
20
+
default: "light-dark(#efe4df, #302a27)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.929 0.894 0.877), color(display-p3 0.185 0.166 0.156))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#e7d9d3, #e7d9d3)",
25
+
default: "light-dark(#e7d9d3, #3b3330)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.898 0.853 0.832), color(display-p3 0.227 0.202 0.19))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#dfcdc5, #dfcdc5)",
30
+
default: "light-dark(#dfcdc5, #493e3a)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.861 0.805 0.778), color(display-p3 0.278 0.246 0.23))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#d3bcb3, #d3bcb3)",
35
+
default: "light-dark(#d3bcb3, #5a4c47)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.812 0.739 0.706), color(display-p3 0.343 0.302 0.281))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#c2a499, #c2a499)",
40
+
default: "light-dark(#c2a499, #6f5f58)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.741 0.647 0.606), color(display-p3 0.426 0.374 0.347))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.611 0.507 0.455), color(display-p3 0.611 0.507 0.455))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#957468, #957468)",
50
+
default: "light-dark(#957468, #ae8c7e)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.563 0.461 0.414), color(display-p3 0.66 0.556 0.504))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#7d5e54, #7d5e54)",
55
+
default: "light-dark(#7d5e54, #d4b3a5)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.471 0.373 0.336), color(display-p3 0.81 0.707 0.655))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#43302b, #43302b)",
60
+
default: "light-dark(#43302b, #ede0d9)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.251 0.191 0.172), color(display-p3 0.921 0.88 0.854))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/brown.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/brown.stylex.tsx
···
2
2
3
3
export const brown = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fefdfc, #fefdfc)",
5
+
default: "light-dark(#fefdfc, #12110f)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.995 0.992 0.989), color(display-p3 0.071 0.067 0.059))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fcf9f6, #fcf9f6)",
10
+
default: "light-dark(#fcf9f6, #1c1816)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.987 0.976 0.964), color(display-p3 0.107 0.095 0.087))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#f6eee7, #f6eee7)",
15
+
default: "light-dark(#f6eee7, #28211d)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.959 0.936 0.909), color(display-p3 0.151 0.13 0.115))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#f0e4d9, #f0e4d9)",
20
+
default: "light-dark(#f0e4d9, #322922)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.934 0.897 0.855), color(display-p3 0.191 0.161 0.138))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#ebdaca, #ebdaca)",
25
+
default: "light-dark(#ebdaca, #3e3128)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.909 0.856 0.798), color(display-p3 0.235 0.194 0.162))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#e4cdb7, #e4cdb7)",
30
+
default: "light-dark(#e4cdb7, #4d3c2f)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.88 0.808 0.73), color(display-p3 0.291 0.237 0.192))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#dcbc9f, #dcbc9f)",
35
+
default: "light-dark(#dcbc9f, #614a39)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.841 0.742 0.639), color(display-p3 0.365 0.295 0.232))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#cea37e, #cea37e)",
40
+
default: "light-dark(#cea37e, #7c5f46)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.782 0.647 0.514), color(display-p3 0.469 0.377 0.287))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.651 0.505 0.368), color(display-p3 0.651 0.505 0.368))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#a07553, #a07553)",
50
+
default: "light-dark(#a07553, #b88c67)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.601 0.465 0.344), color(display-p3 0.697 0.557 0.423))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#815e46, #815e46)",
55
+
default: "light-dark(#815e46, #dbb594)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.485 0.374 0.288), color(display-p3 0.835 0.715 0.597))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#3e332e, #3e332e)",
60
+
default: "light-dark(#3e332e, #f2e1ca)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.236 0.202 0.183), color(display-p3 0.938 0.885 0.802))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/crimson.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/crimson.stylex.tsx
···
2
2
3
3
export const crimson = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fffcfd, #fffcfd)",
5
+
default: "light-dark(#fffcfd, #191114)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.998 0.989 0.992), color(display-p3 0.093 0.068 0.078))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fef7f9, #fef7f9)",
10
+
default: "light-dark(#fef7f9, #201318)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.991 0.969 0.976), color(display-p3 0.117 0.078 0.095))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#ffe9f0, #ffe9f0)",
15
+
default: "light-dark(#ffe9f0, #381525)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.987 0.917 0.941), color(display-p3 0.203 0.091 0.143))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#fedce7, #fedce7)",
20
+
default: "light-dark(#fedce7, #4d122f)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.975 0.866 0.904), color(display-p3 0.277 0.087 0.182))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#facedd, #facedd)",
25
+
default: "light-dark(#facedd, #5c1839)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.953 0.813 0.864), color(display-p3 0.332 0.115 0.22))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#f3bed1, #f3bed1)",
30
+
default: "light-dark(#f3bed1, #6d2545)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.921 0.755 0.817), color(display-p3 0.394 0.162 0.268))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#eaacc3, #eaacc3)",
35
+
default: "light-dark(#eaacc3, #873356)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.88 0.683 0.761), color(display-p3 0.489 0.222 0.336))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#e093b2, #e093b2)",
40
+
default: "light-dark(#e093b2, #b0436e)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.834 0.592 0.694), color(display-p3 0.638 0.289 0.429))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.843 0.298 0.507), color(display-p3 0.843 0.298 0.507))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#df3478, #df3478)",
50
+
default: "light-dark(#df3478, #ee518a)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.807 0.266 0.468), color(display-p3 0.864 0.364 0.539))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#cb1d63, #cb1d63)",
55
+
default: "light-dark(#cb1d63, #ff92ad)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.731 0.195 0.388), color(display-p3 1 0.56 0.66))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#621639, #621639)",
60
+
default: "light-dark(#621639, #fdd3e8)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.352 0.111 0.221), color(display-p3 0.966 0.834 0.906))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/cyan.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/cyan.stylex.tsx
···
2
2
3
3
export const cyan = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fafdfe, #fafdfe)",
5
+
default: "light-dark(#fafdfe, #0b161a)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.982 0.992 0.996), color(display-p3 0.053 0.085 0.098))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f2fafb, #f2fafb)",
10
+
default: "light-dark(#f2fafb, #101b20)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.955 0.981 0.984), color(display-p3 0.072 0.105 0.122))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#def7f9, #def7f9)",
15
+
default: "light-dark(#def7f9, #082c36)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.888 0.965 0.975), color(display-p3 0.073 0.168 0.209))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#caf1f6, #caf1f6)",
20
+
default: "light-dark(#caf1f6, #003848)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.821 0.941 0.959), color(display-p3 0.063 0.216 0.277))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#b5e9f0, #b5e9f0)",
25
+
default: "light-dark(#b5e9f0, #004558)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.751 0.907 0.935), color(display-p3 0.091 0.267 0.336))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#9ddde7, #9ddde7)",
30
+
default: "light-dark(#9ddde7, #045468)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.671 0.862 0.9), color(display-p3 0.137 0.324 0.4))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#7dcedc, #7dcedc)",
35
+
default: "light-dark(#7dcedc, #12677e)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.564 0.8 0.854), color(display-p3 0.186 0.398 0.484))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#3db9cf, #3db9cf)",
40
+
default: "light-dark(#3db9cf, #11809c)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.388 0.715 0.798), color(display-p3 0.23 0.496 0.6))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.282 0.627 0.765), color(display-p3 0.282 0.627 0.765))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#0797b9, #0797b9)",
50
+
default: "light-dark(#0797b9, #23afd0)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.264 0.583 0.71), color(display-p3 0.331 0.675 0.801))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#107d98, #107d98)",
55
+
default: "light-dark(#107d98, #4ccce6)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.08 0.48 0.63), color(display-p3 0.446 0.79 0.887))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#0d3c48, #0d3c48)",
60
+
default: "light-dark(#0d3c48, #b6ecf7)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.108 0.232 0.277), color(display-p3 0.757 0.919 0.962))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/gold.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/gold.stylex.tsx
···
2
2
3
3
export const gold = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fdfdfc, #fdfdfc)",
5
+
default: "light-dark(#fdfdfc, #121211)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.992 0.992 0.989), color(display-p3 0.071 0.071 0.067))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#faf9f2, #faf9f2)",
10
+
default: "light-dark(#faf9f2, #1b1a17)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.98 0.976 0.953), color(display-p3 0.104 0.101 0.09))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#f2f0e7, #f2f0e7)",
15
+
default: "light-dark(#f2f0e7, #24231f)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.947 0.94 0.909), color(display-p3 0.141 0.136 0.122))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#eae6db, #eae6db)",
20
+
default: "light-dark(#eae6db, #2d2b26)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.914 0.904 0.865), color(display-p3 0.177 0.17 0.152))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#e1dccf, #e1dccf)",
25
+
default: "light-dark(#e1dccf, #38352e)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.88 0.865 0.816), color(display-p3 0.217 0.207 0.185))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#d8d0bf, #d8d0bf)",
30
+
default: "light-dark(#d8d0bf, #444039)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.84 0.818 0.756), color(display-p3 0.265 0.252 0.225))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#cbc0aa, #cbc0aa)",
35
+
default: "light-dark(#cbc0aa, #544f46)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.788 0.753 0.677), color(display-p3 0.327 0.31 0.277))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#b9a88d, #b9a88d)",
40
+
default: "light-dark(#b9a88d, #696256)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.715 0.66 0.565), color(display-p3 0.407 0.384 0.342))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.579 0.517 0.41), color(display-p3 0.579 0.517 0.41))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#8c7a5e, #8c7a5e)",
50
+
default: "light-dark(#8c7a5e, #a39073)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.538 0.479 0.38), color(display-p3 0.628 0.566 0.463))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#71624b, #71624b)",
55
+
default: "light-dark(#71624b, #cbb99f)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.433 0.386 0.305), color(display-p3 0.784 0.728 0.635))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#3b352b, #3b352b)",
60
+
default: "light-dark(#3b352b, #e8e2d9)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.227 0.209 0.173), color(display-p3 0.906 0.887 0.855))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/grass.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/grass.stylex.tsx
···
2
2
3
3
export const grass = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fbfefb, #fbfefb)",
5
+
default: "light-dark(#fbfefb, #0e1511)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.986 0.996 0.985), color(display-p3 0.062 0.083 0.067))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f5fbf5, #f5fbf5)",
10
+
default: "light-dark(#f5fbf5, #141a15)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.966 0.983 0.964), color(display-p3 0.083 0.103 0.085))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#e9f6e9, #e9f6e9)",
15
+
default: "light-dark(#e9f6e9, #1b2a1e)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.923 0.965 0.917), color(display-p3 0.118 0.163 0.122))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#daf1db, #daf1db)",
20
+
default: "light-dark(#daf1db, #1d3a24)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.872 0.94 0.865), color(display-p3 0.142 0.225 0.15))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#c9e8ca, #c9e8ca)",
25
+
default: "light-dark(#c9e8ca, #25482d)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.811 0.908 0.802), color(display-p3 0.178 0.279 0.186))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#b2ddb5, #b2ddb5)",
30
+
default: "light-dark(#b2ddb5, #2d5736)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.733 0.864 0.724), color(display-p3 0.217 0.337 0.224))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#94ce9a, #94ce9a)",
35
+
default: "light-dark(#94ce9a, #366740)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.628 0.803 0.622), color(display-p3 0.258 0.4 0.264))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#65ba74, #65ba74)",
40
+
default: "light-dark(#65ba74, #3e7949)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.477 0.72 0.482), color(display-p3 0.302 0.47 0.305))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.38 0.647 0.378), color(display-p3 0.38 0.647 0.378))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#3e9b4f, #3e9b4f)",
50
+
default: "light-dark(#3e9b4f, #53b365)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.344 0.598 0.342), color(display-p3 0.426 0.694 0.426))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#2a7e3b, #2a7e3b)",
55
+
default: "light-dark(#2a7e3b, #71d083)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.263 0.488 0.261), color(display-p3 0.535 0.807 0.542))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#203c25, #203c25)",
60
+
default: "light-dark(#203c25, #c2f0c2)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.151 0.233 0.153), color(display-p3 0.797 0.936 0.776))",
63
63
},
+24
-24
packages/hip-ui/src/components/theme/colors/gray.stylex.tsx
+24
-24
packages/hip-ui/src/components/theme/colors/gray.stylex.tsx
···
2
2
3
3
export const gray = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fcfcfc, #fcfcfc)",
5
+
default: "light-dark(#fcfcfc, #111111)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.988 0.988 0.988), color(display-p3 0.067 0.067 0.067))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f9f9f9, #f9f9f9)",
10
+
default: "light-dark(#f9f9f9, #191919)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.975 0.975 0.975), color(display-p3 0.098 0.098 0.098))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#f0f0f0, #f0f0f0)",
15
+
default: "light-dark(#f0f0f0, #222222)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.939 0.939 0.939), color(display-p3 0.135 0.135 0.135))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#e8e8e8, #e8e8e8)",
20
+
default: "light-dark(#e8e8e8, #2a2a2a)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.908 0.908 0.908), color(display-p3 0.163 0.163 0.163))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#e0e0e0, #e0e0e0)",
25
+
default: "light-dark(#e0e0e0, #313131)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.88 0.88 0.88), color(display-p3 0.192 0.192 0.192))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#d9d9d9, #d9d9d9)",
30
+
default: "light-dark(#d9d9d9, #3a3a3a)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.849 0.849 0.849), color(display-p3 0.228 0.228 0.228))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#cecece, #cecece)",
35
+
default: "light-dark(#cecece, #484848)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.807 0.807 0.807), color(display-p3 0.283 0.283 0.283))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#bbbbbb, #bbbbbb)",
40
+
default: "light-dark(#bbbbbb, #606060)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.732 0.732 0.732), color(display-p3 0.375 0.375 0.375))",
43
43
},
44
44
solid1: {
45
-
default: "light-dark(#8d8d8d, #8d8d8d)",
45
+
default: "light-dark(#8d8d8d, #6e6e6e)",
46
46
"@media (color-gamut: p3)":
47
47
"light-dark(color(display-p3 0.553 0.553 0.553), color(display-p3 0.431 0.431 0.431))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#838383, #838383)",
50
+
default: "light-dark(#838383, #7b7b7b)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.512 0.512 0.512), color(display-p3 0.484 0.484 0.484))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#646464, #646464)",
55
+
default: "light-dark(#646464, #b4b4b4)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.392 0.392 0.392), color(display-p3 0.706 0.706 0.706))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#202020, #202020)",
60
+
default: "light-dark(#202020, #eeeeee)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.125 0.125 0.125), color(display-p3 0.933 0.933 0.933))",
63
63
},
···
127
127
128
128
export const grayInverted = stylex.defineVars({
129
129
bg: {
130
-
default: "light-dark(#fcfcfc, #fcfcfc)",
130
+
default: "light-dark(#111111, #fcfcfc)",
131
131
"@media (color-gamut: p3)":
132
132
"light-dark(color(display-p3 0.067 0.067 0.067), color(display-p3 0.988 0.988 0.988))",
133
133
},
134
134
bgSubtle: {
135
-
default: "light-dark(#f9f9f9, #f9f9f9)",
135
+
default: "light-dark(#191919, #f9f9f9)",
136
136
"@media (color-gamut: p3)":
137
137
"light-dark(color(display-p3 0.098 0.098 0.098), color(display-p3 0.975 0.975 0.975))",
138
138
},
139
139
component1: {
140
-
default: "light-dark(#f0f0f0, #f0f0f0)",
140
+
default: "light-dark(#222222, #f0f0f0)",
141
141
"@media (color-gamut: p3)":
142
142
"light-dark(color(display-p3 0.135 0.135 0.135), color(display-p3 0.939 0.939 0.939))",
143
143
},
144
144
component2: {
145
-
default: "light-dark(#e8e8e8, #e8e8e8)",
145
+
default: "light-dark(#2a2a2a, #e8e8e8)",
146
146
"@media (color-gamut: p3)":
147
147
"light-dark(color(display-p3 0.163 0.163 0.163), color(display-p3 0.908 0.908 0.908))",
148
148
},
149
149
component3: {
150
-
default: "light-dark(#e0e0e0, #e0e0e0)",
150
+
default: "light-dark(#313131, #e0e0e0)",
151
151
"@media (color-gamut: p3)":
152
152
"light-dark(color(display-p3 0.192 0.192 0.192), color(display-p3 0.88 0.88 0.88))",
153
153
},
154
154
border1: {
155
-
default: "light-dark(#d9d9d9, #d9d9d9)",
155
+
default: "light-dark(#3a3a3a, #d9d9d9)",
156
156
"@media (color-gamut: p3)":
157
157
"light-dark(color(display-p3 0.228 0.228 0.228), color(display-p3 0.849 0.849 0.849))",
158
158
},
159
159
border2: {
160
-
default: "light-dark(#cecece, #cecece)",
160
+
default: "light-dark(#484848, #cecece)",
161
161
"@media (color-gamut: p3)":
162
162
"light-dark(color(display-p3 0.283 0.283 0.283), color(display-p3 0.807 0.807 0.807))",
163
163
},
164
164
border3: {
165
-
default: "light-dark(#bbbbbb, #bbbbbb)",
165
+
default: "light-dark(#606060, #bbbbbb)",
166
166
"@media (color-gamut: p3)":
167
167
"light-dark(color(display-p3 0.375 0.375 0.375), color(display-p3 0.732 0.732 0.732))",
168
168
},
169
169
solid1: {
170
-
default: "light-dark(#8d8d8d, #8d8d8d)",
170
+
default: "light-dark(#6e6e6e, #8d8d8d)",
171
171
"@media (color-gamut: p3)":
172
172
"light-dark(color(display-p3 0.431 0.431 0.431), color(display-p3 0.553 0.553 0.553))",
173
173
},
174
174
solid2: {
175
-
default: "light-dark(#838383, #838383)",
175
+
default: "light-dark(#7b7b7b, #838383)",
176
176
"@media (color-gamut: p3)":
177
177
"light-dark(color(display-p3 0.484 0.484 0.484), color(display-p3 0.512 0.512 0.512))",
178
178
},
179
179
text1: {
180
-
default: "light-dark(#646464, #646464)",
180
+
default: "light-dark(#b4b4b4, #646464)",
181
181
"@media (color-gamut: p3)":
182
182
"light-dark(color(display-p3 0.706 0.706 0.706), color(display-p3 0.392 0.392 0.392))",
183
183
},
184
184
text2: {
185
-
default: "light-dark(#202020, #202020)",
185
+
default: "light-dark(#eeeeee, #202020)",
186
186
"@media (color-gamut: p3)":
187
187
"light-dark(color(display-p3 0.933 0.933 0.933), color(display-p3 0.125 0.125 0.125))",
188
188
},
+11
-11
packages/hip-ui/src/components/theme/colors/green.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/green.stylex.tsx
···
2
2
3
3
export const green = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fbfefc, #fbfefc)",
5
+
default: "light-dark(#fbfefc, #0e1512)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.986 0.996 0.989), color(display-p3 0.062 0.083 0.071))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f4fbf6, #f4fbf6)",
10
+
default: "light-dark(#f4fbf6, #121b17)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.963 0.983 0.967), color(display-p3 0.079 0.106 0.09))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#e6f6eb, #e6f6eb)",
15
+
default: "light-dark(#e6f6eb, #132d21)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.913 0.964 0.925), color(display-p3 0.1 0.173 0.133))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#d6f1df, #d6f1df)",
20
+
default: "light-dark(#d6f1df, #113b29)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.859 0.94 0.879), color(display-p3 0.115 0.229 0.166))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#c4e8d1, #c4e8d1)",
25
+
default: "light-dark(#c4e8d1, #174933)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.796 0.907 0.826), color(display-p3 0.147 0.282 0.206))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#adddc0, #adddc0)",
30
+
default: "light-dark(#adddc0, #20573e)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.718 0.863 0.761), color(display-p3 0.185 0.338 0.25))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#8eceaa, #8eceaa)",
35
+
default: "light-dark(#8eceaa, #28684a)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.61 0.801 0.675), color(display-p3 0.227 0.403 0.298))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#5bb98b, #5bb98b)",
40
+
default: "light-dark(#5bb98b, #2f7c57)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.451 0.715 0.559), color(display-p3 0.27 0.479 0.351))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.332 0.634 0.442), color(display-p3 0.332 0.634 0.442))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#2b9a66, #2b9a66)",
50
+
default: "light-dark(#2b9a66, #33b074)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.308 0.595 0.417), color(display-p3 0.357 0.682 0.474))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#218358, #218358)",
55
+
default: "light-dark(#218358, #3dd68c)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#193b2d, #193b2d)",
60
+
default: "light-dark(#193b2d, #b1f1cb)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.132 0.228 0.18), color(display-p3 0.747 0.938 0.807))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/indigo.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/indigo.stylex.tsx
···
2
2
3
3
export const indigo = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fdfdfe, #fdfdfe)",
5
+
default: "light-dark(#fdfdfe, #11131f)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.992 0.992 0.996), color(display-p3 0.068 0.074 0.118))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f7f9ff, #f7f9ff)",
10
+
default: "light-dark(#f7f9ff, #141726)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.971 0.977 0.998), color(display-p3 0.081 0.089 0.144))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#edf2fe, #edf2fe)",
15
+
default: "light-dark(#edf2fe, #182449)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.933 0.948 0.992), color(display-p3 0.105 0.141 0.275))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#e1e9ff, #e1e9ff)",
20
+
default: "light-dark(#e1e9ff, #1d2e62)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.885 0.914 1), color(display-p3 0.129 0.18 0.369))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#d2deff, #d2deff)",
25
+
default: "light-dark(#d2deff, #253974)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.831 0.87 1), color(display-p3 0.163 0.22 0.439))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#c1d0ff, #c1d0ff)",
30
+
default: "light-dark(#c1d0ff, #304384)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.767 0.814 0.995), color(display-p3 0.203 0.262 0.5))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#abbdf9, #abbdf9)",
35
+
default: "light-dark(#abbdf9, #3a4f97)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.685 0.74 0.957), color(display-p3 0.245 0.309 0.575))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#8da4ef, #8da4ef)",
40
+
default: "light-dark(#8da4ef, #435db1)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.569 0.639 0.916), color(display-p3 0.285 0.362 0.674))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.276 0.384 0.837), color(display-p3 0.276 0.384 0.837))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#3358d4, #3358d4)",
50
+
default: "light-dark(#3358d4, #5472e4)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.234 0.343 0.801), color(display-p3 0.354 0.445 0.866))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#3a5bc7, #3a5bc7)",
55
+
default: "light-dark(#3a5bc7, #9eb1ff)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.256 0.354 0.755), color(display-p3 0.63 0.69 1))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#1f2d5c, #1f2d5c)",
60
+
default: "light-dark(#1f2d5c, #d6e1ff)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.133 0.175 0.348), color(display-p3 0.848 0.881 0.99))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/iris.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/iris.stylex.tsx
···
2
2
3
3
export const iris = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fdfdff, #fdfdff)",
5
+
default: "light-dark(#fdfdff, #13131e)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.992 0.992 0.999), color(display-p3 0.075 0.075 0.114))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f8f8ff, #f8f8ff)",
10
+
default: "light-dark(#f8f8ff, #171625)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.972 0.973 0.998), color(display-p3 0.089 0.086 0.14))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#f0f1fe, #f0f1fe)",
15
+
default: "light-dark(#f0f1fe, #202248)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.943 0.945 0.992), color(display-p3 0.128 0.134 0.272))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#e6e7ff, #e6e7ff)",
20
+
default: "light-dark(#e6e7ff, #262a65)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.902 0.906 1), color(display-p3 0.153 0.165 0.382))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#dadcff, #dadcff)",
25
+
default: "light-dark(#dadcff, #303374)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.857 0.861 1), color(display-p3 0.192 0.201 0.44))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#cbcdff, #cbcdff)",
30
+
default: "light-dark(#cbcdff, #3d3e82)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.799 0.805 0.987), color(display-p3 0.239 0.241 0.491))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#b8baf8, #b8baf8)",
35
+
default: "light-dark(#b8baf8, #4a4a95)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.721 0.727 0.955), color(display-p3 0.291 0.289 0.565))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#9b9ef0, #9b9ef0)",
40
+
default: "light-dark(#9b9ef0, #5958b1)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.61 0.619 0.918), color(display-p3 0.35 0.345 0.673))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.357 0.357 0.81), color(display-p3 0.357 0.357 0.81))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#5151cd, #5151cd)",
50
+
default: "light-dark(#5151cd, #6e6ade)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.318 0.318 0.774), color(display-p3 0.428 0.416 0.843))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#5753c6, #5753c6)",
55
+
default: "light-dark(#5753c6, #b1a9ff)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.337 0.326 0.748), color(display-p3 0.685 0.662 1))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#272962, #272962)",
60
+
default: "light-dark(#272962, #e0dffe)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.154 0.161 0.371), color(display-p3 0.878 0.875 0.986))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/jade.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/jade.stylex.tsx
···
2
2
3
3
export const jade = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fbfefd, #fbfefd)",
5
+
default: "light-dark(#fbfefd, #0d1512)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.986 0.996 0.992), color(display-p3 0.059 0.083 0.071))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f4fbf7, #f4fbf7)",
10
+
default: "light-dark(#f4fbf7, #121c18)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.962 0.983 0.969), color(display-p3 0.078 0.11 0.094))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#e6f7ed, #e6f7ed)",
15
+
default: "light-dark(#e6f7ed, #0f2e22)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.912 0.965 0.932), color(display-p3 0.091 0.176 0.138))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#d6f1e3, #d6f1e3)",
20
+
default: "light-dark(#d6f1e3, #0b3b2c)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.858 0.941 0.893), color(display-p3 0.102 0.228 0.177))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#c3e9d7, #c3e9d7)",
25
+
default: "light-dark(#c3e9d7, #114837)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.795 0.909 0.847), color(display-p3 0.133 0.279 0.221))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#acdec8, #acdec8)",
30
+
default: "light-dark(#acdec8, #1b5745)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.715 0.864 0.791), color(display-p3 0.174 0.334 0.273))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#8bceb6, #8bceb6)",
35
+
default: "light-dark(#8bceb6, #246854)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.603 0.802 0.718), color(display-p3 0.219 0.402 0.335))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#56ba9f, #56ba9f)",
40
+
default: "light-dark(#56ba9f, #2a7e68)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.44 0.72 0.629), color(display-p3 0.263 0.488 0.411))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.319 0.63 0.521), color(display-p3 0.319 0.63 0.521))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#26997b, #26997b)",
50
+
default: "light-dark(#26997b, #27b08b)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.299 0.592 0.488), color(display-p3 0.338 0.68 0.555))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#208368, #208368)",
55
+
default: "light-dark(#208368, #1fd8a4)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.15 0.5 0.37), color(display-p3 0.4 0.835 0.656))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#1d3b31, #1d3b31)",
60
+
default: "light-dark(#1d3b31, #adf0d4)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.142 0.229 0.194), color(display-p3 0.734 0.934 0.838))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/lime.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/lime.stylex.tsx
···
2
2
3
3
export const lime = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fcfdfa, #fcfdfa)",
5
+
default: "light-dark(#fcfdfa, #11130c)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.989 0.992 0.981), color(display-p3 0.067 0.073 0.048))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f8faf3, #f8faf3)",
10
+
default: "light-dark(#f8faf3, #151a10)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.975 0.98 0.954), color(display-p3 0.086 0.1 0.067))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#eef6d6, #eef6d6)",
15
+
default: "light-dark(#eef6d6, #1f2917)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.939 0.965 0.851), color(display-p3 0.13 0.16 0.099))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#e2f0bd, #e2f0bd)",
20
+
default: "light-dark(#e2f0bd, #29371d)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.896 0.94 0.76), color(display-p3 0.172 0.214 0.126))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#d3e7a6, #d3e7a6)",
25
+
default: "light-dark(#d3e7a6, #334423)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.843 0.903 0.678), color(display-p3 0.213 0.266 0.153))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#c2da91, #c2da91)",
30
+
default: "light-dark(#c2da91, #3d522a)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.778 0.852 0.599), color(display-p3 0.257 0.321 0.182))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#abc978, #abc978)",
35
+
default: "light-dark(#abc978, #496231)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.694 0.784 0.508), color(display-p3 0.307 0.383 0.215))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#8db654, #8db654)",
40
+
default: "light-dark(#8db654, #577538)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.585 0.707 0.378), color(display-p3 0.365 0.456 0.25))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.78 0.928 0.466), color(display-p3 0.78 0.928 0.466))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#b0e64c, #b0e64c)",
50
+
default: "light-dark(#b0e64c, #d4ff70)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.734 0.896 0.397), color(display-p3 0.865 0.995 0.519))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#5c7c2f, #5c7c2f)",
55
+
default: "light-dark(#5c7c2f, #bde56c)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.386 0.482 0.227), color(display-p3 0.771 0.893 0.485))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#37401c, #37401c)",
60
+
default: "light-dark(#37401c, #e3f7ba)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.222 0.25 0.128), color(display-p3 0.905 0.966 0.753))",
63
63
},
+24
-24
packages/hip-ui/src/components/theme/colors/mauve.stylex.tsx
+24
-24
packages/hip-ui/src/components/theme/colors/mauve.stylex.tsx
···
2
2
3
3
export const mauve = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fdfcfd, #fdfcfd)",
5
+
default: "light-dark(#fdfcfd, #121113)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.991 0.988 0.992), color(display-p3 0.07 0.067 0.074))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#faf9fb, #faf9fb)",
10
+
default: "light-dark(#faf9fb, #1a191b)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.98 0.976 0.984), color(display-p3 0.101 0.098 0.105))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#f2eff3, #f2eff3)",
15
+
default: "light-dark(#f2eff3, #232225)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.946 0.938 0.952), color(display-p3 0.138 0.134 0.144))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#eae7ec, #eae7ec)",
20
+
default: "light-dark(#eae7ec, #2b292d)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.915 0.906 0.925), color(display-p3 0.167 0.161 0.175))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#e3dfe6, #e3dfe6)",
25
+
default: "light-dark(#e3dfe6, #323035)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.886 0.876 0.901), color(display-p3 0.196 0.189 0.206))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#dbd8e0, #dbd8e0)",
30
+
default: "light-dark(#dbd8e0, #3c393f)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.856 0.846 0.875), color(display-p3 0.232 0.225 0.245))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#d0cdd7, #d0cdd7)",
35
+
default: "light-dark(#d0cdd7, #49474e)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.814 0.804 0.84), color(display-p3 0.286 0.277 0.302))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#bcbac7, #bcbac7)",
40
+
default: "light-dark(#bcbac7, #625f69)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.735 0.728 0.777), color(display-p3 0.383 0.373 0.408))",
43
43
},
44
44
solid1: {
45
-
default: "light-dark(#8e8c99, #8e8c99)",
45
+
default: "light-dark(#8e8c99, #6f6d78)",
46
46
"@media (color-gamut: p3)":
47
47
"light-dark(color(display-p3 0.555 0.549 0.596), color(display-p3 0.434 0.428 0.467))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#84828e, #84828e)",
50
+
default: "light-dark(#84828e, #7c7a85)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.514 0.508 0.552), color(display-p3 0.487 0.48 0.519))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#65636d, #65636d)",
55
+
default: "light-dark(#65636d, #b5b2bc)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.395 0.388 0.424), color(display-p3 0.707 0.7 0.735))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#211f26, #211f26)",
60
+
default: "light-dark(#211f26, #eeeef0)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.128 0.122 0.147), color(display-p3 0.933 0.933 0.94))",
63
63
},
···
127
127
128
128
export const mauveInverted = stylex.defineVars({
129
129
bg: {
130
-
default: "light-dark(#fdfcfd, #fdfcfd)",
130
+
default: "light-dark(#121113, #fdfcfd)",
131
131
"@media (color-gamut: p3)":
132
132
"light-dark(color(display-p3 0.07 0.067 0.074), color(display-p3 0.991 0.988 0.992))",
133
133
},
134
134
bgSubtle: {
135
-
default: "light-dark(#faf9fb, #faf9fb)",
135
+
default: "light-dark(#1a191b, #faf9fb)",
136
136
"@media (color-gamut: p3)":
137
137
"light-dark(color(display-p3 0.101 0.098 0.105), color(display-p3 0.98 0.976 0.984))",
138
138
},
139
139
component1: {
140
-
default: "light-dark(#f2eff3, #f2eff3)",
140
+
default: "light-dark(#232225, #f2eff3)",
141
141
"@media (color-gamut: p3)":
142
142
"light-dark(color(display-p3 0.138 0.134 0.144), color(display-p3 0.946 0.938 0.952))",
143
143
},
144
144
component2: {
145
-
default: "light-dark(#eae7ec, #eae7ec)",
145
+
default: "light-dark(#2b292d, #eae7ec)",
146
146
"@media (color-gamut: p3)":
147
147
"light-dark(color(display-p3 0.167 0.161 0.175), color(display-p3 0.915 0.906 0.925))",
148
148
},
149
149
component3: {
150
-
default: "light-dark(#e3dfe6, #e3dfe6)",
150
+
default: "light-dark(#323035, #e3dfe6)",
151
151
"@media (color-gamut: p3)":
152
152
"light-dark(color(display-p3 0.196 0.189 0.206), color(display-p3 0.886 0.876 0.901))",
153
153
},
154
154
border1: {
155
-
default: "light-dark(#dbd8e0, #dbd8e0)",
155
+
default: "light-dark(#3c393f, #dbd8e0)",
156
156
"@media (color-gamut: p3)":
157
157
"light-dark(color(display-p3 0.232 0.225 0.245), color(display-p3 0.856 0.846 0.875))",
158
158
},
159
159
border2: {
160
-
default: "light-dark(#d0cdd7, #d0cdd7)",
160
+
default: "light-dark(#49474e, #d0cdd7)",
161
161
"@media (color-gamut: p3)":
162
162
"light-dark(color(display-p3 0.286 0.277 0.302), color(display-p3 0.814 0.804 0.84))",
163
163
},
164
164
border3: {
165
-
default: "light-dark(#bcbac7, #bcbac7)",
165
+
default: "light-dark(#625f69, #bcbac7)",
166
166
"@media (color-gamut: p3)":
167
167
"light-dark(color(display-p3 0.383 0.373 0.408), color(display-p3 0.735 0.728 0.777))",
168
168
},
169
169
solid1: {
170
-
default: "light-dark(#8e8c99, #8e8c99)",
170
+
default: "light-dark(#6f6d78, #8e8c99)",
171
171
"@media (color-gamut: p3)":
172
172
"light-dark(color(display-p3 0.434 0.428 0.467), color(display-p3 0.555 0.549 0.596))",
173
173
},
174
174
solid2: {
175
-
default: "light-dark(#84828e, #84828e)",
175
+
default: "light-dark(#7c7a85, #84828e)",
176
176
"@media (color-gamut: p3)":
177
177
"light-dark(color(display-p3 0.487 0.48 0.519), color(display-p3 0.514 0.508 0.552))",
178
178
},
179
179
text1: {
180
-
default: "light-dark(#65636d, #65636d)",
180
+
default: "light-dark(#b5b2bc, #65636d)",
181
181
"@media (color-gamut: p3)":
182
182
"light-dark(color(display-p3 0.707 0.7 0.735), color(display-p3 0.395 0.388 0.424))",
183
183
},
184
184
text2: {
185
-
default: "light-dark(#211f26, #211f26)",
185
+
default: "light-dark(#eeeef0, #211f26)",
186
186
"@media (color-gamut: p3)":
187
187
"light-dark(color(display-p3 0.933 0.933 0.94), color(display-p3 0.128 0.122 0.147))",
188
188
},
+11
-11
packages/hip-ui/src/components/theme/colors/mint.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/mint.stylex.tsx
···
2
2
3
3
export const mint = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#f9fefd, #f9fefd)",
5
+
default: "light-dark(#f9fefd, #0e1515)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.98 0.995 0.992), color(display-p3 0.059 0.082 0.081))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f2fbf9, #f2fbf9)",
10
+
default: "light-dark(#f2fbf9, #0f1b1b)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.957 0.985 0.977), color(display-p3 0.068 0.104 0.105))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#ddf9f2, #ddf9f2)",
15
+
default: "light-dark(#ddf9f2, #092c2b)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.888 0.972 0.95), color(display-p3 0.077 0.17 0.168))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#c8f4e9, #c8f4e9)",
20
+
default: "light-dark(#c8f4e9, #003a38)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.819 0.951 0.916), color(display-p3 0.068 0.224 0.22))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#b3ecde, #b3ecde)",
25
+
default: "light-dark(#b3ecde, #004744)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.747 0.918 0.873), color(display-p3 0.104 0.275 0.264))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#9ce0d0, #9ce0d0)",
30
+
default: "light-dark(#9ce0d0, #105650)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.668 0.87 0.818), color(display-p3 0.154 0.332 0.313))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#7ecfbd, #7ecfbd)",
35
+
default: "light-dark(#7ecfbd, #1e685f)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.567 0.805 0.744), color(display-p3 0.207 0.403 0.373))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#4cbba5, #4cbba5)",
40
+
default: "light-dark(#4cbba5, #277f70)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.42 0.724 0.649), color(display-p3 0.258 0.49 0.441))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.62 0.908 0.834), color(display-p3 0.62 0.908 0.834))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#7de0cb, #7de0cb)",
50
+
default: "light-dark(#7de0cb, #a8f5e5)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.585 0.871 0.797), color(display-p3 0.725 0.954 0.898))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#027864, #027864)",
55
+
default: "light-dark(#027864, #58d5ba)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.203 0.463 0.397), color(display-p3 0.482 0.825 0.733))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#16433c, #16433c)",
60
+
default: "light-dark(#16433c, #c4f5e1)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.136 0.259 0.236), color(display-p3 0.807 0.955 0.887))",
63
63
},
+24
-24
packages/hip-ui/src/components/theme/colors/olive.stylex.tsx
+24
-24
packages/hip-ui/src/components/theme/colors/olive.stylex.tsx
···
2
2
3
3
export const olive = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fcfdfc, #fcfdfc)",
5
+
default: "light-dark(#fcfdfc, #111210)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.989 0.992 0.989), color(display-p3 0.067 0.07 0.063))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f8faf8, #f8faf8)",
10
+
default: "light-dark(#f8faf8, #181917)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.974 0.98 0.973), color(display-p3 0.095 0.098 0.091))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#eff1ef, #eff1ef)",
15
+
default: "light-dark(#eff1ef, #212220)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.939 0.945 0.937), color(display-p3 0.131 0.135 0.126))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#e7e9e7, #e7e9e7)",
20
+
default: "light-dark(#e7e9e7, #282a27)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.907 0.914 0.905), color(display-p3 0.158 0.163 0.153))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#dfe2df, #dfe2df)",
25
+
default: "light-dark(#dfe2df, #2f312e)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.878 0.885 0.875), color(display-p3 0.186 0.192 0.18))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#d7dad7, #d7dad7)",
30
+
default: "light-dark(#d7dad7, #383a36)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.846 0.855 0.843), color(display-p3 0.221 0.229 0.215))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#cccfcc, #cccfcc)",
35
+
default: "light-dark(#cccfcc, #454843)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.803 0.812 0.8), color(display-p3 0.273 0.284 0.266))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#b9bcb8, #b9bcb8)",
40
+
default: "light-dark(#b9bcb8, #5c625b)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.727 0.738 0.723), color(display-p3 0.365 0.382 0.359))",
43
43
},
44
44
solid1: {
45
-
default: "light-dark(#898e87, #898e87)",
45
+
default: "light-dark(#898e87, #687066)",
46
46
"@media (color-gamut: p3)":
47
47
"light-dark(color(display-p3 0.541 0.556 0.532), color(display-p3 0.414 0.438 0.404))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#7f847d, #7f847d)",
50
+
default: "light-dark(#7f847d, #767d74)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.5 0.515 0.491), color(display-p3 0.467 0.49 0.458))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#60655f, #60655f)",
55
+
default: "light-dark(#60655f, #afb5ad)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.38 0.395 0.374), color(display-p3 0.69 0.709 0.682))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#1d211c, #1d211c)",
60
+
default: "light-dark(#1d211c, #eceeec)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.117 0.129 0.111), color(display-p3 0.927 0.933 0.926))",
63
63
},
···
127
127
128
128
export const oliveInverted = stylex.defineVars({
129
129
bg: {
130
-
default: "light-dark(#fcfdfc, #fcfdfc)",
130
+
default: "light-dark(#111210, #fcfdfc)",
131
131
"@media (color-gamut: p3)":
132
132
"light-dark(color(display-p3 0.067 0.07 0.063), color(display-p3 0.989 0.992 0.989))",
133
133
},
134
134
bgSubtle: {
135
-
default: "light-dark(#f8faf8, #f8faf8)",
135
+
default: "light-dark(#181917, #f8faf8)",
136
136
"@media (color-gamut: p3)":
137
137
"light-dark(color(display-p3 0.095 0.098 0.091), color(display-p3 0.974 0.98 0.973))",
138
138
},
139
139
component1: {
140
-
default: "light-dark(#eff1ef, #eff1ef)",
140
+
default: "light-dark(#212220, #eff1ef)",
141
141
"@media (color-gamut: p3)":
142
142
"light-dark(color(display-p3 0.131 0.135 0.126), color(display-p3 0.939 0.945 0.937))",
143
143
},
144
144
component2: {
145
-
default: "light-dark(#e7e9e7, #e7e9e7)",
145
+
default: "light-dark(#282a27, #e7e9e7)",
146
146
"@media (color-gamut: p3)":
147
147
"light-dark(color(display-p3 0.158 0.163 0.153), color(display-p3 0.907 0.914 0.905))",
148
148
},
149
149
component3: {
150
-
default: "light-dark(#dfe2df, #dfe2df)",
150
+
default: "light-dark(#2f312e, #dfe2df)",
151
151
"@media (color-gamut: p3)":
152
152
"light-dark(color(display-p3 0.186 0.192 0.18), color(display-p3 0.878 0.885 0.875))",
153
153
},
154
154
border1: {
155
-
default: "light-dark(#d7dad7, #d7dad7)",
155
+
default: "light-dark(#383a36, #d7dad7)",
156
156
"@media (color-gamut: p3)":
157
157
"light-dark(color(display-p3 0.221 0.229 0.215), color(display-p3 0.846 0.855 0.843))",
158
158
},
159
159
border2: {
160
-
default: "light-dark(#cccfcc, #cccfcc)",
160
+
default: "light-dark(#454843, #cccfcc)",
161
161
"@media (color-gamut: p3)":
162
162
"light-dark(color(display-p3 0.273 0.284 0.266), color(display-p3 0.803 0.812 0.8))",
163
163
},
164
164
border3: {
165
-
default: "light-dark(#b9bcb8, #b9bcb8)",
165
+
default: "light-dark(#5c625b, #b9bcb8)",
166
166
"@media (color-gamut: p3)":
167
167
"light-dark(color(display-p3 0.365 0.382 0.359), color(display-p3 0.727 0.738 0.723))",
168
168
},
169
169
solid1: {
170
-
default: "light-dark(#898e87, #898e87)",
170
+
default: "light-dark(#687066, #898e87)",
171
171
"@media (color-gamut: p3)":
172
172
"light-dark(color(display-p3 0.414 0.438 0.404), color(display-p3 0.541 0.556 0.532))",
173
173
},
174
174
solid2: {
175
-
default: "light-dark(#7f847d, #7f847d)",
175
+
default: "light-dark(#767d74, #7f847d)",
176
176
"@media (color-gamut: p3)":
177
177
"light-dark(color(display-p3 0.467 0.49 0.458), color(display-p3 0.5 0.515 0.491))",
178
178
},
179
179
text1: {
180
-
default: "light-dark(#60655f, #60655f)",
180
+
default: "light-dark(#afb5ad, #60655f)",
181
181
"@media (color-gamut: p3)":
182
182
"light-dark(color(display-p3 0.69 0.709 0.682), color(display-p3 0.38 0.395 0.374))",
183
183
},
184
184
text2: {
185
-
default: "light-dark(#1d211c, #1d211c)",
185
+
default: "light-dark(#eceeec, #1d211c)",
186
186
"@media (color-gamut: p3)":
187
187
"light-dark(color(display-p3 0.927 0.933 0.926), color(display-p3 0.117 0.129 0.111))",
188
188
},
+11
-11
packages/hip-ui/src/components/theme/colors/orange.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/orange.stylex.tsx
···
2
2
3
3
export const orange = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fefcfb, #fefcfb)",
5
+
default: "light-dark(#fefcfb, #17120e)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.995 0.988 0.985), color(display-p3 0.088 0.07 0.057))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fff7ed, #fff7ed)",
10
+
default: "light-dark(#fff7ed, #1e160f)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.994 0.968 0.934), color(display-p3 0.113 0.089 0.061))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#ffefd6, #ffefd6)",
15
+
default: "light-dark(#ffefd6, #331e0b)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.989 0.938 0.85), color(display-p3 0.189 0.12 0.056))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#ffdfb5, #ffdfb5)",
20
+
default: "light-dark(#ffdfb5, #462100)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 1 0.874 0.687), color(display-p3 0.262 0.132 0))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#ffd19a, #ffd19a)",
25
+
default: "light-dark(#ffd19a, #562800)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 1 0.821 0.583), color(display-p3 0.315 0.168 0.016))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#ffc182, #ffc182)",
30
+
default: "light-dark(#ffc182, #66350c)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.975 0.767 0.545), color(display-p3 0.376 0.219 0.088))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#f5ae73, #f5ae73)",
35
+
default: "light-dark(#f5ae73, #7e451d)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.919 0.693 0.486), color(display-p3 0.465 0.283 0.147))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#ec9455, #ec9455)",
40
+
default: "light-dark(#ec9455, #a35829)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.877 0.597 0.379), color(display-p3 0.601 0.359 0.201))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.9 0.45 0.2), color(display-p3 0.9 0.45 0.2))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#ef5f00, #ef5f00)",
50
+
default: "light-dark(#ef5f00, #ff801f)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.87 0.409 0.164), color(display-p3 0.98 0.51 0.23))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#cc4e00, #cc4e00)",
55
+
default: "light-dark(#cc4e00, #ffa057)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#582d1d, #582d1d)",
60
+
default: "light-dark(#582d1d, #ffe0c2)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.323 0.185 0.127), color(display-p3 0.98 0.883 0.775))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/pink.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/pink.stylex.tsx
···
2
2
3
3
export const pink = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fffcfe, #fffcfe)",
5
+
default: "light-dark(#fffcfe, #191117)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.998 0.989 0.996), color(display-p3 0.093 0.068 0.089))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fef7fb, #fef7fb)",
10
+
default: "light-dark(#fef7fb, #21121d)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.992 0.97 0.985), color(display-p3 0.121 0.073 0.11))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#fee9f5, #fee9f5)",
15
+
default: "light-dark(#fee9f5, #37172f)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.981 0.917 0.96), color(display-p3 0.198 0.098 0.179))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#fbdcef, #fbdcef)",
20
+
default: "light-dark(#fbdcef, #4b143d)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.963 0.867 0.932), color(display-p3 0.271 0.095 0.231))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#f6cee7, #f6cee7)",
25
+
default: "light-dark(#f6cee7, #591c47)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.939 0.815 0.899), color(display-p3 0.32 0.127 0.273))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#efbfdd, #efbfdd)",
30
+
default: "light-dark(#efbfdd, #692955)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.907 0.756 0.859), color(display-p3 0.382 0.177 0.326))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#e7acd0, #e7acd0)",
35
+
default: "light-dark(#e7acd0, #833869)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.869 0.683 0.81), color(display-p3 0.477 0.238 0.405))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#dd93c2, #dd93c2)",
40
+
default: "light-dark(#dd93c2, #a84885)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.825 0.59 0.751), color(display-p3 0.612 0.304 0.51))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.775 0.297 0.61), color(display-p3 0.775 0.297 0.61))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#cf3897, #cf3897)",
50
+
default: "light-dark(#cf3897, #de51a8)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.748 0.27 0.581), color(display-p3 0.808 0.356 0.645))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#c2298a, #c2298a)",
55
+
default: "light-dark(#c2298a, #ff8dcc)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.698 0.219 0.528), color(display-p3 1 0.535 0.78))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#651249, #651249)",
60
+
default: "light-dark(#651249, #fdd1ea)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.363 0.101 0.279), color(display-p3 0.964 0.826 0.912))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/plum.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/plum.stylex.tsx
···
2
2
3
3
export const plum = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fefcff, #fefcff)",
5
+
default: "light-dark(#fefcff, #181118)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.995 0.988 0.999), color(display-p3 0.09 0.068 0.092))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fdf7fd, #fdf7fd)",
10
+
default: "light-dark(#fdf7fd, #201320)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.988 0.971 0.99), color(display-p3 0.118 0.077 0.121))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#fbebfb, #fbebfb)",
15
+
default: "light-dark(#fbebfb, #351a35)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.973 0.923 0.98), color(display-p3 0.192 0.105 0.202))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#f7def8, #f7def8)",
20
+
default: "light-dark(#f7def8, #451d47)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.953 0.875 0.966), color(display-p3 0.25 0.121 0.271))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#f2d1f3, #f2d1f3)",
25
+
default: "light-dark(#f2d1f3, #512454)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.926 0.825 0.945), color(display-p3 0.293 0.152 0.319))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#e9c2ec, #e9c2ec)",
30
+
default: "light-dark(#e9c2ec, #5e3061)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.89 0.765 0.916), color(display-p3 0.343 0.198 0.372))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#deade3, #deade3)",
35
+
default: "light-dark(#deade3, #734079)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.84 0.686 0.877), color(display-p3 0.424 0.262 0.461))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#cf91d8, #cf91d8)",
40
+
default: "light-dark(#cf91d8, #92549c)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.775 0.58 0.832), color(display-p3 0.54 0.341 0.595))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.624 0.313 0.708), color(display-p3 0.624 0.313 0.708))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#a144af, #a144af)",
50
+
default: "light-dark(#a144af, #b658c4)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.587 0.29 0.667), color(display-p3 0.666 0.365 0.748))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#953ea3, #953ea3)",
55
+
default: "light-dark(#953ea3, #e796f3)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.543 0.263 0.619), color(display-p3 0.86 0.602 0.933))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#53195d, #53195d)",
60
+
default: "light-dark(#53195d, #f4d4f4)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.299 0.114 0.352), color(display-p3 0.936 0.836 0.949))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/purple.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/purple.stylex.tsx
···
2
2
3
3
export const purple = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fefcfe, #fefcfe)",
5
+
default: "light-dark(#fefcfe, #18111b)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.995 0.988 0.996), color(display-p3 0.09 0.068 0.103))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fbf7fe, #fbf7fe)",
10
+
default: "light-dark(#fbf7fe, #1e1523)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.983 0.971 0.993), color(display-p3 0.113 0.082 0.134))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#f7edfe, #f7edfe)",
15
+
default: "light-dark(#f7edfe, #301c3b)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.963 0.931 0.989), color(display-p3 0.175 0.112 0.224))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#f2e2fc, #f2e2fc)",
20
+
default: "light-dark(#f2e2fc, #3d224e)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.937 0.888 0.981), color(display-p3 0.224 0.137 0.297))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#ead5f9, #ead5f9)",
25
+
default: "light-dark(#ead5f9, #48295c)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.904 0.837 0.966), color(display-p3 0.264 0.167 0.349))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#e0c4f4, #e0c4f4)",
30
+
default: "light-dark(#e0c4f4, #54346b)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.86 0.774 0.942), color(display-p3 0.311 0.208 0.406))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#d1afec, #d1afec)",
35
+
default: "light-dark(#d1afec, #664282)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.799 0.69 0.91), color(display-p3 0.381 0.266 0.496))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#be93e4, #be93e4)",
40
+
default: "light-dark(#be93e4, #8457aa)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.719 0.583 0.874), color(display-p3 0.49 0.349 0.649))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.523 0.318 0.751), color(display-p3 0.523 0.318 0.751))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#8347b9, #8347b9)",
50
+
default: "light-dark(#8347b9, #9a5cd0)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.483 0.289 0.7), color(display-p3 0.57 0.373 0.791))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#8145b5, #8145b5)",
55
+
default: "light-dark(#8145b5, #d19dff)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.473 0.281 0.687), color(display-p3 0.8 0.62 1))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#402060, #402060)",
60
+
default: "light-dark(#402060, #ecd9fa)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.234 0.132 0.363), color(display-p3 0.913 0.854 0.971))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/red.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/red.stylex.tsx
···
2
2
3
3
export const red = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fffcfc, #fffcfc)",
5
+
default: "light-dark(#fffcfc, #191111)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.998 0.989 0.988), color(display-p3 0.093 0.068 0.067))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fff7f7, #fff7f7)",
10
+
default: "light-dark(#fff7f7, #201314)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.995 0.971 0.971), color(display-p3 0.118 0.077 0.079))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#feebec, #feebec)",
15
+
default: "light-dark(#feebec, #3b1219)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.985 0.925 0.925), color(display-p3 0.211 0.081 0.099))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#ffdbdc, #ffdbdc)",
20
+
default: "light-dark(#ffdbdc, #500f1c)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.999 0.866 0.866), color(display-p3 0.287 0.079 0.113))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#ffcdce, #ffcdce)",
25
+
default: "light-dark(#ffcdce, #611623)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.984 0.812 0.811), color(display-p3 0.348 0.11 0.142))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#fdbdbe, #fdbdbe)",
30
+
default: "light-dark(#fdbdbe, #72232d)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.955 0.751 0.749), color(display-p3 0.414 0.16 0.183))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#f4a9aa, #f4a9aa)",
35
+
default: "light-dark(#f4a9aa, #8c333a)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.915 0.675 0.672), color(display-p3 0.508 0.224 0.236))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#eb8e90, #eb8e90)",
40
+
default: "light-dark(#eb8e90, #b54548)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.872 0.575 0.572), color(display-p3 0.659 0.298 0.297))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.83 0.329 0.324), color(display-p3 0.83 0.329 0.324))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#dc3e42, #dc3e42)",
50
+
default: "light-dark(#dc3e42, #ec5d5e)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.798 0.294 0.285), color(display-p3 0.861 0.403 0.387))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#ce2c31, #ce2c31)",
55
+
default: "light-dark(#ce2c31, #ff9592)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.744 0.234 0.222), color(display-p3 1 0.57 0.55))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#641723, #641723)",
60
+
default: "light-dark(#641723, #ffd1d9)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.36 0.115 0.143), color(display-p3 0.971 0.826 0.852))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/ruby.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/ruby.stylex.tsx
···
2
2
3
3
export const ruby = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fffcfd, #fffcfd)",
5
+
default: "light-dark(#fffcfd, #191113)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.998 0.989 0.992), color(display-p3 0.093 0.068 0.074))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fff7f8, #fff7f8)",
10
+
default: "light-dark(#fff7f8, #1e1517)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.995 0.971 0.974), color(display-p3 0.113 0.083 0.089))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#feeaed, #feeaed)",
15
+
default: "light-dark(#feeaed, #3a141e)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.983 0.92 0.928), color(display-p3 0.208 0.088 0.117))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#ffdce1, #ffdce1)",
20
+
default: "light-dark(#ffdce1, #4e1325)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.987 0.869 0.885), color(display-p3 0.279 0.092 0.147))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#ffced6, #ffced6)",
25
+
default: "light-dark(#ffced6, #5e1a2e)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.968 0.817 0.839), color(display-p3 0.337 0.12 0.18))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#f8bfc8, #f8bfc8)",
30
+
default: "light-dark(#f8bfc8, #6f2539)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.937 0.758 0.786), color(display-p3 0.401 0.166 0.223))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#efacb8, #efacb8)",
35
+
default: "light-dark(#efacb8, #883447)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.897 0.685 0.721), color(display-p3 0.495 0.224 0.281))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#e592a3, #e592a3)",
40
+
default: "light-dark(#e592a3, #b3445a)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.851 0.588 0.639), color(display-p3 0.652 0.295 0.359))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.83 0.323 0.408), color(display-p3 0.83 0.323 0.408))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#dc3b5d, #dc3b5d)",
50
+
default: "light-dark(#dc3b5d, #ec5a72)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.795 0.286 0.375), color(display-p3 0.857 0.392 0.455))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#ca244d, #ca244d)",
55
+
default: "light-dark(#ca244d, #ff949d)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.728 0.211 0.311), color(display-p3 1 0.57 0.59))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#64172b, #64172b)",
60
+
default: "light-dark(#64172b, #fed2e1)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.36 0.115 0.171), color(display-p3 0.968 0.83 0.88))",
63
63
},
+24
-24
packages/hip-ui/src/components/theme/colors/sage.stylex.tsx
+24
-24
packages/hip-ui/src/components/theme/colors/sage.stylex.tsx
···
2
2
3
3
export const sage = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fbfdfc, #fbfdfc)",
5
+
default: "light-dark(#fbfdfc, #101211)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.986 0.992 0.988), color(display-p3 0.064 0.07 0.067))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f7f9f8, #f7f9f8)",
10
+
default: "light-dark(#f7f9f8, #171918)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.97 0.977 0.974), color(display-p3 0.092 0.098 0.094))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#eef1f0, #eef1f0)",
15
+
default: "light-dark(#eef1f0, #202221)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.935 0.944 0.94), color(display-p3 0.128 0.135 0.131))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#e6e9e8, #e6e9e8)",
20
+
default: "light-dark(#e6e9e8, #272a29)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.904 0.913 0.909), color(display-p3 0.155 0.164 0.159))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#dfe2e0, #dfe2e0)",
25
+
default: "light-dark(#dfe2e0, #2e3130)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.875 0.885 0.88), color(display-p3 0.183 0.193 0.188))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#d7dad9, #d7dad9)",
30
+
default: "light-dark(#d7dad9, #373b39)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.844 0.854 0.849), color(display-p3 0.218 0.23 0.224))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#cbcfcd, #cbcfcd)",
35
+
default: "light-dark(#cbcfcd, #444947)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.8 0.811 0.806), color(display-p3 0.269 0.285 0.277))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#b8bcba, #b8bcba)",
40
+
default: "light-dark(#b8bcba, #5b625f)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.725 0.738 0.732), color(display-p3 0.362 0.382 0.373))",
43
43
},
44
44
solid1: {
45
-
default: "light-dark(#868e8b, #868e8b)",
45
+
default: "light-dark(#868e8b, #63706b)",
46
46
"@media (color-gamut: p3)":
47
47
"light-dark(color(display-p3 0.531 0.556 0.546), color(display-p3 0.398 0.438 0.421))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#7c8481, #7c8481)",
50
+
default: "light-dark(#7c8481, #717d79)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.492 0.515 0.506), color(display-p3 0.453 0.49 0.474))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#5f6563, #5f6563)",
55
+
default: "light-dark(#5f6563, #adb5b2)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.377 0.395 0.389), color(display-p3 0.685 0.709 0.697))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#1a211e, #1a211e)",
60
+
default: "light-dark(#1a211e, #eceeed)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.107 0.129 0.118), color(display-p3 0.927 0.933 0.93))",
63
63
},
···
127
127
128
128
export const sageInverted = stylex.defineVars({
129
129
bg: {
130
-
default: "light-dark(#fbfdfc, #fbfdfc)",
130
+
default: "light-dark(#101211, #fbfdfc)",
131
131
"@media (color-gamut: p3)":
132
132
"light-dark(color(display-p3 0.064 0.07 0.067), color(display-p3 0.986 0.992 0.988))",
133
133
},
134
134
bgSubtle: {
135
-
default: "light-dark(#f7f9f8, #f7f9f8)",
135
+
default: "light-dark(#171918, #f7f9f8)",
136
136
"@media (color-gamut: p3)":
137
137
"light-dark(color(display-p3 0.092 0.098 0.094), color(display-p3 0.97 0.977 0.974))",
138
138
},
139
139
component1: {
140
-
default: "light-dark(#eef1f0, #eef1f0)",
140
+
default: "light-dark(#202221, #eef1f0)",
141
141
"@media (color-gamut: p3)":
142
142
"light-dark(color(display-p3 0.128 0.135 0.131), color(display-p3 0.935 0.944 0.94))",
143
143
},
144
144
component2: {
145
-
default: "light-dark(#e6e9e8, #e6e9e8)",
145
+
default: "light-dark(#272a29, #e6e9e8)",
146
146
"@media (color-gamut: p3)":
147
147
"light-dark(color(display-p3 0.155 0.164 0.159), color(display-p3 0.904 0.913 0.909))",
148
148
},
149
149
component3: {
150
-
default: "light-dark(#dfe2e0, #dfe2e0)",
150
+
default: "light-dark(#2e3130, #dfe2e0)",
151
151
"@media (color-gamut: p3)":
152
152
"light-dark(color(display-p3 0.183 0.193 0.188), color(display-p3 0.875 0.885 0.88))",
153
153
},
154
154
border1: {
155
-
default: "light-dark(#d7dad9, #d7dad9)",
155
+
default: "light-dark(#373b39, #d7dad9)",
156
156
"@media (color-gamut: p3)":
157
157
"light-dark(color(display-p3 0.218 0.23 0.224), color(display-p3 0.844 0.854 0.849))",
158
158
},
159
159
border2: {
160
-
default: "light-dark(#cbcfcd, #cbcfcd)",
160
+
default: "light-dark(#444947, #cbcfcd)",
161
161
"@media (color-gamut: p3)":
162
162
"light-dark(color(display-p3 0.269 0.285 0.277), color(display-p3 0.8 0.811 0.806))",
163
163
},
164
164
border3: {
165
-
default: "light-dark(#b8bcba, #b8bcba)",
165
+
default: "light-dark(#5b625f, #b8bcba)",
166
166
"@media (color-gamut: p3)":
167
167
"light-dark(color(display-p3 0.362 0.382 0.373), color(display-p3 0.725 0.738 0.732))",
168
168
},
169
169
solid1: {
170
-
default: "light-dark(#868e8b, #868e8b)",
170
+
default: "light-dark(#63706b, #868e8b)",
171
171
"@media (color-gamut: p3)":
172
172
"light-dark(color(display-p3 0.398 0.438 0.421), color(display-p3 0.531 0.556 0.546))",
173
173
},
174
174
solid2: {
175
-
default: "light-dark(#7c8481, #7c8481)",
175
+
default: "light-dark(#717d79, #7c8481)",
176
176
"@media (color-gamut: p3)":
177
177
"light-dark(color(display-p3 0.453 0.49 0.474), color(display-p3 0.492 0.515 0.506))",
178
178
},
179
179
text1: {
180
-
default: "light-dark(#5f6563, #5f6563)",
180
+
default: "light-dark(#adb5b2, #5f6563)",
181
181
"@media (color-gamut: p3)":
182
182
"light-dark(color(display-p3 0.685 0.709 0.697), color(display-p3 0.377 0.395 0.389))",
183
183
},
184
184
text2: {
185
-
default: "light-dark(#1a211e, #1a211e)",
185
+
default: "light-dark(#eceeed, #1a211e)",
186
186
"@media (color-gamut: p3)":
187
187
"light-dark(color(display-p3 0.927 0.933 0.93), color(display-p3 0.107 0.129 0.118))",
188
188
},
+24
-24
packages/hip-ui/src/components/theme/colors/sand.stylex.tsx
+24
-24
packages/hip-ui/src/components/theme/colors/sand.stylex.tsx
···
2
2
3
3
export const sand = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fdfdfc, #fdfdfc)",
5
+
default: "light-dark(#fdfdfc, #111110)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.992 0.992 0.989), color(display-p3 0.067 0.067 0.063))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f9f9f8, #f9f9f8)",
10
+
default: "light-dark(#f9f9f8, #191918)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.977 0.977 0.973), color(display-p3 0.098 0.098 0.094))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#f1f0ef, #f1f0ef)",
15
+
default: "light-dark(#f1f0ef, #222221)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.943 0.942 0.936), color(display-p3 0.135 0.135 0.129))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#e9e8e6, #e9e8e6)",
20
+
default: "light-dark(#e9e8e6, #2a2a28)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.913 0.912 0.903), color(display-p3 0.164 0.163 0.156))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#e2e1de, #e2e1de)",
25
+
default: "light-dark(#e2e1de, #31312e)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.885 0.883 0.873), color(display-p3 0.193 0.192 0.183))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#dad9d6, #dad9d6)",
30
+
default: "light-dark(#dad9d6, #3b3a37)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.854 0.852 0.839), color(display-p3 0.23 0.229 0.217))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#cfceca, #cfceca)",
35
+
default: "light-dark(#cfceca, #494844)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.813 0.81 0.794), color(display-p3 0.285 0.282 0.267))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#bcbbb5, #bcbbb5)",
40
+
default: "light-dark(#bcbbb5, #62605b)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.738 0.734 0.713), color(display-p3 0.384 0.378 0.357))",
43
43
},
44
44
solid1: {
45
-
default: "light-dark(#8d8d86, #8d8d86)",
45
+
default: "light-dark(#8d8d86, #6f6d66)",
46
46
"@media (color-gamut: p3)":
47
47
"light-dark(color(display-p3 0.553 0.553 0.528), color(display-p3 0.434 0.428 0.403))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#82827c, #82827c)",
50
+
default: "light-dark(#82827c, #7c7b74)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.511 0.511 0.488), color(display-p3 0.487 0.481 0.456))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#63635e, #63635e)",
55
+
default: "light-dark(#63635e, #b5b3ad)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.388 0.388 0.37), color(display-p3 0.707 0.703 0.68))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#21201c, #21201c)",
60
+
default: "light-dark(#21201c, #eeeeec)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.129 0.126 0.111), color(display-p3 0.933 0.933 0.926))",
63
63
},
···
127
127
128
128
export const sandInverted = stylex.defineVars({
129
129
bg: {
130
-
default: "light-dark(#fdfdfc, #fdfdfc)",
130
+
default: "light-dark(#111110, #fdfdfc)",
131
131
"@media (color-gamut: p3)":
132
132
"light-dark(color(display-p3 0.067 0.067 0.063), color(display-p3 0.992 0.992 0.989))",
133
133
},
134
134
bgSubtle: {
135
-
default: "light-dark(#f9f9f8, #f9f9f8)",
135
+
default: "light-dark(#191918, #f9f9f8)",
136
136
"@media (color-gamut: p3)":
137
137
"light-dark(color(display-p3 0.098 0.098 0.094), color(display-p3 0.977 0.977 0.973))",
138
138
},
139
139
component1: {
140
-
default: "light-dark(#f1f0ef, #f1f0ef)",
140
+
default: "light-dark(#222221, #f1f0ef)",
141
141
"@media (color-gamut: p3)":
142
142
"light-dark(color(display-p3 0.135 0.135 0.129), color(display-p3 0.943 0.942 0.936))",
143
143
},
144
144
component2: {
145
-
default: "light-dark(#e9e8e6, #e9e8e6)",
145
+
default: "light-dark(#2a2a28, #e9e8e6)",
146
146
"@media (color-gamut: p3)":
147
147
"light-dark(color(display-p3 0.164 0.163 0.156), color(display-p3 0.913 0.912 0.903))",
148
148
},
149
149
component3: {
150
-
default: "light-dark(#e2e1de, #e2e1de)",
150
+
default: "light-dark(#31312e, #e2e1de)",
151
151
"@media (color-gamut: p3)":
152
152
"light-dark(color(display-p3 0.193 0.192 0.183), color(display-p3 0.885 0.883 0.873))",
153
153
},
154
154
border1: {
155
-
default: "light-dark(#dad9d6, #dad9d6)",
155
+
default: "light-dark(#3b3a37, #dad9d6)",
156
156
"@media (color-gamut: p3)":
157
157
"light-dark(color(display-p3 0.23 0.229 0.217), color(display-p3 0.854 0.852 0.839))",
158
158
},
159
159
border2: {
160
-
default: "light-dark(#cfceca, #cfceca)",
160
+
default: "light-dark(#494844, #cfceca)",
161
161
"@media (color-gamut: p3)":
162
162
"light-dark(color(display-p3 0.285 0.282 0.267), color(display-p3 0.813 0.81 0.794))",
163
163
},
164
164
border3: {
165
-
default: "light-dark(#bcbbb5, #bcbbb5)",
165
+
default: "light-dark(#62605b, #bcbbb5)",
166
166
"@media (color-gamut: p3)":
167
167
"light-dark(color(display-p3 0.384 0.378 0.357), color(display-p3 0.738 0.734 0.713))",
168
168
},
169
169
solid1: {
170
-
default: "light-dark(#8d8d86, #8d8d86)",
170
+
default: "light-dark(#6f6d66, #8d8d86)",
171
171
"@media (color-gamut: p3)":
172
172
"light-dark(color(display-p3 0.434 0.428 0.403), color(display-p3 0.553 0.553 0.528))",
173
173
},
174
174
solid2: {
175
-
default: "light-dark(#82827c, #82827c)",
175
+
default: "light-dark(#7c7b74, #82827c)",
176
176
"@media (color-gamut: p3)":
177
177
"light-dark(color(display-p3 0.487 0.481 0.456), color(display-p3 0.511 0.511 0.488))",
178
178
},
179
179
text1: {
180
-
default: "light-dark(#63635e, #63635e)",
180
+
default: "light-dark(#b5b3ad, #63635e)",
181
181
"@media (color-gamut: p3)":
182
182
"light-dark(color(display-p3 0.707 0.703 0.68), color(display-p3 0.388 0.388 0.37))",
183
183
},
184
184
text2: {
185
-
default: "light-dark(#21201c, #21201c)",
185
+
default: "light-dark(#eeeeec, #21201c)",
186
186
"@media (color-gamut: p3)":
187
187
"light-dark(color(display-p3 0.933 0.933 0.926), color(display-p3 0.129 0.126 0.111))",
188
188
},
+11
-11
packages/hip-ui/src/components/theme/colors/sky.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/sky.stylex.tsx
···
2
2
3
3
export const sky = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#f9feff, #f9feff)",
5
+
default: "light-dark(#f9feff, #0d141f)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.98 0.995 0.999), color(display-p3 0.056 0.078 0.116))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f1fafd, #f1fafd)",
10
+
default: "light-dark(#f1fafd, #111a27)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.953 0.98 0.99), color(display-p3 0.075 0.101 0.149))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#e1f6fd, #e1f6fd)",
15
+
default: "light-dark(#e1f6fd, #112840)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.899 0.963 0.989), color(display-p3 0.089 0.154 0.244))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#d1f0fa, #d1f0fa)",
20
+
default: "light-dark(#d1f0fa, #113555)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.842 0.937 0.977), color(display-p3 0.106 0.207 0.323))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#bee7f5, #bee7f5)",
25
+
default: "light-dark(#bee7f5, #154467)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.777 0.9 0.954), color(display-p3 0.135 0.261 0.394))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#a9daed, #a9daed)",
30
+
default: "light-dark(#a9daed, #1b537b)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.701 0.851 0.921), color(display-p3 0.17 0.322 0.469))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#8dcae3, #8dcae3)",
35
+
default: "light-dark(#8dcae3, #1f6692)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.604 0.785 0.879), color(display-p3 0.205 0.394 0.557))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#60b3d7, #60b3d7)",
40
+
default: "light-dark(#60b3d7, #197cae)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.457 0.696 0.829), color(display-p3 0.232 0.48 0.665))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.585 0.877 0.983), color(display-p3 0.585 0.877 0.983))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#74daf8, #74daf8)",
50
+
default: "light-dark(#74daf8, #a8eeff)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.555 0.845 0.959), color(display-p3 0.718 0.925 0.991))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#00749e, #00749e)",
55
+
default: "light-dark(#00749e, #75c7f0)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.193 0.448 0.605), color(display-p3 0.536 0.772 0.924))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#1d3e56, #1d3e56)",
60
+
default: "light-dark(#1d3e56, #c2f3ff)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.145 0.241 0.329), color(display-p3 0.799 0.947 0.993))",
63
63
},
+24
-24
packages/hip-ui/src/components/theme/colors/slate.stylex.tsx
+24
-24
packages/hip-ui/src/components/theme/colors/slate.stylex.tsx
···
2
2
3
3
export const slate = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fcfcfd, #fcfcfd)",
5
+
default: "light-dark(#fcfcfd, #111113)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.988 0.988 0.992), color(display-p3 0.067 0.067 0.074))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f9f9fb, #f9f9fb)",
10
+
default: "light-dark(#f9f9fb, #18191b)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.976 0.976 0.984), color(display-p3 0.095 0.098 0.105))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#f0f0f3, #f0f0f3)",
15
+
default: "light-dark(#f0f0f3, #212225)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.94 0.941 0.953), color(display-p3 0.13 0.135 0.145))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#e8e8ec, #e8e8ec)",
20
+
default: "light-dark(#e8e8ec, #272a2d)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.908 0.909 0.925), color(display-p3 0.156 0.163 0.176))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#e0e1e6, #e0e1e6)",
25
+
default: "light-dark(#e0e1e6, #2e3135)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.88 0.881 0.901), color(display-p3 0.183 0.191 0.206))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#d9d9e0, #d9d9e0)",
30
+
default: "light-dark(#d9d9e0, #363a3f)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.85 0.852 0.876), color(display-p3 0.215 0.226 0.244))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#cdced6, #cdced6)",
35
+
default: "light-dark(#cdced6, #43484e)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.805 0.808 0.838), color(display-p3 0.265 0.28 0.302))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#b9bbc6, #b9bbc6)",
40
+
default: "light-dark(#b9bbc6, #5a6169)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.727 0.733 0.773), color(display-p3 0.357 0.381 0.409))",
43
43
},
44
44
solid1: {
45
-
default: "light-dark(#8b8d98, #8b8d98)",
45
+
default: "light-dark(#8b8d98, #696e77)",
46
46
"@media (color-gamut: p3)":
47
47
"light-dark(color(display-p3 0.547 0.553 0.592), color(display-p3 0.415 0.431 0.463))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#80838d, #80838d)",
50
+
default: "light-dark(#80838d, #777b84)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.503 0.512 0.549), color(display-p3 0.469 0.483 0.514))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#60646c, #60646c)",
55
+
default: "light-dark(#60646c, #b0b4ba)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.379 0.392 0.421), color(display-p3 0.692 0.704 0.728))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#1c2024, #1c2024)",
60
+
default: "light-dark(#1c2024, #edeef0)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.113 0.125 0.14), color(display-p3 0.93 0.933 0.94))",
63
63
},
···
127
127
128
128
export const slateInverted = stylex.defineVars({
129
129
bg: {
130
-
default: "light-dark(#fcfcfd, #fcfcfd)",
130
+
default: "light-dark(#111113, #fcfcfd)",
131
131
"@media (color-gamut: p3)":
132
132
"light-dark(color(display-p3 0.067 0.067 0.074), color(display-p3 0.988 0.988 0.992))",
133
133
},
134
134
bgSubtle: {
135
-
default: "light-dark(#f9f9fb, #f9f9fb)",
135
+
default: "light-dark(#18191b, #f9f9fb)",
136
136
"@media (color-gamut: p3)":
137
137
"light-dark(color(display-p3 0.095 0.098 0.105), color(display-p3 0.976 0.976 0.984))",
138
138
},
139
139
component1: {
140
-
default: "light-dark(#f0f0f3, #f0f0f3)",
140
+
default: "light-dark(#212225, #f0f0f3)",
141
141
"@media (color-gamut: p3)":
142
142
"light-dark(color(display-p3 0.13 0.135 0.145), color(display-p3 0.94 0.941 0.953))",
143
143
},
144
144
component2: {
145
-
default: "light-dark(#e8e8ec, #e8e8ec)",
145
+
default: "light-dark(#272a2d, #e8e8ec)",
146
146
"@media (color-gamut: p3)":
147
147
"light-dark(color(display-p3 0.156 0.163 0.176), color(display-p3 0.908 0.909 0.925))",
148
148
},
149
149
component3: {
150
-
default: "light-dark(#e0e1e6, #e0e1e6)",
150
+
default: "light-dark(#2e3135, #e0e1e6)",
151
151
"@media (color-gamut: p3)":
152
152
"light-dark(color(display-p3 0.183 0.191 0.206), color(display-p3 0.88 0.881 0.901))",
153
153
},
154
154
border1: {
155
-
default: "light-dark(#d9d9e0, #d9d9e0)",
155
+
default: "light-dark(#363a3f, #d9d9e0)",
156
156
"@media (color-gamut: p3)":
157
157
"light-dark(color(display-p3 0.215 0.226 0.244), color(display-p3 0.85 0.852 0.876))",
158
158
},
159
159
border2: {
160
-
default: "light-dark(#cdced6, #cdced6)",
160
+
default: "light-dark(#43484e, #cdced6)",
161
161
"@media (color-gamut: p3)":
162
162
"light-dark(color(display-p3 0.265 0.28 0.302), color(display-p3 0.805 0.808 0.838))",
163
163
},
164
164
border3: {
165
-
default: "light-dark(#b9bbc6, #b9bbc6)",
165
+
default: "light-dark(#5a6169, #b9bbc6)",
166
166
"@media (color-gamut: p3)":
167
167
"light-dark(color(display-p3 0.357 0.381 0.409), color(display-p3 0.727 0.733 0.773))",
168
168
},
169
169
solid1: {
170
-
default: "light-dark(#8b8d98, #8b8d98)",
170
+
default: "light-dark(#696e77, #8b8d98)",
171
171
"@media (color-gamut: p3)":
172
172
"light-dark(color(display-p3 0.415 0.431 0.463), color(display-p3 0.547 0.553 0.592))",
173
173
},
174
174
solid2: {
175
-
default: "light-dark(#80838d, #80838d)",
175
+
default: "light-dark(#777b84, #80838d)",
176
176
"@media (color-gamut: p3)":
177
177
"light-dark(color(display-p3 0.469 0.483 0.514), color(display-p3 0.503 0.512 0.549))",
178
178
},
179
179
text1: {
180
-
default: "light-dark(#60646c, #60646c)",
180
+
default: "light-dark(#b0b4ba, #60646c)",
181
181
"@media (color-gamut: p3)":
182
182
"light-dark(color(display-p3 0.692 0.704 0.728), color(display-p3 0.379 0.392 0.421))",
183
183
},
184
184
text2: {
185
-
default: "light-dark(#1c2024, #1c2024)",
185
+
default: "light-dark(#edeef0, #1c2024)",
186
186
"@media (color-gamut: p3)":
187
187
"light-dark(color(display-p3 0.93 0.933 0.94), color(display-p3 0.113 0.125 0.14))",
188
188
},
+11
-11
packages/hip-ui/src/components/theme/colors/teal.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/teal.stylex.tsx
···
2
2
3
3
export const teal = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fafefd, #fafefd)",
5
+
default: "light-dark(#fafefd, #0d1514)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.983 0.996 0.992), color(display-p3 0.059 0.083 0.079))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#f3fbf9, #f3fbf9)",
10
+
default: "light-dark(#f3fbf9, #111c1b)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.958 0.983 0.976), color(display-p3 0.075 0.11 0.107))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#e0f8f3, #e0f8f3)",
15
+
default: "light-dark(#e0f8f3, #0d2d2a)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.895 0.971 0.952), color(display-p3 0.087 0.175 0.165))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#ccf3ea, #ccf3ea)",
20
+
default: "light-dark(#ccf3ea, #023b37)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.831 0.949 0.92), color(display-p3 0.087 0.227 0.214))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#b8eae0, #b8eae0)",
25
+
default: "light-dark(#b8eae0, #084843)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.761 0.914 0.878), color(display-p3 0.12 0.277 0.261))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#a1ded2, #a1ded2)",
30
+
default: "light-dark(#a1ded2, #145750)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.682 0.864 0.825), color(display-p3 0.162 0.335 0.314))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#83cdc1, #83cdc1)",
35
+
default: "light-dark(#83cdc1, #1c6961)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.581 0.798 0.756), color(display-p3 0.205 0.406 0.379))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#53b9ab, #53b9ab)",
40
+
default: "light-dark(#53b9ab, #207e73)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.433 0.716 0.671), color(display-p3 0.245 0.489 0.453))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.297 0.637 0.581), color(display-p3 0.297 0.637 0.581))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#0d9b8a, #0d9b8a)",
50
+
default: "light-dark(#0d9b8a, #0eb39e)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.275 0.599 0.542), color(display-p3 0.319 0.69 0.62))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#008573, #008573)",
55
+
default: "light-dark(#008573, #0bd8b6)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.08 0.5 0.43), color(display-p3 0.388 0.835 0.719))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#0d3d38, #0d3d38)",
60
+
default: "light-dark(#0d3d38, #adf0dd)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.11 0.235 0.219), color(display-p3 0.734 0.934 0.87))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/tomato.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/tomato.stylex.tsx
···
2
2
3
3
export const tomato = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fffcfc, #fffcfc)",
5
+
default: "light-dark(#fffcfc, #181111)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.998 0.989 0.988), color(display-p3 0.09 0.068 0.067))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fff8f7, #fff8f7)",
10
+
default: "light-dark(#fff8f7, #1f1513)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.994 0.974 0.969), color(display-p3 0.115 0.084 0.076))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#feebe7, #feebe7)",
15
+
default: "light-dark(#feebe7, #391714)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.985 0.924 0.909), color(display-p3 0.205 0.097 0.083))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#ffdcd3, #ffdcd3)",
20
+
default: "light-dark(#ffdcd3, #4e1511)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.996 0.868 0.835), color(display-p3 0.282 0.099 0.077))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#ffcdc2, #ffcdc2)",
25
+
default: "light-dark(#ffcdc2, #5e1c16)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.98 0.812 0.77), color(display-p3 0.339 0.129 0.101))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#fdbdaf, #fdbdaf)",
30
+
default: "light-dark(#fdbdaf, #6e2920)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.953 0.75 0.698), color(display-p3 0.398 0.179 0.141))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#f5a898, #f5a898)",
35
+
default: "light-dark(#f5a898, #853a2d)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.917 0.673 0.611), color(display-p3 0.487 0.245 0.194))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#ec8e7b, #ec8e7b)",
40
+
default: "light-dark(#ec8e7b, #ac4d39)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.875 0.575 0.502), color(display-p3 0.629 0.322 0.248))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.831 0.345 0.231), color(display-p3 0.831 0.345 0.231))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#dd4425, #dd4425)",
50
+
default: "light-dark(#dd4425, #ec6142)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.802 0.313 0.2), color(display-p3 0.862 0.415 0.298))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#d13415, #d13415)",
55
+
default: "light-dark(#d13415, #ff977d)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.755 0.259 0.152), color(display-p3 1 0.585 0.455))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#5c271f, #5c271f)",
60
+
default: "light-dark(#5c271f, #fbd3cb)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.335 0.165 0.132), color(display-p3 0.959 0.833 0.802))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/violet.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/violet.stylex.tsx
···
2
2
3
3
export const violet = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fdfcfe, #fdfcfe)",
5
+
default: "light-dark(#fdfcfe, #14121f)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.991 0.988 0.995), color(display-p3 0.077 0.071 0.118))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#faf8ff, #faf8ff)",
10
+
default: "light-dark(#faf8ff, #1b1525)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.978 0.974 0.998), color(display-p3 0.101 0.084 0.141))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#f4f0fe, #f4f0fe)",
15
+
default: "light-dark(#f4f0fe, #291f43)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.953 0.943 0.993), color(display-p3 0.154 0.123 0.256))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#ebe4ff, #ebe4ff)",
20
+
default: "light-dark(#ebe4ff, #33255b)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.916 0.897 1), color(display-p3 0.191 0.148 0.345))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#e1d9ff, #e1d9ff)",
25
+
default: "light-dark(#e1d9ff, #3c2e69)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.876 0.851 1), color(display-p3 0.226 0.182 0.396))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#d4cafe, #d4cafe)",
30
+
default: "light-dark(#d4cafe, #473876)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.825 0.793 0.981), color(display-p3 0.269 0.223 0.449))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#c2b5f5, #c2b5f5)",
35
+
default: "light-dark(#c2b5f5, #56468b)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.752 0.712 0.943), color(display-p3 0.326 0.277 0.53))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#aa99ec, #aa99ec)",
40
+
default: "light-dark(#aa99ec, #6958ad)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.654 0.602 0.902), color(display-p3 0.399 0.346 0.656))",
43
43
},
···
47
47
"light-dark(color(display-p3 0.417 0.341 0.784), color(display-p3 0.417 0.341 0.784))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#654dc4, #654dc4)",
50
+
default: "light-dark(#654dc4, #7d66d9)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.381 0.306 0.741), color(display-p3 0.477 0.402 0.823))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#6550b9, #6550b9)",
55
+
default: "light-dark(#6550b9, #baa7ff)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.383 0.317 0.702), color(display-p3 0.72 0.65 1))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#2f265f, #2f265f)",
60
+
default: "light-dark(#2f265f, #e2ddfe)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.179 0.15 0.359), color(display-p3 0.883 0.867 0.986))",
63
63
},
+11
-11
packages/hip-ui/src/components/theme/colors/yellow.stylex.tsx
+11
-11
packages/hip-ui/src/components/theme/colors/yellow.stylex.tsx
···
2
2
3
3
export const yellow = stylex.defineVars({
4
4
bg: {
5
-
default: "light-dark(#fdfdf9, #fdfdf9)",
5
+
default: "light-dark(#fdfdf9, #14120b)",
6
6
"@media (color-gamut: p3)":
7
7
"light-dark(color(display-p3 0.992 0.992 0.978), color(display-p3 0.078 0.069 0.047))",
8
8
},
9
9
bgSubtle: {
10
-
default: "light-dark(#fefce9, #fefce9)",
10
+
default: "light-dark(#fefce9, #1b180f)",
11
11
"@media (color-gamut: p3)":
12
12
"light-dark(color(display-p3 0.995 0.99 0.922), color(display-p3 0.103 0.094 0.063))",
13
13
},
14
14
component1: {
15
-
default: "light-dark(#fffab8, #fffab8)",
15
+
default: "light-dark(#fffab8, #2d2305)",
16
16
"@media (color-gamut: p3)":
17
17
"light-dark(color(display-p3 0.997 0.982 0.749), color(display-p3 0.168 0.137 0.039))",
18
18
},
19
19
component2: {
20
-
default: "light-dark(#fff394, #fff394)",
20
+
default: "light-dark(#fff394, #362b00)",
21
21
"@media (color-gamut: p3)":
22
22
"light-dark(color(display-p3 0.992 0.953 0.627), color(display-p3 0.209 0.169 0))",
23
23
},
24
24
component3: {
25
-
default: "light-dark(#ffe770, #ffe770)",
25
+
default: "light-dark(#ffe770, #433500)",
26
26
"@media (color-gamut: p3)":
27
27
"light-dark(color(display-p3 0.984 0.91 0.51), color(display-p3 0.255 0.209 0))",
28
28
},
29
29
border1: {
30
-
default: "light-dark(#f3d768, #f3d768)",
30
+
default: "light-dark(#f3d768, #524202)",
31
31
"@media (color-gamut: p3)":
32
32
"light-dark(color(display-p3 0.934 0.847 0.474), color(display-p3 0.31 0.261 0.07))",
33
33
},
34
34
border2: {
35
-
default: "light-dark(#e4c767, #e4c767)",
35
+
default: "light-dark(#e4c767, #665417)",
36
36
"@media (color-gamut: p3)":
37
37
"light-dark(color(display-p3 0.876 0.785 0.46), color(display-p3 0.389 0.331 0.135))",
38
38
},
39
39
border3: {
40
-
default: "light-dark(#d5ae39, #d5ae39)",
40
+
default: "light-dark(#d5ae39, #836a21)",
41
41
"@media (color-gamut: p3)":
42
42
"light-dark(color(display-p3 0.811 0.689 0.313), color(display-p3 0.497 0.42 0.182))",
43
43
},
···
47
47
"light-dark(color(display-p3 1 0.92 0.22), color(display-p3 1 0.92 0.22))",
48
48
},
49
49
solid2: {
50
-
default: "light-dark(#ffdc00, #ffdc00)",
50
+
default: "light-dark(#ffdc00, #ffff57)",
51
51
"@media (color-gamut: p3)":
52
52
"light-dark(color(display-p3 0.977 0.868 0.291), color(display-p3 1 1 0.456))",
53
53
},
54
54
text1: {
55
-
default: "light-dark(#9e6c00, #9e6c00)",
55
+
default: "light-dark(#9e6c00, #f5e147)",
56
56
"@media (color-gamut: p3)":
57
57
"light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392))",
58
58
},
59
59
text2: {
60
-
default: "light-dark(#473b1f, #473b1f)",
60
+
default: "light-dark(#473b1f, #f6eeb4)",
61
61
"@media (color-gamut: p3)":
62
62
"light-dark(color(display-p3 0.271 0.233 0.137), color(display-p3 0.959 0.934 0.731))",
63
63
},