@kupola/kupola 2.0.0-beta.9 → 2.0.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/README.md +5 -5
- package/README.zh-CN.md +5 -5
- package/dist/css/components.min.css +1 -0
- package/dist/css/index.css +1 -0
- package/dist/css/index.min.css +1 -0
- package/dist/css/responsive.css +153 -0
- package/dist/css/responsive.min.css +1 -0
- package/dist/css/tokens.css +6 -0
- package/dist/css/tokens.min.css +1 -0
- package/package.json +4 -2
- package/packages/css/index.css +1 -0
- package/packages/css/responsive.css +153 -0
- package/packages/css/tokens.css +6 -0
package/README.md
CHANGED
|
@@ -51,18 +51,18 @@ Or use the programmatic API:
|
|
|
51
51
|
|
|
52
52
|
## Installation
|
|
53
53
|
|
|
54
|
-
> **Current version**: `2.0.0
|
|
54
|
+
> **Current version**: `2.0.0` (stable):
|
|
55
55
|
|
|
56
56
|
```bash
|
|
57
|
-
npm install @kupola/kupola
|
|
57
|
+
npm install @kupola/kupola # Full package
|
|
58
58
|
# Or core engine only
|
|
59
|
-
npm install @kupola/kupola/core
|
|
59
|
+
npm install @kupola/kupola/core # signal + template + render + SSR
|
|
60
60
|
```
|
|
61
61
|
|
|
62
62
|
```bash
|
|
63
63
|
# CDN
|
|
64
|
-
https://cdn.jsdelivr.net/npm/@kupola/kupola
|
|
65
|
-
https://cdn.jsdelivr.net/npm/@kupola/kupola
|
|
64
|
+
https://cdn.jsdelivr.net/npm/@kupola/kupola/dist/kupola-core.esm.js
|
|
65
|
+
https://cdn.jsdelivr.net/npm/@kupola/kupola/dist/kupola-core.cjs
|
|
66
66
|
```
|
|
67
67
|
|
|
68
68
|
---
|
package/README.zh-CN.md
CHANGED
|
@@ -51,18 +51,18 @@
|
|
|
51
51
|
|
|
52
52
|
## 安装
|
|
53
53
|
|
|
54
|
-
> **当前版本**：`2.0.0
|
|
54
|
+
> **当前版本**：`2.0.0`（正式版）：
|
|
55
55
|
|
|
56
56
|
```bash
|
|
57
|
-
npm install @kupola/kupola
|
|
57
|
+
npm install @kupola/kupola # 完整包
|
|
58
58
|
# 或仅核心引擎
|
|
59
|
-
npm install @kupola/kupola/core
|
|
59
|
+
npm install @kupola/kupola/core # signal + template + render + SSR
|
|
60
60
|
```
|
|
61
61
|
|
|
62
62
|
```bash
|
|
63
63
|
# CDN
|
|
64
|
-
https://cdn.jsdelivr.net/npm/@kupola/kupola
|
|
65
|
-
https://cdn.jsdelivr.net/npm/@kupola/kupola
|
|
64
|
+
https://cdn.jsdelivr.net/npm/@kupola/kupola/dist/kupola-core.esm.js
|
|
65
|
+
https://cdn.jsdelivr.net/npm/@kupola/kupola/dist/kupola-core.cjs
|
|
66
66
|
```
|
|
67
67
|
|
|
68
68
|
---
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,::after,::before{box-sizing:border-box}body{margin:0;background:var(--color-background);color:var(--color-foreground);font-family:var(--font-family-default);font-size:var(--body-base-font-size);line-height:var(--body-base-line-height)}.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacer-6);padding:0 var(--spacer-12);height:28px;border-radius:var(--radius-4);border:1px solid transparent;cursor:pointer;user-select:none;white-space:nowrap;font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.ds-btn--sm{height:24px;padding:0 var(--spacer-8);font-size:var(--body-xs-font-size)}.ds-btn--lg{height:32px;padding:0 var(--spacer-16);font-size:var(--body-base-font-size)}.ds-btn--primary{background:var(--bg-brand);color:var(--text-onbrand);border-color:var(--bg-brand)}.ds-btn--primary:hover{background:var(--bg-brand-hover)}.ds-btn--secondary{background:var(--bg-overlay-l2);color:var(--text-default);border-color:var(--border-neutral-l1)}.ds-btn--secondary:hover{background:var(--bg-overlay-l3)}.ds-btn--tertiary{background:0 0;color:var(--text-default)}.ds-btn--tertiary:hover{background:var(--bg-overlay-l2)}.ds-btn--danger{background:var(--status-error-default);color:#fff}.ds-btn[disabled]{opacity:.5;cursor:not-allowed}.ds-input{display:flex;align-items:center;gap:var(--spacer-8);padding:0 var(--spacer-12);height:28px;background:var(--bg-overlay-l1);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default);width:100%;font-size:var(--body-sm-font-size)}.ds-input:focus-within{border-color:var(--bg-brand)}.ds-input input{flex:1;background:0 0;border:none;outline:0;color:inherit;font:inherit}.ds-input input::placeholder{color:var(--text-tertiary)}.ds-input.is-error{border-color:var(--status-error-default)}.ds-modal-mask{position:fixed;inset:0;z-index:var(--z-index-modal);background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center}.ds-modal-mask.is-visible{display:flex}.ds-modal{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-8);width:100%;max-width:480px;outline:0}.ds-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-modal__title{font-size:var(--heading-sm-font-size);font-weight:var(--font-weight-strong)}.ds-modal__close{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:0 0;border:none;color:var(--icon-secondary);cursor:pointer;border-radius:var(--radius-4)}.ds-modal__close:hover{background:var(--bg-overlay-l2)}.ds-modal__body{padding:var(--spacer-16) var(--spacer-24)}.ds-modal__footer{display:flex;justify-content:flex-end;gap:var(--spacer-8);padding:var(--spacer-12) var(--spacer-24);border-top:1px solid var(--border-neutral-l1)}.ds-drawer-mask{position:fixed;inset:0;z-index:var(--z-index-drawer);background:rgba(0,0,0,.5);display:none}.ds-drawer-mask.is-visible{display:block}.ds-drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-index-drawer);width:360px;max-width:100vw;background:var(--bg-base-secondary);border-left:1px solid var(--border-neutral-l1);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--transition-slow)}.ds-drawer.is-visible{transform:translateX(0)}.ds-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-drawer__body{padding:var(--spacer-16) var(--spacer-24);flex:1;overflow-y:auto}.ds-dropdown{position:relative;display:inline-block}.ds-dropdown__menu{position:absolute;top:calc(100% + 4px);left:0;min-width:160px;background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l2);border-radius:var(--radius-4);box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:var(--z-index-dropdown);display:none;padding:var(--spacer-4)}.ds-dropdown__menu.is-open{display:block}.ds-dropdown__item{display:flex;align-items:center;padding:var(--spacer-6) var(--spacer-8);border-radius:var(--radius-2);color:var(--text-default);font-size:var(--body-sm-font-size);cursor:pointer}.ds-dropdown__item:hover{background:var(--bg-overlay-l1)}.ds-tooltip{position:fixed;z-index:var(--z-index-tooltip);padding:var(--spacer-4) var(--spacer-8);background:var(--bg-base-tertiary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);font-size:var(--body-xs-font-size);color:var(--text-default);pointer-events:none;max-width:280px;white-space:pre-wrap}.ds-table{width:100%;border-collapse:collapse}.ds-table td,.ds-table th{text-align:left;padding:var(--spacer-12) var(--spacer-8);border-bottom:1px solid var(--border-neutral-l1);font-size:var(--body-sm-font-size)}.ds-table th{color:var(--text-tertiary);font-weight:var(--font-weight-default);font-size:var(--body-xs-font-size);text-transform:uppercase;letter-spacing:.04em}.ds-table td{color:var(--text-default)}.ds-table--striped tbody tr:nth-child(2n){background:var(--bg-base-secondary)}.ds-table--hover tbody tr:hover{background:var(--bg-overlay-l1)}.ds-form{display:flex;flex-direction:column;gap:var(--spacer-16)}.ds-form__group{display:flex;flex-direction:column;gap:var(--spacer-6)}.ds-form__label{font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-form__error{font-size:var(--body-xs-font-size);color:var(--status-error-default)}.ds-form__actions{display:flex;justify-content:flex-end;gap:var(--spacer-8);margin-top:var(--spacer-16)}.ds-alert{display:flex;gap:var(--spacer-12);padding:var(--spacer-12) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default)}.ds-alert--success{background:var(--status-success-surface-l1);border-color:var(--status-success-default)}.ds-alert--warning{background:var(--status-warning-surface-l1);border-color:var(--status-warning-default)}.ds-alert--error{background:var(--status-error-surface-l1);border-color:var(--status-error-default)}.ds-alert--info{background:var(--status-info-surface-l1);border-color:var(--status-info-default)}.ds-tag{display:inline-flex;align-items:center;padding:0 var(--spacer-6);height:18px;border-radius:var(--radius-2);font-size:var(--body-xs-font-size);background:var(--bg-overlay-l2);color:var(--text-secondary);border:1px solid var(--border-neutral-l1)}.ds-tag--success{background:var(--status-success-surface-l1);color:var(--status-success-default)}.ds-tag--warning{background:var(--status-warning-surface-l1);color:var(--status-warning-default)}.ds-tag--error{background:var(--status-error-surface-l1);color:var(--status-error-default)}.ds-tabs{display:flex;gap:var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-tab{padding:var(--spacer-12) 0;background:0 0;border:none;color:var(--text-tertiary);cursor:pointer;font:inherit;font-size:var(--body-sm-font-size);position:relative}.ds-tab.is-active,.ds-tab:hover{color:var(--text-default)}.ds-tab.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--icon-default)}.ds-message{position:fixed;top:var(--spacer-24);left:50%;transform:translateX(-50%);z-index:var(--z-index-notification);padding:var(--spacer-8) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);box-shadow:0 4px 12px rgba(0,0,0,.15);font-size:var(--body-sm-font-size);color:var(--text-default)}.ds-progress{width:100%;height:4px;background:var(--bg-overlay-l2);border-radius:var(--radius-full);overflow:hidden}.ds-progress__bar{height:100%;background:var(--bg-brand);border-radius:var(--radius-full);transition:width var(--transition-normal)}.ds-switch{position:relative;width:36px;height:20px;background:var(--bg-overlay-l3);border-radius:var(--radius-full);cursor:pointer;transition:background var(--transition-fast)}.ds-switch.is-active{background:var(--bg-brand)}.ds-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--transition-fast)}.ds-switch.is-active::after{transform:translateX(16px)}.ds-card{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);padding:var(--spacer-24)}.ds-skeleton{background:var(--bg-overlay-l2);border-radius:var(--radius-4);animation:1.5s ease-in-out infinite ds-skeleton-pulse}@keyframes ds-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.4}}.ds-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacer-40);color:var(--text-tertiary);font-size:var(--body-sm-font-size)}.ds-divider{height:1px;background:var(--border-neutral-l1)}.ds-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--bg-overlay-l3);color:var(--text-default);font-size:var(--body-sm-font-size);font-weight:var(--font-weight-strong)}.ds-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--spacer-4);border-radius:var(--radius-full);font-size:11px;font-weight:600;background:var(--status-error-default);color:#fff}.ds-collapse__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-12) var(--spacer-16);cursor:pointer;color:var(--text-default);font-weight:var(--font-weight-medium)}.ds-collapse__body{padding:0 var(--spacer-16) var(--spacer-16)}.ds-spin{display:inline-block;width:24px;height:24px;border:2px solid var(--bg-overlay-l3);border-top-color:var(--bg-brand);border-radius:50%;animation:.8s linear infinite ds-spin-rotate}@keyframes ds-spin-rotate{to{transform:rotate(360deg)}}
|
package/dist/css/index.css
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
'Cascadia Code','Fira Code','Segoe UI',-apple-system,[data-theme=dark]{color-scheme:dark;--bg-base-default:#0C0C0D;--bg-base-secondary:#1A1B1D;--bg-base-tertiary:#222427;--bg-overlay-l1:rgba(255, 255, 255, 0.04);--bg-overlay-l2:rgba(255, 255, 255, 0.06);--bg-overlay-l3:rgba(255, 255, 255, 0.08);--bg-overlay-l4:rgba(255, 255, 255, 0.12);--text-default:#E5E7EB;--text-secondary:#B8BDCA;--text-tertiary:#9CA3AF;--text-disabled:#8B93A1;--text-onbrand:#FFFFFF;--icon-default:#E5E7EB;--icon-secondary:#B8BDCA;--icon-tertiary:#9CA3AF;--icon-disabled:#8B93A1;--border-neutral-l1:rgba(255, 255, 255, 0.12);--border-neutral-l2:rgba(255, 255, 255, 0.18);--border-neutral-l3:rgba(255, 255, 255, 0.25);--bg-brand:#32F08C;--bg-brand-hover:#53F4A2;--bg-brand-disabled:rgba(50, 240, 140, 0.3);--status-success-default:#32F08C;--status-warning-default:#FFAD5B;--status-error-default:#FF9CA8;--status-info-default:#79B8FF;--status-success-surface-l1:rgba(50, 240, 140, 0.12);--status-warning-surface-l1:rgba(255, 173, 91, 0.12);--status-error-surface-l1:rgba(255, 156, 168, 0.12);--status-info-surface-l1:rgba(121, 184, 255, 0.12);--color-background:var(--bg-base-default);--color-surface:var(--bg-base-secondary);--color-foreground:var(--text-default);--color-border:var(--border-neutral-l1)}[data-theme=light]{color-scheme:light;--bg-base-default:#FFFFFF;--bg-base-secondary:#F5F6F8;--bg-base-tertiary:#EDF0F5;--bg-overlay-l1:rgba(0, 0, 0, 0.04);--bg-overlay-l2:rgba(0, 0, 0, 0.06);--bg-overlay-l3:rgba(0, 0, 0, 0.08);--bg-overlay-l4:rgba(0, 0, 0, 0.12);--text-default:#0F1117;--text-secondary:#4B5563;--text-tertiary:#5B6370;--text-disabled:#525A68;--text-onbrand:#FFFFFF;--icon-default:#0F1117;--icon-secondary:#4B5563;--icon-tertiary:#5B6370;--icon-disabled:#525A68;--border-neutral-l1:rgba(0, 0, 0, 0.12);--border-neutral-l2:rgba(0, 0, 0, 0.18);--border-neutral-l3:rgba(0, 0, 0, 0.25);--bg-brand:#22C55E;--bg-brand-hover:#16A34A;--bg-brand-disabled:rgba(34, 197, 94, 0.3);--status-success-default:#16A34A;--status-warning-default:#CA8A04;--status-error-default:#DC2626;--status-info-default:#2E69FF;--status-success-surface-l1:rgba(22, 163, 74, 0.08);--status-warning-surface-l1:rgba(202, 138, 4, 0.08);--status-error-surface-l1:rgba(220, 38, 38, 0.08);--status-info-surface-l1:rgba(46, 105, 255, 0.08);--color-background:var(--bg-base-default);--color-surface:var(--bg-base-secondary);--color-foreground:var(--text-default);--color-border:var(--border-neutral-l1)}*,::after,::before{box-sizing:border-box}body{margin:0;background:var(--color-background);color:var(--color-foreground);font-family:var(--font-family-default);font-size:var(--body-base-font-size);line-height:var(--body-base-line-height)}.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacer-6);padding:0 var(--spacer-12);height:28px;border-radius:var(--radius-4);border:1px solid transparent;cursor:pointer;user-select:none;white-space:nowrap;font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.ds-btn--sm{height:24px;padding:0 var(--spacer-8);font-size:var(--body-xs-font-size)}.ds-btn--lg{height:32px;padding:0 var(--spacer-16);font-size:var(--body-base-font-size)}.ds-btn--primary{background:var(--bg-brand);color:var(--text-onbrand);border-color:var(--bg-brand)}.ds-btn--primary:hover{background:var(--bg-brand-hover)}.ds-btn--secondary{background:var(--bg-overlay-l2);color:var(--text-default);border-color:var(--border-neutral-l1)}.ds-btn--secondary:hover{background:var(--bg-overlay-l3)}.ds-btn--tertiary{background:0 0;color:var(--text-default)}.ds-btn--tertiary:hover{background:var(--bg-overlay-l2)}.ds-btn--danger{background:var(--status-error-default);color:#fff}.ds-btn[disabled]{opacity:.5;cursor:not-allowed}.ds-input{display:flex;align-items:center;gap:var(--spacer-8);padding:0 var(--spacer-12);height:28px;background:var(--bg-overlay-l1);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default);width:100%;font-size:var(--body-sm-font-size)}.ds-input:focus-within{border-color:var(--bg-brand)}.ds-input input{flex:1;background:0 0;border:none;outline:0;color:inherit;font:inherit}.ds-input input::placeholder{color:var(--text-tertiary)}.ds-input.is-error{border-color:var(--status-error-default)}.ds-modal-mask{position:fixed;inset:0;z-index:var(--z-index-modal);background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center}.ds-modal-mask.is-visible{display:flex}.ds-modal{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-8);width:100%;max-width:480px;outline:0}.ds-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-modal__title{font-size:var(--heading-sm-font-size);font-weight:var(--font-weight-strong)}.ds-modal__close{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:0 0;border:none;color:var(--icon-secondary);cursor:pointer;border-radius:var(--radius-4)}.ds-modal__close:hover{background:var(--bg-overlay-l2)}.ds-modal__body{padding:var(--spacer-16) var(--spacer-24)}.ds-modal__footer{display:flex;justify-content:flex-end;gap:var(--spacer-8);padding:var(--spacer-12) var(--spacer-24);border-top:1px solid var(--border-neutral-l1)}.ds-drawer-mask{position:fixed;inset:0;z-index:var(--z-index-drawer);background:rgba(0,0,0,.5);display:none}.ds-drawer-mask.is-visible{display:block}.ds-drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-index-drawer);width:360px;max-width:100vw;background:var(--bg-base-secondary);border-left:1px solid var(--border-neutral-l1);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--transition-slow)}.ds-drawer.is-visible{transform:translateX(0)}.ds-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-drawer__body{padding:var(--spacer-16) var(--spacer-24);flex:1;overflow-y:auto}.ds-dropdown{position:relative;display:inline-block}.ds-dropdown__menu{position:absolute;top:calc(100% + 4px);left:0;min-width:160px;background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l2);border-radius:var(--radius-4);box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:var(--z-index-dropdown);display:none;padding:var(--spacer-4)}.ds-dropdown__menu.is-open{display:block}.ds-dropdown__item{display:flex;align-items:center;padding:var(--spacer-6) var(--spacer-8);border-radius:var(--radius-2);color:var(--text-default);font-size:var(--body-sm-font-size);cursor:pointer}.ds-dropdown__item:hover{background:var(--bg-overlay-l1)}.ds-tooltip{position:fixed;z-index:var(--z-index-tooltip);padding:var(--spacer-4) var(--spacer-8);background:var(--bg-base-tertiary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);font-size:var(--body-xs-font-size);color:var(--text-default);pointer-events:none;max-width:280px;white-space:pre-wrap}.ds-table{width:100%;border-collapse:collapse}.ds-table td,.ds-table th{text-align:left;padding:var(--spacer-12) var(--spacer-8);border-bottom:1px solid var(--border-neutral-l1);font-size:var(--body-sm-font-size)}.ds-table th{color:var(--text-tertiary);font-weight:var(--font-weight-default);font-size:var(--body-xs-font-size);text-transform:uppercase;letter-spacing:.04em}.ds-table td{color:var(--text-default)}.ds-table--striped tbody tr:nth-child(2n){background:var(--bg-base-secondary)}.ds-table--hover tbody tr:hover{background:var(--bg-overlay-l1)}.ds-form{display:flex;flex-direction:column;gap:var(--spacer-16)}.ds-form__group{display:flex;flex-direction:column;gap:var(--spacer-6)}.ds-form__label{font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-form__error{font-size:var(--body-xs-font-size);color:var(--status-error-default)}.ds-form__actions{display:flex;justify-content:flex-end;gap:var(--spacer-8);margin-top:var(--spacer-16)}.ds-alert{display:flex;gap:var(--spacer-12);padding:var(--spacer-12) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default)}.ds-alert--success{background:var(--status-success-surface-l1);border-color:var(--status-success-default)}.ds-alert--warning{background:var(--status-warning-surface-l1);border-color:var(--status-warning-default)}.ds-alert--error{background:var(--status-error-surface-l1);border-color:var(--status-error-default)}.ds-alert--info{background:var(--status-info-surface-l1);border-color:var(--status-info-default)}.ds-tag{display:inline-flex;align-items:center;padding:0 var(--spacer-6);height:18px;border-radius:var(--radius-2);font-size:var(--body-xs-font-size);background:var(--bg-overlay-l2);color:var(--text-secondary);border:1px solid var(--border-neutral-l1)}.ds-tag--success{background:var(--status-success-surface-l1);color:var(--status-success-default)}.ds-tag--warning{background:var(--status-warning-surface-l1);color:var(--status-warning-default)}.ds-tag--error{background:var(--status-error-surface-l1);color:var(--status-error-default)}.ds-tabs{display:flex;gap:var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-tab{padding:var(--spacer-12) 0;background:0 0;border:none;color:var(--text-tertiary);cursor:pointer;font:inherit;font-size:var(--body-sm-font-size);position:relative}.ds-tab.is-active,.ds-tab:hover{color:var(--text-default)}.ds-tab.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--icon-default)}.ds-message{position:fixed;top:var(--spacer-24);left:50%;transform:translateX(-50%);z-index:var(--z-index-notification);padding:var(--spacer-8) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);box-shadow:0 4px 12px rgba(0,0,0,.15);font-size:var(--body-sm-font-size);color:var(--text-default)}.ds-progress{width:100%;height:4px;background:var(--bg-overlay-l2);border-radius:var(--radius-full);overflow:hidden}.ds-progress__bar{height:100%;background:var(--bg-brand);border-radius:var(--radius-full);transition:width var(--transition-normal)}.ds-switch{position:relative;width:36px;height:20px;background:var(--bg-overlay-l3);border-radius:var(--radius-full);cursor:pointer;transition:background var(--transition-fast)}.ds-switch.is-active{background:var(--bg-brand)}.ds-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--transition-fast)}.ds-switch.is-active::after{transform:translateX(16px)}.ds-card{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);padding:var(--spacer-24)}.ds-skeleton{background:var(--bg-overlay-l2);border-radius:var(--radius-4);animation:1.5s ease-in-out infinite ds-skeleton-pulse}@keyframes ds-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.4}}.ds-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacer-40);color:var(--text-tertiary);font-size:var(--body-sm-font-size)}.ds-divider{height:1px;background:var(--border-neutral-l1)}.ds-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--bg-overlay-l3);color:var(--text-default);font-size:var(--body-sm-font-size);font-weight:var(--font-weight-strong)}.ds-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--spacer-4);border-radius:var(--radius-full);font-size:11px;font-weight:600;background:var(--status-error-default);color:#fff}.ds-collapse__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-12) var(--spacer-16);cursor:pointer;color:var(--text-default);font-weight:var(--font-weight-medium)}.ds-collapse__body{padding:0 var(--spacer-16) var(--spacer-16)}.ds-spin{display:inline-block;width:24px;height:24px;border:2px solid var(--bg-overlay-l3);border-top-color:var(--bg-brand);border-radius:50%;animation:.8s linear infinite ds-spin-rotate}@keyframes ds-spin-rotate{to{transform:rotate(360deg)}}@media (min-width:576px){.ds-show-sm{display:none!important}}@media (min-width:768px){.ds-show-md{display:none!important}}@media (max-width:1023.98px){.ds-hide-below-lg,.ds-hide-lg{display:none!important}}@media (min-width:1024px){.ds-show-lg{display:none!important}}@media (max-width:1279.98px){.ds-hide-below-xl,.ds-hide-xl{display:none!important}}@media (min-width:1280px){.ds-show-xl{display:none!important}}@media (max-width:767.98px){.ds-hide-below-md,.ds-hide-md{display:none!important}.ds-padding-responsive{padding:var(--spacing-3,12px)!important}.ds-margin-responsive{margin:var(--spacing-3,12px)!important}.ds-text-responsive{font-size:var(--font-size-sm, 13px)!important}.ds-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.ds-table{min-width:600px}.ds-table td,.ds-table th{white-space:nowrap;padding:var(--spacing-2,8px) var(--spacing-3,12px);font-size:var(--font-size-sm, 13px)}}@media (max-width:575.98px){.ds-hide-below-sm,.ds-hide-sm{display:none!important}.ds-modal-content{width:100%!important;max-width:100%!important;min-height:100vh!important;border-radius:0!important;margin:0!important}.ds-modal-mask{padding:0!important}.ds-drawer-left,.ds-drawer-right{width:100%!important;max-width:100%!important}.ds-drawer-bottom,.ds-drawer-top{height:90vh!important;max-height:90vh!important}.ds-dialog{width:calc(100% - 32px)!important;max-width:100%!important;margin:16px!important}.ds-select-dropdown{position:fixed!important;bottom:0;left:0;right:0;max-height:50vh;border-radius:12px 12px 0 0;z-index:var(--z-index-modal,3000)}.ds-datepicker-panel{width:calc(100vw - 32px)!important;max-width:100%!important}.ds-notification{width:calc(100% - 24px)!important;max-width:100%!important;right:12px!important;left:12px!important}}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Kupola CSS — Responsive utilities & component adaptations.
|
|
3
|
+
*
|
|
4
|
+
* Breakpoints:
|
|
5
|
+
* sm: 576px (phones landscape)
|
|
6
|
+
* md: 768px (tablets)
|
|
7
|
+
* lg: 1024px (laptops)
|
|
8
|
+
* xl: 1280px (desktops)
|
|
9
|
+
*
|
|
10
|
+
* Usage:
|
|
11
|
+
* <div class="ds-hide-sm">Hidden on phones</div>
|
|
12
|
+
* <div class="ds-show-md">Only visible on tablets+</div>
|
|
13
|
+
* <div class="ds-hide-lg">Hidden below laptops</div>
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
/* ═══════════════════════════════════════════════════════════
|
|
17
|
+
Responsive display utilities
|
|
18
|
+
═══════════════════════════════════════════════════════════ */
|
|
19
|
+
|
|
20
|
+
/* ── sm: < 576px (phones) ─────────────────────────────── */
|
|
21
|
+
@media (max-width: 575.98px) {
|
|
22
|
+
.ds-hide-sm { display: none !important; }
|
|
23
|
+
.ds-hide-below-sm { display: none !important; }
|
|
24
|
+
}
|
|
25
|
+
@media (min-width: 576px) {
|
|
26
|
+
.ds-show-sm { display: none !important; }
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* ── md: < 768px (below tablets) ──────────────────────── */
|
|
30
|
+
@media (max-width: 767.98px) {
|
|
31
|
+
.ds-hide-md { display: none !important; }
|
|
32
|
+
.ds-hide-below-md { display: none !important; }
|
|
33
|
+
}
|
|
34
|
+
@media (min-width: 768px) {
|
|
35
|
+
.ds-show-md { display: none !important; }
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* ── lg: < 1024px (below laptops) ─────────────────────── */
|
|
39
|
+
@media (max-width: 1023.98px) {
|
|
40
|
+
.ds-hide-lg { display: none !important; }
|
|
41
|
+
.ds-hide-below-lg { display: none !important; }
|
|
42
|
+
}
|
|
43
|
+
@media (min-width: 1024px) {
|
|
44
|
+
.ds-show-lg { display: none !important; }
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* ── xl: < 1280px (below desktops) ────────────────────── */
|
|
48
|
+
@media (max-width: 1279.98px) {
|
|
49
|
+
.ds-hide-xl { display: none !important; }
|
|
50
|
+
.ds-hide-below-xl { display: none !important; }
|
|
51
|
+
}
|
|
52
|
+
@media (min-width: 1280px) {
|
|
53
|
+
.ds-show-xl { display: none !important; }
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* ═══════════════════════════════════════════════════════════
|
|
57
|
+
Responsive spacing utilities
|
|
58
|
+
═══════════════════════════════════════════════════════════ */
|
|
59
|
+
|
|
60
|
+
@media (max-width: 767.98px) {
|
|
61
|
+
.ds-padding-responsive { padding: var(--spacing-3, 12px) !important; }
|
|
62
|
+
.ds-margin-responsive { margin: var(--spacing-3, 12px) !important; }
|
|
63
|
+
.ds-text-responsive { font-size: var(--font-size-sm, 13px) !important; }
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* ═══════════════════════════════════════════════════════════
|
|
67
|
+
Component responsive adaptations
|
|
68
|
+
═══════════════════════════════════════════════════════════ */
|
|
69
|
+
|
|
70
|
+
/* ── Modal: full-screen on phones ─────────────────────────── */
|
|
71
|
+
@media (max-width: 575.98px) {
|
|
72
|
+
.ds-modal-content {
|
|
73
|
+
width: 100% !important;
|
|
74
|
+
max-width: 100% !important;
|
|
75
|
+
min-height: 100vh !important;
|
|
76
|
+
border-radius: 0 !important;
|
|
77
|
+
margin: 0 !important;
|
|
78
|
+
}
|
|
79
|
+
.ds-modal-mask {
|
|
80
|
+
padding: 0 !important;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* ── Drawer: full-width/height on phones ──────────────────── */
|
|
85
|
+
@media (max-width: 575.98px) {
|
|
86
|
+
.ds-drawer-right,
|
|
87
|
+
.ds-drawer-left {
|
|
88
|
+
width: 100% !important;
|
|
89
|
+
max-width: 100% !important;
|
|
90
|
+
}
|
|
91
|
+
.ds-drawer-bottom,
|
|
92
|
+
.ds-drawer-top {
|
|
93
|
+
height: 90vh !important;
|
|
94
|
+
max-height: 90vh !important;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* ── Dialog: full-width on phones ─────────────────────────── */
|
|
99
|
+
@media (max-width: 575.98px) {
|
|
100
|
+
.ds-dialog {
|
|
101
|
+
width: calc(100% - 32px) !important;
|
|
102
|
+
max-width: 100% !important;
|
|
103
|
+
margin: 16px !important;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* ── Table: horizontal scroll on small screens ────────────── */
|
|
108
|
+
@media (max-width: 767.98px) {
|
|
109
|
+
.ds-table-wrapper {
|
|
110
|
+
overflow-x: auto;
|
|
111
|
+
-webkit-overflow-scrolling: touch;
|
|
112
|
+
}
|
|
113
|
+
.ds-table {
|
|
114
|
+
min-width: 600px;
|
|
115
|
+
}
|
|
116
|
+
.ds-table th,
|
|
117
|
+
.ds-table td {
|
|
118
|
+
white-space: nowrap;
|
|
119
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
120
|
+
font-size: var(--font-size-sm, 13px);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* ── Select: full-width on phones ─────────────────────────── */
|
|
125
|
+
@media (max-width: 575.98px) {
|
|
126
|
+
.ds-select-dropdown {
|
|
127
|
+
position: fixed !important;
|
|
128
|
+
bottom: 0;
|
|
129
|
+
left: 0;
|
|
130
|
+
right: 0;
|
|
131
|
+
max-height: 50vh;
|
|
132
|
+
border-radius: 12px 12px 0 0;
|
|
133
|
+
z-index: var(--z-index-modal, 3000);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* ── DatePicker: full-width on phones ─────────────────────── */
|
|
138
|
+
@media (max-width: 575.98px) {
|
|
139
|
+
.ds-datepicker-panel {
|
|
140
|
+
width: calc(100vw - 32px) !important;
|
|
141
|
+
max-width: 100% !important;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* ── Notification: stack full-width on phones ─────────────── */
|
|
146
|
+
@media (max-width: 575.98px) {
|
|
147
|
+
.ds-notification {
|
|
148
|
+
width: calc(100% - 24px) !important;
|
|
149
|
+
max-width: 100% !important;
|
|
150
|
+
right: 12px !important;
|
|
151
|
+
left: 12px !important;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@media (min-width:576px){.ds-show-sm{display:none!important}}@media (min-width:768px){.ds-show-md{display:none!important}}@media (max-width:1023.98px){.ds-hide-below-lg,.ds-hide-lg{display:none!important}}@media (min-width:1024px){.ds-show-lg{display:none!important}}@media (max-width:1279.98px){.ds-hide-below-xl,.ds-hide-xl{display:none!important}}@media (min-width:1280px){.ds-show-xl{display:none!important}}@media (max-width:767.98px){.ds-hide-below-md,.ds-hide-md{display:none!important}.ds-padding-responsive{padding:var(--spacing-3,12px)!important}.ds-margin-responsive{margin:var(--spacing-3,12px)!important}.ds-text-responsive{font-size:var(--font-size-sm, 13px)!important}.ds-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.ds-table{min-width:600px}.ds-table td,.ds-table th{white-space:nowrap;padding:var(--spacing-2,8px) var(--spacing-3,12px);font-size:var(--font-size-sm, 13px)}}@media (max-width:575.98px){.ds-hide-below-sm,.ds-hide-sm{display:none!important}.ds-modal-content{width:100%!important;max-width:100%!important;min-height:100vh!important;border-radius:0!important;margin:0!important}.ds-modal-mask{padding:0!important}.ds-drawer-left,.ds-drawer-right{width:100%!important;max-width:100%!important}.ds-drawer-bottom,.ds-drawer-top{height:90vh!important;max-height:90vh!important}.ds-dialog{width:calc(100% - 32px)!important;max-width:100%!important;margin:16px!important}.ds-select-dropdown{position:fixed!important;bottom:0;left:0;right:0;max-height:50vh;border-radius:12px 12px 0 0;z-index:var(--z-index-modal,3000)}.ds-datepicker-panel{width:calc(100vw - 32px)!important;max-width:100%!important}.ds-notification{width:calc(100% - 24px)!important;max-width:100%!important;right:12px!important;left:12px!important}}
|
package/dist/css/tokens.css
CHANGED
|
@@ -78,6 +78,12 @@
|
|
|
78
78
|
--transition-fast: 0.12s ease;
|
|
79
79
|
--transition-normal: 0.2s ease;
|
|
80
80
|
--transition-slow: 0.3s ease;
|
|
81
|
+
|
|
82
|
+
/* ── Breakpoints ────────────────────────────────────────── */
|
|
83
|
+
--breakpoint-sm: 576px;
|
|
84
|
+
--breakpoint-md: 768px;
|
|
85
|
+
--breakpoint-lg: 1024px;
|
|
86
|
+
--breakpoint-xl: 1280px;
|
|
81
87
|
}
|
|
82
88
|
|
|
83
89
|
/* ═══════════════════════════════════════════════════════════
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
'Cascadia Code','Fira Code','Segoe UI',-apple-system,[data-theme=dark]{color-scheme:dark;--bg-base-default:#0C0C0D;--bg-base-secondary:#1A1B1D;--bg-base-tertiary:#222427;--bg-overlay-l1:rgba(255, 255, 255, 0.04);--bg-overlay-l2:rgba(255, 255, 255, 0.06);--bg-overlay-l3:rgba(255, 255, 255, 0.08);--bg-overlay-l4:rgba(255, 255, 255, 0.12);--text-default:#E5E7EB;--text-secondary:#B8BDCA;--text-tertiary:#9CA3AF;--text-disabled:#8B93A1;--text-onbrand:#FFFFFF;--icon-default:#E5E7EB;--icon-secondary:#B8BDCA;--icon-tertiary:#9CA3AF;--icon-disabled:#8B93A1;--border-neutral-l1:rgba(255, 255, 255, 0.12);--border-neutral-l2:rgba(255, 255, 255, 0.18);--border-neutral-l3:rgba(255, 255, 255, 0.25);--bg-brand:#32F08C;--bg-brand-hover:#53F4A2;--bg-brand-disabled:rgba(50, 240, 140, 0.3);--status-success-default:#32F08C;--status-warning-default:#FFAD5B;--status-error-default:#FF9CA8;--status-info-default:#79B8FF;--status-success-surface-l1:rgba(50, 240, 140, 0.12);--status-warning-surface-l1:rgba(255, 173, 91, 0.12);--status-error-surface-l1:rgba(255, 156, 168, 0.12);--status-info-surface-l1:rgba(121, 184, 255, 0.12);--color-background:var(--bg-base-default);--color-surface:var(--bg-base-secondary);--color-foreground:var(--text-default);--color-border:var(--border-neutral-l1)}[data-theme=light]{color-scheme:light;--bg-base-default:#FFFFFF;--bg-base-secondary:#F5F6F8;--bg-base-tertiary:#EDF0F5;--bg-overlay-l1:rgba(0, 0, 0, 0.04);--bg-overlay-l2:rgba(0, 0, 0, 0.06);--bg-overlay-l3:rgba(0, 0, 0, 0.08);--bg-overlay-l4:rgba(0, 0, 0, 0.12);--text-default:#0F1117;--text-secondary:#4B5563;--text-tertiary:#5B6370;--text-disabled:#525A68;--text-onbrand:#FFFFFF;--icon-default:#0F1117;--icon-secondary:#4B5563;--icon-tertiary:#5B6370;--icon-disabled:#525A68;--border-neutral-l1:rgba(0, 0, 0, 0.12);--border-neutral-l2:rgba(0, 0, 0, 0.18);--border-neutral-l3:rgba(0, 0, 0, 0.25);--bg-brand:#22C55E;--bg-brand-hover:#16A34A;--bg-brand-disabled:rgba(34, 197, 94, 0.3);--status-success-default:#16A34A;--status-warning-default:#CA8A04;--status-error-default:#DC2626;--status-info-default:#2E69FF;--status-success-surface-l1:rgba(22, 163, 74, 0.08);--status-warning-surface-l1:rgba(202, 138, 4, 0.08);--status-error-surface-l1:rgba(220, 38, 38, 0.08);--status-info-surface-l1:rgba(46, 105, 255, 0.08);--color-background:var(--bg-base-default);--color-surface:var(--bg-base-secondary);--color-foreground:var(--text-default);--color-border:var(--border-neutral-l1)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kupola/kupola",
|
|
3
|
-
"version": "2.0.0
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "A modern, modular UI component library for any web project. Zero framework dependencies, tree-shakeable imports. 这是一个现代、模块化的 UI 组件库，适用于任何 Web 项目。零框架依赖，支持按需引入（tree-shakeable）。",
|
|
5
5
|
"main": "dist/kupola-core.esm.js",
|
|
6
6
|
"module": "dist/kupola-core.esm.js",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"./css": "./dist/css/index.css",
|
|
31
31
|
"./css/tokens": "./dist/css/tokens.css",
|
|
32
32
|
"./css/components": "./dist/css/components.css",
|
|
33
|
+
"./css/responsive": "./dist/css/responsive.css",
|
|
33
34
|
"./components/modal": {
|
|
34
35
|
"import": "./dist/kupola-core-modal.esm.js",
|
|
35
36
|
"require": "./dist/kupola-core-modal.cjs"
|
|
@@ -228,7 +229,7 @@
|
|
|
228
229
|
"dev": "vite",
|
|
229
230
|
"build": "rollup -c && npm run build:css",
|
|
230
231
|
"build:rollup": "rollup -c",
|
|
231
|
-
"build:css": "node -
|
|
232
|
+
"build:css": "node scripts/build-css.cjs",
|
|
232
233
|
"build:core": "rollup -c --configPlugin @rollup/plugin-commonjs 2>nul || npx rollup -c",
|
|
233
234
|
"lint": "eslint .",
|
|
234
235
|
"lint:fix": "eslint . --fix",
|
|
@@ -293,6 +294,7 @@
|
|
|
293
294
|
"@storybook/builder-vite": "^8.6.14",
|
|
294
295
|
"@storybook/html": "^8.6.14",
|
|
295
296
|
"@storybook/html-vite": "^8.6.14",
|
|
297
|
+
"clean-css": "^5.3.3",
|
|
296
298
|
"eslint": "^8.57.0",
|
|
297
299
|
"jest": "^29.7.0",
|
|
298
300
|
"jest-environment-jsdom": "^30.4.1",
|
package/packages/css/index.css
CHANGED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Kupola CSS — Responsive utilities & component adaptations.
|
|
3
|
+
*
|
|
4
|
+
* Breakpoints:
|
|
5
|
+
* sm: 576px (phones landscape)
|
|
6
|
+
* md: 768px (tablets)
|
|
7
|
+
* lg: 1024px (laptops)
|
|
8
|
+
* xl: 1280px (desktops)
|
|
9
|
+
*
|
|
10
|
+
* Usage:
|
|
11
|
+
* <div class="ds-hide-sm">Hidden on phones</div>
|
|
12
|
+
* <div class="ds-show-md">Only visible on tablets+</div>
|
|
13
|
+
* <div class="ds-hide-lg">Hidden below laptops</div>
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
/* ═══════════════════════════════════════════════════════════
|
|
17
|
+
Responsive display utilities
|
|
18
|
+
═══════════════════════════════════════════════════════════ */
|
|
19
|
+
|
|
20
|
+
/* ── sm: < 576px (phones) ─────────────────────────────── */
|
|
21
|
+
@media (max-width: 575.98px) {
|
|
22
|
+
.ds-hide-sm { display: none !important; }
|
|
23
|
+
.ds-hide-below-sm { display: none !important; }
|
|
24
|
+
}
|
|
25
|
+
@media (min-width: 576px) {
|
|
26
|
+
.ds-show-sm { display: none !important; }
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* ── md: < 768px (below tablets) ──────────────────────── */
|
|
30
|
+
@media (max-width: 767.98px) {
|
|
31
|
+
.ds-hide-md { display: none !important; }
|
|
32
|
+
.ds-hide-below-md { display: none !important; }
|
|
33
|
+
}
|
|
34
|
+
@media (min-width: 768px) {
|
|
35
|
+
.ds-show-md { display: none !important; }
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* ── lg: < 1024px (below laptops) ─────────────────────── */
|
|
39
|
+
@media (max-width: 1023.98px) {
|
|
40
|
+
.ds-hide-lg { display: none !important; }
|
|
41
|
+
.ds-hide-below-lg { display: none !important; }
|
|
42
|
+
}
|
|
43
|
+
@media (min-width: 1024px) {
|
|
44
|
+
.ds-show-lg { display: none !important; }
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* ── xl: < 1280px (below desktops) ────────────────────── */
|
|
48
|
+
@media (max-width: 1279.98px) {
|
|
49
|
+
.ds-hide-xl { display: none !important; }
|
|
50
|
+
.ds-hide-below-xl { display: none !important; }
|
|
51
|
+
}
|
|
52
|
+
@media (min-width: 1280px) {
|
|
53
|
+
.ds-show-xl { display: none !important; }
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* ═══════════════════════════════════════════════════════════
|
|
57
|
+
Responsive spacing utilities
|
|
58
|
+
═══════════════════════════════════════════════════════════ */
|
|
59
|
+
|
|
60
|
+
@media (max-width: 767.98px) {
|
|
61
|
+
.ds-padding-responsive { padding: var(--spacing-3, 12px) !important; }
|
|
62
|
+
.ds-margin-responsive { margin: var(--spacing-3, 12px) !important; }
|
|
63
|
+
.ds-text-responsive { font-size: var(--font-size-sm, 13px) !important; }
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* ═══════════════════════════════════════════════════════════
|
|
67
|
+
Component responsive adaptations
|
|
68
|
+
═══════════════════════════════════════════════════════════ */
|
|
69
|
+
|
|
70
|
+
/* ── Modal: full-screen on phones ─────────────────────────── */
|
|
71
|
+
@media (max-width: 575.98px) {
|
|
72
|
+
.ds-modal-content {
|
|
73
|
+
width: 100% !important;
|
|
74
|
+
max-width: 100% !important;
|
|
75
|
+
min-height: 100vh !important;
|
|
76
|
+
border-radius: 0 !important;
|
|
77
|
+
margin: 0 !important;
|
|
78
|
+
}
|
|
79
|
+
.ds-modal-mask {
|
|
80
|
+
padding: 0 !important;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* ── Drawer: full-width/height on phones ──────────────────── */
|
|
85
|
+
@media (max-width: 575.98px) {
|
|
86
|
+
.ds-drawer-right,
|
|
87
|
+
.ds-drawer-left {
|
|
88
|
+
width: 100% !important;
|
|
89
|
+
max-width: 100% !important;
|
|
90
|
+
}
|
|
91
|
+
.ds-drawer-bottom,
|
|
92
|
+
.ds-drawer-top {
|
|
93
|
+
height: 90vh !important;
|
|
94
|
+
max-height: 90vh !important;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* ── Dialog: full-width on phones ─────────────────────────── */
|
|
99
|
+
@media (max-width: 575.98px) {
|
|
100
|
+
.ds-dialog {
|
|
101
|
+
width: calc(100% - 32px) !important;
|
|
102
|
+
max-width: 100% !important;
|
|
103
|
+
margin: 16px !important;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* ── Table: horizontal scroll on small screens ────────────── */
|
|
108
|
+
@media (max-width: 767.98px) {
|
|
109
|
+
.ds-table-wrapper {
|
|
110
|
+
overflow-x: auto;
|
|
111
|
+
-webkit-overflow-scrolling: touch;
|
|
112
|
+
}
|
|
113
|
+
.ds-table {
|
|
114
|
+
min-width: 600px;
|
|
115
|
+
}
|
|
116
|
+
.ds-table th,
|
|
117
|
+
.ds-table td {
|
|
118
|
+
white-space: nowrap;
|
|
119
|
+
padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
|
|
120
|
+
font-size: var(--font-size-sm, 13px);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* ── Select: full-width on phones ─────────────────────────── */
|
|
125
|
+
@media (max-width: 575.98px) {
|
|
126
|
+
.ds-select-dropdown {
|
|
127
|
+
position: fixed !important;
|
|
128
|
+
bottom: 0;
|
|
129
|
+
left: 0;
|
|
130
|
+
right: 0;
|
|
131
|
+
max-height: 50vh;
|
|
132
|
+
border-radius: 12px 12px 0 0;
|
|
133
|
+
z-index: var(--z-index-modal, 3000);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* ── DatePicker: full-width on phones ─────────────────────── */
|
|
138
|
+
@media (max-width: 575.98px) {
|
|
139
|
+
.ds-datepicker-panel {
|
|
140
|
+
width: calc(100vw - 32px) !important;
|
|
141
|
+
max-width: 100% !important;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* ── Notification: stack full-width on phones ─────────────── */
|
|
146
|
+
@media (max-width: 575.98px) {
|
|
147
|
+
.ds-notification {
|
|
148
|
+
width: calc(100% - 24px) !important;
|
|
149
|
+
max-width: 100% !important;
|
|
150
|
+
right: 12px !important;
|
|
151
|
+
left: 12px !important;
|
|
152
|
+
}
|
|
153
|
+
}
|
package/packages/css/tokens.css
CHANGED
|
@@ -78,6 +78,12 @@
|
|
|
78
78
|
--transition-fast: 0.12s ease;
|
|
79
79
|
--transition-normal: 0.2s ease;
|
|
80
80
|
--transition-slow: 0.3s ease;
|
|
81
|
+
|
|
82
|
+
/* ── Breakpoints ────────────────────────────────────────── */
|
|
83
|
+
--breakpoint-sm: 576px;
|
|
84
|
+
--breakpoint-md: 768px;
|
|
85
|
+
--breakpoint-lg: 1024px;
|
|
86
|
+
--breakpoint-xl: 1280px;
|
|
81
87
|
}
|
|
82
88
|
|
|
83
89
|
/* ═══════════════════════════════════════════════════════════
|