npm - @primer/react-brand - Versions diffs - 0.70.0-rc.c27c2e9b → 0.71.0-rc.07b74ae3 - Mend

@primer/react-brand 0.70.0-rc.c27c2e9b → 0.71.0-rc.07b74ae3

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.

Files changed (371) hide show

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.70.0-rc.c27c2e9b)
+# Primer Brand docs (v0.71.0-rc.07b74ae3)
-These docs are bundled with `@primer/react-brand@0.70.0-rc.c27c2e9b` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.71.0-rc.07b74ae3` and match your installed version.
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/Tiles/Tiles.module-BzHaDJV8.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Tiles-module__Tiles___RhWBm{width:100%;color:var(--brand-color-text-default)}.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:2;flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none;display:flex}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:4}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:4}}@media screen and (width>=34rem) and (width<=47.99rem){.Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:3}}@media screen and (width>=63.25rem){.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:6}}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:6}}@media screen and (width>=63.25rem){.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-columns:8}}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw{--tiles-grid-border-color:var(--brand-color-border-muted);padding-right:var(--brand-borderWidth-thin);padding-bottom:var(--brand-borderWidth-thin);position:relative}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:before,.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:after{content:"";border-left:var(--brand-borderWidth-thin) solid var(--tiles-grid-border-color);z-index:1;pointer-events:none;width:0;position:absolute;top:0;bottom:0}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:before{left:0}.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:after{right:0}@media screen and (width>=63.25rem){:is(.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP.Primer_Brand__Tiles-module__Tiles--layout-default___szHFY .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:not(:has(>.Primer_Brand__Tiles-module__Tiles-item___YlnUj:nth-child(6))),.Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-grid___lAoQw:not(:has(>.Primer_Brand__Tiles-module__Tiles-item___YlnUj:nth-child(8)))){--tiles-grid-border-color:transparent}}.Primer_Brand__Tiles-module__Tiles-item___YlnUj{--tiles-inset-shadow:inset 0 0 0 transparent;width:calc(100% / var(--tiles-columns));box-sizing:border-box;background-color:var(--brand-tiles-bgColor-rest);border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);border-left:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), inset 0 0 0 transparent;box-shadow:var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted), 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);transition:background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default), box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);flex-direction:column;display:flex;position:relative}:is(.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):hover,.Primer_Brand__Tiles-module__Tiles-item___YlnUj:has(.Primer_Brand__Tiles-module__Tiles-item-link___NcK69):focus-within){--tiles-inset-shadow:inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);background-color:var(--brand-tiles-bgColor-hover)}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69{width:100%;color:inherit;flex:1;-webkit-text-decoration:none;text-decoration:none;display:flex}.Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:calc(-1 * var(--base-size-4));border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Tiles-module__Tiles-item-content___YIq8M{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{justify-content:center;align-items:center;display:flex}.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{width:auto;height:var(--base-size-40);max-width:100%}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{height:var(--base-size-28)}@media screen and (width>=48rem){.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 svg,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2 img{height:var(--base-size-32)}}.Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{justify-content:space-between;align-items:center;gap:var(--base-size-4);padding:var(--base-size-12) var(--base-size-16);display:flex;position:absolute;bottom:0;left:0;right:0}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default)}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2{transform:translateY(calc(-1 * var(--base-size-4)))}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:0;transform:translateY(var(--base-size-4));transition:opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);pointer-events:none}.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:hover .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-link___NcK69:focus-visible .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{opacity:1;transform:translateY(0)}.Primer_Brand__Tiles-module__Tiles-item-name___47ZMU{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.Primer_Brand__Tiles-module__Tiles-item-icon___2Hu6M{color:var(--brand-color-text-default);flex-shrink:0}@media (prefers-reduced-motion:reduce){.Primer_Brand__Tiles-module__Tiles-item___YlnUj,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-media___QH9l2,.Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD .Primer_Brand__Tiles-module__Tiles-item-label___L9BIA{transition:none}}

package/esm/Tiles/Tiles.module.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import './Tiles.module-DU8TFm3h.css';var e = {
+import './Tiles.module-BzHaDJV8.css';var e = {
 	Tiles: "Primer_Brand__Tiles-module__Tiles___RhWBm",
 	"Tiles-grid": "Primer_Brand__Tiles-module__Tiles-grid___lAoQw",
-	"Tiles--layout-default": "Primer_Brand__Tiles-module__Tiles--layout-default___szHFY",
 	"Tiles--layout-compact": "Primer_Brand__Tiles-module__Tiles--layout-compact___HBisD",
+	"Tiles--layout-default": "Primer_Brand__Tiles-module__Tiles--layout-default___szHFY",
 	"Tiles--variant-gridlines": "Primer_Brand__Tiles-module__Tiles--variant-gridlines___6CsMP",
 	"Tiles-item": "Primer_Brand__Tiles-module__Tiles-item___YlnUj",
 	"Tiles-item-link": "Primer_Brand__Tiles-module__Tiles-item-link___NcK69",

package/esm/Tiles/Tiles.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tiles.module.js","names":[],"sources":["../../src/Tiles/Tiles.module.css"],"sourcesContent":[".Tiles {\n width: 100%;\n color: var(--brand-color-text-default);\n}\n\n.Tiles-grid {\n --tiles-columns: 2;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n@media screen and (min-width: 48rem) {\n .Tiles--layout-default .Tiles-grid {\n --tiles-columns: 4;\n }\n}\n\n@media screen and (min-width: 34rem) and (max-width: 47.99rem) {\n .Tiles-grid {\n --tiles-columns: 3;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .Tiles--layout-default .Tiles-grid {\n --tiles-columns: 6;\n }\n}\n\n@media screen and (min-width: 48rem) {\n .Tiles--layout-compact .Tiles-grid {\n --tiles-columns: 4;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .Tiles--layout-compact .Tiles-grid {\n --tiles-columns: 8;\n }\n}\n\n.Tiles--variant-gridlines .Tiles-grid {\n --tiles-grid-border-color: var(--brand-color-border-muted);\n position: relative;\n padding-right: var(--brand-borderWidth-thin);\n padding-bottom: var(--brand-borderWidth-thin);\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before,\n.Tiles--variant-gridlines .Tiles-grid::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n width: 0;\n border-left: var(--brand-borderWidth-thin) solid var(--tiles-grid-border-color);\n z-index: 1;\n pointer-events: none;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before {\n left: 0;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::after {\n right: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Tiles--variant-gridlines.Tiles--layout-default .Tiles-grid:not(:has(> .Tiles-item:nth-child(6))),\n .Tiles--variant-gridlines.Tiles--layout-compact .Tiles-grid:not(:has(> .Tiles-item:nth-child(8))) {\n --tiles-grid-border-color: transparent;\n }\n}\n\n.Tiles-item {\n --tiles-inset-shadow: inset 0 0 0 transparent;\n position: relative;\n display: flex;\n flex-direction: column;\n width: calc(100% / var(--tiles-columns));\n box-sizing: border-box;\n background-color: var(--brand-tiles-bgColor-rest);\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),\n 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);\n transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),\n box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.Tiles-item:has(.Tiles-item-link):hover,\n.Tiles-item:has(.Tiles-item-link):focus-within {\n --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);\n background-color: var(--brand-tiles-bgColor-hover);\n}\n\n.Tiles-item-link {\n display: flex;\n width: 100%;\n flex: 1;\n text-decoration: none;\n color: inherit;\n}\n\n.Tiles-item-link:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: calc(-1 * var(--base-size-4));\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Tiles-item-content {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n aspect-ratio: 1;\n}\n\n.Tiles-item-media {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.Tiles-item-media svg,\n.Tiles-item-media img {\n width: auto;\n height: var(--base-size-40);\n max-width: 100%;\n}\n\n.Tiles--layout-compact .Tiles-item-media svg,\n.Tiles--layout-compact .Tiles-item-media img {\n height: var(--base-size-32);\n}\n\n.Tiles-item-label {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--base-size-4);\n padding: var(--base-size-12) var(--base-size-16);\n}\n\n.Tiles--layout-compact .Tiles-item-media {\n transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-media,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-media {\n transform: translateY(calc(-1 * var(--base-size-4)));\n}\n\n.Tiles--layout-compact .Tiles-item-label {\n opacity: 0;\n transform: translateY(var(--base-size-4));\n transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n pointer-events: none;\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {\n opacity: 1;\n transform: translateY(0);\n}\n\n.Tiles-item-name {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.Tiles-item-icon {\n flex-shrink: 0;\n color: var(--brand-color-text-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .Tiles-item {\n transition: none;\n }\n\n .Tiles--layout-compact .Tiles-item-media {\n transition: none;\n }\n\n .Tiles--layout-compact .Tiles-item-label {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Tiles.module.js","names":[],"sources":["../../src/Tiles/Tiles.module.css"],"sourcesContent":[".Tiles {\n width: 100%;\n color: var(--brand-color-text-default);\n}\n\n.Tiles-grid {\n --tiles-columns: 2;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.Tiles--layout-compact .Tiles-grid {\n --tiles-columns: 4;\n}\n\n@media screen and (min-width: 48rem) {\n .Tiles--layout-default .Tiles-grid {\n --tiles-columns: 4;\n }\n}\n\n@media screen and (min-width: 34rem) and (max-width: 47.99rem) {\n .Tiles-grid {\n --tiles-columns: 3;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .Tiles--layout-default .Tiles-grid {\n --tiles-columns: 6;\n }\n}\n\n@media screen and (min-width: 48rem) {\n .Tiles--layout-compact .Tiles-grid {\n --tiles-columns: 6;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .Tiles--layout-compact .Tiles-grid {\n --tiles-columns: 8;\n }\n}\n\n.Tiles--variant-gridlines .Tiles-grid {\n --tiles-grid-border-color: var(--brand-color-border-muted);\n position: relative;\n padding-right: var(--brand-borderWidth-thin);\n padding-bottom: var(--brand-borderWidth-thin);\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before,\n.Tiles--variant-gridlines .Tiles-grid::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n width: 0;\n border-left: var(--brand-borderWidth-thin) solid var(--tiles-grid-border-color);\n z-index: 1;\n pointer-events: none;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::before {\n left: 0;\n}\n\n.Tiles--variant-gridlines .Tiles-grid::after {\n right: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Tiles--variant-gridlines.Tiles--layout-default .Tiles-grid:not(:has(> .Tiles-item:nth-child(6))),\n .Tiles--variant-gridlines.Tiles--layout-compact .Tiles-grid:not(:has(> .Tiles-item:nth-child(8))) {\n --tiles-grid-border-color: transparent;\n }\n}\n\n.Tiles-item {\n --tiles-inset-shadow: inset 0 0 0 transparent;\n position: relative;\n display: flex;\n flex-direction: column;\n width: calc(100% / var(--tiles-columns));\n box-sizing: border-box;\n background-color: var(--brand-tiles-bgColor-rest);\n border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),\n 0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);\n transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),\n box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.Tiles-item:has(.Tiles-item-link):hover,\n.Tiles-item:has(.Tiles-item-link):focus-within {\n --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);\n background-color: var(--brand-tiles-bgColor-hover);\n}\n\n.Tiles-item-link {\n display: flex;\n width: 100%;\n flex: 1;\n text-decoration: none;\n color: inherit;\n}\n\n.Tiles-item-link:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: calc(-1 * var(--base-size-4));\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Tiles-item-content {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n aspect-ratio: 1;\n}\n\n.Tiles-item-media {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.Tiles-item-media svg,\n.Tiles-item-media img {\n width: auto;\n height: var(--base-size-40);\n max-width: 100%;\n}\n\n.Tiles--layout-compact .Tiles-item-media svg,\n.Tiles--layout-compact .Tiles-item-media img {\n height: var(--base-size-28);\n}\n\n@media screen and (min-width: 48rem) {\n .Tiles--layout-compact .Tiles-item-media svg,\n .Tiles--layout-compact .Tiles-item-media img {\n height: var(--base-size-32);\n }\n}\n\n.Tiles-item-label {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--base-size-4);\n padding: var(--base-size-12) var(--base-size-16);\n}\n\n.Tiles--layout-compact .Tiles-item-media {\n transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-media,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-media {\n transform: translateY(calc(-1 * var(--base-size-4)));\n}\n\n.Tiles--layout-compact .Tiles-item-label {\n opacity: 0;\n transform: translateY(var(--base-size-4));\n transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n pointer-events: none;\n}\n\n.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,\n.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {\n opacity: 1;\n transform: translateY(0);\n}\n\n.Tiles-item-name {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.Tiles-item-icon {\n flex-shrink: 0;\n color: var(--brand-color-text-default);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .Tiles-item {\n transition: none;\n }\n\n .Tiles--layout-compact .Tiles-item-media {\n transition: none;\n }\n\n .Tiles--layout-compact .Tiles-item-label {\n transition: none;\n }\n}\n"],"mappings":""}