@primer/react 38.4.0-rc.1ca4eb46b → 38.4.0-rc.27ad1378a
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.
Potentially problematic release.
This version of @primer/react might be problematic. Click here for more details.
- package/CHANGELOG.md +6 -0
- package/dist/InlineMessage/InlineMessage.d.ts +5 -1
- package/dist/InlineMessage/InlineMessage.d.ts.map +1 -1
- package/dist/InlineMessage/InlineMessage.js +49 -25
- package/dist/PageLayout/PageLayout-28cb4d6e.css +2 -0
- package/dist/PageLayout/PageLayout-28cb4d6e.css.map +1 -0
- package/dist/PageLayout/PageLayout.d.ts.map +1 -1
- package/dist/PageLayout/PageLayout.js +422 -590
- package/dist/PageLayout/PageLayout.module.css.js +2 -2
- package/dist/experimental/IssueLabel/IssueLabel.d.ts.map +1 -1
- package/dist/experimental/IssueLabel/IssueLabel.js +3 -2
- package/generated/components.json +6 -0
- package/package.json +1 -1
- package/dist/PageLayout/PageLayout-28a244f7.css +0 -2
- package/dist/PageLayout/PageLayout-28a244f7.css.map +0 -1
- package/dist/experimental/IssueLabel/getColorFromHex.d.ts +0 -8
- package/dist/experimental/IssueLabel/getColorFromHex.d.ts.map +0 -1
- package/dist/experimental/IssueLabel/getColorFromHex.js +0 -185
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import './PageLayout-
|
|
1
|
+
import './PageLayout-28cb4d6e.css';
|
|
2
2
|
|
|
3
|
-
var classes = {"PageLayoutRoot":"prc-PageLayout-PageLayoutRoot-1zlEO","PageLayoutWrapper":"prc-PageLayout-PageLayoutWrapper-s2ao4","PageLayoutContent":"prc-PageLayout-PageLayoutContent-jzDMn","HorizontalDivider":"prc-PageLayout-HorizontalDivider-CYLp5","VerticalDivider":"prc-PageLayout-VerticalDivider-4A4Qm","Header":"prc-PageLayout-Header-mQXK1","HeaderContent":"prc-PageLayout-HeaderContent-dVIQb","HeaderHorizontalDivider":"prc-PageLayout-HeaderHorizontalDivider-bofyb","ContentWrapper":"prc-PageLayout-ContentWrapper-b-QRo","Content":"prc-PageLayout-Content--F7-I","PaneWrapper":"prc-PageLayout-PaneWrapper-nGO0U","PaneVerticalDivider":"prc-PageLayout-PaneVerticalDivider-1c9vy","Pane":"prc-PageLayout-Pane-Vl5LI","PaneHorizontalDivider":"prc-PageLayout-PaneHorizontalDivider-4exOb","FooterWrapper":"prc-PageLayout-FooterWrapper-WZwgZ","FooterHorizontalDivider":"prc-PageLayout-FooterHorizontalDivider-sNLmj","FooterContent":"prc-PageLayout-FooterContent-UFWGW"
|
|
3
|
+
var classes = {"PageLayoutRoot":"prc-PageLayout-PageLayoutRoot-1zlEO","PageLayoutWrapper":"prc-PageLayout-PageLayoutWrapper-s2ao4","PageLayoutContent":"prc-PageLayout-PageLayoutContent-jzDMn","HorizontalDivider":"prc-PageLayout-HorizontalDivider-CYLp5","VerticalDivider":"prc-PageLayout-VerticalDivider-4A4Qm","Header":"prc-PageLayout-Header-mQXK1","HeaderContent":"prc-PageLayout-HeaderContent-dVIQb","HeaderHorizontalDivider":"prc-PageLayout-HeaderHorizontalDivider-bofyb","ContentWrapper":"prc-PageLayout-ContentWrapper-b-QRo","DraggableHandle":"prc-PageLayout-DraggableHandle-zPw82","Content":"prc-PageLayout-Content--F7-I","PaneWrapper":"prc-PageLayout-PaneWrapper-nGO0U","PaneVerticalDivider":"prc-PageLayout-PaneVerticalDivider-1c9vy","Pane":"prc-PageLayout-Pane-Vl5LI","PaneHorizontalDivider":"prc-PageLayout-PaneHorizontalDivider-4exOb","FooterWrapper":"prc-PageLayout-FooterWrapper-WZwgZ","FooterHorizontalDivider":"prc-PageLayout-FooterHorizontalDivider-sNLmj","FooterContent":"prc-PageLayout-FooterContent-UFWGW"};
|
|
4
4
|
|
|
5
5
|
export { classes as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IssueLabel.d.ts","sourceRoot":"","sources":["../../../src/experimental/IssueLabel/IssueLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,KAAK,GAAG,GAAG,IAAI,MAAM,EAAE,CAAA;AAEvB,KAAK,iBAAiB,GAClB,QAAQ,GACR,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAA;AAEZ,KAAK,SAAS,GAAG;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,OAAO,CAAC,EAAE,iBAAiB,CAAA;CAC5B,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GACzD,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACpD,CAAA;AAEH,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAClD,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAEH,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,GACtE,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAEH,KAAK,iBAAiB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACrD,EAAE,EAAE,EAAE,CAAA;CACP,GAAG,SAAS,GACX,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,EAAE,CAAC,EAAE,MAAM,SAAS,CAAC,CAAA;AAE3D,KAAK,eAAe,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,iBAAiB,CAAC,EAAE,CAAC,CAAA;AAEhH,iBAAS,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;AACtD,iBAAS,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;AACtD,iBAAS,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;AACxD,iBAAS,UAAU,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"IssueLabel.d.ts","sourceRoot":"","sources":["../../../src/experimental/IssueLabel/IssueLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,KAAK,GAAG,GAAG,IAAI,MAAM,EAAE,CAAA;AAEvB,KAAK,iBAAiB,GAClB,QAAQ,GACR,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAA;AAEZ,KAAK,SAAS,GAAG;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,OAAO,CAAC,EAAE,iBAAiB,CAAA;CAC5B,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GACzD,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACpD,CAAA;AAEH,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAClD,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAEH,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,GACtE,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAEH,KAAK,iBAAiB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACrD,EAAE,EAAE,EAAE,CAAA;CACP,GAAG,SAAS,GACX,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,EAAE,CAAC,EAAE,MAAM,SAAS,CAAC,CAAA;AAE3D,KAAK,eAAe,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,iBAAiB,CAAC,EAAE,CAAC,CAAA;AAEhH,iBAAS,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;AACtD,iBAAS,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;AACtD,iBAAS,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;AACxD,iBAAS,UAAU,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;AAqDhG,OAAO,EAAC,UAAU,EAAC,CAAA;AACnB,YAAY,EAAC,eAAe,EAAE,GAAG,EAAC,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { c } from 'react-compiler-runtime';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
|
-
import { getColorsFromHex } from './getColorFromHex.js';
|
|
4
3
|
import classes from './IssueLabel.module.css.js';
|
|
4
|
+
import { readableColor } from 'color2k';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
7
|
function IssueLabel(t0) {
|
|
@@ -50,7 +50,8 @@ function IssueLabel(t0) {
|
|
|
50
50
|
if ($[9] !== fillColor || $[10] !== style) {
|
|
51
51
|
t4 = fillColor ? {
|
|
52
52
|
...style,
|
|
53
|
-
|
|
53
|
+
backgroundColor: fillColor,
|
|
54
|
+
color: readableColor(fillColor)
|
|
54
55
|
} : style;
|
|
55
56
|
$[9] = fillColor;
|
|
56
57
|
$[10] = style;
|
|
@@ -3616,6 +3616,12 @@
|
|
|
3616
3616
|
"description": "Specify the type of the inline message",
|
|
3617
3617
|
"type": "'critical' | 'success' | 'unvailable' | 'warning'",
|
|
3618
3618
|
"required": true
|
|
3619
|
+
},
|
|
3620
|
+
{
|
|
3621
|
+
"name": "leadingVisual",
|
|
3622
|
+
"description": "A custom leading visual to display instead of the default variant icon.",
|
|
3623
|
+
"type": "React.ElementType | React.ReactNode",
|
|
3624
|
+
"required": false
|
|
3619
3625
|
}
|
|
3620
3626
|
]
|
|
3621
3627
|
},
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
body[data-page-layout-dragging=true]{cursor:col-resize}body[data-page-layout-dragging=true] *{-webkit-user-select:none;user-select:none}.prc-PageLayout-PageLayoutRoot-1zlEO{--region-order-header:0;--region-order-pane-start:1;--region-order-content:2;--region-order-pane-end:3;--region-order-footer:4;--spacing-none:0;--spacing-condensed:var(--base-size-16,1rem);--spacing-normal:var(--base-size-16,1rem)}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing-normal:var(--base-size-24,1.5rem)}}.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:100%;--pane-width-medium:100%;--pane-width-large:100%;--pane-max-width-diff:511px}@media screen and (min-width:768px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:240px;--pane-width-medium:256px;--pane-width-large:256px}}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:256px;--pane-width-medium:296px;--pane-width-large:320px}}@media screen and (min-width:1280px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-max-width-diff:959px}}.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing:0;--spacing-row:0;--spacing-column:0;--spacing-divider:0;--offset-header:0;--pane-width:0;--pane-min-width:0;--pane-max-width:0;--pane-width-custom:0;--pane-width-size:0;padding:var(--spacing)}.prc-PageLayout-PageLayoutWrapper-s2ao4{display:flex;flex-wrap:wrap;height:100%;margin-left:auto;margin-right:auto;width:100%}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=medium]){max-width:768px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=large]){max-width:1012px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=full]){max-width:100%}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PageLayoutContent-jzDMn{display:flex;flex:1 1 100%;flex-wrap:wrap;max-width:100%}.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:calc(var(--spacing-divider)*-1);margin-right:calc(var(--spacing-divider)*-1)}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=none]){display:none}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset 0 -1px 0 0 var(--borderColor-default,var(--color-border-default)),inset 0 1px 0 0 var(--borderColor-default,var(--color-border-default));display:block;height:var(--base-size-8,.5rem)}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant-narrow=none]){display:none}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant-narrow=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant-narrow=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset 0 -1px 0 0 var(--borderColor-default,var(--color-border-default)),inset 0 1px 0 0 var(--borderColor-default,var(--color-border-default));display:block;height:var(--base-size-8,.5rem)}}@media (min-width:48rem){.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant-regular=none]){display:none}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant-regular=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant-regular=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset 0 -1px 0 0 var(--borderColor-default,var(--color-border-default)),inset 0 1px 0 0 var(--borderColor-default,var(--color-border-default));display:block;height:var(--base-size-8,.5rem)}}@media (min-width:87.5rem){.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant-wide=none]){display:none}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant-wide=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant-wide=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset 0 -1px 0 0 var(--borderColor-default,var(--color-border-default)),inset 0 1px 0 0 var(--borderColor-default,var(--color-border-default));display:block;height:var(--base-size-8,.5rem)}}@media screen and (min-width:768px){.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:0!important;margin-right:0!important}}.prc-PageLayout-VerticalDivider-4A4Qm{height:100%;position:relative}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=none]){display:none}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset -1px 0 0 0 var(--borderColor-default,var(--color-border-default)),inset 1px 0 0 0 var(--borderColor-default,var(--color-border-default));display:block;width:var(--base-size-8,.5rem)}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant-narrow=none]){display:none}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant-narrow=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant-narrow=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset -1px 0 0 0 var(--borderColor-default,var(--color-border-default)),inset 1px 0 0 0 var(--borderColor-default,var(--color-border-default));display:block;width:var(--base-size-8,.5rem)}}@media (min-width:48rem){.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant-regular=none]){display:none}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant-regular=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant-regular=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset -1px 0 0 0 var(--borderColor-default,var(--color-border-default)),inset 1px 0 0 0 var(--borderColor-default,var(--color-border-default));display:block;width:var(--base-size-8,.5rem)}}@media (min-width:87.5rem){.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant-wide=none]){display:none}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant-wide=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant-wide=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset -1px 0 0 0 var(--borderColor-default,var(--color-border-default)),inset 1px 0 0 0 var(--borderColor-default,var(--color-border-default));display:block;width:var(--base-size-8,.5rem)}}.prc-PageLayout-Header-mQXK1{margin-bottom:var(--spacing);width:100%}.prc-PageLayout-Header-mQXK1:where([data-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-Header-mQXK1:where([data-hidden-narrow=true]){display:none}}@media (min-width:48rem){.prc-PageLayout-Header-mQXK1:where([data-hidden-regular=true]){display:none}}@media (min-width:87.5rem){.prc-PageLayout-Header-mQXK1:where([data-hidden-wide=true]){display:none}}.prc-PageLayout-HeaderContent-dVIQb{padding:var(--spacing)}.prc-PageLayout-HeaderHorizontalDivider-bofyb{margin-top:var(--spacing)}.prc-PageLayout-ContentWrapper-b-QRo{display:flex;flex-basis:0;flex-direction:column;flex-grow:1;flex-shrink:1;min-width:1px;order:var(--region-order-content)}.prc-PageLayout-ContentWrapper-b-QRo:where([data-is-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-ContentWrapper-b-QRo:where([data-is-hidden-narrow=true]){display:none}}@media (min-width:48rem){.prc-PageLayout-ContentWrapper-b-QRo:where([data-is-hidden-regular=true]){display:none}}@media (min-width:87.5rem){.prc-PageLayout-ContentWrapper-b-QRo:where([data-is-hidden-wide=true]){display:none}}.prc-PageLayout-Content--F7-I{flex-grow:1;margin-left:auto;margin-right:auto;padding:var(--spacing);width:100%}.prc-PageLayout-Content--F7-I:where([data-width=medium]){max-width:768px}.prc-PageLayout-Content--F7-I:where([data-width=large]){max-width:1012px}.prc-PageLayout-Content--F7-I:where([data-width=full]){max-width:100%}.prc-PageLayout-Content--F7-I:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PaneWrapper-nGO0U{display:flex;margin-left:0;margin-right:0;width:100%}.prc-PageLayout-PaneWrapper-nGO0U:where([data-is-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneWrapper-nGO0U:where([data-is-hidden-narrow=true]){display:none}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position-narrow=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position-narrow=start]){flex-direction:column-reverse;margin-bottom:var(--spacing-row);order:var(--region-order-pane-start)}}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:column-reverse;margin-bottom:var(--spacing-row);order:var(--region-order-pane-start)}}@media screen and (min-width:768px){.prc-PageLayout-PaneWrapper-nGO0U:where([data-is-hidden-regular=true]){display:none}.prc-PageLayout-PaneWrapper-nGO0U{margin-bottom:0!important;margin-top:0!important;width:auto}.prc-PageLayout-PaneWrapper-nGO0U:where([data-sticky]){max-height:100vh;position:sticky;top:var(--offset-header)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:row-reverse;margin-left:var(--spacing-column);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:row;margin-right:var(--spacing-column);order:var(--region-order-pane-start)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position-regular=end]){flex-direction:row-reverse;margin-left:var(--spacing-column);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position-regular=start]){flex-direction:row;margin-right:var(--spacing-column);order:var(--region-order-pane-start)}}@media (min-width:87.5rem){.prc-PageLayout-PaneWrapper-nGO0U:where([data-is-hidden-wide=true]){display:none}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position-wide=end]){flex-direction:row-reverse;margin-left:var(--spacing-column);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position-wide=start]){flex-direction:row;margin-right:var(--spacing-column);order:var(--region-order-pane-start)}}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=start]){margin-left:var(--spacing)}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=end]){margin-right:var(--spacing)}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position-narrow=start]){margin-left:var(--spacing);margin-right:0}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position-narrow=end]){margin-left:0;margin-right:var(--spacing)}}@media (min-width:48rem){.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position-regular=start]){margin-left:var(--spacing);margin-right:0}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position-regular=end]){margin-left:0;margin-right:var(--spacing)}}@media (min-width:87.5rem){.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position-wide=start]){margin-left:var(--spacing);margin-right:0}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position-wide=end]){margin-left:0;margin-right:var(--spacing)}}.prc-PageLayout-Pane-Vl5LI{padding:var(--spacing);width:var(--pane-width-size)}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI{overflow:auto}}.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:100%}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width))}}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=start]){margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=end]){margin-bottom:var(--spacing)}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position-narrow=start]){margin-bottom:0;margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position-narrow=end]){margin-bottom:var(--spacing);margin-top:0}}@media (min-width:48rem){.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position-regular=start]){margin-bottom:0;margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position-regular=end]){margin-bottom:var(--spacing);margin-top:0}}@media (min-width:87.5rem){.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position-wide=start]){margin-bottom:0;margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position-wide=end]){margin-bottom:var(--spacing);margin-top:0}}.prc-PageLayout-FooterWrapper-WZwgZ{margin-top:var(--spacing);order:var(--region-order-footer);width:100%}.prc-PageLayout-FooterWrapper-WZwgZ:where([data-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-FooterWrapper-WZwgZ:where([data-hidden-narrow=true]){display:none}}@media (min-width:48rem){.prc-PageLayout-FooterWrapper-WZwgZ:where([data-hidden-regular=true]){display:none}}@media (min-width:87.5rem){.prc-PageLayout-FooterWrapper-WZwgZ:where([data-hidden-wide=true]){display:none}}.prc-PageLayout-FooterHorizontalDivider-sNLmj{margin-bottom:var(--spacing)}.prc-PageLayout-FooterContent-UFWGW{padding:var(--spacing)}.prc-PageLayout-DraggableHandle-zPw82{background-color:transparent;cursor:col-resize;inset:0 -2px;position:absolute;transition-delay:.1s}.prc-PageLayout-DraggableHandle-zPw82:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle))}.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true],.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true]:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis))}
|
|
2
|
-
/*# sourceMappingURL=PageLayout-28a244f7.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/PageLayout/PageLayout.module.css"],"names":[],"mappings":"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","file":"PageLayout-28a244f7.css","sourcesContent":["/* Maintain resize cursor while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] {\n cursor: col-resize;\n}\n\n/* Disable text selection while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] * {\n user-select: none;\n}\n\n.PageLayoutRoot {\n /* Region Order */\n --region-order-header: 0;\n --region-order-pane-start: 1;\n --region-order-content: 2;\n --region-order-pane-end: 3;\n --region-order-footer: 4;\n\n /* Spacing Values */\n --spacing-none: 0;\n --spacing-condensed: var(--base-size-16);\n --spacing-normal: var(--base-size-16);\n\n @media screen and (min-width: 1012px) {\n --spacing-normal: var(--base-size-24);\n }\n\n /* Pane Width Values */\n --pane-width-small: 100%;\n --pane-width-medium: 100%;\n --pane-width-large: 100%;\n --pane-max-width-diff: 511px;\n\n @media screen and (min-width: 768px) {\n --pane-width-small: 240px;\n --pane-width-medium: 256px;\n --pane-width-large: 256px;\n }\n\n @media screen and (min-width: 1012px) {\n --pane-width-small: 256px;\n --pane-width-medium: 296px;\n --pane-width-large: 320px;\n }\n\n @media screen and (min-width: 1280px) {\n --pane-max-width-diff: 959px;\n }\n\n /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */\n --spacing: 0;\n --spacing-row: 0;\n --spacing-column: 0;\n --spacing-divider: 0;\n --offset-header: 0;\n --pane-width: 0;\n --pane-min-width: 0;\n --pane-max-width: 0;\n --pane-width-custom: 0;\n --pane-width-size: 0;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.PageLayoutWrapper {\n display: flex;\n margin-right: auto;\n margin-left: auto;\n flex-wrap: wrap;\n /* the wrapper should match the Root's dimensions by default */\n width: 100%;\n height: 100%;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PageLayoutContent {\n display: flex;\n flex: 1 1 100%;\n flex-wrap: wrap;\n max-width: 100%;\n}\n\n.HorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: calc(-1 * var(--spacing-divider));\n /* stylelint-disable-next-line primer/spacing */\n margin-left: calc(-1 * var(--spacing-divider));\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-variant-narrow='none']) {\n display: none;\n }\n\n &:where([data-variant-narrow='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-narrow='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-variant-regular='none']) {\n display: none;\n }\n\n &:where([data-variant-regular='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-regular='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-variant-wide='none']) {\n display: none;\n }\n\n &:where([data-variant-wide='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-wide='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n }\n\n @media screen and (min-width: 768px) {\n margin-right: 0 !important;\n margin-left: 0 !important;\n }\n}\n\n.VerticalDivider {\n position: relative;\n height: 100%;\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-variant-narrow='none']) {\n display: none;\n }\n\n &:where([data-variant-narrow='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-narrow='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-variant-regular='none']) {\n display: none;\n }\n\n &:where([data-variant-regular='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-regular='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-variant-wide='none']) {\n display: none;\n }\n\n &:where([data-variant-wide='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-wide='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n }\n}\n\n.Header {\n width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n\n &:where([data-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-hidden-wide='true']) {\n display: none;\n }\n }\n}\n\n.HeaderContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.HeaderHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n}\n\n.ContentWrapper {\n display: flex;\n\n /* Hack to prevent overflowing content from pushing the pane region to the next line */\n min-width: 1px;\n flex-direction: column;\n order: var(--region-order-content);\n\n /* Set flex-basis to 0% to allow flex-grow to control the width of the content region.\n Without this, the content region could wrap onto a different line\n than the pane region on wide viewports if its contents are too wide. */\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-is-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-is-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-is-hidden-wide='true']) {\n display: none;\n }\n }\n}\n\n.Content {\n width: 100%;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n margin-right: auto;\n margin-left: auto;\n flex-grow: 1;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PaneWrapper {\n display: flex;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-is-hidden-narrow='true']) {\n display: none;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing-row);\n flex-direction: column;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing-row);\n flex-direction: column-reverse;\n order: var(--region-order-pane-start);\n }\n }\n\n /* Base position (non-responsive) - applies at narrow viewports only */\n @media (--viewportRange-narrow) {\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing-row);\n flex-direction: column;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing-row);\n flex-direction: column-reverse;\n order: var(--region-order-pane-start);\n }\n }\n\n @media screen and (min-width: 768px) {\n &:where([data-is-hidden-regular='true']) {\n display: none;\n }\n\n width: auto;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n\n &:where([data-sticky]) {\n position: sticky;\n /* stylelint-disable-next-line primer/spacing */\n top: var(--offset-header);\n max-height: 100vh;\n }\n\n /* Base position (non-responsive) - applies at regular+ viewports */\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-is-hidden-wide='true']) {\n display: none;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n }\n}\n\n.PaneVerticalDivider {\n /* Base position (non-responsive) */\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n }\n\n /* Responsive position */\n @media (--viewportRange-narrow) {\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n\n @media (--viewportRange-regular) {\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n}\n\n.Pane {\n width: var(--pane-width-size);\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n\n @media screen and (min-width: 768px) {\n overflow: auto;\n }\n\n &:where([data-resizable]) {\n width: 100%;\n\n @media screen and (min-width: 768px) {\n width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width));\n }\n }\n}\n\n.PaneHorizontalDivider {\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n }\n\n /* Responsive position */\n @media (--viewportRange-narrow) {\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n\n @media (--viewportRange-regular) {\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n}\n\n.FooterWrapper {\n width: 100%;\n order: var(--region-order-footer);\n\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n\n &:where([data-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-hidden-wide='true']) {\n display: none;\n }\n }\n}\n\n.FooterHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n}\n\n.FooterContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.DraggableHandle {\n position: absolute;\n inset: 0 -2px;\n cursor: col-resize;\n background-color: transparent;\n transition-delay: 0.1s;\n}\n\n.DraggableHandle:hover {\n background-color: var(--bgColor-neutral-muted);\n}\n\n.DraggableHandle[data-dragging='true'] {\n background-color: var(--bgColor-accent-emphasis);\n}\n\n.DraggableHandle[data-dragging='true']:hover {\n background-color: var(--bgColor-accent-emphasis);\n}\n"]}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { Hex } from './IssueLabel';
|
|
2
|
-
/**
|
|
3
|
-
* transforms a hex color provided by the user into a color object with background and text colors
|
|
4
|
-
* @param colorHex — the hex color provided by the user
|
|
5
|
-
* @returns
|
|
6
|
-
*/
|
|
7
|
-
export declare const getColorsFromHex: (colorHex: Hex) => React.CSSProperties | undefined;
|
|
8
|
-
//# sourceMappingURL=getColorFromHex.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"getColorFromHex.d.ts","sourceRoot":"","sources":["../../../src/experimental/IssueLabel/getColorFromHex.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,cAAc,CAAA;AAErC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU,GAAG,KAAG,KAAK,CAAC,aAAa,GAAG,SA+EtE,CAAA"}
|
|
@@ -1,185 +0,0 @@
|
|
|
1
|
-
import { getContrast } from 'color2k';
|
|
2
|
-
import { Hsluv } from 'hsluv';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* transforms a hex color provided by the user into a color object with background and text colors
|
|
6
|
-
* @param colorHex — the hex color provided by the user
|
|
7
|
-
* @returns
|
|
8
|
-
*/
|
|
9
|
-
const getColorsFromHex = colorHex => {
|
|
10
|
-
// start values for light mode
|
|
11
|
-
const lightBgLightness = 96;
|
|
12
|
-
const lightLightnessIncrement = -1;
|
|
13
|
-
const lightRatio = 4.5;
|
|
14
|
-
const darkBgLightness = 16;
|
|
15
|
-
const darkLightnessIncrement = 1;
|
|
16
|
-
const darkRatio = 5.5;
|
|
17
|
-
|
|
18
|
-
// get hue and saturation value from hex color
|
|
19
|
-
// eslint-disable-next-line prefer-const
|
|
20
|
-
let {
|
|
21
|
-
h,
|
|
22
|
-
s
|
|
23
|
-
} = hexToHsluv(colorHex);
|
|
24
|
-
|
|
25
|
-
// avoid intense bright colors
|
|
26
|
-
// Hue range: 58 - 198
|
|
27
|
-
// 58 marks the transition from yellow to yellow-green
|
|
28
|
-
// 198 makes the tranisiton from cyan to blue
|
|
29
|
-
// yellow, yellow-green, green, cyan, blue tend to be bright and intense
|
|
30
|
-
// Setting the hue range of 58 and 198 helps avoid bright colors
|
|
31
|
-
// saturation: represents the intensity of a color, measured as a percentage from 0 to 100. Capping at 70% to avoid intense bright colors
|
|
32
|
-
if (h >= 58 && h <= 198 && s > 70) {
|
|
33
|
-
s = 70;
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* creating a background color from the provided hex color
|
|
37
|
-
*/
|
|
38
|
-
const {
|
|
39
|
-
colorHex: darkBackgroundColor,
|
|
40
|
-
lightness: darkCurrentBgLightness
|
|
41
|
-
} = getColorWithContrast(hsluvToHex({
|
|
42
|
-
h,
|
|
43
|
-
s,
|
|
44
|
-
l: darkBgLightness
|
|
45
|
-
}), '#0d1117',
|
|
46
|
-
// dark mode background color
|
|
47
|
-
1.2, darkLightnessIncrement);
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* creating a background color from the provided hex color
|
|
51
|
-
*/
|
|
52
|
-
const {
|
|
53
|
-
colorHex: lightBackgroundColor,
|
|
54
|
-
lightness: lightCurrentBgLightness
|
|
55
|
-
} = getColorWithContrast(hsluvToHex({
|
|
56
|
-
h,
|
|
57
|
-
s,
|
|
58
|
-
l: lightBgLightness
|
|
59
|
-
}), '#ffffff',
|
|
60
|
-
// light mode background color
|
|
61
|
-
1.2, lightLightnessIncrement);
|
|
62
|
-
|
|
63
|
-
// avoid intense bright colors
|
|
64
|
-
if (h >= 58 && h <= 316 && s > 80) {
|
|
65
|
-
s = 80;
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* creating a text color from with a contrast ratio of at least 4.5 to the generated background color
|
|
69
|
-
*/
|
|
70
|
-
const {
|
|
71
|
-
colorHex: darkTextColor
|
|
72
|
-
} = getColorWithContrast(hsluvToHex({
|
|
73
|
-
h,
|
|
74
|
-
s,
|
|
75
|
-
l: 50
|
|
76
|
-
}), darkBackgroundColor, darkRatio, darkLightnessIncrement);
|
|
77
|
-
const {
|
|
78
|
-
colorHex: lightTextColor
|
|
79
|
-
} = getColorWithContrast(hsluvToHex({
|
|
80
|
-
h,
|
|
81
|
-
s,
|
|
82
|
-
l: 50
|
|
83
|
-
}), lightBackgroundColor, lightRatio, lightLightnessIncrement);
|
|
84
|
-
return {
|
|
85
|
-
'--label-bgColor-light-rest': lightBackgroundColor,
|
|
86
|
-
'--label-bgColor-light-hover': hsluvToHex({
|
|
87
|
-
h,
|
|
88
|
-
s,
|
|
89
|
-
l: lightCurrentBgLightness + 4 * lightLightnessIncrement
|
|
90
|
-
}),
|
|
91
|
-
'--label-bgColor-light-active': hsluvToHex({
|
|
92
|
-
h,
|
|
93
|
-
s,
|
|
94
|
-
l: lightCurrentBgLightness + 8 * lightLightnessIncrement
|
|
95
|
-
}),
|
|
96
|
-
'--label-fgColor-light': lightTextColor,
|
|
97
|
-
'--label-fgColor-light-hover': lightTextColor,
|
|
98
|
-
'--label-fgColor-light-active': lightTextColor,
|
|
99
|
-
'--label-bgColor-dark-rest': darkBackgroundColor,
|
|
100
|
-
'--label-bgColor-dark-hover': hsluvToHex({
|
|
101
|
-
h,
|
|
102
|
-
s,
|
|
103
|
-
l: darkCurrentBgLightness + 4 * darkLightnessIncrement
|
|
104
|
-
}),
|
|
105
|
-
'--label-bgColor-dark-active': hsluvToHex({
|
|
106
|
-
h,
|
|
107
|
-
s,
|
|
108
|
-
l: darkCurrentBgLightness + 8 * darkLightnessIncrement
|
|
109
|
-
}),
|
|
110
|
-
'--label-fgColor-dark': darkTextColor,
|
|
111
|
-
'--label-fgColor-dark-hover': darkTextColor,
|
|
112
|
-
'--label-fgColor-dark-active': darkTextColor
|
|
113
|
-
};
|
|
114
|
-
};
|
|
115
|
-
/**
|
|
116
|
-
* Changes the lightness of a hex color until the contrast ratio is reached and returns the new hex color
|
|
117
|
-
* @param colorHex — initial hex color
|
|
118
|
-
* @param bgHex — color to check the contrast against
|
|
119
|
-
* @param contrastRatio — the contrast ratio to reach
|
|
120
|
-
* @param increment — the direction to change the lightness depending on the color scheme
|
|
121
|
-
* @returns the new hex color
|
|
122
|
-
*/
|
|
123
|
-
const getColorWithContrast = (fgColor, bgColor, contrastRatio, increment) => {
|
|
124
|
-
const hsluv = hexToHsluv(fgColor);
|
|
125
|
-
let color = fgColor;
|
|
126
|
-
|
|
127
|
-
// change lightness until contrast is reached
|
|
128
|
-
while (getContrast(color, bgColor) < contrastRatio && hsluv.l > 0 && hsluv.l < 100) {
|
|
129
|
-
hsluv.l += increment;
|
|
130
|
-
color = hsluvToHex(hsluv);
|
|
131
|
-
}
|
|
132
|
-
return {
|
|
133
|
-
colorHex: color,
|
|
134
|
-
lightness: hsluv.l
|
|
135
|
-
};
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* Takes a hex value and returns the hue, saturation and lightness for HSLuv as an object
|
|
140
|
-
* @param hex user provided hex string
|
|
141
|
-
* @returns an object with the hue, saturation and lightness values
|
|
142
|
-
*/
|
|
143
|
-
const hexToHsluv = hex => {
|
|
144
|
-
// convert hex to hsluv
|
|
145
|
-
const color = new Hsluv();
|
|
146
|
-
color.hex = hex;
|
|
147
|
-
color.hexToHsluv();
|
|
148
|
-
// extract h, s and l values
|
|
149
|
-
const {
|
|
150
|
-
hsluv_h: h,
|
|
151
|
-
hsluv_s: s,
|
|
152
|
-
hsluv_l: l
|
|
153
|
-
} = color;
|
|
154
|
-
// return h, s, l as an object
|
|
155
|
-
return {
|
|
156
|
-
h,
|
|
157
|
-
s,
|
|
158
|
-
l
|
|
159
|
-
};
|
|
160
|
-
};
|
|
161
|
-
/**
|
|
162
|
-
* Takes an object with hue, saturation and lightness values and returns a hex string
|
|
163
|
-
* @param hex user provided hex string
|
|
164
|
-
* @returns an object with the hue, saturation and lightness values
|
|
165
|
-
*/
|
|
166
|
-
const hsluvToHex = ({
|
|
167
|
-
h,
|
|
168
|
-
s,
|
|
169
|
-
l
|
|
170
|
-
}) => {
|
|
171
|
-
// create a new HSLuv color object and assign values
|
|
172
|
-
const color = new Hsluv();
|
|
173
|
-
// eslint-disable-next-line camelcase
|
|
174
|
-
color.hsluv_h = h;
|
|
175
|
-
// eslint-disable-next-line camelcase
|
|
176
|
-
color.hsluv_s = s;
|
|
177
|
-
// eslint-disable-next-line camelcase
|
|
178
|
-
color.hsluv_l = l;
|
|
179
|
-
// convert hsluv to hex
|
|
180
|
-
color.hsluvToHex();
|
|
181
|
-
// return hex string
|
|
182
|
-
return color.hex;
|
|
183
|
-
};
|
|
184
|
-
|
|
185
|
-
export { getColorsFromHex };
|