@ilo-org/styles 1.1.0 → 1.2.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 (86) hide show
  1. package/README.md +3 -0
  2. package/css/components/accordion.css +1 -1
  3. package/css/components/breadcrumb.css +1 -1
  4. package/css/components/button.css +1 -1
  5. package/css/components/callout.css +1 -1
  6. package/css/components/card.css +1 -1
  7. package/css/components/checkbox.css +1 -1
  8. package/css/components/contextmenu.css +1 -1
  9. package/css/components/datacard.css +1 -1
  10. package/css/components/dropdown.css +1 -1
  11. package/css/components/featurecard.css +1 -1
  12. package/css/components/fieldset.css +1 -1
  13. package/css/components/file-upload.css +1 -1
  14. package/css/components/footer.css +1 -1
  15. package/css/components/formcontrol.css +1 -1
  16. package/css/components/heading.css +1 -1
  17. package/css/components/herocard.css +1 -1
  18. package/css/components/input.css +1 -1
  19. package/css/components/linklist.css +1 -1
  20. package/css/components/list.css +1 -1
  21. package/css/components/loading.css +1 -1
  22. package/css/components/logo.css +1 -1
  23. package/css/components/navigation.css +1 -1
  24. package/css/components/pagination.css +1 -1
  25. package/css/components/profile.css +1 -1
  26. package/css/components/readmore.css +1 -1
  27. package/css/components/richtext.css +1 -1
  28. package/css/components/searchfield.css +1 -1
  29. package/css/components/socialmedia.css +1 -1
  30. package/css/components/statcard.css +1 -1
  31. package/css/components/table.css +1 -1
  32. package/css/components/tableofcontents.css +1 -1
  33. package/css/components/tabs.css +1 -1
  34. package/css/components/tag.css +1 -1
  35. package/css/components/textarea.css +1 -1
  36. package/css/components/textinput.css +1 -1
  37. package/css/components/tooltip.css +1 -1
  38. package/css/global.css +1 -1
  39. package/css/global.css.map +1 -1
  40. package/css/index.css +2 -2
  41. package/css/index.css.map +1 -1
  42. package/css/monorepo.css +2 -2
  43. package/css/monorepo.css.map +1 -1
  44. package/package.json +2 -2
  45. package/scss/_mixins.scss +1 -1
  46. package/scss/_typography.scss +19 -22
  47. package/scss/_typographymonorepo.scss +19 -22
  48. package/scss/components/_accordion.scss +1 -1
  49. package/scss/components/_breadcrumb.scss +1 -1
  50. package/scss/components/_button.scss +145 -198
  51. package/scss/components/_callout.scss +50 -50
  52. package/scss/components/_card.scss +1 -1
  53. package/scss/components/_contextmenu.scss +1 -1
  54. package/scss/components/_datacard.scss +1 -1
  55. package/scss/components/_dropdown.scss +1 -1
  56. package/scss/components/_featurecard.scss +1 -1
  57. package/scss/components/_fieldset.scss +2 -2
  58. package/scss/components/_file-upload.scss +2 -2
  59. package/scss/components/_footer.scss +4 -4
  60. package/scss/components/_formcontrol.scss +4 -4
  61. package/scss/components/_heading.scss +1 -1
  62. package/scss/components/_herocard.scss +1 -1
  63. package/scss/components/_input.scss +1 -1
  64. package/scss/components/_linklist.scss +3 -3
  65. package/scss/components/_list.scss +1 -1
  66. package/scss/components/_loading.scss +1 -1
  67. package/scss/components/_logo.scss +1 -1
  68. package/scss/components/_navigation.scss +10 -10
  69. package/scss/components/_pagination.scss +2 -2
  70. package/scss/components/_profile.scss +4 -4
  71. package/scss/components/_readmore.scss +1 -1
  72. package/scss/components/_richtext.scss +3 -3
  73. package/scss/components/_socialmedia.scss +1 -1
  74. package/scss/components/_statcard.scss +1 -1
  75. package/scss/components/_table.scss +4 -4
  76. package/scss/components/_tableofcontents.scss +2 -2
  77. package/scss/components/_tabs.scss +1 -1
  78. package/scss/components/_tag.scss +1 -1
  79. package/scss/components/_textarea.scss +1 -1
  80. package/scss/components/_textinput.scss +1 -1
  81. package/scss/components/_tooltip.scss +1 -1
  82. package/scss/components/index.scss +0 -1
  83. package/scss/index.scss +3 -0
  84. package/scss/theme/_foundation.scss +33 -7
  85. package/css/components/icon.css +0 -1
  86. package/scss/components/_icon.scss +0 -6
package/scss/components/_tableofcontents.scss CHANGED
@@ -30,7 +30,7 @@
30
30
  margin-bottom: spacing(6);
31
31
  margin-top: spacing(2);
32
32
  @include font-styles("base");
33
- font-family: $fonts-display;
33
+ font-family: var(--ilo-fonts-display);
34
34
  font-weight: 700;
35
35
  padding-bottom: spacing(4);
36
36
  }
@@ -131,7 +131,7 @@
131
131
  solid;
132
132
  color: $color-ux-labels-actionable;
133
133
  display: block;
134
- font-family: $fonts-display;
134
+ font-family: var(--ilo-fonts-display);
135
135
  font-weight: 500;
136
136
  margin: 0 spacing(2) 0 spacing(2);
137
137
  padding: spacing(4) spacing(2) spacing(4);
package/scss/components/_tabs.scss CHANGED
@@ -68,7 +68,7 @@
68
68
  background-color: $color-base-neutrals-lighter;
69
69
  border-bottom: px-to-rem(3px) solid $color-base-neutrals-white;
70
70
  color: $color-ux-labels-actionable;
71
- font-family: $fonts-display;
71
+ font-family: var(--ilo-fonts-display);
72
72
  font-weight: 600;
73
73
  display: flex;
74
74
  gap: spacing(1);
package/scss/components/_tag.scss CHANGED
@@ -19,7 +19,7 @@
19
19
  border: none;
20
20
  color: map-get($color, "tag", "text", "default");
21
21
  display: inline-block;
22
- font-family: map-get($fonts, "display");
22
+ font-family: var(--ilo-fonts-display);
23
23
  font-weight: 500;
24
24
  padding: spacing(2) spacing(3);
25
25
  text-decoration: none;
package/scss/components/_textarea.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  );
16
16
  @include bordervalues("input", "formelements");
17
17
  box-sizing: border-box;
18
- font-family: $fonts-copy;
18
+ font-family: var(--ilo-fonts-copy);
19
19
  font-weight: map-get($type, "weights", "section");
20
20
  @include font-styles("label-medium");
21
21
  height: px-to-rem(48px);
package/scss/components/_textinput.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  );
16
16
  @include bordervalues("input", "formelements");
17
17
  box-sizing: border-box;
18
- font-family: $fonts-copy;
18
+ font-family: var(--ilo-fonts-copy);
19
19
  font-weight: map-get($type, "weights", "section");
20
20
  @include font-styles("label-medium");
21
21
  height: px-to-rem(48px);
package/scss/components/_tooltip.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  $arrow-width: calc(spacing(2) - px-to-rem(1));
9
9
 
10
10
  @include font-styles("body-xs");
11
- font-family: $fonts-copy;
11
+ font-family: var(--ilo-fonts-copy);
12
12
  font-weight: 400;
13
13
  background: map-get($color, "tooltip", "default", "background");
14
14
  border: none;
package/scss/components/index.scss CHANGED
@@ -54,4 +54,3 @@
54
54
  @use "tooltip";
55
55
  @use "video";
56
56
  @use "socialmedia";
57
- @use "icon";
package/scss/index.scss CHANGED
@@ -7,6 +7,9 @@
7
7
  // Load the css resets
8
8
  @use "reset";
9
9
 
10
+ //Theme Foundation
11
+ @use "theme";
12
+
10
13
  //Import type styles
11
14
  @use "typography";
12
15
 
package/scss/theme/_foundation.scss CHANGED
@@ -6,13 +6,24 @@
6
6
  * Typography
7
7
  */
8
8
  --ilo-scale: 1; // default scale for the design system
9
- --ilo-font-family: Overpass, Noto Sans, Noto Sans CJK JP, Yu Gothic,
10
- Hiragino Sans, TakaoPGothic, PingFang SC, Microsoft YaHei, 微软雅黑,
9
+
10
+ // Display Font Families
11
+ --ilo-fonts-display: Overpass, Noto Sans, sans-serif;
12
+
13
+ // Chinese and Japanese system fonts
14
+ --ilo-fonts-display-zh: PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;
15
+ --ilo-fonts-display-jp: Noto Sans CJK JP, Yu Gothic, Hiragino Sans,
16
+ TakaoPGothic, sans-serif;
17
+
18
+ // Copy font families
19
+ --ilo-fonts-copy: Noto Sans, sans-serif;
20
+
21
+ // Chinese and Japanese system fonts
22
+ --ilo-fonts-copy-zh: PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;
23
+ --ilo-fonts-copy-jp: Noto Sans CJK JP, Yu Gothic, Hiragino Sans, TakaoPGothic,
11
24
  sans-serif;
12
- --ilo-font-copy: Noto Sans, Noto Sans CJK JP, Yu Gothic, Hiragino Sans,
13
- TakaoPGothic, PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;
14
- --ilo-font-family-headings: var(--ilo-font-family);
15
- --ilo-font-family-monospace: monospace;
25
+
26
+ --ilo-fonts-monospace: monospace;
16
27
  --ilo-line-height: 1.46;
17
28
 
18
29
  /**
@@ -31,7 +42,7 @@
31
42
  --ilo-color-gray-charcoal: rgba(45, 45, 45, 1);
32
43
  --ilo-color-gray-accessible: rgba(109, 109, 109, 1);
33
44
  --ilo-color-gray-light: rgba(237, 240, 242, 1);
34
- --ilo-color-gray-ui: rgba(184, 196, 204, 1);
45
+ --ilo-color-gray-base: rgba(184, 196, 204, 1);
35
46
 
36
47
  --ilo-color-red: rgba(250, 60, 75, 1);
37
48
  --ilo-color-red-light: rgba(254, 216, 219, 1);
@@ -50,6 +61,21 @@
50
61
 
51
62
  --ilo-color-purple: rgba(150, 10, 85, 1);
52
63
 
64
+ --ilo-color-notification-type-error: var(--ilo-color-red);
65
+ --ilo-color-notification-type-info: var(--ilo-color-blue);
66
+ --ilo-color-notification-type-success: var(--ilo-color-green);
67
+ --ilo-color-notification-type-warning: var(--ilo-color-yellow);
68
+ --ilo-color-background-default: var(--ilo-color-white);
69
+ --ilo-color-background-active: var(--ilo-color-blue);
70
+ --ilo-color-background-highlight: var(--ilo-color-gray-light);
71
+ --ilo-color-background-hover: var(--ilo-color-blue-lighter);
72
+ --ilo-color-background-focus: var(--ilo-color-white);
73
+
74
+ --ilo-color-borders-default: var(--ilo-color-gray-base);
75
+ --ilo-color-borders-hover: var(--ilo-color-blue);
76
+ --ilo-color-borders-active: var(--ilo-color-blue);
77
+ --ilo-color-borders-focus: var(--ilo-color-yellow);
78
+
53
79
  /**
54
80
  * Sizing
55
81
  */
package/css/components/icon.css DELETED
@@ -1 +0,0 @@
1
- .ilo--icon:not([data-js-processed=true]){height:24px;width:24px}
package/scss/components/_icon.scss DELETED
@@ -1,6 +0,0 @@
1
- .ilo--icon {
2
- &:not([data-js-processed="true"]) {
3
- height: 24px;
4
- width: 24px;
5
- }
6
- }