Replace the CSS Spacing System with the provided Figma Styles

Created on 25 March 2024, 8 months ago
Updated 12 April 2024, 8 months ago

Problem/Motivation

The spacing around the navigation system should reflect the sizes defined in the Figma designs.

Proposed resolution

Update all the existing spacing scale with the new values (even the colors not used yet) and replace the existing ones. Until we have a layer of abstraction for layer usages we should use direct variable names, like --admin-toolbar-space-24.

For example, from:
--admin-toolbar-space-l: var(--drupal-admin-space-l, calc(1.5 * var(--admin-toolbar-rem))); /* 1.5 * 16px = 24px */
We should move to:
--admin-toolbar-space-24: var(--drupal-admin-space-24, calc(1.5 * var(--admin-toolbar-rem))); /* 1.5 * 16px = 24px */

Important note: we're moving away from "T-shirt size" to use the value from px on the name. This will allow us add any needed value in the future without breaking the scale and establish a correlation with the design values set on Figma.

Figma link

Remaining tasks

  • Update the scale system
  • Update all the existing values on the current code base.

User interface changes

There shouldn't be visual changes.

πŸ“Œ Task
Status

Fixed

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States KeyboardCowboy Denver, CO, USA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @KeyboardCowboy
  • Status changed to Active 8 months ago
  • πŸ‡ͺπŸ‡ΈSpain ckrina Barcelona

    Ready to start working on this.

  • πŸ‡·πŸ‡ΊRussia kostyashupenko Omsk

    It's better wait for https://www.drupal.org/project/navigation/issues/3427659 πŸ“Œ Implement drawer functionality Needs review first

  • πŸ‡ͺπŸ‡ΈSpain ckrina Barcelona

    The work for the rest of the code base can start happening already. I moved this to ready consciously because it's better if we have this in before we start with the styles refactor from [#3427657. So this is ready to work on.

  • Assigned to bronzehedwick
  • πŸ‡ΊπŸ‡ΈUnited States bronzehedwick New York
  • Merge request !207Issue #3435978: Replace spacing system β†’ (Merged) created by bronzehedwick
  • Issue was unassigned.
  • Status changed to Needs review 8 months ago
  • πŸ‡ΊπŸ‡ΈUnited States bronzehedwick New York
  • Pipeline finished with Success
    8 months ago
    Total: 296s
    #131864
  • πŸ‡ͺπŸ‡ΈSpain ckrina Barcelona

    ckrina β†’ changed the visibility of the branch 3435978-replace-the-css to hidden.

  • Pipeline finished with Success
    8 months ago
    Total: 208s
    #131891
  • Status changed to Fixed 8 months ago
  • πŸ‡ͺπŸ‡ΈSpain ckrina Barcelona

    Merged! Thank you!

    Also @vensires I see you're adding the tag for a sprint on April 10th (GreeceSpringSprint2024). the Navigation is moving really fast because we want to try to open a MR to core during the week of April 8th. But I'm happy to coordinate with issues closer to the sprint date :)

  • πŸ‡¬πŸ‡·Greece vensires

    Hello @ckrina,
    if everything goes well we will meet you in DrupalCon Barcelona :)

    Yes, on April 10th we have the GreeceSpringSprint2024 β†’ event. If you have anything you want for us to tackle, gladly! I also worked on this module in the Contribution Day in DrupalCon Lille, so I know the hard work you are doing! Don't hesitate to contact me for anything you might need!

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • Pipeline finished with Failed
    6 months ago
    Total: 168s
    #174895
  • Pipeline finished with Failed
    6 months ago
    Total: 52s
    #174899
  • Pipeline finished with Success
    6 months ago
    Total: 54s
    #174900
  • Pipeline finished with Success
    6 months ago
    Total: 160s
    #174901
  • Pipeline finished with Success
    6 months ago
    Total: 52s
    #177758
  • Pipeline finished with Success
    6 months ago
    Total: 55s
    #178119
  • Pipeline finished with Success
    6 months ago
    Total: 52s
    #178916
  • Pipeline finished with Failed
    3 months ago
    Total: 638s
    #264891
  • Pipeline finished with Success
    3 months ago
    Total: 612s
    #264906
  • Pipeline finished with Success
    3 months ago
    Total: 727s
    #265898
  • Pipeline finished with Success
    3 months ago
    Total: 497s
    #266097
  • Pipeline finished with Canceled
    3 months ago
    Total: 370s
    #267108
  • Pipeline finished with Success
    3 months ago
    Total: 573s
    #267113
  • Pipeline finished with Success
    3 months ago
    Total: 448s
    #267335
  • Pipeline finished with Failed
    3 months ago
    Total: 493s
    #267358
  • Pipeline finished with Success
    3 months ago
    Total: 487s
    #267378
  • Pipeline finished with Success
    3 months ago
    #268377
  • Pipeline finished with Skipped
    3 months ago
    #268395
  • Pipeline finished with Failed
    2 months ago
    Total: 443s
    #284386
  • Pipeline finished with Failed
    2 months ago
    Total: 373s
    #285240
  • Pipeline finished with Failed
    2 months ago
    Total: 351s
    #285755
  • Pipeline finished with Failed
    2 months ago
    Total: 291s
    #287665
  • Pipeline finished with Failed
    2 months ago
    Total: 381s
    #287673
  • Pipeline finished with Failed
    2 months ago
    Total: 291s
    #287681
  • Pipeline finished with Failed
    2 months ago
    Total: 301s
    #287684
  • Pipeline finished with Failed
    2 months ago
    Total: 288s
    #287719
  • Pipeline finished with Success
    2 months ago
    Total: 301s
    #287974
  • Pipeline finished with Success
    2 months ago
    Total: 144s
    #292283
  • Pipeline finished with Success
    2 months ago
    Total: 215s
    #292311
Production build 0.71.5 2024