webkom · ivarnakken · Feb 13, 2023 · Feb 12, 2023
diff --git a/app/components/Button/Button.css b/app/components/Button/Button.css
@@ -2,8 +2,7 @@
 
 :root {
   --button-color: var(--color-white);
-  --button-box-shadow: 0 1px 0 rgba(27, 31, 36, 10%),
-    inset 0 1px 0 rgba(255, 255, 255, 3%);
+  --button-box-shadow: var(--shadow-xs);
   --button-background: var(--color-gray-1);
   --button-background-hover: var(--color-gray-2);
   --button-border: #8c8c8c77;
@@ -67,7 +66,7 @@
     box-shadow, opacity;
 
   &:focus-visible {
-    box-shadow: 0 0 0 3px #9944;
+    box-shadow: 0 0 0 3px #9994;
   }
 
   &:disabled {

diff --git a/app/components/Card/Card.css b/app/components/Card/Card.css
@@ -9,11 +9,10 @@
 }
 
 .shadow {
-  box-shadow: 0 2px 8px 2px rgba(104, 112, 118, 7%),
-    0 2px 4px -1px rgba(104, 112, 118, 4%);
+  box-shadow: var(--shadow-sm);
 }
 
 .isHoverable:hover {
   transition: box-shadow var(--easing-medium);
-  box-shadow: 0 12px 20px 6px rgba(104, 112, 118, 8%);
+  box-shadow: var(--shadow-md);
 }
diff --git a/app/components/CommentForm/CommentForm.css b/app/components/CommentForm/CommentForm.css
@@ -1,7 +1,7 @@
 .form {
-  background-color: var(--color-white);
-  box-shadow: 0 1px 4px rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 3%);
-  border: 1px solid rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 4%);
+  background-color: var(--lego-card-color);
+  box-shadow: var(--shadow-sm);
+  border-radius: 1rem;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -26,12 +26,6 @@
   }
 }
 
-html[data-theme='dark'] .form {
-  box-shadow: 0 1px 4px
-    rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 14%);
-  border: 1px solid rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 15%);
-}
-
 .inlineForm {
   flex-direction: row;
   display: flex;

diff --git a/app/components/Comments/Comment.css b/app/components/Comments/Comment.css
@@ -1,9 +1,9 @@
 @import url('~app/styles/variables.css');
 
 .container {
-  background-color: var(--color-white);
-  box-shadow: 0 1px 4px rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 3%);
-  border: 1px solid rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 4%);
+  background-color: var(--lego-card-color);
+  box-shadow: var(--shadow-sm);
+  border-radius: 1rem;
   margin-bottom: 15px;
   padding: 25px;
   align-items: center;
@@ -15,12 +15,6 @@
   }
 }
 
-html[data-theme='dark'] .container {
-  box-shadow: 0 1px 4px
-    rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 14%);
-  border: 1px solid rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 15%);
-}
-
 .comment {
   display: flex;
   align-items: flex-start;

diff --git a/app/components/Form/PhoneNumberInput.css b/app/components/Form/PhoneNumberInput.css
@@ -10,7 +10,6 @@
 
 .input input:focus {
   outline: none;
-  box-shadow: 0 0 5px var(--color-gray-3);
   border-color: var(--color-gray-4);
 }
 

diff --git a/app/components/Modal/Modal.css b/app/components/Modal/Modal.css
@@ -26,9 +26,7 @@ html[data-theme='dark'] .backdrop {
   outline: none;
   overflow-y: auto;
   z-index: 4;
-  /* stylelint-disable indentation */
-  box-shadow: 0 2px 8px 2px rgba(104, 112, 118, 7%),
-    0 2px 4px -1px rgba(104, 112, 118, 4%);
+  box-shadow: var(--shadow-sm);
   border-radius: 1rem;
 
   @media (--tall-viewport) {

diff --git a/app/components/PhotoUploadStatus/PhotoUploadStatus.css b/app/components/PhotoUploadStatus/PhotoUploadStatus.css
@@ -4,7 +4,6 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  box-shadow: 0 5px 12px rgba(0, 0, 0, 25%), 0 3px 3px rgba(0, 0, 0, 22%);
 }
 
 .close {

diff --git a/app/routes/events/components/Event.css b/app/routes/events/components/Event.css
@@ -76,18 +76,16 @@
 }
 
 .registrationPending {
-  background-color: var(--lego-card-color);
-  border-radius: 8px;
-  border: 1px solid #ccc;
-  box-shadow: rgba(149, 157, 165, 20%) 0 8px 24px;
-  padding: 5px;
+  line-height: 1.3;
   text-align: center;
+  margin: 1rem 0;
 }
 
 .registrationPendingHeader {
   display: flex;
   align-items: center;
   justify-content: space-around;
+  margin-bottom: 1rem;
 }
 
 .eventWarning {

diff --git a/app/routes/events/components/EventAdministrate/Administrate.css b/app/routes/events/components/EventAdministrate/Administrate.css
@@ -34,7 +34,7 @@
   border-radius: 1rem;
   letter-spacing: 0.6px;
   line-height: 1;
-  box-shadow: rgb(0, 0, 0 / 5%) 1px 2px 5px 0;
+  box-shadow: var(--shadow-xs);
   align-items: center;
   align-self: center;
 }

diff --git a/app/routes/events/components/EventDetail/index.tsx b/app/routes/events/components/EventDetail/index.tsx
@@ -31,7 +31,6 @@ import type {
   Event,
   ActionGrant,
   AddPenalty,
-  FollowerItem,
 } from 'app/models';
 import { resolveGroupLink } from 'app/reducers/groups';
 import type { ID } from 'app/store/models';

diff --git a/app/routes/events/components/EventEditor/EventEditor.css b/app/routes/events/components/EventEditor/EventEditor.css
@@ -1,9 +1,5 @@
 @import url('../Event.css');
 
-.fieldShadow {
-  box-shadow: 0 0 10px var(--color-gray-3);
-}
-
 .title {
   font-size: 24px;
   color: var(--lego-font-color);

diff --git a/app/routes/events/components/JoinEventForm.tsx b/app/routes/events/components/JoinEventForm.tsx
@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import { compose } from 'redux';
 import { reduxForm, Field, SubmissionError } from 'redux-form';
 import Button from 'app/components/Button';
+import Card from 'app/components/Card';
 import { Form, Captcha, TextInput } from 'app/components/Form';
 import formStyles from 'app/components/Form/Field.css';
 import Icon from 'app/components/Icon';
@@ -115,7 +116,7 @@ const RegistrationPending = ({
 }: {
   reg_status?: EventRegistrationStatus;
 }) => (
-  <div className={styles.registrationPending}>
+  <Card className={styles.registrationPending}>
     <span className={styles.registrationPendingHeader}>
       <h3>
         Vi behandler din{' '}
@@ -150,7 +151,7 @@ const RegistrationPending = ({
       </Tooltip>
     </p>
     <ProgressBar />
-  </div>
+  </Card>
 );
 
 const PaymentForm = ({

diff --git a/app/routes/events/components/Stripe.css b/app/routes/events/components/Stripe.css
@@ -38,10 +38,10 @@
   padding: 10px 14px;
   font-size: 1em;
   font-family: 'Source Code Pro', monospace;
-  box-shadow: rgba(50, 50, 93, 14.902%) 0 1px 3px, rgba(0, 0, 0, 1.96%) 0 1px 0;
+  box-shadow: var(--shadow-sm);
   border: 0;
   outline: 0;
-  border-radius: 4px;
+  border-radius: 6px;
   background: white;
 }
 

diff --git a/app/routes/overview/components/Feed.css b/app/routes/overview/components/Feed.css
@@ -18,7 +18,7 @@
 
 .content {
   border: 1px solid rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 9%);
-  box-shadow: 0 1px 4px rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 4%);
+  box-shadow: var(--shadow-sm);
   border-radius: 3px;
   overflow-y: auto;
   height: 459px;

diff --git a/app/routes/pages/components/Sidebar.css b/app/routes/pages/components/Sidebar.css
@@ -93,7 +93,7 @@
     position: absolute;
     z-index: 11;
     width: 90%;
-    box-shadow: 10px 10px 27px -15px rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 75%);
+    box-shadow: var(--shadow-lg);
     height: 100%;
   }
 

diff --git a/app/styles/utilities.css b/app/styles/utilities.css
@@ -14,17 +14,15 @@
 
 .popover {
   border: 1px solid var(--border-gray);
-  box-shadow: 0 2px 8px 2px rgba(104, 112, 118, 7%),
-    0 2px 4px -1px rgba(104, 112, 118, 4%);
+  box-shadow: var(--shadow-sm);
 }
 
 .contentContainer {
   composes: container;
   background: var(--color-white);
   padding: 40px;
-  box-shadow: 0 1px 20px
-    rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 5%);
-  border-radius: 3px;
+  box-shadow: var(--shadow-sm);
+  border-radius: 6px;
 
   @media (--small-viewport) {
     padding: 40px 10px;
@@ -52,17 +50,10 @@ html[data-theme='dark'] .contentContainer {
 
 .withShadow {
   border: 1px solid var(--border-gray);
-  box-shadow: 0 1px 4px rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 4%);
+  box-shadow: var(--shadow-sm);
   border-radius: 5px;
 }
 
-.editShadow {
-  composes: withShadow;
-  outline: none;
-  box-shadow: 0 0 5px var(--color-gray-4);
-  border-color: var(--border-gray);
-}
-
 .truncateString {
   white-space: nowrap;
   overflow: hidden;

diff --git a/app/styles/variables.css b/app/styles/variables.css
@@ -114,6 +114,13 @@
   --linear-fast: 100ms var(--linear);
   --linear-medium: 200ms var(--linear);
   --linear-slow: 400ms var(--linear);
+
+  --shadow-xs: 0 2px 8px 1px rgba(104, 112, 118, 7%),
+    0 1px 1px -1px rgba(104, 112, 118, 4%);
+  --shadow-sm: 0 2px 8px 2px rgba(104, 112, 118, 7%),
+    0 2px 4px -1px rgba(104, 112, 118, 4%);
+  --shadow-md: 0 12px 20px 6px rgba(104, 112, 118, 8%);
+  --shadow-lg: 0 12px 34px 6px rgba(104, 112, 118, 18%);
 }
 
 [data-theme='dark'] {