@typlog/ui 0.12.2 → 0.13.0

package/components/toggle.css

@@ -1,217 +0,0 @@
-
-.ui-Toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  width: var(--toggle-size);
-  height: var(--toggle-size);
-}
-.ui-Toggle:where(.r-size-1) {
-  border-radius: max(var(--radius-1), var(--radius-full));
-  font-size: var(--font-size-1);
-  --toggle-size: var(--space-5);
-}
-.ui-Toggle:where(.r-size-2) {
-  border-radius: max(var(--radius-2), var(--radius-full));
-  font-size: var(--font-size-3);
-  --toggle-size: var(--space-6);
-}
-.ui-Toggle:where(.r-size-3) {
-  border-radius: max(var(--radius-3), var(--radius-full));
-  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);
-}
-
-.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);
-}
-
-.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);
-}