Add configurable borders #20226
Add configurable borders #20226
Conversation
There was a border-outline style that was visually nearly identical that was hardly ever used. The places it was used in felt like more of an oversight / inconsistent usage than intentional, so I've opted to standardize it to the same configured radius
🦋 Changeset detectedLatest commit: e06cd81 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Some "beauty" shots from earlier experiments:
CleanShot_2023-10-27_at_18.31.17.mp4 |
There was a problem hiding this comment.
Seems like --v-divider-color is updated to use input border color here:
directus/app/src/components/v-divider.vue
Line 30 in 01f830a
which made the dividers in navigation bar "blends" into the background and may be perceived as transparent:
Not saying this is an issue though since it can be tweaked easily.
Though with that context, it seems like certain dividers such as ones in User navigation:
directus/app/src/modules/users/components/navigation.vue
Lines 52 to 54 in 01f830a
overrides it with other value. I assume we should remove this style for consistency?
There are a two other instances that I'm not sure should we remove them, so I'm listing them here to make it easier for you to verify:
| @@ -143,7 +143,7 @@ body { | |||
| width: 100%; | |||
| background-color: transparent; | |||
| border: none; | |||
| border-bottom: 2px solid var(--border-normal); | |||
| border-bottom: 2px solid var(--theme--form--field--input--border-color); | |||
There was a problem hiding this comment.
Couldn't we use the var here as well?
| border-bottom: 2px solid var(--theme--form--field--input--border-color); | |
| border-bottom: var(--theme--border-width) solid var(--theme--form--field--input--border-color); |
* Add borderRadius rule * Standardize border radii There was a border-outline style that was visually nearly identical that was hardly ever used. The places it was used in felt like more of an oversight / inconsistent usage than intentional, so I've opted to standardize it to the same configured radius * Replace --border-radius with --theme--border-radius * Remove border radius from variables.scss * Remove default * Allow overriding v-input border-radius * Update legacy overrides * Default to 6px * Remove overrides * Update overrides to use v-input specific * Add LineWidth, fix schema output * Use border-width from theme * Add border colors for inputs * Use theme form colors for borders * Configurable box-shadow for input * Use configurable shadow * Add optional module bar border * Reduce white space * Add optional border to nav bar * Add configurable sidebar border * Add configurable header shadow * Add changeset * Run formatter * fix borderWidth for calc * Remove border-normal * Use border-width for 2px values where appropriate * Use theme border for avatar divider * Add rules for project info border * Add border support to project info * Add border support for section toggle * Run formatter --------- Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Scope
What's changed:
Potential Risks / Drawbacks
Review Notes / Questions
Fixes #20139