@ilo-org/styles 1.11.4 → 1.13.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.
- package/css/components/dropdown.css +1 -1
- package/css/components/formcontrol.css +1 -1
- package/css/components/input.css +1 -1
- package/css/components/searchfield.css +1 -1
- package/css/components/textarea.css +1 -1
- package/css/global.css +1 -1
- package/css/global.css.map +1 -1
- package/css/index.css +3 -3
- package/css/index.css.map +1 -1
- package/css/monorepo.css +3 -3
- package/css/monorepo.css.map +1 -1
- package/package.json +1 -1
- package/scss/components/_dropdown.scss +17 -3
- package/scss/components/_formcontrol.scss +5 -1
- package/scss/components/_input.scss +26 -8
- package/scss/components/_searchfield.scss +29 -1
- package/scss/components/_textarea.scss +14 -3
- package/scss/components/index.scss +0 -1
- package/scss/theme/_foundation.scss +248 -53
- package/css/components/textinput.css +0 -1
- package/scss/components/_textinput.scss +0 -37
package/package.json
CHANGED
|
@@ -19,6 +19,10 @@
|
|
|
19
19
|
display: inline-block;
|
|
20
20
|
position: relative;
|
|
21
21
|
|
|
22
|
+
&__size__small {
|
|
23
|
+
--ilo-dropdown-height: #{px-to-rem(32px)};
|
|
24
|
+
}
|
|
25
|
+
|
|
22
26
|
&:before {
|
|
23
27
|
content: "";
|
|
24
28
|
pointer-events: none;
|
|
@@ -67,16 +71,26 @@
|
|
|
67
71
|
&:hover,
|
|
68
72
|
&:focus,
|
|
69
73
|
&:active {
|
|
70
|
-
border-
|
|
71
|
-
|
|
72
|
-
padding-left: calc(#{spacing(4)} - #{px-to-rem(1px)});
|
|
74
|
+
border-inline-start-color: var(--ilo-color-blue);
|
|
75
|
+
box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-blue);
|
|
73
76
|
background-color: var(--ilo-dropdown-background-color-active);
|
|
74
77
|
--ilo-dropdown-color: var(--ilo-color-gray-charcoal);
|
|
75
78
|
}
|
|
76
79
|
|
|
80
|
+
[dir="rtl"] &:hover,
|
|
81
|
+
[dir="rtl"] &:focus,
|
|
82
|
+
[dir="rtl"] &:active {
|
|
83
|
+
box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-blue);
|
|
84
|
+
}
|
|
85
|
+
|
|
77
86
|
option {
|
|
78
87
|
width: 100%;
|
|
79
88
|
text-overflow: ellipsis;
|
|
80
89
|
overflow: hidden;
|
|
81
90
|
}
|
|
91
|
+
|
|
92
|
+
&__size__small {
|
|
93
|
+
padding: 0 spacing(11) 0 spacing(3);
|
|
94
|
+
@include typography("body-xsmall");
|
|
95
|
+
}
|
|
82
96
|
}
|
|
@@ -15,6 +15,10 @@
|
|
|
15
15
|
grid-template-columns: auto;
|
|
16
16
|
gap: spacing(2);
|
|
17
17
|
|
|
18
|
+
&:has(#{$c}--label__size__small) {
|
|
19
|
+
gap: spacing(1);
|
|
20
|
+
}
|
|
21
|
+
|
|
18
22
|
&__theme {
|
|
19
23
|
&__light {
|
|
20
24
|
--ilo-form-control-label-color: var(--ilo-color-gray-charcoal);
|
|
@@ -146,7 +150,7 @@
|
|
|
146
150
|
|
|
147
151
|
&__size {
|
|
148
152
|
&__small {
|
|
149
|
-
@include typography("
|
|
153
|
+
@include typography("body-xsmall");
|
|
150
154
|
}
|
|
151
155
|
|
|
152
156
|
&__medium {
|
|
@@ -1,37 +1,55 @@
|
|
|
1
1
|
@use "../functions" as *;
|
|
2
2
|
@import "../mixins";
|
|
3
3
|
|
|
4
|
+
// Base styles for the .ilo--input class, applied by TextInput, NumberPicker,
|
|
5
|
+
// DatePicker, and SearchField (and extended in _datepicker.scss). This is the
|
|
6
|
+
// shared form-input base — keep it even though there is no standalone Input
|
|
7
|
+
// component.
|
|
4
8
|
.ilo--input {
|
|
5
9
|
appearance: none;
|
|
6
10
|
background-color: var(--ilo-color-white);
|
|
7
11
|
border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
|
|
8
12
|
box-sizing: border-box;
|
|
9
|
-
font-family: var(--ilo-fonts-copy);
|
|
10
|
-
font-weight: var(--ilo-font-weight-medium);
|
|
11
|
-
@include typography("highlight-medium");
|
|
12
13
|
height: px-to-rem(48px);
|
|
13
14
|
margin: spacing(0);
|
|
14
15
|
outline: none;
|
|
15
|
-
padding: spacing(4) spacing(3)
|
|
16
|
+
padding: spacing(4) spacing(3);
|
|
16
17
|
width: 100%;
|
|
18
|
+
@include typography("highlight-medium");
|
|
19
|
+
|
|
20
|
+
&__size__small {
|
|
21
|
+
height: px-to-rem(32px);
|
|
22
|
+
padding: spacing(2) spacing(3);
|
|
23
|
+
@include typography("body-xsmall");
|
|
24
|
+
}
|
|
17
25
|
|
|
18
26
|
&:focus {
|
|
19
27
|
background-color: var(--ilo-color-blue-lighter);
|
|
20
28
|
border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
|
|
21
|
-
|
|
29
|
+
border-inline-start-color: var(--ilo-color-blue);
|
|
30
|
+
box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-blue);
|
|
22
31
|
outline: none;
|
|
23
32
|
}
|
|
24
33
|
|
|
34
|
+
[dir="rtl"] &:focus {
|
|
35
|
+
box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-blue);
|
|
36
|
+
}
|
|
37
|
+
|
|
25
38
|
&:disabled {
|
|
26
39
|
opacity: 0.45;
|
|
27
40
|
pointer-events: none;
|
|
28
41
|
}
|
|
29
42
|
|
|
30
43
|
&:invalid,
|
|
31
|
-
|
|
32
|
-
.error & {
|
|
44
|
+
&__error {
|
|
33
45
|
background-color: var(--ilo-color-white);
|
|
34
46
|
border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
|
|
35
|
-
border-
|
|
47
|
+
border-inline-start-color: var(--ilo-color-red-dark);
|
|
48
|
+
box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-red-dark);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
[dir="rtl"] &:invalid,
|
|
52
|
+
[dir="rtl"] &__error {
|
|
53
|
+
box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-red-dark);
|
|
36
54
|
}
|
|
37
55
|
}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.ilo--input {
|
|
13
|
-
padding-inline-end: spacing(
|
|
13
|
+
padding-inline-end: spacing(9);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
&--button {
|
|
@@ -70,6 +70,34 @@
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
+
&__size__small {
|
|
74
|
+
.ilo--input {
|
|
75
|
+
padding-inline-end: spacing(4);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.ilo--searchfield--button {
|
|
79
|
+
width: px-to-rem(32px);
|
|
80
|
+
|
|
81
|
+
&:after {
|
|
82
|
+
height: px-to-rem(16px);
|
|
83
|
+
width: px-to-rem(16px);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.ilo--searchfield--clear-button {
|
|
88
|
+
svg {
|
|
89
|
+
display: block;
|
|
90
|
+
width: px-to-rem(16px);
|
|
91
|
+
height: px-to-rem(16px);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&.show {
|
|
95
|
+
top: 50%;
|
|
96
|
+
transform: translateY(-50%);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
73
101
|
// Remove the default clear button in search
|
|
74
102
|
[type="search"]::-webkit-search-cancel-button {
|
|
75
103
|
-webkit-appearance: none;
|
|
@@ -22,11 +22,15 @@
|
|
|
22
22
|
&:focus {
|
|
23
23
|
background-color: var(--ilo-color-blue-lighter);
|
|
24
24
|
border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
|
|
25
|
-
border-
|
|
26
|
-
|
|
25
|
+
border-inline-start-color: var(--ilo-color-blue-medium);
|
|
26
|
+
box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-blue-medium);
|
|
27
27
|
outline: none;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
[dir="rtl"] &:focus {
|
|
31
|
+
box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-blue-medium);
|
|
32
|
+
}
|
|
33
|
+
|
|
30
34
|
&:disabled {
|
|
31
35
|
opacity: 0.45;
|
|
32
36
|
pointer-events: none;
|
|
@@ -37,6 +41,13 @@
|
|
|
37
41
|
&__error & {
|
|
38
42
|
background-color: var(--ilo-color-white);
|
|
39
43
|
border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
|
|
40
|
-
border-
|
|
44
|
+
border-inline-start-color: var(--ilo-color-red-dark);
|
|
45
|
+
box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-red-dark);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
[dir="rtl"] &:invalid,
|
|
49
|
+
[dir="rtl"] &__error,
|
|
50
|
+
[dir="rtl"] &__error & {
|
|
51
|
+
box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-red-dark);
|
|
41
52
|
}
|
|
42
53
|
}
|
|
@@ -12,54 +12,249 @@
|
|
|
12
12
|
--ilo-layout-padding: #{px-to-rem(20px)};
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
|
-
* Colors
|
|
15
|
+
* Legacy Colors (aliases pointing to new global colors)
|
|
16
16
|
*/
|
|
17
|
-
--ilo-color-white:
|
|
18
|
-
--ilo-color-blue:
|
|
19
|
-
--ilo-color-blue-lighter:
|
|
20
|
-
--ilo-color-blue-light:
|
|
21
|
-
--ilo-color-blue-dark:
|
|
17
|
+
--ilo-color-white: var(--ilo-color-neutrals-white);
|
|
18
|
+
--ilo-color-blue: var(--ilo-color-brand-600);
|
|
19
|
+
--ilo-color-blue-lighter: var(--ilo-color-brand-100);
|
|
20
|
+
--ilo-color-blue-light: var(--ilo-color-brand-200);
|
|
21
|
+
--ilo-color-blue-dark: var(--ilo-color-brand-800);
|
|
22
22
|
--ilo-color-blue-medium: rgba(210, 213, 242, 1);
|
|
23
|
-
--ilo-color-blue-ramp:
|
|
24
|
-
--ilo-color-blue-dark-ramp:
|
|
25
|
-
--ilo-color-gray-charcoal:
|
|
26
|
-
--ilo-color-gray-accessible:
|
|
27
|
-
--ilo-color-gray-light:
|
|
23
|
+
--ilo-color-blue-ramp: var(--ilo-color-brand-700);
|
|
24
|
+
--ilo-color-blue-dark-ramp: var(--ilo-color-brand-800-transparent);
|
|
25
|
+
--ilo-color-gray-charcoal: var(--ilo-color-neutrals-black);
|
|
26
|
+
--ilo-color-gray-accessible: var(--ilo-color-neutrals-700);
|
|
27
|
+
--ilo-color-gray-light: var(--ilo-color-neutrals-200);
|
|
28
28
|
--ilo-color-gray-light-semi-transparent: rgba(237, 240, 242, 0.25);
|
|
29
|
-
--ilo-color-gray-base:
|
|
30
|
-
--ilo-color-red:
|
|
31
|
-
--ilo-color-red-light:
|
|
32
|
-
--ilo-color-red-dark:
|
|
33
|
-
--ilo-color-red-ramp:
|
|
34
|
-
--ilo-color-yellow:
|
|
35
|
-
--ilo-color-yellow-light:
|
|
36
|
-
--ilo-color-yellow-ramp:
|
|
37
|
-
--ilo-color-green:
|
|
38
|
-
--ilo-color-green-light:
|
|
39
|
-
--ilo-color-green-ramp:
|
|
40
|
-
--ilo-color-turquoise:
|
|
41
|
-
--ilo-color-purple:
|
|
42
|
-
|
|
43
|
-
|
|
29
|
+
--ilo-color-gray-base: var(--ilo-color-neutrals-500);
|
|
30
|
+
--ilo-color-red: var(--ilo-color-red-500);
|
|
31
|
+
--ilo-color-red-light: var(--ilo-color-red-100);
|
|
32
|
+
--ilo-color-red-dark: var(--ilo-color-red-600);
|
|
33
|
+
--ilo-color-red-ramp: var(--ilo-color-red-500-transparent);
|
|
34
|
+
--ilo-color-yellow: var(--ilo-color-yellow-400);
|
|
35
|
+
--ilo-color-yellow-light: var(--ilo-color-yellow-100);
|
|
36
|
+
--ilo-color-yellow-ramp: var(--ilo-color-yellow-400-transparent);
|
|
37
|
+
--ilo-color-green: var(--ilo-color-green-400);
|
|
38
|
+
--ilo-color-green-light: var(--ilo-color-green-100);
|
|
39
|
+
--ilo-color-green-ramp: var(--ilo-color-green-400-transparent);
|
|
40
|
+
--ilo-color-turquoise: var(--ilo-color-turquoise-500);
|
|
41
|
+
--ilo-color-purple: var(--ilo-color-purple-600);
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* New Global Colors
|
|
45
|
+
*/
|
|
46
|
+
|
|
47
|
+
// Brand
|
|
44
48
|
--ilo-color-brand-800: rgba(35, 0, 80, 1);
|
|
49
|
+
--ilo-color-brand-800-transparent: rgba(35, 0, 80, 0.5);
|
|
50
|
+
--ilo-color-brand-700: rgba(21, 31, 133, 1);
|
|
45
51
|
--ilo-color-brand-600: rgba(30, 45, 190, 1);
|
|
52
|
+
--ilo-color-brand-600-transparent: rgba(30, 45, 190, 0.4);
|
|
53
|
+
--ilo-color-brand-500: rgba(50, 100, 200, 1);
|
|
54
|
+
--ilo-color-brand-400: rgba(90, 135, 205, 1);
|
|
55
|
+
--ilo-color-brand-300: rgba(130, 175, 220, 1);
|
|
56
|
+
--ilo-color-brand-200: rgba(190, 220, 250, 1);
|
|
46
57
|
--ilo-color-brand-100: rgba(235, 245, 253, 1);
|
|
58
|
+
|
|
59
|
+
// Neutrals
|
|
60
|
+
--ilo-color-neutrals-black: rgba(45, 45, 45, 1);
|
|
61
|
+
--ilo-color-neutrals-700: rgba(109, 109, 109, 1);
|
|
62
|
+
--ilo-color-neutrals-500: rgba(184, 196, 204, 1);
|
|
63
|
+
--ilo-color-neutrals-200: rgba(237, 240, 242, 1);
|
|
64
|
+
--ilo-color-neutrals-white: rgba(255, 255, 255, 1);
|
|
65
|
+
|
|
66
|
+
// Red
|
|
67
|
+
--ilo-color-red-800: rgba(125, 18, 26, 1);
|
|
68
|
+
--ilo-color-red-700: rgba(150, 36, 45, 1);
|
|
69
|
+
--ilo-color-red-600: rgba(200, 48, 60, 1);
|
|
70
|
+
--ilo-color-red-500: rgba(250, 60, 75, 1);
|
|
71
|
+
--ilo-color-red-500-transparent: rgba(250, 60, 75, 0.2);
|
|
72
|
+
--ilo-color-red-400: rgba(251, 99, 111, 1);
|
|
73
|
+
--ilo-color-red-300: rgba(252, 138, 147, 1);
|
|
74
|
+
--ilo-color-red-200: rgba(253, 177, 183, 1);
|
|
75
|
+
--ilo-color-red-100: rgba(254, 216, 219, 1);
|
|
76
|
+
|
|
77
|
+
// Yellow
|
|
78
|
+
--ilo-color-yellow-800: rgba(165, 104, 3, 1);
|
|
79
|
+
--ilo-color-yellow-700: rgba(215, 135, 0, 1);
|
|
80
|
+
--ilo-color-yellow-600: rgba(228, 148, 40, 1);
|
|
47
81
|
--ilo-color-yellow-500: rgba(250, 180, 40, 1);
|
|
82
|
+
--ilo-color-yellow-400: rgba(255, 205, 45, 1);
|
|
83
|
+
--ilo-color-yellow-400-transparent: rgba(255, 205, 45, 0.2);
|
|
84
|
+
--ilo-color-yellow-300: rgba(255, 220, 108, 1);
|
|
85
|
+
--ilo-color-yellow-200: rgba(255, 235, 171, 1);
|
|
86
|
+
--ilo-color-yellow-100: rgba(255, 245, 200, 1);
|
|
87
|
+
|
|
88
|
+
// Green
|
|
89
|
+
--ilo-color-green-800: rgba(21, 66, 0, 1);
|
|
90
|
+
--ilo-color-green-700: rgba(56, 90, 40, 1);
|
|
91
|
+
--ilo-color-green-600: rgba(84, 135, 60, 1);
|
|
92
|
+
--ilo-color-green-500: rgba(112, 180, 80, 1);
|
|
93
|
+
--ilo-color-green-400: rgba(140, 225, 100, 1);
|
|
94
|
+
--ilo-color-green-400-transparent: rgba(140, 225, 100, 0.2);
|
|
95
|
+
--ilo-color-green-300: rgba(175, 234, 147, 1);
|
|
96
|
+
--ilo-color-green-200: rgba(209, 243, 193, 1);
|
|
97
|
+
--ilo-color-green-100: rgba(232, 249, 224, 1);
|
|
98
|
+
|
|
99
|
+
// Turquoise
|
|
100
|
+
--ilo-color-turquoise-800: rgba(2, 84, 84, 1);
|
|
101
|
+
--ilo-color-turquoise-700: rgba(4, 147, 147, 1);
|
|
102
|
+
--ilo-color-turquoise-600: rgba(5, 189, 189, 1);
|
|
103
|
+
--ilo-color-turquoise-500: rgba(5, 210, 210, 1);
|
|
104
|
+
--ilo-color-turquoise-400: rgba(105, 228, 228, 1);
|
|
105
|
+
--ilo-color-turquoise-300: rgba(158, 242, 242, 1);
|
|
106
|
+
--ilo-color-turquoise-200: rgba(180, 250, 247, 1);
|
|
107
|
+
--ilo-color-turquoise-100: rgba(210, 251, 251, 1);
|
|
108
|
+
|
|
109
|
+
// Purple
|
|
110
|
+
--ilo-color-purple-800: rgba(95, 0, 55, 1);
|
|
111
|
+
--ilo-color-purple-700: rgba(119, 20, 73, 1);
|
|
112
|
+
--ilo-color-purple-600: rgba(150, 10, 85, 1);
|
|
113
|
+
--ilo-color-purple-500: rgba(171, 59, 119, 1);
|
|
114
|
+
--ilo-color-purple-400: rgba(203, 133, 170, 1);
|
|
115
|
+
--ilo-color-purple-300: rgba(224, 182, 204, 1);
|
|
116
|
+
--ilo-color-purple-200: rgba(240, 210, 224, 1);
|
|
117
|
+
--ilo-color-purple-100: rgba(245, 231, 238, 1);
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Light Semantic Colors
|
|
121
|
+
*/
|
|
122
|
+
|
|
123
|
+
// Text
|
|
124
|
+
--ilo-color-light-text-default: var(--ilo-color-neutrals-black);
|
|
125
|
+
--ilo-color-light-text-subtle: var(--ilo-color-neutrals-700);
|
|
126
|
+
--ilo-color-light-text-brand: var(--ilo-color-brand-800);
|
|
127
|
+
--ilo-color-light-text-accent: var(--ilo-color-purple-600);
|
|
128
|
+
--ilo-color-light-text-inverse: var(--ilo-color-neutrals-white);
|
|
129
|
+
|
|
130
|
+
// Action
|
|
131
|
+
--ilo-color-light-action-default: var(--ilo-color-brand-800);
|
|
132
|
+
--ilo-color-light-action-hover: var(--ilo-color-brand-600);
|
|
133
|
+
--ilo-color-light-action-selected: var(--ilo-color-brand-600);
|
|
134
|
+
--ilo-color-light-action-inverse: var(--ilo-color-neutrals-white);
|
|
135
|
+
|
|
136
|
+
// Icon
|
|
137
|
+
--ilo-color-light-icon-default: var(--ilo-color-neutrals-black);
|
|
138
|
+
--ilo-color-light-icon-subtle: var(--ilo-color-neutrals-500);
|
|
139
|
+
--ilo-color-light-icon-accent: var(--ilo-color-purple-600);
|
|
140
|
+
--ilo-color-light-icon-inverse: var(--ilo-color-neutrals-white);
|
|
141
|
+
|
|
142
|
+
// Border
|
|
143
|
+
--ilo-color-light-border-default: var(--ilo-color-neutrals-500);
|
|
144
|
+
--ilo-color-light-border-subtle: var(--ilo-color-neutrals-200);
|
|
145
|
+
--ilo-color-light-border-brand: var(--ilo-color-brand-600);
|
|
146
|
+
--ilo-color-light-border-brand-2: var(--ilo-color-brand-200);
|
|
147
|
+
--ilo-color-light-border-brand-3: var(--ilo-color-brand-800);
|
|
148
|
+
--ilo-color-light-border-brand-4: var(--ilo-color-purple-600);
|
|
149
|
+
--ilo-color-light-border-focus: var(--ilo-color-yellow-400);
|
|
150
|
+
--ilo-color-light-border-inverse: var(--ilo-color-neutrals-white);
|
|
151
|
+
|
|
152
|
+
// Container Background
|
|
153
|
+
--ilo-color-light-container-bg-default: var(--ilo-color-neutrals-white);
|
|
154
|
+
--ilo-color-light-container-bg-subtle: var(--ilo-color-brand-100);
|
|
155
|
+
--ilo-color-light-container-bg-brand: var(--ilo-color-brand-800);
|
|
156
|
+
--ilo-color-light-container-bg-disabled: var(--ilo-color-neutrals-200);
|
|
157
|
+
|
|
158
|
+
// Page Background
|
|
159
|
+
--ilo-color-light-page-bg-default: var(--ilo-color-neutrals-white);
|
|
160
|
+
--ilo-color-light-page-bg-subtle: var(--ilo-color-brand-100);
|
|
161
|
+
|
|
162
|
+
// Supportive Feedback
|
|
163
|
+
--ilo-color-light-feedback-error-dark: var(--ilo-color-red-600);
|
|
164
|
+
--ilo-color-light-feedback-error-default: var(--ilo-color-red-500);
|
|
165
|
+
--ilo-color-light-feedback-error-light: var(--ilo-color-red-100);
|
|
166
|
+
--ilo-color-light-feedback-warning-default: var(--ilo-color-yellow-400);
|
|
167
|
+
--ilo-color-light-feedback-warning-light: var(--ilo-color-yellow-100);
|
|
168
|
+
--ilo-color-light-feedback-success-default: var(--ilo-color-green-400);
|
|
169
|
+
--ilo-color-light-feedback-success-light: var(--ilo-color-green-100);
|
|
170
|
+
--ilo-color-light-feedback-info-default: var(--ilo-color-brand-600);
|
|
171
|
+
--ilo-color-light-feedback-info-light: var(--ilo-color-brand-200);
|
|
172
|
+
|
|
173
|
+
// Generic
|
|
174
|
+
--ilo-color-light-generic-turquoise: var(--ilo-color-turquoise-500);
|
|
175
|
+
--ilo-color-light-generic-purple: var(--ilo-color-purple-600);
|
|
176
|
+
--ilo-color-light-generic-green: var(--ilo-color-green-400);
|
|
177
|
+
--ilo-color-light-generic-yellow: var(--ilo-color-yellow-400);
|
|
178
|
+
--ilo-color-light-generic-ilo-light-blue: var(--ilo-color-brand-100);
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* Dark Semantic Colors
|
|
182
|
+
*/
|
|
183
|
+
|
|
184
|
+
// Text
|
|
185
|
+
--ilo-color-dark-text-default: var(--ilo-color-neutrals-white);
|
|
186
|
+
--ilo-color-dark-text-subtle: var(--ilo-color-neutrals-200);
|
|
187
|
+
--ilo-color-dark-text-brand: var(--ilo-color-brand-200);
|
|
188
|
+
--ilo-color-dark-text-accent: var(--ilo-color-yellow-400);
|
|
189
|
+
--ilo-color-dark-text-inverse: var(--ilo-color-brand-800);
|
|
190
|
+
|
|
191
|
+
// Action
|
|
192
|
+
--ilo-color-dark-action-default: var(--ilo-color-brand-100);
|
|
193
|
+
--ilo-color-dark-action-hover: var(--ilo-color-brand-200);
|
|
194
|
+
--ilo-color-dark-action-selected: var(--ilo-color-brand-200);
|
|
195
|
+
--ilo-color-dark-action-inverse: var(--ilo-color-brand-800);
|
|
196
|
+
|
|
197
|
+
// Icon
|
|
198
|
+
--ilo-color-dark-icon-default: var(--ilo-color-neutrals-white);
|
|
199
|
+
--ilo-color-dark-icon-subtle: var(--ilo-color-neutrals-700);
|
|
200
|
+
--ilo-color-dark-icon-accent: var(--ilo-color-yellow-400);
|
|
201
|
+
--ilo-color-dark-icon-inverse: var(--ilo-color-brand-800);
|
|
202
|
+
|
|
203
|
+
// Border
|
|
204
|
+
--ilo-color-dark-border-default: var(--ilo-color-neutrals-white);
|
|
205
|
+
--ilo-color-dark-border-subtle: var(--ilo-color-neutrals-700);
|
|
206
|
+
--ilo-color-dark-border-brand: var(--ilo-color-brand-200);
|
|
207
|
+
--ilo-color-dark-border-brand-2: var(--ilo-color-brand-800);
|
|
208
|
+
--ilo-color-dark-border-brand-3: var(--ilo-color-brand-100);
|
|
209
|
+
--ilo-color-dark-border-brand-4: var(--ilo-color-yellow-400);
|
|
210
|
+
--ilo-color-dark-border-focus: var(--ilo-color-yellow-400);
|
|
211
|
+
--ilo-color-dark-border-inverse: var(--ilo-color-brand-800);
|
|
212
|
+
|
|
213
|
+
// Container Background
|
|
214
|
+
--ilo-color-dark-container-bg-default: var(--ilo-color-brand-800);
|
|
215
|
+
--ilo-color-dark-container-bg-subtle: var(--ilo-color-brand-600);
|
|
216
|
+
--ilo-color-dark-container-bg-brand: var(--ilo-color-brand-100);
|
|
217
|
+
--ilo-color-dark-container-bg-disabled: var(--ilo-color-neutrals-black);
|
|
218
|
+
|
|
219
|
+
// Page Background
|
|
220
|
+
--ilo-color-dark-page-bg-default: var(--ilo-color-brand-800);
|
|
221
|
+
--ilo-color-dark-page-bg-subtle: var(--ilo-color-neutrals-black);
|
|
222
|
+
|
|
223
|
+
// Supportive Feedback
|
|
224
|
+
--ilo-color-dark-feedback-error-dark: var(--ilo-color-red-100);
|
|
225
|
+
--ilo-color-dark-feedback-error-default: var(--ilo-color-red-500);
|
|
226
|
+
--ilo-color-dark-feedback-error-light: var(--ilo-color-red-600);
|
|
227
|
+
--ilo-color-dark-feedback-warning-default: var(--ilo-color-yellow-400);
|
|
228
|
+
--ilo-color-dark-feedback-warning-light: var(--ilo-color-yellow-800);
|
|
229
|
+
--ilo-color-dark-feedback-success-default: var(--ilo-color-green-400);
|
|
230
|
+
--ilo-color-dark-feedback-success-light: var(--ilo-color-green-800);
|
|
231
|
+
--ilo-color-dark-feedback-info-default: var(--ilo-color-brand-600);
|
|
232
|
+
--ilo-color-dark-feedback-info-light: var(--ilo-color-brand-800);
|
|
233
|
+
|
|
234
|
+
// Generic
|
|
235
|
+
--ilo-color-dark-generic-turquoise: var(--ilo-color-turquoise-500);
|
|
236
|
+
--ilo-color-dark-generic-purple: var(--ilo-color-purple-600);
|
|
237
|
+
--ilo-color-dark-generic-green: var(--ilo-color-green-400);
|
|
238
|
+
--ilo-color-dark-generic-yellow: var(--ilo-color-yellow-400);
|
|
239
|
+
--ilo-color-dark-generic-ilo-light-blue: var(--ilo-color-brand-200);
|
|
240
|
+
|
|
241
|
+
/**
|
|
242
|
+
* Legacy Semantic Aliases (preserved for backwards compatibility)
|
|
243
|
+
*/
|
|
244
|
+
--ilo-color-notification-type-error: var(--ilo-color-red-500);
|
|
245
|
+
--ilo-color-notification-type-info: var(--ilo-color-brand-600);
|
|
246
|
+
--ilo-color-notification-type-success: var(--ilo-color-green-400);
|
|
247
|
+
--ilo-color-notification-type-warning: var(--ilo-color-yellow-400);
|
|
248
|
+
--ilo-color-background-default: var(--ilo-color-neutrals-white);
|
|
249
|
+
--ilo-color-background-active: var(--ilo-color-brand-600);
|
|
250
|
+
--ilo-color-background-highlight: var(--ilo-color-neutrals-200);
|
|
251
|
+
--ilo-color-background-hover: var(--ilo-color-brand-100);
|
|
252
|
+
--ilo-color-background-focus: var(--ilo-color-neutrals-white);
|
|
48
253
|
|
|
49
|
-
--ilo-color-
|
|
50
|
-
--ilo-color-
|
|
51
|
-
--ilo-color-
|
|
52
|
-
--ilo-color-
|
|
53
|
-
--ilo-color-background-default: var(--ilo-color-white);
|
|
54
|
-
--ilo-color-background-active: var(--ilo-color-blue);
|
|
55
|
-
--ilo-color-background-highlight: var(--ilo-color-gray-light);
|
|
56
|
-
--ilo-color-background-hover: var(--ilo-color-blue-lighter);
|
|
57
|
-
--ilo-color-background-focus: var(--ilo-color-white);
|
|
58
|
-
|
|
59
|
-
--ilo-color-borders-default: var(--ilo-color-gray-base);
|
|
60
|
-
--ilo-color-borders-hover: var(--ilo-color-blue);
|
|
61
|
-
--ilo-color-borders-active: var(--ilo-color-blue);
|
|
62
|
-
--ilo-color-borders-focus: var(--ilo-color-yellow);
|
|
254
|
+
--ilo-color-borders-default: var(--ilo-color-neutrals-500);
|
|
255
|
+
--ilo-color-borders-hover: var(--ilo-color-brand-600);
|
|
256
|
+
--ilo-color-borders-active: var(--ilo-color-brand-600);
|
|
257
|
+
--ilo-color-borders-focus: var(--ilo-color-yellow-400);
|
|
63
258
|
|
|
64
259
|
/**
|
|
65
260
|
* Sizing
|
|
@@ -134,27 +329,27 @@
|
|
|
134
329
|
/**
|
|
135
330
|
* Links
|
|
136
331
|
*/
|
|
137
|
-
--ilo-link-color-default-light: var(--ilo-color-
|
|
138
|
-
--ilo-link-color-default-dark: var(--ilo-color-white);
|
|
332
|
+
--ilo-link-color-default-light: var(--ilo-color-brand-800);
|
|
333
|
+
--ilo-link-color-default-dark: var(--ilo-color-neutrals-white);
|
|
139
334
|
|
|
140
|
-
--ilo-link-color-visited-light: var(--ilo-color-purple);
|
|
141
|
-
--ilo-link-color-visited-dark: var(--ilo-color-
|
|
335
|
+
--ilo-link-color-visited-light: var(--ilo-color-purple-600);
|
|
336
|
+
--ilo-link-color-visited-dark: var(--ilo-color-neutrals-500);
|
|
142
337
|
|
|
143
|
-
--ilo-link-color-hover-light: var(--ilo-color-
|
|
144
|
-
--ilo-link-color-hover-dark: var(--ilo-color-
|
|
338
|
+
--ilo-link-color-hover-light: var(--ilo-color-brand-600);
|
|
339
|
+
--ilo-link-color-hover-dark: var(--ilo-color-brand-600);
|
|
145
340
|
|
|
146
|
-
--ilo-link-color-active-light: var(--ilo-color-
|
|
147
|
-
--ilo-link-color-active-dark: var(--ilo-color-
|
|
341
|
+
--ilo-link-color-active-light: var(--ilo-color-brand-800);
|
|
342
|
+
--ilo-link-color-active-dark: var(--ilo-color-brand-800);
|
|
148
343
|
|
|
149
|
-
--ilo-link-color-focus-light: var(--ilo-color-
|
|
150
|
-
--ilo-link-color-focus-dark: var(--ilo-color-
|
|
344
|
+
--ilo-link-color-focus-light: var(--ilo-color-brand-800);
|
|
345
|
+
--ilo-link-color-focus-dark: var(--ilo-color-brand-800);
|
|
151
346
|
|
|
152
347
|
--ilo-link-background-default-light: transparent;
|
|
153
348
|
--ilo-link-background-default-dark: transparent;
|
|
154
349
|
|
|
155
350
|
--ilo-link-background-hover-light: transparent;
|
|
156
|
-
--ilo-link-background-hover-dark: var(--ilo-color-white);
|
|
351
|
+
--ilo-link-background-hover-dark: var(--ilo-color-neutrals-white);
|
|
157
352
|
|
|
158
|
-
--ilo-link-background-focus-light: var(--ilo-color-yellow);
|
|
159
|
-
--ilo-link-background-focus-dark: var(--ilo-color-yellow);
|
|
353
|
+
--ilo-link-background-focus-light: var(--ilo-color-yellow-400);
|
|
354
|
+
--ilo-link-background-focus-dark: var(--ilo-color-yellow-400);
|
|
160
355
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.ilo--text-input{appearance:none;background-color:var(--ilo-color-white);box-sizing:border-box;font-family:var(--ilo-fonts-copy);font-family:var(--ilo-fonts-display);font-size:var(--ilo-font-size-md);font-weight:var(--ilo-font-weight-medium);height:2.5723472669rem;letter-spacing:var(--ilo-letter-spacing-sm);line-height:var(--ilo-line-height-xlg);margin:calc(var(--ilo-spacing-base)*0);padding:calc(var(--ilo-spacing-base)*4) calc(var(--ilo-spacing-base)*3);width:100%}.ilo--text-input,.ilo--text-input:focus{border:var(--ilo-border-md) solid var(--ilo-color-gray-base);outline:0}.ilo--text-input:focus{background-color:var(--ilo-color-blue-lighter);border-left:.1607717042rem solid var(--ilo-color-blue);padding-left:calc(var(--ilo-spacing-base)*3)}.ilo--text-input:disabled{opacity:.45;pointer-events:none}.ilo--text-input:invalid,.ilo--text-input__error{background-color:var(--ilo-color-white);border:var(--ilo-border-md) solid var(--ilo-color-gray-base);border-left:.1607717042rem solid var(--ilo-color-red-dark)}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
@use "../functions" as *;
|
|
2
|
-
@import "../mixins";
|
|
3
|
-
|
|
4
|
-
.ilo--text-input {
|
|
5
|
-
appearance: none;
|
|
6
|
-
background-color: var(--ilo-color-white);
|
|
7
|
-
border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
font-family: var(--ilo-fonts-copy);
|
|
10
|
-
font-weight: var(--ilo-font-weight-medium);
|
|
11
|
-
@include typography("highlight-medium");
|
|
12
|
-
height: px-to-rem(48px);
|
|
13
|
-
margin: spacing(0);
|
|
14
|
-
outline: none;
|
|
15
|
-
padding: spacing(4) spacing(3);
|
|
16
|
-
width: 100%;
|
|
17
|
-
|
|
18
|
-
&:focus {
|
|
19
|
-
background-color: var(--ilo-color-blue-lighter);
|
|
20
|
-
border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
|
|
21
|
-
border-left: px-to-rem(3px) solid var(--ilo-color-blue);
|
|
22
|
-
padding-left: spacing(3);
|
|
23
|
-
outline: none;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&:disabled {
|
|
27
|
-
opacity: 0.45;
|
|
28
|
-
pointer-events: none;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&:invalid,
|
|
32
|
-
&__error {
|
|
33
|
-
background-color: var(--ilo-color-white);
|
|
34
|
-
border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
|
|
35
|
-
border-left: px-to-rem(3px) solid var(--ilo-color-red-dark);
|
|
36
|
-
}
|
|
37
|
-
}
|