@pie-players/pie-theme 0.3.63 → 0.3.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/components.css +105 -2
  2. package/package.json +2 -2
@@ -727,8 +727,111 @@ table {
727
727
  .pie-answer-eliminator-eliminated-fallback {
728
728
  text-decoration: line-through;
729
729
  text-decoration-thickness: 2px;
730
- text-decoration-color: var(--pie-incorrect, #ff9800);
731
- opacity: 0.6;
730
+ text-decoration-color: var(
731
+ --pie-answer-eliminator-strike-color,
732
+ var(--pie-incorrect, #ff9800)
733
+ );
734
+ }
735
+
736
+ .pie-answer-eliminator-image-strike {
737
+ position: relative;
738
+ display: inline-block;
739
+ max-width: 100%;
740
+ /*
741
+ * Collapse the line-box strut so the wrapper hugs the image exactly (no
742
+ * baseline descender gap under it) and the X cannot overhang the artwork.
743
+ * It also keeps the image bottom on the text baseline, as an unwrapped
744
+ * baseline-aligned image sits.
745
+ */
746
+ line-height: 0;
747
+ }
748
+
749
+ .pie-answer-eliminator-image-strike-overlay {
750
+ position: absolute;
751
+ inset: 0;
752
+ width: 100%;
753
+ height: 100%;
754
+ pointer-events: none;
755
+ }
756
+
757
+ .pie-answer-eliminator-image-strike-line {
758
+ stroke: var(
759
+ --pie-answer-eliminator-strike-color,
760
+ var(--pie-incorrect, #ff9800)
761
+ );
762
+ stroke-width: 3;
763
+ stroke-linecap: square;
764
+ }
765
+
766
+ /* Wider light line under each diagonal so the X stays legible on dark imagery. */
767
+ .pie-answer-eliminator-image-strike-casing {
768
+ stroke: var(
769
+ --pie-answer-eliminator-image-strike-casing-color,
770
+ rgba(255, 255, 255, 0.85)
771
+ );
772
+ stroke-width: 6;
773
+ stroke-linecap: square;
774
+ }
775
+
776
+ /*
777
+ * Eliminated math: MathJax's rendered glyphs are generated content, so neither
778
+ * `::highlight()` nor `text-decoration` reaches them. The eliminator marks the
779
+ * rendered math box instead and the paint happens here, in the same colour and
780
+ * weight as the text line-through so a choice mixing prose and math reads as one
781
+ * strike. Which mark it gets depends on the shape of the expression — the tool
782
+ * measures the box and picks `--line` or `--cross`.
783
+ */
784
+ .pie-answer-eliminator-math-strike {
785
+ position: relative;
786
+ /*
787
+ * Internal: the resolved strike paint, so the rules below need not repeat the
788
+ * fallback chain. Not a themeable knob — set --pie-answer-eliminator-strike-color.
789
+ */
790
+ --pie-answer-eliminator-strike-paint: var(
791
+ --pie-answer-eliminator-strike-color,
792
+ var(--pie-incorrect, #ff9800)
793
+ );
794
+ }
795
+
796
+ /* A single row of symbols takes the same line-through as the surrounding prose. */
797
+ .pie-answer-eliminator-math-strike--line::after {
798
+ content: "";
799
+ position: absolute;
800
+ left: 0;
801
+ right: 0;
802
+ top: 50%;
803
+ border-top: 2px solid var(--pie-answer-eliminator-strike-paint);
804
+ pointer-events: none;
805
+ }
806
+
807
+ /*
808
+ * A stacked 2D layout (fraction, radical, matrix) takes the diagonals instead.
809
+ * A centred line would land on the math axis — precisely where the fraction bar
810
+ * already is — and read as a recoloured bar rather than an elimination, so the
811
+ * expression is crossed out the way an eliminated image is. Corner keywords make
812
+ * each gradient's transition run exactly corner to corner at any aspect ratio,
813
+ * with a 1px feather either side of the 1px core for a smooth 2px line.
814
+ */
815
+ .pie-answer-eliminator-math-strike--cross::after {
816
+ content: "";
817
+ position: absolute;
818
+ inset: 0;
819
+ pointer-events: none;
820
+ background-image:
821
+ linear-gradient(
822
+ to bottom right,
823
+ transparent calc(50% - 1.5px),
824
+ var(--pie-answer-eliminator-strike-paint) calc(50% - 0.5px),
825
+ var(--pie-answer-eliminator-strike-paint) calc(50% + 0.5px),
826
+ transparent calc(50% + 1.5px)
827
+ ),
828
+ linear-gradient(
829
+ to bottom left,
830
+ transparent calc(50% - 1.5px),
831
+ var(--pie-answer-eliminator-strike-paint) calc(50% - 0.5px),
832
+ var(--pie-answer-eliminator-strike-paint) calc(50% + 0.5px),
833
+ transparent calc(50% + 1.5px)
834
+ );
732
835
  }
733
836
 
734
837
  .pie-answer-masked-fallback {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-players/pie-theme",
3
- "version": "0.3.63",
3
+ "version": "0.3.65",
4
4
  "type": "module",
5
5
  "description": "Shared PIE theme tokens, css variables, and theme custom element",
6
6
  "license": "MIT",
@@ -43,7 +43,7 @@
43
43
  "test": "bun test --dom tests"
44
44
  },
45
45
  "devDependencies": {
46
- "@biomejs/biome": "^2.5.6",
46
+ "@biomejs/biome": "^2.5.7",
47
47
  "typescript": "^5.9.3"
48
48
  },
49
49
  "homepage": "https://github.com/pie-framework/pie-players/tree/master/packages/theme#readme",