create-magic-storefront 0.4.0 → 0.6.0

package/template/app/styles/base.css

@@ -0,0 +1,138 @@
+/* Elements without classes: type, links, form controls, focus. */
+@layer base {
+  html {
+    scroll-padding-top: calc(var(--header-h) + var(--space-4));
+  }
+  body {
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    background: var(--bg);
+    color: var(--fg);
+    -webkit-font-smoothing: antialiased;
+  }
+  html[data-telegram] body {
+    /* Telegram's stable viewport (the sheet can be dragged), the dynamic viewport outside it. */
+    min-height: var(--tg-viewport-stable-height, 100dvh);
+    padding-left: max(env(safe-area-inset-left), var(--tg-safe-area-inset-left, 0px));
+    padding-right: max(env(safe-area-inset-right), var(--tg-safe-area-inset-right, 0px));
+    padding-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-heading);
+    font-weight: var(--weight-heading);
+    line-height: var(--leading-tight);
+    letter-spacing: -0.01em;
+    text-wrap: balance;
+  }
+  h1 {
+    font-size: var(--text-3xl);
+  }
+  h2 {
+    font-size: var(--text-2xl);
+  }
+  h3 {
+    font-size: var(--text-lg);
+    line-height: var(--leading-snug);
+  }
+  p {
+    text-wrap: pretty;
+  }
+  a {
+    color: inherit;
+    text-underline-offset: 0.2em;
+    text-decoration-thickness: 1px;
+  }
+  s {
+    text-decoration-thickness: 1px;
+  }
+  hr {
+    border: 0;
+    border-top: 1px solid var(--line);
+    margin: var(--space-5) 0;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--fg);
+    outline-offset: 2px;
+  }
+
+  /* Bare controls get a calm default; .button and the form components refine them. */
+  button {
+    min-height: 44px;
+    padding: 0 var(--space-4);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-sm);
+    background: var(--surface);
+    color: var(--fg);
+    transition:
+      background-color var(--duration-fast) var(--ease),
+      border-color var(--duration-fast) var(--ease);
+  }
+  button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  button[aria-pressed='true'] {
+    border-color: var(--fg);
+    box-shadow: inset 0 0 0 1px var(--fg);
+  }
+  input:not([type='checkbox'], [type='radio'], [type='range']),
+  select,
+  textarea {
+    width: 100%;
+    min-height: 44px;
+    padding: var(--space-2) var(--space-3);
+    /* 16px at least: smaller makes iOS zoom into the field. */
+    font-size: max(var(--text-base), 16px);
+    background: var(--surface);
+    color: var(--fg);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-sm);
+  }
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible {
+    outline: 2px solid var(--fg);
+    outline-offset: 0;
+    border-color: var(--fg);
+  }
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--muted);
+  }
+  input[type='checkbox'],
+  input[type='radio'] {
+    width: 1.125rem;
+    height: 1.125rem;
+    margin: 0;
+    accent-color: var(--fg);
+  }
+  label {
+    cursor: pointer;
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  td,
+  th {
+    padding: var(--space-3) var(--space-2);
+    border-bottom: 1px solid var(--line);
+    text-align: start;
+    vertical-align: middle;
+  }
+  blockquote {
+    margin: 0;
+  }
+  progress {
+    width: 100%;
+    accent-color: var(--accent);
+  }
+}