infra-sk/themes.scss - buildbot - Git at Google

 /*

 //infra-sk/themes.scss is a common theme to be used across all Skia
 infrastructure applications so that we have a consistent look and feel.

 This file consists of several different layers of styling that can be opted
 into.


 # Layer 1

 The first layer is a consistent styling of all buttons, select controls, and
 tables, that are applied globally. You get this just by including the
 themes.scss file.


 # Layer 2

 The second layer is applied by adding the `body-sk` class to the <body> element
 of a page. This layer adds a large number of semantic CSS variables, whose names
 come from Material Design, that are to be used for styling elements. For
 example, if you have a panel that should look like a surface then it can be
 styled as:

     my-panel {
       background: var(--surface);
       color: var(--on-surface);
     }

 These semantic colors are supplied in two sets, one for light mode and another
 for dark mode. Dark mode is turned on by adding the `darkmode` class to an
 element, which triggers that element and all of its children to move to
 darkmode.

 The darkmode/lightmode is usually controlled via the `theme-chooser-sk` control
 which toggles the `darkmode` class on the body element and persists the user's
 choice in local storage.

 The `body-sk` class also adds more styling to many common elements such as
 buttons, links, and other elements-sk elements.

 The Material Design pallette was created from

   https://www.figma.com/community/plugin/1020820278641129628/Material-Theme-Builder-1P

 using these two colors as the seeds:

     primary: #005db7
     secondary: #006e1c

 And then translate all the CSS variables it provides into the CSS variables of
 the existing theme structure. For example: `--md-sys-color-primary-light`
 becomes `--primary`.

 An alternate source for the algorithms used to generate the color pallette are
 here:

     https://github.com/material-foundation/material-color-utilities

 # Layer 3

 The third layer is applied by adding the `font-sk` class to the body element of
 a page. This layer sets consistent font styling for a page, and adds `--font`
 and `--mono-font` CSS variables.

 To see all of the semantic names and their values working, along with and
 example elements in both dark and light mode, run:

     $ ./demopage.sh infra-sk/modules/theme-chooser-sk/

 You can use the theme-chooser-sk element on that demo page to toggle between
 dark and light modes.

 Most applications should use `app-sk` as their base element, so you can also run

    $ ./demopage.sh infra-sk/modules/app-sk/

 to see how these styles apply to title bars and sidebars.

 */

 @import '../elements-sk/modules/themes/themes';
 @import '../elements-sk/modules/styles/buttons';
 @import '../elements-sk/modules/styles/select';
 @import '../elements-sk/modules/styles/table';

 @import 'tokens';

 .body-sk {
   &.font-sk,
   & .font-sk {
     /* Typography */
     --font: Roboto, Arial, 'Bitstream Vera Sans', sans-serif;
     --mono-font: Roboto Mono, monospace;

     * {
       font-size: 14px;
       font-family: var(--font);
       box-sizing: border-box;
     }

     h1 {
       font-size: 20px;
       margin: 16px 0;
     }

     h2 {
       font-size: 18px;
       margin: 14px 0;
     }

     h3 {
       font-size: 16px;
       font-weight: 800;
       margin: 12px 0;
     }

     h4 {
       font-size: 14px;
       font-weight: 800;
       margin: 10px 0;
     }

     h5 {
       font-size: 12px;
       font-weight: 600;
       margin: 8px 0;
     }

     code,
     pre {
       font-family: var(--mono-font);
     }
   }

   .icon-sk {
     font-family: 'Material Symbols Outlined';
     font-weight: normal;
     font-style: normal;
     font-size: 20px;
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;
     display: inline-block;
     white-space: nowrap;
     word-wrap: normal;
     direction: ltr;
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
     width: 20px;
     height: 20px;
     overflow: hidden;
   }

   .large-icon-sk {
     @extend .icon-sk;
     font-size: 24px;
     width: 24px;
     height: 24px;
     overflow: hidden;
   }

   --transparent-overlay: rgba(0, 0, 0, 0.5);

   --failure-alpha: rgba(217, 95, 2, 0.8);
   --failure: rgb(217, 95, 2);
   --on-failure: var(--on-background);
   --on-success: var(--on-background);
   --on-warning: var(--on-background);
   --success-alpha: rgba(102, 166, 30, 0.3);
   --success: rgb(102, 166, 30);
   --warning-alpha: rgb(255, 171, 64, 0.8);
   --warning: rgb(255, 167, 38);
   --unexpected: rgb(117, 112, 179);
   --unexpected-alpha: rgba(117, 112, 179, 1);

   --positive: #4caf50;
   --negative: #f44336;
   --untriaged: #8d6e63;

   &.darkmode,
   & .darkmode {
     --transparent-overlay: rgba(255, 255, 255, 0.5);

     --on-failure: var(--on-surface);
     --on-success: var(--on-surface);
     --on-warning: var(--on-surface);
   }

   a:active,
   a:visited,
   a:link {
     color: var(--primary);
   }

   a:hover {
     /* Distinguish hovering over links. */
     color: var(--primary-variant);
   }

   .input-like,
   input {
     border: solid 1px var(--on-surface);
     color: solid 1px var(--on-surface);
     background: solid 1px var(--surface);
     display: inline-block;
   }

   .button-like,
   button {
     align-items: center;
     background: transparent;
     border-radius: 4px;
     border: solid 1px var(--outline);
     box-shadow: none;
     color: var(--primary);
     display: inline-flex;
     fill: var(--primary);
     font-size: 14px;
     height: 24px;
     justify-content: center;
     margin: 8px 2px;
     min-width: auto;
     padding: 0 12px;
     text-align: center;
     text-transform: none;

     .icon-sk {
       font-size: 20px;
     }

     svg {
       width: 20px;
       height: 20px;
     }
   }

   .button-like.large,
   button.large {
     height: 36px;
     padding: 0 18px;

     .icon-sk {
       font-size: 24px;
     }

     svg {
       width: 24px;
       height: 24px;
     }
   }

   .button-like:hover,
   button.hover,
   button:hover,
   .button-like:focus,
   button.focus,
   button:focus {
     opacity: 0.85;
     outline: none;
     background-color: var(--surface-1dp);
   }

   .button-like:disabled,
   button:disabled {
     opacity: 0.85;
     background: var(--on-disabled);
     color: var(--disabled);
     fill: var(--disabled);
   }

   .button-like-action,
   .button-like.action,
   button.action {
     color: var(--on-primary);
     fill: var(--on-primary);
     border: none;
     background-color: var(--primary);
   }

   .button-like.action:hover,
   button.action.hover,
   button.action:hover {
     @extend .button-like-action;
     opacity: 0.85;
   }

   .button-like.action:disabled,
   button.action.disabled,
   button.action:disabled {
     @extend .button-like-action;
     opacity: 0.85;
     background: var(--on-disabled);
     color: var(--disabled);
     fill: var(--disabled);
   }

   multi-select-sk:focus,
   select-sk:focus {
     outline: dashed 1px var(--on-surface);
     outline-offset: -4px;
   }

   multi-select-sk {
     border-radius: 4px;
     border: solid 1px var(--outline);
     background-color: var(--surface);
     color: var(--on-surface);
   }

   multi-select-sk > * {
     background-color: var(--surface);
     border: solid 1px var(--surface);
   }

   multi-select-sk > [selected] {
     background: var(--surface-2dp);
   }

   multi-select-sk > :hover {
     border: var(--surface-2dp) solid 1px;
   }

   select,
   select-sk {
     border-radius: 4px;
     border-color: var(--outline);
   }

   select-sk,
   select-sk > * {
     background-color: var(--surface);
     color: var(--on-surface);
   }

   select-sk > [selected] {
     background: var(--surface-2dp);
   }

   select-sk > * {
     border: var(--surface) solid 1px;
   }

   select-sk > :hover {
     border: var(--surface-2dp) solid 1px;
   }

   select-sk > :focus {
     background-color: var(--surface-2dp);
     transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
   }

   select-sk > [selected] {
     background-color: var(--surface-2dp);
   }

   error-toast-sk toast-sk {
     border-radius: 4px;
     background: var(--error-container);
     color: var(--on-error-container);
     fill: var(--on-error-container);
     padding: 8px;

     button {
       background: var(--error-container);
       color: var(--on-error-container);
       fill: var(--on-error-container);
     }
   }

   toast-sk {
     border-radius: 4px;
     color: var(--on-hightlight);
     fill: var(--on-hightlight);
     border: none;
     background-color: var(--primary-highlight);
   }

   error-toast-sk button {
     margin: 0 0 0 8px;
     padding: 4px;
   }

   tabs-sk {
     display: inline-flex;

     > button,
     > .button-like {
       border: none;
       border-bottom: solid 4px transparent;
       box-shadow: none;
       border-radius: 0;
       opacity: 0.85;
       margin-bottom: 0px;
       fill: var(--on-background);
       color: var(--on-background);
     }
     > button.selected,
     > .button-like.selected {
       border-bottom: solid 4px var(--primary);
       fill: var(--primary);
       color: var(--primary);
     }
   }

   tabs-panel-sk {
     margin-top: 0;
     border-top: solid 1px var(--on-background);
   }

   /*
   This styling makes the `summary` element in a `details` element look like a
   button. If `button` styles are updated then this styling should also be
   updated to match.
   */
   details {
     summary {
       @extend .button-like;
       cursor: pointer;
       list-style: none;
       margin: 8px 4px 8px 0;
     }

     summary::-webkit-details-marker {
       display: none;
     }

     summary:active {
       box-shadow: none;
       transition: box-shadow 0.2s ease-in;
     }
   }

   details[open] {
     border: solid 1px var(--on-surface);
     padding: 0 8px 16px 8px;
     background: var(--surface);
     margin: 8px 8px 8px 0;

     summary {
       margin-top: 8px;
       margin-bottom: 8px;
     }
   }

   details.expando {
     display: block;
     border: none;
     margin: 0 8px;
     padding: 8px;
     background-color: var(--surface-1dp);
     border-radius: 8px;

     summary {
       align-items: center;
       border: none;
       display: flex;
       font-weight: 500;
       justify-content: space-between;
       margin: 8px 0;
       padding: 0;
       border-radius: 0;

       expand-more-icon-sk {
         display: inline-block;
       }

       expand-less-icon-sk {
         display: none;
       }
     }
   }

   details.expando[open] {
     summary {
       expand-more-icon-sk {
         display: none;
       }

       expand-less-icon-sk {
         display: inline-block;
       }
     }
   }

   /*
      The following styles are for scrollbars. There are some non-standard
      looking styles because it is 2020 and there's still no standard way to
      style scrollbars on a web page.

      https://caniuse.com/#feat=css-scrollbar

      There is currently an editor's draft for styling scrollbars:
      https://drafts.csswg.org/css-scrollbars-1/, but it is only supported by
      FireFox. So set that first.
   */

   * {
     scrollbar-color: var(--surface-1dp) var(--background);
   }

   /* Turn on a 13x13 scrollbar */
   ::-webkit-scrollbar {
     width: 13px;
     height: 13px;
   }

   /* Turn off single button up on top and down on bottom */
   ::-webkit-scrollbar-button:start:decrement,
   ::-webkit-scrollbar-button:end:increment,
   ::-webkit-scrollbar-button:vertical:start:increment,
   ::-webkit-scrollbar-button:vertical:end:decrement {
     display: none;
   }

   /* Track below and above */
   ::-webkit-scrollbar-track-piece {
     background-color: var(--background);
     border: solid 1px var(--surface-2dp);
   }

   /* The thumb itself */
   ::-webkit-scrollbar-thumb {
     border: solid 1px var(--on-surface);
     background: var(--surface-1dp);
     border-radius: 4px;
     background: var(--primary);
     color: var(--on-primary);
   }

   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
     background: var(--secondary);
   }

   td {
     font-size: 100%;
   }

   th {
     font-size: 100%;
   }
 }
	/*

	//infra-sk/themes.scss is a common theme to be used across all Skia
	infrastructure applications so that we have a consistent look and feel.

	This file consists of several different layers of styling that can be opted
	into.


	# Layer 1

	The first layer is a consistent styling of all buttons, select controls, and
	tables, that are applied globally. You get this just by including the
	themes.scss file.


	# Layer 2

	The second layer is applied by adding the `body-sk` class to the <body> element
	of a page. This layer adds a large number of semantic CSS variables, whose names
	come from Material Design, that are to be used for styling elements. For
	example, if you have a panel that should look like a surface then it can be
	styled as:

	my-panel {
	background: var(--surface);
	color: var(--on-surface);
	}

	These semantic colors are supplied in two sets, one for light mode and another
	for dark mode. Dark mode is turned on by adding the `darkmode` class to an
	element, which triggers that element and all of its children to move to
	darkmode.

	The darkmode/lightmode is usually controlled via the `theme-chooser-sk` control
	which toggles the `darkmode` class on the body element and persists the user's
	choice in local storage.

	The `body-sk` class also adds more styling to many common elements such as
	buttons, links, and other elements-sk elements.

	The Material Design pallette was created from

	https://www.figma.com/community/plugin/1020820278641129628/Material-Theme-Builder-1P

	using these two colors as the seeds:

	primary: #005db7
	secondary: #006e1c

	And then translate all the CSS variables it provides into the CSS variables of
	the existing theme structure. For example: `--md-sys-color-primary-light`
	becomes `--primary`.

	An alternate source for the algorithms used to generate the color pallette are
	here:

	https://github.com/material-foundation/material-color-utilities

	# Layer 3

	The third layer is applied by adding the `font-sk` class to the body element of
	a page. This layer sets consistent font styling for a page, and adds `--font`
	and `--mono-font` CSS variables.

	To see all of the semantic names and their values working, along with and
	example elements in both dark and light mode, run:

	$ ./demopage.sh infra-sk/modules/theme-chooser-sk/

	You can use the theme-chooser-sk element on that demo page to toggle between
	dark and light modes.

	Most applications should use `app-sk` as their base element, so you can also run

	$ ./demopage.sh infra-sk/modules/app-sk/

	to see how these styles apply to title bars and sidebars.

	*/

	@import '../elements-sk/modules/themes/themes';
	@import '../elements-sk/modules/styles/buttons';
	@import '../elements-sk/modules/styles/select';
	@import '../elements-sk/modules/styles/table';

	@import 'tokens';

	.body-sk {
	&.font-sk,
	& .font-sk {
	/* Typography */
	--font: Roboto, Arial, 'Bitstream Vera Sans', sans-serif;
	--mono-font: Roboto Mono, monospace;

	* {
	font-size: 14px;
	font-family: var(--font);
	box-sizing: border-box;
	}

	h1 {
	font-size: 20px;
	margin: 16px 0;
	}

	h2 {
	font-size: 18px;
	margin: 14px 0;
	}

	h3 {
	font-size: 16px;
	font-weight: 800;
	margin: 12px 0;
	}

	h4 {
	font-size: 14px;
	font-weight: 800;
	margin: 10px 0;
	}

	h5 {
	font-size: 12px;
	font-weight: 600;
	margin: 8px 0;
	}

	code,
	pre {
	font-family: var(--mono-font);
	}
	}

	.icon-sk {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	width: 20px;
	height: 20px;
	overflow: hidden;
	}

	.large-icon-sk {
	@extend .icon-sk;
	font-size: 24px;
	width: 24px;
	height: 24px;
	overflow: hidden;
	}

	--transparent-overlay: rgba(0, 0, 0, 0.5);

	--failure-alpha: rgba(217, 95, 2, 0.8);
	--failure: rgb(217, 95, 2);
	--on-failure: var(--on-background);
	--on-success: var(--on-background);
	--on-warning: var(--on-background);
	--success-alpha: rgba(102, 166, 30, 0.3);
	--success: rgb(102, 166, 30);
	--warning-alpha: rgb(255, 171, 64, 0.8);
	--warning: rgb(255, 167, 38);
	--unexpected: rgb(117, 112, 179);
	--unexpected-alpha: rgba(117, 112, 179, 1);

	--positive: #4caf50;
	--negative: #f44336;
	--untriaged: #8d6e63;

	&.darkmode,
	& .darkmode {
	--transparent-overlay: rgba(255, 255, 255, 0.5);

	--on-failure: var(--on-surface);
	--on-success: var(--on-surface);
	--on-warning: var(--on-surface);
	}

	a:active,
	a:visited,
	a:link {
	color: var(--primary);
	}

	a:hover {
	/* Distinguish hovering over links. */
	color: var(--primary-variant);
	}

	.input-like,
	input {
	border: solid 1px var(--on-surface);
	color: solid 1px var(--on-surface);
	background: solid 1px var(--surface);
	display: inline-block;
	}

	.button-like,
	button {
	align-items: center;
	background: transparent;
	border-radius: 4px;
	border: solid 1px var(--outline);
	box-shadow: none;
	color: var(--primary);
	display: inline-flex;
	fill: var(--primary);
	font-size: 14px;
	height: 24px;
	justify-content: center;
	margin: 8px 2px;
	min-width: auto;
	padding: 0 12px;
	text-align: center;
	text-transform: none;

	.icon-sk {
	font-size: 20px;
	}

	svg {
	width: 20px;
	height: 20px;
	}
	}

	.button-like.large,
	button.large {
	height: 36px;
	padding: 0 18px;

	.icon-sk {
	font-size: 24px;
	}

	svg {
	width: 24px;
	height: 24px;
	}
	}

	.button-like:hover,
	button.hover,
	button:hover,
	.button-like:focus,
	button.focus,
	button:focus {
	opacity: 0.85;
	outline: none;
	background-color: var(--surface-1dp);
	}

	.button-like:disabled,
	button:disabled {
	opacity: 0.85;
	background: var(--on-disabled);
	color: var(--disabled);
	fill: var(--disabled);
	}

	.button-like-action,
	.button-like.action,
	button.action {
	color: var(--on-primary);
	fill: var(--on-primary);
	border: none;
	background-color: var(--primary);
	}

	.button-like.action:hover,
	button.action.hover,
	button.action:hover {
	@extend .button-like-action;
	opacity: 0.85;
	}

	.button-like.action:disabled,
	button.action.disabled,
	button.action:disabled {
	@extend .button-like-action;
	opacity: 0.85;
	background: var(--on-disabled);
	color: var(--disabled);
	fill: var(--disabled);
	}

	multi-select-sk:focus,
	select-sk:focus {
	outline: dashed 1px var(--on-surface);
	outline-offset: -4px;
	}

	multi-select-sk {
	border-radius: 4px;
	border: solid 1px var(--outline);
	background-color: var(--surface);
	color: var(--on-surface);
	}

	multi-select-sk > * {
	background-color: var(--surface);
	border: solid 1px var(--surface);
	}

	multi-select-sk > [selected] {
	background: var(--surface-2dp);
	}

	multi-select-sk > :hover {
	border: var(--surface-2dp) solid 1px;
	}

	select,
	select-sk {
	border-radius: 4px;
	border-color: var(--outline);
	}

	select-sk,
	select-sk > * {
	background-color: var(--surface);
	color: var(--on-surface);
	}

	select-sk > [selected] {
	background: var(--surface-2dp);
	}

	select-sk > * {
	border: var(--surface) solid 1px;
	}

	select-sk > :hover {
	border: var(--surface-2dp) solid 1px;
	}

	select-sk > :focus {
	background-color: var(--surface-2dp);
	transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
	}

	select-sk > [selected] {
	background-color: var(--surface-2dp);
	}

	error-toast-sk toast-sk {
	border-radius: 4px;
	background: var(--error-container);
	color: var(--on-error-container);
	fill: var(--on-error-container);
	padding: 8px;

	button {
	background: var(--error-container);
	color: var(--on-error-container);
	fill: var(--on-error-container);
	}
	}

	toast-sk {
	border-radius: 4px;
	color: var(--on-hightlight);
	fill: var(--on-hightlight);
	border: none;
	background-color: var(--primary-highlight);
	}

	error-toast-sk button {
	margin: 0 0 0 8px;
	padding: 4px;
	}

	tabs-sk {
	display: inline-flex;

	> button,
	> .button-like {
	border: none;
	border-bottom: solid 4px transparent;
	box-shadow: none;
	border-radius: 0;
	opacity: 0.85;
	margin-bottom: 0px;
	fill: var(--on-background);
	color: var(--on-background);
	}
	> button.selected,
	> .button-like.selected {
	border-bottom: solid 4px var(--primary);
	fill: var(--primary);
	color: var(--primary);
	}
	}

	tabs-panel-sk {
	margin-top: 0;
	border-top: solid 1px var(--on-background);
	}

	/*
	This styling makes the `summary` element in a `details` element look like a
	button. If `button` styles are updated then this styling should also be
	updated to match.
	*/
	details {
	summary {
	@extend .button-like;
	cursor: pointer;
	list-style: none;
	margin: 8px 4px 8px 0;
	}

	summary::-webkit-details-marker {
	display: none;
	}

	summary:active {
	box-shadow: none;
	transition: box-shadow 0.2s ease-in;
	}
	}

	details[open] {
	border: solid 1px var(--on-surface);
	padding: 0 8px 16px 8px;
	background: var(--surface);
	margin: 8px 8px 8px 0;

	summary {
	margin-top: 8px;
	margin-bottom: 8px;
	}
	}

	details.expando {
	display: block;
	border: none;
	margin: 0 8px;
	padding: 8px;
	background-color: var(--surface-1dp);
	border-radius: 8px;

	summary {
	align-items: center;
	border: none;
	display: flex;
	font-weight: 500;
	justify-content: space-between;
	margin: 8px 0;
	padding: 0;
	border-radius: 0;

	expand-more-icon-sk {
	display: inline-block;
	}

	expand-less-icon-sk {
	display: none;
	}
	}
	}

	details.expando[open] {
	summary {
	expand-more-icon-sk {
	display: none;
	}

	expand-less-icon-sk {
	display: inline-block;
	}
	}
	}

	/*
	The following styles are for scrollbars. There are some non-standard
	looking styles because it is 2020 and there's still no standard way to
	style scrollbars on a web page.

	https://caniuse.com/#feat=css-scrollbar

	There is currently an editor's draft for styling scrollbars:
	https://drafts.csswg.org/css-scrollbars-1/, but it is only supported by
	FireFox. So set that first.
	*/

	* {
	scrollbar-color: var(--surface-1dp) var(--background);
	}

	/* Turn on a 13x13 scrollbar */
	::-webkit-scrollbar {
	width: 13px;
	height: 13px;
	}

	/* Turn off single button up on top and down on bottom */
	::-webkit-scrollbar-button:start:decrement,
	::-webkit-scrollbar-button:end:increment,
	::-webkit-scrollbar-button:vertical:start:increment,
	::-webkit-scrollbar-button:vertical:end:decrement {
	display: none;
	}

	/* Track below and above */
	::-webkit-scrollbar-track-piece {
	background-color: var(--background);
	border: solid 1px var(--surface-2dp);
	}

	/* The thumb itself */
	::-webkit-scrollbar-thumb {
	border: solid 1px var(--on-surface);
	background: var(--surface-1dp);
	border-radius: 4px;
	background: var(--primary);
	color: var(--on-primary);
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	background: var(--secondary);
	}

	td {
	font-size: 100%;
	}

	th {
	font-size: 100%;
	}
	}