diff --git a/web/themes/contrib/civictheme/assets/sass/theme.editor.scss b/web/themes/contrib/civictheme/assets/sass/theme.editor.scss new file mode 100644 index 000000000..b2381df8b --- /dev/null +++ b/web/themes/contrib/civictheme/assets/sass/theme.editor.scss @@ -0,0 +1,14 @@ +// +// Editor styles. +// +// stylelint-disable scss/at-import-partial-extension + +// Import only required partials to minimize CSS output. +@import 'components/00-base/variables'; +@import 'components/00-base/**/mixins/*.scss'; +@import 'components/00-base/**/fonts'; + +.ck-editor__editable { + @include ct-content(); + @include ct-content-light(); +} diff --git a/web/themes/contrib/civictheme/civictheme.info.yml b/web/themes/contrib/civictheme/civictheme.info.yml index 54e997f16..8ea0bf8b6 100644 --- a/web/themes/contrib/civictheme/civictheme.info.yml +++ b/web/themes/contrib/civictheme/civictheme.info.yml @@ -89,6 +89,12 @@ components: ckeditor5-stylesheets: - dist/civictheme.editor.css + - dist/civictheme.variables.css + # Using colors from the Color Selector is not supported until the issue + # below is resolved. + # @see https://www.drupal.org/project/drupal/issues/3406959 + # - /sites/default/files/css-variables.civictheme.css + #;< DEVELOPMENT # Configuration shipped with this theme. # Update the list of the configuration below and run `drush cde civictheme`. diff --git a/web/themes/contrib/civictheme/civictheme_library/components/00-base/mixins/_content-link.scss b/web/themes/contrib/civictheme/civictheme_library/components/00-base/mixins/_content-link.scss new file mode 100644 index 000000000..772abcbc7 --- /dev/null +++ b/web/themes/contrib/civictheme/civictheme_library/components/00-base/mixins/_content-link.scss @@ -0,0 +1,60 @@ +// +// Content Link mixins. +// + +@mixin ct-content-link-base() { + text-decoration: underline; + text-decoration-thickness: ct-particle(0.25); + text-underline-offset: ct-particle(0.375); + padding: ct-spacing(0.375) 0 ct-spacing(0.25); + word-break: break-word; + + &:hover { + text-decoration: none; + padding: ct-spacing(0.375) 0 ct-spacing(0.5); + } + + &, + &.ct-theme-light { + color: $ct-content-link-light-color; + + &:focus { + @include ct-outline(); + } + + &:hover { + background-color: $ct-content-link-light-hover-background-color; + color: $ct-content-link-light-hover-color; + } + } + + &.ct-theme-dark { + color: $ct-content-link-dark-color; + + &:focus { + @include ct-outline(true); + } + + &:hover { + background-color: $ct-content-link-dark-hover-background-color; + color: $ct-content-link-dark-hover-color; + } + } + + &:visited { + @include ct-content-link-visited(); + } +} + +@mixin ct-content-link-visited() { + $root: &; + + @include ct-component-theme($root) using($root, $theme) { + color: ct-component-var($root, $theme, visited, color); + + &:hover { + @include ct-component-property($root, $theme, visited, hover, border-color); + @include ct-component-property($root, $theme, visited, hover, color); + } + } +} diff --git a/web/themes/contrib/civictheme/civictheme_library/components/00-base/mixins/_content.scss b/web/themes/contrib/civictheme/civictheme_library/components/00-base/mixins/_content.scss index 34efe5f18..588b59132 100644 --- a/web/themes/contrib/civictheme/civictheme_library/components/00-base/mixins/_content.scss +++ b/web/themes/contrib/civictheme/civictheme_library/components/00-base/mixins/_content.scss @@ -91,6 +91,10 @@ } } + a { + @include ct-content-link-base(); + } + blockquote { @include ct-typography('quote'); diff --git a/web/themes/contrib/civictheme/civictheme_library/components/01-atoms/content-link/content-link.scss b/web/themes/contrib/civictheme/civictheme_library/components/01-atoms/content-link/content-link.scss index e25b314b8..837d5eee8 100644 --- a/web/themes/contrib/civictheme/civictheme_library/components/01-atoms/content-link/content-link.scss +++ b/web/themes/contrib/civictheme/civictheme_library/components/01-atoms/content-link/content-link.scss @@ -1,69 +1,5 @@ // -// Link component. -// - -// -// Mixins. -// -@mixin ct-content-link-base() { - text-decoration: underline; - text-decoration-thickness: ct-particle(0.25); - text-underline-offset: ct-particle(0.375); - padding: ct-spacing(0.375) 0 ct-spacing(0.25); - word-break: break-word; - - &:hover { - text-decoration: none; - padding: ct-spacing(0.375) 0 ct-spacing(0.5); - } - - &, - &.ct-theme-light { - color: $ct-content-link-light-color; - - &:focus { - @include ct-outline(); - } - - &:hover { - background-color: $ct-content-link-light-hover-background-color; - color: $ct-content-link-light-hover-color; - } - } - - &.ct-theme-dark { - color: $ct-content-link-dark-color; - - &:focus { - @include ct-outline(true); - } - - &:hover { - background-color: $ct-content-link-dark-hover-background-color; - color: $ct-content-link-dark-hover-color; - } - } - - &:visited { - @include ct-content-link-visited (); - } -} - -@mixin ct-content-link-visited() { - $root: &; - - @include ct-component-theme($root) using($root, $theme) { - color: ct-component-var($root, $theme, visited, color); - - &:hover { - @include ct-component-property($root, $theme, visited, hover, border-color); - @include ct-component-property($root, $theme, visited, hover, color); - } - } -} - -// -// Classes. +// Content Link component. // .ct-content-link { diff --git a/web/themes/contrib/civictheme/civictheme_library/components/02-molecules/editor-content/editor-content.stories.js b/web/themes/contrib/civictheme/civictheme_library/components/02-molecules/editor-content/editor-content.stories.js deleted file mode 100644 index 8fcd9d7b1..000000000 --- a/web/themes/contrib/civictheme/civictheme_library/components/02-molecules/editor-content/editor-content.stories.js +++ /dev/null @@ -1,111 +0,0 @@ -// phpcs:ignoreFile -import CivicThemeContentLink from '../../01-atoms/content-link/content-link.twig'; -import CivicThemeTable from '../../01-atoms/table/table.twig'; -import CivicThemeFigure from '../figure/figure.twig'; -import { - demoImage, - demoVideoPoster, - demoVideos, -} from '../../00-base/base.utils'; -import CivicThemeVideoPlayer from '../video-player/video-player.twig'; - -export default { - title: 'Molecules/Editor Content', - parameters: { - layout: 'fullscreen', - knobs: { - escapeHTML: false, - }, - }, -}; - -export const EditorContent = () => { - let html = ''; - - // Headings. - html += ` -

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
- `; - - // Paragraphs. - html += ` -

Text without a class sed aute in sed consequat veniam excepteur minim mollit.

-

Large text sed aute in sed consequat veniam excepteur minim mollit.

-

Regular text veniam reprehenderit velit ea veniam occaecat magna est sed duis quis elit occaecat dolore ut enim est do in dolor non elit aliquip commodo aliquip sint veniam ullamco adipisicing tempor ad.

-

Small text duis sunt velit.Ea eu non.

-

In mollit in minim ut non ${CivicThemeContentLink({ - theme: 'light', - text: 'commodo dolore', - url: 'https://example.com', - })} nisi anim.

-

Deserunt in ex dolore. Super cupidatat esse. Sub do mollit aute labore.

- `; - - // Blockquote. - html += ` -
Culpa laboris sit fugiat minim ad commodo eu id sint eu sed nisi.
- `; - - // Lists. - html += ` - -
    -
  1. Id nostrud id sit nulla.
    2. -
  2. Dolore ea cillum culpa nulla.
    3. -
  3. Lorem ipsum ex excepteur.
    4. -
- `; - - // Image. - html += CivicThemeFigure({ - theme: 'light', - url: demoImage(), - alt: 'Occaecat laborum voluptate cupidatat.', - caption: 'Commodo anim sint minim.', - }); - - // Video Player. - html += CivicThemeVideoPlayer({ - theme: 'light', - sources: demoVideos(), - poster: demoVideoPoster(), - }); - - // Table. - html += CivicThemeTable({ - theme: 'light', - header: [ - 'Column A', - 'Column B', - 'Column C', - ], - rows: [ - [ - 'Do duis minim cupidatat eu.', - 'Ullamco sunt dolore.', - 'Dolor in officia.', - ], - [ - 'Do duis minim cupidatat eu.', - 'Ullamco sunt dolore.', - 'Dolor in officia.', - ], - [ - 'Lorem ipsum magna sint.', - 'Consequat qui anim.', - 'Lorem ipsum aliqua veniam deserunt.', - ], - ], - }); - - return `
${html}
`; -}; diff --git a/web/themes/contrib/civictheme/civictheme_library/components/02-molecules/editor-content/editor-content.stories.scss b/web/themes/contrib/civictheme/civictheme_library/components/02-molecules/editor-content/editor-content.stories.scss deleted file mode 100644 index 9a4868b66..000000000 --- a/web/themes/contrib/civictheme/civictheme_library/components/02-molecules/editor-content/editor-content.stories.scss +++ /dev/null @@ -1,6 +0,0 @@ -// -// Editor Content component. -// -// stylelint-disable scss/at-import-partial-extension - -@import '../../style.editor'; diff --git a/web/themes/contrib/civictheme/civictheme_library/components/style.editor.scss b/web/themes/contrib/civictheme/civictheme_library/components/style.editor.scss deleted file mode 100644 index 82420ba44..000000000 --- a/web/themes/contrib/civictheme/civictheme_library/components/style.editor.scss +++ /dev/null @@ -1,24 +0,0 @@ -// -// Styles. -// -// stylelint-disable scss/at-import-partial-extension - -// Need to add variables outside of scoping class to avoid compilation errors for variables with !global flags. -@import '00-base/reset/reset'; -@import '00-base/variables'; -@import '00-base/**/!(*.stories|variables|_variables.*|reset).scss'; - -// stylelint-disable no-invalid-position-at-import-rule -.cke_editable { - // Include civictheme content css styles for typography - @include ct-content(); - @include ct-content-light(); - - // Load all non-stories mixins. - @import '01-atoms/**/!(*.stories).scss'; - @import '02-molecules/**/!(*.stories|basic-content).scss'; - @import '03-organisms/**/!(*.stories).scss'; - @import '04-templates/**/!(*.stories).scss'; - @import '05-pages/**/!(*.stories).scss'; -} -// stylelint-enable no-invalid-position-at-import-rule diff --git a/web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/editor/_index.scss b/web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/editor/_index.scss deleted file mode 100644 index 14dbf4f64..000000000 --- a/web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/editor/_index.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import 'components_combined/00-base/variables'; -@import 'components_combined/02-molecules/basic-content/basic-content'; - -.cke_editable { - @extend .ct-basic-content; -} diff --git a/web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/theme.editor.scss b/web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/theme.editor.scss new file mode 100644 index 000000000..803e67b17 --- /dev/null +++ b/web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/theme.editor.scss @@ -0,0 +1,14 @@ +// +// Editor styles. +// +// stylelint-disable scss/at-import-partial-extension + +// Import only required partials to minimize CSS output. +@import 'components_combined/00-base/variables'; +@import 'components_combined/00-base/**/mixins/*.scss'; +@import 'components_combined/00-base/**/fonts'; + +.ck-editor__editable { + @include ct-content(); + @include ct-content-light(); +} diff --git a/web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/theme.scss b/web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/theme.scss index d5887e302..200ac2e9e 100644 --- a/web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/theme.scss +++ b/web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/theme.scss @@ -7,4 +7,3 @@ // These overrides will not be visible in the Storybook. // @todo Refactor webpack config to use direct import from the CivicTheme theme. @import 'block/local-tasks'; -@import 'editor'; diff --git a/web/themes/contrib/civictheme/civictheme_starter_kit/civictheme_starter_kit.info.yml b/web/themes/contrib/civictheme/civictheme_starter_kit/civictheme_starter_kit.info.yml index ceae40892..3530387d4 100644 --- a/web/themes/contrib/civictheme/civictheme_starter_kit/civictheme_starter_kit.info.yml +++ b/web/themes/contrib/civictheme/civictheme_starter_kit/civictheme_starter_kit.info.yml @@ -49,6 +49,11 @@ libraries-override: ckeditor5-stylesheets: - dist/styles.editor.css + - dist/styles.variables.css + # Using colors from the Color Selector is not supported until the issue + # below is resolved. + # @see https://www.drupal.org/project/drupal/issues/3406959 + # - /sites/default/files/css-variables.civictheme_starter_kit.css components: namespaces: diff --git a/web/themes/contrib/civictheme/civictheme_starter_kit/webpack/editor_css.js b/web/themes/contrib/civictheme/civictheme_starter_kit/webpack/editor_css.js index 984f3a5b6..bf1a95085 100644 --- a/web/themes/contrib/civictheme/civictheme_starter_kit/webpack/editor_css.js +++ b/web/themes/contrib/civictheme/civictheme_starter_kit/webpack/editor_css.js @@ -2,4 +2,4 @@ * Import current Drupal CK Editor styles to be discoverable by the loader. */ -import '../components_combined/style.editor.scss'; +import '../assets/sass/theme.editor.scss'; diff --git a/web/themes/contrib/civictheme/civictheme_starter_kit/webpack/webpack.common.js b/web/themes/contrib/civictheme/civictheme_starter_kit/webpack/webpack.common.js index d3cb68a2b..2dd13b744 100644 --- a/web/themes/contrib/civictheme/civictheme_starter_kit/webpack/webpack.common.js +++ b/web/themes/contrib/civictheme/civictheme_starter_kit/webpack/webpack.common.js @@ -2,9 +2,10 @@ const path = require('path'); const glob = require('glob'); -const {CleanWebpackPlugin} = require('clean-webpack-plugin'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const magicImporter = require('node-sass-magic-importer'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +// eslint-disable-next-line import/no-useless-path-segments const { isOutdated, printHeader } = require('../../../../contrib/civictheme/civictheme_library/webpack/info'); printHeader(); @@ -68,7 +69,7 @@ module.exports = { }, plugins: [ new MiniCssExtractPlugin({ - filename: ({chunk}) => (chunk.name === 'main' ? 'styles.css' : `styles.${chunk.name}.css`), + filename: ({ chunk }) => (chunk.name === 'main' ? 'styles.css' : `styles.${chunk.name}.css`), }), new CleanWebpackPlugin({ dry: false, diff --git a/web/themes/contrib/civictheme/config/install/editor.editor.civictheme_rich_text.yml b/web/themes/contrib/civictheme/config/install/editor.editor.civictheme_rich_text.yml index ee0347803..0607be69a 100644 --- a/web/themes/contrib/civictheme/config/install/editor.editor.civictheme_rich_text.yml +++ b/web/themes/contrib/civictheme/config/install/editor.editor.civictheme_rich_text.yml @@ -82,7 +82,7 @@ settings: element: '' - label: 'Large primary button' - element: '' + element: '' - label: 'Large secondary large' element: '' diff --git a/web/themes/contrib/civictheme/webpack/editor_css.js b/web/themes/contrib/civictheme/webpack/editor_css.js index 9f4597fef..bf1a95085 100644 --- a/web/themes/contrib/civictheme/webpack/editor_css.js +++ b/web/themes/contrib/civictheme/webpack/editor_css.js @@ -2,4 +2,4 @@ * Import current Drupal CK Editor styles to be discoverable by the loader. */ -import '../components/style.editor.scss'; +import '../assets/sass/theme.editor.scss';