@slotted/theme 0.1.0-beta.2 → 0.1.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slotted/theme",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.4",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/contract.json

@@ -54,6 +54,15 @@
         "step": "open"
       }
     },
+    {
+      "id": "letter-spacing",
+      "reader": "application",
+      "purpose": "The tracking large type takes: the tight step at the md and lg display steps, the tighter step at 3xl and 4xl. Text at the body steps reads the face as drawn.",
+      "tokens": {
+        "--slotted-letter-spacing-tight": "The tracking of a display figure or a wordmark at the md and lg font-size steps.",
+        "--slotted-letter-spacing-tighter": "The tracking of a display figure at the 3xl and 4xl font-size steps."
+      }
+    },
     {
       "id": "font-weight",
       "reader": "application",
@@ -142,7 +151,11 @@
         "--slotted-surface": "The ground of the page's content and of a card.",
         "--slotted-surface-raised": "The ground of a surface above another: a popover, a menu, a dialog; paired with a step of `shadow`.",
         "--slotted-surface-sunken": "The canvas under the content: the ground a card and a field stand out from.",
-        "--slotted-surface-inverse": "A ground in the opposite lightness, with `--slotted-text-inverse` on it."
+        "--slotted-surface-inverse": "A ground in the opposite lightness, with `--slotted-text-inverse` on it.",
+        "--slotted-surface-inverse-hover": "The inverse ground under the pointer: `--slotted-surface-inverse` moved a share toward the opposite lightness.",
+        "--slotted-surface-inverse-active": "The inverse ground while pressed, a step beyond the hover.",
+        "--slotted-surface-material": "The ground of a bar that floats over scrolling content, drawn as a material: `--slotted-surface` at a partial share over transparency, behind `--slotted-material-backdrop`. Under `prefers-reduced-transparency: reduce` it is `--slotted-surface`, and under forced colours the Canvas system colour.",
+        "--slotted-material-backdrop": "The backdrop filter a material is drawn with: the content scrolling under it, saturated and blurred. Under `prefers-reduced-transparency: reduce` it is `none`."
       }
     },
     {
@@ -200,12 +213,13 @@
     {
       "id": "tone",
       "reader": "application",
-      "purpose": "What an element carrying an intent is painted with: five tones, each with the same nine roles.",
+      "purpose": "What an element carrying an intent is painted with: six tones, each with the same nine roles.",
       "pattern": "--slotted-tone-{tone}-{role}",
       "dimensions": {
         "tone": {
           "accent": "The product's intent: the primary action, the chosen option, the current place.",
           "secondary": "A second intent beside accent, for an action or a mark that must not compete with it.",
+          "neutral": "Ink: the inverse surface as a fill and the text colour as a label, for a primary action in a product that keeps the accent for data.",
           "success": "A result that completed or a state that is healthy.",
           "warning": "A state that needs attention before it becomes a failure.",
           "danger": "A failure, an error or an action that destroys data."
@@ -301,6 +315,16 @@
         "--slotted-current-edge": "The edge of the row the reader is on, drawn over its tone ground."
       }
     },
+    {
+      "id": "state",
+      "reader": "application",
+      "purpose": "Translucent layers laid over whatever surface an element stands on, so a hovered, pressed or selected row reads the same on the page and on a raised surface. Each is the scheme's text colour at a small share over transparency. Under forced colours every layer is the Canvas system colour: the state is carried by the system colours the family draws, Highlight for selection and an outline for focus.",
+      "tokens": {
+        "--slotted-state-hover": "The layer under the pointer.",
+        "--slotted-state-pressed": "The layer while the element is pressed; the strongest of the three.",
+        "--slotted-state-selected": "The layer of a selected or open element, between hover and pressed."
+      }
+    },
     {
       "id": "scrim",
       "reader": "application",
@@ -649,6 +673,20 @@
       "type": "number",
       "root": true
     },
+    {
+      "name": "--slotted-letter-spacing-tight",
+      "layer": "primitive",
+      "axis": "base",
+      "type": "length",
+      "root": true
+    },
+    {
+      "name": "--slotted-letter-spacing-tighter",
+      "layer": "primitive",
+      "axis": "base",
+      "type": "length",
+      "root": true
+    },
     {
       "name": "--slotted-font-weight-regular",
       "layer": "primitive",
@@ -1544,6 +1582,78 @@
       "root": true,
       "forcedColor": "Canvas"
     },
+    {
+      "name": "--slotted-tone-neutral-solid",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "CanvasText"
+    },
+    {
+      "name": "--slotted-tone-neutral-solid-hover",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "CanvasText"
+    },
+    {
+      "name": "--slotted-tone-neutral-solid-active",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "CanvasText"
+    },
+    {
+      "name": "--slotted-tone-neutral-on-solid",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "Canvas"
+    },
+    {
+      "name": "--slotted-tone-neutral-surface",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "Canvas"
+    },
+    {
+      "name": "--slotted-tone-neutral-subtle-hover",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "Canvas"
+    },
+    {
+      "name": "--slotted-tone-neutral-subtle-active",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "Canvas"
+    },
+    {
+      "name": "--slotted-tone-neutral-border",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "ButtonBorder"
+    },
+    {
+      "name": "--slotted-tone-neutral-text",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "CanvasText"
+    },
     {
       "name": "--slotted-tone-success-solid",
       "layer": "semantic",
@@ -1824,6 +1934,39 @@
       "root": true,
       "forcedColor": "CanvasText"
     },
+    {
+      "name": "--slotted-surface-inverse-hover",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "CanvasText"
+    },
+    {
+      "name": "--slotted-surface-inverse-active",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "CanvasText"
+    },
+    {
+      "name": "--slotted-surface-material",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "Canvas",
+      "reducedTransparency": "var(--slotted-surface)"
+    },
+    {
+      "name": "--slotted-material-backdrop",
+      "layer": "semantic",
+      "axis": "base",
+      "type": "filter",
+      "literal": "a filter function names no other token",
+      "reducedTransparency": "none"
+    },
     {
       "name": "--slotted-text-inverse",
       "layer": "semantic",
@@ -1863,6 +2006,30 @@
       "root": true,
       "forcedColor": "Highlight"
     },
+    {
+      "name": "--slotted-state-hover",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "Canvas"
+    },
+    {
+      "name": "--slotted-state-pressed",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "Canvas"
+    },
+    {
+      "name": "--slotted-state-selected",
+      "layer": "semantic",
+      "axis": "scheme",
+      "type": "color",
+      "root": true,
+      "forcedColor": "Canvas"
+    },
     {
       "name": "--slotted-control-shadow",
       "layer": "semantic",