Add more cards, remove panel color

LinwoodDev · Feb 20, 2024 · d2e25bd · d2e25bd
1 parent c13dfb8
commit d2e25bd
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,8 @@
 
 > A minimal modern gui framework.
 
+[Preview](https://style.linwood.dev)
 
 ## Libraries
 
-* [React](linwood-style-react)
-
+* [Web](packages/web)
diff --git a/packages/docs/src/pages/index.astro b/packages/docs/src/pages/index.astro
@@ -106,6 +106,18 @@ import Layout from "../layouts/Layout.astro";
             <p class="list-item-description">Item 3 description</p>
           </a>
         </li>
+        <li>
+          <a href="#" class="card fill">
+            <p class="list-item-title">Item 4</p>
+            <p class="list-item-description">Item 4 description</p>
+          </a>
+        </li>
+        <li>
+          <a href="#" class="card paper">
+            <p class="list-item-title">Item 5</p>
+            <p class="list-item-description">Item 5 description</p>
+          </a>
+        </li>
       </ul>
     </div>
     <div id="input" class="big-section">

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -2,7 +2,7 @@
   "name": "@linwooddev/style",
   "description": "",
   "main": "index.js",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "sass --watch scss/:css/",

diff --git a/packages/web/scss/_button.scss b/packages/web/scss/_button.scss
@@ -52,8 +52,9 @@ button, .btn {
   }
 
   &.secondary {
-    background-color: colors.$panel;
-    color: colors.$panel-text;
+    background-color: colors.$elevation;
+    backdrop-filter: vars.$elevation-filter;
+    color: colors.$background-text;
     &.active {
       color: colors.$primary-light;
       &:hover {

diff --git a/packages/web/scss/_card.scss b/packages/web/scss/_card.scss
@@ -9,7 +9,7 @@
   border-radius: vars.$border-radius;
   border-style: solid;
   border-width: 1px;
-  border-color: colors.$panel;
+  border-color: colors.$elevation;
   transition: all 0.2s ease-in-out;
   &.primary {
     border-color: colors.$primary-light;
@@ -19,9 +19,16 @@
     border-color: colors.$primary;
   }
   &.secondary {
-    border-color: colors.$panel;
+    border-color: colors.$elevation;
   }
   &.secondary:hover {
     border-color: colors.$primary;
   }
+  &.fill, &.paper {
+    backdrop-filter: vars.$elevation-filter;
+    background-color: colors.$elevation;
+  }
+  &.paper {
+    border: 0;
+  }
 }
diff --git a/packages/web/scss/_colors.scss b/packages/web/scss/_colors.scss
@@ -8,9 +8,6 @@ $background: var(--ls-background);
 $background-text: var(--ls-background-text);
 $background-text-light: var(--ls-background-text-light);
 $elevation: var(--ls-elevation);
-$panel: var(--ls-panel);
-$panel-text: var(--ls-panel-text);
-$panel-text-light: var(--ls-panel-text-light);
 
 :root {
   --ls-primary: #{vars.$color-primary};
@@ -21,7 +18,4 @@ $panel-text-light: var(--ls-panel-text-light);
   --ls-background: #{vars.$color-background};
   --ls-background-text: #{vars.$color-background-text};
   --ls-background-text-light: #{vars.$color-background-text-light};
-  --ls-panel: #{vars.$color-panel};
-  --ls-panel-text: #{vars.$color-panel-text};
-  --ls-panel-text-light: #{vars.$color-panel-text-light};
 }
diff --git a/packages/web/scss/_input.scss b/packages/web/scss/_input.scss
@@ -7,6 +7,7 @@ input {
   padding: 8px;
   margin: 4px 0;
   border-radius: vars.$border-radius;
+  backdrop-filter: vars.$elevation-filter;
   background-color: colors.$elevation;
   color: colors.$background-text;
   &:not([type=checkbox]) {

diff --git a/packages/web/scss/_layout.scss b/packages/web/scss/_layout.scss
@@ -1,17 +1,6 @@
 @use "colors";
 @use "vars";
 
-.container {
-  padding: 0 20px;
-  @each $breakpoint, $value in vars.$breakpoints {
-    &-#{$breakpoint} {
-      max-width: $value;
-      margin: 0 auto;
-      padding: 0 20px;
-    }
-  }
-}
-
 .col {
   display: flex;
   flex-direction: column;
@@ -28,6 +17,18 @@
   padding: 0;
 }
 
+.container {
+  padding: 0 20px;
+  margin: 0 auto;
+  @each $breakpoint, $value in vars.$breakpoints {
+    &-#{$breakpoint} {
+      max-width: $value;
+      margin: 0 auto;
+      padding: 0 20px;
+    }
+  }
+}
+
 .full {
   width: 100%;
   height: 100%;  
@@ -60,6 +61,30 @@
   }
 }
 
+.m-auto {
+  margin: auto;
+}
+.mt-auto {
+  margin-top: auto;
+}
+.mb-auto {
+  margin-bottom: auto;
+}
+.ml-auto {
+  margin-left: auto;
+}
+.mr-auto {
+  margin-right: auto;
+}
+.mh-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.mv-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 @each $breakpoint, $value in vars.$spacing {
   .gap-#{$breakpoint} {
     gap: $value;

diff --git a/packages/web/scss/_nav.scss b/packages/web/scss/_nav.scss
@@ -14,7 +14,9 @@
     position: sticky;
     top: 0;
     z-index: 100;
-    background-color: colors.$panel;
+    background-color: colors.$elevation;
+    backdrop-filter: vars.$elevation-filter;
+    color: colors.$background-text;
   }
 }
 

diff --git a/packages/web/scss/_typo.scss b/packages/web/scss/_typo.scss
@@ -52,8 +52,9 @@ img {
 }
 code {
   padding: 2px 5px;
-  background-color: colors.$panel;
-  color: colors.$panel-text-light;
+  background-color: colors.$elevation;
+  color: colors.$background-text-light;
+  backdrop-filter: vars.$elevation-filter;
 }
 pre {
   padding: 1rem;

diff --git a/packages/web/scss/_vars.scss b/packages/web/scss/_vars.scss
@@ -30,12 +30,10 @@ $color-primary-text-highlight: #000 !default;
 $lightness-factor: 15% !default;
 $elevation-factor: 10% !default;
 $color-elevation: rgba(255, 255, 255, $elevation-factor) !default;
+$elevation-filter: blur(12px);
 $color-background: #282C34 !default;
 $color-background-text: #ddd !default;
 $color-background-text-light: #fff !default;
-$color-panel: #393D45 !default;
-$color-panel-text: #ddd !default;
-$color-panel-text-light: #fff !default;
 $color-primary-light: color.mix($color-background, $color-primary, $lightness-factor) !default;
 $box-shadow: 0 0 10px 0px;
 $border-radius: 0.5rem;