@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.6 → 0.1.7

package/src/styles/layers/overrides.css

@@ -0,0 +1,108 @@
+/* CSS Overrides Layer */
+/* This layer provides application-specific overrides with highest priority */
+
+@layer overrides {
+  /* High-priority overrides for application-specific customizations */
+
+  /* Accessibility overrides that must take precedence */
+  .a11y-override {
+    /* Force focus visibility for accessibility */
+    outline: 2px solid var(--cs-colors-interactive-focus) !important;
+    outline-offset: 2px !important;
+  }
+
+  /* High contrast mode overrides */
+  @media (prefers-contrast: high) {
+    * {
+      border-color: currentColor !important;
+    }
+
+    .button,
+    .input,
+    .card {
+      border-width: var(--cs-border-width-thick) !important;
+    }
+  }
+
+  /* Reduced motion overrides */
+  @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;
+    }
+  }
+
+  /* Print overrides */
+  @media print {
+    /* Hide interactive elements in print */
+    .button--ghost,
+    .tooltip,
+    .popover,
+    .modal__overlay,
+    .sidebar__mobile-toggle {
+      display: none !important;
+    }
+
+    /* Ensure readability in print */
+    .card,
+    .alert,
+    .modal__container {
+      border: 1px solid #000 !important;
+      box-shadow: none !important;
+    }
+
+    /* Force link visibility in print */
+    a[href]:after {
+      content: " (" attr(href) ")" !important;
+      font-size: 0.8em !important;
+      color: #666 !important;
+    }
+  }
+
+  /* Emergency overrides for broken states */
+  .force-visible {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+  }
+
+  .force-hidden {
+    display: none !important;
+  }
+
+  /* Debug and development overrides */
+  .debug-outline * {
+    outline: 1px solid red !important;
+  }
+
+  .debug-spacing * {
+    background: rgba(255, 0, 0, 0.1) !important;
+  }
+
+  /* Browser-specific overrides */
+
+  /* Safari-specific fixes */
+  @supports (-webkit-appearance: none) {
+    .input {
+      -webkit-appearance: none !important;
+    }
+  }
+
+  /* Firefox-specific fixes */
+  @-moz-document url-prefix() {
+    .button {
+      -moz-user-select: none !important;
+    }
+  }
+
+  /* IE/Edge legacy support (if needed) */
+  @supports (-ms-ime-align: auto) {
+    .grid {
+      display: -ms-grid !important;
+    }
+  }
+}

package/src/styles/layers/validation.css

@@ -0,0 +1,159 @@
+/* CSS Layers Validation and Testing */
+/* This file provides diagnostic tools for validating layer order and specificity */
+
+/* Test classes to verify layer cascade order */
+
+/* Reset layer test - lowest priority */
+@layer reset {
+  .layer-test {
+    background-color: red; /* Should be overridden */
+    content: "reset";
+  }
+}
+
+/* Base layer test */
+@layer base {
+  .layer-test {
+    background-color: orange; /* Should be overridden */
+    content: "base";
+  }
+}
+
+/* Themes layer test */
+@layer themes {
+  .layer-test {
+    background-color: yellow; /* Should be overridden */
+    content: "themes";
+  }
+}
+
+/* Components layer test */
+@layer components {
+  .layer-test {
+    background-color: green; /* Should be overridden */
+    content: "components";
+  }
+}
+
+/* Utilities layer test */
+@layer utilities {
+  .layer-test {
+    background-color: blue; /* Should be overridden by overrides only */
+    content: "utilities";
+  }
+}
+
+/* Overrides layer test - highest priority */
+@layer overrides {
+  .layer-test {
+    background-color: purple; /* Should win */
+    content: "overrides";
+  }
+}
+
+/* Specificity test classes */
+@layer components {
+  /* Lower specificity - should lose */
+  .specificity-test {
+    background-color: red;
+    border: 2px solid red;
+  }
+}
+
+@layer utilities {
+  /* Same specificity but higher layer - should win */
+  .specificity-test {
+    background-color: blue;
+    border: 2px solid blue;
+  }
+}
+
+/* Layer inheritance test */
+@layer components {
+  .inheritance-test {
+    color: red;
+    font-size: 16px;
+  }
+
+  .inheritance-test .child {
+    /* Inherits color from parent */
+    font-weight: bold;
+  }
+}
+
+@layer utilities {
+  .inheritance-test {
+    color: blue; /* Should override components layer */
+  }
+}
+
+/* Media query layer test */
+@layer components {
+  .responsive-layer-test {
+    background-color: red;
+  }
+
+  @media (max-width: 768px) {
+    .responsive-layer-test {
+      background-color: orange;
+    }
+  }
+}
+
+@layer utilities {
+  .responsive-layer-test {
+    background-color: blue;
+  }
+
+  @media (max-width: 768px) {
+    .responsive-layer-test {
+      background-color: green; /* Should win in mobile */
+    }
+  }
+}
+
+/* Validation diagnostic styles */
+.layer-diagnostic {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  background: white;
+  border: 2px solid #ccc;
+  padding: 10px;
+  font-family: monospace;
+  font-size: 12px;
+  z-index: 9999;
+  border-radius: 4px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  max-width: 300px;
+}
+
+.layer-diagnostic h3 {
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  color: #333;
+}
+
+.layer-diagnostic .test-result {
+  margin: 5px 0;
+  padding: 3px;
+  border-radius: 2px;
+}
+
+.layer-diagnostic .test-result.pass {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.layer-diagnostic .test-result.fail {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+/* Hidden test elements */
+.layer-test,
+.specificity-test,
+.inheritance-test,
+.responsive-layer-test {
+  display: none !important;
+}

package/src/styles/layers/validation.js

@@ -0,0 +1,310 @@
+/**
+ * CSS Layers Validation Tool
+ * Tests cascade order and specificity control in CSS layers
+ */
+
+/**
+ * Test if CSS layers are working correctly
+ * @returns {Object} Test results
+ */
+export function validateCSSLayers() {
+  const results = {
+    layerOrder: testLayerOrder(),
+    specificity: testSpecificity(),
+    inheritance: testInheritance(),
+    responsive: testResponsiveOrder(),
+    summary: null
+  };
+
+  // Calculate summary
+  const totalTests = Object.values(results).reduce((acc, testGroup) => {
+    if (testGroup && typeof testGroup === 'object' && testGroup.tests) {
+      return acc + testGroup.tests.length;
+    }
+    return acc;
+  }, 0);
+
+  const passedTests = Object.values(results).reduce((acc, testGroup) => {
+    if (testGroup && typeof testGroup === 'object' && testGroup.tests) {
+      return acc + testGroup.tests.filter(test => test.passed).length;
+    }
+    return acc;
+  }, 0);
+
+  results.summary = {
+    total: totalTests,
+    passed: passedTests,
+    failed: totalTests - passedTests,
+    percentage: totalTests > 0 ? Math.round((passedTests / totalTests) * 100) : 0
+  };
+
+  return results;
+}
+
+/**
+ * Test layer cascade order
+ */
+function testLayerOrder() {
+  const tests = [];
+
+  // Create test element
+  const testElement = document.createElement('div');
+  testElement.className = 'layer-test';
+  testElement.style.position = 'absolute';
+  testElement.style.visibility = 'hidden';
+  document.body.appendChild(testElement);
+
+  try {
+    const computedStyle = window.getComputedStyle(testElement);
+    const backgroundColor = computedStyle.backgroundColor;
+    const content = computedStyle.content;
+
+    // Test that overrides layer wins (purple background)
+    tests.push({
+      name: 'Layer order - overrides wins',
+      passed: backgroundColor === 'rgb(128, 0, 128)' || backgroundColor === 'purple',
+      expected: 'purple background from overrides layer',
+      actual: backgroundColor
+    });
+
+    tests.push({
+      name: 'Layer content property',
+      passed: content === '"overrides"',
+      expected: '"overrides"',
+      actual: content
+    });
+
+  } catch (error) {
+    tests.push({
+      name: 'Layer order test',
+      passed: false,
+      expected: 'No errors',
+      actual: error.message
+    });
+  } finally {
+    document.body.removeChild(testElement);
+  }
+
+  return {
+    category: 'Layer Order',
+    tests
+  };
+}
+
+/**
+ * Test specificity within layers
+ */
+function testSpecificity() {
+  const tests = [];
+
+  const testElement = document.createElement('div');
+  testElement.className = 'specificity-test';
+  testElement.style.position = 'absolute';
+  testElement.style.visibility = 'hidden';
+  document.body.appendChild(testElement);
+
+  try {
+    const computedStyle = window.getComputedStyle(testElement);
+    const backgroundColor = computedStyle.backgroundColor;
+
+    // Test that utilities layer wins over components layer
+    tests.push({
+      name: 'Specificity - utilities over components',
+      passed: backgroundColor === 'rgb(0, 0, 255)' || backgroundColor === 'blue',
+      expected: 'blue background from utilities layer',
+      actual: backgroundColor
+    });
+
+  } catch (error) {
+    tests.push({
+      name: 'Specificity test',
+      passed: false,
+      expected: 'No errors',
+      actual: error.message
+    });
+  } finally {
+    document.body.removeChild(testElement);
+  }
+
+  return {
+    category: 'Specificity',
+    tests
+  };
+}
+
+/**
+ * Test inheritance within layers
+ */
+function testInheritance() {
+  const tests = [];
+
+  const parentElement = document.createElement('div');
+  parentElement.className = 'inheritance-test';
+  const childElement = document.createElement('div');
+  childElement.className = 'child';
+  parentElement.appendChild(childElement);
+
+  parentElement.style.position = 'absolute';
+  parentElement.style.visibility = 'hidden';
+  document.body.appendChild(parentElement);
+
+  try {
+    const parentStyle = window.getComputedStyle(parentElement);
+    const childStyle = window.getComputedStyle(childElement);
+
+    // Test that utilities layer color overrides components layer
+    tests.push({
+      name: 'Layer inheritance - parent color',
+      passed: parentStyle.color === 'rgb(0, 0, 255)' || parentStyle.color === 'blue',
+      expected: 'blue color from utilities layer',
+      actual: parentStyle.color
+    });
+
+    // Test that child inherits the overridden color
+    tests.push({
+      name: 'Layer inheritance - child inherits',
+      passed: childStyle.color === 'rgb(0, 0, 255)' || childStyle.color === 'blue',
+      expected: 'inherited blue color',
+      actual: childStyle.color
+    });
+
+  } catch (error) {
+    tests.push({
+      name: 'Inheritance test',
+      passed: false,
+      expected: 'No errors',
+      actual: error.message
+    });
+  } finally {
+    document.body.removeChild(parentElement);
+  }
+
+  return {
+    category: 'Inheritance',
+    tests
+  };
+}
+
+/**
+ * Test responsive behavior within layers
+ */
+function testResponsiveOrder() {
+  const tests = [];
+
+  const testElement = document.createElement('div');
+  testElement.className = 'responsive-layer-test';
+  testElement.style.position = 'absolute';
+  testElement.style.visibility = 'hidden';
+  document.body.appendChild(testElement);
+
+  try {
+    const computedStyle = window.getComputedStyle(testElement);
+    const backgroundColor = computedStyle.backgroundColor;
+
+    // Test that utilities layer wins in responsive context
+    if (window.innerWidth <= 768) {
+      tests.push({
+        name: 'Responsive layers - mobile utilities win',
+        passed: backgroundColor === 'rgb(0, 128, 0)' || backgroundColor === 'green',
+        expected: 'green background from utilities layer',
+        actual: backgroundColor
+      });
+    } else {
+      tests.push({
+        name: 'Responsive layers - desktop utilities win',
+        passed: backgroundColor === 'rgb(0, 0, 255)' || backgroundColor === 'blue',
+        expected: 'blue background from utilities layer',
+        actual: backgroundColor
+      });
+    }
+
+  } catch (error) {
+    tests.push({
+      name: 'Responsive layer test',
+      passed: false,
+      expected: 'No errors',
+      actual: error.message
+    });
+  } finally {
+    document.body.removeChild(testElement);
+  }
+
+  return {
+    category: 'Responsive',
+    tests
+  };
+}
+
+/**
+ * Generate a visual report of layer validation
+ * @param {Object} results - Validation results
+ * @returns {HTMLElement} Report element
+ */
+export function generateLayerReport(results) {
+  const reportElement = document.createElement('div');
+  reportElement.className = 'layer-diagnostic';
+
+  const title = document.createElement('h3');
+  title.textContent = `CSS Layers Validation (${results.summary.passed}/${results.summary.total} passed)`;
+  reportElement.appendChild(title);
+
+  // Add overall status
+  const overallStatus = document.createElement('div');
+  overallStatus.className = `test-result ${results.summary.percentage >= 80 ? 'pass' : 'fail'}`;
+  overallStatus.textContent = `Overall: ${results.summary.percentage}% passed`;
+  reportElement.appendChild(overallStatus);
+
+  // Add category results
+  Object.values(results).forEach(category => {
+    if (category && category.category && category.tests) {
+      const categoryDiv = document.createElement('div');
+      categoryDiv.style.marginTop = '10px';
+      categoryDiv.innerHTML = `<strong>${category.category}:</strong>`;
+      reportElement.appendChild(categoryDiv);
+
+      category.tests.forEach(test => {
+        const testDiv = document.createElement('div');
+        testDiv.className = `test-result ${test.passed ? 'pass' : 'fail'}`;
+        testDiv.textContent = `${test.passed ? '✓' : '✗'} ${test.name}`;
+        if (!test.passed) {
+          testDiv.title = `Expected: ${test.expected}, Got: ${test.actual}`;
+        }
+        reportElement.appendChild(testDiv);
+      });
+    }
+  });
+
+  return reportElement;
+}
+
+/**
+ * Run validation and display results
+ */
+export function runLayerValidation() {
+  const results = validateCSSLayers();
+  const report = generateLayerReport(results);
+
+  // Remove existing report
+  const existingReport = document.querySelector('.layer-diagnostic');
+  if (existingReport) {
+    existingReport.remove();
+  }
+
+  // Add new report
+  document.body.appendChild(report);
+
+  // Auto-remove after 10 seconds
+  setTimeout(() => {
+    if (report.parentNode) {
+      report.parentNode.removeChild(report);
+    }
+  }, 10000);
+
+  return results;
+}
+
+// Auto-run validation if in development mode
+if (process.env.NODE_ENV === 'development') {
+  // Run validation after a short delay to ensure CSS is loaded
+  setTimeout(runLayerValidation, 1000);
+}