From 55ad864aaed9acb1da394f0bc13e33e8ee715878 Mon Sep 17 00:00:00 2001
From: Ali Mihandoost <ali.mihandoost@gmail.com>
Date: Tue, 30 Jan 2024 19:17:29 +0330
Subject: [PATCH] feat(style): safe-area

---
 packages/style/lib/safe-area.css |  8 ++++
 packages/style/lib/safe-area.ts  | 82 ++++++++++++++++++++++++++++++++
 packages/style/main.css          |  1 +
 packages/style/tailwind.ts       |  3 +-
 4 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 packages/style/lib/safe-area.css
 create mode 100644 packages/style/lib/safe-area.ts

diff --git a/packages/style/lib/safe-area.css b/packages/style/lib/safe-area.css
new file mode 100644
index 00000000..b9648472
--- /dev/null
+++ b/packages/style/lib/safe-area.css
@@ -0,0 +1,8 @@
+@layer base {
+  :root {
+    --safe-area-inset-top: env(safe-area-inset-top);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    --safe-area-inset-left: env(safe-area-inset-left);
+    --safe-area-inset-right: env(safe-area-inset-right);
+  }
+}
diff --git a/packages/style/lib/safe-area.ts b/packages/style/lib/safe-area.ts
new file mode 100644
index 00000000..84299d3e
--- /dev/null
+++ b/packages/style/lib/safe-area.ts
@@ -0,0 +1,82 @@
+import plugin from 'tailwindcss/plugin.js';
+
+export const safeAreaPlugin = plugin(({addUtilities}) => {
+  addUtilities({
+    '.m-safe': {
+      marginTop: 'var(--safe-area-inset-top, 0)',
+      marginRight: 'var(--safe-area-inset-right, 0)',
+      marginBottom: 'var(--safe-area-inset-bottom, 0)',
+      marginLeft: 'var(--safe-area-inset-left, 0)',
+    },
+    '.mx-safe': {
+      marginRight: 'var(--safe-area-inset-right, 0)',
+      marginLeft: 'var(--safe-area-inset-left, 0)',
+    },
+    '.my-safe': {
+      marginTop: 'var(--safe-area-inset-top, 0)',
+      marginBottom: 'var(--safe-area-inset-bottom, 0)',
+    },
+    '.mt-safe': {
+      marginTop: 'var(--safe-area-inset-top, 0)',
+    },
+    '.mr-safe': {
+      marginRight: 'var(--safe-area-inset-right, 0)',
+    },
+    '.mb-safe': {
+      marginBottom: 'var(--safe-area-inset-bottom, 0)',
+    },
+    '.ml-safe': {
+      marginLeft: 'var(--safe-area-inset-left, 0)',
+    },
+    '.p-safe': {
+      paddingTop: 'var(--safe-area-inset-top, 0)',
+      paddingRight: 'var(--safe-area-inset-right, 0)',
+      paddingBottom: 'var(--safe-area-inset-bottom, 0)',
+      paddingLeft: 'var(--safe-area-inset-left, 0)',
+    },
+    '.px-safe': {
+      paddingRight: 'var(--safe-area-inset-right, 0)',
+      paddingLeft: 'var(--safe-area-inset-left, 0)',
+    },
+    '.py-safe': {
+      paddingTop: 'var(--safe-area-inset-top, 0)',
+      paddingBottom: 'var(--safe-area-inset-bottom, 0)',
+    },
+    '.pt-safe': {
+      paddingTop: 'var(--safe-area-inset-top, 0)',
+    },
+    '.pr-safe': {
+      paddingRight: 'var(--safe-area-inset-right, 0)',
+    },
+    '.pb-safe': {
+      paddingBottom: 'var(--safe-area-inset-bottom, 0)',
+    },
+    '.pl-safe': {
+      paddingLeft: 'var(--safe-area-inset-left, 0)',
+    },
+    '.top-safe': {
+      top: 'var(--safe-area-inset-top, 0)',
+    },
+    '.right-safe': {
+      right: 'var(--safe-area-inset-right, 0)',
+    },
+    '.bottom-safe': {
+      bottom: 'var(--safe-area-inset-bottom, 0)',
+    },
+    '.left-safe': {
+      left: 'var(--safe-area-inset-left, 0)',
+    },
+    '.min-h-screen-safe': {
+      minHeight: [
+        'calc(100vh - (var(--safe-area-inset-top, 0) + var(--safe-area-inset-bottom, 0)))',
+        '-webkit-fill-available',
+      ],
+    },
+    '.h-screen-safe': {
+      height: [
+        'calc(100vh - (var(--safe-area-inset-top, 0) + var(--safe-area-inset-bottom, 0)))',
+        '-webkit-fill-available',
+      ],
+    },
+  });
+});
diff --git a/packages/style/main.css b/packages/style/main.css
index 027b8409..e8495bec 100644
--- a/packages/style/main.css
+++ b/packages/style/main.css
@@ -4,6 +4,7 @@
 
 @import './lib/base.css';
 @import './lib/alpine.css';
+@import './lib/safe-area.css';
 @import './lib/form.css';
 @import './lib/scrollbar.css';
 @import './lib/utilities.css';
diff --git a/packages/style/tailwind.ts b/packages/style/tailwind.ts
index 030eb7ea..20a8952c 100644
--- a/packages/style/tailwind.ts
+++ b/packages/style/tailwind.ts
@@ -3,6 +3,7 @@
 import {animationTheme} from './lib/animation.js';
 import {colorTheme, colorPlugin} from './lib/color-scheme.js';
 import {elevationPlugin} from './lib/elevation.js';
+import {safeAreaPlugin} from './lib/safe-area.js';
 import {screenTheme} from './lib/screen.js';
 import {stateLayerPlugin} from './lib/state-layer.js';
 import {translucentPlugin} from './lib/translucent.js';
@@ -22,5 +23,5 @@ export const tailwindConfig: Omit<Config, 'content'> = {
       ...animationTheme,
     },
   },
-  plugins: [colorPlugin, elevationPlugin, stateLayerPlugin, translucentPlugin],
+  plugins: [colorPlugin, elevationPlugin, stateLayerPlugin, translucentPlugin, safeAreaPlugin],
 };