@pg-labs-incubator/cobweb 0.0.0-stage → 0.0.2

package/src/surface/surface.yaml

@@ -0,0 +1,483 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Surface
+description: >
+  Material 3 surface-family roles: surfaces, dividers, dialogs, bottom and side sheets, scaffolds
+  and pane scaffolds. Lists and menus also read their roles from this attribute. Component roles
+  are not inherited; consumers redeclare color defaults on the element which reads them.
+roles:
+  color:
+    description: Surface container color.
+    type: color
+    value: $cw-Color-surface-container
+  onColor:
+    description: Color used for content on a surface.
+    type: color
+    value: $cw-Color-surface-onFill
+  shape:
+    description: Surface corner shape.
+    type: length
+    value: $cw-CornerRadius-medium
+  outlineColor:
+    description: Optional surface outline color.
+    type: color
+    value: $cw-Color-outline
+  outlineThickness:
+    description: Optional surface outline thickness.
+    type: length
+    value: 0px
+  selectedColor:
+    description: Selected surface container color.
+    type: color
+    value: $cw-Color-secondary-container
+  selectedOnColor:
+    description: Color used for content on a selected surface.
+    type: color
+    value: $cw-Color-secondary-onContainer
+  disabledOpacity:
+    description: >
+      Opacity of a disabled surface, Material's disabled content opacity applied to the whole
+      container, since a generic surface has no dedicated disabled container token.
+    type: number
+    value: 0.38
+  dividerColor:
+    description: Divider color, `DividerTokens.Color`.
+    type: color
+    value: $cw-Color-outlineVariant
+  dividerThickness:
+    description: Divider thickness, `DividerTokens.Thickness`.
+    type: length
+    value: 1px
+  dividerInset:
+    description: Inset of an inset or middle-inset divider from its container edge.
+    type: length
+    value: 16px
+  listItemHeight:
+    description: One-line list item minimum height.
+    type: length
+    value: 56px
+  listItemHeightDense:
+    description: Dense list item minimum height.
+    type: length
+    value: 48px
+  listItemTwoLineHeight:
+    description: Two-line list item minimum height (`ListTokens.ItemTwoLineContainerHeight`).
+    type: length
+    value: 72px
+  listItemThreeLineHeight:
+    description: Three-line list item minimum height (`ListTokens.ItemThreeLineContainerHeight`).
+    type: length
+    value: 88px
+  listItemShape:
+    description: >
+      Resting list item corner shape of baseline lists (`ListTokens.ItemContainerShape`), or of the
+      `expressive` theme (`ListTokens.ItemContainerExpressiveShape`). Standard and segmented lists
+      use the Expressive item shapes.
+    type: length
+    value: $cw-CornerRadius-none
+  listItemSelectedColor:
+    description: Selected list item container color (`ListTokens.ItemSelectedContainerColor`).
+    type: color
+    value: $cw-Color-secondary-container
+  listItemColor:
+    description: >
+      Container color of standard list items (`ListTokens.ItemContainerColor`). Items of baseline
+      lists have no container color of their own, so that they take the color of their surface.
+    type: color
+    value: $cw-Color-surface-fill
+  listItemSegmentedColor:
+    description: Container color of segmented list items (`ListTokens.ItemSegmentedContainerColor`).
+    type: color
+    value: $cw-Color-surface-fill
+  listItemLabelColor:
+    description: List item headline color (`ListTokens.ItemLabelTextColor`).
+    type: color
+    value: $cw-Color-surface-onFill
+  listItemSupportingColor:
+    description: >
+      Color of list item supporting text, overline, trailing supporting text, and leading and
+      trailing icons (`ListTokens.ItemSupportingTextColor` and siblings).
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  listItemSelectedContentColor:
+    description: >
+      Color of all content of a selected list item (`ListTokens.ItemSelectedLabelTextColor` and
+      siblings).
+    type: color
+    value: $cw-Color-secondary-onContainer
+  listItemExpressiveSelectedColor:
+    description: >
+      Selected container color of standard and segmented list items, after the Material 3
+      Expressive list specification, which takes precedence over the secondary container of
+      AndroidX.
+    type: color
+    value: $cw-Color-primary-container
+  listItemExpressiveSelectedContentColor:
+    description: Color of all content of a selected standard or segmented list item.
+    type: color
+    value: $cw-Color-primary-onContainer
+  listItemDisabledOpacity:
+    description: Opacity of the content of a disabled list item (`ListTokens.ItemDisabled*Opacity`).
+    type: number
+    value: 0.38
+  listItemAvatarColor:
+    description: Leading avatar container color (`ListTokens.ItemLeadingAvatarColor`).
+    type: color
+    value: $cw-Color-primary-container
+  listItemAvatarLabelColor:
+    description: Leading avatar label color (`ListTokens.ItemLeadingAvatarLabelColor`).
+    type: color
+    value: $cw-Color-primary-onContainer
+  listItemDraggedColor:
+    description: Container color of a dragged list item (`ReorderListTokens.ItemContainerColor`).
+    type: color
+    value: $cw-Color-tertiary-container
+  listItemDraggedContentColor:
+    description: Content color of a dragged list item (`ReorderListTokens.ItemLabelTextColor`).
+    type: color
+    value: $cw-Color-tertiary-onContainer
+  listItemDraggedElevation:
+    description: Elevation of a dragged list item (`ListTokens.ItemDraggedContainerElevation`).
+    type: integer
+    value: $cw-Elevation-level-4
+  listItemDropZoneColor:
+    description: >
+      Color of the position a dragged list item would be dropped at
+      (`ReorderListTokens.ItemDropZoneColor`).
+    type: color
+    value: $cw-Color-surface-containerLow
+  dialogScrimColor:
+    description: Scrim color behind modal dialogs and sheets, `ScrimTokens.ContainerColor`.
+    type: color
+    value: $cw-Color-scrim
+  dialogScrimOpacity:
+    description: Opacity of the scrim color, `ScrimTokens.ContainerOpacity`.
+    type: number
+    value: 0.32
+  dialogShape:
+    description: Dialog corner shape, `DialogTokens.ContainerShape`.
+    type: length
+    value: $cw-CornerRadius-xlarge
+  dialogColor:
+    description: Dialog container color, `DialogTokens.ContainerColor`.
+    type: color
+    value: $cw-Color-surface-containerHigh
+  dialogElevation:
+    description: Dialog container elevation, `DialogTokens.ContainerElevation`.
+    type: integer
+    value: $cw-Elevation-level-3
+  dialogMinWidth:
+    description: Minimum dialog width, Compose `DialogMinWidth`.
+    type: length
+    value: 280px
+  dialogMaxWidth:
+    description: Maximum dialog width, Compose `DialogMaxWidth`.
+    type: length
+    value: 560px
+  dialogMaxHeight:
+    description: Maximum height of a basic (alert) dialog, as material-web dialogs.
+    type: length
+    value: 560px
+  dialogMargin:
+    description: Minimum space between a dialog and the viewport edges, as material-web dialogs.
+    type: length
+    value: 24px
+  dialogPadding:
+    description: Dialog container padding, Compose `AlertDialogDefaults` dialog padding.
+    type: length
+    value: 24px
+  dialogSpacing:
+    description: Space below a dialog's hero icon and headline, Compose icon and title padding.
+    type: length
+    value: 16px
+  dialogIconColor:
+    description: Dialog hero icon color, `DialogTokens.IconColor`.
+    type: color
+    value: $cw-Color-secondary-fill
+  dialogIconSize:
+    description: Dialog hero icon size, `DialogTokens.IconSize`.
+    type: length
+    value: 24px
+  dialogHeadlineColor:
+    description: Dialog headline color, `DialogTokens.HeadlineColor`.
+    type: color
+    value: $cw-Color-surface-onFill
+  dialogSupportingTextColor:
+    description: Dialog supporting text color, `DialogTokens.SupportingTextColor`.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  fullScreenDialogColor:
+    description: Full-screen dialog container color, `md.comp.full-screen-dialog.container.color`.
+    type: color
+    value: $cw-Color-surface-fill
+  fullScreenDialogHeaderHeight:
+    description: >
+      Full-screen dialog header height, `md.comp.full-screen-dialog.header.container.height`.
+    type: length
+    value: 56px
+  fullScreenDialogHeaderScrolledColor:
+    description: >
+      Full-screen dialog header color while its content is scrolled,
+      `md.comp.full-screen-dialog.header.on-scroll.container.color`.
+    type: color
+    value: $cw-Color-surface-container
+  fullScreenDialogHeaderScrolledElevation:
+    description: >
+      Full-screen dialog header elevation while its content is scrolled,
+      `md.comp.full-screen-dialog.header.on-scroll.container.elevation`.
+    type: integer
+    value: $cw-Elevation-level-2
+  menuColor:
+    description: Menu container color.
+    type: color
+    value: $cw-Color-surface-container
+  menuShape:
+    description: Menu corner shape.
+    type: length
+    value: $cw-CornerRadius-xsmall
+  menuElevation:
+    description: >
+      Elevation of a menu container, and of each group of an Expressive menu
+      (`MenuTokens.ContainerElevation`, `SegmentedMenuTokens.ContainerElevation`).
+    type: integer
+    value: $cw-Elevation-level-2
+  menuContentColor:
+    description: Menu item label color (`ListTokens.ItemLabelTextColor`, used by Compose menus).
+    type: color
+    value: $cw-Color-surface-onFill
+  menuSupportingColor:
+    description: >
+      Color of menu item icons, supporting text, and trailing text
+      (`ListTokens.ItemLeadingIconColor`,
+      `StandardMenuTokens.ItemSupportingTextColor`).
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  menuSelectedColor:
+    description: Checked menu item container color (`MenuTokens.ListItemSelectedContainerColor`).
+    type: color
+    value: $cw-Color-secondary-container
+  menuSelectedContentColor:
+    description: Checked menu item content color (`MenuTokens.ListItemSelectedLabelTextColor`).
+    type: color
+    value: $cw-Color-secondary-onContainer
+  menuDisabledOpacity:
+    description: >
+      Opacity of the content of a disabled menu item, and of the container of a disabled checked
+      item (`StandardMenuTokens.ItemDisabledLabelTextOpacity`).
+    type: number
+    value: 0.38
+  menuItemHeight:
+    description: Menu item minimum height (Compose `Menu.kt` `MenuListItemContainerHeight`).
+    type: length
+    value: 48px
+  menuItemMinWidth:
+    description: Menu item minimum width (Compose `Menu.kt` `DropdownMenuItemDefaultMinWidth`).
+    type: length
+    value: 112px
+  menuItemMaxWidth:
+    description: Menu item maximum width (Compose `Menu.kt` `DropdownMenuItemDefaultMaxWidth`).
+    type: length
+    value: 280px
+  menuGroupColor:
+    description: >
+      Container color of an Expressive menu group in the standard color style
+      (`StandardMenuTokens.ContainerColor`).
+    type: color
+    value: $cw-Color-surface-containerLow
+  menuGroupSelectedColor:
+    description: >
+      Checked item container color of an Expressive menu in the standard color style
+      (`StandardMenuTokens.ItemSelectedContainerColor`).
+    type: color
+    value: $cw-Color-tertiary-container
+  menuGroupSelectedContentColor:
+    description: >
+      Checked item content color of an Expressive menu in the standard color style
+      (`StandardMenuTokens.ItemSelectedLabelTextColor`).
+    type: color
+    value: $cw-Color-tertiary-onContainer
+  menuGroupShape:
+    description: >
+      Outer corner shape of Expressive menu groups: all corners of a single group, and the outer
+      corners of the first and last groups (`SegmentedMenuTokens.ContainerShape`).
+    type: length
+    value: $cw-CornerRadius-large
+  menuGroupInnerShape:
+    description: >
+      Inner corner shape of Expressive menu groups, which is also the shape of a group whose
+      submenu is open (`SegmentedMenuTokens.GroupShape`,
+      `SegmentedMenuTokens.InactiveContainerShape`).
+    type: length
+    value: $cw-CornerRadius-small
+  menuGroupItemHeight:
+    description: >
+      Minimum height of an Expressive menu item. This retains the accessible 48px target of other
+      menu items, instead of the 44dp of `SegmentedMenuTokens.Item` (`Documentation/material3.md`).
+    type: length
+    value: 48px
+  menuGroupIconSize:
+    description: >
+      Icon size of an Expressive menu item (`SegmentedMenuTokens.ItemLeadingIconSize`,
+      `SegmentedMenuTokens.ItemTrailingIconSize`).
+    type: length
+    value: 20px
+  menuGroupItemShape:
+    description: Corner shape of an Expressive menu item (`SegmentedMenuTokens.ItemShape`).
+    type: length
+    value: $cw-CornerRadius-xsmall
+  menuGroupItemOuterShape:
+    description: >
+      Outer corner shape of the first and last items of an Expressive menu group
+      (`SegmentedMenuTokens.ItemFirstChildShape`, `SegmentedMenuTokens.ItemLastChildShape`).
+    type: length
+    value: $cw-CornerRadius-medium
+  menuGroupItemSelectedShape:
+    description: >
+      Corner shape of a checked Expressive menu item (`SegmentedMenuTokens.ItemSelectedShape`).
+    type: length
+    value: $cw-CornerRadius-medium
+  menuVibrantColor:
+    description: >
+      Container color of an Expressive menu group in the vibrant color style
+      (`VibrantMenuTokens.ContainerColor`).
+    type: color
+    value: $cw-Color-tertiary-container
+  menuVibrantContentColor:
+    description: >
+      Content color of an Expressive menu in the vibrant color style
+      (`VibrantMenuTokens.ItemLabelTextColor` and siblings).
+    type: color
+    value: $cw-Color-tertiary-onContainer
+  menuVibrantActiveIconColor:
+    description: >
+      Icon color of a hovered, focused, or pressed item of an Expressive menu in the vibrant color
+      style (`VibrantMenuTokens.ItemHoveredLeadingIconColor` and siblings).
+    type: color
+    value: $cw-Color-tertiary-fill
+  menuVibrantSelectedColor:
+    description: >
+      Checked item container color of an Expressive menu in the vibrant color style
+      (`VibrantMenuTokens.ItemSelectedContainerColor`).
+    type: color
+    value: $cw-Color-tertiary-fill
+  menuVibrantSelectedContentColor:
+    description: >
+      Checked item content color of an Expressive menu in the vibrant color style
+      (`VibrantMenuTokens.ItemSelectedLabelTextColor`).
+    type: color
+    value: $cw-Color-tertiary-onFill
+  sheetColor:
+    description: Bottom sheet container color, `SheetBottomTokens.DockedContainerColor`.
+    type: color
+    value: $cw-Color-surface-containerLow
+  sheetShape:
+    description: Bottom sheet top corner shape, `SheetBottomTokens.DockedContainerShape`.
+    type: length
+    value: $cw-CornerRadius-xlarge
+  sheetPeekHeight:
+    description: Standard bottom sheet peek height, Compose `BottomSheetDefaults.SheetPeekHeight`.
+    type: length
+    value: 56px
+  sheetMaxWidth:
+    description: Maximum bottom sheet width, Compose `BottomSheetDefaults.SheetMaxWidth`.
+    type: length
+    value: 640px
+  sheetElevation:
+    description: Bottom sheet elevation, `SheetBottomTokens.DockedStandardContainerElevation`.
+    type: integer
+    value: $cw-Elevation-level-1
+  dragHandleColor:
+    description: Bottom sheet drag handle color, `SheetBottomTokens.DockedDragHandleColor`.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  dragHandleWidth:
+    description: Bottom sheet drag handle width, `SheetBottomTokens.DockedDragHandleWidth`.
+    type: length
+    value: 32px
+  dragHandleHeight:
+    description: Bottom sheet drag handle height, `SheetBottomTokens.DockedDragHandleHeight`.
+    type: length
+    value: 4px
+  sideSheetWidth:
+    description: Side sheet width, `md.comp.sheet.side.docked.container.width`.
+    type: length
+    value: 256px
+  sideSheetColor:
+    description: >
+      Standard side sheet container color,
+      `md.comp.sheet.side.docked.standard.container.color`.
+    type: color
+    value: $cw-Color-surface-fill
+  sideSheetModalColor:
+    description: >
+      Modal side sheet container color, `md.comp.sheet.side.docked.modal.container.color`.
+    type: color
+    value: $cw-Color-surface-containerLow
+  sideSheetModalElevation:
+    description: >
+      Modal side sheet container elevation,
+      `md.comp.sheet.side.docked.modal.container.elevation`.
+    type: integer
+    value: $cw-Elevation-level-1
+  sideSheetShape:
+    description: >
+      Corner radius of a modal side sheet's inner corners and of every detached side sheet
+      corner, `md.comp.sheet.side.docked.modal.container.shape` and
+      `md.comp.sheet.side.detached.container.shape`.
+    type: length
+    value: $cw-CornerRadius-large
+  sideSheetDetachedMargin:
+    description: Margin around a detached side sheet, MDC `m3_side_sheet_margin_detached`.
+    type: length
+    value: 16px
+  sideSheetHeadlineColor:
+    description: Side sheet headline color, `md.comp.sheet.side.docked.headline.color`.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  sideSheetDividerColor:
+    description: Standard side sheet divider color, `md.comp.sheet.side.docked.divider.color`.
+    type: color
+    value: $cw-Color-outline
+  scaffoldFabSpacing:
+    description: >
+      Space between a scaffold's floating action button and its edges, Compose `FabSpacing`.
+    type: length
+    value: 16px
+  paneSpacing:
+    description: >
+      Space between adjacent panes of a pane scaffold, Compose
+      `PaneScaffoldDirective.horizontalPartitionSpacerSize`.
+    type: length
+    value: 24px
+  paneMargin:
+    description: >
+      Horizontal margin of a pane scaffold in medium and wider window size classes. Compose models
+      the margin with the partition spacer size.
+    type: length
+    value: 24px
+  paneMarginCompact:
+    description: Horizontal margin of a pane scaffold in the compact window size class.
+    type: length
+    value: 16px
+  panePreferredWidth:
+    description: >
+      Preferred width of a list, supporting or extra pane, Compose
+      `PaneScaffoldDirective.DefaultPreferredWidth`.
+    type: length
+    value: 360px
+  panePreferredWidthExtraLarge:
+    description: >
+      Preferred pane width in the extra-large window size class, Compose
+      `PaneScaffoldDirective.DefaultPreferredWidthXL`.
+    type: length
+    value: 412px
+  focusIndicatorColor:
+    description: Focus indicator color.
+    type: color
+    value: $cw-Color-secondary-fill
+themes:
+  expressive:
+    description: Expressive surface values with a larger default surface shape.
+    values:
+      shape: $cw-CornerRadius-large
+      listItemShape: $cw-CornerRadius-xsmall

package/src/text/line-height.yaml

@@ -0,0 +1,144 @@
+# SPDX-License-Identifier: MPL-2.0
+class: system
+attribute: LineHeight
+description: >
+  Line heights of the `cw-Typescale` roles, by category. Default values are the small category,
+  Material's type scale line heights, which suit English-like scripts. The `medium`, `large`, and
+  `extraLarge` themes are taller categories for scripts whose glyphs extend further above or
+  below the baseline. Categories are a Cobweb web adaptation, selected per language by
+  `Typography` scopes, and apply equally to baseline and emphasized styles.
+roles:
+  display:
+    description: Line heights of display text.
+    roles:
+      large:
+        description: Line height of large display text.
+        type: length
+        value: 4rem
+      medium:
+        description: Line height of medium display text.
+        type: length
+        value: 3.25rem
+      small:
+        description: Line height of small display text.
+        type: length
+        value: 2.75rem
+  headline:
+    description: Line heights of headline text.
+    roles:
+      large:
+        description: Line height of large headline text.
+        type: length
+        value: 2.5rem
+      medium:
+        description: Line height of medium headline text.
+        type: length
+        value: 2.25rem
+      small:
+        description: Line height of small headline text.
+        type: length
+        value: 2rem
+  title:
+    description: Line heights of title text.
+    roles:
+      large:
+        description: Line height of large title text.
+        type: length
+        value: 1.75rem
+      medium:
+        description: Line height of medium title text.
+        type: length
+        value: 1.5rem
+      small:
+        description: Line height of small title text.
+        type: length
+        value: 1.25rem
+  body:
+    description: Line heights of body text.
+    roles:
+      large:
+        description: Line height of large body text.
+        type: length
+        value: 1.5rem
+      medium:
+        description: Line height of medium body text.
+        type: length
+        value: 1.25rem
+      small:
+        description: Line height of small body text.
+        type: length
+        value: 1rem
+  label:
+    description: Line heights of label text.
+    roles:
+      large:
+        description: Line height of large label text.
+        type: length
+        value: 1.25rem
+      medium:
+        description: Line height of medium label text.
+        type: length
+        value: 1rem
+      small:
+        description: Line height of small label text.
+        type: length
+        value: 1rem
+themes:
+  medium:
+    description: >
+      Medium category, for dense and tall scripts, such as Arabic, Bengali, Devanagari, Han,
+      Hangul, Japanese kana, Tamil, and Thai, and for Vietnamese.
+    values:
+      display-large: 4.5625rem
+      display-medium: 3.5rem
+      display-small: 2.9375rem
+      headline-large: 2.625rem
+      headline-medium: 2.375rem
+      headline-small: 2.1875rem
+      title-large: 1.9375rem
+      title-medium: 1.6875rem
+      title-small: 1.4375rem
+      body-large: 1.6875rem
+      body-medium: 1.4375rem
+      body-small: 1.125rem
+      label-large: 1.4375rem
+      label-medium: 1.125rem
+      label-small: 1.125rem
+  large:
+    description: Large category, for Burmese and Telugu.
+    values:
+      display-large: 5.5625rem
+      display-medium: 4.4375rem
+      display-small: 3.5625rem
+      headline-large: 3.125rem
+      headline-medium: 2.8125rem
+      headline-small: 2.5625rem
+      title-large: 2.25rem
+      title-medium: 1.9375rem
+      title-small: 1.625rem
+      body-large: 1.9375rem
+      body-medium: 1.625rem
+      body-small: 1.3125rem
+      label-large: 1.625rem
+      label-medium: 1.3125rem
+      label-small: 1.3125rem
+  extraLarge:
+    description: >
+      Extra large category, for script styles which a language tag does not identify, such as
+      Nastaliq.
+    values:
+      display-large: 7.5rem
+      display-medium: 6.1875rem
+      display-small: 5rem
+      headline-large: 4.6875rem
+      headline-medium: 4.125rem
+      headline-small: 3.6875rem
+      title-large: 3.3125rem
+      title-medium: 2.625rem
+      title-small: 2.25rem
+      body-large: 2.5625rem
+      body-medium: 2.1875rem
+      body-small: 1.875rem
+      label-large: 2.25rem
+      label-medium: 1.875rem
+      label-small: 1.8125rem

package/src/text/typeface.yaml

@@ -0,0 +1,31 @@
+# SPDX-License-Identifier: MPL-2.0
+class: reference
+attribute: Typeface
+description: >
+  Reference roles controlling typeface. These roles are used by other attributes, primarily
+  `Typescale`, for applying a consistent typeface across a user-interface design.
+
+  Cobweb does not bundle fonts. Applications load the fonts named by the font roles themselves,
+  for example with `@font-face` rules; until a named font is available, text renders with the
+  next family of the list, ending with a generic family.
+roles:
+  brandFont:
+    description: Font families used for branding text, in order of preference.
+    type: font-family
+    value: Roboto, system-ui, sans-serif
+  plainFont:
+    description: Font families used for normal text, in order of preference.
+    type: font-family
+    value: Roboto, system-ui, sans-serif
+  boldWeight:
+    description: Weight applied to text which requires most emphasis.
+    type: number
+    value: 700
+  mediumWeight:
+    description: Weight applied to text which requires standard emphasis.
+    type: number
+    value: 500
+  regularWeight:
+    description: Weight applied to regular text.
+    type: number
+    value: 400