contentoh-components-library 21.6.24 → 21.6.26

package/src/components/organisms/LinkVariantsModal/styles.js

@@ -2,6 +2,25 @@ import styled from "styled-components";
 import "../../../global-files/global-styles.css";
 import { GlobalColors, FontFamily } from "../../../global-files/variables";
 
+// Rosa ContentOh. Va aquí y no en variables.js porque cambiar la constante
+// global tocaría todos los componentes que ya la usan; este modal es lo que hay
+// que alinear con la marca.
+const PINK = "#E13AA8";
+const PINK_RGB = "225, 58, 168";
+
+// accent-color pinta el relleno de checkboxes y radios con el color de marca en
+// vez del azul del sistema, sin reemplazarlos por divs: siguen siendo controles
+// nativos, con su foco y su navegación por teclado intactos.
+const controls = `
+  input[type="checkbox"],
+  input[type="radio"] {
+    accent-color: ${PINK};
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+  }
+`;
+
 export const Overlay = styled.div`
   position: fixed;
   inset: 0;
@@ -13,6 +32,7 @@ export const Overlay = styled.div`
 `;
 
 export const Panel = styled.div`
+  ${controls}
   display: flex;
   flex-direction: column;
   width: min(680px, 92vw);
@@ -33,13 +53,13 @@ export const Header = styled.div`
   h2 {
     margin: 0;
     font-family: ${FontFamily.Raleway_700};
-    font-size: 16px;
+    font-size: 17px;
     color: ${GlobalColors.deep_gray};
   }
 
   p {
     margin: 4px 0 0;
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.gray};
   }
 
@@ -47,7 +67,7 @@ export const Header = styled.div`
     border: none;
     background: none;
     cursor: pointer;
-    font-size: 20px;
+    font-size: 21px;
     line-height: 1;
     color: ${GlobalColors.gray};
   }
@@ -65,16 +85,16 @@ export const ModeSwitch = styled.div`
     border: 1px solid ${GlobalColors.s2};
     background-color: ${GlobalColors.white};
     font-family: ${FontFamily.Raleway_600};
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.gray};
     cursor: pointer;
     text-align: left;
   }
 
   button.active {
-    border-color: ${GlobalColors.original_magenta};
-    color: ${GlobalColors.original_magenta};
-    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.08);
+    border-color: ${PINK};
+    color: ${PINK};
+    background-color: rgba(${PINK_RGB}, 0.08);
   }
 `;
 
@@ -91,14 +111,14 @@ export const Body = styled.div`
     padding: 10px 12px;
     border-radius: 6px;
     background-color: ${GlobalColors.s2};
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.deep_gray};
     cursor: pointer;
   }
 
   .apply-all .hint {
     display: block;
-    font-size: 11px;
+    font-size: 12px;
     color: ${GlobalColors.gray};
   }
 `;
@@ -115,7 +135,7 @@ export const SearchRow = styled.form`
     border: 1px solid ${GlobalColors.s2};
     border-radius: 6px;
     font-family: ${FontFamily.Raleway};
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.deep_gray};
   }
 
@@ -124,10 +144,10 @@ export const SearchRow = styled.form`
     padding: 0 18px;
     border: none;
     border-radius: 6px;
-    background-color: ${GlobalColors.original_magenta};
+    background-color: ${PINK};
     color: ${GlobalColors.white};
     font-family: ${FontFamily.Raleway_600};
-    font-size: 12px;
+    font-size: 13px;
     cursor: pointer;
   }
 
@@ -154,13 +174,13 @@ export const List = styled.ul`
     gap: 10px;
     padding: 10px 12px;
     cursor: pointer;
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.deep_gray};
   }
 
   .meta {
     display: block;
-    font-size: 11px;
+    font-size: 12px;
     color: ${GlobalColors.gray};
   }
 
@@ -174,8 +194,8 @@ export const List = styled.ul`
 
   .count {
     margin-left: auto;
-    font-size: 11px;
-    color: ${GlobalColors.original_magenta};
+    font-size: 12px;
+    color: ${PINK};
     white-space: nowrap;
   }
 `;
@@ -186,7 +206,7 @@ export const AttributeList = styled(List)`
 
   .note {
     display: block;
-    font-size: 10px;
+    font-size: 11px;
     font-style: italic;
     color: ${GlobalColors.gray};
   }
@@ -194,7 +214,7 @@ export const AttributeList = styled(List)`
   .value {
     margin-left: auto;
     max-width: 45%;
-    font-size: 11px;
+    font-size: 12px;
     color: ${GlobalColors.gray};
     overflow: hidden;
     text-overflow: ellipsis;
@@ -208,7 +228,7 @@ export const Section = styled.div`
   h3 {
     margin: 0 0 8px;
     font-family: ${FontFamily.Raleway_600};
-    font-size: 13px;
+    font-size: 14px;
     color: ${GlobalColors.deep_gray};
   }
 
@@ -217,14 +237,14 @@ export const Section = styled.div`
     align-items: flex-start;
     gap: 8px;
     padding: 6px 0;
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.deep_gray};
     cursor: pointer;
   }
 
   label.choice span.hint {
     display: block;
-    font-size: 11px;
+    font-size: 12px;
     color: ${GlobalColors.gray};
   }
 `;
@@ -233,14 +253,14 @@ export const Message = styled.p`
   margin: 0 0 12px;
   padding: 10px 12px;
   border-radius: 6px;
-  font-size: 12px;
+  font-size: 13px;
   line-height: 1.4;
   background-color: ${GlobalColors.s2};
   color: ${GlobalColors.deep_gray};
 
   &.error {
-    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.1);
-    color: ${GlobalColors.original_magenta};
+    background-color: rgba(${PINK_RGB}, 0.1);
+    color: ${PINK};
   }
 `;
 
@@ -253,7 +273,7 @@ export const Footer = styled.div`
   border-top: 1px solid ${GlobalColors.s2};
 
   .summary {
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.gray};
   }
 
@@ -268,7 +288,7 @@ export const Footer = styled.div`
     padding: 0 18px;
     border-radius: 6px;
     font-family: ${FontFamily.Raleway_600};
-    font-size: 12px;
+    font-size: 13px;
     cursor: pointer;
   }
 
@@ -280,7 +300,7 @@ export const Footer = styled.div`
 
   button.primary {
     border: none;
-    background-color: ${GlobalColors.original_magenta};
+    background-color: ${PINK};
     color: ${GlobalColors.white};
   }
 
@@ -308,8 +328,8 @@ export const ImageGrid = styled.div`
   }
 
   label.picked {
-    border-color: ${GlobalColors.original_magenta};
-    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.06);
+    border-color: ${PINK};
+    background-color: rgba(${PINK_RGB}, 0.06);
   }
 
   label.locked {
@@ -331,7 +351,7 @@ export const ImageGrid = styled.div`
   }
 
   label span {
-    font-size: 10px;
+    font-size: 11px;
     color: ${GlobalColors.gray};
     text-align: center;
     overflow: hidden;
@@ -343,37 +363,21 @@ export const ImageGrid = styled.div`
 export const AddRetailer = styled.div`
   display: flex;
   flex-wrap: wrap;
+  align-items: flex-end;
   gap: 8px;
   margin-bottom: 16px;
 
-  select {
-    flex: 1 1 140px;
-    min-width: 0;
-    height: 32px;
-    padding: 0 8px;
-    border: 1px solid ${GlobalColors.s2};
-    border-radius: 6px;
-    font-family: ${FontFamily.Raleway};
-    font-size: 12px;
-    color: ${GlobalColors.deep_gray};
-    background-color: ${GlobalColors.white};
-  }
-
   button {
-    height: 32px;
+    height: 38px;
     padding: 0 14px;
-    border: 1px solid ${GlobalColors.original_magenta};
+    border: 1px solid ${PINK};
     border-radius: 6px;
     background: none;
     font-family: ${FontFamily.Raleway_600};
-    font-size: 12px;
-    color: ${GlobalColors.original_magenta};
+    font-size: 13px;
+    color: ${PINK};
     cursor: pointer;
-  }
-
-  select:disabled {
-    opacity: 0.5;
-    cursor: default;
+    flex-shrink: 0;
   }
 
   button:disabled {
@@ -397,7 +401,7 @@ export const Block = styled.section`
     gap: 8px;
     margin: 0 0 8px;
     font-family: ${FontFamily.Raleway_600};
-    font-size: 13px;
+    font-size: 14px;
     color: ${GlobalColors.deep_gray};
   }
 
@@ -408,9 +412,9 @@ export const Block = styled.section`
     width: 18px;
     height: 18px;
     border-radius: 50%;
-    background-color: ${GlobalColors.original_magenta};
+    background-color: ${PINK};
     color: ${GlobalColors.white};
-    font-size: 10px;
+    font-size: 11px;
   }
 `;
 
@@ -425,14 +429,14 @@ export const Choices = styled.div`
     align-items: flex-start;
     gap: 8px;
     padding: 4px 0;
-    font-size: 12px;
+    font-size: 13px;
     color: ${GlobalColors.deep_gray};
     cursor: pointer;
   }
 
   label .hint {
     display: block;
-    font-size: 11px;
+    font-size: 12px;
     color: ${GlobalColors.gray};
   }
 `;
@@ -444,7 +448,7 @@ export const Paging = styled.div`
   gap: 12px;
   margin: -8px 0 16px;
   font-family: ${FontFamily.Raleway_500};
-  font-size: 11px;
+  font-size: 12px;
   color: ${GlobalColors.gray};
 
   button {
@@ -454,8 +458,8 @@ export const Paging = styled.div`
     padding: 5px 12px;
     cursor: pointer;
     font-family: ${FontFamily.Raleway_600};
-    font-size: 11px;
-    color: ${GlobalColors.original_magenta};
+    font-size: 12px;
+    color: ${PINK};
   }
 
   button:disabled {
@@ -483,7 +487,7 @@ export const Tabs = styled.div`
     background-color: ${GlobalColors.white};
     cursor: pointer;
     font-family: ${FontFamily.Raleway_500};
-    font-size: 11px;
+    font-size: 12px;
     color: ${GlobalColors.gray};
     overflow: hidden;
     text-overflow: ellipsis;
@@ -491,9 +495,9 @@ export const Tabs = styled.div`
   }
 
   button.active {
-    border-color: ${GlobalColors.original_magenta};
-    color: ${GlobalColors.original_magenta};
-    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.08);
+    border-color: ${PINK};
+    color: ${PINK};
+    background-color: rgba(${PINK_RGB}, 0.08);
   }
 
   button .orden {
@@ -504,17 +508,17 @@ export const Tabs = styled.div`
     height: 16px;
     border-radius: 50%;
     background-color: ${GlobalColors.s2};
-    font-size: 9px;
+    font-size: 10px;
     flex-shrink: 0;
   }
 
   button.active .orden {
-    background-color: ${GlobalColors.original_magenta};
+    background-color: ${PINK};
     color: ${GlobalColors.white};
   }
 
   button .listo {
-    color: ${GlobalColors.original_magenta};
+    color: ${PINK};
     flex-shrink: 0;
   }
 `;

package/src/components/pages/ProviderProductEdition/styles.js

@@ -1,6 +1,9 @@
 import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
+// Rosa ContentOh, el mismo del modal de ligar productos.
+const PINK = "#E13AA8";
+
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -167,13 +170,13 @@ export const Container = styled.div`
     margin-bottom: 8px;
 
     .link-variants {
-      border: 1px solid ${GlobalColors.original_magenta};
+      border: 1px solid ${PINK};
       border-radius: 6px;
       background: none;
       padding: 6px 12px;
       font-family: ${FontFamily.Raleway_600};
       font-size: 11px;
-      color: ${GlobalColors.original_magenta};
+      color: ${PINK};
       cursor: pointer;
     }
 
@@ -232,7 +235,7 @@ export const Container = styled.div`
     .family-row .role {
       min-width: 96px;
       font-size: 10px;
-      color: ${GlobalColors.original_magenta};
+      color: ${PINK};
     }
 
     .family-row.current .role {

package/src/index.js

@@ -67,6 +67,7 @@ export * from "./components/molecules/TagAndInput/index";
 export * from "./components/molecules/VerificationCodeResetPasswordLogin/index";
 export * from "./components/molecules/RetailerSelector/index";
 export * from "./components/molecules/CustomSelect/index";
+export * from "./components/molecules/SingleSelect/index";
 export * from "./components/molecules/ButtonDownloadFile/index";
 export * from "./components/molecules/ImageTooltip/index";
 export * from "./components/molecules/SelectV2/index";