srcdev-nuxt-components 4.0.6 → 5.0.0

package/README.md

@@ -10,16 +10,185 @@ Althought this repo is public and feel free to do what you wish with it, this ha
 npm install --save nuxt-compnents
 ```
 
-## Additional reuired packages
+## Additional required packages
 
 ```bash
 npm install --save @oddbird/css-anchor-positioning
 ```
 
-Then add the dependency to their `extends` in `nuxt.config`:
+Then add the dependency to the property `extends` in `nuxt.config`:
 
 ```ts
 defineNuxtConfig({
   extends: 'nuxt-compnents',
 });
 ```
+
+## Styles Architecture
+
+The `/assets/styles` directory contains a modular CSS architecture designed for scalability and maintainability. The styles are organized into the following structure:
+
+### Main Entry Point
+
+- **`main.css`** - Primary entry point that imports all style modules
+
+### Setup Layer (`/setup`)
+
+The setup layer provides the foundational styles and utilities:
+
+#### Core Configuration
+
+- **`_head.css`** - Root-level CSS custom properties including:
+  - Font size and line height defaults
+  - Primary font family stack (futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif)
+
+#### Variables (`/variables`)
+
+- **Color System** - Comprehensive color palette with semantic naming:
+  - `_blue.css` - Blue color scale (--blue-0 to --blue-12)
+  - `_gray.css` - Gray color scale
+  - `_green.css` - Green color scale
+  - `_orange.css` - Orange color scale
+  - `_red.css` - Red color scale
+  - `_yellow.css` - Yellow color scale
+
+#### Typography (`/typography`)
+
+- **Responsive Font Sizes** - Fluid typography using clamp() functions:
+  - `--step-5` to `--step--2` providing 8 responsive font size steps
+- **Utility Classes** - Pre-built typography classes:
+  - `.heading-1` through `.heading-5` - Semantic heading styles
+  - Generic font weight and variation settings
+- **Font Variation Settings** - Advanced typography controls
+
+#### Utility Classes (`/utility-classes`)
+
+- **Spacing Helpers**:
+  - `_margin-helpers.css` - Comprehensive margin utilities (`.mi-auto`, `.mb-0`, etc.)
+  - `_padding-helpers.css` - Padding utility classes
+- **Page Layout** - Base page styling (`_page.css`)
+
+#### Accessibility (`/a11y`)
+
+- **Screen Reader Utilities** - `.sr-only` class for accessible hidden content
+- **A11y Variables** - Accessibility-focused CSS custom properties
+- **Utility Functions** - Helper classes for improved accessibility
+
+### Component Layer (`/extends-layer/srcdev-components`)
+
+Component-specific styles for the included components:
+
+#### Display Prompt Component
+
+- **`_scaffolding.css`** - Core component structure with CSS custom properties:
+  - Wrapper styling (border-radius, layout)
+  - Inner content styling (margin, padding, gap)
+  - Icon sizing and positioning
+  - Content spacing and typography
+- **Themes** - Pre-built component variants:
+  - `_error.css` - Error state styling
+  - `_info.css` - Information state styling
+  - `_success.css` - Success state styling
+  - `_warning.css` - Warning state styling
+
+### Import Structure
+
+The styles follow a cascading import pattern:
+
+```text
+main.css
+├── setup/
+│   ├── index.css
+│   ├── _head.css
+│   ├── utility-classes/
+│   │   ├── index.css
+│   │   ├── _margin-helpers.css
+│   │   ├── _padding-helpers.css
+│   │   └── _page.css
+│   ├── a11y/
+│   │   ├── index.css
+│   │   ├── _utils.css
+│   │   └── _variables.css
+│   ├── variables/
+│   │   ├── index.css
+│   │   └── colors/
+│   │       ├── index.css
+│   │       ├── _blue.css
+│   │       ├── _gray.css
+│   │       ├── _green.css
+│   │       ├── _orange.css
+│   │       ├── _red.css
+│   │       └── _yellow.css
+│   └── typography/
+│       ├── index.css
+│       ├── utility-classes/
+│       │   ├── index.css
+│       │   ├── _generic-font-classes.css
+│       │   ├── _generic-font-variation-settings.css
+│       │   └── _generic-font-weights.css
+│       └── vars/
+│           ├── index.css
+│           └── _reponsive-font-sizes.css
+└── extends-layer/srcdev-components/
+    ├── index.css
+    ├── display-prompt-core/
+    │   └── index.css
+    └── themes/
+        ├── index.css
+        ├── _error.css
+        ├── _info.css
+        ├── _success.css
+        └── _warning.css
+```
+
+This architecture ensures proper CSS cascade order and allows for easy customization through CSS custom properties.
+
+## Development Environment (`.vscode`)
+
+The `.vscode` directory contains Visual Studio Code configuration files to ensure a consistent development experience across the project:
+
+### Workspace Configuration
+
+- **`settings.json`** - VS Code workspace settings including:
+  - Code formatting configuration (2-space indentation, auto-formatting on save)
+  - ESLint, Prettier, and Stylelint integration
+  - File handling settings (trim whitespace, final newlines, Unix line endings)
+  - CSS variable recognition for the project's custom properties
+
+### Recommended Extensions
+
+- **`extensions.json`** - Curated list of VS Code extensions for optimal development:
+  - **Vue.js Development**: `vue.volar` - Vue 3 language support
+  - **Nuxt.js Development**: `nuxtr.nuxtr-vscode` - Enhanced Nuxt development tools
+  - **Code Quality**: `dbaeumer.vscode-eslint`, `esbenp.prettier-vscode` - Linting and formatting
+  - **CSS Development**: `willofindie.vscode-cssvar` - CSS custom property IntelliSense
+  - **Testing**: `vitest.explorer` - Vitest test runner integration
+  - **Markdown**: `davidanson.vscode-markdownlint` - Markdown linting
+  - **Productivity**: `jkjustjoshing.vscode-text-pastry`, `formulahendry.auto-rename-tag`
+
+### Code Snippets
+
+The `.vscode` directory includes comprehensive code snippets for rapid component development:
+
+#### Core Components
+
+- **`srcdev-nuxt3-component-boilerplate.code-snippets`** - Base component template with prop validation
+- **`srcdev-nuxt3-page-layout.code-snippets`** - Page layout scaffolding
+- **`srcdev-nuxt3-pinia-store-setup.code-snippets`** - Pinia store configuration
+
+#### UI Components
+
+- **`srcdev-nuxt3-accordian-component.code-snippets`** - Accordion component templates
+- **`srcdev-nuxt3-carousel-basic-component.code-snippets`** - Basic carousel implementation
+- **`srcdev-nuxt3-carousel-flip-component.code-snippets`** - Flip carousel variant
+- **`srcdev-nuxt3-container-glow-component.code-snippets`** - Container with glow effects
+- **`srcdev-nuxt3-dialog-component.code-snippets`** - Modal dialog templates
+- **`srcdev-nuxt3-display-banner-component.code-snippets`** - Display banner component
+- **`srcdev-nuxt3-display-details-component.code-snippets`** - Collapsible details component
+- **`srcdev-nuxt3-display-prompt-component.code-snippets`** - Alert/notification prompts
+- **`srcdev-nuxt3-expanding-panel-component.code-snippets`** - Expandable panel component
+- **`srcdev-nuxt3-layout-row.code-snippets`** - Layout row component
+- **`srcdev-nuxt3-responsive-header-component.code-snippets`** - Responsive navigation header
+- **`srcdev-nuxt3-tabs-component.code-snippets`** - Tab component system
+
+Each snippet provides both HTML template usage examples and TypeScript setup code, enabling developers to quickly implement components with proper typing and configuration.

package/assets/styles/extends-layer/srcdev-components/display-prompt-core/index.css

@@ -0,0 +1,70 @@
+.display-prompt-core {
+  .display-prompt-wrapper {
+    background-color: var(--component-theme-10);
+    border: 1px solid var(--component-theme-8);
+    border-inline-start: 8px solid var(--component-theme-8);
+    border-radius: 4px;
+    border-start-start-radius: 8px;
+    border-end-start-radius: 8px;
+
+    .display-prompt-inner {
+      align-items: center;
+      gap: 12px;
+      padding-block: 1rem;
+      padding-inline: 1.5rem;
+
+      .display-prompt-icon {
+        .icon {
+          color: var(--component-theme-8);
+          font-size: 3rem;
+          font-style: normal;
+          font-weight: normal;
+        }
+      }
+
+      .display-prompt-content {
+        gap: 1rem;
+        margin: 0;
+        padding: 0.2rem;
+
+        .title {
+          font-size: var(--step-2);
+          font-weight: bold;
+          line-height: 1.3;
+          color: var(--component-theme-8);
+          margin: 0;
+          padding: 0;
+        }
+
+        .text {
+          font-size: var(--step-2);
+          font-weight: normal;
+          line-height: 1.3;
+          color: var(--component-theme-8);
+          margin: 0;
+          padding: 0;
+        }
+      }
+      .display-prompt-action {
+        background-color: transparent;
+        align-items: center;
+        margin: 1rem;
+        padding: 0.5rem;
+        border: 0.1rem solid var(--component-theme-8);
+        border-radius: 50%;
+        outline: 1px solid var(--component-theme-3);
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        .icon {
+          color: var(--component-theme-8);
+          font-size: var(--step-2);
+          border: 1px solid green;
+          padding: 1rem;
+        }
+      }
+    }
+  }
+}

package/assets/styles/extends-layer/srcdev-components/index.css

@@ -0,0 +1,2 @@
+@import './themes';
+@import './display-prompt-core';

package/assets/styles/extends-layer/srcdev-components/themes/_error.css

@@ -0,0 +1,15 @@
+[data-prompt-theme='error'] {
+  --component-theme-0: var(--red-0);
+  --component-theme-1: var(--red-1);
+  --component-theme-2: var(--red-2);
+  --component-theme-3: var(--red-3);
+  --component-theme-4: var(--red-4);
+  --component-theme-5: var(--red-5);
+  --component-theme-6: var(--red-6);
+  --component-theme-7: var(--red-7);
+  --component-theme-8: var(--red-8);
+  --component-theme-9: var(--red-9);
+  --component-theme-10: var(--red-10);
+  --component-theme-11: var(--red-11);
+  --component-theme-12: var(--red-12);
+}

package/assets/styles/extends-layer/srcdev-components/themes/_info.css

@@ -0,0 +1,15 @@
+[data-prompt-theme='info'] {
+  --component-theme-0: var(--blue-0);
+  --component-theme-1: var(--blue-1);
+  --component-theme-2: var(--blue-2);
+  --component-theme-3: var(--blue-3);
+  --component-theme-4: var(--blue-4);
+  --component-theme-5: var(--blue-5);
+  --component-theme-6: var(--blue-6);
+  --component-theme-7: var(--blue-7);
+  --component-theme-8: var(--blue-8);
+  --component-theme-9: var(--blue-9);
+  --component-theme-10: var(--blue-10);
+  --component-theme-11: var(--blue-11);
+  --component-theme-12: var(--blue-12);
+}

package/assets/styles/extends-layer/srcdev-components/themes/_success.css

@@ -0,0 +1,15 @@
+[data-prompt-theme='success'] {
+  --component-theme-0: var(--green-0);
+  --component-theme-1: var(--green-1);
+  --component-theme-2: var(--green-2);
+  --component-theme-3: var(--green-3);
+  --component-theme-4: var(--green-4);
+  --component-theme-5: var(--green-5);
+  --component-theme-6: var(--green-6);
+  --component-theme-7: var(--green-7);
+  --component-theme-8: var(--green-8);
+  --component-theme-9: var(--green-9);
+  --component-theme-10: var(--green-10);
+  --component-theme-11: var(--green-11);
+  --component-theme-12: var(--green-12);
+}

package/assets/styles/extends-layer/srcdev-components/themes/_warning.css

@@ -0,0 +1,15 @@
+[data-prompt-theme='warning'] {
+  --component-theme-0: var(--orange-0);
+  --component-theme-1: var(--orange-1);
+  --component-theme-2: var(--orange-2);
+  --component-theme-3: var(--orange-3);
+  --component-theme-4: var(--orange-4);
+  --component-theme-5: var(--orange-5);
+  --component-theme-6: var(--orange-6);
+  --component-theme-7: var(--orange-7);
+  --component-theme-8: var(--orange-8);
+  --component-theme-9: var(--orange-9);
+  --component-theme-10: var(--orange-10);
+  --component-theme-11: var(--orange-11);
+  --component-theme-12: var(--orange-12);
+}

package/assets/styles/main.css

@@ -1,5 +1,2 @@
-@import './variables';
-@import './forms';
-@import './utils';
-@import './typography';
-@import './a11y';
+@import './setup/';
+@import './extends-layer/srcdev-components/';

package/assets/styles/{forms/variables/_theme.css → setup/_head.css}

@@ -1,11 +1,5 @@
 :root {
   --font-size: 1.6rem;
   --line-height: calc((var(--font-size) * 2) - 1rem);
-
   --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
-
-  --theme-error-surface: var(--red-12);
-  --theme-error-text: var(--red-0);
-
-  --theme-form-button-font-size-normal: var(--form-element-font-size);
 }

package/assets/styles/{a11y → setup/a11y}/_variables.css

@@ -5,4 +5,6 @@
 
   --box-shadow-off: 0 0 0 0.3rem transparent;
   --box-shadow-on: 0 0 0 0.3rem light-dark(var(--blue-12), var(--gray-0));
+
+  --focus-visible-box-shadow: 0 0 0 0.3rem light-dark(var(--blue-12), var(--gray-0));
 }

package/assets/styles/setup/a11y/index.css

@@ -0,0 +1,2 @@
+@import './_variables.css';
+@import './_utils.css';

package/assets/styles/setup/index.css

@@ -0,0 +1,5 @@
+@import './utility-classes/';
+@import './a11y/';
+@import './variables/';
+@import './typography/';
+@import './_head.css';

package/assets/styles/setup/typography/index.css

@@ -0,0 +1,2 @@
+@import './utility-classes/';
+@import './vars/';

package/assets/styles/setup/typography/utility-classes/_generic-font-classes.css

@@ -0,0 +1,192 @@
+:root {
+  .heading-1 {
+    font-size: var(--step-5);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  .heading-2 {
+    font-size: var(--step-4);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  .heading-3 {
+    font-size: var(--step-3);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  .heading-4 {
+    font-size: var(--step-2);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  .heading-5 {
+    font-size: var(--step-1);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  .heading-6 {
+    font-size: var(--step-0);
+    font-weight: bold;
+    line-height: 1.3;
+  }
+
+  /* Body text */
+
+  .body-large {
+    font-size: var(--step-3);
+    font-weight: normal;
+    line-height: 1.5;
+  }
+
+  .body-medium {
+    font-size: var(--step-2);
+    font-weight: normal;
+    line-height: 1.5;
+  }
+
+  .body-normal {
+    font-size: var(--step-1);
+    font-weight: normal;
+    line-height: 1.5;
+  }
+
+  .body-small {
+    font-size: var(--step--0);
+    font-weight: normal;
+    line-height: 1.5;
+  }
+
+  .body-xsmall {
+    font-size: var(--step--1);
+    font-weight: normal;
+    line-height: 1.5;
+  }
+
+  .body-large-semibold {
+    font-size: var(--step-3);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  .body-medium-semibold {
+    font-size: var(--step-2);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  .body-normal-semibold {
+    font-size: var(--step-1);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  .body-small-semibold {
+    font-size: var(--step-0);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  .body-xsmall-semibold {
+    font-size: var(--step--1);
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  .body-large-bold {
+    font-size: var(--step-3);
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  .body-medium-bold {
+    font-size: var(--step-2);
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  .body-normal-bold {
+    font-size: var(--step-1);
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  .body-small-bold {
+    font-size: var(--step-0);
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  .body-xsmall-bold {
+    font-size: var(--step--1);
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  /* Links */
+
+  .link-large {
+    color: var(--theme-link-default);
+    font-size: var(--step-3);
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: underline;
+
+    &:visited {
+      color: var(--theme-link-default);
+    }
+  }
+
+  .link-medium {
+    color: var(--theme-link-default);
+    font-size: var(--step-2);
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: underline;
+
+    &:visited {
+      color: var(--theme-link-default);
+    }
+  }
+
+  .link-normal {
+    color: var(--theme-link-default);
+    font-size: var(--step-1);
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: underline;
+
+    &:visited,
+    &:active {
+      color: var(--theme-link-default);
+    }
+  }
+
+  .link-small {
+    color: var(--theme-link-default);
+    font-size: var(--step-0);
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: underline;
+
+    &:visited {
+      color: var(--theme-link-default);
+    }
+  }
+
+  .link-xsmall {
+    color: var(--theme-link-default);
+    font-size: var(--step--1);
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: underline;
+
+    &:visited {
+      color: var(--theme-link-default);
+    }
+  }
+}

package/assets/styles/setup/typography/utility-classes/_generic-font-variation-settings.css

@@ -0,0 +1,29 @@
+:root {
+  .fvs-wght-100 {
+    font-variation-settings: 'wght' 100;
+  }
+  .fvs-wght-200 {
+    font-variation-settings: 'wght' 200;
+  }
+  .fvs-wght-300 {
+    font-variation-settings: 'wght' 300;
+  }
+  .fvs-wght-400 {
+    font-variation-settings: 'wght' 400;
+  }
+  .fvs-wght-500 {
+    font-variation-settings: 'wght' 500;
+  }
+  .fvs-wght-600 {
+    font-variation-settings: 'wght' 600;
+  }
+  .fvs-wght-700 {
+    font-variation-settings: 'wght' 700;
+  }
+  .fvs-wght-800 {
+    font-variation-settings: 'wght' 800;
+  }
+  .fvs-wght-900 {
+    font-variation-settings: 'wght' 900;
+  }
+}

package/assets/styles/setup/typography/utility-classes/_generic-font-weights.css

@@ -0,0 +1,41 @@
+:root {
+  /* By numeric step */
+  .wght-100 {
+    font-weight: 100;
+  }
+  .wght-200 {
+    font-weight: 200;
+  }
+  .wght-300 {
+    font-weight: 300;
+  }
+  .wght-400 {
+    font-weight: 400;
+  }
+  .wght-500 {
+    font-weight: 500;
+  }
+  .wght-600 {
+    font-weight: 600;
+  }
+  .wght-700 {
+    font-weight: 700;
+  }
+  .wght-800 {
+    font-weight: 800;
+  }
+  .wght-900 {
+    font-weight: 900;
+  }
+
+  /* By named weight */
+  .light {
+    font-weight: light;
+  }
+  .normal {
+    font-weight: normal;
+  }
+  .bold {
+    font-weight: bold;
+  }
+}

package/assets/styles/setup/typography/utility-classes/index.css

@@ -0,0 +1,3 @@
+@import './_generic-font-classes.css';
+@import './_generic-font-weights.css';
+@import './_generic-font-variation-settings.css';

package/assets/styles/setup/typography/vars/index.css

@@ -0,0 +1 @@
+@import './_reponsive-font-sizes.css';

package/assets/styles/setup/utility-classes/_page.css

@@ -0,0 +1,49 @@
+html {
+  color-scheme: light dark;
+
+  &[data-color-scheme='light'] {
+    color-scheme: light;
+  }
+
+  &[data-color-scheme='dark'] {
+    color-scheme: dark;
+  }
+
+  background-color: var(--page-bg);
+
+  font-size: 62.5%;
+
+  transition: background-color 0.4s ease, color 0.4s ease;
+  scrollbar-gutter: stable;
+}
+body,
+p,
+pre,
+code,
+div,
+fieldset,
+legend,
+li,
+a {
+  color: light-dark(var(--gray-12), var(--gray-3));
+  font-family: var(--font-family);
+  font-size: var(--step-1);
+}
+
+body {
+  &.page-theme-grey {
+    background-color: lightseagreen;
+  }
+}
+
+form {
+  input {
+    font: inherit;
+    /* accent-color: var(--accent-color, red); */
+  }
+
+  label {
+    text-box-trim: both;
+    text-box-edge: cap alphabetic;
+  }
+}

package/assets/styles/setup/utility-classes/index.css

@@ -0,0 +1,3 @@
+@import './_page.css';
+@import './_margin-helpers.css';
+@import './_padding-helpers.css';