srcdev-nuxt-forms 0.1.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/LICENSE +21 -0
  2. package/assets/styles/brand/_brand.css +150 -0
  3. package/assets/styles/brand/_brand_dark.css +152 -0
  4. package/assets/styles/brand/_palette_dark.css +148 -0
  5. package/assets/styles/brand/_palette_light.css +148 -0
  6. package/assets/styles/brand/_typography.css +176 -0
  7. package/assets/styles/brand/index.css +1 -0
  8. package/assets/styles/forms/index.css +1 -1
  9. package/assets/styles/forms/themes/_default.css +3 -0
  10. package/assets/styles/forms/themes/_error.css +45 -11
  11. package/assets/styles/forms/themes/_ghost.css +42 -10
  12. package/assets/styles/forms/themes/_primary.css +42 -10
  13. package/assets/styles/forms/themes/_secondary.css +42 -10
  14. package/assets/styles/forms/themes/_success.css +42 -11
  15. package/assets/styles/forms/themes/_tertiary.css +42 -10
  16. package/assets/styles/forms/themes/_warning.css +42 -10
  17. package/assets/styles/forms/themes/index.css +1 -0
  18. package/assets/styles/forms/variables/_palette.css +104 -0
  19. package/assets/styles/forms/variables/_theme.css +12 -18
  20. package/assets/styles/forms/variables/index.css +2 -0
  21. package/assets/styles/main.css +2 -0
  22. package/assets/styles/scaffolding/_margin-helpers.css +308 -0
  23. package/assets/styles/scaffolding/_padding-helpers.css +308 -0
  24. package/assets/styles/scaffolding/_page.css +23 -0
  25. package/assets/styles/scaffolding/index.css +3 -0
  26. package/assets/styles/variables/colors/_blue.css +2 -2
  27. package/assets/styles/variables/colors/_gray.css +2 -1
  28. package/assets/styles/variables/colors/_green.css +2 -2
  29. package/assets/styles/variables/colors/_orange.css +2 -2
  30. package/assets/styles/variables/colors/_red.css +2 -2
  31. package/assets/styles/variables/colors/_yellow.css +1 -1
  32. package/components/forms/c12/prop-validators/index.ts +8 -20
  33. package/components/forms/c12/utils.ts +14 -0
  34. package/components/forms/c12/validation-patterns/en.json +12 -0
  35. package/components/forms/form-errors/InputError.vue +177 -0
  36. package/components/forms/input-button/InputButtonCore.vue +33 -109
  37. package/components/forms/input-button/variants/InputButtonConfirm.vue +1 -1
  38. package/components/forms/input-button/variants/InputButtonSubmit.vue +1 -1
  39. package/components/forms/input-checkbox/InputCheckboxCore.vue +263 -0
  40. package/components/forms/input-checkbox/InputCheckboxWithLabel.vue +116 -0
  41. package/components/forms/input-checkbox/variants/MultipleCheckboxes.vue +167 -0
  42. package/components/forms/input-checkbox/variants/SingleCheckbox.vue +172 -0
  43. package/components/forms/input-number/InputNumberCore.vue +184 -0
  44. package/components/forms/input-number/variants/InputNumberDefault.vue +155 -0
  45. package/components/forms/input-radio/InputRadiobuttonCore.vue +212 -0
  46. package/components/forms/input-radio/InputRadiobuttonWithLabel.vue +103 -0
  47. package/components/forms/input-radio/variants/MultipleRadiobuttons.vue +166 -0
  48. package/components/forms/input-range/InputRangeCore.vue +153 -0
  49. package/components/forms/input-range/variants/InputRangeDefault.vue +159 -0
  50. package/components/forms/input-text/InputTextCore.vue +149 -87
  51. package/components/forms/input-text/variants/material/InputPasswordWithLabel.vue +99 -0
  52. package/components/forms/input-text/variants/material/InputTextAsNumberWithLabel.vue +142 -0
  53. package/components/forms/input-text/variants/material/InputTextWithLabel.vue +125 -0
  54. package/components/forms/input-textarea/InputTextareaCore.vue +161 -0
  55. package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue +106 -0
  56. package/components/scaffolding/footer/NavFooter.vue +62 -0
  57. package/components/ui/content-grid/ContentGrid.vue +85 -0
  58. package/composables/useApiRequest.ts +25 -0
  59. package/composables/useErrorMessages.ts +17 -5
  60. package/composables/useFormControl.ts +149 -37
  61. package/composables/useSleep.ts +2 -2
  62. package/composables/useStyleClassPassthrough.ts +30 -0
  63. package/composables/useZodValidation.ts +120 -0
  64. package/layouts/default.vue +26 -16
  65. package/nuxt.config.ts +22 -0
  66. package/package.json +13 -8
  67. package/pages/forms/examples/buttons/index.vue +14 -13
  68. package/pages/forms/examples/material/cssbattle.vue +60 -0
  69. package/pages/forms/examples/material/text-fields.vue +551 -93
  70. package/pages/index.vue +2 -2
  71. package/pages/limit-text.vue +43 -0
  72. package/pages/typography.vue +83 -0
  73. package/server/api/places/list.get.ts +23 -0
  74. package/server/api/textFields.post.ts +37 -0
  75. package/server/api/utils/index.get.ts +20 -0
  76. package/server/data/places/cities.json +43 -0
  77. package/server/data/places/countries.json +55 -0
  78. package/server/data/utils/title.json +49 -0
  79. package/types/types.forms.ts +135 -3
  80. package/types/types.places.ts +8 -0
  81. package/types/types.zodFormControl.ts +21 -0
  82. package/components/forms/input-text/variants/material/InputEmailMaterial.vue +0 -72
  83. package/components/forms/input-text/variants/material/InputPasswordMaterial.vue +0 -88
  84. package/components/forms/input-text/variants/material/InputTextMaterial.vue +0 -75
  85. package/components/forms/input-text/variants/material/InputTextMaterialCore.vue +0 -258
  86. package/composables/useUpdateStyleClassPassthrough.ts +0 -29
  87. package/pages/forms/examples/material/text-fields-compact.vue +0 -136
package/assets/styles/brand/_typography.css ADDED
@@ -0,0 +1,176 @@
1
+ :root {
2
+ --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
3
+ --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
4
+ --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
5
+ --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
6
+ --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
7
+ --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
8
+ --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
9
+ --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
10
+ }
11
+
12
+ /* .typography { */
13
+ /* font-family: 'Poppins', Sans-serif; */
14
+ /* font-family: var(--font-family); */
15
+
16
+ .heading-1 {
17
+ font-size: var(--step-5);
18
+ font-weight: bold;
19
+ line-height: 1.3;
20
+ }
21
+
22
+ .heading-2 {
23
+ font-size: var(--step-4);
24
+ font-weight: bold;
25
+ line-height: 1.3;
26
+ }
27
+
28
+ .heading-3 {
29
+ font-size: var(--step-3);
30
+ font-weight: bold;
31
+ line-height: 1.3;
32
+ }
33
+
34
+ .heading-4 {
35
+ font-size: var(--step-2);
36
+ font-weight: bold;
37
+ line-height: 1.3;
38
+ }
39
+
40
+ .heading-5 {
41
+ font-size: var(--step-1);
42
+ font-weight: bold;
43
+ line-height: 1.3;
44
+ }
45
+
46
+ .heading-6 {
47
+ font-size: var(--step-0);
48
+ font-weight: bold;
49
+ line-height: 1.3;
50
+ }
51
+
52
+ /* Body text */
53
+
54
+ .body-large {
55
+ font-size: var(--step-2);
56
+ font-weight: normal;
57
+ line-height: 1.5;
58
+ }
59
+
60
+ .body-normal {
61
+ font-size: var(--step-1);
62
+ font-weight: normal;
63
+ line-height: 1.5;
64
+ }
65
+
66
+ .body-small {
67
+ font-size: var(--step--0);
68
+ font-weight: normal;
69
+ line-height: 1.5;
70
+ }
71
+
72
+ .body-xsmall {
73
+ font-size: var(--step--1);
74
+ font-weight: normal;
75
+ line-height: 1.5;
76
+ }
77
+
78
+ .body-large-semibold {
79
+ font-size: var(--step-2);
80
+ font-weight: 500;
81
+ line-height: 1.5;
82
+ }
83
+
84
+ .body-normal-semibold {
85
+ font-size: var(--step-1);
86
+ font-weight: 500;
87
+ line-height: 1.5;
88
+ }
89
+
90
+ .body-small-semibold {
91
+ font-size: var(--step-0);
92
+ font-weight: 500;
93
+ line-height: 1.5;
94
+ }
95
+
96
+ .body-xsmall-semibold {
97
+ font-size: var(--step--1);
98
+ font-weight: 500;
99
+ line-height: 1.5;
100
+ }
101
+
102
+ .body-large-bold {
103
+ font-size: var(--step-2);
104
+ font-weight: bold;
105
+ line-height: 1.5;
106
+ }
107
+
108
+ .body-normal-bold {
109
+ font-size: var(--step-1);
110
+ font-weight: bold;
111
+ line-height: 1.5;
112
+ }
113
+
114
+ .body-small-bold {
115
+ font-size: var(--step-0);
116
+ font-weight: bold;
117
+ line-height: 1.5;
118
+ }
119
+
120
+ .body-xsmall-bold {
121
+ font-size: var(--step--1);
122
+ font-weight: bold;
123
+ line-height: 1.5;
124
+ }
125
+
126
+ /* Links */
127
+
128
+ .link-large {
129
+ color: var(--theme-link-default);
130
+ font-size: var(--step-2);
131
+ font-weight: 600;
132
+ line-height: 1.5;
133
+ text-decoration: underline;
134
+
135
+ &:visited {
136
+ color: var(--theme-link-default);
137
+ }
138
+ }
139
+
140
+ .link-normal {
141
+ color: var(--theme-link-default);
142
+ font-size: var(--step-1);
143
+ font-weight: 600;
144
+ line-height: 1.5;
145
+ text-decoration: underline;
146
+
147
+ &:visited,
148
+ &:active {
149
+ color: var(--theme-link-default);
150
+ }
151
+ }
152
+
153
+ .link-small {
154
+ color: var(--theme-link-default);
155
+ font-size: var(--step-0);
156
+ font-weight: 600;
157
+ line-height: 1.5;
158
+ text-decoration: underline;
159
+
160
+ &:visited {
161
+ color: var(--theme-link-default);
162
+ }
163
+ }
164
+
165
+ .link-xsmall {
166
+ color: var(--theme-link-default);
167
+ font-size: var(--step--1);
168
+ font-weight: 600;
169
+ line-height: 1.5;
170
+ text-decoration: underline;
171
+
172
+ &:visited {
173
+ color: var(--theme-link-default);
174
+ }
175
+ }
176
+ /* } */
package/assets/styles/brand/index.css ADDED
@@ -0,0 +1 @@
1
+ @import './_typography.css';
package/assets/styles/forms/index.css CHANGED
@@ -1,2 +1,2 @@
1
- @import './variables/_theme.css';
1
+ @import './variables/index.css';
2
2
  @import './themes/index.css';
package/assets/styles/forms/themes/_default.css ADDED
@@ -0,0 +1,3 @@
1
+ :root {
2
+ --theme-link-default: var(--blue-12);
3
+ }
package/assets/styles/forms/themes/_error.css CHANGED
@@ -1,12 +1,46 @@
1
- :where(html) {
2
- --theme-error: var(--red-7);
3
- --theme-form-error: var(--red-8);
4
- --theme-form-error-border: var(--red-2);
5
- --theme-form-error-border-hover: var(--red-0);
6
- --theme-form-error-outline: var(--red-9);
7
- --theme-form-error-outline-hover: var(--red-9);
8
- --theme-form-error-bg: var(--red-9);
9
- --theme-form-error-bg-hover: var(--red-2);
10
- --theme-form-error-color: var(--red-1);
11
- --theme-form-error-color-hover: var(--red-9);
1
+ :root {
2
+ [data-form-theme='error'] {
3
+ --theme-form-input-bg: white;
4
+ --theme-form-input-border: var(--red-8);
5
+ --theme-form-input-border-active: var(--red-2);
6
+ --theme-form-input-border-focus: var(--red-2);
7
+ --theme-form-input-outline: white;
8
+ --theme-form-input-outline-active: var(--red-6);
9
+ --theme-form-input-outline-focus: var(--red-6);
10
+ --theme-form-input-text: var(--brand-grayscale-text-form);
11
+
12
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--red-12);
13
+
14
+ --theme-form-checkbox-bg: white;
15
+ --theme-form-checkbox-shadow: transparent;
16
+ --theme-form-checkbox-shadow-focus: var(--red-6);
17
+ --theme-form-checkbox-symbol: var(--red-8);
18
+
19
+ --theme-form-radio-bg: white;
20
+ --theme-form-radio-shadow: transparent;
21
+ --theme-form-radio-shadow-focus: var(--red-6);
22
+ --theme-form-radio-symbol: var(--red-8);
23
+ }
24
+
25
+ [data-btn-theme='error'] {
26
+ --theme-btn-bg: var(--red-12);
27
+ --theme-btn-border: var(--red-0);
28
+ --theme-btn-outline: var(--red-12);
29
+ --theme-btn-text: var(--red-0);
30
+
31
+ --theme-btn-bg-hover: var(--red-0);
32
+ --theme-btn-border-hover: var(--red-12);
33
+ --theme-btn-outline-hover: var(--red-0);
34
+ --theme-btn-text-hover: var(--red-12);
35
+
36
+ --theme-btn-bg-focus: var(--red-0);
37
+ --theme-btn-border-focus: var(--red-12);
38
+ --theme-btn-outline-focus: var(--red-0);
39
+ --theme-btn-text-focus: var(--red-12);
40
+
41
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--red-12);
42
+ }
43
+
44
+ --theme-error-surface: var(--red-12);
45
+ --theme-error-text: var(--red-0);
12
46
  }
package/assets/styles/forms/themes/_ghost.css CHANGED
@@ -1,11 +1,43 @@
1
- :where(html) {
2
- --theme-form-ghost: var(--gray-8);
3
- --theme-form-ghost-border: transparent;
4
- --theme-form-ghost-border-hover: var(--gray-0);
5
- --theme-form-ghost-outline: transparent;
6
- --theme-form-ghost-outline-hover: var(--gray-11);
7
- --theme-form-ghost-bg: transparent;
8
- --theme-form-ghost-bg-hover: var(--gray-2);
9
- --theme-form-ghost-color: var(--gray-11);
10
- --theme-form-ghost-color-hover: var(--gray-11);
1
+ :root {
2
+ [data-form-theme='ghost'] {
3
+ --theme-form-input-bg: white;
4
+ --theme-form-input-border: var(--gray-8);
5
+ --theme-form-input-border-active: var(--gray-2);
6
+ --theme-form-input-border-focus: var(--gray-2);
7
+ --theme-form-input-outline: white;
8
+ --theme-form-input-outline-active: var(--gray-6);
9
+ --theme-form-input-outline-focus: var(--gray-6);
10
+ --theme-form-input-text: var(--brand-grayscale-text-form);
11
+
12
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-1);
13
+
14
+ --theme-form-checkbox-bg: white;
15
+ --theme-form-checkbox-shadow: transparent;
16
+ --theme-form-checkbox-shadow-focus: var(--gray-6);
17
+ --theme-form-checkbox-symbol: var(--gray-8);
18
+
19
+ --theme-form-radio-bg: white;
20
+ --theme-form-radio-shadow: transparent;
21
+ --theme-form-radio-shadow-focus: var(--gray-6);
22
+ --theme-form-radio-symbol: var(--gray-8);
23
+ }
24
+
25
+ [data-btn-theme='ghost'] {
26
+ --theme-btn-bg: var(--gray-0);
27
+ --theme-btn-border: transparent;
28
+ --theme-btn-outline: transparent;
29
+ --theme-btn-text: var(--gray-12);
30
+
31
+ --theme-btn-bg-hover: var(--gray-2);
32
+ --theme-btn-border-hover: transparent;
33
+ --theme-btn-outline-hover: transparent;
34
+ --theme-btn-text-hover: var(--gray-12);
35
+
36
+ --theme-btn-bg-focus: var(--gray-1);
37
+ --theme-btn-border-focus: transparent;
38
+ --theme-btn-outline-focus: transparent;
39
+ --theme-btn-text-focus: var(--gray-12);
40
+
41
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-1);
42
+ }
11
43
  }
package/assets/styles/forms/themes/_primary.css CHANGED
@@ -1,11 +1,43 @@
1
- :where(html) {
2
- --theme-form-primary: var(--blue-8);
3
- --theme-form-primary-border: var(--blue-2);
4
- --theme-form-primary-border-hover: var(--blue-0);
5
- --theme-form-primary-outline: var(--blue-11);
6
- --theme-form-primary-outline-hover: var(--blue-11);
7
- --theme-form-primary-bg: var(--blue-6);
8
- --theme-form-primary-bg-hover: var(--blue-2);
9
- --theme-form-primary-color: var(--blue-1);
10
- --theme-form-primary-color-hover: var(--blue-11);
1
+ :root {
2
+ [data-form-theme='primary'] {
3
+ --theme-form-input-bg: white;
4
+ --theme-form-input-border: var(--blue-8);
5
+ --theme-form-input-border-active: var(--blue-2);
6
+ --theme-form-input-border-focus: var(--blue-2);
7
+ --theme-form-input-outline: white;
8
+ --theme-form-input-outline-active: var(--blue-6);
9
+ --theme-form-input-outline-focus: var(--blue-6);
10
+ --theme-form-input-text: var(--brand-grayscale-text-form);
11
+
12
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--blue-12);
13
+
14
+ --theme-form-checkbox-bg: white;
15
+ --theme-form-checkbox-shadow: transparent;
16
+ --theme-form-checkbox-shadow-focus: var(--blue-6);
17
+ --theme-form-checkbox-symbol: var(--blue-8);
18
+
19
+ --theme-form-radio-bg: white;
20
+ --theme-form-radio-shadow: transparent;
21
+ --theme-form-radio-shadow-focus: var(--blue-6);
22
+ --theme-form-radio-symbol: var(--blue-8);
23
+ }
24
+
25
+ [data-btn-theme='primary'] {
26
+ --theme-btn-bg: var(--blue-12);
27
+ --theme-btn-border: var(--blue-0);
28
+ --theme-btn-outline: var(--blue-12);
29
+ --theme-btn-text: var(--blue-0);
30
+
31
+ --theme-btn-bg-hover: var(--blue-0);
32
+ --theme-btn-border-hover: var(--blue-12);
33
+ --theme-btn-outline-hover: var(--blue-0);
34
+ --theme-btn-text-hover: var(--blue-12);
35
+
36
+ --theme-btn-bg-focus: var(--blue-0);
37
+ --theme-btn-border-focus: var(--blue-12);
38
+ --theme-btn-outline-focus: var(--blue-0);
39
+ --theme-btn-text-focus: var(--blue-12);
40
+
41
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--blue-12);
42
+ }
11
43
  }
package/assets/styles/forms/themes/_secondary.css CHANGED
@@ -1,11 +1,43 @@
1
- :where(html) {
2
- --theme-form-secondary: var(--gray-8);
3
- --theme-form-secondary-border: var(--gray-2);
4
- --theme-form-secondary-border-hover: var(--gray-0);
5
- --theme-form-secondary-outline: var(--gray-8);
6
- --theme-form-secondary-outline-hover: var(--gray-8);
7
- --theme-form-secondary-bg: var(--gray-11);
8
- --theme-form-secondary-bg-hover: var(--gray-2);
9
- --theme-form-secondary-color: var(--gray-1);
10
- --theme-form-secondary-color-hover: var(--gray-11);
1
+ :root {
2
+ [data-form-theme='secondary'] {
3
+ --theme-form-input-bg: white;
4
+ --theme-form-input-border: var(--gray-8);
5
+ --theme-form-input-border-active: var(--gray-2);
6
+ --theme-form-input-border-focus: var(--gray-2);
7
+ --theme-form-input-outline: white;
8
+ --theme-form-input-outline-active: var(--gray-6);
9
+ --theme-form-input-outline-focus: var(--gray-6);
10
+ --theme-form-input-text: var(--brand-grayscale-text-form);
11
+
12
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
13
+
14
+ --theme-form-checkbox-bg: white;
15
+ --theme-form-checkbox-shadow: transparent;
16
+ --theme-form-checkbox-shadow-focus: var(--gray-6);
17
+ --theme-form-checkbox-symbol: var(--gray-8);
18
+
19
+ --theme-form-radio-bg: white;
20
+ --theme-form-radio-shadow: transparent;
21
+ --theme-form-radio-shadow-focus: var(--gray-6);
22
+ --theme-form-radio-symbol: var(--gray-8);
23
+ }
24
+
25
+ [data-btn-theme='secondary'] {
26
+ --theme-btn-bg: var(--gray-12);
27
+ --theme-btn-border: var(--gray-0);
28
+ --theme-btn-outline: var(--gray-12);
29
+ --theme-btn-text: var(--gray-0);
30
+
31
+ --theme-btn-bg-hover: var(--gray-0);
32
+ --theme-btn-border-hover: var(--gray-12);
33
+ --theme-btn-outline-hover: var(--gray-0);
34
+ --theme-btn-text-hover: var(--gray-12);
35
+
36
+ --theme-btn-bg-focus: var(--gray-0);
37
+ --theme-btn-border-focus: var(--gray-12);
38
+ --theme-btn-outline-focus: var(--gray-0);
39
+ --theme-btn-text-focus: var(--gray-12);
40
+
41
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
42
+ }
11
43
  }
package/assets/styles/forms/themes/_success.css CHANGED
@@ -1,12 +1,43 @@
1
- :where(html) {
2
- --theme-success: var(--green-7);
3
- --theme-form-success: var(--green-8);
4
- --theme-form-success-border: var(--green-2);
5
- --theme-form-success-border-hover: var(--green-0);
6
- --theme-form-success-outline: var(--green-9);
7
- --theme-form-success-outline-hover: var(--green-9);
8
- --theme-form-success-bg: var(--green-9);
9
- --theme-form-success-bg-hover: var(--green-2);
10
- --theme-form-success-color: var(--green-1);
11
- --theme-form-success-color-hover: var(--green-9);
1
+ :root {
2
+ [data-form-theme='success'] {
3
+ --theme-form-input-bg: white;
4
+ --theme-form-input-border: var(--green-8);
5
+ --theme-form-input-border-active: var(--green-2);
6
+ --theme-form-input-border-focus: var(--green-2);
7
+ --theme-form-input-outline: white;
8
+ --theme-form-input-outline-active: var(--green-6);
9
+ --theme-form-input-outline-focus: var(--green-6);
10
+ --theme-form-input-text: var(--brand-grayscale-text-form);
11
+
12
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--green-12);
13
+
14
+ --theme-form-checkbox-bg: white;
15
+ --theme-form-checkbox-shadow: transparent;
16
+ --theme-form-checkbox-shadow-focus: var(--green-6);
17
+ --theme-form-checkbox-symbol: var(--green-8);
18
+
19
+ --theme-form-radio-bg: white;
20
+ --theme-form-radio-shadow: transparent;
21
+ --theme-form-radio-shadow-focus: var(--green-6);
22
+ --theme-form-radio-symbol: var(--green-8);
23
+ }
24
+
25
+ [data-btn-theme='success'] {
26
+ --theme-btn-bg: var(--green-12);
27
+ --theme-btn-border: var(--green-0);
28
+ --theme-btn-outline: var(--green-12);
29
+ --theme-btn-text: var(--green-0);
30
+
31
+ --theme-btn-bg-hover: var(--green-0);
32
+ --theme-btn-border-hover: var(--green-12);
33
+ --theme-btn-outline-hover: var(--green-0);
34
+ --theme-btn-text-hover: var(--green-12);
35
+
36
+ --theme-btn-bg-focus: var(--green-0);
37
+ --theme-btn-border-focus: var(--green-12);
38
+ --theme-btn-outline-focus: var(--green-0);
39
+ --theme-btn-text-focus: var(--green-12);
40
+
41
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--green-12);
42
+ }
12
43
  }
package/assets/styles/forms/themes/_tertiary.css CHANGED
@@ -1,11 +1,43 @@
1
- :where(html) {
2
- --theme-form-tertiary: var(--gray-8);
3
- --theme-form-tertiary-border: var(--gray-2);
4
- --theme-form-tertiary-border-hover: var(--gray-2);
5
- --theme-form-tertiary-outline: var(--gray-8);
6
- --theme-form-tertiary-outline-hover: var(--gray-8);
7
- --theme-form-tertiary-bg: var(--gray-1);
8
- --theme-form-tertiary-bg-hover: var(--gray-11);
9
- --theme-form-tertiary-color: var(--gray-9);
10
- --theme-form-tertiary-color-hover: var(--gray-2);
1
+ :root {
2
+ [data-form-theme='tertiary'] {
3
+ --theme-form-input-bg: white;
4
+ --theme-form-input-border: var(--gray-8);
5
+ --theme-form-input-border-active: var(--gray-2);
6
+ --theme-form-input-border-focus: var(--gray-2);
7
+ --theme-form-input-outline: white;
8
+ --theme-form-input-outline-active: var(--gray-6);
9
+ --theme-form-input-outline-focus: var(--gray-6);
10
+ --theme-form-input-text: var(--brand-grayscale-text-form);
11
+
12
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
13
+
14
+ --theme-form-checkbox-bg: white;
15
+ --theme-form-checkbox-shadow: transparent;
16
+ --theme-form-checkbox-shadow-focus: var(--gray-6);
17
+ --theme-form-checkbox-symbol: var(--gray-8);
18
+
19
+ --theme-form-radio-bg: white;
20
+ --theme-form-radio-shadow: transparent;
21
+ --theme-form-radio-shadow-focus: var(--gray-6);
22
+ --theme-form-radio-symbol: var(--gray-8);
23
+ }
24
+
25
+ [data-btn-theme='tertiary'] {
26
+ --theme-btn-bg: var(--gray-0);
27
+ --theme-btn-border: var(--gray-0);
28
+ --theme-btn-outline: var(--gray-12);
29
+ --theme-btn-text: var(--gray-12);
30
+
31
+ --theme-btn-bg-hover: var(--gray-12);
32
+ --theme-btn-border-hover: var(--gray-0);
33
+ --theme-btn-outline-hover: var(--gray-12);
34
+ --theme-btn-text-hover: var(--gray-0);
35
+
36
+ --theme-btn-bg-focus: var(--gray-12);
37
+ --theme-btn-border-focus: var(--gray-0);
38
+ --theme-btn-outline-focus: var(--gray-12);
39
+ --theme-btn-text-focus: var(--gray-0);
40
+
41
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
42
+ }
11
43
  }
package/assets/styles/forms/themes/_warning.css CHANGED
@@ -1,11 +1,43 @@
1
- :where(html) {
2
- --theme-form-warning: var(--orange-8);
3
- --theme-form-warning-border: var(--orange-2);
4
- --theme-form-warning-border-hover: var(--orange-0);
5
- --theme-form-warning-outline: var(--orange-11);
6
- --theme-form-warning-outline-hover: var(--orange-11);
7
- --theme-form-warning-bg: var(--orange-6);
8
- --theme-form-warning-bg-hover: var(--orange-2);
9
- --theme-form-warning-color: var(--orange-1);
10
- --theme-form-warning-color-hover: var(--orange-11);
1
+ :root {
2
+ [data-form-theme='warning'] {
3
+ --theme-form-input-bg: white;
4
+ --theme-form-input-border: var(--orange-8);
5
+ --theme-form-input-border-active: var(--orange-2);
6
+ --theme-form-input-border-focus: var(--orange-2);
7
+ --theme-form-input-outline: white;
8
+ --theme-form-input-outline-active: var(--orange-6);
9
+ --theme-form-input-outline-focus: var(--orange-6);
10
+ --theme-form-input-text: var(--brand-grayscale-text-form);
11
+
12
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--orange-12);
13
+
14
+ --theme-form-checkbox-bg: white;
15
+ --theme-form-checkbox-shadow: transparent;
16
+ --theme-form-checkbox-shadow-focus: var(--orange-6);
17
+ --theme-form-checkbox-symbol: var(--orange-8);
18
+
19
+ --theme-form-radio-bg: white;
20
+ --theme-form-radio-shadow: transparent;
21
+ --theme-form-radio-shadow-focus: var(--orange-6);
22
+ --theme-form-radio-symbol: var(--orange-8);
23
+ }
24
+
25
+ [data-btn-theme='warning'] {
26
+ --theme-btn-bg: var(--orange-12);
27
+ --theme-btn-border: var(--orange-0);
28
+ --theme-btn-outline: var(--orange-12);
29
+ --theme-btn-text: var(--orange-0);
30
+
31
+ --theme-btn-bg-hover: var(--orange-0);
32
+ --theme-btn-border-hover: var(--orange-12);
33
+ --theme-btn-outline-hover: var(--orange-0);
34
+ --theme-btn-text-hover: var(--orange-12);
35
+
36
+ --theme-btn-bg-focus: var(--orange-0);
37
+ --theme-btn-border-focus: var(--orange-12);
38
+ --theme-btn-outline-focus: var(--orange-0);
39
+ --theme-btn-text-focus: var(--orange-12);
40
+
41
+ --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--orange-12);
42
+ }
11
43
  }
package/assets/styles/forms/themes/index.css CHANGED
@@ -1,3 +1,4 @@
1
+ @import './_default.css';
1
2
  @import './_primary.css';
2
3
  @import './_secondary.css';
3
4
  @import './_tertiary.css';