Are we Design Tokens yet?

browser/themes/shared/smartwindowGroupTabs.css

Propagation: 34.43%

Back to Home

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Smart Window "Group my tabs" panels. These are chrome-side XUL <panel>s
 * (built in AutoTabGrouping.sys.mjs) that host HTML content styled through the
 * swgt- ("smart window group tabs") class namespace.
 *
 * The colors below are placeholder light-theme values; they will be replaced
 * with design tokens and light-dark() support alongside the Fluent/theming
 * follow-up. */
/* stylelint-disable stylelint-plugin-mozilla/use-design-tokens -- placeholder light-theme colors, tokenized in a follow-up */

#smartwindow-group-tabs-panel,
#smartwindow-group-tabs-flyout {
  --panel-padding: 0;
  --panel-background-color: transparent;
  --panel-border-color: transparent;
  --panel-box-shadow: none;
  --panel-border-radius: var(--border-radius-large);
  -moz-theme: non-native;
  -moz-window-shadow: none;
  background-color: transparent;
}

.swgt-card,
.swgt-flyout {
  --swgt-text: #1c1b22;
  --swgt-text-dim: #5b5b66;
  --swgt-card-bg: #ffffff;
  --swgt-divider: rgba(0, 0, 0, 0.09);
  --swgt-hover: rgba(120, 90, 220, 0.08);
  background: var(--swgt-card-bg);
  color: var(--swgt-text);
  border: var(--border-width) solid var(--swgt-divider);
  border-radius: var(--border-radius-large);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font: menu;
}

.swgt-card {
  width: 340px;
  padding: var(--space-small);
}

.swgt-flyout {
  width: 300px;
}

.swgt-header {
  margin-block: 0;
  margin-inline: calc(-1 * var(--space-small));
  padding-block: 18px;
  padding-inline: 20px;
  font-size: 1.25em;
  font-weight: 700;
  text-align: center;
  border-block-end: var(--border-width) solid var(--swgt-divider);
}

.swgt-section {
  padding-block: var(--space-medium) var(--space-xsmall);
  padding-inline: 20px;
  font-size: 0.82em;
  color: var(--swgt-text-dim);
}

.swgt-row {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  text-align: start;
  box-sizing: border-box;
  width: 100%;
  padding-block: var(--space-medium);
  --swgt-row-padding-inline: 20px;
  padding-inline: var(--swgt-row-padding-inline);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-medium);
  font: inherit;
  border-radius: calc(var(--border-radius-medium) * 1.5);
}

@media (prefers-reduced-motion: no-preference) {
  .swgt-row {
    transition: padding-inline 150ms var(--animation-easing-function);
  }
}

.swgt-row:hover,
.swgt-row.is-active {
  background: var(--swgt-hover);
}

.swgt-row:not(.swgt-create-all):not(.swgt-undo-last):hover,
.swgt-row:not(.swgt-create-all):not(.swgt-undo-last).is-active {
  padding-inline: calc(var(--swgt-row-padding-inline) + var(--space-small));
}

/* The card takes programmatic focus when the panel opens (to move screen-reader
 * focus into the dialog); it is not a keyboard stop, so it shows no ring. The
 * controls inside it do. */
.swgt-card:focus-visible {
  outline: none;
}

.swgt-row:focus-visible,
.swgt-flyout-header:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-inset);
}

.swgt-create-all {
  font-size: 1.1em;
  padding-block: var(--space-large);
  padding-inline: calc(var(--swgt-row-padding-inline) + var(--space-small));
  margin-inline: calc(-1 * var(--space-small));
  width: auto;
  border-radius: 0;
  border-block-end: var(--border-width) solid var(--swgt-divider);
}

.swgt-row-label {
  flex: 1;
  min-width: 0;
  font-size: 1.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swgt-chevron {
  color: var(--swgt-text-dim);
  opacity: 0.7;
  flex: none;
}

.swgt-tiles {
  display: flex;
  flex: none;
}

.swgt-tile {
  width: var(--size-item-small);
  height: var(--size-item-small);
  border-radius: var(--border-radius-small);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* Overlap the row's preview tiles, leftmost on top. */
.swgt-tiles > .swgt-tile {
  position: relative;
}

.swgt-tiles > .swgt-tile:not(:first-child) {
  margin-inline-start: -5px;
}

.swgt-tiles > .swgt-tile:nth-child(1) {
  z-index: 2;
}

.swgt-tiles > .swgt-tile:nth-child(2) {
  z-index: 1;
}

.swgt-dot {
  width: 11px;
  height: 11px;
  border-radius: var(--border-radius-circle);
  flex: none;
}

.swgt-message {
  padding-block: 26px;
  padding-inline: 20px;
  color: var(--swgt-text-dim);
  text-align: center;
}

.swgt-flyout-header {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  width: 100%;
  text-align: start;
  padding-block: var(--space-large) var(--space-medium);
  padding-inline: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxsmall);
  border-block-end: var(--border-width) solid var(--swgt-divider);
}

.swgt-flyout-header:hover {
  background: var(--swgt-hover);
}

.swgt-flyout-title {
  display: flex;
  align-items: center;
  gap: var(--space-small);
  font-size: 1.1em;
  font-weight: 700;
}

.swgt-flyout-subtitle {
  color: var(--swgt-text-dim);
  font-size: 0.9em;
  padding-inline-start: 19px;
}

.swgt-flyout-list {
  padding-block: 6px;
  padding-inline: 0;
}

.swgt-flyout-tab {
  display: flex;
  align-items: center;
  gap: var(--space-medium);
  padding-block: var(--space-small);
  padding-inline: 18px;
}

.swgt-flyout-tab-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Back to Home