From cacbe0e9dcae817d7b82c9a6b4b54d6a67a0e02a Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 30 Jan 2024 09:24:41 -0500 Subject: [PATCH 01/21] feat: Roughs out file structure. --- .../docs/outline-core-styled-text.mdx | 0 .../outline-core-styled-text/index.ts | 21 + .../outline-core-styled-text/packages.json | 43 + .../outline-core-styled-text/src/config.ts | 0 .../src/outline-core-styled-text.css | 0 .../src/outline-core-styled-text.ts | 59 + .../sic-styled-text/.ck.ck-content.global.css | 64 + .../.ck.ck-content.global.scoped.css | 2501 +++++++++++++++++ .../src/sic-styled-text/sic-styled-text.css | 7 + .../sic-styled-text.lightdom.css | 39 + .../sic-styled-text.shared.css | 454 +++ .../sic-styled-text.stories.mdx | 702 +++++ .../sic-styled-text.stories.ts | 56 + .../src/sic-styled-text/sic-styled-text.ts | 59 + .../src/sic-styled-text/sic-table.css | 112 + .../tsconfig.build.json | 9 + 16 files changed, 4126 insertions(+) create mode 100644 packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx create mode 100644 packages/components/outline-core-styled-text/index.ts create mode 100644 packages/components/outline-core-styled-text/packages.json create mode 100644 packages/components/outline-core-styled-text/src/config.ts create mode 100644 packages/components/outline-core-styled-text/src/outline-core-styled-text.css create mode 100644 packages/components/outline-core-styled-text/src/outline-core-styled-text.ts create mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.css create mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.scoped.css create mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.css create mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.lightdom.css create mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.shared.css create mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.mdx create mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.ts create mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.ts create mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/sic-table.css create mode 100644 packages/components/outline-core-styled-text/tsconfig.build.json diff --git a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx b/packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/components/outline-core-styled-text/index.ts b/packages/components/outline-core-styled-text/index.ts new file mode 100644 index 000000000..8d3f4050e --- /dev/null +++ b/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. diff --git a/packages/components/outline-core-styled-text/packages.json b/packages/components/outline-core-styled-text/packages.json new file mode 100644 index 000000000..fcaaf1e45 --- /dev/null +++ b/packages/components/outline-core-styled-text/packages.json @@ -0,0 +1,43 @@ +{ + "name": "@phase2/outline-core-styled-text", + "private": true, + "version": "0.0.0", + "description": "The Outline Components for the image 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" + } +} diff --git a/packages/components/outline-core-styled-text/src/config.ts b/packages/components/outline-core-styled-text/src/config.ts new file mode 100644 index 000000000..e69de29bb diff --git a/packages/components/outline-core-styled-text/src/outline-core-styled-text.css b/packages/components/outline-core-styled-text/src/outline-core-styled-text.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts b/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts new file mode 100644 index 000000000..a3a07310f --- /dev/null +++ b/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts @@ -0,0 +1,59 @@ +import { TemplateResult, html, CSSResultGroup } from 'lit'; +import { OutlineElement } from '../../base/outline-element/outline-element'; +import { customElement } from 'lit/decorators.js'; +import { wrapLastWord } from '../../../utilities/wrap-last-word'; +import { tooltipLink } from '../../../utilities/tooltip'; +import { externalLinkText } from '../../../utilities/external-link-text'; +import { checkFileType } from '../../../utilities/check-file-type'; +import componentStyles from './sic-styled-text.css.lit'; + +wrapLastWord; + +/** + * The Sic Styled Text component + * @element sic-styled-text + * @since 1.0.0 + * @slot - default slot + * + * Lightdom styles in sic-styled-text.lightdom.css included in /shared.css + */ +@customElement('sic-styled-text') +export class SicStyledText extends OutlineElement { + static styles: CSSResultGroup = [OutlineElement.styles, componentStyles]; + + connectedCallback(): void { + super.connectedCallback(); + + this.querySelectorAll('a').forEach(el => { + // Check if has target="_blank" before adding last-word span. + checkFileType(el); + if ( + el.getAttribute('target') === '_blank' || + el.classList.contains('sic-cta') + ) { + // Wraps last word in a span.last-word element. + // span.last-word is where the icon is added via pseudo + wrapLastWord(el as HTMLElement); + + // Adds external link text for screen readers. + if (el.classList.contains('is-external-link')) { + externalLinkText(el as HTMLElement); + } + } + // + if (el.classList.contains('sic-tooltip')) { + tooltipLink(el as HTMLElement); + } + }); + } + + render(): TemplateResult { + return html``; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'sic-styled-text': SicStyledText; + } +} diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.css b/packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.css new file mode 100644 index 000000000..0d6c61899 --- /dev/null +++ b/packages/components/outline-core-styled-text/src/sic-styled-text/.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/sic-tokens/dist/tokens.default.css'; +@import '../../../../outline.theme.css'; + +@import '../sic-heading/sic-heading.css'; +@import '../sic-button/sic-button.css'; +@import '../sic-cta/sic-cta.css'; +@import '../sic-cta/sic-cta.shared.css'; +@import '../sic-link/sic-link.css'; +@import '../sic-tooltip/sic-tooltip.shared.css'; +@import './sic-styled-text.shared.css'; + +/** + * Reset to :host rules that are set in: + * `@import '../sic-button/sic-button.css';` that affects ckeditor width. + * `@import '../sic-heading/sic-heading.css';` affect font-weight and color. + */ +:host { + color: var(--sic-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,') + ); + } +} diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.scoped.css b/packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.scoped.css new file mode 100644 index 000000000..15ab172b9 --- /dev/null +++ b/packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.scoped.css @@ -0,0 +1,2501 @@ +@import url('https://fast.fonts.net/t/1.css?apiType=css&projectid=e1f3f95f-cc07-474e-ac5e-8b09c6a23e63'); +.ck.ck-content { + --box-shadow-inner-default-type: innerShadow; + --box-shadow-inner-default-color: #000000; + --box-shadow-inner-default-spread: 0; + --box-shadow-inner-default-blur: 0; + --box-shadow-inner-default-y: 0; + --box-shadow-inner-default-x: 10; + --box-shadow-default-type: dropShadow; + --box-shadow-default-color: #000000; + --box-shadow-default-spread: 0; + --box-shadow-default-blur: 0; + --box-shadow-default-y: 0; + --box-shadow-default-x: 0; + --spacing-base: 16; + --line-height-base: 1em; + --line-height-xl: 1.5em; + --line-height-lg: 1.4em; + --line-height-md: 1.3em; + --line-height-sm: 1.2em; + --line-height-xs: 1.1em; + --breakpoint-xxxl: 2180; + --breakpoint-xxl: 1920; + --breakpoint-xl: 1380; + --breakpoint-lg: 1024; + --breakpoint-md: 768; + --breakpoint-sm: 640; + --breakpoint-xs: 480; + --border-width-none: 0; + --border-width-thicker: 2px; + --border-width-thin: 1px; + --letter-spacing-sm: 0.5 px; + --letter-spacing-none: 0; + --paragraph-spacing-8: 16; + --paragraph-spacing-7: 12; + --paragraph-spacing-6: 10; + --paragraph-spacing-5: 9; + --paragraph-spacing-4: 8; + --paragraph-spacing-3: 7; + --paragraph-spacing-2: 6; + --paragraph-spacing-1: 4; + --paragraph-spacing-0: 0; + --text-decoration-underline: underline; + --text-decoration-none: none; + --text-case-none: none; + --text-case-uppercase: uppercase; + --font-size-base: 16; + --font-weight-bold-italic: Bold Italic; + --font-weight-regular: Regular; + --font-weight-italic: Italic; + --font-weight-bold: Bold; + --font-family-sans: Helvetica Neue; + --border-radius-square-default: 0; + --border-radius-rounded-default: 8; + --color-gray-600: #181a1e; + --color-gray-500: #262b31; + --color-gray-400: #505050; + --color-gray-300: #767676; + --color-gray-200: #c1c1c1; + --color-gray-100: #f2f2f2; + --color-black-500: #050505; + --color-purple-600: #221551; + --color-purple-300: #612f93; + --color-purple-200: #a495e8; + --color-purple-100: #d9d8ea; + --color-green-900: #138604; + --color-green-500: #54b948; + --color-green-400: #a4e08b; + --color-green-200: #d7ffc6; + --color-green-100: #e1f5d8; + --color-teal-900: #02658e; + --color-teal-700: #017caf; + --color-teal-500: #017caf; + --color-teal-400: #75d0f4; + --color-teal-300: #bfecff; + --color-teal-200: #d6f3ff; + --color-teal-100: #e0f6ff; + --color-white-500: #ffffff; + --color-yellow-500: #ffd200; + --color-yellow-400: #ffe06a; + --color-yellow-300: #ffeebd; + --color-yellow-200: #ffeebd; + --color-yellow-100: #fff2cc; + --color-orange-500: #f89728; + --color-orange-400: #ffab4b; + --color-orange-300: #fdbb63; + --color-orange-200: #ffdaa2; + --color-orange-100: #ffefdb; + --color-red-500: #e31937; + --color-red-400: #ef434b; + --color-red-300: #f3797a; + --color-red-100: #fbeff3; + --color-blue-900: #002e64; + --color-blue-700: #004ea8; + --color-blue-600: #0865d1; + --color-blue-500: #6ba7ea; + --color-blue-400: #6cb3f8; + --color-blue-300: #a3c6ff; + --color-blue-200: #e3ecfc; + --color-blue-100: #f0f4ff; + --headline-07-mid-paragraph-spacing: ; + --duration-slowly: 0.4s; + --duration-quickly: 0.1s; + --duration-promptly: 0.2s; + --duration-paused: 3.2s; + --duration-instantly: 0s; + --duration-immediately: 0.05s; + --z-index-toast: 10000; + --z-index-popup: 5000; + --z-index-overlay: 8000; + --z-index-modal: 9000; + --z-index-dropdown: 7000; + --z-index-default: 1; + --z-index-deepdive: -99999; + --spacing-08: var(--spacing-base) * 2; + --spacing-06: var(--spacing-base) * 1.5; + --spacing-05: var(--spacing-base) * 1.25; + --spacing-04: 16; + --spacing-03: var(--spacing-base) * 0.75; + --spacing-02: var(--spacing-base) * 0.5; + --spacing-01: var(--spacing-base) * 0.25; + --spacing-64: var(--spacing-base) * 16; + --spacing-56: var(--spacing-base) * 14; + --spacing-48: var(--spacing-base) * 12; + --spacing-40: var(--spacing-base) * 10; + --spacing-32: var(--spacing-base) * 8; + --spacing-24: var(--spacing-base) * 6; + --spacing-20: var(--spacing-base) * 5; + --spacing-16: var(--spacing-base) * 4; + --spacing-12: var(--spacing-base) * 3; + --spacing-10: var(--spacing-base) * 2.5; + --font-size-lg: var(--font-size-base) * 2.75; + --font-size-6xs: var(--font-size-base) * 0.875; + --font-size-5xs: var(--font-size-base) * 1.125; + --font-size-4xs: var(--font-size-base) * 1.25; + --font-size-3xs: var(--font-size-base) * 1.5; + --font-size-2xs: var(--font-size-base) * 1.75; + --font-size-xs: var(--font-size-base) * 2; + --font-size-sm: var(--font-size-base) * 2.25; + --font-size-md: var(--font-size-base) * 2.5; + --font-size-xl: var(--font-size-base) * 3; + --font-size-2xl: var(--font-size-base) * 3.5; + --font-size-3xl: var(--font-size-base) * 3.625; + --font-size-4xl: var(--font-size-base) * 4; + --font-size-5xl: var(--font-size-base) * 4.5; + --color-system-warning-lightest: var(--color-yellow-100); + --color-system-warning-darkest: var(--color-yellow-500); + --color-system-info-lightest: var(--color-teal-200); + --color-system-info-darkest: var(--color-teal-900); + --color-system-success-lightest: var(--color-green-100); + --color-system-success-darkest: var(--color-green-900); + --color-system-error-lightest: var(--color-red-100); + --color-system-error-darkest: var(--color-red-500); + --color-neutral-darkest: var(--color-black-500); + --color-neutral-darker: var(--color-gray-600); + --color-neutral-dark: var(--color-gray-500); + --color-neutral-white: var(--color-white-500); + --color-neutral-lightest: var(--color-gray-100); + --color-neutral-lighter: var(--color-gray-200); + --color-neutral-light: var(--color-gray-300); + --color-neutral-default: var(--color-gray-400); + --color-tertiary-lightest: var(--color-teal-200); + --color-tertiary-light: var(--color-teal-400); + --color-tertiary-default: var(--color-teal-700); + --color-secondary-lightest: var(--color-purple-100); + --color-secondary-light: var(--color-purple-300); + --color-secondary-default: var(--color-purple-600); + --color-primary-lightest: var(--color-blue-100); + --color-primary-light: var(--color-blue-500); + --color-primary-default: var(--color-blue-700); + --body-helper-min-text-case: var(--text-case-none); + --body-helper-min-text-decoration: var(--text-decoration-none); + --body-helper-min-letter-spacing: 0; + --body-helper-min-line-height: var(--line-height-xl); + --body-helper-min-font-weight: var(--font-weight-regular); + --body-helper-min-font-family: var(--font-family-sans); + --body-helper-max-text-case: var(--text-case-none); + --body-helper-max-text-decoration: var(--text-decoration-none); + --body-helper-max-letter-spacing: var(--letter-spacing-sm); + --body-helper-max-font-size: 16; + --body-helper-max-line-height: var(--line-height-xl); + --body-helper-max-font-weight: var(--font-weight-regular); + --body-helper-max-font-family: var(--font-family-sans); + --body-01-min-font-weight: var(--font-weight-regular); + --body-01-min-text-case: var(--text-case-none); + --body-01-min-text-decoration: var(--text-decoration-none); + --body-01-min-letter-spacing: 0; + --body-01-min-font-size: 16; + --body-01-min-line-height: var(--line-height-xl); + --body-01-min-font-family: var(--font-family-sans); + --body-01-max-font-weight: var(--font-weight-regular); + --body-01-max-text-case: var(--text-case-none); + --body-01-max-text-decoration: var(--text-decoration-none); + --body-01-max-letter-spacing: 0; + --body-01-max-line-height: var(--line-height-xl); + --body-01-max-font-family: var(--font-family-sans); + --body-02-min-font-weight: var(--font-weight-regular); + --body-02-min-text-case: var(--text-case-none); + --body-02-min-text-decoration: var(--text-decoration-none); + --body-02-min-letter-spacing: 0; + --body-02-min-line-height: var(--line-height-xl); + --body-02-min-font-family: var(--font-family-sans); + --body-02-max-font-weight: var(--font-weight-regular); + --body-02-max-text-case: var(--text-case-none); + --body-02-max-text-decoration: var(--text-decoration-none); + --body-02-max-letter-spacing: 0; + --body-02-max-line-height: var(--line-height-xl); + --body-02-max-font-family: var(--font-family-sans); + --body-03-min-font-weight: var(--font-weight-regular); + --body-03-min-text-case: var(--text-case-none); + --body-03-min-text-decoration: var(--text-decoration-none); + --body-03-min-letter-spacing: 0; + --body-03-min-line-height: var(--line-height-xl); + --body-03-min-font-family: var(--font-family-sans); + --body-03-max-font-weight: var(--font-weight-regular); + --body-03-max-text-case: var(--text-case-none); + --body-03-max-text-decoration: var(--text-decoration-none); + --body-03-max-letter-spacing: 0; + --body-03-max-line-height: var(--line-height-lg); + --body-03-max-font-family: var(--font-family-sans); + --body-04-min-text-case: var(--text-case-none); + --body-04-min-text-decoration: var(--text-decoration-none); + --body-04-min-letter-spacing: 0; + --body-04-min-line-height: var(--line-height-xl); + --body-04-min-font-weight: var(--font-weight-regular); + --body-04-min-font-family: var(--font-family-sans); + --body-04-mid-text-case: var(--text-case-none); + --body-04-mid-text-decoration: var(--text-decoration-none); + --body-04-mid-letter-spacing: 0; + --body-04-mid-line-height: var(--line-height-xl); + --body-04-mid-font-weight: var(--font-weight-regular); + --body-04-mid-font-family: var(--font-family-sans); + --body-04-max-text-case: var(--text-case-none); + --body-04-max-text-decoration: var(--text-decoration-none); + --body-04-max-letter-spacing: 0; + --body-04-max-line-height: var(--line-height-xl); + --body-04-max-font-weight: var(--font-weight-regular); + --body-04-max-font-family: var(--font-family-sans); + --headline-eyebrow-min-text-case: var(--text-case-uppercase); + --headline-eyebrow-min-text-decoration: var(--text-decoration-none); + --headline-eyebrow-min-letter-spacing: 0; + --headline-eyebrow-min-line-height: var(--line-height-xl); + --headline-eyebrow-min-font-weight: var(--font-weight-regular); + --headline-eyebrow-min-font-family: var(--font-family-sans); + --headline-eyebrow-max-text-decoration: var(--text-decoration-none); + --headline-eyebrow-max-letter-spacing: var(--letter-spacing-sm); + --headline-eyebrow-max-line-height: var(--line-height-xl); + --headline-eyebrow-max-text-case: var(--text-case-uppercase); + --headline-eyebrow-max-font-weight: var(--font-weight-regular); + --headline-eyebrow-max-font-family: var(--font-family-sans); + --headline-01-min-text-case: var(--text-case-none); + --headline-01-min-text-decoration: var(--text-decoration-none); + --headline-01-min-letter-spacing: 0; + --headline-01-min-line-height: var(--line-height-lg); + --headline-01-min-font-weight: var(--font-weight-bold); + --headline-01-min-font-family: var(--font-family-sans); + --headline-01-mid-text-case: var(--text-case-none); + --headline-01-mid-text-decoration: var(--text-decoration-none); + --headline-01-mid-letter-spacing: 0; + --headline-01-mid-line-height: var(--line-height-lg); + --headline-01-mid-font-weight: var(--font-weight-bold); + --headline-01-mid-font-family: var(--font-family-sans); + --headline-01-max-text-case: var(--text-case-none); + --headline-01-max-text-decoration: var(--text-decoration-none); + --headline-01-max-letter-spacing: 0; + --headline-01-max-line-height: var(--line-height-lg); + --headline-01-max-font-weight: var(--font-weight-bold); + --headline-01-max-font-family: var(--font-family-sans); + --headline-02-min-text-case: var(--text-case-none); + --headline-02-min-text-decoration: var(--text-decoration-none); + --headline-02-min-letter-spacing: 0; + --headline-02-min-line-height: var(--line-height-lg); + --headline-02-min-font-weight: var(--font-weight-bold); + --headline-02-min-font-family: var(--font-family-sans); + --headline-02-mid-text-case: var(--text-case-none); + --headline-02-mid-text-decoration: var(--text-decoration-none); + --headline-02-mid-letter-spacing: 0; + --headline-02-mid-line-height: var(--line-height-lg); + --headline-02-mid-font-weight: var(--font-weight-bold); + --headline-02-mid-font-family: var(--font-family-sans); + --headline-02-max-text-case: var(--text-case-none); + --headline-02-max-text-decoration: var(--text-decoration-none); + --headline-02-max-letter-spacing: 0; + --headline-02-max-line-height: var(--line-height-md); + --headline-02-max-font-weight: var(--font-weight-bold); + --headline-02-max-font-family: var(--font-family-sans); + --headline-03-min-line-height: var(--line-height-lg); + --headline-03-min-font-family: var(--font-family-sans); + --headline-03-mid-line-height: var(--line-height-md); + --headline-03-mid-font-family: var(--font-family-sans); + --headline-03-max-line-height: var(--line-height-sm); + --headline-03-max-font-family: var(--font-family-sans); + --headline-04-min-text-case: var(--text-case-none); + --headline-04-min-text-decoration: var(--text-decoration-none); + --headline-04-min-letter-spacing: 0; + --headline-04-min-line-height: var(--line-height-md); + --headline-04-min-font-weight: var(--font-weight-bold); + --headline-04-min-font-family: var(--font-family-sans); + --headline-04-mid-text-case: var(--text-case-none); + --headline-04-mid-text-decoration: var(--text-decoration-none); + --headline-04-mid-letter-spacing: 0; + --headline-04-mid-line-height: var(--line-height-sm); + --headline-04-mid-font-weight: var(--font-weight-bold); + --headline-04-mid-font-family: var(--font-family-sans); + --headline-04-max-text-case: var(--text-case-none); + --headline-04-max-text-decoration: var(--text-decoration-none); + --headline-04-max-letter-spacing: 0; + --headline-04-max-line-height: var(--line-height-sm); + --headline-04-max-font-weight: var(--font-weight-bold); + --headline-04-max-font-family: var(--font-family-sans); + --headline-05-min-text-case: var(--text-case-none); + --headline-05-min-text-decoration: var(--text-decoration-none); + --headline-05-min-letter-spacing: 0; + --headline-05-min-line-height: var(--line-height-md); + --headline-05-min-font-weight: var(--font-weight-bold); + --headline-05-min-font-family: var(--font-family-sans); + --headline-05-mid-text-case: var(--text-case-none); + --headline-05-mid-text-decoration: var(--text-decoration-none); + --headline-05-mid-letter-spacing: 0; + --headline-05-mid-line-height: var(--line-height-sm); + --headline-05-mid-font-weight: var(--font-weight-bold); + --headline-05-mid-font-family: var(--font-family-sans); + --headline-05-max-text-case: var(--text-case-none); + --headline-05-max-text-decoration: var(--text-decoration-none); + --headline-05-max-letter-spacing: 0; + --headline-05-max-line-height: var(--line-height-xs); + --headline-05-max-font-weight: var(--font-weight-bold); + --headline-05-max-font-family: var(--font-family-sans); + --headline-06-min-text-case: var(--text-case-none); + --headline-06-min-text-decoration: var(--text-decoration-none); + --headline-06-min-letter-spacing: 0; + --headline-06-min-line-height: var(--line-height-sm); + --headline-06-min-font-weight: var(--font-weight-bold); + --headline-06-min-font-family: var(--font-family-sans); + --headline-06-mid-text-case: var(--text-case-none); + --headline-06-mid-text-decoration: var(--text-decoration-none); + --headline-06-mid-letter-spacing: 0; + --headline-06-mid-line-height: var(--line-height-xs); + --headline-06-mid-font-weight: var(--font-weight-bold); + --headline-06-mid-font-family: var(--font-family-sans); + --headline-06-max-text-case: var(--text-case-none); + --headline-06-max-text-decoration: var(--text-decoration-none); + --headline-06-max-letter-spacing: 0; + --headline-06-max-line-height: var(--line-height-xs); + --headline-06-max-font-weight: var(--font-weight-bold); + --headline-06-max-font-family: var(--font-family-sans); + --headline-07-min-text-case: var(--text-case-none); + --headline-07-min-text-decoration: var(--text-decoration-none); + --headline-07-min-letter-spacing: 0; + --headline-07-min-line-height: var(--line-height-sm); + --headline-07-min-font-weight: var(--font-weight-bold); + --headline-07-min-font-family: var(--font-family-sans); + --headline-07-mid-text-case: var(--text-case-none); + --headline-07-mid-text-decoration: var(--text-decoration-none); + --headline-07-mid-letter-spacing: 0; + --headline-07-mid-line-height: var(--line-height-xs); + --headline-07-mid-font-weight: var(--font-weight-bold); + --headline-07-mid-font-family: var(--font-family-sans); + --headline-07-max-text-case: var(--text-case-none); + --headline-07-max-text-decoration: var(--text-decoration-none); + --headline-07-max-letter-spacing: 0; + --headline-07-max-line-height: var(--line-height-xs); + --headline-07-max-font-weight: var(--font-weight-bold); + --headline-07-max-font-family: var(--font-family-sans); + --stroke-none: 0; + --stroke-light: var(--border-width-thin); + --stroke-default: var(--border-width-thicker); + --body-helper-min-font-size: var(--font-size-6xs); + --body-01-max-font-size: var(--font-size-4xs); + --body-02-min-font-size: var(--font-size-5xs); + --body-02-max-font-size: var(--font-size-3xs); + --body-03-min-font-size: var(--font-size-4xs); + --body-03-max-font-size: var(--font-size-2xs); + --body-04-min-font-size: var(--font-size-4xs); + --body-04-mid-font-size: var(--font-size-3xs); + --body-04-max-font-size: var(--font-size-2xs); + --headline-eyebrow-min-font-size: var(--font-size-6xs); + --headline-eyebrow-max-font-size: var(--font-size-5xs); + --headline-01-min-font-size: var(--font-size-5xs); + --headline-01-mid-font-size: var(--font-size-4xs); + --headline-01-max-font-size: var(--font-size-2xs); + --headline-02-min-font-size: var(--font-size-4xs); + --headline-02-mid-font-size: var(--font-size-3xs); + --headline-02-max-font-size: var(--font-size-sm); + --headline-03-min-font-size: var(--font-size-3xs); + --headline-03-mid-font-size: var(--font-size-2xs); + --headline-03-max-font-size: var(--font-size-md); + --headline-04-min-font-size: var(--font-size-2xs); + --headline-04-mid-font-size: var(--font-size-xs); + --headline-04-max-font-size: var(--font-size-xl); + --headline-05-min-font-size: var(--font-size-xs); + --headline-05-mid-font-size: var(--font-size-sm); + --headline-05-max-font-size: var(--font-size-2xl); + --headline-06-min-font-size: var(--font-size-sm); + --headline-06-mid-font-size: var(--font-size-lg); + --headline-06-max-font-size: var(--font-size-4xl); + --headline-07-min-font-size: var(--font-size-md); + --headline-07-mid-font-size: var(--font-size-2xl); + --headline-07-max-font-size: var(--font-size-5xl); +} +@font-face { + font-family: 'Helvetica Neue'; + src: url(assets/fonts/helvetica-neue/3dac71eb-afa7-4c80-97f0-599202772905.woff2) + format('woff2'); +} +@font-face { + font-family: 'Helvetica Neue'; + font-style: italic; + src: url(assets/fonts/helvetica-neue/21c44514-f4d6-4cff-a5de-e4cac5e61aff.woff2) + format('woff2'); +} +@font-face { + font-family: 'Helvetica Neue'; + font-weight: 700; + src: url(assets/fonts/helvetica-neue/531c5a28-5575-4f58-96d4-a80f7b702d7b.woff2) + format('woff2'); +} +.ck.ck-content { + --status-success: var(--color-system-success-darkest); + --status-warning: var(--color-system-warning-darkest); + --status-error: var(--color-system-error-darkest); + --status-info: var(--color-system-info-darkest); + --color-social-facebook: #3b5998; + --color-social-twitter: #1da1f2; + --color-social-instagram: #e1306c; + --color-social-linkedin: #0077b5; + --color-social-youtube: #ff0000; + --color-social-pinterest: #bd081c; + --color-social-tumblr: #35465c; + --color-social-reddit: #ff4500; + --color-social-vimeo: #1ab7ea; + --color-social-whatsapp: #25d366; + --color-social-snapchat: #fffc00; + --color-social-discord: #7289da; + --color-social-medium: #00ab6c; + --color-social-slack: #4a154b; + --color-social-spotify: #1ed760; + --color-social-twitch: #6441a5; + --color-social-vine: #00b488; + --color-social-yahoo: #400191; + --color-social-500px: #02adea; + --color-social-behance: #1769ff; + --color-social-deviantart: #05cc47; + --color-social-dribbble: #ea4c89; + --color-social-flickr: #ff0084; + --color-social-foursquare: #0072b1; + --color-social-github: #333; + --color-social-google: #dd4b39; + --color-social-houzz: #7ac142; + --color-social-lastfm: #c3000d; + --color-social-paypal: #003087; + --color-social-periscope: #3aa1f3; + --outline-phase2-blue: #0080ff; + --outline-karma-coral: #fa5c5c; + --outline-soft-black: #171717; + --outline-not-gray: #cfc7d4; + --outline-misty-teal: #73f2e5; + --outline-electric-violet: #9484ff; + --outline-dusty-blue: #7fc7ee; + --outline-transparent: transparent; + --outline-white: #fff; + --outline-black: #000; + --outline-gray-50: #fafafa; + --outline-gray-100: #f5f5f5; + --outline-gray-200: #e5e5e5; + --outline-gray-300: #d4d4d4; + --outline-gray-400: #a3a3a3; + --outline-gray-500: #737373; + --outline-gray-600: #525252; + --outline-gray-700: #404040; + --outline-gray-800: #262626; + --outline-gray-900: #171717; + --outline-blue-50: #eff6ff; + --outline-blue-100: #dbeafe; + --outline-blue-200: #bfdbfe; + --outline-blue-300: #93c5fd; + --outline-blue-400: #60a5fa; + --outline-blue-500: #3b82f6; + --outline-blue-600: #2563eb; + --outline-blue-700: #1d4ed8; + --outline-blue-800: #1e40af; + --outline-blue-900: #1e3a8a; + --screen-xs: 480px; + --screen-sm: 640px; + --screen-md: 768px; + --screen-lg: 1024px; + --screen-xl: 1380px; + --screen-xxl: 1920px; + --screen-xxxl: 2180px; + --container-mt-normal: var(--spacing-16); + --container-mb-normal: var(--spacing-16); + --container-py-normal: clamp( + 2rem, + 1.032258064516129rem + 4.838709677419355vw, + 5rem + ); + --container-pt-normal: var(--container-py-normal); + --container-pb-normal: var(--container-py-normal); + --container-px-normal: clamp( + var(--spacing-04), + calc(-0.43rem + 7.16vw), + var(--spacing-32) + ); + --container-mt-none: 0; + --container-mb-none: 0; + --container-py-none: 0; + --container-pt-none: 0; + --container-pb-none: 0; + --container-px-none: 0; + --spacing-0: 0px; + --spacing-01: calc(var(--spacing-base) * 0.25); + --spacing-02: calc(var(--spacing-base) * 0.5); + --spacing-03: calc(var(--spacing-base) * 0.75); + --spacing-04: calc(var(--spacing-base)); + --spacing-05: calc(var(--spacing-base) * 1.25); + --spacing-06: calc(var(--spacing-base) * 1.5); + --spacing-08: calc(var(--spacing-base) * 2); + --spacing-10: calc(var(--spacing-base) * 2.5); + --spacing-12: calc(var(--spacing-base) * 3); + --spacing-15: calc(var(--spacing-base) * 3.75); + --spacing-16: calc(var(--spacing-base) * 4); + --spacing-18: calc(var(--spacing-base) * 4.5); + --spacing-20: calc(var(--spacing-base) * 5); + --spacing-24: calc(var(--spacing-base) * 6); + --spacing-32: calc(var(--spacing-base) * 8); + --spacing-40: calc(var(--spacing-base) * 10); + --spacing-48: calc(var(--spacing-base) * 12); + --spacing-56: calc(var(--spacing-base) * 14); + --spacing-64: calc(var(--spacing-base) * 16); + --spacing-px: 1px; + --spacing-1: var(--spacing-01); + --spacing-2: var(--spacing-02); + --spacing-3: var(--spacing-03); + --spacing-4: var(--spacing-04); + --spacing-5: var(--spacing-05); + --spacing-6: var(--spacing-06); + --spacing-8: var(--spacing-08); + --fs-xs: 0.75rem; + --fs-sm: 0.875rem; + --fs-base: 1rem; + --fs-lg: 1.125rem; + --fs-xl: 1.25rem; + --fs-2xl: 1.5rem; + --fs-3xl: 1.875rem; + --fs-4xl: 2.25rem; + --fs-5xl: 3.5rem; + --fs-6xl: 4.5rem; + --fs-7xl: 5.5rem; + --fs-8xl: 6.5rem; + --fs-9xl: 7.5rem; + --lh-xs: 1rem; + --lh-sm: 1.25rem; + --lh-base: 1.5rem; + --lh-lg: 1.75rem; + --lh-xl: 1.75rem; + --lh-2xl: 2rem; + --lh-3xl: 2.25rem; + --lh-4xl: 2.5rem; + --lh-5xl: 3.75rem; + --lh-6xl: 4.75rem; + --lh-7xl: 5.75rem; + --lh-8xl: 6.75rem; + --lh-9xl: 7.75rem; + --ff-display: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; + --ff-body: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; + --ff-demo: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; + --fw-thin: 100; + --fw-extralight: 200; + --fw-light: 300; + --fw-normal: 400; + --fw-medium: 500; + --fw-semibold: 600; + --fw-bold: 700; + --fw-extrabold: 800; + --fw-black: 900; + --fs-h1: 4rem; + --fs-h1-medium: 3rem; + --fs-h1-small: 2.5rem; + --lh-h1: 3rem; + --lh-h1-medium: 3.75rem; + --lh-h1-small: 2rem; + --fs-h2: 2.75rem; + --fs-h2-medium: 2.5rem; + --fs-h2-small: 2rem; + --lh-h2: 3.5rem; + --lh-h2-medium: 3rem; + --lh-h2-small: 2.5rem; + --fs-h3: 2rem; + --fs-h3-medium: 1.75rem; + --fs-h3-small: 1.5rem; + --lh-h3: 2.25rem; + --lh-h3-medium: 2rem; + --lh-h3-small: 1.75rem; + --fs-h4: 1.5rem; + --fs-h4-medium: 1.5rem; + --fs-h4-small: 1.375rem; + --lh-h4: 2rem; + --lh-h4-medium: 1.75rem; + --lh-h4-small: 1.75rem; + --fs-h5: 1.375rem; + --fs-h5-medium: 1.25rem; + --fs-h5-small: 1.125rem; + --lh-h5: 1.75rem; + --lh-h5-medium: 1.5rem; + --lh-h5-small: 1.375rem; + --fs-h6: 1.125rem; + --fs-h6-medium: 1.125rem; + --fs-h6-small: 1rem; + --lh-h6: 1.5rem; + --lh-h6-medium: 1.375rem; + --lh-h6-small: 1.25rem; + --outline-ring-width: 2px; + --outline-ring-inset: ; + --outline-ring-offset-width: 2px; + --outline-ring-offset-color: var(--outline-gray-100); + --outline-ring-color: var(--outline-soft-black); + --outline-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); + --outline-ring-shadow: 0 0 rgba(0, 0, 0, 0); + --outline-ring-offset-shadow: var(--outline-ring-inset) 0 0 0 + var(--outline-ring-offset-width) var(--outline-ring-offset-color); + --outline-ring-shadow: var(--outline-ring-inset) 0 0 0 + calc(var(--outline-ring-width) + var(--outline-ring-offset-width)) + var(--outline-ring-color); + --outline-shadow: 0 0 rgba(0, 0, 0, 0); + --outline-shadow-colored: 0 0 rgba(0, 0, 0, 0); + --outline-admin-links-color-hover: var(--color-primary-default); + --outline-admin-links-bg-hover: var(--color-neutral-white); + --outline-admin-links-bg-active: var(--color-primary-default); + --spacing-base: 1rem; + --font-size-base: 1rem; + --body-01-min-font-size: var(--font-size-base); + --body-helper-max-font-size: var(--font-size-base); + --sic-bg-color: var(--color-neutral-white); + --sic-text-color: var(--color-neutral-default); + --sic-heading-color: var(--color-neutral-dark); + --sic-accent-color: var(--color-primary-default); + --border-radius-rounded-default: 8px; + --border-radius-button-default: 4px; + --border-radius-outline-default: 1px; + --border-width-thickest: 3px; + --grid-gap: var(--spacing-08); + --body-helper-font-size: clamp( + calc(var(--body-helper-min-font-size)), + 0.666rem + 0.52083vw, + calc(var(--body-helper-max-font-size)) + ); + --body-01-font-size: clamp( + calc(var(--body-01-min-font-size)), + 0.7148rem + 0.4464vw, + calc(var(--body-01-max-font-size)) + ); + --body-01-font-size-mid: calc(var(--body-01-min-font-size)); + --body-02-font-size: clamp( + calc(var(--body-02-min-font-size)), + 0.69rem + 0.66vw, + calc(var(--body-02-max-font-size)) + ); + --body-03-font-size: clamp( + calc(var(--body-03-min-font-size)), + 0.82rem + 0.66vw, + calc(var(--body-03-max-font-size)) + ); + --body-04-font-size: clamp( + calc(var(--body-04-min-font-size)), + 1.15rem + 0.5vw, + calc(var(--body-04-max-font-size)) + ); + --body-article-byline: 1.125rem; + --headline-eyebrow-font-size: clamp( + calc(var(--headline-eyebrow-min-font-size)), + 0.589rem + 0.446vw, + calc(var(--headline-eyebrow-max-font-size)) + ); + --headline-01-font-size: clamp( + calc(var(--headline-01-min-font-size)), + 0.41rem + 1.116vw, + calc(var(--headline-01-max-font-size)) + ); + --headline-01-font-size-mid: clamp( + calc(var(--headline-01-min-font-size)), + 0.98rem + 0.223vw, + calc(var(--headline-01-mid-font-size)) + ); + --headline-02-font-size: clamp( + calc(var(--headline-02-min-font-size)), + 0.107rem + 1.785vw, + calc(var(--headline-02-max-font-size)) + ); + --headline-02-font-size-mid: clamp( + calc(var(--headline-02-min-font-size)), + 0.964rem + 0.446vw, + calc(var(--headline-02-mid-font-size)) + ); + --headline-03-font-size: clamp( + calc(var(--headline-03-min-font-size)), + 0.357rem + 1.785vw, + calc(var(--headline-03-max-font-size)) + ); + --headline-04-font-size: clamp( + calc(var(--headline-04-min-font-size)), + 0.321rem + 2.232vw, + calc(var(--headline-04-max-font-size)) + ); + --headline-05-font-size: clamp( + calc(var(--headline-05-min-font-size)), + 0.285rem + 2.678vw, + calc(var(--headline-05-max-font-size)) + ); + --headline-06-font-size: clamp( + calc(var(--headline-06-min-font-size)), + 0.25rem + 3.125vw, + calc(var(--headline-06-max-font-size)) + ); + --headline-07-font-size: clamp( + calc(var(--headline-07-min-font-size)), + 0.21rem + 3.57vw, + calc(var(--headline-07-max-font-size)) + ); + --body-helper-line-height: var(--line-height-xs); + --body-01-line-height: var(--body-01-min-line-height); + --body-02-line-height: var(--body-02-min-line-height); + --body-03-line-height: clamp( + calc(var(--body-03-min-line-height)), + 1.23rem + 1vw, + calc(var(--body-03-max-line-height)) + ); + --body-04-line-height: var(--body-04-min-line-height); + --headline-eyebrow-line-height: var(--headline-eyebrow-min-line-height); + --headline-01-line-height: var(--headline-01-min-line-height); + --headline-02-line-height: clamp( + calc(var(--headline-02-min-line-height)), + 1.1285vw + 1.5178rem, + calc(var(--headline-02-max-line-height)) + ); + --headline-03-line-height: clamp( + calc(var(--headline-03-min-line-height)), + 1.0714vw + 1.6071rem, + calc(var(--headline-03-max-line-height)) + ); + --headline-04-line-height: clamp( + calc(var(--headline-04-min-line-height)), + 0.7607vw + 2.366rem, + calc(var(--headline-04-max-line-height)) + ); + --headline-05-line-height: clamp( + calc(var(--headline-05-min-line-height)), + 1.1714vw + 2.232rem, + calc(var(--headline-05-max-line-height)) + ); + --headline-06-line-height: clamp( + calc(var(--headline-06-min-line-height)), + 0.7571vw + 3.035rem, + calc(var(--headline-06-max-line-height)) + ); + --headline-07-line-height: clamp( + calc(var(--headline-07-min-line-height)), + 0.7714vw + 3.482rem, + calc(var(--headline-07-max-line-height)) + ); +} +.ck.ck-content { + color: #262b31; + color: var(--sic-heading-color); + font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; + font-family: var(--ff-display); + font-weight: 700; + font-weight: var(--fw-bold); + display: block; +} +.ck.ck-content h1, +.ck.ck-content h2, +.ck.ck-content h3, +.ck.ck-content h4, +.ck.ck-content h5, +.ck.ck-content h6 { + margin: 0; +} +.ck.ck-content[level-size], +.ck.ck-content[level-size] h1, +.ck.ck-content[level-size] h2, +.ck.ck-content[level-size] h3, +.ck.ck-content[level-size] h4, +.ck.ck-content[level-size] h5, +.ck.ck-content[level-size] h6 { + font-size: var(--heading-font-size); + line-height: var(--heading-line-height); +} +.ck.ck-content h1, +.ck.ck-content .headline-07 { + font-size: clamp(calc(1rem * 2.5), 0.21rem + 3.57vw, calc(1rem * 4.5)); + font-size: var(--headline-07-font-size); + line-height: clamp(calc(1.2em), 0.7714vw + 3.482rem, calc(1.1em)); + line-height: var(--headline-07-line-height); +} +.ck.ck-content h2, +.ck.ck-content .headline-06 { + font-size: clamp(calc(1rem * 2.25), 0.25rem + 3.125vw, calc(1rem * 4)); + font-size: var(--headline-06-font-size); + line-height: clamp(calc(1.2em), 0.7571vw + 3.035rem, calc(1.1em)); + line-height: var(--headline-06-line-height); +} +.ck.ck-content h3, +.ck.ck-content .headline-05 { + font-size: clamp(calc(1rem * 2), 0.285rem + 2.678vw, calc(1rem * 3.5)); + font-size: var(--headline-05-font-size); + line-height: clamp(calc(1.3em), 1.1714vw + 2.232rem, calc(1.1em)); + line-height: var(--headline-05-line-height); +} +.ck.ck-content h4, +.ck.ck-content .headline-04 { + font-size: clamp(calc(1rem * 1.75), 0.321rem + 2.232vw, calc(1rem * 3)); + font-size: var(--headline-04-font-size); + line-height: clamp(calc(1.3em), 0.7607vw + 2.366rem, calc(1.2em)); + line-height: var(--headline-04-line-height); +} +.ck.ck-content h5, +.ck.ck-content .headline-03 { + font-size: clamp(calc(1rem * 1.5), 0.357rem + 1.785vw, calc(1rem * 2.5)); + font-size: var(--headline-03-font-size); + line-height: clamp(calc(1.4em), 1.0714vw + 1.6071rem, calc(1.2em)); + line-height: var(--headline-03-line-height); +} +.ck.ck-content h6, +.ck.ck-content .headline-02 { + font-size: clamp(calc(1rem * 1.25), 0.107rem + 1.785vw, calc(1rem * 2.25)); + font-size: var(--headline-02-font-size); + line-height: clamp(calc(1.4em), 1.1285vw + 1.5178rem, calc(1.3em)); + line-height: var(--headline-02-line-height); +} +.ck.ck-content .headline-01 { + font-size: clamp(calc(1rem * 1.125), 0.41rem + 1.116vw, calc(1rem * 1.75)); + font-size: var(--headline-01-font-size); + line-height: 1.4em; + line-height: var(--headline-01-line-height); +} +.ck.ck-content[level-style='normal'] { + font-weight: 400; + font-weight: var(--fw-normal); +} +.ck.ck-content { + --sic-button--default--family: var(--ff-body); + --sic-button--default--weight: var(--fw-bold); + --sic-button--default--font-size: clamp( + calc(var(--font-size-6xs)), + 0.7321428571428572rem + 0.2232142857142857vw, + calc(var(--font-size-base)) + ); + --sic-button--default--line-height: 1em; + --sic-button--default--padding: var(--spacing-04) var(--spacing-08); + --sic-button--default--radius: var(--border-radius-button-default); +} +.ck.ck-content { + --sic-button--default--primary-padding: var(--sic-button--default-padding); + --sic-button--default--primary-radius: var(--sic-button--default-radius); + --sic-button--default--primary-bg-color: var(--color-primary-default); + --sic-button--default--primary-text-color: var(--color-neutral-white); + --sic-button--default--primary-weight: var(--sic-button--default-weight); + --sic-button--default--primary-border-color: var(--color-primary-default); + --sic-button--default--primary-border-width: var(--border-width-thickest); + --sic-button--default--primary-bg-color--hover: var(--color-neutral-white); + --sic-button--default--primary-text-color--hover: var( + --color-primary-default + ); + --sic-button--default--primary-bg-color--focus: var(--color-primary-default); + --sic-button--default--primary-text-color--focus: var(--color-neutral-white); + --sic-button--default--primary-outline-color--focus: var( + --color-primary-default + ); + --sic-button--default--primary-outline-width--focus: var( + --border-width-thicker + ); + --sic-button--default--primary-outline-offset--focus: var( + --border-width-thicker + ); + --sic-button--default--primary-bg-color--disabled: var( + --color-neutral-default + ); + --sic-button--default--primary-text-color--disabled: var( + --color-neutral-white + ); + --sic-button--default--primary-border-color--disabled: var( + --color-neutral-default + ); + --sic-button--default--primary-outline-color--disabled: var( + --color-primary-default + ); +} +.ck.ck-content { + display: inline-block; + width: 100%; +} +@media (min-width: 640px) { + .ck.ck-content { + width: auto; + } +} +.ck.ck-content .btn, +.ck.ck-content .sic-btn { + box-sizing: border-box; +} +.ck.ck-content a.btn, +.ck.ck-content a.sic-btn, +.ck.ck-content button.sic-btn, +.ck.ck-content button, +.ck.ck-content input[type='submit'] { + display: flex; + white-space: normal; + justify-content: center; + align-items: center; + width: 100%; + min-height: calc(1rem * 3); + min-height: var(--spacing-12); + cursor: pointer; + font-family: var(--sic-button--default--family); + font-family: var(--sic-button--family, var(--sic-button--default--family)); + font-weight: var(--sic-button--default--weight); + font-weight: var(--sic-button--weight, var(--sic-button--default--weight)); + font-size: var(--sic-button--default--font-size); + font-size: var( + --sic-button--font-size, + var(--sic-button--default--font-size) + ); + text-decoration: none; + line-height: var(--sic-button--default--line-height); + line-height: var( + --sic-button--line-height, + var(--sic-button--default--line-height) + ); + padding: var(--sic-button--default--padding); + padding: var(--sic-button--padding, var(--sic-button--default--padding)); + color: var(--sic-button--default--primary-text-color); + color: var( + --sic-button--text-color, + var(--sic-button--default--primary-text-color) + ); + background-color: var(--sic-button--default--primary-bg-color); + background-color: var( + --sic-button--bg-color, + var(--sic-button--default--primary-bg-color) + ); + border-color: var(--sic-button--default--primary-border-color); + border-color: var( + --sic-button--border-color, + var(--sic-button--default--primary-border-color) + ); + border-style: solid; + border-width: var(--sic-button--default--primary-border-width); + border-width: var( + --sic-button--border-width, + var(--sic-button--default--primary-border-width) + ); + border-radius: var(--sic-button--default--radius); + border-radius: var(--sic-button--radius, var(--sic-button--default--radius)); +} +@media (prefers-reduced-motion: no-preference) { + .ck.ck-content a.btn, + .ck.ck-content a.sic-btn, + .ck.ck-content button.sic-btn, + .ck.ck-content button, + .ck.ck-content input[type='submit'] { + transition: all 0.1s; + transition: all var(--duration-quickly); + } +} +.ck.ck-content a.btn:hover, +.ck.ck-content a.btn:focus-visible, +.ck.ck-content a.sic-btn:hover, +.ck.ck-content a.sic-btn:focus-visible, +.ck.ck-content button.sic-btn:hover, +.ck.ck-content button.sic-btn:focus-visible, +.ck.ck-content button:hover, +.ck.ck-content button:focus-visible, +.ck.ck-content input[type='submit']:hover, +.ck.ck-content input[type='submit']:focus-visible { + color: var(--sic-button--default--primary-text-color--hover); + color: var( + --sic-button--text-color--hover, + var(--sic-button--default--primary-text-color--hover) + ); + background-color: var(--sic-button--default--primary-bg-color--hover); + background-color: var( + --sic-button--bg-color--hover, + var(--sic-button--default--primary-bg-color--hover) + ); +} +.ck.ck-content a.btn:focus-visible, +.ck.ck-content a.sic-btn:focus-visible, +.ck.ck-content button.sic-btn:focus-visible, +.ck.ck-content button:focus-visible, +.ck.ck-content input[type='submit']:focus-visible { + color: var(--sic-button--default--primary-text-color); + color: var( + --sic-button--text-color, + var(--sic-button--default--primary-text-color) + ); + background-color: var(--sic-button--default--primary-bg-color); + background-color: var( + --sic-button--bg-color, + var(--sic-button--default--primary-bg-color) + ); + outline-color: var(--sic-button--default--primary-outline-color--focus); + outline-color: var( + --sic-button--outline-color, + var(--sic-button--default--primary-outline-color--focus) + ); + outline-style: solid; + outline-width: var(--sic-button--default--primary-outline-width--focus); + outline-width: var( + --sic-button--outline-width, + var(--sic-button--default--primary-outline-width--focus) + ); + outline-offset: var(--sic-button--default--primary-outline-offset--focus); + outline-offset: var( + --sic-button--outline-offset, + var(--sic-button--default--primary-outline-offset--focus) + ); +} +@media (min-width: 640px) { + .ck.ck-content a.btn, + .ck.ck-content a.sic-btn, + .ck.ck-content button.sic-btn, + .ck.ck-content button, + .ck.ck-content input[type='submit'] { + width: auto; + display: inline-block; + text-align: center; + } +} +.ck.ck-content a.btn.secondary, +.ck.ck-content a.sic-btn.secondary, +.ck.ck-content button.sic-btn.secondary, +.ck.ck-content button.secondary, +.ck.ck-content input[type='submit'].secondary { + background-color: transparent; + border-color: transparent; + color: var(--sic-button--default--primary-text-color--hover); + color: var( + --sic-button--text-color--hover, + var(--sic-button--default--primary-text-color--hover) + ); + text-decoration: underline; +} +.ck.ck-content a.btn.secondary:hover, +.ck.ck-content a.btn.secondary:focus-visible, +.ck.ck-content a.sic-btn.secondary:hover, +.ck.ck-content a.sic-btn.secondary:focus-visible, +.ck.ck-content button.sic-btn.secondary:hover, +.ck.ck-content button.sic-btn.secondary:focus-visible, +.ck.ck-content button.secondary:hover, +.ck.ck-content button.secondary:focus-visible, +.ck.ck-content input[type='submit'].secondary:hover, +.ck.ck-content input[type='submit'].secondary:focus-visible { + border-color: var(--sic-button--default--primary-border-color); + border-color: var( + --sic-button--border-color, + var(--sic-button--default--primary-border-color) + ); +} +.ck.ck-content a.btn.file-link, +.ck.ck-content a.btn.pdf-link, +.ck.ck-content a.btn.ppt-link, +.ck.ck-content a.sic-btn.file-link, +.ck.ck-content a.sic-btn.pdf-link, +.ck.ck-content a.sic-btn.ppt-link, +.ck.ck-content button.sic-btn.file-link, +.ck.ck-content button.sic-btn.pdf-link, +.ck.ck-content button.sic-btn.ppt-link, +.ck.ck-content button.file-link, +.ck.ck-content button.pdf-link, +.ck.ck-content button.ppt-link, +.ck.ck-content input[type='submit'].file-link, +.ck.ck-content input[type='submit'].pdf-link, +.ck.ck-content input[type='submit'].ppt-link { + flex-wrap: wrap; +} +@media (min-width: 640px) { + .ck.ck-content a.btn.file-link, + .ck.ck-content a.btn.pdf-link, + .ck.ck-content a.btn.ppt-link, + .ck.ck-content a.sic-btn.file-link, + .ck.ck-content a.sic-btn.pdf-link, + .ck.ck-content a.sic-btn.ppt-link, + .ck.ck-content button.sic-btn.file-link, + .ck.ck-content button.sic-btn.pdf-link, + .ck.ck-content button.sic-btn.ppt-link, + .ck.ck-content button.file-link, + .ck.ck-content button.pdf-link, + .ck.ck-content button.ppt-link, + .ck.ck-content input[type='submit'].file-link, + .ck.ck-content input[type='submit'].pdf-link, + .ck.ck-content input[type='submit'].ppt-link { + flex-wrap: nowrap; + } +} +.ck.ck-content a.btn.file-link::before, +.ck.ck-content a.btn.pdf-link::before, +.ck.ck-content a.btn.ppt-link::before, +.ck.ck-content a.sic-btn.file-link::before, +.ck.ck-content a.sic-btn.pdf-link::before, +.ck.ck-content a.sic-btn.ppt-link::before, +.ck.ck-content button.sic-btn.file-link::before, +.ck.ck-content button.sic-btn.pdf-link::before, +.ck.ck-content button.sic-btn.ppt-link::before, +.ck.ck-content button.file-link::before, +.ck.ck-content button.pdf-link::before, +.ck.ck-content button.ppt-link::before, +.ck.ck-content input[type='submit'].file-link::before, +.ck.ck-content input[type='submit'].pdf-link::before, +.ck.ck-content input[type='submit'].ppt-link::before { + content: ''; + background-size: 100% 100%; + display: inline-block; + margin-right: calc(calc(1rem * 0.5)); + margin-right: calc(var(--spacing-02)); + transform: translateY(2px); + height: calc(1rem * 1.25); + height: var(--spacing-05); + width: calc(1rem * 1.25); + width: var(--spacing-05); +} +.ck.ck-content a.btn.pdf-link::before, +.ck.ck-content a.sic-btn.pdf-link::before, +.ck.ck-content button.sic-btn.pdf-link::before, +.ck.ck-content button.pdf-link::before, +.ck.ck-content input[type='submit'].pdf-link::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-button--icon-pdf, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.btn.file-link::before, +.ck.ck-content a.sic-btn.file-link::before, +.ck.ck-content button.sic-btn.file-link::before, +.ck.ck-content button.file-link::before, +.ck.ck-content input[type='submit'].file-link::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-button--icon-file, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.btn.ppt-link::before, +.ck.ck-content a.sic-btn.ppt-link::before, +.ck.ck-content button.sic-btn.ppt-link::before, +.ck.ck-content button.ppt-link::before, +.ck.ck-content input[type='submit'].ppt-link::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-link--icon-ppt, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.btn.pdf-link:hover::before, +.ck.ck-content a.sic-btn.pdf-link:hover::before, +.ck.ck-content button.sic-btn.pdf-link:hover::before, +.ck.ck-content button.pdf-link:hover::before, +.ck.ck-content input[type='submit'].pdf-link:hover::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-button--icon-pdf--hover, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.btn.file-link:hover::before, +.ck.ck-content a.sic-btn.file-link:hover::before, +.ck.ck-content button.sic-btn.file-link:hover::before, +.ck.ck-content button.file-link:hover::before, +.ck.ck-content input[type='submit'].file-link:hover::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-button--icon-file--hover, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.btn.ppt-link:hover::before, +.ck.ck-content a.sic-btn.ppt-link:hover::before, +.ck.ck-content button.sic-btn.ppt-link:hover::before, +.ck.ck-content button.ppt-link:hover::before, +.ck.ck-content input[type='submit'].ppt-link:hover::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-link--icon-ppt--hover, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.btn[target='_blank'] .last-word::after, +.ck.ck-content a.sic-btn[target='_blank'] .last-word::after, +.ck.ck-content button.sic-btn[target='_blank'] .last-word::after, +.ck.ck-content button[target='_blank'] .last-word::after, +.ck.ck-content input[type='submit'][target='_blank'] .last-word::after { + content: ''; + display: inline-block; + margin-left: calc(calc(1rem * 0.75)); + margin-left: calc(var(--spacing-03)); + background-size: contain; + background-position: center; + background-repeat: no-repeat; +} +.ck.ck-content a.btn[target='_blank'] .last-word::after, +.ck.ck-content a.sic-btn[target='_blank'] .last-word::after, +.ck.ck-content button.sic-btn[target='_blank'] .last-word::after, +.ck.ck-content button[target='_blank'] .last-word::after, +.ck.ck-content input[type='submit'][target='_blank'] .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + background-image: var( + --sic-button--icon-external, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") + ); + height: calc(1rem); + height: var(--spacing-04); + width: calc(1rem); + width: var(--spacing-04); + margin-right: 0; +} +.ck.ck-content a.btn[target='_blank']:hover .last-word::after, +.ck.ck-content a.sic-btn[target='_blank']:hover .last-word::after, +.ck.ck-content button.sic-btn[target='_blank']:hover .last-word::after, +.ck.ck-content button[target='_blank']:hover .last-word::after, +.ck.ck-content input[type='submit'][target='_blank']:hover .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + background-image: var( + --sic-button--icon-external--hover, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") + ); +} +.ck.ck-content a.btn .last-word, +.ck.ck-content a.sic-btn .last-word, +.ck.ck-content button.sic-btn .last-word, +.ck.ck-content button .last-word, +.ck.ck-content input[type='submit'] .last-word { + text-decoration: none; + padding-left: 0.5ch; +} +@media (min-width: 640px) { + .ck.ck-content a.btn .last-word, + .ck.ck-content a.sic-btn .last-word, + .ck.ck-content button.sic-btn .last-word, + .ck.ck-content button .last-word, + .ck.ck-content input[type='submit'] .last-word { + padding-left: 0; + } +} +.ck.ck-content button[aria-disabled='true'], +.ck.ck-content .sic-btn[aria-disabled='true'], +.ck.ck-content input[type='submit'][aria-disabled='true'] { + background-color: var(--sic-button--default--primary-bg-color--disabled); + background-color: var( + --sic-button--bg-color--disabled, + var(--sic-button--default--primary-bg-color--disabled) + ); + border-color: var(--sic-button--default--primary-border-color--disabled); + border-color: var( + --sic-button--border-color--disabled, + var(--sic-button--default--primary-border-color--disabled) + ); + color: var(--sic-button--default--primary-text-color--disabled); + color: var( + --sic-button--text-color--disabled, + var(--sic-button--default--primary-text-color--disabled) + ); + pointer-events: none; + cursor: not-allowed; + -webkit-user-select: none; + user-select: none; +} +.ck.ck-content button[aria-disabled='true'] .last-word::after, +.ck.ck-content .sic-btn[aria-disabled='true'] .last-word::after, +.ck.ck-content input[type='submit'][aria-disabled='true'] .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +} +.ck.ck-content button[aria-disabled='true']:hover, +.ck.ck-content button[aria-disabled='true']:focus-visible, +.ck.ck-content .sic-btn[aria-disabled='true']:hover, +.ck.ck-content .sic-btn[aria-disabled='true']:focus-visible, +.ck.ck-content input[type='submit'][aria-disabled='true']:hover, +.ck.ck-content input[type='submit'][aria-disabled='true']:focus-visible { + cursor: not-allowed; + outline-color: var(--sic-button--default--primary-bg-color--disabled); + outline-color: var( + --sic-button--bg-color--disabled, + var(--sic-button--default--primary-bg-color--disabled) + ); +} +.ck.ck-content .sic-bg--primary-default a.sic-btn, +.ck.ck-content .sic-bg--secondary-default a.sic-btn, +.ck.ck-content .sic-bg--secondary-light a.sic-btn, +.ck.ck-content .sic-bg--primary-default button.sic-btn, +.ck.ck-content .sic-bg--secondary-default button.sic-btn, +.ck.ck-content .sic-bg--secondary-light button.sic-btn, +.ck.ck-content .sic-bg--primary-default button, +.ck.ck-content .sic-bg--secondary-default button, +.ck.ck-content .sic-bg--secondary-light button, +.ck.ck-content .sic-bg--primary-default input[type='submit'], +.ck.ck-content .sic-bg--secondary-default input[type='submit'], +.ck.ck-content .sic-bg--secondary-light input[type='submit'] { + --sic-button--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --sic-button--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +} +.ck.ck-content + .sic-bg--primary-default + a.sic-btn[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--secondary-default + a.sic-btn[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--secondary-light + a.sic-btn[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--primary-default + button.sic-btn[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--secondary-default + button.sic-btn[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--secondary-light + button.sic-btn[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--primary-default + button[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--secondary-default + button[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--secondary-light + button[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--primary-default + input[type='submit'][target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--secondary-default + input[type='submit'][target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--secondary-light + input[type='submit'][target='_blank'] + .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + background-image: var( + --sic-button--icon-external, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") + ); +} +.ck.ck-content + .sic-bg--primary-default + a.sic-btn[target='_blank']:hover + .last-word::after, +.ck.ck-content + .sic-bg--secondary-default + a.sic-btn[target='_blank']:hover + .last-word::after, +.ck.ck-content + .sic-bg--secondary-light + a.sic-btn[target='_blank']:hover + .last-word::after, +.ck.ck-content + .sic-bg--primary-default + button.sic-btn[target='_blank']:hover + .last-word::after, +.ck.ck-content + .sic-bg--secondary-default + button.sic-btn[target='_blank']:hover + .last-word::after, +.ck.ck-content + .sic-bg--secondary-light + button.sic-btn[target='_blank']:hover + .last-word::after, +.ck.ck-content + .sic-bg--primary-default + button[target='_blank']:hover + .last-word::after, +.ck.ck-content + .sic-bg--secondary-default + button[target='_blank']:hover + .last-word::after, +.ck.ck-content + .sic-bg--secondary-light + button[target='_blank']:hover + .last-word::after, +.ck.ck-content + .sic-bg--primary-default + input[type='submit'][target='_blank']:hover + .last-word::after, +.ck.ck-content + .sic-bg--secondary-default + input[type='submit'][target='_blank']:hover + .last-word::after, +.ck.ck-content + .sic-bg--secondary-light + input[type='submit'][target='_blank']:hover + .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + background-image: var( + --sic-button--icon-external--hover, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") + ); +} +.ck.ck-content .last-word { + display: inline-flex; + line-height: 1em; + align-items: center; + pointer-events: none; +} +.ck.ck-content { + --sic-cta--default--text-color: var(--color-primary-default); + --sic-cta--default--font-size: var(--body-helper-font-size); + --sic-cta--default--font-size--sm-locked: calc( + var(--body-helper-min-font-size) + ); + --sic-cta--default--font-size--lg: var(--body-01-font-size); + --sic-cta--default--line-height: var(--line-height-xl); + --sic-cta--default--family: var(--ff-body); + --sic-cta--default--weight: var(--fw-bold); + --sic-cta--default--padding: var(--spacing-01) 0; + --sic-cta--default--margin: 0 var(--spacing-01) 0 0; + --sic-cta--default--radius: var(--border-radius-outline-default); + --sic-cta--default--border-color: var(--color-primary-default); + --sic-cta--default--border-width: var(--border-width-thicker); + --sic-cta--file-icon-size: var(--spacing-04); + --sic-cta--default--outline-width--focus: var(--border-width-thicker); + --sic-cta--default--outline-offset--focus: var(--border-width-thicker); + --sic-cta--default--text-color--disabled: var(--color-neutral-light); +} +.ck.ck-content .sic-bg--primary-default a.sic-cta .last-word::after, +.ck.ck-content .sic-bg--secondary-default a.sic-cta .last-word::after, +.ck.ck-content .sic-bg--secondary-light a.sic-cta .last-word::after, +.ck.ck-content .sic-bg--primary-default button.sic-cta .last-word::after, +.ck.ck-content .sic-bg--secondary-default button.sic-cta .last-word::after, +.ck.ck-content .sic-bg--secondary-light button.sic-cta .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); +} +.ck.ck-content .sic-bg--primary-default a.sic-cta.external .last-word::after, +.ck.ck-content + .sic-bg--primary-default + a.sic-cta[target='_blank'] + .last-word::after, +.ck.ck-content .sic-bg--secondary-default a.sic-cta.external .last-word::after, +.ck.ck-content + .sic-bg--secondary-default + a.sic-cta[target='_blank'] + .last-word::after, +.ck.ck-content .sic-bg--secondary-light a.sic-cta.external .last-word::after, +.ck.ck-content + .sic-bg--secondary-light + a.sic-cta[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--primary-default + button.sic-cta.external + .last-word::after, +.ck.ck-content + .sic-bg--primary-default + button.sic-cta[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--secondary-default + button.sic-cta.external + .last-word::after, +.ck.ck-content + .sic-bg--secondary-default + button.sic-cta[target='_blank'] + .last-word::after, +.ck.ck-content + .sic-bg--secondary-light + button.sic-cta.external + .last-word::after, +.ck.ck-content + .sic-bg--secondary-light + button.sic-cta[target='_blank'] + .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +} +.ck.ck-content a.sic-cta, +.ck.ck-content button.sic-cta { + color: var(--sic-cta--default--text-color); + color: var(--sic-cta--text-color, var(--sic-cta--default--text-color)); + font-size: var(--sic-cta--default--font-size); + font-size: var(--sic-cta--font-size, var(--sic-cta--default--font-size)); + font-weight: var(--sic-cta--default--weight); + font-weight: var(--sic-cta--weight, var(--sic-cta--default--weight)); + line-height: var(--sic-cta--default--line-height); + line-height: var( + --sic-cta--line-height, + var(--sic-cta--default--line-height) + ); + text-decoration: none; + padding: var(--sic-cta--default--padding); + padding: var(--sic-cta--padding, var(--sic-cta--default--padding)); + margin: var(--sic-cta--default--margin); + margin: var(--sic-cta--margin, var(--sic-cta--default--margin)); + cursor: pointer; + background-image: linear-gradient( + transparent calc(100% - 2px), + var(--sic-cta--default--text-color) 2px + ); + background-image: linear-gradient( + transparent calc(100% - 2px), + var(--sic-cta--text-color, var(--sic-cta--default--text-color)) 2px + ); + background-repeat: no-repeat; + background-size: 0 100%; + transition: background-size 0.4s; + transition: background-size var(--duration-slowly); + display: inline !important; +} +@media (prefers-reduced-motion: no-preference) { + .ck.ck-content a.sic-cta, + .ck.ck-content button.sic-cta { + transition: all 0.1s; + transition: all var(--duration-quickly); + } +} +.ck.ck-content a.sic-cta:hover, +.ck.ck-content button.sic-cta:hover { + background-size: 100% 100%; +} +.ck.ck-content a.sic-cta:hover, +.ck.ck-content a.sic-cta:focus, +.ck.ck-content button.sic-cta:hover, +.ck.ck-content button.sic-cta:focus { + text-decoration: none; + background-color: transparent; + color: var(--sic-cta--default--text-color); + color: var(--sic-cta--text-color, var(--sic-cta--default--text-color)); +} +.ck.ck-content a.sic-cta:focus, +.ck.ck-content button.sic-cta:focus { + border-radius: var(--sic-cta--default--radius); + border-radius: var(--sic-cta--radius, var(--sic-cta--default--radius)); + outline-color: var(--sic-cta--default--outline-color--focus); + outline-color: var( + --sic-cta--outline-color, + var(--sic-cta--default--outline-color--focus) + ); + outline-style: solid; + outline-width: var(--sic-cta--default--outline-width--focus); + outline-width: var( + --sic-cta--outline-width, + var(--sic-cta--default--outline-width--focus) + ); + outline-offset: var(--sic-cta--default--outline-offset--focus); + outline-offset: var( + --sic-cta--outline-offset, + var(--sic-cta--default--outline-offset--focus) + ); +} +.ck.ck-content a.sic-cta.lg, +.ck.ck-content button.sic-cta.lg { + font-size: var(--sic-cta--default--font-size--lg); + font-size: var( + --sic-cta--font-size--lg, + var(--sic-cta--default--font-size--lg) + ); +} +.ck.ck-content a.sic-cta.sm-locked, +.ck.ck-content button.sic-cta.sm-locked { + font-size: var(--sic-cta--default--font-size--sm-locked); + font-size: var( + --sic-cta--font-size--sm-locked, + var(--sic-cta--default--font-size--sm-locked) + ); +} +.ck.ck-content a.sic-cta.sm-locked .last-word::after, +.ck.ck-content a.sic-cta.sm-locked.icon-default .last-word::after, +.ck.ck-content button.sic-cta.sm-locked .last-word::after, +.ck.ck-content button.sic-cta.sm-locked.icon-default .last-word::after { + height: calc(1rem); + height: var(--spacing-04); + width: calc(1rem); + width: var(--spacing-04); +} +.ck.ck-content a.sic-cta.multi-line, +.ck.ck-content button.sic-cta.multi-line { + display: inline; + white-space: normal; +} +.ck.ck-content a.sic-cta.multi-line::after, +.ck.ck-content button.sic-cta.multi-line::after { + margin-bottom: calc(-1 * calc(1rem * 0.25)); + margin-bottom: calc(-1 * var(--spacing-01)); +} +.ck.ck-content a.sic-cta .last-word, +.ck.ck-content button.sic-cta .last-word { + display: inline-flex; + align-items: center; + text-decoration: none; + pointer-events: none; +} +.ck.ck-content a.sic-cta .last-word::after, +.ck.ck-content button.sic-cta .last-word::after { + content: ''; + display: inline-block; + margin-left: calc(calc(1rem * 0.75)); + margin-left: calc(var(--spacing-03)); + background-size: contain; + background-position: left center; + background-repeat: no-repeat; +} +.ck.ck-content a.sic-cta .last-word sup, +.ck.ck-content button.sic-cta .last-word sup { + top: -0.5em; +} +.ck.ck-content a.sic-cta .last-word sub, +.ck.ck-content button.sic-cta .last-word sub { + top: 0.5em; +} +.ck.ck-content a.sic-cta .last-word::after, +.ck.ck-content a.sic-cta.icon-default .last-word::after, +.ck.ck-content button.sic-cta .last-word::after, +.ck.ck-content button.sic-cta.icon-default .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004EA8' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); + background-image: var( + --sic-cta--icon, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004EA8' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E") + ); + height: calc(1rem * 1.25); + height: var(--spacing-05); + width: calc(1rem * 1.25); + width: var(--spacing-05); +} +@media (prefers-reduced-motion: no-preference) { + .ck.ck-content a.sic-cta .last-word::after, + .ck.ck-content a.sic-cta.icon-default .last-word::after, + .ck.ck-content button.sic-cta .last-word::after, + .ck.ck-content button.sic-cta.icon-default .last-word::after { + transition: all 0.4s; + transition: all var(--duration-slowly); + } +} +.ck.ck-content a.sic-cta.icon-default:hover .last-word::after, +.ck.ck-content a.sic-cta.icon-default:focus .last-word::after, +.ck.ck-content a.sic-cta:hover .last-word::after, +.ck.ck-content a.sic-cta:focus .last-word::after, +.ck.ck-content button.sic-cta.icon-default:hover .last-word::after, +.ck.ck-content button.sic-cta.icon-default:focus .last-word::after, +.ck.ck-content button.sic-cta:hover .last-word::after, +.ck.ck-content button.sic-cta:focus .last-word::after { + transform: translateX(calc(calc(1rem * 0.5))); + transform: translateX(calc(var(--spacing-02))); +} +.ck.ck-content a.sic-cta.file-link::before, +.ck.ck-content a.sic-cta.pdf-link::before, +.ck.ck-content a.sic-cta.ppt-link::before, +.ck.ck-content button.sic-cta.file-link::before, +.ck.ck-content button.sic-cta.pdf-link::before, +.ck.ck-content button.sic-cta.ppt-link::before { + content: ''; + background-size: 100% 100%; + display: inline-block; + margin-right: calc(calc(1rem * 0.5)); + margin-right: calc(var(--spacing-02)); + transform: translateY(2px); + height: calc(1rem * 1.25); + height: var(--spacing-05); + width: calc(1rem * 1.25); + width: var(--spacing-05); +} +.ck.ck-content a.sic-cta.pdf-link::before, +.ck.ck-content button.sic-cta.pdf-link::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-cta--icon-pdf, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.sic-cta.file-link::before, +.ck.ck-content button.sic-cta.file-link::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-cta--icon-file, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.sic-cta.ppt-link::before, +.ck.ck-content button.sic-cta.ppt-link::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-link--icon-ppt, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.sic-cta[target='_blank'] .last-word::after, +.ck.ck-content a.sic-cta.icon-external .last-word::after, +.ck.ck-content button.sic-cta[target='_blank'] .last-word::after, +.ck.ck-content button.sic-cta.icon-external .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + background-image: var( + --sic-cta--icon-external, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") + ); + height: calc(1rem); + height: var(--spacing-04); + width: calc(1rem); + width: var(--spacing-04); + margin-right: 0; + transform: translateX(-2px) translateY(-1px); +} +.ck.ck-content a.sic-cta[target='_blank']:hover .last-word::after, +.ck.ck-content a.sic-cta[target='_blank']:focus .last-word::after, +.ck.ck-content a.sic-cta.icon-external:hover .last-word::after, +.ck.ck-content a.sic-cta.icon-external:focus .last-word::after, +.ck.ck-content button.sic-cta[target='_blank']:hover .last-word::after, +.ck.ck-content button.sic-cta[target='_blank']:focus .last-word::after, +.ck.ck-content button.sic-cta.icon-external:hover .last-word::after, +.ck.ck-content button.sic-cta.icon-external:focus .last-word::after { + transform: translateX(-2px) translateY(-1px); +} +.ck.ck-content a.sic-cta[aria-disabled='true'] { + color: var(--sic-cta--default--text-color--disabled); + color: var( + --sic-cta--text-color--disabled, + var(--sic-cta--default--text-color--disabled) + ); + cursor: not-allowed; + pointer-events: none; + -webkit-user-select: none; + user-select: none; +} +.ck.ck-content a.sic-cta[aria-disabled='true']::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23767676' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); + background-image: var( + --sic-cta--icon, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23767676' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E") + ); +} +.ck.ck-content + a.sic-cta[target='_blank'][aria-disabled='true'] + .last-word::after, +.ck.ck-content a.sic-cta.icon-external[aria-disabled='true'] .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23767676' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + background-image: var( + --sic-cta--icon-external, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23767676' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") + ); +} +.ck.ck-content { + --sic-link--text-color: inherit; + --sic-link--weight: var(--fw-bold); + --sic-link--text-color--hover: var(--color-neutral-white); + --sic-link--bg-color--hover: var(--color-primary-default); + --sic-link--icon-size: 0.8em; +} +.ck.ck-content a { + color: inherit; + color: var(--sic-link--text-color); + font-weight: 700; + font-weight: var(--sic-link--weight); + text-decoration: underline; + cursor: pointer; +} +.ck.ck-content a .last-word { + text-decoration: underline; + display: inline-flex; + pointer-events: none; +} +.ck.ck-content a:hover, +.ck.ck-content a:focus, +.ck.ck-content a:focus-visible { + color: #ffffff; + color: var(--sic-link--text-color--hover); + background-color: #004ea8; + background-color: var(--sic-link--bg-color--hover); +} +.ck.ck-content .social_share_list > a { + border-bottom: 1px solid transparent; + display: inline-flex; + height: 25px; + vertical-align: middle; + font-size: 16px; + padding: 0 4px; + align-items: center; +} +.ck.ck-content .social_share_list > a:hover, +.ck.ck-content .social_share_list > a:focus, +.ck.ck-content .social_share_list > a:focus-visible { + background-color: transparent; + border-bottom-color: #004ea8; + border-bottom-color: var(--sic-link--bg-color--hover); +} +.ck.ck-content a.file-link::before, +.ck.ck-content a.pdf-link::before, +.ck.ck-content a.ppt-link::before { + content: ''; + background-size: 100% 100%; + display: inline-block; + margin-right: calc(calc(1rem * 0.5)); + margin-right: calc(var(--spacing-02)); + transform: translateY(2px); + height: calc(1rem * 1.25); + height: var(--spacing-05); + width: calc(1rem * 1.25); + width: var(--spacing-05); +} +.ck.ck-content a.pdf-link::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-link--icon-pdf, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.file-link::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-link--icon-file, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.ppt-link::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-link--icon-ppt, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.pdf-link:focus::before, +.ck.ck-content a.pdf-link:hover::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-link--icon-pdf--hover, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.file-link:focus::before, +.ck.ck-content a.file-link:hover::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-link--icon-file--hover, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.ppt-link:focus::before, +.ck.ck-content a.ppt-link:hover::before { + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-link--icon-ppt--hover, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a[target='_blank'] .last-word::after { + content: ''; + display: inline-block; + margin-left: calc(calc(1rem * 0.5)); + margin-left: calc(var(--spacing-02)); + background-size: contain; + background-position: center; + background-repeat: no-repeat; +} +.ck.ck-content a[target='_blank'] .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + background-image: var( + --sic-link--icon-external, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") + ); + height: 0.8em; + height: var(--sic-link--icon-size, 0.8em); + width: 0.8em; + width: var(--sic-link--icon-size, 0.8em); + margin-right: 0; +} +.ck.ck-content a[target='_blank']:hover .last-word::after, +.ck.ck-content a[target='_blank']:focus .last-word::after, +.ck.ck-content a[target='_blank']:focus-visible .last-word::after, +.ck.ck-content a[target='_blank']:active .last-word::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + background-image: var( + --sic-link--icon-external--hover, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") + ); +} +.ck.ck-content { + --sic-tooltip--arrow-height: 0.5em; + --sic-tooltip--arrow-color: var(--color-neutral-lighter); +} +.ck.ck-content a.sic-tooltip { + --sic-tooltip--arrow-height: 0.5em; + font-weight: 400; + font-weight: var(--fw-normal); + text-decoration: none; +} +.ck.ck-content a.sic-tooltip .last-word { + font-weight: 400; + font-weight: var(--fw-normal); + text-decoration: none; +} +.ck.ck-content a.sic-tooltip .last-word::after { + content: ''; + display: inline-block; + margin-left: calc(calc(1rem * 0.25)); + margin-left: calc(var(--spacing-01)); + margin-bottom: -0.1em; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + height: 0.8em; + height: var(--sic-link--icon-size, 0.8em); + width: 0.8em; + width: var(--sic-link--icon-size, 0.8em); + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-tooltip--icon, + url('data:image/svg+xml,') + ); +} +.ck.ck-content a.sic-tooltip:hover, +.ck.ck-content a.sic-tooltip:focus { + background-color: transparent; + color: var(--text-color); + cursor: help; +} +.ck.ck-content .sic-tooltip { + position: relative; + display: inline-block; +} +.ck.ck-content [role='tooltip']::before { + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border: 0.5em solid transparent; + border: var(--sic-tooltip--arrow-height) solid transparent; + border-top-color: #c1c1c1; + border-top-color: var(--sic-tooltip--arrow-color); + text-shadow: 0 1px 2px hsl(0, 0%, 0%); +} +.ck.ck-content [role='tooltip']::after { + position: absolute; + right: 0; + top: 100%; + left: 0; + display: block; + height: calc(0.5em * 2); + height: calc(var(--sic-tooltip--arrow-height) * 2); + text-shadow: 0 1px 2px hsl(0, 0%, 0%); +} +.ck.ck-content .sic-tooltip.tooltip-visible [role='tooltip']::before, +.ck.ck-content .sic-tooltip.tooltip-visible [role='tooltip']::after { + content: ''; +} +.ck.ck-content .sic-tooltip.bottom [role='tooltip']::before, +.ck.ck-content .sic-tooltip.bottom [role='tooltip']::after, +.ck.ck-content .sic-tooltip.bottom [role='tooltip'] { + top: unset; + bottom: 100%; +} +.ck.ck-content .sic-tooltip.bottom [role='tooltip']::before { + border-bottom-color: #c1c1c1; + border-bottom-color: var(--sic-tooltip--arrow-color); + border-top-color: transparent; +} +.ck.ck-content .sic-tooltip.top [role='tooltip'] { + bottom: calc(100% + calc(0.5em)); + bottom: calc(100% + calc(var(--sic-tooltip--arrow-height))); +} +.ck.ck-content .sic-tooltip.bottom [role='tooltip'] { + top: calc(100% + calc(0.5em)); + top: calc(100% + calc(var(--sic-tooltip--arrow-height))); + bottom: unset; +} +.ck.ck-content [role='tooltip'] { + position: absolute; + bottom: calc(100% + calc(0.5em)); + bottom: calc(100% + calc(var(--sic-tooltip--arrow-height))); + left: 50%; + transform: translateX(-50%); + margin: 0; + padding: calc(1rem) calc(1rem * 2); + padding: var(--spacing-04) var(--spacing-08); + border-radius: 8px; + border-radius: var(--border-radius-rounded-default); + color: #505050; + color: var(--color-neutral-default); + background: #ffffff; + background: var(--color-neutral-white); + width: max-content; + max-width: 65vw; + box-shadow: 0 1px 2px hsl(0, 0%, 0%); + z-index: 5000; + z-index: var(--z-index-popup); +} +.ck.ck-content .hidden { + display: none; +} +.ck.ck-content [aria-hidden='true'] { + pointer-events: none; +} +.ck.ck-content p { + display: block; + font-size: var(--body-01-font-size); + font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); + line-height: var(--body-01-line-height); + line-height: var(--sic-body-text--line-height, var(--body-01-line-height)); + margin-bottom: 1em; + margin-bottom: var(--sic-body-text--margin-bottom, 1em); + font-weight: 400; + font-weight: var(--fw-normal); +} +.ck.ck-content p:last-child { + margin-bottom: 0; +} +.ck.ck-content h1, +.ck.ck-content h2, +.ck.ck-content h3, +.ck.ck-content h4, +.ck.ck-content h5, +.ck.ck-content h6, +.ck.ck-content .headline-07, +.ck.ck-content .headline-06, +.ck.ck-content .headline-05, +.ck.ck-content .headline-04, +.ck.ck-content .headline-03, +.ck.ck-content .headline-02, +.ck.ck-content .headline-01 { + color: #262b31; + color: var(--sic-heading-color); + font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; + font-family: var(--ff-display); + font-weight: 700; + font-weight: var(--fw-bold); + display: block; + margin-bottom: calc(1rem); + margin-bottom: var(--spacing-04); +} +.ck.ck-content h1, +.ck.ck-content .headline-07 { + font-size: clamp(calc(1rem * 2.5), 0.21rem + 3.57vw, calc(1rem * 4.5)); + font-size: var(--headline-07-font-size); + line-height: clamp(calc(1.2em), 0.7714vw + 3.482rem, calc(1.1em)); + line-height: var(--headline-07-line-height); +} +.ck.ck-content h2 { + font-size: clamp(calc(1rem * 2), 0.285rem + 2.678vw, calc(1rem * 3.5)); + font-size: var(--headline-05-font-size); + line-height: clamp(calc(1.3em), 1.1714vw + 2.232rem, calc(1.1em)); + line-height: var(--headline-05-line-height); +} +.ck.ck-content h3 { + font-size: clamp(calc(1rem * 1.75), 0.321rem + 2.232vw, calc(1rem * 3)); + font-size: var(--headline-04-font-size); + line-height: clamp(calc(1.3em), 0.7607vw + 2.366rem, calc(1.2em)); + line-height: var(--headline-04-line-height); +} +.ck.ck-content h4 { + font-size: clamp(calc(1rem * 1.5), 0.357rem + 1.785vw, calc(1rem * 2.5)); + font-size: var(--headline-03-font-size); + line-height: clamp(calc(1.4em), 1.0714vw + 1.6071rem, calc(1.2em)); + line-height: var(--headline-03-line-height); +} +.ck.ck-content h5 { + font-size: clamp(calc(1rem * 1.25), 0.107rem + 1.785vw, calc(1rem * 2.25)); + font-size: var(--headline-02-font-size); + line-height: clamp(calc(1.4em), 1.1285vw + 1.5178rem, calc(1.3em)); + line-height: var(--headline-02-line-height); +} +.ck.ck-content h6 { + font-size: clamp(calc(1rem * 1.125), 0.41rem + 1.116vw, calc(1rem * 1.75)); + font-size: var(--headline-01-font-size); + line-height: 1.4em; + line-height: var(--headline-01-line-height); +} +.ck.ck-content .headline-06 { + font-size: clamp(calc(1rem * 2.25), 0.25rem + 3.125vw, calc(1rem * 4)); + font-size: var(--headline-06-font-size); + line-height: clamp(calc(1.2em), 0.7571vw + 3.035rem, calc(1.1em)); + line-height: var(--headline-06-line-height); +} +.ck.ck-content .headline-05 { + font-size: clamp(calc(1rem * 2), 0.285rem + 2.678vw, calc(1rem * 3.5)); + font-size: var(--headline-05-font-size); + line-height: clamp(calc(1.3em), 1.1714vw + 2.232rem, calc(1.1em)); + line-height: var(--headline-05-line-height); +} +.ck.ck-content .headline-04 { + font-size: clamp(calc(1rem * 1.75), 0.321rem + 2.232vw, calc(1rem * 3)); + font-size: var(--headline-04-font-size); + line-height: clamp(calc(1.3em), 0.7607vw + 2.366rem, calc(1.2em)); + line-height: var(--headline-04-line-height); +} +.ck.ck-content .headline-03 { + font-size: clamp(calc(1rem * 1.5), 0.357rem + 1.785vw, calc(1rem * 2.5)); + font-size: var(--headline-03-font-size); + line-height: clamp(calc(1.4em), 1.0714vw + 1.6071rem, calc(1.2em)); + line-height: var(--headline-03-line-height); +} +.ck.ck-content .headline-02 { + font-size: clamp(calc(1rem * 1.25), 0.107rem + 1.785vw, calc(1rem * 2.25)); + font-size: var(--headline-02-font-size); + line-height: clamp(calc(1.4em), 1.1285vw + 1.5178rem, calc(1.3em)); + line-height: var(--headline-02-line-height); +} +.ck.ck-content .headline-01 { + font-size: clamp(calc(1rem * 1.125), 0.41rem + 1.116vw, calc(1rem * 1.75)); + font-size: var(--headline-01-font-size); + line-height: 1.4em; + line-height: var(--headline-01-line-height); +} +.ck.ck-content p + h1, +.ck.ck-content p + h2, +.ck.ck-content p + h3, +.ck.ck-content p + h4, +.ck.ck-content p + .headline-07, +.ck.ck-content p + .headline-06, +.ck.ck-content p + .headline-05, +.ck.ck-content p + .headline-04 { + margin-top: calc(1rem * 2.5); + margin-top: var(--spacing-10); +} +.ck.ck-content p + h5, +.ck.ck-content p + h6, +.ck.ck-content p + .headline-01, +.ck.ck-content p + .headline-02, +.ck.ck-content p + .headline-03 { + margin-top: calc(1rem * 2); + margin-top: var(--spacing-8); +} +.ck.ck-content ul { + list-style-type: disc; + padding-left: calc(1rem); + padding-left: var(--spacing-04); +} +.ck.ck-content ul li { + list-style-type: disc; +} +.ck.ck-content ul li ul li { + list-style-type: circle; +} +.ck.ck-content ul li ul li ul li { + list-style-type: square; +} +.ck.ck-content ul li ul li ul li ul li { + list-style-type: disc; +} +.ck.ck-content ol { + list-style-type: decimal; + padding-left: calc(1rem); + padding-left: var(--spacing-04); + margin-bottom: calc(1rem * 0.5); + margin-bottom: var(--spacing-02); +} +.ck.ck-content ol li { + list-style-type: decimal; +} +.ck.ck-content ol li ol li { + list-style-type: lower-alpha; +} +.ck.ck-content ol li ol li ol li { + list-style-type: lower-roman; +} +.ck.ck-content ol li ol li ol li ol li { + list-style-type: decimal; +} +.ck.ck-content ol li::marker { + color: #505050; + color: var(--sic-text-color); +} +.ck.ck-content & > ul, +.ck.ck-content & > ol { + margin-bottom: 1.5em; + padding-left: calc(1rem * 1.25); + padding-left: var(--spacing-05); +} +.ck.ck-content li { + list-style-position: outside; + padding-left: 0.5em; + margin-top: 0.5em; + margin-bottom: calc(1rem * 0.5); + margin-bottom: var(--spacing-02); + font-size: var(--body-01-font-size); + font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); +} +.ck.ck-content li::marker { + color: #004ea8; + color: var(--sic-accent-color); + font-size: 1.25rem; + font-size: var(--fs-xl); +} +.ck.ck-content blockquote { + display: flex; + gap: calc(1rem * 1.25); + gap: var(--spacing-05); + margin-top: 1em; + margin-bottom: 1em; +} +.ck.ck-content blockquote p { + font-size: clamp(calc(1rem * 1.25), 0.82rem + 0.66vw, calc(1rem * 1.75)); + font-size: var(--body-03-font-size); + margin-bottom: 0; +} +.ck.ck-content blockquote { + font-weight: bold; +} +.ck.ck-content blockquote sic-icon { + color: #6ba7ea; + color: var(--color-primary-light); +} +.ck.ck-content hr { + border-color: #004ea8; + border-color: var(--sic-accent-color); + margin-top: 2em; + margin-bottom: 2em; +} +.ck.ck-content figcaption { + font-size: var(--body-01-font-size); + font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); + color: #505050; + color: var(--sic-text-color); + text-align: center; +} +.ck.ck-content em { + font-style: italic; +} +.ck.ck-content sup { + vertical-align: super; + font-size: 60%; + top: 0; +} +.ck.ck-content sub { + vertical-align: sub; + font-size: 60%; + bottom: 0; +} +.ck.ck-content strong { + font-weight: 700; +} +.ck.ck-content table { + margin-bottom: calc(1rem); + margin-bottom: var(--spacing-04); +} +.ck.ck-content .article-byline { + font-size: 1.125rem; + font-size: var(--body-article-byline, var(--fs-lg)); +} +.ck.ck-content .disclaimer { + --sic-link--text-color--hover: var(--color-neutral-white); + --sic-link--bg-color--hover: var(--sic-text-color); + --sic-cta--text-color: var(--sic-text-color); + --sic-cta--text-color--hover: var(--color-neutral-white); + --sic-cta--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); + --sic-cta--icon--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); + --sic-cta--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --sic-cta--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --sic-button--bg-color: var(--sic-text-color); + --sic-button--text-color: var(--color-neutral-white); + --sic-button--border-color: var(--sic-text-color); + --sic-button--bg-color--hover: transparent; + --sic-button--text-color--hover: var(--sic-text-color); + --sic-button--border-color--hover: var(--sic-text-color); + --sic-button--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --sic-button--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + font-size: calc(1rem * 0.875); + font-size: calc(var(--body-helper-min-font-size)); + line-height: calc(1.5em); + line-height: calc(var(--body-helper-min-line-height)); + display: block; + margin-bottom: 1em; +} +.ck.ck-content .disclaimer:last-child { + margin-bottom: 0; +} +.ck.ck-content .disclaimer a { + font-weight: 700; + font-weight: var(--fw-bold); + text-decoration: underline; +} +.ck.ck-content .disclaimer a:hover, +.ck.ck-content .disclaimer a:focus, +.ck.ck-content .disclaimer a:focus-visible { + color: var(--sic-link--text-color--hover); + color: var( + --sic-disclaimer-link--text-color--hover, + var(--sic-link--text-color--hover) + ); + background-color: var(--sic-link--bg-color--hover); + background-color: var( + --sic-disclaimer-link--bg-color--hover, + var(--sic-link--bg-color--hover) + ); +} +.ck.ck-content .disclaimer a.sic-cta { + font-size: inherit; + color: var(--sic-cta--text-color); + color: var(--sic-disclaimer-cta--text-color, var(--sic-cta--text-color)); + text-decoration: underline; +} +.ck.ck-content .disclaimer a.sic-cta .last-word { + text-decoration: underline; +} +.ck.ck-content .disclaimer a.sic-cta .last-word::after { + background-image: var(--sic-cta--icon); + background-image: var(--sic-disclaimer-cta--icon, var(--sic-cta--icon)); + height: calc(1rem * 0.75); + height: var(--spacing-03); + width: calc(1rem * 0.75); + width: var(--spacing-03); + margin-left: calc(calc(1rem * 0.5)); + margin-left: calc(var(--spacing-02)); +} +.ck.ck-content .disclaimer a.sic-cta:hover, +.ck.ck-content .disclaimer a.sic-cta:focus-visible, +.ck.ck-content .disclaimer a.sic-cta:focus { + background-color: #505050; + background-color: var(--sic-text-color); + background-image: none; + color: var(--sic-cta--text-color--hover); + color: var( + --sic-disclaimer-cta--text-color--hover, + var(--sic-cta--text-color--hover) + ); + text-decoration: underline; +} +.ck.ck-content .disclaimer a.sic-cta:hover .last-word, +.ck.ck-content .disclaimer a.sic-cta:focus-visible .last-word, +.ck.ck-content .disclaimer a.sic-cta:focus .last-word { + text-decoration: underline; +} +.ck.ck-content .disclaimer a.sic-cta:hover .last-word::after, +.ck.ck-content .disclaimer a.sic-cta:focus-visible .last-word::after, +.ck.ck-content .disclaimer a.sic-cta:focus .last-word::after { + background-image: var(--sic-cta--icon--hover); + background-image: var( + --sic-disclaimer-cta--icon--hover, + var(--sic-cta--icon--hover) + ); + transform: translateX(calc(calc(1rem * 0.25))); + transform: translateX(calc(var(--spacing-01))); +} +.ck.ck-content .disclaimer a.sic-cta.icon-external .last-word::after, +.ck.ck-content .disclaimer a.sic-cta[target='_blank'] .last-word::after { + background-image: var(--sic-cta--icon-external); + background-image: var( + --sic-disclaimer-cta--icon-external, + var(--sic-cta--icon-external) + ); + height: calc(1rem * 0.75); + height: var(--spacing-03); + width: calc(1rem * 0.75); + width: var(--spacing-03); +} +.ck.ck-content .disclaimer a.sic-cta.icon-external:hover .last-word::after, +.ck.ck-content + .disclaimer + a.sic-cta.icon-external:focus-visible + .last-word::after, +.ck.ck-content .disclaimer a.sic-cta.icon-external:focus .last-word::after, +.ck.ck-content .disclaimer a.sic-cta[target='_blank']:hover .last-word::after, +.ck.ck-content + .disclaimer + a.sic-cta[target='_blank']:focus-visible + .last-word::after, +.ck.ck-content .disclaimer a.sic-cta[target='_blank']:focus .last-word::after { + background-image: var(--sic-cta--icon-external--hover); + background-image: var( + --sic-disclaimer-cta--icon-external--hover, + var(--sic-cta--icon-external--hover) + ); + transform: translateX(-2px) translateY(-1px); +} +.ck.ck-content .disclaimer a.btn { + font-size: inherit; + color: var(--sic-button--text-color); + color: var( + --sic-disclaimer-button--text-color, + var(--sic-button--text-color) + ); + padding: calc(1rem * 0.5) calc(1rem); + padding: var(--spacing-02) var(--spacing-04); + min-height: 0; + text-decoration: none; +} +.ck.ck-content .disclaimer a.btn:hover { + color: var(--sic-button--text-color--hover); + color: var( + --sic-disclaimer-button--text-color--hover, + var(--sic-button--text-color--hover) + ); + background-color: var(--sic-button--bg-color--hover); + background-color: var( + --sic-disclaimer-button--bg-color--hover, + var(--sic-button--bg-color--hover) + ); + border-color: var(--sic-button--border-color--hover); + border-color: var( + --sic-disclaimer-button--border-color--hover, + var(--sic-button--border-color--hover) + ); +} +.ck.ck-content .disclaimer a.btn.icon-external .last-word::after, +.ck.ck-content .disclaimer a.btn[target='_blank'] .last-word::after { + background-image: var(--sic-button--icon-external); + background-image: var( + --sic-disclaimer-button--icon-external, + var(--sic-button--icon-external) + ); + height: calc(1rem * 0.75); + height: var(--spacing-03); + width: calc(1rem * 0.75); + width: var(--spacing-03); + margin-left: calc(calc(1rem * 0.5)); + margin-left: calc(var(--spacing-02)); +} +.ck.ck-content .disclaimer a.btn.icon-external:hover .last-word::after, +.ck.ck-content .disclaimer a.btn[target='_blank']:hover .last-word::after { + background-image: var(--sic-button--icon-external--hover); + background-image: var( + --sic-disclaimer-button--icon-external--hover, + var(--sic-button--icon-external--hover) + ); +} +.ck.ck-content .disclaimer li { + font-size: calc(1rem * 0.875); + font-size: calc(var(--body-helper-min-font-size)); + line-height: calc(1.5em); + line-height: calc(var(--body-helper-min-line-height)); + margin-top: calc(1rem * 0.25); + margin-top: var(--spacing-01); + margin-bottom: calc(1rem * 0.25); + margin-bottom: var(--spacing-01); +} +.ck.ck-content .disclaimer li::marker { + color: #505050; + color: var(--sic-text-color); +} +.ck.ck-content ul.disclaimer li::marker { + font-size: 10px; +} +.ck.ck-content ol.disclaimer li::marker { + font-size: 0.9em; +} +.ck.ck-content a.sic-cta { + white-space: initial; +} +.ck.ck-content a[name], +.ck.ck-content a:not([href]) { + color: inherit; + cursor: text; + text-decoration: none; + font-weight: inherit; + font-size: inherit; +} +.ck.ck-content a[name]:hover, +.ck.ck-content a[name]:focus, +.ck.ck-content a[name]:focus-visible, +.ck.ck-content a:not([href]):hover, +.ck.ck-content a:not([href]):focus, +.ck.ck-content a:not([href]):focus-visible { + color: #505050; + color: var(--sic-text-color); + background-color: transparent; +} +.ck.ck-content .clear-left { + clear: left; +} +.ck.ck-content .clear-right { + clear: right; +} +.ck.ck-content .clear-both { + clear: both; +} +.ck.ck-content { + color: #505050; + color: var(--sic-text-color); + display: block; + font-weight: unset; + width: unset; +} +@media (min-width: 640px) { + .ck.ck-content { + width: unset; + } +} +.ck.ck-content a.sic-tooltip { + text-decoration: underline; +} +.ck.ck-content a.sic-tooltip::after { + content: ''; + display: inline-block; + margin-left: calc(calc(1rem * 0.25)); + margin-left: calc(var(--spacing-01)); + margin-bottom: -0.1em; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + height: 0.8em; + height: var(--sic-link--icon-size, 0.8em); + width: 0.8em; + width: var(--sic-link--icon-size, 0.8em); + background-image: url('data:image/svg+xml,'); + background-image: var( + --sic-tooltip--icon, + url('data:image/svg+xml,') + ); +} diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.css b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.css new file mode 100644 index 000000000..dbc9e24d8 --- /dev/null +++ b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-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); +} diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.lightdom.css b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.lightdom.css new file mode 100644 index 000000000..fbf26216f --- /dev/null +++ b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.lightdom.css @@ -0,0 +1,39 @@ +/* Rendered WYSIWYG content is wrapped in on the frontend. */ +/* WYSIWYG content is wrapped in .ck-content for targeting within CKEditor. */ +/* See https://www.drupal.org/node/3259165 */ + +sic-styled-text { + /* Support floats. */ + display: block; + font-family: var(--ff-display); + font-weight: var(--fw-normal); + color: var(--sic-text-color); + + @nested-import './sic-styled-text.shared.css'; + @nested-import './sic-table.css'; + @nested-import '../sic-cta/sic-cta.shared.css'; + @nested-import '../sic-tooltip/sic-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); + } + } + } +} diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.shared.css b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.shared.css new file mode 100644 index 000000000..2b57f27c6 --- /dev/null +++ b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.shared.css @@ -0,0 +1,454 @@ +/* Rendered WYSIWYG content is wrapped in on the frontend. */ +/* WYSIWYG content is wrapped in .ck-content for targeting within CKEditor. */ +/* See https://www.drupal.org/node/3259165 */ + +p { + display: block; + font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); + line-height: var(--sic-body-text--line-height, var(--body-01-line-height)); + margin-bottom: var(--sic-body-text--margin-bottom, 1em); + font-weight: var(--fw-normal); + + &:last-child { + margin-bottom: 0; + } +} + +h1, +h2, +h3, +h4, +h5, +h6, +.headline-07, +.headline-06, +.headline-05, +.headline-04, +.headline-03, +.headline-02, +.headline-01 { + color: var(--sic-heading-color); + font-family: var(--ff-display); + font-weight: var(--fw-bold); + display: block; + margin-bottom: var(--spacing-04); +} + +h1, +.headline-07 { + font-size: var(--headline-07-font-size); + line-height: var(--headline-07-line-height); +} + +h2 { + font-size: var(--headline-05-font-size); + line-height: var(--headline-05-line-height); +} + +h3 { + font-size: var(--headline-04-font-size); + line-height: var(--headline-04-line-height); +} + +h4 { + font-size: var(--headline-03-font-size); + line-height: var(--headline-03-line-height); +} + +h5 { + font-size: var(--headline-02-font-size); + line-height: var(--headline-02-line-height); +} + +h6 { + font-size: var(--headline-01-font-size); + line-height: var(--headline-01-line-height); +} + +.headline-06 { + font-size: var(--headline-06-font-size); + line-height: var(--headline-06-line-height); +} + +.headline-05 { + font-size: var(--headline-05-font-size); + line-height: var(--headline-05-line-height); +} + +.headline-04 { + font-size: var(--headline-04-font-size); + line-height: var(--headline-04-line-height); +} + +.headline-03 { + font-size: var(--headline-03-font-size); + line-height: var(--headline-03-line-height); +} + +.headline-02 { + font-size: var(--headline-02-font-size); + line-height: var(--headline-02-line-height); +} + +.headline-01 { + font-size: var(--headline-01-font-size); + line-height: var(--headline-01-line-height); +} + +/* Add extra spacing between paragraphs and + * headings using the sibling selector. +*/ +p { + + h1, + + h2, + + h3, + + h4, + + .headline-07, + + .headline-06, + + .headline-05, + + .headline-04 { + margin-top: var(--spacing-10); + } + + + h5, + + h6, + + .headline-01, + + .headline-02, + + .headline-03 { + margin-top: var(--spacing-8); + } +} + +ul { + list-style-type: disc; + padding-left: var(--spacing-04); + li { + list-style-type: disc; + ul li { + list-style-type: circle; + ul li { + list-style-type: square; + ul li { + list-style-type: disc; + } + } + } + } +} + +ol { + list-style-type: decimal; + padding-left: var(--spacing-04); + margin-bottom: var(--spacing-02); + li { + list-style-type: decimal; + ol li { + list-style-type: lower-alpha; + ol li { + list-style-type: lower-roman; + ol li { + list-style-type: decimal; + } + } + } + } +} + +ol { + li::marker { + color: var(--sic-text-color); + } +} + +/* Add margin-bottom to top-level ul and ol only */ +/* Media queries are applied in sic-styled-text.lightdom.css */ +& > ul, +& > ol { + margin-bottom: 1.5em; + padding-left: var(--spacing-05); +} + +li { + list-style-position: outside; + padding-left: 0.5em; + margin-top: 0.5em; + margin-bottom: var(--spacing-02); + font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); + &::marker { + color: var(--sic-accent-color); + font-size: var(--fs-xl); + } +} + +blockquote { + display: flex; + gap: var(--spacing-05); + margin-top: 1em; + margin-bottom: 1em; + p { + font-size: var(--body-03-font-size); + margin-bottom: 0; + } + font-weight: bold; + sic-icon { + color: var(--color-primary-light); + } +} + +/* Set a global HR for color purposes. */ +hr { + border-color: var(--sic-accent-color); + margin-top: 2em; + margin-bottom: 2em; +} + +figcaption { + font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); + color: var(--sic-text-color); + text-align: center; +} + +em { + font-style: italic; +} + +sup { + vertical-align: super; + font-size: 60%; + top: 0; +} + +sub { + vertical-align: sub; + font-size: 60%; + bottom: 0; +} + +strong { + font-weight: 700; +} + +/* Most styles are imported from `sic-table` but we add styled-text specific CSS here */ +table { + margin-bottom: var(--spacing-04); +} + +/* Article byline */ +.article-byline { + font-size: var(--body-article-byline, var(--fs-lg)); +} + +/* Disclaimer */ +.disclaimer { + --sic-link--text-color--hover: var(--color-neutral-white); + --sic-link--bg-color--hover: var(--sic-text-color); + --sic-cta--text-color: var(--sic-text-color); + --sic-cta--text-color--hover: var(--color-neutral-white); + --sic-cta--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); + --sic-cta--icon--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); + --sic-cta--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --sic-cta--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --sic-button--bg-color: var(--sic-text-color); + --sic-button--text-color: var(--color-neutral-white); + --sic-button--border-color: var(--sic-text-color); + --sic-button--bg-color--hover: transparent; + --sic-button--text-color--hover: var(--sic-text-color); + --sic-button--border-color--hover: var(--sic-text-color); + --sic-button--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --sic-button--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + + font-size: calc(var(--body-helper-min-font-size)); + line-height: calc(var(--body-helper-min-line-height)); + display: block; + margin-bottom: 1em; + &:last-child { + margin-bottom: 0; + } + + a { + font-weight: var(--fw-bold); + text-decoration: underline; + + &:hover, + &:focus, + &:focus-visible { + color: var( + --sic-disclaimer-link--text-color--hover, + var(--sic-link--text-color--hover) + ); + background-color: var( + --sic-disclaimer-link--bg-color--hover, + var(--sic-link--bg-color--hover) + ); + } + } + a.sic-cta { + font-size: inherit; + color: var(--sic-disclaimer-cta--text-color, var(--sic-cta--text-color)); + text-decoration: underline; + + .last-word { + text-decoration: underline; + &::after { + background-image: var(--sic-disclaimer-cta--icon, var(--sic-cta--icon)); + height: var(--spacing-03); + width: var(--spacing-03); + margin-left: calc(var(--spacing-02)); + } + } + &:hover, + &:focus-visible, + &:focus { + background-color: var(--sic-text-color); + background-image: none; + color: var( + --sic-disclaimer-cta--text-color--hover, + var(--sic-cta--text-color--hover) + ); + text-decoration: underline; + + .last-word { + text-decoration: underline; + + &::after { + background-image: var( + --sic-disclaimer-cta--icon--hover, + var(--sic-cta--icon--hover) + ); + transform: translateX(calc(var(--spacing-01))); + } + } + } + + &.icon-external, + &[target='_blank'] { + .last-word { + &::after { + background-image: var( + --sic-disclaimer-cta--icon-external, + var(--sic-cta--icon-external) + ); + height: var(--spacing-03); + width: var(--spacing-03); + } + } + + &:hover, + &:focus-visible, + &:focus { + .last-word { + &::after { + background-image: var( + --sic-disclaimer-cta--icon-external--hover, + var(--sic-cta--icon-external--hover) + ); + transform: translateX(-2px) translateY(-1px); + } + } + } + } + } + + a.btn { + font-size: inherit; + color: var( + --sic-disclaimer-button--text-color, + var(--sic-button--text-color) + ); + padding: var(--spacing-02) var(--spacing-04); + min-height: 0; + text-decoration: none; + + &:hover { + color: var( + --sic-disclaimer-button--text-color--hover, + var(--sic-button--text-color--hover) + ); + background-color: var( + --sic-disclaimer-button--bg-color--hover, + var(--sic-button--bg-color--hover) + ); + border-color: var( + --sic-disclaimer-button--border-color--hover, + var(--sic-button--border-color--hover) + ); + } + + &.icon-external, + &[target='_blank'] { + .last-word::after { + background-image: var( + --sic-disclaimer-button--icon-external, + var(--sic-button--icon-external) + ); + height: var(--spacing-03); + width: var(--spacing-03); + margin-left: calc(var(--spacing-02)); + } + + &:hover { + .last-word { + &::after { + background-image: var( + --sic-disclaimer-button--icon-external--hover, + var(--sic-button--icon-external--hover) + ); + } + } + } + } + } + + li { + font-size: calc(var(--body-helper-min-font-size)); + line-height: calc(var(--body-helper-min-line-height)); + margin-top: var(--spacing-01); + margin-bottom: var(--spacing-01); + + &::marker { + color: var(--sic-text-color); + } + } +} +ul.disclaimer { + li::marker { + font-size: 10px; + } +} +ol.disclaimer { + li::marker { + font-size: 0.9em; + } +} + +/* Allow sic-cta in sic-styled-text to wrap if long text */ +a.sic-cta { + white-space: initial; +} + +a[name], +a:not([href]) { + color: inherit; + cursor: text; + text-decoration: none; + font-weight: inherit; + font-size: inherit; + &:hover, + &:focus, + &:focus-visible { + color: var(--sic-text-color); + background-color: transparent; + } +} + +.clear-left { + clear: left; +} + +.clear-right { + clear: right; +} + +.clear-both { + clear: both; +} diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.mdx b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.mdx new file mode 100644 index 000000000..dfcb25738 --- /dev/null +++ b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.mdx @@ -0,0 +1,702 @@ +import { html } from 'lit'; +import { Meta, Canvas, Story, Preview } from '@storybook/addon-docs'; +import './sic-styled-text'; + + + +# Overview + +These are the basic styles provided by the sic-styled-text component. +`` should wrap wysiwyg content. + +## Use In Components + +`` will not inherit any css styles set on parent element. +Components that contain slots that may use `` will need to set +css variables in component different values are needed. + +## Settings + +--- + +### CSS Variables + +- `--sic-body-text--font-size`: defaults to `--body-01-font-size` +- `--sic-body-text--line-height`: defaults to `--body-01-font-size` +- `--sic-body-text--margin-bottom`: defaults to `1em` + +# Headings + + + + {html` + +

+ This is an H1 heading + 2 +

+

This is an H2 heading2

+

This is an H3 heading

+

This is an H4 heading

+
This is an H5 heading
+
This is an H6 heading
+
This is an H6 heading with a named link
+ + `} + + + +# Basic text and paragraphs + + + + {html` +
+ +

+ Example PDF link +

+

+ Example .docx link +

+ +
+ +

+ Example PDF link +

+

+ Example .docx link +

+ This is simple text which didn't get wrapped in a p tag. +

+ Connecting you to care anywhere +

+

Standard Paragraph

+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede.3 +

+

Strong Paragraph

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

Italic Paragraph

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

+ This is an example of "text-body-01" size font. +

+

+ This is an example of "text-body-02" size font. +

+

This is an example of base size font.

+

+ This is an example of "text-body-03" size font. +

+

+ This is an example of "text-body-04" size font. +

+

+ This is an example of "text-body-helper" size font. +

+ + `} + + + +# Disclaimer text and paragraphs + + + + {html` + +

Connecting you to care anywhere

+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede.3 +

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

+ Links: test link + and external link +

+

+ CTA links: cta link and external cta link +

+

+ Buttons: button link and external button link +

+ +
+ +

Connecting you to care anywhere

+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede.3 +

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

+ Links: test link + and external link +

+

+ CTA links: cta link and external cta link +

+

+ Buttons: button link and external button link +

+ +
+ `} + + + +# Block quote(blockquote) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+
+ +

+ Be a force. Not for just one thing, but for your thing: the + intersection of your expertise and your passion. And we will help + you achieve it. +

+
+
Phase2 Technology
+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+ + `} + + + +# Horizontal rule (HR) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+
+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+ + `} + + + +# Lists + +## Unordered lists (UL) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+
    +
  • This is the first item
    • +
  • + This is the second link item +
      +
    • This is the first child item
      • +
    • + This is the second child item +
        +
      • This is the first grandchild item
        • +
      • + This is the second grandchild item +
          +
        • This is the first great-grandchild item
          • +
        +
        • +
      +
      • +
    +
    • +
  • + This is the third item, which is long. Sed fringilla mauris sit amet + nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam + nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. Sed fringilla mauris sit amet + nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam + nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. +
    • +
+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+ + `} + + + +## Check list + +## Two columns List (UL) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+
    +
  • This is the first item
    • +
  • This is the second item
    • +
  • This is the first child item
    • +
  • This is the second child item
    • +
  • This is the third item
    • +
  • This is the first item
    • +
  • This is the second item
    • +
  • This is the first child item
    • +
  • This is the second child item
    • +
  • This is the third item
    • +
  • This is the second child item
    • +
  • This is the third item
    • +
+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+ + `} + + + +## Ordered list (OL) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+
    +
  1. This is the first item
    2. +
  2. + This is the second child item +
      +
    1. This is the first grandchild item
      2. +
    2. + This is the second grandchild item +
        +
      1. This is the first great-grandchild item +
          +
        1. This is the first great-great-grandchild item
          2. +
        +
        2. +
      +
      3. +
    +
    3. + + +
  3. This is the third item
    4. +
+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+ + `} + + + +## Table + + + + {html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Table heading with link + Lorem ipsum dolar2Lorem ipsum dolarLorem ipsum dolar
+ Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem + ipsum dolor sit amet2 Lorem ipsum dolor sit amet +

A cell with a nested paragraph tag.

Strong textLorem ipsum dolor sit amet
+ Table cell with link + Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet + Table cell with external link + Lorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
+ + `} + + + +## Button and Link (a) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. +

+

Primary Button  Secondary Button

+

Standard Link External Link

+

CTA Link

+

Call to actionCall to action external

+ +
+ +

+ Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. +

+

Primary Button  Secondary Button

+

Standard Link External Link

+

CTA Link

+

Call to actionCall to action external

+ +
+ `} + + + +## Tooltip + + + + {html` + +

Tooltip in "sic-styled-text" uses a link with "sic-tooltip" class and a "title" attribute to create the tooltip.

+
+

+ Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit. +

+ +
+ +

+ Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit. +

+ +
+ `} + + + +## Base styled text + + + + {html` + +

What is Lorem Ipsum?

+

+ Lorem Ipsum is simply dummy text of the printing + and typesetting industry. Lorem Ipsum has been the industry's standard + dummy text ever since the 1500s, when an unknown printer took a galley + of type and scrambled it to make a type specimen book. It has survived + not only five centuries, but also the leap into electronic + typesetting, remaining essentially unchanged. It was popularised in + the 1960s with the release of Letraset sheets containing Lorem Ipsum + passages, and more recently with desktop publishing software like + Aldus PageMaker including versions of Lorem Ipsum. +

+

Why do we use it?

+

+ It is a long established fact that a reader + will be distracted by the readable content of a page when looking at + its layout. The point of using Lorem Ipsum is that it has a + more-or-less normal distribution of letters, as opposed to using + 'Content here, content here', making it look like readable English. +
+ Many desktop publishing packages and web page editors now use Lorem + Ipsum as their default model text, and a search for 'lorem ipsum' will + uncover many web sites still in their infancy. Various versions have + evolved over the years, sometimes by accident, sometimes on purpose + (injected humour and the like). +
+ this is a named link +

+

Where does it come from?

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text. It + has roots in a piece of classical Latin literature from 45 BC, making + it over 2000 years old. Richard McClintock, a Latin professor at + Hampden-Sydney College in Virginia, looked up one of the more obscure + Latin words, consectetur, from a Lorem Ipsum passage, and going + through the cites of the word in classical literature, discovered the + undoubtable source. Lorem Ipsum comes from sections 1.10.32 and + 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and + Evil) by Cicero, written in 45 BC. This book is a treatise on the + theory of ethics, very popular during the Renaissance. The first line + of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in + section 1.10.32. +

+

+ The standard chunk of Lorem Ipsum used since the 1500s is reproduced + below for those interested. Sections 1.10.32 and 1.10.33 from "de + Finibus Bonorum et Malorum" by Cicero are also reproduced in their + exact original form, accompanied by English versions from the 1914 + translation by H. Rackham. +

+
Where can I get some?
+

+ There are many variations of passages of Lorem Ipsum available, but + the majority have suffered alteration in some form, by injected + humour, or randomised words which don't look even slightly believable. + If you are going to use a passage of Lorem Ipsum, you need to be sure + there isn't anything embarrassing hidden in the middle of text. All + the Lorem Ipsum generators on the Internet tend to repeat predefined + chunks as necessary, making this the first true generator on the + Internet. It uses a dictionary of over 200 Latin words, combined with + a handful of model sentence structures, to generate Lorem Ipsum which + looks reasonable. The generated Lorem Ipsum is therefore always free + from repetition, injected humour, or non-characteristic words etc. +

+
Where can I get some?
+

+ There are many variations of passages of Lorem Ipsum available, but + the majority have suffered alteration in some form, by injected + humour, or randomised words which don't look even slightly believable. + If you are going to use a passage of Lorem Ipsum, you need to be sure + there isn't anything embarrassing hidden in the middle of text. All + the Lorem Ipsum generators on the Internet tend to repeat predefined + chunks as necessary, making this the first true generator on the + Internet. It uses a dictionary of over 200 Latin words, combined with + a handful of model sentence structures, to generate Lorem Ipsum which + looks reasonable. The generated Lorem Ipsum is therefore always free + from repetition, injected humour, or non-characteristic words etc. +

+

+ It is well established that following the Mediterranean Diet or DASH + (Dietary Approaches to Stop Hypertension) diet can lead to + improvements in many key areas of health. The MIND diet + (Mediterranean-DASH Diet for Neurodegenerative Delay) is actually a + combination of these two diets and has been shown to reduce the risk + of Alzheimer’s disease and slow cognitive decline. +

+

+ One study estimated a 53% lower risk of Alzheimer’s disease when the + diet was followed closely for 4.5 years and a 35% lower risk of + Alzheimer’s when the diet was followed less closely for 4.5 years. +

+

+ Like the DASH and Mediterranean diet, the MIND diet encourages + plant-based protein, lean animal protein sources, whole grains and + plenty of fruits and vegetables. It also limits red meat, saturated + fats and added sugars. Unique to the MIND diet is that it emphasizes + having one serving of leafy greens per day and two or more servings of + berries per week. +

+

+ Here are the recommended foods and servings to include according to + the MIND diet: +

+
Vegetables
+
    +
  • Leafy greens - 6 or more servings/week
    • +
  • Other vegetables - 1 or more servings/day
    • +
+
Fruits
+
    +
  • Berries - 2 or more servings/week
    • +
+
Grains
+
    +
  • Whole grains - 3 or more servings/day
    • +
+
Protein
+
    +
  • Nuts - 5 or more servings/week
    • +
  • Beans - 3 or more servings/week
    • +
  • Poultry - 2 or more servings/week
    • +
  • Fish - 1 or more servings/week
    • +
  • Red meat - 4 or less servings/week
    • +
  • Cheese - 1 or less serving/week
    • +
+
Fats
+
    +
  • Olive oil - Use as your primary source of fat
    • +
  • Butter or margarine - 1 tbsp/day or less
    • +
  • Fried foods or fast food - 1 or less serving/week
    • +
+
Other
+
    +
  • Sweets - 5 or fewer servings/week
    • +
  • Wine - 1 serving/day
    • +
+ + `} + + + +## Table + + + + {html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Lorem ipsum dolarLorem ipsum dolarLorem ipsum dolarLorem ipsum dolar
+ Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem + ipsum dolor sit amet Lorem ipsum dolor sit amet +

A cell with a nested paragraph tag.

Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
+ + `} + + diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.ts b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.ts new file mode 100644 index 000000000..25117b3a1 --- /dev/null +++ b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.ts @@ -0,0 +1,56 @@ +import { TemplateResult, html } from "lit" +import './sic-styled-text' + +export default { + title: 'Global/Styled Text', + component: 'sic-styled-text', + parameters: { + viewMode: 'docs', + previewTabs: { + canvas: { + hidden: true, + }, + }, + docs: { + description: { + component: `\`\` should wrap wysiwyg content. + `, + }, + }, + }, +} +const SampleContent = html` +

+ Nullam accumsan lorem in dui. Quisque malesuada placerat nisl. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. + Aliquam lobortis. Curabitur blandit mollis lacus. Quisque malesuada placerat nisl. +

+
    +
  • Bullet List item 1
    • +
  • Bullet List item 2
    • +
  • Bullet List item 3
    • +
+
+

+ Nullam accumsan lorem in dui. Quisque malesuada placerat nisl. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. + Aliquam lobortis. Curabitur blandit mollis lacus. Quisque malesuada placerat nisl. +

+
This is a block quote
+

Link button

+

Call to actionCall to action external

+ +`; + + +const TemplateStyledText = (): TemplateResult => html ` + +

This is styled text using the sic-styled-text HTML element

+ ${SampleContent} + +
+ +

sic-styled-text HTML element on primary default background.

+ ${SampleContent} + +
+` ; +export const OnBackgrounds = TemplateStyledText.bind({}); diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.ts b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.ts new file mode 100644 index 000000000..a3a07310f --- /dev/null +++ b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.ts @@ -0,0 +1,59 @@ +import { TemplateResult, html, CSSResultGroup } from 'lit'; +import { OutlineElement } from '../../base/outline-element/outline-element'; +import { customElement } from 'lit/decorators.js'; +import { wrapLastWord } from '../../../utilities/wrap-last-word'; +import { tooltipLink } from '../../../utilities/tooltip'; +import { externalLinkText } from '../../../utilities/external-link-text'; +import { checkFileType } from '../../../utilities/check-file-type'; +import componentStyles from './sic-styled-text.css.lit'; + +wrapLastWord; + +/** + * The Sic Styled Text component + * @element sic-styled-text + * @since 1.0.0 + * @slot - default slot + * + * Lightdom styles in sic-styled-text.lightdom.css included in /shared.css + */ +@customElement('sic-styled-text') +export class SicStyledText extends OutlineElement { + static styles: CSSResultGroup = [OutlineElement.styles, componentStyles]; + + connectedCallback(): void { + super.connectedCallback(); + + this.querySelectorAll('a').forEach(el => { + // Check if has target="_blank" before adding last-word span. + checkFileType(el); + if ( + el.getAttribute('target') === '_blank' || + el.classList.contains('sic-cta') + ) { + // Wraps last word in a span.last-word element. + // span.last-word is where the icon is added via pseudo + wrapLastWord(el as HTMLElement); + + // Adds external link text for screen readers. + if (el.classList.contains('is-external-link')) { + externalLinkText(el as HTMLElement); + } + } + // + if (el.classList.contains('sic-tooltip')) { + tooltipLink(el as HTMLElement); + } + }); + } + + render(): TemplateResult { + return html``; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'sic-styled-text': SicStyledText; + } +} diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-table.css b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-table.css new file mode 100644 index 000000000..c394f7c82 --- /dev/null +++ b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-table.css @@ -0,0 +1,112 @@ +table { + color: var(--sic-heading-color); + max-width: 100%; + height: 100%; + overflow: auto; + display: inline-block; + border-radius: var(--border-radius-rounded-default); + outline: 1px solid var(--color-neutral-light); + outline-offset: -1px; + border-collapse: collapse; + border-spacing: 0; + + --table-head-font-size: var(--fs-lg); + --table-head-font-weight: var(--fw-bold); + --table-body-font-size: var(--fs-base); + --table-body-font-weight: var(--fw-normal); + + tbody { + width: 100%; + } + + thead, + tr:nth-child(even) { + background-color: var(--color-primary-lightest); + } + + tbody tr:nth-child(odd) { + background-color: var(--color-neutral-white); + } + + th, + td { + border: 1px solid var(--color-neutral-lighter); + border-collapse: collapse; + padding-right: 4rem; + padding-left: var(--spacing-04); + min-width: 20ch; + padding-top: var(--spacing-04); + padding-bottom: var(--spacing-04); + } + + tbody { + th, + td, + /* Overriding all text styles except headings. This ensures consistent */ + /* styling of unexpected markup, particularly migrated content. */ + th *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), + td *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: var(--table-body-font-size); + sup { + font-size: 60% !important; + } + + sub { + font-size: 60% !important; + } + } + + td, + td *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(a):not(strong) { + font-weight: var(--table-body-font-weight); + } + + th, + th *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), + strong { + font-weight: var(--table-head-font-weight); + } + + a, + a > span.last-word { + font-weight: var(--fw-bold); + } + } + + thead { + th, + th *, + td, + td * { + font-size: var(--table-head-font-size); + font-weight: var(--table-head-font-weight); + sup { + font-size: 60%; + } + sub { + font-size: 60%; + } + } + } + + th { + text-align: left; + } + + ::-webkit-scrollbar { + max-width: var(--spacing-01); + max-height: var(--spacing-01); + } + + ::-webkit-scrollbar-thumb { + background-color: var(--color-neutral-light); + border-radius: var(--spacing-03); + } + sup { + top: 0; + } + + sub { + vertical-align: sub; + } +} diff --git a/packages/components/outline-core-styled-text/tsconfig.build.json b/packages/components/outline-core-styled-text/tsconfig.build.json new file mode 100644 index 000000000..5eac9d313 --- /dev/null +++ b/packages/components/outline-core-styled-text/tsconfig.build.json @@ -0,0 +1,9 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "rootDir": ".", + "outDir": "./dist" + }, + "include": ["index.ts", "src/**/*", "tests/**/*"], + "references": [{ "path": "../../outline-core/tsconfig.build.json" }] +} From f33da2ee3e15d990f3cd2641e881a19986fa9b59 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 30 Jan 2024 09:37:44 -0500 Subject: [PATCH 02/21] feat: wip, more component roughed out. --- .../docs/outline-core-styled-text.mdx | 702 +++++ .../.ck.ck-content.global.css | 26 +- .../src/outline-core-styled-text.css | 7 + ... => outline-core-styled-text.lightdom.css} | 14 +- ...ss => outline-core-styled-text.shared.css} | 124 +- .../src/outline-core-styled-text.ts | 9 +- .../.ck.ck-content.global.scoped.css | 2501 ----------------- .../src/sic-styled-text/sic-styled-text.css | 7 - .../sic-styled-text.stories.mdx | 702 ----- .../sic-styled-text.stories.ts | 56 - .../src/sic-styled-text/sic-styled-text.ts | 59 - 11 files changed, 798 insertions(+), 3409 deletions(-) rename packages/components/outline-core-styled-text/src/{sic-styled-text => }/.ck.ck-content.global.css (74%) rename packages/components/outline-core-styled-text/src/{sic-styled-text/sic-styled-text.lightdom.css => outline-core-styled-text.lightdom.css} (64%) rename packages/components/outline-core-styled-text/src/{sic-styled-text/sic-styled-text.shared.css => outline-core-styled-text.shared.css} (50%) delete mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.scoped.css delete mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.css delete mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.mdx delete mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.ts diff --git a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx b/packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx index e69de29bb..c0a424191 100644 --- a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx +++ b/packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx @@ -0,0 +1,702 @@ +import { html } from 'lit'; +import { Meta, Canvas, Story, Preview } from '@storybook/addon-docs'; +import '../src/outline-core-styled-text/outline-core-styled-text'; + + + +# Overview + +These are the basic styles provided by the outline-core-styled-text component. +`` should wrap wysiwyg content. + +## Use In Components + +`` will not inherit any css styles set on parent element. +Components that contain slots that may use `` will need to set +css variables in component different values are needed. + +## Settings + +--- + +### CSS Variables + +- `--outline-core-body-text--font-size`: defaults to `--body-01-font-size` +- `--outline-core-body-text--line-height`: defaults to `--body-01-font-size` +- `--outline-core-body-text--margin-bottom`: defaults to `1em` + +# Headings + + + + {html` + +

+ This is an H1 heading + 2 +

+

This is an H2 heading2

+

This is an H3 heading

+

This is an H4 heading

+
This is an H5 heading
+
This is an H6 heading
+
This is an H6 heading with a named link
+ + `} + + + +# Basic text and paragraphs + + + + {html` +
+ +

+ Example PDF link +

+

+ Example .docx link +

+ +
+ +

+ Example PDF link +

+

+ Example .docx link +

+ This is simple text which didn't get wrapped in a p tag. +

+ Connecting you to care anywhere +

+

Standard Paragraph

+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede.3 +

+

Strong Paragraph

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

Italic Paragraph

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

+ This is an example of "text-body-01" size font. +

+

+ This is an example of "text-body-02" size font. +

+

This is an example of base size font.

+

+ This is an example of "text-body-03" size font. +

+

+ This is an example of "text-body-04" size font. +

+

+ This is an example of "text-body-helper" size font. +

+ + `} + + + +# Disclaimer text and paragraphs + + + + {html` + +

Connecting you to care anywhere

+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede.3 +

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

+ Links: test link + and external link +

+

+ CTA links: cta link and external cta link +

+

+ Buttons: button link and external button link +

+ +
+ +

Connecting you to care anywhere

+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede.3 +

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

+ + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

+

+ Links: test link + and external link +

+

+ CTA links: cta link and external cta link +

+

+ Buttons: button link and external button link +

+ +
+ `} + + + +# Block quote(blockquote) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+
+ +

+ Be a force. Not for just one thing, but for your thing: the + intersection of your expertise and your passion. And we will help + you achieve it. +

+
+
Phase2 Technology
+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+ + `} + + + +# Horizontal rule (HR) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+
+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+ + `} + + + +# Lists + +## Unordered lists (UL) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+
    +
  • This is the first item
    • +
  • + This is the second link item +
      +
    • This is the first child item
      • +
    • + This is the second child item +
        +
      • This is the first grandchild item
        • +
      • + This is the second grandchild item +
          +
        • This is the first great-grandchild item
          • +
        +
        • +
      +
      • +
    +
    • +
  • + This is the third item, which is long. Sed fringilla mauris sit amet + nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam + nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. Sed fringilla mauris sit amet + nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam + nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. +
    • +
+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+ + `} + + + +## Check list + +## Two columns List (UL) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+
    +
  • This is the first item
    • +
  • This is the second item
    • +
  • This is the first child item
    • +
  • This is the second child item
    • +
  • This is the third item
    • +
  • This is the first item
    • +
  • This is the second item
    • +
  • This is the first child item
    • +
  • This is the second child item
    • +
  • This is the third item
    • +
  • This is the second child item
    • +
  • This is the third item
    • +
+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+ + `} + + + +## Ordered list (OL) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+
    +
  1. This is the first item
    2. +
  2. + This is the second child item +
      +
    1. This is the first grandchild item
      2. +
    2. + This is the second grandchild item +
        +
      1. This is the first great-grandchild item +
          +
        1. This is the first great-great-grandchild item
          2. +
        +
        2. +
      +
      3. +
    +
    3. + + +
  3. This is the third item
    4. +
+

+ Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

+ + `} + + + +## Table + + + + {html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Table heading with link + Lorem ipsum dolar2Lorem ipsum dolarLorem ipsum dolar
+ Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem + ipsum dolor sit amet2 Lorem ipsum dolor sit amet +

A cell with a nested paragraph tag.

Strong textLorem ipsum dolor sit amet
+ Table cell with link + Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet + Table cell with external link + Lorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
+ + `} + + + +## Button and Link (a) + + + + {html` + +

+ Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. +

+

Primary Button  Secondary Button

+

Standard Link External Link

+

CTA Link

+

Call to actionCall to action external

+ +
+ +

+ Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. +

+

Primary Button  Secondary Button

+

Standard Link External Link

+

CTA Link

+

Call to actionCall to action external

+ +
+ `} + + + +## Tooltip + + + + {html` + +

Tooltip in "outline-core-styled-text" uses a link with "outline-core-tooltip" class and a "title" attribute to create the tooltip.

+
+

+ Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit. +

+ +
+ +

+ Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit. +

+ +
+ `} + + + +## Base styled text + + + + {html` + +

What is Lorem Ipsum?

+

+ Lorem Ipsum is simply dummy text of the printing + and typesetting industry. Lorem Ipsum has been the industry's standard + dummy text ever since the 1500s, when an unknown printer took a galley + of type and scrambled it to make a type specimen book. It has survived + not only five centuries, but also the leap into electronic + typesetting, remaining essentially unchanged. It was popularised in + the 1960s with the release of Letraset sheets containing Lorem Ipsum + passages, and more recently with desktop publishing software like + Aldus PageMaker including versions of Lorem Ipsum. +

+

Why do we use it?

+

+ It is a long established fact that a reader + will be distracted by the readable content of a page when looking at + its layout. The point of using Lorem Ipsum is that it has a + more-or-less normal distribution of letters, as opposed to using + 'Content here, content here', making it look like readable English. +
+ Many desktop publishing packages and web page editors now use Lorem + Ipsum as their default model text, and a search for 'lorem ipsum' will + uncover many web sites still in their infancy. Various versions have + evolved over the years, sometimes by accident, sometimes on purpose + (injected humour and the like). +
+ this is a named link +

+

Where does it come from?

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text. It + has roots in a piece of classical Latin literature from 45 BC, making + it over 2000 years old. Richard McClintock, a Latin professor at + Hampden-Sydney College in Virginia, looked up one of the more obscure + Latin words, consectetur, from a Lorem Ipsum passage, and going + through the cites of the word in classical literature, discovered the + undoubtable source. Lorem Ipsum comes from sections 1.10.32 and + 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and + Evil) by Cicero, written in 45 BC. This book is a treatise on the + theory of ethics, very popular during the Renaissance. The first line + of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in + section 1.10.32. +

+

+ The standard chunk of Lorem Ipsum used since the 1500s is reproduced + below for those interested. Sections 1.10.32 and 1.10.33 from "de + Finibus Bonorum et Malorum" by Cicero are also reproduced in their + exact original form, accompanied by English versions from the 1914 + translation by H. Rackham. +

+
Where can I get some?
+

+ There are many variations of passages of Lorem Ipsum available, but + the majority have suffered alteration in some form, by injected + humour, or randomised words which don't look even slightly believable. + If you are going to use a passage of Lorem Ipsum, you need to be sure + there isn't anything embarrassing hidden in the middle of text. All + the Lorem Ipsum generators on the Internet tend to repeat predefined + chunks as necessary, making this the first true generator on the + Internet. It uses a dictionary of over 200 Latin words, combined with + a handful of model sentence structures, to generate Lorem Ipsum which + looks reasonable. The generated Lorem Ipsum is therefore always free + from repetition, injected humour, or non-characteristic words etc. +

+
Where can I get some?
+

+ There are many variations of passages of Lorem Ipsum available, but + the majority have suffered alteration in some form, by injected + humour, or randomised words which don't look even slightly believable. + If you are going to use a passage of Lorem Ipsum, you need to be sure + there isn't anything embarrassing hidden in the middle of text. All + the Lorem Ipsum generators on the Internet tend to repeat predefined + chunks as necessary, making this the first true generator on the + Internet. It uses a dictionary of over 200 Latin words, combined with + a handful of model sentence structures, to generate Lorem Ipsum which + looks reasonable. The generated Lorem Ipsum is therefore always free + from repetition, injected humour, or non-characteristic words etc. +

+

+ It is well established that following the Mediterranean Diet or DASH + (Dietary Approaches to Stop Hypertension) diet can lead to + improvements in many key areas of health. The MIND diet + (Mediterranean-DASH Diet for Neurodegenerative Delay) is actually a + combination of these two diets and has been shown to reduce the risk + of Alzheimer’s disease and slow cognitive decline. +

+

+ One study estimated a 53% lower risk of Alzheimer’s disease when the + diet was followed closely for 4.5 years and a 35% lower risk of + Alzheimer’s when the diet was followed less closely for 4.5 years. +

+

+ Like the DASH and Mediterranean diet, the MIND diet encourages + plant-based protein, lean animal protein sources, whole grains and + plenty of fruits and vegetables. It also limits red meat, saturated + fats and added sugars. Unique to the MIND diet is that it emphasizes + having one serving of leafy greens per day and two or more servings of + berries per week. +

+

+ Here are the recommended foods and servings to include according to + the MIND diet: +

+
Vegetables
+
    +
  • Leafy greens - 6 or more servings/week
    • +
  • Other vegetables - 1 or more servings/day
    • +
+
Fruits
+
    +
  • Berries - 2 or more servings/week
    • +
+
Grains
+
    +
  • Whole grains - 3 or more servings/day
    • +
+
Protein
+
    +
  • Nuts - 5 or more servings/week
    • +
  • Beans - 3 or more servings/week
    • +
  • Poultry - 2 or more servings/week
    • +
  • Fish - 1 or more servings/week
    • +
  • Red meat - 4 or less servings/week
    • +
  • Cheese - 1 or less serving/week
    • +
+
Fats
+
    +
  • Olive oil - Use as your primary source of fat
    • +
  • Butter or margarine - 1 tbsp/day or less
    • +
  • Fried foods or fast food - 1 or less serving/week
    • +
+
Other
+
    +
  • Sweets - 5 or fewer servings/week
    • +
  • Wine - 1 serving/day
    • +
+ + `} + + + +## Table + + + + {html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Lorem ipsum dolarLorem ipsum dolarLorem ipsum dolarLorem ipsum dolar
+ Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem + ipsum dolor sit amet Lorem ipsum dolor sit amet +

A cell with a nested paragraph tag.

Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
+ + `} + + diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.css b/packages/components/outline-core-styled-text/src/.ck.ck-content.global.css similarity index 74% rename from packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.css rename to packages/components/outline-core-styled-text/src/.ck.ck-content.global.css index 0d6c61899..10eaaf18c 100644 --- a/packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.css +++ b/packages/components/outline-core-styled-text/src/.ck.ck-content.global.css @@ -15,24 +15,24 @@ /** Import Tokens. * Scope the css variables so they do not conflict with Drupal Admin theme's CSS variables. */ -@import '@phase2/sic-tokens/dist/tokens.default.css'; +@import '@phase2/outline-core-tokens/dist/tokens.default.css'; @import '../../../../outline.theme.css'; -@import '../sic-heading/sic-heading.css'; -@import '../sic-button/sic-button.css'; -@import '../sic-cta/sic-cta.css'; -@import '../sic-cta/sic-cta.shared.css'; -@import '../sic-link/sic-link.css'; -@import '../sic-tooltip/sic-tooltip.shared.css'; -@import './sic-styled-text.shared.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 '../sic-button/sic-button.css';` that affects ckeditor width. - * `@import '../sic-heading/sic-heading.css';` affect font-weight and color. + * `@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(--sic-text-color); + color: var(--outline-core-text-color); display: block; font-weight: unset; width: unset; @@ -43,7 +43,7 @@ } /* Override for tooltip styles. */ -a.sic-tooltip { +/* a.sic-tooltip { text-decoration: underline; &::after { @@ -61,4 +61,4 @@ a.sic-tooltip { url('data:image/svg+xml,') ); } -} +} */ diff --git a/packages/components/outline-core-styled-text/src/outline-core-styled-text.css b/packages/components/outline-core-styled-text/src/outline-core-styled-text.css index e69de29bb..dbc9e24d8 100644 --- a/packages/components/outline-core-styled-text/src/outline-core-styled-text.css +++ b/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); +} diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.lightdom.css b/packages/components/outline-core-styled-text/src/outline-core-styled-text.lightdom.css similarity index 64% rename from packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.lightdom.css rename to packages/components/outline-core-styled-text/src/outline-core-styled-text.lightdom.css index fbf26216f..a04002e3c 100644 --- a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.lightdom.css +++ b/packages/components/outline-core-styled-text/src/outline-core-styled-text.lightdom.css @@ -1,18 +1,18 @@ -/* Rendered WYSIWYG content is wrapped in on the frontend. */ +/* Rendered WYSIWYG content is wrapped in on the frontend. */ /* WYSIWYG content is wrapped in .ck-content for targeting within CKEditor. */ /* See https://www.drupal.org/node/3259165 */ -sic-styled-text { +outline-core-styled-text { /* Support floats. */ display: block; font-family: var(--ff-display); font-weight: var(--fw-normal); - color: var(--sic-text-color); + color: var(--outline-core-text-color); - @nested-import './sic-styled-text.shared.css'; - @nested-import './sic-table.css'; - @nested-import '../sic-cta/sic-cta.shared.css'; - @nested-import '../sic-tooltip/sic-tooltip.shared.css'; + @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. */ diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.shared.css b/packages/components/outline-core-styled-text/src/outline-core-styled-text.shared.css similarity index 50% rename from packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.shared.css rename to packages/components/outline-core-styled-text/src/outline-core-styled-text.shared.css index 2b57f27c6..ca7337b96 100644 --- a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.shared.css +++ b/packages/components/outline-core-styled-text/src/outline-core-styled-text.shared.css @@ -1,12 +1,12 @@ -/* Rendered WYSIWYG content is wrapped in on the frontend. */ +/* Rendered WYSIWYG content is wrapped in on the frontend. */ /* WYSIWYG content is wrapped in .ck-content for targeting within CKEditor. */ /* See https://www.drupal.org/node/3259165 */ p { display: block; - font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); - line-height: var(--sic-body-text--line-height, var(--body-01-line-height)); - margin-bottom: var(--sic-body-text--margin-bottom, 1em); + font-size: var(--outline-body-text--font-size, var(--body-01-font-size)); + line-height: var(--outline-body-text--line-height, var(--body-01-line-height)); + margin-bottom: var(--outline-body-text--margin-bottom, 1em); font-weight: var(--fw-normal); &:last-child { @@ -27,7 +27,7 @@ h6, .headline-03, .headline-02, .headline-01 { - color: var(--sic-heading-color); + color: var(--outline-heading-color); font-family: var(--ff-display); font-weight: var(--fw-bold); display: block; @@ -156,12 +156,12 @@ ol { ol { li::marker { - color: var(--sic-text-color); + color: var(--outline-text-color); } } /* Add margin-bottom to top-level ul and ol only */ -/* Media queries are applied in sic-styled-text.lightdom.css */ +/* Media queries are applied in outline-core-styled-text.lightdom.css */ & > ul, & > ol { margin-bottom: 1.5em; @@ -173,9 +173,9 @@ li { padding-left: 0.5em; margin-top: 0.5em; margin-bottom: var(--spacing-02); - font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); + font-size: var(--outline-body-text--font-size, var(--body-01-font-size)); &::marker { - color: var(--sic-accent-color); + color: var(--outline-accent-color); font-size: var(--fs-xl); } } @@ -190,21 +190,21 @@ blockquote { margin-bottom: 0; } font-weight: bold; - sic-icon { + outline-icon { color: var(--color-primary-light); } } /* Set a global HR for color purposes. */ hr { - border-color: var(--sic-accent-color); + border-color: var(--outline-accent-color); margin-top: 2em; margin-bottom: 2em; } figcaption { - font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); - color: var(--sic-text-color); + font-size: var(--outline-body-text--font-size, var(--body-01-font-size)); + color: var(--outline-text-color); text-align: center; } @@ -228,7 +228,7 @@ strong { font-weight: 700; } -/* Most styles are imported from `sic-table` but we add styled-text specific CSS here */ +/* Most styles are imported from `outline-table` but we add styled-text specific CSS here */ table { margin-bottom: var(--spacing-04); } @@ -240,22 +240,22 @@ table { /* Disclaimer */ .disclaimer { - --sic-link--text-color--hover: var(--color-neutral-white); - --sic-link--bg-color--hover: var(--sic-text-color); - --sic-cta--text-color: var(--sic-text-color); - --sic-cta--text-color--hover: var(--color-neutral-white); - --sic-cta--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); - --sic-cta--icon--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); - --sic-cta--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - --sic-cta--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - --sic-button--bg-color: var(--sic-text-color); - --sic-button--text-color: var(--color-neutral-white); - --sic-button--border-color: var(--sic-text-color); - --sic-button--bg-color--hover: transparent; - --sic-button--text-color--hover: var(--sic-text-color); - --sic-button--border-color--hover: var(--sic-text-color); - --sic-button--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - --sic-button--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --outline-link--text-color--hover: var(--color-neutral-white); + --outline-link--bg-color--hover: var(--outline-text-color); + --outline-cta--text-color: var(--outline-text-color); + --outline-cta--text-color--hover: var(--color-neutral-white); + --outline-cta--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); + --outline-cta--icon--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); + --outline-cta--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --outline-cta--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --outline-button--bg-color: var(--outline-text-color); + --outline-button--text-color: var(--color-neutral-white); + --outline-button--border-color: var(--outline-text-color); + --outline-button--bg-color--hover: transparent; + --outline-button--text-color--hover: var(--outline-text-color); + --outline-button--border-color--hover: var(--outline-text-color); + --outline-button--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --outline-button--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); font-size: calc(var(--body-helper-min-font-size)); line-height: calc(var(--body-helper-min-line-height)); @@ -273,24 +273,24 @@ table { &:focus, &:focus-visible { color: var( - --sic-disclaimer-link--text-color--hover, - var(--sic-link--text-color--hover) + --outline-disclaimer-link--text-color--hover, + var(--outline-link--text-color--hover) ); background-color: var( - --sic-disclaimer-link--bg-color--hover, - var(--sic-link--bg-color--hover) + --outline-disclaimer-link--bg-color--hover, + var(--outline-link--bg-color--hover) ); } } - a.sic-cta { + a.outline-cta { font-size: inherit; - color: var(--sic-disclaimer-cta--text-color, var(--sic-cta--text-color)); + color: var(--outline-disclaimer-cta--text-color, var(--outline-cta--text-color)); text-decoration: underline; .last-word { text-decoration: underline; &::after { - background-image: var(--sic-disclaimer-cta--icon, var(--sic-cta--icon)); + background-image: var(--outline-disclaimer-cta--icon, var(--outline-cta--icon)); height: var(--spacing-03); width: var(--spacing-03); margin-left: calc(var(--spacing-02)); @@ -299,11 +299,11 @@ table { &:hover, &:focus-visible, &:focus { - background-color: var(--sic-text-color); + background-color: var(--outline-text-color); background-image: none; color: var( - --sic-disclaimer-cta--text-color--hover, - var(--sic-cta--text-color--hover) + --outline-disclaimer-cta--text-color--hover, + var(--outline-cta--text-color--hover) ); text-decoration: underline; @@ -312,8 +312,8 @@ table { &::after { background-image: var( - --sic-disclaimer-cta--icon--hover, - var(--sic-cta--icon--hover) + --outline-disclaimer-cta--icon--hover, + var(--outline-cta--icon--hover) ); transform: translateX(calc(var(--spacing-01))); } @@ -325,8 +325,8 @@ table { .last-word { &::after { background-image: var( - --sic-disclaimer-cta--icon-external, - var(--sic-cta--icon-external) + --outline-disclaimer-cta--icon-external, + var(--outline-cta--icon-external) ); height: var(--spacing-03); width: var(--spacing-03); @@ -339,8 +339,8 @@ table { .last-word { &::after { background-image: var( - --sic-disclaimer-cta--icon-external--hover, - var(--sic-cta--icon-external--hover) + --outline-disclaimer-cta--icon-external--hover, + var(--outline-cta--icon-external--hover) ); transform: translateX(-2px) translateY(-1px); } @@ -352,8 +352,8 @@ table { a.btn { font-size: inherit; color: var( - --sic-disclaimer-button--text-color, - var(--sic-button--text-color) + --outline-disclaimer-button--text-color, + var(--outline-button--text-color) ); padding: var(--spacing-02) var(--spacing-04); min-height: 0; @@ -361,16 +361,16 @@ table { &:hover { color: var( - --sic-disclaimer-button--text-color--hover, - var(--sic-button--text-color--hover) + --outline-disclaimer-button--text-color--hover, + var(--outline-button--text-color--hover) ); background-color: var( - --sic-disclaimer-button--bg-color--hover, - var(--sic-button--bg-color--hover) + --outline-disclaimer-button--bg-color--hover, + var(--outline-button--bg-color--hover) ); border-color: var( - --sic-disclaimer-button--border-color--hover, - var(--sic-button--border-color--hover) + --outline-disclaimer-button--border-color--hover, + var(--outline-button--border-color--hover) ); } @@ -378,8 +378,8 @@ table { &[target='_blank'] { .last-word::after { background-image: var( - --sic-disclaimer-button--icon-external, - var(--sic-button--icon-external) + --outline-disclaimer-button--icon-external, + var(--outline-button--icon-external) ); height: var(--spacing-03); width: var(--spacing-03); @@ -390,8 +390,8 @@ table { .last-word { &::after { background-image: var( - --sic-disclaimer-button--icon-external--hover, - var(--sic-button--icon-external--hover) + --outline-disclaimer-button--icon-external--hover, + var(--outline-button--icon-external--hover) ); } } @@ -406,7 +406,7 @@ table { margin-bottom: var(--spacing-01); &::marker { - color: var(--sic-text-color); + color: var(--outline-text-color); } } } @@ -421,8 +421,8 @@ ol.disclaimer { } } -/* Allow sic-cta in sic-styled-text to wrap if long text */ -a.sic-cta { +/* Allow outline-cta in outline-core-styled-text to wrap if long text */ +a.outline-cta { white-space: initial; } @@ -436,7 +436,7 @@ a:not([href]) { &:hover, &:focus, &:focus-visible { - color: var(--sic-text-color); + color: var(--outline-text-color); background-color: transparent; } } diff --git a/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts b/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts index a3a07310f..e9ad2372c 100644 --- a/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts +++ b/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts @@ -1,11 +1,16 @@ import { TemplateResult, html, CSSResultGroup } from 'lit'; -import { OutlineElement } from '../../base/outline-element/outline-element'; import { customElement } from 'lit/decorators.js'; + +// Our base component, which all others extend. +import { OutlineElement } from '@phase2/outline-core'; + +import componentStyles from './outline-core-styled-text.css.lit'; + + import { wrapLastWord } from '../../../utilities/wrap-last-word'; import { tooltipLink } from '../../../utilities/tooltip'; import { externalLinkText } from '../../../utilities/external-link-text'; import { checkFileType } from '../../../utilities/check-file-type'; -import componentStyles from './sic-styled-text.css.lit'; wrapLastWord; diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.scoped.css b/packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.scoped.css deleted file mode 100644 index 15ab172b9..000000000 --- a/packages/components/outline-core-styled-text/src/sic-styled-text/.ck.ck-content.global.scoped.css +++ /dev/null @@ -1,2501 +0,0 @@ -@import url('https://fast.fonts.net/t/1.css?apiType=css&projectid=e1f3f95f-cc07-474e-ac5e-8b09c6a23e63'); -.ck.ck-content { - --box-shadow-inner-default-type: innerShadow; - --box-shadow-inner-default-color: #000000; - --box-shadow-inner-default-spread: 0; - --box-shadow-inner-default-blur: 0; - --box-shadow-inner-default-y: 0; - --box-shadow-inner-default-x: 10; - --box-shadow-default-type: dropShadow; - --box-shadow-default-color: #000000; - --box-shadow-default-spread: 0; - --box-shadow-default-blur: 0; - --box-shadow-default-y: 0; - --box-shadow-default-x: 0; - --spacing-base: 16; - --line-height-base: 1em; - --line-height-xl: 1.5em; - --line-height-lg: 1.4em; - --line-height-md: 1.3em; - --line-height-sm: 1.2em; - --line-height-xs: 1.1em; - --breakpoint-xxxl: 2180; - --breakpoint-xxl: 1920; - --breakpoint-xl: 1380; - --breakpoint-lg: 1024; - --breakpoint-md: 768; - --breakpoint-sm: 640; - --breakpoint-xs: 480; - --border-width-none: 0; - --border-width-thicker: 2px; - --border-width-thin: 1px; - --letter-spacing-sm: 0.5 px; - --letter-spacing-none: 0; - --paragraph-spacing-8: 16; - --paragraph-spacing-7: 12; - --paragraph-spacing-6: 10; - --paragraph-spacing-5: 9; - --paragraph-spacing-4: 8; - --paragraph-spacing-3: 7; - --paragraph-spacing-2: 6; - --paragraph-spacing-1: 4; - --paragraph-spacing-0: 0; - --text-decoration-underline: underline; - --text-decoration-none: none; - --text-case-none: none; - --text-case-uppercase: uppercase; - --font-size-base: 16; - --font-weight-bold-italic: Bold Italic; - --font-weight-regular: Regular; - --font-weight-italic: Italic; - --font-weight-bold: Bold; - --font-family-sans: Helvetica Neue; - --border-radius-square-default: 0; - --border-radius-rounded-default: 8; - --color-gray-600: #181a1e; - --color-gray-500: #262b31; - --color-gray-400: #505050; - --color-gray-300: #767676; - --color-gray-200: #c1c1c1; - --color-gray-100: #f2f2f2; - --color-black-500: #050505; - --color-purple-600: #221551; - --color-purple-300: #612f93; - --color-purple-200: #a495e8; - --color-purple-100: #d9d8ea; - --color-green-900: #138604; - --color-green-500: #54b948; - --color-green-400: #a4e08b; - --color-green-200: #d7ffc6; - --color-green-100: #e1f5d8; - --color-teal-900: #02658e; - --color-teal-700: #017caf; - --color-teal-500: #017caf; - --color-teal-400: #75d0f4; - --color-teal-300: #bfecff; - --color-teal-200: #d6f3ff; - --color-teal-100: #e0f6ff; - --color-white-500: #ffffff; - --color-yellow-500: #ffd200; - --color-yellow-400: #ffe06a; - --color-yellow-300: #ffeebd; - --color-yellow-200: #ffeebd; - --color-yellow-100: #fff2cc; - --color-orange-500: #f89728; - --color-orange-400: #ffab4b; - --color-orange-300: #fdbb63; - --color-orange-200: #ffdaa2; - --color-orange-100: #ffefdb; - --color-red-500: #e31937; - --color-red-400: #ef434b; - --color-red-300: #f3797a; - --color-red-100: #fbeff3; - --color-blue-900: #002e64; - --color-blue-700: #004ea8; - --color-blue-600: #0865d1; - --color-blue-500: #6ba7ea; - --color-blue-400: #6cb3f8; - --color-blue-300: #a3c6ff; - --color-blue-200: #e3ecfc; - --color-blue-100: #f0f4ff; - --headline-07-mid-paragraph-spacing: ; - --duration-slowly: 0.4s; - --duration-quickly: 0.1s; - --duration-promptly: 0.2s; - --duration-paused: 3.2s; - --duration-instantly: 0s; - --duration-immediately: 0.05s; - --z-index-toast: 10000; - --z-index-popup: 5000; - --z-index-overlay: 8000; - --z-index-modal: 9000; - --z-index-dropdown: 7000; - --z-index-default: 1; - --z-index-deepdive: -99999; - --spacing-08: var(--spacing-base) * 2; - --spacing-06: var(--spacing-base) * 1.5; - --spacing-05: var(--spacing-base) * 1.25; - --spacing-04: 16; - --spacing-03: var(--spacing-base) * 0.75; - --spacing-02: var(--spacing-base) * 0.5; - --spacing-01: var(--spacing-base) * 0.25; - --spacing-64: var(--spacing-base) * 16; - --spacing-56: var(--spacing-base) * 14; - --spacing-48: var(--spacing-base) * 12; - --spacing-40: var(--spacing-base) * 10; - --spacing-32: var(--spacing-base) * 8; - --spacing-24: var(--spacing-base) * 6; - --spacing-20: var(--spacing-base) * 5; - --spacing-16: var(--spacing-base) * 4; - --spacing-12: var(--spacing-base) * 3; - --spacing-10: var(--spacing-base) * 2.5; - --font-size-lg: var(--font-size-base) * 2.75; - --font-size-6xs: var(--font-size-base) * 0.875; - --font-size-5xs: var(--font-size-base) * 1.125; - --font-size-4xs: var(--font-size-base) * 1.25; - --font-size-3xs: var(--font-size-base) * 1.5; - --font-size-2xs: var(--font-size-base) * 1.75; - --font-size-xs: var(--font-size-base) * 2; - --font-size-sm: var(--font-size-base) * 2.25; - --font-size-md: var(--font-size-base) * 2.5; - --font-size-xl: var(--font-size-base) * 3; - --font-size-2xl: var(--font-size-base) * 3.5; - --font-size-3xl: var(--font-size-base) * 3.625; - --font-size-4xl: var(--font-size-base) * 4; - --font-size-5xl: var(--font-size-base) * 4.5; - --color-system-warning-lightest: var(--color-yellow-100); - --color-system-warning-darkest: var(--color-yellow-500); - --color-system-info-lightest: var(--color-teal-200); - --color-system-info-darkest: var(--color-teal-900); - --color-system-success-lightest: var(--color-green-100); - --color-system-success-darkest: var(--color-green-900); - --color-system-error-lightest: var(--color-red-100); - --color-system-error-darkest: var(--color-red-500); - --color-neutral-darkest: var(--color-black-500); - --color-neutral-darker: var(--color-gray-600); - --color-neutral-dark: var(--color-gray-500); - --color-neutral-white: var(--color-white-500); - --color-neutral-lightest: var(--color-gray-100); - --color-neutral-lighter: var(--color-gray-200); - --color-neutral-light: var(--color-gray-300); - --color-neutral-default: var(--color-gray-400); - --color-tertiary-lightest: var(--color-teal-200); - --color-tertiary-light: var(--color-teal-400); - --color-tertiary-default: var(--color-teal-700); - --color-secondary-lightest: var(--color-purple-100); - --color-secondary-light: var(--color-purple-300); - --color-secondary-default: var(--color-purple-600); - --color-primary-lightest: var(--color-blue-100); - --color-primary-light: var(--color-blue-500); - --color-primary-default: var(--color-blue-700); - --body-helper-min-text-case: var(--text-case-none); - --body-helper-min-text-decoration: var(--text-decoration-none); - --body-helper-min-letter-spacing: 0; - --body-helper-min-line-height: var(--line-height-xl); - --body-helper-min-font-weight: var(--font-weight-regular); - --body-helper-min-font-family: var(--font-family-sans); - --body-helper-max-text-case: var(--text-case-none); - --body-helper-max-text-decoration: var(--text-decoration-none); - --body-helper-max-letter-spacing: var(--letter-spacing-sm); - --body-helper-max-font-size: 16; - --body-helper-max-line-height: var(--line-height-xl); - --body-helper-max-font-weight: var(--font-weight-regular); - --body-helper-max-font-family: var(--font-family-sans); - --body-01-min-font-weight: var(--font-weight-regular); - --body-01-min-text-case: var(--text-case-none); - --body-01-min-text-decoration: var(--text-decoration-none); - --body-01-min-letter-spacing: 0; - --body-01-min-font-size: 16; - --body-01-min-line-height: var(--line-height-xl); - --body-01-min-font-family: var(--font-family-sans); - --body-01-max-font-weight: var(--font-weight-regular); - --body-01-max-text-case: var(--text-case-none); - --body-01-max-text-decoration: var(--text-decoration-none); - --body-01-max-letter-spacing: 0; - --body-01-max-line-height: var(--line-height-xl); - --body-01-max-font-family: var(--font-family-sans); - --body-02-min-font-weight: var(--font-weight-regular); - --body-02-min-text-case: var(--text-case-none); - --body-02-min-text-decoration: var(--text-decoration-none); - --body-02-min-letter-spacing: 0; - --body-02-min-line-height: var(--line-height-xl); - --body-02-min-font-family: var(--font-family-sans); - --body-02-max-font-weight: var(--font-weight-regular); - --body-02-max-text-case: var(--text-case-none); - --body-02-max-text-decoration: var(--text-decoration-none); - --body-02-max-letter-spacing: 0; - --body-02-max-line-height: var(--line-height-xl); - --body-02-max-font-family: var(--font-family-sans); - --body-03-min-font-weight: var(--font-weight-regular); - --body-03-min-text-case: var(--text-case-none); - --body-03-min-text-decoration: var(--text-decoration-none); - --body-03-min-letter-spacing: 0; - --body-03-min-line-height: var(--line-height-xl); - --body-03-min-font-family: var(--font-family-sans); - --body-03-max-font-weight: var(--font-weight-regular); - --body-03-max-text-case: var(--text-case-none); - --body-03-max-text-decoration: var(--text-decoration-none); - --body-03-max-letter-spacing: 0; - --body-03-max-line-height: var(--line-height-lg); - --body-03-max-font-family: var(--font-family-sans); - --body-04-min-text-case: var(--text-case-none); - --body-04-min-text-decoration: var(--text-decoration-none); - --body-04-min-letter-spacing: 0; - --body-04-min-line-height: var(--line-height-xl); - --body-04-min-font-weight: var(--font-weight-regular); - --body-04-min-font-family: var(--font-family-sans); - --body-04-mid-text-case: var(--text-case-none); - --body-04-mid-text-decoration: var(--text-decoration-none); - --body-04-mid-letter-spacing: 0; - --body-04-mid-line-height: var(--line-height-xl); - --body-04-mid-font-weight: var(--font-weight-regular); - --body-04-mid-font-family: var(--font-family-sans); - --body-04-max-text-case: var(--text-case-none); - --body-04-max-text-decoration: var(--text-decoration-none); - --body-04-max-letter-spacing: 0; - --body-04-max-line-height: var(--line-height-xl); - --body-04-max-font-weight: var(--font-weight-regular); - --body-04-max-font-family: var(--font-family-sans); - --headline-eyebrow-min-text-case: var(--text-case-uppercase); - --headline-eyebrow-min-text-decoration: var(--text-decoration-none); - --headline-eyebrow-min-letter-spacing: 0; - --headline-eyebrow-min-line-height: var(--line-height-xl); - --headline-eyebrow-min-font-weight: var(--font-weight-regular); - --headline-eyebrow-min-font-family: var(--font-family-sans); - --headline-eyebrow-max-text-decoration: var(--text-decoration-none); - --headline-eyebrow-max-letter-spacing: var(--letter-spacing-sm); - --headline-eyebrow-max-line-height: var(--line-height-xl); - --headline-eyebrow-max-text-case: var(--text-case-uppercase); - --headline-eyebrow-max-font-weight: var(--font-weight-regular); - --headline-eyebrow-max-font-family: var(--font-family-sans); - --headline-01-min-text-case: var(--text-case-none); - --headline-01-min-text-decoration: var(--text-decoration-none); - --headline-01-min-letter-spacing: 0; - --headline-01-min-line-height: var(--line-height-lg); - --headline-01-min-font-weight: var(--font-weight-bold); - --headline-01-min-font-family: var(--font-family-sans); - --headline-01-mid-text-case: var(--text-case-none); - --headline-01-mid-text-decoration: var(--text-decoration-none); - --headline-01-mid-letter-spacing: 0; - --headline-01-mid-line-height: var(--line-height-lg); - --headline-01-mid-font-weight: var(--font-weight-bold); - --headline-01-mid-font-family: var(--font-family-sans); - --headline-01-max-text-case: var(--text-case-none); - --headline-01-max-text-decoration: var(--text-decoration-none); - --headline-01-max-letter-spacing: 0; - --headline-01-max-line-height: var(--line-height-lg); - --headline-01-max-font-weight: var(--font-weight-bold); - --headline-01-max-font-family: var(--font-family-sans); - --headline-02-min-text-case: var(--text-case-none); - --headline-02-min-text-decoration: var(--text-decoration-none); - --headline-02-min-letter-spacing: 0; - --headline-02-min-line-height: var(--line-height-lg); - --headline-02-min-font-weight: var(--font-weight-bold); - --headline-02-min-font-family: var(--font-family-sans); - --headline-02-mid-text-case: var(--text-case-none); - --headline-02-mid-text-decoration: var(--text-decoration-none); - --headline-02-mid-letter-spacing: 0; - --headline-02-mid-line-height: var(--line-height-lg); - --headline-02-mid-font-weight: var(--font-weight-bold); - --headline-02-mid-font-family: var(--font-family-sans); - --headline-02-max-text-case: var(--text-case-none); - --headline-02-max-text-decoration: var(--text-decoration-none); - --headline-02-max-letter-spacing: 0; - --headline-02-max-line-height: var(--line-height-md); - --headline-02-max-font-weight: var(--font-weight-bold); - --headline-02-max-font-family: var(--font-family-sans); - --headline-03-min-line-height: var(--line-height-lg); - --headline-03-min-font-family: var(--font-family-sans); - --headline-03-mid-line-height: var(--line-height-md); - --headline-03-mid-font-family: var(--font-family-sans); - --headline-03-max-line-height: var(--line-height-sm); - --headline-03-max-font-family: var(--font-family-sans); - --headline-04-min-text-case: var(--text-case-none); - --headline-04-min-text-decoration: var(--text-decoration-none); - --headline-04-min-letter-spacing: 0; - --headline-04-min-line-height: var(--line-height-md); - --headline-04-min-font-weight: var(--font-weight-bold); - --headline-04-min-font-family: var(--font-family-sans); - --headline-04-mid-text-case: var(--text-case-none); - --headline-04-mid-text-decoration: var(--text-decoration-none); - --headline-04-mid-letter-spacing: 0; - --headline-04-mid-line-height: var(--line-height-sm); - --headline-04-mid-font-weight: var(--font-weight-bold); - --headline-04-mid-font-family: var(--font-family-sans); - --headline-04-max-text-case: var(--text-case-none); - --headline-04-max-text-decoration: var(--text-decoration-none); - --headline-04-max-letter-spacing: 0; - --headline-04-max-line-height: var(--line-height-sm); - --headline-04-max-font-weight: var(--font-weight-bold); - --headline-04-max-font-family: var(--font-family-sans); - --headline-05-min-text-case: var(--text-case-none); - --headline-05-min-text-decoration: var(--text-decoration-none); - --headline-05-min-letter-spacing: 0; - --headline-05-min-line-height: var(--line-height-md); - --headline-05-min-font-weight: var(--font-weight-bold); - --headline-05-min-font-family: var(--font-family-sans); - --headline-05-mid-text-case: var(--text-case-none); - --headline-05-mid-text-decoration: var(--text-decoration-none); - --headline-05-mid-letter-spacing: 0; - --headline-05-mid-line-height: var(--line-height-sm); - --headline-05-mid-font-weight: var(--font-weight-bold); - --headline-05-mid-font-family: var(--font-family-sans); - --headline-05-max-text-case: var(--text-case-none); - --headline-05-max-text-decoration: var(--text-decoration-none); - --headline-05-max-letter-spacing: 0; - --headline-05-max-line-height: var(--line-height-xs); - --headline-05-max-font-weight: var(--font-weight-bold); - --headline-05-max-font-family: var(--font-family-sans); - --headline-06-min-text-case: var(--text-case-none); - --headline-06-min-text-decoration: var(--text-decoration-none); - --headline-06-min-letter-spacing: 0; - --headline-06-min-line-height: var(--line-height-sm); - --headline-06-min-font-weight: var(--font-weight-bold); - --headline-06-min-font-family: var(--font-family-sans); - --headline-06-mid-text-case: var(--text-case-none); - --headline-06-mid-text-decoration: var(--text-decoration-none); - --headline-06-mid-letter-spacing: 0; - --headline-06-mid-line-height: var(--line-height-xs); - --headline-06-mid-font-weight: var(--font-weight-bold); - --headline-06-mid-font-family: var(--font-family-sans); - --headline-06-max-text-case: var(--text-case-none); - --headline-06-max-text-decoration: var(--text-decoration-none); - --headline-06-max-letter-spacing: 0; - --headline-06-max-line-height: var(--line-height-xs); - --headline-06-max-font-weight: var(--font-weight-bold); - --headline-06-max-font-family: var(--font-family-sans); - --headline-07-min-text-case: var(--text-case-none); - --headline-07-min-text-decoration: var(--text-decoration-none); - --headline-07-min-letter-spacing: 0; - --headline-07-min-line-height: var(--line-height-sm); - --headline-07-min-font-weight: var(--font-weight-bold); - --headline-07-min-font-family: var(--font-family-sans); - --headline-07-mid-text-case: var(--text-case-none); - --headline-07-mid-text-decoration: var(--text-decoration-none); - --headline-07-mid-letter-spacing: 0; - --headline-07-mid-line-height: var(--line-height-xs); - --headline-07-mid-font-weight: var(--font-weight-bold); - --headline-07-mid-font-family: var(--font-family-sans); - --headline-07-max-text-case: var(--text-case-none); - --headline-07-max-text-decoration: var(--text-decoration-none); - --headline-07-max-letter-spacing: 0; - --headline-07-max-line-height: var(--line-height-xs); - --headline-07-max-font-weight: var(--font-weight-bold); - --headline-07-max-font-family: var(--font-family-sans); - --stroke-none: 0; - --stroke-light: var(--border-width-thin); - --stroke-default: var(--border-width-thicker); - --body-helper-min-font-size: var(--font-size-6xs); - --body-01-max-font-size: var(--font-size-4xs); - --body-02-min-font-size: var(--font-size-5xs); - --body-02-max-font-size: var(--font-size-3xs); - --body-03-min-font-size: var(--font-size-4xs); - --body-03-max-font-size: var(--font-size-2xs); - --body-04-min-font-size: var(--font-size-4xs); - --body-04-mid-font-size: var(--font-size-3xs); - --body-04-max-font-size: var(--font-size-2xs); - --headline-eyebrow-min-font-size: var(--font-size-6xs); - --headline-eyebrow-max-font-size: var(--font-size-5xs); - --headline-01-min-font-size: var(--font-size-5xs); - --headline-01-mid-font-size: var(--font-size-4xs); - --headline-01-max-font-size: var(--font-size-2xs); - --headline-02-min-font-size: var(--font-size-4xs); - --headline-02-mid-font-size: var(--font-size-3xs); - --headline-02-max-font-size: var(--font-size-sm); - --headline-03-min-font-size: var(--font-size-3xs); - --headline-03-mid-font-size: var(--font-size-2xs); - --headline-03-max-font-size: var(--font-size-md); - --headline-04-min-font-size: var(--font-size-2xs); - --headline-04-mid-font-size: var(--font-size-xs); - --headline-04-max-font-size: var(--font-size-xl); - --headline-05-min-font-size: var(--font-size-xs); - --headline-05-mid-font-size: var(--font-size-sm); - --headline-05-max-font-size: var(--font-size-2xl); - --headline-06-min-font-size: var(--font-size-sm); - --headline-06-mid-font-size: var(--font-size-lg); - --headline-06-max-font-size: var(--font-size-4xl); - --headline-07-min-font-size: var(--font-size-md); - --headline-07-mid-font-size: var(--font-size-2xl); - --headline-07-max-font-size: var(--font-size-5xl); -} -@font-face { - font-family: 'Helvetica Neue'; - src: url(assets/fonts/helvetica-neue/3dac71eb-afa7-4c80-97f0-599202772905.woff2) - format('woff2'); -} -@font-face { - font-family: 'Helvetica Neue'; - font-style: italic; - src: url(assets/fonts/helvetica-neue/21c44514-f4d6-4cff-a5de-e4cac5e61aff.woff2) - format('woff2'); -} -@font-face { - font-family: 'Helvetica Neue'; - font-weight: 700; - src: url(assets/fonts/helvetica-neue/531c5a28-5575-4f58-96d4-a80f7b702d7b.woff2) - format('woff2'); -} -.ck.ck-content { - --status-success: var(--color-system-success-darkest); - --status-warning: var(--color-system-warning-darkest); - --status-error: var(--color-system-error-darkest); - --status-info: var(--color-system-info-darkest); - --color-social-facebook: #3b5998; - --color-social-twitter: #1da1f2; - --color-social-instagram: #e1306c; - --color-social-linkedin: #0077b5; - --color-social-youtube: #ff0000; - --color-social-pinterest: #bd081c; - --color-social-tumblr: #35465c; - --color-social-reddit: #ff4500; - --color-social-vimeo: #1ab7ea; - --color-social-whatsapp: #25d366; - --color-social-snapchat: #fffc00; - --color-social-discord: #7289da; - --color-social-medium: #00ab6c; - --color-social-slack: #4a154b; - --color-social-spotify: #1ed760; - --color-social-twitch: #6441a5; - --color-social-vine: #00b488; - --color-social-yahoo: #400191; - --color-social-500px: #02adea; - --color-social-behance: #1769ff; - --color-social-deviantart: #05cc47; - --color-social-dribbble: #ea4c89; - --color-social-flickr: #ff0084; - --color-social-foursquare: #0072b1; - --color-social-github: #333; - --color-social-google: #dd4b39; - --color-social-houzz: #7ac142; - --color-social-lastfm: #c3000d; - --color-social-paypal: #003087; - --color-social-periscope: #3aa1f3; - --outline-phase2-blue: #0080ff; - --outline-karma-coral: #fa5c5c; - --outline-soft-black: #171717; - --outline-not-gray: #cfc7d4; - --outline-misty-teal: #73f2e5; - --outline-electric-violet: #9484ff; - --outline-dusty-blue: #7fc7ee; - --outline-transparent: transparent; - --outline-white: #fff; - --outline-black: #000; - --outline-gray-50: #fafafa; - --outline-gray-100: #f5f5f5; - --outline-gray-200: #e5e5e5; - --outline-gray-300: #d4d4d4; - --outline-gray-400: #a3a3a3; - --outline-gray-500: #737373; - --outline-gray-600: #525252; - --outline-gray-700: #404040; - --outline-gray-800: #262626; - --outline-gray-900: #171717; - --outline-blue-50: #eff6ff; - --outline-blue-100: #dbeafe; - --outline-blue-200: #bfdbfe; - --outline-blue-300: #93c5fd; - --outline-blue-400: #60a5fa; - --outline-blue-500: #3b82f6; - --outline-blue-600: #2563eb; - --outline-blue-700: #1d4ed8; - --outline-blue-800: #1e40af; - --outline-blue-900: #1e3a8a; - --screen-xs: 480px; - --screen-sm: 640px; - --screen-md: 768px; - --screen-lg: 1024px; - --screen-xl: 1380px; - --screen-xxl: 1920px; - --screen-xxxl: 2180px; - --container-mt-normal: var(--spacing-16); - --container-mb-normal: var(--spacing-16); - --container-py-normal: clamp( - 2rem, - 1.032258064516129rem + 4.838709677419355vw, - 5rem - ); - --container-pt-normal: var(--container-py-normal); - --container-pb-normal: var(--container-py-normal); - --container-px-normal: clamp( - var(--spacing-04), - calc(-0.43rem + 7.16vw), - var(--spacing-32) - ); - --container-mt-none: 0; - --container-mb-none: 0; - --container-py-none: 0; - --container-pt-none: 0; - --container-pb-none: 0; - --container-px-none: 0; - --spacing-0: 0px; - --spacing-01: calc(var(--spacing-base) * 0.25); - --spacing-02: calc(var(--spacing-base) * 0.5); - --spacing-03: calc(var(--spacing-base) * 0.75); - --spacing-04: calc(var(--spacing-base)); - --spacing-05: calc(var(--spacing-base) * 1.25); - --spacing-06: calc(var(--spacing-base) * 1.5); - --spacing-08: calc(var(--spacing-base) * 2); - --spacing-10: calc(var(--spacing-base) * 2.5); - --spacing-12: calc(var(--spacing-base) * 3); - --spacing-15: calc(var(--spacing-base) * 3.75); - --spacing-16: calc(var(--spacing-base) * 4); - --spacing-18: calc(var(--spacing-base) * 4.5); - --spacing-20: calc(var(--spacing-base) * 5); - --spacing-24: calc(var(--spacing-base) * 6); - --spacing-32: calc(var(--spacing-base) * 8); - --spacing-40: calc(var(--spacing-base) * 10); - --spacing-48: calc(var(--spacing-base) * 12); - --spacing-56: calc(var(--spacing-base) * 14); - --spacing-64: calc(var(--spacing-base) * 16); - --spacing-px: 1px; - --spacing-1: var(--spacing-01); - --spacing-2: var(--spacing-02); - --spacing-3: var(--spacing-03); - --spacing-4: var(--spacing-04); - --spacing-5: var(--spacing-05); - --spacing-6: var(--spacing-06); - --spacing-8: var(--spacing-08); - --fs-xs: 0.75rem; - --fs-sm: 0.875rem; - --fs-base: 1rem; - --fs-lg: 1.125rem; - --fs-xl: 1.25rem; - --fs-2xl: 1.5rem; - --fs-3xl: 1.875rem; - --fs-4xl: 2.25rem; - --fs-5xl: 3.5rem; - --fs-6xl: 4.5rem; - --fs-7xl: 5.5rem; - --fs-8xl: 6.5rem; - --fs-9xl: 7.5rem; - --lh-xs: 1rem; - --lh-sm: 1.25rem; - --lh-base: 1.5rem; - --lh-lg: 1.75rem; - --lh-xl: 1.75rem; - --lh-2xl: 2rem; - --lh-3xl: 2.25rem; - --lh-4xl: 2.5rem; - --lh-5xl: 3.75rem; - --lh-6xl: 4.75rem; - --lh-7xl: 5.75rem; - --lh-8xl: 6.75rem; - --lh-9xl: 7.75rem; - --ff-display: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; - --ff-body: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; - --ff-demo: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; - --fw-thin: 100; - --fw-extralight: 200; - --fw-light: 300; - --fw-normal: 400; - --fw-medium: 500; - --fw-semibold: 600; - --fw-bold: 700; - --fw-extrabold: 800; - --fw-black: 900; - --fs-h1: 4rem; - --fs-h1-medium: 3rem; - --fs-h1-small: 2.5rem; - --lh-h1: 3rem; - --lh-h1-medium: 3.75rem; - --lh-h1-small: 2rem; - --fs-h2: 2.75rem; - --fs-h2-medium: 2.5rem; - --fs-h2-small: 2rem; - --lh-h2: 3.5rem; - --lh-h2-medium: 3rem; - --lh-h2-small: 2.5rem; - --fs-h3: 2rem; - --fs-h3-medium: 1.75rem; - --fs-h3-small: 1.5rem; - --lh-h3: 2.25rem; - --lh-h3-medium: 2rem; - --lh-h3-small: 1.75rem; - --fs-h4: 1.5rem; - --fs-h4-medium: 1.5rem; - --fs-h4-small: 1.375rem; - --lh-h4: 2rem; - --lh-h4-medium: 1.75rem; - --lh-h4-small: 1.75rem; - --fs-h5: 1.375rem; - --fs-h5-medium: 1.25rem; - --fs-h5-small: 1.125rem; - --lh-h5: 1.75rem; - --lh-h5-medium: 1.5rem; - --lh-h5-small: 1.375rem; - --fs-h6: 1.125rem; - --fs-h6-medium: 1.125rem; - --fs-h6-small: 1rem; - --lh-h6: 1.5rem; - --lh-h6-medium: 1.375rem; - --lh-h6-small: 1.25rem; - --outline-ring-width: 2px; - --outline-ring-inset: ; - --outline-ring-offset-width: 2px; - --outline-ring-offset-color: var(--outline-gray-100); - --outline-ring-color: var(--outline-soft-black); - --outline-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0); - --outline-ring-shadow: 0 0 rgba(0, 0, 0, 0); - --outline-ring-offset-shadow: var(--outline-ring-inset) 0 0 0 - var(--outline-ring-offset-width) var(--outline-ring-offset-color); - --outline-ring-shadow: var(--outline-ring-inset) 0 0 0 - calc(var(--outline-ring-width) + var(--outline-ring-offset-width)) - var(--outline-ring-color); - --outline-shadow: 0 0 rgba(0, 0, 0, 0); - --outline-shadow-colored: 0 0 rgba(0, 0, 0, 0); - --outline-admin-links-color-hover: var(--color-primary-default); - --outline-admin-links-bg-hover: var(--color-neutral-white); - --outline-admin-links-bg-active: var(--color-primary-default); - --spacing-base: 1rem; - --font-size-base: 1rem; - --body-01-min-font-size: var(--font-size-base); - --body-helper-max-font-size: var(--font-size-base); - --sic-bg-color: var(--color-neutral-white); - --sic-text-color: var(--color-neutral-default); - --sic-heading-color: var(--color-neutral-dark); - --sic-accent-color: var(--color-primary-default); - --border-radius-rounded-default: 8px; - --border-radius-button-default: 4px; - --border-radius-outline-default: 1px; - --border-width-thickest: 3px; - --grid-gap: var(--spacing-08); - --body-helper-font-size: clamp( - calc(var(--body-helper-min-font-size)), - 0.666rem + 0.52083vw, - calc(var(--body-helper-max-font-size)) - ); - --body-01-font-size: clamp( - calc(var(--body-01-min-font-size)), - 0.7148rem + 0.4464vw, - calc(var(--body-01-max-font-size)) - ); - --body-01-font-size-mid: calc(var(--body-01-min-font-size)); - --body-02-font-size: clamp( - calc(var(--body-02-min-font-size)), - 0.69rem + 0.66vw, - calc(var(--body-02-max-font-size)) - ); - --body-03-font-size: clamp( - calc(var(--body-03-min-font-size)), - 0.82rem + 0.66vw, - calc(var(--body-03-max-font-size)) - ); - --body-04-font-size: clamp( - calc(var(--body-04-min-font-size)), - 1.15rem + 0.5vw, - calc(var(--body-04-max-font-size)) - ); - --body-article-byline: 1.125rem; - --headline-eyebrow-font-size: clamp( - calc(var(--headline-eyebrow-min-font-size)), - 0.589rem + 0.446vw, - calc(var(--headline-eyebrow-max-font-size)) - ); - --headline-01-font-size: clamp( - calc(var(--headline-01-min-font-size)), - 0.41rem + 1.116vw, - calc(var(--headline-01-max-font-size)) - ); - --headline-01-font-size-mid: clamp( - calc(var(--headline-01-min-font-size)), - 0.98rem + 0.223vw, - calc(var(--headline-01-mid-font-size)) - ); - --headline-02-font-size: clamp( - calc(var(--headline-02-min-font-size)), - 0.107rem + 1.785vw, - calc(var(--headline-02-max-font-size)) - ); - --headline-02-font-size-mid: clamp( - calc(var(--headline-02-min-font-size)), - 0.964rem + 0.446vw, - calc(var(--headline-02-mid-font-size)) - ); - --headline-03-font-size: clamp( - calc(var(--headline-03-min-font-size)), - 0.357rem + 1.785vw, - calc(var(--headline-03-max-font-size)) - ); - --headline-04-font-size: clamp( - calc(var(--headline-04-min-font-size)), - 0.321rem + 2.232vw, - calc(var(--headline-04-max-font-size)) - ); - --headline-05-font-size: clamp( - calc(var(--headline-05-min-font-size)), - 0.285rem + 2.678vw, - calc(var(--headline-05-max-font-size)) - ); - --headline-06-font-size: clamp( - calc(var(--headline-06-min-font-size)), - 0.25rem + 3.125vw, - calc(var(--headline-06-max-font-size)) - ); - --headline-07-font-size: clamp( - calc(var(--headline-07-min-font-size)), - 0.21rem + 3.57vw, - calc(var(--headline-07-max-font-size)) - ); - --body-helper-line-height: var(--line-height-xs); - --body-01-line-height: var(--body-01-min-line-height); - --body-02-line-height: var(--body-02-min-line-height); - --body-03-line-height: clamp( - calc(var(--body-03-min-line-height)), - 1.23rem + 1vw, - calc(var(--body-03-max-line-height)) - ); - --body-04-line-height: var(--body-04-min-line-height); - --headline-eyebrow-line-height: var(--headline-eyebrow-min-line-height); - --headline-01-line-height: var(--headline-01-min-line-height); - --headline-02-line-height: clamp( - calc(var(--headline-02-min-line-height)), - 1.1285vw + 1.5178rem, - calc(var(--headline-02-max-line-height)) - ); - --headline-03-line-height: clamp( - calc(var(--headline-03-min-line-height)), - 1.0714vw + 1.6071rem, - calc(var(--headline-03-max-line-height)) - ); - --headline-04-line-height: clamp( - calc(var(--headline-04-min-line-height)), - 0.7607vw + 2.366rem, - calc(var(--headline-04-max-line-height)) - ); - --headline-05-line-height: clamp( - calc(var(--headline-05-min-line-height)), - 1.1714vw + 2.232rem, - calc(var(--headline-05-max-line-height)) - ); - --headline-06-line-height: clamp( - calc(var(--headline-06-min-line-height)), - 0.7571vw + 3.035rem, - calc(var(--headline-06-max-line-height)) - ); - --headline-07-line-height: clamp( - calc(var(--headline-07-min-line-height)), - 0.7714vw + 3.482rem, - calc(var(--headline-07-max-line-height)) - ); -} -.ck.ck-content { - color: #262b31; - color: var(--sic-heading-color); - font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; - font-family: var(--ff-display); - font-weight: 700; - font-weight: var(--fw-bold); - display: block; -} -.ck.ck-content h1, -.ck.ck-content h2, -.ck.ck-content h3, -.ck.ck-content h4, -.ck.ck-content h5, -.ck.ck-content h6 { - margin: 0; -} -.ck.ck-content[level-size], -.ck.ck-content[level-size] h1, -.ck.ck-content[level-size] h2, -.ck.ck-content[level-size] h3, -.ck.ck-content[level-size] h4, -.ck.ck-content[level-size] h5, -.ck.ck-content[level-size] h6 { - font-size: var(--heading-font-size); - line-height: var(--heading-line-height); -} -.ck.ck-content h1, -.ck.ck-content .headline-07 { - font-size: clamp(calc(1rem * 2.5), 0.21rem + 3.57vw, calc(1rem * 4.5)); - font-size: var(--headline-07-font-size); - line-height: clamp(calc(1.2em), 0.7714vw + 3.482rem, calc(1.1em)); - line-height: var(--headline-07-line-height); -} -.ck.ck-content h2, -.ck.ck-content .headline-06 { - font-size: clamp(calc(1rem * 2.25), 0.25rem + 3.125vw, calc(1rem * 4)); - font-size: var(--headline-06-font-size); - line-height: clamp(calc(1.2em), 0.7571vw + 3.035rem, calc(1.1em)); - line-height: var(--headline-06-line-height); -} -.ck.ck-content h3, -.ck.ck-content .headline-05 { - font-size: clamp(calc(1rem * 2), 0.285rem + 2.678vw, calc(1rem * 3.5)); - font-size: var(--headline-05-font-size); - line-height: clamp(calc(1.3em), 1.1714vw + 2.232rem, calc(1.1em)); - line-height: var(--headline-05-line-height); -} -.ck.ck-content h4, -.ck.ck-content .headline-04 { - font-size: clamp(calc(1rem * 1.75), 0.321rem + 2.232vw, calc(1rem * 3)); - font-size: var(--headline-04-font-size); - line-height: clamp(calc(1.3em), 0.7607vw + 2.366rem, calc(1.2em)); - line-height: var(--headline-04-line-height); -} -.ck.ck-content h5, -.ck.ck-content .headline-03 { - font-size: clamp(calc(1rem * 1.5), 0.357rem + 1.785vw, calc(1rem * 2.5)); - font-size: var(--headline-03-font-size); - line-height: clamp(calc(1.4em), 1.0714vw + 1.6071rem, calc(1.2em)); - line-height: var(--headline-03-line-height); -} -.ck.ck-content h6, -.ck.ck-content .headline-02 { - font-size: clamp(calc(1rem * 1.25), 0.107rem + 1.785vw, calc(1rem * 2.25)); - font-size: var(--headline-02-font-size); - line-height: clamp(calc(1.4em), 1.1285vw + 1.5178rem, calc(1.3em)); - line-height: var(--headline-02-line-height); -} -.ck.ck-content .headline-01 { - font-size: clamp(calc(1rem * 1.125), 0.41rem + 1.116vw, calc(1rem * 1.75)); - font-size: var(--headline-01-font-size); - line-height: 1.4em; - line-height: var(--headline-01-line-height); -} -.ck.ck-content[level-style='normal'] { - font-weight: 400; - font-weight: var(--fw-normal); -} -.ck.ck-content { - --sic-button--default--family: var(--ff-body); - --sic-button--default--weight: var(--fw-bold); - --sic-button--default--font-size: clamp( - calc(var(--font-size-6xs)), - 0.7321428571428572rem + 0.2232142857142857vw, - calc(var(--font-size-base)) - ); - --sic-button--default--line-height: 1em; - --sic-button--default--padding: var(--spacing-04) var(--spacing-08); - --sic-button--default--radius: var(--border-radius-button-default); -} -.ck.ck-content { - --sic-button--default--primary-padding: var(--sic-button--default-padding); - --sic-button--default--primary-radius: var(--sic-button--default-radius); - --sic-button--default--primary-bg-color: var(--color-primary-default); - --sic-button--default--primary-text-color: var(--color-neutral-white); - --sic-button--default--primary-weight: var(--sic-button--default-weight); - --sic-button--default--primary-border-color: var(--color-primary-default); - --sic-button--default--primary-border-width: var(--border-width-thickest); - --sic-button--default--primary-bg-color--hover: var(--color-neutral-white); - --sic-button--default--primary-text-color--hover: var( - --color-primary-default - ); - --sic-button--default--primary-bg-color--focus: var(--color-primary-default); - --sic-button--default--primary-text-color--focus: var(--color-neutral-white); - --sic-button--default--primary-outline-color--focus: var( - --color-primary-default - ); - --sic-button--default--primary-outline-width--focus: var( - --border-width-thicker - ); - --sic-button--default--primary-outline-offset--focus: var( - --border-width-thicker - ); - --sic-button--default--primary-bg-color--disabled: var( - --color-neutral-default - ); - --sic-button--default--primary-text-color--disabled: var( - --color-neutral-white - ); - --sic-button--default--primary-border-color--disabled: var( - --color-neutral-default - ); - --sic-button--default--primary-outline-color--disabled: var( - --color-primary-default - ); -} -.ck.ck-content { - display: inline-block; - width: 100%; -} -@media (min-width: 640px) { - .ck.ck-content { - width: auto; - } -} -.ck.ck-content .btn, -.ck.ck-content .sic-btn { - box-sizing: border-box; -} -.ck.ck-content a.btn, -.ck.ck-content a.sic-btn, -.ck.ck-content button.sic-btn, -.ck.ck-content button, -.ck.ck-content input[type='submit'] { - display: flex; - white-space: normal; - justify-content: center; - align-items: center; - width: 100%; - min-height: calc(1rem * 3); - min-height: var(--spacing-12); - cursor: pointer; - font-family: var(--sic-button--default--family); - font-family: var(--sic-button--family, var(--sic-button--default--family)); - font-weight: var(--sic-button--default--weight); - font-weight: var(--sic-button--weight, var(--sic-button--default--weight)); - font-size: var(--sic-button--default--font-size); - font-size: var( - --sic-button--font-size, - var(--sic-button--default--font-size) - ); - text-decoration: none; - line-height: var(--sic-button--default--line-height); - line-height: var( - --sic-button--line-height, - var(--sic-button--default--line-height) - ); - padding: var(--sic-button--default--padding); - padding: var(--sic-button--padding, var(--sic-button--default--padding)); - color: var(--sic-button--default--primary-text-color); - color: var( - --sic-button--text-color, - var(--sic-button--default--primary-text-color) - ); - background-color: var(--sic-button--default--primary-bg-color); - background-color: var( - --sic-button--bg-color, - var(--sic-button--default--primary-bg-color) - ); - border-color: var(--sic-button--default--primary-border-color); - border-color: var( - --sic-button--border-color, - var(--sic-button--default--primary-border-color) - ); - border-style: solid; - border-width: var(--sic-button--default--primary-border-width); - border-width: var( - --sic-button--border-width, - var(--sic-button--default--primary-border-width) - ); - border-radius: var(--sic-button--default--radius); - border-radius: var(--sic-button--radius, var(--sic-button--default--radius)); -} -@media (prefers-reduced-motion: no-preference) { - .ck.ck-content a.btn, - .ck.ck-content a.sic-btn, - .ck.ck-content button.sic-btn, - .ck.ck-content button, - .ck.ck-content input[type='submit'] { - transition: all 0.1s; - transition: all var(--duration-quickly); - } -} -.ck.ck-content a.btn:hover, -.ck.ck-content a.btn:focus-visible, -.ck.ck-content a.sic-btn:hover, -.ck.ck-content a.sic-btn:focus-visible, -.ck.ck-content button.sic-btn:hover, -.ck.ck-content button.sic-btn:focus-visible, -.ck.ck-content button:hover, -.ck.ck-content button:focus-visible, -.ck.ck-content input[type='submit']:hover, -.ck.ck-content input[type='submit']:focus-visible { - color: var(--sic-button--default--primary-text-color--hover); - color: var( - --sic-button--text-color--hover, - var(--sic-button--default--primary-text-color--hover) - ); - background-color: var(--sic-button--default--primary-bg-color--hover); - background-color: var( - --sic-button--bg-color--hover, - var(--sic-button--default--primary-bg-color--hover) - ); -} -.ck.ck-content a.btn:focus-visible, -.ck.ck-content a.sic-btn:focus-visible, -.ck.ck-content button.sic-btn:focus-visible, -.ck.ck-content button:focus-visible, -.ck.ck-content input[type='submit']:focus-visible { - color: var(--sic-button--default--primary-text-color); - color: var( - --sic-button--text-color, - var(--sic-button--default--primary-text-color) - ); - background-color: var(--sic-button--default--primary-bg-color); - background-color: var( - --sic-button--bg-color, - var(--sic-button--default--primary-bg-color) - ); - outline-color: var(--sic-button--default--primary-outline-color--focus); - outline-color: var( - --sic-button--outline-color, - var(--sic-button--default--primary-outline-color--focus) - ); - outline-style: solid; - outline-width: var(--sic-button--default--primary-outline-width--focus); - outline-width: var( - --sic-button--outline-width, - var(--sic-button--default--primary-outline-width--focus) - ); - outline-offset: var(--sic-button--default--primary-outline-offset--focus); - outline-offset: var( - --sic-button--outline-offset, - var(--sic-button--default--primary-outline-offset--focus) - ); -} -@media (min-width: 640px) { - .ck.ck-content a.btn, - .ck.ck-content a.sic-btn, - .ck.ck-content button.sic-btn, - .ck.ck-content button, - .ck.ck-content input[type='submit'] { - width: auto; - display: inline-block; - text-align: center; - } -} -.ck.ck-content a.btn.secondary, -.ck.ck-content a.sic-btn.secondary, -.ck.ck-content button.sic-btn.secondary, -.ck.ck-content button.secondary, -.ck.ck-content input[type='submit'].secondary { - background-color: transparent; - border-color: transparent; - color: var(--sic-button--default--primary-text-color--hover); - color: var( - --sic-button--text-color--hover, - var(--sic-button--default--primary-text-color--hover) - ); - text-decoration: underline; -} -.ck.ck-content a.btn.secondary:hover, -.ck.ck-content a.btn.secondary:focus-visible, -.ck.ck-content a.sic-btn.secondary:hover, -.ck.ck-content a.sic-btn.secondary:focus-visible, -.ck.ck-content button.sic-btn.secondary:hover, -.ck.ck-content button.sic-btn.secondary:focus-visible, -.ck.ck-content button.secondary:hover, -.ck.ck-content button.secondary:focus-visible, -.ck.ck-content input[type='submit'].secondary:hover, -.ck.ck-content input[type='submit'].secondary:focus-visible { - border-color: var(--sic-button--default--primary-border-color); - border-color: var( - --sic-button--border-color, - var(--sic-button--default--primary-border-color) - ); -} -.ck.ck-content a.btn.file-link, -.ck.ck-content a.btn.pdf-link, -.ck.ck-content a.btn.ppt-link, -.ck.ck-content a.sic-btn.file-link, -.ck.ck-content a.sic-btn.pdf-link, -.ck.ck-content a.sic-btn.ppt-link, -.ck.ck-content button.sic-btn.file-link, -.ck.ck-content button.sic-btn.pdf-link, -.ck.ck-content button.sic-btn.ppt-link, -.ck.ck-content button.file-link, -.ck.ck-content button.pdf-link, -.ck.ck-content button.ppt-link, -.ck.ck-content input[type='submit'].file-link, -.ck.ck-content input[type='submit'].pdf-link, -.ck.ck-content input[type='submit'].ppt-link { - flex-wrap: wrap; -} -@media (min-width: 640px) { - .ck.ck-content a.btn.file-link, - .ck.ck-content a.btn.pdf-link, - .ck.ck-content a.btn.ppt-link, - .ck.ck-content a.sic-btn.file-link, - .ck.ck-content a.sic-btn.pdf-link, - .ck.ck-content a.sic-btn.ppt-link, - .ck.ck-content button.sic-btn.file-link, - .ck.ck-content button.sic-btn.pdf-link, - .ck.ck-content button.sic-btn.ppt-link, - .ck.ck-content button.file-link, - .ck.ck-content button.pdf-link, - .ck.ck-content button.ppt-link, - .ck.ck-content input[type='submit'].file-link, - .ck.ck-content input[type='submit'].pdf-link, - .ck.ck-content input[type='submit'].ppt-link { - flex-wrap: nowrap; - } -} -.ck.ck-content a.btn.file-link::before, -.ck.ck-content a.btn.pdf-link::before, -.ck.ck-content a.btn.ppt-link::before, -.ck.ck-content a.sic-btn.file-link::before, -.ck.ck-content a.sic-btn.pdf-link::before, -.ck.ck-content a.sic-btn.ppt-link::before, -.ck.ck-content button.sic-btn.file-link::before, -.ck.ck-content button.sic-btn.pdf-link::before, -.ck.ck-content button.sic-btn.ppt-link::before, -.ck.ck-content button.file-link::before, -.ck.ck-content button.pdf-link::before, -.ck.ck-content button.ppt-link::before, -.ck.ck-content input[type='submit'].file-link::before, -.ck.ck-content input[type='submit'].pdf-link::before, -.ck.ck-content input[type='submit'].ppt-link::before { - content: ''; - background-size: 100% 100%; - display: inline-block; - margin-right: calc(calc(1rem * 0.5)); - margin-right: calc(var(--spacing-02)); - transform: translateY(2px); - height: calc(1rem * 1.25); - height: var(--spacing-05); - width: calc(1rem * 1.25); - width: var(--spacing-05); -} -.ck.ck-content a.btn.pdf-link::before, -.ck.ck-content a.sic-btn.pdf-link::before, -.ck.ck-content button.sic-btn.pdf-link::before, -.ck.ck-content button.pdf-link::before, -.ck.ck-content input[type='submit'].pdf-link::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-button--icon-pdf, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.btn.file-link::before, -.ck.ck-content a.sic-btn.file-link::before, -.ck.ck-content button.sic-btn.file-link::before, -.ck.ck-content button.file-link::before, -.ck.ck-content input[type='submit'].file-link::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-button--icon-file, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.btn.ppt-link::before, -.ck.ck-content a.sic-btn.ppt-link::before, -.ck.ck-content button.sic-btn.ppt-link::before, -.ck.ck-content button.ppt-link::before, -.ck.ck-content input[type='submit'].ppt-link::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-link--icon-ppt, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.btn.pdf-link:hover::before, -.ck.ck-content a.sic-btn.pdf-link:hover::before, -.ck.ck-content button.sic-btn.pdf-link:hover::before, -.ck.ck-content button.pdf-link:hover::before, -.ck.ck-content input[type='submit'].pdf-link:hover::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-button--icon-pdf--hover, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.btn.file-link:hover::before, -.ck.ck-content a.sic-btn.file-link:hover::before, -.ck.ck-content button.sic-btn.file-link:hover::before, -.ck.ck-content button.file-link:hover::before, -.ck.ck-content input[type='submit'].file-link:hover::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-button--icon-file--hover, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.btn.ppt-link:hover::before, -.ck.ck-content a.sic-btn.ppt-link:hover::before, -.ck.ck-content button.sic-btn.ppt-link:hover::before, -.ck.ck-content button.ppt-link:hover::before, -.ck.ck-content input[type='submit'].ppt-link:hover::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-link--icon-ppt--hover, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.btn[target='_blank'] .last-word::after, -.ck.ck-content a.sic-btn[target='_blank'] .last-word::after, -.ck.ck-content button.sic-btn[target='_blank'] .last-word::after, -.ck.ck-content button[target='_blank'] .last-word::after, -.ck.ck-content input[type='submit'][target='_blank'] .last-word::after { - content: ''; - display: inline-block; - margin-left: calc(calc(1rem * 0.75)); - margin-left: calc(var(--spacing-03)); - background-size: contain; - background-position: center; - background-repeat: no-repeat; -} -.ck.ck-content a.btn[target='_blank'] .last-word::after, -.ck.ck-content a.sic-btn[target='_blank'] .last-word::after, -.ck.ck-content button.sic-btn[target='_blank'] .last-word::after, -.ck.ck-content button[target='_blank'] .last-word::after, -.ck.ck-content input[type='submit'][target='_blank'] .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - background-image: var( - --sic-button--icon-external, - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") - ); - height: calc(1rem); - height: var(--spacing-04); - width: calc(1rem); - width: var(--spacing-04); - margin-right: 0; -} -.ck.ck-content a.btn[target='_blank']:hover .last-word::after, -.ck.ck-content a.sic-btn[target='_blank']:hover .last-word::after, -.ck.ck-content button.sic-btn[target='_blank']:hover .last-word::after, -.ck.ck-content button[target='_blank']:hover .last-word::after, -.ck.ck-content input[type='submit'][target='_blank']:hover .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - background-image: var( - --sic-button--icon-external--hover, - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") - ); -} -.ck.ck-content a.btn .last-word, -.ck.ck-content a.sic-btn .last-word, -.ck.ck-content button.sic-btn .last-word, -.ck.ck-content button .last-word, -.ck.ck-content input[type='submit'] .last-word { - text-decoration: none; - padding-left: 0.5ch; -} -@media (min-width: 640px) { - .ck.ck-content a.btn .last-word, - .ck.ck-content a.sic-btn .last-word, - .ck.ck-content button.sic-btn .last-word, - .ck.ck-content button .last-word, - .ck.ck-content input[type='submit'] .last-word { - padding-left: 0; - } -} -.ck.ck-content button[aria-disabled='true'], -.ck.ck-content .sic-btn[aria-disabled='true'], -.ck.ck-content input[type='submit'][aria-disabled='true'] { - background-color: var(--sic-button--default--primary-bg-color--disabled); - background-color: var( - --sic-button--bg-color--disabled, - var(--sic-button--default--primary-bg-color--disabled) - ); - border-color: var(--sic-button--default--primary-border-color--disabled); - border-color: var( - --sic-button--border-color--disabled, - var(--sic-button--default--primary-border-color--disabled) - ); - color: var(--sic-button--default--primary-text-color--disabled); - color: var( - --sic-button--text-color--disabled, - var(--sic-button--default--primary-text-color--disabled) - ); - pointer-events: none; - cursor: not-allowed; - -webkit-user-select: none; - user-select: none; -} -.ck.ck-content button[aria-disabled='true'] .last-word::after, -.ck.ck-content .sic-btn[aria-disabled='true'] .last-word::after, -.ck.ck-content input[type='submit'][aria-disabled='true'] .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); -} -.ck.ck-content button[aria-disabled='true']:hover, -.ck.ck-content button[aria-disabled='true']:focus-visible, -.ck.ck-content .sic-btn[aria-disabled='true']:hover, -.ck.ck-content .sic-btn[aria-disabled='true']:focus-visible, -.ck.ck-content input[type='submit'][aria-disabled='true']:hover, -.ck.ck-content input[type='submit'][aria-disabled='true']:focus-visible { - cursor: not-allowed; - outline-color: var(--sic-button--default--primary-bg-color--disabled); - outline-color: var( - --sic-button--bg-color--disabled, - var(--sic-button--default--primary-bg-color--disabled) - ); -} -.ck.ck-content .sic-bg--primary-default a.sic-btn, -.ck.ck-content .sic-bg--secondary-default a.sic-btn, -.ck.ck-content .sic-bg--secondary-light a.sic-btn, -.ck.ck-content .sic-bg--primary-default button.sic-btn, -.ck.ck-content .sic-bg--secondary-default button.sic-btn, -.ck.ck-content .sic-bg--secondary-light button.sic-btn, -.ck.ck-content .sic-bg--primary-default button, -.ck.ck-content .sic-bg--secondary-default button, -.ck.ck-content .sic-bg--secondary-light button, -.ck.ck-content .sic-bg--primary-default input[type='submit'], -.ck.ck-content .sic-bg--secondary-default input[type='submit'], -.ck.ck-content .sic-bg--secondary-light input[type='submit'] { - --sic-button--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - --sic-button--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); -} -.ck.ck-content - .sic-bg--primary-default - a.sic-btn[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--secondary-default - a.sic-btn[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--secondary-light - a.sic-btn[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--primary-default - button.sic-btn[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--secondary-default - button.sic-btn[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--secondary-light - button.sic-btn[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--primary-default - button[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--secondary-default - button[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--secondary-light - button[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--primary-default - input[type='submit'][target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--secondary-default - input[type='submit'][target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--secondary-light - input[type='submit'][target='_blank'] - .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - background-image: var( - --sic-button--icon-external, - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") - ); -} -.ck.ck-content - .sic-bg--primary-default - a.sic-btn[target='_blank']:hover - .last-word::after, -.ck.ck-content - .sic-bg--secondary-default - a.sic-btn[target='_blank']:hover - .last-word::after, -.ck.ck-content - .sic-bg--secondary-light - a.sic-btn[target='_blank']:hover - .last-word::after, -.ck.ck-content - .sic-bg--primary-default - button.sic-btn[target='_blank']:hover - .last-word::after, -.ck.ck-content - .sic-bg--secondary-default - button.sic-btn[target='_blank']:hover - .last-word::after, -.ck.ck-content - .sic-bg--secondary-light - button.sic-btn[target='_blank']:hover - .last-word::after, -.ck.ck-content - .sic-bg--primary-default - button[target='_blank']:hover - .last-word::after, -.ck.ck-content - .sic-bg--secondary-default - button[target='_blank']:hover - .last-word::after, -.ck.ck-content - .sic-bg--secondary-light - button[target='_blank']:hover - .last-word::after, -.ck.ck-content - .sic-bg--primary-default - input[type='submit'][target='_blank']:hover - .last-word::after, -.ck.ck-content - .sic-bg--secondary-default - input[type='submit'][target='_blank']:hover - .last-word::after, -.ck.ck-content - .sic-bg--secondary-light - input[type='submit'][target='_blank']:hover - .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - background-image: var( - --sic-button--icon-external--hover, - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") - ); -} -.ck.ck-content .last-word { - display: inline-flex; - line-height: 1em; - align-items: center; - pointer-events: none; -} -.ck.ck-content { - --sic-cta--default--text-color: var(--color-primary-default); - --sic-cta--default--font-size: var(--body-helper-font-size); - --sic-cta--default--font-size--sm-locked: calc( - var(--body-helper-min-font-size) - ); - --sic-cta--default--font-size--lg: var(--body-01-font-size); - --sic-cta--default--line-height: var(--line-height-xl); - --sic-cta--default--family: var(--ff-body); - --sic-cta--default--weight: var(--fw-bold); - --sic-cta--default--padding: var(--spacing-01) 0; - --sic-cta--default--margin: 0 var(--spacing-01) 0 0; - --sic-cta--default--radius: var(--border-radius-outline-default); - --sic-cta--default--border-color: var(--color-primary-default); - --sic-cta--default--border-width: var(--border-width-thicker); - --sic-cta--file-icon-size: var(--spacing-04); - --sic-cta--default--outline-width--focus: var(--border-width-thicker); - --sic-cta--default--outline-offset--focus: var(--border-width-thicker); - --sic-cta--default--text-color--disabled: var(--color-neutral-light); -} -.ck.ck-content .sic-bg--primary-default a.sic-cta .last-word::after, -.ck.ck-content .sic-bg--secondary-default a.sic-cta .last-word::after, -.ck.ck-content .sic-bg--secondary-light a.sic-cta .last-word::after, -.ck.ck-content .sic-bg--primary-default button.sic-cta .last-word::after, -.ck.ck-content .sic-bg--secondary-default button.sic-cta .last-word::after, -.ck.ck-content .sic-bg--secondary-light button.sic-cta .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); -} -.ck.ck-content .sic-bg--primary-default a.sic-cta.external .last-word::after, -.ck.ck-content - .sic-bg--primary-default - a.sic-cta[target='_blank'] - .last-word::after, -.ck.ck-content .sic-bg--secondary-default a.sic-cta.external .last-word::after, -.ck.ck-content - .sic-bg--secondary-default - a.sic-cta[target='_blank'] - .last-word::after, -.ck.ck-content .sic-bg--secondary-light a.sic-cta.external .last-word::after, -.ck.ck-content - .sic-bg--secondary-light - a.sic-cta[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--primary-default - button.sic-cta.external - .last-word::after, -.ck.ck-content - .sic-bg--primary-default - button.sic-cta[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--secondary-default - button.sic-cta.external - .last-word::after, -.ck.ck-content - .sic-bg--secondary-default - button.sic-cta[target='_blank'] - .last-word::after, -.ck.ck-content - .sic-bg--secondary-light - button.sic-cta.external - .last-word::after, -.ck.ck-content - .sic-bg--secondary-light - button.sic-cta[target='_blank'] - .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); -} -.ck.ck-content a.sic-cta, -.ck.ck-content button.sic-cta { - color: var(--sic-cta--default--text-color); - color: var(--sic-cta--text-color, var(--sic-cta--default--text-color)); - font-size: var(--sic-cta--default--font-size); - font-size: var(--sic-cta--font-size, var(--sic-cta--default--font-size)); - font-weight: var(--sic-cta--default--weight); - font-weight: var(--sic-cta--weight, var(--sic-cta--default--weight)); - line-height: var(--sic-cta--default--line-height); - line-height: var( - --sic-cta--line-height, - var(--sic-cta--default--line-height) - ); - text-decoration: none; - padding: var(--sic-cta--default--padding); - padding: var(--sic-cta--padding, var(--sic-cta--default--padding)); - margin: var(--sic-cta--default--margin); - margin: var(--sic-cta--margin, var(--sic-cta--default--margin)); - cursor: pointer; - background-image: linear-gradient( - transparent calc(100% - 2px), - var(--sic-cta--default--text-color) 2px - ); - background-image: linear-gradient( - transparent calc(100% - 2px), - var(--sic-cta--text-color, var(--sic-cta--default--text-color)) 2px - ); - background-repeat: no-repeat; - background-size: 0 100%; - transition: background-size 0.4s; - transition: background-size var(--duration-slowly); - display: inline !important; -} -@media (prefers-reduced-motion: no-preference) { - .ck.ck-content a.sic-cta, - .ck.ck-content button.sic-cta { - transition: all 0.1s; - transition: all var(--duration-quickly); - } -} -.ck.ck-content a.sic-cta:hover, -.ck.ck-content button.sic-cta:hover { - background-size: 100% 100%; -} -.ck.ck-content a.sic-cta:hover, -.ck.ck-content a.sic-cta:focus, -.ck.ck-content button.sic-cta:hover, -.ck.ck-content button.sic-cta:focus { - text-decoration: none; - background-color: transparent; - color: var(--sic-cta--default--text-color); - color: var(--sic-cta--text-color, var(--sic-cta--default--text-color)); -} -.ck.ck-content a.sic-cta:focus, -.ck.ck-content button.sic-cta:focus { - border-radius: var(--sic-cta--default--radius); - border-radius: var(--sic-cta--radius, var(--sic-cta--default--radius)); - outline-color: var(--sic-cta--default--outline-color--focus); - outline-color: var( - --sic-cta--outline-color, - var(--sic-cta--default--outline-color--focus) - ); - outline-style: solid; - outline-width: var(--sic-cta--default--outline-width--focus); - outline-width: var( - --sic-cta--outline-width, - var(--sic-cta--default--outline-width--focus) - ); - outline-offset: var(--sic-cta--default--outline-offset--focus); - outline-offset: var( - --sic-cta--outline-offset, - var(--sic-cta--default--outline-offset--focus) - ); -} -.ck.ck-content a.sic-cta.lg, -.ck.ck-content button.sic-cta.lg { - font-size: var(--sic-cta--default--font-size--lg); - font-size: var( - --sic-cta--font-size--lg, - var(--sic-cta--default--font-size--lg) - ); -} -.ck.ck-content a.sic-cta.sm-locked, -.ck.ck-content button.sic-cta.sm-locked { - font-size: var(--sic-cta--default--font-size--sm-locked); - font-size: var( - --sic-cta--font-size--sm-locked, - var(--sic-cta--default--font-size--sm-locked) - ); -} -.ck.ck-content a.sic-cta.sm-locked .last-word::after, -.ck.ck-content a.sic-cta.sm-locked.icon-default .last-word::after, -.ck.ck-content button.sic-cta.sm-locked .last-word::after, -.ck.ck-content button.sic-cta.sm-locked.icon-default .last-word::after { - height: calc(1rem); - height: var(--spacing-04); - width: calc(1rem); - width: var(--spacing-04); -} -.ck.ck-content a.sic-cta.multi-line, -.ck.ck-content button.sic-cta.multi-line { - display: inline; - white-space: normal; -} -.ck.ck-content a.sic-cta.multi-line::after, -.ck.ck-content button.sic-cta.multi-line::after { - margin-bottom: calc(-1 * calc(1rem * 0.25)); - margin-bottom: calc(-1 * var(--spacing-01)); -} -.ck.ck-content a.sic-cta .last-word, -.ck.ck-content button.sic-cta .last-word { - display: inline-flex; - align-items: center; - text-decoration: none; - pointer-events: none; -} -.ck.ck-content a.sic-cta .last-word::after, -.ck.ck-content button.sic-cta .last-word::after { - content: ''; - display: inline-block; - margin-left: calc(calc(1rem * 0.75)); - margin-left: calc(var(--spacing-03)); - background-size: contain; - background-position: left center; - background-repeat: no-repeat; -} -.ck.ck-content a.sic-cta .last-word sup, -.ck.ck-content button.sic-cta .last-word sup { - top: -0.5em; -} -.ck.ck-content a.sic-cta .last-word sub, -.ck.ck-content button.sic-cta .last-word sub { - top: 0.5em; -} -.ck.ck-content a.sic-cta .last-word::after, -.ck.ck-content a.sic-cta.icon-default .last-word::after, -.ck.ck-content button.sic-cta .last-word::after, -.ck.ck-content button.sic-cta.icon-default .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004EA8' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); - background-image: var( - --sic-cta--icon, - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23004EA8' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E") - ); - height: calc(1rem * 1.25); - height: var(--spacing-05); - width: calc(1rem * 1.25); - width: var(--spacing-05); -} -@media (prefers-reduced-motion: no-preference) { - .ck.ck-content a.sic-cta .last-word::after, - .ck.ck-content a.sic-cta.icon-default .last-word::after, - .ck.ck-content button.sic-cta .last-word::after, - .ck.ck-content button.sic-cta.icon-default .last-word::after { - transition: all 0.4s; - transition: all var(--duration-slowly); - } -} -.ck.ck-content a.sic-cta.icon-default:hover .last-word::after, -.ck.ck-content a.sic-cta.icon-default:focus .last-word::after, -.ck.ck-content a.sic-cta:hover .last-word::after, -.ck.ck-content a.sic-cta:focus .last-word::after, -.ck.ck-content button.sic-cta.icon-default:hover .last-word::after, -.ck.ck-content button.sic-cta.icon-default:focus .last-word::after, -.ck.ck-content button.sic-cta:hover .last-word::after, -.ck.ck-content button.sic-cta:focus .last-word::after { - transform: translateX(calc(calc(1rem * 0.5))); - transform: translateX(calc(var(--spacing-02))); -} -.ck.ck-content a.sic-cta.file-link::before, -.ck.ck-content a.sic-cta.pdf-link::before, -.ck.ck-content a.sic-cta.ppt-link::before, -.ck.ck-content button.sic-cta.file-link::before, -.ck.ck-content button.sic-cta.pdf-link::before, -.ck.ck-content button.sic-cta.ppt-link::before { - content: ''; - background-size: 100% 100%; - display: inline-block; - margin-right: calc(calc(1rem * 0.5)); - margin-right: calc(var(--spacing-02)); - transform: translateY(2px); - height: calc(1rem * 1.25); - height: var(--spacing-05); - width: calc(1rem * 1.25); - width: var(--spacing-05); -} -.ck.ck-content a.sic-cta.pdf-link::before, -.ck.ck-content button.sic-cta.pdf-link::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-cta--icon-pdf, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.sic-cta.file-link::before, -.ck.ck-content button.sic-cta.file-link::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-cta--icon-file, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.sic-cta.ppt-link::before, -.ck.ck-content button.sic-cta.ppt-link::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-link--icon-ppt, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.sic-cta[target='_blank'] .last-word::after, -.ck.ck-content a.sic-cta.icon-external .last-word::after, -.ck.ck-content button.sic-cta[target='_blank'] .last-word::after, -.ck.ck-content button.sic-cta.icon-external .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - background-image: var( - --sic-cta--icon-external, - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23004EA8' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") - ); - height: calc(1rem); - height: var(--spacing-04); - width: calc(1rem); - width: var(--spacing-04); - margin-right: 0; - transform: translateX(-2px) translateY(-1px); -} -.ck.ck-content a.sic-cta[target='_blank']:hover .last-word::after, -.ck.ck-content a.sic-cta[target='_blank']:focus .last-word::after, -.ck.ck-content a.sic-cta.icon-external:hover .last-word::after, -.ck.ck-content a.sic-cta.icon-external:focus .last-word::after, -.ck.ck-content button.sic-cta[target='_blank']:hover .last-word::after, -.ck.ck-content button.sic-cta[target='_blank']:focus .last-word::after, -.ck.ck-content button.sic-cta.icon-external:hover .last-word::after, -.ck.ck-content button.sic-cta.icon-external:focus .last-word::after { - transform: translateX(-2px) translateY(-1px); -} -.ck.ck-content a.sic-cta[aria-disabled='true'] { - color: var(--sic-cta--default--text-color--disabled); - color: var( - --sic-cta--text-color--disabled, - var(--sic-cta--default--text-color--disabled) - ); - cursor: not-allowed; - pointer-events: none; - -webkit-user-select: none; - user-select: none; -} -.ck.ck-content a.sic-cta[aria-disabled='true']::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23767676' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); - background-image: var( - --sic-cta--icon, - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23767676' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E") - ); -} -.ck.ck-content - a.sic-cta[target='_blank'][aria-disabled='true'] - .last-word::after, -.ck.ck-content a.sic-cta.icon-external[aria-disabled='true'] .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23767676' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - background-image: var( - --sic-cta--icon-external, - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23767676' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") - ); -} -.ck.ck-content { - --sic-link--text-color: inherit; - --sic-link--weight: var(--fw-bold); - --sic-link--text-color--hover: var(--color-neutral-white); - --sic-link--bg-color--hover: var(--color-primary-default); - --sic-link--icon-size: 0.8em; -} -.ck.ck-content a { - color: inherit; - color: var(--sic-link--text-color); - font-weight: 700; - font-weight: var(--sic-link--weight); - text-decoration: underline; - cursor: pointer; -} -.ck.ck-content a .last-word { - text-decoration: underline; - display: inline-flex; - pointer-events: none; -} -.ck.ck-content a:hover, -.ck.ck-content a:focus, -.ck.ck-content a:focus-visible { - color: #ffffff; - color: var(--sic-link--text-color--hover); - background-color: #004ea8; - background-color: var(--sic-link--bg-color--hover); -} -.ck.ck-content .social_share_list > a { - border-bottom: 1px solid transparent; - display: inline-flex; - height: 25px; - vertical-align: middle; - font-size: 16px; - padding: 0 4px; - align-items: center; -} -.ck.ck-content .social_share_list > a:hover, -.ck.ck-content .social_share_list > a:focus, -.ck.ck-content .social_share_list > a:focus-visible { - background-color: transparent; - border-bottom-color: #004ea8; - border-bottom-color: var(--sic-link--bg-color--hover); -} -.ck.ck-content a.file-link::before, -.ck.ck-content a.pdf-link::before, -.ck.ck-content a.ppt-link::before { - content: ''; - background-size: 100% 100%; - display: inline-block; - margin-right: calc(calc(1rem * 0.5)); - margin-right: calc(var(--spacing-02)); - transform: translateY(2px); - height: calc(1rem * 1.25); - height: var(--spacing-05); - width: calc(1rem * 1.25); - width: var(--spacing-05); -} -.ck.ck-content a.pdf-link::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-link--icon-pdf, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.file-link::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-link--icon-file, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.ppt-link::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-link--icon-ppt, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.pdf-link:focus::before, -.ck.ck-content a.pdf-link:hover::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-link--icon-pdf--hover, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.file-link:focus::before, -.ck.ck-content a.file-link:hover::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-link--icon-file--hover, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.ppt-link:focus::before, -.ck.ck-content a.ppt-link:hover::before { - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-link--icon-ppt--hover, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a[target='_blank'] .last-word::after { - content: ''; - display: inline-block; - margin-left: calc(calc(1rem * 0.5)); - margin-left: calc(var(--spacing-02)); - background-size: contain; - background-position: center; - background-repeat: no-repeat; -} -.ck.ck-content a[target='_blank'] .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - background-image: var( - --sic-link--icon-external, - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") - ); - height: 0.8em; - height: var(--sic-link--icon-size, 0.8em); - width: 0.8em; - width: var(--sic-link--icon-size, 0.8em); - margin-right: 0; -} -.ck.ck-content a[target='_blank']:hover .last-word::after, -.ck.ck-content a[target='_blank']:focus .last-word::after, -.ck.ck-content a[target='_blank']:focus-visible .last-word::after, -.ck.ck-content a[target='_blank']:active .last-word::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - background-image: var( - --sic-link--icon-external--hover, - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") - ); -} -.ck.ck-content { - --sic-tooltip--arrow-height: 0.5em; - --sic-tooltip--arrow-color: var(--color-neutral-lighter); -} -.ck.ck-content a.sic-tooltip { - --sic-tooltip--arrow-height: 0.5em; - font-weight: 400; - font-weight: var(--fw-normal); - text-decoration: none; -} -.ck.ck-content a.sic-tooltip .last-word { - font-weight: 400; - font-weight: var(--fw-normal); - text-decoration: none; -} -.ck.ck-content a.sic-tooltip .last-word::after { - content: ''; - display: inline-block; - margin-left: calc(calc(1rem * 0.25)); - margin-left: calc(var(--spacing-01)); - margin-bottom: -0.1em; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - height: 0.8em; - height: var(--sic-link--icon-size, 0.8em); - width: 0.8em; - width: var(--sic-link--icon-size, 0.8em); - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-tooltip--icon, - url('data:image/svg+xml,') - ); -} -.ck.ck-content a.sic-tooltip:hover, -.ck.ck-content a.sic-tooltip:focus { - background-color: transparent; - color: var(--text-color); - cursor: help; -} -.ck.ck-content .sic-tooltip { - position: relative; - display: inline-block; -} -.ck.ck-content [role='tooltip']::before { - position: absolute; - top: 100%; - left: 50%; - transform: translateX(-50%); - border: 0.5em solid transparent; - border: var(--sic-tooltip--arrow-height) solid transparent; - border-top-color: #c1c1c1; - border-top-color: var(--sic-tooltip--arrow-color); - text-shadow: 0 1px 2px hsl(0, 0%, 0%); -} -.ck.ck-content [role='tooltip']::after { - position: absolute; - right: 0; - top: 100%; - left: 0; - display: block; - height: calc(0.5em * 2); - height: calc(var(--sic-tooltip--arrow-height) * 2); - text-shadow: 0 1px 2px hsl(0, 0%, 0%); -} -.ck.ck-content .sic-tooltip.tooltip-visible [role='tooltip']::before, -.ck.ck-content .sic-tooltip.tooltip-visible [role='tooltip']::after { - content: ''; -} -.ck.ck-content .sic-tooltip.bottom [role='tooltip']::before, -.ck.ck-content .sic-tooltip.bottom [role='tooltip']::after, -.ck.ck-content .sic-tooltip.bottom [role='tooltip'] { - top: unset; - bottom: 100%; -} -.ck.ck-content .sic-tooltip.bottom [role='tooltip']::before { - border-bottom-color: #c1c1c1; - border-bottom-color: var(--sic-tooltip--arrow-color); - border-top-color: transparent; -} -.ck.ck-content .sic-tooltip.top [role='tooltip'] { - bottom: calc(100% + calc(0.5em)); - bottom: calc(100% + calc(var(--sic-tooltip--arrow-height))); -} -.ck.ck-content .sic-tooltip.bottom [role='tooltip'] { - top: calc(100% + calc(0.5em)); - top: calc(100% + calc(var(--sic-tooltip--arrow-height))); - bottom: unset; -} -.ck.ck-content [role='tooltip'] { - position: absolute; - bottom: calc(100% + calc(0.5em)); - bottom: calc(100% + calc(var(--sic-tooltip--arrow-height))); - left: 50%; - transform: translateX(-50%); - margin: 0; - padding: calc(1rem) calc(1rem * 2); - padding: var(--spacing-04) var(--spacing-08); - border-radius: 8px; - border-radius: var(--border-radius-rounded-default); - color: #505050; - color: var(--color-neutral-default); - background: #ffffff; - background: var(--color-neutral-white); - width: max-content; - max-width: 65vw; - box-shadow: 0 1px 2px hsl(0, 0%, 0%); - z-index: 5000; - z-index: var(--z-index-popup); -} -.ck.ck-content .hidden { - display: none; -} -.ck.ck-content [aria-hidden='true'] { - pointer-events: none; -} -.ck.ck-content p { - display: block; - font-size: var(--body-01-font-size); - font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); - line-height: var(--body-01-line-height); - line-height: var(--sic-body-text--line-height, var(--body-01-line-height)); - margin-bottom: 1em; - margin-bottom: var(--sic-body-text--margin-bottom, 1em); - font-weight: 400; - font-weight: var(--fw-normal); -} -.ck.ck-content p:last-child { - margin-bottom: 0; -} -.ck.ck-content h1, -.ck.ck-content h2, -.ck.ck-content h3, -.ck.ck-content h4, -.ck.ck-content h5, -.ck.ck-content h6, -.ck.ck-content .headline-07, -.ck.ck-content .headline-06, -.ck.ck-content .headline-05, -.ck.ck-content .headline-04, -.ck.ck-content .headline-03, -.ck.ck-content .headline-02, -.ck.ck-content .headline-01 { - color: #262b31; - color: var(--sic-heading-color); - font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; - font-family: var(--ff-display); - font-weight: 700; - font-weight: var(--fw-bold); - display: block; - margin-bottom: calc(1rem); - margin-bottom: var(--spacing-04); -} -.ck.ck-content h1, -.ck.ck-content .headline-07 { - font-size: clamp(calc(1rem * 2.5), 0.21rem + 3.57vw, calc(1rem * 4.5)); - font-size: var(--headline-07-font-size); - line-height: clamp(calc(1.2em), 0.7714vw + 3.482rem, calc(1.1em)); - line-height: var(--headline-07-line-height); -} -.ck.ck-content h2 { - font-size: clamp(calc(1rem * 2), 0.285rem + 2.678vw, calc(1rem * 3.5)); - font-size: var(--headline-05-font-size); - line-height: clamp(calc(1.3em), 1.1714vw + 2.232rem, calc(1.1em)); - line-height: var(--headline-05-line-height); -} -.ck.ck-content h3 { - font-size: clamp(calc(1rem * 1.75), 0.321rem + 2.232vw, calc(1rem * 3)); - font-size: var(--headline-04-font-size); - line-height: clamp(calc(1.3em), 0.7607vw + 2.366rem, calc(1.2em)); - line-height: var(--headline-04-line-height); -} -.ck.ck-content h4 { - font-size: clamp(calc(1rem * 1.5), 0.357rem + 1.785vw, calc(1rem * 2.5)); - font-size: var(--headline-03-font-size); - line-height: clamp(calc(1.4em), 1.0714vw + 1.6071rem, calc(1.2em)); - line-height: var(--headline-03-line-height); -} -.ck.ck-content h5 { - font-size: clamp(calc(1rem * 1.25), 0.107rem + 1.785vw, calc(1rem * 2.25)); - font-size: var(--headline-02-font-size); - line-height: clamp(calc(1.4em), 1.1285vw + 1.5178rem, calc(1.3em)); - line-height: var(--headline-02-line-height); -} -.ck.ck-content h6 { - font-size: clamp(calc(1rem * 1.125), 0.41rem + 1.116vw, calc(1rem * 1.75)); - font-size: var(--headline-01-font-size); - line-height: 1.4em; - line-height: var(--headline-01-line-height); -} -.ck.ck-content .headline-06 { - font-size: clamp(calc(1rem * 2.25), 0.25rem + 3.125vw, calc(1rem * 4)); - font-size: var(--headline-06-font-size); - line-height: clamp(calc(1.2em), 0.7571vw + 3.035rem, calc(1.1em)); - line-height: var(--headline-06-line-height); -} -.ck.ck-content .headline-05 { - font-size: clamp(calc(1rem * 2), 0.285rem + 2.678vw, calc(1rem * 3.5)); - font-size: var(--headline-05-font-size); - line-height: clamp(calc(1.3em), 1.1714vw + 2.232rem, calc(1.1em)); - line-height: var(--headline-05-line-height); -} -.ck.ck-content .headline-04 { - font-size: clamp(calc(1rem * 1.75), 0.321rem + 2.232vw, calc(1rem * 3)); - font-size: var(--headline-04-font-size); - line-height: clamp(calc(1.3em), 0.7607vw + 2.366rem, calc(1.2em)); - line-height: var(--headline-04-line-height); -} -.ck.ck-content .headline-03 { - font-size: clamp(calc(1rem * 1.5), 0.357rem + 1.785vw, calc(1rem * 2.5)); - font-size: var(--headline-03-font-size); - line-height: clamp(calc(1.4em), 1.0714vw + 1.6071rem, calc(1.2em)); - line-height: var(--headline-03-line-height); -} -.ck.ck-content .headline-02 { - font-size: clamp(calc(1rem * 1.25), 0.107rem + 1.785vw, calc(1rem * 2.25)); - font-size: var(--headline-02-font-size); - line-height: clamp(calc(1.4em), 1.1285vw + 1.5178rem, calc(1.3em)); - line-height: var(--headline-02-line-height); -} -.ck.ck-content .headline-01 { - font-size: clamp(calc(1rem * 1.125), 0.41rem + 1.116vw, calc(1rem * 1.75)); - font-size: var(--headline-01-font-size); - line-height: 1.4em; - line-height: var(--headline-01-line-height); -} -.ck.ck-content p + h1, -.ck.ck-content p + h2, -.ck.ck-content p + h3, -.ck.ck-content p + h4, -.ck.ck-content p + .headline-07, -.ck.ck-content p + .headline-06, -.ck.ck-content p + .headline-05, -.ck.ck-content p + .headline-04 { - margin-top: calc(1rem * 2.5); - margin-top: var(--spacing-10); -} -.ck.ck-content p + h5, -.ck.ck-content p + h6, -.ck.ck-content p + .headline-01, -.ck.ck-content p + .headline-02, -.ck.ck-content p + .headline-03 { - margin-top: calc(1rem * 2); - margin-top: var(--spacing-8); -} -.ck.ck-content ul { - list-style-type: disc; - padding-left: calc(1rem); - padding-left: var(--spacing-04); -} -.ck.ck-content ul li { - list-style-type: disc; -} -.ck.ck-content ul li ul li { - list-style-type: circle; -} -.ck.ck-content ul li ul li ul li { - list-style-type: square; -} -.ck.ck-content ul li ul li ul li ul li { - list-style-type: disc; -} -.ck.ck-content ol { - list-style-type: decimal; - padding-left: calc(1rem); - padding-left: var(--spacing-04); - margin-bottom: calc(1rem * 0.5); - margin-bottom: var(--spacing-02); -} -.ck.ck-content ol li { - list-style-type: decimal; -} -.ck.ck-content ol li ol li { - list-style-type: lower-alpha; -} -.ck.ck-content ol li ol li ol li { - list-style-type: lower-roman; -} -.ck.ck-content ol li ol li ol li ol li { - list-style-type: decimal; -} -.ck.ck-content ol li::marker { - color: #505050; - color: var(--sic-text-color); -} -.ck.ck-content & > ul, -.ck.ck-content & > ol { - margin-bottom: 1.5em; - padding-left: calc(1rem * 1.25); - padding-left: var(--spacing-05); -} -.ck.ck-content li { - list-style-position: outside; - padding-left: 0.5em; - margin-top: 0.5em; - margin-bottom: calc(1rem * 0.5); - margin-bottom: var(--spacing-02); - font-size: var(--body-01-font-size); - font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); -} -.ck.ck-content li::marker { - color: #004ea8; - color: var(--sic-accent-color); - font-size: 1.25rem; - font-size: var(--fs-xl); -} -.ck.ck-content blockquote { - display: flex; - gap: calc(1rem * 1.25); - gap: var(--spacing-05); - margin-top: 1em; - margin-bottom: 1em; -} -.ck.ck-content blockquote p { - font-size: clamp(calc(1rem * 1.25), 0.82rem + 0.66vw, calc(1rem * 1.75)); - font-size: var(--body-03-font-size); - margin-bottom: 0; -} -.ck.ck-content blockquote { - font-weight: bold; -} -.ck.ck-content blockquote sic-icon { - color: #6ba7ea; - color: var(--color-primary-light); -} -.ck.ck-content hr { - border-color: #004ea8; - border-color: var(--sic-accent-color); - margin-top: 2em; - margin-bottom: 2em; -} -.ck.ck-content figcaption { - font-size: var(--body-01-font-size); - font-size: var(--sic-body-text--font-size, var(--body-01-font-size)); - color: #505050; - color: var(--sic-text-color); - text-align: center; -} -.ck.ck-content em { - font-style: italic; -} -.ck.ck-content sup { - vertical-align: super; - font-size: 60%; - top: 0; -} -.ck.ck-content sub { - vertical-align: sub; - font-size: 60%; - bottom: 0; -} -.ck.ck-content strong { - font-weight: 700; -} -.ck.ck-content table { - margin-bottom: calc(1rem); - margin-bottom: var(--spacing-04); -} -.ck.ck-content .article-byline { - font-size: 1.125rem; - font-size: var(--body-article-byline, var(--fs-lg)); -} -.ck.ck-content .disclaimer { - --sic-link--text-color--hover: var(--color-neutral-white); - --sic-link--bg-color--hover: var(--sic-text-color); - --sic-cta--text-color: var(--sic-text-color); - --sic-cta--text-color--hover: var(--color-neutral-white); - --sic-cta--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); - --sic-cta--icon--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); - --sic-cta--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - --sic-cta--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - --sic-button--bg-color: var(--sic-text-color); - --sic-button--text-color: var(--color-neutral-white); - --sic-button--border-color: var(--sic-text-color); - --sic-button--bg-color--hover: transparent; - --sic-button--text-color--hover: var(--sic-text-color); - --sic-button--border-color--hover: var(--sic-text-color); - --sic-button--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - --sic-button--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - font-size: calc(1rem * 0.875); - font-size: calc(var(--body-helper-min-font-size)); - line-height: calc(1.5em); - line-height: calc(var(--body-helper-min-line-height)); - display: block; - margin-bottom: 1em; -} -.ck.ck-content .disclaimer:last-child { - margin-bottom: 0; -} -.ck.ck-content .disclaimer a { - font-weight: 700; - font-weight: var(--fw-bold); - text-decoration: underline; -} -.ck.ck-content .disclaimer a:hover, -.ck.ck-content .disclaimer a:focus, -.ck.ck-content .disclaimer a:focus-visible { - color: var(--sic-link--text-color--hover); - color: var( - --sic-disclaimer-link--text-color--hover, - var(--sic-link--text-color--hover) - ); - background-color: var(--sic-link--bg-color--hover); - background-color: var( - --sic-disclaimer-link--bg-color--hover, - var(--sic-link--bg-color--hover) - ); -} -.ck.ck-content .disclaimer a.sic-cta { - font-size: inherit; - color: var(--sic-cta--text-color); - color: var(--sic-disclaimer-cta--text-color, var(--sic-cta--text-color)); - text-decoration: underline; -} -.ck.ck-content .disclaimer a.sic-cta .last-word { - text-decoration: underline; -} -.ck.ck-content .disclaimer a.sic-cta .last-word::after { - background-image: var(--sic-cta--icon); - background-image: var(--sic-disclaimer-cta--icon, var(--sic-cta--icon)); - height: calc(1rem * 0.75); - height: var(--spacing-03); - width: calc(1rem * 0.75); - width: var(--spacing-03); - margin-left: calc(calc(1rem * 0.5)); - margin-left: calc(var(--spacing-02)); -} -.ck.ck-content .disclaimer a.sic-cta:hover, -.ck.ck-content .disclaimer a.sic-cta:focus-visible, -.ck.ck-content .disclaimer a.sic-cta:focus { - background-color: #505050; - background-color: var(--sic-text-color); - background-image: none; - color: var(--sic-cta--text-color--hover); - color: var( - --sic-disclaimer-cta--text-color--hover, - var(--sic-cta--text-color--hover) - ); - text-decoration: underline; -} -.ck.ck-content .disclaimer a.sic-cta:hover .last-word, -.ck.ck-content .disclaimer a.sic-cta:focus-visible .last-word, -.ck.ck-content .disclaimer a.sic-cta:focus .last-word { - text-decoration: underline; -} -.ck.ck-content .disclaimer a.sic-cta:hover .last-word::after, -.ck.ck-content .disclaimer a.sic-cta:focus-visible .last-word::after, -.ck.ck-content .disclaimer a.sic-cta:focus .last-word::after { - background-image: var(--sic-cta--icon--hover); - background-image: var( - --sic-disclaimer-cta--icon--hover, - var(--sic-cta--icon--hover) - ); - transform: translateX(calc(calc(1rem * 0.25))); - transform: translateX(calc(var(--spacing-01))); -} -.ck.ck-content .disclaimer a.sic-cta.icon-external .last-word::after, -.ck.ck-content .disclaimer a.sic-cta[target='_blank'] .last-word::after { - background-image: var(--sic-cta--icon-external); - background-image: var( - --sic-disclaimer-cta--icon-external, - var(--sic-cta--icon-external) - ); - height: calc(1rem * 0.75); - height: var(--spacing-03); - width: calc(1rem * 0.75); - width: var(--spacing-03); -} -.ck.ck-content .disclaimer a.sic-cta.icon-external:hover .last-word::after, -.ck.ck-content - .disclaimer - a.sic-cta.icon-external:focus-visible - .last-word::after, -.ck.ck-content .disclaimer a.sic-cta.icon-external:focus .last-word::after, -.ck.ck-content .disclaimer a.sic-cta[target='_blank']:hover .last-word::after, -.ck.ck-content - .disclaimer - a.sic-cta[target='_blank']:focus-visible - .last-word::after, -.ck.ck-content .disclaimer a.sic-cta[target='_blank']:focus .last-word::after { - background-image: var(--sic-cta--icon-external--hover); - background-image: var( - --sic-disclaimer-cta--icon-external--hover, - var(--sic-cta--icon-external--hover) - ); - transform: translateX(-2px) translateY(-1px); -} -.ck.ck-content .disclaimer a.btn { - font-size: inherit; - color: var(--sic-button--text-color); - color: var( - --sic-disclaimer-button--text-color, - var(--sic-button--text-color) - ); - padding: calc(1rem * 0.5) calc(1rem); - padding: var(--spacing-02) var(--spacing-04); - min-height: 0; - text-decoration: none; -} -.ck.ck-content .disclaimer a.btn:hover { - color: var(--sic-button--text-color--hover); - color: var( - --sic-disclaimer-button--text-color--hover, - var(--sic-button--text-color--hover) - ); - background-color: var(--sic-button--bg-color--hover); - background-color: var( - --sic-disclaimer-button--bg-color--hover, - var(--sic-button--bg-color--hover) - ); - border-color: var(--sic-button--border-color--hover); - border-color: var( - --sic-disclaimer-button--border-color--hover, - var(--sic-button--border-color--hover) - ); -} -.ck.ck-content .disclaimer a.btn.icon-external .last-word::after, -.ck.ck-content .disclaimer a.btn[target='_blank'] .last-word::after { - background-image: var(--sic-button--icon-external); - background-image: var( - --sic-disclaimer-button--icon-external, - var(--sic-button--icon-external) - ); - height: calc(1rem * 0.75); - height: var(--spacing-03); - width: calc(1rem * 0.75); - width: var(--spacing-03); - margin-left: calc(calc(1rem * 0.5)); - margin-left: calc(var(--spacing-02)); -} -.ck.ck-content .disclaimer a.btn.icon-external:hover .last-word::after, -.ck.ck-content .disclaimer a.btn[target='_blank']:hover .last-word::after { - background-image: var(--sic-button--icon-external--hover); - background-image: var( - --sic-disclaimer-button--icon-external--hover, - var(--sic-button--icon-external--hover) - ); -} -.ck.ck-content .disclaimer li { - font-size: calc(1rem * 0.875); - font-size: calc(var(--body-helper-min-font-size)); - line-height: calc(1.5em); - line-height: calc(var(--body-helper-min-line-height)); - margin-top: calc(1rem * 0.25); - margin-top: var(--spacing-01); - margin-bottom: calc(1rem * 0.25); - margin-bottom: var(--spacing-01); -} -.ck.ck-content .disclaimer li::marker { - color: #505050; - color: var(--sic-text-color); -} -.ck.ck-content ul.disclaimer li::marker { - font-size: 10px; -} -.ck.ck-content ol.disclaimer li::marker { - font-size: 0.9em; -} -.ck.ck-content a.sic-cta { - white-space: initial; -} -.ck.ck-content a[name], -.ck.ck-content a:not([href]) { - color: inherit; - cursor: text; - text-decoration: none; - font-weight: inherit; - font-size: inherit; -} -.ck.ck-content a[name]:hover, -.ck.ck-content a[name]:focus, -.ck.ck-content a[name]:focus-visible, -.ck.ck-content a:not([href]):hover, -.ck.ck-content a:not([href]):focus, -.ck.ck-content a:not([href]):focus-visible { - color: #505050; - color: var(--sic-text-color); - background-color: transparent; -} -.ck.ck-content .clear-left { - clear: left; -} -.ck.ck-content .clear-right { - clear: right; -} -.ck.ck-content .clear-both { - clear: both; -} -.ck.ck-content { - color: #505050; - color: var(--sic-text-color); - display: block; - font-weight: unset; - width: unset; -} -@media (min-width: 640px) { - .ck.ck-content { - width: unset; - } -} -.ck.ck-content a.sic-tooltip { - text-decoration: underline; -} -.ck.ck-content a.sic-tooltip::after { - content: ''; - display: inline-block; - margin-left: calc(calc(1rem * 0.25)); - margin-left: calc(var(--spacing-01)); - margin-bottom: -0.1em; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - height: 0.8em; - height: var(--sic-link--icon-size, 0.8em); - width: 0.8em; - width: var(--sic-link--icon-size, 0.8em); - background-image: url('data:image/svg+xml,'); - background-image: var( - --sic-tooltip--icon, - url('data:image/svg+xml,') - ); -} diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.css b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.css deleted file mode 100644 index dbc9e24d8..000000000 --- a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.css +++ /dev/null @@ -1,7 +0,0 @@ -:host { - /* Support floats. */ - display: block; - font-family: var(--ff-display); - font-weight: inherit; - color: var(--sic-text-color); -} diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.mdx b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.mdx deleted file mode 100644 index dfcb25738..000000000 --- a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.mdx +++ /dev/null @@ -1,702 +0,0 @@ -import { html } from 'lit'; -import { Meta, Canvas, Story, Preview } from '@storybook/addon-docs'; -import './sic-styled-text'; - - - -# Overview - -These are the basic styles provided by the sic-styled-text component. -`` should wrap wysiwyg content. - -## Use In Components - -`` will not inherit any css styles set on parent element. -Components that contain slots that may use `` will need to set -css variables in component different values are needed. - -## Settings - ---- - -### CSS Variables - -- `--sic-body-text--font-size`: defaults to `--body-01-font-size` -- `--sic-body-text--line-height`: defaults to `--body-01-font-size` -- `--sic-body-text--margin-bottom`: defaults to `1em` - -# Headings - - - - {html` - -

- This is an H1 heading - 2 -

-

This is an H2 heading2

-

This is an H3 heading

-

This is an H4 heading

-
This is an H5 heading
-
This is an H6 heading
-
This is an H6 heading with a named link
- - `} - - - -# Basic text and paragraphs - - - - {html` -
- -

- Example PDF link -

-

- Example .docx link -

- -
- -

- Example PDF link -

-

- Example .docx link -

- This is simple text which didn't get wrapped in a p tag. -

- Connecting you to care anywhere -

-

Standard Paragraph

-

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede.3 -

-

Strong Paragraph

-

- - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

-

Italic Paragraph

-

- - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

-

- This is an example of "text-body-01" size font. -

-

- This is an example of "text-body-02" size font. -

-

This is an example of base size font.

-

- This is an example of "text-body-03" size font. -

-

- This is an example of "text-body-04" size font. -

-

- This is an example of "text-body-helper" size font. -

- - `} - - - -# Disclaimer text and paragraphs - - - - {html` - -

Connecting you to care anywhere

-

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede.3 -

-

- - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

-

- - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

-

- Links: test link - and external link -

-

- CTA links: cta link and external cta link -

-

- Buttons: button link and external button link -

- -
- -

Connecting you to care anywhere

-

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede.3 -

-

- - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

-

- - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

-

- Links: test link - and external link -

-

- CTA links: cta link and external cta link -

-

- Buttons: button link and external button link -

- -
- `} - - - -# Block quote(blockquote) - - - - {html` - -

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

-
- -

- Be a force. Not for just one thing, but for your thing: the - intersection of your expertise and your passion. And we will help - you achieve it. -

-
-
Phase2 Technology
-

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

- - `} - - - -# Horizontal rule (HR) - - - - {html` - -

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

-
-

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

- - `} - - - -# Lists - -## Unordered lists (UL) - - - - {html` - -

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

-
    -
  • This is the first item
    • -
  • - This is the second link item -
      -
    • This is the first child item
      • -
    • - This is the second child item -
        -
      • This is the first grandchild item
        • -
      • - This is the second grandchild item -
          -
        • This is the first great-grandchild item
          • -
        -
        • -
      -
      • -
    -
    • -
  • - This is the third item, which is long. Sed fringilla mauris sit amet - nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam - nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. Sed fringilla mauris sit amet - nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam - nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. -
    • -
-

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

- - `} - - - -## Check list - -## Two columns List (UL) - - - - {html` - -

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

-
    -
  • This is the first item
    • -
  • This is the second item
    • -
  • This is the first child item
    • -
  • This is the second child item
    • -
  • This is the third item
    • -
  • This is the first item
    • -
  • This is the second item
    • -
  • This is the first child item
    • -
  • This is the second child item
    • -
  • This is the third item
    • -
  • This is the second child item
    • -
  • This is the third item
    • -
-

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

- - `} - - - -## Ordered list (OL) - - - - {html` - -

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

-
    -
  1. This is the first item
    2. -
  2. - This is the second child item -
      -
    1. This is the first grandchild item
      2. -
    2. - This is the second grandchild item -
        -
      1. This is the first great-grandchild item -
          -
        1. This is the first great-great-grandchild item
          2. -
        -
        2. -
      -
      3. -
    -
    3. - - -
  3. This is the third item
    4. -
-

- Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

- - `} - - - -## Table - - - - {html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Table heading with link - Lorem ipsum dolar2Lorem ipsum dolarLorem ipsum dolar
- Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem - ipsum dolor sit amet2 Lorem ipsum dolor sit amet -

A cell with a nested paragraph tag.

Strong textLorem ipsum dolor sit amet
- Table cell with link - Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet - Table cell with external link - Lorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
- - `} - - - -## Button and Link (a) - - - - {html` - -

- Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. -

-

Primary Button  Secondary Button

-

Standard Link External Link

-

CTA Link

-

Call to actionCall to action external

- -
- -

- Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. -

-

Primary Button  Secondary Button

-

Standard Link External Link

-

CTA Link

-

Call to actionCall to action external

- -
- `} - - - -## Tooltip - - - - {html` - -

Tooltip in "sic-styled-text" uses a link with "sic-tooltip" class and a "title" attribute to create the tooltip.

-
-

- Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit. -

- -
- -

- Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit. -

- -
- `} - - - -## Base styled text - - - - {html` - -

What is Lorem Ipsum?

-

- Lorem Ipsum is simply dummy text of the printing - and typesetting industry. Lorem Ipsum has been the industry's standard - dummy text ever since the 1500s, when an unknown printer took a galley - of type and scrambled it to make a type specimen book. It has survived - not only five centuries, but also the leap into electronic - typesetting, remaining essentially unchanged. It was popularised in - the 1960s with the release of Letraset sheets containing Lorem Ipsum - passages, and more recently with desktop publishing software like - Aldus PageMaker including versions of Lorem Ipsum. -

-

Why do we use it?

-

- It is a long established fact that a reader - will be distracted by the readable content of a page when looking at - its layout. The point of using Lorem Ipsum is that it has a - more-or-less normal distribution of letters, as opposed to using - 'Content here, content here', making it look like readable English. -
- Many desktop publishing packages and web page editors now use Lorem - Ipsum as their default model text, and a search for 'lorem ipsum' will - uncover many web sites still in their infancy. Various versions have - evolved over the years, sometimes by accident, sometimes on purpose - (injected humour and the like). -
- this is a named link -

-

Where does it come from?

-

- Contrary to popular belief, Lorem Ipsum is not simply random text. It - has roots in a piece of classical Latin literature from 45 BC, making - it over 2000 years old. Richard McClintock, a Latin professor at - Hampden-Sydney College in Virginia, looked up one of the more obscure - Latin words, consectetur, from a Lorem Ipsum passage, and going - through the cites of the word in classical literature, discovered the - undoubtable source. Lorem Ipsum comes from sections 1.10.32 and - 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and - Evil) by Cicero, written in 45 BC. This book is a treatise on the - theory of ethics, very popular during the Renaissance. The first line - of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in - section 1.10.32. -

-

- The standard chunk of Lorem Ipsum used since the 1500s is reproduced - below for those interested. Sections 1.10.32 and 1.10.33 from "de - Finibus Bonorum et Malorum" by Cicero are also reproduced in their - exact original form, accompanied by English versions from the 1914 - translation by H. Rackham. -

-
Where can I get some?
-

- There are many variations of passages of Lorem Ipsum available, but - the majority have suffered alteration in some form, by injected - humour, or randomised words which don't look even slightly believable. - If you are going to use a passage of Lorem Ipsum, you need to be sure - there isn't anything embarrassing hidden in the middle of text. All - the Lorem Ipsum generators on the Internet tend to repeat predefined - chunks as necessary, making this the first true generator on the - Internet. It uses a dictionary of over 200 Latin words, combined with - a handful of model sentence structures, to generate Lorem Ipsum which - looks reasonable. The generated Lorem Ipsum is therefore always free - from repetition, injected humour, or non-characteristic words etc. -

-
Where can I get some?
-

- There are many variations of passages of Lorem Ipsum available, but - the majority have suffered alteration in some form, by injected - humour, or randomised words which don't look even slightly believable. - If you are going to use a passage of Lorem Ipsum, you need to be sure - there isn't anything embarrassing hidden in the middle of text. All - the Lorem Ipsum generators on the Internet tend to repeat predefined - chunks as necessary, making this the first true generator on the - Internet. It uses a dictionary of over 200 Latin words, combined with - a handful of model sentence structures, to generate Lorem Ipsum which - looks reasonable. The generated Lorem Ipsum is therefore always free - from repetition, injected humour, or non-characteristic words etc. -

-

- It is well established that following the Mediterranean Diet or DASH - (Dietary Approaches to Stop Hypertension) diet can lead to - improvements in many key areas of health. The MIND diet - (Mediterranean-DASH Diet for Neurodegenerative Delay) is actually a - combination of these two diets and has been shown to reduce the risk - of Alzheimer’s disease and slow cognitive decline. -

-

- One study estimated a 53% lower risk of Alzheimer’s disease when the - diet was followed closely for 4.5 years and a 35% lower risk of - Alzheimer’s when the diet was followed less closely for 4.5 years. -

-

- Like the DASH and Mediterranean diet, the MIND diet encourages - plant-based protein, lean animal protein sources, whole grains and - plenty of fruits and vegetables. It also limits red meat, saturated - fats and added sugars. Unique to the MIND diet is that it emphasizes - having one serving of leafy greens per day and two or more servings of - berries per week. -

-

- Here are the recommended foods and servings to include according to - the MIND diet: -

-
Vegetables
-
    -
  • Leafy greens - 6 or more servings/week
    • -
  • Other vegetables - 1 or more servings/day
    • -
-
Fruits
-
    -
  • Berries - 2 or more servings/week
    • -
-
Grains
-
    -
  • Whole grains - 3 or more servings/day
    • -
-
Protein
-
    -
  • Nuts - 5 or more servings/week
    • -
  • Beans - 3 or more servings/week
    • -
  • Poultry - 2 or more servings/week
    • -
  • Fish - 1 or more servings/week
    • -
  • Red meat - 4 or less servings/week
    • -
  • Cheese - 1 or less serving/week
    • -
-
Fats
-
    -
  • Olive oil - Use as your primary source of fat
    • -
  • Butter or margarine - 1 tbsp/day or less
    • -
  • Fried foods or fast food - 1 or less serving/week
    • -
-
Other
-
    -
  • Sweets - 5 or fewer servings/week
    • -
  • Wine - 1 serving/day
    • -
- - `} - - - -## Table - - - - {html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Lorem ipsum dolarLorem ipsum dolarLorem ipsum dolarLorem ipsum dolar
- Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem - ipsum dolor sit amet Lorem ipsum dolor sit amet -

A cell with a nested paragraph tag.

Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
- - `} - - diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.ts b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.ts deleted file mode 100644 index 25117b3a1..000000000 --- a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.stories.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { TemplateResult, html } from "lit" -import './sic-styled-text' - -export default { - title: 'Global/Styled Text', - component: 'sic-styled-text', - parameters: { - viewMode: 'docs', - previewTabs: { - canvas: { - hidden: true, - }, - }, - docs: { - description: { - component: `\`\` should wrap wysiwyg content. - `, - }, - }, - }, -} -const SampleContent = html` -

- Nullam accumsan lorem in dui. Quisque malesuada placerat nisl. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. - Aliquam lobortis. Curabitur blandit mollis lacus. Quisque malesuada placerat nisl. -

-
    -
  • Bullet List item 1
    • -
  • Bullet List item 2
    • -
  • Bullet List item 3
    • -
-
-

- Nullam accumsan lorem in dui. Quisque malesuada placerat nisl. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. - Aliquam lobortis. Curabitur blandit mollis lacus. Quisque malesuada placerat nisl. -

-
This is a block quote
-

Link button

-

Call to actionCall to action external

- -`; - - -const TemplateStyledText = (): TemplateResult => html ` - -

This is styled text using the sic-styled-text HTML element

- ${SampleContent} - -
- -

sic-styled-text HTML element on primary default background.

- ${SampleContent} - -
-` ; -export const OnBackgrounds = TemplateStyledText.bind({}); diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.ts b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.ts index a3a07310f..e69de29bb 100644 --- a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.ts +++ b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.ts @@ -1,59 +0,0 @@ -import { TemplateResult, html, CSSResultGroup } from 'lit'; -import { OutlineElement } from '../../base/outline-element/outline-element'; -import { customElement } from 'lit/decorators.js'; -import { wrapLastWord } from '../../../utilities/wrap-last-word'; -import { tooltipLink } from '../../../utilities/tooltip'; -import { externalLinkText } from '../../../utilities/external-link-text'; -import { checkFileType } from '../../../utilities/check-file-type'; -import componentStyles from './sic-styled-text.css.lit'; - -wrapLastWord; - -/** - * The Sic Styled Text component - * @element sic-styled-text - * @since 1.0.0 - * @slot - default slot - * - * Lightdom styles in sic-styled-text.lightdom.css included in /shared.css - */ -@customElement('sic-styled-text') -export class SicStyledText extends OutlineElement { - static styles: CSSResultGroup = [OutlineElement.styles, componentStyles]; - - connectedCallback(): void { - super.connectedCallback(); - - this.querySelectorAll('a').forEach(el => { - // Check if has target="_blank" before adding last-word span. - checkFileType(el); - if ( - el.getAttribute('target') === '_blank' || - el.classList.contains('sic-cta') - ) { - // Wraps last word in a span.last-word element. - // span.last-word is where the icon is added via pseudo - wrapLastWord(el as HTMLElement); - - // Adds external link text for screen readers. - if (el.classList.contains('is-external-link')) { - externalLinkText(el as HTMLElement); - } - } - // - if (el.classList.contains('sic-tooltip')) { - tooltipLink(el as HTMLElement); - } - }); - } - - render(): TemplateResult { - return html``; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'sic-styled-text': SicStyledText; - } -} From aca9cd0e194e58c2338152c8af49e8ec55d1dec4 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 30 Jan 2024 09:57:23 -0500 Subject: [PATCH 03/21] feat: adds utilities. --- .../src/outline-core-styled-text.ts | 24 +- .../src/sic-styled-text/sic-styled-text.ts | 0 .../src/{sic-styled-text => }/sic-table.css | 2 +- .../src/utilities/check-file-type.ts | 45 +++ .../src/utilities/external-link-text.ts | 11 + .../src/utilities/tooltip.ts | 258 ++++++++++++++++++ .../src/utilities/wrap-last-word.ts | 17 ++ 7 files changed, 344 insertions(+), 13 deletions(-) delete mode 100644 packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.ts rename packages/components/outline-core-styled-text/src/{sic-styled-text => }/sic-table.css (98%) create mode 100644 packages/components/outline-core-styled-text/src/utilities/check-file-type.ts create mode 100644 packages/components/outline-core-styled-text/src/utilities/external-link-text.ts create mode 100644 packages/components/outline-core-styled-text/src/utilities/tooltip.ts create mode 100644 packages/components/outline-core-styled-text/src/utilities/wrap-last-word.ts diff --git a/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts b/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts index e9ad2372c..cde7395ff 100644 --- a/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts +++ b/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts @@ -6,24 +6,24 @@ import { OutlineElement } from '@phase2/outline-core'; import componentStyles from './outline-core-styled-text.css.lit'; +import { checkFileType } from './utilities/check-file-type'; +import { externalLinkText } from './utilities/external-link-text'; +import { tooltipLink } from './utilities/tooltip'; +import { wrapLastWord } from './utilities/wrap-last-word'; -import { wrapLastWord } from '../../../utilities/wrap-last-word'; -import { tooltipLink } from '../../../utilities/tooltip'; -import { externalLinkText } from '../../../utilities/external-link-text'; -import { checkFileType } from '../../../utilities/check-file-type'; wrapLastWord; /** - * The Sic Styled Text component - * @element sic-styled-text + * The Outline Core Styled Text component + * @element outline-core-styled-text * @since 1.0.0 * @slot - default slot * - * Lightdom styles in sic-styled-text.lightdom.css included in /shared.css + * Lightdom styles in outline-core-styled-text.lightdom.css included in /shared.css */ -@customElement('sic-styled-text') -export class SicStyledText extends OutlineElement { +@customElement('outline-core-styled-text') +export class OutlineCoreStyledText extends OutlineElement { static styles: CSSResultGroup = [OutlineElement.styles, componentStyles]; connectedCallback(): void { @@ -34,7 +34,7 @@ export class SicStyledText extends OutlineElement { checkFileType(el); if ( el.getAttribute('target') === '_blank' || - el.classList.contains('sic-cta') + el.classList.contains('outline-core-cta') ) { // Wraps last word in a span.last-word element. // span.last-word is where the icon is added via pseudo @@ -46,7 +46,7 @@ export class SicStyledText extends OutlineElement { } } // - if (el.classList.contains('sic-tooltip')) { + if (el.classList.contains('outline-core-tooltip')) { tooltipLink(el as HTMLElement); } }); @@ -59,6 +59,6 @@ export class SicStyledText extends OutlineElement { declare global { interface HTMLElementTagNameMap { - 'sic-styled-text': SicStyledText; + 'outline-core-styled-text': OutlineCoreStyledText; } } diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.ts b/packages/components/outline-core-styled-text/src/sic-styled-text/sic-styled-text.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-table.css b/packages/components/outline-core-styled-text/src/sic-table.css similarity index 98% rename from packages/components/outline-core-styled-text/src/sic-styled-text/sic-table.css rename to packages/components/outline-core-styled-text/src/sic-table.css index c394f7c82..d083eb82e 100644 --- a/packages/components/outline-core-styled-text/src/sic-styled-text/sic-table.css +++ b/packages/components/outline-core-styled-text/src/sic-table.css @@ -1,5 +1,5 @@ table { - color: var(--sic-heading-color); + color: var(--outline-core-heading-color); max-width: 100%; height: 100%; overflow: auto; diff --git a/packages/components/outline-core-styled-text/src/utilities/check-file-type.ts b/packages/components/outline-core-styled-text/src/utilities/check-file-type.ts new file mode 100644 index 000000000..33fa79a3a --- /dev/null +++ b/packages/components/outline-core-styled-text/src/utilities/check-file-type.ts @@ -0,0 +1,45 @@ +/** + * Checks the file type of a given hyperlink element and applies appropriate class. + * + * This function inspects the "href" and "download" attributes of the provided hyperlink element + * to determine the file type. If the file type is a PDF (Portable Document Format), the function + * adds the CSS class "pdf-link" to the element. If the file type is one of "eml", "pptx", or "docx", + * the function adds the CSS class "file-link" to the element. + * + * @param {HTMLElement} link - The hyperlink element to check for the file type. + * @returns {string|undefined} - Returns a string representing the file type ("pdf" or "file"), + * or undefined if the file type is not recognized. + * + */ +export function checkFileType(link: HTMLElement) { + if (link?.querySelector('img')) { + return; + } + + const href = link?.getAttribute('href'); + + if (!href) { + return; + } + + const download = link?.getAttribute('download'); + + if (href.includes('.pdf') || (download && download.includes('.pdf'))) { + link?.classList.add('pdf-link'); + return 'pdf'; + } else if ( + href.match(/\.(ppsx|pptx|pptm|potx)$/i) || + (download && download.match(/\.(ppsx|pptx|pptm|potx)$/i)) + ) { + link?.classList.add('ppt-link'); + return 'ppt'; + } else if ( + href.match(/\.(eml|docx|msg)$/i) || + (download && download.match(/\.(eml|docx|msg)$/i)) + ) { + link?.classList.add('file-link'); + return 'file'; + } + + return; +} diff --git a/packages/components/outline-core-styled-text/src/utilities/external-link-text.ts b/packages/components/outline-core-styled-text/src/utilities/external-link-text.ts new file mode 100644 index 000000000..19179e414 --- /dev/null +++ b/packages/components/outline-core-styled-text/src/utilities/external-link-text.ts @@ -0,0 +1,11 @@ +/** + * add external link message. + */ +export function externalLinkText(el: HTMLElement) { + if (el.textContent) { + const externalLinkText = document.createElement('span'); + externalLinkText.classList.add('visually-hidden'); + externalLinkText.innerHTML = '(opens in a new window)'; + el.append(externalLinkText); + } +} diff --git a/packages/components/outline-core-styled-text/src/utilities/tooltip.ts b/packages/components/outline-core-styled-text/src/utilities/tooltip.ts new file mode 100644 index 000000000..fe3638cde --- /dev/null +++ b/packages/components/outline-core-styled-text/src/utilities/tooltip.ts @@ -0,0 +1,258 @@ +import { wrapLastWord } from './wrap-last-word'; + +/** + * Updates link with title and href to have markup for tooltip. + */ +export function tooltipLink(el: HTMLElement) { + // Check if the element contains an image + if (el.querySelector('.outline-core-tooltip-popup') || !el.hasAttribute('title')) { + return; + } + + if (el.textContent) { + const tooltipText = el.getAttribute('title'); + if (!tooltipText) { + return; + } + + const id: string = self.crypto.randomUUID + ? `outline-core-tooltip-${self.crypto.randomUUID()}` + : `outline-core-tooltip-${self.crypto + .getRandomValues(new Uint32Array(3)) + .join('-')}`; + + if (el.getAttribute('href') == '#') { + el.addEventListener('click', function (event) { + event.preventDefault(); + }); + } + // Wraps last word in a span.last-word element. + // span.last-word is where the icon is added via pseudo + wrapLastWord(el as HTMLElement); + + // Build out tooltip. + const tooltipPopup = document.createElement('span'); + tooltipPopup.setAttribute('id', id); + tooltipPopup.setAttribute('role', 'tooltip'); + tooltipPopup.classList.add('outline-core-tooltip-popup'); + tooltipPopup.classList.add('hidden'); + tooltipPopup.innerHTML = tooltipText; + + // Update link element. + el.setAttribute('aria-describedby', id); + el.removeAttribute('title'); + el.append(tooltipPopup); + + new Tooltip(el); + } +} + +export class Tooltip { + container: HTMLElement; + trigger: HTMLElement; + tooltip: HTMLElement | null; + tooltipPosition: string; + globalEscapeBound: (event: KeyboardEvent) => void; + globalPointerDownBound: (event: MouseEvent) => void; + + constructor(element: HTMLElement) { + this.container = element; + this.trigger = element; + this.tooltip = element.querySelector('[role=tooltip]'); + this.tooltipPosition = this.getTooltipPosition(); + this.globalEscapeBound = this.globalEscape.bind(this); + this.globalPointerDownBound = this.globalPointerDown.bind(this); + this.initialiseClassList(); + this.bindEvents(); + } + + // Basic actions + openTooltip() { + this.showTooltip(); + this.checkBoundingBox(); + this.attachGlobalListener(); + } + + closeTooltip() { + this.hideTooltip(); + this.resetBoundingBox(); + this.removeGlobalListener(); + } + + // Binding event listteners + bindEvents() { + // Events that trigger openTooltip() + // Open on mouse hover + this.container.addEventListener('mouseenter', this.openTooltip.bind(this)); + // Open when a touch is detected + this.container.addEventListener('touchstart', this.openTooltip.bind(this)); + // Open when the trigger gets focus + this.trigger.addEventListener('focus', this.openTooltip.bind(this)); + + // Events that trigger closeTooltip() + // Close when the mouse cursor leaves the trigger or tooltip area + this.container.addEventListener('mouseleave', this.closeTooltip.bind(this)); + // Close when the trigger loses focus + this.trigger.addEventListener('blur', this.closeTooltip.bind(this)); + } + + attachGlobalListener() { + document.addEventListener('keydown', this.globalEscapeBound); + document.addEventListener('pointerdown', this.globalPointerDownBound); + } + + removeGlobalListener() { + document.removeEventListener('keydown', this.globalEscapeBound); + document.removeEventListener('pointerdown', this.globalPointerDownBound); + } + + globalEscape(event: KeyboardEvent) { + if (event.key === 'Escape' || event.key === 'Esc') { + this.closeTooltip(); + } + } + + // Close the tooltip if the target is anything other than the components within the tooltip widget + globalPointerDown(event: MouseEvent) { + switch (event.target) { + case this.container: + case this.trigger: + case this.tooltip: + event.preventDefault(); + break; + default: + this.closeTooltip(); + this.trigger.blur(); + } + } + + // Show or hide the tooltip + showTooltip() { + this.container.classList.add('tooltip-visible'); + if (this.tooltip) { + this.tooltip.classList.remove('hidden'); + } + } + + hideTooltip() { + this.container.classList.remove('tooltip-visible'); + if (this.tooltip) { + this.tooltip.classList.add('hidden'); + } + } + + // Get the desired default position for the tooltip (defaults to 'bottom') + getTooltipPosition() { + const attribute = this.container.getAttribute('data-tooltip-position'); + let setting = 'top'; + + if (attribute === 'bottom') { + setting = attribute; + } + + return setting; + } + + // Set the default classes for tooltips based on this.getTooltipPosition() + initialiseClassList() { + switch (this.tooltipPosition) { + case 'bottom': + this.container.classList.add('bottom'); + break; + + default: + this.container.classList.remove('bottom'); + break; + } + } + + // Calculate if the tooltip is within the viewport + checkBoundingBox() { + if (!this.tooltip) { + return; + } + const bounds: DOMRect = this.tooltip.getBoundingClientRect(); + + this.checkHorizontalBounding(bounds); + this.checkVerticalBounding(bounds); + } + + checkHorizontalBounding(bounds: DOMRect) { + const windowWidth: number = window.innerWidth; + + // If the tooltip overlaps on both sides, throw an error + if (bounds.right > windowWidth && bounds.left < 0) { + throw new Error('Tooltip width too wide for the window'); + } + + // Check if the right side of the tooltip is beyond the right side of the viewport + if (bounds.right > windowWidth) { + this.moveTooltipLeft(bounds, windowWidth); + } + + // Check if the left side of the tooltip is beyond the left side of the viewport + if (bounds.left < 0) { + this.moveTooltipRight(bounds); + } + } + + checkVerticalBounding(bounds: DOMRect) { + const windowHeight = window.innerHeight; + + // If the tooltip overlaps on both sides, throw an error + if (bounds.bottom > windowHeight && bounds.top < 0) { + throw new Error('Tooltip height too high for the window'); + } + + // Check if the bottom of the tooltip is below the bottom of the viewport + if (bounds.bottom > windowHeight) { + this.moveTooltipUp(); + } + + // Check if the top of the tooltip is above the top of the viewport + if (bounds.top < 0) { + this.moveTooltipDown(); + } + } + + // Move the tooltip so it fits within the viewport + moveTooltipUp() { + this.container.classList.remove('bottom'); + } + + moveTooltipRight(bounds: DOMRect) { + if (!this.tooltip) { + return; + } + const numToMove = Math.floor(bounds.width / 2); + this.tooltip.style.left = `${numToMove}px`; + } + + moveTooltipDown() { + this.container.classList.add('bottom'); + } + + moveTooltipLeft(bounds: DOMRect, windowWidth: number) { + if (!this.tooltip) { + return; + } + + const translateAmount = + windowWidth - Math.round(bounds.right) - Math.round(bounds.width) / 1.6; + this.tooltip.style.transform = `translateX(${translateAmount}px)`; + } + + // Reset the changes made by the bounding box functions + resetBoundingBox() { + if (!this.tooltip) { + return; + } + + if (this.tooltip.style.left || this.tooltip.style.transform) { + this.tooltip.style.left = ''; + this.tooltip.style.transform = ''; + } + + this.initialiseClassList(); + } +} diff --git a/packages/components/outline-core-styled-text/src/utilities/wrap-last-word.ts b/packages/components/outline-core-styled-text/src/utilities/wrap-last-word.ts new file mode 100644 index 000000000..88029ed64 --- /dev/null +++ b/packages/components/outline-core-styled-text/src/utilities/wrap-last-word.ts @@ -0,0 +1,17 @@ +/** + * Wraps the last word in an element's textContent with a span.last-word. + */ +export function wrapLastWord(el: HTMLElement) { + // Check if the element contains an image + if (el.querySelector('img') || el.querySelector('.last-word')) { + return; + } + + if (el.textContent) { + const textContent = el.innerHTML.trimEnd().split(' '); + const lastWord = textContent.pop(); + const updatedContent = + textContent.join(' ') + ` ${lastWord}`; + el.innerHTML = updatedContent.trim(); + } +} From e2406ef869f00ca46bfa21915c69e70c0d7df4f2 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 30 Jan 2024 09:59:00 -0500 Subject: [PATCH 04/21] chore: kneel before the gods of lint. --- .../outline-core-styled-text/packages.json | 6 +----- .../src/outline-core-styled-text.shared.css | 15 ++++++++++++--- .../src/outline-core-styled-text.ts | 1 - .../src/utilities/tooltip.ts | 5 ++++- 4 files changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/components/outline-core-styled-text/packages.json b/packages/components/outline-core-styled-text/packages.json index fcaaf1e45..d10db7af3 100644 --- a/packages/components/outline-core-styled-text/packages.json +++ b/packages/components/outline-core-styled-text/packages.json @@ -13,11 +13,7 @@ "main": "index.ts", "types": "index.ts", "typings": "index.d.ts", - "files": [ - "/dist/", - "/src/", - "!/dist/tsconfig.build.tsbuildinfo" - ], + "files": ["/dist/", "/src/", "!/dist/tsconfig.build.tsbuildinfo"], "author": "Phase2 Technology", "repository": { "type": "git", diff --git a/packages/components/outline-core-styled-text/src/outline-core-styled-text.shared.css b/packages/components/outline-core-styled-text/src/outline-core-styled-text.shared.css index ca7337b96..170bff4f8 100644 --- a/packages/components/outline-core-styled-text/src/outline-core-styled-text.shared.css +++ b/packages/components/outline-core-styled-text/src/outline-core-styled-text.shared.css @@ -5,7 +5,10 @@ p { display: block; font-size: var(--outline-body-text--font-size, var(--body-01-font-size)); - line-height: var(--outline-body-text--line-height, var(--body-01-line-height)); + line-height: var( + --outline-body-text--line-height, + var(--body-01-line-height) + ); margin-bottom: var(--outline-body-text--margin-bottom, 1em); font-weight: var(--fw-normal); @@ -284,13 +287,19 @@ table { } a.outline-cta { font-size: inherit; - color: var(--outline-disclaimer-cta--text-color, var(--outline-cta--text-color)); + color: var( + --outline-disclaimer-cta--text-color, + var(--outline-cta--text-color) + ); text-decoration: underline; .last-word { text-decoration: underline; &::after { - background-image: var(--outline-disclaimer-cta--icon, var(--outline-cta--icon)); + background-image: var( + --outline-disclaimer-cta--icon, + var(--outline-cta--icon) + ); height: var(--spacing-03); width: var(--spacing-03); margin-left: calc(var(--spacing-02)); diff --git a/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts b/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts index cde7395ff..86ce56bce 100644 --- a/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts +++ b/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts @@ -11,7 +11,6 @@ import { externalLinkText } from './utilities/external-link-text'; import { tooltipLink } from './utilities/tooltip'; import { wrapLastWord } from './utilities/wrap-last-word'; - wrapLastWord; /** diff --git a/packages/components/outline-core-styled-text/src/utilities/tooltip.ts b/packages/components/outline-core-styled-text/src/utilities/tooltip.ts index fe3638cde..f73a7286e 100644 --- a/packages/components/outline-core-styled-text/src/utilities/tooltip.ts +++ b/packages/components/outline-core-styled-text/src/utilities/tooltip.ts @@ -5,7 +5,10 @@ import { wrapLastWord } from './wrap-last-word'; */ export function tooltipLink(el: HTMLElement) { // Check if the element contains an image - if (el.querySelector('.outline-core-tooltip-popup') || !el.hasAttribute('title')) { + if ( + el.querySelector('.outline-core-tooltip-popup') || + !el.hasAttribute('title') + ) { return; } From 8a5e1dff0e6c93dd000a46739fd922088f637c54 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 30 Jan 2024 10:25:40 -0500 Subject: [PATCH 05/21] feat: updates of various flavors, but the build is still broken --- ...x => outline-core-styled-text.stories.mdx} | 5 +- .../outline-core-styled-text/packages.json | 4 +- .../src/.ck.ck-content.global.css | 4 +- .../src/.ck.ck-content.global.scoped.css | 46 ++ .../config/storybook.main.css | 700 +++++++++--------- 5 files changed, 401 insertions(+), 358 deletions(-) rename packages/components/outline-core-styled-text/docs/{outline-core-styled-text.mdx => outline-core-styled-text.stories.mdx} (99%) create mode 100644 packages/components/outline-core-styled-text/src/.ck.ck-content.global.scoped.css diff --git a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx b/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx similarity index 99% rename from packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx rename to packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx index c0a424191..ed4899ac5 100644 --- a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx +++ b/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx @@ -1,6 +1,7 @@ import { html } from 'lit'; -import { Meta, Canvas, Story, Preview } from '@storybook/addon-docs'; -import '../src/outline-core-styled-text/outline-core-styled-text'; +import { Meta, Canvas, Story } from '@storybook/addon-docs'; +import { OutlineCoreStyledText } from '../src/outline-core-styled-text.js'; + ul,.ck.ck-content & > ol{margin-bottom:1.5em;padding-left:var(--spacing-05);}.ck.ck-content li{list-style-position:outside;padding-left:0.5em;margin-top:0.5em;margin-bottom:var(--spacing-02);font-size:var(--body-01-font-size);font-size:var(--outline-body-text--font-size, var(--body-01-font-size));}.ck.ck-content li::marker{color:var(--outline-accent-color);font-size:var(--fs-xl);}.ck.ck-content blockquote{display:flex;gap:var(--spacing-05);margin-top:1em;margin-bottom:1em;}.ck.ck-content blockquote p{font-size:var(--body-03-font-size);margin-bottom:0;}.ck.ck-content blockquote{font-weight:bold;}.ck.ck-content blockquote outline-icon{color:var(--color-primary-light);}.ck.ck-content hr{border-color:var(--outline-accent-color);margin-top:2em;margin-bottom:2em;}.ck.ck-content figcaption{font-size:var(--body-01-font-size);font-size:var(--outline-body-text--font-size, var(--body-01-font-size));color:var(--outline-text-color);text-align:center;}.ck.ck-content em{font-style:italic;}.ck.ck-content sup{vertical-align:super;font-size:60%;top:0;}.ck.ck-content sub{vertical-align:sub;font-size:60%;bottom:0;}.ck.ck-content strong{font-weight:700;}.ck.ck-content table{margin-bottom:var(--spacing-04);}.ck.ck-content .article-byline{font-size:var(--fs-lg);font-size:var(--body-article-byline, var(--fs-lg));}.ck.ck-content .disclaimer{--outline-link--text-color--hover:var(--color-neutral-white);--outline-link--bg-color--hover:var(--outline-text-color);--outline-cta--text-color:var(--outline-text-color);--outline-cta--text-color--hover:var(--color-neutral-white);--outline-cta--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");--outline-cta--icon--hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");--outline-cta--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");--outline-cta--icon-external--hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");--outline-button--bg-color:var(--outline-text-color);--outline-button--text-color:var(--color-neutral-white);--outline-button--border-color:var(--outline-text-color);--outline-button--bg-color--hover:transparent;--outline-button--text-color--hover:var(--outline-text-color);--outline-button--border-color--hover:var(--outline-text-color);--outline-button--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");--outline-button--icon-external--hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");font-size:calc(var(--body-helper-min-font-size));line-height:calc(var(--body-helper-min-line-height));display:block;margin-bottom:1em;}.ck.ck-content .disclaimer:last-child{margin-bottom:0;}.ck.ck-content .disclaimer a{font-weight:var(--fw-bold);text-decoration:underline;}.ck.ck-content .disclaimer a:hover,.ck.ck-content .disclaimer a:focus,.ck.ck-content .disclaimer a:focus-visible{color:var(--outline-link--text-color--hover);color:var( + --outline-disclaimer-link--text-color--hover, + var(--outline-link--text-color--hover) + );background-color:var(--outline-link--bg-color--hover);background-color:var( + --outline-disclaimer-link--bg-color--hover, + var(--outline-link--bg-color--hover) + );}.ck.ck-content .disclaimer a.outline-cta{font-size:inherit;color:var(--outline-cta--text-color);color:var( + --outline-disclaimer-cta--text-color, + var(--outline-cta--text-color) + );text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta .last-word{text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta .last-word::after{background-image:var(--outline-cta--icon);background-image:var( + --outline-disclaimer-cta--icon, + var(--outline-cta--icon) + );height:var(--spacing-03);width:var(--spacing-03);margin-left:calc(var(--spacing-02));}.ck.ck-content .disclaimer a.outline-cta:hover,.ck.ck-content .disclaimer a.outline-cta:focus-visible,.ck.ck-content .disclaimer a.outline-cta:focus{background-color:var(--outline-text-color);background-image:none;color:var(--outline-cta--text-color--hover);color:var( + --outline-disclaimer-cta--text-color--hover, + var(--outline-cta--text-color--hover) + );text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta:hover .last-word,.ck.ck-content .disclaimer a.outline-cta:focus-visible .last-word,.ck.ck-content .disclaimer a.outline-cta:focus .last-word{text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta:hover .last-word::after,.ck.ck-content .disclaimer a.outline-cta:focus-visible .last-word::after,.ck.ck-content .disclaimer a.outline-cta:focus .last-word::after{background-image:var(--outline-cta--icon--hover);background-image:var( + --outline-disclaimer-cta--icon--hover, + var(--outline-cta--icon--hover) + );transform:translateX(calc(var(--spacing-01)));}.ck.ck-content .disclaimer a.outline-cta.icon-external .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank'] .last-word::after{background-image:var(--outline-cta--icon-external);background-image:var( + --outline-disclaimer-cta--icon-external, + var(--outline-cta--icon-external) + );height:var(--spacing-03);width:var(--spacing-03);}.ck.ck-content .disclaimer a.outline-cta.icon-external:hover .last-word::after,.ck.ck-content .disclaimer a.outline-cta.icon-external:focus-visible .last-word::after,.ck.ck-content .disclaimer a.outline-cta.icon-external:focus .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank']:hover .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank']:focus-visible .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank']:focus .last-word::after{background-image:var(--outline-cta--icon-external--hover);background-image:var( + --outline-disclaimer-cta--icon-external--hover, + var(--outline-cta--icon-external--hover) + );transform:translateX(-2px) translateY(-1px);}.ck.ck-content .disclaimer a.btn{font-size:inherit;color:var(--outline-button--text-color);color:var( + --outline-disclaimer-button--text-color, + var(--outline-button--text-color) + );padding:var(--spacing-02) var(--spacing-04);min-height:0;text-decoration:none;}.ck.ck-content .disclaimer a.btn:hover{color:var(--outline-button--text-color--hover);color:var( + --outline-disclaimer-button--text-color--hover, + var(--outline-button--text-color--hover) + );background-color:var(--outline-button--bg-color--hover);background-color:var( + --outline-disclaimer-button--bg-color--hover, + var(--outline-button--bg-color--hover) + );border-color:var(--outline-button--border-color--hover);border-color:var( + --outline-disclaimer-button--border-color--hover, + var(--outline-button--border-color--hover) + );}.ck.ck-content .disclaimer a.btn.icon-external .last-word::after,.ck.ck-content .disclaimer a.btn[target='_blank'] .last-word::after{background-image:var(--outline-button--icon-external);background-image:var( + --outline-disclaimer-button--icon-external, + var(--outline-button--icon-external) + );height:var(--spacing-03);width:var(--spacing-03);margin-left:calc(var(--spacing-02));}.ck.ck-content .disclaimer a.btn.icon-external:hover .last-word::after,.ck.ck-content .disclaimer a.btn[target='_blank']:hover .last-word::after{background-image:var(--outline-button--icon-external--hover);background-image:var( + --outline-disclaimer-button--icon-external--hover, + var(--outline-button--icon-external--hover) + );}.ck.ck-content .disclaimer li{font-size:calc(var(--body-helper-min-font-size));line-height:calc(var(--body-helper-min-line-height));margin-top:var(--spacing-01);margin-bottom:var(--spacing-01);}.ck.ck-content .disclaimer li::marker{color:var(--outline-text-color);}.ck.ck-content ul.disclaimer li::marker{font-size:10px;}.ck.ck-content ol.disclaimer li::marker{font-size:0.9em;}.ck.ck-content a.outline-cta{white-space:initial;}.ck.ck-content a[name],.ck.ck-content a:not([href]){color:inherit;cursor:text;text-decoration:none;font-weight:inherit;font-size:inherit;}.ck.ck-content a[name]:hover,.ck.ck-content a[name]:focus,.ck.ck-content a[name]:focus-visible,.ck.ck-content a:not([href]):hover,.ck.ck-content a:not([href]):focus,.ck.ck-content a:not([href]):focus-visible{color:var(--outline-text-color);background-color:transparent;}.ck.ck-content .clear-left{clear:left;}.ck.ck-content .clear-right{clear:right;}.ck.ck-content .clear-both{clear:both;}.ck.ck-content{color:var(--outline-core-text-color);display:block;font-weight:unset;width:unset;}@media (min-width: 640px){.ck.ck-content{width:unset;}} \ No newline at end of file diff --git a/packages/documentation/outline-storybook/config/storybook.main.css b/packages/documentation/outline-storybook/config/storybook.main.css index 70c1d8ddd..1eb20ce1a 100644 --- a/packages/documentation/outline-storybook/config/storybook.main.css +++ b/packages/documentation/outline-storybook/config/storybook.main.css @@ -1,385 +1,381 @@ @import url('https://rsms.me/inter/inter.css'); -:root { - --brand-primary: #2563eb; - --brand-secondary: #059669; - --brand-tertiary: #dc2626; - --brand-quaternary: #d97706; - --brand-quinary: #9333ea; - --brand-senary: #db2777; - --brand-septenary: #4f46e5; - --brand-octonary: #525252; - --brand-nonary: #1e3a8a; - --brand-denary: #171717; - --status-success: #2f855a; - --status-warning: #b64301; - --status-error: #c53030; - --status-info: #1e3a8a; - --outline-phase2-blue: #0080ff; - --outline-karma-coral: #fa5c5c; - --outline-soft-black: #171717; - --outline-not-gray: #cfc7d4; - --outline-misty-teal: #73f2e5; - --outline-electric-violet: #9484ff; - --outline-dusty-blue: #7fc7ee; - --outline-transparent: transparent; - --outline-white: #fff; - --outline-black: #000; +:root{ + --brand-primary:#2563eb; + --brand-secondary:#059669; + --brand-tertiary:#dc2626; + --brand-quaternary:#d97706; + --brand-quinary:#9333ea; + --brand-senary:#db2777; + --brand-septenary:#4f46e5; + --brand-octonary:#525252; + --brand-nonary:#1e3a8a; + --brand-denary:#171717; + --status-success:#2f855a; + --status-warning:#b64301; + --status-error:#c53030; + --status-info:#1e3a8a; + --outline-phase2-blue:#0080ff; + --outline-karma-coral:#fa5c5c; + --outline-soft-black:#171717; + --outline-not-gray:#cfc7d4; + --outline-misty-teal:#73f2e5; + --outline-electric-violet:#9484ff; + --outline-dusty-blue:#7fc7ee; + --outline-transparent:transparent; + --outline-white:#fff; + --outline-black:#000; + + --outline-gray-50:#fafafa; + --outline-gray-100:#f5f5f5; + --outline-gray-200:#e5e5e5; + --outline-gray-300:#d4d4d4; + --outline-gray-400:#a3a3a3; + --outline-gray-500:#737373; + --outline-gray-600:#525252; + --outline-gray-700:#404040; + --outline-gray-800:#262626; + --outline-gray-900:#171717; - --outline-gray-50: #fafafa; - --outline-gray-100: #f5f5f5; - --outline-gray-200: #e5e5e5; - --outline-gray-300: #d4d4d4; - --outline-gray-400: #a3a3a3; - --outline-gray-500: #737373; - --outline-gray-600: #525252; - --outline-gray-700: #404040; - --outline-gray-800: #262626; - --outline-gray-900: #171717; + --outline-blue-50:#eff6ff; + --outline-blue-100:#dbeafe; + --outline-blue-200:#bfdbfe; + --outline-blue-300:#93c5fd; + --outline-blue-400:#60a5fa; + --outline-blue-500:#3b82f6; + --outline-blue-600:#2563eb; + --outline-blue-700:#1d4ed8; + --outline-blue-800:#1e40af; + --outline-blue-900:#1e3a8a; - --outline-blue-50: #eff6ff; - --outline-blue-100: #dbeafe; - --outline-blue-200: #bfdbfe; - --outline-blue-300: #93c5fd; - --outline-blue-400: #60a5fa; - --outline-blue-500: #3b82f6; - --outline-blue-600: #2563eb; - --outline-blue-700: #1d4ed8; - --outline-blue-800: #1e40af; - --outline-blue-900: #1e3a8a; + --red-50:#fef2f2; + --red-100:#fee2e2; + --red-200:#fecaca; + --red-300:#fca5a5; + --red-400:#f87171; + --red-500:#ef4444; + --red-600:#dc2626; + --red-700:#b91c1c; + --red-800:#991b1b; + --red-900:#7f1d1d; + --yellow-50:#fffbeb; + --yellow-100:#fef3c7; + --yellow-200:#fde68a; + --yellow-300:#fcd34d; + --yellow-400:#fbbf24; + --yellow-500:#f59e0b; + --yellow-600:#d97706; + --yellow-700:#b45309; + --yellow-800:#92400e; + --yellow-900:#78350f; + --green-50:#ecfdf5; + --green-100:#d1fae5; + --green-200:#a7f3d0; + --green-300:#6ee7b7; + --green-400:#34d399; + --green-500:#10b981; + --green-600:#059669; + --green-700:#047857; + --green-800:#065f46; + --green-900:#064e3b; + --indigo-50:#eef2ff; + --indigo-100:#e0e7ff; + --indigo-200:#c7d2fe; + --indigo-300:#a5b4fc; + --indigo-400:#818cf8; + --indigo-500:#6366f1; + --indigo-600:#4f46e5; + --indigo-700:#4338ca; + --indigo-800:#3730a3; + --indigo-900:#312e81; + --purple-50:#faf5ff; + --purple-100:#f3e8ff; + --purple-200:#e9d5ff; + --purple-300:#d8b4fe; + --purple-400:#c084fc; + --purple-500:#a855f7; + --purple-600:#9333ea; + --purple-700:#7e22ce; + --purple-800:#6b21a8; + --purple-900:#581c87; + --pink-50:#fdf2f8; + --pink-100:#fce7f3; + --pink-200:#fbcfe8; + --pink-300:#f9a8d4; + --pink-400:#f472b6; + --pink-500:#ec4899; + --pink-600:#db2777; + --pink-700:#be185d; + --pink-800:#9d174d; + --pink-900:#831843; + --screen-xs:480px; + --screen-sm:640px; + --screen-md:768px; + --screen-lg:1024px; + --screen-xl:1280px; + --screen-xxl:1440px; + --screen-xxxl:2180px; - --red-50: #fef2f2; - --red-100: #fee2e2; - --red-200: #fecaca; - --red-300: #fca5a5; - --red-400: #f87171; - --red-500: #ef4444; - --red-600: #dc2626; - --red-700: #b91c1c; - --red-800: #991b1b; - --red-900: #7f1d1d; - --yellow-50: #fffbeb; - --yellow-100: #fef3c7; - --yellow-200: #fde68a; - --yellow-300: #fcd34d; - --yellow-400: #fbbf24; - --yellow-500: #f59e0b; - --yellow-600: #d97706; - --yellow-700: #b45309; - --yellow-800: #92400e; - --yellow-900: #78350f; - --green-50: #ecfdf5; - --green-100: #d1fae5; - --green-200: #a7f3d0; - --green-300: #6ee7b7; - --green-400: #34d399; - --green-500: #10b981; - --green-600: #059669; - --green-700: #047857; - --green-800: #065f46; - --green-900: #064e3b; - --indigo-50: #eef2ff; - --indigo-100: #e0e7ff; - --indigo-200: #c7d2fe; - --indigo-300: #a5b4fc; - --indigo-400: #818cf8; - --indigo-500: #6366f1; - --indigo-600: #4f46e5; - --indigo-700: #4338ca; - --indigo-800: #3730a3; - --indigo-900: #312e81; - --purple-50: #faf5ff; - --purple-100: #f3e8ff; - --purple-200: #e9d5ff; - --purple-300: #d8b4fe; - --purple-400: #c084fc; - --purple-500: #a855f7; - --purple-600: #9333ea; - --purple-700: #7e22ce; - --purple-800: #6b21a8; - --purple-900: #581c87; - --pink-50: #fdf2f8; - --pink-100: #fce7f3; - --pink-200: #fbcfe8; - --pink-300: #f9a8d4; - --pink-400: #f472b6; - --pink-500: #ec4899; - --pink-600: #db2777; - --pink-700: #be185d; - --pink-800: #9d174d; - --pink-900: #831843; - --screen-xs: 480px; - --screen-sm: 640px; - --screen-md: 768px; - --screen-lg: 1024px; - --screen-xl: 1280px; - --screen-xxl: 1440px; - --screen-xxxl: 2180px; + --spacing-0:0px; + --spacing-1:0.25rem; + --spacing-2:0.5rem; + --spacing-3:0.75rem; + --spacing-4:1rem; + --spacing-5:1.25rem; + --spacing-6:1.5rem; + --spacing-7:1.75rem; + --spacing-8:2rem; + --spacing-9:2.25rem; + --spacing-10:2.5rem; + --spacing-11:2.75rem; + --spacing-12:3rem; + --spacing-14:3.5rem; + --spacing-16:4rem; + --spacing-20:5rem; + --spacing-24:6rem; + --spacing-28:7rem; + --spacing-32:8rem; + --spacing-36:9rem; + --spacing-40:10rem; + --spacing-44:11rem; + --spacing-48:12rem; + --spacing-52:13rem; + --spacing-56:14rem; + --spacing-60:15rem; + --spacing-64:16rem; + --spacing-72:18rem; + --spacing-80:20rem; + --spacing-96:24rem; + --spacing-px:1px; - --spacing-0: 0px; - --spacing-1: 0.25rem; - --spacing-2: 0.5rem; - --spacing-3: 0.75rem; - --spacing-4: 1rem; - --spacing-5: 1.25rem; - --spacing-6: 1.5rem; - --spacing-7: 1.75rem; - --spacing-8: 2rem; - --spacing-9: 2.25rem; - --spacing-10: 2.5rem; - --spacing-11: 2.75rem; - --spacing-12: 3rem; - --spacing-14: 3.5rem; - --spacing-16: 4rem; - --spacing-20: 5rem; - --spacing-24: 6rem; - --spacing-28: 7rem; - --spacing-32: 8rem; - --spacing-36: 9rem; - --spacing-40: 10rem; - --spacing-44: 11rem; - --spacing-48: 12rem; - --spacing-52: 13rem; - --spacing-56: 14rem; - --spacing-60: 15rem; - --spacing-64: 16rem; - --spacing-72: 18rem; - --spacing-80: 20rem; - --spacing-96: 24rem; - --spacing-px: 1px; + --fs-xs:0.75rem; + --fs-sm:0.875rem; + --fs-base:1rem; + --fs-lg:1.125rem; + --fs-xl:1.25rem; + --fs-2xl:1.5rem; + --fs-3xl:1.875rem; + --fs-4xl:2.25rem; + --fs-5xl:3.5rem; + --fs-6xl:4.5rem; + --fs-7xl:5.5rem; + --fs-8xl:6.5rem; + --fs-9xl:7.5rem; - --fs-xs: 0.75rem; - --fs-sm: 0.875rem; - --fs-base: 1rem; - --fs-lg: 1.125rem; - --fs-xl: 1.25rem; - --fs-2xl: 1.5rem; - --fs-3xl: 1.875rem; - --fs-4xl: 2.25rem; - --fs-5xl: 3.5rem; - --fs-6xl: 4.5rem; - --fs-7xl: 5.5rem; - --fs-8xl: 6.5rem; - --fs-9xl: 7.5rem; + --lh-xs:1rem; + --lh-sm:1.25rem; + --lh-base:1.5rem; + --lh-lg:1.75rem; + --lh-xl:1.75rem; + --lh-2xl:2rem; + --lh-3xl:2.25rem; + --lh-4xl:2.5rem; + --lh-5xl:3.75rem; + --lh-6xl:4.75rem; + --lh-7xl:5.75rem; + --lh-8xl:6.75rem; + --lh-9xl:7.75rem; - --lh-xs: 1rem; - --lh-sm: 1.25rem; - --lh-base: 1.5rem; - --lh-lg: 1.75rem; - --lh-xl: 1.75rem; - --lh-2xl: 2rem; - --lh-3xl: 2.25rem; - --lh-4xl: 2.5rem; - --lh-5xl: 3.75rem; - --lh-6xl: 4.75rem; - --lh-7xl: 5.75rem; - --lh-8xl: 6.75rem; - --lh-9xl: 7.75rem; + --ff-display:'Inter var', 'Helvetica', 'Arial', 'sans-serif'; + --ff-body:'Inter var', 'Helvetica', 'Arial', 'sans-serif'; + --ff-demo:'Inter var', 'Helvetica', 'Arial', 'sans-serif'; - --ff-display: 'Inter var', 'Helvetica', 'Arial', 'sans-serif'; - --ff-body: 'Inter var', 'Helvetica', 'Arial', 'sans-serif'; - --ff-demo: 'Inter var', 'Helvetica', 'Arial', 'sans-serif'; + --fw-thin:100; + --fw-extralight:200; + --fw-light:300; + --fw-normal:400; + --fw-medium:500; + --fw-semibold:600; + --fw-bold:700; + --fw-extrabold:800; + --fw-black:900; - --fw-thin: 100; - --fw-extralight: 200; - --fw-light: 300; - --fw-normal: 400; - --fw-medium: 500; - --fw-semibold: 600; - --fw-bold: 700; - --fw-extrabold: 800; - --fw-black: 900; + --fs-h1:4rem; + --fs-h1-medium:3rem; + --fs-h1-small:2.5rem; + + --lh-h1:3rem; + --lh-h1-medium:3.75rem; + --lh-h1-small:2rem; - --fs-h1: 4rem; - --fs-h1-medium: 3rem; - --fs-h1-small: 2.5rem; + --fs-h2:2.75rem; + --fs-h2-medium:2.5rem; + --fs-h2-small:2rem; + + --lh-h2:3.5rem; + --lh-h2-medium:3rem; + --lh-h2-small:2.5rem; + - --lh-h1: 3rem; - --lh-h1-medium: 3.75rem; - --lh-h1-small: 2rem; - - --fs-h2: 2.75rem; - --fs-h2-medium: 2.5rem; - --fs-h2-small: 2rem; - - --lh-h2: 3.5rem; - --lh-h2-medium: 3rem; - --lh-h2-small: 2.5rem; - - --fs-h3: 2rem; - --fs-h3-medium: 1.75rem; - --fs-h3-small: 1.5rem; - - --lh-h3: 2.25rem; - --lh-h3-medium: 2rem; - --lh-h3-small: 1.75rem; - - --fs-h4: 1.5rem; - --fs-h4-medium: 1.5rem; - --fs-h4-small: 1.375rem; - - --lh-h4: 2rem; - --lh-h4-medium: 1.75rem; - --lh-h4-small: 1.75rem; - - --fs-h5: 1.375rem; - --fs-h5-medium: 1.25rem; - --fs-h5-small: 1.125rem; - - --lh-h5: 1.75rem; - --lh-h5-medium: 1.5rem; - --lh-h5-small: 1.375rem; - - --fs-h6: 1.125rem; - --fs-h6-medium: 1.125rem; - --fs-h6-small: 1rem; - - --lh-h6: 1.5rem; - --lh-h6-medium: 1.375rem; - --lh-h6-small: 1.25rem; - --outline-ring-width: 2px; + --fs-h3:2rem; + --fs-h3-medium:1.75rem; + --fs-h3-small:1.5rem; + + --lh-h3:2.25rem; + --lh-h3-medium:2rem; + --lh-h3-small:1.75rem; + + --fs-h4:1.5rem; + --fs-h4-medium:1.5rem; + --fs-h4-small:1.375rem; + + --lh-h4:2rem; + --lh-h4-medium:1.75rem; + --lh-h4-small:1.75rem; + + --fs-h5:1.375rem; + --fs-h5-medium:1.25rem; + --fs-h5-small:1.125rem; + + --lh-h5:1.75rem; + --lh-h5-medium:1.5rem; + --lh-h5-small:1.375rem; + + --fs-h6:1.125rem; + --fs-h6-medium:1.125rem; + --fs-h6-small:1rem; + + --lh-h6:1.5rem; + --lh-h6-medium:1.375rem; + --lh-h6-small:1.25rem; + --outline-ring-width:2px; --outline-ring-inset: ; - --outline-ring-offset-width: 2px; - --outline-ring-offset-color: var(--outline-gray-100); - --outline-ring-color: var(--outline-soft-black); - --outline-ring-offset-shadow: var(--outline-ring-inset) 0 0 0 - var(--outline-ring-offset-width) var(--outline-ring-offset-color); - --outline-ring-shadow: var(--outline-ring-inset) 0 0 0 - calc(var(--outline-ring-width) + var(--outline-ring-offset-width)) - var(--outline-ring-color); + --outline-ring-offset-width:2px; + --outline-ring-offset-color:var(--outline-gray-100); + --outline-ring-color:var(--outline-soft-black); + --outline-ring-offset-shadow:var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-ring-offset-color); + --outline-ring-shadow:var(--outline-ring-inset) 0 0 0 calc(var(--outline-ring-width) + var(--outline-ring-offset-width)) var(--outline-ring-color); + + --outline-shadow:0 0 rgba(0, 0, 0, 0); + --outline-shadow-colored:0 0 rgba(0, 0, 0, 0); - --outline-shadow: 0 0 rgba(0, 0, 0, 0); - --outline-shadow-colored: 0 0 rgba(0, 0, 0, 0); } /* ! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com */ *, ::before, -::after { - box-sizing: border-box; - border-width: 0; - border-style: solid; - border-color: currentColor; +::after{ + box-sizing:border-box; + border-width:0; + border-style:solid; + border-color:currentColor; } ::before, -::after { - --tw-content: ''; -} -html { - line-height: 1.5; - -webkit-text-size-adjust: 100%; - tab-size: 4; - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, - 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, - 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; -} -body { - margin: 0; - line-height: inherit; -} -hr { - height: 0; - color: inherit; - border-top-width: 1px; -} -abbr[title] { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; +::after{ + --tw-content:''; +} +html{ + line-height:1.5; + -webkit-text-size-adjust:100%; + tab-size:4; + font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} +body{ + margin:0; + line-height:inherit; +} +hr{ + height:0; + color:inherit; + border-top-width:1px; +} +abbr[title]{ + -webkit-text-decoration:underline dotted; + text-decoration:underline dotted; } h1, h2, h3, h4, h5, -h6 { - font-size: inherit; - font-weight: inherit; +h6{ + font-size:inherit; + font-weight:inherit; } -a { - color: inherit; - text-decoration: inherit; +a{ + color:inherit; + text-decoration:inherit; } b, -strong { - font-weight: bolder; +strong{ + font-weight:bolder; } code, kbd, samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - 'Liberation Mono', 'Courier New', monospace; - font-size: 1em; +pre{ + font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size:1em; } -small { - font-size: 80%; +small{ + font-size:80%; } sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; +sup{ + font-size:75%; + line-height:0; + position:relative; + vertical-align:baseline; } -sub { - bottom: -0.25em; +sub{ + bottom:-0.25em; } -sup { - top: -0.5em; +sup{ + top:-0.5em; } -table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; +table{ + text-indent:0; + border-color:inherit; + border-collapse:collapse; } button, input, optgroup, select, -textarea { - font-family: inherit; - font-size: 100%; - line-height: inherit; - color: inherit; - margin: 0; - padding: 0; +textarea{ + font-family:inherit; + font-size:100%; + line-height:inherit; + color:inherit; + margin:0; + padding:0; } button, -select { - text-transform: none; +select{ + text-transform:none; } button, [type='button'], [type='reset'], -[type='submit'] { - -webkit-appearance: button; - background-color: transparent; - background-image: none; +[type='submit']{ + -webkit-appearance:button; + background-color:transparent; + background-image:none; } -:-moz-focusring { - outline: auto; +:-moz-focusring{ + outline:auto; } -:-moz-ui-invalid { - box-shadow: none; +:-moz-ui-invalid{ + box-shadow:none; } -progress { - vertical-align: baseline; +progress{ + vertical-align:baseline; } ::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; +::-webkit-outer-spin-button{ + height:auto; } -[type='search'] { - -webkit-appearance: textfield; - outline-offset: -2px; +[type='search']{ + -webkit-appearance:textfield; + outline-offset:-2px; } -::-webkit-search-decoration { - -webkit-appearance: none; +::-webkit-search-decoration{ + -webkit-appearance:none; } -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; +::-webkit-file-upload-button{ + -webkit-appearance:button; + font:inherit; } -summary { - display: list-item; +summary{ + display:list-item; } blockquote, dl, @@ -393,37 +389,37 @@ h6, hr, figure, p, -pre { - margin: 0; +pre{ + margin:0; } -fieldset { - margin: 0; - padding: 0; +fieldset{ + margin:0; + padding:0; } -legend { - padding: 0; +legend{ + padding:0; } ol, ul, -menu { - list-style: none; - margin: 0; - padding: 0; +menu{ + list-style:none; + margin:0; + padding:0; } -textarea { - resize: vertical; +textarea{ + resize:vertical; } input::placeholder, -textarea::placeholder { - opacity: 1; - color: #9ca3af; +textarea::placeholder{ + opacity:1; + color:#9ca3af; } button, -[role='button'] { - cursor: pointer; +[role="button"]{ + cursor:pointer; } -:disabled { - cursor: default; +:disabled{ + cursor:default; } img, svg, @@ -432,15 +428,15 @@ canvas, audio, iframe, embed, -object { - display: block; - vertical-align: middle; +object{ + display:block; + vertical-align:middle; } img, -video { - max-width: 100%; - height: auto; +video{ + max-width:100%; + height:auto; } -[hidden] { - display: none; +[hidden]{ + display:none; } From 30df13d4b55931a81a3816b7b124929f2638983f Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 30 Jan 2024 10:29:26 -0500 Subject: [PATCH 06/21] feat: Storybook now loads something. --- .../docs/outline-core-styled-text.stories.mdx | 2 +- .../outline-core-styled-text/src/outline-core-styled-text.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx b/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx index ed4899ac5..6b2bba6ff 100644 --- a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx +++ b/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx @@ -1,6 +1,6 @@ import { html } from 'lit'; import { Meta, Canvas, Story } from '@storybook/addon-docs'; -import { OutlineCoreStyledText } from '../src/outline-core-styled-text.js'; +import { OutlineCoreStyledText } from '../src/outline-core-styled-text'; Date: Tue, 6 Feb 2024 10:53:25 -0500 Subject: [PATCH 07/21] feat: Update story to specify cke5 --- .../docs/outline-core-styled-text.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx b/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx index 6b2bba6ff..b827eef7a 100644 --- a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx +++ b/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx @@ -4,7 +4,7 @@ import { OutlineCoreStyledText } from '../src/outline-core-styled-text'; Date: Tue, 13 Feb 2024 10:02:03 -0500 Subject: [PATCH 08/21] feat: Wip updates to ckeditor. --- .husky/pre-commit | 45 +++++++++++ .../outline-core-ckeditor.stories.mdx.null} | 79 +++++++++---------- .../index.ts | 6 +- .../packages.json | 8 +- .../src/.ck.ck-content.global.css | 2 +- .../src/.ck.ck-content.global.scoped.css | 0 .../src/config.ts | 0 .../src/outline-core-ckeditor-table.css} | 0 .../src/outline-core-ckeditor.css} | 0 .../src/outline-core-ckeditor.lightdom.css} | 6 +- .../src/outline-core-ckeditor.shared.css} | 8 +- .../src/outline-core-ckeditor.ts} | 12 +-- .../src/utilities/check-file-type.ts | 0 .../src/utilities/external-link-text.ts | 0 .../src/utilities/tooltip.ts | 0 .../src/utilities/wrap-last-word.ts | 0 .../tsconfig.build.json | 0 17 files changed, 105 insertions(+), 61 deletions(-) create mode 100755 .husky/pre-commit rename packages/components/{outline-core-styled-text/docs/outline-core-styled-text.stories.mdx => outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx.null} (93%) rename packages/components/{outline-core-styled-text => outline-core-ckeditor}/index.ts (75%) rename packages/components/{outline-core-styled-text => outline-core-ckeditor}/packages.json (78%) rename packages/components/{outline-core-styled-text => outline-core-ckeditor}/src/.ck.ck-content.global.css (98%) rename packages/components/{outline-core-styled-text => outline-core-ckeditor}/src/.ck.ck-content.global.scoped.css (100%) rename packages/components/{outline-core-styled-text => outline-core-ckeditor}/src/config.ts (100%) rename packages/components/{outline-core-styled-text/src/sic-table.css => outline-core-ckeditor/src/outline-core-ckeditor-table.css} (100%) rename packages/components/{outline-core-styled-text/src/outline-core-styled-text.css => outline-core-ckeditor/src/outline-core-ckeditor.css} (100%) rename packages/components/{outline-core-styled-text/src/outline-core-styled-text.lightdom.css => outline-core-ckeditor/src/outline-core-ckeditor.lightdom.css} (84%) rename packages/components/{outline-core-styled-text/src/outline-core-styled-text.shared.css => outline-core-ckeditor/src/outline-core-ckeditor.shared.css} (97%) rename packages/components/{outline-core-styled-text/src/outline-core-styled-text.ts => outline-core-ckeditor/src/outline-core-ckeditor.ts} (81%) rename packages/components/{outline-core-styled-text => outline-core-ckeditor}/src/utilities/check-file-type.ts (100%) rename packages/components/{outline-core-styled-text => outline-core-ckeditor}/src/utilities/external-link-text.ts (100%) rename packages/components/{outline-core-styled-text => outline-core-ckeditor}/src/utilities/tooltip.ts (100%) rename packages/components/{outline-core-styled-text => outline-core-ckeditor}/src/utilities/wrap-last-word.ts (100%) rename packages/components/{outline-core-styled-text => outline-core-ckeditor}/tsconfig.build.json (100%) diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 000000000..f3ae80c10 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,45 @@ +#!/bin/sh + +if [ "$LEFTHOOK" = "0" ]; then + exit 0 +fi + +call_lefthook() +{ + dir="$(git rev-parse --show-toplevel)" + osArch=$(uname | tr '[:upper:]' '[:lower:]') + cpuArch=$(uname -m | sed 's/aarch64/arm64/') + + if lefthook -h >/dev/null 2>&1 + then + lefthook "$@" + elif test -f "$dir/node_modules/lefthook/bin/index.js" + then + "$dir/node_modules/lefthook/bin/index.js" "$@" + elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" + then + "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@" + elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" + then + "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@" + elif bundle exec lefthook -h >/dev/null 2>&1 + then + bundle exec lefthook "$@" + elif yarn lefthook -h >/dev/null 2>&1 + then + yarn lefthook "$@" + elif pnpm lefthook -h >/dev/null 2>&1 + then + pnpm lefthook "$@" + elif command -v npx >/dev/null 2>&1 + then + npx @evilmartians/lefthook "$@" + elif swift package plugin lefthook >/dev/null 2>&1 + then + swift package --disable-sandbox plugin lefthook "$@" + else + echo "Can't find lefthook in PATH" + fi +} + +call_lefthook run "pre-commit" "$@" diff --git a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx b/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx.null similarity index 93% rename from packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx rename to packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx.null index b827eef7a..d8fdf8b0e 100644 --- a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx +++ b/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx.null @@ -1,6 +1,5 @@ import { html } from 'lit'; import { Meta, Canvas, Story } from '@storybook/addon-docs'; -import { OutlineCoreStyledText } from '../src/outline-core-styled-text'; ` should wrap wysiwyg content. +These are the basic styles provided by the outline-core-ckeditor component. +`` should wrap wysiwyg content. ## Use In Components -`` will not inherit any css styles set on parent element. -Components that contain slots that may use `` will need to set +`` will not inherit any css styles set on parent element. +Components that contain slots that may use `` will need to set css variables in component different values are needed. ## Settings @@ -41,7 +40,7 @@ css variables in component different values are needed. {html` - +

This is an H1 heading 2 @@ -52,7 +51,7 @@ css variables in component different values are needed.

This is an H5 heading
This is an H6 heading
This is an H6 heading with a named link
- + `} @@ -63,16 +62,16 @@ css variables in component different values are needed. {html`
- +

Example PDF link

Example .docx link

- +
- +

Example PDF link

@@ -131,7 +130,7 @@ css variables in component different values are needed. >This is an example of "text-body-helper" size font.

- + `} @@ -141,7 +140,7 @@ css variables in component different values are needed. {html` - +

Connecting you to care anywhere

Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed @@ -172,9 +171,9 @@ css variables in component different values are needed.

Buttons: button link and external button link

- +
- +

Connecting you to care anywhere

Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed @@ -205,7 +204,7 @@ css variables in component different values are needed.

Buttons: button link and external button link

- +
`} @@ -216,7 +215,7 @@ css variables in component different values are needed. {html` - +

Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy @@ -236,7 +235,7 @@ css variables in component different values are needed. hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

- + `} @@ -246,7 +245,7 @@ css variables in component different values are needed. {html` - +

Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy @@ -258,7 +257,7 @@ css variables in component different values are needed. hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

- + `} @@ -270,7 +269,7 @@ css variables in component different values are needed. {html` - +

Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy @@ -312,7 +311,7 @@ css variables in component different values are needed. hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

- + `} @@ -324,7 +323,7 @@ css variables in component different values are needed. {html` - +

Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy @@ -349,7 +348,7 @@ css variables in component different values are needed. hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

- + `} @@ -359,7 +358,7 @@ css variables in component different values are needed. {html` - +

Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy @@ -392,7 +391,7 @@ css variables in component different values are needed. hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

- + `} @@ -402,7 +401,7 @@ css variables in component different values are needed. {html` - + @@ -448,7 +447,7 @@ css variables in component different values are needed.
- + `} @@ -458,7 +457,7 @@ css variables in component different values are needed. {html` - +

Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

@@ -466,9 +465,9 @@ css variables in component different values are needed.

Standard Link External Link

CTA Link

Call to actionCall to action external

- +
- +

Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

@@ -476,7 +475,7 @@ css variables in component different values are needed.

Standard Link External Link

CTA Link

Call to actionCall to action external

- +
`} @@ -487,19 +486,19 @@ css variables in component different values are needed. {html` - -

Tooltip in "outline-core-styled-text" uses a link with "outline-core-tooltip" class and a "title" attribute to create the tooltip.

+ +

Tooltip in "outline-core-ckeditor" uses a link with "outline-core-tooltip" class and a "title" attribute to create the tooltip.

Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit.

- +
- +

Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit.

- +
`} @@ -510,7 +509,7 @@ css variables in component different values are needed. {html` - +

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing @@ -647,7 +646,7 @@ css variables in component different values are needed.

  • Sweets - 5 or fewer servings/week
  • Wine - 1 serving/day
    • -     + `}     @@ -657,7 +656,7 @@ css variables in component different values are needed. {html` - + @@ -697,7 +696,7 @@ css variables in component different values are needed.
    -     + `}     diff --git a/packages/components/outline-core-styled-text/index.ts b/packages/components/outline-core-ckeditor/index.ts similarity index 75% rename from packages/components/outline-core-styled-text/index.ts rename to packages/components/outline-core-ckeditor/index.ts index 8d3f4050e..80c4453d6 100644 --- a/packages/components/outline-core-styled-text/index.ts +++ b/packages/components/outline-core-ckeditor/index.ts @@ -1,11 +1,11 @@ /** - * @file Exports for the OutlineCoreStyledText component. + * @file Exports for the OutlineCoreCkeditor 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 { OutlineCoreCkeditor } 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 @@ -16,6 +16,6 @@ */ // Export the primary component. -export { OutlineCoreStyledText } from './src/outline-core-styled-text'; +export { OutlineCoreCkeditor } from './src/outline-core-ckeditor'; // Export any additional sub-components, variables and methods as required. diff --git a/packages/components/outline-core-styled-text/packages.json b/packages/components/outline-core-ckeditor/packages.json similarity index 78% rename from packages/components/outline-core-styled-text/packages.json rename to packages/components/outline-core-ckeditor/packages.json index 745897082..01b724a50 100644 --- a/packages/components/outline-core-styled-text/packages.json +++ b/packages/components/outline-core-ckeditor/packages.json @@ -1,8 +1,8 @@ { - "name": "@phase2/outline-core-styled-text", + "name": "@phase2/outline-core-ckeditor", "private": true, "version": "0.0.1", - "description": "The Outline Components for the styled text component", + "description": "The Outline Components for the ckeditor styled text component", "keywords": [ "outline", "web-components", @@ -18,9 +18,9 @@ "repository": { "type": "git", "url": "https://github.com/phase2/outline.git", - "directory": "packages/outline-core-styled-text" + "directory": "packages/outline-core-ckeditor" }, - "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-styled-text", + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-ckeditor", "license": "BSD-3-Clause", "scripts": { "build": "node ../../../scripts/build.js", diff --git a/packages/components/outline-core-styled-text/src/.ck.ck-content.global.css b/packages/components/outline-core-ckeditor/src/.ck.ck-content.global.css similarity index 98% rename from packages/components/outline-core-styled-text/src/.ck.ck-content.global.css rename to packages/components/outline-core-ckeditor/src/.ck.ck-content.global.css index 8ff706831..11b1e4bab 100644 --- a/packages/components/outline-core-styled-text/src/.ck.ck-content.global.css +++ b/packages/components/outline-core-ckeditor/src/.ck.ck-content.global.css @@ -24,7 +24,7 @@ @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'; +@import './outline-core-ckeditor.shared.css'; /** * Reset to :host rules that are set in: diff --git a/packages/components/outline-core-styled-text/src/.ck.ck-content.global.scoped.css b/packages/components/outline-core-ckeditor/src/.ck.ck-content.global.scoped.css similarity index 100% rename from packages/components/outline-core-styled-text/src/.ck.ck-content.global.scoped.css rename to packages/components/outline-core-ckeditor/src/.ck.ck-content.global.scoped.css diff --git a/packages/components/outline-core-styled-text/src/config.ts b/packages/components/outline-core-ckeditor/src/config.ts similarity index 100% rename from packages/components/outline-core-styled-text/src/config.ts rename to packages/components/outline-core-ckeditor/src/config.ts diff --git a/packages/components/outline-core-styled-text/src/sic-table.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-table.css similarity index 100% rename from packages/components/outline-core-styled-text/src/sic-table.css rename to packages/components/outline-core-ckeditor/src/outline-core-ckeditor-table.css diff --git a/packages/components/outline-core-styled-text/src/outline-core-styled-text.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.css similarity index 100% rename from packages/components/outline-core-styled-text/src/outline-core-styled-text.css rename to packages/components/outline-core-ckeditor/src/outline-core-ckeditor.css diff --git a/packages/components/outline-core-styled-text/src/outline-core-styled-text.lightdom.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.lightdom.css similarity index 84% rename from packages/components/outline-core-styled-text/src/outline-core-styled-text.lightdom.css rename to packages/components/outline-core-ckeditor/src/outline-core-ckeditor.lightdom.css index a04002e3c..fe6875703 100644 --- a/packages/components/outline-core-styled-text/src/outline-core-styled-text.lightdom.css +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.lightdom.css @@ -1,15 +1,15 @@ -/* Rendered WYSIWYG content is wrapped in on the frontend. */ +/* Rendered WYSIWYG content is wrapped in 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 { +outline-core-ckeditor { /* 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-ckeditor.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'; */ diff --git a/packages/components/outline-core-styled-text/src/outline-core-styled-text.shared.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.shared.css similarity index 97% rename from packages/components/outline-core-styled-text/src/outline-core-styled-text.shared.css rename to packages/components/outline-core-ckeditor/src/outline-core-ckeditor.shared.css index 170bff4f8..e2c1b92ac 100644 --- a/packages/components/outline-core-styled-text/src/outline-core-styled-text.shared.css +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.shared.css @@ -1,4 +1,4 @@ -/* Rendered WYSIWYG content is wrapped in on the frontend. */ +/* Rendered WYSIWYG content is wrapped in on the frontend. */ /* WYSIWYG content is wrapped in .ck-content for targeting within CKEditor. */ /* See https://www.drupal.org/node/3259165 */ @@ -164,7 +164,7 @@ ol { } /* Add margin-bottom to top-level ul and ol only */ -/* Media queries are applied in outline-core-styled-text.lightdom.css */ +/* Media queries are applied in outline-core-ckeditor.lightdom.css */ & > ul, & > ol { margin-bottom: 1.5em; @@ -231,7 +231,7 @@ strong { font-weight: 700; } -/* Most styles are imported from `outline-table` but we add styled-text specific CSS here */ +/* Most styles are imported from `outline-table` but we add ckeditor specific CSS here */ table { margin-bottom: var(--spacing-04); } @@ -430,7 +430,7 @@ ol.disclaimer { } } -/* Allow outline-cta in outline-core-styled-text to wrap if long text */ +/* Allow outline-cta in outline-core-ckeditor to wrap if long text */ a.outline-cta { white-space: initial; } diff --git a/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts similarity index 81% rename from packages/components/outline-core-styled-text/src/outline-core-styled-text.ts rename to packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts index 3eb8ccb04..cbef15dfa 100644 --- a/packages/components/outline-core-styled-text/src/outline-core-styled-text.ts +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts @@ -4,7 +4,7 @@ import { customElement } from 'lit/decorators.js'; // Our base component, which all others extend. import { OutlineElement } from '@phase2/outline-core'; -import componentStyles from './outline-core-styled-text.css.lit'; +import componentStyles from './outline-core-ckeditor.css.lit'; import { checkFileType } from './utilities/check-file-type'; import { externalLinkText } from './utilities/external-link-text'; @@ -15,14 +15,14 @@ wrapLastWord; /** * The Outline Core Styled Text component - * @element outline-core-styled-text + * @element outline-core-ckeditor * @since 1.0.0 * @slot - default slot * - * Lightdom styles in outline-core-styled-text.lightdom.css included in /shared.css + * Lightdom styles in outline-core-ckeditor.lightdom.css included in /shared.css */ -@customElement('outline-core-styled-text') -export class OutlineCoreStyledText extends OutlineElement { +@customElement('outline-core-ckeditor') +export class OutlineCoreCkeditor extends OutlineElement { static styles: CSSResultGroup = [componentStyles]; connectedCallback(): void { @@ -58,6 +58,6 @@ export class OutlineCoreStyledText extends OutlineElement { declare global { interface HTMLElementTagNameMap { - 'outline-core-styled-text': OutlineCoreStyledText; + 'outline-core-ckeditor': OutlineCoreCkeditor; } } diff --git a/packages/components/outline-core-styled-text/src/utilities/check-file-type.ts b/packages/components/outline-core-ckeditor/src/utilities/check-file-type.ts similarity index 100% rename from packages/components/outline-core-styled-text/src/utilities/check-file-type.ts rename to packages/components/outline-core-ckeditor/src/utilities/check-file-type.ts diff --git a/packages/components/outline-core-styled-text/src/utilities/external-link-text.ts b/packages/components/outline-core-ckeditor/src/utilities/external-link-text.ts similarity index 100% rename from packages/components/outline-core-styled-text/src/utilities/external-link-text.ts rename to packages/components/outline-core-ckeditor/src/utilities/external-link-text.ts diff --git a/packages/components/outline-core-styled-text/src/utilities/tooltip.ts b/packages/components/outline-core-ckeditor/src/utilities/tooltip.ts similarity index 100% rename from packages/components/outline-core-styled-text/src/utilities/tooltip.ts rename to packages/components/outline-core-ckeditor/src/utilities/tooltip.ts diff --git a/packages/components/outline-core-styled-text/src/utilities/wrap-last-word.ts b/packages/components/outline-core-ckeditor/src/utilities/wrap-last-word.ts similarity index 100% rename from packages/components/outline-core-styled-text/src/utilities/wrap-last-word.ts rename to packages/components/outline-core-ckeditor/src/utilities/wrap-last-word.ts diff --git a/packages/components/outline-core-styled-text/tsconfig.build.json b/packages/components/outline-core-ckeditor/tsconfig.build.json similarity index 100% rename from packages/components/outline-core-styled-text/tsconfig.build.json rename to packages/components/outline-core-ckeditor/tsconfig.build.json From 45512224f1a5d07fddb9ebfa08ed084952eab560 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 13 Feb 2024 10:25:11 -0500 Subject: [PATCH 09/21] feat: Story now works, component is ready for development. --- ...tor.stories.mdx.null => outline-core-ckeditor.stories.mdx} | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) rename packages/components/outline-core-ckeditor/docs/{outline-core-ckeditor.stories.mdx.null => outline-core-ckeditor.stories.mdx} (99%) diff --git a/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx.null b/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx similarity index 99% rename from packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx.null rename to packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx index d8fdf8b0e..ef8e02da8 100644 --- a/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx.null +++ b/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx @@ -1,9 +1,7 @@ import { html } from 'lit'; import { Meta, Canvas, Story } from '@storybook/addon-docs'; - - Date: Tue, 13 Feb 2024 10:56:47 -0500 Subject: [PATCH 10/21] feat: Update story style. --- .../docs/outline-core-ckeditor.mdx | 627 ++++++++++++++++ .../docs/outline-core-ckeditor.stories.mdx | 700 ------------------ 2 files changed, 627 insertions(+), 700 deletions(-) create mode 100644 packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.mdx delete mode 100644 packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx diff --git a/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.mdx b/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.mdx new file mode 100644 index 000000000..e3728dbe5 --- /dev/null +++ b/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.mdx @@ -0,0 +1,627 @@ +import { html } from 'lit'; +import { Meta } from '@storybook/addon-docs'; + + + +# Overview + +These are the basic styles provided by the outline-core-ckeditor component. +`` should wrap wysiwyg content. + +## Use In Components + +`` will not inherit any css styles set on parent element. +Components that contain slots that may use `` will need to set +css variables in component different values are needed. + +## Settings + +--- + +### CSS Variables + +- `--outline-core-body-text--font-size`: defaults to `--body-01-font-size` +- `--outline-core-body-text--line-height`: defaults to `--body-01-font-size` +- `--outline-core-body-text--margin-bottom`: defaults to `1em` + +# Headings + + +

    + This is an H1 heading + 2 +

    +

    This is an H2 heading2

    +

    This is an H3 heading

    +

    This is an H4 heading

    +
    This is an H5 heading
    +
    This is an H6 heading
    +
    This is an H6 heading with a named link
    +     + + +# Basic text and paragraphs + +
    + +

    + Example PDF link +

    +

    + Example .docx link +

    +     +
    + +

    + Example PDF link +

    +

    + Example .docx link +

    + This is simple text which didn't get wrapped in a p tag. +

    + Connecting you to care anywhere +

    +

    Standard Paragraph

    +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede.3 +

    +

    Strong Paragraph

    +

    + + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

    +

    Italic Paragraph

    +

    + + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

    +

    + This is an example of "text-body-01" size font. +

    +

    + This is an example of "text-body-02" size font. +

    +

    This is an example of base size font.

    +

    + This is an example of "text-body-03" size font. +

    +

    + This is an example of "text-body-04" size font. +

    +

    + This is an example of "text-body-helper" size font. +

    +     + + +# Disclaimer text and paragraphs + + +

    Connecting you to care anywhere

    +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede.3 +

    +

    + + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

    +

    + + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

    +

    + Links: test link + and external link +

    +

    + CTA links: cta link and external cta link +

    +

    + Buttons: button link and external button link +

    +     +
    + +

    Connecting you to care anywhere

    +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede.3 +

    +

    + + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

    +

    + + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. + +

    +

    + Links: test link + and external link +

    +

    + CTA links: cta link and external cta link +

    +

    + Buttons: button link and external button link +

    +     +
    + + +# Block quote(blockquote) + + +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

    +
    + +

    + Be a force. Not for just one thing, but for your thing: the + intersection of your expertise and your passion. And we will help + you achieve it. +

    +
    +
    Phase2 Technology
    +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

    +     + + +# Horizontal rule (HR) + + +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

    +
    +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

    +     + + +# Lists + +## Unordered lists (UL) + + +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

    +
      +
    • This is the first item
      • +
    • + This is the second link item +
        +
      • This is the first child item
        • +
      • + This is the second child item +
          +
        • This is the first grandchild item
          • +
        • + This is the second grandchild item +
            +
          • This is the first great-grandchild item
            • +
          +
          • +
        +
        • +
      +
      • +
    • + This is the third item, which is long. Sed fringilla mauris sit amet + nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam + nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, + nonummy id, imperdiet feugiat, pede. Sed fringilla mauris sit amet + nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam + nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. +
      • +
    +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

    +     + + +## Check list + +## Two columns List (UL) + + +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

    +
      +
    • This is the first item
      • +
    • This is the second item
      • +
    • This is the first child item
      • +
    • This is the second child item
      • +
    • This is the third item
      • +
    • This is the first item
      • +
    • This is the second item
      • +
    • This is the first child item
      • +
    • This is the second child item
      • +
    • This is the third item
      • +
    • This is the second child item
      • +
    • This is the third item
      • +
    +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

    +     + + +## Ordered list (OL) + + +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

    +
      +
    1. This is the first item
      2. +
    2. + This is the second child item +
        +
      1. This is the first grandchild item
        2. +
      2. + This is the second grandchild item +
          +
        1. + This is the first great-grandchild item +
            +
          1. This is the first great-great-grandchild item
            2. +
          +
          2. +
        +
        3. +
      +
      3. +
    3. This is the third item
      4. +
    +

    + Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed + hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy + id, imperdiet feugiat, pede. +

    +     + + +## Table + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Table heading with link + Lorem ipsum dolar2Lorem ipsum dolarLorem ipsum dolar
    + Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem + ipsum dolor sit amet2 Lorem ipsum dolor sit amet +

    A cell with a nested paragraph tag.

    		Strong textLorem ipsum dolor sit amet
    + Table cell with link + Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
    Lorem ipsum dolor sit ametLorem ipsum dolor sit amet + Table cell with external link + Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
    +     + + +## Button and Link (a) + + +

    + Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. +

    +

    Primary Button  Secondary Button

    +

    Standard Link External Link

    +

    CTA Link

    +

    Call to actionCall to action external

    +     +
    + +

    + Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. +

    +

    Primary Button  Secondary Button

    +

    Standard Link External Link

    +

    CTA Link

    +

    Call to actionCall to action external

    +     +
    + + +## Tooltip + + +

    Tooltip in "outline-core-ckeditor" uses a link with "outline-core-tooltip" class and a "title" attribute to create the tooltip.

    +
    +

    + Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit. +

    +     +
    + +

    + Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit. +

    +     +
    + + +## Base styled text + + +

    What is Lorem Ipsum?

    +

    + Lorem Ipsum is simply dummy text of the printing + and typesetting industry. Lorem Ipsum has been the industry's standard + dummy text ever since the 1500s, when an unknown printer took a galley + of type and scrambled it to make a type specimen book. It has survived + not only five centuries, but also the leap into electronic + typesetting, remaining essentially unchanged. It was popularised in + the 1960s with the release of Letraset sheets containing Lorem Ipsum + passages, and more recently with desktop publishing software like + Aldus PageMaker including versions of Lorem Ipsum. +

    +

    Why do we use it?

    +

    + It is a long established fact that a reader + will be distracted by the readable content of a page when looking at + its layout. The point of using Lorem Ipsum is that it has a + more-or-less normal distribution of letters, as opposed to using + 'Content here, content here', making it look like readable English. +
    + Many desktop publishing packages and web page editors now use Lorem + Ipsum as their default model text, and a search for 'lorem ipsum' will + uncover many web sites still in their infancy. Various versions have + evolved over the years, sometimes by accident, sometimes on purpose + (injected humour and the like). +
    + this is a named link +

    +

    Where does it come from?

    +

    + Contrary to popular belief, Lorem Ipsum is not simply random text. It + has roots in a piece of classical Latin literature from 45 BC, making + it over 2000 years old. Richard McClintock, a Latin professor at + Hampden-Sydney College in Virginia, looked up one of the more obscure + Latin words, consectetur, from a Lorem Ipsum passage, and going + through the cites of the word in classical literature, discovered the + undoubtable source. Lorem Ipsum comes from sections 1.10.32 and + 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and + Evil) by Cicero, written in 45 BC. This book is a treatise on the + theory of ethics, very popular during the Renaissance. The first line + of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in + section 1.10.32. +

    +

    + The standard chunk of Lorem Ipsum used since the 1500s is reproduced + below for those interested. Sections 1.10.32 and 1.10.33 from "de + Finibus Bonorum et Malorum" by Cicero are also reproduced in their + exact original form, accompanied by English versions from the 1914 + translation by H. Rackham. +

    +
    Where can I get some?
    +

    + There are many variations of passages of Lorem Ipsum available, but + the majority have suffered alteration in some form, by injected + humour, or randomised words which don't look even slightly believable. + If you are going to use a passage of Lorem Ipsum, you need to be sure + there isn't anything embarrassing hidden in the middle of text. All + the Lorem Ipsum generators on the Internet tend to repeat predefined + chunks as necessary, making this the first true generator on the + Internet. It uses a dictionary of over 200 Latin words, combined with + a handful of model sentence structures, to generate Lorem Ipsum which + looks reasonable. The generated Lorem Ipsum is therefore always free + from repetition, injected humour, or non-characteristic words etc. +

    +
    Where can I get some?
    +

    + There are many variations of passages of Lorem Ipsum available, but + the majority have suffered alteration in some form, by injected + humour, or randomised words which don't look even slightly believable. + If you are going to use a passage of Lorem Ipsum, you need to be sure + there isn't anything embarrassing hidden in the middle of text. All + the Lorem Ipsum generators on the Internet tend to repeat predefined + chunks as necessary, making this the first true generator on the + Internet. It uses a dictionary of over 200 Latin words, combined with + a handful of model sentence structures, to generate Lorem Ipsum which + looks reasonable. The generated Lorem Ipsum is therefore always free + from repetition, injected humour, or non-characteristic words etc. +

    +

    + It is well established that following the Mediterranean Diet or DASH + (Dietary Approaches to Stop Hypertension) diet can lead to + improvements in many key areas of health. The MIND diet + (Mediterranean-DASH Diet for Neurodegenerative Delay) is actually a + combination of these two diets and has been shown to reduce the risk + of Alzheimer’s disease and slow cognitive decline. +

    +

    + One study estimated a 53% lower risk of Alzheimer’s disease when the + diet was followed closely for 4.5 years and a 35% lower risk of + Alzheimer’s when the diet was followed less closely for 4.5 years. +

    +

    + Like the DASH and Mediterranean diet, the MIND diet encourages + plant-based protein, lean animal protein sources, whole grains and + plenty of fruits and vegetables. It also limits red meat, saturated + fats and added sugars. Unique to the MIND diet is that it emphasizes + having one serving of leafy greens per day and two or more servings of + berries per week. +

    +

    + Here are the recommended foods and servings to include according to + the MIND diet: +

    +
    Vegetables
    +
      +
    • Leafy greens - 6 or more servings/week
      • +
    • Other vegetables - 1 or more servings/day
      • +
    +
    Fruits
    +
      +
    • Berries - 2 or more servings/week
      • +
    +
    Grains
    +
      +
    • Whole grains - 3 or more servings/day
      • +
    +
    Protein
    +
      +
    • Nuts - 5 or more servings/week
      • +
    • Beans - 3 or more servings/week
      • +
    • Poultry - 2 or more servings/week
      • +
    • Fish - 1 or more servings/week
      • +
    • Red meat - 4 or less servings/week
      • +
    • Cheese - 1 or less serving/week
      • +
    +
    Fats
    +
      +
    • Olive oil - Use as your primary source of fat
      • +
    • Butter or margarine - 1 tbsp/day or less
      • +
    • Fried foods or fast food - 1 or less serving/week
      • +
    +
    Other
    +
      +
    • Sweets - 5 or fewer servings/week
      • +
    • Wine - 1 serving/day
      • +
    +     + + +## Table + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Lorem ipsum dolarLorem ipsum dolarLorem ipsum dolarLorem ipsum dolar
    + Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem + ipsum dolor sit amet Lorem ipsum dolor sit amet +

    A cell with a nested paragraph tag.

    		Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
    Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
    Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
    Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
    +     diff --git a/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx b/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx deleted file mode 100644 index ef8e02da8..000000000 --- a/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.stories.mdx +++ /dev/null @@ -1,700 +0,0 @@ -import { html } from 'lit'; -import { Meta, Canvas, Story } from '@storybook/addon-docs'; - - - -# Overview - -These are the basic styles provided by the outline-core-ckeditor component. -`` should wrap wysiwyg content. - -## Use In Components - -`` will not inherit any css styles set on parent element. -Components that contain slots that may use `` will need to set -css variables in component different values are needed. - -## Settings - ---- - -### CSS Variables - -- `--outline-core-body-text--font-size`: defaults to `--body-01-font-size` -- `--outline-core-body-text--line-height`: defaults to `--body-01-font-size` -- `--outline-core-body-text--margin-bottom`: defaults to `1em` - -# Headings - - - - {html` - -

    - This is an H1 heading - 2 -

    -

    This is an H2 heading2

    -

    This is an H3 heading

    -

    This is an H4 heading

    -
    This is an H5 heading
    -
    This is an H6 heading
    -
    This is an H6 heading with a named link
    -     - `} -     -     - -# Basic text and paragraphs - - - - {html` -
    - -

    - Example PDF link -

    -

    - Example .docx link -

    -     -
    - -

    - Example PDF link -

    -

    - Example .docx link -

    - This is simple text which didn't get wrapped in a p tag. -

    - Connecting you to care anywhere -

    -

    Standard Paragraph

    -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede.3 -

    -

    Strong Paragraph

    -

    - - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

    -

    Italic Paragraph

    -

    - - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

    -

    - This is an example of "text-body-01" size font. -

    -

    - This is an example of "text-body-02" size font. -

    -

    This is an example of base size font.

    -

    - This is an example of "text-body-03" size font. -

    -

    - This is an example of "text-body-04" size font. -

    -

    - This is an example of "text-body-helper" size font. -

    -     - `} -     -     - -# Disclaimer text and paragraphs - - - - {html` - -

    Connecting you to care anywhere

    -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede.3 -

    -

    - - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

    -

    - - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

    -

    - Links: test link - and external link -

    -

    - CTA links: cta link and external cta link -

    -

    - Buttons: button link and external button link -

    -     -
    - -

    Connecting you to care anywhere

    -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede.3 -

    -

    - - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

    -

    - - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. - -

    -

    - Links: test link - and external link -

    -

    - CTA links: cta link and external cta link -

    -

    - Buttons: button link and external button link -

    -     -
    - `} -     -     - -# Block quote(blockquote) - - - - {html` - -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

    -
    - -

    - Be a force. Not for just one thing, but for your thing: the - intersection of your expertise and your passion. And we will help - you achieve it. -

    -
    -
    Phase2 Technology
    -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

    -     - `} -     -     - -# Horizontal rule (HR) - - - - {html` - -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

    -
    -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

    -     - `} -     -     - -# Lists - -## Unordered lists (UL) - - - - {html` - -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

    -
      -
    • This is the first item
      • -
    • - This is the second link item -
        -
      • This is the first child item
        • -
      • - This is the second child item -
          -
        • This is the first grandchild item
          • -
        • - This is the second grandchild item -
            -
          • This is the first great-grandchild item
            • -
          -
          • -
        -
        • -
      -
      • -
    • - This is the third item, which is long. Sed fringilla mauris sit amet - nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam - nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, - nonummy id, imperdiet feugiat, pede. Sed fringilla mauris sit amet - nibh. Ut varius tincidunt libero. Sed hendrerit. Proin magna. Nullam - nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. -
      • -
    -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

    -     - `} -     -     - -## Check list - -## Two columns List (UL) - - - - {html` - -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

    -
      -
    • This is the first item
      • -
    • This is the second item
      • -
    • This is the first child item
      • -
    • This is the second child item
      • -
    • This is the third item
      • -
    • This is the first item
      • -
    • This is the second item
      • -
    • This is the first child item
      • -
    • This is the second child item
      • -
    • This is the third item
      • -
    • This is the second child item
      • -
    • This is the third item
      • -
    -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

    -     - `} -     -     - -## Ordered list (OL) - - - - {html` - -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

    -
      -
    1. This is the first item
      2. -
    2. - This is the second child item -
        -
      1. This is the first grandchild item
        2. -
      2. - This is the second grandchild item -
          -
        1. This is the first great-grandchild item -
            -
          1. This is the first great-great-grandchild item
            2. -
          -
          2. -
        -
        3. -
      -
      3. - - -
    3. This is the third item
      4. -
    -

    - Sed fringilla mauris sit amet nibh. Ut varius tincidunt libero. Sed - hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy - id, imperdiet feugiat, pede. -

    -     - `} -     -     - -## Table - - - - {html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - Table heading with link - Lorem ipsum dolar2Lorem ipsum dolarLorem ipsum dolar
    - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem - ipsum dolor sit amet2 Lorem ipsum dolor sit amet -

    A cell with a nested paragraph tag.

    		Strong textLorem ipsum dolor sit amet
    - Table cell with link - Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
    Lorem ipsum dolor sit ametLorem ipsum dolor sit amet - Table cell with external link - Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
    -     - `} -     -     - -## Button and Link (a) - - - - {html` - -

    - Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. -

    -

    Primary Button  Secondary Button

    -

    Standard Link External Link

    -

    CTA Link

    -

    Call to actionCall to action external

    -     -
    - -

    - Sed fringilla mauris sit amet nibh. Standard Link Ut varius tincidunt libero. External Link Sed hendrerit. Proin magna. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. -

    -

    Primary Button  Secondary Button

    -

    Standard Link External Link

    -

    CTA Link

    -

    Call to actionCall to action external

    -     -
    - `} -     -     - -## Tooltip - - - - {html` - -

    Tooltip in "outline-core-ckeditor" uses a link with "outline-core-tooltip" class and a "title" attribute to create the tooltip.

    -
    -

    - Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit. -

    -     -
    - -

    - Sed fringilla mauris sit amet nibh. Tooltip Link Ut varius tincidunt libero sed hendrerit. -

    -     -
    - `} -     -     - -## Base styled text - - - - {html` - -

    What is Lorem Ipsum?

    -

    - Lorem Ipsum is simply dummy text of the printing - and typesetting industry. Lorem Ipsum has been the industry's standard - dummy text ever since the 1500s, when an unknown printer took a galley - of type and scrambled it to make a type specimen book. It has survived - not only five centuries, but also the leap into electronic - typesetting, remaining essentially unchanged. It was popularised in - the 1960s with the release of Letraset sheets containing Lorem Ipsum - passages, and more recently with desktop publishing software like - Aldus PageMaker including versions of Lorem Ipsum. -

    -

    Why do we use it?

    -

    - It is a long established fact that a reader - will be distracted by the readable content of a page when looking at - its layout. The point of using Lorem Ipsum is that it has a - more-or-less normal distribution of letters, as opposed to using - 'Content here, content here', making it look like readable English. -
    - Many desktop publishing packages and web page editors now use Lorem - Ipsum as their default model text, and a search for 'lorem ipsum' will - uncover many web sites still in their infancy. Various versions have - evolved over the years, sometimes by accident, sometimes on purpose - (injected humour and the like). -
    - this is a named link -

    -

    Where does it come from?

    -

    - Contrary to popular belief, Lorem Ipsum is not simply random text. It - has roots in a piece of classical Latin literature from 45 BC, making - it over 2000 years old. Richard McClintock, a Latin professor at - Hampden-Sydney College in Virginia, looked up one of the more obscure - Latin words, consectetur, from a Lorem Ipsum passage, and going - through the cites of the word in classical literature, discovered the - undoubtable source. Lorem Ipsum comes from sections 1.10.32 and - 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and - Evil) by Cicero, written in 45 BC. This book is a treatise on the - theory of ethics, very popular during the Renaissance. The first line - of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in - section 1.10.32. -

    -

    - The standard chunk of Lorem Ipsum used since the 1500s is reproduced - below for those interested. Sections 1.10.32 and 1.10.33 from "de - Finibus Bonorum et Malorum" by Cicero are also reproduced in their - exact original form, accompanied by English versions from the 1914 - translation by H. Rackham. -

    -
    Where can I get some?
    -

    - There are many variations of passages of Lorem Ipsum available, but - the majority have suffered alteration in some form, by injected - humour, or randomised words which don't look even slightly believable. - If you are going to use a passage of Lorem Ipsum, you need to be sure - there isn't anything embarrassing hidden in the middle of text. All - the Lorem Ipsum generators on the Internet tend to repeat predefined - chunks as necessary, making this the first true generator on the - Internet. It uses a dictionary of over 200 Latin words, combined with - a handful of model sentence structures, to generate Lorem Ipsum which - looks reasonable. The generated Lorem Ipsum is therefore always free - from repetition, injected humour, or non-characteristic words etc. -

    -
    Where can I get some?
    -

    - There are many variations of passages of Lorem Ipsum available, but - the majority have suffered alteration in some form, by injected - humour, or randomised words which don't look even slightly believable. - If you are going to use a passage of Lorem Ipsum, you need to be sure - there isn't anything embarrassing hidden in the middle of text. All - the Lorem Ipsum generators on the Internet tend to repeat predefined - chunks as necessary, making this the first true generator on the - Internet. It uses a dictionary of over 200 Latin words, combined with - a handful of model sentence structures, to generate Lorem Ipsum which - looks reasonable. The generated Lorem Ipsum is therefore always free - from repetition, injected humour, or non-characteristic words etc. -

    -

    - It is well established that following the Mediterranean Diet or DASH - (Dietary Approaches to Stop Hypertension) diet can lead to - improvements in many key areas of health. The MIND diet - (Mediterranean-DASH Diet for Neurodegenerative Delay) is actually a - combination of these two diets and has been shown to reduce the risk - of Alzheimer’s disease and slow cognitive decline. -

    -

    - One study estimated a 53% lower risk of Alzheimer’s disease when the - diet was followed closely for 4.5 years and a 35% lower risk of - Alzheimer’s when the diet was followed less closely for 4.5 years. -

    -

    - Like the DASH and Mediterranean diet, the MIND diet encourages - plant-based protein, lean animal protein sources, whole grains and - plenty of fruits and vegetables. It also limits red meat, saturated - fats and added sugars. Unique to the MIND diet is that it emphasizes - having one serving of leafy greens per day and two or more servings of - berries per week. -

    -

    - Here are the recommended foods and servings to include according to - the MIND diet: -

    -
    Vegetables
    -
      -
    • Leafy greens - 6 or more servings/week
      • -
    • Other vegetables - 1 or more servings/day
      • -
    -
    Fruits
    -
      -
    • Berries - 2 or more servings/week
      • -
    -
    Grains
    -
      -
    • Whole grains - 3 or more servings/day
      • -
    -
    Protein
    -
      -
    • Nuts - 5 or more servings/week
      • -
    • Beans - 3 or more servings/week
      • -
    • Poultry - 2 or more servings/week
      • -
    • Fish - 1 or more servings/week
      • -
    • Red meat - 4 or less servings/week
      • -
    • Cheese - 1 or less serving/week
      • -
    -
    Fats
    -
      -
    • Olive oil - Use as your primary source of fat
      • -
    • Butter or margarine - 1 tbsp/day or less
      • -
    • Fried foods or fast food - 1 or less serving/week
      • -
    -
    Other
    -
      -
    • Sweets - 5 or fewer servings/week
      • -
    • Wine - 1 serving/day
      • -
    -     - `} -     -     - -## Table - - - - {html` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Lorem ipsum dolarLorem ipsum dolarLorem ipsum dolarLorem ipsum dolar
    - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem - ipsum dolor sit amet Lorem ipsum dolor sit amet -

    A cell with a nested paragraph tag.

    		Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
    Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
    Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
    Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
    -     - `} -     -     From c4f96cd80bc35fe4be475089cbedf6e6ce9ff900 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 20 Feb 2024 10:42:10 -0500 Subject: [PATCH 11/21] Updates tooltip --- .../src/utilities/tooltip.css | 121 ++++++++++++++++++ .../src/utilities/tooltip.ts | 20 +-- 2 files changed, 131 insertions(+), 10 deletions(-) create mode 100644 packages/components/outline-core-ckeditor/src/utilities/tooltip.css diff --git a/packages/components/outline-core-ckeditor/src/utilities/tooltip.css b/packages/components/outline-core-ckeditor/src/utilities/tooltip.css new file mode 100644 index 000000000..3c06beb71 --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/utilities/tooltip.css @@ -0,0 +1,121 @@ +:root { + --outline-core-ckeditor-tooltip--arrow-height: 0.5em; + --outline-core-ckeditor-tooltip--arrow-color: var(--color-neutral-lighter); +} + +a.outline-core-ckeditor-tooltip { + --outline-core-ckeditor-tooltip--arrow-height: 0.5em; + + font-weight: var(--fw-normal); + text-decoration: none; + + .last-word { + font-weight: var(--fw-normal); + text-decoration: none; + + &::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(--outline-core-ckeditor-link--icon-size, 0.8em); + width: var(--outline-core-ckeditor-link--icon-size, 0.8em); + background-image: var( + --outline-core-ckeditor-tooltip--icon, + url('data:image/svg+xml,') + ); + } + } + + &:hover, + &:focus { + background-color: transparent; + color: var(--text-color); + cursor: help; + } +} + +.outline-core-ckeditor-tooltip { + position: relative; + display: inline-block; +} + +/* The arrow (or tooltip arrow) that connects the tooltip to the container */ +[role='tooltip']::before { + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border: var(--outline-core-ckeditor-tooltip--arrow-height) solid transparent; + border-top-color: var(--outline-core-ckeditor-tooltip--arrow-color); + text-shadow: 0 1px 2px hsl(0, 0%, 0%); +} + +/* This allows users to move their cursor from the button to the tooltip */ +[role='tooltip']::after { + position: absolute; + right: 0; + top: 100%; + left: 0; + display: block; + height: calc(var(--outline-core-ckeditor-tooltip--arrow-height) * 2); + text-shadow: 0 1px 2px hsl(0, 0%, 0%); +} + +.outline-core-ckeditor-tooltip.tooltip-visible [role='tooltip']::before, +.outline-core-ckeditor-tooltip.tooltip-visible [role='tooltip']::after { + content: ''; +} + +.outline-core-ckeditor-tooltip.bottom [role='tooltip']::before, +.outline-core-ckeditor-tooltip.bottom [role='tooltip']::after, +.outline-core-ckeditor-tooltip.bottom [role='tooltip'] { + top: unset; + bottom: 100%; +} + +.outline-core-ckeditor-tooltip.bottom [role='tooltip']::before { + border-bottom-color: var(--outline-core-ckeditor-tooltip--arrow-color); + border-top-color: transparent; +} + +.outline-core-ckeditor-tooltip.top [role='tooltip'] { + bottom: calc(100% + calc(var(--outline-core-ckeditor-tooltip--arrow-height))); +} +.outline-core-ckeditor-tooltip.bottom [role='tooltip'] { + top: calc(100% + calc(var(--outline-core-ckeditor-tooltip--arrow-height))); + bottom: unset; +} + +/* Tooltip styles */ +[role='tooltip'] { + position: absolute; + bottom: calc(100% + calc(var(--outline-core-ckeditor-tooltip--arrow-height))); + left: 50%; + transform: translateX(-50%); + margin: 0; + padding: var(--spacing-04) var(--spacing-08); + border-radius: var(--border-radius-rounded-default); + color: var(--color-neutral-default); + background: var(--color-neutral-white); + width: max-content; + max-width: 65vw; + box-shadow: 0 1px 2px hsl(0, 0%, 0%); + z-index: var(--z-index-popup); +} + +/* Hides the tooltip */ +.hidden { + display: none; +} + +/* + Removes the emoji container from the pointer event targets. + If removed the globalPointerDown() function will break when you click/tap exactly on the emoji. +*/ +[aria-hidden='true'] { + pointer-events: none; +} diff --git a/packages/components/outline-core-ckeditor/src/utilities/tooltip.ts b/packages/components/outline-core-ckeditor/src/utilities/tooltip.ts index f73a7286e..162b88289 100644 --- a/packages/components/outline-core-ckeditor/src/utilities/tooltip.ts +++ b/packages/components/outline-core-ckeditor/src/utilities/tooltip.ts @@ -6,7 +6,7 @@ import { wrapLastWord } from './wrap-last-word'; export function tooltipLink(el: HTMLElement) { // Check if the element contains an image if ( - el.querySelector('.outline-core-tooltip-popup') || + el.querySelector('.outline-core-ckeditor-tooltip') || !el.hasAttribute('title') ) { return; @@ -19,8 +19,8 @@ export function tooltipLink(el: HTMLElement) { } const id: string = self.crypto.randomUUID - ? `outline-core-tooltip-${self.crypto.randomUUID()}` - : `outline-core-tooltip-${self.crypto + ? `outline-core-ckeditor-tooltip-${self.crypto.randomUUID()}` + : `outline-core-ckeditor-tooltip-${self.crypto .getRandomValues(new Uint32Array(3)) .join('-')}`; @@ -37,7 +37,7 @@ export function tooltipLink(el: HTMLElement) { const tooltipPopup = document.createElement('span'); tooltipPopup.setAttribute('id', id); tooltipPopup.setAttribute('role', 'tooltip'); - tooltipPopup.classList.add('outline-core-tooltip-popup'); + tooltipPopup.classList.add('outline-core-ckeditor-tooltip'); tooltipPopup.classList.add('hidden'); tooltipPopup.innerHTML = tooltipText; @@ -131,14 +131,14 @@ export class Tooltip { // Show or hide the tooltip showTooltip() { - this.container.classList.add('tooltip-visible'); + this.container.classList.add('outline-core-ckeditor-tooltip--visible'); if (this.tooltip) { this.tooltip.classList.remove('hidden'); } } hideTooltip() { - this.container.classList.remove('tooltip-visible'); + this.container.classList.remove('outline-core-ckeditor-tooltip--visible'); if (this.tooltip) { this.tooltip.classList.add('hidden'); } @@ -160,11 +160,11 @@ export class Tooltip { initialiseClassList() { switch (this.tooltipPosition) { case 'bottom': - this.container.classList.add('bottom'); + this.container.classList.add('outline-core-ckeditor-tooltip--bottom'); break; default: - this.container.classList.remove('bottom'); + this.container.classList.remove('outline-core-ckeditor-tooltip--bottom'); break; } } @@ -220,7 +220,7 @@ export class Tooltip { // Move the tooltip so it fits within the viewport moveTooltipUp() { - this.container.classList.remove('bottom'); + this.container.classList.remove('outline-core-ckeditor-tooltip--bottom'); } moveTooltipRight(bounds: DOMRect) { @@ -232,7 +232,7 @@ export class Tooltip { } moveTooltipDown() { - this.container.classList.add('bottom'); + this.container.classList.add('outline-core-ckeditor-tooltip--bottom'); } moveTooltipLeft(bounds: DOMRect, windowWidth: number) { From 77c7ba714d497463d2f97576aaa519423a0074b2 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 20 Feb 2024 10:42:29 -0500 Subject: [PATCH 12/21] Updates dependencies. --- packages/components/outline-core-ckeditor/packages.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/outline-core-ckeditor/packages.json b/packages/components/outline-core-ckeditor/packages.json index 01b724a50..665fb0ea2 100644 --- a/packages/components/outline-core-ckeditor/packages.json +++ b/packages/components/outline-core-ckeditor/packages.json @@ -27,13 +27,16 @@ "package": "yarn publish" }, "dependencies": { - "@phase2/outline-core": "^0.2.5", - "lit": "^2.3.1" + "lit": "^3.1.2" }, "publishConfig": { "access": "public" }, "exports": { ".": "./index.ts" + }, + "devDependencies": { + "@phase2/outline-adopted-stylesheets-controller": "^1.0.1", + "@phase2/outline-core": "^0.2.6" } } From 9255cf51b62b5afcb9aad39007a1ec929124fb81 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 20 Feb 2024 10:42:47 -0500 Subject: [PATCH 13/21] Updates storybook import so it, you know, works. --- .../outline-core-ckeditor/docs/outline-core-ckeditor.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.mdx b/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.mdx index e3728dbe5..277521823 100644 --- a/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.mdx +++ b/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.mdx @@ -1,5 +1,5 @@ -import { html } from 'lit'; import { Meta } from '@storybook/addon-docs'; +import '../src/outline-core-ckeditor' Date: Tue, 20 Feb 2024 10:43:09 -0500 Subject: [PATCH 14/21] Updates CSS. We'll begin slowly processing new css into our new format. --- .../src/.ck.ck-content.global.scoped.css | 46 ------------------- .../.ck.ck-content.global.css | 0 .../outline-core-ckeditor-table.css | 0 .../outline-core-ckeditor.css | 0 .../outline-core-ckeditor.lightdom.css | 0 .../outline-core-ckeditor.shared.css | 0 .../src/outline-core-ckeditor-imports.css | 6 +++ .../src/outline-core-ckeditor-starterkit.css | 1 + .../src/outline-core-ckeditor-vars.css | 2 + .../src/outline-core-ckeditor.ts | 15 ++++-- 10 files changed, 20 insertions(+), 50 deletions(-) delete mode 100644 packages/components/outline-core-ckeditor/src/.ck.ck-content.global.scoped.css rename packages/components/outline-core-ckeditor/src/{ => deprecated}/.ck.ck-content.global.css (100%) rename packages/components/outline-core-ckeditor/src/{ => deprecated}/outline-core-ckeditor-table.css (100%) rename packages/components/outline-core-ckeditor/src/{ => deprecated}/outline-core-ckeditor.css (100%) rename packages/components/outline-core-ckeditor/src/{ => deprecated}/outline-core-ckeditor.lightdom.css (100%) rename packages/components/outline-core-ckeditor/src/{ => deprecated}/outline-core-ckeditor.shared.css (100%) create mode 100644 packages/components/outline-core-ckeditor/src/outline-core-ckeditor-imports.css create mode 100644 packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css create mode 100644 packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css diff --git a/packages/components/outline-core-ckeditor/src/.ck.ck-content.global.scoped.css b/packages/components/outline-core-ckeditor/src/.ck.ck-content.global.scoped.css deleted file mode 100644 index 27f629a5e..000000000 --- a/packages/components/outline-core-ckeditor/src/.ck.ck-content.global.scoped.css +++ /dev/null @@ -1,46 +0,0 @@ -.ck.ck-content p{display:block;font-size:var(--body-01-font-size);font-size:var(--outline-body-text--font-size, var(--body-01-font-size));line-height:var(--body-01-line-height);line-height:var( - --outline-body-text--line-height, - var(--body-01-line-height) - );margin-bottom:1em;margin-bottom:var(--outline-body-text--margin-bottom, 1em);font-weight:var(--fw-normal);}.ck.ck-content p:last-child{margin-bottom:0;}.ck.ck-content h1,.ck.ck-content h2,.ck.ck-content h3,.ck.ck-content h4,.ck.ck-content h5,.ck.ck-content h6,.ck.ck-content .headline-07,.ck.ck-content .headline-06,.ck.ck-content .headline-05,.ck.ck-content .headline-04,.ck.ck-content .headline-03,.ck.ck-content .headline-02,.ck.ck-content .headline-01{color:var(--outline-heading-color);font-family:var(--ff-display);font-weight:var(--fw-bold);display:block;margin-bottom:var(--spacing-04);}.ck.ck-content h1,.ck.ck-content .headline-07{font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);}.ck.ck-content h2{font-size:var(--headline-05-font-size);line-height:var(--headline-05-line-height);}.ck.ck-content h3{font-size:var(--headline-04-font-size);line-height:var(--headline-04-line-height);}.ck.ck-content h4{font-size:var(--headline-03-font-size);line-height:var(--headline-03-line-height);}.ck.ck-content h5{font-size:var(--headline-02-font-size);line-height:var(--headline-02-line-height);}.ck.ck-content h6{font-size:var(--headline-01-font-size);line-height:var(--headline-01-line-height);}.ck.ck-content .headline-06{font-size:var(--headline-06-font-size);line-height:var(--headline-06-line-height);}.ck.ck-content .headline-05{font-size:var(--headline-05-font-size);line-height:var(--headline-05-line-height);}.ck.ck-content .headline-04{font-size:var(--headline-04-font-size);line-height:var(--headline-04-line-height);}.ck.ck-content .headline-03{font-size:var(--headline-03-font-size);line-height:var(--headline-03-line-height);}.ck.ck-content .headline-02{font-size:var(--headline-02-font-size);line-height:var(--headline-02-line-height);}.ck.ck-content .headline-01{font-size:var(--headline-01-font-size);line-height:var(--headline-01-line-height);}.ck.ck-content p + h1,.ck.ck-content p + h2,.ck.ck-content p + h3,.ck.ck-content p + h4,.ck.ck-content p + .headline-07,.ck.ck-content p + .headline-06,.ck.ck-content p + .headline-05,.ck.ck-content p + .headline-04{margin-top:var(--spacing-10);}.ck.ck-content p + h5,.ck.ck-content p + h6,.ck.ck-content p + .headline-01,.ck.ck-content p + .headline-02,.ck.ck-content p + .headline-03{margin-top:var(--spacing-8);}.ck.ck-content ul{list-style-type:disc;padding-left:var(--spacing-04);}.ck.ck-content ul li{list-style-type:disc;}.ck.ck-content ul li ul li{list-style-type:circle;}.ck.ck-content ul li ul li ul li{list-style-type:square;}.ck.ck-content ul li ul li ul li ul li{list-style-type:disc;}.ck.ck-content ol{list-style-type:decimal;padding-left:var(--spacing-04);margin-bottom:var(--spacing-02);}.ck.ck-content ol li{list-style-type:decimal;}.ck.ck-content ol li ol li{list-style-type:lower-alpha;}.ck.ck-content ol li ol li ol li{list-style-type:lower-roman;}.ck.ck-content ol li ol li ol li ol li{list-style-type:decimal;}.ck.ck-content ol li::marker{color:var(--outline-text-color);}.ck.ck-content & > ul,.ck.ck-content & > ol{margin-bottom:1.5em;padding-left:var(--spacing-05);}.ck.ck-content li{list-style-position:outside;padding-left:0.5em;margin-top:0.5em;margin-bottom:var(--spacing-02);font-size:var(--body-01-font-size);font-size:var(--outline-body-text--font-size, var(--body-01-font-size));}.ck.ck-content li::marker{color:var(--outline-accent-color);font-size:var(--fs-xl);}.ck.ck-content blockquote{display:flex;gap:var(--spacing-05);margin-top:1em;margin-bottom:1em;}.ck.ck-content blockquote p{font-size:var(--body-03-font-size);margin-bottom:0;}.ck.ck-content blockquote{font-weight:bold;}.ck.ck-content blockquote outline-icon{color:var(--color-primary-light);}.ck.ck-content hr{border-color:var(--outline-accent-color);margin-top:2em;margin-bottom:2em;}.ck.ck-content figcaption{font-size:var(--body-01-font-size);font-size:var(--outline-body-text--font-size, var(--body-01-font-size));color:var(--outline-text-color);text-align:center;}.ck.ck-content em{font-style:italic;}.ck.ck-content sup{vertical-align:super;font-size:60%;top:0;}.ck.ck-content sub{vertical-align:sub;font-size:60%;bottom:0;}.ck.ck-content strong{font-weight:700;}.ck.ck-content table{margin-bottom:var(--spacing-04);}.ck.ck-content .article-byline{font-size:var(--fs-lg);font-size:var(--body-article-byline, var(--fs-lg));}.ck.ck-content .disclaimer{--outline-link--text-color--hover:var(--color-neutral-white);--outline-link--bg-color--hover:var(--outline-text-color);--outline-cta--text-color:var(--outline-text-color);--outline-cta--text-color--hover:var(--color-neutral-white);--outline-cta--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");--outline-cta--icon--hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");--outline-cta--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");--outline-cta--icon-external--hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");--outline-button--bg-color:var(--outline-text-color);--outline-button--text-color:var(--color-neutral-white);--outline-button--border-color:var(--outline-text-color);--outline-button--bg-color--hover:transparent;--outline-button--text-color--hover:var(--outline-text-color);--outline-button--border-color--hover:var(--outline-text-color);--outline-button--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");--outline-button--icon-external--hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");font-size:calc(var(--body-helper-min-font-size));line-height:calc(var(--body-helper-min-line-height));display:block;margin-bottom:1em;}.ck.ck-content .disclaimer:last-child{margin-bottom:0;}.ck.ck-content .disclaimer a{font-weight:var(--fw-bold);text-decoration:underline;}.ck.ck-content .disclaimer a:hover,.ck.ck-content .disclaimer a:focus,.ck.ck-content .disclaimer a:focus-visible{color:var(--outline-link--text-color--hover);color:var( - --outline-disclaimer-link--text-color--hover, - var(--outline-link--text-color--hover) - );background-color:var(--outline-link--bg-color--hover);background-color:var( - --outline-disclaimer-link--bg-color--hover, - var(--outline-link--bg-color--hover) - );}.ck.ck-content .disclaimer a.outline-cta{font-size:inherit;color:var(--outline-cta--text-color);color:var( - --outline-disclaimer-cta--text-color, - var(--outline-cta--text-color) - );text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta .last-word{text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta .last-word::after{background-image:var(--outline-cta--icon);background-image:var( - --outline-disclaimer-cta--icon, - var(--outline-cta--icon) - );height:var(--spacing-03);width:var(--spacing-03);margin-left:calc(var(--spacing-02));}.ck.ck-content .disclaimer a.outline-cta:hover,.ck.ck-content .disclaimer a.outline-cta:focus-visible,.ck.ck-content .disclaimer a.outline-cta:focus{background-color:var(--outline-text-color);background-image:none;color:var(--outline-cta--text-color--hover);color:var( - --outline-disclaimer-cta--text-color--hover, - var(--outline-cta--text-color--hover) - );text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta:hover .last-word,.ck.ck-content .disclaimer a.outline-cta:focus-visible .last-word,.ck.ck-content .disclaimer a.outline-cta:focus .last-word{text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta:hover .last-word::after,.ck.ck-content .disclaimer a.outline-cta:focus-visible .last-word::after,.ck.ck-content .disclaimer a.outline-cta:focus .last-word::after{background-image:var(--outline-cta--icon--hover);background-image:var( - --outline-disclaimer-cta--icon--hover, - var(--outline-cta--icon--hover) - );transform:translateX(calc(var(--spacing-01)));}.ck.ck-content .disclaimer a.outline-cta.icon-external .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank'] .last-word::after{background-image:var(--outline-cta--icon-external);background-image:var( - --outline-disclaimer-cta--icon-external, - var(--outline-cta--icon-external) - );height:var(--spacing-03);width:var(--spacing-03);}.ck.ck-content .disclaimer a.outline-cta.icon-external:hover .last-word::after,.ck.ck-content .disclaimer a.outline-cta.icon-external:focus-visible .last-word::after,.ck.ck-content .disclaimer a.outline-cta.icon-external:focus .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank']:hover .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank']:focus-visible .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank']:focus .last-word::after{background-image:var(--outline-cta--icon-external--hover);background-image:var( - --outline-disclaimer-cta--icon-external--hover, - var(--outline-cta--icon-external--hover) - );transform:translateX(-2px) translateY(-1px);}.ck.ck-content .disclaimer a.btn{font-size:inherit;color:var(--outline-button--text-color);color:var( - --outline-disclaimer-button--text-color, - var(--outline-button--text-color) - );padding:var(--spacing-02) var(--spacing-04);min-height:0;text-decoration:none;}.ck.ck-content .disclaimer a.btn:hover{color:var(--outline-button--text-color--hover);color:var( - --outline-disclaimer-button--text-color--hover, - var(--outline-button--text-color--hover) - );background-color:var(--outline-button--bg-color--hover);background-color:var( - --outline-disclaimer-button--bg-color--hover, - var(--outline-button--bg-color--hover) - );border-color:var(--outline-button--border-color--hover);border-color:var( - --outline-disclaimer-button--border-color--hover, - var(--outline-button--border-color--hover) - );}.ck.ck-content .disclaimer a.btn.icon-external .last-word::after,.ck.ck-content .disclaimer a.btn[target='_blank'] .last-word::after{background-image:var(--outline-button--icon-external);background-image:var( - --outline-disclaimer-button--icon-external, - var(--outline-button--icon-external) - );height:var(--spacing-03);width:var(--spacing-03);margin-left:calc(var(--spacing-02));}.ck.ck-content .disclaimer a.btn.icon-external:hover .last-word::after,.ck.ck-content .disclaimer a.btn[target='_blank']:hover .last-word::after{background-image:var(--outline-button--icon-external--hover);background-image:var( - --outline-disclaimer-button--icon-external--hover, - var(--outline-button--icon-external--hover) - );}.ck.ck-content .disclaimer li{font-size:calc(var(--body-helper-min-font-size));line-height:calc(var(--body-helper-min-line-height));margin-top:var(--spacing-01);margin-bottom:var(--spacing-01);}.ck.ck-content .disclaimer li::marker{color:var(--outline-text-color);}.ck.ck-content ul.disclaimer li::marker{font-size:10px;}.ck.ck-content ol.disclaimer li::marker{font-size:0.9em;}.ck.ck-content a.outline-cta{white-space:initial;}.ck.ck-content a[name],.ck.ck-content a:not([href]){color:inherit;cursor:text;text-decoration:none;font-weight:inherit;font-size:inherit;}.ck.ck-content a[name]:hover,.ck.ck-content a[name]:focus,.ck.ck-content a[name]:focus-visible,.ck.ck-content a:not([href]):hover,.ck.ck-content a:not([href]):focus,.ck.ck-content a:not([href]):focus-visible{color:var(--outline-text-color);background-color:transparent;}.ck.ck-content .clear-left{clear:left;}.ck.ck-content .clear-right{clear:right;}.ck.ck-content .clear-both{clear:both;}.ck.ck-content{color:var(--outline-core-text-color);display:block;font-weight:unset;width:unset;}@media (min-width: 640px){.ck.ck-content{width:unset;}} \ No newline at end of file diff --git a/packages/components/outline-core-ckeditor/src/.ck.ck-content.global.css b/packages/components/outline-core-ckeditor/src/deprecated/.ck.ck-content.global.css similarity index 100% rename from packages/components/outline-core-ckeditor/src/.ck.ck-content.global.css rename to packages/components/outline-core-ckeditor/src/deprecated/.ck.ck-content.global.css diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-table.css b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor-table.css similarity index 100% rename from packages/components/outline-core-ckeditor/src/outline-core-ckeditor-table.css rename to packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor-table.css diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.css b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.css similarity index 100% rename from packages/components/outline-core-ckeditor/src/outline-core-ckeditor.css rename to packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.css diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.lightdom.css b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.lightdom.css similarity index 100% rename from packages/components/outline-core-ckeditor/src/outline-core-ckeditor.lightdom.css rename to packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.lightdom.css diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.shared.css b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.shared.css similarity index 100% rename from packages/components/outline-core-ckeditor/src/outline-core-ckeditor.shared.css rename to packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.shared.css diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-imports.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-imports.css new file mode 100644 index 000000000..3398b75ef --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-imports.css @@ -0,0 +1,6 @@ +.ck.ck-content, outline-core-ckeditor { + display: block; + + @nested-import './outline-core-ckeditor-starterkit.css'; + +} diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css new file mode 100644 index 000000000..282d0c27f --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css @@ -0,0 +1 @@ +/* This CSS file provides a set of good default styles for integrating CKEditor within a Drupal environment. It ensures consistent styling and behavior of the WYSIWYG editor across the platform. */ diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css new file mode 100644 index 000000000..042f431c9 --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css @@ -0,0 +1,2 @@ +/* This section is reserved for variables imported from Figma or other design tools. +These variables should be connected to all other CSS files for consistent styling across the platform. */ diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts index cbef15dfa..35b081a08 100644 --- a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts @@ -4,14 +4,16 @@ import { customElement } from 'lit/decorators.js'; // Our base component, which all others extend. import { OutlineElement } from '@phase2/outline-core'; -import componentStyles from './outline-core-ckeditor.css.lit'; +import globalStyles from './outline-core-ckeditor-imports.css?inline'; +import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller'; + import { checkFileType } from './utilities/check-file-type'; import { externalLinkText } from './utilities/external-link-text'; import { tooltipLink } from './utilities/tooltip'; import { wrapLastWord } from './utilities/wrap-last-word'; -wrapLastWord; +// wrapLastWord; /** * The Outline Core Styled Text component @@ -22,8 +24,13 @@ wrapLastWord; * Lightdom styles in outline-core-ckeditor.lightdom.css included in /shared.css */ @customElement('outline-core-ckeditor') -export class OutlineCoreCkeditor extends OutlineElement { - static styles: CSSResultGroup = [componentStyles]; +export class OutlineCoreCkeditor extends OutlineElement + // static styles: CSSResultGroup = [componentStyles]; + { + GlobalStylesheets: AdoptedStylesheets | undefined = new AdoptedStylesheets( + this, + globalStyles + ); connectedCallback(): void { super.connectedCallback(); From a06ceb05ca7958b43d7be07792783760edb36e4d Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 20 Feb 2024 10:55:00 -0500 Subject: [PATCH 15/21] Creates starterkit. --- .../src/outline-core-ckeditor-starterkit.css | 466 ++++++++++++++++++ 1 file changed, 466 insertions(+) diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css index 282d0c27f..280d81e69 100644 --- a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css @@ -1 +1,467 @@ /* This CSS file provides a set of good default styles for integrating CKEditor within a Drupal environment. It ensures consistent styling and behavior of the WYSIWYG editor across the platform. */ + +/* Rendered WYSIWYG content is wrapped in on the frontend. */ +/* WYSIWYG content is wrapped in .ck.ck-content for targeting within CKEditor. This gets added in outline-core-ckeditor-imports.css */ +/* See https://www.drupal.org/node/3259165 */ + +@import './outline-core-ckeditor-vars.css'; + +p { + display: block; + font-size: var(--outline-body-text--font-size, var(--body-01-font-size)); + line-height: var( + --outline-body-text--line-height, + var(--body-01-line-height) + ); + margin-bottom: var(--outline-body-text--margin-bottom, 1em); + font-weight: var(--fw-normal); + + &:last-child { + margin-bottom: 0; + } +} + +h1, +h2, +h3, +h4, +h5, +h6, +.headline-07, +.headline-06, +.headline-05, +.headline-04, +.headline-03, +.headline-02, +.headline-01 { + color: var(--outline-heading-color); + font-family: var(--ff-display); + font-weight: var(--fw-bold); + display: block; + margin-bottom: var(--spacing-04); +} + +h1, +.headline-07 { + font-size: var(--headline-07-font-size); + line-height: var(--headline-07-line-height); +} + +h2 { + font-size: var(--headline-05-font-size); + line-height: var(--headline-05-line-height); +} + +h3 { + font-size: var(--headline-04-font-size); + line-height: var(--headline-04-line-height); +} + +h4 { + font-size: var(--headline-03-font-size); + line-height: var(--headline-03-line-height); +} + +h5 { + font-size: var(--headline-02-font-size); + line-height: var(--headline-02-line-height); +} + +h6 { + font-size: var(--headline-01-font-size); + line-height: var(--headline-01-line-height); +} + +.headline-06 { + font-size: var(--headline-06-font-size); + line-height: var(--headline-06-line-height); +} + +.headline-05 { + font-size: var(--headline-05-font-size); + line-height: var(--headline-05-line-height); +} + +.headline-04 { + font-size: var(--headline-04-font-size); + line-height: var(--headline-04-line-height); +} + +.headline-03 { + font-size: var(--headline-03-font-size); + line-height: var(--headline-03-line-height); +} + +.headline-02 { + font-size: var(--headline-02-font-size); + line-height: var(--headline-02-line-height); +} + +.headline-01 { + font-size: var(--headline-01-font-size); + line-height: var(--headline-01-line-height); +} + +/* Add extra spacing between paragraphs and + * headings using the sibling selector. +*/ +p { + + h1, + + h2, + + h3, + + h4, + + .headline-07, + + .headline-06, + + .headline-05, + + .headline-04 { + margin-top: var(--spacing-10); + } + + + h5, + + h6, + + .headline-01, + + .headline-02, + + .headline-03 { + margin-top: var(--spacing-8); + } +} + +ul { + list-style-type: disc; + padding-left: var(--spacing-04); + li { + list-style-type: disc; + ul li { + list-style-type: circle; + ul li { + list-style-type: square; + ul li { + list-style-type: disc; + } + } + } + } +} + +ol { + list-style-type: decimal; + padding-left: var(--spacing-04); + margin-bottom: var(--spacing-02); + li { + list-style-type: decimal; + ol li { + list-style-type: lower-alpha; + ol li { + list-style-type: lower-roman; + ol li { + list-style-type: decimal; + } + } + } + } +} + +ol { + li::marker { + color: var(--outline-text-color); + } +} + +/* Add margin-bottom to top-level ul and ol only */ +/* Media queries are applied in outline-core-ckeditor.lightdom.css */ +& > ul, +& > ol { + margin-bottom: 1.5em; + padding-left: var(--spacing-05); +} + +li { + list-style-position: outside; + padding-left: 0.5em; + margin-top: 0.5em; + margin-bottom: var(--spacing-02); + font-size: var(--outline-body-text--font-size, var(--body-01-font-size)); + &::marker { + color: var(--outline-accent-color); + font-size: var(--fs-xl); + } +} + +blockquote { + display: flex; + gap: var(--spacing-05); + margin-top: 1em; + margin-bottom: 1em; + p { + font-size: var(--body-03-font-size); + margin-bottom: 0; + } + font-weight: bold; + outline-icon { + color: var(--color-primary-light); + } +} + +/* Set a global HR for color purposes. */ +hr { + border-color: var(--outline-accent-color); + margin-top: 2em; + margin-bottom: 2em; +} + +figcaption { + font-size: var(--outline-body-text--font-size, var(--body-01-font-size)); + color: var(--outline-text-color); + text-align: center; +} + +em { + font-style: italic; +} + +sup { + vertical-align: super; + font-size: 60%; + top: 0; +} + +sub { + vertical-align: sub; + font-size: 60%; + bottom: 0; +} + +strong { + font-weight: 700; +} + +/* Most styles are imported from `outline-table` but we add ckeditor specific CSS here */ +table { + margin-bottom: var(--spacing-04); +} + +/* Article byline */ +.article-byline { + font-size: var(--body-article-byline, var(--fs-lg)); +} + +/* Disclaimer */ +.disclaimer { + --outline-link--text-color--hover: var(--color-neutral-white); + --outline-link--bg-color--hover: var(--outline-text-color); + --outline-cta--text-color: var(--outline-text-color); + --outline-cta--text-color--hover: var(--color-neutral-white); + --outline-cta--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); + --outline-cta--icon--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); + --outline-cta--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --outline-cta--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --outline-button--bg-color: var(--outline-text-color); + --outline-button--text-color: var(--color-neutral-white); + --outline-button--border-color: var(--outline-text-color); + --outline-button--bg-color--hover: transparent; + --outline-button--text-color--hover: var(--outline-text-color); + --outline-button--border-color--hover: var(--outline-text-color); + --outline-button--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + --outline-button--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + + font-size: calc(var(--body-helper-min-font-size)); + line-height: calc(var(--body-helper-min-line-height)); + display: block; + margin-bottom: 1em; + &:last-child { + margin-bottom: 0; + } + + a { + font-weight: var(--fw-bold); + text-decoration: underline; + + &:hover, + &:focus, + &:focus-visible { + color: var( + --outline-disclaimer-link--text-color--hover, + var(--outline-link--text-color--hover) + ); + background-color: var( + --outline-disclaimer-link--bg-color--hover, + var(--outline-link--bg-color--hover) + ); + } + } + a.outline-cta { + font-size: inherit; + color: var( + --outline-disclaimer-cta--text-color, + var(--outline-cta--text-color) + ); + text-decoration: underline; + + .last-word { + text-decoration: underline; + &::after { + background-image: var( + --outline-disclaimer-cta--icon, + var(--outline-cta--icon) + ); + height: var(--spacing-03); + width: var(--spacing-03); + margin-left: calc(var(--spacing-02)); + } + } + &:hover, + &:focus-visible, + &:focus { + background-color: var(--outline-text-color); + background-image: none; + color: var( + --outline-disclaimer-cta--text-color--hover, + var(--outline-cta--text-color--hover) + ); + text-decoration: underline; + + .last-word { + text-decoration: underline; + + &::after { + background-image: var( + --outline-disclaimer-cta--icon--hover, + var(--outline-cta--icon--hover) + ); + transform: translateX(calc(var(--spacing-01))); + } + } + } + + &.icon-external, + &[target='_blank'] { + .last-word { + &::after { + background-image: var( + --outline-disclaimer-cta--icon-external, + var(--outline-cta--icon-external) + ); + height: var(--spacing-03); + width: var(--spacing-03); + } + } + + &:hover, + &:focus-visible, + &:focus { + .last-word { + &::after { + background-image: var( + --outline-disclaimer-cta--icon-external--hover, + var(--outline-cta--icon-external--hover) + ); + transform: translateX(-2px) translateY(-1px); + } + } + } + } + } + + a.btn { + font-size: inherit; + color: var( + --outline-disclaimer-button--text-color, + var(--outline-button--text-color) + ); + padding: var(--spacing-02) var(--spacing-04); + min-height: 0; + text-decoration: none; + + &:hover { + color: var( + --outline-disclaimer-button--text-color--hover, + var(--outline-button--text-color--hover) + ); + background-color: var( + --outline-disclaimer-button--bg-color--hover, + var(--outline-button--bg-color--hover) + ); + border-color: var( + --outline-disclaimer-button--border-color--hover, + var(--outline-button--border-color--hover) + ); + } + + &.icon-external, + &[target='_blank'] { + .last-word::after { + background-image: var( + --outline-disclaimer-button--icon-external, + var(--outline-button--icon-external) + ); + height: var(--spacing-03); + width: var(--spacing-03); + margin-left: calc(var(--spacing-02)); + } + + &:hover { + .last-word { + &::after { + background-image: var( + --outline-disclaimer-button--icon-external--hover, + var(--outline-button--icon-external--hover) + ); + } + } + } + } + } + + li { + font-size: calc(var(--body-helper-min-font-size)); + line-height: calc(var(--body-helper-min-line-height)); + margin-top: var(--spacing-01); + margin-bottom: var(--spacing-01); + + &::marker { + color: var(--outline-text-color); + } + } +} +ul.disclaimer { + li::marker { + font-size: 10px; + } +} +ol.disclaimer { + li::marker { + font-size: 0.9em; + } +} + +/* Allow outline-cta in outline-core-ckeditor to wrap if long text */ +a.outline-cta { + white-space: initial; +} + +a[name], +a:not([href]) { + color: inherit; + cursor: text; + text-decoration: none; + font-weight: inherit; + font-size: inherit; + &:hover, + &:focus, + &:focus-visible { + color: var(--outline-text-color); + background-color: transparent; + } +} + +.clear-left { + clear: left; +} + +.clear-right { + clear: right; +} + +.clear-both { + clear: both; +} From 5c78eff7bb827c3bf36f07c37ba0c8be6b15bc49 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 20 Feb 2024 11:35:05 -0500 Subject: [PATCH 16/21] css vars games. --- .../src/outline-core-ckeditor-starterkit.css | 242 +++++++----------- .../src/outline-core-ckeditor-vars.css | 51 ++++ 2 files changed, 143 insertions(+), 150 deletions(-) diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css index 280d81e69..25117f807 100644 --- a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css @@ -8,13 +8,13 @@ p { display: block; - font-size: var(--outline-body-text--font-size, var(--body-01-font-size)); + font-size: var(--outline-core-ckeditor--body-text--font-size, var(--outline-core-ckeditor--body-01-font-size)); line-height: var( - --outline-body-text--line-height, - var(--body-01-line-height) + --outline-core-ckeditor--body-text--line-height, + var(--outline-core-ckeditor--body-01-line-height) ); - margin-bottom: var(--outline-body-text--margin-bottom, 1em); - font-weight: var(--fw-normal); + margin-bottom: var(--outline-core-ckeditor--body-text--margin-bottom, 1em); + font-weight: var(--outline-core-ckeditor--fw-normal); &:last-child { margin-bottom: 0; @@ -34,72 +34,72 @@ h6, .headline-03, .headline-02, .headline-01 { - color: var(--outline-heading-color); - font-family: var(--ff-display); - font-weight: var(--fw-bold); + color: var(--outline-core-ckeditor--heading-color); + font-family: var(--outline-core-ckeditor--ff-display); + font-weight: var(--outline-core-ckeditor--fw-bold); display: block; - margin-bottom: var(--spacing-04); + margin-bottom: var(--outline-core-ckeditor--spacing-04); } h1, .headline-07 { - font-size: var(--headline-07-font-size); - line-height: var(--headline-07-line-height); + font-size: var(--outline-core-ckeditor--headline-07-font-size); + line-height: var(--outline-core-ckeditor--headline-07-line-height); } h2 { - font-size: var(--headline-05-font-size); - line-height: var(--headline-05-line-height); + font-size: var(--outline-core-ckeditor--headline-05-font-size); + line-height: var(--outline-core-ckeditor--headline-05-line-height); } h3 { - font-size: var(--headline-04-font-size); - line-height: var(--headline-04-line-height); + font-size: var(--outline-core-ckeditor--headline-04-font-size); + line-height: var(--outline-core-ckeditor--headline-04-line-height); } h4 { - font-size: var(--headline-03-font-size); - line-height: var(--headline-03-line-height); + font-size: var(--outline-core-ckeditor--headline-03-font-size); + line-height: var(--outline-core-ckeditor--headline-03-line-height); } h5 { - font-size: var(--headline-02-font-size); - line-height: var(--headline-02-line-height); + font-size: var(--outline-core-ckeditor--headline-02-font-size); + line-height: var(--outline-core-ckeditor--headline-02-line-height); } h6 { - font-size: var(--headline-01-font-size); - line-height: var(--headline-01-line-height); + font-size: var(--outline-core-ckeditor--headline-01-font-size); + line-height: var(--outline-core-ckeditor--headline-01-line-height); } .headline-06 { - font-size: var(--headline-06-font-size); - line-height: var(--headline-06-line-height); + font-size: var(--outline-core-ckeditor--headline-06-font-size); + line-height: var(--outline-core-ckeditor--headline-06-line-height); } .headline-05 { - font-size: var(--headline-05-font-size); - line-height: var(--headline-05-line-height); + font-size: var(--outline-core-ckeditor--headline-05-font-size); + line-height: var(--outline-core-ckeditor--headline-05-line-height); } .headline-04 { - font-size: var(--headline-04-font-size); - line-height: var(--headline-04-line-height); + font-size: var(--outline-core-ckeditor--headline-04-font-size); + line-height: var(--outline-core-ckeditor--headline-04-line-height); } .headline-03 { - font-size: var(--headline-03-font-size); - line-height: var(--headline-03-line-height); + font-size: var(--outline-core-ckeditor--headline-03-font-size); + line-height: var(--outline-core-ckeditor--headline-03-line-height); } .headline-02 { - font-size: var(--headline-02-font-size); - line-height: var(--headline-02-line-height); + font-size: var(--outline-core-ckeditor--headline-02-font-size); + line-height: var(--outline-core-ckeditor--headline-02-line-height); } .headline-01 { - font-size: var(--headline-01-font-size); - line-height: var(--headline-01-line-height); + font-size: var(--outline-core-ckeditor--headline-01-font-size); + line-height: var(--outline-core-ckeditor--headline-01-line-height); } /* Add extra spacing between paragraphs and @@ -114,7 +114,7 @@ p { + .headline-06, + .headline-05, + .headline-04 { - margin-top: var(--spacing-10); + margin-top: var(--outline-core-ckeditor--spacing-10); } + h5, @@ -122,13 +122,13 @@ p { + .headline-01, + .headline-02, + .headline-03 { - margin-top: var(--spacing-8); + margin-top: var(--outline-core-ckeditor--spacing-8); } } ul { list-style-type: disc; - padding-left: var(--spacing-04); + padding-left: var(--outline-core-ckeditor--spacing-04); li { list-style-type: disc; ul li { @@ -145,8 +145,8 @@ ul { ol { list-style-type: decimal; - padding-left: var(--spacing-04); - margin-bottom: var(--spacing-02); + padding-left: var(--outline-core-ckeditor--spacing-04); + margin-bottom: var(--outline-core-ckeditor--spacing-02); li { list-style-type: decimal; ol li { @@ -163,7 +163,7 @@ ol { ol { li::marker { - color: var(--outline-text-color); + color: var(--outline-core-ckeditor--text-color); } } @@ -172,46 +172,46 @@ ol { & > ul, & > ol { margin-bottom: 1.5em; - padding-left: var(--spacing-05); + padding-left: var(--outline-core-ckeditor--spacing-05); } li { list-style-position: outside; padding-left: 0.5em; margin-top: 0.5em; - margin-bottom: var(--spacing-02); - font-size: var(--outline-body-text--font-size, var(--body-01-font-size)); + margin-bottom: var(--outline-core-ckeditor--spacing-02); + font-size: var(--outline-core-ckeditor--body-text--font-size, var(--outline-core-ckeditor--body-01-font-size)); &::marker { - color: var(--outline-accent-color); - font-size: var(--fs-xl); + color: var(--outline-core-ckeditor--accent-color); + font-size: var(--outline-core-ckeditor--fs-xl); } } blockquote { display: flex; - gap: var(--spacing-05); + gap: var(--outline-core-ckeditor--spacing-05); margin-top: 1em; margin-bottom: 1em; p { - font-size: var(--body-03-font-size); + font-size: var(--outline-core-ckeditor--body-03-font-size); margin-bottom: 0; } font-weight: bold; outline-icon { - color: var(--color-primary-light); + color: var(--outline-core-ckeditor--color-primary-light); } } /* Set a global HR for color purposes. */ hr { - border-color: var(--outline-accent-color); + border-color: var(--outline-core-ckeditor--accent-color); margin-top: 2em; margin-bottom: 2em; } figcaption { - font-size: var(--outline-body-text--font-size, var(--body-01-font-size)); - color: var(--outline-text-color); + font-size: var(--outline-core-ckeditor--body-text--font-size, var(--outline-core-ckeditor--body-01-font-size)); + color: var(--outline-core-ckeditor--text-color); text-align: center; } @@ -237,35 +237,19 @@ strong { /* Most styles are imported from `outline-table` but we add ckeditor specific CSS here */ table { - margin-bottom: var(--spacing-04); + margin-bottom: var(--outline-core-ckeditor--spacing-04); } /* Article byline */ .article-byline { - font-size: var(--body-article-byline, var(--fs-lg)); + font-size: var(--outline-core-ckeditor--body-article-byline-font-size, var(--outline-core-ckeditor--fs-lg)); } /* Disclaimer */ .disclaimer { - --outline-link--text-color--hover: var(--color-neutral-white); - --outline-link--bg-color--hover: var(--outline-text-color); - --outline-cta--text-color: var(--outline-text-color); - --outline-cta--text-color--hover: var(--color-neutral-white); - --outline-cta--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); - --outline-cta--icon--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); - --outline-cta--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - --outline-cta--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - --outline-button--bg-color: var(--outline-text-color); - --outline-button--text-color: var(--color-neutral-white); - --outline-button--border-color: var(--outline-text-color); - --outline-button--bg-color--hover: transparent; - --outline-button--text-color--hover: var(--outline-text-color); - --outline-button--border-color--hover: var(--outline-text-color); - --outline-button--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - --outline-button--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - - font-size: calc(var(--body-helper-min-font-size)); - line-height: calc(var(--body-helper-min-line-height)); + + font-size: var(--outline-core-ckeditor--body-helper-min-font-size); + line-height: var(--outline-core-ckeditor--body-helper-min-line-height); display: block; margin-bottom: 1em; &:last-child { @@ -273,62 +257,44 @@ table { } a { - font-weight: var(--fw-bold); + font-weight: var(--outline-core-ckeditor--fw-bold); text-decoration: underline; &:hover, &:focus, &:focus-visible { - color: var( - --outline-disclaimer-link--text-color--hover, - var(--outline-link--text-color--hover) - ); - background-color: var( - --outline-disclaimer-link--bg-color--hover, - var(--outline-link--bg-color--hover) - ); + color: var(--outline-core-ckeditor--link-text-color-hover); + background-color: var(--outline-core-ckeditor--link-bg-color-hover); } } - a.outline-cta { + a.ckeditor-cta { font-size: inherit; - color: var( - --outline-disclaimer-cta--text-color, - var(--outline-cta--text-color) - ); + color: var(--outline-core-ckeditor--cta-text-color); text-decoration: underline; .last-word { text-decoration: underline; &::after { - background-image: var( - --outline-disclaimer-cta--icon, - var(--outline-cta--icon) - ); - height: var(--spacing-03); - width: var(--spacing-03); - margin-left: calc(var(--spacing-02)); + background-image: var(--outline-core-ckeditor--cta-icon); + height: var(--outline-core-ckeditor--spacing-03); + width: var(--outline-core-ckeditor--spacing-03); + margin-left: calc(var(--outline-core-ckeditor--spacing-02)); } } &:hover, &:focus-visible, &:focus { - background-color: var(--outline-text-color); + background-color: var(--outline-core-ckeditor--text-color); background-image: none; - color: var( - --outline-disclaimer-cta--text-color--hover, - var(--outline-cta--text-color--hover) - ); + color: var(--outline-core-ckeditor--cta-text-color-hover); text-decoration: underline; .last-word { text-decoration: underline; &::after { - background-image: var( - --outline-disclaimer-cta--icon--hover, - var(--outline-cta--icon--hover) - ); - transform: translateX(calc(var(--spacing-01))); + background-image: var(--outline-core-ckeditor--cta-icon-hover); + transform: translateX(calc(var(--outline-core-ckeditor--spacing-01))); } } } @@ -337,12 +303,9 @@ table { &[target='_blank'] { .last-word { &::after { - background-image: var( - --outline-disclaimer-cta--icon-external, - var(--outline-cta--icon-external) - ); - height: var(--spacing-03); - width: var(--spacing-03); + background-image: var(--outline-core-ckeditor--cta-icon-external); + height: var(--outline-core-ckeditor--spacing-03); + width: var(--outline-core-ckeditor--spacing-03); } } @@ -351,10 +314,7 @@ table { &:focus { .last-word { &::after { - background-image: var( - --outline-disclaimer-cta--icon-external--hover, - var(--outline-cta--icon-external--hover) - ); + background-image: var(--outline-core-ckeditor--cta-icon-external-hover); transform: translateX(-2px) translateY(-1px); } } @@ -364,48 +324,30 @@ table { a.btn { font-size: inherit; - color: var( - --outline-disclaimer-button--text-color, - var(--outline-button--text-color) - ); - padding: var(--spacing-02) var(--spacing-04); + color: var(--outline-core-ckeditor--button-text-color); + padding: var(--outline-core-ckeditor--spacing-02) var(--outline-core-ckeditor--spacing-04); min-height: 0; text-decoration: none; &:hover { - color: var( - --outline-disclaimer-button--text-color--hover, - var(--outline-button--text-color--hover) - ); - background-color: var( - --outline-disclaimer-button--bg-color--hover, - var(--outline-button--bg-color--hover) - ); - border-color: var( - --outline-disclaimer-button--border-color--hover, - var(--outline-button--border-color--hover) - ); + color: var(--outline-core-ckeditor--button-text-color-hover); + background-color: var(--outline-core-ckeditor--button-bg-color-hover); + border-color: var(--outline-core-ckeditor--button-border-color-hover); } &.icon-external, &[target='_blank'] { .last-word::after { - background-image: var( - --outline-disclaimer-button--icon-external, - var(--outline-button--icon-external) - ); - height: var(--spacing-03); - width: var(--spacing-03); - margin-left: calc(var(--spacing-02)); + background-image: var(--outline-core-ckeditor--button-icon-external); + height: var(--outline-core-ckeditor--spacing-03); + width: var(--outline-core-ckeditor--spacing-03); + margin-left: calc(var(--outline-core-ckeditor--spacing-02)); } &:hover { .last-word { &::after { - background-image: var( - --outline-disclaimer-button--icon-external--hover, - var(--outline-button--icon-external--hover) - ); + background-image: var(--outline-core-ckeditor--button-icon-external-hover); } } } @@ -413,29 +355,29 @@ table { } li { - font-size: calc(var(--body-helper-min-font-size)); - line-height: calc(var(--body-helper-min-line-height)); - margin-top: var(--spacing-01); - margin-bottom: var(--spacing-01); + font-size: var(--outline-core-ckeditor--body-helper-min-font-size); + line-height: var(--outline-core-ckeditor--body-helper-min-line-height); + margin-top: var(--outline-core-ckeditor--spacing-01); + margin-bottom: var(--outline-core-ckeditor--spacing-01); &::marker { - color: var(--outline-text-color); + color: var(--outline-core-ckeditor--text-color); } } } -ul.disclaimer { +ul.ckeditor-disclaimer { li::marker { font-size: 10px; } } -ol.disclaimer { +ol.ckeditor-disclaimer { li::marker { font-size: 0.9em; } } -/* Allow outline-cta in outline-core-ckeditor to wrap if long text */ -a.outline-cta { +/* Allow ckeditor-cta in ckeditor to wrap if long text */ +a.ckeditor-cta { white-space: initial; } @@ -449,7 +391,7 @@ a:not([href]) { &:hover, &:focus, &:focus-visible { - color: var(--outline-text-color); + color: var(--outline-core-ckeditor--text-color); background-color: transparent; } } diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css index 042f431c9..488996136 100644 --- a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css @@ -1,2 +1,53 @@ /* This section is reserved for variables imported from Figma or other design tools. These variables should be connected to all other CSS files for consistent styling across the platform. */ + +/* Taken from .disclaimer around line 250 */ +--outline-core-ckeditor--link--text-color--hover: var( + --outline-core-ckeditor--color-neutral-white +); +--outline-core-ckeditor--link--bg-color--hover: var( + --outline-core-ckeditor--text-color +); +--outline-core-ckeditor--cta--text-color: var( + --outline-core-ckeditor--text-color +); +--outline-core-ckeditor--cta--text-color--hover: var( + --outline-core-ckeditor--color-neutral-white +); +--outline-core-ckeditor--cta--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); +--outline-core-ckeditor--cta--icon--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); +--outline-core-ckeditor--cta--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +--outline-core-ckeditor--cta--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +--outline-core-ckeditor--button--bg-color: var( + --outline-core-ckeditor--text-color +); +--outline-core-ckeditor--button--text-color: var( + --outline-core-ckeditor--color-neutral-white +); +--outline-core-ckeditor--button--border-color: var( + --outline-core-ckeditor--text-color +); +--outline-core-ckeditor--button--bg-color--hover: transparent; +--outline-core-ckeditor--button--text-color--hover: var( + --outline-core-ckeditor--text-color +); +--outline-core-ckeditor--button--border-color--hover: var( + --outline-core-ckeditor--text-color +); +--outline-core-ckeditor-button-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +--outline-core-ckeditor-link-text-color-hover: var(--color-neutral-white); +--outline-core-ckeditor-link-bg-color-hover: var(--outline-core-ckeditor-text-color); +--outline-core-ckeditor-cta-text-color: var(--outline-core-ckeditor-text-color); +--outline-core-ckeditor-cta-text-color-hover: var(--color-neutral-white); +--outline-core-ckeditor-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); +--outline-core-ckeditor-cta-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); +--outline-core-ckeditor-cta-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +--outline-core-ckeditor-cta-icon-external-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +--outline-core-ckeditor-button-bg-color: var(--outline-core-ckeditor-text-color); +--outline-core-ckeditor-button-text-color: var(--color-neutral-white); +--outline-core-ckeditor-button-border-color: var(--outline-core-ckeditor-text-color); +--outline-core-ckeditor-button-bg-color-hover: transparent; +--outline-core-ckeditor-button-text-color-hover: var(--outline-core-ckeditor-text-color); +--outline-core-ckeditor-button-border-color-hover: var(--outline-core-ckeditor-text-color); +--outline-core-ckeditor-button-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +--outline-core-ckeditor-button-icon-external-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); From c7826e41c04e124576c5d50bc6a05ef695e94d91 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 27 Feb 2024 09:33:12 -0500 Subject: [PATCH 17/21] vars update. --- .../src/outline-core-ckeditor-vars.css | 62 +++++++------------ 1 file changed, 23 insertions(+), 39 deletions(-) diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css index 488996136..4468ffe36 100644 --- a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css @@ -1,53 +1,37 @@ /* This section is reserved for variables imported from Figma or other design tools. These variables should be connected to all other CSS files for consistent styling across the platform. */ -/* Taken from .disclaimer around line 250 */ ---outline-core-ckeditor--link--text-color--hover: var( - --outline-core-ckeditor--color-neutral-white -); ---outline-core-ckeditor--link--bg-color--hover: var( - --outline-core-ckeditor--text-color -); ---outline-core-ckeditor--cta--text-color: var( - --outline-core-ckeditor--text-color -); ---outline-core-ckeditor--cta--text-color--hover: var( - --outline-core-ckeditor--color-neutral-white -); + +--outline-core-ckeditor--link--text-color--hover: #ffffff; +--outline-core-ckeditor--link--bg-color--hover: #000000; +--outline-core-ckeditor--cta--text-color: #000000; +--outline-core-ckeditor--cta--text-color--hover: #ffffff; +--outline-core-ckeditor--button--bg-color: #000000; +--outline-core-ckeditor--button--text-color: #ffffff; +--outline-core-ckeditor--button--border-color: #000000; +--outline-core-ckeditor--button--bg-color--hover: transparent; +--outline-core-ckeditor--button--text-color--hover: #000000; +--outline-core-ckeditor--button--border-color--hover: #000000; +--outline-core-ckeditor-link-text-color-hover: #ffffff; +--outline-core-ckeditor-link-bg-color-hover: #000000; +--outline-core-ckeditor-cta-text-color: #000000; +--outline-core-ckeditor-cta-text-color-hover: #ffffff; +--outline-core-ckeditor-button-bg-color: #000000; +--outline-core-ckeditor-button-text-color: #ffffff; +--outline-core-ckeditor-button-border-color: #000000; +--outline-core-ckeditor-button-bg-color-hover: transparent; +--outline-core-ckeditor-button-text-color-hover: #000000; +--outline-core-ckeditor-button-border-color-hover: #000000; + + --outline-core-ckeditor--cta--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); --outline-core-ckeditor--cta--icon--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); --outline-core-ckeditor--cta--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); --outline-core-ckeditor--cta--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); ---outline-core-ckeditor--button--bg-color: var( - --outline-core-ckeditor--text-color -); ---outline-core-ckeditor--button--text-color: var( - --outline-core-ckeditor--color-neutral-white -); ---outline-core-ckeditor--button--border-color: var( - --outline-core-ckeditor--text-color -); ---outline-core-ckeditor--button--bg-color--hover: transparent; ---outline-core-ckeditor--button--text-color--hover: var( - --outline-core-ckeditor--text-color -); ---outline-core-ckeditor--button--border-color--hover: var( - --outline-core-ckeditor--text-color -); --outline-core-ckeditor-button-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); ---outline-core-ckeditor-link-text-color-hover: var(--color-neutral-white); ---outline-core-ckeditor-link-bg-color-hover: var(--outline-core-ckeditor-text-color); ---outline-core-ckeditor-cta-text-color: var(--outline-core-ckeditor-text-color); ---outline-core-ckeditor-cta-text-color-hover: var(--color-neutral-white); --outline-core-ckeditor-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); --outline-core-ckeditor-cta-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); --outline-core-ckeditor-cta-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); --outline-core-ckeditor-cta-icon-external-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); ---outline-core-ckeditor-button-bg-color: var(--outline-core-ckeditor-text-color); ---outline-core-ckeditor-button-text-color: var(--color-neutral-white); ---outline-core-ckeditor-button-border-color: var(--outline-core-ckeditor-text-color); ---outline-core-ckeditor-button-bg-color-hover: transparent; ---outline-core-ckeditor-button-text-color-hover: var(--outline-core-ckeditor-text-color); ---outline-core-ckeditor-button-border-color-hover: var(--outline-core-ckeditor-text-color); --outline-core-ckeditor-button-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); --outline-core-ckeditor-button-icon-external-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); From fae1eeab92d5834eada99bfffcb5339b525944fe Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 27 Feb 2024 10:15:32 -0500 Subject: [PATCH 18/21] Updates vars file. --- outline.theme.css | 24 +++--- .../src/outline-core-ckeditor-vars.css | 81 ++++++++++++++----- 2 files changed, 75 insertions(+), 30 deletions(-) diff --git a/outline.theme.css b/outline.theme.css index 782b7a8ef..d4c8cbf9a 100644 --- a/outline.theme.css +++ b/outline.theme.css @@ -10,7 +10,7 @@ --brand-octonary: #525252; --brand-nonary: #1e3a8a; --brand-denary: #171717; - + /* Colors for UI notification messages. */ --status-success: #2f855a; --status-warning: #b64301; @@ -28,7 +28,7 @@ --outline-transparent: transparent; --outline-white: #fff; --outline-black: #000; - + --outline-gray-50: #fafafa; --outline-gray-100: #f5f5f5; --outline-gray-200: #e5e5e5; @@ -200,7 +200,7 @@ --fs-h1: 4rem; --fs-h1-medium: 3rem; --fs-h1-small: 2.5rem; - + --lh-h1: 3rem; --lh-h1-medium: 3.75rem; --lh-h1-small: 2rem; @@ -208,40 +208,40 @@ --fs-h2: 2.75rem; --fs-h2-medium: 2.5rem; --fs-h2-small: 2rem; - + --lh-h2: 3.5rem; --lh-h2-medium: 3rem; --lh-h2-small: 2.5rem; - + --fs-h3: 2rem; --fs-h3-medium: 1.75rem; --fs-h3-small: 1.5rem; - + --lh-h3: 2.25rem; --lh-h3-medium: 2rem; --lh-h3-small: 1.75rem; - + --fs-h4: 1.5rem; --fs-h4-medium: 1.5rem; --fs-h4-small: 1.375rem; - + --lh-h4: 2rem; --lh-h4-medium: 1.75rem; --lh-h4-small: 1.75rem; - + --fs-h5: 1.375rem; --fs-h5-medium: 1.25rem; --fs-h5-small: 1.125rem; - + --lh-h5: 1.75rem; --lh-h5-medium: 1.5rem; --lh-h5-small: 1.375rem; - + --fs-h6: 1.125rem; --fs-h6-medium: 1.125rem; --fs-h6-small: 1rem; - + --lh-h6: 1.5rem; --lh-h6-medium: 1.375rem; --lh-h6-small: 1.25rem; diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css index 4468ffe36..7f80d80c3 100644 --- a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css @@ -2,6 +2,53 @@ These variables should be connected to all other CSS files for consistent styling across the platform. */ + +--outline-core-ckeditor--body-text--font-size: 1rem; +--outline-core-ckeditor--body-01-font-size: 1rem; +--outline-core-ckeditor--body-helper-min-font-size: 0.875rem; +--outline-core-ckeditor--body-text--line-height: 1.5; +--outline-core-ckeditor--body-01-line-height: 1.5; +--outline-core-ckeditor--body-helper-min-line-height: 1.4; +--outline-core-ckeditor--body-text--margin-bottom: 1rem; +--outline-core-ckeditor--headline-07-font-size: 2.25rem; +--outline-core-ckeditor--headline-07-line-height: 1.2; +--outline-core-ckeditor--fw-normal: 400; +--outline-core-ckeditor--fw-bold: 700; +--outline-core-ckeditor--ff-display: 'Helvetica Neue', Helvetica, Arial, sans-serif; +--outline-core-ckeditor--heading-color: #171717; +--outline-core-ckeditor--button-text-color: #ffffff; +--outline-core-ckeditor--text-color: #333333; +--outline-core-ckeditor--color-primary-light: #f0f0f0; +--outline-core-ckeditor--accent-color: #fa5c5c; + + + +--outline-core-ckeditor--headline-01-font-size: 1rem; +--outline-core-ckeditor--headline-01-line-height: 1.4; +--outline-core-ckeditor--headline-02-font-size: 1.125rem; +--outline-core-ckeditor--headline-02-line-height: 1.4; +--outline-core-ckeditor--headline-03-font-size: 1.25rem; +--outline-core-ckeditor--headline-03-line-height: 1.4; +--outline-core-ckeditor--headline-04-font-size: 1.375rem; +--outline-core-ckeditor--headline-04-line-height: 1.4; +--outline-core-ckeditor--headline-05-font-size: 1.5rem; +--outline-core-ckeditor--headline-05-line-height: 1.4; +--outline-core-ckeditor--headline-06-font-size: 1.625rem; +--outline-core-ckeditor--headline-06-line-height: 1.4; + + +--outline-core-ckeditor--spacing-01: 0.25rem; +--outline-core-ckeditor--spacing-02: 0.5rem; +--outline-core-ckeditor--spacing-03: 0.75rem; +--outline-core-ckeditor--spacing-04: 1rem; +--outline-core-ckeditor--spacing-05: 1.25rem; +--outline-core-ckeditor--spacing-06: 1.5rem; +--outline-core-ckeditor--spacing-07: 1.75rem; +--outline-core-ckeditor--spacing-08: 2rem; +--outline-core-ckeditor--spacing-09: 2.25rem; +--outline-core-ckeditor--spacing-10: 2.5rem; + +/* Button/link defaults */ --outline-core-ckeditor--link--text-color--hover: #ffffff; --outline-core-ckeditor--link--bg-color--hover: #000000; --outline-core-ckeditor--cta--text-color: #000000; @@ -12,26 +59,24 @@ These variables should be connected to all other CSS files for consistent stylin --outline-core-ckeditor--button--bg-color--hover: transparent; --outline-core-ckeditor--button--text-color--hover: #000000; --outline-core-ckeditor--button--border-color--hover: #000000; ---outline-core-ckeditor-link-text-color-hover: #ffffff; ---outline-core-ckeditor-link-bg-color-hover: #000000; ---outline-core-ckeditor-cta-text-color: #000000; ---outline-core-ckeditor-cta-text-color-hover: #ffffff; ---outline-core-ckeditor-button-bg-color: #000000; ---outline-core-ckeditor-button-text-color: #ffffff; ---outline-core-ckeditor-button-border-color: #000000; ---outline-core-ckeditor-button-bg-color-hover: transparent; ---outline-core-ckeditor-button-text-color-hover: #000000; ---outline-core-ckeditor-button-border-color-hover: #000000; - +--outline-core-ckeditor--link-text-color-hover: #ffffff; +--outline-core-ckeditor--link-bg-color-hover: #000000; +--outline-core-ckeditor--cta-text-color: #000000; +--outline-core-ckeditor--cta-text-color-hover: #ffffff; +--outline-core-ckeditor--button-bg-color: #000000; +--outline-core-ckeditor--button-text-color: #ffffff; +--outline-core-ckeditor--button-border-color: #000000; +--outline-core-ckeditor--button-bg-color-hover: transparent; +--outline-core-ckeditor--button-text-color-hover: #000000; +--outline-core-ckeditor--button-border-color-hover: #000000; --outline-core-ckeditor--cta--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); --outline-core-ckeditor--cta--icon--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); --outline-core-ckeditor--cta--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); --outline-core-ckeditor--cta--icon-external--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); ---outline-core-ckeditor-button-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); ---outline-core-ckeditor-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); ---outline-core-ckeditor-cta-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); ---outline-core-ckeditor-cta-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); ---outline-core-ckeditor-cta-icon-external-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); ---outline-core-ckeditor-button-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); ---outline-core-ckeditor-button-icon-external-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +--outline-core-ckeditor--button-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +--outline-core-ckeditor--cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); +--outline-core-ckeditor--cta-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); +--outline-core-ckeditor--cta-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +--outline-core-ckeditor--cta-icon-external-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +--outline-core-ckeditor--button-icon-external-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); From 8d389fd930d005ab8e81a8ca45f0b4fe919b37cf Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 27 Feb 2024 10:29:34 -0500 Subject: [PATCH 19/21] Look Mr. Frodo, more vars updates. --- .../src/outline-core-ckeditor-starterkit.css | 16 +++--- .../src/outline-core-ckeditor-vars.css | 51 ++++++++++--------- 2 files changed, 35 insertions(+), 32 deletions(-) diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css index 25117f807..1ecf77557 100644 --- a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css @@ -263,13 +263,13 @@ table { &:hover, &:focus, &:focus-visible { - color: var(--outline-core-ckeditor--link-text-color-hover); - background-color: var(--outline-core-ckeditor--link-bg-color-hover); + color: var(--outline-core-ckeditor--link--text-color--hover); + background-color: var(--outline-core-ckeditor--link--bg-color--hover); } } a.ckeditor-cta { font-size: inherit; - color: var(--outline-core-ckeditor--cta-text-color); + color: var(--outline-core-ckeditor--cta--text-color); text-decoration: underline; .last-word { @@ -286,7 +286,7 @@ table { &:focus { background-color: var(--outline-core-ckeditor--text-color); background-image: none; - color: var(--outline-core-ckeditor--cta-text-color-hover); + color: var(--outline-core-ckeditor--cta--text-color--hover); text-decoration: underline; .last-word { @@ -324,15 +324,15 @@ table { a.btn { font-size: inherit; - color: var(--outline-core-ckeditor--button-text-color); + color: var(--outline-core-ckeditor--button--text-color); padding: var(--outline-core-ckeditor--spacing-02) var(--outline-core-ckeditor--spacing-04); min-height: 0; text-decoration: none; &:hover { - color: var(--outline-core-ckeditor--button-text-color-hover); - background-color: var(--outline-core-ckeditor--button-bg-color-hover); - border-color: var(--outline-core-ckeditor--button-border-color-hover); + color: var(--outline-core-ckeditor--button--text-color--hover); + background-color: var(--outline-core-ckeditor--button--bg-color--hover); + border-color: var(--outline-core-ckeditor--button--border-color--hover); } &.icon-external, diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css index 7f80d80c3..8477c6b06 100644 --- a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css @@ -1,28 +1,39 @@ -/* This section is reserved for variables imported from Figma or other design tools. -These variables should be connected to all other CSS files for consistent styling across the platform. */ +/* What is the purpose of this file? +In your project, all these values will need to be customized. Instead of +creating an endless chain of vars based on defaults which will likely not be +consistent in outline core, we create a simple set of vars as an example. +This file can be copied, correct values for your project assigned, and imported +directly into your component. Combined with the starterkit file, you should +have a good base for your ckeditor styles. */ ---outline-core-ckeditor--body-text--font-size: 1rem; ---outline-core-ckeditor--body-01-font-size: 1rem; ---outline-core-ckeditor--body-helper-min-font-size: 0.875rem; ---outline-core-ckeditor--body-text--line-height: 1.5; ---outline-core-ckeditor--body-01-line-height: 1.5; ---outline-core-ckeditor--body-helper-min-line-height: 1.4; ---outline-core-ckeditor--body-text--margin-bottom: 1rem; ---outline-core-ckeditor--headline-07-font-size: 2.25rem; ---outline-core-ckeditor--headline-07-line-height: 1.2; + +--outline-core-ckeditor--ff-display: 'Helvetica Neue', Helvetica, Arial, sans-serif; + +/* Font Weights */ --outline-core-ckeditor--fw-normal: 400; --outline-core-ckeditor--fw-bold: 700; ---outline-core-ckeditor--ff-display: 'Helvetica Neue', Helvetica, Arial, sans-serif; + +/* Text Colors */ +--outline-core-ckeditor--text-color: #333333; --outline-core-ckeditor--heading-color: #171717; --outline-core-ckeditor--button-text-color: #ffffff; ---outline-core-ckeditor--text-color: #333333; + +/* Primary UI Colors */ --outline-core-ckeditor--color-primary-light: #f0f0f0; --outline-core-ckeditor--accent-color: #fa5c5c; +/* Body Text */ +--outline-core-ckeditor--body-text--font-size: 1rem; +--outline-core-ckeditor--body-text--line-height: 1.5; +--outline-core-ckeditor--body-text--margin-bottom: 1rem; +/* Body Helper Text */ +--outline-core-ckeditor--body-helper-min-font-size: 0.875rem; +--outline-core-ckeditor--body-helper-min-line-height: 1.4; +/* Headline Font Sizes and Line Heights */ --outline-core-ckeditor--headline-01-font-size: 1rem; --outline-core-ckeditor--headline-01-line-height: 1.4; --outline-core-ckeditor--headline-02-font-size: 1.125rem; @@ -35,8 +46,10 @@ These variables should be connected to all other CSS files for consistent stylin --outline-core-ckeditor--headline-05-line-height: 1.4; --outline-core-ckeditor--headline-06-font-size: 1.625rem; --outline-core-ckeditor--headline-06-line-height: 1.4; +--outline-core-ckeditor--headline-07-font-size: 2.25rem; +--outline-core-ckeditor--headline-07-line-height: 1.2; - +/* Spacing defaults */ --outline-core-ckeditor--spacing-01: 0.25rem; --outline-core-ckeditor--spacing-02: 0.5rem; --outline-core-ckeditor--spacing-03: 0.75rem; @@ -59,16 +72,6 @@ These variables should be connected to all other CSS files for consistent stylin --outline-core-ckeditor--button--bg-color--hover: transparent; --outline-core-ckeditor--button--text-color--hover: #000000; --outline-core-ckeditor--button--border-color--hover: #000000; ---outline-core-ckeditor--link-text-color-hover: #ffffff; ---outline-core-ckeditor--link-bg-color-hover: #000000; ---outline-core-ckeditor--cta-text-color: #000000; ---outline-core-ckeditor--cta-text-color-hover: #ffffff; ---outline-core-ckeditor--button-bg-color: #000000; ---outline-core-ckeditor--button-text-color: #ffffff; ---outline-core-ckeditor--button-border-color: #000000; ---outline-core-ckeditor--button-bg-color-hover: transparent; ---outline-core-ckeditor--button-text-color-hover: #000000; ---outline-core-ckeditor--button-border-color-hover: #000000; --outline-core-ckeditor--cta--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); --outline-core-ckeditor--cta--icon--hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); From 845db03746ed365d953c5553cb3d1c634268b838 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 27 Feb 2024 10:44:41 -0500 Subject: [PATCH 20/21] Look mr. frodo, more updates. --- .../src/outline-core-ckeditor-starterkit.css | 2 +- .../outline-core-ckeditor/src/outline-core-ckeditor.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css index 1ecf77557..bbdd63806 100644 --- a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css @@ -1,6 +1,6 @@ /* This CSS file provides a set of good default styles for integrating CKEditor within a Drupal environment. It ensures consistent styling and behavior of the WYSIWYG editor across the platform. */ -/* Rendered WYSIWYG content is wrapped in on the frontend. */ +/* Rendered WYSIWYG content is wrapped in in the theme layer. */ /* WYSIWYG content is wrapped in .ck.ck-content for targeting within CKEditor. This gets added in outline-core-ckeditor-imports.css */ /* See https://www.drupal.org/node/3259165 */ diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts index 35b081a08..372d17502 100644 --- a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts @@ -4,7 +4,7 @@ import { customElement } from 'lit/decorators.js'; // Our base component, which all others extend. import { OutlineElement } from '@phase2/outline-core'; -import globalStyles from './outline-core-ckeditor-imports.css?inline'; +import globalStyles from './outline-core-ckeditor-imports.css.lit'; import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller'; From b3cf30a9245aab22f080e8953797dd622c513ce4 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 27 Feb 2024 10:56:53 -0500 Subject: [PATCH 21/21] Blocked on tooling. --- .../src/outline-core-ckeditor.ts | 8 +- yarn.lock | 253 +++++++++++++++++- 2 files changed, 255 insertions(+), 6 deletions(-) diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts index 372d17502..40553141f 100644 --- a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts @@ -1,10 +1,11 @@ -import { TemplateResult, html, CSSResultGroup } from 'lit'; +import { TemplateResult, html } from 'lit'; import { customElement } from 'lit/decorators.js'; // Our base component, which all others extend. import { OutlineElement } from '@phase2/outline-core'; -import globalStyles from './outline-core-ckeditor-imports.css.lit'; +import globalStyles from './outline-core-ckeditor-imports.css?inline'; + import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller'; @@ -29,7 +30,8 @@ export class OutlineCoreCkeditor extends OutlineElement { GlobalStylesheets: AdoptedStylesheets | undefined = new AdoptedStylesheets( this, - globalStyles + globalStyles, + document ); connectedCallback(): void { diff --git a/yarn.lock b/yarn.lock index 09704b60f..0b256ec96 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1524,11 +1524,21 @@ resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963" integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw== +"@esbuild/aix-ppc64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f" + integrity sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA== + "@esbuild/android-arm64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622" integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ== +"@esbuild/android-arm64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz#7ad65a36cfdb7e0d429c353e00f680d737c2aed4" + integrity sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA== + "@esbuild/android-arm@0.15.18": version "0.15.18" resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.18.tgz#266d40b8fdcf87962df8af05b76219bc786b4f80" @@ -1539,46 +1549,91 @@ resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682" integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw== +"@esbuild/android-arm@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.12.tgz#b0c26536f37776162ca8bde25e42040c203f2824" + integrity sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w== + "@esbuild/android-x64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2" integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg== +"@esbuild/android-x64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.12.tgz#cb13e2211282012194d89bf3bfe7721273473b3d" + integrity sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew== + "@esbuild/darwin-arm64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1" integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA== +"@esbuild/darwin-arm64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz#cbee41e988020d4b516e9d9e44dd29200996275e" + integrity sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g== + "@esbuild/darwin-x64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d" integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ== +"@esbuild/darwin-x64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz#e37d9633246d52aecf491ee916ece709f9d5f4cd" + integrity sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A== + "@esbuild/freebsd-arm64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54" integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw== +"@esbuild/freebsd-arm64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz#1ee4d8b682ed363b08af74d1ea2b2b4dbba76487" + integrity sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA== + "@esbuild/freebsd-x64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e" integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ== +"@esbuild/freebsd-x64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz#37a693553d42ff77cd7126764b535fb6cc28a11c" + integrity sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg== + "@esbuild/linux-arm64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0" integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA== +"@esbuild/linux-arm64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz#be9b145985ec6c57470e0e051d887b09dddb2d4b" + integrity sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA== + "@esbuild/linux-arm@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0" integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg== +"@esbuild/linux-arm@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz#207ecd982a8db95f7b5279207d0ff2331acf5eef" + integrity sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w== + "@esbuild/linux-ia32@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7" integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA== +"@esbuild/linux-ia32@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz#d0d86b5ca1562523dc284a6723293a52d5860601" + integrity sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA== + "@esbuild/linux-loong64@0.15.18": version "0.15.18" resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz#128b76ecb9be48b60cf5cfc1c63a4f00691a3239" @@ -1589,61 +1644,121 @@ resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d" integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg== +"@esbuild/linux-loong64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz#9a37f87fec4b8408e682b528391fa22afd952299" + integrity sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA== + "@esbuild/linux-mips64el@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231" integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ== +"@esbuild/linux-mips64el@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz#4ddebd4e6eeba20b509d8e74c8e30d8ace0b89ec" + integrity sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w== + "@esbuild/linux-ppc64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb" integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA== +"@esbuild/linux-ppc64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz#adb67dadb73656849f63cd522f5ecb351dd8dee8" + integrity sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg== + "@esbuild/linux-riscv64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6" integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A== +"@esbuild/linux-riscv64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz#11bc0698bf0a2abf8727f1c7ace2112612c15adf" + integrity sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg== + "@esbuild/linux-s390x@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071" integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ== +"@esbuild/linux-s390x@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz#e86fb8ffba7c5c92ba91fc3b27ed5a70196c3cc8" + integrity sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg== + "@esbuild/linux-x64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338" integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w== +"@esbuild/linux-x64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz#5f37cfdc705aea687dfe5dfbec086a05acfe9c78" + integrity sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg== + "@esbuild/netbsd-x64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1" integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A== +"@esbuild/netbsd-x64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz#29da566a75324e0d0dd7e47519ba2f7ef168657b" + integrity sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA== + "@esbuild/openbsd-x64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae" integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg== +"@esbuild/openbsd-x64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz#306c0acbdb5a99c95be98bdd1d47c916e7dc3ff0" + integrity sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw== + "@esbuild/sunos-x64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d" integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ== +"@esbuild/sunos-x64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz#0933eaab9af8b9b2c930236f62aae3fc593faf30" + integrity sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA== + "@esbuild/win32-arm64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9" integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg== +"@esbuild/win32-arm64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz#773bdbaa1971b36db2f6560088639ccd1e6773ae" + integrity sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A== + "@esbuild/win32-ia32@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102" integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g== +"@esbuild/win32-ia32@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz#000516cad06354cc84a73f0943a4aa690ef6fd67" + integrity sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ== + "@esbuild/win32-x64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d" integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ== +"@esbuild/win32-x64@0.19.12": + version "0.19.12" + resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz#c57c8afbb4054a3ab8317591a0b7320360b444ae" + integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA== + "@eslint-community/eslint-utils@^4.2.0": version "4.4.0" resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59" @@ -2259,6 +2374,71 @@ dependencies: "@babel/runtime" "^7.13.10" +"@rollup/rollup-android-arm-eabi@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz#38c3abd1955a3c21d492af6b1a1dca4bb1d894d6" + integrity sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w== + +"@rollup/rollup-android-arm64@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.0.tgz#3822e929f415627609e53b11cec9a4be806de0e2" + integrity sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ== + +"@rollup/rollup-darwin-arm64@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.0.tgz#6c082de71f481f57df6cfa3701ab2a7afde96f69" + integrity sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ== + +"@rollup/rollup-darwin-x64@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.0.tgz#c34ca0d31f3c46a22c9afa0e944403eea0edcfd8" + integrity sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg== + +"@rollup/rollup-linux-arm-gnueabihf@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.0.tgz#48e899c1e438629c072889b824a98787a7c2362d" + integrity sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA== + +"@rollup/rollup-linux-arm64-gnu@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.0.tgz#788c2698a119dc229062d40da6ada8a090a73a68" + integrity sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA== + +"@rollup/rollup-linux-arm64-musl@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.0.tgz#3882a4e3a564af9e55804beeb67076857b035ab7" + integrity sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ== + +"@rollup/rollup-linux-riscv64-gnu@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.0.tgz#0c6ad792e1195c12bfae634425a3d2aa0fe93ab7" + integrity sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw== + +"@rollup/rollup-linux-x64-gnu@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz#9d62485ea0f18d8674033b57aa14fb758f6ec6e3" + integrity sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA== + +"@rollup/rollup-linux-x64-musl@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.0.tgz#50e8167e28b33c977c1f813def2b2074d1435e05" + integrity sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw== + +"@rollup/rollup-win32-arm64-msvc@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.0.tgz#68d233272a2004429124494121a42c4aebdc5b8e" + integrity sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw== + +"@rollup/rollup-win32-ia32-msvc@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.0.tgz#366ca62221d1689e3b55a03f4ae12ae9ba595d40" + integrity sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA== + +"@rollup/rollup-win32-x64-msvc@4.12.0": + version "4.12.0" + resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.0.tgz#9ffdf9ed133a7464f4ae187eb9e1294413fab235" + integrity sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg== + "@sinclair/typebox@^0.27.8": version "0.27.8" resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e" @@ -3004,6 +3184,11 @@ resolved "https://registry.yarnpkg.com/@types/emscripten/-/emscripten-1.39.10.tgz#da6e58a6171b46a41d3694f812d845d515c77e18" integrity sha512-TB/6hBkYQJxsZHSqyeuO1Jt0AB/bW6G7rHt9g7lML7SOF6lbgcHvw/Lr+69iqN0qxgXLhWKScAon73JNnptuDw== +"@types/estree@1.0.5": + version "1.0.5" + resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4" + integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw== + "@types/estree@^0.0.47": version "0.0.47" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.47.tgz#d7a51db20f0650efec24cd04994f523d93172ed4" @@ -5424,6 +5609,35 @@ esbuild@^0.18.0, esbuild@^0.18.10: "@esbuild/win32-ia32" "0.18.20" "@esbuild/win32-x64" "0.18.20" +esbuild@^0.19.3: + version "0.19.12" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.12.tgz#dc82ee5dc79e82f5a5c3b4323a2a641827db3e04" + integrity sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg== + optionalDependencies: + "@esbuild/aix-ppc64" "0.19.12" + "@esbuild/android-arm" "0.19.12" + "@esbuild/android-arm64" "0.19.12" + "@esbuild/android-x64" "0.19.12" + "@esbuild/darwin-arm64" "0.19.12" + "@esbuild/darwin-x64" "0.19.12" + "@esbuild/freebsd-arm64" "0.19.12" + "@esbuild/freebsd-x64" "0.19.12" + "@esbuild/linux-arm" "0.19.12" + "@esbuild/linux-arm64" "0.19.12" + "@esbuild/linux-ia32" "0.19.12" + "@esbuild/linux-loong64" "0.19.12" + "@esbuild/linux-mips64el" "0.19.12" + "@esbuild/linux-ppc64" "0.19.12" + "@esbuild/linux-riscv64" "0.19.12" + "@esbuild/linux-s390x" "0.19.12" + "@esbuild/linux-x64" "0.19.12" + "@esbuild/netbsd-x64" "0.19.12" + "@esbuild/openbsd-x64" "0.19.12" + "@esbuild/sunos-x64" "0.19.12" + "@esbuild/win32-arm64" "0.19.12" + "@esbuild/win32-ia32" "0.19.12" + "@esbuild/win32-x64" "0.19.12" + escalade@^3.1.1: version "3.1.2" resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27" @@ -6115,7 +6329,7 @@ fs.realpath@^1.0.0: resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== -fsevents@^2.3.2, fsevents@~2.3.2: +fsevents@^2.3.2, fsevents@~2.3.2, fsevents@~2.3.3: version "2.3.3" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== @@ -9140,7 +9354,7 @@ postcss@8.4.8: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^8.1.6, postcss@^8.4.27: +postcss@^8.1.6, postcss@^8.4.27, postcss@^8.4.35: version "8.4.35" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7" integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA== @@ -9738,6 +9952,28 @@ rimraf@~2.6.2: optionalDependencies: fsevents "~2.3.2" +rollup@^4.2.0: + version "4.12.0" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.12.0.tgz#0b6d1e5f3d46bbcf244deec41a7421dc54cc45b5" + integrity sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q== + dependencies: + "@types/estree" "1.0.5" + optionalDependencies: + "@rollup/rollup-android-arm-eabi" "4.12.0" + "@rollup/rollup-android-arm64" "4.12.0" + "@rollup/rollup-darwin-arm64" "4.12.0" + "@rollup/rollup-darwin-x64" "4.12.0" + "@rollup/rollup-linux-arm-gnueabihf" "4.12.0" + "@rollup/rollup-linux-arm64-gnu" "4.12.0" + "@rollup/rollup-linux-arm64-musl" "4.12.0" + "@rollup/rollup-linux-riscv64-gnu" "4.12.0" + "@rollup/rollup-linux-x64-gnu" "4.12.0" + "@rollup/rollup-linux-x64-musl" "4.12.0" + "@rollup/rollup-win32-arm64-msvc" "4.12.0" + "@rollup/rollup-win32-ia32-msvc" "4.12.0" + "@rollup/rollup-win32-x64-msvc" "4.12.0" + fsevents "~2.3.2" + rsync@^0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/rsync/-/rsync-0.6.1.tgz#3681a0098bd8750448f8bf9da1fee09f7763742b" @@ -10861,7 +11097,7 @@ typescript@^3.8.3: resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8" integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q== -"typescript@^4.6.4 || ^5.2.2", typescript@^5.2.2, typescript@^5.3.3: +"typescript@^4.6.4 || ^5.2.2", typescript@^5.2.2: version "5.3.3" resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37" integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw== @@ -11112,6 +11348,17 @@ vite@^4.1.4: optionalDependencies: fsevents "~2.3.2" +vite@^5.1.4: + version "5.1.4" + resolved "https://registry.yarnpkg.com/vite/-/vite-5.1.4.tgz#14e9d3e7a6e488f36284ef13cebe149f060bcfb6" + integrity sha512-n+MPqzq+d9nMVTKyewqw6kSt+R3CkvF9QAKY8obiQn8g1fwTscKxyfaYnC632HtBXAQGc1Yjomphwn1dtwGAHg== + dependencies: + esbuild "^0.19.3" + postcss "^8.4.35" + rollup "^4.2.0" + optionalDependencies: + fsevents "~2.3.3" + vscode-css-languageservice@4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-4.3.0.tgz#40c797d664ab6188cace33cfbb19b037580a9318"