@pearpages/pulp-tokens 0.1.0 → 0.2.0

package/dist/tokens.css

@@ -140,6 +140,8 @@
     --size-popover-width: 20rem;
     --size-menu-width: 14rem;
     --size-listbox-height: 18rem;
+    --size-sheet-width: 24rem;
+    --size-sheet-height: 60vh;
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --layer-toast: 1100;
@@ -560,6 +562,9 @@
     --select-focus-ring-width: var(--focus-ring-width);
     --select-focus-ring-offset: var(--focus-ring-offset);
     --select-motion-duration: var(--motion-duration-fast);
+    --sheet-width: var(--size-sheet-width);
+    --sheet-height: var(--size-sheet-height);
+    --sheet-motion-translate: var(--space-5);
     --skeleton-base: var(--color-surface-sunken);
     --skeleton-highlight: var(--color-surface-raised);
     --skeleton-radius: var(--radius-control);
@@ -904,6 +909,8 @@
     --size-popover-width: 20rem;
     --size-menu-width: 14rem;
     --size-listbox-height: 18rem;
+    --size-sheet-width: 24rem;
+    --size-sheet-height: 60vh;
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --layer-toast: 1100;

package/dist/tokens.json

@@ -1590,6 +1590,30 @@
       "value": "18rem",
       "description": "Maximum height of an option list before it scrolls (Combobox, Picker, Listbox)."
     },
+    {
+      "name": "--size-sheet-width",
+      "path": [
+        "size",
+        "sheet-width"
+      ],
+      "type": "dimension",
+      "tier": "semantic",
+      "css": "24rem",
+      "value": "24rem",
+      "description": "Width of a sheet docked to the start or end edge."
+    },
+    {
+      "name": "--size-sheet-height",
+      "path": [
+        "size",
+        "sheet-height"
+      ],
+      "type": "dimension",
+      "tier": "semantic",
+      "css": "60vh",
+      "value": "60vh",
+      "description": "Height of a sheet docked to the top or bottom edge: a share of the viewport, so the page stays visible behind it."
+    },
     {
       "name": "--focus-ring-width",
       "path": [
@@ -6537,6 +6561,39 @@
       "css": "var(--motion-duration-fast)",
       "value": "140ms"
     },
+    {
+      "name": "--sheet-width",
+      "path": [
+        "sheet",
+        "width"
+      ],
+      "type": "dimension",
+      "tier": "component",
+      "css": "var(--size-sheet-width)",
+      "value": "24rem"
+    },
+    {
+      "name": "--sheet-height",
+      "path": [
+        "sheet",
+        "height"
+      ],
+      "type": "dimension",
+      "tier": "component",
+      "css": "var(--size-sheet-height)",
+      "value": "60vh"
+    },
+    {
+      "name": "--sheet-motion-translate",
+      "path": [
+        "sheet",
+        "motion-translate"
+      ],
+      "type": "dimension",
+      "tier": "component",
+      "css": "var(--space-5)",
+      "value": "0.25rem"
+    },
     {
       "name": "--skeleton-base",
       "path": [
@@ -10574,6 +10631,30 @@
       "value": "18rem",
       "description": "Maximum height of an option list before it scrolls (Combobox, Picker, Listbox)."
     },
+    {
+      "name": "--size-sheet-width",
+      "path": [
+        "size",
+        "sheet-width"
+      ],
+      "type": "dimension",
+      "tier": "semantic",
+      "css": "24rem",
+      "value": "24rem",
+      "description": "Width of a sheet docked to the start or end edge."
+    },
+    {
+      "name": "--size-sheet-height",
+      "path": [
+        "size",
+        "sheet-height"
+      ],
+      "type": "dimension",
+      "tier": "semantic",
+      "css": "60vh",
+      "value": "60vh",
+      "description": "Height of a sheet docked to the top or bottom edge: a share of the viewport, so the page stays visible behind it."
+    },
     {
       "name": "--focus-ring-width",
       "path": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pearpages/pulp-tokens",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "pulp design tokens. W3C Design Tokens (DTCG) JSON in, CSS custom properties and a resolved JSON manifest out. Two brands, light and dark via light-dark().",
   "license": "MIT",
   "author": "Pere Pages <hello@pearpages.com> (https://pearpages.com)",

package/tokens/component/sheet.json

@@ -0,0 +1,8 @@
+{
+  "$description": "Sheet component tokens: the size side of the mapping onto @pearpages/modals. The vendor docks the dialog and reads --modal-width-sheet, --modal-height-sheet and --modal-animation-translate-sheet; Sheet.module.css sets those from these --sheet-* tokens on the dialog element. Colour, type and motion timing are Dialog's.",
+  "sheet": {
+    "width": { "$type": "dimension", "$value": "{size.sheet-width}" },
+    "height": { "$type": "dimension", "$value": "{size.sheet-height}" },
+    "motion-translate": { "$type": "dimension", "$value": "{space.5}" }
+  }
+}

package/tokens/semantic/bitepals.json

@@ -690,6 +690,20 @@
         "unit": "rem"
       },
       "$description": "Maximum height of an option list before it scrolls (Combobox, Picker, Listbox)."
+    },
+    "sheet-width": {
+      "$value": {
+        "value": 24,
+        "unit": "rem"
+      },
+      "$description": "Width of a sheet docked to the start or end edge."
+    },
+    "sheet-height": {
+      "$value": {
+        "value": 60,
+        "unit": "vh"
+      },
+      "$description": "Height of a sheet docked to the top or bottom edge: a share of the viewport, so the page stays visible behind it."
     }
   },
   "focus": {

package/tokens/semantic/pulp.json

@@ -691,6 +691,20 @@
         "unit": "rem"
       },
       "$description": "Maximum height of an option list before it scrolls (Combobox, Picker, Listbox)."
+    },
+    "sheet-width": {
+      "$value": {
+        "value": 24,
+        "unit": "rem"
+      },
+      "$description": "Width of a sheet docked to the start or end edge."
+    },
+    "sheet-height": {
+      "$value": {
+        "value": 60,
+        "unit": "vh"
+      },
+      "$description": "Height of a sheet docked to the top or bottom edge: a share of the viewport, so the page stays visible behind it."
     }
   },
   "focus": {