@sarunyu/system-one 4.9.35 → 4.9.36
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/AGENTS.md +17 -5
- package/DESIGN.md +1 -0
- package/dist/index.cjs +9 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +9 -9
- package/dist/index.js.map +1 -1
- package/dist/style.css +1 -1
- package/llms.txt +12 -1
- package/package.json +4 -1
package/AGENTS.md
CHANGED
|
@@ -117,14 +117,26 @@ utilities (`p-6`, `gap-4`, `max-w-*`, etc.) win over host-written ones.
|
|
|
117
117
|
|
|
118
118
|
## Dark mode
|
|
119
119
|
|
|
120
|
-
|
|
120
|
+
**Global dark mode** — add `.dark` to `<html>`. All tokens adapt automatically.
|
|
121
|
+
|
|
122
|
+
**Section-level dark mode** — add `data-theme="dark"` to any container with a
|
|
123
|
+
dark background. All child components automatically switch to dark tokens.
|
|
124
|
+
Never use `class="dark"` for sections — that resets the entire page theme.
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
// ✅ section on a dark background
|
|
128
|
+
<div data-theme="dark" className="bg-bg-brand-primary rounded-2xl p-8">
|
|
129
|
+
<Button>ติดต่อ Online Service</Button>
|
|
130
|
+
<p className="text-text-default-primary">สีปรับอัตโนมัติ</p>
|
|
131
|
+
</div>
|
|
132
|
+
```
|
|
121
133
|
|
|
122
134
|
## Theming
|
|
123
135
|
|
|
124
136
|
Override CSS custom properties after the stylesheet import.
|
|
125
|
-
**Both `:root` (light) and `.dark` (dark) must be overridden
|
|
126
|
-
the library hard-codes dark-mode colors in its `.dark` block,
|
|
127
|
-
override leaves dark mode unchanged.
|
|
137
|
+
**Both `:root` (light) and `.dark, [data-theme="dark"]` (dark) must be overridden
|
|
138
|
+
separately** — the library hard-codes dark-mode colors in its `.dark` block,
|
|
139
|
+
so a `:root`-only override leaves dark mode unchanged.
|
|
128
140
|
|
|
129
141
|
```css
|
|
130
142
|
:root {
|
|
@@ -134,7 +146,7 @@ override leaves dark mode unchanged.
|
|
|
134
146
|
--font-sans: "Inter", sans-serif;
|
|
135
147
|
}
|
|
136
148
|
|
|
137
|
-
.dark {
|
|
149
|
+
.dark, [data-theme="dark"] {
|
|
138
150
|
--primary-action: #a78bfa;
|
|
139
151
|
--primary-action-hover: #c4b5fd;
|
|
140
152
|
--primary-action-active: #8b5cf6;
|
package/DESIGN.md
CHANGED
|
@@ -236,6 +236,7 @@ Use sparingly. Corporate UIs prefer border separation over heavy elevation.
|
|
|
236
236
|
| Do | Don't |
|
|
237
237
|
|---|---|
|
|
238
238
|
| Use `bg-background`, `bg-card` for surfaces | Hard-code `#ffffff` or `bg-white` |
|
|
239
|
+
| Use `data-theme="dark"` on dark-background sections | Use `class="dark"` on a section (resets the whole page) |
|
|
239
240
|
| Use `text-foreground` for body text | Use `text-gray-900` or `text-black` |
|
|
240
241
|
| Use `border-border` for dividers | Use `border-gray-200` |
|
|
241
242
|
| Use `rounded` (4px) by default | Use `rounded-xl` or `rounded-2xl` on data elements |
|
package/dist/index.cjs
CHANGED
|
@@ -3068,7 +3068,7 @@ function RemovableTag({
|
|
|
3068
3068
|
react.X,
|
|
3069
3069
|
{
|
|
3070
3070
|
size: 12,
|
|
3071
|
-
weight: "
|
|
3071
|
+
weight: "regular",
|
|
3072
3072
|
color: iconColor,
|
|
3073
3073
|
className: "shrink-0"
|
|
3074
3074
|
}
|
|
@@ -3607,7 +3607,7 @@ const DropdownMultiple = React.forwardRef(
|
|
|
3607
3607
|
react.Check,
|
|
3608
3608
|
{
|
|
3609
3609
|
size: 12,
|
|
3610
|
-
weight: "
|
|
3610
|
+
weight: "regular",
|
|
3611
3611
|
className: "text-primary-action"
|
|
3612
3612
|
}
|
|
3613
3613
|
)
|
|
@@ -4250,7 +4250,7 @@ function ToastCloseButton({
|
|
|
4250
4250
|
colorClass
|
|
4251
4251
|
),
|
|
4252
4252
|
onClick: onClose,
|
|
4253
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 12, weight: "
|
|
4253
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(react.X, { size: 12, weight: "regular" })
|
|
4254
4254
|
}
|
|
4255
4255
|
);
|
|
4256
4256
|
}
|
|
@@ -4441,7 +4441,7 @@ const OptionList = React.forwardRef(
|
|
|
4441
4441
|
react.Check,
|
|
4442
4442
|
{
|
|
4443
4443
|
size: 16,
|
|
4444
|
-
weight: "
|
|
4444
|
+
weight: "regular",
|
|
4445
4445
|
className: "text-primary-action"
|
|
4446
4446
|
}
|
|
4447
4447
|
) })
|
|
@@ -4811,7 +4811,7 @@ const Tag = React.forwardRef(function Tag2({
|
|
|
4811
4811
|
className: cn(
|
|
4812
4812
|
"inline-flex items-center justify-center rounded-[2px] transition-colors",
|
|
4813
4813
|
s.closeButton,
|
|
4814
|
-
!isDisabled && "cursor-pointer hover:bg-black/10"
|
|
4814
|
+
!isDisabled && "cursor-pointer hover:bg-black/10 dark:hover:bg-white/10"
|
|
4815
4815
|
),
|
|
4816
4816
|
children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { disabled: isDisabled, className: s.closeIcon })
|
|
4817
4817
|
}
|
|
@@ -4889,7 +4889,7 @@ function StickyShadowEdge({ direction }) {
|
|
|
4889
4889
|
"aria-hidden": "true",
|
|
4890
4890
|
className: "pointer-events-none absolute inset-y-0 left-[-10px] w-2.5",
|
|
4891
4891
|
style: {
|
|
4892
|
-
background: "linear-gradient(90deg, rgba(
|
|
4892
|
+
background: "linear-gradient(90deg, rgba(var(--scroll-shadow-rgb),0.00) 0%, rgba(var(--scroll-shadow-rgb),0.03) 55%, rgba(var(--scroll-shadow-rgb),0.08) 100%)"
|
|
4893
4893
|
}
|
|
4894
4894
|
}
|
|
4895
4895
|
);
|
|
@@ -4900,7 +4900,7 @@ function StickyShadowEdge({ direction }) {
|
|
|
4900
4900
|
"aria-hidden": "true",
|
|
4901
4901
|
className: "pointer-events-none absolute inset-y-0 right-[-10px] w-2.5",
|
|
4902
4902
|
style: {
|
|
4903
|
-
background: "linear-gradient(90deg, rgba(
|
|
4903
|
+
background: "linear-gradient(90deg, rgba(var(--scroll-shadow-rgb),0.08) 0%, rgba(var(--scroll-shadow-rgb),0.03) 45%, rgba(var(--scroll-shadow-rgb),0.00) 100%)"
|
|
4904
4904
|
}
|
|
4905
4905
|
}
|
|
4906
4906
|
);
|
|
@@ -6180,7 +6180,7 @@ function PaginationBanner({
|
|
|
6180
6180
|
onClick: () => onIndexChange == null ? void 0 : onIndexChange(i),
|
|
6181
6181
|
className: cn(
|
|
6182
6182
|
"h-1.5 rounded-[12px] transition-all duration-200",
|
|
6183
|
-
i === activeIndex ? "w-8 bg-bg-brand" : "w-1.5 bg-black/10 hover:bg-black/20"
|
|
6183
|
+
i === activeIndex ? "w-8 bg-bg-brand" : "w-1.5 bg-black/10 dark:bg-white/10 hover:bg-black/20 dark:hover:bg-white/20"
|
|
6184
6184
|
)
|
|
6185
6185
|
},
|
|
6186
6186
|
i
|
|
@@ -6205,7 +6205,7 @@ function PaginationCarousel({
|
|
|
6205
6205
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6206
6206
|
"div",
|
|
6207
6207
|
{
|
|
6208
|
-
className: "relative h-1.5 overflow-hidden rounded-[48px] bg-black/10",
|
|
6208
|
+
className: "relative h-1.5 overflow-hidden rounded-[48px] bg-black/10 dark:bg-white/10",
|
|
6209
6209
|
style: { width: trackWidth },
|
|
6210
6210
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6211
6211
|
"div",
|