@idds/styles 1.0.26

package/src/components/toast.css

@@ -0,0 +1,245 @@
+/* Toast Component Styles */
+
+/* Base container */
+.ina-toast-container {
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
+  display: flex;
+  gap: var(--ina-spacing-2);
+  padding: var(--ina-spacing-2);
+}
+
+/* Position variants */
+.ina-toast-container--top-left {
+  top: var(--ina-spacing-4);
+  left: var(--ina-spacing-4);
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.ina-toast-container--top-right {
+  top: var(--ina-spacing-4);
+  right: var(--ina-spacing-4);
+  align-items: flex-end;
+  flex-direction: column;
+}
+
+.ina-toast-container--top-middle {
+  top: var(--ina-spacing-4);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  flex-direction: column;
+}
+
+.ina-toast-container--bottom-left {
+  bottom: var(--ina-spacing-4);
+  left: var(--ina-spacing-4);
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.ina-toast-container--bottom-right {
+  bottom: var(--ina-spacing-4);
+  right: var(--ina-spacing-4);
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+
+.ina-toast-container--bottom-middle {
+  bottom: var(--ina-spacing-4);
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  flex-direction: column-reverse;
+}
+
+.ina-toast-container--left-middle {
+  top: 50%;
+  left: var(--ina-spacing-4);
+  transform: translateY(-50%);
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.ina-toast-container--right-middle {
+  top: 50%;
+  right: var(--ina-spacing-4);
+  transform: translateY(-50%);
+  align-items: flex-end;
+  flex-direction: column;
+}
+
+/* Toast item wrapper */
+.ina-toast-item {
+  pointer-events: none;
+}
+
+/* Toast itself */
+.ina-toast {
+  pointer-events: auto;
+  border-radius: var(--ina-radius-lg);
+  box-shadow: 0 12px 16px -4px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  padding: var(--ina-spacing-4);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 24rem;
+  transition: opacity 300ms ease-in-out;
+  background-color: var(--ina-background-primary);
+  border: 1px solid var(--ina-stroke-primary);
+  color: var(--ina-content-primary);
+}
+
+/* Toast content */
+.ina-toast__content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.ina-toast__icon {
+  margin-right: var(--ina-spacing-2);
+}
+
+/* Toast text area */
+.ina-toast__text-area {
+  display: flex;
+  flex-direction: column;
+}
+
+.ina-toast__title {
+  font-size: var(--ina-font-xs);
+  font-weight: var(--ina-font-semibold);
+  line-height: 1.4;
+}
+
+.ina-toast__description {
+  margin-top: var(--ina-spacing-1);
+  font-size: var(--ina-font-2xs);
+  line-height: 1.4;
+}
+
+/* Action area */
+.ina-toast__action-area {
+  margin-left: var(--ina-spacing-3);
+  flex-shrink: 0;
+}
+
+/* Close button */
+.ina-toast__close-button {
+  margin-left: var(--ina-spacing-2);
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: stroke-width var(--ina-transition-base);
+}
+
+.ina-toast__close-button:hover {
+  stroke-width: 3;
+}
+
+.ina-toast__close-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Style variants */
+.ina-toast--style-outline {
+}
+.ina-toast--style-solid {
+}
+
+/* Variant styles - Outline */
+.ina-toast--variant-neutral.ina-toast--style-outline {
+  background-color: var(--ina-neutral-25) !important;
+  border: 1px solid var(--ina-content-primary) !important;
+  color: var(--ina-content-primary) !important;
+}
+
+.ina-toast--variant-positive.ina-toast--style-outline {
+  background-color: var(--ina-positive-100) !important;
+  border: 1px solid var(--ina-positive-500) !important;
+  color: var(--ina-positive-500) !important;
+}
+
+.ina-toast--variant-warning.ina-toast--style-outline {
+  background-color: var(--ina-warning-100) !important;
+  border: 1px solid var(--ina-warning-500) !important;
+  color: var(--ina-warning-500) !important;
+}
+
+.ina-toast--variant-info.ina-toast--style-outline {
+  background-color: var(--ina-info-100) !important;
+  border: 1px solid var(--ina-info-300) !important;
+  color: var(--ina-info-500) !important;
+}
+
+.ina-toast--variant-negative.ina-toast--style-outline {
+  background-color: var(--ina-negative-100) !important;
+  border: 1px solid var(--ina-negative-300) !important;
+  color: var(--ina-negative-500) !important;
+}
+
+/* Variant styles - Solid */
+.ina-toast--variant-neutral.ina-toast--style-solid {
+  background-color: var(--ina-neutral-25) !important;
+  border: 1px solid var(--ina-content-primary) !important;
+  color: var(--ina-content-primary) !important;
+}
+
+.ina-toast--variant-positive.ina-toast--style-solid {
+  background-color: var(--ina-positive-500) !important;
+  border: 1px solid var(--ina-positive-500) !important;
+  color: var(--ina-white) !important;
+}
+
+.ina-toast--variant-warning.ina-toast--style-solid {
+  background-color: var(--ina-warning-500) !important;
+  border: 1px solid var(--ina-warning-500) !important;
+  color: var(--ina-white) !important;
+}
+
+.ina-toast--variant-info.ina-toast--style-solid {
+  background-color: var(--ina-info-500) !important;
+  border: 1px solid var(--ina-info-500) !important;
+  color: var(--ina-white) !important;
+}
+
+.ina-toast--variant-negative.ina-toast--style-solid {
+  background-color: var(--ina-negative-500) !important;
+  border: 1px solid var(--ina-negative-500) !important;
+  color: var(--ina-white) !important;
+}
+
+/* Visibility states */
+.ina-toast--visible {
+  opacity: 1;
+}
+
+.ina-toast--hidden {
+  opacity: 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .ina-toast {
+    max-width: calc(100vw - var(--ina-spacing-8));
+    padding: var(--ina-spacing-3);
+  }
+
+  .ina-toast__title {
+    font-size: var(--ina-font-sm);
+  }
+
+  .ina-toast__description {
+    font-size: var(--ina-font-xs);
+  }
+}

package/src/components/toggle.css

@@ -0,0 +1,223 @@
+/* =========================== */
+/* TOGGLE SWITCH STYLES */
+/* =========================== */
+
+.ina-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.ina-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Hide the actual input */
+.ina-toggle__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+}
+
+/* Track (the background oval) */
+.ina-toggle__track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: var(--ina-stroke-secondary);
+  border-radius: 9999px;
+  transition: all var(--ina-transition-duration-200) ease-in-out;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+
+.ina-toggle__track--checked {
+  background-color: var(--ina-primary-500);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.ina-toggle__track--disabled {
+  background-color: var(--ina-stroke-tertiary);
+  cursor: not-allowed;
+}
+
+.ina-toggle__track--disabled.ina-toggle__track--checked {
+  background-color: var(--ina-stroke-tertiary);
+}
+
+/* Thumb (the sliding circle) */
+.ina-toggle__thumb {
+  position: absolute;
+  background-color: var(--ina-background-primary);
+  border-radius: 50%;
+  transition: all var(--ina-transition-duration-200) ease-in-out;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transform: translateX(0);
+}
+
+.ina-toggle__thumb--checked {
+  transform: translateX(100%);
+}
+
+.ina-toggle__thumb--disabled {
+  background-color: var(--ina-background-secondary);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* Size variants */
+.ina-toggle--size-sm .ina-toggle__track {
+  width: 36px;
+  height: 20px;
+}
+
+.ina-toggle--size-sm .ina-toggle__thumb {
+  width: 16px;
+  height: 16px;
+  top: 2px;
+  left: 2px;
+}
+
+.ina-toggle--size-sm .ina-toggle__thumb--checked {
+  transform: translateX(16px);
+}
+
+.ina-toggle--size-md .ina-toggle__track {
+  width: 44px;
+  height: 24px;
+}
+
+.ina-toggle--size-md .ina-toggle__thumb {
+  width: 20px;
+  height: 20px;
+  top: 2px;
+  left: 2px;
+}
+
+.ina-toggle--size-md .ina-toggle__thumb--checked {
+  transform: translateX(20px);
+}
+
+.ina-toggle--size-lg .ina-toggle__track {
+  width: 52px;
+  height: 28px;
+}
+
+.ina-toggle--size-lg .ina-toggle__thumb {
+  width: 24px;
+  height: 24px;
+  top: 2px;
+  left: 2px;
+}
+
+.ina-toggle--size-lg .ina-toggle__thumb--checked {
+  transform: translateX(24px);
+}
+
+/* Hover states */
+.ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__track {
+  background-color: var(--ina-stroke-primary);
+}
+
+.ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__track--checked {
+  background-color: var(--ina-primary-600);
+}
+
+.ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__thumb {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+/* Focus states */
+.ina-toggle__input:focus + .ina-toggle__track {
+  outline: 2px solid var(--ina-primary-500);
+  outline-offset: 2px;
+}
+
+.ina-toggle__input:focus:not(:focus-visible) + .ina-toggle__track {
+  outline: none;
+}
+
+/* Active states */
+.ina-toggle:not(.ina-toggle--disabled):active .ina-toggle__thumb {
+  transform: scale(0.95);
+}
+
+.ina-toggle:not(.ina-toggle--disabled):active .ina-toggle__thumb--checked {
+  transform: translateX(20px) scale(0.95);
+}
+
+.ina-toggle--size-sm:not(.ina-toggle--disabled):active
+  .ina-toggle__thumb--checked {
+  transform: translateX(16px) scale(0.95);
+}
+
+.ina-toggle--size-lg:not(.ina-toggle--disabled):active
+  .ina-toggle__thumb--checked {
+  transform: translateX(24px) scale(0.95);
+}
+
+/* Dark mode */
+[data-theme='dark'] .ina-toggle__track {
+  background-color: var(--ina-stroke-secondary);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme='dark'] .ina-toggle__track--checked {
+  background-color: var(--ina-primary-500);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme='dark'] .ina-toggle__track--disabled {
+  background-color: var(--ina-stroke-tertiary);
+}
+
+[data-theme='dark'] .ina-toggle__track--disabled.ina-toggle__track--checked {
+  background-color: var(--ina-stroke-tertiary);
+}
+
+[data-theme='dark'] .ina-toggle__thumb {
+  background-color: var(--ina-background-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme='dark'] .ina-toggle__thumb--disabled {
+  background-color: var(--ina-background-secondary);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark']
+  .ina-toggle:not(.ina-toggle--disabled):hover
+  .ina-toggle__track {
+  background-color: var(--ina-stroke-primary);
+}
+
+[data-theme='dark']
+  .ina-toggle:not(.ina-toggle--disabled):hover
+  .ina-toggle__track--checked {
+  background-color: var(--ina-primary-600);
+}
+
+[data-theme='dark']
+  .ina-toggle:not(.ina-toggle--disabled):hover
+  .ina-toggle__thumb {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+[data-theme='dark'] .ina-toggle__input:focus + .ina-toggle__track {
+  outline-color: var(--ina-primary-400);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .ina-toggle__track,
+  .ina-toggle__thumb {
+    transition: none;
+  }
+}