@tacc/core-styles 2.9.0 → 2.10.0

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

@@ -0,0 +1,287 @@
+<div class="x-grid--layout-cols-equal-min-width-max-count">
+  <dl>
+    <dt>Neutral (f.k.a. Primary)
+    </dt>
+    <dd>
+      <dl>
+        <dt>Tints &amp; Shades</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-primary--xxx-light"
+                not-available="true"}}
+            {{> @color--swatch name="--global-color-primary--xx-light"}}
+            {{> @color--swatch name="--global-color-primary--x-light"}}
+            {{> @color--swatch name="--global-color-primary--light"}}
+            {{> @color--swatch name="--global-color-primary--normal"}}
+            {{> @color--swatch name="--global-color-primary--dark"}}
+            {{> @color--swatch name="--global-color-primary--x-dark"}}
+            {{> @color--swatch name="--global-color-primary--xx-dark"}}
+            {{> @color--swatch name="--global-color-primary--xxx-dark"}}
+          </div>
+        </dd>
+        <dt>Notes</dt>
+        <dd>
+          <div class="demo-notes">
+            {{> @message
+              tag='p'
+              scope='section'
+              type='info'
+              content='The name <code>primary</code> will become <code>neutral</code> in a future version.'
+            }}
+          </div>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+  <dl>
+    <dt>Accent</dt>
+    <dd>
+      <dl>
+        <dt>Tints &amp; Shades</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-accent--xxx-light"}}
+            {{> @color--swatch name="--global-color-accent--xx-light"}}
+            {{> @color--swatch name="--global-color-accent--x-light"}}
+            {{> @color--swatch name="--global-color-accent--light"}}
+            {{> @color--swatch name="--global-color-accent--normal"}}
+            {{> @color--swatch name="--global-color-accent--dark"}}
+            {{> @color--swatch name="--global-color-accent--x-dark"}}
+            {{> @color--swatch name="--global-color-accent--xx-dark"}}
+            {{> @color--swatch name="--global-color-accent--xxx-dark"}}
+          </div>
+        </dd>
+        <dt>Alternatives</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-accent--secondary"}}
+            {{> @color--swatch name="--global-color-accent--tertiary"}}
+          </div>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+  <dl>
+    <dt>Secondary</dt>
+    <dd>
+      <dl>
+        <dt>Tints &amp; Shades</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-secondary--xxx-light"
+                not-available="true"}}
+            {{> @color--swatch name="--global-color-secondary--xx-light"}}
+            {{> @color--swatch name="--global-color-secondary--x-light"}}
+            {{> @color--swatch name="--global-color-secondary--light" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-secondary--normal" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-secondary--dark"}}
+            {{> @color--swatch name="--global-color-secondary--x-dark" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-secondary--xx-dark"
+                not-available="true"}}
+            {{> @color--swatch name="--global-color-secondary--xxx-dark"
+                not-available="true"}}
+        </dd>
+        <dt>Alias</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-accent--secondary"}}
+          </div>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+  <dl>
+    <dt>Tertiary</dt>
+    <dd>
+      <dl>
+        <dt>Tints &amp; Shades</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-tertiary--xxx-light"
+                not-available="true"}}
+            {{> @color--swatch name="--global-color-tertiary--xx-light" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-tertiary--x-light"}}
+            {{> @color--swatch name="--global-color-tertiary--light"}}
+            {{> @color--swatch name="--global-color-tertiary--normal" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-tertiary--dark"}}
+            {{> @color--swatch name="--global-color-tertiary--x-dark" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-tertiary--xx-dark"
+                not-available="true"}}
+            {{> @color--swatch name="--global-color-tertiary--xxx-dark"
+                not-available="true"}}
+          </div>
+        </dd>
+        <dt>Alias</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-accent--tertiary"}}
+          </div>
+        </dd>
+      </dl>
+  </dl>
+</div>
+<div class="x-grid--layout-cols-equal-min-width-max-count">
+  <dl>
+    <dt>Info</dt>
+    <dd>
+      <dl>
+        <dt>Tints &amp; Shades</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-info--x-light"}}
+            {{> @color--swatch name="--global-color-info--light"}}
+            {{> @color--swatch name="--global-color-info--normal"}}
+            {{> @color--swatch name="--global-color-info--dark"}}
+            {{> @color--swatch name="--global-color-info--x-dark"}}
+          </div>
+        </dd>
+        <dt>Alternates</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-info--weak"
+                not-opaque="true"}}
+          </div>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+  <dl>
+    <dt>Danger</dt>
+    <dd>
+      <dl>
+        <dt>Tints &amp; Shades</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-danger--x-light" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-danger--light"}}
+            {{> @color--swatch name="--global-color-danger--normal" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-danger--dark"}}
+            {{> @color--swatch name="--global-color-danger--x-dark"}}
+          </div>
+        </dd>
+        <dt>Alternates</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-danger--weak"
+                not-opaque="true"}}
+          </div>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+  <dl>
+    <dt>Warning</dt>
+    <dd>
+      <dl>
+        <dt>Tints &amp; Shades</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-warning--x-light" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-warning--light"}}
+            {{> @color--swatch name="--global-color-warning--normal" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-warning--dark"}}
+            {{> @color--swatch name="--global-color-warning--x-dark"}}
+          </div>
+        </dd>
+        <dt>Alternates</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-warning--weak"
+                not-opaque="true"}}
+          </div>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+  <dl>
+    <dt>Success</dt>
+    <dd>
+      <dl>
+        <dt>Tints &amp; Shades</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-success--x-light" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-success--light"}}
+            {{> @color--swatch name="--global-color-success--normal" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-success--dark"}}
+            {{> @color--swatch name="--global-color-success--x-dark"}}
+          </div>
+        </dd>
+        <dt>Alternates</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-success--weak"
+                not-opaque="true"}}
+          </div>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+  <dl>
+    <dt>Extra</dt>
+    <dd>
+      <dl>
+        <dt>Tints &amp; Shades</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-extra--x-light" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-extra--light"}}
+            {{> @color--swatch name="--global-color-extra--normal" 
+                is-from-desinger="true"}}
+            {{> @color--swatch name="--global-color-extra--dark"}}
+            {{> @color--swatch name="--global-color-extra--x-dark"}}
+          </div>
+        </dd>
+        <dt>Alternates</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-extra--weak"
+                not-opaque="true"}}
+          </div>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+</div>
+<div class="x-grid--layout-cols-equal-min-width-max-count">
+  <dl>
+    <dt>Generic</dt>
+    <dd>
+      <dl>
+        <dt>Background</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-background--app"}}
+          </div>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+  <dl>
+    <dt>Deprecated</dt>
+    <dd>
+      <dl>
+        <dt>Link on Light/Dark</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-link-on-light--normal"}}
+            {{> @color--swatch name="--global-color-link-on-dark--normal"}}
+          </div>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+</div>

package/src/lib/_imports/settings/color/config.yml

@@ -0,0 +1,19 @@
+variants:
+  - name: default
+  - name: cms
+    status: ready
+    label: (CMS) Color
+    context:
+      shouldLoadCMS: true
+      shouldLoadBootstrap: true
+  - name: docs
+    status: ready
+    label: (Docs) Color
+    context:
+      shouldLoadDocs: true
+  - name: portal
+    status: wip
+    label: (Portal) Color
+    context:
+      shouldLoadPortal: true
+      shouldLoadBootstrap: true

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

@@ -0,0 +1,88 @@
+/* CORE */
+
+body > main {
+    width: unset;
+    margin-inline: 0.5em;
+}
+
+dt:not(dd dt) {
+    font-weight: var(--bold);
+}
+dd {
+    margin-inline: 0; /* (Default, Docs) overwrite browser */
+}
+dl {
+    padding-left: 0; /* (CMS, Docs) overwrite core-styles... */
+}
+
+
+
+
+
+/* PATTERN */
+
+
+
+/* Containers */
+
+[class*="x-grid"] {
+    --gap: 0.5em;
+}
+
+.demo-notes,
+.demo-palette {
+    margin-block: 1em;
+}
+
+.demo-palette {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+}
+
+
+
+/* Items */
+
+.demo-palette-item {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5em;
+}
+figure.demo-palette-item {
+    margin-block: unset;
+}
+
+.demo-palette-item.not-available {
+    opacity: 0.5;
+}
+
+
+
+/* Elements */
+
+.demo-palette-item span {
+    border: var(--global-border-width--normal) solid black;
+}
+.demo-palette-item.not-available span {
+    border-color: transparent;
+}
+
+.demo-palette-item span {
+    min-width: 3em;
+    height: 3em;
+}
+.demo-palette-item.not-opaque span {
+    display: grid;
+}
+.demo-palette-item.not-opaque span::before {
+    content: '';
+
+    background-image: linear-gradient(45deg, #80808040 25%, transparent 25%), linear-gradient(-45deg, #80808040 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #80808040 75%), linear-gradient(-45deg, transparent 75%, #80808040 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+.demo-palette-item.not-available code {
+    text-decoration: line-through;
+}

package/src/lib/_imports/settings/color/readme.md

@@ -0,0 +1,8 @@
+[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables) for colors.
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

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

@@ -0,0 +1,2 @@
+/* Support the default accent color in all the scopes */
+@import url("./color--demo.css");

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

@@ -0,0 +1,28 @@
+@import url("../objects/o-section.selectors.css");
+@import url("../components/c-card.selectors.css");
+
+
+
+/* Load accent colors without scope */
+
+@import url("../settings/color.accent--blue.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;
+
+@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,11 +1,7 @@
-:root {
-  --global-color-accent--xxx-light: #faf4ff;
-  --global-color-accent--xx-light: #f1ebfd;
-  --global-color-accent--x-light: #e3d7fd;
-  --global-color-accent--light: #a387ed;
-  --global-color-accent--normal: #784fe8;
-  --global-color-accent--dark: #6039cc;
-  --global-color-accent--x-dark: #3d189b;
-  --global-color-accent--xx-dark: #281066;
-  --global-color-accent--xxx-dark: #1E0C4C;
-}
+/* Load accent colors without scope */
+@import url("../settings/color.accent--purple.css");
+
+/* Set scope for accent colors */
+/* Override accent colors from base */
+@custom-selector :--light-context-safe
+  :root;

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

@@ -1,21 +1,14 @@
+/* Load accent colors without scope */
+@import url("../settings/color.accent--purple.css");
+
+/* Set scope for accent colors */
+/* Override accent colors from base */
+@custom-selector :--light-context-safe
+  :root;
+
+/* Override other colors from base */
+/* FAQ: Updating portal colors was delayed (to reduce complexity of TUP redesign) */
 :root {
-  --global-color-info--x-light: var(--global-color-primary--x-light);
-  --global-color-info--light: var(--global-color-primary--light);
-  --global-color-info--normal: var(--global-color-primary--normal);
-  --global-color-info--dark: var(--global-color-primary--x-dark);
-  --global-color-info--x-dark: var(--global-color-primary--xx-dark);
-
-  --global-color-accent--xxx-light: #faf4ff;
-  --global-color-accent--xx-light: #f1ebfd;
-  --global-color-accent--x-light: #e3d7fd;
-  --global-color-accent--light: #a387ed;
-  --global-color-accent--normal: #784fe8;
-  --global-color-accent--dark: #6039cc;
-  --global-color-accent--x-dark: #3d189b;
-  --global-color-accent--xx-dark: #281066;
-  --global-color-accent--xxx-dark: #1E0C4C;
-
-  /* DEPRECATED */
   /* TODO: Update clients to use --global-color-accent--xx-light instead */
   --global-color-accent--alt: #d2cce7;
   /* TODO: Update clients to use --global-color-accent--x-light instead */

package/src/lib/_imports/{generics/color/_blue.css → settings/color.accent--blue.css}

@@ -1,22 +1,3 @@
-@import url("../../objects/o-section.selectors.css");
-@import url("../../components/c-card.selectors.css");
-
-@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;
-
-@custom-selector :--light-context-safe
-  :where(:--dark-context :--light-context);
-@custom-selector :--dark-context-safe
-  :where(:--dark-context:not(:--light-context *));
-
 :--dark-context-safe {
   --global-color-accent--xxx-light: #f3f7fe;
   --global-color-accent--xx-light: #dfeafe;

package/src/lib/_imports/{generics/color/_purple.css → settings/color.accent--purple.css}

@@ -1,22 +1,3 @@
-@import url("../../objects/o-section.selectors.css");
-@import url("../../components/c-card.selectors.css");
-
-@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;
-
-@custom-selector :--light-context-safe
-  :where(:--dark-context :--light-context);
-@custom-selector :--dark-context-safe
-  :where(:--dark-context:not(:--light-context *));
-
 :--dark-context-safe {
   --global-color-accent--xxx-light: #faf4ff;
   --global-color-accent--xx-light: #f1ebfd;

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

@@ -80,38 +80,43 @@
   --global-color-info--x-light: var(--global-color-primary--x-light);
   --global-color-info--light: var(--global-color-primary--light);
   --global-color-info--normal: var(--global-color-primary--dark);
+    --global-color-info--normal-rgb: var(--global-color-primary--dark-rgb);
   --global-color-info--dark: var(--global-color-primary--x-dark);
   --global-color-info--x-dark: var(--global-color-primary--xx-dark);
 
   --global-color-danger--x-light: #fce4db; /* from designer */
   --global-color-danger--light: #fcaf91;
   --global-color-danger--normal: #ed4c11; /* from designer */
+    --global-color-danger--normal-rgb: 237, 76, 17;
   --global-color-danger--dark: #c23a03;
   --global-color-danger--x-dark: #932b06;
 
   --global-color-warning--x-light: #FDF0D3; /* from designer */
   --global-color-warning--light: #fed880;
   --global-color-warning--normal: #F2B327; /* from designer */
+    --global-color-warning--normal-rgb: 242, 179, 39;
   --global-color-warning--dark: #cd971c;
   --global-color-warning--x-dark: #996f0a;
 
   --global-color-success--x-light: #baf8dc; /* from designer */
   --global-color-success--light: #93f6cd;
   --global-color-success--normal: #10f7a9; /* from designer */
+    --global-color-success--normal-rgb: 16, 247, 169;
   --global-color-success--dark: #3dce92;
   --global-color-success--x-dark: #26885f;
 
   --global-color-extra--x-light: #f0f6ff; /* from designer */
   --global-color-extra--light: #b4d0f9;
   --global-color-extra--normal: #3f85f4; /* from designer */
+    --global-color-extra--normal-rgb: 63, 133, 244;
   --global-color-extra--dark: #255bb1;
   --global-color-extra--x-dark: #174a99;
 
-  --global-color-info--weak: rgba( var(--global-color-info--normal), 0.125 );
-  --global-color-danger--weak: rgba( var(--global-color-danger--normal), 0.125 );
-  --global-color-warning--weak: rgba( var(--global-color-warning--normal), 0.125 );
-  --global-color-success--weak: rgba( var(--global-color-success--normal), 0.125 );
-  --global-color-extra--weak: rgba( var(--global-color-extra--normal), 0.125 );
+  --global-color-info--weak: rgba( var(--global-color-info--normal-rgb), 0.125 );
+  --global-color-danger--weak: rgba( var(--global-color-danger--normal-rgb), 0.125 );
+  --global-color-warning--weak: rgba( var(--global-color-warning--normal-rgb), 0.125 );
+  --global-color-success--weak: rgba( var(--global-color-success--normal-rgb), 0.125 );
+  --global-color-extra--weak: rgba( var(--global-color-extra--normal-rgb), 0.125 );
 
 
   /* Generic */

package/dist/generics/color--cms.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.9.0+ | MIT | github.com/TACC/Core-Styles */:where(.c-recognition--style-dark:not(.c-recognition--style-light *,.o-section--style-muted *,.section--muted *,.o-section--style-light *,.section--dark *,.c-card--standard *,.card--standard *,.c-card--standard-1 *,.c-card--standard-2 *,.c-card--standard-3 *,.c-card--plain *,.card--plain *,[class*=card--plain-] *),.o-section--style-dark:not(.c-recognition--style-light *,.o-section--style-muted *,.section--muted *,.o-section--style-light *,.section--dark *,.c-card--standard *,.card--standard *,.c-card--standard-1 *,.c-card--standard-2 *,.c-card--standard-3 *,.c-card--plain *,.card--plain *,[class*=card--plain-] *),.section--dark:not(.c-recognition--style-light *,.o-section--style-muted *,.section--muted *,.o-section--style-light *,.section--dark *,.c-card--standard *,.card--standard *,.c-card--standard-1 *,.c-card--standard-2 *,.c-card--standard-3 *,.c-card--plain *,.card--plain *,[class*=card--plain-] *)){--global-color-accent--xxx-light:#f3f7fe;--global-color-accent--xx-light:#dfeafe;--global-color-accent--x-light:#caddfe;--global-color-accent--light:#aac7ff;--global-color-accent--normal:#86aeff;--global-color-accent--dark:#039;--global-color-accent--x-dark:#026;--global-color-accent--xx-dark:#013;--global-color-accent--xxx-dark:#021230}:where(.c-recognition--style-dark .c-recognition--style-light,.c-recognition--style-dark .o-section--style-muted,.c-recognition--style-dark .section--muted,.c-recognition--style-dark .o-section--style-light,.c-recognition--style-dark .section--dark,.c-recognition--style-dark .c-card--standard,.c-recognition--style-dark .card--standard,.c-recognition--style-dark .c-card--standard-1,.c-recognition--style-dark .c-card--standard-2,.c-recognition--style-dark .c-card--standard-3,.c-recognition--style-dark .c-card--plain,.c-recognition--style-dark .card--plain,.c-recognition--style-dark [class*=card--plain-],.o-section--style-dark .c-recognition--style-light,.o-section--style-dark .o-section--style-muted,.o-section--style-dark .section--muted,.o-section--style-dark .o-section--style-light,.o-section--style-dark .section--dark,.o-section--style-dark .c-card--standard,.o-section--style-dark .card--standard,.o-section--style-dark .c-card--standard-1,.o-section--style-dark .c-card--standard-2,.o-section--style-dark .c-card--standard-3,.o-section--style-dark .c-card--plain,.o-section--style-dark .card--plain,.o-section--style-dark [class*=card--plain-],.section--dark .c-recognition--style-light,.section--dark .o-section--style-muted,.section--dark .section--muted,.section--dark .o-section--style-light,.section--dark .section--dark,.section--dark .c-card--standard,.section--dark .card--standard,.section--dark .c-card--standard-1,.section--dark .c-card--standard-2,.section--dark .c-card--standard-3,.section--dark .c-card--plain,.section--dark .card--plain,.section--dark [class*=card--plain-]){--global-color-accent--xxx-light:#dfeafe;--global-color-accent--xx-light:#caddfe;--global-color-accent--x-light:#aac7ff;--global-color-accent--light:#86aeff;--global-color-accent--normal:#039;--global-color-accent--dark:#026;--global-color-accent--x-dark:#013;--global-color-accent--xx-dark:#021230;--global-color-accent--xxx-dark:#000a22}

package/dist/generics/color--demo.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 2.9.0+ | MIT | github.com/TACC/Core-Styles */:where(.c-recognition--style-dark:not(.c-recognition--style-light *,.o-section--style-muted *,.section--muted *,.o-section--style-light *,.section--dark *,.c-card--standard *,.card--standard *,.c-card--standard-1 *,.c-card--standard-2 *,.c-card--standard-3 *,.c-card--plain *,.card--plain *,[class*=card--plain-] *),.o-section--style-dark:not(.c-recognition--style-light *,.o-section--style-muted *,.section--muted *,.o-section--style-light *,.section--dark *,.c-card--standard *,.card--standard *,.c-card--standard-1 *,.c-card--standard-2 *,.c-card--standard-3 *,.c-card--plain *,.card--plain *,[class*=card--plain-] *),.section--dark:not(.c-recognition--style-light *,.o-section--style-muted *,.section--muted *,.o-section--style-light *,.section--dark *,.c-card--standard *,.card--standard *,.c-card--standard-1 *,.c-card--standard-2 *,.c-card--standard-3 *,.c-card--plain *,.card--plain *,[class*=card--plain-] *)){--global-color-accent--xxx-light:#f3f7fe;--global-color-accent--xx-light:#dfeafe;--global-color-accent--x-light:#caddfe;--global-color-accent--light:#aac7ff;--global-color-accent--normal:#86aeff;--global-color-accent--dark:#039;--global-color-accent--x-dark:#026;--global-color-accent--xx-dark:#013;--global-color-accent--xxx-dark:#021230}:where(.c-recognition--style-dark .c-recognition--style-light,.c-recognition--style-dark .o-section--style-muted,.c-recognition--style-dark .section--muted,.c-recognition--style-dark .o-section--style-light,.c-recognition--style-dark .section--dark,.c-recognition--style-dark .c-card--standard,.c-recognition--style-dark .card--standard,.c-recognition--style-dark .c-card--standard-1,.c-recognition--style-dark .c-card--standard-2,.c-recognition--style-dark .c-card--standard-3,.c-recognition--style-dark .c-card--plain,.c-recognition--style-dark .card--plain,.c-recognition--style-dark [class*=card--plain-],.o-section--style-dark .c-recognition--style-light,.o-section--style-dark .o-section--style-muted,.o-section--style-dark .section--muted,.o-section--style-dark .o-section--style-light,.o-section--style-dark .section--dark,.o-section--style-dark .c-card--standard,.o-section--style-dark .card--standard,.o-section--style-dark .c-card--standard-1,.o-section--style-dark .c-card--standard-2,.o-section--style-dark .c-card--standard-3,.o-section--style-dark .c-card--plain,.o-section--style-dark .card--plain,.o-section--style-dark [class*=card--plain-],.section--dark .c-recognition--style-light,.section--dark .o-section--style-muted,.section--dark .section--muted,.section--dark .o-section--style-light,.section--dark .section--dark,.section--dark .c-card--standard,.section--dark .card--standard,.section--dark .c-card--standard-1,.section--dark .c-card--standard-2,.section--dark .c-card--standard-3,.section--dark .c-card--plain,.section--dark .card--plain,.section--dark [class*=card--plain-]){--global-color-accent--xxx-light:#dfeafe;--global-color-accent--xx-light:#caddfe;--global-color-accent--x-light:#aac7ff;--global-color-accent--light:#86aeff;--global-color-accent--normal:#039;--global-color-accent--dark:#026;--global-color-accent--x-dark:#013;--global-color-accent--xx-dark:#021230;--global-color-accent--xxx-dark:#000a22}

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

@@ -1 +0,0 @@
-@import url("./color/_blue.css");

package/src/lib/_imports/generics/color--demo.css

@@ -1 +0,0 @@
-@import url("./color/_blue.css");