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

Themeable design system for the SEEK Group

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