Spectrun CSS Button Design

[pdophoto]

Hi everyone,
OK I am frustrated enough to ask a question. I am porting my private Photoshop Tools panel from CEP to UXP. (2 Configurators, CEP and now UXP) This panel contains about 200 buttons & 5 sliders so I need to control the design of these elements.
This is the my button style:
sp-button.darkGray {
box-shadow:inset 0px 1px 1px 0px #7d7d7d;
background:linear-gradient(to bottom, #999999 7.5%, #2c2c2c 100%);
border-radius:4px;
border:1px solid #000000;
display:inline-block;
padding: 0px 2px 0px 2px;
color:#e6e6e6;
font-family:Arial;
font-size:11px;
justify-self: center;
height:20px;
outline: none;
}
I have others with different background color.
First row = Results
Second row from my CEP panel is what I want

Can someone help me on the following?
How to get ride of the super ugly blue line around the buttons?
How to specify the length, I can lengthen but not shorten the buttons?
How to put an icon other than the 2 zoom icons available in Spectrum CSS? (There aren’t any for Photoshop TOOLS)

Sorry for the large post but I hope it’s clear enough
Pierre

[kerrishotts]

You’re close. If you want to use sp-button here, use a quiet variant="secondary" version. This avoids the extra border color.

Or if you want full control: use <div> with an appropriate aria-role="button" and maybe tabindex="0" if you want TAB to work.

Note that you can use most SVG icons but the Ps tools themselves are not available for use – you’ll have to use your own icons (or use Spectrum’s).

Here’s an example of what I came up with (Note that the box-shadow feature is not supported in UXP; I simulate it with some :before and :after pseudo elements). (Code after image)

<style>
.darkGray {
    min-width: 0;
    position: relative;
    background:linear-gradient(to bottom, #999999 7.5%, #2c2c2c 100%);
    border-radius: 4px;
    display:inline-block;
    padding: 0 1em;
    color:#e6e6e6;
    font-family:Arial, Helvetica;
    font-size:11px;
    font-weight: normal;
    text-align: center;
    height:20px;
    line-height: 20px;
    vertical-align: middle;
}
.darkGray:before {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid black;
    border-radius: 4px;
}
.darkGray:after {
    position: absolute;
    top: 1px; left: 1px; right: 1px; bottom: 1px;
    border: 1px solid #7d7d7d30;
    border-radius: 3px;
}
.darkGray:hover {
    color: white;
}
.darkGray:active { /* click effect */
    outline: 1px solid rgba(0,0,0,0); /* bug: force full update on click */
    background:linear-gradient(to top, #999999 7.5%, #2c2c2c 100%);    
}
.darkGray:focus { /* if you want a focus ring */
    outline: 3px solid rgba(64,172,255,0.75);
    outline-radius: 7px;
}
.darkGray svg { /* position the icon */
    fill: currentColor;
    width: 14px; height: 14px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-right: 1em;
}
</style>

<div style="margin: 1em">
  <sp-detail>USING DIVS</sp-detail>
  <sp-divider style="margin: 1em 0"></sp-divider>
  <div aria-role="button" class="darkGray">Click</div>
  <div aria-role="button" variant="secondary" quiet class="darkGray">
    <svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 18 18" width="14" >
      <path class="a" d="M10.75,7H9V5.25A.25.25,0,0,0,8.75,5H7.25A.25.25,0,0,0,7,5.25V7H5.25A.25.25,0,0,0,5,7.25v1.5A.25.25,0,0,0,5.25,9H7v1.75a.25.25,0,0,0,.25.25h1.5A.25.25,0,0,0,9,10.75V9h1.75A.25.25,0,0,0,11,8.75V7.25A.25.25,0,0,0,10.75,7Z" />
      <path class="a" d="M17.587,16.1075,13.628,12.15a7.0155,7.0155,0,1,0-1.478,1.4785l3.958,3.958a1.05,1.05,0,0,0,1.479-1.479ZM3,8a5,5,0,1,1,5,5A5,5,0,0,1,3,8Z" />
    </svg>Zoom
  </div>
  <div aria-role=button" class="darkGray" tabindex="0">With Focus Ring</div>
</div>
<div style="margin: 2em 1em">
  <sp-detail>USING QUIET SECONDARY SP-BUTTONS</sp-detail>
  <sp-divider style="margin: 1em 0"></sp-divider>
  <sp-button variant="secondary" quiet class="darkGray">Click</sp-button>
  <sp-button variant="secondary" quiet class="darkGray">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
      <path class="a" d="M10.75,7H9V5.25A.25.25,0,0,0,8.75,5H7.25A.25.25,0,0,0,7,5.25V7H5.25A.25.25,0,0,0,5,7.25v1.5A.25.25,0,0,0,5.25,9H7v1.75a.25.25,0,0,0,.25.25h1.5A.25.25,0,0,0,9,10.75V9h1.75A.25.25,0,0,0,11,8.75V7.25A.25.25,0,0,0,10.75,7Z" />
      <path class="a" d="M17.587,16.1075,13.628,12.15a7.0155,7.0155,0,1,0-1.478,1.4785l3.958,3.958a1.05,1.05,0,0,0,1.479-1.479ZM3,8a5,5,0,1,1,5,5A5,5,0,0,1,3,8Z" />
    </svg>Zoom
  </sp-button>
  <sp-button variant="secondary" quiet class="darkGray"> <!-- icon from icomoon.io -->
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8zM14 6h-4v4h-4v4h4v4h4v-4h4v-4h-4z"></path>
    </svg>110%
  </sp-button>
  <sp-body size="XS" style="margin-top: 1em">Note: all have focus rings; delete :focus to remove.</sp-body>
</div>

[Pierre_G]

Hi!
Please be sure to check this page out, showing CSS supported styles

As you can see, there is no support for box-shadow, so you can delete that form your code.

To get the text horizontally centered you’d need to add text-align: center;

To have the text vertically aligned, give your button a line-height :
line-height: 18px; Adjust it to get the text exactly where you want it vertically. That will make PC and Mac to render it properly.

Also check out this link to Known issues in UXP

You’ll find out that <sp-...> elements has got different styling scope compared to a regular (non UXP) <button>. In other words, if you need more control over your button look, disguise it as a <div>

In your Panel HTML code, you might want to replace <sp-button> with <sp-action-button>

Action buttons INFO

.

sp-button INFO

.

Further, may I suggest to check out UXP sample code from the Kitchen Sink panel: ui-kitchen-sink

You’d see the syntax for typography and user interface elements and much more

Hope this helps.
Pierre.

[pdophoto]

Thank you so much Kerri, It looks so easy for you.
I will orient as you suggest.

[pdophoto]

Thank you Pierre_G.
I will follow your directives but, I am not fluent at any programming language. I only manage to grab things here and there.
I have 4 panels to port so, you will see me asking questions.

Thanks