Feat(web): Introduce Box component #DS-1595

packages/web/src/scss/components/Box/README.md

@@ -0,0 +1,57 @@
+# Box
+
+The Box component is a simple container around content or other components.
+
+```html
+<div>Content</div>
+```
+
+## Border
+
+You can define border width, color using utility classes `border-<width>`, `border-<color>`, and radius using utility class `rounded-<radius>`.
+
+```html
+<div class="border-basic border-100 rounded-200" style="border-style: solid;">Without radius</div>
+```
+
+## Padding
+
+You can define padding using utility class `p-<padding>`.
+
+```html
+<div class="p-200">With padding</div>
+```
+
+It is also possible to define padding for horizontal and vertical sides using utility classes `px-<padding>` and `py-<padding>`.
+
+```html
+<div class="px-200 py-300">With vertical and horizontal padding</div>
+```
+
+You can also define padding for each side using utility classes `pt-<padding>`, `pr-<padding>`, `pb-<padding>`, and `pl-<padding>`.
+
+```html
+<div class="pt-200 pr-300 pb-400 pl-500">With padding for each direction</div>
+```
+
+Responsive values can be set for each prop using utility classes `px-<padding>`, `px-tablet-<padding>`, `px-desktop-<padding>`, `py-<padding>`, `py-tablet-<padding>`, and `py-desktop-<padding>`.
+
+```html
+<div class="px-400 px-tablet-800 px-desktop-1200 py-200 py-tablet-400 py-desktop-600">With responsive padding</div>
+```
+
+Responsive values can be set for each prop using utility classes. For example, `p-<padding>` for mobile, `p-tablet-<padding>` for tablet, and `p-desktop-<padding>` for desktop.
+
+```html
+<div class="p-200 p-tablet-400 p-desktop-600">With responsive padding</div>
+```
+
+## Background Color
+
+You can define background color using utility classes `bg-<color>`.
+
+```html
+<div class="bg-primary">Primary Background</div>
+<div class="bg-secondary">Secondary Background</div>
+<div class="bg-tertiary">Tertiary Background</div>
+```

packages/web/src/scss/components/Box/index.html

@@ -0,0 +1,64 @@
+{{#> web/layout/default title="Box" parentPageName="Components" }}
+
+<section class="UNSTABLE_Section">
+  <div class="Container">
+    <h2 class="docs-Heading">Default</h2>
+    <div class="docs-Stack docs-Stack--start">
+
+      <div>Content</div>
+
+    </div>
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+  <div class="Container">
+    <h2 class="docs-Heading">With Custom Padding</h2>
+    <div class="docs-Stack docs-Stack--start">
+
+      <fieldset id="box-custom-padding" class="mb-0" style="border: 0;">
+        <legend class="mb-500">For demo purposes the box is bordered</legend>
+      </fieldset>
+      <div class="border-basic border-100 p-800" style="border-style: solid;">With custom padding</div>
+      <div class="border-basic border-100 px-800 py-400" style="border-style: solid;">With custom vertical and horizontal padding</div>
+      <div class="border-basic border-100 pt-200 pb-800 pl-600 pr-1200" style="border-style: solid;">With custom padding for each direction</div>
+      <div class="border-basic border-100 px-400 px-tablet-800 px-desktop-1200 py-200 py-tablet-400 py-desktop-600" style="border-style: solid;">With responsive padding</div>
+    </div>
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+  <div class="Container">
+    <h2 class="docs-Heading">With Border</h2>
+    <div class="docs-Stack docs-Stack--start">
+
+      <fieldset id="box-with-border" class="mb-0" style="border: 0;">
+        <legend class="mb-500">For demo purposes the box has custom padding</legend>
+      </fieldset>
+      <div class="border-basic border-100 p-800" style="border-style: solid;">Without radius</div>
+      <div class="border-basic rounded-300 border-100 p-800" style="border-style: solid;">With custom radius</div>
+      <div class="border-basic rounded-full border-100 p-800" style="border-style: solid;">With full radius</div>
+      <div class="border-basic rounded-300 border-200 p-800" style="border-style: solid;">With thicker border</div>
+      <div class="border-focus rounded-300 border-100 p-800" style="border-style: solid;">With focus color</div>
+    </div>
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+  <div class="Container">
+    <h2 class="docs-Heading">With Background Color</h2>
+    <div class="docs-Stack docs-Stack--start">
+
+      <fieldset id="box-with-background" class="mb-0" style="border: 0;">
+        <legend class="mb-500">For demo purposes the box is bordered</legend>
+      </fieldset>
+      <div class="bg-primary border-basic border-100 p-800" style="border-style: solid;">Primary Background</div>
+      <div class="bg-secondary border-basic border-100 p-800" style="border-style: solid;">Secondary Background</div>
+      <div class="bg-tertiary border-basic border-100 p-800" style="border-style: solid;">Tertiary Background</div>
+    </div>
+  </div>
+</section>
+
+{{/web/layout/default }}
+
+

packages/web/src/scss/settings/_utilities.scss

@@ -2,6 +2,41 @@
 @use '@tokens' as tokens;
 
 $utilities: (
+    'background-color': (
+        responsive: false,
+        property: background-color,
+        class: bg,
+        values: (
+            primary: tokens.$background-primary,
+            secondary: tokens.$background-secondary,
+            tertiary: tokens.$background-tertiary,
+        ),
+    ),
+    'border-color': (
+        responsive: false,
+        property: border-color,
+        class: border,
+        values: (
+            basic: tokens.$border-basic,
+            focus: tokens.$border-focus,
+        ),
+    ),
+    'border-radius': (
+        responsive: false,
+        property: border-radius,
+        class: rounded,
+        values: tokens.$radii,
+    ),
+    'border-width': (
+        responsive: false,
+        property: border-width,
+        class: border,
+        values: (
+            0: tokens.$border-width-0,
+            100: tokens.$border-width-100,
+            200: tokens.$border-width-200,
+        ),
+    ),
     'display': (
         responsive: true,
         property: display,
@@ -88,6 +123,12 @@ $utilities: (
                 )
             ),
     ),
+    'padding': (
+        responsive: true,
+        property: padding,
+        class: p,
+        values: tokens.$spaces,
+    ),
     'padding-top': (
         responsive: true,
         property: padding-top,
@@ -140,20 +181,4 @@ $utilities: (
             tertiary: tokens.$text-tertiary,
         ),
     ),
-    'background-color': (
-        responsive: false,
-        property: background-color,
-        class: bg,
-        values: (
-            primary: tokens.$background-primary,
-            secondary: tokens.$background-secondary,
-            tertiary: tokens.$background-tertiary,
-        ),
-    ),
-    'border-radius': (
-        responsive: false,
-        property: border-radius,
-        class: rounded,
-        values: tokens.$radii,
-    ),
 );