@randstad-uca/design-system 1.0.30 → 1.0.32

package/dist/styles/colors.css

@@ -0,0 +1,50 @@
+: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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,8 @@
+@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

@@ -0,0 +1,151 @@
+/* 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

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

package/dist/styles/globalStyles.ts

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,25 @@
+.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

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

package/dist/styles/select.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@randstad-uca/design-system",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -28,6 +28,7 @@
     "@storybook/test": "^8.6.14",
     "@storybook/web-components": "^8.6.14",
     "@storybook/web-components-webpack5": "^8.6.14",
+    "@tailwindcss/postcss": "^4.1.11",
     "autoprefixer": "^10.4.21",
     "css-loader": "^7.1.2",
     "lit-css-loader": "^3.0.1",
@@ -36,6 +37,7 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^8.6.14",
+    "tailwindcss": "^4.1.11",
     "ts-loader": "^9.5.2",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",