@slotted/theme 0.1.0-beta.1 → 0.1.0-beta.11

package/conformance/theme-conformance.mjs

@@ -10,7 +10,7 @@ import { LAYER_ORDER_STATEMENT, parseSeed, resolveTokens } from '../dist/index.j
  * that is the theme's identity, and it belongs to the theme's own tests.
  */
 
-const VARIANTS = ['accent', 'secondary', 'success', 'warning', 'danger'];
+const VARIANTS = ['accent', 'secondary', 'success', 'info', 'warning', 'danger'];
 const SOLID_STATES = ['solid', 'solid-hover', 'solid-active'];
 const SURFACES = ['--slotted-surface', '--slotted-surface-raised', '--slotted-surface-sunken'];
 
@@ -30,6 +30,8 @@ const NON_TEXT_RATIO = 3;
 const CONTROL_EDGE_RATIO = 1.5;
 /** The OKLab lightness step a neutral highlight keeps from the ground it is drawn on. */
 const HIGHLIGHT_STEP = 0.02;
+/** The OKLab lightness step a dark scheme's raised layer keeps above the page, unless `thresholds.layerStep` says. */
+const LAYER_STEP = 0.04;
 
 /** The collapsed duration is short enough to read as instant, and never zero. */
 const MAX_REDUCED_MOTION_MS = 1;
@@ -205,8 +207,9 @@ function structureCases(contract, theme, css) {
   });
 }
 
-function contrastCases(theme) {
+function contrastCases(theme, thresholds) {
   const label = theme.name;
+  const layerStep = thresholds.layerStep ?? LAYER_STEP;
 
   /**
    * One radius for every control, at every size. Button carried three of its
@@ -267,6 +270,24 @@ function contrastCases(theme) {
       }
     });
 
+    /**
+     * A card, a menu or a dialog is a layer over the page. In a light scheme
+     * its shadow separates it; in a dark scheme a shadow on a dark ground does
+     * not read, and the layer has to stand lighter than the page. At 0.017 in
+     * OKLab lightness a card read apart only by its border.
+     */
+    if (scheme === 'dark') {
+      test(`${label} ${scheme} raises a layer visibly above the page`, () => {
+        const step =
+          parseSeed(values['--slotted-surface-raised']).l -
+          parseSeed(values['--slotted-surface']).l;
+        assert.ok(
+          step >= layerStep,
+          `${scheme} --slotted-surface-raised is ${step.toFixed(3)} above --slotted-surface, below ${layerStep} (thresholds.layerStep)`,
+        );
+      });
+    }
+
     test(`${label} ${scheme} inverts a surface without losing its text`, () => {
       assert.ok(
         contrast(values['--slotted-surface-inverse'], values['--slotted-text-inverse']) >= required,
@@ -444,9 +465,13 @@ function glyphCases(contract, theme) {
   });
 }
 
-/** Registers every case a theme has to pass. `theme` is `flattenTheme(theme)`; `css` is `renderTheme(theme)`. */
-export function themeConformance({ contract, theme, css }) {
+/**
+ * Registers every case a theme has to pass. `theme` is `flattenTheme(theme)`;
+ * `css` is `renderTheme(theme)`. `thresholds.layerStep` is the OKLab lightness
+ * a dark scheme's raised layer keeps above the page, 0.04 unless given.
+ */
+export function themeConformance({ contract, theme, css, thresholds = {} }) {
   structureCases(contract, theme, css);
-  contrastCases(theme);
+  contrastCases(theme, thresholds);
   glyphCases(contract, theme);
 }