diff --git a/packages/css-theme/README.md b/packages/css-theme/README.md
index 08b22a3352d..c287dcb68d1 100644
--- a/packages/css-theme/README.md
+++ b/packages/css-theme/README.md
@@ -1,7 +1,7 @@
-
+
-FreeSewing v2
+FreeSewing
An open source platform for made-to-measure sewing patterns
(https://github.com/joostdecock)",
"homepage": "https://freesewing.org/",
@@ -39,7 +39,7 @@
],
"publishConfig": {
"access": "public",
- "tag": "latest"
+ "tag": "next"
},
"engines": {
"node": ">=8.0.0",
diff --git a/packages/css-theme/src/_elements.scss b/packages/css-theme/src/_elements.scss
index 91e054a56a0..ae6fc5d05d0 100644
--- a/packages/css-theme/src/_elements.scss
+++ b/packages/css-theme/src/_elements.scss
@@ -6,3 +6,4 @@
@import "elements/figure";
@import "elements/table";
@import "elements/button";
+@import "elements/jargon";
diff --git a/packages/css-theme/src/elements/_jargon.scss b/packages/css-theme/src/elements/_jargon.scss
new file mode 100644
index 00000000000..5e90ac8de28
--- /dev/null
+++ b/packages/css-theme/src/elements/_jargon.scss
@@ -0,0 +1,51 @@
+.jargon-term {
+ text-decoration: underline dashed $fc-link-light;
+}
+.jargon-term::after {
+ content: "?";
+ font-weight: bold;
+ display: inline-block;
+ transform: translate(0, -0.5em);
+ font-size: 75%;
+ color: $fc-link-light;
+ margin-left: 3px;
+}
+
+.jargon-term:hover {
+ position: relative;
+ text-decoration: none;
+ cursor: help;
+}
+.jargon-term .jargon-info {
+ display: none
+}
+.jargon-term:hover .jargon-info {
+ display: block;
+ position: absolute;
+ top: 1.5em;
+ left: 0;
+ background: $fc-bg-light;
+ color: $fc-text-light;
+ border: 1px solid #DCDCDC;
+ padding: 1rem;
+ border-radius: 4px;
+ font-size: 90%;
+ min-width: 250px;
+ max-width: 450px;
+ z-index: 1;
+}
+.theme-wrapper.dark {
+ .jargon-term {
+ text-decoration: underline dashed $fc-link-dark;
+ }
+ .jargon-term::after {
+ color: $fc-link-dark;
+ }
+ .jargon-term:hover .jargon-info {
+ background: $fc-bg-dark;
+ color: $fc-text-dark;
+ border: 1px solid #5A5A5A;
+ }
+}
+
+