@typlog/ui 0.11.2 → 0.11.4

package/dist/components.css

@@ -1,4 +1,9 @@
 
+.ui-root[data-is-root-theme] {
+  position: relative;
+  z-index: 0;
+}
+
 .ui-Avatar {
   display: inline-flex;
   align-items: center;
@@ -212,10 +217,10 @@
   --margin-bottom: 0px;
   --margin-left: 0px;
   overflow: hidden;
-  margin-top: var(--margin-top-override);
-  margin-right: var(--margin-right-override);
-  margin-bottom: var(--margin-bottom-override);
-  margin-left: var(--margin-left-override);
+  margin-top: var(--margin-top-override, var(--margin-top));
+  margin-right: var(--margin-right-override, var(--margin-right));
+  margin-bottom: var(--margin-bottom-override, var(--margin-bottom));
+  margin-left: var(--margin-left-override, var(--margin-left));
 }
 .ui-Inset > * {
   --margin-top-override: initial;
@@ -237,7 +242,7 @@
   --inset-padding-bottom-calc: calc(var(--inset-padding-bottom, 0px) + var(--inset-border-width, 0px));
   --inset-padding-left-calc: calc(var(--inset-padding-left, 0px) + var(--inset-border-width, 0px));
 }
-.ui-Inset:where(.inset-top) {
+.ui-Inset:where(.r-side-top) {
   --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
   --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
   --margin-bottom-override: var(--margin-bottom);
@@ -247,7 +252,7 @@
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-.ui-Inset:where(.inset-bottom) {
+.ui-Inset:where(.r-side-bottom) {
   --margin-top-override: var(--margin-top);
   --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
   --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
@@ -257,7 +262,7 @@
   border-bottom-left-radius: var(--inset-border-radius-calc);
   border-bottom-right-radius: var(--inset-border-radius-calc);
 }
-.ui-Inset:where(.inset-left) {
+.ui-Inset:where(.r-side-left) {
   --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
   --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
   --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
@@ -267,7 +272,7 @@
   border-bottom-left-radius: var(--inset-border-radius-calc);
   border-bottom-right-radius: 0px;
 }
-.ui-Inset:where(.inset-right) {
+.ui-Inset:where(.r-side-right) {
   --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
   --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
   --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
@@ -277,6 +282,27 @@
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: var(--inset-border-radius-calc);
 }
+.ui-Inset:where(.r-side-x) {
+  --margin-top-override: var(--margin-top);
+  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+  --margin-bottom-override: var(--margin-bottom);
+  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+  border-radius: 0px;
+}
+.ui-Inset:where(.r-side-y) {
+  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+  --margin-right-override: var(--margin-right);
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+  --margin-left-override: var(--margin-left);
+  border-radius: 0px;
+}
+.ui-Inset:where(.r-side-all) {
+  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
+  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
+  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
+  border-radius: var(--inset-border-radius-calc);
+}
 
 .ui-Card {
   display: block;
@@ -519,7 +545,7 @@
   background-color: var(--gray-a3);
 }
 .ui-Button:where(.r-variant-ghost) {
-  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
+  padding: var(--button-ghost-padding-y) var(--button-padding-x);
 }
 @media (hover: hover) {
 .ui-Button:where(.r-variant-ghost):where(:hover) {
@@ -622,26 +648,11 @@
   background-color: var(--gray-a2);
 }
 
-.ui-Button.ui-IconButton:where(:not(.r-variant-ghost)) {
+.ui-Button.ui-IconButton {
   height: var(--button-height);
   width: var(--button-height);
   padding: 0;
 }
-.ui-IconButton:where(.r-variant-ghost) {
-  padding: var(--icon-button-ghost-padding);
-}
-.ui-IconButton:where(.r-size-1) {
-  --icon-button-ghost-padding: var(--space-1);
-}
-.ui-IconButton:where(.r-size-2) {
-  --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
-}
-.ui-IconButton:where(.r-size-3) {
-  --icon-button-ghost-padding: var(--space-2);
-}
-.ui-IconButton:where(.r-size-4) {
-  --icon-button-ghost-padding: var(--space-3);
-}
 
 .ui-SocialButton {
   background-color: var(--social-button-background-color);
@@ -798,61 +809,85 @@
   inset: 0;
   background-color: var(--color-overlay);
 }
-.ui-DialogScroll {
+.ui-DialogWrapper {
   display: flex;
-  overflow: auto;
+  overflow: hidden;
   position: absolute;
   inset: 0;
 }
-.ui-DialogScrollPadding {
+.ui-DialogContainer {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
-  margin: auto;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  box-sizing: border-box;
   padding-top: var(--space-6);
-  padding-bottom: max(var(--space-6), 6vh);
-  padding-left: var(--space-4);
-  padding-right: var(--space-4);
-}
-.ui-DialogScrollPadding[data-align="start"] {
-  margin-top: 0;
-}
-.ui-DialogScrollPadding[data-align="center"] {
-  margin-top: auto;
 }
 .ui-DialogContent {
-  margin: auto;
+  --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);
+
   width: 100%;
   max-height: calc(100vh - var(--space-6) * 2);
   position: relative;
   box-sizing: border-box;
   overflow: auto;
   text-align: left;
-
-  --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);
   padding: var(--dialog-content-padding);
   box-sizing: border-box;
-
   background-color: var(--color-panel-solid);
-  box-shadow: var(--shadow-6);
   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);
 }
-.ui-DialogContent[data-size="1"] {
+.ui-DialogContent:where(.r-size-2) {
+  --dialog-content-radius: var(--radius-4);
   --dialog-content-padding: var(--space-3);
-  border-radius: var(--radius-4);
 }
-.ui-DialogContent[data-size="2"] {
+.ui-DialogContent:where(.r-size-3) {
+  --dialog-content-radius: var(--radius-5);
   --dialog-content-padding: var(--space-4);
-  border-radius: var(--radius-4);
 }
-.ui-DialogContent[data-size="3"] {
+.ui-DialogContent:where(.r-size-4) {
+  --dialog-content-radius: var(--radius-5);
   --dialog-content-padding: var(--space-5);
-  border-radius: var(--radius-5);
 }
-.ui-DialogContent[data-size="4"] {
-  --dialog-content-padding: var(--space-6);
-  border-radius: var(--radius-5);
+.ui-DialogContentClose {
+  position: absolute;
+  top: calc(var(--dialog-content-padding) / 1.5);
+  right: var(--dialog-content-padding);
+}
+.ui-DialogContent > h2[id^="reka-dialog-title"] {
+  font-size: var(--font-size-5);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-4);
+  margin-bottom: var(--space-3);
+}
+.ui-DialogContent > p[id^="reka-dialog-description"] {
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+}
+@media (min-width: 520px) {
+.ui-DialogContainer {
+    justify-content: center;
+    padding-bottom: max(var(--space-6), 6vh);
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+.ui-DialogContent {
+    box-shadow: var(--shadow-6);
+    border-bottom-left-radius: var(--dialog-content-radius);
+    border-bottom-right-radius: var(--dialog-content-radius);
+}
 }
 @media (prefers-reduced-motion: no-preference) {
 @keyframes ui-dialog-overlay-no-op {
@@ -865,22 +900,22 @@ to {
 }
 @keyframes ui-dialog-content-show {
 from {
-      opacity: 0;
-      transform: translateY(5px) scale(0.97);
+      opacity: 0.1;
+      transform: translateY(var(--space-6));
 }
 to {
       opacity: 1;
-      transform: translateY(0px) scale(1);
+      transform: translateY(0);
 }
 }
 @keyframes ui-dialog-content-hide {
 from {
       opacity: 1;
-      transform: translateY(0px) scale(1);
+      transform: translateY(0);
 }
 to {
-      opacity: 0;
-      transform: translateY(5px) scale(0.99);
+      opacity: 0.1;
+      transform: translateY(var(--space-6));
 }
 }
 .ui-DialogOverlay[data-state='closed'] {
@@ -892,36 +927,12 @@ to {
 .ui-DialogOverlay[data-state='closed']::before {
     animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.ui-DialogContent[data-state='open'] {
+.ui-DialogOverlay[data-state='open'] :where(.ui-DialogContent) {
     animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.ui-DialogContent[data-state='closed'] {
-    animation: ui-dialog-content-hide 100ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-}
-.ui-DialogContent > h2[id^="reka-dialog-title"] {
-  font-size: var(--font-size-5);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-4);
-  margin-bottom: var(--space-3);
+.ui-DialogOverlay[data-state='closed'] :where(.ui-DialogContent) {
+    animation: ui-dialog-content-hide 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.ui-DialogContent > p[id^="reka-dialog-description"] {
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-}
-
-.ui-DialogHead {
-  position: sticky;
-  top: calc(0px - var(--inset-padding-top-calc));
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: calc(0px - var(--inset-padding-top-calc));
-  padding: calc(var(--dialog-content-padding) / 2) var(--dialog-content-padding);
-  border-bottom: 1px solid var(--gray-a4);
-  background-color: var(--color-background);
-  z-index: 1;
 }
 
 .ui-MenuContent {
@@ -950,14 +961,14 @@ to {
 :where(.ui-MenuContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .ui-MenuViewport {
   padding-right: var(--space-3);
 }
-.ui-MenuContent:where([data-size="1"]) {
+.ui-MenuContent:where(.r-size-1) {
   --menu-content-padding: var(--space-1);
   --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);
 }
-.ui-MenuContent:where([data-size="2"]) {
+.ui-MenuContent:where(.r-size-2) {
   --menu-content-padding: var(--space-2);
   --menu-item-padding-left: var(--space-3);
   --menu-item-padding-right: var(--space-3);
@@ -1038,19 +1049,19 @@ to {
   box-sizing: border-box;
   transform-origin: var(--reka-popover-content-transform-origin);
 }
-.ui-PopoverContent:where([data-size="1"]) {
+.ui-PopoverContent:where(.r-size-1) {
   --popover-content-padding: var(--space-3);
   border-radius: var(--radius-4);
 }
-.ui-PopoverContent:where([data-size="2"]) {
+.ui-PopoverContent:where(.r-size-2) {
   --popover-content-padding: var(--space-4);
   border-radius: var(--radius-4);
 }
-.ui-PopoverContent:where([data-size="3"]) {
+.ui-PopoverContent:where(.r-size-3) {
   --popover-content-padding: var(--space-5);
   border-radius: var(--radius-5);
 }
-.ui-PopoverContent:where([data-size="4"]) {
+.ui-PopoverContent:where(.r-size-4) {
   --popover-content-padding: var(--space-6);
   border-radius: var(--radius-5);
 }