@tacc/core-styles 2.44.0 → 2.46.0

package/src/lib/_imports/components/c-card/_c-card--image-link-group.hbs

@@ -5,10 +5,20 @@
         {{> @c-card--image position="bottom" wide=true variant=variant card-link="#" disabled="true" }}
         {{> @c-card--image position="right" tall=true variant=variant card-link="#" disabled="true" }}
         {{> @c-card--image position="left" tall=true variant=variant card-link="#" disabled="true" }}
+        <!-- has-zoom -->
+        {{> @c-card--image position="top" wide=true variant=variant card-link="#" has-zoom=true }}
+        {{> @c-card--image position="bottom" wide=true variant=variant card-link="#" has-zoom=true disabled="true" }}
+        {{> @c-card--image position="right" tall=true variant=variant card-link="#" has-zoom=true disabled="true" }}
+        {{> @c-card--image position="left" tall=true variant=variant card-link="#" has-zoom=true disabled="true" }}
     {{else}}
         {{> @c-card--image position="top" wide=true variant=variant image-link="#" }}
         {{> @c-card--image position="bottom" wide=true variant=variant image-link="#" }}
         {{> @c-card--image position="right" tall=true variant=variant image-link="#" }}
         {{> @c-card--image position="left" tall=true variant=variant image-link="#" }}
+        <!-- has-zoom -->
+        {{> @c-card--image position="top" wide=true variant=variant image-link="#" has-zoom=true }}
+        {{> @c-card--image position="bottom" wide=true variant=variant image-link="#" has-zoom=true }}
+        {{> @c-card--image position="right" tall=true variant=variant image-link="#" has-zoom=true }}
+        {{> @c-card--image position="left" tall=true variant=variant image-link="#" has-zoom=true }}
     {{/if}}
 </section> 

package/src/lib/_imports/components/c-card/_c-card--image.hbs

@@ -12,18 +12,30 @@
     {{else}}
     Bender Rodríguez
     {{/if}}
+    {{#if has-zoom}}
+    (Zoom on Hover)
+    {{/if}}
   </h4>
   {{#unless card-link}}
   <p>Planet Express Worker</p>
   <p>(Anti-hero in Futurama)</p>
   {{/unless}}
   {{#if image-link}}
-  <a href="{{image-link}}">
+  <a href="{{image-link}}"
+     class="{{#if has-zoom}}u-image-zoom--on-hover{{/if}}"
+  >
     <img class="img-fluid" width="234px" height="293px"
       src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png"
       title="University of Texas at Austin" class="img-fluid"
     />
   </a>
+  {{else if has-zoom}}
+  <span class="u-image-zoom--on-hover">
+    <img class="img-fluid" width="234px" height="293px"
+      src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png"
+      title="University of Texas at Austin" class="img-fluid"
+    />
+  </span>
   {{else}}
   <img class="img-fluid" width="234px" height="293px"
     src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png"
@@ -39,6 +51,9 @@
     {{else}}
     Card - Image {{position}}
     {{/if}}
+    {{#if has-zoom}}
+    (Zoom on Hover)
+    {{/if}}
   </h3>
   {{#unless card-link}}
   <p>{{> @text-of-one-paragraph-short }}</p>
@@ -47,7 +62,9 @@
   {{/if}}
   {{/unless}}
   {{#if image-link}}
-  <a href="{{image-link}}">
+  <a href="{{image-link}}"
+     class="{{#if has-zoom}}u-image-zoom--on-hover{{/if}}"
+  >
     <img src="{{> @img-url wide=wide tall=tall medium=true }}" />
   </a>
   {{else}}
@@ -55,6 +72,10 @@
   <div class="embed-responsive embed-responsive-16by9">
     <iframe src="//www.youtube.com/embed/Lw1hOFZCjxg"></iframe>
   </div>
+    {{else if has-zoom}}
+  <span class="u-image-zoom--on-hover">
+    <img src="{{> @img-url wide=wide tall=tall medium=true }}" />
+  </span>
     {{else}}
   <img src="{{> @img-url wide=wide tall=tall medium=true }}" />
     {{/if}}

package/src/lib/_imports/components/c-card/config.yml

@@ -15,6 +15,9 @@ variants:
   - name: standard-3
     status: backup
   - name: images
+    context:
+      supportStyles:
+        - ../../assets/trumps/u-image-zoom.css
   - name: docs
     context:
       shouldLoadDocs: true

package/src/lib/_imports/components/c-card--image-zoom.css

@@ -0,0 +1,16 @@
+@import url("./c-card.selectors.css");
+
+a[class*=card--image] img {
+    --scale: 1.2;
+    --animation-speed: 1s;
+    --correction-factor: 0.833;
+
+    transition:
+        transform var(--animation-speed) linear,
+        clip-path var(--animation-speed) linear;
+    clip-path: inset(0);
+}
+a[class*=card--image]:hover img {
+    transform: scale(1.2);
+    clip-path: inset(calc(((var(--scale) * 100% - 100%) / 2) * var(--correction-factor)));
+}

package/src/lib/_imports/components/c-card-list.css

@@ -18,10 +18,6 @@ ul.c-card-list {
 }
 
 /* to prevent card images from overflowing */
-.c-card-list [class*="card--"] {
-    & > img,
-    & > a > img,
-    & > a:has(>img) {
-        max-width: 100%;
-    }
+.c-card-list [class*="card--"] img {
+    max-width: 100%;
 }

package/src/lib/_imports/components/c-card.selectors.css

@@ -1,4 +1,5 @@
 @import url("../tools/selectors.css");
+@import url("../trumps/u-image-zoom.selectors.css");
 
 @custom-selector :--c-card
     .c-card,
@@ -54,7 +55,9 @@
 @custom-selector :--c-card__image
     :--c-card img,
     :--c-card__image-link,
+    :--u-image-zoom,
+    /* Bootstrap 4 (embed), Bootstrap 5 (ratio) */
     .embed-responsive,
-    .ratio; /* Bootstrap 4 (embed), Bootstrap 5 (ratio) */
+    .ratio;
 @custom-selector :--c-card__image-link
     :--c-card a:has(> img);

package/src/lib/_imports/components/c-data-list/table/config.yml

@@ -1,6 +1,9 @@
 collated: true
 name: c-data-list--table
 label: '<table> Table'
+context:
+  key-class: c-data-list__key
+  value-class: c-data-list__value
 # NOTE: Variant config is mirrored on `../list/config` and `../table/config`
 # NOTE: Can `../list/config` and `../table/config` have source of truth?
 variants:
@@ -66,3 +69,9 @@ variants:
         c-data-list--is-vert
         c-data-list--is-narrow
         c-data-list--should-truncate-values
+  - name: multi-row
+    label: Multi-Row Items
+    view: table--multi-row.hbs
+    context:
+      class: |-
+        c-data-list

package/src/lib/_imports/components/c-data-list/table/table--multi-row.hbs

@@ -0,0 +1,33 @@
+<dl>
+  <dt>Multi-Row Data List Items</dt>
+  <dd>
+    <table class="{{ class }}">
+      <tbody>
+        <tr>
+          <th class="c-data-list__key">Segmented</th>
+          <td class="c-data-list__value">No</td>
+        </tr>
+        <tr>
+          <th class="c-data-list__key">Voxel length (x, y, z)</th>
+          <td class="c-data-list__value">1.66, 1.66, 1.66 μm</td>
+        </tr>
+        <tr class="c-data-list__row--start-final">
+          <th class="c-data-list__key">Analysis of this Data</th>
+          <td class="c-data-list__value">Bentheimer Cycle 1 Filtered</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td class="c-data-list__value">Bentheimer Pore Cycle 1</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td class="c-data-list__value">Bentheimer Segmented Pores</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td class="c-data-list__value">Bentheimer Cycle 1 scCO2 Binary</td>
+        </tr>
+      </tbody>
+    </table>
+  </dd>
+</dl>

package/src/lib/_imports/components/c-data-list.css

@@ -299,3 +299,19 @@ table:--data-list--is-horz tr { align-items: baseline; }
 /* NOTE: This assumes key and value are inline display, not flex items */
 table:--data-list--is-vert :--table-key,
 table:--data-list--is-vert :--table-value { vertical-align: baseline; }
+
+
+
+
+/* Multi-Row Items */
+/* FAQ: For data list items that span multiple rows (start-final pattern) */
+
+/* To use one background color for all final rows */
+tr.c-data-list__row--start-final:nth-child(odd) :is(th, td),
+tr.c-data-list__row--start-final:nth-child(odd) ~ tr :is(th, td) {
+  background: var(--global-color-background--app);
+}
+tr.c-data-list__row--start-final:nth-child(even) :is(th, td),
+tr.c-data-list__row--start-final:nth-child(even) ~ tr :is(th, td) {
+  background: var(--global-color-primary--x-light);
+}

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

@@ -31,6 +31,7 @@
 
 /* COMPONENTS */
 @import url("./components/bootstrap.container.css");
+@import url("./components/bootstrap.dropdown.css");
 @import url("./components/bootstrap.figure.css");
 @import url("./components/bootstrap.modal.css");
 @import url("./components/bootstrap.nav-tabs.css");
@@ -52,5 +53,6 @@
 @import url("./trumps/s-breadcrumbs.css");
 @import url("./trumps/u-empty.css");
 @import url("./trumps/s-irregular-links.css");
+@import url("./trumps/u-highlight.css");
 @import url("./trumps/u-mailto-text-replace.css");
-@import url("./trumps/u-highlight.css")
+@import url("./trumps/u-summary.css");

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

@@ -19,7 +19,7 @@
 /* (none) */
 
 /* COMPONENTS */
-/* (none) */
+@import url("./components/bootstrap.dropdown.css");
 
 /* TRUMPS */
 /* FAQ: Because of third-party code and a rush to style the Frontera header

package/src/lib/_imports/elements/demo.css

@@ -14,25 +14,25 @@ body {
 
 /* Organize Content */
 
-main > dl:not(.no-demo-styles) {
+main > dl {
 
-  &:is(dt, dd) {
+  & :is(dt, dd):not(.no-demo-styles > *) {
     font-family: var(--global-font-family--sans);
     color: #484848;
     line-height: normal;
   }
-  & dt {
+  & dt:not(.no-demo-styles > *) {
     font-size: 1.6rem;
     margin-bottom: 10px;
   }
-  & dt { font-weight: var(--bold); }
-  & dl dt { font-weight: var(--medium); }
-  & dl dl dt { font-weight: var(--regular); }
+  & dt:not(.no-demo-styles > *) { font-weight: var(--bold); }
+  & dl dt:not(.no-demo-styles > *) { font-weight: var(--medium); }
+  & dl dl dt:not(.no-demo-styles > *) { font-weight: var(--regular); }
 
-  & dt:not(:first-of-type) {
+  & dt:not(:first-of-type):not(.no-demo-styles > *) {
     margin-top: 20px;
   }
-  & dd {
+  & dd:not(.no-demo-styles > *) {
     margin-bottom: 10px;
     margin-left: 25px;
   }

package/src/lib/_imports/elements/dl/dl.hbs

@@ -1,6 +1,14 @@
 <dl {{#if class }}class="{{ class }}"{{/if}}>
   {{#each data.key-value-pairs}}
-    {{#if key}}<dt class="c-data-list__key">{{ key }}</dt>{{/if}}
-    {{#if value}}<dd class="c-data-list__value">{{ value }}</dd>{{/if}}
+    {{#if key}}
+    <dt {{#if key-class}}class="{{ key-class }}"{{/if}}>
+      {{ key }}
+    </dt>
+    {{/if}}
+    {{#if value}}
+    <dd {{#if value-class}}class="{{ value-class }}"{{/if}}>
+      {{ value }}
+    </dd>
+    {{/if}}
   {{/each}}
 </dl>

package/src/lib/_imports/elements/html-elements/html-elements.hbs

@@ -39,6 +39,26 @@
         <p>{{> @text-of-one-paragraph-with-tags }}</p>
       </dd>
 
+      <dt>Paragraph then List <small>(reduced spacing)</small></dt>
+      <dd>
+        <p>This paragraph is immediately followed by a list with reduced spacing:</p>
+        <ul>
+          <li>First item in the list</li>
+          <li>Second item in the list</li>
+          <li>Third item in the list</li>
+        </ul>
+        <p>Another paragraph followed by an ordered list:</p>
+        <ol>
+          <li>First ordered item</li>
+          <li>Second ordered item</li>
+        </ol>
+        <p>And a paragraph followed by a definition list:</p>
+        <dl class="no-demo-styles">
+          <dt>Term</dt>
+          <dd>Definition of the term</dd>
+        </dl>
+      </dd>
+
       <dt>Lists</dt>
       <dd>
         <dl>
@@ -79,5 +99,25 @@
       <dt>Blockquote</dt>
       <dd>{{> @blockquote }}</dd>
     </dl>
+
+    <dl>
+      <dt>Demarcating Edits</dt>
+      <dd>
+        <dl>
+          <dt>Inline Inserted Text</dt>
+          <dd>
+            <p>This paragraph contains <ins>some inserted text</ins> to demonstrate the styling.</p>
+          </dd>
+          <dt>Block Inserted Content</dt>
+          <dd>
+            <div class="ins-block">
+              <p>This is a block of inserted content that demonstrates the .ins-block class styling.</p>
+              <p>It can contain multiple paragraphs and other content.</p>
+              <p>The final paragraph should not have extra bottom margin.</p>
+            </div>
+          </dd>
+        </dl>
+      </dd>
+    </dl>
   </dd>
 </dl>

package/src/lib/_imports/elements/html-elements.cms.css

@@ -51,6 +51,9 @@ Styleguide Elements.TextContent
 & p {
   margin-bottom: 2rem; /* overwrite Bootstrap */
 }
+p + :is(ul, ol, dl) {
+    margin-top: -1rem;
+}
 
 /* Lists */
 
@@ -160,7 +163,32 @@ Reference:
 Styleguide Elements.DemarcatingEdits
 */
 
-/* … */
+/* To improve default underline style for inserted text */
+ins {
+    text-underline-position: under;
+    text-decoration-style: dotted;
+}
+
+/* To highlight blocks of inserted content */
+.ins-block {
+    /* To keep outline within a .container */
+    --offset: calc( var(--global-space--bootstrap-gap) * 0.375 );
+
+    border: 0.125em dotted currentcolor;
+    padding: var(--offset);
+
+    /* To keep outline within a .container */
+    margin-inline: calc( -1 * var(--offset));
+    /* To prevent outline from touching sibling content */
+    margin-block: 1em;
+
+    /* To create color that is between `x-light` and `xx-light` */
+    background: rgb( from var(--global-color-primary--x-light) r g b / 50% );
+}
+/* To remove likely extra space from final p */
+.ins-block > p:last-child {
+    margin-bottom: unset;
+}
 
 
 

package/src/lib/_imports/elements/table/config.yml

@@ -379,3 +379,5 @@ variants:
                   custom-1: 1 TB
                   custom-2: <span class="c-pill c-pill--is-success">932 GB</span>
                   time: 12/01/2019 11:04:19
+  - name: content-after
+    hidden: true

package/src/lib/_imports/elements/table/table--content-after.hbs

@@ -0,0 +1 @@
+<div>Content (not a paragraph) after a table.</div>

package/src/lib/_imports/elements/table/table--via-paragraphs.hbs

@@ -2,6 +2,8 @@
 
 {{> @s-paragraph-table class="s-paragraph-table" data=data }}
 
+{{> @table--content-after }}
+
 <br />
 <br />
 
@@ -20,3 +22,5 @@
   {{/each}}
   </tbody>
 </table>
+
+{{> @table--content-after }}

package/src/lib/_imports/elements/table/table.hbs

@@ -12,8 +12,16 @@
   <tbody>
   {{#each data.key-value-pairs}}
     <tr>
-      {{#if key}}<th class="c-data-list__key">{{ key }}</th>{{/if}}
-      {{#if value}}<td class="c-data-list__value">{{ value }}</td>{{/if}}
+      {{#if key}}
+      <th {{#if key-class}}class="{{ key-class }}"{{/if}}>
+        {{ key }}
+      </th>
+      {{/if}}
+      {{#if value}}
+      <td {{#if value-class}}class="{{ value-class }}"{{/if}}>
+        {{ value }}
+      </td>
+      {{/if}}
     </tr>
   {{/each}}
   {{#each data.rows}}
@@ -51,10 +59,12 @@
       {{/if}}
       {{#if table}}
       <td class="has-table">
-        {{> @table data=table }}
+        {{> @table data=table has-content-after=false }}
       </td>
       {{/if}}
     </tr>
   {{/each}}
   </tbody>
 </table>
+
+{{#unless (eq has-content-after false)}}{{> @table--content-after }}{{/unless}}

package/src/lib/_imports/elements/table.cms.css

@@ -7,6 +7,8 @@ table,
   --cell-line-height: 1.4; /* to match body */
 
   border-bottom: var(--global-border-width--thick) solid var(--global-color-primary--dark);
+
+  margin-bottom: 2rem; /* overwrites Bootstrap */
 }
 
 /* TABLE WITH NO <thead> */

package/src/lib/_imports/elements/table.docs.css

@@ -3,4 +3,6 @@
 table,
 :--s-paragraph-table {
   --font-size: var(--global-font-size--medium);
+
+  margin-bottom: 2rem; /* overwrites Bootstrap */
 }

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

@@ -0,0 +1,79 @@
+@import url("./color--cms.selectors.css");
+
+@import url("../objects/o-section.selectors.css");
+@import url("../components/c-card.selectors.css");
+
+/* To auto-define lighter/darker colors (accent, secondary, tertiary) */
+@supports (color: lab(from white l a b)) {
+    :root {
+        --tc-near-white-l: 0.95;
+        --tc-near-black-l: 0.1;
+    }
+    :root, /* cuz websites default to "light" */
+    :--light-context-safe {
+        --global-color-accent--xxx-light: oklab(from var(--tc-color-1) var(--tc-near-white-l) a b); /* DECPRECATED */
+        --global-color-accent--xx-light: oklab(from var(--tc-color-1) calc(l + (var(--tc-near-white-l) - l) * 3/4) a b);
+        --global-color-accent--x-light: oklab(from var(--tc-color-1) calc(l + (var(--tc-near-white-l) - l) * 2/4) a b);
+        --global-color-accent--light: oklab(from var(--tc-color-1) calc(l + (var(--tc-near-white-l) - l) * 1/4) a b);
+        --global-color-accent--normal: var(--tc-color-1);
+        --global-color-accent--dark: oklab(from var(--tc-color-1) calc(l - (l - var(--tc-near-black-l)) * 1/4) a b);
+        --global-color-accent--x-dark: oklab(from var(--tc-color-1) calc(l - (l - var(--tc-near-black-l)) * 2/4) a b);
+        --global-color-accent--xx-dark: oklab(from var(--tc-color-1) calc(l - (l - var(--tc-near-black-l)) * 3/4) a b);
+        --global-color-accent--xxx-dark: oklab(from var(--tc-color-1) var(--tc-near-black-l) a b);
+
+        --global-color-secondary--xx-light: oklab(from var(--tc-color-2) var(--tc-near-white-l) a b);
+        --global-color-secondary--x-light: oklab(from var(--tc-color-2) calc(l + (var(--tc-near-white-l) - l) * 2/3) a b);
+        --global-color-secondary--light: oklab(from var(--tc-color-2) calc(l + (var(--tc-near-white-l) - l) * 1/3) a b);
+        --global-color-secondary--normal: var(--tc-color-2);
+        --global-color-secondary--dark: oklab(from var(--tc-color-2) calc(l - (l - var(--tc-near-black-l)) * 1/3) a b);
+        --global-color-secondary--x-dark: oklab(from var(--tc-color-2) calc(l - (l - var(--tc-near-black-l)) * 2/3) a b);
+        --global-color-secondary--xx-dark: oklab(from var(--tc-color-2) var(--tc-near-black-l) a b);
+
+        --global-color-tertiary--xx-light: oklab(from var(--tc-color-3) var(--tc-near-white-l) a b);
+        --global-color-tertiary--x-light: oklab(from var(--tc-color-3) calc(l + (var(--tc-near-white-l) - l) * 2/3) a b);
+        --global-color-tertiary--light: oklab(from var(--tc-color-3) calc(l + (var(--tc-near-white-l) - l) * 1/3) a b);
+        --global-color-tertiary--normal: var(--tc-color-3);
+        --global-color-tertiary--dark: oklab(from var(--tc-color-3) calc(l - (l - var(--tc-near-black-l)) * 1/3) a b);
+        --global-color-tertiary--x-dark: oklab(from var(--tc-color-3) calc(l - (l - var(--tc-near-black-l)) * 2/3) a b);
+        --global-color-tertiary--xx-dark: oklab(from var(--tc-color-3) var(--tc-near-black-l) a b);
+
+        /* DEPRECATED */
+        /* To redefine aliases */
+        /* FAQ: Aliases do not auto-update when source vars are overridden */
+        --global-color-accent--secondary: var(--global-color-secondary--normal);
+        --global-color-accent--tertiary: var(--global-color-tertiary--normal);
+    }
+    :--dark-context-safe {
+        --global-color-accent--xxx-light: white; /* DECPRECATED */
+        --global-color-accent--xx-light: oklab(from var(--tc-color-1) var(--tc-near-white-l) a b);
+        --global-color-accent--x-light: oklab(from var(--tc-color-1) calc(l + (var(--tc-near-white-l) - l) * 3/4) a b);
+        --global-color-accent--light: oklab(from var(--tc-color-1) calc(l + (var(--tc-near-white-l) - l) * 2/4) a b);
+        --global-color-accent--normal: oklab(from var(--tc-color-1) calc(l + (var(--tc-near-white-l) - l) * 1/4) a b);
+        --global-color-accent--dark: var(--tc-color-1);
+        --global-color-accent--x-dark: oklab(from var(--tc-color-1) calc(l - (l - var(--tc-near-black-l)) * 1/4) a b);
+        --global-color-accent--xx-dark: oklab(from var(--tc-color-1) calc(l - (l - var(--tc-near-black-l)) * 2/4) a b);
+        --global-color-accent--xxx-dark: oklab(from var(--tc-color-1) calc(l - (l - var(--tc-near-black-l)) * 3/4) a b);
+
+        --global-color-secondary--xx-light: white;
+        --global-color-secondary--x-light: oklab(from var(--tc-color-2) var(--tc-near-white-l) a b);
+        --global-color-secondary--light: oklab(from var(--tc-color-2) calc(l + (var(--tc-near-white-l) - l) * 2/3) a b);
+        --global-color-secondary--normal: oklab(from var(--tc-color-2) calc(l + (var(--tc-near-white-l) - l) * 1/3) a b);
+        --global-color-secondary--dark: var(--tc-color-2);
+        --global-color-secondary--x-dark: oklab(from var(--tc-color-2) calc(l - (l - var(--tc-near-black-l)) * 1/3) a b);
+        --global-color-secondary--xx-dark: oklab(from var(--tc-color-2) calc(l - (l - var(--tc-near-black-l)) * 2/3) a b);
+
+        --global-color-tertiary--xx-light: white;
+        --global-color-tertiary--x-light: oklab(from var(--tc-color-3) var(--tc-near-white-l) a b);
+        --global-color-tertiary--light: oklab(from var(--tc-color-3) calc(l + (var(--tc-near-white-l) - l) * 2/3) a b);
+        --global-color-tertiary--normal: oklab(from var(--tc-color-3) calc(l + (var(--tc-near-white-l) - l) * 1/3) a b);
+        --global-color-tertiary--dark: var(--tc-color-3);
+        --global-color-tertiary--x-dark: oklab(from var(--tc-color-3) calc(l - (l - var(--tc-near-black-l)) * 1/3) a b);
+        --global-color-tertiary--xx-dark: oklab(from var(--tc-color-3) calc(l - (l - var(--tc-near-black-l)) * 2/3) a b);
+
+        /* DEPRECATED */
+        /* To redefine aliases */
+        /* FAQ: Aliases do not auto-update when source vars are overridden */
+        --global-color-accent--secondary: var(--global-color-secondary--normal);
+        --global-color-accent--tertiary: var(--global-color-tertiary--normal);
+    }
+}

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

@@ -1,23 +1,5 @@
+@import url("./color--cms.selectors.css");
+
 @import url("../settings/color.accent.css");
 @import url("../objects/o-section.selectors.css");
 @import url("../components/c-card.selectors.css");
-
-/* 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--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;