@slotted/styles 0.0.0-stage → 0.1.0-beta.0

package/src/tree/tree.tokens.json

@@ -0,0 +1,80 @@
+[
+  "--slotted-border-strong",
+  "--slotted-border-subtle",
+  "--slotted-border-width-medium",
+  "--slotted-border-width-thin",
+  "--slotted-control-border-color",
+  "--slotted-control-font-size-lg",
+  "--slotted-control-font-size-md",
+  "--slotted-control-font-size-sm",
+  "--slotted-control-gap-lg",
+  "--slotted-control-gap-md",
+  "--slotted-control-gap-sm",
+  "--slotted-control-height-lg",
+  "--slotted-control-height-md",
+  "--slotted-control-height-sm",
+  "--slotted-control-icon-size-lg",
+  "--slotted-control-icon-size-md",
+  "--slotted-control-icon-size-sm",
+  "--slotted-control-invalid-edge-width",
+  "--slotted-control-padding-inline-lg",
+  "--slotted-control-padding-inline-md",
+  "--slotted-control-padding-inline-sm",
+  "--slotted-control-shadow",
+  "--slotted-control-transition-duration",
+  "--slotted-control-transition-easing",
+  "--slotted-disabled-background",
+  "--slotted-disabled-border",
+  "--slotted-disabled-foreground",
+  "--slotted-duration-medium",
+  "--slotted-duration-short",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-color-invalid",
+  "--slotted-focus-ring-width",
+  "--slotted-font-family-sans",
+  "--slotted-font-size-xs",
+  "--slotted-font-weight-semibold",
+  "--slotted-highlight-tint-opacity",
+  "--slotted-line-height-sm",
+  "--slotted-radius-md",
+  "--slotted-radius-xs",
+  "--slotted-selection-size-lg",
+  "--slotted-selection-size-md",
+  "--slotted-selection-size-sm",
+  "--slotted-space-1",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-5",
+  "--slotted-surface",
+  "--slotted-target-min",
+  "--slotted-text",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-border",
+  "--slotted-tone-accent-on-solid",
+  "--slotted-tone-accent-solid",
+  "--slotted-tone-accent-surface",
+  "--slotted-tone-accent-text",
+  "--slotted-tone-danger-border",
+  "--slotted-tone-secondary-subtle-active",
+  "--slotted-tone-secondary-subtle-hover",
+  "--slotted-tree-border-color",
+  "--slotted-tree-guide-color",
+  "--slotted-tree-highlight",
+  "--slotted-tree-highlight-active",
+  "--slotted-tree-indent",
+  "--slotted-tree-mark-inset",
+  "--slotted-tree-measure",
+  "--slotted-tree-padding-block",
+  "--slotted-tree-padding-inline",
+  "--slotted-tree-radius",
+  "--slotted-tree-rows",
+  "--slotted-tree-selected-edge",
+  "--slotted-tree-selected-surface",
+  "--slotted-tree-selected-text",
+  "--slotted-tree-shadow",
+  "--slotted-tree-surface",
+  "--slotted-tree-text",
+  "--slotted-tree-text-muted"
+]

package/src/typography/typography.css

@@ -0,0 +1,211 @@
+@layer slotted.components {
+  /**
+   * The base rule is the family default: medium step, regular weight, the
+   * colour of whatever contains it. Colour is inherited rather than painted,
+   * so text placed on a tonal surface reads that surface instead of arguing
+   * with it; `data-tone` is how a consumer asks for a colour of its own.
+   */
+  [data-ui='typography'] {
+    font-family: var(
+      --slotted-typography-font-family,
+      var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+    font-size: var(--slotted-font-size-md, 0.875rem);
+    font-weight: var(--slotted-font-weight-regular, 400);
+    line-height: var(--slotted-line-height-md, 1.5);
+    margin: 0;
+    /**
+     * A word longer than its container breaks rather than escaping it. The
+     * `anywhere` form is the one that also shrinks the element's min-content
+     * size, so a grid track or a flex item sized from this text stops being as
+     * wide as its longest token. `break-word` breaks the same lines and leaves
+     * that width in place, which is how a single identifier drags a whole
+     * column past the edge of a narrow layout.
+     */
+    overflow-wrap: anywhere;
+  }
+
+  /**
+   * A heading is set in the heading face. The element is the only thing that
+   * tells a heading from a line of text here: both carry `data-ui` and
+   * `data-part='root'`, and `Heading` always renders `h1` to `h6`.
+   */
+  [data-ui='typography']:is(h1, h2, h3, h4, h5, h6) {
+    font-family: var(
+      --slotted-font-family-heading,
+      var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+  }
+
+  /* Each step carries the line height the scale pairs it with. */
+  [data-ui='typography'][data-size='xs'] {
+    font-size: var(--slotted-font-size-xs, 0.75rem);
+    line-height: var(--slotted-line-height-xs, 1.4);
+  }
+
+  [data-ui='typography'][data-size='sm'] {
+    font-size: var(--slotted-font-size-sm, 0.8125rem);
+    line-height: var(--slotted-line-height-sm, 1.45);
+  }
+
+  [data-ui='typography'][data-size='md'] {
+    font-size: var(--slotted-font-size-md, 0.875rem);
+    line-height: var(--slotted-line-height-md, 1.5);
+  }
+
+  [data-ui='typography'][data-size='lg'] {
+    font-size: var(--slotted-font-size-lg, 1rem);
+    line-height: var(--slotted-line-height-lg, 1.5);
+  }
+
+  [data-ui='typography'][data-size='xl'] {
+    font-size: var(--slotted-font-size-xl, 1.125rem);
+    line-height: var(--slotted-line-height-xl, 1.45);
+  }
+
+  [data-ui='typography'][data-size='2xl'] {
+    font-size: var(--slotted-font-size-2xl, 1.25rem);
+    line-height: var(--slotted-line-height-2xl, 1.4);
+  }
+
+  [data-ui='typography'][data-size='3xl'] {
+    font-size: var(--slotted-font-size-3xl, 1.5rem);
+    line-height: var(--slotted-line-height-3xl, 1.3);
+  }
+
+  [data-ui='typography'][data-weight='regular'] {
+    font-weight: var(--slotted-font-weight-regular, 400);
+  }
+
+  [data-ui='typography'][data-weight='medium'] {
+    font-weight: var(--slotted-font-weight-medium, 500);
+  }
+
+  [data-ui='typography'][data-weight='semibold'] {
+    font-weight: var(--slotted-font-weight-semibold, 600);
+  }
+
+  [data-ui='typography'][data-tone='default'] {
+    color: var(--slotted-text, CanvasText);
+  }
+
+  [data-ui='typography'][data-tone='muted'] {
+    color: var(--slotted-text-muted, GrayText);
+  }
+
+  [data-ui='typography'][data-tone='accent'] {
+    color: var(--slotted-tone-accent-text, LinkText);
+  }
+
+  [data-ui='typography'][data-tone='success'] {
+    color: var(--slotted-tone-success-text, CanvasText);
+  }
+
+  [data-ui='typography'][data-tone='warning'] {
+    color: var(--slotted-tone-warning-text, CanvasText);
+  }
+
+  [data-ui='typography'][data-tone='danger'] {
+    color: var(--slotted-tone-danger-text, CanvasText);
+  }
+
+  [data-ui='typography'][data-tone='inverse'] {
+    color: var(--slotted-text-inverse, Canvas);
+  }
+
+  /**
+   * Alignment needs a box to align inside. The default element is a span, so
+   * asking for alignment is what turns the span into a block; a consumer who
+   * wants inline text simply does not ask.
+   */
+  [data-ui='typography'][data-align] {
+    display: block;
+  }
+
+  [data-ui='typography'][data-align='start'] {
+    text-align: start;
+  }
+
+  [data-ui='typography'][data-align='center'] {
+    text-align: center;
+  }
+
+  [data-ui='typography'][data-align='end'] {
+    text-align: end;
+  }
+
+  /* Every wrapping value is stated, because text-wrap inherits: a heading's
+     balance would otherwise reach the running text inside it. */
+  [data-ui='typography'][data-wrap='normal'] {
+    text-wrap: wrap;
+    white-space: normal;
+  }
+
+  [data-ui='typography'][data-wrap='nowrap'] {
+    white-space: nowrap;
+  }
+
+  [data-ui='typography'][data-wrap='balance'] {
+    text-wrap: balance;
+  }
+
+  [data-ui='typography'][data-wrap='pretty'] {
+    text-wrap: pretty;
+  }
+
+  [data-ui='typography'][data-numeric='normal'] {
+    font-variant-numeric: normal;
+  }
+
+  [data-ui='typography'][data-numeric='tabular'] {
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-ui='typography'][data-transform='none'] {
+    text-transform: none;
+  }
+
+  [data-ui='typography'][data-transform='capitalize'] {
+    text-transform: capitalize;
+  }
+
+  /**
+   * Capitals lose the word shape a reader scans by, and they set too tight for
+   * it, so the family pays back the tracking the capitals took. The scale
+   * holds no tracking step, and this value corrects an optical effect rather
+   * than stating one; a theme retunes it through the token.
+   */
+  [data-ui='typography'][data-transform='uppercase'] {
+    letter-spacing: var(--slotted-typography-uppercase-tracking, 0.06em);
+    text-transform: uppercase;
+  }
+
+  /**
+   * The Arabic script joins its letters and has no case at all. Tracking
+   * severs the joins, so the correction above is undone for the languages
+   * written in it. The list is the common ones, not every one: a language it
+   * misses sets --slotted-typography-uppercase-tracking to normal.
+   */
+  [data-ui='typography']:lang(ar),
+  [data-ui='typography']:lang(fa),
+  [data-ui='typography']:lang(ur) {
+    letter-spacing: normal;
+  }
+
+  /**
+   * Truncation clips the picture, never the content: the whole string stays in
+   * the DOM, so a screen reader reads it, a search finds it and a selection
+   * copies it. `data-truncate` states the line count for a reader of the DOM,
+   * and the count reaches CSS as a custom property because a line-clamp cannot
+   * be read from an attribute.
+   */
+  [data-ui='typography'][data-truncate] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--slotted-typography-lines, 1);
+    line-clamp: var(--slotted-typography-lines, 1);
+    /* A flex or grid item refuses to shrink below its content without this. */
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+}

package/src/typography/typography.tokens.json

@@ -0,0 +1,31 @@
+[
+  "--slotted-font-family-heading",
+  "--slotted-font-family-sans",
+  "--slotted-font-size-2xl",
+  "--slotted-font-size-3xl",
+  "--slotted-font-size-lg",
+  "--slotted-font-size-md",
+  "--slotted-font-size-sm",
+  "--slotted-font-size-xl",
+  "--slotted-font-size-xs",
+  "--slotted-font-weight-medium",
+  "--slotted-font-weight-regular",
+  "--slotted-font-weight-semibold",
+  "--slotted-line-height-2xl",
+  "--slotted-line-height-3xl",
+  "--slotted-line-height-lg",
+  "--slotted-line-height-md",
+  "--slotted-line-height-sm",
+  "--slotted-line-height-xl",
+  "--slotted-line-height-xs",
+  "--slotted-text",
+  "--slotted-text-inverse",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-text",
+  "--slotted-tone-danger-text",
+  "--slotted-tone-success-text",
+  "--slotted-tone-warning-text",
+  "--slotted-typography-font-family",
+  "--slotted-typography-lines",
+  "--slotted-typography-uppercase-tracking"
+]