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

package/src/selection/radio.yaml

@@ -0,0 +1,125 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: RadioButton
+description: >
+  Radio button component roles. Values follow the AndroidX Material 3 `RadioButtonTokens` and,
+  for state-layer colors, the material-web radio tokens.
+roles:
+  icon:
+    description: Radio ring and dot roles.
+    roles:
+      size:
+        description: Outer diameter of the ring.
+        type: length
+        value: 20px
+      strokeWidth:
+        description: Ring stroke width.
+        type: length
+        value: 2px
+      dotSize:
+        description: >
+          Diameter of the selected dot. Compose draws a 12dp dot whose radius is reduced by half
+          the stroke width, which yields a 10dp visible dot.
+        type: length
+        value: 10px
+      color:
+        description: Unselected ring color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      selectedColor:
+        description: Selected ring and dot color.
+        type: color
+        value: $cw-Color-primary-fill
+  stateLayer:
+    description: State-layer roles.
+    roles:
+      size:
+        description: Diameter of the circular state layer centered on the ring.
+        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 radio button is hovered.
+    roles:
+      iconColor:
+        description: Override for `cw-RadioButton-icon-color`.
+        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 radio button has keyboard focus.
+    roles:
+      iconColor:
+        description: Override for `cw-RadioButton-icon-color`.
+        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 radio button is pressed.
+    roles:
+      iconColor:
+        description: Override for `cw-RadioButton-icon-color`.
+        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
+  disabled:
+    description: Roles applied while the radio button is disabled.
+    roles:
+      iconColor:
+        description: Ring and dot color in both selection states.
+        type: color
+        value: $cw-Color-surface-onFill
+      iconOpacity:
+        description: Opacity of the disabled ring and dot color.
+        type: number
+        value: 0.38
+      labelColor:
+        description: Override for `cw-RadioButton-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/segmented-group.yaml

@@ -0,0 +1,11 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: SegmentedButtonGroup
+description: >
+  Segmented button row roles. Segments of a row share one width (or, in a vertical row, one
+  height) and overlap by their outline width when the spacing is `0px`.
+roles:
+  spacing:
+    description: Space between the segments of a row.
+    type: length
+    value: 0px

package/src/selection/segmented.yaml

@@ -0,0 +1,69 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: SegmentedButton
+description: >
+  Segmented button component roles. Values follow the AndroidX Material 3
+  `OutlinedSegmentedButtonTokens` and `SegmentedButtonDefaults`. State layers use the label color.
+roles:
+  containerHeight:
+    description: Visual container height.
+    type: length
+    value: 40px
+  targetSize:
+    description: Minimum interactive target block size.
+    type: length
+    value: 48px
+  horizontalPadding:
+    description: Space between the container edge and the content.
+    type: length
+    value: 12px
+  contentSpacing:
+    description: Space between the icon or checkmark and the label.
+    type: length
+    value: 8px
+  iconSize:
+    description: Icon and checkmark size.
+    type: length
+    value: 18px
+  outlineColor:
+    description: Container outline color.
+    type: color
+    value: $cw-Color-outline
+  outlineThickness:
+    description: Container outline width. Adjacent segments of a row overlap by this width.
+    type: length
+    value: 1px
+  shape:
+    description: >
+      Corner radius of the outer corners of a row, or of every corner of a standalone segment. A
+      radius of at least half the container height produces fully rounded ends.
+    type: length
+    value: $cw-CornerRadius-full
+  selectedContainerColor:
+    description: Selected container color.
+    type: color
+    value: $cw-Color-secondary-container
+  selectedLabelTextColor:
+    description: Selected label, icon, and checkmark color.
+    type: color
+    value: $cw-Color-secondary-onContainer
+  unselectedLabelTextColor:
+    description: Unselected label and icon color.
+    type: color
+    value: $cw-Color-surface-onFill
+  disabledLabelTextColor:
+    description: Disabled label, icon, and checkmark color.
+    type: color
+    value: $cw-Color-surface-onFill
+  disabledLabelTextOpacity:
+    description: Opacity of the disabled label, icon, and checkmark color.
+    type: number
+    value: 0.38
+  disabledOutlineColor:
+    description: Disabled outline color.
+    type: color
+    value: $cw-Color-surface-onFill
+  disabledOutlineOpacity:
+    description: Opacity of the disabled outline color.
+    type: number
+    value: 0.12

package/src/selection/switch.yaml

@@ -0,0 +1,209 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Switch
+description: >
+  Switch component roles. Values follow the AndroidX Material 3 `SwitchTokens` and, for
+  state-layer colors, the material-web switch tokens.
+roles:
+  track:
+    description: Track roles.
+    roles:
+      width:
+        description: Track width.
+        type: length
+        value: 52px
+      height:
+        description: Track height. The track is fully rounded.
+        type: length
+        value: 32px
+      outlineWidth:
+        description: Unselected track outline width.
+        type: length
+        value: 2px
+      color:
+        description: Unselected track color.
+        type: color
+        value: $cw-Color-surface-containerHighest
+      outlineColor:
+        description: Unselected track outline color.
+        type: color
+        value: $cw-Color-outline
+      selectedColor:
+        description: Selected track color.
+        type: color
+        value: $cw-Color-primary-fill
+  handle:
+    description: Handle roles. The handle is circular.
+    roles:
+      size:
+        description: Unselected handle diameter.
+        type: length
+        value: 16px
+      selectedSize:
+        description: Selected handle diameter, also used for an unselected handle with an icon.
+        type: length
+        value: 24px
+      pressedSize:
+        description: Handle diameter while pressed.
+        type: length
+        value: 28px
+      color:
+        description: Unselected handle color.
+        type: color
+        value: $cw-Color-outline
+      selectedColor:
+        description: Selected handle color.
+        type: color
+        value: $cw-Color-primary-onFill
+  icon:
+    description: Handle icon roles.
+    roles:
+      size:
+        description: Icon size.
+        type: length
+        value: 16px
+      color:
+        description: Unselected icon color.
+        type: color
+        value: $cw-Color-surface-containerHighest
+      selectedColor:
+        description: Selected icon color.
+        type: color
+        value: $cw-Color-primary-onContainer
+  stateLayer:
+    description: State-layer roles.
+    roles:
+      size:
+        description: Diameter of the circular state layer, which travels with the handle.
+        type: length
+        value: 40px
+  target:
+    description: Interactive target roles.
+    roles:
+      size:
+        description: Minimum interactive target block 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 track and the label.
+        type: length
+        value: 8px
+  hover:
+    description: Roles applied while the switch is hovered.
+    roles:
+      handleColor:
+        description: Override for `cw-Switch-handle-color`.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      selectedHandleColor:
+        description: Override for `cw-Switch-handle-selectedColor`.
+        type: color
+        value: $cw-Color-primary-container
+      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 switch has keyboard focus.
+    roles:
+      handleColor:
+        description: Override for `cw-Switch-handle-color`.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      selectedHandleColor:
+        description: Override for `cw-Switch-handle-selectedColor`.
+        type: color
+        value: $cw-Color-primary-container
+      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 switch is pressed.
+    roles:
+      handleColor:
+        description: Override for `cw-Switch-handle-color`.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      selectedHandleColor:
+        description: Override for `cw-Switch-handle-selectedColor`.
+        type: color
+        value: $cw-Color-primary-container
+      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
+  disabled:
+    description: Roles applied while the switch is disabled.
+    roles:
+      trackColor:
+        description: Override for `cw-Switch-track-color`.
+        type: color
+        value: $cw-Color-surface-containerHighest
+      selectedTrackColor:
+        description: Override for `cw-Switch-track-selectedColor`.
+        type: color
+        value: $cw-Color-surface-onFill
+      trackOutlineColor:
+        description: Override for `cw-Switch-track-outlineColor`.
+        type: color
+        value: $cw-Color-surface-onFill
+      trackOpacity:
+        description: Opacity of the disabled track and track outline colors.
+        type: number
+        value: 0.12
+      handleColor:
+        description: Override for `cw-Switch-handle-color`.
+        type: color
+        value: $cw-Color-surface-onFill
+      handleOpacity:
+        description: Opacity of the disabled unselected handle color.
+        type: number
+        value: 0.38
+      selectedHandleColor:
+        description: Override for `cw-Switch-handle-selectedColor`.
+        type: color
+        value: $cw-Color-surface-fill
+      selectedHandleOpacity:
+        description: Opacity of the disabled selected handle color.
+        type: number
+        value: 1
+      iconColor:
+        description: Override for `cw-Switch-icon-color`.
+        type: color
+        value: $cw-Color-surface-containerHighest
+      selectedIconColor:
+        description: Override for `cw-Switch-icon-selectedColor`.
+        type: color
+        value: $cw-Color-surface-onFill
+      iconOpacity:
+        description: Opacity of the disabled icon colors.
+        type: number
+        value: 0.38
+      labelColor:
+        description: Override for `cw-Switch-label-color`.
+        type: color
+        value: $cw-Color-surface-onFill
+      labelOpacity:
+        description: Opacity of the disabled label color.
+        type: number
+        value: 0.38

package/src/spacing/measurement.yaml

@@ -0,0 +1,80 @@
+# SPDX-License-Identifier: MPL-2.0
+class: system
+attribute: Measurement
+description: >
+  Spacing scale roles, in CSS pixels. Each role suffix is the spacing in hundredths of `8px`,
+  matching the numeric scale exported by the `spacing` module. The roles serve layout between
+  components and are not an instruction to replace component-specific geometry.
+roles:
+  space0:
+    description: Spacing of 0 CSS pixels.
+    type: length
+    value: 0px
+  space25:
+    description: Spacing of 2 CSS pixels.
+    type: length
+    value: 2px
+  space50:
+    description: Spacing of 4 CSS pixels.
+    type: length
+    value: 4px
+  space75:
+    description: Spacing of 6 CSS pixels.
+    type: length
+    value: 6px
+  space100:
+    description: Spacing of 8 CSS pixels.
+    type: length
+    value: 8px
+  space125:
+    description: Spacing of 10 CSS pixels.
+    type: length
+    value: 10px
+  space150:
+    description: Spacing of 12 CSS pixels.
+    type: length
+    value: 12px
+  space175:
+    description: Spacing of 14 CSS pixels.
+    type: length
+    value: 14px
+  space200:
+    description: Spacing of 16 CSS pixels.
+    type: length
+    value: 16px
+  space250:
+    description: Spacing of 20 CSS pixels.
+    type: length
+    value: 20px
+  space300:
+    description: Spacing of 24 CSS pixels.
+    type: length
+    value: 24px
+  space400:
+    description: Spacing of 32 CSS pixels.
+    type: length
+    value: 32px
+  space450:
+    description: Spacing of 36 CSS pixels.
+    type: length
+    value: 36px
+  space500:
+    description: Spacing of 40 CSS pixels.
+    type: length
+    value: 40px
+  space600:
+    description: Spacing of 48 CSS pixels.
+    type: length
+    value: 48px
+  space700:
+    description: Spacing of 56 CSS pixels.
+    type: length
+    value: 56px
+  space800:
+    description: Spacing of 64 CSS pixels.
+    type: length
+    value: 64px
+  space900:
+    description: Spacing of 72 CSS pixels.
+    type: length
+    value: 72px

package/src/state/state.yaml

@@ -0,0 +1,38 @@
+# SPDX-License-Identifier: MPL-2.0
+class: system
+attribute: State
+description: >
+  System roles applied to stateful components. Values follow the Material 3 state tokens
+  (`StateTokens.kt` and `md.sys.state.focus-indicator`).
+roles:
+  layer:
+    description: >
+      State-layer opacities, applied to the state-layer color while the respective interaction
+      state is the highest-precedence state entered into. The press opacity is applied to the
+      press ripple instead, painted above the state layer (`RippleAlpha.pressedAlpha`).
+    type: number
+    roles:
+      dragOpacity: 0.16
+      focusOpacity: 0.1
+      hoverOpacity: 0.08
+      pressOpacity: 0.1
+  focusIndicator:
+    description: Focus indicator roles.
+    roles:
+      thickness:
+        description: Focus indicator thickness.
+        type: length
+        value: 3px
+      innerOffset:
+        description: >
+          Inner focus indicator offset from container. This should be a value less than or equal
+          to zero. When `0`, the indicator is drawn directly outside of the container; the default
+          places the whole indicator inside of the container.
+        type: length
+        value: -3px
+      outerOffset:
+        description: >
+          Outer focus indicator offset from container. This should be a value greater than or equal
+          to zero. When `0`, there is no spacing between container and indicator.
+        type: length
+        value: 2px