@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/styles/minimal.css

@@ -0,0 +1,337 @@
+:root[data-ui-theme="minimal"] {
+  color-scheme: light;
+  --surface: #fff;
+  --fg: #202020;
+  --soft: #f6f6f6;
+  --muted: #767676;
+  --line: #eaeaea;
+  --separator-width: 1px;
+  --separator-style: solid;
+  --separator-color: color-mix(in srgb, var(--fg) 9%, var(--surface));
+  --hover: #f2f2f2;
+  --selected: #eaeaea;
+  --accent: #303030;
+  --on-accent: #fff;
+  --navigation: #f6f6f6;
+  --canvas: #fafafa;
+  --field: #fff;
+  --disabled: #aaa;
+  --success: #36815c;
+  --danger: #bd4848;
+  --warning: #a47628;
+  --radius: 10px;
+  --control-height: 34px;
+  --menu-item-height: var(--control-height);
+  --menu-item-line-height: 20px;
+  --menu-item-padding-x: 10px;
+  --menu-item-gap: 9px;
+  --menu-item-spacing: 1px;
+  --menu-item-icon-size: 16px;
+  --menu-item-font-size: 12px;
+  --menu-shortcut-font-size: 11px;
+  --menu-shortcut-line-height: 18px;
+  --menu-disabled-opacity: 0.42;
+  --control-small: 28px;
+  --row-height: 68px;
+  --page-padding: 32px;
+  --sidebar-width: 222px;
+  --shadow-sm: 0 2px 6px var(--shadow-soft), 0 1px 2px var(--shadow-detail);
+  --shadow-soft: #00000008;
+  --shadow-detail: #00000006;
+  --shadow-float: #0000000a;
+  --shadow-edge: #00000008;
+  --shadow-modal: #00000018;
+  --shadow: 0 4px 18px var(--shadow-float), 0 1px 4px var(--shadow-edge);
+  --shadow-dialog: 0 24px 70px var(--shadow-modal),
+    0 6px 20px var(--shadow-float);
+  --overlay: #00000026;
+  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-page: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --motion-hover: 140ms;
+  --motion-press: 90ms;
+  --motion-chevron: 180ms;
+  --motion-segment: 220ms;
+  --motion-page: 180ms;
+  --motion-panel: 220ms;
+  --popup-enter: 180ms;
+  --popup-exit: 120ms;
+  --ui-font: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI",
+    sans-serif;
+}
+:root[data-ui-theme="minimal"][data-theme="dark"] {
+  color-scheme: dark;
+  --surface: #1e1e1f;
+  --fg: #f4f4f5;
+  --soft: #262626;
+  --muted: #ababab;
+  --line: #373737;
+  --hover: #303030;
+  --selected: #3a3a3a;
+  --navigation: #181819;
+  --canvas: #202021;
+  --field: #252526;
+  --disabled: #686868;
+  --success: #8fbc9d;
+  --danger: #e68b8b;
+  --warning: #cfb17c;
+  --shadow-soft: #0003;
+  --shadow-detail: #0002;
+  --shadow-float: #0006;
+  --shadow-edge: #0004;
+  --shadow-modal: #0008;
+  --overlay: #0007;
+}
+:root[data-ui-theme="minimal"][data-density="compact"] {
+  --control-height: 30px;
+  --control-small: 26px;
+  --row-height: 56px;
+  --page-padding: 24px;
+}
+:root[data-ui-theme="minimal"][data-motion="off"] {
+  --motion-press: 0ms;
+  --motion-chevron: 0ms;
+  --motion-segment: 0ms;
+  --motion-hover: 0ms;
+  --motion-page: 0ms;
+  --motion-panel: 0ms;
+  --popup-enter: 0ms;
+  --popup-exit: 0ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root[data-ui-theme="minimal"] {
+    --motion-press: 0ms;
+    --motion-chevron: 0ms;
+    --motion-segment: 0ms;
+    --motion-hover: 0ms;
+    --motion-page: 0ms;
+    --motion-panel: 0ms;
+    --popup-enter: 0ms;
+    --popup-exit: 0ms;
+  }
+}
+
+@property --surface {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #fff;
+}
+@property --fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #202020;
+}
+@property --soft {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f6f6f6;
+}
+@property --muted {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #767676;
+}
+@property --line {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #eaeaea;
+}
+@property --hover {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f2f2f2;
+}
+@property --selected {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #eaeaea;
+}
+@property --accent {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #303030;
+}
+@property --on-accent {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #fff;
+}
+@property --navigation {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f6f6f6;
+}
+@property --canvas {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #fafafa;
+}
+@property --field {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #fff;
+}
+@property --disabled {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #aaa;
+}
+@property --success {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #36815c;
+}
+@property --danger {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #bd4848;
+}
+@property --warning {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #a47628;
+}
+:root[data-ui-theme="minimal"][data-theme-ready="true"] {
+  transition:
+    --surface 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --fg 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --soft 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --muted 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --line 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --hover 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --selected 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --accent 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --on-accent 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --navigation 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --canvas 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --field 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --disabled 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --success 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --danger 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --warning 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --shadow-soft 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --shadow-detail 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --shadow-float 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --shadow-edge 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --shadow-modal 260ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    --overlay 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+:root[data-ui-theme="minimal"][data-theme-changing="true"] * {
+  transition-property: transform, translate, opacity, width, height,
+    grid-template-rows, box-shadow, visibility !important;
+}
+:root[data-ui-theme="minimal"][data-motion="off"] {
+  transition: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root[data-ui-theme="minimal"] {
+    transition: none !important;
+  }
+}
+
+@property --shadow-soft {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #00000008;
+}
+@property --shadow-detail {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #00000006;
+}
+@property --shadow-float {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #0000000a;
+}
+@property --shadow-edge {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #00000008;
+}
+@property --shadow-modal {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #00000018;
+}
+@property --overlay {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #00000026;
+}
+
+:root[data-ui-theme="minimal"] {
+  --field-radius: max(4px, calc(var(--radius) - 3px));
+  --field-font-size: 12px;
+  --field-line-height: 1.55;
+  --field-hover-strength: 25%;
+  --field-focus-border: color-mix(in srgb, var(--accent) 60%, var(--surface));
+  --field-focus-width: 2px;
+  --field-focus-strength: 12%;
+  --field-disabled-opacity: 0.45;
+  --field-readonly: var(--field);
+  --field-gap: 7px;
+  --field-trigger-width: auto;
+  --field-label-size: 12px;
+  --field-message-size: 11px;
+  --select-width: auto;
+  --popup-background: var(--surface);
+  --popup-border: var(--line);
+  --popup-radius: var(--radius);
+  --popup-shadow: var(--shadow);
+  --dialog-width: 460px;
+  --dialog-wide-width: 620px;
+  --dialog-inset: 70px;
+  --dialog-header-padding: 18px 20px 8px;
+  --dialog-body-padding: 16px 22px 24px;
+  --dialog-header-border: 0;
+  --dialog-title-size: 15px;
+  --page-max-width: 1080px;
+  --page-margin: 0 auto;
+  --page-inset: var(--page-padding) var(--page-padding) 48px;
+  --page-wide-top: 45px;
+  --page-heading-align: center;
+  --page-title-size: 27px;
+  --page-small-title: 27px;
+  --segment-radius: calc(var(--radius) - 2px);
+  --segment-background: var(--soft);
+  --segment-height-min: 26px;
+  --segment-selected-color: var(--fg);
+  --tab-height-min: 34px;
+  --blocked-padding: 0;
+  --blocked-border: 0;
+  --blocked-background: transparent;
+  --blocked-radius: 0;
+  --blocked-selected: var(--selected);
+  --blocked-shadow: none;
+  --blocked-height: 34px;
+  --blocked-button-padding: 7px 12px;
+  --vertical-tab-width: 112px;
+  --tab-selected-color: var(--fg);
+  --text: var(--fg);
+  --border: var(--line);
+  --border-strong: var(--line);
+  --accent-soft: var(--selected);
+  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface));
+}
+
+:root[data-ui-theme="minimal"] {
+  --page-title-line-height: 1.55;
+  --blocked-width: max-content;
+  --blocked-min-width: 100%;
+  --dialog-title-size: 16px;
+}
+
+:root[data-ui-theme="minimal"] {
+  --specimen-shadow: none;
+  --specimen-radius: var(--radius);
+  --card-shadow: none;
+}
+
+:root[data-ui-theme="minimal"] {
+  --icon-stroke: 1.65;
+  --button-icon-size: 17px;
+}
+
+:root[data-ui-theme="minimal"] {
+  --app-background: var(--surface);
+}

package/styles/themes.css

@@ -0,0 +1,2 @@
+@import "./minimal.css";
+@import "./blue.css";

package/styles/web.css

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