@react-x11/components 0.14.1 → 0.16.0

package/dist/html/css/style.js

@@ -14,9 +14,9 @@
 //    correct at every width, which is the whole of the resize story.
 import { AUTO, alphaOf, fourSides, inkColor, isTransparent, keywordFontSize, parseAlpha, parseColor, isPct, parseLength, parseNumber, parseWeight, resolve, splitCommas, splitValue, } from './values.js';
 import { parseUrl, readIdent, startsIdent } from './parse.js';
-import { DEFAULT_QUOTES, parseContent, parseCounterList, parseListStyleType, parseQuotes, } from './content.js';
+import { parseContent, parseCounterList, parseListStyleType, parseQuotes, } from './content.js';
 import { parseRotate, parseScale, parseTransform } from './transform.js';
-import { LIGHT_DARK, lightDark, usedColorScheme } from './color.js';
+import { LIGHT_DARK, SYSTEM_COLOR, lightDark, systemColors, usedColorScheme, } from './color.js';
 import { svgPaint } from './shapes.js';
 /** Whether a length is one `padding` takes: not `auto`, not negative. A
  *  `calc()` with a percentage in it has no sign until layout, which clamps
@@ -206,6 +206,36 @@ export const INHERITED = [
     'quotes',
     'custom',
 ];
+/** Core's focus ring, where a look names none (`DEFAULT_FOCUS_RING`). */
+const FOCUS_RING = { color: '#2980b9', width: 2, offset: 1 };
+/**
+ * An `outline-style: auto` as the platform's focus ring: the palette's
+ * width and, where the outline's colour is the text's or the keyword's,
+ * its colour, the palette's gap outside `outline-offset` — so a field the
+ * document draws is ringed as the window's own fields are. A browser
+ * draws `auto` in a style of its own the same way, whatever width it was
+ * given. `look` is the device one, as every length here is, and `scale`
+ * what makes core's defaults device lengths too.
+ */
+export function settleOutline(style, look, scale) {
+    if (style.outlineStyle !== 'auto')
+        return;
+    style.outlineWidth = look.focusRingWidth ?? FOCUS_RING.width * scale;
+    style.outlineOffset += look.focusRingOffset ?? FOCUS_RING.offset * scale;
+    if (style.outlineColor === 'currentColor') {
+        style.outlineColor = look.focusRing ?? FOCUS_RING.color;
+    }
+}
+/** `-webkit-focus-ring-color`, a colour of an outline's. */
+function outlineColorOf(v, ctx) {
+    const lower = v.trim().toLowerCase();
+    if (lower === 'invert')
+        return 'currentColor';
+    if (lower === '-webkit-focus-ring-color') {
+        return ctx.focusRing ?? FOCUS_RING.color;
+    }
+    return parseColor(v);
+}
 export function initialStyle(look, scale = 1) {
     // `medium`, in device pixels
     const medium = BORDER_WIDTH_KEYWORDS.medium * scale;
@@ -259,7 +289,7 @@ export function initialStyle(look, scale = 1) {
         captionSide: 'top',
         emptyCells: 'show',
         tableTextAlignSet: false,
-        quotes: DEFAULT_QUOTES,
+        quotes: 'auto',
         custom: null,
         display: 'inline',
         flowRoot: false,
@@ -397,7 +427,7 @@ export function initialStyle(look, scale = 1) {
         flexDirection: 'row',
         flexWrap: 'nowrap',
         justifyContent: 'normal',
-        alignItems: 'stretch',
+        alignItems: 'normal',
         alignSelf: 'auto',
         alignContent: 'stretch',
         flexGrow: 0,
@@ -581,6 +611,9 @@ export function firstLineParent(parent, onLine) {
 }
 // --- applying a declaration -------------------------------------------------
 /** Longhands that take a colour and nothing else, by property name. */
+/** The properties a colour is written in, alone or in a shorthand, a
+ *  shadow, a gradient or an image's mask. */
+const TAKES_COLOR = /^(?:color|background|border|outline|box-shadow|text-shadow|text-decoration|text-emphasis|column-rule|fill|stroke|stop-color|flood-color|lighting-color|caret-color|accent-color|scrollbar-color|filter|mask|list-style|-webkit-text-(?:fill|stroke))/;
 const COLOR_PROPS = {
     color: 'color',
     'background-color': 'backgroundColor',
@@ -680,6 +713,11 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
     if (/!\s*important$/i.test(value)) {
         value = value.replace(/!\s*important$/i, '').trim();
     }
+    // a system colour is a `light-dark()` of its own, in a property that
+    // takes a colour: `Menu` is a font in `font`, and `Mark` a family's name
+    if (TAKES_COLOR.test(name) && SYSTEM_COLOR.test(value)) {
+        value = systemColors(value, ctx.systemColors);
+    }
     // the branch of each `light-dark()` this element's scheme picks, before
     // anything reads the value: it stands wherever a colour can, in a
     // shorthand, a shadow, a gradient or a mix, and most often arrives
@@ -1415,7 +1453,7 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
                     width = w;
                     continue;
                 }
-                const c = v === 'invert' ? 'currentColor' : parseColor(part);
+                const c = outlineColorOf(part, ctx);
                 if (c === null)
                     return;
                 color = c;
@@ -1439,8 +1477,7 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
         }
         case 'outline-color': {
             // `invert` is the text's colour where a browser cannot invert
-            const v = value.trim().toLowerCase();
-            const c = v === 'invert' ? 'currentColor' : parseColor(value);
+            const c = outlineColorOf(value, ctx);
             if (c !== null)
                 style.outlineColor = c;
             return;
@@ -2286,14 +2323,17 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
             return;
         }
         case 'align-items': {
-            const v = alignKeyword(value);
+            const v = value.trim().toLowerCase() === 'normal'
+                ? 'normal'
+                : alignKeyword(value);
             if (v)
                 style.alignItems = v;
             return;
         }
         case 'align-self': {
-            if (value.toLowerCase() === 'auto') {
-                style.alignSelf = AUTO;
+            const keyword = value.trim().toLowerCase();
+            if (keyword === 'auto' || keyword === 'normal') {
+                style.alignSelf = keyword;
                 return;
             }
             const v = alignKeyword(value);
@@ -2303,10 +2343,14 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
         }
         case 'align-content': {
             // `normal` is `stretch` in a flex and a grid container, the only
-            // boxes it moves anything in (CSS Box Alignment 3, 5.1)
+            // boxes it moves anything in (CSS Box Alignment 3, 5.1); `start` and
+            // `end` are the box's own edges, and stay those
+            const plain = overflowAligned(value);
             const v = value.trim().toLowerCase() === 'normal'
                 ? 'stretch'
-                : alignKeyword(value);
+                : plain === 'start' || plain === 'end'
+                    ? plain
+                    : alignKeyword(value);
             if (v)
                 style.alignContent = v;
             return;
@@ -2771,6 +2815,24 @@ export function settleContentVisibility(style) {
         style.contain &= ~CONTAIN_INLINE_SIZE;
     }
 }
+/**
+ * `align-items: normal` and `align-self: normal`, settled once the cascade
+ * knows what the box and its parent are. In a grid `normal` stretches an
+ * item only where it has neither a natural size nor a ratio, and `stretch`
+ * stretches every item (CSS Grid 1, 6.2; CSS Box Alignment 3, 6.1), so the
+ * grid keeps the two apart; everywhere else `normal` is `stretch`, and a
+ * flex box reads nothing new. Unread, `normal` was dropped, and a grid could
+ * not tell an unset `align-items` from `stretch`: an image under an explicit
+ * `stretch` kept the height its ratio gave it.
+ */
+export function settleAlign(style, parent) {
+    if (style.alignItems === 'normal' && !style.grid) {
+        style.alignItems = 'stretch';
+    }
+    if (style.alignSelf === 'normal' && !parent?.grid) {
+        style.alignSelf = 'stretch';
+    }
+}
 export function settleOverflow(style) {
     const x = style.overflowX;
     const y = style.overflowY;