braid-design-system/dist/lib/components/Stepper/Stepper.css.mjs

Themeable design system for the SEEK Group

import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, createVar } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { atoms } from "../../css/atoms/atoms.mjs";
import { colorModeStyle } from "../../css/colorModeStyle.mjs";
import { outlineStyle } from "../../css/outlineStyle.mjs";
import { responsiveStyle } from "../../css/responsiveStyle.mjs";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/Stepper/Stepper.css.ts", "braid-design-system");
const baseColourVar = createVar("baseColourVar");
const highlightVar = createVar("highlightVar");
const stepIndicatorSize = vars.inlineFieldSize.small;
const tone = {
  formAccent: style(colorModeStyle({
    lightMode: {
      vars: {
        [highlightVar]: vars.borderColor.formAccent
      }
    },
    darkMode: {
      vars: {
        [highlightVar]: vars.borderColor.formAccentLight
      }
    }
  }), "tone_formAccent"),
  neutral: style(colorModeStyle({
    lightMode: {
      vars: {
        [highlightVar]: vars.borderColor.neutral
      }
    },
    darkMode: {
      vars: {
        [highlightVar]: vars.borderColor.neutralLight
      }
    }
  }), "tone_neutral")
};
const step = style({
  outline: "none",
  textAlign: "left",
  ...colorModeStyle({
    lightMode: {
      vars: {
        [baseColourVar]: vars.borderColor.neutralLight
      }
    },
    darkMode: {
      vars: {
        [baseColourVar]: vars.borderColor.neutral
      }
    }
  })
}, "step");
const indicator = style([atoms({
  display: "block"
}), {
  height: stepIndicatorSize,
  width: stepIndicatorSize,
  color: baseColourVar
}], "indicator");
const stretch = style({
  flex: 1
}, "stretch");
const stretchLastAboveTablet = style(responsiveStyle({
  tablet: {
    flex: 1
  }
}), "stretchLastAboveTablet");
const highlight = style({
  color: highlightVar
}, "highlight");
const complete = style({}, "complete");
const active = style({}, "active");
const inner = style([atoms({
  opacity: 0,
  transition: "fast"
}), {
  fill: "currentcolor",
  transformOrigin: "50% 50%",
  transform: "scale(0)",
  selectors: {
    [`${active} > &`]: {
      transform: "scale(1)",
      opacity: 1
    },
    [`${complete} > &`]: {
      transform: "scale(2.1)",
      opacity: 1
    }
  }
}], "inner");
const tick = style([atoms({
  transition: "fast"
}), {
  transitionDelay: ".1s",
  transformOrigin: "50% 50%",
  selectors: {
    [`:not(${complete}) > &`]: {
      opacity: 0,
      transitionDelay: "0s",
      transform: "scale(.5) rotate(50deg)"
    }
  }
}, colorModeStyle({
  lightMode: {
    fill: vars.foregroundColor.neutralInverted
  },
  darkMode: {
    fill: vars.foregroundColor.neutral
  }
})], "tick");
const progressBarGap = "xxsmall";
const dotSize = 2;
const progressTrack = style({
  background: `repeating-linear-gradient(90deg, ${baseColourVar}, ${baseColourVar} ${dotSize}px, transparent ${dotSize}px, transparent ${dotSize * 2}px)`,
  height: vars.borderWidth.large,
  width: `${calc("100%").subtract(stepIndicatorSize).subtract(calc(vars.space[progressBarGap]).multiply(2))}`,
  top: `${calc(stepIndicatorSize).subtract(vars.borderWidth.large).divide(2)}`,
  left: `${calc(stepIndicatorSize).add(vars.space[progressBarGap])}`
}, "progressTrack");
const progressTrackCentered = style(responsiveStyle({
  tablet: {
    left: `${calc("50%").add(calc(stepIndicatorSize).divide(2)).add(vars.space[progressBarGap])}`
  }
}), "progressTrackCentered");
const progressLine = style({
  background: highlightVar,
  transition: "transform .2s ease"
}, "progressLine");
const progressUnfilled = style({
  transform: "translateX(-101%)"
}, "progressUnfilled");
const focusVisibleSelector = `${step}:focus-visible &`;
const {
  transition: outlineTransition,
  ...outline
} = outlineStyle(focusVisibleSelector);
const indicatorContainer = style([outline, {
  width: stepIndicatorSize,
  transition: [vars.transition.fast, outlineTransition].join(", "),
  selectors: {
    [`${step}:active &`]: {
      transform: vars.transform.touchable
    },
    [focusVisibleSelector]: {
      transform: "scale(1.2)"
    }
  }
}], "indicatorContainer");
endFileScope();
export {
  active,
  complete,
  highlight,
  indicator,
  indicatorContainer,
  inner,
  progressLine,
  progressTrack,
  progressTrackCentered,
  progressUnfilled,
  step,
  stretch,
  stretchLastAboveTablet,
  tick,
  tone
};