@lluc_llull/ui-lib 0.4.4 → 0.4.5

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.
@@ -9,6 +9,21 @@
9
9
  --spacing-sm: 0.5rem;
10
10
  --spacing-md: 1rem;
11
11
  --spacing-lg: 2rem;
12
+ --button-primary-bg: #007bff;
13
+ --button-primary-text: #f9f9f9;
14
+ --button-primary-bg-hover: #033468;
15
+ --button-primary-text-hover: #f9f9f9;
16
+ --button-secondary-bg: #6c757d;
17
+ --button-secondary-text: #f9f9f9;
18
+ --button-secondary-bg-hover: #1c1e20;
19
+ --button-secondary-text-hover: #f9f9f9;
20
+ --button-link-text: #111111;
21
+ --button-link-text-hover: #007bff;
22
+ --header-clear-bg: #007bff;
23
+ --header-mobile-bg: #007bff;
24
+ --modal-bg: #f9f9f9;
25
+ --close-btn: #111;
26
+ --item-text: #111;
12
27
  }
13
28
 
14
29
  .btn {
@@ -24,26 +39,27 @@
24
39
  }
25
40
 
26
41
  .btn-primary {
27
- background-color: var(--color-primary);
28
- color: white;
42
+ background-color: var(--button-primary-bg);
43
+ color: var(--button-primary-text);
29
44
  }
30
45
  .btn-primary:hover {
31
- background: color-mix(in srgb, var(--color-primary), black 10%);
46
+ background-color: var(--button-primary-bg-hover);
47
+ color: var(--button-primary-text-hover);
32
48
  }
33
49
 
34
50
  .btn-secondary {
35
51
  background: none;
36
- border: 1px solid var(--color-primary);
37
- color: var(--color-primary);
52
+ border: 1px solid var(--button-secondary-bg);
53
+ color: var(--button-secondary-text);
38
54
  }
39
55
  .btn-secondary:hover {
40
- background-color: var(--color-primary);
41
- color: white;
56
+ background-color: var(--button-secondary-bg-hover);
57
+ color: var(--button-secondary-text-hover);
42
58
  }
43
59
 
44
60
  .btn-link {
45
61
  background: none;
46
- color: var(--color-text);
62
+ color: var(--button-link-text);
47
63
  text-decoration: none;
48
64
  font-weight: 300;
49
65
  font-size: 1.1rem;
@@ -70,7 +86,7 @@
70
86
  left: 0;
71
87
  width: 0;
72
88
  height: 1px;
73
- background-color: var(--color-text);
89
+ background-color: var(--button-link-text);
74
90
  transition: width 0.5s;
75
91
  }
76
92
 
package/styles/main.css CHANGED
@@ -9,6 +9,21 @@
9
9
  --spacing-sm: 0.5rem;
10
10
  --spacing-md: 1rem;
11
11
  --spacing-lg: 2rem;
12
+ --button-primary-bg: #007bff;
13
+ --button-primary-text: #f9f9f9;
14
+ --button-primary-bg-hover: #033468;
15
+ --button-primary-text-hover: #f9f9f9;
16
+ --button-secondary-bg: #6c757d;
17
+ --button-secondary-text: #f9f9f9;
18
+ --button-secondary-bg-hover: #1c1e20;
19
+ --button-secondary-text-hover: #f9f9f9;
20
+ --button-link-text: #111111;
21
+ --button-link-text-hover: #007bff;
22
+ --header-clear-bg: #007bff;
23
+ --header-mobile-bg: #007bff;
24
+ --modal-bg: #f9f9f9;
25
+ --close-btn: #111;
26
+ --item-text: #111;
12
27
  }
13
28
 
14
29
  .btn {
@@ -24,26 +39,27 @@
24
39
  }
25
40
 
26
41
  .btn-primary {
27
- background-color: var(--color-primary);
28
- color: white;
42
+ background-color: var(--button-primary-bg);
43
+ color: var(--button-primary-text);
29
44
  }
30
45
  .btn-primary:hover {
31
- background: color-mix(in srgb, var(--color-primary), black 10%);
46
+ background-color: var(--button-primary-bg-hover);
47
+ color: var(--button-primary-text-hover);
32
48
  }
33
49
 
34
50
  .btn-secondary {
35
51
  background: none;
36
- border: 1px solid var(--color-primary);
37
- color: var(--color-primary);
52
+ border: 1px solid var(--button-secondary-bg);
53
+ color: var(--button-secondary-text);
38
54
  }
39
55
  .btn-secondary:hover {
40
- background-color: var(--color-primary);
41
- color: white;
56
+ background-color: var(--button-secondary-bg-hover);
57
+ color: var(--button-secondary-text-hover);
42
58
  }
43
59
 
44
60
  .btn-link {
45
61
  background: none;
46
- color: var(--color-text);
62
+ color: var(--button-link-text);
47
63
  text-decoration: none;
48
64
  font-weight: 300;
49
65
  font-size: 1.1rem;
@@ -70,7 +86,7 @@
70
86
  left: 0;
71
87
  width: 0;
72
88
  height: 1px;
73
- background-color: var(--color-text);
89
+ background-color: var(--button-link-text);
74
90
  transition: width 0.5s;
75
91
  }
76
92