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

package/src/color/palette.yaml

@@ -0,0 +1,147 @@
+# SPDX-License-Identifier: MPL-2.0
+class: reference
+attribute: Palette
+description: >
+  Reference color palette roles. For each color palette, roles `0` through `100` are defined.
+  These roles serve as input for the `cw-Color` design attribute.
+
+  Each palette holds the tones of a single key color, as a Material tonal palette of an HCT hue
+  and chroma: primary 316.5 and 66.6, secondary 316 and 22.7, tertiary 16 and 33.5, error 25 and
+  84 (Material's error palette), neutral 316.4 and 4.0, and neutral variant 316 and 8.5.
+roles:
+  primary:
+    type: color
+    roles:
+      0: "#000000"
+      5: "#200034"
+      10: "#30004B"
+      15: "#3F0061"
+      20: "#4F0078"
+      25: "#5F008F"
+      30: "#6C189C"
+      35: "#7929A9"
+      40: "#8638B6"
+      50: "#A153D1"
+      60: "#BD6EEE"
+      70: "#D58EFF"
+      80: "#E5B4FF"
+      90: "#F4D9FF"
+      95: "#FCECFF"
+      98: "#FFF7FC"
+      99: "#FFFBFF"
+      100: "#FFFFFF"
+  secondary:
+    type: color
+    roles:
+      0: "#000000"
+      5: "#1A0A23"
+      10: "#25152F"
+      15: "#301F3A"
+      20: "#3B2A45"
+      25: "#473550"
+      30: "#52405C"
+      35: "#5F4B69"
+      40: "#6B5775"
+      50: "#85708F"
+      60: "#9F89A9"
+      70: "#BBA3C5"
+      80: "#D7BEE1"
+      90: "#F4DAFE"
+      95: "#FCECFF"
+      98: "#FFF7FC"
+      99: "#FFFBFF"
+      100: "#FFFFFF"
+  tertiary:
+    type: color
+    roles:
+      0: "#000000"
+      5: "#2A0206"
+      10: "#390A10"
+      15: "#461519"
+      20: "#541F23"
+      25: "#622A2D"
+      30: "#703538"
+      35: "#7E4043"
+      40: "#8C4C4F"
+      50: "#A96366"
+      60: "#C77C7F"
+      70: "#E59699"
+      80: "#FFB3B5"
+      90: "#FFDADA"
+      95: "#FFEDEC"
+      98: "#FFF8F7"
+      99: "#FFFBFF"
+      100: "#FFFFFF"
+  error:
+    type: color
+    roles:
+      0: "#000000"
+      5: "#2D0001"
+      10: "#410002"
+      15: "#540003"
+      20: "#690005"
+      25: "#7E0007"
+      30: "#93000A"
+      35: "#A80710"
+      40: "#BA1A1A"
+      50: "#DE3730"
+      60: "#FF5449"
+      70: "#FF897D"
+      80: "#FFB4AB"
+      90: "#FFDAD6"
+      95: "#FFEDEA"
+      98: "#FFF8F7"
+      99: "#FFFBFF"
+      100: "#FFFFFF"
+  neutral:
+    type: color
+    roles:
+      0: "#000000"
+      4: "#100D10"
+      5: "#131013"
+      6: "#151216"
+      10: "#1D1B1E"
+      12: "#221F22"
+      15: "#282528"
+      17: "#2C292C"
+      20: "#332F33"
+      22: "#373437"
+      24: "#3C383C"
+      25: "#3E3A3E"
+      30: "#494649"
+      35: "#555155"
+      40: "#615D61"
+      50: "#7A767A"
+      60: "#958F93"
+      70: "#AFA9AE"
+      80: "#CBC5C9"
+      87: "#DFD8DD"
+      90: "#E8E0E5"
+      92: "#EDE6EB"
+      94: "#F3ECF0"
+      95: "#F6EFF3"
+      96: "#F9F1F6"
+      98: "#FFF7FC"
+      99: "#FFFBFF"
+      100: "#FFFFFF"
+  neutralVariant:
+    type: color
+    roles:
+      0: "#000000"
+      5: "#140F16"
+      10: "#1F1A21"
+      15: "#29242C"
+      20: "#342E36"
+      25: "#403942"
+      30: "#4B454D"
+      35: "#575059"
+      40: "#635C65"
+      50: "#7D747E"
+      60: "#978E98"
+      70: "#B2A8B2"
+      80: "#CEC3CE"
+      90: "#EADFEA"
+      95: "#F9EDF8"
+      98: "#FFF7FC"
+      99: "#FFFBFF"
+      100: "#FFFFFF"

package/src/container/card.yaml

@@ -0,0 +1,170 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Card
+description: >
+  Card component roles. Cards have 3 themes, `elevated`, `filled` (default), and `outlined`.
+roles:
+  container:
+    description: Container roles.
+    roles:
+      color:
+        description: Container color.
+        type: color
+        value: $cw-Color-surface-containerHighest
+      elevation:
+        description: Container elevation.
+        type: integer
+        value: $cw-Elevation-level-0
+      shadowColor:
+        description: Elevation shadow color.
+        type: color
+        value: $cw-Color-shadow
+      outlineColor:
+        description: Container outline color.
+        type: color
+        value: $cw-Color-outline
+      outlineThickness:
+        description: Container outline thickness.
+        type: length
+        value: 0px
+      shape:
+        description: Container shape.
+        type: length
+        roles:
+          topLeft: $cw-CornerRadius-medium
+          topRight: $cw-CornerRadius-medium
+          bottomRight: $cw-CornerRadius-medium
+          bottomLeft: $cw-CornerRadius-medium
+  content:
+    description: Content roles.
+    roles:
+      color:
+        description: >
+          Color of content within the container, the foreground color paired with the container
+          color of every theme.
+        type: color
+        value: $cw-Color-surface-onFill
+  disabled:
+    description: Roles applied when card is disabled.
+    roles:
+      containerColor:
+        description: Override for `cw-Card-container-color`.
+        type: color
+        value: $cw-Color-surface-fillVariant
+      containerElevation:
+        description: Override for `cw-Card-container-elevation`.
+        type: integer
+        value: $cw-Elevation-level-0
+      containerOpacity:
+        description: Opacity of container color.
+        type: number
+        value: 0.38
+      containerOutlineColor:
+        description: Override for `cw-Card-container-outlineColor`.
+        type: color
+        value: $cw-Color-outline
+      containerOutlineOpacity:
+        description: Opacity of container outline.
+        type: number
+        value: 0.12
+      contentOpacity:
+        description: Opacity of content color.
+        type: number
+        value: 0.38
+  hover:
+    description: Roles applied when card enters hover interaction state.
+    roles:
+      containerElevation:
+        description: Override for `cw-Card-container-elevation`.
+        type: integer
+        value: $cw-Elevation-level-1
+      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 when card enters focus interaction state.
+    roles:
+      containerElevation:
+        description: Override for `cw-Card-container-elevation`.
+        type: integer
+        value: $cw-Elevation-level-0
+      containerOutlineColor:
+        description: Override for `cw-Card-container-outlineColor`.
+        type: color
+        value: $cw-Card-container-outlineColor
+      stateLayerColor:
+        description: State-layer color.
+        type: color
+        value: $cw-Color-surface-onFill
+      stateLayerOpacity:
+        description: State-layer opacity.
+        type: number
+        value: $cw-State-layer-focusOpacity
+      indicatorColor:
+        description: Focus indicator color.
+        type: color
+        value: $cw-Color-secondary-fill
+      indicatorThickness:
+        description: Focus indicator thickness.
+        type: length
+        value: $cw-State-focusIndicator-thickness
+      indicatorOffset:
+        description: Offset of focus indicator from container.
+        type: length
+        value: $cw-State-focusIndicator-outerOffset
+  press:
+    description: Roles applied when card enters press interaction state.
+    roles:
+      containerElevation:
+        description: Override for `cw-Card-container-elevation`.
+        type: integer
+        value: $cw-Elevation-level-0
+      stateLayerColor:
+        description: State-layer color.
+        type: color
+        value: $cw-Color-surface-onFill
+      stateLayerOpacity:
+        description: State-layer opacity.
+        type: number
+        value: $cw-State-layer-pressOpacity
+  drag:
+    description: Roles applied when card enters drag interaction state.
+    roles:
+      containerElevation:
+        description: Override for `cw-Card-container-elevation`.
+        type: integer
+        value: $cw-Elevation-level-3
+      stateLayerColor:
+        description: State-layer color.
+        type: color
+        value: $cw-Color-surface-onFill
+      stateLayerOpacity:
+        description: State-layer opacity.
+        type: number
+        value: $cw-State-layer-dragOpacity
+themes:
+  elevated:
+    description: Elevated card theme.
+    values:
+      container-color: $cw-Color-surface-containerLow
+      container-elevation: $cw-Elevation-level-1
+      disabled-containerColor: $cw-Color-surface-fill
+      disabled-containerElevation: $cw-Elevation-level-1
+      drag-containerElevation: $cw-Elevation-level-4
+      focus-containerElevation: $cw-Elevation-level-1
+      hover-containerElevation: $cw-Elevation-level-2
+      press-containerElevation: $cw-Elevation-level-1
+  outlined:
+    description: Outlined card theme.
+    values:
+      container-color: $cw-Color-surface-fill
+      container-outlineColor: $cw-Color-outlineVariant
+      container-outlineThickness: 1px
+      disabled-containerColor: $cw-Card-theme-outlined--container-color
+      disabled-containerOpacity: 1
+      focus-containerOutlineColor: $cw-Color-surface-onFill

package/src/container/corner-radius.yaml

@@ -0,0 +1,50 @@
+# SPDX-License-Identifier: MPL-2.0
+class: system
+attribute: CornerRadius
+description: System roles controlling corner radius of a container.
+roles:
+  none:
+    description: Square corner.
+    type: length
+    value: 0px
+  full:
+    description: >
+      Fully rounded corner. The radius exceeds the size of any container, so the shorter side of
+      the container is rounded into a semicircle. This must never be a transition endpoint, since
+      the rendered corner changes only while an interpolated radius is below half the shorter side;
+      a container morphing to or from a fully rounded corner interpolates to or from half its
+      shorter side instead.
+    type: length
+    value: 9999px
+  xsmall:
+    description: Extra small corner radius.
+    type: length
+    value: 4px
+  small:
+    description: Small corner radius.
+    type: length
+    value: 8px
+  medium:
+    description: Medium corner radius.
+    type: length
+    value: 12px
+  large:
+    description: Large corner radius.
+    type: length
+    value: 16px
+  largeIncreased:
+    description: Slightly larger variant of `large`.
+    type: length
+    value: 20px
+  xlarge:
+    description: Extra large corner radius.
+    type: length
+    value: 28px
+  xlargeIncreased:
+    description: Slightly larger variant of `xlarge`.
+    type: length
+    value: 32px
+  xxlarge:
+    description: Extra extra large corner radius.
+    type: length
+    value: 48px

package/src/container/elevation.yaml

@@ -0,0 +1,19 @@
+# SPDX-License-Identifier: MPL-2.0
+class: system
+attribute: Elevation
+description: >
+  Elevation roles used for elevated containers. Elevation levels are defined in terms of their
+  distance from the surface of the UI.
+roles:
+  level:
+    description: >
+      Elevation levels, where `0` is base elevation of the UI and `5` is highest elevation above
+      the UI.
+    type: integer
+    roles:
+      0: 0
+      1: 1
+      2: 2
+      3: 3
+      4: 4
+      5: 5

package/src/design.yaml

@@ -0,0 +1,41 @@
+# SPDX-License-Identifier: MPL-2.0
+system: cw
+attributes:
+  - action/action
+  - action/button
+  - action/button-group
+  - action/split-button
+  - color/color
+  - color/palette
+  - container/card
+  - container/corner-radius
+  - container/elevation
+  - feedback/feedback
+  - icon/icon
+  - icon/icon-font
+  - input/date-picker
+  - input/date-range-input
+  - input/range-slider
+  - input/select
+  - input/slider
+  - input/text-field
+  - input/time-picker
+  - motion/motion
+  - navigation/app-bar
+  - navigation/navigation
+  - navigation/scroll
+  - navigation/search
+  - navigation/tabs
+  - navigation/toolbar
+  - selection/checkbox
+  - selection/chip
+  - selection/radio
+  - selection/segmented
+  - selection/segmented-group
+  - selection/switch
+  - state/state
+  - spacing/measurement
+  - surface/surface
+  - text/typeface
+  - text/line-height
+  - text/typescale

package/src/feedback/feedback.yaml

@@ -0,0 +1,225 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Feedback
+description: >
+  Material 3 feedback roles for badges, progress indicators, loading indicators, snackbars, and
+  tooltips. Values follow the AndroidX Material 3 component tokens (`BadgeTokens`,
+  `ProgressIndicatorTokens`, `LinearProgressIndicatorTokens`, `LoadingIndicatorTokens`,
+  `SnackbarTokens`, `PlainTooltipTokens`, and `RichTooltipTokens`) and the layout constants of the
+  corresponding Compose components. Geometry which a controller computes, such as progress
+  thickness, sizes, gaps, and wavelengths, is defined by the components themselves. Rich tooltips
+  apply the `richTooltip` theme.
+roles:
+  badge:
+    description: Badge roles (`BadgeTokens`, `Badge.kt`).
+    roles:
+      containerColor:
+        description: Badge container color (`BadgeTokens.Color`, `BadgeTokens.LargeColor`).
+        type: color
+        value: $cw-Color-error-fill
+      labelColor:
+        description: Large badge label color (`BadgeTokens.LargeLabelTextColor`).
+        type: color
+        value: $cw-Color-error-onFill
+      shape:
+        description: Badge corner radius (`BadgeTokens.Shape`, `BadgeTokens.LargeShape`).
+        type: length
+        value: $cw-CornerRadius-full
+      size:
+        description: Small badge diameter (`BadgeTokens.Size`).
+        type: length
+        value: 6px
+      largeSize:
+        description: Large badge minimum height and width (`BadgeTokens.LargeSize`).
+        type: length
+        value: 16px
+      horizontalPadding:
+        description: >
+          Space before and after a large badge label (`BadgeWithContentHorizontalPadding`).
+        type: length
+        value: 4px
+      offset:
+        description: >
+          Distance of a small badge from the end edge of its anchor; the badge's top edge aligns
+          with the anchor's top edge (`BadgeOffset`).
+        type: length
+        value: 6px
+      largeHorizontalOffset:
+        description: >
+          Distance from the end edge of the anchor to the start edge of a large badge
+          (`BadgeWithContentHorizontalOffset`).
+        type: length
+        value: 12px
+      largeVerticalOffset:
+        description: >
+          Vertical overlap of a large badge with its anchor (`BadgeWithContentVerticalOffset`).
+        type: length
+        value: 14px
+  progress:
+    description: Progress indicator roles (`ProgressIndicatorTokens`, `ProgressIndicator.kt`).
+    roles:
+      indicatorColor:
+        description: >
+          Active indicator and stop indicator color (`ProgressIndicatorTokens.ActiveIndicatorColor`,
+          `ProgressIndicatorTokens.StopColor`).
+        type: color
+        value: $cw-Color-primary-fill
+      trackColor:
+        description: Track color (`ProgressIndicatorTokens.TrackColor`).
+        type: color
+        value: $cw-Color-secondary-container
+      stopSize:
+        description: >
+          Maximum stop indicator diameter; it never exceeds the track thickness
+          (`LinearProgressIndicatorTokens.StopSize`).
+        type: length
+        value: 4px
+      stopTrailingSpace:
+        description: >
+          Maximum distance between the stop indicator and the end of the track
+          (`ProgressIndicator.kt` `StopIndicatorTrailingSpace`).
+        type: length
+        value: 6px
+      width:
+        description: Default linear indicator width (`ProgressIndicator.kt` `LinearIndicatorWidth`).
+        type: length
+        value: 240px
+      motion:
+        description: >
+          Spring used when a determinate value changes. This is the critically damped, very low
+          stiffness spring Compose recommends for progress changes
+          (`ProgressIndicatorDefaults.ProgressAnimationSpec`: `Spring.DampingRatioNoBouncy`,
+          `Spring.StiffnessVeryLow`).
+        roles:
+          easing:
+            description: Value motion easing.
+            type: easing-function
+            value: cw-spring-motion-of(curve, 50, 1)
+          duration:
+            description: Value motion duration.
+            type: time
+            value: cw-spring-motion-of(duration, 50, 1)
+  loading:
+    description: Loading indicator roles (`LoadingIndicatorTokens`).
+    roles:
+      color:
+        description: Active indicator color (`LoadingIndicatorTokens.ActiveIndicatorColor`).
+        type: color
+        value: $cw-Color-primary-fill
+      size:
+        description: >
+          Container width and height (`LoadingIndicatorTokens.ContainerWidth`,
+          `LoadingIndicatorTokens.ContainerHeight`).
+        type: length
+        value: 48px
+      containerColor:
+        description: >
+          Contained indicator container color (`LoadingIndicatorTokens.ContainedContainerColor`).
+        type: color
+        value: $cw-Color-primary-container
+      containedColor:
+        description: >
+          Contained indicator active color (`LoadingIndicatorTokens.ContainedActiveColor`).
+        type: color
+        value: $cw-Color-primary-onContainer
+      containerShape:
+        description: Contained indicator corner radius (`LoadingIndicatorTokens.ContainerShape`).
+        type: length
+        value: $cw-CornerRadius-full
+  snackbar:
+    description: Snackbar roles (`SnackbarTokens`, `Snackbar.kt`).
+    roles:
+      containerColor:
+        description: Container color (`SnackbarTokens.ContainerColor`).
+        type: color
+        value: $cw-Color-surface-inverseFill
+      labelColor:
+        description: Supporting text color (`SnackbarTokens.SupportingTextColor`).
+        type: color
+        value: $cw-Color-surface-inverseOnFill
+      actionColor:
+        description: Action label and state-layer color (`SnackbarTokens.ActionLabelTextColor`).
+        type: color
+        value: $cw-Color-primary-inverseFill
+      iconColor:
+        description: Dismiss icon and state-layer color (`SnackbarTokens.IconColor`).
+        type: color
+        value: $cw-Color-surface-inverseOnFill
+      shape:
+        description: Container corner radius (`SnackbarTokens.ContainerShape`).
+        type: length
+        value: $cw-CornerRadius-xsmall
+      elevation:
+        description: Container elevation (`SnackbarTokens.ContainerElevation`).
+        type: integer
+        value: $cw-Elevation-level-3
+      height:
+        description: Single-line container height (`SnackbarTokens.SingleLineContainerHeight`).
+        type: length
+        value: 48px
+      maxWidth:
+        description: Maximum container width (`Snackbar.kt` `ContainerMaxWidth`).
+        type: length
+        value: 600px
+  tooltip:
+    description: >
+      Tooltip roles (`PlainTooltipTokens`, `RichTooltipTokens`, `Tooltip.kt`). Plain tooltips use
+      the default values; rich tooltips apply the `richTooltip` theme.
+    roles:
+      containerColor:
+        description: Container color (`PlainTooltipTokens.ContainerColor`).
+        type: color
+        value: $cw-Color-surface-inverseFill
+      labelColor:
+        description: Supporting text color (`PlainTooltipTokens.SupportingTextColor`).
+        type: color
+        value: $cw-Color-surface-inverseOnFill
+      subheadColor:
+        description: Rich tooltip title color (`RichTooltipTokens.SubheadColor`).
+        type: color
+        value: $cw-Color-surface-onFillVariant
+      actionColor:
+        description: Rich tooltip action color (`RichTooltipTokens.ActionLabelTextColor`).
+        type: color
+        value: $cw-Color-primary-fill
+      shape:
+        description: Container corner radius (`PlainTooltipTokens.ContainerShape`).
+        type: length
+        value: $cw-CornerRadius-xsmall
+      elevation:
+        description: Container elevation; plain tooltips have none (`Tooltip.kt`).
+        type: integer
+        value: $cw-Elevation-level-0
+      minWidth:
+        description: Minimum container width (`Tooltip.kt` `TooltipMinWidth`).
+        type: length
+        value: 40px
+      maxWidth:
+        description: Maximum container width (`TooltipDefaults.plainTooltipMaxWidth`).
+        type: length
+        value: 200px
+      minHeight:
+        description: Minimum container height (`Tooltip.kt` `TooltipMinHeight`).
+        type: length
+        value: 24px
+      caretWidth:
+        description: Caret base width (`TooltipDefaults.caretSize`).
+        type: length
+        value: 16px
+      caretHeight:
+        description: Caret height (`TooltipDefaults.caretSize`).
+        type: length
+        value: 8px
+themes:
+  richTooltip:
+    description: Rich tooltip surface (`RichTooltipTokens`, `TooltipDefaults.richTooltipMaxWidth`).
+    values:
+      tooltip-containerColor: $cw-Color-surface-container
+      tooltip-labelColor: $cw-Color-surface-onFillVariant
+      tooltip-shape: $cw-CornerRadius-medium
+      tooltip-elevation: $cw-Elevation-level-2
+      tooltip-maxWidth: 320px
+  reducedMotion:
+    description: Progress value changes apply immediately when reduced motion is preferred.
+    values:
+      progress-motion-duration: 0s

package/src/icon/icon-font.yaml

@@ -0,0 +1,28 @@
+# SPDX-License-Identifier: MPL-2.0
+class: reference
+attribute: IconFont
+description: >
+  Reference icon font roles. Cobweb does not bundle the icon font; applications load it, for
+  example with an `@font-face` rule, including the axes named below.
+roles:
+  font:
+    description: >
+      Icon font family. It names a single family, since a fallback font would render icon names
+      as text.
+    type: font-family
+    value: Material Symbols Outlined
+  axis:
+    description: Axis tags recognized by icon font.
+    roles:
+      fill:
+        description: Icon fill axis name.
+        type: string
+        value: FILL
+      grade:
+        description: Icon grade axis name.
+        type: string
+        value: GRAD
+      weight:
+        description: Icon weight axis name.
+        type: string
+        value: wght