New style Shadow dom

CSS_CUSTOM_PROPERTIES.md

@@ -0,0 +1,92 @@
+# CSS Custom Properties Reference
+
+This document lists all CSS custom properties (variables) available in the Profile Pane web components library, along with usage and extension examples.
+
+## Available Custom Properties
+
+| Variable Name              | Default Value         | Description                                 |
+|---------------------------|----------------------|---------------------------------------------|
+| --primary-color           | #7C4DFF              | Main accent color                           |
+| --secondary-color         | #0077B6              | Secondary accent color                      |
+| --background-color        | #FFFFFF              | Main background color                       |
+| --card-bg                 | #FFFFFF              | Card background color                       |
+| --section-bg              | #F5F5F5              | Section background color                    |
+| --card-internal-bg        | transparent          | Internal card background                    |
+| --card-frame-bg           | #f8f9fa              | Card frame background                       |
+| --card-frame-border       | #e0e0e0              | Card frame border color                     |
+| --text-color              | #1A1A1A              | Main text color                             |
+| --text-secondary          | #666                 | Secondary text color                        |
+| --text-muted              | #444                 | Muted text color                            |
+| --border-light            | #eee                 | Light border color                          |
+| --accent-color            | #FFD600              | Accent color (yellow)                       |
+| --error-color             | #B00020              | Error color                                 |
+| --success-color           | #00C853              | Success color                               |
+| --border-radius           | 1rem                 | Default border radius                       |
+| --border-radius-sm        | 0.5rem               | Small border radius                         |
+| --box-shadow              | 0 2px 8px rgba(...)  | Default box shadow                          |
+| --box-shadow-sm           | 0 1px 4px rgba(...)  | Small box shadow                            |
+| --spacing-xs              | 0.5rem               | Extra small spacing                         |
+| --spacing-sm              | 0.75rem              | Small spacing                               |
+| --spacing-md              | 1rem                 | Medium spacing                              |
+| --spacing-lg              | 1.5rem               | Large spacing                               |
+| --spacing-xl              | 2rem                 | Extra large spacing                         |
+| --font-family             | 'Inter', ...         | Font family                                 |
+| --font-size-base          | 1rem                 | Base font size                              |
+| --font-size-sm            | 0.875rem             | Small font size                             |
+| --font-size-lg            | 1.125rem             | Large font size                             |
+| --font-size-xl            | 1.25rem              | Extra large font size                       |
+| --line-height-base        | 1.5                  | Base line height                            |
+| --line-height-tight       | 1.4                  | Tight line height                           |
+| --line-height-loose       | 1.6                  | Loose line height                           |
+| --letter-spacing-wide     | 0.025em              | Wide letter spacing                         |
+| --min-font-size           | 14px                 | Minimum font size for accessibility         |
+| --min-line-height         | 1.4                  | Minimum line height for accessibility       |
+| --min-touch-target        | 44px                 | Minimum touch target size                   |
+| --focus-ring-width        | 2px                  | Focus ring width                            |
+| --focus-indicator-width   | 3px                  | Focus indicator width                       |
+| --animation-duration      | 0.2s                 | Animation duration                          |
+| --animation-duration-slow | 0.3s                 | Slow animation duration                     |
+| --high-contrast-ratio     | 7:1                  | High contrast ratio (WCAG AAA)              |
+
+> **Note:** This is a partial list. For a full list, see `src/styles/global.css`.
+
+## How to Override a Variable
+
+You can override any custom property on a specific component or globally. For example, to change the card frame background and primary color for all `stuff-card` components:
+
+```css
+stuff-card {
+  --card-frame-bg: #ffeedd;
+  --primary-color: #ff6600;
+}
+```
+
+Or, to set a global theme for all components:
+
+```css
+:root {
+  --primary-color: #0055aa;
+  --card-frame-bg: #f0f0f0;
+}
+```
+
+## Example: Extending a Variable
+
+Suppose you want to make the card border color more prominent:
+
+```css
+stuff-card {
+  --card-frame-border: #ff0000;
+}
+```
+
+This will update the border color for all `stuff-card` elements.
+
+## Where to Find and Add Variables
+
+- All variables are defined in `src/styles/global.css` under `:host, :root`.
+- You can add new variables to this file and use them in your component styles.
+
+---
+
+For more details, see the main README or the source code in `src/styles/global.css`.

README.md

@@ -11,7 +11,6 @@ SolidOS pane that displays a personal profile page
 - lit-html
 - Jest
 - Eslint
-- SolidOS
 
 ### Tests
 

__mocks__/fileMock.js

@@ -1,3 +1,3 @@
 
-module.exports = '// mocked-file-content';
+module.exports = {};
 

babel.config.mjs

@@ -1,19 +1,11 @@
 export default {
   presets: [
-    ['@babel/preset-env', { 
-        targets: { 
-          browsers: ['> 1%', 'last 3 versions', 'not dead']
-        }
-     }],
+      ['@babel/preset-env', {
+          targets: {
+            browsers: ['> 1%', 'last 3 versions', 'not dead']
+          },
+          modules: 'commonjs'
+       }],
     '@babel/preset-typescript'
-  ],
-  plugins: [
-    [
-      'babel-plugin-inline-import', {
-        extensions: [
-          '.ttl'
-        ]
-      }
-    ]
   ]
 }

declarations.d.ts

@@ -1,3 +1,8 @@
+declare module '*.css' {
+  const content: string;
+  export default content;
+}
+
 declare module '*.ttl' {
   const content: string;
   export default content;

dev/index.html

@@ -4,9 +4,7 @@
     <meta charset="utf-8"/>
     <title>profile-pane dev server</title>
     <!-- Load dependencies as globals -->
-    <script src="/node_modules/rdflib/dist/rdflib.min.js"></script>
-    <script src="/node_modules/solid-logic/dist/solid-logic.js"></script> 
-    <script src="/node_modules/solid-ui/dist/solid-ui.js"></script>
+
     <script>
         // Ensure the globals are available with the right names
         if (typeof $rdf !== 'undefined') window.$rdf = $rdf;
@@ -53,5 +51,6 @@ <h1>pane under development</h1>
 <div id="loginBanner"></div>
 <div class="banner"></div>
 <div id="app">Rendering...</div>
+
 </body>
 </html>

dev/index.ts

@@ -1,3 +1,4 @@
+import '../src/styles/global.css'
 import { sym } from 'rdflib'
 import { default as pane } from '../src'
 import { context, fetcher } from './context'
@@ -7,16 +8,22 @@ import * as UI from 'solid-ui'
 const loginBanner = document.getElementById('loginBanner')
 const webId = document.getElementById('webId')
 
-loginBanner.appendChild(UI.login.loginStatusBox(document, null, {}))
+if (loginBanner) {
+  loginBanner.appendChild(UI.login.loginStatusBox(document, null, {}))
+}
 
 async function finishLogin() {
   await authSession.handleIncomingRedirect()
   const session = authSession
   if (session.info.isLoggedIn) {
     // Update the page with the status.
-    webId.innerHTML = 'Logged in as: ' + authn.currentUser().uri
+    if (webId) {
+      webId.innerHTML = 'Logged in as: ' + authn.currentUser().uri
+    }
   } else {
-    webId.innerHTML = ''
+    if (webId) {
+      webId.innerHTML = ''
+    }
   }
 }
 
@@ -26,5 +33,8 @@ const webIdToShow = 'https://testingsolidos.solidcommunity.net/profile/card#me'
 
 fetcher.load(webIdToShow).then(() => {
   const app = pane.render(sym(webIdToShow), context)
-  document.getElementById('app').replaceWith(app)
+  const appEl = document.getElementById('app');
+  if (appEl) {
+    appEl.replaceWith(app);
+  }
 })

jest.config.mjs

@@ -7,18 +7,16 @@ export default {
     customExportConditions: ['node'],
   },
   transform: {
-    '^.+\\.[tj]sx?$': ['babel-jest', { configFile: './babel.config.mjs' }],
+    '^.+\\.(ts|js)$': ['babel-jest'],
   },
   setupFilesAfterEnv: ["./test/helpers/jest.setup.ts"],
   transformIgnorePatterns: ["/node_modules/(?!lit-html).+\\.js"],
   testPathIgnorePatterns: ['/node_modules/', '/lib/'],
   moduleNameMapper: {
-    '^[./a-zA-Z0-9$_-]+\\.ttl$': '<rootDir>/__mocks__/fileMock.js',    // '\\.ttl$'
-  },
-  roots: ['<rootDir>/src', '<rootDir>/test', '<rootDir>/__mocks__'],
-  moduleNameMapper: {
+    '^[./a-zA-Z0-9$_-]+\\.css$': '<rootDir>/__mocks__/fileMock.js',
+    '^[./a-zA-Z0-9$_-]+\\.ttl$': '<rootDir>/__mocks__/fileMock.js',
     '^SolidLogic$': 'solid-logic',
     '^\\$rdf$': 'rdflib'
-  }
-}
-
+  },
+  roots: ['<rootDir>/src', '<rootDir>/test', '<rootDir>/__mocks__'],
+}