refactor(css): maximize usage of variables (1st part, to simplify CSS & style)

note: there is still work to do, but has there are risks to conflict I prefer to commit this first part now

static/css/components/shareDialog.css

@@ -11,7 +11,7 @@
 }
 
 .existing-share-item {
-    background-color: #f8f9fa;
+    background-color: var(--color-bg-subtle);
     border-radius: 4px;
     padding: 10px;
     margin-bottom: 10px;
@@ -23,7 +23,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     margin-bottom: 5px;
-    color: #1565c0;
+    color: var(--color-share-link-text);
 }
 
 .share-info {
@@ -31,15 +31,15 @@
     display: flex;
     gap: 15px;
     margin-bottom: 10px;
-    color: #757575;
+    color: var(--color-share-owner-text);
 }
 
 .share-protected {
-    color: #1565c0;
+    color: var(--color-share-link-text);
 }
 
 .share-expiration {
-    color: #b71c1c;
+    color: var(--color-share-remove-text);
 }
 
 .share-actions {
@@ -62,7 +62,7 @@
 #notification-message {
     width: 100%;
     padding: 10px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--color-border-ddd);
     border-radius: 4px;
     resize: vertical;
 }