@tacc/core-styles 2.33.0 → 2.34.0

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

@@ -0,0 +1,84 @@
+@import url('../tools/x-link.css');
+@import url("../components/c-button.selectors.css");
+
+
+
+@define-mixin message-v1 {
+  font-size: var(--global-font-size--small);
+
+  & :is(a, :--c-button--as-link) {
+    /* To distinguish link from message text */
+    & {
+      @mixin link--irregular;
+    }
+    &:hover {
+      @mixin link--irregular--hover;
+    }
+    &:active {
+      @mixin link--irregular--active;
+    }
+
+    /* To avoid clash of link color with message color */
+    &:is(*, :hover, :active) {
+      color: inherit;
+    }
+  }
+}
+@define-mixin message-v1--scope-inline {
+  &::before {
+    display: none; /* IDEA: Use icons (in v3) */
+  }
+}
+@define-mixin message-v1--scope-section {
+  border-width: var(--global-border-width--thick);
+  border-style: solid;
+
+  padding: 15px 20px;
+}
+@define-mixin message-v1--scope-global {
+  padding: 15px 20px;
+}
+
+/* To match text and border color */
+@define-mixin message-v1--type-info {
+  &:not(:--c-message--scope-global) {
+    color: var(--global-color-info--dark);
+  }
+}
+@define-mixin message-v1--type-success {
+  &:not(:--c-message--scope-global) {
+    color: var(--global-color-success--dark);
+  }
+}
+@define-mixin message-v1--type-warning {
+  &:not(:--c-message--scope-global) {
+    color: var(--global-color-warning--dark);
+  }
+}
+@define-mixin message-v1--type-error {
+  &:not(:--c-message--scope-global) {
+    color: var(--global-color-danger--dark);
+  }
+}
+@define-mixin message-v1--type-extra {
+  &:not(:--c-message--scope-global) {
+    color: var(--global-color-extra--dark);
+  }
+}
+
+/* To match border color to text color */
+@define-mixin message-v1--type-info---message-v1--scope-section {
+  border-color: var(--global-color-info--normal);
+}
+@define-mixin message-v1--type-success---message-v1--scope-section {
+  border-color: var(--global-color-success--normal);
+}
+@define-mixin message-v1--type-warning---message-v1--scope-section {
+  border-color: var(--global-color-warning--normal);
+}
+@define-mixin message-v1--type-error---message-v1--scope-section {
+  border-color: var(--global-color-danger--normal);
+}
+@define-mixin message-v1--type-extra---message-v1--scope-section {
+  border-color: var(--global-color-extra--normal);
+}

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

@@ -10,13 +10,19 @@ Styleguide Tools.Mixins.Overlay
 */
 @design-tokens url('../../tokens/v2.json') format('style-dictionary3');
 
-%x-overlay--curtain {
+@define-mixin overlay--curtain {
   color: inherit;
   background-color: rgb( from design-token('color.gray.medium') r g b / 0.65 );
   backdrop-filter: blur(6px);
 }
+%x-overlay--curtain {
+  @mixin overlay--curtain;
+}
 
-%x-overlay--callout {
+@define-mixin overlay--callout {
   color: inherit;
   background-color: rgb( from design-token('color.gray.medium') r g b / 0.90 );
 }
+%x-overlay--callout {
+  @mixin overlay--curtain;
+}