diff --git a/outline.theme.css b/outline.theme.css index 782b7a8e..d4c8cbf9 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/docs/outline-core-ckeditor.mdx b/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.mdx new file mode 100644 index 00000000..27752182 --- /dev/null +++ b/packages/components/outline-core-ckeditor/docs/outline-core-ckeditor.mdx @@ -0,0 +1,627 @@ +import { Meta } from '@storybook/addon-docs'; +import '../src/outline-core-ckeditor' + + + +# 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 +

+ 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. +
  3. + This is the second child item +
      +
    1. This is the first grandchild item
    2. +
    3. + 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. +
      +
    4. +
    +
  4. +
  5. This is the third item
  6. +
+

+ 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/index.ts b/packages/components/outline-core-ckeditor/index.ts new file mode 100644 index 00000000..80c4453d --- /dev/null +++ b/packages/components/outline-core-ckeditor/index.ts @@ -0,0 +1,21 @@ +/** + * @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 { 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 + * + * 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 { OutlineCoreCkeditor } from './src/outline-core-ckeditor'; + +// Export any additional sub-components, variables and methods as required. diff --git a/packages/components/outline-core-ckeditor/packages.json b/packages/components/outline-core-ckeditor/packages.json new file mode 100644 index 00000000..665fb0ea --- /dev/null +++ b/packages/components/outline-core-ckeditor/packages.json @@ -0,0 +1,42 @@ +{ + "name": "@phase2/outline-core-ckeditor", + "private": true, + "version": "0.0.1", + "description": "The Outline Components for the ckeditor styled text component", + "keywords": [ + "outline", + "web-components", + "design system", + "image", + "picture" + ], + "main": "index.ts", + "types": "index.ts", + "typings": "index.d.ts", + "files": ["/dist/", "/src/", "!/dist/tsconfig.build.tsbuildinfo"], + "author": "Phase2 Technology", + "repository": { + "type": "git", + "url": "https://github.com/phase2/outline.git", + "directory": "packages/outline-core-ckeditor" + }, + "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-ckeditor", + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "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" + } +} diff --git a/packages/components/outline-core-ckeditor/src/config.ts b/packages/components/outline-core-ckeditor/src/config.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/components/outline-core-ckeditor/src/deprecated/.ck.ck-content.global.css b/packages/components/outline-core-ckeditor/src/deprecated/.ck.ck-content.global.css new file mode 100644 index 00000000..11b1e4ba --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/deprecated/.ck.ck-content.global.css @@ -0,0 +1,64 @@ +/** +* All CSS selectors/rules in this file will be nested within `.ck.ck-content {` due to the name of this file. +* +* This file brings in all the necessary CSS for the WYSIWYG elements and restricts its influence to the `.ck.ck-content` selector. +* The lightDOM controller accomplishes this by extracting the file name before .global.css and creating a new stylesheet called .ck.ck-content.global.scoped.css, +* which contains the CSS specifically scoped to that selector. +* +* Subsequently, .ck.ck-content.global.scoped.css is imported into /project/design/src/ckeditor5.css, along with the +* design system tokens, and is then built into the theme. The resulting built file is the one that gets included on pages that have CKEditor. +* +* See https://www.drupal.org/node/3259165 +* See https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html#sharing-content-styles-between-frontend-and-backend +**/ + +/** Import Tokens. +* Scope the css variables so they do not conflict with Drupal Admin theme's CSS variables. +*/ +/* @import '@phase2/outline-core-tokens/dist/tokens.default.css'; +@import '../../../../outline.theme.css'; + +@import '../outline-core-heading/outline-core-heading.css'; +@import '../outline-core-button/outline-core-button.css'; +@import '../outline-core-cta/outline-core-cta.css'; +@import '../outline-core-cta/outline-core-cta.shared.css'; +@import '../outline-core-link/outline-core-link.css'; +@import '../outline-core-tooltip/outline-core-tooltip.shared.css';*/ +@import './outline-core-ckeditor.shared.css'; + +/** + * Reset to :host rules that are set in: + * `@import '../outline-core-button/outline-core-button.css';` that affects ckeditor width. + * `@import '../outline-core-heading/outline-core-heading.css';` affect font-weight and color. + */ +:host { + color: var(--outline-core-text-color); + display: block; + font-weight: unset; + width: unset; + + @screen sm { + width: unset; + } +} + +/* Override for tooltip styles. */ +/* a.sic-tooltip { + text-decoration: underline; + + &::after { + content: ''; + display: inline-block; + margin-left: calc(var(--spacing-01)); + margin-bottom: -0.1em; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + height: var(--sic-link--icon-size, 0.8em); + width: var(--sic-link--icon-size, 0.8em); + background-image: var( + --sic-tooltip--icon, + url('data:image/svg+xml,') + ); + } +} */ diff --git a/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor-table.css b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor-table.css new file mode 100644 index 00000000..d083eb82 --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor-table.css @@ -0,0 +1,112 @@ +table { + color: var(--outline-core-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-ckeditor/src/deprecated/outline-core-ckeditor.css b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.css new file mode 100644 index 00000000..dbc9e24d --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.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-ckeditor/src/deprecated/outline-core-ckeditor.lightdom.css b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.lightdom.css new file mode 100644 index 00000000..fe687570 --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.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 */ + +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-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'; */ + + /* @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-ckeditor/src/deprecated/outline-core-ckeditor.shared.css b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.shared.css new file mode 100644 index 00000000..e2c1b92a --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/deprecated/outline-core-ckeditor.shared.css @@ -0,0 +1,463 @@ +/* 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(--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; +} 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 00000000..3398b75e --- /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 00000000..bbdd6380 --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-starterkit.css @@ -0,0 +1,409 @@ +/* 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 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 */ + +@import './outline-core-ckeditor-vars.css'; + +p { + display: block; + font-size: var(--outline-core-ckeditor--body-text--font-size, var(--outline-core-ckeditor--body-01-font-size)); + line-height: var( + --outline-core-ckeditor--body-text--line-height, + var(--outline-core-ckeditor--body-01-line-height) + ); + margin-bottom: var(--outline-core-ckeditor--body-text--margin-bottom, 1em); + font-weight: var(--outline-core-ckeditor--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-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(--outline-core-ckeditor--spacing-04); +} + +h1, +.headline-07 { + font-size: var(--outline-core-ckeditor--headline-07-font-size); + line-height: var(--outline-core-ckeditor--headline-07-line-height); +} + +h2 { + font-size: var(--outline-core-ckeditor--headline-05-font-size); + line-height: var(--outline-core-ckeditor--headline-05-line-height); +} + +h3 { + font-size: var(--outline-core-ckeditor--headline-04-font-size); + line-height: var(--outline-core-ckeditor--headline-04-line-height); +} + +h4 { + font-size: var(--outline-core-ckeditor--headline-03-font-size); + line-height: var(--outline-core-ckeditor--headline-03-line-height); +} + +h5 { + font-size: var(--outline-core-ckeditor--headline-02-font-size); + line-height: var(--outline-core-ckeditor--headline-02-line-height); +} + +h6 { + 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(--outline-core-ckeditor--headline-06-font-size); + line-height: var(--outline-core-ckeditor--headline-06-line-height); +} + +.headline-05 { + 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(--outline-core-ckeditor--headline-04-font-size); + line-height: var(--outline-core-ckeditor--headline-04-line-height); +} + +.headline-03 { + 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(--outline-core-ckeditor--headline-02-font-size); + line-height: var(--outline-core-ckeditor--headline-02-line-height); +} + +.headline-01 { + 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 + * headings using the sibling selector. +*/ +p { + + h1, + + h2, + + h3, + + h4, + + .headline-07, + + .headline-06, + + .headline-05, + + .headline-04 { + margin-top: var(--outline-core-ckeditor--spacing-10); + } + + + h5, + + h6, + + .headline-01, + + .headline-02, + + .headline-03 { + margin-top: var(--outline-core-ckeditor--spacing-8); + } +} + +ul { + list-style-type: disc; + padding-left: var(--outline-core-ckeditor--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(--outline-core-ckeditor--spacing-04); + margin-bottom: var(--outline-core-ckeditor--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-core-ckeditor--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(--outline-core-ckeditor--spacing-05); +} + +li { + list-style-position: outside; + padding-left: 0.5em; + margin-top: 0.5em; + 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-core-ckeditor--accent-color); + font-size: var(--outline-core-ckeditor--fs-xl); + } +} + +blockquote { + display: flex; + gap: var(--outline-core-ckeditor--spacing-05); + margin-top: 1em; + margin-bottom: 1em; + p { + font-size: var(--outline-core-ckeditor--body-03-font-size); + margin-bottom: 0; + } + font-weight: bold; + outline-icon { + color: var(--outline-core-ckeditor--color-primary-light); + } +} + +/* Set a global HR for color purposes. */ +hr { + border-color: var(--outline-core-ckeditor--accent-color); + margin-top: 2em; + margin-bottom: 2em; +} + +figcaption { + 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; +} + +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(--outline-core-ckeditor--spacing-04); +} + +/* Article byline */ +.article-byline { + font-size: var(--outline-core-ckeditor--body-article-byline-font-size, var(--outline-core-ckeditor--fs-lg)); +} + +/* Disclaimer */ +.disclaimer { + + 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 { + margin-bottom: 0; + } + + a { + font-weight: var(--outline-core-ckeditor--fw-bold); + text-decoration: underline; + + &:hover, + &:focus, + &:focus-visible { + 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); + text-decoration: underline; + + .last-word { + text-decoration: underline; + &::after { + 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-core-ckeditor--text-color); + background-image: none; + color: var(--outline-core-ckeditor--cta--text-color--hover); + text-decoration: underline; + + .last-word { + text-decoration: underline; + + &::after { + background-image: var(--outline-core-ckeditor--cta-icon-hover); + transform: translateX(calc(var(--outline-core-ckeditor--spacing-01))); + } + } + } + + &.icon-external, + &[target='_blank'] { + .last-word { + &::after { + background-image: var(--outline-core-ckeditor--cta-icon-external); + height: var(--outline-core-ckeditor--spacing-03); + width: var(--outline-core-ckeditor--spacing-03); + } + } + + &:hover, + &:focus-visible, + &:focus { + .last-word { + &::after { + background-image: var(--outline-core-ckeditor--cta-icon-external-hover); + transform: translateX(-2px) translateY(-1px); + } + } + } + } + } + + a.btn { + font-size: inherit; + 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); + } + + &.icon-external, + &[target='_blank'] { + .last-word::after { + 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-core-ckeditor--button-icon-external-hover); + } + } + } + } + } + + li { + 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-core-ckeditor--text-color); + } + } +} +ul.ckeditor-disclaimer { + li::marker { + font-size: 10px; + } +} +ol.ckeditor-disclaimer { + li::marker { + font-size: 0.9em; + } +} + +/* Allow ckeditor-cta in ckeditor to wrap if long text */ +a.ckeditor-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-core-ckeditor--text-color); + background-color: transparent; + } +} + +.clear-left { + clear: left; +} + +.clear-right { + clear: right; +} + +.clear-both { + clear: both; +} 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 00000000..8477c6b0 --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor-vars.css @@ -0,0 +1,85 @@ +/* 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--ff-display: 'Helvetica Neue', Helvetica, Arial, sans-serif; + +/* Font Weights */ +--outline-core-ckeditor--fw-normal: 400; +--outline-core-ckeditor--fw-bold: 700; + +/* Text Colors */ +--outline-core-ckeditor--text-color: #333333; +--outline-core-ckeditor--heading-color: #171717; +--outline-core-ckeditor--button-text-color: #ffffff; + +/* 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; +--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--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; +--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; +--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-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"); diff --git a/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts new file mode 100644 index 00000000..40553141 --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/outline-core-ckeditor.ts @@ -0,0 +1,72 @@ +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?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; + +/** + * The Outline Core Styled Text component + * @element outline-core-ckeditor + * @since 1.0.0 + * @slot - default slot + * + * 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]; + { + GlobalStylesheets: AdoptedStylesheets | undefined = new AdoptedStylesheets( + this, + globalStyles, + document + ); + + 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('outline-core-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('outline-core-tooltip')) { + tooltipLink(el as HTMLElement); + } + }); + } + + render(): TemplateResult { + return html``; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'outline-core-ckeditor': OutlineCoreCkeditor; + } +} diff --git a/packages/components/outline-core-ckeditor/src/utilities/check-file-type.ts b/packages/components/outline-core-ckeditor/src/utilities/check-file-type.ts new file mode 100644 index 00000000..33fa79a3 --- /dev/null +++ b/packages/components/outline-core-ckeditor/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-ckeditor/src/utilities/external-link-text.ts b/packages/components/outline-core-ckeditor/src/utilities/external-link-text.ts new file mode 100644 index 00000000..19179e41 --- /dev/null +++ b/packages/components/outline-core-ckeditor/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-ckeditor/src/utilities/tooltip.css b/packages/components/outline-core-ckeditor/src/utilities/tooltip.css new file mode 100644 index 00000000..3c06beb7 --- /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 new file mode 100644 index 00000000..162b8828 --- /dev/null +++ b/packages/components/outline-core-ckeditor/src/utilities/tooltip.ts @@ -0,0 +1,261 @@ +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-ckeditor-tooltip') || + !el.hasAttribute('title') + ) { + return; + } + + if (el.textContent) { + const tooltipText = el.getAttribute('title'); + if (!tooltipText) { + return; + } + + const id: string = self.crypto.randomUUID + ? `outline-core-ckeditor-tooltip-${self.crypto.randomUUID()}` + : `outline-core-ckeditor-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-ckeditor-tooltip'); + 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('outline-core-ckeditor-tooltip--visible'); + if (this.tooltip) { + this.tooltip.classList.remove('hidden'); + } + } + + hideTooltip() { + this.container.classList.remove('outline-core-ckeditor-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('outline-core-ckeditor-tooltip--bottom'); + break; + + default: + this.container.classList.remove('outline-core-ckeditor-tooltip--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('outline-core-ckeditor-tooltip--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('outline-core-ckeditor-tooltip--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-ckeditor/src/utilities/wrap-last-word.ts b/packages/components/outline-core-ckeditor/src/utilities/wrap-last-word.ts new file mode 100644 index 00000000..88029ed6 --- /dev/null +++ b/packages/components/outline-core-ckeditor/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(); + } +} diff --git a/packages/components/outline-core-ckeditor/tsconfig.build.json b/packages/components/outline-core-ckeditor/tsconfig.build.json new file mode 100644 index 00000000..5eac9d31 --- /dev/null +++ b/packages/components/outline-core-ckeditor/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" }] +} diff --git a/yarn.lock b/yarn.lock index 09704b60..0b256ec9 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"