npm - @tmorrow/cre8-wc - Versions diffs - 2.3.5 → 2.3.9 - Mend

@tmorrow/cre8-wc 2.3.5 → 2.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (457) hide show

package/lib/components/utility-nav-item/utility-nav-item.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 const styles = css `.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+  color: var(--cre8-color-content-knockout-brand);
 }
 .cre8-u-is-hidden {
@@ -73,23 +73,23 @@ const styles = css `.cre8-u-content-knockout-brand {
 }
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 .cre8-u-margin-top-none {
@@ -97,23 +97,23 @@ const styles = css `.cre8-u-content-knockout-brand {
 }
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 .cre8-u-margin-right-none {
@@ -121,23 +121,23 @@ const styles = css `.cre8-u-content-knockout-brand {
 }
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 .cre8-u-margin-bottom-none {
@@ -145,32 +145,32 @@ const styles = css `.cre8-u-content-knockout-brand {
 }
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -178,23 +178,23 @@ const styles = css `.cre8-u-content-knockout-brand {
 }
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 .cre8-u-padding-none {
@@ -202,23 +202,23 @@ const styles = css `.cre8-u-content-knockout-brand {
 }
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 .cre8-u-padding-top-none {
@@ -226,23 +226,23 @@ const styles = css `.cre8-u-content-knockout-brand {
 }
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 .cre8-u-padding-right-none {
@@ -250,23 +250,23 @@ const styles = css `.cre8-u-content-knockout-brand {
 }
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 .cre8-u-padding-bottom-none {
@@ -274,23 +274,23 @@ const styles = css `.cre8-u-content-knockout-brand {
 }
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 .cre8-u-padding-left-none {
@@ -298,23 +298,23 @@ const styles = css `.cre8-u-content-knockout-brand {
 }
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 .cre8-u-display-flex {
@@ -330,7 +330,6 @@ body {
   font-size: var(--cre8-typography-body-default-font-size);
   font-weight: var(--cre8-typography-body-default-font-weight);
   line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-decoration: var(--cre8-typography-body-default-text-decoration);
   text-transform: var(--cre8-typography-body-default-text-transform);
   display: flex;
@@ -338,7 +337,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 @media all and (min-width: 60rem) {
@@ -638,7 +637,7 @@ cre8-icon-legacy {
 * 1) Create space between text and icon
 */
 .cre8-c-utility-nav__text + cre8-icon-legacy {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   /* 1 */
 }
@@ -647,7 +646,7 @@ cre8-icon-legacy {
 * 1) Create space between text and icon
 */
 cre8-icon-legacy + .cre8-c-utility-nav__text {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   /* 1 */
 }`;
 export default styles;

package/lib/components/utility-nav-item/utility-nav-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utility-nav-item.styles.js","sourceRoot":"","sources":["../../../components/utility-nav-item/utility-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0oBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(8) !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n 1) List item that contains a link/button within the utility nav\n /\n.cre8-c-utility-nav__item {\n margin: 0;\n padding: 0;\n}\n\n/\n Utility nav link\n/\n.cre8-c-utility-nav__link {\n display: flex;\n font-family: var(--cre8-typography-label-default-font-family);\n font-size: var(--cre8-typography-label-default-font-size);\n font-weight: var(--cre8-typography-label-default-font-weight);\n line-height: var(--cre8-typography-label-default-line-height);\n text-decoration: var(--cre8-typography-label-default-text-decoration);\n text-transform: var(--cre8-typography-label-default-text-transform);\n border: none;\n background: none;\n appearance: none;\n padding: 0;\n text-align: left;\n color: var(--cre8-utility-nav-link-color, var(--cre8-color-content-brand));\n cursor: pointer;\n transition: color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n}\n.cre8-c-utility-nav__link:hover, .cre8-c-utility-nav__link:focus {\n color: var(--cre8-color-content-brand-hover);\n}\n\n/\n Utility nav icon\n* 1) Pass properties down to icon component\n/\ncre8-icon-legacy {\n --cre8-icon-height: 1.5rem;\n / 1 /\n --cre8-icon-width: 1.5rem;\n / 1 /\n}\n\n/\n Utility nav icon directly after utility nav text\n* 1) Create space between text and icon\n/\n.cre8-c-utility-nav__text + cre8-icon-legacy {\n margin-left: 0.5rem;\n / 1 /\n}\n\n/\n Utility nav text directly after utility nav icon\n* 1) Create space between text and icon\n/\ncre8-icon-legacy + .cre8-c-utility-nav__text {\n margin-left: 0.5rem;\n / 1 */\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"utility-nav-item.styles.js","sourceRoot":"","sources":["../../../components/utility-nav-item/utility-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyoBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n 1) List item that contains a link/button within the utility nav\n /\n.cre8-c-utility-nav__item {\n margin: 0;\n padding: 0;\n}\n\n/\n Utility nav link\n/\n.cre8-c-utility-nav__link {\n display: flex;\n font-family: var(--cre8-typography-label-default-font-family);\n font-size: var(--cre8-typography-label-default-font-size);\n font-weight: var(--cre8-typography-label-default-font-weight);\n line-height: var(--cre8-typography-label-default-line-height);\n text-decoration: var(--cre8-typography-label-default-text-decoration);\n text-transform: var(--cre8-typography-label-default-text-transform);\n border: none;\n background: none;\n appearance: none;\n padding: 0;\n text-align: left;\n color: var(--cre8-utility-nav-link-color, var(--cre8-color-content-brand));\n cursor: pointer;\n transition: color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n}\n.cre8-c-utility-nav__link:hover, .cre8-c-utility-nav__link:focus {\n color: var(--cre8-color-content-brand-hover);\n}\n\n/\n Utility nav icon\n* 1) Pass properties down to icon component\n/\ncre8-icon-legacy {\n --cre8-icon-height: 1.5rem;\n / 1 /\n --cre8-icon-width: 1.5rem;\n / 1 /\n}\n\n/\n Utility nav icon directly after utility nav text\n* 1) Create space between text and icon\n/\n.cre8-c-utility-nav__text + cre8-icon-legacy {\n margin-left: var(--cre8-spacing-8);\n / 1 /\n}\n\n/\n Utility nav text directly after utility nav icon\n* 1) Create space between text and icon\n/\ncre8-icon-legacy + .cre8-c-utility-nav__text {\n margin-left: var(--cre8-spacing-8);\n / 1 */\n}`;\nexport default styles;\n"]}

package/lib/design-tokens/brands/cre8-a2ui/css/tokens_brand.css CHANGED Viewed

@@ -99,8 +99,16 @@
   --cre8-warning-500: var(--cre8-seed-warning);
   --cre8-warning-600: oklch(from var(--cre8-seed-warning) 0.6658 calc(c * 0.956) calc(h - 11.76));
-  /* accent */
+  /* accent
+     -50 and -500 added by hand (not from the original generator, which never
+     emitted them) to give info-status tokens a real ramp to point at instead
+     of borrowing primary's. Simple relative lightness offsets from the -600
+     identity step, not the per-hue-tuned coefficients the rest of this ramp
+     uses -- close enough for a light tint and a mid-strength fill, not a
+     claim of the same precision. */
+  --cre8-accent-50: oklch(from var(--cre8-seed-accent) 0.96 calc(c * 0.15) h);
   --cre8-accent-200: oklch(from var(--cre8-seed-accent) 0.9024 calc(c * 0.245) calc(h + 13.69));
+  --cre8-accent-500: oklch(from var(--cre8-seed-accent) calc(l + 0.08) c h);
   --cre8-accent-600: var(--cre8-seed-accent);
   /* Overlays — neutral-900 at fixed alpha */
@@ -129,6 +137,22 @@
   --cre8-spacing-120: calc(var(--cre8-seed-space) * 30);
   --cre8-spacing-160: calc(var(--cre8-seed-space) * 40);
+  /* Padding — a deliberately narrow slice of the spacing scale.
+     The full scale above spans a 0.5x-40x range (80x), which is right for
+     layout gaps and section margins but wrong for component padding: reseed
+     --cre8-seed-space for a chunkier padding feel and the *layout* end of
+     that same scale swings by tens of pixels for a change meant to nudge
+     button/card padding by a couple of pixels. Padding gets its own 0.5x-6x
+     range (12x) instead -- aliases of the existing tight-end steps, not new
+     math -- so retheming padding doesn't also retheme page layout. Component
+     padding should reference these, never --cre8-spacing-* directly; gap and
+     margin (genuine layout) can still reach the full scale above. */
+  --cre8-padding-2: var(--cre8-spacing-2);
+  --cre8-padding-4: var(--cre8-spacing-4);
+  --cre8-padding-8: var(--cre8-spacing-8);
+  --cre8-padding-16: var(--cre8-spacing-16);
+  --cre8-padding-24: var(--cre8-spacing-24);
   /* Font size — multiples of the font-size seed */
   --cre8-font-size-0: calc(var(--cre8-seed-font-size) * 0.75);
   --cre8-font-size-1: calc(var(--cre8-seed-font-size) * 0.875);
@@ -251,9 +275,9 @@
   --cre8-color-bg-warning: var(--cre8-bg-warning);
   --cre8-bg-warning-strong: var(--cre8-warning-500);
   --cre8-color-bg-warning-strong: var(--cre8-bg-warning-strong);
-  --cre8-bg-info: var(--cre8-primary-50);
+  --cre8-bg-info: var(--cre8-accent-50);
   --cre8-color-bg-info: var(--cre8-bg-info);
-  --cre8-bg-info-strong: var(--cre8-primary-500);
+  --cre8-bg-info-strong: var(--cre8-accent-500);
   --cre8-color-bg-info-strong: var(--cre8-bg-info-strong);
   --cre8-bg-attention: var(--cre8-neutral-0);
   --cre8-color-bg-attention: var(--cre8-bg-attention);
@@ -291,7 +315,7 @@
   --cre8-color-content-error-icon: var(--cre8-content-error-icon);
   --cre8-content-warning-icon: var(--cre8-warning-600);
   --cre8-color-content-warning-icon: var(--cre8-content-warning-icon);
-  --cre8-content-info-icon: var(--cre8-primary-500);
+  --cre8-content-info-icon: var(--cre8-accent-500);
   --cre8-color-content-info-icon: var(--cre8-content-info-icon);
   --cre8-content-attention-icon: var(--cre8-primary-400);
   --cre8-color-content-attention-icon: var(--cre8-content-attention-icon);
@@ -339,7 +363,7 @@
   --cre8-color-border-error: var(--cre8-border-error);
   --cre8-border-warning: var(--cre8-warning-400);
   --cre8-color-border-warning: var(--cre8-border-warning);
-  --cre8-border-info: var(--cre8-primary-500);
+  --cre8-border-info: var(--cre8-accent-500);
   --cre8-color-border-info: var(--cre8-border-info);
   --cre8-border-attention: var(--cre8-primary-400);
   --cre8-color-border-attention: var(--cre8-border-attention);