@1001-digital/layers.base 0.0.1

package/AGENTS.md

@@ -0,0 +1,51 @@
+# AGENTS.md
+
+Base Nuxt layer for building modern web applications with accessible components and CSS custom properties.
+
+## Setup commands
+
+- Install deps: `pnpm install`
+- Start dev server: `pnpm dev`
+- Run tests: `pnpm test`
+
+## Code style
+
+- TypeScript
+- Single quotes, no semicolons
+
+## Styling
+
+- CSS custom properties (design tokens) in `app/assets/styles/variables/`
+- CSS layers: `reset` → `base` → `components` → `utilities`
+- oklch color space with `light-dark()` for theme support
+- Component-specific variables in `variables/components/`
+
+## Components
+
+- Base components use [Reka UI](https://reka-ui.com/llms.txt) for accessibility, with our custom styling framework
+- For tables and virtualization we use Tanstack (e.g. [Tanstack Table](https://tanstack.com/table/latest/docs/introduction.md) and [Tanstack Virtualization](https://tanstack.com/virtual/latest/docs/introduction.md)).
+- Icon.vue maps semantic names (e.g. 'check', 'add') to Lucide/Simple Icons
+
+## Component naming
+
+Components in nested directories use auto-generated names based on path and filename, with duplicate segments removed.
+
+Example: `components/base/foo/Button.vue` → `<BaseFooButton />`
+
+For clarity, rename files to match the full component name:
+- ✗ `components/base/foo/Button.vue`
+- ✓ `components/base/foo/BaseFooButton.vue`
+
+## Key directories
+
+```
+app/
+├── components/          # Vue components
+│   └── Form/            # Form components (Reka UI wrappers)
+├── assets/styles/
+│   ├── base/            # Element defaults, reset
+│   ├── utilities/       # Helper classes, animations
+│   └── variables/       # Design tokens (colors, spacing, etc.)
+```
+
+

package/README.md

@@ -0,0 +1,13 @@
+# BASE LAYER
+
+Nuxt layer for web application development with semi opinionated styling setup and components using [Reka UI](https://reka-ui.com).
+
+## Setup
+
+```bash
+pnpm install
+```
+
+## Development
+
+Running `pnpm dev` will prepare and boot `.playground` directory, which imports the layer itself.

package/app/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <HelloWorld />
+</template>

package/app/assets/styles/base/base.css

@@ -0,0 +1,52 @@
+/*
+ * Base Layer
+ * Core element styling and document defaults
+ */
+
+html {
+  /* Color settings */
+  background-color: var(--background);
+  color: var(--color);
+
+  /* Font settings */
+  font-size: var(--rem);
+  font-family: var(--font-family);
+  line-height: var(--line-height-md);
+  font-weight: var(--font-weight);
+  font-style: normal;
+  letter-spacing: var(--letter-spacing);
+  text-transform: var(--text-transform);
+  font-synthesis: initial;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  /* Font size separate from root em */
+  font-size: var(--font-base);
+
+  /* Prevent horizontal overflow */
+  overflow-x: hidden;
+}
+
+/*
+ * Modern Typography
+ * text-wrap for balanced headings and prettier paragraphs
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+p,
+li,
+figcaption,
+blockquote {
+  text-wrap: pretty;
+}

package/app/assets/styles/base/forms.css

@@ -0,0 +1,129 @@
+/*
+ * Form Elements
+ * Global styling for form elements
+ */
+
+button:not(.unstyled),
+.button:not(.unstyled),
+input:not(.unstyled),
+textarea:not(.unstyled),
+select:not(.unstyled) {
+  /* UI font styles */
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  font-weight: var(--ui-font-weight);
+  text-transform: var(--ui-text-transform);
+  letter-spacing: var(--ui-letter-spacing);
+  line-height: var(--ui-line-height);
+  color: var(--ui-color);
+
+  inline-size: 100%;
+  transition: all var(--speed);
+  border: none;
+  border-radius: var(--button-border-radius);
+  box-shadow: var(--border-shadow);
+  background: var(--button-background);
+  padding: var(--ui-padding-block) var(--ui-padding-inline);
+  user-select: none;
+  display: flex;
+  block-size: var(--form-item-height);
+
+  &:-internal-autofill-selected {
+    background: inherit;
+    background-image: none !important;
+  }
+
+  &:is(:hover, :active, :focus, .active) {
+    outline: none;
+    box-shadow: var(--border-shadow-highlight);
+    background: var(--button-background-highlight);
+  }
+
+  &::placeholder,
+  &::-ms-input-placeholder {
+    text-transform: var(--ui-text-transform);
+    color: var(--ui-placeholder-color);
+    opacity: 1;
+  }
+
+  &.small {
+    padding: calc(var(--ui-padding-block) / 2) calc(var(--ui-padding-inline) / 2);
+    block-size: var(--form-item-height-sm);
+  }
+}
+
+input:not(.unstyled),
+textarea:not(.unstyled) {
+  text-transform: var(--input-text-transform);
+}
+
+select:not(.unstyled),
+select:not(.unstyled):is(:hover, :active, :focus, .active) {
+  appearance: none;
+  line-height: 1;
+  transition-property: box-shadow, background-color, color;
+  background:
+    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM4ODgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tZG93biI+PHBvbHlsaW5lIHBvaW50cz0iNiA5IDEyIDE1IDE4IDkiPjwvcG9seWxpbmU+PC9zdmc+),
+    var(--button-background);
+  background-repeat: no-repeat, no-repeat;
+  background-position:
+    calc(100% - var(--size-4)) 50%,
+    0% 0%;
+  background-size:
+    var(--size-4),
+    100% 100%;
+  padding-inline-end: var(--size-7) !important;
+
+  &.small {
+    background-position:
+      calc(100% - var(--size-2)) 50%,
+      0% 0%;
+  }
+}
+
+input[type='checkbox'] {
+  block-size: var(--size-4);
+  margin-right: var(--spacer-sm);
+}
+
+form {
+  display: grid;
+  gap: var(--spacer);
+}
+
+form label,
+label.form-label {
+  /* UI font styles */
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  font-weight: var(--ui-font-weight);
+  text-transform: var(--ui-text-transform);
+  letter-spacing: var(--ui-letter-spacing);
+  line-height: var(--ui-line-height);
+  color: var(--ui-color);
+
+  transition: all var(--speed);
+  display: grid;
+  gap: var(--size-2);
+
+  &:hover {
+    color: var(--color);
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  > span:first-child {
+    display: block;
+  }
+}
+
+label:has(> input[type='checkbox']) {
+  display: flex;
+  align-items: center;
+
+  > * {
+    inline-size: auto;
+  }
+}

package/app/assets/styles/base/reset.css

@@ -0,0 +1,159 @@
+/*
+ * Reset Layer
+ * Based on modern-normalize with additional opinionated resets
+ * Inspired by Tailwind's preflight
+ */
+
+/* Import modern-normalize as the foundation */
+@import 'modern-normalize/modern-normalize.css';
+
+/*
+ * Additional resets (SUIT CSS / Tailwind inspired)
+ */
+
+/* Remove default spacing for semantic elements */
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+/* Reset fieldset */
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+/* Reset lists */
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Base box model
+ */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+/* Ensure horizontal rules are visible */
+hr {
+  border-top-width: 1px;
+  border-color: var(--border-color);
+}
+
+/* Reset italic style on i elements */
+i {
+  font-style: normal;
+}
+
+/* Image border style */
+img {
+  border-style: solid;
+}
+
+/* Textarea resize */
+textarea {
+  resize: vertical;
+}
+
+/* Placeholder styling */
+input::placeholder,
+textarea::placeholder {
+  color: var(--ui-placeholder-color);
+}
+
+/* Pointer cursor for interactive elements */
+button,
+[role='button'] {
+  cursor: pointer;
+}
+
+/* Table border collapse */
+table {
+  border-collapse: collapse;
+}
+
+/* Reset heading styles */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/* Reset link styles */
+a {
+  color: inherit;
+  text-decoration: inherit;
+  transition: color var(--speed);
+}
+
+/* Form element defaults */
+.button,
+button,
+input,
+optgroup,
+select,
+textarea {
+  padding: var(--ui-padding-block) var(--ui-padding-inline);
+  line-height: inherit;
+  color: inherit;
+}
+
+/* Monospace elements */
+pre,
+code,
+kbd,
+samp {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    'Courier New',
+    monospace;
+}
+
+/* Block display for media elements */
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+
+/* Responsive images/video */
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}

package/app/assets/styles/index.css

@@ -0,0 +1,28 @@
+/*
+ * CSS Layers Order Definition
+ * This establishes the cascade priority:
+ * reset < base < components < utilities
+ */
+@layer reset, base, components, utilities;
+
+/*
+ * CSS Custom Properties (outside layers for proper cascade)
+ */
+@import './variables/index.css';
+
+/*
+ * Reset Layer - Modern Normalize
+ */
+@import './base/reset.css' layer(reset);
+
+/*
+ * Base Layer - Element defaults
+ */
+@import './base/base.css' layer(base);
+@import './base/forms.css' layer(base);
+
+/*
+ * Utilities Layer - Helper classes
+ */
+@import './utilities/utilities.css' layer(utilities);
+@import './utilities/animations.css' layer(utilities);

package/app/assets/styles/utilities/animations.css

@@ -0,0 +1,77 @@
+/*
+ * Animations Layer
+ * Vue transitions and keyframe animations
+ */
+
+/* Default Vue transition */
+.v-enter-active,
+.v-leave-active {
+  transition: opacity var(--speed) ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+/* Fade transition */
+.fade-enter-active,
+.fade-leave-active {
+  transition: all var(--speed) ease;
+  max-block-size: 100%;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  max-block-size: 0;
+}
+
+/* Keyframe animations */
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(var(--spacer));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/*
+ * Entry Animations with @starting-style
+ * For elements transitioning from display: none
+ */
+.appear {
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity var(--speed) ease,
+    transform var(--speed) ease,
+    display var(--speed) ease allow-discrete;
+
+  @starting-style {
+    opacity: 0;
+    transform: translateY(var(--spacer-sm));
+  }
+}
+

package/app/assets/styles/utilities/utilities.css

@@ -0,0 +1,58 @@
+/*
+ * Utilities Layer
+ * Single-purpose helper classes
+ */
+
+/* UI font utility */
+.ui {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  font-weight: var(--ui-font-weight);
+  text-transform: var(--ui-text-transform);
+  letter-spacing: var(--ui-letter-spacing);
+  line-height: var(--ui-line-height);
+  color: var(--ui-color);
+}
+
+/* Muted text */
+.muted {
+  color: var(--muted);
+}
+
+/* Font sizes */
+.font-sm {
+  font-size: var(--font-sm);
+}
+
+/* Responsive visibility */
+.visible-sm {
+  display: none !important;
+
+  @media (min-width: 27rem) {
+    display: initial !important;
+
+    &.flex {
+      display: flex !important;
+    }
+
+    &.inline-flex {
+      display: inline-flex !important;
+    }
+  }
+}
+
+.visible-md {
+  display: none !important;
+
+  @media (min-width: 45rem) {
+    display: initial !important;
+
+    &.flex {
+      display: flex !important;
+    }
+
+    &.inline-flex {
+      display: inline-flex !important;
+    }
+  }
+}

package/app/assets/styles/variables/borders.css

@@ -0,0 +1,18 @@
+:root {
+  --border-width: 1px;
+  --border-radius: 0;
+
+  /* Border colors */
+  --border-color: var(--gray-z-2);
+  --border-color-highlight: var(--gray-z-3);
+  --border-color-dark: var(--color);
+  --border-color-light: var(--color);
+
+  /* Border shorthand */
+  --border: var(--border-width) solid var(--border-color);
+  --border-dark: var(--border-width) solid var(--border-color-dark);
+
+  /* Border effects */
+  --border-shadow: 0 0 0 var(--border-width) var(--border-color);
+  --border-shadow-highlight: 0 0 0 var(--border-width) var(--border-color-highlight);
+}

package/app/assets/styles/variables/colors.css

@@ -0,0 +1,75 @@
+/*
+ * Colors
+ * Modern color palette using oklch for perceptual uniformity
+ */
+
+:root {
+  /* Enable system color scheme support */
+  color-scheme: light dark;
+
+  /* Base colors */
+  --black: oklch(0% 0 0);
+  --white: oklch(100% 0 0);
+
+  /* Gray scale (perceptually uniform in oklch) */
+  --gray-50: oklch(98% 0 0);
+  --gray-100: oklch(96% 0 0);
+  --gray-200: oklch(91% 0 0);
+  --gray-300: oklch(85% 0 0);
+  --gray-400: oklch(70% 0 0);
+  --gray-500: oklch(55% 0 0);
+  --gray-600: oklch(45% 0 0);
+  --gray-700: oklch(37% 0 0);
+  --gray-800: oklch(27% 0 0);
+  --gray-900: oklch(20% 0 0);
+  --gray-950: oklch(14% 0 0);
+
+  /* Semi-transparent variants */
+  --black-semi: color-mix(in oklch, var(--black) 73%, transparent);
+  --white-semi: color-mix(in oklch, var(--white) 73%, transparent);
+
+  /* Semantic colors */
+  --primary: var(--color);
+  --muted: var(--gray-z-5);
+  --error: oklch(55% 0.25 27);
+  --success: oklch(75% 0.2 130);
+}
+
+/*
+ * Color scheme aware values
+ * These use light-dark() and re-evaluate based on the element's color-scheme
+ */
+
+:root {
+  --background: light-dark(var(--white), var(--black));
+  --background-semi: light-dark(var(--white-semi), var(--black-semi));
+  --color: light-dark(var(--black), var(--white));
+  --color-semi: light-dark(var(--black-semi), var(--white-semi));
+
+  /* Z-colors (depth from viewer, 0 = closest to background) */
+  --gray-z-0: light-dark(var(--gray-50), var(--gray-950));
+  --gray-z-1: light-dark(var(--gray-100), var(--gray-900));
+  --gray-z-2: light-dark(var(--gray-200), var(--gray-800));
+  --gray-z-3: light-dark(var(--gray-300), var(--gray-700));
+  --gray-z-4: light-dark(var(--gray-400), var(--gray-600));
+  --gray-z-5: var(--gray-500);
+  --gray-z-6: light-dark(var(--gray-600), var(--gray-400));
+  --gray-z-7: light-dark(var(--gray-700), var(--gray-300));
+  --gray-z-8: light-dark(var(--gray-800), var(--gray-200));
+  --gray-z-9: light-dark(var(--gray-900), var(--gray-100));
+  --gray-z-10: light-dark(var(--gray-950), var(--gray-50));
+}
+
+/*
+ * Manual color scheme overrides
+ * Force light/dark mode on nested elements
+ */
+
+.light {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+

package/app/assets/styles/variables/components/alerts.css

@@ -0,0 +1,13 @@
+:root {
+  --alert-color: var(--color);
+  --alert-background-color: transparent;
+  --alert-border-color: var(--border-color);
+
+  --alert-info-color: var(--alert-color);
+  --alert-info-background-color: var(--alert-background-color);
+  --alert-info-border-color: var(--alert-border-color);
+
+  --alert-error-color: var(--error);
+  --alert-error-background-color: color-mix(in srgb, var(--error) 10%, transparent);
+  --alert-error-border-color: var(--error);
+}

package/app/assets/styles/variables/components/buttons.css

@@ -0,0 +1,18 @@
+:root {
+  --button-border-radius: var(--border-radius);
+  --button-background: var(--background);
+  --button-background-highlight: var(--gray-z-1);
+  --button-border-color-highlight: var(--gray-z-3);
+  --button-color: var(--ui-color);
+  --button-color-highlight: var(--color);
+  --button-icon-color: var(--muted);
+  --button-icon-color-highlight: var(--color);
+
+  /* Primary Button Styles */
+  --button-primary-background: var(--gray-z-10);
+  --button-primary-border-color: var(--gray-z-8);
+  --button-primary-color: var(--gray-z-0);
+  --button-primary-background-highlight: var(--gray-z-8);
+  --button-primary-border-color-highlight: var(--gray-z-6);
+  --button-primary-color-highlight: var(--gray-z-0);
+}

package/app/assets/styles/variables/components/cards.css

@@ -0,0 +1,7 @@
+:root {
+  --card-border-radius: var(--border-radius);
+  --card-border: var(--border);
+  --card-background: var(--background);
+  --card-background-highlight: var(--gray-z-1);
+  --card-border-color-highlight: var(--gray-z-3);
+}