@tacc/core-styles 2.53.3 → 2.54.0

package/src/lib/_imports/components/c-feed-list/c-feed-list.hbs

@@ -13,7 +13,7 @@
             <h3>Upcoming Events</h3>
 
             <article>
-                <time>May 15, 2024</time>
+                <time datetime="2024-05-15">May 15, 2024</time>
                 <h4>
                     <a href="#">Workshop: Advanced Data Analysis</a>
                 </h4>
@@ -43,8 +43,12 @@
             <h3>User Updates</h3>
 
             <article>
-                <time data-prefix="Published:" datetime="2024-04-29">
-                    <span>April 29, 2024</span>
+                <time
+                    data-prefix="Published:"
+                    aria-label="Published April 29, 2024"
+                    datetime="2024-04-29"
+                >
+                    April 29, 2024
                 </time>
                 <h4><a href="#" target="_blank">New Feature Release</a></h4>
                 <p>We're excited to announce the release of new features to enhance your experience. These updates include improved performance and additional customization options.</p>
@@ -52,9 +56,18 @@
             </article>
 
             <article class="has-update">
-                <time data-prefix="Published:" datetime="2024-04-28">
-                    <span>April 28, 2024</span>
-                    <span class="c-pill c-pill--is-updated">Update</span>
+                <time
+                    data-prefix="Published:"
+                    aria-label="Published April 28, 2024"
+                    datetime="2024-04-28"
+                >
+                    April 28, 2024
+
+                    <span
+                        class="c-pill c-pill--is-updated"
+                    >
+                        Updated
+                    </span>
                 </time>
                 <h4><a href="#" target="_blank">System Maintenance</a></h4>
                 <p>Planned maintenance will occur this weekend. The system will be unavailable from 10 PM to 2 AM.</p>

package/src/lib/_imports/components/c-update/c-update.hbs

@@ -4,7 +4,11 @@
     <aside class="c-update">
       <header class="c-update__header">
         <h3 class="c-update__title">
-          <span class="c-pill c-pill--is-updated">Update</span>&nbsp;
+          <span
+            class="c-pill c-pill--is-updated"
+          >
+            Updated
+          </span>&nbsp;
         </h3>
         <span>Published:</span>&nbsp;
         <time datetime="2023-10-13T14:27:18.637000">

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

@@ -18,7 +18,7 @@ main > dl {
 
   & :is(dt, dd):not(.no-demo-styles > *) {
     font-family: var(--global-font-family--sans);
-    color: #484848;
+    color: var(--global-color-primary--xx-dark);
     line-height: normal;
   }
   & dt:not(.no-demo-styles > *) {

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

@@ -56,7 +56,7 @@ pre {
 & :--monospace--block,
 & :--monospace--inline {
   background-color: var(--global-color-primary--x-light);
-  color: var(--global-color-primary--x-dark);
+  color: var(--global-color-primary--xx-dark);
   border: var(--global-border--normal);
 }
 & :--monospace--output:not(:--monospace--boxed) {

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

@@ -38,7 +38,7 @@ body {
   min-width: 290px; /* developer-decided value */
 
   /* To overwrite Bootstrap */
-  color: var(--global-color-primary--x-dark);
+  color: var(--global-color-primary--xx-dark);
 
   /* Prevent trackpad scroll from showing white background beyond page height */
   overscroll-behavior-y: none;

package/src/lib/_imports/elements/table--basic.css

@@ -60,8 +60,6 @@ tr:nth-child(even) :is(th, td),
   vertical-align: top;
   padding-block: var(--cell-pad-vert);
   padding-inline: var(--cell-pad-horz);
-
-  color: var(--global-color-primary--dark);
 }
 /* To ensure <thead> height matches between browsers */
 /* IMPORTANT: More than for consistency; `table--nested.css` requires this */
@@ -79,8 +77,6 @@ tr:nth-child(even) :is(th, td),
 }
 
 th {
-  color: var(--global-color-primary--x-dark);
-
   text-align: inherit; /* copied from Bootstrap 4.0.0 */
 }
 thead > tr > th {

package/src/lib/_imports/generics/attributes/attributes.hbs

@@ -1,3 +1,7 @@
-<time data-prefix="Published:" >
-  <span>OCTOBER 3, 2023</span>
-</time>
+<time
+  data-prefix="Published:"
+  aria-label="Published October 3, 2023"
+  datetime="2023-10-03"
+>
+  OCTOBER 3, 2023
+</time>

package/src/lib/_imports/generics/attributes.css

@@ -1,4 +1,5 @@
 /* To render data-prefix value as prefixed text */
+/* WARNING: Important text must also have `aria-label="some explanation"` */
 [data-prefix]::before {
   display: inline-block;
   content: attr(data-prefix);

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

@@ -71,20 +71,17 @@
 /* Modifers: Style: Options */
 
 :--o-section--light {
-  --color--text: var(--global-color-primary--x-dark);
-  --color--text-strong: var(--global-color-primary--xx-dark);
+  --color--text: var(--global-color-primary--xx-dark);
   --color--bkgd: var(--global-color-primary--xx-light);
   --color--line: var(--global-color-primary--normal);
 }
 :--o-section--muted {
-  --color--text: var(--global-color-primary--x-dark);
-  --color--text-strong: var(--global-color-primary--xx-dark);
+  --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-strong: var(--global-color-primary--xx-light);
   --color--bkgd: var(--global-color-primary--xx-dark);
   --color--line: var(--global-color-primary--xx-light);
 }
@@ -104,17 +101,6 @@
   box-shadow: none;
 }
 
-/* Modifers: Style: Child Text */
-
-/* To color text, but not those within certain contexts */
-:--o-section--style :is(h1, h3, h4, h5, h6):not(
-  :--c-card--plain *,
-  :--c-card--standard *,
-  :--c-card--standard-N *
-) {
-  color: var(--color--text-strong);
-}
-
 
 
 /* Modifers: Layout */

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

@@ -12,10 +12,19 @@
             {{> @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--light-alt"}}
             {{> @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"
+                not-available="true"}}
+          </div>
+        </dd>
+        <dt>Deprecated</dt>
+        <dd>
+          <div class="demo-palette">
+            {{> @color--swatch name="--global-color-primary--xxx-light"}}
             {{> @color--swatch name="--global-color-primary--xxx-dark"}}
           </div>
         </dd>
@@ -40,15 +49,18 @@
         <dt>Tints &amp; Shades</dt>
         <dd>
           <div class="demo-palette">
-            {{> @color--swatch name="--global-color-accent--xxx-light"}}
+            {{> @color--swatch name="--global-color-accent--xxx-light"
+                not-available="true"}}
             {{> @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--light-alt"}}
             {{> @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"}}
+            {{> @color--swatch name="--global-color-accent--xxx-dark"
+                not-available="true"}}
           </div>
         </dd>
         <dt>Deprecated</dt>
@@ -56,6 +68,8 @@
           <div class="demo-palette">
             {{> @color--swatch name="--global-color-accent--secondary"}}
             {{> @color--swatch name="--global-color-accent--tertiary"}}
+            {{> @color--swatch name="--global-color-accent--xxx-light"}}
+            {{> @color--swatch name="--global-color-accent--xxx-dark"}}
           </div>
         </dd>
       </dl>

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

@@ -5,7 +5,7 @@
   --global-color-accent--xxx-light: #ffffff; /* DEPRECATED */
   --global-color-accent--xx-light: #dfeafe;
   --global-color-accent--x-light: design-token('color.v2.blue.light-2x');
-  --global-color-accent--light: design-token('color.v2.blue.light-x');
+  --global-color-accent--light: design-token('color.v2.blue.light-alt');
   --global-color-accent--normal: design-token('color.v2.blue.light');
   --global-color-accent--dark: design-token('color.v2.blue.medium');
   --global-color-accent--x-dark: design-token('color.v2.blue.dark');

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

@@ -25,7 +25,7 @@
   --global-color-primary--dark: design-token('color.gray.dark');
   --global-color-primary--x-dark: design-token('color.gray.dark-x');
   --global-color-primary--xx-dark: design-token('color.gray.dark-2x');
-  --global-color-primary--xxx-dark: #000000;
+  --global-color-primary--xxx-dark: #000000; /* DEPRECATED */
 
 
 
@@ -34,7 +34,7 @@
   --global-color-accent--xxx-light: #dfeafe; /* DEPRECATED */
   --global-color-accent--xx-light: design-token('color.v2.blue.light-2x');
   --global-color-accent--x-light: design-token('color.v2.blue.light-x');
-  --global-color-accent--light-old: design-token('color.v2.blue.light-old'); /* DEPRECATED */
+  --global-color-accent--light-alt: design-token('color.v2.blue.light-alt');
   --global-color-accent--light: design-token('color.v2.blue.light');
   --global-color-accent--normal: design-token('color.v2.blue.medium');
   --global-color-accent--dark: design-token('color.v2.blue.dark');
@@ -114,6 +114,6 @@
   /* DEPRECATED */
   /* TODO: Rely on :--light-context and :--dark-context instead */
 
-  --global-color-link-on-light--normal: var(--global-color-accent--normal);
+  --global-color-link-on-light--normal: var(--global-color-accent--light);
   --global-color-link-on-dark--normal: var(--global-color-accent--xxx-light);
 }

package/src/lib/_imports/tools/x-feed-list/x-feed-list.hbs

@@ -13,7 +13,12 @@
             <h3 class="x-feed-list__title">Upcoming Events</h3>
             
             <article class="x-feed-list__item">
-                <time class="x-feed-list__item-time">May 15, 2024</time>
+                <time
+                    class="x-feed-list__item-time"
+                    datetime="2024-05-15"
+                >
+                    May 15, 2024
+                </time>
                 <h4 class="x-feed-list__item-name">
                     <a href="#">Workshop: Advanced Data Analysis</a>
                 </h4>
@@ -43,8 +48,13 @@
             <h3 class="x-feed-list__title">User Updates</h3>
             
             <article class="x-feed-list__item">
-                <time class="x-feed-list__item-time" data-prefix="Published:" datetime="2024-04-29">
-                    <span>April 29, 2024</span>
+                <time
+                    class="x-feed-list__item-time"
+                    data-prefix="Published:"
+                    aria-label="Published April 29, 2024"
+                    datetime="2024-04-29"
+                >
+                    April 29, 2024
                 </time>
                 <h4 class="x-feed-list__item-name"><a href="#" target="_blank">New Feature Release</a></h4>
                 <p class="x-feed-list__item-desc">We're excited to announce the release of new features to enhance your experience. These updates include improved performance and additional customization options.</p>
@@ -52,9 +62,19 @@
             </article>
 
             <article class="x-feed-list__item has-update">
-                <time class="x-feed-list__item-time" data-prefix="Published:" datetime="2024-04-28">
-                    <span>April 28, 2024</span>
-                    <span class="c-pill c-pill--is-updated">Update</span>
+                <time
+                    class="x-feed-list__item-time"
+                    data-prefix="Published:"
+                    aria-label="Published April 28, 2024"
+                    datetime="2024-04-28"
+                >
+                    April 28, 2024
+
+                    <span
+                        class="c-pill c-pill--is-updated"
+                    >
+                        Updated
+                    </span>
                 </time>
                 <h4 class="x-feed-list__item-name"><a href="#" target="_blank">System Maintenance</a></h4>
                 <p class="x-feed-list__item-desc">Planned maintenance will occur this weekend. The system will be unavailable from 10 PM to 2 AM.</p>

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

@@ -1,7 +1,7 @@
 /* Regular Links */
 
 @define-mixin link {
-  color: var(--global-color-accent--normal);
+  color: var(--global-color-accent--light);
 
   text-underline-offset: 0.2em;
   text-decoration-line: none;
@@ -14,7 +14,7 @@
 }
 
 @define-mixin link--disabled {
-  opacity: 0.5;
+  opacity: 0.75;
   pointer-events: none;
 }
 /* DEPRECATED */
@@ -27,7 +27,7 @@
   text-decoration-style: solid;
 
   /* To overwrite Bootstrap (on Client) */
-  color: var(--global-color-accent--normal);
+  color: var(--global-color-accent--light);
 }
 /* DEPRECATED */
 .x-link--hover {

package/src/lib/_imports/tools/x-tabs.skin.css

@@ -31,8 +31,8 @@
   color: var(--global-color-primary--dark);
 }
 .x-tabs__tab--active {
-  color: var(--global-color-accent--normal);
-  border-color: var(--global-color-accent--normal);
+  color: var(--global-color-accent--light);
+  border-color: var(--global-color-accent--light);
 }
 
 .x-tabs__content {

package/src/lib/_imports/trumps/_s-cms-nav/_s-cms-nav.hbs

@@ -10,7 +10,7 @@
       id="nav-link-{{default id 0}}-1"
     >
       Guides
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="sr-only">(Toggle Dropdown)</span>
     </button>
     <nav
       class="dropdown-menu"
@@ -21,14 +21,12 @@
       <a
         class="dropdown-item"
         href="#"
-        role="menuitem"
         aria-label="Opens in new window.">
           Getting Started
       </a>
       <a
         class="dropdown-item"
         href="#"
-        role="menuitem"
         aria-label="Opens in new window."
       >
         Portal Access
@@ -36,7 +34,6 @@
       <a
         class="dropdown-item"
         href="#"
-        role="menuitem"
         aria-label="Opens in new window.">
         User Guide
       </a>
@@ -58,7 +55,7 @@
       aria-expanded="false"
       aria-controls="nav-menu-{{default id 0}}-2"
     >
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="sr-only">(Toggle Dropdown)</span>
     </button>
     <nav
       class="dropdown-menu"
@@ -69,14 +66,12 @@
       <a
         class="dropdown-item"
         href="#"
-        role="menuitem"
       >
         Portal Technology Stack
       </a>
       <a
         class="dropdown-item"
         href="#"
-        role="menuitem"
       >
         Portals List
       </a>

package/src/lib/_imports/trumps/_s-portal-nav/_s-portal-nav.hbs

@@ -10,9 +10,9 @@
       aria-controls="nav-menu-{{default id 0}}-portal-1"
       id="nav-link-{{default id 0}}-portal-1"
     >
-      <i class="icon icon-user"></i>
+      <i class="icon icon-user" aria-hidden="true"></i>
       username
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="sr-only">(toggle dropdown)</span>
     </button>
     <nav
       class="dropdown-menu dropdown-menu-right"
@@ -23,28 +23,28 @@
         class="dropdown-item"
         href="#"
       >
-        <i class="icon icon-dashboard"></i>
+        <i class="icon icon-dashboard" aria-hidden="true"></i>
         My Dashboard
       </a>
       <a
         class="dropdown-item"
         href="#"
       >
-        <i class="icon icon-approved-boxed"></i>
+        <i class="icon icon-approved-boxed" aria-hidden="true"></i>
         Onboarding Admin
       </a>
       <a
         class="dropdown-item"
         href="#"
       >
-        <i class="icon icon-gear"></i>
+        <i class="icon icon-gear" aria-hidden="true"></i>
         My Account
       </a>
       <a
         class="dropdown-item"
         href="#"
       >
-        <i class="icon icon-user"></i>
+        <i class="icon icon-user" aria-hidden="true"></i>
         Log Out
       </a>
     </nav>

package/src/lib/_imports/trumps/s-cms-nav.css

@@ -15,8 +15,3 @@ ul.s-cms-nav {
   padding-left: 0; /* copied from Bootstrap */
   margin-bottom: 0; /* overwrite html-elements.css */
 }
-
-.s-cms-nav a:hover {
-  /* To overwrite @tacc/core-styles */
-  text-decoration: none; /* copied from Bootstrap */
-}

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

@@ -6,8 +6,8 @@
 .s-footer {
   padding-block: 15px;
 
-  color: var(--global-color-primary--light);
-  background-color: var(--global-color-primary--xx-dark);
+  color: var(--global-color-primary--x-light);
+  background-color: var(--header-bkgd-color);
 
   font-size: var(--global-font-size--small);
   text-align: center;
@@ -19,12 +19,8 @@
   padding-inline: var(--pad-horz--thin);
 }
 
-.s-footer a:not(:--c-button, :hover) {
-    color: var(--global-color-primary--light)
-}
-
-.s-footer a:not(:--c-button):hover {
-    color: var(--global-color-accent--light-old)
+.s-footer a:not(:--c-button) {
+    color: var(--global-color-accent--light-alt);
 }
 
 .s-footer :--heading {

package/src/lib/_imports/trumps/s-form-page.css

@@ -45,7 +45,7 @@
   }
 }
 .s-form-page > footer a {
-  color: var(--global-color-primary--x-dark);
+  color: inherit;
   font-weight: var(--bold);
 }
 

package/src/lib/_imports/trumps/s-header/s-header--with-branding.hbs

@@ -17,16 +17,16 @@ from https://frontera-portal.tacc.utexas.edu/. It has:
   (only via `./s-portal-nav.html`)
 -->
 <div class="branding-header">
-  <a href="https://www.nsf.gov/" target="_blank">
-    <img class="branding-logo branding-nsf" src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/nsf-white.png" alt="NSF Logo">
+  <a href="https://www.nsf.gov/" target="_blank" aria-label="National Science Foundation">
+    <img class="branding-logo branding-nsf" src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/nsf-white.png" alt="NSF (National Science Foundation) Logo">
   </a>
   <span class="branding-seperator"></span>
-  <a href="https://www.tacc.utexas.edu/" target="_blank">
-    <img class="branding-logo branding-tacc" src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/tacc-white.png" alt="TACC Logo">
+  <a href="https://www.tacc.utexas.edu/" target="_blank" aria-label="Texas Advanced Computing Center">
+    <img class="branding-logo branding-tacc" src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/tacc-white.png" alt="TACC (Texas Advanced Computing Center) Logo">
   </a>
   <span class="branding-seperator"></span>
-  <a href="https://www.utexas.edu/" target="_blank">
-    <img class="branding-logo branding-utaustin" src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/utaustin-white.png" alt="University of Texas at Austin Logo">
+  <a href="https://www.utexas.edu/" target="_blank" aria-label="University of Texas at Austin">
+    <img class="branding-logo branding-utaustin" src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/utaustin-white.png" alt="UTexas (University of Texas at Austin) Logo">
   </a>
 </div>
 {{> @s-header}}

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

@@ -106,6 +106,12 @@ Styleguide Trumps.Scopes.Header
 /* FAQ: Bootstrap selector is `.navbar-expand-… .navbar-nav .nav-link` */ {
   padding-inline: 14px;
 }
+.s-header .nav-link:is(:hover, :active) {
+  text-decoration: none;
+}
+.s-header .nav-link:active {
+  border-style: double;
+}
 
 @define-mixin header--not-expanded {
   &.s-header .nav-item {

package/src/lib/_imports/trumps/s-portal-nav.css

@@ -24,11 +24,6 @@ ul.s-portal-nav {
   margin-bottom: 0; /* overwrite html-elements.css */
 }
 
-.s-portal-nav a:hover {
-  /* To overwrite @tacc/core-styles */
-  text-decoration: none; /* copied from Bootstrap */
-}
-
 
 .s-portal-nav .icon {
   margin-right: 0.25em;

package/src/lib/tokens/v2.json

@@ -1 +1 @@
-{"colors":{"neutral":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#f4f4f4","type":"color"},"light":{"value":"#d7d7d7","type":"color"},"medium":{"value":"#afafaf","type":"color"},"dark":{"value":"#707070","type":"color"},"dark-x":{"value":"#484848","type":"color"},"dark-2x":{"value":"#222222","type":"color"}},"accent":{"1":{"light-2x":{"value":"#caddfe","type":"color"},"light-x":{"value":"#aac7ff","type":"color"},"light":{"value":"#3d6acc","type":"color"},"medium":{"value":"#003399","type":"color"},"dark":{"value":"#002266","type":"color"},"dark-x":{"value":"#001133","type":"color"},"dark-2x":{"value":"#021230","type":"color"}},"2":{"light-2x":{"value":"#fcf6ec","type":"color"},"light-x":{"value":"#e5d7c0","type":"color"},"light":{"value":"#d5b57c","type":"color"},"medium":{"value":"#877453","type":"color"},"dark":{"value":"#514328","type":"color"},"dark-x":{"value":"#332c1f","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"3":{"light-2x":{"value":"#e7f1f0","type":"color"},"light-x":{"value":"#b1d1ce","type":"color"},"light":{"value":"#92ccc5","type":"color"},"medium":{"value":"#61a39c","type":"color"},"dark":{"value":"#406d68","type":"color"},"dark-x":{"value":"#1e3331","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"4":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#ffffff","type":"color"},"light":{"value":"#ffffff","type":"color"},"medium":{"value":"#ffffff","type":"color"},"dark":{"value":"#ffffff","type":"color"},"dark-x":{"value":"#ffffff","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}}},"traffic":{"bad":{"light-x":{"value":"#fce4db","type":"color"},"light":{"value":"#fcaf91","type":"color"},"medium":{"value":"#ed4c11","type":"color"},"dark":{"value":"#c23a03","type":"color"},"dark-x":{"value":"#932b06","type":"color"}},"warn":{"light-x":{"value":"#fdf0d3","type":"color"},"light":{"value":"#fed880","type":"color"},"medium":{"value":"#f2b327","type":"color"},"dark":{"value":"#cd971c","type":"color"},"dark-x":{"value":"#996f0a","type":"color"}},"good":{"light-x":{"value":"#baf8dc","type":"color"},"light":{"value":"#93f6cd","type":"color"},"medium":{"value":"#10f7a9","type":"color"},"dark":{"value":"#3dce92","type":"color"},"dark-x":{"value":"#26885f","type":"color"}},"other":{"light-x":{"value":"#f0f6ff","type":"color"},"light":{"value":"#b4d0f9","type":"color"},"medium":{"value":"#3f85f4","type":"color"},"dark":{"value":"#255bb1","type":"color"},"dark-x":{"value":"#174a99","type":"color"}}}},"spacing":{"1":{"value":8,"type":"number"},"2":{"value":16,"type":"number"},"3":{"value":24,"type":"number"},"4":{"value":32,"type":"number"},"5":{"value":40,"type":"number"},"6":{"value":48,"type":"number"},"7":{"value":56,"type":"number"},"8":{"value":64,"type":"number"},"9":{"value":72,"type":"number"},"10":{"value":80,"type":"number"},"11":{"value":88,"type":"number"},"12":{"value":96,"type":"number"},"13":{"value":104,"type":"number"},"fourth":{"value":2,"type":"number"},"half":{"value":4,"type":"number"}},"font-weight":{"100":{"value":100,"type":"number"},"200":{"value":200,"type":"number"},"300":{"value":300,"type":"number"},"400":{"value":400,"type":"number"},"500":{"value":500,"type":"number"},"600":{"value":600,"type":"number"},"700":{"value":700,"type":"number"},"800":{"value":800,"type":"number"},"900":{"value":900,"type":"number"}},"color":{"gray":{"light-2x":{"value":"{colors.neutral.light-2x}","type":"color"},"light-x":{"value":"{colors.neutral.light-x}","type":"color"},"light":{"value":"{colors.neutral.light}","type":"color"},"medium":{"value":"{colors.neutral.medium}","type":"color"},"dark":{"value":"{colors.neutral.dark}","type":"color"},"dark-x":{"value":"{colors.neutral.dark-x}","type":"color"},"dark-2x":{"value":"{colors.neutral.dark-2x}","type":"color"}},"v2":{"blue":{"light-x":{"value":"{colors.accent.1.light-x}","type":"color"},"light-old":{"value":"#86aeff","type":"color"},"light":{"value":"{colors.accent.1.light}","type":"color"},"medium":{"value":"{colors.accent.1.medium}","type":"color"},"dark":{"value":"{colors.accent.1.dark}","type":"color"},"dark-x":{"value":"{colors.accent.1.dark-x}","type":"color"},"light-2x":{"value":"{colors.accent.1.light-2x}","type":"color"},"dark-2x":{"value":"{colors.accent.1.dark-2x}","type":"color"}},"gold":{"light-2x":{"value":"{colors.accent.2.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.2.light-x}","type":"color"},"light":{"value":"{colors.accent.2.light}","type":"color"},"medium":{"value":"{colors.accent.2.medium}","type":"color"},"dark":{"value":"{colors.accent.2.dark}","type":"color"},"dark-x":{"value":"{colors.accent.2.dark-x}","type":"color"},"dark-2x":{"value":"{colors.accent.2.dark-2x}","type":"color"}},"teal":{"light-2x":{"value":"{colors.accent.3.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.3.light-x}","type":"color"},"light":{"value":"{colors.accent.3.light}","type":"color"},"medium":{"value":"{colors.accent.3.medium}","type":"color"},"dark":{"value":"{colors.accent.3.dark}","type":"color"},"dark-x":{"value":"{colors.accent.3.dark-x}","type":"color"},"dark-2x":{"value":"{colors.accent.3.dark-2x}","type":"color"}}},"info":{"light-x":{"value":"{colors.neutral.light-x}","type":"color"},"light":{"value":"{colors.neutral.light}","type":"color"},"medium":{"value":"{colors.neutral.dark}","type":"color"},"dark":{"value":"{colors.neutral.dark-x}","type":"color"},"dark-x":{"value":"{colors.neutral.dark-2x}","type":"color"}},"danger":{"light-x":{"value":"{colors.traffic.bad.light-x}","type":"color"},"light":{"value":"{colors.traffic.bad.light}","type":"color"},"medium":{"value":"{colors.traffic.bad.medium}","type":"color"},"dark":{"value":"{colors.traffic.bad.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.bad.dark-x}","type":"color"}},"warning":{"light-x":{"value":"{colors.traffic.warn.light-x}","type":"color"},"light":{"value":"{colors.traffic.warn.light}","type":"color"},"medium":{"value":"{colors.traffic.warn.medium}","type":"color"},"dark":{"value":"{colors.traffic.warn.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.warn.dark-x}","type":"color"}},"success":{"light-x":{"value":"{colors.traffic.good.light-x}","type":"color"},"light":{"value":"{colors.traffic.good.light}","type":"color"},"medium":{"value":"{colors.traffic.good.medium}","type":"color"},"dark":{"value":"{colors.traffic.good.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.good.dark-x}","type":"color"}},"extra":{"light-x":{"value":"{colors.traffic.other.light-x}","type":"color"},"light":{"value":"{colors.traffic.other.light}","type":"color"},"medium":{"value":"{colors.traffic.other.medium}","type":"color"},"dark":{"value":"{colors.traffic.other.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.other.dark-x}","type":"color"}}},"space":{"small-2x":{"value":"{spacing.fourth}","type":"number"},"small-x":{"value":"{spacing.half}","type":"number"},"small":{"value":"{spacing.1}","type":"number"},"medium":{"value":"{spacing.2}","type":"number"},"large":{"value":"{spacing.3}","type":"number"},"large-x":{"value":"{spacing.4}","type":"number"},"large-2x":{"value":"{spacing.5}","type":"number"}},"weight":{"light":{"value":"{font-weight.300}","type":"number"},"bold":{"value":"{font-weight.700}","type":"number"},"medium":{"value":"{font-weight.500}","type":"number"},"regular":{"value":"{font-weight.400}","type":"number"},"semibold":{"value":"{font-weight.600}","type":"number"},"thin":{"value":"{font-weight.100}","type":"number"},"extralight":{"value":"{font-weight.200}","type":"number"},"extrabold":{"value":"{font-weight.800}","type":"number"},"black":{"value":"{font-weight.900}","type":"number"},"light-x":{"value":"{weight.extralight}","type":"number"},"bold-x":{"value":"{weight.extrabold}","type":"number"}}}
+{"colors":{"neutral":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#f4f4f4","type":"color"},"light":{"value":"#d7d7d7","type":"color"},"medium":{"value":"#afafaf","type":"color"},"dark":{"value":"#707070","type":"color"},"dark-x":{"value":"#484848","type":"color"},"dark-2x":{"value":"#000000","type":"color"}},"accent":{"1":{"light-2x":{"value":"#caddfe","type":"color"},"light-x":{"value":"#aac7ff","type":"color"},"light":{"value":"#3d6acc","type":"color"},"medium":{"value":"#003399","type":"color"},"dark":{"value":"#002266","type":"color"},"dark-x":{"value":"#001133","type":"color"},"dark-2x":{"value":"#021230","type":"color"}},"2":{"light-2x":{"value":"#fcf6ec","type":"color"},"light-x":{"value":"#e5d7c0","type":"color"},"light":{"value":"#d5b57c","type":"color"},"medium":{"value":"#877453","type":"color"},"dark":{"value":"#514328","type":"color"},"dark-x":{"value":"#332c1f","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"3":{"light-2x":{"value":"#e7f1f0","type":"color"},"light-x":{"value":"#b1d1ce","type":"color"},"light":{"value":"#92ccc5","type":"color"},"medium":{"value":"#61a39c","type":"color"},"dark":{"value":"#406d68","type":"color"},"dark-x":{"value":"#1e3331","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"4":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#ffffff","type":"color"},"light":{"value":"#ffffff","type":"color"},"medium":{"value":"#ffffff","type":"color"},"dark":{"value":"#ffffff","type":"color"},"dark-x":{"value":"#ffffff","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}}},"traffic":{"bad":{"light-x":{"value":"#fce4db","type":"color"},"light":{"value":"#fcaf91","type":"color"},"medium":{"value":"#ed4c11","type":"color"},"dark":{"value":"#c23a03","type":"color"},"dark-x":{"value":"#932b06","type":"color"}},"warn":{"light-x":{"value":"#fdf0d3","type":"color"},"light":{"value":"#fed880","type":"color"},"medium":{"value":"#f2b327","type":"color"},"dark":{"value":"#cd971c","type":"color"},"dark-x":{"value":"#996f0a","type":"color"}},"good":{"light-x":{"value":"#baf8dc","type":"color"},"light":{"value":"#93f6cd","type":"color"},"medium":{"value":"#10f7a9","type":"color"},"dark":{"value":"#3dce92","type":"color"},"dark-x":{"value":"#26885f","type":"color"}},"other":{"light-x":{"value":"#f0f6ff","type":"color"},"light":{"value":"#b4d0f9","type":"color"},"medium":{"value":"#3f85f4","type":"color"},"dark":{"value":"#255bb1","type":"color"},"dark-x":{"value":"#174a99","type":"color"}}}},"spacing":{"1":{"value":8,"type":"number"},"2":{"value":16,"type":"number"},"3":{"value":24,"type":"number"},"4":{"value":32,"type":"number"},"5":{"value":40,"type":"number"},"6":{"value":48,"type":"number"},"7":{"value":56,"type":"number"},"8":{"value":64,"type":"number"},"9":{"value":72,"type":"number"},"10":{"value":80,"type":"number"},"11":{"value":88,"type":"number"},"12":{"value":96,"type":"number"},"13":{"value":104,"type":"number"},"fourth":{"value":2,"type":"number"},"half":{"value":4,"type":"number"}},"font-weight":{"100":{"value":100,"type":"number"},"200":{"value":200,"type":"number"},"300":{"value":300,"type":"number"},"400":{"value":400,"type":"number"},"500":{"value":500,"type":"number"},"600":{"value":600,"type":"number"},"700":{"value":700,"type":"number"},"800":{"value":800,"type":"number"},"900":{"value":900,"type":"number"}},"color":{"gray":{"light-2x":{"value":"{colors.neutral.light-2x}","type":"color"},"light-x":{"value":"{colors.neutral.light-x}","type":"color"},"light":{"value":"{colors.neutral.light}","type":"color"},"medium":{"value":"{colors.neutral.medium}","type":"color"},"dark":{"value":"{colors.neutral.dark}","type":"color"},"dark-x":{"value":"{colors.neutral.dark-x}","type":"color"},"dark-2x":{"value":"{colors.neutral.dark-2x}","type":"color"}},"v2":{"blue":{"light-x":{"value":"{colors.accent.1.light-x}","type":"color"},"light-alt":{"value":"#6D8BDA","type":"color"},"light":{"value":"{colors.accent.1.light}","type":"color"},"medium":{"value":"{colors.accent.1.medium}","type":"color"},"dark":{"value":"{colors.accent.1.dark}","type":"color"},"dark-x":{"value":"{colors.accent.1.dark-x}","type":"color"},"light-2x":{"value":"{colors.accent.1.light-2x}","type":"color"},"dark-2x":{"value":"{colors.accent.1.dark-2x}","type":"color"}},"gold":{"light-2x":{"value":"{colors.accent.2.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.2.light-x}","type":"color"},"light":{"value":"{colors.accent.2.light}","type":"color"},"medium":{"value":"{colors.accent.2.medium}","type":"color"},"dark":{"value":"{colors.accent.2.dark}","type":"color"},"dark-x":{"value":"{colors.accent.2.dark-x}","type":"color"},"dark-2x":{"value":"{colors.accent.2.dark-2x}","type":"color"}},"teal":{"light-2x":{"value":"{colors.accent.3.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.3.light-x}","type":"color"},"light":{"value":"{colors.accent.3.light}","type":"color"},"medium":{"value":"{colors.accent.3.medium}","type":"color"},"dark":{"value":"{colors.accent.3.dark}","type":"color"},"dark-x":{"value":"{colors.accent.3.dark-x}","type":"color"},"dark-2x":{"value":"{colors.accent.3.dark-2x}","type":"color"}}},"info":{"light-x":{"value":"{colors.neutral.light-x}","type":"color"},"light":{"value":"{colors.neutral.light}","type":"color"},"medium":{"value":"{colors.neutral.dark}","type":"color"},"dark":{"value":"{colors.neutral.dark-x}","type":"color"},"dark-x":{"value":"{colors.neutral.dark-2x}","type":"color"}},"danger":{"light-x":{"value":"{colors.traffic.bad.light-x}","type":"color"},"light":{"value":"{colors.traffic.bad.light}","type":"color"},"medium":{"value":"{colors.traffic.bad.medium}","type":"color"},"dark":{"value":"{colors.traffic.bad.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.bad.dark-x}","type":"color"}},"warning":{"light-x":{"value":"{colors.traffic.warn.light-x}","type":"color"},"light":{"value":"{colors.traffic.warn.light}","type":"color"},"medium":{"value":"{colors.traffic.warn.medium}","type":"color"},"dark":{"value":"{colors.traffic.warn.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.warn.dark-x}","type":"color"}},"success":{"light-x":{"value":"{colors.traffic.good.light-x}","type":"color"},"light":{"value":"{colors.traffic.good.light}","type":"color"},"medium":{"value":"{colors.traffic.good.medium}","type":"color"},"dark":{"value":"{colors.traffic.good.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.good.dark-x}","type":"color"}},"extra":{"light-x":{"value":"{colors.traffic.other.light-x}","type":"color"},"light":{"value":"{colors.traffic.other.light}","type":"color"},"medium":{"value":"{colors.traffic.other.medium}","type":"color"},"dark":{"value":"{colors.traffic.other.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.other.dark-x}","type":"color"}}},"space":{"small-2x":{"value":"{spacing.fourth}","type":"number"},"small-x":{"value":"{spacing.half}","type":"number"},"small":{"value":"{spacing.1}","type":"number"},"medium":{"value":"{spacing.2}","type":"number"},"large":{"value":"{spacing.3}","type":"number"},"large-x":{"value":"{spacing.4}","type":"number"},"large-2x":{"value":"{spacing.5}","type":"number"}},"weight":{"light":{"value":"{font-weight.300}","type":"number"},"bold":{"value":"{font-weight.700}","type":"number"},"medium":{"value":"{font-weight.500}","type":"number"},"regular":{"value":"{font-weight.400}","type":"number"},"semibold":{"value":"{font-weight.600}","type":"number"},"thin":{"value":"{font-weight.100}","type":"number"},"extralight":{"value":"{font-weight.200}","type":"number"},"extrabold":{"value":"{font-weight.800}","type":"number"},"black":{"value":"{font-weight.900}","type":"number"},"light-x":{"value":"{weight.extralight}","type":"number"},"bold-x":{"value":"{weight.extrabold}","type":"number"}}}