platformscode-new-react 0.0.2 → 0.0.4

package/src/assets/styles/components/_btns.scss

@@ -0,0 +1,815 @@
+.buttons {
+  .flex-column {
+    align-items: flex-start;
+  }
+}
+
+.btn {
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: var(--radius-sm);
+  // margin: var(--spacing-xs);
+  cursor: pointer;
+  border: 0;
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--buttons-lg-gap);
+  box-sizing: border-box;
+  overflow: hidden;
+
+  &-icon {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &--lg {
+    height: 40px;
+    padding-inline: var(--buttons-lg-padding);
+    @extend .text-md-medium;
+
+    span.btn-icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &--md {
+    height: 32px;
+    padding-inline: var(--buttons-md-padding);
+    @extend .text-sm-medium;
+
+    span.btn-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &--sm {
+    height: 24px;
+    padding-inline: var(--buttons-sm-padding);
+    // border-radius: var(--radius-sm);
+    @extend .text-xs-medium;
+
+    span.btn-icon {
+      width: 16px;
+      height: 16px;
+    }
+
+    &:focus::after {
+      // border-radius: var(--radius-sm) !important;
+    }
+  }
+
+  &--icon {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.btn--lg {
+      width: 40px;
+      height: 40px;
+    }
+
+    &-menu.btn--lg {
+      width: auto;
+      padding-inline: var(--buttons-lg-padding);
+    }
+
+    &.btn--md {
+      width: 32px;
+      height: 32px;
+    }
+
+    &-menu.btn--md {
+      width: auto;
+      padding-inline: var(--buttons-md-padding);
+    }
+
+    &.btn--sm {
+      width: 24px;
+      height: 24px;
+    }
+
+    &-menu.btn--sm {
+      width: auto;
+      padding-inline: var(--buttons-sm-padding);
+    }
+  }
+
+  &--primary-neutral {
+    background-color: var(--button-background-black-default);
+    color: var(--text-oncolor-primary);
+
+    &:hover {
+      background-color: var(--button-background-black-hovered);
+    }
+
+    &:visited {
+      background-color: var(--button-background-black-pressed);
+    }
+
+    &:focus {
+      background-color: var(--button-background-black-focused);
+      outline: 2px solid var(--border-black);
+      position: relative;
+
+      &::after {
+        content: '';
+        display: block;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 1px solid #fff;
+        border-radius: var(--radius-sm);
+      }
+    }
+
+    &:active {
+      background-color: var(--button-background-black-selected);
+      outline: none;
+
+      &::after {
+        display: none !important;
+      }
+    }
+
+    &:disabled,
+    &[disabled] {
+      background: var(--background-disabled);
+      color: var(--text-default-disabled);
+    }
+
+    &--on-color {
+      background-color: var(--button-background-oncolor-default);
+      color: var(--text-default);
+
+      &:hover {
+        background-color: var(--button-background-oncolor-hovered);
+      }
+
+      &:visited,
+      &.selected {
+        background-color: var(--button-background-oncolor-selected);
+      }
+
+      &:focus {
+        outline-color: var(--border-white);
+
+        &::after {
+          border-color: var(--border-black);
+        }
+      }
+
+      &:active {
+        background-color: var(--button-background-oncolor-pressed);
+      }
+
+      &:disabled,
+      &[disabled] {
+        background-color: var(--button-background-disabled-on-color);
+        color: var(--text-default-oncolor-disabled);
+      }
+    }
+  }
+
+  &--primary-brand {
+    background-color: var(--button-background-primary-default);
+    color: var(--text-oncolor-primary);
+
+    &:hover {
+      background: var(--button-background-primary-hovered);
+    }
+
+    &:visited {
+      background: var(--button-background-primary-pressed);
+    }
+
+    &:focus {
+      background: var(--button-background-primary-focused);
+      outline: 2px solid var(--border-black);
+      position: relative;
+
+      &::after {
+        content: '';
+        display: block;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 1px solid #fff;
+        border-radius: var(--radius-sm);
+      }
+    }
+
+    &:active {
+      background: var(--button-background-primary-selected);
+      outline: none;
+
+      &::after {
+        display: none !important;
+      }
+    }
+
+    &:disabled,
+    &[disabled] {
+      background: var(--background-disabled);
+      color: var(--text-default-disabled);
+    }
+
+    &--on-color {
+      background-color: var(--button-background-oncolor-default);
+      color: var(--text-default);
+
+      &:hover {
+        background-color: var(--button-background-oncolor-hovered);
+      }
+
+      &:visited,
+      &.selected {
+        background-color: var(--button-background-oncolor-pressed);
+      }
+
+      &:focus {
+        outline-color: var(--border-white);
+
+        &::after {
+          border-color: var(--border-black);
+        }
+      }
+
+      &:active {
+        background-color: var(--button-background-oncolor-pressed);
+      }
+
+      &:disabled,
+      &[disabled] {
+        background-color: var(--button-background-disabled-on-color);
+        color: var(--text-default-oncolor-disabled);
+      }
+    }
+  }
+
+  &--secondary {
+    background-color: var(--button-background-neutral-default);
+    color: var(--colors-text-primary);
+
+    &:hover {
+      background: var(--button-background-neutral-default-hoverd);
+    }
+
+    &:visited {
+      background: var(--button-background-neutral-default-pressed);
+    }
+
+    &:focus {
+      background: var(--button-background-neutral-default-focused);
+      outline: 2px solid var(--colors-base-black);
+    }
+
+    &:active {
+      background: var(--button-background-neutral-default-selected);
+      outline: none;
+    }
+
+    &:disabled,
+    &[disabled] {
+      background: var(--background-disabled);
+      color: var(--text-default-disabled);
+      // border: 1px solid var(--colors-gray-neutral-200);
+    }
+    &--on-color {
+      background-color: var(--button-background-transparent-hovered);
+      color: var(--text-oncolor-primary);
+
+      &:hover {
+        background-color: var(--button-background-transparent-hovered);
+      }
+
+      &:visited,
+      &.selected {
+        background-color: var(--Button-button-background-transparent-selected);
+      }
+
+      &:focus {
+        outline-color: var(--border-white);
+
+        &::after {
+          display: none;
+        }
+      }
+
+      &:active {
+        background-color: var(--Button-button-background-transparent-pressed);
+        color: var(--text-oncolor-primary);
+      }
+
+      &:disabled,
+      &[disabled] {
+        background-color: var(--button-background-disabled-on-color);
+        color: var(--text-default-oncolor-disabled);
+      }
+    }
+  }
+
+  &--secondary-outline {
+    outline: 1px solid var(--border-neutral-primary);
+    background-color: transparent;
+    color: var(--text-default);
+    mix-blend-mode: multiply;
+
+    &:hover {
+      background: var(--button-background-neutral-default);
+    }
+
+    &:visited {
+      background: var(--button-background-neutral-pressed);
+      outline: 1px solid var(--border-neutral-primary);
+    }
+
+    &:focus {
+      background: transparent;
+      outline: 2px solid var(--border-black);
+    }
+
+    &:active {
+      background: var(--button-background-neutral-selected);
+      outline: 1px solid var(--border-neutral-primary);
+    }
+
+    &:disabled,
+    &[disabled] {
+      background: transparent;
+      color: var(--text-default-disabled);
+      border: 1px solid var(--border-neutral-secondary);
+    }
+
+    &--on-color {
+      outline-color: var(--border-white-40);
+      color: var(--text-oncolor-primary);
+      mix-blend-mode: normal;
+
+      &:hover {
+        background: var(--button-background-transparent-hovered);
+        outline-color: var(--border-white-40);
+      }
+
+      &:visited,
+      &.selected {
+        background: var(--button-background-transparent-hovered);
+        outline-color: var(--border-white-40);
+      }
+
+      &:focus {
+        background: transparent;
+        outline: 2px solid var(--border-white);
+      }
+
+      &:active {
+        background: var(--button-background-transparent-hovered);
+        outline-color: var(--border-white-40);
+      }
+
+      &:disabled,
+      &[disabled] {
+        outline-color: 1px solid var(--icon-default-oncolor-disabled);
+        color: var(--text-default-oncolor-disabled);
+      }
+    }
+  }
+
+  &--subtle,
+  &--close,
+  &--sort {
+    background-color: transparent;
+    color: var(--colors-text-primary);
+    mix-blend-mode: multiply;
+
+    &:hover {
+      background: var(--button-background-neutral-default);
+    }
+
+    &:visited {
+      background: var(--button-background-neutral-pressed);
+    }
+
+    &:focus {
+      background: transparent;
+      outline: 2px solid var(--border-black);
+      position: relative;
+
+      &::after {
+        content: '';
+        display: block;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 1px solid #fff;
+        border-radius: var(--radius-sm);
+      }
+    }
+
+    &:active {
+      background: var(--button-background-neutral-selected);
+      outline: none;
+
+      &::after {
+        display: none !important;
+      }
+    }
+
+    &:disabled,
+    &[disabled] {
+      background: transparent;
+      color: var(--text-default-disabled);
+    }
+  }
+
+  &--transparent {
+    background-color: transparent;
+    color: var(--text-default);
+
+    &:hover {
+      background: transparent;
+      color: var(--button-background-primary-hovered);
+    }
+
+    &:visited {
+      color: var(--button-background-primary-pressed);
+    }
+
+    &:focus {
+      background: transparent;
+      outline: 2px solid var(--border-black);
+      position: relative;
+
+      &::after {
+        content: '';
+        display: block;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 1px solid #fff;
+        border-radius: var(--radius-sm);
+      }
+    }
+
+    &:active {
+      color: var(--button-background-primary-selected);
+      outline: none;
+
+      &::after {
+        display: none !important;
+      }
+    }
+
+    &:disabled,
+    &[disabled] {
+      background: transparent;
+      color: var(--text-default-disabled);
+    }
+  }
+
+  &--close {
+    display: flex;
+    width: 40px;
+    height: 40px;
+    padding: var(--spacing-md);
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--radius-sm);
+    background-color: transparent;
+    color: var(--icon-default);
+
+    &:hover {
+      background: var(--button-background-neutral-hovered);
+      color: var(--icon-default);
+    }
+
+    &:active {
+      background-color: var(--button-background-neutral-pressed);
+    }
+  }
+
+  &--des-primary {
+    background-color: var(--button-background-danger-primary-default);
+    color: var(--text-oncolor-primary);
+
+    &:hover {
+      background: var(--button-background-danger-primary-hovered);
+    }
+
+    &:visited {
+      background: var(--button-background-danger-primary-pressed);
+    }
+
+    &:focus {
+      background: var(--button-background-danger-primary-focused);
+      outline: 2px solid var(--border-black);
+      position: relative;
+
+      &::after {
+        content: '';
+        display: block;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 1px solid #fff;
+        border-radius: var(--radius-sm);
+      }
+    }
+
+    &:active {
+      background: var(--button-background-danger-primary-selected);
+      outline: none;
+
+      &::after {
+        display: none !important;
+      }
+    }
+
+    &:disabled,
+    &[disabled] {
+      background: var(--background-disabled);
+      color: var(--text-default-disabled);
+    }
+  }
+
+  &--des-secondary {
+    background-color: var(--button-background-danger-secondary-default);
+    color: var(--text-error);
+
+    &:hover {
+      background: var(--button-background-danger-secondary-hovered);
+    }
+
+    &:visited {
+      background: var(--button-background-danger-secondary-pressed);
+    }
+
+    &:focus {
+      background: var(--button-background-danger-secondary-focused);
+      outline: 2px solid var(--border-black);
+      position: relative;
+
+      &::after {
+        content: '';
+        display: block;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 1px solid #fff;
+        border-radius: var(--radius-sm);
+      }
+    }
+
+    &:active {
+      background: var(--button-background-danger-secondary-selected);
+      outline: none;
+
+      &::after {
+        display: none !important;
+      }
+    }
+
+    &:disabled,
+    &[disabled] {
+      background: var(--background-disabled);
+      color: var(--text-default-disabled);
+    }
+  }
+
+  &--des-secondary-outline {
+    outline: 1px solid var(--border-error-light);
+    background-color: transparent;
+    color: var(--text-error);
+    mix-blend-mode: multiply;
+
+    &:hover {
+      background: var(--button-background-danger-secondary-hovered);
+    }
+
+    &:visited {
+      background: var(--button-background-danger-secondary-pressed);
+    }
+
+    &:focus {
+      background: transparent;
+      outline: 2px solid var(--border-black);
+      position: relative;
+
+      &::after {
+        content: '';
+        display: block;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 1px solid #fff;
+        border-radius: var(--radius-sm);
+      }
+    }
+
+    &:active {
+      background: var(--button-background-danger-secondary-selected);
+      outline: 1px solid var(--border-error-light);
+
+      &::after {
+        display: none !important;
+      }
+    }
+
+    &:disabled,
+    &[disabled] {
+      background: transparent;
+      color: var(--text-default-disabled);
+      outline: 1px solid var(--border-neutral-secondary);
+    }
+  }
+
+  &--des-subtle {
+    background-color: transparent;
+    color: var(--text-error);
+
+    &:hover {
+      background: var(--button-background-danger-secondary-hovered);
+    }
+
+    &:visited {
+      background: var(--button-background-danger-secondary-pressed);
+    }
+
+    &:focus {
+      background: transparent;
+      outline: 2px solid var(--border-black);
+      position: relative;
+
+      &::after {
+        content: '';
+        display: block;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 1px solid #fff;
+        border-radius: var(--radius-sm);
+      }
+    }
+
+    &:active {
+      background: var(--button-background-danger-secondary-selected);
+      outline: none;
+
+      &::after {
+        display: none !important;
+      }
+    }
+
+    &:disabled,
+    &[disabled] {
+      background: transparent;
+      color: var(--text-default-disabled);
+    }
+  }
+
+  &--des-transparent {
+    background-color: transparent;
+    color: var(--button-background-danger-primary-default);
+
+    &:hover {
+      background: transparent;
+      color: var(--button-background-danger-primary-hovered);
+    }
+
+    &:visited {
+      color: var(--button-background-danger-primary-pressed);
+    }
+
+    &:focus {
+      background: transparent;
+      outline: 2px solid var(--border-black);
+      position: relative;
+      color: var(--button-background-danger-primary-selected);
+
+      &::after {
+        content: '';
+        display: block;
+        background-color: transparent;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: 1px solid #fff;
+        border-radius: var(--radius-sm);
+      }
+    }
+
+    &:active {
+      color: var(--button-background-danger-primary-selected);
+      outline: none;
+
+      &::after {
+        display: none !important;
+      }
+    }
+
+    &:disabled,
+    &[disabled] {
+      background: transparent;
+      color: var(--text-default-disabled);
+    }
+  }
+
+  &.btn--subtle-on-color,
+  &.btn--close-on-color {
+    background-color: transparent;
+    color: var(--text-oncolor-primary);
+
+    &:hover {
+      background-color: var(--button-background-transparent-hovered);
+    }
+
+    &:visited,
+    &.selected {
+      background-color: var(--button-background-transparent-selected);
+    }
+
+    &:focus {
+      outline: 2px solid var(--border-white);
+
+      &::after {
+        display: none;
+      }
+    }
+
+    &:active {
+      color: var(--text-oncolor-primary);
+      background-color: var(--button-background-transparent-pressed);
+    }
+
+    &:disabled,
+    &[disabled] {
+      background-color: transparent;
+      color: var(--text-default-oncolor-disabled);
+    }
+  }
+
+  &--transparent-on-color {
+    background-color: transparent;
+    color: var(--text-oncolor-primary);
+
+    &:hover {
+      color: var(--button-label-transparent-hovered-on-color);
+    }
+
+    &:visited,
+    &.selected {
+      color: var(--button-label-transparent-selected-on-color);
+    }
+
+    &:focus {
+      outline: 2px solid var(--colors-base-white);
+
+      &::after {
+        display: none;
+      }
+    }
+
+    &:active {
+      color: var(--button-label-transparent-pressed-on-color);
+    }
+
+    &:disabled,
+    &[disabled] {
+      background-color: transparent;
+      color: var(--text-default-oncolor-disabled);
+    }
+  }
+}