Convert app into @modernsk/ui component library package
- Add library entry (src/index.ts) re-exporting all components, theme, and TooltipProvider - Add shippable stylesheet (src/styles/index.css): tokens + components only, font inlined as base64 at build time - Build with tsup (ESM + CJS + .d.ts) and esbuild for CSS - package.json: exports map, files, sideEffects, peerDependencies (react/react-dom), correct deps (radix-ui), prepare-on-install - Fix phantom dependency: declare radix-ui, drop unused @radix-ui/themes - Remove Storybook boilerplate, Tailwind/PostCSS (unused) - Keep App.tsx + Rsbuild as dev-only playground (not published) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,351 @@
|
||||
/* ============================================================
|
||||
ModernSK — Components layer (ported to Radix Primitives)
|
||||
Visual recipes kept 1:1 from the Claude Design bundle; state
|
||||
hooks rewired from .is-* classes to Radix data-attributes
|
||||
([data-state], [data-highlighted], [data-disabled]).
|
||||
============================================================ */
|
||||
|
||||
@keyframes msk-pop {
|
||||
from { opacity: 0; transform: scale(.6); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@keyframes msk-scale-in {
|
||||
from { opacity: 0; transform: scale(.96); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@keyframes msk-scale-out {
|
||||
from { opacity: 1; transform: scale(1); }
|
||||
to { opacity: 0; transform: scale(.96); }
|
||||
}
|
||||
@keyframes msk-fade-in { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes msk-fade-out { from { opacity: 1; } to { opacity: 0; } }
|
||||
|
||||
/* ---------- BUTTONS ---------- */
|
||||
.msk-btn{
|
||||
font-family:var(--font-sans); font-size:var(--ctl-font); font-weight:600;
|
||||
line-height:1.1; padding:var(--ctl-pad-y) var(--ctl-pad-x);
|
||||
border-radius:var(--r-md); cursor:pointer; user-select:none;
|
||||
display:inline-flex; align-items:center; justify-content:center; gap:7px;
|
||||
border:1px solid var(--hair-strong); color:var(--fg-1);
|
||||
background:var(--grad-key);
|
||||
box-shadow:var(--shadow-raised);
|
||||
transition:filter var(--dur-quick) var(--ease-out),
|
||||
box-shadow var(--dur-quick) var(--ease-out),
|
||||
transform var(--dur-press) var(--ease-out),
|
||||
background var(--dur-quick) var(--ease-out);
|
||||
}
|
||||
.msk-btn:hover{ background:var(--grad-key-hover); }
|
||||
.msk-btn:active{ background:var(--grad-key-down); box-shadow:var(--shadow-pressed); transform:translateY(1px); }
|
||||
.msk-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring), var(--shadow-raised); }
|
||||
.msk-btn[disabled], .msk-btn.is-disabled{ opacity:.4; filter:saturate(.6); pointer-events:none; }
|
||||
.msk-btn .ph{ font-size:1.05em; display:inline-flex; }
|
||||
|
||||
.msk-btn--primary{
|
||||
color:var(--lime-ink); background:var(--grad-primary);
|
||||
border-color:var(--lime-deep);
|
||||
text-shadow:0 1px 0 rgba(255,255,255,.25);
|
||||
box-shadow:0 1px 0 rgba(255,255,255,.3) inset, var(--glow-lime), 0 2px 4px rgba(0,0,0,.35);
|
||||
}
|
||||
.msk-btn--primary:hover{ filter:brightness(1.04); background:var(--grad-primary); }
|
||||
.msk-btn--primary:active{ background:var(--grad-primary-down); box-shadow:0 3px 6px rgba(60,90,10,.5) inset; transform:translateY(1px); }
|
||||
.msk-btn--primary:focus-visible{ box-shadow:var(--focus-ring), 0 1px 0 rgba(255,255,255,.3) inset, 0 2px 4px rgba(0,0,0,.35); }
|
||||
|
||||
.msk-btn--ember{
|
||||
color:#fff; background:var(--grad-ember);
|
||||
border-color:var(--ember-deep);
|
||||
text-shadow:0 1px 1px rgba(0,0,0,.25);
|
||||
box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 2px 4px rgba(0,0,0,.35), 0 6px 14px rgba(233,87,43,.18);
|
||||
}
|
||||
.msk-btn--ember:hover{ background:var(--grad-ember); filter:brightness(1.06); }
|
||||
.msk-btn--ember:active{ background:var(--grad-ember-down); box-shadow:0 3px 6px rgba(90,30,10,.55) inset; transform:translateY(1px); }
|
||||
.msk-btn--ember:focus-visible{ box-shadow:var(--focus-ring-ember), 0 2px 4px rgba(0,0,0,.35); }
|
||||
|
||||
.msk-btn--ghost{
|
||||
color:var(--fg-2); background:transparent; border-color:var(--hair-strong);
|
||||
box-shadow:none; text-shadow:none;
|
||||
}
|
||||
.msk-btn--ghost:hover{ background:rgba(255,255,255,.04); color:var(--fg-1); }
|
||||
.msk-btn--ghost:active{ background:rgba(0,0,0,.2); box-shadow:var(--shadow-pressed); transform:translateY(1px); }
|
||||
|
||||
.msk-btn--sm{ font-size:12px; padding:4px 11px; gap:5px; }
|
||||
.msk-btn--icon{ padding:var(--ctl-pad-y); width:calc(var(--ctl-font) + 2*var(--ctl-pad-y)); aspect-ratio:1; }
|
||||
|
||||
/* ---------- TEXT FIELDS ---------- */
|
||||
.msk-field{
|
||||
width:100%; font-family:var(--font-sans); font-size:14px; color:var(--fg-1);
|
||||
padding:var(--field-pad-y) var(--field-pad-x); border-radius:var(--r-md);
|
||||
background:var(--steel-900); border:1px solid var(--edge-inset);
|
||||
box-shadow:var(--shadow-inset-well); outline:none;
|
||||
transition:box-shadow var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
|
||||
}
|
||||
.msk-field::placeholder{ color:var(--fg-3); }
|
||||
.msk-field:focus{ border-color:var(--lime-deep); box-shadow:var(--shadow-inset-well), var(--focus-ring); }
|
||||
textarea.msk-field{ resize:vertical; min-height:64px; line-height:1.5; }
|
||||
|
||||
.msk-search{ position:relative; display:flex; align-items:center; }
|
||||
.msk-search .ph{ position:absolute; left:11px; color:var(--fg-3); font-size:16px; pointer-events:none; display:inline-flex; }
|
||||
.msk-search .msk-field{ padding-left:34px; }
|
||||
|
||||
/* ---------- SELECT (Radix Select, styled as the glossy key) ---------- */
|
||||
.msk-select{
|
||||
font-family:var(--font-sans); font-size:14px; color:var(--fg-1); cursor:pointer;
|
||||
display:inline-flex; align-items:center; gap:10px;
|
||||
padding:var(--field-pad-y) 12px var(--field-pad-y) var(--field-pad-x);
|
||||
border-radius:var(--r-md); border:1px solid var(--hair-strong);
|
||||
background:var(--grad-key);
|
||||
box-shadow:var(--shadow-raised); outline:none;
|
||||
}
|
||||
.msk-select:hover{ background:var(--grad-key-hover); }
|
||||
.msk-select:focus-visible{ box-shadow:var(--focus-ring), var(--shadow-raised); }
|
||||
.msk-select__icon{ color:var(--fg-2); display:inline-flex; margin-left:auto; }
|
||||
.msk-select__content{
|
||||
min-width:var(--radix-select-trigger-width); padding:6px; border-radius:var(--r-lg);
|
||||
border:1px solid var(--hair-strong); background:rgba(34,36,27,.86);
|
||||
backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3);
|
||||
box-shadow:var(--shadow-window); z-index:50;
|
||||
transform-origin:var(--radix-select-content-transform-origin);
|
||||
}
|
||||
.msk-select__content[data-state="open"]{ animation:msk-scale-in var(--dur-base) var(--ease-out); }
|
||||
.msk-select__item{
|
||||
display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--r-sm);
|
||||
font-size:13px; color:var(--fg-1); cursor:pointer; outline:none; user-select:none;
|
||||
}
|
||||
.msk-select__item[data-highlighted]{ background:linear-gradient(180deg,var(--lime),var(--lime-deep)); color:var(--lime-ink); }
|
||||
.msk-select__item-indicator{ margin-left:auto; display:inline-flex; }
|
||||
|
||||
/* ---------- SWITCH ---------- */
|
||||
.msk-switch{
|
||||
position:relative; width:var(--switch-w); height:var(--switch-h);
|
||||
flex-shrink:0; border-radius:8px; padding:0; border:1px solid var(--edge-inset);
|
||||
background:var(--steel-700); box-shadow:var(--shadow-inset-well); cursor:pointer;
|
||||
transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
|
||||
}
|
||||
.msk-switch__thumb{
|
||||
display:block; position:absolute; top:50%; left:var(--switch-gap); transform:translateY(-50%);
|
||||
width:var(--switch-knob); height:var(--switch-knob); border-radius:5px;
|
||||
background:linear-gradient(180deg,#cfd1c4,#a7a99c);
|
||||
box-shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.7) inset;
|
||||
transition:left var(--dur-base) var(--ease-snap), background var(--dur-base) var(--ease-out);
|
||||
}
|
||||
.msk-switch[data-state="checked"]{ background:linear-gradient(180deg,var(--lime),var(--lime-deep)); border-color:var(--lime-deep); }
|
||||
.msk-switch[data-state="checked"] .msk-switch__thumb{ left:calc(100% - var(--switch-knob) - var(--switch-gap)); background:linear-gradient(180deg,#fff,#e6e8dd); }
|
||||
.msk-switch:focus-visible{ outline:none; box-shadow:var(--shadow-inset-well), var(--focus-ring); }
|
||||
|
||||
/* ---------- CHECKBOX ---------- */
|
||||
.msk-check{
|
||||
width:22px; height:22px; flex-shrink:0; border-radius:4px; padding:0;
|
||||
background:var(--steel-900); border:1px solid var(--edge-inset);
|
||||
box-shadow:var(--shadow-inset-well); cursor:pointer;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
transition:background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
|
||||
}
|
||||
.msk-check[data-state="checked"]{ background:linear-gradient(180deg,var(--lime-bright),var(--lime-deep)); border-color:var(--lime-deep); box-shadow:0 1px 0 rgba(255,255,255,.4) inset; }
|
||||
.msk-check__indicator{ display:flex; align-items:center; justify-content:center; animation:msk-pop var(--dur-quick) var(--ease-snap); }
|
||||
.msk-check__indicator svg{ width:13px; height:13px; display:block; }
|
||||
.msk-check:focus-visible{ outline:none; box-shadow:var(--shadow-inset-well), var(--focus-ring); }
|
||||
|
||||
/* ---------- RADIO ---------- */
|
||||
.msk-radio{
|
||||
width:22px; height:22px; flex-shrink:0; border-radius:50%; padding:0;
|
||||
background:var(--steel-900); border:1px solid var(--edge-inset);
|
||||
box-shadow:var(--shadow-inset-well); cursor:pointer;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
transition:border-color var(--dur-quick) var(--ease-out);
|
||||
}
|
||||
.msk-radio__indicator{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
|
||||
.msk-radio__indicator::after{
|
||||
content:""; width:11px; height:11px; border-radius:50%;
|
||||
background:radial-gradient(circle at 50% 38%,var(--lime-bright),var(--lime-deep));
|
||||
box-shadow:0 0 8px rgba(190,242,100,.45), 0 1px 0 rgba(255,255,255,.45) inset;
|
||||
animation:msk-pop var(--dur-quick) var(--ease-snap);
|
||||
}
|
||||
.msk-radio:focus-visible{ outline:none; box-shadow:var(--shadow-inset-well), var(--focus-ring); }
|
||||
|
||||
/* control + label row helper */
|
||||
.msk-control{ display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--fg-2); cursor:pointer; }
|
||||
|
||||
/* ---------- SEGMENTED CONTROL (Radix ToggleGroup) ---------- */
|
||||
.msk-seg{ display:inline-flex; background:var(--steel-900); border:1px solid var(--edge-inset); border-radius:var(--r-md); padding:3px; box-shadow:var(--shadow-inset-well); gap:2px; }
|
||||
.msk-seg__item{ font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--fg-2); background:transparent; border:none; padding:var(--seg-pad-y) 14px; border-radius:var(--r-sm); cursor:pointer; transition:color var(--dur-quick), background var(--dur-quick); }
|
||||
.msk-seg__item:hover{ color:var(--fg-1); }
|
||||
.msk-seg__item[data-state="on"]{ color:var(--fg-1); background:var(--grad-key); box-shadow:var(--shadow-raised); }
|
||||
|
||||
/* ---------- SLIDER ---------- */
|
||||
.msk-slider{ position:relative; display:flex; align-items:center; width:200px; height:20px; user-select:none; touch-action:none; }
|
||||
.msk-slider__track{ position:relative; flex-grow:1; height:6px; border-radius:3px; background:var(--steel-800); box-shadow:var(--shadow-inset-well); }
|
||||
.msk-slider__range{ position:absolute; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--lime-deep),var(--lime)); box-shadow:0 0 10px rgba(190,242,100,.4); }
|
||||
.msk-slider__thumb{ display:block; width:20px; height:20px; border-radius:50%; background:linear-gradient(180deg,#fff,#e6e8dd); box-shadow:0 2px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.9) inset; cursor:pointer; outline:none; }
|
||||
.msk-slider__thumb:focus-visible{ box-shadow:0 2px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.9) inset, var(--focus-ring); }
|
||||
|
||||
/* ---------- STEPPER ---------- */
|
||||
.msk-stepper{ display:inline-flex; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-raised); border:1px solid var(--hair-strong); }
|
||||
.msk-stepper button{ font-family:var(--font-mono); font-size:16px; font-weight:600; color:var(--fg-1); background:var(--grad-key); border:none; width:34px; height:var(--stepper-h); cursor:pointer; transition:background var(--dur-quick); }
|
||||
.msk-stepper button:hover{ background:var(--grad-key-hover); }
|
||||
.msk-stepper button:active{ background:var(--grad-key-down); }
|
||||
.msk-stepper button:first-child{ border-right:1px solid var(--edge-inset); }
|
||||
|
||||
/* ---------- BADGES / CHIPS / TAGS ---------- */
|
||||
.msk-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; line-height:1; padding:4px 9px; border-radius:var(--r-pill); letter-spacing:.02em; border:1px solid transparent; }
|
||||
.msk-badge--lime{ color:var(--lime-ink); background:linear-gradient(180deg,var(--lime-bright),var(--lime-deep)); border-color:var(--lime-deep); }
|
||||
.msk-badge--ember{ color:#fff; background:var(--grad-ember); border-color:var(--ember-deep); }
|
||||
.msk-badge--neutral{ color:var(--fg-2); background:var(--steel-700); border-color:var(--hair-strong); }
|
||||
.msk-badge--outline{ color:var(--fg-2); background:transparent; border-color:var(--hair-strong); }
|
||||
.msk-badge--dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
|
||||
|
||||
.msk-chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--fg-1); padding:5px 11px; border-radius:var(--r-pill); background:var(--steel-700); border:1px solid var(--hair-strong); }
|
||||
.msk-chip .x{ color:var(--fg-3); cursor:pointer; font-size:14px; line-height:1; background:none; border:none; padding:0; display:inline-flex; }
|
||||
.msk-chip .x:hover{ color:var(--fg-1); }
|
||||
|
||||
/* ---------- CARD ---------- */
|
||||
.msk-card{ background:var(--steel-900); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:18px; }
|
||||
|
||||
/* ---------- LIST ROWS ---------- */
|
||||
.msk-list{ background:var(--steel-900); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; }
|
||||
.msk-row{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--hair); cursor:default; }
|
||||
.msk-row:last-child{ border-bottom:none; }
|
||||
.msk-row:hover{ background:rgba(255,255,255,.03); }
|
||||
.msk-row.is-selected{ background:linear-gradient(180deg,rgba(190,242,100,.16),rgba(190,242,100,.08)); }
|
||||
.msk-row .nm{ font-size:14px; font-weight:500; color:var(--fg-1); white-space:nowrap; }
|
||||
.msk-row .meta{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--fg-3); }
|
||||
|
||||
/* ---------- MENU / POPOVER (Radix DropdownMenu) ---------- */
|
||||
.msk-menu{ min-width:208px; padding:6px; border-radius:var(--r-lg); border:1px solid var(--hair-strong); background:rgba(34,36,27,.86); backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3); box-shadow:var(--shadow-window); z-index:50; transform-origin:var(--radix-dropdown-menu-content-transform-origin); }
|
||||
.msk-menu[data-state="open"]{ animation:msk-scale-in var(--dur-base) var(--ease-out); }
|
||||
.msk-menu[data-state="closed"]{ animation:msk-scale-out var(--dur-quick) var(--ease-out); }
|
||||
.msk-menu-item{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--r-sm); font-size:13px; color:var(--fg-1); cursor:pointer; outline:none; user-select:none; }
|
||||
.msk-menu-item .ph{ font-size:16px; color:var(--fg-2); display:inline-flex; }
|
||||
.msk-menu-item .sc{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--fg-3); }
|
||||
.msk-menu-item[data-highlighted]{ background:linear-gradient(180deg,var(--lime),var(--lime-deep)); color:var(--lime-ink); }
|
||||
.msk-menu-item[data-highlighted] .ph, .msk-menu-item[data-highlighted] .sc{ color:var(--lime-ink); }
|
||||
.msk-menu-sep{ height:1px; background:var(--hair); margin:5px 4px; }
|
||||
|
||||
/* ---------- TABS (Radix Tabs) ---------- */
|
||||
.msk-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--hair); }
|
||||
.msk-tabs__trigger{ font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--fg-3); background:transparent; border:none; padding:9px 14px; cursor:pointer; position:relative; transition:color var(--dur-quick); }
|
||||
.msk-tabs__trigger:hover{ color:var(--fg-2); }
|
||||
.msk-tabs__trigger[data-state="active"]{ color:var(--fg-1); }
|
||||
.msk-tabs__trigger[data-state="active"]::after{ content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; border-radius:2px; background:var(--lime); box-shadow:0 0 8px rgba(190,242,100,.5); }
|
||||
|
||||
/* ---------- PROGRESS (Radix Progress) ---------- */
|
||||
.msk-progress{ width:100%; height:8px; border-radius:var(--r-pill); background:var(--steel-800); box-shadow:var(--shadow-inset-well); overflow:hidden; }
|
||||
.msk-progress__indicator{ display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--lime-deep),var(--lime)); box-shadow:0 0 10px rgba(190,242,100,.4); transition:width var(--dur-base) var(--ease-out); }
|
||||
|
||||
/* ---------- WINDOW CHROME ---------- */
|
||||
.msk-window{ border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--hair-strong); background:var(--steel-800); box-shadow:var(--shadow-window); }
|
||||
.msk-titlebar{ height:42px; display:flex; align-items:center; gap:9px; padding:0 14px; background:var(--grad-titlebar); border-bottom:1px solid rgba(0,0,0,.4); box-shadow:0 1px 0 rgba(255,255,255,.05) inset; }
|
||||
.msk-titlebar .ttl{ margin-left:6px; font-size:13px; font-weight:600; color:var(--fg-2); }
|
||||
.msk-traffic{ width:12px; height:12px; border-radius:50%; box-shadow:0 1px 1px rgba(0,0,0,.4) inset, 0 0 0 .5px rgba(0,0,0,.3); }
|
||||
.msk-traffic.r{ background:radial-gradient(circle at 35% 30%,#ff8a7a,#ec5f55); }
|
||||
.msk-traffic.y{ background:radial-gradient(circle at 35% 30%,#ffd97a,#e6a93c); }
|
||||
.msk-traffic.g{ background:radial-gradient(circle at 35% 30%,#bff07a,#9bce4c); }
|
||||
|
||||
/* ---------- TOOLTIP (Radix Tooltip) ---------- */
|
||||
.msk-tooltip{ display:inline-flex; align-items:center; font-size:12px; font-weight:500; color:var(--fg-1); padding:5px 9px; border-radius:var(--r-sm); background:rgba(20,21,15,.92); border:1px solid var(--hair-strong); box-shadow:var(--shadow-card); z-index:60; transform-origin:var(--radix-tooltip-content-transform-origin); }
|
||||
.msk-tooltip[data-state="delayed-open"], .msk-tooltip[data-state="instant-open"]{ animation:msk-scale-in var(--dur-base) var(--ease-out); }
|
||||
.msk-tooltip[data-state="closed"]{ animation:msk-fade-out var(--dur-quick) var(--ease-out); }
|
||||
|
||||
/* ---------- ICON BUTTON ----------
|
||||
Square tactile key. Reuses the .msk-btn engine; variants below
|
||||
just recolor. Pair with .msk-btn / .msk-btn--primary etc. */
|
||||
.msk-iconbtn{ padding:0; width:32px; height:32px; aspect-ratio:1; display:inline-flex; align-items:center; justify-content:center; }
|
||||
.msk-iconbtn--sm{ width:26px; height:26px; }
|
||||
.msk-iconbtn--lg{ width:38px; height:38px; }
|
||||
|
||||
/* ---------- SPINNER ----------
|
||||
A carved donut groove (sunk like the switch well) with a glossy lime
|
||||
arc spinning *inside* the channel. All drawn in SVG; CSS only sizes
|
||||
the box and drives the rotation. Honors reduced motion. */
|
||||
.msk-spinner{ display:inline-block; width:24px; height:24px; line-height:0; }
|
||||
.msk-spinner--sm{ width:16px; height:16px; }
|
||||
.msk-spinner--lg{ width:34px; height:34px; }
|
||||
.msk-spinner svg{ width:100%; height:100%; display:block; }
|
||||
.msk-spinner__arc{
|
||||
transform-origin:center; animation:msk-spin .7s linear infinite;
|
||||
filter:drop-shadow(0 0 3px rgba(190,242,100,.55));
|
||||
}
|
||||
@keyframes msk-spin{ to{ transform:rotate(360deg); } }
|
||||
@media (prefers-reduced-motion:reduce){ .msk-spinner__arc{ animation-duration:1.8s; } }
|
||||
|
||||
/* ---------- CALLOUT ----------
|
||||
Soft semantic surface (12–14% tint on the felt) with a glossy
|
||||
icon chip. Variants reuse the semantic --*-bg tokens. */
|
||||
.msk-callout{ display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border-radius:var(--r-lg); border:1px solid var(--hair); background:var(--info-bg); color:var(--fg-1); box-shadow:var(--shadow-inset-well); }
|
||||
.msk-callout__icon{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--r-sm); color:var(--info); }
|
||||
.msk-callout__body{ font-size:13px; line-height:1.5; color:var(--fg-2); padding-top:3px; }
|
||||
.msk-callout__body strong{ color:var(--fg-1); font-weight:600; }
|
||||
.msk-callout--success{ background:var(--success-bg); border-color:rgba(190,242,100,.22); }
|
||||
.msk-callout--success .msk-callout__icon{ color:var(--success); }
|
||||
.msk-callout--warning{ background:var(--warning-bg); border-color:rgba(230,169,60,.22); }
|
||||
.msk-callout--warning .msk-callout__icon{ color:var(--warning); }
|
||||
.msk-callout--danger{ background:var(--danger-bg); border-color:rgba(233,87,43,.25); }
|
||||
.msk-callout--danger .msk-callout__icon{ color:var(--danger); }
|
||||
|
||||
/* ---------- TABLE ----------
|
||||
The list-row aesthetic stretched to columns: hairline grid, sunk
|
||||
header strip, mono numerals, lime row selection. */
|
||||
.msk-table-wrap{ background:var(--steel-900); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden; }
|
||||
.msk-table{ width:100%; border-collapse:collapse; font-size:14px; }
|
||||
.msk-table thead th{ text-align:left; font-family:var(--font-sans); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--fg-3); padding:9px 14px; background:var(--grad-titlebar); border-bottom:1px solid var(--hair-strong); box-shadow:0 1px 0 rgba(255,255,255,.04) inset; white-space:nowrap; }
|
||||
.msk-table tbody td{ padding:10px 14px; border-bottom:1px solid var(--hair); color:var(--fg-1); vertical-align:middle; }
|
||||
.msk-table tbody tr:last-child td{ border-bottom:none; }
|
||||
.msk-table tbody tr:hover td{ background:rgba(255,255,255,.03); }
|
||||
.msk-table tbody tr.is-selected td{ background:linear-gradient(180deg,rgba(190,242,100,.16),rgba(190,242,100,.08)); }
|
||||
.msk-table .num{ font-family:var(--font-mono); font-size:12px; color:var(--fg-2); text-align:right; }
|
||||
.msk-table .muted{ color:var(--fg-3); }
|
||||
[data-theme="light"] .msk-table tbody tr:hover td{ background:rgba(0,0,0,.035); }
|
||||
|
||||
/* ---------- SCROLL AREA (Radix) ---------- */
|
||||
.msk-scroll{ overflow:hidden; }
|
||||
.msk-scroll__viewport{ width:100%; height:100%; border-radius:inherit; }
|
||||
.msk-scroll__bar{ display:flex; user-select:none; touch-action:none; padding:2px; background:transparent; transition:background var(--dur-base) var(--ease-out); }
|
||||
.msk-scroll__bar[data-orientation="vertical"]{ width:10px; }
|
||||
.msk-scroll__bar[data-orientation="horizontal"]{ flex-direction:column; height:10px; }
|
||||
.msk-scroll:hover .msk-scroll__bar{ background:rgba(0,0,0,.18); }
|
||||
.msk-scroll__thumb{ flex:1; background:var(--steel-500); border-radius:var(--r-pill); position:relative; box-shadow:0 1px 0 rgba(255,255,255,.08) inset; }
|
||||
.msk-scroll__thumb:hover{ background:var(--steel-400); }
|
||||
.msk-scroll__thumb::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; min-width:44px; min-height:44px; }
|
||||
|
||||
/* ---------- DIALOG / MODAL (Radix Dialog + AlertDialog) ----------
|
||||
The floating sheet: window chrome aesthetic, scrim with blur. */
|
||||
.msk-overlay{ position:fixed; inset:0; z-index:80; background:rgba(8,9,6,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
|
||||
.msk-overlay[data-state="open"]{ animation:msk-fade-in var(--dur-base) var(--ease-out); }
|
||||
.msk-overlay[data-state="closed"]{ animation:msk-fade-out var(--dur-quick) var(--ease-out); }
|
||||
.msk-dialog{ position:fixed; z-index:81; top:50%; left:50%; transform:translate(-50%,-50%); width:min(92vw,460px); max-height:85vh; overflow:auto; border-radius:var(--r-xl); border:1px solid var(--hair-strong); background:var(--steel-800); box-shadow:var(--shadow-window); padding:22px 22px 20px; transform-origin:center; }
|
||||
.msk-dialog[data-state="open"]{ animation:msk-scale-in var(--dur-base) var(--ease-out); }
|
||||
.msk-dialog[data-state="closed"]{ animation:msk-scale-out var(--dur-quick) var(--ease-out); }
|
||||
.msk-dialog__title{ font-family:var(--font-sans); font-size:var(--text-lg); font-weight:600; color:var(--fg-1); letter-spacing:var(--track-snug); }
|
||||
.msk-dialog__desc{ margin-top:8px; font-size:14px; line-height:1.55; color:var(--fg-2); }
|
||||
.msk-dialog__body{ margin-top:16px; }
|
||||
.msk-dialog__footer{ display:flex; justify-content:flex-end; gap:12px; margin-top:22px; }
|
||||
.msk-dialog__close{ position:absolute; top:14px; right:14px; }
|
||||
|
||||
/* ============================================================
|
||||
LIGHT THEME — component overrides (ported 1:1)
|
||||
============================================================ */
|
||||
[data-theme="light"] .msk-btn--ghost:hover{ background:rgba(0,0,0,.05); color:var(--fg-1); }
|
||||
[data-theme="light"] .msk-btn--ghost:active{ background:rgba(0,0,0,.08); }
|
||||
[data-theme="light"] .msk-row:hover{ background:rgba(0,0,0,.035); }
|
||||
|
||||
[data-theme="light"] .msk-btn--ember{
|
||||
box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 1px 2px rgba(0,0,0,.18), 0 6px 14px rgba(233,87,43,.22);
|
||||
}
|
||||
|
||||
[data-theme="light"] .msk-switch__thumb{
|
||||
background:linear-gradient(180deg,#ffffff,#e7e7dd);
|
||||
box-shadow:0 1px 2px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.9) inset;
|
||||
}
|
||||
[data-theme="light"] .msk-switch{ background:var(--steel-600); }
|
||||
[data-theme="light"] .msk-switch[data-state="checked"]{ background:linear-gradient(180deg,var(--lime),var(--lime-deep)); }
|
||||
|
||||
[data-theme="light"] .msk-slider__thumb{ box-shadow:0 1px 3px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.95) inset, 0 0 0 .5px rgba(0,0,0,.06); }
|
||||
|
||||
[data-theme="light"] .msk-menu{ background:rgba(246,246,239,.82); border-color:var(--hair-strong); }
|
||||
[data-theme="light"] .msk-select__content{ background:rgba(246,246,239,.82); }
|
||||
[data-theme="light"] .msk-tooltip{ background:rgba(246,246,239,.94); color:var(--fg-1); }
|
||||
|
||||
[data-theme="light"] .msk-titlebar{ border-bottom-color:rgba(0,0,0,.12); }
|
||||
[data-theme="light"] .msk-traffic{ box-shadow:0 1px 1px rgba(0,0,0,.18) inset, 0 0 0 .5px rgba(0,0,0,.14); }
|
||||
|
||||
[data-theme="light"] .msk-overlay{ background:rgba(60,62,52,.32); }
|
||||
[data-theme="light"] .msk-scroll:hover .msk-scroll__bar{ background:rgba(0,0,0,.06); }
|
||||
[data-theme="light"] .msk-table thead th{ box-shadow:0 1px 0 rgba(255,255,255,.6) inset; }
|
||||
Reference in New Issue
Block a user