@typlog/ui 0.10.0 → 0.11.0

package/dist/components/button.css

@@ -0,0 +1,317 @@
+
+.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):where([data-disabled]) {
+  color: var(--gray-a8);
+  background-color: var(--gray-a3);
+}
+.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-ghost-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:where(:not(.r-variant-ghost)) {
+  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);
+  color: var(--social-button-text-color);
+  box-shadow: 0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D122E inset;
+  --social-button-background-color: black;
+  --social-button-text-color: white;
+  --social-button-hover-filter: brightness(0.92) saturate(1.1);
+}
+@media (hover: hover) {
+.ui-SocialButton:where(:hover) {
+    filter: var(--social-button-hover-filter);
+}
+}
+.ui-SocialButton:where(.r-brand-google) {
+  background-color: var(--color-background);
+  --social-button-text-color: var(--gray-12);
+}
+.ui-SocialButton:where(.r-brand-facebook) {
+  --social-button-background-color: #1877F2;
+}
+.ui-SocialButton:where(.r-brand-github) {
+  --social-button-background-color: #333;
+}
+.ui-SocialButton:where(.r-brand-slack) {
+  --social-button-background-color: #611f69;
+}
+.ui-SocialButton:where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-SocialButton:where(:active) {
+  box-shadow: var(--shadow-1);
+}
+.ui-SocialButton:where([data-disabled]) {
+  color: var(--gray-a10);
+  background-color: var(--gray-a2);
+}

package/dist/components/card.css

@@ -0,0 +1,86 @@
+
+.ui-Card {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  font-style: normal;
+  text-align: start;
+  box-sizing: border-box;
+  border-radius: var(--card-border-radius);
+  padding: var(--card-padding);
+  border-color: var(--card-border-color, var(--gray-a5));
+  border-width: var(--card-border-width, 1px);
+  border-style: solid;
+  --inset-padding-top: var(--card-padding);
+  --inset-padding-right: var(--card-padding);
+  --inset-padding-bottom: var(--card-padding);
+  --inset-padding-left: var(--card-padding);
+}
+.ui-Card:where(:-moz-any-link, button, label):where(:hover) {
+  --card-border-color: var(--gray-a7);
+}
+.ui-Card:where(:any-link, button, label):where(:hover) {
+  --card-border-color: var(--gray-a7);
+}
+.ui-Card:where(:-moz-any-link, button, label):where(:focus-visible) {
+  --card-border-color: var(--focus-8);
+  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+.ui-Card:where(:any-link, button, label):where(:focus-visible) {
+  --card-border-color: var(--focus-8);
+  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+.ui-Card:where(.r-size-1) {
+  --card-padding: var(--space-3);
+  --card-border-radius: max(var(--radius-4), var(--radius-full));
+}
+.ui-Card:where(.r-size-2) {
+  --card-padding: var(--space-4);
+  --card-border-radius: max(var(--radius-4), var(--radius-full));
+}
+.ui-Card:where(.r-size-3) {
+  --card-padding: var(--space-5);
+  --card-border-radius: max(var(--radius-5), var(--radius-full));
+}
+.ui-Card:where(.r-size-4) {
+  --card-padding: var(--space-6);
+  --card-border-radius: max(var(--radius-5), var(--radius-full));
+}
+.ui-Card:where(.r-size-5) {
+  --card-padding: var(--space-8);
+  --card-border-radius: max(var(--radius-6), var(--radius-full));
+}
+.ui-Card:where(.r-variant-soft) {
+  border-color: var(--gray-2);
+  background-color: var(--gray-2);
+}
+.ui-Card:where(.r-variant-soft):where(:-moz-any-link, button, label):where(:hover) {
+  border-color: var(--gray-a5);
+}
+.ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
+  border-color: var(--gray-a5);
+}
+
+.ui-CardHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: calc(0px - var(--card-padding));
+  margin-right: calc(0px - var(--card-padding));
+  margin-top: calc(0px - var(--card-padding));
+  padding: var(--card-padding);
+  --card-head-border-color: var(--card-border-color, var(--gray-a5));
+  border-bottom: 1px solid var(--card-head-border-color);
+}
+.ui-CardHead:where(:-moz-any-link, button, label):where(:hover) {
+  background-color: var(--accent-a3);
+}
+.ui-CardHead:where(:any-link, button, label):where(:hover) {
+  background-color: var(--accent-a3);
+}
+.ui-CardHead:where(:-moz-any-link, button, label):where(:focus-visible) {
+  background-color: var(--accent-a4);
+}
+.ui-CardHead:where(:any-link, button, label):where(:focus-visible) {
+  background-color: var(--accent-a4);
+}

package/dist/components/checkbox.css

@@ -0,0 +1,90 @@
+
+.ui-Checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+  flex-shrink: 0;
+  cursor: default;
+  height: var(--checkbox-size);
+  border-radius: var(--checkbox-border-radius);
+}
+.ui-Checkbox::before {
+  content: '';
+  display: block;
+  height: var(--checkbox-size);
+  width: var(--checkbox-size);
+  border-radius: var(--checkbox-border-radius);
+}
+.ui-Checkbox:where(:focus-visible)::before {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-Checkbox:where(:disabled) {
+  cursor: not-allowed;
+}
+.ui-Checkbox:where(:disabled)::before {
+  background-color: var(--gray-a3);
+}
+.ui-CheckboxIndicator {
+  position: absolute;
+  width: var(--checkbox-indicator-size);
+  height: var(--checkbox-indicator-size);
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+}
+.ui-Checkbox:where(.r-size-1) {
+  --checkbox-size: calc(var(--space-4) * 0.875);
+  --checkbox-indicator-size: calc(9px * var(--scaling));
+  --checkbox-border-radius: calc(var(--radius-1) * 0.875);
+}
+.ui-Checkbox:where(.r-size-2) {
+  --checkbox-size: var(--space-4);
+  --checkbox-indicator-size: calc(10px * var(--scaling));
+  --checkbox-border-radius: var(--radius-1);
+}
+.ui-Checkbox:where(.r-size-3) {
+  --checkbox-size: calc(var(--space-4) * 1.25);
+  --checkbox-indicator-size: calc(12px * var(--scaling));
+  --checkbox-border-radius: calc(var(--radius-1) * 1.25);
+}
+.ui-Checkbox:where(.r-variant-surface):where([data-state='unchecked'])::before {
+  background-color: var(--color-surface);
+  box-shadow: inset 0 0 0 1px var(--gray-a7);
+}
+.ui-Checkbox:where(.r-variant-surface):where([data-state='checked'], [data-state='indeterminate'])::before {
+  background-color: var(--accent-indicator);
+}
+.ui-Checkbox:where(.r-variant-surface):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
+  color: var(--accent-contrast);
+}
+.ui-Checkbox:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate'])::before {
+  background-color: var(--accent-12);
+}
+.ui-Checkbox:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
+  color: var(--accent-1);
+}
+.ui-Checkbox:where(.r-variant-surface):disabled:where([data-state='checked'], [data-state='indeterminate'])::before {
+  box-shadow: inset 0 0 0 1px var(--gray-a6);
+  background-color: transparent;
+}
+.ui-Checkbox:where(.r-variant-surface):disabled:where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
+  color: var(--gray-a8);
+}
+.ui-Checkbox:where(.r-variant-soft)::before {
+  background-color: var(--accent-a5);
+}
+.ui-Checkbox:where(.r-variant-soft):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
+  color: var(--accent-a11);
+}
+.ui-Checkbox:where(.r-variant-soft):where(.r-high-contrast):where([data-state='checked'], [data-state='indeterminate']) .ui-CheckboxIndicator {
+  color: var(--accent-12);
+}
+.ui-Checkbox:where(.r-variant-soft):disabled::before {
+  background-color: var(--gray-a3);
+}
+.ui-Checkbox:where(.r-variant-soft):disabled .ui-CheckboxIndicator {
+  color: var(--gray-a8);
+}

package/dist/components/collapsible.css

@@ -0,0 +1,27 @@
+
+@keyframes collapsible-down {
+from {
+    height: 0;
+}
+to {
+    height: var(--reka-collapsible-content-height);
+}
+}
+@keyframes collapsible-up {
+from {
+    height: var(--reka-collapsible-content-height);
+}
+to {
+    height: 0;
+}
+}
+.ui-CollapsibleContent {
+  overflow: hidden;
+  font-weight: var(--font-weight-regular);
+}
+.ui-CollapsibleContent:where([data-state="open"]) {
+  animation: collapsible-down 0.2s ease-out;
+}
+.ui-CollapsibleContent:where([data-state="closed"]) {
+  animation: collapsible-up 0.2s ease-out;
+}