@eos-ui/tokens 0.0.0-stage → 0.1.1

package/src/tokens.json

@@ -0,0 +1,544 @@
+{
+  "name": "Eos",
+  "version": 1,
+  "color": {
+    "themes": [
+      {
+        "id": "light",
+        "name": "Light"
+      }
+    ],
+    "tokens": [
+      {
+        "name": "brand-blue",
+        "value": "#2c95b4",
+        "usage": "The logo blue, exact. Decorative and brand surfaces only (the cover, illustrations). Never carries text: black on it is 6.1:1 but only APCA Lc 42, and white on it is 3.5:1. Use `primary` for anything interactive.",
+        "from": "brand",
+        "input": true
+      },
+      {
+        "name": "brand-green",
+        "value": "#72c451",
+        "usage": "The logo green, exact. Decorative and brand surfaces only. Never carries text: white on it is 2.2:1.",
+        "from": "accent",
+        "input": true
+      },
+      {
+        "name": "primary",
+        "value": "#17586d",
+        "usage": "Action blue: the fill of the primary Button and of every selected or checked state (selected day, page, segment, time slot, checkbox, switch), with `on-primary` (white) text at 7.9:1. Also small blue text and links on `surface` and `surface-tint` (7.9:1 and 7.1:1), the information tone, and the filled part of progress and loading bars. A deep teal derived from the logo blue (`brand-blue`) so that white text passes WCAG AAA.",
+        "from": "brand,surface"
+      },
+      {
+        "name": "on-primary",
+        "value": "#ffffff",
+        "usage": "White text and icons on `primary` fills (7.9:1).",
+        "from": "surface"
+      },
+      {
+        "name": "secondary",
+        "value": "#2b5c1b",
+        "usage": "Action green: the fill of the secondary Button (a positive action), with `on-secondary` (white) text at 7.9:1. Also the success tone's text and outline. Derived from the logo green (`brand-green`).",
+        "from": "accent,surface"
+      },
+      {
+        "name": "on-secondary",
+        "value": "#ffffff",
+        "usage": "White text and icons on `secondary` fills (7.9:1).",
+        "from": "surface"
+      },
+      {
+        "name": "secondary-soft",
+        "value": "#e8f5e1",
+        "usage": "Tinted backdrop of a paid chip or notice.",
+        "from": "accent,surface"
+      },
+      {
+        "name": "danger",
+        "value": "#962019",
+        "usage": "Danger red: the fill of the danger Button, with `on-danger` (white) text at 8.3:1. Also the danger tone's text and outline, error text and invalid input edges, on `surface` (8.3:1) and `danger-soft` (7.1:1). Derived from the `danger` input of `defineTheme`: deepened until `on-danger` text reaches 7:1.",
+        "from": "danger,surface"
+      },
+      {
+        "name": "on-danger",
+        "value": "#ffffff",
+        "usage": "White text and icons on `danger` fills (8.3:1).",
+        "from": "danger,surface"
+      },
+      {
+        "name": "danger-soft",
+        "value": "#fbe9e7",
+        "usage": "Tinted backdrop of a danger chip, stamp, notice or toast.",
+        "from": "danger,surface"
+      },
+      {
+        "name": "warning-strong",
+        "value": "#714a00",
+        "usage": "Small amber text on `surface` (7.8:1) and `warning-soft` (7.1:1): AAA. Derived from the `warning` input of `defineTheme`.",
+        "from": "warning,surface"
+      },
+      {
+        "name": "warning-soft",
+        "value": "#fdf3dc",
+        "usage": "Tinted backdrop of a warning chip, stamp, notice or toast.",
+        "from": "warning,surface"
+      },
+      {
+        "name": "background",
+        "value": "#ffffff",
+        "usage": "The page ground: the colour behind everything, painted by the app shell and the page. White by default, the same as `surface`. The `background` input of `defineTheme` sets it; when only `surface` is given the page ground follows the surface.",
+        "from": "background,surface",
+        "input": true
+      },
+      {
+        "name": "surface",
+        "value": "#ffffff",
+        "usage": "What sits on the page: cards, fields, popovers, dialogs, panels and headers. Every screen starts on white. The `surface` input of `defineTheme` sets it, and with it derives `surface-tint`, the soft tone backdrops and, on a dark surface, the light action colours.",
+        "from": "surface",
+        "input": true
+      },
+      {
+        "name": "surface-tint",
+        "value": "#eaf4f8",
+        "usage": "The surface's second step: wells, hovered rows, table headers, footers, empty slots and the information tone's tint. Derived from `surface` by shifting its lightness 0.045 toward the foreground (0.06 the other way on a dark surface) in the brand hue. About 1.1:1 against white, so never a boundary on its own.",
+        "from": "surface,brand"
+      },
+      {
+        "name": "ink",
+        "value": "#000000",
+        "usage": "Body copy, headings and icons on `surface`, `surface-tint`, `primary`, `secondary`, `danger` and the soft tints. Also the neutral chip colour. Set by the `foreground` input of `defineTheme`, which also drives `muted`, `border` and `border-strong`.",
+        "from": "foreground,surface",
+        "input": true
+      },
+      {
+        "name": "scrim",
+        "value": "rgb(11 40 52 / 0.55)",
+        "usage": "The dimmed backdrop behind a dialog or drawer.",
+        "from": "surface"
+      },
+      {
+        "name": "muted",
+        "value": "#515151",
+        "usage": "Secondary text, kickers and captions on `surface` (7.9:1) and `surface-tint` (7.1:1): AAA. Close to the grey of the logo's tagline. From a `foreground` input, `ink` softened toward `surface` until it just holds 7:1.",
+        "from": "foreground,surface"
+      },
+      {
+        "name": "border",
+        "value": "#7f8f96",
+        "usage": "Hairlines between rows, the outline of cards and popovers, and the underside of clickable rows. 3.4:1 on `surface` and 3.0:1 on `surface-tint`, so every edge is visible on white. Control edges use `border-strong`. From a `foreground` input, `ink` softened toward `surface` until it just holds 3.4:1.",
+        "from": "foreground,surface"
+      },
+      {
+        "name": "border-strong",
+        "value": "#767676",
+        "usage": "Input, checkbox and other control borders on `surface` (4.5:1, above the 3:1 floor). From a `foreground` input, `ink` softened toward `surface` until it just holds 4.5:1.",
+        "from": "foreground,surface"
+      },
+      {
+        "name": "focus-ring",
+        "value": "{ink}",
+        "usage": "Solid 2px focus outline with 2px offset on buttons, links, tabs, rows and every control that is not a text input; 3:1 or better on every surface and fill.",
+        "from": "foreground"
+      },
+      {
+        "name": "focus-field",
+        "value": "{primary}",
+        "usage": "The focus outline and edge of text inputs and everything built on them (Field, Select, Combobox, DatePicker, NumberField, SearchBar, OtpField). Primary teal, 7.9:1 on `surface`. An invalid input keeps `danger`. Buttons and links use `focus-ring`.",
+        "from": "brand"
+      }
+    ]
+  },
+  "type": {
+    "fonts": [],
+    "families": {
+      "sans": "\"Jost\", Futura, \"Century Gothic\", \"Avenir Next\", system-ui, sans-serif",
+      "mono": "\"Spline Sans Mono\", ui-monospace, Menlo, Consolas, monospace"
+    },
+    "groups": [
+      {
+        "name": "Headings",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "h1",
+            "fontSize": "36px",
+            "lineHeight": "40px",
+            "fontWeight": 500,
+            "usage": "Page title.",
+            "sample": "Your account"
+          },
+          {
+            "name": "h2",
+            "fontSize": "24px",
+            "lineHeight": "32px",
+            "fontWeight": 500,
+            "usage": "Section title.",
+            "sample": "Upcoming visits"
+          },
+          {
+            "name": "h3",
+            "fontSize": "20px",
+            "lineHeight": "28px",
+            "fontWeight": 500,
+            "usage": "Card and panel title.",
+            "sample": "Visit on Oct 2"
+          }
+        ]
+      },
+      {
+        "name": "Text",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "deck",
+            "fontSize": "18px",
+            "lineHeight": "26px",
+            "fontWeight": 400,
+            "usage": "The one-sentence reading of a statement: what it is and what to do next.",
+            "sample": "Your balance is due November 1."
+          },
+          {
+            "name": "body",
+            "fontSize": "16px",
+            "lineHeight": "24px",
+            "fontWeight": 400,
+            "usage": "Default copy, 62 characters wide at most.",
+            "sample": "Pay online in about a minute."
+          },
+          {
+            "name": "small",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": 400,
+            "usage": "Table cells, helper text, secondary copy.",
+            "sample": "Statement 4471, sent Oct 14"
+          }
+        ]
+      },
+      {
+        "name": "Labels and figures",
+        "family": "mono",
+        "styles": [
+          {
+            "name": "kicker",
+            "fontSize": "12px",
+            "lineHeight": "14px",
+            "fontWeight": 600,
+            "letterSpacing": "0.08em",
+            "usage": "Uppercase mono labels, and the text inside chips and stamps.",
+            "sample": "HISTORY"
+          },
+          {
+            "name": "button",
+            "fontSize": "16px",
+            "lineHeight": "15px",
+            "fontWeight": 600,
+            "usage": "Button labels.",
+            "sample": "Pay now"
+          },
+          {
+            "name": "numeral",
+            "fontSize": "14px",
+            "lineHeight": "18px",
+            "fontWeight": 500,
+            "usage": "Amounts, counts, statement numbers and dates in a row. Tabular.",
+            "sample": "$162.40"
+          },
+          {
+            "name": "numeral-l",
+            "fontSize": "30px",
+            "lineHeight": "30px",
+            "fontWeight": 500,
+            "letterSpacing": "-0.02em",
+            "usage": "The one amount a statement card leads with.",
+            "sample": "$162.40"
+          }
+        ]
+      }
+    ]
+  },
+  "spacing": {
+    "tokens": [
+      {
+        "name": "space-1",
+        "value": "4px",
+        "usage": "Icon-to-text gaps, gap inside a chip.",
+        "from": "spaceScale"
+      },
+      {
+        "name": "space-2",
+        "value": "8px",
+        "usage": "Tight stacks, chip padding.",
+        "from": "spaceScale"
+      },
+      {
+        "name": "space-3",
+        "value": "12px",
+        "usage": "Control padding, compact rows.",
+        "from": "spaceScale"
+      },
+      {
+        "name": "space-4",
+        "value": "16px",
+        "usage": "Card padding, default gap, side gutter.",
+        "from": "spaceScale"
+      },
+      {
+        "name": "space-6",
+        "value": "24px",
+        "usage": "Between related groups and parts of a statement.",
+        "from": "spaceScale"
+      },
+      {
+        "name": "space-8",
+        "value": "32px",
+        "usage": "Section padding.",
+        "from": "spaceScale"
+      }
+    ]
+  },
+  "radius": {
+    "tokens": [
+      {
+        "name": "radius-sm",
+        "value": "4px",
+        "usage": "Stamps and tags.",
+        "from": "radius"
+      },
+      {
+        "name": "radius-md",
+        "value": "8px",
+        "usage": "Buttons, inputs, cards, notices.",
+        "from": "radius"
+      },
+      {
+        "name": "radius-lg",
+        "value": "16px",
+        "usage": "Dialogs.",
+        "from": "radius"
+      },
+      {
+        "name": "radius-pill",
+        "value": "999px",
+        "usage": "Chips and round buttons, echoing the logo's round caps.",
+        "constant": true
+      }
+    ]
+  },
+  "shadow": {
+    "tokens": [
+      {
+        "name": "edge",
+        "value": "0 0 0 1px #7f8f96",
+        "usage": "The flat outline of everything that is not clickable: cards, summaries, the SearchBar. A 1px `border` ring (3.4:1 on white), no depth.",
+        "from": "elevation,strokes,foreground,background"
+      },
+      {
+        "name": "well",
+        "value": "inset 0 2px 0 0 rgba(0, 0, 0, 0.1)",
+        "usage": "Inputs, meters and empty slots pressed into the page.",
+        "from": "elevation,surface"
+      },
+      {
+        "name": "float",
+        "value": "0 0 0 1px #7f8f96, 0 1px 2px 0px rgba(36, 36, 36, 0.08), 0 4px 8px -2px rgba(36, 36, 36, 0.1), 0 12px 24px -6px rgba(36, 36, 36, 0.14), 0 24px 48px -12px rgba(36, 36, 36, 0.18)",
+        "usage": "Popovers, menus and toasts: the surfaces that float over the page. Four stacked, low-opacity shadows of growing size read as one soft shadow, so it never looks like a hard black edge. Nothing in the flow of the page uses it.",
+        "from": "elevation,strokes,foreground,surface,background"
+      }
+    ]
+  },
+  "fontSize": {
+    "note": "One scale for every piece of text. Components read these; nothing sets a size in raw pixels.",
+    "tokens": [
+      {
+        "name": "text-xs",
+        "value": "12px",
+        "usage": "Kickers, chips, stamps, micro labels and other mono labels. Never smaller.",
+        "from": "textScale"
+      },
+      {
+        "name": "text-sm",
+        "value": "14px",
+        "usage": "Secondary copy, table cells, helper text, small buttons.",
+        "from": "textScale"
+      },
+      {
+        "name": "text-md",
+        "value": "16px",
+        "usage": "Body copy, input text and button labels. Inputs must stay at 16px or more so phones do not zoom in on focus.",
+        "from": "textScale"
+      },
+      {
+        "name": "text-lg",
+        "value": "18px",
+        "usage": "The deck: a one-sentence reading of a statement. Calendar headings.",
+        "from": "textScale"
+      },
+      {
+        "name": "text-xl",
+        "value": "20px",
+        "usage": "Card and panel titles (h3).",
+        "from": "textScale"
+      },
+      {
+        "name": "text-2xl",
+        "value": "24px",
+        "usage": "Section titles (h2).",
+        "from": "textScale"
+      },
+      {
+        "name": "text-3xl",
+        "value": "30px",
+        "usage": "The one amount a statement leads with.",
+        "from": "textScale"
+      },
+      {
+        "name": "text-4xl",
+        "value": "36px",
+        "usage": "Page titles (h1).",
+        "from": "textScale"
+      }
+    ]
+  },
+  "size": {
+    "note": "Sizes that components share.",
+    "tokens": [
+      {
+        "name": "control-height",
+        "value": "48px",
+        "usage": "Height of every control that can be tapped: buttons, inputs, selects, date fields, slots, and one row of a multi-select. One height everywhere, so a Button beside an input lines up and a field never shifts when it changes type.",
+        "from": "controlHeight",
+        "input": true
+      },
+      {
+        "name": "chip-height",
+        "value": "24px",
+        "usage": "Height of a Chip or a small Stamp.",
+        "from": "controlHeight"
+      },
+      {
+        "name": "measure",
+        "value": "62ch",
+        "usage": "Longest comfortable line of copy.",
+        "constant": true
+      }
+    ]
+  },
+  "stroke": {
+    "note": "Line weights and the gap between a control and its focus outline.",
+    "tokens": [
+      {
+        "name": "stroke-hair",
+        "value": "1px",
+        "usage": "Dividers and the rule between rows.",
+        "from": "strokes",
+        "input": true
+      },
+      {
+        "name": "stroke-card",
+        "value": "1px",
+        "usage": "The outline of a card, panel, table or other container that is not clickable, and of a chip or stamp. Follows the hairline; a bold elevation draws it at 2px.",
+        "from": "strokes,elevation"
+      },
+      {
+        "name": "stroke-edge",
+        "value": "1.5px",
+        "usage": "The outline of a control, chip or stamp.",
+        "from": "strokes"
+      },
+      {
+        "name": "stroke-focus",
+        "value": "2px",
+        "usage": "The focus outline.",
+        "from": "strokes",
+        "input": true
+      },
+      {
+        "name": "focus-gap",
+        "value": "2px",
+        "usage": "Space between a button or link and its focus outline.",
+        "from": "strokes"
+      },
+      {
+        "name": "focus-gap-field",
+        "value": "-1px",
+        "usage": "Space between a text input and its focus outline: a 1px overlap, so the outline sits over the border with no seam.",
+        "from": "strokes"
+      },
+      {
+        "name": "depth",
+        "value": "2px",
+        "usage": "How far a raised or pressed edge reaches. A button, a statement row and a selected time slot stand out by this much of extra thickness on the bottom edge; a pressed button, the selected item of a list or segmented control and a notice are pressed in by the same amount on the top edge.",
+        "constant": true
+      }
+    ]
+  },
+  "duration": {
+    "note": "How long state changes take. They stop under reduced motion.",
+    "tokens": [
+      {
+        "name": "duration-tap",
+        "value": "80ms",
+        "usage": "Hover and press feedback.",
+        "from": "motion"
+      },
+      {
+        "name": "duration-move",
+        "value": "220ms",
+        "usage": "Things that move: a progress fill, a drawer.",
+        "from": "motion"
+      }
+    ]
+  },
+  "easing": {
+    "tokens": [
+      {
+        "name": "easing-out",
+        "value": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+        "usage": "Fast start, soft landing. The only easing in the system.",
+        "from": "motion"
+      }
+    ]
+  },
+  "zIndex": {
+    "note": "Layers above the page. Native dialogs and popovers sit in the browser's top layer and need none.",
+    "tokens": [
+      {
+        "name": "z-raised",
+        "value": "1",
+        "usage": "A part that must sit above its sibling inside one component.",
+        "constant": true
+      },
+      {
+        "name": "z-sticky",
+        "value": "5",
+        "usage": "Sticky table headers and columns.",
+        "constant": true
+      },
+      {
+        "name": "z-tooltip",
+        "value": "55",
+        "usage": "Tooltip bubbles: above everything, including dialogs, popovers and toasts.",
+        "constant": true
+      },
+      {
+        "name": "z-modal",
+        "value": "40",
+        "usage": "Dialogs and drawers with their scrim.",
+        "constant": true
+      },
+      {
+        "name": "z-popover",
+        "value": "45",
+        "usage": "Popovers, menus and option lists. Above modals, so a Select inside a Dialog opens over it.",
+        "constant": true
+      },
+      {
+        "name": "z-toast",
+        "value": "50",
+        "usage": "The toast region: above modals and popovers.",
+        "constant": true
+      }
+    ]
+  }
+}