@typlog/ui 0.12.3 → 0.13.0

package/components/tabs.css

@@ -1,200 +0,0 @@
-
-.ui-TabsList::-webkit-scrollbar {
-  display: none;
-}
-.ui-TabsList:where(.r-size-1) {
-  --tab-font-size: var(--font-size-1);
-  --tab-line-height: var(--line-height-1);
-  --tab-letter-spacing: var(--letter-spacing-1);
-  --tab-height: var(--space-6);
-  --tab-padding-x: var(--space-1);
-  --tab-radius: max(var(--radius-2), var(--radius-full));
-  --tab-item-radius: max(var(--radius-1), var(--radius-full));
-  --tab-inner-padding-x: var(--space-1);
-  --tab-inner-height: var(--space-5);
-}
-.ui-TabsList:where(.r-size-2) {
-  --tab-font-size: var(--font-size-2);
-  --tab-line-height: var(--line-height-2);
-  --tab-letter-spacing: var(--letter-spacing-2);
-  --tab-height: var(--space-7);
-  --tab-padding-x: var(--space-2);
-  --tab-radius: max(var(--radius-3), var(--radius-full));
-  --tab-item-radius: max(var(--radius-2), var(--radius-full));
-  --tab-inner-padding-x: var(--space-2);
-  --tab-inner-height: calc(var(--space-6) - var(--space-1));
-}
-.ui-TabsList:where(.r-variant-surface.r-size-1),
-.ui-TabsList:where(.r-variant-soft.r-size-1) {
-  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
-}
-@layer components {
-.ui-TabsList {
-    justify-content: flex-start;
-    position: relative;
-    overflow-x: auto;
-    white-space: nowrap;
-    font-style: normal;
-    scrollbar-width: none;
-    font-size: var(--tab-font-size);
-    line-height: var(--tab-line-height);
-    letter-spacing: var(--tab-letter-spacing);
-}
-
-  /** classic & surface */
-.ui-TabsList:where(.r-variant-surface, .r-variant-classic) {
-    position: relative;
-    display: inline-flex;
-    width: -moz-fit-content;
-    width: fit-content;
-    align-items: center;
-    vertical-align: top;
-    flex-shrink: 0;
-    border-radius: var(--tab-radius);
-}
-.ui-TabsList:where(.r-variant-classic) {
-    background-color: var(--accent-a3);
-    padding-left: var(--tab-padding-x);
-    padding-right: var(--tab-padding-x);
-}
-.ui-TabsList:where(.r-variant-surface) {
-    --tab-item-radius: 0;
-    --tab-inner-height: var(--tab-height);
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-}
-
-  /** soft & outline */
-.ui-TabsList:where(.r-variant-outline, .r-variant-soft) {
-    display: flex;
-    box-shadow: inset 0 -1px 0 0 var(--gray-a5);
-}
-.ui-TabsList:where(.r-variant-soft) {
-    padding-left: var(--tab-padding-x);
-    padding-right: var(--tab-padding-x);
-}
-}
-.ui-TabsIndicator {
-  position: absolute;
-  left: 0;
-  transition-property: width, transform;
-  transform: translateX(var(--reka-tabs-indicator-position));
-  width: var(--reka-tabs-indicator-size);
-}
-.ui-TabsList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
-  top: 0;
-  height: var(--tab-height);
-  background-color: var(--accent-a3);
-  transition-duration: 100ms;
-}
-.ui-TabsList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
-  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
-  height: var(--tab-inner-height);
-  background-color: var(--color-panel-solid);
-  box-shadow:
-    0 0 0 0.5px var(--black-a1),
-    0 1px 1px 0 var(--gray-a2),
-    0 2px 1px -1px var(--black-a1),
-    0 1px 3px 0 var(--black-a1);
-  border-radius: var(--tab-item-radius);
-  transition-duration: 100ms;
-}
-.ui-TabsList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
-  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
-  height: var(--tab-inner-height);
-  background-color: var(--accent-a3);
-  border-radius: var(--tab-item-radius);
-  transition-duration: 100ms;
-}
-.ui-TabsList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
-  bottom: 0;
-  height: 2px;
-  background-color: var(--accent-indicator);
-  transition-duration: 300ms;
-}
-
-/** high contrast */
-:where(.ui-TabsList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
-  background-color: var(--accent-12);
-}
-
-.ui-TabTrigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  box-sizing: border-box;
-  height: var(--tab-height);
-  color: var(--gray-a11);
-  outline: none;
-}
-.ui-TabTrigger:disabled {
-  color: var(--gray-a8);
-  border-color: currentColor;
-}
-.ui-TabTriggerInner,
-.ui-TabTriggerInnerHidden {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: var(--tab-inner-height);
-  padding-left: var(--tab-inner-padding-x);
-  padding-right: var(--tab-inner-padding-x);
-  border-radius: var(--tab-item-radius);
-}
-.ui-TabTriggerInner {
-  position: absolute;
-}
-:where(.ui-TabTrigger[data-state='inactive']) .ui-TabTriggerInner {
-  letter-spacing: var(--tab-inactive-letter-spacing);
-  word-spacing: var(--tab-inactive-word-spacing);
-}
-:where(.ui-TabTrigger[data-state='active']) .ui-TabTriggerInner {
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--tab-active-letter-spacing);
-  word-spacing: var(--tab-active-word-spacing);
-}
-.ui-TabTriggerInnerHidden {
-  visibility: hidden;
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--tab-active-letter-spacing);
-  word-spacing: var(--tab-active-word-spacing);
-}
-@media (hover: hover) {
-.ui-TabsList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
-    color: var(--gray-12);
-}
-.ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger:hover) {
-    color: var(--accent-a11);
-}
-.ui-TabsList:where(.r-variant-outline) :where(.ui-TabTrigger:not(:disabled):hover) :where(.ui-TabTriggerInner) {
-    background-color: var(--gray-a3);
-}
-.ui-TabTrigger:where(:focus-visible:hover) :where(.ui-TabTriggerInner) {
-    background-color: var(--accent-a3);
-}
-}
-.ui-TabTrigger:where(:focus-visible) :where(.ui-TabTriggerInner) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: -2px;
-}
-.ui-TabsList:where(.r-variant-outline) :where(.ui-TabTrigger) {
-  padding-left: var(--tab-padding-x);
-  padding-right: var(--tab-padding-x);
-}
-.ui-TabsList:where(.r-variant-classic, .r-variant-outline) :where(.ui-TabTrigger[data-state='active']) {
-  color: var(--gray-12);
-}
-.ui-TabsList:where(.r-variant-soft) :where(.ui-TabTrigger + .ui-TabTrigger) {
-  margin-left: calc(var(--tab-padding-x) / 2)
-}
-.ui-TabsList:where(.r-variant-surface) :where(.ui-TabTrigger + .ui-TabTrigger) {
-  box-shadow: inset 1px 0 0 var(--gray-a4);
-}
-.ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger[data-state='active']) {
-  color: var(--accent-a11);
-}

package/components/toggle.css

@@ -1,225 +0,0 @@
-
-@layer components {
-.ui-Toggle {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: top;
-    flex-shrink: 0;
-    border-radius: var(--toggle-border-radius);
-    font-size: var(--toggle-font-size);
-    width: var(--toggle-size);
-    height: var(--toggle-size);
-}
-}
-.ui-Toggle:where(.r-size-1) {
-  --toggle-border-radius: max(var(--radius-1), var(--radius-full));
-  --toggle-font-size: var(--font-size-1);
-  --toggle-size: var(--space-5);
-}
-.ui-Toggle:where(.r-size-2) {
-  --toggle-border-radius: max(var(--radius-2), var(--radius-full));
-  --toggle-font-size: var(--font-size-3);
-  --toggle-size: var(--space-6);
-}
-.ui-Toggle:where(.r-size-3) {
-  --toggle-border-radius: max(var(--radius-3), var(--radius-full));
-  --toggle-font-size: var(--font-size-6);
-  --toggle-size: var(--space-7);
-}
-
-/** soft */
-.ui-Toggle:where(.r-variant-soft) {
-  background-color: var(--color-panel-translucent);
-  box-shadow: var(--shadow-2);
-}
-@media (hover: hover) {
-.ui-Toggle:where(.r-variant-soft):where(:hover) {
-    background-color: var(--accent-a2);
-}
-}
-.ui-Toggle:where(.r-variant-soft):where(:focus-visible) {
-  outline: 2px solid var(--accent-8);
-  outline-offset: -1px;
-}
-.ui-Toggle:where(.r-variant-soft):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
-}
-.ui-Toggle:where(.r-variant-soft):where([data-state="on"]) {
-  background-color: var(--accent-a3);
-  box-shadow: var(--shadow-1);
-}
-
-/** solid & ghost*/
-.ui-Toggle:where(.r-variant-solid) {
-  background-color: var(--color-panel-solid);
-  box-shadow: var(--shadow-2);
-}
-@media (hover: hover) {
-.ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(:hover) {
-    background-color: var(--accent-a3);
-}
-}
-.ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-.ui-Toggle:where(.r-variant-solid):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
-}
-.ui-Toggle:where(.r-variant-ghost):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: transparent;
-}
-.ui-Toggle:where(.r-variant-solid):where([data-state="on"]) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-  box-shadow: var(--shadow-1);
-}
-.ui-Toggle:where(.r-variant-ghost):where([data-state="on"]) {
-  background-color: var(--accent-a3);
-  box-shadow: var(--shadow-1);
-}
-.ui-Toggle:where(.r-variant-solid, .r-variant-ghost):where(.r-high-contrast):where([data-state="on"]) {
-  background-color: var(--accent-12);
-  color: var(--gray-1);
-}
-
-@layer components {
-.ui-ToggleGroupRoot {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: top;
-    flex-shrink: 0;
-    height: var(--toggle-group-height);
-}
-}
-.ui-ToggleGroupRoot:where(.r-size-1) {
-  font-size: var(--font-size-1);
-  --toggle-radius: max(var(--radius-1), var(--radius-full));
-  --toggle-group-height: var(--space-5);
-  --toggle-group-soft-padding: 1px;
-}
-.ui-ToggleGroupRoot:where(.r-size-2) {
-  font-size: var(--font-size-3);
-  --toggle-radius: max(var(--radius-2), var(--radius-full));
-  --toggle-group-height: var(--space-6);
-  --toggle-group-soft-padding: 2px;
-}
-.ui-ToggleGroupRoot:where(.r-size-3) {
-  font-size: var(--font-size-6);
-  --toggle-radius: max(var(--radius-3), var(--radius-full));
-  --toggle-group-height: var(--space-7);
-  --toggle-group-soft-padding: 3px;
-}
-.ui-ToggleGroupRoot:where(.r-variant-solid),
-.ui-ToggleGroupRoot:where(.r-variant-outline),
-.ui-ToggleGroupRoot:where(.r-variant-surface) {
-  border-radius: var(--toggle-radius);
-  background-color: var(--color-panel-solid);
-  box-shadow: var(--shadow-2);
-  --toggle-item-size: var(--toggle-group-height);
-}
-.ui-ToggleGroupRoot:where(.r-variant-soft) {
-  border-radius: var(--toggle-radius);
-  background-color: var(--color-panel-translucent);
-  box-shadow: var(--shadow-2);
-  padding: var(--toggle-group-soft-padding);
-  gap: var(--toggle-group-soft-padding);
-  --toggle-item-size: calc(var(--toggle-group-height) - 2 * var(--toggle-group-soft-padding));
-}
-.ui-ToggleGroupRoot:where(.r-variant-ghost) {
-  gap: calc(var(--space-1) / 2);
-  --toggle-item-size: var(--toggle-group-height);
-}
-
-@layer components {
-.ui-ToggleGroupItem {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: top;
-    flex-shrink: 0;
-    width: var(--toggle-item-size);
-    height: var(--toggle-item-size);
-}
-}
-.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:first-child) {
-  border-top-left-radius: var(--toggle-radius);
-  border-bottom-left-radius: var(--toggle-radius);
-}
-.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:last-child) {
-  border-top-right-radius: var(--toggle-radius);
-  border-bottom-right-radius: var(--toggle-radius);
-}
-.ui-ToggleGroupRoot:where(.r-variant-soft, .r-variant-ghost) :where(.ui-ToggleGroupItem) {
-  border-radius: var(--toggle-radius);
-}
-
-/** soft */
-@media (hover: hover) {
-.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem:hover) {
-    background-color: var(--accent-a2);
-}
-}
-.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem:focus-visible) {
-  outline: 2px solid var(--accent-8);
-  outline-offset: -1px;
-}
-.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem[data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
-}
-.ui-ToggleGroupRoot:where(.r-variant-soft) :where(.ui-ToggleGroupItem[data-state="on"]) {
-  background-color: var(--accent-a4);
-}
-
-/** solid, surface ghost */
-@media (hover: hover) {
-.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline, .r-variant-ghost) :where(.ui-ToggleGroupItem:hover) {
-    background-color: var(--accent-a3);
-}
-}
-:where(.ui-ToggleGroupRoot.r-variant-surface, .r-variant-outline) .ui-ToggleGroupItem + .ui-ToggleGroupItem {
-  box-shadow: inset 1px 0 0 0 var(--gray-a4);
-}
-.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outoine, .r-variant-ghost) :where(.ui-ToggleGroupItem:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-.ui-ToggleGroupRoot:where(.r-variant-solid) :where(.ui-ToggleGroupItem[data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
-}
-.ui-ToggleGroupRoot:where(.r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem[data-disabled]) {
-  color: var(--gray-a8);
-}
-.ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-disabled]) {
-  color: var(--gray-a8);
-  background-color: transparent;
-}
-.ui-ToggleGroupRoot:where(.r-variant-solid) :where(.ui-ToggleGroupItem[data-state="on"]) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-  box-shadow: var(--shadow-1);
-}
-.ui-ToggleGroupRoot:where(.r-variant-surface) :where(.ui-ToggleGroupItem[data-state="on"]) {
-  background-color: var(--accent-a3);
-  color: var(--accent-a11);
-}
-.ui-ToggleGroupRoot:where(.r-variant-outline) :where(.ui-ToggleGroupItem[data-state="on"]) {
-  color: var(--accent-a11);
-}
-.ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-state="on"]) {
-  background-color: var(--accent-a4);
-}
-.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-ghost):where(.r-high-contrast) :where(.ui-ToggleGroupItem[data-state="on"]) {
-  background-color: var(--accent-12);
-  color: var(--gray-1);
-}

package/components/tooltip.css

@@ -1,45 +0,0 @@
-
-.ui-Tooltip {
-  box-sizing: border-box;
-  padding: var(--space-1) var(--space-2);
-  border-radius: var(--radius-2);
-  transform-origin: var(--reka-tooltip-content-transform-origin);
-  animation-duration: 140ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  background-color: var(--accent-11);
-}
-@media (prefers-reduced-motion: no-preference) {
-.ui-Tooltip:where([data-state='delayed-open']):where([data-side='top']) {
-    animation-name: ui-slide-from-top, ui-fade-in;
-}
-.ui-Tooltip:where([data-state='delayed-open']):where([data-side='bottom']) {
-    animation-name: ui-slide-from-bottom, ui-fade-in;
-}
-.ui-Tooltip:where([data-state='delayed-open']):where([data-side='left']) {
-    animation-name: ui-slide-from-left, ui-fade-in;
-}
-.ui-Tooltip:where([data-state='delayed-open']):where([data-side='right']) {
-    animation-name: ui-slide-from-right, ui-fade-in;
-}
-}
-.ui-TooltipText {
-  color: var(--gray-1);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-}
-.ui-TooltipArrow {
-  fill: var(--accent-11);
-}
-
-/* special handle for gray color */
-.ui-Tooltip:where([data-accent-color="gray"]) {
-  background-color: var(--gray-12);
-}
-.ui-Tooltip:where([data-accent-color="gray"]) :where(.ui-TooltipArrow) {
-  fill: var(--gray-12);
-}