[community-group] $grid type (#222)

PavelLaptev has just created a new issue for https://github.com/design-tokens/community-group:

== $grid type ==
What do you think about the `$grid` type for design tokens? In web development, we often use grids, but I'm wondering if it could also be helpful for other developer areas like iOS/Android. 

CSS grid — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
Swift UI — has the grid concept https://developer.apple.com/documentation/swiftui/grid
Android API — https://developer.android.com/reference/android/widget/GridLayout#attr_android:orientation

Figma API — https://www.figma.com/plugin-docs/api/LayoutGrid
Penpot implementation — https://community.penpot.app/t/sneak-peek-on-upcoming-penpots-grid-layout-plus-flex-layout-combo/3027

Here are my proposals. The first one is good to provide only one direction per token, which could be not so good, because there could be `row` and `columns` at the same time:

```ts
GridToken {
  $type: "grid";
  $value: {
    direction: "row" | "column";
    count: NumberTokenI;
    gap: DimensionTokenI | string;
    margin: DimensionTokenI | string;
  };
}
```

And the most universal approach:
```ts
GridToken {
  $type: "grid";
  $value: {
    columnCount: number;
    columnGap: DimensionStringType;
    columnWidth: DimensionStringType;
    columnMargin: DimensionStringType;
    rowCount: number;
    rowGap: DimensionStringType;
    rowHeight: DimensionStringType;
    rowMargin: DimensionStringType;
  };
}
```

Any thoughts? 

Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/222 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 9 July 2023 14:29:47 UTC