retail-design-system 1.0.0

package/apps/web/styles/tailwind-reset.css

@@ -0,0 +1,102 @@
+/* ====================================================== /
+    Natt Nguyen's CSS Reset
+    Last updated: 2025.01.26
+
+    The goal of a reset stylesheet is to reduce browser
+    inconsistencies, improve the user experience, and
+    improve the CSS authoring experience. Assumes
+    the use of Tailwind CSS Preflight.
+
+    Reference:
+    - https://www.joshwcomeau.com/css/custom-css-reset
+    - https://piccalil.li/blog/a-more-modern-css-reset/
+// ===================================================== */
+
+/*
+    Adapt to color schemes (scrollbar color)
+*/
+:root {
+  color-scheme: light dark;
+}
+
+/*
+    Typographic tweaks
+    - Improve text rendering
+    - Add accessible line height
+*/
+body {
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.5;
+  isolation: isolate;
+}
+
+/*
+    (Mobile) Disables additional non-standard gestures such as double-tap to zoom
+*/
+html {
+  touch-action: manipulation;
+}
+
+/*
+    (Mobile) Disable automatic text size increase
+*/
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/*
+    (Safari mobile) Disable tap highlight
+*/
+body {
+  /* Disables tap highlight */
+  -webkit-tap-highlight-color: transparent;
+}
+
+/*
+    (Safari mobile) Remove top inner shadow
+*/
+input,
+textarea {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+/*
+    Remove input arrows
+    Chrome, Safari, Edge, Opera
+*/
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+/*
+    Remove input number arrows
+*/
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+/*
+    Respecting motion preferences
+    Reference: https://web.dev/articles/prefers-reduced-motion#bonus_forcing_reduced_motion_on_all_websites
+*/
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-delay: -1ms !important;
+    transition-duration: 1ms !important;
+  }
+}

package/apps/web/styles/tailwind.css

@@ -0,0 +1,140 @@
+/* Order matters */
+@import "tailwindcss";
+@import "@nattui/tailwind-exact";
+@import "@pump-fun/retail-design-system/tailwind-v4/colors.css";
+@import "@pump-fun/retail-design-system/retail-design-system.css";
+
+@layer base {
+  .d {
+    border: 1px dashed red;
+  }
+
+  html {
+    min-height: 100%;
+    font-size: 10px;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    font-family: var(--font-sans);
+    font-size: 16px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.5;
+    color: var(--color-text-secondary);
+    background-color: var(--color-bg-primary);
+  }
+
+  h1 {
+    font-size: 5.6rem;
+  }
+
+  h2 {
+    font-size: 3.6rem;
+  }
+
+  h3 {
+    font-size: 3rem;
+  }
+
+  h4 {
+    font-size: 2rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-display);
+    font-weight: 500;
+    font-feature-settings: "ss04";
+    color: var(--color-text-primary);
+  }
+
+  p {
+    font-size: 1.6rem;
+    hyphens: auto;
+    word-break: break-word;
+  }
+
+  button {
+    font-weight: 500;
+    outline-width: 0;
+    outline-style: solid;
+    outline-color: var(--color-bg-accent);
+    outline-offset: 2px;
+
+    &:focus-visible {
+      outline-width: 2px;
+    }
+  }
+
+  b,
+  strong {
+    font-weight: 500;
+  }
+
+  a {
+    font-family: var(--font-sans);
+    outline-width: 0;
+    outline-style: solid;
+    outline-color: var(--color-bg-accent);
+    outline-offset: 2px;
+
+    &:focus-visible {
+      outline-width: 2px;
+    }
+  }
+
+  code {
+    font-family: var(--font-mono);
+  }
+
+  /*
+    Enhance heading quality and legibility
+  */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+  }
+
+  /*
+    Avoid a short single word on the last line
+  */
+  p {
+    text-wrap: pretty;
+  }
+
+  /*
+    Avoid text overflows
+  */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    overflow-wrap: break-word;
+  }
+}
+
+:root {
+  --sh-class: white;
+  --sh-comment: #5e6a6a;
+  --sh-entity: #8aebf3;
+  --sh-identifier: #c37ba3;
+  --sh-jsxliterals: white;
+  --sh-keyword: #0b8f98;
+  --sh-property: #15ccdc;
+  --sh-sign: white;
+  --sh-string: #69d9e0;
+}

package/apps/web/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "esModuleInterop": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2017"
+  },
+  "exclude": ["node_modules"],
+  "include": [
+    "**/*.mts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/dev/types/**/*.ts",
+    ".next/types/**/*.ts",
+    "next-env.d.ts"
+  ]
+}