@graphcommerce/docs 3.1.4 → 4.0.0

package/components/prism.css

@@ -1,274 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,410 +0,0 @@
-/// <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)