@kofile/gds-foundations 1.2.2 → 1.4.1

package/build/css/components/toast.module.css

@@ -0,0 +1,117 @@
+/*  /Users/mmhuntsberry/Desktop/design-system/packages/foundations/build/css/components/toast.module.css */
+
+button {
+  all: unset;
+}
+
+.viewport {
+  --viewport-padding: var(--spacing-xs);
+
+  transform: translateX(var(--viewport-translate-x));
+  display: flex;
+  position: fixed;
+
+  width: 100%;
+  justify-content: center;
+  padding: var(--viewport-padding);
+  gap: var(--spacing-xs);
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: var(--elevation-absolute-top);
+  outline: none;
+}
+
+.viewport[data-position="bottom"] {
+  bottom: var(--spacing-3xl);
+}
+
+.viewport[data-position="top"] {
+  top: var(--spacing-3xl);
+}
+
+.root {
+  background-color: var(--color-neutral-200);
+  border-radius: var(--primitive-6);
+  border: var(--border-width-sm) solid var(--color-neutral-300);
+  padding: var(--spacing-md);
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-xs);
+}
+.root[data-state="open"] {
+  animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.root[data-state="closed"] {
+  animation: hide 100ms ease-in;
+}
+.root[data-swipe="move"] {
+  transform: translateX(var(--radix-toast-swipe-move-x));
+}
+.root[data-swipe="cancel"] {
+  transform: translateX(0);
+  transition: transform 200ms ease-out;
+}
+.root[data-swipe="end"] {
+  animation: swipeOut 100ms ease-out;
+}
+.root[data-status="success"] {
+  background-color: var(--color-success-100);
+  border-color: var(--color-neutral-300);
+  color: var(--color-success-900);
+}
+.root[data-status="highlight"] {
+  background-color: var(--color-highlight-200);
+  border-color: var(--color-neutral-300);
+  color: var(--color-highlight-900);
+}
+
+@keyframes hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes swipeOut {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--primitive-5);
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  line-height: var(--line-heights-md);
+  font-weight: var(--font-weights-semibold);
+  color: var(--color-neutral-900);
+}
+
+.description {
+  margin: 0;
+  color: var(--primitive-gray-800);
+  font: var(--font-size-md-regular);
+}
+
+.action {
+  grid-area: action;
+}

package/build/css/components/tooltip.module.css

@@ -0,0 +1,85 @@
+/* reset */
+button {
+  all: unset;
+}
+
+.content {
+  --gds-tooltip-width: fit-content;
+  --radix-tooltip-trigger-width: var(--gds-tooltip-width);
+  /* --radix-tooltip-content-available-width: var(--gds-tooltip-width); */
+
+  border-radius: var(--border-radius-sm);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  color: var(--color-neutral-lightest);
+  background-color: var(--color-neutral-darkest);
+  box-shadow: var(--shadow-sm);
+  user-select: none;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+  width: var(--radix-tooltip-content-available-width);
+  max-width: var(--gds-tooltip-width);
+  z-index: var(--elevation-absolute-top);
+}
+.content[data-state="delayed-open"][data-side="top"] {
+  animation-name: slideDownAndFade;
+}
+.content[data-state="delayed-open"][data-side="right"] {
+  animation-name: slideLeftAndFade;
+}
+.content[data-state="delayed-open"][data-side="bottom"] {
+  animation-name: slideUpAndFade;
+}
+.content[data-state="delayed-open"][data-side="left"] {
+  animation-name: slideRightAndFade;
+}
+
+.arrow {
+  fill: var(--color-neutral-darkest);
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}