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

Border widths #311

Closed
karuto opened this issue Oct 22, 2018 · 7 comments · May be fixed by #428
Closed

Border widths #311

karuto opened this issue Oct 22, 2018 · 7 comments · May be fixed by #428

Comments

@karuto
Copy link
Collaborator

karuto commented Oct 22, 2018

I know that we didn't put the entire border declaration into the OTKit-borders token because we haven't decided how to let tokens reference each other yet.

But how about widths? I commonly see 1px, 2px etc. Is there a guideline on this? @mannionaco

@mannionaco
Copy link
Contributor

1px ash-lighter (d8d9db) is default for border buttons
2px red (da3743) is hover and select state for border buttons, this is the only representation that I'm aware of that 2px should be being use for. Do you have additional use cases?

Button documentation from the OTKit wiki

@karuto
Copy link
Collaborator Author

karuto commented Oct 22, 2018

I think that's the 2 use cases I found. I see them a lot. Although 1px d8d9db is also quite commonly used as border-bottom and dividers.

Do you think we should just provide a grouping then? Maybe for now, use the hex directly instead of figuring out how to reference the OTKit-colors? Like so:

border-default:
  value: "1px solid #d8d9db"

border-hover:
  value: "2px solid #da3743"

I suck at names you should come up with names that make sense in design system, but you get my idea? @mannionaco

@mannionaco
Copy link
Contributor

i see, so there may be confusion when applying "border" as "dividing line"

i think it makes sense that they are separate:

dividing-line-default:
value "1px ash-lighter or hex value representation"

border-default:
value "1px ash-lighter or hex value representation"

border-hover (since this is being consumed in web i think it makes most sense to use words that are common, i use "active" as a global name vs by platform, but that's just me"
value "2px ash-lighter or hex value representation"

border-selected (not sure if we need this? - probably make sense though, it's clear)
value "1px ash-lighter or hex value representation"

what do you think?

@karuto
Copy link
Collaborator Author

karuto commented Feb 12, 2019

Hey Kellen @mannionaco, sorry I dropped the ball on this one. I think we still need to proceed with this approach, to put the entire divider definition into the borders token. Let me know if you have a more updated spec now, we can work together on this.

@mannionaco
Copy link
Contributor

@karuto i'll tag you in (abstract) the refined button styles so that our naming is clear. border-hover still applies and shouldn't be "active" as I reference above.

border-selected = 2px red (not what i listed above)

@karuto
Copy link
Collaborator Author

karuto commented Feb 12, 2019

Thanks @mannionaco will talk to you in person about this

@karuto
Copy link
Collaborator Author

karuto commented Feb 22, 2019

Resolved by #428, moving the discussion over.

@karuto karuto closed this as completed Feb 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants