Component: @phase2/outline-core-styled-text

packages/components/outline-core-styled-text/index.ts

@@ -0,0 +1,21 @@
+/**
+ * @file Exports for the OutlineCoreStyledText component.
+ *
+ * Any export here is then available via the following import,
+ * which should be available in the consuming application:
+ *
+ * @code
+ * import { OutlineCoreStyledText } from '@phase2/outline-core-styled-text';
+ * import { constantOne, constantTwo } from '@phase2/outline-core-styled-text';
+ * import type { ThingType } from '@phase2/outline-core-styled-text';
+ * @endcode
+ *
+ * Any of the above exports can be used in the consuming application
+ * based on the contents of this file, and creativity of what functionality
+ * you wish to expose to the consuming application(s).
+ */
+
+// Export the primary component.
+export { OutlineCoreStyledText } from './src/outline-core-styled-text';
+
+// Export any additional sub-components, variables and methods as required.

packages/components/outline-core-styled-text/packages.json

@@ -0,0 +1,39 @@
+{
+  "name": "@phase2/outline-core-styled-text",
+  "private": true,
+  "version": "0.0.1",
+  "description": "The Outline Components for the styled text component",
+  "keywords": [
+    "outline",
+    "web-components",
+    "design system",
+    "image",
+    "picture"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": ["/dist/", "/src/", "!/dist/tsconfig.build.tsbuildinfo"],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-styled-text"
+  },
+  "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-styled-text",
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "^0.2.5",
+    "lit": "^2.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}

packages/components/outline-core-styled-text/src/.ck.ck-content.global.css

@@ -0,0 +1,64 @@
+/**
+* All CSS selectors/rules in this file will be nested within `.ck.ck-content {` due to the name of this file.
+*
+* This file brings in all the necessary CSS for the WYSIWYG elements and restricts its influence to the `.ck.ck-content` selector.
+* The lightDOM controller accomplishes this by extracting the file name before .global.css and creating a new stylesheet called .ck.ck-content.global.scoped.css,
+* which contains the CSS specifically scoped to that selector.
+*
+* Subsequently, .ck.ck-content.global.scoped.css is imported into /project/design/src/ckeditor5.css, along with the
+* design system tokens, and is then built into the theme. The resulting built file is the one that gets included on pages that have CKEditor.
+*
+* See https://www.drupal.org/node/3259165
+* See https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html#sharing-content-styles-between-frontend-and-backend
+**/
+
+/** Import Tokens.
+* Scope the css variables so they do not conflict with Drupal Admin theme's CSS variables.
+*/
+/* @import '@phase2/outline-core-tokens/dist/tokens.default.css';
+@import '../../../../outline.theme.css';
+
+@import '../outline-core-heading/outline-core-heading.css';
+@import '../outline-core-button/outline-core-button.css';
+@import '../outline-core-cta/outline-core-cta.css';
+@import '../outline-core-cta/outline-core-cta.shared.css';
+@import '../outline-core-link/outline-core-link.css';
+@import '../outline-core-tooltip/outline-core-tooltip.shared.css';*/
+@import './outline-core-styled-text.shared.css';
+
+/**
+ * Reset to :host rules that are set in:
+ * `@import '../outline-core-button/outline-core-button.css';` that affects ckeditor width.
+ * `@import '../outline-core-heading/outline-core-heading.css';` affect font-weight and color.
+ */
+:host {
+  color: var(--outline-core-text-color);
+  display: block;
+  font-weight: unset;
+  width: unset;
+
+  @screen sm {
+    width: unset;
+  }
+}
+
+/* Override for tooltip styles. */
+/* a.sic-tooltip {
+  text-decoration: underline;
+
+  &::after {
+    content: '';
+    display: inline-block;
+    margin-left: calc(var(--spacing-01));
+    margin-bottom: -0.1em;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: var(--sic-link--icon-size, 0.8em);
+    width: var(--sic-link--icon-size, 0.8em);
+    background-image: var(
+      --sic-tooltip--icon,
+      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23004ea8" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>')
+    );
+  }
+} */

packages/components/outline-core-styled-text/src/outline-core-styled-text.css

@@ -0,0 +1,7 @@
+:host {
+  /* Support floats. */
+  display: block;
+  font-family: var(--ff-display);
+  font-weight: inherit;
+  color: var(--sic-text-color);
+}

packages/components/outline-core-styled-text/src/outline-core-styled-text.lightdom.css

@@ -0,0 +1,39 @@
+/* Rendered WYSIWYG content is wrapped in <outline-core-styled-text> on the frontend. */
+/* WYSIWYG content is wrapped in .ck-content for targeting within CKEditor. */
+/* See https://www.drupal.org/node/3259165 */
+
+outline-core-styled-text {
+  /* Support floats. */
+  display: block;
+  font-family: var(--ff-display);
+  font-weight: var(--fw-normal);
+  color: var(--outline-core-text-color);
+
+  @nested-import './outline-core-styled-text.shared.css';
+  @nested-import './outline-core-table.css';
+  @nested-import '../outline-core-cta/outline-core-cta.shared.css';
+  /* @nested-import '../outline-core-tooltip/outline-core-tooltip.shared.css'; */
+
+  /* @screen queries not handled correctly by nested-import, so manually added. */
+  /* Add margin-bottom to top-level ul and ol only. */
+  & > ul,
+  & > ol {
+    margin-bottom: 1.5em;
+    padding-left: var(--spacing-05);
+
+    ul,
+    ol {
+      padding-left: var(--spacing-05);
+
+      @screen sm {
+        padding-left: var(--spacing-06);
+      }
+      @screen md {
+        padding-left: var(--spacing-08);
+      }
+      @screen lg {
+        padding-left: var(--spacing-12);
+      }
+    }
+  }
+}