srcdev-nuxt-forms 2.1.36 → 2.1.37
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/assets/styles/ally/_utils.css +20 -0
- package/assets/styles/ally/_variables.css +8 -0
- package/assets/styles/ally/index.css +2 -0
- package/assets/styles/forms/themes/_error.css +6 -6
- package/assets/styles/forms/themes/_ghost.css +6 -6
- package/assets/styles/forms/themes/_input-action.css +20 -0
- package/assets/styles/forms/themes/_primary.css +7 -6
- package/assets/styles/forms/themes/_secondary.css +6 -6
- package/assets/styles/forms/themes/_success.css +6 -6
- package/assets/styles/forms/themes/_tertiary.css +5 -5
- package/assets/styles/forms/themes/_warning.css +6 -6
- package/assets/styles/forms/themes/index.css +8 -7
- package/assets/styles/forms/variables/_sizes.css +82 -0
- package/assets/styles/forms/variables/_theme.css +1 -62
- package/assets/styles/forms/variables/index.css +1 -0
- package/assets/styles/main.css +1 -0
- package/assets/styles/typography/utils/_font-classes.css +30 -0
- package/components/forms/form-errors/InputError.vue +1 -1
- package/components/forms/input-button/InputButtonCore.vue +28 -131
- package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue +21 -20
- package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue +14 -29
- package/components/forms/input-checkbox-radio/InputCheckboxRadioWithLabel.vue +1 -1
- package/components/forms/input-number/InputNumberCore.vue +16 -15
- package/components/forms/input-number/variants/InputNumberDefault.vue +7 -7
- package/components/forms/input-range/InputRangeCore.vue +3 -3
- package/components/forms/input-range-fancy/InputRangeFancyCore.vue +0 -12
- package/components/forms/input-text/InputTextCore.vue +52 -22
- package/components/forms/input-text/variants/InputTextAsNumberWithLabel.vue +23 -5
- package/components/forms/input-text/variants/InputTextWithLabel.vue +9 -1
- package/components/forms/input-textarea/InputTextareaCore.vue +4 -4
- package/components/forms/toggle-switch/ToggleSwitchCore.vue +19 -29
- package/package.json +2 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.sr-only {
|
|
2
|
+
border-width: 0;
|
|
3
|
+
clip: rect(1px, 0.1rem, 0.1rem, 0.1rem);
|
|
4
|
+
clip-path: inset(50%);
|
|
5
|
+
height: 0.1rem;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
position: absolute;
|
|
8
|
+
white-space: nowrap;
|
|
9
|
+
width: 0.1rem;
|
|
10
|
+
}
|
|
11
|
+
/* .sr-only {
|
|
12
|
+
position: absolute;
|
|
13
|
+
width: 0.1rem;
|
|
14
|
+
height: 0.1rem;
|
|
15
|
+
padding: 0;
|
|
16
|
+
margin: -0.1rem;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
clip: rect(0, 0, 0, 0);
|
|
19
|
+
white-space: nowrap;
|
|
20
|
+
} */
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--focus-box-shadow-colour-off: transparent;
|
|
3
|
+
--focus-box-shadow-colour-on: light-dark(var(--blue-12), var(--gray-0));
|
|
4
|
+
--form-focus-box-shadow: 0 0 0 0.3rem;
|
|
5
|
+
|
|
6
|
+
--box-shadow-off: 0 0 0 0.3rem transparent;
|
|
7
|
+
--box-shadow-on: 0 0 0 0.3rem light-dark(var(--blue-12), var(--gray-0));
|
|
8
|
+
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--red-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--red-12), var(--red-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--red-12), var(--red-12));
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
**/
|
|
33
33
|
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
34
|
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
-
|
|
36
|
-
--theme-form-toggle-border: var(--
|
|
37
|
-
|
|
38
|
-
--theme-form-toggle-outline: var(--
|
|
35
|
+
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--red-12), var(--red-1));
|
|
37
|
+
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--red-12), var(--red-12));
|
|
39
39
|
--theme-form-toggle-symbol-off: var(--orange-12);
|
|
40
40
|
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
41
41
|
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
@@ -72,6 +72,6 @@
|
|
|
72
72
|
--theme-btn-outline-focus: var(--red-0);
|
|
73
73
|
--theme-btn-text-focus: var(--red-12);
|
|
74
74
|
|
|
75
|
-
--theme-form-focus-box-shadow:
|
|
75
|
+
--theme-form-focus-box-shadow: light-dark(var(--red-12), var(--red-2));
|
|
76
76
|
}
|
|
77
77
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--gray-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
**/
|
|
33
33
|
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
34
|
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
-
--
|
|
36
|
-
--theme-form-toggle-border: var(--
|
|
37
|
-
--
|
|
38
|
-
--theme-form-toggle-outline: var(--
|
|
35
|
+
--form-element-border-width: 0.1rem;
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
|
|
37
|
+
--form-element-border-width: 0.1rem;
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
|
|
39
39
|
--theme-form-toggle-symbol-off: var(--gray-4);
|
|
40
40
|
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
41
41
|
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
@@ -72,6 +72,6 @@
|
|
|
72
72
|
--theme-btn-outline-focus: light-dark(var(--gray-12), var(--gray-0));
|
|
73
73
|
--theme-btn-text-focus: light-dark(var(--gray-12), var(--gray-0));
|
|
74
74
|
|
|
75
|
-
--theme-form-focus-box-shadow:
|
|
75
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
76
76
|
}
|
|
77
77
|
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
[data-btn-theme='input-action'] {
|
|
3
|
+
--theme-btn-bg: transparent;
|
|
4
|
+
--theme-btn-border: transparent;
|
|
5
|
+
--theme-btn-outline: transparent;
|
|
6
|
+
--theme-btn-text: var(--theme-form-input-text);
|
|
7
|
+
|
|
8
|
+
--theme-btn-bg-hover: light-dark(var(--gray-2), var(--gray-3));
|
|
9
|
+
--theme-btn-border-hover: transparent;
|
|
10
|
+
--theme-btn-outline-hover: transparent;
|
|
11
|
+
--theme-btn-text-hover: var(--theme-form-input-text);
|
|
12
|
+
|
|
13
|
+
--theme-btn-bg-focus: transparent;
|
|
14
|
+
--theme-btn-border-focus: transparent;
|
|
15
|
+
--theme-btn-outline-focus: transparent;
|
|
16
|
+
--theme-btn-text-focus: transparent;
|
|
17
|
+
|
|
18
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--blue-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
/* --theme-form-focus-box-shadow: light-dark(var(--blue-12), var(--blue-2)); */
|
|
13
|
+
--theme-form-focus-box-shadow: light-dark(red, yellowgreen);
|
|
13
14
|
|
|
14
15
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
16
|
--theme-form-checkbox-border: light-dark(var(--blue-12), var(--blue-12));
|
|
@@ -32,10 +33,10 @@
|
|
|
32
33
|
**/
|
|
33
34
|
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
35
|
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
-
|
|
36
|
-
--theme-form-toggle-border: var(--
|
|
37
|
-
|
|
38
|
-
--theme-form-toggle-outline: var(--
|
|
36
|
+
|
|
37
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--blue-12), var(--blue-1));
|
|
38
|
+
|
|
39
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--blue-1), var(--blue-1));
|
|
39
40
|
--theme-form-toggle-symbol-off: var(--blue-7);
|
|
40
41
|
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
41
42
|
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
@@ -76,6 +77,6 @@
|
|
|
76
77
|
--theme-btn-outline-focus: var(--blue-0);
|
|
77
78
|
--theme-btn-text-focus: var(--blue-12);
|
|
78
79
|
|
|
79
|
-
--theme-form-focus-box-shadow:
|
|
80
|
+
--theme-form-focus-box-shadow: light-dark(var(--blue-12), var(--blue-2));
|
|
80
81
|
}
|
|
81
82
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--gray-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
**/
|
|
33
33
|
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
34
|
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
-
|
|
36
|
-
--theme-form-toggle-border: var(--
|
|
37
|
-
|
|
38
|
-
--theme-form-toggle-outline: var(--
|
|
35
|
+
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
|
|
37
|
+
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
|
|
39
39
|
--theme-form-toggle-symbol-off: var(--gray-4);
|
|
40
40
|
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
41
41
|
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
@@ -72,6 +72,6 @@
|
|
|
72
72
|
--theme-btn-outline-focus: var(--gray-0);
|
|
73
73
|
--theme-btn-text-focus: var(--gray-12);
|
|
74
74
|
|
|
75
|
-
--theme-form-focus-box-shadow:
|
|
75
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
76
76
|
}
|
|
77
77
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--green-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--green-12), var(--green-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--green-12), var(--green-12));
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
**/
|
|
33
33
|
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
34
|
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
-
|
|
36
|
-
--theme-form-toggle-border: var(--
|
|
37
|
-
|
|
38
|
-
--theme-form-toggle-outline: var(--
|
|
35
|
+
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--green-12), var(--green-1));
|
|
37
|
+
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--green-12), var(--green-12));
|
|
39
39
|
--theme-form-toggle-symbol-off: var(--green-4);
|
|
40
40
|
--theme-form-toggle-symbol-on: var(--green-12);
|
|
41
41
|
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
@@ -72,6 +72,6 @@
|
|
|
72
72
|
--theme-btn-outline-focus: var(--green-0);
|
|
73
73
|
--theme-btn-text-focus: var(--green-12);
|
|
74
74
|
|
|
75
|
-
--theme-form-focus-box-shadow:
|
|
75
|
+
--theme-form-focus-box-shadow: light-dark(var(--green-12), var(--green-2));
|
|
76
76
|
}
|
|
77
77
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--gray-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
**/
|
|
33
33
|
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
34
|
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
-
|
|
36
|
-
--theme-form-toggle-border: var(--
|
|
37
|
-
|
|
38
|
-
--theme-form-toggle-outline: var(--
|
|
35
|
+
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
|
|
37
|
+
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
|
|
39
39
|
--theme-form-toggle-symbol-off: var(--gray-4);
|
|
40
40
|
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
41
41
|
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--orange-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--orange-12), var(--orange-12));
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
**/
|
|
33
33
|
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
34
|
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
-
|
|
36
|
-
--theme-form-toggle-border: var(--
|
|
37
|
-
|
|
38
|
-
--theme-form-toggle-outline: var(--
|
|
35
|
+
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--orange-12), var(--orange-1));
|
|
37
|
+
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--orange-12), var(--orange-12));
|
|
39
39
|
--theme-form-toggle-symbol-off: var(--orange-12);
|
|
40
40
|
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
41
41
|
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
@@ -72,6 +72,6 @@
|
|
|
72
72
|
--theme-btn-outline-focus: var(--orange-0);
|
|
73
73
|
--theme-btn-text-focus: var(--orange-12);
|
|
74
74
|
|
|
75
|
-
--theme-form-focus-box-shadow:
|
|
75
|
+
--theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
|
|
76
76
|
}
|
|
77
77
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
@import './_primary
|
|
2
|
-
@import './_secondary
|
|
3
|
-
@import './_tertiary
|
|
4
|
-
@import './_ghost
|
|
5
|
-
@import './_error
|
|
6
|
-
@import './_success
|
|
7
|
-
@import './_warning
|
|
1
|
+
@import './_primary';
|
|
2
|
+
@import './_secondary';
|
|
3
|
+
@import './_tertiary';
|
|
4
|
+
@import './_ghost';
|
|
5
|
+
@import './_error';
|
|
6
|
+
@import './_success';
|
|
7
|
+
@import './_warning';
|
|
8
|
+
@import './_input-action';
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--form-element-padding-block-start: 0.4lh;
|
|
3
|
+
--form-element-padding-block-end: 0.4lh;
|
|
4
|
+
--form-element-border-width: 0.2rem;
|
|
5
|
+
--form-element-outline-width: 0.1rem;
|
|
6
|
+
|
|
7
|
+
[data-size='x-small'] {
|
|
8
|
+
--form-element-font-size: var(--step-0);
|
|
9
|
+
--form-placeholder-font-size: calc(var(--step-0) * 0.65);
|
|
10
|
+
--form-element-line-height: var(--step-0);
|
|
11
|
+
--form-icon-size: var(--step-0);
|
|
12
|
+
--form-button-padding-inline: calc(var(--step-0) * 1.65);
|
|
13
|
+
--form-text-padding-inline: calc(var(--step-0) * 0.25);
|
|
14
|
+
--form-button-icon-gap: calc(var(--step-0) * 0.65);
|
|
15
|
+
--form-input-border-radius: 0.4rem;
|
|
16
|
+
--form-icon-only-button-size: calc(var(--step-1) * 2);
|
|
17
|
+
--form-toggle-symbol-size: calc(var(--step-0) * 1.55);
|
|
18
|
+
--form-toggle-switch-width-adjustment: 0.5rem;
|
|
19
|
+
|
|
20
|
+
--form-input-checkbox-radio-button-size: var(--step-0);
|
|
21
|
+
}
|
|
22
|
+
[data-size='small'] {
|
|
23
|
+
--form-element-font-size: var(--step-1);
|
|
24
|
+
--form-placeholder-font-size: calc(var(--step-1) * 0.65);
|
|
25
|
+
--form-element-line-height: var(--step-1);
|
|
26
|
+
--form-icon-size: var(--step-1);
|
|
27
|
+
--form-button-padding-inline: calc(var(--step-0) * 1.65);
|
|
28
|
+
--form-text-padding-inline: calc(var(--step-0) * 0.25);
|
|
29
|
+
--form-button-icon-gap: calc(var(--step-0) * 0.65);
|
|
30
|
+
--form-input-border-radius: 0.4rem;
|
|
31
|
+
--form-icon-only-button-size: calc(var(--step-1) * 2.25);
|
|
32
|
+
--form-toggle-symbol-size: calc(var(--step-1) * 1.635);
|
|
33
|
+
--form-toggle-switch-width-adjustment: 0.3rem;
|
|
34
|
+
|
|
35
|
+
--form-input-checkbox-radio-button-size: var(--step-1);
|
|
36
|
+
}
|
|
37
|
+
[data-size='normal'] {
|
|
38
|
+
--form-element-font-size: var(--step-2);
|
|
39
|
+
--form-placeholder-font-size: calc(var(--step-2) * 0.65);
|
|
40
|
+
--form-element-line-height: var(--step-2);
|
|
41
|
+
--form-icon-size: var(--step-2);
|
|
42
|
+
--form-button-padding-inline: calc(var(--step-0) * 1.65);
|
|
43
|
+
--form-text-padding-inline: calc(var(--step-0) * 0.25);
|
|
44
|
+
--form-button-icon-gap: calc(var(--step-0) * 0.65);
|
|
45
|
+
--form-input-border-radius: 0.4rem;
|
|
46
|
+
--form-icon-only-button-size: calc(var(--step-1) * 2.5);
|
|
47
|
+
--form-toggle-symbol-size: calc(var(--step-2) * 1.72);
|
|
48
|
+
--form-toggle-switch-width-adjustment: 0.2rem;
|
|
49
|
+
|
|
50
|
+
--form-input-checkbox-radio-button-size: var(--step-2);
|
|
51
|
+
}
|
|
52
|
+
[data-size='medium'] {
|
|
53
|
+
--form-element-font-size: var(--step-3);
|
|
54
|
+
--form-placeholder-font-size: calc(var(--step-3) * 0.65);
|
|
55
|
+
--form-element-line-height: var(--step-3);
|
|
56
|
+
--form-icon-size: var(--step-3);
|
|
57
|
+
--form-button-padding-inline: calc(var(--step-0) * 1.65);
|
|
58
|
+
--form-text-padding-inline: calc(var(--step-0) * 0.25);
|
|
59
|
+
--form-button-icon-gap: calc(var(--step-0) * 0.65);
|
|
60
|
+
--form-input-border-radius: 0.4rem;
|
|
61
|
+
--form-icon-only-button-size: calc(var(--step-1) * 2.75);
|
|
62
|
+
--form-toggle-symbol-size: calc(var(--step-3) * 1.78);
|
|
63
|
+
--form-toggle-switch-width-adjustment: 0rem;
|
|
64
|
+
|
|
65
|
+
--form-input-checkbox-radio-button-size: var(--step-3);
|
|
66
|
+
}
|
|
67
|
+
[data-size='large'] {
|
|
68
|
+
--form-element-font-size: var(--step-4);
|
|
69
|
+
--form-placeholder-font-size: calc(var(--step-4) * 0.65);
|
|
70
|
+
--form-element-line-height: var(--step-4);
|
|
71
|
+
--form-icon-size: var(--step-4);
|
|
72
|
+
--form-button-padding-inline: calc(var(--step-0) * 1.75);
|
|
73
|
+
--form-text-padding-inline: calc(var(--step-0) * 0.25);
|
|
74
|
+
--form-button-icon-gap: calc(var(--step-0) * 0.75);
|
|
75
|
+
--form-input-border-radius: 0.4rem;
|
|
76
|
+
--form-icon-only-button-size: calc(var(--step-1) * 3);
|
|
77
|
+
--form-toggle-symbol-size: calc(var(--step-4) * 1.816);
|
|
78
|
+
--form-toggle-switch-width-adjustment: -0.2rem;
|
|
79
|
+
|
|
80
|
+
--form-input-checkbox-radio-button-size: var(--step-4);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -2,71 +2,10 @@
|
|
|
2
2
|
--font-size: 1.6rem;
|
|
3
3
|
--line-height: calc((var(--font-size) * 2) - 1rem);
|
|
4
4
|
|
|
5
|
-
--input-border-radius: 0.4rem;
|
|
6
|
-
--input-border-width-thin: 0.1rem;
|
|
7
|
-
--input-border-width-default: 0.2rem;
|
|
8
|
-
--input-border-width-thick: 0.3rem;
|
|
9
|
-
|
|
10
|
-
--input-outline-radius: 0.4rem;
|
|
11
|
-
--input-outline-width-thin: 0.1rem;
|
|
12
|
-
--input-outline-width-default: 0.2rem;
|
|
13
|
-
--input-outline-width-thick: 0.3rem;
|
|
14
|
-
|
|
15
5
|
--font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
|
16
6
|
|
|
17
7
|
--theme-error-surface: var(--red-12);
|
|
18
8
|
--theme-error-text: var(--red-0);
|
|
19
9
|
|
|
20
|
-
--theme-form-button-font-size-
|
|
21
|
-
--theme-form-button-font-size-small: 1.4rem;
|
|
22
|
-
--theme-form-button-font-size-normal: 1.6rem;
|
|
23
|
-
--theme-form-button-font-size-medium: 1.8rem;
|
|
24
|
-
--theme-form-button-font-size-large: 2rem;
|
|
25
|
-
|
|
26
|
-
/*
|
|
27
|
-
* Button Padding
|
|
28
|
-
*/
|
|
29
|
-
|
|
30
|
-
--theme-form-button-line-height: 3rlh;
|
|
31
|
-
--theme-form-button-padding-inline: 3ch;
|
|
32
|
-
|
|
33
|
-
--theme-form-button-padding-block-x-small: 0.6rem;
|
|
34
|
-
--theme-form-button-padding-block-small: 0.8rem;
|
|
35
|
-
--theme-form-button-padding-block-normal: 1rem;
|
|
36
|
-
--theme-form-button-padding-block-medium: 1.2rem;
|
|
37
|
-
--theme-form-button-padding-block-large: 1.2rem;
|
|
38
|
-
|
|
39
|
-
--theme-form-button-padding-inline-x-small: 1.2rem;
|
|
40
|
-
--theme-form-button-padding-inline-small: 1.6rem;
|
|
41
|
-
--theme-form-button-padding-inline-normal: 2rem;
|
|
42
|
-
--theme-form-button-padding-inline-medium: 2.2rem;
|
|
43
|
-
--theme-form-button-padding-inline-large: 2.4rem;
|
|
44
|
-
|
|
45
|
-
/*
|
|
46
|
-
* Button Icon Sizes and Gap
|
|
47
|
-
*/
|
|
48
|
-
|
|
49
|
-
--theme-form-button-padding-inline-icon-only-x-small: 0.4rem;
|
|
50
|
-
--theme-form-button-padding-inline-icon-only-small: 0.6rem;
|
|
51
|
-
--theme-form-button-padding-inline-icon-only-normal: 0.8rem;
|
|
52
|
-
--theme-form-button-padding-inline-icon-only-medium: 1rem;
|
|
53
|
-
--theme-form-button-padding-inline-icon-only-large: 1.2rem;
|
|
54
|
-
|
|
55
|
-
--theme-form-button-padding-block-icon-only-x-small: 0.4rem;
|
|
56
|
-
--theme-form-button-padding-block-icon-only-small: 0.4rem;
|
|
57
|
-
--theme-form-button-padding-block-icon-only-normal: 0.6rem;
|
|
58
|
-
--theme-form-button-padding-block-icon-only-medium: 0.8rem;
|
|
59
|
-
--theme-form-button-padding-block-icon-only-large: 1rem;
|
|
60
|
-
|
|
61
|
-
--theme-form-button-icon-size-x-small: 1.8rem;
|
|
62
|
-
--theme-form-button-icon-size-small: 1.8rem;
|
|
63
|
-
--theme-form-button-icon-size-normal: 1.8rem;
|
|
64
|
-
--theme-form-button-icon-size-medium: 2rem;
|
|
65
|
-
--theme-form-button-icon-size-large: 2.2rem;
|
|
66
|
-
|
|
67
|
-
--theme-form-button-icon-gap-x-small: var(--theme-form-button-padding-inline-x-small);
|
|
68
|
-
--theme-form-button-icon-gap-small: var(--theme-form-button-padding-inline-small);
|
|
69
|
-
--theme-form-button-icon-gap-normal: var(--theme-form-button-padding-inline-normal);
|
|
70
|
-
--theme-form-button-icon-gap-medium: var(--theme-form-button-padding-inline-medium);
|
|
71
|
-
--theme-form-button-icon-gap-large: var(--theme-form-button-padding-inline-large);
|
|
10
|
+
--theme-form-button-font-size-normal: var(--form-element-font-size);
|
|
72
11
|
}
|
package/assets/styles/main.css
CHANGED
|
@@ -37,6 +37,12 @@
|
|
|
37
37
|
/* Body text */
|
|
38
38
|
|
|
39
39
|
.body-large {
|
|
40
|
+
font-size: var(--step-3);
|
|
41
|
+
font-weight: normal;
|
|
42
|
+
line-height: 1.5;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.body-medium {
|
|
40
46
|
font-size: var(--step-2);
|
|
41
47
|
font-weight: normal;
|
|
42
48
|
line-height: 1.5;
|
|
@@ -61,6 +67,12 @@
|
|
|
61
67
|
}
|
|
62
68
|
|
|
63
69
|
.body-large-semibold {
|
|
70
|
+
font-size: var(--step-3);
|
|
71
|
+
font-weight: 500;
|
|
72
|
+
line-height: 1.5;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.body-medium-semibold {
|
|
64
76
|
font-size: var(--step-2);
|
|
65
77
|
font-weight: 500;
|
|
66
78
|
line-height: 1.5;
|
|
@@ -85,6 +97,12 @@
|
|
|
85
97
|
}
|
|
86
98
|
|
|
87
99
|
.body-large-bold {
|
|
100
|
+
font-size: var(--step-3);
|
|
101
|
+
font-weight: bold;
|
|
102
|
+
line-height: 1.5;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.body-medium-bold {
|
|
88
106
|
font-size: var(--step-2);
|
|
89
107
|
font-weight: bold;
|
|
90
108
|
line-height: 1.5;
|
|
@@ -111,6 +129,18 @@
|
|
|
111
129
|
/* Links */
|
|
112
130
|
|
|
113
131
|
.link-large {
|
|
132
|
+
color: var(--theme-link-default);
|
|
133
|
+
font-size: var(--step-3);
|
|
134
|
+
font-weight: 600;
|
|
135
|
+
line-height: 1.5;
|
|
136
|
+
text-decoration: underline;
|
|
137
|
+
|
|
138
|
+
&:visited {
|
|
139
|
+
color: var(--theme-link-default);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.link-medium {
|
|
114
144
|
color: var(--theme-link-default);
|
|
115
145
|
font-size: var(--step-2);
|
|
116
146
|
font-weight: 600;
|
|
@@ -94,7 +94,7 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
|
|
|
94
94
|
transition-behavior: allow-discrete;
|
|
95
95
|
|
|
96
96
|
&.detached {
|
|
97
|
-
border-radius: var(--input-border-radius);
|
|
97
|
+
border-radius: var(--form-input-border-radius);
|
|
98
98
|
margin-block-start: 2rem;
|
|
99
99
|
}
|
|
100
100
|
|