search

globalbrain / sefirot

Global Brain Design System.
https://sefirot.globalbrains.com
MIT License
151 stars 12 forks source link

[Table] Add a way to apply `font-feature-settings` css class to `text` cell #506

Closed kiaking closed 6 months ago

kiaking commented 6 months ago

There are cases when I want to specify font-feature-settings to text cell. For example, when we have padded ID listed in the table. e.g.:

By setting font-feature-settings: "tnum", we can make these numbers aligned.

Maybe add css variable like --table-cell-font-feature-settings?

/* Specify in component */
:deep(.table) {
  --table-col-width: 128px;
  --table-cell-font-feature-settings: "tnum";
}
brc-dd commented 6 months ago

how is it different from just specifying:

:deep(.table) {
  font-feature-settings: "tnum"
}
kiaking commented 6 months ago

Ah sorry my example was bad. I want certain cell only. But wait, would this work? I mean font-feature-settings will always be inherited? I wanted to actually do this.

.table :deep(.col-id) {
  font-feature-settings: "tnum";
}
brc-dd commented 6 months ago

Yeah seems to work fine in story. Everything related to font is inherited I guess.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings#formal_definition (yup, always inherited)

kiaking commented 6 months ago

Ah OK! then we can just do that 👍 Thanks!