@thl-ui/styles 0.0.0-stage → 0.1.0

package/src/components/_badge.scss

@@ -0,0 +1,112 @@
+@use '../mixins' as *;
+
+.#{$p}-badge {
+  --_bg: #{v(color-default)};
+  --_fg: #{v(text-strong)};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 7px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+  color: var(--_fg);
+  background: var(--_bg);
+  border-radius: v(radius-pill);
+  @each $c in $colors {
+    @if $c != 'default' {
+      &--#{$c} {
+        --_bg: #{v(color-#{$c})};
+        --_fg: #{on($c)};
+      }
+    }
+  }
+  &--size-xs {
+    font-size: 9px;
+    height: 14px;
+    min-width: 14px;
+    padding: 0 4px;
+  }
+  &--size-sm {
+    font-size: 11px;
+    height: 18px;
+    min-width: 18px;
+    padding: 0 5px;
+  }
+  &--dot {
+    width: 10px;
+    height: 10px;
+    min-width: 0;
+    padding: 0;
+  }
+  &--square {
+    border-radius: v(radius-sm);
+  }
+}
+.#{$p}-badge-wrap {
+  position: relative;
+  display: inline-flex;
+  > .#{$p}-badge {
+    position: absolute;
+    top: -6px;
+    inset-inline-end: -8px;
+    border: 2px solid v(surface);
+  }
+}
+
+/* label (inline tag, optional rounded) */
+.#{$p}-label {
+  --_bg: #{v(color-default)};
+  --_fg: #{v(text-strong)};
+  display: inline-block;
+  padding: 4px 12px 3px;
+  font-size: 75%;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  line-height: 1.4;
+  color: var(--_fg);
+  background: var(--_bg);
+  border: 1px solid var(--_bg);
+  border-radius: v(radius-sm);
+  white-space: nowrap;
+  @each $c in $colors {
+    @if $c != 'default' {
+      &--#{$c} {
+        --_bg: #{v(color-#{$c})};
+        --_fg: #{on($c)};
+        --_tx: #{tx($c)};
+      }
+    }
+  }
+  &--white {
+    --_bg: #fff;
+    --_fg: #{v(text-strong)};
+  }
+  &--rounded {
+    border-radius: v(radius-pill);
+    padding: 4px 16px 3px;
+  }
+  &--outline {
+    background: transparent;
+    color: var(--_tx, var(--_fg));
+  }
+  &--outline.#{$p}-label--default {
+    color: v(text-strong);
+  }
+  &__close {
+    margin-inline-start: 6px;
+    background: none;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    font-size: 1.1em;
+    line-height: 1;
+    opacity: 0.7;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}

package/src/components/_button.scss

@@ -0,0 +1,242 @@
+@use '../mixins' as *;
+
+.#{$p}-btn {
+  --_bg: #{v(color-default)};
+  --_fg: #{v(text-strong)};
+  --_tx: #{v(text-strong)};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: v(control-height);
+  padding: 0 16px;
+  font: inherit;
+  font-size: v(font-size);
+  font-weight: 400;
+  line-height: 1;
+  color: var(--_fg);
+  background: var(--_bg);
+  border: 2px solid var(--_bg);
+  border-radius: v(radius);
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  transition:
+    opacity v(transition),
+    background v(transition),
+    color v(transition),
+    box-shadow v(transition);
+  &:hover {
+    opacity: 0.85;
+    color: var(--_fg);
+  }
+  &:active {
+    transform: translateY(1px);
+  }
+  &:disabled,
+  &.is-disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  @each $c in $colors {
+    @if $c != 'default' {
+      &--#{$c} {
+        --_bg: #{v(color-#{$c})};
+        --_fg: #{on($c)};
+        --_tx: #{tx($c)};
+      }
+    }
+  }
+  &--link {
+    --_bg: transparent;
+    --_fg: #{v(link)};
+    --_tx: #{v(link)};
+    border-color: transparent;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &--outline {
+    background: transparent;
+    color: var(--_tx);
+    transition: all 0.3s;
+    &:hover {
+      background: var(--_bg);
+      color: var(--_fg);
+      opacity: 1;
+    }
+  }
+  &--outline.#{$p}-btn--default {
+    color: v(text-strong);
+  }
+
+  &--rounded {
+    border-radius: v(radius-pill);
+  }
+  &--circle {
+    border-radius: 50%;
+    padding: 0;
+    width: v(control-height);
+  }
+  &--block {
+    display: flex;
+    width: 100%;
+  }
+
+  &--size-xs {
+    height: 24px;
+    padding: 0 8px;
+    font-size: 12px;
+  }
+  &--size-sm {
+    height: v(control-height-sm);
+    padding: 0 12px;
+    font-size: 13px;
+  }
+  &--size-lg {
+    height: v(control-height-lg);
+    padding: 0 20px;
+    font-size: 16px;
+  }
+  &--size-xl {
+    height: 56px;
+    padding: 0 28px;
+    font-size: 18px;
+  }
+  &--circle {
+    &.#{$p}-btn--size-xs,
+    &.#{$p}-btn--size-sm,
+    &.#{$p}-btn--size-lg,
+    &.#{$p}-btn--size-xl {
+      padding: 0;
+    }
+  }
+  &--circle.#{$p}-btn--size-xs {
+    width: 24px;
+  }
+  &--circle.#{$p}-btn--size-sm {
+    width: v(control-height-sm);
+  }
+  &--circle.#{$p}-btn--size-lg {
+    width: 50px;
+    height: 50px;
+    font-size: 20px;
+  }
+  &--circle.#{$p}-btn--size-xl {
+    width: 70px;
+    height: 70px;
+    font-size: 24px;
+  }
+
+  // social brands
+  // brand colours; twitter/skype are light so they take dark ink, the rest darkened slightly where needed for AA
+  $social: (
+    facebook: #3b5998,
+    twitter: #55acee,
+    googleplus: #c9402e,
+    linkedin: #007bb6,
+    dribbble: #c7286a,
+    instagram: #3f729b,
+    pinterest: #cb2027,
+    youtube: #bb0000,
+    github: #171515,
+    skype: #00aff0,
+    dropbox: #0071d1,
+    tumblr: #32506d,
+  );
+  $social-dark-ink: (twitter, skype);
+  @each $name, $c in $social {
+    &--#{$name} {
+      --_bg: #{$c};
+      --_fg: #fff;
+      --_tx: #{$c};
+    }
+  }
+  @each $name in $social-dark-ink {
+    &--#{$name} {
+      --_fg: #1d2326;
+    }
+  }
+
+  &__label {
+    background: rgba(0, 0, 0, 0.08);
+    align-self: stretch;
+    display: inline-flex;
+    align-items: center;
+    margin-inline: -16px 6px;
+    padding: 0 12px;
+  }
+  &__icon {
+    display: inline-flex;
+    font-size: 1.1em;
+  }
+  &__spinner {
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: #{$p}-spin 0.7s linear infinite;
+  }
+  &.is-loading {
+    pointer-events: none;
+  }
+
+  // ripple effect
+  &__ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.4);
+    transform: scale(0);
+    animation: #{$p}-ripple 0.6s linear;
+    pointer-events: none;
+  }
+}
+@keyframes #{$p}-ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.#{$p}-btn-group {
+  display: inline-flex;
+  vertical-align: middle;
+  > .#{$p}-btn:not(:first-child) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    margin-inline-start: -2px;
+  }
+  > .#{$p}-btn:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  &--vertical {
+    flex-direction: column;
+    > .#{$p}-btn {
+      border-radius: 0 !important;
+      margin: -2px 0 0 !important;
+    }
+    > .#{$p}-btn:first-child {
+      border-start-start-radius: v(radius) !important;
+      border-start-end-radius: v(radius) !important;
+      margin-top: 0 !important;
+    }
+    > .#{$p}-btn:last-child {
+      border-end-start-radius: v(radius) !important;
+      border-end-end-radius: v(radius) !important;
+    }
+  }
+  &--justified {
+    display: flex;
+    > .#{$p}-btn {
+      flex: 1;
+    }
+  }
+}

package/src/components/_card.scss

@@ -0,0 +1,211 @@
+@use '../mixins' as *;
+
+/* card */
+.#{$p}-card {
+  background: v(surface);
+  border: 1px solid v(border-color);
+  border-radius: v(radius);
+  margin-bottom: v(space-7);
+  position: relative;
+  min-width: 0;
+  &--shadow {
+    box-shadow: v(shadow-sm);
+  }
+  &--borderless {
+    border-color: transparent;
+  }
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: v(space-3);
+    padding: 20px 25px 0;
+    flex-wrap: wrap;
+  }
+  &__title {
+    margin: 0 !important;
+    font-weight: 400;
+    font-size: v(h3) !important;
+    line-height: 30px !important;
+    color: v(heading);
+    text-transform: none;
+  }
+  &__subtitle {
+    margin: 4px 0 0;
+    font-size: 13px;
+    color: v(text);
+  }
+  &__actions {
+    display: flex;
+    gap: v(space-2);
+    align-items: center;
+  }
+  &__body {
+    padding: 25px;
+  }
+  &__header + &__body {
+    padding-top: 20px;
+  }
+  &--flush &__body {
+    padding: 0;
+  }
+  &__footer {
+    padding: 15px 25px;
+    border-top: 1px solid v(border-color);
+  }
+  &__media img {
+    display: block;
+    width: 100%;
+    border-start-start-radius: v(radius);
+    border-start-end-radius: v(radius);
+  }
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* .panel */
+.#{$p}-panel {
+  --_c: #{v(surface-muted)};
+  --_fg: #{v(heading)};
+  background: v(surface);
+  border: 1px solid v(border-color);
+  border-radius: v(radius);
+  margin-bottom: v(space-7);
+  overflow: hidden;
+  position: relative;
+  @each $c in $colors {
+    @if $c != 'default' {
+      &--#{$c} {
+        --_c: #{v(color-#{$c})};
+        --_fg: #{on($c)};
+        border-color: v(color-#{$c});
+      }
+    }
+  }
+  &__heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: v(space-3);
+    padding: 15px 25px;
+    background: var(--_c);
+    color: var(--_fg);
+    font-weight: 600;
+    font-size: 15px;
+    text-transform: uppercase;
+    border-bottom: 1px solid v(border-color);
+  }
+  &--primary &__heading,
+  &--success &__heading,
+  &--info &__heading,
+  &--warning &__heading,
+  &--danger &__heading,
+  &--inverse &__heading,
+  &--purple &__heading,
+  &--dark &__heading,
+  &--red &__heading {
+    border-bottom-color: transparent;
+  }
+  &__actions {
+    display: flex;
+    gap: 10px;
+    button {
+      background: none;
+      border: 0;
+      color: inherit;
+      cursor: pointer;
+      padding: 2px;
+      font-size: 16px;
+      opacity: 0.8;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+  &__wrapper {
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows 0.3s ease;
+    > * {
+      overflow: hidden;
+    }
+  }
+  &.is-collapsed &__wrapper {
+    grid-template-rows: 0fr;
+  }
+  &__body {
+    padding: 25px;
+  }
+  &__footer {
+    padding: 15px 25px;
+    border-top: 1px solid v(border-color);
+    background: v(surface-muted);
+  }
+  &.is-fullscreen {
+    position: fixed;
+    inset: 0;
+    z-index: v(z-modal);
+    margin: 0;
+    border-radius: 0;
+    overflow: auto;
+  }
+}
+
+/* block-ui overlay (blockUI plugin) */
+.#{$p}-block-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, #{v(surface)} 75%, transparent);
+  color: v(text-strong);
+  animation: #{$p}-fade-in 0.2s;
+}
+
+.#{$p}-well {
+  padding: 19px;
+  margin-bottom: 20px;
+  background: v(surface-muted);
+  border: 1px solid v(border-color);
+  border-radius: v(radius);
+  box-shadow: none;
+  &--sm {
+    padding: 9px;
+  }
+  &--lg {
+    padding: 24px;
+  }
+}
+
+.#{$p}-divider {
+  border: 0;
+  border-top: 1px solid v(border-color);
+  margin: 20px 0;
+  &--text {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border: 0;
+    color: v(text);
+    font-size: 13px;
+    &::before,
+    &::after {
+      content: '';
+      flex: 1;
+      border-top: 1px solid v(border-color);
+    }
+  }
+  &--vertical {
+    display: inline-block;
+    height: 1em;
+    border-top: 0;
+    border-inline-start: 1px solid v(border-color);
+    margin: 0 8px;
+    vertical-align: middle;
+  }
+}