feat: add layout component

apps/docs/data/design/material-you/systems/color-system.mdx → apps/docs/data/design/material-you/systems/color.mdx

@@ -1,40 +1,14 @@
 ---
-title: Color System
+title: Colors
+position: 1
 ---
 
 # Color System
 
 The `baka-material-you` Color System implements the Material You Design System swatch. It creates a pair of `sass` and `css` variables for usage in your application.
 
-## Usage
 
-The `baka-material-you` package provides a set of `sass` mixins and variables for styling your application, the main ones being:
-
-- `styles` - A mixin that applies all of the Material You Design System styles.
-- `design--styles` - A mixin that applies only css variables for the corresponding theme.
-- `component--styles` - A mixin that applies only styles for the components.
-
-```scss
-@use "baka-material-you" as material-you;
-
-body {
-  @include material-you.styles();
-}
-```
-
-or alternatively:
-
-```scss
-@use "baka-material-you" as material-you;
-
-@include material-you.component--styles();
-
-:root {
-  @include material-you.design-styles();
-}
-```
-
-### Styling Components
+## Styling Components
 
 You can utilize the `baka-material-you` Color System by importing the package and using the `$swatch` variable for any custom styles and components in your application.
 
@@ -56,7 +30,7 @@ This will result in the following CSS:
 }
 ```
 
-### Styling Layout
+## Styling Layout
 
 By utilizing the [Baka Tailwind Preset](/desing/material-you/tailwind), you can easily style your layout with the `baka-material-you` Color System.
 

apps/docs/data/design/material-you/systems/layout.mdx

@@ -0,0 +1,51 @@
+---
+title: Layout
+position: 1
+---
+
+# Layout System
+
+The `baka-material-you` Layout System implements the Material You Design System layout. It creates a design principles that help you create responsive layouts in your web application.
+
+## Usage
+
+```scss
+@use "baka-material-you" as material-you;
+
+.my-element {
+  width: 100%;
+
+  @media screen and (min-width: map-get(map-get(material-you.$layout, sm), "screen")) {
+    max-width: 400px;
+  }
+
+  @media screen and (min-width: map-get(map-get(material-you.$layout, md), "screen")) {
+    width: calc(400px / map-get(map-get(material-you.$layout, md), "columns"));
+  }
+}
+```
+
+## Custom Layout
+
+You can create a custom layout by passing a custom `layout` variable.
+
+```scss
+$custom-layout: (
+  xxx-large: (
+    screen: 1920px,
+    width: 1600px,
+    columns: 16,
+    gutter: 32px,
+    margin: 48px,
+    regions: (
+      left: (
+        width: 380px,
+      ),
+    ),
+  ),
+);
+
+@use "baka-material-you" as material-you with (
+  $layout: $custom-layout
+);
+```

apps/docs/data/design/material-you/systems/overview.mdx

@@ -0,0 +1,32 @@
+---
+title: Overview
+position: 0
+---
+
+# Material You Design System
+
+The `baka-material-you` package provides a set of `sass` mixins and variables for styling your application, the main ones being:
+
+- `styles` - A mixin that applies all of the Material You Design System styles.
+- `design--styles` - A mixin that applies only css variables for the corresponding theme.
+- `component--styles` - A mixin that applies only styles for the components.
+
+```scss
+@use "baka-material-you" as material-you;
+
+body {
+  @include material-you.styles();
+}
+```
+
+or alternatively:
+
+```scss
+@use "baka-material-you" as material-you;
+
+@include material-you.component--styles();
+
+:root {
+  @include material-you.design-styles();
+}
+```

apps/docs/src/app/design/material-you/[...slug]/page.tsx

@@ -69,14 +69,14 @@ export default function MaterialYouPage(props: { params?: { slug?: string[] } })
 
   return (
     <>
-      <Column size={[8, 8, 8, 8, 10]} className="pt-[45px]  pb-[100px]">
+      <Column size={[8, 8, 8, 8]} className="pt-[45px]  pb-[100px]">
         <article className="w-[100%]">
           <React.Suspense fallback={<div>loading</div>}>
             <MDXContent components={mdxComponents} />
           </React.Suspense>
         </article>
       </Column>
-      <Column size={[4, 3, 2, 2]} className="hidden md:flex sticky top-[100px] h-[calc(100vh-100px)]">
+      <Column size={[4, 3, 2, 4]} className="hidden md:flex sticky top-[100px] h-[calc(100vh-100px)]">
         <TableOfContents data={doc.toc} />
       </Column>
     </>

packages/design/material-you/components/layout/column.scss

@@ -1,5 +1,5 @@
 @use "baka-core" as baka;
-@use "../../design/" as *;
+@use "../../design" as *;
 
 @mixin column--styles {
   .baka-column {
@@ -14,22 +14,21 @@
       $_columns: map-get($breakpoint, columns);
       $_gutter: map-get($breakpoint, gutter);
       $_regions: map-get($breakpoint, regions);
-      $_fill: $_columns * $_gutter - $_gutter;
       flex-grow: 1;
 
       @if ($_screen == 0) {
         @for $i from 1 through $_columns {
           $_offset: calc($_gutter * calc(calc($_columns / $i) - 1) / calc($_columns / $i));
           & {
-            flex-basis: calc(($i / $_columns) * 100% - #{if($i == $_columns, 0px, $_offset)});
+            --size: #{$i};
           }
           &.value--#{$i} {
             flex-grow: 0;
-            flex-basis: calc(($i / $_columns) * 100% - #{if($i == $_columns, 0px, $_offset)});
+            --size: #{$i};
           }
           &.value-0--#{$i} {
             flex-grow: 0;
-            flex-basis: calc(($i / $_columns) * 100% - #{if($i == $_columns, 0px, $_offset)});
+            --size: #{$i};
           }
         }
       } @else {
@@ -39,15 +38,24 @@
 
             &.value--#{$i} {
               flex-grow: 0;
-              flex-basis: calc(($i / $_columns) * 100% - #{if($i == $_columns, 0px, $_offset)});
+              --size: #{$i};
             }
             &.value-#{$j - 1}--#{$i} {
               flex-grow: 0;
-              flex-basis: calc(($i / $_columns) * 100% - #{if($i == $_columns, 0px, $_offset)});
+              --size: #{$i};
             }
           }
         }
       }
+
+      flex-basis: calc(
+        (calc(var(--size, 1) / $_columns)) *
+          100% -
+          calc(
+            $_gutter * calc(calc($_columns / var(--size, 1)) - 1) / calc($_columns / var(--size, 1))
+          ) +
+          0px
+      );
     }
 
     @include baka.variant(region-left) {

packages/design/material-you/design/_layout.scss

@@ -1,6 +1,8 @@
+@use "sass:map";
+@use "sass:meta";
 @use "baka-core" as baka;
 
-$layout: (
+$_default-layout: (
   xs: (
     screen: 0,
     width: 100%,
@@ -59,6 +61,29 @@ $layout: (
   ),
 );
 
+$layout: () !default;
+$layout: map-merge($_default-layout, $layout);
+$_layout: map-merge($layout, ());
+
+// @function assign($vars: (), $prefix: --) {
+//   @each $name, $value in $vars {
+//     @if (meta.type-of($value) == "map") {
+//       $result: assign($value, #{$prefix}--#{$name});
+//       $vars: map.set($vars, #{$name}, $result);
+//     } @else if (meta.type-of($value) == "list") {
+//       $result: assign($value, #{$prefix}--#{$name});
+//       $vars: map.set($vars, #{$name}, $result);
+//     } @else {
+//       $vars: map.set($vars, #{$name}, var(#{$prefix}--#{$name}, $value));
+//     }
+//   }
+//   @return $vars;
+// }
+
+// $layout: assign($layout, --layout);
+
+@debug $layout;
+
 @mixin layout--styles {
   @include baka.css-vars($layout, --layout);
 }