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

package/src/navigation/app-bar.yaml

@@ -0,0 +1,147 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: AppBar
+description: >
+  Top and bottom app-bar roles (`AppBarTokens.kt`, `AppBarSmallTokens.kt`, `AppBarMediumTokens.kt`,
+  `AppBarLargeTokens.kt`, `AppBarMediumFlexibleTokens.kt`, `AppBarLargeFlexibleTokens.kt`, and
+  `BottomAppBarTokens.kt`). The `top` roles apply to every top app bar; the `medium`, `large`,
+  `mediumFlexible`, and `largeFlexible` roles size the expanded row of the two-row variants.
+roles:
+  top:
+    description: Roles of every top app bar, and of the top row of two-row bars.
+    roles:
+      containerColor:
+        description: Container color.
+        type: color
+        value: $cw-Color-surface-fill
+      scrolledContainerColor:
+        description: >
+          Container color while content scrolls under a single-row bar, which a two-row bar
+          approaches as it collapses.
+        type: color
+        value: $cw-Color-surface-container
+      titleColor:
+        description: Title color.
+        type: color
+        value: $cw-Color-surface-onFill
+      subtitleColor:
+        description: Subtitle color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      navigationIconColor:
+        description: Color of the leading navigation icon.
+        type: color
+        value: $cw-Color-surface-onFill
+      actionIconColor:
+        description: Color of the trailing action icons.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      height:
+        description: Height of a single-row bar, and of the top row of a two-row bar.
+        type: length
+        value: 64px
+      leadingSpace:
+        description: Space between the start of the bar and the navigation icon.
+        type: length
+        value: 4px
+      trailingSpace:
+        description: Space between the actions, or the avatar, and the end of the bar.
+        type: length
+        value: 4px
+      iconButtonSpace:
+        description: Space between action icon buttons.
+        type: length
+        value: 0px
+      avatarSize:
+        description: Size of the trailing avatar, centered in a 48px target.
+        type: length
+        value: 32px
+  medium:
+    description: Roles of medium top app bars.
+    roles:
+      height:
+        description: Expanded height.
+        type: length
+        value: 112px
+      titleBaselineSpace:
+        description: >
+          Space between the last baseline of the expanded title, or subtitle, and the bottom of the
+          bar (Compose `MediumTitleBottomPadding`).
+        type: length
+        value: 24px
+  large:
+    description: Roles of large top app bars.
+    roles:
+      height:
+        description: Expanded height.
+        type: length
+        value: 152px
+      titleBaselineSpace:
+        description: >
+          Space between the last baseline of the expanded title, or subtitle, and the bottom of the
+          bar (Compose `LargeTitleBottomPadding`).
+        type: length
+        value: 28px
+  mediumFlexible:
+    description: Roles of medium flexible top app bars.
+    roles:
+      height:
+        description: Expanded height without a subtitle.
+        type: length
+        value: 112px
+      subtitledHeight:
+        description: Expanded height with a subtitle.
+        type: length
+        value: 136px
+      titleBaselineSpace:
+        description: >
+          Space between the last baseline of the expanded title, or subtitle, and the bottom of the
+          bar (Compose `MediumTitleBottomPadding`).
+        type: length
+        value: 24px
+  largeFlexible:
+    description: Roles of large flexible top app bars.
+    roles:
+      height:
+        description: Expanded height without a subtitle.
+        type: length
+        value: 120px
+      subtitledHeight:
+        description: Expanded height with a subtitle.
+        type: length
+        value: 152px
+      titleBaselineSpace:
+        description: >
+          Space between the last baseline of the expanded title, or subtitle, and the bottom of the
+          bar (Compose `LargeTitleBottomPadding`).
+        type: length
+        value: 28px
+  bottom:
+    description: Roles of bottom app bars.
+    roles:
+      containerColor:
+        description: Container color.
+        type: color
+        value: $cw-Color-surface-container
+      contentColor:
+        description: Color of content within the container.
+        type: color
+        value: $cw-Color-surface-onFill
+      height:
+        description: Container height.
+        type: length
+        value: 80px
+      topSpace:
+        description: >
+          Space above the actions and the floating action button (Compose `BottomAppBar`).
+        type: length
+        value: 4px
+      leadingSpace:
+        description: Space between the start of the bar and the actions.
+        type: length
+        value: 4px
+      trailingSpace:
+        description: >
+          Space between the floating action button, or the actions, and the end of the bar.
+        type: length
+        value: 4px

package/src/navigation/navigation.yaml

@@ -0,0 +1,339 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Navigation
+description: >
+  Navigation bar, navigation rail, navigation drawer, and destination roles. Values follow the
+  Material 3 navigation tokens (`NavigationBarTokens`, `NavigationBarVerticalItemTokens`,
+  `NavigationBarHorizontalItemTokens`, `NavigationRailCollapsedTokens`,
+  `NavigationRailExpandedTokens`, `NavigationRail*ItemTokens`, `NavigationRailColorTokens`,
+  `NavigationDrawerTokens`, and `ScrimTokens`), and the layouts of the Compose `NavigationBar`,
+  `ShortNavigationBar`, `WideNavigationRail`, and `NavigationDrawer` components.
+
+  Roles are not inherited. Assign a role on the element which consumes it: the bar or rail root
+  for `bar` and `rail` roles, the modal rail surface for `modal` roles, the drawer root for
+  `drawer` roles, and the destination for `item` roles.
+roles:
+  bar:
+    description: Navigation bar roles.
+    roles:
+      containerColor:
+        description: Container color (`NavigationBarTokens.ContainerColor`).
+        type: color
+        value: $cw-Color-surface-container
+      height:
+        description: >
+          Height of a `NavigationBar` with top icons (`NavigationBarTokens.TallContainerHeight`).
+        type: length
+        value: 80px
+      shortHeight:
+        description: >
+          Height of a `ShortNavigationBar`, and of a bar with start icons
+          (`NavigationBarTokens.ContainerHeight`).
+        type: length
+        value: 64px
+      itemSpacing:
+        description: >
+          Space between the destinations of a `NavigationBar` (`NavigationBar.kt`
+          `NavigationBarItemHorizontalPadding`).
+        type: length
+        value: 8px
+      startIndicatorHeight:
+        description: >
+          Active indicator height of a destination with a start icon
+          (`NavigationBarHorizontalItemTokens.ActiveIndicatorHeight`).
+        type: length
+        value: 40px
+      startIconLabelSpace:
+        description: >
+          Space between the start icon and the label of a destination
+          (`NavigationBarTokens.ItemActiveIndicatorIconLabelSpace`).
+        type: length
+        value: 4px
+  rail:
+    description: Navigation rail roles.
+    roles:
+      containerColor:
+        description: Container color (`NavigationRailCollapsedTokens.ContainerColor`).
+        type: color
+        value: $cw-Color-surface-fill
+      collapsedWidth:
+        description: Width of a collapsed rail (`NavigationRailCollapsedTokens.ContainerWidth`).
+        type: length
+        value: 96px
+      expandedMinWidth:
+        description: >
+          Minimum width of an expanded rail (`NavigationRailExpandedTokens.ContainerWidthMinimum`).
+        type: length
+        value: 220px
+      expandedMaxWidth:
+        description: >
+          Maximum width of an expanded rail (`NavigationRailExpandedTokens.ContainerWidthMaximum`).
+        type: length
+        value: 360px
+      topSpace:
+        description: >
+          Space above the header and destinations (`NavigationRailCollapsedTokens.TopSpace`).
+        type: length
+        value: 44px
+      headerSpace:
+        description: >
+          Space between the header and the first destination
+          (`NavigationRailBaselineItemTokens.HeaderSpaceMinimum`).
+        type: length
+        value: 40px
+      itemSpacing:
+        description: >
+          Space between the destinations of a collapsed rail
+          (`NavigationRailCollapsedTokens.ItemVerticalSpace`).
+        type: length
+        value: 4px
+      itemInset:
+        description: >
+          Space between the rail edges and its destinations (`WideNavigationRail.kt`
+          `WNRItemHorizontalPadding`).
+        type: length
+        value: 20px
+  modal:
+    description: Roles of the modal surface of an expanded modal rail.
+    roles:
+      containerColor:
+        description: Container color (`NavigationRailExpandedTokens.ModalContainerColor`).
+        type: color
+        value: $cw-Color-surface-container
+      elevation:
+        description: Container elevation (`NavigationRailExpandedTokens.ModalContainerElevation`).
+        type: integer
+        value: $cw-Elevation-level-2
+      shadowColor:
+        description: Elevation shadow color.
+        type: color
+        value: $cw-Color-shadow
+      shape:
+        description: Container shape (`NavigationRailExpandedTokens.ModalContainerShape`).
+        type: length
+        roles:
+          topLeft: $cw-CornerRadius-large
+          topRight: $cw-CornerRadius-large
+          bottomRight: $cw-CornerRadius-large
+          bottomLeft: $cw-CornerRadius-large
+      scrimColor:
+        description: Scrim color (`ScrimTokens.ContainerColor`).
+        type: color
+        value: $cw-Color-scrim
+      scrimOpacity:
+        description: Scrim opacity (`ScrimTokens.ContainerOpacity`).
+        type: number
+        value: 0.32
+  item:
+    description: Roles of the destinations of bars and rails.
+    roles:
+      iconSize:
+        description: Icon size (`NavigationRailBaselineItemTokens.IconSize`).
+        type: length
+        value: 24px
+      indicatorColor:
+        description: >
+          Active indicator color (`NavigationRailColorTokens.ItemActiveIndicator`,
+          `NavigationBarTokens.ItemActiveIndicatorColor`).
+        type: color
+        value: $cw-Color-secondary-container
+      indicatorShape:
+        description: >
+          Active indicator corner radius (`NavigationRailBaselineItemTokens.ActiveIndicatorShape`).
+        type: length
+        value: $cw-CornerRadius-full
+      indicatorWidth:
+        description: >
+          Active indicator width of a destination with a top icon
+          (`NavigationRailVerticalItemTokens.ActiveIndicatorWidth`).
+        type: length
+        value: 56px
+      indicatorHeight:
+        description: >
+          Active indicator height of a destination with a top icon
+          (`NavigationRailVerticalItemTokens.ActiveIndicatorHeight`).
+        type: length
+        value: 32px
+      noLabelIndicatorHeight:
+        description: >
+          Active indicator height of a rail destination without a label (`WideNavigationRail.kt`
+          `WNRItemNoLabelIndicatorPadding`).
+        type: length
+        value: 56px
+      startIndicatorHeight:
+        description: >
+          Active indicator height of a rail destination with a start icon
+          (`NavigationRailHorizontalItemTokens.ActiveIndicatorHeight`).
+        type: length
+        value: 56px
+      indicatorPadding:
+        description: >
+          Space between the active indicator and the content of a destination with a start icon
+          (`NavigationRailHorizontalItemTokens.FullWidthLeadingSpace`).
+        type: length
+        value: 16px
+      indicatorLabelSpace:
+        description: >
+          Space between the active indicator and the label of a destination with a top icon
+          (`NavigationRailVerticalItemTokens.IconLabelSpace`).
+        type: length
+        value: 4px
+      iconLabelSpace:
+        description: >
+          Space between the start icon and the label of a rail destination
+          (`NavigationRailHorizontalItemTokens.IconLabelSpace`).
+        type: length
+        value: 8px
+      height:
+        description: >
+          Minimum height of a destination with a top icon
+          (`NavigationRailBaselineItemTokens.ContainerHeight`).
+        type: length
+        value: 64px
+      verticalPadding:
+        description: >
+          Space above and below the content of a destination with a top icon
+          (`NavigationRailBaselineItemTokens.ContainerVerticalSpace`).
+        type: length
+        value: 6px
+      selectedIconColor:
+        description: Selected icon color (`NavigationRailColorTokens.ItemActiveIcon`).
+        type: color
+        value: $cw-Color-secondary-onContainer
+      selectedLabelColor:
+        description: >
+          Selected label color of a destination with a top icon
+          (`NavigationRailColorTokens.ItemActiveLabelText`).
+        type: color
+        value: $cw-Color-secondary-fill
+      selectedStartLabelColor:
+        description: >
+          Selected label color of a destination with a start icon (`ShortNavigationBar.kt`
+          `selectedTextColorStartIconPosition`).
+        type: color
+        value: $cw-Color-secondary-onContainer
+      contentColor:
+        description: >
+          Unselected icon and label color (`NavigationRailColorTokens.ItemInactiveIcon`,
+          `NavigationRailColorTokens.ItemInactiveLabelText`).
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      disabledContentOpacity:
+        description: >
+          Opacity of the unselected content color of a disabled destination (`ShortNavigationBar.kt`
+          `disabledIconColor`).
+        type: number
+        value: 0.38
+      stateLayerColor:
+        description: >
+          State-layer color (`NavigationRailColorTokens.ItemActiveHoveredStateLayer`,
+          `NavigationRailColorTokens.ItemInactiveHoveredStateLayer`).
+        type: color
+        value: $cw-Color-secondary-onContainer
+  drawer:
+    description: Navigation drawer roles.
+    roles:
+      width:
+        description: Drawer width (`NavigationDrawerTokens.ContainerWidth`).
+        type: length
+        value: 360px
+      containerColor:
+        description: >
+          Container color of a dismissible or permanent drawer
+          (`NavigationDrawerTokens.StandardContainerColor`).
+        type: color
+        value: $cw-Color-surface-fill
+      modalContainerColor:
+        description: >
+          Container color of a modal drawer (`NavigationDrawerTokens.ModalContainerColor`).
+        type: color
+        value: $cw-Color-surface-containerLow
+      modalElevation:
+        description: >
+          Container elevation of a modal drawer (`NavigationDrawerTokens.ModalContainerElevation`).
+        type: integer
+        value: $cw-Elevation-level-1
+      shadowColor:
+        description: Elevation shadow color.
+        type: color
+        value: $cw-Color-shadow
+      modalShape:
+        description: Container shape of a modal drawer (`NavigationDrawerTokens.ContainerShape`).
+        type: length
+        roles:
+          topLeft: $cw-CornerRadius-none
+          topRight: $cw-CornerRadius-large
+          bottomRight: $cw-CornerRadius-large
+          bottomLeft: $cw-CornerRadius-none
+      scrimColor:
+        description: Scrim color (`ScrimTokens.ContainerColor`).
+        type: color
+        value: $cw-Color-scrim
+      scrimOpacity:
+        description: Scrim opacity (`ScrimTokens.ContainerOpacity`).
+        type: number
+        value: 0.32
+      padding:
+        description: >
+          Space between the drawer edges and its destinations (`NavigationDrawer.kt`
+          `NavigationDrawerItemDefaults.ItemPadding`).
+        type: length
+        value: 12px
+      headlineColor:
+        description: Headline and section label color (`NavigationDrawerTokens.HeadlineColor`).
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      headlineInset:
+        description: >
+          Space between the drawer edges and its headline, section labels, and dividers, which
+          aligns them with destination content.
+        type: length
+        value: 28px
+      dividerColor:
+        description: Color of the divider preceding a section (`DividerTokens.Color`).
+        type: color
+        value: $cw-Color-outlineVariant
+      itemHeight:
+        description: Destination height (`NavigationDrawerTokens.ActiveIndicatorHeight`).
+        type: length
+        value: 56px
+      itemStartPadding:
+        description: >
+          Space before the icon of a destination (`NavigationDrawer.kt` `NavigationDrawerItem`).
+        type: length
+        value: 16px
+      itemEndPadding:
+        description: >
+          Space after the label or badge of a destination (`NavigationDrawer.kt`
+          `NavigationDrawerItem`).
+        type: length
+        value: 24px
+      iconLabelSpace:
+        description: >
+          Space between the icon and the label of a destination (`NavigationDrawer.kt`
+          `NavigationDrawerItem`).
+        type: length
+        value: 12px
+      selectedContentColor:
+        description: >
+          Selected icon and label color (`NavigationDrawerTokens.ActiveIconColor`,
+          `NavigationDrawerTokens.ActiveLabelTextColor`).
+        type: color
+        value: $cw-Color-secondary-onContainer
+      contentColor:
+        description: >
+          Unselected icon and label color (`NavigationDrawerTokens.InactiveIconColor`,
+          `NavigationDrawerTokens.InactiveLabelTextColor`).
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      activeContentColor:
+        description: >
+          Unselected icon and label color of a hovered, focused, or pressed destination
+          (`NavigationDrawerTokens.InactiveHoverIconColor`,
+          `NavigationDrawerTokens.InactiveHoverLabelTextColor`).
+        type: color
+        value: $cw-Color-surface-onFill
+      badgeColor:
+        description: Badge label color (`NavigationDrawerTokens.LargeBadgeLabelColor`).
+        type: color
+        value: $cw-Color-surface-onFillVariant

package/src/navigation/scroll.yaml

@@ -0,0 +1,23 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Scrollbar
+description: >
+  Scrollbar roles. Material 3 does not specify scrollbars; these roles follow the surface roles of
+  the system.
+roles:
+  trackColor:
+    description: Track color.
+    type: color
+    value: $cw-Color-surface-container
+  thumbColor:
+    description: Thumb color.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  thumbShape:
+    description: Corner radius of the track and the thumb.
+    type: length
+    value: $cw-CornerRadius-full
+  thickness:
+    description: Scrollbar thickness.
+    type: length
+    value: 12px

package/src/navigation/search.yaml

@@ -0,0 +1,112 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: SearchBar
+description: >
+  Search bar, search view, and search app-bar roles (`SearchBarTokens.kt`, `SearchViewTokens.kt`,
+  and the Material Components search and app-bar tokens).
+roles:
+  bar:
+    description: Roles of the search bar.
+    roles:
+      containerColor:
+        description: Container color.
+        type: color
+        value: $cw-Color-surface-containerHigh
+      containerElevation:
+        description: >
+          Container shadow elevation. The search tokens elevate the bar tonally, through its
+          container color; Compose `SearchBarDefaults.ShadowElevation` adds no shadow.
+        type: integer
+        value: $cw-Elevation-level-0
+      height:
+        description: Container height; the container corner radius is half of it.
+        type: length
+        value: 56px
+      inputTextColor:
+        description: Color of the query.
+        type: color
+        value: $cw-Color-surface-onFill
+      supportingTextColor:
+        description: Color of the placeholder.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      leadingIconColor:
+        description: Color of the leading icon.
+        type: color
+        value: $cw-Color-surface-onFill
+      trailingIconColor:
+        description: Color of the trailing icons.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      avatarSize:
+        description: Size of the trailing avatar, centered in a 48px target.
+        type: length
+        value: 30px
+  view:
+    description: Roles of the docked and full-screen search views.
+    roles:
+      containerColor:
+        description: Container color of the divided views.
+        type: color
+        value: $cw-Color-surface-containerHigh
+      containerElevation:
+        description: Shadow elevation of docked results, which overlay the page.
+        type: integer
+        value: $cw-Elevation-level-3
+      dividerColor:
+        description: Color of the divider below the bar of a divided view.
+        type: color
+        value: $cw-Color-outline
+      dockedShape:
+        description: Corner radius of a docked divided view.
+        type: length
+        value: $cw-CornerRadius-xlarge
+      fullScreenHeaderHeight:
+        description: Header height of a full-screen divided view.
+        type: length
+        value: 72px
+      containedFullScreenColor:
+        description: >
+          Container color of a full-screen contained view (Compose
+          `SearchBarDefaults.fullScreenContainedSearchBarColor`).
+        type: color
+        value: $cw-Color-surface-containerLow
+      containedResultsShape:
+        description: Corner radius of the results of a docked contained view.
+        type: length
+        value: $cw-CornerRadius-medium
+      containedResultsSpace:
+        description: Space between the bar and the results of a docked contained view.
+        type: length
+        value: 2px
+  appBar:
+    description: Roles of search app bars (Compose `SearchBarDefaults.appBarWithSearchColors`).
+    roles:
+      containerColor:
+        description: App-bar container color.
+        type: color
+        value: $cw-Color-surface-fill
+      scrolledContainerColor:
+        description: App-bar container color while content scrolls under the bar.
+        type: color
+        value: $cw-Color-surface-container
+      fieldColor:
+        description: Search field color (`m3_comp_app_bar_search_container_color`).
+        type: color
+        value: $cw-Color-surface-container
+      scrolledFieldColor:
+        description: Search field color while content scrolls under the bar.
+        type: color
+        value: $cw-Color-surface-containerHighest
+      navigationIconColor:
+        description: Color of the leading navigation icon.
+        type: color
+        value: $cw-Color-surface-onFill
+      actionIconColor:
+        description: Color of the action icons.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      height:
+        description: App-bar height.
+        type: length
+        value: 64px