jaci-ui 0.9.2 → 0.9.4
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/CHANGELOG.md +14 -0
- package/README.md +3 -0
- package/dist/components/button/button.cjs +8 -4
- package/dist/components/button/button.cjs.map +1 -1
- package/dist/components/button/button.d.cts +1 -0
- package/dist/components/button/button.d.ts +1 -0
- package/dist/components/button/button.js +8 -4
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/feedback/badge.cjs.map +1 -1
- package/dist/components/feedback/badge.d.cts +2 -1
- package/dist/components/feedback/badge.d.ts +2 -1
- package/dist/components/feedback/badge.js.map +1 -1
- package/dist/styled-system/recipes/badge.cjs +4 -1
- package/dist/styled-system/recipes/badge.cjs.map +1 -1
- package/dist/styled-system/recipes/badge.js +4 -1
- package/dist/styled-system/recipes/badge.js.map +1 -1
- package/dist/styles/theme.cjs +88 -68
- package/dist/styles/theme.cjs.map +1 -1
- package/dist/styles/theme.js +88 -68
- package/dist/styles/theme.js.map +1 -1
- package/dist/styles.css +12 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.9.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- b6389ad: Allow Badge custom tones to be styled with consumer CSS classes while preserving semantic theme tones.
|
|
8
|
+
- fec5db2: Restore subtle light elevation shadows for raised components in dark themes.
|
|
9
|
+
|
|
10
|
+
## 0.9.3
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- caa17c1: Allow Button links composed with `render={<a />}` to render safely from Next.js server components.
|
|
15
|
+
- 3efbbee: Keep Accordion roots at a stable responsive width when all panels are collapsed.
|
|
16
|
+
|
|
3
17
|
## 0.9.2
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -38,6 +38,9 @@ export function Example() {
|
|
|
38
38
|
<Stack gap="md">
|
|
39
39
|
<Button variant="solid">Continue</Button>
|
|
40
40
|
|
|
41
|
+
{/* Button links also work in a Next App Router Server Component. */}
|
|
42
|
+
<Button variant="outline" render={<a href="/docs" />}>Read the docs</Button>
|
|
43
|
+
|
|
41
44
|
<ColorPicker.Root defaultValue="#2563eb" name="brand-color">
|
|
42
45
|
<ColorPicker.Label>Brand color</ColorPicker.Label>
|
|
43
46
|
<ColorPicker.Control>
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
const require_cx = require("../../styled-system/css/cx.cjs");
|
|
3
2
|
const require_button = require("../../styled-system/recipes/button.cjs");
|
|
4
3
|
const require_index = require("../layout/index.cjs");
|
|
@@ -26,10 +25,11 @@ const Button = (0, react.forwardRef)(function Button({ children, className, vari
|
|
|
26
25
|
if (render) {
|
|
27
26
|
const renderedProps = render.props ?? {};
|
|
28
27
|
const renderedOnClick = renderedProps.onClick;
|
|
29
|
-
const handleRenderedClick = disabled || loading ? (event) => event.preventDefault() : (event) => {
|
|
28
|
+
const handleRenderedClick = renderedOnClick || buttonOnClick ? disabled || loading ? (event) => event.preventDefault() : (event) => {
|
|
30
29
|
renderedOnClick?.(event);
|
|
31
30
|
if (!event.defaultPrevented) buttonOnClick?.(event);
|
|
32
|
-
};
|
|
31
|
+
} : void 0;
|
|
32
|
+
const renderedHref = disabled || loading ? render.type === "a" ? void 0 : renderedProps.href : renderedProps.href;
|
|
33
33
|
return (0, react.cloneElement)(render, {
|
|
34
34
|
...props,
|
|
35
35
|
"aria-busy": loading || void 0,
|
|
@@ -38,7 +38,11 @@ const Button = (0, react.forwardRef)(function Button({ children, className, vari
|
|
|
38
38
|
"data-jaci-component": "button",
|
|
39
39
|
"data-slot": "button",
|
|
40
40
|
children: childrenWithIcons,
|
|
41
|
-
onClick: handleRenderedClick
|
|
41
|
+
onClick: handleRenderedClick,
|
|
42
|
+
...render.type === "a" && (disabled || loading) ? {
|
|
43
|
+
href: renderedHref,
|
|
44
|
+
tabIndex: -1
|
|
45
|
+
} : {}
|
|
42
46
|
});
|
|
43
47
|
}
|
|
44
48
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.cjs","names":["Spinner","cx","button"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"button.cjs","names":["Spinner","cx","button"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import { cloneElement, forwardRef } from \"react\";\nimport type {\n ComponentPropsWithoutRef,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { button } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\ntype RenderableButtonProps = Record<string, unknown> & {\n children?: ReactNode | undefined;\n className?: string | undefined;\n href?: string | undefined;\n onClick?: MouseEventHandler<HTMLElement> | undefined;\n};\n\nexport interface ButtonProps\n extends Omit<ComponentPropsWithoutRef<\"button\">, \"color\" | \"children\"> {\n children?: ReactNode;\n variant?: \"outline\" | \"solid\" | \"ghost\" | \"danger\";\n size?: \"sm\" | \"md\" | \"lg\";\n fullWidth?: boolean;\n loading?: boolean;\n startIcon?: ReactNode;\n endIcon?: ReactNode;\n render?: ReactElement<RenderableButtonProps>;\n}\n\nfunction content(children: ReactNode, loading: boolean, startIcon: ReactNode, endIcon: ReactNode) {\n return (\n <>\n {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : startIcon}\n {children}\n {!loading ? endIcon : undefined}\n </>\n );\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n children,\n className,\n variant = \"outline\",\n size = \"md\",\n fullWidth = false,\n loading = false,\n startIcon,\n endIcon,\n disabled,\n onClick: buttonOnClick,\n render,\n type = \"button\",\n ...props\n },\n ref,\n) {\n const buttonClassName = cx(button({ variant, size, fullWidth }), className);\n const childrenWithIcons = content(children, loading, startIcon, endIcon);\n\n if (render) {\n // Keep the render path tolerant of framework-rendered elements and avoid\n // adding a synthetic client handler when the composed element has none.\n const renderedProps = render.props ?? {};\n const renderedOnClick = renderedProps.onClick as MouseEventHandler<HTMLElement> | undefined;\n const handleRenderedClick: MouseEventHandler<HTMLElement> | undefined =\n renderedOnClick || buttonOnClick\n ? disabled || loading\n ? (event) => event.preventDefault()\n : (event) => {\n renderedOnClick?.(event);\n if (!event.defaultPrevented) {\n buttonOnClick?.(event as unknown as MouseEvent<HTMLButtonElement>);\n }\n }\n : undefined;\n\n // A server component can compose Button with a native anchor. Remove its\n // href while disabled/loading instead of attaching a client-only event\n // handler during the server render.\n const renderedHref =\n disabled || loading\n ? render.type === \"a\"\n ? undefined\n : renderedProps.href\n : renderedProps.href;\n\n return cloneElement(render, {\n ...props,\n \"aria-busy\": loading || undefined,\n \"aria-disabled\": disabled || loading || undefined,\n className: cx(buttonClassName, renderedProps.className),\n \"data-jaci-component\": \"button\",\n \"data-slot\": \"button\",\n children: childrenWithIcons,\n onClick: handleRenderedClick,\n ...(render.type === \"a\" && (disabled || loading) ? { href: renderedHref, tabIndex: -1 } : {}),\n });\n }\n\n return (\n <button\n {...props}\n aria-busy={loading || undefined}\n className={buttonClassName}\n data-jaci-component=\"button\"\n data-slot=\"button\"\n disabled={disabled || loading}\n onClick={buttonOnClick}\n ref={ref}\n type={type}\n >\n {childrenWithIcons}\n </button>\n );\n});\n"],"mappings":";;;;;;AAgCA,SAAS,QAAQ,UAAqB,SAAkB,WAAsB,SAAoB;CAChG,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA;EACG,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;EAC9D;EACA,CAAC,UAAU,UAAU,KAAA;CACtB,EAAA,CAAA;AAEN;AAEA,MAAa,UAAA,GAAA,MAAA,WAAA,CAAoD,SAAS,OACxE,EACE,UACA,WACA,UAAU,WACV,OAAO,MACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,SAAS,eACT,QACA,OAAO,UACP,GAAG,SAEL,KACA;CACA,MAAM,kBAAkBC,WAAAA,GAAGC,eAAAA,OAAO;EAAE;EAAS;EAAM;CAAU,CAAC,GAAG,SAAS;CAC1E,MAAM,oBAAoB,QAAQ,UAAU,SAAS,WAAW,OAAO;CAEvE,IAAI,QAAQ;EAGV,MAAM,gBAAgB,OAAO,SAAS,CAAC;EACvC,MAAM,kBAAkB,cAAc;EACtC,MAAM,sBACJ,mBAAmB,gBACf,YAAY,WACT,UAAU,MAAM,eAAe,KAC/B,UAAU;GACT,kBAAkB,KAAK;GACvB,IAAI,CAAC,MAAM,kBACT,gBAAgB,KAAiD;EAErE,IACF,KAAA;EAKN,MAAM,eACJ,YAAY,UACR,OAAO,SAAS,MACd,KAAA,IACA,cAAc,OAChB,cAAc;EAEpB,QAAA,GAAA,MAAA,aAAA,CAAoB,QAAQ;GAC1B,GAAG;GACH,aAAa,WAAW,KAAA;GACxB,iBAAiB,YAAY,WAAW,KAAA;GACxC,WAAWD,WAAAA,GAAG,iBAAiB,cAAc,SAAS;GACtD,uBAAuB;GACvB,aAAa;GACb,UAAU;GACV,SAAS;GACT,GAAI,OAAO,SAAS,QAAQ,YAAY,WAAW;IAAE,MAAM;IAAc,UAAU;GAAG,IAAI,CAAC;EAC7F,CAAC;CACH;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,GAAI;EACJ,aAAW,WAAW,KAAA;EACtB,WAAW;EACX,uBAAoB;EACpB,aAAU;EACV,UAAU,YAAY;EACtB,SAAS;EACJ;EACC;YAEL;CACK,CAAA;AAEZ,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode }
|
|
|
3
3
|
type RenderableButtonProps = Record<string, unknown> & {
|
|
4
4
|
children?: ReactNode | undefined;
|
|
5
5
|
className?: string | undefined;
|
|
6
|
+
href?: string | undefined;
|
|
6
7
|
onClick?: MouseEventHandler<HTMLElement> | undefined;
|
|
7
8
|
};
|
|
8
9
|
interface ButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "color" | "children"> {
|
|
@@ -3,6 +3,7 @@ import { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode }
|
|
|
3
3
|
type RenderableButtonProps = Record<string, unknown> & {
|
|
4
4
|
children?: ReactNode | undefined;
|
|
5
5
|
className?: string | undefined;
|
|
6
|
+
href?: string | undefined;
|
|
6
7
|
onClick?: MouseEventHandler<HTMLElement> | undefined;
|
|
7
8
|
};
|
|
8
9
|
interface ButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "color" | "children"> {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { cx } from "../../styled-system/css/cx.js";
|
|
3
2
|
import { button } from "../../styled-system/recipes/button.js";
|
|
4
3
|
import { Spinner } from "../layout/index.js";
|
|
@@ -26,10 +25,11 @@ const Button = forwardRef(function Button({ children, className, variant = "outl
|
|
|
26
25
|
if (render) {
|
|
27
26
|
const renderedProps = render.props ?? {};
|
|
28
27
|
const renderedOnClick = renderedProps.onClick;
|
|
29
|
-
const handleRenderedClick = disabled || loading ? (event) => event.preventDefault() : (event) => {
|
|
28
|
+
const handleRenderedClick = renderedOnClick || buttonOnClick ? disabled || loading ? (event) => event.preventDefault() : (event) => {
|
|
30
29
|
renderedOnClick?.(event);
|
|
31
30
|
if (!event.defaultPrevented) buttonOnClick?.(event);
|
|
32
|
-
};
|
|
31
|
+
} : void 0;
|
|
32
|
+
const renderedHref = disabled || loading ? render.type === "a" ? void 0 : renderedProps.href : renderedProps.href;
|
|
33
33
|
return cloneElement(render, {
|
|
34
34
|
...props,
|
|
35
35
|
"aria-busy": loading || void 0,
|
|
@@ -38,7 +38,11 @@ const Button = forwardRef(function Button({ children, className, variant = "outl
|
|
|
38
38
|
"data-jaci-component": "button",
|
|
39
39
|
"data-slot": "button",
|
|
40
40
|
children: childrenWithIcons,
|
|
41
|
-
onClick: handleRenderedClick
|
|
41
|
+
onClick: handleRenderedClick,
|
|
42
|
+
...render.type === "a" && (disabled || loading) ? {
|
|
43
|
+
href: renderedHref,
|
|
44
|
+
tabIndex: -1
|
|
45
|
+
} : {}
|
|
42
46
|
});
|
|
43
47
|
}
|
|
44
48
|
return /* @__PURE__ */ jsx("button", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import { cloneElement, forwardRef } from \"react\";\nimport type {\n ComponentPropsWithoutRef,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { button } from \"../../styled-system/recipes\";\nimport { Spinner } from \"../layout\";\n\ntype RenderableButtonProps = Record<string, unknown> & {\n children?: ReactNode | undefined;\n className?: string | undefined;\n href?: string | undefined;\n onClick?: MouseEventHandler<HTMLElement> | undefined;\n};\n\nexport interface ButtonProps\n extends Omit<ComponentPropsWithoutRef<\"button\">, \"color\" | \"children\"> {\n children?: ReactNode;\n variant?: \"outline\" | \"solid\" | \"ghost\" | \"danger\";\n size?: \"sm\" | \"md\" | \"lg\";\n fullWidth?: boolean;\n loading?: boolean;\n startIcon?: ReactNode;\n endIcon?: ReactNode;\n render?: ReactElement<RenderableButtonProps>;\n}\n\nfunction content(children: ReactNode, loading: boolean, startIcon: ReactNode, endIcon: ReactNode) {\n return (\n <>\n {loading ? <Spinner aria-hidden=\"true\" label=\"\" size=\"sm\" /> : startIcon}\n {children}\n {!loading ? endIcon : undefined}\n </>\n );\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n children,\n className,\n variant = \"outline\",\n size = \"md\",\n fullWidth = false,\n loading = false,\n startIcon,\n endIcon,\n disabled,\n onClick: buttonOnClick,\n render,\n type = \"button\",\n ...props\n },\n ref,\n) {\n const buttonClassName = cx(button({ variant, size, fullWidth }), className);\n const childrenWithIcons = content(children, loading, startIcon, endIcon);\n\n if (render) {\n // Keep the render path tolerant of framework-rendered elements and avoid\n // adding a synthetic client handler when the composed element has none.\n const renderedProps = render.props ?? {};\n const renderedOnClick = renderedProps.onClick as MouseEventHandler<HTMLElement> | undefined;\n const handleRenderedClick: MouseEventHandler<HTMLElement> | undefined =\n renderedOnClick || buttonOnClick\n ? disabled || loading\n ? (event) => event.preventDefault()\n : (event) => {\n renderedOnClick?.(event);\n if (!event.defaultPrevented) {\n buttonOnClick?.(event as unknown as MouseEvent<HTMLButtonElement>);\n }\n }\n : undefined;\n\n // A server component can compose Button with a native anchor. Remove its\n // href while disabled/loading instead of attaching a client-only event\n // handler during the server render.\n const renderedHref =\n disabled || loading\n ? render.type === \"a\"\n ? undefined\n : renderedProps.href\n : renderedProps.href;\n\n return cloneElement(render, {\n ...props,\n \"aria-busy\": loading || undefined,\n \"aria-disabled\": disabled || loading || undefined,\n className: cx(buttonClassName, renderedProps.className),\n \"data-jaci-component\": \"button\",\n \"data-slot\": \"button\",\n children: childrenWithIcons,\n onClick: handleRenderedClick,\n ...(render.type === \"a\" && (disabled || loading) ? { href: renderedHref, tabIndex: -1 } : {}),\n });\n }\n\n return (\n <button\n {...props}\n aria-busy={loading || undefined}\n className={buttonClassName}\n data-jaci-component=\"button\"\n data-slot=\"button\"\n disabled={disabled || loading}\n onClick={buttonOnClick}\n ref={ref}\n type={type}\n >\n {childrenWithIcons}\n </button>\n );\n});\n"],"mappings":";;;;;;AAgCA,SAAS,QAAQ,UAAqB,SAAkB,WAAsB,SAAoB;CAChG,OACE,qBAAA,UAAA,EAAA,UAAA;EACG,UAAU,oBAAC,SAAD;GAAS,eAAY;GAAO,OAAM;GAAG,MAAK;EAAM,CAAA,IAAI;EAC9D;EACA,CAAC,UAAU,UAAU,KAAA;CACtB,EAAA,CAAA;AAEN;AAEA,MAAa,SAAS,WAA2C,SAAS,OACxE,EACE,UACA,WACA,UAAU,WACV,OAAO,MACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,SAAS,eACT,QACA,OAAO,UACP,GAAG,SAEL,KACA;CACA,MAAM,kBAAkB,GAAG,OAAO;EAAE;EAAS;EAAM;CAAU,CAAC,GAAG,SAAS;CAC1E,MAAM,oBAAoB,QAAQ,UAAU,SAAS,WAAW,OAAO;CAEvE,IAAI,QAAQ;EAGV,MAAM,gBAAgB,OAAO,SAAS,CAAC;EACvC,MAAM,kBAAkB,cAAc;EACtC,MAAM,sBACJ,mBAAmB,gBACf,YAAY,WACT,UAAU,MAAM,eAAe,KAC/B,UAAU;GACT,kBAAkB,KAAK;GACvB,IAAI,CAAC,MAAM,kBACT,gBAAgB,KAAiD;EAErE,IACF,KAAA;EAKN,MAAM,eACJ,YAAY,UACR,OAAO,SAAS,MACd,KAAA,IACA,cAAc,OAChB,cAAc;EAEpB,OAAO,aAAa,QAAQ;GAC1B,GAAG;GACH,aAAa,WAAW,KAAA;GACxB,iBAAiB,YAAY,WAAW,KAAA;GACxC,WAAW,GAAG,iBAAiB,cAAc,SAAS;GACtD,uBAAuB;GACvB,aAAa;GACb,UAAU;GACV,SAAS;GACT,GAAI,OAAO,SAAS,QAAQ,YAAY,WAAW;IAAE,MAAM;IAAc,UAAU;GAAG,IAAI,CAAC;EAC7F,CAAC;CACH;CAEA,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,aAAW,WAAW,KAAA;EACtB,WAAW;EACX,uBAAoB;EACpB,aAAU;EACV,UAAU,YAAY;EACtB,SAAS;EACJ;EACC;YAEL;CACK,CAAA;AAEZ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.cjs","names":["cx","badge"],"sources":["../../../src/components/feedback/badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { badge } from \"../../styled-system/recipes\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n tone?: \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n variant?: \"solid\" | \"soft\" | \"outline\";\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { className, tone = \"neutral\", variant = \"solid\", ...props },\n ref,\n) {\n const appearance = `${tone}-${variant}` as\n | \"neutral-solid\"\n | \"accent-solid\"\n | \"success-solid\"\n | \"warning-solid\"\n | \"danger-solid\"\n | \"neutral-soft\"\n | \"accent-soft\"\n | \"success-soft\"\n | \"warning-soft\"\n | \"danger-soft\"\n | \"neutral-outline\"\n | \"accent-outline\"\n | \"success-outline\"\n | \"warning-outline\"\n | \"danger-outline\";\n\n return (\n <span\n {...props}\n ref={ref}\n className={cx(badge({ tone: appearance }), className)}\n data-jaci-component=\"badge\"\n data-jaci-tone={tone}\n data-slot=\"badge\"\n data-variant={variant}\n />\n );\n});\n"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"badge.cjs","names":["cx","badge"],"sources":["../../../src/components/feedback/badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { badge } from \"../../styled-system/recipes\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n /** Use `custom` when the color should be provided by a className or CSS module. */\n tone?: \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\" | \"custom\";\n variant?: \"solid\" | \"soft\" | \"outline\";\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { className, tone = \"neutral\", variant = \"solid\", ...props },\n ref,\n) {\n const appearance = `${tone}-${variant}` as\n | \"neutral-solid\"\n | \"accent-solid\"\n | \"success-solid\"\n | \"warning-solid\"\n | \"danger-solid\"\n | \"neutral-soft\"\n | \"accent-soft\"\n | \"success-soft\"\n | \"warning-soft\"\n | \"danger-soft\"\n | \"neutral-outline\"\n | \"accent-outline\"\n | \"success-outline\"\n | \"warning-outline\"\n | \"danger-outline\"\n | \"custom-solid\"\n | \"custom-soft\"\n | \"custom-outline\";\n\n return (\n <span\n {...props}\n ref={ref}\n className={cx(badge({ tone: appearance }), className)}\n data-jaci-component=\"badge\"\n data-jaci-tone={tone}\n data-slot=\"badge\"\n data-variant={variant}\n />\n );\n});\n"],"mappings":";;;;;AAYA,MAAa,SAAA,GAAA,MAAA,WAAA,CAAgD,SAAS,MACpE,EAAE,WAAW,OAAO,WAAW,UAAU,SAAS,GAAG,SACrD,KACA;CACA,MAAM,aAAa,GAAG,KAAK,GAAG;CAoB9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,cAAAA,MAAM,EAAE,MAAM,WAAW,CAAC,GAAG,SAAS;EACpD,uBAAoB;EACpB,kBAAgB;EAChB,aAAU;EACV,gBAAc;CACf,CAAA;AAEL,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from "react";
|
|
2
2
|
//#region src/components/feedback/badge.d.ts
|
|
3
3
|
interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
|
|
4
|
-
|
|
4
|
+
/** Use `custom` when the color should be provided by a className or CSS module. */
|
|
5
|
+
tone?: "neutral" | "accent" | "success" | "warning" | "danger" | "custom";
|
|
5
6
|
variant?: "solid" | "soft" | "outline";
|
|
6
7
|
}
|
|
7
8
|
declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from "react";
|
|
2
2
|
//#region src/components/feedback/badge.d.ts
|
|
3
3
|
interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
|
|
4
|
-
|
|
4
|
+
/** Use `custom` when the color should be provided by a className or CSS module. */
|
|
5
|
+
tone?: "neutral" | "accent" | "success" | "warning" | "danger" | "custom";
|
|
5
6
|
variant?: "solid" | "soft" | "outline";
|
|
6
7
|
}
|
|
7
8
|
declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/feedback/badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { badge } from \"../../styled-system/recipes\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n tone?: \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\n variant?: \"solid\" | \"soft\" | \"outline\";\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { className, tone = \"neutral\", variant = \"solid\", ...props },\n ref,\n) {\n const appearance = `${tone}-${variant}` as\n | \"neutral-solid\"\n | \"accent-solid\"\n | \"success-solid\"\n | \"warning-solid\"\n | \"danger-solid\"\n | \"neutral-soft\"\n | \"accent-soft\"\n | \"success-soft\"\n | \"warning-soft\"\n | \"danger-soft\"\n | \"neutral-outline\"\n | \"accent-outline\"\n | \"success-outline\"\n | \"warning-outline\"\n | \"danger-outline\";\n\n return (\n <span\n {...props}\n ref={ref}\n className={cx(badge({ tone: appearance }), className)}\n data-jaci-component=\"badge\"\n data-jaci-tone={tone}\n data-slot=\"badge\"\n data-variant={variant}\n />\n );\n});\n"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"badge.js","names":[],"sources":["../../../src/components/feedback/badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { badge } from \"../../styled-system/recipes\";\n\nexport interface BadgeProps extends ComponentPropsWithoutRef<\"span\"> {\n /** Use `custom` when the color should be provided by a className or CSS module. */\n tone?: \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\" | \"custom\";\n variant?: \"solid\" | \"soft\" | \"outline\";\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { className, tone = \"neutral\", variant = \"solid\", ...props },\n ref,\n) {\n const appearance = `${tone}-${variant}` as\n | \"neutral-solid\"\n | \"accent-solid\"\n | \"success-solid\"\n | \"warning-solid\"\n | \"danger-solid\"\n | \"neutral-soft\"\n | \"accent-soft\"\n | \"success-soft\"\n | \"warning-soft\"\n | \"danger-soft\"\n | \"neutral-outline\"\n | \"accent-outline\"\n | \"success-outline\"\n | \"warning-outline\"\n | \"danger-outline\"\n | \"custom-solid\"\n | \"custom-soft\"\n | \"custom-outline\";\n\n return (\n <span\n {...props}\n ref={ref}\n className={cx(badge({ tone: appearance }), className)}\n data-jaci-component=\"badge\"\n data-jaci-tone={tone}\n data-slot=\"badge\"\n data-variant={variant}\n />\n );\n});\n"],"mappings":";;;;;AAYA,MAAa,QAAQ,WAAwC,SAAS,MACpE,EAAE,WAAW,OAAO,WAAW,UAAU,SAAS,GAAG,SACrD,KACA;CACA,MAAM,aAAa,GAAG,KAAK,GAAG;CAoB9B,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,MAAM,EAAE,MAAM,WAAW,CAAC,GAAG,SAAS;EACpD,uBAAoB;EACpB,kBAAgB;EAChB,aAAU;EACV,gBAAc;CACf,CAAA;AAEL,CAAC"}
|
|
@@ -17,7 +17,10 @@ const badgeVariantMap = { "tone": [
|
|
|
17
17
|
"accent-outline",
|
|
18
18
|
"success-outline",
|
|
19
19
|
"warning-outline",
|
|
20
|
-
"danger-outline"
|
|
20
|
+
"danger-outline",
|
|
21
|
+
"custom-solid",
|
|
22
|
+
"custom-soft",
|
|
23
|
+
"custom-outline"
|
|
21
24
|
] };
|
|
22
25
|
const badgeVariantKeys = Object.keys(badgeVariantMap);
|
|
23
26
|
const badge = /* @__PURE__ */ Object.assign(require_helpers.memo(badgeFn.recipeFn), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.cjs","names":["memo","mergeRecipes","splitProps"],"sources":["../../../src/styled-system/recipes/badge.js"],"sourcesContent":["import { memo, splitProps } from '../helpers.js';\nimport { createRecipe, mergeRecipes } from './create-recipe.js';\n\nconst badgeFn = /* @__PURE__ */ createRecipe('badge', {\n \"tone\": \"neutral-solid\"\n}, [])\n\nconst badgeVariantMap = {\n \"tone\": [\n \"neutral-solid\",\n \"accent-solid\",\n \"success-solid\",\n \"warning-solid\",\n \"danger-solid\",\n \"neutral-soft\",\n \"accent-soft\",\n \"success-soft\",\n \"warning-soft\",\n \"danger-soft\",\n \"neutral-outline\",\n \"accent-outline\",\n \"success-outline\",\n \"warning-outline\",\n \"danger-outline\"\n ]\n}\n\nconst badgeVariantKeys = Object.keys(badgeVariantMap)\n\nexport const badge = /* @__PURE__ */ Object.assign(memo(badgeFn.recipeFn), {\n __recipe__: true,\n __name__: 'badge',\n __getCompoundVariantCss__: badgeFn.__getCompoundVariantCss__,\n raw: (props) => props,\n variantKeys: badgeVariantKeys,\n variantMap: badgeVariantMap,\n merge(recipe) {\n return mergeRecipes(this, recipe)\n },\n splitVariantProps(props) {\n return splitProps(props, badgeVariantKeys)\n },\n getVariantProps: badgeFn.getVariantProps,\n})"],"mappings":";;;AAGA,MAAM,UAA0B,sCAAA,aAAa,SAAS,EACpD,QAAQ,gBACV,GAAG,CAAC,CAAC;AAEL,MAAM,kBAAkB,EACtB,QAAQ;CACN;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF;AAEA,MAAM,mBAAmB,OAAO,KAAK,eAAe;AAEpD,MAAa,QAAwB,uBAAO,OAAOA,gBAAAA,KAAK,QAAQ,QAAQ,GAAG;CACzE,YAAY;CACZ,UAAU;CACV,2BAA2B,QAAQ;CACnC,MAAM,UAAU;CAChB,aAAa;CACb,YAAY;CACZ,MAAM,QAAQ;EACZ,OAAOC,sBAAAA,aAAa,MAAM,MAAM;CAClC;CACA,kBAAkB,OAAO;EACvB,OAAOC,gBAAAA,WAAW,OAAO,gBAAgB;CAC3C;CACA,iBAAiB,QAAQ;AAC3B,CAAC"}
|
|
1
|
+
{"version":3,"file":"badge.cjs","names":["memo","mergeRecipes","splitProps"],"sources":["../../../src/styled-system/recipes/badge.js"],"sourcesContent":["import { memo, splitProps } from '../helpers.js';\nimport { createRecipe, mergeRecipes } from './create-recipe.js';\n\nconst badgeFn = /* @__PURE__ */ createRecipe('badge', {\n \"tone\": \"neutral-solid\"\n}, [])\n\nconst badgeVariantMap = {\n \"tone\": [\n \"neutral-solid\",\n \"accent-solid\",\n \"success-solid\",\n \"warning-solid\",\n \"danger-solid\",\n \"neutral-soft\",\n \"accent-soft\",\n \"success-soft\",\n \"warning-soft\",\n \"danger-soft\",\n \"neutral-outline\",\n \"accent-outline\",\n \"success-outline\",\n \"warning-outline\",\n \"danger-outline\",\n \"custom-solid\",\n \"custom-soft\",\n \"custom-outline\"\n ]\n}\n\nconst badgeVariantKeys = Object.keys(badgeVariantMap)\n\nexport const badge = /* @__PURE__ */ Object.assign(memo(badgeFn.recipeFn), {\n __recipe__: true,\n __name__: 'badge',\n __getCompoundVariantCss__: badgeFn.__getCompoundVariantCss__,\n raw: (props) => props,\n variantKeys: badgeVariantKeys,\n variantMap: badgeVariantMap,\n merge(recipe) {\n return mergeRecipes(this, recipe)\n },\n splitVariantProps(props) {\n return splitProps(props, badgeVariantKeys)\n },\n getVariantProps: badgeFn.getVariantProps,\n})"],"mappings":";;;AAGA,MAAM,UAA0B,sCAAA,aAAa,SAAS,EACpD,QAAQ,gBACV,GAAG,CAAC,CAAC;AAEL,MAAM,kBAAkB,EACtB,QAAQ;CACN;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF;AAEA,MAAM,mBAAmB,OAAO,KAAK,eAAe;AAEpD,MAAa,QAAwB,uBAAO,OAAOA,gBAAAA,KAAK,QAAQ,QAAQ,GAAG;CACzE,YAAY;CACZ,UAAU;CACV,2BAA2B,QAAQ;CACnC,MAAM,UAAU;CAChB,aAAa;CACb,YAAY;CACZ,MAAM,QAAQ;EACZ,OAAOC,sBAAAA,aAAa,MAAM,MAAM;CAClC;CACA,kBAAkB,OAAO;EACvB,OAAOC,gBAAAA,WAAW,OAAO,gBAAgB;CAC3C;CACA,iBAAiB,QAAQ;AAC3B,CAAC"}
|
|
@@ -17,7 +17,10 @@ const badgeVariantMap = { "tone": [
|
|
|
17
17
|
"accent-outline",
|
|
18
18
|
"success-outline",
|
|
19
19
|
"warning-outline",
|
|
20
|
-
"danger-outline"
|
|
20
|
+
"danger-outline",
|
|
21
|
+
"custom-solid",
|
|
22
|
+
"custom-soft",
|
|
23
|
+
"custom-outline"
|
|
21
24
|
] };
|
|
22
25
|
const badgeVariantKeys = Object.keys(badgeVariantMap);
|
|
23
26
|
const badge = /* @__PURE__ */ Object.assign(memo(badgeFn.recipeFn), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","names":[],"sources":["../../../src/styled-system/recipes/badge.js"],"sourcesContent":["import { memo, splitProps } from '../helpers.js';\nimport { createRecipe, mergeRecipes } from './create-recipe.js';\n\nconst badgeFn = /* @__PURE__ */ createRecipe('badge', {\n \"tone\": \"neutral-solid\"\n}, [])\n\nconst badgeVariantMap = {\n \"tone\": [\n \"neutral-solid\",\n \"accent-solid\",\n \"success-solid\",\n \"warning-solid\",\n \"danger-solid\",\n \"neutral-soft\",\n \"accent-soft\",\n \"success-soft\",\n \"warning-soft\",\n \"danger-soft\",\n \"neutral-outline\",\n \"accent-outline\",\n \"success-outline\",\n \"warning-outline\",\n \"danger-outline\"\n ]\n}\n\nconst badgeVariantKeys = Object.keys(badgeVariantMap)\n\nexport const badge = /* @__PURE__ */ Object.assign(memo(badgeFn.recipeFn), {\n __recipe__: true,\n __name__: 'badge',\n __getCompoundVariantCss__: badgeFn.__getCompoundVariantCss__,\n raw: (props) => props,\n variantKeys: badgeVariantKeys,\n variantMap: badgeVariantMap,\n merge(recipe) {\n return mergeRecipes(this, recipe)\n },\n splitVariantProps(props) {\n return splitProps(props, badgeVariantKeys)\n },\n getVariantProps: badgeFn.getVariantProps,\n})"],"mappings":";;;AAGA,MAAM,UAA0B,6BAAa,SAAS,EACpD,QAAQ,gBACV,GAAG,CAAC,CAAC;AAEL,MAAM,kBAAkB,EACtB,QAAQ;CACN;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF;AAEA,MAAM,mBAAmB,OAAO,KAAK,eAAe;AAEpD,MAAa,QAAwB,uBAAO,OAAO,KAAK,QAAQ,QAAQ,GAAG;CACzE,YAAY;CACZ,UAAU;CACV,2BAA2B,QAAQ;CACnC,MAAM,UAAU;CAChB,aAAa;CACb,YAAY;CACZ,MAAM,QAAQ;EACZ,OAAO,aAAa,MAAM,MAAM;CAClC;CACA,kBAAkB,OAAO;EACvB,OAAO,WAAW,OAAO,gBAAgB;CAC3C;CACA,iBAAiB,QAAQ;AAC3B,CAAC"}
|
|
1
|
+
{"version":3,"file":"badge.js","names":[],"sources":["../../../src/styled-system/recipes/badge.js"],"sourcesContent":["import { memo, splitProps } from '../helpers.js';\nimport { createRecipe, mergeRecipes } from './create-recipe.js';\n\nconst badgeFn = /* @__PURE__ */ createRecipe('badge', {\n \"tone\": \"neutral-solid\"\n}, [])\n\nconst badgeVariantMap = {\n \"tone\": [\n \"neutral-solid\",\n \"accent-solid\",\n \"success-solid\",\n \"warning-solid\",\n \"danger-solid\",\n \"neutral-soft\",\n \"accent-soft\",\n \"success-soft\",\n \"warning-soft\",\n \"danger-soft\",\n \"neutral-outline\",\n \"accent-outline\",\n \"success-outline\",\n \"warning-outline\",\n \"danger-outline\",\n \"custom-solid\",\n \"custom-soft\",\n \"custom-outline\"\n ]\n}\n\nconst badgeVariantKeys = Object.keys(badgeVariantMap)\n\nexport const badge = /* @__PURE__ */ Object.assign(memo(badgeFn.recipeFn), {\n __recipe__: true,\n __name__: 'badge',\n __getCompoundVariantCss__: badgeFn.__getCompoundVariantCss__,\n raw: (props) => props,\n variantKeys: badgeVariantKeys,\n variantMap: badgeVariantMap,\n merge(recipe) {\n return mergeRecipes(this, recipe)\n },\n splitVariantProps(props) {\n return splitProps(props, badgeVariantKeys)\n },\n getVariantProps: badgeFn.getVariantProps,\n})"],"mappings":";;;AAGA,MAAM,UAA0B,6BAAa,SAAS,EACpD,QAAQ,gBACV,GAAG,CAAC,CAAC;AAEL,MAAM,kBAAkB,EACtB,QAAQ;CACN;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF;AAEA,MAAM,mBAAmB,OAAO,KAAK,eAAe;AAEpD,MAAa,QAAwB,uBAAO,OAAO,KAAK,QAAQ,QAAQ,GAAG;CACzE,YAAY;CACZ,UAAU;CACV,2BAA2B,QAAQ;CACnC,MAAM,UAAU;CAChB,aAAa;CACb,YAAY;CACZ,MAAM,QAAQ;EACZ,OAAO,aAAa,MAAM,MAAM;CAClC;CACA,kBAAkB,OAAO;EACvB,OAAO,WAAW,OAAO,gBAAgB;CAC3C;CACA,iBAAiB,QAAQ;AAC3B,CAAC"}
|
package/dist/styles/theme.cjs
CHANGED
|
@@ -63,82 +63,102 @@ const jaciTheme = { extend: {
|
|
|
63
63
|
},
|
|
64
64
|
animations: { spin: { value: "spin 900ms linear infinite" } }
|
|
65
65
|
},
|
|
66
|
-
semanticTokens: {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
66
|
+
semanticTokens: {
|
|
67
|
+
colors: {
|
|
68
|
+
surface: {
|
|
69
|
+
canvas: { value: {
|
|
70
|
+
base: "{colors.neutral.50}",
|
|
71
|
+
_dark: "{colors.neutral.950}"
|
|
72
|
+
} },
|
|
73
|
+
default: { value: {
|
|
74
|
+
base: "{colors.neutral.100}",
|
|
75
|
+
_dark: "{colors.neutral.900}"
|
|
76
|
+
} },
|
|
77
|
+
raised: { value: {
|
|
78
|
+
base: "{colors.neutral.50}",
|
|
79
|
+
_dark: "{colors.neutral.800}"
|
|
80
|
+
} },
|
|
81
|
+
subtle: { value: {
|
|
82
|
+
base: "{colors.neutral.200}",
|
|
83
|
+
_dark: "{colors.neutral.800}"
|
|
84
|
+
} },
|
|
85
|
+
overlay: { value: {
|
|
86
|
+
base: "rgb(250 250 250 / 0.32)",
|
|
87
|
+
_dark: "rgb(9 9 11 / 0.4)"
|
|
88
|
+
} }
|
|
89
|
+
},
|
|
90
|
+
fg: {
|
|
91
|
+
default: { value: {
|
|
92
|
+
base: "{colors.neutral.900}",
|
|
93
|
+
_dark: "{colors.neutral.100}"
|
|
94
|
+
} },
|
|
95
|
+
muted: { value: {
|
|
96
|
+
base: "{colors.neutral.600}",
|
|
97
|
+
_dark: "{colors.neutral.400}"
|
|
98
|
+
} },
|
|
99
|
+
onAccent: { value: "{colors.neutral.50}" }
|
|
100
|
+
},
|
|
101
|
+
border: {
|
|
102
|
+
default: { value: {
|
|
103
|
+
base: "{colors.neutral.300}",
|
|
104
|
+
_dark: "{colors.neutral.700}"
|
|
105
|
+
} },
|
|
106
|
+
strong: { value: {
|
|
107
|
+
base: "{colors.neutral.500}",
|
|
108
|
+
_dark: "{colors.neutral.500}"
|
|
109
|
+
} },
|
|
110
|
+
interactive: { value: {
|
|
111
|
+
base: "{colors.neutral.900}",
|
|
112
|
+
_dark: "{colors.neutral.200}"
|
|
113
|
+
} }
|
|
114
|
+
},
|
|
115
|
+
accent: {
|
|
116
|
+
default: { value: "{colors.blue.600}" },
|
|
117
|
+
hover: { value: "{colors.blue.700}" }
|
|
118
|
+
},
|
|
119
|
+
success: { value: "{colors.green.700}" },
|
|
120
|
+
warning: { value: "{colors.amber.700}" },
|
|
121
|
+
danger: { value: "{colors.red.600}" },
|
|
122
|
+
info: { value: "{colors.blue.600}" },
|
|
123
|
+
focus: { value: "{colors.blue.600}" },
|
|
124
|
+
disabled: { value: {
|
|
125
|
+
base: "{colors.neutral.400}",
|
|
126
|
+
_dark: "{colors.neutral.600}"
|
|
93
127
|
} },
|
|
94
|
-
|
|
95
|
-
base: "{colors.
|
|
96
|
-
_dark: "{colors.
|
|
128
|
+
selected: { value: {
|
|
129
|
+
base: "{colors.blue.50}",
|
|
130
|
+
_dark: "{colors.blue.950}"
|
|
97
131
|
} },
|
|
98
|
-
|
|
132
|
+
link: {
|
|
133
|
+
default: { value: {
|
|
134
|
+
base: "{colors.neutral.600}",
|
|
135
|
+
_dark: "{colors.neutral.400}"
|
|
136
|
+
} },
|
|
137
|
+
hover: { value: {
|
|
138
|
+
base: "{colors.neutral.900}",
|
|
139
|
+
_dark: "{colors.neutral.200}"
|
|
140
|
+
} }
|
|
141
|
+
}
|
|
99
142
|
},
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
base: "
|
|
103
|
-
_dark: "
|
|
143
|
+
shadows: {
|
|
144
|
+
sm: { value: {
|
|
145
|
+
base: "0 1px 2px rgb(0 0 0 / 0.08)",
|
|
146
|
+
_dark: "0 1px 2px rgb(255 255 255 / 0.08)"
|
|
104
147
|
} },
|
|
105
|
-
|
|
106
|
-
base: "
|
|
107
|
-
_dark: "
|
|
148
|
+
md: { value: {
|
|
149
|
+
base: "0 10px 24px rgb(0 0 0 / 0.12)",
|
|
150
|
+
_dark: "0 10px 24px rgb(255 255 255 / 0.1)"
|
|
108
151
|
} },
|
|
109
|
-
|
|
110
|
-
base: "
|
|
111
|
-
_dark: "
|
|
112
|
-
} }
|
|
113
|
-
},
|
|
114
|
-
accent: {
|
|
115
|
-
default: { value: "{colors.blue.600}" },
|
|
116
|
-
hover: { value: "{colors.blue.700}" }
|
|
117
|
-
},
|
|
118
|
-
success: { value: "{colors.green.700}" },
|
|
119
|
-
warning: { value: "{colors.amber.700}" },
|
|
120
|
-
danger: { value: "{colors.red.600}" },
|
|
121
|
-
info: { value: "{colors.blue.600}" },
|
|
122
|
-
focus: { value: "{colors.blue.600}" },
|
|
123
|
-
disabled: { value: {
|
|
124
|
-
base: "{colors.neutral.400}",
|
|
125
|
-
_dark: "{colors.neutral.600}"
|
|
126
|
-
} },
|
|
127
|
-
selected: { value: {
|
|
128
|
-
base: "{colors.blue.50}",
|
|
129
|
-
_dark: "{colors.blue.950}"
|
|
130
|
-
} },
|
|
131
|
-
link: {
|
|
132
|
-
default: { value: {
|
|
133
|
-
base: "{colors.neutral.600}",
|
|
134
|
-
_dark: "{colors.neutral.400}"
|
|
152
|
+
lg: { value: {
|
|
153
|
+
base: "0 18px 42px rgb(0 0 0 / 0.16)",
|
|
154
|
+
_dark: "0 18px 42px rgb(255 255 255 / 0.12)"
|
|
135
155
|
} },
|
|
136
|
-
|
|
137
|
-
base: "
|
|
138
|
-
_dark: "
|
|
156
|
+
xl: { value: {
|
|
157
|
+
base: "0 24px 52px rgb(0 0 0 / 0.2)",
|
|
158
|
+
_dark: "0 24px 52px rgb(255 255 255 / 0.14)"
|
|
139
159
|
} }
|
|
140
160
|
}
|
|
141
|
-
}
|
|
161
|
+
},
|
|
142
162
|
textStyles: { body: { value: {
|
|
143
163
|
fontFamily: "system-ui, sans-serif",
|
|
144
164
|
lineHeight: "1.5"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.cjs","names":[],"sources":["../../src/styles/theme.ts"],"sourcesContent":["export const jaciConditions = {\n extend: {\n dark: '[data-jaci-theme=\"dark\"] &',\n },\n};\n\nexport const jaciTheme = {\n extend: {\n tokens: {\n colors: {\n neutral: {\n 50: { value: \"#fafafa\" },\n 100: { value: \"#f4f4f5\" },\n 200: { value: \"#e4e4e7\" },\n 300: { value: \"#d4d4d8\" },\n 400: { value: \"#a1a1aa\" },\n 500: { value: \"#71717a\" },\n 600: { value: \"#52525b\" },\n 700: { value: \"#3f3f46\" },\n 800: { value: \"#27272a\" },\n 900: { value: \"#18181b\" },\n 950: { value: \"#09090b\" },\n },\n blue: {\n 500: { value: \"#3b82f6\" },\n 600: { value: \"#2563eb\" },\n 700: { value: \"#1d4ed8\" },\n },\n green: {\n 500: { value: \"#22c55e\" },\n 600: { value: \"#16a34a\" },\n 700: { value: \"#15803d\" },\n },\n amber: {\n 500: { value: \"#f59e0b\" },\n 600: { value: \"#d97706\" },\n 700: { value: \"#b45309\" },\n },\n red: {\n 500: { value: \"#ef4444\" },\n 600: { value: \"#dc2626\" },\n },\n },\n radii: {\n sm: { value: \"0.375rem\" },\n md: { value: \"0.75rem\" },\n lg: { value: \"1rem\" },\n xl: { value: \"1.5rem\" },\n \"2xl\": { value: \"2rem\" },\n full: { value: \"9999px\" },\n },\n shadows: {\n sm: { value: \"0 1px 2px rgb(0 0 0 / 0.08)\" },\n md: { value: \"0 10px 24px rgb(0 0 0 / 0.12)\" },\n lg: { value: \"0 18px 42px rgb(0 0 0 / 0.16)\" },\n xl: { value: \"0 24px 52px rgb(0 0 0 / 0.2)\" },\n },\n durations: {\n fast: { value: \"150ms\" },\n normal: { value: \"250ms\" },\n slow: { value: \"500ms\" },\n },\n easings: {\n standard: { value: \"cubic-bezier(0.2, 0, 0, 1)\" },\n },\n transitions: {\n colors: { value: \"background-color, border-color, box-shadow, color\" },\n transform: { value: \"transform\" },\n standard: { value: \"background-color, border-color, box-shadow, color, transform\" },\n },\n animations: {\n spin: { value: \"spin 900ms linear infinite\" },\n },\n },\n semanticTokens: {\n colors: {\n surface: {\n canvas: {\n value: { base: \"{colors.neutral.50}\", _dark: \"{colors.neutral.950}\" },\n },\n default: {\n value: { base: \"{colors.neutral.100}\", _dark: \"{colors.neutral.900}\" },\n },\n raised: {\n value: { base: \"{colors.neutral.50}\", _dark: \"{colors.neutral.800}\" },\n },\n subtle: {\n value: { base: \"{colors.neutral.200}\", _dark: \"{colors.neutral.800}\" },\n },\n overlay: {\n value: {\n base: \"rgb(250 250 250 / 0.32)\",\n _dark: \"rgb(9 9 11 / 0.4)\",\n },\n },\n },\n fg: {\n default: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.100}\" },\n },\n muted: {\n value: { base: \"{colors.neutral.600}\", _dark: \"{colors.neutral.400}\" },\n },\n onAccent: { value: \"{colors.neutral.50}\" },\n },\n border: {\n default: {\n value: { base: \"{colors.neutral.300}\", _dark: \"{colors.neutral.700}\" },\n },\n strong: {\n value: { base: \"{colors.neutral.500}\", _dark: \"{colors.neutral.500}\" },\n },\n interactive: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.200}\" },\n },\n },\n accent: {\n default: { value: \"{colors.blue.600}\" },\n hover: { value: \"{colors.blue.700}\" },\n },\n success: { value: \"{colors.green.700}\" },\n warning: { value: \"{colors.amber.700}\" },\n danger: { value: \"{colors.red.600}\" },\n info: { value: \"{colors.blue.600}\" },\n focus: { value: \"{colors.blue.600}\" },\n disabled: {\n value: { base: \"{colors.neutral.400}\", _dark: \"{colors.neutral.600}\" },\n },\n selected: {\n value: { base: \"{colors.blue.50}\", _dark: \"{colors.blue.950}\" },\n },\n link: {\n default: {\n value: { base: \"{colors.neutral.600}\", _dark: \"{colors.neutral.400}\" },\n },\n hover: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.200}\" },\n },\n },\n },\n },\n textStyles: {\n body: {\n value: {\n fontFamily: \"system-ui, sans-serif\",\n lineHeight: \"1.5\",\n },\n },\n },\n keyframes: {\n spin: {\n to: {\n transform: \"rotate(360deg)\",\n },\n },\n },\n },\n};\n"],"mappings":";AAAA,MAAa,iBAAiB,EAC5B,QAAQ,EACN,MAAM,+BACR,EACF;AAEA,MAAa,YAAY,EACvB,QAAQ;CACN,QAAQ;EACN,QAAQ;GACN,SAAS;IACP,IAAI,EAAE,OAAO,UAAU;IACvB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;GAC1B;GACA,MAAM;IACJ,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;GAC1B;GACA,OAAO;IACL,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;GAC1B;GACA,OAAO;IACL,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;GAC1B;GACA,KAAK;IACH,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;GAC1B;EACF;EACA,OAAO;GACL,IAAI,EAAE,OAAO,WAAW;GACxB,IAAI,EAAE,OAAO,UAAU;GACvB,IAAI,EAAE,OAAO,OAAO;GACpB,IAAI,EAAE,OAAO,SAAS;GACtB,OAAO,EAAE,OAAO,OAAO;GACvB,MAAM,EAAE,OAAO,SAAS;EAC1B;EACA,SAAS;GACP,IAAI,EAAE,OAAO,8BAA8B;GAC3C,IAAI,EAAE,OAAO,gCAAgC;GAC7C,IAAI,EAAE,OAAO,gCAAgC;GAC7C,IAAI,EAAE,OAAO,+BAA+B;EAC9C;EACA,WAAW;GACT,MAAM,EAAE,OAAO,QAAQ;GACvB,QAAQ,EAAE,OAAO,QAAQ;GACzB,MAAM,EAAE,OAAO,QAAQ;EACzB;EACA,SAAS,EACP,UAAU,EAAE,OAAO,6BAA6B,EAClD;EACA,aAAa;GACX,QAAQ,EAAE,OAAO,oDAAoD;GACrE,WAAW,EAAE,OAAO,YAAY;GAChC,UAAU,EAAE,OAAO,+DAA+D;EACpF;EACA,YAAY,EACV,MAAM,EAAE,OAAO,6BAA6B,EAC9C;CACF;CACA,gBAAgB
|
|
1
|
+
{"version":3,"file":"theme.cjs","names":[],"sources":["../../src/styles/theme.ts"],"sourcesContent":["export const jaciConditions = {\n extend: {\n dark: '[data-jaci-theme=\"dark\"] &',\n },\n};\n\nexport const jaciTheme = {\n extend: {\n tokens: {\n colors: {\n neutral: {\n 50: { value: \"#fafafa\" },\n 100: { value: \"#f4f4f5\" },\n 200: { value: \"#e4e4e7\" },\n 300: { value: \"#d4d4d8\" },\n 400: { value: \"#a1a1aa\" },\n 500: { value: \"#71717a\" },\n 600: { value: \"#52525b\" },\n 700: { value: \"#3f3f46\" },\n 800: { value: \"#27272a\" },\n 900: { value: \"#18181b\" },\n 950: { value: \"#09090b\" },\n },\n blue: {\n 500: { value: \"#3b82f6\" },\n 600: { value: \"#2563eb\" },\n 700: { value: \"#1d4ed8\" },\n },\n green: {\n 500: { value: \"#22c55e\" },\n 600: { value: \"#16a34a\" },\n 700: { value: \"#15803d\" },\n },\n amber: {\n 500: { value: \"#f59e0b\" },\n 600: { value: \"#d97706\" },\n 700: { value: \"#b45309\" },\n },\n red: {\n 500: { value: \"#ef4444\" },\n 600: { value: \"#dc2626\" },\n },\n },\n radii: {\n sm: { value: \"0.375rem\" },\n md: { value: \"0.75rem\" },\n lg: { value: \"1rem\" },\n xl: { value: \"1.5rem\" },\n \"2xl\": { value: \"2rem\" },\n full: { value: \"9999px\" },\n },\n shadows: {\n sm: { value: \"0 1px 2px rgb(0 0 0 / 0.08)\" },\n md: { value: \"0 10px 24px rgb(0 0 0 / 0.12)\" },\n lg: { value: \"0 18px 42px rgb(0 0 0 / 0.16)\" },\n xl: { value: \"0 24px 52px rgb(0 0 0 / 0.2)\" },\n },\n durations: {\n fast: { value: \"150ms\" },\n normal: { value: \"250ms\" },\n slow: { value: \"500ms\" },\n },\n easings: {\n standard: { value: \"cubic-bezier(0.2, 0, 0, 1)\" },\n },\n transitions: {\n colors: { value: \"background-color, border-color, box-shadow, color\" },\n transform: { value: \"transform\" },\n standard: { value: \"background-color, border-color, box-shadow, color, transform\" },\n },\n animations: {\n spin: { value: \"spin 900ms linear infinite\" },\n },\n },\n semanticTokens: {\n colors: {\n surface: {\n canvas: {\n value: { base: \"{colors.neutral.50}\", _dark: \"{colors.neutral.950}\" },\n },\n default: {\n value: { base: \"{colors.neutral.100}\", _dark: \"{colors.neutral.900}\" },\n },\n raised: {\n value: { base: \"{colors.neutral.50}\", _dark: \"{colors.neutral.800}\" },\n },\n subtle: {\n value: { base: \"{colors.neutral.200}\", _dark: \"{colors.neutral.800}\" },\n },\n overlay: {\n value: {\n base: \"rgb(250 250 250 / 0.32)\",\n _dark: \"rgb(9 9 11 / 0.4)\",\n },\n },\n },\n fg: {\n default: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.100}\" },\n },\n muted: {\n value: { base: \"{colors.neutral.600}\", _dark: \"{colors.neutral.400}\" },\n },\n onAccent: { value: \"{colors.neutral.50}\" },\n },\n border: {\n default: {\n value: { base: \"{colors.neutral.300}\", _dark: \"{colors.neutral.700}\" },\n },\n strong: {\n value: { base: \"{colors.neutral.500}\", _dark: \"{colors.neutral.500}\" },\n },\n interactive: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.200}\" },\n },\n },\n accent: {\n default: { value: \"{colors.blue.600}\" },\n hover: { value: \"{colors.blue.700}\" },\n },\n success: { value: \"{colors.green.700}\" },\n warning: { value: \"{colors.amber.700}\" },\n danger: { value: \"{colors.red.600}\" },\n info: { value: \"{colors.blue.600}\" },\n focus: { value: \"{colors.blue.600}\" },\n disabled: {\n value: { base: \"{colors.neutral.400}\", _dark: \"{colors.neutral.600}\" },\n },\n selected: {\n value: { base: \"{colors.blue.50}\", _dark: \"{colors.blue.950}\" },\n },\n link: {\n default: {\n value: { base: \"{colors.neutral.600}\", _dark: \"{colors.neutral.400}\" },\n },\n hover: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.200}\" },\n },\n },\n },\n shadows: {\n sm: {\n value: {\n base: \"0 1px 2px rgb(0 0 0 / 0.08)\",\n _dark: \"0 1px 2px rgb(255 255 255 / 0.08)\",\n },\n },\n md: {\n value: {\n base: \"0 10px 24px rgb(0 0 0 / 0.12)\",\n _dark: \"0 10px 24px rgb(255 255 255 / 0.1)\",\n },\n },\n lg: {\n value: {\n base: \"0 18px 42px rgb(0 0 0 / 0.16)\",\n _dark: \"0 18px 42px rgb(255 255 255 / 0.12)\",\n },\n },\n xl: {\n value: {\n base: \"0 24px 52px rgb(0 0 0 / 0.2)\",\n _dark: \"0 24px 52px rgb(255 255 255 / 0.14)\",\n },\n },\n },\n },\n textStyles: {\n body: {\n value: {\n fontFamily: \"system-ui, sans-serif\",\n lineHeight: \"1.5\",\n },\n },\n },\n keyframes: {\n spin: {\n to: {\n transform: \"rotate(360deg)\",\n },\n },\n },\n },\n};\n"],"mappings":"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"}
|
package/dist/styles/theme.js
CHANGED
|
@@ -63,82 +63,102 @@ const jaciTheme = { extend: {
|
|
|
63
63
|
},
|
|
64
64
|
animations: { spin: { value: "spin 900ms linear infinite" } }
|
|
65
65
|
},
|
|
66
|
-
semanticTokens: {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
66
|
+
semanticTokens: {
|
|
67
|
+
colors: {
|
|
68
|
+
surface: {
|
|
69
|
+
canvas: { value: {
|
|
70
|
+
base: "{colors.neutral.50}",
|
|
71
|
+
_dark: "{colors.neutral.950}"
|
|
72
|
+
} },
|
|
73
|
+
default: { value: {
|
|
74
|
+
base: "{colors.neutral.100}",
|
|
75
|
+
_dark: "{colors.neutral.900}"
|
|
76
|
+
} },
|
|
77
|
+
raised: { value: {
|
|
78
|
+
base: "{colors.neutral.50}",
|
|
79
|
+
_dark: "{colors.neutral.800}"
|
|
80
|
+
} },
|
|
81
|
+
subtle: { value: {
|
|
82
|
+
base: "{colors.neutral.200}",
|
|
83
|
+
_dark: "{colors.neutral.800}"
|
|
84
|
+
} },
|
|
85
|
+
overlay: { value: {
|
|
86
|
+
base: "rgb(250 250 250 / 0.32)",
|
|
87
|
+
_dark: "rgb(9 9 11 / 0.4)"
|
|
88
|
+
} }
|
|
89
|
+
},
|
|
90
|
+
fg: {
|
|
91
|
+
default: { value: {
|
|
92
|
+
base: "{colors.neutral.900}",
|
|
93
|
+
_dark: "{colors.neutral.100}"
|
|
94
|
+
} },
|
|
95
|
+
muted: { value: {
|
|
96
|
+
base: "{colors.neutral.600}",
|
|
97
|
+
_dark: "{colors.neutral.400}"
|
|
98
|
+
} },
|
|
99
|
+
onAccent: { value: "{colors.neutral.50}" }
|
|
100
|
+
},
|
|
101
|
+
border: {
|
|
102
|
+
default: { value: {
|
|
103
|
+
base: "{colors.neutral.300}",
|
|
104
|
+
_dark: "{colors.neutral.700}"
|
|
105
|
+
} },
|
|
106
|
+
strong: { value: {
|
|
107
|
+
base: "{colors.neutral.500}",
|
|
108
|
+
_dark: "{colors.neutral.500}"
|
|
109
|
+
} },
|
|
110
|
+
interactive: { value: {
|
|
111
|
+
base: "{colors.neutral.900}",
|
|
112
|
+
_dark: "{colors.neutral.200}"
|
|
113
|
+
} }
|
|
114
|
+
},
|
|
115
|
+
accent: {
|
|
116
|
+
default: { value: "{colors.blue.600}" },
|
|
117
|
+
hover: { value: "{colors.blue.700}" }
|
|
118
|
+
},
|
|
119
|
+
success: { value: "{colors.green.700}" },
|
|
120
|
+
warning: { value: "{colors.amber.700}" },
|
|
121
|
+
danger: { value: "{colors.red.600}" },
|
|
122
|
+
info: { value: "{colors.blue.600}" },
|
|
123
|
+
focus: { value: "{colors.blue.600}" },
|
|
124
|
+
disabled: { value: {
|
|
125
|
+
base: "{colors.neutral.400}",
|
|
126
|
+
_dark: "{colors.neutral.600}"
|
|
93
127
|
} },
|
|
94
|
-
|
|
95
|
-
base: "{colors.
|
|
96
|
-
_dark: "{colors.
|
|
128
|
+
selected: { value: {
|
|
129
|
+
base: "{colors.blue.50}",
|
|
130
|
+
_dark: "{colors.blue.950}"
|
|
97
131
|
} },
|
|
98
|
-
|
|
132
|
+
link: {
|
|
133
|
+
default: { value: {
|
|
134
|
+
base: "{colors.neutral.600}",
|
|
135
|
+
_dark: "{colors.neutral.400}"
|
|
136
|
+
} },
|
|
137
|
+
hover: { value: {
|
|
138
|
+
base: "{colors.neutral.900}",
|
|
139
|
+
_dark: "{colors.neutral.200}"
|
|
140
|
+
} }
|
|
141
|
+
}
|
|
99
142
|
},
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
base: "
|
|
103
|
-
_dark: "
|
|
143
|
+
shadows: {
|
|
144
|
+
sm: { value: {
|
|
145
|
+
base: "0 1px 2px rgb(0 0 0 / 0.08)",
|
|
146
|
+
_dark: "0 1px 2px rgb(255 255 255 / 0.08)"
|
|
104
147
|
} },
|
|
105
|
-
|
|
106
|
-
base: "
|
|
107
|
-
_dark: "
|
|
148
|
+
md: { value: {
|
|
149
|
+
base: "0 10px 24px rgb(0 0 0 / 0.12)",
|
|
150
|
+
_dark: "0 10px 24px rgb(255 255 255 / 0.1)"
|
|
108
151
|
} },
|
|
109
|
-
|
|
110
|
-
base: "
|
|
111
|
-
_dark: "
|
|
112
|
-
} }
|
|
113
|
-
},
|
|
114
|
-
accent: {
|
|
115
|
-
default: { value: "{colors.blue.600}" },
|
|
116
|
-
hover: { value: "{colors.blue.700}" }
|
|
117
|
-
},
|
|
118
|
-
success: { value: "{colors.green.700}" },
|
|
119
|
-
warning: { value: "{colors.amber.700}" },
|
|
120
|
-
danger: { value: "{colors.red.600}" },
|
|
121
|
-
info: { value: "{colors.blue.600}" },
|
|
122
|
-
focus: { value: "{colors.blue.600}" },
|
|
123
|
-
disabled: { value: {
|
|
124
|
-
base: "{colors.neutral.400}",
|
|
125
|
-
_dark: "{colors.neutral.600}"
|
|
126
|
-
} },
|
|
127
|
-
selected: { value: {
|
|
128
|
-
base: "{colors.blue.50}",
|
|
129
|
-
_dark: "{colors.blue.950}"
|
|
130
|
-
} },
|
|
131
|
-
link: {
|
|
132
|
-
default: { value: {
|
|
133
|
-
base: "{colors.neutral.600}",
|
|
134
|
-
_dark: "{colors.neutral.400}"
|
|
152
|
+
lg: { value: {
|
|
153
|
+
base: "0 18px 42px rgb(0 0 0 / 0.16)",
|
|
154
|
+
_dark: "0 18px 42px rgb(255 255 255 / 0.12)"
|
|
135
155
|
} },
|
|
136
|
-
|
|
137
|
-
base: "
|
|
138
|
-
_dark: "
|
|
156
|
+
xl: { value: {
|
|
157
|
+
base: "0 24px 52px rgb(0 0 0 / 0.2)",
|
|
158
|
+
_dark: "0 24px 52px rgb(255 255 255 / 0.14)"
|
|
139
159
|
} }
|
|
140
160
|
}
|
|
141
|
-
}
|
|
161
|
+
},
|
|
142
162
|
textStyles: { body: { value: {
|
|
143
163
|
fontFamily: "system-ui, sans-serif",
|
|
144
164
|
lineHeight: "1.5"
|
package/dist/styles/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","names":[],"sources":["../../src/styles/theme.ts"],"sourcesContent":["export const jaciConditions = {\n extend: {\n dark: '[data-jaci-theme=\"dark\"] &',\n },\n};\n\nexport const jaciTheme = {\n extend: {\n tokens: {\n colors: {\n neutral: {\n 50: { value: \"#fafafa\" },\n 100: { value: \"#f4f4f5\" },\n 200: { value: \"#e4e4e7\" },\n 300: { value: \"#d4d4d8\" },\n 400: { value: \"#a1a1aa\" },\n 500: { value: \"#71717a\" },\n 600: { value: \"#52525b\" },\n 700: { value: \"#3f3f46\" },\n 800: { value: \"#27272a\" },\n 900: { value: \"#18181b\" },\n 950: { value: \"#09090b\" },\n },\n blue: {\n 500: { value: \"#3b82f6\" },\n 600: { value: \"#2563eb\" },\n 700: { value: \"#1d4ed8\" },\n },\n green: {\n 500: { value: \"#22c55e\" },\n 600: { value: \"#16a34a\" },\n 700: { value: \"#15803d\" },\n },\n amber: {\n 500: { value: \"#f59e0b\" },\n 600: { value: \"#d97706\" },\n 700: { value: \"#b45309\" },\n },\n red: {\n 500: { value: \"#ef4444\" },\n 600: { value: \"#dc2626\" },\n },\n },\n radii: {\n sm: { value: \"0.375rem\" },\n md: { value: \"0.75rem\" },\n lg: { value: \"1rem\" },\n xl: { value: \"1.5rem\" },\n \"2xl\": { value: \"2rem\" },\n full: { value: \"9999px\" },\n },\n shadows: {\n sm: { value: \"0 1px 2px rgb(0 0 0 / 0.08)\" },\n md: { value: \"0 10px 24px rgb(0 0 0 / 0.12)\" },\n lg: { value: \"0 18px 42px rgb(0 0 0 / 0.16)\" },\n xl: { value: \"0 24px 52px rgb(0 0 0 / 0.2)\" },\n },\n durations: {\n fast: { value: \"150ms\" },\n normal: { value: \"250ms\" },\n slow: { value: \"500ms\" },\n },\n easings: {\n standard: { value: \"cubic-bezier(0.2, 0, 0, 1)\" },\n },\n transitions: {\n colors: { value: \"background-color, border-color, box-shadow, color\" },\n transform: { value: \"transform\" },\n standard: { value: \"background-color, border-color, box-shadow, color, transform\" },\n },\n animations: {\n spin: { value: \"spin 900ms linear infinite\" },\n },\n },\n semanticTokens: {\n colors: {\n surface: {\n canvas: {\n value: { base: \"{colors.neutral.50}\", _dark: \"{colors.neutral.950}\" },\n },\n default: {\n value: { base: \"{colors.neutral.100}\", _dark: \"{colors.neutral.900}\" },\n },\n raised: {\n value: { base: \"{colors.neutral.50}\", _dark: \"{colors.neutral.800}\" },\n },\n subtle: {\n value: { base: \"{colors.neutral.200}\", _dark: \"{colors.neutral.800}\" },\n },\n overlay: {\n value: {\n base: \"rgb(250 250 250 / 0.32)\",\n _dark: \"rgb(9 9 11 / 0.4)\",\n },\n },\n },\n fg: {\n default: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.100}\" },\n },\n muted: {\n value: { base: \"{colors.neutral.600}\", _dark: \"{colors.neutral.400}\" },\n },\n onAccent: { value: \"{colors.neutral.50}\" },\n },\n border: {\n default: {\n value: { base: \"{colors.neutral.300}\", _dark: \"{colors.neutral.700}\" },\n },\n strong: {\n value: { base: \"{colors.neutral.500}\", _dark: \"{colors.neutral.500}\" },\n },\n interactive: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.200}\" },\n },\n },\n accent: {\n default: { value: \"{colors.blue.600}\" },\n hover: { value: \"{colors.blue.700}\" },\n },\n success: { value: \"{colors.green.700}\" },\n warning: { value: \"{colors.amber.700}\" },\n danger: { value: \"{colors.red.600}\" },\n info: { value: \"{colors.blue.600}\" },\n focus: { value: \"{colors.blue.600}\" },\n disabled: {\n value: { base: \"{colors.neutral.400}\", _dark: \"{colors.neutral.600}\" },\n },\n selected: {\n value: { base: \"{colors.blue.50}\", _dark: \"{colors.blue.950}\" },\n },\n link: {\n default: {\n value: { base: \"{colors.neutral.600}\", _dark: \"{colors.neutral.400}\" },\n },\n hover: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.200}\" },\n },\n },\n },\n },\n textStyles: {\n body: {\n value: {\n fontFamily: \"system-ui, sans-serif\",\n lineHeight: \"1.5\",\n },\n },\n },\n keyframes: {\n spin: {\n to: {\n transform: \"rotate(360deg)\",\n },\n },\n },\n },\n};\n"],"mappings":";AAAA,MAAa,iBAAiB,EAC5B,QAAQ,EACN,MAAM,+BACR,EACF;AAEA,MAAa,YAAY,EACvB,QAAQ;CACN,QAAQ;EACN,QAAQ;GACN,SAAS;IACP,IAAI,EAAE,OAAO,UAAU;IACvB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;GAC1B;GACA,MAAM;IACJ,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;GAC1B;GACA,OAAO;IACL,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;GAC1B;GACA,OAAO;IACL,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;GAC1B;GACA,KAAK;IACH,KAAK,EAAE,OAAO,UAAU;IACxB,KAAK,EAAE,OAAO,UAAU;GAC1B;EACF;EACA,OAAO;GACL,IAAI,EAAE,OAAO,WAAW;GACxB,IAAI,EAAE,OAAO,UAAU;GACvB,IAAI,EAAE,OAAO,OAAO;GACpB,IAAI,EAAE,OAAO,SAAS;GACtB,OAAO,EAAE,OAAO,OAAO;GACvB,MAAM,EAAE,OAAO,SAAS;EAC1B;EACA,SAAS;GACP,IAAI,EAAE,OAAO,8BAA8B;GAC3C,IAAI,EAAE,OAAO,gCAAgC;GAC7C,IAAI,EAAE,OAAO,gCAAgC;GAC7C,IAAI,EAAE,OAAO,+BAA+B;EAC9C;EACA,WAAW;GACT,MAAM,EAAE,OAAO,QAAQ;GACvB,QAAQ,EAAE,OAAO,QAAQ;GACzB,MAAM,EAAE,OAAO,QAAQ;EACzB;EACA,SAAS,EACP,UAAU,EAAE,OAAO,6BAA6B,EAClD;EACA,aAAa;GACX,QAAQ,EAAE,OAAO,oDAAoD;GACrE,WAAW,EAAE,OAAO,YAAY;GAChC,UAAU,EAAE,OAAO,+DAA+D;EACpF;EACA,YAAY,EACV,MAAM,EAAE,OAAO,6BAA6B,EAC9C;CACF;CACA,gBAAgB
|
|
1
|
+
{"version":3,"file":"theme.js","names":[],"sources":["../../src/styles/theme.ts"],"sourcesContent":["export const jaciConditions = {\n extend: {\n dark: '[data-jaci-theme=\"dark\"] &',\n },\n};\n\nexport const jaciTheme = {\n extend: {\n tokens: {\n colors: {\n neutral: {\n 50: { value: \"#fafafa\" },\n 100: { value: \"#f4f4f5\" },\n 200: { value: \"#e4e4e7\" },\n 300: { value: \"#d4d4d8\" },\n 400: { value: \"#a1a1aa\" },\n 500: { value: \"#71717a\" },\n 600: { value: \"#52525b\" },\n 700: { value: \"#3f3f46\" },\n 800: { value: \"#27272a\" },\n 900: { value: \"#18181b\" },\n 950: { value: \"#09090b\" },\n },\n blue: {\n 500: { value: \"#3b82f6\" },\n 600: { value: \"#2563eb\" },\n 700: { value: \"#1d4ed8\" },\n },\n green: {\n 500: { value: \"#22c55e\" },\n 600: { value: \"#16a34a\" },\n 700: { value: \"#15803d\" },\n },\n amber: {\n 500: { value: \"#f59e0b\" },\n 600: { value: \"#d97706\" },\n 700: { value: \"#b45309\" },\n },\n red: {\n 500: { value: \"#ef4444\" },\n 600: { value: \"#dc2626\" },\n },\n },\n radii: {\n sm: { value: \"0.375rem\" },\n md: { value: \"0.75rem\" },\n lg: { value: \"1rem\" },\n xl: { value: \"1.5rem\" },\n \"2xl\": { value: \"2rem\" },\n full: { value: \"9999px\" },\n },\n shadows: {\n sm: { value: \"0 1px 2px rgb(0 0 0 / 0.08)\" },\n md: { value: \"0 10px 24px rgb(0 0 0 / 0.12)\" },\n lg: { value: \"0 18px 42px rgb(0 0 0 / 0.16)\" },\n xl: { value: \"0 24px 52px rgb(0 0 0 / 0.2)\" },\n },\n durations: {\n fast: { value: \"150ms\" },\n normal: { value: \"250ms\" },\n slow: { value: \"500ms\" },\n },\n easings: {\n standard: { value: \"cubic-bezier(0.2, 0, 0, 1)\" },\n },\n transitions: {\n colors: { value: \"background-color, border-color, box-shadow, color\" },\n transform: { value: \"transform\" },\n standard: { value: \"background-color, border-color, box-shadow, color, transform\" },\n },\n animations: {\n spin: { value: \"spin 900ms linear infinite\" },\n },\n },\n semanticTokens: {\n colors: {\n surface: {\n canvas: {\n value: { base: \"{colors.neutral.50}\", _dark: \"{colors.neutral.950}\" },\n },\n default: {\n value: { base: \"{colors.neutral.100}\", _dark: \"{colors.neutral.900}\" },\n },\n raised: {\n value: { base: \"{colors.neutral.50}\", _dark: \"{colors.neutral.800}\" },\n },\n subtle: {\n value: { base: \"{colors.neutral.200}\", _dark: \"{colors.neutral.800}\" },\n },\n overlay: {\n value: {\n base: \"rgb(250 250 250 / 0.32)\",\n _dark: \"rgb(9 9 11 / 0.4)\",\n },\n },\n },\n fg: {\n default: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.100}\" },\n },\n muted: {\n value: { base: \"{colors.neutral.600}\", _dark: \"{colors.neutral.400}\" },\n },\n onAccent: { value: \"{colors.neutral.50}\" },\n },\n border: {\n default: {\n value: { base: \"{colors.neutral.300}\", _dark: \"{colors.neutral.700}\" },\n },\n strong: {\n value: { base: \"{colors.neutral.500}\", _dark: \"{colors.neutral.500}\" },\n },\n interactive: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.200}\" },\n },\n },\n accent: {\n default: { value: \"{colors.blue.600}\" },\n hover: { value: \"{colors.blue.700}\" },\n },\n success: { value: \"{colors.green.700}\" },\n warning: { value: \"{colors.amber.700}\" },\n danger: { value: \"{colors.red.600}\" },\n info: { value: \"{colors.blue.600}\" },\n focus: { value: \"{colors.blue.600}\" },\n disabled: {\n value: { base: \"{colors.neutral.400}\", _dark: \"{colors.neutral.600}\" },\n },\n selected: {\n value: { base: \"{colors.blue.50}\", _dark: \"{colors.blue.950}\" },\n },\n link: {\n default: {\n value: { base: \"{colors.neutral.600}\", _dark: \"{colors.neutral.400}\" },\n },\n hover: {\n value: { base: \"{colors.neutral.900}\", _dark: \"{colors.neutral.200}\" },\n },\n },\n },\n shadows: {\n sm: {\n value: {\n base: \"0 1px 2px rgb(0 0 0 / 0.08)\",\n _dark: \"0 1px 2px rgb(255 255 255 / 0.08)\",\n },\n },\n md: {\n value: {\n base: \"0 10px 24px rgb(0 0 0 / 0.12)\",\n _dark: \"0 10px 24px rgb(255 255 255 / 0.1)\",\n },\n },\n lg: {\n value: {\n base: \"0 18px 42px rgb(0 0 0 / 0.16)\",\n _dark: \"0 18px 42px rgb(255 255 255 / 0.12)\",\n },\n },\n xl: {\n value: {\n base: \"0 24px 52px rgb(0 0 0 / 0.2)\",\n _dark: \"0 24px 52px rgb(255 255 255 / 0.14)\",\n },\n },\n },\n },\n textStyles: {\n body: {\n value: {\n fontFamily: \"system-ui, sans-serif\",\n lineHeight: \"1.5\",\n },\n },\n },\n keyframes: {\n spin: {\n to: {\n transform: \"rotate(360deg)\",\n },\n },\n },\n },\n};\n"],"mappings":"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"}
|
package/dist/styles.css
CHANGED
|
@@ -539,7 +539,11 @@
|
|
|
539
539
|
--jaci-colors-disabled: var(--jaci-colors-neutral-600);
|
|
540
540
|
--jaci-colors-selected: var(--jaci-colors-blue-950);
|
|
541
541
|
--jaci-colors-link-default: var(--jaci-colors-neutral-400);
|
|
542
|
-
--jaci-colors-link-hover: var(--jaci-colors-neutral-200)
|
|
542
|
+
--jaci-colors-link-hover: var(--jaci-colors-neutral-200);
|
|
543
|
+
--jaci-shadows-sm: 0 1px 2px rgb(255 255 255 / 0.08);
|
|
544
|
+
--jaci-shadows-md: 0 10px 24px rgb(255 255 255 / 0.1);
|
|
545
|
+
--jaci-shadows-lg: 0 18px 42px rgb(255 255 255 / 0.12);
|
|
546
|
+
--jaci-shadows-xl: 0 24px 52px rgb(255 255 255 / 0.14)
|
|
543
547
|
}
|
|
544
548
|
|
|
545
549
|
@keyframes ping {
|
|
@@ -1404,12 +1408,15 @@
|
|
|
1404
1408
|
|
|
1405
1409
|
.jaci-badge--tone_danger-outline {
|
|
1406
1410
|
border-color: var(--jaci-colors-danger);
|
|
1407
|
-
border-style: solid;
|
|
1408
|
-
border-width: 1px;
|
|
1409
1411
|
background-color: var(--jaci-colors-transparent);
|
|
1410
1412
|
color: var(--jaci-colors-danger);
|
|
1411
1413
|
}
|
|
1412
1414
|
|
|
1415
|
+
.jaci-badge--tone_danger-outline,.jaci-badge--tone_custom-outline {
|
|
1416
|
+
border-style: solid;
|
|
1417
|
+
border-width: 1px;
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1413
1420
|
.jaci-iconButton--variant_outline {
|
|
1414
1421
|
background-color: var(--jaci-colors-transparent);
|
|
1415
1422
|
color: var(--jaci-colors-fg-default);
|
|
@@ -2053,6 +2060,8 @@
|
|
|
2053
2060
|
overflow: hidden;
|
|
2054
2061
|
background-color: var(--jaci-colors-surface-raised);
|
|
2055
2062
|
color: var(--jaci-colors-fg-default);
|
|
2063
|
+
min-width: var(--jaci-sizes-0);
|
|
2064
|
+
width: 100%;
|
|
2056
2065
|
}
|
|
2057
2066
|
|
|
2058
2067
|
.jaci-accordion__item {
|