@backstage/theme 0.7.1 → 0.7.2-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
const shapes = {
|
|
2
2
|
wave: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1368' height='401' x='0' y='0' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M437 116C223 116 112 0 112 0h1256v400c-82 0-225-21-282-109-112-175-436-175-649-175z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1368 400V282C891-29 788 40 711 161 608 324 121 372 0 361v39h1368z'/%3e%3cpath fill='url(%23paint2_linear)' d='M1368 244v156H0V94c92-24 198-46 375 0l135 41c176 51 195 109 858 109z'/%3e%3cpath fill='url(%23paint3_linear)' d='M1252 400h116c-14-7-35-14-116-16-663-14-837-128-1013-258l-85-61C98 28 46 8 0 0v400h1252z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M-172-98h1671v601H-172z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='602' x2='1093.5' y1='-960.5' y2='272' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='482' x2='480' y1='1058.5' y2='70.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='424' x2='446.1' y1='-587.5' y2='274.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='587' x2='349' y1='-1120.5' y2='341' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`,
|
|
3
3
|
wave2: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1764' height='479' x='-229' y='-6' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M0 400h1350C1321 336 525 33 179-2c-345-34-395 236-408 402H0z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1378 177v223H0V217s219 75 327 52C436 246 717-35 965 45s254 144 413 132z'/%3e%3cpath fill='url(%23paint2_linear)' d='M26 400l-78-16c-170 205-44-6-137-30l-4-1 4 1 137 30c37-45 89-110 159-201 399-514-45 238 1176-50 275-65 354-39 91 267H26z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='431' x2='397.3' y1='-599' y2='372.8' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='236.5' x2='446.6' y1='-586' y2='381.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='851.8' x2='640.4' y1='-867.2' y2='363.7' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`,
|
|
4
|
-
round: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='2269' height='1408' x='-610' y='-509' maskUnits='userSpaceOnUse'%3e%3ccircle cx='1212.8' cy='74.8' r='317.5' fill='url(%23paint0_linear)' transform='rotate(-52 1213 75)'/%3e%3ccircle cx='737.8' cy='445.8' r='317.5' fill='url(%23paint1_linear)' transform='rotate(-116 738 446)'/%3e%3ccircle cx='601.8' cy='52.8' r='418.6' fill='url(%23paint2_linear)' transform='rotate(-117 602 53)'/%3e%3ccircle cx='999.8' cy='364' r='389.1' fill='url(%23paint3_linear)' transform='rotate(31 1000 364)'/%3e%3cellipse cx='-109.2' cy='263.5' fill='url(%23paint4_linear)' rx='429.2' ry='465.8' transform='rotate(-85 -109 264)'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='1301.2' x2='161.4' y1='-1879.7' y2='-969.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='826.2' x2='-313.6' y1='-1508.7' y2='-598.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='718.4' x2='-784.3' y1='-2524' y2='-1324.2' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='1108.2' x2='-288.6' y1='-2031.1' y2='-915.9' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint4_linear' x1='10.4' x2='-1626.5' y1='-2603.8' y2='-1399.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")
|
|
4
|
+
round: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='2269' height='1408' x='-610' y='-509' maskUnits='userSpaceOnUse'%3e%3ccircle cx='1212.8' cy='74.8' r='317.5' fill='url(%23paint0_linear)' transform='rotate(-52 1213 75)'/%3e%3ccircle cx='737.8' cy='445.8' r='317.5' fill='url(%23paint1_linear)' transform='rotate(-116 738 446)'/%3e%3ccircle cx='601.8' cy='52.8' r='418.6' fill='url(%23paint2_linear)' transform='rotate(-117 602 53)'/%3e%3ccircle cx='999.8' cy='364' r='389.1' fill='url(%23paint3_linear)' transform='rotate(31 1000 364)'/%3e%3cellipse cx='-109.2' cy='263.5' fill='url(%23paint4_linear)' rx='429.2' ry='465.8' transform='rotate(-85 -109 264)'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='1301.2' x2='161.4' y1='-1879.7' y2='-969.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='826.2' x2='-313.6' y1='-1508.7' y2='-598.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='718.4' x2='-784.3' y1='-2524' y2='-1324.2' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='1108.2' x2='-288.6' y1='-2031.1' y2='-915.9' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint4_linear' x1='10.4' x2='-1626.5' y1='-2603.8' y2='-1399.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`,
|
|
5
|
+
square: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none' viewBox='0 0 1368 400'%3e%3cmask id='e' width='1744' height='984' x='-179' y='-215' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3e%3cpath fill='url(%23a)' d='M707 334.693h801v322H707z' transform='rotate(-28.703 707 334.693)'/%3e%3cpath fill='url(%23b)' d='M781.853 570.341h583.106v370.945H781.853z' transform='rotate(-117.346 781.853 570.341)'/%3e%3cpath fill='url(%23c)' d='M-131 685.309h583.106v370.945H-131z' transform='rotate(-77.064 -131 685.309)'/%3e%3cpath fill='url(%23d)' d='M-53.026-214.551h1151.06v322H-53.026z' transform='rotate(22.904 -53.026 -214.551)'/%3e%3c/mask%3e%3cg mask='url(%23e)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='a' x1='1219.07' x2='742.968' y1='-495.388' y2='450.243' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='b' x1='1154.63' x2='489.125' y1='-385.914' y2='449.365' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='c' x1='241.773' x2='-423.728' y1='-270.947' y2='564.332' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='d' x1='682.837' x2='312.949' y1='-1044.63' y2='11.113' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`
|
|
5
6
|
};
|
|
6
7
|
const colorVariants = {
|
|
7
8
|
darkGrey: ["#171717", "#383838"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pageTheme.esm.js","sources":["../../src/base/pageTheme.ts"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { PageTheme } from './types';\n\n/**\n * The default predefined burst shapes.\n *\n * @public\n * @remarks\n *\n * How to add a shape:\n *\n * 1. Get the SVG shape from figma, should be ~1400 wide, ~400 high\n * and only the white-to-transparent mask, no colors.\n * 2. Run it through https://jakearchibald.github.io/svgomg/\n * 3. Run that through https://github.com/tigt/mini-svg-data-uri\n * with something like https://npm.runkit.com/mini-svg-data-uri\n * 4. Wrap the output in `url(\"\")`\n * 5. Give it a name and paste it into the `shapes` object below.\n */\nexport const shapes: Record<string, string> = {\n wave: `url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1368' height='401' x='0' y='0' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M437 116C223 116 112 0 112 0h1256v400c-82 0-225-21-282-109-112-175-436-175-649-175z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1368 400V282C891-29 788 40 711 161 608 324 121 372 0 361v39h1368z'/%3e%3cpath fill='url(%23paint2_linear)' d='M1368 244v156H0V94c92-24 198-46 375 0l135 41c176 51 195 109 858 109z'/%3e%3cpath fill='url(%23paint3_linear)' d='M1252 400h116c-14-7-35-14-116-16-663-14-837-128-1013-258l-85-61C98 28 46 8 0 0v400h1252z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M-172-98h1671v601H-172z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='602' x2='1093.5' y1='-960.5' y2='272' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='482' x2='480' y1='1058.5' y2='70.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='424' x2='446.1' y1='-587.5' y2='274.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='587' x2='349' y1='-1120.5' y2='341' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e\")`,\n wave2: `url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1764' height='479' x='-229' y='-6' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M0 400h1350C1321 336 525 33 179-2c-345-34-395 236-408 402H0z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1378 177v223H0V217s219 75 327 52C436 246 717-35 965 45s254 144 413 132z'/%3e%3cpath fill='url(%23paint2_linear)' d='M26 400l-78-16c-170 205-44-6-137-30l-4-1 4 1 137 30c37-45 89-110 159-201 399-514-45 238 1176-50 275-65 354-39 91 267H26z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='431' x2='397.3' y1='-599' y2='372.8' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='236.5' x2='446.6' y1='-586' y2='381.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='851.8' x2='640.4' y1='-867.2' y2='363.7' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e\")`,\n round: `url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='2269' height='1408' x='-610' y='-509' maskUnits='userSpaceOnUse'%3e%3ccircle cx='1212.8' cy='74.8' r='317.5' fill='url(%23paint0_linear)' transform='rotate(-52 1213 75)'/%3e%3ccircle cx='737.8' cy='445.8' r='317.5' fill='url(%23paint1_linear)' transform='rotate(-116 738 446)'/%3e%3ccircle cx='601.8' cy='52.8' r='418.6' fill='url(%23paint2_linear)' transform='rotate(-117 602 53)'/%3e%3ccircle cx='999.8' cy='364' r='389.1' fill='url(%23paint3_linear)' transform='rotate(31 1000 364)'/%3e%3cellipse cx='-109.2' cy='263.5' fill='url(%23paint4_linear)' rx='429.2' ry='465.8' transform='rotate(-85 -109 264)'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='1301.2' x2='161.4' y1='-1879.7' y2='-969.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='826.2' x2='-313.6' y1='-1508.7' y2='-598.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='718.4' x2='-784.3' y1='-2524' y2='-1324.2' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='1108.2' x2='-288.6' y1='-2031.1' y2='-915.9' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint4_linear' x1='10.4' x2='-1626.5' y1='-2603.8' y2='-1399.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e\")`,\n};\n\n/**\n * The color range variants that are used in e.g. colorful bursts.\n *\n * @public\n */\nexport const colorVariants: Record<string, string[]> = {\n darkGrey: ['#171717', '#383838'],\n marineBlue: ['#006D8F', '#0049A1'],\n veryBlue: ['#0027AF', '#270094'],\n rubyRed: ['#98002B', '#8D1134'],\n toastyOrange: ['#BE2200', '#A41D00'],\n purpleSky: ['#8912CA', '#3E00EA'],\n eveningSea: ['#00CFC5', '#035355'],\n teal: ['#005B4B'],\n pinkSea: ['#C8077A', '#C2297D'],\n greens: ['#4BB8A5', '#187656'],\n};\n\n/**\n * Utility to not have to write colors and shapes twice.\n *\n * @public\n * @remarks\n *\n * As the background shapes and colors are decorative, we place them onto the\n * page as a CSS `background-image` instead of an HTML element of its own.\n */\nexport function genPageTheme(props: {\n colors: string[];\n shape: string;\n options?: {\n fontColor?: string;\n };\n}): PageTheme {\n const { colors, shape, options } = props;\n const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors;\n const gradient = `linear-gradient(90deg, ${gradientColors.join(', ')})`;\n const backgroundImage = `${shape}, ${gradient}`;\n const fontColor = options?.fontColor ?? '#FFFFFF';\n\n return {\n colors: colors,\n shape: shape,\n backgroundImage: backgroundImage,\n fontColor: fontColor,\n };\n}\n\n/**\n * All of the builtin page themes.\n *\n * @public\n */\nexport const pageTheme: Record<string, PageTheme> = {\n home: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave }),\n documentation: genPageTheme({\n colors: colorVariants.pinkSea,\n shape: shapes.wave2,\n }),\n tool: genPageTheme({ colors: colorVariants.purpleSky, shape: shapes.round }),\n service: genPageTheme({\n colors: colorVariants.marineBlue,\n shape: shapes.wave,\n }),\n website: genPageTheme({ colors: colorVariants.veryBlue, shape: shapes.wave }),\n library: genPageTheme({ colors: colorVariants.rubyRed, shape: shapes.wave }),\n other: genPageTheme({ colors: colorVariants.darkGrey, shape: shapes.wave }),\n app: genPageTheme({ colors: colorVariants.toastyOrange, shape: shapes.wave }),\n apis: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave2 }),\n card: genPageTheme({ colors: colorVariants.greens, shape: shapes.wave }),\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pageTheme.esm.js","sources":["../../src/base/pageTheme.ts"],"sourcesContent":["/*\n * Copyright 2020 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { PageTheme } from './types';\n\n/**\n * The default predefined burst shapes.\n *\n * @public\n * @remarks\n *\n * How to add a shape:\n *\n * 1. Get the SVG shape from figma, should be ~1400 wide, ~400 high\n * and only the white-to-transparent mask, no colors.\n * 2. Run it through https://jakearchibald.github.io/svgomg/\n * 3. Run that through https://github.com/tigt/mini-svg-data-uri\n * with something like https://npm.runkit.com/mini-svg-data-uri\n * 4. Wrap the output in `url(\"\")`\n * 5. Give it a name and paste it into the `shapes` object below.\n */\nexport const shapes: Record<string, string> = {\n wave: `url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1368' height='401' x='0' y='0' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M437 116C223 116 112 0 112 0h1256v400c-82 0-225-21-282-109-112-175-436-175-649-175z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1368 400V282C891-29 788 40 711 161 608 324 121 372 0 361v39h1368z'/%3e%3cpath fill='url(%23paint2_linear)' d='M1368 244v156H0V94c92-24 198-46 375 0l135 41c176 51 195 109 858 109z'/%3e%3cpath fill='url(%23paint3_linear)' d='M1252 400h116c-14-7-35-14-116-16-663-14-837-128-1013-258l-85-61C98 28 46 8 0 0v400h1252z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M-172-98h1671v601H-172z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='602' x2='1093.5' y1='-960.5' y2='272' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='482' x2='480' y1='1058.5' y2='70.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='424' x2='446.1' y1='-587.5' y2='274.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='587' x2='349' y1='-1120.5' y2='341' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e\")`,\n wave2: `url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1764' height='479' x='-229' y='-6' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M0 400h1350C1321 336 525 33 179-2c-345-34-395 236-408 402H0z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1378 177v223H0V217s219 75 327 52C436 246 717-35 965 45s254 144 413 132z'/%3e%3cpath fill='url(%23paint2_linear)' d='M26 400l-78-16c-170 205-44-6-137-30l-4-1 4 1 137 30c37-45 89-110 159-201 399-514-45 238 1176-50 275-65 354-39 91 267H26z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='431' x2='397.3' y1='-599' y2='372.8' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='236.5' x2='446.6' y1='-586' y2='381.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='851.8' x2='640.4' y1='-867.2' y2='363.7' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e\")`,\n round: `url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='2269' height='1408' x='-610' y='-509' maskUnits='userSpaceOnUse'%3e%3ccircle cx='1212.8' cy='74.8' r='317.5' fill='url(%23paint0_linear)' transform='rotate(-52 1213 75)'/%3e%3ccircle cx='737.8' cy='445.8' r='317.5' fill='url(%23paint1_linear)' transform='rotate(-116 738 446)'/%3e%3ccircle cx='601.8' cy='52.8' r='418.6' fill='url(%23paint2_linear)' transform='rotate(-117 602 53)'/%3e%3ccircle cx='999.8' cy='364' r='389.1' fill='url(%23paint3_linear)' transform='rotate(31 1000 364)'/%3e%3cellipse cx='-109.2' cy='263.5' fill='url(%23paint4_linear)' rx='429.2' ry='465.8' transform='rotate(-85 -109 264)'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='1301.2' x2='161.4' y1='-1879.7' y2='-969.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='826.2' x2='-313.6' y1='-1508.7' y2='-598.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='718.4' x2='-784.3' y1='-2524' y2='-1324.2' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='1108.2' x2='-288.6' y1='-2031.1' y2='-915.9' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint4_linear' x1='10.4' x2='-1626.5' y1='-2603.8' y2='-1399.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e\")`,\n square: `url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none' viewBox='0 0 1368 400'%3e%3cmask id='e' width='1744' height='984' x='-179' y='-215' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3e%3cpath fill='url(%23a)' d='M707 334.693h801v322H707z' transform='rotate(-28.703 707 334.693)'/%3e%3cpath fill='url(%23b)' d='M781.853 570.341h583.106v370.945H781.853z' transform='rotate(-117.346 781.853 570.341)'/%3e%3cpath fill='url(%23c)' d='M-131 685.309h583.106v370.945H-131z' transform='rotate(-77.064 -131 685.309)'/%3e%3cpath fill='url(%23d)' d='M-53.026-214.551h1151.06v322H-53.026z' transform='rotate(22.904 -53.026 -214.551)'/%3e%3c/mask%3e%3cg mask='url(%23e)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='a' x1='1219.07' x2='742.968' y1='-495.388' y2='450.243' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='b' x1='1154.63' x2='489.125' y1='-385.914' y2='449.365' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='c' x1='241.773' x2='-423.728' y1='-270.947' y2='564.332' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='d' x1='682.837' x2='312.949' y1='-1044.63' y2='11.113' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e\")`,\n};\n\n/**\n * The color range variants that are used in e.g. colorful bursts.\n *\n * @public\n */\nexport const colorVariants: Record<string, string[]> = {\n darkGrey: ['#171717', '#383838'],\n marineBlue: ['#006D8F', '#0049A1'],\n veryBlue: ['#0027AF', '#270094'],\n rubyRed: ['#98002B', '#8D1134'],\n toastyOrange: ['#BE2200', '#A41D00'],\n purpleSky: ['#8912CA', '#3E00EA'],\n eveningSea: ['#00CFC5', '#035355'],\n teal: ['#005B4B'],\n pinkSea: ['#C8077A', '#C2297D'],\n greens: ['#4BB8A5', '#187656'],\n};\n\n/**\n * Utility to not have to write colors and shapes twice.\n *\n * @public\n * @remarks\n *\n * As the background shapes and colors are decorative, we place them onto the\n * page as a CSS `background-image` instead of an HTML element of its own.\n */\nexport function genPageTheme(props: {\n colors: string[];\n shape: string;\n options?: {\n fontColor?: string;\n };\n}): PageTheme {\n const { colors, shape, options } = props;\n const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors;\n const gradient = `linear-gradient(90deg, ${gradientColors.join(', ')})`;\n const backgroundImage = `${shape}, ${gradient}`;\n const fontColor = options?.fontColor ?? '#FFFFFF';\n\n return {\n colors: colors,\n shape: shape,\n backgroundImage: backgroundImage,\n fontColor: fontColor,\n };\n}\n\n/**\n * All of the builtin page themes.\n *\n * @public\n */\nexport const pageTheme: Record<string, PageTheme> = {\n home: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave }),\n documentation: genPageTheme({\n colors: colorVariants.pinkSea,\n shape: shapes.wave2,\n }),\n tool: genPageTheme({ colors: colorVariants.purpleSky, shape: shapes.round }),\n service: genPageTheme({\n colors: colorVariants.marineBlue,\n shape: shapes.wave,\n }),\n website: genPageTheme({ colors: colorVariants.veryBlue, shape: shapes.wave }),\n library: genPageTheme({ colors: colorVariants.rubyRed, shape: shapes.wave }),\n other: genPageTheme({ colors: colorVariants.darkGrey, shape: shapes.wave }),\n app: genPageTheme({ colors: colorVariants.toastyOrange, shape: shapes.wave }),\n apis: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave2 }),\n card: genPageTheme({ colors: colorVariants.greens, shape: shapes.wave }),\n};\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@backstage/theme",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.2-next.0",
|
|
4
4
|
"description": "material-ui theme for use with Backstage.",
|
|
5
5
|
"backstage": {
|
|
6
6
|
"role": "web-library"
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@mui/material": "^5.12.2"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@backstage/cli": "
|
|
44
|
+
"@backstage/cli": "0.35.4-next.1",
|
|
45
45
|
"@mui/styles": "^5.14.18",
|
|
46
46
|
"@testing-library/jest-dom": "^6.0.0",
|
|
47
47
|
"@testing-library/react": "^16.0.0",
|