@odx/ui 1.0.0-rc.1 → 1.0.0-rc.3

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 (64) hide show
  1. package/323d385340fb9fee6450.svg +6 -0
  2. package/LICENSE +1 -0
  3. package/README.md +32 -0
  4. package/core-icons.css +37 -9
  5. package/core-icons.woff2 +0 -0
  6. package/core-theme.css +1 -1
  7. package/package.json +7 -8
  8. package/scss/{modules → abstract}/_breakpoints.scss +11 -11
  9. package/scss/{modules/_vertical-rythm.scss → abstract/_dimensions.scss} +28 -26
  10. package/scss/abstract/_index.scss +5 -0
  11. package/scss/abstract/_motion.scss +10 -0
  12. package/scss/abstract/_typography.scss +25 -0
  13. package/scss/abstract/_utils.scss +114 -0
  14. package/scss/components/accordion-item.component.scss +59 -0
  15. package/scss/components/accordion.component.scss +3 -0
  16. package/scss/components/{action-group/action-group.component.scss → action-group.component.scss} +10 -6
  17. package/scss/components/{area-header/area-header.component.scss → area-header.component.scss} +28 -27
  18. package/scss/components/{avatar/avatar.component.scss → avatar.component.scss} +13 -13
  19. package/scss/components/{badge/badge.component.scss → badge.component.scss} +10 -10
  20. package/scss/components/button-group.component.scss +98 -0
  21. package/scss/components/button.component.scss +123 -0
  22. package/scss/components/checkbox.component.scss +116 -0
  23. package/scss/components/content-box.component.scss +50 -0
  24. package/scss/components/form-field.component.scss +204 -0
  25. package/scss/components/header.component.scss +40 -0
  26. package/scss/components/icon.component.scss +35 -0
  27. package/scss/components/{link/link.component.scss → link.component.scss} +6 -4
  28. package/scss/components/{logo/logo.component.scss → logo.component.scss} +5 -4
  29. package/scss/components/main-menu-button.component.scss +7 -0
  30. package/scss/components/{main-menu/components/main-menu-item.component.scss → main-menu-item.component.scss} +13 -12
  31. package/scss/components/{main-menu/main-menu.component.scss → main-menu.component.scss} +35 -28
  32. package/scss/components/modal.component.scss +85 -0
  33. package/scss/components/radio-button.component.scss +120 -0
  34. package/scss/components/radio-group.component.scss +14 -0
  35. package/scss/components/switch.component.scss +163 -0
  36. package/scss/components/toggle-button-group.component.scss +25 -0
  37. package/scss/components/toggle-button.component.scss +55 -0
  38. package/scss/core.scss +34 -30
  39. package/scss/layout/_base.scss +29 -0
  40. package/scss/layout/_helpers.scss +95 -0
  41. package/scss/{modules → layout}/_layout.scss +96 -46
  42. package/scss/layout/_typography.scss +117 -0
  43. package/scss/{base/_reset.scss → reset.scss} +25 -5
  44. package/scss/variables/_color-palettes.scss +57 -54
  45. package/scss/variables/_colors.scss +12 -15
  46. package/scss/variables/_controls.scss +48 -0
  47. package/scss/variables/_index.scss +6 -0
  48. package/scss/variables/_typography.scss +18 -0
  49. package/scss/variables/_vertical-rythm.scss +3 -0
  50. package/scss/variables/_visuals.scss +12 -7
  51. package/scss/_helpers.scss +0 -15
  52. package/scss/base/_mixins.scss +0 -3
  53. package/scss/base/_utils.scss +0 -19
  54. package/scss/base/mixins/_container.scss +0 -31
  55. package/scss/base/mixins/_control.scss +0 -50
  56. package/scss/base/mixins/_transition.scss +0 -10
  57. package/scss/components/button/button.component.scss +0 -94
  58. package/scss/components/checkbox/checkbox.component.scss +0 -130
  59. package/scss/components/content-box/content-box.component.scss +0 -50
  60. package/scss/components/header/header.component.scss +0 -39
  61. package/scss/components/icon/icon.component.scss +0 -38
  62. package/scss/components/main-menu/components/main-menu-button.component.scss +0 -7
  63. package/scss/components/radio-group/_radio-group.component.scss +0 -145
  64. package/scss/modules/_typography.scss +0 -161
package/scss/modules/_typography.scss DELETED
@@ -1,161 +0,0 @@
1
- /* stylelint-disable block-closing-brace-newline-after */
2
- @use 'sass:math';
3
- @use 'breakpoints' as br;
4
- @use 'vertical-rythm' as vr;
5
- @use '../base/utils' as utils;
6
-
7
- $base-size: 16px;
8
- $base-line-height: 1.5;
9
-
10
- @mixin font-size($size: 1) {
11
- @if math.round($size) != $size {
12
- @error '$size must me an integer';
13
- }
14
-
15
- @if $size < 0 {
16
- font-size: calc(var(--odx-t-base-size) * utils.css-pow(var(--odx-t-negative-font-scaling-factor), $size));
17
- } @else {
18
- font-size: calc(var(--odx-t-base-size) * utils.css-pow(var(--odx-t-positive-font-scaling-factor), $size));
19
- }
20
- }
21
-
22
- @mixin prevent-text-overflow() {
23
- overflow: hidden;
24
- text-overflow: ellipsis;
25
- white-space: nowrap;
26
- }
27
-
28
- :root {
29
- --odx-t-base-size: #{$base-size};
30
- --odx-t-base-line-height: #{$base-line-height};
31
- --odx-t-font-weight-normal: normal;
32
- --odx-t-font-weight-medium: 500;
33
- --odx-t-font-weight-bold: bold;
34
- --odx-t-positive-font-scaling-factor: 1.125;
35
- --odx-t-negative-font-scaling-factor: 1.2;
36
-
37
- @include br.up(tablet) {
38
- --odx-t-positive-font-scaling-factor: 1.25;
39
- }
40
- }
41
-
42
- @font-face {
43
- font-family: Pangea;
44
- font-style: normal;
45
- font-weight: normal;
46
- src: url('../assets/fonts/PangeaText-RegularWeb.woff2') format('woff2');
47
- }
48
-
49
- @font-face {
50
- font-family: Pangea;
51
- font-style: normal;
52
- font-weight: 500;
53
- src: url('../assets/fonts/PangeaText-MediumWeb.woff2') format('woff2');
54
- }
55
-
56
- @font-face {
57
- font-family: Pangea;
58
- font-style: normal;
59
- font-weight: bold;
60
- src: url('../assets/fonts/PangeaText-SemiBoldWeb.woff2') format('woff2');
61
- }
62
-
63
- html body {
64
- @include font-size(0);
65
- @include vr.line-height(1);
66
-
67
- color: var(--odx-c-text);
68
- font-family: Pangea, sans-serif;
69
- font-weight: var(--odx-t-font-weight-normal);
70
- }
71
-
72
- h1,
73
- h2,
74
- h3,
75
- h4,
76
- h5,
77
- h6,
78
- .odx-title,
79
- .odx-subtitle {
80
- color: var(--odx-c-headline);
81
- font-weight: var(--odx-t-font-weight-bold);
82
- }
83
-
84
- .odx-subtitle {
85
- font-weight: var(--odx-t-font-weight-normal);
86
- }
87
-
88
- h1,
89
- .odx-title--1 {
90
- @include font-size(5);
91
- @include vr.line-height(2, math.div(40, 24));
92
-
93
- @include br.up(tablet) {
94
- @include vr.line-height(3, math.div(64, 24));
95
- }
96
- }
97
-
98
- h2,
99
- .odx-title--2 {
100
- @include font-size(4);
101
- @include vr.line-height(2, 1.5);
102
-
103
- @include br.up(tablet) {
104
- @include vr.line-height(3, math.div(54, 24));
105
- }
106
- }
107
-
108
- h3,
109
- .odx-title--3 {
110
- @include font-size(3);
111
- @include vr.line-height(2, math.div(32, 24));
112
-
113
- @include br.up(tablet) {
114
- @include vr.line-height(2, math.div(42, 24));
115
- }
116
- }
117
-
118
- h4,
119
- .odx-title--4 {
120
- @include font-size(2);
121
- @include vr.line-height(2, math.div(30, 24));
122
- }
123
-
124
- h5,
125
- .odx-title--5 {
126
- @include font-size(1);
127
- @include vr.line-height(1);
128
- }
129
-
130
- h6,
131
- .odx-title--6 {
132
- @include font-size(0);
133
- @include vr.line-height(1);
134
- }
135
-
136
- p,
137
- .odx-text {
138
- @include vr.line-height(1);
139
-
140
- font-weight: var(--odx-t-font-weight-normal);
141
-
142
- &--small {
143
- @include font-size(-1);
144
- @include vr.line-height(1, math.div(20, 24));
145
- }
146
-
147
- &--xsmall {
148
- @include font-size(-2);
149
- @include vr.line-height(1, math.div(16, 24));
150
- }
151
- }
152
-
153
- .odx-fs-normal {
154
- font-weight: var(--odx-t-font-weight-normal);
155
- }
156
-
157
- b,
158
- strong,
159
- .odx-fs-bold {
160
- font-weight: var(--odx-t-font-weight-bold);
161
- }