@tacc/core-styles 2.22.6 → 2.23.0

package/dist/trumps/s-image-grid.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */.x-grid--layout-cols-equal-set-count{grid-template-columns:repeat(var(--count),auto)}.x-grid--layout-cols-equal-min-width{grid-template-columns:repeat(auto-fit,minmax(var(--width),1fr))}.s-image-grid,.x-grid--layout-cols-equal-min-width-max-count{--gap:var(--global-space--grid-gap);--max-cols:7;--min-width:250px;--row-height:auto;--gap-count:calc(var(--max-cols) - 1);--total-gap-width:calc(var(--gap-count)*var(--gap));--max-width:calc((100% - var(--total-gap-width))/var(--max-cols));display:grid;gap:var(--gap);grid-auto-rows:var(--row-height);grid-template-columns:repeat(auto-fill,minmax(max(var(--min-width),var(--max-width)),1fr))}.x-grid--layout-rows-equal-max-height{grid-auto-rows:1fr}.x-grid--layout-rows-equal-set-height{grid-auto-rows:var(--height)}.x-grid--content-align-center{align-items:center;justify-items:center}.s-image-grid *{max-height:100%;max-width:100%}ul.s-image-grid{margin-bottom:unset;padding-inline-start:unset}ul.s-image-grid>li{list-style:none}.s-image-grid>a,.s-image-grid>li,.s-image-grid>li>a{align-items:center;display:flex;justify-content:center}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */.x-grid--layout-cols-equal-set-count{grid-template-columns:repeat(var(--count),auto)}.x-grid--layout-cols-equal-min-width{grid-template-columns:repeat(auto-fit,minmax(var(--width),1fr))}.s-image-grid,.x-grid--layout-cols-equal-min-width-max-count{--gap:var(--global-space--grid-gap);--max-cols:7;--min-width:250px;--row-height:auto;--gap-count:calc(var(--max-cols) - 1);--total-gap-width:calc(var(--gap-count)*var(--gap));--max-width:calc((100% - var(--total-gap-width))/var(--max-cols));display:grid;gap:var(--gap);grid-auto-rows:var(--row-height);grid-template-columns:repeat(auto-fill,minmax(max(var(--min-width),var(--max-width)),1fr))}.x-grid--layout-rows-equal-max-height{grid-auto-rows:1fr}.x-grid--layout-rows-equal-set-height{grid-auto-rows:var(--height)}.x-grid--content-align-center{align-items:center;justify-items:center}.s-image-grid *{max-height:100%;max-width:100%}ul.s-image-grid{margin-bottom:unset;padding-inline-start:unset}ul.s-image-grid>li{list-style:none}.s-image-grid>a,.s-image-grid>li,.s-image-grid>li>a{align-items:center;display:flex;justify-content:center}

package/dist/trumps/s-inline-dl.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */dl.s-inline-dl dt{display:block;float:left;font-weight:var(--bold);margin-bottom:0}dl.s-inline-dl dd{clear:right;margin-bottom:0}dl.s-inline-dl dt:after{content:":";margin-inline-end:.25em}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */dl.s-inline-dl dt{display:block;float:left;font-weight:var(--bold);margin-bottom:0}dl.s-inline-dl dd{clear:right;margin-bottom:0}dl.s-inline-dl dt:after{content:":";margin-inline-end:.25em}

package/dist/trumps/s-irregular-links.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */.s-irregular-links [class*=button--as-link],.s-irregular-links a,.x-link,.x-link--irregular{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled,.x-link--irregular--disabled{opacity:.5;pointer-events:none}.s-irregular-links [class*=button--as-link]:hover,.s-irregular-links a:hover,.x-link--hover,.x-link--irregular--hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--global-border-width--normal)}.s-irregular-links [class*=button--as-link]:active,.s-irregular-links a:active,.x-link--active,.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted}.s-irregular-links [class*=button--as-link],.s-irregular-links a,.x-link--irregular{text-decoration-line:underline}.s-irregular-links [class*=button--as-link]:hover,.s-irregular-links a:hover,.x-link--irregular--hover{text-decoration-style:dashed}.s-irregular-links [class*=button--as-link]:active,.s-irregular-links a:active,.x-link--irregular--active{text-decoration-style:dotted}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */.s-irregular-links [class*=button--as-link],.s-irregular-links a,.x-link,.x-link--irregular{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled,.x-link--irregular--disabled{opacity:.5;pointer-events:none}.s-irregular-links [class*=button--as-link]:hover,.s-irregular-links a:hover,.x-link--hover,.x-link--irregular--hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--global-border-width--normal)}.s-irregular-links [class*=button--as-link]:active,.s-irregular-links a:active,.x-link--active,.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted}.s-irregular-links [class*=button--as-link],.s-irregular-links a,.x-link--irregular{text-decoration-line:underline}.s-irregular-links [class*=button--as-link]:hover,.s-irregular-links a:hover,.x-link--irregular--hover{text-decoration-style:dashed}.s-irregular-links [class*=button--as-link]:active,.s-irregular-links a:active,.x-link--irregular--active{text-decoration-style:dotted}

package/dist/trumps/s-paragraph-table.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/trumps/s-portal-nav.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */.s-portal-nav{text-transform:none}ul.s-portal-nav{margin-bottom:0;padding-left:0}.s-portal-nav a:hover{text-decoration:none}.s-portal-nav .icon{font-size:1.5em;margin-right:.25em;vertical-align:middle}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */.s-portal-nav{text-transform:none}ul.s-portal-nav{margin-bottom:0;padding-left:0}.s-portal-nav a:hover{text-decoration:none}.s-portal-nav .icon{font-size:1.5em;margin-right:.25em;vertical-align:middle}

package/dist/trumps/s-style-guide.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */.s-style-guide section:not(.o-section)>h1:first-child,.s-style-guide section:not(.o-section)>h2:first-child,.s-style-guide section:not(.o-section)>h3:first-child,.s-style-guide section:not(.o-section)>h4:first-child,.s-style-guide section:not(.o-section)>h5:first-child,.s-style-guide section:not(.o-section)>h6:first-child,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h1,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h2,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h3,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h4,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h5,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h6{margin-top:var(--global-space--x-large)}.s-style-guide section>h1,.s-style-guide section>h2,.s-style-guide section>h3,.s-style-guide section>h4,.s-style-guide section>h5,.s-style-guide section>h6{margin-bottom:var(--global-space--normal)}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */.s-style-guide section:not(.o-section)>h1:first-child,.s-style-guide section:not(.o-section)>h2:first-child,.s-style-guide section:not(.o-section)>h3:first-child,.s-style-guide section:not(.o-section)>h4:first-child,.s-style-guide section:not(.o-section)>h5:first-child,.s-style-guide section:not(.o-section)>h6:first-child,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h1,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h2,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h3,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h4,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h5,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h6{margin-top:var(--global-space--x-large)}.s-style-guide section>h1,.s-style-guide section>h2,.s-style-guide section>h3,.s-style-guide section>h4,.s-style-guide section>h5,.s-style-guide section>h6{margin-bottom:var(--global-space--normal)}

package/dist/trumps/s-system-specs.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */.s-system-specs{font-size:var(--global-font-size--small);font-weight:var(--global-font-weight--medium)}@media only screen and (min-width:768px){.s-system-specs{display:flow-root}.s-system-specs>*{display:inline-block}.s-system-specs>figure{float:left}}.s-system-specs{--row-height:32px}.s-system-specs>aside{margin-top:var(--row-height)}@media only screen and (max-width:991px){.s-system-specs>figure{margin-bottom:var(--row-height)}}@media only screen and (min-width:992px){.s-system-specs{--col-width--thin:42%;--col-width--wide:48%;--col-gutter:10%;--col-padding:40px;padding-inline:var(--col-padding)}.s-system-specs>aside,.s-system-specs>div{padding-inline:var(--col-padding)}.s-system-specs>div{width:var(--col-width--thin)}.s-system-specs>figure{margin-right:var(--col-gutter);width:var(--col-width--wide)}}@media only screen and (min-width:1200px){.s-system-specs>aside{width:var(--col-width--thin)}}.s-system-specs>figure>img{display:block;width:100%}.s-system-specs>figure>figcaption{margin-top:-40px;position:relative}@media only screen and (max-width:991px){.s-system-specs>figure>img{margin-left:auto;margin-right:auto;width:60%}}@media only screen and (min-width:992px){.s-system-specs>figure>figcaption{margin-left:auto;margin-right:auto;width:80%}}.s-system-specs .c-data-list__key a{font-weight:var(--medium)}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */.s-system-specs{font-size:var(--global-font-size--small);font-weight:var(--global-font-weight--medium)}@media only screen and (min-width:768px){.s-system-specs{display:flow-root}.s-system-specs>*{display:inline-block}.s-system-specs>figure{float:left}}.s-system-specs{--row-height:32px}.s-system-specs>aside{margin-top:var(--row-height)}@media only screen and (max-width:991px){.s-system-specs>figure{margin-bottom:var(--row-height)}}@media only screen and (min-width:992px){.s-system-specs{--col-width--thin:42%;--col-width--wide:48%;--col-gutter:10%;--col-padding:40px;padding-inline:var(--col-padding)}.s-system-specs>aside,.s-system-specs>div{padding-inline:var(--col-padding)}.s-system-specs>div{width:var(--col-width--thin)}.s-system-specs>figure{margin-right:var(--col-gutter);width:var(--col-width--wide)}}@media only screen and (min-width:1200px){.s-system-specs>aside{width:var(--col-width--thin)}}.s-system-specs>figure>img{display:block;width:100%}.s-system-specs>figure>figcaption{margin-top:-40px;position:relative}@media only screen and (max-width:991px){.s-system-specs>figure>img{margin-left:auto;margin-right:auto;width:60%}}@media only screen and (min-width:992px){.s-system-specs>figure>figcaption{margin-left:auto;margin-right:auto;width:80%}}.s-system-specs .c-data-list__key a{font-weight:var(--medium)}

package/dist/trumps/s-truncated-table.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */.s-truncated-table p,.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */.s-truncated-table p,.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}

package/dist/trumps/tacc-search-bar.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{align-items:center;display:flex;font-family:Roboto;position:relative}:host [part=button]{align-items:center;background-color:transparent;border:none;box-sizing:content-box;color:var(--header-text-color);font-size:16px;font-size:var(--button-font-size);height:var(--input-height,38px);left:0;margin:0;padding:0 var(--button-horz-pad);position:absolute;top:50%;transform:translateY(-50%)}:host [part=input]{background-color:var(--header-search-bkgd-color);border:var(--global-border-width--normal) solid var(--header-search-brdr-color);border-radius:5px;color:var(--header-text-color);display:block;font-size:var(--input-font-size);height:var(--input-height);margin:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);padding-top:0;width:100%}:host [part=input]::-moz-placeholder{color:var(--header-text-color);opacity:.5}:host [part=input]::placeholder{color:var(--header-text-color);opacity:.5}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{align-items:center;display:flex;font-family:Roboto;position:relative}:host [part=button]{align-items:center;background-color:transparent;border:none;box-sizing:content-box;color:var(--header-text-color);font-size:16px;font-size:var(--button-font-size);height:var(--input-height,38px);left:0;margin:0;padding:0 var(--button-horz-pad);position:absolute;top:50%;transform:translateY(-50%)}:host [part=input]{background-color:var(--header-search-bkgd-color);border:var(--global-border-width--normal) solid var(--header-search-brdr-color);border-radius:5px;color:var(--header-text-color);display:block;font-size:var(--input-font-size);height:var(--input-height);margin:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);padding-top:0;width:100%}:host [part=input]::-moz-placeholder{color:var(--header-text-color);opacity:.5}:host [part=input]::placeholder{color:var(--header-text-color);opacity:.5}

package/dist/trumps/u-empty.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/trumps/u-hide.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */.u-hide--visually:not(:focus,:active){clip:rect(0 0 0 0);border:none;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */.u-hide--visually:not(:focus,:active){clip:rect(0 0 0 0);border:none;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/trumps/u-highlight/u-highlight.demo.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */.u-highlight-container{max-width:800px}.u-highlight{background-color:var(--global-color-primary--xxx-dark);color:var(--global-color-primary--xx-light);line-height:1;padding-inline:10px;text-transform:uppercase}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */.u-highlight-container{max-width:800px}.u-highlight{background-color:var(--global-color-primary--xxx-dark);color:var(--global-color-primary--xx-light);line-height:1;padding-inline:10px;text-transform:uppercase}

package/dist/trumps/u-highlight.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */.u-highlight{-webkit-box-decoration-break:clone;box-decoration-break:clone}:is(h1,h2,h3,h4).u-highlight{display:inline}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */.u-highlight{-webkit-box-decoration-break:clone;box-decoration-break:clone}:is(h1,h2,h3,h4).u-highlight{display:inline}

package/dist/trumps/u-mailto-text-replace.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */.u-mailto-text-replace[data-user][data-domain]{font-size:0;text-underline-offset:.3rem;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:initial;visibility:visible}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */.u-mailto-text-replace[data-user][data-domain]{font-size:0;text-underline-offset:.3rem;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:initial;visibility:visible}

package/dist/trumps/u-nested-text-content.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.22.6+ | MIT | github.com/TACC/Core-Styles */.u-nested-text-content{padding-left:var(--global-space--list-indent)}
+/*! @tacc/core-styles 2.23.0+ | MIT | github.com/TACC/Core-Styles */.u-nested-text-content{padding-left:var(--global-space--list-indent)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "2.22.6",
+  "version": "2.23.0",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",

package/src/lib/_imports/components/c-button--cms.css

@@ -0,0 +1,20 @@
+@import url("../components/c-button.selectors.css");
+@import url("../tools/selectors.form.css");
+
+
+:--main-content {
+  & :--c-button,
+  & :--form__button {
+    padding: 10px 20px;
+
+    font-size: var(--global-font-size--small);
+
+    font-weight: var(--bold);
+    letter-spacing: 0.05em;
+  }
+}
+
+:--c-button,
+:--form__button {
+  text-transform: uppercase;
+}

package/src/lib/_imports/components/django-cms-forms.hacks.css

@@ -9,8 +9,8 @@ Reference:
 
 Styleguide Components.DjangoCMS.Forms.Hacks
 */
-@custom-selector :--cms-logged-in   .cms-ready;
-@custom-selector :--cms-edit-mode   [class*="cms-structure-mode-"];
+@custom-selector :--django-cms-logged-in   .cms-ready;
+@custom-selector :--django-cms-edit-mode   [class*="cms-structure-mode-"];
 /* IDEA: import and extend `.c-message(...)` */
 /* IDEA: WP-280 use postcss mixin for message styles */
 /* @tacc/core-styles/src/lib/_imports/components/c-message.css */
@@ -33,7 +33,7 @@ Styleguide Components.DjangoCMS.Forms.Hacks
   font-size: var(--global-font-size--small);
 }
 /* To give error to admin */
-html:--cms-edit-mode :--problem-field > label::after {
+html:--django-cms-edit-mode :--problem-field > label::after {
   content: 'A multi checkbox field that is required is not well implemented. Do not require this field or replace it with multiple required Yes/No radio fields.';
 
   color: var(--global-color-danger--dark);
@@ -41,7 +41,7 @@ html:--cms-edit-mode :--problem-field > label::after {
   border-color: var(--global-color-danger--normal);
 }
 /* To give warning to user */
-html:not(:--cms-edit-mode) :--problem-field > label::after {
+html:not(:--django-cms-edit-mode) :--problem-field > label::after {
   content: 'This field is not well implemented. Select all boxes to bypass the error with this field.';
 
   color: var(--global-color-warning--dark);

package/src/lib/_imports/core-styles.cms.css

@@ -19,6 +19,7 @@
 @import url("./elements/sticky-footer.css");
 @import url("./elements/html-elements.cms.css");
 @import url("./elements/headings--cms.css");
+@import url("./elements/mailto-link.css");
 @import url("./elements/monospace.css");
 @import url("./elements/table.cms.css");
 
@@ -35,6 +36,7 @@
 @import url("./components/bootstrap.row.css");
 @import url("./components/c-content-block.css");
 @import url("./components/cortal.icon.css");
+@import url("./components/c-button--cms.css");
 @import url("./components/c-card.css");
 @import url("./components/c-form--cms.css");
 @import url("./components/c-message.css");
@@ -47,6 +49,7 @@
 @import url("./components/c-card--frontera-about-page.css");
 
 /* TRUMPS */
+@import url("./trumps/s-drop-cap.css");
 @import url("./trumps/s-footer.css");
 @import url("./trumps/s-footer--thick.css");
 @import url("./trumps/s-truncated-table.css");

package/src/lib/_imports/elements/irregular-link.css

@@ -0,0 +1,15 @@
+/* Allow making all hyperlinks "irregular" styles */
+/* FAQ: Only included by a project as client wants it */
+/* SEE: https://ecepalliance.org/ (<style id="site-css-links">) */
+
+@import url('../tools/x-link.css');
+
+a {
+  @extend .x-link--irregular;
+}
+a:hover {
+  @extend .x-link--irregular--hover;
+}
+a:active {
+  @extend .x-link--irregular--active;
+}

package/src/lib/_imports/elements/mailto-link.css

@@ -0,0 +1,9 @@
+/* Allow supporting `u-mailto-text-replace` on all hyperlinks */
+/* FAQ: Only included by a project as client wants it */
+/* SEE: https://ecepalliance.org/about/leadership/ */
+
+@import url("../tools/x-mailto-text-replace.css");
+
+a[data-user][data-domain] {
+  @extend %x-mailto-text-replace;
+}

package/src/lib/_imports/settings/color.css

@@ -127,8 +127,8 @@
 
   /* Link */
   /* DEPRECATED */
-  /* TODO: Rely on src/lib/_imports/generics/color.css to manage dark/light */
+  /* TODO: Rely on :--light-context and :--dark-context instead */
 
   --global-color-link-on-light--normal: var(--global-color-accent--normal);
-  --global-color-link-on-dark--normal: var(--global-color-accent--light);
+  --global-color-link-on-dark--normal: var(--global-color-accent--xxx-light);
 }

package/src/lib/_imports/tools/media-queries.css

@@ -15,6 +15,10 @@ Reference:
 
 Styleguide Tools.CustomMediaQueries.Breakpoints
 */
+@custom-media --xx-narrow-and-below (width < 380px);
+@custom-media --xx-narrow-and-above (width >= 380px);
+@custom-media --xx-narrow-to-x-narrow (380px <= width < 576px);
+
 @custom-media --x-narrow-and-below (width < 576px);
 @custom-media --x-narrow-and-above (width >= 576px);
 @custom-media --x-narrow-to-narrow (576px <= width < 768px);

package/src/lib/_imports/trumps/s-drop-cap/config.yml

@@ -0,0 +1,3 @@
+context:
+  shouldLoadCMS: true
+  📝 shouldLoadCMS: only CMS imports this

package/src/lib/_imports/trumps/s-drop-cap/readme.md

@@ -0,0 +1 @@
+Create drop-cap from first letter of first direct-child paragraph.

package/src/lib/_imports/trumps/s-drop-cap/s-drop-cap.hbs

@@ -0,0 +1,5 @@
+<div class="s-drop-cap">
+  <h1>Lorem Ipsum</h1>
+  <p>{{> @text-of-one-paragraph-long }}</p>
+  <p>{{> @text-of-one-paragraph-long }}</p>
+</div>

package/src/lib/_imports/trumps/s-drop-cap.css

@@ -0,0 +1,14 @@
+@supports (initial-letter: 3){
+  .s-drop-cap > p:first-of-type::first-letter {
+    padding-right: 1em;
+    initial-letter: 3;
+  }
+}
+
+@supports (-webkit-initial-letter: 3) {
+  .s-drop-cap > p:first-of-type::first-letter {
+    padding-right: 1em;
+    -webkit-initial-letter: 3;
+    font-family: Arial;
+  }
+}