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

package/src/input/time-picker.yaml

@@ -0,0 +1,220 @@
+# SPDX-License-Identifier: MPL-2.0
+class: component
+attribute: TimePicker
+description: >
+  Material 3 time picker roles, after AndroidX `TimePickerTokens` and `TimeInputTokens` (v0_210)
+  and the Compose `TimePicker` layout. Roles are applied to the picker root, which publishes them
+  to the time selectors, period selector, clock dial and time input fields.
+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: Portrait picker width.
+    type: length
+    value: 328px
+  landscapeContainerWidth:
+    description: Landscape picker width.
+    type: length
+    value: 584px
+  headlineColor:
+    description: Headline color.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  timeContainerColor:
+    description: Container color of an unselected time selector.
+    type: color
+    value: $cw-Color-surface-containerHighest
+  timeLabelTextColor:
+    description: Label color of an unselected time selector.
+    type: color
+    value: $cw-Color-surface-onFill
+  timeStateLayerColor:
+    description: State-layer color of an unselected time selector.
+    type: color
+    value: $cw-Color-surface-onFill
+  timeSelectedContainerColor:
+    description: Container color of the selected time selector.
+    type: color
+    value: $cw-Color-primary-container
+  timeSelectedLabelTextColor:
+    description: Label color of the selected time selector.
+    type: color
+    value: $cw-Color-primary-onContainer
+  timeSelectedStateLayerColor:
+    description: State-layer color of the selected time selector.
+    type: color
+    value: $cw-Color-primary-onContainer
+  timeSelectorShape:
+    description: Corner radius of the time selectors.
+    type: length
+    value: $cw-CornerRadius-small
+  timeSelectorWidth:
+    description: Width of a time selector next to a period selector, and in landscape.
+    type: length
+    value: 96px
+  timeSelector24hWidth:
+    description: Width of a time selector of a portrait 24-hour picker.
+    type: length
+    value: 114px
+  timeSelectorHeight:
+    description: Height of the time selectors.
+    type: length
+    value: 80px
+  timeSeparatorColor:
+    description: Color of the separator between the hour and the minute.
+    type: color
+    value: $cw-Color-surface-onFill
+  periodLabelTextColor:
+    description: Label color of the unselected period.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  periodStateLayerColor:
+    description: State-layer color of the unselected period.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  periodSelectedContainerColor:
+    description: Container color of the selected period.
+    type: color
+    value: $cw-Color-tertiary-container
+  periodSelectedLabelTextColor:
+    description: Label color of the selected period.
+    type: color
+    value: $cw-Color-tertiary-onContainer
+  periodSelectedStateLayerColor:
+    description: State-layer color of the selected period.
+    type: color
+    value: $cw-Color-tertiary-onContainer
+  periodOutlineColor:
+    description: Color of the period selector outline and of the divider between the periods.
+    type: color
+    value: $cw-Color-outline
+  periodOutlineWidth:
+    description: Width of the period selector outline and of the divider between the periods.
+    type: length
+    value: 1px
+  periodShape:
+    description: Corner radius of the period selector.
+    type: length
+    value: $cw-CornerRadius-small
+  periodVerticalWidth:
+    description: Width of the vertical period selector of a portrait picker.
+    type: length
+    value: 52px
+  periodVerticalHeight:
+    description: Height of the vertical period selector of a portrait picker.
+    type: length
+    value: 80px
+  periodHorizontalWidth:
+    description: Width of the horizontal period selector of a landscape picker.
+    type: length
+    value: 216px
+  periodHorizontalHeight:
+    description: Height of the horizontal period selector of a landscape picker.
+    type: length
+    value: 38px
+  periodInputHeight:
+    description: Height of the period selector in input mode.
+    type: length
+    value: 72px
+  clockDialColor:
+    description: Clock dial color.
+    type: color
+    value: $cw-Color-surface-containerHighest
+  clockDialSize:
+    description: Clock dial diameter.
+    type: length
+    value: 256px
+  clockDialLabelTextColor:
+    description: Color of the dial numbers outside the selector handle.
+    type: color
+    value: $cw-Color-surface-onFill
+  clockDialSelectedLabelTextColor:
+    description: Color of the dial numbers inside the selector handle.
+    type: color
+    value: $cw-Color-primary-onFill
+  clockDialStateLayerColor:
+    description: State-layer color of the dial numbers.
+    type: color
+    value: $cw-Color-surface-onFill
+  selectorColor:
+    description: Color of the selector hand, handle and center.
+    type: color
+    value: $cw-Color-primary-fill
+  selectorHandleSize:
+    description: Diameter of the selector handle.
+    type: length
+    value: 48px
+  selectorTrackWidth:
+    description: Width of the selector hand.
+    type: length
+    value: 2px
+  selectorCenterSize:
+    description: Diameter of the selector center.
+    type: length
+    value: 8px
+  timeFieldContainerColor:
+    description: Container color of an unfocused time input field.
+    type: color
+    value: $cw-Color-surface-containerHighest
+  timeFieldLabelTextColor:
+    description: Text color of an unfocused time input field.
+    type: color
+    value: $cw-Color-surface-onFill
+  timeFieldFocusContainerColor:
+    description: Container color of the focused time input field.
+    type: color
+    value: $cw-Color-primary-container
+  timeFieldFocusLabelTextColor:
+    description: Text color of the focused time input field.
+    type: color
+    value: $cw-Color-primary-onContainer
+  timeFieldFocusOutlineColor:
+    description: Outline color of the focused time input field.
+    type: color
+    value: $cw-Color-primary-fill
+  timeFieldFocusOutlineWidth:
+    description: Outline width of the focused time input field.
+    type: length
+    value: 2px
+  timeFieldShape:
+    description: Corner radius of the time input fields.
+    type: length
+    value: $cw-CornerRadius-small
+  timeFieldWidth:
+    description: Width of the time input fields.
+    type: length
+    value: 96px
+  timeFieldHeight:
+    description: Height of the time input fields.
+    type: length
+    value: 72px
+  timeFieldSupportingTextColor:
+    description: Color of the supporting text below the time input fields.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  timeFieldErrorColor:
+    description: Text, outline and supporting text color of a time input field holding an error.
+    type: color
+    value: $cw-Color-error-fill
+  modeToggleIconColor:
+    description: Icon and state-layer color of the clock and input mode toggle.
+    type: color
+    value: $cw-Color-surface-onFillVariant
+  touchTargetSize:
+    description: Size of the dial numbers and of the mode toggle.
+    type: length
+    value: 48px
+  disabledLabelTextColor:
+    description: Label color of a disabled picker.
+    type: color
+    value: $cw-Color-surface-onFill
+  disabledLabelTextOpacity:
+    description: Opacity of the disabled label color.
+    type: number
+    value: 0.38

package/src/motion/motion.yaml

@@ -0,0 +1,371 @@
+# SPDX-License-Identifier: MPL-2.0
+class: system
+attribute: Motion
+description: >
+  Motion roles defining easing function, duration, and spring value roles. There are two top-level
+  role groups, `spring` and `transition`, for spring based motions and standard transitions.
+roles:
+  spring:
+    description: >
+      Spring motion roles. These motion roles use spring based curves to apply motion. There are
+      two nested group roles `effect` and `spatial` which define the type of spring motion. Each
+      type group role contains three nested group roles `fast`, `default`, and `slow` which group
+      springs based on relative duration. Each spring defines its `stiffness` and `damping`
+      ratio, with unit mass, along with the `easing` function and `duration` of the spring,
+      generated at compile-time from the stiffness and damping ratio using the
+      `cw-spring-motion-of()` CSS pseudo-function, provided by `lightningcss-plugin-cobweb`.
+
+      The `standard` and `expressive` themes define the values of the Material 3 standard and
+      expressive motion schemes. The default value of each spring role is its `standard` value,
+      so both themes, and the defaults, always define every spring role.
+    roles:
+      effect:
+        description: >
+          Spring motion roles used when animating non-spatial properties, such as color or
+          opacity. Effect springs are critically damped, and never overshoot.
+        roles:
+          default:
+            description: Spring suitable for properties such as opacity.
+            roles:
+              easing:
+                description: Easing function sampled from the spring.
+                type: easing-function
+                value: $cw-Motion-theme-standard--spring-effect-default-easing
+              duration:
+                description: Time the spring takes to settle.
+                type: time
+                value: $cw-Motion-theme-standard--spring-effect-default-duration
+              stiffness:
+                description: Stiffness of the spring, with unit mass.
+                type: number
+                value: $cw-Motion-theme-standard--spring-effect-default-stiffness
+              damping:
+                description: Damping ratio of the spring.
+                type: number
+                value: $cw-Motion-theme-standard--spring-effect-default-damping
+          fast:
+            description: Spring suitable for properties such as color.
+            roles:
+              easing:
+                description: Easing function sampled from the spring.
+                type: easing-function
+                value: $cw-Motion-theme-standard--spring-effect-fast-easing
+              duration:
+                description: Time the spring takes to settle.
+                type: time
+                value: $cw-Motion-theme-standard--spring-effect-fast-duration
+              stiffness:
+                description: Stiffness of the spring, with unit mass.
+                type: number
+                value: $cw-Motion-theme-standard--spring-effect-fast-stiffness
+              damping:
+                description: Damping ratio of the spring.
+                type: number
+                value: $cw-Motion-theme-standard--spring-effect-fast-damping
+          slow:
+            description: Spring suitable for full-screen content refresh.
+            roles:
+              easing:
+                description: Easing function sampled from the spring.
+                type: easing-function
+                value: $cw-Motion-theme-standard--spring-effect-slow-easing
+              duration:
+                description: Time the spring takes to settle.
+                type: time
+                value: $cw-Motion-theme-standard--spring-effect-slow-duration
+              stiffness:
+                description: Stiffness of the spring, with unit mass.
+                type: number
+                value: $cw-Motion-theme-standard--spring-effect-slow-stiffness
+              damping:
+                description: Damping ratio of the spring.
+                type: number
+                value: $cw-Motion-theme-standard--spring-effect-slow-damping
+      spatial:
+        description: >
+          Spring motion roles used when animating spatial properties, such as position, size, or
+          shape. Spatial springs may overshoot.
+        roles:
+          default:
+            description: Spring suitable for motion which partially covers the screen.
+            roles:
+              easing:
+                description: Easing function sampled from the spring.
+                type: easing-function
+                value: $cw-Motion-theme-standard--spring-spatial-default-easing
+              duration:
+                description: Time the spring takes to settle.
+                type: time
+                value: $cw-Motion-theme-standard--spring-spatial-default-duration
+              stiffness:
+                description: Stiffness of the spring, with unit mass.
+                type: number
+                value: $cw-Motion-theme-standard--spring-spatial-default-stiffness
+              damping:
+                description: Damping ratio of the spring.
+                type: number
+                value: $cw-Motion-theme-standard--spring-spatial-default-damping
+          fast:
+            description: Spring suitable for motion which covers a small area of the screen.
+            roles:
+              easing:
+                description: Easing function sampled from the spring.
+                type: easing-function
+                value: $cw-Motion-theme-standard--spring-spatial-fast-easing
+              duration:
+                description: Time the spring takes to settle.
+                type: time
+                value: $cw-Motion-theme-standard--spring-spatial-fast-duration
+              stiffness:
+                description: Stiffness of the spring, with unit mass.
+                type: number
+                value: $cw-Motion-theme-standard--spring-spatial-fast-stiffness
+              damping:
+                description: Damping ratio of the spring.
+                type: number
+                value: $cw-Motion-theme-standard--spring-spatial-fast-damping
+          slow:
+            description: Spring suitable for motion which covers the full screen.
+            roles:
+              easing:
+                description: Easing function sampled from the spring.
+                type: easing-function
+                value: $cw-Motion-theme-standard--spring-spatial-slow-easing
+              duration:
+                description: Time the spring takes to settle.
+                type: time
+                value: $cw-Motion-theme-standard--spring-spatial-slow-duration
+              stiffness:
+                description: Stiffness of the spring, with unit mass.
+                type: number
+                value: $cw-Motion-theme-standard--spring-spatial-slow-stiffness
+              damping:
+                description: Damping ratio of the spring.
+                type: number
+                value: $cw-Motion-theme-standard--spring-spatial-slow-damping
+  transition:
+    description: >
+      Non-spring motion roles. These motion roles are suitable for simple transitions.
+    roles:
+      easing:
+        description: >
+          Curves controlling speed of motion, defining `uniform`, `decelerate`, and `accelerate`
+          for motion within the screen, entering elements, and exiting elements, respectively.
+        roles:
+          emphasized:
+            description: >
+              Emphasized easing used for most transitions. The `uniform` curve approximates the
+              Material emphasized path, `M 0,0 C 0.05,0 0.133333,0.06 0.166666,0.4 C
+              0.208333,0.82 0.25,1 1,1`, within 0.1%; `cubic-bezier(0.2, 0, 0, 1)` deviates from
+              it by up to 17%.
+            type: easing-function
+            roles:
+              accelerate: cubic-bezier(0.3, 0, 0.8, 0.15)
+              decelerate: cubic-bezier(0.05, 0.7, 0.1, 1)
+              uniform: >-
+                linear(0, 0.00449 2.525%, 0.01877 4.9%, 0.04321 7.075%, 0.07228 9%, 0.10944 10.675%,
+                0.14889 12.125%, 0.19393 13.35%, 0.23861 14.375%, 0.2871 15.225%, 0.33386 15.925%,
+                0.38163 16.475%, 0.47107 17.4%, 0.52635 18.075%, 0.57505 18.8%, 0.61944 19.625%,
+                0.66186 20.625%, 0.70234 21.85%, 0.74128 23.375%, 0.77895 25.3%, 0.81532 27.75%,
+                0.85033 30.9%, 0.88329 34.925%, 0.91373 40.075%, 0.94123 46.725%, 0.96484 55.3%,
+                0.98361 66.425%, 0.99623 80.975%, 1)
+          standard:
+            description: Standard easing for quick utility transitions.
+            type: easing-function
+            roles:
+              accelerate: cubic-bezier(0.3, 0, 1, 1)
+              decelerate: cubic-bezier(0, 0, 0, 1)
+              uniform: cubic-bezier(0.2, 0, 0, 1)
+          linear:
+            description: Linear easing.
+            type: easing-function
+            value: cubic-bezier(0, 0, 1, 1)
+      duration:
+        description: >
+          Motion duration, classified as `short`, `medium`, `long`, and `extraLong` where
+          `short` and `medium` are used where less attention is required and, `long` and
+          `extraLong` are used where most attention is required.
+        roles:
+          short:
+            type: time
+            roles:
+              1: 50ms
+              2: 100ms
+              3: 150ms
+              4: 200ms
+          medium:
+            type: time
+            roles:
+              1: 250ms
+              2: 300ms
+              3: 350ms
+              4: 400ms
+          long:
+            type: time
+            roles:
+              1: 450ms
+              2: 500ms
+              3: 550ms
+              4: 600ms
+          extraLong:
+            type: time
+            roles:
+              1: 700ms
+              2: 800ms
+              3: 900ms
+              4: 1s
+themes:
+  standard:
+    description: >
+      Material 3 standard motion scheme spring values (AndroidX `StandardMotionTokens`). These
+      are also the default values of the spring roles.
+    values:
+      spring-effect-default-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-standard--spring-effect-default-stiffness,
+        --cw-Motion-theme-standard--spring-effect-default-damping)
+      spring-effect-default-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-standard--spring-effect-default-stiffness,
+        --cw-Motion-theme-standard--spring-effect-default-damping)
+      spring-effect-default-stiffness: 1600
+      spring-effect-default-damping: 1
+      spring-effect-fast-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-standard--spring-effect-fast-stiffness,
+        --cw-Motion-theme-standard--spring-effect-fast-damping)
+      spring-effect-fast-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-standard--spring-effect-fast-stiffness,
+        --cw-Motion-theme-standard--spring-effect-fast-damping)
+      spring-effect-fast-stiffness: 3800
+      spring-effect-fast-damping: 1
+      spring-effect-slow-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-standard--spring-effect-slow-stiffness,
+        --cw-Motion-theme-standard--spring-effect-slow-damping)
+      spring-effect-slow-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-standard--spring-effect-slow-stiffness,
+        --cw-Motion-theme-standard--spring-effect-slow-damping)
+      spring-effect-slow-stiffness: 800
+      spring-effect-slow-damping: 1
+      spring-spatial-default-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-standard--spring-spatial-default-stiffness,
+        --cw-Motion-theme-standard--spring-spatial-default-damping)
+      spring-spatial-default-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-standard--spring-spatial-default-stiffness,
+        --cw-Motion-theme-standard--spring-spatial-default-damping)
+      spring-spatial-default-stiffness: 700
+      spring-spatial-default-damping: 0.9
+      spring-spatial-fast-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-standard--spring-spatial-fast-stiffness,
+        --cw-Motion-theme-standard--spring-spatial-fast-damping)
+      spring-spatial-fast-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-standard--spring-spatial-fast-stiffness,
+        --cw-Motion-theme-standard--spring-spatial-fast-damping)
+      spring-spatial-fast-stiffness: 1400
+      spring-spatial-fast-damping: 0.9
+      spring-spatial-slow-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-standard--spring-spatial-slow-stiffness,
+        --cw-Motion-theme-standard--spring-spatial-slow-damping)
+      spring-spatial-slow-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-standard--spring-spatial-slow-stiffness,
+        --cw-Motion-theme-standard--spring-spatial-slow-damping)
+      spring-spatial-slow-stiffness: 300
+      spring-spatial-slow-damping: 0.9
+  expressive:
+    description: >
+      Material 3 Expressive motion scheme spring values (AndroidX `ExpressiveMotionTokens`).
+    values:
+      spring-effect-default-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-expressive--spring-effect-default-stiffness,
+        --cw-Motion-theme-expressive--spring-effect-default-damping)
+      spring-effect-default-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-expressive--spring-effect-default-stiffness,
+        --cw-Motion-theme-expressive--spring-effect-default-damping)
+      spring-effect-default-stiffness: 1600
+      spring-effect-default-damping: 1
+      spring-effect-fast-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-expressive--spring-effect-fast-stiffness,
+        --cw-Motion-theme-expressive--spring-effect-fast-damping)
+      spring-effect-fast-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-expressive--spring-effect-fast-stiffness,
+        --cw-Motion-theme-expressive--spring-effect-fast-damping)
+      spring-effect-fast-stiffness: 3800
+      spring-effect-fast-damping: 1
+      spring-effect-slow-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-expressive--spring-effect-slow-stiffness,
+        --cw-Motion-theme-expressive--spring-effect-slow-damping)
+      spring-effect-slow-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-expressive--spring-effect-slow-stiffness,
+        --cw-Motion-theme-expressive--spring-effect-slow-damping)
+      spring-effect-slow-stiffness: 800
+      spring-effect-slow-damping: 1
+      spring-spatial-default-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-expressive--spring-spatial-default-stiffness,
+        --cw-Motion-theme-expressive--spring-spatial-default-damping)
+      spring-spatial-default-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-expressive--spring-spatial-default-stiffness,
+        --cw-Motion-theme-expressive--spring-spatial-default-damping)
+      spring-spatial-default-stiffness: 380
+      spring-spatial-default-damping: 0.8
+      spring-spatial-fast-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-expressive--spring-spatial-fast-stiffness,
+        --cw-Motion-theme-expressive--spring-spatial-fast-damping)
+      spring-spatial-fast-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-expressive--spring-spatial-fast-stiffness,
+        --cw-Motion-theme-expressive--spring-spatial-fast-damping)
+      spring-spatial-fast-stiffness: 800
+      spring-spatial-fast-damping: 0.6
+      spring-spatial-slow-easing: >-
+        cw-spring-motion-of(curve,
+        --cw-Motion-theme-expressive--spring-spatial-slow-stiffness,
+        --cw-Motion-theme-expressive--spring-spatial-slow-damping)
+      spring-spatial-slow-duration: >-
+        cw-spring-motion-of(duration,
+        --cw-Motion-theme-expressive--spring-spatial-slow-stiffness,
+        --cw-Motion-theme-expressive--spring-spatial-slow-damping)
+      spring-spatial-slow-stiffness: 200
+      spring-spatial-slow-damping: 0.8
+  reducedMotion:
+    description: Motion values for when user-agent signals reduced motion is preferred.
+    values:
+      spring-spatial-default-duration: 0s
+      spring-spatial-fast-duration: 0s
+      spring-spatial-slow-duration: 0s
+      spring-effect-default-duration: 0s
+      spring-effect-fast-duration: 0s
+      spring-effect-slow-duration: 0s
+      transition-duration-short-1: 0s
+      transition-duration-short-2: 0s
+      transition-duration-short-3: 0s
+      transition-duration-short-4: 0s
+      transition-duration-medium-1: 0s
+      transition-duration-medium-2: 0s
+      transition-duration-medium-3: 0s
+      transition-duration-medium-4: 0s
+      transition-duration-long-1: 0s
+      transition-duration-long-2: 0s
+      transition-duration-long-3: 0s
+      transition-duration-long-4: 0s
+      transition-duration-extraLong-1: 0s
+      transition-duration-extraLong-2: 0s
+      transition-duration-extraLong-3: 0s
+      transition-duration-extraLong-4: 0s