@dile/ui 2.6.1 → 2.7.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.
Files changed (21) hide show
  1. package/components/breadcrumbs/src/DileBreadcrumbs.js +2 -2
  2. package/components/breadcrumbs/src/DileBreadcrumbsItem.js +1 -1
  3. package/components/button/src/DileButton.js +1 -1
  4. package/components/checkbox/src/DileCheckbox.js +2 -2
  5. package/components/drop-file/src/DileDropFile.js +1 -1
  6. package/components/form-separator/src/DileFormSeparator.js +2 -2
  7. package/components/hamburger/src/DileHamburger.js +1 -1
  8. package/components/icon-switch/src/DileIconSwitch.js +1 -1
  9. package/components/input/src/DileInput.js +1 -0
  10. package/components/light-mode-switch/index.js +1 -0
  11. package/components/light-mode-switch/light-mode-switch.js +3 -0
  12. package/components/light-mode-switch/src/DileLightModeSwitch.js +107 -0
  13. package/components/modal/src/DileModal.js +1 -1
  14. package/components/radio-group/src/DileRadio.js +5 -4
  15. package/components/range/src/DileRange.js +2 -2
  16. package/components/selector/src/DileSelectorItem.js +2 -2
  17. package/components/slide-menu/src/DileSlideMenu.js +1 -1
  18. package/components/switch/src/DileSwitch.js +13 -3
  19. package/components/tooltip/src/DileChipTooltip.js +1 -1
  20. package/package.json +3 -3
  21. package/styles/colors.css +45 -0
package/components/breadcrumbs/src/DileBreadcrumbs.js CHANGED
@@ -26,7 +26,7 @@ export class DileBreadcrumbs extends LitElement {
26
26
  ::slotted(dile-breadcrumbs-item.separator)::before {
27
27
  padding-right: var(--dile-breadcrumbs-separator-width, 0.5rem);
28
28
  font-size: var(--dile-breadcrumbs-font-size, 1rem);
29
- color: var(--dile-breadcrumbs-text-color, #303030);
29
+ color: var(--dile-breadcrumbs-text-color, var(--dile-on-background-color, #303030));
30
30
  }
31
31
  .separator {
32
32
  padding-left: var(--dile-breadcrumbs-separator-width, 0.5rem);
@@ -34,7 +34,7 @@ export class DileBreadcrumbs extends LitElement {
34
34
  .separator::before {
35
35
  padding-right: var(--dile-breadcrumbs-separator-width, 0.5rem);
36
36
  font-size: var(--dile-breadcrumbs-font-size, 1rem);
37
- color: var(--dile-breadcrumbs-text-color, #000);
37
+ color: var(--dile-breadcrumbs-text-color, var(--dile-on-background-color, #303030));
38
38
  }
39
39
  `;
40
40
  }
package/components/breadcrumbs/src/DileBreadcrumbsItem.js CHANGED
@@ -9,7 +9,7 @@ export class DileBreadcrumbsItem extends LitElement {
9
9
  }
10
10
  a, .named {
11
11
  text-decoration: var(--dile-breadcrumbs-text-decoration, none);
12
- color: var(--dile-breadcrumbs-link-color, #39c);
12
+ color: var(--dile-breadcrumbs-link-color, var(--dile-link-color, #39c));
13
13
  }
14
14
  .named {
15
15
  cursor: pointer;
package/components/button/src/DileButton.js CHANGED
@@ -26,7 +26,7 @@ export class DileButton extends LitElement {
26
26
  padding-left: var(--dile-button-padding-x, 0.8rem);
27
27
  border-radius: var(--dile-button-border-radius, 2rem);
28
28
  border-width: var(--dile-button-border-width, 3px);
29
- border-color: var(--dile-primary-dark-color, #07193b);
29
+ border-color: var(--dile-primary-dark-color, #12354d);
30
30
  background-color: var(--dile-primary-color, #7BB93D);
31
31
  transition-property: background-color, color, border-color;
32
32
  transition-duration: 0.3s;
package/components/checkbox/src/DileCheckbox.js CHANGED
@@ -67,10 +67,10 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
67
67
  .label {
68
68
  margin-left: 10px;
69
69
  font-weight: var(--dile-checkbox-font-weight, normal);
70
- color: var(--dile-checkbox-label-color, #303030);
70
+ color: var(--dile-checkbox-label-color, var(--dile-on-background-color, #303030));
71
71
  }
72
72
  .disabled .label {
73
- color: var(--dile-checkbox-label-disabled-color, #303030);
73
+ color: var(--dile-checkbox-label-disabled-color, #777);
74
74
  }
75
75
  `;
76
76
  }
package/components/drop-file/src/DileDropFile.js CHANGED
@@ -17,7 +17,7 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
17
17
  #dropZone {
18
18
  width: 100%;
19
19
  min-height: var(--dile-drop-zone-min-height, auto);
20
- border: 2px dashed #ccc;
20
+ border: 2px dashed var(--dile-drop-zone-border-color, #ccc);
21
21
  display: flex;
22
22
  flex-direction: column;
23
23
  align-items: center;
package/components/form-separator/src/DileFormSeparator.js CHANGED
@@ -7,13 +7,13 @@ export class DileFormSeparator extends LitElement {
7
7
  display: block;
8
8
  }
9
9
  div {
10
- border-top: 1px solid var(--dile-secondary-dark-color);
10
+ border-top: 1px solid var(--dile-form-separator-color, var(--dile-secondary-dark-color, #888));
11
11
  margin: 1.5rem 0.2rem 1rem;
12
12
  }
13
13
  h3 {
14
14
  margin: 1rem 0 0.5rem 0;
15
15
  font-weight: 300;
16
- color: var(--dile-secondary-dark-color);
16
+ color: var(--dile-form-separator-text-color, var(--dile-secondary-dark-color, #888));
17
17
  font-size: 1.1rem;
18
18
  }
19
19
  :host([removeline]) div {
package/components/hamburger/src/DileHamburger.js CHANGED
@@ -57,7 +57,7 @@ export class DileHamburger extends LitElement {
57
57
  .hamburger-inner::after {
58
58
  width: var(--dile-hamburger-width, 24px);
59
59
  height: var(--dile-hamburger-line-size, 3px);
60
- background-color: var(--dile-foreground-color, #000);
60
+ background-color: var(--dile-on-primary-color, var(--dile-foreground-color, #000));
61
61
  border-radius: var(--dile-hamburger-line-size, 3px);
62
62
  position: absolute;
63
63
  transition-property: transform;
package/components/icon-switch/src/DileIconSwitch.js CHANGED
@@ -20,7 +20,7 @@ export class DileIconSwitch extends LitElement {
20
20
  display: inline-block;
21
21
  }
22
22
  dile-icon {
23
- --dile-icon-color: var(--dile-icon-switch-inactive-color, #303030);
23
+ --dile-icon-color: var(--dile-icon-switch-inactive-color, #888);
24
24
  }
25
25
  :host([active]) dile-icon{
26
26
  --dile-icon-color: var(--dile-icon-switch-active-color, #7BB93D);
package/components/input/src/DileInput.js CHANGED
@@ -143,6 +143,7 @@ export class DileInput extends DileEmmitChange(LitElement) {
143
143
  }
144
144
  .errored {
145
145
  border-color: var(--dile-input-error-border-color, #c00);
146
+ background-color: var(--dile-input-error-background-color, var(--dile-input-background-color, #fff));
146
147
  }
147
148
  section.for-input {
148
149
  display: flex;
package/components/light-mode-switch/index.js ADDED
@@ -0,0 +1 @@
1
+ export { DileLightModeSwitch } from './src/DileLightModeSwitch.js';
package/components/light-mode-switch/light-mode-switch.js ADDED
@@ -0,0 +1,3 @@
1
+ import { DileLightModeSwitch } from "./src/DileLightModeSwitch.js";
2
+
3
+ window.customElements.define("dile-light-mode-switch", DileLightModeSwitch);
package/components/light-mode-switch/src/DileLightModeSwitch.js ADDED
@@ -0,0 +1,107 @@
1
+ import { LitElement, html, css } from "lit";
2
+ import { darkMode, lightMode } from "../../../../icons/index.js";
3
+ import '../../switch/switch.js';
4
+ import '../../icon/icon.js';
5
+
6
+ export class DileLightModeSwitch extends LitElement {
7
+ static get styles() {
8
+ return css`
9
+ :host {
10
+ display: inline-block;
11
+ --dile-switch-off-state-color: var(--dile-light-mode-switch-light-state-color, #303030);
12
+ --dile-switch-on-state-color: var(--dile-light-mode-switch-dark-state-color, #e5e5e5);
13
+ --dile-switch-bar-color: var(--dile-light-mode-switch-light-state-bar-color, #dddddd);
14
+ --dile-icon-color: var(--dile-light-mode-switch-light-state-icon-color, #303030);
15
+ --dile-switch-off-focus-color: var(--dile-light-mode-switch-light-state-focus-color, #3d91e5);
16
+ }
17
+ :host([darkMode]) {
18
+ --dile-switch-bar-color: var(--dile-light-mode-switch-dark-state-bar-color, #6c6c6c);
19
+ --dile-icon-color: var(--dile-light-mode-switch-dark-state-icon-color, #e5e5e5);
20
+ --dile-switch-on-focus-color: var(--dile-light-mode-switch-dark-state-focus-color, #ff9);
21
+ }
22
+
23
+ section {
24
+ display: flex;
25
+ align-items: center;
26
+ gap: 0.5rem;
27
+ }
28
+ dile-icon {
29
+ cursor: pointer;
30
+ }
31
+ `;
32
+ }
33
+ static get properties() {
34
+ return {
35
+ darkModeClass: { type: String },
36
+ darkMode: { type: Boolean, reflect: true },
37
+ syncName: { type: String },
38
+ };
39
+ }
40
+
41
+ sync(e) {
42
+ if(e.detail.syncName && e.detail.syncName == this.syncName && this.darkMode != e.detail.darkMode) {
43
+ this.darkMode = e.detail.darkMode;
44
+ }
45
+ }
46
+
47
+ constructor() {
48
+ super();
49
+ this.darkModeClass = "dark-theme";
50
+ const storedMode = localStorage.getItem("dile_light_mode_switch_state");
51
+ if (storedMode === "dark") {
52
+ this.darkMode = true;
53
+ } else if (storedMode === "light") {
54
+ this.darkMode = false;
55
+ } else {
56
+ this.darkMode = document.documentElement.classList.contains(this.darkModeClass);
57
+ }
58
+ this.syncHandler = this.sync.bind(this);
59
+ }
60
+
61
+ connectedCallback() {
62
+ super.connectedCallback();
63
+ document.addEventListener('dile-ligth-mode-changed', this.syncHandler);
64
+ }
65
+
66
+ disconnectedCallback() {
67
+ super.disconnectedCallback();
68
+ document.removeEventListener('dile-ligth-mode-changed', this.syncHandler);
69
+ }
70
+
71
+ updated(changedProperties) {
72
+ if(changedProperties.has('darkMode')) {
73
+ if(this.darkMode) {
74
+ document.documentElement.classList.add(this.darkModeClass);
75
+ localStorage.setItem("dile_light_mode_switch_state", "dark");
76
+ } else {
77
+ document.documentElement.classList.remove(this.darkModeClass);
78
+ localStorage.setItem("dile_light_mode_switch_state", "light");
79
+ }
80
+ this.dispatchEvent(new CustomEvent('dile-ligth-mode-changed', {
81
+ bubbles: true,
82
+ composed: true,
83
+ detail: {
84
+ darkMode: this.darkMode,
85
+ syncName: this.syncName
86
+ }
87
+ }));
88
+ }
89
+ }
90
+
91
+ render() {
92
+ return html`
93
+ <section>
94
+ <dile-icon .icon="${this.darkMode ? darkMode : lightMode }" @click=${this.toggle}></dile-icon>
95
+ <dile-switch ?checked="${this.darkMode}" @element-changed=${this.change}></dile-switch>
96
+ </section>
97
+ `;
98
+ }
99
+
100
+ change(e) {
101
+ this.darkMode = e.detail.value;
102
+ }
103
+
104
+ toggle() {
105
+ this.darkMode = !this.darkMode;
106
+ }
107
+ }
package/components/modal/src/DileModal.js CHANGED
@@ -74,7 +74,7 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
74
74
  max-width: var(--dile-modal-max-width, 100vw);
75
75
  height: auto;
76
76
  min-height: var(--dile-modal-min-height, auto);
77
-
77
+ color: var(--dile-modal-content-text-color, #303030);
78
78
  background-color: var(--dile-modal-content-background-color, #fff);
79
79
  box-shadow: var(--dile-modal-content-shadow-displacement, 6px)
80
80
  var(--dile-modal-content-shadow-displacement, 6px)
package/components/radio-group/src/DileRadio.js CHANGED
@@ -7,6 +7,7 @@ export class DileRadio extends LitElement {
7
7
  css`
8
8
  :host {
9
9
  display: block;
10
+ --radio-default-color: var(--dile-on-background-color, #303030);
10
11
  }
11
12
  article {
12
13
  display: flex;
@@ -16,17 +17,17 @@ export class DileRadio extends LitElement {
16
17
  margin-right: var(--dile-radio-space-between-label-and-icon, 0.4rem);
17
18
  display: flex;
18
19
  --dile-icon-size: var(--dile-radio-icon-size, 1.2rem);
19
- --dile-icon-color: var(--dile-radio-icon-color, #303030);
20
+ --dile-icon-color: var(--dile-radio-icon-color, var(--radio-default-color));
20
21
  }
21
22
  .label {
22
23
  font-size: var(--dile-radio-label-font-size, 1rem);
23
- color: var(--dile-radio-label-color, #303030);
24
+ color: var(--dile-radio-label-color, var(--radio-default-color));
24
25
  }
25
26
  :host([selected]) .radio {
26
- --dile-icon-color: var(--dile-radio-selected-icon-color, var(--dile-radio-icon-color, #303030));
27
+ --dile-icon-color: var(--dile-radio-selected-icon-color, var(--dile-radio-icon-color, var(--radio-default-color)));
27
28
  }
28
29
  :host([selected]) .label {
29
- color: var(--dile-radio-selected-label-color, var(--dile-radio-label-color, #303030));
30
+ color: var(--dile-radio-selected-label-color, var(--dile-radio-label-color, var(--radio-default-color)));
30
31
  }
31
32
  `
32
33
  ];
package/components/range/src/DileRange.js CHANGED
@@ -53,14 +53,14 @@ export class DileRange extends DileEmmitChange(LitElement) {
53
53
  -webkit-appearance: none; /* Override default look */
54
54
  appearance: none;
55
55
  margin-top: var(--dile-range-thumb-margin-top, -8px); /* Centers thumb on the track */
56
- background-color: var(--dile-range-thumb-color, #303030);
56
+ background-color: var(--dile-range-thumb-color, var(--dile-on-background-color, #303030));
57
57
  border-radius: var(--dile-range-thumb-border-radius, 2rem);
58
58
  height: var(--dile-range-thumb-height, 1.5rem);
59
59
  width: var(--dile-range-thumb-width, 1.5rem);
60
60
  }
61
61
 
62
62
  input[type="range"]:focus::-webkit-slider-thumb {
63
- outline: 3px solid var(--dile-range-thumb-color, #303030);
63
+ outline: 3px solid var(--dile-range-thumb-color, var(--dile-on-background-color, #303030));
64
64
  outline-offset: 0.125rem;
65
65
  }
66
66
 
package/components/selector/src/DileSelectorItem.js CHANGED
@@ -25,7 +25,7 @@ export class DileSelectorItem extends DileSelectableItem(LitElement) {
25
25
  padding-left: var(--dile-selector-padding-x, 0.5rem);
26
26
  padding-right: var(--dile-selector-padding-x, 0.5rem);
27
27
  background-color: var(--dile-selector-background-color, transparent);
28
- color: var(--dile-selector-text-color, #000);
28
+ color: var(--dile-selector-text-color, var(--dile-on-background-color, #303030));
29
29
  transition: all 0.3s ease-in;
30
30
  }
31
31
  .selected {
@@ -41,7 +41,7 @@ export class DileSelectorItem extends DileSelectableItem(LitElement) {
41
41
  }
42
42
  .icon svg {
43
43
  color: red;
44
- fill: var(--dile-selector-icon-color, #039be5);
44
+ fill: var(--dile-selector-icon-color, var(--dile-selector-primary-color, #039be5));
45
45
  width: var(--dile-selector-icon-size, 20px);
46
46
  height: var(--dile-selector-icon-size, 20px);
47
47
  }
package/components/slide-menu/src/DileSlideMenu.js CHANGED
@@ -43,7 +43,7 @@ export class DileSlideMenu extends DileSlideDown(LitElement) {
43
43
  align-items: center;
44
44
  cursor: pointer;
45
45
  font-size: var(--dile-slide-menu-font-size, 1em);
46
- color: var(--dile-slide-menu-color, #303030);
46
+ color: var(--dile-slide-menu-color, var(--dile-on-background-color, #303030));
47
47
  font-weight: var(--dile-slide-menu-font-weight, bold);
48
48
  text-decoration: var(--dile-slide-menu-text-decoration, none);
49
49
  --dile-icon-color: var(--dile-primary-color, #303030);
package/components/switch/src/DileSwitch.js CHANGED
@@ -7,6 +7,7 @@ export class DileSwitch extends DileCheckbox {
7
7
  :host {
8
8
  display: inline-block;
9
9
  }
10
+
10
11
  div {
11
12
  display: flex;
12
13
  flex-direction: var(--dile-switch-flex-direction, row);
@@ -23,7 +24,8 @@ export class DileSwitch extends DileCheckbox {
23
24
  align-items: center;
24
25
  justify-content: flex-start;
25
26
  }
26
- span {
27
+ button {
28
+ cursor: pointer;
27
29
  width: 24px;
28
30
  height: 24px;
29
31
  left: 0px;
@@ -31,11 +33,19 @@ export class DileSwitch extends DileCheckbox {
31
33
  border-radius: 50%;
32
34
  background-color: var(--dile-switch-off-state-color, #d52121);
33
35
  transition: all 0.2s linear;
36
+ outline: none;
37
+ border: none;
34
38
  }
35
- :host([checked]) span {
39
+ :host([checked]) button {
36
40
  left: 32px;
37
41
  background-color: var(--dile-switch-on-state-color, #2566e8);
38
42
  }
43
+ button:focus {
44
+ border: 3px solid var(--dile-switch-off-focus-color, #fdb423);
45
+ }
46
+ :host([checked]) button:focus {
47
+ border: 3px solid var(--dile-switch-on-focus-color, #6fc);
48
+ }
39
49
  :host([disabled]) {
40
50
  opacity: 0.5;
41
51
  }
@@ -54,7 +64,7 @@ export class DileSwitch extends DileCheckbox {
54
64
  return html`
55
65
  <div @click=${this.toggle}>
56
66
  <section>
57
- <span></span>
67
+ <button></button>
58
68
  </section>
59
69
  ${this.useReactiveLabels
60
70
  ? this.reactiveLabelsTemplate
package/components/tooltip/src/DileChipTooltip.js CHANGED
@@ -29,7 +29,7 @@ export class DileChipTooltip extends LitElement {
29
29
  transition: background-color 0.3s ease-in-out;
30
30
  }
31
31
  .chip:hover {
32
- background-color: var(--dile-chip-tooltip-hover-background-color, #303030);
32
+ background-color: var(--dile-chip-tooltip-hover-background-color, var(--dile-primary-dark-color, #14644f));
33
33
  }
34
34
  .label {
35
35
  display: inline-block;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dile/ui",
3
- "version": "2.6.1",
3
+ "version": "2.7.0",
4
4
  "description": "UI Core components from dile-components.",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -20,11 +20,11 @@
20
20
  },
21
21
  "homepage": "https://dile-components.com/",
22
22
  "dependencies": {
23
- "@dile/icons": "^2.1.3",
23
+ "@dile/icons": "^2.2.0",
24
24
  "lit": "^2.7.0 || ^3.0.0"
25
25
  },
26
26
  "publishConfig": {
27
27
  "access": "public"
28
28
  },
29
- "gitHead": "916ed6faee1f05e718fba83e7f0f646992d4018e"
29
+ "gitHead": "6c2de1ae3119c8bbc53c40a12d46ae79f026057c"
30
30
  }
package/styles/colors.css CHANGED
@@ -16,6 +16,7 @@
16
16
  --dile-on-alert-color: #ffffff;
17
17
  --dile-danger-color: #e31e1b;
18
18
  --dile-on-danger-color: #ffffff;
19
+ --dile-link-color: #3399ff;
19
20
 
20
21
  /* Color variations */
21
22
  --dile-primary-light-color: #fbfbe9;
@@ -33,3 +34,47 @@
33
34
  --dile-gray-dark-color: #555555;
34
35
  --dile-on-gray-dark-color: #ffffff;
35
36
  }
37
+
38
+ :root.dark-theme {
39
+ --dile-background-color: #1e1e1e;
40
+ --dile-on-background-color: #ffffff;
41
+
42
+ --dile-primary-color: #e1e181;
43
+ --dile-on-primary-color: #1e1e1e;
44
+
45
+ --dile-secondary-color: #5fd878;
46
+ --dile-on-secondary-color: #1e1e1e;
47
+
48
+ --dile-terciary-color: #50c4e0;
49
+ --dile-on-terciary-color: #1e1e1e;
50
+
51
+ --dile-neutral-color: #2c2c2c;
52
+ --dile-on-neutral-color: #ffffff;
53
+
54
+ --dile-alert-error-color: #ff6a6a;
55
+ --dile-alert-success-color: #33cc55;
56
+ --dile-alert-neutral-color: #58c0da;
57
+ --dile-on-alert-color: #1e1e1e;
58
+
59
+ --dile-danger-color: #ff4b47;
60
+ --dile-on-danger-color: #ffffff;
61
+
62
+ /* Variaciones */
63
+ --dile-primary-light-color: #f3f3ae;
64
+ --dile-on-primary-light-color: #1e1e1e;
65
+ --dile-primary-dark-color: #b5b53e;
66
+ --dile-on-primary-dark-color: #ffffff;
67
+
68
+ --dile-secondary-light-color: #9ff2b1;
69
+ --dile-on-secondary-light-color: #1e1e1e;
70
+ --dile-secondary-dark-color: #2a7038;
71
+ --dile-on-secondary-dark-color: #ffffff;
72
+
73
+ --dile-terciary-light-color: #a5e6f8;
74
+ --dile-on-terciary-light-color: #1e1e1e;
75
+ --dile-terciary-dark-color: #0e3e49;
76
+ --dile-on-terciary-dark-color: #ffffff;
77
+
78
+ --dile-gray-dark-color: #cccccc;
79
+ --dile-on-gray-dark-color: #1e1e1e;
80
+ }