@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/text-passage/text-passage-light-dom.js

@@ -0,0 +1,145 @@
+import { css } from 'lit';
+const styles = css `@import '/design-tokens/core/scss/theming/component';
+
+/**
+ * 1) A passage of text  (e.g. article, blog post), including uncontrolled elements
+ *    (e.g. unclassed h2, h3, ul, li, and so on).
+ * 2) Use this file only for styling text passage and elements inside of text passage.
+ */
+cre8-text-passage,
+cre8-text-passage[size='default'] {
+  @include technology.cre8-typography-body-default();
+
+  /**
+  * Generic h1 within text passage
+  */
+
+  h1 {
+    @include technology.cre8-typography-display-small();
+    margin-bottom: size(1.5);
+  }
+
+  /**
+  * Generic h2 within text passage
+  */
+  h2 {
+    @include technology.cre8-typography-headline-default();
+    margin-bottom: size(1.5);
+  }
+
+  /**
+  * Generic h3 within text passage
+  */
+  h3 {
+    @include technology.cre8-typography-headline-small();
+    margin-bottom: size(1.5);
+  }
+
+  /**
+  * Generic h4 within text passage
+  */
+  h4 {
+    @include technology.cre8-typography-title-large();
+    margin-bottom: size(1.5);
+  }
+
+  /**
+  * Generic h5 within text passage
+  */
+  h5 {
+    @include technology.cre8-typography-meta-large();
+    margin-bottom: size(1.5);
+  }
+
+  /**
+  * Generic unordered and ordered lists within text passage
+  */
+  ul,
+  ol {
+    margin-top: 0;
+  }
+
+  /**
+  * Unordered list within text passage
+  */
+  ul {
+    margin-left: size(2.5);
+    padding-left: 0;
+  }
+
+  /**
+  * Ordered list within text passage
+  */
+  ol {
+    margin-left: size(2.25);
+    padding-left: 0;
+  }
+
+  /**
+  * Generic link tag within text passage
+  */
+  a {
+    color: var(--cre8-color-content-link);
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+      color: var(--cre8-color-content-link-hover);
+    }
+  }
+
+  /**
+  * Paragraph tag within text passage
+  */
+  p {
+    margin-top: 0;
+    margin-bottom: size(3);
+  }
+
+  /**
+  * Blockquote within text passage
+  */
+  blockquote {
+    font-style: italic;
+    border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-content-subtle);
+    color: var(--cre8-color-content-subtle);
+    padding-left: size(2);
+    margin-left: 0;
+    margin-bottom: size(2);
+  }
+
+  /**
+* Last item declared in the text passage
+* 1) Remove default margin bottom from the item
+*/
+  :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/**
+* Inverted text passage
+*/
+cre8-text-passage[inverted] {
+  /**
+  * Blockquote within inverted text passage
+  */
+  a {
+    color: var(--cre8-color-content-brand-knockout);
+    &:hover,
+    &:focus {
+      color: var(--cre8-color-content-brand-knockout-hover);
+    }
+  }
+  blockquote {
+    color: var(--cre8-color-content-knockout);
+    font-style: italic;
+    border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-knockout);
+    padding-left: size(2);
+    margin-left: 0;
+    margin-bottom: size(2);
+  }
+}
+`;
+export default styles;
+//# sourceMappingURL=text-passage-light-dom.js.map

package/lib/components/text-passage/text-passage-light-dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-passage-light-dom.js","sourceRoot":"","sources":["../../../components/text-passage/text-passage-light-dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6IjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@import '/design-tokens/core/scss/theming/component';\n\n/**\n * 1) A passage of text  (e.g. article, blog post), including uncontrolled elements\n *    (e.g. unclassed h2, h3, ul, li, and so on).\n * 2) Use this file only for styling text passage and elements inside of text passage.\n */\ncre8-text-passage,\ncre8-text-passage[size='default'] {\n  @include technology.cre8-typography-body-default();\n\n  /**\n  * Generic h1 within text passage\n  */\n\n  h1 {\n    @include technology.cre8-typography-display-small();\n    margin-bottom: size(1.5);\n  }\n\n  /**\n  * Generic h2 within text passage\n  */\n  h2 {\n    @include technology.cre8-typography-headline-default();\n    margin-bottom: size(1.5);\n  }\n\n  /**\n  * Generic h3 within text passage\n  */\n  h3 {\n    @include technology.cre8-typography-headline-small();\n    margin-bottom: size(1.5);\n  }\n\n  /**\n  * Generic h4 within text passage\n  */\n  h4 {\n    @include technology.cre8-typography-title-large();\n    margin-bottom: size(1.5);\n  }\n\n  /**\n  * Generic h5 within text passage\n  */\n  h5 {\n    @include technology.cre8-typography-meta-large();\n    margin-bottom: size(1.5);\n  }\n\n  /**\n  * Generic unordered and ordered lists within text passage\n  */\n  ul,\n  ol {\n    margin-top: 0;\n  }\n\n  /**\n  * Unordered list within text passage\n  */\n  ul {\n    margin-left: size(2.5);\n    padding-left: 0;\n  }\n\n  /**\n  * Ordered list within text passage\n  */\n  ol {\n    margin-left: size(2.25);\n    padding-left: 0;\n  }\n\n  /**\n  * Generic link tag within text passage\n  */\n  a {\n    color: var(--cre8-color-content-link);\n\n    &:hover,\n    &:focus {\n      text-decoration: underline;\n      color: var(--cre8-color-content-link-hover);\n    }\n  }\n\n  /**\n  * Paragraph tag within text passage\n  */\n  p {\n    margin-top: 0;\n    margin-bottom: size(3);\n  }\n\n  /**\n  * Blockquote within text passage\n  */\n  blockquote {\n    font-style: italic;\n    border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-content-subtle);\n    color: var(--cre8-color-content-subtle);\n    padding-left: size(2);\n    margin-left: 0;\n    margin-bottom: size(2);\n  }\n\n  /**\n* Last item declared in the text passage\n* 1) Remove default margin bottom from the item\n*/\n  :last-child {\n    margin-bottom: 0;\n  }\n}\n\n/**\n* Inverted text passage\n*/\ncre8-text-passage[inverted] {\n  /**\n  * Blockquote within inverted text passage\n  */\n  a {\n    color: var(--cre8-color-content-brand-knockout);\n    &:hover,\n    &:focus {\n      color: var(--cre8-color-content-brand-knockout-hover);\n    }\n  }\n  blockquote {\n    color: var(--cre8-color-content-knockout);\n    font-style: italic;\n    border-left: var(--cre8-border-width-default) var(--cre8-border-style-default) var(--cre8-color-border-knockout);\n    padding-left: size(2);\n    margin-left: 0;\n    margin-bottom: size(2);\n  }\n}\n`;\nexport default styles;\n"]}

package/lib/components/text-passage/text-passage-light-dom.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=text-passage-light-dom.styles.d.ts.map

package/lib/components/text-passage/text-passage-light-dom.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-passage-light-dom.styles.d.ts","sourceRoot":"","sources":["../../../components/text-passage/text-passage-light-dom.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAu0BV,CAAC;AACH,eAAe,MAAM,CAAC"}