@almanaclabs/blaze-ui 0.6.1 → 0.7.1
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/README.md +3 -3
- package/dist/components/attachment/attachment.js +1 -1
- package/dist/components/badge/badge.js +8 -8
- package/dist/components/button/button.js +5 -5
- package/dist/components/calendar/calendar.js +1 -1
- package/dist/components/card/card.js +3 -3
- package/dist/components/input/input.js +4 -4
- package/dist/components/input-group/input-group.d.ts.map +1 -1
- package/dist/components/input-group/input-group.js +6 -5
- package/dist/components/item/item.js +3 -3
- package/dist/components/native-select/native-select.js +2 -2
- package/dist/components/select/select.js +3 -3
- package/dist/components/textarea/textarea.js +1 -1
- package/dist/lib/control-size.d.ts +1 -1
- package/dist/lib/control-size.js +1 -1
- package/package.json +3 -2
- package/src/styles/globals.css +135 -115
- package/src/styles/fonts/Sohne-Book.woff2 +0 -0
- package/src/styles/fonts/Sohne-Medium.woff2 +0 -0
- package/src/styles/fonts/Sohne-Semi.woff2 +0 -0
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# `@almanaclabs/blaze-ui`
|
|
2
2
|
|
|
3
|
-
Shared React components and semantic design tokens for
|
|
3
|
+
Shared React components and semantic design tokens for Huck.
|
|
4
4
|
|
|
5
5
|
The components use shadcn's `b0` preset: Base UI primitives, the Nova style,
|
|
6
|
-
|
|
7
|
-
owned by this package so
|
|
6
|
+
Huck's warm palette, DM Sans and Fraunces typography, and Tabler icons.
|
|
7
|
+
Component source is owned by this package so design changes stay reviewable.
|
|
8
8
|
|
|
9
9
|
## Install
|
|
10
10
|
|
|
@@ -62,7 +62,7 @@ function d({ className: t, ...n }) {
|
|
|
62
62
|
function f({ className: t, ...n }) {
|
|
63
63
|
return /* @__PURE__ */ r("span", {
|
|
64
64
|
"data-slot": "attachment-description",
|
|
65
|
-
className: e("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive
|
|
65
|
+
className: e("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive", "max-w-full", t),
|
|
66
66
|
...n
|
|
67
67
|
});
|
|
68
68
|
}
|
|
@@ -3,22 +3,22 @@ import { cva as t } from "class-variance-authority";
|
|
|
3
3
|
import { mergeProps as n } from "@base-ui/react/merge-props";
|
|
4
4
|
import { useRender as r } from "@base-ui/react/use-render";
|
|
5
5
|
//#region src/components/badge/badge.tsx
|
|
6
|
-
var i = t("group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent font-
|
|
6
|
+
var i = t("group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent font-semibold whitespace-nowrap transition-all [--icon-stroke-width:var(--icon-stroke-12)] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
|
|
7
7
|
variants: {
|
|
8
8
|
variant: {
|
|
9
|
-
default: "bg-
|
|
9
|
+
default: "bg-secondary text-muted-foreground [a]:hover:bg-muted",
|
|
10
10
|
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
|
11
|
-
destructive: "bg-destructive
|
|
12
|
-
success: "bg-success
|
|
13
|
-
warning: "bg-warning
|
|
11
|
+
destructive: "bg-destructive-soft text-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive-soft",
|
|
12
|
+
success: "bg-success-soft text-success focus-visible:ring-success/20 dark:focus-visible:ring-success/30 [a]:hover:bg-success-soft",
|
|
13
|
+
warning: "bg-warning-soft text-warning-foreground focus-visible:ring-warning/20 dark:focus-visible:ring-warning/30 [a]:hover:bg-warning-soft",
|
|
14
14
|
info: "bg-info/10 text-info focus-visible:ring-info/20 dark:bg-info/15 dark:focus-visible:ring-info/30 [a]:hover:bg-info/15",
|
|
15
15
|
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
|
16
16
|
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
|
17
|
-
link: "text-
|
|
17
|
+
link: "text-link underline-offset-4 hover:underline"
|
|
18
18
|
},
|
|
19
19
|
size: {
|
|
20
|
-
default: "h-
|
|
21
|
-
md: "h-7 px-2.5 py-1 text-xs"
|
|
20
|
+
default: "min-h-6 px-2 py-1 text-[11px]",
|
|
21
|
+
md: "min-h-7 px-2.5 py-1 text-xs"
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
defaultVariants: {
|
|
@@ -5,7 +5,7 @@ import { Button as r } from "@base-ui/react/button";
|
|
|
5
5
|
import { cva as i } from "class-variance-authority";
|
|
6
6
|
import { jsx as a } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/button/button.tsx
|
|
8
|
-
var o = "bg-primary text-primary-foreground hover:bg-primary
|
|
8
|
+
var o = "bg-primary text-primary-foreground hover:bg-[var(--primary-hover)] aria-expanded:bg-[var(--primary-hover)]", s = "border-border bg-card text-foreground hover:border-foreground/15 hover:bg-card aria-expanded:border-foreground/15 aria-expanded:bg-card", c = "bg-transparent text-foreground hover:bg-muted aria-expanded:bg-muted dark:hover:bg-muted/50", l = `${e.xs} gap-0.5 [--icon-stroke-width:var(--icon-stroke-14)] has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&_svg:not([class*='size-'])]:size-[14px]`, u = `${e.sm} gap-1 [--icon-stroke-width:var(--icon-stroke-15)] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-[15px]`, d = `${e.md} gap-[5px] [--icon-stroke-width:var(--icon-stroke-15)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-[15px]`, f = `${e.lg} gap-1.5 [--icon-stroke-width:var(--icon-stroke-18)] has-data-[icon=inline-end]:pr-[9px] has-data-[icon=inline-start]:pl-[9px] [&_svg:not([class*='size-'])]:size-[18px]`, p = `${e.xl} rounded-lg gap-2 [--icon-stroke-width:var(--icon-stroke-24)] has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-6`, m = i("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding font-semibold whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
11
11
|
primary: o,
|
|
@@ -13,7 +13,7 @@ var o = "bg-primary text-primary-foreground hover:bg-primary/80 aria-expanded:bg
|
|
|
13
13
|
tertiary: c,
|
|
14
14
|
subtle: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
15
15
|
destructive: "bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/10 dark:hover:bg-destructive/15 dark:focus-visible:ring-destructive/40",
|
|
16
|
-
link: "text-
|
|
16
|
+
link: "text-link underline-offset-4 hover:underline"
|
|
17
17
|
},
|
|
18
18
|
size: {
|
|
19
19
|
xs: l,
|
|
@@ -30,13 +30,13 @@ var o = "bg-primary text-primary-foreground hover:bg-primary/80 aria-expanded:bg
|
|
|
30
30
|
},
|
|
31
31
|
defaultVariants: {
|
|
32
32
|
variant: "primary",
|
|
33
|
-
size: "
|
|
33
|
+
size: "xl"
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
36
|
function h({ className: e, ...n }) {
|
|
37
37
|
return /* @__PURE__ */ a("span", {
|
|
38
38
|
"data-slot": "button-label",
|
|
39
|
-
className: t("inline-flex min-w-0 items-center justify-center
|
|
39
|
+
className: t("inline-flex min-w-0 items-center justify-center", e),
|
|
40
40
|
...n
|
|
41
41
|
});
|
|
42
42
|
}
|
|
@@ -47,7 +47,7 @@ function g(e) {
|
|
|
47
47
|
}
|
|
48
48
|
return typeof e == "number" ? /* @__PURE__ */ a(h, { children: e }) : e;
|
|
49
49
|
}
|
|
50
|
-
function _({ className: e, variant: i = "primary", size: o = "
|
|
50
|
+
function _({ className: e, variant: i = "primary", size: o = "xl", children: s, ...c }) {
|
|
51
51
|
let l = m({
|
|
52
52
|
variant: i,
|
|
53
53
|
size: o
|
|
@@ -84,7 +84,7 @@ function d({ className: n, day: a, modifiers: o, locale: s, ...c }) {
|
|
|
84
84
|
"data-range-start": o.range_start,
|
|
85
85
|
"data-range-end": o.range_end,
|
|
86
86
|
"data-range-middle": o.range_middle,
|
|
87
|
-
className: e("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs
|
|
87
|
+
className: e("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs", u.day, n),
|
|
88
88
|
...c
|
|
89
89
|
});
|
|
90
90
|
}
|
|
@@ -6,7 +6,7 @@ function n({ className: n, size: r = "default", ...i }) {
|
|
|
6
6
|
return /* @__PURE__ */ t("div", {
|
|
7
7
|
"data-slot": "card",
|
|
8
8
|
"data-size": r,
|
|
9
|
-
className: e("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border border-border bg-card py-(--card-spacing) text-
|
|
9
|
+
className: e("group/card type-body flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border border-border bg-card py-(--card-spacing) text-card-foreground [--card-spacing:19px] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:14px] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", n),
|
|
10
10
|
...i
|
|
11
11
|
});
|
|
12
12
|
}
|
|
@@ -20,14 +20,14 @@ function r({ className: n, ...r }) {
|
|
|
20
20
|
function i({ className: n, ...r }) {
|
|
21
21
|
return /* @__PURE__ */ t("div", {
|
|
22
22
|
"data-slot": "card-title",
|
|
23
|
-
className: e("type-
|
|
23
|
+
className: e("type-section-title font-heading group-data-[size=sm]/card:text-sm", n),
|
|
24
24
|
...r
|
|
25
25
|
});
|
|
26
26
|
}
|
|
27
27
|
function a({ className: n, ...r }) {
|
|
28
28
|
return /* @__PURE__ */ t("div", {
|
|
29
29
|
"data-slot": "card-description",
|
|
30
|
-
className: e("
|
|
30
|
+
className: e("type-body text-muted-foreground", n),
|
|
31
31
|
...r
|
|
32
32
|
});
|
|
33
33
|
}
|
|
@@ -4,17 +4,17 @@ import { cva as n } from "class-variance-authority";
|
|
|
4
4
|
import { jsx as r } from "react/jsx-runtime";
|
|
5
5
|
import { Input as i } from "@base-ui/react/input";
|
|
6
6
|
//#region src/components/input/input.tsx
|
|
7
|
-
var a = n("w-full min-w-0 rounded-md border border-input bg-
|
|
7
|
+
var a = n("w-full min-w-0 rounded-md border border-input bg-card text-foreground transition-colors outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-foreground placeholder:text-foreground-tertiary hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20", {
|
|
8
8
|
variants: { size: {
|
|
9
9
|
xs: `${e.xs} pb-px file:h-5 file:text-[13px]`,
|
|
10
10
|
sm: `${e.sm} pb-px file:h-6 file:text-sm`,
|
|
11
11
|
md: `${e.md} pb-px file:h-6 file:text-sm`,
|
|
12
12
|
lg: `${e.lg} pb-px file:h-7 file:text-base`,
|
|
13
|
-
xl: `${e.xl}
|
|
13
|
+
xl: `${e.xl} file:h-8 file:text-base`
|
|
14
14
|
} },
|
|
15
|
-
defaultVariants: { size: "
|
|
15
|
+
defaultVariants: { size: "xl" }
|
|
16
16
|
});
|
|
17
|
-
function o({ className: e, type: n, controlSize: o = "
|
|
17
|
+
function o({ className: e, type: n, controlSize: o = "xl", ...s }) {
|
|
18
18
|
let c = a({ size: o });
|
|
19
19
|
return /* @__PURE__ */ r(i, {
|
|
20
20
|
type: n,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAyB,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAE5E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAG1C,QAAA,MAAM,kBAAkB;;8EAgBvB,CAAA;AAED,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAChD,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAIzC,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBAcxE;AAED,QAAA,MAAM,uBAAuB;;8EAmB5B,CAAA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,qBAgB5E;AAED,QAAA,MAAM,wBAAwB;;8EAgB7B,CAAA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAoB,EACpB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC3D,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CACrC,
|
|
1
|
+
{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAyB,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAE5E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAG1C,QAAA,MAAM,kBAAkB;;8EAgBvB,CAAA;AAED,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAChD,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAIzC,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBAcxE;AAED,QAAA,MAAM,uBAAuB;;8EAmB5B,CAAA;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,qBAgB5E;AAED,QAAA,MAAM,wBAAwB;;8EAgB7B,CAAA;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAoB,EACpB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC3D,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CACrC,qBAWF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAU5E;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG;IAC3D,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,qBAcA;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAWlC;AAED,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,CAAA"}
|
|
@@ -7,7 +7,7 @@ import * as a from "react";
|
|
|
7
7
|
import { cva as o } from "class-variance-authority";
|
|
8
8
|
import { jsx as s } from "react/jsx-runtime";
|
|
9
9
|
//#region src/components/input-group/input-group.tsx
|
|
10
|
-
var c = o("group/input-group relative flex w-full min-w-0 items-center rounded-md border border-input bg-
|
|
10
|
+
var c = o("group/input-group relative flex w-full min-w-0 items-center rounded-md border border-input bg-card transition-colors outline-none hover:border-foreground/15 in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-surface-subtle has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-border-subtle has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/10 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", {
|
|
11
11
|
variants: { size: {
|
|
12
12
|
xs: `${e.xs} px-0 [--input-group-icon-size:14px] [--icon-stroke-width:var(--icon-stroke-14)]`,
|
|
13
13
|
sm: `${e.sm} px-0 [--input-group-icon-size:15px] [--icon-stroke-width:var(--icon-stroke-15)]`,
|
|
@@ -15,10 +15,10 @@ var c = o("group/input-group relative flex w-full min-w-0 items-center rounded-m
|
|
|
15
15
|
lg: `${e.lg} px-0 [--input-group-icon-size:18px] [--icon-stroke-width:var(--icon-stroke-18)]`,
|
|
16
16
|
xl: `${e.xl} px-0 [--input-group-icon-size:24px] [--icon-stroke-width:var(--icon-stroke-24)]`
|
|
17
17
|
} },
|
|
18
|
-
defaultVariants: { size: "
|
|
19
|
-
}), l = a.createContext("
|
|
20
|
-
function u({ className: e, size: n = "
|
|
21
|
-
let i = n ?? "
|
|
18
|
+
defaultVariants: { size: "xl" }
|
|
19
|
+
}), l = a.createContext("xl");
|
|
20
|
+
function u({ className: e, size: n = "xl", ...r }) {
|
|
21
|
+
let i = n ?? "xl";
|
|
22
22
|
return /* @__PURE__ */ s(l.Provider, {
|
|
23
23
|
value: i,
|
|
24
24
|
children: /* @__PURE__ */ s("div", {
|
|
@@ -64,6 +64,7 @@ function m({ className: e, type: r = "button", variant: i = "tertiary", size: a
|
|
|
64
64
|
return /* @__PURE__ */ s(n, {
|
|
65
65
|
type: r,
|
|
66
66
|
"data-size": a,
|
|
67
|
+
size: a === "sm" ? "md" : a === "icon-sm" ? "icon-md" : a,
|
|
67
68
|
variant: i,
|
|
68
69
|
className: t(p({ size: a }), e),
|
|
69
70
|
...o
|
|
@@ -30,7 +30,7 @@ var c = n("group/item flex w-full flex-wrap items-center rounded-lg border text-
|
|
|
30
30
|
muted: "border-transparent bg-muted/50"
|
|
31
31
|
},
|
|
32
32
|
size: {
|
|
33
|
-
default: "gap-
|
|
33
|
+
default: "gap-3 px-3.5 py-3.5",
|
|
34
34
|
sm: "gap-2.5 px-3 py-2.5",
|
|
35
35
|
xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
|
|
36
36
|
}
|
|
@@ -85,14 +85,14 @@ function f({ className: t, ...n }) {
|
|
|
85
85
|
function p({ className: t, ...n }) {
|
|
86
86
|
return /* @__PURE__ */ r("div", {
|
|
87
87
|
"data-slot": "item-title",
|
|
88
|
-
className: e("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-
|
|
88
|
+
className: e("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-semibold underline-offset-4", t),
|
|
89
89
|
...n
|
|
90
90
|
});
|
|
91
91
|
}
|
|
92
92
|
function m({ className: t, ...n }) {
|
|
93
93
|
return /* @__PURE__ */ r("p", {
|
|
94
94
|
"data-slot": "item-description",
|
|
95
|
-
className: e("line-clamp-2 text-left text-
|
|
95
|
+
className: e("line-clamp-2 text-left text-xs leading-[1.4] font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", t),
|
|
96
96
|
...n
|
|
97
97
|
});
|
|
98
98
|
}
|
|
@@ -4,7 +4,7 @@ import "react";
|
|
|
4
4
|
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
5
5
|
import { IconChevronDown as i } from "@tabler/icons-react";
|
|
6
6
|
//#region src/components/native-select/native-select.tsx
|
|
7
|
-
function a({ className: a, size: o = "
|
|
7
|
+
function a({ className: a, size: o = "xl", "aria-label": s = "Select an option", ...c }) {
|
|
8
8
|
return /* @__PURE__ */ r("div", {
|
|
9
9
|
className: t("group/native-select relative w-fit", a),
|
|
10
10
|
"data-slot": "native-select-wrapper",
|
|
@@ -13,7 +13,7 @@ function a({ className: a, size: o = "md", "aria-label": s = "Select an option",
|
|
|
13
13
|
"aria-label": s,
|
|
14
14
|
"data-slot": "native-select",
|
|
15
15
|
"data-size": o,
|
|
16
|
-
className: t("w-full min-w-0 appearance-none border border-input bg-
|
|
16
|
+
className: t("w-full min-w-0 appearance-none border border-input bg-card pt-[calc(var(--control-optical-offset,var(--sohne-control-optical-offset))+var(--control-optical-offset,var(--sohne-control-optical-offset)))] text-foreground transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20", e[o], o === "xs" && "pr-7", (o === "sm" || o === "md") && "pr-8", o === "lg" && "pr-9", o === "xl" && "pr-10"),
|
|
17
17
|
...c
|
|
18
18
|
}), /* @__PURE__ */ n(i, {
|
|
19
19
|
className: t("pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground select-none", o === "xs" && "icon-optical-14 right-1.5", (o === "sm" || o === "md") && "icon-optical-15 right-2", o === "lg" && "icon-optical-18 right-[13px]", o === "xl" && "icon-optical-24 right-[18px]"),
|
|
@@ -16,16 +16,16 @@ function l({ className: e, ...r }) {
|
|
|
16
16
|
function u({ className: e, ...r }) {
|
|
17
17
|
return /* @__PURE__ */ n(s.Value, {
|
|
18
18
|
"data-slot": "select-value",
|
|
19
|
-
className: t("flex flex-1 translate-y-[var(--sohne-control-optical-offset)] text-left", e),
|
|
19
|
+
className: t("flex flex-1 translate-y-[var(--control-optical-offset,var(--sohne-control-optical-offset))] text-left", e),
|
|
20
20
|
...r
|
|
21
21
|
});
|
|
22
22
|
}
|
|
23
|
-
function d({ className: i, size: o = "
|
|
23
|
+
function d({ className: i, size: o = "xl", children: c, "aria-label": l = "Select an option", ...u }) {
|
|
24
24
|
return /* @__PURE__ */ r(s.Trigger, {
|
|
25
25
|
"aria-label": l,
|
|
26
26
|
"data-slot": "select-trigger",
|
|
27
27
|
"data-size": o,
|
|
28
|
-
className: t("flex w-fit items-center justify-between gap-2 border border-input bg-
|
|
28
|
+
className: t("flex w-fit items-center justify-between gap-2 border border-input bg-card whitespace-nowrap text-foreground transition-colors outline-none select-none hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 data-placeholder:text-foreground-tertiary *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0", e[o], o === "xs" && "gap-1 [--icon-stroke-width:var(--icon-stroke-14)] [&_svg:not([class*='size-'])]:size-[14px]", (o === "sm" || o === "md") && "gap-1.5 [--icon-stroke-width:var(--icon-stroke-15)] [&_svg:not([class*='size-'])]:size-[15px]", o === "lg" && "[--icon-stroke-width:var(--icon-stroke-18)] [&_svg:not([class*='size-'])]:size-[18px]", o === "xl" && "[--icon-stroke-width:var(--icon-stroke-24)] [&_svg:not([class*='size-'])]:size-6", i),
|
|
29
29
|
...u,
|
|
30
30
|
children: [c, /* @__PURE__ */ n(s.Icon, { render: /* @__PURE__ */ n(a, { className: "pointer-events-none text-muted-foreground" }) })]
|
|
31
31
|
});
|
|
@@ -5,7 +5,7 @@ import { jsx as t } from "react/jsx-runtime";
|
|
|
5
5
|
function n({ className: n, ...r }) {
|
|
6
6
|
return /* @__PURE__ */ t("textarea", {
|
|
7
7
|
"data-slot": "textarea",
|
|
8
|
-
className: e("type-content flex field-sizing-content min-h-[92px] w-full rounded-md border border-input bg-
|
|
8
|
+
className: e("type-content flex field-sizing-content min-h-[92px] w-full rounded-md border border-input bg-card px-[13px] py-3 text-foreground transition-colors outline-none placeholder:text-foreground-tertiary hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20", n),
|
|
9
9
|
...r
|
|
10
10
|
});
|
|
11
11
|
}
|
|
@@ -3,7 +3,7 @@ export declare const controlSizeClassNames: {
|
|
|
3
3
|
readonly sm: "h-7 rounded-[6px] px-2 text-sm leading-5 tracking-[0.01em] [--control-padding-inline:0.5rem]";
|
|
4
4
|
readonly md: "h-8 rounded-[8px] px-[11px] text-sm leading-[15px] tracking-[0.01em] [--control-padding-inline:11px]";
|
|
5
5
|
readonly lg: "h-10 rounded-[8px] px-[13px] text-base leading-[15px] [--control-padding-inline:13px]";
|
|
6
|
-
readonly xl: "h-12 rounded-
|
|
6
|
+
readonly xl: "h-12 rounded-md px-4 text-base leading-5 [--control-padding-inline:1rem]";
|
|
7
7
|
};
|
|
8
8
|
export type ControlSize = keyof typeof controlSizeClassNames;
|
|
9
9
|
//# sourceMappingURL=control-size.d.ts.map
|
package/dist/lib/control-size.js
CHANGED
|
@@ -4,7 +4,7 @@ var e = {
|
|
|
4
4
|
sm: "h-7 rounded-[6px] px-2 text-sm leading-5 tracking-[0.01em] [--control-padding-inline:0.5rem]",
|
|
5
5
|
md: "h-8 rounded-[8px] px-[11px] text-sm leading-[15px] tracking-[0.01em] [--control-padding-inline:11px]",
|
|
6
6
|
lg: "h-10 rounded-[8px] px-[13px] text-base leading-[15px] [--control-padding-inline:13px]",
|
|
7
|
-
xl: "h-12 rounded-
|
|
7
|
+
xl: "h-12 rounded-md px-4 text-base leading-5 [--control-padding-inline:1rem]"
|
|
8
8
|
};
|
|
9
9
|
//#endregion
|
|
10
10
|
export { e as controlSizeClassNames };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@almanaclabs/blaze-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"description": "Shared React components and design tokens for Blaze",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -44,7 +44,8 @@
|
|
|
44
44
|
"tailwindcss": ">=4.3.0 <5"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@fontsource-variable/
|
|
47
|
+
"@fontsource-variable/dm-sans": "5.3.0",
|
|
48
|
+
"@fontsource-variable/fraunces": "5.3.0",
|
|
48
49
|
"@tabler/icons-react": "3.31.0",
|
|
49
50
|
"@tanstack/react-table": "8.21.3",
|
|
50
51
|
"class-variance-authority": "0.7.1",
|
package/src/styles/globals.css
CHANGED
|
@@ -1,28 +1,6 @@
|
|
|
1
1
|
@import 'tw-animate-css';
|
|
2
|
-
|
|
3
|
-
@
|
|
4
|
-
font-family: 'Sohne';
|
|
5
|
-
font-style: normal;
|
|
6
|
-
font-display: swap;
|
|
7
|
-
font-weight: 400;
|
|
8
|
-
src: url('./fonts/Sohne-Book.woff2') format('woff2');
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
@font-face {
|
|
12
|
-
font-family: 'Sohne';
|
|
13
|
-
font-style: normal;
|
|
14
|
-
font-display: swap;
|
|
15
|
-
font-weight: 500;
|
|
16
|
-
src: url('./fonts/Sohne-Medium.woff2') format('woff2');
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@font-face {
|
|
20
|
-
font-family: 'Sohne';
|
|
21
|
-
font-style: normal;
|
|
22
|
-
font-display: swap;
|
|
23
|
-
font-weight: 600;
|
|
24
|
-
src: url('./fonts/Sohne-Semi.woff2') format('woff2');
|
|
25
|
-
}
|
|
2
|
+
@import '@fontsource-variable/dm-sans/standard.css';
|
|
3
|
+
@import '@fontsource-variable/fraunces/standard.css';
|
|
26
4
|
|
|
27
5
|
@custom-variant dark (&:is(.dark *));
|
|
28
6
|
|
|
@@ -46,7 +24,14 @@
|
|
|
46
24
|
}
|
|
47
25
|
|
|
48
26
|
--font-heading: var(--font-sans);
|
|
49
|
-
--font-sans: '
|
|
27
|
+
--font-sans: 'DM Sans Variable', system-ui, sans-serif;
|
|
28
|
+
--font-accent: 'Fraunces Variable', Georgia, serif;
|
|
29
|
+
--color-canvas: var(--canvas);
|
|
30
|
+
--color-brand-surface: var(--brand-surface);
|
|
31
|
+
--color-brand-surface-foreground: var(--brand-surface-foreground);
|
|
32
|
+
--color-success-soft: var(--success-soft);
|
|
33
|
+
--color-warning-soft: var(--warning-soft);
|
|
34
|
+
--color-destructive-soft: var(--destructive-soft);
|
|
50
35
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
51
36
|
--color-sidebar-border: var(--sidebar-border);
|
|
52
37
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
@@ -66,6 +51,9 @@
|
|
|
66
51
|
--color-destructive: var(--destructive);
|
|
67
52
|
--color-success: var(--success);
|
|
68
53
|
--color-warning: var(--warning);
|
|
54
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
55
|
+
--color-brand-accent: var(--brand-accent);
|
|
56
|
+
--color-link: var(--link);
|
|
69
57
|
--color-info: var(--info);
|
|
70
58
|
--color-foreground-secondary: var(--foreground-secondary);
|
|
71
59
|
--color-foreground-tertiary: var(--foreground-tertiary);
|
|
@@ -87,36 +75,37 @@
|
|
|
87
75
|
--color-card: var(--card);
|
|
88
76
|
--color-foreground: var(--foreground);
|
|
89
77
|
--color-background: var(--background);
|
|
90
|
-
--radius-sm: 0.
|
|
91
|
-
--radius-md: 0.
|
|
78
|
+
--radius-sm: 0.75rem;
|
|
79
|
+
--radius-md: 0.8125rem;
|
|
92
80
|
--radius-lg: var(--radius);
|
|
93
|
-
--radius-xl:
|
|
94
|
-
--radius-2xl:
|
|
95
|
-
--radius-3xl:
|
|
96
|
-
--radius-4xl:
|
|
81
|
+
--radius-xl: 1.125rem;
|
|
82
|
+
--radius-2xl: 1.375rem;
|
|
83
|
+
--radius-3xl: 2rem;
|
|
84
|
+
--radius-4xl: 9999px;
|
|
97
85
|
}
|
|
98
86
|
|
|
99
87
|
:root {
|
|
100
|
-
--type-page-title-size: 1.
|
|
101
|
-
--type-page-title-line-height: 1.
|
|
102
|
-
--type-page-title-letter-spacing: -0.
|
|
103
|
-
--type-section-title-size: 1.
|
|
104
|
-
--type-section-title-line-height: 1.
|
|
88
|
+
--type-page-title-size: 1.75rem;
|
|
89
|
+
--type-page-title-line-height: 1.14;
|
|
90
|
+
--type-page-title-letter-spacing: -0.035em;
|
|
91
|
+
--type-section-title-size: 1.0625rem;
|
|
92
|
+
--type-section-title-line-height: 1.3;
|
|
105
93
|
--type-section-title-letter-spacing: 0;
|
|
94
|
+
--type-accent-title-size: 1.5625rem;
|
|
95
|
+
--type-accent-title-line-height: 1.12;
|
|
106
96
|
--type-content-size: 1rem;
|
|
107
97
|
--type-content-line-height: 1.4;
|
|
108
|
-
--type-content-letter-spacing: 0
|
|
98
|
+
--type-content-letter-spacing: 0;
|
|
109
99
|
--type-label-size: 0.875rem;
|
|
110
|
-
--type-label-line-height: 1.
|
|
111
|
-
--type-label-letter-spacing: 0
|
|
112
|
-
--type-body-size: 0.
|
|
113
|
-
--type-body-line-height: 1.
|
|
114
|
-
--type-body-letter-spacing: 0
|
|
100
|
+
--type-label-line-height: 1.3;
|
|
101
|
+
--type-label-letter-spacing: 0;
|
|
102
|
+
--type-body-size: 0.9375rem;
|
|
103
|
+
--type-body-line-height: 1.45;
|
|
104
|
+
--type-body-letter-spacing: 0;
|
|
115
105
|
--type-meta-size: 0.75rem;
|
|
116
|
-
--type-meta-line-height: 1.
|
|
117
|
-
--type-meta-letter-spacing: 0
|
|
118
|
-
|
|
119
|
-
--sohne-control-optical-offset: 0.0625rem;
|
|
106
|
+
--type-meta-line-height: 1.4;
|
|
107
|
+
--type-meta-letter-spacing: 0;
|
|
108
|
+
--sohne-control-optical-offset: 0;
|
|
120
109
|
/*
|
|
121
110
|
* These are rendered CSS-pixel widths, not Tabler view-box units. Shape-level
|
|
122
111
|
* non-scaling strokes keep them stable as icons resize. The scale uses only
|
|
@@ -132,90 +121,110 @@
|
|
|
132
121
|
--icon-stroke-20: 1.5px;
|
|
133
122
|
--icon-stroke-24: 1.5px;
|
|
134
123
|
--icon-stroke-32: 1.5px;
|
|
135
|
-
--
|
|
136
|
-
--
|
|
137
|
-
--foreground
|
|
138
|
-
--foreground-
|
|
124
|
+
--canvas: #f2ede5;
|
|
125
|
+
--background: #fffaf0;
|
|
126
|
+
--foreground: #251613;
|
|
127
|
+
--foreground-secondary: #74635d;
|
|
128
|
+
--foreground-tertiary: #74635d;
|
|
139
129
|
--card: #fff;
|
|
140
|
-
--card-foreground:
|
|
130
|
+
--card-foreground: #251613;
|
|
141
131
|
--popover: #fff;
|
|
142
|
-
--popover-foreground:
|
|
143
|
-
--
|
|
144
|
-
--primary
|
|
145
|
-
--
|
|
146
|
-
--
|
|
147
|
-
--
|
|
148
|
-
--
|
|
149
|
-
--
|
|
150
|
-
--
|
|
151
|
-
--
|
|
152
|
-
--
|
|
153
|
-
--
|
|
154
|
-
--
|
|
155
|
-
--
|
|
156
|
-
--
|
|
132
|
+
--popover-foreground: #251613;
|
|
133
|
+
--brand-accent: #ef4f40;
|
|
134
|
+
--primary: #c83c31;
|
|
135
|
+
--primary-hover: #b83e34;
|
|
136
|
+
--primary-foreground: #fff8e7;
|
|
137
|
+
--link: #c83c31;
|
|
138
|
+
--secondary: #f7eee3;
|
|
139
|
+
--secondary-foreground: #251613;
|
|
140
|
+
--muted: #f7eee3;
|
|
141
|
+
--muted-foreground: #74635d;
|
|
142
|
+
--accent: #f7eee3;
|
|
143
|
+
--accent-foreground: #251613;
|
|
144
|
+
--surface-subtle: #fff8e7;
|
|
145
|
+
--surface-muted: #f7eee3;
|
|
146
|
+
--navigation-selected: #f7eee3;
|
|
147
|
+
--brand-surface: #5a170f;
|
|
148
|
+
--brand-surface-foreground: #fff8e7;
|
|
149
|
+
--destructive: #b83e34;
|
|
150
|
+
--destructive-soft: #fae4e1;
|
|
151
|
+
--success: #2b704b;
|
|
152
|
+
--success-soft: #e4f2e8;
|
|
153
|
+
--warning: #9d651b;
|
|
154
|
+
--warning-foreground: #916017;
|
|
155
|
+
--warning-soft: #fbedd3;
|
|
157
156
|
--info: #2b6595;
|
|
158
|
-
--border:
|
|
159
|
-
--border-subtle:
|
|
160
|
-
--input:
|
|
161
|
-
--ring:
|
|
157
|
+
--border: #e6d9cc;
|
|
158
|
+
--border-subtle: #e6d9cc;
|
|
159
|
+
--input: #e6d9cc;
|
|
160
|
+
--ring: #5a170f;
|
|
162
161
|
--chart-1: oklch(0.87 0 0);
|
|
163
162
|
--chart-2: oklch(0.556 0 0);
|
|
164
163
|
--chart-3: oklch(0.439 0 0);
|
|
165
164
|
--chart-4: oklch(0.371 0 0);
|
|
166
165
|
--chart-5: oklch(0.269 0 0);
|
|
167
|
-
--radius: 0.
|
|
168
|
-
--sidebar: #
|
|
169
|
-
--sidebar-foreground:
|
|
170
|
-
--sidebar-primary:
|
|
171
|
-
--sidebar-primary-foreground:
|
|
166
|
+
--radius: 0.875rem;
|
|
167
|
+
--sidebar: #fffaf0;
|
|
168
|
+
--sidebar-foreground: #251613;
|
|
169
|
+
--sidebar-primary: #c83c31;
|
|
170
|
+
--sidebar-primary-foreground: #fff8e7;
|
|
172
171
|
--sidebar-accent: var(--navigation-selected);
|
|
173
|
-
--sidebar-accent-foreground:
|
|
174
|
-
--sidebar-border:
|
|
175
|
-
--sidebar-ring:
|
|
172
|
+
--sidebar-accent-foreground: #251613;
|
|
173
|
+
--sidebar-border: #e6d9cc;
|
|
174
|
+
--sidebar-ring: #5a170f;
|
|
176
175
|
}
|
|
177
176
|
|
|
178
177
|
.dark {
|
|
179
|
-
--
|
|
180
|
-
--
|
|
181
|
-
--foreground
|
|
182
|
-
--foreground-
|
|
183
|
-
--
|
|
184
|
-
--card
|
|
185
|
-
--
|
|
186
|
-
--popover
|
|
187
|
-
--
|
|
188
|
-
--
|
|
189
|
-
--
|
|
190
|
-
--
|
|
191
|
-
--
|
|
192
|
-
--
|
|
193
|
-
--
|
|
194
|
-
--
|
|
195
|
-
--
|
|
196
|
-
--
|
|
197
|
-
--
|
|
198
|
-
--
|
|
199
|
-
--
|
|
200
|
-
--
|
|
178
|
+
--canvas: #1a100e;
|
|
179
|
+
--background: #251613;
|
|
180
|
+
--foreground: #fffaf0;
|
|
181
|
+
--foreground-secondary: #d7c5b9;
|
|
182
|
+
--foreground-tertiary: #bba79a;
|
|
183
|
+
--card: #39241f;
|
|
184
|
+
--card-foreground: #fffaf0;
|
|
185
|
+
--popover: #39241f;
|
|
186
|
+
--popover-foreground: #fffaf0;
|
|
187
|
+
--brand-accent: #ef4f40;
|
|
188
|
+
--primary: #c83c31;
|
|
189
|
+
--primary-hover: #b83e34;
|
|
190
|
+
--primary-foreground: #fff8e7;
|
|
191
|
+
--link: #ef857b;
|
|
192
|
+
--secondary: #49312a;
|
|
193
|
+
--secondary-foreground: #fffaf0;
|
|
194
|
+
--muted: #49312a;
|
|
195
|
+
--muted-foreground: #d7c5b9;
|
|
196
|
+
--accent: #49312a;
|
|
197
|
+
--accent-foreground: #fffaf0;
|
|
198
|
+
--surface-subtle: #30201b;
|
|
199
|
+
--surface-muted: #49312a;
|
|
200
|
+
--navigation-selected: #49312a;
|
|
201
|
+
--brand-surface: #5a170f;
|
|
202
|
+
--brand-surface-foreground: #fff8e7;
|
|
203
|
+
--destructive: #ef857b;
|
|
204
|
+
--destructive-soft: #572a27;
|
|
205
|
+
--success: #86cda4;
|
|
206
|
+
--success-soft: #244a34;
|
|
207
|
+
--warning: #e9c270;
|
|
208
|
+
--warning-foreground: #e9c270;
|
|
209
|
+
--warning-soft: #59401e;
|
|
201
210
|
--info: #7bb5e3;
|
|
202
|
-
--border:
|
|
203
|
-
--border-subtle:
|
|
204
|
-
--input:
|
|
205
|
-
--ring:
|
|
211
|
+
--border: #66483e;
|
|
212
|
+
--border-subtle: #49312a;
|
|
213
|
+
--input: #66483e;
|
|
214
|
+
--ring: #ef857b;
|
|
206
215
|
--chart-1: oklch(0.87 0 0);
|
|
207
216
|
--chart-2: oklch(0.556 0 0);
|
|
208
217
|
--chart-3: oklch(0.439 0 0);
|
|
209
218
|
--chart-4: oklch(0.371 0 0);
|
|
210
219
|
--chart-5: oklch(0.269 0 0);
|
|
211
|
-
--sidebar:
|
|
212
|
-
--sidebar-foreground:
|
|
213
|
-
--sidebar-primary:
|
|
214
|
-
--sidebar-primary-foreground:
|
|
215
|
-
--sidebar-accent:
|
|
216
|
-
--sidebar-accent-foreground:
|
|
217
|
-
--sidebar-border:
|
|
218
|
-
--sidebar-ring:
|
|
220
|
+
--sidebar: #30201b;
|
|
221
|
+
--sidebar-foreground: #fffaf0;
|
|
222
|
+
--sidebar-primary: #c83c31;
|
|
223
|
+
--sidebar-primary-foreground: #fff8e7;
|
|
224
|
+
--sidebar-accent: #49312a;
|
|
225
|
+
--sidebar-accent-foreground: #fffaf0;
|
|
226
|
+
--sidebar-border: #66483e;
|
|
227
|
+
--sidebar-ring: #ef857b;
|
|
219
228
|
}
|
|
220
229
|
|
|
221
230
|
@layer base {
|
|
@@ -230,9 +239,8 @@
|
|
|
230
239
|
background-color: var(--background);
|
|
231
240
|
color: var(--foreground);
|
|
232
241
|
font-family: var(--font-sans);
|
|
233
|
-
font-size:
|
|
234
|
-
line-height:
|
|
235
|
-
letter-spacing: var(--type-body-letter-spacing);
|
|
242
|
+
font-size: 1rem;
|
|
243
|
+
line-height: 1.5;
|
|
236
244
|
}
|
|
237
245
|
|
|
238
246
|
button:not(:disabled):not([aria-disabled='true']),
|
|
@@ -243,15 +251,26 @@
|
|
|
243
251
|
|
|
244
252
|
@layer utilities {
|
|
245
253
|
.type-page-title {
|
|
254
|
+
font-family: var(--font-heading);
|
|
246
255
|
font-size: var(--type-page-title-size);
|
|
247
256
|
line-height: var(--type-page-title-line-height);
|
|
248
257
|
letter-spacing: var(--type-page-title-letter-spacing);
|
|
258
|
+
font-weight: 600;
|
|
249
259
|
}
|
|
250
260
|
|
|
251
261
|
.type-section-title {
|
|
262
|
+
font-family: var(--font-heading);
|
|
252
263
|
font-size: var(--type-section-title-size);
|
|
253
264
|
line-height: var(--type-section-title-line-height);
|
|
254
265
|
letter-spacing: var(--type-section-title-letter-spacing);
|
|
266
|
+
font-weight: 600;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.type-accent-title {
|
|
270
|
+
font-family: var(--font-accent);
|
|
271
|
+
font-size: var(--type-accent-title-size);
|
|
272
|
+
line-height: var(--type-accent-title-line-height);
|
|
273
|
+
font-weight: 700;
|
|
255
274
|
}
|
|
256
275
|
|
|
257
276
|
.type-body-lg {
|
|
@@ -270,6 +289,7 @@
|
|
|
270
289
|
font-size: var(--type-label-size);
|
|
271
290
|
line-height: var(--type-label-line-height);
|
|
272
291
|
letter-spacing: var(--type-label-letter-spacing);
|
|
292
|
+
font-weight: 600;
|
|
273
293
|
}
|
|
274
294
|
|
|
275
295
|
.type-body {
|
|
Binary file
|
|
Binary file
|
|
Binary file
|