chore(css): go over and make consistent, highlight issues #3002
Conversation
|
|
Preview deployments for this pull request: Storybook - |
Coverage Report
File CoverageNo changed files found. |
packages/css/src/alert.css
Outdated
| padding-block: var(--dsc-alert-padding); | ||
| padding-inline: calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding); | ||
| padding-block: var(--dsc-alert-padding-block); | ||
| padding-inline: calc(var(--dsc-alert-padding-block) + var(--dsc-alert-icon-size) + var(--dsc-alert-spacing)) var(--dsc-alert-padding-block); |
There was a problem hiding this comment.
Her er padding-block brukt til padding-inline, og dersom man sender inn padding-block: 1rem 2rem (som er mulig i vanlig padding-block) så brekker det. Skulle vi ha funnet på enda et ord her?
eller evt. gjort om så det er:
--dsc-alert-padding => --dsc-alert-spacing
--dsc-alert-gap => --dsc-alert-icon-spacing
There was a problem hiding this comment.
For å sitere meg sjølv:
border: now uses two properties. The color is a variable, and the width and style is a css prop.
Denne gjelder der samme border ikkje er brukt fleire plassa. table fks, burde ha eigen variabel for border:
There was a problem hiding this comment.
Ser ut som eg har greid å lagt denne kommentaren på feil plass, eg skal sjekke dette ut.
There was a problem hiding this comment.
Eg har endra denne til å bruke eksplisitte css props, Det vil no sjå slik ut:
--dsc-alert-padding-block: var(--ds-size-6);
--dsc-alert-padding-inline-end: var(--ds-size-6);
padding-block: var(--dsc-alert-padding-block);
padding-inline-start: calc(var(--dsc-alert-padding-inline-end) + var(--dsc-alert-icon-size) + var(--dsc-alert-spacing));
padding-inline-end: var(--dsc-alert-padding-inline-end);Eg er ikkje veldig fornøgd med løysingen, men det er bedre.
#2638 ## Highlights: - Sometimes we use a var `-color`, and then use it for `background:`. In these cases it is to add color to an icon - so the usage is correct. `badge.css` is an example of this. - We use the word `spacing` in our tokens quite a bit. This is reserved for where we use it to do more than just set a property. For example in padding, but also in a calc for `margin-inline` - We were incosistent in placement of css props on the root classname. I moved this to just after the initial css var definitions. - Where we have used vars for icons, all of them have been changed to use `-icon`. `Details` had `chevron`, for example. `Search` is an exception to this, as it has multiple icons. Both of them are named in this case, - We only use `background`, not `background-color` - `border:` now uses two properties. The color is a variable, and the width and style is a css prop, unless used multiple places in the same component. `border` and `border-color` will still stay as separate vars **`combobox.css` has not been touched**
#2638
Highlights:
-color, and then use it forbackground:. In these cases it is to add color to an icon - so the usage is correct.badge.cssis an example of this.spacingin our tokens quite a bit. This is reserved for where we use it to do more than just set a property. For example in padding, but also in a calc formargin-inline-icon.Detailshadchevron, for example.Searchis an exception to this, as it has multiple icons. Both of them are named in this case,background, notbackground-colorborder:now uses two properties. The color is a variable, and the width and style is a css prop, unless used multiple places in the same component.borderandborder-colorwill still stay as separate varscombobox.csshas not been touched