@nsaa/core 0.1.0-alpha.2 → 0.1.0-alpha.3

package/src/styles.css

@@ -3,139 +3,9 @@
  *   @import "tailwindcss";
  *   @import "@nsaa/core/styles.css";
  */
-@import "@nsaa/tokens/css";
 
-/* The feel layer (#108): motion for the base-nova components, keyed to data-slot. */
-@import "./feel.css";
+@import "./styles-base.css";
 
-/* Let Tailwind see the class names used by the built components. */
+/* Let Tailwind see the class names used by every built component. For less CSS, import
+   styles-base.css and the sources of the components you use instead (see that file). */
 @source "../dist";
-
-/* `dark:` follows the mode axis (`.dark` or `data-mode="dark"` on an ancestor), not the OS, so the
-   shadcn classes (#84) switch with the rest of the tokens. The nearest mode wins (#120): a light
-   panel inside a dark page is light, and a dark panel inside that light panel is dark again. */
-@custom-variant dark (
-  &:where(
-    .dark,
-    [data-mode="dark"],
-    :is(.dark, [data-mode="dark"]) *:not([data-mode="light"], [data-mode="light"] *),
-    [data-mode="light"] [data-mode="dark"] *
-  )
-);
-
-/* shadcn's base layer (apps/v4 globals.css, `* { @apply border-border }`): a bare `border` class takes
-   the border token, not currentColor. Dialog's footer and the Drawer's edge rely on it (#84). */
-@layer base {
-  *,
-  ::after,
-  ::before {
-    border-color: var(--border);
-  }
-}
-
-/* shadcn's orientation variants (shadcn/tailwind.css, which the shadcn CLI imports for its users).
-   Base UI sets `data-orientation`, not `data-horizontal`; Tabs, Separator and Field use these (#84).
-   shadcn's other data-* variants match Base UI's attributes as Tailwind's defaults already. */
-@custom-variant data-horizontal {
-  &:where([data-orientation="horizontal"]) {
-    @slot;
-  }
-}
-
-@custom-variant data-vertical {
-  &:where([data-orientation="vertical"]) {
-    @slot;
-  }
-}
-
-/* shadcn's `data-selected` (same file): only `data-selected="true"`. cmdk writes "true" / "false", so
-   Tailwind's default (attribute present) would highlight every Command item (#84). */
-@custom-variant data-selected {
-  &:where([data-selected="true"]) {
-    @slot;
-  }
-}
-
-/* shadcn style hooks: `cn-rtl-flip` marks icons the shadcn CLI mirrors for right-to-left (the submenu
-   chevrons); `cn-input-otp` and two `cn-calendar-*` classes are styled by base-nova's style sheet, not
-   by the item's classes. */
-@layer components {
-  .cn-rtl-flip:where(:dir(rtl)) {
-    rotate: 180deg;
-  }
-
-  /* Input OTP's root: shadcn's style-nova.css gives `cn-input-otp` a `gap-2` between the groups. */
-  .cn-input-otp {
-    gap: calc(var(--spacing) * 2);
-  }
-
-  /* Calendar with captionLayout="dropdown" (#136): style-nova.css draws the month and year
-     dropdowns' border and focus ring, and pads the caption label; the item's classes don't. */
-  .cn-calendar-dropdown-root {
-    border: 1px solid var(--input);
-
-    &:has(:focus) {
-      border-color: var(--ring);
-      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
-
-  .cn-calendar-caption-label {
-    height: calc(var(--spacing) * 6);
-    padding-right: calc(var(--spacing) * 1);
-    padding-left: calc(var(--spacing) * 1.5);
-  }
-}
-
-/* Hover only where hovering is real (fine pointers), never on disabled, busy or read-only controls. */
-@custom-variant hover-fine {
-  @media (hover: hover) and (pointer: fine) {
-    &:hover:not([data-disabled], [data-loading], [data-readonly]) {
-      @slot;
-    }
-  }
-}
-
-/* Pressed look, never on disabled or busy controls. */
-@custom-variant pressed {
-  &:active:not([data-disabled], [data-loading]) {
-    @slot;
-  }
-}
-
-/* shadcn's `no-scrollbar` (apps/v4 globals.css), used by the Combobox list (#84). `cn-menu-target`
-   and `cn-menu-translucent` on Select and Combobox popups are inert markers the shadcn CLI keeps for
-   its optional translucent-menu setting; nothing styles them by default, so neither do we. */
-@utility no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-/* Input OTP's fake caret (`animate-caret-blink`, #84). shadcn's apps/v4 globals.css defines it; the
-   base-nova registry item doesn't ship it, so core does (and the `input-otp` registry item adds it).
-   One blink is `duration.caret` (1.25 s, as shadcn's; #125). Under reduced motion the caret stays solid. */
-@theme {
-  --animate-caret-blink: caret-blink var(--nsaa-duration-caret) ease-out infinite;
-
-  @keyframes caret-blink {
-    0%,
-    70%,
-    100% {
-      opacity: 1;
-    }
-    20%,
-    50% {
-      opacity: 0;
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animate-caret-blink {
-    animation: none;
-  }
-}