stilo-editor 0.0.0-stage → 0.1.0

package/dist/ui.css

@@ -0,0 +1,635 @@
+/* Stilo default UI styles. */
+
+/*
+ * Default values of the custom properties (docs/UI.md §7). `:where()` has no specificity, so any
+ * rule of the host page that sets them wins, whatever the order of the stylesheets.
+ */
+:where(:root) {
+  --stilo-font-family: system-ui, sans-serif;
+  --stilo-font-size: 14px;
+
+  --stilo-color-text: #1f2328;
+  --stilo-color-muted: #59636e;
+  --stilo-color-bg: #ffffff;
+  --stilo-color-toolbar-bg: #f9fbfd;
+  --stilo-color-border: #d1d9e0;
+  --stilo-color-separator: #e4e8ec;
+  --stilo-color-hover: #eef1f4;
+  --stilo-color-hover-group: #f5f7f9;
+  --stilo-color-active: #dde4ee;
+  --stilo-color-focus: #0969da;
+  --stilo-color-error: #d1242f;
+
+  --stilo-radius: 6px;
+
+  --stilo-toolbar-padding-x: 2px;
+  --stilo-toolbar-padding-y: 4px;
+  --stilo-toolbar-gap: 2px;
+  --stilo-toolbar-group-gap: 4px;
+  --stilo-toolbar-separator-height: 18px;
+  --stilo-toolbar-sticky-top: 0;
+  --stilo-toolbar-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
+  --stilo-z-toolbar: 1001;
+
+  --stilo-button-size: 30px;
+  --stilo-icon-size: 18px;
+
+  --stilo-popover-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
+  --stilo-z-popover: 1000;
+
+  --stilo-menu-h1-size: 1.5em;
+  --stilo-menu-h2-size: 1.3em;
+  --stilo-menu-h3-size: 1.15em;
+  --stilo-menu-h4-size: 1em;
+  --stilo-menu-h5-size: 1em;
+  --stilo-menu-h6-size: 1em;
+}
+
+/* Toolbar */
+.stilo-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--stilo-toolbar-group-gap);
+  padding: var(--stilo-toolbar-padding-y) var(--stilo-toolbar-padding-x);
+  background: var(--stilo-color-toolbar-bg);
+}
+
+/*
+ * The toolbar and its sticky container have a background: their top corners follow the element
+ * that holds them, so that a rounded editor box keeps its corners (no `overflow` on the host,
+ * which would cut the popovers).
+ */
+.stilo-toolbar-host,
+.stilo-toolbar {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+/* Sticky toolbar container (option `sticky`) */
+.stilo-toolbar-host {
+  position: sticky;
+  top: var(--stilo-toolbar-sticky-top);
+  z-index: var(--stilo-z-toolbar);
+  background: var(--stilo-color-bg);
+  container-type: scroll-state;
+}
+
+/*
+ * A shadow while the toolbar is stuck at the top of the scrolling page. Pure CSS: browsers
+ * without scroll-state container queries ignore it and show the toolbar without shadow.
+ */
+@container scroll-state(stuck: top) {
+  .stilo-toolbar {
+    box-shadow: var(--stilo-toolbar-shadow);
+  }
+}
+
+/* Group */
+.stilo-toolbar__group {
+  display: flex;
+  gap: var(--stilo-toolbar-gap);
+}
+
+/* Separator: a short line, vertically centered, before every group after the first */
+.stilo-toolbar__group:not(:first-child) {
+  position: relative;
+  padding-left: var(--stilo-toolbar-group-gap);
+}
+
+.stilo-toolbar__group:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 1px;
+  height: var(--stilo-toolbar-separator-height);
+  background: var(--stilo-color-separator);
+  transform: translateY(-50%);
+}
+
+/* Button */
+.stilo-toolbar__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stilo-button-size);
+  min-width: var(--stilo-button-size);
+  height: var(--stilo-button-size);
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: var(--stilo-color-text);
+  cursor: pointer;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  padding: 0;
+  margin: 0;
+  transition: background-color 0.15s;
+}
+
+.stilo-toolbar__button:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-toolbar__button:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 2px;
+}
+
+.stilo-toolbar__button.stilo-toolbar__button--active {
+  background: var(--stilo-color-active);
+}
+
+.stilo-toolbar__button[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.stilo-toolbar__button[aria-disabled="true"]:hover {
+  background: transparent;
+}
+
+/* Icon */
+.stilo-icon {
+  width: var(--stilo-icon-size);
+  height: var(--stilo-icon-size);
+  color: var(--stilo-color-text);
+}
+
+/* Popover */
+.stilo-popover-host {
+  position: relative;
+}
+
+.stilo-popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: max-content;
+  background: var(--stilo-color-bg);
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  box-shadow: var(--stilo-popover-shadow);
+  z-index: var(--stilo-z-popover);
+  padding: 4px;
+}
+
+/* A component class with its own `display` must not show a closed popover. */
+.stilo-popover[hidden] {
+  display: none;
+}
+
+/* Dropdown */
+.stilo-dropdown__trigger {
+  width: auto;
+  min-width: 120px;
+  justify-content: space-between;
+  padding: 0 8px;
+}
+
+.stilo-dropdown__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stilo-dropdown__menu {
+  min-width: 160px;
+}
+
+.stilo-dropdown__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: var(--stilo-radius);
+  cursor: pointer;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-dropdown__option:hover,
+.stilo-dropdown__option:focus-visible {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-dropdown__option:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -2px;
+}
+
+.stilo-dropdown__option[aria-checked="true"] {
+  background: var(--stilo-color-active);
+}
+
+.stilo-dropdown__option[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.stilo-dropdown__option[aria-disabled="true"]:hover {
+  background: transparent;
+}
+
+.stilo-dropdown__label {
+  flex: 1;
+}
+
+.stilo-dropdown__shortcut {
+  font-size: 0.85em;
+  color: var(--stilo-color-muted);
+}
+
+/* Heading preview */
+.stilo-dropdown__option--h1 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h1-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h2 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h2-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h3 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h3-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h4 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h4-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h5 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h5-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h6 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h6-size);
+  font-weight: 600;
+}
+
+/* Link popover */
+.stilo-link-popover__form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  width: 320px;
+  padding: 4px;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-link-popover__url {
+  flex: 1 1 100%;
+  box-sizing: border-box;
+  padding: 6px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: inherit;
+  font: inherit;
+}
+
+.stilo-link-popover__url:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -1px;
+}
+
+.stilo-link-popover__url[aria-invalid="true"] {
+  border-color: var(--stilo-color-error);
+}
+
+.stilo-link-popover__new-tab {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.stilo-link-popover__actions {
+  display: flex;
+  gap: 4px;
+}
+
+.stilo-link-popover__button {
+  padding: 4px 10px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.stilo-link-popover__button:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-link-popover__button:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 1px;
+}
+
+.stilo-link-popover__button--primary,
+.stilo-link-popover__button--primary:hover {
+  border-color: var(--stilo-color-focus);
+  background: var(--stilo-color-focus);
+  color: #ffffff;
+}
+
+/* Link bubble: small and unobtrusive */
+.stilo-link-bubble {
+  display: flex;
+  gap: 1px;
+  padding: 2px;
+}
+
+.stilo-link-bubble__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: var(--stilo-color-text);
+  cursor: pointer;
+}
+
+.stilo-link-bubble__button:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-link-bubble__button .stilo-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Character picker: 10 columns (COLUMNS in character-picker.ts) */
+.stilo-char-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-char-picker__search {
+  padding: 6px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  font: inherit;
+}
+
+.stilo-char-picker__search:focus-visible,
+.stilo-char-picker__tab:focus-visible,
+.stilo-char-picker__char:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -2px;
+}
+
+.stilo-char-picker__tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--stilo-color-border);
+}
+
+.stilo-char-picker__tabs[hidden] {
+  display: none;
+}
+
+.stilo-char-picker__tab {
+  padding: 6px 10px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--stilo-color-muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.stilo-char-picker__tab[aria-selected="true"] {
+  border-bottom-color: var(--stilo-color-focus);
+  color: var(--stilo-color-text);
+}
+
+.stilo-char-picker__panel {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.stilo-char-picker__heading {
+  margin: 8px 0 4px;
+  color: var(--stilo-color-muted);
+  font-size: 0.85em;
+}
+
+.stilo-char-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(10, 32px);
+  gap: 2px;
+}
+
+.stilo-char-picker__char {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.stilo-char-picker__char:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-char-picker__empty {
+  margin: 8px 0;
+  color: var(--stilo-color-muted);
+}
+
+/* Color split button (T-026): the main part shows the last used color under its icon */
+.stilo-split {
+  display: flex;
+}
+
+/* Group hover: hovering one part lightly highlights both; the hovered part stays darker */
+.stilo-split:hover
+.stilo-toolbar__button:not(.stilo-toolbar__button--active, [aria-disabled="true"]) {
+  background: var(--stilo-color-hover-group);
+}
+
+.stilo-split
+  .stilo-toolbar__button:not(.stilo-toolbar__button--active, [aria-disabled="true"]):hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-toolbar__button.stilo-split__main {
+  flex-direction: column;
+  gap: 1px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.stilo-split__main .stilo-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.stilo-split__color {
+  width: 16px;
+  height: 4px;
+  border-radius: 1px;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
+}
+
+.stilo-toolbar__button.stilo-split__arrow {
+  width: 20px;
+  min-width: 20px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.stilo-split__arrow .stilo-icon {
+  width: 12px;
+  height: 12px;
+}
+
+/* Color picker: 8 columns (COLUMNS in color-button.ts) */
+.stilo-color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-color-picker__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.stilo-color-picker__none,
+.stilo-color-picker__default {
+  flex: 1;
+  padding: 4px 8px;
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+}
+
+.stilo-color-picker__none:hover,
+.stilo-color-picker__default:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-color-picker__default[aria-pressed="true"] {
+  background: var(--stilo-color-active);
+}
+
+.stilo-color-picker__default mark {
+  padding: 0 4px;
+  border-radius: 2px;
+}
+
+.stilo-color-picker__separator {
+  width: 1px;
+  height: 18px;
+  background: var(--stilo-color-separator);
+}
+
+.stilo-color-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(8, 22px);
+  gap: 4px;
+}
+
+.stilo-color-picker__swatch {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
+  cursor: pointer;
+}
+
+.stilo-color-picker__swatch:hover {
+  transform: scale(1.15);
+}
+
+.stilo-color-picker__swatch[aria-pressed="true"] {
+  outline: 2px solid var(--stilo-color-text);
+  outline-offset: 1px;
+}
+
+.stilo-color-picker__none:focus-visible,
+.stilo-color-picker__default:focus-visible,
+.stilo-color-picker__swatch:focus-visible,
+.stilo-color-picker__value:focus-visible,
+.stilo-color-picker__native:focus-visible,
+.stilo-color-picker__apply:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 1px;
+}
+
+.stilo-color-picker__custom {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin: 0;
+}
+
+.stilo-color-picker__native {
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  cursor: pointer;
+}
+
+.stilo-color-picker__value {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  font: inherit;
+}
+
+.stilo-color-picker__value[aria-invalid="true"] {
+  border-color: var(--stilo-color-error);
+}
+
+.stilo-color-picker__apply {
+  padding: 4px 10px;
+  border: 1px solid var(--stilo-color-focus);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-focus);
+  color: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}