Browse Source

Code-refactoring: Various improvements to the theme with a rich support of color variables, UI scaling and rounded corners.

Aleksander Nowodzinski 8 years ago
parent
commit
0c06ea6685

+ 15 - 57
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -1,58 +1,9 @@
 // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-/**
- * Implements a button of given background color.
- *
- * @param {String} $color - Background color of the button.
- */
-@mixin ck-button-colors( $color, $offset: 0 ) {
-	background: ck-color( $color, $offset );
-	border-color: ck-border-color( $color, $offset );
-
-	@include ck-button-state-colors( $color, $offset );
-}
-
-/**
- * Implements button states.
- *
- * @param {String} $color - Background color of the button.
- */
-@mixin ck-button-state-colors( $color, $offset: 0 ) {
-	&:not(.ck-disabled) {
-		&:hover,
-		&:focus {
-			background: ck-color( $color, $offset - 10 );
-			border-color: ck-border-color( $color, $offset - 10 );
-		}
-
-		&:active {
-			background: ck-color( $color, $offset - 15 );
-			border-color: ck-border-color( $color, $offset - 15 );
-			box-shadow: inset 0 2px 2px ck-color( $color, $offset - 25 );
-		}
-	}
-
-	// https://github.com/ckeditor/ckeditor5-theme-lark/issues/98
-	&.ck-disabled {
-		background: ck-color( $color, $offset + 10 );
-		border-color: ck-border-color( $color, $offset + 10 );
-	}
-}
-
-/**
- * A helper to define button–specific icon styles.
- *
- */
-@mixin ck-button-icon {
-	.ck-icon {
-		@content;
-	}
-}
-
 .ck-button,
 a.ck-button {
-	@include ck-button-colors( 'background' );
+	@include ck-button-colors( 'button-default-background', 'button-default-border' );
 	@include ck-rounded-corners();
 
 	border-width: 1px;
@@ -61,7 +12,9 @@ a.ck-button {
 	cursor: default;
 	vertical-align: middle;
 	padding: ck-spacing( 'small' );
-	line-height: $ck-icon-size / $ck-font-size-base;
+
+	// Enable font size inheritance, which allows fluid UI scaling.
+	font-size: inherit;
 
 	&:focus {
 		@include ck-focus-ring();
@@ -97,20 +50,22 @@ a.ck-button {
 		}
 	}
 
+	// A style of the button which is currently on, e.g. its feature is active.
 	&.ck-on {
-		@include ck-button-colors( 'foreground' );
+		@include ck-button-colors( 'button-on-background', 'button-on-border' );
 	}
 
+	// A style of the button which handles the primary action.
 	&-action {
-		@include ck-button-colors( 'action' );
+		@include ck-button-colors( 'button-action-background', 'button-action-border' );
 
-		text-shadow: 0 -1px ck-color( 'action', -20 );
-		color: ck-color();
+		text-shadow: 0 -1px ck-color( 'button-action-background', -20 );
+		color: ck-color( 'button-action-text' );
 
 		&:hover,
 		&:focus,
 		&:active {
-			text-shadow: 0 -1px ck-color( 'action', -40 );
+			text-shadow: 0 -1px ck-color( 'button-action-background', -40 );
 		}
 	}
 
@@ -126,9 +81,12 @@ a.ck-button {
 	}
 
 	.ck-button__label {
+		// Enable font size inheritance, which allows fluid UI scaling.
+		font-size: inherit;
+
 		float: left;
+		height: #{ $ck-line-height-base }em;
 		line-height: inherit;
-		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;
 		cursor: inherit;

+ 6 - 3
packages/ckeditor5-theme-lark/theme/components/dropdown.scss

@@ -2,11 +2,14 @@
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .ck-dropdown {
+	// Enable font size inheritance, which allows fluid UI scaling.
+	font-size: inherit;
+
 	// A triangle displayed to indicate this is actually a dropdown.
 	&::after {
 		border-style: solid;
 		border-width: .4em .4em 0 .4em;
-		border-color: ck-color( 'text', 30 ) transparent;
+		border-color: ck-color( 'dropdown-symbol' ) transparent;
 		right: ck-spacing();
 	}
 
@@ -29,11 +32,11 @@
 }
 
 .ck-dropdown__panel {
-	border: 1px solid ck-border-color( 'foreground' );
+	background: ck-color( 'dropdown-panel-background' );
+	border: 1px solid ck-color( 'dropdown-panel-border' );
 
 	// Compensate double border from button and from box when positioned below the button.
 	bottom: 1px;
-	background: ck-color( 'background' );
 
 	@include ck-rounded-corners();
 	@include ck-drop-shadow();

+ 9 - 10
packages/ckeditor5-theme-lark/theme/components/editor.scss

@@ -1,33 +1,32 @@
 // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-.ck-editor-toolbar {
-	// Toolbars should not react to ck-rounded-corners() mixin.
-	border-radius: 0;
+@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_button.scss';
 
+.ck-editor-toolbar {
 	.ck-button {
 		border-width: 0;
 
 		&:not(:hover):not(:focus):not(.ck-on),
 		&.ck-disabled {
-			background: ck-color( 'foreground' );
+			background: ck-color( 'editor-toolbar-background' );
 		}
 
 		&.ck-on {
-			@include ck-button-colors( 'foreground', -10 );
+			@include ck-button-colors( 'editor-toolbar-button-background', 'button-default-border', -10 );
 		}
 	}
 
-	.ck-dropdown__button {
+	.ck-button.ck-dropdown__button {
 		border-width: 1px;
 
 		&:not(:hover):not(:focus):not(.ck-on) {
-			background: ck-color( 'background' );
+			background: ck-color( 'editor-dropdown-background' );
 		}
 	}
 
 	.ck-toolbar-container & {
-		background: ck-color( 'foreground' );
+		background: ck-color( 'editor-toolbar-background' );
 	}
 }
 
@@ -36,7 +35,7 @@
 	&_ne,
 	&_nw {
 		&:after {
-			border-bottom-color: ck-color( 'foreground' );
+			border-bottom-color: ck-color( 'editor-toolbar-background' );
 		}
 	}
 
@@ -44,7 +43,7 @@
 	&_se,
 	&_sw {
 		&:after {
-			border-top-color: ck-color( 'foreground' );
+			border-top-color: ck-color( 'editor-toolbar-background' );
 		}
 	}
 }

+ 2 - 2
packages/ckeditor5-theme-lark/theme/components/icon.scss

@@ -2,6 +2,6 @@
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 svg.ck-icon {
-	width: #{ $ck-icon-size / $ck-font-size-base }em;
-	height: #{ $ck-icon-size / $ck-font-size-base }em;
+	width: #{ $ck-line-height-base }em;
+	height: #{ $ck-line-height-base }em;
 }

+ 7 - 6
packages/ckeditor5-theme-lark/theme/components/inputtext.scss

@@ -6,9 +6,10 @@
 		@include ck-rounded-corners();
 		@include ck-box-shadow( $ck-inner-shadow );
 
-		border: 1px solid ck-border-color( 'foreground' );
-		padding: ck-spacing( 'medium' );
-		min-width: 250px;
+		background: ck-color( 'input-background' );
+		border: 1px solid ck-color( 'input-border' );
+		padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
+		min-width: 21em;
 
 		&:focus {
 			@include ck-focus-ring();
@@ -16,9 +17,9 @@
 		}
 
 		&[readonly] {
-			border: 1px solid ck-border-color( 'foreground', 10 );
-			background: ck-color( 'foreground' );
-			color: ck-color( 'text', 20 );
+			border: 1px solid ck-color( 'input-border', 10 );
+			background: ck-color( 'input-background', -5 );
+			color: ck-color( 'input-text', 20 );
 		}
 	}
 }

+ 8 - 9
packages/ckeditor5-theme-lark/theme/components/list.scss

@@ -5,8 +5,10 @@
 	@include ck-rounded-corners();
 	@include ck-unselectable();
 
+	// Crop the the items when the list has huge border-radius.
+	overflow: hidden;
 	list-style-type: none;
-	background: ck-color( 'background' );
+	background: ck-color( 'list-background' );
 
 	&__item {
 		padding: ck-spacing( 'medium' );
@@ -15,27 +17,24 @@
 
 		&:hover,
 		&:focus {
-			background: ck-color( 'foreground' );
+			background: ck-color( 'list-item-background-hover' );
 		}
 
 		&:focus {
 			@include ck-box-shadow( $ck-focus-outer-shadow );
+
 			position: relative;
 			z-index: ck-z();
 			outline: none;
 		}
 
-		&:last-of-type {
-			border: none;
-		}
-
 		&_active {
-			background: ck-color( 'active' );
-			color: ck-color( 'background' );
+			background: ck-color( 'list-item-background-active' );
+			color: ck-color( 'list-item-text-active' );
 
 			&:hover,
 			&:focus {
-				background: ck-color( 'active', -10 );
+				background: ck-color( 'list-item-background-active', -10 );
 			}
 		}
 	}

+ 6 - 6
packages/ckeditor5-theme-lark/theme/components/panel/balloonpanel.scss

@@ -11,8 +11,8 @@ $ck-balloon-arrow-half-width: 10px;
 
 	min-height: 15px;
 
-	background: ck-color( 'background' );
-	border: 1px solid ck-border-color( 'foreground' );
+	background: ck-color( 'panel-background' );
+	border: 1px solid ck-color( 'panel-border' );
 
 	&.ck-balloon-panel_with-arrow {
 		&:before,
@@ -33,11 +33,11 @@ $ck-balloon-arrow-half-width: 10px;
 			}
 
 			&:before {
-				border-color: transparent transparent ck-border-color( 'foreground' ) transparent;
+				border-color: transparent transparent ck-color( 'panel-border' ) transparent;
 			}
 
 			&:after {
-				border-color: transparent transparent ck-color( 'background' ) transparent;
+				border-color: transparent transparent ck-color( 'panel-background' ) transparent;
 				margin-top: $ck-balloon-arrow-offset;
 			}
 		}
@@ -51,11 +51,11 @@ $ck-balloon-arrow-half-width: 10px;
 			}
 
 			&:before {
-				border-color: ck-border-color( 'foreground' ) transparent  transparent;
+				border-color: ck-color( 'panel-border' ) transparent  transparent;
 			}
 
 			&:after {
-				border-color: ck-color( 'background' ) transparent transparent transparent;
+				border-color: ck-color( 'panel-background' ) transparent transparent transparent;
 				margin-bottom: $ck-balloon-arrow-offset;
 			}
 		}

+ 1 - 1
packages/ckeditor5-theme-lark/theme/components/reset.scss

@@ -25,7 +25,7 @@
 	&, *, a, textarea {
 		// These are rule inherited by all children elements.
 		border-collapse: collapse;
-		font: normal normal normal $ck-font-size-base $ck-font-face;
+		font: normal normal normal #{$ck-font-size-base}/#{$ck-line-height-base} $ck-font-face;
 		color: ck-color( 'text' );
 		text-align: left;
 		white-space: nowrap;

+ 3 - 3
packages/ckeditor5-theme-lark/theme/components/toolbar/stickytoolbar.scss

@@ -6,9 +6,9 @@
 		&.ck-toolbar_sticky {
 			@include ck-drop-shadow();
 
-			border: 1px solid ck-border-color();
-			border-width: 0 0 1px;
-			background: ck-color( 'foreground' );
+			border-width: 0 1px 1px;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
 		}
 	}
 }

+ 2 - 3
packages/ckeditor5-theme-lark/theme/components/toolbar/toolbar.scss

@@ -2,9 +2,8 @@
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
 .ck-toolbar {
-	line-height: 1;
 	padding: ck-spacing( 'small' );
-	border: 1px solid ck-border-color();
+	border: 1px solid ck-color( 'toolbar-border' );
 
 	// Allow wrapping toolbar items to the new line.
 	white-space: initial;
@@ -23,7 +22,7 @@
 		width: 1px;
 		height: calc( 1em + 2 * #{ck-spacing( 'medium' )} );
 		vertical-align: middle;
-		background: ck-border-color();
+		background: ck-color( 'toolbar-border' );
 	}
 
 	&__newline {

+ 6 - 6
packages/ckeditor5-theme-lark/theme/components/tooltip.scss

@@ -9,13 +9,13 @@ $ck-tooltip-arrow-size: 5px;
 	&__text {
 		@include ck-rounded-corners();
 
-		color: ck-color( 'background' );
-		font-size: ck-font-size( -2 );
+		font-size: .9em;
+		line-height: 1.5;
+		color: ck-color( 'tooltip-text' );
 		padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
-		background: ck-color( 'text' );
+		background: ck-color( 'tooltip-background' );
 		position: relative;
 		left: -50%;
-		line-height: 1.5;
 
 		&::after {
 			border-style: solid;
@@ -39,7 +39,7 @@ $ck-tooltip-arrow-size: 5px;
 		.ck-tooltip__text::after {
 			top: -$ck-tooltip-arrow-size;
 			transform: translateX( -50% );
-			border-color: transparent transparent ck-color( 'text' ) transparent;
+			border-color: transparent transparent ck-color( 'tooltip-background' ) transparent;
 			border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;
 
 		}
@@ -61,7 +61,7 @@ $ck-tooltip-arrow-size: 5px;
 		.ck-tooltip__text::after {
 			bottom: -$ck-tooltip-arrow-size;
 			transform: translateX( -50% );
-			border-color: ck-color( 'text' ) transparent transparent transparent;
+			border-color: ck-color( 'tooltip-background' ) transparent transparent transparent;
 			border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
 		}
 	}

+ 43 - 0
packages/ckeditor5-theme-lark/theme/helpers/_button.scss

@@ -0,0 +1,43 @@
+// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+/**
+ * Implements a button of given background color.
+ *
+ * @param {String} $background - Background color of the button.
+ * @param {String} $border - Border color of the button.
+ */
+@mixin ck-button-colors( $background, $border, $offset: 0 ) {
+	background: ck-color( $background, $offset );
+	border-color: ck-color( $border, $offset );
+
+	&:not(.ck-disabled) {
+		&:hover,
+		&:focus {
+			background: ck-color( $background, $offset - 10 );
+			border-color: ck-color( $border, $offset - 10 );
+		}
+
+		&:active {
+			background: ck-color( $background, $offset - 15 );
+			border-color: ck-color( $border, $offset - 15 );
+			box-shadow: inset 0 2px 2px ck-color( $background, $offset - 25 );
+		}
+	}
+
+	// https://github.com/ckeditor/ckeditor5-theme-lark/issues/98
+	&.ck-disabled {
+		background: ck-color( $background, $offset + 10 );
+		border-color: ck-color( $border, $offset + 10 );
+	}
+}
+
+/**
+ * A helper to define button–specific icon styles.
+ *
+ */
+@mixin ck-button-icon {
+	.ck-icon {
+		@content;
+	}
+}

+ 49 - 19
packages/ckeditor5-theme-lark/theme/helpers/_colors.scss

@@ -1,6 +1,14 @@
 // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+$ck-color-foreground: 							#f7f7f7 !default;
+$ck-color-background: 							#fff !default;
+$ck-color-border: 								scale-color( $ck-color-background, $lightness: -25 ) !default;
+$ck-color-action: 								#61B145 !default;
+$ck-color-focus: 								#6ab5f9 !default;
+$ck-color-text: 								#333 !default;
+$ck-color-active: 								#1A8BF1 !default;
+
 /**
  * Colors configured by the user.
  *
@@ -18,13 +26,47 @@ $ck-colors: () !default;
  * @see ck-color-add
  */
 $_ck-colors: (
-	'action': #61B145,
-	'background': #fff,
-	'focus': #6ab5f9,
-	'foreground': #f7f7f7,
-	'text': #333,
-	'active': #1A8BF1,
-	'shadow': rgba(0,0,0,.2)
+	'border-focus': 							#48a3f5,
+	'text': 									$ck-color-text,
+	'shadow-drop': 								rgba( 0, 0, 0, .2 ),
+	'shadow-inner': 							rgba( 0, 0, 0, .1 ),
+
+	// ------------------------------------------------------------
+
+	'button-default-background': 				$ck-color-background,
+	'button-default-border': 					$ck-color-border,
+	'button-on-background': 					$ck-color-foreground,
+	'button-on-border': 						scale-color( $ck-color-foreground, $lightness: -25 ),
+	'button-action-background': 				$ck-color-action,
+	'button-action-border': 					scale-color( $ck-color-action, $lightness: -20 ),
+	'button-action-text': 						$ck-color-background,
+
+	'dropdown-panel-background': 				$ck-color-background,
+	'dropdown-panel-border': 					$ck-color-border,
+	'dropdown-symbol': 							#707070,
+
+	'input-background': 						$ck-color-background,
+	'input-border': 							$ck-color-border,
+	'input-text': 								$ck-color-text,
+
+	'list-background': 							$ck-color-background,
+	'list-item-background-hover': 				$ck-color-foreground,
+	'list-item-background-active': 				$ck-color-active,
+	'list-item-text-active':					$ck-color-background,
+
+	'panel-background': 						$ck-color-background,
+	'panel-border': 							$ck-color-border,
+
+	'toolbar-background': 						$ck-color-background,
+	'toolbar-border': 							$ck-color-border,
+
+	'tooltip-background': 						$ck-color-text,
+	'tooltip-text': 							$ck-color-background,
+
+	'editor-border': 							$ck-color-border,
+	'editor-toolbar-background': 				$ck-color-foreground,
+	'editor-toolbar-button-background': 		$ck-color-foreground,
+	'editor-dropdown-background': 				$ck-color-background,
 );
 
 /**
@@ -42,18 +84,6 @@ $_ck-colors: (
 }
 
 /**
- * Returns a border–color for a given name and lightness offset.
- *
- * @param {String} $name [ 'background' ] - Name of the color.
- * @param {Number} $offset [ 0 ] - Offset of the lightness.
- * @return {String}
- * @see $ck-color
- */
-@function ck-border-color( $name: 'background', $offset: 0 ) {
-	@return ck-color( $name, $offset - 25 );
-}
-
-/**
  * Adds a color to internal color map.
  *
  * @example

+ 10 - 5
packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss

@@ -9,6 +9,11 @@
 $ck-font-size-base: 12px !default;
 
 /**
+ * Base line height.
+ */
+$ck-line-height-base: 1.67 !default;
+
+/**
  * Base font face.
  *
  */
@@ -20,11 +25,11 @@ $ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !default;
  * @see ck-font-size
  */
 $ck-font-sizes: (
-	-2: 0.7rem,
-	-1: 0.75rem,
-	 0: 1rem,
-	 1: 1.4rem,
-	 2: 1.8rem
+	-2: 0.7em,
+	-1: 0.75em,
+	 0: 1em,
+	 1: 1.4em,
+	 2: 1.8em
 );
 
 /**

+ 1 - 0
packages/ckeditor5-theme-lark/theme/helpers/_rounded.scss

@@ -16,5 +16,6 @@ $ck-border-radius: 2px !default;
 	&.ck-rounded-corners,
 	.ck-rounded-corners & {
 		border-radius: $ck-border-radius;
+		@content;
 	}
 }

+ 2 - 2
packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss

@@ -4,12 +4,12 @@
 /**
  * A visual style of element's inner shadow (i.e. input).
  */
-$ck-inner-shadow: 2px 2px 3px ck-color( 'foreground', -7 ) inset;
+$ck-inner-shadow: 2px 2px 3px ck-color( 'shadow-inner' ) inset;
 
 /**
  * A visual style of element's drop shadow (i.e. panel).
  */
-$ck-drop-shadow: 0 1px 2px 0 ck-color( 'shadow' );
+$ck-drop-shadow: 0 1px 2px 0 ck-color( 'shadow-drop' );
 
 /**
  * A helper to combine multiple shadows.

+ 7 - 12
packages/ckeditor5-theme-lark/theme/helpers/_states.scss

@@ -4,12 +4,12 @@
 /**
  * A visual style of focused element's outer shadow.
  */
-$ck-focus-outer-shadow: 0 0 3px 2px lighten( ck-color( 'focus' ), 10% );
+$ck-focus-outer-shadow: 0 0 3px 2px lighten( ck-color( 'border-focus' ), 10% );
 
 /**
  * A visual style of focused element's border or outline.
  */
-$ck-focus-ring: 1px solid ck-color( 'focus' );
+$ck-focus-ring: 1px solid ck-color( 'border-focus' );
 
 /**
  * An opacity value of disabled UI item.
@@ -24,17 +24,12 @@ $ck-disabled-opacity: .5;
 }
 
 /**
- * A visual style of focused element's border or outline.
+ * A visual style of focused element's border.
  */
-@mixin ck-focus-ring( $borderOrOutline: 'border' ) {
-	@if $borderOrOutline == 'outline' {
-		outline: $ck-focus-ring;
-	}
-	@else {
-		// Disable native outline.
-		outline: none;
-		border: $ck-focus-ring;
-	}
+@mixin ck-focus-ring() {
+	// Disable native outline.
+	outline: none;
+	border: $ck-focus-ring;
 }
 
 /**

+ 1 - 0
packages/ckeditor5-theme-lark/theme/theme.scss

@@ -10,6 +10,7 @@
 @import 'helpers/spacing';
 @import 'helpers/states';
 @import 'helpers/shadow';
+@import 'helpers/button';
 
 @import 'components/reset';
 @import 'components/icon';