Update colors and fonts

mayu-live · Jan 13, 2024 · 0c2b78a · 0c2b78a
1 parent 0789de2
commit 0c2b78a
Show file tree

Hide file tree

Showing 30 changed files with 366 additions and 115 deletions.
diff --git a/example/Gemfile.lock b/example/Gemfile.lock
@@ -106,7 +106,7 @@ GEM
     rmagick (5.3.0)
       pkg-config (~> 1.4)
     rouge (4.0.1)
-    sorbet-runtime (0.5.11181)
+    sorbet-runtime (0.5.11188)
     source_map (3.0.1)
       json
     syntax_tree (5.3.0)

diff --git a/example/app/components/Form/Button.haml b/example/app/components/Form/Button.haml
@@ -1,3 +1,6 @@
+%button{style: { __button_color: props.fetch(:color, "var(--accent-color)")  }, **props.except(:color)}
+  %slot
+
 :css
   button {
     background-color: var(--button-color, var(--accent-color));
@@ -29,5 +32,3 @@
     cursor: not-allowed;
   }
 
-%button{style: { __button_color: props.fetch(:color, "var(--accent-color)")  }, **props.except(:color)}
-  %slot
diff --git a/example/app/components/Layout/FullWidthPageWithMenu.haml b/example/app/components/Layout/FullWidthPageWithMenu.haml
@@ -21,8 +21,9 @@
   }
 
   nav {
+    font-family: var(--font-heading);
     grid-area: menu;
-    background: var(--menu-background);
+    background: linear-gradient(var(--menu-background), var(--pink) 600%);
     color: var(--menu-color);
     border-bottom: var(--thin-border);
   }

diff --git a/example/app/components/Layout/Header.haml b/example/app/components/Layout/Header.haml
@@ -23,21 +23,29 @@
 
 :css
   header {
+    grid-row: 1;
+    grid-column: 1;
+    align-self: start;
+    z-index: 1;
+
     /*
     position: sticky;
     top: 0;
-    z-index: 2;
     */
+
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: center;
     gap: 1rem;
     padding: .5em 2em;
     background: var(--header-background);
     border-bottom: var(--thin-border);
+    backdrop-filter: brightness(50%) blur(.5rem);
+    box-shadow: 0 0 5em #1b2b5f;
   }
 
   menu {
+    font-family: var(--font-heading);
     list-style-type: none;
     display: flex;
     flex-direction: row;

diff --git a/example/app/components/Markdown.haml b/example/app/components/Markdown.haml
@@ -67,7 +67,7 @@
 
 :css
   .unsupported {
-    font-family: monospace;
+    font-family: var(--font-mono), monospace;
     color: red;
   }
 

diff --git a/example/app/components/UI/Breadcrumbs/Breadcrumbs.haml b/example/app/components/UI/Breadcrumbs/Breadcrumbs.haml
@@ -23,6 +23,7 @@
 
 :css
   nav {
+    font-family: var(--font-heading);
     background: var(--breadcrumbs-background);
     color: var(--breadcrumbs-color);
     --link-color: currentcolor;

diff --git a/example/app/components/UI/Breadcrumbs/Separator.haml b/example/app/components/UI/Breadcrumbs/Separator.haml
@@ -4,6 +4,6 @@
     scale: 2;
     user-select: none;
     font-weight: 300;
-    color: #0006;
+    color: #fff3;
   }
 %span= "/"
diff --git a/example/app/components/UI/Details.haml b/example/app/components/UI/Details.haml
@@ -24,6 +24,15 @@
     end
   end
 
+%Card(class=$class)
+  %details(ontoggle=handle_toggle){open: state[:open]}
+    %summary= $summary
+    .content
+      = if state[:loaded]
+        %slot
+      = else
+        %p Loading…
+
 :css
   details {
     padding: 0.5em 0.5em 0;
@@ -32,32 +41,39 @@
   summary {
     font-weight: bold;
     margin: -0.5em -0.5em 0;
-    padding: 0.5em;
+    padding: 0.5em 1em;
     cursor: pointer;
     user-select: none;
+
+    details[open] & {
+      border-bottom: 1px solid #0003;
+      margin-bottom: 0.5em;
+
+      &::after {
+        transform: translateX(0.5em) rotateZ(0.25turn);
+      }
+    }
+
+    &::after {
+      display: inline-block;
+      content: "▶";
+      transition: transform 250ms;
+      transform: translateX(0.5em) rotateZ(0turn);
+      scale: 1;
+      margin-right: 1em;
+    }
   }
 
-  details[open] {
-    padding: 0.5em;
+  summary::marker {
+    content: "";
+    display: none;
   }
 
-  details[open] .summary {
-    border-bottom: 1px solid #0003;
-    margin-bottom: 0.5em;
+  details[open] {
+    padding: 0.5em;
   }
 
   p {
     margin: 0;
     padding: 0;
   }
-
-- state => open:
-
-%Card(class=$class)
-  %details(ontoggle=handle_toggle open=open)
-    %summary= $summary
-    .content
-      = if state[:loaded]
-        %slot
-      = else
-        %p Loading…
diff --git a/example/app/components/UI/Highlight.css b/example/app/components/UI/Highlight.css
@@ -9,16 +9,22 @@
   margin: 1em;
   font-size: 0.9em;
   display: block;
-  font-family: monospace;
+  font-family: var(--font-mono), monospace;
+  font-size: 1.1em;
   white-space: pre;
+  font-weight: 200;
+}
+.highlight > * {
+  color: rgb(var(--color));
+  text-shadow: 0 0 2px #000, 0 0 0.75em rgb(var(--color) / 50%);
 }
 .highlight,
 .highlight .w {
-  color: #fbf1c7;
+  --color: 98% 95% 78%;
 }
 .highlight .err {
-  color: #fb4934;
-  background-color: #282828;
+  --color: 98% 29% 20%;
+  background---color: 16% 16% 16%;
   font-weight: bold;
 }
 .highlight .c,
@@ -28,50 +34,50 @@
 .highlight .cpf,
 .highlight .c1,
 .highlight .cs {
-  color: #928374;
+  --color: 57% 51% 45%;
   font-style: italic;
 }
 .highlight .cp {
-  color: #8ec07c;
+  --color: 56% 75% 49%;
 }
 .highlight .nt {
-  color: #fb4934;
+  --color: 98% 29% 20%;
 }
 .highlight .o,
 .highlight .ow {
-  color: #fbf1c7;
+  --color: 98% 95% 78%;
 }
 .highlight .p,
 .highlight .pi {
-  color: #fbf1c7;
+  --color: 98% 95% 78%;
 }
 .highlight .gi {
-  color: #b8bb26;
-  background-color: #282828;
+  --color: 72% 73% 15%;
+  background---color: 16% 16% 16%;
 }
 .highlight .gd {
-  color: #fb4934;
-  background-color: #282828;
+  --color: 98% 29% 20%;
+  background---color: 16% 16% 16%;
 }
 .highlight .gh {
-  color: #b8bb26;
+  --color: 72% 73% 15%;
   font-weight: bold;
 }
 .highlight .k,
 .highlight .kn,
 .highlight .kp,
 .highlight .kr,
 .highlight .kv {
-  color: #fb4934;
+  --color: 98% 29% 20%;
 }
 .highlight .kc {
-  color: #d3869b;
+  --color: 83% 53% 61%;
 }
 .highlight .kt {
-  color: #fabd2f;
+  --color: 98% 74% 18%;
 }
 .highlight .kd {
-  color: #fe8019;
+  --color: 100% 50% 10%;
 }
 .highlight .s,
 .highlight .sb,
@@ -82,34 +88,34 @@
 .highlight .sh,
 .highlight .sx,
 .highlight .s1 {
-  color: #b8bb26;
+  --color: 72% 73% 15%;
   font-style: italic;
 }
 .highlight .si {
-  color: #b8bb26;
+  --color: 72% 73% 15%;
   font-style: italic;
 }
 .highlight .sr {
-  color: #b8bb26;
+  --color: 72% 73% 15%;
   font-style: italic;
 }
 .highlight .sa {
-  color: #fb4934;
+  --color: 98% 29% 20%;
 }
 .highlight .se {
-  color: #fe8019;
+  --color: 100% 50% 10%;
 }
 .highlight .nn {
-  color: #8ec07c;
+  --color: 56% 75% 49%;
 }
 .highlight .nc {
-  color: #8ec07c;
+  --color: 56% 75% 49%;
 }
 .highlight .no {
-  color: #d3869b;
+  --color: 83% 53% 61%;
 }
 .highlight .na {
-  color: #b8bb26;
+  --color: 72% 73% 15%;
 }
 .highlight .m,
 .highlight .mb,
@@ -119,8 +125,8 @@
 .highlight .il,
 .highlight .mo,
 .highlight .mx {
-  color: #d3869b;
+  --color: 83% 53% 61%;
 }
 .highlight .ss {
-  color: #83a598;
+  --color: 51% 65% 60%;
 }
diff --git a/example/app/components/UI/Highlight.haml b/example/app/components/UI/Highlight.haml
@@ -32,7 +32,7 @@
 
   .card {
     display: grid;
-    background: #282828;
+    background: var(--deep-purple);
     border-radius: 2px;
     box-shadow: rgba(50, 50, 93, 0.55) 0px 13px 27px -5px, rgba(0, 0, 0, 0.9) 0px 8px 16px -8px;
     margin: 1em;