feat(utilities): add shadow utilities class.

riazer-lab · Feb 14, 2023 · 5bc1b2b · 5bc1b2b
1 parent f1fc4df
commit 5bc1b2b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/packages/tailwind/src/style/utilities/shadow.css b/packages/tailwind/src/style/utilities/shadow.css
@@ -0,0 +1,40 @@
+.has-shadow {
+  --sira-color-800: var(--sira-colors-bw-800);
+  --sira-shadow-alpha: 0.1;
+  --sira-shadow-blur-radius: 1em;
+  --sira-shadow-spread-radius: 0.1em;
+  --sira-shadow-offset-x: 0;
+  --sira-shadow-offset-y: 0.25em;
+  --sira-shadow-color: rgba(var(--sira-color-800), var(--sira-shadow-alpha));
+  box-shadow: var(--sira-shadow-offset-x) var(--sira-shadow-offset-y) var(--sira-shadow-blur-radius)
+    var(--sira-shadow-spread-radius) var(--sira-shadow-color);
+}
+
+.has-shadow.wider {
+  --sira-shadow-blur-radius: 3em;
+  --sira-shadow-spread-radius: 0.35em;
+}
+
+.has-shadow.widest {
+  --sira-shadow-blur-radius: 5em;
+  --sira-shadow-spread-radius: 0.6em;
+}
+
+.has-shadow.compact {
+  --sira-shadow-offset-y: 0.15em;
+  --sira-shadow-blur-radius: 0.6em;
+  --sira-shadow-spread-radius: 0.06em;
+}
+
+.has-shadow.bolder {
+  --sira-shadow-alpha: 0.2;
+}
+
+.has-shadow.boldest {
+  --sira-shadow-alpha: 0.3;
+}
+
+.has-shadow.rainbow {
+  box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px,
+    rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
+}
diff --git a/packages/tailwind/src/style/utilities/utilities.css b/packages/tailwind/src/style/utilities/utilities.css
@@ -5,3 +5,4 @@
 @import 'overlay.css';
 /* keyframes can be only added by utilities layer */
 @import 'keyframes.css';
+@import 'shadow.css';