@monospaced/set-config 0.0.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/set.catalog.css +90 -39
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@monospaced/set-config",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Shared developer-tooling config for Set. ESLint, Stylelint, Prettier, browserslist presets plus the --set-* token catalog for editor autocomplete and tooling.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
package/set.catalog.css
CHANGED
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
--set-layout-container-max-width-default: 80rem; /** Default container max-width. Use as the standard content width for typical pages. */
|
|
94
94
|
--set-layout-container-max-width-wide: 90rem; /** Wide container max-width. Use for content that benefits from more horizontal space on wider screens (e.g. site furniture). */
|
|
95
95
|
--set-layout-divider-brand-size: 4.5rem; /** Brand divider size. The length of a brand-marked divider element. */
|
|
96
|
-
--set-layout-divider-brand-thickness: 0.
|
|
96
|
+
--set-layout-divider-brand-thickness: 0.375rem; /** Brand divider thickness. The cross-axis dimension of a brand-marked divider. */
|
|
97
97
|
--set-layout-focus-ring-offset-default: 0.125rem; /** Default focus ring offset between the focused element and its ring. */
|
|
98
98
|
--set-layout-focus-ring-offset-inset: -0.25rem; /** Inset focus ring offset. Use when the ring sits inside the element bounds (e.g. when an outset ring would clip). */
|
|
99
99
|
--set-layout-focus-ring-offset-lg: 0.25rem; /** Larger focus ring offset. Use on elements where the default offset would feel cramped. */
|
|
@@ -134,26 +134,26 @@
|
|
|
134
134
|
--set-motion-easing-ease-in: cubic-bezier(0.32, 0, 1, 1); /** Ease-in curve. Use for elements leaving the viewport — slow start, accelerating exit. */
|
|
135
135
|
--set-motion-easing-ease-in-out: cubic-bezier(0.25, 0, 0.75, 1); /** Ease-in-out curve. Use for movements that both originate and settle on screen (e.g. expansions in place). */
|
|
136
136
|
--set-motion-easing-ease-out: cubic-bezier(0, 0, 0.68, 1); /** Ease-out curve. Use for elements entering the viewport — fast start, gentle settle. */
|
|
137
|
-
--set-motion-easing-emphasized: cubic-bezier(0.
|
|
137
|
+
--set-motion-easing-emphasized: cubic-bezier(0.518, 0, 0.482, 1); /** Emphasised easing curve. Use for transitions that should feel more expressive (e.g. brand-led page transitions, hero reveal motion). */
|
|
138
138
|
--set-radius-2xs: 0.0625rem; /** Radius 2xs. Minimal rounding for very small elements (default focus rings, small boxes). */
|
|
139
139
|
--set-radius-lg: 0.375rem; /** Radius lg. Pronounced rounding for large surfaces (cards, panels). */
|
|
140
140
|
--set-radius-md: 0.25rem; /** Radius md. Default rounding for standard UI surfaces (alerts, code blocks). Pick t-shirt sizes when the element's shortest side is unknown — match the size to the component's relative scale. */
|
|
141
|
-
--set-radius-ratio-default: 0.074; /** Default radius ratio. Multiplier for computing radius from a known element dimension (e.g. shortest side × ratio).
|
|
141
|
+
--set-radius-ratio-default: 0.074; /** Default radius ratio. Multiplier for computing radius from a known element dimension (e.g. shortest side × ratio). */
|
|
142
142
|
--set-radius-ratio-lg: 0.5; /** Large radius ratio. For more pronounced proportional rounding. */
|
|
143
143
|
--set-radius-sm: 0.1875rem; /** Radius sm. Moderate rounding for medium-scale UI surfaces. */
|
|
144
144
|
--set-radius-xs: 0.125rem; /** Radius xs. Small rounding for compact UI elements (menu items, code spans), or for elements where relative size shouldn't be assumed (images). */
|
|
145
145
|
--set-shape-logo-graphic-aspect-ratio: 600 / 1200;
|
|
146
146
|
--set-shape-logo-graphic-block-size: 75rem;
|
|
147
147
|
--set-shape-logo-graphic-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%201200%22%3E%3Cpath%20d%3D%22M0%200h150v300H0Zm300%200h150v300H300ZM150%20300h150v300H150Zm300%200h150v300H450ZM0%20600h150v300H0Zm300%200h150v300H300ZM150%20900h150v300H150Zm300%200h150v300H450Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
|
|
148
|
-
--set-shape-logo-primary-aspect-ratio:
|
|
148
|
+
--set-shape-logo-primary-aspect-ratio: 5700 / 2400;
|
|
149
149
|
--set-shape-logo-primary-block-size: 150rem;
|
|
150
|
-
--set-shape-logo-primary-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%
|
|
151
|
-
--set-shape-logo-secondary-aspect-ratio:
|
|
150
|
+
--set-shape-logo-primary-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205700%202400%22%3E%3Cpath%20d%3D%22M0%200h150v300H0Zm300%200h150v300H300Zm300%200h150v300H600Zm300%200h150v300H900Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150ZM150%20300h150v300H150Zm300%200h150v300H450Zm300%200h150v300H750Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150ZM0%201800h150v300H0Zm300%200h150v300H300Zm300%200h150v300H600Zm300%200h150v300H900Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150ZM150%202100h150v300H150Zm300%200h150v300H450Zm300%200h150v300H750Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150Zm300%200h150v300h-150ZM74.22%201459.5h98v-385l-11-180h2l124%20320h89l123-320h3l-11%20180v385h98v-680h-131l-124%20332h-5l-124-332h-131zm879.94%2010c184%200%20223-46%20223-272%200-225-39-271-223-271-186%200-224%2046-224%20271%200%20226%2038%20272%20224%20272m0-93c-102%200-123-30-123-179%200-147%2021-177%20123-177%20100%200%20121%2030%20121%20177%200%20149-21%20179-121%20179m361.44%2083h103v-270c0-141%2020-169%20112-169%2073%200%2088%2018%2088%20107v332h103v-332c0-167-28-202-163-202-95%200-120%2016-147%2092h-5v-82h-91zm769.15%2010c184%200%20223-46%20223-272%200-225-39-271-223-271-186%200-224%2046-224%20271%200%20226%2038%20272%20224%20272m0-93c-102%200-123-30-123-179%200-147%2021-177%20123-177%20100%200%20121%2030%20121%20177%200%20149-21%20179-121%20179m363.26-65c-4%20132%2030%20158%20202%20158%20173%200%20208-25%20208-150%200-118-33-146-191-170-94-14-114-26-114-74%200-50%2018-60%20103-60%2076%200%2092%209%2096%2052h97c-3-118-36-142-194-142-166%200-201%2025-201%20146%200%20114%2031%20141%20182%20162%20101%2013%20122%2028%20122%2082%200%2053-18%2064-103%2064-88%200-107-11-110-68zm558.96%20363h102v-269h5c20%2054%2041%2064%20123%2064%20160%200%20193-45%20193-270%200-227-34-274-198-274-83%200-105%2011-123%2065h-4v-55h-98zm209-298c-93%200-112-30-112-179%200-148%2019-178%20112-178s113%2030%20113%20179c0%20148-20%20178-113%20178m656.47%2083h88v-346c0-156-34-187-197-187-150%200-181%2027-179%20157h97c1-61%2015-74%2085-74%2082%200%2099%2018%2099%20105v24h-72c-187%200-226%2030-226%20179%200%20126%2028%20152%20162%20152%2092%200%20116-13%20138-74h5zm-8-243c-1%20135-22%20163-119%20163-65%200-79-13-79-75%200-74%2018-88%20107-88zm551.75%2095c-10%2056-26%2067-89%2067-100%200-121-31-121-181s20-181%20117-181c65%200%2081%2014%2091%2079h101c-4-141-37-170-188-170-185%200-224%2046-224%20272s39%20272%20226%20272c147%200%20179-26%20186-158zm547.03%209c-15%2048-31%2058-96%2058-96%200-117-23-123-136h324c5-263-32-317-214-317-172%200-207%2046-207%20271%200%20227%2038%20273%20223%20273%20139%200%20172-25%20190-149zm-218-160c4-122%2024-146%20114-146%2088%200%20108%2024%20112%20146zm787.56%20299h93l-1-734h-102l1%20266h-5c-19-54-40-65-120-65-162%200-196%2046-196%20272s35%20271%20200%20271c84%200%20105-11%20125-65h5zm-115-82c-94%200-114-30-114-180s20-180%20114-180c93%200%20112%2030%20112%20180s-19%20180-112%20180%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
|
|
151
|
+
--set-shape-logo-secondary-aspect-ratio: 6714.6 / 1200;
|
|
152
152
|
--set-shape-logo-secondary-block-size: 75rem;
|
|
153
|
-
--set-shape-logo-secondary-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%
|
|
154
|
-
--set-shape-logo-typographic-aspect-ratio:
|
|
153
|
+
--set-shape-logo-secondary-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206714.6%201200%22%3E%3Cpath%20d%3D%22M0%200h150v300H0Zm300%200h150v300H300ZM150%20300h150v300H150Zm300%200h150v300H450ZM0%20600h150v300H0Zm300%200h150v300H300ZM150%20900h150v300H150Zm300%200h150v300H450Zm713%2056h98V571l-11-180h2l124%20320h89l123-320h3l-11%20180v385h98V276h-131l-124%20332h-5l-124-332h-131zm879.94%2010c184%200%20223-46%20223-272%200-225-39-271-223-271-186%200-224%2046-224%20271%200%20226%2038%20272%20224%20272m0-93c-102%200-123-30-123-179%200-147%2021-177%20123-177%20100%200%20121%2030%20121%20177%200%20149-21%20179-121%20179m361.44%2083h103V686c0-141%2020-169%20112-169%2073%200%2088%2018%2088%20107v332h103V624c0-167-28-202-163-202-95%200-120%2016-147%2092h-5v-82h-91zm769.16%2010c184%200%20223-46%20223-272%200-225-39-271-223-271-186%200-224%2046-224%20271%200%20226%2038%20272%20224%20272m0-93c-102%200-123-30-123-179%200-147%2021-177%20123-177%20100%200%20121%2030%20121%20177%200%20149-21%20179-121%20179m363.25-65c-4%20132%2030%20158%20202%20158%20173%200%20208-25%20208-150%200-118-33-146-191-170-94-14-114-26-114-74%200-50%2018-60%20103-60%2076%200%2092%209%2096%2052h97c-3-118-36-142-194-142-166%200-201%2025-201%20146%200%20114%2031%20141%20182%20162%20101%2013%20122%2028%20122%2082%200%2053-18%2064-103%2064-88%200-107-11-110-68zm558.97%20363h102V902h5c20%2054%2041%2064%20123%2064%20160%200%20193-45%20193-270%200-227-34-274-198-274-83%200-105%2011-123%2065h-4v-55h-98zm209-298c-93%200-112-30-112-179%200-148%2019-178%20112-178s113%2030%20113%20179c0%20148-20%20178-113%20178m656.46%2083h88V610c0-156-34-187-197-187-150%200-181%2027-179%20157h97c1-61%2015-74%2085-74%2082%200%2099%2018%2099%20105v24h-72c-187%200-226%2030-226%20179%200%20126%2028%20152%20162%20152%2092%200%20116-13%20138-74h5zm-8-243c-1%20135-22%20163-119%20163-65%200-79-13-79-75%200-74%2018-88%20107-88zm551.75%2095c-10%2056-26%2067-89%2067-100%200-121-31-121-181s20-181%20117-181c65%200%2081%2014%2091%2079h101c-4-141-37-170-188-170-185%200-224%2046-224%20272s39%20272%20226%20272c147%200%20179-26%20186-158zm547.03%209c-15%2048-31%2058-96%2058-96%200-117-23-123-136h324c5-263-32-317-214-317-172%200-207%2046-207%20271%200%20227%2038%20273%20223%20273%20139%200%20172-25%20190-149zm-218-160c4-122%2024-146%20114-146%2088%200%20108%2024%20112%20146zm787.56%20299h93l-1-734h-102l1%20266h-5c-19-54-40-65-120-65-162%200-196%2046-196%20272s35%20271%20200%20271c84%200%20105-11%20125-65h5zm-115-82c-94%200-114-30-114-180s20-180%20114-180c93%200%20112%2030%20112%20180s-19%20180-112%20180%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
|
|
154
|
+
--set-shape-logo-typographic-aspect-ratio: 5551.6 / 1200;
|
|
155
155
|
--set-shape-logo-typographic-block-size: 75rem;
|
|
156
|
-
--set-shape-logo-typographic-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%
|
|
156
|
+
--set-shape-logo-typographic-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205551.6%201200%22%3E%3Cpath%20d%3D%22M0%20956h98V571L87%20391h2l124%20320h89l123-320h3l-11%20180v385h98V276H384L260%20608h-5L131%20276H0zm879.94%2010c184%200%20223-46%20223-272%200-225-39-271-223-271-186%200-224%2046-224%20271%200%20226%2038%20272%20224%20272m0-93c-102%200-123-30-123-179%200-147%2021-177%20123-177%20100%200%20121%2030%20121%20177%200%20149-21%20179-121%20179m361.44%2083h103V686c0-141%2020-169%20112-169%2073%200%2088%2018%2088%20107v332h103V624c0-167-28-202-163-202-95%200-120%2016-147%2092h-5v-82h-91zm769.16%2010c184%200%20223-46%20223-272%200-225-39-271-223-271-186%200-224%2046-224%20271%200%20226%2038%20272%20224%20272m0-93c-102%200-123-30-123-179%200-147%2021-177%20123-177%20100%200%20121%2030%20121%20177%200%20149-21%20179-121%20179m363.25-65c-4%20132%2030%20158%20202%20158%20173%200%20208-25%20208-150%200-118-33-146-191-170-94-14-114-26-114-74%200-50%2018-60%20103-60%2076%200%2092%209%2096%2052h97c-3-118-36-142-194-142-166%200-201%2025-201%20146%200%20114%2031%20141%20182%20162%20101%2013%20122%2028%20122%2082%200%2053-18%2064-103%2064-88%200-107-11-110-68zm558.97%20363h102V902h5c20%2054%2041%2064%20123%2064%20160%200%20193-45%20193-270%200-227-34-274-198-274-83%200-105%2011-123%2065h-4v-55h-98zm209-298c-93%200-112-30-112-179%200-148%2019-178%20112-178s113%2030%20113%20179c0%20148-20%20178-113%20178m656.46%2083h88V610c0-156-34-187-197-187-150%200-181%2027-179%20157h97c1-61%2015-74%2085-74%2082%200%2099%2018%2099%20105v24h-72c-187%200-226%2030-226%20179%200%20126%2028%20152%20162%20152%2092%200%20116-13%20138-74h5zm-8-243c-1%20135-22%20163-119%20163-65%200-79-13-79-75%200-74%2018-88%20107-88zm551.75%2095c-10%2056-26%2067-89%2067-100%200-121-31-121-181s20-181%20117-181c65%200%2081%2014%2091%2079h101c-4-141-37-170-188-170-185%200-224%2046-224%20272s39%20272%20226%20272c147%200%20179-26%20186-158zm547.03%209c-15%2048-31%2058-96%2058-96%200-117-23-123-136h324c5-263-32-317-214-317-172%200-207%2046-207%20271%200%20227%2038%20273%20223%20273%20139%200%20172-25%20190-149zm-218-160c4-122%2024-146%20114-146%2088%200%20108%2024%20112%20146zm787.56%20299h93l-1-734h-102l1%20266h-5c-19-54-40-65-120-65-162%200-196%2046-196%20272s35%20271%20200%20271c84%200%20105-11%20125-65h5zm-115-82c-94%200-114-30-114-180s20-180%20114-180c93%200%20112%2030%20112%20180s-19%20180-112%20180%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
|
|
157
157
|
--set-shape-tile-aspect-ratio: 300 / 600;
|
|
158
158
|
--set-shape-tile-block-size: 37.5rem;
|
|
159
159
|
--set-shape-tile-dark-aspect-ratio: 600 / 600;
|
|
@@ -200,7 +200,12 @@
|
|
|
200
200
|
--set-spacing-vertical-900: 3rem; /** Vertical spacing step 900. */
|
|
201
201
|
--set-spacing-vertical-950: 3.75rem; /** Vertical spacing step 950. */
|
|
202
202
|
--set-typography-font-family-default: 'Berkeley Mono', ui-monospace, monospace; /** Default font family. Use as the system's standard typeface. */
|
|
203
|
-
--set-typography-font-
|
|
203
|
+
--set-typography-font-stretch-condensed: 80%; /** Condensed font width. Use where horizontal space is tight (e.g. badges, avatars). */
|
|
204
|
+
--set-typography-font-stretch-normal: 100%; /** Normal font width. Use as the system's standard type width. */
|
|
205
|
+
--set-typography-font-stretch-semi-condensed: 90%; /** Semi-condensed font width. A subtly narrower alternative to normal. */
|
|
206
|
+
--set-typography-font-stretch-ultra-condensed: 60%; /** Ultra-condensed font width. The narrowest width; use sparingly for dense numeric/marker contexts. */
|
|
207
|
+
--set-typography-font-variation-settings-default: normal; /** Default font-variation-settings. Restate after every `font` shorthand. */
|
|
208
|
+
--set-typography-font-variation-settings-italic: 'slnt' -16; /** Font-variation-settings for italic text. Adds the slant axis that WebKit drops when font-variation-settings is set — apply wherever `font-style: italic` is used. */
|
|
204
209
|
--set-typography-font-weight-bold: 566; /** Bold font weight. Use for strong text emphasis (semantic `strong`/`b` elements, small headings). */
|
|
205
210
|
--set-typography-font-weight-medium: 466; /** Medium font weight. Use for medium text emphasis (e.g. medium headings). */
|
|
206
211
|
--set-typography-font-weight-regular: 400; /** Regular font weight. Use as the system's standard text weight. */
|
|
@@ -218,74 +223,120 @@
|
|
|
218
223
|
--set-typography-leading-950: 3.75rem; /** Leading step 950. */
|
|
219
224
|
--set-typography-measure-default: 35.25em; /** Default measure (line length, in em). Use as the comfortable maximum width to keep line lengths readable. */
|
|
220
225
|
--set-typography-measure-tight: 31.75em; /** Tighter measure (line length, in em). A more constrained alternative to the default. */
|
|
226
|
+
--set-typography-metric-default-cap-balance: 0.031em; /** Bottom padding to vertically balance a filled single-line cell (e.g. inline code), in em. */
|
|
227
|
+
--set-typography-metric-default-cell-height: 1.2em; /** Character cell height (full line box), in em. */
|
|
228
|
+
--set-typography-metric-default-cell-width: 0.6em; /** Character cell width (advance), in em. */
|
|
229
|
+
--set-typography-metric-default-side-bearing-pair: 0.17em; /** Both facing sidebearings combined — one inter-letter gap (2× single); basis for word-spacing, in em. */
|
|
230
|
+
--set-typography-metric-default-side-bearing-single: 0.085em; /** A single per-side sidebearing, in em. */
|
|
221
231
|
--set-typography-paragraph-spacing-default: 1.5rem; /** Default vertical spacing between paragraphs. */
|
|
222
232
|
--set-typography-paragraph-spacing-lg: 2.25rem; /** Looser paragraph spacing. Use in editorial layouts where extra breathing room aids reading. */
|
|
223
233
|
--set-typography-paragraph-spacing-sm: 0.75rem; /** Tighter paragraph spacing. Use in dense layouts or compact prose. */
|
|
224
|
-
--set-typography-prose-code-padding-block-default: 0.055em; /** Default block padding for inline `code`. Use at smaller viewports. */
|
|
225
|
-
--set-typography-prose-code-padding-block-lg: 0.2em; /** Larger block padding for inline `code`. Use at larger viewports. */
|
|
226
|
-
--set-typography-prose-code-padding-inline-default: 0.25em; /** Inline (horizontal) padding for inline `code`. */
|
|
227
234
|
--set-typography-prose-link-active-decoration-offset: 0.34em; /** Decoration offset for prose links during active (pressed) state, in em. */
|
|
228
235
|
--set-typography-prose-link-default-decoration-line: none; /** Default decoration line for prose links. */
|
|
229
236
|
--set-typography-prose-link-default-decoration-offset: 0.24em; /** Default decoration offset for prose links, in em. */
|
|
230
237
|
--set-typography-prose-link-default-decoration-thickness: 0.125rem; /** Default decoration thickness for prose links. */
|
|
231
238
|
--set-typography-prose-link-hover-decoration-line: underline; /** Decoration line for prose links on hover. */
|
|
232
239
|
--set-typography-prose-link-hover-decoration-offset: 0.29em; /** Decoration offset for prose links on hover, in em. */
|
|
233
|
-
--set-typography-text-body-lg: 400 1.25rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Large body text. Use for emphasised copy (intro paragraphs, lede text). */
|
|
234
|
-
--set-typography-text-body-
|
|
235
|
-
--set-typography-text-body-
|
|
236
|
-
--set-typography-text-body-
|
|
237
|
-
--set-typography-text-body-responsive-
|
|
238
|
-
--set-typography-text-body-responsive-
|
|
239
|
-
--set-typography-text-body-
|
|
240
|
-
--set-typography-text-body-
|
|
241
|
-
--set-typography-text-
|
|
242
|
-
--set-typography-text-
|
|
243
|
-
--set-typography-text-
|
|
244
|
-
--set-typography-text-
|
|
245
|
-
--set-typography-text-
|
|
246
|
-
--set-typography-text-
|
|
247
|
-
--set-typography-text-
|
|
248
|
-
--set-typography-text-
|
|
249
|
-
--set-typography-text-heading-
|
|
250
|
-
--set-typography-text-heading-
|
|
251
|
-
--set-typography-text-heading-
|
|
252
|
-
--set-typography-text-heading-
|
|
253
|
-
--set-typography-text-heading-
|
|
254
|
-
--set-typography-text-heading-
|
|
255
|
-
--set-typography-text-heading-
|
|
256
|
-
--set-typography-text-heading-
|
|
257
|
-
--set-typography-text-heading-
|
|
258
|
-
--set-typography-text-heading-
|
|
240
|
+
--set-typography-text-body-lg-font: 400 1.25rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Large body text. Use for emphasised copy (intro paragraphs, lede text). */
|
|
241
|
+
--set-typography-text-body-lg-font-stretch: 100%; /** Font width paired with the body lg composite. */
|
|
242
|
+
--set-typography-text-body-md-font: 400 1.125rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Default body text size. */
|
|
243
|
+
--set-typography-text-body-md-font-stretch: 100%; /** Font width paired with the body md composite. */
|
|
244
|
+
--set-typography-text-body-responsive-lg-font: 400 1.25rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Large body text. Use for emphasised copy (intro paragraphs, lede text). */
|
|
245
|
+
--set-typography-text-body-responsive-lg-font-stretch: 100%; /** Font width paired with the body responsive lg composite. */
|
|
246
|
+
--set-typography-text-body-responsive-md-font: 400 1.125rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Default body text size. */
|
|
247
|
+
--set-typography-text-body-responsive-md-font-stretch: 100%; /** Font width paired with the body responsive md composite. */
|
|
248
|
+
--set-typography-text-body-responsive-sm-font: 400 1rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Small body text. Use for secondary copy (labels, captions, helper text) where default body would be too prominent. */
|
|
249
|
+
--set-typography-text-body-responsive-sm-font-stretch: 100%; /** Font width paired with the body responsive sm composite. */
|
|
250
|
+
--set-typography-text-body-responsive-xs-font: 400 0.875rem/1.714286 'Berkeley Mono', ui-monospace, monospace; /** Extra small body text. Use for the smallest body copy (microtext). */
|
|
251
|
+
--set-typography-text-body-responsive-xs-font-stretch: 100%; /** Font width paired with the body responsive xs composite. */
|
|
252
|
+
--set-typography-text-body-sm-font: 400 1rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Small body text. Use for secondary copy (labels, captions, helper text) where default body would be too prominent. */
|
|
253
|
+
--set-typography-text-body-sm-font-stretch: 100%; /** Font width paired with the body sm composite. */
|
|
254
|
+
--set-typography-text-body-xs-font: 400 0.875rem/1.714286 'Berkeley Mono', ui-monospace, monospace; /** Extra small body text. Use for the smallest body copy (microtext). */
|
|
255
|
+
--set-typography-text-body-xs-font-stretch: 100%; /** Font width paired with the body xs composite. */
|
|
256
|
+
--set-typography-text-heading-2xl-font: 366 2.625rem/1.285714 'Berkeley Mono', ui-monospace, monospace; /** 2xl heading (`h1`-equivalent). Use for page titles. */
|
|
257
|
+
--set-typography-text-heading-2xl-font-stretch: 96.25%; /** Font width paired with the heading 2xl composite. */
|
|
258
|
+
--set-typography-text-heading-3xl-font: 300 3rem/1.25 'Berkeley Mono', ui-monospace, monospace; /** Display heading (3xl). Use for hero/marketing headings. */
|
|
259
|
+
--set-typography-text-heading-3xl-font-stretch: 95%; /** Font width paired with the heading 3xl composite. */
|
|
260
|
+
--set-typography-text-heading-4xl-font: 250 3.875rem/1.16129 'Berkeley Mono', ui-monospace, monospace; /** Display heading (4xl). Use for larger hero/marketing headings. */
|
|
261
|
+
--set-typography-text-heading-4xl-font-stretch: 94%; /** Font width paired with the heading 4xl composite. */
|
|
262
|
+
--set-typography-text-heading-5xl-font: 200 5.25rem/1.142857 'Berkeley Mono', ui-monospace, monospace; /** Display heading (5xl). Use for the largest hero/marketing headings. */
|
|
263
|
+
--set-typography-text-heading-5xl-font-stretch: 92.5%; /** Font width paired with the heading 5xl composite. */
|
|
264
|
+
--set-typography-text-heading-lg-font: 433 1.5rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Large heading (`h3`-equivalent). Use for subsection headings and component-level titles (cards, panels). */
|
|
265
|
+
--set-typography-text-heading-lg-font-stretch: 100%; /** Font width paired with the heading lg composite. */
|
|
266
|
+
--set-typography-text-heading-md-font: 466 1.25rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Medium heading (`h4`-equivalent). Use for subsection headings. */
|
|
267
|
+
--set-typography-text-heading-md-font-stretch: 100%; /** Font width paired with the heading md composite. */
|
|
268
|
+
--set-typography-text-heading-responsive-2xl-font: 366 2.625rem/1.285714 'Berkeley Mono', ui-monospace, monospace; /** 2xl heading (`h1`-equivalent). Use for page titles. */
|
|
269
|
+
--set-typography-text-heading-responsive-2xl-font-stretch: 96.25%; /** Font width paired with the heading responsive 2xl composite. */
|
|
270
|
+
--set-typography-text-heading-responsive-3xl-font: 300 3rem/1.25 'Berkeley Mono', ui-monospace, monospace; /** Display heading (3xl). Use for hero/marketing headings. */
|
|
271
|
+
--set-typography-text-heading-responsive-3xl-font-stretch: 95%; /** Font width paired with the heading responsive 3xl composite. */
|
|
272
|
+
--set-typography-text-heading-responsive-4xl-font: 250 3.875rem/1.16129 'Berkeley Mono', ui-monospace, monospace; /** Display heading (4xl). Use for larger hero/marketing headings. */
|
|
273
|
+
--set-typography-text-heading-responsive-4xl-font-stretch: 94%; /** Font width paired with the heading responsive 4xl composite. */
|
|
274
|
+
--set-typography-text-heading-responsive-5xl-font: 200 5.25rem/1.142857 'Berkeley Mono', ui-monospace, monospace; /** Display heading (5xl). Use for the largest hero/marketing headings. */
|
|
275
|
+
--set-typography-text-heading-responsive-5xl-font-stretch: 92.5%; /** Font width paired with the heading responsive 5xl composite. */
|
|
276
|
+
--set-typography-text-heading-responsive-lg-font: 433 1.5rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Large heading (`h3`-equivalent). Use for subsection headings and component-level titles (cards, panels). */
|
|
277
|
+
--set-typography-text-heading-responsive-lg-font-stretch: 100%; /** Font width paired with the heading responsive lg composite. */
|
|
278
|
+
--set-typography-text-heading-responsive-md-font: 466 1.25rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Medium heading (`h4`-equivalent). Use for subsection headings. */
|
|
279
|
+
--set-typography-text-heading-responsive-md-font-stretch: 100%; /** Font width paired with the heading responsive md composite. */
|
|
280
|
+
--set-typography-text-heading-responsive-sm-font: 500 1.125rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Small heading (`h5`-equivalent). Use for subsection headings. */
|
|
281
|
+
--set-typography-text-heading-responsive-sm-font-stretch: 100%; /** Font width paired with the heading responsive sm composite. */
|
|
282
|
+
--set-typography-text-heading-responsive-xl-font: 400 2rem/1.354839 'Berkeley Mono', ui-monospace, monospace; /** Extra large heading (`h2`-equivalent). Use for section headings. */
|
|
283
|
+
--set-typography-text-heading-responsive-xl-font-stretch: 98.25%; /** Font width paired with the heading responsive xl composite. */
|
|
284
|
+
--set-typography-text-heading-responsive-xs-font: 533 1rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Extra small heading (`h6`-equivalent). Use for subsection headings. */
|
|
285
|
+
--set-typography-text-heading-responsive-xs-font-stretch: 100%; /** Font width paired with the heading responsive xs composite. */
|
|
286
|
+
--set-typography-text-heading-sm-font: 500 1.125rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Small heading (`h5`-equivalent). Use for subsection headings. */
|
|
287
|
+
--set-typography-text-heading-sm-font-stretch: 100%; /** Font width paired with the heading sm composite. */
|
|
288
|
+
--set-typography-text-heading-xl-font: 400 2rem/1.354839 'Berkeley Mono', ui-monospace, monospace; /** Extra large heading (`h2`-equivalent). Use for section headings. */
|
|
289
|
+
--set-typography-text-heading-xl-font-stretch: 98.25%; /** Font width paired with the heading xl composite. */
|
|
290
|
+
--set-typography-text-heading-xs-font: 533 1rem/1.5 'Berkeley Mono', ui-monospace, monospace; /** Extra small heading (`h6`-equivalent). Use for subsection headings. */
|
|
291
|
+
--set-typography-text-heading-xs-font-stretch: 100%; /** Font width paired with the heading xs composite. */
|
|
259
292
|
--set-typography-type-step-100-font-size: 0.875rem; /** Type-step 100 font size. Tight-leading variant. */
|
|
293
|
+
--set-typography-type-step-100-font-stretch: 100%; /** Type-step 100 font stretch. */
|
|
260
294
|
--set-typography-type-step-100-line-height: 1.285714; /** Type-step 100 line height. Tight leading. */
|
|
261
295
|
--set-typography-type-step-1000-font-size: 3rem; /** Type-step 1000 font size. */
|
|
296
|
+
--set-typography-type-step-1000-font-stretch: 95%; /** Type-step 1000 font stretch. */
|
|
262
297
|
--set-typography-type-step-1000-line-height: 1.25; /** Type-step 1000 line height. */
|
|
263
298
|
--set-typography-type-step-1100-font-size: 3.875rem; /** Type-step 1100 font size. */
|
|
299
|
+
--set-typography-type-step-1100-font-stretch: 94%; /** Type-step 1100 font stretch. */
|
|
264
300
|
--set-typography-type-step-1100-line-height: 1.16129; /** Type-step 1100 line height. */
|
|
265
301
|
--set-typography-type-step-1200-font-size: 5.25rem; /** Type-step 1200 font size. */
|
|
302
|
+
--set-typography-type-step-1200-font-stretch: 92.5%; /** Type-step 1200 font stretch. */
|
|
266
303
|
--set-typography-type-step-1200-line-height: 1.142857; /** Type-step 1200 line height. */
|
|
267
304
|
--set-typography-type-step-1300-font-size: 7.5rem; /** Type-step 1300 font size. Largest step. */
|
|
305
|
+
--set-typography-type-step-1300-font-stretch: 90%; /** Type-step 1300 font stretch. */
|
|
268
306
|
--set-typography-type-step-1300-line-height: 1; /** Type-step 1300 line height. */
|
|
269
307
|
--set-typography-type-step-150-font-size: 0.875rem; /** Type-step 150 font size. Loose-leading variant of step 100. */
|
|
308
|
+
--set-typography-type-step-150-font-stretch: 100%; /** Type-step 150 font stretch. */
|
|
270
309
|
--set-typography-type-step-150-line-height: 1.714286; /** Type-step 150 line height. Loose leading. */
|
|
271
310
|
--set-typography-type-step-200-font-size: 1rem; /** Default type-step font size. Type-steps are size/leading pairs for explicit typographic control without a full text composite (body/heading). */
|
|
311
|
+
--set-typography-type-step-200-font-stretch: 100%; /** Type-step 200 font stretch. */
|
|
272
312
|
--set-typography-type-step-200-line-height: 1.5; /** Default type-step line height. */
|
|
273
313
|
--set-typography-type-step-300-font-size: 1.125rem; /** Type-step 300 font size. */
|
|
314
|
+
--set-typography-type-step-300-font-stretch: 100%; /** Type-step 300 font stretch. */
|
|
274
315
|
--set-typography-type-step-300-line-height: 1.5; /** Type-step 300 line height. */
|
|
275
316
|
--set-typography-type-step-400-font-size: 1.25rem; /** Type-step 400 font size. Tight-leading variant. */
|
|
317
|
+
--set-typography-type-step-400-font-stretch: 100%; /** Type-step 400 font stretch. */
|
|
276
318
|
--set-typography-type-step-400-line-height: 1.5; /** Type-step 400 line height. Tight leading. */
|
|
277
319
|
--set-typography-type-step-450-font-size: 1.25rem; /** Type-step 450 font size. Loose-leading variant of step 400. */
|
|
320
|
+
--set-typography-type-step-450-font-stretch: 100%; /** Type-step 450 font stretch. */
|
|
278
321
|
--set-typography-type-step-450-line-height: 1.8; /** Type-step 450 line height. Loose leading. */
|
|
279
322
|
--set-typography-type-step-50-font-size: 0.75rem; /** Type-step 50 font size. Smallest step. */
|
|
323
|
+
--set-typography-type-step-50-font-stretch: 100%; /** Type-step 50 font stretch. */
|
|
280
324
|
--set-typography-type-step-50-line-height: 1.5; /** Type-step 50 line height. */
|
|
281
325
|
--set-typography-type-step-500-font-size: 1.5rem; /** Type-step 500 font size. */
|
|
326
|
+
--set-typography-type-step-500-font-stretch: 100%; /** Type-step 500 font stretch. */
|
|
282
327
|
--set-typography-type-step-500-line-height: 1.5; /** Type-step 500 line height. */
|
|
283
328
|
--set-typography-type-step-600-font-size: 1.75rem; /** Type-step 600 font size. */
|
|
329
|
+
--set-typography-type-step-600-font-stretch: 99.25%; /** Type-step 600 font stretch. */
|
|
284
330
|
--set-typography-type-step-600-line-height: 1.5; /** Type-step 600 line height. */
|
|
285
331
|
--set-typography-type-step-700-font-size: 2rem; /** Type-step 700 font size. */
|
|
332
|
+
--set-typography-type-step-700-font-stretch: 98.25%; /** Type-step 700 font stretch. */
|
|
286
333
|
--set-typography-type-step-700-line-height: 1.354839; /** Type-step 700 line height. */
|
|
287
334
|
--set-typography-type-step-800-font-size: 2.25rem; /** Type-step 800 font size. */
|
|
335
|
+
--set-typography-type-step-800-font-stretch: 97.5%; /** Type-step 800 font stretch. */
|
|
288
336
|
--set-typography-type-step-800-line-height: 1.333333; /** Type-step 800 line height. */
|
|
289
337
|
--set-typography-type-step-900-font-size: 2.625rem; /** Type-step 900 font size. */
|
|
338
|
+
--set-typography-type-step-900-font-stretch: 96.25%; /** Type-step 900 font stretch. */
|
|
290
339
|
--set-typography-type-step-900-line-height: 1.285714; /** Type-step 900 line height. */
|
|
340
|
+
--set-typography-word-spacing-default: -0.17em; /** Default word spacing (in em). Tightens the space between words to suit the system's typeface. */
|
|
341
|
+
--set-typography-word-spacing-monospaced: 0em; /** Word spacing for monospaced text (0em). Monospace glyphs carry their own even advance, so tightening word spacing would break the grid — apply to `code`, tabular data, and other mono contexts. */
|
|
291
342
|
}
|