@pearpages/pulp-tokens 0.0.0

package/tokens/semantic/bitepals.json

@@ -0,0 +1,727 @@
+{
+  "$description": "bitepals semantic layer. Same names as pulp, different primitives behind them. This file is the whole brand.",
+  "color": {
+    "$type": "color",
+    "surface": {
+      "base": {
+        "$value": "{color.cream.300}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.ink.900}"
+          }
+        }
+      },
+      "raised": {
+        "$value": "{color.cream.200}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.ink.800}"
+          }
+        }
+      },
+      "sunken": {
+        "$value": "{color.cream.400}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.ink.700}"
+          }
+        }
+      },
+      "inverse": {
+        "$value": "{color.neutral.900}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.50}"
+          }
+        },
+        "$description": "The opposite of the page: tooltips, and anything that must stand out from every surface."
+      }
+    },
+    "text": {
+      "default": {
+        "$value": "{color.neutral.900}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.50}"
+          }
+        }
+      },
+      "muted": {
+        "$value": "{color.neutral.700}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.300}"
+          }
+        }
+      },
+      "faint": {
+        "$value": "{color.neutral.600}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.400}"
+          }
+        },
+        "$description": "Lowest-emphasis text. Promised AA on base and raised surfaces only, not on sunken."
+      },
+      "on-action": {
+        "$value": "{color.neutral.900}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.900}"
+          }
+        },
+        "$description": "Ink, not white: white on the brand orange is 2.8:1 and fails AA in both schemes."
+      },
+      "on-inverse": {
+        "$value": "{color.neutral.0}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.900}"
+          }
+        }
+      }
+    },
+    "action": {
+      "primary": {
+        "$value": "{color.orange.500}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.orange.400}"
+          }
+        }
+      },
+      "primary-hover": {
+        "$value": "{color.orange.400}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.orange.300}"
+          }
+        },
+        "$description": "Interaction brightens rather than darkens: the fill carries ink text, and a darker orange would drop below AA."
+      },
+      "primary-active": {
+        "$value": "{color.orange.300}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.orange.200}"
+          }
+        }
+      },
+      "primary-quiet": {
+        "$value": "{color.orange.100}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.orange.900}"
+          }
+        }
+      },
+      "secondary": {
+        "$value": "{color.cream.400}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.ink.700}"
+          }
+        }
+      },
+      "secondary-hover": {
+        "$value": "{color.cream.500}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.ink.500}"
+          }
+        }
+      },
+      "text": {
+        "$value": "{color.orange.800}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.orange.300}"
+          }
+        },
+        "$description": "Accent for text and icons on a surface. The brand orange itself is 2.3:1 on cream, so text uses the 800 step."
+      }
+    },
+    "border": {
+      "default": {
+        "$value": "{color.sand.400}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.ink.300}"
+          }
+        }
+      },
+      "strong": {
+        "$value": "{color.sand.500}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.ink.200}"
+          }
+        }
+      },
+      "focus": {
+        "$value": "{color.orange.200}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.orange.200}"
+          }
+        }
+      }
+    },
+    "status": {
+      "success": {
+        "$value": "{color.green.500}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.green.300}"
+          }
+        }
+      },
+      "warning": {
+        "$value": "{color.gold.500}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.gold.300}"
+          }
+        }
+      },
+      "error": {
+        "$value": "{color.red.600}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.red.300}"
+          }
+        },
+        "$description": "One step darker than the brand red so white text on it meets AA."
+      },
+      "info": {
+        "$value": "{color.blue.600}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.blue.300}"
+          }
+        },
+        "$description": "One step darker than the brand blue so white text on it meets AA."
+      },
+      "error-text": {
+        "$value": "{color.red.700}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.red.300}"
+          }
+        },
+        "$description": "Error colour for text (messages, required markers). status.error is a fill/border colour and is below AA as text on light surfaces."
+      },
+      "success-text": {
+        "$value": "{color.green.700}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.green.300}"
+          }
+        }
+      },
+      "warning-text": {
+        "$value": "{color.gold.700}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.gold.300}"
+          }
+        }
+      },
+      "info-text": {
+        "$value": "{color.blue.700}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.blue.300}"
+          }
+        }
+      },
+      "success-subtle": {
+        "$value": "{color.green.100}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.green.900}"
+          }
+        },
+        "$description": "Tinted background for the tone; pair with <tone>-text."
+      },
+      "warning-subtle": {
+        "$value": "{color.gold.100}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.gold.900}"
+          }
+        }
+      },
+      "error-subtle": {
+        "$value": "{color.red.100}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.red.900}"
+          }
+        }
+      },
+      "info-subtle": {
+        "$value": "{color.blue.100}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.blue.900}"
+          }
+        }
+      },
+      "on-success": {
+        "$value": "{color.neutral.900}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.900}"
+          }
+        }
+      },
+      "on-warning": {
+        "$value": "{color.neutral.900}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.900}"
+          }
+        }
+      },
+      "on-error": {
+        "$value": "{color.neutral.0}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.900}"
+          }
+        }
+      },
+      "on-info": {
+        "$value": "{color.neutral.0}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.900}"
+          }
+        }
+      },
+      "neutral": {
+        "$value": "{color.neutral.600}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.400}"
+          }
+        },
+        "$description": "A tone with no meaning: default Badge, counts, tags."
+      },
+      "neutral-subtle": {
+        "$value": "{color.cream.400}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.ink.500}"
+          }
+        }
+      },
+      "neutral-text": {
+        "$value": "{color.neutral.700}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.300}"
+          }
+        }
+      },
+      "on-neutral": {
+        "$value": "{color.neutral.0}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.neutral.900}"
+          }
+        }
+      }
+    },
+    "overlay": {
+      "backdrop": {
+        "$value": "#1f243099",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "#000000b3"
+          }
+        },
+        "$description": "Scrim behind dialogs and sheets. Alpha hex, no primitive: it is a role, not a palette colour."
+      }
+    }
+  },
+  "font": {
+    "family": {
+      "$type": "fontFamily",
+      "display": {
+        "$value": "{typeface.display}"
+      },
+      "body": {
+        "$value": "{typeface.body}"
+      },
+      "mono": {
+        "$value": "{typeface.mono}"
+      }
+    },
+    "size": {
+      "$type": "dimension",
+      "xs": {
+        "$value": {
+          "value": 0.75,
+          "unit": "rem"
+        }
+      },
+      "sm": {
+        "$value": {
+          "value": 0.875,
+          "unit": "rem"
+        }
+      },
+      "md": {
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        }
+      },
+      "lg": {
+        "$value": {
+          "value": 1.125,
+          "unit": "rem"
+        }
+      },
+      "xl": {
+        "$value": {
+          "value": 1.375,
+          "unit": "rem"
+        }
+      },
+      "2xl": {
+        "$value": {
+          "value": 1.75,
+          "unit": "rem"
+        }
+      },
+      "3xl": {
+        "$value": {
+          "value": 2.25,
+          "unit": "rem"
+        }
+      }
+    },
+    "weight": {
+      "$type": "fontWeight",
+      "regular": {
+        "$value": 400
+      },
+      "medium": {
+        "$value": 600
+      },
+      "semibold": {
+        "$value": 700
+      }
+    },
+    "line-height": {
+      "$type": "number",
+      "tight": {
+        "$value": 1.25
+      },
+      "normal": {
+        "$value": 1.55
+      }
+    }
+  },
+  "radius": {
+    "$type": "dimension",
+    "control": {
+      "$value": "{radius.sm}"
+    },
+    "surface": {
+      "$value": "{radius.lg}"
+    },
+    "full": {
+      "$value": "{radius.pill}"
+    }
+  },
+  "space": {
+    "$type": "dimension",
+    "1": {
+      "$value": "{space.unit}",
+      "$extensions": {
+        "com.pearpages.pulp": {
+          "multiply": 1
+        }
+      }
+    },
+    "2": {
+      "$value": "{space.unit}",
+      "$extensions": {
+        "com.pearpages.pulp": {
+          "multiply": 2
+        }
+      }
+    },
+    "3": {
+      "$value": "{space.unit}",
+      "$extensions": {
+        "com.pearpages.pulp": {
+          "multiply": 3
+        }
+      }
+    },
+    "4": {
+      "$value": "{space.unit}",
+      "$extensions": {
+        "com.pearpages.pulp": {
+          "multiply": 4
+        }
+      }
+    },
+    "5": {
+      "$value": "{space.unit}",
+      "$extensions": {
+        "com.pearpages.pulp": {
+          "multiply": 6
+        }
+      }
+    },
+    "6": {
+      "$value": "{space.unit}",
+      "$extensions": {
+        "com.pearpages.pulp": {
+          "multiply": 8
+        }
+      }
+    },
+    "7": {
+      "$value": "{space.unit}",
+      "$extensions": {
+        "com.pearpages.pulp": {
+          "multiply": 12
+        }
+      }
+    },
+    "8": {
+      "$value": "{space.unit}",
+      "$extensions": {
+        "com.pearpages.pulp": {
+          "multiply": 16
+        }
+      }
+    },
+    "$description": "Spacing scale. Names are steps, not multipliers: 1..8 map to 1, 2, 3, 4, 6, 8, 12, 16 \u00d7 space.unit, so the scale opens up at the top like a type scale. space.unit is the density knob for the brand."
+  },
+  "motion": {
+    "duration": {
+      "$type": "duration",
+      "fast": {
+        "$value": "{duration.fast}"
+      },
+      "base": {
+        "$value": "{duration.base}"
+      }
+    },
+    "easing": {
+      "$type": "cubicBezier",
+      "standard": {
+        "$value": "{easing.standard}"
+      }
+    }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "raised": {
+      "$value": {
+        "offsetX": {
+          "value": 0,
+          "unit": "px"
+        },
+        "offsetY": {
+          "value": 2,
+          "unit": "px"
+        },
+        "blur": {
+          "value": 12,
+          "unit": "px"
+        },
+        "spread": {
+          "value": 0,
+          "unit": "px"
+        },
+        "color": "#1f24301a"
+      },
+      "$extensions": {
+        "com.pearpages.pulp": {
+          "dark": {
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 2,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 12,
+              "unit": "px"
+            },
+            "spread": {
+              "value": 0,
+              "unit": "px"
+            },
+            "color": "#00000038"
+          }
+        }
+      }
+    },
+    "overlay": {
+      "$value": {
+        "offsetX": {
+          "value": 0,
+          "unit": "px"
+        },
+        "offsetY": {
+          "value": 16,
+          "unit": "px"
+        },
+        "blur": {
+          "value": 48,
+          "unit": "px"
+        },
+        "spread": {
+          "value": 0,
+          "unit": "px"
+        },
+        "color": "#1f243033"
+      },
+      "$extensions": {
+        "com.pearpages.pulp": {
+          "dark": {
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 16,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 48,
+              "unit": "px"
+            },
+            "spread": {
+              "value": 0,
+              "unit": "px"
+            },
+            "color": "#00000080"
+          }
+        }
+      },
+      "$description": "Elevation for floating surfaces: dialogs, popovers."
+    }
+  },
+  "size": {
+    "$type": "dimension",
+    "control": {
+      "sm": {
+        "$value": {
+          "value": 2,
+          "unit": "rem"
+        }
+      },
+      "md": {
+        "$value": {
+          "value": 2.5,
+          "unit": "rem"
+        }
+      },
+      "lg": {
+        "$value": {
+          "value": 3,
+          "unit": "rem"
+        }
+      },
+      "$description": "Block size of interactive controls: buttons, inputs, selects."
+    },
+    "hairline": {
+      "$value": {
+        "value": 1,
+        "unit": "px"
+      },
+      "$description": "The thinnest visible line: borders, dividers, the visually-hidden box."
+    },
+    "toggle": {
+      "sm": {
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        }
+      },
+      "md": {
+        "$value": {
+          "value": 1.25,
+          "unit": "rem"
+        }
+      },
+      "lg": {
+        "$value": {
+          "value": 1.5,
+          "unit": "rem"
+        }
+      },
+      "$description": "Box size of checkboxes, radios and switch thumbs."
+    },
+    "toast-width": {
+      "$value": {
+        "value": 22,
+        "unit": "rem"
+      }
+    },
+    "popover-width": {
+      "$value": {
+        "value": 20,
+        "unit": "rem"
+      }
+    },
+    "menu-width": {
+      "$value": {
+        "value": 14,
+        "unit": "rem"
+      }
+    },
+    "listbox-height": {
+      "$value": {
+        "value": 18,
+        "unit": "rem"
+      },
+      "$description": "Maximum height of an option list before it scrolls (Combobox, Picker, Listbox)."
+    }
+  },
+  "focus": {
+    "ring": {
+      "$type": "dimension",
+      "width": {
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        }
+      },
+      "offset": {
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        }
+      }
+    }
+  },
+  "layer": {
+    "$type": "number",
+    "toast": {
+      "$value": 1100,
+      "$description": "Stacking order for toasts: above the dialog layer (the vendor dialog uses 1000)."
+    },
+    "popover": {
+      "$value": 1200,
+      "$description": "Popovers and menus: above dialogs (they open inside them) and toasts."
+    },
+    "tooltip": {
+      "$value": 1300,
+      "$description": "Tooltips: above everything."
+    }
+  }
+}