@wizco/fenixds-core 1.0.1

package/styles/scss/button.scss

@@ -0,0 +1,288 @@
+button.btn,
+a.btn {
+  font-size: var(--btn-size, 16px);
+  gap: var(--btn-gap, 8px);
+  border-radius: var(--btn-radius, 8px);
+  min-height: var(--btn-min-h, 48px);
+  padding: var(--btn-padding, 8px 16px);
+  // border: 2px solid var(--btn-border-color, transparent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border: none;
+  width: fit-content;
+  letter-spacing: 1.1px;
+  transition: all 300ms ease-in-out, outline 0ms linear;
+  cursor: pointer;
+  // &:focus-within:not(:active),
+  &:focus-visible {
+    outline: 2px solid var(--btn-focus, var(--textBtn));
+  }
+  &:not([class*=" bg-"]) {
+    background-color: var(--bgBtn);
+    color: var(--textBtn);
+  }
+
+  &:disabled:not(.btn-loading) {
+    text-decoration: none;
+    --bgBtn: var(--wco-color-neutral-300);
+    --textBtn: var(--wco-color-neutral-900);
+    pointer-events: none;
+    opacity: 0.4;
+  }
+
+  &:not(:disabled),
+  &:not(.btn-loading) {
+    &:hover {
+      transform: scale(1);
+      box-shadow: var(--wco-shadow-level-1);
+    }
+
+    &:active {
+      transform: scale(0.99) translateY(0.5px);
+      box-shadow: var(--wco-shadow-level-0);
+    }
+  }
+
+  &:not([class*=" btn-loading"]) {
+    &:after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 0px;
+      width: 100%;
+      background-color: black;
+      filter: contrast(100px);
+      opacity: 0.1;
+      transition: all 300ms ease;
+    }
+  }
+
+  &.btn-primary {
+    --bgBtn: var(--wco-color-primary-600);
+    --textBtn: var(--wco-color-primary-text);
+    --btn-focus: var(--wco-color-primary-900);
+
+    &:hover:not(.btn-outline) {
+      --bgBtn: var(--wco-color-primary-700);
+      --textBtn: var(--wco-color-primary-text);
+    }
+
+    &:active:not(.btn-outline) {
+      --bgBtn: var(--wco-color-primary-700);
+      --textBtn: var(--wco-color-primary-text);
+    }
+
+    &.btn-outline {
+      background-color: transparent;
+      --textBtn: var(--wco-color-primary-600);
+      --btn-focus: var(--wco-color-primary-600);
+      &:hover {
+        background-color: var(--wco-color-primary-50);
+        --textBtn: var(--wco-color-primary-700);
+        --bgBtn: var(--wco-color-primary-700);
+      }
+
+      &:active {
+        background-color: var(--wco-color-primary-50);
+      }
+    }
+    &.btn-basic {
+      box-shadow: none;
+      --bgBtn: transparent;
+      --textBtn: var(--wco-color-primary-600);
+      &:hover {
+        --textBtn: var(--wco-color-primary-700);
+        --bgBtn: var(--wco-color-primary-50);
+      }
+      &:focus-visible, 
+      // &:focus-within,
+      &:active {
+        --textBtn: var(--wco-color-primary-900);
+        --bgBtn: var(--wco-color-primary-100);
+      }
+    }
+  }
+
+  &.btn-secondary {
+    --bgBtn: var(--wco-color-secondary-100);
+    --textBtn: var(--wco-color-secondary-900);
+    --btn-focus: var(--wco-color-secondary-900);
+    &:hover:not(.btn-outline) {
+      --bgBtn: var(--wco-color-secondary-50);
+      --textBtn: var(--wco-color-secondary-900);
+      box-shadow: none;
+    }
+
+    &:active:not(.btn-outline) {
+      --bgBtn: var(--wco-color-secondary-50);
+      --textBtn: var(--wco-color-secondary-900);
+    }
+
+    &.btn-outline {
+      background-color: transparent;
+      --textBtn: var(--wco-color-secondary-600);
+      --btn-focus: var(--wco-color-secondary-600);
+
+      &:hover {
+        background-color: var(--wco-color-secondary-50);
+      }
+
+      &:active {
+        background-color: var(--wco-color-secondary-100);
+      }
+    }
+    
+    &.btn-basic {
+      box-shadow: none;
+      --bgBtn: transparent;
+      --textBtn: var(--wco-color-secondary-600);
+
+      &:hover {
+        --textBtn: var(--wco-color-secondary-700);
+        --bgBtn: var(--wco-color-secondary-50);
+      }
+
+      &:focus-visible,
+      // &:focus-within,
+      &:active {
+        --textBtn: var(--wco-color-secondary-900);
+        --bgBtn: var(--wco-color-secondary-100);
+      }
+    }
+  }
+
+  &.btn-link {
+    background-color: transparent;
+    --textBtn: var(--wco-color-primary-600);
+    text-decoration: underline;
+    &:hover:not(.btn-outline) {
+      --textBtn: var(--wco-color-primary-700);
+      box-shadow: none;
+    }
+    &:active:not(.btn-outline) {
+      background-color: var(--wco-color-primary-100);
+      --bgBtn: var(--wco-color-primary-900);
+      --textBtn: var(--wco-color-primary-900);
+      box-shadow: none;
+    }
+
+    &.btn-outline {
+      border: 0px solid transparent;
+    }
+  }
+
+  //// tamanhos
+  &.btn-full {
+    width: 100%;
+    min-width: max-content;
+  }
+
+  &.btn-md {
+    --btn-min-h: 40px;
+  }
+
+  &.btn-sm {
+    --btn-min-h: 32px;
+    --btn-padding: 4px 16px;
+  }
+
+  /// Outline
+  &.btn-outline {
+    border: 2px solid var(--bgBtn);
+
+    &:disabled {
+      background-color: transparent;
+      --textBtn: var(--wco-color-neutral-50);
+      --bgBtn: var(--wco-color-neutral-700);
+    }
+  }
+
+  /// Basico
+  // &.btn-basic:not(:hover, :active) {
+  //   --textBtn: var(--bgBtn);
+  //   background-color: transparent;
+  // }
+
+  &.btn-loading {
+    position: relative;
+    overflow: hidden;
+    pointer-events: none;
+    cursor: none;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0%;
+      height: 100%;
+    }
+
+    &:before {
+      content: "";
+      background-color: rgba(33, 29, 29, 0.15);
+      animation: loadingButton 2s ease infinite;
+      z-index: 22;
+
+      @keyframes loadingButton {
+        to {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  &.btn-icon { 
+    --btn-padding: 4px;
+    min-height: var(--btn-min-h, 48px);
+    min-width: var(--btn-min-h, 48px);
+  }
+
+  /// /////////////
+  /// Notificações
+  /// /////////////
+  &.btn.btn-notification {
+    --btn-notification-size: var(--wco-spacing-xxs);
+    --btn-notification-time: 2s;
+    --btn-notification-count: infinite;
+    --btn-notification-color: var(--bgBtn);
+    &:not(.btn-outline) {
+      &:before {
+        outline: 2px solid var(--textBtn);
+      }
+    }
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: calc(var(--btn-notification-size) / -2);
+      right: calc(var(--btn-notification-size) / -2);
+      height: 16px;
+      width: 16px;
+      border-radius: 50%;
+      background-color: var(--btn-notification-color);
+      filter: saturate(0.8);
+      opacity: 1;
+      transition: all 300ms ease;
+      animation: btnNotificationAnimation var(--btn-notification-time, 300ms) ease var(--btn-notification-count) alternate;
+      box-shadow: var(--wco-shadow-level-1);
+    }
+
+    @keyframes btnNotificationAnimation {
+      0% {
+        transform: scale(1);
+      }
+
+      50% {
+        transform: scale(1.2);
+        box-shadow: var(--wco-shadow-level-2);
+      }
+
+      100% {
+        transform: scale(1);
+      }
+    }
+  }
+}

package/styles/scss/core.scss

@@ -0,0 +1,6 @@
+@import "./variables.scss";
+@import "./forms.scss";
+@import "./button.scss";
+@import "./tooltip.scss";
+@import "./typography.scss";
+@import "./helpers.scss";

package/styles/scss/forms.scss

@@ -0,0 +1,343 @@
+.form-field {
+  display: flex;
+  position: relative;
+  --input-radius: var(--wco-radius-sm, 4px);
+  --input-color-error: var(--wco-color-danger-500, #E00707);
+  --input-default-color: var(--wco-color-primary-700,#004E87);
+  --input-border: 1px solid var(--wco-color-neutral-100);
+  --input-size: 16px;
+  --input-shadow: 0px 0px 0px 0px transparent;
+  accent-color: var(--input-default-color);
+  transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out;
+  // input Invalid
+  input:required+label::after,
+  textarea:required+label::after,
+  input:invalid:not(:placeholder-shown):required+label{
+      content: " *";
+      color: var(--wco-color-danger-100);
+  }
+
+  // input custom
+  .form-field__input,
+  .form-field__textarea,
+  .form-field__select {
+    border: var(--input-border);
+    border-radius: var(--input-radius);
+    font-size: var(--input-size, 16px);
+    box-shadow: var(--input-shadow);
+    padding: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%;
+    color: #212223;
+    outline: none;
+    width: 100%;
+
+    // native effects
+    &:invalid:not(:placeholder-shown), &.form-field--error:not(:placeholder-shown) {
+        --input-border: 1px solid var(--input-color-error);
+        --input-shadow: 0px 2px 0px 1px var(--input-color-error);
+        color: var(--input-color-error);
+
+    }
+
+    &.form-field--error:not(:placeholder-shown) ~ label {
+      color: var(--input-color-error);
+    }
+
+    &:hover:not(:focus):not(:disabled):not(:invalid):not(:read-only) {
+        border: 1px solid var(--wco-color-primary-500, var(--input-default-color));
+    }
+
+    // &:focus:not(:disabled):not(:invalid) {
+    //   --input-border: 2px solid var(--wco-color-primary-700, var(--input-default-color));;
+    // }
+
+    &:disabled {
+      border: 1px solid #6F7276;
+      background: var(--wco-color-neutral-100est);
+      color: #6F7276;
+      + label {
+        color: var(--wco-color-neutral-700);
+        --input-bg: var(--wco-color-neutral-100est);
+      }
+    }
+
+    &:read-only:not(:disabled):not(select) {
+        background: #EAEBEB;
+        border: 1px solid #C1C3C5;
+        color: #6F7276;
+        &:focus {
+          --input-border: 2px solid #C1C3C5;
+        }
+        + label {
+          --input-bg: #EAEBEB;
+        }
+    }
+
+    // sizes
+    &.input-sm {
+        height: 32px;
+    }
+    &.input-md {
+        height: 40px;
+
+    }
+    &.input-lg {
+        height: 48px;
+    }
+  }
+
+  label {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      background-image: linear-gradient(0deg, var(--input-bg, #fff) 44%, rgba(93,118,137,0) 44%);
+      color: var(--input-default-color);
+      padding: 0 4px;
+      margin-left: 20px;
+      transition: 0.1s ease-out;
+      transform-origin: left top;
+      pointer-events: none;
+  }
+
+  textarea ~ label {
+      top: 16px;
+      transform: translateY(0);
+  }
+
+  select[value=""]:focus+label,
+  textarea:focus+label,
+  input:focus+label {
+      color: var(--input-default-color);
+      top: 0;
+      transform: translateY(-50%) scale(0.9) !important;
+  }
+
+  select:not([value=""]):valid~label,
+  textarea:not(:placeholder-shown)+label,
+  input:not(:placeholder-shown)+label {
+      top: 0;
+      transform: translateY(-50%) scale(0.9) !important;
+  }
+
+  textarea:not(:focus)::placeholder,
+  input:not(:focus)::placeholder {
+      opacity: 0;
+  }
+
+
+  /// Input com ícone no inicio
+  > span:first-child {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    transform: translateY(-50%);
+  }
+  > span ~ .form-field__input + label,
+  > span ~ .form-field__select + label {
+    margin-left: 44px;
+  }
+  > span ~ .form-field__select,
+  > span ~ .form-field__input {
+    padding-left: 44px;
+  }
+
+  > .form-field__select + label + span,
+  > .form-field__input + label + span {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+    &::before {
+      content: '';
+      position: relative;
+      top: 2px;
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  /// Input com ícone no final
+  &.form-field--suffixe {
+    > .form-field__select,
+    > .form-field__input {
+      padding-right: 44px;
+    }
+  }
+
+  //// Select Custom
+  .form-field__select  {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    ~ label ~ span {
+      color: var(--input-default-color);
+    }
+  }
+}
+
+///////////
+/// RADIO
+///////////
+label.form-radio, .form-radio {
+  --accent-color: var(--wco-color-primary-700);
+  --radio-size: 16px;
+  --radio-gap: 8px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--radio-gap);
+
+  /// Somente se o label
+  /// for filho direto do input
+  label {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--radio-gap);
+  }
+
+  input[type="radio"] {
+    display: none;
+  }
+
+  /// input não selecionado
+  input[type="radio"] ~ .radio {
+    height: var(--radio-size);
+    width: var(--radio-size);
+    display: inline-flex;
+    position: relative;
+    border-radius: 50%;
+    border: 1px solid var(--wco-color-neutral-500);
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 50%;
+      height: 50%;
+      border-radius: 50%;
+      transition: box-shadow 300ms ease-in-out;
+      box-shadow: inset 0px 0px 0px 0px var(--accent-color);
+    }
+  }
+  /// input selecionado
+  input[type="radio"]:checked ~ .radio {
+    border: 1px solid var(--accent-color);
+    &::before {
+      box-shadow: inset 0px 0px 12px 12px var(--accent-color);
+    }
+  }
+
+  .label {
+    color: var(--wco-color-primary-700);
+    font-size: var(--wco-font-size-xs);
+    font-weight: 400;
+  }
+
+  input[type="radio"]:disabled ~ .radio {
+    --accent-color: var(--wco-color-neutral-600);
+    background-color: var(--wco-color-neutral-100est);
+  }
+  input[type="radio"]:checked:disabled ~ .radio {
+    --accent-color: var(--wco-color-neutral-600);
+    border: 1px solid var(--wco-color-neutral-600);
+    &::before {
+      box-shadow: inset 0px 0px 12px 12px var(--wco-color-neutral-600);
+    }
+  }
+}
+
+
+/// Checkbox
+///////////
+label.form-check, .form-check {
+  --accent-color: var(--wco-color-primary-700);
+  --checkbox-size: 16px;
+  --checkbox-gap: 8px;
+  --checkbox-radius: 4px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--checkbox-gap);
+
+  /// Somente se o label
+  /// for filho direto do input
+  label {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--checkbox-gap);
+  }
+
+  input[type="checkbox"] {
+    display: none;
+  }
+
+  /// input não selecionado
+  input[type="checkbox"] ~ .check {
+    height: var(--checkbox-size);
+    width: var(--checkbox-size);
+    display: inline-flex;
+    position: relative;
+    border-radius: var(--checkbox-radius);
+    border: 1px solid var(--wco-color-neutral-500);
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 80%;
+      height: 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 0px;
+      opacity: 0;
+      transition: background-size 100ms linear;
+      background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00009 6.77988L1.68676 4.46655C1.42676 4.20655 1.00676 4.20655 0.746758 4.46655C0.486758 4.72655 0.486758 5.14655 0.746758 5.40655L3.53342 8.19322C3.79342 8.45322 4.21342 8.45322 4.47342 8.19322L11.5268 1.13988C11.7868 0.879883 11.7868 0.459883 11.5268 0.199883C11.2668 -0.0601172 10.8468 -0.0601172 10.5868 0.199883L4.00009 6.77988Z' fill='%23F9F7F7'/%3E%3C/svg%3E%0A");
+    }
+  }
+  /// input selecionado
+  input[type="checkbox"]:checked ~ .check {
+    border: 1px solid var(--accent-color);
+    background-color: var(--accent-color);
+    &::before {
+      opacity: 1;
+      background-size: 100%;
+    }
+  }
+
+  .label {
+    color: var(--wco-color-neutral-900);
+    font-size: var(--wco-font-size-xs);
+    font-weight: 400;
+  }
+
+  /// hover
+  &:hover {
+    &:has(input[type="checkbox"]:not(:checked):not(:disabled)) {
+      .check {
+        border: 1px solid var(--accent-color);
+      }
+    }
+  }
+
+  input[type="checkbox"]:disabled ~ .check {
+    --accent-color: var(--wco-color-neutral-600);
+    background-color: var(--wco-color-neutral-100est);
+  }
+  input[type="checkbox"]:checked:disabled ~ .check {
+    --accent-color: var(--wco-color-neutral-600);
+    border: 1px solid var(--wco-color-neutral-600);
+    &::before {
+      filter: brightness(0.5);
+    }
+  }
+  input[type="checkbox"]:checked:disabled ~ .label {
+    color: var(--wco-color-neutral-600est);
+  }
+}