@ilo-org/styles 1.8.0 → 1.8.2

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 (34) hide show
  1. package/css/components/breadcrumb.css +1 -1
  2. package/css/components/card.css +1 -1
  3. package/css/components/datacard.css +1 -1
  4. package/css/components/detailcard.css +1 -1
  5. package/css/components/featurecard.css +1 -1
  6. package/css/components/fieldset.css +1 -1
  7. package/css/components/form.css +1 -1
  8. package/css/components/formcontrol.css +1 -1
  9. package/css/components/link.css +1 -1
  10. package/css/components/multilinkcard.css +1 -1
  11. package/css/components/pagination.css +1 -1
  12. package/css/components/richtext.css +1 -1
  13. package/css/components/table.css +1 -1
  14. package/css/global.css +1 -1
  15. package/css/global.css.map +1 -1
  16. package/css/index.css +2 -2
  17. package/css/index.css.map +1 -1
  18. package/css/monorepo.css +2 -2
  19. package/css/monorepo.css.map +1 -1
  20. package/package.json +3 -3
  21. package/scss/_mixins.scss +39 -88
  22. package/scss/components/_breadcrumb.scss +32 -29
  23. package/scss/components/_card.scss +5 -0
  24. package/scss/components/_datacard.scss +15 -17
  25. package/scss/components/_detailcard.scss +0 -1
  26. package/scss/components/_featurecard.scss +3 -1
  27. package/scss/components/_fieldset.scss +22 -5
  28. package/scss/components/_form.scss +16 -25
  29. package/scss/components/_formcontrol.scss +20 -3
  30. package/scss/components/_link.scss +7 -1
  31. package/scss/components/_multilinkcard.scss +3 -1
  32. package/scss/components/_pagination.scss +14 -1
  33. package/scss/components/_richtext.scss +34 -12
  34. package/scss/theme/_foundation.scss +27 -1
package/scss/components/_richtext.scss CHANGED
@@ -4,6 +4,38 @@
4
4
  @import "../mixins";
5
5
 
6
6
  .ilo--richtext {
7
+ --ilo-richtext-color: var(--ilo-color-blue-dark);
8
+ --ilo-richtext-figcaption-color: var(--ilo-color-gray-accessible);
9
+ --ilo-richtext-hr-color: var(--ilo-color-gray-light);
10
+ --ilo-richtext-link-color: var(--ilo-color-purple);
11
+ --ilo-richtext-link-visited-color: var(--ilo-color-purple);
12
+
13
+ &__theme__light {
14
+ --ilo-richtext-color: var(--ilo-color-blue-dark);
15
+ --ilo-richtext-figcaption-color: var(--ilo-color-gray-accessible);
16
+ --ilo-richtext-hr-color: var(--ilo-color-gray-light);
17
+ --ilo-richtext-link-color: var(--ilo-color-purple);
18
+ --ilo-richtext-link-visited-color: var(--ilo-color-purple);
19
+
20
+ a {
21
+ @include linkstyles("light");
22
+ }
23
+ }
24
+
25
+ &__theme__dark {
26
+ --ilo-richtext-color: var(--ilo-color-white);
27
+ --ilo-richtext-figcaption-color: var(--ilo-color-gray-light);
28
+ --ilo-richtext-hr-color: var(--ilo-color-gray-light);
29
+ --ilo-richtext-link-color: var(--ilo-color-blue-medium);
30
+ --ilo-richtext-link-visited-color: var(--ilo-color-blue-medium);
31
+
32
+ a {
33
+ @include linkstyles("dark");
34
+ }
35
+ }
36
+
37
+ color: var(--ilo-richtext-color);
38
+
7
39
  & > * {
8
40
  margin-top: spacing(4);
9
41
  margin-bottom: spacing(4);
@@ -77,16 +109,6 @@
77
109
  font-weight: 700;
78
110
  }
79
111
 
80
- // Link styles
81
- a {
82
- @include linkstyles();
83
- background: none;
84
-
85
- &:hover {
86
- background: none;
87
- }
88
- }
89
-
90
112
  // Image styles
91
113
  img {
92
114
  width: 100%;
@@ -100,7 +122,7 @@
100
122
  // Figcaption styles
101
123
  figcaption {
102
124
  border-left: var(--ilo-border-lg) solid var(--ilo-color-borders-default);
103
- color: var(--ilo-color-gray-accessible);
125
+ color: var(--ilo-richtext-figcaption-color);
104
126
  font-weight: var(--ilo-font-weight-regular);
105
127
  margin-top: spacing(4);
106
128
  padding-left: spacing(2);
@@ -109,7 +131,7 @@
109
131
 
110
132
  // Horizontal rule (hr) styles
111
133
  hr {
112
- background-color: var(--ilo-color-gray-light);
134
+ background-color: var(--ilo-richtext-hr-color);
113
135
  border: none;
114
136
  height: px-to-rem(3px);
115
137
  }
package/scss/theme/_foundation.scss CHANGED
@@ -63,7 +63,6 @@
63
63
  /**
64
64
  * Font-size
65
65
  */
66
-
67
66
  --ilo-font-size-2xsm: calc(#{px-to-rem(10)} * var(--ilo-scale));
68
67
  --ilo-font-size-xsm: calc(#{px-to-rem(12)} * var(--ilo-scale));
69
68
  --ilo-font-size-sm: calc(#{px-to-rem(14)} * var(--ilo-scale));
@@ -119,4 +118,31 @@
119
118
  --ilo-border-sm: calc(#{px-to-rem(1.5)} * var(--ilo-scale));
120
119
  --ilo-border-md: calc(#{px-to-rem(2)} * var(--ilo-scale));
121
120
  --ilo-border-lg: calc(#{px-to-rem(4)} * var(--ilo-scale));
121
+
122
+ /**
123
+ * Links
124
+ */
125
+ --ilo-link-color-default-light: var(--ilo-color-blue-dark);
126
+ --ilo-link-color-default-dark: var(--ilo-color-white);
127
+
128
+ --ilo-link-color-visited-light: var(--ilo-color-purple);
129
+ --ilo-link-color-visited-dark: var(--ilo-color-gray-base);
130
+
131
+ --ilo-link-color-hover-light: var(--ilo-color-blue);
132
+ --ilo-link-color-hover-dark: var(--ilo-color-blue);
133
+
134
+ --ilo-link-color-active-light: var(--ilo-color-blue-dark);
135
+ --ilo-link-color-active-dark: var(--ilo-color-blue-dark);
136
+
137
+ --ilo-link-color-focus-light: var(--ilo-color-blue-dark);
138
+ --ilo-link-color-focus-dark: var(--ilo-color-blue-dark);
139
+
140
+ --ilo-link-background-default-light: transparent;
141
+ --ilo-link-background-default-dark: transparent;
142
+
143
+ --ilo-link-background-hover-light: transparent;
144
+ --ilo-link-background-hover-dark: var(--ilo-color-white);
145
+
146
+ --ilo-link-background-focus-light: var(--ilo-color-yellow);
147
+ --ilo-link-background-focus-dark: var(--ilo-color-yellow);
122
148
  }