srcdev-nuxt-forms 6.1.2 → 6.1.4
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/app/components/forms/c12/prop-validators/index.ts +44 -34
- package/nuxt.config.ts +0 -1
- package/package.json +1 -1
- package/app/assets/styles/extends-layer/srcdev-forms/components/_form-fieldset.css +0 -38
- package/app/assets/styles/extends-layer/srcdev-forms/components/_input-button.css +0 -66
- package/app/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-core.css +0 -66
- package/app/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-options-button.css +0 -76
- package/app/assets/styles/extends-layer/srcdev-forms/components/_input-description.css +0 -13
- package/app/assets/styles/extends-layer/srcdev-forms/components/_input-error.css +0 -54
- package/app/assets/styles/extends-layer/srcdev-forms/components/_input-label.css +0 -21
- package/app/assets/styles/extends-layer/srcdev-forms/components/_input-select.css +0 -140
- package/app/assets/styles/extends-layer/srcdev-forms/components/_input-text.css +0 -190
- package/app/assets/styles/extends-layer/srcdev-forms/components/_input-textarea.css +0 -96
- package/app/assets/styles/extends-layer/srcdev-forms/components/index.css +0 -10
- package/app/assets/styles/extends-layer/srcdev-forms/index.css +0 -2
- package/app/assets/styles/extends-layer/srcdev-forms/setup/_generic.css +0 -21
- package/app/assets/styles/extends-layer/srcdev-forms/setup/index.css +0 -4
- package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_error.css +0 -85
- package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_ghost.css +0 -85
- package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_input-action-underlined.css +0 -20
- package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_input-action.css +0 -20
- package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_primary.css +0 -92
- package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_secondary.css +0 -85
- package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_success.css +0 -85
- package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_tertiary.css +0 -85
- package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/_warning.css +0 -85
- package/app/assets/styles/extends-layer/srcdev-forms/setup/themes/index.css +0 -9
- package/app/assets/styles/extends-layer/srcdev-forms/setup/variables/_a11y.css +0 -7
- package/app/assets/styles/extends-layer/srcdev-forms/setup/variables/index.css +0 -1
- package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/_normal.css +0 -48
- package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/_underlined.css +0 -48
- package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/index.css +0 -3
- package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/sizes/_default.css +0 -13
- package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/sizes/_large.css +0 -12
- package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/sizes/_medium.css +0 -12
- package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/sizes/_small.css +0 -12
- package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/sizes/_x-small.css +0 -11
- package/app/assets/styles/extends-layer/srcdev-forms/setup/variants/sizes/index.css +0 -23
- package/app/assets/styles/main.css +0 -2
- package/app/assets/styles/setup/_head.css +0 -36
- package/app/assets/styles/setup/a11y/_utils.css +0 -20
- package/app/assets/styles/setup/a11y/_variables.css +0 -8
- package/app/assets/styles/setup/a11y/index.css +0 -2
- package/app/assets/styles/setup/index.css +0 -5
- package/app/assets/styles/setup/theming/colors/_blue.css +0 -15
- package/app/assets/styles/setup/theming/colors/_gray.css +0 -16
- package/app/assets/styles/setup/theming/colors/_green.css +0 -15
- package/app/assets/styles/setup/theming/colors/_orange.css +0 -15
- package/app/assets/styles/setup/theming/colors/_red.css +0 -15
- package/app/assets/styles/setup/theming/colors/_yellow.css +0 -15
- package/app/assets/styles/setup/theming/colors/index.css +0 -6
- package/app/assets/styles/setup/theming/index.css +0 -2
- package/app/assets/styles/setup/theming/themes/_default.css +0 -69
- package/app/assets/styles/setup/theming/themes/_error.css +0 -69
- package/app/assets/styles/setup/theming/themes/_ghost.css +0 -31
- package/app/assets/styles/setup/theming/themes/_info.css +0 -31
- package/app/assets/styles/setup/theming/themes/_primary.css +0 -41
- package/app/assets/styles/setup/theming/themes/_secondary.css +0 -69
- package/app/assets/styles/setup/theming/themes/_success.css +0 -69
- package/app/assets/styles/setup/theming/themes/_tertiary.css +0 -31
- package/app/assets/styles/setup/theming/themes/_warning.css +0 -71
- package/app/assets/styles/setup/theming/themes/index.css +0 -9
- package/app/assets/styles/setup/typography/index.css +0 -2
- package/app/assets/styles/setup/typography/utility-classes/_generic-font-classes.css +0 -217
- package/app/assets/styles/setup/typography/utility-classes/_generic-font-variation-settings.css +0 -29
- package/app/assets/styles/setup/typography/utility-classes/_generic-font-weights.css +0 -39
- package/app/assets/styles/setup/typography/utility-classes/index.css +0 -3
- package/app/assets/styles/setup/typography/vars/_reponsive-font-sizes.css +0 -12
- package/app/assets/styles/setup/typography/vars/index.css +0 -1
- package/app/assets/styles/setup/utility-classes/_fluid-spacing.css +0 -13
- package/app/assets/styles/setup/utility-classes/_margin.css +0 -334
- package/app/assets/styles/setup/utility-classes/_padding.css +0 -308
- package/app/assets/styles/setup/utility-classes/animations/_auto-rotate.css +0 -13
- package/app/assets/styles/setup/utility-classes/animations/_entry-exit-blur.css +0 -16
- package/app/assets/styles/setup/utility-classes/animations/_entry-slide-in.css +0 -15
- package/app/assets/styles/setup/utility-classes/animations/_entry-zoom-reveal.css +0 -15
- package/app/assets/styles/setup/utility-classes/animations/index.css +0 -4
- package/app/assets/styles/setup/utility-classes/index.css +0 -4
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
[data-theme-old='secondary'] {
|
|
3
|
-
--theme-button-surface: light-dark(var(--gray-1), var(--gray-4));
|
|
4
|
-
--theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
|
|
5
|
-
--theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
|
|
6
|
-
--theme-input-border: var(--gray-8);
|
|
7
|
-
--theme-input-border-active: var(--gray-2);
|
|
8
|
-
--theme-input-border-focus: var(--gray-2);
|
|
9
|
-
--theme-form-input-outline: white;
|
|
10
|
-
--theme-form-input-outline-active: var(--gray-6);
|
|
11
|
-
--theme-form-input-outline-focus: var(--gray-6);
|
|
12
|
-
--theme-form-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
|
|
13
|
-
--theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
|
|
14
|
-
--theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
15
|
-
|
|
16
|
-
--theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
|
|
17
|
-
--theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
18
|
-
--theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
19
|
-
|
|
20
|
-
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
21
|
-
|
|
22
|
-
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
23
|
-
--theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
|
|
24
|
-
--theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
|
|
25
|
-
--theme-form-checkbox-shadow: transparent;
|
|
26
|
-
--theme-form-checkbox-shadow-focus: var(--gray-6);
|
|
27
|
-
--theme-form-checkbox-symbol: var(--gray-12);
|
|
28
|
-
|
|
29
|
-
--theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
30
|
-
--theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
|
|
31
|
-
--theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
|
|
32
|
-
--theme-form-radio-shadow: transparent;
|
|
33
|
-
--theme-form-radio-shadow-focus: var(--gray-6);
|
|
34
|
-
--theme-form-radio-symbol: var(--gray-12);
|
|
35
|
-
|
|
36
|
-
--theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
|
|
37
|
-
|
|
38
|
-
/*
|
|
39
|
-
* ToggleSwitch
|
|
40
|
-
**/
|
|
41
|
-
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
42
|
-
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
43
|
-
|
|
44
|
-
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
|
|
45
|
-
|
|
46
|
-
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
|
|
47
|
-
--theme-form-toggle-symbol-off: var(--gray-4);
|
|
48
|
-
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
49
|
-
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
50
|
-
--theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
|
|
51
|
-
|
|
52
|
-
/*
|
|
53
|
-
* Checkbox as button
|
|
54
|
-
**/
|
|
55
|
-
|
|
56
|
-
--theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
|
|
57
|
-
|
|
58
|
-
--theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
|
|
59
|
-
--theme-checkbox-radio-button-border-width: 0.1rem;
|
|
60
|
-
|
|
61
|
-
--theme-checkbox-radio-button-outline-default: light-dark(var(--gray-5), var(--gray-5));
|
|
62
|
-
--theme-checkbox-radio-button-outline-width: 0.1rem;
|
|
63
|
-
|
|
64
|
-
--theme-checkbox-radio-button-label-default: light-dark(var(--gray-12), var(--gray-12));
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
[data-theme='secondary'] {
|
|
68
|
-
--theme-button-surface: var(--gray-12);
|
|
69
|
-
--theme-input-border: var(--gray-0);
|
|
70
|
-
--theme-btn-outline: var(--gray-12);
|
|
71
|
-
--theme-btn-text: var(--gray-0);
|
|
72
|
-
|
|
73
|
-
--theme-button-surface-hover: var(--gray-0);
|
|
74
|
-
--theme-input-border-hover: var(--gray-12);
|
|
75
|
-
--theme-btn-outline-hover: var(--gray-0);
|
|
76
|
-
--theme-btn-text-hover: var(--gray-12);
|
|
77
|
-
|
|
78
|
-
--theme-button-surface-focus: var(--gray-0);
|
|
79
|
-
--theme-input-border-focus: var(--gray-12);
|
|
80
|
-
--theme-btn-outline-focus: var(--gray-0);
|
|
81
|
-
--theme-btn-text-focus: var(--gray-12);
|
|
82
|
-
|
|
83
|
-
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
84
|
-
}
|
|
85
|
-
}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
[data-theme-old='success'] {
|
|
3
|
-
--theme-button-surface: light-dark(var(--gray-1), var(--gray-4));
|
|
4
|
-
--theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
|
|
5
|
-
--theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
|
|
6
|
-
--theme-input-border: var(--green-8);
|
|
7
|
-
--theme-input-border-active: var(--green-2);
|
|
8
|
-
--theme-input-border-focus: var(--green-2);
|
|
9
|
-
--theme-form-input-outline: white;
|
|
10
|
-
--theme-form-input-outline-active: var(--green-6);
|
|
11
|
-
--theme-form-input-outline-focus: var(--green-6);
|
|
12
|
-
--theme-form-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
|
|
13
|
-
--theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
|
|
14
|
-
--theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
15
|
-
|
|
16
|
-
--theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
|
|
17
|
-
--theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
18
|
-
--theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
19
|
-
|
|
20
|
-
--theme-form-focus-box-shadow: light-dark(var(--green-12), var(--green-2));
|
|
21
|
-
|
|
22
|
-
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
23
|
-
--theme-form-checkbox-border: light-dark(var(--green-12), var(--green-12));
|
|
24
|
-
--theme-form-checkbox-outline: light-dark(var(--green-1), var(--green-1));
|
|
25
|
-
--theme-form-checkbox-shadow: transparent;
|
|
26
|
-
--theme-form-checkbox-shadow-focus: var(--green-6);
|
|
27
|
-
--theme-form-checkbox-symbol: var(--green-12);
|
|
28
|
-
|
|
29
|
-
--theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
30
|
-
--theme-form-radio-border: light-dark(var(--green-12), var(--green-12));
|
|
31
|
-
--theme-form-radio-outline: light-dark(var(--green-1), var(--green-1));
|
|
32
|
-
--theme-form-radio-shadow: transparent;
|
|
33
|
-
--theme-form-radio-shadow-focus: var(--green-6);
|
|
34
|
-
--theme-form-radio-symbol: var(--green-12);
|
|
35
|
-
|
|
36
|
-
--theme-form-range-accent-color: light-dark(var(--green-12), var(--green-3));
|
|
37
|
-
|
|
38
|
-
/*
|
|
39
|
-
* ToggleSwitch
|
|
40
|
-
**/
|
|
41
|
-
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
42
|
-
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
43
|
-
|
|
44
|
-
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--green-12), var(--green-1));
|
|
45
|
-
|
|
46
|
-
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--green-12), var(--green-12));
|
|
47
|
-
--theme-form-toggle-symbol-off: var(--green-4);
|
|
48
|
-
--theme-form-toggle-symbol-on: var(--green-12);
|
|
49
|
-
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
50
|
-
--theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
|
|
51
|
-
|
|
52
|
-
/*
|
|
53
|
-
* Checkbox as button
|
|
54
|
-
**/
|
|
55
|
-
|
|
56
|
-
--theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
|
|
57
|
-
|
|
58
|
-
--theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
|
|
59
|
-
--theme-checkbox-radio-button-border-width: 0.1rem;
|
|
60
|
-
|
|
61
|
-
--theme-checkbox-radio-button-outline-default: light-dark(var(--green-5), var(--green-5));
|
|
62
|
-
--theme-checkbox-radio-button-outline-width: 0.1rem;
|
|
63
|
-
|
|
64
|
-
--theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
[data-theme='success'] {
|
|
68
|
-
--theme-button-surface: var(--green-12);
|
|
69
|
-
--theme-input-border: var(--green-0);
|
|
70
|
-
--theme-btn-outline: var(--green-12);
|
|
71
|
-
--theme-btn-text: var(--green-0);
|
|
72
|
-
|
|
73
|
-
--theme-button-surface-hover: var(--green-0);
|
|
74
|
-
--theme-input-border-hover: var(--green-12);
|
|
75
|
-
--theme-btn-outline-hover: var(--green-0);
|
|
76
|
-
--theme-btn-text-hover: var(--green-12);
|
|
77
|
-
|
|
78
|
-
--theme-button-surface-focus: var(--green-0);
|
|
79
|
-
--theme-input-border-focus: var(--green-12);
|
|
80
|
-
--theme-btn-outline-focus: var(--green-0);
|
|
81
|
-
--theme-btn-text-focus: var(--green-12);
|
|
82
|
-
|
|
83
|
-
--theme-form-focus-box-shadow: light-dark(var(--green-12), var(--green-2));
|
|
84
|
-
}
|
|
85
|
-
}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
[data-theme-old='tertiary'] {
|
|
3
|
-
--theme-button-surface: light-dark(var(--gray-1), var(--gray-4));
|
|
4
|
-
--theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
|
|
5
|
-
--theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
|
|
6
|
-
--theme-input-border: var(--gray-8);
|
|
7
|
-
--theme-input-border-active: var(--gray-2);
|
|
8
|
-
--theme-input-border-focus: var(--gray-2);
|
|
9
|
-
--theme-form-input-outline: white;
|
|
10
|
-
--theme-form-input-outline-active: var(--gray-6);
|
|
11
|
-
--theme-form-input-outline-focus: var(--gray-6);
|
|
12
|
-
--theme-form-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
|
|
13
|
-
--theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
|
|
14
|
-
--theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
15
|
-
|
|
16
|
-
--theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
|
|
17
|
-
--theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
18
|
-
--theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
19
|
-
|
|
20
|
-
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
21
|
-
|
|
22
|
-
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
23
|
-
--theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
|
|
24
|
-
--theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
|
|
25
|
-
--theme-form-checkbox-shadow: transparent;
|
|
26
|
-
--theme-form-checkbox-shadow-focus: var(--gray-6);
|
|
27
|
-
--theme-form-checkbox-symbol: var(--gray-12);
|
|
28
|
-
|
|
29
|
-
--theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
30
|
-
--theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
|
|
31
|
-
--theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
|
|
32
|
-
--theme-form-radio-shadow: transparent;
|
|
33
|
-
--theme-form-radio-shadow-focus: var(--gray-6);
|
|
34
|
-
--theme-form-radio-symbol: var(--gray-12);
|
|
35
|
-
|
|
36
|
-
--theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
|
|
37
|
-
|
|
38
|
-
/*
|
|
39
|
-
* ToggleSwitch
|
|
40
|
-
**/
|
|
41
|
-
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
42
|
-
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
43
|
-
|
|
44
|
-
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
|
|
45
|
-
|
|
46
|
-
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
|
|
47
|
-
--theme-form-toggle-symbol-off: var(--gray-4);
|
|
48
|
-
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
49
|
-
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
50
|
-
--theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
|
|
51
|
-
|
|
52
|
-
/*
|
|
53
|
-
* Checkbox as button
|
|
54
|
-
**/
|
|
55
|
-
|
|
56
|
-
--theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
|
|
57
|
-
|
|
58
|
-
--theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
|
|
59
|
-
--theme-checkbox-radio-button-border-width: 0.1rem;
|
|
60
|
-
|
|
61
|
-
--theme-checkbox-radio-button-outline-default: light-dark(var(--green-5), var(--green-5));
|
|
62
|
-
--theme-checkbox-radio-button-outline-width: 0.1rem;
|
|
63
|
-
|
|
64
|
-
--theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
[data-theme='tertiary'] {
|
|
68
|
-
--theme-button-surface: var(--gray-0);
|
|
69
|
-
--theme-input-border: var(--gray-0);
|
|
70
|
-
--theme-btn-outline: var(--gray-12);
|
|
71
|
-
--theme-btn-text: var(--gray-12);
|
|
72
|
-
|
|
73
|
-
--theme-button-surface-hover: var(--gray-12);
|
|
74
|
-
--theme-input-border-hover: var(--gray-0);
|
|
75
|
-
--theme-btn-outline-hover: var(--gray-12);
|
|
76
|
-
--theme-btn-text-hover: var(--gray-0);
|
|
77
|
-
|
|
78
|
-
--theme-button-surface-focus: var(--gray-12);
|
|
79
|
-
--theme-input-border-focus: var(--gray-0);
|
|
80
|
-
--theme-btn-outline-focus: var(--gray-12);
|
|
81
|
-
--theme-btn-text-focus: var(--gray-0);
|
|
82
|
-
|
|
83
|
-
--theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem var(--gray-12);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
[data-theme-old='warning'] {
|
|
3
|
-
--theme-button-surface: light-dark(var(--gray-1), var(--gray-4));
|
|
4
|
-
--theme-form-input-bg-outlined: light-dark(var(--gray-1), var(--gray-4));
|
|
5
|
-
--theme-form-input-bg-underlined: light-dark(var(--gray-1), var(--gray-4));
|
|
6
|
-
--theme-input-border: var(--orange-8);
|
|
7
|
-
--theme-input-border-active: var(--orange-2);
|
|
8
|
-
--theme-input-border-focus: var(--orange-2);
|
|
9
|
-
--theme-form-input-outline: white;
|
|
10
|
-
--theme-form-input-outline-active: var(--orange-6);
|
|
11
|
-
--theme-form-input-outline-focus: var(--orange-6);
|
|
12
|
-
--theme-form-input-text-color-normal: light-dark(var(--gray-10), var(--gray-11));
|
|
13
|
-
--theme-form-input-text-color-outlined: light-dark(var(--gray-10), var(--gray-1));
|
|
14
|
-
--theme-form-input-text-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
15
|
-
|
|
16
|
-
--theme-form-input-text-label-color-normal: light-dark(var(--gray-11), var(--gray-1));
|
|
17
|
-
--theme-form-input-text-label-color-outlined: light-dark(var(--gray-10), var(--gray-11));
|
|
18
|
-
--theme-form-input-text-label-color-underlined: light-dark(var(--gray-11), var(--gray-1));
|
|
19
|
-
|
|
20
|
-
--theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
|
|
21
|
-
|
|
22
|
-
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
23
|
-
--theme-form-checkbox-border: light-dark(var(--orange-12), var(--orange-12));
|
|
24
|
-
--theme-form-checkbox-outline: light-dark(var(--orange-1), var(--orange-1));
|
|
25
|
-
--theme-form-checkbox-shadow: transparent;
|
|
26
|
-
--theme-form-checkbox-shadow-focus: var(--orange-6);
|
|
27
|
-
--theme-form-checkbox-symbol: var(--orange-12);
|
|
28
|
-
|
|
29
|
-
--theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
30
|
-
--theme-form-radio-border: light-dark(var(--orange-12), var(--orange-12));
|
|
31
|
-
--theme-form-radio-outline: light-dark(var(--orange-1), var(--orange-1));
|
|
32
|
-
--theme-form-radio-shadow: transparent;
|
|
33
|
-
--theme-form-radio-shadow-focus: var(--orange-6);
|
|
34
|
-
--theme-form-radio-symbol: var(--orange-12);
|
|
35
|
-
|
|
36
|
-
--theme-form-range-accent-color: light-dark(var(--orange-12), var(--orange-3));
|
|
37
|
-
|
|
38
|
-
/*
|
|
39
|
-
* ToggleSwitch
|
|
40
|
-
**/
|
|
41
|
-
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
42
|
-
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
43
|
-
|
|
44
|
-
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--orange-12), var(--orange-1));
|
|
45
|
-
|
|
46
|
-
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--orange-12), var(--orange-12));
|
|
47
|
-
--theme-form-toggle-symbol-off: var(--orange-12);
|
|
48
|
-
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
49
|
-
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
50
|
-
--theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
|
|
51
|
-
|
|
52
|
-
/*
|
|
53
|
-
* Checkbox as button
|
|
54
|
-
**/
|
|
55
|
-
|
|
56
|
-
--theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
|
|
57
|
-
|
|
58
|
-
--theme-checkbox-radio-button-border-default: light-dark(var(--orange-12), var(--orange-12));
|
|
59
|
-
--theme-checkbox-radio-button-border-width: 0.1rem;
|
|
60
|
-
|
|
61
|
-
--theme-checkbox-radio-button-outline-default: light-dark(var(--orange-5), var(--orange-5));
|
|
62
|
-
--theme-checkbox-radio-button-outline-width: 0.1rem;
|
|
63
|
-
|
|
64
|
-
--theme-checkbox-radio-button-label-default: light-dark(var(--orange-12), var(--orange-12));
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
[data-theme='warning'] {
|
|
68
|
-
--theme-button-surface: var(--orange-12);
|
|
69
|
-
--theme-input-border: var(--orange-0);
|
|
70
|
-
--theme-btn-outline: var(--orange-12);
|
|
71
|
-
--theme-btn-text: var(--orange-0);
|
|
72
|
-
|
|
73
|
-
--theme-button-surface-hover: var(--orange-0);
|
|
74
|
-
--theme-input-border-hover: var(--orange-12);
|
|
75
|
-
--theme-btn-outline-hover: var(--orange-0);
|
|
76
|
-
--theme-btn-text-hover: var(--orange-12);
|
|
77
|
-
|
|
78
|
-
--theme-button-surface-focus: var(--orange-0);
|
|
79
|
-
--theme-input-border-focus: var(--orange-12);
|
|
80
|
-
--theme-btn-outline-focus: var(--orange-0);
|
|
81
|
-
--theme-btn-text-focus: var(--orange-12);
|
|
82
|
-
|
|
83
|
-
--theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
|
|
84
|
-
}
|
|
85
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--theme-focus-visible-outline: 1px solid var(--theme-focus-visible-outline);
|
|
3
|
-
|
|
4
|
-
--theme-focus-visible-shadow-soft: 0 1px 2px rgba(var(--theme-focus-visible-shadow-soft), 0.05);
|
|
5
|
-
--theme-focus-visible-shadow-medium: 0 3px 6px rgba(var(--theme-focus-visible-shadow-medium), 0.1);
|
|
6
|
-
--theme-focus-visible-shadow-strong: 0 6px 12px rgba(var(--theme-focus-visible-shadow-strong), 0.15);
|
|
7
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import './_a11y';
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
.normal {
|
|
3
|
-
/* --input-row-margin-block-start: 0; */
|
|
4
|
-
|
|
5
|
-
/* --element-decorator-background-color: var(--theme-button-surface); */
|
|
6
|
-
/* --element-decorator-background-color: color-mix(in srgb, currentColor 5%, transparent); */
|
|
7
|
-
|
|
8
|
-
/* --element-decorator-margin-block-start: 0.5rem; */
|
|
9
|
-
/* --element-decorator-padding-inline: 1rem; */
|
|
10
|
-
|
|
11
|
-
/* --element-decorator-outline-default: 1px solid color-mix(in srgb, var(--theme-input-border) 5%, transparent); */
|
|
12
|
-
/* --element-decorator-outline-active: 1px solid var(--theme-input-border); */
|
|
13
|
-
|
|
14
|
-
/* Border styles */
|
|
15
|
-
/* --element-decorator-border-top-left-radius: var(--form-input-border-radius); */
|
|
16
|
-
/* --element-decorator-border-top-right-radius: var(--form-input-border-radius); */
|
|
17
|
-
/* --element-decorator-border-bottom-right-radius: var(--form-input-border-radius); */
|
|
18
|
-
/* --element-decorator-border-bottom-left-radius: var(--form-input-border-radius); */
|
|
19
|
-
|
|
20
|
-
/* --element-decorator-border-top-default: var(--form-element-border-width) solid var(--theme-input-border); */
|
|
21
|
-
/* --element-decorator-border-right-default: var(--form-element-border-width) solid var(--theme-input-border); */
|
|
22
|
-
/* --element-decorator-border-bottom-default: var(--form-element-border-width) solid var(--theme-input-border); */
|
|
23
|
-
/* --element-decorator-border-left-default: var(--form-element-border-width) solid var(--theme-input-border); */
|
|
24
|
-
|
|
25
|
-
/* --input-placeholder-color: light-dark(var(--gray-7), var(--gray-5)); */
|
|
26
|
-
/* --input-placeholder-font-size: var(--step-5); */
|
|
27
|
-
/* --input-placeholder-font-style: italic; */
|
|
28
|
-
/* --input-placeholder-font-weight: normal; */
|
|
29
|
-
/* --input-placeholder-line-height: 1; */
|
|
30
|
-
|
|
31
|
-
/* Label vars */
|
|
32
|
-
--_label-text-color: var(--theme-form-input-text-label-color-underlined);
|
|
33
|
-
--_label-text-margin-block: 0.8rem;
|
|
34
|
-
--_label-text-size: var(--step-5);
|
|
35
|
-
--_label-text-weight: normal;
|
|
36
|
-
--_label-text-line-height: 1.5;
|
|
37
|
-
|
|
38
|
-
.error {
|
|
39
|
-
--element-decorator-border-bottom-right-radius: 0;
|
|
40
|
-
--element-decorator-border-bottom-left-radius: 0;
|
|
41
|
-
|
|
42
|
-
--element-decorator-border-top-default: var(--form-element-border-width) solid var(--theme-error-surface);
|
|
43
|
-
--element-decorator-border-right-default: var(--form-element-border-width) solid var(--theme-error-surface);
|
|
44
|
-
--element-decorator-border-bottom-default: var(--form-element-border-width) solid var(--theme-error-surface);
|
|
45
|
-
--element-decorator-border-left-default: var(--form-element-border-width) solid var(--theme-error-surface);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
.underlined {
|
|
3
|
-
/* --input-row-margin-block-start: 3em; */
|
|
4
|
-
|
|
5
|
-
/* --element-decorator-background-color: var(--theme-button-surface); */
|
|
6
|
-
/* --element-decorator-background-color: color-mix(in srgb, currentColor 5%, transparent); */
|
|
7
|
-
|
|
8
|
-
/* --element-decorator-margin-block-start: 0.5rem; */
|
|
9
|
-
/* --element-decorator-padding-inline: 1rem; */
|
|
10
|
-
|
|
11
|
-
/* --element-decorator-outline-default: 1px solid transparent; */
|
|
12
|
-
/* --element-decorator-outline-active: 1px solid var(--theme-input-border); */
|
|
13
|
-
|
|
14
|
-
/* Border styles */
|
|
15
|
-
--element-decorator-border-top-left-radius: 0;
|
|
16
|
-
--element-decorator-border-top-right-radius: 0;
|
|
17
|
-
--element-decorator-border-bottom-right-radius: var(--form-input-border-radius);
|
|
18
|
-
--element-decorator-border-bottom-left-radius: var(--form-input-border-radius);
|
|
19
|
-
|
|
20
|
-
/* --element-decorator-border-top-default: var(--form-element-border-width) solid transparent;
|
|
21
|
-
--element-decorator-border-right-default: var(--form-element-border-width) solid transparent;
|
|
22
|
-
--element-decorator-border-bottom-default: var(--form-element-border-width-underlined) solid var(--theme-input-border);
|
|
23
|
-
--element-decorator-border-left-default: var(--form-element-border-width) solid transparent; */
|
|
24
|
-
|
|
25
|
-
--input-placeholder-color: light-dark(var(--gray-7), var(--gray-5));
|
|
26
|
-
--input-placeholder-font-size: var(--step-5);
|
|
27
|
-
--input-placeholder-font-style: italic;
|
|
28
|
-
--input-placeholder-font-weight: normal;
|
|
29
|
-
--input-placeholder-line-height: 1;
|
|
30
|
-
|
|
31
|
-
/* Label vars */
|
|
32
|
-
--_label-text-color: var(--theme-form-input-text-label-color-underlined);
|
|
33
|
-
--_label-text-margin-block: 0.8rem;
|
|
34
|
-
--_label-text-size: var(--step-5);
|
|
35
|
-
--_label-text-weight: normal;
|
|
36
|
-
--_label-text-line-height: 1.5;
|
|
37
|
-
|
|
38
|
-
.error {
|
|
39
|
-
--element-decorator-border-bottom-right-radius: 0;
|
|
40
|
-
--element-decorator-border-bottom-left-radius: 0;
|
|
41
|
-
|
|
42
|
-
--element-decorator-border-top-default: var(--form-element-border-width) solid var(--theme-error-surface);
|
|
43
|
-
--element-decorator-border-right-default: var(--form-element-border-width) solid var(--theme-error-surface);
|
|
44
|
-
--element-decorator-border-bottom-default: var(--form-element-border-width) solid var(--theme-error-surface);
|
|
45
|
-
--element-decorator-border-left-default: var(--form-element-border-width) solid var(--theme-error-surface);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--form-element-font-size: var(--step-5);
|
|
3
|
-
--form-placeholder-font-size: calc(var(--step-5) * 0.65);
|
|
4
|
-
--form-element-line-height: var(--step-5);
|
|
5
|
-
--form-icon-size: var(--step-5);
|
|
6
|
-
--form-input-border-radius: 0.4rem;
|
|
7
|
-
--form-icon-only-button-size: calc(var(--step-4) * 2.5 + 1px);
|
|
8
|
-
--form-toggle-symbol-size: calc(var(--step-5) * 1.72);
|
|
9
|
-
--form-toggle-switch-width-adjustment: 0.2rem;
|
|
10
|
-
|
|
11
|
-
/* Checkboxes */
|
|
12
|
-
--theme-checkbox-decorator-icon-size: 2rem;
|
|
13
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
[data-size='large'] {
|
|
3
|
-
--form-element-font-size: var(--step-6);
|
|
4
|
-
--form-placeholder-font-size: calc(var(--step-6) * 0.65);
|
|
5
|
-
--form-element-line-height: var(--step-6);
|
|
6
|
-
--form-icon-size: var(--step-6);
|
|
7
|
-
--form-input-border-radius: 0.4rem;
|
|
8
|
-
--form-icon-only-button-size: calc(var(--step-4) * 2.75 + 1px);
|
|
9
|
-
--form-toggle-symbol-size: calc(var(--step-6) * 1.78);
|
|
10
|
-
--form-toggle-switch-width-adjustment: 0rem;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
[data-size='medium'] {
|
|
3
|
-
--form-element-font-size: var(--step-6);
|
|
4
|
-
--form-placeholder-font-size: calc(var(--step-6) * 0.65);
|
|
5
|
-
--form-element-line-height: var(--step-6);
|
|
6
|
-
--form-icon-size: var(--step-6);
|
|
7
|
-
--form-input-border-radius: 0.4rem;
|
|
8
|
-
--form-icon-only-button-size: calc(var(--step-4) * 2.75 + 1px);
|
|
9
|
-
--form-toggle-symbol-size: calc(var(--step-6) * 1.78);
|
|
10
|
-
--form-toggle-switch-width-adjustment: 0rem;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
[data-size='small'] {
|
|
3
|
-
--form-element-font-size: var(--step-4);
|
|
4
|
-
--form-placeholder-font-size: calc(var(--step-4) * 0.65);
|
|
5
|
-
--form-element-line-height: var(--step-4);
|
|
6
|
-
--form-icon-size: var(--step-4);
|
|
7
|
-
--form-input-border-radius: 0.4rem;
|
|
8
|
-
--form-icon-only-button-size: calc(var(--step-4) * 2.25 + 1px);
|
|
9
|
-
--form-toggle-symbol-size: calc(var(--step-4) * 1.635);
|
|
10
|
-
--form-toggle-switch-width-adjustment: 0.3rem;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
[data-size='x-small'] {
|
|
3
|
-
--form-element-font-size: var(--step-3);
|
|
4
|
-
--form-placeholder-font-size: calc(var(--step-3) * 0.65);
|
|
5
|
-
--form-element-line-height: var(--step-3);
|
|
6
|
-
--form-input-border-radius: 0.4rem;
|
|
7
|
-
--form-icon-only-button-size: calc(var(--step-4) * 2 + 1px);
|
|
8
|
-
--form-toggle-symbol-size: calc(var(--step-3) * 1.55);
|
|
9
|
-
--form-toggle-switch-width-adjustment: 0.5rem;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
@import './_x-small';
|
|
2
|
-
@import './_small';
|
|
3
|
-
@import './_default';
|
|
4
|
-
@import './_medium';
|
|
5
|
-
@import './_large';
|
|
6
|
-
|
|
7
|
-
:root {
|
|
8
|
-
--form-element-padding-block-start: 0.4lh;
|
|
9
|
-
--form-element-padding-block-end: 0.4lh;
|
|
10
|
-
--form-element-border-width: 0.2rem;
|
|
11
|
-
--form-element-border-width-underlined: 0.4rem;
|
|
12
|
-
--form-element-outline-width: 0.1rem;
|
|
13
|
-
--form-element-outline-offset-focus: 0.2rem;
|
|
14
|
-
|
|
15
|
-
--form-text-padding-inline: 0.5em;
|
|
16
|
-
--form-button-padding-inline: 1.25em;
|
|
17
|
-
--form-button-icon-gap: 1em;
|
|
18
|
-
--form-input-border-radius: 0.4rem;
|
|
19
|
-
--form-input-border-radius-underlined: 0;
|
|
20
|
-
|
|
21
|
-
--input-element-padding-block: 1.25rem;
|
|
22
|
-
--input-element-padding-inline: 1rem;
|
|
23
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
/* --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; */
|
|
3
|
-
/* --font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
|
|
4
|
-
|
|
5
|
-
--font-family: 'Quicksand', futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
html {
|
|
9
|
-
color-scheme: light dark;
|
|
10
|
-
|
|
11
|
-
&[data-color-scheme='light'] {
|
|
12
|
-
color-scheme: light;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
&[data-color-scheme='dark'] {
|
|
16
|
-
color-scheme: dark;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
background-color: var(--page-bg);
|
|
20
|
-
|
|
21
|
-
font-size: 62.5%;
|
|
22
|
-
|
|
23
|
-
transition: background-color 0.4s ease, color 0.4s ease;
|
|
24
|
-
scrollbar-gutter: stable;
|
|
25
|
-
|
|
26
|
-
overflow-x: hidden;
|
|
27
|
-
}
|
|
28
|
-
body {
|
|
29
|
-
color: light-dark(var(--gray-12), var(--gray-3));
|
|
30
|
-
font-family: var(--font-family);
|
|
31
|
-
font-size: var(--step-4);
|
|
32
|
-
min-height: 100vh;
|
|
33
|
-
transition: background-color 0.4s ease, color 0.4s ease;
|
|
34
|
-
|
|
35
|
-
overflow-x: hidden;
|
|
36
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
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
|
-
} */
|
|
@@ -1,8 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--blue-0: #e7f5ff;
|
|
3
|
-
--blue-1: #d0ebff;
|
|
4
|
-
--blue-2: #a5d8ff;
|
|
5
|
-
--blue-3: #74c0fc;
|
|
6
|
-
--blue-4: #4dabf7;
|
|
7
|
-
--blue-5: #339af0;
|
|
8
|
-
--blue-6: #228be6;
|
|
9
|
-
--blue-7: #1c7ed6;
|
|
10
|
-
--blue-8: #1971c2;
|
|
11
|
-
--blue-9: #1864ab;
|
|
12
|
-
--blue-10: #145591;
|
|
13
|
-
--blue-11: #0043c1;
|
|
14
|
-
--blue-12: #0e01cd;
|
|
15
|
-
}
|