Update global css

See #81
commitd · May 14, 2021 · b6cc121 · b6cc121
1 parent 46c46e9
commit b6cc121
Showing 1 changed file with 36 additions and 21 deletions.
diff --git a/src/utils/stitches.config.ts b/src/utils/stitches.config.ts
@@ -84,6 +84,7 @@ const stitches = createCss({
 
       background: '#f7f7f7',
       paper: '$white',
+      selection: '#ffbb00aa',
       text: '#3b3b3b',
       primary: '$grey500',
       primaryHighlight: '$grey700',
@@ -414,38 +415,52 @@ export const darkTheme = theme('dark-theme', {
 })
 
 export const globalStyles = globalCss({
+  'html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video': {
+    margin: '0',
+    padding: '0',
+    border: '0',
+    fontSize: '100%',
+    font: 'inherit',
+    verticalAlign: 'baseline',
+  },
+  'article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, svg': {
+    display: 'block',
+  },
+  '*[hidden]': {
+    display: 'none',
+  },
+  body: {
+    lineHeight: '1',
+  },
+  'ol, ul': {
+    listStyle: 'none',
+  },
+  'blockquote, q': {
+    quotes: 'none',
+  },
+  'blockquote:before, blockquote:after, q:before, q:after': {
+    content: '',
+  },
+  table: {
+    borderSpacing: '0',
+  },
   '@global': {
     textSizeAdjust: '100%',
     textRendering: 'optimizeLegibility',
   },
   html: {
     overflowX: 'hidden',
   },
-  body: {
-    margin: 0,
+
+  '*, *::before, *::after': {
+    boxSizing: 'border-box',
   },
-  '*': { margin: 0, padding: 0 },
-  svg: { display: 'block' },
 
   'pre, code': { margin: 0, fontFamily: '$monospace' },
   'body, button': {
     fontFamily: '$text',
   },
+  '::selection': {
+    backgroundColor: '$selection',
+  },
 })
-// TODO:
-//   {
-//   '@global': {
-//     'button, input, optgroup, select, textarea': {
-//       fontFamily: 'inherit',
-//       fontSize: 'inherit',
-//     },
-//   },
-
-//   //'body, button': {
-//   // fontFamily: '$untitled',
-//   //},
-
-//   // '::selection': {
-//   //   backgroundColor: '$violet300',
-//   // },
-// })