@wizco/fenixds-core 1.3.2 → 1.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wizco/fenixds-core",
   "description": "Fenix design system é um produto da Wiz com ativos de design e código de front-end para ajudar as equipes na criação dos seus produtos.",
-  "version": "1.3.2",
+  "version": "1.5.0",
   "private": false,
   "sideEffects": false,
   "author": "Raul Melo Fernandez",

package/styles/core.css

@@ -887,21 +887,21 @@ a.btn {
     --wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC); }
   .wco-form-field:has(
   input:read-only:not(:disabled),
-  textarea:read-only:not(:disabled)
-),
-  .wco-form-field .form--readonly:not(.form-field--disabled),
-  .wco-form-field .form-field--readonly:not(.form-field--disabled),
+  textarea:read-only:not(:disabled),
+  select[readonly]:not(:disabled)
+), .wco-form-field.form--readonly:not(.form-field--disabled), .wco-form-field.form-field--readonly:not(.form-field--disabled),
   .form-field:has(
   input:read-only:not(:disabled),
-  textarea:read-only:not(:disabled)
+  textarea:read-only:not(:disabled),
+  select[readonly]:not(:disabled)
 ),
-  .form-field .form--readonly:not(.form-field--disabled),
-  .form-field .form-field--readonly:not(.form-field--disabled) {
-    --wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
-    --wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
+  .form-field.form--readonly:not(.form-field--disabled),
+  .form-field.form-field--readonly:not(.form-field--disabled) {
+    --wco-input-color-label: var(--wco-color-neutral-900, #C3C8CC);
+    --wco-input-color-outline: transparent;
     --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
     --wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
-    --wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC); }
+    --wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC); }
   .wco-form-field.form-field--error:not(:placeholder-shown) ~ label,
   .wco-form-field.form--error:not(:placeholder-shown) ~ label, .wco-form-field.form-field--error, .wco-form-field:has(input:invalid:not(:placeholder-shown)), .wco-form-field:has(.form-field--error), .wco-form-field.form--error,
   .form-field.form-field--error:not(:placeholder-shown) ~ label,
@@ -1041,11 +1041,13 @@ a.btn {
     min-height: var(--wco-input-min-height);
     padding-top: 0;
     padding-bottom: 0; }
-  .wco-form-field:has(select).form--readonly,
-  .form-field:has(select).form--readonly {
+  .wco-form-field:has(select).form--readonly, .wco-form-field:has(select):has([readonly]):not(:disabled),
+  .form-field:has(select).form--readonly,
+  .form-field:has(select):has([readonly]):not(:disabled) {
     pointer-events: none; }
-    .wco-form-field:has(select).form--readonly::after,
-    .form-field:has(select).form--readonly::after {
+    .wco-form-field:has(select).form--readonly::after, .wco-form-field:has(select):has([readonly]):not(:disabled)::after,
+    .form-field:has(select).form--readonly::after,
+    .form-field:has(select):has([readonly]):not(:disabled)::after {
       display: none; }
   .wco-form-field:has(select)::after,
   .form-field:has(select)::after {
@@ -1054,9 +1056,11 @@ a.btn {
     top: 50%;
     right: 12px;
     transform: translateY(-50%);
-    width: 30px;
-    height: 100%;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 8.58984L12 13.1698L16.59 8.58984L18 9.99984L12 15.9998L6 9.99984L7.41 8.58984Z' fill='var(--wco-color-primary-600, black)'/%3E%3C/svg%3E%0A");
+    width: 7px;
+    height: 5px;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid var(--wco-color-primary-600);
     background-size: 30px;
     background-position: center;
     background-repeat: no-repeat; }
@@ -1558,6 +1562,78 @@ label.form-check, .form-check {
   flex-wrap: wrap;
   gap: var(--wco-spacing-nano, 12px); }
 
+dialog.wco-modal {
+  --wco-modal-size: 640px;
+  --wco-modal-padding: var(--wco-spacing-xl) var(--wco-spacing-md);
+  --wco-modal-bg: var(--wco-color-neutral-50);
+  --wco-modal-border-radius: var(--wco-radius-sm);
+  --wco-modal-shadow: var(--wco-shadow-level-2);
+  --wco-animate-modal-top: 10px;
+  --wco-animate-modal-opacity: 0;
+  background-color: transparent;
+  box-shadow: none;
+  container-name: modalWco;
+  container-type: inline-size;
+  border: none;
+  place-items: center;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: 100%;
+  height: 100%;
+  display: none;
+  transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete, transform 0.7s ease-in-out allow-discrete; }
+  dialog.wco-modal[open] {
+    display: grid; }
+    dialog.wco-modal[open] main {
+      margin: var(--wco-spacing-lg);
+      --wco-animate-modal-top: 0;
+      --wco-animate-modal-opacity: 1;
+      transition: all 300ms ease-in-out allow-discrete; }
+      @media screen and (max-width: 768px) {
+        dialog.wco-modal[open] main {
+          margin: 0; } }
+
+@starting-style {
+  dialog.wco-modal[open] main {
+    --wco-animate-modal-top: 10px;
+    --wco-animate-modal-opacity: 0; } }
+  dialog.wco-modal > main {
+    position: relative;
+    min-width: var(--wco-modal-size);
+    width: min-content;
+    background-color: var(--wco-modal-bg);
+    border-radius: var(--wco-modal-border-radius);
+    box-shadow: var(--wco-modal-shadow);
+    padding: var(--wco-modal-padding);
+    display: flex;
+    flex-direction: column;
+    opacity: var(--wco-animate-modal-opacity);
+    transform: translateY(var(--wco-animate-modal-top));
+    transition: all 0.4s ease-in-out; }
+    @media screen and (max-width: 768px) {
+      dialog.wco-modal > main {
+        --wco-modal-size: calc(100vw - var(--wco-spacing-md));
+        --wco-modal-padding: var(--wco-spacing-xs) var(--wco-spacing-xxs); } }
+    @media screen and (max-width: 550px) {
+      dialog.wco-modal > main {
+        --wco-modal-padding: var(--wco-spacing-xxxs) var(--wco-spacing-nano); } }
+  dialog.wco-modal button.wco-modal--close {
+    padding: var(--wco-spacing-nano);
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: var(--wco-font-size-md);
+    color: var(--wco-color-primary-700);
+    transition: color 0.3s; }
+    dialog.wco-modal button.wco-modal--close:hover {
+      color: var(--wco-color-primary-500); }
+  dialog.wco-modal::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+    transition: display 0.1s allow-discrete, overlay 0.1s allow-discrete, background-color 0.1s; }
+
 .m-none {
   margin: var(--wco-spacing-none); }
 

package/styles/scss/core.scss

@@ -13,6 +13,6 @@
 @import "./forms.scss";
 @import "./chips.scss";
 @import "./tags.scss";
-
+@import "./modal.scss";
 // Classes auxiliares
 @import "./helpers.scss";

package/styles/scss/forms.scss

@@ -139,15 +139,17 @@
   /// View Only
   &:has(
     input:read-only:not(:disabled),
-    textarea:read-only:not(:disabled)
+    textarea:read-only:not(:disabled),
+    select[readonly]:not(:disabled)
   ),
-  .form--readonly:not(.form-field--disabled),
-  .form-field--readonly:not(.form-field--disabled) {
-    --wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
-    --wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
+  &.form--readonly:not(.form-field--disabled),
+  &.form-field--readonly:not(.form-field--disabled)
+   {
+    --wco-input-color-label: var(--wco-color-neutral-900, #C3C8CC);
+    --wco-input-color-outline: transparent;
     --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
     --wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
-    --wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC);
+    --wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC);
   }
 
   /// Error
@@ -294,7 +296,8 @@
       padding-bottom: 0;
     }
 
-    &.form--readonly {
+    &.form--readonly,
+    &:has([readonly]):not(:disabled) {
       pointer-events: none;
       &::after {
         display: none;
@@ -306,9 +309,11 @@
       top: 50%;
       right: 12px;
       transform: translateY(-50%);
-      width: 30px;
-      height: 100%;
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 8.58984L12 13.1698L16.59 8.58984L18 9.99984L12 15.9998L6 9.99984L7.41 8.58984Z' fill='var(--wco-color-primary-600, black)'/%3E%3C/svg%3E%0A");
+      width: 7px;
+      height: 5px;
+      border-left: 6px solid transparent;
+	    border-right: 6px solid transparent;
+	    border-top: 6px solid var(--wco-color-primary-600);
       background-size: 30px;
       background-position: center;
       background-repeat: no-repeat;

package/styles/scss/modal.scss

@@ -0,0 +1,85 @@
+dialog.wco-modal {
+  --wco-modal-size: 640px;
+  --wco-modal-padding: var(--wco-spacing-xl) var(--wco-spacing-md);
+  --wco-modal-bg: var(--wco-color-neutral-50);
+  --wco-modal-border-radius: var(--wco-radius-sm);
+  --wco-modal-shadow: var(--wco-shadow-level-2);
+  --wco-animate-modal-top: 10px;
+  --wco-animate-modal-opacity: 0;
+  background-color: transparent;
+  box-shadow: none;
+  container-name: modalWco;
+  container-type: inline-size;
+  border: none;
+  place-items: center;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: 100%;
+  height: 100%;
+  display: none;
+  transition:
+    display 0.7s allow-discrete,
+    overlay 0.7s allow-discrete,
+    transform 0.7s ease-in-out allow-discrete;
+  &[open] {
+    display: grid;
+    main { 
+      margin: var(--wco-spacing-lg);
+      --wco-animate-modal-top: 0;
+      --wco-animate-modal-opacity: 1;
+      transition: all 300ms ease-in-out allow-discrete;
+      @media screen and (max-width: 768px){
+        margin: 0;
+      }
+      @starting-style {
+        --wco-animate-modal-top: 10px;
+        --wco-animate-modal-opacity: 0;
+      }
+    }
+  }
+  > main {
+    position: relative;
+    min-width: var(--wco-modal-size);
+    width: min-content;
+    background-color: var(--wco-modal-bg);
+    border-radius: var(--wco-modal-border-radius);
+    box-shadow: var(--wco-modal-shadow);
+    padding: var(--wco-modal-padding);
+    display: flex;
+    flex-direction: column;
+    opacity: var(--wco-animate-modal-opacity);
+    transform: translateY(var(--wco-animate-modal-top));
+    transition: all 0.4s ease-in-out;
+    @media screen and (max-width: 768px){
+      --wco-modal-size: calc(100vw - var(--wco-spacing-md));
+      --wco-modal-padding: var(--wco-spacing-xs) var(--wco-spacing-xxs);
+    }
+    
+    @media screen and (max-width: 550px){
+      --wco-modal-padding: var(--wco-spacing-xxxs) var(--wco-spacing-nano);
+    }
+
+  }
+  button.wco-modal--close {
+    padding: var(--wco-spacing-nano);
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: var(--wco-font-size-md);
+    color: var(--wco-color-primary-700);
+    transition: color 0.3s;
+    &:hover {
+      color: var(--wco-color-primary-500);
+    }
+  }
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+    transition:
+    display 0.1s allow-discrete,
+    overlay 0.1s allow-discrete,
+    background-color 0.1s;
+  }
+}