@situaction/traq-ui-ste 1.1.27 → 1.1.29
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/components/editable-field/EditableField.d.ts +24 -0
- package/dist/components/editable-field/EditableField.js +30 -0
- package/dist/components/input/Input.js +29 -29
- package/dist/components/input-label/InputLabel.d.ts +16 -0
- package/dist/components/input-label/InputLabel.js +43 -0
- package/dist/components/interface.d.ts +1 -1
- package/dist/components/tag/Tag.js +1 -1
- package/dist/main.d.ts +2 -0
- package/dist/main.js +33 -29
- package/dist/styles/EditableField.css +1 -0
- package/dist/styles/Input.css +1 -1
- package/dist/styles/InputLabel.css +1 -0
- package/dist/styles/ThemeContext.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { LabelInputProps } from '../input-label/InputLabel';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Props for the EditableField component.
|
|
5
|
+
* Extends all props from InputLabel to allow reuse.
|
|
6
|
+
*/
|
|
7
|
+
interface EditableFieldProps extends Partial<LabelInputProps> {
|
|
8
|
+
/** Text displayed as the label above the field */
|
|
9
|
+
label: string;
|
|
10
|
+
/** Value to display or edit */
|
|
11
|
+
value?: string;
|
|
12
|
+
/** Placeholder shown when the input is empty (in edit mode) */
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
/** If true, renders an editable input field */
|
|
15
|
+
edit: boolean;
|
|
16
|
+
/** Callback when value is changed (only in edit mode) */
|
|
17
|
+
onChange?: (val: string) => void;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* EditableField displays either a read-only value or an editable input.
|
|
21
|
+
* It supports all props from InputLabel.
|
|
22
|
+
*/
|
|
23
|
+
export declare const EditableField: ({ label, value, placeholder, edit, onChange, ...inputLabelProps }: EditableFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { InputLabel as c } from "../input-label/InputLabel.js";
|
|
3
|
+
import '../../styles/EditableField.css';const m = "_editableField_1lhi9_30", o = "_statiqueField_1lhi9_39", l = {
|
|
4
|
+
editableField: m,
|
|
5
|
+
statiqueField: o
|
|
6
|
+
}, h = ({
|
|
7
|
+
label: i,
|
|
8
|
+
value: e,
|
|
9
|
+
placeholder: d,
|
|
10
|
+
edit: s,
|
|
11
|
+
onChange: a,
|
|
12
|
+
...r
|
|
13
|
+
// Spread to pass all remaining props to InputLabel
|
|
14
|
+
}) => s ? /* @__PURE__ */ t(
|
|
15
|
+
c,
|
|
16
|
+
{
|
|
17
|
+
label: i,
|
|
18
|
+
defaultValue: e || "",
|
|
19
|
+
placeholder: d || "",
|
|
20
|
+
onSubmit: a || (() => {
|
|
21
|
+
}),
|
|
22
|
+
...r
|
|
23
|
+
}
|
|
24
|
+
) : /* @__PURE__ */ n("div", { className: l.editableField, children: [
|
|
25
|
+
/* @__PURE__ */ t("span", { className: "textSmall", children: i }),
|
|
26
|
+
/* @__PURE__ */ t("div", { className: `${l.statiqueField} textSmall`, children: (e == null ? void 0 : e.trim()) || " " })
|
|
27
|
+
] });
|
|
28
|
+
export {
|
|
29
|
+
h as EditableField
|
|
30
|
+
};
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
import { jsxs as a, jsx as t, Fragment as
|
|
2
|
-
import { useState as
|
|
3
|
-
import '../../styles/Input.css';const
|
|
4
|
-
"input-style": "_input-
|
|
5
|
-
"input-style-disabled": "_input-style-
|
|
6
|
-
"input-style-focused": "_input-style-
|
|
7
|
-
"input-style-secondary": "_input-style-
|
|
8
|
-
"input-style-ghost": "_input-style-
|
|
9
|
-
"input-style-error": "_input-style-
|
|
10
|
-
"input-container": "_input-
|
|
11
|
-
"input-style-size-xl": "_input-style-size-
|
|
12
|
-
"input-style-size-l": "_input-style-size-
|
|
13
|
-
"input-style-size-m": "_input-style-size-
|
|
14
|
-
"input-style-size-s": "_input-style-size-
|
|
15
|
-
"input-style-radius": "_input-style-
|
|
16
|
-
flexHorizontalBetween:
|
|
1
|
+
import { jsxs as a, jsx as t, Fragment as y } from "react/jsx-runtime";
|
|
2
|
+
import { useState as c, useRef as p } from "react";
|
|
3
|
+
import '../../styles/Input.css';const F = "_flexHorizontalBetween_xyzdj_157", N = "_flexHorizontal_xyzdj_157", e = {
|
|
4
|
+
"input-style": "_input-style_xyzdj_52",
|
|
5
|
+
"input-style-disabled": "_input-style-disabled_xyzdj_64",
|
|
6
|
+
"input-style-focused": "_input-style-focused_xyzdj_75",
|
|
7
|
+
"input-style-secondary": "_input-style-secondary_xyzdj_82",
|
|
8
|
+
"input-style-ghost": "_input-style-ghost_xyzdj_96",
|
|
9
|
+
"input-style-error": "_input-style-error_xyzdj_99",
|
|
10
|
+
"input-container": "_input-container_xyzdj_109",
|
|
11
|
+
"input-style-size-xl": "_input-style-size-xl_xyzdj_113",
|
|
12
|
+
"input-style-size-l": "_input-style-size-l_xyzdj_123",
|
|
13
|
+
"input-style-size-m": "_input-style-size-m_xyzdj_133",
|
|
14
|
+
"input-style-size-s": "_input-style-size-s_xyzdj_143",
|
|
15
|
+
"input-style-radius": "_input-style-radius_xyzdj_153",
|
|
16
|
+
flexHorizontalBetween: F,
|
|
17
17
|
flexHorizontal: N
|
|
18
18
|
}, R = ({
|
|
19
|
-
sizeStyle:
|
|
19
|
+
sizeStyle: d = "m",
|
|
20
20
|
labelUnit: l,
|
|
21
21
|
status: n = "default",
|
|
22
22
|
childrenLeft: i,
|
|
23
23
|
childrenRight: o,
|
|
24
|
-
round:
|
|
24
|
+
round: _,
|
|
25
25
|
disabled: u,
|
|
26
|
-
defaultValue:
|
|
27
|
-
...
|
|
26
|
+
defaultValue: z,
|
|
27
|
+
...f
|
|
28
28
|
}) => {
|
|
29
|
-
const [
|
|
30
|
-
|
|
29
|
+
const [x, r] = c(!1), [j, h] = c(z || ""), m = p(null), s = p(null), g = () => r(!0), B = () => r(!1), C = (w) => {
|
|
30
|
+
h(w.target.value);
|
|
31
31
|
}, H = () => {
|
|
32
32
|
s.current && s.current.focus();
|
|
33
33
|
}, S = [
|
|
34
34
|
e["input-style"],
|
|
35
|
-
e[`input-style-size-${
|
|
36
|
-
|
|
35
|
+
e[`input-style-size-${d}`],
|
|
36
|
+
_ && e["input-style-radius"],
|
|
37
37
|
e.flexHorizontalBetween
|
|
38
38
|
].filter(Boolean).join(" "), v = [
|
|
39
|
-
|
|
39
|
+
x && e["input-style-focused"],
|
|
40
40
|
u && e["input-style-disabled"],
|
|
41
41
|
n === "secondary" && e["input-style-secondary"],
|
|
42
42
|
n === "ghost" && e["input-style-ghost"]
|
|
@@ -57,19 +57,19 @@ import '../../styles/Input.css';const j = "_flexHorizontalBetween_84wd5_152", N
|
|
|
57
57
|
onBlur: B,
|
|
58
58
|
onClick: H,
|
|
59
59
|
children: [
|
|
60
|
-
i && /* @__PURE__ */ t(
|
|
60
|
+
i && /* @__PURE__ */ t(y, { children: i }),
|
|
61
61
|
/* @__PURE__ */ t("div", { className: e["input-container"], children: /* @__PURE__ */ t(
|
|
62
62
|
"input",
|
|
63
63
|
{
|
|
64
64
|
autoCorrect: "false",
|
|
65
65
|
disabled: u,
|
|
66
|
-
value:
|
|
66
|
+
value: j,
|
|
67
67
|
onChange: C,
|
|
68
68
|
ref: s,
|
|
69
|
-
...
|
|
69
|
+
...f
|
|
70
70
|
}
|
|
71
71
|
) }),
|
|
72
|
-
/* @__PURE__ */ a(
|
|
72
|
+
/* @__PURE__ */ a(y, { children: [
|
|
73
73
|
l && /* @__PURE__ */ t("div", { children: l }),
|
|
74
74
|
o && /* @__PURE__ */ t("span", { className: e.flexHorizontal, children: o })
|
|
75
75
|
] })
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface LabelInputProps {
|
|
4
|
+
/** Label text displayed above the input */
|
|
5
|
+
label: string;
|
|
6
|
+
/** Default value of the input (optional) */
|
|
7
|
+
defaultValue?: string;
|
|
8
|
+
/** Size of the input: small, medium, or large (optional, default: "s") */
|
|
9
|
+
size?: "s" | "m" | "l";
|
|
10
|
+
/** Callback triggered when the value is submitted */
|
|
11
|
+
onSubmit: (newValue: string) => void;
|
|
12
|
+
/** Placeholder shown when the input is empty (in edit mode) */
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
}
|
|
15
|
+
/** InputLabel is a labeled input component with submit-on-blur and Enter support */
|
|
16
|
+
export declare const InputLabel: FC<LabelInputProps>;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsxs as h, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { useState as d, useEffect as f } from "react";
|
|
3
|
+
import { Input as b } from "../input/Input.js";
|
|
4
|
+
import '../../styles/InputLabel.css';const x = "_inputLabel_1x3uf_30", _ = "_fullWidth_1x3uf_39", o = {
|
|
5
|
+
inputLabel: x,
|
|
6
|
+
fullWidth: _
|
|
7
|
+
}, W = ({
|
|
8
|
+
label: a,
|
|
9
|
+
defaultValue: t,
|
|
10
|
+
size: u = "s",
|
|
11
|
+
onSubmit: r,
|
|
12
|
+
placeholder: y,
|
|
13
|
+
...c
|
|
14
|
+
}) => {
|
|
15
|
+
const [e, s] = d("");
|
|
16
|
+
f(() => {
|
|
17
|
+
s(t ?? "");
|
|
18
|
+
}, [t]);
|
|
19
|
+
const i = () => {
|
|
20
|
+
e.trim() !== t && r(e.trim());
|
|
21
|
+
}, m = (l) => {
|
|
22
|
+
l.key === "Enter" && i();
|
|
23
|
+
}, p = () => {
|
|
24
|
+
i();
|
|
25
|
+
};
|
|
26
|
+
return /* @__PURE__ */ h("div", { className: o.inputLabel, children: [
|
|
27
|
+
/* @__PURE__ */ n("label", { className: "textSmall", children: a }),
|
|
28
|
+
/* @__PURE__ */ n("div", { className: o.fullWidth, children: /* @__PURE__ */ n(
|
|
29
|
+
b,
|
|
30
|
+
{
|
|
31
|
+
value: e,
|
|
32
|
+
sizeStyle: u,
|
|
33
|
+
onChange: (l) => s(l.target.value),
|
|
34
|
+
onKeyDown: m,
|
|
35
|
+
onBlur: p,
|
|
36
|
+
...c
|
|
37
|
+
}
|
|
38
|
+
) })
|
|
39
|
+
] });
|
|
40
|
+
};
|
|
41
|
+
export {
|
|
42
|
+
W as InputLabel
|
|
43
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export type Color = 'light' | 'dark' | '
|
|
1
|
+
export type Color = 'light' | 'dark' | 'gray' | 'blue-gray' | 'blue' | 'blue-situaction' | 'purple' | 'pink' | 'gold' | 'brown' | 'emerald';
|
|
2
2
|
export type Size = 's' | 'm' | 'l' | 'xl';
|
|
3
3
|
export type SizeTooltip = 'xs-5' | 'xs-3' | 'xs' | 'm-1';
|
|
@@ -15,7 +15,7 @@ import '../../styles/Tag.css';const z = "_tag_1yjvr_6", u = "_icon_1yjvr_16", v
|
|
|
15
15
|
label: v,
|
|
16
16
|
flexHorizontalCenter: y,
|
|
17
17
|
flexHorizontal: x
|
|
18
|
-
}, s = ["light", "dark", "
|
|
18
|
+
}, s = ["light", "dark", "gray", "blue-gray", "blue", "blue-situaction", "purple", "pink", "gold", "brown", "emerald"], f = ({
|
|
19
19
|
label: n,
|
|
20
20
|
color: e,
|
|
21
21
|
deletable: o = !1,
|
package/dist/main.d.ts
CHANGED
|
@@ -25,4 +25,6 @@ export { NestedListItem } from './components/list/nested-list/item/NestedListIte
|
|
|
25
25
|
export { Switch } from './components/switch/Switch';
|
|
26
26
|
export { SidePanel } from './components/panel/side-panel/SidePanel';
|
|
27
27
|
export { SidePanelHeader } from './components/panel/side-panel-header/SidePanelHeader';
|
|
28
|
+
export { InputLabel } from './components/input-label/InputLabel';
|
|
29
|
+
export { EditableField } from './components/editable-field/EditableField';
|
|
28
30
|
export { ThemeProvider, useTheme } from './components/theme/ThemeContext';
|
package/dist/main.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { Button as m } from "./components/button/Button.js";
|
|
2
2
|
import { ButtonControlledScroll as x } from "./components/buttonControledScroll/ButtonControlledScroll.js";
|
|
3
3
|
import { Input as l } from "./components/input/Input.js";
|
|
4
|
-
import { Tabs as
|
|
5
|
-
import { IconButton as
|
|
4
|
+
import { Tabs as n } from "./components/tabs/Tabs.js";
|
|
5
|
+
import { IconButton as a } from "./components/icon-button/IconButton.js";
|
|
6
6
|
import { Tag as s } from "./components/tag/Tag.js";
|
|
7
|
-
import { Title as
|
|
7
|
+
import { Title as I } from "./components/title/Title.js";
|
|
8
8
|
import { TagCounter as S } from "./components/tag-counter/TagCounter.js";
|
|
9
|
-
import { Checkbox as
|
|
10
|
-
import { Tooltip as
|
|
11
|
-
import { Select as
|
|
12
|
-
import { Calendar as
|
|
13
|
-
import { Accordion as
|
|
14
|
-
import { AccordionItem as
|
|
15
|
-
import { Card as
|
|
16
|
-
import { Icon as
|
|
17
|
-
import { Menu as
|
|
18
|
-
import { Modal as
|
|
9
|
+
import { Checkbox as b } from "./components/checkbox/Checkbox.js";
|
|
10
|
+
import { Tooltip as L } from "./components/tooltip/Tooltip.js";
|
|
11
|
+
import { Select as B } from "./components/select/Select.js";
|
|
12
|
+
import { Calendar as P } from "./components/calendar/Calendar.js";
|
|
13
|
+
import { Accordion as F } from "./components/accordion/Accordion.js";
|
|
14
|
+
import { AccordionItem as k } from "./components/accordion/item/AccordionItem.js";
|
|
15
|
+
import { Card as w } from "./components/card/Card.js";
|
|
16
|
+
import { Icon as H } from "./components/icon/Icon.js";
|
|
17
|
+
import { Menu as q } from "./components/menu/Menu.js";
|
|
18
|
+
import { Modal as z } from "./components/modal/Modal.js";
|
|
19
19
|
import { SelectMultiItems as G } from "./components/select-multi-items/SelectMultiItems.js";
|
|
20
20
|
import { SelectFilterInputTags as K } from "./components/select-filter-input-tags/SelectFilterInputTags.js";
|
|
21
21
|
import { ListControls as Q } from "./components/list/list-controls/ListControls.js";
|
|
@@ -24,36 +24,40 @@ import { NestedListItem as W } from "./components/list/nested-list/item/NestedLi
|
|
|
24
24
|
import { Switch as Y } from "./components/switch/Switch.js";
|
|
25
25
|
import { SidePanel as _ } from "./components/panel/side-panel/SidePanel.js";
|
|
26
26
|
import { SidePanelHeader as oo } from "./components/panel/side-panel-header/SidePanelHeader.js";
|
|
27
|
-
import {
|
|
27
|
+
import { InputLabel as eo } from "./components/input-label/InputLabel.js";
|
|
28
|
+
import { EditableField as mo } from "./components/editable-field/EditableField.js";
|
|
29
|
+
import { ThemeProvider as xo, useTheme as fo } from "./components/theme/ThemeContext.js";
|
|
28
30
|
import './styles/Size.css';import './styles/index.css';/* empty css */
|
|
29
31
|
/* empty css */
|
|
30
32
|
export {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
+
F as Accordion,
|
|
34
|
+
k as AccordionItem,
|
|
33
35
|
m as Button,
|
|
34
36
|
x as ButtonControlledScroll,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
P as Calendar,
|
|
38
|
+
w as Card,
|
|
39
|
+
b as Checkbox,
|
|
40
|
+
mo as EditableField,
|
|
41
|
+
H as Icon,
|
|
42
|
+
a as IconButton,
|
|
40
43
|
l as Input,
|
|
44
|
+
eo as InputLabel,
|
|
41
45
|
Q as ListControls,
|
|
42
|
-
|
|
43
|
-
|
|
46
|
+
q as Menu,
|
|
47
|
+
z as Modal,
|
|
44
48
|
U as NestedList,
|
|
45
49
|
W as NestedListItem,
|
|
46
|
-
|
|
50
|
+
B as Select,
|
|
47
51
|
K as SelectFilterInputTags,
|
|
48
52
|
G as SelectMultiItems,
|
|
49
53
|
_ as SidePanel,
|
|
50
54
|
oo as SidePanelHeader,
|
|
51
55
|
Y as Switch,
|
|
52
|
-
|
|
56
|
+
n as Tabs,
|
|
53
57
|
s as Tag,
|
|
54
58
|
S as TagCounter,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
xo as ThemeProvider,
|
|
60
|
+
I as Title,
|
|
61
|
+
L as Tooltip,
|
|
62
|
+
fo as useTheme
|
|
59
63
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._editableField_1lhi9_30{width:100%;display:flex;justify-content:flex-start;align-items:start;flex-direction:column;gap:.25rem}._statiqueField_1lhi9_39{width:100%;border-radius:4px;border:1px solid var(--input-primary-default-border);padding:.5rem}
|
package/dist/styles/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
input{font-family:Urbanist,sans-serif;border:none;background-color:transparent;width:100%}input:focus{outline:none;box-shadow:none;border-color:transparent}input::placeholder{font-family:Urbanist,sans-serif;color:var(--input-primary-default-text)}._input-
|
|
1
|
+
input{font-family:Urbanist,sans-serif;border:none;background-color:transparent;width:100%}input:focus{outline:none;box-shadow:none;border-color:transparent}input::placeholder{font-family:Urbanist,sans-serif;color:var(--input-primary-default-text)}input:-webkit-autofill{box-shadow:0 0 0 1000px transparent inset!important;-webkit-text-fill-color:inherit!important;background-color:transparent!important}._input-style_xyzdj_52{font-family:Urbanist,sans-serif;border:1px solid var(--input-primary-default-border);color:var(--input-primary-default-text)}._input-style_xyzdj_52 input{color:var(--input-primary-actived-text)}._input-style_xyzdj_52 *{fill:var(--input-primary-default-icons)}._input-style-disabled_xyzdj_64{background-color:#0000000d;border-color:var(--input-primary-disabled-border);pointer-events:none}._input-style-disabled_xyzdj_64 input{color:var(--input-primary-disabled-text)}._input-style-disabled_xyzdj_64 *{fill:var(--input-primary-disabled-icons)}._input-style-focused_xyzdj_75{color:var(--input-primary-actived-text);border-color:var(--input-primary-actived-border)}._input-style-focused_xyzdj_75 *{fill:var(--icon-selector-button-default-icon)}._input-style-secondary_xyzdj_82{color:var(--input-secondary-default-text);border:1px solid var(--input-secondary-default-border);background:var(--input-secondary-default-background)}._input-style-secondary_xyzdj_82 input{color:var(--input-primary-actived-text)}._input-style-secondary_xyzdj_82 input::placeholder{color:var(--input-secondary-default-text)}._input-style-secondary_xyzdj_82 *{fill:var(--input-secondary-default-icons)}._input-style-ghost_xyzdj_96{border:none}._input-style-error_xyzdj_99{border-color:var(--input-primary-error-border);color:var(--input-primary-error-text)}._input-style-error_xyzdj_99 input::placeholder{color:var(--input-primary-error-text)}._input-style-error_xyzdj_99 *{fill:var(--input-primary-error-icons)}._input-style_xyzdj_52 ._input-container_xyzdj_109{position:relative;width:100%}._input-style-size-xl_xyzdj_113{padding:1rem;font-size:1.125em;line-height:28px;border-radius:8px;gap:.625rem}._input-style-size-xl_xyzdj_113 input{line-height:28px}._input-style-size-l_xyzdj_123{padding:.75rem;font-size:1em;line-height:24px;border-radius:8px;gap:.5rem}._input-style-size-l_xyzdj_123 input{line-height:24px}._input-style-size-m_xyzdj_133{padding:.5rem;font-size:.875em;line-height:20px;border-radius:4px;gap:.375rem}._input-style-size-m_xyzdj_133 input{line-height:20px}._input-style-size-s_xyzdj_143{padding:.375rem;font-size:.875em;line-height:16px;border-radius:4px;gap:.25rem}._input-style-size-s_xyzdj_143 input{line-height:16px}._input-style-radius_xyzdj_153{border-radius:50px}._flexHorizontalBetween_xyzdj_157{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontal_xyzdj_157{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._inputLabel_1x3uf_30{width:100%;display:flex;justify-content:flex-start;align-items:start;flex-direction:column;gap:.25rem}._fullWidth_1x3uf_39{width:100%}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-light-05: rgba(255, 255, 255, .05);--color-light-10: rgba(255, 255, 255, .1);--color-light-20: rgba(255, 255, 255, .2);--color-light-30: rgba(255, 255, 255, .3);--color-light-40: rgba(255, 255, 255, .4);--color-light-50: rgba(255, 255, 255, .5);--color-light-60: rgba(255, 255, 255, .6);--color-light-70: rgba(255, 255, 255, .7);--color-light-80: rgba(255, 255, 255, .8);--color-light-90: rgba(255, 255, 255, .9);--color-light-100: #FFF;--color-dark-05: rgba(15, 15, 15, .05);--color-dark-10: rgba(15, 15, 15, .1);--color-dark-20: rgba(15, 15, 15, .2);--color-dark-30: rgba(15, 15, 15, .3);--color-dark-40: rgba(15, 15, 15, .4);--color-dark-50: rgba(15, 15, 15, .5);--color-dark-60: rgba(15, 15, 15, .6);--color-dark-70: rgba(15, 15, 15, .7);--color-dark-80: rgba(15, 15, 15, .8);--color-dark-90: rgba(15, 15, 15, .9);--color-dark-100: #09090B;--color-gray-50: #FAFAFA;--color-gray-100: #E7E7E7;--color-gray-200: #D1D1D1;--color-gray-300: #B0B0B0;--color-gray-400: #888888;--color-gray-500: #6D6D6D;--color-gray-600: #5D5D5D;--color-gray-700: #4F4F4F;--color-gray-800: #454545;--color-gray-900: #3D3D3D;--color-gray-950: #0F0F0F;--color-blue-
|
|
1
|
+
:root{--color-light-05: rgba(255, 255, 255, .05);--color-light-10: rgba(255, 255, 255, .1);--color-light-20: rgba(255, 255, 255, .2);--color-light-30: rgba(255, 255, 255, .3);--color-light-40: rgba(255, 255, 255, .4);--color-light-50: rgba(255, 255, 255, .5);--color-light-60: rgba(255, 255, 255, .6);--color-light-70: rgba(255, 255, 255, .7);--color-light-80: rgba(255, 255, 255, .8);--color-light-90: rgba(255, 255, 255, .9);--color-light-100: #FFF;--color-dark-05: rgba(15, 15, 15, .05);--color-dark-10: rgba(15, 15, 15, .1);--color-dark-20: rgba(15, 15, 15, .2);--color-dark-30: rgba(15, 15, 15, .3);--color-dark-40: rgba(15, 15, 15, .4);--color-dark-50: rgba(15, 15, 15, .5);--color-dark-60: rgba(15, 15, 15, .6);--color-dark-70: rgba(15, 15, 15, .7);--color-dark-80: rgba(15, 15, 15, .8);--color-dark-90: rgba(15, 15, 15, .9);--color-dark-100: #09090B;--color-gray-50: #FAFAFA;--color-gray-100: #E7E7E7;--color-gray-200: #D1D1D1;--color-gray-300: #B0B0B0;--color-gray-400: #888888;--color-gray-500: #6D6D6D;--color-gray-600: #5D5D5D;--color-gray-700: #4F4F4F;--color-gray-800: #454545;--color-gray-900: #3D3D3D;--color-gray-950: #0F0F0F;--color-blue-gray-50: #F4F6F7;--color-blue-gray-100: #E3E8EA;--color-blue-gray-200: #CAD3D7;--color-blue-gray-300: #A5B4BB;--color-blue-gray-400: #788D98;--color-blue-gray-500: #55626C;--color-blue-gray-600: #49565F;--color-blue-gray-700: #445058;--color-blue-gray-800: #3A4047;--color-blue-gray-900: #2B3137;--color-blue-gray-950: #24292E;--color-blue-50: #F5F8FE;--color-blue-100: #EFF4FD;--color-blue-200: #EAF0FC;--color-blue-300: #E0E9FA;--color-blue-400: #D5E1F8;--color-blue-500: #CBDAF7;--color-blue-600: #C0D2F5;--color-blue-700: #B6CBF4;--color-blue-800: #ABC3F1;--color-blue-900: #A1BCF0;--color-blue-950: #24292E;--color-blue-sky-50: #F5F8FE;--color-blue-sky-100: #EFF4FD;--color-blue-sky-200: #EAF0FC;--color-blue-sky-300: #E0E9FA;--color-blue-sky-400: #D5E1F8;--color-blue-sky-500: #CBDAF7;--color-blue-sky-600: #C0D2F5;--color-blue-sky-700: #B6CBF4;--color-blue-sky-800: #ABC3F1;--color-blue-sky-900: #A1BCF0;--color-blue-sky-950: #96B4EE;--color-blue-dark-50: #294266;--color-blue-dark-100: #354E76;--color-blue-dark-200: #415B84;--color-blue-dark-300: #4D6893;--color-blue-dark-400: #5A75A3;--color-blue-dark-500: #6681B2;--color-blue-dark-600: #728EC1;--color-blue-dark-700: #728EC1;--color-blue-dark-800: #ABC3F1;--color-blue-dark-900: #A1BCF0;--color-blue-dark-950: #96B4EE;--color-blue-situaction-50: #EFF8FF;--color-blue-situaction-100: #DFF1FF;--color-blue-situaction-200: #C3E9FD;--color-blue-situaction-300: #7ED3FB;--color-blue-situaction-400: #31B7FF;--color-blue-situaction-500: #069DEF;--color-blue-situaction-600: #007DCE;--color-blue-situaction-700: #02548A;--color-blue-situaction-800: #1F416D;--color-blue-situaction-900: #1D3557;--color-blue-situaction-950: #14243D;--color-purple-50: #F1F2FC;--color-purple-100: #E6E7F9;--color-purple-200: #D1D3F4;--color-purple-300: #B5B6EC;--color-purple-400: #9A96E3;--color-purple-500: #887DD7;--color-purple-600: #6E59C5;--color-purple-700: #6652B0;--color-purple-800: #53458E;--color-purple-900: #463D72;--color-purple-950: #2A2442;--color-pink-50: #FBF4F8;--color-pink-100: #F8EBF3;--color-pink-200: #F2D8E9;--color-pink-300: #E9B8D6;--color-pink-400: #DB8BBB;--color-pink-500: #CC68A0;--color-pink-600: #B84A83;--color-pink-700: #9D3869;--color-pink-800: #833158;--color-pink-900: #6E2D4C;--color-pink-950: #42152A;--color-gold-50: #FDFAE9;--color-gold-100: #FAF0B9;--color-gold-200: #F8E490;--color-gold-300: #F4CF50;--color-gold-400: #EEB721;--color-gold-500: #DE9F14;--color-gold-600: #C07A0E;--color-gold-700: #99570F;--color-gold-800: #7F4614;--color-gold-900: #6C3917;--color-gold-950: #3F1C09;--color-brown-50: #FDF9ED;--color-brown-100: #F6E4B6;--color-brown-200: #F2D897;--color-brown-300: #ECBD5F;--color-brown-400: #E6A637;--color-brown-500: #DF8620;--color-brown-600: #C7681A;--color-brown-700: #A44919;--color-brown-800: #853A19;--color-brown-900: #6C3019;--color-brown-950: #3E1709;--color-emerald-50: #F2F7F3;--color-emerald-100: #DFECE0;--color-emerald-200: #C1D9C5;--color-emerald-300: #98BDA0;--color-emerald-400: #71A07D;--color-emerald-500: #4A7F59;--color-emerald-600: #376445;--color-emerald-700: #2C5038;--color-emerald-800: #25402F;--color-emerald-900: #1F3527;--color-emerald-950: #111D15;--color-red-50: #FFF1F1;--color-red-100: #FFDFDF;--color-red-200: #FFC5C5;--color-red-300: #FF9D9D;--color-red-400: #FF6464;--color-red-500: #FF4747;--color-red-600: #ED1515;--color-red-700: #C80D0D;--color-red-800: #A50F0F;--color-red-900: #881414;--color-red-950: #4B0404;--color-green-50: #F1FCF3;--color-green-100: #DFF9E3;--color-green-200: #C1F1C8;--color-green-300: #91E49E;--color-green-400: #45C85A;--color-green-500: #33B449;--color-green-600: #259437;--color-green-700: #20752F;--color-green-800: #1E5D29;--color-green-900: #1B4C24;--color-green-950: #092A10;--color-sable-100: #F8F6F0;--color-sable-200: #E8E4DA;--color-sable-300: #DED8CA;--color-sable-400: #C8BDA9;--color-sable-500: #B29F85;--color-sable-600: #A28B6D;--color-sable-700: #957A61;--color-sable-800: #7C6452;--color-sable-900: #53443B;--color-sable-950: #2C231E;--color-blue-trans-50: rgba(150, 180, 238, .05);--color-blue-trans-100: rgba(150, 180, 238, .1);--color-blue-trans-200: rgba(150, 180, 238, .2);--color-blue-trans-300: rgba(150, 180, 238, .3);--color-blue-trans-400: rgba(150, 180, 238, .4);--color-blue-trans-500: rgba(150, 180, 238, .5);--color-blue-trans-600: rgba(150, 180, 238, .6);--color-blue-trans-700: rgba(150, 180, 238, .7);--color-blue-trans-800: rgba(150, 180, 238, .8);--color-blue-trans-900: rgba(150, 180, 238, .8);--color-blue-trans-950: #96B4EE;--color-purple-dark-50: #F7F7F8;--color-purple-dark-100: #EDEDF1;--color-purple-dark-200: #D7D7E0;--color-purple-dark-300: #B4B4C5;--color-purple-dark-400: #8B8DA5;--color-purple-dark-500: #6D6F8A;--color-purple-dark-600: #505168;--color-purple-dark-700: #47475D;--color-purple-dark-800: #3E3F4E;--color-purple-dark-900: #2F2B37;--color-purple-dark-950: #28242E;--color-sable-trans-100: rgba(209, 195, 160, 1);--color-sable-trans-90: rgba(209, 195, 160, .9);--color-sable-trans-80: rgba(209, 195, 160, .8);--color-sable-trans-70: rgba(209, 195, 160, .7);--color-sable-trans-60: rgba(209, 195, 160, .6);--color-sable-trans-50: rgba(209, 195, 160, .5);--color-sable-trans-40: rgba(209, 195, 160, .4);--color-sable-trans-30: rgba(209, 195, 160, .3);--color-sable-trans-20: rgba(209, 195, 160, .2);--color-sable-trans-10: rgba(209, 195, 160, .1);--color-sable-trans-5: rgba(209, 195, 160, .05);--color-sable-trans-0: rgba(209, 195, 160, 0);--color-gray-trans-100: rgba(175, 175, 173, 1);--color-gray-trans-90: rgba(175, 175, 173, .9);--color-gray-trans-80: rgba(175, 175, 173, .8);--color-gray-trans-70: rgba(175, 175, 173, .7);--color-gray-trans-60: rgba(175, 175, 173, .6);--color-gray-trans-50: rgba(175, 175, 173, .5);--color-gray-trans-40: rgba(175, 175, 173, .4);--color-gray-trans-30: rgba(175, 175, 173, .3);--color-gray-trans-20: rgba(175, 175, 173, .2);--color-gray-trans-10: rgba(175, 175, 173, .1);--color-gray-trans-5: rgba(175, 175, 173, .05);--color-gray-trans-0: rgba(175, 175, 173, 0);--color-purple-trans-100: rgba(115, 116, 153, 1);--color-purple-trans-90: rgba(115, 116, 153, .9);--color-purple-trans-80: rgba(115, 116, 153, .8);--color-purple-trans-70: rgba(115, 116, 153, .7);--color-purple-trans-60: rgba(115, 116, 153, .6);--color-purple-trans-50: rgba(115, 116, 153, .5);--color-purple-trans-40: rgba(115, 116, 153, .4);--color-purple-trans-30: rgba(115, 116, 153, .3);--color-purple-trans-20: rgba(115, 116, 153, .2);--color-purple-trans-10: rgba(115, 116, 153, .1);--color-purple-trans-5: rgba(115, 116, 153, .05);--color-purple-trans-0: rgba(115, 116, 153, 0);--color-zinc-50: #FAFAFA;--color-zinc-100: #F4F4F5;--color-zinc-200: #E4E4E7;--color-zinc-300: #D4D4D8;--color-zinc-400: #9F9FA9;--color-zinc-500: #71717B;--color-zinc-600: #52525C;--color-zinc-700: #3F3F47;--color-zinc-800: #27272A;--color-zinc-900: #18181B;--color-zinc-950: #09090B;--color-slate-50: #F8FAFC;--color-slate-100: #F1F5F9;--color-slate-200: #E2E8F0;--color-slate-300: #CAD5E2;--color-slate-400: #90A1B9;--color-slate-500: #62748E;--color-slate-600: #45556C;--color-slate-700: #314158;--color-slate-800: #1D293D;--color-slate-900: #0F172B;--color-slate-950: #020618;--spacing-xs-7: .125rem;--spacing-xs-6: .25rem;--spacing-xs-5: .375rem;--spacing-xs-4: .5rem;--spacing-xs-3: .625rem;--spacing-xs-2: .75rem;--spacing-xs: .875rem;--spacing-s: 1rem;--spacing-m-1: 1.125rem;--spacing-m-2: 1.25rem;--spacing-l: 1.5rem;--spacing-xl: 1.75rem;--spacing-xl-2: 2rem;--spacing-xl-3: 2.25rem;--spacing-xl-4: 2.75rem;--spacing-xl-5: 3rem;--spacing-xl-6: 4rem}
|