[Library] Add spacing fondations

packages/filigran-icon/src/Delete.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const SvgDelete = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 16 18"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <mask
+      id="delete_svg__a"
+      width={24}
+      height={24}
+      x={-4}
+      y={-3}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: "alpha",
+      }}
+    >
+      <path fill="currentColor" d="M-4-3h24v24H-4z" />
+    </mask>
+    <g mask="url(#delete_svg__a)">
+      <path
+        fill="currentColor"
+        d="M3 18q-.824 0-1.412-.587A1.93 1.93 0 0 1 1 16V3H0V1h5V0h6v1h5v2h-1v13q0 .824-.588 1.413A1.93 1.93 0 0 1 13 18zM13 3H3v13h10zM5 14h2V5H5zm4 0h2V5H9z"
+      />
+    </g>
+  </svg>
+);
+export default SvgDelete;

packages/filigran-icon/src/index.ts

@@ -20,6 +20,7 @@ export const CourseOfActionIcon = lazy(() => import("./CourseOfAction"));
 export const DashboardIcon = lazy(() => import("./Dashboard"));
 export const DataSourceIcon = lazy(() => import("./DataSource"));
 export const DatabaseOutline1Icon = lazy(() => import("./DatabaseOutline1"));
+export const DeleteIcon = lazy(() => import("./Delete"));
 export const EventIcon = lazy(() => import("./Event"));
 export const ExternalReferenceIcon = lazy(() => import("./ExternalReference"));
 export const GlobeLine1Icon = lazy(() => import("./GlobeLine1"));

packages/filigran-ui/src/plugin.ts

@@ -4,7 +4,6 @@ const FiligranUIPlugin = () => {
   return plugin(
     ({ addUtilities, addComponents }) => {
     },
-    // extend the colors config
     {
       darkMode: ['class'],
       theme: {
@@ -70,6 +69,15 @@ const FiligranUIPlugin = () => {
             'accordion-down': 'accordion-down 0.2s ease-out',
             'accordion-up': 'accordion-up 0.2s ease-out',
           },
+          spacing: {
+            'xxs': '0.125rem',
+            'xs': '0.25rem',
+            's': '0.5rem',
+            'm': '0.75rem',
+            'l': '1rem',
+            'xl': '1.5rem',
+            'xxl': '2rem'
+          }
         },
       },
     },

projects/filigran-website/content/docs/fondations/index.mdx

@@ -0,0 +1,3 @@
+---
+title: Fondations
+---

projects/filigran-website/content/docs/fondations/spacing.mdx

@@ -0,0 +1,36 @@
+---
+title: Spacing
+---
+
+# Spacing
+
+<div className="flex flex-col gap-xl">
+  <div>
+    Spacing-xxs
+    <div className="bg-primary h-xxs"/>
+  </div>
+  <div>
+    Spacing-xs
+    <div className="bg-primary h-xs"/>
+  </div>
+  <div>
+    Spacing-s
+    <div className="bg-primary h-s"/>
+  </div>
+  <div>
+    Spacing-m
+    <div className="bg-primary h-m"/>
+  </div>
+  <div>
+    Spacing-l
+    <div className="bg-primary h-l"/>
+  </div>
+  <div>
+    Spacing-xl
+    <div className="bg-primary h-xl"/>
+  </div>
+  <div>
+    Spacing-xxl
+    <div className="bg-primary h-xxl"/>
+  </div>
+</div>