@graphcommerce/docs 3.1.4

package/components/prism.css

@@ -0,0 +1,274 @@
+pre[class*='language-'],
+code[class*='language-'] {
+  color: #d4d4d4;
+  /* font-size: 13px; */
+  text-shadow: none;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*='language-']::selection,
+code[class*='language-']::selection,
+pre[class*='language-'] *::selection,
+code[class*='language-'] *::selection {
+  text-shadow: none;
+  background: #264f78;
+}
+
+@media print {
+  pre[class*='language-'],
+  code[class*='language-'] {
+    text-shadow: none;
+  }
+}
+
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  background: #1e1e1e;
+}
+
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em 0.3em;
+  border-radius: 0.3em;
+  color: #db4c69;
+  background: #1e1e1e;
+}
+/*********************************************************
+* Tokens
+*/
+.namespace {
+  opacity: 0.7;
+}
+
+.token.doctype .token.doctype-tag {
+  color: #569cd6;
+}
+
+.token.doctype .token.name {
+  color: #9cdcfe;
+}
+
+.token.comment,
+.token.prolog {
+  color: #6a9955;
+}
+
+.token.punctuation,
+.language-html .language-css .token.punctuation,
+.language-html .language-javascript .token.punctuation {
+  color: #d4d4d4;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit {
+  color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted {
+  color: #ce9178;
+}
+
+.language-css .token.string.url {
+  text-decoration: underline;
+}
+
+.token.operator,
+.token.entity {
+  color: #d4d4d4;
+}
+
+.token.operator.arrow {
+  color: #569cd6;
+}
+
+.token.atrule {
+  color: #ce9178;
+}
+
+.token.atrule .token.rule {
+  color: #c586c0;
+}
+
+.token.atrule .token.url {
+  color: #9cdcfe;
+}
+
+.token.atrule .token.url .token.function {
+  color: #dcdcaa;
+}
+
+.token.atrule .token.url .token.punctuation {
+  color: #d4d4d4;
+}
+
+.token.keyword {
+  color: #569cd6;
+}
+
+.token.keyword.module,
+.token.keyword.control-flow {
+  color: #c586c0;
+}
+
+.token.function,
+.token.function .token.maybe-class-name {
+  color: #dcdcaa;
+}
+
+.token.regex {
+  color: #d16969;
+}
+
+.token.important {
+  color: #569cd6;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.constant {
+  color: #9cdcfe;
+}
+
+.token.class-name,
+.token.maybe-class-name {
+  color: #4ec9b0;
+}
+
+.token.console {
+  color: #9cdcfe;
+}
+
+.token.parameter {
+  color: #9cdcfe;
+}
+
+.token.interpolation {
+  color: #9cdcfe;
+}
+
+.token.punctuation.interpolation-punctuation {
+  color: #569cd6;
+}
+
+.token.boolean {
+  color: #569cd6;
+}
+
+.token.property,
+.token.variable,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name {
+  color: #9cdcfe;
+}
+
+.token.selector {
+  color: #d7ba7d;
+}
+
+.token.escape {
+  color: #d7ba7d;
+}
+
+.token.tag {
+  color: #569cd6;
+}
+
+.token.tag .token.punctuation {
+  color: #808080;
+}
+
+.token.cdata {
+  color: #808080;
+}
+
+.token.attr-name {
+  color: #9cdcfe;
+}
+
+.token.attr-value,
+.token.attr-value .token.punctuation {
+  color: #ce9178;
+}
+
+.token.attr-value .token.punctuation.attr-equals {
+  color: #d4d4d4;
+}
+
+.token.entity {
+  color: #569cd6;
+}
+
+.token.namespace {
+  color: #4ec9b0;
+}
+/*********************************************************
+* Language Specific
+*/
+
+pre[class*='language-javascript'],
+code[class*='language-javascript'],
+pre[class*='language-jsx'],
+code[class*='language-jsx'],
+pre[class*='language-typescript'],
+code[class*='language-typescript'],
+pre[class*='language-tsx'],
+code[class*='language-tsx'] {
+  color: #9cdcfe;
+}
+
+pre[class*='language-css'],
+code[class*='language-css'] {
+  color: #ce9178;
+}
+
+pre[class*='language-html'],
+code[class*='language-html'] {
+  color: #d4d4d4;
+}
+
+.language-regex .token.anchor {
+  color: #dcdcaa;
+}
+
+.language-html .token.punctuation {
+  color: #808080;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[class*='language-'] > code[class*='language-'] {
+  position: relative;
+  z-index: 1;
+}
+
+.line-highlight.line-highlight {
+  background: #f7ebc6;
+  box-shadow: inset 5px 0 0 #f7d87c;
+  z-index: 0;
+}

package/components/rehype-prism-plus.css

@@ -0,0 +1,49 @@
+pre {
+  overflow-x: auto;
+}
+
+/**
+ * Inspired by gatsby remark prism - https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/
+ * 1. Make the element just wide enough to fit its content.
+ * 2. Always fill the visible space in .code-highlight.
+ */
+.code-highlight {
+  float: left; /* 1 */
+  min-width: 100%; /* 2 */
+}
+
+.code-line {
+  display: block;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: -16px;
+  margin-right: -16px;
+  border-left-width: 4px;
+  border-left-color: rgba(31, 41, 55, 0); /* Set code block color */
+}
+
+.code-line.inserted {
+  background-color: rgba(16, 185, 129, 0.2); /* Set inserted line (+) color */
+}
+
+.code-line.deleted {
+  background-color: rgba(239, 68, 68, 0.2); /* Set deleted line (-) color */
+}
+
+.highlight-line {
+  margin-left: -16px;
+  margin-right: -16px;
+  background-color: rgba(55, 65, 81, 0.5); /* Set highlight bg color */
+  border-left-width: 4px;
+  border-left-color: rgb(59, 130, 246); /* Set highlight accent border color */
+}
+
+.line-number::before {
+  display: inline-block;
+  width: 1rem;
+  text-align: right;
+  margin-right: 16px;
+  margin-left: -8px;
+  color: rgb(156, 163, 175); /* Line number color */
+  content: attr(line);
+}

package/components/theme.ts

@@ -0,0 +1,410 @@
+/// <reference types="@graphcommerce/next-ui/types" />
+
+import {
+  responsiveVal,
+  breakpointVal,
+  MuiButtonPill,
+  MuiButtonResponsive,
+  themeBaseDefaults,
+  MuiSnackbar,
+  MuiFabSizes,
+} from '@graphcommerce/next-ui'
+import { createTheme, Theme, alpha, darken, lighten } from '@mui/material'
+import { Components, PaletteOptions } from '@mui/material/styles'
+
+const main = '#85FFFD'
+const dark = '#CEFF99'
+
+const lightPalette: PaletteOptions = {
+  mode: 'light',
+  primary: {
+    main: darken(main, 0.175),
+    contrastText: '#FFFFFF',
+    dark: darken(dark, 0.175),
+  },
+  secondary: {
+    main: '#006BFF',
+    light: '#D1E4FF',
+    contrastText: '#ffffff',
+  },
+  background: {
+    default: '#ffffff',
+    paper: '#ffffff',
+    image: '#ffffff',
+  },
+  divider: '#00000015',
+  success: {
+    main: '#01D26A',
+  },
+  action: {
+    hoverOpacity: 0.16,
+  },
+  text: {
+    primary: '#000000',
+    secondary: 'hsl(229, 16%, 71%)',
+    disabled: '#00000030',
+  },
+}
+
+const darkPalette: PaletteOptions = {
+  mode: 'dark',
+  primary: {
+    main,
+    contrastText: '#ffffff',
+    dark,
+  },
+  secondary: {
+    main: '#62C7B0',
+    light: '#62C7B0',
+    contrastText: '#ffffff',
+  },
+  background: {
+    default: '#001727',
+    paper: lighten('#001727', 0.03),
+    image: '#F8F8F8',
+  },
+  divider: '#ffffff30',
+  success: {
+    main: '#01D26A',
+  },
+  action: {
+    hoverOpacity: 0.16,
+  },
+  text: {
+    primary: '#ffffff',
+    secondary: '#ffffff80',
+    disabled: '#ffffff30',
+  },
+}
+
+const fontSize = (from: number, to: number) =>
+  breakpointVal('fontSize', from, to, themeBaseDefaults.breakpoints.values)
+
+// Create a theme instance.
+const createThemeWithPalette = (palette: PaletteOptions) =>
+  createTheme({
+    palette,
+    ...themeBaseDefaults,
+    shape: { borderRadius: 4 },
+    typography: {
+      fontFamily:
+        '-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji',
+      // @see docs typography.md
+      h1: {
+        ...fontSize(36, 44),
+        fontWeight: 550,
+        lineHeight: 1.22,
+        fontVariationSettings: palette.mode === 'dark' ? "'wght' 550" : "'wght' 610",
+      },
+      h2: {
+        ...fontSize(24, 32),
+        fontWeight: 530,
+        lineHeight: 1.6,
+        fontVariationSettings: palette.mode === 'dark' ? "'wght' 480" : "'wght' 590",
+      },
+      h3: {
+        ...fontSize(18, 22),
+        fontWeight: 500,
+        lineHeight: 1.55,
+        fontVariationSettings: palette.mode === 'dark' ? "'wght' 500" : "'wght' 560",
+      },
+      h4: {
+        ...fontSize(18, 23),
+        fontWeight: 600,
+        lineHeight: 1.6,
+        fontVariationSettings: "'wght' 600",
+      },
+      h5: {
+        ...fontSize(18, 21),
+        fontWeight: 480,
+        lineHeight: 1.6,
+        fontVariationSettings: "'wght' 510",
+      },
+      h6: {
+        ...fontSize(16, 19),
+        fontWeight: 460,
+        lineHeight: 1.8,
+        fontVariationSettings: "'wght' 460",
+      },
+      subtitle1: {
+        ...fontSize(16, 19),
+        fontWeight: 450,
+        fontVariationSettings: "'wght' 460",
+        lineHeight: 1.7,
+      },
+      fontWeightBold: 600,
+      body1: {
+        ...fontSize(15, 18),
+        fontWeight: 370,
+        fontVariationSettings: palette.mode === 'dark' ? "'wght' 450" : "'wght' 370",
+        lineHeight: 1.7,
+      },
+      subtitle2: {
+        ...fontSize(14, 16),
+        fontWeight: 500,
+        fontVariationSettings: "'wght' 450",
+        lineHeight: 1.7,
+      },
+      body2: {
+        ...fontSize(13, 15),
+        lineHeight: 1.7,
+      },
+      caption: {
+        // https://web.dev/font-size/#how-the-lighthouse-font-size-audit-fails
+        ...fontSize(12, 13),
+      },
+      button: {},
+      overline: {
+        // https://web.dev/font-size/#how-the-lighthouse-font-size-audit-fails
+        ...fontSize(12, 14),
+        fontWeight: 500,
+        letterSpacing: 1,
+        lineHeight: 1.2,
+        textTransform: 'uppercase',
+      },
+    },
+    spacings: {
+      xxs: responsiveVal(10, 16),
+      xs: responsiveVal(12, 20),
+      sm: responsiveVal(14, 30),
+      md: responsiveVal(16, 50),
+      lg: responsiveVal(24, 80),
+      xl: responsiveVal(40, 100),
+      xxl: responsiveVal(80, 160),
+    },
+    page: {
+      horizontal: responsiveVal(10, 30),
+      vertical: responsiveVal(10, 30),
+    },
+    appShell: {
+      headerHeightSm: '46px',
+      headerHeightMd: '80px',
+      appBarHeightMd: '80px',
+      appBarInnerHeightMd: '46px',
+    },
+  })
+
+// todo: move most of the styles to the graphcommerce library while still allowing for extensibility.
+const createOverrides = (theme: Theme): Components => ({
+  MuiCssBaseline: {
+    styleOverrides: {
+      body: {
+        overflowY: 'scroll',
+      },
+      '::selection': { background: alpha(theme.palette.primary.main, 0.6) },
+      '::-moz-selection': { background: alpha(theme.palette.primary.main, 0.6) },
+      '#__next': {
+        position: 'relative',
+      },
+      img: {
+        filter: 'brightness(1.03)',
+        willChange: 'filter',
+      },
+    },
+  },
+
+  MuiContainer: {
+    variants: [
+      {
+        props: { disableGutters: false },
+        style: {
+          paddingLeft: theme.page.horizontal,
+          paddingRight: theme.page.horizontal,
+          [theme.breakpoints.up('sm')]: {
+            paddingLeft: theme.page.horizontal,
+            paddingRight: theme.page.horizontal,
+          },
+        },
+      },
+    ],
+  },
+
+  MuiInputBase: {
+    styleOverrides: {
+      root: {
+        fontSize: '16px', // https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
+      },
+    },
+  },
+
+  MuiButton: {
+    defaultProps: { color: 'inherit' },
+    variants: [
+      ...MuiButtonResponsive,
+      ...MuiButtonPill,
+      {
+        props: { variant: 'contained', color: 'inherit' },
+        style: { backgroundColor: theme.palette.background.paper },
+      },
+      {
+        props: { variant: 'outlined' },
+        style: {
+          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+        },
+      },
+      {
+        props: { variant: 'text' },
+        style: { borderRadius: '99em' },
+      },
+    ],
+  },
+
+  MuiFab: {
+    styleOverrides: {
+      root: {
+        backgroundColor: theme.palette.background.paper,
+        '&:hover': {
+          backgroundColor: theme.palette.background.paper,
+        },
+        color: theme.palette.text.primary,
+      },
+      colorInherit: {
+        backgroundColor: 'inherit',
+        '&:hover, &:focus': {
+          backgroundColor: 'inherit',
+        },
+        boxShadow: 'none',
+      },
+      primary: {
+        color: theme.palette.text.primary,
+      },
+      secondary: {
+        color: theme.palette.text.primary,
+      },
+      extended: {
+        fontWeight: 400,
+        textTransform: 'none',
+      },
+    },
+    variants: [...MuiFabSizes],
+  },
+
+  MuiTextField: {
+    styleOverrides: {
+      root: {
+        '& label.Mui-focused': {
+          color: theme.palette.secondary.main,
+        },
+        '& .MuiOutlinedInput-root': {
+          borderRadius: responsiveVal(theme.shape.borderRadius * 1.5, theme.shape.borderRadius * 2),
+          '& fieldset': {
+            borderColor: theme.palette.divider,
+          },
+          '&.Mui-focused fieldset': {
+            borderColor: theme.palette.divider,
+            borderWidth: 1,
+          },
+        },
+      },
+    },
+  },
+
+  MuiListItemIcon: {
+    styleOverrides: {
+      root: {
+        color: theme.palette.text.primary,
+      },
+    },
+  },
+
+  MuiChip: {
+    styleOverrides: {
+      root: {
+        boxShadow: 'unset !important',
+        borderRadius: '99em',
+        height: responsiveVal(32, 40),
+        paddingLeft: responsiveVal(4, 8),
+        paddingRight: responsiveVal(4, 8),
+        ...theme.typography.body2,
+      },
+      sizeSmall: {
+        height: responsiveVal(26, 30),
+        paddingLeft: responsiveVal(3, 6),
+        paddingRight: responsiveVal(3, 6),
+        ...theme.typography.caption,
+      },
+      outlined: {
+        borderColor: theme.palette.divider,
+      },
+      label: {
+        paddingLeft: responsiveVal(6, 10),
+        paddingRight: responsiveVal(6, 10),
+      },
+      labelSmall: {
+        paddingLeft: responsiveVal(6, 8),
+        paddingRight: responsiveVal(6, 8),
+      },
+      deleteIcon: {
+        color: theme.palette.text.primary,
+        // display: 'flex',
+      },
+      deleteIconOutlinedColorPrimary: {
+        // color: theme.palette.primary.main,
+      },
+    },
+  },
+
+  MuiCheckbox: {
+    styleOverrides: {
+      colorPrimary: {
+        color: theme.palette.text.disabled,
+        '&.Mui-checked': {
+          color: theme.palette.primary.main,
+        },
+      },
+      colorSecondary: {
+        color: theme.palette.text.disabled,
+        '&.Mui-checked': {
+          color: theme.palette.secondary.main,
+        },
+      },
+    },
+  },
+
+  MuiSwitch: {
+    styleOverrides: {
+      track: {
+        '.Mui-colorPrimary + &': {
+          backgroundColor: theme.palette.primary,
+          borderRadius: '30px',
+        },
+        '.Mui-checked.Mui-colorPrimary + &': {
+          opacity: 1,
+          backgroundColor: theme.palette.primary,
+          borderRadius: '30px',
+        },
+      },
+      thumb: {
+        backgroundColor: '#fff',
+      },
+    },
+  },
+
+  MuiSnackbar: { variants: MuiSnackbar },
+
+  MuiAvatar: {
+    styleOverrides: {
+      colorDefault: {
+        backgroundColor: theme.palette.text.disabled,
+      },
+    },
+  },
+
+  MuiSlider: {
+    styleOverrides: {
+      rail: {
+        color: theme.palette.text.disabled,
+      },
+      thumb: {
+        background: theme.palette.background.default,
+        boxShadow: theme.shadows[6],
+      },
+    },
+  },
+})
+
+export const lightTheme = createThemeWithPalette(lightPalette)
+lightTheme.components = createOverrides(lightTheme)
+
+export const darkTheme = createThemeWithPalette(darkPalette)
+darkTheme.components = createOverrides(darkTheme)