@roax/ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +273 -0
- package/dist/index.js +205 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +165 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +41 -0
- package/src/styles/_roax-colors.scss +100 -0
- package/src/styles/index.scss +9 -0
package/README.md
ADDED
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
# @roax/ui
|
|
2
|
+
|
|
3
|
+
Librería de componentes UI del sistema de diseño Roax.
|
|
4
|
+
Construida sobre **React 18**, **CoreUI Pro** y **SCSS** con tokens de color propios.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Instalación
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @roax/ui
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
### Peer dependencies requeridas
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @coreui/react-pro @coreui/icons-react react react-dom
|
|
18
|
+
# Opcional (requerida para IconButton con tooltip):
|
|
19
|
+
npm install @tippyjs/react
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Uso
|
|
25
|
+
|
|
26
|
+
### 1. Importar estilos (una sola vez, en tu layout raíz)
|
|
27
|
+
|
|
28
|
+
El paquete asume que CoreUI Pro ya está configurado en tu proyecto.
|
|
29
|
+
Luego importa los tokens de color ROAX:
|
|
30
|
+
|
|
31
|
+
```scss
|
|
32
|
+
// En tu archivo SCSS principal (después de CoreUI)
|
|
33
|
+
@import '@coreui/coreui-pro/scss/coreui';
|
|
34
|
+
@import '@roax/ui/styles';
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
O si usas el archivo de estilos global del proyecto:
|
|
38
|
+
|
|
39
|
+
```scss
|
|
40
|
+
// style.scss
|
|
41
|
+
@import "variables";
|
|
42
|
+
@import "@coreui/coreui-pro/scss/coreui";
|
|
43
|
+
@import "@roax/ui/styles";
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### 2. Importar componentes
|
|
47
|
+
|
|
48
|
+
```jsx
|
|
49
|
+
import { SolidButton, OutlineButton, TextButton, IconButton } from '@roax/ui'
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## Componentes
|
|
55
|
+
|
|
56
|
+
### SolidButton
|
|
57
|
+
|
|
58
|
+
Botón principal con fondo sólido y gradiente ROAX.
|
|
59
|
+
|
|
60
|
+
```jsx
|
|
61
|
+
<SolidButton
|
|
62
|
+
title="Guardar"
|
|
63
|
+
color="custom-primary" // default
|
|
64
|
+
textColor="custom-white" // default
|
|
65
|
+
loading={false}
|
|
66
|
+
disabled={false}
|
|
67
|
+
icon={cilCheck} // @coreui/icons
|
|
68
|
+
onClick={() => {}}
|
|
69
|
+
/>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
| Prop | Tipo | Default | Descripción |
|
|
73
|
+
|-----------------|------------|-------------------|------------------------------------|
|
|
74
|
+
| `title` | `string` | `'Button'` | Texto del botón |
|
|
75
|
+
| `color` | `string` | `'custom-primary'`| Clase de color CoreUI |
|
|
76
|
+
| `textColor` | `string` | `'custom-white'` | Clase de color del texto |
|
|
77
|
+
| `loading` | `boolean` | `false` | Muestra spinner, deshabilita clic |
|
|
78
|
+
| `disabled` | `boolean` | — | Deshabilita el botón |
|
|
79
|
+
| `icon` | `array` | — | Ícono CIcon de `@coreui/icons` |
|
|
80
|
+
| `svgComponent` | `component`| — | Componente SVG personalizado |
|
|
81
|
+
| `badge` | `node` | — | Badge/chip junto al texto |
|
|
82
|
+
| `type` | `string` | `'submit'` | Tipo HTML del botón |
|
|
83
|
+
| `onClick` | `function` | — | Handler de clic |
|
|
84
|
+
| `className` | `string` | `''` | Clases CSS adicionales |
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
### OutlineButton
|
|
89
|
+
|
|
90
|
+
Botón con borde. Al hacer hover se rellena con el gradiente ROAX (cuando `color="custom-primary"`).
|
|
91
|
+
|
|
92
|
+
```jsx
|
|
93
|
+
<OutlineButton
|
|
94
|
+
title="Cancelar"
|
|
95
|
+
color="custom-primary"
|
|
96
|
+
loading={false}
|
|
97
|
+
disabled={false}
|
|
98
|
+
icon={cilArrowLeft}
|
|
99
|
+
onClick={() => {}}
|
|
100
|
+
/>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
---
|
|
104
|
+
|
|
105
|
+
### TextButton
|
|
106
|
+
|
|
107
|
+
Botón fantasma sin borde ni fondo. Ideal para acciones secundarias o navegación.
|
|
108
|
+
|
|
109
|
+
```jsx
|
|
110
|
+
<TextButton
|
|
111
|
+
title="Ver más"
|
|
112
|
+
color="dark"
|
|
113
|
+
loading={false}
|
|
114
|
+
disabled={false}
|
|
115
|
+
icon={cilExternalLink}
|
|
116
|
+
onClick={() => {}}
|
|
117
|
+
>
|
|
118
|
+
{/* O pasar children en lugar de title */}
|
|
119
|
+
Texto personalizado
|
|
120
|
+
</TextButton>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
### IconButton
|
|
126
|
+
|
|
127
|
+
Botón de ícono con tooltip opcional (usa Tippy.js).
|
|
128
|
+
|
|
129
|
+
```jsx
|
|
130
|
+
<IconButton
|
|
131
|
+
icon={cilTrash}
|
|
132
|
+
tooltip="Eliminar registro"
|
|
133
|
+
color="danger"
|
|
134
|
+
loading={false}
|
|
135
|
+
disabled={false}
|
|
136
|
+
onClick={() => {}}
|
|
137
|
+
/>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## Colores disponibles
|
|
143
|
+
|
|
144
|
+
Los colores base del proyecto que puedes usar en `color` y `textColor`:
|
|
145
|
+
|
|
146
|
+
| Token | Hex | Uso |
|
|
147
|
+
|-------------------|-----------|------------------------------|
|
|
148
|
+
| `custom-primary` | Gradiente | Acciones principales ROAX |
|
|
149
|
+
| `secondary` | `#9da5b1` | Acciones secundarias |
|
|
150
|
+
| `success` | `#2eb85c` | Confirmaciones |
|
|
151
|
+
| `danger` | `#e55353` | Eliminaciones / errores |
|
|
152
|
+
| `warning` | `#f9b115` | Advertencias |
|
|
153
|
+
| `info` | `#39f` | Información |
|
|
154
|
+
| `dark` | `#4f5d73` | Acciones neutras |
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## Desarrollo local
|
|
159
|
+
|
|
160
|
+
### Desde el monorepo
|
|
161
|
+
|
|
162
|
+
```bash
|
|
163
|
+
# Instalar todas las dependencias
|
|
164
|
+
npm install
|
|
165
|
+
|
|
166
|
+
# Correr Storybook (documentación visual)
|
|
167
|
+
npm run storybook
|
|
168
|
+
|
|
169
|
+
# Correr tests
|
|
170
|
+
npm run test
|
|
171
|
+
|
|
172
|
+
# Build del paquete
|
|
173
|
+
npm run ui:build
|
|
174
|
+
|
|
175
|
+
# Watch mode del paquete
|
|
176
|
+
npm run ui:dev
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### Solo el paquete
|
|
180
|
+
|
|
181
|
+
```bash
|
|
182
|
+
cd packages/ui
|
|
183
|
+
npm run build # Genera dist/
|
|
184
|
+
npm run dev # Watch mode
|
|
185
|
+
npm run pack:preview # Ver qué archivos se publicarían
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
---
|
|
189
|
+
|
|
190
|
+
## Publicación en npm
|
|
191
|
+
|
|
192
|
+
### Configuración del token
|
|
193
|
+
|
|
194
|
+
```bash
|
|
195
|
+
# Opción 1: variable de entorno
|
|
196
|
+
NPM_TOKEN=npm_xxxx npm publish
|
|
197
|
+
|
|
198
|
+
# Opción 2: .npmrc en CI/CD
|
|
199
|
+
echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" >> ~/.npmrc
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
### Publicar manualmente
|
|
203
|
+
|
|
204
|
+
```bash
|
|
205
|
+
cd packages/ui
|
|
206
|
+
|
|
207
|
+
# 1. Build
|
|
208
|
+
npm run build
|
|
209
|
+
|
|
210
|
+
# 2. Verificar contenido
|
|
211
|
+
npm run pack:preview
|
|
212
|
+
|
|
213
|
+
# 3. Publicar
|
|
214
|
+
npm publish --access public
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
### GitHub Actions (recomendado)
|
|
218
|
+
|
|
219
|
+
Crea `.github/workflows/publish.yml`:
|
|
220
|
+
|
|
221
|
+
```yaml
|
|
222
|
+
name: Publish @roax/ui
|
|
223
|
+
|
|
224
|
+
on:
|
|
225
|
+
push:
|
|
226
|
+
tags:
|
|
227
|
+
- 'ui-v*'
|
|
228
|
+
|
|
229
|
+
jobs:
|
|
230
|
+
publish:
|
|
231
|
+
runs-on: ubuntu-latest
|
|
232
|
+
steps:
|
|
233
|
+
- uses: actions/checkout@v4
|
|
234
|
+
- uses: actions/setup-node@v4
|
|
235
|
+
with:
|
|
236
|
+
node-version: '20'
|
|
237
|
+
registry-url: 'https://registry.npmjs.org'
|
|
238
|
+
- run: npm ci
|
|
239
|
+
- run: npm run ui:build
|
|
240
|
+
- run: npm publish --workspace=packages/ui --access public
|
|
241
|
+
env:
|
|
242
|
+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
Agrega `NPM_TOKEN` como secret en tu repositorio GitHub.
|
|
246
|
+
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
## Estructura del paquete
|
|
250
|
+
|
|
251
|
+
```
|
|
252
|
+
packages/ui/
|
|
253
|
+
├── src/
|
|
254
|
+
│ ├── components/
|
|
255
|
+
│ │ ├── buttons/
|
|
256
|
+
│ │ │ ├── SolidButton.jsx
|
|
257
|
+
│ │ │ ├── SolidButton.scss
|
|
258
|
+
│ │ │ ├── OutlineButton.jsx
|
|
259
|
+
│ │ │ ├── OutlineButton.scss
|
|
260
|
+
│ │ │ ├── TextButton.jsx
|
|
261
|
+
│ │ │ ├── IconButton.jsx
|
|
262
|
+
│ │ │ └── __tests__/
|
|
263
|
+
│ │ └── custom-tooltip/
|
|
264
|
+
│ │ └── CustomTooltip.jsx
|
|
265
|
+
│ ├── styles/
|
|
266
|
+
│ │ ├── index.scss
|
|
267
|
+
│ │ └── _roax-colors.scss
|
|
268
|
+
│ └── index.js
|
|
269
|
+
├── dist/ ← generado por tsup
|
|
270
|
+
├── tsup.config.js
|
|
271
|
+
├── package.json
|
|
272
|
+
└── README.md
|
|
273
|
+
```
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/index.js
|
|
30
|
+
var index_exports = {};
|
|
31
|
+
__export(index_exports, {
|
|
32
|
+
CustomTooltip: () => CustomTooltip,
|
|
33
|
+
IconButton: () => IconButton,
|
|
34
|
+
OutlineButton: () => OutlineButton,
|
|
35
|
+
SolidButton: () => SolidButton,
|
|
36
|
+
TextButton: () => TextButton
|
|
37
|
+
});
|
|
38
|
+
module.exports = __toCommonJS(index_exports);
|
|
39
|
+
|
|
40
|
+
// src/components/buttons/SolidButton.jsx
|
|
41
|
+
var import_react_pro = require("@coreui/react-pro");
|
|
42
|
+
var import_icons_react = __toESM(require("@coreui/icons-react"));
|
|
43
|
+
var import_SolidButton = require("./SolidButton.scss");
|
|
44
|
+
function SolidButton({
|
|
45
|
+
title = "Button",
|
|
46
|
+
onClick,
|
|
47
|
+
color = "custom-primary",
|
|
48
|
+
textColor = "custom-white",
|
|
49
|
+
className = "",
|
|
50
|
+
loading = false,
|
|
51
|
+
icon,
|
|
52
|
+
svgComponent: SvgComponent,
|
|
53
|
+
type = "submit",
|
|
54
|
+
badge,
|
|
55
|
+
disabled
|
|
56
|
+
}) {
|
|
57
|
+
return /* @__PURE__ */ React.createElement(
|
|
58
|
+
import_react_pro.CLoadingButton,
|
|
59
|
+
{
|
|
60
|
+
type,
|
|
61
|
+
onClick,
|
|
62
|
+
className: `solid-button rounded-4 px-4 py-2 fw-semibold text-${textColor} bg-${color} ${className}`,
|
|
63
|
+
loading,
|
|
64
|
+
disabledOnLoading: true,
|
|
65
|
+
disabled,
|
|
66
|
+
style: {
|
|
67
|
+
minHeight: "44px",
|
|
68
|
+
minWidth: "fit-content",
|
|
69
|
+
fontSize: "0.95rem",
|
|
70
|
+
letterSpacing: "0.3px"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
icon && /* @__PURE__ */ React.createElement(import_icons_react.default, { icon, className: "btn-icon" }),
|
|
74
|
+
SvgComponent && !icon && /* @__PURE__ */ React.createElement(SvgComponent, null),
|
|
75
|
+
/* @__PURE__ */ React.createElement("span", { className: "btn-title" }, title),
|
|
76
|
+
badge && badge
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// src/components/buttons/OutlineButton.jsx
|
|
81
|
+
var import_react_pro2 = require("@coreui/react-pro");
|
|
82
|
+
var import_icons_react2 = __toESM(require("@coreui/icons-react"));
|
|
83
|
+
var import_OutlineButton = require("./OutlineButton.scss");
|
|
84
|
+
function OutlineButton({
|
|
85
|
+
title = "Button",
|
|
86
|
+
onClick,
|
|
87
|
+
color = "custom-primary",
|
|
88
|
+
className = "",
|
|
89
|
+
loading = false,
|
|
90
|
+
icon,
|
|
91
|
+
type = "submit",
|
|
92
|
+
disabled
|
|
93
|
+
}) {
|
|
94
|
+
return /* @__PURE__ */ React.createElement(
|
|
95
|
+
import_react_pro2.CLoadingButton,
|
|
96
|
+
{
|
|
97
|
+
type,
|
|
98
|
+
onClick,
|
|
99
|
+
className: `outline-button rounded-3 fw-medium text-${color} border-${color} ${className}`,
|
|
100
|
+
loading,
|
|
101
|
+
disabledOnLoading: true,
|
|
102
|
+
disabled,
|
|
103
|
+
variant: "outline",
|
|
104
|
+
style: {
|
|
105
|
+
maxHeight: "40px",
|
|
106
|
+
minWidth: "fit-content"
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
icon && /* @__PURE__ */ React.createElement(import_icons_react2.default, { icon }),
|
|
110
|
+
/* @__PURE__ */ React.createElement("span", null, title)
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// src/components/buttons/TextButton.jsx
|
|
115
|
+
var import_react_pro3 = require("@coreui/react-pro");
|
|
116
|
+
var import_icons_react3 = __toESM(require("@coreui/icons-react"));
|
|
117
|
+
function TextButton({
|
|
118
|
+
disabled,
|
|
119
|
+
title,
|
|
120
|
+
onClick,
|
|
121
|
+
color = "dark",
|
|
122
|
+
className = "",
|
|
123
|
+
loading = false,
|
|
124
|
+
icon,
|
|
125
|
+
children
|
|
126
|
+
}) {
|
|
127
|
+
const buttonClasses = `rounded-3 px-2 d-flex justify-content-center gap-2 fw-medium ${className}`;
|
|
128
|
+
return /* @__PURE__ */ React.createElement("span", { className: "d-inline-block", tabIndex: 0 }, /* @__PURE__ */ React.createElement(
|
|
129
|
+
import_react_pro3.CLoadingButton,
|
|
130
|
+
{
|
|
131
|
+
disabled,
|
|
132
|
+
onClick,
|
|
133
|
+
variant: "ghost",
|
|
134
|
+
type: "button",
|
|
135
|
+
color,
|
|
136
|
+
className: buttonClasses,
|
|
137
|
+
loading
|
|
138
|
+
},
|
|
139
|
+
icon && /* @__PURE__ */ React.createElement(import_icons_react3.default, { size: "xl", icon }),
|
|
140
|
+
children ? children : title
|
|
141
|
+
));
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// src/components/buttons/IconButton.jsx
|
|
145
|
+
var import_react_pro4 = require("@coreui/react-pro");
|
|
146
|
+
var import_icons_react4 = __toESM(require("@coreui/icons-react"));
|
|
147
|
+
|
|
148
|
+
// src/components/custom-tooltip/CustomTooltip.jsx
|
|
149
|
+
var import_react = __toESM(require("@tippyjs/react"));
|
|
150
|
+
var import_tippy = require("tippy.js/dist/tippy.css");
|
|
151
|
+
function CustomTooltip({
|
|
152
|
+
content,
|
|
153
|
+
placement = "bottom",
|
|
154
|
+
delay = 0,
|
|
155
|
+
className = "",
|
|
156
|
+
children
|
|
157
|
+
}) {
|
|
158
|
+
return /* @__PURE__ */ React.createElement(
|
|
159
|
+
import_react.default,
|
|
160
|
+
{
|
|
161
|
+
content,
|
|
162
|
+
placement,
|
|
163
|
+
className,
|
|
164
|
+
delay
|
|
165
|
+
},
|
|
166
|
+
children
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// src/components/buttons/IconButton.jsx
|
|
171
|
+
function IconButton({
|
|
172
|
+
title,
|
|
173
|
+
onClick,
|
|
174
|
+
color = "dark",
|
|
175
|
+
className = "",
|
|
176
|
+
loading = false,
|
|
177
|
+
icon,
|
|
178
|
+
tooltip = "",
|
|
179
|
+
disabled
|
|
180
|
+
}) {
|
|
181
|
+
const buttonClasses = `d-flex justify-content-center align-items-center gap-1 m-0 p-1 ${className}`;
|
|
182
|
+
return /* @__PURE__ */ React.createElement(CustomTooltip, { content: tooltip, placement: "bottom" }, /* @__PURE__ */ React.createElement(
|
|
183
|
+
import_react_pro4.CLoadingButton,
|
|
184
|
+
{
|
|
185
|
+
onClick,
|
|
186
|
+
variant: "ghost",
|
|
187
|
+
type: "button",
|
|
188
|
+
color,
|
|
189
|
+
className: buttonClasses,
|
|
190
|
+
loading,
|
|
191
|
+
disabled
|
|
192
|
+
},
|
|
193
|
+
/* @__PURE__ */ React.createElement(import_icons_react4.default, { size: "xl", icon }),
|
|
194
|
+
title && /* @__PURE__ */ React.createElement("span", { className: "ml-2 d-none d-md-block" }, title)
|
|
195
|
+
));
|
|
196
|
+
}
|
|
197
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
198
|
+
0 && (module.exports = {
|
|
199
|
+
CustomTooltip,
|
|
200
|
+
IconButton,
|
|
201
|
+
OutlineButton,
|
|
202
|
+
SolidButton,
|
|
203
|
+
TextButton
|
|
204
|
+
});
|
|
205
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.js","../src/components/buttons/SolidButton.jsx","../src/components/buttons/OutlineButton.jsx","../src/components/buttons/TextButton.jsx","../src/components/buttons/IconButton.jsx","../src/components/custom-tooltip/CustomTooltip.jsx"],"sourcesContent":["// Buttons\nexport { default as SolidButton } from './components/buttons/SolidButton'\nexport { default as OutlineButton } from './components/buttons/OutlineButton'\nexport { default as TextButton } from './components/buttons/TextButton'\nexport { default as IconButton } from './components/buttons/IconButton'\n\n// Utilities\nexport { default as CustomTooltip } from './components/custom-tooltip/CustomTooltip'\n","'use client'\nimport { CLoadingButton } from '@coreui/react-pro'\nimport CIcon from '@coreui/icons-react'\nimport './SolidButton.scss'\n\nexport default function SolidButton({\n title = 'Button',\n onClick,\n color = 'custom-primary',\n textColor = 'custom-white',\n className = '',\n loading = false,\n icon,\n svgComponent: SvgComponent,\n type = 'submit',\n badge,\n disabled,\n}) {\n return (\n <CLoadingButton\n type={type}\n onClick={onClick}\n className={`solid-button rounded-4 px-4 py-2 fw-semibold text-${textColor} bg-${color} ${className}`}\n loading={loading}\n disabledOnLoading\n disabled={disabled}\n style={{\n minHeight: '44px',\n minWidth: 'fit-content',\n fontSize: '0.95rem',\n letterSpacing: '0.3px',\n }}\n >\n {icon && <CIcon icon={icon} className=\"btn-icon\" />}\n {SvgComponent && !icon && <SvgComponent />}\n <span className=\"btn-title\">{title}</span>\n {badge && badge}\n </CLoadingButton>\n )\n}\n","'use client'\nimport { CLoadingButton } from '@coreui/react-pro'\nimport CIcon from '@coreui/icons-react'\nimport './OutlineButton.scss'\n\nexport default function OutlineButton({\n title = 'Button',\n onClick,\n color = 'custom-primary',\n className = '',\n loading = false,\n icon,\n type = 'submit',\n disabled,\n}) {\n return (\n <CLoadingButton\n type={type}\n onClick={onClick}\n className={`outline-button rounded-3 fw-medium text-${color} border-${color} ${className}`}\n loading={loading}\n disabledOnLoading\n disabled={disabled}\n variant=\"outline\"\n style={{\n maxHeight: '40px',\n minWidth: 'fit-content',\n }}\n >\n {icon && <CIcon icon={icon} />}\n <span>{title}</span>\n </CLoadingButton>\n )\n}\n","'use client'\nimport { CLoadingButton } from '@coreui/react-pro'\nimport CIcon from '@coreui/icons-react'\n\nexport default function TextButton({\n disabled,\n title,\n onClick,\n color = 'dark',\n className = '',\n loading = false,\n icon,\n children,\n}) {\n const buttonClasses = `rounded-3 px-2 d-flex justify-content-center gap-2 fw-medium ${className}`\n\n return (\n <span className=\"d-inline-block\" tabIndex={0}>\n <CLoadingButton\n disabled={disabled}\n onClick={onClick}\n variant=\"ghost\"\n type=\"button\"\n color={color}\n className={buttonClasses}\n loading={loading}\n >\n {icon && <CIcon size=\"xl\" icon={icon} />}\n {children ? children : title}\n </CLoadingButton>\n </span>\n )\n}\n","'use client'\nimport { CLoadingButton } from '@coreui/react-pro'\nimport CIcon from '@coreui/icons-react'\nimport CustomTooltip from '../custom-tooltip/CustomTooltip'\n\nexport default function IconButton({\n title,\n onClick,\n color = 'dark',\n className = '',\n loading = false,\n icon,\n tooltip = '',\n disabled,\n}) {\n const buttonClasses = `d-flex justify-content-center align-items-center gap-1 m-0 p-1 ${className}`\n\n return (\n <CustomTooltip content={tooltip} placement=\"bottom\">\n <CLoadingButton\n onClick={onClick}\n variant=\"ghost\"\n type=\"button\"\n color={color}\n className={buttonClasses}\n loading={loading}\n disabled={disabled}\n >\n <CIcon size=\"xl\" icon={icon} />\n {title && <span className=\"ml-2 d-none d-md-block\">{title}</span>}\n </CLoadingButton>\n </CustomTooltip>\n )\n}\n","'use client'\nimport Tippy from '@tippyjs/react'\nimport 'tippy.js/dist/tippy.css'\n\nexport default function CustomTooltip({\n content,\n placement = 'bottom',\n delay = 0,\n className = '',\n children,\n}) {\n return (\n <Tippy\n content={content}\n placement={placement}\n className={className}\n delay={delay}\n >\n {children}\n </Tippy>\n )\n}\n"],"mappings":"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","names":["CIcon","import_react_pro","import_icons_react","CIcon","import_react_pro","import_icons_react","CIcon","import_react_pro","import_icons_react","Tippy","CIcon"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
// src/components/buttons/SolidButton.jsx
|
|
2
|
+
import { CLoadingButton } from "@coreui/react-pro";
|
|
3
|
+
import CIcon from "@coreui/icons-react";
|
|
4
|
+
import "./SolidButton.scss";
|
|
5
|
+
function SolidButton({
|
|
6
|
+
title = "Button",
|
|
7
|
+
onClick,
|
|
8
|
+
color = "custom-primary",
|
|
9
|
+
textColor = "custom-white",
|
|
10
|
+
className = "",
|
|
11
|
+
loading = false,
|
|
12
|
+
icon,
|
|
13
|
+
svgComponent: SvgComponent,
|
|
14
|
+
type = "submit",
|
|
15
|
+
badge,
|
|
16
|
+
disabled
|
|
17
|
+
}) {
|
|
18
|
+
return /* @__PURE__ */ React.createElement(
|
|
19
|
+
CLoadingButton,
|
|
20
|
+
{
|
|
21
|
+
type,
|
|
22
|
+
onClick,
|
|
23
|
+
className: `solid-button rounded-4 px-4 py-2 fw-semibold text-${textColor} bg-${color} ${className}`,
|
|
24
|
+
loading,
|
|
25
|
+
disabledOnLoading: true,
|
|
26
|
+
disabled,
|
|
27
|
+
style: {
|
|
28
|
+
minHeight: "44px",
|
|
29
|
+
minWidth: "fit-content",
|
|
30
|
+
fontSize: "0.95rem",
|
|
31
|
+
letterSpacing: "0.3px"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
icon && /* @__PURE__ */ React.createElement(CIcon, { icon, className: "btn-icon" }),
|
|
35
|
+
SvgComponent && !icon && /* @__PURE__ */ React.createElement(SvgComponent, null),
|
|
36
|
+
/* @__PURE__ */ React.createElement("span", { className: "btn-title" }, title),
|
|
37
|
+
badge && badge
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// src/components/buttons/OutlineButton.jsx
|
|
42
|
+
import { CLoadingButton as CLoadingButton2 } from "@coreui/react-pro";
|
|
43
|
+
import CIcon2 from "@coreui/icons-react";
|
|
44
|
+
import "./OutlineButton.scss";
|
|
45
|
+
function OutlineButton({
|
|
46
|
+
title = "Button",
|
|
47
|
+
onClick,
|
|
48
|
+
color = "custom-primary",
|
|
49
|
+
className = "",
|
|
50
|
+
loading = false,
|
|
51
|
+
icon,
|
|
52
|
+
type = "submit",
|
|
53
|
+
disabled
|
|
54
|
+
}) {
|
|
55
|
+
return /* @__PURE__ */ React.createElement(
|
|
56
|
+
CLoadingButton2,
|
|
57
|
+
{
|
|
58
|
+
type,
|
|
59
|
+
onClick,
|
|
60
|
+
className: `outline-button rounded-3 fw-medium text-${color} border-${color} ${className}`,
|
|
61
|
+
loading,
|
|
62
|
+
disabledOnLoading: true,
|
|
63
|
+
disabled,
|
|
64
|
+
variant: "outline",
|
|
65
|
+
style: {
|
|
66
|
+
maxHeight: "40px",
|
|
67
|
+
minWidth: "fit-content"
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
icon && /* @__PURE__ */ React.createElement(CIcon2, { icon }),
|
|
71
|
+
/* @__PURE__ */ React.createElement("span", null, title)
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// src/components/buttons/TextButton.jsx
|
|
76
|
+
import { CLoadingButton as CLoadingButton3 } from "@coreui/react-pro";
|
|
77
|
+
import CIcon3 from "@coreui/icons-react";
|
|
78
|
+
function TextButton({
|
|
79
|
+
disabled,
|
|
80
|
+
title,
|
|
81
|
+
onClick,
|
|
82
|
+
color = "dark",
|
|
83
|
+
className = "",
|
|
84
|
+
loading = false,
|
|
85
|
+
icon,
|
|
86
|
+
children
|
|
87
|
+
}) {
|
|
88
|
+
const buttonClasses = `rounded-3 px-2 d-flex justify-content-center gap-2 fw-medium ${className}`;
|
|
89
|
+
return /* @__PURE__ */ React.createElement("span", { className: "d-inline-block", tabIndex: 0 }, /* @__PURE__ */ React.createElement(
|
|
90
|
+
CLoadingButton3,
|
|
91
|
+
{
|
|
92
|
+
disabled,
|
|
93
|
+
onClick,
|
|
94
|
+
variant: "ghost",
|
|
95
|
+
type: "button",
|
|
96
|
+
color,
|
|
97
|
+
className: buttonClasses,
|
|
98
|
+
loading
|
|
99
|
+
},
|
|
100
|
+
icon && /* @__PURE__ */ React.createElement(CIcon3, { size: "xl", icon }),
|
|
101
|
+
children ? children : title
|
|
102
|
+
));
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// src/components/buttons/IconButton.jsx
|
|
106
|
+
import { CLoadingButton as CLoadingButton4 } from "@coreui/react-pro";
|
|
107
|
+
import CIcon4 from "@coreui/icons-react";
|
|
108
|
+
|
|
109
|
+
// src/components/custom-tooltip/CustomTooltip.jsx
|
|
110
|
+
import Tippy from "@tippyjs/react";
|
|
111
|
+
import "tippy.js/dist/tippy.css";
|
|
112
|
+
function CustomTooltip({
|
|
113
|
+
content,
|
|
114
|
+
placement = "bottom",
|
|
115
|
+
delay = 0,
|
|
116
|
+
className = "",
|
|
117
|
+
children
|
|
118
|
+
}) {
|
|
119
|
+
return /* @__PURE__ */ React.createElement(
|
|
120
|
+
Tippy,
|
|
121
|
+
{
|
|
122
|
+
content,
|
|
123
|
+
placement,
|
|
124
|
+
className,
|
|
125
|
+
delay
|
|
126
|
+
},
|
|
127
|
+
children
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// src/components/buttons/IconButton.jsx
|
|
132
|
+
function IconButton({
|
|
133
|
+
title,
|
|
134
|
+
onClick,
|
|
135
|
+
color = "dark",
|
|
136
|
+
className = "",
|
|
137
|
+
loading = false,
|
|
138
|
+
icon,
|
|
139
|
+
tooltip = "",
|
|
140
|
+
disabled
|
|
141
|
+
}) {
|
|
142
|
+
const buttonClasses = `d-flex justify-content-center align-items-center gap-1 m-0 p-1 ${className}`;
|
|
143
|
+
return /* @__PURE__ */ React.createElement(CustomTooltip, { content: tooltip, placement: "bottom" }, /* @__PURE__ */ React.createElement(
|
|
144
|
+
CLoadingButton4,
|
|
145
|
+
{
|
|
146
|
+
onClick,
|
|
147
|
+
variant: "ghost",
|
|
148
|
+
type: "button",
|
|
149
|
+
color,
|
|
150
|
+
className: buttonClasses,
|
|
151
|
+
loading,
|
|
152
|
+
disabled
|
|
153
|
+
},
|
|
154
|
+
/* @__PURE__ */ React.createElement(CIcon4, { size: "xl", icon }),
|
|
155
|
+
title && /* @__PURE__ */ React.createElement("span", { className: "ml-2 d-none d-md-block" }, title)
|
|
156
|
+
));
|
|
157
|
+
}
|
|
158
|
+
export {
|
|
159
|
+
CustomTooltip,
|
|
160
|
+
IconButton,
|
|
161
|
+
OutlineButton,
|
|
162
|
+
SolidButton,
|
|
163
|
+
TextButton
|
|
164
|
+
};
|
|
165
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/buttons/SolidButton.jsx","../src/components/buttons/OutlineButton.jsx","../src/components/buttons/TextButton.jsx","../src/components/buttons/IconButton.jsx","../src/components/custom-tooltip/CustomTooltip.jsx"],"sourcesContent":["'use client'\nimport { CLoadingButton } from '@coreui/react-pro'\nimport CIcon from '@coreui/icons-react'\nimport './SolidButton.scss'\n\nexport default function SolidButton({\n title = 'Button',\n onClick,\n color = 'custom-primary',\n textColor = 'custom-white',\n className = '',\n loading = false,\n icon,\n svgComponent: SvgComponent,\n type = 'submit',\n badge,\n disabled,\n}) {\n return (\n <CLoadingButton\n type={type}\n onClick={onClick}\n className={`solid-button rounded-4 px-4 py-2 fw-semibold text-${textColor} bg-${color} ${className}`}\n loading={loading}\n disabledOnLoading\n disabled={disabled}\n style={{\n minHeight: '44px',\n minWidth: 'fit-content',\n fontSize: '0.95rem',\n letterSpacing: '0.3px',\n }}\n >\n {icon && <CIcon icon={icon} className=\"btn-icon\" />}\n {SvgComponent && !icon && <SvgComponent />}\n <span className=\"btn-title\">{title}</span>\n {badge && badge}\n </CLoadingButton>\n )\n}\n","'use client'\nimport { CLoadingButton } from '@coreui/react-pro'\nimport CIcon from '@coreui/icons-react'\nimport './OutlineButton.scss'\n\nexport default function OutlineButton({\n title = 'Button',\n onClick,\n color = 'custom-primary',\n className = '',\n loading = false,\n icon,\n type = 'submit',\n disabled,\n}) {\n return (\n <CLoadingButton\n type={type}\n onClick={onClick}\n className={`outline-button rounded-3 fw-medium text-${color} border-${color} ${className}`}\n loading={loading}\n disabledOnLoading\n disabled={disabled}\n variant=\"outline\"\n style={{\n maxHeight: '40px',\n minWidth: 'fit-content',\n }}\n >\n {icon && <CIcon icon={icon} />}\n <span>{title}</span>\n </CLoadingButton>\n )\n}\n","'use client'\nimport { CLoadingButton } from '@coreui/react-pro'\nimport CIcon from '@coreui/icons-react'\n\nexport default function TextButton({\n disabled,\n title,\n onClick,\n color = 'dark',\n className = '',\n loading = false,\n icon,\n children,\n}) {\n const buttonClasses = `rounded-3 px-2 d-flex justify-content-center gap-2 fw-medium ${className}`\n\n return (\n <span className=\"d-inline-block\" tabIndex={0}>\n <CLoadingButton\n disabled={disabled}\n onClick={onClick}\n variant=\"ghost\"\n type=\"button\"\n color={color}\n className={buttonClasses}\n loading={loading}\n >\n {icon && <CIcon size=\"xl\" icon={icon} />}\n {children ? children : title}\n </CLoadingButton>\n </span>\n )\n}\n","'use client'\nimport { CLoadingButton } from '@coreui/react-pro'\nimport CIcon from '@coreui/icons-react'\nimport CustomTooltip from '../custom-tooltip/CustomTooltip'\n\nexport default function IconButton({\n title,\n onClick,\n color = 'dark',\n className = '',\n loading = false,\n icon,\n tooltip = '',\n disabled,\n}) {\n const buttonClasses = `d-flex justify-content-center align-items-center gap-1 m-0 p-1 ${className}`\n\n return (\n <CustomTooltip content={tooltip} placement=\"bottom\">\n <CLoadingButton\n onClick={onClick}\n variant=\"ghost\"\n type=\"button\"\n color={color}\n className={buttonClasses}\n loading={loading}\n disabled={disabled}\n >\n <CIcon size=\"xl\" icon={icon} />\n {title && <span className=\"ml-2 d-none d-md-block\">{title}</span>}\n </CLoadingButton>\n </CustomTooltip>\n )\n}\n","'use client'\nimport Tippy from '@tippyjs/react'\nimport 'tippy.js/dist/tippy.css'\n\nexport default function CustomTooltip({\n content,\n placement = 'bottom',\n delay = 0,\n className = '',\n children,\n}) {\n return (\n <Tippy\n content={content}\n placement={placement}\n className={className}\n delay={delay}\n >\n {children}\n </Tippy>\n )\n}\n"],"mappings":"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","names":["CLoadingButton","CIcon","CLoadingButton","CIcon","CLoadingButton","CIcon","CLoadingButton","CIcon"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@roax/ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Roax UI Component Library — componentes reutilizables para proyectos Roax",
|
|
5
|
+
"keywords": ["react", "ui", "components", "roax", "coreui"],
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.mjs",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/index.mjs",
|
|
11
|
+
"require": "./dist/index.js"
|
|
12
|
+
},
|
|
13
|
+
"./styles": "./src/styles/index.scss",
|
|
14
|
+
"./styles/*": "./src/styles/*"
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist",
|
|
18
|
+
"src/styles"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "tsup",
|
|
22
|
+
"dev": "tsup --watch",
|
|
23
|
+
"pack:preview": "npm pack --dry-run"
|
|
24
|
+
},
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"@coreui/icons-react": ">=2.0.0",
|
|
27
|
+
"@coreui/react-pro": ">=5.0.0",
|
|
28
|
+
"@tippyjs/react": ">=4.0.0",
|
|
29
|
+
"react": ">=18.0.0",
|
|
30
|
+
"react-dom": ">=18.0.0"
|
|
31
|
+
},
|
|
32
|
+
"peerDependenciesMeta": {
|
|
33
|
+
"@tippyjs/react": {
|
|
34
|
+
"optional": true
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"access": "public",
|
|
39
|
+
"registry": "https://registry.npmjs.org/"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// ROAX Color Tokens
|
|
3
|
+
// Paleta de colores oficial de la guía de diseño ROAX
|
|
4
|
+
// =============================================================================
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
// ---------------------------------------------------------------------------
|
|
8
|
+
// Primary - Rosa
|
|
9
|
+
// ---------------------------------------------------------------------------
|
|
10
|
+
--roax-rosa-50: #FDE9F2;
|
|
11
|
+
--roax-rosa-100: #FCDDEB;
|
|
12
|
+
--roax-rosa-200: #F9B9D5;
|
|
13
|
+
--roax-rosa-300: #F14B94;
|
|
14
|
+
--roax-rosa-400: #ED1E78; // Principal
|
|
15
|
+
--roax-rosa-500: #BE1B60;
|
|
16
|
+
--roax-rosa-600: #B2175A;
|
|
17
|
+
--roax-rosa-700: #8E1248;
|
|
18
|
+
--roax-rosa-800: #6B0D3B;
|
|
19
|
+
--roax-rosa-900: #530B2A;
|
|
20
|
+
|
|
21
|
+
// ---------------------------------------------------------------------------
|
|
22
|
+
// Primary - Naranja
|
|
23
|
+
// ---------------------------------------------------------------------------
|
|
24
|
+
--roax-orange-50: #FEEFE9;
|
|
25
|
+
--roax-orange-100: #FDE6DE;
|
|
26
|
+
--roax-orange-200: #FACCBB;
|
|
27
|
+
--roax-orange-300: #F47B50;
|
|
28
|
+
--roax-orange-400: #F05A24; // Principal
|
|
29
|
+
--roax-orange-500: #C0481D;
|
|
30
|
+
--roax-orange-600: #B4441B;
|
|
31
|
+
--roax-orange-700: #903616;
|
|
32
|
+
--roax-orange-800: #6C2810;
|
|
33
|
+
--roax-orange-900: #541F0D;
|
|
34
|
+
|
|
35
|
+
// ---------------------------------------------------------------------------
|
|
36
|
+
// Secondary - Morado
|
|
37
|
+
// ---------------------------------------------------------------------------
|
|
38
|
+
--roax-purple-50: #EFE6FB;
|
|
39
|
+
--roax-purple-100: #E6D9F8;
|
|
40
|
+
--roax-purple-200: #CCB0F1;
|
|
41
|
+
--roax-purple-300: #7D33DC;
|
|
42
|
+
--roax-purple-400: #5B01D2; // Principal
|
|
43
|
+
--roax-purple-500: #4901A8;
|
|
44
|
+
--roax-purple-600: #44019E;
|
|
45
|
+
--roax-purple-700: #37017E;
|
|
46
|
+
--roax-purple-800: #29005E;
|
|
47
|
+
--roax-purple-900: #20004A;
|
|
48
|
+
|
|
49
|
+
// ---------------------------------------------------------------------------
|
|
50
|
+
// Neutrals
|
|
51
|
+
// ---------------------------------------------------------------------------
|
|
52
|
+
--roax-neutral-50: #FFFFFF;
|
|
53
|
+
--roax-neutral-100: #CDD0D3;
|
|
54
|
+
--roax-neutral-200: #9CA1A7;
|
|
55
|
+
--roax-neutral-300: #6A717C;
|
|
56
|
+
--roax-neutral-400: #394250;
|
|
57
|
+
--roax-neutral-500: #071324; // Principal
|
|
58
|
+
--roax-neutral-600: #060F1D;
|
|
59
|
+
--roax-neutral-700: #040B16;
|
|
60
|
+
--roax-neutral-800: #030913;
|
|
61
|
+
--roax-neutral-900: #020610;
|
|
62
|
+
|
|
63
|
+
// ---------------------------------------------------------------------------
|
|
64
|
+
// Gray
|
|
65
|
+
// ---------------------------------------------------------------------------
|
|
66
|
+
--roax-gray-50: #FFFFFF;
|
|
67
|
+
--roax-gray-100: #E6E6E7;
|
|
68
|
+
--roax-gray-200: #CCCCCD;
|
|
69
|
+
--roax-gray-300: #7C7C7F;
|
|
70
|
+
--roax-gray-400: #5B5B5F; // Principal
|
|
71
|
+
--roax-gray-500: #49494C;
|
|
72
|
+
--roax-gray-600: #444447;
|
|
73
|
+
--roax-gray-700: #373739;
|
|
74
|
+
--roax-gray-800: #29292B;
|
|
75
|
+
--roax-gray-900: #202021;
|
|
76
|
+
|
|
77
|
+
// ---------------------------------------------------------------------------
|
|
78
|
+
// Semantic
|
|
79
|
+
// ---------------------------------------------------------------------------
|
|
80
|
+
--roax-success-400: #34C38F;
|
|
81
|
+
--roax-warning-400: #FFCE33;
|
|
82
|
+
--roax-error-400: #FF0505;
|
|
83
|
+
--roax-info-400: #33A7FF;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Dark mode
|
|
87
|
+
[data-coreui-theme="dark"] {
|
|
88
|
+
--roax-neutral-50: #071324;
|
|
89
|
+
--roax-neutral-100: #0D1E33;
|
|
90
|
+
--roax-neutral-200: #1A2E47;
|
|
91
|
+
|
|
92
|
+
--roax-gray-50: #202021;
|
|
93
|
+
--roax-gray-100: #2e2e30;
|
|
94
|
+
--roax-gray-200: #3d3d40;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Progress bar con gradiente primario ROAX
|
|
98
|
+
.progress-bar.bg-custom-primary {
|
|
99
|
+
background: linear-gradient(90deg, #ED1E78 0%, #ED2674 7.14%, #ED2C70 14.29%, #EE326B 21.43%, #EE3767 28.57%, #EE3C62 35.71%, #EE405D 42.86%, #EE4458 50%, #EF4752 57.14%, #EF4B4D 64.29%, #EF4E46 71.43%, #EF5140 78.57%, #F05438 85.71%, #F0572F 92.86%, #F05A24 100%) !important;
|
|
100
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// @roax/ui — Estilos del sistema de diseño Roax
|
|
3
|
+
// Importar DESPUÉS de configurar CoreUI en tu proyecto:
|
|
4
|
+
//
|
|
5
|
+
// @import '@coreui/coreui-pro/scss/coreui';
|
|
6
|
+
// @import '@roax/ui/styles';
|
|
7
|
+
// =============================================================================
|
|
8
|
+
|
|
9
|
+
@import 'roax-colors';
|