@classic-homes/theme-styles 0.1.0

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@classic-homes/theme-styles",
+  "version": "0.1.0",
+  "description": "Base styles and utilities for the Classic Theme design system",
+  "type": "module",
+  "scripts": {
+    "build": "echo 'No build needed for styles package'"
+  },
+  "exports": {
+    ".": "./src/index.css",
+    "./base": "./src/base.css",
+    "./accessibility": "./src/accessibility.css",
+    "./utilities": "./src/utilities.css"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "styles",
+    "css",
+    "design-system",
+    "classic-theme"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Classic-Homes/classic-theme.git",
+    "directory": "packages/styles"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@classic-homes/theme-tokens": "*"
+  }
+}

package/src/accessibility.css

@@ -0,0 +1,159 @@
+/**
+ * Classic Theme Accessibility Styles
+ * 
+ * WCAG 2.1 AA compliant styles for focus states, touch targets,
+ * reduced motion, and screen reader utilities.
+ */
+
+@layer classic-theme.base {
+  /* ===== Focus Visible Styles (WCAG 2.4.7) ===== */
+
+  /* Default focus ring using brand primary color */
+  :focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  /* Remove default outline for mouse users (handled by :focus-visible) */
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /* Enhanced focus for interactive elements */
+  button:focus-visible,
+  [role='button']:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible,
+  a:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+    border-radius: var(--radius, 0.25rem);
+  }
+
+  /* ===== Skip Link (WCAG 2.4.1) ===== */
+
+  .skip-link {
+    position: absolute;
+    top: -100%;
+    left: 0;
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    padding: 0.75rem 1rem;
+    z-index: 9999;
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: 0 0 var(--radius) 0;
+  }
+
+  .skip-link:focus {
+    top: 0;
+    outline: none;
+  }
+
+  /* ===== Touch Target Utilities (WCAG 2.5.5) ===== */
+
+  /* Minimum 44x44px touch targets for mobile */
+  .touch-target {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  /* Expanded touch area using pseudo-element */
+  .touch-target-expand {
+    position: relative;
+  }
+
+  .touch-target-expand::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 44px;
+    min-height: 44px;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* ===== Reduced Motion (WCAG 2.3.3) ===== */
+
+  @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;
+    }
+  }
+
+  /* ===== Screen Reader Only (WCAG) ===== */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* Show element when focused (for skip links) */
+  .sr-only-focusable:focus,
+  .sr-only-focusable:active {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: inherit;
+    margin: inherit;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+
+  /* ===== High Contrast Mode Support ===== */
+
+  @media (forced-colors: active) {
+    /* Ensure borders are visible in high contrast mode */
+    button,
+    input,
+    select,
+    textarea,
+    [role='button'] {
+      border: 1px solid ButtonText;
+    }
+
+    /* Ensure focus is visible */
+    :focus-visible {
+      outline: 2px solid Highlight;
+    }
+  }
+
+  /* ===== Visible Focus Indicator Utility ===== */
+
+  .focus-ring {
+    outline: none;
+  }
+
+  .focus-ring:focus-visible {
+    box-shadow:
+      0 0 0 2px hsl(var(--background)),
+      0 0 0 4px hsl(var(--ring));
+  }
+
+  /* ===== Not Focusable Utility ===== */
+
+  .not-focusable {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  .not-focusable:focus {
+    outline: none !important;
+  }
+}

package/src/base.css

@@ -0,0 +1,205 @@
+/**
+ * Classic Theme Base Styles
+ * 
+ * Provides foundational typography and base element styles
+ * following Classic Homes brand guidelines.
+ */
+
+@layer classic-theme.base {
+  /* Import brand fonts from Google Fonts */
+  @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');
+
+  /* Base HTML setup */
+  html {
+    font-family: var(
+      --font-sans,
+      'Figtree',
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      sans-serif
+    );
+    font-size: 16px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Body base styles */
+  body {
+    color: hsl(var(--foreground));
+    background-color: hsl(var(--background));
+    margin: 0;
+    min-height: 100vh;
+  }
+
+  /* Heading styles - use serif font per brand guidelines */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(
+      --font-serif,
+      'Source Serif 4',
+      ui-serif,
+      Georgia,
+      Cambria,
+      'Times New Roman',
+      Times,
+      serif
+    );
+    color: hsl(var(--foreground));
+    font-weight: 600;
+    line-height: 1.2;
+    margin-top: 0;
+    margin-bottom: 0.5em;
+  }
+
+  h1 {
+    font-size: 2.25rem;
+  } /* 36px */
+  h2 {
+    font-size: 1.875rem;
+  } /* 30px */
+  h3 {
+    font-size: 1.5rem;
+  } /* 24px */
+  h4 {
+    font-size: 1.25rem;
+  } /* 20px */
+  h5 {
+    font-size: 1.125rem;
+  } /* 18px */
+  h6 {
+    font-size: 1rem;
+  } /* 16px */
+
+  /* Paragraph and text */
+  p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  /* Links */
+  a {
+    color: hsl(var(--primary));
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  /* Strong text */
+  strong,
+  b {
+    font-weight: 600;
+  }
+
+  /* Code elements */
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+      monospace;
+    font-size: 0.875em;
+  }
+
+  code {
+    background-color: hsl(var(--muted));
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+  }
+
+  pre {
+    background-color: hsl(var(--muted));
+    padding: 1rem;
+    border-radius: var(--radius);
+    overflow-x: auto;
+  }
+
+  pre code {
+    background-color: transparent;
+    padding: 0;
+  }
+
+  /* Lists */
+  ul,
+  ol {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+  }
+
+  li {
+    margin-bottom: 0.25rem;
+  }
+
+  /* Horizontal rule */
+  hr {
+    border: 0;
+    border-top: 1px solid hsl(var(--border));
+    margin: 1.5rem 0;
+  }
+
+  /* Images */
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  /* Tables */
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+
+  th,
+  td {
+    padding: 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid hsl(var(--border));
+  }
+
+  th {
+    font-weight: 600;
+    background-color: hsl(var(--muted));
+  }
+
+  /* Form element resets */
+  button,
+  input,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  /* Blockquote */
+  blockquote {
+    border-left: 4px solid hsl(var(--primary));
+    margin: 1rem 0;
+    padding-left: 1rem;
+    color: hsl(var(--muted-foreground));
+    font-style: italic;
+  }
+
+  /* Selection styles */
+  ::selection {
+    background-color: hsl(var(--primary) / 0.2);
+    color: hsl(var(--foreground));
+  }
+}

package/src/index.css

@@ -0,0 +1,26 @@
+/**
+ * Classic Theme Styles
+ * 
+ * Main entry point for all Classic Theme styles.
+ * Import this file in your app.css before Tailwind directives:
+ * 
+ * @import '@classic-theme/styles';
+ * @tailwind base;
+ * @tailwind components;
+ * @tailwind utilities;
+ */
+
+/* Define CSS layer order - lowest to highest specificity */
+@layer classic-theme.tokens, classic-theme.base, classic-theme.components, classic-theme.utilities;
+
+/* Import design tokens (CSS custom properties) */
+@import '@classic-theme/tokens/css';
+
+/* Import base styles */
+@import './base.css';
+
+/* Import accessibility styles */
+@import './accessibility.css';
+
+/* Import utility classes */
+@import './utilities.css';

package/src/utilities.css

@@ -0,0 +1,260 @@
+/**
+ * Classic Theme Utility Styles
+ * 
+ * Common utility classes for scrollbars, transitions,
+ * and other frequently needed styles.
+ */
+
+@layer classic-theme.utilities {
+  /* ===== Scrollbar Utilities ===== */
+
+  /* Hide scrollbar but keep functionality */
+  .scrollbar-hide {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
+
+  /* Thin scrollbar */
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground) / 0.3);
+    border-radius: 3px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--muted-foreground) / 0.5);
+  }
+
+  /* ===== Transition Utilities ===== */
+
+  .transition-colors {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  .transition-transform {
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  /* Menu item transition (for sidebar/nav items) */
+  .transition-menu-item {
+    transition:
+      background-color 150ms ease,
+      color 150ms ease,
+      transform 100ms ease;
+  }
+
+  /* ===== Text Utilities ===== */
+
+  /* Truncate single line */
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Line clamp utilities */
+  .line-clamp-1 {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* ===== Layout Utilities ===== */
+
+  /* Container with max-width and padding */
+  .container-default {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  @media (min-width: 640px) {
+    .container-default {
+      max-width: 640px;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .container-default {
+      max-width: 768px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .container-default {
+      max-width: 1024px;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .container-default {
+      max-width: 1280px;
+    }
+  }
+
+  /* ===== Interactive State Utilities ===== */
+
+  /* Disabled state */
+  .disabled {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Interactive hover */
+  .hover-lift {
+    transition:
+      transform 150ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .hover-lift:hover {
+    transform: translateY(-2px);
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+  }
+
+  /* ===== Animation Utilities ===== */
+
+  /* Spin animation */
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .animate-spin {
+    animation: spin 1s linear infinite;
+  }
+
+  .animate-spin-slow {
+    animation: spin 2s linear infinite;
+  }
+
+  /* Pulse animation */
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  .animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  /* Fade in animation */
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .animate-fade-in {
+    animation: fade-in 200ms ease-out;
+  }
+
+  /* Slide up animation */
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-slide-up {
+    animation: slide-up 200ms ease-out;
+  }
+
+  /* Slide down animation */
+  @keyframes slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-slide-down {
+    animation: slide-down 200ms ease-out;
+  }
+
+  /* ===== Print Utilities ===== */
+
+  @media print {
+    .print-hidden {
+      display: none !important;
+    }
+
+    .print-visible {
+      display: block !important;
+    }
+  }
+}