[PUI 2.0] Research Task - Document how we use loops within Sass files

[mrtrimble]

💰 Refactor

Determine where and how often we utilize Sass loops within Platform UI.

Benefits of refactor

Help determine how to utilize Sass going forward

Estimates

[mrtrimble]

Config

• Maps
  • Brand Colors
  • Config Colors
  • Site Colors
  • Breakpoints
  • Image Sizes
  • Radius
  • Loader Colors
  • Background Sizes

Layout

Blocks

• Loops
  • variable.$columns
  • config.$breakpoints
  • Margin & Padding letters
  • variables.$xy-border
  • variables.$spacers

Components

Buttons

• Maps
  • Button Colors
• Loop
  • Button colors

Errors

• Loops
  • Error colors

Images

• Loops
  • config.$image-size

Menus

• Maps
  • All Colors
• Loops
  • variables.$spacers
  • variables.$xy-border
  • All colors

Messages

• Loops
  • variables.$message-colors

Root

• Loop
  • All Colors (not doing anything)
  • config.$radius

Tooltip

• Loops
  • variables.$xy-border

Utilities

Background Image

• Loops
  • config.$bg-size

Borders

• Loops
  • variables.xy-borders
  • colors.all-colors

Colors

• Maps
  • Message Colors
  • Grayscale Colors
  • Error Colors
  • Utilities Colors
• Loops
  • All Colors
  • Error Colors

Display

• Maps
  • Displays
• Loops
  • config.$breakpoints
  • variables.$displays
  • $d in (s: show, h: hide) (This will be removed)

Flex

• Loops
  • variables.$flex-align
  • variables.$flex-direction
  • variables.$flex-justify

Other Utilities

• Cursors
  • Map
  • Cursor types
  • Loops
  • Cursor types
• Positions
  • Loops
  • variables.$positions
  • variables.$xy-borders
• Corners
  • Maps
  • Directions
  • Loops
  • variables.$spacers
  • $corners
  • Height & Weight
  • Loops
    • variables.$quarter-values
• Overflow
  • Loops
    • variables.$overflow

Spacers

• Loops
  • variables.$xy-border
  • variables.$spacers
  • $letter in (margin: m, padding: p) (This will most likely be removed with using fluid spacing.

Typography

• Loops
  • variables.$font-style
  • variables.$text-align
  • variables.$text-transform
  • variables.$greyscale
  • variables.$font-scale

Variables

• Other
  • Maps
  • Position
  • Border
  • Columns
  • Quarter Values
  • Overflow
• Radius
  • Maps
  • $radius
• Spacing
  • Maps
  • Spacers
• Typography
  • Maps
  • Font scale
  • Font style
  • Text align
  • Text transform
• Flex
  • Maps
  • Flex-align
  • Flex-direction
  • Flex-justify

[mrtrimble]

Added to wiki: https://github.com/ritterim/platform-ui/wiki/Sass-Loops---Maps