@astronox/core 0.1.0

package/src/styles/interaction.css

@@ -0,0 +1,108 @@
+[data-interaction-accent] {
+  --nox-interaction-accent-hover-background: color-mix(
+    in srgb,
+    var(--nox-tone-color) 3%,
+    var(--nox-surface)
+  );
+  --nox-interaction-accent-active-background: color-mix(
+    in srgb,
+    var(--nox-link-active) 8%,
+    var(--nox-surface)
+  );
+  --nox-interaction-accent-color: var(--nox-link-active);
+
+  position: relative;
+}
+
+[data-interaction-accent='start']::before {
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 4px;
+  border-start-end-radius: var(--nox-radius-pill);
+  border-end-end-radius: var(--nox-radius-pill);
+  background: var(--nox-interaction-accent-color);
+  content: '';
+  opacity: 0;
+  transform: scaleY(0.68);
+  transform-origin: center;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [data-interaction-accent]:hover {
+    background: var(--nox-interaction-accent-hover-background);
+  }
+
+  [data-interaction-accent]:hover::before {
+    opacity: 0.72;
+    transform: scaleY(0.86);
+  }
+}
+
+[data-interaction-accent][data-interaction-accent-hover] {
+  background: var(--nox-interaction-accent-hover-background);
+}
+
+[data-interaction-accent='start'][data-interaction-accent-hover]::before {
+  opacity: 0.72;
+  transform: scaleY(0.86);
+}
+
+[data-interaction-accent]:focus-visible,
+[data-interaction-accent][data-interaction-accent-within]:focus-within,
+[data-interaction-accent][data-interaction-accent-active],
+[data-interaction-accent][aria-selected='true'] {
+  background: var(--nox-interaction-accent-active-background);
+}
+
+[data-interaction-accent]:where(
+    :focus-visible,
+    [aria-current='page'],
+    [aria-selected='true']
+  )::before,
+[data-interaction-accent][data-interaction-accent-within]:focus-within::before,
+[data-interaction-accent][data-interaction-accent-active]::before {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+[data-interaction-accent]:where([aria-disabled='true'], [disabled])::before {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-interaction-accent],
+  [data-interaction-accent]::before {
+    transition:
+      background-color var(--nox-motion-duration-sm)
+        var(--nox-motion-easing-standard),
+      opacity var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+      transform var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+  }
+
+  [data-entry-animation='attention']:not([hidden]) {
+    animation: nox-entry-attention 560ms var(--nox-motion-easing-standard)
+      backwards;
+  }
+}
+
+@keyframes nox-entry-attention {
+  0% {
+    opacity: 0;
+    transform: translateY(var(--nox-space-3)) scale(0.98);
+  }
+
+  62% {
+    opacity: 1;
+    box-shadow: 0 0 0 var(--nox-space-2)
+      color-mix(in srgb, var(--nox-tone-color) 18%, transparent);
+    transform: translateY(0) scale(1.015);
+  }
+
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 transparent;
+    transform: translateY(0) scale(1);
+  }
+}

package/src/styles/style.css

@@ -0,0 +1,93 @@
+@layer settings, base, composition, primitives, components, patterns, surfaces, states, responsive;
+
+@import './tokens.css' layer(settings);
+@import './base.css' layer(base);
+@import './interaction.css' layer(states);
+
+@import '../composition/Grid/Grid.css' layer(composition);
+@import '../composition/GridItem/GridItem.css' layer(composition);
+@import '../composition/Inline/Inline.css' layer(composition);
+@import '../composition/Stack/Stack.css' layer(composition);
+
+@import '../primitives/layout/Separator/Separator.css' layer(primitives);
+@import '../primitives/media/Media/Media.css' layer(primitives);
+@import '../primitives/text/TextBlock/TextBlock.css' layer(primitives);
+
+@import '../layouts/PageSurface.css' layer(components);
+@import '../components/actions/ActionListItem/ActionListItem.css'
+  layer(components);
+@import '../components/actions/Button/Button.css' layer(components);
+@import '../components/actions/CardAction/CardAction.css'
+  layer(components);
+@import '../components/actions/ScrollToTop/ScrollToTop.css'
+  layer(components);
+@import '../components/actions/MediaTrigger/MediaTrigger.css'
+  layer(components);
+@import '../components/content/CodeBlock/CodeBlock.css' layer(components);
+@import '../components/content/CardBody/CardBody.css' layer(components);
+@import '../components/content/CardFooter/CardFooter.css' layer(components);
+@import '../components/content/CardHeader/CardHeader.css' layer(components);
+@import '../components/content/CardLink/CardLink.css' layer(components);
+@import '../components/content/InlineDefinition/InlineDefinition.css'
+  layer(components);
+@import '../components/content/MarkdownContent/MarkdownContent.css'
+  layer(components);
+@import '../components/data-display/BadgeList/BadgeList.css'
+  layer(components);
+@import '../components/data-display/IconList/IconList.css'
+  layer(components);
+@import '../components/data-display/MetricTile/MetricTile.css'
+  layer(components);
+@import '../components/data-display/Tag/Tag.css' layer(components);
+@import '../components/data-display/TextPair/TextPair.css'
+  layer(components);
+@import '../components/forms/FieldLabel/FieldLabel.css' layer(components);
+@import '../components/forms/FieldError/FieldError.css' layer(components);
+@import '../components/forms/TextInput/TextInput.css' layer(components);
+@import '../components/feedback/Tooltip/Tooltip.css' layer(components);
+@import '../components/feedback/Spinner/Spinner.css' layer(components);
+@import '../components/icons/CurrencyIcon.css' layer(components);
+@import '../components/icons/CircleSymbolIcon.css' layer(components);
+@import '../components/media/CanvasFrame/CanvasFrame.css'
+  layer(components);
+@import '../components/media/EmbedFrame/EmbedFrame.css'
+  layer(components);
+@import '../components/media/MediaFrame/MediaFrame.css' layer(components);
+@import '../components/navigation/Breadcrumbs/Breadcrumbs.css'
+  layer(components);
+@import '../components/navigation/Header.css' layer(components);
+@import '../components/navigation/NavigationBrand.css' layer(components);
+@import '../components/navigation/NavigationControl.css' layer(components);
+@import '../components/navigation/NavigationMenuList.css' layer(components);
+@import '../components/navigation/SkipLink/SkipLink.css' layer(components);
+@import '../components/navigation/SubNavigation/SubNavigation.css'
+  layer(components);
+@import '../components/navigation/DesktopNavigation.css' layer(patterns);
+@import '../components/navigation/MobileNavigation.css' layer(patterns);
+@import '../patterns/PuzzleGrid/PuzzleGrid.css' layer(patterns);
+@import '../patterns/CircuitPuzzle/CircuitPuzzle.css' layer(patterns);
+@import '../patterns/Combobox/Combobox.css' layer(patterns);
+@import '../patterns/Dropdown/Dropdown.css' layer(patterns);
+@import '../patterns/Fullscreen/FullscreenControl.css' layer(patterns);
+@import '../patterns/GuidedFlow/GuidedFlow.css' layer(patterns);
+@import '../patterns/GlitchOverlay/GlitchOverlay.css' layer(patterns);
+@import '../patterns/MapViewport/MapViewport.css' layer(patterns);
+@import '../patterns/MagneticFieldPuzzle/MagneticFieldPuzzle.css'
+  layer(patterns);
+@import '../patterns/Modal/Modal.css' layer(patterns);
+@import '../patterns/SpriteProjectilePreview/SpriteProjectilePreview.css'
+  layer(patterns);
+@import '../patterns/StageFlow/StageFlow.css' layer(patterns);
+@import '../patterns/StageFlow/StageFlowSymbol.css' layer(patterns);
+@import '../patterns/StageFlow/StageFlowConnector.css' layer(patterns);
+@import '../patterns/StageFlow/StageFlowStage.css' layer(patterns);
+@import '../patterns/StageFlow/StageFlowStep.css' layer(patterns);
+@import '../patterns/Table/Table.css' layer(patterns);
+@import '../patterns/Table/TableBody.css' layer(patterns);
+@import '../patterns/Table/TableCell.css' layer(patterns);
+@import '../patterns/Table/TableFooter.css' layer(patterns);
+@import '../patterns/Table/TableHeader.css' layer(patterns);
+@import '../patterns/Table/TablePagination.css' layer(patterns);
+@import '../patterns/Table/TableSkeleton.css' layer(patterns);
+
+@import '../composition/SurfaceGroup/SurfaceGroup.css' layer(surfaces);

package/src/styles/tokens.css

@@ -0,0 +1,256 @@
+:root {
+  color-scheme: light;
+
+  /* Public tone seeds. */
+  --nox-source-tone-neutral: #64748b;
+  --nox-source-tone-primary: #7c3aed;
+  --nox-source-tone-info: #2f6bff;
+  --nox-source-tone-success: #039855;
+  --nox-source-tone-warning: #d97706;
+  --nox-source-tone-danger: #dc2626;
+
+  /* Public map seeds. Component states derive their full treatment from these. */
+  --nox-source-map-available: #00b86b;
+  --nox-source-map-unavailable: #f43f5e;
+  --nox-source-map-field: #f59e0b;
+  --nox-source-map-grass: #65a30d;
+  --nox-source-map-mountain: #64748b;
+  --nox-source-map-water: #0ea5e9;
+  --nox-source-map-range: #0000ff;
+
+  /* Internal recipe anchors. */
+  --nox-mix-light: #ffffff;
+  --nox-mix-dark: #020617;
+  --nox-tone-seed: var(--nox-source-tone-neutral);
+}
+
+:root,
+[data-tone] {
+  /* Tone-scaled page, surface, text, border, and interaction slots. */
+  --nox-page-background: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 11%,
+    var(--nox-mix-light)
+  );
+  --nox-surface: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 2%,
+    var(--nox-mix-light)
+  );
+  --nox-surface-muted: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 8%,
+    var(--nox-mix-light)
+  );
+  --nox-surface-strong: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 14%,
+    var(--nox-mix-light)
+  );
+
+  --nox-text: color-mix(in srgb, var(--nox-tone-seed) 18%, var(--nox-mix-dark));
+  --nox-text-muted: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 52%,
+    var(--nox-mix-dark)
+  );
+  --nox-text-subtle: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 68%,
+    var(--nox-mix-dark)
+  );
+  --nox-text-disabled: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 36%,
+    var(--nox-mix-light)
+  );
+  --nox-text-inverse: var(--nox-mix-light);
+
+  --nox-border: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 28%,
+    var(--nox-mix-light)
+  );
+  --nox-border-muted: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 18%,
+    var(--nox-mix-light)
+  );
+
+  /* Tone interaction slots. */
+  --nox-tone-color: var(--nox-tone-seed);
+  --nox-tone-background: var(--nox-surface-muted);
+  --nox-tone-background-strong: var(--nox-surface-strong);
+  --nox-tone-hover-background: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 12%,
+    var(--nox-mix-light)
+  );
+  --nox-tone-active-background: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 20%,
+    var(--nox-mix-light)
+  );
+  --nox-tone-border: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 38%,
+    var(--nox-border)
+  );
+  --nox-tone-text: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 72%,
+    var(--nox-mix-dark)
+  );
+  --nox-tone-focus-ring: var(--nox-tone-seed);
+  --nox-tone-shadow: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 24%,
+    var(--nox-mix-dark)
+  );
+
+  /* Shared framed-data surface slots. */
+  --nox-data-surface-border: var(--nox-border);
+  --nox-data-surface-background: color-mix(
+    in srgb,
+    var(--nox-tone-color) 8%,
+    var(--nox-surface)
+  );
+
+  --nox-link: var(--nox-tone-color);
+  --nox-link-hover: var(--nox-tone-text);
+  --nox-link-active: var(--nox-tone-text);
+  --nox-focus-ring: var(--nox-tone-focus-ring);
+
+  /* Shared form-control slots. */
+  --nox-field-background: var(--nox-surface-muted);
+  --nox-field-background-disabled: var(--nox-surface-strong);
+  --nox-field-border: var(--nox-border);
+  --nox-field-border-hover: var(--nox-tone-border);
+  --nox-field-border-active: var(--nox-tone-color);
+  --nox-field-border-invalid: var(--nox-source-tone-danger);
+  --nox-field-color: var(--nox-text);
+  --nox-field-control-block-size: 2.75rem;
+  --nox-field-control-font-size: var(--nox-font-size-sm);
+  --nox-field-control-padding-inline: var(--nox-space-4);
+  --nox-field-placeholder: var(--nox-text-subtle);
+  --nox-field-focus-ring: color-mix(
+    in srgb,
+    var(--nox-tone-focus-ring) 24%,
+    transparent
+  );
+  --nox-field-focus-shadow: 0 0 0 var(--nox-border-width)
+    var(--nox-field-focus-ring);
+
+  /* Scrollbar presentation tokens. */
+  --nox-scrollbar-size: 0.625rem;
+  --nox-scrollbar-track: transparent;
+  --nox-scrollbar-thumb: color-mix(
+    in srgb,
+    var(--nox-text-subtle) 42%,
+    transparent
+  );
+  --nox-scrollbar-thumb-hover: color-mix(
+    in srgb,
+    var(--nox-text-muted) 56%,
+    transparent
+  );
+
+  --nox-shadow-surface: 0 1rem 2rem
+    color-mix(in srgb, var(--nox-tone-shadow) 8%, transparent);
+}
+
+:root {
+  /* Layout tokens. */
+  --nox-page-gutter: clamp(1rem, 4vw, 2rem);
+  --nox-page-max-width: 72rem;
+  --nox-page-width: min(
+    var(--nox-page-max-width),
+    calc(100% - var(--nox-page-gutter) * 2)
+  );
+  --nox-layout-gap: clamp(1rem, 3vw, 1.5rem);
+  --nox-section-block-size: 4rem;
+  --nox-section-compact-block-size: 3.5rem;
+  --nox-section-responsive-block-size: var(--nox-section-block-size);
+  --nox-section-media-size: 3.75rem;
+  --nox-compact-media-size: 2.5rem;
+  --nox-compact-media-responsive-size: var(--nox-compact-media-size);
+  --nox-navigation-block-size: 3.25rem;
+  --nox-navigation-compact-block-size: 3rem;
+  --nox-site-header-height: 4.75rem;
+  --nox-site-header-compact-height: 4rem;
+
+  /* Spacing scale. */
+  --nox-space: 0.25rem;
+  --nox-space-1: var(--nox-space);
+  --nox-space-2: calc(var(--nox-space) * 2);
+  --nox-space-3: calc(var(--nox-space) * 3);
+  --nox-space-4: calc(var(--nox-space) * 4);
+  --nox-space-5: calc(var(--nox-space) * 6);
+  --nox-space-6: calc(var(--nox-space) * 8);
+  --nox-space-7: calc(var(--nox-space) * 12);
+  --nox-page-surface-padding: clamp(
+    var(--nox-space-4),
+    3vw,
+    var(--nox-space-6)
+  );
+
+  /* Radius scale. */
+  --nox-radius-base: 0.25rem;
+  --nox-radius-sm: calc(var(--nox-radius-base) * 2);
+  --nox-radius-md: calc(var(--nox-radius-base) * 3);
+  --nox-radius-lg: calc(var(--nox-radius-base) * 4);
+  --nox-radius-pill: 999px;
+
+  /* Typography scale. */
+  --nox-font-body:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --nox-font-size-xs: 0.75rem;
+  --nox-font-size-sm: 0.875rem;
+  --nox-font-size-md: 1rem;
+  --nox-font-size-lg: 1.125rem;
+  --nox-font-size-xl: 1.35rem;
+  --nox-line-height-tight: 1.1;
+  --nox-font-weight-regular: 400;
+  --nox-font-weight-medium: 550;
+  --nox-font-weight-strong: 700;
+  --nox-letter-spacing-wide: 0.045em;
+  --nox-letter-spacing-wider: 0.08em;
+
+  /* Focus, border, shadow, and motion tokens. */
+  --nox-border-width: 1px;
+  --nox-focus-ring-width: 3px;
+  --nox-focus-ring-offset: 3px;
+  --nox-motion-duration-sm: 160ms;
+  --nox-motion-easing-standard: ease;
+}
+
+[data-tone='neutral'] {
+  --nox-tone-seed: var(--nox-source-tone-neutral);
+}
+
+[data-tone='primary'] {
+  --nox-tone-seed: var(--nox-source-tone-primary);
+}
+
+[data-tone='info'] {
+  --nox-tone-seed: var(--nox-source-tone-info);
+}
+
+[data-tone='success'] {
+  --nox-tone-seed: var(--nox-source-tone-success);
+}
+
+[data-tone='warning'] {
+  --nox-tone-seed: var(--nox-source-tone-warning);
+}
+
+[data-tone='danger'] {
+  --nox-tone-seed: var(--nox-source-tone-danger);
+}
+
+@media (width < 48rem) {
+  :root {
+    --nox-section-responsive-block-size: var(--nox-section-compact-block-size);
+    --nox-compact-media-responsive-size: 2.125rem;
+  }
+}

package/src/theme/contracts.ts

@@ -0,0 +1,7 @@
+export type Tone =
+  | 'neutral'
+  | 'primary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger';

package/src/theme/index.ts

@@ -0,0 +1 @@
+export * from './contracts';

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "jsx": "preserve",
+    "strict": true
+  },
+  "include": ["src/**/*"]
+}