@tacc/core-styles 2.54.1 → 2.55.1

package/src/lib/_imports/objects/o-section/o-section.hbs

@@ -1,7 +1,8 @@
 
 <section class="o-section o-section--{{this._self.name}}">
     <h2>Section</h2>
-    {{render '@o-section--usage'}}
+    <h3>Sub-heading</h3>
+    <p>{{render '@o-section--usage'}}</p>
 </section>
 
 <hr />
@@ -24,13 +25,18 @@
     <p>{{> @text-of-one-paragraph-with-actions }}</p>
     {{> @button-samples }}
 </section>
+<section class="o-section o-section--style-accent">
+    <h2>Accent Section</h2>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+    {{> @button-samples }}
+</section>
 <section class="o-section o-section--style-muted">
     <h2>Muted Section</h2>
     <p>{{> @text-of-one-paragraph-with-actions }}</p>
     {{> @button-samples }}
 </section>
 <section class="o-section o-section--{{this._self.name}}">
-    <h2>Section (after Muted Section)</h2>
+    <h2>Section (after Accent + Muted Sections)</h2>
     <p>{{> @text-of-one-paragraph-with-actions }}</p>
     {{> @button-samples }}
 </section>
@@ -55,11 +61,16 @@
         <p>{{> @text-of-one-paragraph-with-actions }}</p>
         {{> @button-samples }}
     </div>
+    <div class="o-section o-section--style-accent">
+        <h3>(Nested) Accent Section</h3>
+        <p>{{> @text-of-one-paragraph-with-actions }}</p>
+        {{> @button-samples }}
+    </div>
 </section>
 
 <hr />
 
 <section class="o-section o-section--{{this._self.name}}">
     <h2>Section (at Bottom of Page)</h2>
-    <p>At the bottom of a CMS page: a <strong>light</strong> Section will stand out above the Footer, a <strong>muted</strong> Section will stand out above the Footer, a <strong>dark</strong> Section will visually merge with the Footer.</p>
+    <p>At the bottom of a CMS page: a <strong>light</strong> Section will stand out above the Footer, an <strong>accent</strong> Section will stand out above the Footer, a <strong>muted</strong> Section will stand out above the Footer, and a <strong>dark</strong> Section will visually merge with the Footer.</p>
 </section>

package/src/lib/_imports/objects/o-section/readme.md

@@ -9,6 +9,7 @@ Add space between major blocks of content. {{render '@o-section--usage'}} A [`<s
 | `.o-section`              | `.section`       | give extra space to content
 | `.o-section--style-...`   | `.section--...`   | add full-width background
 | `.o-section--style-light` | `.section--light` | __gently__ highlight content
+| `.o-section--style-accent` | `.section--accent` | __brightly__ highlight content
 | `.o-section--style-muted` | `.section--muted` | __clearly__ highlight content
 | `.o-section--style-dark`  | `.section--dark`  | __strongly__ highlight content
 

package/src/lib/_imports/objects/o-section.css

@@ -75,15 +75,28 @@
   --color--bkgd: var(--global-color-primary--xx-light);
   --color--line: var(--global-color-primary--normal);
 }
+:--o-section--accent {
+  --color--text: var(--global-color-primary--xx-dark);
+  --color--bkgd: var(--global-color-accent--xxx-light);
+  --color--line: var(--global-color-accent--light);
+
+  & h2 {
+    color: currentColor;
+  }
+}
 :--o-section--muted {
   --color--text: var(--global-color-primary--xx-dark);
   --color--bkgd: var(--global-color-primary--x-light);
   --color--line: var(--global-color-primary--dark);
 }
 :--o-section--dark {
-  --color--text: var(--global-color-primary--xx-light);
+  --color--text: var(--global-color-primary--x-light);
   --color--bkgd: var(--global-color-primary--xx-dark);
-  --color--line: var(--global-color-primary--xx-light);
+  --color--line: var(--global-color-primary--normal);
+
+  & h2 {
+    color: var(--global-color-secondary--light);
+  }
 }
 
 /* Modifers: Style: Text & Background */
@@ -101,6 +114,16 @@
   box-shadow: none;
 }
 
+/* Modifers: Style: Borders */
+
+/* To add border between same-style sections */
+:--o-section--light + :--o-section--light,
+:--o-section--accent + :--o-section--accent,
+:--o-section--muted + :--o-section--muted,
+:--o-section--dark + :--o-section--dark {
+  border-top: 1px solid var(--color--line);
+}
+
 
 
 /* Modifers: Layout */

package/src/lib/_imports/objects/o-section.selectors.css

@@ -7,11 +7,15 @@
     .section;
 @custom-selector :--o-section--style
     :--o-section--light,
+    :--o-section--accent,
     :--o-section--muted,
     :--o-section--dark;
 @custom-selector :--o-section--light
     .o-section--style-light,
     .section--light;
+@custom-selector :--o-section--accent
+    .o-section--style-accent,
+    .section--accent;
 @custom-selector :--o-section--muted
     .o-section--style-muted,
     .section--muted;

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

@@ -8,6 +8,9 @@
     :root {
         --tc-near-white-l: 0.95;
         --tc-near-black-l: 0.1;
+
+        /* IMPORTANT: color.css not distinguish context, so here also not */
+        --global-color-accent--light-alt: oklab(from var(--tc-color-1) calc(l + (var(--tc-near-white-l) - l) * 3/8) a b);
     }
     :root, /* cuz websites default to "light" */
     :--light-context-safe {

package/src/lib/_imports/tools/x-figure.css

@@ -10,7 +10,7 @@
     --buffer-above: 1.0rem;
     --buffer-below: 1.0rem;
 
-    opacity: 0.6;
+    opacity: 0.75;
 
     line-height: 1.7;
     font-style: italic;

package/src/lib/_imports/trumps/s-footer.css

@@ -7,10 +7,17 @@
   padding-block: 15px;
 
   color: var(--global-color-primary--x-light);
-  background-color: var(--header-bkgd-color);
+  background-color: var(--global-color-primary--xx-dark);
 
   font-size: var(--global-font-size--small);
   text-align: center;
+
+  & h2 {
+    color: currentColor;
+  }
+  & a:not(:--c-button) {
+    color: var(--global-color-accent--light-alt);
+  }
 }
 .s-footer--thick {
   padding-inline: var(--pad-horz--thick);
@@ -19,14 +26,6 @@
   padding-inline: var(--pad-horz--thin);
 }
 
-.s-footer a:not(:--c-button) {
-    color: var(--global-color-accent--light-alt);
-}
-
-.s-footer :--heading {
-  color: var(--global-color-primary--xx-light);
-}
-
 /* Let paragraphs behave normally */
 .s-footer > p {
   margin: revert;