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

package/src/icon/icon.yaml

@@ -0,0 +1,31 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Icon
+description: Icon component roles.
+roles:
+  color:
+    description: Icon color.
+    type: color
+    value: $cw-Color-surface-onFill
+  opacity:
+    description: Icon opacity.
+    type: number
+    value: 1
+  fill:
+    description: >
+      Icon fill, from `0` (unfilled) to `1` (filled). Intermediate values interpolate the fill
+      axis of the icon font, so that a transition of this role animates the fill.
+    type: number
+    value: 0
+  grade:
+    description: Precise thickness of icon.
+    type: integer
+    value: 0
+  size:
+    description: Icon size.
+    type: length
+    value: 24px
+  weight:
+    description: Icon weight.
+    type: number
+    value: 400

package/src/input/date-picker.yaml

@@ -0,0 +1,144 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: DatePicker
+description: >
+  Material 3 date picker roles. The defaults describe the modal date and date range pickers
+  (AndroidX `DatePickerModalTokens`); the `docked` theme applies the docked date picker tokens of
+  material-web (`_md-comp-date-picker-docked.scss`).
+roles:
+  containerColor:
+    description: Picker container color.
+    type: color
+    value: $cw-Color-surface-containerHigh
+  containerShape:
+    description: Picker container corner radius.
+    type: length
+    value: $cw-CornerRadius-xlarge
+  containerWidth:
+    description: Picker width.
+    type: length
+    value: 360px
+  headerSupportingTextColor:
+    description: Title color of the header.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  headerHeadlineColor:
+    description: Headline color of the header.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  dividerColor:
+    description: Color of the divider below the header.
+    type: color
+    value: $cw-Color-outlineVariant
+  navigationColor:
+    description: >
+      Color of the year toggle, menu buttons and month arrows (Compose `navigationContentColor`).
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  weekdaysLabelTextColor:
+    description: Weekday column header color.
+    type: color
+    value: $cw-Color-surface-onFill
+  monthSubheadColor:
+    description: Month subhead color of a continuous range list.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  dateCellSize:
+    description: Size of a date cell, its touch target.
+    type: length
+    value: 48px
+  dateContainerSize:
+    description: Diameter of a date container and its state layer.
+    type: length
+    value: 40px
+  dateLabelTextColor:
+    description: Unselected date color, also its state layer color.
+    type: color
+    value: $cw-Color-surface-onFill
+  dateStateLayerColor:
+    description: State layer color of an unselected date.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  dateOutsideMonthLabelTextColor:
+    description: Color of the days of adjacent months in a docked picker.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  dateSelectedContainerColor:
+    description: Selected date container color.
+    type: color
+    value: $cw-Color-primary-fill
+  dateSelectedLabelTextColor:
+    description: Selected date color, also its state layer color.
+    type: color
+    value: $cw-Color-primary-onFill
+  dateTodayColor:
+    description: Color of today's date, its outline and its state layer, while it is not selected.
+    type: color
+    value: $cw-Color-primary-fill
+  dateTodayOutlineWidth:
+    description: Outline width of today's date while it is not selected.
+    type: length
+    value: 1px
+  rangeContainerColor:
+    description: Fill color between the endpoints of a range.
+    type: color
+    value: $cw-Color-secondary-container
+  rangeContainerHeight:
+    description: Height of the fill between the endpoints of a range.
+    type: length
+    value: 40px
+  rangeLabelTextColor:
+    description: Color of the dates between the endpoints of a range.
+    type: color
+    value: $cw-Color-secondary-onContainer
+  rangeListHeight:
+    description: >
+      Height of the scrolling month list of a continuous range picker. Compose fills the screen
+      height; the web adaptation shows about one and a half months.
+    type: length
+    value: 432px
+  disabledOpacity:
+    description: Opacity of the colors of dates and years that cannot be selected.
+    type: number
+    value: 0.38
+  yearContainerWidth:
+    description: Width of a year container and its state layer.
+    type: length
+    value: 72px
+  yearContainerHeight:
+    description: Height of a year container and its state layer.
+    type: length
+    value: 36px
+  yearLabelTextColor:
+    description: Unselected year color, also its state layer color.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  yearSelectedContainerColor:
+    description: Selected year container color.
+    type: color
+    value: $cw-Color-primary-fill
+  yearSelectedLabelTextColor:
+    description: Selected year color, also its state layer color.
+    type: color
+    value: $cw-Color-primary-onFill
+  menuItemHeight:
+    description: Height of a docked month or year list item.
+    type: length
+    value: 48px
+  menuItemLabelTextColor:
+    description: Label color of a docked month or year list item.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  menuItemSelectedContainerColor:
+    description: Container color of the selected docked month or year list item.
+    type: color
+    value: $cw-Color-secondary-container
+  menuItemSelectedLabelTextColor:
+    description: Label color of the selected docked month or year list item.
+    type: color
+    value: $cw-Color-secondary-onContainer
+themes:
+  docked:
+    description: Docked date picker.
+    values:
+      containerShape: $cw-CornerRadius-large

package/src/input/date-range-input.yaml

@@ -0,0 +1,162 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: DateRangeInput
+description: >
+  Date range input roles, after the Material 3 text field. The defaults describe the filled field
+  (AndroidX `FilledTextFieldTokens`); the `outlined` theme applies the outlined field
+  (`OutlinedTextFieldTokens`).
+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 content.
+        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: Date text roles.
+    roles:
+      color:
+        description: Date text and separator color.
+        type: color
+        value: $cw-Color-surface-onFill
+  icon:
+    description: Leading and trailing icon roles.
+    roles:
+      size:
+        description: Icon size.
+        type: length
+        value: 24px
+      color:
+        description: Icon, prefix and suffix 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 of a hovered field.
+    roles:
+      indicatorColor:
+        description: Override for `cw-DateRangeInput-indicator-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 of a field whose date has focus.
+    roles:
+      indicatorColor:
+        description: Override for `cw-DateRangeInput-indicator-color`.
+        type: color
+        value: $cw-Color-primary-fill
+      indicatorThickness:
+        description: Override for `cw-DateRangeInput-indicator-thickness`.
+        type: length
+        value: 2px
+      labelColor:
+        description: Override for `cw-DateRangeInput-label-color`.
+        type: color
+        value: $cw-Color-primary-fill
+  error:
+    description: Roles of an invalid field.
+    roles:
+      indicatorColor:
+        description: Override for `cw-DateRangeInput-indicator-color`.
+        type: color
+        value: $cw-Color-error-fill
+      hoverIndicatorColor:
+        description: Override for `cw-DateRangeInput-indicator-color` while hovered.
+        type: color
+        value: $cw-Color-error-onContainer
+      labelColor:
+        description: Override for `cw-DateRangeInput-label-color`.
+        type: color
+        value: $cw-Color-error-fill
+      supportingTextColor:
+        description: Override for `cw-DateRangeInput-supportingText-color`.
+        type: color
+        value: $cw-Color-error-fill
+  disabled:
+    description: Roles of a disabled field.
+    roles:
+      containerColor:
+        description: Container color.
+        type: color
+        value: $cw-Color-surface-onFill
+      containerOpacity:
+        description: Opacity of the container color.
+        type: number
+        value: 0.04
+      indicatorColor:
+        description: Active indicator color.
+        type: color
+        value: $cw-Color-surface-onFill
+      indicatorOpacity:
+        description: Opacity of the active indicator color.
+        type: number
+        value: 0.38
+      contentColor:
+        description: Label, date, icon and supporting text color.
+        type: color
+        value: $cw-Color-surface-onFill
+      contentOpacity:
+        description: Opacity of the content color.
+        type: number
+        value: 0.38
+themes:
+  outlined:
+    description: Outlined date range input.
+    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

package/src/input/range-slider.yaml

@@ -0,0 +1,161 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: RangeSlider
+description: >
+  Material 3 Expressive range slider roles. Range sliders use the slider token set (AndroidX
+  `SliderTokens`, Compose `SliderDefaults` colors); the defaults describe the extra small range
+  slider and the `small`, `medium`, `large` and `xlarge` themes apply the other sizes, whose track
+  heights, leading track corners and handle heights 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 drawn on the active track.
+    type: color
+    value: $cw-Color-secondary-container
+  inactiveTickColor:
+    description: Color of stops drawn on the inactive tracks.
+    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 tracks.
+    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 handles, limited to half the track height.
+    type: length
+    value: 8px
+  insideCornerSize:
+    description: Corner radius of the track ends next to the handles.
+    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 each handle and the tracks.
+    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
+  labelTextColor:
+    description: Legend and supporting text color.
+    type: color
+    value: $cw-Color-surface-onFill
+  labelSpacing:
+    description: Space between the legend, track and supporting text.
+    type: length
+    value: 8px
+  disabledLabelTextColor:
+    description: Disabled legend and supporting text color.
+    type: color
+    value: $cw-Color-surface-onFill
+  disabledLabelTextOpacity:
+    description: Opacity of the disabled legend 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 range slider.
+    values:
+      trackHeight: 24px
+      trackShape: 8px
+      handleHeight: 44px
+  medium:
+    description: Medium range slider.
+    values:
+      trackHeight: 40px
+      trackShape: 12px
+      handleHeight: 44px
+  large:
+    description: Large range slider.
+    values:
+      trackHeight: 56px
+      trackShape: 16px
+      handleHeight: 68px
+  xlarge:
+    description: Extra large range slider.
+    values:
+      trackHeight: 96px
+      trackShape: 28px
+      handleHeight: 108px