From dc57a521e911c0959722c465cc0444064f09fc97 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 20 Feb 2025 16:38:35 -0700
Subject: [PATCH] move some tailwind css variables over

---
 web/src/app/test/tailwind/page.tsx            |  38 +--
 web/src/components/ui/icons/PulsingDot.tsx    |   2 +-
 web/src/styles/animations.scss                |  13 -
 web/src/styles/fonts.scss                     |   4 -
 web/src/styles/reset.scss                     | 288 ------------------
 web/src/styles/styles.scss                    |  52 +---
 .../styles/{tailwind.scss => tailwind.css}    |   8 +-
 web/tailwind.config.ts                        |  34 ---
 8 files changed, 16 insertions(+), 423 deletions(-)
 delete mode 100644 web/src/styles/animations.scss
 delete mode 100644 web/src/styles/reset.scss
 rename web/src/styles/{tailwind.scss => tailwind.css} (73%)
 delete mode 100644 web/tailwind.config.ts

diff --git a/web/src/app/test/tailwind/page.tsx b/web/src/app/test/tailwind/page.tsx
index 0afcba639..886ce086b 100644
--- a/web/src/app/test/tailwind/page.tsx
+++ b/web/src/app/test/tailwind/page.tsx
@@ -3,42 +3,20 @@ import React from 'react';
 export default function TestPage() {
   return (
     <div className="flex flex-col gap-4 bg-red-500">
-      <div className="flex space-x-3">
-        <h1>Test</h1>
-        <h2>TESTING!</h2>
-      </div>
-      <div className="bg-blue-500">
-        <h2>Test</h2>
+      <div className="flex flex-col space-y-5">
+        <div>Test</div>
+        <div>TESTING!</div>
+        <div>TESTING123</div>
       </div>
 
-      <div className="flex flex-col gap-4 bg-green-200 dark:bg-green-900">
+      <div className="bg-primary-light dark:bg-primary-dark flex flex-col gap-4">
         <h1>Test</h1>
         <h2>TESTING!!!! :)</h2>
-      </div>
 
-      <div className="rounded-lg bg-white px-6 py-8 ring shadow-xl ring-gray-900/5 dark:bg-gray-800">
-        <h3 className="mt-5 text-base font-medium tracking-tight text-gray-900 dark:text-white">
-          Writes upside-down
-        </h3>
-        <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
-          The Zero Gravity Pen can be used to write in any orientation, including upside-down. It
-          even works in outer space.
-        </p>
+        <p className="border-primary-dark border font-mono">Hello</p>
+        <a>This is a not link</a>
+        <a href="https://www.google.com">This is a link</a>
       </div>
-
-      {/* <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
-  <div>
-    <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
-      <svg class="h-6 w-6 stroke-white" ...>
-        <!-- ... -->
-      </svg>
-    </span>
-  </div>
-  <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3>
-  <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm ">
-    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
-  </p>
-</div> */}
     </div>
   );
 }
diff --git a/web/src/components/ui/icons/PulsingDot.tsx b/web/src/components/ui/icons/PulsingDot.tsx
index 05ab91d0b..00b30858a 100644
--- a/web/src/components/ui/icons/PulsingDot.tsx
+++ b/web/src/components/ui/icons/PulsingDot.tsx
@@ -41,7 +41,7 @@ export const PulsingDot: React.FC<{
     <>
       <span className={cx('pulsing-dot relative', styles.ringContainer)} style={style}>
         <span
-          className={cx(styles.ringring)}
+          className={cx(styles.ringring, 'animate-pulse')}
           style={{
             // height: size * 1.35,
             // width: size * 1.35,
diff --git a/web/src/styles/animations.scss b/web/src/styles/animations.scss
deleted file mode 100644
index dfcf15229..000000000
--- a/web/src/styles/animations.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@-webkit-keyframes pulsate {
-  0% {
-    -webkit-transform: scale(0.1, 0.1);
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    -webkit-transform: scale(1.2, 1.2);
-    opacity: 0;
-  }
-}
diff --git a/web/src/styles/fonts.scss b/web/src/styles/fonts.scss
index bab04232d..2f7ffe5a6 100644
--- a/web/src/styles/fonts.scss
+++ b/web/src/styles/fonts.scss
@@ -33,7 +33,3 @@
   src: url('./fonts/Roobert-Heavy.otf') format('opentype');
   font-weight: 900;
 }
-
-:root {
-  --font-app: 'Roobert_Pro', sans-serif;
-}
diff --git a/web/src/styles/reset.scss b/web/src/styles/reset.scss
deleted file mode 100644
index 56ffdd718..000000000
--- a/web/src/styles/reset.scss
+++ /dev/null
@@ -1,288 +0,0 @@
-/* stylelint-disable */
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-}
-input::-ms-clear,
-input::-ms-reveal {
-  display: none;
-}
-
-// *,
-// *::before,
-// *::after {
-//   box-sizing: border-box;
-//   border: 1 solid !important;
-// }
-
-html {
-  font-family: var(--font-app), sans-serif;
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -ms-overflow-style: scrollbar;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-@-ms-viewport {
-  width: device-width;
-}
-
-body {
-  margin: 0;
-}
-[tabindex='-1']:focus {
-  outline: none;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 400;
-}
-p {
-  margin-top: 0;
-  margin-bottom: 0em;
-}
-abbr[title],
-abbr[data-original-title] {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-  border-bottom: 0;
-  cursor: help;
-}
-address {
-  margin-bottom: 0em;
-  font-style: normal;
-  line-height: inherit;
-}
-input[type='text'],
-input[type='password'],
-input[type='number'],
-textarea {
-  -webkit-appearance: none;
-}
-ol,
-ul,
-dl {
-  margin-top: 0;
-  margin-bottom: 0em;
-}
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-dt {
-  font-weight: 400;
-}
-dd {
-  margin-bottom: 0em;
-  margin-left: 0;
-}
-blockquote {
-  margin: 0 0 0em;
-}
-dfn {
-  font-style: italic;
-}
-b,
-strong {
-  font-weight: bolder;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  position: relative;
-  font-size: 75%;
-  line-height: 0;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-pre,
-code,
-kbd,
-samp {
-  font-size: 1em;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-}
-pre {
-  margin-top: 0;
-  margin-bottom: 0em;
-  overflow: auto;
-}
-figure {
-  margin: 0 0 1em;
-}
-img {
-  vertical-align: middle;
-  border-style: none;
-}
-a,
-area,
-button,
-[role='button'],
-input:not([type='range']),
-label,
-select,
-summary,
-textarea {
-  touch-action: manipulation;
-}
-table {
-  border-collapse: collapse;
-}
-caption {
-  padding-top: 0.75em;
-  padding-bottom: 0.3em;
-  text-align: left;
-  caption-side: bottom;
-}
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0;
-  color: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-button,
-html [type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button;
-}
-button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-input[type='radio'],
-input[type='checkbox'] {
-  box-sizing: border-box;
-  padding: 0;
-}
-input[type='date'],
-input[type='time'],
-input[type='datetime-local'],
-input[type='month'] {
-  -webkit-appearance: listbox;
-}
-textarea {
-  overflow: auto;
-  resize: vertical;
-}
-fieldset {
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-legend {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 0em;
-  padding: 0;
-  color: inherit;
-  font-size: 1.5em;
-  line-height: inherit;
-  white-space: normal;
-}
-progress {
-  vertical-align: baseline;
-}
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
-[type='search'] {
-  outline-offset: -2px;
-  -webkit-appearance: none;
-}
-[type='search']::-webkit-search-cancel-button,
-[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-file-upload-button {
-  font: inherit;
-  -webkit-appearance: button;
-}
-output {
-  display: inline-block;
-}
-summary {
-  display: list-item;
-}
-template {
-  display: none;
-}
-[hidden] {
-  display: none !important;
-}
-mark {
-  padding: 0.2em;
-  background-color: #feffe6;
-}
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family:
-    var(--font-app),
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    Fira Sans,
-    Droid Sans,
-    Helvetica Neue,
-    sans-serif;
-}
-
-html,
-body,
-#__next {
-  height: 100%;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
diff --git a/web/src/styles/styles.scss b/web/src/styles/styles.scss
index ea9b16cf3..7e0e4276f 100644
--- a/web/src/styles/styles.scss
+++ b/web/src/styles/styles.scss
@@ -1,62 +1,12 @@
-@import './tailwind';
 @import './fonts';
+@import './tailwind';
 @import './antd';
-@import './reset';
 @import './sql';
 @import './loaders';
-@import './animations';
 @import './monaco';
 @import '../components/ui/layout/AppSplitter/SplitPane/themes/default';
 @import 'react-data-grid/lib/styles.css';
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-body,
-p,
-div,
-span,
-label,
-textarea,
-button,
-select,
-option,
-ul,
-li,
-a,
-i,
-svg,
-path,
-g,
-tspan,
-table,
-th,
-td,
-tr,
-thead,
-tbody,
-tfoot,
-blockquote,
-pre {
-  font-family:
-    var(--font-app),
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    'Noto Sans',
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji';
-}
-
 input {
   font-family:
     var(--font-app),
diff --git a/web/src/styles/tailwind.scss b/web/src/styles/tailwind.css
similarity index 73%
rename from web/src/styles/tailwind.scss
rename to web/src/styles/tailwind.css
index d5df22339..2f304fa6b 100644
--- a/web/src/styles/tailwind.scss
+++ b/web/src/styles/tailwind.css
@@ -3,7 +3,9 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  // Text
+  --font-sans: 'Roobert_Pro', sans-serif;
+  --font-mono: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
   --text-xxs: 10px;
   --text-xxs--line-height: 1;
   --text-xs: 11px;
@@ -25,7 +27,9 @@
   --text-4xl: 30px;
   --text-4xl--line-height: 1;
 
-  // Colors
+  --color-primary: #7c3aed;
+  --color-primary-light: #a26cff;
+  --color-primary-dark: #6d28d9;
 }
 
 body {
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
deleted file mode 100644
index f26a1cb21..000000000
--- a/web/tailwind.config.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const config = {
-  darkMode: false,
-  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    fontFamily: {
-      sans: ['Roobert_Pro', 'sans-serif'],
-      mono: ['Menlo', 'Monaco', 'Courier New', 'monospace']
-    },
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor'
-    },
-    fontSize: {
-      xxs: ['10px', { lineHeight: '1.2' }],
-      xs: ['11px', { lineHeight: '1.2' }],
-      sm: ['12px', { lineHeight: '1.2' }],
-      base: ['13px', { lineHeight: '1.2' }],
-      md: ['14px', { lineHeight: '1.2' }],
-      lg: ['18px', { lineHeight: '1.2' }],
-      xl: ['18px', { lineHeight: '1.2' }],
-      '2xl': ['20px', { lineHeight: '1.2' }],
-      '3xl': ['24px', { lineHeight: '1.2' }],
-      '4xl': ['30px', { lineHeight: '1.2' }]
-    },
-    extend: {
-      colors: {}
-    }
-  },
-  plugins: []
-} satisfies Config;
-
-export default config;