@typlog/ui 0.11.8 → 0.12.0

package/components/dialog.css

@@ -13,267 +13,6 @@
 .ui-DialogTitle + .ui-DialogDescription {
   margin-top: var(--space-2);
 }
-
-.ui-Button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  vertical-align: top;
-  font-style: normal;
-  font-weight: var(--button-font-weight);
-  text-align: center;
-  white-space: nowrap;
-  height: var(--button-height);
-  padding-left: var(--button-padding-x);
-  padding-right: var(--button-padding-x);
-}
-.ui-Button:where(.r-variant-ghost) {
-  --button-font-weight: var(--font-weight-regular);
-}
-.ui-Button:where(:not(.r-variant-ghost)) {
-  --button-font-weight: var(--font-weight-medium);
-}
-.ui-Button:where([data-disabled]) {
-  cursor: not-allowed;
-}
-.ui-Button:where(.r-size-1) {
-  gap: var(--space-1);
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-  border-radius: max(var(--radius-1), var(--radius-full));
-  --button-height: var(--space-5);
-  --button-padding-x: var(--space-2);
-}
-.ui-Button:where(.r-size-1):where(.r-variant-ghost) {
-  --button-ghost-padding-y: var(--space-1);
-}
-.ui-Button:where(.r-size-2) {
-  gap: var(--space-2);
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-  border-radius: max(var(--radius-2), var(--radius-full));
-  --button-height: var(--space-6);
-  --button-padding-x: var(--space-3);
-}
-.ui-Button:where(.r-size-2):where(.r-variant-ghost) {
-  gap: var(--space-1);
-  --button-padding-x: var(--space-2);
-  --button-ghost-padding-y: var(--space-1);
-}
-.ui-Button:where(.r-size-3) {
-  gap: var(--space-3);
-  font-size: var(--font-size-3);
-  line-height: var(--line-height-3);
-  letter-spacing: var(--letter-spacing-3);
-  border-radius: max(var(--radius-3), var(--radius-full));
-  --button-height: var(--space-7);
-  --button-padding-x: var(--space-4);
-}
-.ui-Button:where(.r-size-3):where(.r-variant-ghost) {
-  gap: var(--space-2);
-  --button-padding-x: var(--space-3);
-  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
-}
-.ui-Button:where(.r-size-4) {
-  gap: var(--space-3);
-  font-size: var(--font-size-4);
-  line-height: var(--line-height-4);
-  letter-spacing: var(--letter-spacing-4);
-  border-radius: max(var(--radius-4), var(--radius-full));
-  --button-height: var(--space-8);
-  --button-padding-x: var(--space-5);
-}
-.ui-Button:where(.r-size-4):where(.r-variant-ghost) {
-  gap: var(--space-2);
-  --button-padding-x: var(--space-4);
-  --button-ghost-padding-y: var(--space-2);
-}
-
-/* solid */
-.ui-root {
-  --button-solid-active-filter: brightness(0.92) saturate(1.1);
-  --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
-}
-:is(.dark, .dark-theme) .ui-root {
-  --button-solid-active-filter: brightness(1.08);
-  --button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
-}
-.ui-Button:where(.r-variant-solid) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-solid):where(:hover) {
-    background-color: var(--accent-10);
-}
-}
-.ui-Button:where(.r-variant-solid):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-.ui-Button:where(.r-variant-solid):where(:active) {
-  background-color: var(--accent-10);
-  filter: var(--button-solid-active-filter);
-}
-.ui-Button:where(.r-variant-solid):where(.r-high-contrast) {
-  background-color: var(--accent-12);
-  color: var(--gray-1);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-solid):where(.r-high-contrast:hover) {
-    background-color: var(--accent-12);
-    filter: var(--button-solid-high-contrast-hover-filter);
-}
-}
-.ui-Button:where(.r-variant-solid):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
-  outline: none;
-  filter: none;
-}
-
-/* soft / ghost */
-.ui-Button:where(.r-variant-soft, .r-variant-ghost) {
-  color: var(--accent-a11);
-}
-.ui-Button:where(.r-variant-soft, .r-variant-ghost):where(.r-high-contrast) {
-  color: var(--accent-12);
-}
-.ui-Button:where(.r-variant-soft) {
-  background-color: var(--accent-a3);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-soft):where(:hover) {
-    background-color: var(--accent-a4);
-}
-}
-.ui-Button:where(.r-variant-soft):where(:focus-visible) {
-  outline: 2px solid var(--accent-8);
-  outline-offset: -1px;
-}
-.ui-Button:where(.r-variant-soft):where(:active) {
-  background-color: var(--accent-a5);
-}
-.ui-Button:where(.r-variant-soft):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
-}
-.ui-Button:where(.r-variant-ghost) {
-  padding: var(--button-ghost-padding-y) var(--button-padding-x);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-ghost):where(:hover) {
-    background-color: var(--accent-a3);
-}
-}
-.ui-Button:where(.r-variant-ghost):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: -1px;
-}
-.ui-Button:where(.r-variant-ghost):where(:active) {
-  background-color: var(--accent-a4);
-}
-.ui-Button:where(.r-variant-ghost):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: transparent;
-}
-
-/* classic */
-.ui-Button:where(.r-variant-classic) {
-  box-shadow: var(--shadow-2);
-  background-color: var(--color-background);
-}
-.ui-Button:where(.r-variant-classic):where(.r-high-contrast) {
-  color: var(--gray-12);
-  box-shadow: 0 0 0 1px var(--gray-a6), 0 1px 1px 0 var(--black-a4), 0 2px 1px -1px var(--black-a2), 0 1px 3px 0 var(--black-a1);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-classic):where(:hover) {
-    color: var(--accent-a11);
-    background-color: var(--gray-a2);
-}
-.ui-Button:where(.r-variant-classic):where(.r-high-contrast):where(:hover) {
-    color: var(--accent-12);
-}
-}
-.ui-Button:where(.r-variant-classic):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-.ui-Button:where(.r-variant-classic):where(:active:not([data-disabled])) {
-  box-shadow: var(--shadow-1);
-}
-.ui-Button:where(.r-variant-classic):where([data-disabled]) {
-  color: var(--gray-a10);
-  background-color: var(--gray-a2);
-}
-
-/* outline */
-.ui-Button:where(.r-variant-outline) {
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
-  color: var(--accent-a11);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-outline):where(:hover) {
-    background-color: var(--accent-a2);
-}
-}
-.ui-Button:where(.r-variant-outline):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: -1px;
-}
-.ui-Button:where(.r-variant-outline):where(.r-high-contrast) {
-  box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
-  color: var(--accent-12);
-}
-.ui-Button:where(.r-variant-outline):where(:active) {
-  background-color: var(--accent-a4);
-}
-.ui-Button:where(.r-variant-outline):where([data-disabled]) {
-  color: var(--gray-a8);
-  box-shadow: inset 0 0 0 1px var(--gray-a7);
-  background-color: transparent;
-}
-
-/* surface */
-.ui-Button:where(.r-variant-surface) {
-  background-color: var(--accent-surface);
-  box-shadow: inset 0 0 0 1px var(--accent-a7);
-  color: var(--accent-a11);
-}
-@media (hover: hover) {
-.ui-Button:where(.r-variant-surface):where(:hover) {
-    box-shadow: inset 0 0 0 1px var(--accent-a8);
-}
-}
-.ui-Button:where(.r-variant-surface):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: -1px;
-}
-.ui-Button:where(.r-variant-surface):where(.r-high-contrast) {
-  color: var(--accent-12);
-}
-.ui-Button:where(.r-variant-surface):where(:active) {
-  background-color: var(--accent-a4);
-}
-.ui-Button:where(.r-variant-surface):where([data-disabled]) {
-  color: var(--gray-a8);
-  box-shadow: inset 0 0 0 1px var(--gray-a6);
-  background-color: var(--gray-a2);
-}
-
-.ui-Button.ui-IconButton {
-  height: var(--button-height);
-  width: var(--button-height);
-  padding: 0;
-}
-
 .ui-DialogOverlay {
   position: fixed;
   inset: 0;
@@ -300,57 +39,68 @@
   box-sizing: border-box;
   padding-top: var(--space-6);
 }
-.ui-DialogContent {
-  --inset-padding-top: var(--dialog-content-padding);
-  --inset-padding-right: var(--dialog-content-padding);
-  --inset-padding-bottom: var(--dialog-content-padding);
-  --inset-padding-left: var(--dialog-content-padding);
-
+.ui-DialogPopup {
   width: 100%;
   max-height: calc(100vh - var(--space-6) * 2);
   position: relative;
   box-sizing: border-box;
   overflow: auto;
   text-align: left;
-  padding: var(--dialog-content-padding);
   box-sizing: border-box;
   background-color: var(--color-panel-solid);
   outline: none;
-  border-top-left-radius: var(--dialog-content-radius);
-  border-top-right-radius: var(--dialog-content-radius);
-}
-.ui-DialogContent:where(.r-size-1) {
-  --dialog-content-radius: var(--radius-4);
-  --dialog-content-padding: var(--space-2);
+  border-top-left-radius: var(--dialog-popup-radius);
+  border-top-right-radius: var(--dialog-popup-radius);
+  max-width: var(--dialog-popup-max-width);
+  max-height: var(--dialog-popup-max-height);
+  padding: var(--dialog-popup-padding);
+}
+.ui-DialogPopup:where(.r-size-1) {
+  --dialog-popup-padding: var(--space-3);
+  --dialog-popup-radius: var(--radius-4);
+  --dialog-popup-max-width: 450px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-2) {
+  --dialog-popup-padding: var(--space-4);
+  --dialog-popup-radius: var(--radius-4);
+  --dialog-popup-max-width: 600px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-3) {
+  --dialog-popup-padding: var(--space-5);
+  --dialog-popup-radius: var(--radius-5);
+  --dialog-popup-max-width: 860px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-4) {
+  --dialog-popup-padding: var(--space-6);
+  --dialog-popup-radius: var(--radius-5);
+  --dialog-popup-max-width: 1200px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-5) {
+  --dialog-popup-padding: var(--space-6);
+  --dialog-popup-radius: var(--radius-5);
+  --dialog-popup-max-width: none;
+  --dialog-popup-max-height: calc(100vh - 64px);
 }
-.ui-DialogContent:where(.r-size-2) {
-  --dialog-content-radius: var(--radius-4);
-  --dialog-content-padding: var(--space-3);
-}
-.ui-DialogContent:where(.r-size-3) {
-  --dialog-content-radius: var(--radius-5);
-  --dialog-content-padding: var(--space-4);
-}
-.ui-DialogContent:where(.r-size-4) {
-  --dialog-content-radius: var(--radius-5);
-  --dialog-content-padding: var(--space-5);
-}
-.ui-DialogContentClose {
-  position: absolute;
-  top: calc(var(--dialog-content-padding) / 1.5);
-  right: var(--dialog-content-padding);
+
+/* special handle for tailwindcss p-0, when css priority doesn't work */
+.ui-DialogPopup:where(.p-0) {
+  --dialog-popup-padding: 0;
 }
-@media (min-width: 520px) {
+@media (min-width: 450px) {
 .ui-DialogContainer {
     justify-content: center;
     padding-bottom: max(var(--space-6), 6vh);
     padding-left: var(--space-4);
     padding-right: var(--space-4);
 }
-.ui-DialogContent {
+.ui-DialogPopup {
     box-shadow: var(--shadow-6);
-    border-bottom-left-radius: var(--dialog-content-radius);
-    border-bottom-right-radius: var(--dialog-content-radius);
+    border-bottom-left-radius: var(--dialog-popup-radius);
+    border-bottom-right-radius: var(--dialog-popup-radius);
 }
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -365,21 +115,21 @@ to {
 @keyframes ui-dialog-content-show {
 from {
       opacity: 0.1;
-      transform: translateY(var(--space-6));
+      transform: translate3d(0, var(--space-6), 0);
 }
 to {
       opacity: 1;
-      transform: translateY(0);
+      transform: translate3d(0, 0, 0);
 }
 }
 @keyframes ui-dialog-content-hide {
 from {
       opacity: 1;
-      transform: translateY(0);
+      transform: translate3d(0, 0, 0);
 }
 to {
-      opacity: 0.1;
-      transform: translateY(var(--space-6));
+      opacity: 1;
+      transform: translate3d(0, var(--space-5), 0);
 }
 }
 .ui-DialogOverlay[data-state='closed'] {
@@ -391,10 +141,15 @@ to {
 .ui-DialogOverlay[data-state='closed']::before {
     animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.ui-DialogOverlay[data-state='open'] :where(.ui-DialogContent) {
+.ui-DialogPopup:where([data-state="open"]) {
     animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.ui-DialogOverlay[data-state='closed'] :where(.ui-DialogContent) {
-    animation: ui-dialog-content-hide 150ms cubic-bezier(0.16, 1, 0.3, 1);
+.ui-DialogPopup:where([data-state="closed"]) {
+    animation: ui-dialog-content-hide 100ms linear;
 }
 }
+
+.ui-AlertPopup {
+  --dialog-popup-radius: var(--radius-4);
+  --dialog-popup-max-width: 450px;
+}

package/components/dropdown.css

@@ -105,6 +105,41 @@
 .ui-ScrollAreaThumb:hover {
   background-color: var(--gray-a9);
 }
+@media (prefers-reduced-motion: no-preference) {
+.ui-PopperContent {
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ui-PopperContent:where([data-state='open']) {
+    animation-duration: 160ms;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='top']) {
+    animation-name: ui-slide-from-top, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='bottom']) {
+    animation-name: ui-slide-from-bottom, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='left']) {
+    animation-name: ui-slide-from-left, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='right']) {
+    animation-name: ui-slide-from-right, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='closed']) {
+    animation-duration: 100ms;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='top']) {
+    animation-name: ui-slide-from-top, ui-fade-out;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='bottom']) {
+    animation-name: ui-slide-from-bottom, ui-fade-out;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='left']) {
+    animation-name: ui-slide-from-left, ui-fade-out;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='right']) {
+    animation-name: ui-slide-from-right, ui-fade-out;
+}
+}
 
 .ui-MenuContent {
   --scrollarea-scrollbar-vertical-margin-top: var(--menu-content-padding);
@@ -116,10 +151,10 @@
   flex-direction: column;
   box-sizing: border-box;
   overflow: hidden;
+  border-radius: var(--menu-content-border-radius);
 
-  --menu-bg: var(--color-panel-solid);
   box-shadow: var(--shadow-5);
-  background-color: var(--menu-bg);
+  background-color: var(--color-panel-solid);
 }
 .ui-MenuViewport {
   flex: 1 1 0%;
@@ -134,17 +169,39 @@
 }
 .ui-MenuContent:where(.r-size-1) {
   --menu-content-padding: var(--space-1);
+  --menu-content-border-radius: var(--radius-3);
+
   --menu-item-padding-left: calc(var(--space-5) / 1.2);
   --menu-item-padding-right: var(--space-2);
   --menu-item-height: var(--space-5);
-  border-radius: var(--radius-3);
+  --menu-item-font-size: var(--font-size-1);
+  --menu-item-line-height: var(--line-height-1);
+  --menu-item-letter-spacing: var(--letter-spacing-1);
+  --menu-item-border-radius: var(--radius-1);
 }
 .ui-MenuContent:where(.r-size-2) {
   --menu-content-padding: var(--space-2);
+  --menu-content-border-radius: var(--radius-4);
+
   --menu-item-padding-left: var(--space-3);
   --menu-item-padding-right: var(--space-3);
   --menu-item-height: var(--space-6);
-  border-radius: var(--radius-4);
+  --menu-item-font-size: var(--font-size-2);
+  --menu-item-line-height: var(--line-height-2);
+  --menu-item-letter-spacing: var(--letter-spacing-2);
+  --menu-item-border-radius: var(--radius-2);
+}
+.ui-MenuContent:where(.r-variant-solid) {
+  --menu-item-highlighted-background-color: var(--accent-9);
+  --menu-item-highlighted-text-color: var(--accent-contrast);
+}
+.ui-MenuContent:where(.r-variant-solid.r-high-contrast) {
+  --menu-item-highlighted-background-color: var(--accent-12);
+  --menu-item-highlighted-text-color: var(--accent-1);
+}
+.ui-MenuContent:where(.r-variant-soft) {
+  --menu-item-highlighted-background-color: var(--accent-a4);
+  --menu-item-highlighted-text-color: var(--accent-a11);
 }
 
 .ui-MenuItem {
@@ -162,13 +219,18 @@
      -moz-user-select: none;
           user-select: none;
   cursor: default;
-  color: var(--gray-a11);
+  color: var(--gray-12);
+  font-size: var(--menu-item-font-size);
+  line-height: var(--menu-item-line-height);
+  letter-spacing: var(--menu-item-letter-spacing);
+  border-radius: var(--menu-item-border-radius);
 }
 .ui-MenuShortcut {
   display: flex;
   align-items: center;
   margin-left: auto;
   padding-left: var(--space-4);
+  color: var(--gray-a11);
 }
 .ui-MenuItem:where([data-accent-color]) {
   color: var(--accent-a11);
@@ -176,29 +238,19 @@
 .ui-MenuItem:where([data-disabled]) {
   color: var(--gray-a8);
 }
+.ui-MenuItem:where([data-highlighted]) {
+  background-color: var(--menu-item-highlighted-background-color);
+  color: var(--menu-item-highlighted-text-color);
+}
 .ui-MenuItem:where([data-disabled], [data-highlighted]) :where(.ui-MenuShortcut) {
   color: inherit;
 }
-.ui-MenuItem:where([data-size="1"]) {
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-  border-radius: var(--radius-1);
-}
-.ui-MenuItem:where([data-size="2"]) {
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-  border-radius: var(--radius-2);
-}
-.ui-MenuItem:where([data-variant="solid"]):where([data-highlighted]) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-}
-.ui-MenuItem:where([data-variant="solid"]):where([data-high-contrast]):where([data-highlighted]) {
-  background-color: var(--accent-12);
-  color: var(--accent-1);
-}
-.ui-MenuItem:where([data-variant="soft"]):where([data-highlighted]) {
-  background-color: var(--accent-a4);
+
+.ui-DropdownMenuSeparator {
+  height: 1px;
+  margin-top: var(--space-2);
+  margin-bottom: var(--space-2);
+  margin-left: var(--menu-item-padding-left);
+  margin-right: var(--menu-item-padding-right);
+  background-color: var(--gray-a6);
 }

package/components/inputs.css

@@ -366,7 +366,6 @@
   font-style: normal;
   text-align: start;
   overflow: hidden;
-  padding: var(--text-area-border-width);
   width: 100%;
 }
 .ui-TextAreaInput {
@@ -385,6 +384,9 @@
   outline: none;
   box-shadow: none;
 }
+.ui-TextAreaInput:where(:disabled) {
+  cursor: not-allowed;
+}
 .ui-TextAreaInput::-webkit-scrollbar {
   width: var(--space-3);
   height: var(--space-3);
@@ -456,13 +458,11 @@
 .ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput::placeholder {
   color: var(--gray-a10);
 }
-.ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput:where(:disabled, :-moz-read-only) {
+.ui-TextArea:where(.r-variant-surface) :where(.ui-TextAreaInput:-moz-read-only) {
   background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
 }
-.ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput:where(:disabled, :read-only) {
+.ui-TextArea:where(.r-variant-surface) :where(.ui-TextAreaInput:read-only) {
   background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
 }
 .ui-TextArea:where(.r-variant-soft) {
   --text-area-border-width: 0px;
@@ -487,11 +487,11 @@
   color: var(--accent-12);
   opacity: 0.65;
 }
-.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput:where(:disabled, :-moz-read-only) {
+.ui-TextArea:where(.r-variant-soft) :where(.ui-TextAreaInput:-moz-read-only) {
   background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
   box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
 }
-.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput:where(:disabled, :read-only) {
+.ui-TextArea:where(.r-variant-soft) :where(.ui-TextAreaInput:read-only) {
   background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
   box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
 }
@@ -526,7 +526,7 @@
 .ui-ColorField:where(.r-variant-ring) {
   --color-input-size: calc(var(--color-field-size) - var(--color-field-border-width) * 4);
   --color-input-radius: calc(var(--color-field-radius) - 2px);
-  border: var(--color-field-border-width) solid var(--color-field-border-color);
+  border: var(--color-field-border-width) solid var(--color-field-color);
 }
 .ui-ColorFieldInput {
   -webkit-appearance: none;

package/components/pagination.css

@@ -1,4 +1,3 @@
-
 .ui-Button {
   display: inline-flex;
   align-items: center;

package/components/popover.css

@@ -1,37 +1,3 @@
-
-.ui-PopoverContent {
-  --inset-padding-top: var(--popover-content-padding);
-  --inset-padding-right: var(--popover-content-padding);
-  --inset-padding-bottom: var(--popover-content-padding);
-  --inset-padding-left: var(--popover-content-padding);
-
-  background-color: var(--color-panel-solid);
-  box-shadow: var(--shadow-5);
-  min-width: var(--reka-popover-trigger-width);
-  max-width: var(--reka-popover-content-available-width);
-  outline: 0;
-  overflow: auto;
-  position: relative;
-  padding: var(--popover-content-padding);
-  box-sizing: border-box;
-  transform-origin: var(--reka-popover-content-transform-origin);
-}
-.ui-PopoverContent:where(.r-size-1) {
-  --popover-content-padding: var(--space-3);
-  border-radius: var(--radius-4);
-}
-.ui-PopoverContent:where(.r-size-2) {
-  --popover-content-padding: var(--space-4);
-  border-radius: var(--radius-4);
-}
-.ui-PopoverContent:where(.r-size-3) {
-  --popover-content-padding: var(--space-5);
-  border-radius: var(--radius-5);
-}
-.ui-PopoverContent:where(.r-size-4) {
-  --popover-content-padding: var(--space-6);
-  border-radius: var(--radius-5);
-}
 @media (prefers-reduced-motion: no-preference) {
 .ui-PopperContent {
     animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
@@ -67,3 +33,27 @@
     animation-name: ui-slide-from-right, ui-fade-out;
 }
 }
+
+.ui-PopoverPopup {
+  background-color: var(--color-panel-solid);
+  box-shadow: var(--shadow-5);
+  min-width: var(--reka-popover-trigger-width);
+  max-width: var(--reka-popover-content-available-width);
+  outline: 0;
+  overflow: auto;
+  position: relative;
+  box-sizing: border-box;
+  transform-origin: var(--reka-popover-content-transform-origin);
+  padding: var(--popover-popup-padding);
+}
+.ui-PopoverPopup:where(.r-size-1) {
+  border-radius: var(--radius-4);
+  --popover-popup-padding: var(--space-2);
+}
+.ui-PopoverPopup:where(.r-size-2) {
+  border-radius: var(--radius-5);
+  --popover-popup-padding: var(--space-4);
+}
+.ui-PopoverPopup:where(.p-0) {
+  --popover-popup-padding: 0;
+}