Remove use of @apply

lookback · Sep 16, 2024 · 2c00547 · 2c00547
1 parent 4f62c89
commit 2c00547
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 20 deletions.
diff --git a/src/components/buttons.css b/src/components/buttons.css
@@ -15,7 +15,7 @@ BUTTONS
   --text-hover: #fff;
   --outline-color: var(--bg-focused);
 
-  @apply rounded-lg;
+  border-radius: theme('borderRadius.lg');
   position: relative;
   text-align: center;
   display: inline-block;

diff --git a/src/setup/elements.css b/src/setup/elements.css
@@ -21,24 +21,25 @@ a {
 }
 
 :where(code, pre, tt, kbd, samp) {
-  @apply font-mono;
+  font-family: theme('fontFamily.mono');
 }
 
 pre {
-  @apply rounded-lg text-f6 p-3;
+  border-radius: theme('borderRadius.lg');
+  font-size: theme('fontSize.f6');
+  padding: theme('spacing.3');
   background-color: var(--blue-90);
   color: white;
 }
 
 :where(code, kbd, mark) {
-  @apply rounded;
+  border-radius: theme('borderRadius.DEFAULT');
   color: var(--grey-100);
   padding: 0.2em 0.4em;
   background-color: var(--grey-40);
 }
 
 code {
-  @apply font-mono;
   font-size: 0.875em;
 }
 
@@ -51,7 +52,7 @@ pre code {
 }
 
 kbd {
-  @apply font-sans;
+  font-family: theme('fontFamily.sans');
   font-weight: bold;
 }
 

diff --git a/src/setup/forms.css b/src/setup/forms.css
@@ -28,17 +28,18 @@ label {
 
 input:where([type='text'], [type='url'], [type='email'], [type='password'], [type='search'], [type='number'], [type='date'], [type='time']),
 textarea {
-  @apply rounded-lg border-1 p-1;
-
+  border-radius: theme('borderRadius.lg');
+  border-width: 1px;
+  padding: theme('spacing.1');
   background-color: #fefefe;
   transition: color 150ms ease-out, border-color 150ms ease;
 
   &:hover {
-    @apply border-grey-50;
+    border-color: var(--grey-50);
   }
 
   &:focus {
-    @apply border-active;
+    border-color: var(--blue-70);
     background-color: #fff;
   }
 
@@ -57,7 +58,8 @@ input:where([type='search']) {
 }
 
 select {
-  @apply rounded-lg border-1;
+  border-radius: theme('borderRadius.lg');
+  border-width: 1px;
   background-color: var(--grey-20);
   padding: var(--control-padding);
   padding-right: 2em; /* give room for the chevron bg */
@@ -68,11 +70,11 @@ select {
   background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0.679556 5.56825C1.54021 4.76907 2.88576 4.81891 3.68493 5.67956L12 14.6342L20.3151 5.67956C21.1142 4.81891 22.4598 4.76907 23.3204 5.56825C24.1811 6.36742 24.2309 7.71297 23.4318 8.57362L13.5583 19.2065C13.156 19.6399 12.5913 19.8861 12 19.8861C11.4087 19.8861 10.844 19.6399 10.4417 19.2065L0.568245 8.57362C-0.23093 7.71297 -0.181094 6.36742 0.679556 5.56825Z" fill="currentColor"/></svg>');
 
   &:hover {
-    @apply border-grey-50;
+    border-color: var(--grey-50);
   }
 
   &:focus {
-    @apply border-active;
+    border-color: var(--blue-70);
   }
 
   @media screen and (prefers-color-scheme: dark) {

diff --git a/src/setup/headings.css b/src/setup/headings.css
@@ -3,7 +3,9 @@ HEADINGS
 ----------------------------------------------------------------*/
 
 :where(h1, h2, h3, h4, h5, h6) {
-  @apply leading-tight tracking-heading mb-2;
+  line-height: theme('lineHeight.tight');
+  letter-spacing: theme('letterSpacing.heading');
+  margin-bottom: theme('spacing.2');
   font-weight: bold;
   color: var(--heading-color);
 }
@@ -13,25 +15,25 @@ HEADINGS
 }
 
 h1 {
-  @apply text-f1;
+  font-size: theme('fontSize.f1');
 }
 
 h2 {
-  @apply text-f2;
+  font-size: theme('fontSize.f2');
 }
 
 h3 {
-  @apply text-f3;
+  font-size: theme('fontSize.f3');
 }
 
 h4 {
-  @apply text-f4;
+  font-size: theme('fontSize.f4');
 }
 
 h5 {
-  @apply text-f5;
+  font-size: theme('fontSize.f5');
 }
 
 h6 {
-  @apply text-f6;
+  font-size: theme('fontSize.f6');
 }