@optiaxiom/globals 0.7.1 → 0.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/fonts.js +5 -0
- package/dist/cjs/index.js +387 -0
- package/dist/esm/fonts.js +2 -0
- package/package.json +7 -4
- package/dist/fonts.js +0 -2
- /package/dist/{context.js → esm/context.js} +0 -0
- /package/dist/{index.js → esm/index.js} +0 -0
- /package/dist/{theme-css.js → esm/theme-css.js} +0 -0
- /package/dist/{toast-context.js → esm/toast-context.js} +0 -0
- /package/dist/{toaster.js → esm/toaster.js} +0 -0
- /package/dist/{tokens → esm/tokens}/borderRadius.js +0 -0
- /package/dist/{tokens → esm/tokens}/boxShadow.js +0 -0
- /package/dist/{tokens → esm/tokens}/colors.js +0 -0
- /package/dist/{tokens → esm/tokens}/fontFamily.js +0 -0
- /package/dist/{tokens → esm/tokens}/fontSize.js +0 -0
- /package/dist/{tokens → esm/tokens}/index.js +0 -0
- /package/dist/{tokens → esm/tokens}/maxSize.js +0 -0
- /package/dist/{tokens → esm/tokens}/rem.js +0 -0
- /package/dist/{tokens → esm/tokens}/screens.js +0 -0
- /package/dist/{tokens → esm/tokens}/size.js +0 -0
- /package/dist/{tokens → esm/tokens}/zIndex.js +0 -0
|
@@ -0,0 +1,387 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
var reactContext = require('@radix-ui/react-context');
|
|
5
|
+
|
|
6
|
+
const AxiomVersionContext = react.createContext(undefined);
|
|
7
|
+
|
|
8
|
+
var theme = {borderRadius:{xs:'var(--ax-borderRadius-xs)',sm:'var(--ax-borderRadius-sm)',md:'var(--ax-borderRadius-md)',lg:'var(--ax-borderRadius-lg)',full:'var(--ax-borderRadius-full)'},boxShadow:{sm:'var(--ax-boxShadow-sm)',md:'var(--ax-boxShadow-md)',lg:'var(--ax-boxShadow-lg)'},colors:{'bg.accent':'var(--ax-colors-bg-accent)','bg.accent.hovered':'var(--ax-colors-bg-accent-hovered)','bg.accent.light':'var(--ax-colors-bg-accent-light)','bg.accent.pressed':'var(--ax-colors-bg-accent-pressed)','bg.accent.subtle':'var(--ax-colors-bg-accent-subtle)','bg.avatar.neutral':'var(--ax-colors-bg-avatar-neutral)','bg.avatar.purple':'var(--ax-colors-bg-avatar-purple)','bg.default':'var(--ax-colors-bg-default)','bg.default.hovered':'var(--ax-colors-bg-default-hovered)','bg.default.inverse':'var(--ax-colors-bg-default-inverse)','bg.default.inverse.hovered':'var(--ax-colors-bg-default-inverse-hovered)','bg.default.inverse.pressed':'var(--ax-colors-bg-default-inverse-pressed)','bg.default.pressed':'var(--ax-colors-bg-default-pressed)','bg.error':'var(--ax-colors-bg-error)','bg.error.hovered':'var(--ax-colors-bg-error-hovered)','bg.error.light':'var(--ax-colors-bg-error-light)','bg.error.pressed':'var(--ax-colors-bg-error-pressed)','bg.error.subtle':'var(--ax-colors-bg-error-subtle)','bg.error.subtlest':'var(--ax-colors-bg-error-subtlest)','bg.information':'var(--ax-colors-bg-information)','bg.information.light':'var(--ax-colors-bg-information-light)','bg.information.subtle':'var(--ax-colors-bg-information-subtle)','bg.overlay':'var(--ax-colors-bg-overlay)','bg.page':'var(--ax-colors-bg-page)','bg.secondary':'var(--ax-colors-bg-secondary)','bg.secondary.hovered':'var(--ax-colors-bg-secondary-hovered)','bg.spinner.default':'var(--ax-colors-bg-spinner-default)','bg.spinner.inverse':'var(--ax-colors-bg-spinner-inverse)','bg.success':'var(--ax-colors-bg-success)','bg.success.hovered':'var(--ax-colors-bg-success-hovered)','bg.success.light':'var(--ax-colors-bg-success-light)','bg.success.subtle':'var(--ax-colors-bg-success-subtle)','bg.tertiary':'var(--ax-colors-bg-tertiary)','bg.tertiary.hovered':'var(--ax-colors-bg-tertiary-hovered)','bg.warning':'var(--ax-colors-bg-warning)','bg.warning.hovered':'var(--ax-colors-bg-warning-hovered)','bg.warning.light':'var(--ax-colors-bg-warning-light)','bg.warning.subtle':'var(--ax-colors-bg-warning-subtle)','border.accent':'var(--ax-colors-border-accent)','border.control':'var(--ax-colors-border-control)','border.control.hovered':'var(--ax-colors-border-control-hovered)','border.default':'var(--ax-colors-border-default)','border.disabled':'var(--ax-colors-border-disabled)','border.error':'var(--ax-colors-border-error)','border.focus':'var(--ax-colors-border-focus)','border.focus.error':'var(--ax-colors-border-focus-error)','border.secondary':'var(--ax-colors-border-secondary)','border.success':'var(--ax-colors-border-success)','border.tertiary':'var(--ax-colors-border-tertiary)','border.warning':'var(--ax-colors-border-warning)','fg.accent':'var(--ax-colors-fg-accent)','fg.accent.hovered':'var(--ax-colors-fg-accent-hovered)','fg.accent.strong':'var(--ax-colors-fg-accent-strong)','fg.avatar.neutral':'var(--ax-colors-fg-avatar-neutral)','fg.avatar.purple':'var(--ax-colors-fg-avatar-purple)','fg.default':'var(--ax-colors-fg-default)','fg.default.inverse':'var(--ax-colors-fg-default-inverse)','fg.disabled':'var(--ax-colors-fg-disabled)','fg.error':'var(--ax-colors-fg-error)','fg.error.hovered':'var(--ax-colors-fg-error-hovered)','fg.error.light':'var(--ax-colors-fg-error-light)','fg.error.strong':'var(--ax-colors-fg-error-strong)','fg.information':'var(--ax-colors-fg-information)','fg.information.light':'var(--ax-colors-fg-information-light)','fg.information.strong':'var(--ax-colors-fg-information-strong)','fg.link.default':'var(--ax-colors-fg-link-default)','fg.link.default.hovered':'var(--ax-colors-fg-link-default-hovered)','fg.link.inverse':'var(--ax-colors-fg-link-inverse)','fg.link.subtle':'var(--ax-colors-fg-link-subtle)','fg.link.visited':'var(--ax-colors-fg-link-visited)','fg.secondary':'var(--ax-colors-fg-secondary)','fg.spinner.default':'var(--ax-colors-fg-spinner-default)','fg.spinner.inverse':'var(--ax-colors-fg-spinner-inverse)','fg.success':'var(--ax-colors-fg-success)','fg.success.hovered':'var(--ax-colors-fg-success-hovered)','fg.success.light':'var(--ax-colors-fg-success-light)','fg.success.strong':'var(--ax-colors-fg-success-strong)','fg.tertiary':'var(--ax-colors-fg-tertiary)','fg.warning':'var(--ax-colors-fg-warning)','fg.warning.hovered':'var(--ax-colors-fg-warning-hovered)','fg.warning.inverse':'var(--ax-colors-fg-warning-inverse)','fg.warning.light':'var(--ax-colors-fg-warning-light)','fg.warning.strong':'var(--ax-colors-fg-warning-strong)','fg.white':'var(--ax-colors-fg-white)'},fontFamily:{mono:'var(--ax-fontFamily-mono)',sans:'var(--ax-fontFamily-sans)'},fontSize:{xs:{fontSize:'var(--ax-fontSize-xs-fontSize)',lineHeight:'var(--ax-fontSize-xs-lineHeight)'},sm:{fontSize:'var(--ax-fontSize-sm-fontSize)',lineHeight:'var(--ax-fontSize-sm-lineHeight)'},md:{fontSize:'var(--ax-fontSize-md-fontSize)',lineHeight:'var(--ax-fontSize-md-lineHeight)'},lg:{fontSize:'var(--ax-fontSize-lg-fontSize)',lineHeight:'var(--ax-fontSize-lg-lineHeight)'},xl:{fontSize:'var(--ax-fontSize-xl-fontSize)',lineHeight:'var(--ax-fontSize-xl-lineHeight)'},'2xl':{fontSize:'var(--ax-fontSize-2xl-fontSize)',lineHeight:'var(--ax-fontSize-2xl-lineHeight)'},'3xl':{fontSize:'var(--ax-fontSize-3xl-fontSize)',lineHeight:'var(--ax-fontSize-3xl-lineHeight)'},'4xl':{fontSize:'var(--ax-fontSize-4xl-fontSize)',lineHeight:'var(--ax-fontSize-4xl-lineHeight)'},'5xl':{fontSize:'var(--ax-fontSize-5xl-fontSize)',lineHeight:'var(--ax-fontSize-5xl-lineHeight)'}},maxSize:{xs:'var(--ax-maxSize-xs)',sm:'var(--ax-maxSize-sm)',md:'var(--ax-maxSize-md)',lg:'var(--ax-maxSize-lg)'},screens:{sm:'var(--ax-screens-sm)',md:'var(--ax-screens-md)'},size:{'2xs':'var(--ax-size-2xs)',xs:'var(--ax-size-xs)',sm:'var(--ax-size-sm)',md:'var(--ax-size-md)',lg:'var(--ax-size-lg)',xl:'var(--ax-size-xl)','3xl':'var(--ax-size-3xl)'},zIndex:{popover:'var(--ax-zIndex-popover)',toast:'var(--ax-zIndex-toast)',tooltip:'var(--ax-zIndex-tooltip)'}};
|
|
9
|
+
|
|
10
|
+
const [ToastContextProvider, useToastContext] = reactContext.createContext("ToastProvider");
|
|
11
|
+
|
|
12
|
+
const EMPTY = [];
|
|
13
|
+
let id = 1;
|
|
14
|
+
const genId = () => {
|
|
15
|
+
return "t" + id++;
|
|
16
|
+
};
|
|
17
|
+
const createToaster = () => {
|
|
18
|
+
let snapshot = [];
|
|
19
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
20
|
+
const emit = () => {
|
|
21
|
+
for (const listener of listeners) {
|
|
22
|
+
listener();
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
let queue = Promise.resolve();
|
|
26
|
+
return {
|
|
27
|
+
store: [
|
|
28
|
+
(callback) => {
|
|
29
|
+
listeners.add(callback);
|
|
30
|
+
return () => listeners.delete(callback);
|
|
31
|
+
},
|
|
32
|
+
() => snapshot,
|
|
33
|
+
() => EMPTY
|
|
34
|
+
],
|
|
35
|
+
clear: () => {
|
|
36
|
+
snapshot = [];
|
|
37
|
+
emit();
|
|
38
|
+
},
|
|
39
|
+
create: (...args) => {
|
|
40
|
+
const toast = typeof args[0] === "string" ? {
|
|
41
|
+
...args[1],
|
|
42
|
+
title: args[0]
|
|
43
|
+
} : args[0];
|
|
44
|
+
const id2 = genId();
|
|
45
|
+
queue = queue.then(async () => {
|
|
46
|
+
const item = {
|
|
47
|
+
id: id2,
|
|
48
|
+
open: true,
|
|
49
|
+
ref: { current: null },
|
|
50
|
+
toast
|
|
51
|
+
};
|
|
52
|
+
snapshot = [...snapshot, item];
|
|
53
|
+
emit();
|
|
54
|
+
await waitForAnimation(item.ref.current);
|
|
55
|
+
});
|
|
56
|
+
return id2;
|
|
57
|
+
},
|
|
58
|
+
remove: (id2) => {
|
|
59
|
+
queue = queue.then(async () => {
|
|
60
|
+
snapshot = snapshot.map(
|
|
61
|
+
(item2) => item2.id === id2 ? { ...item2, open: false } : item2
|
|
62
|
+
);
|
|
63
|
+
emit();
|
|
64
|
+
const item = snapshot.find((item2) => item2.id === id2);
|
|
65
|
+
await waitForAnimation(item?.ref.current);
|
|
66
|
+
snapshot = snapshot.filter((item2) => item2.id !== id2);
|
|
67
|
+
emit();
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
const waitForAnimation = async (element) => {
|
|
73
|
+
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
74
|
+
await Promise.allSettled(
|
|
75
|
+
typeof element?.getAnimations === "function" ? element?.getAnimations().map((animation) => animation.finished) : [Promise.resolve()]
|
|
76
|
+
);
|
|
77
|
+
};
|
|
78
|
+
const toaster = createToaster();
|
|
79
|
+
|
|
80
|
+
const rem = (px) => `${parseFloat((parseFloat(px.slice(0, -2)) / 16).toFixed(3))}rem`;
|
|
81
|
+
|
|
82
|
+
const borderRadius = {
|
|
83
|
+
xs: rem("2px"),
|
|
84
|
+
sm: rem("4px"),
|
|
85
|
+
md: rem("6px"),
|
|
86
|
+
lg: rem("8px"),
|
|
87
|
+
full: "9999px"
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
const boxShadow = {
|
|
91
|
+
sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
92
|
+
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
93
|
+
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
const palette = {
|
|
97
|
+
"blue.50": "#D9E7FC",
|
|
98
|
+
"blue.100": "#C6DBFA",
|
|
99
|
+
"blue.200": "#A1C2F7",
|
|
100
|
+
"blue.300": "#7BAAF4",
|
|
101
|
+
"blue.400": "#5592F1",
|
|
102
|
+
"blue.500": "#2F7AEE",
|
|
103
|
+
"blue.600": "#115DD4",
|
|
104
|
+
"blue.700": "#0D46A0",
|
|
105
|
+
"blue.800": "#09306D",
|
|
106
|
+
"blue.900": "#051939",
|
|
107
|
+
"brand.50": "#F0F3FF",
|
|
108
|
+
"brand.100": "#CDD8FC",
|
|
109
|
+
"brand.200": "#B3C3FF",
|
|
110
|
+
"brand.300": "#6A8FFC",
|
|
111
|
+
"brand.400": "#2E66F7",
|
|
112
|
+
"brand.500": "#0037FF",
|
|
113
|
+
"brand.600": "#002CCC",
|
|
114
|
+
"brand.700": "#002894",
|
|
115
|
+
"brand.800": "#001666",
|
|
116
|
+
"brand.900": "#000B33",
|
|
117
|
+
"cyan.50": "#ECFEFF",
|
|
118
|
+
"cyan.100": "#CFFAFE",
|
|
119
|
+
"cyan.200": "#99F0F9",
|
|
120
|
+
"cyan.300": "#67E8F9",
|
|
121
|
+
"cyan.400": "#22D3EE",
|
|
122
|
+
"cyan.500": "#06B6D4",
|
|
123
|
+
"cyan.600": "#0891B2",
|
|
124
|
+
"cyan.700": "#0E7490",
|
|
125
|
+
"cyan.800": "#155E75",
|
|
126
|
+
"cyan.900": "#083344",
|
|
127
|
+
"green.50": "#E9F7F1",
|
|
128
|
+
"green.100": "#D1F0E1",
|
|
129
|
+
"green.200": "#A5E1C3",
|
|
130
|
+
"green.300": "#7CD2A7",
|
|
131
|
+
"green.400": "#5AC58A",
|
|
132
|
+
"green.500": "#03A65D",
|
|
133
|
+
"green.600": "#038047",
|
|
134
|
+
"green.700": "#24663E",
|
|
135
|
+
"green.800": "#17492B",
|
|
136
|
+
"green.900": "#082415",
|
|
137
|
+
"magenta.50": "#FDF4FF",
|
|
138
|
+
"magenta.100": "#FAE8FF",
|
|
139
|
+
"magenta.200": "#F5D0FE",
|
|
140
|
+
"magenta.300": "#F0ABFC",
|
|
141
|
+
"magenta.400": "#D765E9",
|
|
142
|
+
"magenta.500": "#C026D3",
|
|
143
|
+
"magenta.600": "#A21CAF",
|
|
144
|
+
"magenta.700": "#86198F",
|
|
145
|
+
"magenta.800": "#701A75",
|
|
146
|
+
"magenta.900": "#4A044E",
|
|
147
|
+
"neutral.00": "#FFFFFF",
|
|
148
|
+
"neutral.50": "#F9FAFC",
|
|
149
|
+
"neutral.75": "#F5F6FA",
|
|
150
|
+
"neutral.100": "#E9EDF5",
|
|
151
|
+
"neutral.150": "#DADFEB",
|
|
152
|
+
"neutral.200": "#CACFDC",
|
|
153
|
+
"neutral.300": "#B8BECB",
|
|
154
|
+
"neutral.500": "#838DA4",
|
|
155
|
+
"neutral.600": "#66708C",
|
|
156
|
+
"neutral.700": "#4F576E",
|
|
157
|
+
"neutral.800": "#2E3442",
|
|
158
|
+
"neutral.900": "#1C212B",
|
|
159
|
+
"neutral.1000": "#1C2029",
|
|
160
|
+
"neutral.1100": "#171A23",
|
|
161
|
+
"neutral.1200": "#091E42",
|
|
162
|
+
"neutral.50/6": "#F9FAFC0F",
|
|
163
|
+
"neutral.50/12": "#F9FAFC1F",
|
|
164
|
+
"neutral.50/18": "#F9FAFC2E",
|
|
165
|
+
"neutral.50/22": "#F9FAFC38",
|
|
166
|
+
"neutral.50/32": "#F9FAFC52",
|
|
167
|
+
"neutral.1200/4": "#091E420A",
|
|
168
|
+
"neutral.1200/8": "#091E4214",
|
|
169
|
+
"neutral.1200/16": "#091E4229",
|
|
170
|
+
"neutral.1200/22": "#091E4238",
|
|
171
|
+
"neutral.1200/32": "#091E4252",
|
|
172
|
+
"purple.50": "#F1ECF8",
|
|
173
|
+
"purple.100": "#E5DCF4",
|
|
174
|
+
"purple.200": "#C4B1E2",
|
|
175
|
+
"purple.300": "#9570D1",
|
|
176
|
+
"purple.400": "#7E51C8",
|
|
177
|
+
"purple.500": "#693AB6",
|
|
178
|
+
"purple.600": "#532E8F",
|
|
179
|
+
"purple.700": "#412470",
|
|
180
|
+
"purple.800": "#331C59",
|
|
181
|
+
"purple.900": "#261542",
|
|
182
|
+
"red.50": "#FFF7F7",
|
|
183
|
+
"red.100": "#FFD7D7",
|
|
184
|
+
"red.200": "#FFB4B4",
|
|
185
|
+
"red.300": "#FC8B8B",
|
|
186
|
+
"red.400": "#F64F4F",
|
|
187
|
+
"red.500": "#CC1616",
|
|
188
|
+
"red.600": "#B21313",
|
|
189
|
+
"red.700": "#911D1D",
|
|
190
|
+
"red.800": "#601313",
|
|
191
|
+
"red.900": "#300A0A",
|
|
192
|
+
"yellow.50": "#FFFAEA",
|
|
193
|
+
"yellow.100": "#FEF1C6",
|
|
194
|
+
"yellow.200": "#FEDF88",
|
|
195
|
+
"yellow.300": "#FFC84B",
|
|
196
|
+
"yellow.400": "#FDB022",
|
|
197
|
+
"yellow.500": "#F79008",
|
|
198
|
+
"yellow.600": "#DC6903",
|
|
199
|
+
"yellow.700": "#B54707",
|
|
200
|
+
"yellow.800": "#7A2E0D",
|
|
201
|
+
"yellow.900": "#4E1D09"
|
|
202
|
+
};
|
|
203
|
+
const ld = (a, b) => `light-dark(${a}, ${b})`;
|
|
204
|
+
const colors = {
|
|
205
|
+
"bg.accent": ld(palette["brand.500"], palette["brand.400"]),
|
|
206
|
+
"bg.accent.hovered": ld(palette["brand.600"], palette["brand.400"]),
|
|
207
|
+
"bg.accent.light": ld(palette["brand.200"], palette["brand.800"]),
|
|
208
|
+
"bg.accent.pressed": ld(palette["brand.700"], palette["brand.600"]),
|
|
209
|
+
"bg.accent.subtle": ld(palette["brand.50"], palette["brand.900"]),
|
|
210
|
+
"bg.avatar.neutral": ld(palette["neutral.100"], palette["neutral.800"]),
|
|
211
|
+
"bg.avatar.purple": ld(palette["purple.100"], palette["purple.700"]),
|
|
212
|
+
"bg.default": ld(palette["neutral.00"], palette["neutral.1000"]),
|
|
213
|
+
"bg.default.hovered": ld(palette["neutral.1200/4"], palette["neutral.50/6"]),
|
|
214
|
+
"bg.default.inverse": ld(palette["neutral.800"], palette["neutral.100"]),
|
|
215
|
+
"bg.default.inverse.hovered": ld(
|
|
216
|
+
palette["neutral.900"],
|
|
217
|
+
palette["neutral.200"]
|
|
218
|
+
),
|
|
219
|
+
"bg.default.inverse.pressed": ld(
|
|
220
|
+
palette["neutral.1000"],
|
|
221
|
+
palette["neutral.300"]
|
|
222
|
+
),
|
|
223
|
+
"bg.default.pressed": ld(palette["neutral.1200/8"], palette["neutral.50/12"]),
|
|
224
|
+
"bg.error": ld(palette["red.500"], palette["red.500"]),
|
|
225
|
+
"bg.error.hovered": ld(palette["red.600"], palette["red.400"]),
|
|
226
|
+
"bg.error.light": ld(palette["red.200"], palette["red.700"]),
|
|
227
|
+
"bg.error.pressed": ld(palette["red.700"], palette["red.600"]),
|
|
228
|
+
"bg.error.subtle": ld(palette["red.100"], palette["red.800"]),
|
|
229
|
+
"bg.error.subtlest": ld(palette["red.50"], palette["red.900"]),
|
|
230
|
+
"bg.information": ld(palette["blue.600"], palette["blue.600"]),
|
|
231
|
+
"bg.information.light": ld(palette["blue.200"], palette["blue.800"]),
|
|
232
|
+
"bg.information.subtle": ld(palette["blue.100"], palette["blue.900"]),
|
|
233
|
+
"bg.overlay": ld(palette["neutral.1200/32"], palette["neutral.50/32"]),
|
|
234
|
+
"bg.page": ld(palette["neutral.50"], palette["neutral.1100"]),
|
|
235
|
+
"bg.secondary": ld(palette["neutral.75"], palette["neutral.900"]),
|
|
236
|
+
"bg.secondary.hovered": ld(palette["neutral.75"], palette["neutral.50/12"]),
|
|
237
|
+
"bg.spinner.default": ld(palette["neutral.1200"], palette["neutral.50"]),
|
|
238
|
+
"bg.spinner.inverse": ld(palette["neutral.50"], palette["neutral.50"]),
|
|
239
|
+
"bg.success": ld(palette["green.600"], palette["green.600"]),
|
|
240
|
+
"bg.success.hovered": ld(palette["green.700"], palette["green.400"]),
|
|
241
|
+
"bg.success.light": ld(palette["green.200"], palette["green.800"]),
|
|
242
|
+
"bg.success.subtle": ld(palette["green.100"], palette["green.900"]),
|
|
243
|
+
"bg.tertiary": ld(palette["neutral.150"], palette["neutral.700"]),
|
|
244
|
+
"bg.tertiary.hovered": ld(palette["neutral.200"], palette["neutral.50/18"]),
|
|
245
|
+
"bg.warning": ld(palette["yellow.300"], palette["yellow.500"]),
|
|
246
|
+
"bg.warning.hovered": ld(palette["yellow.600"], palette["yellow.400"]),
|
|
247
|
+
"bg.warning.light": ld(palette["yellow.200"], palette["yellow.800"]),
|
|
248
|
+
"bg.warning.subtle": ld(palette["yellow.100"], palette["yellow.900"]),
|
|
249
|
+
"border.accent": ld(palette["brand.500"], palette["brand.300"]),
|
|
250
|
+
"border.control": ld(palette["neutral.500"], palette["neutral.700"]),
|
|
251
|
+
"border.control.hovered": ld(palette["neutral.600"], palette["neutral.600"]),
|
|
252
|
+
"border.default": ld(palette["neutral.100"], palette["neutral.800"]),
|
|
253
|
+
"border.disabled": ld(palette["neutral.75"], palette["neutral.800"]),
|
|
254
|
+
"border.error": ld(palette["red.500"], palette["red.200"]),
|
|
255
|
+
"border.focus": ld(palette["brand.400"], palette["brand.300"]),
|
|
256
|
+
"border.focus.error": ld(palette["red.400"], palette["red.300"]),
|
|
257
|
+
"border.secondary": ld(palette["neutral.150"], palette["neutral.700"]),
|
|
258
|
+
"border.success": ld(palette["green.500"], palette["green.500"]),
|
|
259
|
+
"border.tertiary": ld(palette["neutral.200"], palette["neutral.600"]),
|
|
260
|
+
"border.warning": ld(palette["yellow.500"], palette["yellow.500"]),
|
|
261
|
+
"fg.accent": ld(palette["brand.500"], palette["brand.300"]),
|
|
262
|
+
"fg.accent.hovered": ld(palette["brand.600"], palette["brand.500"]),
|
|
263
|
+
"fg.accent.strong": ld(palette["brand.700"], palette["brand.400"]),
|
|
264
|
+
"fg.avatar.neutral": ld(palette["neutral.700"], palette["neutral.100"]),
|
|
265
|
+
"fg.avatar.purple": ld(palette["purple.700"], palette["purple.100"]),
|
|
266
|
+
"fg.default": ld(palette["neutral.800"], palette["neutral.75"]),
|
|
267
|
+
"fg.default.inverse": ld(palette["neutral.00"], palette["neutral.800"]),
|
|
268
|
+
"fg.disabled": ld(palette["neutral.200"], palette["neutral.50/32"]),
|
|
269
|
+
"fg.error": ld(palette["red.500"], palette["red.300"]),
|
|
270
|
+
"fg.error.hovered": ld(palette["red.600"], palette["red.600"]),
|
|
271
|
+
"fg.error.light": ld(palette["red.300"], palette["red.300"]),
|
|
272
|
+
"fg.error.strong": ld(palette["red.700"], palette["red.200"]),
|
|
273
|
+
"fg.information": ld(palette["blue.500"], palette["blue.300"]),
|
|
274
|
+
"fg.information.light": ld(palette["blue.300"], palette["blue.300"]),
|
|
275
|
+
"fg.information.strong": ld(palette["blue.700"], palette["blue.200"]),
|
|
276
|
+
"fg.link.default": ld(palette["brand.500"], palette["brand.400"]),
|
|
277
|
+
"fg.link.default.hovered": ld(palette["brand.600"], palette["brand.200"]),
|
|
278
|
+
"fg.link.inverse": ld(palette["neutral.00"], palette["neutral.00"]),
|
|
279
|
+
"fg.link.subtle": ld(palette["neutral.800"], palette["neutral.800"]),
|
|
280
|
+
"fg.link.visited": ld(palette["purple.600"], palette["purple.500"]),
|
|
281
|
+
"fg.secondary": ld(palette["neutral.700"], palette["neutral.200"]),
|
|
282
|
+
"fg.spinner.default": ld(palette["neutral.800"], palette["neutral.200"]),
|
|
283
|
+
"fg.spinner.inverse": ld(palette["neutral.200"], palette["neutral.800"]),
|
|
284
|
+
"fg.success": ld(palette["green.500"], palette["green.300"]),
|
|
285
|
+
"fg.success.hovered": ld(palette["green.600"], palette["green.600"]),
|
|
286
|
+
"fg.success.light": ld(palette["green.300"], palette["green.300"]),
|
|
287
|
+
"fg.success.strong": ld(palette["green.700"], palette["green.200"]),
|
|
288
|
+
"fg.tertiary": ld(palette["neutral.600"], palette["neutral.500"]),
|
|
289
|
+
"fg.warning": ld(palette["yellow.500"], palette["yellow.300"]),
|
|
290
|
+
"fg.warning.hovered": ld(palette["yellow.600"], palette["yellow.600"]),
|
|
291
|
+
"fg.warning.inverse": ld(palette["neutral.800"], palette["neutral.800"]),
|
|
292
|
+
"fg.warning.light": ld(palette["yellow.300"], palette["yellow.300"]),
|
|
293
|
+
"fg.warning.strong": ld(palette["yellow.700"], palette["yellow.200"]),
|
|
294
|
+
"fg.white": ld(palette["neutral.00"], palette["neutral.00"])
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
const fontFamily = {
|
|
298
|
+
mono: "Fira Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
|
|
299
|
+
sans: "InterVariable, system-ui, sans-serif"
|
|
300
|
+
};
|
|
301
|
+
|
|
302
|
+
const fontSize = {
|
|
303
|
+
xs: {
|
|
304
|
+
fontSize: rem("10px"),
|
|
305
|
+
lineHeight: rem("14px")
|
|
306
|
+
},
|
|
307
|
+
sm: {
|
|
308
|
+
fontSize: rem("12px"),
|
|
309
|
+
lineHeight: rem("16px")
|
|
310
|
+
},
|
|
311
|
+
md: {
|
|
312
|
+
fontSize: rem("14px"),
|
|
313
|
+
lineHeight: rem("20px")
|
|
314
|
+
},
|
|
315
|
+
lg: {
|
|
316
|
+
fontSize: rem("16px"),
|
|
317
|
+
lineHeight: rem("24px")
|
|
318
|
+
},
|
|
319
|
+
xl: {
|
|
320
|
+
fontSize: rem("18px"),
|
|
321
|
+
lineHeight: rem("28px")
|
|
322
|
+
},
|
|
323
|
+
"2xl": {
|
|
324
|
+
fontSize: rem("20px"),
|
|
325
|
+
lineHeight: rem("28px")
|
|
326
|
+
},
|
|
327
|
+
"3xl": {
|
|
328
|
+
fontSize: rem("24px"),
|
|
329
|
+
lineHeight: rem("32px")
|
|
330
|
+
},
|
|
331
|
+
"4xl": {
|
|
332
|
+
fontSize: rem("30px"),
|
|
333
|
+
lineHeight: rem("36px")
|
|
334
|
+
},
|
|
335
|
+
"5xl": {
|
|
336
|
+
fontSize: rem("36px"),
|
|
337
|
+
lineHeight: rem("40px")
|
|
338
|
+
}
|
|
339
|
+
};
|
|
340
|
+
|
|
341
|
+
const maxSize = {
|
|
342
|
+
xs: rem("320px"),
|
|
343
|
+
sm: rem("384px"),
|
|
344
|
+
md: rem("448px"),
|
|
345
|
+
lg: rem("512px")
|
|
346
|
+
};
|
|
347
|
+
|
|
348
|
+
const screens = {
|
|
349
|
+
sm: rem("600px"),
|
|
350
|
+
md: rem("900px")
|
|
351
|
+
};
|
|
352
|
+
|
|
353
|
+
const size = {
|
|
354
|
+
"2xs": rem("16px"),
|
|
355
|
+
xs: rem("20px"),
|
|
356
|
+
sm: rem("24px"),
|
|
357
|
+
md: rem("32px"),
|
|
358
|
+
lg: rem("40px"),
|
|
359
|
+
xl: rem("48px"),
|
|
360
|
+
"3xl": rem("80px")
|
|
361
|
+
};
|
|
362
|
+
|
|
363
|
+
const zIndex = {
|
|
364
|
+
popover: "3000",
|
|
365
|
+
toast: "3010",
|
|
366
|
+
tooltip: "10000"
|
|
367
|
+
};
|
|
368
|
+
|
|
369
|
+
const tokens = {
|
|
370
|
+
borderRadius,
|
|
371
|
+
boxShadow,
|
|
372
|
+
colors,
|
|
373
|
+
fontFamily,
|
|
374
|
+
fontSize,
|
|
375
|
+
maxSize,
|
|
376
|
+
screens,
|
|
377
|
+
size,
|
|
378
|
+
zIndex
|
|
379
|
+
};
|
|
380
|
+
|
|
381
|
+
exports.AxiomVersionContext = AxiomVersionContext;
|
|
382
|
+
exports.ToastContextProvider = ToastContextProvider;
|
|
383
|
+
exports.createToaster = createToaster;
|
|
384
|
+
exports.theme = theme;
|
|
385
|
+
exports.toaster = toaster;
|
|
386
|
+
exports.tokens = tokens;
|
|
387
|
+
exports.useToastContext = useToastContext;
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"url": "https://github.com/optimizely-axiom/optiaxiom.git"
|
|
8
8
|
},
|
|
9
9
|
"type": "module",
|
|
10
|
-
"version": "0.7.
|
|
10
|
+
"version": "0.7.2",
|
|
11
11
|
"files": [
|
|
12
12
|
"dist/**",
|
|
13
13
|
"LICENSE"
|
|
@@ -15,15 +15,18 @@
|
|
|
15
15
|
"license": "Apache-2.0",
|
|
16
16
|
"exports": {
|
|
17
17
|
".": {
|
|
18
|
-
"import": "./dist/index.js",
|
|
18
|
+
"import": "./dist/esm/index.js",
|
|
19
|
+
"require": "./dist/cjs/index.js",
|
|
19
20
|
"types": "./dist/index.d.ts"
|
|
20
21
|
},
|
|
21
22
|
"./fonts": {
|
|
22
|
-
"import": "./dist/fonts.js"
|
|
23
|
+
"import": "./dist/esm/fonts.js",
|
|
24
|
+
"require": "./dist/cjs/fonts.js"
|
|
23
25
|
}
|
|
24
26
|
},
|
|
25
27
|
"sideEffects": [
|
|
26
|
-
"./dist/fonts.js"
|
|
28
|
+
"./dist/cjs/fonts.js",
|
|
29
|
+
"./dist/esm/fonts.js"
|
|
27
30
|
],
|
|
28
31
|
"types": "dist/index.d.ts",
|
|
29
32
|
"dependencies": {
|
package/dist/fonts.js
DELETED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|