Establish npm-workspace monorepo layout for theme tokens and icon assets

[Copilot]

This PR introduces a frameworkless TypeScript monorepo layout for reusable theming and icon distribution, adding two publishable packages: @solidos/tokens and @solidos/icons. It standardizes light/dark theme tokens and per-file SVG asset consumption for webpack apps to keep bundles lean.

• Root monorepo/tooling

  • Added npm workspaces (packages/*) at repo root.
  • Added tsconfig.base.json for monorepo TypeScript baseline.
  • Updated root build orchestration to run existing profile build plus workspace package builds.
  • Updated root README with package overview and webpack consumption examples.

• @solidos/tokens package

  • Added packages/tokens/src/themes.css with base tokens and [data-theme='light'|'dark'] variants.
  • Added publishable package metadata (files, CSS exports/style field).
  • Added package README with import/toggle guidance.

• @solidos/icons package

  • Added source split:
    • src/icons/ for single-color UI SVGs (currentColor)
    • src/logos/ for multi-color brand assets
  • Added SVGO configs with stricter icon optimization and conservative logo handling.
  • Added build script to optimize/copy into publishable outputs:
    • dist/icons/*.svg
    • dist/logos/*.svg
  • Added package exports for per-file imports and README usage guidance.

• Consumer guidance (webpack + theme usage)

  • Documented webpack 5 asset/resource SVG handling.
  • Documented small-bundle usage via per-file imports from @solidos/icons.
  • Documented mask-based UI icon coloring with theme token --icon-color, and <img> usage for logos.

import '@solidos/tokens/src/themes.css'
import searchIconUrl from '@solidos/icons/icons/search.svg'

document.documentElement.dataset.theme = 'dark'

const el = document.querySelector<HTMLElement>('.icon-search')
if (el) {
  el.style.setProperty('--icon-url', `url(${searchIconUrl})`)
}

Original prompt

Create a new repository structure in SolidOS/profile-pane (branch main) that implements a recommended monorepo-style layout for theme tokens and icons suitable for a frameworkless TypeScript + webpack ecosystem.

Goals

• Provide two publishable npm packages:
  • @solidos/tokens (CSS variables for themes)
  • @solidos/icons (SVG assets split into single-color UI icons vs multi-color logos)
• Optimize for:
  • light/dark theming via CSS variables
  • consumers importing only the icons they use (webpack asset modules)
  • clear guidance for using single-color icons via CSS mask-image and multi-color logos via <img>

Required repository layout

• Add a packages/ directory with:
  • packages/tokens/
    • src/themes.css (includes base tokens + light/dark theme via [data-theme])
    • package.json set up for npm publishing, with proper files field
    • README.md with usage instructions (importing CSS, toggling data-theme)
  • packages/icons/
    • src/icons/ (single-color SVGs)
    • src/logos/ (multi-color SVGs)
    • build script to SVGO optimize and copy artifacts into publishable folders (either root icons/ + logos/ or dist/icons + dist/logos, but document the import paths)
    • package.json set up for npm publishing
    • README.md explaining:
      • importing per-file assets (so consumers bundle only what they use)
      • using UI icons with CSS masks and --icon-color
      • using logos as <img>

Tooling / configuration

• Add root configuration for a TypeScript monorepo:
  • root package.json using workspaces (npm/yarn/pnpm—pick one and document it)
  • root tsconfig.base.json
  • root README.md describing the packages and how to build
• Add minimal build tooling:
  • svgo configuration for icons (and more conservative config for logos, if needed)
  • scripts (Node) to build/copy assets
• Add example consumer snippet:
  • either under examples/webpack-demo/ or in root README showing:
    • webpack 5 rule type: "asset/resource" for SVG
    • importing @solidos/tokens/src/themes.css (or built path) and toggling theme
    • importing an icon from @solidos/icons/... and applying mask CSS

Acceptance criteria

• Repository contains the described folder structure and documentation.
• npm install at root and npm run build builds both packages (at least copies/optimizes assets and prepares publishable outputs).
• READMEs clearly describe:
  • how to consume tokens + icons in a webpack app
  • how to keep bundles small by importing only required icons

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: I am interested in the state of the art way to work with icons. Please do a research and explain what is best for a javascript/typescript based repo.

Assistant: For a JavaScript/TypeScript repo in 2026, the state-of-the-art approach is:

1. Use SVG-based icons (not icon fonts)
2. Optimize for bundle-size by importing only the icons you actually use
3. Have a clear strategy for theming (size/color), accessibility, and licensing
4. Pick one of two “best” pipelines depending on whether you want a fixed icon set or lots of sets

Below are the best-practice options and when to choose each.

---

Option A (best default): “Local SVG components” (tree-shaken)

Best when: you have a design system / a chosen icon set (e.g., Lucide, Heroicons, Material icons as SVG), and you care about performance, offline builds, and deterministic bundles.

How it works

• Each icon is an SVG turned into a TS/JS component at build time (or imported as a component).
• You import icons explicitly, so bundlers tree-shake unused ones.
• Icons are styled via currentColor + CSS (so they follow text color), and sized via width/height or em.

Why it’s “state of the art”

• Small bundles (only used icons)
• No runtime network fetches
• Works great with SSR (Next.js, Remix) and strict CSP

Typical tooling

• React: SVGR-based import (*.svg → React component)
• Vite: vite-plugin-svgr or similar
• For monorepos/design systems: generate an icons/ package exporting typed components

Accessibility best practice

• Decorative icons: aria-hidden="true" focusable="false"
• Meaningful icons: role="img" + aria-label="..." (or <title> inside SVG)

---

Option B (best when you want huge selection): Iconify (on-demand SVG)

Best when: you want access to many icon sets (Material Design Icons, etc.) without installing each set, and you’re OK with either (a) runtime fetching or (b) pre-bundling icons you use.

Iconify’s pitch is: one API/syntax for 200k+ icons across 150+ icon sets, rendered as SVG and (optionally) loaded on demand. (iconify.design)

Two Iconify modes

1. On-demand loading from Iconify API
   • Very convenient, but it introduces runtime requests and ca...

This pull request was created from Copilot chat.