@randstad-uca/design-system 1.0.28 → 1.0.30

package/dist/styles/colors.css

@@ -1,50 +0,0 @@
-:root {
-    --primary-color: #2175D9;
-    --primary-color-80: #4E90E1;
-    --primary-color-60: #7AACE8;
-    --primary-color-40: #A6C8F0;
-    --primary-color-20: #D3E3F7;
-    --primary-color-10: #2175D91A;
-    --primary-color-5: #2175D90D;
-
-    --secondary-color: #0F1941;
-    --secondary-color-80: #404767;
-    --secondary-color-60: #6F758D;
-    --secondary-color-40: #9FA3B3;
-    --secondary-color-20: #CFD1D9;
-    --secondary-color-10: #E7E8EC;
-
-    --brand-randstad-blue: #2175D9;
-    --randstad-blue-10: #E8F1FB;
-    --randstad-blue-40: #A6C8F0;
-    --brand-dark-blue: #0F1941;
-    --brand-light-blue: #00D7FF;
-    --brand-off-white: #F7F5F0;
-
-    --ui-negative: #E00F0F;
-    --ui-negative-5: #FDF3F3;
-    --ui-negative-pink-shadow: #E00F0F1A;
-    --ui-positive: #257156;
-    --ui-positve-5: #F4F8F6;
-    --ui-warning: #E9A204;
-    --ui-warning-10: #FCF5E5;
-    --ui-informative: #4E90E1;
-    --ui-informative-10: #E8F1FB;
-
-    --tertiary-shade: #DEDCD8;
-    --tertiary-tint: #F9F7F3;
-    --gray-20: #D7D7D7;
-    --gray-10: #F7F7F7;
-    --white: #FFFFFF;
-
-    --primary-button-hover: #175197;
-    --primary-button-active: #124077;
-    --primary-button-focus: #2175D9;
-
-    --form-hover-shadow: #D1D3DB;
-
-    --randstad-dark-blue-40: #262626;
-    --primary-light-blue: #00D7FF;
-    --primary-light-blue-20: #00D7FF33;
-
-  }

package/dist/styles/fontStyles.d.ts

@@ -1,7 +0,0 @@
-export declare const bodyXS: import("lit").CSSResult;
-export declare const bodyS: import("lit").CSSResult;
-export declare const bodyM: import("lit").CSSResult;
-export declare const bodyL: import("lit").CSSResult;
-export declare const titleXXS: import("lit").CSSResult;
-export declare const titleXS: import("lit").CSSResult;
-export declare const titleS: import("lit").CSSResult;

package/dist/styles/fontStyles.ts

@@ -1,60 +0,0 @@
-import { css } from 'lit';
-
-export const bodyXS = css`
-  font-family: 'Graphik', sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 15px;
-  letter-spacing: 0%;
-`;
-
-export const bodyS = css`
-  font-family: 'Graphik', sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 25px;
-  letter-spacing: 0%;
-`;
-
-export const bodyM = css`
-  font-family: 'Graphik', sans-serif;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 25px;
-  letter-spacing: 0%;
-`;
-
-export const bodyL = css`
-  font-family: 'Graphik', sans-serif;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 30px;
-  letter-spacing: 0%;
-`;
-
-export const titleXXS = css`
-  font-family: 'Graphik', sans-serif;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 30px;
-  letter-spacing: 0%;
-  vertical-align: middle;
-`;
-
-export const titleXS = css`
-  font-family: 'Graphik', sans-serif;
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 30px;
-  letter-spacing: -1%;
-  vertical-align: middle;
-`;
-
-export const titleS = css`
-  font-family: 'Graphik', sans-serif;
-  font-weight: 400;
-  font-size: 26px;
-  line-height: 30px;
-  letter-spacing: -1%;
-  vertical-align: middle;
-`;

package/dist/styles/fonts.css

@@ -1,8 +0,0 @@
-@font-face {
-    font-family: 'Graphik';
-    src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),
-        url('/src/assets/font/Graphik-Regular.woff') format('woff'),
-        url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');
-    font-weight: normal;
-    font-style: normal;
-}

package/dist/styles/forms.css

@@ -1,151 +0,0 @@
-/* Base form styles */
-.form {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-    font-family: 'Graphik', sans-serif;
-}
-
-/* Form labels */
-.form-label {
-    font-size: 16px;
-    line-height: 25px;
-    font-weight: 400;
-    color: var(--secondary-color-80);
-}
-
-/* Form inputs */
-.form-input {
-    font-size: 16px;
-    line-height: 30px;
-    padding: 10px;
-    border: 1px solid var(--secondary-color-10);
-    border-radius: 4px;
-    outline: none;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.form.error:not(.disabled) .form-input:hover {
-    box-shadow: 0px 0px 0px 4px #E00F0F1A;
-}
-
-.form:not(.disabled) .form-input:hover {
-    box-shadow: 0px 0px 0px 4px #0F19411A;
-}
-
-.form-input:focus {
-    border: 1px solid var(--primary-color);
-}
-
-.form.error .form-input {
-    background-color: #FDF3F3;
-    border-color: #e3342f;
-}
-
-.form-input.success {
-    border-color: #28a745;
-    background-color: #d4edda;
-}
-
-input::placeholder {
-    color: var(--secondary-color-40);
-    font-size: 16px;
-    line-height: 30px;
-    font-weight: 400;
-}
-
-/* Buttons inside forms */
-.form-button {
-    font-size: 16px;
-    padding: 10px 20px;
-    background-color: #007bff;
-    color: #ffffff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.helper-description {
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 25px;
-    text-align: left;
-    margin: 0px;
-    color: var(--secondary-color-40);
-}
-
-.error-message {
-    font-size: 16px;
-    line-height: 25px;
-    color: var(--ui-negative);
-    margin: 0px;
-}
-
-.toggle-password {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 16px;
-    padding: 5px;
-}
-
-.form-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-  
-  .input-with-button {
-    display: flex;
-    align-items: center;
-    position: relative;
-  }
-  
-  .input-with-button input {
-    width: 100%;
-    padding-right: 40px; /* Espacio para el botón */
-  }
-  
-  .input-with-button button {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%); /* Siempre centrado verticalmente */
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px; /* Ajusta según necesites */
-    height: 40px; /* Asegura que el botón tenga un tamaño uniforme */
-  }
-  
-  .toggle-password randstad-icon {
-    width: 100%;
-    height: 100%;
-    max-width: 32px;
-    max-height: 32px;
-  }
-
-  textarea {
-    font-family: Graphik;
-    font-weight: 400;
-    font-size: 18px;
-    line-height: 30px;
-    letter-spacing: 0%;
-  }
-
-  
-  textarea.form-input {
-    /* Estilos específicos para textarea */
-    min-height: 100px; /* Diferenciarlo del input */
-    resize: none;
-  }
-  
-  .form.disabled textarea.form-input,
-  .form.disabled input.form-input {
-    background-color: #f5f5f5;
-    cursor: not-allowed;
-  }

package/dist/styles/globalStyles.d.ts

@@ -1,2 +0,0 @@
-declare const globalStyles: CSSStyleSheet;
-export default globalStyles;

package/dist/styles/globalStyles.ts

@@ -1,22 +0,0 @@
-const globalStyles = new CSSStyleSheet();
-
-globalStyles.replaceSync(`
-  @font-face {
-    font-family: 'Graphik';
-    src: url('/src/assets/font/Graphik-Regular.woff2') format('woff2'),
-         url('/src/assets/font/Graphik-Regular.woff') format('woff'),
-         url('/src/assets/font/Graphik-Regular.eot') format('embedded-opentype');
-    font-weight: normal;
-    font-style: normal;
-  }
-
-  .body-s {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 100%;
-    letter-spacing: 0%;
-    color: green;
-  }
-`);
-
-export default globalStyles;

package/dist/styles/icons.css

@@ -1,25 +0,0 @@
-.icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.icon svg {
-    width: 1em;
-    height: 1em;
-}
-
-.icon-sm svg {
-    width: 16px;
-    height: 16px;
-}
-
-.icon-md svg {
-    width: 24px;
-    height: 24px;
-}
-
-.icon-lg svg {
-    width: 32px;
-    height: 32px;
-}

package/dist/styles/index.css

@@ -1,5 +0,0 @@
-@import './fonts.css';
-@import './colors.css';
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/dist/styles/select.css

@@ -1,12 +0,0 @@
-
-.select-container {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    width: 100%;
-    font-family: "Graphik", sans-serif;
-}
-
-.select {
-    font-family: "Graphik", sans-serif;
-}