@owodesign/owoui 0.1.4 → 0.1.5

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.
Files changed (43) hide show
  1. package/README.md +19 -9
  2. package/dist/preset-default.css +143 -0
  3. package/dist/preset-elevated.css +164 -0
  4. package/dist/preset-flat.css +144 -0
  5. package/dist/preset-glass.css +173 -0
  6. package/dist/storybook-static/app.css +609 -829
  7. package/dist/storybook-static/assets/main.css +2 -2
  8. package/dist/storybook-static/assets/main.js +12 -12
  9. package/dist/style.css +2988 -0
  10. package/dist/theme-dark.css +230 -0
  11. package/{src/styles/tokens.css → dist/theme-light.css} +109 -149
  12. package/dist/tokens.css +118 -0
  13. package/dist/tokens.d.ts +4 -1
  14. package/dist/tokens.min.js +1 -1
  15. package/package.json +25 -30
  16. package/src/preset-default.css +0 -27
  17. package/src/preset-elevated.css +0 -27
  18. package/src/preset-flat.css +0 -27
  19. package/src/preset-glass.css +0 -27
  20. package/src/style.css +0 -22
  21. package/src/styles/ui/avatar.css +0 -13
  22. package/src/styles/ui/badge.css +0 -52
  23. package/src/styles/ui/button.css +0 -49
  24. package/src/styles/ui/collapsible.css +0 -13
  25. package/src/styles/ui/dialog.css +0 -37
  26. package/src/styles/ui/drawer.css +0 -15
  27. package/src/styles/ui/dropdown-menu.css +0 -132
  28. package/src/styles/ui/field.css +0 -12
  29. package/src/styles/ui/icon-button.css +0 -29
  30. package/src/styles/ui/input.css +0 -16
  31. package/src/styles/ui/panel.css +0 -23
  32. package/src/styles/ui/segmented-control.css +0 -28
  33. package/src/styles/ui/select.css +0 -52
  34. package/src/styles/ui/skeleton.css +0 -99
  35. package/src/styles/ui/status-notice.css +0 -49
  36. package/src/styles/ui/switch.css +0 -17
  37. package/src/styles/ui/tabs.css +0 -33
  38. package/src/styles/ui/textarea.css +0 -8
  39. package/src/styles/ui/toast.css +0 -57
  40. package/src/styles/ui/tooltip.css +0 -31
  41. package/src/theme-dark.css +0 -87
  42. package/src/theme-light.css +0 -103
  43. package/src/tokens.css +0 -1
package/dist/storybook-static/app.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
2
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
3
3
  @layer properties;
4
4
  @layer theme, base, components, utilities;
@@ -56,6 +56,10 @@
56
56
  --owo-ref-color-neutral-700: #4a4a4a;
57
57
  --owo-ref-color-neutral-600: #71717a;
58
58
  --owo-ref-color-neutral-500: #a1a1aa;
59
+ --owo-ref-color-neutral-400: #d4d4d8;
60
+ --owo-ref-color-neutral-300: #e4e4e7;
61
+ --owo-ref-color-neutral-200: #f0f0f2;
62
+ --owo-ref-color-neutral-100: #f8f8f9;
59
63
  --owo-ref-color-brand-primary: #1a1a1a;
60
64
  --owo-ref-color-brand-primary-hover: #000000;
61
65
  --owo-ref-color-surface-canvas: #ffffff;
@@ -65,7 +69,6 @@
65
69
  --owo-ref-color-surface-inset: #f5f5f4;
66
70
  --owo-ref-color-surface-border: #e5e7eb;
67
71
  --owo-ref-color-surface-ring: #d6d3d1;
68
- --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
69
72
  --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
70
73
  --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
71
74
  --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
@@ -422,6 +425,9 @@
422
425
  .block {
423
426
  display: block;
424
427
  }
428
+ .contents {
429
+ display: contents;
430
+ }
425
431
  .flex {
426
432
  display: flex;
427
433
  }
@@ -1627,160 +1633,390 @@
1627
1633
  --owo-cmp-z-dropdown: 1000;
1628
1634
  --owo-cmp-z-modal: 1100;
1629
1635
  --owo-cmp-z-toast: 1200;
1630
- --content-min-width: 320px;
1631
- --content-preferred-width: 70vw;
1632
- --content-max-width: 960px;
1633
- --content-width: clamp(600px, 70vw, 960px);
1634
- --content-padding: 24px;
1635
- --header-top-margin: 64px;
1636
- --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
1637
- --publish-trigger-border: var(--owo-cmp-surface-border);
1638
- --publish-trigger-text: var(--owo-cmp-text-primary);
1639
- --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
1640
- --publish-popover-bg: var(--owo-cmp-surface-bg);
1641
- --publish-popover-border: var(--owo-cmp-surface-border);
1642
- --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
1643
- --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
1644
- --publish-section-border: var(--owo-cmp-surface-border);
1645
- --publish-fact-title: var(--owo-cmp-text-secondary);
1646
- --publish-fact-value: var(--owo-ref-color-neutral-900);
1647
- --publish-muted-text: var(--owo-cmp-text-secondary);
1648
- --publish-warning-bg: var(--owo-cmp-warning-bg);
1649
- --publish-warning-border: var(--owo-cmp-warning-border);
1650
- --publish-warning-text: var(--owo-cmp-warning-text);
1651
- --publish-danger-bg: var(--owo-cmp-danger-bg);
1652
- --publish-danger-border: var(--owo-cmp-danger-border);
1653
- --publish-danger-text: var(--owo-cmp-danger-text);
1654
- --publish-success-bg: var(--owo-cmp-success-bg);
1655
- --publish-success-border: var(--owo-cmp-success-border);
1656
- --publish-success-text: var(--owo-cmp-success-text);
1657
- --publish-progress-track: var(--owo-cmp-surface-bg-inset);
1658
- --publish-progress-fill: var(--owo-cmp-accent-bg);
1659
- --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
1660
- --feedback-neutral-border: var(--owo-cmp-surface-border);
1661
- --feedback-neutral-text: var(--owo-cmp-text-primary);
1662
- --feedback-neutral-icon: var(--owo-cmp-text-secondary);
1663
- --feedback-info-bg: var(--owo-cmp-info-bg);
1664
- --feedback-info-border: var(--owo-cmp-info-border);
1665
- --feedback-info-text: var(--owo-cmp-info-text);
1666
- --feedback-info-icon: var(--owo-cmp-info-text);
1667
- --feedback-success-bg: var(--owo-cmp-success-bg);
1668
- --feedback-success-border: var(--owo-cmp-success-border);
1669
- --feedback-success-text: var(--owo-cmp-success-text);
1670
- --feedback-success-icon: var(--owo-cmp-success-text);
1671
- --feedback-warning-bg: var(--owo-cmp-warning-bg);
1672
- --feedback-warning-border: var(--owo-cmp-warning-border);
1673
- --feedback-warning-text: var(--owo-cmp-warning-text);
1674
- --feedback-warning-icon: var(--owo-cmp-warning-text);
1675
- --feedback-danger-bg: var(--owo-cmp-danger-bg);
1676
- --feedback-danger-border: var(--owo-cmp-danger-border);
1677
- --feedback-danger-text: var(--owo-cmp-danger-text);
1678
- --feedback-danger-icon: var(--owo-cmp-danger-text);
1679
- --toast-shadow: var(--owo-cmp-surface-shadow-strong);
1680
- --skeleton-bg: linear-gradient(
1681
- 180deg,
1682
- var(--owo-cmp-surface-bg-inset) 0%,
1683
- var(--owo-cmp-surface-bg-inset) 100%
1684
- );
1685
- @supports (color: color-mix(in lab, red, red)) {
1686
- --skeleton-bg: linear-gradient(
1687
- 180deg,
1688
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
1689
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
1690
- );
1691
- }
1692
- --skeleton-bg-emphasis: linear-gradient(
1693
- 180deg,
1694
- var(--owo-cmp-surface-bg-subtle) 0%,
1695
- var(--owo-cmp-surface-bg-inset) 100%
1696
- );
1697
- @supports (color: color-mix(in lab, red, red)) {
1698
- --skeleton-bg-emphasis: linear-gradient(
1699
- 180deg,
1700
- color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
1701
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
1702
- );
1703
- }
1704
- --skeleton-sheen: linear-gradient(
1705
- 100deg,
1706
- transparent 0%,
1707
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
1708
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
1709
- var(--owo-ref-color-highlight-sheen) 50%,
1710
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
1711
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
1712
- transparent 100%
1713
- );
1636
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
1637
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
1638
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
1639
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
1640
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
1641
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
1642
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
1643
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
1644
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
1645
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
1646
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
1647
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
1648
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
1649
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
1650
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
1651
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
1652
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
1653
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
1654
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
1655
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
1656
+ }
1657
+ :root {
1658
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
1659
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
1660
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
1661
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
1662
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
1663
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
1664
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
1665
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
1666
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
1667
+ --owo-sys-preset-surface-blur: 0px;
1668
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
1669
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
1670
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
1671
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
1672
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
1673
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
1674
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
1675
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
1676
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
1677
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
1678
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
1679
+ --owo-sys-preset-control-border-width: 1px;
1680
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
1681
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
1682
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
1683
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
1684
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
1685
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
1686
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
1687
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
1688
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
1689
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
1690
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
1691
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
1692
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
1693
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
1694
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
1695
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
1696
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
1697
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
1698
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
1699
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
1700
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
1701
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
1702
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
1703
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
1704
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
1705
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
1706
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
1707
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
1708
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
1709
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
1710
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
1711
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
1712
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
1713
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
1714
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
1715
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
1716
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
1717
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
1718
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
1719
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
1720
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
1721
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
1722
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
1723
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
1724
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
1725
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
1726
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
1727
+ --owo-cmp-motion-duration-fast: 0.15s;
1728
+ --owo-cmp-motion-duration-default: 0.2s;
1729
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
1730
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
1731
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
1732
+ --owo-cmp-density-compact: 0.875;
1733
+ --owo-cmp-density-default: 1;
1734
+ --owo-cmp-density-comfortable: 1.125;
1735
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
1736
+ --owo-cmp-z-dropdown: 1000;
1737
+ --owo-cmp-z-modal: 1100;
1738
+ --owo-cmp-z-toast: 1200;
1739
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
1740
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
1741
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
1742
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
1743
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
1744
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
1745
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
1746
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
1747
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
1748
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
1749
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
1750
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
1751
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
1752
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
1753
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
1754
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
1755
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
1756
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
1757
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
1758
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
1759
+ }
1760
+ :root, :root[data-theme="light"], .owoui-theme-light {
1761
+ --owo-ref-color-neutral-900: #1a1a1a;
1762
+ --owo-ref-color-neutral-800: #2d2d2d;
1763
+ --owo-ref-color-neutral-700: #4a4a4a;
1764
+ --owo-ref-color-neutral-600: #71717a;
1765
+ --owo-ref-color-neutral-500: #a1a1aa;
1766
+ --owo-ref-color-neutral-400: #d4d4d8;
1767
+ --owo-ref-color-neutral-300: #e4e4e7;
1768
+ --owo-ref-color-neutral-200: #f0f0f2;
1769
+ --owo-ref-color-neutral-100: #f8f8f9;
1770
+ --owo-ref-color-brand-primary: #1a1a1a;
1771
+ --owo-ref-color-brand-primary-hover: #000000;
1772
+ --owo-ref-color-brand-accent: #4a4a4a;
1773
+ --owo-ref-color-surface-canvas: #ffffff;
1774
+ --owo-ref-color-surface-base: #ffffff;
1775
+ --owo-ref-color-surface-subtle: #fafaf9;
1776
+ --owo-ref-color-surface-raised: #ffffff;
1777
+ --owo-ref-color-surface-inset: #f5f5f4;
1778
+ --owo-ref-color-surface-border: #e5e7eb;
1779
+ --owo-ref-color-surface-ring: #d6d3d1;
1780
+ --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.4);
1781
+ --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
1782
+ --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
1783
+ --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
1784
+ --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
1785
+ --owo-ref-color-text-on-brand: #ffffff;
1786
+ --owo-ref-color-code-block-bg: #f4f4f5;
1787
+ --owo-ref-color-code-block-border: #e4e4e7;
1788
+ --owo-ref-color-code-block-divider: #ececed;
1789
+ --owo-ref-color-code-inline-bg: #f4f4f5;
1790
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
1791
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
1792
+ --owo-ref-color-status-success-text: #047857;
1793
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
1794
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
1795
+ --owo-ref-color-status-warning-text: #b45309;
1796
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
1797
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
1798
+ --owo-ref-color-status-danger-text: #b91c1c;
1799
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
1800
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
1801
+ --owo-ref-color-status-info-text: #0369a1;
1802
+ --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
1803
+ --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
1804
+ --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
1805
+ --owo-sys-theme-surface-raised: var(--owo-ref-color-surface-raised);
1806
+ --owo-sys-theme-surface-inset: var(--owo-ref-color-surface-inset);
1807
+ --owo-sys-theme-surface-border: var(--owo-ref-color-surface-border);
1808
+ --owo-sys-theme-surface-border-muted: rgba(0, 0, 0, 0.06);
1809
+ --owo-sys-theme-surface-border-strong: var(--owo-ref-color-surface-ring);
1810
+ --owo-sys-theme-canvas-bg-subtle: #f5f5f4;
1811
+ --owo-sys-theme-surface-container: #f4f4f5;
1812
+ --owo-sys-theme-surface-container-high: #ececed;
1813
+ --owo-sys-theme-surface-container-highest: #e4e4e7;
1814
+ --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-900);
1815
+ --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-700);
1816
+ --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-600);
1817
+ --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
1818
+ --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
1819
+ --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
1820
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, #1a1a1a 10%, #ffffff);
1714
1821
  @supports (color: color-mix(in lab, red, red)) {
1715
- --skeleton-sheen: linear-gradient(
1716
- 100deg,
1717
- transparent 0%,
1718
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
1719
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
1720
- var(--owo-ref-color-highlight-sheen) 50%,
1721
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
1722
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
1723
- transparent 100%
1724
- );
1822
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 10%, var(--owo-ref-color-surface-base));
1725
1823
  }
1726
- --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
1727
- --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
1728
- --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
1824
+ --owo-sys-theme-accent-border: color-mix(in srgb, #1a1a1a 40%, transparent);
1729
1825
  @supports (color: color-mix(in lab, red, red)) {
1730
- --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
1826
+ --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 40%, transparent);
1731
1827
  }
1732
- --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
1733
- --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
1734
- --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
1735
- }
1736
- .owo-avatar {
1737
- --avatar-bg: var(--owo-cmp-surface-bg-inset);
1738
- --avatar-text: var(--owo-cmp-text-secondary);
1739
- --avatar-border: transparent;
1740
- background: var(--avatar-bg);
1741
- color: var(--avatar-text);
1742
- border: 1px solid var(--avatar-border);
1743
- }
1744
- .owo-avatar[data-tone="subtle"] {
1745
- --avatar-bg: var(--owo-cmp-surface-bg-subtle);
1746
- --avatar-text: var(--owo-cmp-text-muted);
1747
- }
1748
- .owo-badge {
1749
- --badge-bg: var(--owo-cmp-surface-bg-inset);
1750
- --badge-text: var(--owo-cmp-text-secondary);
1751
- --badge-border: transparent;
1752
- background: var(--badge-bg);
1753
- border-color: var(--badge-border);
1754
- }
1755
- .owo-badge[data-variant="outline"] {
1756
- --badge-bg: transparent;
1757
- --badge-border: var(--owo-cmp-surface-border);
1758
- }
1759
- .owo-badge[data-tone="info"] {
1760
- --badge-bg: var(--owo-cmp-info-bg);
1761
- --badge-text: var(--owo-cmp-info-text);
1762
- --badge-border: var(--owo-cmp-info-border);
1763
- }
1764
- .owo-badge[data-tone="info"][data-variant="outline"] {
1765
- --badge-bg: transparent;
1766
- }
1767
- .owo-badge[data-tone="success"] {
1768
- --badge-bg: var(--owo-cmp-success-bg);
1769
- --badge-text: var(--owo-cmp-success-text);
1770
- --badge-border: var(--owo-cmp-success-border);
1771
- }
1772
- .owo-badge[data-tone="success"][data-variant="outline"] {
1773
- --badge-bg: transparent;
1774
- }
1775
- .owo-badge[data-tone="warning"] {
1776
- --badge-bg: var(--owo-cmp-warning-bg);
1777
- --badge-text: var(--owo-cmp-warning-text);
1778
- --badge-border: var(--owo-cmp-warning-border);
1779
- }
1780
- .owo-badge[data-tone="warning"][data-variant="outline"] {
1781
- --badge-bg: transparent;
1828
+ --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
1829
+ --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
1830
+ --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
1831
+ --owo-sys-theme-warning-bg: var(--owo-ref-color-status-warning-bg);
1832
+ --owo-sys-theme-warning-border: var(--owo-ref-color-status-warning-border);
1833
+ --owo-sys-theme-warning-text: var(--owo-ref-color-status-warning-text);
1834
+ --owo-sys-theme-danger-bg: var(--owo-ref-color-status-danger-bg);
1835
+ --owo-sys-theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
1836
+ --owo-sys-theme-danger-border: var(--owo-ref-color-status-danger-border);
1837
+ --owo-sys-theme-danger-text: var(--owo-ref-color-status-danger-text);
1838
+ --owo-sys-theme-info-bg: var(--owo-ref-color-status-info-bg);
1839
+ --owo-sys-theme-info-border: var(--owo-ref-color-status-info-border);
1840
+ --owo-sys-theme-info-text: var(--owo-ref-color-status-info-text);
1841
+ --owo-sys-theme-control-focus-ring: var(--owo-ref-color-surface-ring);
1842
+ --owo-sys-theme-control-focus-ring-offset: var(--owo-ref-color-surface-base);
1843
+ --owo-sys-theme-overlay-bg: var(--owo-ref-color-overlay-strong);
1782
1844
  }
1783
- .owo-badge[data-tone="danger"] {
1845
+ :root {
1846
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
1847
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
1848
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
1849
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
1850
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
1851
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
1852
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
1853
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
1854
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
1855
+ --owo-sys-preset-surface-blur: 0px;
1856
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
1857
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
1858
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
1859
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
1860
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
1861
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
1862
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
1863
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
1864
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
1865
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
1866
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
1867
+ --owo-sys-preset-control-border-width: 1px;
1868
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
1869
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
1870
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
1871
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
1872
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
1873
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
1874
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
1875
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
1876
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
1877
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
1878
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
1879
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
1880
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
1881
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
1882
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
1883
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
1884
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
1885
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
1886
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
1887
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
1888
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
1889
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
1890
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
1891
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
1892
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
1893
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
1894
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
1895
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
1896
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
1897
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
1898
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
1899
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
1900
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
1901
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
1902
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
1903
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
1904
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
1905
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
1906
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
1907
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
1908
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
1909
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
1910
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
1911
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
1912
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
1913
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
1914
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
1915
+ --owo-cmp-motion-duration-fast: 0.15s;
1916
+ --owo-cmp-motion-duration-default: 0.2s;
1917
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
1918
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
1919
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
1920
+ --owo-cmp-density-compact: 0.875;
1921
+ --owo-cmp-density-default: 1;
1922
+ --owo-cmp-density-comfortable: 1.125;
1923
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
1924
+ --owo-cmp-z-dropdown: 1000;
1925
+ --owo-cmp-z-modal: 1100;
1926
+ --owo-cmp-z-toast: 1200;
1927
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
1928
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
1929
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
1930
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
1931
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
1932
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
1933
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
1934
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
1935
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
1936
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
1937
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
1938
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
1939
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
1940
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
1941
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
1942
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
1943
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
1944
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
1945
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
1946
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
1947
+ }
1948
+ :root[data-preset="default"], .owoui-preset-default {
1949
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
1950
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
1951
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
1952
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
1953
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
1954
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
1955
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
1956
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
1957
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
1958
+ --owo-sys-preset-surface-blur: 0px;
1959
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
1960
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
1961
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
1962
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
1963
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
1964
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
1965
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
1966
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
1967
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
1968
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
1969
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
1970
+ --owo-sys-preset-control-border-width: 1px;
1971
+ }
1972
+ .owo-avatar {
1973
+ --avatar-bg: var(--owo-cmp-surface-bg-inset);
1974
+ --avatar-text: var(--owo-cmp-text-secondary);
1975
+ --avatar-border: transparent;
1976
+ background: var(--avatar-bg);
1977
+ color: var(--avatar-text);
1978
+ border: 1px solid var(--avatar-border);
1979
+ }
1980
+ .owo-avatar[data-tone="subtle"] {
1981
+ --avatar-bg: var(--owo-cmp-surface-bg-subtle);
1982
+ --avatar-text: var(--owo-cmp-text-muted);
1983
+ }
1984
+ .owo-badge {
1985
+ --badge-bg: var(--owo-cmp-surface-bg-inset);
1986
+ --badge-text: var(--owo-cmp-text-secondary);
1987
+ --badge-border: transparent;
1988
+ background: var(--badge-bg);
1989
+ border-color: var(--badge-border);
1990
+ }
1991
+ .owo-badge[data-variant="outline"] {
1992
+ --badge-bg: transparent;
1993
+ --badge-border: var(--owo-cmp-surface-border);
1994
+ }
1995
+ .owo-badge[data-tone="info"] {
1996
+ --badge-bg: var(--owo-cmp-info-bg);
1997
+ --badge-text: var(--owo-cmp-info-text);
1998
+ --badge-border: var(--owo-cmp-info-border);
1999
+ }
2000
+ .owo-badge[data-tone="info"][data-variant="outline"] {
2001
+ --badge-bg: transparent;
2002
+ }
2003
+ .owo-badge[data-tone="success"] {
2004
+ --badge-bg: var(--owo-cmp-success-bg);
2005
+ --badge-text: var(--owo-cmp-success-text);
2006
+ --badge-border: var(--owo-cmp-success-border);
2007
+ }
2008
+ .owo-badge[data-tone="success"][data-variant="outline"] {
2009
+ --badge-bg: transparent;
2010
+ }
2011
+ .owo-badge[data-tone="warning"] {
2012
+ --badge-bg: var(--owo-cmp-warning-bg);
2013
+ --badge-text: var(--owo-cmp-warning-text);
2014
+ --badge-border: var(--owo-cmp-warning-border);
2015
+ }
2016
+ .owo-badge[data-tone="warning"][data-variant="outline"] {
2017
+ --badge-bg: transparent;
2018
+ }
2019
+ .owo-badge[data-tone="danger"] {
1784
2020
  --badge-bg: var(--owo-cmp-danger-bg);
1785
2021
  --badge-text: var(--owo-cmp-danger-text);
1786
2022
  --badge-border: var(--owo-cmp-danger-border);
@@ -2002,7 +2238,7 @@
2002
2238
  .owo-drawer {
2003
2239
  --drawer-surface: var(--owo-cmp-surface-bg-raised);
2004
2240
  --drawer-border: var(--owo-cmp-surface-border);
2005
- --drawer-shadow: var(--drawer-panel-shadow);
2241
+ --drawer-shadow: var(--owo-cmp-surface-shadow-strong);
2006
2242
  will-change: transform;
2007
2243
  background: var(--drawer-surface);
2008
2244
  border-color: var(--drawer-border);
@@ -2137,6 +2373,7 @@
2137
2373
  color: var(--owo-cmp-text-muted);
2138
2374
  }
2139
2375
  .owo-select__dropdown {
2376
+ --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
2140
2377
  background: var(--owo-cmp-surface-bg-raised);
2141
2378
  --tw-ring-color: var(--owo-cmp-surface-border);
2142
2379
  box-shadow: var(--select-dropdown-shadow);
@@ -2150,6 +2387,53 @@
2150
2387
  }
2151
2388
  .owo-skeleton {
2152
2389
  --_owo-skeleton-scan-duration: 3.6s;
2390
+ --skeleton-bg: linear-gradient(
2391
+ 180deg,
2392
+ var(--owo-cmp-surface-bg-inset) 0%,
2393
+ var(--owo-cmp-surface-bg-inset) 100%
2394
+ );
2395
+ @supports (color: color-mix(in lab, red, red)) {
2396
+ --skeleton-bg: linear-gradient(
2397
+ 180deg,
2398
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
2399
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
2400
+ );
2401
+ }
2402
+ --skeleton-bg-emphasis: linear-gradient(
2403
+ 180deg,
2404
+ var(--owo-cmp-surface-bg-subtle) 0%,
2405
+ var(--owo-cmp-surface-bg-inset) 100%
2406
+ );
2407
+ @supports (color: color-mix(in lab, red, red)) {
2408
+ --skeleton-bg-emphasis: linear-gradient(
2409
+ 180deg,
2410
+ color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
2411
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
2412
+ );
2413
+ }
2414
+ --skeleton-sheen: linear-gradient(
2415
+ 100deg,
2416
+ transparent 0%,
2417
+ color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
2418
+ color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
2419
+ var(--owo-ref-color-highlight-sheen) 50%,
2420
+ color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
2421
+ color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
2422
+ transparent 100%
2423
+ );
2424
+ @supports (color: color-mix(in lab, red, red)) {
2425
+ --skeleton-sheen: linear-gradient(
2426
+ 100deg,
2427
+ transparent 0%,
2428
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
2429
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
2430
+ var(--owo-ref-color-highlight-sheen) 50%,
2431
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
2432
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
2433
+ transparent 100%
2434
+ );
2435
+ }
2436
+ --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
2153
2437
  position: relative;
2154
2438
  overflow: hidden;
2155
2439
  background: var(--skeleton-bg);
@@ -2231,10 +2515,10 @@
2231
2515
  }
2232
2516
  }
2233
2517
  .owo-status-notice {
2234
- --status-notice-bg: var(--feedback-neutral-bg);
2235
- --status-notice-border: var(--feedback-neutral-border);
2236
- --status-notice-text: var(--feedback-neutral-text);
2237
- --status-notice-icon: var(--feedback-neutral-icon);
2518
+ --status-notice-bg: var(--owo-feedback-neutral-bg);
2519
+ --status-notice-border: var(--owo-feedback-neutral-border);
2520
+ --status-notice-text: var(--owo-feedback-neutral-text);
2521
+ --status-notice-icon: var(--owo-feedback-neutral-icon);
2238
2522
  background: var(--status-notice-bg);
2239
2523
  border-color: var(--status-notice-border);
2240
2524
  color: var(--status-notice-text);
@@ -2249,28 +2533,28 @@
2249
2533
  color: var(--status-notice-text);
2250
2534
  }
2251
2535
  .owo-status-notice[data-tone="info"] {
2252
- --status-notice-bg: var(--feedback-info-bg);
2253
- --status-notice-border: var(--feedback-info-border);
2254
- --status-notice-text: var(--feedback-info-text);
2255
- --status-notice-icon: var(--feedback-info-icon);
2536
+ --status-notice-bg: var(--owo-feedback-info-bg);
2537
+ --status-notice-border: var(--owo-feedback-info-border);
2538
+ --status-notice-text: var(--owo-feedback-info-text);
2539
+ --status-notice-icon: var(--owo-feedback-info-icon);
2256
2540
  }
2257
2541
  .owo-status-notice[data-tone="success"] {
2258
- --status-notice-bg: var(--feedback-success-bg);
2259
- --status-notice-border: var(--feedback-success-border);
2260
- --status-notice-text: var(--feedback-success-text);
2261
- --status-notice-icon: var(--feedback-success-icon);
2542
+ --status-notice-bg: var(--owo-feedback-success-bg);
2543
+ --status-notice-border: var(--owo-feedback-success-border);
2544
+ --status-notice-text: var(--owo-feedback-success-text);
2545
+ --status-notice-icon: var(--owo-feedback-success-icon);
2262
2546
  }
2263
2547
  .owo-status-notice[data-tone="warning"] {
2264
- --status-notice-bg: var(--feedback-warning-bg);
2265
- --status-notice-border: var(--feedback-warning-border);
2266
- --status-notice-text: var(--feedback-warning-text);
2267
- --status-notice-icon: var(--feedback-warning-icon);
2548
+ --status-notice-bg: var(--owo-feedback-warning-bg);
2549
+ --status-notice-border: var(--owo-feedback-warning-border);
2550
+ --status-notice-text: var(--owo-feedback-warning-text);
2551
+ --status-notice-icon: var(--owo-feedback-warning-icon);
2268
2552
  }
2269
2553
  .owo-status-notice[data-tone="danger"] {
2270
- --status-notice-bg: var(--feedback-danger-bg);
2271
- --status-notice-border: var(--feedback-danger-border);
2272
- --status-notice-text: var(--feedback-danger-text);
2273
- --status-notice-icon: var(--feedback-danger-icon);
2554
+ --status-notice-bg: var(--owo-feedback-danger-bg);
2555
+ --status-notice-border: var(--owo-feedback-danger-border);
2556
+ --status-notice-text: var(--owo-feedback-danger-text);
2557
+ --status-notice-icon: var(--owo-feedback-danger-icon);
2274
2558
  }
2275
2559
  .owo-switch {
2276
2560
  background: var(--owo-cmp-surface-border-strong);
@@ -2328,14 +2612,15 @@
2328
2612
  overflow-y: hidden;
2329
2613
  }
2330
2614
  .owo-toast {
2331
- --toast-bg: var(--feedback-neutral-bg);
2332
- --toast-border: var(--feedback-neutral-border);
2333
- --toast-text: var(--feedback-neutral-text);
2334
- --toast-icon: var(--feedback-neutral-icon);
2615
+ --toast-bg: var(--owo-feedback-neutral-bg);
2616
+ --toast-border: var(--owo-feedback-neutral-border);
2617
+ --toast-text: var(--owo-feedback-neutral-text);
2618
+ --toast-icon: var(--owo-feedback-neutral-icon);
2335
2619
  background: var(--toast-bg);
2336
2620
  border-color: var(--toast-border);
2337
2621
  color: var(--toast-text);
2338
- box-shadow: var(--toast-shadow, var(--owo-cmp-surface-shadow-strong));
2622
+ --toast-shadow: var(--owo-cmp-surface-shadow-strong);
2623
+ box-shadow: var(--toast-shadow);
2339
2624
  }
2340
2625
  .owo-toast__icon {
2341
2626
  color: var(--toast-icon);
@@ -2344,28 +2629,28 @@
2344
2629
  color: inherit;
2345
2630
  }
2346
2631
  .owo-toast[data-tone="success"] {
2347
- --toast-bg: var(--feedback-success-bg);
2348
- --toast-border: var(--feedback-success-border);
2349
- --toast-text: var(--feedback-success-text);
2350
- --toast-icon: var(--feedback-success-icon);
2632
+ --toast-bg: var(--owo-feedback-success-bg);
2633
+ --toast-border: var(--owo-feedback-success-border);
2634
+ --toast-text: var(--owo-feedback-success-text);
2635
+ --toast-icon: var(--owo-feedback-success-icon);
2351
2636
  }
2352
2637
  .owo-toast[data-tone="warning"] {
2353
- --toast-bg: var(--feedback-warning-bg);
2354
- --toast-border: var(--feedback-warning-border);
2355
- --toast-text: var(--feedback-warning-text);
2356
- --toast-icon: var(--feedback-warning-icon);
2638
+ --toast-bg: var(--owo-feedback-warning-bg);
2639
+ --toast-border: var(--owo-feedback-warning-border);
2640
+ --toast-text: var(--owo-feedback-warning-text);
2641
+ --toast-icon: var(--owo-feedback-warning-icon);
2357
2642
  }
2358
2643
  .owo-toast[data-tone="danger"] {
2359
- --toast-bg: var(--feedback-danger-bg);
2360
- --toast-border: var(--feedback-danger-border);
2361
- --toast-text: var(--feedback-danger-text);
2362
- --toast-icon: var(--feedback-danger-icon);
2644
+ --toast-bg: var(--owo-feedback-danger-bg);
2645
+ --toast-border: var(--owo-feedback-danger-border);
2646
+ --toast-text: var(--owo-feedback-danger-text);
2647
+ --toast-icon: var(--owo-feedback-danger-icon);
2363
2648
  }
2364
2649
  .owo-toast[data-tone="info"] {
2365
- --toast-bg: var(--feedback-info-bg);
2366
- --toast-border: var(--feedback-info-border);
2367
- --toast-text: var(--feedback-info-text);
2368
- --toast-icon: var(--feedback-info-icon);
2650
+ --toast-bg: var(--owo-feedback-info-bg);
2651
+ --toast-border: var(--owo-feedback-info-border);
2652
+ --toast-text: var(--owo-feedback-info-text);
2653
+ --toast-icon: var(--owo-feedback-info-icon);
2369
2654
  }
2370
2655
  @keyframes toast-in {
2371
2656
  from {
@@ -2381,6 +2666,7 @@
2381
2666
  --tooltip-bg: var(--owo-cmp-surface-bg-raised);
2382
2667
  --tooltip-border: var(--owo-cmp-surface-border);
2383
2668
  --tooltip-text: var(--owo-cmp-text-primary);
2669
+ --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
2384
2670
  --tooltip-arrow-color: var(--tooltip-bg);
2385
2671
  background: var(--tooltip-bg);
2386
2672
  color: var(--tooltip-text);
@@ -2490,111 +2776,26 @@
2490
2776
  --owo-cmp-z-dropdown: 1000;
2491
2777
  --owo-cmp-z-modal: 1100;
2492
2778
  --owo-cmp-z-toast: 1200;
2493
- --content-min-width: 320px;
2494
- --content-preferred-width: 70vw;
2495
- --content-max-width: 960px;
2496
- --content-width: clamp(600px, 70vw, 960px);
2497
- --content-padding: 24px;
2498
- --header-top-margin: 64px;
2499
- --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
2500
- --publish-trigger-border: var(--owo-cmp-surface-border);
2501
- --publish-trigger-text: var(--owo-cmp-text-primary);
2502
- --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
2503
- --publish-popover-bg: var(--owo-cmp-surface-bg);
2504
- --publish-popover-border: var(--owo-cmp-surface-border);
2505
- --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
2506
- --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
2507
- --publish-section-border: var(--owo-cmp-surface-border);
2508
- --publish-fact-title: var(--owo-cmp-text-secondary);
2509
- --publish-fact-value: var(--owo-ref-color-neutral-900);
2510
- --publish-muted-text: var(--owo-cmp-text-secondary);
2511
- --publish-warning-bg: var(--owo-cmp-warning-bg);
2512
- --publish-warning-border: var(--owo-cmp-warning-border);
2513
- --publish-warning-text: var(--owo-cmp-warning-text);
2514
- --publish-danger-bg: var(--owo-cmp-danger-bg);
2515
- --publish-danger-border: var(--owo-cmp-danger-border);
2516
- --publish-danger-text: var(--owo-cmp-danger-text);
2517
- --publish-success-bg: var(--owo-cmp-success-bg);
2518
- --publish-success-border: var(--owo-cmp-success-border);
2519
- --publish-success-text: var(--owo-cmp-success-text);
2520
- --publish-progress-track: var(--owo-cmp-surface-bg-inset);
2521
- --publish-progress-fill: var(--owo-cmp-accent-bg);
2522
- --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
2523
- --feedback-neutral-border: var(--owo-cmp-surface-border);
2524
- --feedback-neutral-text: var(--owo-cmp-text-primary);
2525
- --feedback-neutral-icon: var(--owo-cmp-text-secondary);
2526
- --feedback-info-bg: var(--owo-cmp-info-bg);
2527
- --feedback-info-border: var(--owo-cmp-info-border);
2528
- --feedback-info-text: var(--owo-cmp-info-text);
2529
- --feedback-info-icon: var(--owo-cmp-info-text);
2530
- --feedback-success-bg: var(--owo-cmp-success-bg);
2531
- --feedback-success-border: var(--owo-cmp-success-border);
2532
- --feedback-success-text: var(--owo-cmp-success-text);
2533
- --feedback-success-icon: var(--owo-cmp-success-text);
2534
- --feedback-warning-bg: var(--owo-cmp-warning-bg);
2535
- --feedback-warning-border: var(--owo-cmp-warning-border);
2536
- --feedback-warning-text: var(--owo-cmp-warning-text);
2537
- --feedback-warning-icon: var(--owo-cmp-warning-text);
2538
- --feedback-danger-bg: var(--owo-cmp-danger-bg);
2539
- --feedback-danger-border: var(--owo-cmp-danger-border);
2540
- --feedback-danger-text: var(--owo-cmp-danger-text);
2541
- --feedback-danger-icon: var(--owo-cmp-danger-text);
2542
- --toast-shadow: var(--owo-cmp-surface-shadow-strong);
2543
- --skeleton-bg: linear-gradient(
2544
- 180deg,
2545
- var(--owo-cmp-surface-bg-inset) 0%,
2546
- var(--owo-cmp-surface-bg-inset) 100%
2547
- );
2548
- @supports (color: color-mix(in lab, red, red)) {
2549
- --skeleton-bg: linear-gradient(
2550
- 180deg,
2551
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
2552
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
2553
- );
2554
- }
2555
- --skeleton-bg-emphasis: linear-gradient(
2556
- 180deg,
2557
- var(--owo-cmp-surface-bg-subtle) 0%,
2558
- var(--owo-cmp-surface-bg-inset) 100%
2559
- );
2560
- @supports (color: color-mix(in lab, red, red)) {
2561
- --skeleton-bg-emphasis: linear-gradient(
2562
- 180deg,
2563
- color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
2564
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
2565
- );
2566
- }
2567
- --skeleton-sheen: linear-gradient(
2568
- 100deg,
2569
- transparent 0%,
2570
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
2571
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
2572
- var(--owo-ref-color-highlight-sheen) 50%,
2573
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
2574
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
2575
- transparent 100%
2576
- );
2577
- @supports (color: color-mix(in lab, red, red)) {
2578
- --skeleton-sheen: linear-gradient(
2579
- 100deg,
2580
- transparent 0%,
2581
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
2582
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
2583
- var(--owo-ref-color-highlight-sheen) 50%,
2584
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
2585
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
2586
- transparent 100%
2587
- );
2588
- }
2589
- --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
2590
- --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
2591
- --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
2592
- @supports (color: color-mix(in lab, red, red)) {
2593
- --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
2594
- }
2595
- --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
2596
- --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
2597
- --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
2779
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
2780
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
2781
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
2782
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
2783
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
2784
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
2785
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
2786
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
2787
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
2788
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
2789
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
2790
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
2791
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
2792
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
2793
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
2794
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
2795
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
2796
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
2797
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
2798
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
2598
2799
  }
2599
2800
  :root, :root[data-theme="light"], .owoui-theme-light {
2600
2801
  --owo-ref-color-neutral-900: #1a1a1a;
@@ -2604,6 +2805,8 @@
2604
2805
  --owo-ref-color-neutral-500: #a1a1aa;
2605
2806
  --owo-ref-color-neutral-400: #d4d4d8;
2606
2807
  --owo-ref-color-neutral-300: #e4e4e7;
2808
+ --owo-ref-color-neutral-200: #f0f0f2;
2809
+ --owo-ref-color-neutral-100: #f8f8f9;
2607
2810
  --owo-ref-color-brand-primary: #1a1a1a;
2608
2811
  --owo-ref-color-brand-primary-hover: #000000;
2609
2812
  --owo-ref-color-brand-accent: #4a4a4a;
@@ -2648,9 +2851,9 @@
2648
2851
  --owo-sys-theme-surface-container: #f4f4f5;
2649
2852
  --owo-sys-theme-surface-container-high: #ececed;
2650
2853
  --owo-sys-theme-surface-container-highest: #e4e4e7;
2651
- --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-800);
2652
- --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-600);
2653
- --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-500);
2854
+ --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-900);
2855
+ --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-700);
2856
+ --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-600);
2654
2857
  --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
2655
2858
  --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
2656
2859
  --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
@@ -2761,111 +2964,26 @@
2761
2964
  --owo-cmp-z-dropdown: 1000;
2762
2965
  --owo-cmp-z-modal: 1100;
2763
2966
  --owo-cmp-z-toast: 1200;
2764
- --content-min-width: 320px;
2765
- --content-preferred-width: 70vw;
2766
- --content-max-width: 960px;
2767
- --content-width: clamp(600px, 70vw, 960px);
2768
- --content-padding: 24px;
2769
- --header-top-margin: 64px;
2770
- --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
2771
- --publish-trigger-border: var(--owo-cmp-surface-border);
2772
- --publish-trigger-text: var(--owo-cmp-text-primary);
2773
- --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
2774
- --publish-popover-bg: var(--owo-cmp-surface-bg);
2775
- --publish-popover-border: var(--owo-cmp-surface-border);
2776
- --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
2777
- --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
2778
- --publish-section-border: var(--owo-cmp-surface-border);
2779
- --publish-fact-title: var(--owo-cmp-text-secondary);
2780
- --publish-fact-value: var(--owo-ref-color-neutral-900);
2781
- --publish-muted-text: var(--owo-cmp-text-secondary);
2782
- --publish-warning-bg: var(--owo-cmp-warning-bg);
2783
- --publish-warning-border: var(--owo-cmp-warning-border);
2784
- --publish-warning-text: var(--owo-cmp-warning-text);
2785
- --publish-danger-bg: var(--owo-cmp-danger-bg);
2786
- --publish-danger-border: var(--owo-cmp-danger-border);
2787
- --publish-danger-text: var(--owo-cmp-danger-text);
2788
- --publish-success-bg: var(--owo-cmp-success-bg);
2789
- --publish-success-border: var(--owo-cmp-success-border);
2790
- --publish-success-text: var(--owo-cmp-success-text);
2791
- --publish-progress-track: var(--owo-cmp-surface-bg-inset);
2792
- --publish-progress-fill: var(--owo-cmp-accent-bg);
2793
- --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
2794
- --feedback-neutral-border: var(--owo-cmp-surface-border);
2795
- --feedback-neutral-text: var(--owo-cmp-text-primary);
2796
- --feedback-neutral-icon: var(--owo-cmp-text-secondary);
2797
- --feedback-info-bg: var(--owo-cmp-info-bg);
2798
- --feedback-info-border: var(--owo-cmp-info-border);
2799
- --feedback-info-text: var(--owo-cmp-info-text);
2800
- --feedback-info-icon: var(--owo-cmp-info-text);
2801
- --feedback-success-bg: var(--owo-cmp-success-bg);
2802
- --feedback-success-border: var(--owo-cmp-success-border);
2803
- --feedback-success-text: var(--owo-cmp-success-text);
2804
- --feedback-success-icon: var(--owo-cmp-success-text);
2805
- --feedback-warning-bg: var(--owo-cmp-warning-bg);
2806
- --feedback-warning-border: var(--owo-cmp-warning-border);
2807
- --feedback-warning-text: var(--owo-cmp-warning-text);
2808
- --feedback-warning-icon: var(--owo-cmp-warning-text);
2809
- --feedback-danger-bg: var(--owo-cmp-danger-bg);
2810
- --feedback-danger-border: var(--owo-cmp-danger-border);
2811
- --feedback-danger-text: var(--owo-cmp-danger-text);
2812
- --feedback-danger-icon: var(--owo-cmp-danger-text);
2813
- --toast-shadow: var(--owo-cmp-surface-shadow-strong);
2814
- --skeleton-bg: linear-gradient(
2815
- 180deg,
2816
- var(--owo-cmp-surface-bg-inset) 0%,
2817
- var(--owo-cmp-surface-bg-inset) 100%
2818
- );
2819
- @supports (color: color-mix(in lab, red, red)) {
2820
- --skeleton-bg: linear-gradient(
2821
- 180deg,
2822
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
2823
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
2824
- );
2825
- }
2826
- --skeleton-bg-emphasis: linear-gradient(
2827
- 180deg,
2828
- var(--owo-cmp-surface-bg-subtle) 0%,
2829
- var(--owo-cmp-surface-bg-inset) 100%
2830
- );
2831
- @supports (color: color-mix(in lab, red, red)) {
2832
- --skeleton-bg-emphasis: linear-gradient(
2833
- 180deg,
2834
- color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
2835
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
2836
- );
2837
- }
2838
- --skeleton-sheen: linear-gradient(
2839
- 100deg,
2840
- transparent 0%,
2841
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
2842
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
2843
- var(--owo-ref-color-highlight-sheen) 50%,
2844
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
2845
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
2846
- transparent 100%
2847
- );
2848
- @supports (color: color-mix(in lab, red, red)) {
2849
- --skeleton-sheen: linear-gradient(
2850
- 100deg,
2851
- transparent 0%,
2852
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
2853
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
2854
- var(--owo-ref-color-highlight-sheen) 50%,
2855
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
2856
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
2857
- transparent 100%
2858
- );
2859
- }
2860
- --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
2861
- --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
2862
- --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
2863
- @supports (color: color-mix(in lab, red, red)) {
2864
- --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
2865
- }
2866
- --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
2867
- --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
2868
- --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
2967
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
2968
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
2969
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
2970
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
2971
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
2972
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
2973
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
2974
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
2975
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
2976
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
2977
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
2978
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
2979
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
2980
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
2981
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
2982
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
2983
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
2984
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
2985
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
2986
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
2869
2987
  }
2870
2988
  :root[data-theme="dark"], .owoui-theme-dark {
2871
2989
  --owo-ref-color-neutral-900: #fafafa;
@@ -2875,6 +2993,8 @@
2875
2993
  --owo-ref-color-neutral-500: #71717a;
2876
2994
  --owo-ref-color-neutral-400: #3f3f46;
2877
2995
  --owo-ref-color-neutral-300: #27272a;
2996
+ --owo-ref-color-neutral-200: #1f1f22;
2997
+ --owo-ref-color-neutral-100: #18181a;
2878
2998
  --owo-ref-color-brand-primary: #c6c6c7;
2879
2999
  --owo-ref-color-brand-primary-hover: #d4d4d8;
2880
3000
  --owo-ref-color-brand-accent: #a1a1aa;
@@ -2919,9 +3039,9 @@
2919
3039
  --owo-sys-theme-surface-container: #1e1e22;
2920
3040
  --owo-sys-theme-surface-container-high: #252529;
2921
3041
  --owo-sys-theme-surface-container-highest: #2d2d32;
2922
- --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-800);
2923
- --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-600);
2924
- --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-500);
3042
+ --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-900);
3043
+ --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-700);
3044
+ --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-600);
2925
3045
  --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
2926
3046
  --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
2927
3047
  --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
@@ -3032,111 +3152,26 @@
3032
3152
  --owo-cmp-z-dropdown: 1000;
3033
3153
  --owo-cmp-z-modal: 1100;
3034
3154
  --owo-cmp-z-toast: 1200;
3035
- --content-min-width: 320px;
3036
- --content-preferred-width: 70vw;
3037
- --content-max-width: 960px;
3038
- --content-width: clamp(600px, 70vw, 960px);
3039
- --content-padding: 24px;
3040
- --header-top-margin: 64px;
3041
- --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
3042
- --publish-trigger-border: var(--owo-cmp-surface-border);
3043
- --publish-trigger-text: var(--owo-cmp-text-primary);
3044
- --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
3045
- --publish-popover-bg: var(--owo-cmp-surface-bg);
3046
- --publish-popover-border: var(--owo-cmp-surface-border);
3047
- --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
3048
- --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
3049
- --publish-section-border: var(--owo-cmp-surface-border);
3050
- --publish-fact-title: var(--owo-cmp-text-secondary);
3051
- --publish-fact-value: var(--owo-ref-color-neutral-900);
3052
- --publish-muted-text: var(--owo-cmp-text-secondary);
3053
- --publish-warning-bg: var(--owo-cmp-warning-bg);
3054
- --publish-warning-border: var(--owo-cmp-warning-border);
3055
- --publish-warning-text: var(--owo-cmp-warning-text);
3056
- --publish-danger-bg: var(--owo-cmp-danger-bg);
3057
- --publish-danger-border: var(--owo-cmp-danger-border);
3058
- --publish-danger-text: var(--owo-cmp-danger-text);
3059
- --publish-success-bg: var(--owo-cmp-success-bg);
3060
- --publish-success-border: var(--owo-cmp-success-border);
3061
- --publish-success-text: var(--owo-cmp-success-text);
3062
- --publish-progress-track: var(--owo-cmp-surface-bg-inset);
3063
- --publish-progress-fill: var(--owo-cmp-accent-bg);
3064
- --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3065
- --feedback-neutral-border: var(--owo-cmp-surface-border);
3066
- --feedback-neutral-text: var(--owo-cmp-text-primary);
3067
- --feedback-neutral-icon: var(--owo-cmp-text-secondary);
3068
- --feedback-info-bg: var(--owo-cmp-info-bg);
3069
- --feedback-info-border: var(--owo-cmp-info-border);
3070
- --feedback-info-text: var(--owo-cmp-info-text);
3071
- --feedback-info-icon: var(--owo-cmp-info-text);
3072
- --feedback-success-bg: var(--owo-cmp-success-bg);
3073
- --feedback-success-border: var(--owo-cmp-success-border);
3074
- --feedback-success-text: var(--owo-cmp-success-text);
3075
- --feedback-success-icon: var(--owo-cmp-success-text);
3076
- --feedback-warning-bg: var(--owo-cmp-warning-bg);
3077
- --feedback-warning-border: var(--owo-cmp-warning-border);
3078
- --feedback-warning-text: var(--owo-cmp-warning-text);
3079
- --feedback-warning-icon: var(--owo-cmp-warning-text);
3080
- --feedback-danger-bg: var(--owo-cmp-danger-bg);
3081
- --feedback-danger-border: var(--owo-cmp-danger-border);
3082
- --feedback-danger-text: var(--owo-cmp-danger-text);
3083
- --feedback-danger-icon: var(--owo-cmp-danger-text);
3084
- --toast-shadow: var(--owo-cmp-surface-shadow-strong);
3085
- --skeleton-bg: linear-gradient(
3086
- 180deg,
3087
- var(--owo-cmp-surface-bg-inset) 0%,
3088
- var(--owo-cmp-surface-bg-inset) 100%
3089
- );
3090
- @supports (color: color-mix(in lab, red, red)) {
3091
- --skeleton-bg: linear-gradient(
3092
- 180deg,
3093
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
3094
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
3095
- );
3096
- }
3097
- --skeleton-bg-emphasis: linear-gradient(
3098
- 180deg,
3099
- var(--owo-cmp-surface-bg-subtle) 0%,
3100
- var(--owo-cmp-surface-bg-inset) 100%
3101
- );
3102
- @supports (color: color-mix(in lab, red, red)) {
3103
- --skeleton-bg-emphasis: linear-gradient(
3104
- 180deg,
3105
- color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
3106
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
3107
- );
3108
- }
3109
- --skeleton-sheen: linear-gradient(
3110
- 100deg,
3111
- transparent 0%,
3112
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
3113
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
3114
- var(--owo-ref-color-highlight-sheen) 50%,
3115
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
3116
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
3117
- transparent 100%
3118
- );
3119
- @supports (color: color-mix(in lab, red, red)) {
3120
- --skeleton-sheen: linear-gradient(
3121
- 100deg,
3122
- transparent 0%,
3123
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
3124
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
3125
- var(--owo-ref-color-highlight-sheen) 50%,
3126
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
3127
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
3128
- transparent 100%
3129
- );
3130
- }
3131
- --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
3132
- --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
3133
- --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
3134
- @supports (color: color-mix(in lab, red, red)) {
3135
- --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
3136
- }
3137
- --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
3138
- --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
3139
- --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
3155
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3156
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
3157
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
3158
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
3159
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
3160
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
3161
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
3162
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
3163
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
3164
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
3165
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
3166
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
3167
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
3168
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
3169
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
3170
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
3171
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
3172
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
3173
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
3174
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
3140
3175
  }
3141
3176
  :root[data-preset="default"], .owoui-preset-default {
3142
3177
  --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
@@ -3244,111 +3279,26 @@
3244
3279
  --owo-cmp-z-dropdown: 1000;
3245
3280
  --owo-cmp-z-modal: 1100;
3246
3281
  --owo-cmp-z-toast: 1200;
3247
- --content-min-width: 320px;
3248
- --content-preferred-width: 70vw;
3249
- --content-max-width: 960px;
3250
- --content-width: clamp(600px, 70vw, 960px);
3251
- --content-padding: 24px;
3252
- --header-top-margin: 64px;
3253
- --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
3254
- --publish-trigger-border: var(--owo-cmp-surface-border);
3255
- --publish-trigger-text: var(--owo-cmp-text-primary);
3256
- --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
3257
- --publish-popover-bg: var(--owo-cmp-surface-bg);
3258
- --publish-popover-border: var(--owo-cmp-surface-border);
3259
- --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
3260
- --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
3261
- --publish-section-border: var(--owo-cmp-surface-border);
3262
- --publish-fact-title: var(--owo-cmp-text-secondary);
3263
- --publish-fact-value: var(--owo-ref-color-neutral-900);
3264
- --publish-muted-text: var(--owo-cmp-text-secondary);
3265
- --publish-warning-bg: var(--owo-cmp-warning-bg);
3266
- --publish-warning-border: var(--owo-cmp-warning-border);
3267
- --publish-warning-text: var(--owo-cmp-warning-text);
3268
- --publish-danger-bg: var(--owo-cmp-danger-bg);
3269
- --publish-danger-border: var(--owo-cmp-danger-border);
3270
- --publish-danger-text: var(--owo-cmp-danger-text);
3271
- --publish-success-bg: var(--owo-cmp-success-bg);
3272
- --publish-success-border: var(--owo-cmp-success-border);
3273
- --publish-success-text: var(--owo-cmp-success-text);
3274
- --publish-progress-track: var(--owo-cmp-surface-bg-inset);
3275
- --publish-progress-fill: var(--owo-cmp-accent-bg);
3276
- --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3277
- --feedback-neutral-border: var(--owo-cmp-surface-border);
3278
- --feedback-neutral-text: var(--owo-cmp-text-primary);
3279
- --feedback-neutral-icon: var(--owo-cmp-text-secondary);
3280
- --feedback-info-bg: var(--owo-cmp-info-bg);
3281
- --feedback-info-border: var(--owo-cmp-info-border);
3282
- --feedback-info-text: var(--owo-cmp-info-text);
3283
- --feedback-info-icon: var(--owo-cmp-info-text);
3284
- --feedback-success-bg: var(--owo-cmp-success-bg);
3285
- --feedback-success-border: var(--owo-cmp-success-border);
3286
- --feedback-success-text: var(--owo-cmp-success-text);
3287
- --feedback-success-icon: var(--owo-cmp-success-text);
3288
- --feedback-warning-bg: var(--owo-cmp-warning-bg);
3289
- --feedback-warning-border: var(--owo-cmp-warning-border);
3290
- --feedback-warning-text: var(--owo-cmp-warning-text);
3291
- --feedback-warning-icon: var(--owo-cmp-warning-text);
3292
- --feedback-danger-bg: var(--owo-cmp-danger-bg);
3293
- --feedback-danger-border: var(--owo-cmp-danger-border);
3294
- --feedback-danger-text: var(--owo-cmp-danger-text);
3295
- --feedback-danger-icon: var(--owo-cmp-danger-text);
3296
- --toast-shadow: var(--owo-cmp-surface-shadow-strong);
3297
- --skeleton-bg: linear-gradient(
3298
- 180deg,
3299
- var(--owo-cmp-surface-bg-inset) 0%,
3300
- var(--owo-cmp-surface-bg-inset) 100%
3301
- );
3302
- @supports (color: color-mix(in lab, red, red)) {
3303
- --skeleton-bg: linear-gradient(
3304
- 180deg,
3305
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
3306
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
3307
- );
3308
- }
3309
- --skeleton-bg-emphasis: linear-gradient(
3310
- 180deg,
3311
- var(--owo-cmp-surface-bg-subtle) 0%,
3312
- var(--owo-cmp-surface-bg-inset) 100%
3313
- );
3314
- @supports (color: color-mix(in lab, red, red)) {
3315
- --skeleton-bg-emphasis: linear-gradient(
3316
- 180deg,
3317
- color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
3318
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
3319
- );
3320
- }
3321
- --skeleton-sheen: linear-gradient(
3322
- 100deg,
3323
- transparent 0%,
3324
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
3325
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
3326
- var(--owo-ref-color-highlight-sheen) 50%,
3327
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
3328
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
3329
- transparent 100%
3330
- );
3331
- @supports (color: color-mix(in lab, red, red)) {
3332
- --skeleton-sheen: linear-gradient(
3333
- 100deg,
3334
- transparent 0%,
3335
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
3336
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
3337
- var(--owo-ref-color-highlight-sheen) 50%,
3338
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
3339
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
3340
- transparent 100%
3341
- );
3342
- }
3343
- --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
3344
- --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
3345
- --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
3346
- @supports (color: color-mix(in lab, red, red)) {
3347
- --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
3348
- }
3349
- --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
3350
- --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
3351
- --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
3282
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3283
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
3284
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
3285
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
3286
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
3287
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
3288
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
3289
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
3290
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
3291
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
3292
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
3293
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
3294
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
3295
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
3296
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
3297
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
3298
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
3299
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
3300
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
3301
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
3352
3302
  }
3353
3303
  :root[data-preset="flat"], .owoui-preset-flat {
3354
3304
  --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
@@ -3456,111 +3406,26 @@
3456
3406
  --owo-cmp-z-dropdown: 1000;
3457
3407
  --owo-cmp-z-modal: 1100;
3458
3408
  --owo-cmp-z-toast: 1200;
3459
- --content-min-width: 320px;
3460
- --content-preferred-width: 70vw;
3461
- --content-max-width: 960px;
3462
- --content-width: clamp(600px, 70vw, 960px);
3463
- --content-padding: 24px;
3464
- --header-top-margin: 64px;
3465
- --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
3466
- --publish-trigger-border: var(--owo-cmp-surface-border);
3467
- --publish-trigger-text: var(--owo-cmp-text-primary);
3468
- --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
3469
- --publish-popover-bg: var(--owo-cmp-surface-bg);
3470
- --publish-popover-border: var(--owo-cmp-surface-border);
3471
- --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
3472
- --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
3473
- --publish-section-border: var(--owo-cmp-surface-border);
3474
- --publish-fact-title: var(--owo-cmp-text-secondary);
3475
- --publish-fact-value: var(--owo-ref-color-neutral-900);
3476
- --publish-muted-text: var(--owo-cmp-text-secondary);
3477
- --publish-warning-bg: var(--owo-cmp-warning-bg);
3478
- --publish-warning-border: var(--owo-cmp-warning-border);
3479
- --publish-warning-text: var(--owo-cmp-warning-text);
3480
- --publish-danger-bg: var(--owo-cmp-danger-bg);
3481
- --publish-danger-border: var(--owo-cmp-danger-border);
3482
- --publish-danger-text: var(--owo-cmp-danger-text);
3483
- --publish-success-bg: var(--owo-cmp-success-bg);
3484
- --publish-success-border: var(--owo-cmp-success-border);
3485
- --publish-success-text: var(--owo-cmp-success-text);
3486
- --publish-progress-track: var(--owo-cmp-surface-bg-inset);
3487
- --publish-progress-fill: var(--owo-cmp-accent-bg);
3488
- --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3489
- --feedback-neutral-border: var(--owo-cmp-surface-border);
3490
- --feedback-neutral-text: var(--owo-cmp-text-primary);
3491
- --feedback-neutral-icon: var(--owo-cmp-text-secondary);
3492
- --feedback-info-bg: var(--owo-cmp-info-bg);
3493
- --feedback-info-border: var(--owo-cmp-info-border);
3494
- --feedback-info-text: var(--owo-cmp-info-text);
3495
- --feedback-info-icon: var(--owo-cmp-info-text);
3496
- --feedback-success-bg: var(--owo-cmp-success-bg);
3497
- --feedback-success-border: var(--owo-cmp-success-border);
3498
- --feedback-success-text: var(--owo-cmp-success-text);
3499
- --feedback-success-icon: var(--owo-cmp-success-text);
3500
- --feedback-warning-bg: var(--owo-cmp-warning-bg);
3501
- --feedback-warning-border: var(--owo-cmp-warning-border);
3502
- --feedback-warning-text: var(--owo-cmp-warning-text);
3503
- --feedback-warning-icon: var(--owo-cmp-warning-text);
3504
- --feedback-danger-bg: var(--owo-cmp-danger-bg);
3505
- --feedback-danger-border: var(--owo-cmp-danger-border);
3506
- --feedback-danger-text: var(--owo-cmp-danger-text);
3507
- --feedback-danger-icon: var(--owo-cmp-danger-text);
3508
- --toast-shadow: var(--owo-cmp-surface-shadow-strong);
3509
- --skeleton-bg: linear-gradient(
3510
- 180deg,
3511
- var(--owo-cmp-surface-bg-inset) 0%,
3512
- var(--owo-cmp-surface-bg-inset) 100%
3513
- );
3514
- @supports (color: color-mix(in lab, red, red)) {
3515
- --skeleton-bg: linear-gradient(
3516
- 180deg,
3517
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
3518
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
3519
- );
3520
- }
3521
- --skeleton-bg-emphasis: linear-gradient(
3522
- 180deg,
3523
- var(--owo-cmp-surface-bg-subtle) 0%,
3524
- var(--owo-cmp-surface-bg-inset) 100%
3525
- );
3526
- @supports (color: color-mix(in lab, red, red)) {
3527
- --skeleton-bg-emphasis: linear-gradient(
3528
- 180deg,
3529
- color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
3530
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
3531
- );
3532
- }
3533
- --skeleton-sheen: linear-gradient(
3534
- 100deg,
3535
- transparent 0%,
3536
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
3537
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
3538
- var(--owo-ref-color-highlight-sheen) 50%,
3539
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
3540
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
3541
- transparent 100%
3542
- );
3543
- @supports (color: color-mix(in lab, red, red)) {
3544
- --skeleton-sheen: linear-gradient(
3545
- 100deg,
3546
- transparent 0%,
3547
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
3548
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
3549
- var(--owo-ref-color-highlight-sheen) 50%,
3550
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
3551
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
3552
- transparent 100%
3553
- );
3554
- }
3555
- --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
3556
- --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
3557
- --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
3558
- @supports (color: color-mix(in lab, red, red)) {
3559
- --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
3560
- }
3561
- --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
3562
- --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
3563
- --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
3409
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3410
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
3411
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
3412
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
3413
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
3414
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
3415
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
3416
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
3417
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
3418
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
3419
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
3420
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
3421
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
3422
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
3423
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
3424
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
3425
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
3426
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
3427
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
3428
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
3564
3429
  }
3565
3430
  :root[data-preset="elevated"], .owoui-preset-elevated {
3566
3431
  --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
@@ -3689,111 +3554,26 @@
3689
3554
  --owo-cmp-z-dropdown: 1000;
3690
3555
  --owo-cmp-z-modal: 1100;
3691
3556
  --owo-cmp-z-toast: 1200;
3692
- --content-min-width: 320px;
3693
- --content-preferred-width: 70vw;
3694
- --content-max-width: 960px;
3695
- --content-width: clamp(600px, 70vw, 960px);
3696
- --content-padding: 24px;
3697
- --header-top-margin: 64px;
3698
- --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
3699
- --publish-trigger-border: var(--owo-cmp-surface-border);
3700
- --publish-trigger-text: var(--owo-cmp-text-primary);
3701
- --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
3702
- --publish-popover-bg: var(--owo-cmp-surface-bg);
3703
- --publish-popover-border: var(--owo-cmp-surface-border);
3704
- --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
3705
- --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
3706
- --publish-section-border: var(--owo-cmp-surface-border);
3707
- --publish-fact-title: var(--owo-cmp-text-secondary);
3708
- --publish-fact-value: var(--owo-ref-color-neutral-900);
3709
- --publish-muted-text: var(--owo-cmp-text-secondary);
3710
- --publish-warning-bg: var(--owo-cmp-warning-bg);
3711
- --publish-warning-border: var(--owo-cmp-warning-border);
3712
- --publish-warning-text: var(--owo-cmp-warning-text);
3713
- --publish-danger-bg: var(--owo-cmp-danger-bg);
3714
- --publish-danger-border: var(--owo-cmp-danger-border);
3715
- --publish-danger-text: var(--owo-cmp-danger-text);
3716
- --publish-success-bg: var(--owo-cmp-success-bg);
3717
- --publish-success-border: var(--owo-cmp-success-border);
3718
- --publish-success-text: var(--owo-cmp-success-text);
3719
- --publish-progress-track: var(--owo-cmp-surface-bg-inset);
3720
- --publish-progress-fill: var(--owo-cmp-accent-bg);
3721
- --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3722
- --feedback-neutral-border: var(--owo-cmp-surface-border);
3723
- --feedback-neutral-text: var(--owo-cmp-text-primary);
3724
- --feedback-neutral-icon: var(--owo-cmp-text-secondary);
3725
- --feedback-info-bg: var(--owo-cmp-info-bg);
3726
- --feedback-info-border: var(--owo-cmp-info-border);
3727
- --feedback-info-text: var(--owo-cmp-info-text);
3728
- --feedback-info-icon: var(--owo-cmp-info-text);
3729
- --feedback-success-bg: var(--owo-cmp-success-bg);
3730
- --feedback-success-border: var(--owo-cmp-success-border);
3731
- --feedback-success-text: var(--owo-cmp-success-text);
3732
- --feedback-success-icon: var(--owo-cmp-success-text);
3733
- --feedback-warning-bg: var(--owo-cmp-warning-bg);
3734
- --feedback-warning-border: var(--owo-cmp-warning-border);
3735
- --feedback-warning-text: var(--owo-cmp-warning-text);
3736
- --feedback-warning-icon: var(--owo-cmp-warning-text);
3737
- --feedback-danger-bg: var(--owo-cmp-danger-bg);
3738
- --feedback-danger-border: var(--owo-cmp-danger-border);
3739
- --feedback-danger-text: var(--owo-cmp-danger-text);
3740
- --feedback-danger-icon: var(--owo-cmp-danger-text);
3741
- --toast-shadow: var(--owo-cmp-surface-shadow-strong);
3742
- --skeleton-bg: linear-gradient(
3743
- 180deg,
3744
- var(--owo-cmp-surface-bg-inset) 0%,
3745
- var(--owo-cmp-surface-bg-inset) 100%
3746
- );
3747
- @supports (color: color-mix(in lab, red, red)) {
3748
- --skeleton-bg: linear-gradient(
3749
- 180deg,
3750
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
3751
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
3752
- );
3753
- }
3754
- --skeleton-bg-emphasis: linear-gradient(
3755
- 180deg,
3756
- var(--owo-cmp-surface-bg-subtle) 0%,
3757
- var(--owo-cmp-surface-bg-inset) 100%
3758
- );
3759
- @supports (color: color-mix(in lab, red, red)) {
3760
- --skeleton-bg-emphasis: linear-gradient(
3761
- 180deg,
3762
- color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
3763
- color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
3764
- );
3765
- }
3766
- --skeleton-sheen: linear-gradient(
3767
- 100deg,
3768
- transparent 0%,
3769
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 28%,
3770
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 40%,
3771
- var(--owo-ref-color-highlight-sheen) 50%,
3772
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 35%, transparent) 60%,
3773
- color-mix(in srgb, rgba(255, 255, 255, 0.34) 10%, transparent) 72%,
3774
- transparent 100%
3775
- );
3776
- @supports (color: color-mix(in lab, red, red)) {
3777
- --skeleton-sheen: linear-gradient(
3778
- 100deg,
3779
- transparent 0%,
3780
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
3781
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
3782
- var(--owo-ref-color-highlight-sheen) 50%,
3783
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
3784
- color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
3785
- transparent 100%
3786
- );
3787
- }
3788
- --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
3789
- --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
3790
- --workspace-transition-stale-bg: color-mix(in srgb, rgba(244, 238, 230, 0.56) 72%, transparent);
3791
- @supports (color: color-mix(in lab, red, red)) {
3792
- --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
3793
- }
3794
- --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
3795
- --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
3796
- --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
3557
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
3558
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
3559
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
3560
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
3561
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
3562
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
3563
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
3564
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
3565
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
3566
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
3567
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
3568
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
3569
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
3570
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
3571
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
3572
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
3573
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
3574
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
3575
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
3576
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
3797
3577
  }
3798
3578
  :root[data-preset="glass"], .owoui-preset-glass {
3799
3579
  --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);