@olundot/ui 0.14.1 → 0.15.0

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 CHANGED
@@ -1,5 +1,26 @@
1
1
  # @olundot/ui
2
2
 
3
+ ## 0.15.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 7ea00f3: bg 재설계 Step 0 — 오버레이 surface 통일 · checkbox/radio option row 신모델 · EmptyState frameless 기본(PR #64) · 상태 토큰 위생(PR #63).
8
+ - dcb5f68: bg 재설계 Step 0 — 값 변경 전 선행 정리 (PR #64)
9
+
10
+ - **오버레이 surface 통일**: dialog · sheet · select · popover · dropdown-menu · toast · confirm/form/info-modal이 제각기 쓰던 `--bg-base` / `--bg-raised` / `bg-background` / `bg-canvas`를 패널 층 `--bg-surface` 하나로 모았다. Tailwind 브리지(`popover` / `--color-popover`)도 같은 층을 가리킨다. `--bg-raised`는 값 변경 없이 남아 elevated card · 표 헤더 등 보조 강조 면을 계속 담당한다.
11
+ - **scrim/shadow 토큰화**: dialog · sheet의 하드코딩 backdrop(`--bg-base/65`, `bg-black/50`)을 `--scrim`으로, `shadow-lg`/`shadow-md`를 `shadow-[var(--shadow-4)]`로 교체했다.
12
+ - **checkbox/radio option row 신모델**: 카드형 option row가 `--bg-surface` 위에 얹히고, hover는 배경만 바꾼다(`border-strong`은 checked 전용 신호로 보존).
13
+ - **EmptyState frameless 기본**: `bordered` 기본값이 `true` → `false`로 뒤집혔다. 독립 패널로 세우려면 `bordered`를 명시한다. 아이콘 웰은 `--bg-raised` → `--bg-inset`.
14
+ - **popover arrow 가시성**: light에서 near-white on near-white로 사라지던 arrow에 `--border` stroke + `vector-effect: non-scaling-stroke`를 추가했다.
15
+
16
+ **Breaking**: `EmptyState`의 `bordered` 기본값이 `false`다. 테두리·배경이 있는 기존 렌더를 유지하려면 `bordered`를 명시적으로 넘겨야 한다.
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies [7ea00f3]
21
+ - Updated dependencies [dcb5f68]
22
+ - @olundot/tokens@0.15.0
23
+
3
24
  ## 0.14.1
4
25
 
5
26
  ### Patch Changes
package/README.md CHANGED
@@ -1,24 +1,29 @@
1
1
  # @olundot/ui
2
2
 
3
- Shared OLUN React UI components.
3
+ OLUN 토큰을 사용하는 React UI 컴포넌트 패키지입니다. 현재 버전은 `0.15.0`입니다.
4
+
5
+ ## 설치
4
6
 
5
7
  ```bash
6
- pnpm add @olundot/ui @olundot/tokens
8
+ pnpm add @olundot/ui
7
9
  ```
8
10
 
11
+ React와 React DOM 18 이상이 peer dependency입니다. Tailwind CSS 4 이상은 optional peer dependency입니다.
12
+
13
+ ## Tailwind v4 설정
14
+
9
15
  ```css
10
16
  @layer theme, base, components, utilities;
11
17
  @import "tailwindcss/theme.css" layer(theme);
12
18
  @import "tailwindcss/preflight.css" layer(base);
13
19
  @import "tailwindcss/utilities.css" layer(utilities);
14
20
 
15
- /* 컴포넌트 utility 생성을 위해 ui dist 스캔 — 빠지면 컴포넌트가 무스타일.
16
- 경로는 프로젝트 node_modules 위치에 맞게 조정. */
17
21
  @source "../node_modules/@olundot/ui/dist";
18
-
19
22
  @import "@olundot/ui/tokens.css";
20
23
  ```
21
24
 
25
+ `@source` 경로는 소비자 프로젝트의 CSS 파일과 `node_modules` 위치에 맞게 조정합니다. `@olundot/ui/tokens.css`는 core tokens, Tailwind v4 매핑과 UI keyframes를 불러옵니다.
26
+
22
27
  ```tsx
23
28
  import { Button, Card, Input } from "@olundot/ui";
24
29
 
@@ -32,8 +37,48 @@ export function Example() {
32
37
  }
33
38
  ```
34
39
 
35
- This beta package is extracted from the OLUN CBT/LMS shared UI implementation. API names are usable, but still considered beta until the consumer integration cycle is complete.
40
+ ## 0.15.0 표면 계약
41
+
42
+ Dialog, Sheet, Popover, DropdownMenu, Select와 Toast의 비-error variant는 panel에 `--bg-surface`를 사용합니다. Toast error variant만 `--error-bg`를 사용하며, `--bg-raised`와 `--bg-overlay`는 overlay panel 용도로 사용하지 않습니다. Dialog와 Sheet backdrop은 `--scrim`을 사용하며, Dialog panel은 `--shadow-8`, Sheet panel은 `--shadow-4`를 사용합니다.
43
+
44
+ Checkbox/Radio의 card option row는 다음 상태를 사용합니다.
45
+
46
+ | 상태 | fill과 border |
47
+ |---|---|
48
+ | unchecked | 별도 상태 fill 없음; `--bg-surface` + `--border-subtle` |
49
+ | hover | `--action-hover`; border는 그대로 유지 |
50
+ | checked | `--action-selected` + `--border-strong` |
51
+ | disabled | `--action-disabled-bg` + `--border-subtle` |
52
+
53
+ ## Breaking: EmptyState
54
+
55
+ `EmptyState`의 `bordered` 기본값은 `false`입니다. 기본 렌더에는 frame과 자체 surface가 없습니다.
56
+
57
+ ```tsx
58
+ // 0.14.x와 같은 framed surface가 필요한 경우
59
+ <EmptyState bordered title="결과가 없습니다" />
60
+ ```
61
+
62
+ 아이콘 well은 `--bg-inset`을 사용합니다.
63
+
64
+ ## FileUploadZone 상태
65
+
66
+ | 상태 | surface와 border |
67
+ |---|---|
68
+ | default | `--bg-surface` + dashed `--border` |
69
+ | hover | `--action-hover` + `--border-strong` |
70
+ | dragging | `--action-active` + `--border-strong` |
71
+ | has-file | `--bg-inset` + solid `--border-strong` |
72
+ | disabled | `--action-disabled-bg` + dashed `--border-subtle` |
73
+
74
+ Disabled는 has-file과 dragging 상태보다 우선합니다. Error가 함께 있으면 enabled 상태에서 `--error` border를 사용합니다.
75
+
76
+ ## Accent 계약
77
+
78
+ Primary/default button은 `--primary`와 `--primary-fg`를 사용합니다. Brand와 opt-in accent fill은 `--accent-pop`과 `--accent-on-fill`을 사용합니다. Deprecated alias인 `--accent-solid`, `--accent-on-solid`은 신규 컴포넌트 소스에서 사용하지 않습니다.
79
+
80
+ 전체 변경은 [CHANGELOG](https://github.com/olundot/olun-design-system/blob/main/packages/ui/CHANGELOG.md)에 있습니다.
36
81
 
37
- ## Accent Contract
82
+ ## 라이선스
38
83
 
39
- Primary and default buttons are monochrome: pair `--primary` for the background and border with `--primary-fg` for text and icons. Brand and opt-in accent fills use the canonical `--accent-pop` + `--accent-on-fill` pair. The pre-v0.14 names `--accent-solid` and `--accent-on-solid` remain deprecated compatibility aliases and must not be used in new component source.
84
+ MIT
package/dist/index.js CHANGED
@@ -595,12 +595,15 @@ var fileUploadZoneVariants = cva3(
595
595
  "group/file-upload relative flex w-full cursor-pointer flex-col items-center justify-center text-center",
596
596
  "border-2 border-dashed border-[var(--border)]",
597
597
  "transition-[background-color,border-color,color,box-shadow] motion-reduce:transition-none",
598
- "hover:border-[var(--border-strong)] hover:bg-[var(--action-selected)]",
599
- "focus-within:border-[var(--focus-ring)] focus-within:bg-[var(--action-selected)] focus-within:shadow-[0_0_0_1px_var(--focus-ring)]",
600
- "data-[has-file=true]:border-[var(--border-strong)] data-[has-file=true]:bg-[var(--action-selected)]",
601
- "data-[dragging=true]:border-[var(--border-strong)] data-[dragging=true]:bg-[var(--action-selected)]",
598
+ "hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)]",
599
+ "focus-within:border-[var(--focus-ring)] focus-within:shadow-[0_0_0_1px_var(--focus-ring)]",
600
+ "data-[has-file=true]:border-solid data-[has-file=true]:border-[var(--border-strong)] data-[has-file=true]:bg-[var(--bg-inset)]",
601
+ "data-[dragging=true]:border-[var(--border-strong)] data-[dragging=true]:bg-[var(--action-active)]",
602
602
  "data-[error=true]:border-[var(--error)]",
603
- "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:border-[var(--border-subtle)] data-[disabled=true]:bg-[var(--bg-raised)]",
603
+ "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:border-[var(--border-subtle)] data-[disabled=true]:bg-[var(--action-disabled-bg)]",
604
+ "data-[error=true]:data-[has-file=true]:border-[var(--error)] data-[error=true]:data-[dragging=true]:border-[var(--error)]",
605
+ "data-[disabled=true]:data-[has-file=true]:border-dashed data-[disabled=true]:data-[has-file=true]:border-[var(--border-subtle)] data-[disabled=true]:data-[has-file=true]:bg-[var(--action-disabled-bg)]",
606
+ "data-[disabled=true]:data-[dragging=true]:border-[var(--border-subtle)] data-[disabled=true]:data-[dragging=true]:bg-[var(--action-disabled-bg)]",
604
607
  "data-[disabled=true]:text-text-disabled"
605
608
  ].join(" "),
606
609
  {
@@ -620,7 +623,7 @@ var fileUploadZoneVariants = cva3(
620
623
  var fileUploadIconVariants = cva3(
621
624
  [
622
625
  "inline-flex items-center justify-center rounded-[var(--radius-full)]",
623
- "border border-[var(--border)] bg-[var(--bg-raised)] text-text-secondary",
626
+ "border border-[var(--border)] bg-[var(--bg-inset)] text-text-secondary",
624
627
  "transition-[border-color,color,background-color] motion-reduce:transition-none",
625
628
  "group-hover/file-upload:border-[var(--border-strong)] group-hover/file-upload:text-foreground",
626
629
  "group-data-[has-file=true]/file-upload:border-[var(--border-strong)] group-data-[has-file=true]/file-upload:text-foreground",
@@ -1528,13 +1531,13 @@ var Select = React7.forwardRef(
1528
1531
  "data-slot": "select-content",
1529
1532
  position: "popper",
1530
1533
  sideOffset: 4,
1531
- className: "z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--bg-raised)] text-foreground shadow-md",
1534
+ className: "z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--bg-surface)] text-foreground shadow-[var(--shadow-4)]",
1532
1535
  children: [
1533
1536
  /* @__PURE__ */ jsx7(
1534
1537
  SelectPrimitive.ScrollUpButton,
1535
1538
  {
1536
1539
  "data-slot": "select-scroll-up",
1537
- className: "flex items-center justify-center border-b border-[var(--border)] bg-[var(--bg-raised)] py-[var(--space-1)] text-text-tertiary",
1540
+ className: "flex items-center justify-center border-b border-[var(--border)] bg-[var(--bg-surface)] py-[var(--space-1)] text-text-tertiary",
1538
1541
  children: /* @__PURE__ */ jsx7(ChevronUp, { "aria-hidden": "true", className: "size-[16px]" })
1539
1542
  }
1540
1543
  ),
@@ -1558,7 +1561,7 @@ var Select = React7.forwardRef(
1558
1561
  SelectPrimitive.ScrollDownButton,
1559
1562
  {
1560
1563
  "data-slot": "select-scroll-down",
1561
- className: "flex items-center justify-center border-t border-[var(--border)] bg-[var(--bg-raised)] py-[var(--space-1)] text-text-tertiary",
1564
+ className: "flex items-center justify-center border-t border-[var(--border)] bg-[var(--bg-surface)] py-[var(--space-1)] text-text-tertiary",
1562
1565
  children: /* @__PURE__ */ jsx7(ChevronDown, { "aria-hidden": "true", className: "size-[16px]" })
1563
1566
  }
1564
1567
  )
@@ -3434,7 +3437,7 @@ var DialogOverlay = React20.forwardRef(({ className, ...props }, ref) => /* @__P
3434
3437
  className: cn(
3435
3438
  "fixed inset-0 z-[var(--z-modal)]",
3436
3439
  // 2026: 글래스모피즘 블러 제거 — 단정한 scrim 딤만(FE-skill anti-slop).
3437
- "bg-[var(--bg-base)]/65",
3440
+ "bg-[var(--scrim)]",
3438
3441
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
3439
3442
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
3440
3443
  "motion-reduce:animate-none",
@@ -3454,9 +3457,10 @@ var DialogContent = React20.forwardRef(({ className, children, showCloseButton =
3454
3457
  "fixed left-1/2 top-1/2 z-[var(--z-modal)]",
3455
3458
  "-translate-x-1/2 -translate-y-1/2",
3456
3459
  "grid w-full max-w-lg gap-4 p-[var(--space-8)]",
3457
- // modal은 dim overlay 위 — 가장 밝은 DS surface(--bg-base #F1F3F5·여전히 tinted·순백 아님)로 깨끗하게.
3460
+ // modal은 dim overlay 위 — panel surface 토큰(--bg-surface)으로 깨끗하게.
3461
+ // (page 배경 --bg-base가 아니라 카드/섹션과 같은 surface 층을 쓴다.)
3458
3462
  // arbitrary var 사용: 소비 site/app이 dist를 content-scan 안 해 `bg-base` 유틸이 purge될 수 있어 안전하게 var로.
3459
- "bg-[var(--bg-base)] text-foreground",
3463
+ "bg-[var(--bg-surface)] text-foreground",
3460
3464
  // 2026: generic 무거운 그림자 대신 floating shadow-8 + 또렷한 중립 grey border(--border·16%) + radius-lg.
3461
3465
  // (border-subtle=8%는 너무 흐려 가장자리가 안 보였음 → border-border로 grey 또렷하게.)
3462
3466
  "border border-border rounded-[var(--radius-lg)] shadow-8",
@@ -3567,8 +3571,8 @@ var formModalContentClassName = cn(
3567
3571
  "w-[calc(100vw-2rem)]",
3568
3572
  "max-w-[560px]",
3569
3573
  "gap-0 p-[var(--space-6)]",
3570
- "bg-[var(--bg-raised)]",
3571
- "border-[var(--border-subtle)]",
3574
+ "bg-[var(--bg-surface)]",
3575
+ "border-[var(--border)]",
3572
3576
  "rounded-[var(--radius-lg)]",
3573
3577
  "shadow-[var(--shadow-4)]",
3574
3578
  "text-foreground"
@@ -3680,8 +3684,8 @@ var infoModalContentClassName = cn(
3680
3684
  "w-[calc(100vw-2rem)]",
3681
3685
  "max-w-[420px]",
3682
3686
  "gap-0 p-[var(--space-6)]",
3683
- "bg-[var(--bg-raised)]",
3684
- "border border-[var(--border-subtle)]",
3687
+ "bg-[var(--bg-surface)]",
3688
+ "border border-[var(--border)]",
3685
3689
  "rounded-[var(--radius-lg)]",
3686
3690
  "shadow-[var(--shadow-4)]",
3687
3691
  "text-foreground"
@@ -3913,8 +3917,8 @@ var checkboxGroupItemVariants = cva9(
3913
3917
  plain: "inline-flex items-start gap-[var(--space-3)] rounded-[var(--radius-sm)] px-pad-compact-x py-pad-compact-y",
3914
3918
  card: [
3915
3919
  "flex min-h-[calc(var(--space-12)+var(--space-2))] items-start gap-[var(--space-3)]",
3916
- "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-base)]",
3917
- "hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)]",
3920
+ "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-surface)]",
3921
+ "hover:bg-[var(--action-hover)]",
3918
3922
  "data-[state=checked]:border-[var(--border-strong)] data-[state=checked]:bg-[var(--action-selected)]",
3919
3923
  "disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)]",
3920
3924
  "disabled:data-[state=checked]:border-[var(--border-subtle)] disabled:data-[state=checked]:bg-[var(--action-disabled-bg)]"
@@ -4798,7 +4802,7 @@ function DropdownMenuContent({
4798
4802
  className: cn(
4799
4803
  "z-[var(--z-popover)] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem]",
4800
4804
  "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
4801
- "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-2",
4805
+ "rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-[var(--space-1)] text-text-primary shadow-2",
4802
4806
  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
4803
4807
  "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
4804
4808
  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -4997,7 +5001,7 @@ function DropdownMenuSubContent({
4997
5001
  "data-slot": "dropdown-menu-sub-content",
4998
5002
  className: cn(
4999
5003
  "z-[var(--z-popover)] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
5000
- "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-2",
5004
+ "rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-[var(--space-1)] text-text-primary shadow-2",
5001
5005
  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
5002
5006
  "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
5003
5007
  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -5223,7 +5227,7 @@ var confirmDialogContentClassName = cn(
5223
5227
  "-translate-x-1/2 -translate-y-1/2",
5224
5228
  "w-[calc(100vw-2rem)] max-w-[420px]",
5225
5229
  "flex flex-col gap-[var(--space-6)]",
5226
- "bg-[var(--bg-raised)] border border-[var(--border-subtle)]",
5230
+ "bg-[var(--bg-surface)] border border-[var(--border)]",
5227
5231
  "rounded-[var(--radius-lg)] p-[var(--space-6)] shadow-[var(--shadow-4)]",
5228
5232
  "text-foreground"
5229
5233
  );
@@ -5477,7 +5481,7 @@ function SheetOverlay({
5477
5481
  {
5478
5482
  "data-slot": "sheet-overlay",
5479
5483
  className: cn(
5480
- "fixed inset-0 z-[var(--z-overlay)] bg-black/50",
5484
+ "fixed inset-0 z-[var(--z-overlay)] bg-[var(--scrim)]",
5481
5485
  motionConfig && cn(
5482
5486
  "transition-opacity motion-reduce:transition-none",
5483
5487
  "duration-[var(--sheet-motion-duration)]",
@@ -5512,7 +5516,7 @@ function SheetContent({
5512
5516
  {
5513
5517
  "data-slot": "sheet-content",
5514
5518
  className: cn(
5515
- "fixed z-[var(--z-modal)] flex flex-col gap-4 border-[var(--border)] bg-background shadow-lg",
5519
+ "fixed z-[var(--z-modal)] flex flex-col gap-4 border-[var(--border)] bg-[var(--bg-surface)] shadow-[var(--shadow-4)]",
5516
5520
  motionConfig && cn(
5517
5521
  "motion-reduce:animate-none",
5518
5522
  motionConfig.type === "fade" && "data-[state=open]:animate-[olun-sheet-fade-in_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-fade-out_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
@@ -5789,6 +5793,7 @@ import { jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
5789
5793
  function Popover({ modal = false, ...props }) {
5790
5794
  return /* @__PURE__ */ jsx35(PopoverPrimitive.Root, { modal, ...props });
5791
5795
  }
5796
+ var popoverArrowClassName = "fill-[var(--bg-surface)] stroke-[var(--border)] [&>polygon]:[vector-effect:non-scaling-stroke]";
5792
5797
  var PopoverTrigger = PopoverPrimitive.Trigger;
5793
5798
  var PopoverAnchor = PopoverPrimitive.Anchor;
5794
5799
  var PopoverClose = PopoverPrimitive.Close;
@@ -5803,7 +5808,7 @@ var PopoverContent = React26.forwardRef(({ className, align = "center", sideOffs
5803
5808
  className: cn(
5804
5809
  "z-[var(--z-popover)] w-[260px] outline-none",
5805
5810
  "rounded-[var(--radius-md)] border border-[var(--border)]",
5806
- "bg-[var(--bg-raised)] p-[var(--space-4)] text-foreground",
5811
+ "bg-[var(--bg-surface)] p-[var(--space-4)] text-foreground",
5807
5812
  "shadow-[var(--shadow-4)]",
5808
5813
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
5809
5814
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -5820,7 +5825,7 @@ var PopoverContent = React26.forwardRef(({ className, align = "center", sideOffs
5820
5825
  PopoverPrimitive.Arrow,
5821
5826
  {
5822
5827
  "data-slot": "popover-arrow",
5823
- className: "fill-[var(--bg-raised)]",
5828
+ className: popoverArrowClassName,
5824
5829
  width: 11,
5825
5830
  height: 5
5826
5831
  }
@@ -5834,7 +5839,7 @@ var PopoverArrow = React26.forwardRef(({ className, ...props }, ref) => /* @__PU
5834
5839
  {
5835
5840
  ref,
5836
5841
  "data-slot": "popover-arrow",
5837
- className: cn("fill-[var(--bg-raised)]", className),
5842
+ className: cn(popoverArrowClassName, className),
5838
5843
  width: 11,
5839
5844
  height: 5,
5840
5845
  ...props
@@ -6150,7 +6155,7 @@ var chipVariants = cva12(
6150
6155
  },
6151
6156
  tone: {
6152
6157
  neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:bg-[var(--action-hover)]",
6153
- accent: "border-[var(--border-accent)] bg-transparent text-[var(--accent)] hover:bg-[var(--action-accent-hover)]",
6158
+ accent: "border-[var(--border-accent)] bg-transparent text-[var(--accent)] hover:bg-[var(--accent-bg-strong)]",
6154
6159
  success: "border-transparent bg-[var(--success-bg)] text-[var(--success)] hover:bg-[var(--action-hover)]",
6155
6160
  warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)] hover:bg-[var(--action-hover)]",
6156
6161
  danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]",
@@ -6338,7 +6343,7 @@ var emptyStateBaseVariants = cva13(
6338
6343
  },
6339
6344
  defaultVariants: {
6340
6345
  size: "md",
6341
- bordered: true
6346
+ bordered: false
6342
6347
  }
6343
6348
  }
6344
6349
  );
@@ -6357,7 +6362,7 @@ function emptyStateVariants({
6357
6362
  size,
6358
6363
  tone = "neutral",
6359
6364
  surface,
6360
- bordered = true,
6365
+ bordered = false,
6361
6366
  className
6362
6367
  } = {}) {
6363
6368
  const hasBorder = bordered !== false;
@@ -6370,7 +6375,7 @@ function emptyStateVariants({
6370
6375
  var emptyStateIconVariants = cva13(
6371
6376
  [
6372
6377
  "inline-flex items-center justify-center rounded-[var(--radius-full)]",
6373
- "border border-[var(--border-subtle)] bg-[var(--bg-raised)] text-text-tertiary"
6378
+ "border border-[var(--border-subtle)] bg-[var(--bg-inset)] text-text-tertiary"
6374
6379
  ].join(" "),
6375
6380
  {
6376
6381
  variants: {
@@ -6401,7 +6406,7 @@ var EmptyState = React32.forwardRef(
6401
6406
  description,
6402
6407
  hint,
6403
6408
  action,
6404
- bordered = true,
6409
+ bordered = false,
6405
6410
  ...props
6406
6411
  }, ref) => {
6407
6412
  const resolvedSize = size ?? "md";
@@ -7367,11 +7372,11 @@ var toastVariants = cva20(
7367
7372
  {
7368
7373
  variants: {
7369
7374
  variant: {
7370
- default: "bg-[var(--bg-raised)]",
7371
- success: "bg-[var(--bg-raised)]",
7375
+ default: "bg-[var(--bg-surface)]",
7376
+ success: "bg-[var(--bg-surface)]",
7372
7377
  error: "bg-[var(--error-bg)]",
7373
- warning: "bg-[var(--bg-raised)]",
7374
- info: "bg-[var(--bg-raised)]"
7378
+ warning: "bg-[var(--bg-surface)]",
7379
+ info: "bg-[var(--bg-surface)]"
7375
7380
  }
7376
7381
  },
7377
7382
  defaultVariants: { variant: "default" }
@@ -8269,8 +8274,8 @@ var radioVariants = cva24(
8269
8274
  plain: "inline-flex items-start gap-[var(--space-3)] rounded-[var(--radius-sm)] px-pad-compact-x py-pad-compact-y",
8270
8275
  card: [
8271
8276
  "flex min-h-[calc(var(--space-12)+var(--space-2))] items-start gap-[var(--space-3)]",
8272
- "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-base)]",
8273
- "hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)]",
8277
+ "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-surface)]",
8278
+ "hover:bg-[var(--action-hover)]",
8274
8279
  "data-[state=checked]:border-[var(--border-strong)] data-[state=checked]:bg-[var(--action-selected)]",
8275
8280
  "disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)]",
8276
8281
  "disabled:data-[state=checked]:border-[var(--border-subtle)] disabled:data-[state=checked]:bg-[var(--action-disabled-bg)]"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@olundot/ui",
3
- "version": "0.14.1",
3
+ "version": "0.15.0",
4
4
  "description": "OLUN. shared React UI components built on OLUN design tokens",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -44,7 +44,7 @@
44
44
  "lucide-react": "^1.8.0",
45
45
  "radix-ui": "^1.4.3",
46
46
  "tailwind-merge": "^3.5.0",
47
- "@olundot/tokens": "^0.14.0"
47
+ "@olundot/tokens": "^0.15.0"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "react": ">=18",