@tacc/core-styles 2.45.0 → 2.46.1

package/src/lib/_imports/settings/color--cms.selectors.css

@@ -0,0 +1,19 @@
+/* Set scope for accent colors */
+
+@custom-selector :--light-context
+  .c-recognition--style-light,
+  :--o-section--muted,
+  :--o-section--light,
+  :--c-card--standard,
+  :--c-card--standard-N,
+  :--c-card--plain;
+@custom-selector :--dark-context
+  .c-recognition--style-dark,
+  :--o-section--dark,
+  .col-dark,
+  .s-footer;
+
+@custom-selector :--light-context-safe
+  :where(:--dark-context :--light-context);
+@custom-selector :--dark-context-safe
+  :where(:--dark-context:not(:--light-context *));

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

@@ -1,7 +1,3 @@
-@import url("../settings/color.accent.css");
+@import url("./color--docs.selectors.css");
 
-/* Set scope for accent colors */
-@custom-selector :--light-context-safe
-  :root;
-@custom-selector :--dark-context-safe
-  .u-dark-context;
+@import url("../settings/color.accent.css");

package/src/lib/_imports/settings/color--docs.selectors.css

@@ -0,0 +1,6 @@
+/* Set scope for accent colors */
+
+@custom-selector :--light-context-safe
+  :root;
+@custom-selector :--dark-context-safe
+  .u-dark-context;

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

@@ -1,8 +1,4 @@
+@import url("./color--portal.selectors.css");
+
 @import url("./color--portal.v1.css");
 @import url("./color--portal.v2.css");
-
-/* Set scope for accent colors */
-@custom-selector :--light-context-safe
-  :root;
-@custom-selector :--dark-context-safe
-  .u-dark-context;

package/src/lib/_imports/settings/color--portal.selectors.css

@@ -0,0 +1,6 @@
+/* Set scope for accent colors */
+
+@custom-selector :--light-context-safe
+  :root;
+@custom-selector :--dark-context-safe
+  .u-dark-context;

package/src/lib/_imports/trumps/u-image-zoom/config.yml

@@ -0,0 +1,3 @@
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this

package/src/lib/_imports/trumps/u-image-zoom/readme.md

@@ -0,0 +1 @@
+An image that "zooms in" when user hovers over image, and "zooms out" when user stops hovering.

package/src/lib/_imports/trumps/u-image-zoom/u-image-zoom.demo.css

@@ -0,0 +1,3 @@
+.u-image-zoom--on-hover {
+  max-width: fit-content;
+}

package/src/lib/_imports/trumps/u-image-zoom/u-image-zoom.hbs

@@ -0,0 +1,8 @@
+<dl>
+  <dt><code>u-image-zoom--on-hover</code></dt>
+  <dd>
+    <a href="#" class="u-image-zoom--on-hover">
+      <img src="{{> @img-url }}" />
+    </a>
+  </dd>
+</dl>

package/src/lib/_imports/trumps/u-image-zoom.css

@@ -0,0 +1,16 @@
+@import url("./u-image-zoom.selectors.css");
+
+:--u-image-zoom {
+  display: block;
+  overflow: hidden;
+}
+:--u-image-zoom > :--u-image-zoom__media {
+  transition: transform .5s ease;
+}
+
+/* NOTE: Testing suggests this only works on anchors,
+         so explitely limit this utility to anchors */
+a:--u-image-zoom:hover :--u-image-zoom__media,
+a:hover :--u-image-zoom :--u-image-zoom__media {
+  transform: scale(1.5);
+}

package/src/lib/_imports/trumps/u-image-zoom.selectors.css

@@ -0,0 +1,8 @@
+@custom-selector :--u-image-zoom
+  .u-image-zoom,
+  [class*="image-zoom--"];
+
+@custom-selector :--u-image-zoom__media
+  img,
+  svg;
+  /* FAQ: Embedded media not permitted cuz its internal UI would move */