jvetrau-ds 0.2.20 → 0.2.22

package/styles.css

@@ -2,28 +2,67 @@
 
 /* src/components/action-group/action-group.css */
 .action-group {
+  /* color */
+
+  /* typography */
+
+  /* size */
   display: flex;
   gap: var(--margin-control);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .action-group--row {
+  /* color */
+
+  /* typography */
+
+  /* size */
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .action-group--column {
+  /* color */
+
+  /* typography */
+
+  /* size */
   flex-direction: column;
   align-items: flex-start;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .action-group--end {
+  /* color */
+
+  /* typography */
+
+  /* size */
   justify-content: flex-end;
-}
 
-.action-group--column.action-group--end {
-  align-items: flex-end;
-  justify-content: flex-start;
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* src/components/attach/attach.css */
@@ -66,6 +105,23 @@
   /* motion */
 }
 
+.panel:not(.panel--transparent) .attach {
+  /* color */
+  --attachment-item-bg: var(--color-bg-contrast);
+  --attachment-item-color: var(--color-text-contrast);
+  --attachment-item-meta-color: var(--color-text-contrast);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .attach__list {
   /* color */
 
@@ -302,7 +358,7 @@
   letter-spacing: var(--avatar-letter-spacing);
 
   /* size */
-  --avatar-size: 48px;
+  --avatar-size: var(--size-avatar-base);
 
   display: inline-flex;
   align-items: center;
@@ -321,6 +377,36 @@
   /* motion */
 }
 
+.avatar--preview {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --avatar-size: var(--size-avatar-preview);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.avatar--full {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --avatar-size: var(--size-avatar-full);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .avatar--button {
   /* color */
 
@@ -3681,215 +3767,6 @@
 
 /* src/components/markdown/markdown.css */
 .markdown {
-  /* color */
-
-  /* typography */
-
-  /* size */
-  --markdown-block-gap: var(--margin-container-item);
-  --markdown-list-gap: var(--margin-control);
-  --markdown-list-padding: var(--padding-container);
-  --markdown-code-padding-inline: var(--padding-control-horz);
-  --markdown-code-padding-block: var(--padding-control-vert);
-  --markdown-table-cell-padding: var(--padding-control-vert);
-
-  /* border */
-  --markdown-border-width: var(--size-border-width-base);
-  --markdown-radius: var(--radius-control);
-
-  /* depth */
-
-  /* motion */
-}
-
-.markdown > * {
-  /* size */
-  margin: 0;
-}
-
-.markdown > :not(:first-child) {
-  /* size */
-  margin-top: var(--markdown-block-gap);
-}
-
-.markdown h1,
-.markdown h2,
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6,
-.markdown p {
-  /* size */
-  margin: 0;
-}
-
-.markdown h5,
-.markdown h6 {
-  /* typography */
-  font-family: var(--font-h4-family);
-  font-size: var(--font-h4);
-  font-weight: var(--font-h4-weight);
-  line-height: var(--font-h4-line);
-  letter-spacing: var(--font-h4-letter-spacing);
-}
-
-.markdown ul,
-.markdown ol {
-  /* size */
-  display: flex;
-  flex-direction: column;
-  gap: var(--markdown-list-gap);
-  margin: 0;
-  padding-left: var(--markdown-list-padding);
-}
-
-.markdown ul {
-  /* border */
-  list-style: disc;
-}
-
-.markdown ol {
-  /* border */
-  list-style: decimal;
-}
-
-.markdown li {
-  /* size */
-  margin: 0;
-}
-
-.markdown li > ul,
-.markdown li > ol {
-  /* size */
-  margin-top: var(--markdown-list-gap);
-}
-
-.markdown blockquote {
-  /* color */
-  color: var(--color-text-note);
-
-  /* size */
-  margin: 0;
-  padding-left: var(--padding-container);
-
-  /* border */
-  border-left:
-    var(--markdown-border-width)
-    solid
-    var(--color-line);
-}
-
-.markdown img {
-  /* size */
-  display: block;
-  max-width: 100%;
-  height: auto;
-
-  /* border */
-  border-radius: var(--markdown-radius);
-}
-
-.markdown hr {
-  /* size */
-  margin: 0;
-
-  /* border */
-  border: 0;
-  border-top:
-    var(--markdown-border-width)
-    solid
-    var(--color-line);
-}
-
-.markdown code {
-  /* color */
-  background: var(--color-control);
-  color: var(--color-text-control);
-
-  /* typography */
-  font-family: monospace;
-  font-size: 0.9em;
-
-  /* size */
-  padding:
-    0
-    var(--markdown-code-padding-inline);
-
-  /* border */
-  border-radius: var(--markdown-radius);
-}
-
-.markdown pre {
-  /* color */
-  background: var(--color-control);
-  color: var(--color-text-control);
-
-  /* size */
-  margin: 0;
-  padding:
-    var(--markdown-code-padding-block)
-    var(--markdown-code-padding-inline);
-  overflow-x: auto;
-
-  /* border */
-  border-radius: var(--markdown-radius);
-}
-
-.markdown pre code {
-  /* color */
-  background: transparent;
-  color: inherit;
-
-  /* typography */
-  font-size: inherit;
-
-  /* size */
-  padding: 0;
-
-  /* border */
-  border-radius: 0;
-}
-
-.markdown table {
-  /* size */
-  width: 100%;
-
-  /* border */
-  border-collapse: collapse;
-}
-
-.markdown th,
-.markdown td {
-  /* color */
-  color: inherit;
-
-  /* typography */
-  text-align: left;
-  vertical-align: top;
-
-  /* size */
-  padding: var(--markdown-table-cell-padding);
-
-  /* border */
-  border:
-    var(--markdown-border-width)
-    solid
-    var(--color-line);
-}
-
-.markdown th {
-  /* typography */
-  font-weight: var(--font-body-weight);
-}
-
-.markdown input[type='checkbox'] {
-  /* size */
-  margin: 0;
-}
-
-.markdown--excerpt > p {
-  /* size */
-  margin: 0;
 }
 
 /* src/components/menu/menu.css */
@@ -6310,6 +6187,21 @@
   /* motion */
 }
 
+.layout-base__content > .panel + .panel {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  margin-top: var(--margin-container-item);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .layout-base__content--narrow {
   --layout-base-content-width: 720px;
 }
@@ -6471,6 +6363,21 @@
   /* motion */
 }
 
+.layout-sidebar__main > .panel + .panel {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  margin-top: var(--margin-container-item);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .layout-sidebar__side {
   /* color */
 

package/themes/base/desktop.css

@@ -40,19 +40,19 @@
   --font-body-bigger-family: PP Object Sans Variable;
   --font-body-bigger-letter-spacing: 0px;
   --font-body-bigger-line: 24px;
-  --font-body-bigger-weight: 300;
+  --font-body-bigger-weight: 312;
   --font-body-bigger-weight-accent: 573;
   --font-body-family: PP Object Sans Variable;
   --font-body-letter-spacing: 0px;
   --font-body-line: 24px;
-  --font-body-margin: 12px;
-  --font-body-weight: 400;
+  --font-body-margin: 20px;
+  --font-body-weight: 312;
   --font-body-weight-accent: 573;
   --font-control: var(--font-lead);
   --font-control-family: PP Object Sans Variable;
   --font-control-letter-spacing: 0px;
   --font-control-line: var(--font-lead-line);
-  --font-control-weight: 400;
+  --font-control-weight: 433;
   --font-h0: 150px;
   --font-h0-family: PP Object Sans Variable;
   --font-h0-letter-spacing: -0.04px;
@@ -83,19 +83,26 @@
   --font-h4-letter-spacing: 0px;
   --font-h4-line: 36px;
   --font-h4-margin: 12px;
-  --font-h4-weight: 400;
+  --font-h4-weight: 433;
   --font-lead: 24px;
   --font-lead-family: PP Object Sans Variable;
   --font-lead-letter-spacing: 0px;
   --font-lead-line: 32px;
   --font-lead-margin: 12px;
-  --font-lead-weight: 400;
+  --font-lead-weight: 433;
   --font-lead-weight-accent: 573;
+  --font-list: var(--font-body);
+  --font-list-family: var(--font-body-family);
+  --font-list-item-margin: 8px;
+  --font-list-line: var(--font-body-line);
+  --font-list-line-letter-spacing: var(--font-body-letter-spacing);
+  --font-list-margin: var(--font-body-margin);
+  --font-list-weight: var(--font-body-weight);
   --font-note: 16px;
   --font-note-family: PP Object Sans Variable;
   --font-note-letter-spacing: 0px;
   --font-note-line: 20px;
-  --font-note-weight: 300;
+  --font-note-weight: 312;
   --font-note-weight-accent: 573;
   --margin-attribute: 0px;
   --margin-bullet: 0px;
@@ -144,6 +151,11 @@
   --radius-control-circle: var(--radius-circle);
   --radius-flowchart: 30px;
   --radius-large: 84px;
+  --size-avatar-base: 45px;
+  --size-avatar-full: 512px;
+  --size-avatar-preview: 256px;
+  --size-border-style-base: 0px;
+  --size-border-style-dash: 16px;
   --size-border-width-base: 2px;
   --size-border-width-icon: 4px;
   --size-border-width-min: 1px;

package/themes/base/desktop.md

@@ -50,19 +50,19 @@
 | `font/body/bigger/family` | `string` | `PP Object Sans Variable` |
 | `font/body/bigger/letter/spacing` | `float` | `0` |
 | `font/body/bigger/line` | `float` | `24` |
-| `font/body/bigger/weight` | `float` | `300` |
+| `font/body/bigger/weight` | `float` | `312` |
 | `font/body/bigger/weight/accent` | `float` | `573` |
 | `font/body/family` | `string` | `PP Object Sans Variable` |
 | `font/body/letter/spacing` | `float` | `0` |
 | `font/body/line` | `float` | `24` |
-| `font/body/margin` | `float` | `12` |
-| `font/body/weight` | `float` | `400` |
+| `font/body/margin` | `float` | `20` |
+| `font/body/weight` | `float` | `312` |
 | `font/body/weight/accent` | `float` | `573` |
 | `font/control` | `float` | `24` |
 | `font/control/family` | `string` | `PP Object Sans Variable` |
 | `font/control/letter/spacing` | `float` | `0` |
 | `font/control/line` | `float` | `32` |
-| `font/control/weight` | `float` | `400` |
+| `font/control/weight` | `float` | `433` |
 | `font/h0` | `float` | `150` |
 | `font/h0/family` | `string` | `PP Object Sans Variable` |
 | `font/h0/letter/spacing` | `float` | `-0.04` |
@@ -93,19 +93,26 @@
 | `font/h4/letter/spacing` | `float` | `0` |
 | `font/h4/line` | `float` | `36` |
 | `font/h4/margin` | `float` | `12` |
-| `font/h4/weight` | `float` | `400` |
+| `font/h4/weight` | `float` | `433` |
 | `font/lead` | `float` | `24` |
 | `font/lead/family` | `string` | `PP Object Sans Variable` |
 | `font/lead/letter/spacing` | `float` | `0` |
 | `font/lead/line` | `float` | `32` |
 | `font/lead/margin` | `float` | `12` |
-| `font/lead/weight` | `float` | `400` |
+| `font/lead/weight` | `float` | `433` |
 | `font/lead/weight/accent` | `float` | `573` |
+| `font/list` | `float` | `20` |
+| `font/list/family` | `string` | `PP Object Sans Variable` |
+| `font/list/item/margin` | `float` | `8` |
+| `font/list/line` | `float` | `24` |
+| `font/list/line/letter/spacing` | `float` | `0` |
+| `font/list/margin` | `float` | `20` |
+| `font/list/weight` | `float` | `312` |
 | `font/note` | `float` | `16` |
 | `font/note/family` | `string` | `PP Object Sans Variable` |
 | `font/note/letter/spacing` | `float` | `0` |
 | `font/note/line` | `float` | `20` |
-| `font/note/weight` | `float` | `300` |
+| `font/note/weight` | `float` | `312` |
 | `font/note/weight/accent` | `float` | `573` |
 
 ## margin
@@ -179,6 +186,11 @@
 
 | Token | Type | Value |
 | --- | --- | --- |
+| `size/avatar/base` | `float` | `45` |
+| `size/avatar/full` | `float` | `512` |
+| `size/avatar/preview` | `float` | `256` |
+| `size/border/style/base` | `float` | `0` |
+| `size/border/style/dash` | `float` | `16` |
 | `size/border/width/base` | `float` | `2` |
 | `size/border/width/icon` | `float` | `4` |
 | `size/border/width/min` | `float` | `1` |

package/themes/base/desktop.scoped.css

@@ -40,19 +40,19 @@
   --font-body-bigger-family: PP Object Sans Variable;
   --font-body-bigger-letter-spacing: 0px;
   --font-body-bigger-line: 24px;
-  --font-body-bigger-weight: 300;
+  --font-body-bigger-weight: 312;
   --font-body-bigger-weight-accent: 573;
   --font-body-family: PP Object Sans Variable;
   --font-body-letter-spacing: 0px;
   --font-body-line: 24px;
-  --font-body-margin: 12px;
-  --font-body-weight: 400;
+  --font-body-margin: 20px;
+  --font-body-weight: 312;
   --font-body-weight-accent: 573;
   --font-control: var(--font-lead);
   --font-control-family: PP Object Sans Variable;
   --font-control-letter-spacing: 0px;
   --font-control-line: var(--font-lead-line);
-  --font-control-weight: 400;
+  --font-control-weight: 433;
   --font-h0: 150px;
   --font-h0-family: PP Object Sans Variable;
   --font-h0-letter-spacing: -0.04px;
@@ -83,19 +83,26 @@
   --font-h4-letter-spacing: 0px;
   --font-h4-line: 36px;
   --font-h4-margin: 12px;
-  --font-h4-weight: 400;
+  --font-h4-weight: 433;
   --font-lead: 24px;
   --font-lead-family: PP Object Sans Variable;
   --font-lead-letter-spacing: 0px;
   --font-lead-line: 32px;
   --font-lead-margin: 12px;
-  --font-lead-weight: 400;
+  --font-lead-weight: 433;
   --font-lead-weight-accent: 573;
+  --font-list: var(--font-body);
+  --font-list-family: var(--font-body-family);
+  --font-list-item-margin: 8px;
+  --font-list-line: var(--font-body-line);
+  --font-list-line-letter-spacing: var(--font-body-letter-spacing);
+  --font-list-margin: var(--font-body-margin);
+  --font-list-weight: var(--font-body-weight);
   --font-note: 16px;
   --font-note-family: PP Object Sans Variable;
   --font-note-letter-spacing: 0px;
   --font-note-line: 20px;
-  --font-note-weight: 300;
+  --font-note-weight: 312;
   --font-note-weight-accent: 573;
   --margin-attribute: 0px;
   --margin-bullet: 0px;
@@ -144,6 +151,11 @@
   --radius-control-circle: var(--radius-circle);
   --radius-flowchart: 30px;
   --radius-large: 84px;
+  --size-avatar-base: 45px;
+  --size-avatar-full: 512px;
+  --size-avatar-preview: 256px;
+  --size-border-style-base: 0px;
+  --size-border-style-dash: 16px;
   --size-border-width-base: 2px;
   --size-border-width-icon: 4px;
   --size-border-width-min: 1px;

package/themes/base/diagram.css

@@ -40,19 +40,19 @@
   --font-body-bigger-family: PP Object Sans Variable;
   --font-body-bigger-letter-spacing: 0px;
   --font-body-bigger-line: 32px;
-  --font-body-bigger-weight: 300;
+  --font-body-bigger-weight: 312;
   --font-body-bigger-weight-accent: 573;
   --font-body-family: PP Object Sans Variable;
   --font-body-letter-spacing: 0px;
   --font-body-line: 24px;
   --font-body-margin: 8px;
-  --font-body-weight: 400;
+  --font-body-weight: 312;
   --font-body-weight-accent: 573;
   --font-control: var(--font-lead);
   --font-control-family: PP Object Sans Variable;
   --font-control-letter-spacing: 0px;
   --font-control-line: var(--font-lead-line);
-  --font-control-weight: 400;
+  --font-control-weight: 433;
   --font-h0: 46px;
   --font-h0-family: PP Object Sans Variable;
   --font-h0-letter-spacing: -0.04px;
@@ -83,19 +83,26 @@
   --font-h4-letter-spacing: 0px;
   --font-h4-line: 24px;
   --font-h4-margin: 12px;
-  --font-h4-weight: 400;
+  --font-h4-weight: 433;
   --font-lead: 20px;
   --font-lead-family: PP Object Sans Variable;
   --font-lead-letter-spacing: 0px;
   --font-lead-line: 24px;
   --font-lead-margin: 12px;
-  --font-lead-weight: 400;
+  --font-lead-weight: 433;
   --font-lead-weight-accent: 573;
+  --font-list: var(--font-body);
+  --font-list-family: var(--font-body-family);
+  --font-list-item-margin: 8px;
+  --font-list-line: var(--font-body-line);
+  --font-list-line-letter-spacing: var(--font-body-letter-spacing);
+  --font-list-margin: var(--font-body-margin);
+  --font-list-weight: var(--font-body-weight);
   --font-note: 16px;
   --font-note-family: PP Object Sans Variable;
   --font-note-letter-spacing: 0px;
   --font-note-line: 20px;
-  --font-note-weight: 300;
+  --font-note-weight: 312;
   --font-note-weight-accent: 573;
   --margin-attribute: 0px;
   --margin-bullet: 0px;
@@ -144,6 +151,11 @@
   --radius-control-circle: var(--radius-circle);
   --radius-flowchart: 30px;
   --radius-large: 84px;
+  --size-avatar-base: 45px;
+  --size-avatar-full: 512px;
+  --size-avatar-preview: 256px;
+  --size-border-style-base: 0px;
+  --size-border-style-dash: 16px;
   --size-border-width-base: 2px;
   --size-border-width-icon: 4px;
   --size-border-width-min: 1px;