srcdev-nuxt-forms 2.1.32 → 2.1.34

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 (37) hide show
  1. package/assets/styles/forms/themes/_error.css +8 -6
  2. package/assets/styles/forms/themes/_ghost.css +8 -6
  3. package/assets/styles/forms/themes/_primary.css +8 -6
  4. package/assets/styles/forms/themes/_secondary.css +8 -6
  5. package/assets/styles/forms/themes/_success.css +8 -6
  6. package/assets/styles/forms/themes/_tertiary.css +8 -6
  7. package/assets/styles/forms/themes/_warning.css +8 -6
  8. package/assets/styles/forms/variables/_theme.css +43 -40
  9. package/assets/styles/utils/_margin-helpers.css +91 -91
  10. package/assets/styles/utils/_padding-helpers.css +91 -91
  11. package/assets/styles/utils/_page.css +11 -4
  12. package/components/forms/form-errors/InputError.vue +7 -7
  13. package/components/forms/input-button/InputButtonCore.vue +5 -4
  14. package/components/forms/input-checkbox/MultipleCheckboxes.vue +5 -5
  15. package/components/forms/input-checkbox/SingleCheckbox.vue +5 -5
  16. package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue +32 -32
  17. package/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue +9 -9
  18. package/components/forms/input-checkbox-radio/InputCheckboxRadioWithLabel.vue +2 -2
  19. package/components/forms/input-number/InputNumberCore.vue +3 -3
  20. package/components/forms/input-number/variants/InputNumberDefault.vue +4 -4
  21. package/components/forms/input-radio/MultipleRadiobuttons.vue +5 -5
  22. package/components/forms/input-range/InputRangeCore.vue +9 -9
  23. package/components/forms/input-range/variants/InputRangeDefault.vue +3 -3
  24. package/components/forms/input-range-fancy/InputRangeFancyCore.vue +23 -23
  25. package/components/forms/input-range-fancy/InputRangeFancyWithLabel.vue +3 -3
  26. package/components/forms/input-text/InputTextCore.vue +5 -5
  27. package/components/forms/input-text/variants/InputTextWithLabel.vue +1 -1
  28. package/components/forms/input-textarea/InputTextareaCore.vue +3 -3
  29. package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue +1 -1
  30. package/components/forms/toggle-switch/ToggleSwitchCore.vue +14 -18
  31. package/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue +2 -1
  32. package/components/forms/ui/FormField.vue +4 -4
  33. package/components/forms/ui/FormWrapper.vue +2 -2
  34. package/components/utils/dark-mode-switcher/DarkModeSwitcher.vue +23 -0
  35. package/composables/useColourScheme.ts +41 -0
  36. package/nuxt.config.ts +10 -0
  37. package/package.json +1 -1
package/assets/styles/forms/themes/_error.css CHANGED
@@ -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: 1px 1px 8px 1px light-dark(var(--red-12), var(--red-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem 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,8 +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
- --theme-form-toggle-border: 1px solid light-dark(var(--red-12), var(--red-1));
36
- --theme-form-toggle-outline: 1px solid light-dark(var(--red-12), var(--red-12));
35
+ --theme-form-toggle-border-width: 0.1rem;
36
+ --theme-form-toggle-border: var(--theme-form-toggle-border-width) solid light-dark(var(--red-12), var(--red-1));
37
+ --theme-form-toggle-border-outline: 0.1rem;
38
+ --theme-form-toggle-outline: var(--theme-form-toggle-border-outline) solid light-dark(var(--red-12), var(--red-12));
37
39
  --theme-form-toggle-symbol-off: var(--orange-12);
38
40
  --theme-form-toggle-symbol-on: var(--gray-12);
39
41
  --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
@@ -46,10 +48,10 @@
46
48
  --theme-checkbox-radio-button-bg-default: light-dark(var(--red-1), var(--red-1));
47
49
 
48
50
  --theme-checkbox-radio-button-border-default: light-dark(var(--red-12), var(--red-12));
49
- --theme-checkbox-radio-button-border-width: 1px;
51
+ --theme-checkbox-radio-button-border-width: 0.1rem;
50
52
 
51
53
  --theme-checkbox-radio-button-outline-default: light-dark(var(--red-5), var(--red-5));
52
- --theme-checkbox-radio-button-outline-width: 1px;
54
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
53
55
 
54
56
  --theme-checkbox-radio-button-label-default: light-dark(var(--red-12), var(--red-12));
55
57
  }
@@ -70,6 +72,6 @@
70
72
  --theme-btn-outline-focus: var(--red-0);
71
73
  --theme-btn-text-focus: var(--red-12);
72
74
 
73
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--red-12), var(--red-2));
75
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--red-12), var(--red-2));
74
76
  }
75
77
  }
package/assets/styles/forms/themes/_ghost.css CHANGED
@@ -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: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem 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,8 +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
- --theme-form-toggle-border: 1px solid light-dark(var(--gray-12), var(--gray-1));
36
- --theme-form-toggle-outline: 1px solid light-dark(var(--gray-12), var(--gray-12));
35
+ --theme-form-toggle-border-width: 0.1rem;
36
+ --theme-form-toggle-border: var(--theme-form-toggle-border-width) solid light-dark(var(--gray-12), var(--gray-1));
37
+ --theme-form-toggle-border-outline: 0.1rem;
38
+ --theme-form-toggle-outline: var(--theme-form-toggle-border-outline) solid light-dark(var(--gray-12), var(--gray-12));
37
39
  --theme-form-toggle-symbol-off: var(--gray-4);
38
40
  --theme-form-toggle-symbol-on: var(--gray-12);
39
41
  --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
@@ -46,10 +48,10 @@
46
48
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
47
49
 
48
50
  --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
49
- --theme-checkbox-radio-button-border-width: 1px;
51
+ --theme-checkbox-radio-button-border-width: 0.1rem;
50
52
 
51
53
  --theme-checkbox-radio-button-outline-default: light-dark(var(--gray-5), var(--gray-5));
52
- --theme-checkbox-radio-button-outline-width: 1px;
54
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
53
55
 
54
56
  --theme-checkbox-radio-button-label-default: light-dark(var(--gray-12), var(--gray-12));
55
57
  }
@@ -70,6 +72,6 @@
70
72
  --theme-btn-outline-focus: light-dark(var(--gray-12), var(--gray-0));
71
73
  --theme-btn-text-focus: light-dark(var(--gray-12), var(--gray-0));
72
74
 
73
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
75
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
74
76
  }
75
77
  }
package/assets/styles/forms/themes/_primary.css CHANGED
@@ -9,7 +9,7 @@
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: 1px 1px 8px 1px light-dark(var(--blue-12), var(--blue-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--blue-12), var(--blue-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(--blue-12), var(--blue-12));
@@ -32,8 +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
- --theme-form-toggle-border: 1px solid light-dark(var(--blue-12), var(--blue-1));
36
- --theme-form-toggle-outline: 1px solid light-dark(var(--blue-12), var(--blue-12));
35
+ --theme-form-toggle-border-width: 0.1rem;
36
+ --theme-form-toggle-border: var(--theme-form-toggle-border-width) solid light-dark(var(--blue-12), var(--blue-1));
37
+ --theme-form-toggle-border-outline: 0.1rem;
38
+ --theme-form-toggle-outline: var(--theme-form-toggle-border-outline) solid light-dark(var(--blue-12), var(--blue-12));
37
39
  --theme-form-toggle-symbol-off: var(--blue-7);
38
40
  --theme-form-toggle-symbol-on: var(--gray-12);
39
41
  --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
@@ -46,11 +48,11 @@
46
48
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
47
49
 
48
50
  --theme-checkbox-radio-button-border-default: light-dark(var(--blue-12), var(--blue-12));
49
- --theme-checkbox-radio-button-border-width: 1px;
51
+ --theme-checkbox-radio-button-border-width: 0.1rem;
50
52
 
51
53
  --theme-checkbox-radio-button-outline-default: light-dark(var(--blue-5), var(--blue-5));
52
54
  --theme-checkbox-radio-button-outline-focus: light-dark(var(--blue-12), var(--blue-12));
53
- --theme-checkbox-radio-button-outline-width: 1px;
55
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
54
56
 
55
57
  --theme-checkbox-radio-button-shadow: transparent;
56
58
  --theme-checkbox-radio-button-shadow-focus: light-dark(var(--blue-6), var(--blue-1));
@@ -74,6 +76,6 @@
74
76
  --theme-btn-outline-focus: var(--blue-0);
75
77
  --theme-btn-text-focus: var(--blue-12);
76
78
 
77
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--blue-12), var(--blue-2));
79
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--blue-12), var(--blue-2));
78
80
  }
79
81
  }
package/assets/styles/forms/themes/_secondary.css CHANGED
@@ -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: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem 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,8 +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
- --theme-form-toggle-border: 1px solid light-dark(var(--gray-12), var(--gray-1));
36
- --theme-form-toggle-outline: 1px solid light-dark(var(--gray-12), var(--gray-12));
35
+ --theme-form-toggle-border-width: 0.1rem;
36
+ --theme-form-toggle-border: var(--theme-form-toggle-border-width) solid light-dark(var(--gray-12), var(--gray-1));
37
+ --theme-form-toggle-border-outline: 0.1rem;
38
+ --theme-form-toggle-outline: var(--theme-form-toggle-border-outline) solid light-dark(var(--gray-12), var(--gray-12));
37
39
  --theme-form-toggle-symbol-off: var(--gray-4);
38
40
  --theme-form-toggle-symbol-on: var(--gray-12);
39
41
  --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
@@ -46,10 +48,10 @@
46
48
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
47
49
 
48
50
  --theme-checkbox-radio-button-border-default: light-dark(var(--gray-12), var(--gray-12));
49
- --theme-checkbox-radio-button-border-width: 1px;
51
+ --theme-checkbox-radio-button-border-width: 0.1rem;
50
52
 
51
53
  --theme-checkbox-radio-button-outline-default: light-dark(var(--gray-5), var(--gray-5));
52
- --theme-checkbox-radio-button-outline-width: 1px;
54
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
53
55
 
54
56
  --theme-checkbox-radio-button-label-default: light-dark(var(--gray-12), var(--gray-12));
55
57
  }
@@ -70,6 +72,6 @@
70
72
  --theme-btn-outline-focus: var(--gray-0);
71
73
  --theme-btn-text-focus: var(--gray-12);
72
74
 
73
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
75
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--gray-12), var(--gray-2));
74
76
  }
75
77
  }
package/assets/styles/forms/themes/_success.css CHANGED
@@ -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: 1px 1px 8px 1px light-dark(var(--green-12), var(--green-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem 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,8 +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
- --theme-form-toggle-border: 1px solid light-dark(var(--green-12), var(--green-1));
36
- --theme-form-toggle-outline: 1px solid light-dark(var(--green-12), var(--green-12));
35
+ --theme-form-toggle-border-width: 0.1rem;
36
+ --theme-form-toggle-border: var(--theme-form-toggle-border-width) solid light-dark(var(--green-12), var(--green-1));
37
+ --theme-form-toggle-border-outline: 0.1rem;
38
+ --theme-form-toggle-outline: var(--theme-form-toggle-border-outline) solid light-dark(var(--green-12), var(--green-12));
37
39
  --theme-form-toggle-symbol-off: var(--green-4);
38
40
  --theme-form-toggle-symbol-on: var(--green-12);
39
41
  --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
@@ -46,10 +48,10 @@
46
48
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
47
49
 
48
50
  --theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
49
- --theme-checkbox-radio-button-border-width: 1px;
51
+ --theme-checkbox-radio-button-border-width: 0.1rem;
50
52
 
51
53
  --theme-checkbox-radio-button-outline-default: light-dark(var(--green-5), var(--green-5));
52
- --theme-checkbox-radio-button-outline-width: 1px;
54
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
53
55
 
54
56
  --theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
55
57
  }
@@ -70,6 +72,6 @@
70
72
  --theme-btn-outline-focus: var(--green-0);
71
73
  --theme-btn-text-focus: var(--green-12);
72
74
 
73
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--green-12), var(--green-2));
75
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--green-12), var(--green-2));
74
76
  }
75
77
  }
package/assets/styles/forms/themes/_tertiary.css CHANGED
@@ -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: 1px 1px 8px 1px light-dark(var(--gray-12), var(--gray-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem 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,8 +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
- --theme-form-toggle-border: 1px solid light-dark(var(--gray-12), var(--gray-1));
36
- --theme-form-toggle-outline: 1px solid light-dark(var(--gray-12), var(--gray-12));
35
+ --theme-form-toggle-border-width: 0.1rem;
36
+ --theme-form-toggle-border: var(--theme-form-toggle-border-width) solid light-dark(var(--gray-12), var(--gray-1));
37
+ --theme-form-toggle-border-outline: 0.1rem;
38
+ --theme-form-toggle-outline: var(--theme-form-toggle-border-outline) solid light-dark(var(--gray-12), var(--gray-12));
37
39
  --theme-form-toggle-symbol-off: var(--gray-4);
38
40
  --theme-form-toggle-symbol-on: var(--gray-12);
39
41
  --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
@@ -46,10 +48,10 @@
46
48
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
47
49
 
48
50
  --theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
49
- --theme-checkbox-radio-button-border-width: 1px;
51
+ --theme-checkbox-radio-button-border-width: 0.1rem;
50
52
 
51
53
  --theme-checkbox-radio-button-outline-default: light-dark(var(--green-5), var(--green-5));
52
- --theme-checkbox-radio-button-outline-width: 1px;
54
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
53
55
 
54
56
  --theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
55
57
  }
@@ -70,6 +72,6 @@
70
72
  --theme-btn-outline-focus: var(--gray-12);
71
73
  --theme-btn-text-focus: var(--gray-0);
72
74
 
73
- --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
75
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem var(--gray-12);
74
76
  }
75
77
  }
package/assets/styles/forms/themes/_warning.css CHANGED
@@ -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: 1px 1px 8px 1px light-dark(var(--orange-12), var(--orange-2));
12
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem 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,8 +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
- --theme-form-toggle-border: 1px solid light-dark(var(--orange-12), var(--orange-1));
36
- --theme-form-toggle-outline: 1px solid light-dark(var(--orange-12), var(--orange-12));
35
+ --theme-form-toggle-border-width: 0.1rem;
36
+ --theme-form-toggle-border: var(--theme-form-toggle-border-width) solid light-dark(var(--orange-12), var(--orange-1));
37
+ --theme-form-toggle-border-outline: 0.1rem;
38
+ --theme-form-toggle-outline: var(--theme-form-toggle-border-outline) solid light-dark(var(--orange-12), var(--orange-12));
37
39
  --theme-form-toggle-symbol-off: var(--orange-12);
38
40
  --theme-form-toggle-symbol-on: var(--gray-12);
39
41
  --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
@@ -46,10 +48,10 @@
46
48
  --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
47
49
 
48
50
  --theme-checkbox-radio-button-border-default: light-dark(var(--orange-12), var(--orange-12));
49
- --theme-checkbox-radio-button-border-width: 1px;
51
+ --theme-checkbox-radio-button-border-width: 0.1rem;
50
52
 
51
53
  --theme-checkbox-radio-button-outline-default: light-dark(var(--orange-5), var(--orange-5));
52
- --theme-checkbox-radio-button-outline-width: 1px;
54
+ --theme-checkbox-radio-button-outline-width: 0.1rem;
53
55
 
54
56
  --theme-checkbox-radio-button-label-default: light-dark(var(--orange-12), var(--orange-12));
55
57
  }
@@ -70,6 +72,6 @@
70
72
  --theme-btn-outline-focus: var(--orange-0);
71
73
  --theme-btn-text-focus: var(--orange-12);
72
74
 
73
- --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--orange-12), var(--orange-2));
75
+ --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem light-dark(var(--orange-12), var(--orange-2));
74
76
  }
75
77
  }
package/assets/styles/forms/variables/_theme.css CHANGED
@@ -1,65 +1,68 @@
1
1
  :root {
2
- --font-size: 16px;
3
- --line-height: calc((var(--font-size) * 2) - 10px);
2
+ --font-size: 1.6rem;
3
+ --line-height: calc((var(--font-size) * 2) - 1rem);
4
4
 
5
- --input-border-radius: 4px;
6
- --input-border-width-thin: 1px;
7
- --input-border-width-default: 2px;
8
- --input-border-width-thick: 3px;
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
9
 
10
- --input-outline-radius: 4px;
11
- --input-outline-width-thin: 1px;
12
- --input-outline-width-default: 2px;
13
- --input-outline-width-thick: 3px;
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
14
 
15
15
  --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
16
16
 
17
17
  --theme-error-surface: var(--red-12);
18
18
  --theme-error-text: var(--red-0);
19
19
 
20
- --theme-form-button-font-size-x-small: 14px;
21
- --theme-form-button-font-size-small: 14px;
22
- --theme-form-button-font-size-normal: 16px;
23
- --theme-form-button-font-size-medium: 18px;
24
- --theme-form-button-font-size-large: 20px;
20
+ --theme-form-button-font-size-x-small: 1.4rem;
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
25
 
26
26
  /*
27
27
  * Button Padding
28
28
  */
29
29
 
30
- --theme-form-button-padding-block-x-small: 6px;
31
- --theme-form-button-padding-block-small: 8px;
32
- --theme-form-button-padding-block-normal: 10px;
33
- --theme-form-button-padding-block-medium: 12px;
34
- --theme-form-button-padding-block-large: 12px;
30
+ --theme-form-button-line-height: 3rlh;
31
+ --theme-form-button-padding-inline: 3ch;
35
32
 
36
- --theme-form-button-padding-inline-x-small: 12px;
37
- --theme-form-button-padding-inline-small: 16px;
38
- --theme-form-button-padding-inline-normal: 20px;
39
- --theme-form-button-padding-inline-medium: 22px;
40
- --theme-form-button-padding-inline-large: 24px;
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;
41
44
 
42
45
  /*
43
46
  * Button Icon Sizes and Gap
44
47
  */
45
48
 
46
- --theme-form-button-padding-inline-icon-only-x-small: 4px;
47
- --theme-form-button-padding-inline-icon-only-small: 6px;
48
- --theme-form-button-padding-inline-icon-only-normal: 8px;
49
- --theme-form-button-padding-inline-icon-only-medium: 10px;
50
- --theme-form-button-padding-inline-icon-only-large: 12px;
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;
51
54
 
52
- --theme-form-button-padding-block-icon-only-x-small: 4px;
53
- --theme-form-button-padding-block-icon-only-small: 4px;
54
- --theme-form-button-padding-block-icon-only-normal: 6px;
55
- --theme-form-button-padding-block-icon-only-medium: 8px;
56
- --theme-form-button-padding-block-icon-only-large: 10px;
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;
57
60
 
58
- --theme-form-button-icon-size-x-small: 18px;
59
- --theme-form-button-icon-size-small: 18px;
60
- --theme-form-button-icon-size-normal: 18px;
61
- --theme-form-button-icon-size-medium: 20px;
62
- --theme-form-button-icon-size-large: 22px;
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;
63
66
 
64
67
  --theme-form-button-icon-gap-x-small: var(--theme-form-button-padding-inline-x-small);
65
68
  --theme-form-button-icon-gap-small: var(--theme-form-button-padding-inline-small);