@bluealba/pae-design-tokens 0.0.0-integration-css.403

package/dist/shell-reset.css

@@ -0,0 +1,254 @@
+/**
+ * Shell reset.
+ *
+ * Full preflight-style reset for the platform shell. This stylesheet is ONLY
+ * ever injected INSIDE the shell shadow root (<pae-shell-host>), never into
+ * the document: inside the shadow boundary the universal selectors below only
+ * match shell-owned DOM, so the reset cannot leak into micro-frontends and
+ * micro-frontend resets cannot leak in.
+ *
+ * (Adapted from the legacy "pilar-css-base" Tailwind preflight that used to
+ * live inline in index.hbs; html/body rules became :host rules.)
+ */
+
+*,
+::after,
+::before {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e5e7eb;
+}
+
+:host {
+    display: block;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    font-family: var(--pae-shell-text-base-font-family, ui-sans-serif, system-ui, sans-serif);
+    font-size: var(--pae-shell-text-base-font-size, 12px);
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent;
+}
+
+hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+}
+
+abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em;
+}
+
+small {
+    font-size: 80%;
+}
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -.25em;
+}
+
+sup {
+    top: -.5em;
+}
+
+table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+button,
+input:where([type=button]),
+input:where([type=reset]),
+input:where([type=submit]) {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+}
+
+:-moz-focusring {
+    outline: auto;
+}
+
+:-moz-ui-invalid {
+    box-shadow: none;
+}
+
+progress {
+    vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+    height: auto;
+}
+
+[type=search] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}
+
+summary {
+    display: list-item;
+}
+
+blockquote,
+dd,
+dl,
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+pre {
+    margin: 0;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+}
+
+legend {
+    padding: 0;
+}
+
+menu,
+ol,
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+dialog {
+    padding: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+    opacity: 1;
+    color: #9ca3af;
+}
+
+[role=button],
+button {
+    cursor: pointer;
+}
+
+:disabled {
+    cursor: default;
+}
+
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+    display: block;
+    vertical-align: middle;
+}
+
+img,
+video {
+    max-width: 100%;
+    height: auto;
+}
+
+[hidden]:where(:not([hidden=until-found])) {
+    display: none;
+}
+
+/**
+ * Radix poppers (tooltips/dropdowns) portaled INSIDE the shell shadow root
+ * must stack above the shell layer (mirrors the document-level rule in
+ * base.css).
+ */
+div[data-radix-popper-content-wrapper] {
+    z-index: calc(var(--platform-shell-layer) + 10) !important;
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@bluealba/pae-design-tokens",
+  "description": "Blue Alba Platform design tokens, cascade layer contract and base styles",
+  "version": "0.0.0-integration-css.403",
+  "main": "./dist/platform-tokens.css",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": "./dist/platform-tokens.css",
+    "./platform-tokens.css": "./dist/platform-tokens.css",
+    "./shell-reset.css": "./dist/shell-reset.css",
+    "./layer-order.css": "./src/layer-order.css",
+    "./tokens.css": "./src/tokens.css",
+    "./base.css": "./src/base.css"
+  },
+  "scripts": {
+    "build": "node ./scripts/build.mjs",
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean"
+  },
+  "keywords": [],
+  "author": "Blue Alba",
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "publishConfig": {
+    "@bluealba:registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}

package/src/base.css

@@ -0,0 +1,161 @@
+/**
+ * Platform document base + defensive defaults.
+ *
+ * Everything here lives in @layer pae.base, so:
+ *  - a micro-frontend that owns its tree (e.g. Tailwind v4, whose layers are
+ *    declared later in the document) can override these rules deliberately;
+ *  - tenant customizations (@layer pae.customization) always win.
+ *
+ * IMPORTANT: this file must NOT contain aggressive global resets. The full
+ * preflight-style reset only exists inside the shell shadow root
+ * (see shell-reset.css).
+ */
+@layer pae.base {
+
+    /**
+     * Minimal document base. The shell is rendered in a shadow root and does
+     * not depend on these, but the document still needs a sane baseline:
+     * rem sizing, no default body margin and the platform font for
+     * micro-frontends that don't bring their own.
+     */
+    html {
+        font-size: var(--platform-text-base-font-size);
+        line-height: 1.5;
+        -webkit-text-size-adjust: 100%;
+    }
+
+    body {
+        margin: 0;
+        padding: 0;
+        line-height: inherit;
+        font-family: var(--platform-text-base-font-family);
+        overflow: hidden;
+    }
+
+    /**
+     * Defensive defaults for platform UI rendered in the light DOM
+     * (pae-ui-react-core components inside micro-frontends). Scoped to the
+     * [data-pae-ui] marker that initializeMicroFrontend() puts on every
+     * micro-frontend root, so it never leaks into arbitrary third-party DOM.
+     */
+    [data-pae-ui],
+    [data-pae-ui] *,
+    [data-pae-ui] *::before,
+    [data-pae-ui] *::after {
+        box-sizing: border-box;
+    }
+
+    [data-pae-ui] button,
+    [data-pae-ui] input,
+    [data-pae-ui] optgroup,
+    [data-pae-ui] select,
+    [data-pae-ui] textarea {
+        font-family: inherit;
+        font-size: 100%;
+        font-weight: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        color: inherit;
+        margin: 0;
+        padding: 0;
+    }
+
+    [data-pae-ui] button,
+    [data-pae-ui] select {
+        text-transform: none;
+    }
+
+    [data-pae-ui] button,
+    [data-pae-ui] input:where([type=button]),
+    [data-pae-ui] input:where([type=reset]),
+    [data-pae-ui] input:where([type=submit]) {
+        -webkit-appearance: button;
+        background-color: transparent;
+        background-image: none;
+    }
+
+    [data-pae-ui] button,
+    [data-pae-ui] [role=button] {
+        cursor: pointer;
+    }
+
+    [data-pae-ui] :disabled {
+        cursor: default;
+    }
+
+    [data-pae-ui] h1,
+    [data-pae-ui] h2,
+    [data-pae-ui] h3,
+    [data-pae-ui] h4,
+    [data-pae-ui] h5,
+    [data-pae-ui] h6,
+    [data-pae-ui] p,
+    [data-pae-ui] figure,
+    [data-pae-ui] blockquote,
+    [data-pae-ui] dl,
+    [data-pae-ui] dd,
+    [data-pae-ui] hr,
+    [data-pae-ui] pre {
+        margin: 0;
+    }
+
+    [data-pae-ui] h1,
+    [data-pae-ui] h2,
+    [data-pae-ui] h3,
+    [data-pae-ui] h4,
+    [data-pae-ui] h5,
+    [data-pae-ui] h6 {
+        font-size: inherit;
+        font-weight: inherit;
+    }
+
+    [data-pae-ui] a {
+        color: inherit;
+        text-decoration: inherit;
+    }
+
+    [data-pae-ui] menu,
+    [data-pae-ui] ol,
+    [data-pae-ui] ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    [data-pae-ui] img,
+    [data-pae-ui] svg,
+    [data-pae-ui] video,
+    [data-pae-ui] canvas,
+    [data-pae-ui] audio,
+    [data-pae-ui] iframe,
+    [data-pae-ui] embed,
+    [data-pae-ui] object {
+        display: block;
+        vertical-align: middle;
+    }
+
+    [data-pae-ui] img,
+    [data-pae-ui] video {
+        max-width: 100%;
+        height: auto;
+    }
+
+    [data-pae-ui] textarea {
+        resize: vertical;
+    }
+
+    [data-pae-ui] input::placeholder,
+    [data-pae-ui] textarea::placeholder {
+        opacity: 1;
+        color: #9ca3af;
+    }
+}
+
+/**
+ * Radix portals (popovers/tooltips/dropdowns) attach to document.body in the
+ * light DOM. They must stack above the application layer. Kept outside any
+ * layer on purpose so third-party layered CSS cannot accidentally beat it.
+ */
+div[data-radix-popper-content-wrapper] {
+    z-index: calc(var(--platform-shell-layer) + 10) !important;
+}

package/src/layer-order.css

@@ -0,0 +1,23 @@
+/**
+ * Platform cascade layer contract.
+ *
+ * This MUST be the first stylesheet evaluated in the document: the first
+ * appearance of each layer name fixes its position in the cascade, so any
+ * stylesheet loaded later (in any order) that targets one of these layers
+ * gets deterministic priority.
+ *
+ * Order (lowest to highest priority at equal specificity):
+ *  - pae.tokens         design token definitions (custom properties)
+ *  - pae.base           minimal document base + defensive defaults ([data-pae-ui])
+ *  - pae.customization  tenant/customization overrides — always wins over the above
+ *
+ * Guarantees:
+ *  - pae.customization beats pae.tokens/pae.base regardless of load order.
+ *  - Micro-frontend CSS placed in its own layers (e.g. Tailwind v4 layers)
+ *    is declared later, so it wins over platform layers inside the MFE tree.
+ *
+ * NOT guaranteed:
+ *  - Un-layered third-party CSS always beats layered CSS at equal
+ *    specificity. The shell is immune to that via Shadow DOM, not layers.
+ */
+@layer pae.tokens, pae.base, pae.customization;

package/src/shell-reset.css

@@ -0,0 +1,254 @@
+/**
+ * Shell reset.
+ *
+ * Full preflight-style reset for the platform shell. This stylesheet is ONLY
+ * ever injected INSIDE the shell shadow root (<pae-shell-host>), never into
+ * the document: inside the shadow boundary the universal selectors below only
+ * match shell-owned DOM, so the reset cannot leak into micro-frontends and
+ * micro-frontend resets cannot leak in.
+ *
+ * (Adapted from the legacy "pilar-css-base" Tailwind preflight that used to
+ * live inline in index.hbs; html/body rules became :host rules.)
+ */
+
+*,
+::after,
+::before {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e5e7eb;
+}
+
+:host {
+    display: block;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    font-family: var(--pae-shell-text-base-font-family, ui-sans-serif, system-ui, sans-serif);
+    font-size: var(--pae-shell-text-base-font-size, 12px);
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent;
+}
+
+hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+}
+
+abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em;
+}
+
+small {
+    font-size: 80%;
+}
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -.25em;
+}
+
+sup {
+    top: -.5em;
+}
+
+table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+button,
+input:where([type=button]),
+input:where([type=reset]),
+input:where([type=submit]) {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+}
+
+:-moz-focusring {
+    outline: auto;
+}
+
+:-moz-ui-invalid {
+    box-shadow: none;
+}
+
+progress {
+    vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+    height: auto;
+}
+
+[type=search] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}
+
+summary {
+    display: list-item;
+}
+
+blockquote,
+dd,
+dl,
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+pre {
+    margin: 0;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+}
+
+legend {
+    padding: 0;
+}
+
+menu,
+ol,
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+dialog {
+    padding: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+    opacity: 1;
+    color: #9ca3af;
+}
+
+[role=button],
+button {
+    cursor: pointer;
+}
+
+:disabled {
+    cursor: default;
+}
+
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+    display: block;
+    vertical-align: middle;
+}
+
+img,
+video {
+    max-width: 100%;
+    height: auto;
+}
+
+[hidden]:where(:not([hidden=until-found])) {
+    display: none;
+}
+
+/**
+ * Radix poppers (tooltips/dropdowns) portaled INSIDE the shell shadow root
+ * must stack above the shell layer (mirrors the document-level rule in
+ * base.css).
+ */
+div[data-radix-popper-content-wrapper] {
+    z-index: calc(var(--platform-shell-layer) + 10) !important;
+}