Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

t/ckeditor5-ui/144: Migrated the package from SASS to PostCSS #114

Merged
merged 23 commits into from
Nov 30, 2017
Merged

t/ckeditor5-ui/144: Migrated the package from SASS to PostCSS #114

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
55fe28a
Migrated UI components from SASS to PostCSS. Added theme support.
oleq Nov 7, 2017
76de100
Refactored theme structure for easier loading.
oleq Nov 16, 2017
ffe7946
Removed color() calls in the styles. Code refactoring.
oleq Nov 17, 2017
215cebe
Removed redundant color variables.
oleq Nov 17, 2017
5044a47
Merge branch 'master' into t/ckeditor5-ui/144
oleq Nov 17, 2017
af1e48f
Revert "Removed redundant color variables."
oleq Nov 21, 2017
faa4a35
Docs: Updated custom theme example to the new theme architecture.
oleq Nov 21, 2017
5d25033
Code refactoring in colors.
oleq Nov 21, 2017
4461a30
Docs: Updated Theme customization guide to work with PostCSS.
oleq Nov 21, 2017
d462ecd
Got rid of postcss-custom-selectors to simplify the building process.
oleq Nov 29, 2017
06b8b23
Removed obsolete 'a' and 'textarea' selectors from .ck-reset_all.
oleq Nov 29, 2017
0047c44
Created variable for engine's placeholder text color.
oleq Nov 29, 2017
8c32d11
Used --ck-font-size-normal variable to define .ck-icon's height and w…
oleq Nov 29, 2017
b5a7b45
Defined a variable to control .ck-input-text's min-width.
oleq Nov 29, 2017
bcbbe35
Code refactoring in the linkform styles sheet.
oleq Nov 29, 2017
37ef96d
Created variables for block–quote–in–content styles.
oleq Nov 29, 2017
53d6d04
Code refactoring: added missing spaces to docs strings in various sty…
oleq Nov 29, 2017
5ba4672
Code refactoring: added missing colons for pseudo-element selectors.
oleq Nov 29, 2017
4226d5c
Defined variables for colors in the upload styles sheet.
oleq Nov 29, 2017
2bd4ac7
Used variables to define .ck-heading_headingN font sizes.
oleq Nov 29, 2017
0a74d03
Removed obsolete comment from the classiceditor styles sheet.
oleq Nov 29, 2017
041b540
Converted colors to HSL(A).
oleq Nov 29, 2017
7594cd2
Moved ckeditor5-ui component styles to own directories to avoid such …
oleq Nov 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 123 additions & 0 deletions docs/_snippets/examples/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
/*
* Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/

:root {
/* Overrides the border-radius setting in the theme. */
--ck-border-radius: 4px;

/* Overrides the default font size in the theme. */
--ck-font-size-base: 14px;

/* Helper variables to avoid duplication in the colors. */
--ck-custom-background: #4A494B;
--ck-custom-foreground: #3a393d;
--ck-custom-border: #383738;
--ck-custom-white: #fff;

/* -- Overrides generic colors -------------------------------------------------------------- */

--ck-color-focus-border: #48a3f5;
--ck-color-text: #fafafa;
--ck-color-shadow-drop: rgba( 0, 0, 0, .2 );
--ck-color-shadow-inner: rgba( 0, 0, 0, .1 );

/* -- Overrides the default .ck-button class colors ----------------------------------------- */

--ck-color-button-default-background: var(--ck-custom-background);
--ck-color-button-default-border: var(--ck-custom-border);
--ck-color-button-default-focus-background: #434244;
--ck-color-button-default-focus-border: #323232;
--ck-color-button-default-active-background: #3f3e40;
--ck-color-button-default-active-border: #302f30;
--ck-color-button-default-active-shadow: #3b3a3c;
--ck-color-button-default-disabled-background: var(--ck-custom-background);
--ck-color-button-default-disabled-border: var(--ck-custom-border);

--ck-color-button-on-background: var(--ck-custom-foreground);
--ck-color-button-on-border: var(--ck-custom-border);
--ck-color-button-on-focus-background: #343337;
--ck-color-button-on-focus-border: #323232;
--ck-color-button-on-active-background: #313034;
--ck-color-button-on-active-border: #302f30;
--ck-color-button-on-active-shadow: #2e2e31;
--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
--ck-color-button-on-disabled-border: var(--ck-custom-border);

--ck-color-button-action-background: #1ABC9C;
--ck-color-button-action-border: #49d2b7;
--ck-color-button-action-focus-background: #17a98c;
Copy link
Contributor

@dkonopka dkonopka Nov 27, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we talked we can't use postcss plugin for colors with functions like darken/lighten so maybe should we use hsl format? It be easier to understand & modify shades of color.

--ck-color-button-action-background: hsl( 168, 76%, 42% )
--ck-color-button-action-focus-background: hsl( 168, 76%, 38% )

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a great idea. And what's more, you can use variables and calc to shift the color.

:root {
  --lightness-shift: 30%;
}

#first {
  background: hsl(120,100%, 50%);
}

#second {
  background: hsl(120,100%, calc(50% - var(--lightness-shift)));
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...which may be broken in Firefox (and IE11?). Needs research.

Copy link
Contributor

@dkonopka dkonopka Nov 29, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect solution! I forgot about changing the shade of colour by a variable in HSL.

HSL is full supported since IE8+ so no worries here.

And we don't need any postcss color plugin 🎉

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pity we won't be able to use calc() with var(). I checked that out, it does not work in FF and IE11.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still, hsl sounds like a plan.

--ck-color-button-action-focus-border: #42bda5;
--ck-color-button-action-active-background: #16a085;
--ck-color-button-action-active-border: #3eb39c;
--ck-color-button-action-active-shadow: #15967d;
--ck-color-button-action-disabled-background: #1ABC9C;
--ck-color-button-action-disabled-border: #49d2b7;
--ck-color-button-action-text: var(--ck-custom-white);

/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */

--ck-color-dropdown-panel-background: var(--ck-custom-background);
--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
--ck-color-dropdown-symbol: #f1f1f1;

/* -- Overrides the default .ck-input class colors ------------------------------------------ */

--ck-color-input-background: var(--ck-custom-foreground);
--ck-color-input-border: #6b6970;
--ck-color-input-text: #fafafa;
--ck-color-input-disabled-background: #343337;
--ck-color-input-disabled-border: #605f65;
--ck-color-input-disabled-text: #757575;

/* -- Overrides the default .ck-list class colors ------------------------------------------- */

--ck-color-list-background: var(--ck-custom-background);
--ck-color-list-item-background-hover: var(--ck-custom-foreground);
--ck-color-list-item-background-active: #1A8BF1;
--ck-color-list-item-text-active: var(--ck-custom-white);

/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */

--ck-color-panel-background: var(--ck-custom-background);
--ck-color-panel-border: var(--ck-custom-border);

/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */

--ck-color-toolbar-background: var(--ck-custom-foreground);
--ck-color-toolbar-border: var(--ck-custom-border);

/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */

--ck-color-tooltip-background: #212025;
--ck-color-tooltip-text: #eee;

/* -- Overrides the default colors used by the editor --------------------------------------- */

--ck-color-editor-border: var(--ck-custom-background);
--ck-color-editor-toolbar-background: var(--ck-custom-background);

--ck-color-editor-toolbar-button-on-background: #3c3c3c;
--ck-color-editor-toolbar-button-on-border: transparent;
--ck-color-editor-toolbar-button-on-focus-background: #353535;
--ck-color-editor-toolbar-button-on-focus-border: transparent;
--ck-color-editor-toolbar-button-on-active-background: #272727;
--ck-color-editor-toolbar-button-on-active-border: transparent;
--ck-color-editor-toolbar-button-on-active-shadow: #2d2d2d;
--ck-color-editor-toolbar-button-on-disabled-background: transparent;
--ck-color-editor-toolbar-button-on-disabled-border: transparent;

--ck-color-editor-dropdown-background: #535254;

/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */

--ck-color-image-caption-background: #f7f7f7;
--ck-color-image-caption-text: #333;

/* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */

--ck-color-widget-border-blurred: #ddd;
--ck-color-widget-border-hover: #FFD25C;
--ck-color-widget-editable-focused-background: var(--ck-custom-white);
}
79 changes: 0 additions & 79 deletions docs/_snippets/examples/custom.scss
View file
Open in desktop

This file was deleted.

21 changes: 21 additions & 0 deletions docs/_snippets/examples/extras.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/*
* Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/

/* Allow using Lark's ck-box-shadow() mixin. */
@import '@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css';

/* The shadow should be 10% brighter than the toolbar background. */
:root {
--ck-shadow-color: #646265;
}

.ck-editor-toolbar {
& .ck-button.ck-dropdown__button {
/* Apply a dedicated inner box-shadow to the dropdown button. */
@mixin ck-box-shadow
0 0 0 1px var(--ck-shadow-color) inset,
0 0 5px var(--ck-shadow-color) inset;
}
}
21 changes: 0 additions & 21 deletions docs/_snippets/examples/extras.scss
View file
Open in desktop

This file was deleted.

5 changes: 2 additions & 3 deletions docs/_snippets/examples/theme-lark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@

/* globals console, window, document */

/* config { "sassImportPath": "./custom.scss" } */

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
import './extras.scss';
import './custom.css';
import './extras.css';

ClassicEditor
.create( document.querySelector( '#snippet-classic-editor' ), {
Expand Down
Loading