Merge pull request #2 from zerebos/refactor

Refactor some styles and add transitions

src/app.css

@@ -2,22 +2,68 @@
 
 /* TODO: rework all of these vars */
 :root {
-    --font-body: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-        Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-    --font-mono: monospace, monospace;
-    --color-bg-0: rgb(202, 216, 228);
-    --color-bg-1: hsl(209, 36%, 86%);
-    --color-bg-2: hsl(224, 44%, 95%);
-    --color-theme-1: #56A4F5;
-    --color-theme-2: #4075a6;
-    --color-text: #EBE6EE;
-    --column-width: 42rem;
-    --column-margin-top: 4rem;
-    font-family: var(--font-body);
-    color: var(--color-text);
-	font-size: 14px;
-    --scroll-bar-color: #c5c5c5;
-    --scroll-bar-bg-color: #f6f6f6;
+    --app-width: 715px;
+    --app-height: 700px;
+    --sidebar-width: 215px;
+
+    /* Base text variables */
+    --font-family: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    --font-family-mono: monospace, monospace;
+    --font-size: 14px;
+    --font-color: #EBE6EE;
+    --font-color-muted: #A19FA3;
+
+
+    /* Background levels */
+    --bg-level-1: #2C2733;
+    --bg-level-2: #2F2935;
+    --bg-level-3: #332D38;
+    --bg-level-4: #39343F;
+    --bg-separator: #39333F;
+    --bg-input-focus: #1F1E1F;
+    --bg-modal: #231E2A;
+    --bg-basic-button: #635F68;
+
+    /* Corresponding border levels */
+    --border-level-1: #000000;
+    --border-level-2: #4F4A54;
+    --border-level-3: #4C4651;
+    --border-level-4: #423E48;
+    --border-separator: #302B37;
+    --border-input: #443e4b;
+    --border-input-focus: 3px solid var(--color-input-accent);
+
+    /* Border radii */
+    --radius-level-1: 15px;
+    --radius-level-2: 12px;
+    --radius-level-3: 8px;
+    --radius-level-4: 6px;
+    --radius-level-5: 4px;
+
+    /* Switch colors */
+    --switch-body-color: var(--border-input);
+    --switch-active-body-color: hsl(from var(--switch-body-color) h s calc(l + 10));
+    --switch-checked-color: var(--color-input-accent);
+    --switch-active-checked-color: hsl(from var(--switch-checked-color) h s calc(l + 10));
+
+    /* Special colors */
+    --font-color-accent: #56A4F5;
+    --color-selected: #134FAC;
+    --color-input-accent: #1769E6;
+
+    --color-danger: #F25F58;
+    --color-warning: #FBBE3C;
+    --color-success: #58CB42;
+    /*
+    tab color #134FAC
+    switch color #1675DB
+    slider #1769E6
+    */
+
+
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+    color: var(--font-color);
 }
 
 * {box-sizing: border-box;}
@@ -39,7 +85,7 @@
     display: initial;
     border-radius: 10px;
     background-color: #959595;
-    border: 2px solid #2C2733;
+    border: 2px solid var(--bg-level-1);
     /* padding: 12px; */
 }
 
@@ -51,15 +97,6 @@
 body {
     min-height: 100vh;
     margin: 0;
-
-    /* background-color: var(--color-bg-1);
-    background-size: 100vw 100vh;
-    background-image: radial-gradient(
-            50% 50% at 50% 50%,
-            rgba(255, 255, 255, 0.75) 0%,
-            rgba(255, 255, 255, 0) 100%
-        ),
-        linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%); */
 	background-image: url("$lib/images/monterey.webp");
 	background-attachment: fixed;
 	background-size: cover;
@@ -69,54 +106,15 @@ body {
 	align-items: center;
 }
 
-h1,
-h2,
-p {
-    font-weight: 400;
-}
-
-p {
-    line-height: 1.5;
-}
-
 a {
-    color: var(--color-theme-1);
+    color: var(--font-color-accent);
     text-decoration: dotted underline;
 }
 
 a:hover {
     text-decoration: underline;
 }
 
-h1 {
-    font-size: 2rem;
-    text-align: center;
-}
-
-h2 {
-    font-size: 1rem;
-}
-
-pre {
-    font-size: 16px;
-    font-family: var(--font-mono);
-    background-color: rgba(255, 255, 255, 0.45);
-    border-radius: 3px;
-    box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
-    padding: 0.5em;
-    overflow-x: auto;
-    color: var(--color-text);
-}
-
-.text-column {
-    display: flex;
-    max-width: 48rem;
-    flex: 0.6;
-    flex-direction: column;
-    justify-content: center;
-    margin: 0 auto;
-}
-
 input,
 button,
 select {
@@ -127,21 +125,3 @@ select {
 button:focus:not(:focus-visible) {
     outline: none;
 }
-
-@media (min-width: 720px) {
-    h1 {
-        font-size: 2.4rem;
-    }
-}
-
-.visually-hidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: auto;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
-}

src/lib/components/Admonition.svelte

@@ -7,16 +7,17 @@
 
 <div class="admonition">
     <div class="icon">
-        <svg xmlns="http://www.w3.org/2000/svg" height={size} viewBox="0 -960 960 960" width={size} fill="var(--color-text)"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" height={size} viewBox="0 -960 960 960" width={size} fill="var(--font-color)"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
     </div>
     <div class="info">{@render children()}</div>
 </div>
 
 <style>
 .admonition {
-    background: #322D39;
-    border: 1px solid #3C3743;
-    border-radius: 8px;
+    background: var(--bg-level-3);
+    border: 1px solid var(--border-level-3);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+    border-radius: var(--radius-level-3);
     padding: 12px;
     display: flex;
     align-items: center;

src/lib/components/ColorPicker.svelte

@@ -98,12 +98,11 @@
 <style>
 .picker-container {
     position: relative;
-    background: #231E2A;
-    border-radius: 1px;
+    background: var(--bg-modal);
     border: 1px solid black;
     box-shadow: 0 0 20px -1px rgba(0,0,0,0.7);
     padding: 12px;
-    border-radius: 12px;
+    border-radius: var(--radius-level-2);
     overflow: hidden;
 }
 
@@ -125,8 +124,8 @@
     height: 160px;
     position: relative;
     overflow: hidden;
-    border-radius: 8px;
-    border: 1px solid #65626A;
+    border-radius: var(--radius-level-3);
+    border: 1px solid var(--border-input);
     box-shadow: 0 0 3px 0px black;
 }
 
@@ -203,8 +202,7 @@
     display: flex;
     flex: 1 1 50%;
     min-height: 100%;
-    border-radius: 2px;
-    border-radius: 8px;
+    border-radius: var(--radius-level-3);
     border: 1px solid rgba(0, 0, 0, 1);
     box-shadow: 0 0 1px rgba(255, 255, 255, 1) inset;
     border: 1px solid rgba(255, 255, 255, 0.3);
@@ -222,11 +220,10 @@
 .hex-value {
     display: flex;
     justify-content: center;
-    background: #1F1E1F;
-    border-radius: 2px;
+    background: var(--bg-input-focus);
     padding: 2px;
-    border: 1px solid #443E4B;
-    border-radius: 4px;
+    border: 1px solid var(--border-input);
+    border-radius: var(--radius-level-5);
     width: 100%;
 }
 
@@ -246,31 +243,30 @@
 .value {
     display: flex;
     justify-content: center;
-    background: #1F1E1F;
-    border-radius: 2px;
+    background: var(--bg-input-focus);
     padding: 2px;
-    border: 1px solid #443E4B;
-    border-radius: 4px;
+    border: 1px solid var(--border-input);
+    border-radius: var(--radius-level-5);
     width: 30px;
 }
 
 
 .color-picked.empty {
-    background: #1F1E1F!important;
-    border-color: #443E4B!important;
+    background: var(--bg-input-focus)!important;
+    border-color: var(--border-input)!important;
     box-shadow: none!important;
     background: linear-gradient(to top left,
              rgba(0,0,0,0) 0%,
              rgba(0,0,0,0) calc(50% - 1px),
-             #D54E53 50%,
+             var(--color-danger) 50%,
              rgba(0,0,0,0) calc(50% + 1px),
              rgba(0,0,0,0) 100%),
          linear-gradient(to top right,
              rgba(0,0,0,0) 0%,
              rgba(0,0,0,0) calc(50% - 1px),
-             #D54E53 50%,
+             var(--color-danger) 50%,
              rgba(0,0,0,0) calc(50% + 1px),
-             rgba(0,0,0,0) 100%) #1F1E1F!important;
+             rgba(0,0,0,0) 100%) var(--bg-input-focus)!important;
     /* opacity: 0; */
 }
 

src/lib/components/History.svelte

@@ -34,9 +34,12 @@
     align-items: center;
     background: none;
     border: 0;
-    color: inherit;
     padding: 4px 4px 4px 12px;
-    border-radius: 4px;
+    border-radius: var(--radius-level-5);
+}
+
+.history button svg {
+    fill: var(--font-color-muted);
 }
 
 .history button.forward {

src/lib/components/Tab.svelte

@@ -37,14 +37,14 @@
         align-items: center;
         gap: 10px;
         padding: 6px;
-        border-radius: 6px;
+        border-radius: var(--radius-level-4);
         font-weight: 600;
         position: relative;
         text-decoration: none;
     }
 
     .nav-tab.selected {
-        background: #2C56B9;
+        background: var(--color-selected);
     }
 
     .nav-tab .tab-icon {
@@ -56,7 +56,7 @@
         font-size: 1rem;
         flex: 1;
         justify-content: flex-start;
-        color: var(--color-text)!important;
+        color: var(--font-color)!important;
         text-decoration: none !important;
     }
 

src/lib/components/User.svelte

@@ -28,13 +28,13 @@
         align-items: center;
         gap: 8px;
         padding: 6px;
-        border-radius: 6px;
+        border-radius: var(--radius-level-4);
         text-decoration: none!important;
         font-weight: 600;
     }
 
     .user-tab.selected {
-        background: #2C56B9;
+        background: var(--color-selected);
     }
 
     .user-avatar img {
@@ -63,15 +63,15 @@
 
     .user-name {
         font-size: 1rem;
-        color: var(--color-text);
+        color: var(--font-color);
     }
 
     .user-subtext {
         font-size: 0.7rem;
-        color: #A7A3AA;
+        color: var(--font-color-muted);
     }
 
     .selected .user-subtext {
-        color: var(--color-text);
+        color: var(--font-color);
     }
 </style>