Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Deprecate the $spacing- variables #10686

Merged
merged 2 commits into from
Apr 21, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions res/css/_font-sizes.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

/*
* SCSS variables defining a range of font sizes.
*
* These are defined in `rem` so that they scale with the `font-size` of the root element (which is adjustable via the
* "Font size" setting). They exist to make the job of converting designs (which tend to be based in pixels) into CSS
* easier.
*
* That means that, slightly confusingly, `$font-10px` is only *actually* 10px at the default font size: at a base
* `font-size` of 15, it is actually 15px.
*/
$font-1px: 0.1rem;
$font-1-5px: 0.15rem;
$font-2px: 0.2rem;
Expand Down
12 changes: 10 additions & 2 deletions res/css/_spacing.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

/* 1rem :: 10px */

/* SCSS variables representing a range of standard lengths.
*
* Avoid using these in new code: we cannot adjust their values without causing massive confusion, so they are
* effectively equivalent to using hardcoded values.
*
* In future, we plan to introduce variables named according to their purpose rather than their size. Additionally,
* we want switch to custom CSS properties (https://github.com/vector-im/element-web/issues/21656), so we might have
* `--spacing-standard` or something. For now, you might as well use hardcoded px values for lengths (except for font
* sizes, for which see the `$font-<N>px` variables).
Comment on lines +22 to +25
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this will be done as part of what https://github.com/vector-im/compound-design-tokens outputs.
I've commented on the linked issue to explain a rough path to a better future

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

*/
$spacing-2: 2px;
$spacing-4: 4px;
$spacing-8: 8px;
Expand Down