@primer/css 0.0.0-20220120204717 → 0.0.0-20220122001652

package/button-refactor/button.scss

@@ -1,249 +0,0 @@
-// base button
-.Button {
-  position: relative;
-  font-size: $body-font-size;
-  font-weight: $font-weight-semibold;
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: $border-width $border-style;
-  border-color: transparent;
-  border-radius: $border-radius;
-  color: var(--color-btn-text);
-  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  transition-property: color, background-color, border-color;
-  text-align: center;
-  height: 32px;
-  padding: 0 16px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: $spacer-2;
-
-  // mobile friendly sizing
-  @media (pointer: course) {
-    &::before {
-      @include minTouchTarget(48px, 48px);
-    }
-  }
-
-  // base states
-
-  &:hover,
-  [open] > & {
-    transition-duration: 0.1s;
-  }
-
-  &:active,
-  &.Button--active {
-    transition: none;
-  }
-
-  &:disabled,
-  &.Button--disabled,
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-    box-shadow: none;
-  }
-
-  &:focus {
-    @include focusOutline;
-  }
-}
-
-// wrap grid content to allow trailingAction to lock-right
-.Button-content {
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: 'leadingVisual text trailingVisual';
-  grid-template-columns: min-content minmax(0, auto) min-content;
-  align-items: center;
-
-  > :not(:last-child) {
-    margin-right: $spacer-2;
-  }
-}
-
-// center child elements for fullWidth
-.Button-content--visualFixed {
-  place-content: center;
-}
-
-// button child elements
-
-// align svg
-.Button-visual {
-  display: flex;
-}
-
-.Button-label {
-  grid-area: text;
-  white-space: nowrap;
-}
-
-.Button-leadingVisual {
-  grid-area: leadingVisual;
-}
-
-.Button-trailingVisual {
-  grid-area: trailingVisual;
-}
-
-.Button-trailingAction {
-  margin-right: -8px;
-}
-
-// sizes
-
-.Button--small {
-  height: 28px;
-  font-size: $font-size-small;
-}
-
-.Button--large {
-  height: 44px;
-}
-
-.Button--fullWidth {
-  width: 100%;
-}
-
-// variants
-
-// primary
-.Button--primary {
-  color: var(--color-btn-primary-text);
-  fill: var(--color-btn-primary-icon);
-  background-color: var(--color-btn-primary-bg);
-  border-color: var(--color-btn-primary-border);
-  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
-
-  &:hover,
-  [open] > & {
-    background-color: var(--color-btn-primary-hover-bg);
-    border-color: var(--color-btn-primary-hover-border);
-  }
-
-  &:active,
-  &[aria-pressed='true'],
-  &.Button--pressed {
-    background-color: var(--color-btn-primary-selected-bg);
-    box-shadow: var(--color-btn-primary-selected-shadow);
-  }
-
-  &:disabled,
-  &.Button--disabled,
-  &[aria-disabled='true'] {
-    color: var(--color-btn-primary-disabled-text);
-    background-color: var(--color-btn-primary-disabled-bg);
-    border-color: var(--color-btn-primary-disabled-border);
-    fill: var(--color-btn-primary-disabled-text);
-  }
-}
-
-// default (secondary)
-.Button--secondary {
-  color: var(--color-btn-text);
-  fill: var(--color-fg-muted); // help this
-  background-color: var(--color-btn-bg);
-  border: $border-width $border-style;
-  border-color: var(--color-btn-border);
-  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-
-  &:hover,
-  [open] > & {
-    background-color: var(--color-btn-hover-bg);
-    border-color: var(--color-btn-hover-border);
-  }
-
-  &:active,
-  &.Button--active {
-    background-color: var(--color-btn-active-bg);
-    border-color: var(--color-btn-active-border);
-  }
-
-  &[aria-pressed='true'],
-  &.Button--pressed {
-    background-color: var(--color-btn-selected-bg);
-    box-shadow: var(--color-primer-shadow-inset);
-  }
-
-  &:disabled,
-  &.Button--disabled,
-  &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-btn-bg);
-    border-color: var(--color-btn-border);
-    fill: var(--color-primer-fg-disabled);
-  }
-}
-
-.Button--invisible {
-  color: var(--color-btn-outline-text);
-  fill: var(--color-btn-outline-text);
-  background-color: var(--color-canvas-default);
-  border: $border-width $border-style;
-  border-color: var(--color-canvas-default);
-
-  &:hover,
-  [open] > & {
-    background-color: var(--color-btn-hover-bg);
-    border-color: var(--color-btn-hover-bg);
-  }
-
-  &[aria-pressed='true'],
-  &:active,
-  &.Button--active,
-  &.Button--pressed {
-    background-color: var(--color-btn-selected-bg);
-    box-shadow: var(--color-primer-shadow-inset);
-  }
-
-  &:disabled,
-  &.Button--disabled,
-  &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-btn-bg);
-    border-color: var(--color-btn-border);
-    fill: var(--color-primer-fg-disabled);
-  }
-}
-
-// danger
-.Button--danger {
-  color: var(--color-btn-danger-text);
-  fill: var(--color-btn-danger-icon);
-  background-color: var(--color-btn-bg);
-  border: $border-width $border-style;
-  border-color: var(--color-btn-border);
-  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-
-  &:hover,
-  [open] > & {
-    color: var(--color-btn-danger-hover-text);
-    fill: var(--color-btn-danger-hover-text);
-    background-color: var(--color-btn-danger-hover-bg);
-    border-color: var(--color-btn-danger-hover-border);
-    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
-  }
-
-  &:active,
-  &[aria-pressed='true'],
-  &.Button--pressed {
-    color: var(--color-btn-danger-selected-text);
-    fill: var(--color-btn-danger-selected-text);
-    background-color: var(--color-btn-danger-selected-bg);
-    border-color: var(--color-btn-danger-selected-border);
-    box-shadow: var(--color-btn-danger-selected-shadow);
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled='true'] {
-    color: var(--color-btn-danger-disabled-text);
-    fill: var(--color-btn-danger-disabled-text);
-    background-color: var(--color-btn-danger-disabled-bg);
-    border-color: var(--color-btn-border);
-  }
-}

package/button-refactor/icon-button.scss

@@ -1,14 +0,0 @@
-.Button--iconOnly {
-  display: grid;
-  place-content: center;
-  padding: unset;
-  width: 32px;
-
-  &.Button--small {
-    width: 28px;
-  }
-
-  &.Button--large {
-    width: 44px;
-  }
-}

package/button-refactor/link-styled-as-button.scss

@@ -1,75 +0,0 @@
-// base link
-.LinkStyledAsButton {
-  @extend .Button;
-  display: inline-flex;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.LinkStyledAsButton-content {
-  @extend .Button-content;
-}
-
-.LinkStyledAsButton-content--visualFixed {
-  @extend .Button-content--visualFixed;
-}
-
-// link child elements
-
-.LinkStyledAsButton-visual {
-  @extend .Button-visual;
-}
-
-.LinkStyledAsButton-label {
-  @extend .Button-label;
-}
-
-.LinkStyledAsButton-leadingVisual {
-  @extend .Button-leadingVisual;
-}
-
-.LinkStyledAsButton-trailingVisual {
-  @extend .Button-trailingVisual;
-}
-
-.LinkStyledAsButton-trailingAction {
-  @extend .Button-trailingAction;
-}
-
-// sizes
-
-.LinkStyledAsButton--small {
-  @extend .Button--small;
-}
-
-.LinkStyledAsButton--large {
-  @extend .Button--large;
-}
-
-.LinkStyledAsButton--fullWidth {
-  @extend .Button--fullWidth;
-}
-
-// variants
-
-// primary
-.LinkStyledAsButton--primary {
-  @extend .Button--primary;
-}
-
-// default (secondary)
-.LinkStyledAsButton--secondary {
-  @extend .Button--secondary;
-}
-
-// invisible
-.LinkStyledAsButton--invisible {
-  @extend .Button--invisible;
-}
-
-// danger
-.LinkStyledAsButton--danger {
-  @extend .Button--danger;
-}

package/button-refactor/link.scss

@@ -1,25 +0,0 @@
-.Link {
-  color: var(--color-accent-fg);
-
-  &:hover {
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-  // variants
-
-  &.Link--muted {
-    color: var(--color-fg-muted);
-
-    &:hover {
-      color: var(--color-accent-fg);
-    }
-  }
-}
-
-.Link-trailingVisual {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-}