@tacc/core-styles 2.30.1 → 2.32.0

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

@@ -1,38 +1,181 @@
+@import url('../tools/x-link.css');
+@import url("../components/c-button.selectors.css");
+
+
 /* Elements */
 
+/* To prevent excess space at top and bottom of message */
+
 @define-mixin message {
-  /* To prevent excess space at top and bottom of message */
-  & > *:first-child { margin-top: 0; }
-  & > *:last-child { margin-bottom: 0; }
+  & > *:first-child {
+    margin-top: 0;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
 }
 
 
 
 /* Modifiers */
 
+/* Modifiers: Scope-Inline & Type-* */
+
+@define-mixin message--scope-inline {
+  & > * {
+    display: inline;
+  }
+
+  /* IMPORTANT: Inline message has icon by default */
+  @mixin message--has-icon;
+  &::before {
+    margin-right: 0.5ch;
+
+    color: var(--icon-color);
+  }
+}
+@define-mixin message--type-info---message--scope-inline {
+  /* no common styles */
+}
+@define-mixin message--type-success---message--scope-inline {
+  /* no common styles */
+}
+@define-mixin message--type-warning---message--scope-inline {
+  /* no common styles */
+}
+@define-mixin message--type-error---message--scope-inline {
+  color: var(--global-color-danger--dark);
+}
+@define-mixin message--type-extra---message--scope-inline {
+  /* no common styles */
+}
+
+/* Modifiers: Scope-Section & Type-* */
+
+@define-mixin message--scope-section {
+  border-width: var(--global-border-width--normal);
+  border-style: solid;
+
+  padding-block: 8px;
+  padding-inline: 12px;
+}
 @define-mixin message--type-info---message--scope-section {
   background-color: var(--global-color-info--x-light);
   border-color: var(--global-color-info--normal);
 }
 @define-mixin message--type-success---message--scope-section {
   background-color: var(--global-color-success--x-light);
-  border-color: var(--global-color-success--normal);
+  border-color: var(--global-color-success--x-dark);
 }
 @define-mixin message--type-warning---message--scope-section {
   background-color: var(--global-color-warning--x-light);
-  border-color: var(--global-color-warning--normal);
+  border-color: var(--global-color-warning--dark);
 }
 @define-mixin message--type-error---message--scope-section {
   background-color: var(--global-color-danger--x-light);
-  border-color: var(--global-color-danger--normal);
+  border-color: var(--global-color-danger--dark);
 }
-@define-mixin message--type-tip---message--scope-section {
+@define-mixin message--type-extra---message--scope-section {
   background-color: var(--global-color-extra--x-light);
   border-color: var(--global-color-extra--normal);
 }
 
+/* Modifiers: Scope-Global */
+
 @define-mixin message--scope-global {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--secondary);
   border-color: var(--global-color-primary--dark);
+
+  padding-block: 8px;
+  padding-inline: 12px;
+
+  border-width: 0;
+  text-align: center;
+
+  /* To avoid clash of link color with message color */
+  & a,
+  & :--c-button--as-link {
+    color: inherit !important; /* override :hover and :active */
+  }
+  /* To distinguish link from message text */
+  & a,
+  & :--c-button--as-link {
+    @mixin link--irregular;
+  }
+  & a:hover,
+  & :--c-button--as-link:hover {
+    @mixin link--irregular--hover;
+  }
+  & a:active,
+  & :--c-button--as-link:active {
+    @mixin link--irregular--active;
+  }
+}
+
+/* Modifiers: Icon */
+
+@define-mixin message--has-icon {
+  &::before {
+    font-family: var(--icon);
+  }
+}
+
+/* IMPORTANT: Inline message has icon by default */
+
+/* IMPORTANT: Section message NO icon by default */
+@define-mixin message--has-icon---message--scope-section {
+  --icon-block-width: 32px;
+  --icon-size: 16px;
+
+  position: relative;
+  border-left-width: var(--icon-block-width);
+
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: var(--icon-block-width);
+    left: calc( -1 * var(--icon-block-width));
+    margin-left: var(--global-border-width--normal);
+
+    color: var(--global-color-primary--xx-light);
+    font-size: var(--icon-size);
+
+    /* To take up left column */
+    grid-row: 1 / span 99; /* 99 is for arbitrary implicit row count */
+
+    /* To center content */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+/* NOTE: Client is expected to overwrite these */
+@define-mixin message--has-icon---message--type-info {
+  --icon-color: var(--global-color-info--normal);
+
+  &::before { content: "✎"; }
+}
+@define-mixin message--has-icon---message--type-success {
+  --icon-color: var(--global-color-success--x-dark);
+
+  &::before { content: "✓"; }
+}
+@define-mixin message--has-icon---message--type-warning {
+  --icon-color: var(--global-color-warning--dark);
+
+  &::before { content: "⚠"; }
+}
+@define-mixin message--has-icon---message--type-error {
+  --icon-color: var(--global-color-danger--dark);
+
+  &::before { content: "⚠"; }
+}
+@define-mixin message--has-icon---message--type-extra {
+  --icon-color: var(--global-color-extra--normal);
+
+  &::before { content: "✎"; }
 }

package/src/lib/_imports/tools/x-message.demo.css

@@ -7,6 +7,28 @@
     @mixin message;
   }
 
+  .x-message--scope-inline {
+    @mixin message--scope-inline;
+  }
+  .x-message--scope-inline.x-message--type-info {
+    @mixin message--type-info---message--scope-inline;
+  }
+  .x-message--scope-inline.x-message--type-success {
+    @mixin message--type-success---message--scope-inline;
+  }
+  .x-message--scope-inline.x-message--type-warning {
+    @mixin message--type-warning---message--scope-inline;
+  }
+  .x-message--scope-inline.x-message--type-error {
+    @mixin message--type-error---message--scope-inline;
+  }
+  .x-message--scope-inline.x-message--type-extra {
+    @mixin message--type-extra---message--scope-inline;
+  }
+
+  .x-message--scope-section {
+    @mixin message--scope-section;
+  }
   .x-message--scope-section.x-message--type-info {
     @mixin message--type-info---message--scope-section;
   }
@@ -19,11 +41,36 @@
   .x-message--scope-section.x-message--type-error {
     @mixin message--type-error---message--scope-section;
   }
-  .x-message--scope-section.x-message--type-tip {
-    @mixin message--type-tip---message--scope-section;
+  .x-message--scope-section.x-message--type-extra {
+    @mixin message--type-extra---message--scope-section;
   }
 
   .x-message--scope-global {
     @mixin message--scope-global;
   }
+
+  .x-message--has-icon.x-message--scope-section {
+    @mixin message--has-icon;
+    @mixin message--has-icon---message--scope-section;
+  }
+  .x-message--has-icon.x-message--type-info,
+  .x-message--scope-inline.x-message--type-info {
+    @mixin message--has-icon---message--type-info;
+  }
+  .x-message--has-icon.x-message--type-success,
+  .x-message--scope-inline.x-message--type-success {
+    @mixin message--has-icon---message--type-success;
+  }
+  .x-message--has-icon.x-message--type-warning,
+  .x-message--scope-inline.x-message--type-warning {
+    @mixin message--has-icon---message--type-warning;
+  }
+  .x-message--has-icon.x-message--type-error,
+  .x-message--scope-inline.x-message--type-error {
+    @mixin message--has-icon---message--type-error;
+  }
+  .x-message--has-icon.x-message--type-extra,
+  .x-message--scope-inline.x-message--type-extra {
+    @mixin message--has-icon---message--type-extra;
+  }
 }

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

@@ -8,21 +8,15 @@ Colored boxes that appear atop a large image (like a banner).
 
 Styleguide Tools.Mixins.Overlay
 */
+@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
 
 %x-overlay--curtain {
-  --color-text: inherit;
-  --color-bkgd-rgb: var(--global-color-primary--normal);
-
-  color: var(--color-text);
-  background-color: rgba(var(--color-bkgd-rgb), 0.65);
+  color: inherit;
+  background-color: rgb( from design-token('color.gray.medium') r g b / 0.65 );
   backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
 }
 
 %x-overlay--callout {
-  --color-text: inherit;
-  --color-bkgd-rgb: var(--global-color-primary--normal);
-
-  color: var(--color-text);
-  background-color: rgba(var(--color-bkgd-rgb), 0.90);
+  color: inherit;
+  background-color: rgb( from design-token('color.gray.medium') r g b / 0.90 );
 }

package/src/lib/_imports/trumps/s-drop-cap/s-drop-cap.hbs

@@ -1,5 +1,6 @@
-<div class="s-drop-cap">
-  <h1>Lorem Ipsum</h1>
-  <p>{{> @text-of-one-paragraph-long }}</p>
-  <p>{{> @text-of-one-paragraph-long }}</p>
-</div>
+<dl>
+  <dt>Used on Element to Drop-Cap</dt>
+  <dd><p class="s-drop-cap">The first letter of this sentence should be a drop-cap, because this paragraph has a <code>s-drop-cap</code> class. {{> @text-of-one-paragraph-short }}</p></dd>
+  <dt>Used on Wrapper of Element to Drop-Cap</code></dt>
+  <dd class="s-drop-cap"><p>The first letter of this sentence should be a drop-cap, because this paragraph is the first within an element that has a <code>s-drop-cap</code>. {{> @text-of-one-paragraph-short }}</p></dd>
+</dl>

package/src/lib/_imports/trumps/s-drop-cap.css

@@ -1,14 +1,6 @@
-@supports (initial-letter: 3){
-  .s-drop-cap > p:first-of-type::first-letter {
-    padding-right: 1em;
-    initial-letter: 3;
-  }
-}
+@import url("../tools/x-drop-cap.css");
 
-@supports (-webkit-initial-letter: 3) {
-  .s-drop-cap > p:first-of-type::first-letter {
-    padding-right: 1em;
-    -webkit-initial-letter: 3;
-    font-family: Arial;
-  }
+.s-drop-cap::first-letter,
+.s-drop-cap > p:first-of-type::first-letter {
+  @mixin drop-cap;
 }

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

@@ -8,6 +8,7 @@ Markup: s-header.html
 
 Styleguide Trumps.Scopes.Header.Bootstrap
 */
+@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
 
 .s-header .dropdown-item {
   color: #212529;
@@ -16,7 +17,7 @@ Styleguide Trumps.Scopes.Header.Bootstrap
 .s-header .dropdown-item:hover {
   color: #16181b;
   text-decoration: none;
-  background-color: rgba(var(--global-color-primary--light-rgb), 0.3);
+  background-color: rgb( from design-token('color.gray.light') r g b / 0.3 );
 }
 .s-header .dropdown-item.active,
 .s-header .dropdown-item:active {

package/src/lib/_imports/trumps/s-hero-banner.css

@@ -1,4 +1,5 @@
 @import url("../tools/media-queries.css");
+@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
 
 /* Banner */
 /* Banner: Container */
@@ -37,7 +38,7 @@
 
 .s-home-banner article {
   color: var(--global-color-primary--xx-dark);
-  background-color: rgba(var(--global-color-primary--xx-light-rgb), 0.9);
+  background-color: rgb( from design-token('color.gray.light-2x') r g b / 0.9 );
   z-index: 2;
   padding: 24px 84px 36px 48px;
   font-weight: bold;

package/src/lib/_imports/trumps/s-system-specs.css

@@ -16,7 +16,7 @@ Styleguide Trumps.Scopes.SystemSpecs
 
 .s-system-specs {
   font-size: var(--global-font-size--small);
-  font-weight: var(--global-font-weight--medium);
+  font-weight: var(--medium);
 }
 
 

package/src/lib/tokens/ds.json

@@ -0,0 +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":"#afd9ee","type":"color"},"light-x":{"value":"#84c9f2","type":"color"},"light":{"value":"#5aace4","type":"color"},"medium":{"value":"#337ab7","type":"color"},"dark":{"value":"#286090","type":"color"},"dark-x":{"value":"#204d74","type":"color"},"dark-2x":{"value":"#122b40","type":"color"}},"2":{"light-2x":{"value":"#cdf9f4","type":"color"},"light-x":{"value":"#a5e4dd","type":"color"},"light":{"value":"#84cec6","type":"color"},"medium":{"value":"#58a19b","type":"color"},"dark":{"value":"#37817b","type":"color"},"dark-x":{"value":"#2d4f4c","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"3":{"light-2x":{"value":"#ece4bf","type":"color"},"light-x":{"value":"#e7d897","type":"color"},"light":{"value":"#d4c16f","type":"color"},"medium":{"value":"#a89a5b","type":"color"},"dark":{"value":"#807649","type":"color"},"dark-x":{"value":"#554f32","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"4":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#addba3","type":"color"},"light":{"value":"#74b566","type":"color"},"medium":{"value":"#449d44","type":"color"},"dark":{"value":"#398439","type":"color"},"dark-x":{"value":"#255625","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}}},"traffic":{"bad":{"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"}},"warn":{"light-x":{"value":"{colors.accent.3.light-2x}","type":"color"},"light":{"value":"{colors.accent.3.light-x}","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"}},"good":{"light-x":{"value":"{colors.accent.4.light-x}","type":"color"},"light":{"value":"{colors.accent.4.light}","type":"color"},"medium":{"value":"{colors.accent.4.medium}","type":"color"},"dark":{"value":"{colors.accent.4.dark}","type":"color"},"dark-x":{"value":"{colors.accent.4.dark-x}","type":"color"}},"other":{"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"}}}},"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"}},"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"}},"ds":{"blue":{"light-2x":{"value":"{colors.accent.1.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.1.light-x}","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"},"dark-2x":{"value":"{colors.accent.1.dark-2x}","type":"color"}},"teal":{"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"}},"yellow":{"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"}}}},"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"}}}

package/src/lib/tokens/v1.json

@@ -0,0 +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":"#e3d7fd","type":"color"},"light-x":{"value":"#d5bfff","type":"color"},"light":{"value":"#a387ed","type":"color"},"medium":{"value":"#784fe8","type":"color"},"dark":{"value":"#6039cc","type":"color"},"dark-x":{"value":"#3d189b","type":"color"},"dark-2x":{"value":"#281066","type":"color"}},"2":{"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"}},"3":{"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"}},"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":"#fdf1f1","type":"color"},"light":{"value":"#f8c9c9","type":"color"},"medium":{"value":"#f09393","type":"color"},"dark":{"value":"#af1818","type":"color"},"dark-x":{"value":"#3c3030","type":"color"}},"warn":{"light-x":{"value":"#fdfdea","type":"color"},"light":{"value":"#f2f06f","type":"color"},"medium":{"value":"#e9e000","type":"color"},"dark":{"value":"#735911","type":"color"},"dark-x":{"value":"#3a3320","type":"color"}},"good":{"light-x":{"value":"#e7f9e5","type":"color"},"light":{"value":"#afeca7","type":"color"},"medium":{"value":"#43d130","type":"color"},"dark":{"value":"#237119","type":"color"},"dark-x":{"value":"#263824","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"}},"v1":{"purple":{"light-2x":{"value":"{colors.accent.1.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.1.light-x}","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"},"dark-2x":{"value":"{colors.accent.1.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"}}}

package/src/lib/tokens/v2.json

@@ -0,0 +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":{"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"}}}

package/src/lib/tokens/v3.json

@@ -0,0 +1 @@
+{"colors":{"neutral":{"light-2x":{"value":"#fcfdf3","type":"color"},"light-x":{"value":"#e2e1d8","type":"color"},"light":{"value":"#cdcac3","type":"color"},"medium":{"value":"#a29e98","type":"color"},"dark":{"value":"#7e7974","type":"color"},"dark-x":{"value":"#4b4744","type":"color"},"dark-2x":{"value":"#2f2b2a","type":"color"}},"accent":{"1":{"light-2x":{"value":"#f9fcff","type":"color"},"light-x":{"value":"#e5f4ff","type":"color"},"light":{"value":"#c3e6ff","type":"color"},"medium":{"value":"#a3d1f1","type":"color"},"dark":{"value":"#53809d","type":"color"},"dark-x":{"value":"#204c68","type":"color"},"dark-2x":{"value":"#003049","type":"color"}},"2":{"light-2x":{"value":"#fffbf9","type":"color"},"light-x":{"value":"#ffeee5","type":"color"},"light":{"value":"#fed8c4","type":"color"},"medium":{"value":"#ffb892","type":"color"},"dark":{"value":"#bf5700","type":"color"},"dark-x":{"value":"#683a20","type":"color"},"dark-2x":{"value":"#491e02","type":"color"}},"3":{"light-2x":{"value":"#fefbf6","type":"color"},"light-x":{"value":"#fff0d7","type":"color"},"light":{"value":"#fedba0","type":"color"},"medium":{"value":"#fcbf49","type":"color"},"dark":{"value":"#9d710d","type":"color"},"dark-x":{"value":"#58441f","type":"color"},"dark-2x":{"value":"#3c2801","type":"color"}},"4":{"light-2x":{"value":"#fefcf1","type":"color"},"light-x":{"value":"#fbf3c8","type":"color"},"light":{"value":"#eae2b7","type":"color"},"medium":{"value":"#d4cca1","type":"color"},"dark":{"value":"#827a53","type":"color"},"dark-x":{"value":"#4f4822","type":"color"},"dark-2x":{"value":"#332c04","type":"color"}}},"traffic":{"bad":{"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"}},"warn":{"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"}},"good":{"light-x":{"value":"{colors.accent.1.light-x}","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"}},"other":{"light-x":{"value":"{colors.accent.4.light-x}","type":"color"},"light":{"value":"{colors.accent.4.light}","type":"color"},"medium":{"value":"{colors.accent.4.medium}","type":"color"},"dark":{"value":"{colors.accent.4.dark}","type":"color"},"dark-x":{"value":"{colors.accent.4.dark-x}","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"}},"v3":{"blue":{"value":"{colors.accent.1.dark-2x}","type":"color","light":{"value":"{colors.accent.1.dark-x}","type":"color"},"lighter":{"value":"{colors.accent.1.dark}","type":"color"}},"orange":{"value":"{colors.accent.2.dark}","type":"color","light":{"value":"{colors.accent.2.medium}","type":"color"},"dark":{"value":"{colors.accent.2.dark-x}","type":"color"}},"yellow":{"value":"{colors.accent.3.medium}","type":"color","light":{"value":"{colors.accent.3.light}","type":"color"},"dark":{"value":"{colors.accent.3.dark}","type":"color"}},"vanilla":{"value":"{colors.accent.4.light-x}","type":"color","darker":{"value":"{colors.accent.4.medium}","type":"color"},"dark":{"value":"{colors.accent.4.light}","type":"color"}},"raisin":{"value":"{colors.neutral.dark-2x}","type":"color"},"ivory":{"value":"{colors.neutral.light-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"}}}