hastebrot / clonyx Goto Github PK

acceptance criteria:

task breakdown:

technical details:

<style lang="scss">
.onyx-radio-button {
  --onyx-radio-button-cursor: pointer;
  --onyx-radio-button-input-border-color: var(--onyx-color-base-neutral-400);
  --onyx-radio-button-input-background-color: var(--onyx-color-base-background-blank);
  --onyx-radio-button-input-outline-color: var(--onyx-color-base-primary-200);
  --onyx-radio-button-input-outline-width: 0;
  --onyx-radio-button-label-color: var(--onyx-color-text-icons-neutral-intense);

out of scope:

acceptance criteria:

task breakdown:

technical details:

• we have screenshot tests that display a grid of component states.
  • considerations: a grid allows a good overview and reduces the number of files. however, in on web browser document you can only have one focused and one hovered element, hence we need to enforce focused and hovered styles.
• we have component style definitions that use design token variables on theme-level and define additional component-related variables within the components. since we use tailwind, we have to ensure the specificity of the CSS declaration for the styles of states are correct and easy to reason about.
  • considerations: we use tailwind to reuse most of the definitions from onyx-react in onyx-htmx, i.e. we want to reduce the build steps. when the design system implementation stabilized to a certain degree, do research if SCSS or facebook stylex might be better in this case, https://github.com/facebook/stylex.
  • react className attributes with tailwind style definitions are not static typed, e.g. design tokens on all levels, i.e. global tokens, semantic tokens, component tokens
  • for react aria components there are also code examples that use tailwind styles to define variants and compound variants with composeRenderProps(), https://github.com/adobe/react-spectrum/blob/rac-submenu-homepage/starters/tailwind/src/ListBox.tsx. also tailwind plugin for react-aria components, https://github.com/adobe/react-spectrum/tree/tailwindcss-react-aria-components%401.1.0/packages/tailwindcss-react-aria-components

out of scope:

• documentation about use of multi-pane browser for different viewports