@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/styles/base.css

@@ -0,0 +1,189 @@
+/* Runtime-independent essentials used by shared components. */
+:root[data-ui-theme] {
+  --card-radius: var(--radius-lg, calc(var(--radius) + 4px));
+  --card-space: var(--space, 24px);
+}
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes page-enter {
+  from {
+    opacity: 0;
+    translate: 0 5px;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root[data-ui-theme] *,
+  :root[data-ui-theme] *::before,
+  :root[data-ui-theme] *::after,
+  :root[data-ui-theme] *::backdrop {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+}
+:root[data-ui-theme]:is([data-motion="off"], [data-motion="false"]) *,
+:root[data-ui-theme]:is([data-motion="off"], [data-motion="false"]) *::before,
+:root[data-ui-theme]:is([data-motion="off"], [data-motion="false"]) *::after,
+:root[data-ui-theme]:is([data-motion="off"], [data-motion="false"])
+  *::backdrop {
+  animation: none !important;
+  transition: none !important;
+  scroll-behavior: auto !important;
+}
+
+/* Default glyph size; explicit sizes and component CSS remain authoritative. */
+:where(svg.lucide[width="24"][height="24"]) {
+  width: 17px;
+  height: 17px;
+  flex-shrink: 0;
+}
+
+:root[data-ui-theme] {
+  --ui-font: "Segoe UI", "Microsoft YaHei", sans-serif;
+}
+:root[data-ui-theme] body {
+  font: 14px/1.6 var(--ui-font);
+  color: var(--fg);
+  background: var(--canvas);
+}
+:root[data-ui-theme] *,
+:root[data-ui-theme] *::before,
+:root[data-ui-theme] *::after {
+  box-sizing: border-box;
+}
+:root[data-ui-theme] body {
+  margin: 0;
+}
+:where(:root[data-ui-theme]) :where(button, input, select, textarea) {
+  font-family: inherit;
+}
+:where(:root[data-ui-theme])
+  :where(
+    button,
+    a,
+    input,
+    select,
+    textarea,
+    summary,
+    [tabindex]
+  ):focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+:root[data-ui-theme="minimal"] {
+  --sidebar: var(--navigation);
+  --input: var(--field);
+  --elevated: var(--surface);
+  --radius-lg: calc(var(--radius) + 4px);
+  --space: 24px;
+  --border-strong: var(--line);
+  --success-soft: color-mix(in srgb, var(--success) 10%, var(--surface));
+  --warning-soft: color-mix(in srgb, var(--warning) 10%, var(--surface));
+  --accent-hover: var(--accent);
+}
+:where(:root[data-ui-theme]) :where(h1, h2, h3, p) {
+  margin: 0;
+}
+:where(:root[data-ui-theme]) :where(h1) {
+  font-size: 28px;
+  font-weight: 650;
+  letter-spacing: -0.8px;
+  line-height: 1.3;
+}
+:where(:root[data-ui-theme]) :where(h2) {
+  font-size: 15px;
+  font-weight: 600;
+}
+:where(:root[data-ui-theme]) :where(h3) {
+  font-size: 14px;
+  font-weight: 550;
+}
+:where(:root[data-ui-theme]) :where(button, input, textarea, select) {
+  font: inherit;
+  color: inherit;
+}
+:where(:root[data-ui-theme]) :where(button:not(:disabled)) {
+  cursor: pointer;
+}
+:where(:root[data-ui-theme]) :where(button:disabled) {
+  cursor: not-allowed;
+}
+:where(:root[data-ui-theme]) :where(svg) {
+  flex-shrink: 0;
+}
+:where(:root[data-ui-theme]) :where(svg.lucide[stroke-width="2"]) {
+  stroke-width: var(--icon-stroke, 1.75);
+}
+:where(:root[data-ui-theme]) :where(a) {
+  color: inherit;
+  text-decoration: none;
+}
+:where(:root[data-ui-theme]) :where(p) {
+  color: var(--muted);
+}
+:root[data-ui-theme] {
+  --fast: 160ms var(--ease);
+  scrollbar-width: thin;
+}
+
+:where(:root[data-ui-theme] *) {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent;
+}
+
+@supports selector(::-webkit-scrollbar) {
+  :root[data-ui-theme],
+  :where(:root[data-ui-theme] *) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+  :where(:root[data-ui-theme], :root[data-ui-theme] *)::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  :where(:root[data-ui-theme], :root[data-ui-theme] *)::-webkit-scrollbar-track,
+  :where(
+      :root[data-ui-theme],
+      :root[data-ui-theme] *
+    )::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  :where(
+      :root[data-ui-theme],
+      :root[data-ui-theme] *
+    )::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--muted) 42%, transparent);
+    background-clip: padding-box;
+  }
+  :where(
+      :root[data-ui-theme],
+      :root[data-ui-theme] *
+    )::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in srgb, var(--muted) 65%, transparent);
+  }
+  :where(
+      :root[data-ui-theme],
+      :root[data-ui-theme] *
+    )::-webkit-scrollbar-button {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}

package/styles/blue.css

@@ -0,0 +1,254 @@
+:root[data-ui-theme="blue"] {
+  color-scheme: light;
+  --canvas: #f6f7fa;
+  --surface: #fff;
+  --elevated: #fff;
+  --sidebar: #fbfcfe;
+  --input: #fff;
+  --hover: #f1f3f8;
+  --text: #263149;
+  --muted: #66748b;
+  --placeholder: #707d91;
+  --border: #e5e9f1;
+  --border-strong: #cdd5e3;
+  --accent: #5269b6;
+  --accent-hover: #43599f;
+  --accent-soft: #edf1fc;
+  --on-accent: #fff;
+  --success: #348769;
+  --success-soft: #edf7f1;
+  --warning: #ae7d2d;
+  --warning-soft: #fbf4e7;
+  --danger: #c4515d;
+  --danger-soft: #fceff0;
+  --radius: 9px;
+  --radius-lg: 14px;
+  --control-height: 40px;
+  --space: 24px;
+  --shadow: 0 3px 16px #273d6010;
+  --shadow-lg: 0 16px 50px #17243e1c;
+  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --fast: 160ms var(--ease);
+  --sidebar-width: 228px;
+}
+:root[data-ui-theme="blue"][data-theme="dark"] {
+  color-scheme: dark;
+  --canvas: #10151e;
+  --surface: #19212e;
+  --elevated: #202a39;
+  --sidebar: #141c28;
+  --input: #151e2a;
+  --hover: #243044;
+  --text: #e0e7f2;
+  --muted: #98a6bb;
+  --placeholder: #6f7f96;
+  --border: #2c384a;
+  --border-strong: #41516a;
+  --accent: #a7b9f1;
+  --accent-hover: #c0cdf5;
+  --accent-soft: #283650;
+  --on-accent: #192540;
+  --success: #87c7a8;
+  --success-soft: #1d362e;
+  --warning: #e1be7c;
+  --warning-soft: #383021;
+  --danger: #ee9ba6;
+  --danger-soft: #3e2632;
+  --shadow: 0 3px 16px #00000012;
+  --shadow-lg: 0 16px 50px #0005;
+}
+:root[data-ui-theme="blue"][data-accent="neutral"] {
+  --accent: #343a46;
+  --accent-hover: #202630;
+  --accent-soft: #eceef1;
+}
+:root[data-ui-theme="blue"][data-theme="dark"][data-accent="neutral"] {
+  --accent: #e3e7ef;
+  --accent-hover: #fff;
+  --accent-soft: #303a49;
+  --on-accent: #202630;
+}
+:root[data-ui-theme="blue"][data-accent="green"] {
+  --accent: #397c67;
+  --accent-hover: #2b6554;
+  --accent-soft: #edf6f1;
+}
+:root[data-ui-theme="blue"][data-theme="dark"][data-accent="green"] {
+  --accent: #9bd4bb;
+  --accent-hover: #b2e3ce;
+  --accent-soft: #203b33;
+  --on-accent: #173329;
+}
+:root[data-ui-theme="blue"][data-accent="rose"] {
+  --accent: #a9607c;
+  --accent-hover: #914d67;
+  --accent-soft: #fbf0f4;
+}
+:root[data-ui-theme="blue"][data-theme="dark"][data-accent="rose"] {
+  --accent: #e8adc4;
+  --accent-hover: #f7c1d5;
+  --accent-soft: #3e2a39;
+  --on-accent: #392131;
+}
+:root[data-ui-theme="blue"][data-density="compact"] {
+  --control-height: 34px;
+  --space: 18px;
+}
+:root[data-ui-theme="blue"][data-radius="small"] {
+  --radius: 4px;
+  --radius-lg: 8px;
+}
+
+/* Shared component contract, mapped to the Moment / Share Web palette. */
+:root[data-ui-theme="blue"] {
+  --fg: var(--text);
+  --soft: var(--hover);
+  --line: var(--border);
+  --field: var(--input);
+  --selected: var(--accent-soft);
+  --navigation: var(--sidebar);
+  --disabled: var(--placeholder);
+  --control-border: var(--border-strong);
+  --separator-width: 1px;
+  --separator-style: solid;
+  --separator-color: var(--border);
+  --control-small: 30px;
+  --row-height: 68px;
+  --page-padding: 0px;
+  --menu-item-height: 36px;
+  --menu-item-line-height: 20px;
+  --menu-item-padding-x: 11px;
+  --menu-item-gap: 10px;
+  --menu-item-spacing: 2px;
+  --menu-item-icon-size: 16px;
+  --menu-item-font-size: 13px;
+  --menu-shortcut-font-size: 11px;
+  --menu-shortcut-line-height: 18px;
+  --menu-disabled-opacity: 0.42;
+  --shadow-soft: #273d6008;
+  --shadow-detail: #273d6006;
+  --shadow-float: #273d6012;
+  --shadow-edge: #273d600a;
+  --shadow-modal: #14213a24;
+  --shadow-sm: 0 2px 6px var(--shadow-soft), 0 1px 2px var(--shadow-detail);
+  --shadow-dialog: 0 24px 70px var(--shadow-modal),
+    0 6px 20px var(--shadow-float);
+  --overlay: #14213a55;
+  --ease-page: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --motion-hover: 150ms;
+  --motion-press: 90ms;
+  --motion-chevron: 180ms;
+  --motion-segment: 260ms;
+  --motion-page: 200ms;
+  --motion-panel: 260ms;
+  --popup-enter: 180ms;
+  --popup-exit: 140ms;
+  --ui-font: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
+}
+:root[data-ui-theme="blue"][data-theme="dark"] {
+  --shadow-soft: #0003;
+  --shadow-detail: #0002;
+  --shadow-float: #0006;
+  --shadow-edge: #0004;
+  --shadow-modal: #0008;
+  --overlay: #050a1466;
+  --control-border: #3b4a60;
+}
+:root[data-ui-theme="blue"][data-density="compact"] {
+  --control-small: 28px;
+  --row-height: 56px;
+  --menu-item-height: 32px;
+}
+:root[data-ui-theme="blue"][data-motion="false"] {
+  --motion-hover: 0ms;
+  --motion-press: 0ms;
+  --motion-chevron: 0ms;
+  --motion-segment: 0ms;
+  --motion-page: 0ms;
+  --motion-panel: 0ms;
+  --popup-enter: 0ms;
+  --popup-exit: 0ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root[data-ui-theme="blue"] {
+    --motion-hover: 0ms;
+    --motion-press: 0ms;
+    --motion-chevron: 0ms;
+    --motion-segment: 0ms;
+    --motion-page: 0ms;
+    --motion-panel: 0ms;
+    --popup-enter: 0ms;
+    --popup-exit: 0ms;
+  }
+}
+
+:root[data-ui-theme="blue"] {
+  --field-radius: var(--radius);
+  --field-font-size: 13px;
+  --field-line-height: 1.4;
+  --field-hover-strength: 38%;
+  --field-focus-border: var(--accent);
+  --field-focus-width: 3px;
+  --field-focus-strength: 14%;
+  --field-disabled-opacity: 0.55;
+  --field-readonly: var(--canvas);
+  --field-gap: 8px;
+  --field-trigger-width: 100%;
+  --field-label-size: 13px;
+  --field-message-size: 12px;
+  --select-width: 168px;
+  --popup-background: var(--elevated);
+  --popup-border: var(--border-strong);
+  --popup-radius: calc(var(--radius) + 2px);
+  --popup-shadow: var(--shadow-lg);
+  --dialog-width: 520px;
+  --dialog-wide-width: 720px;
+  --dialog-inset: 40px;
+  --dialog-header-padding: 18px 22px;
+  --dialog-body-padding: 22px;
+  --dialog-header-border: 1px solid var(--border);
+  --dialog-title-size: 15px;
+  --page-max-width: none;
+  --page-margin: 0;
+  --page-inset: 0;
+  --page-wide-top: 0;
+  --page-heading-align: flex-start;
+  --page-title-size: 28px;
+  --page-small-title: 25px;
+  --segment-radius: var(--radius);
+  --segment-background: var(--canvas);
+  --segment-height-min: 32px;
+  --segment-selected-color: var(--accent);
+  --tab-height-min: var(--control-height);
+  --blocked-padding: 4px;
+  --blocked-border: 1px solid var(--border);
+  --blocked-background: var(--canvas);
+  --blocked-radius: var(--radius);
+  --blocked-selected: var(--surface);
+  --blocked-shadow: var(--shadow-sm);
+  --blocked-height: 30px;
+  --blocked-button-padding: 5px 14px;
+  --vertical-tab-width: 140px;
+  --tab-selected-color: var(--accent);
+}
+
+:root[data-ui-theme="blue"] {
+  --page-title-line-height: 1.3;
+  --blocked-width: fit-content;
+  --blocked-min-width: 0;
+}
+
+:root[data-ui-theme="blue"] {
+  --specimen-shadow: var(--shadow);
+  --specimen-radius: var(--radius-lg);
+  --card-shadow: var(--shadow);
+}
+
+:root[data-ui-theme="blue"] {
+  --icon-stroke: 1.75;
+  --button-icon-size: 16px;
+}
+
+:root[data-ui-theme="blue"] {
+  --app-background: var(--canvas);
+}

package/styles/desktop.css

@@ -0,0 +1,2 @@
+/* Compatibility entry. Select a visual theme with ThemeProvider. */
+@import "./minimal.css";