create-atsdc-stack 1.1.0 → 1.2.0

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

@@ -1,96 +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;
+// 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

@@ -1,238 +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;
-    }
-}
+@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/tests/browser.test.nopause.ts

@@ -0,0 +1,10 @@
+import { test } from '@playwright/test'
+import 'dotenv/config'
+
+const base = 'http://localhost:4321';
+const path = process.env.BROWSER_TEST_PATH || '';
+
+test('test browser', async ({ page }) => {
+    // point this to wherever you want
+    await page.goto(`${base}${path.startsWith('/') ? path : `/${path}`}`)
+})