@oardi/css-utils 0.47.1 → 0.49.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 (31) hide show
  1. package/package.json +1 -1
  2. package/scss/borders.scss +24 -19
  3. package/scss/components/breadcrumb.scss +27 -25
  4. package/scss/components/button.scss +146 -140
  5. package/scss/components/card.scss +49 -47
  6. package/scss/components/chip.scss +81 -79
  7. package/scss/components/drawer.scss +30 -28
  8. package/scss/components/expansion-panel.scss +93 -91
  9. package/scss/components/form.scss +156 -155
  10. package/scss/components/icon-button.scss +112 -110
  11. package/scss/components/list.scss +57 -55
  12. package/scss/components/navbar.scss +24 -22
  13. package/scss/components/overlay.scss +9 -7
  14. package/scss/components/table.scss +35 -33
  15. package/scss/components/tabs.scss +54 -52
  16. package/scss/components/toast.scss +19 -17
  17. package/scss/components/tooltip.scss +54 -52
  18. package/scss/flex-responsive.scss +64 -76
  19. package/scss/flex.scss +114 -127
  20. package/scss/gap-responsive.scss +22 -0
  21. package/scss/gap.scss +18 -0
  22. package/scss/grid-responsive.scss +7 -5
  23. package/scss/grid.scss +14 -12
  24. package/scss/index.scss +9 -1
  25. package/scss/reboot.scss +110 -108
  26. package/scss/spacings-responsive.scss +12 -10
  27. package/scss/spacings.scss +33 -28
  28. package/scss/text.scss +69 -39
  29. package/scss/typography.scss +92 -125
  30. package/scss/utilities.scss +207 -205
  31. package/scss/variables.scss +70 -68
package/scss/typography.scss CHANGED
@@ -1,145 +1,112 @@
1
- :root {
2
- --h1: 500 2.25rem var(--font-family);
3
- --h2: 500 2rem var(--font-family);
4
- --h3: 500 1.45rem var(--font-family);
5
- --h4: 500 1.35rem var(--font-family);
6
- --h5: 500 1.25rem var(--font-family);
7
- --h6: 500 1rem var(--font-family);
8
-
9
- --font-size-xs: 0.75rem;
10
- --font-size-sm: 0.875rem;
11
- --font-size-md: 1rem;
12
- --font-size-lg: 1.125rem;
13
- --font-size-xl: 1.25rem;
14
- --font-size-xxl: 1.5rem;
15
- --font-size-xxxl: 2rem;
16
- }
1
+ @layer base {
2
+ :root {
3
+ --h1: 500 2.25rem var(--font-family);
4
+ --h2: 500 2rem var(--font-family);
5
+ --h3: 500 1.45rem var(--font-family);
6
+ --h4: 500 1.35rem var(--font-family);
7
+ --h5: 500 1.25rem var(--font-family);
8
+ --h6: 500 1rem var(--font-family);
9
+
10
+ --font-size-xs: 0.75rem;
11
+ --font-size-sm: 0.875rem;
12
+ --font-size-md: 1rem;
13
+ --font-size-lg: 1.125rem;
14
+ --font-size-xl: 1.25rem;
15
+ --font-size-xxl: 1.5rem;
16
+ --font-size-xxxl: 2rem;
17
+ }
17
18
 
18
- small {
19
- font-size: 0.833rem;
20
- }
19
+ small {
20
+ font-size: 0.833rem;
21
+ }
21
22
 
22
- h1,
23
- .h1,
24
- h2,
25
- .h2,
26
- h3,
27
- .h3,
28
- h4,
29
- .h4,
30
- h5,
31
- .h5,
32
- h6,
33
- .h6 {
34
- margin: 0;
35
- margin-bottom: 0.5rem;
36
- }
23
+ h1,
24
+ .h1,
25
+ h2,
26
+ .h2,
27
+ h3,
28
+ .h3,
29
+ h4,
30
+ .h4,
31
+ h5,
32
+ .h5,
33
+ h6,
34
+ .h6 {
35
+ margin: 0;
36
+ margin-bottom: 0.5rem;
37
+ }
37
38
 
38
- h1,
39
- .h1 {
40
- font: var(--h1);
41
- letter-spacing: -1px;
42
- line-height: 1.2;
43
- }
39
+ h1,
40
+ .h1 {
41
+ font: var(--h1);
42
+ letter-spacing: -1px;
43
+ line-height: 1.2;
44
+ }
44
45
 
45
- h2,
46
- .h2 {
47
- font: var(--h2);
48
- line-height: 1.25;
49
- }
46
+ h2,
47
+ .h2 {
48
+ font: var(--h2);
49
+ line-height: 1.25;
50
+ }
50
51
 
51
- h3,
52
- .h3 {
53
- font: var(--h3);
54
- line-height: 1.3;
55
- }
52
+ h3,
53
+ .h3 {
54
+ font: var(--h3);
55
+ line-height: 1.3;
56
+ }
56
57
 
57
- h4,
58
- .h4 {
59
- font: var(--h4);
60
- line-height: 1.35;
61
- }
58
+ h4,
59
+ .h4 {
60
+ font: var(--h4);
61
+ line-height: 1.35;
62
+ }
62
63
 
63
- h5,
64
- .h5 {
65
- font: var(--h5);
66
- line-height: 1.4;
67
- }
64
+ h5,
65
+ .h5 {
66
+ font: var(--h5);
67
+ line-height: 1.4;
68
+ }
68
69
 
69
- h6,
70
- .h6 {
71
- font: var(--h6);
72
- line-height: 1.45;
73
- }
70
+ h6,
71
+ .h6 {
72
+ font: var(--h6);
73
+ line-height: 1.45;
74
+ }
74
75
 
75
- .text-xs {
76
- font-size: var(--font-size-xs);
77
- }
78
- .text-sm {
79
- font-size: var(--font-size-sm);
80
- }
81
- .text-md {
82
- font-size: var(--font-size-md);
83
- }
84
- .text-lg {
85
- font-size: var(--font-size-lg);
86
- }
87
- .text-xl {
88
- font-size: var(--font-size-xl);
89
- }
90
- .text-xxl {
91
- font-size: var(--font-size-xxl);
92
- }
93
- .text-xxxl {
94
- font-size: var(--font-size-xxxl);
95
- }
76
+ a {
77
+ --link-text-color: var(--primary);
96
78
 
97
- a {
98
- --link-text-color: var(--primary);
79
+ --link-focus-outline-width: var(--focus-outline-width);
80
+ --link-focus-outline-style: var(--focus-outline-style);
81
+ --link-focus-outline-color: var(--focus-outline-color);
99
82
 
100
- --link-focus-outline-width: var(--focus-outline-width);
101
- --link-focus-outline-style: var(--focus-outline-style);
102
- --link-focus-outline-color: var(--focus-outline-color);
83
+ --link-transition-duration: var(--transition-duration, 0.18s);
84
+ --link-transition-easing: var(--transition-easing, ease-out);
103
85
 
104
- --link-transition-duration: var(--transition-duration, 0.18s);
105
- --link-transition-easing: var(--transition-easing, ease-out);
86
+ color: var(--link-text-color);
87
+ fill: var(--link-text-color);
106
88
 
107
- color: var(--link-text-color);
108
- fill: var(--link-text-color);
89
+ text-decoration: none;
109
90
 
110
- text-decoration: none;
91
+ transition:
92
+ color var(--link-transition-duration) var(--link-transition-easing),
93
+ background-color var(--link-transition-duration) var(--link-transition-easing),
94
+ box-shadow var(--link-transition-duration) var(--link-transition-easing),
95
+ border-color var(--link-transition-duration) var(--link-transition-easing),
96
+ outline-offset var(--link-transition-duration) var(--link-transition-easing);
111
97
 
112
- transition:
113
- color var(--link-transition-duration) var(--link-transition-easing),
114
- background-color var(--link-transition-duration) var(--link-transition-easing),
115
- box-shadow var(--link-transition-duration) var(--link-transition-easing),
116
- border-color var(--link-transition-duration) var(--link-transition-easing),
117
- outline-offset var(--link-transition-duration) var(--link-transition-easing);
98
+ &:hover {
99
+ text-decoration: underline;
100
+ }
118
101
 
119
- &:hover {
120
- text-decoration: underline;
102
+ &:focus {
103
+ outline: var(--link-focus-outline-width) var(--link-focus-outline-style) var(--link-focus-outline-color);
104
+ outline-offset: var(--focus-offset);
105
+ }
121
106
  }
122
107
 
123
- &:focus {
124
- outline: var(--link-focus-outline-width) var(--link-focus-outline-style) var(--link-focus-outline-color);
125
- outline-offset: var(--focus-offset);
108
+ p {
109
+ --paragraph-margin: 0 0 0.5rem 0;
110
+ margin: var(--paragraph-margin);
126
111
  }
127
112
  }
128
-
129
- p {
130
- --paragraph-margin: 0 0 0.5rem 0;
131
- margin: var(--paragraph-margin);
132
- }
133
-
134
- // *::selection {
135
- // background: var(--primary);
136
- // color: #ffffff;
137
- // }
138
- // *::-moz-selection {
139
- // background: var(--primary);
140
- // color: #ffffff;
141
- // }
142
- // *::-webkit-selection {
143
- // background: var(--primary);
144
- // color: #ffffff;
145
- // }