@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.14

package/DS1/1-root/notice.css

@@ -0,0 +1,165 @@
+@import "./component-metrics.css";
+
+/*
+ * An inline notice, as plain classes on native elements.
+ *
+ * A notice stands in the flow of the page, where its words apply: a failure
+ * beside the form that failed, a warning above the list it is about. It is not
+ * positioned and takes no box or shadow. A square mark, one control high and
+ * filled in the tone's colour, carries the tone; the words sit on the paper
+ * beside it, each line one square, with the actions on the row below and the
+ * dismiss button at the end of the first line. Danger turns the words into
+ * the danger colour. The `ds-notice` element draws the same parts.
+ *
+ *   ds-notice                       the block: mark, words, dismiss
+ *   ds-notice__mark                 the square mark; holds an icon in its ink
+ *   ds-notice__title                one line in the medium face
+ *   ds-notice__text                 lines of one square
+ *   ds-notice__actions              buttons or links on one row
+ *   ds-notice__dismiss              an icon button at the end of the first line
+ *   ds-notice--success, --warning, --danger     tones; neutral without one
+ *   ds-notice--banner               a strip across the top of its positioning
+ *                                   context instead: one square high, filled in
+ *                                   the tone's colour, everything on one line
+ *
+ * Give the block role="status", or role="alert" for danger, so assistive
+ * technology reads it when it appears.
+ *
+ * Tokens: `--ds-notice-mark`, `--ds-notice-mark-ink` and `--ds-notice-ink`,
+ * which the tones set.
+ */
+
+.ds-notice {
+  --ds-notice-mark: var(--ds-fill);
+  --ds-notice-mark-ink: var(--ds-text-color);
+  --ds-notice-ink: var(--ds-text-color);
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: var(--ds-unit) minmax(0, 1fr) auto;
+  align-items: start;
+  margin: 0;
+  color: var(--ds-notice-ink);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-unit);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  text-transform: none;
+}
+
+.ds-notice--success {
+  --ds-notice-mark: var(--ds-apple-green);
+  --ds-notice-mark-ink: var(--ds-black);
+}
+
+.ds-notice--warning {
+  --ds-notice-mark: var(--ds-orange);
+  --ds-notice-mark-ink: var(--ds-black);
+}
+
+.ds-notice--danger {
+  --ds-notice-mark: var(--ds-danger-color);
+  --ds-notice-mark-ink: light-dark(var(--ds-white), var(--ds-black));
+  --ds-notice-ink: var(--ds-danger-color);
+}
+
+/* The mark stands on the first line, one control high in a one-square cell. */
+.ds-notice__mark {
+  box-sizing: border-box;
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
+  margin-block: calc((var(--ds-unit) - var(--ds-control-height)) / 2);
+  overflow: hidden;
+  background: var(--ds-notice-mark);
+  color: var(--ds-notice-mark-ink);
+  --ds-icon-color: var(--ds-notice-mark-ink);
+}
+
+.ds-notice__title,
+.ds-notice__text,
+.ds-notice__actions {
+  grid-column: 2;
+  min-width: 0;
+  margin: 0;
+}
+
+.ds-notice__title,
+.ds-notice__text {
+  font: inherit;
+  letter-spacing: inherit;
+  overflow-wrap: anywhere;
+}
+
+.ds-notice__title {
+  font-family: var(--ds-typeface-medium);
+  font-weight: var(--ds-type-weight-bold);
+}
+
+.ds-notice__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 calc(var(--ds-unit) / 2);
+  min-height: var(--ds-row-height);
+}
+
+/* The dismiss button closes the first line: a one-square cell at the end.
+   Two classes, so the button's own reset of its margin does not undo it. */
+.ds-notice .ds-notice__dismiss {
+  grid-column: 3;
+  grid-row: 1;
+  margin-block: calc((var(--ds-unit) - var(--ds-control-height)) / 2);
+  margin-inline-start: calc(var(--ds-unit) - var(--ds-control-height));
+}
+
+/* A banner: the same parts on one line, one square high, across the top of
+   the nearest positioned ancestor (or the page), on a fill of the tone's
+   colour. It takes no room in the flow; leave a square for it where words
+   stand under it. The actions stand at the end of the line, half a square
+   apart; danger words keep the text colour on the danger fill. */
+.ds-notice--banner {
+  position: absolute;
+  top: 0;
+  inset-inline: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ds-unit) / 2);
+  height: var(--ds-unit);
+  padding-inline: var(--ds-unit);
+  background: color-mix(in srgb, var(--ds-notice-mark) 40%, transparent);
+  --ds-notice-ink: var(--ds-text-color);
+}
+
+.ds-notice--banner .ds-notice__mark {
+  flex: none;
+  margin-block: 0;
+}
+
+.ds-notice--banner .ds-notice__title,
+.ds-notice--banner .ds-notice__text {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-notice--banner .ds-notice__text {
+  flex: 1;
+}
+
+.ds-notice--banner .ds-notice__actions {
+  flex: none;
+  min-height: 0;
+}
+
+.ds-notice--banner .ds-notice__dismiss {
+  margin-block: 0;
+  margin-inline-start: 0;
+}

package/DS1/1-root/one.css

@@ -1,55 +1,12 @@
-/* version 0.3.0-alpha.13 */
+/* version 0.3.0-alpha.14 */
 
 @import "./grid.css";
 @import "./component-tokens.css";
-
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@350&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@350&display=swap");
-
-@font-face {
-  font-family: GT-America-Standard-Regular;
-  src: url("./fonts/GT-America-Standard-Regular.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: GT-America-Standard-Medium;
-  src: url("./fonts/GT-America-Standard-Medium.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: GT-America-Compressed-Regular;
-  src: url("./fonts/GT-America-Compressed-Regular.woff2") format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: GT-Canon-M-Standard-Medium;
-  src: url("./fonts/GT-Canon-M-Standard-Medium-Trial.woff2") format("woff2");
-  font-display: swap;
-}
-
-/* Arrows are always Inter: its arrows alone (fonts/Inter-LICENSE.md), first in
-   every typeface token, so the unicode-range draws only arrows with it. */
-@font-face {
-  font-family: "Inter Arrows";
-  src: url("./fonts/Inter-Arrows.woff2") format("woff2");
-  unicode-range: U+2190-21FF, U+27F0-27FF, U+2900-297F, U+2B00-2BFF;
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* The code font: Iosevka cut down to what code uses (fonts/Iosevka-LICENSE.md). */
-@font-face {
-  font-family: Iosevka;
-  src: url("./fonts/Iosevka-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
+@import "./text.css";
+/* The faces and typeface tokens (fonts.css), and the named palette colours as
+   --one-* tokens (palette.css, written from palette.ts). */
+@import "./fonts.css";
+@import "./palette.css";
 
 input {
   padding: 0;
@@ -94,27 +51,16 @@ input {
   --grid-color-light: #1e1e1e2b;
   --grid-color-dark: var(--white);
 
-  /* typefaces */
-  --typeface-regular: "Inter Arrows", "GT-America-Standard-Regular";
-  --typeface-medium: "Inter Arrows", "GT-America-Standard-Medium";
-  --typeface-compressed: "Inter Arrows", "GT-America-Compressed-Regular";
-  --typeface-mono: "Inter Arrows", "Iosevka", ui-monospace, "SF Mono", Menlo, monospace;
-  --typeface-canon: "Inter Arrows", "GT-Canon-M-Standard-Medium";
-
-  /* language specific typefaces */
-
-  --typeface-regular-jp: "Inter Arrows", "Noto Sans JP";
-  --typeface-regular-zh-hans: "Inter Arrows", "Noto Sans SC";
-  --typeface-regular-zh-hant: "Inter Arrows", "Noto Sans TC";
-  --typeface-regular-zh: var(--typeface-regular-zh-hant);
+  /* typefaces: fonts.css */
 
   /* typefaces sizes and weight */
 
   --type-size-default: calc(14px * var(--sf));
   --type-size-small: calc(10px * var(--sf));
-  --type-weight-default: 500;
-  --type-lineheight-default: calc(15px * var(--sf));
-  --type-size-heading: calc(15px * var(--sf));
+  --type-weight-default: 400;
+  --type-lineheight-default: calc(16px * var(--sf));
+  --type-size-heading: calc(13px * var(--sf));
+  --type-letterspacing-default: calc(-0.3px * var(--sf));
   --type-weight-bold: 500;
 
   --type-size-japanese-default: calc(12px * var(--sf));
@@ -230,27 +176,9 @@ body {
 /* ----------------------------------------------------------
    CSS-ONLY COMPONENTS
    Native HTML classes that do not require the JavaScript bundle.
+   The text classes (.ds-text, its sizes and tones) are text.css.
    ---------------------------------------------------------- */
 
-.ds-text {
-  margin: 0;
-  color: var(--text-color);
-  font-family: var(--typeface-regular);
-  font-size: var(--type-size-default);
-  font-weight: var(--type-weight-default);
-  line-height: var(--type-lineheight-default);
-}
-
-.ds-text--heading {
-  font-family: var(--typeface-medium);
-  font-size: var(--type-size-heading);
-  font-weight: var(--type-weight-heading);
-}
-
-.ds-text--small {
-  font-size: var(--type-size-small);
-}
-
 .ds-button {
   appearance: none;
   box-sizing: border-box;
@@ -266,6 +194,7 @@ body {
   font-family: var(--typeface-regular);
   font-size: var(--type-size-default);
   line-height: var(--type-lineheight-default);
+  letter-spacing: var(--type-letterspacing-default);
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
 }
@@ -313,6 +242,7 @@ body {
   font-family: var(--typeface-regular);
   font-size: var(--type-size-default);
   line-height: var(--type-lineheight-default);
+  letter-spacing: var(--type-letterspacing-default);
 }
 
 .ds-input::placeholder {