@timus-networks/theme 2.4.138 → 2.4.140

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/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@timus-networks/theme",
3
3
  "configKey": "themeOptions",
4
- "version": "2.4.137",
4
+ "version": "2.4.139",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "0.8.4",
7
7
  "unbuild": "2.0.0"
package/dist/module.mjs CHANGED
@@ -11,7 +11,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
11
11
  const __dirname = __cjs_path__.dirname(__filename);
12
12
  const require = __cjs_mod__.createRequire(import.meta.url);
13
13
  const name = "@timus-networks/theme";
14
- const version = "2.4.137";
14
+ const version = "2.4.139";
15
15
  const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
16
16
  const type = "module";
17
17
  const exports = {
@@ -1301,7 +1301,7 @@ body {
1301
1301
  --el-color-white: #ffffff;
1302
1302
  --el-color-black: #000000;
1303
1303
  --el-color-primary-rgb: 87, 55, 214;
1304
- --el-color-secondary-rgb: 119, 212, 183;
1304
+ --el-color-secondary-rgb: 168, 166, 177;
1305
1305
  --el-color-neutral-rgb: 168, 166, 177;
1306
1306
  --el-color-success-rgb: 76, 183, 112;
1307
1307
  --el-color-warning-rgb: 232, 197, 82;
@@ -1561,11 +1561,11 @@ body {
1561
1561
  --el-alert-description-font-size: 10px;
1562
1562
  --el-alert-close-font-size: 14px;
1563
1563
  --el-alert-close-customed-font-size: 14px;
1564
- --el-alert-icon-size: 18px;
1564
+ --el-alert-icon-size: 12px;
1565
1565
  --el-alert-icon-large-size: 32px;
1566
1566
  position: relative;
1567
1567
  width: 100%;
1568
- padding: var(--el-alert-padding);
1568
+ padding: 8px 16px;
1569
1569
  margin: 0;
1570
1570
  box-sizing: border-box;
1571
1571
  border-radius: var(--el-border-radius-small);
@@ -1573,7 +1573,7 @@ body {
1573
1573
  border-style: var(--el-border-style);
1574
1574
  border-color: var(--el-alert-border-color);
1575
1575
  position: relative;
1576
- background-color: var(--el-color-info-light-1);
1576
+ background-color: var(--el-color-neutral-light-1);
1577
1577
  overflow: hidden;
1578
1578
  opacity: 1;
1579
1579
  display: flex;
@@ -1594,42 +1594,61 @@ body {
1594
1594
  justify-content: center;
1595
1595
  }
1596
1596
 
1597
+ .el-alert--primary {
1598
+ --el-alert-bg-color: var(--el-color-primary-light-1);
1599
+ --el-alert-border-color: var(--el-color-primary-light-3);
1600
+ }
1601
+ .el-alert--primary.is-light {
1602
+ background-color: var(--el-alert-bg-color);
1603
+ color: var(--el-color-primary-light-6);
1604
+ }
1605
+ .el-alert--primary.is-light .el-alert__description {
1606
+ color: var(--el-color-primary-light-6);
1607
+ }
1608
+ .el-alert--primary.is-dark {
1609
+ background-color: var(--el-color-primary);
1610
+ color: var(--el-color-white);
1611
+ }
1612
+ .el-alert--primary.is-light .el-alert__close-btn {
1613
+ color: var(--el-color-primary-light-6);
1614
+ }
1615
+
1597
1616
  .el-alert--success {
1598
1617
  --el-alert-bg-color: var(--el-color-success-light-1);
1599
1618
  --el-alert-border-color: var(--el-color-success-light-3);
1600
1619
  }
1601
1620
  .el-alert--success.is-light {
1602
1621
  background-color: var(--el-alert-bg-color);
1603
- color: var(--el-color-success-light-5);
1622
+ color: var(--el-color-success-light-6);
1604
1623
  }
1605
1624
  .el-alert--success.is-light .el-alert__description {
1606
- color: var(--el-color-success-light-4);
1625
+ color: var(--el-color-success-light-6);
1607
1626
  }
1608
1627
  .el-alert--success.is-dark {
1609
1628
  background-color: var(--el-color-success);
1610
1629
  color: var(--el-color-white);
1611
1630
  }
1612
1631
  .el-alert--success.is-light .el-alert__close-btn {
1613
- color: var(--el-color-success-light-5);
1632
+ color: var(--el-color-success-light-6);
1614
1633
  }
1615
1634
 
1616
1635
  .el-alert--info {
1617
- --el-alert-bg-color: var(--el-color-info-light-1);
1618
- --el-alert-border-color: var(--el-color-info-light-3);
1636
+ --el-alert-bg-color: var(--el-color-neutral-light-1);
1637
+ --el-alert-border-color: var(--el-color-neutral-light-3);
1619
1638
  }
1620
1639
  .el-alert--info.is-light {
1621
1640
  background-color: var(--el-alert-bg-color);
1622
- color: var(--el-color-info-light-5);
1641
+ color: var(--el-color-neutral-light-6);
1623
1642
  }
1624
1643
  .el-alert--info.is-light .el-alert__description {
1625
- color: var(--el-color-info-light-4);
1644
+ color: var(--el-color-neutral-light-6);
1626
1645
  }
1627
1646
  .el-alert--info.is-dark {
1628
- background-color: var(--el-color-info);
1647
+ background-color: var(--el-color-neutral);
1629
1648
  color: var(--el-color-white);
1630
1649
  }
1631
1650
  .el-alert--info.is-light .el-alert__close-btn {
1632
- color: var(--el-color-info-light-5);
1651
+ color: var(--el-color-neutral-light-6);
1633
1652
  }
1634
1653
 
1635
1654
  .el-alert--warning {
@@ -1638,17 +1657,17 @@ body {
1638
1657
  }
1639
1658
  .el-alert--warning.is-light {
1640
1659
  background-color: var(--el-alert-bg-color);
1641
- color: var(--el-color-warning-light-5);
1660
+ color: var(--el-color-warning-light-6);
1642
1661
  }
1643
1662
  .el-alert--warning.is-light .el-alert__description {
1644
- color: var(--el-color-warning-light-4);
1663
+ color: var(--el-color-warning-light-6);
1645
1664
  }
1646
1665
  .el-alert--warning.is-dark {
1647
1666
  background-color: var(--el-color-warning);
1648
1667
  color: var(--el-color-white);
1649
1668
  }
1650
1669
  .el-alert--warning.is-light .el-alert__close-btn {
1651
- color: var(--el-color-warning-light-5);
1670
+ color: var(--el-color-warning-light-6);
1652
1671
  }
1653
1672
 
1654
1673
  .el-alert--error {
@@ -1657,36 +1676,17 @@ body {
1657
1676
  }
1658
1677
  .el-alert--error.is-light {
1659
1678
  background-color: var(--el-alert-bg-color);
1660
- color: var(--el-color-error-light-5);
1679
+ color: var(--el-color-error-light-6);
1661
1680
  }
1662
1681
  .el-alert--error.is-light .el-alert__description {
1663
- color: var(--el-color-error-light-4);
1682
+ color: var(--el-color-error-light-6);
1664
1683
  }
1665
1684
  .el-alert--error.is-dark {
1666
1685
  background-color: var(--el-color-error);
1667
1686
  color: var(--el-color-white);
1668
1687
  }
1669
1688
  .el-alert--error.is-light .el-alert__close-btn {
1670
- color: var(--el-color-error-light-5);
1671
- }
1672
-
1673
- .el-alert--danger {
1674
- --el-alert-bg-color: var(--el-color-danger-light-1);
1675
- --el-alert-border-color: var(--el-color-danger-light-3);
1676
- }
1677
- .el-alert--danger.is-light {
1678
- background-color: var(--el-alert-bg-color);
1679
- color: var(--el-color-danger-light-5);
1680
- }
1681
- .el-alert--danger.is-light .el-alert__description {
1682
- color: var(--el-color-danger-light-4);
1683
- }
1684
- .el-alert--danger.is-dark {
1685
- background-color: var(--el-color-danger);
1686
- color: var(--el-color-white);
1687
- }
1688
- .el-alert--danger.is-light .el-alert__close-btn {
1689
- color: var(--el-color-danger-light-5);
1689
+ color: var(--el-color-error-light-6);
1690
1690
  }
1691
1691
 
1692
1692
  .el-alert::before {
@@ -11580,6 +11580,10 @@ heights > $common-component-size
11580
11580
  .el-message-box__status {
11581
11581
  font-size: 24px;
11582
11582
  }
11583
+ .el-message-box__status.el-message-box-icon--primary {
11584
+ --el-messagebox-color: var(--el-color-primary);
11585
+ color: var(--el-messagebox-color);
11586
+ }
11583
11587
  .el-message-box__status.el-message-box-icon--success {
11584
11588
  --el-messagebox-color: var(--el-color-success);
11585
11589
  color: var(--el-messagebox-color);
@@ -11596,10 +11600,6 @@ heights > $common-component-size
11596
11600
  --el-messagebox-color: var(--el-color-error);
11597
11601
  color: var(--el-messagebox-color);
11598
11602
  }
11599
- .el-message-box__status.el-message-box-icon--danger {
11600
- --el-messagebox-color: var(--el-color-danger);
11601
- color: var(--el-messagebox-color);
11602
- }
11603
11603
 
11604
11604
  .el-message-box__message {
11605
11605
  margin: 0;
@@ -11756,6 +11756,30 @@ heights > $common-component-size
11756
11756
  .el-message .el-message__closeBtn:hover {
11757
11757
  color: var(--el-color-info-light-6);
11758
11758
  }
11759
+ .el-message--primary {
11760
+ --el-message-bg-color: var(--el-color-primary-light-1);
11761
+ --el-message-border-color: var(--el-color-primary-light-3);
11762
+ --el-message-text-color: var(--el-color-primary);
11763
+ }
11764
+ .el-message--primary .el-message__content {
11765
+ color: var(--el-message-text-color);
11766
+ overflow-wrap: break-word;
11767
+ }
11768
+ .el-message--primary .el-message__closeBtn {
11769
+ color: var(--el-color-primary);
11770
+ }
11771
+ .el-message--primary .el-message__closeBtn:hover {
11772
+ color: var(--el-color-primary-light-4);
11773
+ }
11774
+ .el-message--primary .el-message__closeBtn:active {
11775
+ color: var(--el-color-primary-light-6);
11776
+ }
11777
+
11778
+ .el-message .el-message-icon--primary {
11779
+ color: var(--el-message-text-color);
11780
+ width: 12px;
11781
+ height: 12px;
11782
+ }
11759
11783
  .el-message--success {
11760
11784
  --el-message-bg-color: var(--el-color-success-light-1);
11761
11785
  --el-message-border-color: var(--el-color-success-light-3);
@@ -11852,30 +11876,6 @@ heights > $common-component-size
11852
11876
  width: 12px;
11853
11877
  height: 12px;
11854
11878
  }
11855
- .el-message--danger {
11856
- --el-message-bg-color: var(--el-color-danger-light-1);
11857
- --el-message-border-color: var(--el-color-danger-light-3);
11858
- --el-message-text-color: var(--el-color-danger);
11859
- }
11860
- .el-message--danger .el-message__content {
11861
- color: var(--el-message-text-color);
11862
- overflow-wrap: break-word;
11863
- }
11864
- .el-message--danger .el-message__closeBtn {
11865
- color: var(--el-color-danger);
11866
- }
11867
- .el-message--danger .el-message__closeBtn:hover {
11868
- color: var(--el-color-danger-light-4);
11869
- }
11870
- .el-message--danger .el-message__closeBtn:active {
11871
- color: var(--el-color-danger-light-6);
11872
- }
11873
-
11874
- .el-message .el-message-icon--danger {
11875
- color: var(--el-message-text-color);
11876
- width: 12px;
11877
- height: 12px;
11878
- }
11879
11879
  .el-message .el-message__badge {
11880
11880
  position: absolute;
11881
11881
  top: -8px;
@@ -12002,6 +12002,10 @@ heights > $common-component-size
12002
12002
  .el-notification .el-notification__closeBtn:hover {
12003
12003
  color: var(--el-notification-close-hover-color);
12004
12004
  }
12005
+ .el-notification .el-notification--primary {
12006
+ --el-notification-icon-color: var(--el-color-primary);
12007
+ color: var(--el-notification-icon-color);
12008
+ }
12005
12009
  .el-notification .el-notification--success {
12006
12010
  --el-notification-icon-color: var(--el-color-success);
12007
12011
  color: var(--el-notification-icon-color);
@@ -12018,10 +12022,6 @@ heights > $common-component-size
12018
12022
  --el-notification-icon-color: var(--el-color-error);
12019
12023
  color: var(--el-notification-icon-color);
12020
12024
  }
12021
- .el-notification .el-notification--danger {
12022
- --el-notification-icon-color: var(--el-color-danger);
12023
- color: var(--el-notification-icon-color);
12024
- }
12025
12025
 
12026
12026
  .el-notification-fade-enter-from.right {
12027
12027
  right: 0;
@@ -13,6 +13,21 @@
13
13
  <div class="flex gap-4 items-start flex-col">
14
14
  <el-alert :title="`default`" />
15
15
  <el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" show-icon />
16
+ </div>
17
+ </div>
18
+ <template #footer> <html-encode :tag="snippets.basic" /> </template>
19
+ </el-card>
20
+
21
+ <el-card>
22
+ <template #header> With Description </template>
23
+ <div class="flex flex-col gap-7.5">
24
+ <p>
25
+ Alert components are non-overlay elements in the page that does not disappear automatically. Alert provides 4 types of themes defined by
26
+ <el-text tag="mark">type</el-text>, whose default value is <el-text tag="mark">info</el-text>. And you can add a description to the alert width
27
+ <el-text tag="mark">description</el-text> attribute. Also you can use <el-text tag="mark">#default</el-text> slot to add a description to the alert.
28
+ </p>
29
+ <div class="flex gap-4 items-start flex-col">
30
+ <el-alert :title="`default`" description="This is a description." />
16
31
  <el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" description="This is a description." show-icon />
17
32
  </div>
18
33
  </div>
@@ -24,7 +39,7 @@
24
39
  <script lang="ts" setup>
25
40
  import { ref } from 'vue';
26
41
 
27
- const colors = ref(['success', 'warning', 'info', 'error', 'danger']);
42
+ const colors = ref(['primary', 'success', 'warning', 'info', 'error']);
28
43
 
29
44
  const snippets = ref({
30
45
  basic: `<el-alert title="Title Text Goes Here" type="danger" description="This is a description." show-icon :closable="false" />`,
@@ -309,11 +309,11 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
309
309
  --el-alert-description-font-size: 10px;
310
310
  --el-alert-close-font-size: 14px;
311
311
  --el-alert-close-customed-font-size: 14px;
312
- --el-alert-icon-size: 18px;
312
+ --el-alert-icon-size: 12px;
313
313
  --el-alert-icon-large-size: 32px;
314
314
  position: relative;
315
315
  width: 100%;
316
- padding: var(--el-alert-padding);
316
+ padding: 8px 16px;
317
317
  margin: 0;
318
318
  box-sizing: border-box;
319
319
  border-radius: var(--el-border-radius-small);
@@ -321,7 +321,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
321
321
  border-style: var(--el-border-style);
322
322
  border-color: var(--el-alert-border-color);
323
323
  position: relative;
324
- background-color: var(--el-color-info-light-1);
324
+ background-color: var(--el-color-neutral-light-1);
325
325
  overflow: hidden;
326
326
  opacity: 1;
327
327
  display: flex;
@@ -342,42 +342,61 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
342
342
  justify-content: center;
343
343
  }
344
344
 
345
+ .el-alert--primary {
346
+ --el-alert-bg-color: var(--el-color-primary-light-1);
347
+ --el-alert-border-color: var(--el-color-primary-light-3);
348
+ }
349
+ .el-alert--primary.is-light {
350
+ background-color: var(--el-alert-bg-color);
351
+ color: var(--el-color-primary-light-6);
352
+ }
353
+ .el-alert--primary.is-light .el-alert__description {
354
+ color: var(--el-color-primary-light-6);
355
+ }
356
+ .el-alert--primary.is-dark {
357
+ background-color: var(--el-color-primary);
358
+ color: var(--el-color-white);
359
+ }
360
+ .el-alert--primary.is-light .el-alert__close-btn {
361
+ color: var(--el-color-primary-light-6);
362
+ }
363
+
345
364
  .el-alert--success {
346
365
  --el-alert-bg-color: var(--el-color-success-light-1);
347
366
  --el-alert-border-color: var(--el-color-success-light-3);
348
367
  }
349
368
  .el-alert--success.is-light {
350
369
  background-color: var(--el-alert-bg-color);
351
- color: var(--el-color-success-light-5);
370
+ color: var(--el-color-success-light-6);
352
371
  }
353
372
  .el-alert--success.is-light .el-alert__description {
354
- color: var(--el-color-success-light-4);
373
+ color: var(--el-color-success-light-6);
355
374
  }
356
375
  .el-alert--success.is-dark {
357
376
  background-color: var(--el-color-success);
358
377
  color: var(--el-color-white);
359
378
  }
360
379
  .el-alert--success.is-light .el-alert__close-btn {
361
- color: var(--el-color-success-light-5);
380
+ color: var(--el-color-success-light-6);
362
381
  }
363
382
 
364
383
  .el-alert--info {
365
- --el-alert-bg-color: var(--el-color-info-light-1);
366
- --el-alert-border-color: var(--el-color-info-light-3);
384
+ --el-alert-bg-color: var(--el-color-neutral-light-1);
385
+ --el-alert-border-color: var(--el-color-neutral-light-3);
367
386
  }
368
387
  .el-alert--info.is-light {
369
388
  background-color: var(--el-alert-bg-color);
370
- color: var(--el-color-info-light-5);
389
+ color: var(--el-color-neutral-light-6);
371
390
  }
372
391
  .el-alert--info.is-light .el-alert__description {
373
- color: var(--el-color-info-light-4);
392
+ color: var(--el-color-neutral-light-6);
374
393
  }
375
394
  .el-alert--info.is-dark {
376
- background-color: var(--el-color-info);
395
+ background-color: var(--el-color-neutral);
377
396
  color: var(--el-color-white);
378
397
  }
379
398
  .el-alert--info.is-light .el-alert__close-btn {
380
- color: var(--el-color-info-light-5);
399
+ color: var(--el-color-neutral-light-6);
381
400
  }
382
401
 
383
402
  .el-alert--warning {
@@ -386,17 +405,17 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
386
405
  }
387
406
  .el-alert--warning.is-light {
388
407
  background-color: var(--el-alert-bg-color);
389
- color: var(--el-color-warning-light-5);
408
+ color: var(--el-color-warning-light-6);
390
409
  }
391
410
  .el-alert--warning.is-light .el-alert__description {
392
- color: var(--el-color-warning-light-4);
411
+ color: var(--el-color-warning-light-6);
393
412
  }
394
413
  .el-alert--warning.is-dark {
395
414
  background-color: var(--el-color-warning);
396
415
  color: var(--el-color-white);
397
416
  }
398
417
  .el-alert--warning.is-light .el-alert__close-btn {
399
- color: var(--el-color-warning-light-5);
418
+ color: var(--el-color-warning-light-6);
400
419
  }
401
420
 
402
421
  .el-alert--error {
@@ -405,36 +424,17 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
405
424
  }
406
425
  .el-alert--error.is-light {
407
426
  background-color: var(--el-alert-bg-color);
408
- color: var(--el-color-error-light-5);
427
+ color: var(--el-color-error-light-6);
409
428
  }
410
429
  .el-alert--error.is-light .el-alert__description {
411
- color: var(--el-color-error-light-4);
430
+ color: var(--el-color-error-light-6);
412
431
  }
413
432
  .el-alert--error.is-dark {
414
433
  background-color: var(--el-color-error);
415
434
  color: var(--el-color-white);
416
435
  }
417
436
  .el-alert--error.is-light .el-alert__close-btn {
418
- color: var(--el-color-error-light-5);
419
- }
420
-
421
- .el-alert--danger {
422
- --el-alert-bg-color: var(--el-color-danger-light-1);
423
- --el-alert-border-color: var(--el-color-danger-light-3);
424
- }
425
- .el-alert--danger.is-light {
426
- background-color: var(--el-alert-bg-color);
427
- color: var(--el-color-danger-light-5);
428
- }
429
- .el-alert--danger.is-light .el-alert__description {
430
- color: var(--el-color-danger-light-4);
431
- }
432
- .el-alert--danger.is-dark {
433
- background-color: var(--el-color-danger);
434
- color: var(--el-color-white);
435
- }
436
- .el-alert--danger.is-light .el-alert__close-btn {
437
- color: var(--el-color-danger-light-5);
437
+ color: var(--el-color-error-light-6);
438
438
  }
439
439
 
440
440
  .el-alert::before {
@@ -7,7 +7,7 @@
7
7
  position: relative;
8
8
 
9
9
  width: 100%;
10
- padding: getCssVar('alert', 'padding');
10
+ padding: 8px 16px;
11
11
  margin: 0;
12
12
  box-sizing: border-box;
13
13
  border-radius: getCssVar('border-radius-small');
@@ -15,7 +15,7 @@
15
15
  border-style: getCssVar('border-style');
16
16
  border-color: getCssVar('alert', 'border-color');
17
17
  position: relative;
18
- background-color: getCssVar('color', 'info-light-1');
18
+ background-color: getCssVar('color', 'neutral-light-1');
19
19
  overflow: hidden;
20
20
  opacity: 1;
21
21
  display: flex;
@@ -44,26 +44,26 @@
44
44
 
45
45
  @each $type in $semantic {
46
46
  @include m($type) {
47
- @include css-var-from-global(('alert', 'bg-color'), ('color', $type, 'light-1'));
48
- @include css-var-from-global(('alert', 'border-color'), ('color', $type, 'light-3'));
47
+ @include css-var-from-global(('alert', 'bg-color'), ('color', if($type == 'info', 'neutral', $type), 'light-1'));
48
+ @include css-var-from-global(('alert', 'border-color'), ('color', if($type == 'info', 'neutral', $type), 'light-3'));
49
49
 
50
50
  &.is-light {
51
51
  background-color: getCssVar('alert', 'bg-color');
52
- color: getCssVar('color', $type, 'light-5');
52
+ color: getCssVar('color', if($type == 'info', 'neutral', $type), 'light-6');
53
53
 
54
54
  .#{$namespace}-alert__description {
55
- color: getCssVar('color', $type, 'light-4');
55
+ color: getCssVar('color', if($type == 'info', 'neutral', $type), 'light-6');
56
56
  }
57
57
  }
58
58
 
59
59
  &.is-dark {
60
- background-color: getCssVar('color', $type);
60
+ background-color: getCssVar('color', if($type == 'info', 'neutral', $type));
61
61
  color: getCssVar('color', 'white');
62
62
  }
63
63
 
64
64
  @include when(light) {
65
65
  .#{$namespace}-alert__close-btn {
66
- color: getCssVar('color', $type, 'light-5');
66
+ color: getCssVar('color', if($type == 'info', 'neutral', $type), 'light-6');
67
67
  }
68
68
  }
69
69
  }
@@ -304,7 +304,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
304
304
  --el-color-white: #ffffff;
305
305
  --el-color-black: #000000;
306
306
  --el-color-primary-rgb: 87, 55, 214;
307
- --el-color-secondary-rgb: 119, 212, 183;
307
+ --el-color-secondary-rgb: 168, 166, 177;
308
308
  --el-color-neutral-rgb: 168, 166, 177;
309
309
  --el-color-success-rgb: 76, 183, 112;
310
310
  --el-color-warning-rgb: 232, 197, 82;
@@ -25,7 +25,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
25
25
 
26
26
  // types
27
27
  $types: primary, secondary, neutral, success, warning, danger, error, info;
28
- $semantic: success, info, warning, error, danger;
28
+ $semantic: primary, success, info, warning, error;
29
29
  $sizes: large, medium, small, mini;
30
30
  $variants: 1, 2, 4, 3, 5, 6, 7, 8, 9;
31
31
  // Color
@@ -38,7 +38,7 @@ $colors: map.deep-merge(
38
38
  'base': #5737d6,
39
39
  ),
40
40
  'secondary': (
41
- 'base': #77d4b7,
41
+ 'base': #a8a6b1,
42
42
  ),
43
43
  'neutral': (
44
44
  'base': #a8a6b1,
@@ -547,7 +547,7 @@ $alert: map.merge(
547
547
  'description-font-size': 10px,
548
548
  'close-font-size': 14px,
549
549
  'close-customed-font-size': 14px,
550
- 'icon-size': 18px,
550
+ 'icon-size': 12px,
551
551
  'icon-large-size': 32px,
552
552
  ),
553
553
  $alert
@@ -304,7 +304,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
304
304
  --el-color-white: #ffffff;
305
305
  --el-color-black: #000000;
306
306
  --el-color-primary-rgb: 87, 55, 214;
307
- --el-color-secondary-rgb: 119, 212, 183;
307
+ --el-color-secondary-rgb: 168, 166, 177;
308
308
  --el-color-neutral-rgb: 168, 166, 177;
309
309
  --el-color-success-rgb: 76, 183, 112;
310
310
  --el-color-warning-rgb: 232, 197, 82;
@@ -564,11 +564,11 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
564
564
  --el-alert-description-font-size: 10px;
565
565
  --el-alert-close-font-size: 14px;
566
566
  --el-alert-close-customed-font-size: 14px;
567
- --el-alert-icon-size: 18px;
567
+ --el-alert-icon-size: 12px;
568
568
  --el-alert-icon-large-size: 32px;
569
569
  position: relative;
570
570
  width: 100%;
571
- padding: var(--el-alert-padding);
571
+ padding: 8px 16px;
572
572
  margin: 0;
573
573
  box-sizing: border-box;
574
574
  border-radius: var(--el-border-radius-small);
@@ -576,7 +576,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
576
576
  border-style: var(--el-border-style);
577
577
  border-color: var(--el-alert-border-color);
578
578
  position: relative;
579
- background-color: var(--el-color-info-light-1);
579
+ background-color: var(--el-color-neutral-light-1);
580
580
  overflow: hidden;
581
581
  opacity: 1;
582
582
  display: flex;
@@ -597,42 +597,61 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
597
597
  justify-content: center;
598
598
  }
599
599
 
600
+ .el-alert--primary {
601
+ --el-alert-bg-color: var(--el-color-primary-light-1);
602
+ --el-alert-border-color: var(--el-color-primary-light-3);
603
+ }
604
+ .el-alert--primary.is-light {
605
+ background-color: var(--el-alert-bg-color);
606
+ color: var(--el-color-primary-light-6);
607
+ }
608
+ .el-alert--primary.is-light .el-alert__description {
609
+ color: var(--el-color-primary-light-6);
610
+ }
611
+ .el-alert--primary.is-dark {
612
+ background-color: var(--el-color-primary);
613
+ color: var(--el-color-white);
614
+ }
615
+ .el-alert--primary.is-light .el-alert__close-btn {
616
+ color: var(--el-color-primary-light-6);
617
+ }
618
+
600
619
  .el-alert--success {
601
620
  --el-alert-bg-color: var(--el-color-success-light-1);
602
621
  --el-alert-border-color: var(--el-color-success-light-3);
603
622
  }
604
623
  .el-alert--success.is-light {
605
624
  background-color: var(--el-alert-bg-color);
606
- color: var(--el-color-success-light-5);
625
+ color: var(--el-color-success-light-6);
607
626
  }
608
627
  .el-alert--success.is-light .el-alert__description {
609
- color: var(--el-color-success-light-4);
628
+ color: var(--el-color-success-light-6);
610
629
  }
611
630
  .el-alert--success.is-dark {
612
631
  background-color: var(--el-color-success);
613
632
  color: var(--el-color-white);
614
633
  }
615
634
  .el-alert--success.is-light .el-alert__close-btn {
616
- color: var(--el-color-success-light-5);
635
+ color: var(--el-color-success-light-6);
617
636
  }
618
637
 
619
638
  .el-alert--info {
620
- --el-alert-bg-color: var(--el-color-info-light-1);
621
- --el-alert-border-color: var(--el-color-info-light-3);
639
+ --el-alert-bg-color: var(--el-color-neutral-light-1);
640
+ --el-alert-border-color: var(--el-color-neutral-light-3);
622
641
  }
623
642
  .el-alert--info.is-light {
624
643
  background-color: var(--el-alert-bg-color);
625
- color: var(--el-color-info-light-5);
644
+ color: var(--el-color-neutral-light-6);
626
645
  }
627
646
  .el-alert--info.is-light .el-alert__description {
628
- color: var(--el-color-info-light-4);
647
+ color: var(--el-color-neutral-light-6);
629
648
  }
630
649
  .el-alert--info.is-dark {
631
- background-color: var(--el-color-info);
650
+ background-color: var(--el-color-neutral);
632
651
  color: var(--el-color-white);
633
652
  }
634
653
  .el-alert--info.is-light .el-alert__close-btn {
635
- color: var(--el-color-info-light-5);
654
+ color: var(--el-color-neutral-light-6);
636
655
  }
637
656
 
638
657
  .el-alert--warning {
@@ -641,17 +660,17 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
641
660
  }
642
661
  .el-alert--warning.is-light {
643
662
  background-color: var(--el-alert-bg-color);
644
- color: var(--el-color-warning-light-5);
663
+ color: var(--el-color-warning-light-6);
645
664
  }
646
665
  .el-alert--warning.is-light .el-alert__description {
647
- color: var(--el-color-warning-light-4);
666
+ color: var(--el-color-warning-light-6);
648
667
  }
649
668
  .el-alert--warning.is-dark {
650
669
  background-color: var(--el-color-warning);
651
670
  color: var(--el-color-white);
652
671
  }
653
672
  .el-alert--warning.is-light .el-alert__close-btn {
654
- color: var(--el-color-warning-light-5);
673
+ color: var(--el-color-warning-light-6);
655
674
  }
656
675
 
657
676
  .el-alert--error {
@@ -660,36 +679,17 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
660
679
  }
661
680
  .el-alert--error.is-light {
662
681
  background-color: var(--el-alert-bg-color);
663
- color: var(--el-color-error-light-5);
682
+ color: var(--el-color-error-light-6);
664
683
  }
665
684
  .el-alert--error.is-light .el-alert__description {
666
- color: var(--el-color-error-light-4);
685
+ color: var(--el-color-error-light-6);
667
686
  }
668
687
  .el-alert--error.is-dark {
669
688
  background-color: var(--el-color-error);
670
689
  color: var(--el-color-white);
671
690
  }
672
691
  .el-alert--error.is-light .el-alert__close-btn {
673
- color: var(--el-color-error-light-5);
674
- }
675
-
676
- .el-alert--danger {
677
- --el-alert-bg-color: var(--el-color-danger-light-1);
678
- --el-alert-border-color: var(--el-color-danger-light-3);
679
- }
680
- .el-alert--danger.is-light {
681
- background-color: var(--el-alert-bg-color);
682
- color: var(--el-color-danger-light-5);
683
- }
684
- .el-alert--danger.is-light .el-alert__description {
685
- color: var(--el-color-danger-light-4);
686
- }
687
- .el-alert--danger.is-dark {
688
- background-color: var(--el-color-danger);
689
- color: var(--el-color-white);
690
- }
691
- .el-alert--danger.is-light .el-alert__close-btn {
692
- color: var(--el-color-danger-light-5);
692
+ color: var(--el-color-error-light-6);
693
693
  }
694
694
 
695
695
  .el-alert::before {
@@ -10694,6 +10694,10 @@ h6,
10694
10694
  .el-message-box__status {
10695
10695
  font-size: 24px;
10696
10696
  }
10697
+ .el-message-box__status.el-message-box-icon--primary {
10698
+ --el-messagebox-color: var(--el-color-primary);
10699
+ color: var(--el-messagebox-color);
10700
+ }
10697
10701
  .el-message-box__status.el-message-box-icon--success {
10698
10702
  --el-messagebox-color: var(--el-color-success);
10699
10703
  color: var(--el-messagebox-color);
@@ -10710,10 +10714,6 @@ h6,
10710
10714
  --el-messagebox-color: var(--el-color-error);
10711
10715
  color: var(--el-messagebox-color);
10712
10716
  }
10713
- .el-message-box__status.el-message-box-icon--danger {
10714
- --el-messagebox-color: var(--el-color-danger);
10715
- color: var(--el-messagebox-color);
10716
- }
10717
10717
 
10718
10718
  .el-message-box__message {
10719
10719
  margin: 0;
@@ -10870,6 +10870,30 @@ h6,
10870
10870
  .el-message .el-message__closeBtn:hover {
10871
10871
  color: var(--el-color-info-light-6);
10872
10872
  }
10873
+ .el-message--primary {
10874
+ --el-message-bg-color: var(--el-color-primary-light-1);
10875
+ --el-message-border-color: var(--el-color-primary-light-3);
10876
+ --el-message-text-color: var(--el-color-primary);
10877
+ }
10878
+ .el-message--primary .el-message__content {
10879
+ color: var(--el-message-text-color);
10880
+ overflow-wrap: break-word;
10881
+ }
10882
+ .el-message--primary .el-message__closeBtn {
10883
+ color: var(--el-color-primary);
10884
+ }
10885
+ .el-message--primary .el-message__closeBtn:hover {
10886
+ color: var(--el-color-primary-light-4);
10887
+ }
10888
+ .el-message--primary .el-message__closeBtn:active {
10889
+ color: var(--el-color-primary-light-6);
10890
+ }
10891
+
10892
+ .el-message .el-message-icon--primary {
10893
+ color: var(--el-message-text-color);
10894
+ width: 12px;
10895
+ height: 12px;
10896
+ }
10873
10897
  .el-message--success {
10874
10898
  --el-message-bg-color: var(--el-color-success-light-1);
10875
10899
  --el-message-border-color: var(--el-color-success-light-3);
@@ -10966,30 +10990,6 @@ h6,
10966
10990
  width: 12px;
10967
10991
  height: 12px;
10968
10992
  }
10969
- .el-message--danger {
10970
- --el-message-bg-color: var(--el-color-danger-light-1);
10971
- --el-message-border-color: var(--el-color-danger-light-3);
10972
- --el-message-text-color: var(--el-color-danger);
10973
- }
10974
- .el-message--danger .el-message__content {
10975
- color: var(--el-message-text-color);
10976
- overflow-wrap: break-word;
10977
- }
10978
- .el-message--danger .el-message__closeBtn {
10979
- color: var(--el-color-danger);
10980
- }
10981
- .el-message--danger .el-message__closeBtn:hover {
10982
- color: var(--el-color-danger-light-4);
10983
- }
10984
- .el-message--danger .el-message__closeBtn:active {
10985
- color: var(--el-color-danger-light-6);
10986
- }
10987
-
10988
- .el-message .el-message-icon--danger {
10989
- color: var(--el-message-text-color);
10990
- width: 12px;
10991
- height: 12px;
10992
- }
10993
10993
  .el-message .el-message__badge {
10994
10994
  position: absolute;
10995
10995
  top: -8px;
@@ -11116,6 +11116,10 @@ h6,
11116
11116
  .el-notification .el-notification__closeBtn:hover {
11117
11117
  color: var(--el-notification-close-hover-color);
11118
11118
  }
11119
+ .el-notification .el-notification--primary {
11120
+ --el-notification-icon-color: var(--el-color-primary);
11121
+ color: var(--el-notification-icon-color);
11122
+ }
11119
11123
  .el-notification .el-notification--success {
11120
11124
  --el-notification-icon-color: var(--el-color-success);
11121
11125
  color: var(--el-notification-icon-color);
@@ -11132,10 +11136,6 @@ h6,
11132
11136
  --el-notification-icon-color: var(--el-color-error);
11133
11137
  color: var(--el-notification-icon-color);
11134
11138
  }
11135
- .el-notification .el-notification--danger {
11136
- --el-notification-icon-color: var(--el-color-danger);
11137
- color: var(--el-notification-icon-color);
11138
- }
11139
11139
 
11140
11140
  .el-notification-fade-enter-from.right {
11141
11141
  right: 0;
@@ -458,6 +458,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
458
458
  .el-message-box__status {
459
459
  font-size: 24px;
460
460
  }
461
+ .el-message-box__status.el-message-box-icon--primary {
462
+ --el-messagebox-color: var(--el-color-primary);
463
+ color: var(--el-messagebox-color);
464
+ }
461
465
  .el-message-box__status.el-message-box-icon--success {
462
466
  --el-messagebox-color: var(--el-color-success);
463
467
  color: var(--el-messagebox-color);
@@ -474,10 +478,6 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
474
478
  --el-messagebox-color: var(--el-color-error);
475
479
  color: var(--el-messagebox-color);
476
480
  }
477
- .el-message-box__status.el-message-box-icon--danger {
478
- --el-messagebox-color: var(--el-color-danger);
479
- color: var(--el-messagebox-color);
480
- }
481
481
 
482
482
  .el-message-box__message {
483
483
  margin: 0;
@@ -360,6 +360,30 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
360
360
  .el-message .el-message__closeBtn:hover {
361
361
  color: var(--el-color-info-light-6);
362
362
  }
363
+ .el-message--primary {
364
+ --el-message-bg-color: var(--el-color-primary-light-1);
365
+ --el-message-border-color: var(--el-color-primary-light-3);
366
+ --el-message-text-color: var(--el-color-primary);
367
+ }
368
+ .el-message--primary .el-message__content {
369
+ color: var(--el-message-text-color);
370
+ overflow-wrap: break-word;
371
+ }
372
+ .el-message--primary .el-message__closeBtn {
373
+ color: var(--el-color-primary);
374
+ }
375
+ .el-message--primary .el-message__closeBtn:hover {
376
+ color: var(--el-color-primary-light-4);
377
+ }
378
+ .el-message--primary .el-message__closeBtn:active {
379
+ color: var(--el-color-primary-light-6);
380
+ }
381
+
382
+ .el-message .el-message-icon--primary {
383
+ color: var(--el-message-text-color);
384
+ width: 12px;
385
+ height: 12px;
386
+ }
363
387
  .el-message--success {
364
388
  --el-message-bg-color: var(--el-color-success-light-1);
365
389
  --el-message-border-color: var(--el-color-success-light-3);
@@ -456,30 +480,6 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
456
480
  width: 12px;
457
481
  height: 12px;
458
482
  }
459
- .el-message--danger {
460
- --el-message-bg-color: var(--el-color-danger-light-1);
461
- --el-message-border-color: var(--el-color-danger-light-3);
462
- --el-message-text-color: var(--el-color-danger);
463
- }
464
- .el-message--danger .el-message__content {
465
- color: var(--el-message-text-color);
466
- overflow-wrap: break-word;
467
- }
468
- .el-message--danger .el-message__closeBtn {
469
- color: var(--el-color-danger);
470
- }
471
- .el-message--danger .el-message__closeBtn:hover {
472
- color: var(--el-color-danger-light-4);
473
- }
474
- .el-message--danger .el-message__closeBtn:active {
475
- color: var(--el-color-danger-light-6);
476
- }
477
-
478
- .el-message .el-message-icon--danger {
479
- color: var(--el-message-text-color);
480
- width: 12px;
481
- height: 12px;
482
- }
483
483
  .el-message .el-message__badge {
484
484
  position: absolute;
485
485
  top: -8px;
@@ -378,6 +378,10 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
378
378
  .el-notification .el-notification__closeBtn:hover {
379
379
  color: var(--el-notification-close-hover-color);
380
380
  }
381
+ .el-notification .el-notification--primary {
382
+ --el-notification-icon-color: var(--el-color-primary);
383
+ color: var(--el-notification-icon-color);
384
+ }
381
385
  .el-notification .el-notification--success {
382
386
  --el-notification-icon-color: var(--el-color-success);
383
387
  color: var(--el-notification-icon-color);
@@ -394,10 +398,6 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
394
398
  --el-notification-icon-color: var(--el-color-error);
395
399
  color: var(--el-notification-icon-color);
396
400
  }
397
- .el-notification .el-notification--danger {
398
- --el-notification-icon-color: var(--el-color-danger);
399
- color: var(--el-notification-icon-color);
400
- }
401
401
 
402
402
  .el-notification-fade-enter-from.right {
403
403
  right: 0;
@@ -304,7 +304,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
304
304
  --el-color-white: #ffffff;
305
305
  --el-color-black: #000000;
306
306
  --el-color-primary-rgb: 87, 55, 214;
307
- --el-color-secondary-rgb: 119, 212, 183;
307
+ --el-color-secondary-rgb: 168, 166, 177;
308
308
  --el-color-neutral-rgb: 168, 166, 177;
309
309
  --el-color-success-rgb: 76, 183, 112;
310
310
  --el-color-warning-rgb: 232, 197, 82;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@timus-networks/theme",
3
- "version": "2.4.138",
3
+ "version": "2.4.140",
4
4
  "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
5
5
  "type": "module",
6
6
  "exports": {