-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
[Color system] opacity (Card, Popover, Modal, Navigation) #2366
Conversation
src/utilities/theme/utils.ts
Outdated
lightness: 0, | ||
alpha: 0.15, | ||
}, | ||
opacityDeep: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
opacityDeep: { | |
backdrop: { |
src/utilities/theme/utils.ts
Outdated
@@ -258,6 +259,29 @@ function successColors(color: HSLAColor, lightSurface: boolean) { | |||
}; | |||
} | |||
|
|||
function opacityColors() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pedantic as this is function name is private, but:
function opacityColors() { | |
function translucentColors() { |
src/utilities/theme/utils.ts
Outdated
@@ -258,6 +259,29 @@ function successColors(color: HSLAColor, lightSurface: boolean) { | |||
}; | |||
} | |||
|
|||
function opacityColors() { | |||
return { | |||
opacityShallow: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
opacityShallow: { | |
diffuseShadow: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Though I found myself explaining this as:
opacityShallow: { | |
shadowFromAmbientLight: { |
src/utilities/theme/utils.ts
Outdated
lightness: 8, | ||
alpha: 0.05, | ||
}, | ||
opacity: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
opacity: { | |
concentratedShadow: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And like this:
opacity: { | |
shadowFromDirectLight: { |
7a3a2df
to
1481518
Compare
1f4cd23
to
eaa9b45
Compare
Going to merge this into #2361 so we can test changes on that branch. |
No description provided.