@jovertical/mise-design-system 0.0.0-stage → 1.1.0

package/dist/styles/components.css

@@ -0,0 +1,192 @@
+/**
+ * Component overrides: styles that extend components beyond what a class
+ * string can say. Appended to the generated theme in dist/theme.css.
+ *
+ * Adapted from the React package 2.23.0 src/styles/components.css.
+ */
+
+/* =============================================================================
+   Toasts – type-based colouring on the role ramps (success, critical, warning,
+   info). Adapted from the React package's toast block, which read
+   its own brand ramps; info read the brand ramp there and reads info here.
+   ============================================================================= */
+
+.mise-toast[data-type='success'] {
+  background: var(--color-success-50);
+  border-color: var(--color-success-300);
+  color: var(--color-success-900);
+}
+.mise-toast[data-type='success'] [data-icon] {
+  color: var(--color-success-600);
+}
+.dark .mise-toast[data-type='success'] {
+  background: var(--color-success-900);
+  border-color: var(--color-success-700);
+  /* Without this the title keeps the light rule's 900 and is painted in the
+     dark background's own colour. */
+  color: var(--color-success-100);
+}
+.dark .mise-toast[data-type='success'] [data-icon] {
+  color: var(--color-success-400);
+}
+
+.mise-toast[data-type='error'] {
+  background: var(--color-critical-50);
+  border-color: var(--color-critical-300);
+  color: var(--color-critical-900);
+}
+.mise-toast[data-type='error'] [data-icon] {
+  color: var(--color-critical-600);
+}
+.dark .mise-toast[data-type='error'] {
+  background: var(--color-critical-900);
+  border-color: var(--color-critical-700);
+  color: var(--color-critical-100);
+}
+.dark .mise-toast[data-type='error'] [data-icon] {
+  color: var(--color-critical-400);
+}
+
+.mise-toast[data-type='warning'] {
+  background: var(--color-warning-50);
+  border-color: var(--color-warning-300);
+  color: var(--color-warning-900);
+}
+.mise-toast[data-type='warning'] [data-icon] {
+  color: var(--color-warning-600);
+}
+.dark .mise-toast[data-type='warning'] {
+  background: var(--color-warning-900);
+  border-color: var(--color-warning-700);
+  color: var(--color-warning-100);
+}
+.dark .mise-toast[data-type='warning'] [data-icon] {
+  color: var(--color-warning-400);
+}
+
+.mise-toast[data-type='info'] {
+  background: var(--color-info-50);
+  border-color: var(--color-info-300);
+  color: var(--color-info-900);
+}
+.mise-toast[data-type='info'] [data-icon] {
+  color: var(--color-info-600);
+}
+.dark .mise-toast[data-type='info'] {
+  background: var(--color-info-900);
+  border-color: var(--color-info-700);
+  color: var(--color-info-100);
+}
+.dark .mise-toast[data-type='info'] [data-icon] {
+  color: var(--color-info-400);
+}
+
+/* The description stays muted and readable on a dark toast. */
+[data-sonner-toast] [data-content] {
+  gap: 1px;
+}
+
+[data-sonner-toaster] [data-description] {
+  color: var(--muted-foreground);
+}
+
+[data-sonner-toaster] [data-title] {
+  font-size: 14px;
+}
+
+/* =============================================================================
+   Disabled link buttons – an <a> has no :disabled, so Button sets
+   aria-disabled and drops its href instead. This draws it the way
+   `disabled:pointer-events-none disabled:opacity-50` draws a <button>.
+   ============================================================================= */
+
+[data-slot='button'][aria-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Scrollbars – thin, rounded, theme-aware, floating (no layout space)
+   ============================================================================= */
+
+/* Overlay / floating: scrollbar does not change container width when it appears.
+   (overflow: overlay is supported in Safari; in other browsers the thin 6px bar minimizes shift.) */
+html,
+body {
+  overflow: overlay;
+}
+
+/* Thin scrollbar styling – all elements */
+* {
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--color-muted-foreground);
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Utility: use on scroll containers so scrollbar doesn’t take layout space.
+   Scrollbar sits in the padding; negative margin keeps container width unchanged. */
+.scrollbar-floating {
+  margin-inline-end: -6px;
+  padding-inline-end: 6px;
+}
+.scrollbar-floating-x {
+  margin-block-end: -6px;
+  padding-block-end: 6px;
+}
+
+/* =============================================================================
+   Navigation progress – a highlight band moving along the bar. Adapted from
+   the React package's .navigation-progress-shimmer, under the mise- prefix.
+   ============================================================================= */
+
+@keyframes mise-navigation-progress-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+.mise-navigation-progress-shimmer {
+  width: 50%;
+  min-width: 160px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    oklch(1 0 0 / 0.25) 12%,
+    oklch(1 0 0 / 0.55) 20%,
+    oklch(1 0 0 / 0.25) 28%,
+    transparent 40%,
+    oklch(1 0 0 / 0.25) 52%,
+    oklch(1 0 0 / 0.55) 60%,
+    oklch(1 0 0 / 0.25) 68%,
+    transparent 100%
+  );
+  animation: mise-navigation-progress-shimmer 1.4s ease-in-out infinite;
+}