Comments (23)
KrooshalUX
commented on July 24, 2024
1
@davidlago @scrawfor99 using 'euiColorDarkShade' or 'euiColorMediumShade' does adjust automatically for light and dark modes.
My earlier (now updated) instruction to use 'euiColorGhost' was incorrect - as it would be near-white in both light and dark mode ('euiColorGhost' and 'euiColorInk' do not adjust for light/dark mode)
You can see a preview of the adjustment by using the theme switcher within the OUI documentation https://oui.opensearch.org/1.2/#/guidelines/colors
from security-dashboards-plugin.
AMoo-Miki
commented on July 24, 2024
1
I will raise a PR in a bit.
from security-dashboards-plugin.
peternied
commented on July 24, 2024
Thanks for filing
from security-dashboards-plugin.
scrawfor99
commented on July 24, 2024
[Triage] The action items for this task are 1) to modify the SVG to be viewable on the dark background 2) swap auditlogs to updated item type.
from security-dashboards-plugin.
scrawfor99
commented on July 24, 2024
Hi @KrooshalUX, I am looking at the first request of the issue and ran into a question. I am not sure how to modify the svg as you requested... Looking at the settings, I see
<?xml version="1.0" encoding="UTF-8"?>
<svg width="512px" height="114px" viewBox="0 0 512 114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>get_started</title>
<defs>
<rect id="path-1" x="118" y="23" width="117" height="66" rx="3"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="117" height="66" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="Signed-off" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Get-started---Security-Plugin---P1" transform="translate(-421.000000, -220.000000)">
<g id="get_started" transform="translate(421.000000, 220.000000)">
<g id="Group-2" transform="translate(384.000000, 66.000000)" fill="#343741">
<g id="user" transform="translate(48.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user" transform="translate(24.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
</g>
<text id="Map-backend-roles" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="#343741">
<tspan x="356" y="111">Map backend roles</tspan>
</text>
<g id="Group-3" transform="translate(380.000000, 0.000000)" fill="#343741">
<g id="user" transform="translate(24.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user" transform="translate(48.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
</g>
<text id="Map-internal-users" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="#343741">
<tspan x="358.04748" y="41">Map internal users</tspan>
</text>
<g id="user" transform="translate(1.000000, 36.000000)" fill="#343741">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="Group" transform="translate(21.000000, 49.500000)">
<g id="Key" transform="translate(6.750000, 12.000000) rotate(45.000000) translate(-6.750000, -12.000000) ">
<path d="M6.75,0.705 L7.04221663,0.713181716 C8.59133216,0.790741631 9.98602868,1.48158176 11.0128014,2.55533101 C12.1149218,3.70787525 12.7941176,5.30077197 12.7941176,7.05882353 C12.7941176,8.34506395 12.4307061,9.54269141 11.8039264,10.5443722 C11.0819104,11.6982538 10.0106933,12.5924382 8.74506832,13.0576644 L8.74506832,13.0576644 L8.74418929,18.2319005 L7.39411765,18.958405 L7.39411765,21.0021514 C7.04508271,21.7396682 6.72733406,22.3005936 6.4341549,22.6805615 C6.30690613,22.8454793 6.21813177,23.0566742 6.09145031,23.0566742 C5.50066108,22.3869971 5.2006985,21.8869002 4.8707523,21.2305716 L4.8707523,21.2305716 L4.74902262,13.0554886 C3.48613048,12.5897123 2.41723272,11.6966806 1.69634378,10.544804 C1.06939839,9.54303566 0.705882353,8.34524878 0.705882353,7.05882353 C0.705882353,5.30077197 1.38507817,3.70787525 2.4871986,2.55533101 C3.57814462,1.41447244 5.08444211,0.705882353 6.75,0.705882353 L6.75,0.705 Z" id="Combined-Shape" stroke="#343741" stroke-width="1.41176471"></path>
<ellipse id="Oval" fill="#343741" cx="6.75" cy="7.05882353" rx="1.35" ry="1.41176471"></ellipse>
</g>
</g>
<text id="Role" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="#343741">
<tspan x="0" y="94.5">Role</tspan>
</text>
<g id="Group-5" transform="translate(33.000000, 14.000000)">
<circle id="↳🌈-Color" fill="#006BB4" cx="12" cy="12" r="12"></circle>
<path d="M14.7978516,16 L14.7978516,15.0039062 L10.2158203,15.0039062 C10.3173828,14.5898438 10.5634766,14.2128906 10.9541016,13.8730469 C11.1728516,13.6816406 11.4736328,13.4804688 11.8564453,13.2695312 L11.8564453,13.2695312 L12.6591797,12.8242188 C13.3662109,12.4296875 13.8564453,12.09375 14.1298828,11.8164062 C14.6025391,11.3398438 14.8388672,10.765625 14.8388672,10.09375 C14.8388672,9.45703125 14.6171875,8.87890625 14.1738281,8.359375 C13.7304688,7.83984375 13.0283203,7.58007812 12.0673828,7.58007812 C10.9111328,7.58007812 10.1044922,7.98632812 9.64746094,8.79882812 C9.38964844,9.25976562 9.25488281,9.85546875 9.24316406,10.5859375 L9.24316406,10.5859375 L10.3154297,10.5859375 C10.3310547,10.0664062 10.4130859,9.66015625 10.5615234,9.3671875 C10.8388672,8.8203125 11.3388672,8.546875 12.0615234,8.546875 C12.5498047,8.546875 12.9404297,8.69042969 13.2333984,8.97753906 C13.5263672,9.26464844 13.6728516,9.65234375 13.6728516,10.140625 C13.6728516,10.5585938 13.5126953,10.9296875 13.1923828,11.2539062 C12.9892578,11.4609375 12.6357422,11.7109375 12.1318359,12.0039062 L12.1318359,12.0039062 L11.0068359,12.6542969 C10.2529297,13.0917969 9.74609375,13.578125 9.48632812,14.1132812 C9.2265625,14.6484375 9.07714844,15.2773438 9.03808594,16 L9.03808594,16 L14.7978516,16 Z" id="2" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="Group" transform="translate(488.000000, 13.000000)">
<circle id="Color" fill="#006BB4" cx="12" cy="12" r="12"></circle>
<path d="M11.7802734,16.2285156 C12.7490234,16.2285156 13.4970703,15.9765625 14.0244141,15.4726562 C14.5517578,14.96875 14.8154297,14.3164062 14.8154297,13.515625 C14.8154297,13.015625 14.6914062,12.5927734 14.4433594,12.2470703 C14.1953125,11.9013672 13.8505859,11.6679688 13.4091797,11.546875 C13.6826172,11.4335938 13.9052734,11.2773438 14.0771484,11.078125 C14.3544922,10.7578125 14.4931641,10.3398438 14.4931641,9.82421875 C14.4931641,9.1015625 14.2587891,8.54980469 13.7900391,8.16894531 C13.3212891,7.78808594 12.6591797,7.59765625 11.8037109,7.59765625 C10.7216797,7.59765625 9.96582031,7.98828125 9.53613281,8.76953125 C9.28613281,9.20703125 9.16113281,9.73828125 9.16113281,10.3632812 L9.16113281,10.3632812 L10.2041016,10.3632812 C10.2236328,9.88671875 10.3076172,9.51953125 10.4560547,9.26171875 C10.7255859,8.79296875 11.2119141,8.55859375 11.9150391,8.55859375 C12.3095703,8.55859375 12.6552734,8.671875 12.9521484,8.8984375 C13.2490234,9.125 13.3974609,9.44726562 13.3974609,9.86523438 C13.3974609,10.4277344 13.1748047,10.8183594 12.7294922,11.0371094 C12.4755859,11.1621094 12.1513672,11.2246094 11.7568359,11.2246094 C11.6708984,11.2246094 11.5908203,11.2226562 11.5166016,11.21875 C11.4423828,11.2148438 11.3505859,11.2070312 11.2412109,11.1953125 L11.2412109,11.1953125 L11.2412109,12.1269531 C11.3154297,12.1230469 11.3886719,12.1201172 11.4609375,12.1181641 C11.5332031,12.1162109 11.6044922,12.1152344 11.6748047,12.1152344 C12.3037109,12.1152344 12.7949219,12.2304688 13.1484375,12.4609375 C13.5019531,12.6914062 13.6787109,13.0957031 13.6787109,13.6738281 C13.6787109,14.1425781 13.5107422,14.5253906 13.1748047,14.8222656 C12.8388672,15.1191406 12.3935547,15.2675781 11.8388672,15.2675781 C11.1240234,15.2675781 10.6298828,15.046875 10.3564453,14.6054688 C10.2001953,14.359375 10.0986328,13.9648438 10.0517578,13.421875 L10.0517578,13.421875 L8.95019531,13.421875 C8.95019531,14.203125 9.17382812,14.8662109 9.62109375,15.4111328 C10.0683594,15.9560547 10.7880859,16.2285156 11.7802734,16.2285156 Z" id="3" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<use id="Rectangle" stroke="#343741" mask="url(#mask-2)" stroke-width="3" stroke-dasharray="4,4" xlink:href="#path-1"></use>
<text id="(authc-&-authz)" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.0599999964" fill="#343741">
<tspan x="136.2625" y="66">(authc & authz)</tspan>
</text>
<text id="Backends" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="#343741">
<tspan x="146.038789" y="49">Backends</tspan>
</text>
<g id="Group-4" transform="translate(223.000000, 14.000000)">
<circle id="Color" fill="#006BB4" cx="12" cy="12" r="12"></circle>
<path d="M12.9111328,16 L12.9111328,7.64453125 L12.0791016,7.64453125 C11.9306641,8.29296875 11.7060547,8.70410156 11.4052734,8.87792969 C11.1044922,9.05175781 10.5732422,9.17578125 9.81152344,9.25 L9.81152344,9.25 L9.81152344,10.0585938 L11.7861328,10.0585938 L11.7861328,16 L12.9111328,16 Z" id="1" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<line x1="49.5" y1="58.5" x2="117.5" y2="58.5" id="Line" stroke="#343741" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4"></line>
<path d="M235,58 L268,58 L268,43 L340,43" id="Line" stroke="#343741" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4"></path>
<path d="M235,73 L268,73 L268,58 L340,58" id="Line" stroke="#343741" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4" transform="translate(287.500000, 65.500000) scale(1, -1) translate(-287.500000, -65.500000) "></path>
</g>
</g>
</g>
</svg>
I am not sure what you mean by modifying the color to ghost. Swapping any of the fills will just remove them and from what I have seen in the code we don't define a ghost CSS property anywhere. If you could please let me know what I should be doing or am missing, that would be great.
from security-dashboards-plugin.
davidlago
commented on July 24, 2024
Could ghost be defined as part of OUI/theme? That'd be my guess but I'll let @KrooshalUX / @AMoo-Miki confirm (perhaps worth a try replacing those fills with the word ghost and taking the SVG for a spin?)
from security-dashboards-plugin.
davidlago
commented on July 24, 2024
I also see a reference for ouiColorGhost in the OUI styleguide:
If you need a color that is full white in both light and dark modes, use ouiColorGhost.
from security-dashboards-plugin.
KrooshalUX
commented on July 24, 2024
@scrawfor99 - apologies, on second thought - 'euiColorGhost' would render it white in light and dark mode, which would not work for light mode.
Let's try 'euiColorMediumShade' or 'euiColorDarkShade' and see how it comes out?
https://oui.opensearch.org/1.2/#/guidelines/colors
We may need to do some trial and error to see how it ends up appearing.
from security-dashboards-plugin.
scrawfor99
commented on July 24, 2024
Hi @davidlago, thanks for your suggestions. I had actually given those a shot and saw it referenced in the styleGuide, but I still don't know what the expected outcome is. For instance, I can swap everything to use the $ouiColorGhost such as:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="512px" height="114px" viewBox="0 0 512 114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>get_started</title>
<defs>
<rect id="path-1" x="118" y="23" width="117" height="66" rx="3"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="117" height="66" fill="$ouiColorGhost">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="Signed-off" stroke="$ouiColorGhost" stroke-width="1" fill="$ouiColorGhost" fill-rule="evenodd">
<g id="Get-started---Security-Plugin---P1" transform="translate(-421.000000, -220.000000)">
<g id="get_started" transform="translate(421.000000, 220.000000)">
<g id="Group-2" transform="translate(384.000000, 66.000000)" fill="$ouiColorGhost">
<g id="user" transform="translate(48.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user" transform="translate(24.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Col
or"></path>
</g>
</g>
<text id="Map-backend-roles" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="$ouiColorGhost">
<tspan x="356" y="111">Map backend roles</tspan>
</text>
<g id="Group-3" transform="translate(380.000000, 0.000000)" fill="$ouiColorGhost">
<g id="user" transform="translate(24.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user" transform="translate(48.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
</g>
<text id="Map-internal-users" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="$ouiColorGhost">
<tspan x="358.04748" y="41">Map internal users</tspan>
</text>
<g id="user" transform="translate(1.000000, 36.000000)" fill="$ouiColorGhost">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="Group" transform="translate(21.000000, 49.500000)">
<g id="Key" transform="translate(6.750000, 12.000000) rotate(45.000000) translate(-6.750000, -12.000000) ">
<path d="M6.75,0.705 L7.04221663,0.713181716 C8.59133216,0.790741631 9.98602868,1.48158176 11.0128014,2.55533101 C12.1149218,3.70787525 12.7941176,5.30077197 12.7941176,7.05882353 C12.7941176,8.34506395 12.4307061,9.54269141 11.8039264,10.5443722 C11.0819104,11.6982538 10.0106933,12.5924382 8.74506832,13.0576644 L8.74506832,13.0576644 L8.74418929,18.2319005 L7.39411765,18.958405 L7.39411765,21.0021514 C7.04508271,21.7396682 6.72733406,22.3005936 6.4341549,22.6805615 C6.30690613,22.8454793 6.21813177,23.0566742 6.09145031,23.0566742 C5.50066108,22.3869971 5.2006985,21.8869002 4.8707523,21.2305716 L4.8707523,21.2305716 L4.74902262,13.0554886 C3.48613048,12.5897123 2.41723272,11.6966806 1.69634378,10.544804 C1.06939839,9.54303566 0.705882353,8.34524878 0.705882353,7.05882353 C0.705882353,5.30077197 1.38507817,3.70787525 2.4871986,2.55533101 C3.57814462,1.41447244 5.08444211,0.705882353 6.75,0.705882353 L6.75,0.705 Z" id="Combined-Shape" stroke="#343741" stroke-width="1.41176471"></path>
<ellipse id="Oval" fill="$ouiColorGhost" cx="6.75" cy="7.05882353" rx="1.35" ry="1.41176471"></ellipse>
</g>
</g>
<text id="Role" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="$ouiColorGhost">
<tspan x="0" y="94.5">Role</tspan>
</text>
<g id="Group-5" transform="translate(33.000000, 14.000000)">
<circle id="↳🌈-Color" fill="$ouiColorGhost" cx="12" cy="12" r="12"></circle>
<path d="M14.7978516,16 L14.7978516,15.0039062 L10.2158203,15.0039062 C10.3173828,14.5898438 10.5634766,14.2128906 10.9541016,13.8730469 C11.1728516,13.6816406 11.4736328,13.4804688 11.8564453,13.2695312 L11.8564453,13.2695312 L12.6591797,12.8242188 C13.3662109,12.4296875 13.8564453,12.09375 14.1298828,11.8164062 C14.6025391,11.3398438 14.8388672,10.765625 14.8388672,10.09375 C14.8388672,9.45703125 14.6171875,8.87890625 14.1738281,8.359375 C13.7304688,7.83984375 13.0283203,7.58007812 12.0673828,7.58007812 C10.9111328,7.58007812 10.1044922,7.98632812 9.64746094,8.79882812 C9.38964844,9.25976562 9.25488281,9.85546875 9.24316406,10.5859375 L9.24316406,10.5859375 L10.3154297,10.5859375 C10.3310547,10.0664062 10.4130859,9.66015625 10.5615234,9.3671875 C10.8388672,8.8203125 11.3388672,8.546875 12.0615234,8.546875 C12.5498047,8.546875 12.9404297,8.69042969 13.2333984,8.97753906 C13.5263672,9.26464844 13.6728516,9.65234375 13.6728516,10.140625 C13.6728516,10.5585938 13.5126953,10.9296875 13.1923828,11.2539062 C12.9892578,11.4609375 12.6357422,11.7109375 12.1318359,12.0039062 L12.1318359,12.0039062 L11.0068359,12.6542969 C10.2529297,13.0917969 9.74609375,13.578125 9.48632812,14.1132812 C9.2265625,14.6484375 9.07714844,15.2773438 9.03808594,16 L9.03808594,16 L14.7978516,16 Z" id="2" fill="$ouiColorGhost" fill-rule="nonzero"></path>
</g>
<g id="Group" transform="translate(488.000000, 13.000000)">
<circle id="Color" fill="$ouiColorGhost" cx="12" cy="12" r="12"></circle>
<path d="M11.7802734,16.2285156 C12.7490234,16.2285156 13.4970703,15.9765625 14.0244141,15.4726562 C14.5517578,14.96875 14.8154297,14.3164062 14.8154297,13.515625 C14.8154297,13.015625 14.6914062,12.5927734 14.4433594,12.2470703 C14.1953125,11.9013672 13.8505859,11.6679688 13.4091797,11.546875 C13.6826172,11.4335938 13.9052734,11.2773438 14.0771484,11.078125 C14.3544922,10.7578125 14.4931641,10.3398438 14.4931641,9.82421875 C14.4931641,9.1015625 14.2587891,8.54980469 13.7900391,8.16894531 C13.3212891,7.78808594 12.6591797,7.59765625 11.8037109,7.59765625 C10.7216797,7.59765625 9.96582031,7.98828125 9.53613281,8.76953125 C9.28613281,9.20703125 9.16113281,9.73828125 9.16113281,10.3632812 L9.16113281,10.3632812 L10.2041016,10.3632812 C10.2236328,9.88671875 10.3076172,9.51953125 10.4560547,9.26171875 C10.7255859,8.79296875 11.2119141,8.55859375 11.9150391,8.55859375 C12.3095703,8.55859375 12.6552734,8.671875 12.9521484,8.8984375 C13.2490234,9.125 13.3974609,9.44726562 13.3974609,9.86523438 C13.3974609,10.4277344 13.1748047,10.8183594 12.7294922,11.0371094 C12.4755859,11.1621094 12.1513672,11.2246094 11.7568359,11.2246094 C11.6708984,11.2246094 11.5908203,11.2226562 11.5166016,11.21875 C11.4423828,11.2148438 11.3505859,11.2070312 11.2412109,11.1953125 L11.2412109,11.1953125 L11.2412109,12.1269531 C11.3154297,12.1230469 11.3886719,12.1201172 11.4609375,12.1181641 C11.5332031,12.1162109 11.6044922,12.1152344 11.6748047,12.1152344 C12.3037109,12.1152344 12.7949219,12.2304688 13.1484375,12.4609375 C13.5019531,12.6914062 13.6787109,13.0957031 13.6787109,13.6738281 C13.6787109,14.1425781 13.5107422,14.5253906 13.1748047,14.8222656 C12.8388672,15.1191406 12.3935547,15.2675781 11.8388672,15.2675781 C11.1240234,15.2675781 10.6298828,15.046875 10.3564453,14.6054688 C10.2001953,14.359375 10.0986328,13.9648438 10.0517578,13.421875 L10.0517578,13.421875 L8.95019531,13.421875 C8.95019531,14.203125 9.17382812,14.8662109 9.62109375,15.4111328 C10.0683594,15.9560547 10.7880859,16.2285156 11.7802734,16.2285156 Z" id="3" fill="$ouiColorGhost" fill-rule="nonzero"></path>
</g>
<use id="Rectangle" stroke="$ouiColorGhost" mask="url(#mask-2)" stroke-width="3" stroke-dasharray="4,4" xlink:href="#path-1"></use>
<text id="(authc-&-authz)" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.0599999964" fill="$ouiColorGhost">
<tspan x="136.2625" y="66">(authc & authz)</tspan>
</text>
<text id="Backends" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="$ouiColorGhost">
<tspan x="146.038789" y="49">Backends</tspan>
</text>
<g id="Group-4" transform="translate(223.000000, 14.000000)">
<circle id="Color" fill="$ouiColorGhost" cx="12" cy="12" r="12"></circle>
<path d="M12.9111328,16 L12.9111328,7.64453125 L12.0791016,7.64453125 C11.9306641,8.29296875 11.7060547,8.70410156 11.4052734,8.87792969 C11.1044922,9.05175781 10.5732422,9.17578125 9.81152344,9.25 L9.81152344,9.25 L9.81152344,10.0585938 L11.7861328,10.0585938 L11.7861328,16 L12.9111328,16 Z" id="1" fill="$ouiColorGhost" fill-rule="nonzero"></path>
</g>
<line x1="49.5" y1="58.5" x2="117.5" y2="58.5" id="Line" stroke="#343741" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4"></line>
<path d="M235,58 L268,58 L268,43 L340,43" id="Line" stroke="#343741" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4"></path>
<path d="M235,73 L268,73 L268,58 L340,58" id="Line" stroke="#343741" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4" transform="translate(287.500000, 65.500000) scale(1, -1) translate(-287.500000, -65.500000) "></path>
</g>
</g>
</g>
</svg>
But I am 99% sure that is not the desired outcome here.
We probably want just some parts to be ghost but I am not sure which I should set for the new theme. Does that make sense?
from security-dashboards-plugin.
KrooshalUX
commented on July 24, 2024
@scrawfor99 - @kgcreative may have additional change suggestions for the SVG, so tagging him in as well.
from security-dashboards-plugin.
scrawfor99
commented on July 24, 2024
Hi @KrooshalUX sounds good. I assume we will want something like this:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="512px" height="114px" viewBox="0 0 512 114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>get_started</title>
<defs>
<rect id="path-1" x="118" y="23" width="117" height="66" rx="3"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="117" height="66" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="Signed-off" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Get-started---Security-Plugin---P1" transform="translate(-421.000000, -220.000000)">
<g id="get_started" transform="translate(421.000000, 220.000000)">
<g id="Group-2" transform="translate(384.000000, 66.000000)" fill="$ouiColorGhost">
<g id="user" transform="translate(48.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user" transform="translate(24.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
</g>
<text id="Map-backend-roles" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="$ouiColorGhost">
<tspan x="356" y="111">Map backend roles</tspan>
</text>
<g id="Group-3" transform="translate(380.000000, 0.000000)" fill="$ouiColorGhost">
<g id="user" transform="translate(24.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user" transform="translate(48.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
</g>
<text id="Map-internal-users" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="$ouiColorGhost">
<tspan x="358.04748" y="41">Map internal users</tspan>
</text>
<g id="user" transform="translate(1.000000, 36.000000)" fill="$ouiColorGhost">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="Group" transform="translate(21.000000, 49.500000)">
<g id="Key" transform="translate(6.750000, 12.000000) rotate(45.000000) translate(-6.750000, -12.000000) ">
<path d="M6.75,0.705 L7.04221663,0.713181716 C8.59133216,0.790741631 9.98602868,1.48158176 11.0128014,2.55533101 C12.1149218,3.70787525 12.7941176,5.30077197 12.7941176,7.05882353 C12.7941176,8.34506395 12.4307061,9.54269141 11.8039264,10.5443722 C11.0819104,11.6982538 10.0106933,12.5924382 8.74506832,13.0576644 L8.74506832,13.0576644 L8.74418929,18.2319005 L7.39411765,18.958405 L7.39411765,21.0021514 C7.04508271,21.7396682 6.72733406,22.3005936 6.4341549,22.6805615 C6.30690613,22.8454793 6.21813177,23.0566742 6.09145031,23.0566742 C5.50066108,22.3869971 5.2006985,21.8869002 4.8707523,21.2305716 L4.8707523,21.2305716 L4.74902262,13.0554886 C3.48613048,12.5897123 2.41723272,11.6966806 1.69634378,10.544804 C1.06939839,9.54303566 0.705882353,8.34524878 0.705882353,7.05882353 C0.705882353,5.30077197 1.38507817,3.70787525 2.4871986,2.55533101 C3.57814462,1.41447244 5.08444211,0.705882353 6.75,0.705882353 L6.75,0.705 Z" id="Combined-Shape" stroke="$ouiColorGhost" stroke-width="1.41176471"></path>
<ellipse id="Oval" fill="$ouiColorGhost" cx="6.75" cy="7.05882353" rx="1.35" ry="1.41176471"></ellipse>
</g>
</g>
<text id="Role" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="$ouiColorGhost">
<tspan x="0" y="94.5">Role</tspan>
</text>
<g id="Group-5" transform="translate(33.000000, 14.000000)">
<circle id="↳🌈-Color" fill="#006BB4" cx="12" cy="12" r="12"></circle>
<path d="M14.7978516,16 L14.7978516,15.0039062 L10.2158203,15.0039062 C10.3173828,14.5898438 10.5634766,14.2128906 10.9541016,13.8730469 C11.1728516,13.6816406 11.4736328,13.4804688 11.8564453,13.2695312 L11.8564453,13.2695312 L12.6591797,12.8242188 C13.3662109,12.4296875 13.8564453,12.09375 14.1298828,11.8164062 C14.6025391,11.3398438 14.8388672,10.765625 14.8388672,10.09375 C14.8388672,9.45703125 14.6171875,8.87890625 14.1738281,8.359375 C13.7304688,7.83984375 13.0283203,7.58007812 12.0673828,7.58007812 C10.9111328,7.58007812 10.1044922,7.98632812 9.64746094,8.79882812 C9.38964844,9.25976562 9.25488281,9.85546875 9.24316406,10.5859375 L9.24316406,10.5859375 L10.3154297,10.5859375 C10.3310547,10.0664062 10.4130859,9.66015625 10.5615234,9.3671875 C10.8388672,8.8203125 11.3388672,8.546875 12.0615234,8.546875 C12.5498047,8.546875 12.9404297,8.69042969 13.2333984,8.97753906 C13.5263672,9.26464844 13.6728516,9.65234375 13.6728516,10.140625 C13.6728516,10.5585938 13.5126953,10.9296875 13.1923828,11.2539062 C12.9892578,11.4609375 12.6357422,11.7109375 12.1318359,12.0039062 L12.1318359,12.0039062 L11.0068359,12.6542969 C10.2529297,13.0917969 9.74609375,13.578125 9.48632812,14.1132812 C9.2265625,14.6484375 9.07714844,15.2773438 9.03808594,16 L9.03808594,16 L14.7978516,16 Z" id="2" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="Group" transform="translate(488.000000, 13.000000)">
<circle id="Color" fill="#006BB4" cx="12" cy="12" r="12"></circle>
<path d="M11.7802734,16.2285156 C12.7490234,16.2285156 13.4970703,15.9765625 14.0244141,15.4726562 C14.5517578,14.96875 14.8154297,14.3164062 14.8154297,13.515625 C14.8154297,13.015625 14.6914062,12.5927734 14.4433594,12.2470703 C14.1953125,11.9013672 13.8505859,11.6679688 13.4091797,11.546875 C13.6826172,11.4335938 13.9052734,11.2773438 14.0771484,11.078125 C14.3544922,10.7578125 14.4931641,10.3398438 14.4931641,9.82421875 C14.4931641,9.1015625 14.2587891,8.54980469 13.7900391,8.16894531 C13.3212891,7.78808594 12.6591797,7.59765625 11.8037109,7.59765625 C10.7216797,7.59765625 9.96582031,7.98828125 9.53613281,8.76953125 C9.28613281,9.20703125 9.16113281,9.73828125 9.16113281,10.3632812 L9.16113281,10.3632812 L10.2041016,10.3632812 C10.2236328,9.88671875 10.3076172,9.51953125 10.4560547,9.26171875 C10.7255859,8.79296875 11.2119141,8.55859375 11.9150391,8.55859375 C12.3095703,8.55859375 12.6552734,8.671875 12.9521484,8.8984375 C13.2490234,9.125 13.3974609,9.44726562 13.3974609,9.86523438 C13.3974609,10.4277344 13.1748047,10.8183594 12.7294922,11.0371094 C12.4755859,11.1621094 12.1513672,11.2246094 11.7568359,11.2246094 C11.6708984,11.2246094 11.5908203,11.2226562 11.5166016,11.21875 C11.4423828,11.2148438 11.3505859,11.2070312 11.2412109,11.1953125 L11.2412109,11.1953125 L11.2412109,12.1269531 C11.3154297,12.1230469 11.3886719,12.1201172 11.4609375,12.1181641 C11.5332031,12.1162109 11.6044922,12.1152344 11.6748047,12.1152344 C12.3037109,12.1152344 12.7949219,12.2304688 13.1484375,12.4609375 C13.5019531,12.6914062 13.6787109,13.0957031 13.6787109,13.6738281 C13.6787109,14.1425781 13.5107422,14.5253906 13.1748047,14.8222656 C12.8388672,15.1191406 12.3935547,15.2675781 11.8388672,15.2675781 C11.1240234,15.2675781 10.6298828,15.046875 10.3564453,14.6054688 C10.2001953,14.359375 10.0986328,13.9648438 10.0517578,13.421875 L10.0517578,13.421875 L8.95019531,13.421875 C8.95019531,14.203125 9.17382812,14.8662109 9.62109375,15.4111328 C10.0683594,15.9560547 10.7880859,16.2285156 11.7802734,16.2285156 Z" id="3" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<use id="Rectangle" stroke="$ouiColorGhost" mask="url(#mask-2)" stroke-width="3" stroke-dasharray="4,4" xlink:href="#path-1"></use>
<text id="(authc-&-authz)" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.0599999964" fill="$ouiColorGhost">
<tspan x="136.2625" y="66">(authc & authz)</tspan>
</text>
<text id="Backends" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" fill="$ouiColorGhost">
<tspan x="146.038789" y="49">Backends</tspan>
</text>
<g id="Group-4" transform="translate(223.000000, 14.000000)">
<circle id="Color" fill="#006BB4" cx="12" cy="12" r="12"></circle>
<path d="M12.9111328,16 L12.9111328,7.64453125 L12.0791016,7.64453125 C11.9306641,8.29296875 11.7060547,8.70410156 11.4052734,8.87792969 C11.1044922,9.05175781 10.5732422,9.17578125 9.81152344,9.25 L9.81152344,9.25 L9.81152344,10.0585938 L11.7861328,10.0585938 L11.7861328,16 L12.9111328,16 Z" id="1" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<line x1="49.5" y1="58.5" x2="117.5" y2="58.5" id="Line" stroke="$ouiColorGhost" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4"></line>
<path d="M235,58 L268,58 L268,43 L340,43" id="Line" stroke="$ouiColorGhost" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4"></path>
<path d="M235,73 L268,73 L268,58 L340,58" id="Line" stroke="$ouiColorGhost" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4" transform="translate(287.500000, 65.500000) scale(1, -1) translate(-287.500000, -65.500000) "></path>
</g>
</g>
</g>
</svg>
from security-dashboards-plugin.
davidlago
commented on July 24, 2024
@scrawfor99 you probably only want to update the ones where fill="#343741" as that is the grey color that is hard to read in dark mode.
I see in the styleguide that that color is ouiColorDarkestShade. My (optimistic?) guess is that if we replace all of the hardcoded #343741 for ouiColorDarkestShade, that will dynamically take into account dark mode and switch to a lighter color. @AMoo-Miki is that right?
I hope we are not having components figure out whether they are in dark mode or not to switch colors.. so hopefully ouiColorDarkestShade dynamically adjusts (otherwise text in the screen with that color would suffer from the same fate).
from security-dashboards-plugin.
scrawfor99
commented on July 24, 2024
Hi @davidlago, yeah I looked at swapping but the lines are also dark so I don't know if we want to swap those too?
This is what the Ghost version would look like I assume?
from security-dashboards-plugin.
davidlago
commented on July 24, 2024
Yeah, I'd assume the lines and text both need to be changed. That looks good to me... how does it look for light mode?
from security-dashboards-plugin.
kgcreative
commented on July 24, 2024
Thanks @KrooshalUX
@davidlago & @scrawfor99 -- here's an updated SVG -- I've changed all the fills and strokes to "currentColor" -- which should simply inherit the values you set in CSS. I've also removed the "blue" circles and made them the current color as well so we don't need to worry about matching colors if the theme changes in the future. Please let me know if this works (The github preview probably won't render correctly, but the .svg should work. I'd love to see some screenshots once you've tried it in local.
Edited:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0" y="0" version="1.1" viewBox="0 0 512 114"><defs><path id="Color" d="M402 81.2c1.7 1.8 2.9 4.3 3.3 7.1.1.9-.6 1.7-1.5 1.7H386c-.9 0-1.6-.8-1.5-1.7.3-2.8 1.5-5.3 3.3-7.1.4.3.8.7 1.2.9-1.6 1.6-2.6 3.8-3 6.4h17.8c-.3-2.5-1.4-4.7-2.9-6.4.4-.2.8-.6 1.1-.9zM394.9 66c4.1 0 7.5 3.4 7.5 7.5S399 81 394.9 81s-7.5-3.4-7.5-7.5 3.4-7.5 7.5-7.5zm5.4 4.9-.2.1c-.5.2-1 .3-1.5.3-.4 0-.9-.1-1.3-.2-1 1.3-2.6 2.1-4.4 2.1H391.5c-.9 0-1.9-.1-2.6-.5 0 .3-.1.5-.1.8 0 3.3 2.7 6 6 6s6-2.7 6-6c.1-.9-.1-1.8-.5-2.6z" class="st0"/><path id="Color_00000057127488934436419350000016107055615416016046_" d="M398 15.2c1.7 1.8 2.9 4.3 3.3 7.1.1.9-.6 1.7-1.5 1.7H382c-.9 0-1.6-.8-1.5-1.7.3-2.8 1.5-5.3 3.3-7.1.4.3.8.7 1.2.9-1.6 1.6-2.6 3.8-3 6.4h17.8c-.3-2.5-1.4-4.7-2.9-6.4.4-.2.8-.6 1.1-.9zM390.9 0c4.1 0 7.5 3.4 7.5 7.5S395 15 390.9 15s-7.5-3.4-7.5-7.5 3.4-7.5 7.5-7.5zm5.4 4.9-.2.1c-.5.2-1 .3-1.5.3-.4 0-.9-.1-1.3-.2-1 1.3-2.6 2.1-4.4 2.1H387.5c-.9 0-1.9-.1-2.6-.5 0 .3-.1.5-.1.8 0 3.3 2.7 6 6 6s6-2.7 6-6c.1-.9-.1-1.8-.5-2.6z" class="st0"/></defs><style>.st0{fill-rule:evenodd;clip-rule:evenodd}.st0,.st1{fill:currentColor}.st2{font-family:"Helvetica"}.st3{font-size:14px}.st5{fill:#fff}.st8{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-dasharray:4,4}</style><g id="user" transform="translate(48)"><use xlink:href="#Color" class="st0"/></g><g id="user_00000133506226147769680440000014979422813622088126_"><use xlink:href="#Color" id="Color_00000107579679335762104260000007774332086997006465_" class="st0"/></g><g id="user_00000101089426306162988880000014847795475155872393_" transform="translate(24)"><use xlink:href="#Color" id="Color_00000125577537743809376290000008143365923823165854_" class="st0"/></g><text class="st1 st2 st3" transform="translate(356 111)">Map backend roles</text><g id="user_00000031175530658592218400000001279068255976225463_" transform="translate(24)"><use xlink:href="#Color_00000057127488934436419350000016107055615416016046_" class="st0"/></g><g id="user_00000005264822670403629240000017998720058475739520_"><use xlink:href="#Color_00000057127488934436419350000016107055615416016046_" id="Color_00000140709453560267357890000006426013859799983801_" class="st0"/></g><g id="user_00000171686885394561573320000017537980994786150562_" transform="translate(48)"><use xlink:href="#Color_00000057127488934436419350000016107055615416016046_" id="Color_00000181084195060870963380000013402975408149598883_" class="st0"/></g><text class="st1 st2 st3" transform="translate(358.048 41)">Map internal users</text><path id="Color_00000154387284597162422420000018351271589275760822_" d="M19 51.2c1.7 1.8 2.9 4.3 3.3 7.1.1.9-.6 1.7-1.5 1.7H3c-.9 0-1.6-.8-1.5-1.7.3-2.8 1.5-5.3 3.3-7.1.4.3.8.7 1.2.9-1.6 1.6-2.6 3.8-3 6.4h17.8c-.3-2.5-1.4-4.7-2.9-6.4.4-.2.8-.6 1.1-.9zM11.9 36c4.1 0 7.5 3.4 7.5 7.5S16.1 51 11.9 51s-7.5-3.4-7.5-7.5S7.8 36 11.9 36zm5.4 4.9-.2.1c-.5.2-1 .3-1.5.3-.4 0-.9-.1-1.3-.2-1 1.3-2.6 2.1-4.4 2.1H8.5c-.9 0-1.9-.1-2.6-.5 0 .3-.1.5-.1.8 0 3.3 2.7 6 6 6s6-2.7 6-6c.1-.9-.1-1.8-.5-2.6z" class="st0"/><g id="Key" transform="rotate(45 6.75 12)"><path id="Combined-Shape" fill="none" stroke="currentColor" stroke-width="1" d="M56.6 20.9h.3c1.5.1 2.9.8 4 1.8 1.1 1.2 1.8 2.7 1.8 4.5 0 1.3-.4 2.5-1 3.5-.7 1.2-1.8 2-3.1 2.5v5.2l-1.4.7v2c-.3.7-.7 1.3-1 1.7-.1.2-.2.4-.3.4-.6-.7-.9-1.2-1.2-1.8l-.1-8.2c-1.3-.5-2.3-1.4-3.1-2.5-.6-1-1-2.2-1-3.5 0-1.8.7-3.4 1.8-4.5s2.6-1.8 4.3-1.8z"/><ellipse id="Oval" cx="56.6" cy="27.2" class="st0" rx="1.4" ry="1.3" transform="rotate(90 56.601 27.211)"/></g><text class="st1 st2 st3" transform="translate(0 94.5)">Role</text><circle id="_x21B3__xD83C__xDF08_-Color" cx="45" cy="26" r="12" class="st0"/><path id="_x32_" d="M47.8 30v-1h-4.6c.1-.4.3-.8.7-1.1.2-.2.5-.4.9-.6l.8-.4c.7-.4 1.2-.7 1.5-1 .5-.5.7-1.1.7-1.7 0-.6-.2-1.2-.7-1.7s-1.1-.8-2.1-.8c-1.2 0-2 .4-2.4 1.2-.3.5-.4 1.1-.4 1.8h1.1c0-.5.1-.9.2-1.2.3-.5.8-.8 1.5-.8.5 0 .9.1 1.2.4s.4.7.4 1.2c0 .4-.2.8-.5 1.1-.2.2-.6.5-1.1.8l-1 .5c-.8.4-1.3.9-1.5 1.5s-.4 1.1-.5 1.8h5.8z" class="st5"/><circle id="Color_00000083790818246480652690000018075463001815464081_" cx="500" cy="25" r="12" class="st0"/><path id="_x33_" d="M499.8 29.2c1 0 1.7-.3 2.2-.8s.8-1.2.8-2c0-.5-.1-.9-.4-1.3s-.6-.6-1-.7c.3-.1.5-.3.7-.5.3-.3.4-.7.4-1.3 0-.7-.2-1.3-.7-1.7s-1.1-.6-2-.6c-1.1 0-1.8.4-2.3 1.2-.2.4-.4 1-.4 1.6h1c0-.5.1-.8.3-1.1.3-.5.8-.7 1.5-.7.4 0 .7.1 1 .3s.4.5.4 1c0 .6-.2 1-.7 1.2-.3.1-.6.2-1 .2h-.5v.9h.4c.6 0 1.1.1 1.5.3s.5.6.5 1.2c0 .5-.2.9-.5 1.1s-.8.4-1.3.4c-.7 0-1.2-.2-1.5-.7-.2-.2-.3-.6-.3-1.2h-.9c0 .8.2 1.4.7 2s1.1 1.2 2.1 1.2z" class="st5"/><path id="path-1_00000034803777725963403770000011129917573981165737_" fill="none" stroke="currentColor" stroke-dasharray="4 4" stroke-width="2" d="M121 23h111c1.7 0 3 1.3 3 3v60c0 1.7-1.3 3-3 3H121c-1.7 0-3-1.3-3-3V26c0-1.7 1.3-3 3-3z"/><text class="st1 st2" font-size="12" transform="translate(136.262 66)">(authc & authz)</text><text class="st1 st2 st3" transform="translate(146.039 49)">Backends</text><path id="Line" d="M49.5 58.5h68" class="st8"/><path id="Line_00000121961267762808845640000010364369667984642713_" d="M235 58h33V43h72" class="st8"/><path id="Line_00000004503954216761257650000006390905151879665317_" d="M235 58h33v15h72" class="st8"/><circle id="Color_00000111914115155374229850000014908214200297383604_" cx="235" cy="26" r="12" class="st0"/><path id="_x31_" d="M235.9 30v-8.4h-.8c-.1.6-.4 1.1-.7 1.2s-.8.3-1.6.4v.8h2v6h1.1z" class="st5"/></svg>
from security-dashboards-plugin.
scrawfor99
commented on July 24, 2024
Hi @kgcreative, unfortunately the swap just makes it not show up at all. I went and made the changes manually to the existing SVG but also don't know that it is what we will want:
I would think we would want "oppositeColor" if such a thing existed?
Here is the manual changes I got when I swapped it
from security-dashboards-plugin.
scrawfor99
commented on July 24, 2024
How about this I made:
the code is:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="512px" height="114px" viewBox="0 0 512 114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>get_started</title>
<defs>
<rect id="path-1" x="118" y="23" width="117" height="66" rx="3"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="117" height="66" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="Signed-off" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Get-started---Security-Plugin---P1" transform="translate(-421.000000, -220.000000)">
<g id="get_started" transform="translate(421.000000, 220.000000)">
<g id="Group-2" transform="translate(384.000000, 66.000000)" filter="invert(100%)" fill="currentColor">
<g id="user" transform="translate(48.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user" transform="translate(24.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
</g>
<text id="Map-backend-roles" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" filter="invert(100%)" fill="currentColor">
<tspan x="356" y="111">Map backend roles</tspan>
</text>
<g id="Group-3" transform="translate(380.000000, 0.000000)" filter="invert(100%)" fill="currentColor">
<g id="user" transform="translate(24.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="user" transform="translate(48.000000, 0.000000)">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
</g>
<text id="Map-internal-users" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" filter="invert(100%)" fill="currentColor">
<tspan x="358.04748" y="41">Map internal users</tspan>
</text>
<g id="user" transform="translate(1.000000, 36.000000)" filter="invert(100%)" fill="currentColor">
<path d="M18.0332,15.1977 C19.7657,17.0307 20.9627,19.5162 21.3077,22.3197 C21.4157,23.2107 20.7062,23.9997 19.8077,23.9997 L19.8077,23.9997 L2.0102,23.9997 C1.1117,23.9997 0.4022,23.2107 0.5117,22.3197 C0.8552,19.5162 2.0522,17.0307 3.7847,15.1977 C4.1552,15.5397 4.5422,15.8607 4.9577,16.1472 C3.4007,17.7507 2.3102,19.9722 1.9997,22.5027 L1.9997,22.5027 L19.8077,22.4997 C19.5017,19.9707 18.4142,17.7507 16.8587,16.1472 C17.2757,15.8607 17.6627,15.5397 18.0332,15.1977 Z M10.90895,1.77635684e-15 C15.05045,1.77635684e-15 18.40895,3.3585 18.40895,7.5 C18.40895,11.6415 15.05045,15 10.90895,15 C6.76745,15 3.40895,11.6415 3.40895,7.5 C3.40895,3.3585 6.76745,1.77635684e-15 10.90895,1.77635684e-15 Z M16.29856,4.86398252 L16.1377444,4.940574 C15.6852333,5.13938333 15.1859,5.25045 14.6588,5.25045 C14.2118,5.25045 13.7903,5.15895 13.3928,5.01495 C12.3608,6.29295 10.8023,7.12545 9.0338,7.12545 C8.68505,7.12545 8.2963,7.13586667 7.89407778,7.13827639 L7.59029957,7.13829451 C6.64039076,7.13189207 5.65327638,7.05688596 4.96546976,6.67956678 C4.92804493,6.94690567 4.90895,7.22126022 4.90895,7.5 C4.90895,10.809 7.59995,13.5 10.90895,13.5 C14.21795,13.5 16.90895,10.809 16.90895,7.5 C16.90895,6.55479761 16.6893816,5.66002006 16.29856,4.86398252 Z" id="Color"></path>
</g>
<g id="Group" transform="translate(21.000000, 49.500000)">
<g id="Key" transform="translate(6.750000, 12.000000) rotate(45.000000) translate(-6.750000, -12.000000) ">
<path d="M6.75,0.705 L7.04221663,0.713181716 C8.59133216,0.790741631 9.98602868,1.48158176 11.0128014,2.55533101 C12.1149218,3.70787525 12.7941176,5.30077197 12.7941176,7.05882353 C12.7941176,8.34506395 12.4307061,9.54269141 11.8039264,10.5443722 C11.0819104,11.6982538 10.0106933,12.5924382 8.74506832,13.0576644 L8.74506832,13.0576644 L8.74418929,18.2319005 L7.39411765,18.958405 L7.39411765,21.0021514 C7.04508271,21.7396682 6.72733406,22.3005936 6.4341549,22.6805615 C6.30690613,22.8454793 6.21813177,23.0566742 6.09145031,23.0566742 C5.50066108,22.3869971 5.2006985,21.8869002 4.8707523,21.2305716 L4.8707523,21.2305716 L4.74902262,13.0554886 C3.48613048,12.5897123 2.41723272,11.6966806 1.69634378,10.544804 C1.06939839,9.54303566 0.705882353,8.34524878 0.705882353,7.05882353 C0.705882353,5.30077197 1.38507817,3.70787525 2.4871986,2.55533101 C3.57814462,1.41447244 5.08444211,0.705882353 6.75,0.705882353 L6.75,0.705 Z" id="Combined-Shape" filter="invert(100%)" stroke="currentColor" stroke-width="1.41176471"></path>
<ellipse id="Oval" filter="invert(100%)" fill="currentColor" cx="6.75" cy="7.05882353" rx="1.35" ry="1.41176471"></ellipse>
</g>
</g>
<text id="Role" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" filter="invert(100%)" fill="currentColor">
<tspan x="0" y="94.5">Role</tspan>
</text>
<g id="Group-5" transform="translate(33.000000, 14.000000)">
<circle id="↳🌈-Color" fill="#006BB4" cx="12" cy="12" r="12"></circle>
<path d="M14.7978516,16 L14.7978516,15.0039062 L10.2158203,15.0039062 C10.3173828,14.5898438 10.5634766,14.2128906 10.9541016,13.8730469 C11.1728516,13.6816406 11.4736328,13.4804688 11.8564453,13.2695312 L11.8564453,13.2695312 L12.6591797,12.8242188 C13.3662109,12.4296875 13.8564453,12.09375 14.1298828,11.8164062 C14.6025391,11.3398438 14.8388672,10.765625 14.8388672,10.09375 C14.8388672,9.45703125 14.6171875,8.87890625 14.1738281,8.359375 C13.7304688,7.83984375 13.0283203,7.58007812 12.0673828,7.58007812 C10.9111328,7.58007812 10.1044922,7.98632812 9.64746094,8.79882812 C9.38964844,9.25976562 9.25488281,9.85546875 9.24316406,10.5859375 L9.24316406,10.5859375 L10.3154297,10.5859375 C10.3310547,10.0664062 10.4130859,9.66015625 10.5615234,9.3671875 C10.8388672,8.8203125 11.3388672,8.546875 12.0615234,8.546875 C12.5498047,8.546875 12.9404297,8.69042969 13.2333984,8.97753906 C13.5263672,9.26464844 13.6728516,9.65234375 13.6728516,10.140625 C13.6728516,10.5585938 13.5126953,10.9296875 13.1923828,11.2539062 C12.9892578,11.4609375 12.6357422,11.7109375 12.1318359,12.0039062 L12.1318359,12.0039062 L11.0068359,12.6542969 C10.2529297,13.0917969 9.74609375,13.578125 9.48632812,14.1132812 C9.2265625,14.6484375 9.07714844,15.2773438 9.03808594,16 L9.03808594,16 L14.7978516,16 Z" id="2" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="Group" transform="translate(488.000000, 13.000000)">
<circle id="Color" fill="#006BB4" cx="12" cy="12" r="12"></circle>
<path d="M11.7802734,16.2285156 C12.7490234,16.2285156 13.4970703,15.9765625 14.0244141,15.4726562 C14.5517578,14.96875 14.8154297,14.3164062 14.8154297,13.515625 C14.8154297,13.015625 14.6914062,12.5927734 14.4433594,12.2470703 C14.1953125,11.9013672 13.8505859,11.6679688 13.4091797,11.546875 C13.6826172,11.4335938 13.9052734,11.2773438 14.0771484,11.078125 C14.3544922,10.7578125 14.4931641,10.3398438 14.4931641,9.82421875 C14.4931641,9.1015625 14.2587891,8.54980469 13.7900391,8.16894531 C13.3212891,7.78808594 12.6591797,7.59765625 11.8037109,7.59765625 C10.7216797,7.59765625 9.96582031,7.98828125 9.53613281,8.76953125 C9.28613281,9.20703125 9.16113281,9.73828125 9.16113281,10.3632812 L9.16113281,10.3632812 L10.2041016,10.3632812 C10.2236328,9.88671875 10.3076172,9.51953125 10.4560547,9.26171875 C10.7255859,8.79296875 11.2119141,8.55859375 11.9150391,8.55859375 C12.3095703,8.55859375 12.6552734,8.671875 12.9521484,8.8984375 C13.2490234,9.125 13.3974609,9.44726562 13.3974609,9.86523438 C13.3974609,10.4277344 13.1748047,10.8183594 12.7294922,11.0371094 C12.4755859,11.1621094 12.1513672,11.2246094 11.7568359,11.2246094 C11.6708984,11.2246094 11.5908203,11.2226562 11.5166016,11.21875 C11.4423828,11.2148438 11.3505859,11.2070312 11.2412109,11.1953125 L11.2412109,11.1953125 L11.2412109,12.1269531 C11.3154297,12.1230469 11.3886719,12.1201172 11.4609375,12.1181641 C11.5332031,12.1162109 11.6044922,12.1152344 11.6748047,12.1152344 C12.3037109,12.1152344 12.7949219,12.2304688 13.1484375,12.4609375 C13.5019531,12.6914062 13.6787109,13.0957031 13.6787109,13.6738281 C13.6787109,14.1425781 13.5107422,14.5253906 13.1748047,14.8222656 C12.8388672,15.1191406 12.3935547,15.2675781 11.8388672,15.2675781 C11.1240234,15.2675781 10.6298828,15.046875 10.3564453,14.6054688 C10.2001953,14.359375 10.0986328,13.9648438 10.0517578,13.421875 L10.0517578,13.421875 L8.95019531,13.421875 C8.95019531,14.203125 9.17382812,14.8662109 9.62109375,15.4111328 C10.0683594,15.9560547 10.7880859,16.2285156 11.7802734,16.2285156 Z" id="3" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<use id="Rectangle" filter="invert(100%)" stroke="currentColor" mask="url(#mask-2)" stroke-width="3" stroke-dasharray="4,4" xlink:href="#path-1"></use>
<text id="(authc-&-authz)" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.0599999964" filter="invert(100%)" fill="currentColor">
<tspan x="136.2625" y="66">(authc & authz)</tspan>
</text>
<text id="Backends" font-family="Helvetica" font-size="14" font-weight="normal" letter-spacing="-0.0699999958" filter="invert(100%)" fill="currentColor">
<tspan x="146.038789" y="49">Backends</tspan>
</text>
<g id="Group-4" transform="translate(223.000000, 14.000000)">
<circle id="Color" fill="#006BB4" cx="12" cy="12" r="12"></circle>
<path d="M12.9111328,16 L12.9111328,7.64453125 L12.0791016,7.64453125 C11.9306641,8.29296875 11.7060547,8.70410156 11.4052734,8.87792969 C11.1044922,9.05175781 10.5732422,9.17578125 9.81152344,9.25 L9.81152344,9.25 L9.81152344,10.0585938 L11.7861328,10.0585938 L11.7861328,16 L12.9111328,16 Z" id="1" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<line x1="49.5" y1="58.5" x2="117.5" y2="58.5" id="Line" filter="invert(100%)" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4"></line>
<path d="M235,58 L268,58 L268,43 L340,43" id="Line" filter="invert(100%)" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4"></path>
<path d="M235,73 L268,73 L268,58 L340,58" id="Line" filter="invert(100%)" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-dasharray="4,4" transform="translate(287.500000, 65.500000) scale(1, -1) translate(-287.500000, -65.500000) "></path>
</g>
</g>
</g>
</svg>
So it should always be the opposite of the current color
from security-dashboards-plugin.
scrawfor99
commented on July 24, 2024
Unfortuantely it is invisible in light mode...
from security-dashboards-plugin.
scrawfor99
commented on July 24, 2024
Gonna go with this
from security-dashboards-plugin.
KrooshalUX
commented on July 24, 2024
@scrawfor99 Thanks for posting the screenshots - to confirm, is this approach using sass variables from OUI ouiColorMedium or ouiColorDark or something custom to change light vs dark?
The OUI Sass variables provided have different hex values based on light or dark mode applied, so they already are self-adjusting. These will also adjust depending on theme, which we have a new one launching soon - and any sort of customized color may not provide the correct contrast.
Examples from https://oui.opensearch.org/1.2/#/guidelines/colors :
@kgcreative or @AMoo-Miki - can you provide further guidance?
@kgcreative I think your latest .svg removed the blue-color circles, correct?
from security-dashboards-plugin.
kgcreative
commented on July 24, 2024
My latest .svg removes the blue-color circles, yes, but the caveat here is you may need to inline it in order to actually correctly show the functionality. You can't do it as an<img> link, it needs to be inlined and included in the file. Example from codepen: https://codepen.io/kgcreative/pen/yLQZBPj
the nice thing about this, is that if you set color="cssVariableName", then when that variable changes in the theme, you'll get that for free.
@AMoo-Miki - do you know if we have any utilities in OSD to inline SVGs?
from security-dashboards-plugin.
scrawfor99
commented on July 24, 2024
Hi @KrooshalUX, @AMoo-Miki, and @kgcreative, I just took the hex from the theme and did it manually. I recognize this may not be what you intended however...
For you suggestion Kevin, I am not sure how to inline the SVG since the EUIImage seems to expect url for the image which it uses as a component. If we want to inline the SVG, we will need to be able to wrap it in the TSX file I believe. I am not sure what the process of doing this is though. I found this S/O post: https://stackoverflow.com/questions/59516405/not-able-to-import-svg-image-into-my-typescript-application. Should I use the same tool the post suggests or do we have a better mechanism?
I need to add it inline to this block:
<EuiSpacer size="l" />
{props.config.ui.backend_configurable && (
<div className="text-center">
<EuiImage
size="xl"
alt="Three steps to set up your security"
url={securityStepsDiagram}
style={{ maxWidth: '100%', height: 'auto', width: 'auto'}}
/>
</div>
)}
Specifically it is the steps diagram.
from security-dashboards-plugin.
scrawfor99
commented on July 24, 2024
Closing this issue since any last steps will be completed here: #1471
from security-dashboards-plugin.
Related Issues (20)
- [AUTOCUT] Integration Test failed for securityDashboards: 3.0.0 tar distribution HOT 8
- [AUTOCUT] Integration Test failed for securityDashboards: 2.11.0 tar distribution HOT 3
- [Campaign] Ensure Github workflow runs on docker image used by Production Distribution Build HOT 8
- [RELEASE] Release version 2.12.0 HOT 1
- [BUG] Integration Test Failures after OpenSearch node reaches high watermark HOT 3
- [CI] Re-enable Cypress workflow run HOT 2
- [BUG] 2.11 Deleting log type fails HOT 3
- Improve stability and speed of the integration tests running on the Windows runner
- [BUG] Dashboards permalink and iframe losses url param JWT on internal API calls HOT 14
- Stabilize CI for dashboards repo HOT 4
- [BUG] 1.3.12 Short URL raises 400 error during SAML login HOT 4
- [FEATURE] Add UI support to add existing roles while creating a user HOT 1
- [BUG] Opensearch logout trggier by wrong api call in devtool console from Firefox HOT 1
- [BUG] Security cookie could be too large when using JWT auth type HOT 5
- `Global` showing in user dropdown when multi-tenancy is disabled HOT 4
- [Action Required] Ensure 2.11 branch readiness for 2.11.1 release HOT 2
- [AUTOCUT] Integration Test failed for securityDashboards: 3.0.0 tar distribution HOT 169
- [BUG] Client certificates not used with openid auth endpoints HOT 3
- [Enhancement] Implement Cypress 13 frame work to security dashboard plugin HOT 1
- [AUTOCUT] Integration Test failed for securityDashboards: 2.11.1 tar distribution HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from security-dashboards-plugin.