8
0
Просмотр исходного кода

Docs: Updated custom theme example to the new theme architecture.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
72d8f0c072

+ 123 - 0
packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css

@@ -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 --ck-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;
+	--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);
+}

+ 0 - 79
packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.scss

@@ -1,79 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-// 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 $ck-colors.
-$custom-background: #4A494B;
-$custom-foreground: #3a393d;
-$custom-border: #383738;
-$custom-white: #fff;
-
-// Colors used by the ck-color() mixin across the theme.
-$ck-colors: (
-	// Overrides the default focus color used by the ck-focus-ring() mixin.
-	'border-focus': #48a3f5,
-
-	// Overrides the default text color in the theme.
-	'text': #fafafa,
-
-	// Overrides the default shadow colors in the theme.
-	'shadow-drop': rgba( 0, 0, 0, .2 ),
-	'shadow-inner': rgba( 0, 0, 0, .1 ),
-
-	// Overrides the default .ck-button class colors.
-	'button-default-background': $custom-background,
-	'button-default-border': $custom-border,
-	'button-on-background': $custom-foreground,
-	'button-on-border': $custom-border,
-	'button-action-background': #1ABC9C,
-	'button-action-border': #49d2b7,
-	'button-action-text': $custom-white,
-
-	// Overrides the default .ck-dropdown class colors.
-	'dropdown-panel-background': $custom-background,
-	'dropdown-panel-border': $custom-foreground,
-	'dropdown-symbol': #f1f1f1,
-
-	// Overrides the default .ck-input class colors.
-	'input-background': $custom-foreground,
-	'input-border': #6b6970,
-	'input-text': #fafafa,
-
-	// Overrides the default .ck-list class colors.
-	'list-background': $custom-background,
-	'list-item-background-hover': $custom-foreground,
-	'list-item-background-active': #1A8BF1,
-	'list-item-text-active': $custom-white,
-
-	// Overrides the default .ck-balloon-panel class colors.
-	'panel-background': $custom-background,
-	'panel-border': $custom-border,
-
-	// Overrides the default .ck-toolbar class colors.
-	'toolbar-background': $custom-foreground,
-	'toolbar-border': $custom-border,
-
-	// Overrides the default .ck-tooltip class colors.
-	'tooltip-background': #212025,
-	'tooltip-text': #eee,
-
-	// Overrides the default colors used by the editor.
-	'editor-border': $custom-background,
-	'editor-toolbar-background': $custom-background,
-	'editor-toolbar-button-background': $custom-background,
-	'editor-dropdown-background': #535254,
-
-	// Overrides the default colors used by ckeditor5-image package.
-	'image-caption-background': #f7f7f7,
-	'image-caption-text': #333,
-
-	// Overrides the default colors used by ckeditor5-widget package.
-	'widget-border-blurred': #ddd,
-	'widget-border-hover': #FFD25C,
-	'widget-editable-focused-background': $custom-white
-);

+ 21 - 0
packages/ckeditor5-theme-lark/docs/_snippets/examples/extras.css

@@ -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;
+	}
+}

+ 0 - 21
packages/ckeditor5-theme-lark/docs/_snippets/examples/extras.scss

@@ -1,21 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-// Allow using Lark's ck-box-shadow() mixin.
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_shadow.scss';
-
-// Allow using colors defined in Lark and the ck-color() mixin.
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
-
-// The shadow should be 10% brighter than the toolbar background.
-$shadow-color: ck-color( 'editor-toolbar-background', 10 );
-
-.ck-editor-toolbar {
-	.ck-button.ck-dropdown__button {
-		// Apply a dedicated inner box-shadow to the dropdown button.
-		@include ck-box-shadow(
-			0 0 0 1px $shadow-color inset,
-			0 0 5px $shadow-color inset
-		);
-	}
-}

+ 2 - 3
packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.js

@@ -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' ), {