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

package/src/navigation/tabs.yaml

@@ -0,0 +1,144 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Tabs
+description: >
+  Tab list, tab, and tab panel roles. Values follow the Material 3 `PrimaryNavigationTabTokens`
+  and `SecondaryNavigationTabTokens`, and the layouts of the Compose `PrimaryTabRow`,
+  `SecondaryTabRow`, `ScrollableTabRow`, `Tab`, and `LeadingIconTab` components.
+
+  Roles are not inherited. Assign a role on the element which consumes it: the tab list for
+  `container` roles, and the tab for `tab`, `primary`, and `secondary` roles.
+roles:
+  container:
+    description: Tab list roles.
+    roles:
+      color:
+        description: Container color (`PrimaryNavigationTabTokens.ContainerColor`).
+        type: color
+        value: $cw-Color-surface-fill
+      dividerColor:
+        description: Color of the divider below the tabs (`TabRow.kt` `HorizontalDivider`).
+        type: color
+        value: $cw-Color-outlineVariant
+      dividerThickness:
+        description: Thickness of the divider below the tabs (`DividerTokens.Thickness`).
+        type: length
+        value: 1px
+      scrollablePadding:
+        description: >
+          Space before the first and after the last tab of a scrollable list (`TabRow.kt`
+          `ScrollableTabRowEdgeStartPadding`).
+        type: length
+        value: 52px
+  tab:
+    description: Tab roles shared by both variants.
+    roles:
+      height:
+        description: Height of a tab (`PrimaryNavigationTabTokens.ContainerHeight`).
+        type: length
+        value: 48px
+      stackedHeight:
+        description: >
+          Height of a tab stacking an icon above its label
+          (`PrimaryNavigationTabTokens.IconAndLabelTextContainerHeight`).
+        type: length
+        value: 64px
+      padding:
+        description: Space before and after the content of a tab (`Tab.kt` `HorizontalTextPadding`).
+        type: length
+        value: 16px
+      iconSize:
+        description: Icon size (`PrimaryNavigationTabTokens.IconSize`).
+        type: length
+        value: 24px
+      stackedSpace:
+        description: Space between a stacked icon and the label.
+        type: length
+        value: 2px
+      leadingSpace:
+        description: >
+          Space between a leading icon and the label (`Tab.kt` `TextDistanceFromLeadingIcon`).
+        type: length
+        value: 8px
+      scrollableMinWidth:
+        description: >
+          Minimum width of a tab within a scrollable list
+          (`TabRowDefaults.ScrollableTabRowMinTabWidth`).
+        type: length
+        value: 90px
+      disabledOpacity:
+        description: Opacity of the content of a disabled tab.
+        type: number
+        value: 0.38
+  primary:
+    description: Primary tab roles.
+    roles:
+      selectedColor:
+        description: >
+          Selected icon and label color (`PrimaryNavigationTabTokens.ActiveIconColor`,
+          `PrimaryNavigationTabTokens.ActiveLabelTextColor`).
+        type: color
+        value: $cw-Color-primary-fill
+      color:
+        description: >
+          Unselected icon and label color (`PrimaryNavigationTabTokens.InactiveIconColor`,
+          `PrimaryNavigationTabTokens.InactiveLabelTextColor`).
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      activeColor:
+        description: >
+          Unselected icon and label color of a hovered, focused, or pressed tab
+          (`PrimaryNavigationTabTokens.InactiveHoverIconColor`,
+          `PrimaryNavigationTabTokens.InactiveHoverLabelTextColor`).
+        type: color
+        value: $cw-Color-surface-onFill
+      indicatorColor:
+        description: Active indicator color (`PrimaryNavigationTabTokens.ActiveIndicatorColor`).
+        type: color
+        value: $cw-Color-primary-fill
+      indicatorHeight:
+        description: Active indicator height (`PrimaryNavigationTabTokens.ActiveIndicatorHeight`).
+        type: length
+        value: 3px
+      indicatorMinWidth:
+        description: Minimum active indicator width (`TabRowDefaults.PrimaryIndicator`).
+        type: length
+        value: 24px
+      indicatorShape:
+        description: Active indicator shape (`PrimaryNavigationTabTokens.ActiveIndicatorShape`).
+        type: length
+        roles:
+          topLeft: 3px
+          topRight: 3px
+          bottomRight: 3px
+          bottomLeft: 3px
+  secondary:
+    description: Secondary tab roles.
+    roles:
+      selectedColor:
+        description: >
+          Selected icon and label color (`SecondaryNavigationTabTokens.ActiveIconColor`,
+          `SecondaryNavigationTabTokens.ActiveLabelTextColor`).
+        type: color
+        value: $cw-Color-surface-onFill
+      color:
+        description: >
+          Unselected icon and label color (`SecondaryNavigationTabTokens.InactiveIconColor`,
+          `SecondaryNavigationTabTokens.InactiveLabelTextColor`).
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      activeColor:
+        description: >
+          Icon and label color of a hovered, focused, or pressed tab
+          (`SecondaryNavigationTabTokens.HoverIconColor`,
+          `SecondaryNavigationTabTokens.HoverLabelTextColor`).
+        type: color
+        value: $cw-Color-surface-onFill
+      indicatorColor:
+        description: Active indicator color (`TabRowDefaults.SecondaryIndicator`).
+        type: color
+        value: $cw-Color-primary-fill
+      indicatorHeight:
+        description: Active indicator height.
+        type: length
+        value: 2px

package/src/navigation/toolbar.yaml

@@ -0,0 +1,130 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: FloatingToolbar
+description: >
+  Floating and docked toolbar roles (`FloatingToolbarTokens.kt`, `DockedToolbarTokens.kt`, and the
+  Material Components standard and vibrant toolbar tokens). The `standard` and `vibrant` roles
+  color the respective designs of both toolbars.
+roles:
+  standard:
+    description: >
+      Colors of the standard design. Selected toggles take the Material Components standard toolbar
+      colors (`standard_toolbar_tokens.xml`).
+    roles:
+      containerColor:
+        description: Container color.
+        type: color
+        value: $cw-Color-surface-container
+      contentColor:
+        description: >
+          Color of icons and labels within the container, including unselected toggles
+          (`m3_comp_toolbar_standard_icon_color`, `m3_comp_toolbar_standard_label_text_color`).
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      selectedContainerColor:
+        description: >
+          Container color of selected toggles
+          (`m3_comp_toolbar_standard_selected_button_container_color`).
+        type: color
+        value: $cw-Color-secondary-container
+      selectedContentColor:
+        description: >
+          Icon and label color of selected toggles (`m3_comp_toolbar_standard_selected_icon_color`,
+          `m3_comp_toolbar_standard_selected_label_text_color`).
+        type: color
+        value: $cw-Color-secondary-onContainer
+  vibrant:
+    description: Colors of the vibrant design.
+    roles:
+      containerColor:
+        description: Container color.
+        type: color
+        value: $cw-Color-primary-container
+      contentColor:
+        description: >
+          Color of icons and labels within the container, including unselected toggles
+          (`VibrantButtonUnselectedIconColor`, `VibrantButtonUnselectedTextColor`).
+        type: color
+        value: $cw-Color-primary-onContainer
+      selectedContainerColor:
+        description: Container color of selected toggles (`VibrantButtonSelectedContainerColor`).
+        type: color
+        value: $cw-Color-surface-container
+      selectedContentColor:
+        description: >
+          Icon and label color of selected toggles (`VibrantButtonSelectedIconColor`,
+          `VibrantButtonSelectedTextColor`).
+        type: color
+        value: $cw-Color-surface-onFill
+  floating:
+    description: Roles of floating toolbars.
+    roles:
+      containerShape:
+        description: Container corner radius.
+        type: length
+        value: $cw-CornerRadius-full
+      containerElevation:
+        description: Container elevation (`m3_comp_toolbar_floating_container_elevation`).
+        type: integer
+        value: $cw-Elevation-level-3
+      fabContainerElevation:
+        description: >
+          Container elevation of an expanded toolbar paired with a floating action button (Compose
+          `FloatingToolbarDefaults.ContainerExpandedElevationWithFab`). A collapsed toolbar has no
+          elevation.
+        type: integer
+        value: $cw-Elevation-level-1
+      height:
+        description: Minimum container height, or width of a vertical toolbar.
+        type: length
+        value: 64px
+      leadingSpace:
+        description: Space between the start, or top, of the container and its content.
+        type: length
+        value: 8px
+      trailingSpace:
+        description: Space between the content and the end, or bottom, of the container.
+        type: length
+        value: 8px
+      itemSpace:
+        description: Space between items.
+        type: length
+        value: 4px
+      fabSpace:
+        description: Space between the container and a paired floating action button.
+        type: length
+        value: 8px
+      fabSize:
+        description: >
+          Size of a paired floating action button while the toolbar is expanded, which is also the
+          space the button takes in the layout (`FabBaselineTokens.ContainerWidth`).
+        type: length
+        value: 56px
+      collapsedFabSize:
+        description: >
+          Size of a paired floating action button while the toolbar is collapsed, and the minimum
+          height, or width of a vertical toolbar, of a toolbar with a floating action button
+          (`FabMediumTokens.ContainerWidth`).
+        type: length
+        value: 80px
+      screenOffset:
+        description: >
+          Offset from the edge of the screen at which a toolbar is expected to float, which it
+          travels in addition to its size when it exits on scroll.
+        type: length
+        value: 16px
+  docked:
+    description: Roles of docked toolbars.
+    roles:
+      height:
+        description: Container height.
+        type: length
+        value: 64px
+      leadingSpace:
+        description: Space between the start of the container and its first item.
+        type: length
+        value: 16px
+      trailingSpace:
+        description: Space between the last item and the end of the container.
+        type: length
+        value: 16px

package/src/selection/checkbox.yaml

@@ -0,0 +1,162 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Checkbox
+description: >
+  Checkbox component roles. A checkbox is unchecked, checked, or indeterminate; the checked and
+  indeterminate states use the selected roles. Values follow the AndroidX Material 3
+  `CheckboxTokens` and, for state-layer colors, the material-web checkbox tokens.
+roles:
+  container:
+    description: Box roles.
+    roles:
+      size:
+        description: Box size.
+        type: length
+        value: 18px
+      shape:
+        description: Box corner radius.
+        type: length
+        value: 2px
+      outlineColor:
+        description: Unselected box outline color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      outlineWidth:
+        description: Unselected box outline width.
+        type: length
+        value: 2px
+      selectedColor:
+        description: Selected box color.
+        type: color
+        value: $cw-Color-primary-fill
+  icon:
+    description: Check and indeterminate mark roles.
+    roles:
+      color:
+        description: Mark color drawn on the selected box.
+        type: color
+        value: $cw-Color-primary-onFill
+  stateLayer:
+    description: State-layer roles.
+    roles:
+      size:
+        description: Diameter of the circular state layer centered on the box.
+        type: length
+        value: 40px
+  target:
+    description: Interactive target roles.
+    roles:
+      size:
+        description: >
+          Minimum interactive target size. The state layer is centered within the inline-start
+          square of this size.
+        type: length
+        value: 48px
+  label:
+    description: Label slot roles.
+    roles:
+      color:
+        description: Label color.
+        type: color
+        value: $cw-Color-surface-onFill
+      spacing:
+        description: >
+          Space between the interactive target and the label. With the default roles the label
+          starts where the 48px target ends.
+        type: length
+        value: 0px
+  hover:
+    description: Roles applied while the checkbox is hovered.
+    roles:
+      outlineColor:
+        description: Override for `cw-Checkbox-container-outlineColor`.
+        type: color
+        value: $cw-Color-surface-onFill
+      stateLayerColor:
+        description: Unselected state-layer color.
+        type: color
+        value: $cw-Color-surface-onFill
+      selectedStateLayerColor:
+        description: Selected state-layer color.
+        type: color
+        value: $cw-Color-primary-fill
+  focus:
+    description: Roles applied while the checkbox has keyboard focus.
+    roles:
+      outlineColor:
+        description: Override for `cw-Checkbox-container-outlineColor`.
+        type: color
+        value: $cw-Color-surface-onFill
+      stateLayerColor:
+        description: Unselected state-layer color.
+        type: color
+        value: $cw-Color-surface-onFill
+      selectedStateLayerColor:
+        description: Selected state-layer color.
+        type: color
+        value: $cw-Color-primary-fill
+  press:
+    description: Roles applied while the checkbox is pressed.
+    roles:
+      outlineColor:
+        description: Override for `cw-Checkbox-container-outlineColor`.
+        type: color
+        value: $cw-Color-surface-onFill
+      stateLayerColor:
+        description: Unselected state-layer color.
+        type: color
+        value: $cw-Color-primary-fill
+      selectedStateLayerColor:
+        description: Selected state-layer color.
+        type: color
+        value: $cw-Color-surface-onFill
+  error:
+    description: Roles applied while the checkbox shows an error.
+    roles:
+      outlineColor:
+        description: Override for `cw-Checkbox-container-outlineColor` in every state.
+        type: color
+        value: $cw-Color-error-fill
+      selectedColor:
+        description: Override for `cw-Checkbox-container-selectedColor`.
+        type: color
+        value: $cw-Color-error-fill
+      iconColor:
+        description: Override for `cw-Checkbox-icon-color`.
+        type: color
+        value: $cw-Color-error-onFill
+      stateLayerColor:
+        description: State-layer color in every interaction state.
+        type: color
+        value: $cw-Color-error-fill
+  disabled:
+    description: Roles applied while the checkbox is disabled.
+    roles:
+      outlineColor:
+        description: Override for `cw-Checkbox-container-outlineColor`.
+        type: color
+        value: $cw-Color-surface-onFill
+      outlineOpacity:
+        description: Opacity of the disabled outline color.
+        type: number
+        value: 0.38
+      selectedColor:
+        description: Override for `cw-Checkbox-container-selectedColor`.
+        type: color
+        value: $cw-Color-surface-onFill
+      selectedOpacity:
+        description: Opacity of the disabled selected box color.
+        type: number
+        value: 0.38
+      iconColor:
+        description: Override for `cw-Checkbox-icon-color`.
+        type: color
+        value: $cw-Color-surface-fill
+      labelColor:
+        description: Override for `cw-Checkbox-label-color`.
+        type: color
+        value: $cw-Color-surface-onFill
+      labelOpacity:
+        description: Opacity of the disabled label color.
+        type: number
+        value: 0.38

package/src/selection/chip.yaml

@@ -0,0 +1,219 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Chip
+description: >
+  Chip roles shared by assist, filter, input, and suggestion chips. Default values describe a flat
+  filter or suggestion chip; the `assist`, `input`, `elevated`, and `expressive` themes apply the
+  remaining variants. Values follow the AndroidX Material 3 `AssistChipTokens`,
+  `FilterChipTokens`, `InputChipTokens`, `SuggestionChipTokens`, and, for the expressive shapes,
+  `ChipsTokens`.
+roles:
+  container:
+    description: Container roles.
+    roles:
+      height:
+        description: Container height.
+        type: length
+        value: 32px
+      shape:
+        description: Container corner radius.
+        type: length
+        value: $cw-CornerRadius-small
+      selectedShape:
+        description: >
+          Selected container corner radius. A radius of at least half the container height
+          produces a fully rounded container.
+        type: length
+        value: $cw-CornerRadius-small
+      pressedShape:
+        description: Pressed container corner radius.
+        type: length
+        value: $cw-CornerRadius-small
+      color:
+        description: Unselected container color.
+        type: color
+        value: "#00000000"
+      selectedColor:
+        description: Selected container color.
+        type: color
+        value: $cw-Color-secondary-container
+      outlineColor:
+        description: Unselected container outline color. Selected containers have no outline.
+        type: color
+        value: $cw-Color-outlineVariant
+      outlineWidth:
+        description: Unselected container outline width.
+        type: length
+        value: 1px
+      elevation:
+        description: Container elevation.
+        type: integer
+        value: $cw-Elevation-level-0
+      padding:
+        description: Space between the container edge and a label.
+        type: length
+        value: 8px
+      iconPadding:
+        description: Space between the container edge and a leading or trailing icon.
+        type: length
+        value: 8px
+  label:
+    description: Label roles.
+    roles:
+      color:
+        description: Unselected label color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      selectedColor:
+        description: Selected label color.
+        type: color
+        value: $cw-Color-secondary-onContainer
+      spacing:
+        description: Space on each side of the label.
+        type: length
+        value: 8px
+  icon:
+    description: Icon roles.
+    roles:
+      size:
+        description: Leading and trailing icon size.
+        type: length
+        value: 18px
+      color:
+        description: Unselected leading icon color.
+        type: color
+        value: $cw-Color-primary-fill
+      selectedColor:
+        description: Selected leading icon and checkmark color.
+        type: color
+        value: $cw-Color-secondary-onContainer
+      trailingColor:
+        description: Unselected trailing icon color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      selectedTrailingColor:
+        description: Selected trailing icon color.
+        type: color
+        value: $cw-Color-secondary-onContainer
+  avatar:
+    description: Input-chip avatar roles. The avatar is circular.
+    roles:
+      size:
+        description: Avatar size.
+        type: length
+        value: 24px
+  target:
+    description: Interactive target roles.
+    roles:
+      size:
+        description: Minimum interactive target block size of each chip action.
+        type: length
+        value: 48px
+  hover:
+    description: Roles applied while the chip is hovered.
+    roles:
+      elevation:
+        description: Override for `cw-Chip-container-elevation`.
+        type: integer
+        value: $cw-Elevation-level-0
+      selectedElevation:
+        description: Override for `cw-Chip-container-elevation` while selected.
+        type: integer
+        value: $cw-Elevation-level-1
+  focus:
+    description: Roles applied while the chip has keyboard focus.
+    roles:
+      elevation:
+        description: Override for `cw-Chip-container-elevation`.
+        type: integer
+        value: $cw-Elevation-level-0
+      outlineColor:
+        description: Override for `cw-Chip-container-outlineColor`.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+  press:
+    description: Roles applied while the chip is pressed.
+    roles:
+      elevation:
+        description: Override for `cw-Chip-container-elevation`.
+        type: integer
+        value: $cw-Elevation-level-0
+      stateLayerColor:
+        description: >
+          State-layer color of a pressed unselected filter chip (material-web
+          `md.comp.filter-chip.unselected.pressed.state-layer.color`). Other chips use their label
+          color for every state layer.
+        type: color
+        value: $cw-Color-secondary-onContainer
+      selectedStateLayerColor:
+        description: >
+          State-layer color of a pressed selected filter chip (material-web
+          `md.comp.filter-chip.selected.pressed.state-layer.color`).
+        type: color
+        value: $cw-Color-surface-onFillVariant
+  drag:
+    description: Roles applied while the chip is dragged.
+    roles:
+      elevation:
+        description: Override for `cw-Chip-container-elevation`.
+        type: integer
+        value: $cw-Elevation-level-4
+  disabled:
+    description: Roles applied while the chip is disabled.
+    roles:
+      contentColor:
+        description: Label, icon, and checkmark color.
+        type: color
+        value: $cw-Color-surface-onFill
+      contentOpacity:
+        description: Opacity of the disabled content color and of an avatar.
+        type: number
+        value: 0.38
+      outlineColor:
+        description: Override for `cw-Chip-container-outlineColor`.
+        type: color
+        value: $cw-Color-surface-onFill
+      outlineOpacity:
+        description: Opacity of the disabled outline color.
+        type: number
+        value: 0.12
+      containerColor:
+        description: Selected or elevated container color.
+        type: color
+        value: $cw-Color-surface-onFill
+      containerOpacity:
+        description: Opacity of the disabled selected or elevated container color.
+        type: number
+        value: 0.12
+      elevation:
+        description: Override for `cw-Chip-container-elevation`.
+        type: integer
+        value: $cw-Elevation-level-0
+themes:
+  assist:
+    description: Assist chip values.
+    values:
+      focus-outlineColor: $cw-Color-surface-onFill
+      label-color: $cw-Color-surface-onFill
+  input:
+    description: Input chip values.
+    values:
+      container-padding: 4px
+      icon-color: $cw-Color-surface-onFillVariant
+      icon-selectedColor: $cw-Color-primary-fill
+  elevated:
+    description: Elevated chip values.
+    values:
+      container-color: $cw-Color-surface-containerLow
+      container-elevation: $cw-Elevation-level-1
+      container-outlineWidth: 0px
+      focus-elevation: $cw-Elevation-level-1
+      hover-elevation: $cw-Elevation-level-2
+      hover-selectedElevation: $cw-Elevation-level-2
+      press-elevation: $cw-Elevation-level-1
+  expressive:
+    description: Material 3 Expressive filter and input chip shapes.
+    values:
+      container-pressedShape: $cw-CornerRadius-small
+      container-selectedShape: $cw-CornerRadius-full
+      container-shape: $cw-CornerRadius-medium