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

package/src/input/select.yaml

@@ -0,0 +1,230 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Select
+description: >
+  Select (exposed dropdown menu) roles. Selects have 2 themes, `filled` (default) and `outlined`.
+  The field roles mirror the text-field roles; the `menu` roles style the option menu where the
+  browser supports a customizable select.
+roles:
+  container:
+    description: Container roles.
+    roles:
+      color:
+        description: Container color.
+        type: color
+        value: $cw-Color-surface-containerHighest
+      height:
+        description: Container height.
+        type: length
+        value: 56px
+      padding:
+        description: Horizontal padding between the container edge and its text.
+        type: length
+        value: 16px
+      shape:
+        description: Container shape.
+        type: length
+        roles:
+          topLeft: $cw-CornerRadius-xsmall
+          topRight: $cw-CornerRadius-xsmall
+          bottomRight: 0px
+          bottomLeft: 0px
+  indicator:
+    description: >
+      Active indicator roles. The active indicator is the bottom line of a filled select and the
+      outline of an outlined select.
+    roles:
+      color:
+        description: Active indicator color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      thickness:
+        description: Active indicator thickness.
+        type: length
+        value: 1px
+  label:
+    description: Label roles.
+    roles:
+      color:
+        description: Label color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+  input:
+    description: Selected-option text roles.
+    roles:
+      color:
+        description: Selected-option text color.
+        type: color
+        value: $cw-Color-surface-onFill
+      placeholderColor:
+        description: Placeholder option text color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+  icon:
+    description: Leading icon and dropdown arrow roles.
+    roles:
+      size:
+        description: Icon size.
+        type: length
+        value: 24px
+      leadingColor:
+        description: Leading icon color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      trailingColor:
+        description: Dropdown arrow color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+  supportingText:
+    description: Supporting text roles.
+    roles:
+      color:
+        description: Supporting text color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+  hover:
+    description: Roles applied while a pointer hovers the container.
+    roles:
+      indicatorColor:
+        description: Override for `cw-Select-indicator-color`.
+        type: color
+        value: $cw-Color-surface-onFill
+      labelColor:
+        description: Override for `cw-Select-label-color`.
+        type: color
+        value: $cw-Color-surface-onFill
+      stateLayerColor:
+        description: State-layer color.
+        type: color
+        value: $cw-Color-surface-onFill
+      stateLayerOpacity:
+        description: State-layer opacity.
+        type: number
+        value: $cw-State-layer-hoverOpacity
+  focus:
+    description: Roles applied while the select has focus.
+    roles:
+      indicatorColor:
+        description: Override for `cw-Select-indicator-color`.
+        type: color
+        value: $cw-Color-primary-fill
+      indicatorThickness:
+        description: Override for `cw-Select-indicator-thickness`.
+        type: length
+        value: 2px
+      labelColor:
+        description: Override for `cw-Select-label-color`.
+        type: color
+        value: $cw-Color-primary-fill
+      trailingIconColor:
+        description: Override for `cw-Select-icon-trailingColor`.
+        type: color
+        value: $cw-Color-primary-fill
+  error:
+    description: Roles applied while the select shows an error.
+    roles:
+      indicatorColor:
+        description: Override for `cw-Select-indicator-color`.
+        type: color
+        value: $cw-Color-error-fill
+      labelColor:
+        description: Override for `cw-Select-label-color`.
+        type: color
+        value: $cw-Color-error-fill
+      trailingIconColor:
+        description: Override for `cw-Select-icon-trailingColor`.
+        type: color
+        value: $cw-Color-error-fill
+      supportingTextColor:
+        description: Override for `cw-Select-supportingText-color`.
+        type: color
+        value: $cw-Color-error-fill
+      hoverIndicatorColor:
+        description: Override for `cw-Select-indicator-color` while hovered.
+        type: color
+        value: $cw-Color-error-onContainer
+      hoverLabelColor:
+        description: Override for `cw-Select-label-color` while hovered.
+        type: color
+        value: $cw-Color-error-onContainer
+      hoverTrailingIconColor:
+        description: Override for `cw-Select-icon-trailingColor` while hovered.
+        type: color
+        value: $cw-Color-error-onContainer
+  disabled:
+    description: Roles applied while the select is disabled.
+    roles:
+      containerColor:
+        description: Override for `cw-Select-container-color`.
+        type: color
+        value: $cw-Color-surface-onFill
+      containerOpacity:
+        description: Opacity of the container color.
+        type: number
+        value: 0.04
+      indicatorColor:
+        description: Override for `cw-Select-indicator-color`.
+        type: color
+        value: $cw-Color-surface-onFill
+      indicatorOpacity:
+        description: Opacity of the active indicator color.
+        type: number
+        value: 0.38
+      contentColor:
+        description: Color of the label, text, icons and supporting text.
+        type: color
+        value: $cw-Color-surface-onFill
+      contentOpacity:
+        description: Opacity of the content color.
+        type: number
+        value: 0.38
+  menu:
+    description: Option menu roles, used where the browser supports a customizable select.
+    roles:
+      color:
+        description: Menu container color.
+        type: color
+        value: $cw-Color-surface-container
+      shadowColor:
+        description: Menu elevation shadow color. The menu is raised to elevation level 2.
+        type: color
+        value: $cw-Color-shadow
+      shape:
+        description: Menu container corner radius.
+        type: length
+        value: $cw-CornerRadius-xsmall
+      itemHeight:
+        description: Menu item height.
+        type: length
+        value: 48px
+      itemPadding:
+        description: Horizontal menu item padding, aligning item text with the field text.
+        type: length
+        value: 16px
+      itemLabelColor:
+        description: Menu item label color.
+        type: color
+        value: $cw-Color-surface-onFill
+      itemStateLayerColor:
+        description: Menu item state-layer color, shown while an item is hovered or focused.
+        type: color
+        value: $cw-Color-surface-onFill
+      selectedItemColor:
+        description: Container color of the selected menu item.
+        type: color
+        value: $cw-Color-secondary-container
+      selectedItemLabelColor:
+        description: Label color of the selected menu item.
+        type: color
+        value: $cw-Color-secondary-onContainer
+themes:
+  outlined:
+    description: Outlined select values.
+    values:
+      container-color: "#00000000"
+      container-shape-bottomLeft: $cw-CornerRadius-xsmall
+      container-shape-bottomRight: $cw-CornerRadius-xsmall
+      indicator-color: $cw-Color-outline
+      hover-stateLayerOpacity: 0
+      disabled-containerOpacity: 0
+      disabled-indicatorOpacity: 0.12

package/src/input/slider.yaml

@@ -0,0 +1,172 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Slider
+description: >
+  Material 3 Expressive slider roles, after AndroidX `SliderTokens` and Compose `SliderDefaults`
+  colors. The default values describe the extra small slider; the `small`, `medium`, `large` and
+  `xlarge` themes apply the other sizes. Track heights, leading track corners, handle heights and
+  inset icon sizes of every size are the `m3_comp_slider_*` dimensions of
+  material-components-android `lib/java/com/google/android/material/slider/res/values/tokens.xml`.
+roles:
+  activeTrackColor:
+    description: Active track and stop indicator color.
+    type: color
+    value: $cw-Color-primary-fill
+  inactiveTrackColor:
+    description: Inactive track color.
+    type: color
+    value: $cw-Color-secondary-container
+  activeTickColor:
+    description: Color of stops and inset icons drawn on the active track.
+    type: color
+    value: $cw-Color-secondary-container
+  inactiveTickColor:
+    description: Color of stops and inset icons drawn on the inactive track.
+    type: color
+    value: $cw-Color-primary-fill
+  handleColor:
+    description: Handle color.
+    type: color
+    value: $cw-Color-primary-fill
+  disabledActiveTrackColor:
+    description: >
+      Disabled active track and stop indicator color, also used for stops on the inactive track.
+    type: color
+    value: $cw-Color-surface-onFill
+  disabledActiveTrackOpacity:
+    description: Opacity of the disabled active track color.
+    type: number
+    value: 0.38
+  disabledInactiveTrackColor:
+    description: Disabled inactive track color, also used for stops on the active track.
+    type: color
+    value: $cw-Color-surface-onFill
+  disabledInactiveTrackOpacity:
+    description: Opacity of the disabled inactive track color.
+    type: number
+    value: 0.12
+  disabledHandleColor:
+    description: Disabled handle color, composited over the surface color.
+    type: color
+    value: $cw-Color-surface-onFill
+  disabledHandleOpacity:
+    description: Opacity of the disabled handle color.
+    type: number
+    value: 0.38
+  valueIndicatorContainerColor:
+    description: Value indicator container color.
+    type: color
+    value: $cw-Color-surface-inverseFill
+  valueIndicatorLabelTextColor:
+    description: Value indicator text color.
+    type: color
+    value: $cw-Color-surface-inverseOnFill
+  valueIndicatorHeight:
+    description: Value indicator container height.
+    type: length
+    value: 44px
+  valueIndicatorWidth:
+    description: Minimum value indicator container width.
+    type: length
+    value: 48px
+  valueIndicatorBottomSpace:
+    description: Space between the value indicator and the handle.
+    type: length
+    value: 12px
+  trackHeight:
+    description: Active and inactive track height.
+    type: length
+    value: 16px
+  trackShape:
+    description: >
+      Corner radius of the track ends away from the handle, limited to half the track height.
+    type: length
+    value: 8px
+  insideCornerSize:
+    description: Corner radius of the track ends next to the handle.
+    type: length
+    value: 2px
+  handleHeight:
+    description: Handle height.
+    type: length
+    value: 44px
+  handleWidth:
+    description: Handle width at rest and while hovered.
+    type: length
+    value: 4px
+  pressedHandleWidth:
+    description: Handle width while pressed, dragged or focused.
+    type: length
+    value: 2px
+  handleGap:
+    description: Space between the handle and each track.
+    type: length
+    value: 6px
+  stopIndicatorSize:
+    description: Diameter of stop indicators and step stops.
+    type: length
+    value: 4px
+  tickMinSpacing:
+    description: Minimum distance between drawn step stops; denser steps draw every n-th stop.
+    type: length
+    value: 8px
+  insetIconSize:
+    description: Inset icon size.
+    type: length
+    value: 24px
+  insetIconPadding:
+    description: Space between an inset icon and the end of its track.
+    type: length
+    value: 10px
+  labelTextColor:
+    description: Label and supporting text color.
+    type: color
+    value: $cw-Color-surface-onFill
+  labelSpacing:
+    description: Space between the label, track and supporting text.
+    type: length
+    value: 8px
+  disabledLabelTextColor:
+    description: Disabled label and supporting text color.
+    type: color
+    value: $cw-Color-surface-onFill
+  disabledLabelTextOpacity:
+    description: Opacity of the disabled label and supporting text color.
+    type: number
+    value: 0.38
+  touchTargetSize:
+    description: Minimum size of the interactive area across the track.
+    type: length
+    value: 48px
+  minLength:
+    description: Minimum track container length, along the slider orientation.
+    type: length
+    value: 12rem
+themes:
+  small:
+    description: Small slider.
+    values:
+      trackHeight: 24px
+      trackShape: 8px
+      handleHeight: 44px
+  medium:
+    description: Medium slider.
+    values:
+      trackHeight: 40px
+      trackShape: 12px
+      handleHeight: 44px
+      insetIconSize: 24px
+  large:
+    description: Large slider.
+    values:
+      trackHeight: 56px
+      trackShape: 16px
+      handleHeight: 68px
+      insetIconSize: 24px
+  xlarge:
+    description: Extra large slider.
+    values:
+      trackHeight: 96px
+      trackShape: 28px
+      handleHeight: 108px
+      insetIconSize: 32px

package/src/input/text-field.yaml

@@ -0,0 +1,240 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: TextField
+description: >
+  Text-field roles, shared by text, password, date, time and autocomplete fields. Text fields have
+  2 themes, `filled` (default) and `outlined`. Autocomplete fields additionally use the `menu`
+  roles for their suggestion menu.
+roles:
+  container:
+    description: Container roles.
+    roles:
+      color:
+        description: Container color.
+        type: color
+        value: $cw-Color-surface-containerHighest
+      height:
+        description: Minimum container height.
+        type: length
+        value: 56px
+      padding:
+        description: Horizontal padding between the container edge and its text.
+        type: length
+        value: 16px
+      shape:
+        description: Container shape.
+        type: length
+        roles:
+          topLeft: $cw-CornerRadius-xsmall
+          topRight: $cw-CornerRadius-xsmall
+          bottomRight: 0px
+          bottomLeft: 0px
+  indicator:
+    description: >
+      Active indicator roles. The active indicator is the bottom line of a filled field and the
+      outline of an outlined field.
+    roles:
+      color:
+        description: Active indicator color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      thickness:
+        description: Active indicator thickness.
+        type: length
+        value: 1px
+  label:
+    description: Label roles.
+    roles:
+      color:
+        description: Label color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+  input:
+    description: Input text roles.
+    roles:
+      color:
+        description: Input text color.
+        type: color
+        value: $cw-Color-surface-onFill
+      caretColor:
+        description: Text cursor color.
+        type: color
+        value: $cw-Color-primary-fill
+      placeholderColor:
+        description: Placeholder text color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      affixColor:
+        description: Prefix and suffix text color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+  icon:
+    description: Leading and trailing icon roles.
+    roles:
+      size:
+        description: Icon size.
+        type: length
+        value: 24px
+      leadingColor:
+        description: Leading icon color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      trailingColor:
+        description: Trailing icon color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+  supportingText:
+    description: Supporting text and character counter roles.
+    roles:
+      color:
+        description: Supporting text color.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+  hover:
+    description: Roles applied while a pointer hovers the container.
+    roles:
+      indicatorColor:
+        description: Override for `cw-TextField-indicator-color`.
+        type: color
+        value: $cw-Color-surface-onFill
+      labelColor:
+        description: Override for `cw-TextField-label-color`.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      stateLayerColor:
+        description: State-layer color.
+        type: color
+        value: $cw-Color-surface-onFill
+      stateLayerOpacity:
+        description: State-layer opacity.
+        type: number
+        value: $cw-State-layer-hoverOpacity
+  focus:
+    description: Roles applied while the input has focus.
+    roles:
+      indicatorColor:
+        description: Override for `cw-TextField-indicator-color`.
+        type: color
+        value: $cw-Color-primary-fill
+      indicatorThickness:
+        description: Override for `cw-TextField-indicator-thickness`.
+        type: length
+        value: 2px
+      labelColor:
+        description: Override for `cw-TextField-label-color`.
+        type: color
+        value: $cw-Color-primary-fill
+      trailingIconColor:
+        description: Override for `cw-TextField-icon-trailingColor`.
+        type: color
+        value: $cw-Color-surface-onFillVariant
+  error:
+    description: Roles applied while the field shows an error.
+    roles:
+      indicatorColor:
+        description: Override for `cw-TextField-indicator-color`.
+        type: color
+        value: $cw-Color-error-fill
+      labelColor:
+        description: Override for `cw-TextField-label-color`.
+        type: color
+        value: $cw-Color-error-fill
+      caretColor:
+        description: Override for `cw-TextField-input-caretColor`.
+        type: color
+        value: $cw-Color-error-fill
+      trailingIconColor:
+        description: Override for `cw-TextField-icon-trailingColor`.
+        type: color
+        value: $cw-Color-error-fill
+      supportingTextColor:
+        description: Override for `cw-TextField-supportingText-color`.
+        type: color
+        value: $cw-Color-error-fill
+      hoverIndicatorColor:
+        description: Override for `cw-TextField-indicator-color` while hovered.
+        type: color
+        value: $cw-Color-error-onContainer
+      hoverLabelColor:
+        description: Override for `cw-TextField-label-color` while hovered.
+        type: color
+        value: $cw-Color-error-onContainer
+      hoverTrailingIconColor:
+        description: Override for `cw-TextField-icon-trailingColor` while hovered.
+        type: color
+        value: $cw-Color-error-onContainer
+  disabled:
+    description: Roles applied while the field is disabled.
+    roles:
+      containerColor:
+        description: Override for `cw-TextField-container-color`.
+        type: color
+        value: $cw-Color-surface-onFill
+      containerOpacity:
+        description: Opacity of the container color.
+        type: number
+        value: 0.04
+      indicatorColor:
+        description: Override for `cw-TextField-indicator-color`.
+        type: color
+        value: $cw-Color-surface-onFill
+      indicatorOpacity:
+        description: Opacity of the active indicator color.
+        type: number
+        value: 0.38
+      contentColor:
+        description: Color of the label, text, icons and supporting text.
+        type: color
+        value: $cw-Color-surface-onFill
+      contentOpacity:
+        description: Opacity of the content color.
+        type: number
+        value: 0.38
+  menu:
+    description: Suggestion menu roles of autocomplete fields.
+    roles:
+      color:
+        description: Menu container color.
+        type: color
+        value: $cw-Color-surface-container
+      elevation:
+        description: Menu container elevation.
+        type: integer
+        value: $cw-Elevation-level-2
+      shadowColor:
+        description: Menu elevation shadow color.
+        type: color
+        value: $cw-Color-shadow
+      shape:
+        description: Menu container corner radius.
+        type: length
+        value: $cw-CornerRadius-xsmall
+      itemHeight:
+        description: Menu item height.
+        type: length
+        value: 48px
+      itemPadding:
+        description: Horizontal menu item padding, aligning item text with the field text.
+        type: length
+        value: 16px
+      itemLabelColor:
+        description: Menu item label color.
+        type: color
+        value: $cw-Color-surface-onFill
+      itemStateLayerColor:
+        description: >
+          Menu item state-layer color, shown while an item is hovered, pressed or active.
+        type: color
+        value: $cw-Color-surface-onFill
+themes:
+  outlined:
+    description: Outlined text-field values.
+    values:
+      container-color: "#00000000"
+      container-shape-bottomLeft: $cw-CornerRadius-xsmall
+      container-shape-bottomRight: $cw-CornerRadius-xsmall
+      indicator-color: $cw-Color-outline
+      hover-labelColor: $cw-Color-surface-onFill
+      hover-stateLayerOpacity: 0
+      disabled-containerOpacity: 0
+      disabled-indicatorOpacity: 0.12