@primer/brand-css 0.0.0-20250212132611

package/components/VideoPlayer/VideoPlayer.css

@@ -0,0 +1,348 @@
+/* ---------------------------------------------------------- */
+/* VideoPlayer Contents                                       */
+/* ---------------------------------------------------------- */
+/* Table of contents:                                         */
+/* 1. Container                                               */
+/* 2. Player                                                  */
+/* 2. Center Play Button                                      */
+/* 4. Title                                                   */
+/* 5. Controls                                                */
+/* 6. Range Element                                           */
+/* 7. Tooltip                                                 */
+/* 8. Captions                                                */
+/* ---------------------------------------------------------- */
+
+/* ---------------------------------------------------------- */
+/* 1. Container                                               */
+/* ---------------------------------------------------------- */
+
+.VideoPlayer__container {
+  width: 100%;
+  position: relative;
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+/* ---------------------------------------------------------- */
+/* 2. Player                                                  */
+/* ---------------------------------------------------------- */
+
+.VideoPlayer {
+  width: 100%;
+  max-height: 100%;
+  display: block;
+}
+
+/* ---------------------------------------------------------- */
+/* 3. Center Play Button                                      */
+/* ---------------------------------------------------------- */
+
+.VideoPlayer__playButtonOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #00000033; /* TODO Use a token for this once v8 migration has been completed */
+  border: none;
+  z-index: 1;
+}
+
+.VideoPlayer__playButtonOverlay.VideoPlayer__playButtonOverlay--transparent {
+  background: transparent;
+}
+
+.VideoPlayer__playButtonOverlay:focus-visible {
+  outline: var(--brand-borderWidth-thicker) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-2);
+}
+
+.VideoPlayer__playButton {
+  width: 25%;
+  height: 25%;
+  max-width: var(--brand-VideoPlayer-playButton-width);
+  max-height: var(--brand-VideoPlayer-playButton-height);
+  opacity: 0.8;
+  color: var(--brand-videoPlayer-playButton-fgColor-rest);
+}
+
+/* ---------------------------------------------------------- */
+/* 4. Title                                                   */
+/* ---------------------------------------------------------- */
+
+.VideoPlayer__title {
+  transition: var(--brand-VideoPlayer-transition);
+  top: 0;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+  padding: var(--base-size-16);
+  color: var(--brand-videoPlayer-title-fgColor);
+  display: grid;
+  align-items: center;
+  justify-content: flex-start;
+  grid-gap: var(--base-size-12);
+  grid-template-columns: auto auto;
+  background: var(--brand-videoPlayer-title-bgColor);
+  transition: all var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
+}
+
+.VideoPlayer__title.VideoPlayer__title--hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* ---------------------------------------------------------- */
+/* 5. Controls                                                */
+/* ---------------------------------------------------------- */
+
+.VideoPlayer__controls {
+  transition: var(--brand-VideoPlayer-transition);
+  bottom: 0;
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 2s ease-in-out;
+}
+
+.VideoPlayer__controls--hidden {
+  opacity: 0;
+}
+
+.VideoPlayer__controlsBar {
+  display: flex;
+  gap: var(--base-size-16);
+  align-items: center;
+  border-bottom-right-radius: var(--brand-borderRadius-medium);
+  border-bottom-left-radius: var(--brand-borderRadius-medium);
+  left: 0;
+  width: 100%;
+  background: var(--brand-videoPlayer-controls-bgColor);
+  padding: var(--base-size-12) var(--base-size-16);
+  pointer-events: all;
+  opacity: 1;
+}
+
+.VideoPlayer__controlsBar--fade {
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+  opacity: 0;
+}
+
+.VideoPlayer__controls:focus,
+.VideoPlayer__controls:focus-within {
+  bottom: 0;
+}
+
+.VideoPlayer__controls:focus .VideoPlayer__controlsBar,
+.VideoPlayer__controls:focus-within .VideoPlayer__controlsBar {
+  opacity: 1;
+}
+
+.VideoPlayer__iconControl {
+  width: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  height: var(--base-size-24);
+  box-sizing: content-box;
+  position: relative;
+  padding: 0;
+}
+
+.VideoPlayer__iconControl:focus-visible {
+  border-color: var(--brand-color-focus);
+  outline: none;
+  box-shadow: 0 0 0 0.125rem var(--brand-color-focus);
+  opacity: 1;
+}
+
+.VideoPlayer__iconControl svg {
+  color: var(--brand-videoPlayer-controls-fgColor);
+}
+
+.VideoPlayer__iconControl:hover .VideoPlayer__tooltip {
+  opacity: 1;
+}
+
+.VideoPlayer__seek {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-16);
+}
+
+.VideoPlayer__progressTime {
+  color: var(--brand-videoPlayer-controls-fgColor);
+}
+
+.VideoPlayer__container--small .VideoPlayer__totalTime {
+  display: none;
+}
+
+.VideoPlayer__progressBar {
+  flex: 1;
+  height: var(--base-size-6);
+}
+
+.VideoPlayer__closedCaption {
+  border-radius: var(--brand-borderRadius-medium);
+  padding: 0.125rem var(--base-size-4);
+  border: 0.125rem solid var(--brand-videoPlayer-closedCaption-borderColor-enabled);
+  background: var(--brand-videoPlayer-closedCaption-bgColor-enabled);
+  position: relative;
+}
+
+.VideoPlayer__ccOff {
+  background-color: transparent;
+}
+
+.VideoPlayer__ccText {
+  color: var(--brand-videoPlayer-closedCaption-fgColor-enabled);
+}
+
+.VideoPlayer__ccOff .VideoPlayer__ccText {
+  color: var(--brand-videoPlayer-closedCaption-fgColor-disabled);
+}
+
+/* ---------------------------------------------------------- */
+/* 6. Range Element                                           */
+/* ---------------------------------------------------------- */
+.VideoPlayer__range {
+  position: relative;
+  width: 100%;
+  min-width: var(--brand-VideoPlayer-range-minWidth);
+  height: var(--brand-VideoPlayer-range-height);
+  background-color: var(--brand-videoPlayer-range-bgColor-default);
+  border-radius: var(--brand-VideoPlayer-range-borderRadius);
+}
+
+.VideoPlayer__range:hover .VideoPlayer__tooltip {
+  opacity: 1;
+}
+
+.VideoPlayer__rangeInput {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: var(--brand-VideoPlayer-range-height);
+  margin: 0;
+  cursor: pointer;
+  background: transparent;
+  position: absolute;
+  top: 0;
+  opacity: 0;
+}
+
+.VideoPlayer__rangeInput:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-4);
+  opacity: 1;
+}
+
+.VideoPlayer__range:hover .VideoPlayer__rangeInput {
+  opacity: 1;
+}
+
+.VideoPlayer__rangeInput::-moz-range-track,
+.VideoPlayer__rangeInput::-webkit-slider-runnable-track {
+  background: transparent;
+  border: none;
+}
+
+.VideoPlayer__rangeProgress {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--brand-VideoPlayer-range-borderRadius);
+  width: 100%;
+  position: absolute;
+  height: var(--brand-VideoPlayer-range-height);
+  top: 0;
+}
+
+.VideoPlayer__rangeProgress::-webkit-progress-bar {
+  background-color: var(--brand-videoPlayer-range-bgColor-default);
+}
+
+.VideoPlayer__rangeProgress::-webkit-progress-value {
+  background-color: var(--brand-videoPlayer-range-bgColor-progress);
+}
+
+.VideoPlayer__rangeProgress::-moz-progress-bar {
+  background: var(--brand-videoPlayer-range-bgColor-progress);
+}
+
+.VideoPlayer__rangeProgress::-ms-fill-lower {
+  background-color: var(--brand-videoPlayer-range-bgColor-progress);
+  border: none;
+}
+
+.VideoPlayer__rangeProgress::-ms-fill-upper {
+  background-color: var(--brand-videoPlayer-range-bgColor-default);
+  border: none;
+}
+
+/* ---------------------------------------------------------- */
+/* 7. Tooltip                                                 */
+/* ---------------------------------------------------------- */
+
+.VideoPlayer__tooltip {
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  z-index: 2;
+  width: var(--base-size-8);
+  height: var(--base-size-8);
+  margin-bottom: var(--base-size-16);
+  pointer-events: none;
+  opacity: 0;
+  transform: translate(-50%, 50%);
+  transition: transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.VideoPlayer__tooltip::before {
+  position: absolute;
+  bottom: calc(var(--base-size-4) * -1);
+  left: 0;
+  width: var(--base-size-12);
+  height: var(--base-size-12);
+  content: '';
+  background: var(--base-color-scale-white-0);
+  border-radius: var(--brand-borderRadius-small);
+  transform: rotate(45deg);
+}
+
+.VideoPlayer__tooltipContent {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  z-index: -1;
+  background: white;
+  box-shadow: 0 var(--base-size-4) var(--base-size-4) #1b1f2433;
+  transform: translate3d(-50%, 0, 0);
+  padding: var(--brand-VideoPlayer-tooltip-padding-block) var(--brand-VideoPlayer-tooltip-padding-inline);
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+.VideoPlayer__tooltipText {
+  color: var(--base-color-scale-gray-9);
+}
+
+.VideoPlayer__tooltip-visible {
+  opacity: 1;
+}
+
+.VideoPlayer__controlTextColor {
+  color: var(--base-color-scale-white-0);
+}
+
+.VideoPlayer__seekTime {
+  white-space: nowrap;
+}

package/components/VideoPlayer/components/Captions/Captions.css

@@ -0,0 +1,17 @@
+.Captions {
+  max-width: 80ch;
+  padding-inline: var(--base-size-16);
+  margin: var(--brand-VideoPlayer-closedCaption-margin);
+  display: grid;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.Captions__text {
+  color: var(--brand-VideoPlayer-closedCaption-text-fgColor);
+  text-align: center;
+  background: var(--brand-VideoPlayer-closedCaption-text-bgColor);
+  padding: var(--brand-VideoPlayer-closedCaption-text-padding);
+  border-radius: var(--brand-borderRadius-medium);
+  display: inline-block;
+}

package/components/VideoPlayer/components/VolumeControl/VolumeControl.css

@@ -0,0 +1,3 @@
+.VolumeControl {
+  max-width: 100px;
+}

package/components/animation/Animation.css

@@ -0,0 +1,192 @@
+.Animation {
+  transition: var(--brand-animation-transition-default);
+}
+
+/**
+ * Fade in
+ */
+.Animation--fade-in {
+  opacity: 0;
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Animation--fade-in.Animation--active {
+  opacity: 1;
+}
+
+/**
+ * Fade out
+ */
+.Animation--fade-out {
+  opacity: 1;
+}
+
+.Animation--fade-out.Animation--active {
+  opacity: 0;
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+/**
+ * Slide in up
+ */
+.Animation--slide-in-up {
+  opacity: 0;
+  transform: translateY(var(--brand-animation-variant-slideInUp-distance));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Animation--slide-in-up.Animation--active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/**
+ * Slide in down
+ */
+.Animation--slide-in-down {
+  opacity: 0;
+  transform: translateY(var(--brand-animation-variant-slideInDown-distance));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Animation--slide-in-down.Animation--active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/**
+ * Slide in left
+ */
+.Animation--slide-in-left {
+  opacity: 0;
+  transform: translateX(var(--brand-animation-variant-slideInLeft-distance));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Animation--slide-in-left.Animation--active {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/**
+ * Slide in right
+ */
+.Animation--slide-in-right {
+  opacity: 0;
+  transform: translateX(var(--brand-animation-variant-slideInRight-distance));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Animation--slide-in-right.Animation--active {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/**
+ * Scale in
+ */
+.Animation--scale-in {
+  opacity: 0;
+  transform: scale(var(--brand-animation-variant-scaleIn-start));
+  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+}
+
+.Animation--scale-in.Animation--active {
+  opacity: 1;
+  transform: scale(--brand-animation-variant-scaleIn-end);
+}
+
+/**
+ * Scale in up
+ */
+.Animation--scale-in-up {
+  opacity: 0;
+  transform: scale(var(--brand-animation-variant-scaleInUp-start))
+    translateY(var(--brand-animation-variant-scaleInUp-distance));
+  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+}
+
+.Animation--scale-in-up.Animation--active {
+  opacity: 1;
+  transform: scale(var(--brand-animation-variant-scaleInUp-end)) translateY(0);
+}
+
+/**
+ * Scale in down
+ */
+.Animation--scale-in-down {
+  opacity: 0;
+  transform: translateY(var(--brand-animation-variant-scaleInDown-distance))
+    scale(var(--brand-animation-variant-scaleInDown-start));
+  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+}
+
+.Animation--scale-in-down.Animation--active {
+  opacity: 1;
+  transform: translateY(0) scale(var(--brand-animation-variant-scaleInDown-end));
+}
+
+/**
+ * Scale in right
+ */
+.Animation--scale-in-right {
+  opacity: 0;
+  transform: scale(var(--brand-animation-variant-scaleInRight-start))
+    translateX(var(--brand-animation-variant-scaleInRight-distance));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Animation--scale-in-right.Animation--active {
+  opacity: 1;
+  transform: translateX(0) scale(var(--brand-animation-variant-scaleInRight-end));
+}
+
+/**
+ * Scale in left
+ */
+.Animation--scale-in-left {
+  opacity: 0;
+  transform: scale(var(--brand-animation-variant-scaleInLeft-start))
+    translateX(var(--brand-animation-variant-scaleInLeft-distance));
+  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+}
+
+.Animation--scale-in-left.Animation--active {
+  opacity: 1;
+  transform: translateX(0) scale(var(--brand-animation-variant-scaleInLeft-end));
+}
+
+/**
+ * Fill in right
+ */
+.Animation--fill-in-right {
+  transform-origin: left;
+  transform: scaleX(0);
+  transition: transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Animation--fill-in-right.Animation--active {
+  transform: scaleX(1);
+}
+
+/**
+ * Scale in top
+ */
+.Animation--fill-in-top {
+  transform-origin: top;
+  transform: scaleY(0);
+  transition: transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+}
+
+.Animation--fill-in-top.Animation--active {
+  transform: scaleY(1);
+}

package/components/animation/TextRevealAnimation/TextRevealAnimation.css

@@ -0,0 +1,38 @@
+@keyframes wipe {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+.TextRevealAnimation {
+  opacity: 0;
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.TextRevealAnimation--visible {
+  opacity: 1;
+}
+
+.TextRevealAnimation,
+.TextRevealAnimation--animated {
+  width: 100%;
+  min-height: 1lh;
+  position: relative;
+}
+
+.TextRevealAnimation--animated::after {
+  content: '';
+  display: inline;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--brand-color-accent-primary);
+  transform-origin: right;
+  animation: wipe var(--brand-animation-duration-extended) forwards var(--brand-animation-easing-default);
+  animation-delay: var(--animation-delay);
+}

package/components/forms/Checkbox/Checkbox.css

@@ -0,0 +1,88 @@
+/*
+ * Default Checkbox styles
+ */
+.Checkbox-wrapper {
+  position: relative;
+  grid-row: 1;
+}
+
+.Checkbox {
+  align-items: center;
+  background-color: var(--brand-control-checkbox-bg-default);
+  border: solid var(--brand-borderWidth-thick, 1px) var(--brand-control-color-border-default);
+  border-radius: var(--brand-borderRadius-small);
+  cursor: pointer;
+  display: inline-flex;
+  height: 20px;
+  justify-content: center;
+  margin: 3px 0; /* mimic default browser-applied vertical margin */
+  transition: all 0.35s ease-out;
+  width: 20px;
+  outline: 1px solid var(--brand-control-checkbox-bg-default);
+  box-shadow: 0 0 0 3px transparent;
+}
+
+/**
+ * Checkbox native input - visually hidden
+ */
+.Checkbox-input {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.Checkbox-checkmark {
+  height: 16px;
+  width: 16px;
+}
+
+.Checkbox-checkmark-path {
+  stroke: var(--brand-color-focus);
+  stroke-dashoffset: 111.46px;
+  stroke-dasharray: 111.46px;
+  transition: all 350ms var(--brand-control-animation-easing);
+}
+
+/*
+* Checked state
+*/
+
+.Checkbox-input:checked + .Checkbox,
+.Checkbox--indeterminate {
+  background: var(--brand-control-checkbox-bg-checked);
+  border-color: var(--brand-control-checkbox-border-checked);
+}
+
+.Checkbox--indeterminate .Checkbox-checkmark {
+  fill: var(--brand-control-checkbox-fg-checked);
+}
+
+.Checkbox-input:checked + .Checkbox .Checkbox-checkmark-path,
+.Checkbox--indeterminate .Checkbox-checkmark-path {
+  stroke: var(--brand-control-checkbox-fg-checked);
+  stroke-dashoffset: 0;
+}
+
+.Checkbox-input:focus + .Checkbox {
+  box-shadow: 0 0 0 3px var(--brand-color-focus);
+}
+
+/* TODO: Check with a11y team */
+.Checkbox-input:checked:focus + .Checkbox,
+.Checkbox-input:focus + .Checkbox--indeterminate {
+  border-color: var(--brand-control-checkbox-border-checked);
+}
+
+.Checkbox-input[disabled] + .Checkbox,
+.Checkbox-input[disabled]:checked + .Checkbox {
+  -webkit-text-fill-color: var(--brand-control-color-fg-disabled);
+  color: var(--brand-control-color-fg-disabled);
+  cursor: not-allowed;
+  background-color: var(--brand-control-checkbox-bg-disabled);
+  border-color: var(--brand-control-color-border-disabled);
+  opacity: 1;
+}