Update styles for color theme page

rossta · rossta · commit 60e9cdbbda1c · 2024-07-03T12:24:44.000-04:00
diff --git a/app/javascript/css/application.css b/app/javascript/css/application.css
@@ -32,4 +32,4 @@
 @import './components/newsletter-banner.css';
 @import './components/anchors.scss';
 @import './components/callout.css';
-@import './components/color-theme.css';
+@import './components/color-theme.scss';
diff --git a/app/javascript/css/baseline.css b/app/javascript/css/baseline.css
@@ -621,7 +621,11 @@ svg {
 
   button,
   input,
+  select,
   textarea {
     background-color: var(--joy-dark);
   }
+  select {
+    color: var(--joy-text);
+  }
 }
diff --git a/app/javascript/css/components/button.css b/app/javascript/css/components/button.css
@@ -1,6 +1,6 @@
 .button {
   border-radius: 0.375rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.625rem 0.75rem;
   display: inline-flex;
   align-items: center;
   font-size: 0.875rem;
diff --git a/app/javascript/css/components/color-theme.scss b/app/javascript/css/components/color-theme.scss
@@ -1,11 +1,18 @@
+@import '../config/variables.scss';
+
 .color-theme {
   color: var(--joy-background-clean);
-  margin-bottom: var(--space-3xl);
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   border-radius: 0.5rem;
 }
 
+@media screen and (min-width: $screen-md) {
+  .color-theme {
+    flex-direction: row;
+  }
+}
+
 .color-swatch {
   width: 100%;
   padding: 1rem;
diff --git a/app/javascript/css/utilities/custom.css b/app/javascript/css/utilities/custom.css
@@ -41,3 +41,7 @@
 .text-theme {
   color: var(--joy-text-theme);
 }
+
+.text-small {
+  font-size: var(--step--1);
+}

Original file line number	Diff line number	Diff line change
`@@ -621,7 +621,11 @@ svg {`
`621`	`621`
`622`	`622`	`button,`
`623`	`623`	`input,`
	`624`	`+ select,`
`624`	`625`	`textarea {`
`625`	`626`	`background-color: var(--joy-dark);`
`626`	`627`	`}`
	`628`	`+ select {`
	`629`	`+ color: var(--joy-text);`
	`630`	`+ }`
`627`	`631`	`}`
Original file line number	Diff line number	Diff line change
`@@ -41,3 +41,7 @@`
`41`	`41`	`.text-theme {`
`42`	`42`	`color: var(--joy-text-theme);`
`43`	`43`	`}`
	`44`	`+`
	`45`	`+.text-small {`
	`46`	`+ font-size: var(--step--1);`
	`47`	`+}`