@webority/tokens 0.0.0-stage → 0.89.0

package/dist/source/scale.tokens.json

@@ -0,0 +1,869 @@
+{
+    "space": {
+        "none": {
+            "$type": "dimension",
+            "$value": {
+                "value": 0,
+                "unit": "px"
+            },
+            "$description": "No space."
+        },
+        "xxs": {
+            "$type": "dimension",
+            "$value": {
+                "value": 2,
+                "unit": "px"
+            },
+            "$description": "Hairline step of the spacing scale."
+        },
+        "xs": {
+            "$type": "dimension",
+            "$value": {
+                "value": 4,
+                "unit": "px"
+            },
+            "$description": "Extra-small step of the spacing scale."
+        },
+        "sm": {
+            "$type": "dimension",
+            "$value": {
+                "value": 8,
+                "unit": "px"
+            },
+            "$description": "Small step of the spacing scale."
+        },
+        "md": {
+            "$type": "dimension",
+            "$value": {
+                "value": 12,
+                "unit": "px"
+            },
+            "$description": "Medium step of the spacing scale."
+        },
+        "lg": {
+            "$type": "dimension",
+            "$value": {
+                "value": 16,
+                "unit": "px"
+            },
+            "$description": "Large step of the spacing scale."
+        },
+        "xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 24,
+                "unit": "px"
+            },
+            "$description": "Extra-large step of the spacing scale."
+        },
+        "2xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 32,
+                "unit": "px"
+            },
+            "$description": "Double extra-large step of the spacing scale."
+        },
+        "3xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 48,
+                "unit": "px"
+            },
+            "$description": "Triple extra-large step of the spacing scale."
+        },
+        "4xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 64,
+                "unit": "px"
+            },
+            "$description": "Largest step of the spacing scale."
+        }
+    },
+    "radius": {
+        "none": {
+            "$type": "dimension",
+            "$value": {
+                "value": 0,
+                "unit": "px"
+            },
+            "$description": "No rounding, for square corners."
+        },
+        "sm": {
+            "$type": "dimension",
+            "$value": {
+                "value": 8,
+                "unit": "px"
+            },
+            "$description": "Small step of the corner radius scale."
+        },
+        "md": {
+            "$type": "dimension",
+            "$value": {
+                "value": 10,
+                "unit": "px"
+            },
+            "$description": "Medium step of the corner radius scale, the default corner."
+        },
+        "lg": {
+            "$type": "dimension",
+            "$value": {
+                "value": 14,
+                "unit": "px"
+            },
+            "$description": "Large step of the corner radius scale."
+        },
+        "xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 16,
+                "unit": "px"
+            },
+            "$description": "Extra-large step of the corner radius scale."
+        },
+        "pill": {
+            "$type": "dimension",
+            "$value": {
+                "value": 9999,
+                "unit": "px"
+            },
+            "$description": "Fully rounded corner, for pills and round buttons."
+        }
+    },
+    "text": {
+        "xs": {
+            "$type": "dimension",
+            "$value": {
+                "value": 13,
+                "unit": "px",
+                "lineHeight": 1.5
+            },
+            "$description": "Extra-small step of the fluid type scale; a product opts in per element.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 1320
+                }
+            }
+        },
+        "sm": {
+            "$type": "dimension",
+            "$value": {
+                "value": 14,
+                "unit": "px",
+                "lineHeight": 1.5
+            },
+            "$description": "Small step of the fluid type scale; a product opts in per element.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 1133
+                }
+            }
+        },
+        "base": {
+            "$type": "dimension",
+            "$value": {
+                "value": 16.8,
+                "unit": "px",
+                "lineHeight": 1.5
+            },
+            "$description": "Body-size step of the fluid type scale, close to Bootstrap's 1rem.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 960
+                }
+            }
+        },
+        "lg": {
+            "$type": "dimension",
+            "$value": {
+                "value": 20,
+                "unit": "px",
+                "lineHeight": 1.4
+            },
+            "$description": "Large step of the fluid type scale; a product opts in per element.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 1234
+                }
+            }
+        },
+        "xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 24,
+                "unit": "px",
+                "lineHeight": 1.3
+            },
+            "$description": "Extra-large step of the fluid type scale; a product opts in per element.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 1120
+                }
+            }
+        },
+        "2xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 32,
+                "unit": "px",
+                "lineHeight": 1.25
+            },
+            "$description": "Double extra-large step of the fluid type scale; a product opts in per element.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 1120
+                }
+            }
+        },
+        "3xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 44,
+                "unit": "px",
+                "lineHeight": 1.2
+            },
+            "$description": "Triple extra-large step of the fluid type scale; a product opts in per element.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 1143
+                }
+            }
+        },
+        "4xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 56,
+                "unit": "px",
+                "lineHeight": 1.1
+            },
+            "$description": "Fourth extra-large step of the fluid type scale; a product opts in per element.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 1152
+                }
+            }
+        },
+        "5xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 72,
+                "unit": "px",
+                "lineHeight": 1.05
+            },
+            "$description": "Fifth extra-large step of the fluid type scale; a product opts in per element.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 1109
+                }
+            }
+        },
+        "6xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 96,
+                "unit": "px",
+                "lineHeight": 1
+            },
+            "$description": "Sixth extra-large step of the fluid type scale; a product opts in per element.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 1105
+                }
+            }
+        },
+        "7xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 119.95,
+                "unit": "px",
+                "lineHeight": 1
+            },
+            "$description": "First display step above the fluid type scale, 64px on a phone to 120px on a desktop.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 1440
+                }
+            }
+        },
+        "8xl": {
+            "$type": "dimension",
+            "$value": {
+                "value": 144,
+                "unit": "px",
+                "lineHeight": 1
+            },
+            "$description": "Largest display step of the fluid type scale, 72px on a phone to 144px on a desktop.",
+            "$extensions": {
+                "com.webority": {
+                    "fluidUntil": 1440
+                }
+            }
+        }
+    },
+    "weight": {
+        "normal": {
+            "$type": "fontWeight",
+            "$value": 400,
+            "$description": "Regular text weight."
+        },
+        "medium": {
+            "$type": "fontWeight",
+            "$value": 500,
+            "$description": "Medium text weight."
+        },
+        "semibold": {
+            "$type": "fontWeight",
+            "$value": 600,
+            "$description": "Semibold text weight, for labels and titles."
+        },
+        "bold": {
+            "$type": "fontWeight",
+            "$value": 700,
+            "$description": "Bold text weight."
+        }
+    },
+    "leading": {
+        "tight": {
+            "$type": "number",
+            "$value": 1.2,
+            "$description": "Tight line height, for headings and single-line labels."
+        },
+        "normal": {
+            "$type": "number",
+            "$value": 1.4,
+            "$description": "Default line height for running text on a phone.",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        },
+        "relaxed": {
+            "$type": "number",
+            "$value": 1.6,
+            "$description": "Loose line height for long reading on a phone.",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        }
+    },
+    "letter-spacing": {
+        "tight": {
+            "$type": "dimension",
+            "$value": {
+                "value": -0.2,
+                "unit": "px"
+            },
+            "$description": "Tighter letter spacing for large headings."
+        },
+        "normal": {
+            "$type": "dimension",
+            "$value": {
+                "value": 0,
+                "unit": "px"
+            },
+            "$description": "Default letter spacing."
+        },
+        "wide": {
+            "$type": "dimension",
+            "$value": {
+                "value": 0.4,
+                "unit": "px"
+            },
+            "$description": "Wider letter spacing for small caps labels."
+        },
+        "$extensions": {
+            "com.webority": {
+                "platforms": ["phone"]
+            }
+        }
+    },
+    "font": {
+        "ui": {
+            "$type": "fontFamily",
+            "$value": [
+                "Webority Sans",
+                "Inter",
+                "-apple-system",
+                "BlinkMacSystemFont",
+                "Segoe UI",
+                "Roboto",
+                "Helvetica Neue",
+                "Arial",
+                "sans-serif"
+            ],
+            "$description": "Body typeface for running text and controls."
+        },
+        "display": {
+            "$type": "fontFamily",
+            "$value": ["Webority Serif", "Cambria", "Georgia", "Times New Roman", "Noto Serif", "serif"],
+            "$description": "Display typeface for headings marked as display text."
+        },
+        "mono": {
+            "$type": "fontFamily",
+            "$value": ["JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"],
+            "$description": "Monospace typeface for code, identifiers and figures that must line up."
+        }
+    },
+    "shadow": {
+        "card": {
+            "$type": "shadow",
+            "$value": "none",
+            "$description": "Shadow under in-page cards, none in this theme so cards stay flat."
+        },
+        "elevated": {
+            "$type": "shadow",
+            "$value": {
+                "color": "{palette.phone-shadow-md}",
+                "offsetX": {
+                    "value": 0,
+                    "unit": "px"
+                },
+                "offsetY": {
+                    "value": 4,
+                    "unit": "px"
+                },
+                "blur": {
+                    "value": 8,
+                    "unit": "px"
+                },
+                "spread": {
+                    "value": 0,
+                    "unit": "px"
+                }
+            },
+            "$description": "Shadow of a surface lifted above the page, such as a toast or a floating action button.",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"],
+                    "elevation": 4
+                }
+            }
+        },
+        "popover": {
+            "$type": "shadow",
+            "$value": {
+                "color": "rgba(7, 20, 55, 0.14)",
+                "offsetX": {
+                    "value": 0,
+                    "unit": "px"
+                },
+                "offsetY": {
+                    "value": 8,
+                    "unit": "px"
+                },
+                "blur": {
+                    "value": 28,
+                    "unit": "px"
+                },
+                "spread": {
+                    "value": -6,
+                    "unit": "px"
+                }
+            },
+            "$description": "Shadow of floating menus, popovers, hover cards and the chat panel."
+        },
+        "modal": {
+            "$type": "shadow",
+            "$value": {
+                "color": "rgba(7, 20, 55, 0.28)",
+                "offsetX": {
+                    "value": 0,
+                    "unit": "px"
+                },
+                "offsetY": {
+                    "value": 24,
+                    "unit": "px"
+                },
+                "blur": {
+                    "value": 60,
+                    "unit": "px"
+                },
+                "spread": {
+                    "value": -16,
+                    "unit": "px"
+                }
+            },
+            "$description": "Shadow of a modal dialog that blocks the page."
+        },
+        "drawer": {
+            "$type": "shadow",
+            "$value": {
+                "color": "rgba(7, 20, 55, 0.28)",
+                "offsetX": {
+                    "value": 0,
+                    "unit": "px"
+                },
+                "offsetY": {
+                    "value": 24,
+                    "unit": "px"
+                },
+                "blur": {
+                    "value": 60,
+                    "unit": "px"
+                },
+                "spread": {
+                    "value": -16,
+                    "unit": "px"
+                }
+            },
+            "$description": "Shadow of a panel anchored to a page edge, such as a drawer or the consent banner."
+        },
+        "overlay": {
+            "$type": "shadow",
+            "$value": {
+                "color": "rgba(7, 20, 55, 0.28)",
+                "offsetX": {
+                    "value": 0,
+                    "unit": "px"
+                },
+                "offsetY": {
+                    "value": 24,
+                    "unit": "px"
+                },
+                "blur": {
+                    "value": 60,
+                    "unit": "px"
+                },
+                "spread": {
+                    "value": -16,
+                    "unit": "px"
+                }
+            },
+            "$description": "Shadow of the top-most layer, such as an item being dragged.",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["web"]
+                }
+            }
+        }
+    },
+    "motion": {
+        "duration": {
+            "instant": {
+                "$type": "duration",
+                "$value": {
+                    "value": 80,
+                    "unit": "ms"
+                },
+                "$description": "Near-instant feedback, for a press or a toggle.",
+                "$extensions": {
+                    "com.webority": {
+                        "platforms": ["phone"]
+                    }
+                }
+            },
+            "fast": {
+                "$type": "duration",
+                "$value": {
+                    "value": 150,
+                    "unit": "ms"
+                },
+                "$description": "Short transition, for hover and small state changes."
+            },
+            "default": {
+                "$type": "duration",
+                "$value": {
+                    "value": 250,
+                    "unit": "ms"
+                },
+                "$description": "Default transition, for panels opening and content changing."
+            },
+            "slow": {
+                "$type": "duration",
+                "$value": {
+                    "value": 400,
+                    "unit": "ms"
+                },
+                "$description": "Long transition, for large surfaces entering the screen."
+            },
+            "slower": {
+                "$type": "duration",
+                "$value": {
+                    "value": 500,
+                    "unit": "ms"
+                },
+                "$description": "Longest transition, for a full screen entering.",
+                "$extensions": {
+                    "com.webority": {
+                        "platforms": ["phone"]
+                    }
+                }
+            }
+        },
+        "ease": {
+            "out": {
+                "$type": "cubicBezier",
+                "$value": [0.22, 1, 0.36, 1],
+                "$description": "Decelerating curve for things entering or settling.",
+                "$extensions": {
+                    "com.webority": {
+                        "platforms": ["web"]
+                    }
+                }
+            },
+            "in-out": {
+                "$type": "cubicBezier",
+                "$value": [0.4, 0, 0.2, 1],
+                "$description": "Symmetric curve for things moving between two places."
+            },
+            "accelerate": {
+                "$type": "cubicBezier",
+                "$value": [0.4, 0, 1, 1],
+                "$description": "Accelerating curve for things leaving the screen.",
+                "$extensions": {
+                    "com.webority": {
+                        "platforms": ["phone"]
+                    }
+                }
+            },
+            "decelerate": {
+                "$type": "cubicBezier",
+                "$value": [0, 0, 0.2, 1],
+                "$description": "Decelerating curve for things arriving on screen.",
+                "$extensions": {
+                    "com.webority": {
+                        "platforms": ["phone"]
+                    }
+                }
+            },
+            "sharp": {
+                "$type": "cubicBezier",
+                "$value": [0.4, 0, 0.6, 1],
+                "$description": "Quick curve for things that leave and return.",
+                "$extensions": {
+                    "com.webority": {
+                        "platforms": ["phone"]
+                    }
+                }
+            },
+            "ui": {
+                "$type": "cubicBezier",
+                "$value": [0.32, 0.72, 0, 1],
+                "$description": "Easing curve for interface transitions.",
+                "$extensions": {
+                    "com.webority": {
+                        "platforms": ["web"]
+                    }
+                }
+            },
+            "elastic": {
+                "$type": "cubicBezier",
+                "$value": [0.34, 1.56, 0.64, 1],
+                "$description": "Overshooting easing for the tab ink bar's spring into place.",
+                "$extensions": {
+                    "com.webority": {
+                        "platforms": ["web"]
+                    }
+                }
+            }
+        }
+    },
+    "section": {
+        "sm": {
+            "$type": "dimension",
+            "$value": {
+                "value": 80,
+                "unit": "px"
+            },
+            "$description": "Small vertical gap between sections of a public page."
+        },
+        "md": {
+            "$type": "dimension",
+            "$value": {
+                "value": 96,
+                "unit": "px"
+            },
+            "$description": "Default vertical gap between sections of a public page."
+        },
+        "lg": {
+            "$type": "dimension",
+            "$value": {
+                "value": 120,
+                "unit": "px"
+            },
+            "$description": "Large vertical gap between sections of a public page."
+        },
+        "$extensions": {
+            "com.webority": {
+                "platforms": ["web"]
+            }
+        }
+    },
+    "size": {
+        "control-sm": {
+            "$type": "dimension",
+            "$value": {
+                "value": 32,
+                "unit": "px"
+            },
+            "$description": "Height of the small control size, for dense toolbars and chips.",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["web"]
+                }
+            }
+        },
+        "control-md": {
+            "$type": "dimension",
+            "$value": {
+                "value": 36,
+                "unit": "px"
+            },
+            "$description": "Default height of a button, field, select or tab; larger on phones.",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["web"]
+                }
+            }
+        },
+        "control-lg": {
+            "$type": "dimension",
+            "$value": {
+                "value": 44,
+                "unit": "px"
+            },
+            "$description": "Height of the large control size, for prominent buttons and fields.",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["web"]
+                }
+            }
+        },
+        "container-max": {
+            "$type": "dimension",
+            "$value": {
+                "value": 1512,
+                "unit": "px"
+            },
+            "$description": "Maximum width of the page container on every surface.",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["web"]
+                }
+            }
+        },
+        "container-pad": {
+            "$type": "dimension",
+            "$value": {
+                "value": 88,
+                "unit": "px"
+            },
+            "$description": "Side padding of the page container at desktop width.",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["web"],
+                    "breakpoints": {
+                        "md": "{space.4xl}"
+                    }
+                }
+            }
+        },
+        "table-pad": {
+            "$type": "dimension",
+            "$value": {
+                "value": 20,
+                "unit": "px"
+            },
+            "$description": "Inset of the table wrapper and toolbar, which a table class can retune.",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["web"]
+                }
+            }
+        },
+        "border": {
+            "$type": "dimension",
+            "$value": {
+                "value": 1,
+                "unit": "px"
+            },
+            "$description": "Width of borders and dividers on a phone.",
+            "$extensions": {
+                "com.webority": {
+                    "platforms": ["phone"]
+                }
+            }
+        }
+    },
+    "z": {
+        "dropdown": {
+            "$type": "number",
+            "$value": 1000,
+            "$description": "Stacking layer of in-page dropdown menus."
+        },
+        "sticky": {
+            "$type": "number",
+            "$value": 1020,
+            "$description": "Stacking layer of sticky page chrome such as headers."
+        },
+        "shell-sidebar": {
+            "$type": "number",
+            "$value": 1025,
+            "$description": "Stacking layer of the desktop shell sidebar and its overflowing menus."
+        },
+        "fixed": {
+            "$type": "number",
+            "$value": 1030,
+            "$description": "Stacking layer of fixed corner layers such as the consent banner."
+        },
+        "shell": {
+            "$type": "number",
+            "$value": 1040,
+            "$description": "Stacking layer of the app shell base chrome and the splash."
+        },
+        "shell-scrim": {
+            "$type": "number",
+            "$value": 1044,
+            "$description": "Stacking layer of the dim behind the mobile drawer."
+        },
+        "shell-drawer": {
+            "$type": "number",
+            "$value": 1045,
+            "$description": "Stacking layer of the mobile sidebar drawer."
+        },
+        "modal-backdrop": {
+            "$type": "number",
+            "$value": 1500,
+            "$description": "Stacking layer of the dim behind a modal dialog."
+        },
+        "modal": {
+            "$type": "number",
+            "$value": 1505,
+            "$description": "Stacking layer of a modal dialog above its backdrop."
+        },
+        "tour": {
+            "$type": "number",
+            "$value": 1550,
+            "$description": "Stacking layer of the product tour, above modals and below menus."
+        },
+        "menu": {
+            "$type": "number",
+            "$value": 1600,
+            "$description": "Stacking layer of portalled select, date and phone menus and info tips."
+        },
+        "popover": {
+            "$type": "number",
+            "$value": 1600,
+            "$description": "Stacking layer of popovers, on the same rung as menus."
+        },
+        "tooltip": {
+            "$type": "number",
+            "$value": 1650,
+            "$description": "Stacking layer of tooltips, above menus and popovers."
+        },
+        "toast": {
+            "$type": "number",
+            "$value": 1700,
+            "$description": "Stacking layer of toast notifications, the topmost layer."
+        },
+        "$extensions": {
+            "com.webority": {
+                "platforms": ["web"]
+            }
+        }
+    }
+}