Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(OUI Next Theme) Security #1527

Closed
2 tasks done
Tracked by #895 ...
KrooshalUX opened this issue Jul 25, 2023 · 23 comments
Closed
2 tasks done
Tracked by #895 ...

(OUI Next Theme) Security #1527

KrooshalUX opened this issue Jul 25, 2023 · 23 comments
Assignees
Labels
good first issue Good for newcomers triaged ux / ui User Experience / Inferface related issues v2.10.0

Comments

@KrooshalUX
Copy link

KrooshalUX commented Jul 25, 2023

This issue to be transferred to corresponding repository

I am working on launching new light and dark mode themes provided by OUI component library for a target launch within 2.10. These changes support the vision expressed in Future Vision for Dashboards

I have identified the following front end related issues that prevent the theme from appearing complete and potential solutions within this feature:

  • Image is difficult to see / hard to read in dark mode. Modify SVG and set to color 'euiColorMediumShade' in order to set appropriate coloring for any theme including light/dark modes
Screen Shot 2023-07-25 at 5 00 59 PM
  • Audit logs - consider migrating key value pairs to EuiDescriptionList to ensure correct styling
Screen Shot 2023-07-25 at 4 58 42 PM Screen Shot 2023-07-25 at 4 58 47 PM
@wbeckler wbeckler transferred this issue from opensearch-project/oui Jul 27, 2023
@peternied peternied added ux / ui User Experience / Inferface related issues good first issue Good for newcomers and removed untriaged labels Jul 27, 2023
@peternied
Copy link
Member

Thanks for filing

@stephen-crawford
Copy link
Contributor

[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.

@stephen-crawford
Copy link
Contributor

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-&amp;-authz)" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.0599999964" fill="#343741">
                    <tspan x="136.2625" y="66">(authc &amp; 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.

@stephen-crawford stephen-crawford self-assigned this Aug 1, 2023
@davidlago
Copy link

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?)

@davidlago
Copy link

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.

@KrooshalUX
Copy link
Author

KrooshalUX commented Aug 1, 2023

@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.

@stephen-crawford
Copy link
Contributor

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-&amp;-authz)" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.0599999964" fill="$ouiColorGhost">
                    <tspan x="136.2625" y="66">(authc &amp; 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?

@KrooshalUX
Copy link
Author

@scrawfor99 - @kgcreative may have additional change suggestions for the SVG, so tagging him in as well.

@stephen-crawford
Copy link
Contributor

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-&amp;-authz)" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.0599999964" fill="$ouiColorGhost">
                    <tspan x="136.2625" y="66">(authc &amp; 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>

@davidlago
Copy link

@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).

@stephen-crawford
Copy link
Contributor

stephen-crawford commented Aug 1, 2023

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?

Screenshot 2023-08-01 at 10 55 27 AM

@davidlago
Copy link

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?

@KrooshalUX
Copy link
Author

KrooshalUX commented Aug 1, 2023

@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

@kgcreative
Copy link
Member

kgcreative commented Aug 1, 2023

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:&quot;Helvetica&quot;}.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 &amp; 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>

@stephen-crawford
Copy link
Contributor

Screenshot 2023-08-01 at 3 50 04 PM

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
Screenshot 2023-08-01 at 3 51 51 PM

@stephen-crawford
Copy link
Contributor

How about this I made:

Screenshot 2023-08-01 at 4 06 25 PM

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-&amp;-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 &amp; 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

@stephen-crawford
Copy link
Contributor

Screenshot 2023-08-01 at 4 07 53 PM

Unfortuantely it is invisible in light mode...

@stephen-crawford
Copy link
Contributor

Screenshot 2023-08-01 at 4 47 30 PM

Gonna go with this

@KrooshalUX
Copy link
Author

KrooshalUX commented Aug 1, 2023

@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 :
Screen Shot 2023-08-01 at 2 32 58 PM
Screen Shot 2023-08-01 at 2 33 05 PM

@kgcreative or @AMoo-Miki - can you provide further guidance?
@kgcreative I think your latest .svg removed the blue-color circles, correct?

@kgcreative
Copy link
Member

kgcreative commented Aug 1, 2023

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?

@stephen-crawford
Copy link
Contributor

stephen-crawford commented Aug 2, 2023

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.

@AMoo-Miki
Copy link
Contributor

I will raise a PR in a bit.

@stephen-crawford
Copy link
Contributor

Closing this issue since any last steps will be completed here: #1471

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers triaged ux / ui User Experience / Inferface related issues v2.10.0
Projects
None yet
Development

No branches or pull requests

6 participants