okonet

import "focus-visible"; // :focus-visible polyfill
import { darken, transparentize } from "polished";

/**
 * Mixin to generate consistent box-shadow rule for focus rings and selections
 */
export function focusBoxShadow(color, hasInset = false) {
  return {
    boxShadow: `
        0 0 0 0.2em ${transparentize(0.75, color)}

okonet

const patterJourneyMachine = Machine({
    id: 'pattern',
    initial: 'Pattern exists in the UI library?',
    states: {
        "Pattern exists in the UI library?": {
            on: {
                YES: 'Does it fulfill all the requirements?',
                NO: 'Similar pattern exists in other projects?'
            }
        },

okonet

Pattern Journey
  Pattern exists in the UI library?*
    Yes -> Does it fulfill all the requirements?
    No -> Similar pattern exists in other projects?
    
  Does it fulfill all the requirements?
    Yes -> Just use it
    No -> Can be modified to fulfill all requirements?
    
  Similar pattern exists in other projects?

okonet

okonet

DynamicDateRangePicker
  DateRangeNotSet
    click -> CustomRange
  CustomRange
    fixedStart -> FixedStart
    prevPeriod -> PreviousPeriod
    nextPeriod -> NextPeriod
    currentPeriod -> CurrentPeriod
    # See https://sketch.systems/okonet/sketch/64ddad32ec5753cdab12da7d4eb53a48
    DateRangePicker&

okonet

DatePicker
  DateNotSet
    click -> SelectDate
  SelectDate
    hover -> DateHighlighted
  DateHighlighted
    click -> DateSet

  DateSelected
    hover -> DateHighlighted

okonet