New theming package, fix routes in Remix, layers in theming, add reset.

apps/rr7/app/root.tsx

@@ -20,7 +20,9 @@ import { flattenToAppURL } from './utils';
 import config from '@plone/registry';
 import './config';
 
+import '@plone/theme/styles/main.css';
 import '@plone/components/dist/basic.css';
+import '@plone/slots/main.css';
 
 function useHrefLocal(to: string) {
   return useHref(flattenToAppURL(to));

apps/rr7/app/routes/home.tsx

@@ -12,7 +12,6 @@ import { usePloneClient } from '@plone/providers';
 import { ploneClient } from '../client';
 import App from '@plone/slots/components/App';
 import type { MetaFunction } from 'react-router';
-import '@plone/slots/main.css';
 
 export const meta: MetaFunction = () => {
   return [

apps/rr7/package.json

@@ -27,6 +27,7 @@
     "@plone/providers": "workspace:*",
     "@plone/registry": "workspace:*",
     "@plone/slots": "workspace:*",
+    "@plone/theme": "workspace:*",
     "@react-router/dev": "7.0.0-pre.4",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",

packages/theming/index.ts

@@ -0,0 +1,5 @@
+import type { ConfigType } from '@plone/registry';
+
+export default function install(config: ConfigType) {
+  return config;
+}

packages/theming/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@plone/theme",
+  "description": "Plone base theming",
+  "maintainers": [
+    {
+      "name": "Plone Foundation",
+      "url": "https://plone.org"
+    }
+  ],
+  "funding": "https://github.com/sponsors/plone",
+  "license": "MIT",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/plone/volto.git"
+  },
+  "bugs": {
+    "url": "https://github.com/plone/volto/issues"
+  },
+  "homepage": "https://plone.org",
+  "keywords": [
+    "volto",
+    "plone",
+    "plone6",
+    "react",
+    "helpers"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.ts",
+  "scripts": {
+    "test": "vitest",
+    "dry-release": "release-it --dry-run",
+    "release": "release-it",
+    "release-major-alpha": "release-it major --preRelease=alpha",
+    "release-alpha": "release-it --preRelease=alpha",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@plone/registry": "workspace:*",
+    "lightningcss": "1.28.1",
+    "lightningcss-cli": "1.28.1"
+  },
+  "devDependencies": {
+    "@plone/types": "workspace:*",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-mdx-gfm": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/manager-api": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/theming": "^8.0.4",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint-plugin-storybook": "^0.8.0",
+    "jest-axe": "^8.0.0",
+    "release-it": "17.1.1",
+    "storybook": "^8.0.4",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.3",
+    "vitest-axe": "^0.1.0"
+  }
+}

packages/theming/styles/layout.css

@@ -0,0 +1,3 @@
+/* body {
+  background-color: red;
+} */

packages/theming/styles/main.css

@@ -0,0 +1,3 @@
+@layer reset, components, layout, addons, theme;
+@import 'reset.css';
+@import 'layout.css';

packages/theming/styles/reset.css

@@ -0,0 +1,224 @@
+/* Borrowed from  https://www.miriamsuzanne.com */
+@layer reset {
+  /* @docs
+  label: Core Remedies
+  version: 0.1.0-beta.2
+
+  note: |
+    These remedies are recommended
+    as a starter for any project.
+
+  category: file
+  */
+  /* @docs
+  label: Box Sizing
+
+  note: |
+    Use border-box by default, globally.
+
+  category: global
+  */
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
+  /* @docs
+  label: Line Sizing
+
+  note: |
+    Consistent line-spacing,
+    even when inline elements have different line-heights.
+
+  links:
+    - https://drafts.csswg.org/css-inline-3/#line-sizing-property
+
+  category: global
+  */
+  html {
+    line-sizing: normal;
+  }
+  /* @docs
+  label: Body Margins
+
+  note: |
+    Remove the tiny space around the edge of the page.
+
+  category: global
+  */
+  body {
+    margin: 0;
+  }
+  /* @docs
+  label: Heading Sizes
+
+  note: |
+    Switch to rem units for headings
+
+  category: typography
+  */
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.5rem;
+  }
+  h3 {
+    font-size: 1.17rem;
+  }
+  h4 {
+    font-size: 1rem;
+  }
+  h5 {
+    font-size: 0.83rem;
+  }
+  h6 {
+    font-size: 0.67rem;
+  }
+  /* @docs
+  label: H1 Margins
+
+  note: |
+    Keep h1 margins consistent, even when nested.
+
+  category: typography
+  */
+  h1 {
+    margin: 0.67em 0;
+  }
+  /* @docs
+  label: Pre Wrapping
+
+  note: |
+    Overflow by default is bad...
+
+  category: typography
+  */
+  pre {
+    white-space: pre-wrap;
+  }
+  /* @docs
+  label: Horizontal Rule
+
+  note: |
+    1. Solid, thin horizontal rules
+    2. Remove Firefox `color: gray`
+    3. Remove default `1px` height, and common `overflow: hidden`
+
+  category: typography
+  */
+  hr {
+    overflow: visible;
+    height: 0;
+    border-width: 1px 0 0;
+    border-style: solid;
+    color: inherit;
+  }
+  /* @docs
+  label: Responsive Embeds
+
+  note: |
+    1. Block display is usually what we want
+    2. Remove strange space-below when inline
+    3. Responsive by default
+
+  category: embedded elements
+  */
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    max-width: 100%;
+    vertical-align: middle;
+  }
+  /* @docs
+  label: Aspect Ratios
+
+  note: |
+    Maintain intrinsic aspect ratios when `max-width` is applied.
+    `iframe`, `embed`, and `object` are also embedded,
+    but have no intrinsic ratio,
+    so their `height` needs to be set explicitly.
+
+  category: embedded elements
+  */
+  img,
+  svg,
+  video,
+  canvas {
+    height: auto;
+  }
+  /* @docs
+  label: Audio Width
+
+  note: |
+    There is no good reason elements default to 300px,
+    and audio files are unlikely to come with a width attribute.
+
+  category: embedded elements
+  */
+  audio {
+    width: 100%;
+  }
+  /* @docs
+  label: Image Borders
+
+  note: |
+    Remove the border on images inside links in IE 10 and earlier.
+
+  category: legacy browsers
+  */
+  img {
+    border-style: none;
+  }
+  /* @docs
+  label: SVG Overflow
+
+  note: |
+    Hide the overflow in IE 10 and earlier.
+
+  category: legacy browsers
+  */
+  svg {
+    overflow: hidden;
+  }
+  /* @docs
+  label: HTML5 Elements
+
+  note: |
+    Default block display on HTML5 elements
+
+  category: legacy browsers
+  */
+  article,
+  aside,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  main,
+  nav,
+  section {
+    display: block;
+  }
+  /* @docs
+  label: Checkbox & Radio Inputs
+
+  note: |
+    1. Add the correct box sizing in IE 10
+    2. Remove the padding in IE 10
+
+  category: legacy browsers
+  */
+  [type='checkbox'],
+  [type='radio'] {
+    box-sizing: border-box;
+    padding: 0;
+  }
+}

packages/theming/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+
+    "strict": true,
+    "noImplicitOverride": true,
+
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "module": "preserve",
+    "noEmit": true,
+
+    "jsx": "react-jsx",
+
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+
+    "paths": {}
+  },
+  "include": ["src/index.ts"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "public",
+    "coverage",
+    "src/**/*.test.{js,jsx,ts,tsx}",
+    "src/**/*.spec.{js,jsx,ts,tsx}",
+    "src/**/*.stories.{js,jsx,ts,tsx}"
+  ]
+}