From f7bf34afb5fd19bad7348adbb0aeb31bf9b0f468 Mon Sep 17 00:00:00 2001
From: Corban Riley <corbanbrook@gmail.com>
Date: Mon, 6 May 2024 12:54:30 -0400
Subject: [PATCH] Adding reset class helper for projects to use on root

---
 src/css/index.ts     |  2 ++
 src/css/reset.css.ts | 61 ++++++++++++++++++++++++++++++++++++++++++++
 src/index.ts         |  9 ++++++-
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 src/css/reset.css.ts

diff --git a/src/css/index.ts b/src/css/index.ts
index 332d12b2c..7c8573d93 100644
--- a/src/css/index.ts
+++ b/src/css/index.ts
@@ -4,6 +4,8 @@ export type { Breakpoint } from './breakpoints'
 export { vars } from './vars.css'
 export type { ThemeVars } from './vars.css'
 
+export { reset } from './reset.css'
+
 export { atoms } from './atoms'
 export type { Atoms } from './atoms'
 
diff --git a/src/css/reset.css.ts b/src/css/reset.css.ts
new file mode 100644
index 000000000..a39a98ec4
--- /dev/null
+++ b/src/css/reset.css.ts
@@ -0,0 +1,61 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+
+import { vars } from './vars.css'
+
+export const reset = style({
+  textDecoration: 'unset',
+})
+
+globalStyle(`${reset}, ${reset} *`, {
+  fontFamily: vars.fonts.body,
+  fontStretch: 'unset',
+  fontStyle: 'unset',
+  fontVariant: 'unset',
+  fontWeight: 'unset',
+  background: 'unset',
+  border: 'unset',
+  color: 'unset',
+  listStyleType: 'none',
+  outline: 'unset',
+  textDecoration: 'unset',
+  margin: 0,
+  padding: 0,
+})
+
+// Border box sizing
+globalStyle(
+  `${reset}, ${reset}::before, ${reset}::after, ${reset} *, ${reset} *::before, ${reset} *::after`,
+  {
+    boxSizing: 'border-box',
+  }
+)
+
+// Disable focus outline
+globalStyle(`${reset} *:focus, ${reset} *:focus-visible`, {
+  outline: 'none',
+})
+
+// Custom Focus Ring
+globalStyle(`${reset} *:focus-visible`, {
+  outline: 'none',
+
+  // Safari does not apply a border radius to outlines so we will use a boxShadow instead to acheive that same inset effect
+  boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`,
+
+  // Because we use a semi transparent focus ring we want to set any border color to transparent so it doesnt show through
+  borderColor: 'transparent',
+})
+
+// Custom scrollbars
+globalStyle(`html:not(.is-apple) ${reset} *::-webkit-scrollbar`, {
+  appearance: 'none',
+  width: '13px',
+  background: 'rgba(0, 0, 0, 0)',
+})
+
+globalStyle(`html:not(.is-apple) ${reset} *::-webkit-scrollbar-thumb`, {
+  background: vars.colors.text50,
+  border: '3px solid transparent',
+  backgroundClip: 'content-box',
+  borderRadius: '7px',
+})
diff --git a/src/index.ts b/src/index.ts
index 94411eeb7..4d50651b4 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,12 @@
 export { tokens } from '~/tokens'
-export { vars, atoms, breakpoints, responsiveStyle, selectorize } from '~/css'
+export {
+  vars,
+  atoms,
+  breakpoints,
+  reset,
+  responsiveStyle,
+  selectorize,
+} from '~/css'
 export type { Atoms, Breakpoint, ThemeVars } from '~/css'
 
 export * from '~/components'