feat: flex

crates/skribble_preset/src/data/aliases.rs

@@ -171,5 +171,49 @@ lazy_static! {
  .name("backdrop-filter-none")
  .classes(vec!["backdrop-filter:$none"])
  .build(),
+ Alias::builder()
+ .name("flex-row")
+ .classes(vec!["flex-direction:$row"])
+ .build(),
+ Alias::builder()
+ .name("flex-row-reverse")
+ .classes(vec!["flex-direction:$row-reverse"])
+ .build(),
+ Alias::builder()
+ .name("flex-col")
+ .classes(vec!["flex-direction:$col"])
+ .build(),
+ Alias::builder()
+ .name("flex-col-reverse")
+ .classes(vec!["flex-direction:$col-reverse"])
+ .build(),
+ Alias::builder()
+ .name("flex-wrap")
+ .classes(vec!["flex-direction:$wrap"])
+ .build(),
+ Alias::builder()
+ .name("flex-wrap-reverse")
+ .classes(vec!["flex-direction:$wrap-reverse"])
+ .build(),
+ Alias::builder()
+ .name("flex-nowrap")
+ .classes(vec!["flex-direction:$nowrap"])
+ .build(),
+ Alias::builder()
+ .name("grow")
+ .classes(vec!["flex-grow:$1"])
+ .build(),
+ Alias::builder()
+ .name("grow-0")
+ .classes(vec!["flex-grow:$0"])
+ .build(),
+ Alias::builder()
+ .name("shrink")
+ .classes(vec!["flex-shrink:$1"])
+ .build(),
+ Alias::builder()
+ .name("shrink-0")
+ .classes(vec!["flex-shrink:$0"])
+ .build(),
  ];
 }

crates/skribble_preset/src/data/atoms.rs

@@ -818,6 +818,100 @@ lazy_static! {
  .values(vec!["spacing", "relative-spacing", "content-fit", "screen-height"])
  .styles(indexmap! { "max-height" => none })
  .build(),
+
+ // Flexbox & Grid
+ Atom::builder()
+ .name("basis")
+ .description("Control the initial size of flex items.")
+ .values(vec!["spacing", "relative-spacing"])
+ .styles(indexmap! { "flex-basis" => none })
+ .build(),
+ Atom::builder()
+ .name("flex-direction")
+ .description("Control the direction of flex items.")
+ .values(vec!["flex-direction"])
+ .styles(indexmap! { "flex-direction" => none })
+ .build(),
+ Atom::builder()
+ .name("flex-wrap")
+ .description("Control how flex items wrap.")
+ .values(vec!["flex-wrap"])
+ .styles(indexmap! { "flex-wrap" => none })
+ .build(),
+ Atom::builder()
+ .name("flex")
+ .description("Control how flex items both grow and shrink.")
+ .values(vec!["flex"])
+ .styles(indexmap! { "flex" => none })
+ .build(),
+ Atom::builder()
+ .name("flex-grow")
+ .description("Control how flex items grow.")
+ .values(vec!["flex-grow"])
+ .styles(indexmap! { "flex-grow" => none })
+ .build(),
+ Atom::builder()
+ .name("flex-shrink")
+ .description("Control how flex items shrink.")
+ .values(vec!["flex-shrink"])
+ .styles(indexmap! { "flex-shrink" => none })
+ .build(),
+ Atom::builder()
+ .name("order")
+ .description("Control how flex items shrink.")
+ .values(vec!["order", "negative-order"])
+ .styles(indexmap! { "order" => none })
+ .build(),
+ // Grid
+ Atom::builder()
+ .name("grid-cols")
+ .description("Specify the columns in a grid layout.")
+ .values(vec!["grid-template"])
+ .styles(indexmap! { "grid-template-columns" => none })
+ .build(),
+ Atom::builder()
+ .name("grid-rows")
+ .description("Specify the rows in a grid layout.")
+ .values(vec!["grid-template"])
+ .styles(indexmap! { "grid-template-rows" => none })
+ .build(),
+ Atom::builder()
+ .name("col-span")
+ .description("Control how elements are sized and placed across grid columns.")
+ .values(vec!["grid-span"])
+ .styles(indexmap! { "grid-column" => none })
+ .build(),
+ Atom::builder()
+ .name("col-start")
+ .description("Control how elements are sized and placed across grid columns.")
+ .values(vec!["grid-start-end"])
+ .styles(indexmap! { "grid-column-start" => none })
+ .build(),
+ Atom::builder()
+ .name("col-end")
+ .description("Control how elements are sized and placed across grid columns.")
+ .values(vec!["grid-start-end"])
+ .styles(indexmap! { "grid-column-end" => none })
+ .build(),
+ Atom::builder()
+ .name("row-span")
+ .description("Control how elements are sized and placed across grid rows.")
+ .values(vec!["grid-span"])
+ .styles(indexmap! { "grid-row" => none })
+ .build(),
+ Atom::builder()
+ .name("row-start")
+ .description("Control how elements are sized and placed across grid rows.")
+ .values(vec!["grid-start-end"])
+ .styles(indexmap! { "grid-row-start" => none })
+ .build(),
+ Atom::builder()
+ .name("row-end")
+ .description("Control how elements are sized and placed across grid rows.")
+ .values(vec!["grid-start-end"])
+ .styles(indexmap! { "grid-row-end" => none })
+ .build(),
+
  ]
  };
 }

crates/skribble_preset/src/data/value_sets.rs

@@ -814,6 +814,139 @@ lazy_static! {
  .name("filter")
  .values(indexmap! { "none" => "none" })
  .build(),
+ ValueSet::builder()
+ .name("flex-direction")
+ .values(indexmap! {
+ "row" => "row",
+ "row-reverse" => "row-reverse",
+ "col" => "column",
+ "col-reverse" => "column-reverse",
+ })
+ .build(),
+ ValueSet::builder()
+ .name("flex-wrap")
+ .values(indexmap! {
+ "wrap" => "wrap",
+ "wrap-reverse" => "wrap-reverse",
+ "nowrap" => "nowrap",
+ })
+ .build(),
+ ValueSet::builder()
+ .name("flex")
+ .values(indexmap! {
+ "1" => "1 1 0%",
+ "auto" => "1 1 auto",
+ "initial" => "0 1 auto",
+ "none" => "none",
+ })
+ .build(),
+ ValueSet::builder()
+ .name("flex-grow")
+ .values(indexmap! {
+ "1" => "1",
+ "0" => "0",
+ })
+ .build(),
+ ValueSet::builder()
+ .name("flex-shrink")
+ .values(indexmap! {
+ "1" => "1",
+ "0" => "0",
+ })
+ .build(),
+ ValueSet::builder()
+ .name("order")
+ .values(indexmap! {
+ "1" => "1",
+ "2" => "2",
+ "3" => "3",
+ "4" => "4",
+ "5" => "5",
+ "6" => "6",
+ "7" => "7",
+ "8" => "8",
+ "9" => "9",
+ "10" => "10",
+ "11" => "11",
+ "12" => "12",
+ "first" => "-9999",
+ "last" => "9999",
+ "none" => "0",
+ })
+ .build(),
+ ValueSet::builder()
+ .name("negative-order")
+ .values(indexmap! {
+ "-1" => "-1",
+ "-2" => "-2",
+ "-3" => "-3",
+ "-4" => "-4",
+ "-5" => "-5",
+ "-6" => "-6",
+ "-7" => "-7",
+ "-8" => "-8",
+ "-9" => "-9",
+ "-10" => "-10",
+ "-11" => "-11",
+ "-12" => "-12",
+ })
+ .build(),
+ ValueSet::builder()
+ .name("grid-template")
+ .values(indexmap! {
+ "1" => "repeat(1, minmax(0, 1fr))",
+ "2" => "repeat(2, minmax(0, 1fr))",
+ "3" => "repeat(3, minmax(0, 1fr))",
+ "4" => "repeat(4, minmax(0, 1fr))",
+ "5" => "repeat(5, minmax(0, 1fr))",
+ "6" => "repeat(6, minmax(0, 1fr))",
+ "7" => "repeat(7, minmax(0, 1fr))",
+ "8" => "repeat(8, minmax(0, 1fr))",
+ "9" => "repeat(9, minmax(0, 1fr))",
+ "10" => "repeat(10, minmax(0, 1fr))",
+ "11" => "repeat(11, minmax(0, 1fr))",
+ "12" => "repeat(12, minmax(0, 1fr))",
+ "none" => "none",
+ })
+ .build(),
+ ValueSet::builder()
+ .name("grid-span")
+ .values(indexmap! {
+ "auto" => "auto",
+ "1" => "span 1 / span 1",
+ "2" => "span 2 / span 2",
+ "3" => "span 3 / span 3",
+ "4" => "span 4 / span 4",
+ "5" => "span 5 / span 5",
+ "6" => "span 6 / span 6",
+ "7" => "span 7 / span 7",
+ "8" => "span 8 / span 8",
+ "9" => "span 9 / span 9",
+ "10" => "span 10 / span 10",
+ "11" => "span 11 / span 11",
+ "12" => "span 12 / span 12",
+ "full" => "1 / -1",
+ })
+ .build(),
+ ValueSet::builder()
+ .name("grid-start-end")
+ .values(indexmap! {
+ "1" => "1",
+ "2" => "2",
+ "3" => "3",
+ "4" => "4",
+ "5" => "5",
+ "6" => "6",
+ "7" => "7",
+ "8" => "8",
+ "9" => "9",
+ "10" => "10",
+ "11" => "11",
+ "12" => "12",
+ "13" => "13",
+ "auto" => "auto",
+ })
+ .build(),
  ]
  };
 }