diff --git a/.changeset/breezy-trainers-drop.md b/.changeset/breezy-trainers-drop.md new file mode 100644 index 00000000000..556c1b71326 --- /dev/null +++ b/.changeset/breezy-trainers-drop.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Updates SegmentedControl styles to use component primitives. diff --git a/package-lock.json b/package-lock.json index a6c699015eb..d615d519604 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@primer/behaviors": "^1.1.1", "@primer/octicons-react": "^17.3.0", - "@primer/primitives": "7.8.4", + "@primer/primitives": "7.9.0", "@radix-ui/react-polymorphic": "^0.0.14", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", @@ -5607,9 +5607,9 @@ } }, "node_modules/@primer/primitives": { - "version": "7.8.4", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.8.4.tgz", - "integrity": "sha512-cXmnhKBvrwbP3FYR9oxNYx3s8y2svsQLbDNZuoGcsZJLQ6RD3HfQ9ZtXgbyTbTYTyfPvkyd0pkQLI7tRJSc5kg==" + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.9.0.tgz", + "integrity": "sha512-ZHHfwB0z0z6nDJp263gyGIClYDy+rl0nwqyi4qhcv3Cxhkmtf+If2KVjr6FQqBBFfi1wQwUzaax2FBvfEMFBnw==" }, "node_modules/@radix-ui/react-polymorphic": { "version": "0.0.14", @@ -39103,9 +39103,9 @@ "requires": {} }, "@primer/primitives": { - "version": "7.8.4", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.8.4.tgz", - "integrity": "sha512-cXmnhKBvrwbP3FYR9oxNYx3s8y2svsQLbDNZuoGcsZJLQ6RD3HfQ9ZtXgbyTbTYTyfPvkyd0pkQLI7tRJSc5kg==" + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.9.0.tgz", + "integrity": "sha512-ZHHfwB0z0z6nDJp263gyGIClYDy+rl0nwqyi4qhcv3Cxhkmtf+If2KVjr6FQqBBFfi1wQwUzaax2FBvfEMFBnw==" }, "@radix-ui/react-polymorphic": { "version": "0.0.14", diff --git a/package.json b/package.json index 11b02d75c3c..a5dc5940308 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "dependencies": { "@primer/behaviors": "^1.1.1", "@primer/octicons-react": "^17.3.0", - "@primer/primitives": "7.8.4", + "@primer/primitives": "7.9.0", "@radix-ui/react-polymorphic": "^0.0.14", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx index df44db70f32..b5a35b44cf5 100644 --- a/src/SegmentedControl/SegmentedControl.tsx +++ b/src/SegmentedControl/SegmentedControl.tsx @@ -22,16 +22,13 @@ type SegmentedControlProps = { } & SxProp const getSegmentedControlStyles = (props?: SegmentedControlProps) => ({ - // TODO: update color primitive name(s) to use different primitives: - // - try to use general 'control' primitives (e.g.: https://primer.style/primitives/spacing#ui-control) - // - when that's not possible, use specific to segmented controls - backgroundColor: 'switchTrack.bg', // TODO: update primitive when it is available + backgroundColor: 'segmentedControl.bg', borderColor: 'border.default', borderRadius: 2, borderStyle: 'solid', borderWidth: 1, display: props?.fullWidth ? 'flex' : 'inline-flex', - height: '32px' // TODO: use primitive `primer.control.medium.size` when it is available + height: '32px' // TODO: use primitive `control.medium.size` when it is available }) const Root: React.FC = ({ diff --git a/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap b/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap index 637c3c928bd..fd92c0bfb14 100644 --- a/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap +++ b/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap @@ -44,7 +44,7 @@ exports[`SegmentedControl renders consistently 1`] = ` -ms-flex-align: center; align-items: center; background-color: #f6f8fa; - border-color: #8c959f; + border-color: #6e7781; border-style: solid; border-width: 1px; border-radius: var(--segmented-control-outer-radius); @@ -157,11 +157,11 @@ exports[`SegmentedControl renders consistently 1`] = ` } .c2:hover .segmentedControl-content { - background-color: rgba(208,215,222,0.32); + background-color: rgba(175,184,193,0.2); } .c2:active .segmentedControl-content { - background-color: rgba(208,215,222,0.48); + background-color: rgba(175,184,193,0.4); } .c2:first-child { @@ -256,11 +256,11 @@ exports[`SegmentedControl renders consistently 1`] = ` } .c3:hover .segmentedControl-content { - background-color: rgba(208,215,222,0.32); + background-color: rgba(175,184,193,0.2); } .c3:active .segmentedControl-content { - background-color: rgba(208,215,222,0.48); + background-color: rgba(175,184,193,0.4); } .c3:first-child { diff --git a/src/SegmentedControl/getSegmentedControlStyles.ts b/src/SegmentedControl/getSegmentedControlStyles.ts index c69dbeb9413..bac77d60a1d 100644 --- a/src/SegmentedControl/getSegmentedControlStyles.ts +++ b/src/SegmentedControl/getSegmentedControlStyles.ts @@ -45,14 +45,14 @@ export const getSegmentedControlButtonStyles = ( padding: props?.selected ? 0 : 'var(--segmented-control-button-bg-inset)', position: 'relative', ...(props?.isIconOnly && { - height: 'var(--primer-control-medium-size, 32px)', - width: 'var(--primer-control-medium-size, 32px)' + height: '32px', // TODO: use primitive `control.medium.size` when it is available + width: '32px' // TODO: use primitive `control.medium.size` when it is available }), '.segmentedControl-content': { alignItems: 'center', backgroundColor: props?.selected ? 'btn.bg' : 'transparent', - borderColor: props?.selected ? '#8c959f' : 'transparent', // TODO: use a functional primitive for the selected border color when it is available + borderColor: props?.selected ? 'segmentedControl.button.selected.border' : 'transparent', borderStyle: 'solid', borderWidth: 1, borderRadius: props?.selected @@ -76,11 +76,11 @@ export const getSegmentedControlButtonStyles = ( }, ':hover .segmentedControl-content': { - backgroundColor: props?.selected ? undefined : 'actionListItem.default.hoverBg' // TODO: replace with a functional primitive + backgroundColor: props?.selected ? undefined : 'segmentedControl.button.hover.bg' }, ':active .segmentedControl-content': { - backgroundColor: props?.selected ? undefined : 'actionListItem.default.activeBg' // TODO: replace with a functional primitive + backgroundColor: props?.selected ? undefined : 'segmentedControl.button.active.bg' }, // Icon-only buttons render the button inside of an element rendered by the Tooltip component. diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap index 7ca1df5f5b9..c7e7b8e7ea1 100644 --- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap +++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap @@ -90,7 +90,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = ` .c1.variant-normal > .c0[aria-current='page']::before, .c1.variant-normal > .c0[aria-selected='true']::before { - background-color: #FD8C73; + background-color: #fd8c73; } .c1.variant-lightweight > .c0 { diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap index aa17839844d..400ce2f4e58 100644 --- a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap +++ b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap @@ -30,7 +30,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a .c0.PRC-selected { color: #24292f; - border-bottom-color: #FD8C73; + border-bottom-color: #fd8c73; } .c0.PRC-selected .PRC-UnderlineNav-octicon { @@ -90,7 +90,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = ` .c0.PRC-selected { color: #24292f; - border-bottom-color: #FD8C73; + border-bottom-color: #fd8c73; } .c0.PRC-selected .PRC-UnderlineNav-octicon { @@ -148,7 +148,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = ` .c0.PRC-selected { color: #24292f; - border-bottom-color: #FD8C73; + border-bottom-color: #fd8c73; } .c0.PRC-selected .PRC-UnderlineNav-octicon { diff --git a/src/__tests__/__snapshots__/themePreval.test.ts.snap b/src/__tests__/__snapshots__/themePreval.test.ts.snap index 35700b74508..69873d51e74 100644 --- a/src/__tests__/__snapshots__/themePreval.test.ts.snap +++ b/src/__tests__/__snapshots__/themePreval.test.ts.snap @@ -3,7 +3,7 @@ exports[`snapshot theme-preval.js 1`] = ` "// this file was prevaled // This file needs to be a JavaScript file using CommonJS to be compatible with preval -// Cache bust: 2022-07-20 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file) +// Cache bust: 2022-07-25 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file) module.exports = { \\"animation\\": { \\"easeOutCubic\\": \\"cubic-bezier(0.33, 1, 0.68, 1)\\" @@ -47,15 +47,15 @@ module.exports = { \\"addition\\": { \\"numText\\": \\"#24292f\\", \\"fg\\": \\"#24292f\\", - \\"numBg\\": \\"#CCFFD8\\", - \\"lineBg\\": \\"#E6FFEC\\", - \\"wordBg\\": \\"#ABF2BC\\" + \\"numBg\\": \\"#ccffd8\\", + \\"lineBg\\": \\"#e6ffec\\", + \\"wordBg\\": \\"#abf2bc\\" }, \\"deletion\\": { \\"numText\\": \\"#24292f\\", \\"fg\\": \\"#24292f\\", - \\"numBg\\": \\"#FFD7D5\\", - \\"lineBg\\": \\"#FFEBE9\\", + \\"numBg\\": \\"#ffd7d5\\", + \\"lineBg\\": \\"#ffebe9\\", \\"wordBg\\": \\"rgba(255,129,130,0.4)\\" }, \\"hunk\\": { @@ -94,7 +94,7 @@ module.exports = { \\"markupItalic\\": \\"#24292f\\", \\"markupBold\\": \\"#24292f\\", \\"markupDeletedText\\": \\"#82071e\\", - \\"markupDeletedBg\\": \\"#FFEBE9\\", + \\"markupDeletedBg\\": \\"#ffebe9\\", \\"markupInsertedText\\": \\"#116329\\", \\"markupInsertedBg\\": \\"#dafbe1\\", \\"markupChangedText\\": \\"#953800\\", @@ -348,7 +348,7 @@ module.exports = { }, \\"danger\\": { \\"hoverBg\\": \\"rgba(255,235,233,0.64)\\", - \\"activeBg\\": \\"#FFEBE9\\", + \\"activeBg\\": \\"#ffebe9\\", \\"hoverText\\": \\"#cf222e\\" } }, @@ -368,6 +368,20 @@ module.exports = { \\"disabledBg\\": \\"#6e7781\\" } }, + \\"segmentedControl\\": { + \\"bg\\": \\"#eaeef2\\", + \\"button\\": { + \\"hover\\": { + \\"bg\\": \\"rgba(175,184,193,0.2)\\" + }, + \\"active\\": { + \\"bg\\": \\"rgba(175,184,193,0.4)\\" + }, + \\"selected\\": { + \\"border\\": \\"#6e7781\\" + } + } + }, \\"fg\\": { \\"default\\": \\"#24292f\\", \\"muted\\": \\"#57606a\\", @@ -419,7 +433,7 @@ module.exports = { \\"fg\\": \\"#cf222e\\", \\"emphasis\\": \\"#cf222e\\", \\"muted\\": \\"rgba(255,129,130,0.4)\\", - \\"subtle\\": \\"#FFEBE9\\" + \\"subtle\\": \\"#ffebe9\\" }, \\"open\\": { \\"fg\\": \\"#1a7f37\\", @@ -431,7 +445,7 @@ module.exports = { \\"fg\\": \\"#cf222e\\", \\"emphasis\\": \\"#cf222e\\", \\"muted\\": \\"rgba(255,129,130,0.4)\\", - \\"subtle\\": \\"#FFEBE9\\" + \\"subtle\\": \\"#ffebe9\\" }, \\"done\\": { \\"fg\\": \\"#8250df\\", @@ -454,7 +468,7 @@ module.exports = { \\"sticky\\": \\"rgba(255,255,255,0.95)\\" }, \\"border\\": { - \\"active\\": \\"#FD8C73\\", + \\"active\\": \\"#fd8c73\\", \\"contrast\\": \\"rgba(27,31,36,0.1)\\" } } @@ -526,16 +540,16 @@ module.exports = { }, \\"diffBlob\\": { \\"addition\\": { - \\"numText\\": \\"#0E1116\\", + \\"numText\\": \\"#0e1116\\", \\"fg\\": \\"#ffffff\\", - \\"numBg\\": \\"#CCFFD8\\", - \\"lineBg\\": \\"#E6FFEC\\", + \\"numBg\\": \\"#ccffd8\\", + \\"lineBg\\": \\"#e6ffec\\", \\"wordBg\\": \\"#055d20\\" }, \\"deletion\\": { - \\"numText\\": \\"#0E1116\\", + \\"numText\\": \\"#0e1116\\", \\"fg\\": \\"#ffffff\\", - \\"numBg\\": \\"#FFD7D5\\", + \\"numBg\\": \\"#ffd7d5\\", \\"lineBg\\": \\"#fff0ee\\", \\"wordBg\\": \\"#a0111f\\" }, @@ -543,7 +557,7 @@ module.exports = { \\"numBg\\": \\"#9cd7ff\\" }, \\"expander\\": { - \\"icon\\": \\"#0E1116\\" + \\"icon\\": \\"#0e1116\\" } }, \\"diffstat\\": { @@ -556,52 +570,52 @@ module.exports = { }, \\"prettylights\\": { \\"syntax\\": { - \\"comment\\": \\"#66707B\\", + \\"comment\\": \\"#66707b\\", \\"constant\\": \\"#023b95\\", \\"entity\\": \\"#622cbc\\", - \\"storageModifierImport\\": \\"#0E1116\\", + \\"storageModifierImport\\": \\"#0e1116\\", \\"entityTag\\": \\"#024c1a\\", \\"keyword\\": \\"#a0111f\\", \\"string\\": \\"#032563\\", \\"variable\\": \\"#702c00\\", \\"brackethighlighterUnmatched\\": \\"#6e011a\\", - \\"invalidIllegalText\\": \\"#FFFFFF\\", + \\"invalidIllegalText\\": \\"#ffffff\\", \\"invalidIllegalBg\\": \\"#6e011a\\", - \\"carriageReturnText\\": \\"#FFFFFF\\", + \\"carriageReturnText\\": \\"#ffffff\\", \\"carriageReturnBg\\": \\"#a0111f\\", \\"stringRegexp\\": \\"#024c1a\\", \\"markupList\\": \\"#2e1800\\", \\"markupHeading\\": \\"#023b95\\", - \\"markupItalic\\": \\"#0E1116\\", - \\"markupBold\\": \\"#0E1116\\", + \\"markupItalic\\": \\"#0e1116\\", + \\"markupBold\\": \\"#0e1116\\", \\"markupDeletedText\\": \\"#6e011a\\", \\"markupDeletedBg\\": \\"#fff0ee\\", \\"markupInsertedText\\": \\"#024c1a\\", \\"markupInsertedBg\\": \\"#d2fedb\\", \\"markupChangedText\\": \\"#702c00\\", \\"markupChangedBg\\": \\"#ffc67b\\", - \\"markupIgnoredText\\": \\"#E7ECF0\\", + \\"markupIgnoredText\\": \\"#e7ecf0\\", \\"markupIgnoredBg\\": \\"#023b95\\", \\"metaDiffRange\\": \\"#622cbc\\", - \\"brackethighlighterAngle\\": \\"#4B535D\\", - \\"sublimelinterGutterMark\\": \\"#88929D\\", + \\"brackethighlighterAngle\\": \\"#4b535d\\", + \\"sublimelinterGutterMark\\": \\"#88929d\\", \\"constantOtherReferenceLink\\": \\"#032563\\" } }, \\"codemirror\\": { - \\"text\\": \\"#0E1116\\", + \\"text\\": \\"#0e1116\\", \\"bg\\": \\"#ffffff\\", \\"guttersBg\\": \\"#ffffff\\", \\"guttermarkerText\\": \\"#ffffff\\", - \\"guttermarkerSubtleText\\": \\"#66707B\\", - \\"linenumberText\\": \\"#0E1116\\", - \\"cursor\\": \\"#0E1116\\", + \\"guttermarkerSubtleText\\": \\"#66707b\\", + \\"linenumberText\\": \\"#0e1116\\", + \\"cursor\\": \\"#0e1116\\", \\"selectionBg\\": \\"#368cf9\\", - \\"activelineBg\\": \\"#E7ECF0\\", - \\"matchingbracketText\\": \\"#0E1116\\", + \\"activelineBg\\": \\"#e7ecf0\\", + \\"matchingbracketText\\": \\"#0e1116\\", \\"linesBg\\": \\"#ffffff\\", \\"syntax\\": { - \\"comment\\": \\"#0E1116\\", + \\"comment\\": \\"#0e1116\\", \\"constant\\": \\"#023b95\\", \\"entity\\": \\"#622cbc\\", \\"keyword\\": \\"#a0111f\\", @@ -612,65 +626,65 @@ module.exports = { } }, \\"checks\\": { - \\"bg\\": \\"#0E1116\\", - \\"textPrimary\\": \\"#FFFFFF\\", - \\"textSecondary\\": \\"#88929D\\", + \\"bg\\": \\"#0e1116\\", + \\"textPrimary\\": \\"#ffffff\\", + \\"textSecondary\\": \\"#88929d\\", \\"textLink\\": \\"#368cf9\\", - \\"btnIcon\\": \\"#ACB6C0\\", - \\"btnHoverIcon\\": \\"#FFFFFF\\", + \\"btnIcon\\": \\"#acb6c0\\", + \\"btnHoverIcon\\": \\"#ffffff\\", \\"btnHoverBg\\": \\"rgba(255,255,255,0.125)\\", - \\"inputText\\": \\"#E7ECF0\\", - \\"inputPlaceholderText\\": \\"#88929D\\", - \\"inputFocusText\\": \\"#88929D\\", - \\"inputBg\\": \\"#20252C\\", + \\"inputText\\": \\"#e7ecf0\\", + \\"inputPlaceholderText\\": \\"#88929d\\", + \\"inputFocusText\\": \\"#88929d\\", + \\"inputBg\\": \\"#20252c\\", \\"donutError\\": \\"#d5232c\\", \\"donutPending\\": \\"#956400\\", \\"donutSuccess\\": \\"#117f32\\", - \\"donutNeutral\\": \\"#ACB6C0\\", - \\"dropdownText\\": \\"#ACB6C0\\", - \\"dropdownBg\\": \\"#20252C\\", - \\"dropdownBorder\\": \\"#343B43\\", + \\"donutNeutral\\": \\"#acb6c0\\", + \\"dropdownText\\": \\"#acb6c0\\", + \\"dropdownBg\\": \\"#20252c\\", + \\"dropdownBorder\\": \\"#343b43\\", \\"dropdownShadow\\": \\"rgba(1,4,9,0.3)\\", - \\"dropdownHoverText\\": \\"#FFFFFF\\", - \\"dropdownHoverBg\\": \\"#343B43\\", - \\"dropdownBtnHoverText\\": \\"#FFFFFF\\", - \\"dropdownBtnHoverBg\\": \\"#20252C\\", - \\"scrollbarThumbBg\\": \\"#4B535D\\", - \\"headerLabelText\\": \\"#CED5DC\\", - \\"headerLabelOpenText\\": \\"#FFFFFF\\", - \\"headerBorder\\": \\"#20252C\\", - \\"headerIcon\\": \\"#88929D\\", - \\"lineText\\": \\"#CED5DC\\", + \\"dropdownHoverText\\": \\"#ffffff\\", + \\"dropdownHoverBg\\": \\"#343b43\\", + \\"dropdownBtnHoverText\\": \\"#ffffff\\", + \\"dropdownBtnHoverBg\\": \\"#20252c\\", + \\"scrollbarThumbBg\\": \\"#4b535d\\", + \\"headerLabelText\\": \\"#ced5dc\\", + \\"headerLabelOpenText\\": \\"#ffffff\\", + \\"headerBorder\\": \\"#20252c\\", + \\"headerIcon\\": \\"#88929d\\", + \\"lineText\\": \\"#ced5dc\\", \\"lineNumText\\": \\"rgba(136,146,157,0.75)\\", - \\"lineTimestampText\\": \\"#88929D\\", - \\"lineHoverBg\\": \\"#20252C\\", + \\"lineTimestampText\\": \\"#88929d\\", + \\"lineHoverBg\\": \\"#20252c\\", \\"lineSelectedBg\\": \\"rgba(17,104,227,0.15)\\", \\"lineSelectedNumText\\": \\"#368cf9\\", - \\"lineDtFmText\\": \\"#0E1116\\", + \\"lineDtFmText\\": \\"#0e1116\\", \\"lineDtFmBg\\": \\"#744500\\", \\"gateBg\\": \\"rgba(96,55,0,0.15)\\", - \\"gateText\\": \\"#CED5DC\\", + \\"gateText\\": \\"#ced5dc\\", \\"gateWaitingText\\": \\"#b58407\\", - \\"stepHeaderOpenBg\\": \\"#20252C\\", + \\"stepHeaderOpenBg\\": \\"#20252c\\", \\"stepErrorText\\": \\"#ee5a5d\\", \\"stepWarningText\\": \\"#b58407\\", - \\"loglineText\\": \\"#88929D\\", + \\"loglineText\\": \\"#88929d\\", \\"loglineNumText\\": \\"rgba(136,146,157,0.75)\\", \\"loglineDebugText\\": \\"#a371f7\\", - \\"loglineErrorText\\": \\"#CED5DC\\", + \\"loglineErrorText\\": \\"#ced5dc\\", \\"loglineErrorNumText\\": \\"#ee5a5d\\", \\"loglineErrorBg\\": \\"rgba(134,6,29,0.15)\\", - \\"loglineWarningText\\": \\"#CED5DC\\", + \\"loglineWarningText\\": \\"#ced5dc\\", \\"loglineWarningNumText\\": \\"#b58407\\", \\"loglineWarningBg\\": \\"rgba(96,55,0,0.15)\\", \\"loglineCommandText\\": \\"#368cf9\\", \\"loglineSectionText\\": \\"#26a148\\", \\"ansi\\": { - \\"black\\": \\"#0E1116\\", - \\"blackBright\\": \\"#20252C\\", - \\"white\\": \\"#CED5DC\\", - \\"whiteBright\\": \\"#CED5DC\\", - \\"gray\\": \\"#88929D\\", + \\"black\\": \\"#0e1116\\", + \\"blackBright\\": \\"#20252c\\", + \\"white\\": \\"#ced5dc\\", + \\"whiteBright\\": \\"#ced5dc\\", + \\"gray\\": \\"#88929d\\", \\"red\\": \\"#ee5a5d\\", \\"redBright\\": \\"#ff8e8a\\", \\"green\\": \\"#26a148\\", @@ -686,7 +700,7 @@ module.exports = { } }, \\"project\\": { - \\"headerBg\\": \\"#0E1116\\", + \\"headerBg\\": \\"#0e1116\\", \\"sidebarBg\\": \\"#ffffff\\", \\"gradientIn\\": \\"#ffffff\\", \\"gradientOut\\": \\"rgba(255,255,255,0)\\" @@ -699,14 +713,14 @@ module.exports = { \\"avatar\\": { \\"bg\\": \\"#ffffff\\", \\"border\\": \\"rgba(1,4,9,0.8)\\", - \\"stackFade\\": \\"#ACB6C0\\", - \\"stackFadeMore\\": \\"#CED5DC\\" + \\"stackFade\\": \\"#acb6c0\\", + \\"stackFadeMore\\": \\"#ced5dc\\" }, \\"topicTag\\": { \\"border\\": \\"#0349b4\\" }, \\"counter\\": { - \\"border\\": \\"#20252C\\" + \\"border\\": \\"#20252c\\" }, \\"selectMenu\\": { \\"backdropBorder\\": \\"rgba(0,0,0,0)\\", @@ -715,13 +729,13 @@ module.exports = { }, \\"header\\": { \\"text\\": \\"rgba(255,255,255,0.7)\\", - \\"bg\\": \\"#0E1116\\", - \\"divider\\": \\"#ACB6C0\\", + \\"bg\\": \\"#0e1116\\", + \\"divider\\": \\"#acb6c0\\", \\"logo\\": \\"#ffffff\\" }, \\"headerSearch\\": { - \\"bg\\": \\"#0E1116\\", - \\"border\\": \\"#4B535D\\" + \\"bg\\": \\"#0e1116\\", + \\"border\\": \\"#4b535d\\" }, \\"sidenav\\": { \\"selectedBg\\": \\"#ffffff\\" @@ -733,14 +747,14 @@ module.exports = { \\"disabledBg\\": \\"rgba(172,182,192,0.2)\\" }, \\"timeline\\": { - \\"badgeBg\\": \\"#E7ECF0\\" + \\"badgeBg\\": \\"#e7ecf0\\" }, \\"ansi\\": { - \\"black\\": \\"#0E1116\\", - \\"blackBright\\": \\"#4B535D\\", - \\"white\\": \\"#66707B\\", - \\"whiteBright\\": \\"#88929D\\", - \\"gray\\": \\"#66707B\\", + \\"black\\": \\"#0e1116\\", + \\"blackBright\\": \\"#4b535d\\", + \\"white\\": \\"#66707b\\", + \\"whiteBright\\": \\"#88929d\\", + \\"gray\\": \\"#66707b\\", \\"red\\": \\"#a0111f\\", \\"redBright\\": \\"#86061d\\", \\"green\\": \\"#024c1a\\", @@ -755,15 +769,15 @@ module.exports = { \\"cyanBright\\": \\"#3192aa\\" }, \\"btn\\": { - \\"text\\": \\"#0E1116\\", - \\"bg\\": \\"#E7ECF0\\", + \\"text\\": \\"#0e1116\\", + \\"bg\\": \\"#e7ecf0\\", \\"border\\": \\"rgba(1,4,9,0.8)\\", - \\"hoverBg\\": \\"#CED5DC\\", + \\"hoverBg\\": \\"#ced5dc\\", \\"hoverBorder\\": \\"rgba(1,4,9,0.8)\\", - \\"activeBg\\": \\"#ACB6C0\\", + \\"activeBg\\": \\"#acb6c0\\", \\"activeBorder\\": \\"rgba(1,4,9,0.8)\\", - \\"selectedBg\\": \\"#ACB6C0\\", - \\"focusBg\\": \\"#CED5DC\\", + \\"selectedBg\\": \\"#acb6c0\\", + \\"focusBg\\": \\"#ced5dc\\", \\"focusBorder\\": \\"rgba(1,4,9,0.8)\\", \\"counterBg\\": \\"rgba(1,4,9,0.08)\\", \\"primary\\": { @@ -791,7 +805,7 @@ module.exports = { \\"selectedBg\\": \\"#022f7a\\", \\"selectedBorder\\": \\"#022f7a\\", \\"disabledText\\": \\"rgba(3,73,180,0.5)\\", - \\"disabledBg\\": \\"#E7ECF0\\", + \\"disabledBg\\": \\"#e7ecf0\\", \\"disabledCounterBg\\": \\"rgba(3,73,180,0.05)\\", \\"focusBorder\\": \\"#022f7a\\", \\"counterBg\\": \\"rgba(3,73,180,0.1)\\" @@ -806,7 +820,7 @@ module.exports = { \\"selectedBg\\": \\"#6e011a\\", \\"selectedBorder\\": \\"#6e011a\\", \\"disabledText\\": \\"rgba(160,17,31,0.5)\\", - \\"disabledBg\\": \\"#E7ECF0\\", + \\"disabledBg\\": \\"#e7ecf0\\", \\"disabledCounterBg\\": \\"rgba(160,17,31,0.05)\\", \\"focusBorder\\": \\"#6e011a\\", \\"counterBg\\": \\"rgba(160,17,31,0.1)\\", @@ -815,17 +829,17 @@ module.exports = { } }, \\"underlinenav\\": { - \\"icon\\": \\"#66707B\\", + \\"icon\\": \\"#66707b\\", \\"borderHover\\": \\"rgba(172,182,192,0.2)\\" }, \\"actionListItem\\": { - \\"inlineDivider\\": \\"#88929D\\", + \\"inlineDivider\\": \\"#88929d\\", \\"default\\": { - \\"hoverBg\\": \\"#E7ECF0\\", - \\"hoverBorder\\": \\"#88929D\\", - \\"activeBg\\": \\"#CED5DC\\", - \\"activeBorder\\": \\"#20252C\\", - \\"selectedBg\\": \\"#CED5DC\\" + \\"hoverBg\\": \\"#e7ecf0\\", + \\"hoverBorder\\": \\"#88929d\\", + \\"activeBg\\": \\"#ced5dc\\", + \\"activeBorder\\": \\"#20252c\\", + \\"selectedBg\\": \\"#ced5dc\\" }, \\"danger\\": { \\"hoverBg\\": \\"#a0111f\\", @@ -835,7 +849,7 @@ module.exports = { }, \\"switchTrack\\": { \\"bg\\": \\"#ffffff\\", - \\"border\\": \\"#20252C\\", + \\"border\\": \\"#20252c\\", \\"checked\\": { \\"bg\\": \\"#dff7ff\\", \\"hoverBg\\": \\"#9cd7ff\\", @@ -846,31 +860,45 @@ module.exports = { \\"switchKnob\\": { \\"checked\\": { \\"bg\\": \\"#0349b4\\", - \\"disabledBg\\": \\"#66707B\\" + \\"disabledBg\\": \\"#66707b\\" + } + }, + \\"segmentedControl\\": { + \\"bg\\": \\"#e7ecf0\\", + \\"button\\": { + \\"hover\\": { + \\"bg\\": \\"rgba(172,182,192,0.2)\\" + }, + \\"active\\": { + \\"bg\\": \\"rgba(172,182,192,0.4)\\" + }, + \\"selected\\": { + \\"border\\": \\"#66707b\\" + } } }, \\"fg\\": { - \\"default\\": \\"#0E1116\\", - \\"muted\\": \\"#0E1116\\", - \\"subtle\\": \\"#66707B\\", + \\"default\\": \\"#0e1116\\", + \\"muted\\": \\"#0e1116\\", + \\"subtle\\": \\"#66707b\\", \\"onEmphasis\\": \\"#ffffff\\" }, \\"canvas\\": { \\"default\\": \\"#ffffff\\", \\"overlay\\": \\"#ffffff\\", \\"inset\\": \\"#ffffff\\", - \\"subtle\\": \\"#E7ECF0\\" + \\"subtle\\": \\"#e7ecf0\\" }, \\"border\\": { - \\"default\\": \\"#20252C\\", - \\"muted\\": \\"#88929D\\", + \\"default\\": \\"#20252c\\", + \\"muted\\": \\"#88929d\\", \\"subtle\\": \\"rgba(1,4,9,0.8)\\" }, \\"neutral\\": { - \\"emphasisPlus\\": \\"#0E1116\\", - \\"emphasis\\": \\"#66707B\\", + \\"emphasisPlus\\": \\"#0e1116\\", + \\"emphasis\\": \\"#66707b\\", \\"muted\\": \\"rgba(172,182,192,0.2)\\", - \\"subtle\\": \\"#E7ECF0\\" + \\"subtle\\": \\"#e7ecf0\\" }, \\"accent\\": { \\"fg\\": \\"#0349b4\\", @@ -928,7 +956,7 @@ module.exports = { }, \\"primer\\": { \\"fg\\": { - \\"disabled\\": \\"#88929D\\" + \\"disabled\\": \\"#88929d\\" }, \\"canvas\\": { \\"backdrop\\": \\"rgba(1,4,9,0.5)\\", @@ -1330,6 +1358,20 @@ module.exports = { \\"disabledBg\\": \\"#6e7781\\" } }, + \\"segmentedControl\\": { + \\"bg\\": \\"#eaeef2\\", + \\"button\\": { + \\"hover\\": { + \\"bg\\": \\"rgba(175,184,193,0.2)\\" + }, + \\"active\\": { + \\"bg\\": \\"rgba(175,184,193,0.4)\\" + }, + \\"selected\\": { + \\"border\\": \\"#6e7781\\" + } + } + }, \\"fg\\": { \\"default\\": \\"#24292f\\", \\"muted\\": \\"#57606a\\", @@ -1416,7 +1458,7 @@ module.exports = { \\"sticky\\": \\"rgba(255,255,255,0.95)\\" }, \\"border\\": { - \\"active\\": \\"#FD8C73\\", + \\"active\\": \\"#fd8c73\\", \\"contrast\\": \\"rgba(27,31,36,0.1)\\" } } @@ -1537,7 +1579,7 @@ module.exports = { \\"markupItalic\\": \\"#24292f\\", \\"markupBold\\": \\"#24292f\\", \\"markupDeletedText\\": \\"#82071e\\", - \\"markupDeletedBg\\": \\"#FFEBE9\\", + \\"markupDeletedBg\\": \\"#ffebe9\\", \\"markupInsertedText\\": \\"#0550ae\\", \\"markupInsertedBg\\": \\"#ddf4ff\\", \\"markupChangedText\\": \\"#a40e26\\", @@ -1791,7 +1833,7 @@ module.exports = { }, \\"danger\\": { \\"hoverBg\\": \\"rgba(255,235,233,0.64)\\", - \\"activeBg\\": \\"#FFEBE9\\", + \\"activeBg\\": \\"#ffebe9\\", \\"hoverText\\": \\"#cf222e\\" } }, @@ -1811,6 +1853,20 @@ module.exports = { \\"disabledBg\\": \\"#6e7781\\" } }, + \\"segmentedControl\\": { + \\"bg\\": \\"#eaeef2\\", + \\"button\\": { + \\"hover\\": { + \\"bg\\": \\"rgba(175,184,193,0.2)\\" + }, + \\"active\\": { + \\"bg\\": \\"rgba(175,184,193,0.4)\\" + }, + \\"selected\\": { + \\"border\\": \\"#6e7781\\" + } + } + }, \\"fg\\": { \\"default\\": \\"#24292f\\", \\"muted\\": \\"#57606a\\", @@ -1856,19 +1912,19 @@ module.exports = { \\"fg\\": \\"#cf222e\\", \\"emphasis\\": \\"#cf222e\\", \\"muted\\": \\"rgba(255,129,130,0.4)\\", - \\"subtle\\": \\"#FFEBE9\\" + \\"subtle\\": \\"#ffebe9\\" }, \\"danger\\": { \\"fg\\": \\"#cf222e\\", \\"emphasis\\": \\"#cf222e\\", \\"muted\\": \\"rgba(255,129,130,0.4)\\", - \\"subtle\\": \\"#FFEBE9\\" + \\"subtle\\": \\"#ffebe9\\" }, \\"open\\": { \\"fg\\": \\"#cf222e\\", \\"emphasis\\": \\"#fa4549\\", \\"muted\\": \\"rgba(255,129,130,0.4)\\", - \\"subtle\\": \\"#FFEBE9\\" + \\"subtle\\": \\"#ffebe9\\" }, \\"closed\\": { \\"fg\\": \\"#6e7781\\", @@ -1897,7 +1953,7 @@ module.exports = { \\"sticky\\": \\"rgba(255,255,255,0.95)\\" }, \\"border\\": { - \\"active\\": \\"#FD8C73\\", + \\"active\\": \\"#fd8c73\\", \\"contrast\\": \\"rgba(27,31,36,0.1)\\" } } @@ -2292,6 +2348,20 @@ module.exports = { \\"disabledBg\\": \\"#484f58\\" } }, + \\"segmentedControl\\": { + \\"bg\\": \\"#161b22\\", + \\"button\\": { + \\"hover\\": { + \\"bg\\": \\"#30363d\\" + }, + \\"active\\": { + \\"bg\\": \\"#21262d\\" + }, + \\"selected\\": { + \\"border\\": \\"#6e7681\\" + } + } + }, \\"fg\\": { \\"default\\": \\"#c9d1d9\\", \\"muted\\": \\"#8b949e\\", @@ -2378,7 +2448,7 @@ module.exports = { \\"sticky\\": \\"rgba(13,17,23,0.95)\\" }, \\"border\\": { - \\"active\\": \\"#F78166\\", + \\"active\\": \\"#f78166\\", \\"contrast\\": \\"rgba(255,255,255,0.2)\\" } } @@ -2776,6 +2846,20 @@ module.exports = { \\"disabledBg\\": \\"#545d68\\" } }, + \\"segmentedControl\\": { + \\"bg\\": \\"#2d333b\\", + \\"button\\": { + \\"hover\\": { + \\"bg\\": \\"#444c56\\" + }, + \\"active\\": { + \\"bg\\": \\"#373e47\\" + }, + \\"selected\\": { + \\"border\\": \\"#636e7b\\" + } + } + }, \\"fg\\": { \\"default\\": \\"#adbac7\\", \\"muted\\": \\"#768390\\", @@ -2862,7 +2946,7 @@ module.exports = { \\"sticky\\": \\"rgba(34,39,46,0.95)\\" }, \\"border\\": { - \\"active\\": \\"#EC775C\\", + \\"active\\": \\"#ec775c\\", \\"contrast\\": \\"rgba(205,217,229,0.2)\\" } } @@ -3260,6 +3344,20 @@ module.exports = { \\"disabledBg\\": \\"#7a828e\\" } }, + \\"segmentedControl\\": { + \\"bg\\": \\"#272b33\\", + \\"button\\": { + \\"hover\\": { + \\"bg\\": \\"#525964\\" + }, + \\"active\\": { + \\"bg\\": \\"#272b33\\" + }, + \\"selected\\": { + \\"border\\": \\"#9ea7b3\\" + } + } + }, \\"fg\\": { \\"default\\": \\"#f0f3f6\\", \\"muted\\": \\"#f0f3f6\\", @@ -3346,7 +3444,7 @@ module.exports = { \\"sticky\\": \\"rgba(10,12,16,0.95)\\" }, \\"border\\": { - \\"active\\": \\"#FF967D\\", + \\"active\\": \\"#ff967d\\", \\"contrast\\": \\"rgba(255,255,255,0.2)\\" } } @@ -3744,6 +3842,20 @@ module.exports = { \\"disabledBg\\": \\"#484f58\\" } }, + \\"segmentedControl\\": { + \\"bg\\": \\"#161b22\\", + \\"button\\": { + \\"hover\\": { + \\"bg\\": \\"#30363d\\" + }, + \\"active\\": { + \\"bg\\": \\"#21262d\\" + }, + \\"selected\\": { + \\"border\\": \\"#6e7681\\" + } + } + }, \\"fg\\": { \\"default\\": \\"#c9d1d9\\", \\"muted\\": \\"#8b949e\\", @@ -3830,7 +3942,7 @@ module.exports = { \\"sticky\\": \\"rgba(13,17,23,0.95)\\" }, \\"border\\": { - \\"active\\": \\"#F78166\\", + \\"active\\": \\"#f78166\\", \\"contrast\\": \\"rgba(255,255,255,0.2)\\" } } @@ -4228,6 +4340,20 @@ module.exports = { \\"disabledBg\\": \\"#484f58\\" } }, + \\"segmentedControl\\": { + \\"bg\\": \\"#161b22\\", + \\"button\\": { + \\"hover\\": { + \\"bg\\": \\"#30363d\\" + }, + \\"active\\": { + \\"bg\\": \\"#21262d\\" + }, + \\"selected\\": { + \\"border\\": \\"#6e7681\\" + } + } + }, \\"fg\\": { \\"default\\": \\"#c9d1d9\\", \\"muted\\": \\"#8b949e\\", @@ -4314,7 +4440,7 @@ module.exports = { \\"sticky\\": \\"rgba(13,17,23,0.95)\\" }, \\"border\\": { - \\"active\\": \\"#F78166\\", + \\"active\\": \\"#f78166\\", \\"contrast\\": \\"rgba(255,255,255,0.2)\\" } } diff --git a/src/theme-preval.js b/src/theme-preval.js index b4b074393bd..35b9df3485a 100644 --- a/src/theme-preval.js +++ b/src/theme-preval.js @@ -1,6 +1,6 @@ // @preval // This file needs to be a JavaScript file using CommonJS to be compatible with preval -// Cache bust: 2022-07-20 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file) +// Cache bust: 2022-07-25 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file) const {default: primitives} = require('@primer/primitives') const {partitionColors, fontStack, omitScale} = require('./utils/theme')