kentcdodds colors

.vs/VSWorkspaceState.json

@@ -0,0 +1,7 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "SelectedNode": "\\C:\\Users\\jonas\\Desktop\\next-context",
+  "PreviewInSolutionExplorer": false
+}

package.json

@@ -18,15 +18,19 @@
     "slick-carousel": "^1.8.1",
     "uuid": "^8.3.2"
   },
-  "devDependencies": {
-    "@types/react": "^17.0.27",
-    "autoprefixer": "^10.3.5",
+  "devDependencies": {    
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "autoprefixer": "^10.4.0",
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.1.2",
-    "postcss": "^8.3.8",
-    "prettier": "^2.4.1",
+    "postcss": "^8.4.4",
+    "postcss-cli": "^9.0.2",
+    "postcss-import": "^14.0.2",
+    "prettier": "^2.5.0",
+    "prettier-plugin-tailwind": "^2.2.12",
     "sass": "^1.42.1",
-    "tailwindcss": "^2.2.15",
-    "typescript": "^4.3.2"
+    "tailwindcss": "^2.2.19",
+    "typescript": "4.4.4"
   }
 }

src/styles/colors.scss

@@ -1,52 +1,189 @@
 :root {
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 9999px;
-
-  --animation-btn: 0.25s;
-  --animation-input: 0.4s;
-
-  --padding-card: 2rem;
-
-  --btn-text-case: uppercase;
-  --navbar-padding: 0.5rem;
-  --border-btn: 1px;
-
-  --focus-ring: 2px;
-  --focus-ring-offset: 2px;
-}
-
-:root.light {
-  --color-brand: crimson;
-  --bg-primary: #fcfcfc;
-  --bg-primary-rgb: 254, 254, 254;
-  --bg-secondary: #eee;
-  --bg-inset: #eff0f5;
-  --border-primary: rgba(65, 67, 78, 0.16);
-  --text-primary: #050505;
-  --text-secondary: #2f3037;
-  --text-tertiary: #525560;
-  --text-quaternary: #686b78;
-  --text-placeholder: rgba(82, 85, 96, 0.5);
-  --text-on-primary: #fbfbfc;
-  --text-link: #007aff;
-  --text-link-rgb: 0, 122, 255;
-}
-
-:root.dark {
-  --color-brand: rgb(20, 220, 220);
-
-  --bg-primary: #050505;
-  --bg-primary-rgb: 5, 5, 5;
-  --bg-secondary: #151617;
-  --bg-inset: #151617;
-  --border-primary: rgba(255, 255, 255, 0.12);
-  --text-primary: #fbfbfc;
-  --text-secondary: #dedfe5;
-  --text-tertiary: #a9abb6;
-  --text-quaternary: #9094a6;
-  --text-placeholder: rgba(145, 148, 161, 0.5);
-  --text-on-primary: #050505;
-  --text-link: #ff9500;
-  --text-link-rgb: 255, 149, 0;
+  --color-black: #000;
+  --color-white: #fff;
+  --color-blue-100: #e8f2ff;
+  --color-blue-500: #4b96ff;
+  --color-blueGray-500: #a9adc1;
+  --color-gray-100: #f7f7f7;
+  --color-gray-200: #e6e9ee;
+  --color-gray-300: #dde0e4;
+  --color-gray-400: #818890;
+  --color-gray-500: #535661;
+  --color-gray-600: #4b4c53;
+  --color-gray-700: #3a3d4a;
+  --color-gray-800: #2e3039;
+  --color-gray-900: #1f2028;
+  --color-green-100: #e7f9ed;
+  --color-green-500: #30c85e;
+  --color-green-600: #68d94a;
+  --color-red-500: #ff4545;
+  --color-yellow-500: #ffd644;
+
+  --color-team-unknown: #818890;
+  --color-team-blue: #36a3ff;
+  --color-team-red: #ff4545;
+  /* yellow in light mode is... hard */
+  --color-team-yellow: #a08600;
+  --color-yellow-500: #a08600;
+}
+
+.light {
+  --color-team-unknown: var(--color-black);
+  --bg-primary: var(--color-white);
+  --bg-secondary: var(--color-gray-100);
+  --bg-alt: var(--color-gray-200);
+  --border-secondary: var(--color-gray-200);
+  --text-primary: var(--color-black);
+  --text-secondary: var(--color-gray-500);
+}
+
+.dark {
+  --color-team-yellow: #ffd644;
+  --color-yellow-500: #ffd644;
+  --color-team-unknown: var(--color-white);
+  --bg-primary: var(--color-gray-900);
+  --bg-secondary: var(--color-gray-800);
+  --bg-alt: var(--color-gray-700);
+  --border-secondary: var(--color-gray-600);
+  --text-primary: var(--color-white);
+  --text-secondary: var(--color-blueGray-500);
+}
+
+.set-color-team-current-yellow {
+  --color-team-current: var(--color-team-yellow);
+}
+
+.set-color-team-current-red {
+  --color-team-current: var(--color-team-red);
+}
+
+.set-color-team-current-blue {
+  --color-team-current: var(--color-team-blue);
+}
+
+.set-color-team-current-unknown {
+  --color-team-current: var(--color-team-unknown);
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+body {
+  overflow-x: hidden;
+}
+
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-text-fill-color: black !important;
+  -webkit-box-shadow: 0 0 0 999px var(--color-gray-100) inset !important;
+  box-shadow: 0 0 0 999px var(--color-gray-100) inset !important;
+  background-clip: content-box !important;
+}
+
+.dark input:-webkit-autofill,
+.dark input:-webkit-autofill:hover,
+.dark input:-webkit-autofill:focus,
+.dark input:-webkit-autofill:active {
+  -webkit-text-fill-color: white !important;
+  -webkit-box-shadow: 0 0 0 999px var(--color-gray-800) inset !important;
+  box-shadow: 0 0 0 999px var(--color-gray-800) inset !important;
+  background-clip: content-box !important;
+}
+
+input:-webkit-autofill::first-line {
+  font-size: 1.125rem;
+  font-weight: 500;
+  font-family: Matter, ui-sans-serif, system-ui, -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';
+}
+
+/* I kinda feel like this should be the default... 🤷‍♂️ */
+[hidden] {
+  pointer-events: none;
+}
+
+/* These elements get removed before hydration but they can look funny before hydrating */
+dark-mode,
+light-mode {
+  display: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :focus {
+    transition: outline-offset 0.1s ease;
+    outline-offset: 4px;
+  }
+}
+
+a {
+  color: var(--color-team-current);
+}
+
+.underlined {
+  position: relative;
+  text-decoration: none !important;
+  white-space: nowrap;
+}
+
+.underlined:focus {
+  outline: none;
+  text-decoration: none !important;
+}
+
+.underlined:after {
+  content: '';
+  height: 2px;
+  transform: scaleX(0);
+  transition: transform 0.25s ease;
+  transform-origin: left;
+  left: 0;
+  bottom: -4px;
+  width: 100%;
+  display: block;
+  position: absolute;
+}
+
+.underlined:hover:after,
+.underlined:focus:after,
+.active.underlined:after {
+  background-color: currentColor;
+  transform: scaleX(1);
+}
+
+@media (prefers-reduced-motion) {
+  .underlined:after {
+    opacity: 0;
+    transition: opacity 0.25s ease;
+  }
+
+  .underlined:hover:after,
+  .underlined:focus:after,
+  .active.underlined:after {
+    opacity: 1;
+  }
+}
+
+/* transistor embed has rounded edges with white background 😬 */
+.dark iframe[src*='transistor'] {
+  border-radius: 8px;
+}
+
+.yt-lite {
+  border-radius: 0.5rem;
+  max-height: 90vh;
+  max-width: 90vw;
+}
+/* this is for react-lite-youtube-embed */
+/* Annoyingly the background image can be a pixel taller than the video in front of it when the video is playing */
+.lyt-activated {
+  background-image: none !important;
 }

src/styles/globals.scss

@@ -1,8 +1,12 @@
 @import 'colors.scss';
 
+/* purgecss start ignore */
 @tailwind base;
 @tailwind components;
+/* purgecss end ignore */
+
 @tailwind utilities;
+@tailwind screens;
 
 html,
 body {
@@ -20,3 +24,49 @@ a {
 * {
   box-sizing: border-box;
 }
+
+@layer utilities {
+  .focus-ring {
+    @apply focus:outline-none focus-within:outline-none transition duration-300 disabled:ring-0 hover:ring-2 focus:ring-2 focus-within:ring-2 group-hover:ring-2 group-focus:ring-2 hover:ring-team-current focus:ring-team-current focus-within:ring-team-current group-hover:ring-team-current group-focus:ring-team-current ring-team-current ring-offset-4 dark:ring-offset-gray-900 ring-offset-white;
+  }
+
+  .focus-ring.danger {
+    @apply dark:focus:ring-red-500 dark:hover:ring-red-500 dark:focus-within:ring-red-500 dark:group-hover:ring-red-500 group-focus:dark:ring-red-500 focus:ring-red-500 hover:ring-red-500 focus-within:ring-red-500 group-hover:ring-red-500 group-focus:ring-red-500 ring-red-500;
+  }
+
+  .bg-primary {
+    @apply dark:bg-gray-900 bg-white;
+  }
+
+  .bg-secondary {
+    @apply bg-gray-100 dark:bg-gray-800;
+  }
+
+  .bg-alt {
+    @apply bg-gray-200 dark:bg-gray-700;
+  }
+
+  .bg-inverse {
+    @apply bg-black dark:bg-white;
+  }
+
+  .border-primary {
+    @apply border-gray-900 dark:border-white;
+  }
+
+  .border-secondary {
+    @apply border-gray-200 dark:border-gray-600;
+  }
+
+  .text-primary {
+    @apply text-black dark:text-white;
+  }
+
+  .text-secondary {
+    @apply dark:text-blueGray-500 text-gray-500;
+  }
+
+  .text-inverse {
+    @apply dark:text-black text-white;
+  }
+}