@37signals/lexxy 0.1.22-beta → 0.1.23-beta

package/dist/stylesheets/lexxy-content.css

@@ -0,0 +1,400 @@
+@import url("lexxy-variables.css");
+
+/* Text styles
+/* -------------------------------------------------------------------------- */
+
+:where(.lexxy-content) {
+  color: var(--lexxy-color-ink);
+
+  h1, h2, h3, h4, h5, h6 {
+    display: block;
+    font-weight: bold;
+    hyphens: auto;
+    margin-block: 0 var(--lexxy-content-margin);
+    overflow-wrap: break-word;
+    text-wrap: balance;
+  }
+
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.5rem; }
+  h3 { font-size: 1.25rem; }
+  h4 { font-size: 1rem; }
+  h5 { font-size: 0.875rem; }
+  h6 { font-size: 0.75rem; }
+
+  p,
+  ul,
+  ol,
+  dl,
+  blockquote,
+  figure,
+  .attachment {
+    margin-block: 0 var(--lexxy-content-margin);
+
+    &:not(lexxy-editor &) {
+      overflow-wrap: break-word;
+      text-wrap: pretty;
+    }
+  }
+
+  .lexxy-content__italic {
+    font-style: italic;
+  }
+
+  .lexxy-content__bold {
+    font-weight: bold;
+  }
+
+  .lexxy-content__strikethrough {
+    text-decoration: line-through;
+  }
+
+  .lexxy-content__underline {
+    text-decoration: underline;
+  }
+
+  mark,
+  .lexxy-content__highlight {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  blockquote {
+    border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
+    font-style: italic;
+    margin: var(--lexxy-content-margin) 0;
+    padding: 0.5lh 2ch;
+  }
+
+  p:empty {
+    display: none;
+  }
+
+  a {
+    color: var(--lexxy-color-link);
+  }
+
+  img,
+  video,
+  embed,
+  object {
+    inline-size: auto;
+    margin-inline: auto;
+    max-block-size: 32rem;
+    object-fit: contain;
+
+    a:has(&) {
+      display: inline-block;
+    }
+  }
+
+  code, pre {
+    background-color: var(--lexxy-color-ink-lightest);
+    border-radius: var(--lexxy-radius);
+    color: var(--lexxy-color-ink);
+    font-family: var(--lexxy-font-mono);
+    font-size: 0.9em;
+    padding: 0.25ch 0.5ch;
+
+    &:is(pre),
+    &[data-language] {
+      border-radius: var(--lexxy-radius);
+      display: block;
+      hyphens: none;
+      margin-block: 0 var(--lexxy-content-margin);
+      overflow-x: auto;
+      padding: 1ch;
+      tab-size: 2;
+      text-wrap: nowrap;
+      white-space: pre;
+      word-break: break-word;
+    }
+  }
+
+  li.lexxy-nested-listitem {
+    list-style-type: none;
+
+    ol, ul {
+      margin: 0;
+    }
+  }
+
+  > :last-child {
+    margin-block-end: 0;
+  }
+
+  /* Keywords and attributes */
+  .code-token__attr,
+  .token.atrule,
+  .token.attr,
+  .token.keyword {
+    color: var(--lexxy-color-code-token-att);
+  }
+
+  /* Constants, booleans, numbers, properties, tags */
+  .code-token__property,
+  .token.boolean,
+  .token.constant,
+  .token.number,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: var(--lexxy-color-code-token-property);
+  }
+
+  /* Strings, selectors, and built-in constructs */
+  .code-token__selector,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.line,
+  .token.selector,
+  .token.string {
+    color: var(--lexxy-color-code-token-selector);
+  }
+
+  /* Comments and meta information */
+  .code-token__comment,
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: var(--lexxy-color-code-token-comment);
+    font-style: italic;
+  }
+
+  /* Operators and symbolic entities */
+  .code-token__operator,
+  .token.deleted,
+  .token.entity,
+  .token.operator,
+  .token.url,
+  code[data-language="diff"] .code-token__operator + .code-token__selector {
+    color: var(--lexxy-color-code-token-operator);
+  }
+
+  /* Functions and class names */
+  .code-token__function,
+  .token.class,
+  .token.class-name,
+  .token.function {
+    color: var(--lexxy-color-code-token-function);
+  }
+
+  /* Variables, regex, namespaces, important */
+  .code-token__variable,
+  .token.important,
+  .token.namespace,
+  .token.regex,
+  .token.variable {
+    color: var(--lexxy-color-code-token-variable);
+  }
+
+  /* Punctuation */
+  .code-token__punctuation,
+  .token.punctuation {
+    color: var(--lexxy-color-code-token-punctuation);
+  }
+}
+
+:where([data-lexical-cursor]) {
+  animation: blink 1s step-end infinite;
+  block-size: 1lh;
+  border-inline-start: 1px solid currentColor;
+  line-height: inherit;
+  margin-block: 1em;
+}
+
+/* Attachments
+/* ------------------------------------------------------------------------ */
+
+:where(.attachment) {
+  block-size: auto;
+  display: block;
+  inline-size: fit-content;
+  position: relative;
+  margin-inline: auto;
+  max-inline-size: 100%;
+  text-align: center;
+
+  :where(progress) {
+    inline-size: 100%;
+    margin: auto;
+  }
+}
+
+:where(.attachment__caption) {
+  color: var(--lexxy-color-text-subtle);
+  font-size: var(--lexxy-text-small);
+
+  textarea {
+    background: var(--lexxy-color-canvas);
+    border: none;
+    color: inherit;
+    font-family: inherit;
+    inline-size: 100%;
+    max-inline-size: 100%;
+    resize: none;
+    text-align: center;
+
+    &:focus {
+      outline: none;
+    }
+
+    @supports (field-sizing: content) {
+      field-sizing: content;
+      inline-size: auto;
+      min-inline-size: 20ch;
+    }
+  }
+}
+
+:where(.attachment__icon) {
+  aspect-ratio: 4/5;
+  background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
+  block-size: 3lh;
+  border: 2px solid var(--lexxy-attachment-icon-color);
+  border-block-start-width: 1ch;
+  border-radius: var(--lexxy-radius);
+  box-sizing: border-box;
+  color: var(--lexxy-attachment-icon-color);
+  display: grid;
+  font-size: var(--lexxy-text-small);
+  font-weight: bold;
+  inline-size: auto;
+  place-content: center;
+  text-transform: uppercase;
+}
+
+:where(.attachment--preview) {
+  border-radius: var(--lexxy-radius);
+
+  img, video {
+    block-size: auto;
+    display: block;
+    margin-inline: auto;
+    max-inline-size: 100%;
+    user-select: none;
+  }
+
+  > a {
+    display: block;
+  }
+
+  .attachment__caption {
+    margin-block-start: 1ch;
+  }
+}
+
+:where(.attachment--file) {
+  --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);
+
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1ch;
+  inline-size: auto;
+
+  .attachment__caption {
+    display: grid;
+    flex: 1;
+    text-align: start;
+  }
+
+  .attachment__name {
+    color: var(--lexxy-color-ink);
+    font-weight: bold;
+  }
+}
+
+:where(
+  .attachment--psd,
+  .attachment--key,
+  .attachment--sketch,
+  .attachment--ai,
+  .attachment--eps,
+  .attachment--indd,
+  .attachment--svg,
+  .attachment--ppt,
+  .attachment--pptx
+) {
+  --lexxy-attachment-icon-color: var(--lexxy-color-red);
+}
+
+:where(
+  .attachment--css,
+  .attachment--php,
+  .attachment--json,
+  .attachment--htm,
+  .attachment--html,
+  .attachment--rb,
+  .attachment--erb,
+  .attachment--ts,
+  .attachment--js
+) {
+  --lexxy-attachment-icon-color: var(--lexxy-color-purple);
+}
+
+:where(
+  .attachment--txt,
+  .attachment--pages,
+  .attachment--rtf,
+  .attachment--md,
+  .attachment--doc,
+  .attachment--docx
+) {
+  --lexxy-attachment-icon-color: var(--lexxy-color-blue);
+}
+
+:where(
+  .attachment--csv,
+  .attachment--numbers,
+  .attachment--xls,
+  .attachment--xlsx
+) {
+  --lexxy-attachment-icon-color: var(--lexxy-color-green);
+}
+
+/* Horizontal divider */
+:where(.horizontal-divider) {
+  margin: 0;
+  margin-block-end: .5em;
+  padding: 1.5em 0 .5em;
+
+  hr {
+    border: 0;
+    border-block-end: 1px solid currentColor;
+    inline-size: 20%;
+    margin: 0;
+  }
+}
+
+/* Custom attachments such as mentions, etc. */
+:where(action-text-attachment[content-type^="application/vnd.actiontext"]) {
+  --lexxy-attachment-bg-color: transparent;
+  --lexxy-attachment-image-size: 1em;
+  --lexxy-attachment-text-color: currentColor;
+
+  align-items: center;
+  background: var(--lexxy-attachment-bg-color);
+  border-radius: var(--lexxy-radius);
+  box-shadow: -0.25ch 0 0 var(--lexxy-attachment-bg-color), 0.5ch 0 0 var(--lexxy-attachment-bg-color);
+  color: var(--lexxy-attachment-text-color);
+  display: inline-flex;
+  gap: 0.25ch;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  white-space: normal;
+
+  img {
+    block-size: var(--lexxy-attachment-image-size);
+    border-radius: 50%;
+    inline-size: var(--lexxy-attachment-image-size);
+  }
+
+  &.node--selected {
+    --lexxy-attachment-bg-color: var(--lexxy-color-accent-dark);
+    --lexxy-attachment-text-color: var(--lexxy-color-ink-inverted);
+  }
+}