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

package/src/action/button-group.yaml

@@ -0,0 +1,56 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: ButtonGroup
+description: >
+  Material 3 Expressive button-group geometry. A group sizes its buttons with the matching
+  `cw-Button` size theme; these roles define the spacing and the inner corners of connected groups.
+  The small values are `ButtonGroupSmallTokens` and `ConnectedButtonGroupSmallTokens`; the other
+  sizes follow the Material button-group specification.
+roles:
+  spacing:
+    description: Space between the actions of a standard group.
+    type: length
+    value: 12px
+  connectedSpacing:
+    description: Space between the actions of a connected group.
+    type: length
+    value: 2px
+  innerShape:
+    description: Inner corner radius of the actions of a connected group.
+    type: length
+    value: $cw-CornerRadius-small
+  pressedShape:
+    description: Inner corner radius of a pressed action of a connected group.
+    type: length
+    value: $cw-CornerRadius-xsmall
+themes:
+  xs:
+    description: Extra small group.
+    values:
+      spacing: 18px
+      innerShape: $cw-CornerRadius-xsmall
+      pressedShape: $cw-CornerRadius-xsmall
+  sm:
+    description: Small group.
+    values:
+      spacing: 12px
+      innerShape: $cw-CornerRadius-small
+      pressedShape: $cw-CornerRadius-xsmall
+  md:
+    description: Medium group.
+    values:
+      spacing: 8px
+      innerShape: $cw-CornerRadius-small
+      pressedShape: $cw-CornerRadius-xsmall
+  lg:
+    description: Large group.
+    values:
+      spacing: 8px
+      innerShape: $cw-CornerRadius-large
+      pressedShape: $cw-CornerRadius-small
+  xl:
+    description: Extra large group.
+    values:
+      spacing: 8px
+      innerShape: $cw-CornerRadius-largeIncreased
+      pressedShape: $cw-CornerRadius-medium

package/src/action/button.yaml

@@ -0,0 +1,239 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: Button
+description: >
+  Material 3 Expressive geometry of common buttons, icon buttons and floating action buttons. The
+  `xs` to `xl` themes size common and icon buttons (`Button{XSmall…XLarge}Tokens`,
+  `{XSmall…XLarge}IconButtonTokens`); the `fab*` themes size floating action buttons
+  (`Fab*Tokens`, `ExtendedFab*Tokens`, `FabMenuBaselineTokens`). Round corners are half the
+  container height and are not roles.
+roles:
+  containerHeight:
+    description: Visual container height.
+    type: length
+    value: 56px
+  squareShape:
+    description: >
+      Square container corner radius. A square toggle becomes round when selected, and a round
+      toggle becomes square.
+    type: length
+    value: $cw-CornerRadius-large
+  pressedShape:
+    description: Container corner radius while pressed.
+    type: length
+    value: $cw-CornerRadius-medium
+  iconSize:
+    description: Icon size of a common button or floating action button.
+    type: length
+    value: 24px
+  iconLabelSpace:
+    description: Space between an icon and the label.
+    type: length
+    value: 8px
+  leadingSpace:
+    description: Space before the content.
+    type: length
+    value: 24px
+  trailingSpace:
+    description: Space after the content.
+    type: length
+    value: 24px
+  outlineWidth:
+    description: Outline width of outlined styles.
+    type: length
+    value: 1px
+  iconButton:
+    description: Icon-button roles. The container width is the icon size plus twice a space.
+    roles:
+      iconSize:
+        description: Icon size.
+        type: length
+        value: 24px
+      narrowSpace:
+        description: Space on each side of the icon of a narrow icon button.
+        type: length
+        value: 12px
+      defaultSpace:
+        description: Space on each side of the icon of a default-width icon button.
+        type: length
+        value: 16px
+      wideSpace:
+        description: Space on each side of the icon of a wide icon button.
+        type: length
+        value: 24px
+  fab:
+    description: Floating-action-button roles.
+    roles:
+      containerShape:
+        description: Container corner radius.
+        type: length
+        value: $cw-CornerRadius-large
+  closeButton:
+    description: >
+      Geometry a toggled floating action button morphs into, the close button of a FAB menu
+      (`FabMenuBaselineTokens.CloseButton*`). Its corners are fully round.
+    roles:
+      containerHeight:
+        description: Container height and width.
+        type: length
+        value: 56px
+      iconSize:
+        description: Icon size.
+        type: length
+        value: 20px
+  fabMenu:
+    description: FAB menu layout roles (`FabMenuBaselineTokens`).
+    roles:
+      itemSpacing:
+        description: Space between menu items.
+        type: length
+        value: 4px
+      closeButtonSpacing:
+        description: Space between the close button and the nearest menu item.
+        type: length
+        value: 8px
+themes:
+  xs:
+    description: >
+      Extra small buttons. The leading and trailing spaces and the icon-label space follow Compose
+      (`ButtonDefaults.ExtraSmallContentPadding`, `ExtraSmallIconSpacing`), which overrides the
+      uncorrected `ButtonXSmallTokens` values.
+    values:
+      containerHeight: 32px
+      squareShape: $cw-CornerRadius-medium
+      pressedShape: $cw-CornerRadius-small
+      iconSize: 20px
+      iconLabelSpace: 4px
+      leadingSpace: 12px
+      trailingSpace: 12px
+      outlineWidth: 1px
+      iconButton-iconSize: 20px
+      iconButton-narrowSpace: 4px
+      iconButton-defaultSpace: 6px
+      iconButton-wideSpace: 10px
+  sm:
+    description: Small buttons (`ButtonSmallTokens`, `SmallIconButtonTokens`).
+    values:
+      containerHeight: 40px
+      squareShape: $cw-CornerRadius-medium
+      pressedShape: $cw-CornerRadius-small
+      iconSize: 20px
+      iconLabelSpace: 8px
+      leadingSpace: 16px
+      trailingSpace: 16px
+      outlineWidth: 1px
+      iconButton-iconSize: 24px
+      iconButton-narrowSpace: 4px
+      iconButton-defaultSpace: 8px
+      iconButton-wideSpace: 14px
+  md:
+    description: Medium buttons (`ButtonMediumTokens`, `MediumIconButtonTokens`).
+    values:
+      containerHeight: 56px
+      squareShape: $cw-CornerRadius-large
+      pressedShape: $cw-CornerRadius-medium
+      iconSize: 24px
+      iconLabelSpace: 8px
+      leadingSpace: 24px
+      trailingSpace: 24px
+      outlineWidth: 1px
+      iconButton-iconSize: 24px
+      iconButton-narrowSpace: 12px
+      iconButton-defaultSpace: 16px
+      iconButton-wideSpace: 24px
+  lg:
+    description: Large buttons (`ButtonLargeTokens`, `LargeIconButtonTokens`).
+    values:
+      containerHeight: 96px
+      squareShape: $cw-CornerRadius-xlarge
+      pressedShape: $cw-CornerRadius-large
+      iconSize: 32px
+      iconLabelSpace: 12px
+      leadingSpace: 48px
+      trailingSpace: 48px
+      outlineWidth: 2px
+      iconButton-iconSize: 32px
+      iconButton-narrowSpace: 16px
+      iconButton-defaultSpace: 32px
+      iconButton-wideSpace: 48px
+  xl:
+    description: Extra large buttons (`ButtonXLargeTokens`, `XLargeIconButtonTokens`).
+    values:
+      containerHeight: 136px
+      squareShape: $cw-CornerRadius-xlarge
+      pressedShape: $cw-CornerRadius-large
+      iconSize: 40px
+      iconLabelSpace: 16px
+      leadingSpace: 64px
+      trailingSpace: 64px
+      outlineWidth: 3px
+      iconButton-iconSize: 40px
+      iconButton-narrowSpace: 32px
+      iconButton-defaultSpace: 48px
+      iconButton-wideSpace: 72px
+  fab:
+    description: >
+      Baseline FAB (`FabBaselineTokens`) and extended FAB. Extended spaces follow Compose
+      (`ExtendedFabStartIconPadding`, `ExtendedFabEndIconPadding`, `ExtendedFabTextPadding`).
+    values:
+      containerHeight: 56px
+      fab-containerShape: $cw-CornerRadius-large
+      iconSize: 24px
+      iconLabelSpace: 12px
+      leadingSpace: 16px
+      trailingSpace: 20px
+  fabSmall:
+    description: Small FAB (`FabSmallTokens`).
+    values:
+      containerHeight: 40px
+      fab-containerShape: $cw-CornerRadius-medium
+      iconSize: 24px
+  extendedFabSmall:
+    description: Small extended FAB (`ExtendedFabSmallTokens`).
+    values:
+      containerHeight: 56px
+      fab-containerShape: $cw-CornerRadius-large
+      iconSize: 24px
+      iconLabelSpace: 8px
+      leadingSpace: 16px
+      trailingSpace: 16px
+  fabMedium:
+    description: >
+      Medium FAB and medium extended FAB (`FabMediumTokens`, `ExtendedFabMediumTokens`). The shape
+      and icon-label space follow Compose (`FloatingActionButtonDefaults.mediumShape`,
+      `MediumExtendedFabIconPadding`), which override uncorrected tokens.
+    values:
+      containerHeight: 80px
+      fab-containerShape: $cw-CornerRadius-largeIncreased
+      iconSize: 28px
+      iconLabelSpace: 12px
+      leadingSpace: 26px
+      trailingSpace: 26px
+  fabLarge:
+    description: >
+      Large FAB (`FabLargeTokens`). The icon size follows Compose
+      (`FloatingActionButtonDefaults.LargeIconSize`), which overrides the incorrect token.
+    values:
+      containerHeight: 96px
+      fab-containerShape: $cw-CornerRadius-xlarge
+      iconSize: 36px
+  extendedFabLarge:
+    description: >
+      Large extended FAB (`ExtendedFabLargeTokens`). The icon-label space follows Compose
+      (`LargeExtendedFabIconPadding`), which overrides the uncorrected token.
+    values:
+      containerHeight: 96px
+      fab-containerShape: $cw-CornerRadius-xlarge
+      iconSize: 32px
+      iconLabelSpace: 16px
+      leadingSpace: 28px
+      trailingSpace: 28px
+  fabMenuItem:
+    description: FAB menu item (`FabMenuBaselineTokens.ListItem*`), a fully round pill.
+    values:
+      containerHeight: 56px
+      fab-containerShape: 28px
+      iconSize: 24px
+      iconLabelSpace: 8px
+      leadingSpace: 24px
+      trailingSpace: 24px

package/src/action/split-button.yaml

@@ -0,0 +1,87 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: SplitButton
+description: >
+  Material 3 Expressive split-button geometry (`SplitButton{XSmall…XLarge}Tokens`). A split button
+  sizes its actions with the matching `cw-Button` size theme; these roles define the spacing,
+  paddings, trailing icon and inner corners. Outer corners are fully round.
+roles:
+  spacing:
+    description: Space between the leading and trailing actions.
+    type: length
+    value: 2px
+  innerShape:
+    description: Inner corner radius.
+    type: length
+    value: $cw-CornerRadius-xsmall
+  interactionShape:
+    description: Inner corner radius while hovered or pressed.
+    type: length
+    value: $cw-CornerRadius-medium
+  leadingStartPadding:
+    description: Space before the content of the leading action.
+    type: length
+    value: 16px
+  leadingEndPadding:
+    description: Space after the content of the leading action.
+    type: length
+    value: 12px
+  trailingPadding:
+    description: Space on each side of the icon of the trailing action.
+    type: length
+    value: 13px
+  trailingIconSize:
+    description: Icon size of the trailing action.
+    type: length
+    value: 22px
+themes:
+  xs:
+    description: Extra small split button.
+    values:
+      spacing: 2px
+      innerShape: $cw-CornerRadius-xsmall
+      interactionShape: $cw-CornerRadius-small
+      leadingStartPadding: 12px
+      leadingEndPadding: 10px
+      trailingPadding: 13px
+      trailingIconSize: 22px
+  sm:
+    description: Small split button.
+    values:
+      spacing: 2px
+      innerShape: $cw-CornerRadius-xsmall
+      interactionShape: $cw-CornerRadius-medium
+      leadingStartPadding: 16px
+      leadingEndPadding: 12px
+      trailingPadding: 13px
+      trailingIconSize: 22px
+  md:
+    description: Medium split button.
+    values:
+      spacing: 2px
+      innerShape: $cw-CornerRadius-xsmall
+      interactionShape: $cw-CornerRadius-medium
+      leadingStartPadding: 24px
+      leadingEndPadding: 24px
+      trailingPadding: 15px
+      trailingIconSize: 26px
+  lg:
+    description: Large split button.
+    values:
+      spacing: 2px
+      innerShape: $cw-CornerRadius-small
+      interactionShape: $cw-CornerRadius-largeIncreased
+      leadingStartPadding: 48px
+      leadingEndPadding: 48px
+      trailingPadding: 29px
+      trailingIconSize: 38px
+  xl:
+    description: Extra large split button.
+    values:
+      spacing: 2px
+      innerShape: $cw-CornerRadius-medium
+      interactionShape: $cw-CornerRadius-largeIncreased
+      leadingStartPadding: 64px
+      leadingEndPadding: 64px
+      trailingPadding: 43px
+      trailingIconSize: 50px

package/src/color/color.yaml

@@ -0,0 +1,181 @@
+# SPDX-License-Identifier: MPL-2.0
+class: system
+attribute: Color
+description: >
+  Shared color roles. These roles are used throughout the design to control the color of rendered
+  elements. The default values of each role apply the light color scheme, while the dark color
+  scheme is implemented through standard theme.
+
+  The `primary`, `secondary` and `tertiary` role groups define accent colors. Their use is based
+  on importance of a UI element:
+
+  | Role Group  | Description                                                                     |
+  | ----------- | ------------------------------------------------------------------------------- |
+  | `primary`   | Used for elements requiring highest emphasis, such as primary actions.          |
+  | `secondary` | Used for elements that do not require emphasis, such as secondary actions.      |
+  | `tertiary`  | Used for smaller elements that require special emphasis, such as notifications. |
+
+  In addition to the accent color role groups, `error` and `surface` role groups define roles for
+  erroneous state emphasis and neutral background colors, respectively.
+
+  Color value roles themselves have the following parts within their name:
+
+  | Role Part   | Description                                                                     |
+  | ----------- | ------------------------------------------------------------------------------- |
+  | `fixed`     | Role whose color value is fixed irrespective of theme.                          |
+  | `fill`      | Used for background areas.                                                      |
+  | `container` | Used for fill color of a container.                                             |
+  | `on`        | Used for icon and text color *on top of* succeeding part. For example, `onFoo` would be the color to use for icon and text rendered on top of the `foo` role. |
+  | `variant`   | Provides a lower emphasis alternative to preceeding part. For example, `fooVariant` is a less emphasis variant of the `foo` role. |
+  | `inverse`   | Provides a contrasting alternative to succeeding part. For example, `inverseFoo` provides a color contrasting against `foo`. |
+  | `dim`       | Provides a higher emphasis alternative to the preceeding part. For example, `fooDim` is a higher emphasis variant of the `foo` role. |
+
+  The `surface` role group additionally defines `lowest`, `low`, `high`, and `highest` suffixed
+  roles for lowest, low, high, and highest -emphasis variants of the preceeding part.
+
+  The root stylesheet applies the light or dark scheme according to the preferred color scheme,
+  while the `cw-theme-light` and `cw-theme-dark` classes apply either scheme to a subtree. The
+  `dark` theme also lists the `fixed` roles, `scrim`, and `shadow`, with values equal to their
+  light values, so that stylesheets reference the properties of these roles, which color schemes
+  generated at runtime assign.
+roles:
+  primary:
+    description: Primary roles for prominent emphasis.
+    type: color
+    roles:
+      fill: $cw-Palette-primary-40
+      onFill: $cw-Palette-primary-100
+      container: $cw-Palette-primary-90
+      onContainer: $cw-Palette-primary-30
+      inverseFill: $cw-Palette-primary-80
+      fixedFill: $cw-Palette-primary-90
+      fixedFillDim: $cw-Palette-primary-80
+      onFixedFill: $cw-Palette-primary-10
+      onFixedFillVariant: $cw-Palette-primary-30
+  secondary:
+    description: Secondary roles for less emphasis than `primary`.
+    type: color
+    roles:
+      fill: $cw-Palette-secondary-40
+      onFill: $cw-Palette-secondary-100
+      container: $cw-Palette-secondary-90
+      onContainer: $cw-Palette-secondary-30
+      fixedFill: $cw-Palette-secondary-90
+      fixedFillDim: $cw-Palette-secondary-80
+      onFixedFill: $cw-Palette-secondary-10
+      onFixedFillVariant: $cw-Palette-secondary-30
+  tertiary:
+    description: Tertiary roles for special emphasis.
+    type: color
+    roles:
+      fill: $cw-Palette-tertiary-40
+      onFill: $cw-Palette-tertiary-100
+      container: $cw-Palette-tertiary-90
+      onContainer: $cw-Palette-tertiary-30
+      fixedFill: $cw-Palette-tertiary-90
+      fixedFillDim: $cw-Palette-tertiary-80
+      onFixedFill: $cw-Palette-tertiary-10
+      onFixedFillVariant: $cw-Palette-tertiary-30
+  error:
+    description: Roles for error based emphasis.
+    type: color
+    roles:
+      fill: $cw-Palette-error-40
+      onFill: $cw-Palette-error-100
+      container: $cw-Palette-error-90
+      onContainer: $cw-Palette-error-30
+  surface:
+    description: Roles for neutral backgrounds.
+    type: color
+    roles:
+      fill: $cw-Palette-neutral-98
+      fillDim: $cw-Palette-neutral-87
+      fillBright: $cw-Palette-neutral-98
+      fillVariant: $cw-Palette-neutralVariant-90
+      inverseFill: $cw-Palette-neutral-20
+      containerLowest: $cw-Palette-neutral-100
+      containerLow: $cw-Palette-neutral-96
+      container: $cw-Palette-neutral-94
+      containerHigh: $cw-Palette-neutral-92
+      containerHighest: $cw-Palette-neutral-90
+      onFill: $cw-Palette-neutral-10
+      onFillVariant: $cw-Palette-neutralVariant-30
+      inverseOnFill: $cw-Palette-neutral-95
+      tint: $cw-Palette-primary-40
+  background:
+    description: Alias for the background color behind scrollable content.
+    type: color
+    value: $cw-Palette-neutral-98
+  onBackground:
+    description: Color for content displayed on the background.
+    type: color
+    value: $cw-Palette-neutral-10
+  outline:
+    description: Boundary color between two elements.
+    type: color
+    value: $cw-Palette-neutralVariant-50
+  outlineVariant:
+    description: Lower emphasis alternative of `outline`.
+    type: color
+    value: $cw-Palette-neutralVariant-80
+  shadow:
+    description: Elevated element shadow color.
+    type: color
+    value: $cw-Palette-neutral-0
+  scrim:
+    description: Color of a scrim that obscures content.
+    type: color
+    value: $cw-Palette-neutral-0
+themes:
+  dark:
+    description: Dark appearance theme for the default light color scheme.
+    values:
+      primary-fill: $cw-Palette-primary-80
+      primary-onFill: $cw-Palette-primary-20
+      primary-container: $cw-Palette-primary-30
+      primary-onContainer: $cw-Palette-primary-90
+      primary-inverseFill: $cw-Palette-primary-40
+      primary-fixedFill: $cw-Palette-primary-90
+      primary-fixedFillDim: $cw-Palette-primary-80
+      primary-onFixedFill: $cw-Palette-primary-10
+      primary-onFixedFillVariant: $cw-Palette-primary-30
+      secondary-fill: $cw-Palette-secondary-80
+      secondary-onFill: $cw-Palette-secondary-20
+      secondary-container: $cw-Palette-secondary-30
+      secondary-onContainer: $cw-Palette-secondary-90
+      secondary-fixedFill: $cw-Palette-secondary-90
+      secondary-fixedFillDim: $cw-Palette-secondary-80
+      secondary-onFixedFill: $cw-Palette-secondary-10
+      secondary-onFixedFillVariant: $cw-Palette-secondary-30
+      tertiary-fill: $cw-Palette-tertiary-80
+      tertiary-onFill: $cw-Palette-tertiary-20
+      tertiary-container: $cw-Palette-tertiary-30
+      tertiary-onContainer: $cw-Palette-tertiary-90
+      tertiary-fixedFill: $cw-Palette-tertiary-90
+      tertiary-fixedFillDim: $cw-Palette-tertiary-80
+      tertiary-onFixedFill: $cw-Palette-tertiary-10
+      tertiary-onFixedFillVariant: $cw-Palette-tertiary-30
+      error-fill: $cw-Palette-error-80
+      error-onFill: $cw-Palette-error-20
+      error-container: $cw-Palette-error-30
+      error-onContainer: $cw-Palette-error-90
+      background: $cw-Palette-neutral-6
+      onBackground: $cw-Palette-neutral-90
+      surface-fill: $cw-Palette-neutral-6
+      surface-fillDim: $cw-Palette-neutral-6
+      surface-fillBright: $cw-Palette-neutral-24
+      surface-fillVariant: $cw-Palette-neutralVariant-30
+      surface-tint: $cw-Palette-primary-80
+      surface-inverseFill: $cw-Palette-neutral-90
+      surface-containerLowest: $cw-Palette-neutral-4
+      surface-containerLow: $cw-Palette-neutral-10
+      surface-container: $cw-Palette-neutral-12
+      surface-containerHigh: $cw-Palette-neutral-17
+      surface-containerHighest: $cw-Palette-neutral-22
+      surface-onFill: $cw-Palette-neutral-90
+      surface-onFillVariant: $cw-Palette-neutralVariant-80
+      surface-inverseOnFill: $cw-Palette-neutral-20
+      outline: $cw-Palette-neutralVariant-60
+      outlineVariant: $cw-Palette-neutralVariant-30
+      scrim: $cw-Palette-neutral-0
+      shadow: $cw-Palette-neutral-0