create-atsdc-stack 1.0.0

package/app/src/styles/global.scss

@@ -0,0 +1,141 @@
+// OpenProps - CSS design tokens
+@use 'open-props/style' as *;
+@use 'open-props/normalize' as *;
+
+@use './reset' as *;
+@use './variables/globals' as *;
+@use './variables/mixins' as *;
+
+// Global styles
+:root {
+    // CSS custom properties for runtime theming
+    --color-primary: #{$primary-color};
+    --color-primary-hover: #{$primary-hover};
+    --color-secondary: #{$secondary-color};
+    --color-accent: #{$accent-color};
+    --color-text-primary: #{$text-primary};
+    --color-text-secondary: #{$text-secondary};
+    --color-bg-primary: #{$bg-primary};
+    --color-bg-secondary: #{$bg-secondary};
+}
+
+html {
+    font-family: $font-family-base;
+    font-size: 16px;
+    color: $text-primary;
+    background-color: $bg-primary;
+    @include smooth-scroll;
+}
+
+body {
+    overflow-x: hidden;
+}
+
+// Typography
+h1 {
+    @include heading-1;
+    margin-bottom: $spacing-large;
+}
+
+h2 {
+    @include heading-2;
+    margin-bottom: $spacing-medium;
+}
+
+h3 {
+    @include heading-3;
+    margin-bottom: $spacing-medium;
+}
+
+p {
+    margin-bottom: $spacing-medium;
+    line-height: $line-height-relaxed;
+    color: $text-secondary;
+}
+
+// Links
+a {
+    color: $primary-color;
+    transition: color $transition-fast;
+
+    &:hover {
+        color: $primary-hover;
+    }
+
+    @include focus-visible;
+}
+
+// Utility classes
+.container {
+    @include container;
+}
+
+.flex-center {
+    @include flex-center;
+}
+
+.flex-between {
+    @include flex-between;
+}
+
+.flex-column {
+    @include flex-column;
+}
+
+.card {
+    @include card;
+}
+
+.sr-only {
+    @include visually-hidden;
+}
+
+// Spacing utilities
+.mt-small { margin-top: $spacing-small; }
+.mt-medium { margin-top: $spacing-medium; }
+.mt-large { margin-top: $spacing-large; }
+.mt-extra-large { margin-top: $spacing-extra-large; }
+
+.mb-small { margin-bottom: $spacing-small; }
+.mb-medium { margin-bottom: $spacing-medium; }
+.mb-large { margin-bottom: $spacing-large; }
+.mb-extra-large { margin-bottom: $spacing-extra-large; }
+
+.pt-small { padding-top: $spacing-small; }
+.pt-medium { padding-top: $spacing-medium; }
+.pt-large { padding-top: $spacing-large; }
+.pt-extra-large { padding-top: $spacing-extra-large; }
+
+.pb-small { padding-bottom: $spacing-small; }
+.pb-medium { padding-bottom: $spacing-medium; }
+.pb-large { padding-bottom: $spacing-large; }
+.pb-extra-large { padding-bottom: $spacing-extra-large; }
+
+// Text utilities
+.text-center {
+    text-align: center;
+}
+
+.text-primary {
+    color: $text-primary;
+}
+
+.text-secondary {
+    color: $text-secondary;
+}
+
+.text-light {
+    color: $text-light;
+}
+
+.truncate {
+    @include truncate;
+}
+
+.line-clamp-2 {
+    @include line-clamp(2);
+}
+
+.line-clamp-3 {
+    @include line-clamp(3);
+}

package/app/src/styles/pages/index.scss

@@ -0,0 +1,80 @@
+@use '../variables/globals' as *;
+@use '../variables/mixins' as *;
+
+// Home page styles
+.home {
+    padding: $spacing-3x-large 0;
+
+    &__header {
+        text-align: center;
+        margin-bottom: $spacing-3x-large;
+    }
+
+    &__title {
+        @include heading-1;
+        margin-inline: auto;
+        margin-bottom: $spacing-medium;
+        background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+
+    &__subtitle {
+        font-size: $font-size-large;
+        color: $text-secondary;
+        max-width: 600px;
+        margin: 0 auto;
+
+        @include desktop {
+            font-size: $font-size-extra-large;
+        }
+    }
+
+    &__features {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: $spacing-large;
+        margin-bottom: $spacing-3x-large;
+
+        @include tablet {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        @include wide {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+
+    &__feature {
+        h3 {
+            font-size: $font-size-extra-large;
+            font-weight: $font-weight-semibold;
+            margin-bottom: $spacing-small;
+            color: $text-primary;
+        }
+
+        p {
+            font-size: $font-size-base;
+            color: $text-secondary;
+            margin-bottom: 0;
+        }
+    }
+
+    &__cta {
+        text-align: center;
+        padding: $spacing-3x-large 0;
+        border-top: 1px solid $border-color;
+
+        h2 {
+            @include heading-2;
+            margin-bottom: $spacing-extra-large;
+        }
+    }
+
+    &__cta-buttons {
+        @include flex-center;
+        gap: $spacing-large;
+        flex-wrap: wrap;
+    }
+}

package/app/src/styles/reset.scss

@@ -0,0 +1,83 @@
+/* Modern CSS Reset */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    min-height: 100vh;
+    text-rendering: optimizeSpeed;
+    line-height: 1.5;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+input,
+button,
+textarea,
+select {
+    font: inherit;
+    color: inherit;
+}
+
+button {
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}

package/app/src/styles/variables/globals.scss

@@ -0,0 +1,96 @@
+// Color palette
+$primary-color: #4f46e5;
+$primary-hover: #4338ca;
+$secondary-color: #06b6d4;
+$accent-color: #f59e0b;
+
+// Text colors
+$text-primary: #1f2937;
+$text-secondary: #6b7280;
+$text-light: #9ca3af;
+$text-inverse: #ffffff;
+
+// Background colors
+$bg-primary: #ffffff;
+$bg-secondary: #f9fafb;
+$bg-tertiary: #f3f4f6;
+$bg-dark: #111827;
+
+// Border colors
+$border-color: #e5e7eb;
+$border-focus: #4f46e5;
+
+// Status colors
+$success-color: #10b981;
+$warning-color: #f59e0b;
+$error-color: #ef4444;
+$info-color: #3b82f6;
+
+// Spacing scale (using OpenProps size tokens)
+$spacing-extra-small: var(--size-2);  // 0.5rem
+$spacing-small: var(--size-3);        // 1rem
+$spacing-medium: var(--size-4);       // 1.25rem
+$spacing-large: var(--size-5);        // 1.5rem
+$spacing-extra-large: var(--size-6);  // 1.75rem
+$spacing-2x-large: var(--size-8);     // 3rem
+$spacing-3x-large: var(--size-10);    // 4rem
+
+// Typography
+$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+$font-family-mono: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+
+// Font sizes (using OpenProps font-size tokens)
+$font-size-extra-small: var(--font-size-0);   // 0.75rem
+$font-size-small: var(--font-size-1);         // 0.875rem
+$font-size-base: var(--font-size-2);          // 1rem
+$font-size-large: var(--font-size-3);         // 1.125rem
+$font-size-extra-large: var(--font-size-4);   // 1.25rem
+$font-size-2x-large: var(--font-size-5);      // 1.5rem
+$font-size-3x-large: var(--font-size-6);      // 1.875rem
+$font-size-4x-large: var(--font-size-7);      // 2.25rem
+
+// Font weights (using OpenProps font-weight tokens)
+$font-weight-normal: var(--font-weight-4);    // 400
+$font-weight-medium: var(--font-weight-5);    // 500
+$font-weight-semibold: var(--font-weight-6);  // 600
+$font-weight-bold: var(--font-weight-7);      // 700
+
+// Line heights (using OpenProps lineheight tokens)
+$line-height-tight: var(--font-lineheight-0); // 1.25
+$line-height-normal: var(--font-lineheight-3);// 1.5
+$line-height-relaxed: var(--font-lineheight-4);// 1.75
+
+// Border radius (using OpenProps radius tokens)
+$radius-small: var(--radius-2);       // 0.25rem
+$radius-medium: var(--radius-3);      // 0.5rem
+$radius-large: var(--radius-4);       // 1rem
+$radius-extra-large: var(--radius-5); // 1.5rem
+$radius-2x-large: var(--radius-6);    // 2rem
+$radius-full: var(--radius-round);    // 9999px
+
+// Shadows (using OpenProps shadow tokens)
+$shadow-small: var(--shadow-2);       // Subtle shadow
+$shadow-medium: var(--shadow-3);      // Medium shadow
+$shadow-large: var(--shadow-4);       // Large shadow
+$shadow-extra-large: var(--shadow-6); // Extra large shadow
+
+// Transitions (using OpenProps easing tokens)
+$transition-fast: var(--ease-1);  // Fast spring easing
+$transition-base: var(--ease-3);  // Standard easing
+$transition-slow: var(--ease-4);  // Slow easing
+
+// Breakpoints
+$breakpoint-tablet: 640px;
+$breakpoint-desktop: 768px;
+$breakpoint-wide: 1024px;
+$breakpoint-extra-wide: 1280px;
+$breakpoint-ultra-wide: 1536px;
+
+// Z-index scale
+$z-dropdown: 1000;
+$z-sticky: 1020;
+$z-fixed: 1030;
+$z-modal-backdrop: 1040;
+$z-modal: 1050;
+$z-popover: 1060;
+$z-tooltip: 1070;

package/app/src/styles/variables/mixins.scss

@@ -0,0 +1,238 @@
+@use './globals' as *;
+
+// NOTE: All mixins below use variables from globals.scss which are now powered by OpenProps design tokens
+// This provides consistent spacing, typography, shadows, and other design primitives throughout the app
+
+// Responsive breakpoint mixins
+@mixin tablet {
+    @media (min-width: $breakpoint-tablet) {
+        @content;
+    }
+}
+
+@mixin desktop {
+    @media (min-width: $breakpoint-desktop) {
+        @content;
+    }
+}
+
+@mixin wide {
+    @media (min-width: $breakpoint-wide) {
+        @content;
+    }
+}
+
+@mixin extra-wide {
+    @media (min-width: $breakpoint-extra-wide) {
+        @content;
+    }
+}
+
+@mixin ultra-wide {
+    @media (min-width: $breakpoint-ultra-wide) {
+        @content;
+    }
+}
+
+// Flexbox utilities
+@mixin flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@mixin flex-between {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+@mixin flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+// Button mixin
+@mixin button-base {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: $spacing-small $spacing-large;
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    font-weight: $font-weight-medium;
+    line-height: $line-height-normal;
+    border: none;
+    border-radius: $radius-medium;
+    cursor: pointer;
+    transition: all $transition-base;
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    &:focus-visible {
+        outline: 2px solid $border-focus;
+        outline-offset: 2px;
+    }
+}
+
+@mixin button-primary {
+    @include button-base;
+    background-color: $primary-color;
+    color: $text-inverse;
+
+    &:hover:not(:disabled) {
+        background-color: $primary-hover;
+    }
+}
+
+@mixin button-secondary {
+    @include button-base;
+    background-color: transparent;
+    color: $primary-color;
+    border: 1px solid $border-color;
+
+    &:hover:not(:disabled) {
+        background-color: $bg-secondary;
+    }
+}
+
+// Card mixin
+@mixin card {
+    background-color: $bg-primary;
+    border: 1px solid $border-color;
+    border-radius: $radius-large;
+    padding: $spacing-extra-large;
+    box-shadow: $shadow-small;
+    transition: box-shadow $transition-base;
+
+    &:hover {
+        box-shadow: $shadow-medium;
+    }
+}
+
+// Input mixin
+@mixin input-base {
+    width: 100%;
+    padding: $spacing-small $spacing-medium;
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    line-height: $line-height-normal;
+    color: $text-primary;
+    background-color: $bg-primary;
+    border: 1px solid $border-color;
+    border-radius: $radius-medium;
+    transition: border-color $transition-fast;
+
+    &:focus {
+        outline: none;
+        border-color: $border-focus;
+        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+    }
+
+    &::placeholder {
+        color: $text-light;
+    }
+
+    &:disabled {
+        background-color: $bg-tertiary;
+        cursor: not-allowed;
+    }
+}
+
+// Container mixin
+@mixin container {
+    width: 100%;
+    max-width: $breakpoint-extra-wide;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: $spacing-medium;
+    padding-right: $spacing-medium;
+
+    @include wide {
+        padding-left: $spacing-extra-large;
+        padding-right: $spacing-extra-large;
+    }
+}
+
+// Typography mixins
+@mixin heading-1 {
+    font-size: $font-size-3x-large;
+    font-weight: $font-weight-bold;
+    line-height: $line-height-tight;
+    color: $text-primary;
+
+    @include desktop {
+        font-size: $font-size-4x-large;
+    }
+}
+
+@mixin heading-2 {
+    font-size: $font-size-2x-large;
+    font-weight: $font-weight-bold;
+    line-height: $line-height-tight;
+    color: $text-primary;
+
+    @include desktop {
+        font-size: $font-size-3x-large;
+    }
+}
+
+@mixin heading-3 {
+    font-size: $font-size-extra-large;
+    font-weight: $font-weight-semibold;
+    line-height: $line-height-tight;
+    color: $text-primary;
+
+    @include desktop {
+        font-size: $font-size-2x-large;
+    }
+}
+
+// Truncate text
+@mixin truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// Multi-line truncate
+@mixin line-clamp($lines: 2) {
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+// Visually hidden (accessible)
+@mixin visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+// Focus visible outline
+@mixin focus-visible {
+    &:focus-visible {
+        outline: 2px solid $border-focus;
+        outline-offset: 2px;
+    }
+}
+
+// Smooth scrolling
+@mixin smooth-scroll {
+    scroll-behavior: smooth;
+    @supports(-webkit-overflow-scrolling: touch) {
+        -webkit-overflow-scrolling: touch;
+    }
+}

package/app/tsconfig.json

@@ -0,0 +1,45 @@
+{
+    "extends": "astro/tsconfigs/strict",
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "lib": [
+            "ES2022",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "jsx": "react-jsx",
+        "jsxImportSource": "react",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "allowJs": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "src/*"
+            ],
+            "@db/*": [
+                "src/db/*"
+            ],
+            "@styles/*": [
+                "src/styles/*"
+            ],
+            "@components/*": [
+                "src/components/*"
+            ]
+        }
+    },
+    "include": [
+        "src/**/*",
+        ".astro/**/*"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}