@thalassic/themes 22.14.2 → 22.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thalassic/themes",
-  "version": "22.14.2",
+  "version": "22.15.0",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^22.0.0",

package/themes/thalassic/components/activity-heatmap/_activity-heatmap-color.scss

@@ -0,0 +1,5 @@
+@use '../../mixins' as mixins;
+
+.tls-activity-heatmap {
+  @include mixins.color-variants('tls-activity-heatmap');
+}

package/themes/thalassic/components/activity-heatmap/_activity-heatmap-size.scss

@@ -0,0 +1,16 @@
+.tls-activity-heatmap {
+  &.tls-activity-heatmap--sm {
+    --tls-activity-heatmap-cell-size: 10px;
+    --tls-activity-heatmap-font-size: var(--font-label-small-size);
+  }
+
+  &.tls-activity-heatmap--md {
+    --tls-activity-heatmap-cell-size: 14px;
+    --tls-activity-heatmap-font-size: var(--font-label-small-size);
+  }
+
+  &.tls-activity-heatmap--lg {
+    --tls-activity-heatmap-cell-size: 18px;
+    --tls-activity-heatmap-font-size: var(--font-label-medium-size);
+  }
+}

package/themes/thalassic/components/activity-heatmap/_activity-heatmap.scss

@@ -0,0 +1,150 @@
+@use '../../mixins' as mixins;
+@use '../../functions' as functions;
+
+.tls-activity-heatmap {
+  // Fill of a day with no activity, and the base every shaded cell is mixed against.
+  --tls-activity-heatmap-empty: var(--color-surface-container-high);
+  // Hairline that keeps a faint cell readable against the surface behind it.
+  --tls-activity-heatmap-outline: #{functions.tint(var(--color-on-surface), 12%)};
+  // Gap between cells, shared by the grid and the labels aligned to it.
+  --tls-activity-heatmap-gap: var(--spacing-1);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+
+  &__viewport {
+    // A year of weeks rarely fits a narrow container; scroll rather than shrink the cells.
+    overflow-x: auto;
+  }
+
+  &__chart {
+    width: max-content;
+
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: var(--tls-activity-heatmap-gap);
+  }
+
+  &__months {
+    grid-column: 2;
+
+    display: grid;
+    grid-template-columns: repeat(
+      var(--tls-activity-heatmap-weeks, 0),
+      var(--tls-activity-heatmap-cell-size)
+    );
+    column-gap: var(--tls-activity-heatmap-gap);
+  }
+
+  &__month {
+    font-size: var(--tls-activity-heatmap-font-size);
+    line-height: 1;
+    color: var(--color-on-surface-variant);
+  }
+
+  &__weekdays {
+    grid-column: 1;
+
+    display: grid;
+    grid-auto-rows: var(--tls-activity-heatmap-cell-size);
+    align-items: center;
+    row-gap: var(--tls-activity-heatmap-gap);
+  }
+
+  &__weekday {
+    font-size: var(--tls-activity-heatmap-font-size);
+    line-height: 1;
+    color: var(--color-on-surface-variant);
+  }
+
+  &__grid {
+    grid-column: 2;
+
+    display: grid;
+    grid-auto-rows: var(--tls-activity-heatmap-cell-size);
+    row-gap: var(--tls-activity-heatmap-gap);
+  }
+
+  &__row {
+    display: grid;
+    grid-template-columns: repeat(
+      var(--tls-activity-heatmap-weeks, 0),
+      var(--tls-activity-heatmap-cell-size)
+    );
+    column-gap: var(--tls-activity-heatmap-gap);
+  }
+
+  &__day {
+    position: relative;
+
+    height: var(--tls-activity-heatmap-cell-size);
+
+    border: 1px solid var(--tls-activity-heatmap-outline);
+    border-radius: var(--radius-sm);
+
+    // The fill reads as a share of the theme color laid over the empty surface, so any
+    // level count maps onto one continuous scale.
+    background-color: color-mix(
+      in oklab,
+      var(--tls-activity-heatmap-color) calc(var(--tls-activity-heatmap-intensity, 0) * 100%),
+      var(--tls-activity-heatmap-empty)
+    );
+
+    cursor: pointer;
+
+    @include mixins.motion(essential) {
+      transition: border-color var(--motion-fast) var(--motion-ease-in-out);
+    }
+
+    &:hover {
+      border-color: var(--color-on-surface);
+    }
+
+    &:focus-visible {
+      // The ring overflows onto the neighbouring cells; lift the focused one above them.
+      z-index: 1;
+
+      @include mixins.focus-ring;
+    }
+
+    // Padding days only complete the first and last week, so they leave no visual trace.
+    &--outside {
+      border-color: transparent;
+
+      background-color: transparent;
+
+      cursor: default;
+    }
+
+    &--today {
+      border-color: var(--color-on-surface);
+    }
+  }
+
+  &__legend {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--tls-activity-heatmap-gap);
+  }
+
+  &__legend-label {
+    font-size: var(--tls-activity-heatmap-font-size);
+    color: var(--color-on-surface-variant);
+  }
+
+  &__legend-swatch {
+    width: var(--tls-activity-heatmap-cell-size);
+    height: var(--tls-activity-heatmap-cell-size);
+
+    border: 1px solid var(--tls-activity-heatmap-outline);
+    border-radius: var(--radius-sm);
+
+    background-color: color-mix(
+      in oklab,
+      var(--tls-activity-heatmap-color) calc(var(--tls-activity-heatmap-intensity, 0) * 100%),
+      var(--tls-activity-heatmap-empty)
+    );
+  }
+}

package/themes/thalassic/components/activity-heatmap/_index.scss

@@ -0,0 +1,3 @@
+@forward 'activity-heatmap';
+@forward 'activity-heatmap-color';
+@forward 'activity-heatmap-size';

package/themes/thalassic/components/index.scss

@@ -1,3 +1,4 @@
+@forward 'activity-heatmap';
 @forward 'alert';
 @forward 'autocomplete';
 @forward 'badge';
@@ -41,6 +42,7 @@
 @forward 'pin-input';
 @forward 'popover';
 @forward 'radio-button';
+@forward 'rich-text-editor';
 @forward 'skeleton';
 @forward 'splitter';
 @forward 'table';

package/themes/thalassic/components/rich-text-editor/_index.scss

@@ -0,0 +1,3 @@
+@forward 'rich-text-editor';
+@forward 'rich-text-editor-content';
+@forward 'rich-text-editor-size';

package/themes/thalassic/components/rich-text-editor/_rich-text-editor-content.scss

@@ -0,0 +1,115 @@
+// The editable document surface managed by ProseMirror: the textbox itself (sizing,
+// padding, placeholder) and the typography of the rich-text elements inside it.
+.tls-rich-text-editor__content {
+  position: relative;
+
+  min-height: calc(var(--tls-rich-text-editor-min-rows, 4) * 1.6em);
+
+  padding: var(--tls-rich-text-editor-padding-block) var(--tls-rich-text-editor-padding-inline);
+
+  outline: none;
+
+  color: var(--color-on-surface);
+
+  font-family: inherit;
+  overflow-wrap: break-word;
+
+  &[data-empty][data-placeholder]::before {
+    content: attr(data-placeholder);
+
+    position: absolute;
+    inset-block-start: var(--tls-rich-text-editor-padding-block);
+    inset-inline-start: var(--tls-rich-text-editor-padding-inline);
+
+    color: var(--color-outline);
+
+    pointer-events: none;
+  }
+
+  > :first-child {
+    margin-block-start: 0;
+  }
+
+  > :last-child {
+    margin-block-end: 0;
+  }
+
+  p,
+  ul,
+  ol,
+  blockquote,
+  pre {
+    margin-block: var(--spacing-2);
+  }
+
+  h1,
+  h2,
+  h3 {
+    margin-block: var(--spacing-3) var(--spacing-2);
+
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  h1 {
+    font-size: 1.5em;
+  }
+
+  h2 {
+    font-size: 1.3em;
+  }
+
+  h3 {
+    font-size: 1.15em;
+  }
+
+  ul,
+  ol {
+    padding-inline-start: var(--spacing-6);
+  }
+
+  li {
+    margin-block: var(--spacing-1);
+  }
+
+  a {
+    color: var(--color-primary);
+    text-decoration: underline;
+  }
+
+  blockquote {
+    padding-inline-start: var(--spacing-3);
+
+    border-inline-start: 2px solid var(--color-outline-variant);
+
+    color: var(--color-on-surface-variant);
+  }
+
+  code {
+    padding: 0 var(--spacing-1);
+
+    border-radius: var(--radius-sm);
+
+    background-color: var(--color-surface-container-high);
+
+    font-family: monospace;
+    font-size: 0.9em;
+  }
+
+  pre {
+    padding: var(--spacing-2) var(--spacing-3);
+
+    border-radius: var(--radius-md);
+
+    background-color: var(--color-surface-container-high);
+
+    font-family: monospace;
+    white-space: pre-wrap;
+
+    code {
+      padding: 0;
+
+      background-color: transparent;
+    }
+  }
+}

package/themes/thalassic/components/rich-text-editor/_rich-text-editor-size.scss

@@ -0,0 +1,22 @@
+.tls-rich-text-editor {
+  --tls-rich-text-editor-padding-inline: var(--spacing-3);
+
+  // Toolbar controls and the link-bar actions keep a fixed box across every control
+  // size, so the toolbar's rhythm stays stable while the editable area scales.
+  --tls-rich-text-editor-button-size: 32px;
+
+  // Typography comes from the shared form-control size classes
+  // (`form-control/_form-control-size.scss`), which the component emits on its
+  // host; only the editable area's block padding is size-specific here.
+  &.tls-form-control--sm {
+    --tls-rich-text-editor-padding-block: var(--spacing-1);
+  }
+
+  &.tls-form-control--md {
+    --tls-rich-text-editor-padding-block: var(--spacing-2);
+  }
+
+  &.tls-form-control--lg {
+    --tls-rich-text-editor-padding-block: var(--spacing-3);
+  }
+}

package/themes/thalassic/components/rich-text-editor/_rich-text-editor.scss

@@ -0,0 +1,167 @@
+@use '../../mixins' as mixins;
+
+.tls-rich-text-editor {
+  &.tls-form-control {
+    padding-inline: 0;
+
+    overflow: hidden;
+
+    &:not(.tls-form-control--disabled):not(.tls-form-control--show-error):hover {
+      --tls-form-control-border-color: var(--color-outline-variant);
+    }
+  }
+
+  &__toolbar {
+    padding: var(--spacing-1);
+
+    border-block-end: var(--tls-form-control-border-width, 1px) solid var(--color-outline-variant);
+
+    background-color: var(--color-surface-container-low);
+  }
+
+  &__separator {
+    background-color: var(--color-outline-variant);
+  }
+
+  &__button {
+    // The transparent border reserves the box the active state paints into, so
+    // turning a control on never shifts the toolbar's metrics.
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+
+    background-color: transparent;
+
+    color: var(--color-on-surface-variant);
+
+    @include mixins.motion(essential) {
+      transition:
+        color var(--motion-fast) var(--motion-ease-in-out),
+        border-color var(--motion-fast) var(--motion-ease-in-out),
+        background-color var(--motion-fast) var(--motion-ease-in-out);
+    }
+
+    @include mixins.touch-target(var(--tls-rich-text-editor-button-size));
+
+    // The neutral hover excludes the active control so its pressed tint stays
+    // readable under the cursor; the active control hovers within its own hue below.
+    &:not(:disabled):hover:not(.tls-rich-text-editor__button--active) {
+      background-color: var(--color-surface-container-highest);
+
+      color: var(--color-on-surface);
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--color-surface-container-high);
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+
+    &--active {
+      border-color: var(--color-primary);
+
+      background-color: var(--color-primary-container);
+
+      // The container's paired on-color, not `--color-primary`: the heading controls
+      // render text glyphs rather than icons, so this pairing has to clear the 4.5:1
+      // text threshold, not the 3:1 one that would suffice for an icon.
+      color: var(--color-on-primary-container);
+
+      &:not(:disabled):hover {
+        background-color: color-mix(
+          in srgb,
+          var(--color-primary-container) 85%,
+          var(--color-surface)
+        );
+      }
+
+      &:not(:disabled):active {
+        background-color: color-mix(
+          in srgb,
+          var(--color-primary-container) 70%,
+          var(--color-surface)
+        );
+      }
+    }
+
+    &:disabled {
+      color: var(--color-outline);
+    }
+  }
+
+  &__link-bar {
+    padding: var(--spacing-2);
+
+    border-block-start: var(--tls-form-control-border-width, 1px) solid var(--color-outline-variant);
+
+    background-color: var(--color-surface-container-low);
+  }
+
+  &__link-input {
+    padding: var(--spacing-1) var(--spacing-2);
+
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-sm);
+
+    background-color: var(--color-surface-container-lowest);
+
+    color: var(--color-on-surface);
+
+    &:focus-visible {
+      outline: none;
+
+      border-color: var(--color-primary);
+    }
+  }
+
+  &__link-action {
+    height: var(--tls-rich-text-editor-button-size);
+
+    padding-inline: var(--spacing-3);
+
+    display: inline-flex;
+    align-items: center;
+
+    border: none;
+    border-radius: var(--radius-sm);
+
+    background-color: var(--color-primary);
+
+    color: var(--color-on-primary);
+
+    cursor: pointer;
+
+    @include mixins.motion(essential) {
+      transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+    }
+
+    @include mixins.touch-target(var(--tls-rich-text-editor-button-size));
+
+    &:hover {
+      background-color: color-mix(in srgb, var(--color-primary) 90%, var(--color-on-primary));
+    }
+
+    &:active {
+      background-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-on-primary));
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+
+    &--ghost {
+      background-color: transparent;
+
+      color: var(--color-on-surface-variant);
+
+      &:hover {
+        background-color: var(--color-surface-container-highest);
+      }
+
+      &:active {
+        background-color: var(--color-surface-container-high);
+      }
+    }
+  }
+}

package/themes/thalassic/components/stepper/_stepper.scss

@@ -78,6 +78,15 @@
         transition: color var(--motion-fast),
         background-color var(--motion-fast);
 
+        // The header is a tablist: it resolves the clicked step from
+        // `event.target` and ignores any target that is not an `HTMLElement`,
+        // so a click landing on an SVG child (a consumer-supplied step icon)
+        // never selects the step. Making SVG content transparent to pointer
+        // events keeps the control itself the target.
+        svg {
+          pointer-events: none;
+        }
+
         &__index {
           width: var(--tls-stepper-index-size);
           height: var(--tls-stepper-index-size);

package/themes/thalassic/components/tab-header/_tab-header.scss

@@ -87,6 +87,16 @@
 
       transition: background-color var(--motion-fast);
 
+      // The tablist resolves the clicked tab from `event.target` and ignores
+      // any target that is not an `HTMLElement`, so a click landing on an SVG
+      // child (an icon rendered into the tab label) never selects the tab.
+      // Making SVG content transparent to pointer events keeps the control
+      // itself the target. Targeted by element name deliberately: the content
+      // is consumer-provided, so no class is available to hook.
+      svg {
+        pointer-events: none;
+      }
+
       // Focus is distinct from selection here: the strip is a roving-tabindex
       // widget, so arrowing moves focus onto tabs that are not selected and
       // the active-indicator color alone cannot stand in for a focus