Merge pull request #166 from joyofrails/chore/style-updates

Modest style updates

Author: rossta

app/javascript/css/baseline.css

@@ -306,8 +306,8 @@ select {
   border-style: solid;
   border-width: 1px;
   border-radius: 0;
-  padding: 0.5rem 0.75rem;
-  font-size: 1rem;
+  padding: 0.75rem 1rem;
+  font-size: var(--step--1);
   line-height: 1.5rem;
   --tw-shadow: 0 0 #0000;
 }

app/javascript/css/components/article-content.css

@@ -1,4 +1,5 @@
-.article-content {
+.article-content,
+.section-content {
   padding-bottom: var(--space-3xl);
 
   & h1,

app/javascript/css/components/button.css

@@ -1,15 +1,13 @@
 .button {
-  border: 1px solid var(--joy-border-subtle);
   border-radius: 0.375rem;
-  padding: 0.75rem;
+  font-size: var(--step--1);
+  padding: 0.75rem 1rem;
+  font-weight: 700;
+
   display: inline-flex;
   align-items: center;
-  font-size: 0.875rem;
   font-family: var(--sans-serif);
-  line-height: 1.5715;
-  font-weight: 600;
   color: var(--joy-light);
-  line-height: 1rem;
 
   &:is(a) {
     text-decoration: none;
@@ -24,7 +22,6 @@
     display: none;
   }
   &.primary {
-    border: 1px solid var(--joy-button-primary);
     background-color: var(--joy-button-primary);
 
     &:hover {
@@ -84,3 +81,7 @@
     width: 24px;
   }
 }
+
+.dark .button.secondary {
+  color: var(--joy-dark);
+}

app/javascript/css/components/select.css

@@ -1,6 +1,6 @@
 select {
-  font-size: 0.875rem;
-  padding: 0.625rem;
-  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+  font-size: var(--step--1);
+  border-radius: 0.375rem;
   display: block;
 }

app/javascript/css/config/settings.css

@@ -7,14 +7,4 @@
   --monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;
   --leading: 1.6;
-  --ratio: 1.61803;
-  --width-measure: 60ch;
-  --width-margin: calc(var(--width-measure) / 1.618);
-  --width-padding: var(--space-none-3xl);
-  --border-thin: 1px;
-  --border-thick: 2px;
-  --border-chunky: 4px;
-  --scrollbar-width: 10px;
 }
-
-/* from Tailwind CSS */

app/javascript/css/config/theme.css

@@ -55,12 +55,12 @@
   --joy-button-primary: var(--joy-color-600);
   --joy-button-primary-hover: var(--joy-color-700);
   --joy-button-primary-active: var(--joy-color-800);
-  --joy-button-secondary: var(--joy-light);
-  --joy-button-secondary-hover: var(--joy-color-50);
-  --joy-button-secondary-active: var(--joy-color-100);
-  --joy-button-tertiary: var(--color-slate-400);
-  --joy-button-tertiary-hover: var(--color-slate-500);
-  --joy-button-tertiary-active: var(--color-slate-600);
+  --joy-button-secondary: var(--joy-color-200);
+  --joy-button-secondary-hover: var(--joy-color-300);
+  --joy-button-secondary-active: var(--joy-color-400);
+  --joy-button-tertiary: var(--color-slate-500);
+  --joy-button-tertiary-hover: var(--color-slate-600);
+  --joy-button-tertiary-active: var(--color-slate-700);
   --joy-button-warn: var(--color-red-500);
   --joy-button-warn-hover: var(--color-red-400);
 }
@@ -89,7 +89,4 @@
   --joy-link-visited: var(--joy-link-3);
   --joy-link-decoration: var(--joy-link-8);
   --joy-link-active: var(--joy-link-5);
-  --joy-button-primary: var(--joy-color-600);
-  --joy-button-secondary: var(--color-slate-500);
-  --joy-button-warn: var(--color-red-500);
 }

app/views/color_schemes/show_view.rb

@@ -23,8 +23,11 @@ def initialize(
 
   def view_template
     content_for :head do
-      render("application/theme/color")
+      style do
+        render ColorSchemes::Css.new(color_scheme: @color_scheme)
+      end
     end
+
     render Pages::Header.new(title: "Theme: Color")
     div(class: "section-content container py-gap") do
       if previewing? || preserving?

app/views/users/newsletter_subscriptions/form.rb

@@ -21,7 +21,7 @@ def view_template
             autocomplete: "off",
             placeholder: "[email protected]",
             class:
-              "flex-1 rounded bg-white/5 py-1.5 pl-3 sm:leading-6 focus-ring focus:ring-0 ring-1 ring-inset ring-white/10 w-full lg:min-w-[36ch] "
+              "flex-1 rounded bg-white/5 focus-ring focus:ring-0 ring-1 ring-inset ring-white/10 w-full lg:min-w-[36ch] "
         end
         div do
           plain f.submit "Subscribe", class: "button primary focus-ring"